@leapfrog/interactive-canvas 1.2.0 → 1.4.0

package/dist/interactive-canvas.es.js

@@ -643,6 +643,7 @@ var AbstractCanvasObject = /** @class */ (function () {
         this.fabricObject = fabricObject;
         this.data = data ? data : new CanvasObjectData(type, this.fabricObject.id);
         this.dimensions$ = new BehaviorSubject(new FieldDimensions(this.fabricObject, this.canvas));
+        this.opacity$ = new BehaviorSubject(this.fabricObject.opacity);
         this.updatePinToBottomDistance();
         this.canvas.getProfile$().subscribe(function (profile) { return _this.onProfileChange(profile); });
         this.canvas.getLayoutManager$().subscribe(function (layoutManager) { return _this.onLayoutManagerChange(layoutManager); });
@@ -714,6 +715,29 @@ var AbstractCanvasObject = /** @class */ (function () {
     AbstractCanvasObject.prototype.getDimensions$ = function () {
         return this.dimensions$;
     };
+    /**
+     * @override
+     * @inheritDoc
+     */
+    AbstractCanvasObject.prototype.getOpacity = function () {
+        return this.opacity$.value;
+    };
+    /**
+     * @override
+     * @inheritDoc
+     */
+    AbstractCanvasObject.prototype.getOpacity$ = function () {
+        return this.opacity$;
+    };
+    /**
+     * @override
+     * @inheritDoc
+     */
+    AbstractCanvasObject.prototype.setOpacity = function (value) {
+        this.fabricObject.set({ opacity: value });
+        this.opacity$.next(value);
+        this.redraw();
+    };
     /**
      * @override
      * @inheritDoc
@@ -916,7 +940,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 +2111,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 +2496,6 @@ var AbstractInteractiveCanvas = /** @class */ (function () {
         this.updateCanvasDimensions(dimensions, this.zoom$.value);
         this.dimensions$.next(dimensions);
         this.onDimensionsChange();
-        this.notifyObjectListChanged();
     };
     /**
      * @override
@@ -2487,7 +2504,6 @@ var AbstractInteractiveCanvas = /** @class */ (function () {
     AbstractInteractiveCanvas.prototype.setBaseDimensions = function (dimensions) {
         this.baseDimensions = dimensions;
         this.setDimensions(dimensions);
-        this.notifyObjectListChanged();
     };
     /**
      * @override
@@ -2791,7 +2807,7 @@ var AbstractInteractiveCanvas = /** @class */ (function () {
             return __generator(this, function (_a) {
                 rectOptions = {
                     id: this.randomId(),
-                    width: 2,
+                    width: 1,
                     height: 10,
                     top: 0,
                     left: 0,
@@ -2818,7 +2834,7 @@ var AbstractInteractiveCanvas = /** @class */ (function () {
                 rectOptions = {
                     id: this.randomId(),
                     width: 10,
-                    height: 2,
+                    height: 1,
                     top: 0,
                     left: 0,
                     fill: "#000000"

package/dist/interactive-canvas.js

@@ -645,6 +645,7 @@ var AbstractCanvasObject = /** @class */ (function () {
         this.fabricObject = fabricObject;
         this.data = data ? data : new CanvasObjectData(type, this.fabricObject.id);
         this.dimensions$ = new rxjs.BehaviorSubject(new FieldDimensions(this.fabricObject, this.canvas));
+        this.opacity$ = new rxjs.BehaviorSubject(this.fabricObject.opacity);
         this.updatePinToBottomDistance();
         this.canvas.getProfile$().subscribe(function (profile) { return _this.onProfileChange(profile); });
         this.canvas.getLayoutManager$().subscribe(function (layoutManager) { return _this.onLayoutManagerChange(layoutManager); });
@@ -716,6 +717,29 @@ var AbstractCanvasObject = /** @class */ (function () {
     AbstractCanvasObject.prototype.getDimensions$ = function () {
         return this.dimensions$;
     };
+    /**
+     * @override
+     * @inheritDoc
+     */
+    AbstractCanvasObject.prototype.getOpacity = function () {
+        return this.opacity$.value;
+    };
+    /**
+     * @override
+     * @inheritDoc
+     */
+    AbstractCanvasObject.prototype.getOpacity$ = function () {
+        return this.opacity$;
+    };
+    /**
+     * @override
+     * @inheritDoc
+     */
+    AbstractCanvasObject.prototype.setOpacity = function (value) {
+        this.fabricObject.set({ opacity: value });
+        this.opacity$.next(value);
+        this.redraw();
+    };
     /**
      * @override
      * @inheritDoc
@@ -918,7 +942,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 +2113,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 +2496,6 @@ var AbstractInteractiveCanvas = /** @class */ (function () {
         this.updateCanvasDimensions(dimensions, this.zoom$.value);
         this.dimensions$.next(dimensions);
         this.onDimensionsChange();
-        this.notifyObjectListChanged();
     };
     /**
      * @override
@@ -2487,7 +2504,6 @@ var AbstractInteractiveCanvas = /** @class */ (function () {
     AbstractInteractiveCanvas.prototype.setBaseDimensions = function (dimensions) {
         this.baseDimensions = dimensions;
         this.setDimensions(dimensions);
-        this.notifyObjectListChanged();
     };
     /**
      * @override
@@ -2791,7 +2807,7 @@ var AbstractInteractiveCanvas = /** @class */ (function () {
             return __generator(this, function (_a) {
                 rectOptions = {
                     id: this.randomId(),
-                    width: 2,
+                    width: 1,
                     height: 10,
                     top: 0,
                     left: 0,
@@ -2818,7 +2834,7 @@ var AbstractInteractiveCanvas = /** @class */ (function () {
                 rectOptions = {
                     id: this.randomId(),
                     width: 10,
-                    height: 2,
+                    height: 1,
                     top: 0,
                     left: 0,
                     fill: "#000000"

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

@@ -10,6 +10,7 @@ export declare abstract class AbstractCanvasObject<T extends Object> implements
     protected fabricObject: T;
     protected data: CanvasObjectData;
     private readonly dimensions$;
+    private readonly opacity$;
     /**
      * Create a new instance.
      * @param type Object type.
@@ -53,6 +54,21 @@ export declare abstract class AbstractCanvasObject<T extends Object> implements
      * @inheritDoc
      */
     getDimensions$(): Observable<IObjectDimensions>;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    getOpacity(): number;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    getOpacity$(): Observable<number>;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    setOpacity(value: number): void;
     /**
      * @override
      * @inheritDoc

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

@@ -34,6 +34,19 @@ export interface ICanvasObject {
      * Get an observable for the field dimensions.
      */
     getDimensions$(): Observable<IObjectDimensions>;
+    /**
+     * Get object opacity.
+     */
+    getOpacity(): number;
+    /**
+     * Get an observable for the object opacity.
+     */
+    getOpacity$(): Observable<number>;
+    /**
+     * Set the object opacity.
+     * @param value Opacity.
+     */
+    setOpacity(value: number): void;
     /**
      * Get the component margin.
      */

package/package.json

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