'
);
},
/**
* @private
* @param {CanvasRenderingContext2D} ctx Context to render on
*/
_render: function (ctx) {
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._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} chars Chars to render
* @param {Number} left Left position of text
* @param {Number} top Top position of text
*/
_renderChars: function (method, ctx, chars, left, top) {
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.strokeWidth === 0) &&
!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
*/
render: function (ctx, noTransform) {
// do not render if object is not visible
if (!this.visible) return;
ctx.save();
this._transform(ctx, noTransform);
var m = this.transformMatrix;
var isInPathGroup = this.group && this.group.type === "path-group";
if (isInPathGroup) {
ctx.translate(-this.group.width / 2, -this.group.height / 2);
}
if (m) {
ctx.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
}
if (isInPathGroup) {
ctx.translate(this.left, this.top);
}
this._render(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 = "left";
}
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
*/
var offX = 0;
if (text.originX === "left") {
offX = text.getWidth() / 2;
}
if (text.originX === "right") {
offX = -text.getWidth() / 2;
}
text.set({
left: text.getLeft() + offX,
top: text.getTop() - text.getHeight() / 2
});
return text;
};
/* _FROM_SVG_END_ */
/**
* Returns fabric.Text instance from an object representation
* @static
* @memberOf fabric.Text
* @param {Object} object Object to create an instance from
* @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) Events are also fired with "text:"
* prefix when observing canvas.
* @class fabric.IText
* @extends fabric.Text
* @mixes fabric.Observable
*
* @fires changed
* @fires selection:changed
* @fires editing:entered
* @fires editing:exited
*
* @return {fabric.IText} thisArg
* @see {@link fabric.IText#initialize} for constructor definition
*
* Supported key combinations:
*
* Move cursor: left, right, up, down
* Select character: shift + left, shift + right
* Select text vertically: shift + up, shift + down
* Move cursor by word: alt + left, alt + right
* Select words: shift + alt + left, shift + alt + right
* Move cursor to line start/end: cmd + left, cmd + right
* 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.fire("selection:changed");
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.fire("selection:changed");
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,
fontWeight: (style && style.fontWeight) || this.fontWeight,
fontStyle: (style && style.fontStyle) || this.fontStyle,
stroke: (style && style.stroke) || this.stroke,
strokeWidth: (style && style.strokeWidth) || this.strokeWidth
};
},
/**
* Returns fontSize of char at the current cursor
* @param {Number} lineIndex Line index
* @param {Number} charIndex Char index
* @return {Number} Character font size
*/
getCurrentCharFontSize: function (lineIndex, charIndex) {
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);
}
if (j < start.charIndex) {
lineOffset += this._getWidthOfChar(ctx, textLines[i][j], i, j);
}
}
} else if (i > startLine && i < endLine) {
boxWidth += this._getCachedLineWidth(i, textLines) || 5;
} else if (i === endLine) {
for (var j2 = 0, j2len = end.charIndex; j2 < j2len; j2++) {
boxWidth += this._getWidthOfChar(ctx, textLines[i][j2], i, j2);
}
}
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 Content of the line
* @param {Number} left Left coordinate
* @param {Number} top Top coordinate
*/
_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 {String} method
* @param {CanvasRenderingContext2D} ctx Context to render on
* @param {Number} lineIndex
* @param {Number} i
* @param {String} _char
* @param {Number} left Left coordinate
* @param {Number} top Top coordinate
* @param {Number} lineHeight Height of the line
*/
_renderChar: function (
method,
ctx,
lineIndex,
i,
_char,
left,
top,
lineHeight
) {
var 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.fontWeight !== thisStyle.fontWeight ||
prevStyle.fontStyle !== thisStyle.fontStyle ||
prevStyle.stroke !== thisStyle.stroke ||
prevStyle.strokeWidth !== thisStyle.strokeWidth
);
},
/**
* @private
* @param {CanvasRenderingContext2D} ctx Context to render on
*/
_renderCharDecoration: function (
ctx,
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
* @param {Array} textLines Array of all text lines
*/
_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
*/
_getTopOffset: function () {
var topOffset = fabric.Text.prototype._getTopOffset.call(this);
return topOffset - this.fontSize / this._fontSizeFraction;
},
/**
* This method is overwritten to account for different top offset
* @private
*/
_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
* @method toObject
* @param {Array} [propertiesToInclude] Any properties that you might want to additionally include in the output
* @return {Object} object representation of an instance
*/
toObject: function (propertiesToInclude) {
return fabric.util.object.extend(
this.callSuper("toObject", propertiesToInclude),
{
styles: clone(this.styles)
}
);
}
}
);
/**
* 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.fire("selection:changed");
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} startFrom Current selection index
* @return {Number} New selection index
*/
findLineBoundaryLeft: function (startFrom) {
var offset = 0,
index = startFrom - 1;
while (!/\n/.test(this.text.charAt(index)) && index > -1) {
offset++;
index--;
}
return startFrom - offset;
},
/**
* Find new selection index representing end of current line according to current selection index
* @param {Number} startFrom Current selection index
* @return {Number} New selection index
*/
findLineBoundaryRight: function (startFrom) {
var offset = 0,
index = startFrom;
while (
!/\n/.test(this.text.charAt(index)) &&
index < this.text.length
) {
offset++;
index++;
}
return startFrom + offset;
},
/**
* Returns number of newlines in selected text
* @return {Number} Number of newlines in selected text
*/
getNumNewLinesInSelectedText: function () {
var selectedText = this.getSelectedText(),
numNewLines = 0;
for (
var i = 0, 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
* @return {Number} Index of the beginning or end of a word
*/
searchWordBoundary: function (selectionStart, direction) {
var index = this._reSpace.test(this.text.charAt(selectionStart))
? selectionStart - 1
: selectionStart,
_char = this.text.charAt(index),
reNonWord = /[ \n\.,;!\?\-]/;
while (
!reNonWord.test(_char) &&
index > 0 &&
index < this.text.length
) {
index += direction;
_char = this.text.charAt(index);
}
if (reNonWord.test(_char) && _char !== "\n") {
index += direction === 1 ? 0 : 1;
}
return index;
},
/**
* Selects a word based on the index
* @param {Number} selectionStart Index of a character
*/
selectWord: function (selectionStart) {
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 {Event} e Event object
*/
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
* @return {Object} Coordinates of a pointer (x, y)
*/
_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
* @return {Object} Clipboard data 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
* @param {Event} e Event object
* @param {Boolean} isRight
* @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;
}
}
},
/**
* @param {Event} e Event object
* @param {Boolean} isRight
* @return {Number}
*/
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 Event object
*/
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)
* @param {Event} e Event object
*/
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
* @param {Event} e Event object
*/
_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;
}
})();