';
+ },
+
+ /**
+ * @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 additionalProperties = [
+ 'text',
+ 'fontSize',
+ 'fontWeight',
+ 'fontFamily',
+ 'fontStyle',
+ 'lineHeight',
+ 'textDecoration',
+ 'textAlign',
+ 'textBackgroundColor',
+ 'charSpacing'
+ ].concat(propertiesToInclude);
+ return this.callSuper('toObject', additionalProperties);
+ },
+
+ /* _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\t\n');
+ },
+
+ _setSVGBg: function(textBgRects) {
+ if (this.backgroundColor) {
+ textBgRects.push(
+ '\t\t\n');
+ }
+ },
+
+ /**
+ * Adobe Illustrator (at least CS5) is unable to render rgba()-based fill values
+ * we work around it by "moving" alpha channel into opacity attribute and setting fill's alpha to 1
+ *
+ * @private
+ * @param {*} value
+ * @return {String}
+ */
+ _getFillAttributes: function(value) {
+ var fillColor = (value && typeof value === 'string') ? new fabric.Color(value) : '';
+ if (!fillColor || !fillColor.getSource() || fillColor.getAlpha() === 1) {
+ return 'fill="' + value + '"';
+ }
+ return 'opacity="' + fillColor.getAlpha() + '" fill="' + fillColor.setAlpha(1).toRgb() + '"';
+ },
+ /* _TO_SVG_END_ */
+
+ /**
+ * Sets specified property to a specified value
+ * @param {String} key
+ * @param {*} value
+ * @return {fabric.Text} thisArg
+ * @chainable
+ */
+ _set: function(key, value) {
+ this.callSuper('_set', key, value);
+
+ if (key in this._dimensionAffectingProps) {
+ this._initDimensions();
+ this.setCoords();
+ }
+ },
+
+ /**
+ * Returns complexity of an instance
+ * @return {Number} complexity
+ */
+ complexity: function() {
+ return 1;
+ }
+ });
+
+ /* _FROM_SVG_START_ */
+ /**
+ * List of attribute names to account for when parsing SVG element (used by {@link fabric.Text.fromElement})
+ * @static
+ * @memberOf fabric.Text
+ * @see: http://www.w3.org/TR/SVG/text.html#TextElement
+ */
+ fabric.Text.ATTRIBUTE_NAMES = fabric.SHARED_ATTRIBUTES.concat(
+ 'x y dx dy font-family font-style font-weight font-size text-decoration text-anchor'.split(' '));
+
+ /**
+ * Default SVG font size
+ * @static
+ * @memberOf fabric.Text
+ */
+ fabric.Text.DEFAULT_SVG_FONT_SIZE = 16;
+
+ /**
+ * Returns fabric.Text instance from an SVG element (not yet implemented)
+ * @static
+ * @memberOf fabric.Text
+ * @param {SVGElement} element Element to parse
+ * @param {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
+ * @param {Boolean} noTransform
+ */
+ render: function(ctx, noTransform) {
+ this.clearContextTop();
+ this.callSuper('render', ctx, noTransform);
+ },
+
+ /**
+ * @private
+ * @param {CanvasRenderingContext2D} ctx Context to render on
+ */
+ _render: function(ctx) {
+ 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();
+ },
+
+ /**
+ * Prepare and clean the contextTop
+ */
+ clearContextTop: function() {
+ if (!this.active || !this.isEditing) {
+ return;
+ }
+ if (this.canvas && this.canvas.contextTop) {
+ var 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);
+ ctx.restore();
+ }
+ },
+
+ /**
+ * 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 && 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.width + 4, height = this.height + 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),
+ 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) {
+ return fabric.util.object.extend(this.callSuper('toObject', propertiesToInclude), {
+ styles: clone(this.styles, true)
+ });
+ }
+ });
+
+ /**
+ * 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\n'
+ ].join('');
+ },
+
+ /**
+ * @private
+ */
+ _createTextCharSpan: function(_char, styleDecl, lineLeftOffset, lineTopOffset, charOffset) {
+
+ var fillStyles = this.getSvgStyles.call(fabric.util.object.extend({
+ visible: true,
+ fill: this.fill,
+ stroke: this.stroke,
+ type: 'text',
+ getSvgFilter: fabric.Object.prototype.getSvgFilter
+ }, styleDecl));
+
+ return [
+ '\t\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 this.callSuper('toObject', ['minWidth'].concat(propertiesToInclude));
+ }
+ });
+ /**
+ * 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/www/examples/canvas/main.js b/www/examples/canvas/main.js
index 114424c18..55c7f4c68 100644
--- a/www/examples/canvas/main.js
+++ b/www/examples/canvas/main.js
@@ -10,7 +10,7 @@ define([
'json.sortify',
'/bower_components/chainpad-json-validator/json-ot.js',
'/common/cryptpad-common.js',
- '/bower_components/fabric.js/dist/fabric.min.js',
+ 'fabric.js',
'/bower_components/jquery/dist/jquery.min.js',
'/bower_components/file-saver/FileSaver.min.js',
//'/customize/pad.js'
@@ -76,34 +76,47 @@ define([
var config = module.config = {
initialState: '{}',
- // TODO initialState ?
- websocketURL: Config.websocketURL,
- //userName: Crypto.rand64(8),
+ websocketURL: Cryptpad.getWebsocketURL(),
+ validateKey: secret.keys.validateKey,
+ readOnly: false, // TODO
channel: secret.channel,
- //cryptKey: key,
- crypto: Crypto.createEncryptor(secret.key),
+ crypto: Crypto.createEncryptor(secret.keys),
transformFunction: JsonOT.validate,
};
+ var editHash;
var onInit = config.onInit = function (info) {
- window.location.hash = info.channel + secret.key;
- $(window).on('hashchange', function() {
- window.location.reload();
- });
+ editHash = Cryptpad.getEditHashFromKeys(info.channel, secret.keys);
+
+ Cryptpad.replaceHash(editHash);
+
+ //window.location.hash = info.channel + secret.key;
+ //$(window).on('hashchange', function() { window.location.reload(); });
+ };
+
+ var Catch = function (f) {
+ return function () {
+ try {
+ f();
+ } catch (e) {
+ console.error(e);
+ }
+ };
};
- var onRemote = config.onRemote = function () {
+ var onRemote = config.onRemote = Catch(function () {
if (initializing) { return; }
var userDoc = module.realtime.getUserDoc();
+
canvas.loadFromJSON(userDoc);
canvas.renderAll();
- };
+ });
- var onLocal = config.onLocal = function () {
+ var onLocal = config.onLocal = Catch(function () {
if (initializing) { return; }
var content = JSONSortify(canvas.toDatalessJSON());
module.patchText(content);
- };
+ });
var onReady = config.onReady = function (info) {
var realtime = module.realtime = info.realtime;