@leapfrog/interactive-canvas 1.3.0 → 1.4.1

package/dist/interactive-canvas.es.js

@@ -385,7 +385,6 @@ var UpdateObjectDimensionsLayoutFunction = /** @class */ (function () {
 }());
 
 var MIN_MAGNITUDE = 1;
-var BULLET_MARGIN = 15;
 var StackObjectsLayoutFunction = /** @class */ (function () {
     function StackObjectsLayoutFunction() {
     }
@@ -450,7 +449,7 @@ var StackObjectsLayoutFunction = /** @class */ (function () {
                 var objectMargin = oc(object.getMargin()).left(0);
                 var objectLeft = canvasMargin.left + columnOffset + objectMargin;
                 if (object.getType() === ObjectType.TEXT && object.isBulleted())
-                    objectLeft += BULLET_MARGIN;
+                    objectLeft += object.getBulletMargin();
                 if (object.getType() === ObjectType.VERTICAL_RULE)
                     object.setPosition({ height: row.height });
                 object.setPosition({
@@ -475,7 +474,7 @@ var StackObjectsLayoutFunction = /** @class */ (function () {
             if (object.getType() === ObjectType.VERTICAL_RULE)
                 return;
             if (object.getType() === ObjectType.TEXT && object.isBulleted())
-                actualWidth -= BULLET_MARGIN;
+                actualWidth -= object.getBulletMargin();
             object.setPosition({
                 width: actualWidth
             });
@@ -643,6 +642,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 +714,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
@@ -1927,6 +1950,20 @@ var Text = /** @class */ (function (_super) {
     Text.prototype.getPrefillType = function () {
         return this.data.prefillType;
     };
+    /**
+     * @override
+     * @inheritDoc
+     */
+    Text.prototype.getBulletMargin = function () {
+        var _this = this;
+        if (!this.isBulleted())
+            return 0;
+        var fontSize = 0;
+        each(this.fabricObject._textLines, function (textLine, lineIndex) {
+            fontSize = Math.max(fontSize, _this.fabricObject.getValueOfPropertyAt(lineIndex, 0, "fontSize"));
+        });
+        return fontSize * 0.6;
+    };
     /**
      * @override
      * @inheritDoc
@@ -2783,7 +2820,7 @@ var AbstractInteractiveCanvas = /** @class */ (function () {
             return __generator(this, function (_a) {
                 rectOptions = {
                     id: this.randomId(),
-                    width: 2,
+                    width: 1,
                     height: 10,
                     top: 0,
                     left: 0,
@@ -2810,7 +2847,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

@@ -387,7 +387,6 @@ var UpdateObjectDimensionsLayoutFunction = /** @class */ (function () {
 }());
 
 var MIN_MAGNITUDE = 1;
-var BULLET_MARGIN = 15;
 var StackObjectsLayoutFunction = /** @class */ (function () {
     function StackObjectsLayoutFunction() {
     }
@@ -452,7 +451,7 @@ var StackObjectsLayoutFunction = /** @class */ (function () {
                 var objectMargin = tsOptchain.oc(object.getMargin()).left(0);
                 var objectLeft = canvasMargin.left + columnOffset + objectMargin;
                 if (object.getType() === exports.ObjectType.TEXT && object.isBulleted())
-                    objectLeft += BULLET_MARGIN;
+                    objectLeft += object.getBulletMargin();
                 if (object.getType() === exports.ObjectType.VERTICAL_RULE)
                     object.setPosition({ height: row.height });
                 object.setPosition({
@@ -477,7 +476,7 @@ var StackObjectsLayoutFunction = /** @class */ (function () {
             if (object.getType() === exports.ObjectType.VERTICAL_RULE)
                 return;
             if (object.getType() === exports.ObjectType.TEXT && object.isBulleted())
-                actualWidth -= BULLET_MARGIN;
+                actualWidth -= object.getBulletMargin();
             object.setPosition({
                 width: actualWidth
             });
@@ -645,6 +644,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 +716,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
@@ -1929,6 +1952,20 @@ var Text = /** @class */ (function (_super) {
     Text.prototype.getPrefillType = function () {
         return this.data.prefillType;
     };
+    /**
+     * @override
+     * @inheritDoc
+     */
+    Text.prototype.getBulletMargin = function () {
+        var _this = this;
+        if (!this.isBulleted())
+            return 0;
+        var fontSize = 0;
+        _.each(this.fabricObject._textLines, function (textLine, lineIndex) {
+            fontSize = Math.max(fontSize, _this.fabricObject.getValueOfPropertyAt(lineIndex, 0, "fontSize"));
+        });
+        return fontSize * 0.6;
+    };
     /**
      * @override
      * @inheritDoc
@@ -2783,7 +2820,7 @@ var AbstractInteractiveCanvas = /** @class */ (function () {
             return __generator(this, function (_a) {
                 rectOptions = {
                     id: this.randomId(),
-                    width: 2,
+                    width: 1,
                     height: 10,
                     top: 0,
                     left: 0,
@@ -2810,7 +2847,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/dist/object/impl/text.d.ts

@@ -40,6 +40,10 @@ export interface IText extends ICanvasObject, IMutableColor, IMutableText, IMuta
      * Get the prefill type used for this text field.
      */
     getPrefillType(): string;
+    /**
+     * Return the margin needed for bullets on this object.
+     */
+    getBulletMargin(): number;
 }
 export declare class Text extends AbstractCanvasObject<fabric.Textbox> implements IText {
     private readonly fontLibrary;
@@ -197,6 +201,11 @@ export declare class Text extends AbstractCanvasObject<fabric.Textbox> implement
      * @inheritDoc
      */
     getPrefillType(): string;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    getBulletMargin(): number;
     /**
      * @override
      * @inheritDoc

package/package.json

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