@leapfrog/interactive-canvas 2.0.24-beta-3 → 2.0.24-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.
|
@@ -3041,17 +3041,14 @@ class AbstractInteractiveCanvas {
|
|
|
3041
3041
|
const maxWidth = this.dimensions$.value.widthPx / maxSizeScale;
|
|
3042
3042
|
const options = { crossOrigin: "anonymous" };
|
|
3043
3043
|
if (this.headless) {
|
|
3044
|
-
// Server-side logic without mock DOM
|
|
3045
|
-
//const canvas = createCanvas(1, 1);
|
|
3046
|
-
//const ctx = canvas.getContext("2d");
|
|
3047
3044
|
const image = yield loadImage(imageUrl);
|
|
3048
|
-
//const fabricImage = new this.fabric.Image(image as any, { src: imageUrl, crossOrigin: "anonymous" });
|
|
3049
3045
|
const id = this.randomId();
|
|
3050
3046
|
let newScale = 1;
|
|
3051
3047
|
const curWidth = newScale * image.width;
|
|
3052
3048
|
if (curWidth > maxWidth) {
|
|
3053
3049
|
newScale = maxWidth / curWidth;
|
|
3054
3050
|
}
|
|
3051
|
+
// Set image properties and add to the canvas
|
|
3055
3052
|
const fabricImage = new this.fabric.Image(image, {
|
|
3056
3053
|
id: id,
|
|
3057
3054
|
scaleX: newScale,
|
|
@@ -3064,22 +3061,8 @@ class AbstractInteractiveCanvas {
|
|
|
3064
3061
|
return Object.assign(Object.assign({}, fabric.Object.prototype.toObject.call(this)), { src: this.src, crossOrigin: this.crossOrigin, id: id });
|
|
3065
3062
|
},
|
|
3066
3063
|
});
|
|
3067
|
-
// Set image properties and add to the canvas
|
|
3068
|
-
// const fabricImage = new FabricImage(imageUrl, {
|
|
3069
|
-
//const fabricImage = new this.fabric.Image(image, {
|
|
3070
|
-
// const fabricImage = new FabricImage(image as any, {
|
|
3071
|
-
/* fabricImage.set({
|
|
3072
|
-
id: id,
|
|
3073
|
-
scaleX: newScale,
|
|
3074
|
-
scaleY: newScale,
|
|
3075
|
-
originX: "left",
|
|
3076
|
-
originY: "top"
|
|
3077
|
-
});*/
|
|
3078
|
-
console.log("headless image-->", fabricImage);
|
|
3079
3064
|
this.fabricCanvas.add(fabricImage);
|
|
3080
|
-
const
|
|
3081
|
-
canvasObjectData.imagePath = imageUrl;
|
|
3082
|
-
const object = new Image(this, fabricImage, canvasObjectData);
|
|
3065
|
+
const object = new Image(this, fabricImage);
|
|
3083
3066
|
this.trackNewObject(object);
|
|
3084
3067
|
this.syncObjectList();
|
|
3085
3068
|
return object;
|
|
@@ -3260,9 +3243,11 @@ class AbstractInteractiveCanvas {
|
|
|
3260
3243
|
fontSize: fontSizePx,
|
|
3261
3244
|
fontFamily: profile.defaultFont,
|
|
3262
3245
|
textAlign: profile.defaultTextAlignment,
|
|
3246
|
+
hoverCursor: "move",
|
|
3263
3247
|
multiLine: true,
|
|
3264
3248
|
lineHeight: profile.defaultLineHeight,
|
|
3265
|
-
charSpacing: profile.defaultCharacterSpacing
|
|
3249
|
+
charSpacing: profile.defaultCharacterSpacing,
|
|
3250
|
+
perPixelTargetFind: false
|
|
3266
3251
|
};
|
|
3267
3252
|
const fabricTextbox = new this.fabric.Textbox("Text goes here", textOptions);
|
|
3268
3253
|
this.fabricCanvas.add(fabricTextbox);
|
|
@@ -3062,17 +3062,14 @@ class AbstractInteractiveCanvas {
|
|
|
3062
3062
|
const maxWidth = this.dimensions$.value.widthPx / maxSizeScale;
|
|
3063
3063
|
const options = { crossOrigin: "anonymous" };
|
|
3064
3064
|
if (this.headless) {
|
|
3065
|
-
// Server-side logic without mock DOM
|
|
3066
|
-
//const canvas = createCanvas(1, 1);
|
|
3067
|
-
//const ctx = canvas.getContext("2d");
|
|
3068
3065
|
const image = yield canvas.loadImage(imageUrl);
|
|
3069
|
-
//const fabricImage = new this.fabric.Image(image as any, { src: imageUrl, crossOrigin: "anonymous" });
|
|
3070
3066
|
const id = this.randomId();
|
|
3071
3067
|
let newScale = 1;
|
|
3072
3068
|
const curWidth = newScale * image.width;
|
|
3073
3069
|
if (curWidth > maxWidth) {
|
|
3074
3070
|
newScale = maxWidth / curWidth;
|
|
3075
3071
|
}
|
|
3072
|
+
// Set image properties and add to the canvas
|
|
3076
3073
|
const fabricImage = new this.fabric.Image(image, {
|
|
3077
3074
|
id: id,
|
|
3078
3075
|
scaleX: newScale,
|
|
@@ -3085,22 +3082,8 @@ class AbstractInteractiveCanvas {
|
|
|
3085
3082
|
return Object.assign(Object.assign({}, fabric__namespace.Object.prototype.toObject.call(this)), { src: this.src, crossOrigin: this.crossOrigin, id: id });
|
|
3086
3083
|
},
|
|
3087
3084
|
});
|
|
3088
|
-
// Set image properties and add to the canvas
|
|
3089
|
-
// const fabricImage = new FabricImage(imageUrl, {
|
|
3090
|
-
//const fabricImage = new this.fabric.Image(image, {
|
|
3091
|
-
// const fabricImage = new FabricImage(image as any, {
|
|
3092
|
-
/* fabricImage.set({
|
|
3093
|
-
id: id,
|
|
3094
|
-
scaleX: newScale,
|
|
3095
|
-
scaleY: newScale,
|
|
3096
|
-
originX: "left",
|
|
3097
|
-
originY: "top"
|
|
3098
|
-
});*/
|
|
3099
|
-
console.log("headless image-->", fabricImage);
|
|
3100
3085
|
this.fabricCanvas.add(fabricImage);
|
|
3101
|
-
const
|
|
3102
|
-
canvasObjectData.imagePath = imageUrl;
|
|
3103
|
-
const object = new Image(this, fabricImage, canvasObjectData);
|
|
3086
|
+
const object = new Image(this, fabricImage);
|
|
3104
3087
|
this.trackNewObject(object);
|
|
3105
3088
|
this.syncObjectList();
|
|
3106
3089
|
return object;
|
|
@@ -3281,9 +3264,11 @@ class AbstractInteractiveCanvas {
|
|
|
3281
3264
|
fontSize: fontSizePx,
|
|
3282
3265
|
fontFamily: profile.defaultFont,
|
|
3283
3266
|
textAlign: profile.defaultTextAlignment,
|
|
3267
|
+
hoverCursor: "move",
|
|
3284
3268
|
multiLine: true,
|
|
3285
3269
|
lineHeight: profile.defaultLineHeight,
|
|
3286
|
-
charSpacing: profile.defaultCharacterSpacing
|
|
3270
|
+
charSpacing: profile.defaultCharacterSpacing,
|
|
3271
|
+
perPixelTargetFind: false
|
|
3287
3272
|
};
|
|
3288
3273
|
const fabricTextbox = new this.fabric.Textbox("Text goes here", textOptions);
|
|
3289
3274
|
this.fabricCanvas.add(fabricTextbox);
|