@leapfrog/interactive-canvas 1.14.0 → 1.14.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/index.d.ts CHANGED
@@ -51,3 +51,4 @@ export * from "./abstract-interactive-canvas";
51
51
  export * from "./headless-interactive-canvas";
52
52
  export * from "./interactive-canvas";
53
53
  export * from "./interactive-canvas.interface";
54
+ export { ExtendedFabricTextbox } from "./object/impl/extended-fabric-textbox.interface";
@@ -1895,18 +1895,18 @@ var RichText = /** @class */ (function (_super) {
1895
1895
  var Text = /** @class */ (function (_super) {
1896
1896
  __extends(Text, _super);
1897
1897
  function Text(canvas, fabricObject, persistedField) {
1898
- var _this = _super.call(this, ObjectType.TEXT, canvas, fabricObject, persistedField) || this;
1899
- _this.canvas = canvas;
1900
- _this.fontLibrary = canvas.getFontLibrary();
1901
- _this.baseComponentHeight = _this.fabricObject.height;
1902
- _this.text$ = new BehaviorSubject(_this.fabricObject.text);
1903
- _this.data.userText = _this.fabricObject.text;
1904
- _this.textSelection$ = new BehaviorSubject(new TextSelection(_this.fabricObject, _this.fontLibrary));
1905
- _this.fabricObject.set({ strokeWidth: 0 });
1906
- _this.fabricObject.on("changed", function () { return _this.onTextChange(); });
1907
- _this.fabricObject.on("selection:changed", function () { return _this.onSelectionChange(); });
1908
- _this.applyBulletListMonkeyPatches();
1909
- return _this;
1898
+ var _this_1 = _super.call(this, ObjectType.TEXT, canvas, fabricObject, persistedField) || this;
1899
+ _this_1.canvas = canvas;
1900
+ _this_1.fontLibrary = canvas.getFontLibrary();
1901
+ _this_1.baseComponentHeight = _this_1.fabricObject.height;
1902
+ _this_1.text$ = new BehaviorSubject(_this_1.fabricObject.text);
1903
+ _this_1.data.userText = _this_1.fabricObject.text;
1904
+ _this_1.textSelection$ = new BehaviorSubject(new TextSelection(_this_1.fabricObject, _this_1.fontLibrary));
1905
+ _this_1.fabricObject.set({ strokeWidth: 0 });
1906
+ _this_1.fabricObject.on("changed", function () { return _this_1.onTextChange(); });
1907
+ _this_1.fabricObject.on("selection:changed", function () { return _this_1.onSelectionChange(); });
1908
+ _this_1.applyBulletListMonkeyPatches();
1909
+ return _this_1;
1910
1910
  }
1911
1911
  /**
1912
1912
  * @override
@@ -2237,12 +2237,12 @@ var Text = /** @class */ (function (_super) {
2237
2237
  * @inheritDoc
2238
2238
  */
2239
2239
  Text.prototype.getBulletMargin = function () {
2240
- var _this = this;
2240
+ var _this_1 = this;
2241
2241
  if (!this.isBulleted())
2242
2242
  return 0;
2243
2243
  var fontSize = 0;
2244
2244
  each(this.fabricObject._textLines, function (textLine, lineIndex) {
2245
- fontSize = Math.max(fontSize, _this.fabricObject.getValueOfPropertyAt(lineIndex, 0, "fontSize"));
2245
+ fontSize = Math.max(fontSize, _this_1.fabricObject.getValueOfPropertyAt(lineIndex, 0, "fontSize"));
2246
2246
  });
2247
2247
  return fontSize * 0.6;
2248
2248
  };
@@ -2251,14 +2251,14 @@ var Text = /** @class */ (function (_super) {
2251
2251
  * @inheritDoc
2252
2252
  */
2253
2253
  Text.prototype.getOrderedListMargin = function () {
2254
- var _this = this;
2255
2254
  if (!this.isOrderedList())
2256
2255
  return 0;
2257
- var fontSize = 0;
2258
- each(this.fabricObject._textLines, function (textLine, lineIndex) {
2259
- fontSize = Math.max(fontSize, _this.fabricObject.getValueOfPropertyAt(lineIndex, 0, "fontSize"));
2260
- });
2261
- return fontSize * 1.5;
2256
+ var orderedListMarkerEntities = this.fabricObject._orderedListMarkerEntities;
2257
+ var max = _(orderedListMarkerEntities)
2258
+ .filter(function (x) { return !!x; })
2259
+ .map(function (x) { return x.getBoundingRect(true, true).width; })
2260
+ .max();
2261
+ return (max * 1.2) || 0;
2262
2262
  };
2263
2263
  /**
2264
2264
  * @override
@@ -2342,7 +2342,7 @@ var Text = /** @class */ (function (_super) {
2342
2342
  * @inheritDoc
2343
2343
  */
2344
2344
  Text.prototype.isOrderedList = function () {
2345
- return this.fabricObject.orderedList || false;
2345
+ return this.fabricObject._isOrderedList || false;
2346
2346
  };
2347
2347
  /**
2348
2348
  * @override
@@ -2350,8 +2350,8 @@ var Text = /** @class */ (function (_super) {
2350
2350
  */
2351
2351
  Text.prototype.enableOrderedList = function () {
2352
2352
  this.disableBullets();
2353
- this.fabricObject["objectCaching"] = false;
2354
- this.fabricObject.orderedList = true;
2353
+ this.fabricObject.objectCaching = false;
2354
+ this.fabricObject._isOrderedList = true;
2355
2355
  this.notifyCanvasOfTextChanges();
2356
2356
  this.redraw();
2357
2357
  };
@@ -2360,36 +2360,53 @@ var Text = /** @class */ (function (_super) {
2360
2360
  * @inheritDoc
2361
2361
  */
2362
2362
  Text.prototype.disableOrderedList = function () {
2363
- this.removeOrderedList();
2364
- delete this.fabricObject.orderedList;
2363
+ this.removeOrderedListMarkers();
2364
+ delete this.fabricObject._isOrderedList;
2365
2365
  this.notifyCanvasOfTextChanges();
2366
2366
  this.redraw();
2367
2367
  };
2368
+ /**
2369
+ * @override
2370
+ * @inheritDoc
2371
+ */
2372
+ Text.prototype.setOrderedListStart = function (start) {
2373
+ this.fabricObject._orderedListStart = start;
2374
+ this.notifyCanvasOfTextChanges();
2375
+ this.redraw();
2376
+ };
2377
+ /**
2378
+ * @override
2379
+ * @inheritDoc
2380
+ */
2381
+ Text.prototype.getOrderedListStart = function () {
2382
+ return this.fabricObject._orderedListStart || 1;
2383
+ };
2368
2384
  Text.prototype.getSizeIncreaseSinceCreation = function () {
2369
2385
  return Math.max(0, this.fabricObject.height - this.baseComponentHeight);
2370
2386
  };
2371
2387
  Text.prototype.removeBullets = function () {
2372
- var _this = this;
2388
+ var _this_1 = this;
2373
2389
  if (this.data.bulleted) {
2374
2390
  var bullets = this.fabricObject["_bullets"];
2375
2391
  delete this.fabricObject["_bullets"];
2376
- each(bullets, function (bullet) { return _this.canvas.removeFabricObject(bullet); });
2392
+ each(bullets, function (bullet) { return _this_1.canvas.removeFabricObject(bullet); });
2377
2393
  this.fabricObject["objectCaching"] = true;
2378
2394
  }
2379
2395
  };
2380
- Text.prototype.removeOrderedList = function () {
2381
- var _this = this;
2382
- if (this.fabricObject.orderedList) {
2383
- var lineNumbers = this.fabricObject["_currentLineNumbers"];
2384
- delete this.fabricObject["_currentLineNumbers"];
2385
- each(lineNumbers, function (lineNumber) { return _this.canvas.removeFabricObject(lineNumber); });
2396
+ Text.prototype.removeOrderedListMarkers = function () {
2397
+ var _this_1 = this;
2398
+ if (this.fabricObject._isOrderedList) {
2399
+ var markerEntities = this.fabricObject._orderedListMarkerEntities;
2400
+ delete this.fabricObject._orderedListMarkerEntities;
2401
+ each(markerEntities, function (marker) { return _this_1.canvas.removeFabricObject(marker); });
2386
2402
  this.fabricObject["objectCaching"] = true;
2387
2403
  }
2388
2404
  };
2389
2405
  Text.prototype.applyBulletListMonkeyPatches = function () {
2406
+ var _this = this;
2390
2407
  if (this.data.bulleted)
2391
2408
  this.enableBullets();
2392
- if (this.fabricObject.orderedList)
2409
+ if (this.fabricObject._isOrderedList)
2393
2410
  this.enableOrderedList();
2394
2411
  var originalRender = this.fabricObject["_render"];
2395
2412
  var fabric = this.canvas.fabric;
@@ -2452,22 +2469,21 @@ var Text = /** @class */ (function (_super) {
2452
2469
  setTimeout(canvas_1.renderAll.bind(canvas_1));
2453
2470
  }
2454
2471
  }
2455
- if (fabricText["orderedList"]) {
2456
- // Determine list of active bullets
2457
- var currentLineNumbers_1 = fabricText["_currentLineNumbers"] || {};
2458
- var activeLineNumbers_1 = {};
2472
+ if (fabricText._isOrderedList) {
2473
+ var existingMarkers_1 = fabricText._orderedListMarkerEntities || [];
2474
+ var activeMarkers_1 = [];
2459
2475
  each(fabricText._textLines, function (textLine, lineIndex) {
2460
2476
  if (textLine.length) {
2461
2477
  // Start of real lines will have offset 0 in styleMap
2462
2478
  var styleMap = fabricText._styleMap[lineIndex];
2463
2479
  if (styleMap.offset === 0) {
2464
- if (currentLineNumbers_1[lineIndex]) {
2465
- // Reuse existing bullet for this line
2466
- activeLineNumbers_1[lineIndex] = currentLineNumbers_1[lineIndex];
2480
+ if (existingMarkers_1[lineIndex]) {
2481
+ // Reuse existing marker for this line
2482
+ activeMarkers_1[lineIndex] = existingMarkers_1[lineIndex];
2467
2483
  }
2468
2484
  else {
2469
- // Create new bullet for this line
2470
- activeLineNumbers_1[lineIndex] = new fabric.Textbox(lineIndex + ".", {
2485
+ // Create new marker for this line
2486
+ activeMarkers_1[lineIndex] = new fabric.Textbox(lineIndex + ".", {
2471
2487
  left: 0,
2472
2488
  top: 0,
2473
2489
  fill: fabricText.fill,
@@ -2484,24 +2500,28 @@ var Text = /** @class */ (function (_super) {
2484
2500
  }
2485
2501
  }
2486
2502
  });
2487
- // Add/Remove bullets from canvas
2503
+ // Add/Remove markers from canvas
2488
2504
  var canvas_2 = fabricText.canvas;
2489
2505
  var canvasDirty_2 = false;
2490
2506
  canvas_2.renderOnAddRemove = false;
2491
- each(activeLineNumbers_1, function (bullet) {
2492
- if (!canvas_2.contains(bullet)) {
2493
- canvas_2.add(bullet);
2507
+ each(activeMarkers_1, function (marker) {
2508
+ if (!marker)
2509
+ return;
2510
+ if (!canvas_2.contains(marker)) {
2511
+ canvas_2.add(marker);
2494
2512
  canvasDirty_2 = true;
2495
2513
  }
2496
2514
  });
2497
- each(currentLineNumbers_1, function (bullet, key) {
2498
- if (!activeLineNumbers_1[key]) {
2499
- canvas_2.remove(bullet);
2515
+ each(existingMarkers_1, function (marker, key) {
2516
+ if (!marker)
2517
+ return;
2518
+ if (!activeMarkers_1[key]) {
2519
+ canvas_2.remove(marker);
2500
2520
  canvasDirty_2 = true;
2501
2521
  }
2502
2522
  });
2503
2523
  canvas_2.renderOnAddRemove = true;
2504
- fabricText["_currentLineNumbers"] = activeLineNumbers_1;
2524
+ fabricText._orderedListMarkerEntities = activeMarkers_1;
2505
2525
  if (canvasDirty_2) {
2506
2526
  // Fabric doesn't like it when you add new things within render so use a sneaky timeout to delay render
2507
2527
  setTimeout(canvas_2.renderAll.bind(canvas_2));
@@ -2532,24 +2552,25 @@ var Text = /** @class */ (function (_super) {
2532
2552
  top: fabricText.top + yOffset + bulletCenterOffset[1]
2533
2553
  });
2534
2554
  }
2535
- var currentLineNumbers = fabricText._currentLineNumbers;
2536
- if (currentLineNumbers && currentLineNumbers[lineIndex]) {
2537
- var entry = currentLineNumbers[lineIndex];
2555
+ var orderedListMarkerEntities = fabricText._orderedListMarkerEntities;
2556
+ var xShift = -_this.getOrderedListMargin() + 1;
2557
+ if (orderedListMarkerEntities && orderedListMarkerEntities[lineIndex]) {
2558
+ var entry = orderedListMarkerEntities[lineIndex];
2538
2559
  var fontSize = this.getValueOfPropertyAt(lineIndex, 0, "fontSize");
2539
2560
  var fontFamily = this.getValueOfPropertyAt(lineIndex, 0, "fontFamily");
2540
2561
  var color = this.getValueOfPropertyAt(lineIndex, 0, "fill");
2541
2562
  var angle = fabricText.angle;
2542
2563
  var theta = angle * Math.PI / 180;
2543
- var xShift = -fontSize * 1.5;
2544
2564
  var yShift = (fabricText.height / 2) + top - fontSize - 1;
2545
2565
  var xOffset = (xShift * Math.cos(theta)) - (yShift * Math.sin(theta));
2546
2566
  var yOffset = (xShift * Math.sin(theta)) + (yShift * Math.cos(theta));
2547
- var lineNumber = 1;
2567
+ var lineNumber = _this.getOrderedListStart();
2548
2568
  for (var i = 0; i < lineIndex; i++) {
2549
- if (currentLineNumbers[i])
2569
+ if (orderedListMarkerEntities[i])
2550
2570
  lineNumber++;
2551
2571
  }
2552
2572
  entry.set({
2573
+ width: 1,
2553
2574
  fontSize: fontSize,
2554
2575
  fontFamily: fontFamily,
2555
2576
  fill: color,
@@ -3462,7 +3483,7 @@ var AbstractInteractiveCanvas = /** @class */ (function () {
3462
3483
  var objects = _(this.objects$.value)
3463
3484
  .map(function (x) { return x.persist(); })
3464
3485
  .value();
3465
- var includedProperties = ["id", "orderedList"];
3486
+ var includedProperties = ["id", "_isOrderedList", "_orderedListStart"];
3466
3487
  var json = this.fabricCanvas.toJSON(includedProperties);
3467
3488
  return {
3468
3489
  dimensions: this.dimensions$.value,
@@ -1897,18 +1897,18 @@ var RichText = /** @class */ (function (_super) {
1897
1897
  var Text = /** @class */ (function (_super) {
1898
1898
  __extends(Text, _super);
1899
1899
  function Text(canvas, fabricObject, persistedField) {
1900
- var _this = _super.call(this, exports.ObjectType.TEXT, canvas, fabricObject, persistedField) || this;
1901
- _this.canvas = canvas;
1902
- _this.fontLibrary = canvas.getFontLibrary();
1903
- _this.baseComponentHeight = _this.fabricObject.height;
1904
- _this.text$ = new rxjs.BehaviorSubject(_this.fabricObject.text);
1905
- _this.data.userText = _this.fabricObject.text;
1906
- _this.textSelection$ = new rxjs.BehaviorSubject(new TextSelection(_this.fabricObject, _this.fontLibrary));
1907
- _this.fabricObject.set({ strokeWidth: 0 });
1908
- _this.fabricObject.on("changed", function () { return _this.onTextChange(); });
1909
- _this.fabricObject.on("selection:changed", function () { return _this.onSelectionChange(); });
1910
- _this.applyBulletListMonkeyPatches();
1911
- return _this;
1900
+ var _this_1 = _super.call(this, exports.ObjectType.TEXT, canvas, fabricObject, persistedField) || this;
1901
+ _this_1.canvas = canvas;
1902
+ _this_1.fontLibrary = canvas.getFontLibrary();
1903
+ _this_1.baseComponentHeight = _this_1.fabricObject.height;
1904
+ _this_1.text$ = new rxjs.BehaviorSubject(_this_1.fabricObject.text);
1905
+ _this_1.data.userText = _this_1.fabricObject.text;
1906
+ _this_1.textSelection$ = new rxjs.BehaviorSubject(new TextSelection(_this_1.fabricObject, _this_1.fontLibrary));
1907
+ _this_1.fabricObject.set({ strokeWidth: 0 });
1908
+ _this_1.fabricObject.on("changed", function () { return _this_1.onTextChange(); });
1909
+ _this_1.fabricObject.on("selection:changed", function () { return _this_1.onSelectionChange(); });
1910
+ _this_1.applyBulletListMonkeyPatches();
1911
+ return _this_1;
1912
1912
  }
1913
1913
  /**
1914
1914
  * @override
@@ -2239,12 +2239,12 @@ var Text = /** @class */ (function (_super) {
2239
2239
  * @inheritDoc
2240
2240
  */
2241
2241
  Text.prototype.getBulletMargin = function () {
2242
- var _this = this;
2242
+ var _this_1 = this;
2243
2243
  if (!this.isBulleted())
2244
2244
  return 0;
2245
2245
  var fontSize = 0;
2246
2246
  _.each(this.fabricObject._textLines, function (textLine, lineIndex) {
2247
- fontSize = Math.max(fontSize, _this.fabricObject.getValueOfPropertyAt(lineIndex, 0, "fontSize"));
2247
+ fontSize = Math.max(fontSize, _this_1.fabricObject.getValueOfPropertyAt(lineIndex, 0, "fontSize"));
2248
2248
  });
2249
2249
  return fontSize * 0.6;
2250
2250
  };
@@ -2253,14 +2253,14 @@ var Text = /** @class */ (function (_super) {
2253
2253
  * @inheritDoc
2254
2254
  */
2255
2255
  Text.prototype.getOrderedListMargin = function () {
2256
- var _this = this;
2257
2256
  if (!this.isOrderedList())
2258
2257
  return 0;
2259
- var fontSize = 0;
2260
- _.each(this.fabricObject._textLines, function (textLine, lineIndex) {
2261
- fontSize = Math.max(fontSize, _this.fabricObject.getValueOfPropertyAt(lineIndex, 0, "fontSize"));
2262
- });
2263
- return fontSize * 1.5;
2258
+ var orderedListMarkerEntities = this.fabricObject._orderedListMarkerEntities;
2259
+ var max = _(orderedListMarkerEntities)
2260
+ .filter(function (x) { return !!x; })
2261
+ .map(function (x) { return x.getBoundingRect(true, true).width; })
2262
+ .max();
2263
+ return (max * 1.2) || 0;
2264
2264
  };
2265
2265
  /**
2266
2266
  * @override
@@ -2344,7 +2344,7 @@ var Text = /** @class */ (function (_super) {
2344
2344
  * @inheritDoc
2345
2345
  */
2346
2346
  Text.prototype.isOrderedList = function () {
2347
- return this.fabricObject.orderedList || false;
2347
+ return this.fabricObject._isOrderedList || false;
2348
2348
  };
2349
2349
  /**
2350
2350
  * @override
@@ -2352,8 +2352,8 @@ var Text = /** @class */ (function (_super) {
2352
2352
  */
2353
2353
  Text.prototype.enableOrderedList = function () {
2354
2354
  this.disableBullets();
2355
- this.fabricObject["objectCaching"] = false;
2356
- this.fabricObject.orderedList = true;
2355
+ this.fabricObject.objectCaching = false;
2356
+ this.fabricObject._isOrderedList = true;
2357
2357
  this.notifyCanvasOfTextChanges();
2358
2358
  this.redraw();
2359
2359
  };
@@ -2362,36 +2362,53 @@ var Text = /** @class */ (function (_super) {
2362
2362
  * @inheritDoc
2363
2363
  */
2364
2364
  Text.prototype.disableOrderedList = function () {
2365
- this.removeOrderedList();
2366
- delete this.fabricObject.orderedList;
2365
+ this.removeOrderedListMarkers();
2366
+ delete this.fabricObject._isOrderedList;
2367
2367
  this.notifyCanvasOfTextChanges();
2368
2368
  this.redraw();
2369
2369
  };
2370
+ /**
2371
+ * @override
2372
+ * @inheritDoc
2373
+ */
2374
+ Text.prototype.setOrderedListStart = function (start) {
2375
+ this.fabricObject._orderedListStart = start;
2376
+ this.notifyCanvasOfTextChanges();
2377
+ this.redraw();
2378
+ };
2379
+ /**
2380
+ * @override
2381
+ * @inheritDoc
2382
+ */
2383
+ Text.prototype.getOrderedListStart = function () {
2384
+ return this.fabricObject._orderedListStart || 1;
2385
+ };
2370
2386
  Text.prototype.getSizeIncreaseSinceCreation = function () {
2371
2387
  return Math.max(0, this.fabricObject.height - this.baseComponentHeight);
2372
2388
  };
2373
2389
  Text.prototype.removeBullets = function () {
2374
- var _this = this;
2390
+ var _this_1 = this;
2375
2391
  if (this.data.bulleted) {
2376
2392
  var bullets = this.fabricObject["_bullets"];
2377
2393
  delete this.fabricObject["_bullets"];
2378
- _.each(bullets, function (bullet) { return _this.canvas.removeFabricObject(bullet); });
2394
+ _.each(bullets, function (bullet) { return _this_1.canvas.removeFabricObject(bullet); });
2379
2395
  this.fabricObject["objectCaching"] = true;
2380
2396
  }
2381
2397
  };
2382
- Text.prototype.removeOrderedList = function () {
2383
- var _this = this;
2384
- if (this.fabricObject.orderedList) {
2385
- var lineNumbers = this.fabricObject["_currentLineNumbers"];
2386
- delete this.fabricObject["_currentLineNumbers"];
2387
- _.each(lineNumbers, function (lineNumber) { return _this.canvas.removeFabricObject(lineNumber); });
2398
+ Text.prototype.removeOrderedListMarkers = function () {
2399
+ var _this_1 = this;
2400
+ if (this.fabricObject._isOrderedList) {
2401
+ var markerEntities = this.fabricObject._orderedListMarkerEntities;
2402
+ delete this.fabricObject._orderedListMarkerEntities;
2403
+ _.each(markerEntities, function (marker) { return _this_1.canvas.removeFabricObject(marker); });
2388
2404
  this.fabricObject["objectCaching"] = true;
2389
2405
  }
2390
2406
  };
2391
2407
  Text.prototype.applyBulletListMonkeyPatches = function () {
2408
+ var _this = this;
2392
2409
  if (this.data.bulleted)
2393
2410
  this.enableBullets();
2394
- if (this.fabricObject.orderedList)
2411
+ if (this.fabricObject._isOrderedList)
2395
2412
  this.enableOrderedList();
2396
2413
  var originalRender = this.fabricObject["_render"];
2397
2414
  var fabric = this.canvas.fabric;
@@ -2454,22 +2471,21 @@ var Text = /** @class */ (function (_super) {
2454
2471
  setTimeout(canvas_1.renderAll.bind(canvas_1));
2455
2472
  }
2456
2473
  }
2457
- if (fabricText["orderedList"]) {
2458
- // Determine list of active bullets
2459
- var currentLineNumbers_1 = fabricText["_currentLineNumbers"] || {};
2460
- var activeLineNumbers_1 = {};
2474
+ if (fabricText._isOrderedList) {
2475
+ var existingMarkers_1 = fabricText._orderedListMarkerEntities || [];
2476
+ var activeMarkers_1 = [];
2461
2477
  _.each(fabricText._textLines, function (textLine, lineIndex) {
2462
2478
  if (textLine.length) {
2463
2479
  // Start of real lines will have offset 0 in styleMap
2464
2480
  var styleMap = fabricText._styleMap[lineIndex];
2465
2481
  if (styleMap.offset === 0) {
2466
- if (currentLineNumbers_1[lineIndex]) {
2467
- // Reuse existing bullet for this line
2468
- activeLineNumbers_1[lineIndex] = currentLineNumbers_1[lineIndex];
2482
+ if (existingMarkers_1[lineIndex]) {
2483
+ // Reuse existing marker for this line
2484
+ activeMarkers_1[lineIndex] = existingMarkers_1[lineIndex];
2469
2485
  }
2470
2486
  else {
2471
- // Create new bullet for this line
2472
- activeLineNumbers_1[lineIndex] = new fabric.Textbox(lineIndex + ".", {
2487
+ // Create new marker for this line
2488
+ activeMarkers_1[lineIndex] = new fabric.Textbox(lineIndex + ".", {
2473
2489
  left: 0,
2474
2490
  top: 0,
2475
2491
  fill: fabricText.fill,
@@ -2486,24 +2502,28 @@ var Text = /** @class */ (function (_super) {
2486
2502
  }
2487
2503
  }
2488
2504
  });
2489
- // Add/Remove bullets from canvas
2505
+ // Add/Remove markers from canvas
2490
2506
  var canvas_2 = fabricText.canvas;
2491
2507
  var canvasDirty_2 = false;
2492
2508
  canvas_2.renderOnAddRemove = false;
2493
- _.each(activeLineNumbers_1, function (bullet) {
2494
- if (!canvas_2.contains(bullet)) {
2495
- canvas_2.add(bullet);
2509
+ _.each(activeMarkers_1, function (marker) {
2510
+ if (!marker)
2511
+ return;
2512
+ if (!canvas_2.contains(marker)) {
2513
+ canvas_2.add(marker);
2496
2514
  canvasDirty_2 = true;
2497
2515
  }
2498
2516
  });
2499
- _.each(currentLineNumbers_1, function (bullet, key) {
2500
- if (!activeLineNumbers_1[key]) {
2501
- canvas_2.remove(bullet);
2517
+ _.each(existingMarkers_1, function (marker, key) {
2518
+ if (!marker)
2519
+ return;
2520
+ if (!activeMarkers_1[key]) {
2521
+ canvas_2.remove(marker);
2502
2522
  canvasDirty_2 = true;
2503
2523
  }
2504
2524
  });
2505
2525
  canvas_2.renderOnAddRemove = true;
2506
- fabricText["_currentLineNumbers"] = activeLineNumbers_1;
2526
+ fabricText._orderedListMarkerEntities = activeMarkers_1;
2507
2527
  if (canvasDirty_2) {
2508
2528
  // Fabric doesn't like it when you add new things within render so use a sneaky timeout to delay render
2509
2529
  setTimeout(canvas_2.renderAll.bind(canvas_2));
@@ -2534,24 +2554,25 @@ var Text = /** @class */ (function (_super) {
2534
2554
  top: fabricText.top + yOffset + bulletCenterOffset[1]
2535
2555
  });
2536
2556
  }
2537
- var currentLineNumbers = fabricText._currentLineNumbers;
2538
- if (currentLineNumbers && currentLineNumbers[lineIndex]) {
2539
- var entry = currentLineNumbers[lineIndex];
2557
+ var orderedListMarkerEntities = fabricText._orderedListMarkerEntities;
2558
+ var xShift = -_this.getOrderedListMargin() + 1;
2559
+ if (orderedListMarkerEntities && orderedListMarkerEntities[lineIndex]) {
2560
+ var entry = orderedListMarkerEntities[lineIndex];
2540
2561
  var fontSize = this.getValueOfPropertyAt(lineIndex, 0, "fontSize");
2541
2562
  var fontFamily = this.getValueOfPropertyAt(lineIndex, 0, "fontFamily");
2542
2563
  var color = this.getValueOfPropertyAt(lineIndex, 0, "fill");
2543
2564
  var angle = fabricText.angle;
2544
2565
  var theta = angle * Math.PI / 180;
2545
- var xShift = -fontSize * 1.5;
2546
2566
  var yShift = (fabricText.height / 2) + top - fontSize - 1;
2547
2567
  var xOffset = (xShift * Math.cos(theta)) - (yShift * Math.sin(theta));
2548
2568
  var yOffset = (xShift * Math.sin(theta)) + (yShift * Math.cos(theta));
2549
- var lineNumber = 1;
2569
+ var lineNumber = _this.getOrderedListStart();
2550
2570
  for (var i = 0; i < lineIndex; i++) {
2551
- if (currentLineNumbers[i])
2571
+ if (orderedListMarkerEntities[i])
2552
2572
  lineNumber++;
2553
2573
  }
2554
2574
  entry.set({
2575
+ width: 1,
2555
2576
  fontSize: fontSize,
2556
2577
  fontFamily: fontFamily,
2557
2578
  fill: color,
@@ -3462,7 +3483,7 @@ var AbstractInteractiveCanvas = /** @class */ (function () {
3462
3483
  var objects = _(this.objects$.value)
3463
3484
  .map(function (x) { return x.persist(); })
3464
3485
  .value();
3465
- var includedProperties = ["id", "orderedList"];
3486
+ var includedProperties = ["id", "_isOrderedList", "_orderedListStart"];
3466
3487
  var json = this.fabricCanvas.toJSON(includedProperties);
3467
3488
  return {
3468
3489
  dimensions: this.dimensions$.value,
@@ -68,5 +68,13 @@ export interface IMutableText extends ICanvasObject {
68
68
  * Disable ordered list markers.
69
69
  */
70
70
  disableOrderedList(): void;
71
+ /**
72
+ * @param start The start value for the ordered list.
73
+ */
74
+ setOrderedListStart(start: number): void;
75
+ /**
76
+ * Get the start value for the ordered list.
77
+ */
78
+ getOrderedListStart(): number;
71
79
  }
72
80
  export declare function isMutableText(object: any): object is IMutableText;
@@ -0,0 +1,6 @@
1
+ import { fabric } from "fabric";
2
+ export interface ExtendedFabricTextbox extends fabric.Textbox {
3
+ _isOrderedList?: boolean;
4
+ _orderedListStart?: number;
5
+ _orderedListMarkerEntities?: fabric.Textbox[];
6
+ }
@@ -4,6 +4,7 @@ import { ICanvasObject } from "../canvas-object.interface";
4
4
  import { AbstractCanvasObject } from "../abstract-canvas-object";
5
5
  import { CanvasObjectData } from "../canvas-object-data";
6
6
  import { fabric } from "fabric";
7
+ import { ExtendedFabricTextbox } from "./extended-fabric-textbox.interface";
7
8
  /**
8
9
  * Text field. Displays customizable text.
9
10
  */
@@ -49,7 +50,7 @@ export interface IText extends ICanvasObject, IMutableColor, IMutableText, IMuta
49
50
  */
50
51
  getOrderedListMargin(): number;
51
52
  }
52
- export declare class Text extends AbstractCanvasObject<fabric.Textbox> implements IText {
53
+ export declare class Text extends AbstractCanvasObject<ExtendedFabricTextbox> implements IText {
53
54
  private readonly fontLibrary;
54
55
  private baseComponentHeight;
55
56
  private readonly text$;
@@ -285,9 +286,19 @@ export declare class Text extends AbstractCanvasObject<fabric.Textbox> implement
285
286
  * @inheritDoc
286
287
  */
287
288
  disableOrderedList(): void;
289
+ /**
290
+ * @override
291
+ * @inheritDoc
292
+ */
293
+ setOrderedListStart(start: number): void;
294
+ /**
295
+ * @override
296
+ * @inheritDoc
297
+ */
298
+ getOrderedListStart(): number;
288
299
  getSizeIncreaseSinceCreation(): number;
289
300
  private removeBullets;
290
- private removeOrderedList;
301
+ private removeOrderedListMarkers;
291
302
  private applyBulletListMonkeyPatches;
292
303
  /**
293
304
  * @override
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@leapfrog/interactive-canvas",
3
- "version": "1.14.0",
3
+ "version": "1.14.2",
4
4
  "description": "Leapfrog interactive canvas",
5
5
  "files": [
6
6
  "dist"