@leapfrog/interactive-canvas 1.3.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
@@ -2783,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,
@@ -2810,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
@@ -2783,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,
@@ -2810,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.3.0",
+  "version": "1.4.0",
   "description": "Leapfrog interactive canvas",
   "files": [
     "dist"