@leapfrog/interactive-canvas 1.1.0 → 1.3.0

package/dist/interactive-canvas.es.js

@@ -844,6 +844,55 @@ var AbstractCanvasObject = /** @class */ (function () {
         this.canvas.notifyObjectListChanged();
         this.updateFabricObjectBehavior();
     };
+    /**
+     * @override
+     * @inheritDoc
+     */
+    AbstractCanvasObject.prototype.setLeft = function (left) {
+        this.setPosition({ left: left });
+    };
+    /**
+     * @override
+     * @inheritDoc
+     */
+    AbstractCanvasObject.prototype.setTop = function (top) {
+        this.setPosition({ top: top });
+    };
+    /**
+     * @override
+     * @inheritDoc
+     */
+    AbstractCanvasObject.prototype.setHeight = function (height) {
+        this.setPosition({ height: height });
+    };
+    /**
+     * @override
+     * @inheritDoc
+     */
+    AbstractCanvasObject.prototype.setWidth = function (width) {
+        this.setPosition({ width: width });
+    };
+    /**
+     * @override
+     * @inheritDoc
+     */
+    AbstractCanvasObject.prototype.setAngle = function (angle) {
+        this.setPosition({ angle: angle });
+    };
+    /**
+     * @override
+     * @inheritDoc
+     */
+    AbstractCanvasObject.prototype.setScaleX = function (scale) {
+        this.setPosition({ scaleX: scale });
+    };
+    /**
+     * @override
+     * @inheritDoc
+     */
+    AbstractCanvasObject.prototype.setScaleY = function (scale) {
+        this.setPosition({ scaleY: scale });
+    };
     /**
      * Get the underlying fabric object.
      * (Internal use only, do not expose this outside the canvas module).
@@ -861,6 +910,14 @@ var AbstractCanvasObject = /** @class */ (function () {
             this.fabricObject.set({ width: position.width / scale.x });
         if (position.height != undefined)
             this.fabricObject.set({ height: position.height / scale.y });
+        if (position.angle != undefined)
+            this.fabricObject.set({ angle: position.angle });
+        if (position.scaleX != undefined)
+            this.fabricObject.set({ scaleX: position.scaleX });
+        if (position.scaleY != undefined)
+            this.fabricObject.set({ scaleY: position.scaleY });
+        this.setCoords();
+        this.redraw();
     };
     AbstractCanvasObject.prototype.setCoords = function () {
         this.fabricObject.setCoords();
@@ -1282,14 +1339,6 @@ var HorizontalRule = /** @class */ (function (_super) {
     HorizontalRule.prototype.centerVertically = function () {
         _super.prototype.centerVerticallyInternal.call(this);
     };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    HorizontalRule.prototype.setHeight = function (height) {
-        this.setPosition({ height: height });
-        this.canvas.notifyObjectListChanged();
-    };
     /**
      * @override
      * @inheritDoc
@@ -1394,14 +1443,6 @@ var Image = /** @class */ (function (_super) {
     Image.prototype.centerVertically = function () {
         _super.prototype.centerVerticallyInternal.call(this);
     };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    Image.prototype.setHeight = function (height) {
-        this.setPosition({ height: height });
-        this.canvas.notifyObjectListChanged();
-    };
     /**
      * @override
      * @inheritDoc
@@ -1536,14 +1577,6 @@ var Rectangle = /** @class */ (function (_super) {
     Rectangle.prototype.centerVertically = function () {
         _super.prototype.centerVerticallyInternal.call(this);
     };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    Rectangle.prototype.setHeight = function (height) {
-        this.setPosition({ height: height });
-        this.canvas.notifyObjectListChanged();
-    };
     /**
      * @override
      * @inheritDoc
@@ -1837,13 +1870,6 @@ var Text = /** @class */ (function (_super) {
     Text.prototype.centerVertically = function () {
         _super.prototype.centerVerticallyInternal.call(this);
     };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    Text.prototype.setHeight = function (height) {
-        //no-op
-    };
     /**
      * @override
      * @inheritDoc
@@ -2061,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]);
         };
@@ -2235,14 +2254,6 @@ var VerticalRule = /** @class */ (function (_super) {
     VerticalRule.prototype.centerVertically = function () {
         _super.prototype.centerVerticallyInternal.call(this);
     };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    VerticalRule.prototype.setHeight = function (height) {
-        this.setPosition({ height: height });
-        this.canvas.notifyObjectListChanged();
-    };
     /**
      * @override
      * @inheritDoc
@@ -2461,7 +2472,6 @@ var AbstractInteractiveCanvas = /** @class */ (function () {
         this.updateCanvasDimensions(dimensions, this.zoom$.value);
         this.dimensions$.next(dimensions);
         this.onDimensionsChange();
-        this.notifyObjectListChanged();
     };
     /**
      * @override
@@ -2470,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

@@ -846,6 +846,55 @@ var AbstractCanvasObject = /** @class */ (function () {
         this.canvas.notifyObjectListChanged();
         this.updateFabricObjectBehavior();
     };
+    /**
+     * @override
+     * @inheritDoc
+     */
+    AbstractCanvasObject.prototype.setLeft = function (left) {
+        this.setPosition({ left: left });
+    };
+    /**
+     * @override
+     * @inheritDoc
+     */
+    AbstractCanvasObject.prototype.setTop = function (top) {
+        this.setPosition({ top: top });
+    };
+    /**
+     * @override
+     * @inheritDoc
+     */
+    AbstractCanvasObject.prototype.setHeight = function (height) {
+        this.setPosition({ height: height });
+    };
+    /**
+     * @override
+     * @inheritDoc
+     */
+    AbstractCanvasObject.prototype.setWidth = function (width) {
+        this.setPosition({ width: width });
+    };
+    /**
+     * @override
+     * @inheritDoc
+     */
+    AbstractCanvasObject.prototype.setAngle = function (angle) {
+        this.setPosition({ angle: angle });
+    };
+    /**
+     * @override
+     * @inheritDoc
+     */
+    AbstractCanvasObject.prototype.setScaleX = function (scale) {
+        this.setPosition({ scaleX: scale });
+    };
+    /**
+     * @override
+     * @inheritDoc
+     */
+    AbstractCanvasObject.prototype.setScaleY = function (scale) {
+        this.setPosition({ scaleY: scale });
+    };
     /**
      * Get the underlying fabric object.
      * (Internal use only, do not expose this outside the canvas module).
@@ -863,6 +912,14 @@ var AbstractCanvasObject = /** @class */ (function () {
             this.fabricObject.set({ width: position.width / scale.x });
         if (position.height != undefined)
             this.fabricObject.set({ height: position.height / scale.y });
+        if (position.angle != undefined)
+            this.fabricObject.set({ angle: position.angle });
+        if (position.scaleX != undefined)
+            this.fabricObject.set({ scaleX: position.scaleX });
+        if (position.scaleY != undefined)
+            this.fabricObject.set({ scaleY: position.scaleY });
+        this.setCoords();
+        this.redraw();
     };
     AbstractCanvasObject.prototype.setCoords = function () {
         this.fabricObject.setCoords();
@@ -1284,14 +1341,6 @@ var HorizontalRule = /** @class */ (function (_super) {
     HorizontalRule.prototype.centerVertically = function () {
         _super.prototype.centerVerticallyInternal.call(this);
     };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    HorizontalRule.prototype.setHeight = function (height) {
-        this.setPosition({ height: height });
-        this.canvas.notifyObjectListChanged();
-    };
     /**
      * @override
      * @inheritDoc
@@ -1396,14 +1445,6 @@ var Image = /** @class */ (function (_super) {
     Image.prototype.centerVertically = function () {
         _super.prototype.centerVerticallyInternal.call(this);
     };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    Image.prototype.setHeight = function (height) {
-        this.setPosition({ height: height });
-        this.canvas.notifyObjectListChanged();
-    };
     /**
      * @override
      * @inheritDoc
@@ -1538,14 +1579,6 @@ var Rectangle = /** @class */ (function (_super) {
     Rectangle.prototype.centerVertically = function () {
         _super.prototype.centerVerticallyInternal.call(this);
     };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    Rectangle.prototype.setHeight = function (height) {
-        this.setPosition({ height: height });
-        this.canvas.notifyObjectListChanged();
-    };
     /**
      * @override
      * @inheritDoc
@@ -1839,13 +1872,6 @@ var Text = /** @class */ (function (_super) {
     Text.prototype.centerVertically = function () {
         _super.prototype.centerVerticallyInternal.call(this);
     };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    Text.prototype.setHeight = function (height) {
-        //no-op
-    };
     /**
      * @override
      * @inheritDoc
@@ -2063,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]);
         };
@@ -2237,14 +2256,6 @@ var VerticalRule = /** @class */ (function (_super) {
     VerticalRule.prototype.centerVertically = function () {
         _super.prototype.centerVerticallyInternal.call(this);
     };
-    /**
-     * @override
-     * @inheritDoc
-     */
-    VerticalRule.prototype.setHeight = function (height) {
-        this.setPosition({ height: height });
-        this.canvas.notifyObjectListChanged();
-    };
     /**
      * @override
      * @inheritDoc
@@ -2461,7 +2472,6 @@ var AbstractInteractiveCanvas = /** @class */ (function () {
         this.updateCanvasDimensions(dimensions, this.zoom$.value);
         this.dimensions$.next(dimensions);
         this.onDimensionsChange();
-        this.notifyObjectListChanged();
     };
     /**
      * @override
@@ -2470,7 +2480,6 @@ var AbstractInteractiveCanvas = /** @class */ (function () {
     AbstractInteractiveCanvas.prototype.setBaseDimensions = function (dimensions) {
         this.baseDimensions = dimensions;
         this.setDimensions(dimensions);
-        this.notifyObjectListChanged();
     };
     /**
      * @override

package/dist/mutator/mutable-position.interface.d.ts

@@ -8,11 +8,41 @@ export interface IMutablePosition extends ICanvasObject {
      * Center the object vertically on the canvas.
      */
     centerVertically(): void;
+    /**
+     * Set the left value of the element.
+     * @param left New left value.
+     */
+    setLeft(left: number): void;
+    /**
+     * Set the top value of the element.
+     * @param top New top value.
+     */
+    setTop(top: number): void;
     /**
      * Set the height of the element.
      * @param height New height.
      */
     setHeight(height: number): void;
+    /**
+     * Set the width of the element.
+     * @param width New width.
+     */
+    setWidth(width: number): void;
+    /**
+     * Set the angle of the element.
+     * @param angle New angle.
+     */
+    setAngle(angle: number): void;
+    /**
+     * Set the x scale of the element.
+     * @param scale New scale.
+     */
+    setScaleX(scale: number): void;
+    /**
+     * Set the y scale of the element.
+     * @param scale New scale.
+     */
+    setScaleY(scale: number): void;
     /**
      * Nudge the object upward.
      */

package/dist/object/abstract-canvas-object.d.ts

@@ -123,6 +123,41 @@ export declare abstract class AbstractCanvasObject<T extends Object> implements
      * @inheritDoc
      */
     setPinToBottom(value?: boolean): void;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    setLeft(left: number): void;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    setTop(top: number): void;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    setHeight(height: number): void;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    setWidth(width: number): void;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    setAngle(angle: number): void;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    setScaleX(scale: number): void;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    setScaleY(scale: number): void;
     /**
      * Get the underlying fabric object.
      * (Internal use only, do not expose this outside the canvas module).

package/dist/object/impl/horizontal-rule.d.ts

@@ -60,11 +60,6 @@ export declare class HorizontalRule extends AbstractCanvasObject<fabric.Rect> im
      * @inheritDoc
      */
     centerVertically(): void;
-    /**
-     * @override
-     * @inheritDoc
-     */
-    setHeight(height: number): void;
     /**
      * @override
      * @inheritDoc

package/dist/object/impl/image.d.ts

@@ -44,11 +44,6 @@ export declare class Image extends AbstractCanvasObject<fabric.Image> implements
      * @inheritDoc
      */
     centerVertically(): void;
-    /**
-     * @override
-     * @inheritDoc
-     */
-    setHeight(height: number): void;
     /**
      * @override
      * @inheritDoc

package/dist/object/impl/rectangle.d.ts

@@ -30,11 +30,6 @@ export declare class Rectangle extends AbstractCanvasObject<fabric.Rect> impleme
      * @inheritDoc
      */
     centerVertically(): void;
-    /**
-     * @override
-     * @inheritDoc
-     */
-    setHeight(height: number): void;
     /**
      * @override
      * @inheritDoc

package/dist/object/impl/text.d.ts

@@ -157,11 +157,6 @@ export declare class Text extends AbstractCanvasObject<fabric.Textbox> implement
      * @inheritDoc
      */
     centerVertically(): void;
-    /**
-     * @override
-     * @inheritDoc
-     */
-    setHeight(height: number): void;
     /**
      * @override
      * @inheritDoc

package/dist/object/impl/vertical-rule.d.ts

@@ -60,11 +60,6 @@ export declare class VerticalRule extends AbstractCanvasObject<fabric.Rect> impl
      * @inheritDoc
      */
     centerVertically(): void;
-    /**
-     * @override
-     * @inheritDoc
-     */
-    setHeight(height: number): void;
     /**
      * @override
      * @inheritDoc

package/dist/types/position.interface.d.ts

@@ -3,4 +3,7 @@ export interface IPosition {
     readonly left?: number;
     readonly width?: number;
     readonly height?: number;
+    readonly angle?: number;
+    readonly scaleX?: number;
+    readonly scaleY?: number;
 }

package/package.json

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