@leapfrog/interactive-canvas 2.0.20-beta-4 → 2.0.20-beta-6

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();
     }
     /**
@@ -1778,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();
     }
     /**
@@ -2045,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();
     }
@@ -2103,7 +2103,7 @@ class Text extends AbstractCanvasObject {
      * @inheritDoc
      */
     setBackgroundColor(color) {
-        this.fabricObject.set("backgroundColor", color);
+        this.fabricObject.set({ "backgroundColor": color });
         this.redraw();
     }
     /**
@@ -2184,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);
         }
     }
     /**
@@ -3777,10 +3779,6 @@ class InteractiveCanvas extends AbstractInteractiveCanvas {
         this.devicePixelRatio = devicePixelRatio;
         this.headless = false;
         this.undoStack = new UndoStack(this);
-        const canvasElement = document.getElementById('canvas');
-        const width = canvasElement.clientWidth * devicePixelRatio;
-        const height = canvasElement.clientHeight * devicePixelRatio;
-        this.fabricCanvas.setDimensions({ width, height });
         this.fabricCanvas.setViewportTransform([1, 0, 0, 1, 0, 0]);
         this.fabricCanvas.setZoom(devicePixelRatio);
         //Initialize watchers
@@ -3826,9 +3824,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();
     }
     /**
@@ -1799,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();
     }
     /**
@@ -2066,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();
     }
@@ -2124,7 +2124,7 @@ class Text extends AbstractCanvasObject {
      * @inheritDoc
      */
     setBackgroundColor(color) {
-        this.fabricObject.set("backgroundColor", color);
+        this.fabricObject.set({ "backgroundColor": color });
         this.redraw();
     }
     /**
@@ -2205,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);
         }
     }
     /**
@@ -3798,10 +3800,6 @@ class InteractiveCanvas extends AbstractInteractiveCanvas {
         this.devicePixelRatio = devicePixelRatio;
         this.headless = false;
         this.undoStack = new UndoStack(this);
-        const canvasElement = document.getElementById('canvas');
-        const width = canvasElement.clientWidth * devicePixelRatio;
-        const height = canvasElement.clientHeight * devicePixelRatio;
-        this.fabricCanvas.setDimensions({ width, height });
         this.fabricCanvas.setViewportTransform([1, 0, 0, 1, 0, 0]);
         this.fabricCanvas.setZoom(devicePixelRatio);
         //Initialize watchers
@@ -3847,9 +3845,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-4",
+  "version": "2.0.20-beta-6",
   "description": "Leapfrog interactive canvas",
   "files": [
     "dist"