verstak 0.22.512 → 0.22.514
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.
|
@@ -19,8 +19,8 @@ export interface BlockVmt<T = unknown, M = unknown, R = void> {
|
|
|
19
19
|
render?: Render<T, M, R>;
|
|
20
20
|
finalize?: Render<T, M, R>;
|
|
21
21
|
}
|
|
22
|
-
export declare function
|
|
23
|
-
export declare function
|
|
22
|
+
export declare function baseFor<T, M, R>(outer: BlockBody<T, M, R> | undefined, base: BlockBody<T, M, R>): BlockVmt<T, M, R>;
|
|
23
|
+
export declare function defineSubTreeContext<T extends Object>(type: Type<T>, context: T): void;
|
|
24
24
|
export declare function use<T extends Object>(type: Type<T>): T;
|
|
25
25
|
export declare abstract class VBlock<T = unknown, M = unknown, R = void> {
|
|
26
26
|
static readonly shortFrameDuration = 16;
|
|
@@ -33,16 +33,16 @@ export declare abstract class VBlock<T = unknown, M = unknown, R = void> {
|
|
|
33
33
|
abstract model: M;
|
|
34
34
|
abstract cells: Cells;
|
|
35
35
|
abstract widthGrowth: number;
|
|
36
|
-
abstract
|
|
37
|
-
abstract
|
|
36
|
+
abstract minWidth: string;
|
|
37
|
+
abstract maxWidth: string;
|
|
38
38
|
abstract heightGrowth: number;
|
|
39
|
-
abstract
|
|
40
|
-
abstract
|
|
41
|
-
abstract
|
|
42
|
-
abstract
|
|
43
|
-
abstract
|
|
44
|
-
abstract
|
|
45
|
-
abstract
|
|
39
|
+
abstract minHeight: string;
|
|
40
|
+
abstract maxHeight: string;
|
|
41
|
+
abstract contentAlignment: Align;
|
|
42
|
+
abstract frameAlignment: Align;
|
|
43
|
+
abstract contentWrapping: boolean;
|
|
44
|
+
abstract floating: boolean;
|
|
45
|
+
abstract childrenShuffling: boolean;
|
|
46
46
|
abstract renderingPriority?: Priority;
|
|
47
47
|
abstract readonly level: number;
|
|
48
48
|
abstract readonly host: VBlock;
|
|
@@ -83,15 +83,15 @@ export declare class AbstractDriver<T> {
|
|
|
83
83
|
deploy(block: VBlock<T>, sequential: boolean): void;
|
|
84
84
|
applyCellRange(block: VBlock<T, any, any>, cellRange: CellRange | undefined): void;
|
|
85
85
|
applyWidthGrowth(block: VBlock<T, any, any>, widthGrowth: number): void;
|
|
86
|
-
|
|
87
|
-
|
|
86
|
+
applyMinWidth(block: VBlock<T, any, any>, minWidth: string): void;
|
|
87
|
+
applyMaxWidth(block: VBlock<T, any, any>, maxWidth: string): void;
|
|
88
88
|
applyHeightGrowth(block: VBlock<T, any, any>, heightGrowth: number): void;
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
89
|
+
applyMinHeight(block: VBlock<T, any, any>, minHeight: string): void;
|
|
90
|
+
applyMaxHeight(block: VBlock<T, any, any>, maxHeight: string): void;
|
|
91
|
+
applyContentAlignment(block: VBlock<T, any, any>, contentAlignment: Align): void;
|
|
92
|
+
applyFrameAlignment(block: VBlock<T, any, any>, frameAlignment: Align): void;
|
|
93
|
+
applyContentWrapping(block: VBlock<T, any, any>, contentWrapping: boolean): void;
|
|
94
|
+
applyFloating(block: VBlock<T, any, any>, floating: boolean): void;
|
|
95
95
|
render(block: VBlock<T>): void | Promise<void>;
|
|
96
96
|
}
|
|
97
97
|
export declare class StaticDriver<T> extends AbstractDriver<T> {
|
|
@@ -25,7 +25,7 @@ export var Priority;
|
|
|
25
25
|
Priority[Priority["AsyncP1"] = 1] = "AsyncP1";
|
|
26
26
|
Priority[Priority["AsyncP2"] = 2] = "AsyncP2";
|
|
27
27
|
})(Priority || (Priority = {}));
|
|
28
|
-
export function
|
|
28
|
+
export function baseFor(outer, base) {
|
|
29
29
|
if (outer instanceof Function)
|
|
30
30
|
outer = { render: outer };
|
|
31
31
|
if (base instanceof Function)
|
|
@@ -37,8 +37,8 @@ function via(outer, base) {
|
|
|
37
37
|
const inherited = base !== null && base !== void 0 ? base : NOP;
|
|
38
38
|
return outer ? b => outer(b, () => inherited(b)) : inherited;
|
|
39
39
|
}
|
|
40
|
-
export function
|
|
41
|
-
return VBlockImpl.
|
|
40
|
+
export function defineSubTreeContext(type, context) {
|
|
41
|
+
return VBlockImpl.defineSubTreeContext(type, context);
|
|
42
42
|
}
|
|
43
43
|
export function use(type) {
|
|
44
44
|
return VBlockImpl.use(type);
|
|
@@ -144,23 +144,23 @@ export class AbstractDriver {
|
|
|
144
144
|
}
|
|
145
145
|
applyWidthGrowth(block, widthGrowth) {
|
|
146
146
|
}
|
|
147
|
-
|
|
147
|
+
applyMinWidth(block, minWidth) {
|
|
148
148
|
}
|
|
149
|
-
|
|
149
|
+
applyMaxWidth(block, maxWidth) {
|
|
150
150
|
}
|
|
151
151
|
applyHeightGrowth(block, heightGrowth) {
|
|
152
152
|
}
|
|
153
|
-
|
|
153
|
+
applyMinHeight(block, minHeight) {
|
|
154
154
|
}
|
|
155
|
-
|
|
155
|
+
applyMaxHeight(block, maxHeight) {
|
|
156
156
|
}
|
|
157
|
-
|
|
157
|
+
applyContentAlignment(block, contentAlignment) {
|
|
158
158
|
}
|
|
159
|
-
|
|
159
|
+
applyFrameAlignment(block, frameAlignment) {
|
|
160
160
|
}
|
|
161
|
-
|
|
161
|
+
applyContentWrapping(block, contentWrapping) {
|
|
162
162
|
}
|
|
163
|
-
|
|
163
|
+
applyFloating(block, floating) {
|
|
164
164
|
}
|
|
165
165
|
render(block) {
|
|
166
166
|
var _a;
|
|
@@ -212,16 +212,16 @@ class VBlockImpl extends VBlock {
|
|
|
212
212
|
this.assignedCells = undefined;
|
|
213
213
|
this.appliedCellRange = Cursor.UndefinedCellRange;
|
|
214
214
|
this.appliedWidthGrowth = 0;
|
|
215
|
-
this.
|
|
216
|
-
this.
|
|
215
|
+
this.appliedMinWidth = "";
|
|
216
|
+
this.appliedMaxWidth = "";
|
|
217
217
|
this.appliedHeightGrowth = 0;
|
|
218
|
-
this.
|
|
219
|
-
this.
|
|
220
|
-
this.
|
|
221
|
-
this.
|
|
222
|
-
this.
|
|
223
|
-
this.
|
|
224
|
-
this.
|
|
218
|
+
this.appliedMinHeight = "";
|
|
219
|
+
this.appliedMaxHeight = "";
|
|
220
|
+
this.appliedContentAlignment = Align.Default;
|
|
221
|
+
this.appliedFrameAlignment = Align.Default;
|
|
222
|
+
this.appliedContentWrapping = false;
|
|
223
|
+
this.appliedFloating = false;
|
|
224
|
+
this.childrenShuffling = false;
|
|
225
225
|
this.renderingPriority = Priority.SyncP0;
|
|
226
226
|
this.level = owner.level + 1;
|
|
227
227
|
this.host = owner;
|
|
@@ -255,18 +255,18 @@ class VBlockImpl extends VBlock {
|
|
|
255
255
|
this.appliedWidthGrowth = value;
|
|
256
256
|
}
|
|
257
257
|
}
|
|
258
|
-
get
|
|
259
|
-
set
|
|
260
|
-
if (value !== this.
|
|
261
|
-
this.driver.
|
|
262
|
-
this.
|
|
258
|
+
get minWidth() { return this.appliedMinWidth; }
|
|
259
|
+
set minWidth(value) {
|
|
260
|
+
if (value !== this.appliedMinWidth) {
|
|
261
|
+
this.driver.applyMinWidth(this, value);
|
|
262
|
+
this.appliedMinWidth = value;
|
|
263
263
|
}
|
|
264
264
|
}
|
|
265
|
-
get
|
|
266
|
-
set
|
|
267
|
-
if (value !== this.
|
|
268
|
-
this.driver.
|
|
269
|
-
this.
|
|
265
|
+
get maxWidth() { return this.appliedMaxWidth; }
|
|
266
|
+
set maxWidth(value) {
|
|
267
|
+
if (value !== this.appliedMaxWidth) {
|
|
268
|
+
this.driver.applyMaxWidth(this, value);
|
|
269
|
+
this.appliedMaxWidth = value;
|
|
270
270
|
}
|
|
271
271
|
}
|
|
272
272
|
get heightGrowth() { return this.appliedHeightGrowth; }
|
|
@@ -276,46 +276,46 @@ class VBlockImpl extends VBlock {
|
|
|
276
276
|
this.appliedHeightGrowth = value;
|
|
277
277
|
}
|
|
278
278
|
}
|
|
279
|
-
get
|
|
280
|
-
set
|
|
281
|
-
if (value !== this.
|
|
282
|
-
this.driver.
|
|
283
|
-
this.
|
|
279
|
+
get minHeight() { return this.appliedMinHeight; }
|
|
280
|
+
set minHeight(value) {
|
|
281
|
+
if (value !== this.appliedMinWidth) {
|
|
282
|
+
this.driver.applyMinWidth(this, value);
|
|
283
|
+
this.appliedMinWidth = value;
|
|
284
284
|
}
|
|
285
285
|
}
|
|
286
|
-
get
|
|
287
|
-
set
|
|
288
|
-
if (value !== this.
|
|
289
|
-
this.driver.
|
|
290
|
-
this.
|
|
286
|
+
get maxHeight() { return this.appliedMaxHeight; }
|
|
287
|
+
set maxHeight(value) {
|
|
288
|
+
if (value !== this.appliedMaxWidth) {
|
|
289
|
+
this.driver.applyMaxWidth(this, value);
|
|
290
|
+
this.appliedMaxWidth = value;
|
|
291
291
|
}
|
|
292
292
|
}
|
|
293
|
-
get
|
|
294
|
-
set
|
|
295
|
-
if (value !== this.
|
|
296
|
-
this.driver.
|
|
297
|
-
this.
|
|
293
|
+
get contentAlignment() { return this.appliedContentAlignment; }
|
|
294
|
+
set contentAlignment(value) {
|
|
295
|
+
if (value !== this.appliedContentAlignment) {
|
|
296
|
+
this.driver.applyContentAlignment(this, value);
|
|
297
|
+
this.appliedContentAlignment = value;
|
|
298
298
|
}
|
|
299
299
|
}
|
|
300
|
-
get
|
|
301
|
-
set
|
|
302
|
-
if (value !== this.
|
|
303
|
-
this.driver.
|
|
304
|
-
this.
|
|
300
|
+
get frameAlignment() { return this.appliedFrameAlignment; }
|
|
301
|
+
set frameAlignment(value) {
|
|
302
|
+
if (value !== this.appliedFrameAlignment) {
|
|
303
|
+
this.driver.applyFrameAlignment(this, value);
|
|
304
|
+
this.appliedFrameAlignment = value;
|
|
305
305
|
}
|
|
306
306
|
}
|
|
307
|
-
get
|
|
308
|
-
set
|
|
309
|
-
if (value !== this.
|
|
310
|
-
this.driver.
|
|
311
|
-
this.
|
|
307
|
+
get contentWrapping() { return this.appliedContentWrapping; }
|
|
308
|
+
set contentWrapping(value) {
|
|
309
|
+
if (value !== this.appliedContentWrapping) {
|
|
310
|
+
this.driver.applyContentWrapping(this, value);
|
|
311
|
+
this.appliedContentWrapping = value;
|
|
312
312
|
}
|
|
313
313
|
}
|
|
314
|
-
get
|
|
315
|
-
set
|
|
316
|
-
if (value !== this.
|
|
317
|
-
this.driver.
|
|
318
|
-
this.
|
|
314
|
+
get floating() { return this.appliedFloating; }
|
|
315
|
+
set floating(value) {
|
|
316
|
+
if (value !== this.appliedFloating) {
|
|
317
|
+
this.driver.applyFloating(this, value);
|
|
318
|
+
this.appliedFloating = value;
|
|
319
319
|
}
|
|
320
320
|
}
|
|
321
321
|
configureReactronic(options) {
|
|
@@ -332,7 +332,7 @@ class VBlockImpl extends VBlock {
|
|
|
332
332
|
throw new Error(`${type.name} context doesn't exist`);
|
|
333
333
|
return (_b = b.context) === null || _b === void 0 ? void 0 : _b.instance;
|
|
334
334
|
}
|
|
335
|
-
static
|
|
335
|
+
static defineSubTreeContext(type, context) {
|
|
336
336
|
const block = gCurrent.instance;
|
|
337
337
|
const host = block.host;
|
|
338
338
|
const hostCtx = nonreactive(() => { var _a; return (_a = host.context) === null || _a === void 0 ? void 0 : _a.instance; });
|
|
@@ -449,7 +449,7 @@ function renderIncrementally(owner, stamp, allChildren, items, priority) {
|
|
|
449
449
|
VBlock.currentRenderingPriority = priority;
|
|
450
450
|
try {
|
|
451
451
|
const sequential = block.children.strict;
|
|
452
|
-
if (block.
|
|
452
|
+
if (block.childrenShuffling)
|
|
453
453
|
shuffle(items);
|
|
454
454
|
const frameDurationLimit = priority === Priority.AsyncP2 ? VBlock.shortFrameDuration : Infinity;
|
|
455
455
|
let frameDuration = Math.min(frameDurationLimit, Math.max(VBlock.frameDuration / 4, VBlock.shortFrameDuration));
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { VBlock, BlockBody, Align, CellRange } from "../core/api";
|
|
2
2
|
import { HtmlDriver } from "./HtmlDriver";
|
|
3
|
-
export declare function Block<M = unknown, R = void>(name: string,
|
|
4
|
-
export declare function PlainText(content: string, name?: string,
|
|
5
|
-
export declare function HtmlText(content: string, name?: string,
|
|
3
|
+
export declare function Block<M = unknown, R = void>(name: string, body: BlockBody<HTMLElement, M, R>): VBlock<HTMLElement, M, R>;
|
|
4
|
+
export declare function PlainText(content: string, name?: string, body?: BlockBody<HTMLElement, void, void>): VBlock<HTMLElement, void, void>;
|
|
5
|
+
export declare function HtmlText(content: string, name?: string, body?: BlockBody<HTMLElement, void, void>): VBlock<HTMLElement, void, void>;
|
|
6
6
|
export declare function Grid<M = unknown, R = void>(name: string, body: BlockBody<HTMLElement, M, R>): VBlock<HTMLElement, M, R>;
|
|
7
7
|
export declare function Line<T = void>(claim: (x: void) => T): VBlock<HTMLElement>;
|
|
8
8
|
export declare function lineFeed(body?: BlockBody<HTMLElement, void, void>, noCoalescing?: boolean): VBlock<HTMLElement>;
|
|
@@ -10,14 +10,14 @@ export declare function Group<M = unknown, R = void>(name: string, body: BlockBo
|
|
|
10
10
|
export declare class VerstakDriver<T extends HTMLElement> extends HtmlDriver<T> {
|
|
11
11
|
applyCellRange(block: VBlock<T>, cellRange: CellRange | undefined): void;
|
|
12
12
|
applyWidthGrowth(block: VBlock<T>, widthGrowth: number): void;
|
|
13
|
-
|
|
14
|
-
|
|
13
|
+
applyMinWidth(block: VBlock<T>, minWidth: string): void;
|
|
14
|
+
applyMaxWidth(block: VBlock<T>, maxWidth: string): void;
|
|
15
15
|
applyHeightGrowth(block: VBlock<T>, heightGrowth: number): void;
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
16
|
+
applyMinHeight(block: VBlock<T>, minHeight: string): void;
|
|
17
|
+
applyMaxHeight(block: VBlock<T>, maxHeight: string): void;
|
|
18
|
+
applyContentAlignment(block: VBlock<T>, contentAlign: Align): void;
|
|
19
|
+
applyFrameAlignment(block: VBlock<T>, frameAlign: Align): void;
|
|
20
|
+
applyContentWrapping(block: VBlock<T>, contentWrapping: boolean): void;
|
|
21
|
+
applyFloating(block: VBlock<T>, floating: boolean): void;
|
|
22
22
|
render(block: VBlock<T>): void | Promise<void>;
|
|
23
23
|
}
|
|
@@ -1,17 +1,17 @@
|
|
|
1
|
-
import { VBlock, LayoutKind, Align, GridCursor,
|
|
1
|
+
import { VBlock, LayoutKind, Align, GridCursor, baseFor } from "../core/api";
|
|
2
2
|
import { HtmlDriver } from "./HtmlDriver";
|
|
3
|
-
export function Block(name,
|
|
4
|
-
return VBlock.claim(name, VerstakTags.block,
|
|
3
|
+
export function Block(name, body) {
|
|
4
|
+
return VBlock.claim(name, VerstakTags.block, body);
|
|
5
5
|
}
|
|
6
|
-
export function PlainText(content, name,
|
|
7
|
-
return VBlock.claim(name !== null && name !== void 0 ? name : "", VerstakTags.text,
|
|
6
|
+
export function PlainText(content, name, body) {
|
|
7
|
+
return VBlock.claim(name !== null && name !== void 0 ? name : "", VerstakTags.text, baseFor(body, {
|
|
8
8
|
render(b) {
|
|
9
9
|
b.native.innerText = content;
|
|
10
10
|
},
|
|
11
11
|
}));
|
|
12
12
|
}
|
|
13
|
-
export function HtmlText(content, name,
|
|
14
|
-
return VBlock.claim(name !== null && name !== void 0 ? name : "", VerstakTags.text,
|
|
13
|
+
export function HtmlText(content, name, body) {
|
|
14
|
+
return VBlock.claim(name !== null && name !== void 0 ? name : "", VerstakTags.text, baseFor(body, {
|
|
15
15
|
render(b) {
|
|
16
16
|
b.native.innerHTML = content;
|
|
17
17
|
},
|
|
@@ -57,11 +57,11 @@ export class VerstakDriver extends HtmlDriver {
|
|
|
57
57
|
css.flexBasis = "";
|
|
58
58
|
}
|
|
59
59
|
}
|
|
60
|
-
|
|
61
|
-
block.native.style.minWidth = `${
|
|
60
|
+
applyMinWidth(block, minWidth) {
|
|
61
|
+
block.native.style.minWidth = `${minWidth}`;
|
|
62
62
|
}
|
|
63
|
-
|
|
64
|
-
block.native.style.maxWidth = `${
|
|
63
|
+
applyMaxWidth(block, maxWidth) {
|
|
64
|
+
block.native.style.maxWidth = `${maxWidth}`;
|
|
65
65
|
}
|
|
66
66
|
applyHeightGrowth(block, heightGrowth) {
|
|
67
67
|
if (block.driver.isRow) {
|
|
@@ -72,22 +72,22 @@ export class VerstakDriver extends HtmlDriver {
|
|
|
72
72
|
css.flexGrow = "";
|
|
73
73
|
}
|
|
74
74
|
else if (block.host.driver.isRow) {
|
|
75
|
-
block.driver.
|
|
75
|
+
block.driver.applyFrameAlignment(block, Align.Stretch);
|
|
76
76
|
block.host.driver.applyHeightGrowth(block.host, heightGrowth);
|
|
77
77
|
}
|
|
78
78
|
}
|
|
79
|
-
|
|
80
|
-
block.native.style.minHeight = `${
|
|
79
|
+
applyMinHeight(block, minHeight) {
|
|
80
|
+
block.native.style.minHeight = `${minHeight}`;
|
|
81
81
|
}
|
|
82
|
-
|
|
83
|
-
block.native.style.maxHeight = `${
|
|
82
|
+
applyMaxHeight(block, maxHeight) {
|
|
83
|
+
block.native.style.maxHeight = `${maxHeight}`;
|
|
84
84
|
}
|
|
85
|
-
|
|
85
|
+
applyContentAlignment(block, contentAlign) {
|
|
86
86
|
const css = block.native.style;
|
|
87
|
-
if ((
|
|
88
|
-
const v = AlignToCss[(
|
|
89
|
-
const h = AlignToCss[
|
|
90
|
-
const t = TextAlignCss[
|
|
87
|
+
if ((contentAlign & Align.Default) === 0) {
|
|
88
|
+
const v = AlignToCss[(contentAlign >> 2) & 0b11];
|
|
89
|
+
const h = AlignToCss[contentAlign & 0b11];
|
|
90
|
+
const t = TextAlignCss[contentAlign & 0b11];
|
|
91
91
|
css.justifyContent = v;
|
|
92
92
|
css.alignItems = h;
|
|
93
93
|
css.textAlign = t;
|
|
@@ -95,28 +95,28 @@ export class VerstakDriver extends HtmlDriver {
|
|
|
95
95
|
else
|
|
96
96
|
css.justifyContent = css.alignContent = css.textAlign = "";
|
|
97
97
|
}
|
|
98
|
-
|
|
98
|
+
applyFrameAlignment(block, frameAlign) {
|
|
99
99
|
const css = block.native.style;
|
|
100
|
-
if ((
|
|
101
|
-
const v = AlignToCss[(
|
|
102
|
-
const h = AlignToCss[
|
|
100
|
+
if ((frameAlign & Align.Default) === 0) {
|
|
101
|
+
const v = AlignToCss[(frameAlign >> 2) & 0b11];
|
|
102
|
+
const h = AlignToCss[frameAlign & 0b11];
|
|
103
103
|
css.alignSelf = v;
|
|
104
104
|
css.justifySelf = h;
|
|
105
105
|
}
|
|
106
106
|
else
|
|
107
107
|
css.alignSelf = css.justifySelf = "";
|
|
108
108
|
}
|
|
109
|
-
|
|
110
|
-
if (
|
|
109
|
+
applyContentWrapping(block, contentWrapping) {
|
|
110
|
+
if (contentWrapping)
|
|
111
111
|
block.native.setAttribute("wrapping", "true");
|
|
112
112
|
else
|
|
113
113
|
block.native.removeAttribute("wrapping");
|
|
114
114
|
}
|
|
115
|
-
|
|
116
|
-
if (
|
|
117
|
-
block.native.setAttribute("
|
|
115
|
+
applyFloating(block, floating) {
|
|
116
|
+
if (floating)
|
|
117
|
+
block.native.setAttribute("floating", "true");
|
|
118
118
|
else
|
|
119
|
-
block.native.removeAttribute("
|
|
119
|
+
block.native.removeAttribute("floating");
|
|
120
120
|
}
|
|
121
121
|
render(block) {
|
|
122
122
|
if (block.driver.layout < LayoutKind.Row)
|