refactor(): Properly include the text on a path hack into the dimensi…

…ons calculations. still an hack (#10355)

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## [5.5.0]
+
+- refactor() Possibly breaking: Include text line height in text on a path size calculation to avoid cut off from cache. [`#10355`](https://github.com/fabricjs/fabric.js/pull/10355)
+
 ## [5.4.2]
 
 - fix() Use correct Path context when creating the svg for the path [`#10276`](https://github.com/fabricjs/fabric.js/pull/10276)

dist/fabric.js

@@ -1,7 +1,7 @@
 /* build: `node build.js modules=ALL exclude=gestures,accessors,erasing requirejs minifier=uglifyjs` */
 /*! Fabric.js Copyright 2008-2015, Printio (Juriy Zaytsev, Maxim Chernyak) */
 
-var fabric = fabric || { version: '5.4.1' };
+var fabric = fabric || { version: '5.4.2' };
 if (typeof exports !== 'undefined') {
   exports.fabric = fabric;
 }
@@ -15225,12 +15225,6 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.Stati
           additionalHeight = height * 0.1;
         }
       }
-      if (this instanceof fabric.Text && this.path) {
-        shouldRedraw = true;
-        shouldResizeCanvas = true;
-        additionalWidth += this.getHeightOfLine(0) * this.zoomX;
-        additionalHeight += this.getHeightOfLine(0) * this.zoomY;
-      }
       if (shouldRedraw) {
         if (shouldResizeCanvas) {
           canvas.width = Math.ceil(width + additionalWidth);
@@ -26337,8 +26331,10 @@ fabric.Image.filters.BaseFilter.fromObject = function(object, callback) {
       this._splitText();
       this._clearCache();
       if (this.path) {
-        this.width = this.path.width;
-        this.height = this.path.height;
+        // Add the space of a line around the path. This is an approximation
+        var additionalWidth = this.getHeightOfLine(0) * 1.1;
+        this.width = this.path.width + additionalWidth;
+        this.height = this.path.height + additionalWidth;
       }
       else {
         this.width = this.calcTextWidth() || this.cursorWidth || this.MIN_TEXT_WIDTH;
@@ -30417,13 +30413,15 @@ fabric.util.object.extend(fabric.IText.prototype, /** @lends fabric.IText.protot
      */
     toSVG: function(reviver) {
       var textSvg = this._createBaseSVGMarkup(
-        this._toSVG(),
-        { reviver: reviver, noStyle: true, withShadow: true }
-      );
-      if (this.path) {
+            this._toSVG(),
+            { reviver: reviver, noStyle: true, withShadow: true }
+          ),
+          path = this.path;
+
+      if (path) {
         return (
           textSvg +
-          this._createBaseSVGMarkup(this.path._toSVG(), {
+          path._createBaseSVGMarkup(path._toSVG(), {
             reviver: reviver,
             withShadow: true,
           })

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.2",
+  "version": "5.5.0",
   "author": "Juriy Zaytsev <[email protected]>",
   "contributors": [
     {

src/shapes/object.class.js

@@ -779,12 +779,6 @@
           additionalHeight = height * 0.1;
         }
       }
-      if (this instanceof fabric.Text && this.path) {
-        shouldRedraw = true;
-        shouldResizeCanvas = true;
-        additionalWidth += this.getHeightOfLine(0) * this.zoomX;
-        additionalHeight += this.getHeightOfLine(0) * this.zoomY;
-      }
       if (shouldRedraw) {
         if (shouldResizeCanvas) {
           canvas.width = Math.ceil(width + additionalWidth);

src/shapes/text.class.js

@@ -433,8 +433,10 @@
       this._splitText();
       this._clearCache();
       if (this.path) {
-        this.width = this.path.width;
-        this.height = this.path.height;
+        // Add the space of a line around the path. This is an approximation
+        var additionalWidth = this.getHeightOfLine(0) * 1.1;
+        this.width = this.path.width + additionalWidth;
+        this.height = this.path.height + additionalWidth;
       }
       else {
         this.width = this.calcTextWidth() || this.cursorWidth || this.MIN_TEXT_WIDTH;

test/unit/text.js

@@ -853,8 +853,8 @@
     });
     assert.ok(text.path, 'text has a path');
     assert.ok(text.path.segmentsInfo, 'text has segmentsInfo calculated');
-    assert.equal(text.width, 100, 'text is big as the path width');
-    assert.equal(text.height, 100, 'text is big as the path height');
+    assert.equal(Math.round(text.width), 158, 'text is big as the path width + some extra');
+    assert.equal(Math.round(text.height), 158, 'text is big as the path height + some extra');
   });
 
   QUnit.test('text with a path toObject', function(assert) {

test/visual/text_path.js

@@ -76,18 +76,18 @@
   });
 
   function textpath4(canvas, callback) {
-    var path = new fabric.Path('M 0 0 Q 180 0 180 -101.25 Q 180 -180 90 -180 Q 0 -180 0 -112.5 Q 0 -45 78.75 -45 Q 135 -45 146.25 -90', { visible: false });
+    var path = new fabric.Path('M 0 0 Q 180 0 180 -101.25 Q 180 -180 90 -180 Q 0 -180 0 -112.5 Q 0 -45 78.75 -45 Q 135 -45 146.25 -90', { fill: 'transparent', stroke: 'red' });
     var text = new fabric.Text('Text on a swirl path with textAlign right', {
-      left: 50,
-      top: 50,
+      left: 0,
+      top: 0,
       fontSize: 28,
       textAlign: 'right',
       charSpacing: 50,
       path: path
     });
     var text2 = new fabric.Text('Text on a swirl path with textAlign center', {
-      left: 50,
-      top: 50,
+      left: 250,
+      top: 0,
       fontSize: 28,
       textAlign: 'center',
       charSpacing: 50,
@@ -104,12 +104,18 @@
     code: textpath4,
     golden: 'textpath4.png',
     percentage: 0.09,
-    width: 300,
+    width: 500,
     height: 300,
   });
 
   function textpath5(canvas, callback) {
     canvas.loadFromJSON('{"version":"4.5.1","objects":[{"type":"path","version":"4.5.1","left":213,"top":163,"width":180,"height":180,"fill":"","stroke":"red","strokeWidth":2,"path":[["M",0,0],["Q",180,0,180,-101.25],["Q",180,-180,90,-180],["Q",0,-180,0,-112.5],["Q",0,-45,78.75,-45],["Q",135,-45,146.25,-90]]},{"type":"path","version":"4.5.1","left":200,"top":6,"width":180,"height":180,"fill":"","stroke":"red","strokeWidth":2,"path":[["M",0,0],["Q",180,0,180,-101.25],["Q",180,-180,90,-180],["Q",0,-180,0,-112.5],["Q",0,-45,78.75,-45],["Q",135,-45,146.25,-90]]},{"type":"path","version":"4.5.1","left":18,"top":164,"width":180,"height":180,"fill":"","stroke":"red","strokeWidth":2,"path":[["M",0,0],["Q",180,0,180,-101.25],["Q",180,-180,90,-180],["Q",0,-180,0,-112.5],["Q",0,-45,78.75,-45],["Q",135,-45,146.25,-90]]},{"type":"path","version":"4.5.1","left":9,"top":14,"width":180,"height":180,"fill":"","stroke":"red","strokeWidth":2,"path":[["M",0,0],["Q",180,0,180,-101.25],["Q",180,-180,90,-180],["Q",0,-180,0,-112.5],["Q",0,-45,78.75,-45],["Q",135,-45,146.25,-90]]},{"type":"text","version":"4.5.1","left":10,"top":14,"width":180,"height":180,"text":"Text on a swirl textAlign right","fontSize":28,"textAlign":"right","charSpacing":50,"path":{"type":"path","version":"4.5.1","originX":"left","originY":"top","left":-0.5,"top":-180.5,"width":180,"height":180,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":false,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"path":[["M",0,0],["Q",180,0,180,-101.25],["Q",180,-180,90,-180],["Q",0,-180,0,-112.5],["Q",0,-45,78.75,-45],["Q",135,-45,146.25,-90]]},"direction":"ltr","styles":{}},{"type":"text","version":"4.5.1","left":15,"top":165,"width":180,"height":180,"text":"Text on a swirl textAlign left","fontSize":28,"charSpacing":50,"path":{"type":"path","version":"4.5.1","originX":"left","originY":"top","left":-0.5,"top":-180.5,"width":180,"height":180,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":false,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"path":[["M",0,0],["Q",180,0,180,-101.25],["Q",180,-180,90,-180],["Q",0,-180,0,-112.5],["Q",0,-45,78.75,-45],["Q",135,-45,146.25,-90]]},"direction":"ltr","styles":{}},{"type":"text","version":"4.5.1","left":201,"top":9,"width":180,"height":180,"text":"Text on a swirl textAlign center","fontSize":28,"textAlign":"center","charSpacing":50,"path":{"type":"path","version":"4.5.1","originX":"left","originY":"top","left":-0.5,"top":-180.5,"width":180,"height":180,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":false,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"path":[["M",0,0],["Q",180,0,180,-101.25],["Q",180,-180,90,-180],["Q",0,-180,0,-112.5],["Q",0,-45,78.75,-45],["Q",135,-45,146.25,-90]]},"direction":"ltr","styles":{}},{"type":"text","version":"4.5.1","left":213,"top":164,"width":180,"height":180,"text":"full text to understand better a Text on a swirl textAlign","fontSize":28,"charSpacing":50,"path":{"type":"path","version":"4.5.1","originX":"left","originY":"top","left":-0.5,"top":-180.5,"width":180,"height":180,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeDashOffset":0,"strokeLineJoin":"miter","strokeUniform":false,"strokeMiterLimit":4,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":false,"backgroundColor":"","fillRule":"nonzero","paintFirst":"fill","globalCompositeOperation":"source-over","skewX":0,"skewY":0,"path":[["M",0,0],["Q",180,0,180,-101.25],["Q",180,-180,90,-180],["Q",0,-180,0,-112.5],["Q",0,-45,78.75,-45],["Q",135,-45,146.25,-90]]},"direction":"ltr","styles":{}}]}', function() {
+      canvas.getObjects().forEach(function(obj) {
+        obj.left += 100;
+        obj.top += 100;
+        obj.originX = 'center';
+        obj.originY = 'center';
+      });
       canvas.renderAll();
       callback(canvas.lowerCanvasEl);
     });