@leapfrog/interactive-canvas 2.0.25-beta-4 → 2.0.25-beta-5
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.
|
@@ -232,8 +232,8 @@ class ResizeCanvasLayoutFunction {
|
|
|
232
232
|
const targetHeight = increase.withSize(increase.width, baseDimensions.height + increase.height);
|
|
233
233
|
if (currentDimensions.height !== targetHeight.height) {
|
|
234
234
|
canvas.setDimensions(targetHeight);
|
|
235
|
+
canvas.getObjectsInternal().forEach((object) => object.setCoords());
|
|
235
236
|
}
|
|
236
|
-
canvas.getObjectsInternal().forEach((object) => object.setCoords());
|
|
237
237
|
canvas.redraw();
|
|
238
238
|
}
|
|
239
239
|
}
|
|
@@ -1449,19 +1449,14 @@ class HorizontalRule extends AbstractCanvasObject {
|
|
|
1449
1449
|
|
|
1450
1450
|
class Image extends AbstractCanvasObject {
|
|
1451
1451
|
constructor(canvas, fabricObject, persistedField) {
|
|
1452
|
-
var _a;
|
|
1453
1452
|
super(ObjectType.IMAGE, canvas, fabricObject, persistedField);
|
|
1454
1453
|
this.DEFAULT_RESTRICTIONS = {
|
|
1455
1454
|
minWidth: 1,
|
|
1456
1455
|
minHeight: 1
|
|
1457
1456
|
};
|
|
1458
1457
|
this.canvas = canvas;
|
|
1459
|
-
console.log("fabric object", this.fabricObject);
|
|
1460
|
-
console.log("fabric src", (_a = this.fabricObject) === null || _a === void 0 ? void 0 : _a.getSrc());
|
|
1461
1458
|
this.imageUrl$ = new BehaviorSubject(this.fabricObject.getSrc());
|
|
1462
|
-
console.log("imageUrl$", this.imageUrl$);
|
|
1463
1459
|
this.data.imagePath = this.imageUrl$.value;
|
|
1464
|
-
console.log("this.data.imagePath", this.data.imagePath);
|
|
1465
1460
|
this.layoutWidth = this.getBoundingBox().width;
|
|
1466
1461
|
}
|
|
1467
1462
|
/**
|
|
@@ -2541,16 +2536,18 @@ class Text extends AbstractCanvasObject {
|
|
|
2541
2536
|
this.removeBullets();
|
|
2542
2537
|
}
|
|
2543
2538
|
onSelectionChange() {
|
|
2544
|
-
this.updateTextSelection();
|
|
2539
|
+
this.updateTextSelection(false);
|
|
2545
2540
|
}
|
|
2546
2541
|
hasTextSelection() {
|
|
2547
2542
|
return this.canvas.getSelection().isText && this.textSelection$.value.length > 0;
|
|
2548
2543
|
}
|
|
2549
|
-
updateTextSelection() {
|
|
2544
|
+
updateTextSelection(notifyCanvas = true) {
|
|
2550
2545
|
if (this.canvas.headless)
|
|
2551
2546
|
return;
|
|
2552
2547
|
this.textSelection$.next(new TextSelection(this.fabricObject, this.fontLibrary));
|
|
2553
|
-
|
|
2548
|
+
if (notifyCanvas) {
|
|
2549
|
+
this.notifyCanvasOfTextChanges();
|
|
2550
|
+
}
|
|
2554
2551
|
}
|
|
2555
2552
|
notifyCanvasOfTextChanges() {
|
|
2556
2553
|
this.canvas.notifyTextChanged();
|
|
@@ -3066,25 +3063,12 @@ class AbstractInteractiveCanvas {
|
|
|
3066
3063
|
originY: "top",
|
|
3067
3064
|
src: imageUrl,
|
|
3068
3065
|
crossOrigin: "anonymous",
|
|
3069
|
-
/*toObject: function () {
|
|
3070
|
-
return {
|
|
3071
|
-
...fabric.Object.prototype.toObject.call(this),
|
|
3072
|
-
crossOrigin: this.crossOrigin,
|
|
3073
|
-
src: this.src,
|
|
3074
|
-
id: id
|
|
3075
|
-
};
|
|
3076
|
-
},*/
|
|
3077
3066
|
});
|
|
3078
|
-
// fabricImage.toDataURL({ format: 'png' });
|
|
3079
3067
|
yield fabricImage.setSrc(imageUrl, options);
|
|
3080
3068
|
this.fabricCanvas.add(fabricImage);
|
|
3081
3069
|
const canvasObjectData = new CanvasObjectData(ObjectType.IMAGE, id);
|
|
3082
3070
|
canvasObjectData.imagePath = imageUrl;
|
|
3083
|
-
console.log("Assigned imagePath:", canvasObjectData.imagePath);
|
|
3084
3071
|
const object = new Image(this, fabricImage, canvasObjectData);
|
|
3085
|
-
console.log("Created Image object with imagePath:", object);
|
|
3086
|
-
object.data.imagePath = imageUrl;
|
|
3087
|
-
object.imageUrl$.next(imageUrl);
|
|
3088
3072
|
this.trackNewObject(object);
|
|
3089
3073
|
this.syncObjectList();
|
|
3090
3074
|
return object;
|
|
@@ -3142,6 +3126,7 @@ class AbstractInteractiveCanvas {
|
|
|
3142
3126
|
fontFamily: profile.defaultFont,
|
|
3143
3127
|
textAlign: profile.defaultTextAlignment,
|
|
3144
3128
|
hoverCursor: "move",
|
|
3129
|
+
moveCursor: 'move',
|
|
3145
3130
|
multiLine: true,
|
|
3146
3131
|
lineHeight: profile.defaultLineHeight,
|
|
3147
3132
|
charSpacing: profile.defaultCharacterSpacing,
|
|
@@ -253,8 +253,8 @@ class ResizeCanvasLayoutFunction {
|
|
|
253
253
|
const targetHeight = increase.withSize(increase.width, baseDimensions.height + increase.height);
|
|
254
254
|
if (currentDimensions.height !== targetHeight.height) {
|
|
255
255
|
canvas.setDimensions(targetHeight);
|
|
256
|
+
canvas.getObjectsInternal().forEach((object) => object.setCoords());
|
|
256
257
|
}
|
|
257
|
-
canvas.getObjectsInternal().forEach((object) => object.setCoords());
|
|
258
258
|
canvas.redraw();
|
|
259
259
|
}
|
|
260
260
|
}
|
|
@@ -1470,19 +1470,14 @@ class HorizontalRule extends AbstractCanvasObject {
|
|
|
1470
1470
|
|
|
1471
1471
|
class Image extends AbstractCanvasObject {
|
|
1472
1472
|
constructor(canvas, fabricObject, persistedField) {
|
|
1473
|
-
var _a;
|
|
1474
1473
|
super(exports.ObjectType.IMAGE, canvas, fabricObject, persistedField);
|
|
1475
1474
|
this.DEFAULT_RESTRICTIONS = {
|
|
1476
1475
|
minWidth: 1,
|
|
1477
1476
|
minHeight: 1
|
|
1478
1477
|
};
|
|
1479
1478
|
this.canvas = canvas;
|
|
1480
|
-
console.log("fabric object", this.fabricObject);
|
|
1481
|
-
console.log("fabric src", (_a = this.fabricObject) === null || _a === void 0 ? void 0 : _a.getSrc());
|
|
1482
1479
|
this.imageUrl$ = new rxjs.BehaviorSubject(this.fabricObject.getSrc());
|
|
1483
|
-
console.log("imageUrl$", this.imageUrl$);
|
|
1484
1480
|
this.data.imagePath = this.imageUrl$.value;
|
|
1485
|
-
console.log("this.data.imagePath", this.data.imagePath);
|
|
1486
1481
|
this.layoutWidth = this.getBoundingBox().width;
|
|
1487
1482
|
}
|
|
1488
1483
|
/**
|
|
@@ -2562,16 +2557,18 @@ class Text extends AbstractCanvasObject {
|
|
|
2562
2557
|
this.removeBullets();
|
|
2563
2558
|
}
|
|
2564
2559
|
onSelectionChange() {
|
|
2565
|
-
this.updateTextSelection();
|
|
2560
|
+
this.updateTextSelection(false);
|
|
2566
2561
|
}
|
|
2567
2562
|
hasTextSelection() {
|
|
2568
2563
|
return this.canvas.getSelection().isText && this.textSelection$.value.length > 0;
|
|
2569
2564
|
}
|
|
2570
|
-
updateTextSelection() {
|
|
2565
|
+
updateTextSelection(notifyCanvas = true) {
|
|
2571
2566
|
if (this.canvas.headless)
|
|
2572
2567
|
return;
|
|
2573
2568
|
this.textSelection$.next(new TextSelection(this.fabricObject, this.fontLibrary));
|
|
2574
|
-
|
|
2569
|
+
if (notifyCanvas) {
|
|
2570
|
+
this.notifyCanvasOfTextChanges();
|
|
2571
|
+
}
|
|
2575
2572
|
}
|
|
2576
2573
|
notifyCanvasOfTextChanges() {
|
|
2577
2574
|
this.canvas.notifyTextChanged();
|
|
@@ -3087,25 +3084,12 @@ class AbstractInteractiveCanvas {
|
|
|
3087
3084
|
originY: "top",
|
|
3088
3085
|
src: imageUrl,
|
|
3089
3086
|
crossOrigin: "anonymous",
|
|
3090
|
-
/*toObject: function () {
|
|
3091
|
-
return {
|
|
3092
|
-
...fabric.Object.prototype.toObject.call(this),
|
|
3093
|
-
crossOrigin: this.crossOrigin,
|
|
3094
|
-
src: this.src,
|
|
3095
|
-
id: id
|
|
3096
|
-
};
|
|
3097
|
-
},*/
|
|
3098
3087
|
});
|
|
3099
|
-
// fabricImage.toDataURL({ format: 'png' });
|
|
3100
3088
|
yield fabricImage.setSrc(imageUrl, options);
|
|
3101
3089
|
this.fabricCanvas.add(fabricImage);
|
|
3102
3090
|
const canvasObjectData = new CanvasObjectData(exports.ObjectType.IMAGE, id);
|
|
3103
3091
|
canvasObjectData.imagePath = imageUrl;
|
|
3104
|
-
console.log("Assigned imagePath:", canvasObjectData.imagePath);
|
|
3105
3092
|
const object = new Image(this, fabricImage, canvasObjectData);
|
|
3106
|
-
console.log("Created Image object with imagePath:", object);
|
|
3107
|
-
object.data.imagePath = imageUrl;
|
|
3108
|
-
object.imageUrl$.next(imageUrl);
|
|
3109
3093
|
this.trackNewObject(object);
|
|
3110
3094
|
this.syncObjectList();
|
|
3111
3095
|
return object;
|
|
@@ -3163,6 +3147,7 @@ class AbstractInteractiveCanvas {
|
|
|
3163
3147
|
fontFamily: profile.defaultFont,
|
|
3164
3148
|
textAlign: profile.defaultTextAlignment,
|
|
3165
3149
|
hoverCursor: "move",
|
|
3150
|
+
moveCursor: 'move',
|
|
3166
3151
|
multiLine: true,
|
|
3167
3152
|
lineHeight: profile.defaultLineHeight,
|
|
3168
3153
|
charSpacing: profile.defaultCharacterSpacing,
|
|
@@ -8,7 +8,7 @@ export declare abstract class AbstractCanvasObject<T extends FabricObject> imple
|
|
|
8
8
|
protected pinToBottomDistance: number;
|
|
9
9
|
protected canvas: IInteractiveCanvas;
|
|
10
10
|
protected fabricObject: T;
|
|
11
|
-
data: CanvasObjectData;
|
|
11
|
+
protected data: CanvasObjectData;
|
|
12
12
|
private readonly dimensions$;
|
|
13
13
|
private readonly opacity$;
|
|
14
14
|
/**
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { IDimensionRestrictions, IInteractiveCanvas, IMutableImage, IMutablePosition, IPosition } from "../..";
|
|
2
2
|
import { ICanvasObject } from "../canvas-object.interface";
|
|
3
3
|
import { AbstractCanvasObject } from "../abstract-canvas-object";
|
|
4
|
-
import {
|
|
4
|
+
import { Observable } from "rxjs";
|
|
5
5
|
import { CanvasObjectData } from "../canvas-object-data";
|
|
6
6
|
import { FabricImage } from "fabric";
|
|
7
7
|
/**
|
|
@@ -12,7 +12,7 @@ export interface IImage extends ICanvasObject, IMutableImage, IMutablePosition {
|
|
|
12
12
|
export declare class Image extends AbstractCanvasObject<FabricImage> implements IImage {
|
|
13
13
|
private readonly DEFAULT_RESTRICTIONS;
|
|
14
14
|
private layoutWidth;
|
|
15
|
-
imageUrl
|
|
15
|
+
private readonly imageUrl$;
|
|
16
16
|
constructor(canvas: IInteractiveCanvas, fabricObject: FabricImage, persistedField?: CanvasObjectData);
|
|
17
17
|
/**
|
|
18
18
|
* @override
|