@leapfrog/interactive-canvas 1.6.0 → 1.8.0

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

@@ -21,6 +21,7 @@ import { ISelectionData } from "./types/selection-data.interface";
 import { ICanvasState } from "./types/canvas-state.interface";
 import { ITextSelection } from "./mutator/mutable-text-style.interface";
 import { fabric } from "fabric";
+import { IRichText } from "./object/impl/rich-text";
 export declare abstract class AbstractInteractiveCanvas implements IInteractiveCanvas {
     fabric: any;
     protected readonly fabricCanvas: fabric.Canvas;
@@ -188,6 +189,11 @@ export declare abstract class AbstractInteractiveCanvas implements IInteractiveC
      * @inheritDoc
      */
     addTextObject(): Promise<IText>;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    addRichTextObject(imageUrl: string, htmlContent: string): Promise<IRichText>;
     /**
      * @override
      * @inheritDoc
@@ -276,7 +282,7 @@ export declare abstract class AbstractInteractiveCanvas implements IInteractiveC
      * @override
      * @inheritDoc
      */
-    toImage(): string;
+    toImage(multiplier?: number): string;
     /**
      * @override
      * @inheritDoc

package/dist/interactive-canvas.es.js

@@ -391,7 +391,7 @@ var StackObjectsLayoutFunction = /** @class */ (function () {
     StackObjectsLayoutFunction.prototype.execute = function (canvas) {
         var canvasMargin = canvas.getMargin();
         var canvasDimensions = canvas.getDimensions();
-        var allObjects = canvas.getObjectsByTypesInternal(ObjectType.TEXT, ObjectType.IMAGE, ObjectType.RECTANGLE, ObjectType.VERTICAL_RULE, ObjectType.HORIZONTAL_RULE);
+        var allObjects = canvas.getObjectsByTypesInternal(ObjectType.TEXT, ObjectType.RICH_TEXT, ObjectType.IMAGE, ObjectType.RECTANGLE, ObjectType.VERTICAL_RULE, ObjectType.HORIZONTAL_RULE);
         var objects = _(allObjects)
             .partition(function (object) { return object.isPinToBottom(); })
             .value();
@@ -2415,8 +2415,60 @@ var ObjectType;
     ObjectType["CUTOFF"] = "CUTOFF";
     ObjectType["VERTICAL_RULE"] = "VERTICAL_RULE";
     ObjectType["HORIZONTAL_RULE"] = "HORIZONTAL_RULE";
+    ObjectType["RICH_TEXT"] = "RICH_TEXT";
 })(ObjectType || (ObjectType = {}));
 
+var RichText = /** @class */ (function (_super) {
+    __extends(RichText, _super);
+    function RichText(canvas, fabricObject, persistedField) {
+        var _this = _super.call(this, canvas, fabricObject, persistedField) || this;
+        _this.data.type = ObjectType.RICH_TEXT;
+        return _this;
+    }
+    Object.defineProperty(RichText.prototype, "htmlContent", {
+        /**
+         * @override
+         * @inheritDoc
+         */
+        get: function () {
+            return this.data.userText;
+        },
+        /**
+         * @override
+         * @inheritDoc
+         */
+        set: function (text) {
+            this.data.userText = text;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    /**
+     * @override
+     * @inheritDoc
+     */
+    RichText.prototype.setRichTextContent = function (renderedContentUrl, htmlContent) {
+        return __awaiter(this, void 0, void 0, function () {
+            var canvasWidthPx;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        canvasWidthPx = this.canvas.getDimensions().widthPx;
+                        if (!renderedContentUrl)
+                            return [2 /*return*/];
+                        this.htmlContent = htmlContent;
+                        return [4 /*yield*/, this.setImageUrl(renderedContentUrl)];
+                    case 1:
+                        _a.sent();
+                        this.setImageWidth(canvasWidthPx);
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    return RichText;
+}(Image));
+
 var AbstractInteractiveCanvas = /** @class */ (function () {
     function AbstractInteractiveCanvas(fabric, fabricCanvas, devicePixelRatio) {
         this.fabric = fabric;
@@ -2784,6 +2836,48 @@ var AbstractInteractiveCanvas = /** @class */ (function () {
             });
         });
     };
+    /**
+     * @override
+     * @inheritDoc
+     */
+    AbstractInteractiveCanvas.prototype.addRichTextObject = function (imageUrl, htmlContent) {
+        return __awaiter(this, void 0, void 0, function () {
+            var maxSizeScale, maxWidth, options;
+            var _this = this;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        maxSizeScale = 2;
+                        maxWidth = this.dimensions$.value.widthPx / maxSizeScale;
+                        options = { crossOrigin: "anonymous" };
+                        return [4 /*yield*/, new Promise(function (resolve) {
+                                _this.fabric.Image.fromURL(imageUrl, function (fabricImage) {
+                                    var id = _this.randomId();
+                                    var newScale = 1;
+                                    var curWidth = newScale * fabricImage.width;
+                                    if (curWidth > maxWidth) {
+                                        newScale = maxWidth / curWidth;
+                                    }
+                                    fabricImage.set({
+                                        id: id,
+                                        scaleX: newScale,
+                                        scaleY: newScale
+                                    });
+                                    _this.fabricCanvas.add(fabricImage);
+                                    var object = new RichText(_this, fabricImage);
+                                    object.htmlContent = htmlContent;
+                                    _this.trackNewObject(object);
+                                    object.setImageWidth(_this.dimensions$.value.widthPx);
+                                    _this.selectFabricObject(fabricImage);
+                                    _this.syncObjectList();
+                                    resolve(object);
+                                }, options);
+                            })];
+                    case 1: return [2 /*return*/, _a.sent()];
+                }
+            });
+        });
+    };
     /**
      * @override
      * @inheritDoc
@@ -3093,11 +3187,11 @@ var AbstractInteractiveCanvas = /** @class */ (function () {
      * @override
      * @inheritDoc
      */
-    AbstractInteractiveCanvas.prototype.toImage = function () {
+    AbstractInteractiveCanvas.prototype.toImage = function (multiplier) {
         var _this = this;
         var options = {
             format: "png",
-            multiplier: this.IMAGE_CAPTURE_COEFFICIENT,
+            multiplier: multiplier || this.IMAGE_CAPTURE_COEFFICIENT,
             enableRetinaScaling: true
         };
         console.debug("Capturing canvas image", options);
@@ -3201,6 +3295,8 @@ var AbstractInteractiveCanvas = /** @class */ (function () {
                 return new HorizontalRule(this, fabricObject, persistedField);
             case ObjectType.VERTICAL_RULE:
                 return new VerticalRule(this, fabricObject, persistedField);
+            case ObjectType.RICH_TEXT:
+                return new RichText(this, fabricObject, persistedField);
             default:
                 throw new Error("Unknown field type: [" + persistedField.type + "]");
         }

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

@@ -19,6 +19,7 @@ import { ICanvasState } from "./types/canvas-state.interface";
 import { AbstractCanvasObject } from "./object/abstract-canvas-object";
 import { ObjectType } from "./types/object-type.enum";
 import { fabric } from "fabric";
+import { IRichText } from "./object/impl/rich-text";
 /**
  * New leapfrog canvas implementation c. 2019.
  */
@@ -146,6 +147,12 @@ export interface IInteractiveCanvas {
      * Add a text object to the canvas.
      */
     addTextObject(): Promise<IText>;
+    /**
+     * Add a rich text element to the canvas.
+     * @param imageUrl Url for text-rendered-as-image content.
+     * @param htmlContent Rich-text content as HTML.
+     */
+    addRichTextObject(imageUrl: string, htmlContent: string): Promise<IRichText>;
     /**
      * Add a rectangle object to the canvas.
      */
@@ -219,8 +226,9 @@ export interface IInteractiveCanvas {
     toSvg(): string;
     /**
      * Export the canvas to a DataUrl image.
+     * @param multiplier Multiply the image pixel density by this amount.
      */
-    toImage(): string;
+    toImage(multiplier?: number): string;
     /**
      * Notify the canvas that the object list has changed.
      */

package/dist/interactive-canvas.js

@@ -393,7 +393,7 @@ var StackObjectsLayoutFunction = /** @class */ (function () {
     StackObjectsLayoutFunction.prototype.execute = function (canvas) {
         var canvasMargin = canvas.getMargin();
         var canvasDimensions = canvas.getDimensions();
-        var allObjects = canvas.getObjectsByTypesInternal(exports.ObjectType.TEXT, exports.ObjectType.IMAGE, exports.ObjectType.RECTANGLE, exports.ObjectType.VERTICAL_RULE, exports.ObjectType.HORIZONTAL_RULE);
+        var allObjects = canvas.getObjectsByTypesInternal(exports.ObjectType.TEXT, exports.ObjectType.RICH_TEXT, exports.ObjectType.IMAGE, exports.ObjectType.RECTANGLE, exports.ObjectType.VERTICAL_RULE, exports.ObjectType.HORIZONTAL_RULE);
         var objects = _(allObjects)
             .partition(function (object) { return object.isPinToBottom(); })
             .value();
@@ -2415,8 +2415,60 @@ var DefaultCanvasProfile = /** @class */ (function () {
     ObjectType["CUTOFF"] = "CUTOFF";
     ObjectType["VERTICAL_RULE"] = "VERTICAL_RULE";
     ObjectType["HORIZONTAL_RULE"] = "HORIZONTAL_RULE";
+    ObjectType["RICH_TEXT"] = "RICH_TEXT";
 })(exports.ObjectType || (exports.ObjectType = {}));
 
+var RichText = /** @class */ (function (_super) {
+    __extends(RichText, _super);
+    function RichText(canvas, fabricObject, persistedField) {
+        var _this = _super.call(this, canvas, fabricObject, persistedField) || this;
+        _this.data.type = exports.ObjectType.RICH_TEXT;
+        return _this;
+    }
+    Object.defineProperty(RichText.prototype, "htmlContent", {
+        /**
+         * @override
+         * @inheritDoc
+         */
+        get: function () {
+            return this.data.userText;
+        },
+        /**
+         * @override
+         * @inheritDoc
+         */
+        set: function (text) {
+            this.data.userText = text;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    /**
+     * @override
+     * @inheritDoc
+     */
+    RichText.prototype.setRichTextContent = function (renderedContentUrl, htmlContent) {
+        return __awaiter(this, void 0, void 0, function () {
+            var canvasWidthPx;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        canvasWidthPx = this.canvas.getDimensions().widthPx;
+                        if (!renderedContentUrl)
+                            return [2 /*return*/];
+                        this.htmlContent = htmlContent;
+                        return [4 /*yield*/, this.setImageUrl(renderedContentUrl)];
+                    case 1:
+                        _a.sent();
+                        this.setImageWidth(canvasWidthPx);
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    return RichText;
+}(Image));
+
 var AbstractInteractiveCanvas = /** @class */ (function () {
     function AbstractInteractiveCanvas(fabric, fabricCanvas, devicePixelRatio) {
         this.fabric = fabric;
@@ -2784,6 +2836,48 @@ var AbstractInteractiveCanvas = /** @class */ (function () {
             });
         });
     };
+    /**
+     * @override
+     * @inheritDoc
+     */
+    AbstractInteractiveCanvas.prototype.addRichTextObject = function (imageUrl, htmlContent) {
+        return __awaiter(this, void 0, void 0, function () {
+            var maxSizeScale, maxWidth, options;
+            var _this = this;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        maxSizeScale = 2;
+                        maxWidth = this.dimensions$.value.widthPx / maxSizeScale;
+                        options = { crossOrigin: "anonymous" };
+                        return [4 /*yield*/, new Promise(function (resolve) {
+                                _this.fabric.Image.fromURL(imageUrl, function (fabricImage) {
+                                    var id = _this.randomId();
+                                    var newScale = 1;
+                                    var curWidth = newScale * fabricImage.width;
+                                    if (curWidth > maxWidth) {
+                                        newScale = maxWidth / curWidth;
+                                    }
+                                    fabricImage.set({
+                                        id: id,
+                                        scaleX: newScale,
+                                        scaleY: newScale
+                                    });
+                                    _this.fabricCanvas.add(fabricImage);
+                                    var object = new RichText(_this, fabricImage);
+                                    object.htmlContent = htmlContent;
+                                    _this.trackNewObject(object);
+                                    object.setImageWidth(_this.dimensions$.value.widthPx);
+                                    _this.selectFabricObject(fabricImage);
+                                    _this.syncObjectList();
+                                    resolve(object);
+                                }, options);
+                            })];
+                    case 1: return [2 /*return*/, _a.sent()];
+                }
+            });
+        });
+    };
     /**
      * @override
      * @inheritDoc
@@ -3093,11 +3187,11 @@ var AbstractInteractiveCanvas = /** @class */ (function () {
      * @override
      * @inheritDoc
      */
-    AbstractInteractiveCanvas.prototype.toImage = function () {
+    AbstractInteractiveCanvas.prototype.toImage = function (multiplier) {
         var _this = this;
         var options = {
             format: "png",
-            multiplier: this.IMAGE_CAPTURE_COEFFICIENT,
+            multiplier: multiplier || this.IMAGE_CAPTURE_COEFFICIENT,
             enableRetinaScaling: true
         };
         console.debug("Capturing canvas image", options);
@@ -3201,6 +3295,8 @@ var AbstractInteractiveCanvas = /** @class */ (function () {
                 return new HorizontalRule(this, fabricObject, persistedField);
             case exports.ObjectType.VERTICAL_RULE:
                 return new VerticalRule(this, fabricObject, persistedField);
+            case exports.ObjectType.RICH_TEXT:
+                return new RichText(this, fabricObject, persistedField);
             default:
                 throw new Error("Unknown field type: [" + persistedField.type + "]");
         }

package/dist/object/impl/rich-text.d.ts

@@ -0,0 +1,39 @@
+import { CanvasObjectData, IInteractiveCanvas, Image, IMutableImage, IMutablePosition } from "../..";
+import { ICanvasObject } from "../canvas-object.interface";
+import { fabric } from "fabric";
+/**
+ * Rich text field.
+ * Displays complex text by taking a rendered image of a html block of rich text and displays it on the canvas.
+ * The rendering of the text content to an image must be handled by the caller.
+ * This is an attempt to work around the poor rich-text support of fabric, which supports virtually no rich-text features on the canvas itself.
+ */
+export interface IRichText extends ICanvasObject, IMutableImage, IMutablePosition {
+    /**
+     * HTML rich text content.
+     */
+    htmlContent: string;
+    /**
+     * Set the rich text content by providing the rendered image version of the content and the html content.
+     * @param renderedContentUrl Rendered version of the rich-text content.
+     * @param htmlContent Html version of the rich text content.
+     */
+    setRichTextContent(renderedContentUrl: string, htmlContent: string): Promise<void>;
+}
+export declare class RichText extends Image implements IRichText {
+    constructor(canvas: IInteractiveCanvas, fabricObject: fabric.Image, persistedField?: CanvasObjectData);
+    /**
+     * @override
+     * @inheritDoc
+     */
+    get htmlContent(): string;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    set htmlContent(text: string);
+    /**
+     * @override
+     * @inheritDoc
+     */
+    setRichTextContent(renderedContentUrl: string, htmlContent: string): Promise<void>;
+}

package/dist/types/object-type.enum.d.ts

@@ -6,5 +6,6 @@ export declare enum ObjectType {
     LIBRARY_IMAGE = "LIBRARY_IMAGE",
     CUTOFF = "CUTOFF",
     VERTICAL_RULE = "VERTICAL_RULE",
-    HORIZONTAL_RULE = "HORIZONTAL_RULE"
+    HORIZONTAL_RULE = "HORIZONTAL_RULE",
+    RICH_TEXT = "RICH_TEXT"
 }

package/package.json

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