customized-fabric 1.9.7 → 1.9.8
Sign up to get free protection for your applications and to get access to all the features.
@@ -30,7 +30,16 @@ const CurvedTextClass = fabric_1.fabric.util.createClass(fabric_1.fabric.Group,
|
|
30
30
|
paintFirst: "stroke",
|
31
31
|
});
|
32
32
|
const group = new fabric_1.fabric.Group([this.rectObject, this.textObject]);
|
33
|
-
this.set(
|
33
|
+
this.set({
|
34
|
+
...group,
|
35
|
+
_id: new objectId_1.ObjectId().toString(),
|
36
|
+
name: constants_1.CURVED_TEXT_OBJECT_ATTRIBUTES.name,
|
37
|
+
type: constants_1.CURVED_TEXT_OBJECT_ATTRIBUTES.type,
|
38
|
+
...rest,
|
39
|
+
layerId: options?.personalizeId ?? options?.layerId,
|
40
|
+
objectCaching: false,
|
41
|
+
pathVisible: !(options?.isOriginal || options?.hideStroke),
|
42
|
+
});
|
34
43
|
this.on("scaling", () => {
|
35
44
|
let width = this.width * this.scaleX;
|
36
45
|
let height = this.height * this.scaleY;
|
@@ -43,17 +52,9 @@ const CurvedTextClass = fabric_1.fabric.util.createClass(fabric_1.fabric.Group,
|
|
43
52
|
this.set(attributes);
|
44
53
|
this.rectObject.set(attributes);
|
45
54
|
this.calculateTextPath(width, height);
|
55
|
+
this.autoChangeFontSize(0.1);
|
46
56
|
this.canvas?.renderAll?.();
|
47
57
|
});
|
48
|
-
this.set({
|
49
|
-
_id: new objectId_1.ObjectId().toString(),
|
50
|
-
name: constants_1.CURVED_TEXT_OBJECT_ATTRIBUTES.name,
|
51
|
-
type: constants_1.CURVED_TEXT_OBJECT_ATTRIBUTES.type,
|
52
|
-
...rest,
|
53
|
-
layerId: options?.personalizeId ?? options?.layerId,
|
54
|
-
objectCaching: false,
|
55
|
-
pathVisible: !(options?.isOriginal || options?.hideStroke),
|
56
|
-
});
|
57
58
|
if (options?.isOriginal) {
|
58
59
|
this.rectObject?.set({ strokeWidth: 0 });
|
59
60
|
}
|
@@ -66,30 +67,31 @@ const CurvedTextClass = fabric_1.fabric.util.createClass(fabric_1.fabric.Group,
|
|
66
67
|
this.fire("scaling");
|
67
68
|
},
|
68
69
|
autoChangeFontSize: function (changeSpeed) {
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
70
|
+
let { curvedWidth, fontSize = 0, maxFontSize } = this.textObject;
|
71
|
+
let maxLineWidth = Math.max(...this.textObject.__lineWidths);
|
72
|
+
fontSize = Number(fontSize);
|
73
|
+
while (curvedWidth <= maxLineWidth) {
|
74
|
+
fontSize -= changeSpeed;
|
75
|
+
this.textObject.set({
|
76
|
+
fontSize,
|
77
|
+
});
|
78
|
+
this.canvas?.renderAll?.();
|
79
|
+
maxLineWidth = Math.max(...this.textObject.__lineWidths);
|
76
80
|
}
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
}
|
81
|
+
while (maxFontSize > fontSize.toFixed(1) && curvedWidth > maxLineWidth) {
|
82
|
+
fontSize += changeSpeed;
|
83
|
+
this.textObject.set({
|
84
|
+
fontSize,
|
85
|
+
});
|
86
|
+
this.canvas?.renderAll?.();
|
87
|
+
maxLineWidth = Math.max(...this.textObject.__lineWidths);
|
85
88
|
}
|
86
89
|
},
|
87
90
|
setText: function (text) {
|
88
91
|
this.textObject.set({
|
89
92
|
text,
|
90
93
|
});
|
91
|
-
this.
|
92
|
-
this.autoChangeFontSize(0.1);
|
94
|
+
this.fire("scaling");
|
93
95
|
},
|
94
96
|
setPrefix: function (text) {
|
95
97
|
this.textObject.set({
|
@@ -110,34 +112,23 @@ const CurvedTextClass = fabric_1.fabric.util.createClass(fabric_1.fabric.Group,
|
|
110
112
|
this.getText();
|
111
113
|
},
|
112
114
|
getText: function () {
|
113
|
-
const { prefix = "", infix = "", suffix = "" } = this.textObject;
|
114
|
-
const isAllCapital = this.textObject.isAllCapital;
|
115
|
+
const { prefix = "", infix = "", suffix = "", isAllCapital, } = this.textObject;
|
115
116
|
const text = prefix + infix + suffix;
|
116
117
|
this.setText(infix?.length > 0 ? (isAllCapital ? text.toUpperCase() : text) : "");
|
117
118
|
},
|
118
119
|
setMaxFontSize: function (fontSize) {
|
119
120
|
this.textObject.set({
|
120
121
|
fontSize,
|
121
|
-
});
|
122
|
-
this.canvas?.renderAll?.();
|
123
|
-
if (this.textObject.__lineWidths < this.textObject.curvedWidth) {
|
124
|
-
}
|
125
|
-
else {
|
126
|
-
this.autoChangeFontSize(1);
|
127
|
-
}
|
128
|
-
this.textObject.set({
|
129
122
|
maxFontSize: fontSize,
|
130
123
|
});
|
131
|
-
this.
|
124
|
+
this.fire("scaling");
|
132
125
|
},
|
133
126
|
setFontFamily: async function (fontName, fontUrl) {
|
134
127
|
if (!(0, utils_1.isFontLoaded)(fontName)) {
|
135
128
|
await (0, utils_1.loadFontFromUrl)(fontUrl ?? "", fontName);
|
136
129
|
}
|
137
130
|
this.textObject.set({ fontFamily: fontName });
|
138
|
-
this.
|
139
|
-
this.autoChangeFontSize(0.1);
|
140
|
-
this.canvas?.renderAll?.();
|
131
|
+
this.fire("scaling");
|
141
132
|
},
|
142
133
|
setSizes: function (options) {
|
143
134
|
const { width, height } = options;
|
@@ -151,11 +142,11 @@ const CurvedTextClass = fabric_1.fabric.util.createClass(fabric_1.fabric.Group,
|
|
151
142
|
},
|
152
143
|
setTextAttributes: function (options) {
|
153
144
|
this.textObject.set(options);
|
154
|
-
this.
|
145
|
+
this.fire("scaling");
|
155
146
|
},
|
156
147
|
setTextWidth: function (width) {
|
157
148
|
this.textObject.set({ curvedWidth: width });
|
158
|
-
this.
|
149
|
+
this.fire("scaling");
|
159
150
|
},
|
160
151
|
getTextAttribute: function (attribute) {
|
161
152
|
return this.textObject.get(attribute);
|
@@ -167,11 +158,11 @@ const CurvedTextClass = fabric_1.fabric.util.createClass(fabric_1.fabric.Group,
|
|
167
158
|
return this.textObject.get(attribute);
|
168
159
|
},
|
169
160
|
calculateTextPath: function (width, height) {
|
170
|
-
const pathSide = this.textObject
|
161
|
+
const { pathSide, pathStartOffset } = this.textObject;
|
171
162
|
const textHeight = 0;
|
172
163
|
const rx = (width - textHeight) / 2;
|
173
164
|
const ry = (height - textHeight) / 2;
|
174
|
-
const path = new fabric_1.fabric.Path((0, svg_util_1.getEllipsePath)(rx, ry), {
|
165
|
+
const path = new fabric_1.fabric.Path((0, svg_util_1.getEllipsePath)(rx, ry, pathSide), {
|
175
166
|
fill: undefined,
|
176
167
|
stroke: "black",
|
177
168
|
objectCaching: false,
|
@@ -185,13 +176,9 @@ const CurvedTextClass = fabric_1.fabric.util.createClass(fabric_1.fabric.Group,
|
|
185
176
|
this.textObject.set({
|
186
177
|
path,
|
187
178
|
pathLength,
|
179
|
+
pathStartOffset,
|
188
180
|
});
|
189
|
-
|
190
|
-
if (position) {
|
191
|
-
this.textObject.set({
|
192
|
-
pathStartOffset: (position * pathLength) / 360,
|
193
|
-
});
|
194
|
-
}
|
181
|
+
this?.canvas?.renderAll();
|
195
182
|
},
|
196
183
|
});
|
197
184
|
const toCurvedTextObject = (object) => {
|
package/lib/utils/svg.util.d.ts
CHANGED
@@ -1,3 +1,3 @@
|
|
1
1
|
import { fabric } from "fabric";
|
2
|
-
export declare const getEllipsePath: (rx: number, ry: number) => string;
|
3
|
-
export declare const
|
2
|
+
export declare const getEllipsePath: (rx: number, ry: number, side?: "left" | "right") => string;
|
3
|
+
export declare const getPathLength: (path: fabric.Path) => any;
|
package/lib/utils/svg.util.js
CHANGED
@@ -1,18 +1,19 @@
|
|
1
1
|
"use strict";
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
3
|
-
exports.
|
3
|
+
exports.getPathLength = exports.getEllipsePath = void 0;
|
4
4
|
const fabric_1 = require("fabric");
|
5
|
-
const getEllipsePath = (rx, ry) => {
|
5
|
+
const getEllipsePath = (rx, ry, side = "left") => {
|
6
|
+
const sideFactor = side == "left" ? -1 : 1;
|
6
7
|
let output = `M 0,0`;
|
7
|
-
output += `a ${rx},${ry} 0 0,1 0,${ry *
|
8
|
+
output += `a ${rx},${ry} 0 0,1 0,${ry * 2 * sideFactor}`;
|
8
9
|
output += " ";
|
9
|
-
output += `a ${rx},${ry} 0 0,1 0,${ry * 2}`;
|
10
|
+
output += `a ${rx},${ry} 0 0,1 0,${ry * -2 * sideFactor}`;
|
10
11
|
return output;
|
11
12
|
};
|
12
13
|
exports.getEllipsePath = getEllipsePath;
|
13
|
-
const
|
14
|
+
const getPathLength = (path) => {
|
14
15
|
const pathInfo = fabric_1.fabric.util?.getPathSegmentsInfo?.(path.path);
|
15
16
|
const pathLength = pathInfo?.[(pathInfo?.length ?? 0) - 1]?.length;
|
16
17
|
return pathLength;
|
17
18
|
};
|
18
|
-
exports.
|
19
|
+
exports.getPathLength = getPathLength;
|