@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 +1 -0
- package/dist/interactive-canvas.es.js +79 -58
- package/dist/interactive-canvas.js +79 -58
- package/dist/mutator/mutable-text.interface.d.ts +8 -0
- package/dist/object/impl/extended-fabric-textbox.interface.d.ts +6 -0
- package/dist/object/impl/text.d.ts +13 -2
- package/package.json +1 -1
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
|
|
1899
|
-
|
|
1900
|
-
|
|
1901
|
-
|
|
1902
|
-
|
|
1903
|
-
|
|
1904
|
-
|
|
1905
|
-
|
|
1906
|
-
|
|
1907
|
-
|
|
1908
|
-
|
|
1909
|
-
return
|
|
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
|
|
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,
|
|
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
|
|
2258
|
-
|
|
2259
|
-
|
|
2260
|
-
|
|
2261
|
-
|
|
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.
|
|
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
|
|
2354
|
-
this.fabricObject.
|
|
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.
|
|
2364
|
-
delete this.fabricObject.
|
|
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
|
|
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
|
|
2392
|
+
each(bullets, function (bullet) { return _this_1.canvas.removeFabricObject(bullet); });
|
|
2377
2393
|
this.fabricObject["objectCaching"] = true;
|
|
2378
2394
|
}
|
|
2379
2395
|
};
|
|
2380
|
-
Text.prototype.
|
|
2381
|
-
var
|
|
2382
|
-
if (this.fabricObject.
|
|
2383
|
-
var
|
|
2384
|
-
delete this.fabricObject
|
|
2385
|
-
each(
|
|
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.
|
|
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
|
|
2456
|
-
|
|
2457
|
-
var
|
|
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 (
|
|
2465
|
-
// Reuse existing
|
|
2466
|
-
|
|
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
|
|
2470
|
-
|
|
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
|
|
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(
|
|
2492
|
-
if (!
|
|
2493
|
-
|
|
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(
|
|
2498
|
-
if (!
|
|
2499
|
-
|
|
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
|
|
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
|
|
2536
|
-
|
|
2537
|
-
|
|
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 =
|
|
2567
|
+
var lineNumber = _this.getOrderedListStart();
|
|
2548
2568
|
for (var i = 0; i < lineIndex; i++) {
|
|
2549
|
-
if (
|
|
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", "
|
|
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
|
|
1901
|
-
|
|
1902
|
-
|
|
1903
|
-
|
|
1904
|
-
|
|
1905
|
-
|
|
1906
|
-
|
|
1907
|
-
|
|
1908
|
-
|
|
1909
|
-
|
|
1910
|
-
|
|
1911
|
-
return
|
|
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
|
|
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,
|
|
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
|
|
2260
|
-
|
|
2261
|
-
|
|
2262
|
-
|
|
2263
|
-
|
|
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.
|
|
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
|
|
2356
|
-
this.fabricObject.
|
|
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.
|
|
2366
|
-
delete this.fabricObject.
|
|
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
|
|
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
|
|
2394
|
+
_.each(bullets, function (bullet) { return _this_1.canvas.removeFabricObject(bullet); });
|
|
2379
2395
|
this.fabricObject["objectCaching"] = true;
|
|
2380
2396
|
}
|
|
2381
2397
|
};
|
|
2382
|
-
Text.prototype.
|
|
2383
|
-
var
|
|
2384
|
-
if (this.fabricObject.
|
|
2385
|
-
var
|
|
2386
|
-
delete this.fabricObject
|
|
2387
|
-
_.each(
|
|
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.
|
|
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
|
|
2458
|
-
|
|
2459
|
-
var
|
|
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 (
|
|
2467
|
-
// Reuse existing
|
|
2468
|
-
|
|
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
|
|
2472
|
-
|
|
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
|
|
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(
|
|
2494
|
-
if (!
|
|
2495
|
-
|
|
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(
|
|
2500
|
-
if (!
|
|
2501
|
-
|
|
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
|
|
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
|
|
2538
|
-
|
|
2539
|
-
|
|
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 =
|
|
2569
|
+
var lineNumber = _this.getOrderedListStart();
|
|
2550
2570
|
for (var i = 0; i < lineIndex; i++) {
|
|
2551
|
-
if (
|
|
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", "
|
|
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;
|
|
@@ -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<
|
|
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
|
|
301
|
+
private removeOrderedListMarkers;
|
|
291
302
|
private applyBulletListMonkeyPatches;
|
|
292
303
|
/**
|
|
293
304
|
* @override
|