@leapfrog/interactive-canvas 1.2.0 → 1.3.0

package/dist/interactive-canvas.es.js

@@ -916,7 +916,8 @@ var AbstractCanvasObject = /** @class */ (function () {
             this.fabricObject.set({ scaleX: position.scaleX });
         if (position.scaleY != undefined)
             this.fabricObject.set({ scaleY: position.scaleY });
-        this.canvas.notifyObjectListChanged();
+        this.setCoords();
+        this.redraw();
     };
     AbstractCanvasObject.prototype.setCoords = function () {
         this.fabricObject.setCoords();
@@ -2086,29 +2087,22 @@ var Text = /** @class */ (function (_super) {
             var bullets = fabricText._bullets;
             if (bullets && bullets[lineIndex]) {
                 var bullet = bullets[lineIndex];
-                var bulletIndent = 10;
-                var bulletLeft = fabricText.left + (left - fabricText._getLeftOffset() - bulletIndent) * fabricText.scaleX;
-                if (bullet.left !== bulletLeft) {
-                    bullet.set({ left: bulletLeft });
-                }
-                /**
-                 * What an out-and-out mess... this calculation is a joke, and the bulletOffset is just an approximation of values that look ok for
-                 * the font sizes we use. The 'top' value provided is actutally the... bottom? of the line... and not the line... the bottom of where
-                 * the font is rendered... subtracting the `fabricText.getHeightOfLine(lineIndex)` line hieght doesn't give you the top, because the
-                 * line height is actually the height of the font plus the excess line height added via the text line-height property.
-                 * I couldn't figure out how to get the actual top of the line in two days of trying to understand this ridiculous library.
-                 * So, here... bullets. That sort of work... sometimes.
-                 */
-                var textOriginTop = fabricText.top + (fabricText.height / 2);
                 var fontSize = this.getValueOfPropertyAt(lineIndex, 0, "fontSize");
-                var bulletOffset = ((fontSize + 6) / 2);
-                var bulletTop = textOriginTop + top - bulletOffset;
-                if (bullet.top !== bulletTop) {
-                    bullet.set({ top: bulletTop });
-                }
-                if (bullet.fill !== fabricText.fill) {
-                    bullet.set({ fill: fabricText.fill });
-                }
+                var color = this.getValueOfPropertyAt(lineIndex, 0, "fill");
+                var radius = fontSize / 5;
+                var angle = fabricText.angle;
+                var theta = angle * Math.PI / 180;
+                var x = -radius * 2;
+                var y = (fabricText.height / 2) + top - (fontSize / 1.5);
+                var xOffset = (x * Math.cos(theta)) - (y * Math.sin(theta));
+                var yOffset = (x * Math.sin(theta)) + (y * Math.cos(theta));
+                var bulletCenterOffset = [-radius * Math.sqrt(2) / 2, -radius * Math.sqrt(2) / 2];
+                bullet.set({
+                    radius: radius,
+                    fill: color,
+                    left: fabricText.left + xOffset + bulletCenterOffset[0],
+                    top: fabricText.top + yOffset + bulletCenterOffset[1]
+                });
             }
             originalRenderTextLine.apply(fabricText, [method, ctx, line, left, top, lineIndex]);
         };
@@ -2478,7 +2472,6 @@ var AbstractInteractiveCanvas = /** @class */ (function () {
         this.updateCanvasDimensions(dimensions, this.zoom$.value);
         this.dimensions$.next(dimensions);
         this.onDimensionsChange();
-        this.notifyObjectListChanged();
     };
     /**
      * @override
@@ -2487,7 +2480,6 @@ var AbstractInteractiveCanvas = /** @class */ (function () {
     AbstractInteractiveCanvas.prototype.setBaseDimensions = function (dimensions) {
         this.baseDimensions = dimensions;
         this.setDimensions(dimensions);
-        this.notifyObjectListChanged();
     };
     /**
      * @override

package/dist/interactive-canvas.js

@@ -918,7 +918,8 @@ var AbstractCanvasObject = /** @class */ (function () {
             this.fabricObject.set({ scaleX: position.scaleX });
         if (position.scaleY != undefined)
             this.fabricObject.set({ scaleY: position.scaleY });
-        this.canvas.notifyObjectListChanged();
+        this.setCoords();
+        this.redraw();
     };
     AbstractCanvasObject.prototype.setCoords = function () {
         this.fabricObject.setCoords();
@@ -2088,29 +2089,22 @@ var Text = /** @class */ (function (_super) {
             var bullets = fabricText._bullets;
             if (bullets && bullets[lineIndex]) {
                 var bullet = bullets[lineIndex];
-                var bulletIndent = 10;
-                var bulletLeft = fabricText.left + (left - fabricText._getLeftOffset() - bulletIndent) * fabricText.scaleX;
-                if (bullet.left !== bulletLeft) {
-                    bullet.set({ left: bulletLeft });
-                }
-                /**
-                 * What an out-and-out mess... this calculation is a joke, and the bulletOffset is just an approximation of values that look ok for
-                 * the font sizes we use. The 'top' value provided is actutally the... bottom? of the line... and not the line... the bottom of where
-                 * the font is rendered... subtracting the `fabricText.getHeightOfLine(lineIndex)` line hieght doesn't give you the top, because the
-                 * line height is actually the height of the font plus the excess line height added via the text line-height property.
-                 * I couldn't figure out how to get the actual top of the line in two days of trying to understand this ridiculous library.
-                 * So, here... bullets. That sort of work... sometimes.
-                 */
-                var textOriginTop = fabricText.top + (fabricText.height / 2);
                 var fontSize = this.getValueOfPropertyAt(lineIndex, 0, "fontSize");
-                var bulletOffset = ((fontSize + 6) / 2);
-                var bulletTop = textOriginTop + top - bulletOffset;
-                if (bullet.top !== bulletTop) {
-                    bullet.set({ top: bulletTop });
-                }
-                if (bullet.fill !== fabricText.fill) {
-                    bullet.set({ fill: fabricText.fill });
-                }
+                var color = this.getValueOfPropertyAt(lineIndex, 0, "fill");
+                var radius = fontSize / 5;
+                var angle = fabricText.angle;
+                var theta = angle * Math.PI / 180;
+                var x = -radius * 2;
+                var y = (fabricText.height / 2) + top - (fontSize / 1.5);
+                var xOffset = (x * Math.cos(theta)) - (y * Math.sin(theta));
+                var yOffset = (x * Math.sin(theta)) + (y * Math.cos(theta));
+                var bulletCenterOffset = [-radius * Math.sqrt(2) / 2, -radius * Math.sqrt(2) / 2];
+                bullet.set({
+                    radius: radius,
+                    fill: color,
+                    left: fabricText.left + xOffset + bulletCenterOffset[0],
+                    top: fabricText.top + yOffset + bulletCenterOffset[1]
+                });
             }
             originalRenderTextLine.apply(fabricText, [method, ctx, line, left, top, lineIndex]);
         };
@@ -2478,7 +2472,6 @@ var AbstractInteractiveCanvas = /** @class */ (function () {
         this.updateCanvasDimensions(dimensions, this.zoom$.value);
         this.dimensions$.next(dimensions);
         this.onDimensionsChange();
-        this.notifyObjectListChanged();
     };
     /**
      * @override
@@ -2487,7 +2480,6 @@ var AbstractInteractiveCanvas = /** @class */ (function () {
     AbstractInteractiveCanvas.prototype.setBaseDimensions = function (dimensions) {
         this.baseDimensions = dimensions;
         this.setDimensions(dimensions);
-        this.notifyObjectListChanged();
     };
     /**
      * @override

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leapfrog/interactive-canvas",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "Leapfrog interactive canvas",
   "files": [
     "dist"