@prefecthq/graphs 0.1.9 → 0.1.12
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-eac186e1.js.map +1 -0
- package/dist/graphs.mjs +4 -2
- package/dist/graphs.umd.js +119 -115
- package/dist/graphs.umd.js.map +1 -1
- package/dist/index-fc45ccf7.mjs +16259 -0
- package/dist/index-fc45ccf7.mjs.map +1 -0
- package/dist/style.css +1 -1
- package/dist/types/demo/utilities/timescaleData.d.ts +2 -1
- package/dist/types/src/FlowRunTimeline.vue.d.ts +34 -18
- package/dist/types/src/models/FlowRunTimeline.d.ts +122 -4
- package/dist/types/src/pixiFunctions/bitmapFonts.d.ts +4 -5
- package/dist/types/src/pixiFunctions/deselectLayer.d.ts +12 -0
- package/dist/types/src/pixiFunctions/index.d.ts +4 -1
- package/dist/types/src/pixiFunctions/timelineEdge.d.ts +32 -0
- package/dist/types/src/pixiFunctions/timelineGuide.d.ts +12 -3
- package/dist/types/src/pixiFunctions/timelineGuides.d.ts +8 -12
- package/dist/types/src/pixiFunctions/timelineNode.d.ts +25 -7
- package/dist/types/src/pixiFunctions/timelineNodes.d.ts +45 -0
- package/dist/types/src/pixiFunctions/timelinePlayhead.d.ts +7 -3
- package/dist/types/src/pixiFunctions/timelineScale.d.ts +7 -0
- package/dist/types/src/utilities/index.d.ts +2 -0
- package/dist/types/src/utilities/map.d.ts +1 -0
- package/dist/types/src/utilities/math.d.ts +1 -1
- package/dist/types/src/utilities/style.d.ts +4 -0
- package/dist/types/src/utilities/time.d.ts +5 -1
- package/dist/types/src/workers/nodeLayout.worker.d.ts +1 -0
- package/dist/{viewport.es-3b936b09.mjs → viewport.es-bb25550c.mjs} +2 -2
- package/dist/{viewport.es-3b936b09.mjs.map → viewport.es-bb25550c.mjs.map} +1 -1
- package/package.json +3 -2
- package/dist/index-70b46f90.mjs +0 -13742
- package/dist/index-70b46f90.mjs.map +0 -1
- package/dist/types/demo/components/PContextAccordionItem.vue.d.ts +0 -75
package/dist/style.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.flow-run-timeline{position:relative;height:100%;width:100%;overflow:hidden
|
|
1
|
+
.flow-run-timeline{position:relative;height:100%;width:100%;overflow:hidden}.flow-run-timeline canvas{position:absolute;top:0px;left:0px;height:100%;width:100%}
|
|
@@ -6,13 +6,14 @@ export type DataOptions = {
|
|
|
6
6
|
shape?: Shape;
|
|
7
7
|
size?: number;
|
|
8
8
|
fanMultiplier?: number;
|
|
9
|
+
zeroTimeGap?: boolean;
|
|
9
10
|
};
|
|
10
11
|
type TimescaleItem = {
|
|
11
12
|
id: string;
|
|
12
13
|
label: string;
|
|
13
14
|
start: Date;
|
|
14
15
|
end: Date | null;
|
|
15
|
-
upstreamDependencies:
|
|
16
|
+
upstreamDependencies: string[];
|
|
16
17
|
state: TimelineNodeState;
|
|
17
18
|
};
|
|
18
19
|
declare const generateTimescaleData: (options?: DataOptions) => TimescaleItem[];
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { TimelineNodeData } from './models';
|
|
1
|
+
import { TimelineNodeData, TimelineThemeOptions, FormatDateFns, TimelineNodesLayoutOptions } from './models';
|
|
2
2
|
declare const _default: {
|
|
3
3
|
new (...args: any[]): {
|
|
4
4
|
$: import("vue").ComponentInternalInstance;
|
|
@@ -6,10 +6,13 @@ declare const _default: {
|
|
|
6
6
|
$props: Partial<{}> & Omit<Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
|
|
7
7
|
graphData: TimelineNodeData[];
|
|
8
8
|
isRunning?: boolean | undefined;
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
9
|
+
theme?: TimelineThemeOptions | undefined;
|
|
10
|
+
formatDateFns?: Partial<FormatDateFns> | undefined;
|
|
11
|
+
selectedNodeId?: string | null | undefined;
|
|
12
|
+
layout?: TimelineNodesLayoutOptions | undefined;
|
|
13
|
+
}>>> & {
|
|
14
|
+
onClick?: ((value: string | null) => any) | undefined;
|
|
15
|
+
} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>;
|
|
13
16
|
$attrs: {
|
|
14
17
|
[x: string]: unknown;
|
|
15
18
|
};
|
|
@@ -21,15 +24,20 @@ declare const _default: {
|
|
|
21
24
|
}>;
|
|
22
25
|
$root: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null;
|
|
23
26
|
$parent: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null;
|
|
24
|
-
$emit: (event:
|
|
27
|
+
$emit: (event: "click", value: string | null) => void;
|
|
25
28
|
$el: any;
|
|
26
29
|
$options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
|
|
27
30
|
graphData: TimelineNodeData[];
|
|
28
31
|
isRunning?: boolean | undefined;
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
32
|
+
theme?: TimelineThemeOptions | undefined;
|
|
33
|
+
formatDateFns?: Partial<FormatDateFns> | undefined;
|
|
34
|
+
selectedNodeId?: string | null | undefined;
|
|
35
|
+
layout?: TimelineNodesLayoutOptions | undefined;
|
|
36
|
+
}>>> & {
|
|
37
|
+
onClick?: ((value: string | null) => any) | undefined;
|
|
38
|
+
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
39
|
+
click: (value: string | null) => void;
|
|
40
|
+
}, string, {}, {}, string> & {
|
|
33
41
|
beforeCreate?: ((() => void) | (() => void)[]) | undefined;
|
|
34
42
|
created?: ((() => void) | (() => void)[]) | undefined;
|
|
35
43
|
beforeMount?: ((() => void) | (() => void)[]) | undefined;
|
|
@@ -52,20 +60,28 @@ declare const _default: {
|
|
|
52
60
|
} & Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
|
|
53
61
|
graphData: TimelineNodeData[];
|
|
54
62
|
isRunning?: boolean | undefined;
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
63
|
+
theme?: TimelineThemeOptions | undefined;
|
|
64
|
+
formatDateFns?: Partial<FormatDateFns> | undefined;
|
|
65
|
+
selectedNodeId?: string | null | undefined;
|
|
66
|
+
layout?: TimelineNodesLayoutOptions | undefined;
|
|
67
|
+
}>>> & {
|
|
68
|
+
onClick?: ((value: string | null) => any) | undefined;
|
|
69
|
+
} & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties & {};
|
|
59
70
|
__isFragment?: undefined;
|
|
60
71
|
__isTeleport?: undefined;
|
|
61
72
|
__isSuspense?: undefined;
|
|
62
73
|
} & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
|
|
63
74
|
graphData: TimelineNodeData[];
|
|
64
75
|
isRunning?: boolean | undefined;
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
76
|
+
theme?: TimelineThemeOptions | undefined;
|
|
77
|
+
formatDateFns?: Partial<FormatDateFns> | undefined;
|
|
78
|
+
selectedNodeId?: string | null | undefined;
|
|
79
|
+
layout?: TimelineNodesLayoutOptions | undefined;
|
|
80
|
+
}>>> & {
|
|
81
|
+
onClick?: ((value: string | null) => any) | undefined;
|
|
82
|
+
}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
83
|
+
click: (value: string | null) => void;
|
|
84
|
+
}, string, {}, {}, string> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps;
|
|
69
85
|
export default _default;
|
|
70
86
|
type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
|
|
71
87
|
type __VLS_TypePropsToRuntimeProps<T> = {
|
|
@@ -1,15 +1,133 @@
|
|
|
1
|
-
import { IBitmapTextStyle } from 'pixi.js';
|
|
2
|
-
export type TimelineNodeState = 'completed' | 'running' | 'scheduled' | 'pending' | 'failed' | 'cancelled' | 'crashed' | 'paused';
|
|
1
|
+
import { IBitmapTextStyle, TextStyle } from 'pixi.js';
|
|
3
2
|
export type TimelineNodeData = {
|
|
4
3
|
id: string;
|
|
5
4
|
label: string;
|
|
6
5
|
start: Date;
|
|
7
6
|
end: Date | null;
|
|
8
|
-
upstreamDependencies?:
|
|
9
|
-
state:
|
|
7
|
+
upstreamDependencies?: string[];
|
|
8
|
+
state: string;
|
|
9
|
+
};
|
|
10
|
+
export type InitTimelineScaleProps = {
|
|
11
|
+
minimumStartTime: number;
|
|
12
|
+
overallGraphWidth: number;
|
|
13
|
+
initialOverallTimeSpan: number;
|
|
14
|
+
};
|
|
15
|
+
export type TimelineNodesLayoutOptions = 'waterfall' | 'nearestParent';
|
|
16
|
+
export type NodeShoveDirection = 1 | -1;
|
|
17
|
+
export type NodeLayoutWorkerProps = {
|
|
18
|
+
data: {
|
|
19
|
+
layoutSetting?: TimelineNodesLayoutOptions;
|
|
20
|
+
graphData: string;
|
|
21
|
+
defaultTextStyles?: TextStyle;
|
|
22
|
+
spacingMinimumNodeEdgeGap?: number;
|
|
23
|
+
timeScaleProps?: InitTimelineScaleProps;
|
|
24
|
+
};
|
|
25
|
+
};
|
|
26
|
+
export type NodeLayoutItem = {
|
|
27
|
+
position: number;
|
|
28
|
+
nextDependencyShove?: NodeShoveDirection;
|
|
29
|
+
startX: number;
|
|
30
|
+
endX: number;
|
|
31
|
+
};
|
|
32
|
+
export type NodesLayout = Record<string, NodeLayoutItem>;
|
|
33
|
+
export type NodeLayoutWorkerResponse = {
|
|
34
|
+
data: NodesLayout;
|
|
35
|
+
};
|
|
36
|
+
export type DateToX = (date: Date) => number;
|
|
37
|
+
export type XToDate = (xPosition: number) => number;
|
|
38
|
+
export type TimelineScale = {
|
|
39
|
+
dateToX: DateToX;
|
|
40
|
+
xToDate: XToDate;
|
|
10
41
|
};
|
|
11
42
|
export type TextStyles = {
|
|
12
43
|
nodeTextDefault: Partial<IBitmapTextStyle>;
|
|
13
44
|
nodeTextInverse: Partial<IBitmapTextStyle>;
|
|
45
|
+
nodeTextStyles: TextStyle;
|
|
14
46
|
timeMarkerLabel: Partial<IBitmapTextStyle>;
|
|
15
47
|
};
|
|
48
|
+
type FormatDate = (date: Date) => string;
|
|
49
|
+
export type FormatDateFns = {
|
|
50
|
+
timeBySeconds: FormatDate;
|
|
51
|
+
timeByMinutes: FormatDate;
|
|
52
|
+
date: FormatDate;
|
|
53
|
+
};
|
|
54
|
+
export declare const formatDateFnsDefault: FormatDateFns;
|
|
55
|
+
type NodeThemeOptions = {
|
|
56
|
+
fill: string;
|
|
57
|
+
inverseTextOnFill: boolean;
|
|
58
|
+
};
|
|
59
|
+
export type NodeThemeFn = (node: TimelineNodeData) => NodeThemeOptions;
|
|
60
|
+
export declare const nodeThemeFnDefault: NodeThemeFn;
|
|
61
|
+
type Sizing = `${string}px` | `${string}em` | `${string}rem`;
|
|
62
|
+
export type RGB = `rgb(${number}, ${number}, ${number})`;
|
|
63
|
+
export type RGBA = `rgba(${number}, ${number}, ${number}, ${number})`;
|
|
64
|
+
export type HSL = `hsl(${string | number}, ${number | string}, ${number | string})`;
|
|
65
|
+
export type HEX = `#${string}`;
|
|
66
|
+
export type Color = RGB | RGBA | HSL | HEX;
|
|
67
|
+
export type ThemeStyleOverrides = {
|
|
68
|
+
colorTextDefault?: Color;
|
|
69
|
+
colorTextInverse?: Color;
|
|
70
|
+
colorTextSubdued?: Color;
|
|
71
|
+
colorNodeSelection?: Color;
|
|
72
|
+
colorEdge?: Color;
|
|
73
|
+
colorGuideLine?: Color;
|
|
74
|
+
colorPlayheadBg?: Color;
|
|
75
|
+
textFontFamilyDefault?: string;
|
|
76
|
+
textSizeDefault?: Sizing;
|
|
77
|
+
textSizeSmall?: Sizing;
|
|
78
|
+
textLineHeightDefault?: Sizing;
|
|
79
|
+
textLineHeightSmall?: Sizing;
|
|
80
|
+
spacingViewportPaddingDefault?: Sizing;
|
|
81
|
+
spacingNodeXPadding?: Sizing;
|
|
82
|
+
spacingNodeYPadding?: Sizing;
|
|
83
|
+
spacingNodeMargin?: Sizing;
|
|
84
|
+
spacingNodeLabelMargin?: Sizing;
|
|
85
|
+
spacingMinimumNodeEdgeGap?: Sizing;
|
|
86
|
+
spacingNodeEdgeLength?: Sizing;
|
|
87
|
+
spacingNodeSelectionMargin?: Sizing;
|
|
88
|
+
spacingNodeSelectionWidth?: Sizing;
|
|
89
|
+
spacingEdgeWidth?: Sizing;
|
|
90
|
+
spacingGuideLabelPadding?: Sizing;
|
|
91
|
+
spacingPlayheadWidth?: Sizing;
|
|
92
|
+
spacingPlayheadGlowPadding?: Sizing;
|
|
93
|
+
borderRadiusNode?: Sizing;
|
|
94
|
+
alphaNodeDimmed?: number;
|
|
95
|
+
};
|
|
96
|
+
export type ParsedThemeStyles = {
|
|
97
|
+
colorTextDefault: number;
|
|
98
|
+
colorTextInverse: number;
|
|
99
|
+
colorTextSubdued: number;
|
|
100
|
+
colorNodeSelection: number;
|
|
101
|
+
colorEdge: number;
|
|
102
|
+
colorGuideLine: number;
|
|
103
|
+
colorPlayheadBg: number;
|
|
104
|
+
textFontFamilyDefault: string;
|
|
105
|
+
textSizeDefault: number;
|
|
106
|
+
textSizeSmall: number;
|
|
107
|
+
textLineHeightDefault: number;
|
|
108
|
+
textLineHeightSmall: number;
|
|
109
|
+
spacingViewportPaddingDefault: number;
|
|
110
|
+
spacingNodeXPadding: number;
|
|
111
|
+
spacingNodeYPadding: number;
|
|
112
|
+
spacingNodeMargin: number;
|
|
113
|
+
spacingNodeLabelMargin: number;
|
|
114
|
+
spacingMinimumNodeEdgeGap: number;
|
|
115
|
+
spacingNodeEdgeLength: number;
|
|
116
|
+
spacingNodeSelectionMargin: number;
|
|
117
|
+
spacingNodeSelectionWidth: number;
|
|
118
|
+
spacingEdgeWidth: number;
|
|
119
|
+
spacingGuideLabelPadding: number;
|
|
120
|
+
spacingPlayheadWidth: number;
|
|
121
|
+
spacingPlayheadGlowPadding: number;
|
|
122
|
+
borderRadiusNode: number;
|
|
123
|
+
alphaNodeDimmed: number;
|
|
124
|
+
};
|
|
125
|
+
export type TimelineThemeOptions = {
|
|
126
|
+
node?: NodeThemeFn;
|
|
127
|
+
defaults?: ThemeStyleOverrides;
|
|
128
|
+
};
|
|
129
|
+
export type ParsedThemeOptions = {
|
|
130
|
+
node: NodeThemeFn;
|
|
131
|
+
defaults: ParsedThemeStyles;
|
|
132
|
+
};
|
|
133
|
+
export {};
|
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
export declare const
|
|
4
|
-
export declare const
|
|
5
|
-
export declare const getBitmapFonts: () => Promise<TextStyles>;
|
|
1
|
+
import { TextStyles, ParsedThemeStyles } from '../models';
|
|
2
|
+
export declare function updateBitmapFonts(styles: ParsedThemeStyles): void;
|
|
3
|
+
export declare const getBitmapFonts: (styles: ParsedThemeStyles) => Promise<TextStyles> | TextStyles;
|
|
4
|
+
export declare const initBitmapFonts: (styles: ParsedThemeStyles) => void;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import type { Viewport } from 'pixi-viewport';
|
|
2
|
+
import { Application, Container } from 'pixi.js';
|
|
3
|
+
export declare class DeselectLayer extends Container {
|
|
4
|
+
private readonly appRef;
|
|
5
|
+
private readonly viewportRef;
|
|
6
|
+
private readonly layer;
|
|
7
|
+
constructor(appRef: Application, viewportRef: Viewport);
|
|
8
|
+
private drawLayer;
|
|
9
|
+
private getDimensions;
|
|
10
|
+
private initUpdater;
|
|
11
|
+
private update;
|
|
12
|
+
}
|
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
export * from './bitmapFonts';
|
|
2
|
+
export * from './deselectLayer';
|
|
2
3
|
export * from './initPixiApp';
|
|
3
4
|
export * from './initViewport';
|
|
5
|
+
export * from './timelineEdge';
|
|
4
6
|
export * from './timelineGuides';
|
|
5
|
-
export * from './
|
|
7
|
+
export * from './timelineNodes';
|
|
6
8
|
export * from './timelinePlayhead';
|
|
9
|
+
export * from './timelineScale';
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { Container } from 'pixi.js';
|
|
2
|
+
import { ComputedRef } from 'vue';
|
|
3
|
+
import { TimelineNode } from './timelineNode';
|
|
4
|
+
import { ParsedThemeStyles } from '../models';
|
|
5
|
+
type TimelineEdgeProps = {
|
|
6
|
+
styles: ComputedRef<ParsedThemeStyles>;
|
|
7
|
+
sourceNode: TimelineNode;
|
|
8
|
+
targetNode: TimelineNode;
|
|
9
|
+
};
|
|
10
|
+
export declare class TimelineEdge extends Container {
|
|
11
|
+
private readonly styles;
|
|
12
|
+
private readonly sourceNode;
|
|
13
|
+
private readonly targetNode;
|
|
14
|
+
private sourceX;
|
|
15
|
+
private sourceY;
|
|
16
|
+
private targetX;
|
|
17
|
+
private targetY;
|
|
18
|
+
private directionFromSource;
|
|
19
|
+
private readonly edge;
|
|
20
|
+
private readonly arrow;
|
|
21
|
+
private readonly unwatch;
|
|
22
|
+
constructor({ styles, sourceNode, targetNode, }: TimelineEdgeProps);
|
|
23
|
+
private assignStartAndEndPositions;
|
|
24
|
+
private drawEdge;
|
|
25
|
+
private readonly getSourcePosition;
|
|
26
|
+
private readonly getSourceBezier;
|
|
27
|
+
private readonly getTargetBezier;
|
|
28
|
+
private drawArrow;
|
|
29
|
+
update(): void;
|
|
30
|
+
destroy(): void;
|
|
31
|
+
}
|
|
32
|
+
export {};
|
|
@@ -1,11 +1,20 @@
|
|
|
1
1
|
import { Container } from 'pixi.js';
|
|
2
|
+
import { ComputedRef } from 'vue';
|
|
3
|
+
import { ParsedThemeStyles } from '../models';
|
|
4
|
+
type TimelineGuideProps = {
|
|
5
|
+
labelText: string | null;
|
|
6
|
+
styles: ComputedRef<ParsedThemeStyles>;
|
|
7
|
+
appHeight: number;
|
|
8
|
+
};
|
|
2
9
|
export declare class TimelineGuide extends Container {
|
|
3
10
|
private readonly labelText;
|
|
4
|
-
private
|
|
11
|
+
private readonly styles;
|
|
12
|
+
private appHeight;
|
|
5
13
|
private readonly guideLine;
|
|
6
14
|
private label;
|
|
7
|
-
constructor(labelText
|
|
15
|
+
constructor({ labelText, styles, appHeight, }: TimelineGuideProps);
|
|
8
16
|
private drawGuideLine;
|
|
9
17
|
private drawLabel;
|
|
10
|
-
updateHeight(
|
|
18
|
+
updateHeight(appHeight: number): void;
|
|
11
19
|
}
|
|
20
|
+
export {};
|
|
@@ -1,35 +1,31 @@
|
|
|
1
1
|
import type { Viewport } from 'pixi-viewport';
|
|
2
2
|
import { Container } from 'pixi.js';
|
|
3
3
|
import type { Application } from 'pixi.js';
|
|
4
|
-
import
|
|
4
|
+
import { ComputedRef, Ref } from 'vue';
|
|
5
|
+
import { FormatDateFns, ParsedThemeStyles } from '../models';
|
|
5
6
|
type TimelineGuidesProps = {
|
|
6
7
|
viewportRef: Viewport;
|
|
7
8
|
appRef: Application;
|
|
8
|
-
xScale: (x: Date) => number;
|
|
9
|
-
dateScale: (x: number) => number;
|
|
10
9
|
minimumStartDate: Date;
|
|
11
10
|
maximumEndDate: Ref<Date | undefined>;
|
|
12
11
|
isRunning: boolean;
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
formatDate: (date: Date) => string;
|
|
12
|
+
styles: ComputedRef<ParsedThemeStyles>;
|
|
13
|
+
formatDateFns: ComputedRef<FormatDateFns>;
|
|
16
14
|
};
|
|
17
15
|
export declare class TimelineGuides extends Container {
|
|
18
16
|
private readonly viewportRef;
|
|
19
17
|
private readonly appRef;
|
|
20
|
-
private readonly xScale;
|
|
21
|
-
private readonly dateScale;
|
|
22
18
|
private readonly minimumStartDate;
|
|
23
19
|
private readonly maximumEndDate;
|
|
24
20
|
private readonly isRunning;
|
|
25
|
-
private readonly
|
|
26
|
-
private readonly
|
|
27
|
-
private readonly
|
|
21
|
+
private readonly styles;
|
|
22
|
+
private readonly formatDateFns;
|
|
23
|
+
private readonly unwatch;
|
|
28
24
|
private idealGuideCount;
|
|
29
25
|
private currentTimeGap;
|
|
30
26
|
private labelFormatter;
|
|
31
27
|
private readonly guides;
|
|
32
|
-
constructor({ viewportRef, appRef,
|
|
28
|
+
constructor({ viewportRef, appRef, minimumStartDate, maximumEndDate, isRunning, styles, formatDateFns, }: TimelineGuidesProps);
|
|
33
29
|
updateGuides(): void;
|
|
34
30
|
private updateIdealGuideCount;
|
|
35
31
|
private updateCurrentTimeGap;
|
|
@@ -1,20 +1,38 @@
|
|
|
1
1
|
import { Container } from 'pixi.js';
|
|
2
|
-
import {
|
|
2
|
+
import { ComputedRef } from 'vue';
|
|
3
|
+
import { ParsedThemeStyles, TimelineNodeData, NodeThemeFn } from '../models';
|
|
4
|
+
type TimelineNodeProps = {
|
|
5
|
+
nodeData: TimelineNodeData;
|
|
6
|
+
styles: ComputedRef<ParsedThemeStyles>;
|
|
7
|
+
styleNode: ComputedRef<NodeThemeFn>;
|
|
8
|
+
layoutPosition: number;
|
|
9
|
+
};
|
|
10
|
+
export declare const timelineNodeBoxName = "box";
|
|
3
11
|
export declare class TimelineNode extends Container {
|
|
4
12
|
nodeData: TimelineNodeData;
|
|
5
|
-
private readonly
|
|
13
|
+
private readonly styles;
|
|
14
|
+
private readonly styleNode;
|
|
15
|
+
private readonly unwatch;
|
|
6
16
|
private label;
|
|
7
17
|
private readonly box;
|
|
8
18
|
private apxLabelWidth;
|
|
9
19
|
private nodeWidth;
|
|
10
|
-
private readonly
|
|
20
|
+
private readonly layoutPositionOffset;
|
|
21
|
+
layoutPosition: number;
|
|
11
22
|
private isLabelInBox;
|
|
12
|
-
|
|
23
|
+
private readonly selectedRing;
|
|
24
|
+
constructor({ nodeData, styles, styleNode, layoutPosition, }: TimelineNodeProps);
|
|
13
25
|
private getNodeWidth;
|
|
14
|
-
private
|
|
26
|
+
private getLayoutPositionOffset;
|
|
15
27
|
private drawBox;
|
|
16
28
|
private drawLabel;
|
|
17
|
-
private
|
|
29
|
+
private drawSelectedRing;
|
|
30
|
+
private animateIn;
|
|
31
|
+
updatePosition(skipAnimation?: boolean): Promise<void>;
|
|
18
32
|
private updateLabelPosition;
|
|
19
|
-
update(): void
|
|
33
|
+
update(newNodeData?: TimelineNodeData): Promise<void>;
|
|
34
|
+
select(): void;
|
|
35
|
+
deselect(): void;
|
|
36
|
+
destroy(): void;
|
|
20
37
|
}
|
|
38
|
+
export {};
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import type { Viewport } from 'pixi-viewport';
|
|
2
|
+
import { Application, Container } from 'pixi.js';
|
|
3
|
+
import { ComputedRef } from 'vue';
|
|
4
|
+
import { TimelineNode } from './timelineNode';
|
|
5
|
+
import { NodeThemeFn, ParsedThemeStyles, TimelineNodeData, TimelineNodesLayoutOptions, InitTimelineScaleProps } from '../models';
|
|
6
|
+
type TimelineNodesProps = {
|
|
7
|
+
appRef: Application;
|
|
8
|
+
viewportRef: Viewport;
|
|
9
|
+
graphData: TimelineNodeData[];
|
|
10
|
+
styles: ComputedRef<ParsedThemeStyles>;
|
|
11
|
+
styleNode: ComputedRef<NodeThemeFn>;
|
|
12
|
+
timeScaleProps: InitTimelineScaleProps;
|
|
13
|
+
layoutSetting?: TimelineNodesLayoutOptions;
|
|
14
|
+
};
|
|
15
|
+
export declare class TimelineNodes extends Container {
|
|
16
|
+
private readonly appRef;
|
|
17
|
+
private readonly viewportRef;
|
|
18
|
+
private graphData;
|
|
19
|
+
private readonly styles;
|
|
20
|
+
private readonly styleNode;
|
|
21
|
+
private readonly nodeContainer;
|
|
22
|
+
readonly nodeRecords: Map<string, TimelineNode>;
|
|
23
|
+
selectedNodeId: string | null | undefined;
|
|
24
|
+
private readonly layoutSetting;
|
|
25
|
+
private readonly layoutWorker;
|
|
26
|
+
private layout;
|
|
27
|
+
private readonly edgeContainer;
|
|
28
|
+
private readonly edgeRecords;
|
|
29
|
+
constructor({ appRef, viewportRef, graphData, styles, styleNode, layoutSetting, timeScaleProps: { minimumStartTime, overallGraphWidth, initialOverallTimeSpan, }, }: TimelineNodesProps);
|
|
30
|
+
private initLayoutWorker;
|
|
31
|
+
private initDeselectLayer;
|
|
32
|
+
private renderLayout;
|
|
33
|
+
private updateNodeRecordAndEdgesLayout;
|
|
34
|
+
private createNode;
|
|
35
|
+
private fitNodesInViewport;
|
|
36
|
+
private addEdges;
|
|
37
|
+
update(newData?: TimelineNodeData[]): void;
|
|
38
|
+
updateSelection(selectedNodeId?: string | null): void;
|
|
39
|
+
private highlightSelectedNodePath;
|
|
40
|
+
private unHighlightAll;
|
|
41
|
+
private getAllUpstreamEdges;
|
|
42
|
+
private getAllDownstreamEdges;
|
|
43
|
+
destroy(): void;
|
|
44
|
+
}
|
|
45
|
+
export {};
|
|
@@ -1,18 +1,22 @@
|
|
|
1
1
|
import type { Viewport } from 'pixi-viewport';
|
|
2
2
|
import { Container } from 'pixi.js';
|
|
3
3
|
import type { Application } from 'pixi.js';
|
|
4
|
+
import { ComputedRef } from 'vue';
|
|
5
|
+
import { ParsedThemeStyles } from '../models';
|
|
4
6
|
type TimelinePlayheadProps = {
|
|
5
7
|
viewportRef: Viewport;
|
|
6
8
|
appRef: Application;
|
|
7
|
-
|
|
9
|
+
styles: ComputedRef<ParsedThemeStyles>;
|
|
8
10
|
};
|
|
9
11
|
export declare class TimelinePlayhead extends Container {
|
|
10
12
|
private readonly viewportRef;
|
|
11
13
|
private readonly appRef;
|
|
12
|
-
private readonly
|
|
14
|
+
private readonly styles;
|
|
15
|
+
private readonly unwatch;
|
|
13
16
|
private readonly playhead;
|
|
14
|
-
constructor({ viewportRef, appRef,
|
|
17
|
+
constructor({ viewportRef, appRef, styles, }: TimelinePlayheadProps);
|
|
15
18
|
private drawPlayhead;
|
|
16
19
|
updatePosition(): void;
|
|
20
|
+
destroy(): void;
|
|
17
21
|
}
|
|
18
22
|
export {};
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { DateToX, XToDate, TimelineScale, InitTimelineScaleProps } from '../models';
|
|
2
|
+
export declare let timelineScale: {
|
|
3
|
+
dateToX: DateToX;
|
|
4
|
+
xToDate: XToDate;
|
|
5
|
+
};
|
|
6
|
+
export declare const createTimelineScale: ({ minimumStartTime, overallGraphWidth, initialOverallTimeSpan, }: InitTimelineScaleProps) => TimelineScale;
|
|
7
|
+
export declare const initTimelineScale: ({ minimumStartTime, overallGraphWidth, initialOverallTimeSpan, }: InitTimelineScaleProps) => TimelineScale;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function mapSome<K, V>(map: Map<K, V>, callback: (value: V, key: K) => boolean): boolean;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export declare const abs: (x: number) => number, atan2: (y: number, x: number) => number, cos: (x: number) => number, max: (...values: number[]) => number, min: (...values: number[]) => number, sin: (x: number) => number, tan: (x: number) => number, sqrt: (x: number) => number, pow: (x: number, y: number) => number, floor: (x: number) => number, ceil: (x: number) => number, random: () => number;
|
|
1
|
+
export declare const abs: (x: number) => number, atan2: (y: number, x: number) => number, cos: (x: number) => number, max: (...values: number[]) => number, min: (...values: number[]) => number, sin: (x: number) => number, tan: (x: number) => number, sqrt: (x: number) => number, pow: (x: number, y: number) => number, floor: (x: number) => number, ceil: (x: number) => number, random: () => number, round: (x: number) => number;
|
|
2
2
|
export declare const epsilon = 1e-12;
|
|
3
3
|
export declare const pi: number;
|
|
4
4
|
export declare const halfPi: number;
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { ParsedThemeStyles, ThemeStyleOverrides } from '../models';
|
|
2
|
+
export declare function parseThemeOptions(overrides?: ThemeStyleOverrides): ParsedThemeStyles;
|
|
3
|
+
export declare function colorToHex(color: string): number;
|
|
4
|
+
export declare function spacingToNumber(spacing: string): number;
|
|
@@ -7,12 +7,16 @@ export declare const intervals: {
|
|
|
7
7
|
};
|
|
8
8
|
export declare function secondsToString(input: number, showOnes?: boolean): string;
|
|
9
9
|
export declare function secondsToApproximateString(input: number, showOnes?: boolean): string;
|
|
10
|
+
export declare function formatDateBySeconds(date: Date): string;
|
|
11
|
+
export declare function formatDateByMinutes(date: Date): string;
|
|
12
|
+
export declare function formatDate(date: Date): string;
|
|
10
13
|
export declare function getDateBounds(datesArray: {
|
|
11
14
|
start: Date;
|
|
12
15
|
end: Date | null;
|
|
13
|
-
}[]): {
|
|
16
|
+
}[], minimumTimeSpan?: number): {
|
|
14
17
|
min: Date;
|
|
15
18
|
max: Date;
|
|
19
|
+
span: number;
|
|
16
20
|
};
|
|
17
21
|
export declare function roundDownToNearestDay(date: Date): Date;
|
|
18
22
|
export declare function roundDownToNearestEvenNumberedHour(date: Date): Date;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { P as c, R as b, T as C, C as P } from "./index-
|
|
1
|
+
import { P as c, R as b, T as C, C as P } from "./index-fc45ccf7.mjs";
|
|
2
2
|
import "vue";
|
|
3
3
|
class u {
|
|
4
4
|
constructor(t) {
|
|
@@ -1530,4 +1530,4 @@ export {
|
|
|
1530
1530
|
O as Viewport,
|
|
1531
1531
|
$ as Wheel
|
|
1532
1532
|
};
|
|
1533
|
-
//# sourceMappingURL=viewport.es-
|
|
1533
|
+
//# sourceMappingURL=viewport.es-bb25550c.mjs.map
|