@cliquify.me/state 4.0.14 → 4.0.16
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/events.d.ts +1 -0
- package/dist/handlers/add/rect.d.ts +10 -0
- 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 +2687 -2628
- package/dist/index.umd.js +3 -3
- package/dist/state-options.d.ts +17 -0
- package/dist/state.d.ts +13 -8
- package/dist/utils/load-item.d.ts +205 -150
- 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, IShape, ISize, ITemplate, IText, ITrack, ITrackItem, ITrim, IVideo, IVideoDetails } from '@cliquify.me/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 '@cliquify.me/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,57 @@ 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;
|
|
292
|
+
};
|
|
293
|
+
metadata: Record<string, any>;
|
|
294
|
+
}>;
|
|
295
|
+
export declare const loadRectItem: (payload: ITrackItem & IRect, options: {
|
|
296
|
+
size?: {
|
|
297
|
+
width: number;
|
|
298
|
+
height: number;
|
|
299
|
+
};
|
|
300
|
+
scaleMode?: string;
|
|
301
|
+
scaleAspectRatio?: number;
|
|
302
|
+
}) => Promise<{
|
|
303
|
+
id: string;
|
|
304
|
+
name: string;
|
|
305
|
+
type: "rect";
|
|
306
|
+
display: IDisplay;
|
|
307
|
+
playbackRate: number;
|
|
308
|
+
details: {
|
|
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;
|
|
283
327
|
};
|
|
284
328
|
metadata: Record<string, any>;
|
|
285
329
|
}>;
|
|
@@ -298,24 +342,24 @@ export declare const loadImageItem: (payload: ITrackItem & IImage, options: {
|
|
|
298
342
|
display: IDisplay;
|
|
299
343
|
playbackRate: number;
|
|
300
344
|
details: {
|
|
301
|
-
src:
|
|
302
|
-
width:
|
|
303
|
-
height:
|
|
304
|
-
opacity:
|
|
305
|
-
transform:
|
|
306
|
-
border:
|
|
307
|
-
borderRadius:
|
|
308
|
-
boxShadow:
|
|
309
|
-
top:
|
|
310
|
-
left:
|
|
311
|
-
borderWidth:
|
|
312
|
-
borderColor:
|
|
313
|
-
blur:
|
|
314
|
-
brightness:
|
|
315
|
-
flipX:
|
|
316
|
-
flipY:
|
|
317
|
-
rotate:
|
|
318
|
-
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";
|
|
319
363
|
};
|
|
320
364
|
metadata: Record<string, any>;
|
|
321
365
|
}>;
|
|
@@ -372,6 +416,7 @@ export declare const loadCaptionItem: (trackItem: ITrackItem, options: {
|
|
|
372
416
|
WebkitTextStrokeWidth: string;
|
|
373
417
|
transform?: string | undefined;
|
|
374
418
|
borderRadius?: number | undefined;
|
|
419
|
+
animation?: string | undefined;
|
|
375
420
|
};
|
|
376
421
|
metadata: Record<string, any>;
|
|
377
422
|
}>;
|
|
@@ -387,14 +432,19 @@ export declare const loadTextItem: (payload: ITrackItem & IText, options: {
|
|
|
387
432
|
type: string;
|
|
388
433
|
display: IDisplay;
|
|
389
434
|
details: {
|
|
390
|
-
text:
|
|
435
|
+
text: string;
|
|
391
436
|
height: number;
|
|
392
|
-
fontUrl:
|
|
437
|
+
fontUrl: string;
|
|
393
438
|
top: string | number;
|
|
394
439
|
left: string | number;
|
|
395
|
-
borderWidth:
|
|
396
|
-
borderColor:
|
|
397
|
-
boxShadow:
|
|
440
|
+
borderWidth: number;
|
|
441
|
+
borderColor: string;
|
|
442
|
+
boxShadow: {
|
|
443
|
+
color: string;
|
|
444
|
+
x: number;
|
|
445
|
+
y: number;
|
|
446
|
+
blur: number;
|
|
447
|
+
};
|
|
398
448
|
skewX: number;
|
|
399
449
|
skewY: number;
|
|
400
450
|
fontSize: number;
|
|
@@ -462,8 +512,8 @@ export declare const loadTrackItem: (payload: ITrackItem & (IVideo | IAudio | II
|
|
|
462
512
|
trim: ITrim;
|
|
463
513
|
playbackRate: number;
|
|
464
514
|
details: {
|
|
465
|
-
src:
|
|
466
|
-
volume:
|
|
515
|
+
src: string;
|
|
516
|
+
volume: number;
|
|
467
517
|
};
|
|
468
518
|
metadata: {
|
|
469
519
|
[x: string]: any;
|
|
@@ -494,24 +544,24 @@ export declare const loadTrackItem: (payload: ITrackItem & (IVideo | IAudio | II
|
|
|
494
544
|
display: IDisplay;
|
|
495
545
|
playbackRate: number;
|
|
496
546
|
details: {
|
|
497
|
-
src:
|
|
498
|
-
width:
|
|
499
|
-
height:
|
|
500
|
-
opacity:
|
|
501
|
-
transform:
|
|
502
|
-
border:
|
|
503
|
-
borderRadius:
|
|
504
|
-
boxShadow:
|
|
505
|
-
top:
|
|
506
|
-
left:
|
|
507
|
-
borderWidth:
|
|
508
|
-
borderColor:
|
|
509
|
-
blur:
|
|
510
|
-
brightness:
|
|
511
|
-
flipX:
|
|
512
|
-
flipY:
|
|
513
|
-
rotate:
|
|
514
|
-
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";
|
|
515
565
|
};
|
|
516
566
|
metadata: Record<string, any>;
|
|
517
567
|
} | {
|
|
@@ -520,14 +570,19 @@ export declare const loadTrackItem: (payload: ITrackItem & (IVideo | IAudio | II
|
|
|
520
570
|
type: string;
|
|
521
571
|
display: IDisplay;
|
|
522
572
|
details: {
|
|
523
|
-
text:
|
|
573
|
+
text: string;
|
|
524
574
|
height: number;
|
|
525
|
-
fontUrl:
|
|
575
|
+
fontUrl: string;
|
|
526
576
|
top: string | number;
|
|
527
577
|
left: string | number;
|
|
528
|
-
borderWidth:
|
|
529
|
-
borderColor:
|
|
530
|
-
boxShadow:
|
|
578
|
+
borderWidth: number;
|
|
579
|
+
borderColor: string;
|
|
580
|
+
boxShadow: {
|
|
581
|
+
color: string;
|
|
582
|
+
x: number;
|
|
583
|
+
y: number;
|
|
584
|
+
blur: number;
|
|
585
|
+
};
|
|
531
586
|
skewX: number;
|
|
532
587
|
skewY: number;
|
|
533
588
|
fontSize: number;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { ITrackItem } from '@cliquify.me/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": "@cliquify.me/state",
|
|
3
|
-
"version": "4.0.
|
|
3
|
+
"version": "4.0.16",
|
|
4
4
|
"private": false,
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
"typescript": "5.4.5",
|
|
29
29
|
"vite": "^5.2.0",
|
|
30
30
|
"vite-plugin-dts": "^3.9.1",
|
|
31
|
-
"@cliquify.me/types": "4.0.
|
|
31
|
+
"@cliquify.me/types": "4.0.16",
|
|
32
32
|
"@cliquify.me/typescript-config": "0.0.2"
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
},
|
|
43
43
|
"peerDependencies": {
|
|
44
44
|
"@designcombo/events": "^1.0.2",
|
|
45
|
-
"@cliquify.me/types": "4.0.
|
|
45
|
+
"@cliquify.me/types": "4.0.16"
|
|
46
46
|
},
|
|
47
47
|
"scripts": {
|
|
48
48
|
"dev": "vite",
|