cx 26.0.2 → 26.0.4
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/build/data/ArrayElementView.spec.js +1 -1
- package/build/hooks/store.spec.js +1 -1
- package/build/hooks/useTrigger.spec.js +1 -1
- package/build/ui/Controller.spec.js +2 -6
- package/build/ui/PureContainer.spec.d.ts +1 -0
- package/build/ui/PureContainer.spec.js +149 -0
- package/build/ui/layout/ContentPlaceholder.spec.js +12 -12
- package/build.js +129 -129
- package/dist/manifest.d.ts +1443 -0
- package/dist/manifest.js +826 -826
- package/package.json +4 -3
- package/src/charts/Chart.ts +108 -108
- package/src/data/ArrayElementView.ts +90 -90
- package/src/data/AugmentedViewBase.ts +88 -88
- package/src/data/Binding.ts +104 -104
- package/src/data/ExposedRecordView.ts +95 -95
- package/src/data/ExposedValueView.ts +89 -89
- package/src/data/Expression.spec.ts +229 -229
- package/src/data/Expression.ts +233 -233
- package/src/data/Grouper.spec.ts +57 -57
- package/src/data/Grouper.ts +158 -158
- package/src/data/NestedDataView.ts +43 -43
- package/src/data/ReadOnlyDataView.ts +39 -39
- package/src/data/Ref.ts +104 -104
- package/src/data/Selector.ts +10 -10
- package/src/data/Store.ts +52 -52
- package/src/data/StoreProxy.ts +19 -19
- package/src/data/StoreRef.ts +66 -66
- package/src/data/StringTemplate.spec.ts +132 -132
- package/src/data/StringTemplate.ts +93 -93
- package/src/data/StructuredSelector.spec.ts +113 -113
- package/src/data/StructuredSelector.ts +146 -146
- package/src/data/SubscribableView.ts +63 -63
- package/src/data/ZoomIntoPropertyView.spec.ts +64 -64
- package/src/data/ZoomIntoPropertyView.ts +45 -45
- package/src/data/computable.spec.ts +62 -62
- package/src/data/createAccessorModelProxy.ts +60 -60
- package/src/data/createStructuredSelector.ts +62 -62
- package/src/data/getAccessor.spec.ts +11 -11
- package/src/data/getAccessor.ts +74 -74
- package/src/data/getSelector.spec.ts +43 -43
- package/src/data/getSelector.ts +66 -66
- package/src/data/ops/filter.spec.ts +35 -35
- package/src/data/ops/filter.ts +9 -9
- package/src/data/ops/merge.ts +13 -13
- package/src/data/ops/removeTreeNodes.spec.ts +37 -37
- package/src/data/ops/removeTreeNodes.ts +15 -15
- package/src/data/ops/updateArray.spec.ts +69 -69
- package/src/data/ops/updateArray.ts +31 -31
- package/src/data/ops/updateTree.ts +23 -23
- package/src/data/test-types.ts +7 -7
- package/src/hooks/useTrigger.ts +26 -26
- package/src/index.scss +6 -6
- package/src/jsx-runtime.ts +72 -72
- package/src/svg/BoundedObject.ts +101 -101
- package/src/ui/CSSHelper.ts +17 -17
- package/src/ui/ContentResolver.ts +124 -124
- package/src/ui/Controller.ts +189 -189
- package/src/ui/Culture.ts +159 -159
- package/src/ui/DataProxy.ts +55 -55
- package/src/ui/FocusManager.ts +171 -171
- package/src/ui/Instance.ts +868 -868
- package/src/ui/RenderingContext.ts +99 -99
- package/src/ui/Rescope.ts +49 -49
- package/src/ui/StructuredInstanceDataAccessor.ts +32 -32
- package/src/ui/VDOM.ts +34 -34
- package/src/ui/adapter/ArrayAdapter.spec.ts +55 -55
- package/src/ui/adapter/ArrayAdapter.ts +226 -226
- package/src/ui/adapter/TreeAdapter.spec.ts +76 -76
- package/src/ui/adapter/TreeAdapter.ts +185 -185
- package/src/ui/app/History.ts +133 -133
- package/src/ui/app/Url.spec.ts +50 -50
- package/src/ui/app/startHotAppLoop.ts +40 -40
- package/src/ui/createFunctionalComponent.ts +65 -65
- package/src/ui/index.ts +45 -45
- package/src/ui/layout/Content.ts +30 -30
- package/src/ui/layout/FirstVisibleChildLayout.ts +60 -60
- package/src/ui/selection/KeySelection.ts +165 -165
- package/src/ui/selection/PropertySelection.ts +87 -87
- package/src/ui/selection/Selection.ts +118 -118
- package/src/util/Format.ts +267 -267
- package/src/util/browserSupportsPassiveEventHandlers.ts +20 -20
- package/src/util/color/rgbToHsl.ts +35 -35
- package/src/util/getActiveElement.ts +4 -4
- package/src/util/hasKey.ts +18 -18
- package/src/util/index.ts +55 -55
- package/src/util/innerTextTrim.ts +10 -10
- package/src/util/isArray.ts +3 -3
- package/src/util/isDataRecord.ts +5 -5
- package/src/util/isDefined.ts +3 -3
- package/src/util/isString.ts +3 -3
- package/src/widgets/Sandbox.ts +103 -103
- package/src/widgets/autoFocus.ts +9 -9
- package/src/widgets/cx.ts +63 -63
- package/src/widgets/grid/GridCell.ts +143 -143
- package/src/widgets/icons/calendar.tsx +17 -17
- package/src/widgets/icons/check.tsx +13 -13
- package/src/widgets/icons/clear.tsx +15 -15
- package/src/widgets/icons/close.tsx +20 -20
- package/src/widgets/icons/cx.tsx +38 -38
- package/src/widgets/icons/drop-down.tsx +15 -15
- package/src/widgets/icons/file.tsx +13 -13
- package/src/widgets/icons/folder-open.tsx +15 -15
- package/src/widgets/icons/folder.tsx +13 -13
- package/src/widgets/icons/forward.tsx +22 -22
- package/src/widgets/icons/loading.tsx +24 -24
- package/src/widgets/icons/menu.tsx +17 -17
- package/src/widgets/icons/pixel-picker.tsx +18 -18
- package/src/widgets/icons/search.tsx +13 -13
- package/src/widgets/icons/sort-asc.tsx +14 -14
- package/src/widgets/icons/square.tsx +18 -18
- package/src/widgets/nav/Route.ts +142 -142
- package/src/widgets/overlay/ContextMenu.ts +42 -42
- package/src/widgets/overlay/Dropdown.tsx +762 -762
- package/src/widgets/overlay/MsgBox.tsx +141 -141
- package/src/widgets/overlay/Toast.ts +111 -111
- package/src/widgets/overlay/Window.tsx +299 -299
- package/src/widgets/overlay/alerts.ts +46 -46
- package/src/widgets/overlay/captureMouse.ts +195 -195
- package/src/widgets/overlay/createHotPromiseWindowFactory.ts +72 -72
- package/src/widgets/overlay/index.d.ts +11 -11
- package/src/widgets/overlay/index.ts +11 -11
- package/src/widgets/overlay/tooltip-ops.ts +173 -173
package/src/hooks/useTrigger.ts
CHANGED
|
@@ -1,26 +1,26 @@
|
|
|
1
|
-
import { getCurrentInstance } from "../ui/createFunctionalComponent";
|
|
2
|
-
import { isArray } from "../util/isArray";
|
|
3
|
-
import { computable, ComputableSelector } from "../data/computable";
|
|
4
|
-
import { useStore } from "./store";
|
|
5
|
-
|
|
6
|
-
export function addExploreCallback(callback: (...args: any[]) => any): () => void {
|
|
7
|
-
let instance = getCurrentInstance();
|
|
8
|
-
if (!instance.computables) instance.computables = [];
|
|
9
|
-
instance.computables.push(callback);
|
|
10
|
-
return () => {
|
|
11
|
-
if (instance.computables) {
|
|
12
|
-
instance.computables = instance.computables.filter((cb: unknown) => cb !== callback);
|
|
13
|
-
}
|
|
14
|
-
};
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
export function useTrigger(
|
|
18
|
-
args: ComputableSelector[],
|
|
19
|
-
callback: (...args: any[]) => void,
|
|
20
|
-
autoRun?: boolean,
|
|
21
|
-
): () => void {
|
|
22
|
-
if (!isArray(args)) throw new Error("First argument to useTrigger should be an array.");
|
|
23
|
-
let store = useStore();
|
|
24
|
-
let selector = computable(...args, callback).memoize(!autoRun && store.getData());
|
|
25
|
-
return addExploreCallback(selector);
|
|
26
|
-
}
|
|
1
|
+
import { getCurrentInstance } from "../ui/createFunctionalComponent";
|
|
2
|
+
import { isArray } from "../util/isArray";
|
|
3
|
+
import { computable, ComputableSelector } from "../data/computable";
|
|
4
|
+
import { useStore } from "./store";
|
|
5
|
+
|
|
6
|
+
export function addExploreCallback(callback: (...args: any[]) => any): () => void {
|
|
7
|
+
let instance = getCurrentInstance();
|
|
8
|
+
if (!instance.computables) instance.computables = [];
|
|
9
|
+
instance.computables.push(callback);
|
|
10
|
+
return () => {
|
|
11
|
+
if (instance.computables) {
|
|
12
|
+
instance.computables = instance.computables.filter((cb: unknown) => cb !== callback);
|
|
13
|
+
}
|
|
14
|
+
};
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
export function useTrigger(
|
|
18
|
+
args: ComputableSelector[],
|
|
19
|
+
callback: (...args: any[]) => void,
|
|
20
|
+
autoRun?: boolean,
|
|
21
|
+
): () => void {
|
|
22
|
+
if (!isArray(args)) throw new Error("First argument to useTrigger should be an array.");
|
|
23
|
+
let store = useStore();
|
|
24
|
+
let selector = computable(...args, callback).memoize(!autoRun && store.getData());
|
|
25
|
+
return addExploreCallback(selector);
|
|
26
|
+
}
|
package/src/index.scss
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
@import "global";
|
|
2
|
-
@import "util/index";
|
|
3
|
-
@import "ui/index";
|
|
4
|
-
@import "widgets/index";
|
|
5
|
-
@import "svg/index";
|
|
6
|
-
@import "charts/index";
|
|
1
|
+
@import "global";
|
|
2
|
+
@import "util/index";
|
|
3
|
+
@import "ui/index";
|
|
4
|
+
@import "widgets/index";
|
|
5
|
+
@import "svg/index";
|
|
6
|
+
@import "charts/index";
|
package/src/jsx-runtime.ts
CHANGED
|
@@ -1,72 +1,72 @@
|
|
|
1
|
-
import type { JSX as ReactJSX } from "react";
|
|
2
|
-
import { Instance } from "./ui/Instance";
|
|
3
|
-
import type { Prop } from "./ui/Prop";
|
|
4
|
-
import { Widget } from "./ui/Widget";
|
|
5
|
-
import { isArray } from "./util/isArray";
|
|
6
|
-
import { isString } from "./util/isString";
|
|
7
|
-
import { HtmlElement, HtmlElementConfig } from "./widgets/HtmlElement";
|
|
8
|
-
|
|
9
|
-
export function jsx(typeName: any, props: any, key?: string): any {
|
|
10
|
-
if (isArray(typeName)) return typeName;
|
|
11
|
-
|
|
12
|
-
// if (isFunction(typeName) && isUndefined(props))
|
|
13
|
-
// return createFunctionalComponent((config) => typeName(flattenProps(config)));
|
|
14
|
-
|
|
15
|
-
if (typeName.type || typeName.$type) return typeName;
|
|
16
|
-
|
|
17
|
-
if (props.children && isArray(props.children) && props.children.length == 0) props.children = null;
|
|
18
|
-
|
|
19
|
-
if (props.children && props.children.length == 1) props.children = props.children[0];
|
|
20
|
-
|
|
21
|
-
if (typeName == "cx") return props.children;
|
|
22
|
-
|
|
23
|
-
if (isString(typeName) && typeName[0] == typeName[0].toLowerCase()) {
|
|
24
|
-
props.tag = typeName;
|
|
25
|
-
typeName = HtmlElement;
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
return {
|
|
29
|
-
$type: typeName,
|
|
30
|
-
...props,
|
|
31
|
-
jsxAttributes: props && Object.keys(props),
|
|
32
|
-
};
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
export const jsxs = jsx;
|
|
36
|
-
|
|
37
|
-
type ReactIntrinsicElements = ReactJSX.IntrinsicElements;
|
|
38
|
-
// Check if a key is an event handler (starts with "on" and is a function)
|
|
39
|
-
type IsEventHandler<K, T> = K extends `on${string}` ? (T extends Function ? true : false) : false;
|
|
40
|
-
|
|
41
|
-
// CxJS event handler type - can be string (controller method) or callback with Instance
|
|
42
|
-
type CxEventHandler<T> = T extends (event: infer E) => any
|
|
43
|
-
? string | ((event: E, instance: Instance) => void)
|
|
44
|
-
: string | T;
|
|
45
|
-
|
|
46
|
-
type CxIntrinsicElement<T> = {
|
|
47
|
-
[K in keyof T]: K extends "children"
|
|
48
|
-
? any
|
|
49
|
-
: IsEventHandler<K, T[K]> extends true
|
|
50
|
-
? CxEventHandler<T[K]>
|
|
51
|
-
: Prop<T[K]>;
|
|
52
|
-
} & HtmlElementConfig;
|
|
53
|
-
|
|
54
|
-
type CxIntrinsicElements = {
|
|
55
|
-
[K in keyof ReactIntrinsicElements]: CxIntrinsicElement<ReactIntrinsicElements[K]>;
|
|
56
|
-
};
|
|
57
|
-
|
|
58
|
-
export namespace JSX {
|
|
59
|
-
/**
|
|
60
|
-
* Base class for JSX element instances.
|
|
61
|
-
* All widgets must extend from Widget class or React.Component.
|
|
62
|
-
*/
|
|
63
|
-
export type ElementClass = Widget<any> | React.Component<any, any>;
|
|
64
|
-
|
|
65
|
-
/**
|
|
66
|
-
* Intrinsic JSX elements (HTML-like tags).
|
|
67
|
-
* Supports HTML elements that map to HtmlElement widgets.
|
|
68
|
-
*/
|
|
69
|
-
export interface IntrinsicElements extends CxIntrinsicElements {
|
|
70
|
-
cx: any;
|
|
71
|
-
}
|
|
72
|
-
}
|
|
1
|
+
import type { JSX as ReactJSX } from "react";
|
|
2
|
+
import { Instance } from "./ui/Instance";
|
|
3
|
+
import type { Prop } from "./ui/Prop";
|
|
4
|
+
import { Widget } from "./ui/Widget";
|
|
5
|
+
import { isArray } from "./util/isArray";
|
|
6
|
+
import { isString } from "./util/isString";
|
|
7
|
+
import { HtmlElement, HtmlElementConfig } from "./widgets/HtmlElement";
|
|
8
|
+
|
|
9
|
+
export function jsx(typeName: any, props: any, key?: string): any {
|
|
10
|
+
if (isArray(typeName)) return typeName;
|
|
11
|
+
|
|
12
|
+
// if (isFunction(typeName) && isUndefined(props))
|
|
13
|
+
// return createFunctionalComponent((config) => typeName(flattenProps(config)));
|
|
14
|
+
|
|
15
|
+
if (typeName.type || typeName.$type) return typeName;
|
|
16
|
+
|
|
17
|
+
if (props.children && isArray(props.children) && props.children.length == 0) props.children = null;
|
|
18
|
+
|
|
19
|
+
if (props.children && props.children.length == 1) props.children = props.children[0];
|
|
20
|
+
|
|
21
|
+
if (typeName == "cx") return props.children;
|
|
22
|
+
|
|
23
|
+
if (isString(typeName) && typeName[0] == typeName[0].toLowerCase()) {
|
|
24
|
+
props.tag = typeName;
|
|
25
|
+
typeName = HtmlElement;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
return {
|
|
29
|
+
$type: typeName,
|
|
30
|
+
...props,
|
|
31
|
+
jsxAttributes: props && Object.keys(props),
|
|
32
|
+
};
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
export const jsxs = jsx;
|
|
36
|
+
|
|
37
|
+
type ReactIntrinsicElements = ReactJSX.IntrinsicElements;
|
|
38
|
+
// Check if a key is an event handler (starts with "on" and is a function)
|
|
39
|
+
type IsEventHandler<K, T> = K extends `on${string}` ? (T extends Function ? true : false) : false;
|
|
40
|
+
|
|
41
|
+
// CxJS event handler type - can be string (controller method) or callback with Instance
|
|
42
|
+
type CxEventHandler<T> = T extends (event: infer E) => any
|
|
43
|
+
? string | ((event: E, instance: Instance) => void)
|
|
44
|
+
: string | T;
|
|
45
|
+
|
|
46
|
+
type CxIntrinsicElement<T> = {
|
|
47
|
+
[K in keyof T]: K extends "children"
|
|
48
|
+
? any
|
|
49
|
+
: IsEventHandler<K, T[K]> extends true
|
|
50
|
+
? CxEventHandler<T[K]>
|
|
51
|
+
: Prop<T[K]>;
|
|
52
|
+
} & HtmlElementConfig;
|
|
53
|
+
|
|
54
|
+
type CxIntrinsicElements = {
|
|
55
|
+
[K in keyof ReactIntrinsicElements]: CxIntrinsicElement<ReactIntrinsicElements[K]>;
|
|
56
|
+
};
|
|
57
|
+
|
|
58
|
+
export namespace JSX {
|
|
59
|
+
/**
|
|
60
|
+
* Base class for JSX element instances.
|
|
61
|
+
* All widgets must extend from Widget class or React.Component.
|
|
62
|
+
*/
|
|
63
|
+
export type ElementClass = Widget<any> | React.Component<any, any>;
|
|
64
|
+
|
|
65
|
+
/**
|
|
66
|
+
* Intrinsic JSX elements (HTML-like tags).
|
|
67
|
+
* Supports HTML elements that map to HtmlElement widgets.
|
|
68
|
+
*/
|
|
69
|
+
export interface IntrinsicElements extends CxIntrinsicElements {
|
|
70
|
+
cx: any;
|
|
71
|
+
}
|
|
72
|
+
}
|
package/src/svg/BoundedObject.ts
CHANGED
|
@@ -1,101 +1,101 @@
|
|
|
1
|
-
import { Instance } from "./../ui/Instance";
|
|
2
|
-
import { StyledContainerConfig, ContainerBase } from "../ui/Container";
|
|
3
|
-
import { RenderingContext } from "../ui/RenderingContext";
|
|
4
|
-
import { Prop } from "../ui/Prop";
|
|
5
|
-
import { IRect, Rect } from "./util/Rect";
|
|
6
|
-
|
|
7
|
-
/** Typed context interface for SVG/layout-related context properties */
|
|
8
|
-
export interface SvgRenderingContext extends RenderingContext {
|
|
9
|
-
parentRect?: Rect;
|
|
10
|
-
inSvg?: boolean;
|
|
11
|
-
addClipRect?: (rect: Rect) => string;
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
export interface BoundedObjectConfig extends StyledContainerConfig {
|
|
15
|
-
/**
|
|
16
|
-
* Anchor defines how child bounds are tied to the parent. Zero aligns with the top/left edge.
|
|
17
|
-
* One aligns with the bottom/right edge. See Svg for more information.
|
|
18
|
-
*/
|
|
19
|
-
anchors?: Prop<string | number | IRect>;
|
|
20
|
-
|
|
21
|
-
/** Move boundaries specified by the offset. See Svg for more information. */
|
|
22
|
-
offset?: Prop<string | number | IRect>;
|
|
23
|
-
|
|
24
|
-
/** Apply margin to the given boundaries. See Svg for more information. */
|
|
25
|
-
margin?: Prop<string | number | IRect>;
|
|
26
|
-
|
|
27
|
-
/** Padding to be applied to the boundaries rectangle before passing to the children. */
|
|
28
|
-
padding?: Prop<string | number | IRect>;
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
export interface BoundedObjectInstance extends Instance {
|
|
32
|
-
parentRect?: any;
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
export class BoundedObject<
|
|
36
|
-
Config extends BoundedObjectConfig = BoundedObjectConfig,
|
|
37
|
-
InstanceType extends BoundedObjectInstance = BoundedObjectInstance,
|
|
38
|
-
> extends ContainerBase<Config, InstanceType> {
|
|
39
|
-
declare anchors: any;
|
|
40
|
-
declare margin: any;
|
|
41
|
-
declare offset: any;
|
|
42
|
-
declare padding: any;
|
|
43
|
-
|
|
44
|
-
declareData(...args: any[]) {
|
|
45
|
-
return super.declareData(
|
|
46
|
-
{
|
|
47
|
-
anchors: undefined,
|
|
48
|
-
offset: undefined,
|
|
49
|
-
margin: undefined,
|
|
50
|
-
padding: undefined,
|
|
51
|
-
},
|
|
52
|
-
...args,
|
|
53
|
-
);
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
prepareData(context: RenderingContext, instance: InstanceType) {
|
|
57
|
-
super.prepareData(context, instance);
|
|
58
|
-
var { data } = instance;
|
|
59
|
-
data.anchors = Rect.convert(data.anchors);
|
|
60
|
-
data.offset = Rect.convert(data.offset);
|
|
61
|
-
data.margin = Rect.convertMargin(data.margin);
|
|
62
|
-
data.padding = Rect.convertMargin(data.padding);
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
calculateBounds(context: SvgRenderingContext, instance: InstanceType) {
|
|
66
|
-
var { data } = instance;
|
|
67
|
-
return Rect.add(Rect.add(Rect.multiply(instance.parentRect, data.anchors), data.offset), data.margin);
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
prepareBounds(context: SvgRenderingContext, instance: InstanceType) {
|
|
71
|
-
var { data } = instance;
|
|
72
|
-
if (
|
|
73
|
-
instance.shouldUpdate ||
|
|
74
|
-
!instance.cached.parentRect ||
|
|
75
|
-
!instance.cached.parentRect.isEqual(context.parentRect) ||
|
|
76
|
-
!data.bounds
|
|
77
|
-
) {
|
|
78
|
-
if (!context.parentRect) throw new Error("Parent bounds were not provided through the context.");
|
|
79
|
-
instance.parentRect = context.parentRect;
|
|
80
|
-
instance.cache("parentRect", context.parentRect);
|
|
81
|
-
instance.markShouldUpdate(context);
|
|
82
|
-
data.bounds = this.calculateBounds(context, instance);
|
|
83
|
-
data.childrenBounds = Rect.add(data.bounds, data.padding);
|
|
84
|
-
}
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
prepare(context: SvgRenderingContext, instance: InstanceType) {
|
|
88
|
-
this.prepareBounds(context, instance);
|
|
89
|
-
context.push("parentRect", instance.data.childrenBounds);
|
|
90
|
-
}
|
|
91
|
-
|
|
92
|
-
prepareCleanup(context: SvgRenderingContext, instance: InstanceType) {
|
|
93
|
-
context.pop("parentRect");
|
|
94
|
-
}
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
BoundedObject.prototype.anchors = 0;
|
|
98
|
-
BoundedObject.prototype.margin = 0;
|
|
99
|
-
BoundedObject.prototype.offset = 0;
|
|
100
|
-
BoundedObject.prototype.padding = 0;
|
|
101
|
-
BoundedObject.prototype.styled = true;
|
|
1
|
+
import { Instance } from "./../ui/Instance";
|
|
2
|
+
import { StyledContainerConfig, ContainerBase } from "../ui/Container";
|
|
3
|
+
import { RenderingContext } from "../ui/RenderingContext";
|
|
4
|
+
import { Prop } from "../ui/Prop";
|
|
5
|
+
import { IRect, Rect } from "./util/Rect";
|
|
6
|
+
|
|
7
|
+
/** Typed context interface for SVG/layout-related context properties */
|
|
8
|
+
export interface SvgRenderingContext extends RenderingContext {
|
|
9
|
+
parentRect?: Rect;
|
|
10
|
+
inSvg?: boolean;
|
|
11
|
+
addClipRect?: (rect: Rect) => string;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
export interface BoundedObjectConfig extends StyledContainerConfig {
|
|
15
|
+
/**
|
|
16
|
+
* Anchor defines how child bounds are tied to the parent. Zero aligns with the top/left edge.
|
|
17
|
+
* One aligns with the bottom/right edge. See Svg for more information.
|
|
18
|
+
*/
|
|
19
|
+
anchors?: Prop<string | number | IRect>;
|
|
20
|
+
|
|
21
|
+
/** Move boundaries specified by the offset. See Svg for more information. */
|
|
22
|
+
offset?: Prop<string | number | IRect>;
|
|
23
|
+
|
|
24
|
+
/** Apply margin to the given boundaries. See Svg for more information. */
|
|
25
|
+
margin?: Prop<string | number | IRect>;
|
|
26
|
+
|
|
27
|
+
/** Padding to be applied to the boundaries rectangle before passing to the children. */
|
|
28
|
+
padding?: Prop<string | number | IRect>;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
export interface BoundedObjectInstance extends Instance {
|
|
32
|
+
parentRect?: any;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
export class BoundedObject<
|
|
36
|
+
Config extends BoundedObjectConfig = BoundedObjectConfig,
|
|
37
|
+
InstanceType extends BoundedObjectInstance = BoundedObjectInstance,
|
|
38
|
+
> extends ContainerBase<Config, InstanceType> {
|
|
39
|
+
declare anchors: any;
|
|
40
|
+
declare margin: any;
|
|
41
|
+
declare offset: any;
|
|
42
|
+
declare padding: any;
|
|
43
|
+
|
|
44
|
+
declareData(...args: any[]) {
|
|
45
|
+
return super.declareData(
|
|
46
|
+
{
|
|
47
|
+
anchors: undefined,
|
|
48
|
+
offset: undefined,
|
|
49
|
+
margin: undefined,
|
|
50
|
+
padding: undefined,
|
|
51
|
+
},
|
|
52
|
+
...args,
|
|
53
|
+
);
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
prepareData(context: RenderingContext, instance: InstanceType) {
|
|
57
|
+
super.prepareData(context, instance);
|
|
58
|
+
var { data } = instance;
|
|
59
|
+
data.anchors = Rect.convert(data.anchors);
|
|
60
|
+
data.offset = Rect.convert(data.offset);
|
|
61
|
+
data.margin = Rect.convertMargin(data.margin);
|
|
62
|
+
data.padding = Rect.convertMargin(data.padding);
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
calculateBounds(context: SvgRenderingContext, instance: InstanceType) {
|
|
66
|
+
var { data } = instance;
|
|
67
|
+
return Rect.add(Rect.add(Rect.multiply(instance.parentRect, data.anchors), data.offset), data.margin);
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
prepareBounds(context: SvgRenderingContext, instance: InstanceType) {
|
|
71
|
+
var { data } = instance;
|
|
72
|
+
if (
|
|
73
|
+
instance.shouldUpdate ||
|
|
74
|
+
!instance.cached.parentRect ||
|
|
75
|
+
!instance.cached.parentRect.isEqual(context.parentRect) ||
|
|
76
|
+
!data.bounds
|
|
77
|
+
) {
|
|
78
|
+
if (!context.parentRect) throw new Error("Parent bounds were not provided through the context.");
|
|
79
|
+
instance.parentRect = context.parentRect;
|
|
80
|
+
instance.cache("parentRect", context.parentRect);
|
|
81
|
+
instance.markShouldUpdate(context);
|
|
82
|
+
data.bounds = this.calculateBounds(context, instance);
|
|
83
|
+
data.childrenBounds = Rect.add(data.bounds, data.padding);
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
prepare(context: SvgRenderingContext, instance: InstanceType) {
|
|
88
|
+
this.prepareBounds(context, instance);
|
|
89
|
+
context.push("parentRect", instance.data.childrenBounds);
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
prepareCleanup(context: SvgRenderingContext, instance: InstanceType) {
|
|
93
|
+
context.pop("parentRect");
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
BoundedObject.prototype.anchors = 0;
|
|
98
|
+
BoundedObject.prototype.margin = 0;
|
|
99
|
+
BoundedObject.prototype.offset = 0;
|
|
100
|
+
BoundedObject.prototype.padding = 0;
|
|
101
|
+
BoundedObject.prototype.styled = true;
|
package/src/ui/CSSHelper.ts
CHANGED
|
@@ -1,17 +1,17 @@
|
|
|
1
|
-
var cssHelperCache: { [key: string]: any } = {};
|
|
2
|
-
|
|
3
|
-
export class CSSHelper {
|
|
4
|
-
static get(code: string): any {
|
|
5
|
-
var helper = cssHelperCache[code];
|
|
6
|
-
if (!helper) throw new Error(`Unknown CSS helper '${code}'.`);
|
|
7
|
-
return helper;
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
static register(code: string, helper: any): void {
|
|
11
|
-
cssHelperCache[code] = helper;
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
static alias(code: string, helper: any): void {
|
|
15
|
-
cssHelperCache[code] = helper;
|
|
16
|
-
}
|
|
17
|
-
}
|
|
1
|
+
var cssHelperCache: { [key: string]: any } = {};
|
|
2
|
+
|
|
3
|
+
export class CSSHelper {
|
|
4
|
+
static get(code: string): any {
|
|
5
|
+
var helper = cssHelperCache[code];
|
|
6
|
+
if (!helper) throw new Error(`Unknown CSS helper '${code}'.`);
|
|
7
|
+
return helper;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
static register(code: string, helper: any): void {
|
|
11
|
+
cssHelperCache[code] = helper;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
static alias(code: string, helper: any): void {
|
|
15
|
+
cssHelperCache[code] = helper;
|
|
16
|
+
}
|
|
17
|
+
}
|