@leapfrog/interactive-canvas 2.0.21-beta-2 → 2.0.21

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

@@ -19,6 +19,7 @@ import { ObjectType } from "./types/object-type.enum";
 import { ICanvasObject } from "./object/canvas-object.interface";
 import { ISelectionData } from "./types/selection-data.interface";
 import { ICanvasState } from "./types/canvas-state.interface";
+import { CanvasObjectData } from "./object/canvas-object-data";
 import { ITextSelection } from "./mutator/mutable-text-style.interface";
 import { TEvent, FabricObject, Canvas } from "fabric";
 import { IRichText } from "./object/impl/rich-text";
@@ -334,6 +335,11 @@ export declare abstract class AbstractInteractiveCanvas implements IInteractiveC
      * @inheritDoc
      */
     redo(): Promise<void>;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    cloneObject(sourceObject: FabricObject, objectData: CanvasObjectData): Promise<void>;
     /**
      * Redraw the canvas.
      */

package/dist/interactive-canvas.es.js

@@ -1,4 +1,4 @@
-import _, { round, each, values, reduce, clone, isEqual } from 'lodash';
+import _, { round, each, values, reduce, clone, max, isEqual } from 'lodash';
 import { BehaviorSubject, Subject } from 'rxjs';
 import * as fabric from 'fabric';
 
@@ -533,6 +533,38 @@ function isMutableText(object) {
     return "setText" in object;
 }
 
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
+
+
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
 /**
  * Data for a persisted canvas object.
  */
@@ -765,6 +797,15 @@ class AbstractCanvasObject {
         this.canvas.removeObject(this);
         this.onDelete();
     }
+    /**
+     * @override
+     * @inheritDoc
+     */
+    clone() {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.canvas.cloneObject(this.fabricObject, this.data);
+        });
+    }
     /**
      * @override
      * @inheritDoc
@@ -1020,38 +1061,6 @@ class FieldDimensions {
     }
 }
 
-/******************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
-
-
-function __awaiter(thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-}
-
-typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
-    var e = new Error(message);
-    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
-};
-
 class BackgroundImage extends AbstractCanvasObject {
     constructor(canvas, fabricObject, persistedField) {
         super(ObjectType.BACKGROUND_IMAGE, canvas, fabricObject, persistedField);
@@ -1777,7 +1786,7 @@ class Text extends AbstractCanvasObject {
         this.data.userText = this.fabricObject.text;
         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("changed", () => this.onTextChange());
         this.fabricObject.on("selection:changed", () => this.onSelectionChange());
         this.applyBulletListMonkeyPatches();
     }
@@ -2028,11 +2037,12 @@ class Text extends AbstractCanvasObject {
      */
     setFontSize(fontSize) {
         if (this.hasTextSelection()) {
-            this.fabricObject.setSelectionStyles({ fontSize });
+            this.fabricObject.setSelectionStyles({ fontSize: fontSize });
         }
         else {
             this.fabricObject.set({ fontSize: fontSize });
         }
+        this.fabricObject.dirty = true;
         this.redraw();
         this.updateTextSelection();
     }
@@ -2130,7 +2140,7 @@ class Text extends AbstractCanvasObject {
         if (!this.isBulleted())
             return 0;
         let fontSize = 0;
-        _.each(this.fabricObject._textLines, (textLine, lineIndex) => {
+        each(this.fabricObject._textLines, (textLine, lineIndex) => {
             fontSize = Math.max(fontSize, this.fabricObject.getValueOfPropertyAt(lineIndex, 0, "fontSize"));
         });
         return fontSize * 0.6;
@@ -2143,11 +2153,10 @@ class Text extends AbstractCanvasObject {
         if (!this.isOrderedList())
             return 0;
         const orderedListMarkerEntities = this.fabricObject._orderedListMarkerEntities;
-        let max = _(orderedListMarkerEntities)
+        let maxValue = max((orderedListMarkerEntities !== null && orderedListMarkerEntities !== void 0 ? orderedListMarkerEntities : [])
             .filter((x) => !!x)
-            .map((x) => x.getBoundingRect().width)
-            .max();
-        return max ? (max * 1.2) : 0;
+            .map((x) => x.getBoundingRect().width));
+        return maxValue ? (maxValue * 1.2) : 0;
     }
     /**
      * @override
@@ -2281,7 +2290,7 @@ class Text extends AbstractCanvasObject {
         if (this.data.bulleted) {
             const bullets = this.fabricObject["_bullets"];
             delete this.fabricObject["_bullets"];
-            _.each(bullets, (bullet) => this.canvas.removeFabricObject(bullet));
+            each(bullets, (bullet) => this.canvas.removeFabricObject(bullet));
             this.fabricObject["objectCaching"] = true;
         }
     }
@@ -2289,7 +2298,7 @@ class Text extends AbstractCanvasObject {
         if (this.fabricObject._isOrderedList) {
             const markerEntities = this.fabricObject._orderedListMarkerEntities;
             delete this.fabricObject._orderedListMarkerEntities;
-            _.each(markerEntities, (marker) => this.canvas.removeFabricObject(marker));
+            each(markerEntities, (marker) => this.canvas.removeFabricObject(marker));
             this.fabricObject["objectCaching"] = true;
         }
     }
@@ -2306,7 +2315,7 @@ class Text extends AbstractCanvasObject {
                 // Determine list of active bullets
                 const currentBullets = this.fabricObject.get("_bullets");
                 const activeBullets = {};
-                _.each(this.fabricObject._textLines, (textLine, lineIndex) => {
+                each(this.fabricObject._textLines, (textLine, lineIndex) => {
                     if (textLine.length) {
                         // Start of real lines will have offset 0 in styleMap
                         const styleMap = this.fabricObject._styleMap[lineIndex];
@@ -2343,13 +2352,13 @@ class Text extends AbstractCanvasObject {
                 let canvasDirty = false;
                 if (canvas) {
                     canvas.renderOnAddRemove = false;
-                    _.each(activeBullets, (bullet) => {
+                    each(activeBullets, (bullet) => {
                         if (!canvas.contains(bullet)) {
                             canvas.add(bullet);
                             canvasDirty = true;
                         }
                     });
-                    _.each(currentBullets, (bullet, key) => {
+                    each(currentBullets, (bullet, key) => {
                         if (!activeBullets[key]) {
                             canvas.remove(bullet);
                             canvasDirty = true;
@@ -2366,7 +2375,7 @@ class Text extends AbstractCanvasObject {
             if (this.fabricObject._isOrderedList) {
                 const existingMarkers = (_a = this.fabricObject._orderedListMarkerEntities) !== null && _a !== void 0 ? _a : [];
                 const activeMarkers = [];
-                _.each(this.fabricObject._textLines, (textLine, lineIndex) => {
+                each(this.fabricObject._textLines, (textLine, lineIndex) => {
                     if (textLine.length) {
                         // Start of real lines will have offset 0 in styleMap
                         const styleMap = this.fabricObject._styleMap[lineIndex];
@@ -2402,7 +2411,7 @@ class Text extends AbstractCanvasObject {
                 let canvasDirty = false;
                 if (canvas) {
                     canvas.renderOnAddRemove = false;
-                    _.each(activeMarkers, (marker) => {
+                    each(activeMarkers, (marker) => {
                         if (!marker)
                             return;
                         if (!canvas.contains(marker)) {
@@ -2410,7 +2419,7 @@ class Text extends AbstractCanvasObject {
                             canvasDirty = true;
                         }
                     });
-                    _.each(existingMarkers, (marker, key) => {
+                    each(existingMarkers, (marker, key) => {
                         if (!marker)
                             return;
                         if (!activeMarkers[key]) {
@@ -3502,6 +3511,33 @@ class AbstractInteractiveCanvas {
     redo() {
         throw new Error("Redo not supported on this canvas type");
     }
+    /**
+     * @override
+     * @inheritDoc
+     */
+    cloneObject(sourceObject, objectData) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (sourceObject && (sourceObject.type === 'text' || sourceObject.type === 'textbox')) {
+                const clonedObject = yield sourceObject.clone(["id", "_isSlaveObject", "_isOrderedList", "_orderedListStart"]);
+                const newId = this.randomId();
+                clonedObject.set({
+                    id: newId,
+                    top: clonedObject.top + 20,
+                    evented: true
+                });
+                const newObjectData = new CanvasObjectData(ObjectType.TEXT, newId);
+                newObjectData.bulleted = objectData.bulleted;
+                newObjectData.columnWidthPercent = objectData.columnWidthPercent;
+                newObjectData.margin = objectData.margin;
+                this.fabricCanvas.add(clonedObject);
+                const newTextObject = new Text(this, clonedObject, newObjectData);
+                newTextObject.setCoords();
+                this.trackNewObject(newTextObject);
+                this.selectFabricObject(clonedObject);
+                this.syncObjectList();
+            }
+        });
+    }
     /**
      * Redraw the canvas.
      */

package/dist/interactive-canvas.interface.d.ts

@@ -21,6 +21,7 @@ import { ObjectType } from "./types/object-type.enum";
 import { IRichText } from "./object/impl/rich-text";
 import { IBackgroundImage } from "./object/impl/background-image";
 import { FabricObject } from "fabric";
+import { CanvasObjectData } from "./object/canvas-object-data";
 /**
  * New leapfrog canvas implementation c. 2019.
  */
@@ -314,4 +315,8 @@ export interface IInteractiveCanvas {
      * Revert the canvas state one entry.
      */
     redo(): Promise<void>;
+    /**
+     * Clone text box object to the canvas.
+     */
+    cloneObject(object: FabricObject, data: CanvasObjectData): Promise<void>;
 }

package/dist/interactive-canvas.js

@@ -554,6 +554,38 @@ function isMutableText(object) {
     return "setText" in object;
 }
 
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
+
+
+function __awaiter(thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
 /**
  * Data for a persisted canvas object.
  */
@@ -786,6 +818,15 @@ class AbstractCanvasObject {
         this.canvas.removeObject(this);
         this.onDelete();
     }
+    /**
+     * @override
+     * @inheritDoc
+     */
+    clone() {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.canvas.cloneObject(this.fabricObject, this.data);
+        });
+    }
     /**
      * @override
      * @inheritDoc
@@ -1041,38 +1082,6 @@ class FieldDimensions {
     }
 }
 
-/******************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
-
-
-function __awaiter(thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-}
-
-typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
-    var e = new Error(message);
-    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
-};
-
 class BackgroundImage extends AbstractCanvasObject {
     constructor(canvas, fabricObject, persistedField) {
         super(exports.ObjectType.BACKGROUND_IMAGE, canvas, fabricObject, persistedField);
@@ -1798,7 +1807,7 @@ class Text extends AbstractCanvasObject {
         this.data.userText = this.fabricObject.text;
         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("changed", () => this.onTextChange());
         this.fabricObject.on("selection:changed", () => this.onSelectionChange());
         this.applyBulletListMonkeyPatches();
     }
@@ -2049,11 +2058,12 @@ class Text extends AbstractCanvasObject {
      */
     setFontSize(fontSize) {
         if (this.hasTextSelection()) {
-            this.fabricObject.setSelectionStyles({ fontSize });
+            this.fabricObject.setSelectionStyles({ fontSize: fontSize });
         }
         else {
             this.fabricObject.set({ fontSize: fontSize });
         }
+        this.fabricObject.dirty = true;
         this.redraw();
         this.updateTextSelection();
     }
@@ -2164,11 +2174,10 @@ class Text extends AbstractCanvasObject {
         if (!this.isOrderedList())
             return 0;
         const orderedListMarkerEntities = this.fabricObject._orderedListMarkerEntities;
-        let max = _(orderedListMarkerEntities)
+        let maxValue = _.max((orderedListMarkerEntities !== null && orderedListMarkerEntities !== void 0 ? orderedListMarkerEntities : [])
             .filter((x) => !!x)
-            .map((x) => x.getBoundingRect().width)
-            .max();
-        return max ? (max * 1.2) : 0;
+            .map((x) => x.getBoundingRect().width));
+        return maxValue ? (maxValue * 1.2) : 0;
     }
     /**
      * @override
@@ -3523,6 +3532,33 @@ class AbstractInteractiveCanvas {
     redo() {
         throw new Error("Redo not supported on this canvas type");
     }
+    /**
+     * @override
+     * @inheritDoc
+     */
+    cloneObject(sourceObject, objectData) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (sourceObject && (sourceObject.type === 'text' || sourceObject.type === 'textbox')) {
+                const clonedObject = yield sourceObject.clone(["id", "_isSlaveObject", "_isOrderedList", "_orderedListStart"]);
+                const newId = this.randomId();
+                clonedObject.set({
+                    id: newId,
+                    top: clonedObject.top + 20,
+                    evented: true
+                });
+                const newObjectData = new CanvasObjectData(exports.ObjectType.TEXT, newId);
+                newObjectData.bulleted = objectData.bulleted;
+                newObjectData.columnWidthPercent = objectData.columnWidthPercent;
+                newObjectData.margin = objectData.margin;
+                this.fabricCanvas.add(clonedObject);
+                const newTextObject = new Text(this, clonedObject, newObjectData);
+                newTextObject.setCoords();
+                this.trackNewObject(newTextObject);
+                this.selectFabricObject(clonedObject);
+                this.syncObjectList();
+            }
+        });
+    }
     /**
      * Redraw the canvas.
      */

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

@@ -124,6 +124,11 @@ export declare abstract class AbstractCanvasObject<T extends FabricObject> imple
      * @inheritDoc
      */
     delete(): void;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    clone(): Promise<void>;
     /**
      * @override
      * @inheritDoc

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

@@ -93,6 +93,10 @@ export interface ICanvasObject {
      * Delete this object, removing it from the canvas.
      */
     delete(): void;
+    /**
+     * Clone the text object, adding it to the canvas.
+     */
+    clone(): void;
     /**
      * Persist this object, returning a copy of the data block.
      */

package/package.json

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