';
- },
-
- /**
- * @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;
- }
-
-})();
-