@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.
Files changed (26) hide show
  1. package/dist/assets/nodeLayout.worker-eea3d42c.js.map +1 -0
  2. package/dist/graphs.mjs +1 -1
  3. package/dist/graphs.umd.js +62 -62
  4. package/dist/graphs.umd.js.map +1 -1
  5. package/dist/{index-f0bc7447.mjs → index-7e1bf7af.mjs} +4519 -3877
  6. package/dist/index-7e1bf7af.mjs.map +1 -0
  7. package/dist/types/demo/sections/components/TimescaleTable.vue.d.ts +8 -8
  8. package/dist/types/demo/utilities/timescaleData.d.ts +3 -10
  9. package/dist/types/src/FlowRunTimeline.vue.d.ts +28 -12
  10. package/dist/types/src/models/FlowRunTimeline.d.ts +62 -10
  11. package/dist/types/src/pixiFunctions/index.d.ts +2 -0
  12. package/dist/types/src/pixiFunctions/nodeSprites.d.ts +19 -5
  13. package/dist/types/src/pixiFunctions/roundedBorderRect.d.ts +39 -0
  14. package/dist/types/src/pixiFunctions/subNodesToggle.d.ts +40 -0
  15. package/dist/types/src/pixiFunctions/timelineEdge.d.ts +31 -13
  16. package/dist/types/src/pixiFunctions/timelineGuide.d.ts +10 -6
  17. package/dist/types/src/pixiFunctions/timelineGuides.d.ts +6 -3
  18. package/dist/types/src/pixiFunctions/timelineNode.d.ts +84 -29
  19. package/dist/types/src/pixiFunctions/timelineNodes.d.ts +34 -35
  20. package/dist/types/src/pixiFunctions/timelinePlayhead.d.ts +7 -3
  21. package/dist/types/src/pixiFunctions/timelineScale.d.ts +2 -2
  22. package/dist/{viewport.es-5fa29f11.mjs → viewport.es-c35ed287.mjs} +2 -2
  23. package/dist/{viewport.es-5fa29f11.mjs.map → viewport.es-c35ed287.mjs.map} +1 -1
  24. package/package.json +1 -1
  25. package/dist/assets/nodeLayout.worker-33cd3cd7.js.map +0 -1
  26. package/dist/index-f0bc7447.mjs.map +0 -1
@@ -1,12 +1,12 @@
1
- import { TimescaleItem } from '../../utilities/timescaleData';
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: TimescaleItem[];
7
+ data: GraphTimelineNode[];
8
8
  }> & Omit<Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
9
- data?: TimescaleItem[] | undefined;
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?: TimescaleItem[] | undefined;
27
+ data?: GraphTimelineNode[] | undefined;
28
28
  }>, {
29
29
  data: () => never[];
30
30
  }>>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
31
- data: TimescaleItem[];
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?: TimescaleItem[] | undefined;
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?: TimescaleItem[] | undefined;
61
+ data?: GraphTimelineNode[] | undefined;
62
62
  }>, {
63
63
  data: () => never[];
64
64
  }>>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
65
- data: TimescaleItem[];
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
- type TimescaleItem = {
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 { TimelineNodeData, TimelineThemeOptions, FormatDateFns, TimelineNodesLayoutOptions, CenterViewportOptions } from './models';
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: TimelineNodeData[];
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
- onClick?: ((value: string | null) => any) | undefined;
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: "click", value: string | null) => void;
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: TimelineNodeData[];
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
- onClick?: ((value: string | null) => any) | undefined;
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
- click: (value: string | null) => void;
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: TimelineNodeData[];
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
- onClick?: ((value: string | null) => any) | undefined;
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: TimelineNodeData[];
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
- onClick?: ((value: string | null) => any) | undefined;
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
- click: (value: string | null) => void;
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 { IBitmapTextStyle, TextStyle } from 'pixi.js';
2
- export type TimelineNodeData = {
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
- overallGraphWidth: number;
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: string;
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
- layout: NodesLayout;
37
- centerViewportAfter: boolean;
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: TimelineNodeData) => NodeThemeOptions;
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
- appRef: Application;
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({ appRef, fill, borderRadius, boxCapWidth, height, }: GetNodeBoxTexturesProps): BoxTextures;
13
- type GetEdgeArrowTextureProps = {
14
- appRef: Application;
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 getEdgeArrowTexture({ appRef, strokeColor, edgeWidth, edgeLength, }: GetEdgeArrowTextureProps): Texture;
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 { Application, Container } from 'pixi.js';
2
- import { ComputedRef } from 'vue';
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 unwatch;
23
- constructor({ appRef, styles, sourceNode, targetNode, }: TimelineEdgeProps);
24
- private assignStartAndEndPositions;
25
- private drawEdge;
26
- private readonly getXBezier;
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
- update(newStyles?: boolean): void;
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 { Container } from 'pixi.js';
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
- appHeight: number;
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 appHeight;
13
- private readonly guideLine;
15
+ private readonly cull;
16
+ private guideLine;
14
17
  private label;
15
- constructor({ labelText, styles, appHeight, }: TimelineGuideProps);
16
- private drawGuideLine;
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
- styles: ComputedRef<ParsedThemeStyles>;
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 styles;
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, styles, formatDateFns, }: TimelineGuidesProps);
30
+ constructor({ viewportRef, appRef, cull, minimumStartDate, maximumEndDate, isRunning, styleOptions, formatDateFns, }: TimelineGuidesProps);
28
31
  updateGuides(): void;
29
32
  private updateIdealGuideCount;
30
33
  private updateCurrentTimeGap;