';
+ },
+
+ /**
+ * @private
+ * @param {CanvasRenderingContext2D} ctx Context to render on
+ */
+ _render: function(ctx) {
+ this.clipTo && fabric.util.clipContext(this, ctx);
+ this._setOpacity(ctx);
+ this._setShadow(ctx);
+ this._setupCompositeOperation(ctx);
+ this._renderTextBackground(ctx);
+ this._setStrokeStyles(ctx);
+ this._setFillStyles(ctx);
+ this._renderText(ctx);
+ this._renderTextDecoration(ctx);
+ this.clipTo && ctx.restore();
+ },
+
+ /**
+ * @private
+ * @param {CanvasRenderingContext2D} ctx Context to render on
+ */
+ _renderText: function(ctx) {
+ this._renderTextFill(ctx);
+ this._renderTextStroke(ctx);
+ },
+
+ /**
+ * @private
+ * @param {CanvasRenderingContext2D} ctx Context to render on
+ */
+ _setTextStyles: function(ctx) {
+ ctx.textBaseline = 'alphabetic';
+ ctx.font = this._getFontDeclaration();
+ },
+
+ /**
+ * @private
+ * @return {Number} Height of fabric.Text object
+ */
+ _getTextHeight: function() {
+ return this._getHeightOfSingleLine() + (this._textLines.length - 1) * this._getHeightOfLine();
+ },
+
+ /**
+ * @private
+ * @param {CanvasRenderingContext2D} ctx Context to render on
+ * @return {Number} Maximum width of fabric.Text object
+ */
+ _getTextWidth: function(ctx) {
+ var maxWidth = this._getLineWidth(ctx, 0);
+
+ for (var i = 1, len = this._textLines.length; i < len; i++) {
+ var currentLineWidth = this._getLineWidth(ctx, i);
+ if (currentLineWidth > maxWidth) {
+ maxWidth = currentLineWidth;
+ }
+ }
+ return maxWidth;
+ },
+
+ /*
+ * Calculate object dimensions from its properties
+ * @override
+ * @private
+ */
+ _getNonTransformedDimensions: function() {
+ return { x: this.width, y: this.height };
+ },
+
+ /**
+ * @private
+ * @param {String} method Method name ("fillText" or "strokeText")
+ * @param {CanvasRenderingContext2D} ctx Context to render on
+ * @param {String} chars Chars to render
+ * @param {Number} left Left position of text
+ * @param {Number} top Top position of text
+ */
+ _renderChars: function(method, ctx, chars, left, top) {
+ // remove Text word from method var
+ var shortM = method.slice(0, -4), char, width;
+ if (this[shortM].toLive) {
+ var offsetX = -this.width / 2 + this[shortM].offsetX || 0,
+ offsetY = -this.height / 2 + this[shortM].offsetY || 0;
+ ctx.save();
+ ctx.translate(offsetX, offsetY);
+ left -= offsetX;
+ top -= offsetY;
+ }
+ if (this.charSpacing !== 0) {
+ var additionalSpace = this._getWidthOfCharSpacing();
+ chars = chars.split('');
+ for (var i = 0, len = chars.length; i < len; i++) {
+ char = chars[i];
+ width = ctx.measureText(char).width + additionalSpace;
+ ctx[method](char, left, top);
+ left += width > 0 ? width : 0;
+ }
+ }
+ else {
+ ctx[method](chars, left, top);
+ }
+ this[shortM].toLive && 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) {
+ // lift the line by quarter of fontSize
+ top -= this.fontSize * this._fontSizeFraction;
+
+ // short-circuit
+ var lineWidth = this._getLineWidth(ctx, lineIndex);
+ if (this.textAlign !== 'justify' || this.width < lineWidth) {
+ this._renderChars(method, ctx, line, left, top, lineIndex);
+ return;
+ }
+
+ // stretch the line
+ var words = line.split(/\s+/),
+ charOffset = 0,
+ wordsWidth = this._getWidthOfWords(ctx, words.join(''), lineIndex, 0),
+ widthDiff = this.width - wordsWidth,
+ numSpaces = words.length - 1,
+ spaceWidth = numSpaces > 0 ? widthDiff / numSpaces : 0,
+ leftOffset = 0, word;
+
+ for (var i = 0, len = words.length; i < len; i++) {
+ while (line[charOffset] === ' ' && charOffset < line.length) {
+ charOffset++;
+ }
+ word = words[i];
+ this._renderChars(method, ctx, word, left + leftOffset, top, lineIndex, charOffset);
+ leftOffset += this._getWidthOfWords(ctx, word, lineIndex, charOffset) + spaceWidth;
+ charOffset += word.length;
+ }
+ },
+
+ /**
+ * @private
+ * @param {CanvasRenderingContext2D} ctx Context to render on
+ * @param {String} word
+ */
+ _getWidthOfWords: function (ctx, word) {
+ var width = ctx.measureText(word).width, charCount, additionalSpace;
+ if (this.charSpacing !== 0) {
+ charCount = word.split('').length;
+ additionalSpace = charCount * this._getWidthOfCharSpacing();
+ width += additionalSpace;
+ }
+ return width > 0 ? width : 0;
+ },
+
+ /**
+ * @private
+ * @return {Number} Left offset
+ */
+ _getLeftOffset: function() {
+ return -this.width / 2;
+ },
+
+ /**
+ * @private
+ * @return {Number} Top offset
+ */
+ _getTopOffset: function() {
+ return -this.height / 2;
+ },
+
+ /**
+ * Returns true because text has no style
+ */
+ isEmptyStyles: function() {
+ return true;
+ },
+
+ /**
+ * @private
+ * @param {CanvasRenderingContext2D} ctx Context to render on
+ * @param {String} method Method name ("fillText" or "strokeText")
+ */
+ _renderTextCommon: function(ctx, method) {
+
+ var lineHeights = 0, left = this._getLeftOffset(), top = this._getTopOffset();
+
+ for (var i = 0, len = this._textLines.length; i < len; i++) {
+ var heightOfLine = this._getHeightOfLine(ctx, i),
+ maxHeight = heightOfLine / this.lineHeight,
+ lineWidth = this._getLineWidth(ctx, i),
+ leftOffset = this._getLineLeftOffset(lineWidth);
+ this._renderTextLine(
+ method,
+ ctx,
+ this._textLines[i],
+ left + leftOffset,
+ top + lineHeights + maxHeight,
+ i
+ );
+ lineHeights += heightOfLine;
+ }
+ },
+
+ /**
+ * @private
+ * @param {CanvasRenderingContext2D} ctx Context to render on
+ */
+ _renderTextFill: function(ctx) {
+ if (!this.fill && this.isEmptyStyles()) {
+ return;
+ }
+
+ 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 (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
+ * @return {Number} height of line
+ */
+ _getHeightOfLine: function() {
+ return this._getHeightOfSingleLine() * this.lineHeight;
+ },
+
+ /**
+ * @private
+ * @return {Number} height of line without lineHeight
+ */
+ _getHeightOfSingleLine: function() {
+ return this.fontSize * this._fontSizeMult;
+ },
+
+ /**
+ * @private
+ * @param {CanvasRenderingContext2D} ctx Context to render on
+ */
+ _renderTextBackground: function(ctx) {
+ this._renderBackground(ctx);
+ this._renderTextLinesBackground(ctx);
+ },
+
+ /**
+ * @private
+ * @param {CanvasRenderingContext2D} ctx Context to render on
+ */
+ _renderTextLinesBackground: function(ctx) {
+ if (!this.textBackgroundColor) {
+ return;
+ }
+ var lineTopOffset = 0, heightOfLine,
+ lineWidth, lineLeftOffset;
+
+ ctx.fillStyle = this.textBackgroundColor;
+ for (var i = 0, len = this._textLines.length; i < len; i++) {
+ heightOfLine = this._getHeightOfLine(ctx, i);
+ lineWidth = this._getLineWidth(ctx, i);
+ if (lineWidth > 0) {
+ lineLeftOffset = this._getLineLeftOffset(lineWidth);
+ ctx.fillRect(
+ this._getLeftOffset() + lineLeftOffset,
+ this._getTopOffset() + lineTopOffset,
+ lineWidth,
+ heightOfLine / this.lineHeight
+ );
+ }
+ lineTopOffset += heightOfLine;
+ }
+ // if there is text background color no
+ // other shadows should be casted
+ this._removeShadow(ctx);
+ },
+
+ /**
+ * @private
+ * @param {Number} lineWidth Width of text line
+ * @return {Number} Line left offset
+ */
+ _getLineLeftOffset: function(lineWidth) {
+ if (this.textAlign === 'center') {
+ return (this.width - lineWidth) / 2;
+ }
+ if (this.textAlign === 'right') {
+ return this.width - lineWidth;
+ }
+ return 0;
+ },
+
+ /**
+ * @private
+ */
+ _clearCache: function() {
+ this.__lineWidths = [];
+ this.__lineHeights = [];
+ },
+
+ /**
+ * @private
+ */
+ _shouldClearCache: function() {
+ var shouldClear = false;
+ if (this._forceClearCache) {
+ this._forceClearCache = false;
+ return true;
+ }
+ for (var prop in this._dimensionAffectingProps) {
+ if (this['__' + prop] !== this[prop]) {
+ this['__' + prop] = this[prop];
+ shouldClear = true;
+ }
+ }
+ return shouldClear;
+ },
+
+ /**
+ * @private
+ * @param {CanvasRenderingContext2D} ctx Context to render on
+ * @param {Number} lineIndex line number
+ * @return {Number} Line width
+ */
+ _getLineWidth: function(ctx, lineIndex) {
+ if (this.__lineWidths[lineIndex]) {
+ return this.__lineWidths[lineIndex] === -1 ? this.width : this.__lineWidths[lineIndex];
+ }
+
+ var width, wordCount, line = this._textLines[lineIndex];
+
+ if (line === '') {
+ width = 0;
+ }
+ else {
+ width = this._measureLine(ctx, lineIndex);
+ }
+ this.__lineWidths[lineIndex] = width;
+
+ if (width && this.textAlign === 'justify') {
+ wordCount = line.split(/\s+/);
+ if (wordCount.length > 1) {
+ this.__lineWidths[lineIndex] = -1;
+ }
+ }
+ return width;
+ },
+
+ _getWidthOfCharSpacing: function() {
+ if (this.charSpacing !== 0) {
+ return this.fontSize * this.charSpacing / 1000;
+ }
+ return 0;
+ },
+
+ /**
+ * @private
+ * @param {CanvasRenderingContext2D} ctx Context to render on
+ * @param {Number} lineIndex line number
+ * @return {Number} Line width
+ */
+ _measureLine: function(ctx, lineIndex) {
+ var line = this._textLines[lineIndex],
+ width = ctx.measureText(line).width,
+ additionalSpace = 0, charCount, finalWidth;
+ if (this.charSpacing !== 0) {
+ charCount = line.split('').length;
+ additionalSpace = (charCount - 1) * this._getWidthOfCharSpacing();
+ }
+ finalWidth = width + additionalSpace;
+ return finalWidth > 0 ? finalWidth : 0;
+ },
+
+ /**
+ * @private
+ * @param {CanvasRenderingContext2D} ctx Context to render on
+ */
+ _renderTextDecoration: function(ctx) {
+ if (!this.textDecoration) {
+ return;
+ }
+ var halfOfVerticalBox = this.height / 2,
+ _this = this, offsets = [];
+
+ /** @ignore */
+ function renderLinesAtOffset(offsets) {
+ var i, lineHeight = 0, len, j, oLen, lineWidth,
+ lineLeftOffset, heightOfLine;
+
+ for (i = 0, len = _this._textLines.length; i < len; i++) {
+
+ lineWidth = _this._getLineWidth(ctx, i);
+ lineLeftOffset = _this._getLineLeftOffset(lineWidth);
+ heightOfLine = _this._getHeightOfLine(ctx, i);
+
+ for (j = 0, oLen = offsets.length; j < oLen; j++) {
+ ctx.fillRect(
+ _this._getLeftOffset() + lineLeftOffset,
+ lineHeight + (_this._fontSizeMult - 1 + offsets[j] ) * _this.fontSize - halfOfVerticalBox,
+ lineWidth,
+ _this.fontSize / 15);
+ }
+ lineHeight += heightOfLine;
+ }
+ }
+
+ if (this.textDecoration.indexOf('underline') > -1) {
+ offsets.push(0.85); // 1 - 3/16
+ }
+ if (this.textDecoration.indexOf('line-through') > -1) {
+ offsets.push(0.43);
+ }
+ if (this.textDecoration.indexOf('overline') > -1) {
+ offsets.push(-0.12);
+ }
+ if (offsets.length > 0) {
+ renderLinesAtOffset(offsets);
+ }
+ },
+
+ /**
+ * return font declaration string for canvas context
+ * @returns {String} font declaration formatted for canvas context.
+ */
+ _getFontDeclaration: function() {
+ return [
+ // node-canvas needs "weight style", while browsers need "style weight"
+ (fabric.isLikelyNode ? this.fontWeight : this.fontStyle),
+ (fabric.isLikelyNode ? this.fontStyle : this.fontWeight),
+ this.fontSize + 'px',
+ (fabric.isLikelyNode ? ('"' + this.fontFamily + '"') : this.fontFamily)
+ ].join(' ');
+ },
+
+ /**
+ * Renders text instance on a specified context
+ * @param {CanvasRenderingContext2D} ctx Context to render on
+ * @param {Boolean} noTransform
+ */
+ render: function(ctx, noTransform) {
+ // do not render if object is not visible
+ if (!this.visible) {
+ return;
+ }
+
+ ctx.save();
+ this._setTextStyles(ctx);
+
+ if (this._shouldClearCache()) {
+ this._initDimensions(ctx);
+ }
+ this.drawSelectionBackground(ctx);
+ if (!noTransform) {
+ this.transform(ctx);
+ }
+ if (this.transformMatrix) {
+ ctx.transform.apply(ctx, this.transformMatrix);
+ }
+ if (this.group && this.group.type === 'path-group') {
+ ctx.translate(this.left, this.top);
+ }
+ this._render(ctx);
+ ctx.restore();
+ },
+
+ /**
+ * Returns the text as an array of lines.
+ * @returns {Array} Lines in the text
+ */
+ _splitTextIntoLines: function() {
+ return this.text.split(this._reNewline);
+ },
+
+ /**
+ * 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 object = extend(this.callSuper('toObject', propertiesToInclude), {
+ text: this.text,
+ fontSize: this.fontSize,
+ fontWeight: this.fontWeight,
+ fontFamily: this.fontFamily,
+ fontStyle: this.fontStyle,
+ lineHeight: this.lineHeight,
+ textDecoration: this.textDecoration,
+ textAlign: this.textAlign,
+ textBackgroundColor: this.textBackgroundColor,
+ charSpacing: this.charSpacing
+ });
+ if (!this.includeDefaultValues) {
+ this._removeDefaultValues(object);
+ }
+ return object;
+ },
+
+ /* _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) {
+ if (!this.ctx) {
+ this.ctx = fabric.util.createCanvasElement().getContext('2d');
+ }
+ var markup = this._createBaseSVGMarkup(),
+ offsets = this._getSVGLeftTopOffsets(this.ctx),
+ textAndBg = this._getSVGTextAndBg(offsets.textTop, offsets.textLeft);
+ this._wrapSVGTextAndBg(markup, textAndBg);
+
+ return reviver ? reviver(markup.join('')) : markup.join('');
+ },
+
+ /**
+ * @private
+ */
+ _getSVGLeftTopOffsets: function(ctx) {
+ var lineTop = this._getHeightOfLine(ctx, 0),
+ textLeft = -this.width / 2,
+ textTop = 0;
+
+ return {
+ textLeft: textLeft + (this.group && this.group.type === 'path-group' ? this.left : 0),
+ textTop: textTop + (this.group && this.group.type === 'path-group' ? -this.top : 0),
+ lineTop: lineTop
+ };
+ },
+
+ /**
+ * @private
+ */
+ _wrapSVGTextAndBg: function(markup, textAndBg) {
+ var noShadow = true, filter = this.getSvgFilter(),
+ style = filter === '' ? '' : ' style="' + filter + '"';
+
+ markup.push(
+ '\t\n',
+ textAndBg.textBgRects.join(''),
+ '\t\t\n',
+ textAndBg.textSpans.join(''),
+ '\t\t \n',
+ '\t \n'
+ );
+ },
+
+ /**
+ * @private
+ * @param {Number} textTopOffset Text top offset
+ * @param {Number} textLeftOffset Text left offset
+ * @return {Object}
+ */
+ _getSVGTextAndBg: function(textTopOffset, textLeftOffset) {
+ var textSpans = [],
+ textBgRects = [],
+ height = 0;
+ // bounding-box background
+ this._setSVGBg(textBgRects);
+
+ // text and text-background
+ for (var i = 0, len = this._textLines.length; i < len; i++) {
+ if (this.textBackgroundColor) {
+ this._setSVGTextLineBg(textBgRects, i, textLeftOffset, textTopOffset, height);
+ }
+ this._setSVGTextLineText(i, textSpans, height, textLeftOffset, textTopOffset, textBgRects);
+ height += this._getHeightOfLine(this.ctx, i);
+ }
+
+ return {
+ textSpans: textSpans,
+ textBgRects: textBgRects
+ };
+ },
+
+ _setSVGTextLineText: function(i, textSpans, height, textLeftOffset, textTopOffset) {
+ var yPos = this.fontSize * (this._fontSizeMult - this._fontSizeFraction)
+ - textTopOffset + height - this.height / 2;
+ if (this.textAlign === 'justify') {
+ // i call from here to do not intefere with IText
+ this._setSVGTextLineJustifed(i, textSpans, yPos, textLeftOffset);
+ return;
+ }
+ textSpans.push(
+ '\t\t\t elements since setting opacity
+ // on containing one doesn't work in Illustrator
+ this._getFillAttributes(this.fill), '>',
+ fabric.util.string.escapeXml(this._textLines[i]),
+ ' \n'
+ );
+ },
+
+ _setSVGTextLineJustifed: function(i, textSpans, yPos, textLeftOffset) {
+ var ctx = fabric.util.createCanvasElement().getContext('2d');
+
+ this._setTextStyles(ctx);
+
+ var line = this._textLines[i],
+ words = line.split(/\s+/),
+ wordsWidth = this._getWidthOfWords(ctx, words.join('')),
+ widthDiff = this.width - wordsWidth,
+ numSpaces = words.length - 1,
+ spaceWidth = numSpaces > 0 ? widthDiff / numSpaces : 0,
+ word, attributes = this._getFillAttributes(this.fill),
+ len;
+
+ textLeftOffset += this._getLineLeftOffset(this._getLineWidth(ctx, i));
+
+ for (i = 0, len = words.length; i < len; i++) {
+ word = words[i];
+ textSpans.push(
+ '\t\t\t elements since setting opacity
+ // on containing one doesn't work in Illustrator
+ attributes, '>',
+ fabric.util.string.escapeXml(word),
+ ' \n'
+ );
+ textLeftOffset += this._getWidthOfWords(ctx, word) + spaceWidth;
+ }
+ },
+
+ _setSVGTextLineBg: function(textBgRects, i, textLeftOffset, textTopOffset, height) {
+ textBgRects.push(
+ '\t\tnot yet implemented )
+ * @static
+ * @memberOf fabric.Text
+ * @param {SVGElement} element Element to parse
+ * @param {Object} [options] Options object
+ * @return {fabric.Text} Instance of fabric.Text
+ */
+ fabric.Text.fromElement = function(element, options) {
+ if (!element) {
+ return null;
+ }
+
+ var parsedAttributes = fabric.parseAttributes(element, fabric.Text.ATTRIBUTE_NAMES);
+ options = fabric.util.object.extend((options ? fabric.util.object.clone(options) : { }), parsedAttributes);
+
+ options.top = options.top || 0;
+ options.left = options.left || 0;
+ 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;
+ }
+
+ if (!options.originX) {
+ options.originX = 'left';
+ }
+
+ 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 text = new fabric.Text(textContent, options),
+ textHeightScaleFactor = text.getHeight() / text.height,
+ lineHeightDiff = (text.height + text.strokeWidth) * text.lineHeight - text.height,
+ scaledDiff = lineHeightDiff * textHeightScaleFactor,
+ textHeight = text.getHeight() + scaledDiff,
+ offX = 0;
+ /*
+ Adjust positioning:
+ x/y attributes in SVG correspond to the bottom-left corner of text bounding box
+ top/left properties in Fabric correspond to center point of text bounding box
+ */
+ if (text.originX === 'left') {
+ offX = text.getWidth() / 2;
+ }
+ if (text.originX === 'right') {
+ offX = -text.getWidth() / 2;
+ }
+ text.set({
+ left: text.getLeft() + offX,
+ top: text.getTop() - textHeight / 2 + text.fontSize * (0.18 + text._fontSizeFraction) / text.lineHeight /* 0.3 is the old lineHeight */
+ });
+
+ return text;
+ };
+ /* _FROM_SVG_END_ */
+
+ /**
+ * Returns fabric.Text instance from an object representation
+ * @static
+ * @memberOf fabric.Text
+ * @param {Object} object Object to create an instance from
+ * @param {Function} [callback] Callback to invoke when an fabric.Text instance is created
+ * @return {fabric.Text} Instance of fabric.Text
+ */
+ fabric.Text.fromObject = function(object, callback) {
+ var text = new fabric.Text(object.text, clone(object));
+ callback && callback(text);
+ return text;
+ };
+
+ fabric.util.createAccessors(fabric.Text);
+
+})(typeof exports !== 'undefined' ? exports : this);
+
+
+(function() {
+
+ var clone = fabric.util.object.clone;
+
+ /**
+ * 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 */ {
+
+ /**
+ * 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 default cursor (when not overwritten by character style)
+ * @type String
+ * @default
+ */
+ cursorColor: '#333',
+
+ /**
+ * Delay between cursor blink (in ms)
+ * @type Number
+ * @default
+ */
+ cursorDelay: 1000,
+
+ /**
+ * Duration of cursor fadein (in ms)
+ * @type Number
+ * @default
+ */
+ cursorDuration: 600,
+
+ /**
+ * Object containing character styles
+ * (where top-level properties corresponds to line number and 2nd-level properties -- to char number in a line)
+ * @type Object
+ * @default
+ */
+ styles: null,
+
+ /**
+ * Indicates whether internal text char widths can be cached
+ * @type Boolean
+ * @default
+ */
+ caching: true,
+
+ /**
+ * @private
+ */
+ _reSpace: /\s|\n/,
+
+ /**
+ * @private
+ */
+ _currentCursorOpacity: 0,
+
+ /**
+ * @private
+ */
+ _selectionDirection: null,
+
+ /**
+ * @private
+ */
+ _abortCursorAnimation: false,
+
+ /**
+ * @private
+ */
+ __widthOfSpace: [],
+
+ /**
+ * Constructor
+ * @param {String} text Text string
+ * @param {Object} [options] Options object
+ * @return {fabric.IText} thisArg
+ */
+ initialize: function(text, options) {
+ this.styles = options ? (options.styles || { }) : { };
+ this.callSuper('initialize', text, options);
+ this.initBehavior();
+ },
+
+ /**
+ * @private
+ */
+ _clearCache: function() {
+ this.callSuper('_clearCache');
+ this.__widthOfSpace = [];
+ },
+
+ /**
+ * Returns true if object has no styling
+ */
+ isEmptyStyles: function() {
+ if (!this.styles) {
+ return true;
+ }
+ var obj = this.styles;
+
+ 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;
+ },
+
+ /**
+ * 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);
+ },
+
+ /**
+ * 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
+ * @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 });
+ },
+
+ /**
+ * Gets style of a current selection/cursor (at the start position)
+ * @param {Number} [startIndex] Start index to get styles at
+ * @param {Number} [endIndex] End index to get styles at
+ * @return {Object} styles Style object at a specified (or current) index
+ */
+ getSelectionStyles: function(startIndex, endIndex) {
+
+ if (arguments.length === 2) {
+ var styles = [];
+ for (var i = startIndex; i < endIndex; i++) {
+ styles.push(this.getSelectionStyles(i));
+ }
+ return styles;
+ }
+
+ var loc = this.get2DCursorLocation(startIndex),
+ style = this._getStyleDeclaration(loc.lineIndex, loc.charIndex);
+
+ return style || {};
+ },
+
+ /**
+ * Sets style of a current selection
+ * @param {Object} [styles] Styles object
+ * @return {fabric.IText} thisArg
+ * @chainable
+ */
+ setSelectionStyles: function(styles) {
+ if (this.selectionStart === this.selectionEnd) {
+ this._extendStyles(this.selectionStart, styles);
+ }
+ else {
+ for (var i = this.selectionStart; i < this.selectionEnd; i++) {
+ this._extendStyles(i, styles);
+ }
+ }
+ /* not included in _extendStyles to avoid clearing cache more than once */
+ this._forceClearCache = true;
+ return this;
+ },
+
+ /**
+ * @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);
+ },
+
+ /**
+ * @private
+ * @param {CanvasRenderingContext2D} ctx Context to render on
+ */
+ _render: function(ctx) {
+ this.oldWidth = this.width;
+ this.oldHeight = this.height;
+ this.callSuper('_render', ctx);
+ this.ctx = 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();
+ },
+
+ /**
+ * Renders cursor or selection (depending on what exists)
+ */
+ renderCursorOrSelection: function() {
+ if (!this.active || !this.isEditing) {
+ return;
+ }
+ var chars = this.text.split(''),
+ boundaries, ctx;
+ if (this.canvas.contextTop) {
+ ctx = this.canvas.contextTop;
+ ctx.save();
+ ctx.transform.apply(ctx, this.canvas.viewportTransform);
+ this.transform(ctx);
+ this.transformMatrix && ctx.transform.apply(ctx, this.transformMatrix);
+ this._clearTextArea(ctx);
+ }
+ else {
+ ctx = this.ctx;
+ ctx.save();
+ }
+ if (this.selectionStart === this.selectionEnd) {
+ boundaries = this._getCursorBoundaries(chars, 'cursor');
+ this.renderCursor(boundaries, ctx);
+ }
+ else {
+ boundaries = this._getCursorBoundaries(chars, 'selection');
+ this.renderSelection(chars, boundaries, ctx);
+ }
+
+ ctx.restore();
+ },
+
+ _clearTextArea: function(ctx) {
+ // we add 4 pixel, to be sure to do not leave any pixel out
+ var width = this.oldWidth + 4, height = this.oldHeight + 4;
+ ctx.clearRect(-width / 2, -height / 2, width, height);
+ },
+ /**
+ * Returns 2d representation (lineIndex and charIndex) of cursor (or selection start)
+ * @param {Number} [selectionStart] Optional index. When not given, current selectionStart is used.
+ */
+ get2DCursorLocation: function(selectionStart) {
+ if (typeof selectionStart === 'undefined') {
+ selectionStart = this.selectionStart;
+ }
+ var len = this._textLines.length;
+ for (var i = 0; i < len; i++) {
+ if (selectionStart <= this._textLines[i].length) {
+ return {
+ lineIndex: i,
+ charIndex: selectionStart
+ };
+ }
+ selectionStart -= this._textLines[i].length + 1;
+ }
+ return {
+ lineIndex: i - 1,
+ charIndex: this._textLines[i - 1].length < selectionStart ? this._textLines[i - 1].length : selectionStart
+ };
+ },
+
+ /**
+ * Returns complete style of char at the current cursor
+ * @param {Number} lineIndex Line index
+ * @param {Number} charIndex Char index
+ * @return {Object} Character style
+ */
+ getCurrentCharStyle: function(lineIndex, charIndex) {
+ var style = this._getStyleDeclaration(lineIndex, charIndex === 0 ? 0 : charIndex - 1);
+
+ return {
+ fontSize: style && style.fontSize || this.fontSize,
+ fill: style && style.fill || this.fill,
+ textBackgroundColor: style && style.textBackgroundColor || this.textBackgroundColor,
+ textDecoration: style && style.textDecoration || this.textDecoration,
+ fontFamily: style && style.fontFamily || this.fontFamily,
+ fontWeight: style && style.fontWeight || this.fontWeight,
+ fontStyle: style && style.fontStyle || this.fontStyle,
+ stroke: style && style.stroke || this.stroke,
+ strokeWidth: style && style.strokeWidth || this.strokeWidth
+ };
+ },
+
+ /**
+ * Returns fontSize of char at the current cursor
+ * @param {Number} lineIndex Line index
+ * @param {Number} charIndex Char index
+ * @return {Number} Character font size
+ */
+ getCurrentCharFontSize: function(lineIndex, charIndex) {
+ var style = this._getStyleDeclaration(lineIndex, charIndex === 0 ? 0 : charIndex - 1);
+ return style && style.fontSize ? style.fontSize : this.fontSize;
+ },
+
+ /**
+ * Returns color (fill) of char at the current cursor
+ * @param {Number} lineIndex Line index
+ * @param {Number} charIndex Char index
+ * @return {String} Character color (fill)
+ */
+ getCurrentCharColor: function(lineIndex, charIndex) {
+ var style = this._getStyleDeclaration(lineIndex, charIndex === 0 ? 0 : charIndex - 1);
+ return style && style.fill ? style.fill : this.cursorColor;
+ },
+
+ /**
+ * Returns cursor boundaries (left, top, leftOffset, topOffset)
+ * @private
+ * @param {Array} chars Array of characters
+ * @param {String} typeOfBoundaries
+ */
+ _getCursorBoundaries: function(chars, typeOfBoundaries) {
+
+ // left/top are left/top of entire text box
+ // leftOffset/topOffset are offset from that left/top point of a text box
+
+ var left = Math.round(this._getLeftOffset()),
+ top = this._getTopOffset(),
+
+ offsets = this._getCursorBoundariesOffsets(
+ chars, typeOfBoundaries);
+
+ return {
+ left: left,
+ top: top,
+ leftOffset: offsets.left + offsets.lineLeft,
+ topOffset: offsets.top
+ };
+ },
+
+ /**
+ * @private
+ */
+ _getCursorBoundariesOffsets: function(chars, typeOfBoundaries) {
+ if (this.cursorOffsetCache && 'top' in this.cursorOffsetCache) {
+ return this.cursorOffsetCache;
+ }
+ var lineLeftOffset = 0,
+ lineIndex = 0,
+ charIndex = 0,
+ topOffset = 0,
+ leftOffset = 0,
+ boundaries;
+
+ for (var i = 0; i < this.selectionStart; i++) {
+ if (chars[i] === '\n') {
+ leftOffset = 0;
+ topOffset += this._getHeightOfLine(this.ctx, lineIndex);
+
+ lineIndex++;
+ charIndex = 0;
+ }
+ else {
+ leftOffset += this._getWidthOfChar(this.ctx, chars[i], lineIndex, charIndex);
+ charIndex++;
+ }
+
+ lineLeftOffset = this._getLineLeftOffset(this._getLineWidth(this.ctx, lineIndex));
+ }
+ if (typeOfBoundaries === 'cursor') {
+ topOffset += (1 - this._fontSizeFraction) * this._getHeightOfLine(this.ctx, lineIndex) / this.lineHeight
+ - this.getCurrentCharFontSize(lineIndex, charIndex) * (1 - this._fontSizeFraction);
+ }
+ if (this.charSpacing !== 0 && charIndex === this._textLines[lineIndex].length) {
+ leftOffset -= this._getWidthOfCharSpacing();
+ }
+ boundaries = {
+ top: topOffset,
+ left: leftOffset > 0 ? leftOffset : 0,
+ lineLeft: lineLeftOffset
+ };
+ 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,
+ charHeight = this.getCurrentCharFontSize(lineIndex, charIndex),
+ leftOffset = (lineIndex === 0 && charIndex === 0)
+ ? this._getLineLeftOffset(this._getLineWidth(ctx, lineIndex))
+ : boundaries.leftOffset,
+ multiplier = this.scaleX * this.canvas.getZoom(),
+ cursorWidth = this.cursorWidth / multiplier;
+
+ ctx.fillStyle = this.getCurrentCharColor(lineIndex, charIndex);
+ ctx.globalAlpha = this.__isMousedown ? 1 : this._currentCursorOpacity;
+
+ ctx.fillRect(
+ boundaries.left + leftOffset - cursorWidth / 2,
+ boundaries.top + boundaries.topOffset,
+ cursorWidth,
+ charHeight);
+ },
+
+ /**
+ * Renders text selection
+ * @param {Array} chars Array of characters
+ * @param {Object} boundaries Object with left/top/leftOffset/topOffset
+ * @param {CanvasRenderingContext2D} ctx transformed context to draw on
+ */
+ renderSelection: function(chars, boundaries, ctx) {
+
+ ctx.fillStyle = this.selectionColor;
+
+ var start = this.get2DCursorLocation(this.selectionStart),
+ end = this.get2DCursorLocation(this.selectionEnd),
+ startLine = start.lineIndex,
+ endLine = end.lineIndex;
+ for (var i = startLine; i <= endLine; i++) {
+ var lineOffset = this._getLineLeftOffset(this._getLineWidth(ctx, i)) || 0,
+ lineHeight = this._getHeightOfLine(this.ctx, i),
+ realLineHeight = 0, boxWidth = 0, line = this._textLines[i];
+
+ if (i === startLine) {
+ for (var j = 0, len = line.length; j < len; j++) {
+ if (j >= start.charIndex && (i !== endLine || j < end.charIndex)) {
+ boxWidth += this._getWidthOfChar(ctx, line[j], i, j);
+ }
+ if (j < start.charIndex) {
+ lineOffset += this._getWidthOfChar(ctx, line[j], i, j);
+ }
+ }
+ if (j === line.length) {
+ boxWidth -= this._getWidthOfCharSpacing();
+ }
+ }
+ else if (i > startLine && i < endLine) {
+ boxWidth += this._getLineWidth(ctx, i) || 5;
+ }
+ else if (i === endLine) {
+ for (var j2 = 0, j2len = end.charIndex; j2 < j2len; j2++) {
+ boxWidth += this._getWidthOfChar(ctx, line[j2], i, j2);
+ }
+ if (end.charIndex === line.length) {
+ boxWidth -= this._getWidthOfCharSpacing();
+ }
+ }
+ realLineHeight = lineHeight;
+ if (this.lineHeight < 1 || (i === endLine && this.lineHeight > 1)) {
+ lineHeight /= this.lineHeight;
+ }
+ ctx.fillRect(
+ boundaries.left + lineOffset,
+ boundaries.top + boundaries.topOffset,
+ boxWidth > 0 ? boxWidth : 0,
+ lineHeight);
+
+ boundaries.topOffset += realLineHeight;
+ }
+ },
+
+ /**
+ * @private
+ * @param {String} method
+ * @param {CanvasRenderingContext2D} ctx Context to render on
+ * @param {String} line Content of the line
+ * @param {Number} left
+ * @param {Number} top
+ * @param {Number} lineIndex
+ * @param {Number} charOffset
+ */
+ _renderChars: function(method, ctx, line, left, top, lineIndex, charOffset) {
+
+ if (this.isEmptyStyles()) {
+ return this._renderCharsFast(method, ctx, line, left, top);
+ }
+
+ charOffset = charOffset || 0;
+
+ // set proper line offset
+ var lineHeight = this._getHeightOfLine(ctx, lineIndex),
+ prevStyle,
+ thisStyle,
+ charsToRender = '';
+
+ ctx.save();
+ top -= lineHeight / this.lineHeight * this._fontSizeFraction;
+ for (var i = charOffset, len = line.length + charOffset; i <= len; i++) {
+ prevStyle = prevStyle || this.getCurrentCharStyle(lineIndex, i);
+ thisStyle = this.getCurrentCharStyle(lineIndex, i + 1);
+
+ if (this._hasStyleChanged(prevStyle, thisStyle) || i === len) {
+ this._renderChar(method, ctx, lineIndex, i - 1, charsToRender, left, top, lineHeight);
+ charsToRender = '';
+ prevStyle = thisStyle;
+ }
+ charsToRender += line[i - charOffset];
+ }
+ ctx.restore();
+ },
+
+ /**
+ * @private
+ * @param {String} method
+ * @param {CanvasRenderingContext2D} ctx Context to render on
+ * @param {String} line Content of the line
+ * @param {Number} left Left coordinate
+ * @param {Number} top Top coordinate
+ */
+ _renderCharsFast: function(method, ctx, line, left, top) {
+
+ if (method === 'fillText' && this.fill) {
+ this.callSuper('_renderChars', method, ctx, line, left, top);
+ }
+ if (method === 'strokeText' && ((this.stroke && this.strokeWidth > 0) || this.skipFillStrokeCheck)) {
+ this.callSuper('_renderChars', method, ctx, line, left, top);
+ }
+ },
+
+ /**
+ * @private
+ * @param {String} method
+ * @param {CanvasRenderingContext2D} ctx Context to render on
+ * @param {Number} lineIndex
+ * @param {Number} i
+ * @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, i, _char, left, top, lineHeight) {
+ var charWidth, charHeight, shouldFill, shouldStroke,
+ decl = this._getStyleDeclaration(lineIndex, i),
+ offset, textDecoration, chars, additionalSpace, _charWidth;
+
+ if (decl) {
+ charHeight = this._getHeightOfChar(ctx, _char, lineIndex, i);
+ shouldStroke = decl.stroke;
+ shouldFill = decl.fill;
+ textDecoration = decl.textDecoration;
+ }
+ else {
+ charHeight = this.fontSize;
+ }
+
+ shouldStroke = (shouldStroke || this.stroke) && method === 'strokeText';
+ shouldFill = (shouldFill || this.fill) && method === 'fillText';
+
+ decl && ctx.save();
+
+ charWidth = this._applyCharStylesGetWidth(ctx, _char, lineIndex, i, decl || null);
+ textDecoration = textDecoration || this.textDecoration;
+
+ if (decl && decl.textBackgroundColor) {
+ this._removeShadow(ctx);
+ }
+ if (this.charSpacing !== 0) {
+ additionalSpace = this._getWidthOfCharSpacing();
+ chars = _char.split('');
+ charWidth = 0;
+ for (var j = 0, len = chars.length, char; j < len; j++) {
+ char = chars[j];
+ shouldFill && ctx.fillText(char, left + charWidth, top);
+ shouldStroke && ctx.strokeText(char, left + charWidth, top);
+ _charWidth = ctx.measureText(char).width + additionalSpace;
+ charWidth += _charWidth > 0 ? _charWidth : 0;
+ }
+ }
+ else {
+ shouldFill && ctx.fillText(_char, left, top);
+ shouldStroke && ctx.strokeText(_char, left, top);
+ }
+
+ if (textDecoration || textDecoration !== '') {
+ offset = this._fontSizeFraction * lineHeight / this.lineHeight;
+ this._renderCharDecoration(ctx, textDecoration, left, top, offset, charWidth, charHeight);
+ }
+
+ decl && ctx.restore();
+ ctx.translate(charWidth, 0);
+ },
+
+ /**
+ * @private
+ * @param {Object} prevStyle
+ * @param {Object} thisStyle
+ */
+ _hasStyleChanged: function(prevStyle, thisStyle) {
+ return (prevStyle.fill !== thisStyle.fill ||
+ prevStyle.fontSize !== thisStyle.fontSize ||
+ prevStyle.textBackgroundColor !== thisStyle.textBackgroundColor ||
+ prevStyle.textDecoration !== thisStyle.textDecoration ||
+ prevStyle.fontFamily !== thisStyle.fontFamily ||
+ prevStyle.fontWeight !== thisStyle.fontWeight ||
+ prevStyle.fontStyle !== thisStyle.fontStyle ||
+ prevStyle.stroke !== thisStyle.stroke ||
+ prevStyle.strokeWidth !== thisStyle.strokeWidth
+ );
+ },
+
+ /**
+ * @private
+ * @param {CanvasRenderingContext2D} ctx Context to render on
+ */
+ _renderCharDecoration: function(ctx, textDecoration, left, top, offset, charWidth, charHeight) {
+
+ if (!textDecoration) {
+ return;
+ }
+
+ var decorationWeight = charHeight / 15,
+ positions = {
+ underline: top + charHeight / 10,
+ 'line-through': top - charHeight * (this._fontSizeFraction + this._fontSizeMult - 1) + decorationWeight,
+ overline: top - (this._fontSizeMult - this._fontSizeFraction) * charHeight
+ },
+ decorations = ['underline', 'line-through', 'overline'], i, decoration;
+
+ for (i = 0; i < decorations.length; i++) {
+ decoration = decorations[i];
+ if (textDecoration.indexOf(decoration) > -1) {
+ ctx.fillRect(left, positions[decoration], charWidth , decorationWeight);
+ }
+ }
+ },
+
+ /**
+ * @private
+ * @param {String} method
+ * @param {CanvasRenderingContext2D} ctx Context to render on
+ * @param {String} line
+ * @param {Number} left
+ * @param {Number} top
+ * @param {Number} lineIndex
+ */
+ _renderTextLine: function(method, ctx, line, left, top, lineIndex) {
+ // to "cancel" this.fontSize subtraction in fabric.Text#_renderTextLine
+ // the adding 0.03 is just to align text with itext by overlap test
+ if (!this.isEmptyStyles()) {
+ top += this.fontSize * (this._fontSizeFraction + 0.03);
+ }
+ this.callSuper('_renderTextLine', method, ctx, line, left, top, lineIndex);
+ },
+
+ /**
+ * @private
+ * @param {CanvasRenderingContext2D} ctx Context to render on
+ */
+ _renderTextDecoration: function(ctx) {
+ if (this.isEmptyStyles()) {
+ return this.callSuper('_renderTextDecoration', ctx);
+ }
+ },
+
+ /**
+ * @private
+ * @param {CanvasRenderingContext2D} ctx Context to render on
+ */
+ _renderTextLinesBackground: function(ctx) {
+ this.callSuper('_renderTextLinesBackground', ctx);
+
+ var lineTopOffset = 0, heightOfLine,
+ lineWidth, lineLeftOffset,
+ leftOffset = this._getLeftOffset(),
+ topOffset = this._getTopOffset(),
+ line, _char, style;
+
+ for (var i = 0, len = this._textLines.length; i < len; i++) {
+ heightOfLine = this._getHeightOfLine(ctx, i);
+ line = this._textLines[i];
+
+ if (line === '' || !this.styles || !this._getLineStyle(i)) {
+ lineTopOffset += heightOfLine;
+ continue;
+ }
+
+ lineWidth = this._getLineWidth(ctx, i);
+ lineLeftOffset = this._getLineLeftOffset(lineWidth);
+
+ for (var j = 0, jlen = line.length; j < jlen; j++) {
+ style = this._getStyleDeclaration(i, j);
+ if (!style || !style.textBackgroundColor) {
+ continue;
+ }
+ _char = line[j];
+
+ ctx.fillStyle = style.textBackgroundColor;
+
+ ctx.fillRect(
+ leftOffset + lineLeftOffset + this._getWidthOfCharsAt(ctx, i, j),
+ topOffset + lineTopOffset,
+ this._getWidthOfChar(ctx, _char, i, j) + 1,
+ heightOfLine / this.lineHeight
+ );
+ }
+ lineTopOffset += heightOfLine;
+ }
+ },
+
+ /**
+ * @private
+ */
+ _getCacheProp: function(_char, styleDeclaration) {
+ return _char +
+ styleDeclaration.fontSize +
+ styleDeclaration.fontWeight +
+ styleDeclaration.fontStyle;
+ },
+
+ /**
+ * @private
+ * @param {String} fontFamily name
+ * @return {Object} reference to cache
+ */
+ _getFontCache: function(fontFamily) {
+ if (!fabric.charWidthsCache[fontFamily]) {
+ fabric.charWidthsCache[fontFamily] = { };
+ }
+ return fabric.charWidthsCache[fontFamily];
+ },
+
+ /**
+ * @private
+ * @param {CanvasRenderingContext2D} ctx Context to render on
+ * @param {String} _char
+ * @param {Number} lineIndex
+ * @param {Number} charIndex
+ * @param {Object} [decl]
+ */
+ _applyCharStylesGetWidth: function(ctx, _char, lineIndex, charIndex, decl) {
+ var charDecl = decl || this._getStyleDeclaration(lineIndex, charIndex),
+ styleDeclaration = clone(charDecl),
+ width, cacheProp, charWidthsCache;
+
+ this._applyFontStyles(styleDeclaration);
+ charWidthsCache = this._getFontCache(styleDeclaration.fontFamily);
+ cacheProp = this._getCacheProp(_char, styleDeclaration);
+
+ // short-circuit if no styles for this char
+ // global style from object is always applyed and handled by save and restore
+ if (!charDecl && charWidthsCache[cacheProp] && this.caching) {
+ return charWidthsCache[cacheProp];
+ }
+
+ if (typeof styleDeclaration.shadow === 'string') {
+ styleDeclaration.shadow = new fabric.Shadow(styleDeclaration.shadow);
+ }
+
+ var fill = styleDeclaration.fill || this.fill;
+ ctx.fillStyle = fill.toLive
+ ? fill.toLive(ctx, this)
+ : fill;
+
+ if (styleDeclaration.stroke) {
+ ctx.strokeStyle = (styleDeclaration.stroke && styleDeclaration.stroke.toLive)
+ ? styleDeclaration.stroke.toLive(ctx, this)
+ : styleDeclaration.stroke;
+ }
+
+ ctx.lineWidth = styleDeclaration.strokeWidth || this.strokeWidth;
+ ctx.font = this._getFontDeclaration.call(styleDeclaration);
+
+ //if we want this._setShadow.call to work with styleDeclarion
+ //we have to add those references
+ if (styleDeclaration.shadow) {
+ styleDeclaration.scaleX = this.scaleX;
+ styleDeclaration.scaleY = this.scaleY;
+ styleDeclaration.canvas = this.canvas;
+ styleDeclaration.getObjectScaling = this.getObjectScaling;
+ this._setShadow.call(styleDeclaration, ctx);
+ }
+
+ if (!this.caching || !charWidthsCache[cacheProp]) {
+ width = ctx.measureText(_char).width;
+ this.caching && (charWidthsCache[cacheProp] = width);
+ return width;
+ }
+
+ return charWidthsCache[cacheProp];
+ },
+
+ /**
+ * @private
+ * @param {Object} styleDeclaration
+ */
+ _applyFontStyles: function(styleDeclaration) {
+ if (!styleDeclaration.fontFamily) {
+ styleDeclaration.fontFamily = this.fontFamily;
+ }
+ if (!styleDeclaration.fontSize) {
+ styleDeclaration.fontSize = this.fontSize;
+ }
+ if (!styleDeclaration.fontWeight) {
+ styleDeclaration.fontWeight = this.fontWeight;
+ }
+ if (!styleDeclaration.fontStyle) {
+ styleDeclaration.fontStyle = this.fontStyle;
+ }
+ },
+
+ /**
+ * @param {Number} lineIndex
+ * @param {Number} charIndex
+ * @param {Boolean} [returnCloneOrEmpty=false]
+ * @private
+ */
+ _getStyleDeclaration: function(lineIndex, charIndex, returnCloneOrEmpty) {
+ if (returnCloneOrEmpty) {
+ return (this.styles[lineIndex] && this.styles[lineIndex][charIndex])
+ ? clone(this.styles[lineIndex][charIndex])
+ : { };
+ }
+
+ return this.styles[lineIndex] && this.styles[lineIndex][charIndex] ? this.styles[lineIndex][charIndex] : null;
+ },
+
+ /**
+ * @param {Number} lineIndex
+ * @param {Number} charIndex
+ * @param {Object} style
+ * @private
+ */
+ _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];
+ },
+
+ /**
+ * @param {Number} lineIndex
+ * @private
+ */
+ _getLineStyle: function(lineIndex) {
+ return this.styles[lineIndex];
+ },
+
+ /**
+ * @param {Number} lineIndex
+ * @param {Object} style
+ * @private
+ */
+ _setLineStyle: function(lineIndex, style) {
+ this.styles[lineIndex] = style;
+ },
+
+ /**
+ * @param {Number} lineIndex
+ * @private
+ */
+ _deleteLineStyle: function(lineIndex) {
+ delete this.styles[lineIndex];
+ },
+
+ /**
+ * @private
+ * @param {CanvasRenderingContext2D} ctx Context to render on
+ */
+ _getWidthOfChar: function(ctx, _char, lineIndex, charIndex) {
+ if (!this._isMeasuring && this.textAlign === 'justify' && this._reSpacesAndTabs.test(_char)) {
+ return this._getWidthOfSpace(ctx, lineIndex);
+ }
+ ctx.save();
+ var width = this._applyCharStylesGetWidth(ctx, _char, lineIndex, charIndex);
+ if (this.charSpacing !== 0) {
+ width += this._getWidthOfCharSpacing();
+ }
+ ctx.restore();
+ return width > 0 ? width : 0
+ },
+
+ /**
+ * @private
+ * @param {CanvasRenderingContext2D} ctx Context to render on
+ * @param {Number} lineIndex
+ * @param {Number} charIndex
+ */
+ _getHeightOfChar: function(ctx, lineIndex, charIndex) {
+ var style = this._getStyleDeclaration(lineIndex, charIndex);
+ return style && style.fontSize ? style.fontSize : this.fontSize;
+ },
+
+ /**
+ * @private
+ * @param {CanvasRenderingContext2D} ctx Context to render on
+ * @param {Number} lineIndex
+ * @param {Number} charIndex
+ */
+ _getWidthOfCharsAt: function(ctx, lineIndex, charIndex) {
+ var width = 0, i, _char;
+ for (i = 0; i < charIndex; i++) {
+ _char = this._textLines[lineIndex][i];
+ width += this._getWidthOfChar(ctx, _char, lineIndex, i);
+ }
+ return width;
+ },
+
+ /**
+ * @private
+ * @param {CanvasRenderingContext2D} ctx Context to render on
+ * @param {Number} lineIndex line number
+ * @return {Number} Line width
+ */
+ _measureLine: function(ctx, lineIndex) {
+ this._isMeasuring = true;
+ var width = this._getWidthOfCharsAt(ctx, lineIndex, this._textLines[lineIndex].length);
+ if (this.charSpacing !== 0) {
+ width -= this._getWidthOfCharSpacing();
+ }
+ this._isMeasuring = false;
+ return width > 0 ? width : 0;
+ },
+
+ /**
+ * @private
+ * @param {CanvasRenderingContext2D} ctx Context to render on
+ * @param {Number} lineIndex
+ */
+ _getWidthOfSpace: function (ctx, lineIndex) {
+ if (this.__widthOfSpace[lineIndex]) {
+ return this.__widthOfSpace[lineIndex];
+ }
+ var line = this._textLines[lineIndex],
+ wordsWidth = this._getWidthOfWords(ctx, line, lineIndex, 0),
+ widthDiff = this.width - wordsWidth,
+ numSpaces = line.length - line.replace(this._reSpacesAndTabs, '').length,
+ width = Math.max(widthDiff / numSpaces, ctx.measureText(' ').width);
+ this.__widthOfSpace[lineIndex] = width;
+ return width;
+ },
+
+ /**
+ * @private
+ * @param {CanvasRenderingContext2D} ctx Context to render on
+ * @param {String} line
+ * @param {Number} lineIndex
+ * @param {Number} charOffset
+ */
+ _getWidthOfWords: function (ctx, line, lineIndex, charOffset) {
+ var width = 0;
+
+ for (var charIndex = 0; charIndex < line.length; charIndex++) {
+ var _char = line[charIndex];
+
+ if (!_char.match(/\s/)) {
+ width += this._getWidthOfChar(ctx, _char, lineIndex, charIndex + charOffset);
+ }
+ }
+
+ return width;
+ },
+
+ /**
+ * @private
+ * @param {CanvasRenderingContext2D} ctx Context to render on
+ */
+ _getHeightOfLine: function(ctx, lineIndex) {
+ if (this.__lineHeights[lineIndex]) {
+ return this.__lineHeights[lineIndex];
+ }
+
+ var line = this._textLines[lineIndex],
+ maxHeight = this._getHeightOfChar(ctx, lineIndex, 0);
+
+ for (var i = 1, len = line.length; i < len; i++) {
+ var currentCharHeight = this._getHeightOfChar(ctx, lineIndex, i);
+ if (currentCharHeight > maxHeight) {
+ maxHeight = currentCharHeight;
+ }
+ }
+ this.__lineHeights[lineIndex] = maxHeight * this.lineHeight * this._fontSizeMult;
+ return this.__lineHeights[lineIndex];
+ },
+
+ /**
+ * @private
+ * @param {CanvasRenderingContext2D} ctx Context to render on
+ */
+ _getTextHeight: function(ctx) {
+ var lineHeight, height = 0;
+ for (var i = 0, len = this._textLines.length; i < len; i++) {
+ lineHeight = this._getHeightOfLine(ctx, i);
+ height += (i === len - 1 ? lineHeight / this.lineHeight : lineHeight);
+ }
+ return height;
+ },
+
+ /**
+ * 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) {
+ var clonedStyles = { }, i, j, row;
+ for (i in this.styles) {
+ row = this.styles[i];
+ clonedStyles[i] = { };
+ for (j in row) {
+ clonedStyles[i][j] = clone(row[j]);
+ }
+ }
+ return fabric.util.object.extend(this.callSuper('toObject', propertiesToInclude), {
+ styles: clonedStyles
+ });
+ }
+ });
+
+ /**
+ * 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
+ * @return {fabric.IText} instance of fabric.IText
+ */
+ fabric.IText.fromObject = function(object, callback) {
+ var iText = new fabric.IText(object.text, clone(object));
+ callback && callback(iText);
+ return iText;
+ };
+})();
+
+
+(function() {
+
+ var clone = fabric.util.object.clone;
+
+ 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);
+ },
+
+ /**
+ * Initializes "selected" event handler
+ */
+ initSelectedHandler: function() {
+ this.on('selected', function() {
+
+ var _this = this;
+ setTimeout(function() {
+ _this.selected = true;
+ }, 100);
+ });
+ },
+
+ /**
+ * 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() {
+ 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._canvasITextSelectionClearedHanlder = (function() {
+ fabric.IText.prototype.exitEditingOnOthers(canvas);
+ }).bind(this);
+ canvas._mouseUpITextHandler = (function() {
+ if (canvas._iTextInstances) {
+ canvas._iTextInstances.forEach(function(obj) {
+ obj.__isMousedown = false;
+ });
+ }
+ }).bind(this);
+ canvas.on('selection:cleared', canvas._canvasITextSelectionClearedHanlder);
+ canvas.on('object:selected', canvas._canvasITextSelectionClearedHanlder);
+ canvas.on('mouse:up', canvas._mouseUpITextHandler);
+ },
+
+ /**
+ * remove canvas event to manage exiting on other instances
+ * @private
+ */
+ _removeCanvasHandlers: function(canvas) {
+ canvas.off('selection:cleared', canvas._canvasITextSelectionClearedHanlder);
+ canvas.off('object:selected', canvas._canvasITextSelectionClearedHanlder);
+ canvas.off('mouse:up', canvas._mouseUpITextHandler);
+ },
+
+ /**
+ * @private
+ */
+ _tick: function() {
+ this._currentTickState = this._animateCursor(this, 1, this.cursorDuration, '_onTickComplete');
+ },
+
+ /**
+ * @private
+ */
+ _animateCursor: function(obj, targetOpacity, duration, completeMethod) {
+
+ var tickState;
+
+ 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;
+ }
+ });
+ return tickState;
+ },
+
+ /**
+ * @private
+ */
+ _onTickComplete: function() {
+
+ var _this = this;
+
+ 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;
+
+ this.abortCursorAnimation();
+ this._currentCursorOpacity = 1;
+ this._cursorTimeout2 = setTimeout(function() {
+ _this._tick();
+ }, delay);
+ },
+
+ /**
+ * Aborts cursor animation and clears all timeouts
+ */
+ abortCursorAnimation: function() {
+ var shouldClear = this._currentTickState || this._currentTickCompleteState;
+ this._currentTickState && this._currentTickState.abort();
+ this._currentTickCompleteState && this._currentTickCompleteState.abort();
+
+ 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) {
+ this.canvas && this.canvas.clearContext(this.canvas.contextTop || this.ctx);
+ }
+
+ },
+
+ /**
+ * Selects entire text
+ */
+ selectAll: function() {
+ this.selectionStart = 0;
+ this.selectionEnd = this.text.length;
+ this._fireSelectionChanged();
+ this._updateTextarea();
+ },
+
+ /**
+ * Returns selected text
+ * @return {String}
+ */
+ getSelectedText: function() {
+ return this.text.slice(this.selectionStart, this.selectionEnd);
+ },
+
+ /**
+ * Find new selection index representing start of current word according to current selection index
+ * @param {Number} startFrom Surrent 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.charAt(index))) {
+ while (this._reSpace.test(this.text.charAt(index))) {
+ offset++;
+ index--;
+ }
+ }
+ while (/\S/.test(this.text.charAt(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;
+
+ // remove space after cursor first
+ if (this._reSpace.test(this.text.charAt(index))) {
+ while (this._reSpace.test(this.text.charAt(index))) {
+ offset++;
+ index++;
+ }
+ }
+ while (/\S/.test(this.text.charAt(index)) && index < this.text.length) {
+ offset++;
+ index++;
+ }
+
+ 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;
+
+ while (!/\n/.test(this.text.charAt(index)) && index > -1) {
+ offset++;
+ index--;
+ }
+
+ 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;
+
+ while (!/\n/.test(this.text.charAt(index)) && index < this.text.length) {
+ offset++;
+ index++;
+ }
+
+ return startFrom + offset;
+ },
+
+ /**
+ * Returns number of newlines in selected text
+ * @return {Number} Number of newlines in selected text
+ */
+ getNumNewLinesInSelectedText: function() {
+ var selectedText = this.getSelectedText(),
+ numNewLines = 0;
+
+ for (var i = 0, len = selectedText.length; i < len; i++) {
+ if (selectedText[i] === '\n') {
+ numNewLines++;
+ }
+ }
+ return numNewLines;
+ },
+
+ /**
+ * 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 index = this._reSpace.test(this.text.charAt(selectionStart)) ? selectionStart - 1 : selectionStart,
+ _char = this.text.charAt(index),
+ reNonWord = /[ \n\.,;!\?\-]/;
+
+ while (!reNonWord.test(_char) && index > 0 && index < this.text.length) {
+ index += direction;
+ _char = this.text.charAt(index);
+ }
+ if (reNonWord.test(_char) && _char !== '\n') {
+ 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 */
+
+ 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
+ */
+ 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();
+ },
+
+ /**
+ * Enters editing state
+ * @return {fabric.IText} thisArg
+ * @chainable
+ */
+ enterEditing: function(e) {
+ if (this.isEditing || !this.editable) {
+ return;
+ }
+
+ if (this.canvas) {
+ this.exitEditingOnOthers(this.canvas);
+ }
+
+ this.isEditing = true;
+
+ this.initHiddenTextarea(e);
+ this.hiddenTextarea.focus();
+ this._updateTextarea();
+ this._saveEditingProps();
+ this._setEditingProps();
+ this._textBeforeEdit = this.text;
+
+ this._tick();
+ this.fire('editing:entered');
+
+ if (!this.canvas) {
+ return this;
+ }
+ this.canvas.fire('text:editing:entered', { target: this });
+ this.initMouseMoveHandler();
+ this.canvas.renderAll();
+ 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);
+ },
+
+ /**
+ * @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) {
+ 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._fireSelectionChanged();
+ this._updateTextarea();
+ this.renderCursorOrSelection();
+ }
+ },
+
+ /**
+ * @private
+ */
+ _setEditingProps: function() {
+ this.hoverCursor = '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;
+ },
+
+ /**
+ * @private
+ */
+ _updateTextarea: function() {
+ if (!this.hiddenTextarea || this.inCompositionMode) {
+ return;
+ }
+ this.cursorOffsetCache = { };
+ this.hiddenTextarea.value = this.text;
+ this.hiddenTextarea.selectionStart = this.selectionStart;
+ this.hiddenTextarea.selectionEnd = this.selectionEnd;
+ if (this.selectionStart === this.selectionEnd) {
+ var style = this._calcTextareaPosition();
+ this.hiddenTextarea.style.left = style.left;
+ this.hiddenTextarea.style.top = style.top;
+ this.hiddenTextarea.style.fontSize = style.fontSize;
+ }
+ },
+
+ /**
+ * @private
+ * @return {Object} style contains style for hiddenTextarea
+ */
+ _calcTextareaPosition: function() {
+ if (!this.canvas) {
+ return { x: 1, y: 1 };
+ }
+ var chars = this.text.split(''),
+ boundaries = this._getCursorBoundaries(chars, 'cursor'),
+ cursorLocation = this.get2DCursorLocation(),
+ lineIndex = cursorLocation.lineIndex,
+ charIndex = cursorLocation.charIndex,
+ charHeight = this.getCurrentCharFontSize(lineIndex, charIndex),
+ leftOffset = (lineIndex === 0 && charIndex === 0)
+ ? this._getLineLeftOffset(this._getLineWidth(this.ctx, lineIndex))
+ : boundaries.leftOffset,
+ m = this.calcTransformMatrix(),
+ p = {
+ x: boundaries.left + leftOffset,
+ y: boundaries.top + boundaries.topOffset + charHeight
+ },
+ upperCanvas = this.canvas.upperCanvasEl,
+ maxWidth = upperCanvas.width - charHeight,
+ maxHeight = upperCanvas.height - charHeight;
+
+ p = fabric.util.transformPoint(p, m);
+ p = fabric.util.transformPoint(p, this.canvas.viewportTransform);
+
+ 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;
+
+ return { left: p.x + 'px', top: p.y + 'px', fontSize: charHeight };
+ },
+
+ /**
+ * @private
+ */
+ _saveEditingProps: function() {
+ this._savedProps = {
+ hasControls: this.hasControls,
+ borderColor: this.borderColor,
+ lockMovementX: this.lockMovementX,
+ lockMovementY: this.lockMovementY,
+ hoverCursor: this.hoverCursor,
+ defaultCursor: this.canvas && this.canvas.defaultCursor,
+ moveCursor: this.canvas && this.canvas.moveCursor
+ };
+ },
+
+ /**
+ * @private
+ */
+ _restoreEditingProps: function() {
+ if (!this._savedProps) {
+ return;
+ }
+
+ this.hoverCursor = this._savedProps.overCursor;
+ this.hasControls = this._savedProps.hasControls;
+ this.borderColor = this._savedProps.borderColor;
+ 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;
+ }
+ },
+
+ /**
+ * Exits from editing state
+ * @return {fabric.IText} thisArg
+ * @chainable
+ */
+ exitEditing: function() {
+ var isTextChanged = (this._textBeforeEdit !== this.text);
+ this.selected = false;
+ this.isEditing = false;
+ this.selectable = true;
+
+ this.selectionEnd = this.selectionStart;
+ this.hiddenTextarea && this.canvas && this.hiddenTextarea.parentNode.removeChild(this.hiddenTextarea);
+ this.hiddenTextarea = null;
+
+ this.abortCursorAnimation();
+ this._restoreEditingProps();
+ this._currentCursorOpacity = 0;
+
+ 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];
+ }
+ }
+ },
+
+ /**
+ * @private
+ */
+ _removeCharsFromTo: function(start, end) {
+ while (end !== start) {
+ this._removeSingleCharAndStyle(start + 1);
+ end--;
+ }
+ this.selectionStart = start;
+ this.selectionEnd = start;
+ },
+
+ _removeSingleCharAndStyle: function(index) {
+ var isBeginningOfLine = this.text[index - 1] === '\n',
+ indexStyle = isBeginningOfLine ? index : index - 1;
+ this.removeStyleObject(isBeginningOfLine, indexStyle);
+ this.text = this.text.slice(0, index - 1) +
+ this.text.slice(index);
+
+ this._textLines = this._splitTextIntoLines();
+ },
+
+ /**
+ * Inserts characters where cursor is (replacing selection if one exists)
+ * @param {String} _chars Characters to insert
+ * @param {Boolean} useCopiedStyle use fabric.copiedTextStyle
+ */
+ insertChars: function(_chars, useCopiedStyle) {
+ var style;
+
+ if (this.selectionEnd - this.selectionStart > 1) {
+ this._removeCharsFromTo(this.selectionStart, this.selectionEnd);
+ }
+ //short circuit for block paste
+ if (!useCopiedStyle && this.isEmptyStyles()) {
+ this.insertChar(_chars, false);
+ return;
+ }
+ for (var i = 0, len = _chars.length; i < len; i++) {
+ if (useCopiedStyle) {
+ style = fabric.copiedTextStyle[i];
+ }
+ this.insertChar(_chars[i], i < len - 1, style);
+ }
+ },
+
+ /**
+ * Inserts a character where cursor is
+ * @param {String} _char Characters to insert
+ * @param {Boolean} skipUpdate trigger rendering and updates at the end of text insert
+ * @param {Object} styleObject Style to be inserted for the new char
+ */
+ insertChar: function(_char, skipUpdate, styleObject) {
+ var isEndOfLine = this.text[this.selectionStart] === '\n';
+ this.text = this.text.slice(0, this.selectionStart) +
+ _char + this.text.slice(this.selectionEnd);
+ this._textLines = this._splitTextIntoLines();
+ this.insertStyleObjects(_char, isEndOfLine, styleObject);
+ this.selectionStart += _char.length;
+ this.selectionEnd = this.selectionStart;
+ if (skipUpdate) {
+ return;
+ }
+ this._updateTextarea();
+ this.setCoords();
+ this._fireSelectionChanged();
+ this.fire('changed');
+ this.canvas && this.canvas.fire('text:changed', { target: this });
+ this.canvas && this.canvas.renderAll();
+ },
+
+ /**
+ * Inserts new style object
+ * @param {Number} lineIndex Index of a line
+ * @param {Number} charIndex Index of a char
+ * @param {Boolean} isEndOfLine True if it's end of line
+ */
+ insertNewlineStyleObject: function(lineIndex, charIndex, isEndOfLine) {
+
+ this.shiftLineStyles(lineIndex, +1);
+
+ if (!this.styles[lineIndex + 1]) {
+ this.styles[lineIndex + 1] = {};
+ }
+
+ var currentCharStyle = {},
+ newLineStyles = {};
+
+ if (this.styles[lineIndex] && this.styles[lineIndex][charIndex - 1]) {
+ currentCharStyle = this.styles[lineIndex][charIndex - 1];
+ }
+
+ // if there's nothing after cursor,
+ // we clone current char style onto the next (otherwise empty) line
+ if (isEndOfLine) {
+ newLineStyles[0] = clone(currentCharStyle);
+ this.styles[lineIndex + 1] = newLineStyles;
+ }
+ // otherwise we clone styles of all chars
+ // after cursor onto the next line, from the beginning
+ else {
+ for (var index in this.styles[lineIndex]) {
+ if (parseInt(index, 10) >= charIndex) {
+ newLineStyles[parseInt(index, 10) - charIndex] = this.styles[lineIndex][index];
+ // remove lines from the previous line since they're on a new line now
+ delete this.styles[lineIndex][index];
+ }
+ }
+ this.styles[lineIndex + 1] = newLineStyles;
+ }
+ 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 {Object} [style] Style object to insert, if given
+ */
+ insertCharStyleObject: function(lineIndex, charIndex, style) {
+
+ var currentLineStyles = this.styles[lineIndex],
+ currentLineStylesCloned = clone(currentLineStyles);
+
+ if (charIndex === 0 && !style) {
+ charIndex = 1;
+ }
+
+ // shift all char styles by 1 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 + 1] = currentLineStylesCloned[numericIndex];
+
+ // only delete the style if there was nothing moved there
+ if (!currentLineStylesCloned[numericIndex - 1]) {
+ delete currentLineStyles[numericIndex];
+ }
+ }
+ }
+
+ this.styles[lineIndex][charIndex] =
+ style || clone(currentLineStyles[charIndex - 1]);
+ this._forceClearCache = true;
+ },
+
+ /**
+ * Inserts style object(s)
+ * @param {String} _chars Characters at the location where style is inserted
+ * @param {Boolean} isEndOfLine True if it's end of line
+ * @param {Object} [styleObject] Style to insert
+ */
+ insertStyleObjects: function(_chars, isEndOfLine, styleObject) {
+ // removed shortcircuit over isEmptyStyles
+
+ var cursorLocation = this.get2DCursorLocation(),
+ lineIndex = cursorLocation.lineIndex,
+ charIndex = cursorLocation.charIndex;
+
+ if (!this._getLineStyle(lineIndex)) {
+ this._setLineStyle(lineIndex, {});
+ }
+
+ if (_chars === '\n') {
+ this.insertNewlineStyleObject(lineIndex, charIndex, isEndOfLine);
+ }
+ else {
+ this.insertCharStyleObject(lineIndex, charIndex, styleObject);
+ }
+ },
+
+ /**
+ * Shifts line styles up or down
+ * @param {Number} lineIndex Index of a line
+ * @param {Number} offset Can be -1 or +1
+ */
+ shiftLineStyles: function(lineIndex, offset) {
+ // shift all line styles by 1 upward
+ 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];
+ }
+ }
+ }
+ //TODO: evaluate if delete old style lines with offset -1
+ },
+
+ /**
+ * Removes style object
+ * @param {Boolean} isBeginningOfLine True if cursor is at the beginning of line
+ * @param {Number} [index] Optional index. When not given, current selectionStart is used.
+ */
+ removeStyleObject: function(isBeginningOfLine, index) {
+
+ var cursorLocation = this.get2DCursorLocation(index),
+ lineIndex = cursorLocation.lineIndex,
+ charIndex = cursorLocation.charIndex;
+
+ this._removeStyleObject(isBeginningOfLine, cursorLocation, lineIndex, charIndex);
+ },
+
+ _getTextOnPreviousLine: function(lIndex) {
+ return this._textLines[lIndex - 1];
+ },
+
+ _removeStyleObject: function(isBeginningOfLine, cursorLocation, lineIndex, charIndex) {
+
+ if (isBeginningOfLine) {
+ var textOnPreviousLine = this._getTextOnPreviousLine(cursorLocation.lineIndex),
+ newCharIndexOnPrevLine = textOnPreviousLine ? textOnPreviousLine.length : 0;
+
+ if (!this.styles[lineIndex - 1]) {
+ this.styles[lineIndex - 1] = {};
+ }
+ for (charIndex in this.styles[lineIndex]) {
+ this.styles[lineIndex - 1][parseInt(charIndex, 10) + newCharIndexOnPrevLine]
+ = this.styles[lineIndex][charIndex];
+ }
+ this.shiftLineStyles(cursorLocation.lineIndex, -1);
+ }
+ else {
+ var currentLineStyles = this.styles[lineIndex];
+
+ if (currentLineStyles) {
+ delete currentLineStyles[charIndex];
+ }
+ var currentLineStylesCloned = clone(currentLineStyles);
+ // shift all styles by 1 backwards
+ for (var i in currentLineStylesCloned) {
+ var numericIndex = parseInt(i, 10);
+ if (numericIndex >= charIndex && numericIndex !== 0) {
+ currentLineStyles[numericIndex - 1] = currentLineStylesCloned[numericIndex];
+ delete currentLineStyles[numericIndex];
+ }
+ }
+ }
+ },
+
+ /**
+ * Inserts new line
+ */
+ insertNewline: function() {
+ this.insertChars('\n');
+ },
+
+ /**
+ * Set the selectionStart and selectionEnd according to the ne postion 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 (newSelection > start && newSelection < end) {
+ if (this._selectionDirection === 'right') {
+ this.selectionEnd = newSelection;
+ }
+ else {
+ this.selectionStart = newSelection;
+ }
+ }
+ 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;
+ }
+ },
+
+ 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.bind(this));
+ },
+
+ onMouseDown: function(options) {
+
+ this.__newClickTime = +new Date();
+ var newPointer = this.canvas.getPointer(options.e);
+
+ if (this.isTripleClick(newPointer)) {
+ this.fire('tripleclick', options);
+ this._stopEvent(options.e);
+ }
+ else if (this.isDoubleClick(newPointer)) {
+ this.fire('dblclick', options);
+ this._stopEvent(options.e);
+ }
+
+ this.__lastLastClickTime = this.__lastClickTime;
+ this.__lastClickTime = this.__newClickTime;
+ this.__lastPointer = newPointer;
+ this.__lastIsEditing = this.isEditing;
+ this.__lastSelected = this.selected;
+ },
+
+ isDoubleClick: function(newPointer) {
+ return this.__newClickTime - this.__lastClickTime < 500 &&
+ this.__lastPointer.x === newPointer.x &&
+ this.__lastPointer.y === newPointer.y && this.__lastIsEditing;
+ },
+
+ 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();
+ },
+
+ /**
+ * Initializes event handlers related to cursor or selection
+ */
+ initCursorSelectionHandlers: function() {
+ this.initSelectedHandler();
+ this.initMousedownHandler();
+ this.initMouseupHandler();
+ this.initClicks();
+ },
+
+ /**
+ * Initializes double and triple click event handlers
+ */
+ initClicks: function() {
+ this.on('dblclick', function(options) {
+ this.selectWord(this.getSelectionStartFromPointer(options.e));
+ });
+ this.on('tripleclick', function(options) {
+ this.selectLine(this.getSelectionStartFromPointer(options.e));
+ });
+ },
+
+ /**
+ * Initializes "mousedown" event handler
+ */
+ initMousedownHandler: function() {
+ this.on('mousedown', function(options) {
+ if (!this.editable) {
+ return;
+ }
+ var pointer = this.canvas.getPointer(options.e);
+
+ this.__mousedownX = pointer.x;
+ this.__mousedownY = pointer.y;
+ this.__isMousedown = true;
+
+ if (this.selected) {
+ this.setCursorByClick(options.e);
+ }
+
+ if (this.isEditing) {
+ this.__selectionStartOnMouseDown = this.selectionStart;
+ if (this.selectionStart === this.selectionEnd) {
+ this.abortCursorAnimation();
+ }
+ this.renderCursorOrSelection();
+ }
+ });
+ },
+
+ /**
+ * @private
+ */
+ _isObjectMoved: function(e) {
+ var pointer = this.canvas.getPointer(e);
+
+ return this.__mousedownX !== pointer.x ||
+ this.__mousedownY !== pointer.y;
+ },
+
+ /**
+ * Initializes "mouseup" event handler
+ */
+ initMouseupHandler: function() {
+ this.on('mouseup', function(options) {
+ this.__isMousedown = false;
+ if (!this.editable || this._isObjectMoved(options.e)) {
+ return;
+ }
+
+ if (this.__lastSelected && !this.__corner) {
+ this.enterEditing(options.e);
+ if (this.selectionStart === this.selectionEnd) {
+ this.initDelayedCursor(true);
+ }
+ else {
+ this.renderCursorOrSelection();
+ }
+ }
+ 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;
+ }
+ 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,
+ newSelectionStart,
+ line;
+
+ for (var i = 0, len = this._textLines.length; i < len; i++) {
+ line = this._textLines[i];
+ height += this._getHeightOfLine(this.ctx, i) * this.scaleY;
+
+ var widthOfLine = this._getLineWidth(this.ctx, i),
+ lineLeftOffset = this._getLineLeftOffset(widthOfLine);
+
+ width = lineLeftOffset * this.scaleX;
+
+ for (var j = 0, jlen = line.length; j < jlen; j++) {
+
+ prevWidth = width;
+
+ width += this._getWidthOfChar(this.ctx, line[j], i, this.flipX ? jlen - j : j) *
+ this.scaleX;
+
+ if (height <= mouseOffset.y || width <= mouseOffset.x) {
+ charIndex++;
+ continue;
+ }
+
+ return this._getNewSelectionStartFromOffset(
+ mouseOffset, prevWidth, width, charIndex + i, jlen);
+ }
+
+ if (mouseOffset.y < height) {
+ //this happens just on end of lines.
+ return this._getNewSelectionStartFromOffset(
+ mouseOffset, prevWidth, width, charIndex + i - 1, jlen);
+ }
+ }
+
+ // clicked somewhere after all chars, so set at the end
+ if (typeof newSelectionStart === 'undefined') {
+ return this.text.length;
+ }
+ },
+
+ /**
+ * @private
+ */
+ _getNewSelectionStartFromOffset: function(mouseOffset, prevWidth, width, index, jlen) {
+
+ var distanceBtwLastCharAndCursor = mouseOffset.x - prevWidth,
+ distanceBtwNextCharAndCursor = width - mouseOffset.x,
+ offset = distanceBtwNextCharAndCursor > distanceBtwLastCharAndCursor ? 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;
+ }
+
+ return newSelectionStart;
+ }
+});
+
+
+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');
+ var style = this._calcTextareaPosition();
+ this.hiddenTextarea.style.cssText = 'position: absolute; top: ' + style.top + '; left: ' + style.left + ';'
+ + ' opacity: 0; width: 0px; height: 0px; z-index: -999;';
+ 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.cut.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;
+ }
+ },
+
+ /**
+ * @private
+ */
+ _keysMap: {
+ 8: 'removeChars',
+ 9: 'exitEditing',
+ 27: 'exitEditing',
+ 13: 'insertNewline',
+ 33: 'moveCursorUp',
+ 34: 'moveCursorDown',
+ 35: 'moveCursorRight',
+ 36: 'moveCursorLeft',
+ 37: 'moveCursorLeft',
+ 38: 'moveCursorUp',
+ 39: 'moveCursorRight',
+ 40: 'moveCursorDown',
+ 46: 'forwardDelete'
+ },
+
+ /**
+ * @private
+ */
+ _ctrlKeysMapUp: {
+ 67: 'copy',
+ 88: 'cut'
+ },
+
+ /**
+ * @private
+ */
+ _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();
+ },
+
+ /**
+ * Handles keyup event
+ * @param {Event} e Event object
+ */
+ onKeyDown: function(e) {
+ if (!this.isEditing) {
+ return;
+ }
+ if (e.keyCode in this._keysMap) {
+ this[this._keysMap[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();
+ this.canvas && this.canvas.renderAll();
+ },
+
+ /**
+ * 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._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.renderAll();
+ },
+
+ /**
+ * Handles onInput event
+ * @param {Event} e Event object
+ */
+ onInput: function(e) {
+ if (!this.isEditing || this.inCompositionMode) {
+ return;
+ }
+ var offset = this.selectionStart || 0,
+ offsetEnd = this.selectionEnd || 0,
+ textLength = this.text.length,
+ newTextLength = this.hiddenTextarea.value.length,
+ diff, charsToInsert, start;
+ if (newTextLength > textLength) {
+ //we added some character
+ start = this._selectionDirection === 'left' ? offsetEnd : offset;
+ diff = newTextLength - textLength;
+ charsToInsert = this.hiddenTextarea.value.slice(start, start + diff);
+ }
+ else {
+ //we selected a portion of text and then input something else.
+ //Internet explorer does not trigger this else
+ diff = newTextLength - textLength + offsetEnd - offset;
+ charsToInsert = this.hiddenTextarea.value.slice(offset, offset + diff);
+ }
+ this.insertChars(charsToInsert);
+ e.stopPropagation();
+ },
+
+ /**
+ * Composition start
+ */
+ onCompositionStart: function() {
+ this.inCompositionMode = true;
+ this.prevCompositionLength = 0;
+ this.compositionStart = this.selectionStart;
+ },
+
+ /**
+ * Composition end
+ */
+ onCompositionEnd: function() {
+ this.inCompositionMode = false;
+ },
+
+ /**
+ * Composition update
+ */
+ onCompositionUpdate: function(e) {
+ var data = e.data;
+ this.selectionStart = this.compositionStart;
+ this.selectionEnd = this.selectionEnd === this.selectionStart ?
+ this.compositionStart + this.prevCompositionLength : this.selectionEnd;
+ this.insertChars(data, false);
+ this.prevCompositionLength = data.length;
+ },
+
+ /**
+ * Forward delete
+ */
+ forwardDelete: function(e) {
+ if (this.selectionStart === this.selectionEnd) {
+ if (this.selectionStart === this.text.length) {
+ return;
+ }
+ this.moveCursorRight(e);
+ }
+ this.removeChars(e);
+ },
+
+ /**
+ * Copies selected text
+ * @param {Event} e Event object
+ */
+ copy: function(e) {
+ if (this.selectionStart === this.selectionEnd) {
+ //do not cut-copy if no selection
+ return;
+ }
+ var selectedText = this.getSelectedText(),
+ clipboardData = this._getClipboardData(e);
+
+ // Check for backward compatibility with old browsers
+ if (clipboardData) {
+ clipboardData.setData('text', selectedText);
+ }
+
+ fabric.copiedText = selectedText;
+ fabric.copiedTextStyle = this.getSelectionStyles(
+ this.selectionStart,
+ this.selectionEnd);
+ e.stopImmediatePropagation();
+ e.preventDefault();
+ this._copyDone = true;
+ },
+
+ /**
+ * Pastes text
+ * @param {Event} e Event object
+ */
+ paste: function(e) {
+ var copiedText = null,
+ clipboardData = this._getClipboardData(e),
+ useCopiedStyle = true;
+
+ // Check for backward compatibility with old browsers
+ if (clipboardData) {
+ copiedText = clipboardData.getData('text').replace(/\r/g, '');
+ if (!fabric.copiedTextStyle || fabric.copiedText !== copiedText) {
+ useCopiedStyle = false;
+ }
+ }
+ else {
+ copiedText = fabric.copiedText;
+ }
+
+ if (copiedText) {
+ this.insertChars(copiedText, useCopiedStyle);
+ }
+ e.stopImmediatePropagation();
+ e.preventDefault();
+ },
+
+ /**
+ * Cuts text
+ * @param {Event} e Event object
+ */
+ cut: function(e) {
+ if (this.selectionStart === this.selectionEnd) {
+ return;
+ }
+
+ this.copy(e);
+ this.removeChars(e);
+ },
+
+ /**
+ * @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 textBeforeCursor = this._textLines[lineIndex].slice(0, charIndex),
+ widthOfLine = this._getLineWidth(this.ctx, lineIndex),
+ widthBeforeCursor = this._getLineLeftOffset(widthOfLine), _char;
+
+ for (var i = 0, len = textBeforeCursor.length; i < len; i++) {
+ _char = textBeforeCursor[i];
+ widthBeforeCursor += this._getWidthOfChar(this.ctx, _char, lineIndex, i);
+ }
+ 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 + 2;
+ },
+
+ /**
+ * 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);
+ // return a negative offset
+ return -this._textLines[lineIndex - 1].length + indexOnOtherLine - textBeforeCursor.length;
+ },
+
+ /**
+ * find for a given width it founds the matching character.
+ * @private
+ */
+ _getIndexOnLine: function(lineIndex, width) {
+
+ var widthOfLine = this._getLineWidth(this.ctx, lineIndex),
+ textOnLine = this._textLines[lineIndex],
+ lineLeftOffset = this._getLineLeftOffset(widthOfLine),
+ widthOfCharsOnLine = lineLeftOffset,
+ indexOnLine = 0,
+ foundMatch;
+
+ for (var j = 0, jlen = textOnLine.length; j < jlen; j++) {
+
+ var _char = textOnLine[j],
+ widthOfChar = this._getWidthOfChar(this.ctx, _char, lineIndex, j);
+
+ widthOfCharsOnLine += widthOfChar;
+
+ if (widthOfCharsOnLine > width) {
+
+ foundMatch = true;
+
+ var leftEdge = widthOfCharsOnLine - widthOfChar,
+ rightEdge = widthOfCharsOnLine,
+ offsetFromLeftEdge = Math.abs(leftEdge - width),
+ offsetFromRightEdge = Math.abs(rightEdge - width);
+
+ indexOnLine = offsetFromRightEdge < offsetFromLeftEdge ? j : (j - 1);
+
+ break;
+ }
+ }
+
+ // reached end
+ if (!foundMatch) {
+ indexOnLine = textOnLine.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._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 selected by selection
+ * @param {Event} e Event object
+ */
+ removeChars: function(e) {
+ if (this.selectionStart === this.selectionEnd) {
+ this._removeCharsNearCursor(e);
+ }
+ else {
+ this._removeCharsFromTo(this.selectionStart, this.selectionEnd);
+ }
+
+ this.setSelectionEnd(this.selectionStart);
+
+ this._removeExtraneousStyles();
+
+ this.canvas && this.canvas.renderAll();
+
+ this.setCoords();
+ this.fire('changed');
+ this.canvas && this.canvas.fire('text:changed', { target: this });
+ },
+
+ /**
+ * @private
+ * @param {Event} e Event object
+ */
+ _removeCharsNearCursor: function(e) {
+ if (this.selectionStart === 0) {
+ return;
+ }
+ if (e.metaKey) {
+ // remove all till the start of current line
+ var leftLineBoundary = this.findLineBoundaryLeft(this.selectionStart);
+
+ this._removeCharsFromTo(leftLineBoundary, this.selectionStart);
+ this.setSelectionStart(leftLineBoundary);
+ }
+ else if (e.altKey) {
+ // remove all till the start of current word
+ var leftWordBoundary = this.findWordBoundaryLeft(this.selectionStart);
+
+ this._removeCharsFromTo(leftWordBoundary, this.selectionStart);
+ this.setSelectionStart(leftWordBoundary);
+ }
+ else {
+ this._removeSingleCharAndStyle(this.selectionStart);
+ this.setSelectionStart(this.selectionStart - 1);
+ }
+ }
+});
+
+
+/* _TO_SVG_START_ */
+(function() {
+ var toFixed = fabric.util.toFixed,
+ NUM_FRACTION_DIGITS = fabric.Object.NUM_FRACTION_DIGITS;
+
+ fabric.util.object.extend(fabric.IText.prototype, /** @lends fabric.IText.prototype */ {
+
+ /**
+ * @private
+ */
+ _setSVGTextLineText: function(lineIndex, textSpans, height, textLeftOffset, textTopOffset, textBgRects) {
+ if (!this._getLineStyle(lineIndex)) {
+ fabric.Text.prototype._setSVGTextLineText.call(this,
+ lineIndex, textSpans, height, textLeftOffset, textTopOffset);
+ }
+ else {
+ this._setSVGTextLineChars(
+ lineIndex, textSpans, height, textLeftOffset, textBgRects);
+ }
+ },
+
+ /**
+ * @private
+ */
+ _setSVGTextLineChars: function(lineIndex, textSpans, height, textLeftOffset, textBgRects) {
+
+ var chars = this._textLines[lineIndex],
+ charOffset = 0,
+ lineLeftOffset = this._getLineLeftOffset(this._getLineWidth(this.ctx, lineIndex)) - this.width / 2,
+ lineOffset = this._getSVGLineTopOffset(lineIndex),
+ heightOfLine = this._getHeightOfLine(this.ctx, lineIndex);
+
+ for (var i = 0, len = chars.length; i < len; i++) {
+ var styleDecl = this._getStyleDeclaration(lineIndex, i) || { };
+
+ textSpans.push(
+ this._createTextCharSpan(
+ chars[i], styleDecl, lineLeftOffset, lineOffset.lineTop + lineOffset.offset, charOffset));
+
+ var charWidth = this._getWidthOfChar(this.ctx, chars[i], lineIndex, i);
+
+ if (styleDecl.textBackgroundColor) {
+ textBgRects.push(
+ this._createTextCharBg(
+ styleDecl, lineLeftOffset, lineOffset.lineTop, heightOfLine, charWidth, charOffset));
+ }
+
+ charOffset += charWidth;
+ }
+ },
+
+ /**
+ * @private
+ */
+ _getSVGLineTopOffset: function(lineIndex) {
+ var lineTopOffset = 0, lastHeight = 0;
+ for (var j = 0; j < lineIndex; j++) {
+ lineTopOffset += this._getHeightOfLine(this.ctx, j);
+ }
+ lastHeight = this._getHeightOfLine(this.ctx, j);
+ return {
+ lineTop: lineTopOffset,
+ offset: (this._fontSizeMult - this._fontSizeFraction) * lastHeight / (this.lineHeight * this._fontSizeMult)
+ };
+ },
+
+ /**
+ * @private
+ */
+ _createTextCharBg: function(styleDecl, lineLeftOffset, lineTopOffset, heightOfLine, charWidth, charOffset) {
+ return [
+ '\t\t',
+ fabric.util.string.escapeXml(_char),
+ ' \n'
+ ].join('');
+ }
+ });
+})();
+/* _TO_SVG_END_ */
+
+
+(function(global) {
+
+ 'use strict';
+
+ var fabric = global.fabric || (global.fabric = {}),
+ clone = fabric.util.object.clone;
+
+ /**
+ * 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, {
+
+ /**
+ * Type of an object
+ * @type String
+ * @default
+ */
+ type: 'textbox',
+
+ /**
+ * Minimum width of textbox, in pixels.
+ * @type Number
+ * @default
+ */
+ 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,
+
+ /**
+ * Cached array of text wrapping.
+ * @type Array
+ */
+ __cachedLines: null,
+
+ /**
+ * Override standard Object class values
+ */
+ lockScalingY: true,
+
+ /**
+ * Override standard Object class values
+ */
+ lockScalingFlip: true,
+
+ /**
+ * Constructor. Some scaling related property values are forced. Visibility
+ * of controls is also fixed; only the rotation and width controls are
+ * made available.
+ * @param {String} text Text string
+ * @param {Object} [options] Options object
+ * @return {fabric.Textbox} thisArg
+ */
+ initialize: function(text, options) {
+ this.ctx = fabric.util.createCanvasElement().getContext('2d');
+ this.callSuper('initialize', text, options);
+ this.setControlsVisibility(fabric.Textbox.getTextboxControlVisibility());
+
+ // add width to this list of props that effect line wrapping.
+ this._dimensionAffectingProps.width = true;
+ },
+
+ /**
+ * Unlike superclass's version of this function, Textbox does not update
+ * its width.
+ * @param {CanvasRenderingContext2D} ctx Context to use for measurements
+ * @private
+ * @override
+ */
+ _initDimensions: function(ctx) {
+ if (this.__skipDimension) {
+ return;
+ }
+
+ if (!ctx) {
+ ctx = fabric.util.createCanvasElement().getContext('2d');
+ this._setTextStyles(ctx);
+ }
+
+ // clear dynamicMinWidth as it will be different after we re-wrap line
+ this.dynamicMinWidth = 0;
+
+ // wrap lines
+ this._textLines = this._splitTextIntoLines();
+ // 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);
+ }
+
+ // clear cache and re-calculate height
+ this._clearCache();
+ this.height = this._getTextHeight(ctx);
+ },
+
+ /**
+ * 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() {
+ var realLineCount = 0,
+ realLineCharCount = 0,
+ charCount = 0,
+ map = {};
+
+ for (var i = 0; i < this._textLines.length; i++) {
+ if (this.text[charCount] === '\n' && i > 0) {
+ realLineCharCount = 0;
+ charCount++;
+ realLineCount++;
+ }
+ else if (this.text[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 };
+
+ charCount += this._textLines[i].length;
+ realLineCharCount += this._textLines[i].length;
+ }
+
+ return map;
+ },
+
+ /**
+ * @param {Number} lineIndex
+ * @param {Number} charIndex
+ * @param {Boolean} [returnCloneOrEmpty=false]
+ * @private
+ */
+ _getStyleDeclaration: function(lineIndex, charIndex, returnCloneOrEmpty) {
+ if (this._styleMap) {
+ var map = this._styleMap[lineIndex];
+ if (!map) {
+ return returnCloneOrEmpty ? { } : null;
+ }
+ lineIndex = map.line;
+ charIndex = map.offset + charIndex;
+ }
+ return this.callSuper('_getStyleDeclaration', lineIndex, charIndex, returnCloneOrEmpty);
+ },
+
+ /**
+ * @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];
+ },
+
+ /**
+ * @param {Number} lineIndex
+ * @private
+ */
+ _getLineStyle: function(lineIndex) {
+ var map = this._styleMap[lineIndex];
+ return this.styles[map.line];
+ },
+
+ /**
+ * @param {Number} lineIndex
+ * @param {Object} style
+ * @private
+ */
+ _setLineStyle: function(lineIndex, style) {
+ var map = this._styleMap[lineIndex];
+ this.styles[map.line] = style;
+ },
+
+ /**
+ * @param {Number} lineIndex
+ * @private
+ */
+ _deleteLineStyle: function(lineIndex) {
+ var map = this._styleMap[lineIndex];
+ delete 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 {CanvasRenderingContext2D} ctx Context to use for measurements
+ * @param {String} text The string of text that is split into lines
+ * @returns {Array} Array of lines
+ */
+ _wrapText: function(ctx, text) {
+ var lines = text.split(this._reNewline), wrapped = [], i;
+
+ for (i = 0; i < lines.length; i++) {
+ wrapped = wrapped.concat(this._wrapLine(ctx, lines[i], i));
+ }
+
+ return wrapped;
+ },
+
+ /**
+ * Helper function to measure a string of text, given its lineIndex and charIndex offset
+ *
+ * @param {CanvasRenderingContext2D} ctx
+ * @param {String} text
+ * @param {number} lineIndex
+ * @param {number} charOffset
+ * @returns {number}
+ * @private
+ */
+ _measureText: function(ctx, text, lineIndex, charOffset) {
+ var width = 0;
+ charOffset = charOffset || 0;
+ for (var i = 0, len = text.length; i < len; i++) {
+ width += this._getWidthOfChar(ctx, text[i], lineIndex, i + charOffset);
+ }
+ return width;
+ },
+
+ /**
+ * Wraps a line of text using the width of the Textbox and a context.
+ * @param {CanvasRenderingContext2D} ctx Context to use for measurements
+ * @param {String} text The string of text to split into lines
+ * @param {Number} lineIndex
+ * @returns {Array} Array of line(s) into which the given text is wrapped
+ * to.
+ */
+ _wrapLine: function(ctx, text, lineIndex) {
+ var lineWidth = 0,
+ lines = [],
+ line = '',
+ words = text.split(' '),
+ word = '',
+ offset = 0,
+ infix = ' ',
+ wordWidth = 0,
+ infixWidth = 0,
+ largestWordWidth = 0,
+ lineJustStarted = true,
+ additionalSpace = this._getWidthOfCharSpacing();
+
+ for (var i = 0; i < words.length; i++) {
+ word = words[i];
+ wordWidth = this._measureText(ctx, word, lineIndex, offset);
+
+ offset += word.length;
+
+ lineWidth += infixWidth + wordWidth - additionalSpace;
+
+ if (lineWidth >= this.width && !lineJustStarted) {
+ lines.push(line);
+ line = '';
+ lineWidth = wordWidth;
+ lineJustStarted = true;
+ }
+ else {
+ lineWidth += additionalSpace;
+ }
+
+ if (!lineJustStarted) {
+ line += infix;
+ }
+ line += word;
+
+ infixWidth = this._measureText(ctx, infix, lineIndex, offset);
+ offset++;
+ lineJustStarted = false;
+ // keep track of largest word
+ if (wordWidth > largestWordWidth) {
+ largestWordWidth = wordWidth;
+ }
+ }
+
+ i && lines.push(line);
+
+ if (largestWordWidth > this.dynamicMinWidth) {
+ this.dynamicMinWidth = largestWordWidth - additionalSpace;
+ }
+
+ return lines;
+ },
+ /**
+ * Gets lines of text to render in the Textbox. This function calculates
+ * text wrapping on the fly everytime it is called.
+ * @returns {Array} Array of lines in the Textbox.
+ * @override
+ */
+ _splitTextIntoLines: function() {
+ var originalAlign = this.textAlign;
+ this.ctx.save();
+ this._setTextStyles(this.ctx);
+ this.textAlign = 'left';
+ var lines = this._wrapText(this.ctx, this.text);
+ this.textAlign = originalAlign;
+ this.ctx.restore();
+ this._textLines = lines;
+ this._styleMap = this._generateStyleMap();
+ return lines;
+ },
+
+ /**
+ * When part of a group, we don't want the Textbox's scale to increase if
+ * the group's increases. That's why we reduce the scale of the Textbox by
+ * the amount that the group's increases. This is to maintain the effective
+ * scale of the Textbox at 1, so that font-size values make sense. Otherwise
+ * the same font-size value would result in different actual size depending
+ * on the value of the scale.
+ * @param {String} key
+ * @param {*} value
+ */
+ setOnGroup: function(key, value) {
+ if (key === 'scaleX') {
+ this.set('scaleX', Math.abs(1 / value));
+ this.set('width', (this.get('width') * value) /
+ (typeof this.__oldScaleX === 'undefined' ? 1 : this.__oldScaleX));
+ this.__oldScaleX = value;
+ }
+ },
+
+ /**
+ * Returns 2d representation (lineIndex and charIndex) of cursor (or selection start).
+ * Overrides the superclass function to take into account text wrapping.
+ *
+ * @param {Number} [selectionStart] Optional index. When not given, current selectionStart is used.
+ */
+ get2DCursorLocation: function(selectionStart) {
+ if (typeof selectionStart === 'undefined') {
+ selectionStart = this.selectionStart;
+ }
+
+ var numLines = this._textLines.length,
+ removed = 0;
+
+ for (var i = 0; i < numLines; i++) {
+ var line = this._textLines[i],
+ lineLen = line.length;
+
+ if (selectionStart <= removed + lineLen) {
+ return {
+ lineIndex: i,
+ charIndex: selectionStart - removed
+ };
+ }
+
+ removed += lineLen;
+
+ if (this.text[removed] === '\n' || this.text[removed] === ' ') {
+ removed++;
+ }
+ }
+
+ return {
+ lineIndex: numLines - 1,
+ charIndex: this._textLines[numLines - 1].length
+ };
+ },
+
+ /**
+ * Overrides superclass function and uses text wrapping data to get cursor
+ * boundary offsets instead of the array of chars.
+ * @param {Array} chars Unused
+ * @param {String} typeOfBoundaries Can be 'cursor' or 'selection'
+ * @returns {Object} Object with 'top', 'left', and 'lineLeft' properties set.
+ */
+ _getCursorBoundariesOffsets: function(chars, typeOfBoundaries) {
+ var topOffset = 0,
+ leftOffset = 0,
+ cursorLocation = this.get2DCursorLocation(),
+ lineChars = this._textLines[cursorLocation.lineIndex].split(''),
+ lineLeftOffset = this._getLineLeftOffset(this._getLineWidth(this.ctx, cursorLocation.lineIndex));
+
+ for (var i = 0; i < cursorLocation.charIndex; i++) {
+ leftOffset += this._getWidthOfChar(this.ctx, lineChars[i], cursorLocation.lineIndex, i);
+ }
+
+ for (i = 0; i < cursorLocation.lineIndex; i++) {
+ topOffset += this._getHeightOfLine(this.ctx, i);
+ }
+
+ if (typeOfBoundaries === 'cursor') {
+ topOffset += (1 - this._fontSizeFraction) * this._getHeightOfLine(this.ctx, cursorLocation.lineIndex)
+ / this.lineHeight - this.getCurrentCharFontSize(cursorLocation.lineIndex, cursorLocation.charIndex)
+ * (1 - this._fontSizeFraction);
+ }
+
+ return {
+ top: topOffset,
+ left: leftOffset,
+ lineLeft: lineLeftOffset
+ };
+ },
+
+ getMinWidth: function() {
+ return Math.max(this.minWidth, this.dynamicMinWidth);
+ },
+
+ /**
+ * 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 fabric.util.object.extend(this.callSuper('toObject', propertiesToInclude), {
+ minWidth: this.minWidth
+ });
+ }
+ });
+ /**
+ * 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
+ * @return {fabric.Textbox} instance of fabric.Textbox
+ */
+ fabric.Textbox.fromObject = function(object, callback) {
+ var textbox = new fabric.Textbox(object.text, clone(object));
+ callback && callback(textbox);
+ return textbox;
+ };
+ /**
+ * Returns the default controls visibility required for Textboxes.
+ * @returns {Object}
+ */
+ fabric.Textbox.getTextboxControlVisibility = function() {
+ return {
+ tl: false,
+ tr: false,
+ br: false,
+ bl: false,
+ ml: true,
+ mt: false,
+ mr: true,
+ mb: false,
+ mtr: true
+ };
+ };
+
+})(typeof exports !== 'undefined' ? exports : this);
+
+
+(function() {
+
+ /**
+ * Override _setObjectScale and add Textbox specific resizing behavior. Resizing
+ * a Textbox doesn't scale text, it only changes width and makes text wrap automatically.
+ */
+ var setObjectScaleOverridden = fabric.Canvas.prototype._setObjectScale;
+
+ fabric.Canvas.prototype._setObjectScale = function(localMouse, transform,
+ lockScalingX, lockScalingY, by, lockScalingFlip, _dim) {
+
+ var t = transform.target;
+ if (t instanceof fabric.Textbox) {
+ var w = t.width * ((localMouse.x / transform.scaleX) / (t.width + t.strokeWidth));
+ if (w >= t.getMinWidth()) {
+ t.set('width', w);
+ return true;
+ }
+ }
+ else {
+ return setObjectScaleOverridden.call(fabric.Canvas.prototype, localMouse, transform,
+ lockScalingX, lockScalingY, by, lockScalingFlip, _dim);
+ }
+ };
+
+ /**
+ * Sets controls of this group to the Textbox's special configuration if
+ * one is present in the group. Deletes _controlsVisibility otherwise, so that
+ * it gets initialized to default value at runtime.
+ */
+ fabric.Group.prototype._refreshControlsVisibility = function() {
+ if (typeof fabric.Textbox === 'undefined') {
+ return;
+ }
+ for (var i = this._objects.length; i--;) {
+ if (this._objects[i] instanceof fabric.Textbox) {
+ this.setControlsVisibility(fabric.Textbox.getTextboxControlVisibility());
+ return;
+ }
+ }
+ };
+
+ var clone = fabric.util.object.clone;
+
+ fabric.util.object.extend(fabric.Textbox.prototype, /** @lends fabric.IText.prototype */ {
+ /**
+ * @private
+ */
+ _removeExtraneousStyles: function() {
+ for (var prop in this._styleMap) {
+ if (!this._textLines[prop]) {
+ delete this.styles[this._styleMap[prop].line];
+ }
+ }
+ },
+
+ /**
+ * Inserts style object for a given line/char index
+ * @param {Number} lineIndex Index of a line
+ * @param {Number} charIndex Index of a char
+ * @param {Object} [style] Style object to insert, if given
+ */
+ insertCharStyleObject: function(lineIndex, charIndex, style) {
+ // adjust lineIndex and charIndex
+ var map = this._styleMap[lineIndex];
+ lineIndex = map.line;
+ charIndex = map.offset + charIndex;
+
+ fabric.IText.prototype.insertCharStyleObject.apply(this, [lineIndex, charIndex, style]);
+ },
+
+ /**
+ * Inserts new style object
+ * @param {Number} lineIndex Index of a line
+ * @param {Number} charIndex Index of a char
+ * @param {Boolean} isEndOfLine True if it's end of line
+ */
+ insertNewlineStyleObject: function(lineIndex, charIndex, isEndOfLine) {
+ // adjust lineIndex and charIndex
+ var map = this._styleMap[lineIndex];
+ lineIndex = map.line;
+ charIndex = map.offset + charIndex;
+
+ fabric.IText.prototype.insertNewlineStyleObject.apply(this, [lineIndex, charIndex, isEndOfLine]);
+ },
+
+ /**
+ * Shifts line styles up or down. This function is slightly different than the one in
+ * itext_behaviour as it takes into account the styleMap.
+ *
+ * @param {Number} lineIndex Index of a line
+ * @param {Number} offset Can be -1 or +1
+ */
+ shiftLineStyles: function(lineIndex, offset) {
+ // shift all line styles by 1 upward
+ var clonedStyles = clone(this.styles),
+ map = this._styleMap[lineIndex];
+
+ // adjust line index
+ lineIndex = map.line;
+
+ 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];
+ }
+ }
+ }
+ //TODO: evaluate if delete old style lines with offset -1
+ },
+
+ /**
+ * Figure out programatically the text on previous actual line (actual = separated by \n);
+ *
+ * @param {Number} lIndex
+ * @returns {String}
+ * @private
+ */
+ _getTextOnPreviousLine: function(lIndex) {
+ var textOnPreviousLine = this._textLines[lIndex - 1];
+
+ while (this._styleMap[lIndex - 2] && this._styleMap[lIndex - 2].line === this._styleMap[lIndex - 1].line) {
+ textOnPreviousLine = this._textLines[lIndex - 2] + textOnPreviousLine;
+
+ lIndex--;
+ }
+
+ return textOnPreviousLine;
+ },
+
+ /**
+ * Removes style object
+ * @param {Boolean} isBeginningOfLine True if cursor is at the beginning of line
+ * @param {Number} [index] Optional index. When not given, current selectionStart is used.
+ */
+ removeStyleObject: function(isBeginningOfLine, index) {
+
+ var cursorLocation = this.get2DCursorLocation(index),
+ map = this._styleMap[cursorLocation.lineIndex],
+ lineIndex = map.line,
+ charIndex = map.offset + cursorLocation.charIndex;
+ this._removeStyleObject(isBeginningOfLine, cursorLocation, lineIndex, charIndex);
+ }
+ });
+})();
+
+
+(function() {
+ var override = fabric.IText.prototype._getNewSelectionStartFromOffset;
+ /**
+ * Overrides the IText implementation and adjusts character index as there is not always a linebreak
+ *
+ * @param {Number} mouseOffset
+ * @param {Number} prevWidth
+ * @param {Number} width
+ * @param {Number} index
+ * @param {Number} jlen
+ * @returns {Number}
+ */
+ fabric.IText.prototype._getNewSelectionStartFromOffset = function(mouseOffset, prevWidth, width, index, jlen) {
+ index = override.call(this, mouseOffset, prevWidth, width, index, jlen);
+
+ // the index passed into the function is padded by the amount of lines from _textLines (to account for \n)
+ // we need to remove this padding, and pad it by actual lines, and / or spaces that are meant to be there
+ var tmp = 0,
+ removed = 0;
+
+ // account for removed characters
+ for (var i = 0; i < this._textLines.length; i++) {
+ tmp += this._textLines[i].length;
+
+ if (tmp + removed >= index) {
+ break;
+ }
+
+ if (this.text[tmp + removed] === '\n' || this.text[tmp + removed] === ' ') {
+ removed++;
+ }
+ }
+
+ return index - i + removed;
+ };
+})();
+
+
+(function() {
+
+ if (typeof document !== 'undefined' && typeof window !== 'undefined') {
+ return;
+ }
+
+ var DOMParser = require('xmldom').DOMParser,
+ URL = require('url'),
+ HTTP = require('http'),
+ HTTPS = require('https'),
+
+ Canvas = require('canvas'),
+ Image = require('canvas').Image;
+
+ /** @private */
+ function request(url, encoding, callback) {
+ var oURL = URL.parse(url);
+
+ // detect if http or https is used
+ if ( !oURL.port ) {
+ oURL.port = ( oURL.protocol.indexOf('https:') === 0 ) ? 443 : 80;
+ }
+
+ // assign request handler based on protocol
+ var reqHandler = (oURL.protocol.indexOf('https:') === 0 ) ? HTTPS : HTTP,
+ req = reqHandler.request({
+ hostname: oURL.hostname,
+ port: oURL.port,
+ path: oURL.path,
+ method: 'GET'
+ }, function(response) {
+ var body = '';
+ if (encoding) {
+ response.setEncoding(encoding);
+ }
+ response.on('end', function () {
+ callback(body);
+ });
+ response.on('data', function (chunk) {
+ if (response.statusCode === 200) {
+ body += chunk;
+ }
+ });
+ });
+
+ req.on('error', function(err) {
+ if (err.errno === process.ECONNREFUSED) {
+ fabric.log('ECONNREFUSED: connection refused to ' + oURL.hostname + ':' + oURL.port);
+ }
+ else {
+ fabric.log(err.message);
+ }
+ callback(null);
+ });
+
+ req.end();
+ }
+
+ /** @private */
+ function requestFs(path, callback) {
+ var fs = require('fs');
+ fs.readFile(path, function (err, data) {
+ if (err) {
+ fabric.log(err);
+ throw err;
+ }
+ else {
+ callback(data);
+ }
+ });
+ }
+
+ fabric.util.loadImage = function(url, callback, context) {
+ function createImageAndCallBack(data) {
+ if (data) {
+ img.src = new Buffer(data, 'binary');
+ // preserving original url, which seems to be lost in node-canvas
+ img._src = url;
+ callback && callback.call(context, img);
+ }
+ else {
+ img = null;
+ callback && callback.call(context, null, true);
+ }
+ }
+ var img = new Image();
+ if (url && (url instanceof Buffer || url.indexOf('data') === 0)) {
+ img.src = img._src = url;
+ callback && callback.call(context, img);
+ }
+ else if (url && url.indexOf('http') !== 0) {
+ requestFs(url, createImageAndCallBack);
+ }
+ else if (url) {
+ request(url, 'binary', createImageAndCallBack);
+ }
+ else {
+ callback && callback.call(context, url);
+ }
+ };
+
+ fabric.loadSVGFromURL = function(url, callback, reviver) {
+ url = url.replace(/^\n\s*/, '').replace(/\?.*$/, '').trim();
+ if (url.indexOf('http') !== 0) {
+ requestFs(url, function(body) {
+ fabric.loadSVGFromString(body.toString(), callback, reviver);
+ });
+ }
+ else {
+ request(url, '', function(body) {
+ fabric.loadSVGFromString(body, callback, reviver);
+ });
+ }
+ };
+
+ fabric.loadSVGFromString = function(string, callback, reviver) {
+ var doc = new DOMParser().parseFromString(string);
+ fabric.parseSVGDocument(doc.documentElement, function(results, options) {
+ callback && callback(results, options);
+ }, reviver);
+ };
+
+ fabric.util.getScript = function(url, callback) {
+ request(url, '', function(body) {
+ // eslint-disable-next-line no-eval
+ eval(body);
+ callback && callback();
+ });
+ };
+
+ // fabric.util.createCanvasElement = function(_, width, height) {
+ // return new Canvas(width, height);
+ // }
+
+ /**
+ * Only available when running fabric on node.js
+ * @param {Number} width Canvas width
+ * @param {Number} height Canvas height
+ * @param {Object} [options] Options to pass to FabricCanvas.
+ * @param {Object} [nodeCanvasOptions] Options to pass to NodeCanvas.
+ * @return {Object} wrapped canvas instance
+ */
+ fabric.createCanvasForNode = function(width, height, options, nodeCanvasOptions) {
+ nodeCanvasOptions = nodeCanvasOptions || options;
+
+ var canvasEl = fabric.document.createElement('canvas'),
+ nodeCanvas = new Canvas(width || 600, height || 600, nodeCanvasOptions),
+ nodeCacheCanvas = new Canvas(width || 600, height || 600, nodeCanvasOptions);
+
+ // jsdom doesn't create style on canvas element, so here be temp. workaround
+ canvasEl.style = { };
+
+ canvasEl.width = nodeCanvas.width;
+ canvasEl.height = nodeCanvas.height;
+ options = options || { };
+ options.nodeCanvas = nodeCanvas;
+ options.nodeCacheCanvas = nodeCacheCanvas;
+ var FabricCanvas = fabric.Canvas || fabric.StaticCanvas,
+ fabricCanvas = new FabricCanvas(canvasEl, options);
+ fabricCanvas.nodeCanvas = nodeCanvas;
+ fabricCanvas.nodeCacheCanvas = nodeCacheCanvas;
+ fabricCanvas.contextContainer = nodeCanvas.getContext('2d');
+ fabricCanvas.contextCache = nodeCacheCanvas.getContext('2d');
+ fabricCanvas.Font = Canvas.Font;
+ return fabricCanvas;
+ };
+
+ var originaInitStatic = fabric.StaticCanvas.prototype._initStatic;
+ fabric.StaticCanvas.prototype._initStatic = function(el, options) {
+ el = el || fabric.document.createElement('canvas');
+ this.nodeCanvas = new Canvas(el.width, el.height);
+ this.nodeCacheCanvas = new Canvas(el.width, el.height);
+ originaInitStatic.call(this, el, options);
+ this.contextContainer = this.nodeCanvas.getContext('2d');
+ this.contextCache = this.nodeCacheCanvas.getContext('2d');
+ this.Font = Canvas.Font;
+ }
+
+ /** @ignore */
+ fabric.StaticCanvas.prototype.createPNGStream = function() {
+ return this.nodeCanvas.createPNGStream();
+ };
+
+ fabric.StaticCanvas.prototype.createJPEGStream = function(opts) {
+ return this.nodeCanvas.createJPEGStream(opts);
+ };
+
+ fabric.StaticCanvas.prototype._initRetinaScaling = function() {
+ if (!this._isRetinaScaling()) {
+ return;
+ }
+
+ this.lowerCanvasEl.setAttribute('width', this.width * fabric.devicePixelRatio);
+ this.lowerCanvasEl.setAttribute('height', this.height * fabric.devicePixelRatio);
+ this.nodeCanvas.width = this.width * fabric.devicePixelRatio;
+ this.nodeCanvas.height = this.height * fabric.devicePixelRatio;
+ this.contextContainer.scale(fabric.devicePixelRatio, fabric.devicePixelRatio);
+ return this;
+ };
+ if (fabric.Canvas) {
+ fabric.Canvas.prototype._initRetinaScaling = fabric.StaticCanvas.prototype._initRetinaScaling;
+ }
+
+ var origSetBackstoreDimension = fabric.StaticCanvas.prototype._setBackstoreDimension;
+ fabric.StaticCanvas.prototype._setBackstoreDimension = function(prop, value) {
+ origSetBackstoreDimension.call(this, prop, value);
+ this.nodeCanvas[prop] = value;
+ return this;
+ };
+ if (fabric.Canvas) {
+ fabric.Canvas.prototype._setBackstoreDimension = fabric.StaticCanvas.prototype._setBackstoreDimension;
+ }
+
+})();
+
diff --git a/app/bower_components/fabric.js/dist/fabric.min.js b/app/bower_components/fabric.js/dist/fabric.min.js
new file mode 100644
index 0000000..ae1a1e8
--- /dev/null
+++ b/app/bower_components/fabric.js/dist/fabric.min.js
@@ -0,0 +1,8 @@
+var fabric=fabric||{version:"1.6.6"};"undefined"!=typeof exports&&(exports.fabric=fabric),"undefined"!=typeof document&&"undefined"!=typeof window?(fabric.document=document,fabric.window=window,window.fabric=fabric):(fabric.document=require("jsdom").jsdom(""),fabric.document.createWindow?fabric.window=fabric.document.createWindow():fabric.window=fabric.document.parentWindow),fabric.isTouchSupported="ontouchstart"in fabric.document.documentElement,fabric.isLikelyNode="undefined"!=typeof Buffer&&"undefined"==typeof window,fabric.SHARED_ATTRIBUTES=["display","transform","fill","fill-opacity","fill-rule","opacity","stroke","stroke-dasharray","stroke-linecap","stroke-linejoin","stroke-miterlimit","stroke-opacity","stroke-width","id"],fabric.DPI=96,fabric.reNum="(?:[-+]?(?:\\d+|\\d*\\.\\d+)(?:e[-+]?\\d+)?)",fabric.fontPaths={},fabric.charWidthsCache={},fabric.devicePixelRatio=fabric.window.devicePixelRatio||fabric.window.webkitDevicePixelRatio||fabric.window.mozDevicePixelRatio||1,function(){function t(t,e){if(this.__eventListeners[t]){var i=this.__eventListeners[t];e?i[i.indexOf(e)]=!1:fabric.util.array.fill(i,!1)}}function e(t,e){if(this.__eventListeners||(this.__eventListeners={}),1===arguments.length)for(var i in t)this.on(i,t[i]);else this.__eventListeners[t]||(this.__eventListeners[t]=[]),this.__eventListeners[t].push(e);return this}function i(e,i){if(this.__eventListeners){if(0===arguments.length)for(e in this.__eventListeners)t.call(this,e);else if(1===arguments.length&&"object"==typeof arguments[0])for(var r in e)t.call(this,r,e[r]);else t.call(this,e,i);return this}}function r(t,e){if(this.__eventListeners){var i=this.__eventListeners[t];if(i){for(var r=0,n=i.length;r-1},complexity:function(){return this.getObjects().reduce(function(t,e){return t+=e.complexity?e.complexity():0},0)}},function(t){var e=Math.sqrt,i=Math.atan2,r=Math.pow,n=Math.abs,s=Math.PI/180;fabric.util={removeFromArray:function(t,e){var i=t.indexOf(e);return i!==-1&&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,e,i){t.subtractEquals(e);var r=fabric.util.rotateVector(t,i);return new fabric.Point(r.x,r.y).addEquals(e)},rotateVector:function(t,e){var i=Math.sin(e),r=Math.cos(e),n=t.x*r-t.y*i,s=t.x*i+t.y*r;return{x:n,y:s}},transformPoint:function(t,e,i){return i?new fabric.Point(e[0]*t.x+e[2]*t.y,e[1]*t.x+e[3]*t.y):new fabric.Point(e[0]*t.x+e[2]*t.y+e[4],e[1]*t.x+e[3]*t.y+e[5])},makeBoundingBoxFromPoints:function(t){var e=[t[0].x,t[1].x,t[2].x,t[3].x],i=fabric.util.array.min(e),r=fabric.util.array.max(e),n=Math.abs(i-r),s=[t[0].y,t[1].y,t[2].y,t[3].y],o=fabric.util.array.min(s),a=fabric.util.array.max(s),h=Math.abs(o-a);return{left:i,top:o,width:n,height:h}},invertTransform:function(t){var e=1/(t[0]*t[3]-t[1]*t[2]),i=[e*t[3],-e*t[1],-e*t[2],e*t[0]],r=fabric.util.transformPoint({x:t[4],y:t[5]},i,!0);return i[4]=-r.x,i[5]=-r.y,i},toFixed:function(t,e){return parseFloat(Number(t).toFixed(e))},parseUnit:function(t,e){var i=/\D{0,2}$/.exec(t),r=parseFloat(t);switch(e||(e=fabric.Text.DEFAULT_SVG_FONT_SIZE),i[0]){case"mm":return r*fabric.DPI/25.4;case"cm":return r*fabric.DPI/2.54;case"in":return r*fabric.DPI;case"pt":return r*fabric.DPI/72;case"pc":return r*fabric.DPI/72*12;case"em":return r*e;default:return r}},falseFunction:function(){return!1},getKlass:function(t,e){return t=fabric.util.string.camelize(t.charAt(0).toUpperCase()+t.slice(1)),fabric.util.resolveNamespace(e)[t]},resolveNamespace:function(e){if(!e)return fabric;var i,r=e.split("."),n=r.length,s=t||fabric.window;for(i=0;ir;)r+=a[d++%f],r>l&&(r=l),t[g?"lineTo":"moveTo"](r,0),g=!g;t.restore()},createCanvasElement:function(t){return t||(t=fabric.document.createElement("canvas")),t.getContext||"undefined"==typeof G_vmlCanvasManager||G_vmlCanvasManager.initElement(t),t},createImage:function(){return fabric.isLikelyNode?new(require("canvas").Image):fabric.document.createElement("img")},createAccessors:function(t){var e,i,r,n,s,o=t.prototype;for(e=o.stateProperties.length;e--;)i=o.stateProperties[e],r=i.charAt(0).toUpperCase()+i.slice(1),n="set"+r,s="get"+r,o[s]||(o[s]=function(t){return new Function('return this.get("'+t+'")')}(i)),o[n]||(o[n]=function(t){return new Function("value",'return this.set("'+t+'", value)')}(i))},clipContext:function(t,e){e.save(),e.beginPath(),t.clipTo(e),e.clip()},multiplyTransformMatrices:function(t,e,i){return[t[0]*e[0]+t[2]*e[1],t[1]*e[0]+t[3]*e[1],t[0]*e[2]+t[2]*e[3],t[1]*e[2]+t[3]*e[3],i?0:t[0]*e[4]+t[2]*e[5]+t[4],i?0:t[1]*e[4]+t[3]*e[5]+t[5]]},qrDecompose:function(t){var n=i(t[1],t[0]),o=r(t[0],2)+r(t[1],2),a=e(o),h=(t[0]*t[3]-t[2]*t[1])/a,c=i(t[0]*t[2]+t[1]*t[3],o);return{angle:n/s,scaleX:a,scaleY:h,skewX:c/s,skewY:0,translateX:t[4],translateY:t[5]}},customTransformMatrix:function(t,e,i){var r=[1,0,n(Math.tan(i*s)),1],o=[n(t),0,0,n(e)];return fabric.util.multiplyTransformMatrices(o,r,!0)},resetObjectTransform:function(t){t.scaleX=1,t.scaleY=1,t.skewX=0,t.skewY=0,t.flipX=!1,t.flipY=!1,t.setAngle(0)},getFunctionBody:function(t){return(String(t).match(/function[^{]*\{([\s\S]*)\}/)||{})[1]},isTransparent:function(t,e,i,r){r>0&&(e>r?e-=r:e=0,i>r?i-=r:i=0);var n,s,o=!0,a=t.getImageData(e,i,2*r||1,2*r||1),h=a.data.length;for(n=3;n0?I-=2*f:1===c&&I<0&&(I+=2*f);for(var D=Math.ceil(Math.abs(I/f*2)),E=[],L=I/D,R=8/3*Math.sin(L/4)*Math.sin(L/4)/Math.sin(L/2),F=P+L,B=0;B=n?s-n:2*Math.PI-(n-s)}function r(t,e,i,r,n,s,h,c){var l=a.call(arguments);if(o[l])return o[l];var u,f,d,g,p,v,b,m,y=Math.sqrt,_=Math.min,x=Math.max,S=Math.abs,C=[],w=[[],[]];f=6*t-12*i+6*n,u=-3*t+9*i-9*n+3*h,d=3*i-3*t;for(var O=0;O<2;++O)if(O>0&&(f=6*e-12*r+6*s,u=-3*e+9*r-9*s+3*c,d=3*r-3*e),S(u)<1e-12){if(S(f)<1e-12)continue;g=-d/f,0=e})}function i(t,e){return n(t,e,function(t,e){return t>>0;if(0===i)return-1;var r=0;if(arguments.length>0&&(r=Number(arguments[1]),r!==r?r=0:0!==r&&r!==Number.POSITIVE_INFINITY&&r!==Number.NEGATIVE_INFINITY&&(r=(r>0||-1)*Math.floor(Math.abs(r)))),r>=i)return-1;for(var n=r>=0?r:Math.max(i-Math.abs(r),0);n>>0;i>>0;r>>0;i>>0;i>>0;n>>0,r=0;if(arguments.length>1)e=arguments[1];else for(;;){if(r in this){e=this[r++];break}if(++r>=i)throw new TypeError}for(;r-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],s&&(e.toString!==Object.prototype.toString&&(t.prototype.toString=e.toString),e.valueOf!==Object.prototype.valueOf&&(t.prototype.valueOf=e.valueOf))};fabric.util.createClass=i}(),function(){function t(t){var e,i,r=Array.prototype.slice.call(arguments,1),n=r.length;for(i=0;i-1?s(t,e.match(/opacity:\s*(\d?\.?\d*)/)[1]):t;for(var r in e)if("opacity"===r)s(t,e[r]);else{var n="float"===r||"cssFloat"===r?"undefined"==typeof i.styleFloat?"cssFloat":"styleFloat":r;i[n]=e[r]}return t}var e=fabric.document.createElement("div"),i="string"==typeof e.style.opacity,r="string"==typeof e.style.filter,n=/alpha\s*\(\s*opacity\s*=\s*([^\)]+)\)/,s=function(t){return t};i?s=function(t,e){return t.style.opacity=e,t}:r&&(s=function(t,e){var i=t.style;return t.currentStyle&&!t.currentStyle.hasLayout&&(i.zoom=1),n.test(i.filter)?(e=e>=.9999?"":"alpha(opacity="+100*e+")",i.filter=i.filter.replace(n,e)):i.filter+=" alpha(opacity="+100*e+")",t}),fabric.util.setStyle=t}(),function(){function t(t){return"string"==typeof t?fabric.document.getElementById(t):t}function e(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 i(t,e){t&&(" "+t.className+" ").indexOf(" "+e+" ")===-1&&(t.className+=(t.className?" ":"")+e)}function r(t,i,r){return"string"==typeof i&&(i=e(i,r)),t.parentNode&&t.parentNode.replaceChild(i,t),i.appendChild(t),i}function n(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,t===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"!==fabric.util.getElementStyle(t,"position")););return{left:e,top:i}}function s(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(c(t,h),10)||0;return e=r.documentElement,"undefined"!=typeof t.getBoundingClientRect&&(s=t.getBoundingClientRect()),i=n(t),{left:s.left+i.left-(e.clientLeft||0)+o.left,top:s.top+i.top-(e.clientTop||0)+o.top}}var o,a=Array.prototype.slice,h=function(t){return a.call(t,0)};try{o=h(fabric.document.childNodes)instanceof Array}catch(t){}o||(h=function(t){for(var e=new Array(t.length),i=t.length;i--;)e[i]=t[i];return e});var c;c=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},function(){function t(t){return"undefined"!=typeof t.onselectstart&&(t.onselectstart=fabric.util.falseFunction),r?t.style[r]="none":"string"==typeof t.unselectable&&(t.unselectable="on"),t}function e(t){return"undefined"!=typeof t.onselectstart&&(t.onselectstart=null),r?t.style[r]="":"string"==typeof t.unselectable&&(t.unselectable=""),t}var i=fabric.document.documentElement.style,r="userSelect"in i?"userSelect":"MozUserSelect"in i?"MozUserSelect":"WebkitUserSelect"in i?"WebkitUserSelect":"KhtmlUserSelect"in i?"KhtmlUserSelect":"";fabric.util.makeElementUnselectable=t,fabric.util.makeElementSelectable=e}(),function(){function t(t,e){var i=fabric.document.getElementsByTagName("head")[0],r=fabric.document.createElement("script"),n=!0;r.onload=r.onreadystatechange=function(t){if(n){if("string"==typeof this.readyState&&"loaded"!==this.readyState&&"complete"!==this.readyState)return;n=!1,e(t||fabric.window.event),r=r.onload=r.onreadystatechange=null}},r.src=t,i.appendChild(r)}fabric.util.getScript=t}(),fabric.util.getById=t,fabric.util.toArray=h,fabric.util.makeElement=e,fabric.util.addClass=i,fabric.util.wrapElement=r,fabric.util.getScrollLeftTop=n,fabric.util.getElementOffset=s,fabric.util.getElementStyle=c}(),function(){function t(t,e){return t+(/\?/.test(t)?"&":"?")+e}function e(){}function i(i,n){n||(n={});var s=n.method?n.method.toUpperCase():"GET",o=n.onComplete||function(){},a=r(),h=n.body||n.parameters;return a.onreadystatechange=function(){4===a.readyState&&(o(a),a.onreadystatechange=e)},"GET"===s&&(h=null,"string"==typeof n.parameters&&(i=t(i,n.parameters))),a.open(s,i,!0),"POST"!==s&&"PUT"!==s||a.setRequestHeader("Content-Type","application/x-www-form-urlencoded"),a.send(h),a}var r=function(){for(var t=[function(){return new ActiveXObject("Microsoft.XMLHTTP")},function(){return new ActiveXObject("Msxml2.XMLHTTP")},function(){return new ActiveXObject("Msxml2.XMLHTTP.3.0")},function(){return new XMLHttpRequest}],e=t.length;e--;)try{var i=t[e]();if(i)return t[e]}catch(t){}}();fabric.util.request=i}(),fabric.log=function(){},fabric.warn=function(){},"undefined"!=typeof console&&["log","warn"].forEach(function(t){"undefined"!=typeof console[t]&&"function"==typeof console[t].apply&&(fabric[t]=function(){return console[t].apply(console,arguments)})}),function(){function t(t){e(function(i){t||(t={});var r,n=i||+new Date,s=t.duration||500,o=n+s,a=t.onChange||function(){},h=t.abort||function(){return!1},c=t.easing||function(t,e,i,r){return-i*Math.cos(t/r*(Math.PI/2))+i+e},l="startValue"in t?t.startValue:0,u="endValue"in t?t.endValue:100,f=t.byValue||u-l;t.onStart&&t.onStart(),function i(u){r=u||+new Date;var d=r>o?s:r-n;return h()?void(t.onComplete&&t.onComplete()):(a(c(d,l,f,s)),r>o?void(t.onComplete&&t.onComplete()):void e(i))}(n)})}function e(){return i.apply(fabric.window,arguments)}var i=fabric.window.requestAnimationFrame||fabric.window.webkitRequestAnimationFrame||fabric.window.mozRequestAnimationFrame||fabric.window.oRequestAnimationFrame||fabric.window.msRequestAnimationFrame||function(t){fabric.window.setTimeout(t,1e3/60)};fabric.util.animate=t,fabric.util.requestAnimFrame=e}(),function(){function t(t,e,i,r){return ta?a:o),1===o&&1===a&&0===h&&0===c&&0===f&&0===d)return y;if((f||d)&&(_=" translate("+x(f)+" "+x(d)+") "),r=_+" matrix("+o+" 0 0 "+a+" "+h*o+" "+c*a+") ","svg"===t.nodeName){for(n=t.ownerDocument.createElement("g");t.firstChild;)n.appendChild(t.firstChild);t.appendChild(n)}else n=t,r=n.getAttribute("transform")+r;return n.setAttribute("transform",r),y}function g(t){var e=t.objects,i=t.options;return e=e.map(function(t){return v[m(t.type)].fromObject(t)}),{objects:e,options:i}}function p(t,e,i){e[i]&&e[i].toSVG&&t.push('\t\n','\t\t \n')}var v=t.fabric||(t.fabric={}),b=v.util.object.extend,m=v.util.string.capitalize,y=v.util.object.clone,_=v.util.toFixed,x=v.util.parseUnit,S=v.util.multiplyTransformMatrices,C=/^(path|circle|polygon|polyline|ellipse|rect|line|image|text)$/i,w=/^(symbol|image|marker|pattern|view|svg)$/i,O=/^(?:pattern|defs|symbol|metadata)$/i,T=/^(symbol|g|a|svg)$/i,k={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","stroke-dasharray":"strokeDashArray","stroke-linecap":"strokeLineCap","stroke-linejoin":"strokeLineJoin","stroke-miterlimit":"strokeMiterLimit","stroke-opacity":"strokeOpacity","stroke-width":"strokeWidth","text-decoration":"textDecoration","text-anchor":"originX"},j={stroke:"strokeOpacity",fill:"fillOpacity"};v.cssRules={},v.gradientDefs={},v.parseTransformAttribute=function(){function t(t,e){var i=e[0],r=3===e.length?e[1]:0,n=3===e.length?e[2]:0;t[0]=Math.cos(i),t[1]=Math.sin(i),t[2]=-Math.sin(i),t[3]=Math.cos(i),t[4]=r-(t[0]*r+t[2]*n),t[5]=n-(t[1]*r+t[3]*n)}function e(t,e){var i=e[0],r=2===e.length?e[1]:e[0];t[0]=i,t[3]=r}function i(t,e){t[2]=Math.tan(v.util.degreesToRadians(e[0]));
+}function r(t,e){t[1]=Math.tan(v.util.degreesToRadians(e[0]))}function n(t,e){t[4]=e[0],2===e.length&&(t[5]=e[1])}var s=[1,0,0,1,0,0],o=v.reNum,a="(?:\\s+,?\\s*|,\\s*)",h="(?:(skewX)\\s*\\(\\s*("+o+")\\s*\\))",c="(?:(skewY)\\s*\\(\\s*("+o+")\\s*\\))",l="(?:(rotate)\\s*\\(\\s*("+o+")(?:"+a+"("+o+")"+a+"("+o+"))?\\s*\\))",u="(?:(scale)\\s*\\(\\s*("+o+")(?:"+a+"("+o+"))?\\s*\\))",f="(?:(translate)\\s*\\(\\s*("+o+")(?:"+a+"("+o+"))?\\s*\\))",d="(?:(matrix)\\s*\\(\\s*("+o+")"+a+"("+o+")"+a+"("+o+")"+a+"("+o+")"+a+"("+o+")"+a+"("+o+")\\s*\\))",g="(?:"+d+"|"+f+"|"+u+"|"+l+"|"+h+"|"+c+")",p="(?:"+g+"(?:"+a+"*"+g+")*)",b="^\\s*(?:"+p+"?)\\s*$",m=new RegExp(b),y=new RegExp(g,"g");return function(o){var a=s.concat(),h=[];if(!o||o&&!m.test(o))return a;o.replace(y,function(o){var c=new RegExp(g).exec(o).filter(function(t){return!!t}),l=c[1],u=c.slice(2).map(parseFloat);switch(l){case"translate":n(a,u);break;case"rotate":u[0]=v.util.degreesToRadians(u[0]),t(a,u);break;case"scale":e(a,u);break;case"skewX":i(a,u);break;case"skewY":r(a,u);break;case"matrix":a=u}h.push(a.concat()),a=s.concat()});for(var c=h[0];h.length>1;)h.shift(),c=v.util.multiplyTransformMatrices(c,h[0]);return c}}();var M=new RegExp("^\\s*("+v.reNum+"+)\\s*,?\\s*("+v.reNum+"+)\\s*,?\\s*("+v.reNum+"+)\\s*,?\\s*("+v.reNum+"+)\\s*$");v.parseSVGDocument=function(){function t(t,e){for(;t&&(t=t.parentNode);)if(t.nodeName&&e.test(t.nodeName.replace("svg:",""))&&!t.getAttribute("instantiated_by_use"))return!0;return!1}return function(e,i,r){if(e){f(e);var n=new Date,s=v.Object.__uid++,o=d(e),a=v.util.toArray(e.getElementsByTagName("*"));if(o.svgUid=s,0===a.length&&v.isLikelyNode){a=e.selectNodes('//*[name(.)!="svg"]');for(var h=[],c=0,l=a.length;c/i,""))),n&&n.documentElement||e&&e(null),v.parseSVGDocument(n.documentElement,function(i,r){A.set(t,{objects:v.util.array.invoke(i,"toObject"),options:r}),e&&e(i,r)},i)}t=t.replace(/^\n\s*/,"").trim(),A.has(t,function(i){i?A.get(t,function(t){var i=g(t);e(i.objects,i.options)}):new v.util.request(t,{method:"get",onComplete:r})})},loadSVGFromString:function(t,e,i){t=t.trim();var r;if("undefined"!=typeof DOMParser){var n=new DOMParser;n&&n.parseFromString&&(r=n.parseFromString(t,"text/xml"))}else v.window.ActiveXObject&&(r=new ActiveXObject("Microsoft.XMLDOM"),r.async="false",r.loadXML(t.replace(//i,"")));v.parseSVGDocument(r.documentElement,function(t,i){e(t,i)},i)},createSVGFontFacesMarkup:function(t){for(var e,i,r,n,s,o,a,h="",c={},l=v.fontPaths,u=0,f=t.length;u',"","\n"].join("")),h},createSVGRefElementsMarkup:function(t){var e=[];return p(e,t,"backgroundColor"),p(e,t,"overlayColor"),e.join("")}})}("undefined"!=typeof exports?exports:this),fabric.ElementsParser=function(t,e,i,r){this.elements=t,this.callback=e,this.options=i,this.reviver=r,this.svgUid=i&&i.svgUid||0},fabric.ElementsParser.prototype.parse=function(){this.instances=new Array(this.elements.length),this.numElements=this.elements.length,this.createObjects()},fabric.ElementsParser.prototype.createObjects=function(){for(var t=0,e=this.elements.length;tt.x&&this.y>t.y},gte:function(t){return this.x>=t.x&&this.y>=t.y},lerp:function(t,i){return"undefined"==typeof i&&(i=.5),i=Math.max(Math.min(1,i),0),new e(this.x+(t.x-this.x)*i,this.y+(t.y-this.y)*i)},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 e(Math.min(this.x,t.x),Math.min(this.y,t.y))},max:function(t){return new e(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 e(this.x,this.y)}}))}("undefined"!=typeof exports?exports:this),function(t){"use strict";function e(t){this.status=t,this.points=[]}var i=t.fabric||(t.fabric={});return i.Intersection?void i.warn("fabric.Intersection is already defined"):(i.Intersection=e,i.Intersection.prototype={constructor:e,appendPoint:function(t){return this.points.push(t),this},appendPoints:function(t){return this.points=this.points.concat(t),this}},i.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 e("Intersection"),o.appendPoint(new i.Point(t.x+l*(r.x-t.x),t.y+l*(r.y-t.y)))):o=new e}else o=new e(0===a||0===h?"Coincident":"Parallel");return o},i.Intersection.intersectLinePolygon=function(t,i,r){for(var n,s,o,a=new e,h=r.length,c=0;c0&&(a.status="Intersection"),a},i.Intersection.intersectPolygonPolygon=function(t,i){for(var r=new e,n=t.length,s=0;s0&&(r.status="Intersection"),r},void(i.Intersection.intersectPolygonRectangle=function(t,r,n){var s=r.min(n),o=r.max(n),a=new i.Point(o.x,s.y),h=new i.Point(s.x,o.y),c=e.intersectLinePolygon(s,a,t),l=e.intersectLinePolygon(a,o,t),u=e.intersectLinePolygon(o,h,t),f=e.intersectLinePolygon(h,s,t),d=new e;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}))}("undefined"!=typeof exports?exports:this),function(t){"use strict";function e(t){t?this._tryParsingColor(t):this.setSource([0,0,0,1])}function i(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}var r=t.fabric||(t.fabric={});return r.Color?void r.warn("fabric.Color is already defined."):(r.Color=e,r.Color.prototype={_tryParsingColor:function(t){var i;t in e.colorNameMap&&(t=e.colorNameMap[t]),"transparent"===t&&(i=[255,255,255,0]),i||(i=e.sourceFromHex(t)),i||(i=e.sourceFromRgb(t)),i||(i=e.sourceFromHsl(t)),i||(i=[0,0,0,1]),i&&this.setSource(i)},_rgbToHsl:function(t,e,i){t/=255,e/=255,i/=255;var n,s,o,a=r.util.array.max([t,e,i]),h=r.util.array.min([t,e,i]);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=(e-i)/c+(e1?1:s,n){var o=n.split(/\s*;\s*/);""===o[o.length-1]&&o.pop();for(var a=o.length;a--;){var h=o[a].split(/\s*:\s*/),c=h[0].trim(),l=h[1].trim();"stop-color"===c?e=l:"stop-opacity"===c&&(r=l)}}return e||(e=t.getAttribute("stop-color")||"rgb(0,0,0)"),r||(r=t.getAttribute("stop-opacity")),e=new fabric.Color(e),i=e.getAlpha(),r=isNaN(parseFloat(r))?1:parseFloat(r),r*=i,{offset:s,color:e.toRgb(),opacity:r}}function e(t){return{x1:t.getAttribute("x1")||0,y1:t.getAttribute("y1")||0,x2:t.getAttribute("x2")||"100%",y2:t.getAttribute("y2")||0}}function i(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%"}}function r(t,e,i){var r,n=0,s=1,o="";for(var a in e)"Infinity"===e[a]?e[a]=1:"-Infinity"===e[a]&&(e[a]=0),r=parseFloat(e[a],10),s="string"==typeof e[a]&&/^\d+%$/.test(e[a])?.01:1,"x1"===a||"x2"===a||"r2"===a?(s*="objectBoundingBox"===i?t.width:1,n="objectBoundingBox"===i?t.left||0:0):"y1"!==a&&"y2"!==a||(s*="objectBoundingBox"===i?t.height:1,n="objectBoundingBox"===i?t.top||0:0),e[a]=r*s+n;if("ellipse"===t.type&&null!==e.r2&&"objectBoundingBox"===i&&t.rx!==t.ry){var h=t.ry/t.rx;o=" scale(1, "+h+")",e.y1&&(e.y1/=h),e.y2&&(e.y2/=h)}return o}fabric.Gradient=fabric.util.createClass({offsetX:0,offsetY:0,initialize:function(t){t||(t={});var e={};this.id=fabric.Object.__uid++,this.type=t.type||"linear",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(),t.gradientTransform&&(this.gradientTransform=t.gradientTransform),this.offsetX=t.offsetX||this.offsetX,this.offsetY=t.offsetY||this.offsetY},addColorStop:function(t){for(var e in t){var i=new fabric.Color(t[e]);this.colorStops.push({offset:e,color:i.toRgb(),opacity:i.getAlpha()})}return this},toObject:function(){return{type:this.type,coords:this.coords,colorStops:this.colorStops,offsetX:this.offsetX,offsetY:this.offsetY,gradientTransform:this.gradientTransform?this.gradientTransform.concat():this.gradientTransform}},toSVG:function(t){var e,i,r=fabric.util.object.clone(this.coords);if(this.colorStops.sort(function(t,e){return t.offset-e.offset}),!t.group||"path-group"!==t.group.type)for(var n in r)"x1"===n||"x2"===n||"r2"===n?r[n]+=this.offsetX-t.width/2:"y1"!==n&&"y2"!==n||(r[n]+=this.offsetY-t.height/2);i='id="SVGID_'+this.id+'" gradientUnits="userSpaceOnUse"',this.gradientTransform&&(i+=' gradientTransform="matrix('+this.gradientTransform.join(" ")+')" '),"linear"===this.type?e=["\n']:"radial"===this.type&&(e=["\n']);for(var s=0;s \n":"\n"),e.join("")},toLive:function(t,e){var i,r,n=fabric.util.object.clone(this.coords);if(this.type){if(e.group&&"path-group"===e.group.type)for(r in n)"x1"===r||"x2"===r?n[r]+=-this.offsetX+e.width/2:"y1"!==r&&"y2"!==r||(n[r]+=-this.offsetY+e.height/2);"linear"===this.type?i=t.createLinearGradient(n.x1,n.y1,n.x2,n.y2):"radial"===this.type&&(i=t.createRadialGradient(n.x1,n.y1,n.r1,n.x2,n.y2,n.r2));for(var s=0,o=this.colorStops.length;s\n\n\t\n\t\t \n \n'},toObject:function(){if(this.includeDefaultValues)return{color:this.color,blur:this.blur,offsetX:this.offsetX,offsetY:this.offsetY,affectStroke:this.affectStroke};var t={},i=e.Shadow.prototype;return["color","blur","offsetX","offsetY","affectStroke"].forEach(function(e){this[e]!==i[e]&&(t[e]=this[e])},this),t}}),void(e.Shadow.reOffsetsAndBlur=/(?:\s|^)(-?\d+(?:px)?(?:\s?|$))?(-?\d+(?:px)?(?:\s?|$))?(\d+(?:px)?)?(?:\s?|$)(?:$|\s)/))}("undefined"!=typeof exports?exports:this),function(){"use strict";if(fabric.StaticCanvas)return void fabric.warn("fabric.StaticCanvas is already defined.");var t=fabric.util.object.extend,e=fabric.util.getElementOffset,i=fabric.util.removeFromArray,r=fabric.util.toFixed,n=new Error("Could not initialize `canvas` element");fabric.StaticCanvas=fabric.util.createClass({initialize:function(t,e){e||(e={}),this._initStatic(t,e)},backgroundColor:"",backgroundImage:null,overlayColor:"",overlayImage:null,includeDefaultValues:!0,stateful:!0,renderOnAddRemove:!0,clipTo:null,controlsAboveOverlay:!1,allowTouchScrolling:!1,imageSmoothingEnabled:!0,viewportTransform:[1,0,0,1,0,0],backgroundVpt:!0,overlayVpt:!0,onBeforeScaleRotate:function(){},enableRetinaScaling:!0,_initStatic:function(t,e){var i=fabric.StaticCanvas.prototype.renderAll.bind(this);this._objects=[],this._createLowerCanvas(t),this._initOptions(e),this._setImageSmoothing(),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!==fabric.devicePixelRatio&&this.enableRetinaScaling},getRetinaScaling:function(){return this._isRetinaScaling()?fabric.devicePixelRatio:1},_initRetinaScaling:function(){this._isRetinaScaling()&&(this.lowerCanvasEl.setAttribute("width",this.width*fabric.devicePixelRatio),this.lowerCanvasEl.setAttribute("height",this.height*fabric.devicePixelRatio),this.contextContainer.scale(fabric.devicePixelRatio,fabric.devicePixelRatio))},calcOffset:function(){return this._offset=e(this.lowerCanvasEl),this},setOverlayImage:function(t,e,i){return this.__setBgOverlayImage("overlayImage",t,e,i)},setBackgroundImage:function(t,e,i){return this.__setBgOverlayImage("backgroundImage",t,e,i)},setOverlayColor:function(t,e){return this.__setBgOverlayColor("overlayColor",t,e)},setBackgroundColor:function(t,e){return this.__setBgOverlayColor("backgroundColor",t,e)},_setImageSmoothing:function(){var t=this.getContext();t.imageSmoothingEnabled=t.imageSmoothingEnabled||t.webkitImageSmoothingEnabled||t.mozImageSmoothingEnabled||t.msImageSmoothingEnabled||t.oImageSmoothingEnabled,t.imageSmoothingEnabled=this.imageSmoothingEnabled},__setBgOverlayImage:function(t,e,i,r){return"string"==typeof e?fabric.util.loadImage(e,function(e){e&&(this[t]=new fabric.Image(e,r)),i&&i(e)},this,r&&r.crossOrigin):(r&&e.setOptions(r),this[t]=e,i&&i(e)),this},__setBgOverlayColor:function(t,e,i){if(e&&e.source){var r=this;fabric.util.loadImage(e.source,function(n){r[t]=new fabric.Pattern({source:n,repeat:e.repeat,offsetX:e.offsetX,offsetY:e.offsetY}),i&&i()})}else this[t]=e,i&&i();return this},_createCanvasElement:function(t){var e=fabric.util.createCanvasElement(t);if(e.style||(e.style={}),!e)throw n;if("undefined"==typeof e.getContext)throw n;return e},_initOptions:function(t){for(var e in t)this[e]=t[e];this.width=this.width||parseInt(this.lowerCanvasEl.width,10)||0,this.height=this.height||parseInt(this.lowerCanvasEl.height,10)||0,this.lowerCanvasEl.style&&(this.lowerCanvasEl.width=this.width,this.lowerCanvasEl.height=this.height,this.lowerCanvasEl.style.width=this.width+"px",this.lowerCanvasEl.style.height=this.height+"px",this.viewportTransform=this.viewportTransform.slice())},_createLowerCanvas:function(t){this.lowerCanvasEl=fabric.util.getById(t)||this._createCanvasElement(t),fabric.util.addClass(this.lowerCanvasEl,"lower-canvas"),this.interactive&&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;e=e||{};for(var r in t)i=t[r],e.cssOnly||(this._setBackstoreDimension(r,t[r]),i+="px"),e.backstoreOnly||this._setCssDimension(r,i);return this._initRetinaScaling(),this._setImageSmoothing(),this.calcOffset(),e.cssOnly||this.renderAll(),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 Math.sqrt(this.viewportTransform[0]*this.viewportTransform[3])},setViewportTransform:function(t){var e,i=this._activeGroup;this.viewportTransform=t;for(var r=0,n=this._objects.length;r"),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","",fabric.createSVGFontFacesMarkup(this.getObjects()),fabric.createSVGRefElementsMarkup(this)," \n")},_setSVGObjects:function(t,e){for(var i,r=0,n=this.getObjects(),s=n.length;r\n"):this[e]&&"overlayColor"===e&&t.push('=0;--n){var s=t.intersectsWithObject(this._objects[n])||t.isContainedWithinObject(this._objects[n])||this._objects[n].isContainedWithinObject(t);if(s){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._activeGroup;if(t===h)for(a=h._objects,r=a.length;r--;)n=a[r],s=this._objects.indexOf(n),s!==this._objects.length-1&&(o=s+1,i(this._objects,n),this._objects.splice(o,0,n));else s=this._objects.indexOf(t),s!==this._objects.length-1&&(o=this._findNewUpperIndex(t,s,e),i(this._objects,t),this._objects.splice(o,0,t));return this.renderAll&&this.renderAll(),this},_findNewUpperIndex:function(t,e,i){var r;if(i){r=e;for(var n=e+1;n"}}),t(fabric.StaticCanvas.prototype,fabric.Observable),t(fabric.StaticCanvas.prototype,fabric.Collection),t(fabric.StaticCanvas.prototype,fabric.DataURLExporter),t(fabric.StaticCanvas,{EMPTY_JSON:'{"objects": [], "background": "white"}',supports:function(t){var e=fabric.util.createCanvasElement();if(!e||!e.getContext)return null;var i=e.getContext("2d");if(!i)return null;switch(t){case"getImageData":return"undefined"!=typeof i.getImageData;case"setLineDash":return"undefined"!=typeof i.setLineDash;case"toDataURL":return"undefined"!=typeof e.toDataURL;case"toDataURLWithQuality":try{return e.toDataURL("image/jpeg",0),!0}catch(t){}return!1;default:return null}}}),fabric.StaticCanvas.prototype.toJSON=fabric.StaticCanvas.prototype.toObject}(),fabric.BaseBrush=fabric.util.createClass({color:"rgb(0, 0, 0)",width:1,shadow:null,strokeLineCap:"round",strokeLineJoin:"round",strokeDashArray:null,setShadow:function(t){return this.shadow=new fabric.Shadow(t),this},_setBrushStyles:function(){var t=this.canvas.contextTop;t.strokeStyle=this.color,t.lineWidth=this.width,t.lineCap=this.strokeLineCap,t.lineJoin=this.strokeLineJoin,this.strokeDashArray&&fabric.StaticCanvas.supports("setLineDash")&&t.setLineDash(this.strokeDashArray)},_setShadow:function(){if(this.shadow){var t=this.canvas.contextTop;t.shadowColor=this.shadow.color,t.shadowBlur=this.shadow.blur,t.shadowOffsetX=this.shadow.offsetX,t.shadowOffsetY=this.shadow.offsetY}},_resetShadow:function(){var t=this.canvas.contextTop;t.shadowColor="",t.shadowBlur=t.shadowOffsetX=t.shadowOffsetY=0}}),function(){fabric.PencilBrush=fabric.util.createClass(fabric.BaseBrush,{initialize:function(t){this.canvas=t,this._points=[]},onMouseDown:function(t){this._prepareForDrawing(t),this._captureDrawingPath(t),this._render()},onMouseMove:function(t){this._captureDrawingPath(t),this.canvas.clearContext(this.canvas.contextTop),this._render()},onMouseUp:function(){this._finalizeAndAddPath()},_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){this._points.push(t)},_reset:function(){this._points.length=0,this._setBrushStyles(),this._setShadow()},_captureDrawingPath:function(t){var e=new fabric.Point(t.x,t.y);this._addPoint(e)},_render:function(){var t=this.canvas.contextTop,e=this.canvas.viewportTransform,i=this._points[0],r=this._points[1];t.save(),t.transform(e[0],e[1],e[2],e[3],e[4],e[5]),t.beginPath(),2===this._points.length&&i.x===r.x&&i.y===r.y&&(i.x-=.5,r.x+=.5),t.moveTo(i.x,i.y);for(var n=1,s=this._points.length;n0?1:-1,"y"===i&&(s=e.target.skewY,o="top",a="bottom",r="originY"),n[-1]=o,n[1]=a,e.target.flipX&&(c*=-1),e.target.flipY&&(c*=-1),0===s?(e.skewSign=-h*t*c,e[r]=n[-t]):(s=s>0?1:-1,e.skewSign=s,e[r]=n[s*h*c])},_skewObject:function(t,e,i){var r=this._currentTransform,n=r.target,s=!1,o=n.get("lockSkewingX"),a=n.get("lockSkewingY");if(o&&"x"===i||a&&"y"===i)return!1;var h,c,l=n.getCenterPoint(),u=n.toLocalPoint(new fabric.Point(t,e),"center","center")[i],f=n.toLocalPoint(new fabric.Point(r.lastX,r.lastY),"center","center")[i],d=n._getTransformedDimensions();return this._changeSkewTransformOrigin(u-f,r,i),h=n.toLocalPoint(new fabric.Point(t,e),r.originX,r.originY)[i],c=n.translateToOriginPoint(l,r.originX,r.originY),s=this._setObjectSkew(h,r,i,d),r.lastX=t,r.lastY=e,n.setPositionByOrigin(c,r.originX,r.originY),s},_setObjectSkew:function(t,e,i,r){var n,s,o,a,h,c,l,u,f,d=e.target,g=!1,p=e.skewSign;return"x"===i?(a="y",h="Y",c="X",u=0,f=d.skewY):(a="x",h="X",c="Y",u=d.skewX,f=0),o=d._getTransformedDimensions(u,f),l=2*Math.abs(t)-o[i],l<=2?n=0:(n=p*Math.atan(l/d["scale"+c]/(o[a]/d["scale"+h])),n=fabric.util.radiansToDegrees(n)),g=d["skew"+c]!==n,d.set("skew"+c,n),0!==d["skew"+h]&&(s=d._getTransformedDimensions(),n=r[a]/s[a]*d["scale"+h],d.set("scale"+h,n)),g},_scaleObject:function(t,e,i){var r=this._currentTransform,n=r.target,s=n.get("lockScalingX"),o=n.get("lockScalingY"),a=n.get("lockScalingFlip");if(s&&o)return!1;var h=n.translateToOriginPoint(n.getCenterPoint(),r.originX,r.originY),c=n.toLocalPoint(new fabric.Point(t,e),r.originX,r.originY),l=n._getTransformedDimensions(),u=!1;return this._setLocalMouse(c,r),u=this._setObjectScale(c,r,s,o,i,a,l),n.setPositionByOrigin(h,r.originX,r.originY),u},_setObjectScale:function(t,e,i,r,n,s,o){var a,h,c,l,u=e.target,f=!1,d=!1,g=!1;return c=t.x*u.scaleX/o.x,l=t.y*u.scaleY/o.y,a=u.scaleX!==c,h=u.scaleY!==l,s&&c<=0&&ci.padding?t.x<0?t.x+=i.padding:t.x-=i.padding:t.x=0,n(t.y)>i.padding?t.y<0?t.y+=i.padding:t.y-=i.padding:t.y=0},_rotateObject:function(t,e){var n=this._currentTransform;if(n.target.get("lockRotation"))return!1;var s=r(n.ey-n.top,n.ex-n.left),o=r(e-n.top,t-n.left),a=i(o-s+n.theta);return a<0&&(a=360+a),n.target.angle=a%360,!0},setCursor:function(t){this.upperCanvasEl.style.cursor=t},_resetObjectTransform:function(t){t.scaleX=1,t.scaleY=1,t.skewX=0,t.skewY=0,t.setAngle(0)},_drawSelection:function(t){var e=this._groupSelector,i=e.left,r=e.top,a=n(i),h=n(r);if(this.selectionColor&&(t.fillStyle=this.selectionColor,t.fillRect(e.ex-(i>0?0:-i),e.ey-(r>0?0:-r),a,h)),this.selectionLineWidth&&this.selectionBorderColor)if(t.lineWidth=this.selectionLineWidth,t.strokeStyle=this.selectionBorderColor,this.selectionDashArray.length>1&&!s){var c=e.ex+o-(i>0?0:a),l=e.ey+o-(r>0?0:h);t.beginPath(),fabric.util.drawDashedLine(t,c,l,c+a,l,this.selectionDashArray),fabric.util.drawDashedLine(t,c,l+h-1,c+a,l+h-1,this.selectionDashArray),fabric.util.drawDashedLine(t,c,l,c,l+h,this.selectionDashArray),fabric.util.drawDashedLine(t,c+a-1,l,c+a-1,l+h,this.selectionDashArray),t.closePath(),t.stroke()}else fabric.Object.prototype._setLineDash.call(this,t,this.selectionDashArray),t.strokeRect(e.ex+o-(i>0?0:a),e.ey+o-(r>0?0:h),a,h)},findTarget:function(t,e){if(!this.skipTargetFind){var i,r=!0,n=this.getPointer(t,r),s=this.getActiveGroup(),o=this.getActiveObject();if(s&&!e&&this._checkTarget(n,s))return this._fireOverOutEvents(s,t),s;if(o&&o._findTargetCorner(n))return this._fireOverOutEvents(o,t),o;if(o&&this._checkTarget(n,o)){if(!this.preserveObjectStacking)return this._fireOverOutEvents(o,t),o;i=o}this.targets=[];var a=this._searchPossibleTargets(this._objects,n);return t[this.altSelectionKey]&&a&&i&&a!==i&&(a=i),this._fireOverOutEvents(a,t),a}},_fireOverOutEvents:function(t,e){t?this._hoveredTarget!==t&&(this._hoveredTarget&&(this.fire("mouse:out",{target:this._hoveredTarget,e:e}),this._hoveredTarget.fire("mouseout")),this.fire("mouse:over",{target:t,e:e}),t.fire("mouseover"),this._hoveredTarget=t):this._hoveredTarget&&(this.fire("mouse:out",{target:this._hoveredTarget,e:e}),this._hoveredTarget.fire("mouseout"),this._hoveredTarget=null)},_checkTarget:function(t,e){if(e&&e.visible&&e.evented&&this.containsPoint(null,e,t)){if(!this.perPixelTargetFind&&!e.perPixelTargetFind||e.isEditing)return!0;var i=this.isTargetTransparent(e,t.x,t.y);if(!i)return!0}},_searchPossibleTargets:function(t,e){for(var i,r,n,s=t.length;s--;)if(this._checkTarget(e,t[s])){i=t[s],"group"===i.type&&i.subTargetCheck&&(r=this._normalizePointer(i,e),n=this._searchPossibleTargets(i._objects,r),n&&this.targets.push(n));break}return i},restorePointerVpt:function(t){return fabric.util.transformPoint(t,fabric.util.invertTransform(this.viewportTransform))},getPointer:function(e,i,r){r||(r=this.upperCanvasEl);var n,s=t(e),o=r.getBoundingClientRect(),a=o.width||0,h=o.height||0;return 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(),s.x=s.x-this._offset.left,s.y=s.y-this._offset.top,i||(s=this.restorePointerVpt(s)),n=0===a||0===h?{width:1,height:1}:{width:r.width/a,height:r.height/h},{x:s.x*n.width,y:s.y*n.height}},_createUpperCanvas:function(){var t=this.lowerCanvasEl.className.replace(/\s*lower-canvas\s*/,"");this.upperCanvasEl=this._createCanvasElement(),fabric.util.addClass(this.upperCanvasEl,"upper-canvas "+t),this.wrapperEl.appendChild(this.upperCanvasEl),this._copyCanvasStyle(this.lowerCanvasEl,this.upperCanvasEl),this._applyCanvasStyle(this.upperCanvasEl),this.contextTop=this.upperCanvasEl.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=fabric.util.wrapElement(this.lowerCanvasEl,"div",{class:this.containerClass}),fabric.util.setStyle(this.wrapperEl,{width:this.getWidth()+"px",height:this.getHeight()+"px",position:"relative"}),fabric.util.makeElementUnselectable(this.wrapperEl)},_applyCanvasStyle:function(t){var e=this.getWidth()||t.width,i=this.getHeight()||t.height;fabric.util.setStyle(t,{position:"absolute",width:e+"px",height:i+"px",left:0,top:0}),t.width=e,t.height=i,fabric.util.makeElementUnselectable(t)},_copyCanvasStyle:function(t,e){e.style.cssText=t.style.cssText},getSelectionContext:function(){return this.contextTop},getSelectionElement:function(){return this.upperCanvasEl},_setActiveObject:function(t){this._activeObject&&this._activeObject.set("active",!1),this._activeObject=t,t.set("active",!0)},setActiveObject:function(t,e){return this._setActiveObject(t),this.renderAll(),this.fire("object:selected",{target:t,e:e}),t.fire("selected",{e:e}),this},getActiveObject:function(){return this._activeObject},_onObjectRemoved:function(t){this.getActiveObject()===t&&(this.fire("before:selection:cleared",{target:t}),this._discardActiveObject(),this.fire("selection:cleared",{target:t}),t.fire("deselected")),this.callSuper("_onObjectRemoved",t)},_discardActiveObject:function(){this._activeObject&&this._activeObject.set("active",!1),this._activeObject=null},discardActiveObject:function(t){var e=this._activeObject;return this.fire("before:selection:cleared",{target:e,e:t}),this._discardActiveObject(),this.fire("selection:cleared",{e:t}),e&&e.fire("deselected",{e:t}),this},_setActiveGroup:function(t){this._activeGroup=t,t&&t.set("active",!0)},setActiveGroup:function(t,e){return this._setActiveGroup(t),t&&(this.fire("object:selected",{target:t,e:e}),t.fire("selected",{e:e})),this},getActiveGroup:function(){return this._activeGroup},_discardActiveGroup:function(){var t=this.getActiveGroup();t&&t.destroy(),this.setActiveGroup(null)},discardActiveGroup:function(t){var e=this.getActiveGroup();return this.fire("before:selection:cleared",{e:t,target:e}),this._discardActiveGroup(),this.fire("selection:cleared",{e:t}),this},deactivateAll:function(){for(var t=this.getObjects(),e=0,i=t.length;e1)){var r=this._groupSelector;r?(i=this.getPointer(t,!0),r.left=i.x-r.ex,r.top=i.y-r.ey,this.renderTop()):this._currentTransform?this._transformObject(t):(e=this.findTarget(t),this._setCursorFromEvent(t,e)),this._handleEvent(t,"move",e?e:null)}},__onMouseWheel:function(t){this.fire("mouse:wheel",{e:t})},_transformObject:function(t){var e=this.getPointer(t),i=this._currentTransform;i.reset=!1,i.target.isMoving=!0,this._beforeScaleTransform(t,i),this._performTransformAction(t,i,e),i.actionPerformed&&this.renderAll()},_performTransformAction:function(t,e,i){var r=i.x,n=i.y,s=e.target,o=e.action,a=!1;"rotate"===o?(a=this._rotateObject(r,n))&&this._fire("rotating",s,t):"scale"===o?(a=this._onScale(t,e,r,n))&&this._fire("scaling",s,t):"scaleX"===o?(a=this._scaleObject(r,n,"x"))&&this._fire("scaling",s,t):"scaleY"===o?(a=this._scaleObject(r,n,"y"))&&this._fire("scaling",s,t):"skewX"===o?(a=this._skewObject(r,n,"x"))&&this._fire("skewing",s,t):"skewY"===o?(a=this._skewObject(r,n,"y"))&&this._fire("skewing",s,t):(a=this._translateObject(r,n),a&&(this._fire("moving",s,t),this.setCursor(s.moveCursor||this.moveCursor))),e.actionPerformed=a},_fire:function(t,e,i){this.fire("object:"+t,{target:e,e:i}),e.fire(t,{e:i})},_beforeScaleTransform:function(t,e){if("scale"===e.action||"scaleX"===e.action||"scaleY"===e.action){var i=this._shouldCenterTransform(e.target);(i&&("center"!==e.originX||"center"!==e.originY)||!i&&"center"===e.originX&&"center"===e.originY)&&(this._resetCurrentTransform(),e.reset=!0)}},_onScale:function(t,e,i,r){return!t[this.uniScaleKey]&&!this.uniScaleTransform||e.target.get("lockUniScaling")?(e.reset||"scale"!==e.currentAction||this._resetCurrentTransform(),e.currentAction="scaleEqually",this._scaleObject(i,r,"equally")):(e.currentAction="scale",this._scaleObject(i,r))},_setCursorFromEvent:function(t,e){if(!e)return this.setCursor(this.defaultCursor),!1;var i=e.hoverCursor||this.hoverCursor;if(e.selectable){var r=this.getActiveGroup(),n=e._findTargetCorner&&(!r||!r.contains(e))&&e._findTargetCorner(this.getPointer(t,!0));n?this._setCornerCursor(n,e,t):this.setCursor(i)}else this.setCursor(i);return!0},_setCornerCursor:function(e,i,r){if(e in t)this.setCursor(this._getRotatedCornerCursor(e,i,r));else{if("mtr"!==e||!i.hasRotatingPoint)return this.setCursor(this.defaultCursor),!1;this.setCursor(this.rotationCursor)}},_getRotatedCornerCursor:function(e,i,r){var n=Math.round(i.getAngle()%360/45);return n<0&&(n+=8),n+=t[e],r[this.altActionKey]&&t[e]%2===0&&(n+=2),n%=8,this.cursorMap[n]}})}(),function(){var t=Math.min,e=Math.max;fabric.util.object.extend(fabric.Canvas.prototype,{_shouldGroup:function(t,e){var i=this.getActiveObject();return t[this.selectionKey]&&e&&e.selectable&&(this.getActiveGroup()||i&&i!==e)&&this.selection},_handleGrouping:function(t,e){var i=this.getActiveGroup();(e!==i||(e=this.findTarget(t,!0)))&&(i?this._updateActiveGroup(e,t):this._createActiveGroup(e,t),this._activeGroup&&this._activeGroup.saveCoords())},_updateActiveGroup:function(t,e){var i=this.getActiveGroup();if(i.contains(t)){if(i.removeWithUpdate(t),t.set("active",!1),1===i.size())return this.discardActiveGroup(e),void this.setActiveObject(i.item(0))}else i.addWithUpdate(t);this.fire("selection:created",{target:i,e:e}),i.set("active",!0)},_createActiveGroup:function(t,e){if(this._activeObject&&t!==this._activeObject){var i=this._createGroup(t);i.addWithUpdate(),this.setActiveGroup(i),this._activeObject=null,this.fire("selection:created",{target:i,e:e})}t.set("active",!0)},_createGroup:function(t){var e=this.getObjects(),i=e.indexOf(this._activeObject)1&&(e=new fabric.Group(e.reverse(),{canvas:this}),e.addWithUpdate(),this.setActiveGroup(e,t),e.saveCoords(),this.fire("selection:created",{target:e}),this.renderAll())},_collectObjects:function(){for(var i,r=[],n=this._groupSelector.ex,s=this._groupSelector.ey,o=n+this._groupSelector.left,a=s+this._groupSelector.top,h=new fabric.Point(t(n,o),t(s,a)),c=new fabric.Point(e(n,o),e(s,a)),l=n===o&&s===a,u=this._objects.length;u--&&(i=this._objects[u],!(i&&i.selectable&&i.visible&&(i.intersectsWithRect(h,c)||i.isContainedWithinRect(h,c)||i.containsPoint(h)||i.containsPoint(c))&&(i.set("active",!0),r.push(i),l))););return r},_maybeGroupObjects:function(t){this.selection&&this._groupSelector&&this._groupSelectedObjects(t);var e=this.getActiveGroup();e&&(e.setObjectsCoords().setCoords(),e.isMoving=!1,this.setCursor(this.defaultCursor)),this._groupSelector=null,this._currentTransform=null}})}(),function(){var t=fabric.StaticCanvas.supports("toDataURLWithQuality");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,n={left:t.left||0,top:t.top||0,width:t.width||0,height:t.height||0};return this.__toDataURLWithMultiplier(e,i,n,r)},__toDataURLWithMultiplier:function(t,e,i,r){var n=this.getWidth(),s=this.getHeight(),o=(i.width||this.getWidth())*r,a=(i.height||this.getHeight())*r,h=this.getZoom(),c=h*r,l=this.viewportTransform,u=(l[4]-i.left)*r,f=(l[5]-i.top)*r,d=[c,0,0,c,u,f],g=this.interactive;this.viewportTransform=d,this.interactive&&(this.interactive=!1),n!==o||s!==a?this.setDimensions({width:o,height:a}):this.renderAll();var p=this.__toDataURL(t,e,i);return g&&(this.interactive=g),this.viewportTransform=l,this.setDimensions({width:n,height:s}),p},__toDataURL:function(e,i){var r=this.contextContainer.canvas;"jpg"===e&&(e="jpeg");var n=t?r.toDataURL("image/"+e,i):r.toDataURL("image/"+e);return n},toDataURLWithMultiplier:function(t,e,i){return this.toDataURL({format:t,multiplier:e,quality:i})}})}(),fabric.util.object.extend(fabric.StaticCanvas.prototype,{loadFromDatalessJSON:function(t,e,i){return this.loadFromJSON(t,e,i)},loadFromJSON:function(t,e,i){if(t){var r="string"==typeof t?JSON.parse(t):fabric.util.object.clone(t);this.clear();var n=this;return this._enlivenObjects(r.objects,function(){n._setBgOverlay(r,function(){delete r.objects,delete r.backgroundImage,delete r.overlayImage,delete r.background,delete r.overlay;for(var t in r)n[t]=r[t];e&&e()})},i),this}},_setBgOverlay:function(t,e){var i=this,r={backgroundColor:!1,overlayColor:!1,backgroundImage:!1,overlayImage:!1};if(!(t.backgroundImage||t.overlayImage||t.background||t.overlay))return void(e&&e());var n=function(){r.backgroundImage&&r.overlayImage&&r.backgroundColor&&r.overlayColor&&(i.renderAll(),e&&e())};this.__setBgOverlay("backgroundImage",t.backgroundImage,r,n),this.__setBgOverlay("overlayImage",t.overlayImage,r,n),this.__setBgOverlay("backgroundColor",t.background,r,n),this.__setBgOverlay("overlayColor",t.overlay,r,n),n()},__setBgOverlay:function(t,e,i,r){var n=this;return e?void("backgroundImage"===t||"overlayImage"===t?fabric.Image.fromObject(e,function(e){n[t]=e,i[t]=!0,r&&r()}):this["set"+fabric.util.string.capitalize(t,!0)](e,function(){i[t]=!0,r&&r()})):void(i[t]=!0)},_enlivenObjects:function(t,e,i){var r=this;if(!t||0===t.length)return void(e&&e());var n=this.renderOnAddRemove;this.renderOnAddRemove=!1,fabric.util.enlivenObjects(t,function(t){t.forEach(function(t,e){r.insertAt(t,e)}),r.renderOnAddRemove=n,e&&e()},null,i)},_toDataURL:function(t,e){this.clone(function(i){e(i.toDataURL(t))})},_toDataURLWithMultiplier:function(t,e,i){this.clone(function(r){i(r.toDataURLWithMultiplier(t,e))})},clone:function(t,e){var i=JSON.stringify(this.toJSON(e));this.cloneWithoutData(function(e){e.loadFromJSON(i,function(){t&&t(e)})})},cloneWithoutData:function(t){var e=fabric.document.createElement("canvas");e.width=this.getWidth(),e.height=this.getHeight();var i=new fabric.Canvas(e);i.clipTo=this.clipTo,this.backgroundImage?(i.setBackgroundImage(this.backgroundImage.src,function(){i.renderAll(),t&&t(i)}),i.backgroundImageOpacity=this.backgroundImageOpacity,i.backgroundImageStretch=this.backgroundImageStretch):t&&t(i)}}),function(t){"use strict";var e=t.fabric||(t.fabric={}),i=e.util.object.extend,r=e.util.toFixed,n=e.util.string.capitalize,s=e.util.degreesToRadians,o=e.StaticCanvas.supports("setLineDash");e.Object||(e.Object=e.util.createClass({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,transparentCorners:!0,hoverCursor:null,moveCursor:null,padding:0,borderColor:"rgba(102,153,255,0.75)",borderDashArray:null,cornerColor:"rgba(102,153,255,0.5)",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,strokeLineCap:"butt",strokeLineJoin:"miter",strokeMiterLimit:10,shadow:null,borderOpacityWhenMoving:.4,borderScaleFactor:1,transformMatrix:null,minScaleLimit:.01,selectable:!0,evented:!0,visible:!0,hasControls:!0,hasBorders:!0,hasRotatingPoint:!0,rotatingPointOffset:40,perPixelTargetFind:!1,includeDefaultValues:!0,clipTo:null,lockMovementX:!1,lockMovementY:!1,lockRotation:!1,lockScalingX:!1,lockScalingY:!1,lockUniScaling:!1,lockSkewingX:!1,lockSkewingY:!1,lockScalingFlip:!1,excludeFromExport:!1,stateProperties:"top left width height scaleX scaleY flipX flipY originX originY transformMatrix stroke strokeWidth strokeDashArray strokeLineCap strokeLineJoin strokeMiterLimit angle opacity fill fillRule globalCompositeOperation shadow clipTo visible backgroundColor skewX skewY".split(" "),initialize:function(t){t&&this.setOptions(t)},_initGradient:function(t){!t.fill||!t.fill.colorStops||t.fill instanceof e.Gradient||this.set("fill",new e.Gradient(t.fill)),!t.stroke||!t.stroke.colorStops||t.stroke instanceof e.Gradient||this.set("stroke",new e.Gradient(t.stroke))},_initPattern:function(t){!t.fill||!t.fill.source||t.fill instanceof e.Pattern||this.set("fill",new e.Pattern(t.fill)),!t.stroke||!t.stroke.source||t.stroke instanceof e.Pattern||this.set("stroke",new e.Pattern(t.stroke))},_initClipping:function(t){if(t.clipTo&&"string"==typeof t.clipTo){var i=e.util.getFunctionBody(t.clipTo);"undefined"!=typeof i&&(this.clipTo=new Function("ctx",i))}},setOptions:function(t){for(var e in t)this.set(e,t[e]);this._initGradient(t),this._initPattern(t),this._initClipping(t)},transform:function(t,e){this.group&&!this.group._transformDone&&this.group===this.canvas._activeGroup&&this.group.transform(t);var i=e?this._getLeftTopCoords():this.getCenterPoint();t.translate(i.x,i.y),t.rotate(s(this.angle)),t.scale(this.scaleX*(this.flipX?-1:1),this.scaleY*(this.flipY?-1:1)),t.transform(1,0,Math.tan(s(this.skewX)),1,0,0),t.transform(1,Math.tan(s(this.skewY)),0,1,0,0)},toObject:function(t){var i=e.Object.NUM_FRACTION_DIGITS,n={type:this.type,originX:this.originX,originY:this.originY,left:r(this.left,i),top:r(this.top,i),width:r(this.width,i),height:r(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:r(this.strokeWidth,i),strokeDashArray:this.strokeDashArray?this.strokeDashArray.concat():this.strokeDashArray,strokeLineCap:this.strokeLineCap,strokeLineJoin:this.strokeLineJoin,strokeMiterLimit:r(this.strokeMiterLimit,i),scaleX:r(this.scaleX,i),scaleY:r(this.scaleY,i),angle:r(this.getAngle(),i),flipX:this.flipX,flipY:this.flipY,opacity:r(this.opacity,i),shadow:this.shadow&&this.shadow.toObject?this.shadow.toObject():this.shadow,visible:this.visible,clipTo:this.clipTo&&String(this.clipTo),backgroundColor:this.backgroundColor,fillRule:this.fillRule,globalCompositeOperation:this.globalCompositeOperation,transformMatrix:this.transformMatrix?this.transformMatrix.concat():this.transformMatrix,skewX:r(this.skewX,i),skewY:r(this.skewY,i)};return this.includeDefaultValues||(n=this._removeDefaultValues(n)),e.util.populateWithProperties(this,n,t),n},toDatalessObject:function(t){return this.toObject(t)},_removeDefaultValues:function(t){var i=e.util.getKlass(t.type).prototype,r=i.stateProperties;return r.forEach(function(e){t[e]===i[e]&&delete t[e];var r="[object Array]"===Object.prototype.toString.call(t[e])&&"[object Array]"===Object.prototype.toString.call(i[e]);r&&0===t[e].length&&0===i[e].length&&delete t[e]}),t},toString:function(){return"#"},get:function(t){return this[t]},getObjectScaling:function(){var t=this.scaleX,e=this.scaleY;if(this.group){var i=this.group.getObjectScaling();t*=i.scaleX,e*=i.scaleY}return{scaleX:t,scaleY: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):"function"==typeof e&&"clipTo"!==t?this._set(t,e(this.get(t))):this._set(t,e),this},_set:function(t,i){var r="scaleX"===t||"scaleY"===t;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||(i=new e.Shadow(i)),this[t]=i,"width"!==t&&"height"!==t||(this.minScaleLimit=Math.min(.1,1/Math.max(this.width,this.height))),this},setOnGroup:function(){},toggle:function(t){var e=this.get(t);return"boolean"==typeof e&&this.set(t,!e),this},setSourcePath:function(t){return this.sourcePath=t,this},getViewportTransform:function(){return this.canvas&&this.canvas.viewportTransform?this.canvas.viewportTransform:[1,0,0,1,0,0]},render:function(t,i){0===this.width&&0===this.height||!this.visible||(t.save(),this._setupCompositeOperation(t),this.drawSelectionBackground(t),i||this.transform(t),this._setOpacity(t),this._setShadow(t),this._renderBackground(t),this._setStrokeStyles(t),this._setFillStyles(t),this.transformMatrix&&t.transform.apply(t,this.transformMatrix),this.clipTo&&e.util.clipContext(this,t),this._render(t,i),this.clipTo&&t.restore(),t.restore())},_renderBackground:function(t){this.backgroundColor&&(t.fillStyle=this.backgroundColor,t.fillRect(-this.width/2,-this.height/2,this.width,this.height),this._removeShadow(t))},_setOpacity:function(t){this.group&&this.group._setOpacity(t),t.globalAlpha*=this.opacity},_setStrokeStyles:function(t){this.stroke&&(t.lineWidth=this.strokeWidth,t.lineCap=this.strokeLineCap,t.lineJoin=this.strokeLineJoin,t.miterLimit=this.strokeMiterLimit,t.strokeStyle=this.stroke.toLive?this.stroke.toLive(t,this):this.stroke)},_setFillStyles:function(t){this.fill&&(t.fillStyle=this.fill.toLive?this.fill.toLive(t,this):this.fill)},_setLineDash:function(t,e,i){e&&(1&e.length&&e.push.apply(e,e),o?t.setLineDash(e):i&&i(t))},_renderControls:function(t,i){if(!(!this.active||i||this.group&&this.group!==this.canvas.getActiveGroup())){var r,n=this.getViewportTransform(),o=this.calcTransformMatrix();o=e.util.multiplyTransformMatrices(n,o),r=e.util.qrDecompose(o),t.save(),t.translate(r.translateX,r.translateY),t.lineWidth=1*this.borderScaleFactor,t.globalAlpha=this.isMoving?this.borderOpacityWhenMoving:1,this.group&&this.group===this.canvas.getActiveGroup()?(t.rotate(s(r.angle)),this.drawBordersInGroup(t,r)):(t.rotate(s(this.angle)),this.drawBorders(t)),this.drawControls(t),t.restore()}},_setShadow:function(t){if(this.shadow){var i=this.canvas&&this.canvas.viewportTransform[0]||1,r=this.canvas&&this.canvas.viewportTransform[3]||1,n=this.getObjectScaling();this.canvas&&this.canvas._isRetinaScaling()&&(i*=e.devicePixelRatio,r*=e.devicePixelRatio),t.shadowColor=this.shadow.color,t.shadowBlur=this.shadow.blur*(i+r)*(n.scaleX+n.scaleY)/4,t.shadowOffsetX=this.shadow.offsetX*i*n.scaleX,t.shadowOffsetY=this.shadow.offsetY*r*n.scaleY}},_removeShadow:function(t){this.shadow&&(t.shadowColor="",t.shadowBlur=t.shadowOffsetX=t.shadowOffsetY=0)},_renderFill:function(t){if(this.fill){if(t.save(),this.fill.gradientTransform){var e=this.fill.gradientTransform;t.transform.apply(t,e)}this.fill.toLive&&t.translate(-this.width/2+this.fill.offsetX||0,-this.height/2+this.fill.offsetY||0),"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._setLineDash(t,this.strokeDashArray,this._renderDashedStroke),this.stroke.gradientTransform){var e=this.stroke.gradientTransform;t.transform.apply(t,e)}this.stroke.toLive&&t.translate(-this.width/2+this.stroke.offsetX||0,-this.height/2+this.stroke.offsetY||0),t.stroke(),t.restore()}},clone:function(t,i){return this.constructor.fromObject?this.constructor.fromObject(this.toObject(i),t):new e.Object(this.toObject(i))},cloneAsImage:function(t,i){var r=this.toDataURL(i);return e.util.loadImage(r,function(i){t&&t(new e.Image(i))}),this},toDataURL:function(t){t||(t={});var i=e.util.createCanvasElement(),r=this.getBoundingRect();i.width=r.width,i.height=r.height,e.util.wrapElement(i,"div");var n=new e.StaticCanvas(i,{enableRetinaScaling:t.enableRetinaScaling});"jpg"===t.format&&(t.format="jpeg"),"jpeg"===t.format&&(n.backgroundColor="#fff");var s={active:this.get("active"),left:this.getLeft(),top:this.getTop()};this.set("active",!1),this.setPositionByOrigin(new e.Point(n.getWidth()/2,n.getHeight()/2),"center","center");var o=this.canvas;n.add(this);var a=n.toDataURL(t);return this.set(s).setCoords(),this.canvas=o,n.dispose(),n=null,a},isType:function(t){return this.type===t},complexity:function(){return 0},toJSON:function(t){return this.toObject(t)},setGradient:function(t,i){i||(i={});var r={colorStops:[]};r.type=i.type||(i.r1||i.r2?"radial":"linear"),r.coords={x1:i.x1,y1:i.y1,x2:i.x2,y2:i.y2},(i.r1||i.r2)&&(r.coords.r1=i.r1,r.coords.r2=i.r2),i.gradientTransform&&(r.gradientTransform=i.gradientTransform);for(var n in i.colorStops){var s=new e.Color(i.colorStops[n]);r.colorStops.push({offset:n,color:s.toRgb(),opacity:s.getAlpha()})}return this.set(t,e.Gradient.forObject(this,r))},setPatternFill:function(t){return this.set("fill",new e.Pattern(t))},setShadow:function(t){return this.set("shadow",t?new e.Shadow(t):null)},setColor:function(t){return this.set("fill",t),this},setAngle: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},remove:function(){return this.canvas&&this.canvas.remove(this),this},getLocalPointer:function(t,i){i=i||this.canvas.getPointer(t);var r=new e.Point(i.x,i.y),n=this._getLeftTopCoords();return this.angle&&(r=e.util.rotatePoint(r,n,e.util.degreesToRadians(-this.angle))),{x:r.x-n.x,y:r.y-n.y}},_setupCompositeOperation:function(t){this.globalCompositeOperation&&(t.globalCompositeOperation=this.globalCompositeOperation)}}),e.util.createAccessors(e.Object),e.Object.prototype.rotate=e.Object.prototype.setAngle,i(e.Object.prototype,e.Observable),e.Object.NUM_FRACTION_DIGITS=2,e.Object.__uid=0)}("undefined"!=typeof exports?exports:this),function(){var t=fabric.util.degreesToRadians,e={left:-.5,center:0,right:.5},i={top:-.5,center:0,bottom:.5};fabric.util.object.extend(fabric.Object.prototype,{translateToGivenOrigin:function(t,r,n,s,o){var a,h,c,l=t.x,u=t.y;return"string"==typeof r?r=e[r]:r-=.5,"string"==typeof s?s=e[s]:s-=.5,a=s-r,"string"==typeof n?n=i[n]:n-=.5,"string"==typeof o?o=i[o]:o-=.5,h=o-n,(a||h)&&(c=this._getTransformedDimensions(),l=t.x+a*c.x,u=t.y+h*c.y),new fabric.Point(l,u)},translateToCenterPoint:function(e,i,r){var n=this.translateToGivenOrigin(e,i,r,"center","center");return this.angle?fabric.util.rotatePoint(n,e,t(this.angle)):n},translateToOriginPoint:function(e,i,r){var n=this.translateToGivenOrigin(e,"center","center",i,r);return this.angle?fabric.util.rotatePoint(n,e,t(this.angle)):n},getCenterPoint:function(){var t=new fabric.Point(this.left,this.top);return this.translateToCenterPoint(t,this.originX,this.originY)},getPointByOrigin:function(t,e){var i=this.getCenterPoint();return this.translateToOriginPoint(i,t,e)},toLocalPoint:function(e,i,r){var n,s,o=this.getCenterPoint();return n="undefined"!=typeof i&&"undefined"!=typeof r?this.translateToGivenOrigin(o,"center","center",i,r):new fabric.Point(this.left,this.top),s=new fabric.Point(e.x,e.y),this.angle&&(s=fabric.util.rotatePoint(s,o,-t(this.angle))),s.subtractEquals(n)},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(i){var r,n,s=t(this.angle),o=this.getWidth(),a=Math.cos(s)*o,h=Math.sin(s)*o;r="string"==typeof this.originX?e[this.originX]:this.originX-.5,n="string"==typeof i?e[i]:i-.5,this.left+=a*(n-r),this.top+=h*(n-r),this.setCoords(),this.originX=i},_setOriginToCenter:function(){this._originalOriginX=this.originX,this._originalOriginY=this.originY;var t=this.getCenterPoint();this.originX="center",this.originY="center",this.left=t.x,this.top=t.y},_resetOrigin:function(){var t=this.translateToOriginPoint(this.getCenterPoint(),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.getCenterPoint(),"left","top")}})}(),function(){function t(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)]}var e=fabric.util.degreesToRadians,i=fabric.util.multiplyTransformMatrices;fabric.util.object.extend(fabric.Object.prototype,{oCoords:null,intersectsWithRect:function(e,i){var r=t(this.oCoords),n=fabric.Intersection.intersectPolygonRectangle(r,e,i);return"Intersection"===n.status},intersectsWithObject:function(e){var i=fabric.Intersection.intersectPolygonPolygon(t(this.oCoords),t(e.oCoords));return"Intersection"===i.status||e.isContainedWithinObject(this)||this.isContainedWithinObject(e)},isContainedWithinObject:function(e){for(var i=t(this.oCoords),r=0;r<4;r++)if(!e.containsPoint(i[r]))return!1;return!0},isContainedWithinRect:function(t,e){var i=this.getBoundingRect();return i.left>=t.x&&i.left+i.width<=e.x&&i.top>=t.y&&i.top+i.height<=e.y},containsPoint:function(t){this.oCoords||this.setCoords();var e=this._getImageLines(this.oCoords),i=this._findCrossPoints(t,e);return 0!==i&&i%2===1},_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,o,a,h=0;for(var c in e)if(a=e[c],!(a.o.y=t.y&&a.d.y>=t.y||(a.o.x===a.d.x&&a.o.x>=t.x?o=a.o.x:(i=0,r=(a.d.y-a.o.y)/(a.d.x-a.o.x),n=t.y-i*t.x,s=a.o.y-r*a.o.x,o=-(n-s)/(i-r)),o>=t.x&&(h+=1),2!==h)))break;return h},getBoundingRectWidth:function(){return this.getBoundingRect().width},getBoundingRectHeight:function(){return this.getBoundingRect().height},getBoundingRect:function(){return this.oCoords||this.setCoords(),fabric.util.makeBoundingBoxFromPoints([this.oCoords.tl,this.oCoords.tr,this.oCoords.br,this.oCoords.bl])},getWidth:function(){return this._getTransformedDimensions().x},getHeight:function(){return this._getTransformedDimensions().y},_constrainScale:function(t){return Math.abs(t)0?Math.atan(s/n):0,c=n/Math.cos(h)/2,l=Math.cos(h+t)*c,u=Math.sin(h+t)*c,f=fabric.util.transformPoint(this.getCenterPoint(),i),d=new fabric.Point(f.x-l,f.y-u),g=new fabric.Point(d.x+n*a,d.y+n*o),p=new fabric.Point(d.x-s*o,d.y+s*a),v=new fabric.Point(f.x+l,f.y+u),b=new fabric.Point((d.x+p.x)/2,(d.y+p.y)/2),m=new fabric.Point((g.x+d.x)/2,(g.y+d.y)/2),y=new fabric.Point((v.x+g.x)/2,(v.y+g.y)/2),_=new fabric.Point((v.x+p.x)/2,(v.y+p.y)/2),x=new fabric.Point(m.x+o*this.rotatingPointOffset,m.y-a*this.rotatingPointOffset);return this.oCoords={tl:d,tr:g,br:v,bl:p,ml:b,mt:m,mr:y,mb:_,mtr:x},this._setCornerCoords&&this._setCornerCoords(),this},_calcRotateMatrix:function(){
+if(this.angle){var t=e(this.angle),i=Math.cos(t),r=Math.sin(t);return[i,r,-r,i,0,0]}return[1,0,0,1,0,0]},calcTransformMatrix:function(){var t=this.getCenterPoint(),e=[1,0,0,1,t.x,t.y],r=this._calcRotateMatrix(),n=this._calcDimensionsTransformMatrix(this.skewX,this.skewY,!0),s=this.group?this.group.calcTransformMatrix():[1,0,0,1,0,0];return s=i(s,e),s=i(s,r),s=i(s,n)},_calcDimensionsTransformMatrix:function(t,r,n){var s=[1,0,Math.tan(e(t)),1],o=[1,Math.tan(e(r)),0,1],a=this.scaleX*(n&&this.flipX?-1:1),h=this.scaleY*(n&&this.flipY?-1:1),c=[a,0,0,h],l=i(c,s,!0);return i(l,o,!0)}})}(),fabric.util.object.extend(fabric.Object.prototype,{sendToBack:function(){return this.group?fabric.StaticCanvas.prototype.sendToBack.call(this.group,this):this.canvas.sendToBack(this),this},bringToFront:function(){return this.group?fabric.StaticCanvas.prototype.bringToFront.call(this.group,this):this.canvas.bringToFront(this),this},sendBackwards:function(t){return this.group?fabric.StaticCanvas.prototype.sendBackwards.call(this.group,this,t):this.canvas.sendBackwards(this,t),this},bringForward:function(t){return this.group?fabric.StaticCanvas.prototype.bringForward.call(this.group,this,t):this.canvas.bringForward(this,t),this},moveTo:function(t){return this.group?fabric.StaticCanvas.prototype.moveTo.call(this.group,this,t):this.canvas.moveTo(this,t),this}}),function(){function t(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; "}fabric.util.object.extend(fabric.Object.prototype,{getSvgStyles:function(e){var i=this.fillRule,r=this.strokeWidth?this.strokeWidth:"0",n=this.strokeDashArray?this.strokeDashArray.join(" "):"none",s=this.strokeLineCap?this.strokeLineCap:"butt",o=this.strokeLineJoin?this.strokeLineJoin:"miter",a=this.strokeMiterLimit?this.strokeMiterLimit:"4",h="undefined"!=typeof this.opacity?this.opacity:"1",c=this.visible?"":" visibility: hidden;",l=e?"":this.getSvgFilter(),u=t("fill",this.fill),f=t("stroke",this.stroke);return[f,"stroke-width: ",r,"; ","stroke-dasharray: ",n,"; ","stroke-linecap: ",s,"; ","stroke-linejoin: ",o,"; ","stroke-miterlimit: ",a,"; ",u,"fill-rule: ",i,"; ","opacity: ",h,";",l,c].join("")},getSvgFilter:function(){return this.shadow?"filter: url(#SVGID_"+this.shadow.id+");":""},getSvgId:function(){return this.id?'id="'+this.id+'" ':""},getSvgTransform:function(){if(this.group&&"path-group"===this.group.type)return"";var t=fabric.util.toFixed,e=this.getAngle(),i=this.getSkewX()%360,r=this.getSkewY()%360,n=this.getCenterPoint(),s=fabric.Object.NUM_FRACTION_DIGITS,o="path-group"===this.type?"":"translate("+t(n.x,s)+" "+t(n.y,s)+")",a=0!==e?" rotate("+t(e,s)+")":"",h=1===this.scaleX&&1===this.scaleY?"":" scale("+t(this.scaleX,s)+" "+t(this.scaleY,s)+")",c=0!==i?" skewX("+t(i,s)+")":"",l=0!==r?" skewY("+t(r,s)+")":"",u="path-group"===this.type?this.width:0,f=this.flipX?" matrix(-1 0 0 1 "+u+" 0) ":"",d="path-group"===this.type?this.height:0,g=this.flipY?" matrix(1 0 0 -1 0 "+d+")":"";return[o,a,h,f,g,c,l].join("")},getSvgTransformMatrix:function(){return this.transformMatrix?" matrix("+this.transformMatrix.join(" ")+") ":""},_createBaseSVGMarkup:function(){var t=[];return this.fill&&this.fill.toLive&&t.push(this.fill.toSVG(this,!1)),this.stroke&&this.stroke.toLive&&t.push(this.stroke.toSVG(this,!1)),this.shadow&&t.push(this.shadow.toSVG(this)),t}})}(),function(){function t(t,e,r){var n={},s=!0;r.forEach(function(e){n[e]=t[e]}),i(t[e],n,s)}function e(t,i){if(!fabric.isLikelyNode&&t instanceof Element)return t===i;if(t instanceof Array){if(t.length!==i.length)return!1;var r=i.concat().sort(),n=t.concat().sort();return!n.some(function(t,i){return!e(r[i],t)})}if(t instanceof Object){for(var s in t)if(!e(t[s],i[s]))return!1;return!0}return t===i}var i=fabric.util.object.extend;fabric.util.object.extend(fabric.Object.prototype,{hasStateChanged:function(){return!e(this.originalState,this)},saveState:function(e){return t(this,"originalState",this.stateProperties),e&&e.stateProperties&&t(this,"originalState",e.stateProperties),this},setupState:function(t){return this.originalState={},this.saveState(t),this}})}(),function(){var t=fabric.util.degreesToRadians,e=function(){return"undefined"!=typeof G_vmlCanvasManager};fabric.util.object.extend(fabric.Object.prototype,{_controlsVisibility:null,_findTargetCorner:function(t){if(!this.hasControls||!this.active)return!1;var e,i,r=t.x,n=t.y;this.__corner=0;for(var s in this.oCoords)if(this.isControlVisible(s)&&("mtr"!==s||this.hasRotatingPoint)&&(!this.get("lockUniScaling")||"mt"!==s&&"mr"!==s&&"mb"!==s&&"ml"!==s)&&(i=this._getImageLines(this.oCoords[s].corner),e=this._findCrossPoints({x:r,y:n},i),0!==e&&e%2===1))return this.__corner=s,s;return!1},_setCornerCoords:function(){var e,i,r=this.oCoords,n=t(45-this.angle),s=.707106*this.cornerSize,o=s*Math.cos(n),a=s*Math.sin(n);for(var h in r)e=r[h].x,i=r[h].y,r[h].corner={tl:{x:e-a,y:i-o},tr:{x:e+o,y:i-a},bl:{x:e-o,y:i+a},br:{x:e+a,y:i+o}}},_getNonTransformedDimensions:function(){var t=this.strokeWidth,e=this.width,i=this.height,r=!0,n=!0;return"line"===this.type&&"butt"===this.strokeLineCap&&(n=e,r=i),n&&(i+=i<0?-t:t),r&&(e+=e<0?-t:t),{x:e,y:i}},_getTransformedDimensions:function(t,e){"undefined"==typeof t&&(t=this.skewX),"undefined"==typeof e&&(e=this.skewY);var i,r,n=this._getNonTransformedDimensions(),s=n.x/2,o=n.y/2,a=[{x:-s,y:-o},{x:s,y:-o},{x:-s,y:o},{x:s,y:o}],h=this._calcDimensionsTransformMatrix(t,e,!1);for(i=0;i"},toObject:function(t){var e=n(this.callSuper("toObject",t),{path:this.path.map(function(t){return t.slice()}),pathOffset:this.pathOffset});return this.sourcePath&&(e.sourcePath=this.sourcePath),this.transformMatrix&&(e.transformMatrix=this.transformMatrix),e},toDatalessObject:function(t){var e=this.toObject(t);return this.sourcePath&&(e.path=this.sourcePath),delete e.sourcePath,e},toSVG:function(t){for(var e=[],i=this._createBaseSVGMarkup(),r="",n=0,s=this.path.length;np)for(var b=1,m=n.length;b\n");for(var s=0,o=e.length;s\n"),t?t(n.join("")):n.join("")},toString:function(){return"#"},isSameColor:function(){var t=this.getObjects()[0].get("fill")||"";return"string"==typeof t&&(t=t.toLowerCase(),this.getObjects().every(function(e){var i=e.get("fill")||"";return"string"==typeof i&&i.toLowerCase()===t}))},complexity:function(){return this.paths.reduce(function(t,e){return t+(e&&e.complexity?e.complexity():0)},0)},getObjects:function(){return this.paths}}),e.PathGroup.fromObject=function(t,i){"string"==typeof t.paths?e.loadSVGFromURL(t.paths,function(r){var n=t.paths;delete t.paths;var s=e.util.groupSVGElements(r,t,n);i(s)}):e.util.enlivenObjects(t.paths,function(r){delete t.paths,i(new e.PathGroup(r,t))})},void(e.PathGroup.async=!0))}("undefined"!=typeof exports?exports:this),function(t){"use strict";var e=t.fabric||(t.fabric={}),i=e.util.object.extend,r=e.util.array.min,n=e.util.array.max,s=e.util.array.invoke;if(!e.Group){var o={lockMovementX:!0,lockMovementY:!0,lockRotation:!0,lockScalingX:!0,lockScalingY:!0,lockUniScaling:!0};e.Group=e.util.createClass(e.Object,e.Collection,{type:"group",strokeWidth:0,subTargetCheck:!1,initialize:function(t,e,i){e=e||{},this._objects=[],i&&this.callSuper("initialize",e),this._objects=t||[];for(var r=this._objects.length;r--;)this._objects[r].group=this;this.originalState={},e.originX&&(this.originX=e.originX),e.originY&&(this.originY=e.originY),i?this._updateObjectsCoords(!0):(this._calcBounds(),this._updateObjectsCoords(),this.callSuper("initialize",e)),this.setCoords(),this.saveCoords()},_updateObjectsCoords:function(t){for(var e=this._objects.length;e--;)this._updateObjectCoords(this._objects[e],t)},_updateObjectCoords:function(t,e){if(t.__origHasControls=t.hasControls,t.hasControls=!1,!e){var i=t.getLeft(),r=t.getTop(),n=this.getCenterPoint();t.set({originalLeft:i,originalTop:r,left:i-n.x,top:r-n.y}),t.setCoords()}},toString:function(){return"#"},addWithUpdate:function(t){return this._restoreObjectsState(),e.util.resetObjectTransform(this),t&&(this._objects.push(t),t.group=this,t._set("canvas",this.canvas)),this.forEachObject(this._setObjectActive,this),this._calcBounds(),this._updateObjectsCoords(),this},_setObjectActive:function(t){t.set("active",!0),t.group=this},removeWithUpdate:function(t){return this._restoreObjectsState(),e.util.resetObjectTransform(this),this.forEachObject(this._setObjectActive,this),this.remove(t),this._calcBounds(),this._updateObjectsCoords(),this},_onObjectAdded:function(t){t.group=this,t._set("canvas",this.canvas)},_onObjectRemoved:function(t){delete t.group,t.set("active",!1)},delegatedProperties:{fill:!0,stroke:!0,strokeWidth:!0,fontFamily:!0,fontWeight:!0,fontSize:!0,fontStyle:!0,lineHeight:!0,textDecoration:!0,textAlign:!0,backgroundColor:!0},_set:function(t,e){var i=this._objects.length;if(this.delegatedProperties[t]||"canvas"===t)for(;i--;)this._objects[i].set(t,e);else for(;i--;)this._objects[i].setOnGroup(t,e);this.callSuper("_set",t,e)},toObject:function(t){return i(this.callSuper("toObject",t),{objects:s(this._objects,"toObject",t)})},render:function(t){if(this.visible){t.save(),this.transformMatrix&&t.transform.apply(t,this.transformMatrix),this.transform(t),this._setShadow(t),this.clipTo&&e.util.clipContext(this,t),this._transformDone=!0;for(var i=0,r=this._objects.length;i\n');for(var i=0,r=this._objects.length;i\n"),t?t(e.join("")):e.join("")},get:function(t){if(t in o){if(this[t])return this[t];for(var e=0,i=this._objects.length;e\n',"