@leapfrog/interactive-canvas 1.8.1 → 1.9.1

package/dist/index.d.ts

@@ -15,8 +15,9 @@ export * from "./mutator/mutable-background-color.interface";
 export * from "./mutator/mutable-color.interface";
 export * from "./mutator/mutable-image.interface";
 export * from "./mutator/mutable-position.interface";
-export * from "./mutator/mutable-text.interface";
+export * from "./mutator/mutable-stroke.interface";
 export * from "./mutator/mutable-text-style.interface";
+export * from "./mutator/mutable-text.interface";
 export * from "./object/abstract-canvas-object";
 export * from "./object/canvas-object-data";
 export * from "./object/canvas-object.interface";

package/dist/interactive-canvas.es.js

@@ -616,14 +616,18 @@ function isMutablePosition(object) {
     return "centerHorizontally" in object;
 }
 
-function isMutableText(object) {
-    return "setText" in object;
+function isMutableStroke(object) {
+    return "setStrokeColor" in object;
 }
 
 function isMutableTextStyle(object) {
     return "getTextSelection" in object;
 }
 
+function isMutableText(object) {
+    return "setText" in object;
+}
+
 /**
  * Data for a persisted canvas object.
  */
@@ -657,6 +661,7 @@ var AbstractCanvasObject = /** @class */ (function () {
         this.fabricObject.on("moving", function (e) { return _this.onMove(e); });
         this.fabricObject.on("rotating", function (e) { return _this.onRotate(e); });
         this.fabricObject.on("scaling", function (e) { return _this.onScale(e); });
+        this.fabricObject.on("scaled", function (e) { return _this.afterScale(e); });
     }
     /**
      * @override
@@ -1006,6 +1011,10 @@ var AbstractCanvasObject = /** @class */ (function () {
     AbstractCanvasObject.prototype.onScale = function (event) {
         this.updateDimensions();
     };
+    // noinspection JSUnusedLocalSymbols
+    AbstractCanvasObject.prototype.afterScale = function (event) {
+        this.updateDimensions();
+    };
     AbstractCanvasObject.prototype.onDelete = function () {
         //no-op
     };
@@ -1596,7 +1605,6 @@ var Rectangle = /** @class */ (function (_super) {
     function Rectangle(canvas, fabricObject, persistedField) {
         var _this = _super.call(this, ObjectType.RECTANGLE, canvas, fabricObject, persistedField) || this;
         _this.canvas = canvas;
-        _this.fabricObject.set({ strokeWidth: 0 });
         return _this;
     }
     /**
@@ -1611,10 +1619,42 @@ var Rectangle = /** @class */ (function (_super) {
      * @inheritDoc
      */
     Rectangle.prototype.setColor = function (color) {
-        this.fabricObject.set({ fill: color, stroke: color });
+        this.fabricObject.set({ fill: color });
         this.data.color = color;
         this.redraw();
     };
+    /**
+     * @override
+     * @inheritDoc
+     */
+    Rectangle.prototype.getStrokeColor = function () {
+        return this.fabricObject.stroke;
+    };
+    /**
+     * @override
+     * @inheritDoc
+     */
+    Rectangle.prototype.setStrokeColor = function (color) {
+        this.fabricObject.set({ stroke: color });
+        this.data.color = color;
+        this.redraw();
+    };
+    /**
+     * @override
+     * @inheritDoc
+     */
+    Rectangle.prototype.getStrokeWidth = function () {
+        return this.fabricObject.strokeWidth;
+    };
+    /**
+     * @override
+     * @inheritDoc
+     */
+    Rectangle.prototype.setStrokeWidth = function (width) {
+        this.fabricObject.set({ strokeWidth: width });
+        this.data.strokeWidth = width;
+        this.redraw();
+    };
     /**
      * @override
      * @inheritDoc
@@ -1657,6 +1697,16 @@ var Rectangle = /** @class */ (function (_super) {
     Rectangle.prototype.nudgeRight = function () {
         _super.prototype.nudgeInternal.call(this, +1, 0);
     };
+    /**
+     * @override
+     * @inheritDoc
+     */
+    Rectangle.prototype.afterScale = function (event) {
+        this.updateDimensions();
+        var _a = this.getDimensions(), width = _a.width, height = _a.height;
+        this.fabricObject.set({ scaleX: 1, scaleY: 1, width: width.px, height: height.px });
+        this.updateDimensions();
+    };
     return Rectangle;
 }(AbstractCanvasObject));
 
@@ -3452,4 +3502,4 @@ var InteractiveCanvas = /** @class */ (function (_super) {
     return InteractiveCanvas;
 }(AbstractInteractiveCanvas));
 
-export { AbstractCanvasObject, AbstractInteractiveCanvas, AbstractLayoutManager, AdvancedLayoutManager, Border, CanvasObjectData, Cutoff, DefaultCanvasProfile, Font, FontLibrary, HeadlessInteractiveCanvas, HorizontalRule, Image, ImageType, InteractiveCanvas, LayoutManager, MillimeterDimensions, ObjectType, PixelCanvasDimensions, Print6ColCanvasDimensions, Print8ColCanvasDimensions, Rectangle, RichText, SelectionData, StandardLayoutManager, Text, UNKNOWN_FONT, UnknownFont, VerticalRule, isMutableBackgroundColor, isMutableColor, isMutableImage, isMutablePosition, isMutableText, isMutableTextStyle };
+export { AbstractCanvasObject, AbstractInteractiveCanvas, AbstractLayoutManager, AdvancedLayoutManager, Border, CanvasObjectData, Cutoff, DefaultCanvasProfile, Font, FontLibrary, HeadlessInteractiveCanvas, HorizontalRule, Image, ImageType, InteractiveCanvas, LayoutManager, MillimeterDimensions, ObjectType, PixelCanvasDimensions, Print6ColCanvasDimensions, Print8ColCanvasDimensions, Rectangle, RichText, SelectionData, StandardLayoutManager, Text, UNKNOWN_FONT, UnknownFont, VerticalRule, isMutableBackgroundColor, isMutableColor, isMutableImage, isMutablePosition, isMutableStroke, isMutableText, isMutableTextStyle };

package/dist/interactive-canvas.js

@@ -618,14 +618,18 @@ function isMutablePosition(object) {
     return "centerHorizontally" in object;
 }
 
-function isMutableText(object) {
-    return "setText" in object;
+function isMutableStroke(object) {
+    return "setStrokeColor" in object;
 }
 
 function isMutableTextStyle(object) {
     return "getTextSelection" in object;
 }
 
+function isMutableText(object) {
+    return "setText" in object;
+}
+
 /**
  * Data for a persisted canvas object.
  */
@@ -659,6 +663,7 @@ var AbstractCanvasObject = /** @class */ (function () {
         this.fabricObject.on("moving", function (e) { return _this.onMove(e); });
         this.fabricObject.on("rotating", function (e) { return _this.onRotate(e); });
         this.fabricObject.on("scaling", function (e) { return _this.onScale(e); });
+        this.fabricObject.on("scaled", function (e) { return _this.afterScale(e); });
     }
     /**
      * @override
@@ -1008,6 +1013,10 @@ var AbstractCanvasObject = /** @class */ (function () {
     AbstractCanvasObject.prototype.onScale = function (event) {
         this.updateDimensions();
     };
+    // noinspection JSUnusedLocalSymbols
+    AbstractCanvasObject.prototype.afterScale = function (event) {
+        this.updateDimensions();
+    };
     AbstractCanvasObject.prototype.onDelete = function () {
         //no-op
     };
@@ -1598,7 +1607,6 @@ var Rectangle = /** @class */ (function (_super) {
     function Rectangle(canvas, fabricObject, persistedField) {
         var _this = _super.call(this, exports.ObjectType.RECTANGLE, canvas, fabricObject, persistedField) || this;
         _this.canvas = canvas;
-        _this.fabricObject.set({ strokeWidth: 0 });
         return _this;
     }
     /**
@@ -1613,10 +1621,42 @@ var Rectangle = /** @class */ (function (_super) {
      * @inheritDoc
      */
     Rectangle.prototype.setColor = function (color) {
-        this.fabricObject.set({ fill: color, stroke: color });
+        this.fabricObject.set({ fill: color });
         this.data.color = color;
         this.redraw();
     };
+    /**
+     * @override
+     * @inheritDoc
+     */
+    Rectangle.prototype.getStrokeColor = function () {
+        return this.fabricObject.stroke;
+    };
+    /**
+     * @override
+     * @inheritDoc
+     */
+    Rectangle.prototype.setStrokeColor = function (color) {
+        this.fabricObject.set({ stroke: color });
+        this.data.color = color;
+        this.redraw();
+    };
+    /**
+     * @override
+     * @inheritDoc
+     */
+    Rectangle.prototype.getStrokeWidth = function () {
+        return this.fabricObject.strokeWidth;
+    };
+    /**
+     * @override
+     * @inheritDoc
+     */
+    Rectangle.prototype.setStrokeWidth = function (width) {
+        this.fabricObject.set({ strokeWidth: width });
+        this.data.strokeWidth = width;
+        this.redraw();
+    };
     /**
      * @override
      * @inheritDoc
@@ -1659,6 +1699,16 @@ var Rectangle = /** @class */ (function (_super) {
     Rectangle.prototype.nudgeRight = function () {
         _super.prototype.nudgeInternal.call(this, +1, 0);
     };
+    /**
+     * @override
+     * @inheritDoc
+     */
+    Rectangle.prototype.afterScale = function (event) {
+        this.updateDimensions();
+        var _a = this.getDimensions(), width = _a.width, height = _a.height;
+        this.fabricObject.set({ scaleX: 1, scaleY: 1, width: width.px, height: height.px });
+        this.updateDimensions();
+    };
     return Rectangle;
 }(AbstractCanvasObject));
 
@@ -3482,5 +3532,6 @@ exports.isMutableBackgroundColor = isMutableBackgroundColor;
 exports.isMutableColor = isMutableColor;
 exports.isMutableImage = isMutableImage;
 exports.isMutablePosition = isMutablePosition;
+exports.isMutableStroke = isMutableStroke;
 exports.isMutableText = isMutableText;
 exports.isMutableTextStyle = isMutableTextStyle;

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

@@ -1,6 +1,6 @@
 import { ICanvasObject } from "..";
 export interface IMutableColor extends ICanvasObject {
-    getColor(): string;
-    setColor(color: string): void;
+    getColor(): string | null;
+    setColor(color: string | null): void;
 }
 export declare function isMutableColor(object: any): object is IMutableColor;

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

@@ -0,0 +1,8 @@
+import { ICanvasObject } from "..";
+export interface IMutableStroke extends ICanvasObject {
+    getStrokeColor(): string | null;
+    setStrokeColor(color: string | null): void;
+    getStrokeWidth(): number;
+    setStrokeWidth(width: number): void;
+}
+export declare function isMutableStroke(object: any): object is IMutableStroke;

package/dist/mutator/mutable-text-style.interface.d.ts

@@ -76,7 +76,7 @@ export interface IMutableTextStyle extends IMutableText {
      * Set the text background color.
      * @param color New value.
      */
-    setTextBackgroundColor(color: string): void;
+    setTextBackgroundColor(color: string | null): void;
 }
 export interface ITextSelection {
     /**

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

@@ -196,6 +196,7 @@ export declare abstract class AbstractCanvasObject<T extends Object> implements
     protected onMove(event: any): void;
     protected onRotate(event: any): void;
     protected onScale(event: any): void;
+    protected afterScale(event: any): void;
     protected onDelete(): void;
     protected preventLeavingCanvas(): void;
     protected getCanvasOverflow(): IOverflow;

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

@@ -1,12 +1,12 @@
 import { ICanvasObject } from "../canvas-object.interface";
-import { IInteractiveCanvas, IMutableColor, IMutablePosition } from "../..";
+import { IInteractiveCanvas, IMutableColor, IMutablePosition, IMutableStroke } from "../..";
 import { AbstractCanvasObject } from "../abstract-canvas-object";
 import { CanvasObjectData } from "../canvas-object-data";
 import { fabric } from "fabric";
 /**
  * Rectangle field. A basic block of color that can be moved and scaled.
  */
-export interface IRectangle extends ICanvasObject, IMutableColor, IMutablePosition {
+export interface IRectangle extends ICanvasObject, IMutableStroke, IMutableColor, IMutablePosition {
 }
 export declare class Rectangle extends AbstractCanvasObject<fabric.Rect> implements IRectangle {
     constructor(canvas: IInteractiveCanvas, fabricObject: fabric.Rect, persistedField?: CanvasObjectData);
@@ -20,6 +20,26 @@ export declare class Rectangle extends AbstractCanvasObject<fabric.Rect> impleme
      * @inheritDoc
      */
     setColor(color: string): void;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    getStrokeColor(): string | null;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    setStrokeColor(color: string | null): void;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    getStrokeWidth(): number;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    setStrokeWidth(width: number): void;
     /**
      * @override
      * @inheritDoc
@@ -50,4 +70,9 @@ export declare class Rectangle extends AbstractCanvasObject<fabric.Rect> impleme
      * @inheritDoc
      */
     nudgeRight(): void;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    protected afterScale(event: any): void;
 }

package/package.json

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