@leapfrog/interactive-canvas 2.0.20-beta-3 → 2.0.20-beta-5

package/dist/interactive-canvas.es.js

@@ -1067,7 +1067,7 @@ class BackgroundImage extends AbstractCanvasObject {
             scaleX: widthPx / this.fabricObject.width,
             scaleY: heightPx / this.fabricObject.height
         });
-        this.fabricObject.sendToBack();
+        this.canvas.sendObjectToBack(this.fabricObject);
         this.updateDimensions();
     }
     /**
@@ -1224,7 +1224,9 @@ class Border extends AbstractCanvasObject {
             top: 0,
             left: 0,
             width: this.canvas.getDimensions().widthPx - this.strokeWidth$.value,
-            height: this.canvas.getDimensions().heightPx - this.strokeWidth$.value
+            height: this.canvas.getDimensions().heightPx - this.strokeWidth$.value,
+            selectable: false,
+            evented: false
         });
     }
     /**
@@ -1776,7 +1778,7 @@ class Text extends AbstractCanvasObject {
         this.textSelection$ = new BehaviorSubject(new TextSelection(this.fabricObject, this.fontLibrary));
         this.fabricObject.set({ strokeWidth: 0 });
         this.fabricObject.on("text:changed", () => this.onTextChange());
-        this.fabricObject.on("text:selection:changed", () => this.onSelectionChange());
+        this.fabricObject.on("selection:changed", () => this.onSelectionChange());
         this.applyBulletListMonkeyPatches();
     }
     /**
@@ -2043,7 +2045,7 @@ class Text extends AbstractCanvasObject {
         else {
             this.fabricObject.set({ textBackgroundColor: color });
         }
-        this.fabricObject.set('dirty', true);
+        this.fabricObject.dirty = true;
         this.redraw();
         this.updateTextSelection();
     }
@@ -2101,7 +2103,7 @@ class Text extends AbstractCanvasObject {
      * @inheritDoc
      */
     setBackgroundColor(color) {
-        this.fabricObject.set("backgroundColor", color);
+        this.fabricObject.set({ "backgroundColor": color });
         this.redraw();
     }
     /**
@@ -2182,9 +2184,11 @@ class Text extends AbstractCanvasObject {
     enterEditing() {
         if (!this.isEditing()) {
             this.fabricObject.enterEditing();
-            this.focus();
-            this.selectAllText();
-            this.redraw();
+            setTimeout(() => {
+                this.focus();
+                this.selectAllText();
+                this.redraw();
+            }, 0);
         }
     }
     /**
@@ -3358,8 +3362,6 @@ class AbstractInteractiveCanvas {
     }
     setMultiSelect(value) {
         this.fabricCanvas.selection = value;
-        this.fabricCanvas.selectionColor = value ? "rgba(0,0,0,0.1)" : "transparent"; // Adjust selection color
-        this.fabricCanvas.selectionBorderColor = "transparent";
         this.fabricCanvas.selectionKey = value ? "shiftKey" : null;
     }
     /**
@@ -3601,12 +3603,7 @@ class AbstractInteractiveCanvas {
     }
     findObject(id) {
         //Don't use strict compare here. fabric ids are numbers while ad builder ids are strings... mostly.
-        //return _.find(this.objects$.value, (object: AbstractCanvasObject<any>) => object.getId() == id)!;
-        const foundObject = _.find(this.objects$.value, (object) => object.getId() == id);
-        if (!foundObject) {
-            throw new Error(`Object with id [${id}] not found`);
-        }
-        return foundObject;
+        return _.find(this.objects$.value, (object) => object.getId() == id);
     }
     /**
      * Reset zoom and canvas dimensions to 1:1 scale, execute a function, then return the canvas to
@@ -3687,7 +3684,6 @@ class AbstractInteractiveCanvas {
 class SelectionData {
     constructor(objects) {
         this.objects = objects;
-        console.log(objects[0], "objects");
         this.empty = this.objects.length < 1;
         const selectedObject = this.objects[0];
         this.isText = (selectedObject === null || selectedObject === void 0 ? void 0 : selectedObject.getType()) === ObjectType.TEXT
@@ -3832,9 +3828,10 @@ class InteractiveCanvas extends AbstractInteractiveCanvas {
         this.enterTextSelectionModeIfRequired();
     }
     enterTextSelectionModeIfRequired() {
+        var _a, _b;
         if (!this.profile$.value.enterTextEditImmediatelyOnSelect && !this.layoutManager$.value.enterTextEditImmediatelyOnSelect)
             return;
-        if (!this.selection$.value || !this.selection$.value.objects[0] || this.selection$.value.objects[0].getType() !== ObjectType.TEXT)
+        if (((_b = (_a = this.selection$.value) === null || _a === void 0 ? void 0 : _a.objects[0]) === null || _b === void 0 ? void 0 : _b.getType()) !== ObjectType.TEXT)
             return;
         const text = this.selection$.value.objects[0];
         text.enterEditing();

package/dist/interactive-canvas.js

@@ -1088,7 +1088,7 @@ class BackgroundImage extends AbstractCanvasObject {
             scaleX: widthPx / this.fabricObject.width,
             scaleY: heightPx / this.fabricObject.height
         });
-        this.fabricObject.sendToBack();
+        this.canvas.sendObjectToBack(this.fabricObject);
         this.updateDimensions();
     }
     /**
@@ -1245,7 +1245,9 @@ class Border extends AbstractCanvasObject {
             top: 0,
             left: 0,
             width: this.canvas.getDimensions().widthPx - this.strokeWidth$.value,
-            height: this.canvas.getDimensions().heightPx - this.strokeWidth$.value
+            height: this.canvas.getDimensions().heightPx - this.strokeWidth$.value,
+            selectable: false,
+            evented: false
         });
     }
     /**
@@ -1797,7 +1799,7 @@ class Text extends AbstractCanvasObject {
         this.textSelection$ = new rxjs.BehaviorSubject(new TextSelection(this.fabricObject, this.fontLibrary));
         this.fabricObject.set({ strokeWidth: 0 });
         this.fabricObject.on("text:changed", () => this.onTextChange());
-        this.fabricObject.on("text:selection:changed", () => this.onSelectionChange());
+        this.fabricObject.on("selection:changed", () => this.onSelectionChange());
         this.applyBulletListMonkeyPatches();
     }
     /**
@@ -2064,7 +2066,7 @@ class Text extends AbstractCanvasObject {
         else {
             this.fabricObject.set({ textBackgroundColor: color });
         }
-        this.fabricObject.set('dirty', true);
+        this.fabricObject.dirty = true;
         this.redraw();
         this.updateTextSelection();
     }
@@ -2122,7 +2124,7 @@ class Text extends AbstractCanvasObject {
      * @inheritDoc
      */
     setBackgroundColor(color) {
-        this.fabricObject.set("backgroundColor", color);
+        this.fabricObject.set({ "backgroundColor": color });
         this.redraw();
     }
     /**
@@ -2203,9 +2205,11 @@ class Text extends AbstractCanvasObject {
     enterEditing() {
         if (!this.isEditing()) {
             this.fabricObject.enterEditing();
-            this.focus();
-            this.selectAllText();
-            this.redraw();
+            setTimeout(() => {
+                this.focus();
+                this.selectAllText();
+                this.redraw();
+            }, 0);
         }
     }
     /**
@@ -3379,8 +3383,6 @@ class AbstractInteractiveCanvas {
     }
     setMultiSelect(value) {
         this.fabricCanvas.selection = value;
-        this.fabricCanvas.selectionColor = value ? "rgba(0,0,0,0.1)" : "transparent"; // Adjust selection color
-        this.fabricCanvas.selectionBorderColor = "transparent";
         this.fabricCanvas.selectionKey = value ? "shiftKey" : null;
     }
     /**
@@ -3622,12 +3624,7 @@ class AbstractInteractiveCanvas {
     }
     findObject(id) {
         //Don't use strict compare here. fabric ids are numbers while ad builder ids are strings... mostly.
-        //return _.find(this.objects$.value, (object: AbstractCanvasObject<any>) => object.getId() == id)!;
-        const foundObject = _.find(this.objects$.value, (object) => object.getId() == id);
-        if (!foundObject) {
-            throw new Error(`Object with id [${id}] not found`);
-        }
-        return foundObject;
+        return _.find(this.objects$.value, (object) => object.getId() == id);
     }
     /**
      * Reset zoom and canvas dimensions to 1:1 scale, execute a function, then return the canvas to
@@ -3708,7 +3705,6 @@ class AbstractInteractiveCanvas {
 class SelectionData {
     constructor(objects) {
         this.objects = objects;
-        console.log(objects[0], "objects");
         this.empty = this.objects.length < 1;
         const selectedObject = this.objects[0];
         this.isText = (selectedObject === null || selectedObject === void 0 ? void 0 : selectedObject.getType()) === exports.ObjectType.TEXT
@@ -3853,9 +3849,10 @@ class InteractiveCanvas extends AbstractInteractiveCanvas {
         this.enterTextSelectionModeIfRequired();
     }
     enterTextSelectionModeIfRequired() {
+        var _a, _b;
         if (!this.profile$.value.enterTextEditImmediatelyOnSelect && !this.layoutManager$.value.enterTextEditImmediatelyOnSelect)
             return;
-        if (!this.selection$.value || !this.selection$.value.objects[0] || this.selection$.value.objects[0].getType() !== exports.ObjectType.TEXT)
+        if (((_b = (_a = this.selection$.value) === null || _a === void 0 ? void 0 : _a.objects[0]) === null || _b === void 0 ? void 0 : _b.getType()) !== exports.ObjectType.TEXT)
             return;
         const text = this.selection$.value.objects[0];
         text.enterEditing();

package/dist/object/impl/extended-fabric-textbox.interface.d.ts

@@ -1,8 +1,26 @@
 import { ExtendedFabricObject } from "./extended-fabric-object.interface";
 import * as fabric from "fabric";
-export interface ExtendedFabricTextbox extends Omit<fabric.Textbox, keyof ExtendedFabricObject>, ExtendedFabricObject {
+import { TEvent, TPointerEvent } from "fabric";
+export interface ExtendedFabricTextbox extends fabric.Textbox, ExtendedFabricObject {
     _isOrderedList?: boolean;
     _orderedListStart?: number;
     _orderedListMarkerEntities?: fabric.Textbox[];
     _bullets?: Record<number, fabric.Object>;
+    _setFillStyles(ctx: CanvasRenderingContext2D, { fill }: Pick<this, 'fill'>): any;
+    _setStrokeStyles(ctx: CanvasRenderingContext2D, decl: Pick<this, 'stroke' | 'strokeWidth' | 'strokeLineCap' | 'strokeDashOffset' | 'strokeLineJoin' | 'strokeMiterLimit'>): any;
+    fire(eventName: string, options?: any): any;
+    off(eventName?: any, handler?: (e: TEvent) => void): any;
+    on: any;
+    onDeselect: any;
+    once: any;
+    renderDragSourceEffect(_e: DragEvent): void;
+    renderDragSourceEffect(): void;
+    set(options: Partial<this>): any;
+    shouldStartDragging(_e: TPointerEvent): boolean;
+    shouldStartDragging(): boolean;
+    toObject(propertiesToInclude?: string[]): any;
+    toObject<T extends Omit<Partial<any>, keyof any>, K extends keyof T = never>(propertiesToInclude?: K[]): Pick<any, any>;
+    type: string;
+    selectAll(): any;
+    exitEditing(): any;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leapfrog/interactive-canvas",
-  "version": "2.0.20-beta-3",
+  "version": "2.0.20-beta-5",
   "description": "Leapfrog interactive canvas",
   "files": [
     "dist"