@leapfrog/interactive-canvas 2.0.25-beta-6 → 2.0.25-beta-7
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.
|
@@ -1823,6 +1823,7 @@ class Text extends AbstractCanvasObject {
|
|
|
1823
1823
|
this.text$ = new BehaviorSubject(this.fabricObject.text);
|
|
1824
1824
|
this.data.userText = this.fabricObject.text;
|
|
1825
1825
|
this.textSelection$ = new BehaviorSubject(new TextSelection(this.fabricObject, this.fontLibrary));
|
|
1826
|
+
console.log(`inside constructor in text.ts - ${new Date().toLocaleString()}-${new Date().getMilliseconds()}`);
|
|
1826
1827
|
this.fabricObject.set({ strokeWidth: 0 });
|
|
1827
1828
|
this.fabricObject.on("changed", () => this.onTextChange());
|
|
1828
1829
|
this.fabricObject.on("selection:changed", () => this.onSelectionChange());
|
|
@@ -2562,6 +2563,7 @@ class Text extends AbstractCanvasObject {
|
|
|
2562
2563
|
this.redraw();
|
|
2563
2564
|
}
|
|
2564
2565
|
onTextChange() {
|
|
2566
|
+
console.log(`inside onTextChange in text.ts - ${new Date().toLocaleString()}-${new Date().getMilliseconds()}`);
|
|
2565
2567
|
this.data.userText = this.fabricObject.text;
|
|
2566
2568
|
this.text$.next(this.fabricObject.text);
|
|
2567
2569
|
// Only check width bounds if text is close to canvas edge (performance optimization)
|
|
@@ -2569,37 +2571,46 @@ class Text extends AbstractCanvasObject {
|
|
|
2569
2571
|
const canvasWidth = this.canvas.getDimensions().widthPx;
|
|
2570
2572
|
// Skip expensive getBoundingBox if object is clearly within bounds
|
|
2571
2573
|
if (currentLeft + (this.fabricObject.width || 0) > canvasWidth * 0.9) {
|
|
2574
|
+
console.log(`inside if onTextChange in text.ts - ${new Date().toLocaleString()}-${new Date().getMilliseconds()}`);
|
|
2572
2575
|
if (this.getBoundingBox().width > canvasWidth) {
|
|
2573
2576
|
this.fabricObject.set({ left: 0, width: canvasWidth });
|
|
2574
2577
|
this.redraw();
|
|
2575
2578
|
}
|
|
2576
2579
|
}
|
|
2580
|
+
console.log(`end of onTextChange in text.ts - ${new Date().toLocaleString()}-${new Date().getMilliseconds()}`);
|
|
2577
2581
|
}
|
|
2578
2582
|
onDelete() {
|
|
2579
2583
|
this.removeBullets();
|
|
2580
2584
|
}
|
|
2581
2585
|
onSelectionChange() {
|
|
2586
|
+
console.log(`start of onSelectionChange in text.ts - ${new Date().toLocaleString()}-${new Date().getMilliseconds()}`);
|
|
2582
2587
|
this.updateTextSelection(false);
|
|
2583
2588
|
}
|
|
2584
2589
|
hasTextSelection() {
|
|
2585
2590
|
return this.canvas.getSelection().isText && this.textSelection$.value.length > 0;
|
|
2586
2591
|
}
|
|
2587
2592
|
updateTextSelection(notifyCanvas = true) {
|
|
2593
|
+
console.log(`start of updateTextSelection in text.ts - ${new Date().toLocaleString()}-${new Date().getMilliseconds()}`);
|
|
2588
2594
|
if (this.canvas.headless)
|
|
2589
2595
|
return;
|
|
2590
2596
|
this.textSelection$.next(new TextSelection(this.fabricObject, this.fontLibrary));
|
|
2591
2597
|
if (notifyCanvas) {
|
|
2598
|
+
console.log(`inside if in text.ts - ${new Date().toLocaleString()}-${new Date().getMilliseconds()}`);
|
|
2592
2599
|
this.notifyCanvasOfTextChanges();
|
|
2593
2600
|
}
|
|
2594
2601
|
}
|
|
2595
2602
|
notifyCanvasOfTextChanges() {
|
|
2603
|
+
console.log(`start of notifyCanvasOfTextChanges in text.ts - ${new Date().toLocaleString()}-${new Date().getMilliseconds()}`);
|
|
2596
2604
|
if (this.notifyCanvasTimeout) {
|
|
2605
|
+
console.log(`inside timeout if in text.ts - ${new Date().toLocaleString()}-${new Date().getMilliseconds()}`);
|
|
2597
2606
|
clearTimeout(this.notifyCanvasTimeout);
|
|
2598
2607
|
}
|
|
2599
2608
|
this.notifyCanvasTimeout = setTimeout(() => {
|
|
2609
|
+
console.log(`start of setTimeout in text.ts - ${new Date().toLocaleString()}-${new Date().getMilliseconds()}`);
|
|
2600
2610
|
this.canvas.notifyTextChanged();
|
|
2601
2611
|
this.notifyCanvasTimeout = null;
|
|
2602
2612
|
}, this.NOTIFY_DELAY_MS);
|
|
2613
|
+
console.log(`end of notifyCanvasOfTextChanges in text.ts - ${new Date().toLocaleString()}-${new Date().getMilliseconds()}`);
|
|
2603
2614
|
}
|
|
2604
2615
|
}
|
|
2605
2616
|
Text.NEW_LINE = "\n";
|
|
@@ -2607,6 +2618,7 @@ class TextSelection {
|
|
|
2607
2618
|
constructor(fabricObject, fontLibrary) {
|
|
2608
2619
|
this.fabricObject = fabricObject;
|
|
2609
2620
|
this.fontLibrary = fontLibrary;
|
|
2621
|
+
console.log(`constructor of textselection in text.ts - ${new Date().toLocaleString()}-${new Date().getMilliseconds()}`);
|
|
2610
2622
|
this.start = this.fabricObject.selectionStart;
|
|
2611
2623
|
this.end = this.fabricObject.selectionEnd;
|
|
2612
2624
|
this.length = this.end - this.start;
|
|
@@ -3956,6 +3968,7 @@ class InteractiveCanvas extends AbstractInteractiveCanvas {
|
|
|
3956
3968
|
});
|
|
3957
3969
|
}
|
|
3958
3970
|
onFabricSelectionChanged(event) {
|
|
3971
|
+
console.log(`start of onfabricselectionchange in ic.ts - ${MouseEvent}- ${new Date().toLocaleString()}-${new Date().getMilliseconds()}`);
|
|
3959
3972
|
const selected = this.getFieldsByCanvasObject(this.fabricCanvas.getActiveObjects());
|
|
3960
3973
|
const selection = new SelectionData(selected);
|
|
3961
3974
|
if (event) {
|
|
@@ -3966,6 +3979,7 @@ class InteractiveCanvas extends AbstractInteractiveCanvas {
|
|
|
3966
3979
|
}
|
|
3967
3980
|
enterTextSelectionModeIfRequired() {
|
|
3968
3981
|
var _a, _b;
|
|
3982
|
+
console.log(`start of enterTextSelectionModeIfRequired in IC.ts - ${new Date().toLocaleString()}-${new Date().getMilliseconds()}`);
|
|
3969
3983
|
if (!this.profile$.value.enterTextEditImmediatelyOnSelect && !this.layoutManager$.value.enterTextEditImmediatelyOnSelect)
|
|
3970
3984
|
return;
|
|
3971
3985
|
if (((_b = (_a = this.selection$.value) === null || _a === void 0 ? void 0 : _a.objects[0]) === null || _b === void 0 ? void 0 : _b.getType()) !== ObjectType.TEXT)
|
|
@@ -3974,6 +3988,7 @@ class InteractiveCanvas extends AbstractInteractiveCanvas {
|
|
|
3974
3988
|
text.enterEditing();
|
|
3975
3989
|
}
|
|
3976
3990
|
onTextEditing() {
|
|
3991
|
+
console.log(`start of onTextEditing in IC.ts - ${new Date().toLocaleString()}-${new Date().getMilliseconds()}`);
|
|
3977
3992
|
const selected = this.getFieldsByCanvasObject(this.fabricCanvas.getActiveObjects());
|
|
3978
3993
|
this.selection$.next(new SelectionData(selected));
|
|
3979
3994
|
}
|
|
@@ -1844,6 +1844,7 @@ class Text extends AbstractCanvasObject {
|
|
|
1844
1844
|
this.text$ = new rxjs.BehaviorSubject(this.fabricObject.text);
|
|
1845
1845
|
this.data.userText = this.fabricObject.text;
|
|
1846
1846
|
this.textSelection$ = new rxjs.BehaviorSubject(new TextSelection(this.fabricObject, this.fontLibrary));
|
|
1847
|
+
console.log(`inside constructor in text.ts - ${new Date().toLocaleString()}-${new Date().getMilliseconds()}`);
|
|
1847
1848
|
this.fabricObject.set({ strokeWidth: 0 });
|
|
1848
1849
|
this.fabricObject.on("changed", () => this.onTextChange());
|
|
1849
1850
|
this.fabricObject.on("selection:changed", () => this.onSelectionChange());
|
|
@@ -2583,6 +2584,7 @@ class Text extends AbstractCanvasObject {
|
|
|
2583
2584
|
this.redraw();
|
|
2584
2585
|
}
|
|
2585
2586
|
onTextChange() {
|
|
2587
|
+
console.log(`inside onTextChange in text.ts - ${new Date().toLocaleString()}-${new Date().getMilliseconds()}`);
|
|
2586
2588
|
this.data.userText = this.fabricObject.text;
|
|
2587
2589
|
this.text$.next(this.fabricObject.text);
|
|
2588
2590
|
// Only check width bounds if text is close to canvas edge (performance optimization)
|
|
@@ -2590,37 +2592,46 @@ class Text extends AbstractCanvasObject {
|
|
|
2590
2592
|
const canvasWidth = this.canvas.getDimensions().widthPx;
|
|
2591
2593
|
// Skip expensive getBoundingBox if object is clearly within bounds
|
|
2592
2594
|
if (currentLeft + (this.fabricObject.width || 0) > canvasWidth * 0.9) {
|
|
2595
|
+
console.log(`inside if onTextChange in text.ts - ${new Date().toLocaleString()}-${new Date().getMilliseconds()}`);
|
|
2593
2596
|
if (this.getBoundingBox().width > canvasWidth) {
|
|
2594
2597
|
this.fabricObject.set({ left: 0, width: canvasWidth });
|
|
2595
2598
|
this.redraw();
|
|
2596
2599
|
}
|
|
2597
2600
|
}
|
|
2601
|
+
console.log(`end of onTextChange in text.ts - ${new Date().toLocaleString()}-${new Date().getMilliseconds()}`);
|
|
2598
2602
|
}
|
|
2599
2603
|
onDelete() {
|
|
2600
2604
|
this.removeBullets();
|
|
2601
2605
|
}
|
|
2602
2606
|
onSelectionChange() {
|
|
2607
|
+
console.log(`start of onSelectionChange in text.ts - ${new Date().toLocaleString()}-${new Date().getMilliseconds()}`);
|
|
2603
2608
|
this.updateTextSelection(false);
|
|
2604
2609
|
}
|
|
2605
2610
|
hasTextSelection() {
|
|
2606
2611
|
return this.canvas.getSelection().isText && this.textSelection$.value.length > 0;
|
|
2607
2612
|
}
|
|
2608
2613
|
updateTextSelection(notifyCanvas = true) {
|
|
2614
|
+
console.log(`start of updateTextSelection in text.ts - ${new Date().toLocaleString()}-${new Date().getMilliseconds()}`);
|
|
2609
2615
|
if (this.canvas.headless)
|
|
2610
2616
|
return;
|
|
2611
2617
|
this.textSelection$.next(new TextSelection(this.fabricObject, this.fontLibrary));
|
|
2612
2618
|
if (notifyCanvas) {
|
|
2619
|
+
console.log(`inside if in text.ts - ${new Date().toLocaleString()}-${new Date().getMilliseconds()}`);
|
|
2613
2620
|
this.notifyCanvasOfTextChanges();
|
|
2614
2621
|
}
|
|
2615
2622
|
}
|
|
2616
2623
|
notifyCanvasOfTextChanges() {
|
|
2624
|
+
console.log(`start of notifyCanvasOfTextChanges in text.ts - ${new Date().toLocaleString()}-${new Date().getMilliseconds()}`);
|
|
2617
2625
|
if (this.notifyCanvasTimeout) {
|
|
2626
|
+
console.log(`inside timeout if in text.ts - ${new Date().toLocaleString()}-${new Date().getMilliseconds()}`);
|
|
2618
2627
|
clearTimeout(this.notifyCanvasTimeout);
|
|
2619
2628
|
}
|
|
2620
2629
|
this.notifyCanvasTimeout = setTimeout(() => {
|
|
2630
|
+
console.log(`start of setTimeout in text.ts - ${new Date().toLocaleString()}-${new Date().getMilliseconds()}`);
|
|
2621
2631
|
this.canvas.notifyTextChanged();
|
|
2622
2632
|
this.notifyCanvasTimeout = null;
|
|
2623
2633
|
}, this.NOTIFY_DELAY_MS);
|
|
2634
|
+
console.log(`end of notifyCanvasOfTextChanges in text.ts - ${new Date().toLocaleString()}-${new Date().getMilliseconds()}`);
|
|
2624
2635
|
}
|
|
2625
2636
|
}
|
|
2626
2637
|
Text.NEW_LINE = "\n";
|
|
@@ -2628,6 +2639,7 @@ class TextSelection {
|
|
|
2628
2639
|
constructor(fabricObject, fontLibrary) {
|
|
2629
2640
|
this.fabricObject = fabricObject;
|
|
2630
2641
|
this.fontLibrary = fontLibrary;
|
|
2642
|
+
console.log(`constructor of textselection in text.ts - ${new Date().toLocaleString()}-${new Date().getMilliseconds()}`);
|
|
2631
2643
|
this.start = this.fabricObject.selectionStart;
|
|
2632
2644
|
this.end = this.fabricObject.selectionEnd;
|
|
2633
2645
|
this.length = this.end - this.start;
|
|
@@ -3977,6 +3989,7 @@ class InteractiveCanvas extends AbstractInteractiveCanvas {
|
|
|
3977
3989
|
});
|
|
3978
3990
|
}
|
|
3979
3991
|
onFabricSelectionChanged(event) {
|
|
3992
|
+
console.log(`start of onfabricselectionchange in ic.ts - ${MouseEvent}- ${new Date().toLocaleString()}-${new Date().getMilliseconds()}`);
|
|
3980
3993
|
const selected = this.getFieldsByCanvasObject(this.fabricCanvas.getActiveObjects());
|
|
3981
3994
|
const selection = new SelectionData(selected);
|
|
3982
3995
|
if (event) {
|
|
@@ -3987,6 +4000,7 @@ class InteractiveCanvas extends AbstractInteractiveCanvas {
|
|
|
3987
4000
|
}
|
|
3988
4001
|
enterTextSelectionModeIfRequired() {
|
|
3989
4002
|
var _a, _b;
|
|
4003
|
+
console.log(`start of enterTextSelectionModeIfRequired in IC.ts - ${new Date().toLocaleString()}-${new Date().getMilliseconds()}`);
|
|
3990
4004
|
if (!this.profile$.value.enterTextEditImmediatelyOnSelect && !this.layoutManager$.value.enterTextEditImmediatelyOnSelect)
|
|
3991
4005
|
return;
|
|
3992
4006
|
if (((_b = (_a = this.selection$.value) === null || _a === void 0 ? void 0 : _a.objects[0]) === null || _b === void 0 ? void 0 : _b.getType()) !== exports.ObjectType.TEXT)
|
|
@@ -3995,6 +4009,7 @@ class InteractiveCanvas extends AbstractInteractiveCanvas {
|
|
|
3995
4009
|
text.enterEditing();
|
|
3996
4010
|
}
|
|
3997
4011
|
onTextEditing() {
|
|
4012
|
+
console.log(`start of onTextEditing in IC.ts - ${new Date().toLocaleString()}-${new Date().getMilliseconds()}`);
|
|
3998
4013
|
const selected = this.getFieldsByCanvasObject(this.fabricCanvas.getActiveObjects());
|
|
3999
4014
|
this.selection$.next(new SelectionData(selected));
|
|
4000
4015
|
}
|