@leapfrog/interactive-canvas 1.10.1 → 1.11.0

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

@@ -294,6 +294,16 @@ export declare abstract class AbstractInteractiveCanvas implements IInteractiveC
      * @inheritDoc
      */
     createPNGStream(): any;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    registerUndoState(): void;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    undo(): Promise<void>;
     /**
      * Redraw the canvas.
      */

package/dist/interactive-canvas.d.ts

@@ -1,7 +1,19 @@
 import { AbstractInteractiveCanvas } from "./abstract-interactive-canvas";
 export declare class InteractiveCanvas extends AbstractInteractiveCanvas {
     protected devicePixelRatio: number;
+    private readonly undoStack;
+    private undoSub;
     constructor(elementId: string, devicePixelRatio: number);
+    /**
+     * @override
+     * @inheritDoc
+     */
+    registerUndoState(): void;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    undo(): Promise<void>;
     private onFabricSelectionChanged;
     private enterTextSelectionModeIfRequired;
     private onTextEditing;

package/dist/interactive-canvas.es.js

@@ -1,5 +1,5 @@
 import * as _ from 'lodash';
-import { round, each, values, reduce, clone, replace, find } from 'lodash';
+import { round, each, values, reduce, clone, replace, find, isEqual } from 'lodash';
 import { oc } from 'ts-optchain';
 import { BehaviorSubject, Subject } from 'rxjs';
 import { fabric } from 'fabric';
@@ -3321,14 +3321,12 @@ var AbstractInteractiveCanvas = /** @class */ (function () {
             .value();
         var includedProperties = ["id"];
         var json = this.fabricCanvas.toJSON(includedProperties);
-        var state = {
+        return {
             dimensions: this.dimensions$.value,
             canvasJson: JSON.stringify(json),
             objects: objects,
             backgroundColor: this.backgroundColor$.value
         };
-        console.debug("Saving canvas state", state);
-        return state;
     };
     /**
      * @override
@@ -3354,6 +3352,7 @@ var AbstractInteractiveCanvas = /** @class */ (function () {
                     case 2:
                         if (canvasState.backgroundColor)
                             this.setBackgroundColor(canvasState.backgroundColor);
+                        this.backgroundColor$.next(this.fabricCanvas.backgroundColor);
                         this.bindFields(canvasState.objects);
                         this.removePersistedBullets();
                         this.layoutManager$.value.onInit();
@@ -3415,6 +3414,20 @@ var AbstractInteractiveCanvas = /** @class */ (function () {
     AbstractInteractiveCanvas.prototype.createPNGStream = function () {
         return this.fabricCanvas.createPNGStream();
     };
+    /**
+     * @override
+     * @inheritDoc
+     */
+    AbstractInteractiveCanvas.prototype.registerUndoState = function () {
+        throw Error("Undo not supported on this canvas type");
+    };
+    /**
+     * @override
+     * @inheritDoc
+     */
+    AbstractInteractiveCanvas.prototype.undo = function () {
+        throw Error("Undo not supported on this canvas type");
+    };
     /**
      * Redraw the canvas.
      */
@@ -3629,11 +3642,34 @@ var HeadlessInteractiveCanvas = /** @class */ (function (_super) {
     return HeadlessInteractiveCanvas;
 }(AbstractInteractiveCanvas));
 
+var UndoStack = /** @class */ (function () {
+    function UndoStack(size) {
+        this.stack = [];
+        this.size = size;
+    }
+    UndoStack.prototype.push = function (state) {
+        var prev = this.stack[this.stack.length - 1];
+        if (isEqual(prev, state)) {
+            console.error("Ignoring identical undo state"); //todo
+            return;
+        }
+        console.error("Undo Registered"); //todo
+        this.stack.push(state);
+        if (this.stack.length > this.size)
+            this.stack.splice(0, 1);
+    };
+    UndoStack.prototype.pop = function () {
+        return this.stack.pop();
+    };
+    return UndoStack;
+}());
+
 var InteractiveCanvas = /** @class */ (function (_super) {
     __extends(InteractiveCanvas, _super);
     function InteractiveCanvas(elementId, devicePixelRatio) {
         var _this = _super.call(this, window['fabric'], new window['fabric'].Canvas(elementId), devicePixelRatio) || this;
         _this.devicePixelRatio = devicePixelRatio;
+        _this.undoStack = new UndoStack(10);
         //Initialize watchers
         _this.fabricCanvas.on("selection:updated", function () { return _this.onFabricSelectionChanged(); });
         _this.fabricCanvas.on("selection:created", function () { return _this.onFabricSelectionChanged(); });
@@ -3643,6 +3679,34 @@ var InteractiveCanvas = /** @class */ (function (_super) {
         _this.fabricCanvas.on("text:changed", function () { return _this.onTextChange(); });
         return _this;
     }
+    /**
+     * @override
+     * @inheritDoc
+     */
+    InteractiveCanvas.prototype.registerUndoState = function () {
+        this.undoStack.push(this.save());
+    };
+    /**
+     * @override
+     * @inheritDoc
+     */
+    InteractiveCanvas.prototype.undo = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            var state;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        state = this.undoStack.pop();
+                        if (!state)
+                            return [2 /*return*/];
+                        return [4 /*yield*/, this.load(state)];
+                    case 1:
+                        _a.sent();
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
     InteractiveCanvas.prototype.onFabricSelectionChanged = function () {
         var selected = this.getFieldsByCanvasObject(this.fabricCanvas.getActiveObjects());
         console.debug("Selection changed", selected);

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

@@ -278,4 +278,12 @@ export interface IInteractiveCanvas {
      * Create a PNG stream of the canvas. Only works on headless canvas.
      */
     createPNGStream(): any;
+    /**
+     * Save the current state as an undo point.
+     */
+    registerUndoState(): void;
+    /**
+     * Revert the canvas state one entry.
+     */
+    undo(): Promise<void>;
 }

package/dist/interactive-canvas.js

@@ -3321,14 +3321,12 @@ var AbstractInteractiveCanvas = /** @class */ (function () {
             .value();
         var includedProperties = ["id"];
         var json = this.fabricCanvas.toJSON(includedProperties);
-        var state = {
+        return {
             dimensions: this.dimensions$.value,
             canvasJson: JSON.stringify(json),
             objects: objects,
             backgroundColor: this.backgroundColor$.value
         };
-        console.debug("Saving canvas state", state);
-        return state;
     };
     /**
      * @override
@@ -3354,6 +3352,7 @@ var AbstractInteractiveCanvas = /** @class */ (function () {
                     case 2:
                         if (canvasState.backgroundColor)
                             this.setBackgroundColor(canvasState.backgroundColor);
+                        this.backgroundColor$.next(this.fabricCanvas.backgroundColor);
                         this.bindFields(canvasState.objects);
                         this.removePersistedBullets();
                         this.layoutManager$.value.onInit();
@@ -3415,6 +3414,20 @@ var AbstractInteractiveCanvas = /** @class */ (function () {
     AbstractInteractiveCanvas.prototype.createPNGStream = function () {
         return this.fabricCanvas.createPNGStream();
     };
+    /**
+     * @override
+     * @inheritDoc
+     */
+    AbstractInteractiveCanvas.prototype.registerUndoState = function () {
+        throw Error("Undo not supported on this canvas type");
+    };
+    /**
+     * @override
+     * @inheritDoc
+     */
+    AbstractInteractiveCanvas.prototype.undo = function () {
+        throw Error("Undo not supported on this canvas type");
+    };
     /**
      * Redraw the canvas.
      */
@@ -3629,11 +3642,34 @@ var HeadlessInteractiveCanvas = /** @class */ (function (_super) {
     return HeadlessInteractiveCanvas;
 }(AbstractInteractiveCanvas));
 
+var UndoStack = /** @class */ (function () {
+    function UndoStack(size) {
+        this.stack = [];
+        this.size = size;
+    }
+    UndoStack.prototype.push = function (state) {
+        var prev = this.stack[this.stack.length - 1];
+        if (_.isEqual(prev, state)) {
+            console.error("Ignoring identical undo state"); //todo
+            return;
+        }
+        console.error("Undo Registered"); //todo
+        this.stack.push(state);
+        if (this.stack.length > this.size)
+            this.stack.splice(0, 1);
+    };
+    UndoStack.prototype.pop = function () {
+        return this.stack.pop();
+    };
+    return UndoStack;
+}());
+
 var InteractiveCanvas = /** @class */ (function (_super) {
     __extends(InteractiveCanvas, _super);
     function InteractiveCanvas(elementId, devicePixelRatio) {
         var _this = _super.call(this, window['fabric'], new window['fabric'].Canvas(elementId), devicePixelRatio) || this;
         _this.devicePixelRatio = devicePixelRatio;
+        _this.undoStack = new UndoStack(10);
         //Initialize watchers
         _this.fabricCanvas.on("selection:updated", function () { return _this.onFabricSelectionChanged(); });
         _this.fabricCanvas.on("selection:created", function () { return _this.onFabricSelectionChanged(); });
@@ -3643,6 +3679,34 @@ var InteractiveCanvas = /** @class */ (function (_super) {
         _this.fabricCanvas.on("text:changed", function () { return _this.onTextChange(); });
         return _this;
     }
+    /**
+     * @override
+     * @inheritDoc
+     */
+    InteractiveCanvas.prototype.registerUndoState = function () {
+        this.undoStack.push(this.save());
+    };
+    /**
+     * @override
+     * @inheritDoc
+     */
+    InteractiveCanvas.prototype.undo = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            var state;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        state = this.undoStack.pop();
+                        if (!state)
+                            return [2 /*return*/];
+                        return [4 /*yield*/, this.load(state)];
+                    case 1:
+                        _a.sent();
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
     InteractiveCanvas.prototype.onFabricSelectionChanged = function () {
         var selected = this.getFieldsByCanvasObject(this.fabricCanvas.getActiveObjects());
         console.debug("Selection changed", selected);

package/dist/undo-stack.d.ts

@@ -0,0 +1,8 @@
+import { ICanvasState } from "./types/canvas-state.interface";
+export declare class UndoStack {
+    private readonly size;
+    private stack;
+    constructor(size: number);
+    push(state: ICanvasState): void;
+    pop(): ICanvasState;
+}

package/package.json

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