@prefecthq/graphs 0.1.18 → 1.0.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.
- package/dist/assets/nodeLayout.worker-eea3d42c.js.map +1 -0
- package/dist/graphs.mjs +1 -1
- package/dist/graphs.umd.js +62 -62
- package/dist/graphs.umd.js.map +1 -1
- package/dist/{index-f0bc7447.mjs → index-7e1bf7af.mjs} +4519 -3877
- package/dist/index-7e1bf7af.mjs.map +1 -0
- package/dist/types/demo/sections/components/TimescaleTable.vue.d.ts +8 -8
- package/dist/types/demo/utilities/timescaleData.d.ts +3 -10
- package/dist/types/src/FlowRunTimeline.vue.d.ts +28 -12
- package/dist/types/src/models/FlowRunTimeline.d.ts +62 -10
- package/dist/types/src/pixiFunctions/index.d.ts +2 -0
- package/dist/types/src/pixiFunctions/nodeSprites.d.ts +19 -5
- package/dist/types/src/pixiFunctions/roundedBorderRect.d.ts +39 -0
- package/dist/types/src/pixiFunctions/subNodesToggle.d.ts +40 -0
- package/dist/types/src/pixiFunctions/timelineEdge.d.ts +31 -13
- package/dist/types/src/pixiFunctions/timelineGuide.d.ts +10 -6
- package/dist/types/src/pixiFunctions/timelineGuides.d.ts +6 -3
- package/dist/types/src/pixiFunctions/timelineNode.d.ts +84 -29
- package/dist/types/src/pixiFunctions/timelineNodes.d.ts +34 -35
- package/dist/types/src/pixiFunctions/timelinePlayhead.d.ts +7 -3
- package/dist/types/src/pixiFunctions/timelineScale.d.ts +2 -2
- package/dist/{viewport.es-5fa29f11.mjs → viewport.es-c35ed287.mjs} +2 -2
- package/dist/{viewport.es-5fa29f11.mjs.map → viewport.es-c35ed287.mjs.map} +1 -1
- package/package.json +1 -1
- package/dist/assets/nodeLayout.worker-33cd3cd7.js.map +0 -1
- package/dist/index-f0bc7447.mjs.map +0 -1
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { GraphTimelineNode } from '../../../src/models';
|
|
2
2
|
declare const _default: {
|
|
3
3
|
new (...args: any[]): {
|
|
4
4
|
$: import("vue").ComponentInternalInstance;
|
|
5
5
|
$data: {};
|
|
6
6
|
$props: Partial<{
|
|
7
|
-
data:
|
|
7
|
+
data: GraphTimelineNode[];
|
|
8
8
|
}> & Omit<Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
|
|
9
|
-
data?:
|
|
9
|
+
data?: GraphTimelineNode[] | undefined;
|
|
10
10
|
}>, {
|
|
11
11
|
data: () => never[];
|
|
12
12
|
}>>> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "data">;
|
|
@@ -24,11 +24,11 @@ declare const _default: {
|
|
|
24
24
|
$emit: (event: string, ...args: any[]) => void;
|
|
25
25
|
$el: any;
|
|
26
26
|
$options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
|
|
27
|
-
data?:
|
|
27
|
+
data?: GraphTimelineNode[] | undefined;
|
|
28
28
|
}>, {
|
|
29
29
|
data: () => never[];
|
|
30
30
|
}>>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
|
|
31
|
-
data:
|
|
31
|
+
data: GraphTimelineNode[];
|
|
32
32
|
}, {}, string> & {
|
|
33
33
|
beforeCreate?: ((() => void) | (() => void)[]) | undefined;
|
|
34
34
|
created?: ((() => void) | (() => void)[]) | undefined;
|
|
@@ -50,7 +50,7 @@ declare const _default: {
|
|
|
50
50
|
$nextTick: typeof import("vue").nextTick;
|
|
51
51
|
$watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (args_0: R, args_1: R) => any : (...args: any) => any, options?: import("vue").WatchOptions<boolean> | undefined): import("vue").WatchStopHandle;
|
|
52
52
|
} & Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
|
|
53
|
-
data?:
|
|
53
|
+
data?: GraphTimelineNode[] | undefined;
|
|
54
54
|
}>, {
|
|
55
55
|
data: () => never[];
|
|
56
56
|
}>>> & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties & {};
|
|
@@ -58,11 +58,11 @@ declare const _default: {
|
|
|
58
58
|
__isTeleport?: undefined;
|
|
59
59
|
__isSuspense?: undefined;
|
|
60
60
|
} & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
|
|
61
|
-
data?:
|
|
61
|
+
data?: GraphTimelineNode[] | undefined;
|
|
62
62
|
}>, {
|
|
63
63
|
data: () => never[];
|
|
64
64
|
}>>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
|
|
65
|
-
data:
|
|
65
|
+
data: GraphTimelineNode[];
|
|
66
66
|
}, {}, string> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps;
|
|
67
67
|
export default _default;
|
|
68
68
|
type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { GraphTimelineNode } from '../../src/models';
|
|
1
2
|
export type TimelineNodeState = 'completed' | 'running' | 'scheduled' | 'pending' | 'failed' | 'cancelled' | 'crashed' | 'paused';
|
|
2
3
|
export type Shape = 'linear' | 'fanOut' | 'fanOutIn';
|
|
3
4
|
export type DataOptions = {
|
|
@@ -6,16 +7,8 @@ export type DataOptions = {
|
|
|
6
7
|
shape?: Shape;
|
|
7
8
|
size?: number;
|
|
8
9
|
fanMultiplier?: number;
|
|
10
|
+
subFlowOccurrence?: number;
|
|
9
11
|
zeroTimeGap?: boolean;
|
|
10
12
|
};
|
|
11
|
-
|
|
12
|
-
id: string;
|
|
13
|
-
label: string;
|
|
14
|
-
start: Date;
|
|
15
|
-
end: Date | null;
|
|
16
|
-
upstreamDependencies: string[];
|
|
17
|
-
state: TimelineNodeState;
|
|
18
|
-
};
|
|
19
|
-
declare const generateTimescaleData: (options?: DataOptions) => TimescaleItem[];
|
|
20
|
-
export type { TimescaleItem };
|
|
13
|
+
declare const generateTimescaleData: (options?: DataOptions) => GraphTimelineNode[];
|
|
21
14
|
export { generateTimescaleData };
|
|
@@ -1,18 +1,21 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { GraphTimelineNode, TimelineThemeOptions, FormatDateFns, TimelineNodesLayoutOptions, CenterViewportOptions, ExpandedSubNodes, NodeSelectionEvent } from './models';
|
|
2
2
|
declare const _default: {
|
|
3
3
|
new (...args: any[]): {
|
|
4
4
|
$: import("vue").ComponentInternalInstance;
|
|
5
5
|
$data: {};
|
|
6
6
|
$props: Partial<{}> & Omit<Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
|
|
7
|
-
graphData:
|
|
7
|
+
graphData: GraphTimelineNode[];
|
|
8
8
|
isRunning?: boolean | undefined;
|
|
9
9
|
theme?: TimelineThemeOptions | undefined;
|
|
10
10
|
formatDateFns?: Partial<FormatDateFns> | undefined;
|
|
11
11
|
selectedNodeId?: string | null | undefined;
|
|
12
12
|
layout?: TimelineNodesLayoutOptions | undefined;
|
|
13
13
|
hideEdges?: boolean | undefined;
|
|
14
|
+
subNodeLabels?: Map<string, string> | undefined;
|
|
15
|
+
expandedSubNodes?: ExpandedSubNodes<Record<string, unknown>> | undefined;
|
|
14
16
|
}>>> & {
|
|
15
|
-
|
|
17
|
+
onSelection?: ((value: NodeSelectionEvent | null) => any) | undefined;
|
|
18
|
+
onSubNodeToggle?: ((value: string) => any) | undefined;
|
|
16
19
|
} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>;
|
|
17
20
|
$attrs: {
|
|
18
21
|
[x: string]: unknown;
|
|
@@ -25,18 +28,21 @@ declare const _default: {
|
|
|
25
28
|
}>;
|
|
26
29
|
$root: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null;
|
|
27
30
|
$parent: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null;
|
|
28
|
-
$emit: (event: "
|
|
31
|
+
$emit: ((event: "selection", value: NodeSelectionEvent | null) => void) & ((event: "subNodeToggle", value: string) => void);
|
|
29
32
|
$el: any;
|
|
30
33
|
$options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
|
|
31
|
-
graphData:
|
|
34
|
+
graphData: GraphTimelineNode[];
|
|
32
35
|
isRunning?: boolean | undefined;
|
|
33
36
|
theme?: TimelineThemeOptions | undefined;
|
|
34
37
|
formatDateFns?: Partial<FormatDateFns> | undefined;
|
|
35
38
|
selectedNodeId?: string | null | undefined;
|
|
36
39
|
layout?: TimelineNodesLayoutOptions | undefined;
|
|
37
40
|
hideEdges?: boolean | undefined;
|
|
41
|
+
subNodeLabels?: Map<string, string> | undefined;
|
|
42
|
+
expandedSubNodes?: ExpandedSubNodes<Record<string, unknown>> | undefined;
|
|
38
43
|
}>>> & {
|
|
39
|
-
|
|
44
|
+
onSelection?: ((value: NodeSelectionEvent | null) => any) | undefined;
|
|
45
|
+
onSubNodeToggle?: ((value: string) => any) | undefined;
|
|
40
46
|
}, {
|
|
41
47
|
centerViewport: ({ skipAnimation }?: CenterViewportOptions) => void;
|
|
42
48
|
moveViewportCenter: ({ xOffset, yOffset }: {
|
|
@@ -44,7 +50,9 @@ declare const _default: {
|
|
|
44
50
|
yOffset: number;
|
|
45
51
|
}) => void;
|
|
46
52
|
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
47
|
-
|
|
53
|
+
selection: (value: NodeSelectionEvent | null) => void;
|
|
54
|
+
} & {
|
|
55
|
+
subNodeToggle: (value: string) => void;
|
|
48
56
|
}, string, {}, {}, string> & {
|
|
49
57
|
beforeCreate?: ((() => void) | (() => void)[]) | undefined;
|
|
50
58
|
created?: ((() => void) | (() => void)[]) | undefined;
|
|
@@ -66,15 +74,18 @@ declare const _default: {
|
|
|
66
74
|
$nextTick: typeof import("vue").nextTick;
|
|
67
75
|
$watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (args_0: R, args_1: R) => any : (...args: any) => any, options?: import("vue").WatchOptions<boolean> | undefined): import("vue").WatchStopHandle;
|
|
68
76
|
} & Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
|
|
69
|
-
graphData:
|
|
77
|
+
graphData: GraphTimelineNode[];
|
|
70
78
|
isRunning?: boolean | undefined;
|
|
71
79
|
theme?: TimelineThemeOptions | undefined;
|
|
72
80
|
formatDateFns?: Partial<FormatDateFns> | undefined;
|
|
73
81
|
selectedNodeId?: string | null | undefined;
|
|
74
82
|
layout?: TimelineNodesLayoutOptions | undefined;
|
|
75
83
|
hideEdges?: boolean | undefined;
|
|
84
|
+
subNodeLabels?: Map<string, string> | undefined;
|
|
85
|
+
expandedSubNodes?: ExpandedSubNodes<Record<string, unknown>> | undefined;
|
|
76
86
|
}>>> & {
|
|
77
|
-
|
|
87
|
+
onSelection?: ((value: NodeSelectionEvent | null) => any) | undefined;
|
|
88
|
+
onSubNodeToggle?: ((value: string) => any) | undefined;
|
|
78
89
|
} & import("vue").ShallowUnwrapRef<{
|
|
79
90
|
centerViewport: ({ skipAnimation }?: CenterViewportOptions) => void;
|
|
80
91
|
moveViewportCenter: ({ xOffset, yOffset }: {
|
|
@@ -86,15 +97,18 @@ declare const _default: {
|
|
|
86
97
|
__isTeleport?: undefined;
|
|
87
98
|
__isSuspense?: undefined;
|
|
88
99
|
} & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
|
|
89
|
-
graphData:
|
|
100
|
+
graphData: GraphTimelineNode[];
|
|
90
101
|
isRunning?: boolean | undefined;
|
|
91
102
|
theme?: TimelineThemeOptions | undefined;
|
|
92
103
|
formatDateFns?: Partial<FormatDateFns> | undefined;
|
|
93
104
|
selectedNodeId?: string | null | undefined;
|
|
94
105
|
layout?: TimelineNodesLayoutOptions | undefined;
|
|
95
106
|
hideEdges?: boolean | undefined;
|
|
107
|
+
subNodeLabels?: Map<string, string> | undefined;
|
|
108
|
+
expandedSubNodes?: ExpandedSubNodes<Record<string, unknown>> | undefined;
|
|
96
109
|
}>>> & {
|
|
97
|
-
|
|
110
|
+
onSelection?: ((value: NodeSelectionEvent | null) => any) | undefined;
|
|
111
|
+
onSubNodeToggle?: ((value: string) => any) | undefined;
|
|
98
112
|
}, {
|
|
99
113
|
centerViewport: ({ skipAnimation }?: CenterViewportOptions) => void;
|
|
100
114
|
moveViewportCenter: ({ xOffset, yOffset }: {
|
|
@@ -102,7 +116,9 @@ declare const _default: {
|
|
|
102
116
|
yOffset: number;
|
|
103
117
|
}) => void;
|
|
104
118
|
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
105
|
-
|
|
119
|
+
selection: (value: NodeSelectionEvent | null) => void;
|
|
120
|
+
} & {
|
|
121
|
+
subNodeToggle: (value: string) => void;
|
|
106
122
|
}, string, {}, {}, string> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps;
|
|
107
123
|
export default _default;
|
|
108
124
|
type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
|
|
@@ -1,23 +1,35 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
1
|
+
import { Cull } from '@pixi-essentials/cull';
|
|
2
|
+
import type { Viewport } from 'pixi-viewport';
|
|
3
|
+
import type { Application, IBitmapTextStyle, TextStyle } from 'pixi.js';
|
|
4
|
+
import type { ComputedRef } from 'vue';
|
|
5
|
+
export type GraphTimelineNode = {
|
|
3
6
|
id: string;
|
|
4
7
|
label: string;
|
|
5
8
|
start: Date;
|
|
6
9
|
end: Date | null;
|
|
7
|
-
upstreamDependencies?: string[];
|
|
8
10
|
state: string;
|
|
11
|
+
upstreamDependencies?: string[];
|
|
12
|
+
subFlowRunId?: string;
|
|
9
13
|
};
|
|
10
14
|
export type InitTimelineScaleProps = {
|
|
11
15
|
minimumStartTime: number;
|
|
12
|
-
|
|
16
|
+
graphXDomain: number;
|
|
13
17
|
initialOverallTimeSpan: number;
|
|
14
18
|
};
|
|
15
19
|
export type TimelineNodesLayoutOptions = 'waterfall' | 'nearestParent';
|
|
20
|
+
export type NodeSelectionEventTypes = 'task' | 'subFlowRun';
|
|
21
|
+
export type NodeSelectionEvent = {
|
|
22
|
+
id: string;
|
|
23
|
+
type: NodeSelectionEventTypes;
|
|
24
|
+
};
|
|
25
|
+
export type ExpandedSubNodes<T extends Record<string, unknown> = Record<string, unknown>> = Map<string, {
|
|
26
|
+
data: GraphTimelineNode[] | ComputedRef<GraphTimelineNode[]>;
|
|
27
|
+
} & T>;
|
|
16
28
|
export type NodeShoveDirection = 1 | -1;
|
|
17
29
|
export type NodeLayoutWorkerProps = {
|
|
18
30
|
data: {
|
|
19
31
|
layoutSetting?: TimelineNodesLayoutOptions;
|
|
20
|
-
graphData
|
|
32
|
+
graphData?: string;
|
|
21
33
|
apxCharacterWidth?: number;
|
|
22
34
|
spacingMinimumNodeEdgeGap?: number;
|
|
23
35
|
timeScaleProps?: InitTimelineScaleProps;
|
|
@@ -31,11 +43,33 @@ export type NodeLayoutItem = {
|
|
|
31
43
|
endX: number;
|
|
32
44
|
};
|
|
33
45
|
export type NodesLayout = Record<string, NodeLayoutItem>;
|
|
46
|
+
export type NodeLayoutRow = {
|
|
47
|
+
yPos: number;
|
|
48
|
+
height: number;
|
|
49
|
+
};
|
|
50
|
+
export type NodeLayoutWorkerResponseData = {
|
|
51
|
+
layout: NodesLayout;
|
|
52
|
+
centerViewportAfter?: boolean;
|
|
53
|
+
};
|
|
34
54
|
export type NodeLayoutWorkerResponse = {
|
|
35
|
-
data:
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
55
|
+
data: NodeLayoutWorkerResponseData;
|
|
56
|
+
};
|
|
57
|
+
export type GraphState = {
|
|
58
|
+
pixiApp: Application;
|
|
59
|
+
viewport: Viewport;
|
|
60
|
+
cull: Cull;
|
|
61
|
+
cullScreen: () => void;
|
|
62
|
+
timeScaleProps: InitTimelineScaleProps;
|
|
63
|
+
styleOptions: ComputedRef<ParsedThemeStyles>;
|
|
64
|
+
styleNode: ComputedRef<NodeThemeFn>;
|
|
65
|
+
layoutSetting: ComputedRef<TimelineNodesLayoutOptions>;
|
|
66
|
+
isRunning: ComputedRef<boolean>;
|
|
67
|
+
hideEdges: ComputedRef<boolean>;
|
|
68
|
+
subNodeLabels: ComputedRef<Map<string, string>>;
|
|
69
|
+
selectedNodeId: ComputedRef<string | null>;
|
|
70
|
+
expandedSubNodes: ComputedRef<ExpandedSubNodes>;
|
|
71
|
+
suppressMotion: ComputedRef<boolean>;
|
|
72
|
+
centerViewport: (options?: CenterViewportOptions) => void;
|
|
39
73
|
};
|
|
40
74
|
export type DateToX = (date: Date) => number;
|
|
41
75
|
export type XToDate = (xPosition: number) => number;
|
|
@@ -63,8 +97,10 @@ export declare const formatDateFnsDefault: FormatDateFns;
|
|
|
63
97
|
type NodeThemeOptions = {
|
|
64
98
|
fill: string;
|
|
65
99
|
inverseTextOnFill: boolean;
|
|
100
|
+
onFillSubNodeToggleHoverBg: string;
|
|
101
|
+
onFillSubNodeToggleHoverBgAlpha: number;
|
|
66
102
|
};
|
|
67
|
-
export type NodeThemeFn = (node:
|
|
103
|
+
export type NodeThemeFn = (node: GraphTimelineNode) => NodeThemeOptions;
|
|
68
104
|
export declare const nodeThemeFnDefault: NodeThemeFn;
|
|
69
105
|
type Sizing = `${string}px` | `${string}em` | `${string}rem`;
|
|
70
106
|
export type RGB = `rgb(${number}, ${number}, ${number})`;
|
|
@@ -77,6 +113,9 @@ export type ThemeStyleOverrides = {
|
|
|
77
113
|
colorTextInverse?: Color;
|
|
78
114
|
colorTextSubdued?: Color;
|
|
79
115
|
colorNodeSelection?: Color;
|
|
116
|
+
colorButtonBg?: Color;
|
|
117
|
+
colorButtonBgHover?: Color;
|
|
118
|
+
colorButtonBorder?: Color | null;
|
|
80
119
|
colorEdge?: Color;
|
|
81
120
|
colorGuideLine?: Color;
|
|
82
121
|
colorPlayheadBg?: Color;
|
|
@@ -85,6 +124,7 @@ export type ThemeStyleOverrides = {
|
|
|
85
124
|
textSizeSmall?: Sizing;
|
|
86
125
|
textLineHeightDefault?: Sizing;
|
|
87
126
|
textLineHeightSmall?: Sizing;
|
|
127
|
+
spacingButtonBorderWidth?: Sizing;
|
|
88
128
|
spacingViewportPaddingDefault?: Sizing;
|
|
89
129
|
spacingNodeXPadding?: Sizing;
|
|
90
130
|
spacingNodeYPadding?: Sizing;
|
|
@@ -94,18 +134,25 @@ export type ThemeStyleOverrides = {
|
|
|
94
134
|
spacingNodeEdgeLength?: Sizing;
|
|
95
135
|
spacingNodeSelectionMargin?: Sizing;
|
|
96
136
|
spacingNodeSelectionWidth?: Sizing;
|
|
137
|
+
spacingSubNodesOutlineBorderWidth?: Sizing;
|
|
138
|
+
spacingSubNodesOutlineOffset?: Sizing;
|
|
97
139
|
spacingEdgeWidth?: Sizing;
|
|
98
140
|
spacingGuideLabelPadding?: Sizing;
|
|
99
141
|
spacingPlayheadWidth?: Sizing;
|
|
100
142
|
spacingPlayheadGlowPadding?: Sizing;
|
|
101
143
|
borderRadiusNode?: Sizing;
|
|
144
|
+
borderRadiusButton?: Sizing;
|
|
102
145
|
alphaNodeDimmed?: number;
|
|
146
|
+
alphaSubNodesOutlineDimmed?: number;
|
|
103
147
|
};
|
|
104
148
|
export type ParsedThemeStyles = {
|
|
105
149
|
colorTextDefault: number;
|
|
106
150
|
colorTextInverse: number;
|
|
107
151
|
colorTextSubdued: number;
|
|
108
152
|
colorNodeSelection: number;
|
|
153
|
+
colorButtonBg: number;
|
|
154
|
+
colorButtonBgHover: number;
|
|
155
|
+
colorButtonBorder: number | null;
|
|
109
156
|
colorEdge: number;
|
|
110
157
|
colorGuideLine: number;
|
|
111
158
|
colorPlayheadBg: number;
|
|
@@ -114,6 +161,7 @@ export type ParsedThemeStyles = {
|
|
|
114
161
|
textSizeSmall: number;
|
|
115
162
|
textLineHeightDefault: number;
|
|
116
163
|
textLineHeightSmall: number;
|
|
164
|
+
spacingButtonBorderWidth: number;
|
|
117
165
|
spacingViewportPaddingDefault: number;
|
|
118
166
|
spacingNodeXPadding: number;
|
|
119
167
|
spacingNodeYPadding: number;
|
|
@@ -123,12 +171,16 @@ export type ParsedThemeStyles = {
|
|
|
123
171
|
spacingNodeEdgeLength: number;
|
|
124
172
|
spacingNodeSelectionMargin: number;
|
|
125
173
|
spacingNodeSelectionWidth: number;
|
|
174
|
+
spacingSubNodesOutlineBorderWidth: number;
|
|
175
|
+
spacingSubNodesOutlineOffset: number;
|
|
126
176
|
spacingEdgeWidth: number;
|
|
127
177
|
spacingGuideLabelPadding: number;
|
|
128
178
|
spacingPlayheadWidth: number;
|
|
129
179
|
spacingPlayheadGlowPadding: number;
|
|
130
180
|
borderRadiusNode: number;
|
|
181
|
+
borderRadiusButton: number;
|
|
131
182
|
alphaNodeDimmed: number;
|
|
183
|
+
alphaSubNodesOutlineDimmed: number;
|
|
132
184
|
};
|
|
133
185
|
export type TimelineThemeOptions = {
|
|
134
186
|
node?: NodeThemeFn;
|
|
@@ -3,9 +3,11 @@ export * from './deselectLayer';
|
|
|
3
3
|
export * from './initPixiApp';
|
|
4
4
|
export * from './initViewport';
|
|
5
5
|
export * from './nodeSprites';
|
|
6
|
+
export * from './roundedBorderRect';
|
|
6
7
|
export * from './timelineEdge';
|
|
7
8
|
export * from './timelineGuides';
|
|
8
9
|
export * from './timelineNode';
|
|
9
10
|
export * from './timelineNodes';
|
|
10
11
|
export * from './timelinePlayhead';
|
|
11
12
|
export * from './timelineScale';
|
|
13
|
+
export * from './subNodesToggle';
|
|
@@ -1,20 +1,34 @@
|
|
|
1
1
|
import { Application, Texture } from 'pixi.js';
|
|
2
|
+
export declare const simpleFillTextureSize = 10;
|
|
2
3
|
type BoxTextures = Record<'cap' | 'body', Texture>;
|
|
4
|
+
type BorderRectTextures = Record<'corner' | 'edge', Texture>;
|
|
3
5
|
export declare function initNodeTextureCache(): void;
|
|
4
6
|
export declare function destroyNodeTextureCache(): void;
|
|
7
|
+
type SimpleFillTextureProps = {
|
|
8
|
+
pixiApp: Application;
|
|
9
|
+
fill: number;
|
|
10
|
+
};
|
|
11
|
+
export declare function getSimpleFillTexture({ pixiApp, fill, }: SimpleFillTextureProps): Texture;
|
|
5
12
|
type GetNodeBoxTexturesProps = {
|
|
6
|
-
|
|
13
|
+
pixiApp: Application;
|
|
7
14
|
fill: number;
|
|
8
15
|
borderRadius: number;
|
|
9
16
|
boxCapWidth: number;
|
|
10
17
|
height: number;
|
|
11
18
|
};
|
|
12
|
-
export declare function getNodeBoxTextures({
|
|
13
|
-
type
|
|
14
|
-
|
|
19
|
+
export declare function getNodeBoxTextures({ pixiApp, fill, borderRadius, boxCapWidth, height, }: GetNodeBoxTexturesProps): BoxTextures;
|
|
20
|
+
type GetArrowTextureProps = {
|
|
21
|
+
pixiApp: Application;
|
|
15
22
|
strokeColor: number;
|
|
16
23
|
edgeWidth: number;
|
|
17
24
|
edgeLength: number;
|
|
18
25
|
};
|
|
19
|
-
export declare function
|
|
26
|
+
export declare function getArrowTexture({ pixiApp, strokeColor, edgeWidth, edgeLength, }: GetArrowTextureProps): Texture;
|
|
27
|
+
type GetRoundedBorderRectTexturesProps = {
|
|
28
|
+
pixiApp: Application;
|
|
29
|
+
borderRadius: number;
|
|
30
|
+
borderColor: number;
|
|
31
|
+
borderWidth: number;
|
|
32
|
+
};
|
|
33
|
+
export declare function getRoundedBorderRectTextures({ pixiApp, borderRadius, borderColor, borderWidth, }: GetRoundedBorderRectTexturesProps): BorderRectTextures;
|
|
20
34
|
export {};
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import { Container } from 'pixi.js';
|
|
2
|
+
import { GraphState } from '../models';
|
|
3
|
+
export declare const roundedBorderRectAnimationDuration = 0.2;
|
|
4
|
+
export declare const roundedBorderRectAnimationEase = "power2.out";
|
|
5
|
+
type RoundedBorderRectResizeProps = {
|
|
6
|
+
width: number;
|
|
7
|
+
height: number;
|
|
8
|
+
animate?: boolean;
|
|
9
|
+
};
|
|
10
|
+
type RoundedBorderRectProps = {
|
|
11
|
+
graphState: GraphState;
|
|
12
|
+
width: number;
|
|
13
|
+
height: number;
|
|
14
|
+
borderRadius: number;
|
|
15
|
+
borderColor: number;
|
|
16
|
+
borderWidth: number;
|
|
17
|
+
};
|
|
18
|
+
export declare class RoundedBorderRect extends Container {
|
|
19
|
+
private readonly graphState;
|
|
20
|
+
private rectWidth;
|
|
21
|
+
private rectHeight;
|
|
22
|
+
private readonly borderRadius;
|
|
23
|
+
private readonly borderColor;
|
|
24
|
+
private readonly borderWidth;
|
|
25
|
+
private topLeft;
|
|
26
|
+
private topRight;
|
|
27
|
+
private bottomRight;
|
|
28
|
+
private bottomLeft;
|
|
29
|
+
private topEdge;
|
|
30
|
+
private rightEdge;
|
|
31
|
+
private bottomEdge;
|
|
32
|
+
private leftEdge;
|
|
33
|
+
constructor({ graphState, width, height, borderRadius, borderColor, borderWidth, }: RoundedBorderRectProps);
|
|
34
|
+
private initRect;
|
|
35
|
+
resize({ width, height, animate, }: RoundedBorderRectResizeProps): void;
|
|
36
|
+
private killTweens;
|
|
37
|
+
destroy(): void;
|
|
38
|
+
}
|
|
39
|
+
export {};
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import { Container } from 'pixi.js';
|
|
2
|
+
import { GraphState, GraphTimelineNode } from '../models';
|
|
3
|
+
type SubNodesToggleProps = {
|
|
4
|
+
graphState: GraphState;
|
|
5
|
+
nodeData: GraphTimelineNode;
|
|
6
|
+
size: number;
|
|
7
|
+
floating?: boolean;
|
|
8
|
+
};
|
|
9
|
+
export declare class SubNodesToggle extends Container {
|
|
10
|
+
private readonly graphState;
|
|
11
|
+
private readonly nodeData;
|
|
12
|
+
private readonly size;
|
|
13
|
+
private isFloating;
|
|
14
|
+
private isExpanded;
|
|
15
|
+
private textColor;
|
|
16
|
+
private readonly toggleBox;
|
|
17
|
+
private readonly hoverShade;
|
|
18
|
+
private toggleArrow;
|
|
19
|
+
private toggleBorder;
|
|
20
|
+
private divider;
|
|
21
|
+
private readonly unWatchers;
|
|
22
|
+
constructor({ graphState, nodeData, size, floating, }: SubNodesToggleProps);
|
|
23
|
+
private initWatchers;
|
|
24
|
+
private initShapes;
|
|
25
|
+
private drawToggleBox;
|
|
26
|
+
private drawHoverShade;
|
|
27
|
+
private drawDivider;
|
|
28
|
+
private drawToggleArrow;
|
|
29
|
+
private drawToggleBorder;
|
|
30
|
+
private setToggleArrowRotation;
|
|
31
|
+
private getTextColor;
|
|
32
|
+
private redraw;
|
|
33
|
+
private hover;
|
|
34
|
+
private unHover;
|
|
35
|
+
setExpanded(): void;
|
|
36
|
+
setCollapsed(): void;
|
|
37
|
+
updateFloatingState(value: boolean): void;
|
|
38
|
+
destroy(): void;
|
|
39
|
+
}
|
|
40
|
+
export {};
|
|
@@ -1,31 +1,49 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import { ParsedThemeStyles } from '../models';
|
|
1
|
+
import { Container } from 'pixi.js';
|
|
2
|
+
import { GraphState } from '../models';
|
|
4
3
|
import { TimelineNode } from '../pixiFunctions';
|
|
5
4
|
type TimelineEdgeProps = {
|
|
6
|
-
appRef: Application;
|
|
7
|
-
styles: ComputedRef<ParsedThemeStyles>;
|
|
8
5
|
sourceNode: TimelineNode;
|
|
9
6
|
targetNode: TimelineNode;
|
|
7
|
+
graphState: GraphState;
|
|
10
8
|
};
|
|
11
9
|
export declare class TimelineEdge extends Container {
|
|
12
|
-
private readonly appRef;
|
|
13
|
-
private readonly styles;
|
|
14
10
|
private readonly sourceNode;
|
|
15
11
|
private readonly targetNode;
|
|
12
|
+
private readonly graphState;
|
|
16
13
|
private sourceX;
|
|
17
14
|
private sourceY;
|
|
18
15
|
private targetX;
|
|
19
16
|
private targetY;
|
|
17
|
+
private sourceControlPointX;
|
|
18
|
+
private sourceControlPointY;
|
|
19
|
+
private targetControlPointX;
|
|
20
|
+
private targetControlPointY;
|
|
21
|
+
private readonly edgePoints;
|
|
20
22
|
private readonly edge;
|
|
21
23
|
private readonly arrow;
|
|
22
|
-
private readonly
|
|
23
|
-
constructor({
|
|
24
|
-
private
|
|
25
|
-
private
|
|
26
|
-
private
|
|
24
|
+
private readonly unWatchers;
|
|
25
|
+
constructor({ sourceNode, targetNode, graphState, }: TimelineEdgeProps);
|
|
26
|
+
private initCulling;
|
|
27
|
+
private initWatchers;
|
|
28
|
+
private assignBezierPositions;
|
|
29
|
+
private initEdge;
|
|
30
|
+
private initEdgePoints;
|
|
27
31
|
private drawArrow;
|
|
28
|
-
|
|
32
|
+
/**
|
|
33
|
+
* Update functions
|
|
34
|
+
*/
|
|
35
|
+
update(): void;
|
|
36
|
+
private updateStyle;
|
|
37
|
+
/**
|
|
38
|
+
* Utilities
|
|
39
|
+
*/
|
|
40
|
+
private hasEdgeChanged;
|
|
41
|
+
private getSourceX;
|
|
42
|
+
private getNodeY;
|
|
43
|
+
private readonly getXBezier;
|
|
44
|
+
private getEdgeTexture;
|
|
45
|
+
private readonly getPointBezierPosition;
|
|
46
|
+
private getTargetAnchorPointPosition;
|
|
29
47
|
destroy(): void;
|
|
30
48
|
}
|
|
31
49
|
export {};
|
|
@@ -1,20 +1,24 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { Cull } from '@pixi-essentials/cull';
|
|
2
|
+
import { Application, Container } from 'pixi.js';
|
|
2
3
|
import { ComputedRef } from 'vue';
|
|
3
4
|
import { ParsedThemeStyles } from '../models';
|
|
4
5
|
type TimelineGuideProps = {
|
|
6
|
+
appRef: Application;
|
|
5
7
|
labelText: string | null;
|
|
6
8
|
styles: ComputedRef<ParsedThemeStyles>;
|
|
7
|
-
|
|
9
|
+
cull: Cull;
|
|
8
10
|
};
|
|
9
11
|
export declare class TimelineGuide extends Container {
|
|
12
|
+
private readonly appRef;
|
|
10
13
|
private readonly labelText;
|
|
11
14
|
private readonly styles;
|
|
12
|
-
private
|
|
13
|
-
private
|
|
15
|
+
private readonly cull;
|
|
16
|
+
private guideLine;
|
|
14
17
|
private label;
|
|
15
|
-
constructor({ labelText, styles,
|
|
16
|
-
private
|
|
18
|
+
constructor({ appRef, labelText, styles, cull, }: TimelineGuideProps);
|
|
19
|
+
private initGuideLine;
|
|
17
20
|
private drawLabel;
|
|
18
21
|
updateHeight(appHeight: number): void;
|
|
22
|
+
destroy(): void;
|
|
19
23
|
}
|
|
20
24
|
export {};
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { Cull } from '@pixi-essentials/cull';
|
|
1
2
|
import type { Viewport } from 'pixi-viewport';
|
|
2
3
|
import { Application, Container } from 'pixi.js';
|
|
3
4
|
import { ComputedRef, Ref } from 'vue';
|
|
@@ -5,26 +6,28 @@ import { FormatDateFns, ParsedThemeStyles } from '../models';
|
|
|
5
6
|
type TimelineGuidesProps = {
|
|
6
7
|
viewportRef: Viewport;
|
|
7
8
|
appRef: Application;
|
|
9
|
+
cull: Cull;
|
|
8
10
|
minimumStartDate: Date;
|
|
9
11
|
maximumEndDate: Ref<Date | undefined>;
|
|
10
12
|
isRunning: boolean;
|
|
11
|
-
|
|
13
|
+
styleOptions: ComputedRef<ParsedThemeStyles>;
|
|
12
14
|
formatDateFns: ComputedRef<FormatDateFns>;
|
|
13
15
|
};
|
|
14
16
|
export declare class TimelineGuides extends Container {
|
|
15
17
|
private readonly viewportRef;
|
|
16
18
|
private readonly appRef;
|
|
19
|
+
private readonly cull;
|
|
17
20
|
private readonly minimumStartDate;
|
|
18
21
|
private readonly maximumEndDate;
|
|
19
22
|
private readonly isRunning;
|
|
20
|
-
private readonly
|
|
23
|
+
private readonly styleOptions;
|
|
21
24
|
private readonly formatDateFns;
|
|
22
25
|
private readonly unwatch;
|
|
23
26
|
private idealGuideCount;
|
|
24
27
|
private currentTimeGap;
|
|
25
28
|
private labelFormatter;
|
|
26
29
|
private readonly guides;
|
|
27
|
-
constructor({ viewportRef, appRef, minimumStartDate, maximumEndDate, isRunning,
|
|
30
|
+
constructor({ viewportRef, appRef, cull, minimumStartDate, maximumEndDate, isRunning, styleOptions, formatDateFns, }: TimelineGuidesProps);
|
|
28
31
|
updateGuides(): void;
|
|
29
32
|
private updateIdealGuideCount;
|
|
30
33
|
private updateCurrentTimeGap;
|