@leapfrog/interactive-canvas 1.12.1 → 1.12.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/interactive-canvas.es.js +121 -104
- package/dist/interactive-canvas.js +121 -104
- package/dist/undo-stack.d.ts +16 -2
- package/dist/undo-stack.interface.d.ts +6 -0
- package/package.json +1 -1
|
@@ -284,6 +284,63 @@ var RedrawAllLayoutFunction = /** @class */ (function () {
|
|
|
284
284
|
return RedrawAllLayoutFunction;
|
|
285
285
|
}());
|
|
286
286
|
|
|
287
|
+
var RepositionCutoffsLayoutFunction = /** @class */ (function () {
|
|
288
|
+
function RepositionCutoffsLayoutFunction() {
|
|
289
|
+
}
|
|
290
|
+
RepositionCutoffsLayoutFunction.prototype.execute = function (canvas) {
|
|
291
|
+
canvas.getObjectsByTypeInternal(ObjectType.CUTOFF)
|
|
292
|
+
.forEach(function (cutoff) { return cutoff.updatePosition(); });
|
|
293
|
+
};
|
|
294
|
+
return RepositionCutoffsLayoutFunction;
|
|
295
|
+
}());
|
|
296
|
+
|
|
297
|
+
var RepositionBordersLayoutFunction = /** @class */ (function () {
|
|
298
|
+
function RepositionBordersLayoutFunction() {
|
|
299
|
+
}
|
|
300
|
+
RepositionBordersLayoutFunction.prototype.execute = function (canvas) {
|
|
301
|
+
canvas.getObjectsByTypeInternal(ObjectType.BORDER)
|
|
302
|
+
.forEach(function (border) { return border.updatePosition(); });
|
|
303
|
+
};
|
|
304
|
+
return RepositionBordersLayoutFunction;
|
|
305
|
+
}());
|
|
306
|
+
|
|
307
|
+
var PinToBottomLayoutFunction = /** @class */ (function () {
|
|
308
|
+
function PinToBottomLayoutFunction() {
|
|
309
|
+
}
|
|
310
|
+
PinToBottomLayoutFunction.prototype.execute = function (canvas) {
|
|
311
|
+
canvas.getObjectsInternal()
|
|
312
|
+
.forEach(function (object) { return object.moveToPinnedPosition(); });
|
|
313
|
+
};
|
|
314
|
+
return PinToBottomLayoutFunction;
|
|
315
|
+
}());
|
|
316
|
+
|
|
317
|
+
var ResizeCanvasLayoutFunction = /** @class */ (function () {
|
|
318
|
+
function ResizeCanvasLayoutFunction() {
|
|
319
|
+
}
|
|
320
|
+
ResizeCanvasLayoutFunction.prototype.execute = function (canvas) {
|
|
321
|
+
if (canvas.getLayoutManager().isEnforcedPositioning)
|
|
322
|
+
return;
|
|
323
|
+
if (oc(canvas.getDimensionsRestrictions()).fixed(false))
|
|
324
|
+
return;
|
|
325
|
+
var currentDimensions = canvas.getDimensions();
|
|
326
|
+
var baseDimensions = canvas.getBaseDimensions();
|
|
327
|
+
var textHeightIncreasePx = _(canvas.getObjectsByTypeInternal(ObjectType.TEXT))
|
|
328
|
+
.filter(function (text) { return text.isResizeCanvas(); })
|
|
329
|
+
.reduce(function (x, text) { return x + text.getSizeIncreaseSinceCreation(); }, 0);
|
|
330
|
+
var increase = baseDimensions.withSize(currentDimensions.width, 0);
|
|
331
|
+
while (increase.heightPx < textHeightIncreasePx) {
|
|
332
|
+
increase = increase.withSize(increase.width, increase.height + 1);
|
|
333
|
+
}
|
|
334
|
+
var targetHeight = increase.withSize(increase.width, baseDimensions.height + increase.height);
|
|
335
|
+
if (currentDimensions.height !== targetHeight.height) {
|
|
336
|
+
canvas.setDimensions(targetHeight);
|
|
337
|
+
}
|
|
338
|
+
canvas.getObjectsInternal().forEach(function (object) { return object.setCoords(); });
|
|
339
|
+
canvas.redraw();
|
|
340
|
+
};
|
|
341
|
+
return ResizeCanvasLayoutFunction;
|
|
342
|
+
}());
|
|
343
|
+
|
|
287
344
|
var LayoutManager;
|
|
288
345
|
(function (LayoutManager) {
|
|
289
346
|
LayoutManager["LEGACY"] = "LEGACY";
|
|
@@ -291,6 +348,45 @@ var LayoutManager;
|
|
|
291
348
|
LayoutManager["ADVANCED"] = "ADVANCED";
|
|
292
349
|
})(LayoutManager || (LayoutManager = {}));
|
|
293
350
|
|
|
351
|
+
var RepositionBackgroundsLayoutFunction = /** @class */ (function () {
|
|
352
|
+
function RepositionBackgroundsLayoutFunction() {
|
|
353
|
+
}
|
|
354
|
+
RepositionBackgroundsLayoutFunction.prototype.execute = function (canvas) {
|
|
355
|
+
canvas.getObjectsByTypeInternal(ObjectType.BACKGROUND_IMAGE)
|
|
356
|
+
.forEach(function (border) { return border.updatePosition(); });
|
|
357
|
+
};
|
|
358
|
+
return RepositionBackgroundsLayoutFunction;
|
|
359
|
+
}());
|
|
360
|
+
|
|
361
|
+
var AdvancedLayoutManager = /** @class */ (function (_super) {
|
|
362
|
+
__extends(AdvancedLayoutManager, _super);
|
|
363
|
+
function AdvancedLayoutManager(canvas) {
|
|
364
|
+
var _this = _super.call(this, canvas) || this;
|
|
365
|
+
_this.key = LayoutManager.ADVANCED;
|
|
366
|
+
_this.pinToBottom = new PinToBottomLayoutFunction();
|
|
367
|
+
_this.redrawAll = new RedrawAllLayoutFunction();
|
|
368
|
+
_this.repositionBorders = new RepositionBordersLayoutFunction();
|
|
369
|
+
_this.repositionCutoffs = new RepositionCutoffsLayoutFunction();
|
|
370
|
+
_this.repositionBackgrounds = new RepositionBackgroundsLayoutFunction();
|
|
371
|
+
_this.resizeCanvas = new ResizeCanvasLayoutFunction();
|
|
372
|
+
return _this;
|
|
373
|
+
}
|
|
374
|
+
AdvancedLayoutManager.prototype.onCanvasDimensionsChange = function () {
|
|
375
|
+
this.pinToBottom.execute(this.canvas);
|
|
376
|
+
this.repositionCutoffs.execute(this.canvas);
|
|
377
|
+
this.repositionBorders.execute(this.canvas);
|
|
378
|
+
this.repositionBackgrounds.execute(this.canvas);
|
|
379
|
+
this.redrawAll.execute(this.canvas);
|
|
380
|
+
};
|
|
381
|
+
AdvancedLayoutManager.prototype.onTextChange = function () {
|
|
382
|
+
this.resizeCanvas.execute(this.canvas);
|
|
383
|
+
};
|
|
384
|
+
AdvancedLayoutManager.prototype.onObjectListChange = function () {
|
|
385
|
+
this.redrawAll.execute(this.canvas);
|
|
386
|
+
};
|
|
387
|
+
return AdvancedLayoutManager;
|
|
388
|
+
}(AbstractLayoutManager));
|
|
389
|
+
|
|
294
390
|
var UpdateObjectDimensionsLayoutFunction = /** @class */ (function () {
|
|
295
391
|
function UpdateObjectDimensionsLayoutFunction() {
|
|
296
392
|
}
|
|
@@ -454,26 +550,6 @@ var StackObjectsLayoutFunction = /** @class */ (function () {
|
|
|
454
550
|
return StackObjectsLayoutFunction;
|
|
455
551
|
}());
|
|
456
552
|
|
|
457
|
-
var RepositionBordersLayoutFunction = /** @class */ (function () {
|
|
458
|
-
function RepositionBordersLayoutFunction() {
|
|
459
|
-
}
|
|
460
|
-
RepositionBordersLayoutFunction.prototype.execute = function (canvas) {
|
|
461
|
-
canvas.getObjectsByTypeInternal(ObjectType.BORDER)
|
|
462
|
-
.forEach(function (border) { return border.updatePosition(); });
|
|
463
|
-
};
|
|
464
|
-
return RepositionBordersLayoutFunction;
|
|
465
|
-
}());
|
|
466
|
-
|
|
467
|
-
var RepositionBackgroundsLayoutFunction = /** @class */ (function () {
|
|
468
|
-
function RepositionBackgroundsLayoutFunction() {
|
|
469
|
-
}
|
|
470
|
-
RepositionBackgroundsLayoutFunction.prototype.execute = function (canvas) {
|
|
471
|
-
canvas.getObjectsByTypeInternal(ObjectType.BACKGROUND_IMAGE)
|
|
472
|
-
.forEach(function (border) { return border.updatePosition(); });
|
|
473
|
-
};
|
|
474
|
-
return RepositionBackgroundsLayoutFunction;
|
|
475
|
-
}());
|
|
476
|
-
|
|
477
553
|
var StandardLayoutManager = /** @class */ (function (_super) {
|
|
478
554
|
__extends(StandardLayoutManager, _super);
|
|
479
555
|
function StandardLayoutManager(canvas) {
|
|
@@ -3579,9 +3655,13 @@ var UndoStack = /** @class */ (function () {
|
|
|
3579
3655
|
this.canvas = canvas;
|
|
3580
3656
|
this.undoStates = [];
|
|
3581
3657
|
this.redoStates = [];
|
|
3582
|
-
this.
|
|
3658
|
+
this.lastState = null;
|
|
3583
3659
|
this.size = size;
|
|
3584
3660
|
}
|
|
3661
|
+
/**
|
|
3662
|
+
* @override
|
|
3663
|
+
* @inheritDoc
|
|
3664
|
+
*/
|
|
3585
3665
|
UndoStack.prototype.save = function (state) {
|
|
3586
3666
|
var currentState = this.canvas.save();
|
|
3587
3667
|
var undoState = this.undoStates[this.undoStates.length - 1];
|
|
@@ -3590,9 +3670,12 @@ var UndoStack = /** @class */ (function () {
|
|
|
3590
3670
|
this.undoStates.push(state);
|
|
3591
3671
|
if (this.undoStates.length > this.size)
|
|
3592
3672
|
this.undoStates.splice(0, 1);
|
|
3593
|
-
|
|
3594
|
-
this.redoStates = [];
|
|
3673
|
+
this.clearRedoStackIfCanvasChanged(currentState);
|
|
3595
3674
|
};
|
|
3675
|
+
/**
|
|
3676
|
+
* @override
|
|
3677
|
+
* @inheritDoc
|
|
3678
|
+
*/
|
|
3596
3679
|
UndoStack.prototype.undo = function () {
|
|
3597
3680
|
return __awaiter(this, void 0, void 0, function () {
|
|
3598
3681
|
var undoState, currentState;
|
|
@@ -3608,7 +3691,7 @@ var UndoStack = /** @class */ (function () {
|
|
|
3608
3691
|
if (!undoState)
|
|
3609
3692
|
return [2 /*return*/];
|
|
3610
3693
|
}
|
|
3611
|
-
this.
|
|
3694
|
+
this.lastState = undoState;
|
|
3612
3695
|
this.redoStates.push(currentState);
|
|
3613
3696
|
return [4 /*yield*/, this.canvas.load(undoState)];
|
|
3614
3697
|
case 1:
|
|
@@ -3618,18 +3701,23 @@ var UndoStack = /** @class */ (function () {
|
|
|
3618
3701
|
});
|
|
3619
3702
|
});
|
|
3620
3703
|
};
|
|
3704
|
+
/**
|
|
3705
|
+
* @override
|
|
3706
|
+
* @inheritDoc
|
|
3707
|
+
*/
|
|
3621
3708
|
UndoStack.prototype.redo = function () {
|
|
3622
3709
|
return __awaiter(this, void 0, void 0, function () {
|
|
3623
|
-
var
|
|
3710
|
+
var redoState, currentState;
|
|
3624
3711
|
return __generator(this, function (_a) {
|
|
3625
3712
|
switch (_a.label) {
|
|
3626
3713
|
case 0:
|
|
3627
|
-
|
|
3628
|
-
if (!
|
|
3714
|
+
redoState = this.redoStates.pop();
|
|
3715
|
+
if (!redoState)
|
|
3629
3716
|
return [2 /*return*/];
|
|
3630
3717
|
currentState = this.canvas.save();
|
|
3718
|
+
this.lastState = redoState;
|
|
3631
3719
|
this.undoStates.push(currentState);
|
|
3632
|
-
return [4 /*yield*/, this.canvas.load(
|
|
3720
|
+
return [4 /*yield*/, this.canvas.load(redoState)];
|
|
3633
3721
|
case 1:
|
|
3634
3722
|
_a.sent();
|
|
3635
3723
|
return [2 /*return*/];
|
|
@@ -3637,6 +3725,11 @@ var UndoStack = /** @class */ (function () {
|
|
|
3637
3725
|
});
|
|
3638
3726
|
});
|
|
3639
3727
|
};
|
|
3728
|
+
UndoStack.prototype.clearRedoStackIfCanvasChanged = function (currentState) {
|
|
3729
|
+
if (isEqual(this.lastState, currentState))
|
|
3730
|
+
return;
|
|
3731
|
+
this.redoStates = [];
|
|
3732
|
+
};
|
|
3640
3733
|
return UndoStack;
|
|
3641
3734
|
}());
|
|
3642
3735
|
|
|
@@ -3715,80 +3808,4 @@ var InteractiveCanvas = /** @class */ (function (_super) {
|
|
|
3715
3808
|
return InteractiveCanvas;
|
|
3716
3809
|
}(AbstractInteractiveCanvas));
|
|
3717
3810
|
|
|
3718
|
-
var RepositionCutoffsLayoutFunction = /** @class */ (function () {
|
|
3719
|
-
function RepositionCutoffsLayoutFunction() {
|
|
3720
|
-
}
|
|
3721
|
-
RepositionCutoffsLayoutFunction.prototype.execute = function (canvas) {
|
|
3722
|
-
canvas.getObjectsByTypeInternal(ObjectType.CUTOFF)
|
|
3723
|
-
.forEach(function (cutoff) { return cutoff.updatePosition(); });
|
|
3724
|
-
};
|
|
3725
|
-
return RepositionCutoffsLayoutFunction;
|
|
3726
|
-
}());
|
|
3727
|
-
|
|
3728
|
-
var PinToBottomLayoutFunction = /** @class */ (function () {
|
|
3729
|
-
function PinToBottomLayoutFunction() {
|
|
3730
|
-
}
|
|
3731
|
-
PinToBottomLayoutFunction.prototype.execute = function (canvas) {
|
|
3732
|
-
canvas.getObjectsInternal()
|
|
3733
|
-
.forEach(function (object) { return object.moveToPinnedPosition(); });
|
|
3734
|
-
};
|
|
3735
|
-
return PinToBottomLayoutFunction;
|
|
3736
|
-
}());
|
|
3737
|
-
|
|
3738
|
-
var ResizeCanvasLayoutFunction = /** @class */ (function () {
|
|
3739
|
-
function ResizeCanvasLayoutFunction() {
|
|
3740
|
-
}
|
|
3741
|
-
ResizeCanvasLayoutFunction.prototype.execute = function (canvas) {
|
|
3742
|
-
if (canvas.getLayoutManager().isEnforcedPositioning)
|
|
3743
|
-
return;
|
|
3744
|
-
if (oc(canvas.getDimensionsRestrictions()).fixed(false))
|
|
3745
|
-
return;
|
|
3746
|
-
var currentDimensions = canvas.getDimensions();
|
|
3747
|
-
var baseDimensions = canvas.getBaseDimensions();
|
|
3748
|
-
var textHeightIncreasePx = _(canvas.getObjectsByTypeInternal(ObjectType.TEXT))
|
|
3749
|
-
.filter(function (text) { return text.isResizeCanvas(); })
|
|
3750
|
-
.reduce(function (x, text) { return x + text.getSizeIncreaseSinceCreation(); }, 0);
|
|
3751
|
-
var increase = baseDimensions.withSize(currentDimensions.width, 0);
|
|
3752
|
-
while (increase.heightPx < textHeightIncreasePx) {
|
|
3753
|
-
increase = increase.withSize(increase.width, increase.height + 1);
|
|
3754
|
-
}
|
|
3755
|
-
var targetHeight = increase.withSize(increase.width, baseDimensions.height + increase.height);
|
|
3756
|
-
if (currentDimensions.height !== targetHeight.height) {
|
|
3757
|
-
canvas.setDimensions(targetHeight);
|
|
3758
|
-
}
|
|
3759
|
-
canvas.getObjectsInternal().forEach(function (object) { return object.setCoords(); });
|
|
3760
|
-
canvas.redraw();
|
|
3761
|
-
};
|
|
3762
|
-
return ResizeCanvasLayoutFunction;
|
|
3763
|
-
}());
|
|
3764
|
-
|
|
3765
|
-
var AdvancedLayoutManager = /** @class */ (function (_super) {
|
|
3766
|
-
__extends(AdvancedLayoutManager, _super);
|
|
3767
|
-
function AdvancedLayoutManager(canvas) {
|
|
3768
|
-
var _this = _super.call(this, canvas) || this;
|
|
3769
|
-
_this.key = LayoutManager.ADVANCED;
|
|
3770
|
-
_this.pinToBottom = new PinToBottomLayoutFunction();
|
|
3771
|
-
_this.redrawAll = new RedrawAllLayoutFunction();
|
|
3772
|
-
_this.repositionBorders = new RepositionBordersLayoutFunction();
|
|
3773
|
-
_this.repositionCutoffs = new RepositionCutoffsLayoutFunction();
|
|
3774
|
-
_this.repositionBackgrounds = new RepositionBackgroundsLayoutFunction();
|
|
3775
|
-
_this.resizeCanvas = new ResizeCanvasLayoutFunction();
|
|
3776
|
-
return _this;
|
|
3777
|
-
}
|
|
3778
|
-
AdvancedLayoutManager.prototype.onCanvasDimensionsChange = function () {
|
|
3779
|
-
this.pinToBottom.execute(this.canvas);
|
|
3780
|
-
this.repositionCutoffs.execute(this.canvas);
|
|
3781
|
-
this.repositionBorders.execute(this.canvas);
|
|
3782
|
-
this.repositionBackgrounds.execute(this.canvas);
|
|
3783
|
-
this.redrawAll.execute(this.canvas);
|
|
3784
|
-
};
|
|
3785
|
-
AdvancedLayoutManager.prototype.onTextChange = function () {
|
|
3786
|
-
this.resizeCanvas.execute(this.canvas);
|
|
3787
|
-
};
|
|
3788
|
-
AdvancedLayoutManager.prototype.onObjectListChange = function () {
|
|
3789
|
-
this.redrawAll.execute(this.canvas);
|
|
3790
|
-
};
|
|
3791
|
-
return AdvancedLayoutManager;
|
|
3792
|
-
}(AbstractLayoutManager));
|
|
3793
|
-
|
|
3794
3811
|
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 };
|
|
@@ -287,12 +287,108 @@ var RedrawAllLayoutFunction = /** @class */ (function () {
|
|
|
287
287
|
return RedrawAllLayoutFunction;
|
|
288
288
|
}());
|
|
289
289
|
|
|
290
|
+
var RepositionCutoffsLayoutFunction = /** @class */ (function () {
|
|
291
|
+
function RepositionCutoffsLayoutFunction() {
|
|
292
|
+
}
|
|
293
|
+
RepositionCutoffsLayoutFunction.prototype.execute = function (canvas) {
|
|
294
|
+
canvas.getObjectsByTypeInternal(exports.ObjectType.CUTOFF)
|
|
295
|
+
.forEach(function (cutoff) { return cutoff.updatePosition(); });
|
|
296
|
+
};
|
|
297
|
+
return RepositionCutoffsLayoutFunction;
|
|
298
|
+
}());
|
|
299
|
+
|
|
300
|
+
var RepositionBordersLayoutFunction = /** @class */ (function () {
|
|
301
|
+
function RepositionBordersLayoutFunction() {
|
|
302
|
+
}
|
|
303
|
+
RepositionBordersLayoutFunction.prototype.execute = function (canvas) {
|
|
304
|
+
canvas.getObjectsByTypeInternal(exports.ObjectType.BORDER)
|
|
305
|
+
.forEach(function (border) { return border.updatePosition(); });
|
|
306
|
+
};
|
|
307
|
+
return RepositionBordersLayoutFunction;
|
|
308
|
+
}());
|
|
309
|
+
|
|
310
|
+
var PinToBottomLayoutFunction = /** @class */ (function () {
|
|
311
|
+
function PinToBottomLayoutFunction() {
|
|
312
|
+
}
|
|
313
|
+
PinToBottomLayoutFunction.prototype.execute = function (canvas) {
|
|
314
|
+
canvas.getObjectsInternal()
|
|
315
|
+
.forEach(function (object) { return object.moveToPinnedPosition(); });
|
|
316
|
+
};
|
|
317
|
+
return PinToBottomLayoutFunction;
|
|
318
|
+
}());
|
|
319
|
+
|
|
320
|
+
var ResizeCanvasLayoutFunction = /** @class */ (function () {
|
|
321
|
+
function ResizeCanvasLayoutFunction() {
|
|
322
|
+
}
|
|
323
|
+
ResizeCanvasLayoutFunction.prototype.execute = function (canvas) {
|
|
324
|
+
if (canvas.getLayoutManager().isEnforcedPositioning)
|
|
325
|
+
return;
|
|
326
|
+
if (tsOptchain.oc(canvas.getDimensionsRestrictions()).fixed(false))
|
|
327
|
+
return;
|
|
328
|
+
var currentDimensions = canvas.getDimensions();
|
|
329
|
+
var baseDimensions = canvas.getBaseDimensions();
|
|
330
|
+
var textHeightIncreasePx = _(canvas.getObjectsByTypeInternal(exports.ObjectType.TEXT))
|
|
331
|
+
.filter(function (text) { return text.isResizeCanvas(); })
|
|
332
|
+
.reduce(function (x, text) { return x + text.getSizeIncreaseSinceCreation(); }, 0);
|
|
333
|
+
var increase = baseDimensions.withSize(currentDimensions.width, 0);
|
|
334
|
+
while (increase.heightPx < textHeightIncreasePx) {
|
|
335
|
+
increase = increase.withSize(increase.width, increase.height + 1);
|
|
336
|
+
}
|
|
337
|
+
var targetHeight = increase.withSize(increase.width, baseDimensions.height + increase.height);
|
|
338
|
+
if (currentDimensions.height !== targetHeight.height) {
|
|
339
|
+
canvas.setDimensions(targetHeight);
|
|
340
|
+
}
|
|
341
|
+
canvas.getObjectsInternal().forEach(function (object) { return object.setCoords(); });
|
|
342
|
+
canvas.redraw();
|
|
343
|
+
};
|
|
344
|
+
return ResizeCanvasLayoutFunction;
|
|
345
|
+
}());
|
|
346
|
+
|
|
290
347
|
(function (LayoutManager) {
|
|
291
348
|
LayoutManager["LEGACY"] = "LEGACY";
|
|
292
349
|
LayoutManager["STANDARD"] = "STANDARD";
|
|
293
350
|
LayoutManager["ADVANCED"] = "ADVANCED";
|
|
294
351
|
})(exports.LayoutManager || (exports.LayoutManager = {}));
|
|
295
352
|
|
|
353
|
+
var RepositionBackgroundsLayoutFunction = /** @class */ (function () {
|
|
354
|
+
function RepositionBackgroundsLayoutFunction() {
|
|
355
|
+
}
|
|
356
|
+
RepositionBackgroundsLayoutFunction.prototype.execute = function (canvas) {
|
|
357
|
+
canvas.getObjectsByTypeInternal(exports.ObjectType.BACKGROUND_IMAGE)
|
|
358
|
+
.forEach(function (border) { return border.updatePosition(); });
|
|
359
|
+
};
|
|
360
|
+
return RepositionBackgroundsLayoutFunction;
|
|
361
|
+
}());
|
|
362
|
+
|
|
363
|
+
var AdvancedLayoutManager = /** @class */ (function (_super) {
|
|
364
|
+
__extends(AdvancedLayoutManager, _super);
|
|
365
|
+
function AdvancedLayoutManager(canvas) {
|
|
366
|
+
var _this = _super.call(this, canvas) || this;
|
|
367
|
+
_this.key = exports.LayoutManager.ADVANCED;
|
|
368
|
+
_this.pinToBottom = new PinToBottomLayoutFunction();
|
|
369
|
+
_this.redrawAll = new RedrawAllLayoutFunction();
|
|
370
|
+
_this.repositionBorders = new RepositionBordersLayoutFunction();
|
|
371
|
+
_this.repositionCutoffs = new RepositionCutoffsLayoutFunction();
|
|
372
|
+
_this.repositionBackgrounds = new RepositionBackgroundsLayoutFunction();
|
|
373
|
+
_this.resizeCanvas = new ResizeCanvasLayoutFunction();
|
|
374
|
+
return _this;
|
|
375
|
+
}
|
|
376
|
+
AdvancedLayoutManager.prototype.onCanvasDimensionsChange = function () {
|
|
377
|
+
this.pinToBottom.execute(this.canvas);
|
|
378
|
+
this.repositionCutoffs.execute(this.canvas);
|
|
379
|
+
this.repositionBorders.execute(this.canvas);
|
|
380
|
+
this.repositionBackgrounds.execute(this.canvas);
|
|
381
|
+
this.redrawAll.execute(this.canvas);
|
|
382
|
+
};
|
|
383
|
+
AdvancedLayoutManager.prototype.onTextChange = function () {
|
|
384
|
+
this.resizeCanvas.execute(this.canvas);
|
|
385
|
+
};
|
|
386
|
+
AdvancedLayoutManager.prototype.onObjectListChange = function () {
|
|
387
|
+
this.redrawAll.execute(this.canvas);
|
|
388
|
+
};
|
|
389
|
+
return AdvancedLayoutManager;
|
|
390
|
+
}(AbstractLayoutManager));
|
|
391
|
+
|
|
296
392
|
var UpdateObjectDimensionsLayoutFunction = /** @class */ (function () {
|
|
297
393
|
function UpdateObjectDimensionsLayoutFunction() {
|
|
298
394
|
}
|
|
@@ -456,26 +552,6 @@ var StackObjectsLayoutFunction = /** @class */ (function () {
|
|
|
456
552
|
return StackObjectsLayoutFunction;
|
|
457
553
|
}());
|
|
458
554
|
|
|
459
|
-
var RepositionBordersLayoutFunction = /** @class */ (function () {
|
|
460
|
-
function RepositionBordersLayoutFunction() {
|
|
461
|
-
}
|
|
462
|
-
RepositionBordersLayoutFunction.prototype.execute = function (canvas) {
|
|
463
|
-
canvas.getObjectsByTypeInternal(exports.ObjectType.BORDER)
|
|
464
|
-
.forEach(function (border) { return border.updatePosition(); });
|
|
465
|
-
};
|
|
466
|
-
return RepositionBordersLayoutFunction;
|
|
467
|
-
}());
|
|
468
|
-
|
|
469
|
-
var RepositionBackgroundsLayoutFunction = /** @class */ (function () {
|
|
470
|
-
function RepositionBackgroundsLayoutFunction() {
|
|
471
|
-
}
|
|
472
|
-
RepositionBackgroundsLayoutFunction.prototype.execute = function (canvas) {
|
|
473
|
-
canvas.getObjectsByTypeInternal(exports.ObjectType.BACKGROUND_IMAGE)
|
|
474
|
-
.forEach(function (border) { return border.updatePosition(); });
|
|
475
|
-
};
|
|
476
|
-
return RepositionBackgroundsLayoutFunction;
|
|
477
|
-
}());
|
|
478
|
-
|
|
479
555
|
var StandardLayoutManager = /** @class */ (function (_super) {
|
|
480
556
|
__extends(StandardLayoutManager, _super);
|
|
481
557
|
function StandardLayoutManager(canvas) {
|
|
@@ -3579,9 +3655,13 @@ var UndoStack = /** @class */ (function () {
|
|
|
3579
3655
|
this.canvas = canvas;
|
|
3580
3656
|
this.undoStates = [];
|
|
3581
3657
|
this.redoStates = [];
|
|
3582
|
-
this.
|
|
3658
|
+
this.lastState = null;
|
|
3583
3659
|
this.size = size;
|
|
3584
3660
|
}
|
|
3661
|
+
/**
|
|
3662
|
+
* @override
|
|
3663
|
+
* @inheritDoc
|
|
3664
|
+
*/
|
|
3585
3665
|
UndoStack.prototype.save = function (state) {
|
|
3586
3666
|
var currentState = this.canvas.save();
|
|
3587
3667
|
var undoState = this.undoStates[this.undoStates.length - 1];
|
|
@@ -3590,9 +3670,12 @@ var UndoStack = /** @class */ (function () {
|
|
|
3590
3670
|
this.undoStates.push(state);
|
|
3591
3671
|
if (this.undoStates.length > this.size)
|
|
3592
3672
|
this.undoStates.splice(0, 1);
|
|
3593
|
-
|
|
3594
|
-
this.redoStates = [];
|
|
3673
|
+
this.clearRedoStackIfCanvasChanged(currentState);
|
|
3595
3674
|
};
|
|
3675
|
+
/**
|
|
3676
|
+
* @override
|
|
3677
|
+
* @inheritDoc
|
|
3678
|
+
*/
|
|
3596
3679
|
UndoStack.prototype.undo = function () {
|
|
3597
3680
|
return __awaiter(this, void 0, void 0, function () {
|
|
3598
3681
|
var undoState, currentState;
|
|
@@ -3608,7 +3691,7 @@ var UndoStack = /** @class */ (function () {
|
|
|
3608
3691
|
if (!undoState)
|
|
3609
3692
|
return [2 /*return*/];
|
|
3610
3693
|
}
|
|
3611
|
-
this.
|
|
3694
|
+
this.lastState = undoState;
|
|
3612
3695
|
this.redoStates.push(currentState);
|
|
3613
3696
|
return [4 /*yield*/, this.canvas.load(undoState)];
|
|
3614
3697
|
case 1:
|
|
@@ -3618,18 +3701,23 @@ var UndoStack = /** @class */ (function () {
|
|
|
3618
3701
|
});
|
|
3619
3702
|
});
|
|
3620
3703
|
};
|
|
3704
|
+
/**
|
|
3705
|
+
* @override
|
|
3706
|
+
* @inheritDoc
|
|
3707
|
+
*/
|
|
3621
3708
|
UndoStack.prototype.redo = function () {
|
|
3622
3709
|
return __awaiter(this, void 0, void 0, function () {
|
|
3623
|
-
var
|
|
3710
|
+
var redoState, currentState;
|
|
3624
3711
|
return __generator(this, function (_a) {
|
|
3625
3712
|
switch (_a.label) {
|
|
3626
3713
|
case 0:
|
|
3627
|
-
|
|
3628
|
-
if (!
|
|
3714
|
+
redoState = this.redoStates.pop();
|
|
3715
|
+
if (!redoState)
|
|
3629
3716
|
return [2 /*return*/];
|
|
3630
3717
|
currentState = this.canvas.save();
|
|
3718
|
+
this.lastState = redoState;
|
|
3631
3719
|
this.undoStates.push(currentState);
|
|
3632
|
-
return [4 /*yield*/, this.canvas.load(
|
|
3720
|
+
return [4 /*yield*/, this.canvas.load(redoState)];
|
|
3633
3721
|
case 1:
|
|
3634
3722
|
_a.sent();
|
|
3635
3723
|
return [2 /*return*/];
|
|
@@ -3637,6 +3725,11 @@ var UndoStack = /** @class */ (function () {
|
|
|
3637
3725
|
});
|
|
3638
3726
|
});
|
|
3639
3727
|
};
|
|
3728
|
+
UndoStack.prototype.clearRedoStackIfCanvasChanged = function (currentState) {
|
|
3729
|
+
if (_.isEqual(this.lastState, currentState))
|
|
3730
|
+
return;
|
|
3731
|
+
this.redoStates = [];
|
|
3732
|
+
};
|
|
3640
3733
|
return UndoStack;
|
|
3641
3734
|
}());
|
|
3642
3735
|
|
|
@@ -3715,82 +3808,6 @@ var InteractiveCanvas = /** @class */ (function (_super) {
|
|
|
3715
3808
|
return InteractiveCanvas;
|
|
3716
3809
|
}(AbstractInteractiveCanvas));
|
|
3717
3810
|
|
|
3718
|
-
var RepositionCutoffsLayoutFunction = /** @class */ (function () {
|
|
3719
|
-
function RepositionCutoffsLayoutFunction() {
|
|
3720
|
-
}
|
|
3721
|
-
RepositionCutoffsLayoutFunction.prototype.execute = function (canvas) {
|
|
3722
|
-
canvas.getObjectsByTypeInternal(exports.ObjectType.CUTOFF)
|
|
3723
|
-
.forEach(function (cutoff) { return cutoff.updatePosition(); });
|
|
3724
|
-
};
|
|
3725
|
-
return RepositionCutoffsLayoutFunction;
|
|
3726
|
-
}());
|
|
3727
|
-
|
|
3728
|
-
var PinToBottomLayoutFunction = /** @class */ (function () {
|
|
3729
|
-
function PinToBottomLayoutFunction() {
|
|
3730
|
-
}
|
|
3731
|
-
PinToBottomLayoutFunction.prototype.execute = function (canvas) {
|
|
3732
|
-
canvas.getObjectsInternal()
|
|
3733
|
-
.forEach(function (object) { return object.moveToPinnedPosition(); });
|
|
3734
|
-
};
|
|
3735
|
-
return PinToBottomLayoutFunction;
|
|
3736
|
-
}());
|
|
3737
|
-
|
|
3738
|
-
var ResizeCanvasLayoutFunction = /** @class */ (function () {
|
|
3739
|
-
function ResizeCanvasLayoutFunction() {
|
|
3740
|
-
}
|
|
3741
|
-
ResizeCanvasLayoutFunction.prototype.execute = function (canvas) {
|
|
3742
|
-
if (canvas.getLayoutManager().isEnforcedPositioning)
|
|
3743
|
-
return;
|
|
3744
|
-
if (tsOptchain.oc(canvas.getDimensionsRestrictions()).fixed(false))
|
|
3745
|
-
return;
|
|
3746
|
-
var currentDimensions = canvas.getDimensions();
|
|
3747
|
-
var baseDimensions = canvas.getBaseDimensions();
|
|
3748
|
-
var textHeightIncreasePx = _(canvas.getObjectsByTypeInternal(exports.ObjectType.TEXT))
|
|
3749
|
-
.filter(function (text) { return text.isResizeCanvas(); })
|
|
3750
|
-
.reduce(function (x, text) { return x + text.getSizeIncreaseSinceCreation(); }, 0);
|
|
3751
|
-
var increase = baseDimensions.withSize(currentDimensions.width, 0);
|
|
3752
|
-
while (increase.heightPx < textHeightIncreasePx) {
|
|
3753
|
-
increase = increase.withSize(increase.width, increase.height + 1);
|
|
3754
|
-
}
|
|
3755
|
-
var targetHeight = increase.withSize(increase.width, baseDimensions.height + increase.height);
|
|
3756
|
-
if (currentDimensions.height !== targetHeight.height) {
|
|
3757
|
-
canvas.setDimensions(targetHeight);
|
|
3758
|
-
}
|
|
3759
|
-
canvas.getObjectsInternal().forEach(function (object) { return object.setCoords(); });
|
|
3760
|
-
canvas.redraw();
|
|
3761
|
-
};
|
|
3762
|
-
return ResizeCanvasLayoutFunction;
|
|
3763
|
-
}());
|
|
3764
|
-
|
|
3765
|
-
var AdvancedLayoutManager = /** @class */ (function (_super) {
|
|
3766
|
-
__extends(AdvancedLayoutManager, _super);
|
|
3767
|
-
function AdvancedLayoutManager(canvas) {
|
|
3768
|
-
var _this = _super.call(this, canvas) || this;
|
|
3769
|
-
_this.key = exports.LayoutManager.ADVANCED;
|
|
3770
|
-
_this.pinToBottom = new PinToBottomLayoutFunction();
|
|
3771
|
-
_this.redrawAll = new RedrawAllLayoutFunction();
|
|
3772
|
-
_this.repositionBorders = new RepositionBordersLayoutFunction();
|
|
3773
|
-
_this.repositionCutoffs = new RepositionCutoffsLayoutFunction();
|
|
3774
|
-
_this.repositionBackgrounds = new RepositionBackgroundsLayoutFunction();
|
|
3775
|
-
_this.resizeCanvas = new ResizeCanvasLayoutFunction();
|
|
3776
|
-
return _this;
|
|
3777
|
-
}
|
|
3778
|
-
AdvancedLayoutManager.prototype.onCanvasDimensionsChange = function () {
|
|
3779
|
-
this.pinToBottom.execute(this.canvas);
|
|
3780
|
-
this.repositionCutoffs.execute(this.canvas);
|
|
3781
|
-
this.repositionBorders.execute(this.canvas);
|
|
3782
|
-
this.repositionBackgrounds.execute(this.canvas);
|
|
3783
|
-
this.redrawAll.execute(this.canvas);
|
|
3784
|
-
};
|
|
3785
|
-
AdvancedLayoutManager.prototype.onTextChange = function () {
|
|
3786
|
-
this.resizeCanvas.execute(this.canvas);
|
|
3787
|
-
};
|
|
3788
|
-
AdvancedLayoutManager.prototype.onObjectListChange = function () {
|
|
3789
|
-
this.redrawAll.execute(this.canvas);
|
|
3790
|
-
};
|
|
3791
|
-
return AdvancedLayoutManager;
|
|
3792
|
-
}(AbstractLayoutManager));
|
|
3793
|
-
|
|
3794
3811
|
exports.AbstractCanvasObject = AbstractCanvasObject;
|
|
3795
3812
|
exports.AbstractInteractiveCanvas = AbstractInteractiveCanvas;
|
|
3796
3813
|
exports.AbstractLayoutManager = AbstractLayoutManager;
|
package/dist/undo-stack.d.ts
CHANGED
|
@@ -1,13 +1,27 @@
|
|
|
1
1
|
import { ICanvasState } from "./types/canvas-state.interface";
|
|
2
2
|
import { IInteractiveCanvas } from "./interactive-canvas.interface";
|
|
3
|
-
|
|
3
|
+
import { IUndoStack } from "./undo-stack.interface";
|
|
4
|
+
export declare class UndoStack implements IUndoStack {
|
|
4
5
|
protected canvas: IInteractiveCanvas;
|
|
5
6
|
private readonly size;
|
|
6
7
|
private undoStates;
|
|
7
8
|
private redoStates;
|
|
8
|
-
private
|
|
9
|
+
private lastState;
|
|
9
10
|
constructor(canvas: IInteractiveCanvas, size?: number);
|
|
11
|
+
/**
|
|
12
|
+
* @override
|
|
13
|
+
* @inheritDoc
|
|
14
|
+
*/
|
|
10
15
|
save(state: ICanvasState): void;
|
|
16
|
+
/**
|
|
17
|
+
* @override
|
|
18
|
+
* @inheritDoc
|
|
19
|
+
*/
|
|
11
20
|
undo(): Promise<void>;
|
|
21
|
+
/**
|
|
22
|
+
* @override
|
|
23
|
+
* @inheritDoc
|
|
24
|
+
*/
|
|
12
25
|
redo(): Promise<void>;
|
|
26
|
+
private clearRedoStackIfCanvasChanged;
|
|
13
27
|
}
|