@leapfrog/interactive-canvas 2.0.15-beta-0 → 2.0.15-beta-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.
Files changed (4) hide show
  1. package/dist/interactive-canvas.es.js +50 -44
  2. package/dist/interactive-canvas.js +50 -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) {
@@ -2422,7 +2443,6 @@ var Text = /** @class */ (function (_super) {
2422
2443
  var fabric = this.canvas.fabric;
2423
2444
  this.fabricObject["_render"] = function (ctx) {
2424
2445
  var fabricText = this;
2425
- console.log('fabricText 123', fabricText);
2426
2446
  if (fabricText["_bullets"]) {
2427
2447
  // Determine list of active bullets
2428
2448
  var currentBullets_1 = fabricText["_bullets"];
@@ -2812,20 +2832,6 @@ var ImageType;
2812
2832
  ImageType["PHOTO"] = "PHOTO";
2813
2833
  })(ImageType || (ImageType = {}));
2814
2834
 
2815
- var ObjectType;
2816
- (function (ObjectType) {
2817
- ObjectType["TEXT"] = "TEXT";
2818
- ObjectType["BORDER"] = "BORDER";
2819
- ObjectType["IMAGE"] = "IMAGE";
2820
- ObjectType["RECTANGLE"] = "RECTANGLE";
2821
- ObjectType["LIBRARY_IMAGE"] = "LIBRARY_IMAGE";
2822
- ObjectType["CUTOFF"] = "CUTOFF";
2823
- ObjectType["VERTICAL_RULE"] = "VERTICAL_RULE";
2824
- ObjectType["HORIZONTAL_RULE"] = "HORIZONTAL_RULE";
2825
- ObjectType["RICH_TEXT"] = "RICH_TEXT";
2826
- ObjectType["BACKGROUND_IMAGE"] = "BACKGROUND_IMAGE";
2827
- })(ObjectType || (ObjectType = {}));
2828
-
2829
2835
  var AbstractInteractiveCanvas = /** @class */ (function () {
2830
2836
  function AbstractInteractiveCanvas(fabric, fabricCanvas, devicePixelRatio) {
2831
2837
  this.fabric = fabric;
@@ -2833,7 +2839,6 @@ var AbstractInteractiveCanvas = /** @class */ (function () {
2833
2839
  this.devicePixelRatio = devicePixelRatio;
2834
2840
  this.fontLibrary = new FontLibrary();
2835
2841
  this.dimensionChangeRejections$ = new Subject();
2836
- console.log(" **** Hello world");
2837
2842
  this.IMAGE_CAPTURE_COEFFICIENT = this.calculateImageCaptureCoefficient();
2838
2843
  /**
2839
2844
  * Fabric defaults to only 2 decimal places when saving, which causes havoc on the scaling of large images.
@@ -3008,11 +3013,12 @@ var AbstractInteractiveCanvas = /** @class */ (function () {
3008
3013
  * @inheritDoc
3009
3014
  */
3010
3015
  AbstractInteractiveCanvas.prototype.setDimensionRestrictions = function (restrictions) {
3016
+ var _a, _b, _c, _d, _e, _f, _g, _h;
3011
3017
  this.dimensionRestrictions$.next(restrictions);
3012
3018
  var dimensions = this.getDimensions();
3013
3019
  if (this.dimensionsExceedRestrictions(dimensions)) {
3014
3020
  var newDimensions = dimensions
3015
- .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)));
3016
3022
  this.setBaseDimensions(newDimensions);
3017
3023
  }
3018
3024
  };
@@ -3525,7 +3531,6 @@ var AbstractInteractiveCanvas = /** @class */ (function () {
3525
3531
  if (!(canvasState.canvasJson != undefined)) return [3 /*break*/, 2];
3526
3532
  json_1 = JSON.parse(canvasState.canvasJson);
3527
3533
  return [4 /*yield*/, new Promise(function (resolve) {
3528
- console.log('resolve', resolve);
3529
3534
  _this.fabricCanvas.loadFromJSON(json_1, function () { return resolve(); });
3530
3535
  })];
3531
3536
  case 1:
@@ -3592,7 +3597,7 @@ var AbstractInteractiveCanvas = /** @class */ (function () {
3592
3597
  */
3593
3598
  AbstractInteractiveCanvas.prototype.toImage = function (multiplier) {
3594
3599
  var _this = this;
3595
- console.log("Multiplier in interactive canvas !!! : %s", multiplier);
3600
+ console.log("Multiplier in interactive canvas : %s", multiplier);
3596
3601
  var activeObject = this.fabricCanvas.getActiveObject();
3597
3602
  this.fabricCanvas.discardActiveObject().renderAll();
3598
3603
  var options = {
@@ -3807,13 +3812,14 @@ var AbstractInteractiveCanvas = /** @class */ (function () {
3807
3812
  this.objects$.next(__spreadArray(__spreadArray([], this.objects$.value, true), [object], false));
3808
3813
  };
3809
3814
  AbstractInteractiveCanvas.prototype.dimensionsExceedRestrictions = function (dimensions) {
3815
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
3810
3816
  var restrictions = this.dimensionRestrictions$.value;
3811
- return oc(restrictions).height.min() != undefined && dimensions.height < oc(restrictions).height.min()
3812
- || oc(restrictions).height.max() != undefined && dimensions.height > oc(restrictions).height.max()
3813
- || oc(restrictions).width.min() != undefined && dimensions.width < oc(restrictions).width.min()
3814
- || oc(restrictions).width.max() != undefined && dimensions.width > oc(restrictions).width.max()
3815
- || oc(restrictions).volume.min() != undefined && dimensions.height * dimensions.width < oc(restrictions).volume.min()
3816
- || 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);
3817
3823
  };
3818
3824
  return AbstractInteractiveCanvas;
3819
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) {
@@ -2430,7 +2451,6 @@ var Text = /** @class */ (function (_super) {
2430
2451
  var fabric = this.canvas.fabric;
2431
2452
  this.fabricObject["_render"] = function (ctx) {
2432
2453
  var fabricText = this;
2433
- console.log('fabricText 123', fabricText);
2434
2454
  if (fabricText["_bullets"]) {
2435
2455
  // Determine list of active bullets
2436
2456
  var currentBullets_1 = fabricText["_bullets"];
@@ -2820,20 +2840,6 @@ exports.ImageType = void 0;
2820
2840
  ImageType["PHOTO"] = "PHOTO";
2821
2841
  })(exports.ImageType || (exports.ImageType = {}));
2822
2842
 
2823
- exports.ObjectType = void 0;
2824
- (function (ObjectType) {
2825
- ObjectType["TEXT"] = "TEXT";
2826
- ObjectType["BORDER"] = "BORDER";
2827
- ObjectType["IMAGE"] = "IMAGE";
2828
- ObjectType["RECTANGLE"] = "RECTANGLE";
2829
- ObjectType["LIBRARY_IMAGE"] = "LIBRARY_IMAGE";
2830
- ObjectType["CUTOFF"] = "CUTOFF";
2831
- ObjectType["VERTICAL_RULE"] = "VERTICAL_RULE";
2832
- ObjectType["HORIZONTAL_RULE"] = "HORIZONTAL_RULE";
2833
- ObjectType["RICH_TEXT"] = "RICH_TEXT";
2834
- ObjectType["BACKGROUND_IMAGE"] = "BACKGROUND_IMAGE";
2835
- })(exports.ObjectType || (exports.ObjectType = {}));
2836
-
2837
2843
  var AbstractInteractiveCanvas = /** @class */ (function () {
2838
2844
  function AbstractInteractiveCanvas(fabric, fabricCanvas, devicePixelRatio) {
2839
2845
  this.fabric = fabric;
@@ -2841,7 +2847,6 @@ var AbstractInteractiveCanvas = /** @class */ (function () {
2841
2847
  this.devicePixelRatio = devicePixelRatio;
2842
2848
  this.fontLibrary = new FontLibrary();
2843
2849
  this.dimensionChangeRejections$ = new rxjs.Subject();
2844
- console.log(" **** Hello world");
2845
2850
  this.IMAGE_CAPTURE_COEFFICIENT = this.calculateImageCaptureCoefficient();
2846
2851
  /**
2847
2852
  * Fabric defaults to only 2 decimal places when saving, which causes havoc on the scaling of large images.
@@ -3016,11 +3021,12 @@ var AbstractInteractiveCanvas = /** @class */ (function () {
3016
3021
  * @inheritDoc
3017
3022
  */
3018
3023
  AbstractInteractiveCanvas.prototype.setDimensionRestrictions = function (restrictions) {
3024
+ var _a, _b, _c, _d, _e, _f, _g, _h;
3019
3025
  this.dimensionRestrictions$.next(restrictions);
3020
3026
  var dimensions = this.getDimensions();
3021
3027
  if (this.dimensionsExceedRestrictions(dimensions)) {
3022
3028
  var newDimensions = dimensions
3023
- .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)));
3024
3030
  this.setBaseDimensions(newDimensions);
3025
3031
  }
3026
3032
  };
@@ -3533,7 +3539,6 @@ var AbstractInteractiveCanvas = /** @class */ (function () {
3533
3539
  if (!(canvasState.canvasJson != undefined)) return [3 /*break*/, 2];
3534
3540
  json_1 = JSON.parse(canvasState.canvasJson);
3535
3541
  return [4 /*yield*/, new Promise(function (resolve) {
3536
- console.log('resolve', resolve);
3537
3542
  _this.fabricCanvas.loadFromJSON(json_1, function () { return resolve(); });
3538
3543
  })];
3539
3544
  case 1:
@@ -3600,7 +3605,7 @@ var AbstractInteractiveCanvas = /** @class */ (function () {
3600
3605
  */
3601
3606
  AbstractInteractiveCanvas.prototype.toImage = function (multiplier) {
3602
3607
  var _this = this;
3603
- console.log("Multiplier in interactive canvas !!! : %s", multiplier);
3608
+ console.log("Multiplier in interactive canvas : %s", multiplier);
3604
3609
  var activeObject = this.fabricCanvas.getActiveObject();
3605
3610
  this.fabricCanvas.discardActiveObject().renderAll();
3606
3611
  var options = {
@@ -3815,13 +3820,14 @@ var AbstractInteractiveCanvas = /** @class */ (function () {
3815
3820
  this.objects$.next(__spreadArray(__spreadArray([], this.objects$.value, true), [object], false));
3816
3821
  };
3817
3822
  AbstractInteractiveCanvas.prototype.dimensionsExceedRestrictions = function (dimensions) {
3823
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
3818
3824
  var restrictions = this.dimensionRestrictions$.value;
3819
- return tsOptchain.oc(restrictions).height.min() != undefined && dimensions.height < tsOptchain.oc(restrictions).height.min()
3820
- || tsOptchain.oc(restrictions).height.max() != undefined && dimensions.height > tsOptchain.oc(restrictions).height.max()
3821
- || tsOptchain.oc(restrictions).width.min() != undefined && dimensions.width < tsOptchain.oc(restrictions).width.min()
3822
- || tsOptchain.oc(restrictions).width.max() != undefined && dimensions.width > tsOptchain.oc(restrictions).width.max()
3823
- || tsOptchain.oc(restrictions).volume.min() != undefined && dimensions.height * dimensions.width < tsOptchain.oc(restrictions).volume.min()
3824
- || 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);
3825
3831
  };
3826
3832
  return AbstractInteractiveCanvas;
3827
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-0",
3
+ "version": "2.0.15-beta-2",
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"