fabric 5.4.0-browser → 5.4.1-browser

package/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": "5.4.0-browser",
+	"version": "5.4.1-browser",
 	"author": "Juriy Zaytsev <kangax@gmail.com>",
 	"contributors": [
 		{

package/src/mixins/itext.svg_export.js

@@ -1,6 +1,9 @@
 /* _TO_SVG_START_ */
 (function() {
   var toFixed = fabric.util.toFixed,
+      radiansToDegrees = fabric.util.radiansToDegrees,
+      calcRotateMatrix = fabric.util.calcRotateMatrix,
+      transformPoint = fabric.util.transformPoint,
       multipleSpacesRegex = /  +/g;
 
   fabric.util.object.extend(fabric.Text.prototype, /** @lends fabric.Text.prototype */ {
@@ -22,10 +25,20 @@
      * @return {String} svg representation of an instance
      */
     toSVG: function(reviver) {
-      return this._createBaseSVGMarkup(
+      var textSvg = this._createBaseSVGMarkup(
         this._toSVG(),
         { reviver: reviver, noStyle: true, withShadow: true }
       );
+      if (this.path) {
+        return (
+          textSvg +
+          this._createBaseSVGMarkup(this.path._toSVG(), {
+            reviver: reviver,
+            withShadow: true,
+          })
+        );
+      }
+      return textSvg;
     },
 
     /**
@@ -91,19 +104,31 @@
     /**
      * @private
      */
-    _createTextCharSpan: function(_char, styleDecl, left, top) {
+    _createTextCharSpan: function(_char, styleDecl, left, top, charBox) {
       var shouldUseWhitespace = _char !== _char.trim() || _char.match(multipleSpacesRegex),
           styleProps = this.getSvgSpanStyles(styleDecl, shouldUseWhitespace),
           fillStyles = styleProps ? 'style="' + styleProps + '"' : '',
           dy = styleDecl.deltaY, dySpan = '',
-          NUM_FRACTION_DIGITS = fabric.Object.NUM_FRACTION_DIGITS;
+          NUM_FRACTION_DIGITS = fabric.Object.NUM_FRACTION_DIGITS,
+          angleAttr = '';
       if (dy) {
         dySpan = ' dy="' + toFixed(dy, NUM_FRACTION_DIGITS) + '" ';
       }
+      if (charBox.renderLeft !== undefined) {
+        var angle = charBox.angle;
+        angleAttr = ' rotate="' + toFixed(radiansToDegrees(angle), fabric.Object.NUM_FRACTION_DIGITS) + '" ';
+        var wBy2 = charBox.width / 2,
+            m = calcRotateMatrix({ angle: radiansToDegrees(angle) });
+        m[4] = charBox.renderLeft;
+        m[5] = charBox.renderTop;
+        var renderPoint = transformPoint({ x: -wBy2, y: 0 }, m);
+        left = renderPoint.x;
+        top = renderPoint.y;
+      }
       return [
         '<tspan x="', toFixed(left, NUM_FRACTION_DIGITS), '" y="',
         toFixed(top, NUM_FRACTION_DIGITS), '" ', dySpan,
-        fillStyles, '>',
+        fillStyles, angleAttr, '>',
         fabric.util.string.escapeXml(_char),
         '</tspan>'
       ].join('');
@@ -123,7 +148,7 @@
 
       textTopOffset += lineHeight * (1 - this._fontSizeFraction) / this.lineHeight;
       for (var i = 0, len = line.length - 1; i <= len; i++) {
-        timeToRender = i === len || this.charSpacing;
+        timeToRender = i === len || this.charSpacing || this.path;
         charsToRender += line[i];
         charBox = this.__charBounds[lineIndex][i];
         if (boxWidth === 0) {
@@ -146,7 +171,7 @@
         }
         if (timeToRender) {
           style = this._getStyleDeclaration(lineIndex, i) || { };
-          textSpans.push(this._createTextCharSpan(charsToRender, style, textLeftOffset, textTopOffset));
+          textSpans.push(this._createTextCharSpan(charsToRender, style, textLeftOffset, textTopOffset, charBox));
           charsToRender = '';
           actualStyle = nextStyle;
           textLeftOffset += boxWidth;