}
+ */
+ fabric.Image.fromURL = function(url, imgOptions) {
+ return fabric.util.loadImage(url, imgOptions || {}).then(function(img) {
+ return new fabric.Image(img, imgOptions);
+ });
+ };
+
+ /* _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'], Object.assign({ }, options || { }, parsedAttributes))
+ .then(function(fabricImage) {
+ callback(fabricImage);
+ });
+ };
+ /* _FROM_SVG_END_ */
+
diff --git a/src/shapes/index.ts b/src/shapes/index.ts
new file mode 100644
index 00000000000..a803aad0e3d
--- /dev/null
+++ b/src/shapes/index.ts
@@ -0,0 +1,15 @@
+export * from ./active_selection.class;
+export * from ./circle.class;
+export * from ./ellipse.class;
+export * from ./group.class;
+export * from ./image.class;
+export * from ./itext.class;
+export * from ./line.class;
+export * from ./object.class;
+export * from ./path.class;
+export * from ./polygon.class;
+export * from ./polyline.class;
+export * from ./rect.class;
+export * from ./text.class;
+export * from ./textbox.class;
+export * from ./triangle.class;
diff --git a/src/shapes/itext.class.ts b/src/shapes/itext.class.ts
new file mode 100644
index 00000000000..c918efbc293
--- /dev/null
+++ b/src/shapes/itext.class.ts
@@ -0,0 +1,536 @@
+//@ts-nocheck
+
+ /**
+ * 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
+ *
+ */
+export class IText extends fabric.Observable {
+
+ /**
+ * Type of an object
+ * @type String
+ * @default
+ */
+ type = 'i-text'
+
+ /**
+ * Index where text selection starts (or where cursor is when there is no selection)
+ * @type Number
+ * @default
+ */
+ selectionStart = 0
+
+ /**
+ * Index where text selection ends
+ * @type Number
+ * @default
+ */
+ selectionEnd = 0
+
+ /**
+ * Color of text selection
+ * @type String
+ * @default
+ */
+ selectionColor = 'rgba(17,119,255,0.3)'
+
+ /**
+ * Indicates whether text is in editing mode
+ * @type Boolean
+ * @default
+ */
+ isEditing = false
+
+ /**
+ * Indicates whether a text can be edited
+ * @type Boolean
+ * @default
+ */
+ editable = true
+
+ /**
+ * Border color of text object while it's in editing mode
+ * @type String
+ * @default
+ */
+ editingBorderColor = 'rgba(102,153,255,0.25)'
+
+ /**
+ * Width of cursor (in px)
+ * @type Number
+ * @default
+ */
+ 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
+ * be used instead of the color of the text at the current position.
+ * @type String
+ * @default
+ */
+ cursorColor = ''
+
+ /**
+ * Delay between cursor blink (in ms)
+ * @type Number
+ * @default
+ */
+ cursorDelay = 1000
+
+ /**
+ * Duration of cursor fadein (in ms)
+ * @type Number
+ * @default
+ */
+ cursorDuration = 600
+
+ /**
+ * Indicates whether internal text char widths can be cached
+ * @type Boolean
+ * @default
+ */
+ 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
+ * also with modals event capturing that won't let the textarea take focus.
+ * @type HTMLElement
+ * @default
+ */
+ hiddenTextareaContainer = null
+
+ /**
+ * @private
+ */
+ _reSpace = /\s|\n/
+
+ /**
+ * @private
+ */
+ _currentCursorOpacity = 0
+
+ /**
+ * @private
+ */
+ _selectionDirection = null
+
+ /**
+ * @private
+ */
+ _abortCursorAnimation = false
+
+ /**
+ * @private
+ */
+ __widthOfSpace = []
+
+ /**
+ * 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
+ */
+ constructor(text, options) {
+ super(text, options);
+ this.initBehavior();
+ }
+
+ /**
+ * While editing handle differently
+ * @private
+ * @param {string} key
+ * @param {*} value
+ */
+ _set(key, value) {
+ if (this.isEditing && this._savedProps && key in this._savedProps) {
+ this._savedProps[key] = value;
+ }
+ else {
+ super._set(key, value);
+ }
+ }
+
+ /**
+ * Sets selection start (left boundary of a selection)
+ * @param {Number} index Index to set selection start to
+ */
+ setSelectionStart(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(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(property, index) {
+ if (this[property] !== index) {
+ this._fireSelectionChanged();
+ this[property] = index;
+ }
+ this._updateTextarea();
+ }
+
+ /**
+ * Fires the even of selection changed
+ * @private
+ */
+ _fireSelectionChanged() {
+ 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() {
+ this.isEditing && this.initDelayedCursor();
+ this.clearContextTop();
+ super.initDimensions();
+ }
+
+ /**
+ * @private
+ * @param {CanvasRenderingContext2D} ctx Context to render on
+ */
+ render(ctx) {
+ this.clearContextTop();
+ super.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(ctx) {
+ super._render(ctx);
+ }
+
+ /**
+ * Prepare and clean the contextTop
+ */
+ clearContextTop(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() {
+ 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(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(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;
+ }
+
+ var left = this._getLeftOffset(),
+ top = this._getTopOffset(),
+ offsets = this._getCursorBoundariesOffsets(position);
+ return {
+ left: left,
+ top: top,
+ leftOffset: offsets.left,
+ topOffset: offsets.top
+ };
+ }
+
+ /**
+ * @private
+ */
+ _getCursorBoundariesOffsets(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;
+ }
+
+ /**
+ * Renders cursor
+ * @param {Object} boundaries
+ * @param {CanvasRenderingContext2D} ctx transformed context to draw on
+ */
+ renderCursor(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(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() {
+ 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
+ * 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() {
+ var cp = this._getCurrentCharIndex();
+ return this.getValueOfPropertyAt(cp.l, cp.c, 'fill');
+ }
+
+ /**
+ * Returns the cursor position for the getCurrent.. functions
+ * @private
+ */
+ _getCurrentCharIndex() {
+ 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');
+ };
diff --git a/src/shapes/line.class.ts b/src/shapes/line.class.ts
new file mode 100644
index 00000000000..a19458288b3
--- /dev/null
+++ b/src/shapes/line.class.ts
@@ -0,0 +1,320 @@
+//@ts-nocheck
+
+
+ '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 };
+
+
+
+ /**
+ * Line class
+ * @class fabric.Line
+ * @extends fabric.Object
+ * @see {@link fabric.Line#initialize} for constructor definition
+ */
+export class Line extends fabric.Object {
+
+ /**
+ * Type of an object
+ * @type String
+ * @default
+ */
+ type = 'line'
+
+ /**
+ * x value or first line edge
+ * @type Number
+ * @default
+ */
+ x1 = 0
+
+ /**
+ * y value or first line edge
+ * @type Number
+ * @default
+ */
+ y1 = 0
+
+ /**
+ * x value or second line edge
+ * @type Number
+ * @default
+ */
+ x2 = 0
+
+ /**
+ * y value or second line edge
+ * @type Number
+ * @default
+ */
+ y2 = 0
+
+ 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
+ */
+ constructor(points, options) {
+ if (!points) {
+ points = [0, 0, 0, 0];
+ }
+
+ super(options);
+
+ this.set('x1', points[0]);
+ this.set('y1', points[1]);
+ this.set('x2', points[2]);
+ this.set('y2', points[3]);
+
+ this._setWidthHeight(options);
+ }
+
+ /**
+ * @private
+ * @param {Object} [options] Options
+ */
+ _setWidthHeight(options) {
+ options || (options = { });
+
+ 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.top = 'top' in options
+ ? options.top
+ : this._getTopToOriginY();
+ }
+
+ /**
+ * @private
+ * @param {String} key
+ * @param {*} value
+ */
+ _set(key, value) {
+ super._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'
+ }
+ )
+
+ /**
+ * @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 {CanvasRenderingContext2D} ctx Context to render on
+ */
+ _render(ctx) {
+ ctx.beginPath();
+
+
+ var p = this.calcLinePoints();
+ ctx.moveTo(p.x1, p.y1);
+ ctx.lineTo(p.x2, p.y2);
+
+ 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;
+ }
+
+ /**
+ * 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() {
+ 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(propertiesToInclude) {
+ return extend(super.toObject(propertiesToInclude), this.calcLinePoints());
+ }
+
+ /*
+ * Calculate object dimensions from its properties
+ * @private
+ */
+ _getNonTransformedDimensions() {
+ var dim = super._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() {
+ 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_ */
+ /**
+ * Returns svg representation of an instance
+ * @return {Array} an array of strings with the specific svg representation
+ * of the instance
+ */
+ _toSVG() {
+ 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(' '));
+
+ /**
+ * 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_ */
+
+ /**
+ * 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;
+ });
+ };
+
+ /**
+ * 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));
+ }
+ };
+
+ }
+
diff --git a/src/shapes/object.class.ts b/src/shapes/object.class.ts
new file mode 100644
index 00000000000..ef6fcec4941
--- /dev/null
+++ b/src/shapes/object.class.ts
@@ -0,0 +1,1960 @@
+//@ts-nocheck
+
+
+ 'use strict';
+
+ 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
+ */
+export class Object extends fabric.CommonMethods {
+
+ /**
+ * 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'
+
+ /**
+ * 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
+
+ /**
+ * 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 height
+ * @type Number
+ * @default
+ */
+ height = 0
+
+ /**
+ * Object scale factor (horizontal)
+ * @type Number
+ * @default
+ */
+ scaleX = 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 vertically
+ * @type Boolean
+ * @default
+ */
+ flipY = false
+
+ /**
+ * Opacity of an object
+ * @type Number
+ * @default
+ */
+ opacity = 1
+
+ /**
+ * 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 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 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
+
+ /**
+ * 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
+
+ /**
+ * 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)'
+
+ /**
+ * 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 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'
+
+ /**
+ * 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 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)'
+
+ /**
+ * 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'
+
+ /**
+ * 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 = ''
+
+ /**
+ * 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
+
+ /**
+ * 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 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'
+
+ /**
+ * 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
+
+ /**
+ * 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
+
+ /**
+ * 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 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`, 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 `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 `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 rotation is locked
+ * @type Boolean
+ * @default
+ */
+ lockRotation = 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 horizontal skewing is locked
+ * @type Boolean
+ * @default
+ */
+ lockSkewingX = 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 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 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 `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
+
+ /**
+ * Determines if the fill or the stroke is drawn first (one of "fill" or "stroke")
+ * @type String
+ * @default
+ */
+ 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
+ * @private
+ * since 4.4.0
+ * @type String
+ * @default '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 ' +
+ '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 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 for animating colors.
+ * @type Array
+ */
+ 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
+
+ /**
+ * 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
+
+ /**
+ * 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
+ */
+ constructor(options) {
+ if (options) {
+ this.setOptions(options);
+ }
+ }
+
+ /**
+ * Create a the canvas used to keep the cached copy of the object
+ * @private
+ */
+ _createCacheCanvas() {
+ 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(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() {
+ 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() {
+ 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);
+ }
+ 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(options) {
+ this._setOptions(options);
+ }
+
+ /**
+ * Transforms context when rendering an object
+ * @param {CanvasRenderingContext2D} ctx Context
+ */
+ transform(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(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;
+ }
+
+ /**
+ * 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(propertiesToInclude) {
+ // will be overwritten by subclasses
+ return this.toObject(propertiesToInclude);
+ }
+
+ /**
+ * @private
+ * @param {Object} object
+ */
+ _removeDefaultValues(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;
+ }
+
+ /**
+ * Returns a string representation of an instance
+ * @return {String}
+ */
+ toString() {
+ return '#';
+ }
+
+ /**
+ * Return the object scale factor counting also the group scaling
+ * @return {fabric.Point}
+ */
+ getObjectScaling() {
+ // 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() {
+ 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() {
+ 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() {
+ return this.group ?
+ fabric.util.qrDecompose(this.calcTransformMatrix()).angle :
+ this.angle;
+ }
+
+ /**
+ * @private
+ * @param {String} key
+ * @param {*} value
+ * @return {fabric.Object} thisArg
+ */
+ _set(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);
+ }
+
+ 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);
+ }
+ }
+ return this;
+ }
+
+ /**
+ * Retrieves viewportTransform from Object's canvas if possible
+ * @method getViewportTransform
+ * @memberOf fabric.Object.prototype
+ * @return {Array}
+ */
+ getViewportTransform() {
+ 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() {
+ 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(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();
+ }
+
+ renderCache(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() {
+ 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.
+ * 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() {
+ 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.
+ * 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() {
+ 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.
+ * Created to be overridden
+ * since 1.7.12
+ * @returns Boolean
+ */
+ needsItsOwnCache() {
+ if (this.paintFirst === 'stroke' &&
+ this.hasFill() && this.hasStroke() && typeof this.shadow === 'object') {
+ 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
+ * 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() {
+ this.ownCaching = this.needsItsOwnCache() || (
+ this.objectCaching &&
+ (!this.group || !this.group.isOnACache())
+ );
+ 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() {
+ 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(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(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(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(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(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;
+ }
+
+ /**
+ * Draws a background for the object big as its untransformed dimensions
+ * @private
+ * @param {CanvasRenderingContext2D} ctx Context to render on
+ */
+ _renderBackground(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(ctx) {
+ if (this.group && !this.group._transformDone) {
+ ctx.globalAlpha = this.getObjectOpacity();
+ }
+ else {
+ ctx.globalAlpha *= this.opacity;
+ }
+ }
+
+ _setStrokeStyles(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;
+ }
+ }
+ }
+
+ _setFillStyles(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(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(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(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 (drawBorders && (styleOverride.forActiveSelection || this.group)) {
+ this.drawBordersInGroup(ctx, options, styleOverride);
+ }
+ else if (drawBorders) {
+ this.drawBorders(ctx, styleOverride);
+ }
+ drawControls && this.drawControls(ctx, styleOverride);
+ ctx.restore();
+ }
+
+ /**
+ * @private
+ * @param {CanvasRenderingContext2D} ctx Context to render on
+ */
+ _setShadow(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 *
+ (multX + multY) * (scaling.x + scaling.y) / 4;
+ ctx.shadowOffsetX = shadow.offsetX * multX * scaling.x;
+ ctx.shadowOffsetY = shadow.offsetY * multY * scaling.y;
+ }
+
+ /**
+ * @private
+ * @param {CanvasRenderingContext2D} ctx Context to render on
+ */
+ _removeShadow(ctx) {
+ if (!this.shadow) {
+ return;
+ }
+
+ 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(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
+ */
+ _renderPaintInOrder(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(/* ctx */) {
+
+ }
+
+ /**
+ * @private
+ * @param {CanvasRenderingContext2D} ctx Context to render on
+ */
+ _renderFill(ctx) {
+ if (!this.fill) {
+ return;
+ }
+
+ 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(ctx) {
+ if (!this.stroke || this.strokeWidth === 0) {
+ return;
+ }
+
+ 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();
+ }
+
+ /**
+ * 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(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() {
+ 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() {
+ 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(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(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
+ * 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(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
+ * @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