@ghchinoy/litflow 0.2.4 → 0.2.7

package/README.md

@@ -116,6 +116,7 @@ LitFlow leverages `@xyflow/system`, the same headless core that powers React Flo
   - `examples/multiple-handles/`: Nodes with multiple input/output ports.
   - `examples/dynamic-interactivity/`: Adding/removing nodes and edges at runtime.
   - `examples/subflows/`: Nested nodes and parent-child relationships.
+  - `examples/designer/`: A dual-pane authoring tool with live JSON sync.
 - **`<lit-flow>`**: The root component. It initializes the `XYPanZoom` instance for the viewport and manages the collection of nodes and edges.
 - **`<lit-node>`**: A reactive Lit component for individual nodes. Uses **Light DOM** to ensure compatibility with xyflow's system utilities (like hit-testing).
 - **`<lit-handle>`**: A connection port component. Also uses **Light DOM** to ensure discoverability during connection dragging.
@@ -126,6 +127,8 @@ LitFlow leverages `@xyflow/system`, the same headless core that powers React Flo
 ## 🛠️ Key Features
 - **Panning & Zooming**: Full support for viewport manipulation via d3-zoom (via xyflow).
 - **Node Dragging**: Individual nodes can be dragged, with positions synced back to the state.
+- **Live Inspector Designer**: A comprehensive authoring example featuring a drag-and-drop palette and live JSON synchronization.
+- **Global Change Observability**: A robust `change` event that fires on any graph mutation (drag, connect, delete) for external state syncing.
 - **Marquee Selection**: Bulk select nodes and edges by dragging a selection box (Shift + Drag).
 - **Edge Markers**: Support for arrowheads and other markers on edges.
 - **Manual Connections**: Drag-to-connect functionality between handles with a live connection line.

package/dist/lit-flow.d.ts

@@ -29,6 +29,7 @@ export declare class LitFlow extends LitFlow_base {
     private _height;
     set nodes(nodes: NodeBase[]);
     get nodes(): NodeBase[];
+    private _notifyChange;
     private _discoverNodes;
     set edges(edges: any[]);
     get edges(): any[];
@@ -48,6 +49,11 @@ export declare class LitFlow extends LitFlow_base {
         x: number;
         y: number;
     };
+    /**
+     * Fits the view to the current nodes.
+     * @param padding Optional padding in pixels (default: 50)
+     */
+    fitView(padding?: number): Promise<void>;
     private _updatePanZoom;
     firstUpdated(): void;
     updated(changedProperties: Map<string, any>): void;