customized-fabric 1.9.0 → 1.9.2
Sign up to get free protection for your applications and to get access to all the features.
- package/lib/GroupLayoutObject/constants.d.ts +4 -4
- package/lib/GroupLayoutObject/constants.js +7 -7
- package/lib/GroupLayoutObject/index.d.ts +19 -19
- package/lib/GroupLayoutObject/index.js +26 -26
- package/lib/GroupLayoutObject/interfaces.d.ts +3 -3
- package/lib/GroupLayoutObject/interfaces.js +2 -2
- package/lib/ImagePlaceholderObject/index.js +3 -2
- package/lib/TextInputObject/index.js +22 -50
- package/lib/constants/index.d.ts +6 -6
- package/lib/constants/index.js +12 -12
- package/package.json +25 -25
@@ -1,4 +1,4 @@
|
|
1
|
-
export declare const GROUP_LAYOUT_OBJECT_ATTRIBUTES: {
|
2
|
-
name: string;
|
3
|
-
type: string;
|
4
|
-
};
|
1
|
+
export declare const GROUP_LAYOUT_OBJECT_ATTRIBUTES: {
|
2
|
+
name: string;
|
3
|
+
type: string;
|
4
|
+
};
|
@@ -1,7 +1,7 @@
|
|
1
|
-
"use strict";
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
3
|
-
exports.GROUP_LAYOUT_OBJECT_ATTRIBUTES = void 0;
|
4
|
-
exports.GROUP_LAYOUT_OBJECT_ATTRIBUTES = {
|
5
|
-
name: "Group layout",
|
6
|
-
type: "GROUP_LAYOUT",
|
7
|
-
};
|
1
|
+
"use strict";
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
3
|
+
exports.GROUP_LAYOUT_OBJECT_ATTRIBUTES = void 0;
|
4
|
+
exports.GROUP_LAYOUT_OBJECT_ATTRIBUTES = {
|
5
|
+
name: "Group layout",
|
6
|
+
type: "GROUP_LAYOUT",
|
7
|
+
};
|
@@ -1,19 +1,19 @@
|
|
1
|
-
import { fabric } from "fabric";
|
2
|
-
import { ObjectId } from "../utils/objectId";
|
3
|
-
import { IGroupLayoutOptions } from "./interfaces";
|
4
|
-
export declare const toGroupLayoutObject: (groupLayoutObject: GroupLayout) => {
|
5
|
-
_id: ObjectId | undefined;
|
6
|
-
id: ObjectId | undefined;
|
7
|
-
personalizeId: number | undefined;
|
8
|
-
layerId: number | undefined;
|
9
|
-
name: string | undefined;
|
10
|
-
locked: boolean | undefined;
|
11
|
-
isAdditional: boolean | undefined;
|
12
|
-
};
|
13
|
-
export default class GroupLayout extends fabric.ActiveSelection {
|
14
|
-
_id?: ObjectId;
|
15
|
-
layerId?: number;
|
16
|
-
locked?: boolean;
|
17
|
-
isAdditional?: boolean;
|
18
|
-
constructor(options?: IGroupLayoutOptions);
|
19
|
-
}
|
1
|
+
import { fabric } from "fabric";
|
2
|
+
import { ObjectId } from "../utils/objectId";
|
3
|
+
import { IGroupLayoutOptions } from "./interfaces";
|
4
|
+
export declare const toGroupLayoutObject: (groupLayoutObject: GroupLayout) => {
|
5
|
+
_id: ObjectId | undefined;
|
6
|
+
id: ObjectId | undefined;
|
7
|
+
personalizeId: number | undefined;
|
8
|
+
layerId: number | undefined;
|
9
|
+
name: string | undefined;
|
10
|
+
locked: boolean | undefined;
|
11
|
+
isAdditional: boolean | undefined;
|
12
|
+
};
|
13
|
+
export default class GroupLayout extends fabric.ActiveSelection {
|
14
|
+
_id?: ObjectId;
|
15
|
+
layerId?: number;
|
16
|
+
locked?: boolean;
|
17
|
+
isAdditional?: boolean;
|
18
|
+
constructor(options?: IGroupLayoutOptions);
|
19
|
+
}
|
@@ -1,26 +1,26 @@
|
|
1
|
-
"use strict";
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
3
|
-
exports.toGroupLayoutObject = void 0;
|
4
|
-
const fabric_1 = require("fabric");
|
5
|
-
const GroupLayoutClass = fabric_1.fabric.util.createClass(fabric_1.fabric.ActiveSelection, {
|
6
|
-
initialize: async function (options) { },
|
7
|
-
});
|
8
|
-
const toGroupLayoutObject = (groupLayoutObject) => {
|
9
|
-
return {
|
10
|
-
_id: groupLayoutObject._id,
|
11
|
-
id: groupLayoutObject._id,
|
12
|
-
personalizeId: groupLayoutObject.layerId,
|
13
|
-
layerId: groupLayoutObject.layerId,
|
14
|
-
name: groupLayoutObject.name,
|
15
|
-
locked: groupLayoutObject.locked,
|
16
|
-
isAdditional: groupLayoutObject?.isAdditional,
|
17
|
-
};
|
18
|
-
};
|
19
|
-
exports.toGroupLayoutObject = toGroupLayoutObject;
|
20
|
-
class GroupLayout extends fabric_1.fabric.ActiveSelection {
|
21
|
-
constructor(options) {
|
22
|
-
super();
|
23
|
-
return new GroupLayoutClass(options);
|
24
|
-
}
|
25
|
-
}
|
26
|
-
exports.default = GroupLayout;
|
1
|
+
"use strict";
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
3
|
+
exports.toGroupLayoutObject = void 0;
|
4
|
+
const fabric_1 = require("fabric");
|
5
|
+
const GroupLayoutClass = fabric_1.fabric.util.createClass(fabric_1.fabric.ActiveSelection, {
|
6
|
+
initialize: async function (options) { },
|
7
|
+
});
|
8
|
+
const toGroupLayoutObject = (groupLayoutObject) => {
|
9
|
+
return {
|
10
|
+
_id: groupLayoutObject._id,
|
11
|
+
id: groupLayoutObject._id,
|
12
|
+
personalizeId: groupLayoutObject.layerId,
|
13
|
+
layerId: groupLayoutObject.layerId,
|
14
|
+
name: groupLayoutObject.name,
|
15
|
+
locked: groupLayoutObject.locked,
|
16
|
+
isAdditional: groupLayoutObject?.isAdditional,
|
17
|
+
};
|
18
|
+
};
|
19
|
+
exports.toGroupLayoutObject = toGroupLayoutObject;
|
20
|
+
class GroupLayout extends fabric_1.fabric.ActiveSelection {
|
21
|
+
constructor(options) {
|
22
|
+
super();
|
23
|
+
return new GroupLayoutClass(options);
|
24
|
+
}
|
25
|
+
}
|
26
|
+
exports.default = GroupLayout;
|
@@ -1,3 +1,3 @@
|
|
1
|
-
export interface IGroupLayoutOptions extends fabric.IObjectOptions {
|
2
|
-
objects?: fabric.Object[];
|
3
|
-
}
|
1
|
+
export interface IGroupLayoutOptions extends fabric.IObjectOptions {
|
2
|
+
objects?: fabric.Object[];
|
3
|
+
}
|
@@ -1,2 +1,2 @@
|
|
1
|
-
"use strict";
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
1
|
+
"use strict";
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
@@ -245,8 +245,9 @@ const ImagePlaceholderClass = fabric_1.fabric.util.createClass(fabric_1.fabric.G
|
|
245
245
|
loadCustomizedImage: async function (image) {
|
246
246
|
if (image) {
|
247
247
|
const { url, filteredUrl, data, clipPath } = image;
|
248
|
-
|
249
|
-
|
248
|
+
const imageUrl = filteredUrl ?? url;
|
249
|
+
if (imageUrl && data && clipPath) {
|
250
|
+
const loadedImage = await (0, utils_1.loadImageFromUrl)(imageUrl);
|
250
251
|
if (loadedImage) {
|
251
252
|
const mask = await this.getMask();
|
252
253
|
const { top, left, scaleX, width, angle, flipX, flipY, settings = {}, } = data;
|
@@ -45,9 +45,6 @@ const TextInputClass = fabric_1.fabric.util.createClass(fabric_1.fabric.Group, {
|
|
45
45
|
this.set(attributes);
|
46
46
|
this.rectObject.set(attributes);
|
47
47
|
this.autoChangeFontSize(0.1);
|
48
|
-
this.textObject.set({
|
49
|
-
width: width,
|
50
|
-
});
|
51
48
|
this.canvas?.renderAll?.();
|
52
49
|
});
|
53
50
|
this.set({
|
@@ -72,35 +69,30 @@ const TextInputClass = fabric_1.fabric.util.createClass(fabric_1.fabric.Group, {
|
|
72
69
|
},
|
73
70
|
autoChangeFontSize: function (changeSpeed) {
|
74
71
|
let maxLineWidth = Math.max(...this.textObject.__lineWidths);
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
72
|
+
let fontSize = this.textObject.fontSize;
|
73
|
+
while (this.width - fontSize / 4 < maxLineWidth ||
|
74
|
+
this.height < this.textObject.height) {
|
75
|
+
fontSize -= changeSpeed;
|
76
|
+
this.textObject.set({
|
77
|
+
fontSize,
|
78
|
+
});
|
79
|
+
maxLineWidth = Math.max(...this.textObject.__lineWidths);
|
83
80
|
}
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
|
90
|
-
|
91
|
-
|
92
|
-
}
|
81
|
+
while (this.textObject.maxFontSize > fontSize.toFixed(1) &&
|
82
|
+
this.width - fontSize / 4 > maxLineWidth &&
|
83
|
+
this.height > this.textObject.height) {
|
84
|
+
fontSize += changeSpeed;
|
85
|
+
this.textObject.set({
|
86
|
+
fontSize,
|
87
|
+
});
|
88
|
+
maxLineWidth = Math.max(...this.textObject.__lineWidths);
|
93
89
|
}
|
94
90
|
},
|
95
91
|
setText: function (text) {
|
96
92
|
this.textObject.set({
|
97
93
|
text,
|
98
94
|
});
|
99
|
-
this.
|
100
|
-
this.textObject.set({
|
101
|
-
width: this.width,
|
102
|
-
});
|
103
|
-
this.canvas?.renderAll?.();
|
95
|
+
this.fire("scaling");
|
104
96
|
},
|
105
97
|
setPrefix: function (text) {
|
106
98
|
this.textObject.set({
|
@@ -126,34 +118,17 @@ const TextInputClass = fabric_1.fabric.util.createClass(fabric_1.fabric.Group, {
|
|
126
118
|
const text = prefix + infix + suffix;
|
127
119
|
this.setText(infix?.length > 0 ? (isAllCapital ? text.toUpperCase() : text) : "");
|
128
120
|
},
|
129
|
-
setMaxFontSize: function (
|
130
|
-
|
131
|
-
|
132
|
-
|
133
|
-
const maxLineWidth = Math.max(...this.textObject.__lineWidths);
|
134
|
-
if (maxLineWidth < this.width && this.textObject.height < this.height) {
|
135
|
-
}
|
136
|
-
else {
|
137
|
-
this.autoChangeFontSize(1);
|
138
|
-
}
|
139
|
-
this.textObject.set({
|
140
|
-
width: this.width,
|
141
|
-
});
|
142
|
-
this.textObject.set({
|
143
|
-
maxFontSize: fontSize,
|
144
|
-
});
|
145
|
-
this.canvas?.renderAll?.();
|
121
|
+
setMaxFontSize: function (size) {
|
122
|
+
const fontSize = Number(size);
|
123
|
+
this.textObject.set({ fontSize, maxFontSize: fontSize });
|
124
|
+
this.fire("scaling");
|
146
125
|
},
|
147
126
|
setFontFamily: async function (fontName, fontUrl) {
|
148
127
|
if (!(0, utils_1.isFontLoaded)(fontName)) {
|
149
128
|
await (0, utils_1.loadFontFromUrl)(fontUrl ?? "", fontName);
|
150
129
|
}
|
151
130
|
this.textObject.set({ fontFamily: fontName });
|
152
|
-
this.
|
153
|
-
this.textObject.set({
|
154
|
-
width: this.width,
|
155
|
-
});
|
156
|
-
this.canvas?.renderAll?.();
|
131
|
+
this.fire("scaling");
|
157
132
|
},
|
158
133
|
setSizes: function (options) {
|
159
134
|
const { width, height } = options;
|
@@ -167,9 +142,6 @@ const TextInputClass = fabric_1.fabric.util.createClass(fabric_1.fabric.Group, {
|
|
167
142
|
},
|
168
143
|
setTextAttributes: function (options) {
|
169
144
|
this.textObject.set(options);
|
170
|
-
this.textObject.set({
|
171
|
-
width: this.width,
|
172
|
-
});
|
173
145
|
this.canvas?.renderAll?.();
|
174
146
|
},
|
175
147
|
getTextAttribute: function (attribute) {
|
package/lib/constants/index.d.ts
CHANGED
@@ -1,6 +1,6 @@
|
|
1
|
-
export declare const OBJECT_TYPES: {
|
2
|
-
textInput: string;
|
3
|
-
clipart: string;
|
4
|
-
imagePlaceHolder: string;
|
5
|
-
activeSelection: string;
|
6
|
-
};
|
1
|
+
export declare const OBJECT_TYPES: {
|
2
|
+
textInput: string;
|
3
|
+
clipart: string;
|
4
|
+
imagePlaceHolder: string;
|
5
|
+
activeSelection: string;
|
6
|
+
};
|
package/lib/constants/index.js
CHANGED
@@ -1,12 +1,12 @@
|
|
1
|
-
"use strict";
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
3
|
-
exports.OBJECT_TYPES = void 0;
|
4
|
-
const constants_1 = require("../ClipartObject/constants");
|
5
|
-
const constants_2 = require("../ImagePlaceholderObject/constants");
|
6
|
-
const constants_3 = require("../TextInputObject/constants");
|
7
|
-
exports.OBJECT_TYPES = {
|
8
|
-
textInput: constants_3.TEXT_INPUT_OBJECT_ATTRIBUTES.type,
|
9
|
-
clipart: constants_1.CLIPART_OBJECT_ATTRIBUTES.type,
|
10
|
-
imagePlaceHolder: constants_2.IMAGE_PLACEHOLDER_OBJECT_ATTRIBUTES.type,
|
11
|
-
activeSelection: "activeSelection",
|
12
|
-
};
|
1
|
+
"use strict";
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
3
|
+
exports.OBJECT_TYPES = void 0;
|
4
|
+
const constants_1 = require("../ClipartObject/constants");
|
5
|
+
const constants_2 = require("../ImagePlaceholderObject/constants");
|
6
|
+
const constants_3 = require("../TextInputObject/constants");
|
7
|
+
exports.OBJECT_TYPES = {
|
8
|
+
textInput: constants_3.TEXT_INPUT_OBJECT_ATTRIBUTES.type,
|
9
|
+
clipart: constants_1.CLIPART_OBJECT_ATTRIBUTES.type,
|
10
|
+
imagePlaceHolder: constants_2.IMAGE_PLACEHOLDER_OBJECT_ATTRIBUTES.type,
|
11
|
+
activeSelection: "activeSelection",
|
12
|
+
};
|
package/package.json
CHANGED
@@ -1,25 +1,25 @@
|
|
1
|
-
{
|
2
|
-
"name": "customized-fabric",
|
3
|
-
"version": "1.9.
|
4
|
-
"description": "Customized fabric",
|
5
|
-
"main": "lib/index.js",
|
6
|
-
"types": "lib/index.d.ts",
|
7
|
-
"files": [
|
8
|
-
"lib"
|
9
|
-
],
|
10
|
-
"scripts": {
|
11
|
-
"test": "echo \"Error: no test specified\" && exit 1",
|
12
|
-
"build": "tsc",
|
13
|
-
"prepare": "npm run build"
|
14
|
-
},
|
15
|
-
"author": "",
|
16
|
-
"license": "ISC",
|
17
|
-
"dependencies": {
|
18
|
-
"@types/node": "^20.6.0",
|
19
|
-
"fabric": "^5.3.0"
|
20
|
-
},
|
21
|
-
"devDependencies": {
|
22
|
-
"@types/fabric": "^5.3.3",
|
23
|
-
"typescript": "^5.2.2"
|
24
|
-
}
|
25
|
-
}
|
1
|
+
{
|
2
|
+
"name": "customized-fabric",
|
3
|
+
"version": "1.9.2",
|
4
|
+
"description": "Customized fabric",
|
5
|
+
"main": "lib/index.js",
|
6
|
+
"types": "lib/index.d.ts",
|
7
|
+
"files": [
|
8
|
+
"lib"
|
9
|
+
],
|
10
|
+
"scripts": {
|
11
|
+
"test": "echo \"Error: no test specified\" && exit 1",
|
12
|
+
"build": "tsc",
|
13
|
+
"prepare": "npm run build"
|
14
|
+
},
|
15
|
+
"author": "",
|
16
|
+
"license": "ISC",
|
17
|
+
"dependencies": {
|
18
|
+
"@types/node": "^20.6.0",
|
19
|
+
"fabric": "^5.3.0"
|
20
|
+
},
|
21
|
+
"devDependencies": {
|
22
|
+
"@types/fabric": "^5.3.3",
|
23
|
+
"typescript": "^5.2.2"
|
24
|
+
}
|
25
|
+
}
|