@squeed/flow-sdk 0.1.16 → 2.0.1

package/dist/index.d.ts

@@ -7,6 +7,8 @@ export declare function addChild(json: SqueedJson, parentAddress: string, child:
     address: string;
 };
 
+export declare function addConnection(json: SqueedJson, sourceAddress: string, connection: SqueedConnection): SqueedJson;
+
 /** "root.a.b.#" → ["a", "b"] */
 export declare function addressToPath(address: string): string[];
 
@@ -56,6 +58,14 @@ export declare interface BottomBarRenderProps {
     callbacks: FlowDiagramCallbacks;
 }
 
+/** Centre + size, model units (matches cytoscape's node position/width/height) */
+declare interface Box {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+}
+
 export declare interface CompileOptions {
     title?: string;
     /** Root in the middle, children fan out both ways (direction "C") */
@@ -95,9 +105,9 @@ export declare const DynamicIcon: ({ name, ...props }: {
     name: any;
 }) => JSX_2.Element;
 
-export declare function FlowDiagram({ title, json, nodes, edges, config, callbacks, className, style, showBottomBar, }: FlowDiagramProps & {
-    showBottomBar?: boolean;
-}): JSX_2.Element;
+export declare type EdgeMode = "workflow" | "properties";
+
+export declare function FlowDiagram({ title, json, nodes, edges, config, callbacks, className, style, showBottomBar, }: FlowDiagramProps): JSX_2.Element;
 
 /** Event callbacks for the flow diagram */
 export declare interface FlowDiagramCallbacks {
@@ -127,7 +137,7 @@ export declare interface FlowDiagramCallbacks {
     /** Fires when a hover overlay action is clicked */
     onNodeHoverAction?: (actionId: string, nodeId: string, nodeData: any) => void;
     /** Fires when a new edge is drawn between two nodes */
-    onEdgeCreate?: (sourceId: string, targetId: string) => void;
+    onEdgeCreate?: (sourceId: string, targetId: string, properties?: FlowEdgeProperties) => void;
     /** Fires when an edge is clicked/selected */
     onEdgeSelect?: (edgeId: string, edgeData: any) => void;
     /** Fires when edge selection is cleared */
@@ -154,8 +164,8 @@ export declare interface FlowDiagramCallbacks {
     onDirectionChange?: (direction: FlowDirection) => void;
     /** Fires when array/set mode toggles in bottom bar */
     onArrayModeChange?: (isArrayMode: boolean) => void;
-    /** Fires when Cytoscape instance is initialized (for advanced use) */
-    onCyInit?: (cy: any) => void;
+    /** Fires once the renderer is ready with the engine handle (zoom/pan/fit/coordinate helpers) */
+    onInit?: (engine: FlowEngine) => void;
     /**
      * Fires with the updated Squeed JSON after any toolbar/inline edit. The SDK applies the
      * edit with `$` schema keys; store the result and pass it back as `json`.
@@ -167,6 +177,8 @@ export declare interface FlowDiagramCallbacks {
 export declare interface FlowDiagramConfig {
     /** Layout direction: "LR", "RL", "TB", "BT" */
     direction?: FlowDirection;
+    nodeAlignment?: NodeAlignment;
+    edgeMode?: EdgeMode;
     /** Layout algorithm */
     layout?: LayoutAlgorithm;
     /** Theme accent color (Chakra token e.g. "blue.500") */
@@ -230,6 +242,9 @@ export declare interface FlowDiagramEdge {
         id: string;
         source: string;
         target: string;
+        sourceProperty?: string;
+        targetProperty?: string;
+        connection?: SqueedConnectionRef;
         label?: string;
         /** Chakra token or hex; overrides the theme/edgeColor line color for this edge */
         color?: string;
@@ -271,6 +286,7 @@ export declare interface FlowDiagramProps {
     config?: FlowDiagramConfig;
     /** Event callbacks */
     callbacks?: FlowDiagramCallbacks;
+    showBottomBar?: boolean;
     /** CSS class name */
     className?: string;
     /** Inline styles */
@@ -280,6 +296,30 @@ export declare interface FlowDiagramProps {
 /** "C" = center: root in the middle, children fan out both ways (generate with `isCntr: true`); laid out as LR */
 export declare type FlowDirection = "LR" | "RL" | "TB" | "BT" | "C";
 
+export declare interface FlowEdgeProperties {
+    sourceProperty?: string;
+    targetProperty?: string;
+}
+
+/** Handle passed to `callbacks.onInit`. */
+export declare interface FlowEngine {
+    zoom(): number;
+    /** Set zoom keeping the current pan (like cytoscape `cy.zoom(level)`) */
+    zoom(level: number): void;
+    pan(): Point;
+    pan(p: Point): void;
+    /** Zoom keeping the model point under `renderedPoint` (container px) fixed */
+    zoomAt(level: number, renderedPoint: Point): void;
+    /** Fit all elements into the container with `padding` rendered px */
+    fit(padding?: number): void;
+    /** Centre all elements at the current zoom */
+    center(): void;
+    clientToModel(clientX: number, clientY: number): Point;
+    modelToClient(p: Point): Point;
+    getNodeBox(id: string): Box | undefined;
+    onViewportChange(fn: (vp: ViewportState) => void): () => void;
+}
+
 export declare const getChakraColorHex: (color?: any, opacity?: any) => any;
 
 export declare const getColorVariant: (color: string) => {
@@ -298,6 +338,8 @@ export declare function getNode(json: SqueedJson, address: string): any;
 
 export declare type LayoutAlgorithm = "dagre" | "elk" | "tidytree" | "concentric" | "cose";
 
+export declare type NodeAlignment = "leading" | "center" | "trailing";
+
 /** Actions shown in the hover overlay above nodes */
 export declare interface NodeOverlayAction {
     id: string;
@@ -341,6 +383,11 @@ export declare interface ParentNodeStyle {
     labelPosition?: "top" | "center" | "bottom";
 }
 
+declare interface Point {
+    x: number;
+    y: number;
+}
+
 /** Removes a `$target` edge; hierarchy edges cannot be removed without removing the child (returns json unchanged). */
 export declare function removeEdge(json: SqueedJson, edge: RenderedEdgeRef): {
     json: SqueedJson;
@@ -349,10 +396,11 @@ export declare function removeEdge(json: SqueedJson, edge: RenderedEdgeRef): {
 
 export declare function removeNode(json: SqueedJson, address: string): SqueedJson;
 
-export declare interface RenderedEdgeRef {
+export declare interface RenderedEdgeRef extends FlowEdgeProperties {
     source: string;
     target: string;
     isInverted?: boolean | null;
+    connection?: SqueedConnectionRef;
 }
 
 /**
@@ -362,7 +410,7 @@ export declare interface RenderedEdgeRef {
  */
 export declare function resolveEdgeOwner(edge: RenderedEdgeRef): {
     address: string;
-    kind: "hierarchy" | "target";
+    kind: "hierarchy" | "target" | "connection";
 };
 
 /** Props passed to custom edge selection toolbar renderer */
@@ -410,15 +458,29 @@ export declare interface SqueedChange {
 export declare interface SqueedChangeInfo {
     type: "nodeLabel" | "nodeColor" | "nodeIcon" | "nodeCollapse" | "nodeCreate" | "nodeDelete" | "edgeLabel" | "edgeStyle" | "edgeColor" | "edgeCreate" | "edgeDelete";
     address?: string;
-    edge?: {
+    edge?: FlowEdgeProperties & {
         source: string;
         target: string;
         isInverted?: boolean | null;
+        connection?: SqueedConnectionRef;
     };
     key?: string;
     value?: unknown;
 }
 
+export declare interface SqueedConnection extends FlowEdgeProperties {
+    target: string;
+    id?: string;
+    label?: string;
+    color?: string;
+    style?: "solid" | "dashed" | "animated";
+}
+
+export declare interface SqueedConnectionRef {
+    address: string;
+    key: string;
+}
+
 /** Schema keys that describe the edge *into* a node (parent → child) */
 export declare type SqueedEdgeKey = "$sourceLabel" | "$isEdgeAnimated" | "$isEdgeDashed" | "$edgeColor";
 
@@ -430,7 +492,7 @@ export declare type SqueedEdgeKey = "$sourceLabel" | "$isEdgeAnimated" | "$isEdg
 export declare type SqueedJson = Record<string, any> | any[];
 
 /** Schema keys that live on a node */
-export declare type SqueedNodeKey = "$label" | "$bgColor" | "$textColor" | "$borderColor" | "$borderRadius" | "$fontSize" | "$icon" | "$content" | "$media" | "$collapsed" | "$parent";
+export declare type SqueedNodeKey = "$label" | "$bgColor" | "$textColor" | "$borderColor" | "$borderRadius" | "$fontSize" | "$icon" | "$content" | "$media" | "$collapsed" | "$parent" | "$connections";
 
 /** Immutable update of the node at `address` (root address updates the document itself) */
 export declare function updateNode(json: SqueedJson, address: string, fn: (node: any) => any): SqueedJson;
@@ -481,4 +543,9 @@ export declare function useThemeContentColors(color: any): {
     highlightColorFaint: string;
 };
 
+declare interface ViewportState {
+    pan: Point;
+    zoom: number;
+}
+
 export { }