@leapfrog/interactive-canvas 1.11.2 → 1.12.1

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

@@ -304,6 +304,11 @@ export declare abstract class AbstractInteractiveCanvas implements IInteractiveC
      * @inheritDoc
      */
     undo(): Promise<void>;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    redo(): Promise<void>;
     /**
      * Redraw the canvas.
      */

package/dist/interactive-canvas.d.ts

@@ -13,6 +13,11 @@ export declare class InteractiveCanvas extends AbstractInteractiveCanvas {
      * @inheritDoc
      */
     undo(): Promise<void>;
+    /**
+     * @override
+     * @inheritDoc
+     */
+    redo(): Promise<void>;
     private onFabricSelectionChanged;
     private enterTextSelectionModeIfRequired;
     private onTextEditing;

package/dist/interactive-canvas.es.js

@@ -284,63 +284,6 @@ var RedrawAllLayoutFunction = /** @class */ (function () {
     return RedrawAllLayoutFunction;
 }());
 
-var RepositionCutoffsLayoutFunction = /** @class */ (function () {
-    function RepositionCutoffsLayoutFunction() {
-    }
-    RepositionCutoffsLayoutFunction.prototype.execute = function (canvas) {
-        canvas.getObjectsByTypeInternal(ObjectType.CUTOFF)
-            .forEach(function (cutoff) { return cutoff.updatePosition(); });
-    };
-    return RepositionCutoffsLayoutFunction;
-}());
-
-var RepositionBordersLayoutFunction = /** @class */ (function () {
-    function RepositionBordersLayoutFunction() {
-    }
-    RepositionBordersLayoutFunction.prototype.execute = function (canvas) {
-        canvas.getObjectsByTypeInternal(ObjectType.BORDER)
-            .forEach(function (border) { return border.updatePosition(); });
-    };
-    return RepositionBordersLayoutFunction;
-}());
-
-var PinToBottomLayoutFunction = /** @class */ (function () {
-    function PinToBottomLayoutFunction() {
-    }
-    PinToBottomLayoutFunction.prototype.execute = function (canvas) {
-        canvas.getObjectsInternal()
-            .forEach(function (object) { return object.moveToPinnedPosition(); });
-    };
-    return PinToBottomLayoutFunction;
-}());
-
-var ResizeCanvasLayoutFunction = /** @class */ (function () {
-    function ResizeCanvasLayoutFunction() {
-    }
-    ResizeCanvasLayoutFunction.prototype.execute = function (canvas) {
-        if (canvas.getLayoutManager().isEnforcedPositioning)
-            return;
-        if (oc(canvas.getDimensionsRestrictions()).fixed(false))
-            return;
-        var currentDimensions = canvas.getDimensions();
-        var baseDimensions = canvas.getBaseDimensions();
-        var textHeightIncreasePx = _(canvas.getObjectsByTypeInternal(ObjectType.TEXT))
-            .filter(function (text) { return text.isResizeCanvas(); })
-            .reduce(function (x, text) { return x + text.getSizeIncreaseSinceCreation(); }, 0);
-        var increase = baseDimensions.withSize(currentDimensions.width, 0);
-        while (increase.heightPx < textHeightIncreasePx) {
-            increase = increase.withSize(increase.width, increase.height + 1);
-        }
-        var targetHeight = increase.withSize(increase.width, baseDimensions.height + increase.height);
-        if (currentDimensions.height !== targetHeight.height) {
-            canvas.setDimensions(targetHeight);
-        }
-        canvas.getObjectsInternal().forEach(function (object) { return object.setCoords(); });
-        canvas.redraw();
-    };
-    return ResizeCanvasLayoutFunction;
-}());
-
 var LayoutManager;
 (function (LayoutManager) {
     LayoutManager["LEGACY"] = "LEGACY";
@@ -348,45 +291,6 @@ var LayoutManager;
     LayoutManager["ADVANCED"] = "ADVANCED";
 })(LayoutManager || (LayoutManager = {}));
 
-var RepositionBackgroundsLayoutFunction = /** @class */ (function () {
-    function RepositionBackgroundsLayoutFunction() {
-    }
-    RepositionBackgroundsLayoutFunction.prototype.execute = function (canvas) {
-        canvas.getObjectsByTypeInternal(ObjectType.BACKGROUND_IMAGE)
-            .forEach(function (border) { return border.updatePosition(); });
-    };
-    return RepositionBackgroundsLayoutFunction;
-}());
-
-var AdvancedLayoutManager = /** @class */ (function (_super) {
-    __extends(AdvancedLayoutManager, _super);
-    function AdvancedLayoutManager(canvas) {
-        var _this = _super.call(this, canvas) || this;
-        _this.key = LayoutManager.ADVANCED;
-        _this.pinToBottom = new PinToBottomLayoutFunction();
-        _this.redrawAll = new RedrawAllLayoutFunction();
-        _this.repositionBorders = new RepositionBordersLayoutFunction();
-        _this.repositionCutoffs = new RepositionCutoffsLayoutFunction();
-        _this.repositionBackgrounds = new RepositionBackgroundsLayoutFunction();
-        _this.resizeCanvas = new ResizeCanvasLayoutFunction();
-        return _this;
-    }
-    AdvancedLayoutManager.prototype.onCanvasDimensionsChange = function () {
-        this.pinToBottom.execute(this.canvas);
-        this.repositionCutoffs.execute(this.canvas);
-        this.repositionBorders.execute(this.canvas);
-        this.repositionBackgrounds.execute(this.canvas);
-        this.redrawAll.execute(this.canvas);
-    };
-    AdvancedLayoutManager.prototype.onTextChange = function () {
-        this.resizeCanvas.execute(this.canvas);
-    };
-    AdvancedLayoutManager.prototype.onObjectListChange = function () {
-        this.redrawAll.execute(this.canvas);
-    };
-    return AdvancedLayoutManager;
-}(AbstractLayoutManager));
-
 var UpdateObjectDimensionsLayoutFunction = /** @class */ (function () {
     function UpdateObjectDimensionsLayoutFunction() {
     }
@@ -550,6 +454,26 @@ var StackObjectsLayoutFunction = /** @class */ (function () {
     return StackObjectsLayoutFunction;
 }());
 
+var RepositionBordersLayoutFunction = /** @class */ (function () {
+    function RepositionBordersLayoutFunction() {
+    }
+    RepositionBordersLayoutFunction.prototype.execute = function (canvas) {
+        canvas.getObjectsByTypeInternal(ObjectType.BORDER)
+            .forEach(function (border) { return border.updatePosition(); });
+    };
+    return RepositionBordersLayoutFunction;
+}());
+
+var RepositionBackgroundsLayoutFunction = /** @class */ (function () {
+    function RepositionBackgroundsLayoutFunction() {
+    }
+    RepositionBackgroundsLayoutFunction.prototype.execute = function (canvas) {
+        canvas.getObjectsByTypeInternal(ObjectType.BACKGROUND_IMAGE)
+            .forEach(function (border) { return border.updatePosition(); });
+    };
+    return RepositionBackgroundsLayoutFunction;
+}());
+
 var StandardLayoutManager = /** @class */ (function (_super) {
     __extends(StandardLayoutManager, _super);
     function StandardLayoutManager(canvas) {
@@ -2612,7 +2536,7 @@ var DefaultCanvasProfile = /** @class */ (function () {
         this.allowRotate = false;
         this.allowScale = false;
         this.defaultFont = "Lato";
-        this.defaultFontSize = 8;
+        this.defaultFontSize = 9;
         this.defaultFontColor = "#000000";
         this.defaultLineHeight = 1.8;
         this.defaultCharacterSpacing = 0;
@@ -3428,6 +3352,13 @@ var AbstractInteractiveCanvas = /** @class */ (function () {
     AbstractInteractiveCanvas.prototype.undo = function () {
         throw Error("Undo not supported on this canvas type");
     };
+    /**
+     * @override
+     * @inheritDoc
+     */
+    AbstractInteractiveCanvas.prototype.redo = function () {
+        throw Error("Redo not supported on this canvas type");
+    };
     /**
      * Redraw the canvas.
      */
@@ -3643,20 +3574,68 @@ var HeadlessInteractiveCanvas = /** @class */ (function (_super) {
 }(AbstractInteractiveCanvas));
 
 var UndoStack = /** @class */ (function () {
-    function UndoStack(size) {
-        this.stack = [];
+    function UndoStack(canvas, size) {
+        if (size === void 0) { size = 100; }
+        this.canvas = canvas;
+        this.undoStates = [];
+        this.redoStates = [];
+        this.lastUndo = null;
         this.size = size;
     }
-    UndoStack.prototype.push = function (state) {
-        var prev = this.stack[this.stack.length - 1];
-        if (isEqual(prev, state))
+    UndoStack.prototype.save = function (state) {
+        var currentState = this.canvas.save();
+        var undoState = this.undoStates[this.undoStates.length - 1];
+        if (isEqual(undoState, state))
             return;
-        this.stack.push(state);
-        if (this.stack.length > this.size)
-            this.stack.splice(0, 1);
+        this.undoStates.push(state);
+        if (this.undoStates.length > this.size)
+            this.undoStates.splice(0, 1);
+        if (!isEqual(this.lastUndo, currentState))
+            this.redoStates = [];
     };
-    UndoStack.prototype.pop = function () {
-        return this.stack.pop();
+    UndoStack.prototype.undo = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            var undoState, currentState;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        undoState = this.undoStates.pop();
+                        if (!undoState)
+                            return [2 /*return*/];
+                        currentState = this.canvas.save();
+                        if (isEqual(undoState, currentState)) {
+                            undoState = this.undoStates.pop();
+                            if (!undoState)
+                                return [2 /*return*/];
+                        }
+                        this.lastUndo = undoState;
+                        this.redoStates.push(currentState);
+                        return [4 /*yield*/, this.canvas.load(undoState)];
+                    case 1:
+                        _a.sent();
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    UndoStack.prototype.redo = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            var state, currentState;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        state = this.redoStates.pop();
+                        if (!state)
+                            return [2 /*return*/];
+                        currentState = this.canvas.save();
+                        this.undoStates.push(currentState);
+                        return [4 /*yield*/, this.canvas.load(state)];
+                    case 1:
+                        _a.sent();
+                        return [2 /*return*/];
+                }
+            });
+        });
     };
     return UndoStack;
 }());
@@ -3666,7 +3645,7 @@ var InteractiveCanvas = /** @class */ (function (_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(100);
+        _this.undoStack = new UndoStack(_this);
         //Initialize watchers
         _this.fabricCanvas.on("selection:updated", function () { return _this.onFabricSelectionChanged(); });
         _this.fabricCanvas.on("selection:created", function () { return _this.onFabricSelectionChanged(); });
@@ -3681,7 +3660,7 @@ var InteractiveCanvas = /** @class */ (function (_super) {
      * @inheritDoc
      */
     InteractiveCanvas.prototype.registerUndoState = function () {
-        this.undoStack.push(this.save());
+        this.undoStack.save(this.save());
     };
     /**
      * @override
@@ -3689,20 +3668,25 @@ var InteractiveCanvas = /** @class */ (function (_super) {
      */
     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*/];
-                        //If the undo state matches the current state, pop again as the undo will have no effect
-                        if (isEqual(state, this.save())) {
-                            state = this.undoStack.pop();
-                            if (!state)
-                                return [2 /*return*/];
-                        }
-                        return [4 /*yield*/, this.load(state)];
+                    case 0: return [4 /*yield*/, this.undoStack.undo()];
+                    case 1:
+                        _a.sent();
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    /**
+     * @override
+     * @inheritDoc
+     */
+    InteractiveCanvas.prototype.redo = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, this.undoStack.redo()];
                     case 1:
                         _a.sent();
                         return [2 /*return*/];
@@ -3731,4 +3715,80 @@ var InteractiveCanvas = /** @class */ (function (_super) {
     return InteractiveCanvas;
 }(AbstractInteractiveCanvas));
 
+var RepositionCutoffsLayoutFunction = /** @class */ (function () {
+    function RepositionCutoffsLayoutFunction() {
+    }
+    RepositionCutoffsLayoutFunction.prototype.execute = function (canvas) {
+        canvas.getObjectsByTypeInternal(ObjectType.CUTOFF)
+            .forEach(function (cutoff) { return cutoff.updatePosition(); });
+    };
+    return RepositionCutoffsLayoutFunction;
+}());
+
+var PinToBottomLayoutFunction = /** @class */ (function () {
+    function PinToBottomLayoutFunction() {
+    }
+    PinToBottomLayoutFunction.prototype.execute = function (canvas) {
+        canvas.getObjectsInternal()
+            .forEach(function (object) { return object.moveToPinnedPosition(); });
+    };
+    return PinToBottomLayoutFunction;
+}());
+
+var ResizeCanvasLayoutFunction = /** @class */ (function () {
+    function ResizeCanvasLayoutFunction() {
+    }
+    ResizeCanvasLayoutFunction.prototype.execute = function (canvas) {
+        if (canvas.getLayoutManager().isEnforcedPositioning)
+            return;
+        if (oc(canvas.getDimensionsRestrictions()).fixed(false))
+            return;
+        var currentDimensions = canvas.getDimensions();
+        var baseDimensions = canvas.getBaseDimensions();
+        var textHeightIncreasePx = _(canvas.getObjectsByTypeInternal(ObjectType.TEXT))
+            .filter(function (text) { return text.isResizeCanvas(); })
+            .reduce(function (x, text) { return x + text.getSizeIncreaseSinceCreation(); }, 0);
+        var increase = baseDimensions.withSize(currentDimensions.width, 0);
+        while (increase.heightPx < textHeightIncreasePx) {
+            increase = increase.withSize(increase.width, increase.height + 1);
+        }
+        var targetHeight = increase.withSize(increase.width, baseDimensions.height + increase.height);
+        if (currentDimensions.height !== targetHeight.height) {
+            canvas.setDimensions(targetHeight);
+        }
+        canvas.getObjectsInternal().forEach(function (object) { return object.setCoords(); });
+        canvas.redraw();
+    };
+    return ResizeCanvasLayoutFunction;
+}());
+
+var AdvancedLayoutManager = /** @class */ (function (_super) {
+    __extends(AdvancedLayoutManager, _super);
+    function AdvancedLayoutManager(canvas) {
+        var _this = _super.call(this, canvas) || this;
+        _this.key = LayoutManager.ADVANCED;
+        _this.pinToBottom = new PinToBottomLayoutFunction();
+        _this.redrawAll = new RedrawAllLayoutFunction();
+        _this.repositionBorders = new RepositionBordersLayoutFunction();
+        _this.repositionCutoffs = new RepositionCutoffsLayoutFunction();
+        _this.repositionBackgrounds = new RepositionBackgroundsLayoutFunction();
+        _this.resizeCanvas = new ResizeCanvasLayoutFunction();
+        return _this;
+    }
+    AdvancedLayoutManager.prototype.onCanvasDimensionsChange = function () {
+        this.pinToBottom.execute(this.canvas);
+        this.repositionCutoffs.execute(this.canvas);
+        this.repositionBorders.execute(this.canvas);
+        this.repositionBackgrounds.execute(this.canvas);
+        this.redrawAll.execute(this.canvas);
+    };
+    AdvancedLayoutManager.prototype.onTextChange = function () {
+        this.resizeCanvas.execute(this.canvas);
+    };
+    AdvancedLayoutManager.prototype.onObjectListChange = function () {
+        this.redrawAll.execute(this.canvas);
+    };
+    return AdvancedLayoutManager;
+}(AbstractLayoutManager));
+
 export { AbstractCanvasObject, AbstractInteractiveCanvas, AbstractLayoutManager, AdvancedLayoutManager, BackgroundImage, Border, CanvasObjectData, Cutoff, DefaultCanvasProfile, Font, FontLibrary, HeadlessInteractiveCanvas, HorizontalRule, Image, ImageType, InteractiveCanvas, LayoutManager, MillimeterDimensions, ObjectType, PixelCanvasDimensions, Print6ColCanvasDimensions, Print8ColCanvasDimensions, Rectangle, RichText, SelectionData, StandardLayoutManager, Text, UNKNOWN_FONT, UnknownFont, VerticalRule, isMutableBackgroundColor, isMutableColor, isMutableImage, isMutablePosition, isMutableStroke, isMutableText, isMutableTextStyle };

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

@@ -286,4 +286,8 @@ export interface IInteractiveCanvas {
      * Revert the canvas state one entry.
      */
     undo(): Promise<void>;
+    /**
+     * Revert the canvas state one entry.
+     */
+    redo(): Promise<void>;
 }

package/dist/interactive-canvas.js

@@ -287,108 +287,12 @@ var RedrawAllLayoutFunction = /** @class */ (function () {
     return RedrawAllLayoutFunction;
 }());
 
-var RepositionCutoffsLayoutFunction = /** @class */ (function () {
-    function RepositionCutoffsLayoutFunction() {
-    }
-    RepositionCutoffsLayoutFunction.prototype.execute = function (canvas) {
-        canvas.getObjectsByTypeInternal(exports.ObjectType.CUTOFF)
-            .forEach(function (cutoff) { return cutoff.updatePosition(); });
-    };
-    return RepositionCutoffsLayoutFunction;
-}());
-
-var RepositionBordersLayoutFunction = /** @class */ (function () {
-    function RepositionBordersLayoutFunction() {
-    }
-    RepositionBordersLayoutFunction.prototype.execute = function (canvas) {
-        canvas.getObjectsByTypeInternal(exports.ObjectType.BORDER)
-            .forEach(function (border) { return border.updatePosition(); });
-    };
-    return RepositionBordersLayoutFunction;
-}());
-
-var PinToBottomLayoutFunction = /** @class */ (function () {
-    function PinToBottomLayoutFunction() {
-    }
-    PinToBottomLayoutFunction.prototype.execute = function (canvas) {
-        canvas.getObjectsInternal()
-            .forEach(function (object) { return object.moveToPinnedPosition(); });
-    };
-    return PinToBottomLayoutFunction;
-}());
-
-var ResizeCanvasLayoutFunction = /** @class */ (function () {
-    function ResizeCanvasLayoutFunction() {
-    }
-    ResizeCanvasLayoutFunction.prototype.execute = function (canvas) {
-        if (canvas.getLayoutManager().isEnforcedPositioning)
-            return;
-        if (tsOptchain.oc(canvas.getDimensionsRestrictions()).fixed(false))
-            return;
-        var currentDimensions = canvas.getDimensions();
-        var baseDimensions = canvas.getBaseDimensions();
-        var textHeightIncreasePx = _(canvas.getObjectsByTypeInternal(exports.ObjectType.TEXT))
-            .filter(function (text) { return text.isResizeCanvas(); })
-            .reduce(function (x, text) { return x + text.getSizeIncreaseSinceCreation(); }, 0);
-        var increase = baseDimensions.withSize(currentDimensions.width, 0);
-        while (increase.heightPx < textHeightIncreasePx) {
-            increase = increase.withSize(increase.width, increase.height + 1);
-        }
-        var targetHeight = increase.withSize(increase.width, baseDimensions.height + increase.height);
-        if (currentDimensions.height !== targetHeight.height) {
-            canvas.setDimensions(targetHeight);
-        }
-        canvas.getObjectsInternal().forEach(function (object) { return object.setCoords(); });
-        canvas.redraw();
-    };
-    return ResizeCanvasLayoutFunction;
-}());
-
 (function (LayoutManager) {
     LayoutManager["LEGACY"] = "LEGACY";
     LayoutManager["STANDARD"] = "STANDARD";
     LayoutManager["ADVANCED"] = "ADVANCED";
 })(exports.LayoutManager || (exports.LayoutManager = {}));
 
-var RepositionBackgroundsLayoutFunction = /** @class */ (function () {
-    function RepositionBackgroundsLayoutFunction() {
-    }
-    RepositionBackgroundsLayoutFunction.prototype.execute = function (canvas) {
-        canvas.getObjectsByTypeInternal(exports.ObjectType.BACKGROUND_IMAGE)
-            .forEach(function (border) { return border.updatePosition(); });
-    };
-    return RepositionBackgroundsLayoutFunction;
-}());
-
-var AdvancedLayoutManager = /** @class */ (function (_super) {
-    __extends(AdvancedLayoutManager, _super);
-    function AdvancedLayoutManager(canvas) {
-        var _this = _super.call(this, canvas) || this;
-        _this.key = exports.LayoutManager.ADVANCED;
-        _this.pinToBottom = new PinToBottomLayoutFunction();
-        _this.redrawAll = new RedrawAllLayoutFunction();
-        _this.repositionBorders = new RepositionBordersLayoutFunction();
-        _this.repositionCutoffs = new RepositionCutoffsLayoutFunction();
-        _this.repositionBackgrounds = new RepositionBackgroundsLayoutFunction();
-        _this.resizeCanvas = new ResizeCanvasLayoutFunction();
-        return _this;
-    }
-    AdvancedLayoutManager.prototype.onCanvasDimensionsChange = function () {
-        this.pinToBottom.execute(this.canvas);
-        this.repositionCutoffs.execute(this.canvas);
-        this.repositionBorders.execute(this.canvas);
-        this.repositionBackgrounds.execute(this.canvas);
-        this.redrawAll.execute(this.canvas);
-    };
-    AdvancedLayoutManager.prototype.onTextChange = function () {
-        this.resizeCanvas.execute(this.canvas);
-    };
-    AdvancedLayoutManager.prototype.onObjectListChange = function () {
-        this.redrawAll.execute(this.canvas);
-    };
-    return AdvancedLayoutManager;
-}(AbstractLayoutManager));
-
 var UpdateObjectDimensionsLayoutFunction = /** @class */ (function () {
     function UpdateObjectDimensionsLayoutFunction() {
     }
@@ -552,6 +456,26 @@ var StackObjectsLayoutFunction = /** @class */ (function () {
     return StackObjectsLayoutFunction;
 }());
 
+var RepositionBordersLayoutFunction = /** @class */ (function () {
+    function RepositionBordersLayoutFunction() {
+    }
+    RepositionBordersLayoutFunction.prototype.execute = function (canvas) {
+        canvas.getObjectsByTypeInternal(exports.ObjectType.BORDER)
+            .forEach(function (border) { return border.updatePosition(); });
+    };
+    return RepositionBordersLayoutFunction;
+}());
+
+var RepositionBackgroundsLayoutFunction = /** @class */ (function () {
+    function RepositionBackgroundsLayoutFunction() {
+    }
+    RepositionBackgroundsLayoutFunction.prototype.execute = function (canvas) {
+        canvas.getObjectsByTypeInternal(exports.ObjectType.BACKGROUND_IMAGE)
+            .forEach(function (border) { return border.updatePosition(); });
+    };
+    return RepositionBackgroundsLayoutFunction;
+}());
+
 var StandardLayoutManager = /** @class */ (function (_super) {
     __extends(StandardLayoutManager, _super);
     function StandardLayoutManager(canvas) {
@@ -2614,7 +2538,7 @@ var DefaultCanvasProfile = /** @class */ (function () {
         this.allowRotate = false;
         this.allowScale = false;
         this.defaultFont = "Lato";
-        this.defaultFontSize = 8;
+        this.defaultFontSize = 9;
         this.defaultFontColor = "#000000";
         this.defaultLineHeight = 1.8;
         this.defaultCharacterSpacing = 0;
@@ -3428,6 +3352,13 @@ var AbstractInteractiveCanvas = /** @class */ (function () {
     AbstractInteractiveCanvas.prototype.undo = function () {
         throw Error("Undo not supported on this canvas type");
     };
+    /**
+     * @override
+     * @inheritDoc
+     */
+    AbstractInteractiveCanvas.prototype.redo = function () {
+        throw Error("Redo not supported on this canvas type");
+    };
     /**
      * Redraw the canvas.
      */
@@ -3643,20 +3574,68 @@ var HeadlessInteractiveCanvas = /** @class */ (function (_super) {
 }(AbstractInteractiveCanvas));
 
 var UndoStack = /** @class */ (function () {
-    function UndoStack(size) {
-        this.stack = [];
+    function UndoStack(canvas, size) {
+        if (size === void 0) { size = 100; }
+        this.canvas = canvas;
+        this.undoStates = [];
+        this.redoStates = [];
+        this.lastUndo = null;
         this.size = size;
     }
-    UndoStack.prototype.push = function (state) {
-        var prev = this.stack[this.stack.length - 1];
-        if (_.isEqual(prev, state))
+    UndoStack.prototype.save = function (state) {
+        var currentState = this.canvas.save();
+        var undoState = this.undoStates[this.undoStates.length - 1];
+        if (_.isEqual(undoState, state))
             return;
-        this.stack.push(state);
-        if (this.stack.length > this.size)
-            this.stack.splice(0, 1);
+        this.undoStates.push(state);
+        if (this.undoStates.length > this.size)
+            this.undoStates.splice(0, 1);
+        if (!_.isEqual(this.lastUndo, currentState))
+            this.redoStates = [];
     };
-    UndoStack.prototype.pop = function () {
-        return this.stack.pop();
+    UndoStack.prototype.undo = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            var undoState, currentState;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        undoState = this.undoStates.pop();
+                        if (!undoState)
+                            return [2 /*return*/];
+                        currentState = this.canvas.save();
+                        if (_.isEqual(undoState, currentState)) {
+                            undoState = this.undoStates.pop();
+                            if (!undoState)
+                                return [2 /*return*/];
+                        }
+                        this.lastUndo = undoState;
+                        this.redoStates.push(currentState);
+                        return [4 /*yield*/, this.canvas.load(undoState)];
+                    case 1:
+                        _a.sent();
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    UndoStack.prototype.redo = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            var state, currentState;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        state = this.redoStates.pop();
+                        if (!state)
+                            return [2 /*return*/];
+                        currentState = this.canvas.save();
+                        this.undoStates.push(currentState);
+                        return [4 /*yield*/, this.canvas.load(state)];
+                    case 1:
+                        _a.sent();
+                        return [2 /*return*/];
+                }
+            });
+        });
     };
     return UndoStack;
 }());
@@ -3666,7 +3645,7 @@ var InteractiveCanvas = /** @class */ (function (_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(100);
+        _this.undoStack = new UndoStack(_this);
         //Initialize watchers
         _this.fabricCanvas.on("selection:updated", function () { return _this.onFabricSelectionChanged(); });
         _this.fabricCanvas.on("selection:created", function () { return _this.onFabricSelectionChanged(); });
@@ -3681,7 +3660,7 @@ var InteractiveCanvas = /** @class */ (function (_super) {
      * @inheritDoc
      */
     InteractiveCanvas.prototype.registerUndoState = function () {
-        this.undoStack.push(this.save());
+        this.undoStack.save(this.save());
     };
     /**
      * @override
@@ -3689,20 +3668,25 @@ var InteractiveCanvas = /** @class */ (function (_super) {
      */
     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*/];
-                        //If the undo state matches the current state, pop again as the undo will have no effect
-                        if (_.isEqual(state, this.save())) {
-                            state = this.undoStack.pop();
-                            if (!state)
-                                return [2 /*return*/];
-                        }
-                        return [4 /*yield*/, this.load(state)];
+                    case 0: return [4 /*yield*/, this.undoStack.undo()];
+                    case 1:
+                        _a.sent();
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    /**
+     * @override
+     * @inheritDoc
+     */
+    InteractiveCanvas.prototype.redo = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, this.undoStack.redo()];
                     case 1:
                         _a.sent();
                         return [2 /*return*/];
@@ -3731,6 +3715,82 @@ var InteractiveCanvas = /** @class */ (function (_super) {
     return InteractiveCanvas;
 }(AbstractInteractiveCanvas));
 
+var RepositionCutoffsLayoutFunction = /** @class */ (function () {
+    function RepositionCutoffsLayoutFunction() {
+    }
+    RepositionCutoffsLayoutFunction.prototype.execute = function (canvas) {
+        canvas.getObjectsByTypeInternal(exports.ObjectType.CUTOFF)
+            .forEach(function (cutoff) { return cutoff.updatePosition(); });
+    };
+    return RepositionCutoffsLayoutFunction;
+}());
+
+var PinToBottomLayoutFunction = /** @class */ (function () {
+    function PinToBottomLayoutFunction() {
+    }
+    PinToBottomLayoutFunction.prototype.execute = function (canvas) {
+        canvas.getObjectsInternal()
+            .forEach(function (object) { return object.moveToPinnedPosition(); });
+    };
+    return PinToBottomLayoutFunction;
+}());
+
+var ResizeCanvasLayoutFunction = /** @class */ (function () {
+    function ResizeCanvasLayoutFunction() {
+    }
+    ResizeCanvasLayoutFunction.prototype.execute = function (canvas) {
+        if (canvas.getLayoutManager().isEnforcedPositioning)
+            return;
+        if (tsOptchain.oc(canvas.getDimensionsRestrictions()).fixed(false))
+            return;
+        var currentDimensions = canvas.getDimensions();
+        var baseDimensions = canvas.getBaseDimensions();
+        var textHeightIncreasePx = _(canvas.getObjectsByTypeInternal(exports.ObjectType.TEXT))
+            .filter(function (text) { return text.isResizeCanvas(); })
+            .reduce(function (x, text) { return x + text.getSizeIncreaseSinceCreation(); }, 0);
+        var increase = baseDimensions.withSize(currentDimensions.width, 0);
+        while (increase.heightPx < textHeightIncreasePx) {
+            increase = increase.withSize(increase.width, increase.height + 1);
+        }
+        var targetHeight = increase.withSize(increase.width, baseDimensions.height + increase.height);
+        if (currentDimensions.height !== targetHeight.height) {
+            canvas.setDimensions(targetHeight);
+        }
+        canvas.getObjectsInternal().forEach(function (object) { return object.setCoords(); });
+        canvas.redraw();
+    };
+    return ResizeCanvasLayoutFunction;
+}());
+
+var AdvancedLayoutManager = /** @class */ (function (_super) {
+    __extends(AdvancedLayoutManager, _super);
+    function AdvancedLayoutManager(canvas) {
+        var _this = _super.call(this, canvas) || this;
+        _this.key = exports.LayoutManager.ADVANCED;
+        _this.pinToBottom = new PinToBottomLayoutFunction();
+        _this.redrawAll = new RedrawAllLayoutFunction();
+        _this.repositionBorders = new RepositionBordersLayoutFunction();
+        _this.repositionCutoffs = new RepositionCutoffsLayoutFunction();
+        _this.repositionBackgrounds = new RepositionBackgroundsLayoutFunction();
+        _this.resizeCanvas = new ResizeCanvasLayoutFunction();
+        return _this;
+    }
+    AdvancedLayoutManager.prototype.onCanvasDimensionsChange = function () {
+        this.pinToBottom.execute(this.canvas);
+        this.repositionCutoffs.execute(this.canvas);
+        this.repositionBorders.execute(this.canvas);
+        this.repositionBackgrounds.execute(this.canvas);
+        this.redrawAll.execute(this.canvas);
+    };
+    AdvancedLayoutManager.prototype.onTextChange = function () {
+        this.resizeCanvas.execute(this.canvas);
+    };
+    AdvancedLayoutManager.prototype.onObjectListChange = function () {
+        this.redrawAll.execute(this.canvas);
+    };
+    return AdvancedLayoutManager;
+}(AbstractLayoutManager));
+
 exports.AbstractCanvasObject = AbstractCanvasObject;
 exports.AbstractInteractiveCanvas = AbstractInteractiveCanvas;
 exports.AbstractLayoutManager = AbstractLayoutManager;

package/dist/undo-stack.d.ts

@@ -1,8 +1,13 @@
 import { ICanvasState } from "./types/canvas-state.interface";
+import { IInteractiveCanvas } from "./interactive-canvas.interface";
 export declare class UndoStack {
+    protected canvas: IInteractiveCanvas;
     private readonly size;
-    private stack;
-    constructor(size: number);
-    push(state: ICanvasState): void;
-    pop(): ICanvasState;
+    private undoStates;
+    private redoStates;
+    private lastUndo;
+    constructor(canvas: IInteractiveCanvas, size?: number);
+    save(state: ICanvasState): void;
+    undo(): Promise<void>;
+    redo(): Promise<void>;
 }

package/package.json

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