@vnejs/contracts.views.scenario.interface 0.2.0 → 0.2.1

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.
Files changed (4) hide show
  1. package/dist/params.d.ts +130 -78
  2. package/dist/params.js +29 -19
  3. package/package.json +2 -1
  4. package/src/params.ts +32 -19
package/dist/params.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ import type { BackdropProps } from "@vnejs/uis.react.backdrop";
1
2
  import type { PositionBoxProps, WidenViewProps } from "@vnejs/uis.react.position-box";
2
3
  export declare const DEFAULT_VIEW: string;
3
4
  export declare const LOC_LABEL: string;
@@ -5,20 +6,7 @@ export declare const TRANSITION: number;
5
6
  export declare const ZINDEX: number;
6
7
  declare const VIEW_PROPS_DEFAULT: {
7
8
  readonly adv: {
8
- readonly backdrop: {
9
- readonly props: {
10
- type: "bottom";
11
- size: number;
12
- transition: number;
13
- opacity: number;
14
- };
15
- readonly flatPosition: PositionBoxProps;
16
- readonly flatStyle: {
17
- background: string;
18
- borderRadius: string | number;
19
- transition: string;
20
- };
21
- };
9
+ readonly backdrop: BackdropProps;
22
10
  readonly position: PositionBoxProps;
23
11
  readonly flex: {
24
12
  readonly direction: "column";
@@ -34,20 +22,7 @@ declare const VIEW_PROPS_DEFAULT: {
34
22
  };
35
23
  };
36
24
  readonly wall: {
37
- readonly backdrop: {
38
- readonly props: {
39
- type: "bottom";
40
- size: number;
41
- transition: number;
42
- opacity: number;
43
- };
44
- readonly flatPosition: PositionBoxProps;
45
- readonly flatStyle: {
46
- background: string;
47
- borderRadius: string | number;
48
- transition: string;
49
- };
50
- };
25
+ readonly backdrop: BackdropProps;
51
26
  readonly position: PositionBoxProps;
52
27
  readonly flex: {
53
28
  readonly direction: "column";
@@ -68,20 +43,7 @@ declare const VIEW_PROPS_DEFAULT: {
68
43
  };
69
44
  };
70
45
  readonly line: {
71
- readonly backdrop: {
72
- readonly props: {
73
- type: "bottom";
74
- size: number;
75
- transition: number;
76
- opacity: number;
77
- };
78
- readonly flatPosition: PositionBoxProps;
79
- readonly flatStyle: {
80
- background: string;
81
- borderRadius: string | number;
82
- transition: string;
83
- };
84
- };
46
+ readonly backdrop: BackdropProps;
85
47
  readonly position: PositionBoxProps;
86
48
  readonly flex: {
87
49
  readonly direction: "column";
@@ -108,18 +70,48 @@ declare const PARAMS_DEFAULT: {
108
70
  VIEW_PROPS: {
109
71
  adv: {
110
72
  backdrop: {
111
- props: {
112
- type: "bottom";
113
- size: number;
114
- transition: number;
115
- opacity: number;
116
- };
117
- flatPosition: PositionBoxProps<unknown>;
118
- flatStyle: {
119
- background: string;
120
- borderRadius: string | number;
121
- transition: string;
122
- };
73
+ zIndex?: import("@vnejs/uis.utils").CssInsertValueNumber;
74
+ transition?: import("@vnejs/uis.utils").CssInsertValueNumber;
75
+ type?: import("@vnejs/uis.react.backdrop").BackdropTypeValue | "";
76
+ opacity?: import("@vnejs/uis.utils").CssInsertValueNumber;
77
+ color1?: import("@vnejs/uis.utils").CssInsertValueString;
78
+ color2?: import("@vnejs/uis.utils").CssInsertValueString;
79
+ stop1?: import("@vnejs/uis.utils").CssInsertValueNumber;
80
+ stop2?: import("@vnejs/uis.utils").CssInsertValueNumber;
81
+ scaleX?: import("@vnejs/uis.utils").CssInsertValueNumber;
82
+ scaleY?: import("@vnejs/uis.utils").CssInsertValueNumber;
83
+ translateX?: import("@vnejs/uis.utils").CssInsertValue;
84
+ translateY?: import("@vnejs/uis.utils").CssInsertValue;
85
+ borderRadius?: import("@vnejs/uis.utils").CssInsertValue;
86
+ className?: string;
87
+ children?: string | number | bigint | boolean | {
88
+ [Symbol.iterator]: () => Iterator<import("react").ReactNode, any, any>;
89
+ } | {
90
+ then: (onfulfilled?: ((value: string | number | bigint | boolean | Iterable<import("react").ReactNode> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | null | undefined) => unknown) | null | undefined, onrejected?: ((reason: any) => unknown) | null | undefined) => Promise<unknown>;
91
+ catch: (onrejected?: ((reason: any) => unknown) | null | undefined) => Promise<unknown>;
92
+ [Symbol.toStringTag]: string;
93
+ finally: (onfinally?: (() => void) | null | undefined) => Promise<string | number | bigint | boolean | Iterable<import("react").ReactNode> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | null | undefined>;
94
+ } | {
95
+ type: string | ((props: any) => Promise<import("react").ReactNode> | import("react").ReactNode) | {};
96
+ props: unknown;
97
+ key: string | null;
98
+ } | {
99
+ type: string | ((props: any) => Promise<import("react").ReactNode> | import("react").ReactNode) | {};
100
+ props: unknown;
101
+ key: string | null;
102
+ children: string | number | bigint | boolean | {
103
+ [Symbol.iterator]: () => Iterator<import("react").ReactNode, any, any>;
104
+ } | {
105
+ then: (onfulfilled?: ((value: string | number | bigint | boolean | Iterable<import("react").ReactNode> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | null | undefined) => unknown) | null | undefined, onrejected?: ((reason: any) => unknown) | null | undefined) => Promise<unknown>;
106
+ catch: (onrejected?: ((reason: any) => unknown) | null | undefined) => Promise<unknown>;
107
+ [Symbol.toStringTag]: string;
108
+ finally: (onfinally?: (() => void) | null | undefined) => Promise<string | number | bigint | boolean | Iterable<import("react").ReactNode> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | null | undefined>;
109
+ } | {
110
+ type: string | ((props: any) => Promise<import("react").ReactNode> | import("react").ReactNode) | {};
111
+ props: unknown;
112
+ key: string | null;
113
+ } | /*elided*/ any | null | undefined;
114
+ } | null | undefined;
123
115
  };
124
116
  position: PositionBoxProps<unknown>;
125
117
  flex: {
@@ -137,18 +129,48 @@ declare const PARAMS_DEFAULT: {
137
129
  };
138
130
  wall: {
139
131
  backdrop: {
140
- props: {
141
- type: "bottom";
142
- size: number;
143
- transition: number;
144
- opacity: number;
145
- };
146
- flatPosition: PositionBoxProps<unknown>;
147
- flatStyle: {
148
- background: string;
149
- borderRadius: string | number;
150
- transition: string;
151
- };
132
+ zIndex?: import("@vnejs/uis.utils").CssInsertValueNumber;
133
+ transition?: import("@vnejs/uis.utils").CssInsertValueNumber;
134
+ type?: import("@vnejs/uis.react.backdrop").BackdropTypeValue | "";
135
+ opacity?: import("@vnejs/uis.utils").CssInsertValueNumber;
136
+ color1?: import("@vnejs/uis.utils").CssInsertValueString;
137
+ color2?: import("@vnejs/uis.utils").CssInsertValueString;
138
+ stop1?: import("@vnejs/uis.utils").CssInsertValueNumber;
139
+ stop2?: import("@vnejs/uis.utils").CssInsertValueNumber;
140
+ scaleX?: import("@vnejs/uis.utils").CssInsertValueNumber;
141
+ scaleY?: import("@vnejs/uis.utils").CssInsertValueNumber;
142
+ translateX?: import("@vnejs/uis.utils").CssInsertValue;
143
+ translateY?: import("@vnejs/uis.utils").CssInsertValue;
144
+ borderRadius?: import("@vnejs/uis.utils").CssInsertValue;
145
+ className?: string;
146
+ children?: string | number | bigint | boolean | {
147
+ [Symbol.iterator]: () => Iterator<import("react").ReactNode, any, any>;
148
+ } | {
149
+ then: (onfulfilled?: ((value: string | number | bigint | boolean | Iterable<import("react").ReactNode> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | null | undefined) => unknown) | null | undefined, onrejected?: ((reason: any) => unknown) | null | undefined) => Promise<unknown>;
150
+ catch: (onrejected?: ((reason: any) => unknown) | null | undefined) => Promise<unknown>;
151
+ [Symbol.toStringTag]: string;
152
+ finally: (onfinally?: (() => void) | null | undefined) => Promise<string | number | bigint | boolean | Iterable<import("react").ReactNode> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | null | undefined>;
153
+ } | {
154
+ type: string | ((props: any) => Promise<import("react").ReactNode> | import("react").ReactNode) | {};
155
+ props: unknown;
156
+ key: string | null;
157
+ } | {
158
+ type: string | ((props: any) => Promise<import("react").ReactNode> | import("react").ReactNode) | {};
159
+ props: unknown;
160
+ key: string | null;
161
+ children: string | number | bigint | boolean | {
162
+ [Symbol.iterator]: () => Iterator<import("react").ReactNode, any, any>;
163
+ } | {
164
+ then: (onfulfilled?: ((value: string | number | bigint | boolean | Iterable<import("react").ReactNode> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | null | undefined) => unknown) | null | undefined, onrejected?: ((reason: any) => unknown) | null | undefined) => Promise<unknown>;
165
+ catch: (onrejected?: ((reason: any) => unknown) | null | undefined) => Promise<unknown>;
166
+ [Symbol.toStringTag]: string;
167
+ finally: (onfinally?: (() => void) | null | undefined) => Promise<string | number | bigint | boolean | Iterable<import("react").ReactNode> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | null | undefined>;
168
+ } | {
169
+ type: string | ((props: any) => Promise<import("react").ReactNode> | import("react").ReactNode) | {};
170
+ props: unknown;
171
+ key: string | null;
172
+ } | any | null | undefined;
173
+ } | null | undefined;
152
174
  };
153
175
  position: PositionBoxProps<unknown>;
154
176
  flex: {
@@ -171,18 +193,48 @@ declare const PARAMS_DEFAULT: {
171
193
  };
172
194
  line: {
173
195
  backdrop: {
174
- props: {
175
- type: "bottom";
176
- size: number;
177
- transition: number;
178
- opacity: number;
179
- };
180
- flatPosition: PositionBoxProps<unknown>;
181
- flatStyle: {
182
- background: string;
183
- borderRadius: string | number;
184
- transition: string;
185
- };
196
+ zIndex?: import("@vnejs/uis.utils").CssInsertValueNumber;
197
+ transition?: import("@vnejs/uis.utils").CssInsertValueNumber;
198
+ type?: import("@vnejs/uis.react.backdrop").BackdropTypeValue | "";
199
+ opacity?: import("@vnejs/uis.utils").CssInsertValueNumber;
200
+ color1?: import("@vnejs/uis.utils").CssInsertValueString;
201
+ color2?: import("@vnejs/uis.utils").CssInsertValueString;
202
+ stop1?: import("@vnejs/uis.utils").CssInsertValueNumber;
203
+ stop2?: import("@vnejs/uis.utils").CssInsertValueNumber;
204
+ scaleX?: import("@vnejs/uis.utils").CssInsertValueNumber;
205
+ scaleY?: import("@vnejs/uis.utils").CssInsertValueNumber;
206
+ translateX?: import("@vnejs/uis.utils").CssInsertValue;
207
+ translateY?: import("@vnejs/uis.utils").CssInsertValue;
208
+ borderRadius?: import("@vnejs/uis.utils").CssInsertValue;
209
+ className?: string;
210
+ children?: string | number | bigint | boolean | {
211
+ [Symbol.iterator]: () => Iterator<import("react").ReactNode, any, any>;
212
+ } | {
213
+ then: (onfulfilled?: ((value: string | number | bigint | boolean | Iterable<import("react").ReactNode> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | null | undefined) => unknown) | null | undefined, onrejected?: ((reason: any) => unknown) | null | undefined) => Promise<unknown>;
214
+ catch: (onrejected?: ((reason: any) => unknown) | null | undefined) => Promise<unknown>;
215
+ [Symbol.toStringTag]: string;
216
+ finally: (onfinally?: (() => void) | null | undefined) => Promise<string | number | bigint | boolean | Iterable<import("react").ReactNode> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | null | undefined>;
217
+ } | {
218
+ type: string | ((props: any) => Promise<import("react").ReactNode> | import("react").ReactNode) | {};
219
+ props: unknown;
220
+ key: string | null;
221
+ } | {
222
+ type: string | ((props: any) => Promise<import("react").ReactNode> | import("react").ReactNode) | {};
223
+ props: unknown;
224
+ key: string | null;
225
+ children: string | number | bigint | boolean | {
226
+ [Symbol.iterator]: () => Iterator<import("react").ReactNode, any, any>;
227
+ } | {
228
+ then: (onfulfilled?: ((value: string | number | bigint | boolean | Iterable<import("react").ReactNode> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | null | undefined) => unknown) | null | undefined, onrejected?: ((reason: any) => unknown) | null | undefined) => Promise<unknown>;
229
+ catch: (onrejected?: ((reason: any) => unknown) | null | undefined) => Promise<unknown>;
230
+ [Symbol.toStringTag]: string;
231
+ finally: (onfinally?: (() => void) | null | undefined) => Promise<string | number | bigint | boolean | Iterable<import("react").ReactNode> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | null | undefined>;
232
+ } | {
233
+ type: string | ((props: any) => Promise<import("react").ReactNode> | import("react").ReactNode) | {};
234
+ props: unknown;
235
+ key: string | null;
236
+ } | any | null | undefined;
237
+ } | null | undefined;
186
238
  };
187
239
  position: PositionBoxProps<unknown>;
188
240
  flex: {
package/dist/params.js CHANGED
@@ -1,36 +1,46 @@
1
- import { getVneLength } from "@vnejs/uis.utils";
2
1
  export const DEFAULT_VIEW = "line";
3
2
  export const LOC_LABEL = "interface";
4
- export const TRANSITION = 500;
3
+ export const TRANSITION = 300;
5
4
  export const ZINDEX = 1000;
6
- const createBackdropProps = (opacity) => ({ type: "bottom", size: 600, transition: TRANSITION, opacity });
7
- const createFlatBackdropPosition = (margin, opacity) => ({
8
- top: margin,
9
- left: margin,
10
- right: margin,
11
- bottom: margin,
12
- transition: TRANSITION,
5
+ const CANVAS_WIDTH = 3840;
6
+ const CANVAS_HEIGHT = 2160;
7
+ const ADV_STRIP_HEIGHT = 600;
8
+ const createStripBackdrop = (opacity) => ({
9
+ type: "bottom",
10
+ scaleX: 1,
11
+ scaleY: 1,
12
+ translateX: 0,
13
+ translateY: CANVAS_HEIGHT - ADV_STRIP_HEIGHT,
14
+ stop1: 100 - (ADV_STRIP_HEIGHT / CANVAS_HEIGHT) * 100,
15
+ stop2: 100,
16
+ borderRadius: 0,
17
+ color1: "rgba(0, 0, 0, 0.85)",
18
+ color2: "rgba(0, 0, 0, 0)",
13
19
  opacity,
14
20
  });
15
- const createFlatBackdropStyle = (borderRadius) => ({
16
- background: "rgba(0, 0, 0, 0.6)",
21
+ const createFillBackdrop = (inset, borderRadius, opacity) => ({
22
+ type: "bottom",
23
+ scaleX: (CANVAS_WIDTH - inset * 2) / CANVAS_WIDTH,
24
+ scaleY: (CANVAS_HEIGHT - inset * 2) / CANVAS_HEIGHT,
25
+ translateX: 0,
26
+ translateY: 0,
27
+ stop1: 0,
28
+ stop2: 100,
17
29
  borderRadius,
18
- transition: `${TRANSITION}ms`,
30
+ color1: "rgba(0, 0, 0, 0.6)",
31
+ color2: "rgba(0, 0, 0, 0.6)",
32
+ opacity,
19
33
  });
20
34
  const VIEW_PROPS_DEFAULT = {
21
35
  adv: {
22
- backdrop: { props: createBackdropProps(1), flatPosition: createFlatBackdropPosition(0, 0), flatStyle: createFlatBackdropStyle(0) },
36
+ backdrop: createStripBackdrop(1),
23
37
  position: { bottom: 144, left: 600, right: 600 },
24
38
  flex: { direction: "column", gap: 24 },
25
39
  speaker: { size: 72, weight: "bold" },
26
40
  text: { size: 60, height: 300 },
27
41
  },
28
42
  wall: {
29
- backdrop: {
30
- props: createBackdropProps(0),
31
- flatPosition: createFlatBackdropPosition(120, 1),
32
- flatStyle: createFlatBackdropStyle(getVneLength(48)),
33
- },
43
+ backdrop: createFillBackdrop(120, 48, 1),
34
44
  position: { top: 180, left: 180, right: 180, bottom: 264 },
35
45
  flex: { direction: "column", gap: 24 },
36
46
  scrollBar: { height: 1680, scrollToEnd: true, hideScrolbars: true, disableScroll: true },
@@ -38,7 +48,7 @@ const VIEW_PROPS_DEFAULT = {
38
48
  text: { size: 60 },
39
49
  },
40
50
  line: {
41
- backdrop: { props: createBackdropProps(0), flatPosition: createFlatBackdropPosition(0, 1), flatStyle: createFlatBackdropStyle(0) },
51
+ backdrop: createFillBackdrop(0, 0, 1),
42
52
  position: { isCentered: true },
43
53
  flex: { direction: "column", gap: 60 },
44
54
  speaker: { size: 72, weight: "bold" },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vnejs/contracts.views.scenario.interface",
3
- "version": "0.2.0",
3
+ "version": "0.2.1",
4
4
  "description": "Contracts for @vnejs/plugins.views.scenario.interface",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
@@ -29,6 +29,7 @@
29
29
  "@vnejs/module": "~0.2.0",
30
30
  "@vnejs/contracts.text.wall": "~0.2.0",
31
31
  "@vnejs/shared": "~0.2.0",
32
+ "@vnejs/uis.react.backdrop": "~0.2.0",
32
33
  "@vnejs/uis.react.position-box": "~0.2.0",
33
34
  "@vnejs/uis.utils": "~0.2.0",
34
35
  "@vnejs/contracts.core.scenario": "~0.2.0"
package/src/params.ts CHANGED
@@ -1,40 +1,53 @@
1
+ import type { BackdropProps } from "@vnejs/uis.react.backdrop";
1
2
  import type { PositionBoxProps, WidenViewProps } from "@vnejs/uis.react.position-box";
2
- import { getVneLength } from "@vnejs/uis.utils";
3
3
 
4
4
  export const DEFAULT_VIEW: string = "line";
5
5
  export const LOC_LABEL: string = "interface";
6
- export const TRANSITION: number = 500;
6
+ export const TRANSITION: number = 300;
7
7
  export const ZINDEX: number = 1000;
8
8
 
9
- const createBackdropProps = (opacity: number) => ({ type: "bottom" as const, size: 600, transition: TRANSITION, opacity });
10
- const createFlatBackdropPosition = (margin: number, opacity: number): PositionBoxProps => ({
11
- top: margin,
12
- left: margin,
13
- right: margin,
14
- bottom: margin,
15
- transition: TRANSITION,
9
+ const CANVAS_WIDTH = 3840;
10
+ const CANVAS_HEIGHT = 2160;
11
+ const ADV_STRIP_HEIGHT = 600;
12
+
13
+ const createStripBackdrop = (opacity: number): BackdropProps => ({
14
+ type: "bottom",
15
+ scaleX: 1,
16
+ scaleY: 1,
17
+ translateX: 0,
18
+ translateY: CANVAS_HEIGHT - ADV_STRIP_HEIGHT,
19
+ stop1: 100 - (ADV_STRIP_HEIGHT / CANVAS_HEIGHT) * 100,
20
+ stop2: 100,
21
+ borderRadius: 0,
22
+ color1: "rgba(0, 0, 0, 0.85)",
23
+ color2: "rgba(0, 0, 0, 0)",
16
24
  opacity,
17
25
  });
18
- const createFlatBackdropStyle = (borderRadius: number | string) => ({
19
- background: "rgba(0, 0, 0, 0.6)",
26
+
27
+ const createFillBackdrop = (inset: number, borderRadius: number, opacity: number): BackdropProps => ({
28
+ type: "bottom",
29
+ scaleX: (CANVAS_WIDTH - inset * 2) / CANVAS_WIDTH,
30
+ scaleY: (CANVAS_HEIGHT - inset * 2) / CANVAS_HEIGHT,
31
+ translateX: 0,
32
+ translateY: 0,
33
+ stop1: 0,
34
+ stop2: 100,
20
35
  borderRadius,
21
- transition: `${TRANSITION}ms`,
36
+ color1: "rgba(0, 0, 0, 0.6)",
37
+ color2: "rgba(0, 0, 0, 0.6)",
38
+ opacity,
22
39
  });
23
40
 
24
41
  const VIEW_PROPS_DEFAULT = {
25
42
  adv: {
26
- backdrop: { props: createBackdropProps(1), flatPosition: createFlatBackdropPosition(0, 0), flatStyle: createFlatBackdropStyle(0) },
43
+ backdrop: createStripBackdrop(1),
27
44
  position: { bottom: 144, left: 600, right: 600 } as PositionBoxProps,
28
45
  flex: { direction: "column" as const, gap: 24 },
29
46
  speaker: { size: 72, weight: "bold" as const },
30
47
  text: { size: 60, height: 300 },
31
48
  },
32
49
  wall: {
33
- backdrop: {
34
- props: createBackdropProps(0),
35
- flatPosition: createFlatBackdropPosition(120, 1),
36
- flatStyle: createFlatBackdropStyle(getVneLength(48)),
37
- },
50
+ backdrop: createFillBackdrop(120, 48, 1),
38
51
  position: { top: 180, left: 180, right: 180, bottom: 264 } as PositionBoxProps,
39
52
  flex: { direction: "column" as const, gap: 24 },
40
53
  scrollBar: { height: 1680, scrollToEnd: true, hideScrolbars: true, disableScroll: true },
@@ -42,7 +55,7 @@ const VIEW_PROPS_DEFAULT = {
42
55
  text: { size: 60 },
43
56
  },
44
57
  line: {
45
- backdrop: { props: createBackdropProps(0), flatPosition: createFlatBackdropPosition(0, 1), flatStyle: createFlatBackdropStyle(0) },
58
+ backdrop: createFillBackdrop(0, 0, 1),
46
59
  position: { isCentered: true } as PositionBoxProps,
47
60
  flex: { direction: "column" as const, gap: 60 },
48
61
  speaker: { size: 72, weight: "bold" as const },