@prefecthq/graphs 0.1.17 → 1.0.0

package/dist/types/demo/sections/components/TimescaleTable.vue.d.ts

@@ -1,12 +1,12 @@
-import { TimescaleItem } from '../../utilities/timescaleData';
+import { GraphTimelineNode } from '../../../src/models';
 declare const _default: {
     new (...args: any[]): {
         $: import("vue").ComponentInternalInstance;
         $data: {};
         $props: Partial<{
-            data: TimescaleItem[];
+            data: GraphTimelineNode[];
         }> & Omit<Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-            data?: TimescaleItem[] | undefined;
+            data?: GraphTimelineNode[] | undefined;
         }>, {
             data: () => never[];
         }>>> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "data">;
@@ -24,11 +24,11 @@ declare const _default: {
         $emit: (event: string, ...args: any[]) => void;
         $el: any;
         $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-            data?: TimescaleItem[] | undefined;
+            data?: GraphTimelineNode[] | undefined;
         }>, {
             data: () => never[];
         }>>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
-            data: TimescaleItem[];
+            data: GraphTimelineNode[];
         }, {}, string> & {
             beforeCreate?: ((() => void) | (() => void)[]) | undefined;
             created?: ((() => void) | (() => void)[]) | undefined;
@@ -50,7 +50,7 @@ declare const _default: {
         $nextTick: typeof import("vue").nextTick;
         $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;
     } & Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-        data?: TimescaleItem[] | undefined;
+        data?: GraphTimelineNode[] | undefined;
     }>, {
         data: () => never[];
     }>>> & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties & {};
@@ -58,11 +58,11 @@ declare const _default: {
     __isTeleport?: undefined;
     __isSuspense?: undefined;
 } & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    data?: TimescaleItem[] | undefined;
+    data?: GraphTimelineNode[] | undefined;
 }>, {
     data: () => never[];
 }>>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
-    data: TimescaleItem[];
+    data: GraphTimelineNode[];
 }, {}, string> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;

package/dist/types/demo/utilities/timescaleData.d.ts

@@ -1,3 +1,4 @@
+import { GraphTimelineNode } from '../../src/models';
 export type TimelineNodeState = 'completed' | 'running' | 'scheduled' | 'pending' | 'failed' | 'cancelled' | 'crashed' | 'paused';
 export type Shape = 'linear' | 'fanOut' | 'fanOutIn';
 export type DataOptions = {
@@ -6,16 +7,8 @@ export type DataOptions = {
     shape?: Shape;
     size?: number;
     fanMultiplier?: number;
+    subFlowOccurrence?: number;
     zeroTimeGap?: boolean;
 };
-type TimescaleItem = {
-    id: string;
-    label: string;
-    start: Date;
-    end: Date | null;
-    upstreamDependencies: string[];
-    state: TimelineNodeState;
-};
-declare const generateTimescaleData: (options?: DataOptions) => TimescaleItem[];
-export type { TimescaleItem };
+declare const generateTimescaleData: (options?: DataOptions) => GraphTimelineNode[];
 export { generateTimescaleData };

package/dist/types/src/FlowRunTimeline.vue.d.ts

@@ -1,18 +1,21 @@
-import { TimelineNodeData, TimelineThemeOptions, FormatDateFns, TimelineNodesLayoutOptions } from './models';
+import { GraphTimelineNode, TimelineThemeOptions, FormatDateFns, TimelineNodesLayoutOptions, CenterViewportOptions, ExpandedSubNodes, NodeSelectionEvent } from './models';
 declare const _default: {
     new (...args: any[]): {
         $: import("vue").ComponentInternalInstance;
         $data: {};
         $props: Partial<{}> & Omit<Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
-            graphData: TimelineNodeData[];
+            graphData: GraphTimelineNode[];
             isRunning?: boolean | undefined;
             theme?: TimelineThemeOptions | undefined;
             formatDateFns?: Partial<FormatDateFns> | undefined;
             selectedNodeId?: string | null | undefined;
             layout?: TimelineNodesLayoutOptions | undefined;
             hideEdges?: boolean | undefined;
+            subNodeLabels?: Map<string, string> | undefined;
+            expandedSubNodes?: ExpandedSubNodes<Record<string, unknown>> | undefined;
         }>>> & {
-            onClick?: ((value: string | null) => any) | undefined;
+            onSelection?: ((value: NodeSelectionEvent | null) => any) | undefined;
+            onSubFlowToggle?: ((value: string) => any) | undefined;
         } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>;
         $attrs: {
             [x: string]: unknown;
@@ -25,22 +28,31 @@ declare const _default: {
         }>;
         $root: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null;
         $parent: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null;
-        $emit: (event: "click", value: string | null) => void;
+        $emit: ((event: "selection", value: NodeSelectionEvent | null) => void) & ((event: "subFlowToggle", value: string) => void);
         $el: any;
         $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
-            graphData: TimelineNodeData[];
+            graphData: GraphTimelineNode[];
             isRunning?: boolean | undefined;
             theme?: TimelineThemeOptions | undefined;
             formatDateFns?: Partial<FormatDateFns> | undefined;
             selectedNodeId?: string | null | undefined;
             layout?: TimelineNodesLayoutOptions | undefined;
             hideEdges?: boolean | undefined;
+            subNodeLabels?: Map<string, string> | undefined;
+            expandedSubNodes?: ExpandedSubNodes<Record<string, unknown>> | undefined;
         }>>> & {
-            onClick?: ((value: string | null) => any) | undefined;
+            onSelection?: ((value: NodeSelectionEvent | null) => any) | undefined;
+            onSubFlowToggle?: ((value: string) => any) | undefined;
         }, {
-            recenter: () => void;
+            centerViewport: ({ skipAnimation }?: CenterViewportOptions) => void;
+            moveViewportCenter: ({ xOffset, yOffset }: {
+                xOffset: number;
+                yOffset: number;
+            }) => void;
         }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-            click: (value: string | null) => void;
+            selection: (value: NodeSelectionEvent | null) => void;
+        } & {
+            subFlowToggle: (value: string) => void;
         }, string, {}, {}, string> & {
             beforeCreate?: ((() => void) | (() => void)[]) | undefined;
             created?: ((() => void) | (() => void)[]) | undefined;
@@ -62,35 +74,51 @@ declare const _default: {
         $nextTick: typeof import("vue").nextTick;
         $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;
     } & Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
-        graphData: TimelineNodeData[];
+        graphData: GraphTimelineNode[];
         isRunning?: boolean | undefined;
         theme?: TimelineThemeOptions | undefined;
         formatDateFns?: Partial<FormatDateFns> | undefined;
         selectedNodeId?: string | null | undefined;
         layout?: TimelineNodesLayoutOptions | undefined;
         hideEdges?: boolean | undefined;
+        subNodeLabels?: Map<string, string> | undefined;
+        expandedSubNodes?: ExpandedSubNodes<Record<string, unknown>> | undefined;
     }>>> & {
-        onClick?: ((value: string | null) => any) | undefined;
+        onSelection?: ((value: NodeSelectionEvent | null) => any) | undefined;
+        onSubFlowToggle?: ((value: string) => any) | undefined;
     } & import("vue").ShallowUnwrapRef<{
-        recenter: () => void;
+        centerViewport: ({ skipAnimation }?: CenterViewportOptions) => void;
+        moveViewportCenter: ({ xOffset, yOffset }: {
+            xOffset: number;
+            yOffset: number;
+        }) => void;
     }> & {} & import("vue").ComponentCustomProperties & {};
     __isFragment?: undefined;
     __isTeleport?: undefined;
     __isSuspense?: undefined;
 } & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
-    graphData: TimelineNodeData[];
+    graphData: GraphTimelineNode[];
     isRunning?: boolean | undefined;
     theme?: TimelineThemeOptions | undefined;
     formatDateFns?: Partial<FormatDateFns> | undefined;
     selectedNodeId?: string | null | undefined;
     layout?: TimelineNodesLayoutOptions | undefined;
     hideEdges?: boolean | undefined;
+    subNodeLabels?: Map<string, string> | undefined;
+    expandedSubNodes?: ExpandedSubNodes<Record<string, unknown>> | undefined;
 }>>> & {
-    onClick?: ((value: string | null) => any) | undefined;
+    onSelection?: ((value: NodeSelectionEvent | null) => any) | undefined;
+    onSubFlowToggle?: ((value: string) => any) | undefined;
 }, {
-    recenter: () => void;
+    centerViewport: ({ skipAnimation }?: CenterViewportOptions) => void;
+    moveViewportCenter: ({ xOffset, yOffset }: {
+        xOffset: number;
+        yOffset: number;
+    }) => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    click: (value: string | null) => void;
+    selection: (value: NodeSelectionEvent | null) => void;
+} & {
+    subFlowToggle: (value: string) => void;
 }, string, {}, {}, string> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;

package/dist/types/src/models/FlowRunTimeline.d.ts

@@ -1,27 +1,39 @@
-import { IBitmapTextStyle, TextStyle } from 'pixi.js';
-export type TimelineNodeData = {
+import { Cull } from '@pixi-essentials/cull';
+import type { Viewport } from 'pixi-viewport';
+import type { Application, IBitmapTextStyle, TextStyle } from 'pixi.js';
+import type { ComputedRef } from 'vue';
+export type GraphTimelineNode = {
     id: string;
     label: string;
     start: Date;
     end: Date | null;
-    upstreamDependencies?: string[];
     state: string;
+    upstreamDependencies?: string[];
+    subFlowRunId?: string;
 };
 export type InitTimelineScaleProps = {
     minimumStartTime: number;
-    overallGraphWidth: number;
+    graphXDomain: number;
     initialOverallTimeSpan: number;
 };
 export type TimelineNodesLayoutOptions = 'waterfall' | 'nearestParent';
+export type NodeSelectionEventTypes = 'task' | 'subFlow';
+export type NodeSelectionEvent = {
+    id: string;
+    type: NodeSelectionEventTypes;
+};
+export type ExpandedSubNodes<T extends Record<string, unknown> = Record<string, unknown>> = Map<string, {
+    data: GraphTimelineNode[] | ComputedRef<GraphTimelineNode[]>;
+} & T>;
 export type NodeShoveDirection = 1 | -1;
 export type NodeLayoutWorkerProps = {
     data: {
         layoutSetting?: TimelineNodesLayoutOptions;
-        graphData: string;
+        graphData?: string;
         apxCharacterWidth?: number;
         spacingMinimumNodeEdgeGap?: number;
         timeScaleProps?: InitTimelineScaleProps;
-        recenterAfter?: boolean;
+        centerViewportAfter?: boolean;
     };
 };
 export type NodeLayoutItem = {
@@ -31,11 +43,33 @@ export type NodeLayoutItem = {
     endX: number;
 };
 export type NodesLayout = Record<string, NodeLayoutItem>;
+export type NodeLayoutRow = {
+    yPos: number;
+    height: number;
+};
+export type NodeLayoutWorkerResponseData = {
+    layout: NodesLayout;
+    centerViewportAfter?: boolean;
+};
 export type NodeLayoutWorkerResponse = {
-    data: {
-        layout: NodesLayout;
-        recenterAfter: boolean;
-    };
+    data: NodeLayoutWorkerResponseData;
+};
+export type GraphState = {
+    pixiApp: Application;
+    viewport: Viewport;
+    cull: Cull;
+    cullScreen: () => void;
+    timeScaleProps: InitTimelineScaleProps;
+    styleOptions: ComputedRef<ParsedThemeStyles>;
+    styleNode: ComputedRef<NodeThemeFn>;
+    layoutSetting: ComputedRef<TimelineNodesLayoutOptions>;
+    isRunning: ComputedRef<boolean>;
+    hideEdges: ComputedRef<boolean>;
+    subNodeLabels: ComputedRef<Map<string, string>>;
+    selectedNodeId: ComputedRef<string | null>;
+    expandedSubNodes: ComputedRef<ExpandedSubNodes>;
+    suppressMotion: ComputedRef<boolean>;
+    centerViewport: (options?: CenterViewportOptions) => void;
 };
 export type DateToX = (date: Date) => number;
 export type XToDate = (xPosition: number) => number;
@@ -43,6 +77,9 @@ export type TimelineScale = {
     dateToX: DateToX;
     xToDate: XToDate;
 };
+export type CenterViewportOptions = {
+    skipAnimation?: boolean;
+};
 export type TextStyles = {
     nodeTextDefault: Partial<IBitmapTextStyle>;
     nodeTextInverse: Partial<IBitmapTextStyle>;
@@ -60,8 +97,10 @@ export declare const formatDateFnsDefault: FormatDateFns;
 type NodeThemeOptions = {
     fill: string;
     inverseTextOnFill: boolean;
+    onFillSubNodeToggleHoverBg: string;
+    onFillSubNodeToggleHoverBgAlpha: number;
 };
-export type NodeThemeFn = (node: TimelineNodeData) => NodeThemeOptions;
+export type NodeThemeFn = (node: GraphTimelineNode) => NodeThemeOptions;
 export declare const nodeThemeFnDefault: NodeThemeFn;
 type Sizing = `${string}px` | `${string}em` | `${string}rem`;
 export type RGB = `rgb(${number}, ${number}, ${number})`;
@@ -74,6 +113,9 @@ export type ThemeStyleOverrides = {
     colorTextInverse?: Color;
     colorTextSubdued?: Color;
     colorNodeSelection?: Color;
+    colorButtonBg?: Color;
+    colorButtonBgHover?: Color;
+    colorButtonBorder?: Color | null;
     colorEdge?: Color;
     colorGuideLine?: Color;
     colorPlayheadBg?: Color;
@@ -82,6 +124,7 @@ export type ThemeStyleOverrides = {
     textSizeSmall?: Sizing;
     textLineHeightDefault?: Sizing;
     textLineHeightSmall?: Sizing;
+    spacingButtonBorderWidth?: Sizing;
     spacingViewportPaddingDefault?: Sizing;
     spacingNodeXPadding?: Sizing;
     spacingNodeYPadding?: Sizing;
@@ -91,18 +134,25 @@ export type ThemeStyleOverrides = {
     spacingNodeEdgeLength?: Sizing;
     spacingNodeSelectionMargin?: Sizing;
     spacingNodeSelectionWidth?: Sizing;
+    spacingSubNodesOutlineBorderWidth?: Sizing;
+    spacingSubNodesOutlineOffset?: Sizing;
     spacingEdgeWidth?: Sizing;
     spacingGuideLabelPadding?: Sizing;
     spacingPlayheadWidth?: Sizing;
     spacingPlayheadGlowPadding?: Sizing;
     borderRadiusNode?: Sizing;
+    borderRadiusButton?: Sizing;
     alphaNodeDimmed?: number;
+    alphaSubNodesOutlineDimmed?: number;
 };
 export type ParsedThemeStyles = {
     colorTextDefault: number;
     colorTextInverse: number;
     colorTextSubdued: number;
     colorNodeSelection: number;
+    colorButtonBg: number;
+    colorButtonBgHover: number;
+    colorButtonBorder: number | null;
     colorEdge: number;
     colorGuideLine: number;
     colorPlayheadBg: number;
@@ -111,6 +161,7 @@ export type ParsedThemeStyles = {
     textSizeSmall: number;
     textLineHeightDefault: number;
     textLineHeightSmall: number;
+    spacingButtonBorderWidth: number;
     spacingViewportPaddingDefault: number;
     spacingNodeXPadding: number;
     spacingNodeYPadding: number;
@@ -120,12 +171,16 @@ export type ParsedThemeStyles = {
     spacingNodeEdgeLength: number;
     spacingNodeSelectionMargin: number;
     spacingNodeSelectionWidth: number;
+    spacingSubNodesOutlineBorderWidth: number;
+    spacingSubNodesOutlineOffset: number;
     spacingEdgeWidth: number;
     spacingGuideLabelPadding: number;
     spacingPlayheadWidth: number;
     spacingPlayheadGlowPadding: number;
     borderRadiusNode: number;
+    borderRadiusButton: number;
     alphaNodeDimmed: number;
+    alphaSubNodesOutlineDimmed: number;
 };
 export type TimelineThemeOptions = {
     node?: NodeThemeFn;

package/dist/types/src/pixiFunctions/index.d.ts

@@ -3,9 +3,11 @@ export * from './deselectLayer';
 export * from './initPixiApp';
 export * from './initViewport';
 export * from './nodeSprites';
+export * from './roundedBorderRect';
 export * from './timelineEdge';
 export * from './timelineGuides';
 export * from './timelineNode';
 export * from './timelineNodes';
 export * from './timelinePlayhead';
 export * from './timelineScale';
+export * from './subNodesToggle';

package/dist/types/src/pixiFunctions/nodeSprites.d.ts

@@ -1,20 +1,34 @@
 import { Application, Texture } from 'pixi.js';
+export declare const simpleFillTextureSize = 10;
 type BoxTextures = Record<'cap' | 'body', Texture>;
+type BorderRectTextures = Record<'corner' | 'edge', Texture>;
 export declare function initNodeTextureCache(): void;
 export declare function destroyNodeTextureCache(): void;
+type SimpleFillTextureProps = {
+    pixiApp: Application;
+    fill: number;
+};
+export declare function getSimpleFillTexture({ pixiApp, fill, }: SimpleFillTextureProps): Texture;
 type GetNodeBoxTexturesProps = {
-    appRef: Application;
+    pixiApp: Application;
     fill: number;
     borderRadius: number;
     boxCapWidth: number;
     height: number;
 };
-export declare function getNodeBoxTextures({ appRef, fill, borderRadius, boxCapWidth, height, }: GetNodeBoxTexturesProps): BoxTextures;
-type GetEdgeArrowTextureProps = {
-    appRef: Application;
+export declare function getNodeBoxTextures({ pixiApp, fill, borderRadius, boxCapWidth, height, }: GetNodeBoxTexturesProps): BoxTextures;
+type GetArrowTextureProps = {
+    pixiApp: Application;
     strokeColor: number;
     edgeWidth: number;
     edgeLength: number;
 };
-export declare function getEdgeArrowTexture({ appRef, strokeColor, edgeWidth, edgeLength, }: GetEdgeArrowTextureProps): Texture;
+export declare function getArrowTexture({ pixiApp, strokeColor, edgeWidth, edgeLength, }: GetArrowTextureProps): Texture;
+type GetRoundedBorderRectTexturesProps = {
+    pixiApp: Application;
+    borderRadius: number;
+    borderColor: number;
+    borderWidth: number;
+};
+export declare function getRoundedBorderRectTextures({ pixiApp, borderRadius, borderColor, borderWidth, }: GetRoundedBorderRectTexturesProps): BorderRectTextures;
 export {};

package/dist/types/src/pixiFunctions/roundedBorderRect.d.ts

@@ -0,0 +1,39 @@
+import { Container } from 'pixi.js';
+import { GraphState } from '../models';
+export declare const roundedBorderRectAnimationDuration = 0.2;
+export declare const roundedBorderRectAnimationEase = "power2.out";
+type RoundedBorderRectResizeProps = {
+    width: number;
+    height: number;
+    animate?: boolean;
+};
+type RoundedBorderRectProps = {
+    graphState: GraphState;
+    width: number;
+    height: number;
+    borderRadius: number;
+    borderColor: number;
+    borderWidth: number;
+};
+export declare class RoundedBorderRect extends Container {
+    private readonly graphState;
+    private rectWidth;
+    private rectHeight;
+    private readonly borderRadius;
+    private readonly borderColor;
+    private readonly borderWidth;
+    private topLeft;
+    private topRight;
+    private bottomRight;
+    private bottomLeft;
+    private topEdge;
+    private rightEdge;
+    private bottomEdge;
+    private leftEdge;
+    constructor({ graphState, width, height, borderRadius, borderColor, borderWidth, }: RoundedBorderRectProps);
+    private initRect;
+    resize({ width, height, animate, }: RoundedBorderRectResizeProps): void;
+    private killTweens;
+    destroy(): void;
+}
+export {};

package/dist/types/src/pixiFunctions/subNodesToggle.d.ts

@@ -0,0 +1,40 @@
+import { Container } from 'pixi.js';
+import { GraphState, GraphTimelineNode } from '../models';
+type SubNodesToggleProps = {
+    graphState: GraphState;
+    nodeData: GraphTimelineNode;
+    size: number;
+    floating?: boolean;
+};
+export declare class SubNodesToggle extends Container {
+    private readonly graphState;
+    private readonly nodeData;
+    private readonly size;
+    private isFloating;
+    private isExpanded;
+    private textColor;
+    private readonly toggleBox;
+    private readonly hoverShade;
+    private toggleArrow;
+    private toggleBorder;
+    private divider;
+    private readonly unWatchers;
+    constructor({ graphState, nodeData, size, floating, }: SubNodesToggleProps);
+    private initWatchers;
+    private initShapes;
+    private drawToggleBox;
+    private drawHoverShade;
+    private drawDivider;
+    private drawToggleArrow;
+    private drawToggleBorder;
+    private setToggleArrowRotation;
+    private getTextColor;
+    private redraw;
+    private hover;
+    private unHover;
+    setExpanded(): void;
+    setCollapsed(): void;
+    updateFloatingState(value: boolean): void;
+    destroy(): void;
+}
+export {};

package/dist/types/src/pixiFunctions/timelineEdge.d.ts

@@ -1,31 +1,49 @@
-import { Application, Container } from 'pixi.js';
-import { ComputedRef } from 'vue';
-import { ParsedThemeStyles } from '../models';
+import { Container } from 'pixi.js';
+import { GraphState } from '../models';
 import { TimelineNode } from '../pixiFunctions';
 type TimelineEdgeProps = {
-    appRef: Application;
-    styles: ComputedRef<ParsedThemeStyles>;
     sourceNode: TimelineNode;
     targetNode: TimelineNode;
+    graphState: GraphState;
 };
 export declare class TimelineEdge extends Container {
-    private readonly appRef;
-    private readonly styles;
     private readonly sourceNode;
     private readonly targetNode;
+    private readonly graphState;
     private sourceX;
     private sourceY;
     private targetX;
     private targetY;
+    private sourceControlPointX;
+    private sourceControlPointY;
+    private targetControlPointX;
+    private targetControlPointY;
+    private readonly edgePoints;
     private readonly edge;
     private readonly arrow;
-    private readonly unwatch;
-    constructor({ appRef, styles, sourceNode, targetNode, }: TimelineEdgeProps);
-    private assignStartAndEndPositions;
-    private drawEdge;
-    private readonly getXBezier;
+    private readonly unWatchers;
+    constructor({ sourceNode, targetNode, graphState, }: TimelineEdgeProps);
+    private initCulling;
+    private initWatchers;
+    private assignBezierPositions;
+    private initEdge;
+    private initEdgePoints;
     private drawArrow;
-    update(newStyles?: boolean): void;
+    /**
+     * Update functions
+     */
+    update(): void;
+    private updateStyle;
+    /**
+     * Utilities
+     */
+    private hasEdgeChanged;
+    private getSourceX;
+    private getNodeY;
+    private readonly getXBezier;
+    private getEdgeTexture;
+    private readonly getPointBezierPosition;
+    private getTargetAnchorPointPosition;
     destroy(): void;
 }
 export {};

package/dist/types/src/pixiFunctions/timelineGuide.d.ts

@@ -1,20 +1,24 @@
-import { Container } from 'pixi.js';
+import { Cull } from '@pixi-essentials/cull';
+import { Application, Container } from 'pixi.js';
 import { ComputedRef } from 'vue';
 import { ParsedThemeStyles } from '../models';
 type TimelineGuideProps = {
+    appRef: Application;
     labelText: string | null;
     styles: ComputedRef<ParsedThemeStyles>;
-    appHeight: number;
+    cull: Cull;
 };
 export declare class TimelineGuide extends Container {
+    private readonly appRef;
     private readonly labelText;
     private readonly styles;
-    private appHeight;
-    private readonly guideLine;
+    private readonly cull;
+    private guideLine;
     private label;
-    constructor({ labelText, styles, appHeight, }: TimelineGuideProps);
-    private drawGuideLine;
+    constructor({ appRef, labelText, styles, cull, }: TimelineGuideProps);
+    private initGuideLine;
     private drawLabel;
     updateHeight(appHeight: number): void;
+    destroy(): void;
 }
 export {};

package/dist/types/src/pixiFunctions/timelineGuides.d.ts

@@ -1,3 +1,4 @@
+import { Cull } from '@pixi-essentials/cull';
 import type { Viewport } from 'pixi-viewport';
 import { Application, Container } from 'pixi.js';
 import { ComputedRef, Ref } from 'vue';
@@ -5,26 +6,28 @@ import { FormatDateFns, ParsedThemeStyles } from '../models';
 type TimelineGuidesProps = {
     viewportRef: Viewport;
     appRef: Application;
+    cull: Cull;
     minimumStartDate: Date;
     maximumEndDate: Ref<Date | undefined>;
     isRunning: boolean;
-    styles: ComputedRef<ParsedThemeStyles>;
+    styleOptions: ComputedRef<ParsedThemeStyles>;
     formatDateFns: ComputedRef<FormatDateFns>;
 };
 export declare class TimelineGuides extends Container {
     private readonly viewportRef;
     private readonly appRef;
+    private readonly cull;
     private readonly minimumStartDate;
     private readonly maximumEndDate;
     private readonly isRunning;
-    private readonly styles;
+    private readonly styleOptions;
     private readonly formatDateFns;
     private readonly unwatch;
     private idealGuideCount;
     private currentTimeGap;
     private labelFormatter;
     private readonly guides;
-    constructor({ viewportRef, appRef, minimumStartDate, maximumEndDate, isRunning, styles, formatDateFns, }: TimelineGuidesProps);
+    constructor({ viewportRef, appRef, cull, minimumStartDate, maximumEndDate, isRunning, styleOptions, formatDateFns, }: TimelineGuidesProps);
     updateGuides(): void;
     private updateIdealGuideCount;
     private updateCurrentTimeGap;