@designcombo/state 5.0.4 → 5.1.0
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.
- package/dist/handlers/replace-layer.d.ts +2 -2
- package/dist/handlers/replace-media.d.ts +2 -2
- package/dist/index.d.ts +1 -0
- package/dist/index.es.js +2555 -2577
- package/dist/index.umd.js +3 -3
- package/dist/state-options.d.ts +2 -0
- package/dist/state.d.ts +13 -14
- package/dist/utils/load-item.d.ts +188 -168
- package/dist/utils/replace-item.d.ts +2 -2
- package/package.json +3 -3
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { IAudio, ICaption, IComposition, IDisplay, IIllustration, IImage, ILinealAudioBars, IProgressBar, IProgressFrame, IRadialAudioBars, IRect, IShape, ISize, ITemplate, IText, ITrack, ITrackItem, ITrim, IVideo, IVideoDetails } from '@designcombo/types';
|
|
1
|
+
import { IAudio, IBoxShadow, ICaption, IComposition, IDisplay, IIllustration, IImage, ILinealAudioBars, IProgressBar, IProgressFrame, IRadialAudioBars, IRect, IShape, ISize, ITemplate, IText, ITrack, ITrackItem, ITrim, IVideo, IVideoDetails } from '@designcombo/types';
|
|
2
2
|
|
|
3
3
|
type OptionsType = {
|
|
4
4
|
size: {
|
|
@@ -9,6 +9,15 @@ type OptionsType = {
|
|
|
9
9
|
scaleMode?: string;
|
|
10
10
|
scaleAspectRatio?: number;
|
|
11
11
|
};
|
|
12
|
+
type TargetSize = {
|
|
13
|
+
width: number;
|
|
14
|
+
height: number;
|
|
15
|
+
};
|
|
16
|
+
export declare function getTextPosition(options: Partial<OptionsType>, info: TargetSize): {
|
|
17
|
+
top: string;
|
|
18
|
+
left: string;
|
|
19
|
+
transform: string;
|
|
20
|
+
};
|
|
12
21
|
export declare const loadVideoItem: (layer: ITrackItem & IVideo, options: Partial<OptionsType>) => Promise<{
|
|
13
22
|
trim: ITrim;
|
|
14
23
|
type: string;
|
|
@@ -42,8 +51,8 @@ export declare const loadAudioItem: (payload: ITrackItem & IAudio) => Promise<{
|
|
|
42
51
|
trim: ITrim;
|
|
43
52
|
playbackRate: number;
|
|
44
53
|
details: {
|
|
45
|
-
src:
|
|
46
|
-
volume:
|
|
54
|
+
src: string;
|
|
55
|
+
volume: number;
|
|
47
56
|
};
|
|
48
57
|
metadata: {
|
|
49
58
|
[x: string]: any;
|
|
@@ -60,19 +69,19 @@ export declare const loadProgressBarItem: (payload: ITrackItem & IProgressBar, o
|
|
|
60
69
|
type: "progressBar";
|
|
61
70
|
display: IDisplay;
|
|
62
71
|
details: {
|
|
63
|
-
width:
|
|
64
|
-
height:
|
|
65
|
-
top:
|
|
66
|
-
left:
|
|
67
|
-
border:
|
|
68
|
-
borderRadius:
|
|
69
|
-
borderWidth:
|
|
70
|
-
borderColor:
|
|
71
|
-
opacity:
|
|
72
|
-
flipX:
|
|
73
|
-
flipY:
|
|
74
|
-
inverted:
|
|
75
|
-
backgroundColors:
|
|
72
|
+
width: number;
|
|
73
|
+
height: number;
|
|
74
|
+
top: string;
|
|
75
|
+
left: string;
|
|
76
|
+
border: string;
|
|
77
|
+
borderRadius: number;
|
|
78
|
+
borderWidth: number;
|
|
79
|
+
borderColor: string;
|
|
80
|
+
opacity: number;
|
|
81
|
+
flipX: boolean;
|
|
82
|
+
flipY: boolean;
|
|
83
|
+
inverted: boolean;
|
|
84
|
+
backgroundColors: string[];
|
|
76
85
|
};
|
|
77
86
|
metadata: {};
|
|
78
87
|
}>;
|
|
@@ -86,20 +95,20 @@ export declare const loadProgressFrameItem: (payload: ITrackItem & IProgressFram
|
|
|
86
95
|
type: "progressFrame";
|
|
87
96
|
display: IDisplay;
|
|
88
97
|
details: {
|
|
89
|
-
width:
|
|
90
|
-
height:
|
|
91
|
-
top:
|
|
92
|
-
left:
|
|
93
|
-
border:
|
|
94
|
-
borderRadius:
|
|
95
|
-
borderWidth:
|
|
96
|
-
borderColor:
|
|
97
|
-
opacity:
|
|
98
|
-
flipX:
|
|
99
|
-
flipY:
|
|
100
|
-
inverted:
|
|
101
|
-
backgroundColors:
|
|
102
|
-
barThickness:
|
|
98
|
+
width: number;
|
|
99
|
+
height: number;
|
|
100
|
+
top: string;
|
|
101
|
+
left: string;
|
|
102
|
+
border: string;
|
|
103
|
+
borderRadius: number;
|
|
104
|
+
borderWidth: number;
|
|
105
|
+
borderColor: string;
|
|
106
|
+
opacity: number;
|
|
107
|
+
flipX: boolean;
|
|
108
|
+
flipY: boolean;
|
|
109
|
+
inverted: boolean;
|
|
110
|
+
backgroundColors: string[];
|
|
111
|
+
barThickness: number;
|
|
103
112
|
};
|
|
104
113
|
metadata: {};
|
|
105
114
|
}>;
|
|
@@ -113,18 +122,18 @@ export declare const loadRadialAudioBarsItem: (payload: ITrackItem & IRadialAudi
|
|
|
113
122
|
type: "radialAudioBars";
|
|
114
123
|
display: IDisplay;
|
|
115
124
|
details: {
|
|
116
|
-
width:
|
|
117
|
-
height:
|
|
118
|
-
top:
|
|
119
|
-
left:
|
|
120
|
-
radialBarColor:
|
|
121
|
-
border:
|
|
122
|
-
borderRadius:
|
|
123
|
-
borderWidth:
|
|
124
|
-
borderColor:
|
|
125
|
-
opacity:
|
|
126
|
-
flipX:
|
|
127
|
-
flipY:
|
|
125
|
+
width: number;
|
|
126
|
+
height: number;
|
|
127
|
+
top: string;
|
|
128
|
+
left: string;
|
|
129
|
+
radialBarColor: string;
|
|
130
|
+
border: string;
|
|
131
|
+
borderRadius: number;
|
|
132
|
+
borderWidth: number;
|
|
133
|
+
borderColor: string;
|
|
134
|
+
opacity: number;
|
|
135
|
+
flipX: boolean;
|
|
136
|
+
flipY: boolean;
|
|
128
137
|
};
|
|
129
138
|
metadata: {};
|
|
130
139
|
}>;
|
|
@@ -141,34 +150,34 @@ export declare const loadLinealAudioBarsItem: (payload: ITrackItem & ILinealAudi
|
|
|
141
150
|
to: number;
|
|
142
151
|
};
|
|
143
152
|
details: {
|
|
144
|
-
width:
|
|
145
|
-
height:
|
|
146
|
-
top:
|
|
147
|
-
left:
|
|
148
|
-
border:
|
|
149
|
-
borderRadius:
|
|
150
|
-
borderWidth:
|
|
151
|
-
borderColor:
|
|
152
|
-
opacity:
|
|
153
|
-
flipX:
|
|
154
|
-
flipY:
|
|
155
|
-
inverted:
|
|
156
|
-
linealBarColor:
|
|
157
|
-
lineThickness:
|
|
158
|
-
gapSize:
|
|
159
|
-
roundness:
|
|
160
|
-
placement:
|
|
161
|
-
strokeColor:
|
|
162
|
-
fillColor:
|
|
163
|
-
strokeWidth:
|
|
164
|
-
copies:
|
|
165
|
-
offsetPixelSpeed:
|
|
166
|
-
lineColor:
|
|
167
|
-
lineGap:
|
|
168
|
-
topRoundness:
|
|
169
|
-
bottomRoundness:
|
|
170
|
-
lines:
|
|
171
|
-
sections:
|
|
153
|
+
width: number;
|
|
154
|
+
height: number;
|
|
155
|
+
top: string;
|
|
156
|
+
left: string;
|
|
157
|
+
border: string;
|
|
158
|
+
borderRadius: number;
|
|
159
|
+
borderWidth: number;
|
|
160
|
+
borderColor: string;
|
|
161
|
+
opacity: number;
|
|
162
|
+
flipX: boolean;
|
|
163
|
+
flipY: boolean;
|
|
164
|
+
inverted: boolean;
|
|
165
|
+
linealBarColor: string;
|
|
166
|
+
lineThickness: number;
|
|
167
|
+
gapSize: number;
|
|
168
|
+
roundness: number;
|
|
169
|
+
placement: string | null;
|
|
170
|
+
strokeColor: string;
|
|
171
|
+
fillColor: string | null;
|
|
172
|
+
strokeWidth: number | null;
|
|
173
|
+
copies: number | null;
|
|
174
|
+
offsetPixelSpeed: number;
|
|
175
|
+
lineColor: string | string[];
|
|
176
|
+
lineGap: number;
|
|
177
|
+
topRoundness: number;
|
|
178
|
+
bottomRoundness: number;
|
|
179
|
+
lines: number;
|
|
180
|
+
sections: number;
|
|
172
181
|
};
|
|
173
182
|
metadata: {};
|
|
174
183
|
}>;
|
|
@@ -229,24 +238,24 @@ export declare const loadIllustrationItem: (payload: ITrackItem & IIllustration,
|
|
|
229
238
|
display: IDisplay;
|
|
230
239
|
playbackRate: number;
|
|
231
240
|
details: {
|
|
232
|
-
src:
|
|
233
|
-
width:
|
|
234
|
-
height:
|
|
235
|
-
opacity:
|
|
236
|
-
transform:
|
|
237
|
-
border:
|
|
238
|
-
borderRadius:
|
|
239
|
-
top:
|
|
240
|
-
left:
|
|
241
|
-
borderWidth:
|
|
242
|
-
borderColor:
|
|
243
|
-
flipX:
|
|
244
|
-
flipY:
|
|
245
|
-
rotate:
|
|
246
|
-
visibility:
|
|
241
|
+
src: string;
|
|
242
|
+
width: number;
|
|
243
|
+
height: number;
|
|
244
|
+
opacity: number;
|
|
245
|
+
transform: string;
|
|
246
|
+
border: string;
|
|
247
|
+
borderRadius: number;
|
|
248
|
+
top: string;
|
|
249
|
+
left: string;
|
|
250
|
+
borderWidth: number;
|
|
251
|
+
borderColor: string;
|
|
252
|
+
flipX: boolean;
|
|
253
|
+
flipY: boolean;
|
|
254
|
+
rotate: string;
|
|
255
|
+
visibility: "hidden" | "visible";
|
|
247
256
|
svgString: string;
|
|
248
257
|
initialSvgString: string;
|
|
249
|
-
colorMap:
|
|
258
|
+
colorMap: Record<string, string>;
|
|
250
259
|
};
|
|
251
260
|
metadata: Record<string, any>;
|
|
252
261
|
}>;
|
|
@@ -264,22 +273,22 @@ export declare const loadShapeItem: (payload: ITrackItem & IShape, options: {
|
|
|
264
273
|
display: IDisplay;
|
|
265
274
|
playbackRate: number;
|
|
266
275
|
details: {
|
|
267
|
-
src:
|
|
268
|
-
width:
|
|
269
|
-
height:
|
|
270
|
-
opacity:
|
|
271
|
-
transform:
|
|
272
|
-
border:
|
|
273
|
-
borderRadius:
|
|
274
|
-
top:
|
|
275
|
-
left:
|
|
276
|
-
borderWidth:
|
|
277
|
-
borderColor:
|
|
278
|
-
flipX:
|
|
279
|
-
flipY:
|
|
280
|
-
rotate:
|
|
281
|
-
visibility:
|
|
282
|
-
backgroundColor:
|
|
276
|
+
src: string;
|
|
277
|
+
width: number;
|
|
278
|
+
height: number;
|
|
279
|
+
opacity: number;
|
|
280
|
+
transform: string;
|
|
281
|
+
border: string;
|
|
282
|
+
borderRadius: number;
|
|
283
|
+
top: string;
|
|
284
|
+
left: string;
|
|
285
|
+
borderWidth: number;
|
|
286
|
+
borderColor: string;
|
|
287
|
+
flipX: boolean;
|
|
288
|
+
flipY: boolean;
|
|
289
|
+
rotate: string;
|
|
290
|
+
visibility: "hidden" | "visible";
|
|
291
|
+
backgroundColor: string;
|
|
283
292
|
};
|
|
284
293
|
metadata: Record<string, any>;
|
|
285
294
|
}>;
|
|
@@ -297,24 +306,24 @@ export declare const loadRectItem: (payload: ITrackItem & IRect, options: {
|
|
|
297
306
|
display: IDisplay;
|
|
298
307
|
playbackRate: number;
|
|
299
308
|
details: {
|
|
300
|
-
width:
|
|
301
|
-
height:
|
|
302
|
-
opacity:
|
|
303
|
-
transform:
|
|
304
|
-
border:
|
|
305
|
-
borderRadius:
|
|
306
|
-
top:
|
|
307
|
-
left:
|
|
308
|
-
borderWidth:
|
|
309
|
-
borderColor:
|
|
310
|
-
flipX:
|
|
311
|
-
flipY:
|
|
312
|
-
rotate:
|
|
313
|
-
visibility:
|
|
314
|
-
backgroundColor:
|
|
315
|
-
boxShadow:
|
|
316
|
-
blur:
|
|
317
|
-
brightness:
|
|
309
|
+
width: number;
|
|
310
|
+
height: number;
|
|
311
|
+
opacity: number;
|
|
312
|
+
transform: string;
|
|
313
|
+
border: string;
|
|
314
|
+
borderRadius: number;
|
|
315
|
+
top: string;
|
|
316
|
+
left: string;
|
|
317
|
+
borderWidth: number;
|
|
318
|
+
borderColor: string;
|
|
319
|
+
flipX: boolean;
|
|
320
|
+
flipY: boolean;
|
|
321
|
+
rotate: string;
|
|
322
|
+
visibility: "hidden" | "visible";
|
|
323
|
+
backgroundColor: string;
|
|
324
|
+
boxShadow: IBoxShadow;
|
|
325
|
+
blur: number;
|
|
326
|
+
brightness: number;
|
|
318
327
|
};
|
|
319
328
|
metadata: Record<string, any>;
|
|
320
329
|
}>;
|
|
@@ -333,24 +342,24 @@ export declare const loadImageItem: (payload: ITrackItem & IImage, options: {
|
|
|
333
342
|
display: IDisplay;
|
|
334
343
|
playbackRate: number;
|
|
335
344
|
details: {
|
|
336
|
-
src:
|
|
337
|
-
width:
|
|
338
|
-
height:
|
|
339
|
-
opacity:
|
|
340
|
-
transform:
|
|
341
|
-
border:
|
|
342
|
-
borderRadius:
|
|
343
|
-
boxShadow:
|
|
344
|
-
top:
|
|
345
|
-
left:
|
|
346
|
-
borderWidth:
|
|
347
|
-
borderColor:
|
|
348
|
-
blur:
|
|
349
|
-
brightness:
|
|
350
|
-
flipX:
|
|
351
|
-
flipY:
|
|
352
|
-
rotate:
|
|
353
|
-
visibility:
|
|
345
|
+
src: string;
|
|
346
|
+
width: number;
|
|
347
|
+
height: number;
|
|
348
|
+
opacity: number;
|
|
349
|
+
transform: string;
|
|
350
|
+
border: string;
|
|
351
|
+
borderRadius: number;
|
|
352
|
+
boxShadow: IBoxShadow;
|
|
353
|
+
top: string;
|
|
354
|
+
left: string;
|
|
355
|
+
borderWidth: number;
|
|
356
|
+
borderColor: string;
|
|
357
|
+
blur: number;
|
|
358
|
+
brightness: number;
|
|
359
|
+
flipX: boolean;
|
|
360
|
+
flipY: boolean;
|
|
361
|
+
rotate: string;
|
|
362
|
+
visibility: "hidden" | "visible";
|
|
354
363
|
};
|
|
355
364
|
metadata: Record<string, any>;
|
|
356
365
|
}>;
|
|
@@ -407,6 +416,7 @@ export declare const loadCaptionItem: (trackItem: ITrackItem, options: {
|
|
|
407
416
|
WebkitTextStrokeWidth: string;
|
|
408
417
|
transform?: string;
|
|
409
418
|
borderRadius?: number;
|
|
419
|
+
animation?: string;
|
|
410
420
|
};
|
|
411
421
|
metadata: Record<string, any>;
|
|
412
422
|
}>;
|
|
@@ -422,14 +432,19 @@ export declare const loadTextItem: (payload: ITrackItem & IText, options: {
|
|
|
422
432
|
type: string;
|
|
423
433
|
display: IDisplay;
|
|
424
434
|
details: {
|
|
425
|
-
text:
|
|
435
|
+
text: string;
|
|
426
436
|
height: number;
|
|
427
|
-
fontUrl:
|
|
437
|
+
fontUrl: string;
|
|
428
438
|
top: string | number;
|
|
429
439
|
left: string | number;
|
|
430
|
-
borderWidth:
|
|
431
|
-
borderColor:
|
|
432
|
-
boxShadow:
|
|
440
|
+
borderWidth: number;
|
|
441
|
+
borderColor: string;
|
|
442
|
+
boxShadow: {
|
|
443
|
+
color: string;
|
|
444
|
+
x: number;
|
|
445
|
+
y: number;
|
|
446
|
+
blur: number;
|
|
447
|
+
};
|
|
433
448
|
skewX: number;
|
|
434
449
|
skewY: number;
|
|
435
450
|
fontSize: number;
|
|
@@ -497,8 +512,8 @@ export declare const loadTrackItem: (payload: ITrackItem & (IVideo | IAudio | II
|
|
|
497
512
|
trim: ITrim;
|
|
498
513
|
playbackRate: number;
|
|
499
514
|
details: {
|
|
500
|
-
src:
|
|
501
|
-
volume:
|
|
515
|
+
src: string;
|
|
516
|
+
volume: number;
|
|
502
517
|
};
|
|
503
518
|
metadata: {
|
|
504
519
|
[x: string]: any;
|
|
@@ -529,24 +544,24 @@ export declare const loadTrackItem: (payload: ITrackItem & (IVideo | IAudio | II
|
|
|
529
544
|
display: IDisplay;
|
|
530
545
|
playbackRate: number;
|
|
531
546
|
details: {
|
|
532
|
-
src:
|
|
533
|
-
width:
|
|
534
|
-
height:
|
|
535
|
-
opacity:
|
|
536
|
-
transform:
|
|
537
|
-
border:
|
|
538
|
-
borderRadius:
|
|
539
|
-
boxShadow:
|
|
540
|
-
top:
|
|
541
|
-
left:
|
|
542
|
-
borderWidth:
|
|
543
|
-
borderColor:
|
|
544
|
-
blur:
|
|
545
|
-
brightness:
|
|
546
|
-
flipX:
|
|
547
|
-
flipY:
|
|
548
|
-
rotate:
|
|
549
|
-
visibility:
|
|
547
|
+
src: string;
|
|
548
|
+
width: number;
|
|
549
|
+
height: number;
|
|
550
|
+
opacity: number;
|
|
551
|
+
transform: string;
|
|
552
|
+
border: string;
|
|
553
|
+
borderRadius: number;
|
|
554
|
+
boxShadow: IBoxShadow;
|
|
555
|
+
top: string;
|
|
556
|
+
left: string;
|
|
557
|
+
borderWidth: number;
|
|
558
|
+
borderColor: string;
|
|
559
|
+
blur: number;
|
|
560
|
+
brightness: number;
|
|
561
|
+
flipX: boolean;
|
|
562
|
+
flipY: boolean;
|
|
563
|
+
rotate: string;
|
|
564
|
+
visibility: "hidden" | "visible";
|
|
550
565
|
};
|
|
551
566
|
metadata: Record<string, any>;
|
|
552
567
|
} | {
|
|
@@ -555,14 +570,19 @@ export declare const loadTrackItem: (payload: ITrackItem & (IVideo | IAudio | II
|
|
|
555
570
|
type: string;
|
|
556
571
|
display: IDisplay;
|
|
557
572
|
details: {
|
|
558
|
-
text:
|
|
573
|
+
text: string;
|
|
559
574
|
height: number;
|
|
560
|
-
fontUrl:
|
|
575
|
+
fontUrl: string;
|
|
561
576
|
top: string | number;
|
|
562
577
|
left: string | number;
|
|
563
|
-
borderWidth:
|
|
564
|
-
borderColor:
|
|
565
|
-
boxShadow:
|
|
578
|
+
borderWidth: number;
|
|
579
|
+
borderColor: string;
|
|
580
|
+
boxShadow: {
|
|
581
|
+
color: string;
|
|
582
|
+
x: number;
|
|
583
|
+
y: number;
|
|
584
|
+
blur: number;
|
|
585
|
+
};
|
|
566
586
|
skewX: number;
|
|
567
587
|
skewY: number;
|
|
568
588
|
fontSize: number;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { ITrackItem } from '@designcombo/types';
|
|
2
2
|
|
|
3
|
-
export declare const getDimension: (item:
|
|
3
|
+
export declare const getDimension: (item: ITrackItem, info: {
|
|
4
4
|
width: number;
|
|
5
5
|
height: number;
|
|
6
6
|
}) => {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@designcombo/state",
|
|
3
|
-
"version": "5.0
|
|
3
|
+
"version": "5.1.0",
|
|
4
4
|
"private": false,
|
|
5
5
|
"files": [
|
|
6
6
|
"dist"
|
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
"typescript": "^5.3.3",
|
|
26
26
|
"vite": "^5.2.0",
|
|
27
27
|
"vite-plugin-dts": "^3.9.1",
|
|
28
|
-
"@designcombo/types": "5.0
|
|
28
|
+
"@designcombo/types": "5.1.0",
|
|
29
29
|
"@designcombo/typescript-config": "0.0.0"
|
|
30
30
|
},
|
|
31
31
|
"dependencies": {
|
|
@@ -39,7 +39,7 @@
|
|
|
39
39
|
},
|
|
40
40
|
"peerDependencies": {
|
|
41
41
|
"@designcombo/events": "^1.0.2",
|
|
42
|
-
"@designcombo/types": "5.0
|
|
42
|
+
"@designcombo/types": "5.1.0"
|
|
43
43
|
},
|
|
44
44
|
"scripts": {
|
|
45
45
|
"dev": "vite",
|