customized-fabric 1.5.5 → 1.5.7
Sign up to get free protection for your applications and to get access to all the features.
- package/lib/ClipartObject/index.d.ts +5 -1
- package/lib/ClipartObject/index.js +15 -13
- package/lib/CurvedTextObject/index.d.ts +4 -0
- package/lib/CurvedTextObject/index.js +8 -2
- package/lib/ImagePlaceholderObject/index.d.ts +4 -0
- package/lib/ImagePlaceholderObject/index.js +2 -0
- package/lib/LayoutGroupObject/index.d.ts +1 -0
- package/lib/LayoutGroupObject/index.js +11 -5
- package/lib/LayoutGroupObject/interfaces.d.ts +1 -0
- package/lib/TextInputObject/index.d.ts +5 -1
- package/lib/TextInputObject/index.js +14 -12
- package/lib/utils/svg.util.d.ts +2 -0
- package/lib/utils/svg.util.js +8 -1
- package/package.json +1 -1
@@ -1,7 +1,7 @@
|
|
1
1
|
import { fabric } from "fabric";
|
2
2
|
import { IClipartOptions } from "./interfaces";
|
3
3
|
import { ObjectId } from "../utils/objectId";
|
4
|
-
export declare const toClipartObject: (
|
4
|
+
export declare const toClipartObject: (object: Clipart) => {
|
5
5
|
_id: ObjectId | undefined;
|
6
6
|
id: ObjectId | undefined;
|
7
7
|
personalizeId: number | undefined;
|
@@ -14,6 +14,8 @@ export declare const toClipartObject: (clipartObject: Clipart) => {
|
|
14
14
|
clipartRootCategoryId: string | undefined;
|
15
15
|
clipartCategoryId: string | undefined;
|
16
16
|
clipartOptionId: number | undefined;
|
17
|
+
layoutGroupId: string | undefined;
|
18
|
+
layoutGroupName: string | undefined;
|
17
19
|
};
|
18
20
|
export default class Clipart extends fabric.Group {
|
19
21
|
_id?: ObjectId;
|
@@ -28,6 +30,8 @@ export default class Clipart extends fabric.Group {
|
|
28
30
|
clipartOptionId?: number;
|
29
31
|
clipartUrl?: string;
|
30
32
|
imageObject?: fabric.Image;
|
33
|
+
layoutGroupId?: string;
|
34
|
+
layoutGroupName?: string;
|
31
35
|
loadImage?: (imageFile: File | string) => Promise<void>;
|
32
36
|
getSettings?: (attribute: string) => any;
|
33
37
|
setSizes?: (options: {
|
@@ -126,20 +126,22 @@ const ClipartClass = fabric_1.fabric.util.createClass(fabric_1.fabric.Group, {
|
|
126
126
|
}
|
127
127
|
},
|
128
128
|
});
|
129
|
-
const toClipartObject = (
|
129
|
+
const toClipartObject = (object) => {
|
130
130
|
return {
|
131
|
-
_id:
|
132
|
-
id:
|
133
|
-
personalizeId:
|
134
|
-
layerId:
|
135
|
-
name:
|
136
|
-
locked:
|
137
|
-
isAdditional:
|
138
|
-
clipartUrl:
|
139
|
-
clipartFile:
|
140
|
-
clipartRootCategoryId:
|
141
|
-
clipartCategoryId:
|
142
|
-
clipartOptionId:
|
131
|
+
_id: object?._id,
|
132
|
+
id: object?._id,
|
133
|
+
personalizeId: object?.layerId,
|
134
|
+
layerId: object?.layerId,
|
135
|
+
name: object?.name,
|
136
|
+
locked: object?.locked,
|
137
|
+
isAdditional: object?.isAdditional,
|
138
|
+
clipartUrl: object?.clipartUrl,
|
139
|
+
clipartFile: object?.clipartFile,
|
140
|
+
clipartRootCategoryId: object?.clipartRootCategoryId,
|
141
|
+
clipartCategoryId: object?.clipartCategoryId,
|
142
|
+
clipartOptionId: object?.clipartOptionId,
|
143
|
+
layoutGroupId: object?.layoutGroupId,
|
144
|
+
layoutGroupName: object?.layoutGroupName,
|
143
145
|
};
|
144
146
|
};
|
145
147
|
exports.toClipartObject = toClipartObject;
|
@@ -12,6 +12,8 @@ export declare const toCurvedTextObject: (object: CurvedText) => {
|
|
12
12
|
fontCategoryId: string | undefined;
|
13
13
|
fontUrl: string | undefined;
|
14
14
|
isAdditional: boolean | undefined;
|
15
|
+
layoutGroupId: string | undefined;
|
16
|
+
layoutGroupName: string | undefined;
|
15
17
|
text: {
|
16
18
|
fontWeight: string | number | undefined;
|
17
19
|
fontSize: number | undefined;
|
@@ -41,6 +43,8 @@ export default class CurvedText extends fabric.Group {
|
|
41
43
|
fontCategoryId?: string;
|
42
44
|
fontUrl?: string;
|
43
45
|
isAdditional?: boolean;
|
46
|
+
layoutGroupId?: string;
|
47
|
+
layoutGroupName?: string;
|
44
48
|
setText?: (text: string) => void;
|
45
49
|
setPrefix?: (text: string) => void;
|
46
50
|
setInfix?: (text: string) => void;
|
@@ -180,12 +180,16 @@ const CurvedTextClass = fabric_1.fabric.util.createClass(fabric_1.fabric.Group,
|
|
180
180
|
this.pathObject = path;
|
181
181
|
const pathInfo = fabric_1.fabric.util?.getPathSegmentsInfo?.(path.path);
|
182
182
|
const pathLength = pathInfo?.[(pathInfo?.length ?? 0) - 1]?.length;
|
183
|
-
const position = this.textObject.position ?? 0;
|
184
183
|
this.textObject.set({
|
185
184
|
path,
|
186
185
|
pathLength,
|
187
|
-
pathStartOffset: (position * pathLength) / 360,
|
188
186
|
});
|
187
|
+
const position = this.textObject.position;
|
188
|
+
if (position) {
|
189
|
+
this.textObject.set({
|
190
|
+
pathStartOffset: (position * pathLength) / 360,
|
191
|
+
});
|
192
|
+
}
|
189
193
|
},
|
190
194
|
});
|
191
195
|
const toCurvedTextObject = (object) => {
|
@@ -201,6 +205,8 @@ const toCurvedTextObject = (object) => {
|
|
201
205
|
fontCategoryId: object?.fontCategoryId,
|
202
206
|
fontUrl: object?.fontUrl,
|
203
207
|
isAdditional: object?.isAdditional,
|
208
|
+
layoutGroupId: object?.layoutGroupId,
|
209
|
+
layoutGroupName: object?.layoutGroupName,
|
204
210
|
text: {
|
205
211
|
fontWeight: textObject?.fontWeight,
|
206
212
|
fontSize: textObject?.fontSize,
|
@@ -10,6 +10,8 @@ export declare const toImagePlaceholderObject: (object: ImagePlaceholder) => {
|
|
10
10
|
locked: boolean | undefined;
|
11
11
|
isAdditional: boolean | undefined;
|
12
12
|
maskUrl: string | undefined;
|
13
|
+
layoutGroupId: string | undefined;
|
14
|
+
layoutGroupName: string | undefined;
|
13
15
|
imageSettings: {
|
14
16
|
type: string | undefined;
|
15
17
|
color: string | undefined;
|
@@ -31,6 +33,8 @@ export default class ImagePlaceholder extends fabric.Group {
|
|
31
33
|
faceCutout?: boolean;
|
32
34
|
imageObject?: fabric.Image;
|
33
35
|
uploadedImage?: fabric.Image;
|
36
|
+
layoutGroupId?: string;
|
37
|
+
layoutGroupName?: string;
|
34
38
|
getSettings?: (attribute: string) => any;
|
35
39
|
setSizes?: (options: {
|
36
40
|
width?: number;
|
@@ -286,6 +286,8 @@ const toImagePlaceholderObject = (object) => {
|
|
286
286
|
locked: object?.locked,
|
287
287
|
isAdditional: object?.isAdditional,
|
288
288
|
maskUrl: object?.maskUrl,
|
289
|
+
layoutGroupId: object?.layoutGroupId,
|
290
|
+
layoutGroupName: object?.layoutGroupName,
|
289
291
|
imageSettings: {
|
290
292
|
type: object?.imageType,
|
291
293
|
color: object?.imageColor,
|
@@ -5,14 +5,14 @@ const objectId_1 = require("../utils/objectId");
|
|
5
5
|
const constants_1 = require("./constants");
|
6
6
|
class LayoutGroup {
|
7
7
|
constructor(options) {
|
8
|
-
const { objects = [], canvas, _id } = options ?? {};
|
9
|
-
const
|
8
|
+
const { objects = [], canvas, _id, name = constants_1.LAYOUT_GROUP_OBJECT_ATTRIBUTES.name, } = options ?? {};
|
9
|
+
const groupId = _id ?? new objectId_1.ObjectId().toString();
|
10
10
|
objects?.map((obj) => {
|
11
|
-
obj.set({ layoutGroupId:
|
11
|
+
obj.set({ layoutGroupId: groupId, layoutGroupName: name });
|
12
12
|
});
|
13
|
-
this._id =
|
13
|
+
this._id = groupId;
|
14
|
+
this.name = name;
|
14
15
|
this.type = constants_1.LAYOUT_GROUP_OBJECT_ATTRIBUTES.type;
|
15
|
-
this.name = constants_1.LAYOUT_GROUP_OBJECT_ATTRIBUTES.name;
|
16
16
|
this.objects = objects;
|
17
17
|
this.canvas = canvas;
|
18
18
|
return this;
|
@@ -44,6 +44,12 @@ class LayoutGroup {
|
|
44
44
|
});
|
45
45
|
}
|
46
46
|
}
|
47
|
+
rename(name) {
|
48
|
+
this.name = name;
|
49
|
+
this.objects?.map((obj) => {
|
50
|
+
obj.set({ layoutGroupName: name });
|
51
|
+
});
|
52
|
+
}
|
47
53
|
getObjects() {
|
48
54
|
return this.objects;
|
49
55
|
}
|
@@ -1,7 +1,7 @@
|
|
1
1
|
import { fabric } from "fabric";
|
2
2
|
import { ITextInputOptions } from "./interfaces";
|
3
3
|
import { ObjectId } from "../utils/objectId";
|
4
|
-
export declare const toTextInputObject: (
|
4
|
+
export declare const toTextInputObject: (object: TextInput) => {
|
5
5
|
_id: ObjectId | undefined;
|
6
6
|
id: ObjectId | undefined;
|
7
7
|
personalizeId: number | undefined;
|
@@ -12,6 +12,8 @@ export declare const toTextInputObject: (textInputObject: TextInput) => {
|
|
12
12
|
fontCategoryId: string | undefined;
|
13
13
|
fontUrl: string | undefined;
|
14
14
|
isAdditional: boolean | undefined;
|
15
|
+
layoutGroupId: string | undefined;
|
16
|
+
layoutGroupName: string | undefined;
|
15
17
|
text: {
|
16
18
|
fontWeight: string | number | undefined;
|
17
19
|
fontSize: number | undefined;
|
@@ -38,6 +40,8 @@ export default class TextInput extends fabric.Group {
|
|
38
40
|
fontCategoryId?: string;
|
39
41
|
fontUrl?: string;
|
40
42
|
isAdditional?: boolean;
|
43
|
+
layoutGroupId?: string;
|
44
|
+
layoutGroupName?: string;
|
41
45
|
setText?: (text: string) => void;
|
42
46
|
setPrefix?: (text: string) => void;
|
43
47
|
setInfix?: (text: string) => void;
|
@@ -178,19 +178,21 @@ const TextInputClass = fabric_1.fabric.util.createClass(fabric_1.fabric.Group, {
|
|
178
178
|
return this.textObject.get(attribute);
|
179
179
|
},
|
180
180
|
});
|
181
|
-
const toTextInputObject = (
|
182
|
-
const textObject =
|
181
|
+
const toTextInputObject = (object) => {
|
182
|
+
const textObject = object.textObject;
|
183
183
|
return {
|
184
|
-
_id:
|
185
|
-
id:
|
186
|
-
personalizeId:
|
187
|
-
layerId:
|
188
|
-
name:
|
189
|
-
locked:
|
190
|
-
fontId:
|
191
|
-
fontCategoryId:
|
192
|
-
fontUrl:
|
193
|
-
isAdditional:
|
184
|
+
_id: object?._id,
|
185
|
+
id: object?._id,
|
186
|
+
personalizeId: object?.layerId,
|
187
|
+
layerId: object?.layerId,
|
188
|
+
name: object?.name,
|
189
|
+
locked: object?.locked,
|
190
|
+
fontId: object?.fontId,
|
191
|
+
fontCategoryId: object?.fontCategoryId,
|
192
|
+
fontUrl: object?.fontUrl,
|
193
|
+
isAdditional: object?.isAdditional,
|
194
|
+
layoutGroupId: object?.layoutGroupId,
|
195
|
+
layoutGroupName: object?.layoutGroupName,
|
194
196
|
text: {
|
195
197
|
fontWeight: textObject?.fontWeight,
|
196
198
|
fontSize: textObject?.fontSize,
|
package/lib/utils/svg.util.d.ts
CHANGED
package/lib/utils/svg.util.js
CHANGED
@@ -1,6 +1,7 @@
|
|
1
1
|
"use strict";
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
3
|
-
exports.getEllipsePath = void 0;
|
3
|
+
exports.getPathLenght = exports.getEllipsePath = void 0;
|
4
|
+
const fabric_1 = require("fabric");
|
4
5
|
const getEllipsePath = (rx, ry) => {
|
5
6
|
let output = `M 0,0`;
|
6
7
|
output += `a ${rx},${ry} 0 0,1 0,${ry * -2}`;
|
@@ -9,3 +10,9 @@ const getEllipsePath = (rx, ry) => {
|
|
9
10
|
return output;
|
10
11
|
};
|
11
12
|
exports.getEllipsePath = getEllipsePath;
|
13
|
+
const getPathLenght = (path) => {
|
14
|
+
const pathInfo = fabric_1.fabric.util?.getPathSegmentsInfo?.(path.path);
|
15
|
+
const pathLength = pathInfo?.[(pathInfo?.length ?? 0) - 1]?.length;
|
16
|
+
return pathLength;
|
17
|
+
};
|
18
|
+
exports.getPathLenght = getPathLenght;
|