@leapfrog/interactive-canvas 2.0.15-beta-1 → 2.0.15

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.
Files changed (4) hide show
  1. package/dist/interactive-canvas.es.js +49 -44
  2. package/dist/interactive-canvas.js +49 -44
  3. package/dist/object/impl/text.d.ts +10 -1
  4. package/package.json +3 -4
package/dist/interactive-canvas.es.js CHANGED
@@ -1,5 +1,4 @@
1
1
  import _, { round, each, values, reduce, clone, isEqual } from 'lodash';
2
- import { oc } from 'ts-optchain';
3
2
  import { BehaviorSubject, Subject } from 'rxjs';
4
3
  import { fabric } from 'fabric';
5
4
 
@@ -64,7 +63,6 @@ var Print6ColCanvasDimensions = /** @class */ (function () {
64
63
  this.height = height;
65
64
  this.heightMm = Math.max(0, height * 10);
66
65
  this.heightPx = round(this.heightMm * PIXELS_PER_MM$1);
67
- console.log("interactive canvas");
68
66
  }
69
67
  Print6ColCanvasDimensions.prototype.withSize = function (width, height) {
70
68
  return new Print6ColCanvasDimensions(width, height);
@@ -327,9 +325,10 @@ var ResizeCanvasLayoutFunction = /** @class */ (function () {
327
325
  function ResizeCanvasLayoutFunction() {
328
326
  }
329
327
  ResizeCanvasLayoutFunction.prototype.execute = function (canvas) {
328
+ var _a, _b;
330
329
  if (canvas.getLayoutManager().isEnforcedPositioning)
331
330
  return;
332
- if (oc(canvas.getDimensionsRestrictions()).fixed(false))
331
+ if ((_b = (_a = canvas === null || canvas === void 0 ? void 0 : canvas.getDimensionsRestrictions()) === null || _a === void 0 ? void 0 : _a.fixed) !== null && _b !== void 0 ? _b : false)
333
332
  return;
334
333
  var currentDimensions = canvas.getDimensions();
335
334
  var baseDimensions = canvas.getBaseDimensions();
@@ -437,13 +436,14 @@ var StackObjectsLayoutFunction = /** @class */ (function () {
437
436
  var currentColumnWidthPercent = 0;
438
437
  each(footerRows.rows, function (row) {
439
438
  each(row.objects, function (object) {
439
+ var _a, _b, _c;
440
440
  var columnOffset = currentColumnWidthPercent / 100 * layoutAreaWidth;
441
- var objectMargin = oc(object.getMargin()).left(0);
441
+ var objectMargin = (_b = (_a = object === null || object === void 0 ? void 0 : object.getMargin()) === null || _a === void 0 ? void 0 : _a.left) !== null && _b !== void 0 ? _b : 0;
442
442
  var left = canvasMargin.left + columnOffset + objectMargin;
443
443
  if (object.getType() === ObjectType.VERTICAL_RULE)
444
444
  object.setPosition({ height: row.height });
445
445
  object.setPosition({
446
- top: nextObjectTop + oc(object.getMargin()).top(0),
446
+ top: nextObjectTop + ((_c = object === null || object === void 0 ? void 0 : object.getMargin()) === null || _c === void 0 ? void 0 : _c.top) || 0,
447
447
  left: left
448
448
  });
449
449
  currentColumnWidthPercent += object.getColumnWidthPercent();
@@ -453,6 +453,7 @@ var StackObjectsLayoutFunction = /** @class */ (function () {
453
453
  });
454
454
  };
455
455
  StackObjectsLayoutFunction.prototype.layoutBody = function (bodyRows, canvas, footerHeight) {
456
+ var _a, _b, _c, _d;
456
457
  var canvasDimensions = canvas.getDimensions();
457
458
  var canvasMargin = canvas.getMargin();
458
459
  var workableWidth = canvasDimensions.widthPx - canvasMargin.left - canvasMargin.right;
@@ -465,10 +466,10 @@ var StackObjectsLayoutFunction = /** @class */ (function () {
465
466
  for (var i = 0; i < bodyRows.rows.length; i++) {
466
467
  var row = bodyRows.rows[i];
467
468
  var nextRow = bodyRows.rows[i + 1];
468
- for (var _i = 0, _a = row.objects; _i < _a.length; _i++) {
469
- var object = _a[_i];
469
+ for (var _i = 0, _e = row.objects; _i < _e.length; _i++) {
470
+ var object = _e[_i];
470
471
  var columnOffset = currentColumnWidthPercent / 100 * workableWidth;
471
- var objectMargin = oc(object.getMargin()).left(0);
472
+ var objectMargin = (_a = object.getMargin().left) !== null && _a !== void 0 ? _a : 0;
472
473
  var objectLeft = canvasMargin.left + columnOffset + objectMargin;
473
474
  if (object.getType() === ObjectType.TEXT && object.isBulleted())
474
475
  objectLeft += object.getBulletMargin();
@@ -477,7 +478,7 @@ var StackObjectsLayoutFunction = /** @class */ (function () {
477
478
  if (object.getType() === ObjectType.VERTICAL_RULE)
478
479
  return;
479
480
  object.setPosition({
480
- top: nextObjectTop + oc(object.getMargin()).top(0),
481
+ top: nextObjectTop + ((_b = object === null || object === void 0 ? void 0 : object.getMargin()) === null || _b === void 0 ? void 0 : _b.top) || 0,
481
482
  left: objectLeft
482
483
  });
483
484
  currentColumnWidthPercent += object.getColumnWidthPercent();
@@ -485,7 +486,7 @@ var StackObjectsLayoutFunction = /** @class */ (function () {
485
486
  currentColumnWidthPercent = 0;
486
487
  nextObjectTop += row.height;
487
488
  var thisRowIsHR = row.objects.length === 1 && row.objects[0].getType() === ObjectType.HORIZONTAL_RULE;
488
- var nextRowIsHR = oc(nextRow).objects.length() === 1 && oc(nextRow).objects()[0].getType() === ObjectType.HORIZONTAL_RULE;
489
+ var nextRowIsHR = ((_c = nextRow === null || nextRow === void 0 ? void 0 : nextRow.objects) === null || _c === void 0 ? void 0 : _c.length) === 1 && ((_d = nextRow === null || nextRow === void 0 ? void 0 : nextRow.objects[0]) === null || _d === void 0 ? void 0 : _d.getType()) === ObjectType.HORIZONTAL_RULE;
489
490
  if (!thisRowIsHR && !nextRowIsHR) {
490
491
  nextObjectTop += spaceSize;
491
492
  }
@@ -493,8 +494,9 @@ var StackObjectsLayoutFunction = /** @class */ (function () {
493
494
  };
494
495
  StackObjectsLayoutFunction.prototype.applyWidths = function (objects, layoutWidth) {
495
496
  _(objects).forEach(function (object) {
497
+ var _a, _b;
496
498
  var targetWidth = object.getColumnWidthPercent() / 100 * layoutWidth;
497
- var actualWidth = targetWidth - oc(object.getMargin()).left(0) - oc(object.getMargin()).right(0);
499
+ var actualWidth = targetWidth - (((_a = object === null || object === void 0 ? void 0 : object.getMargin()) === null || _a === void 0 ? void 0 : _a.left) || 0) - (((_b = object === null || object === void 0 ? void 0 : object.getMargin()) === null || _b === void 0 ? void 0 : _b.right) || 0);
498
500
  if (object.getType() === ObjectType.VERTICAL_RULE)
499
501
  return;
500
502
  if (object.getType() === ObjectType.TEXT && object.isBulleted())
@@ -508,10 +510,11 @@ var StackObjectsLayoutFunction = /** @class */ (function () {
508
510
  });
509
511
  };
510
512
  StackObjectsLayoutFunction.prototype.adjustCanvasSize = function (canvas, requiredHeight) {
511
- if (oc(canvas.getDimensionsRestrictions()).fixed(false))
513
+ var _a, _b, _c, _d;
514
+ if ((_a = canvas === null || canvas === void 0 ? void 0 : canvas.getDimensionsRestrictions()) === null || _a === void 0 ? void 0 : _a.fixed)
512
515
  return;
513
516
  var dimensions = canvas.getDimensions();
514
- var minHeight = oc(canvas.getDimensionsRestrictions()).height.min(MIN_MAGNITUDE);
517
+ var minHeight = (_d = (_c = (_b = canvas === null || canvas === void 0 ? void 0 : canvas.getDimensionsRestrictions()) === null || _b === void 0 ? void 0 : _b.height) === null || _c === void 0 ? void 0 : _c.min) !== null && _d !== void 0 ? _d : MIN_MAGNITUDE;
515
518
  var targetDimensions = canvas.getDimensions().withSize(dimensions.width, minHeight);
516
519
  while (targetDimensions.heightPx < requiredHeight) {
517
520
  targetDimensions = targetDimensions.withSize(dimensions.width, targetDimensions.height + 1);
@@ -544,17 +547,19 @@ var StackObjectsLayoutFunction = /** @class */ (function () {
544
547
  return result;
545
548
  };
546
549
  StackObjectsLayoutFunction.prototype.getObjectHeight = function (element) {
550
+ var _a, _b;
547
551
  return element.getBoundingBox().height
548
- + oc(element.getMargin()).top(0)
549
- + oc(element.getMargin()).bottom(0);
552
+ + ((_a = element === null || element === void 0 ? void 0 : element.getMargin()) === null || _a === void 0 ? void 0 : _a.top) || 0
553
+ + ((_b = element === null || element === void 0 ? void 0 : element.getMargin()) === null || _b === void 0 ? void 0 : _b.bottom) || 0;
550
554
  };
551
555
  StackObjectsLayoutFunction.prototype.countSpaces = function (rows) {
556
+ var _a, _b;
552
557
  var count = 0;
553
558
  for (var i = 0; i < rows.rows.length - 1; i++) {
554
559
  var row = rows.rows[i];
555
560
  var nextRow = rows.rows[i + 1];
556
561
  var thisRowIsHR = row.objects.length === 1 && row.objects[0].getType() === ObjectType.HORIZONTAL_RULE;
557
- var nextRowIsHR = oc(nextRow).objects.length() === 1 && oc(nextRow).objects()[0].getType() === ObjectType.HORIZONTAL_RULE;
562
+ var nextRowIsHR = ((_a = nextRow === null || nextRow === void 0 ? void 0 : nextRow.objects) === null || _a === void 0 ? void 0 : _a.length) === 1 && ((_b = nextRow === null || nextRow === void 0 ? void 0 : nextRow.objects[0]) === null || _b === void 0 ? void 0 : _b.getType()) === ObjectType.HORIZONTAL_RULE;
558
563
  if (!thisRowIsHR && !nextRowIsHR) {
559
564
  count++;
560
565
  }
@@ -796,14 +801,15 @@ var AbstractCanvasObject = /** @class */ (function () {
796
801
  * @inheritDoc
797
802
  */
798
803
  AbstractCanvasObject.prototype.setMargin = function (margin) {
804
+ var _a, _b;
799
805
  if (!margin)
800
806
  return;
801
- var newMargin = oc(this.data).margin({
807
+ var newMargin = (_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a.margin) !== null && _b !== void 0 ? _b : {
802
808
  top: 0,
803
809
  right: 0,
804
810
  bottom: 0,
805
811
  left: 0
806
- });
812
+ };
807
813
  if (margin.top != undefined)
808
814
  newMargin.top = margin.top || 0;
809
815
  if (margin.right != undefined)
@@ -820,7 +826,8 @@ var AbstractCanvasObject = /** @class */ (function () {
820
826
  * @inheritDoc
821
827
  */
822
828
  AbstractCanvasObject.prototype.getColumnWidthPercent = function () {
823
- return Math.max(Math.min(oc(this.data).columnWidthPercent(100), 100), 0);
829
+ var _a, _b;
830
+ return Math.max(Math.min((_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a.columnWidthPercent) !== null && _b !== void 0 ? _b : 100, 100), 0);
824
831
  };
825
832
  /**
826
833
  * @override
@@ -1902,6 +1909,20 @@ var RichText = /** @class */ (function (_super) {
1902
1909
  return RichText;
1903
1910
  }(Image));
1904
1911
 
1912
+ var ObjectType;
1913
+ (function (ObjectType) {
1914
+ ObjectType["TEXT"] = "TEXT";
1915
+ ObjectType["BORDER"] = "BORDER";
1916
+ ObjectType["IMAGE"] = "IMAGE";
1917
+ ObjectType["RECTANGLE"] = "RECTANGLE";
1918
+ ObjectType["LIBRARY_IMAGE"] = "LIBRARY_IMAGE";
1919
+ ObjectType["CUTOFF"] = "CUTOFF";
1920
+ ObjectType["VERTICAL_RULE"] = "VERTICAL_RULE";
1921
+ ObjectType["HORIZONTAL_RULE"] = "HORIZONTAL_RULE";
1922
+ ObjectType["RICH_TEXT"] = "RICH_TEXT";
1923
+ ObjectType["BACKGROUND_IMAGE"] = "BACKGROUND_IMAGE";
1924
+ })(ObjectType || (ObjectType = {}));
1925
+
1905
1926
  var Text = /** @class */ (function (_super) {
1906
1927
  __extends(Text, _super);
1907
1928
  function Text(canvas, fabricObject, persistedField) {
@@ -2461,14 +2482,12 @@ var Text = /** @class */ (function (_super) {
2461
2482
  var canvasDirty_1 = false;
2462
2483
  canvas_1.renderOnAddRemove = false;
2463
2484
  _.each(activeBullets_1, function (bullet) {
2464
- console.log("activeBullet", bullet);
2465
2485
  if (!canvas_1.contains(bullet)) {
2466
2486
  canvas_1.add(bullet);
2467
2487
  canvasDirty_1 = true;
2468
2488
  }
2469
2489
  });
2470
2490
  _.each(currentBullets_1, function (bullet, key) {
2471
- console.log("currentBullet", bullet);
2472
2491
  if (!activeBullets_1[key]) {
2473
2492
  canvas_1.remove(bullet);
2474
2493
  canvasDirty_1 = true;
@@ -2518,7 +2537,6 @@ var Text = /** @class */ (function (_super) {
2518
2537
  var canvasDirty_2 = false;
2519
2538
  canvas_2.renderOnAddRemove = false;
2520
2539
  _.each(activeMarkers_1, function (marker) {
2521
- console.log("activeMarkers", marker);
2522
2540
  if (!marker)
2523
2541
  return;
2524
2542
  if (!canvas_2.contains(marker)) {
@@ -2527,7 +2545,6 @@ var Text = /** @class */ (function (_super) {
2527
2545
  }
2528
2546
  });
2529
2547
  _.each(existingMarkers_1, function (marker, key) {
2530
- console.log("existingMarkers", marker);
2531
2548
  if (!marker)
2532
2549
  return;
2533
2550
  if (!activeMarkers_1[key]) {
@@ -2815,20 +2832,6 @@ var ImageType;
2815
2832
  ImageType["PHOTO"] = "PHOTO";
2816
2833
  })(ImageType || (ImageType = {}));
2817
2834
 
2818
- var ObjectType;
2819
- (function (ObjectType) {
2820
- ObjectType["TEXT"] = "TEXT";
2821
- ObjectType["BORDER"] = "BORDER";
2822
- ObjectType["IMAGE"] = "IMAGE";
2823
- ObjectType["RECTANGLE"] = "RECTANGLE";
2824
- ObjectType["LIBRARY_IMAGE"] = "LIBRARY_IMAGE";
2825
- ObjectType["CUTOFF"] = "CUTOFF";
2826
- ObjectType["VERTICAL_RULE"] = "VERTICAL_RULE";
2827
- ObjectType["HORIZONTAL_RULE"] = "HORIZONTAL_RULE";
2828
- ObjectType["RICH_TEXT"] = "RICH_TEXT";
2829
- ObjectType["BACKGROUND_IMAGE"] = "BACKGROUND_IMAGE";
2830
- })(ObjectType || (ObjectType = {}));
2831
-
2832
2835
  var AbstractInteractiveCanvas = /** @class */ (function () {
2833
2836
  function AbstractInteractiveCanvas(fabric, fabricCanvas, devicePixelRatio) {
2834
2837
  this.fabric = fabric;
@@ -3010,11 +3013,12 @@ var AbstractInteractiveCanvas = /** @class */ (function () {
3010
3013
  * @inheritDoc
3011
3014
  */
3012
3015
  AbstractInteractiveCanvas.prototype.setDimensionRestrictions = function (restrictions) {
3016
+ var _a, _b, _c, _d, _e, _f, _g, _h;
3013
3017
  this.dimensionRestrictions$.next(restrictions);
3014
3018
  var dimensions = this.getDimensions();
3015
3019
  if (this.dimensionsExceedRestrictions(dimensions)) {
3016
3020
  var newDimensions = dimensions
3017
- .withSize(Math.min(Math.max(oc(restrictions).width.min(dimensions.width), dimensions.width), Math.max(oc(restrictions).width.max(dimensions.width))), Math.min(Math.max(oc(restrictions).height.min(dimensions.height), dimensions.height), Math.max(oc(restrictions).height.max(dimensions.height))));
3021
+ .withSize(Math.min(Math.max((_b = (_a = restrictions === null || restrictions === void 0 ? void 0 : restrictions.width) === null || _a === void 0 ? void 0 : _a.min) !== null && _b !== void 0 ? _b : dimensions.width, dimensions.width), Math.max((_d = (_c = restrictions === null || restrictions === void 0 ? void 0 : restrictions.width) === null || _c === void 0 ? void 0 : _c.max) !== null && _d !== void 0 ? _d : dimensions.width)), Math.min(Math.max((_f = (_e = restrictions === null || restrictions === void 0 ? void 0 : restrictions.height) === null || _e === void 0 ? void 0 : _e.min) !== null && _f !== void 0 ? _f : dimensions.height, dimensions.height), Math.max((_h = (_g = restrictions === null || restrictions === void 0 ? void 0 : restrictions.height) === null || _g === void 0 ? void 0 : _g.max) !== null && _h !== void 0 ? _h : dimensions.height)));
3018
3022
  this.setBaseDimensions(newDimensions);
3019
3023
  }
3020
3024
  };
@@ -3808,13 +3812,14 @@ var AbstractInteractiveCanvas = /** @class */ (function () {
3808
3812
  this.objects$.next(__spreadArray(__spreadArray([], this.objects$.value, true), [object], false));
3809
3813
  };
3810
3814
  AbstractInteractiveCanvas.prototype.dimensionsExceedRestrictions = function (dimensions) {
3815
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
3811
3816
  var restrictions = this.dimensionRestrictions$.value;
3812
- return oc(restrictions).height.min() != undefined && dimensions.height < oc(restrictions).height.min()
3813
- || oc(restrictions).height.max() != undefined && dimensions.height > oc(restrictions).height.max()
3814
- || oc(restrictions).width.min() != undefined && dimensions.width < oc(restrictions).width.min()
3815
- || oc(restrictions).width.max() != undefined && dimensions.width > oc(restrictions).width.max()
3816
- || oc(restrictions).volume.min() != undefined && dimensions.height * dimensions.width < oc(restrictions).volume.min()
3817
- || oc(restrictions).volume.max() != undefined && dimensions.height * dimensions.width > oc(restrictions).volume.max();
3817
+ return ((_a = restrictions === null || restrictions === void 0 ? void 0 : restrictions.height) === null || _a === void 0 ? void 0 : _a.min) != undefined && dimensions.height < ((_b = restrictions === null || restrictions === void 0 ? void 0 : restrictions.height) === null || _b === void 0 ? void 0 : _b.min)
3818
+ || ((_c = restrictions === null || restrictions === void 0 ? void 0 : restrictions.height) === null || _c === void 0 ? void 0 : _c.max) != undefined && dimensions.height > ((_d = restrictions === null || restrictions === void 0 ? void 0 : restrictions.height) === null || _d === void 0 ? void 0 : _d.max)
3819
+ || ((_e = restrictions === null || restrictions === void 0 ? void 0 : restrictions.width) === null || _e === void 0 ? void 0 : _e.min) != undefined && dimensions.width < ((_f = restrictions === null || restrictions === void 0 ? void 0 : restrictions.width) === null || _f === void 0 ? void 0 : _f.min)
3820
+ || ((_g = restrictions === null || restrictions === void 0 ? void 0 : restrictions.width) === null || _g === void 0 ? void 0 : _g.max) != undefined && dimensions.width > ((_h = restrictions === null || restrictions === void 0 ? void 0 : restrictions.width) === null || _h === void 0 ? void 0 : _h.max)
3821
+ || ((_j = restrictions === null || restrictions === void 0 ? void 0 : restrictions.volume) === null || _j === void 0 ? void 0 : _j.min) != undefined && dimensions.height * dimensions.width < ((_k = restrictions === null || restrictions === void 0 ? void 0 : restrictions.volume) === null || _k === void 0 ? void 0 : _k.min)
3822
+ || ((_l = restrictions === null || restrictions === void 0 ? void 0 : restrictions.volume) === null || _l === void 0 ? void 0 : _l.max) != undefined && dimensions.height * dimensions.width > ((_m = restrictions === null || restrictions === void 0 ? void 0 : restrictions.volume) === null || _m === void 0 ? void 0 : _m.max);
3818
3823
  };
3819
3824
  return AbstractInteractiveCanvas;
3820
3825
  }());
package/dist/interactive-canvas.js CHANGED
@@ -3,7 +3,6 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var _ = require('lodash');
6
- var tsOptchain = require('ts-optchain');
7
6
  var rxjs = require('rxjs');
8
7
  var fabric = require('fabric');
9
8
 
@@ -72,7 +71,6 @@ var Print6ColCanvasDimensions = /** @class */ (function () {
72
71
  this.height = height;
73
72
  this.heightMm = Math.max(0, height * 10);
74
73
  this.heightPx = _.round(this.heightMm * PIXELS_PER_MM$1);
75
- console.log("interactive canvas");
76
74
  }
77
75
  Print6ColCanvasDimensions.prototype.withSize = function (width, height) {
78
76
  return new Print6ColCanvasDimensions(width, height);
@@ -335,9 +333,10 @@ var ResizeCanvasLayoutFunction = /** @class */ (function () {
335
333
  function ResizeCanvasLayoutFunction() {
336
334
  }
337
335
  ResizeCanvasLayoutFunction.prototype.execute = function (canvas) {
336
+ var _a, _b;
338
337
  if (canvas.getLayoutManager().isEnforcedPositioning)
339
338
  return;
340
- if (tsOptchain.oc(canvas.getDimensionsRestrictions()).fixed(false))
339
+ if ((_b = (_a = canvas === null || canvas === void 0 ? void 0 : canvas.getDimensionsRestrictions()) === null || _a === void 0 ? void 0 : _a.fixed) !== null && _b !== void 0 ? _b : false)
341
340
  return;
342
341
  var currentDimensions = canvas.getDimensions();
343
342
  var baseDimensions = canvas.getBaseDimensions();
@@ -445,13 +444,14 @@ var StackObjectsLayoutFunction = /** @class */ (function () {
445
444
  var currentColumnWidthPercent = 0;
446
445
  _.each(footerRows.rows, function (row) {
447
446
  _.each(row.objects, function (object) {
447
+ var _a, _b, _c;
448
448
  var columnOffset = currentColumnWidthPercent / 100 * layoutAreaWidth;
449
- var objectMargin = tsOptchain.oc(object.getMargin()).left(0);
449
+ var objectMargin = (_b = (_a = object === null || object === void 0 ? void 0 : object.getMargin()) === null || _a === void 0 ? void 0 : _a.left) !== null && _b !== void 0 ? _b : 0;
450
450
  var left = canvasMargin.left + columnOffset + objectMargin;
451
451
  if (object.getType() === exports.ObjectType.VERTICAL_RULE)
452
452
  object.setPosition({ height: row.height });
453
453
  object.setPosition({
454
- top: nextObjectTop + tsOptchain.oc(object.getMargin()).top(0),
454
+ top: nextObjectTop + ((_c = object === null || object === void 0 ? void 0 : object.getMargin()) === null || _c === void 0 ? void 0 : _c.top) || 0,
455
455
  left: left
456
456
  });
457
457
  currentColumnWidthPercent += object.getColumnWidthPercent();
@@ -461,6 +461,7 @@ var StackObjectsLayoutFunction = /** @class */ (function () {
461
461
  });
462
462
  };
463
463
  StackObjectsLayoutFunction.prototype.layoutBody = function (bodyRows, canvas, footerHeight) {
464
+ var _a, _b, _c, _d;
464
465
  var canvasDimensions = canvas.getDimensions();
465
466
  var canvasMargin = canvas.getMargin();
466
467
  var workableWidth = canvasDimensions.widthPx - canvasMargin.left - canvasMargin.right;
@@ -473,10 +474,10 @@ var StackObjectsLayoutFunction = /** @class */ (function () {
473
474
  for (var i = 0; i < bodyRows.rows.length; i++) {
474
475
  var row = bodyRows.rows[i];
475
476
  var nextRow = bodyRows.rows[i + 1];
476
- for (var _i = 0, _a = row.objects; _i < _a.length; _i++) {
477
- var object = _a[_i];
477
+ for (var _i = 0, _e = row.objects; _i < _e.length; _i++) {
478
+ var object = _e[_i];
478
479
  var columnOffset = currentColumnWidthPercent / 100 * workableWidth;
479
- var objectMargin = tsOptchain.oc(object.getMargin()).left(0);
480
+ var objectMargin = (_a = object.getMargin().left) !== null && _a !== void 0 ? _a : 0;
480
481
  var objectLeft = canvasMargin.left + columnOffset + objectMargin;
481
482
  if (object.getType() === exports.ObjectType.TEXT && object.isBulleted())
482
483
  objectLeft += object.getBulletMargin();
@@ -485,7 +486,7 @@ var StackObjectsLayoutFunction = /** @class */ (function () {
485
486
  if (object.getType() === exports.ObjectType.VERTICAL_RULE)
486
487
  return;
487
488
  object.setPosition({
488
- top: nextObjectTop + tsOptchain.oc(object.getMargin()).top(0),
489
+ top: nextObjectTop + ((_b = object === null || object === void 0 ? void 0 : object.getMargin()) === null || _b === void 0 ? void 0 : _b.top) || 0,
489
490
  left: objectLeft
490
491
  });
491
492
  currentColumnWidthPercent += object.getColumnWidthPercent();
@@ -493,7 +494,7 @@ var StackObjectsLayoutFunction = /** @class */ (function () {
493
494
  currentColumnWidthPercent = 0;
494
495
  nextObjectTop += row.height;
495
496
  var thisRowIsHR = row.objects.length === 1 && row.objects[0].getType() === exports.ObjectType.HORIZONTAL_RULE;
496
- var nextRowIsHR = tsOptchain.oc(nextRow).objects.length() === 1 && tsOptchain.oc(nextRow).objects()[0].getType() === exports.ObjectType.HORIZONTAL_RULE;
497
+ var nextRowIsHR = ((_c = nextRow === null || nextRow === void 0 ? void 0 : nextRow.objects) === null || _c === void 0 ? void 0 : _c.length) === 1 && ((_d = nextRow === null || nextRow === void 0 ? void 0 : nextRow.objects[0]) === null || _d === void 0 ? void 0 : _d.getType()) === exports.ObjectType.HORIZONTAL_RULE;
497
498
  if (!thisRowIsHR && !nextRowIsHR) {
498
499
  nextObjectTop += spaceSize;
499
500
  }
@@ -501,8 +502,9 @@ var StackObjectsLayoutFunction = /** @class */ (function () {
501
502
  };
502
503
  StackObjectsLayoutFunction.prototype.applyWidths = function (objects, layoutWidth) {
503
504
  ___default["default"](objects).forEach(function (object) {
505
+ var _a, _b;
504
506
  var targetWidth = object.getColumnWidthPercent() / 100 * layoutWidth;
505
- var actualWidth = targetWidth - tsOptchain.oc(object.getMargin()).left(0) - tsOptchain.oc(object.getMargin()).right(0);
507
+ var actualWidth = targetWidth - (((_a = object === null || object === void 0 ? void 0 : object.getMargin()) === null || _a === void 0 ? void 0 : _a.left) || 0) - (((_b = object === null || object === void 0 ? void 0 : object.getMargin()) === null || _b === void 0 ? void 0 : _b.right) || 0);
506
508
  if (object.getType() === exports.ObjectType.VERTICAL_RULE)
507
509
  return;
508
510
  if (object.getType() === exports.ObjectType.TEXT && object.isBulleted())
@@ -516,10 +518,11 @@ var StackObjectsLayoutFunction = /** @class */ (function () {
516
518
  });
517
519
  };
518
520
  StackObjectsLayoutFunction.prototype.adjustCanvasSize = function (canvas, requiredHeight) {
519
- if (tsOptchain.oc(canvas.getDimensionsRestrictions()).fixed(false))
521
+ var _a, _b, _c, _d;
522
+ if ((_a = canvas === null || canvas === void 0 ? void 0 : canvas.getDimensionsRestrictions()) === null || _a === void 0 ? void 0 : _a.fixed)
520
523
  return;
521
524
  var dimensions = canvas.getDimensions();
522
- var minHeight = tsOptchain.oc(canvas.getDimensionsRestrictions()).height.min(MIN_MAGNITUDE);
525
+ var minHeight = (_d = (_c = (_b = canvas === null || canvas === void 0 ? void 0 : canvas.getDimensionsRestrictions()) === null || _b === void 0 ? void 0 : _b.height) === null || _c === void 0 ? void 0 : _c.min) !== null && _d !== void 0 ? _d : MIN_MAGNITUDE;
523
526
  var targetDimensions = canvas.getDimensions().withSize(dimensions.width, minHeight);
524
527
  while (targetDimensions.heightPx < requiredHeight) {
525
528
  targetDimensions = targetDimensions.withSize(dimensions.width, targetDimensions.height + 1);
@@ -552,17 +555,19 @@ var StackObjectsLayoutFunction = /** @class */ (function () {
552
555
  return result;
553
556
  };
554
557
  StackObjectsLayoutFunction.prototype.getObjectHeight = function (element) {
558
+ var _a, _b;
555
559
  return element.getBoundingBox().height
556
- + tsOptchain.oc(element.getMargin()).top(0)
557
- + tsOptchain.oc(element.getMargin()).bottom(0);
560
+ + ((_a = element === null || element === void 0 ? void 0 : element.getMargin()) === null || _a === void 0 ? void 0 : _a.top) || 0
561
+ + ((_b = element === null || element === void 0 ? void 0 : element.getMargin()) === null || _b === void 0 ? void 0 : _b.bottom) || 0;
558
562
  };
559
563
  StackObjectsLayoutFunction.prototype.countSpaces = function (rows) {
564
+ var _a, _b;
560
565
  var count = 0;
561
566
  for (var i = 0; i < rows.rows.length - 1; i++) {
562
567
  var row = rows.rows[i];
563
568
  var nextRow = rows.rows[i + 1];
564
569
  var thisRowIsHR = row.objects.length === 1 && row.objects[0].getType() === exports.ObjectType.HORIZONTAL_RULE;
565
- var nextRowIsHR = tsOptchain.oc(nextRow).objects.length() === 1 && tsOptchain.oc(nextRow).objects()[0].getType() === exports.ObjectType.HORIZONTAL_RULE;
570
+ var nextRowIsHR = ((_a = nextRow === null || nextRow === void 0 ? void 0 : nextRow.objects) === null || _a === void 0 ? void 0 : _a.length) === 1 && ((_b = nextRow === null || nextRow === void 0 ? void 0 : nextRow.objects[0]) === null || _b === void 0 ? void 0 : _b.getType()) === exports.ObjectType.HORIZONTAL_RULE;
566
571
  if (!thisRowIsHR && !nextRowIsHR) {
567
572
  count++;
568
573
  }
@@ -804,14 +809,15 @@ var AbstractCanvasObject = /** @class */ (function () {
804
809
  * @inheritDoc
805
810
  */
806
811
  AbstractCanvasObject.prototype.setMargin = function (margin) {
812
+ var _a, _b;
807
813
  if (!margin)
808
814
  return;
809
- var newMargin = tsOptchain.oc(this.data).margin({
815
+ var newMargin = (_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a.margin) !== null && _b !== void 0 ? _b : {
810
816
  top: 0,
811
817
  right: 0,
812
818
  bottom: 0,
813
819
  left: 0
814
- });
820
+ };
815
821
  if (margin.top != undefined)
816
822
  newMargin.top = margin.top || 0;
817
823
  if (margin.right != undefined)
@@ -828,7 +834,8 @@ var AbstractCanvasObject = /** @class */ (function () {
828
834
  * @inheritDoc
829
835
  */
830
836
  AbstractCanvasObject.prototype.getColumnWidthPercent = function () {
831
- return Math.max(Math.min(tsOptchain.oc(this.data).columnWidthPercent(100), 100), 0);
837
+ var _a, _b;
838
+ return Math.max(Math.min((_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a.columnWidthPercent) !== null && _b !== void 0 ? _b : 100, 100), 0);
832
839
  };
833
840
  /**
834
841
  * @override
@@ -1910,6 +1917,20 @@ var RichText = /** @class */ (function (_super) {
1910
1917
  return RichText;
1911
1918
  }(Image));
1912
1919
 
1920
+ exports.ObjectType = void 0;
1921
+ (function (ObjectType) {
1922
+ ObjectType["TEXT"] = "TEXT";
1923
+ ObjectType["BORDER"] = "BORDER";
1924
+ ObjectType["IMAGE"] = "IMAGE";
1925
+ ObjectType["RECTANGLE"] = "RECTANGLE";
1926
+ ObjectType["LIBRARY_IMAGE"] = "LIBRARY_IMAGE";
1927
+ ObjectType["CUTOFF"] = "CUTOFF";
1928
+ ObjectType["VERTICAL_RULE"] = "VERTICAL_RULE";
1929
+ ObjectType["HORIZONTAL_RULE"] = "HORIZONTAL_RULE";
1930
+ ObjectType["RICH_TEXT"] = "RICH_TEXT";
1931
+ ObjectType["BACKGROUND_IMAGE"] = "BACKGROUND_IMAGE";
1932
+ })(exports.ObjectType || (exports.ObjectType = {}));
1933
+
1913
1934
  var Text = /** @class */ (function (_super) {
1914
1935
  __extends(Text, _super);
1915
1936
  function Text(canvas, fabricObject, persistedField) {
@@ -2469,14 +2490,12 @@ var Text = /** @class */ (function (_super) {
2469
2490
  var canvasDirty_1 = false;
2470
2491
  canvas_1.renderOnAddRemove = false;
2471
2492
  ___default["default"].each(activeBullets_1, function (bullet) {
2472
- console.log("activeBullet", bullet);
2473
2493
  if (!canvas_1.contains(bullet)) {
2474
2494
  canvas_1.add(bullet);
2475
2495
  canvasDirty_1 = true;
2476
2496
  }
2477
2497
  });
2478
2498
  ___default["default"].each(currentBullets_1, function (bullet, key) {
2479
- console.log("currentBullet", bullet);
2480
2499
  if (!activeBullets_1[key]) {
2481
2500
  canvas_1.remove(bullet);
2482
2501
  canvasDirty_1 = true;
@@ -2526,7 +2545,6 @@ var Text = /** @class */ (function (_super) {
2526
2545
  var canvasDirty_2 = false;
2527
2546
  canvas_2.renderOnAddRemove = false;
2528
2547
  ___default["default"].each(activeMarkers_1, function (marker) {
2529
- console.log("activeMarkers", marker);
2530
2548
  if (!marker)
2531
2549
  return;
2532
2550
  if (!canvas_2.contains(marker)) {
@@ -2535,7 +2553,6 @@ var Text = /** @class */ (function (_super) {
2535
2553
  }
2536
2554
  });
2537
2555
  ___default["default"].each(existingMarkers_1, function (marker, key) {
2538
- console.log("existingMarkers", marker);
2539
2556
  if (!marker)
2540
2557
  return;
2541
2558
  if (!activeMarkers_1[key]) {
@@ -2823,20 +2840,6 @@ exports.ImageType = void 0;
2823
2840
  ImageType["PHOTO"] = "PHOTO";
2824
2841
  })(exports.ImageType || (exports.ImageType = {}));
2825
2842
 
2826
- exports.ObjectType = void 0;
2827
- (function (ObjectType) {
2828
- ObjectType["TEXT"] = "TEXT";
2829
- ObjectType["BORDER"] = "BORDER";
2830
- ObjectType["IMAGE"] = "IMAGE";
2831
- ObjectType["RECTANGLE"] = "RECTANGLE";
2832
- ObjectType["LIBRARY_IMAGE"] = "LIBRARY_IMAGE";
2833
- ObjectType["CUTOFF"] = "CUTOFF";
2834
- ObjectType["VERTICAL_RULE"] = "VERTICAL_RULE";
2835
- ObjectType["HORIZONTAL_RULE"] = "HORIZONTAL_RULE";
2836
- ObjectType["RICH_TEXT"] = "RICH_TEXT";
2837
- ObjectType["BACKGROUND_IMAGE"] = "BACKGROUND_IMAGE";
2838
- })(exports.ObjectType || (exports.ObjectType = {}));
2839
-
2840
2843
  var AbstractInteractiveCanvas = /** @class */ (function () {
2841
2844
  function AbstractInteractiveCanvas(fabric, fabricCanvas, devicePixelRatio) {
2842
2845
  this.fabric = fabric;
@@ -3018,11 +3021,12 @@ var AbstractInteractiveCanvas = /** @class */ (function () {
3018
3021
  * @inheritDoc
3019
3022
  */
3020
3023
  AbstractInteractiveCanvas.prototype.setDimensionRestrictions = function (restrictions) {
3024
+ var _a, _b, _c, _d, _e, _f, _g, _h;
3021
3025
  this.dimensionRestrictions$.next(restrictions);
3022
3026
  var dimensions = this.getDimensions();
3023
3027
  if (this.dimensionsExceedRestrictions(dimensions)) {
3024
3028
  var newDimensions = dimensions
3025
- .withSize(Math.min(Math.max(tsOptchain.oc(restrictions).width.min(dimensions.width), dimensions.width), Math.max(tsOptchain.oc(restrictions).width.max(dimensions.width))), Math.min(Math.max(tsOptchain.oc(restrictions).height.min(dimensions.height), dimensions.height), Math.max(tsOptchain.oc(restrictions).height.max(dimensions.height))));
3029
+ .withSize(Math.min(Math.max((_b = (_a = restrictions === null || restrictions === void 0 ? void 0 : restrictions.width) === null || _a === void 0 ? void 0 : _a.min) !== null && _b !== void 0 ? _b : dimensions.width, dimensions.width), Math.max((_d = (_c = restrictions === null || restrictions === void 0 ? void 0 : restrictions.width) === null || _c === void 0 ? void 0 : _c.max) !== null && _d !== void 0 ? _d : dimensions.width)), Math.min(Math.max((_f = (_e = restrictions === null || restrictions === void 0 ? void 0 : restrictions.height) === null || _e === void 0 ? void 0 : _e.min) !== null && _f !== void 0 ? _f : dimensions.height, dimensions.height), Math.max((_h = (_g = restrictions === null || restrictions === void 0 ? void 0 : restrictions.height) === null || _g === void 0 ? void 0 : _g.max) !== null && _h !== void 0 ? _h : dimensions.height)));
3026
3030
  this.setBaseDimensions(newDimensions);
3027
3031
  }
3028
3032
  };
@@ -3816,13 +3820,14 @@ var AbstractInteractiveCanvas = /** @class */ (function () {
3816
3820
  this.objects$.next(__spreadArray(__spreadArray([], this.objects$.value, true), [object], false));
3817
3821
  };
3818
3822
  AbstractInteractiveCanvas.prototype.dimensionsExceedRestrictions = function (dimensions) {
3823
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
3819
3824
  var restrictions = this.dimensionRestrictions$.value;
3820
- return tsOptchain.oc(restrictions).height.min() != undefined && dimensions.height < tsOptchain.oc(restrictions).height.min()
3821
- || tsOptchain.oc(restrictions).height.max() != undefined && dimensions.height > tsOptchain.oc(restrictions).height.max()
3822
- || tsOptchain.oc(restrictions).width.min() != undefined && dimensions.width < tsOptchain.oc(restrictions).width.min()
3823
- || tsOptchain.oc(restrictions).width.max() != undefined && dimensions.width > tsOptchain.oc(restrictions).width.max()
3824
- || tsOptchain.oc(restrictions).volume.min() != undefined && dimensions.height * dimensions.width < tsOptchain.oc(restrictions).volume.min()
3825
- || tsOptchain.oc(restrictions).volume.max() != undefined && dimensions.height * dimensions.width > tsOptchain.oc(restrictions).volume.max();
3825
+ return ((_a = restrictions === null || restrictions === void 0 ? void 0 : restrictions.height) === null || _a === void 0 ? void 0 : _a.min) != undefined && dimensions.height < ((_b = restrictions === null || restrictions === void 0 ? void 0 : restrictions.height) === null || _b === void 0 ? void 0 : _b.min)
3826
+ || ((_c = restrictions === null || restrictions === void 0 ? void 0 : restrictions.height) === null || _c === void 0 ? void 0 : _c.max) != undefined && dimensions.height > ((_d = restrictions === null || restrictions === void 0 ? void 0 : restrictions.height) === null || _d === void 0 ? void 0 : _d.max)
3827
+ || ((_e = restrictions === null || restrictions === void 0 ? void 0 : restrictions.width) === null || _e === void 0 ? void 0 : _e.min) != undefined && dimensions.width < ((_f = restrictions === null || restrictions === void 0 ? void 0 : restrictions.width) === null || _f === void 0 ? void 0 : _f.min)
3828
+ || ((_g = restrictions === null || restrictions === void 0 ? void 0 : restrictions.width) === null || _g === void 0 ? void 0 : _g.max) != undefined && dimensions.width > ((_h = restrictions === null || restrictions === void 0 ? void 0 : restrictions.width) === null || _h === void 0 ? void 0 : _h.max)
3829
+ || ((_j = restrictions === null || restrictions === void 0 ? void 0 : restrictions.volume) === null || _j === void 0 ? void 0 : _j.min) != undefined && dimensions.height * dimensions.width < ((_k = restrictions === null || restrictions === void 0 ? void 0 : restrictions.volume) === null || _k === void 0 ? void 0 : _k.min)
3830
+ || ((_l = restrictions === null || restrictions === void 0 ? void 0 : restrictions.volume) === null || _l === void 0 ? void 0 : _l.max) != undefined && dimensions.height * dimensions.width > ((_m = restrictions === null || restrictions === void 0 ? void 0 : restrictions.volume) === null || _m === void 0 ? void 0 : _m.max);
3826
3831
  };
3827
3832
  return AbstractInteractiveCanvas;
3828
3833
  }());
package/dist/object/impl/text.d.ts CHANGED
@@ -1,9 +1,18 @@
1
1
  import { Observable } from "rxjs";
2
- import { ExtendedFabricTextbox, IFont, IInteractiveCanvas, IMutableBackgroundColor, IMutableColor, IMutablePosition, IMutableText, IMutableTextStyle, ITextSelection, TextAlignment } from "../..";
2
+ import { IFont } from "../../font/font.interface";
3
+ import { IInteractiveCanvas } from "../../interactive-canvas.interface";
4
+ import { IMutableBackgroundColor } from "../../mutator/mutable-background-color.interface";
5
+ import { IMutableColor } from "../../mutator/mutable-color.interface";
6
+ import { IMutableText } from "../../mutator/mutable-text.interface";
7
+ import { IMutableTextStyle } from "../../mutator/mutable-text-style.interface";
8
+ import { ITextSelection } from "../../mutator/mutable-text-style.interface";
9
+ import { IMutablePosition } from "../../mutator/mutable-position.interface";
10
+ import { TextAlignment } from "../../types/text-alignment.interface";
3
11
  import { ICanvasObject } from "../canvas-object.interface";
4
12
  import { AbstractCanvasObject } from "../abstract-canvas-object";
5
13
  import { CanvasObjectData } from "../canvas-object-data";
6
14
  import { fabric } from "fabric";
15
+ import { ExtendedFabricTextbox } from "./extended-fabric-textbox.interface";
7
16
  /**
8
17
  * Text field. Displays customizable text.
9
18
  */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@leapfrog/interactive-canvas",
3
- "version": "2.0.15-beta-1",
3
+ "version": "2.0.15",
4
4
  "description": "Leapfrog interactive canvas",
5
5
  "files": [
6
6
  "dist"
@@ -13,7 +13,7 @@
13
13
  "watch": "rollup -cw"
14
14
  },
15
15
  "devDependencies": {
16
- "@types/fabric": "^5.3.10",
16
+ "@types/fabric": "^5.3.0",
17
17
  "@types/lodash": "^4.17.16",
18
18
  "typescript": "^5.8.2"
19
19
  },
@@ -22,8 +22,7 @@
22
22
  "lodash": "^4.17.21",
23
23
  "rollup": "^2.79.2",
24
24
  "rollup-plugin-typescript2": "^0.36.0",
25
- "rxjs": "^7.8.2",
26
- "ts-optchain": "^0.1.8"
25
+ "rxjs": "^7.8.2"
27
26
  },
28
27
  "author": "",
29
28
  "license": "UNLICENSED"