-
Notifications
You must be signed in to change notification settings - Fork 135
/
types.ts
110 lines (96 loc) · 2.35 KB
/
types.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
import { fabric } from "fabric";
export type EditorElementBase<T extends string, P> = {
readonly id: string;
fabricObject?: fabric.Object;
name: string;
readonly type: T;
placement: Placement;
timeFrame: TimeFrame;
properties: P;
};
export type VideoEditorElement = EditorElementBase<
"video",
{ src: string; elementId: string; imageObject?: fabric.Image, effect: Effect }
>;
export type ImageEditorElement = EditorElementBase<
"image",
{ src: string; elementId: string; imageObject?: fabric.Object, effect: Effect }
>;
export type AudioEditorElement = EditorElementBase<
"audio",
{ src: string; elementId: string }
>;
export type TextEditorElement = EditorElementBase<
"text",
{
text: string;
fontSize: number;
fontWeight: number;
splittedTexts: fabric.Text[];
}
>;
export type EditorElement =
| VideoEditorElement
| ImageEditorElement
| AudioEditorElement
| TextEditorElement;
export type Placement = {
x: number;
y: number;
width: number;
height: number;
rotation: number;
scaleX: number;
scaleY: number;
};
export type TimeFrame = {
start: number;
end: number;
};
export type EffectBase<T extends string> = {
type: T;
}
export type BlackAndWhiteEffect = EffectBase<"none"> |
EffectBase<"blackAndWhite"> |
EffectBase<"sepia"> |
EffectBase<"invert"> |
EffectBase<"saturate"> ;
export type Effect = BlackAndWhiteEffect;
export type EffecType = Effect["type"];
export type AnimationBase<T, P = {}> = {
id: string;
targetId: string;
duration: number;
type: T;
properties: P;
}
export type FadeInAnimation = AnimationBase<"fadeIn">;
export type FadeOutAnimation = AnimationBase<"fadeOut">;
export type BreatheAnimation = AnimationBase<"breathe">
export type SlideDirection = "left" | "right" | "top" | "bottom";
export type SlideTextType = 'none'|'character';
export type SlideInAnimation = AnimationBase<"slideIn", {
direction: SlideDirection,
useClipPath: boolean,
textType:'none'|'character'
}>;
export type SlideOutAnimation = AnimationBase<"slideOut", {
direction: SlideDirection,
useClipPath: boolean,
textType:SlideTextType,
}>;
export type Animation =
FadeInAnimation
| FadeOutAnimation
| SlideInAnimation
| SlideOutAnimation
| BreatheAnimation;
export type MenuOption =
| "Video"
| "Audio"
| "Text"
| "Image"
| "Export"
| "Animation"
| "Effect"
| "Fill";