customized-fabric 1.2.4 → 1.2.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.
|
@@ -42,6 +42,11 @@ const ImagePlaceholderClass = fabric_1.fabric.util.createClass(fabric_1.fabric.G
|
|
|
42
42
|
if (options?.hideStroke) {
|
|
43
43
|
this.rectObject.set({ strokeWidth: 0 });
|
|
44
44
|
}
|
|
45
|
+
else {
|
|
46
|
+
if (options?.maskUrl) {
|
|
47
|
+
this.loadMask(options?.maskUrl);
|
|
48
|
+
}
|
|
49
|
+
}
|
|
45
50
|
if (options?.image) {
|
|
46
51
|
const { image } = options;
|
|
47
52
|
const { url, data, clipPath } = image;
|
|
@@ -68,9 +73,6 @@ const ImagePlaceholderClass = fabric_1.fabric.util.createClass(fabric_1.fabric.G
|
|
|
68
73
|
}
|
|
69
74
|
}
|
|
70
75
|
}
|
|
71
|
-
if (options?.maskUrl) {
|
|
72
|
-
this.loadMask(options?.maskUrl);
|
|
73
|
-
}
|
|
74
76
|
},
|
|
75
77
|
loadImage: async function (image) {
|
|
76
78
|
const loadedImage = await (0, utils_1.loadImage)(image);
|
|
@@ -128,9 +130,17 @@ const ImagePlaceholderClass = fabric_1.fabric.util.createClass(fabric_1.fabric.G
|
|
|
128
130
|
top: this.top,
|
|
129
131
|
left: this.left,
|
|
130
132
|
});
|
|
131
|
-
if (this.
|
|
133
|
+
if (this.maskUrl) {
|
|
134
|
+
const maskObject = await (0, utils_1.loadImage)(this.maskUrl);
|
|
135
|
+
maskObject?.set({
|
|
136
|
+
top: this.top,
|
|
137
|
+
left: this.left,
|
|
138
|
+
absolutePositioned: true,
|
|
139
|
+
scaleX: this.width / (maskObject?.width ?? this.width),
|
|
140
|
+
scaleY: this.height / (maskObject?.height ?? this.height),
|
|
141
|
+
});
|
|
132
142
|
loadedImage.set({
|
|
133
|
-
clipPath:
|
|
143
|
+
clipPath: maskObject,
|
|
134
144
|
});
|
|
135
145
|
}
|
|
136
146
|
else {
|
|
@@ -194,13 +204,20 @@ const ImagePlaceholderClass = fabric_1.fabric.util.createClass(fabric_1.fabric.G
|
|
|
194
204
|
scaleY: this.height / loadedMask.height,
|
|
195
205
|
absolutePositioned: false,
|
|
196
206
|
});
|
|
207
|
+
this.remove(this.imageObject);
|
|
208
|
+
this.remove(this.maskObject);
|
|
197
209
|
this.maskObject = loadedMask;
|
|
210
|
+
this.add(this.maskObject);
|
|
211
|
+
this.imageObject && this.add(this.imageObject);
|
|
198
212
|
this.set({ clipPath: this.maskObject });
|
|
199
213
|
this.canvas?.renderAll();
|
|
200
214
|
}
|
|
201
215
|
},
|
|
202
216
|
removeMask: async function () {
|
|
203
|
-
this.set({ clipPath: undefined });
|
|
217
|
+
this.set({ clipPath: undefined, maskUrl: undefined });
|
|
218
|
+
this.remove(this.maskObject);
|
|
219
|
+
this.maskObject = undefined;
|
|
220
|
+
this.canvas?.renderAll();
|
|
204
221
|
},
|
|
205
222
|
});
|
|
206
223
|
const toImagePlaceholderObject = (imagePlaceholderObject) => {
|