';
+ },
+
+ /**
+ * @private
+ * @param {CanvasRenderingContext2D} ctx Context to render on
+ */
+ _render: function(ctx) {
+
+ var isInPathGroup = this.group && this.group.type === 'path-group';
+ if (isInPathGroup && !this.transformMatrix) {
+ ctx.translate(-this.group.width/2 + this.left, -this.group.height / 2 + this.top);
+ }
+ else if (isInPathGroup && this.transformMatrix) {
+ ctx.translate(-this.group.width/2, -this.group.height/2);
+ }
+
+ if (typeof Cufon === 'undefined' || this.useNative === true) {
+ this._renderViaNative(ctx);
+ }
+ else {
+ this._renderViaCufon(ctx);
+ }
+ },
+
+ /**
+ * @private
+ * @param {CanvasRenderingContext2D} ctx Context to render on
+ */
+ _renderViaNative: function(ctx) {
+ var textLines = this.text.split(this._reNewline);
+
+ this.transform(ctx, fabric.isLikelyNode);
+
+ this._setTextStyles(ctx);
+
+ this.width = this._getTextWidth(ctx, textLines);
+ this.height = this._getTextHeight(ctx, textLines);
+
+ this.clipTo && fabric.util.clipContext(this, ctx);
+
+ this._renderTextBackground(ctx, textLines);
+ this._translateForTextAlign(ctx);
+ this._renderText(ctx, textLines);
+
+ if (this.textAlign !== 'left' && this.textAlign !== 'justify') {
+ ctx.restore();
+ }
+
+ this._renderTextDecoration(ctx, textLines);
+ this.clipTo && ctx.restore();
+
+ this._setBoundaries(ctx, textLines);
+ this._totalLineHeight = 0;
+ },
+
+ /**
+ * @private
+ * @param {CanvasRenderingContext2D} ctx Context to render on
+ */
+ _renderText: function(ctx, textLines) {
+ ctx.save();
+ this._setShadow(ctx);
+ this._renderTextFill(ctx, textLines);
+ this._renderTextStroke(ctx, textLines);
+ this._removeShadow(ctx);
+ ctx.restore();
+ },
+
+ /**
+ * @private
+ * @param {CanvasRenderingContext2D} ctx Context to render on
+ */
+ _translateForTextAlign: function(ctx) {
+ if (this.textAlign !== 'left' && this.textAlign !== 'justify') {
+ ctx.save();
+ ctx.translate(this.textAlign === 'center' ? (this.width / 2) : this.width, 0);
+ }
+ },
+
+ /**
+ * @private
+ * @param {CanvasRenderingContext2D} ctx Context to render on
+ * @param {Array} textLines Array of all text lines
+ */
+ _setBoundaries: function(ctx, textLines) {
+ this._boundaries = [ ];
+
+ for (var i = 0, len = textLines.length; i < len; i++) {
+
+ var lineWidth = this._getLineWidth(ctx, textLines[i]),
+ lineLeftOffset = this._getLineLeftOffset(lineWidth);
+
+ this._boundaries.push({
+ height: this.fontSize * this.lineHeight,
+ width: lineWidth,
+ left: lineLeftOffset
+ });
+ }
+ },
+
+ /**
+ * @private
+ * @param {CanvasRenderingContext2D} ctx Context to render on
+ */
+ _setTextStyles: function(ctx) {
+ this._setFillStyles(ctx);
+ this._setStrokeStyles(ctx);
+ ctx.textBaseline = 'alphabetic';
+ if (!this.skipTextAlign) {
+ ctx.textAlign = this.textAlign;
+ }
+ ctx.font = this._getFontDeclaration();
+ },
+
+ /**
+ * @private
+ * @param {CanvasRenderingContext2D} ctx Context to render on
+ * @param {Array} textLines Array of all text lines
+ * @return {Number} Height of fabric.Text object
+ */
+ _getTextHeight: function(ctx, textLines) {
+ return this.fontSize * textLines.length * this.lineHeight;
+ },
+
+ /**
+ * @private
+ * @param {CanvasRenderingContext2D} ctx Context to render on
+ * @param {Array} textLines Array of all text lines
+ * @return {Number} Maximum width of fabric.Text object
+ */
+ _getTextWidth: function(ctx, textLines) {
+ var maxWidth = ctx.measureText(textLines[0] || '|').width;
+
+ for (var i = 1, len = textLines.length; i < len; i++) {
+ var currentLineWidth = ctx.measureText(textLines[i]).width;
+ if (currentLineWidth > maxWidth) {
+ maxWidth = currentLineWidth;
+ }
+ }
+ return maxWidth;
+ },
+
+ /**
+ * @private
+ * @param {String} method Method name ("fillText" or "strokeText")
+ * @param {CanvasRenderingContext2D} ctx Context to render on
+ * @param {String} line Chars to render
+ * @param {Number} left Left position of text
+ * @param {Number} top Top position of text
+ */
+ _renderChars: function(method, ctx, chars, left, top) {
+ ctx[method](chars, left, top);
+ },
+
+ /**
+ * @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 / 4;
+
+ // short-circuit
+ if (this.textAlign !== 'justify') {
+ this._renderChars(method, ctx, line, left, top, lineIndex);
+ return;
+ }
+
+ var lineWidth = ctx.measureText(line).width,
+ totalWidth = this.width;
+
+ if (totalWidth > lineWidth) {
+ // stretch the line
+ var words = line.split(/\s+/),
+ wordsWidth = ctx.measureText(line.replace(/\s+/g, '')).width,
+ widthDiff = totalWidth - wordsWidth,
+ numSpaces = words.length - 1,
+ spaceWidth = widthDiff / numSpaces,
+ leftOffset = 0;
+
+ for (var i = 0, len = words.length; i < len; i++) {
+ this._renderChars(method, ctx, words[i], left + leftOffset, top, lineIndex);
+ leftOffset += ctx.measureText(words[i]).width + spaceWidth;
+ }
+ }
+ else {
+ this._renderChars(method, ctx, line, left, top, lineIndex);
+ }
+ },
+
+ /**
+ * @private
+ * @return {Number} Left offset
+ */
+ _getLeftOffset: function() {
+ if (fabric.isLikelyNode) {
+ return 0;
+ }
+ return -this.width / 2;
+ },
+
+ /**
+ * @private
+ * @return {Number} Top offset
+ */
+ _getTopOffset: function() {
+ return -this.height / 2;
+ },
+
+ /**
+ * @private
+ * @param {CanvasRenderingContext2D} ctx Context to render on
+ * @param {Array} textLines Array of all text lines
+ */
+ _renderTextFill: function(ctx, textLines) {
+ if (!this.fill && !this._skipFillStrokeCheck) return;
+
+ this._boundaries = [ ];
+ var lineHeights = 0;
+
+ for (var i = 0, len = textLines.length; i < len; i++) {
+ var heightOfLine = this._getHeightOfLine(ctx, i, textLines);
+ lineHeights += heightOfLine;
+
+ this._renderTextLine(
+ 'fillText',
+ ctx,
+ textLines[i],
+ this._getLeftOffset(),
+ this._getTopOffset() + lineHeights,
+ i
+ );
+ }
+ },
+
+ /**
+ * @private
+ * @param {CanvasRenderingContext2D} ctx Context to render on
+ * @param {Array} textLines Array of all text lines
+ */
+ _renderTextStroke: function(ctx, textLines) {
+ if (!this.stroke && !this._skipFillStrokeCheck) return;
+
+ var lineHeights = 0;
+
+ ctx.save();
+ if (this.strokeDashArray) {
+ // Spec requires the concatenation of two copies the dash list when the number of elements is odd
+ if (1 & this.strokeDashArray.length) {
+ this.strokeDashArray.push.apply(this.strokeDashArray, this.strokeDashArray);
+ }
+ supportsLineDash && ctx.setLineDash(this.strokeDashArray);
+ }
+
+ ctx.beginPath();
+ for (var i = 0, len = textLines.length; i < len; i++) {
+ var heightOfLine = this._getHeightOfLine(ctx, i, textLines);
+ lineHeights += heightOfLine;
+
+ this._renderTextLine(
+ 'strokeText',
+ ctx,
+ textLines[i],
+ this._getLeftOffset(),
+ this._getTopOffset() + lineHeights,
+ i
+ );
+ }
+ ctx.closePath();
+ ctx.restore();
+ },
+
+ _getHeightOfLine: function() {
+ return this.fontSize * this.lineHeight;
+ },
+
+ /**
+ * @private
+ * @param {CanvasRenderingContext2D} ctx Context to render on
+ * @param {Array} textLines Array of all text lines
+ */
+ _renderTextBackground: function(ctx, textLines) {
+ this._renderTextBoxBackground(ctx);
+ this._renderTextLinesBackground(ctx, textLines);
+ },
+
+ /**
+ * @private
+ * @param {CanvasRenderingContext2D} ctx Context to render on
+ */
+ _renderTextBoxBackground: function(ctx) {
+ if (!this.backgroundColor) return;
+
+ ctx.save();
+ ctx.fillStyle = this.backgroundColor;
+
+ ctx.fillRect(
+ this._getLeftOffset(),
+ this._getTopOffset(),
+ this.width,
+ this.height
+ );
+
+ ctx.restore();
+ },
+
+ /**
+ * @private
+ * @param {CanvasRenderingContext2D} ctx Context to render on
+ * @param {Array} textLines Array of all text lines
+ */
+ _renderTextLinesBackground: function(ctx, textLines) {
+ if (!this.textBackgroundColor) return;
+
+ ctx.save();
+ ctx.fillStyle = this.textBackgroundColor;
+
+ for (var i = 0, len = textLines.length; i < len; i++) {
+
+ if (textLines[i] !== '') {
+
+ var lineWidth = this._getLineWidth(ctx, textLines[i]),
+ lineLeftOffset = this._getLineLeftOffset(lineWidth);
+
+ ctx.fillRect(
+ this._getLeftOffset() + lineLeftOffset,
+ this._getTopOffset() + (i * this.fontSize * this.lineHeight),
+ lineWidth,
+ this.fontSize * this.lineHeight
+ );
+ }
+ }
+ ctx.restore();
+ },
+
+ /**
+ * @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
+ * @param {CanvasRenderingContext2D} ctx Context to render on
+ * @param {String} line Text line
+ * @return {Number} Line width
+ */
+ _getLineWidth: function(ctx, line) {
+ return this.textAlign === 'justify'
+ ? this.width
+ : ctx.measureText(line).width;
+ },
+
+ /**
+ * @private
+ * @param {CanvasRenderingContext2D} ctx Context to render on
+ * @param {Array} textLines Array of all text lines
+ */
+ _renderTextDecoration: function(ctx, textLines) {
+ if (!this.textDecoration) return;
+
+ // var halfOfVerticalBox = this.originY === 'top' ? 0 : this._getTextHeight(ctx, textLines) / 2;
+ var halfOfVerticalBox = this._getTextHeight(ctx, textLines) / 2,
+ _this = this;
+
+ /** @ignore */
+ function renderLinesAtOffset(offset) {
+ for (var i = 0, len = textLines.length; i < len; i++) {
+
+ var lineWidth = _this._getLineWidth(ctx, textLines[i]),
+ lineLeftOffset = _this._getLineLeftOffset(lineWidth);
+
+ ctx.fillRect(
+ _this._getLeftOffset() + lineLeftOffset,
+ ~~((offset + (i * _this._getHeightOfLine(ctx, i, textLines))) - halfOfVerticalBox),
+ lineWidth,
+ 1);
+ }
+ }
+
+ if (this.textDecoration.indexOf('underline') > -1) {
+ renderLinesAtOffset(this.fontSize * this.lineHeight);
+ }
+ if (this.textDecoration.indexOf('line-through') > -1) {
+ renderLinesAtOffset(this.fontSize * this.lineHeight - this.fontSize / 2);
+ }
+ if (this.textDecoration.indexOf('overline') > -1) {
+ renderLinesAtOffset(this.fontSize * this.lineHeight - this.fontSize);
+ }
+ },
+
+ /**
+ * @private
+ */
+ _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] When true, context is not transformed
+ */
+ render: function(ctx, noTransform) {
+ // do not render if object is not visible
+ if (!this.visible) return;
+
+ ctx.save();
+ var m = this.transformMatrix;
+ if (m && (!this.group || this.group.type === 'path-group')) {
+ ctx.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
+ }
+ this._render(ctx);
+ if (!noTransform && this.active) {
+ this.drawBorders(ctx);
+ this.drawControls(ctx);
+ }
+ ctx.restore();
+ },
+
+ /**
+ * Returns object representation of an instance
+ * @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output
+ * @return {Object} Object representation of an instance
+ */
+ toObject: function(propertiesToInclude) {
+ var object = extend(this.callSuper('toObject', propertiesToInclude), {
+ text: this.text,
+ fontSize: this.fontSize,
+ fontWeight: this.fontWeight,
+ fontFamily: this.fontFamily,
+ fontStyle: this.fontStyle,
+ lineHeight: this.lineHeight,
+ textDecoration: this.textDecoration,
+ textAlign: this.textAlign,
+ path: this.path,
+ textBackgroundColor: this.textBackgroundColor,
+ useNative: this.useNative
+ });
+ if (!this.includeDefaultValues) {
+ this._removeDefaultValues(object);
+ }
+ return object;
+ },
+
+ /* _TO_SVG_START_ */
+ /**
+ * Returns SVG representation of an instance
+ * @param {Function} [reviver] Method for further parsing of svg representation.
+ * @return {String} svg representation of an instance
+ */
+ toSVG: function(reviver) {
+ var markup = [ ],
+ textLines = this.text.split(this._reNewline),
+ offsets = this._getSVGLeftTopOffsets(textLines),
+ textAndBg = this._getSVGTextAndBg(offsets.lineTop, offsets.textLeft, textLines),
+ shadowSpans = this._getSVGShadows(offsets.lineTop, textLines);
+
+ // move top offset by an ascent
+ offsets.textTop += (this._fontAscent ? ((this._fontAscent / 5) * this.lineHeight) : 0);
+
+ this._wrapSVGTextAndBg(markup, textAndBg, shadowSpans, offsets);
+
+ return reviver ? reviver(markup.join('')) : markup.join('');
+ },
+
+ /**
+ * @private
+ */
+ _getSVGLeftTopOffsets: function(textLines) {
+ var lineTop = this.useNative
+ ? this.fontSize * this.lineHeight
+ : (-this._fontAscent - ((this._fontAscent / 5) * this.lineHeight)),
+
+ textLeft = -(this.width/2),
+ textTop = this.useNative
+ ? this.fontSize - 1
+ : (this.height/2) - (textLines.length * this.fontSize) - this._totalLineHeight;
+
+ return {
+ textLeft: textLeft,
+ textTop: textTop,
+ lineTop: lineTop
+ };
+ },
+
+ /**
+ * @private
+ */
+ _wrapSVGTextAndBg: function(markup, textAndBg, shadowSpans, offsets) {
+ markup.push(
+ '',
+ textAndBg.textBgRects.join(''),
+ '',
+ shadowSpans.join(''),
+ textAndBg.textSpans.join(''),
+ '',
+ ''
+ );
+ },
+
+ /**
+ * @private
+ * @param {Number} lineHeight
+ * @param {Array} textLines Array of all text lines
+ * @return {Array}
+ */
+ _getSVGShadows: function(lineHeight, textLines) {
+ var shadowSpans = [],
+ i, len,
+ lineTopOffsetMultiplier = 1;
+
+ if (!this.shadow || !this._boundaries) {
+ return shadowSpans;
+ }
+
+ for (i = 0, len = textLines.length; i < len; i++) {
+ if (textLines[i] !== '') {
+ var lineLeftOffset = (this._boundaries && this._boundaries[i]) ? this._boundaries[i].left : 0;
+ shadowSpans.push(
+ '',
+ fabric.util.string.escapeXml(textLines[i]),
+ '');
+ lineTopOffsetMultiplier = 1;
+ }
+ else {
+ // in some environments (e.g. IE 7 & 8) empty tspans are completely ignored, using a lineTopOffsetMultiplier
+ // prevents empty tspans
+ lineTopOffsetMultiplier++;
+ }
+ }
+
+ return shadowSpans;
+ },
+
+ /**
+ * @private
+ * @param {Number} lineHeight
+ * @param {Number} textLeftOffset Text left offset
+ * @param {Array} textLines Array of all text lines
+ * @return {Object}
+ */
+ _getSVGTextAndBg: function(lineHeight, textLeftOffset, textLines) {
+ var textSpans = [ ],
+ textBgRects = [ ],
+ lineTopOffsetMultiplier = 1;
+
+ // bounding-box background
+ this._setSVGBg(textBgRects);
+
+ // text and text-background
+ for (var i = 0, len = textLines.length; i < len; i++) {
+ if (textLines[i] !== '') {
+ this._setSVGTextLineText(textLines[i], i, textSpans, lineHeight, lineTopOffsetMultiplier, textBgRects);
+ lineTopOffsetMultiplier = 1;
+ }
+ else {
+ // in some environments (e.g. IE 7 & 8) empty tspans are completely ignored, using a lineTopOffsetMultiplier
+ // prevents empty tspans
+ lineTopOffsetMultiplier++;
+ }
+
+ if (!this.textBackgroundColor || !this._boundaries) continue;
+
+ this._setSVGTextLineBg(textBgRects, i, textLeftOffset, lineHeight);
+ }
+
+ return {
+ textSpans: textSpans,
+ textBgRects: textBgRects
+ };
+ },
+
+ _setSVGTextLineText: function(textLine, i, textSpans, lineHeight, lineTopOffsetMultiplier) {
+ var lineLeftOffset = (this._boundaries && this._boundaries[i])
+ ? toFixed(this._boundaries[i].left, 2)
+ : 0;
+
+ textSpans.push(
+ ' elements since setting opacity
+ // on containing one doesn't work in Illustrator
+ this._getFillAttributes(this.fill), '>',
+ fabric.util.string.escapeXml(textLine),
+ ''
+ );
+ },
+
+ _setSVGTextLineBg: function(textBgRects, i, textLeftOffset, lineHeight) {
+ textBgRects.push(
+ '');
+ },
+
+ _setSVGBg: function(textBgRects) {
+ if (this.backgroundColor && this._boundaries) {
+ textBgRects.push(
+ '');
+ }
+ },
+
+ /**
+ * 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 {Any} 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 {Any} value
+ * @return {fabric.Text} thisArg
+ * @chainable
+ */
+ _set: function(key, value) {
+ if (key === 'fontFamily' && this.path) {
+ this.path = this.path.replace(/(.*?)([^\/]*)(\.font\.js)/, '$1' + value + '$3');
+ }
+ 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);
+
+ 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 = 'center';
+ }
+
+ var text = new fabric.Text(element.textContent, options);
+
+ /*
+ 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
+ */
+
+ text.set({
+ left: text.getLeft() + text.getWidth() / 2,
+ top: text.getTop() - text.getHeight() / 2
+ });
+
+ return text;
+ };
+ /* _FROM_SVG_END_ */
+
+ /**
+ * Returns fabric.Text instance from an object representation
+ * @static
+ * @memberOf fabric.Text
+ * @param object {Object} object Object to create an instance from
+ * @return {fabric.Text} Instance of fabric.Text
+ */
+ fabric.Text.fromObject = function(object) {
+ return new fabric.Text(object.text, clone(object));
+ };
+
+ fabric.util.createAccessors(fabric.Text);
+
+})(typeof exports !== 'undefined' ? exports : this);
+
+
+(function() {
+
+ var clone = fabric.util.object.clone;
+
+ /**
+ * IText class (introduced in v1.4)
+ * @class fabric.IText
+ * @extends fabric.Text
+ * @mixes fabric.Observable
+ *
+ * @fires changed ("text:changed" when observing canvas)
+ * @fires editing:entered ("text:editing:entered" when observing canvas)
+ * @fires editing:exited ("text:editing:exited" when observing canvas)
+ *
+ * @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
+ * Select till start/end of line: cmd + shift + left, cmd + shift + right
+ * Jump to start/end of text: cmd + up, cmd + down
+ * Select till start/end of text: cmd + shift + up, cmd + shift + down
+ * 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
+ *
+ *
+ * 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 Nubmer
+ * @default
+ */
+ selectionStart: 0,
+
+ /**
+ * Index where text selection ends
+ * @type Nubmer
+ * @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
+ * @type Boolean
+ * @default
+ */
+ _skipFillStrokeCheck: true,
+
+ /**
+ * @private
+ */
+ _reSpace: /\s|\n/,
+
+ /**
+ * @private
+ */
+ _fontSizeFraction: 4,
+
+ /**
+ * @private
+ */
+ _currentCursorOpacity: 0,
+
+ /**
+ * @private
+ */
+ _selectionDirection: null,
+
+ /**
+ * @private
+ */
+ _abortCursorAnimation: false,
+
+ /**
+ * @private
+ */
+ _charWidthsCache: { },
+
+ /**
+ * 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();
+
+ fabric.IText.instances.push(this);
+
+ // caching
+ this.__lineWidths = { };
+ this.__lineHeights = { };
+ this.__lineOffsets = { };
+ },
+
+ /**
+ * 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]) {
+ /*jshint unused:false */
+ 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) {
+ if (this.selectionStart !== index) {
+ this.canvas && this.canvas.fire('text:selection:changed', { target: this });
+ }
+ this.selectionStart = index;
+ this.hiddenTextarea && (this.hiddenTextarea.selectionStart = index);
+ },
+
+ /**
+ * Sets selection end (right boundary of a selection)
+ * @param {Number} index Index to set selection end to
+ */
+ setSelectionEnd: function(index) {
+ if (this.selectionEnd !== index) {
+ this.canvas && this.canvas.fire('text:selection:changed', { target: this });
+ }
+ this.selectionEnd = index;
+ this.hiddenTextarea && (this.hiddenTextarea.selectionEnd = index);
+ },
+
+ /**
+ * 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);
+ if (this.styles[loc.lineIndex]) {
+ return this.styles[loc.lineIndex][loc.charIndex] || { };
+ }
+
+ return { };
+ },
+
+ /**
+ * 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);
+ }
+ }
+ return this;
+ },
+
+ /**
+ * @private
+ */
+ _extendStyles: function(index, styles) {
+ var loc = this.get2DCursorLocation(index);
+
+ if (!this.styles[loc.lineIndex]) {
+ this.styles[loc.lineIndex] = { };
+ }
+ if (!this.styles[loc.lineIndex][loc.charIndex]) {
+ this.styles[loc.lineIndex][loc.charIndex] = { };
+ }
+
+ fabric.util.object.extend(this.styles[loc.lineIndex][loc.charIndex], styles);
+ },
+
+ /**
+ * @private
+ * @param {CanvasRenderingContext2D} ctx Context to render on
+ */
+ _render: function(ctx) {
+ this.callSuper('_render', ctx);
+ this.ctx = ctx;
+ this.isEditing && this.renderCursorOrSelection();
+ },
+
+ /**
+ * Renders cursor or selection (depending on what exists)
+ */
+ renderCursorOrSelection: function() {
+ if (!this.active) return;
+
+ var chars = this.text.split(''),
+ boundaries;
+
+ if (this.selectionStart === this.selectionEnd) {
+ boundaries = this._getCursorBoundaries(chars, 'cursor');
+ this.renderCursor(boundaries);
+ }
+ else {
+ boundaries = this._getCursorBoundaries(chars, 'selection');
+ this.renderSelection(chars, boundaries);
+ }
+ },
+
+ /**
+ * 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 textBeforeCursor = this.text.slice(0, selectionStart),
+ linesBeforeCursor = textBeforeCursor.split(this._reNewline);
+
+ return {
+ lineIndex: linesBeforeCursor.length - 1,
+ charIndex: linesBeforeCursor[linesBeforeCursor.length - 1].length
+ };
+ },
+
+ /**
+ * 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.styles[lineIndex] && this.styles[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,
+ 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) {
+ return (
+ this.styles[lineIndex] &&
+ this.styles[lineIndex][charIndex === 0 ? 0 : (charIndex - 1)] &&
+ this.styles[lineIndex][charIndex === 0 ? 0 : (charIndex - 1)].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) {
+ return (
+ this.styles[lineIndex] &&
+ this.styles[lineIndex][charIndex === 0 ? 0 : (charIndex - 1)] &&
+ this.styles[lineIndex][charIndex === 0 ? 0 : (charIndex - 1)].fill) || this.cursorColor;
+ },
+
+ /**
+ * Returns cursor boundaries (left, top, leftOffset, topOffset)
+ * @private
+ * @param {Array} chars Array of characters
+ * @param {String} typeOfBoundaries
+ */
+ _getCursorBoundaries: function(chars, typeOfBoundaries) {
+
+ var cursorLocation = this.get2DCursorLocation(),
+
+ textLines = this.text.split(this._reNewline),
+
+ // left/top are left/top of entire text box
+ // leftOffset/topOffset are offset from that left/top point of a text box
+
+ left = Math.round(this._getLeftOffset()),
+ top = -this.height / 2,
+
+ offsets = this._getCursorBoundariesOffsets(
+ chars, typeOfBoundaries, cursorLocation, textLines);
+
+ return {
+ left: left,
+ top: top,
+ leftOffset: offsets.left + offsets.lineLeft,
+ topOffset: offsets.top
+ };
+ },
+
+ /**
+ * @private
+ */
+ _getCursorBoundariesOffsets: function(chars, typeOfBoundaries, cursorLocation, textLines) {
+
+ var lineLeftOffset = 0,
+
+ lineIndex = 0,
+ charIndex = 0,
+
+ leftOffset = 0,
+ topOffset = typeOfBoundaries === 'cursor'
+ // selection starts at the very top of the line,
+ // whereas cursor starts at the padding created by line height
+ ? (this._getHeightOfLine(this.ctx, 0) -
+ this.getCurrentCharFontSize(cursorLocation.lineIndex, cursorLocation.charIndex))
+ : 0;
+
+ for (var i = 0; i < this.selectionStart; i++) {
+ if (chars[i] === '\n') {
+ leftOffset = 0;
+ var index = lineIndex + (typeOfBoundaries === 'cursor' ? 1 : 0);
+ topOffset += this._getCachedLineHeight(index);
+
+ lineIndex++;
+ charIndex = 0;
+ }
+ else {
+ leftOffset += this._getWidthOfChar(this.ctx, chars[i], lineIndex, charIndex);
+ charIndex++;
+ }
+
+ lineLeftOffset = this._getCachedLineOffset(lineIndex, textLines);
+ }
+
+ this._clearCache();
+
+ return {
+ top: topOffset,
+ left: leftOffset,
+ lineLeft: lineLeftOffset
+ };
+ },
+
+ /**
+ * @private
+ */
+ _clearCache: function() {
+ this.__lineWidths = { };
+ this.__lineHeights = { };
+ this.__lineOffsets = { };
+ },
+
+ /**
+ * @private
+ */
+ _getCachedLineHeight: function(index) {
+ return this.__lineHeights[index] ||
+ (this.__lineHeights[index] = this._getHeightOfLine(this.ctx, index));
+ },
+
+ /**
+ * @private
+ */
+ _getCachedLineWidth: function(lineIndex, textLines) {
+ return this.__lineWidths[lineIndex] ||
+ (this.__lineWidths[lineIndex] = this._getWidthOfLine(this.ctx, lineIndex, textLines));
+ },
+
+ /**
+ * @private
+ */
+ _getCachedLineOffset: function(lineIndex, textLines) {
+ var widthOfLine = this._getCachedLineWidth(lineIndex, textLines);
+
+ return this.__lineOffsets[lineIndex] ||
+ (this.__lineOffsets[lineIndex] = this._getLineLeftOffset(widthOfLine));
+ },
+
+ /**
+ * Renders cursor
+ * @param {Object} boundaries
+ */
+ renderCursor: function(boundaries) {
+ var ctx = this.ctx;
+
+ ctx.save();
+
+ var cursorLocation = this.get2DCursorLocation(),
+ lineIndex = cursorLocation.lineIndex,
+ charIndex = cursorLocation.charIndex,
+ charHeight = this.getCurrentCharFontSize(lineIndex, charIndex),
+ leftOffset = (lineIndex === 0 && charIndex === 0)
+ ? this._getCachedLineOffset(lineIndex, this.text.split(this._reNewline))
+ : boundaries.leftOffset;
+
+ ctx.fillStyle = this.getCurrentCharColor(lineIndex, charIndex);
+ ctx.globalAlpha = this.__isMousedown ? 1 : this._currentCursorOpacity;
+
+ ctx.fillRect(
+ boundaries.left + leftOffset,
+ boundaries.top + boundaries.topOffset,
+ this.cursorWidth / this.scaleX,
+ charHeight);
+
+ ctx.restore();
+ },
+
+ /**
+ * Renders text selection
+ * @param {Array} chars Array of characters
+ * @param {Object} boundaries Object with left/top/leftOffset/topOffset
+ */
+ renderSelection: function(chars, boundaries) {
+ var ctx = this.ctx;
+
+ ctx.save();
+
+ ctx.fillStyle = this.selectionColor;
+
+ var start = this.get2DCursorLocation(this.selectionStart),
+ end = this.get2DCursorLocation(this.selectionEnd),
+ startLine = start.lineIndex,
+ endLine = end.lineIndex,
+ textLines = this.text.split(this._reNewline);
+
+ for (var i = startLine; i <= endLine; i++) {
+ var lineOffset = this._getCachedLineOffset(i, textLines) || 0,
+ lineHeight = this._getCachedLineHeight(i),
+ boxWidth = 0;
+
+ if (i === startLine) {
+ for (var j = 0, len = textLines[i].length; j < len; j++) {
+ if (j >= start.charIndex && (i !== endLine || j < end.charIndex)) {
+ boxWidth += this._getWidthOfChar(ctx, textLines[i][j], i, j);
}
- });
- }
- fabric.util.loadImage = function(url, callback, context) {
- function createImageAndCallBack(data) {
- img.src = new Buffer(data, "binary");
- img._src = url;
- callback && callback.call(context, img);
+ if (j < start.charIndex) {
+ lineOffset += this._getWidthOfChar(ctx, textLines[i][j], i, j);
+ }
+ }
}
- 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);
+ else if (i > startLine && i < endLine) {
+ boxWidth += this._getCachedLineWidth(i, textLines) || 5;
}
- };
- 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);
- });
+ else if (i === endLine) {
+ for (var j2 = 0, j2len = end.charIndex; j2 < j2len; j2++) {
+ boxWidth += this._getWidthOfChar(ctx, textLines[i][j2], i, j2);
+ }
}
- };
- 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) {
- eval(body);
- callback && callback();
- });
- };
- fabric.Image.fromObject = function(object, callback) {
- fabric.util.loadImage(object.src, function(img) {
- var oImg = new fabric.Image(img);
- oImg._initConfig(object);
- oImg._initFilters(object, function(filters) {
- oImg.filters = filters || [];
- callback && callback(oImg);
- });
- });
- };
- fabric.createCanvasForNode = function(width, height, options, nodeCanvasOptions) {
- nodeCanvasOptions = nodeCanvasOptions || options;
- var canvasEl = fabric.document.createElement("canvas"), nodeCanvas = new Canvas(width || 600, height || 600, nodeCanvasOptions);
- canvasEl.style = {};
- canvasEl.width = nodeCanvas.width;
- canvasEl.height = nodeCanvas.height;
- var FabricCanvas = fabric.Canvas || fabric.StaticCanvas, fabricCanvas = new FabricCanvas(canvasEl, options);
- fabricCanvas.contextContainer = nodeCanvas.getContext("2d");
- fabricCanvas.nodeCanvas = nodeCanvas;
- fabricCanvas.Font = Canvas.Font;
- return fabricCanvas;
- };
- fabric.StaticCanvas.prototype.createPNGStream = function() {
- return this.nodeCanvas.createPNGStream();
- };
- fabric.StaticCanvas.prototype.createJPEGStream = function(opts) {
- return this.nodeCanvas.createJPEGStream(opts);
- };
- var origSetWidth = fabric.StaticCanvas.prototype.setWidth;
- fabric.StaticCanvas.prototype.setWidth = function(width) {
- origSetWidth.call(this, width);
- this.nodeCanvas.width = width;
- return this;
- };
- if (fabric.Canvas) {
- fabric.Canvas.prototype.setWidth = fabric.StaticCanvas.prototype.setWidth;
- }
- var origSetHeight = fabric.StaticCanvas.prototype.setHeight;
- fabric.StaticCanvas.prototype.setHeight = function(height) {
- origSetHeight.call(this, height);
- this.nodeCanvas.height = height;
- return this;
- };
- if (fabric.Canvas) {
- fabric.Canvas.prototype.setHeight = fabric.StaticCanvas.prototype.setHeight;
+
+ ctx.fillRect(
+ boundaries.left + lineOffset,
+ boundaries.top + boundaries.topOffset,
+ boxWidth,
+ lineHeight);
+
+ boundaries.topOffset += lineHeight;
+ }
+ ctx.restore();
+ },
+
+ /**
+ * @private
+ * @param {String} method
+ * @param {CanvasRenderingContext2D} ctx Context to render on
+ */
+ _renderChars: function(method, ctx, line, left, top, lineIndex) {
+
+ if (this.isEmptyStyles()) {
+ return this._renderCharsFast(method, ctx, line, left, top);
+ }
+
+ this.skipTextAlign = true;
+
+ // set proper box offset
+ left -= this.textAlign === 'center'
+ ? (this.width / 2)
+ : (this.textAlign === 'right')
+ ? this.width
+ : 0;
+
+ // set proper line offset
+ var textLines = this.text.split(this._reNewline),
+ lineWidth = this._getWidthOfLine(ctx, lineIndex, textLines),
+ lineHeight = this._getHeightOfLine(ctx, lineIndex, textLines),
+ lineLeftOffset = this._getLineLeftOffset(lineWidth),
+ chars = line.split(''),
+ prevStyle,
+ charsToRender = '';
+
+ left += lineLeftOffset || 0;
+
+ ctx.save();
+
+ for (var i = 0, len = chars.length; i <= len; i++) {
+ prevStyle = prevStyle || this.getCurrentCharStyle(lineIndex, i);
+ var 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 += chars[i];
+ }
+
+ ctx.restore();
+ },
+
+ /**
+ * @private
+ * @param {String} method
+ * @param {CanvasRenderingContext2D} ctx Context to render on
+ * @param {String} line
+ */
+ _renderCharsFast: function(method, ctx, line, left, top) {
+ this.skipTextAlign = false;
+
+ if (method === 'fillText' && this.fill) {
+ this.callSuper('_renderChars', method, ctx, line, left, top);
+ }
+ if (method === 'strokeText' && this.stroke) {
+ this.callSuper('_renderChars', method, ctx, line, left, top);
+ }
+ },
+
+ /**
+ * @private
+ * @param {CanvasRenderingContext2D} ctx Context to render on
+ */
+ _renderChar: function(method, ctx, lineIndex, i, _char, left, top, lineHeight) {
+ var decl, charWidth, charHeight;
+
+ if (this.styles && this.styles[lineIndex] && (decl = this.styles[lineIndex][i])) {
+
+ var shouldStroke = decl.stroke || this.stroke,
+ shouldFill = decl.fill || this.fill;
+
+ ctx.save();
+ charWidth = this._applyCharStylesGetWidth(ctx, _char, lineIndex, i, decl);
+ charHeight = this._getHeightOfChar(ctx, _char, lineIndex, i);
+
+ if (shouldFill) {
+ ctx.fillText(_char, left, top);
+ }
+ if (shouldStroke) {
+ ctx.strokeText(_char, left, top);
+ }
+
+ this._renderCharDecoration(ctx, decl, left, top, charWidth, lineHeight, charHeight);
+ ctx.restore();
+
+ ctx.translate(charWidth, 0);
+ }
+ else {
+ if (method === 'strokeText' && this.stroke) {
+ ctx[method](_char, left, top);
+ }
+ if (method === 'fillText' && this.fill) {
+ ctx[method](_char, left, top);
+ }
+ charWidth = this._applyCharStylesGetWidth(ctx, _char, lineIndex, i);
+ this._renderCharDecoration(ctx, null, left, top, charWidth, lineHeight);
+
+ ctx.translate(ctx.measureText(_char).width, 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.stroke !== thisStyle.stroke ||
+ prevStyle.strokeWidth !== thisStyle.strokeWidth
+ );
+ },
+
+ /**
+ * @private
+ * @param {CanvasRenderingContext2D} ctx Context to render on
+ */
+ _renderCharDecoration: function(ctx, styleDeclaration, left, top, charWidth, lineHeight, charHeight) {
+
+ var textDecoration = styleDeclaration
+ ? (styleDeclaration.textDecoration || this.textDecoration)
+ : this.textDecoration,
+
+ fontSize = (styleDeclaration ? styleDeclaration.fontSize : null) || this.fontSize;
+
+ if (!textDecoration) return;
+
+ if (textDecoration.indexOf('underline') > -1) {
+ this._renderCharDecorationAtOffset(
+ ctx,
+ left,
+ top + (this.fontSize / this._fontSizeFraction),
+ charWidth,
+ 0,
+ this.fontSize / 20
+ );
+ }
+ if (textDecoration.indexOf('line-through') > -1) {
+ this._renderCharDecorationAtOffset(
+ ctx,
+ left,
+ top + (this.fontSize / this._fontSizeFraction),
+ charWidth,
+ charHeight / 2,
+ fontSize / 20
+ );
+ }
+ if (textDecoration.indexOf('overline') > -1) {
+ this._renderCharDecorationAtOffset(
+ ctx,
+ left,
+ top,
+ charWidth,
+ lineHeight - (this.fontSize / this._fontSizeFraction),
+ this.fontSize / 20
+ );
+ }
+ },
+
+ /**
+ * @private
+ * @param {CanvasRenderingContext2D} ctx Context to render on
+ */
+ _renderCharDecorationAtOffset: function(ctx, left, top, charWidth, offset, thickness) {
+ ctx.fillRect(left, top - offset, charWidth, thickness);
+ },
+
+ /**
+ * @private
+ * @param {String} method
+ * @param {CanvasRenderingContext2D} ctx Context to render on
+ * @param {String} line
+ */
+ _renderTextLine: function(method, ctx, line, left, top, lineIndex) {
+ // to "cancel" this.fontSize subtraction in fabric.Text#_renderTextLine
+ top += this.fontSize / 4;
+ this.callSuper('_renderTextLine', method, ctx, line, left, top, lineIndex);
+ },
+
+ /**
+ * @private
+ * @param {CanvasRenderingContext2D} ctx Context to render on
+ * @param {Array} textLines
+ */
+ _renderTextDecoration: function(ctx, textLines) {
+ if (this.isEmptyStyles()) {
+ return this.callSuper('_renderTextDecoration', ctx, textLines);
+ }
+ },
+
+ /**
+ * @private
+ * @param {CanvasRenderingContext2D} ctx Context to render on
+ * @param {Array} textLines Array of all text lines
+ */
+ _renderTextLinesBackground: function(ctx, textLines) {
+ if (!this.textBackgroundColor && !this.styles) return;
+
+ ctx.save();
+
+ if (this.textBackgroundColor) {
+ ctx.fillStyle = this.textBackgroundColor;
+ }
+
+ var lineHeights = 0,
+ fractionOfFontSize = this.fontSize / this._fontSizeFraction;
+
+ for (var i = 0, len = textLines.length; i < len; i++) {
+
+ var heightOfLine = this._getHeightOfLine(ctx, i, textLines);
+ if (textLines[i] === '') {
+ lineHeights += heightOfLine;
+ continue;
+ }
+
+ var lineWidth = this._getWidthOfLine(ctx, i, textLines),
+ lineLeftOffset = this._getLineLeftOffset(lineWidth);
+
+ if (this.textBackgroundColor) {
+ ctx.fillStyle = this.textBackgroundColor;
+
+ ctx.fillRect(
+ this._getLeftOffset() + lineLeftOffset,
+ this._getTopOffset() + lineHeights + fractionOfFontSize,
+ lineWidth,
+ heightOfLine
+ );
+ }
+ if (this.styles[i]) {
+ for (var j = 0, jlen = textLines[i].length; j < jlen; j++) {
+ if (this.styles[i] && this.styles[i][j] && this.styles[i][j].textBackgroundColor) {
+
+ var _char = textLines[i][j];
+
+ ctx.fillStyle = this.styles[i][j].textBackgroundColor;
+
+ ctx.fillRect(
+ this._getLeftOffset() + lineLeftOffset + this._getWidthOfCharsAt(ctx, i, j, textLines),
+ this._getTopOffset() + lineHeights + fractionOfFontSize,
+ this._getWidthOfChar(ctx, _char, i, j, textLines) + 1,
+ heightOfLine
+ );
+ }
+ }
+ }
+ lineHeights += heightOfLine;
+ }
+ ctx.restore();
+ },
+
+ /**
+ * @private
+ */
+ _getCacheProp: function(_char, styleDeclaration) {
+ return _char +
+
+ styleDeclaration.fontFamily +
+ styleDeclaration.fontSize +
+ styleDeclaration.fontWeight +
+ styleDeclaration.fontStyle +
+
+ styleDeclaration.shadow;
+ },
+
+ /**
+ * @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 styleDeclaration = decl ||
+ (this.styles[lineIndex] &&
+ this.styles[lineIndex][charIndex]);
+
+ if (styleDeclaration) {
+ // cloning so that original style object is not polluted with following font declarations
+ styleDeclaration = clone(styleDeclaration);
+ }
+ else {
+ styleDeclaration = { };
+ }
+
+ this._applyFontStyles(styleDeclaration);
+
+ var cacheProp = this._getCacheProp(_char, styleDeclaration);
+
+ // short-circuit if no styles
+ if (this.isEmptyStyles() && this._charWidthsCache[cacheProp] && this.caching) {
+ return this._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)
+ : fill;
+
+ if (styleDeclaration.stroke) {
+ ctx.strokeStyle = (styleDeclaration.stroke && styleDeclaration.stroke.toLive)
+ ? styleDeclaration.stroke.toLive(ctx)
+ : styleDeclaration.stroke;
+ }
+
+ ctx.lineWidth = styleDeclaration.strokeWidth || this.strokeWidth;
+ ctx.font = this._getFontDeclaration.call(styleDeclaration);
+ this._setShadow.call(styleDeclaration, ctx);
+
+ if (!this.caching) {
+ return ctx.measureText(_char).width;
+ }
+
+ if (!this._charWidthsCache[cacheProp]) {
+ this._charWidthsCache[cacheProp] = ctx.measureText(_char).width;
+ }
+
+ return this._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;
+ }
+ },
+
+ /**
+ * @private
+ * @param {Number} lineIndex
+ * @param {Number} charIndex
+ */
+ _getStyleDeclaration: function(lineIndex, charIndex) {
+ return (this.styles[lineIndex] && this.styles[lineIndex][charIndex])
+ ? clone(this.styles[lineIndex][charIndex])
+ : { };
+ },
+
+ /**
+ * @private
+ * @param {CanvasRenderingContext2D} ctx Context to render on
+ */
+ _getWidthOfChar: function(ctx, _char, lineIndex, charIndex) {
+ var styleDeclaration = this._getStyleDeclaration(lineIndex, charIndex);
+ this._applyFontStyles(styleDeclaration);
+ var cacheProp = this._getCacheProp(_char, styleDeclaration);
+
+ if (this._charWidthsCache[cacheProp] && this.caching) {
+ return this._charWidthsCache[cacheProp];
+ }
+ else if (ctx) {
+ ctx.save();
+ var width = this._applyCharStylesGetWidth(ctx, _char, lineIndex, charIndex);
+ ctx.restore();
+ return width;
+ }
+ },
+
+ /**
+ * @private
+ * @param {CanvasRenderingContext2D} ctx Context to render on
+ */
+ _getHeightOfChar: function(ctx, _char, lineIndex, charIndex) {
+ if (this.styles[lineIndex] && this.styles[lineIndex][charIndex]) {
+ return this.styles[lineIndex][charIndex].fontSize || this.fontSize;
+ }
+ return this.fontSize;
+ },
+
+ /**
+ * @private
+ * @param {CanvasRenderingContext2D} ctx Context to render on
+ */
+ _getWidthOfCharAt: function(ctx, lineIndex, charIndex, lines) {
+ lines = lines || this.text.split(this._reNewline);
+ var _char = lines[lineIndex].split('')[charIndex];
+ return this._getWidthOfChar(ctx, _char, lineIndex, charIndex);
+ },
+
+ /**
+ * @private
+ * @param {CanvasRenderingContext2D} ctx Context to render on
+ */
+ _getHeightOfCharAt: function(ctx, lineIndex, charIndex, lines) {
+ lines = lines || this.text.split(this._reNewline);
+ var _char = lines[lineIndex].split('')[charIndex];
+ return this._getHeightOfChar(ctx, _char, lineIndex, charIndex);
+ },
+
+ /**
+ * @private
+ * @param {CanvasRenderingContext2D} ctx Context to render on
+ */
+ _getWidthOfCharsAt: function(ctx, lineIndex, charIndex, lines) {
+ var width = 0;
+ for (var i = 0; i < charIndex; i++) {
+ width += this._getWidthOfCharAt(ctx, lineIndex, i, lines);
+ }
+ return width;
+ },
+
+ /**
+ * @private
+ * @param {CanvasRenderingContext2D} ctx Context to render on
+ */
+ _getWidthOfLine: function(ctx, lineIndex, textLines) {
+ // if (!this.styles[lineIndex]) {
+ // return this.callSuper('_getLineWidth', ctx, textLines[lineIndex]);
+ // }
+ return this._getWidthOfCharsAt(ctx, lineIndex, textLines[lineIndex].length, textLines);
+ },
+
+ /**
+ * @private
+ * @param {CanvasRenderingContext2D} ctx Context to render on
+ */
+ _getTextWidth: function(ctx, textLines) {
+
+ if (this.isEmptyStyles()) {
+ return this.callSuper('_getTextWidth', ctx, textLines);
+ }
+
+ var maxWidth = this._getWidthOfLine(ctx, 0, textLines);
+
+ for (var i = 1, len = textLines.length; i < len; i++) {
+ var currentLineWidth = this._getWidthOfLine(ctx, i, textLines);
+ if (currentLineWidth > maxWidth) {
+ maxWidth = currentLineWidth;
+ }
+ }
+ return maxWidth;
+ },
+
+ /**
+ * @private
+ * @param {CanvasRenderingContext2D} ctx Context to render on
+ */
+ _getHeightOfLine: function(ctx, lineIndex, textLines) {
+
+ textLines = textLines || this.text.split(this._reNewline);
+
+ var maxHeight = this._getHeightOfChar(ctx, textLines[lineIndex][0], lineIndex, 0),
+ line = textLines[lineIndex],
+ chars = line.split('');
+
+ for (var i = 1, len = chars.length; i < len; i++) {
+ var currentCharHeight = this._getHeightOfChar(ctx, chars[i], lineIndex, i);
+ if (currentCharHeight > maxHeight) {
+ maxHeight = currentCharHeight;
+ }
+ }
+
+ return maxHeight * this.lineHeight;
+ },
+
+ /**
+ * @private
+ * @param {CanvasRenderingContext2D} ctx Context to render on
+ */
+ _getTextHeight: function(ctx, textLines) {
+ var height = 0;
+ for (var i = 0, len = textLines.length; i < len; i++) {
+ height += this._getHeightOfLine(ctx, i, textLines);
+ }
+ return height;
+ },
+
+ /**
+ * @private
+ * @param {CanvasRenderingContext2D} ctx Context to render on
+ */
+ _getTopOffset: function() {
+ var topOffset = fabric.Text.prototype._getTopOffset.call(this);
+ return topOffset - (this.fontSize / this._fontSizeFraction);
+ },
+
+ /**
+ * @private
+ * This method is overwritten to account for different top offset
+ */
+ _renderTextBoxBackground: function(ctx) {
+ if (!this.backgroundColor) return;
+
+ ctx.save();
+ ctx.fillStyle = this.backgroundColor;
+
+ ctx.fillRect(
+ this._getLeftOffset(),
+ this._getTopOffset() + (this.fontSize / this._fontSizeFraction),
+ this.width,
+ this.height
+ );
+
+ ctx.restore();
+ },
+
+ /**
+ * Returns object representation of an instance
+ * @methd 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)
+ });
}
+ });
+
+ /**
+ * Returns fabric.IText instance from an object representation
+ * @static
+ * @memberOf fabric.IText
+ * @param {Object} object Object to create an instance from
+ * @return {fabric.IText} instance of fabric.IText
+ */
+ fabric.IText.fromObject = function(object) {
+ return new fabric.IText(object.text, clone(object));
+ };
+
+ /**
+ * Contains all fabric.IText objects that have been created
+ * @static
+ * @memberof fabric.IText
+ * @type Array
+ */
+ fabric.IText.instances = [ ];
+
})();
+
+(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.initCursorSelectionHandlers();
+ this.initDoubleClickSimulation();
+ },
+
+ /**
+ * 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() {
+ this.on('added', function() {
+ if (this.canvas && !this.canvas._hasITextHandlers) {
+ this.canvas._hasITextHandlers = true;
+ this._initCanvasHandlers();
+ }
+ });
+ },
+
+ /**
+ * @private
+ */
+ _initCanvasHandlers: function() {
+ this.canvas.on('selection:cleared', function() {
+ fabric.IText.prototype.exitEditingOnOthers.call();
+ });
+
+ this.canvas.on('mouse:up', function() {
+ fabric.IText.instances.forEach(function(obj) {
+ obj.__isMousedown = false;
+ });
+ });
+
+ this.canvas.on('object:selected', function(options) {
+ fabric.IText.prototype.exitEditingOnOthers.call(options.target);
+ });
+ },
+
+ /**
+ * @private
+ */
+ _tick: function() {
+
+ var _this = this;
+
+ if (this._abortCursorAnimation) return;
+
+ this.animate('_currentCursorOpacity', 1, {
+
+ duration: this.cursorDuration,
+
+ onComplete: function() {
+ _this._onTickComplete();
+ },
+
+ onChange: function() {
+ _this.canvas && _this.canvas.renderAll();
+ },
+
+ abort: function() {
+ return _this._abortCursorAnimation;
+ }
+ });
+ },
+
+ /**
+ * @private
+ */
+ _onTickComplete: function() {
+ if (this._abortCursorAnimation) return;
+
+ var _this = this;
+ if (this._cursorTimeout1) {
+ clearTimeout(this._cursorTimeout1);
+ }
+ this._cursorTimeout1 = setTimeout(function() {
+ _this.animate('_currentCursorOpacity', 0, {
+ duration: this.cursorDuration / 2,
+ onComplete: function() {
+ _this._tick();
+ },
+ onChange: function() {
+ _this.canvas && _this.canvas.renderAll();
+ },
+ abort: function() {
+ return _this._abortCursorAnimation;
+ }
+ });
+ }, 100);
+ },
+
+ /**
+ * Initializes delayed cursor
+ */
+ initDelayedCursor: function(restart) {
+ var _this = this,
+ delay = restart ? 0 : this.cursorDelay;
+
+ if (restart) {
+ this._abortCursorAnimation = true;
+ clearTimeout(this._cursorTimeout1);
+ this._currentCursorOpacity = 1;
+ this.canvas && this.canvas.renderAll();
+ }
+ if (this._cursorTimeout2) {
+ clearTimeout(this._cursorTimeout2);
+ }
+ this._cursorTimeout2 = setTimeout(function() {
+ _this._abortCursorAnimation = false;
+ _this._tick();
+ }, delay);
+ },
+
+ /**
+ * Aborts cursor animation and clears all timeouts
+ */
+ abortCursorAnimation: function() {
+ this._abortCursorAnimation = true;
+
+ clearTimeout(this._cursorTimeout1);
+ clearTimeout(this._cursorTimeout2);
+
+ this._currentCursorOpacity = 0;
+ this.canvas && this.canvas.renderAll();
+
+ var _this = this;
+ setTimeout(function() {
+ _this._abortCursorAnimation = false;
+ }, 10);
+ },
+
+ /**
+ * Selects entire text
+ */
+ selectAll: function() {
+ this.selectionStart = 0;
+ this.selectionEnd = this.text.length;
+ this.canvas && this.canvas.fire('text:selection:changed', { target: this });
+ },
+
+ /**
+ * 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} current 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} current 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, chars = selectedText.split(''), len = chars.length; i < len; i++) {
+ if (chars[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
+ */
+ 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) {
+ var newSelectionStart = this.searchWordBoundary(selectionStart, -1), /* search backwards */
+ newSelectionEnd = this.searchWordBoundary(selectionStart, 1); /* search forward */
+
+ this.setSelectionStart(newSelectionStart);
+ this.setSelectionEnd(newSelectionEnd);
+ this.initDelayedCursor(true);
+ },
+
+ /**
+ * Selects a line based on the index
+ * @param {Number} selectionStart Index of a character
+ */
+ selectLine: function(selectionStart) {
+ var newSelectionStart = this.findLineBoundaryLeft(selectionStart),
+ newSelectionEnd = this.findLineBoundaryRight(selectionStart);
+
+ this.setSelectionStart(newSelectionStart);
+ this.setSelectionEnd(newSelectionEnd);
+ this.initDelayedCursor(true);
+ },
+
+ /**
+ * Enters editing state
+ * @return {fabric.IText} thisArg
+ * @chainable
+ */
+ enterEditing: function() {
+ if (this.isEditing || !this.editable) return;
+
+ this.exitEditingOnOthers();
+
+ this.isEditing = true;
+
+ this.initHiddenTextarea();
+ this._updateTextarea();
+ this._saveEditingProps();
+ this._setEditingProps();
+
+ this._tick();
+ this.canvas && this.canvas.renderAll();
+
+ this.fire('editing:entered');
+ this.canvas && this.canvas.fire('text:editing:entered', { target: this });
+
+ return this;
+ },
+
+ exitEditingOnOthers: function() {
+ fabric.IText.instances.forEach(function(obj) {
+ obj.selected = false;
+ if (obj.isEditing) {
+ obj.exitEditing();
+ }
+ }, this);
+ },
+
+ /**
+ * @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) return;
+
+ this.hiddenTextarea.value = this.text;
+ this.hiddenTextarea.selectionStart = this.selectionStart;
+ },
+
+ /**
+ * @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() {
+
+ 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');
+ this.canvas && this.canvas.fire('text:editing:exited', { target: this });
+
+ return this;
+ },
+
+ /**
+ * @private
+ */
+ _removeExtraneousStyles: function() {
+ var textLines = this.text.split(this._reNewline);
+ for (var prop in this.styles) {
+ if (!textLines[prop]) {
+ delete this.styles[prop];
+ }
+ }
+ },
+
+ /**
+ * @private
+ */
+ _removeCharsFromTo: function(start, end) {
+
+ var i = end;
+ while (i !== start) {
+
+ var prevIndex = this.get2DCursorLocation(i).charIndex;
+ i--;
+
+ var index = this.get2DCursorLocation(i).charIndex,
+ isNewline = index > prevIndex;
+
+ if (isNewline) {
+ this.removeStyleObject(isNewline, i + 1);
+ }
+ else {
+ this.removeStyleObject(this.get2DCursorLocation(i).charIndex === 0, i);
+ }
+
+ }
+
+ this.text = this.text.slice(0, start) +
+ this.text.slice(end);
+ },
+
+ /**
+ * Inserts a character where cursor is (replacing selection if one exists)
+ * @param {String} _chars Characters to insert
+ */
+ insertChars: function(_chars) {
+ var isEndOfLine = this.text.slice(this.selectionStart, this.selectionStart + 1) === '\n';
+
+ this.text = this.text.slice(0, this.selectionStart) +
+ _chars +
+ this.text.slice(this.selectionEnd);
+
+ if (this.selectionStart === this.selectionEnd) {
+ this.insertStyleObjects(_chars, isEndOfLine, this.copiedStyles);
+ }
+ // else if (this.selectionEnd - this.selectionStart > 1) {
+ // TODO: replace styles properly
+ // console.log('replacing MORE than 1 char');
+ // }
+
+ this.selectionStart += _chars.length;
+ this.selectionEnd = this.selectionStart;
+
+ if (this.canvas) {
+ // TODO: double renderAll gets rid of text box shift happenning sometimes
+ // need to find out what exactly causes it and fix it
+ this.canvas.renderAll().renderAll();
+ }
+
+ this.setCoords();
+ this.fire('changed');
+ this.canvas && this.canvas.fire('text:changed', { target: this });
+ },
+
+ /**
+ * 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 = this.styles[lineIndex][charIndex - 1],
+ newLineStyles = { };
+
+ // 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;
+ }
+ },
+
+ /**
+ * 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];
+ //delete currentLineStyles[index];
+ }
+ }
+
+ this.styles[lineIndex][charIndex] =
+ style || clone(currentLineStyles[charIndex - 1]);
+ },
+
+ /**
+ * 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 {Array} [styles] Styles to insert
+ */
+ insertStyleObjects: function(_chars, isEndOfLine, styles) {
+
+ // short-circuit
+ if (this.isEmptyStyles()) return;
+
+ var cursorLocation = this.get2DCursorLocation(),
+ lineIndex = cursorLocation.lineIndex,
+ charIndex = cursorLocation.charIndex;
+
+ if (!this.styles[lineIndex]) {
+ this.styles[lineIndex] = { };
+ }
+
+ if (_chars === '\n') {
+ this.insertNewlineStyleObject(lineIndex, charIndex, isEndOfLine);
+ }
+ else {
+ if (styles) {
+ this._insertStyles(styles);
+ }
+ else {
+ // TODO: support multiple style insertion if _chars.length > 1
+ this.insertCharStyleObject(lineIndex, charIndex);
+ }
+ }
+ },
+
+ /**
+ * @private
+ */
+ _insertStyles: function(styles) {
+ for (var i = 0, len = styles.length; i < len; i++) {
+
+ var cursorLocation = this.get2DCursorLocation(this.selectionStart + i),
+ lineIndex = cursorLocation.lineIndex,
+ charIndex = cursorLocation.charIndex;
+
+ this.insertCharStyleObject(lineIndex, charIndex, styles[i]);
+ }
+ },
+
+ /**
+ * 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];
+ }
+ }
+ },
+
+ /**
+ * 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;
+
+ if (isBeginningOfLine) {
+
+ var textLines = this.text.split(this._reNewline),
+ textOnPreviousLine = textLines[lineIndex - 1],
+ 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(lineIndex, -1);
+ }
+ else {
+ var currentLineStyles = this.styles[lineIndex];
+
+ if (currentLineStyles) {
+ var offset = this.selectionStart === this.selectionEnd ? -1 : 0;
+ delete currentLineStyles[charIndex + offset];
+ // console.log('deleting', lineIndex, charIndex + offset);
+ }
+
+ 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');
+ }
+ });
+})();
+
+
+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.initMousemoveHandler();
+ 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) {
+
+ var pointer = this.canvas.getPointer(options.e);
+
+ this.__mousedownX = pointer.x;
+ this.__mousedownY = pointer.y;
+ this.__isMousedown = true;
+
+ if (this.hiddenTextarea && this.canvas) {
+ this.canvas.wrapperEl.appendChild(this.hiddenTextarea);
+ }
+
+ if (this.selected) {
+ this.setCursorByClick(options.e);
+ }
+
+ if (this.isEditing) {
+ this.__selectionStartOnMouseDown = this.selectionStart;
+ this.initDelayedCursor(true);
+ }
+ });
+ },
+
+ /**
+ * Initializes "mousemove" event handler
+ */
+ initMousemoveHandler: function() {
+ this.on('mousemove', function(options) {
+ if (!this.__isMousedown || !this.isEditing) return;
+
+ var newSelectionStart = this.getSelectionStartFromPointer(options.e);
+
+ if (newSelectionStart >= this.__selectionStartOnMouseDown) {
+ this.setSelectionStart(this.__selectionStartOnMouseDown);
+ this.setSelectionEnd(newSelectionStart);
+ }
+ else {
+ this.setSelectionStart(newSelectionStart);
+ this.setSelectionEnd(this.__selectionStartOnMouseDown);
+ }
+ });
+ },
+
+ /**
+ * @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._isObjectMoved(options.e)) return;
+
+ if (this.__lastSelected) {
+ this.enterEditing();
+ this.initDelayedCursor(true);
+ }
+ this.selected = true;
+ });
+ },
+
+ /**
+ * Changes cursor location in a text depending on passed pointer (x/y) object
+ * @param {Object} pointer Pointer object with x and y numeric properties
+ */
+ setCursorByClick: function(e) {
+ var newSelectionStart = this.getSelectionStartFromPointer(e);
+
+ if (e.shiftKey) {
+ if (newSelectionStart < this.selectionStart) {
+ this.setSelectionEnd(this.selectionStart);
+ this.setSelectionStart(newSelectionStart);
+ }
+ else {
+ this.setSelectionEnd(newSelectionStart);
+ }
+ }
+ else {
+ this.setSelectionStart(newSelectionStart);
+ this.setSelectionEnd(newSelectionStart);
+ }
+ },
+
+ /**
+ * @private
+ * @param {Event} e Event object
+ * @param {Object} Object with x/y corresponding to local offset (according to object rotation)
+ */
+ _getLocalRotatedPointer: function(e) {
+ var pointer = this.canvas.getPointer(e),
+
+ pClicked = new fabric.Point(pointer.x, pointer.y),
+ pLeftTop = new fabric.Point(this.left, this.top),
+
+ rotated = fabric.util.rotatePoint(
+ pClicked, pLeftTop, fabric.util.degreesToRadians(-this.angle));
+
+ return this.getLocalPointer(e, rotated);
+ },
+
+ /**
+ * 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._getLocalRotatedPointer(e),
+ textLines = this.text.split(this._reNewline),
+ prevWidth = 0,
+ width = 0,
+ height = 0,
+ charIndex = 0,
+ newSelectionStart;
+
+ for (var i = 0, len = textLines.length; i < len; i++) {
+
+ height += this._getHeightOfLine(this.ctx, i) * this.scaleY;
+
+ var widthOfLine = this._getWidthOfLine(this.ctx, i, textLines),
+ lineLeftOffset = this._getLineLeftOffset(widthOfLine);
+
+ width = lineLeftOffset * this.scaleX;
+
+ if (this.flipX) {
+ // when oject is horizontally flipped we reverse chars
+ textLines[i] = textLines[i].split('').reverse().join('');
+ }
+
+ for (var j = 0, jlen = textLines[i].length; j < jlen; j++) {
+
+ var _char = textLines[i][j];
+ prevWidth = width;
+
+ width += this._getWidthOfChar(this.ctx, _char, 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) {
+ return this._getNewSelectionStartFromOffset(
+ mouseOffset, prevWidth, width, charIndex + i, jlen, j);
+ }
+ }
+
+ // 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, j) {
+
+ 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;
+ }
+
+ if (j === jlen) {
+ newSelectionStart--;
+ }
+
+ 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');
+ this.hiddenTextarea.style.cssText = 'position: absolute; top: 0; left: -9999px';
+
+ fabric.document.body.appendChild(this.hiddenTextarea);
+
+ fabric.util.addListener(this.hiddenTextarea, 'keydown', this.onKeyDown.bind(this));
+ fabric.util.addListener(this.hiddenTextarea, 'keypress', this.onKeyPress.bind(this));
+ fabric.util.addListener(this.hiddenTextarea, 'copy', this.copy.bind(this));
+ fabric.util.addListener(this.hiddenTextarea, 'paste', this.paste.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',
+ 13: 'insertNewline',
+ 37: 'moveCursorLeft',
+ 38: 'moveCursorUp',
+ 39: 'moveCursorRight',
+ 40: 'moveCursorDown',
+ 46: 'forwardDelete'
+ },
+
+ /**
+ * @private
+ */
+ _ctrlKeysMap: {
+ 65: 'selectAll',
+ 88: 'cut'
+ },
+
+ 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._ctrlKeysMap) && (e.ctrlKey || e.metaKey)) {
+ this[this._ctrlKeysMap[e.keyCode]](e);
+ }
+ else {
+ return;
+ }
+
+ e.stopPropagation();
+
+ this.canvas && this.canvas.renderAll();
+ },
+
+ /**
+ * Forward delete
+ */
+ forwardDelete: function(e) {
+ if (this.selectionStart === this.selectionEnd) {
+ this.moveCursorRight(e);
+ }
+ this.removeChars(e);
+ },
+
+ /**
+ * Copies selected text
+ * @param {Event} e Event object
+ */
+ copy: function(e) {
+ var selectedText = this.getSelectedText(),
+ clipboardData = this._getClipboardData(e);
+
+ // Check for backward compatibility with old browsers
+ if (clipboardData) {
+ clipboardData.setData('text', selectedText);
+ }
+
+ this.copiedText = selectedText;
+ this.copiedStyles = this.getSelectionStyles(
+ this.selectionStart,
+ this.selectionEnd);
+ },
+
+ /**
+ * Pastes text
+ * @param {Event} e Event object
+ */
+ paste: function(e) {
+ var copiedText = null,
+ clipboardData = this._getClipboardData(e);
+
+ // Check for backward compatibility with old browsers
+ if (clipboardData) {
+ copiedText = clipboardData.getData('text');
+ } else {
+ copiedText = this.copiedText;
+ }
+
+ if (copiedText) {
+ this.insertChars(copiedText);
+ }
+ },
+
+ /**
+ * Cuts text
+ * @param {Event} e Event object
+ */
+ cut: function(e) {
+ if (this.selectionStart === this.selectionEnd) {
+ return;
+ }
+
+ this.copy();
+ this.removeChars(e);
+ },
+
+ /**
+ * @private
+ * @param {Event} e Event object
+ */
+ _getClipboardData: function(e) {
+ return e && (e.clipboardData || fabric.window.clipboardData);
+ },
+
+ /**
+ * Handles keypress event
+ * @param {Event} e Event object
+ */
+ onKeyPress: function(e) {
+ if (!this.isEditing || e.metaKey || e.ctrlKey || e.keyCode === 8 || e.keyCode === 13) {
+ return;
+ }
+
+ this.insertChars(String.fromCharCode(e.which));
+
+ e.stopPropagation();
+ },
+
+ /**
+ * Gets start offset of a selection
+ * @return {Number}
+ */
+ getDownCursorOffset: function(e, isRight) {
+
+ var selectionProp = isRight ? this.selectionEnd : this.selectionStart,
+ textLines = this.text.split(this._reNewline),
+ _char,
+ lineLeftOffset,
+
+ textBeforeCursor = this.text.slice(0, selectionProp),
+ textAfterCursor = this.text.slice(selectionProp),
+
+ textOnSameLineBeforeCursor = textBeforeCursor.slice(textBeforeCursor.lastIndexOf('\n') + 1),
+ textOnSameLineAfterCursor = textAfterCursor.match(/(.*)\n?/)[1],
+ textOnNextLine = (textAfterCursor.match(/.*\n(.*)\n?/) || { })[1] || '',
+
+ cursorLocation = this.get2DCursorLocation(selectionProp);
+
+ // if on last line, down cursor goes to end of line
+ if (cursorLocation.lineIndex === textLines.length - 1 || e.metaKey) {
+
+ // move to the end of a text
+ return this.text.length - selectionProp;
+ }
+
+ var widthOfSameLineBeforeCursor = this._getWidthOfLine(this.ctx, cursorLocation.lineIndex, textLines);
+ lineLeftOffset = this._getLineLeftOffset(widthOfSameLineBeforeCursor);
+
+ var widthOfCharsOnSameLineBeforeCursor = lineLeftOffset,
+ lineIndex = cursorLocation.lineIndex;
+
+ for (var i = 0, len = textOnSameLineBeforeCursor.length; i < len; i++) {
+ _char = textOnSameLineBeforeCursor[i];
+ widthOfCharsOnSameLineBeforeCursor += this._getWidthOfChar(this.ctx, _char, lineIndex, i);
+ }
+
+ var indexOnNextLine = this._getIndexOnNextLine(
+ cursorLocation, textOnNextLine, widthOfCharsOnSameLineBeforeCursor, textLines);
+
+ return textOnSameLineAfterCursor.length + 1 + indexOnNextLine;
+ },
+
+ /**
+ * @private
+ */
+ _getIndexOnNextLine: function(cursorLocation, textOnNextLine, widthOfCharsOnSameLineBeforeCursor, textLines) {
+
+ var lineIndex = cursorLocation.lineIndex + 1,
+ widthOfNextLine = this._getWidthOfLine(this.ctx, lineIndex, textLines),
+ lineLeftOffset = this._getLineLeftOffset(widthOfNextLine),
+ widthOfCharsOnNextLine = lineLeftOffset,
+ indexOnNextLine = 0,
+ foundMatch;
+
+ for (var j = 0, jlen = textOnNextLine.length; j < jlen; j++) {
+
+ var _char = textOnNextLine[j],
+ widthOfChar = this._getWidthOfChar(this.ctx, _char, lineIndex, j);
+
+ widthOfCharsOnNextLine += widthOfChar;
+
+ if (widthOfCharsOnNextLine > widthOfCharsOnSameLineBeforeCursor) {
+
+ foundMatch = true;
+
+ var leftEdge = widthOfCharsOnNextLine - widthOfChar,
+ rightEdge = widthOfCharsOnNextLine,
+ offsetFromLeftEdge = Math.abs(leftEdge - widthOfCharsOnSameLineBeforeCursor),
+ offsetFromRightEdge = Math.abs(rightEdge - widthOfCharsOnSameLineBeforeCursor);
+
+ indexOnNextLine = offsetFromRightEdge < offsetFromLeftEdge ? j + 1 : j;
+
+ break;
+ }
+ }
+
+ // reached end
+ if (!foundMatch) {
+ indexOnNextLine = textOnNextLine.length;
+ }
+
+ return indexOnNextLine;
+ },
+
+ /**
+ * Moves cursor down
+ * @param {Event} e Event object
+ */
+ moveCursorDown: function(e) {
+
+ this.abortCursorAnimation();
+ this._currentCursorOpacity = 1;
+
+ var offset = this.getDownCursorOffset(e, this._selectionDirection === 'right');
+
+ if (e.shiftKey) {
+ this.moveCursorDownWithShift(offset);
+ }
+ else {
+ this.moveCursorDownWithoutShift(offset);
+ }
+
+ this.initDelayedCursor();
+ },
+
+ /**
+ * Moves cursor down without keeping selection
+ * @param {Number} offset
+ */
+ moveCursorDownWithoutShift: function(offset) {
+
+ this._selectionDirection = 'right';
+ this.selectionStart += offset;
+
+ if (this.selectionStart > this.text.length) {
+ this.selectionStart = this.text.length;
+ }
+ this.selectionEnd = this.selectionStart;
+ },
+
+ /**
+ * Moves cursor down while keeping selection
+ * @param {Number} offset
+ */
+ moveCursorDownWithShift: function(offset) {
+
+ if (this._selectionDirection === 'left' && (this.selectionStart !== this.selectionEnd)) {
+ this.selectionStart += offset;
+ this._selectionDirection = 'left';
+ return;
+ }
+ else {
+ this._selectionDirection = 'right';
+ this.selectionEnd += offset;
+
+ if (this.selectionEnd > this.text.length) {
+ this.selectionEnd = this.text.length;
+ }
+ }
+ },
+
+ getUpCursorOffset: function(e, isRight) {
+
+ var selectionProp = isRight ? this.selectionEnd : this.selectionStart,
+ cursorLocation = this.get2DCursorLocation(selectionProp);
+
+ // if on first line, up cursor goes to start of line
+ if (cursorLocation.lineIndex === 0 || e.metaKey) {
+ return selectionProp;
+ }
+
+ var textBeforeCursor = this.text.slice(0, selectionProp),
+ textOnSameLineBeforeCursor = textBeforeCursor.slice(textBeforeCursor.lastIndexOf('\n') + 1),
+ textOnPreviousLine = (textBeforeCursor.match(/\n?(.*)\n.*$/) || {})[1] || '',
+ textLines = this.text.split(this._reNewline),
+ _char,
+ widthOfSameLineBeforeCursor = this._getWidthOfLine(this.ctx, cursorLocation.lineIndex, textLines),
+ lineLeftOffset = this._getLineLeftOffset(widthOfSameLineBeforeCursor),
+ widthOfCharsOnSameLineBeforeCursor = lineLeftOffset,
+ lineIndex = cursorLocation.lineIndex;
+
+ for (var i = 0, len = textOnSameLineBeforeCursor.length; i < len; i++) {
+ _char = textOnSameLineBeforeCursor[i];
+ widthOfCharsOnSameLineBeforeCursor += this._getWidthOfChar(this.ctx, _char, lineIndex, i);
+ }
+
+ var indexOnPrevLine = this._getIndexOnPrevLine(
+ cursorLocation, textOnPreviousLine, widthOfCharsOnSameLineBeforeCursor, textLines);
+
+ return textOnPreviousLine.length - indexOnPrevLine + textOnSameLineBeforeCursor.length;
+ },
+
+ /**
+ * @private
+ */
+ _getIndexOnPrevLine: function(cursorLocation, textOnPreviousLine, widthOfCharsOnSameLineBeforeCursor, textLines) {
+
+ var lineIndex = cursorLocation.lineIndex - 1,
+ widthOfPreviousLine = this._getWidthOfLine(this.ctx, lineIndex, textLines),
+ lineLeftOffset = this._getLineLeftOffset(widthOfPreviousLine),
+ widthOfCharsOnPreviousLine = lineLeftOffset,
+ indexOnPrevLine = 0,
+ foundMatch;
+
+ for (var j = 0, jlen = textOnPreviousLine.length; j < jlen; j++) {
+
+ var _char = textOnPreviousLine[j],
+ widthOfChar = this._getWidthOfChar(this.ctx, _char, lineIndex, j);
+
+ widthOfCharsOnPreviousLine += widthOfChar;
+
+ if (widthOfCharsOnPreviousLine > widthOfCharsOnSameLineBeforeCursor) {
+
+ foundMatch = true;
+
+ var leftEdge = widthOfCharsOnPreviousLine - widthOfChar,
+ rightEdge = widthOfCharsOnPreviousLine,
+ offsetFromLeftEdge = Math.abs(leftEdge - widthOfCharsOnSameLineBeforeCursor),
+ offsetFromRightEdge = Math.abs(rightEdge - widthOfCharsOnSameLineBeforeCursor);
+
+ indexOnPrevLine = offsetFromRightEdge < offsetFromLeftEdge ? j : (j - 1);
+
+ break;
+ }
+ }
+
+ // reached end
+ if (!foundMatch) {
+ indexOnPrevLine = textOnPreviousLine.length - 1;
+ }
+
+ return indexOnPrevLine;
+ },
+
+ /**
+ * Moves cursor up
+ * @param {Event} e Event object
+ */
+ moveCursorUp: function(e) {
+
+ this.abortCursorAnimation();
+ this._currentCursorOpacity = 1;
+
+ var offset = this.getUpCursorOffset(e, this._selectionDirection === 'right');
+
+ if (e.shiftKey) {
+ this.moveCursorUpWithShift(offset);
+ }
+ else {
+ this.moveCursorUpWithoutShift(offset);
+ }
+
+ this.initDelayedCursor();
+ },
+
+ /**
+ * Moves cursor up with shift
+ * @param {Number} offset
+ */
+ moveCursorUpWithShift: function(offset) {
+
+ if (this.selectionStart === this.selectionEnd) {
+ this.selectionStart -= offset;
+ }
+ else {
+ if (this._selectionDirection === 'right') {
+ this.selectionEnd -= offset;
+ this._selectionDirection = 'right';
+ return;
+ }
+ else {
+ this.selectionStart -= offset;
+ }
+ }
+
+ if (this.selectionStart < 0) {
+ this.selectionStart = 0;
+ }
+
+ this._selectionDirection = 'left';
+ },
+
+ /**
+ * Moves cursor up without shift
+ * @param {Number} offset
+ */
+ moveCursorUpWithoutShift: function(offset) {
+ if (this.selectionStart === this.selectionEnd) {
+ this.selectionStart -= offset;
+ }
+ if (this.selectionStart < 0) {
+ this.selectionStart = 0;
+ }
+ this.selectionEnd = this.selectionStart;
+
+ this._selectionDirection = 'left';
+ },
+
+ /**
+ * Moves cursor left
+ * @param {Event} e Event object
+ */
+ moveCursorLeft: function(e) {
+ if (this.selectionStart === 0 && this.selectionEnd === 0) return;
+
+ this.abortCursorAnimation();
+ this._currentCursorOpacity = 1;
+
+ if (e.shiftKey) {
+ this.moveCursorLeftWithShift(e);
+ }
+ else {
+ this.moveCursorLeftWithoutShift(e);
+ }
+
+ this.initDelayedCursor();
+ },
+
+ /**
+ * @private
+ */
+ _move: function(e, prop, direction) {
+ if (e.altKey) {
+ this[prop] = this['findWordBoundary' + direction](this[prop]);
+ }
+ else if (e.metaKey) {
+ this[prop] = this['findLineBoundary' + direction](this[prop]);
+ }
+ else {
+ this[prop] += (direction === 'Left' ? -1 : 1);
+ }
+ },
+
+ /**
+ * @private
+ */
+ _moveLeft: function(e, prop) {
+ this._move(e, prop, 'Left');
+ },
+
+ /**
+ * @private
+ */
+ _moveRight: function(e, prop) {
+ this._move(e, prop, 'Right');
+ },
+
+ /**
+ * Moves cursor left without keeping selection
+ * @param {Event} e
+ */
+ moveCursorLeftWithoutShift: function(e) {
+ 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._moveLeft(e, 'selectionStart');
+ }
+ this.selectionEnd = this.selectionStart;
+ },
+
+ /**
+ * Moves cursor left while keeping selection
+ * @param {Event} e
+ */
+ moveCursorLeftWithShift: function(e) {
+ if (this._selectionDirection === 'right' && this.selectionStart !== this.selectionEnd) {
+ this._moveLeft(e, 'selectionEnd');
+ }
+ else {
+ this._selectionDirection = 'left';
+ this._moveLeft(e, 'selectionStart');
+
+ // increase selection by one if it's a newline
+ if (this.text.charAt(this.selectionStart) === '\n') {
+ this.selectionStart--;
+ }
+ if (this.selectionStart < 0) {
+ this.selectionStart = 0;
+ }
+ }
+ },
+
+ /**
+ * Moves cursor right
+ * @param {Event} e Event object
+ */
+ moveCursorRight: function(e) {
+ if (this.selectionStart >= this.text.length && this.selectionEnd >= this.text.length) return;
+
+ this.abortCursorAnimation();
+ this._currentCursorOpacity = 1;
+
+ if (e.shiftKey) {
+ this.moveCursorRightWithShift(e);
+ }
+ else {
+ this.moveCursorRightWithoutShift(e);
+ }
+
+ this.initDelayedCursor();
+ },
+
+ /**
+ * Moves cursor right while keeping selection
+ * @param {Event} e
+ */
+ moveCursorRightWithShift: function(e) {
+ if (this._selectionDirection === 'left' && this.selectionStart !== this.selectionEnd) {
+ this._moveRight(e, 'selectionStart');
+ }
+ else {
+ this._selectionDirection = 'right';
+ this._moveRight(e, 'selectionEnd');
+
+ // increase selection by one if it's a newline
+ if (this.text.charAt(this.selectionEnd - 1) === '\n') {
+ this.selectionEnd++;
+ }
+ if (this.selectionEnd > this.text.length) {
+ this.selectionEnd = this.text.length;
+ }
+ }
+ },
+
+ /**
+ * Moves cursor right without keeping selection
+ * @param {Event} e
+ */
+ moveCursorRightWithoutShift: function(e) {
+ this._selectionDirection = 'right';
+
+ if (this.selectionStart === this.selectionEnd) {
+ this._moveRight(e, 'selectionStart');
+ this.selectionEnd = this.selectionStart;
+ }
+ else {
+ this.selectionEnd += this.getNumNewLinesInSelectedText();
+ if (this.selectionEnd > this.text.length) {
+ this.selectionEnd = this.text.length;
+ }
+ this.selectionStart = this.selectionEnd;
+ }
+ },
+
+ /**
+ * Inserts a character where cursor is (replacing selection if one exists)
+ */
+ removeChars: function(e) {
+ if (this.selectionStart === this.selectionEnd) {
+ this._removeCharsNearCursor(e);
+ }
+ else {
+ this._removeCharsFromTo(this.selectionStart, this.selectionEnd);
+ }
+
+ this.selectionEnd = this.selectionStart;
+
+ this._removeExtraneousStyles();
+
+ if (this.canvas) {
+ // TODO: double renderAll gets rid of text box shift happenning sometimes
+ // need to find out what exactly causes it and fix it
+ this.canvas.renderAll().renderAll();
+ }
+
+ this.setCoords();
+ this.fire('changed');
+ this.canvas && this.canvas.fire('text:changed', { target: this });
+ },
+
+ /**
+ * @private
+ */
+ _removeCharsNearCursor: function(e) {
+ if (this.selectionStart !== 0) {
+
+ if (e.metaKey) {
+ // remove all till the start of current line
+ var leftLineBoundary = this.findLineBoundaryLeft(this.selectionStart);
+
+ this._removeCharsFromTo(leftLineBoundary, this.selectionStart);
+ this.selectionStart = 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.selectionStart = leftWordBoundary;
+ }
+ else {
+ var isBeginningOfLine = this.text.slice(this.selectionStart - 1, this.selectionStart) === '\n';
+ this.removeStyleObject(isBeginningOfLine);
+
+ this.selectionStart--;
+ this.text = this.text.slice(0, this.selectionStart) +
+ this.text.slice(this.selectionStart + 1);
+ }
+ }
+ }
+});
+
+/* _TO_SVG_START_ */
+fabric.util.object.extend(fabric.IText.prototype, /** @lends fabric.IText.prototype */ {
+
+ /**
+ * @private
+ */
+ _setSVGTextLineText: function(textLine, lineIndex, textSpans, lineHeight, lineTopOffsetMultiplier, textBgRects) {
+ if (!this.styles[lineIndex]) {
+ this.callSuper('_setSVGTextLineText',
+ textLine, lineIndex, textSpans, lineHeight, lineTopOffsetMultiplier);
+ }
+ else {
+ this._setSVGTextLineChars(
+ textLine, lineIndex, textSpans, lineHeight, lineTopOffsetMultiplier, textBgRects);
+ }
+ },
+
+ /**
+ * @private
+ */
+ _setSVGTextLineChars: function(textLine, lineIndex, textSpans, lineHeight, lineTopOffsetMultiplier, textBgRects) {
+
+ var yProp = lineIndex === 0 || this.useNative ? 'y' : 'dy',
+ chars = textLine.split(''),
+ charOffset = 0,
+ lineLeftOffset = this._getSVGLineLeftOffset(lineIndex),
+ lineTopOffset = this._getSVGLineTopOffset(lineIndex),
+ heightOfLine = this._getHeightOfLine(this.ctx, lineIndex);
+
+ for (var i = 0, len = chars.length; i < len; i++) {
+ var styleDecl = this.styles[lineIndex][i] || { };
+
+ textSpans.push(
+ this._createTextCharSpan(
+ chars[i], styleDecl, lineLeftOffset, lineTopOffset, yProp, charOffset));
+
+ var charWidth = this._getWidthOfChar(this.ctx, chars[i], lineIndex, i);
+
+ if (styleDecl.textBackgroundColor) {
+ textBgRects.push(
+ this._createTextCharBg(
+ styleDecl, lineLeftOffset, lineTopOffset, heightOfLine, charWidth, charOffset));
+ }
+
+ charOffset += charWidth;
+ }
+ },
+
+ /**
+ * @private
+ */
+ _getSVGLineLeftOffset: function(lineIndex) {
+ return (this._boundaries && this._boundaries[lineIndex])
+ ? fabric.util.toFixed(this._boundaries[lineIndex].left, 2)
+ : 0;
+ },
+
+ /**
+ * @private
+ */
+ _getSVGLineTopOffset: function(lineIndex) {
+ var lineTopOffset = 0;
+ for (var j = 0; j <= lineIndex; j++) {
+ lineTopOffset += this._getHeightOfLine(this.ctx, j);
+ }
+ return lineTopOffset - this.height / 2;
+ },
+
+ /**
+ * @private
+ */
+ _createTextCharBg: function(styleDecl, lineLeftOffset, lineTopOffset, heightOfLine, charWidth, charOffset) {
+ return [
+ ''
+ ].join('');
+ },
+
+ /**
+ * @private
+ */
+ _createTextCharSpan: function(_char, styleDecl, lineLeftOffset, lineTopOffset, yProp, charOffset) {
+
+ var fillStyles = this.getSvgStyles.call(fabric.util.object.extend({
+ visible: true,
+ fill: this.fill,
+ stroke: this.stroke,
+ type: 'text'
+ }, styleDecl));
+
+ return [
+ '',
+
+ fabric.util.string.escapeXml(_char),
+ ''
+ ].join('');
+ }
+});
+/* _TO_SVG_END_ */
+
+
+(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.port === 443 ) ? 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);
+ }
+ });
+
+ 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) {
+ 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);
+ }
+ 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) {
+ eval(body);
+ callback && callback();
+ });
+ };
+
+ fabric.Image.fromObject = function(object, callback) {
+ fabric.util.loadImage(object.src, function(img) {
+ var oImg = new fabric.Image(img);
+
+ oImg._initConfig(object);
+ oImg._initFilters(object, function(filters) {
+ oImg.filters = filters || [ ];
+ callback && callback(oImg);
+ });
+ });
+ };
+
+ /**
+ * Only available when running fabric on node.js
+ * @param width Canvas width
+ * @param height Canvas height
+ * @param {Object} options to pass to FabricCanvas.
+ * @param {Object} 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);
+
+ // jsdom doesn't create style on canvas element, so here be temp. workaround
+ canvasEl.style = { };
+
+ canvasEl.width = nodeCanvas.width;
+ canvasEl.height = nodeCanvas.height;
+
+ var FabricCanvas = fabric.Canvas || fabric.StaticCanvas,
+ fabricCanvas = new FabricCanvas(canvasEl, options);
+
+ fabricCanvas.contextContainer = nodeCanvas.getContext('2d');
+ fabricCanvas.nodeCanvas = nodeCanvas;
+ fabricCanvas.Font = Canvas.Font;
+
+ return fabricCanvas;
+ };
+
+ /** @ignore */
+ fabric.StaticCanvas.prototype.createPNGStream = function() {
+ return this.nodeCanvas.createPNGStream();
+ };
+
+ fabric.StaticCanvas.prototype.createJPEGStream = function(opts) {
+ return this.nodeCanvas.createJPEGStream(opts);
+ };
+
+ var origSetWidth = fabric.StaticCanvas.prototype.setWidth;
+ fabric.StaticCanvas.prototype.setWidth = function(width) {
+ origSetWidth.call(this, width);
+ this.nodeCanvas.width = width;
+ return this;
+ };
+ if (fabric.Canvas) {
+ fabric.Canvas.prototype.setWidth = fabric.StaticCanvas.prototype.setWidth;
+ }
+
+ var origSetHeight = fabric.StaticCanvas.prototype.setHeight;
+ fabric.StaticCanvas.prototype.setHeight = function(height) {
+ origSetHeight.call(this, height);
+ this.nodeCanvas.height = height;
+ return this;
+ };
+ if (fabric.Canvas) {
+ fabric.Canvas.prototype.setHeight = fabric.StaticCanvas.prototype.setHeight;
+ }
+
+})();
+
+
+/* Footer for requirejs AMD support */
+
window.fabric = fabric;
+// make sure exports.fabric is always defined when used as 'global' later scopes
var exports = exports || {};
-
exports.fabric = fabric;
-if (typeof define === "function" && define.amd) {
- define([], function() {
- return fabric;
- });
-}
\ No newline at end of file
+if (typeof define === 'function' && define.amd) {
+ define([], function() { return fabric });
+}
+
diff --git a/package.json b/package.json
index ab88eb81..0ad5413f 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
"name": "fabric",
"description": "Object model for HTML5 canvas, and SVG-to-canvas parser. Backed by jsdom and node-canvas.",
"homepage": "http://fabricjs.com/",
- "version": "1.4.6",
+ "version": "1.4.7",
"author": "Juriy Zaytsev ",
"keywords": [
"canvas",
@@ -14,6 +14,11 @@
"HTML5",
"object model"
],
+ "browser" : {
+ "canvas" : false,
+ "jsdom": false,
+ "xmldom": false
+ },
"repository": {
"type": "git",
"url": "https://github.com/kangax/fabric.js"
@@ -27,17 +32,17 @@
"test": "node test.js && jshint src"
},
"dependencies": {
- "canvas": "1.0.x",
- "jsdom": "0.10.x",
+ "canvas": "1.1.x",
+ "jsdom": "0.11.x",
"xmldom": "0.1.x"
},
"devDependencies": {
"execSync": "0.0.x",
"uglify-js": "2.4.x",
- "jscs": "1.4.x",
+ "jscs": "1.5.x",
"jshint": "2.5.x",
"qunit": "0.6.x",
- "istanbul": "0.2.6"
+ "istanbul": "0.2.x"
},
"engines": {
"node": ">=0.4.0 && <1.0.0"
diff --git a/src/brushes/pencil_brush.class.js b/src/brushes/pencil_brush.class.js
index 5d6b00ec..09fc93f3 100644
--- a/src/brushes/pencil_brush.class.js
+++ b/src/brushes/pencil_brush.class.js
@@ -148,7 +148,7 @@
this.box = this.getPathBoundingBox(this._points);
return this.convertPointsToSVGPath(
this._points, this.box.minx, this.box.maxx, this.box.miny, this.box.maxy);
- },
+ },
/**
* Returns bounding box of a path based on given points
diff --git a/src/canvas.class.js b/src/canvas.class.js
index d28273cc..90bb6342 100644
--- a/src/canvas.class.js
+++ b/src/canvas.class.js
@@ -787,9 +787,8 @@
// Cache all targets where their bounding box contains point.
var target,
- pointer = this.getPointer(e, true);
-
- var i = this._objects.length;
+ pointer = this.getPointer(e, true),
+ i = this._objects.length;
while (i--) {
if (this._checkTarget(e, this._objects[i], pointer)){
diff --git a/src/filters/multiply_filter.class.js b/src/filters/multiply_filter.class.js
index 3361ff29..8a9bcf95 100644
--- a/src/filters/multiply_filter.class.js
+++ b/src/filters/multiply_filter.class.js
@@ -59,10 +59,9 @@
source = new fabric.Color(this.color).getSource();
for (i = 0; i < iLen; i+=4) {
- data[i] *= source[0]/255;
- data[i + 1] *= source[1]/255;
- data[i + 2] *= source[2]/255;
-
+ data[i] *= source[0] / 255;
+ data[i + 1] *= source[1] / 255;
+ data[i + 2] *= source[2] / 255;
}
context.putImageData(imageData, 0, 0);
diff --git a/src/mixins/canvas_events.mixin.js b/src/mixins/canvas_events.mixin.js
index a469bc4c..353b5abf 100644
--- a/src/mixins/canvas_events.mixin.js
+++ b/src/mixins/canvas_events.mixin.js
@@ -153,7 +153,7 @@
if (e.type === 'touchstart') {
// Unbind mousedown to prevent double triggers from touch devices
- removeListener(this.upperCanvasEl, 'mousedown', this._onMouseDown);
+ removeListener(this.upperCanvasEl, 'mousedown', this._onMouseDown);
}
else {
addListener(fabric.document, 'mouseup', this._onMouseUp);
diff --git a/src/mixins/itext.svg_export.js b/src/mixins/itext.svg_export.js
index 41299b4f..bf75214f 100644
--- a/src/mixins/itext.svg_export.js
+++ b/src/mixins/itext.svg_export.js
@@ -108,7 +108,7 @@ fabric.util.object.extend(fabric.IText.prototype, /** @lends fabric.IText.protot
fabric.util.string.escapeXml(_char),
''
- ].join('');
+ ].join('');
}
});
/* _TO_SVG_END_ */
diff --git a/src/mixins/itext_behavior.mixin.js b/src/mixins/itext_behavior.mixin.js
index 32de02b5..d82e029a 100644
--- a/src/mixins/itext_behavior.mixin.js
+++ b/src/mixins/itext_behavior.mixin.js
@@ -156,6 +156,7 @@
selectAll: function() {
this.selectionStart = 0;
this.selectionEnd = this.text.length;
+ this.fire('selection:changed');
this.canvas && this.canvas.fire('text:selection:changed', { target: this });
},
diff --git a/src/mixins/itext_click_behavior.mixin.js b/src/mixins/itext_click_behavior.mixin.js
index 2f1f1ad8..9c2c6c24 100644
--- a/src/mixins/itext_click_behavior.mixin.js
+++ b/src/mixins/itext_click_behavior.mixin.js
@@ -238,10 +238,10 @@ fabric.util.object.extend(fabric.IText.prototype, /** @lends fabric.IText.protot
mouseOffset, prevWidth, width, charIndex + i, jlen);
}
- if (mouseOffset.y < height) {
- return this._getNewSelectionStartFromOffset(
- mouseOffset, prevWidth, width, charIndex + i, jlen, j);
- }
+ if (mouseOffset.y < height) {
+ return this._getNewSelectionStartFromOffset(
+ mouseOffset, prevWidth, width, charIndex + i, jlen, j);
+ }
}
// clicked somewhere after all chars, so set at the end
diff --git a/src/mixins/itext_key_behavior.mixin.js b/src/mixins/itext_key_behavior.mixin.js
index 60b502e5..72bbaa7e 100644
--- a/src/mixins/itext_key_behavior.mixin.js
+++ b/src/mixins/itext_key_behavior.mixin.js
@@ -13,6 +13,8 @@ fabric.util.object.extend(fabric.IText.prototype, /** @lends fabric.IText.protot
fabric.util.addListener(this.hiddenTextarea, 'keydown', this.onKeyDown.bind(this));
fabric.util.addListener(this.hiddenTextarea, 'keypress', this.onKeyPress.bind(this));
+ fabric.util.addListener(this.hiddenTextarea, 'copy', this.copy.bind(this));
+ fabric.util.addListener(this.hiddenTextarea, 'paste', this.paste.bind(this));
if (!this._clickHandlerInitialized && this.canvas) {
fabric.util.addListener(this.canvas.upperCanvasEl, 'click', this.onClick.bind(this));
@@ -38,8 +40,6 @@ fabric.util.object.extend(fabric.IText.prototype, /** @lends fabric.IText.protot
*/
_ctrlKeysMap: {
65: 'selectAll',
- 67: 'copy',
- 86: 'paste',
88: 'cut'
},
@@ -65,7 +65,6 @@ fabric.util.object.extend(fabric.IText.prototype, /** @lends fabric.IText.protot
return;
}
- e.preventDefault();
e.stopPropagation();
this.canvas && this.canvas.renderAll();
@@ -83,9 +82,17 @@ fabric.util.object.extend(fabric.IText.prototype, /** @lends fabric.IText.protot
/**
* Copies selected text
+ * @param {Event} e Event object
*/
- copy: function() {
- var selectedText = this.getSelectedText();
+ copy: function(e) {
+ var selectedText = this.getSelectedText(),
+ clipboardData = this._getClipboardData(e);
+
+ // Check for backward compatibility with old browsers
+ if (clipboardData) {
+ clipboardData.setData('text', selectedText);
+ }
+
this.copiedText = selectedText;
this.copiedStyles = this.getSelectionStyles(
this.selectionStart,
@@ -94,21 +101,45 @@ fabric.util.object.extend(fabric.IText.prototype, /** @lends fabric.IText.protot
/**
* Pastes text
+ * @param {Event} e Event object
*/
- paste: function() {
- if (this.copiedText) {
- this.insertChars(this.copiedText);
+ paste: function(e) {
+ var copiedText = null,
+ clipboardData = this._getClipboardData(e);
+
+ // Check for backward compatibility with old browsers
+ if (clipboardData) {
+ copiedText = clipboardData.getData('text');
+ } else {
+ copiedText = this.copiedText;
+ }
+
+ if (copiedText) {
+ this.insertChars(copiedText);
}
},
/**
* Cuts text
+ * @param {Event} e Event object
*/
cut: function(e) {
+ if (this.selectionStart === this.selectionEnd) {
+ return;
+ }
+
this.copy();
this.removeChars(e);
},
+ /**
+ * @private
+ * @param {Event} e Event object
+ */
+ _getClipboardData: function(e) {
+ return e && (e.clipboardData || fabric.window.clipboardData);
+ },
+
/**
* Handles keypress event
* @param {Event} e Event object
@@ -120,7 +151,6 @@ fabric.util.object.extend(fabric.IText.prototype, /** @lends fabric.IText.protot
this.insertChars(String.fromCharCode(e.which));
- e.preventDefault();
e.stopPropagation();
},
diff --git a/src/mixins/object_interactivity.mixin.js b/src/mixins/object_interactivity.mixin.js
index 30e5824a..ac1f6d60 100644
--- a/src/mixins/object_interactivity.mixin.js
+++ b/src/mixins/object_interactivity.mixin.js
@@ -18,7 +18,9 @@
* @return {String|Boolean} corner code (tl, tr, bl, br, etc.), or false if nothing is found
*/
_findTargetCorner: function(pointer) {
- if (!this.hasControls || !this.active) return false;
+ if (!this.hasControls || !this.active) {
+ return false;
+ }
var ex = pointer.x,
ey = pointer.y,
diff --git a/src/parser.js b/src/parser.js
index ff9ba93f..0b0e83d3 100644
--- a/src/parser.js
+++ b/src/parser.js
@@ -76,7 +76,7 @@
else if (attr === 'visible') {
value = (value === 'none' || value === 'hidden') ? false : true;
// display=none on parent element always takes precedence over child element
- if (parentAttributes.visible === false) {
+ if (parentAttributes && parentAttributes.visible === false) {
value = false;
}
}
@@ -354,13 +354,44 @@
if (ruleMatchesElement) {
for (var property in fabric.cssRules[rule]) {
- styles[property] = fabric.cssRules[rule][property];
+ var attr = normalizeAttr(property),
+ value = normalizeValue(attr, fabric.cssRules[rule][property]);
+ styles[attr] = value;
}
}
}
return styles;
}
+
+ /**
+ * @private
+ */
+ function parseUseDirectives(doc) {
+ var nodelist = doc.querySelectorAll("use");
+ for (var i = 0; i < nodelist.length; i++) {
+ var el = nodelist[i];
+ var xlink = el.getAttribute('xlink:href').substr(1);
+ var x = el.getAttribute('x') || 0;
+ var y = el.getAttribute('y') || 0;
+ var el2 = doc.getElementById(xlink).cloneNode(true);
+ var currentTrans = (el.getAttribute('transform') || '') + ' translate(' + x + ', ' + y + ')';
+ for (var j = 0, attrs = el.attributes, l = attrs.length; j < l; j++) {
+ var attr = attrs.item(j);
+ if (attr.nodeName !== 'x' && attr.nodeName !== 'y' && attr.nodeName !== 'xlink:href') {
+ if (attr.nodeName === 'transform') {
+ currentTrans = currentTrans + ' ' + attr.nodeValue;
+ } else {
+ el2.setAttribute(attr.nodeName, attr.nodeValue);
+ }
+ }
+ }
+ el2.setAttribute('transform', currentTrans);
+ el2.removeAttribute('id');
+ var pNode=el.parentNode;
+ pNode.replaceChild(el2, el);
+ }
+ }
/**
* Parses an SVG document, converts it to an array of corresponding fabric.* instances and passes them to a callback
@@ -401,9 +432,11 @@
return function(doc, callback, reviver) {
if (!doc) return;
-
- var startTime = new Date(),
- descendants = fabric.util.toArray(doc.getElementsByTagName('*'));
+ var startTime = new Date();
+
+ parseUseDirectives(doc);
+
+ var descendants = fabric.util.toArray(doc.getElementsByTagName('*'));
if (descendants.length === 0 && fabric.isLikelyNode) {
// we're likely in node, where "o3-xml" library fails to gEBTN("*")
@@ -462,7 +495,6 @@
fabric.gradientDefs = fabric.getGradientDefs(doc);
fabric.cssRules = fabric.getCSSRules(doc);
-
// Precedence of rules: style > class > attribute
fabric.parseElements(elements, function(instances) {
@@ -478,46 +510,46 @@
* Used for caching SVG documents (loaded via `fabric.Canvas#loadSVGFromURL`)
* @namespace
*/
- var svgCache = {
+ var svgCache = {
- /**
- * @param {String} name
- * @param {Function} callback
- */
- has: function (name, callback) {
- callback(false);
- },
+ /**
+ * @param {String} name
+ * @param {Function} callback
+ */
+ has: function (name, callback) {
+ callback(false);
+ },
- /**
- * @param {String} url
- * @param {Function} callback
- */
- get: function () {
- /* NOOP */
- },
+ /**
+ * @param {String} url
+ * @param {Function} callback
+ */
+ get: function () {
+ /* NOOP */
+ },
- /**
- * @param {String} url
- * @param {Object} object
- */
- set: function () {
- /* NOOP */
- }
- };
+ /**
+ * @param {String} url
+ * @param {Object} object
+ */
+ set: function () {
+ /* NOOP */
+ }
+ };
/**
* @private
*/
function _enlivenCachedObject(cachedObject) {
- var objects = cachedObject.objects,
- options = cachedObject.options;
+ var objects = cachedObject.objects,
+ options = cachedObject.options;
- objects = objects.map(function (o) {
- return fabric[capitalize(o.type)].fromObject(o);
- });
+ objects = objects.map(function (o) {
+ return fabric[capitalize(o.type)].fromObject(o);
+ });
- return ({ objects: objects, options: options });
+ return ({ objects: objects, options: options });
}
/**
@@ -774,7 +806,6 @@
loadSVGFromURL: function(url, callback, reviver) {
url = url.replace(/^\n\s*/, '').trim();
-
svgCache.has(url, function (hasUrl) {
if (hasUrl) {
svgCache.get(url, function (value) {
diff --git a/src/shadow.class.js b/src/shadow.class.js
index 47ac4d5e..7731f0ef 100644
--- a/src/shadow.class.js
+++ b/src/shadow.class.js
@@ -64,6 +64,7 @@
* @return {fabric.Shadow} thisArg
*/
initialize: function(options) {
+
if (typeof options === 'string') {
options = this._parseShadow(options);
}
diff --git a/src/shapes/circle.class.js b/src/shapes/circle.class.js
index 7abea87a..bdf1a6c6 100644
--- a/src/shapes/circle.class.js
+++ b/src/shapes/circle.class.js
@@ -103,8 +103,6 @@
// multiply by currently set alpha (the one that was set by path group where this object is contained, for example)
ctx.globalAlpha = this.group ? (ctx.globalAlpha * this.opacity) : this.opacity;
ctx.arc(noTransform ? this.left : 0, noTransform ? this.top : 0, this.radius, 0, piBy2, false);
- ctx.closePath();
-
this._renderFill(ctx);
this.stroke && this._renderStroke(ctx);
},
@@ -163,16 +161,24 @@
*/
fabric.Circle.fromElement = function(element, options) {
options || (options = { });
+
var parsedAttributes = fabric.parseAttributes(element, fabric.Circle.ATTRIBUTE_NAMES);
+
if (!isValidRadius(parsedAttributes)) {
throw new Error('value of `r` attribute is required and can not be negative');
}
- if ('left' in parsedAttributes) {
- parsedAttributes.left -= (options.width / 2) || 0;
+
+ if (!('left' in parsedAttributes)) {
+ parsedAttributes.left = 0;
}
- if ('top' in parsedAttributes) {
- parsedAttributes.top -= (options.height / 2) || 0;
+ if (!('top' in parsedAttributes)) {
+ parsedAttributes.top = 0
}
+ if (!('transformMatrix' in parsedAttributes)) {
+ parsedAttributes.left -= (options.width / 2);
+ parsedAttributes.top -= (options.height / 2);
+ }
+
var obj = new fabric.Circle(extend(parsedAttributes, options));
obj.cx = parseFloat(element.getAttribute('cx')) || 0;
diff --git a/src/shapes/ellipse.class.js b/src/shapes/ellipse.class.js
index 59c1c41f..e43d440b 100644
--- a/src/shapes/ellipse.class.js
+++ b/src/shapes/ellipse.class.js
@@ -111,15 +111,11 @@
ctx.beginPath();
ctx.save();
ctx.globalAlpha = this.group ? (ctx.globalAlpha * this.opacity) : this.opacity;
- if (this.transformMatrix && this.group) {
- ctx.translate(this.cx, this.cy);
- }
ctx.transform(1, 0, 0, this.ry/this.rx, 0, 0);
- ctx.arc(noTransform ? this.left : 0, noTransform ? this.top : 0, this.rx, 0, piBy2, false);
- ctx.restore();
-
+ ctx.arc(noTransform ? this.left : 0, noTransform ? this.top * this.rx/this.ry : 0, this.rx, 0, piBy2, false);
this._renderFill(ctx);
this._renderStroke(ctx);
+ ctx.restore();
},
/**
@@ -151,21 +147,22 @@
fabric.Ellipse.fromElement = function(element, options) {
options || (options = { });
- var parsedAttributes = fabric.parseAttributes(element, fabric.Ellipse.ATTRIBUTE_NAMES),
- cx = parsedAttributes.left,
- cy = parsedAttributes.top;
+ var parsedAttributes = fabric.parseAttributes(element, fabric.Ellipse.ATTRIBUTE_NAMES);
- if ('left' in parsedAttributes) {
- parsedAttributes.left -= (options.width / 2) || 0;
+ if (!('left' in parsedAttributes)) {
+ parsedAttributes.left = 0;
}
- if ('top' in parsedAttributes) {
- parsedAttributes.top -= (options.height / 2) || 0;
+ if (!('top' in parsedAttributes)) {
+ parsedAttributes.top = 0;
+ }
+ if (!('transformMatrix' in parsedAttributes)) {
+ parsedAttributes.left -= (options.width / 2);
+ parsedAttributes.top -= (options.height / 2);
}
-
var ellipse = new fabric.Ellipse(extend(parsedAttributes, options));
- ellipse.cx = cx || 0;
- ellipse.cy = cy || 0;
+ ellipse.cx = parseFloat(element.getAttribute('cx')) || 0;
+ ellipse.cy = parseFloat(element.getAttribute('cy')) || 0;
return ellipse;
};
diff --git a/src/shapes/image.class.js b/src/shapes/image.class.js
index 1f91357b..7a9b84db 100644
--- a/src/shapes/image.class.js
+++ b/src/shapes/image.class.js
@@ -168,10 +168,10 @@
* @param {CanvasRenderingContext2D} ctx Context to render on
*/
_renderDashedStroke: function(ctx) {
- var x = -this.width/2,
- y = -this.height/2,
- w = this.width,
- h = this.height;
+ var x = -this.width / 2,
+ y = -this.height / 2,
+ w = this.width,
+ h = this.height;
ctx.save();
this._setStrokeStyles(ctx);
@@ -331,13 +331,14 @@
* @param {CanvasRenderingContext2D} ctx Context to render on
*/
_render: function(ctx) {
- this._element && ctx.drawImage(
- this._element,
- -this.width / 2,
- -this.height / 2,
- this.width,
- this.height
- );
+ this._element &&
+ ctx.drawImage(
+ this._element,
+ -this.width / 2,
+ -this.height / 2,
+ this.width,
+ this.height
+ );
},
/**
diff --git a/src/shapes/itext.class.js b/src/shapes/itext.class.js
index ca66b3ec..8f891fef 100644
--- a/src/shapes/itext.class.js
+++ b/src/shapes/itext.class.js
@@ -9,6 +9,7 @@
* @mixes fabric.Observable
*
* @fires changed ("text:changed" when observing canvas)
+ * @fires selection:changed ("text:selection:changed" when observing canvas)
* @fires editing:entered ("text:editing:entered" when observing canvas)
* @fires editing:exited ("text:editing:exited" when observing canvas)
*
@@ -219,6 +220,7 @@
*/
setSelectionStart: function(index) {
if (this.selectionStart !== index) {
+ this.fire('selection:changed');
this.canvas && this.canvas.fire('text:selection:changed', { target: this });
}
this.selectionStart = index;
@@ -231,6 +233,7 @@
*/
setSelectionEnd: function(index) {
if (this.selectionEnd !== index) {
+ this.fire('selection:changed');
this.canvas && this.canvas.fire('text:selection:changed', { target: this });
}
this.selectionEnd = index;
@@ -356,6 +359,8 @@
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
};
@@ -695,6 +700,8 @@
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
);
diff --git a/src/shapes/object.class.js b/src/shapes/object.class.js
index e175dfb7..5c839cc2 100644
--- a/src/shapes/object.class.js
+++ b/src/shapes/object.class.js
@@ -1343,7 +1343,7 @@
* canvas.renderAll();
*/
setShadow: function(options) {
- return this.set('shadow', new fabric.Shadow(options));
+ return this.set('shadow', options ? new fabric.Shadow(options) : null);
},
/**
diff --git a/src/shapes/path.class.js b/src/shapes/path.class.js
index bf21bf7b..47895ce0 100644
--- a/src/shapes/path.class.js
+++ b/src/shapes/path.class.js
@@ -158,6 +158,8 @@
_render: function(ctx) {
var current, // current instruction
previous = null,
+ subpathStartX = 0,
+ subpathStartY = 0,
x = 0, // current x
y = 0, // current y
controlX = 0, // current control point x
@@ -167,8 +169,7 @@
tempControlX,
tempControlY,
l = -((this.width / 2) + this.pathOffset.x),
- t = -((this.height / 2) + this.pathOffset.y),
- methodName;
+ t = -((this.height / 2) + this.pathOffset.y);
for (var i = 0, len = this.path.length; i < len; ++i) {
@@ -211,21 +212,17 @@
case 'm': // moveTo, relative
x += current[1];
y += current[2];
- // draw a line if previous command was moveTo as well (otherwise, it will have no effect)
- methodName = (previous && (previous[0] === 'm' || previous[0] === 'M'))
- ? 'lineTo'
- : 'moveTo';
- ctx[methodName](x + l, y + t);
+ subpathStartX = x;
+ subpathStartY = y;
+ ctx.moveTo(x + l, y + t);
break;
case 'M': // moveTo, absolute
x = current[1];
y = current[2];
- // draw a line if previous command was moveTo as well (otherwise, it will have no effect)
- methodName = (previous && (previous[0] === 'm' || previous[0] === 'M'))
- ? 'lineTo'
- : 'moveTo';
- ctx[methodName](x + l, y + t);
+ subpathStartX = x;
+ subpathStartY = y;
+ ctx.moveTo(x + l, y + t);
break;
case 'c': // bezierCurveTo, relative
@@ -436,6 +433,8 @@
case 'z':
case 'Z':
+ x = subpathStartX;
+ y = subpathStartY;
ctx.closePath();
break;
}
@@ -466,7 +465,7 @@
this._setShadow(ctx);
this.clipTo && fabric.util.clipContext(this, ctx);
ctx.beginPath();
-
+ ctx.globalAlpha = this.group ? (ctx.globalAlpha * this.opacity) : this.opacity;
this._render(ctx);
this._renderFill(ctx);
this._renderStroke(ctx);
diff --git a/src/shapes/polygon.class.js b/src/shapes/polygon.class.js
index cf386e55..16283dc4 100644
--- a/src/shapes/polygon.class.js
+++ b/src/shapes/polygon.class.js
@@ -123,6 +123,7 @@
_render: function(ctx) {
var point;
ctx.beginPath();
+ ctx.globalAlpha = this.group ? (ctx.globalAlpha * this.opacity) : this.opacity;
ctx.moveTo(this.points[0].x, this.points[0].y);
for (var i = 0, len = this.points.length; i < len; i++) {
point = this.points[i];
diff --git a/src/static_canvas.class.js b/src/static_canvas.class.js
index 6df4e92c..6567023a 100644
--- a/src/static_canvas.class.js
+++ b/src/static_canvas.class.js
@@ -336,7 +336,7 @@
* @private
* @param {String} property Property to set ({@link fabric.StaticCanvas#backgroundImage|backgroundImage}
* or {@link fabric.StaticCanvas#overlayImage|overlayImage})
- * @param {(fabric.Image|String)} image fabric.Image instance or URL of an image to set background or overlay to
+ * @param {(fabric.Image|String|null)} image fabric.Image instance, URL of an image or null to set background or overlay to
* @param {Function} callback Callback to invoke when image is loaded and set as background or overlay
* @param {Object} [options] Optional options to set for the {@link fabric.Image|image}.
*/
@@ -359,11 +359,11 @@
* @private
* @param {String} property Property to set ({@link fabric.StaticCanvas#backgroundColor|backgroundColor}
* or {@link fabric.StaticCanvas#overlayColor|overlayColor})
- * @param {(Object|String)} color Object with pattern information or color value
+ * @param {(Object|String|null)} color Object with pattern information, color value or null
* @param {Function} [callback] Callback is invoked when color is set
*/
__setBgOverlayColor: function(property, color, callback) {
- if (color.source) {
+ if (color && color.source) {
var _this = this;
fabric.util.loadImage(color.source, function(img) {
_this[property] = new fabric.Pattern({
@@ -1022,7 +1022,6 @@
}
}
-
return data;
},
diff --git a/src/util/arc.js b/src/util/arc.js
index 550e344f..5c5dfde9 100644
--- a/src/util/arc.js
+++ b/src/util/arc.js
@@ -66,10 +66,12 @@
rx = Math.abs(rx);
ry = Math.abs(ry);
- var px = cosTh * (ox - x) * 0.5 + sinTh * (oy - y) * 0.5,
- py = cosTh * (oy - y) * 0.5 - sinTh * (ox - x) * 0.5,
+ var px = cosTh * (ox - x) + sinTh * (oy - y),
+ py = cosTh * (oy - y) - sinTh * (ox - x),
pl = (px * px) / (rx * rx) + (py * py) / (ry * ry);
+ pl *= 0.25;
+
if (pl > 1) {
pl = Math.sqrt(pl);
rx *= pl;
@@ -98,20 +100,26 @@
return segmentToBezierCache[argsString];
}
- var a00 = cosTh * rx,
+ var sinTh0 = Math.sin(th0),
+ cosTh0 = Math.cos(th0),
+ sinTh1 = Math.sin(th1),
+ cosTh1 = Math.cos(th1),
+
+ a00 = cosTh * rx,
a01 = -sinTh * ry,
a10 = sinTh * rx,
a11 = cosTh * ry,
- thHalf = 0.5 * (th1 - th0),
- t = (8 / 3) * Math.sin(thHalf * 0.5) *
- Math.sin(thHalf * 0.5) / Math.sin(thHalf),
+ thHalf = 0.25 * (th1 - th0),
- x1 = cx + Math.cos(th0) - t * Math.sin(th0),
- y1 = cy + Math.sin(th0) + t * Math.cos(th0),
- x3 = cx + Math.cos(th1),
- y3 = cy + Math.sin(th1),
- x2 = x3 + t * Math.sin(th1),
- y2 = y3 - t * Math.cos(th1);
+ t = (8 / 3) * Math.sin(thHalf) *
+ Math.sin(thHalf) / Math.sin(thHalf * 2),
+
+ x1 = cx + cosTh0 - t * sinTh0,
+ y1 = cy + sinTh0 + t * cosTh0,
+ x3 = cx + cosTh1,
+ y3 = cy + sinTh1,
+ x2 = x3 + t * sinTh1,
+ y2 = y3 - t * cosTh1;
segmentToBezierCache[argsString] = [
a00 * x1 + a01 * y1, a10 * x1 + a11 * y1,
@@ -138,7 +146,6 @@
ex = coords[5],
ey = coords[6],
segs = arcToSegments(ex, ey, rx, ry, large, sweep, rot, x, y);
-
for (var i = 0; i < segs.length; i++) {
var bez = segmentToBezier.apply(this, segs[i]);
ctx.bezierCurveTo.apply(ctx, bez);
diff --git a/src/util/dom_event.js b/src/util/dom_event.js
index 5ec9c097..3941cf31 100644
--- a/src/util/dom_event.js
+++ b/src/util/dom_event.js
@@ -9,7 +9,9 @@
t, i, len = methodNames.length;
for (i = 0; i < len; i++) {
t = typeof object[methodNames[i]];
- if (!(/^(?:function|object|unknown)$/).test(t)) return false;
+ if (!(/^(?:function|object|unknown)$/).test(t)) {
+ return false;
+ }
}
return true;
}
diff --git a/src/util/lang_class.js b/src/util/lang_class.js
index 6b3bf813..67995921 100644
--- a/src/util/lang_class.js
+++ b/src/util/lang_class.js
@@ -4,7 +4,9 @@
IS_DONTENUM_BUGGY = (function(){
for (var p in { toString: 1 }) {
- if (p === 'toString') return false;
+ if (p === 'toString') {
+ return false;
+ }
}
return true;
})(),
diff --git a/test/unit/object.js b/test/unit/object.js
index b8f79e49..984a55c4 100644
--- a/test/unit/object.js
+++ b/test/unit/object.js
@@ -1075,6 +1075,11 @@ test('toDataURL & reference to canvas', function() {
equal(object.shadow.blur, 10);
equal(object.shadow.offsetX, 5);
equal(object.shadow.offsetY, 15);
+
+ equal(object.setShadow(null), object, 'should be chainable');
+ ok(!(object.shadow instanceof fabric.Shadow));
+ equal(object.shadow, null);
+
});
test('set shadow', function() {
diff --git a/test/unit/path.js b/test/unit/path.js
index e596b883..90ba262e 100644
--- a/test/unit/path.js
+++ b/test/unit/path.js
@@ -224,6 +224,20 @@
});
});
+ asyncTest('multiple M/m commands preserved as M/m commands', function() {
+ var el = getPathElement('M100 100 M 200 200 M150 50 m 300 300 m 400 -50 m 50 100');
+ fabric.Path.fromElement(el, function(obj) {
+
+ deepEqual(obj.path[0], ['M', 100, 100]);
+ deepEqual(obj.path[1], ['M', 200, 200]);
+ deepEqual(obj.path[2], ['M', 150, 50]);
+ deepEqual(obj.path[3], ['m', 300, 300]);
+ deepEqual(obj.path[4], ['m', 400, -50]);
+ deepEqual(obj.path[5], ['m', 50, 100]);
+ start();
+ });
+ });
+
asyncTest('compressed path commands', function() {
var el = getPathElement('M56.224 84.12c-.047.132-.138.221-.322.215.046-.131.137-.221.322-.215z');
fabric.Path.fromElement(el, function(obj) {