Alpine flow basic example

### Full Example: Interactive Flowchart Source: https://github.com/copyfactory/alpineflow/blob/main/README.md Combines node creation and editor setup to create a fully interactive flowchart. Demonstrates real-time viewport updates and node interaction. ```html Alpine flow basic example

Live output

``` -------------------------------- ### Initialize Flow Editor with Configuration Source: https://github.com/copyfactory/alpineflow/blob/main/README.md Example of initializing the flow editor with custom nodes, minimum zoom, and maximum zoom settings. ```html

``` -------------------------------- ### Install Alpine Flow via npm Source: https://github.com/copyfactory/alpineflow/blob/main/README.md Install Alpine Flow using npm and import its components and styles for use in your project. ```bash npm i @copyfactory/alpine-flow ``` ```javascript import Alpine from 'alpinejs' import { node, flowEditor } from '@copyfactory/alpine-flow'; import '@copyfactory/alpine-flow/dist/flow.css' window.Alpine = Alpine window.Alpine.plugin(node); window.Alpine.data('flowEditor', flowEditor); Alpine.start() ``` -------------------------------- ### Registering a Node in a Custom Registry Source: https://github.com/copyfactory/alpineflow/blob/main/README.md This example demonstrates how to register a node under a specific registry name using a modifier. This allows for better organization and retrieval of node types. ```html

``` -------------------------------- ### Install Alpine Flow via CDN Source: https://github.com/copyfactory/alpineflow/blob/main/README.md Include the CSS and JavaScript files for Alpine Flow in your HTML to use it via CDN. ```html ``` -------------------------------- ### Get Node by ID Source: https://github.com/copyfactory/alpineflow/blob/main/README.md Retrieves a specific node from the editor using its unique identifier. Returns null if the node is not found. ```javascript let myNode = editor.getNodeById('my-node-id'); console.log(myNode); ``` -------------------------------- ### Find Descendant Node IDs Source: https://github.com/copyfactory/alpineflow/blob/main/README.md Recursively finds all descendant node IDs starting from a specified node ID. Returns an array of node IDs. ```javascript let nodeIds = editor.findDescendantsOfNode('my-node-id'); console.log(nodes); ``` -------------------------------- ### Create a Flow Editor Source: https://github.com/copyfactory/alpineflow/blob/main/README.md Initialize a flow editor by setting the `x-data` attribute to `flowEditor` on an element. The editor will occupy the full dimensions of its container. ```html

``` -------------------------------- ### Create a Basic Node Component Source: https://github.com/copyfactory/alpineflow/blob/main/README.md Define a reusable node component with dynamic text and click-based styling. Props are automatically synced to the node instance's data. ```html

``` -------------------------------- ### Handle Flow Initialization Event Source: https://github.com/copyfactory/alpineflow/blob/main/README.md Listens for the 'flow-init' event dispatched on the window when the editor has completed its initial load. The event detail contains initialization data. ```javascript event = $event.detail; console.log(event); // {data: true} ``` -------------------------------- ### Registering a Custom Node with Default Configuration Source: https://github.com/copyfactory/alpineflow/blob/main/README.md This snippet shows how to register a custom node with specific properties. Ensure that an 'x-init' directive is not on the same div as 'x-node'. It's recommended to add 'x-ignore' to the first child to prevent Alpine from crawling it. ```html

``` -------------------------------- ### Create a Node Component with Alpine.data Source: https://github.com/copyfactory/alpineflow/blob/main/README.md Define a node component using Alpine.js's `Alpine.data` for more structured component logic. This approach separates data and methods for better organization. ```html

``` -------------------------------- ### editor.setViewportToCenter(_paddingY_, _paddingX_) Source: https://github.com/copyfactory/alpineflow/blob/main/README.md Adjusts the editor's viewport to center all nodes, ensuring they are fully visible. Optional padding can be applied. ```APIDOC ## editor.setViewportToCenter(_paddingY_, _paddingX_) ### Description Sets the viewport of the canvas to center the content so that all nodes are in view. ### Parameters #### Query Parameters - **paddingY** (number) - Optional - The vertical padding as a percentage of canvas height. Defaults to `0.1`. - **paddingX** (number) - Optional - The horizontal padding as a fraction of canvas width. Defaults to `0.3`. ### Returns - (Object) - The plain object representation of the viewport. ### Example ```javascript editor.setViewportToCenter(); ``` ``` -------------------------------- ### editor.setViewport(_x_, _y_, _zoom_) Source: https://github.com/copyfactory/alpineflow/blob/main/README.md Manually sets the editor's viewport position and zoom level. Allows precise control over the visible area. ```APIDOC ## editor.setViewport(_x_, _y_, _zoom_) ### Description Sets the viewport based on X/Y and zoom level. ### Parameters #### Query Parameters - **x** (number) - Optional - The new X. Defaults to `0`. - **y** (number) - Optional - The new Y. Defaults to `0`. - **zoom** (number) - Optional - The new zoom. Defaults to `1`. ### Returns - (Object) - The plain object representation of the viewport. ### Example ```javascript editor.setViewPort(100, 100, 1.5); ``` ``` -------------------------------- ### Handle New Node Rendered Event Source: https://github.com/copyfactory/alpineflow/blob/main/README.md Listens for the 'flow-new-node-rendered' event dispatched on the window when a new node has been successfully rendered. The event detail provides the ID of the rendered node. ```javascript event = $event.detail; console.log(event); // {data: 'node-id'} ``` -------------------------------- ### Convert Editor to Object Source: https://github.com/copyfactory/alpineflow/blob/main/README.md Serializes the current state of the editor, including nodes, edges, and viewport, into a plain JavaScript object for saving or transfer. ```javascript let flowObject = editor.toObject(); console.log(flowObject); // { // nodes: []; // edges: []; // viewport: {}; // }; let newEditor = flowEditor(flowObject); ``` -------------------------------- ### Center Viewport with Padding Source: https://github.com/copyfactory/alpineflow/blob/main/README.md Adjusts the viewport to center all nodes, applying optional vertical and horizontal padding. Uses default padding if not specified. ```javascript editor.setViewportToCenter(); ``` -------------------------------- ### flowEditor Methods Source: https://github.com/copyfactory/alpineflow/blob/main/README.md The `flowEditor` component provides several methods for manipulating and querying the state of the workflow. These methods allow for adding, deleting, and retrieving nodes, as well as managing the editor's viewport and state. ```APIDOC ## flowEditor Methods ### Description Provides methods to interact with the workflow editor, including node management, viewport control, and state serialization. ### Methods - **`editor.hasNodes()`** - Description: Checks if the editor contains any nodes. - Returns: `boolean` - **`editor.hasNoNodes()`** - Description: Checks if the editor contains no nodes. - Returns: `boolean` - **`editor.addNode(_incompleteNode_, _dependsOn_=null)`** - Description: Adds a new node to the editor. Optionally specify dependencies. - Parameters: - `_incompleteNode_` (object) - The node object to add. - `_dependsOn_` (string, optional) - The ID of the node this new node depends on. - **`editor.deleteNode(_nodeId_, _dependsOn_=null)`** - Description: Deletes a node from the editor by its ID. Optionally specify dependencies. - Parameters: - `_nodeId_` (string) - The ID of the node to delete. - `_dependsOn_` (string, optional) - The ID of the node this deletion is dependent on. - **`editor.getNodeById(_nodeId_)`** - Description: Retrieves a node by its ID. - Parameters: - `_nodeId_` (string) - The ID of the node to retrieve. - Returns: `object` - The node object if found, otherwise `undefined`. - **`editor.findParents(_nodeId_)`** - Description: Finds all parent nodes of a given node. - Parameters: - `_nodeId_` (string) - The ID of the node whose parents to find. - Returns: `array` - An array of parent node objects. - **`editor.findChildren(_nodeId_)** - Description: Finds all child nodes of a given node. - Parameters: - `_nodeId_` (string) - The ID of the node whose children to find. - Returns: `array` - An array of child node objects. - **`editor.findDescendantsOfNode(_nodeId_)`** - Description: Finds all descendant nodes of a given node. - Parameters: - `_nodeId_` (string) - The ID of the node whose descendants to find. - Returns: `array` - An array of descendant node objects. - **`editor.zoomOut(_zoomStep = 1 / 1.2_)`** - Description: Zooms out the editor view. - Parameters: - `_zoomStep_` (number, optional) - The step value for zooming out. Defaults to `1 / 1.2`. - **`editor.zoomIn(_zoomStep = 1.2_)`** - Description: Zooms in the editor view. - Parameters: - `_zoomStep_` (number, optional) - The step value for zooming in. Defaults to `1.2`. - **`editor.setViewportToCenter(_paddingY = 0.1, paddingX = 0.3_)`** - Description: Centers the viewport on the current view with optional padding. - Parameters: - `_paddingY_` (number, optional) - Vertical padding. Defaults to `0.1`. - `_paddingX_` (number, optional) - Horizontal padding. Defaults to `0.3`. - **`editor.setViewport(_x=0, y=0, zoom=1_)`** - Description: Sets the editor viewport to specific coordinates and zoom level. - Parameters: - `_x_` (number, optional) - The x-coordinate for the viewport. Defaults to `0`. - `_y_` (number, optional) - The y-coordinate for the viewport. Defaults to `0`. - `_zoom_` (number, optional) - The zoom level for the viewport. Defaults to `1`. - **`editor.toObject()`** - Description: Serializes the current state of the editor to an object. - Returns: `object` - An object representing the editor's state. ``` -------------------------------- ### editor.zoomIn(_zoomStep_) Source: https://github.com/copyfactory/alpineflow/blob/main/README.md Increases the zoom level of the editor viewport. Accepts an optional zoom step factor. ```APIDOC ## editor.zoomIn(_zoomStep_) ### Description Zooms in the viewport. ### Parameters #### Query Parameters - **zoomStep** (number) - Optional - The factor to zoom in. Defaults to `1.2`. ### Example ```javascript editor.zoomIn(); ``` ``` -------------------------------- ### editor.toObject() Source: https://github.com/copyfactory/alpineflow/blob/main/README.md Serializes the entire editor state, including nodes, edges, and viewport information, into a plain JavaScript object suitable for saving or transmission. ```APIDOC ## editor.toObject() ### Description Converts the flow editor to a plain object to save to the DB. ### Returns - (Object) - The nodes, edges and viewport. ### Example ```javascript let flowObject = editor.toObject(); console.log(flowObject); // { // nodes: []; // edges: []; // viewport: {}; // }; let newEditor = flowEditor(flowObject); ``` ``` -------------------------------- ### editor.hasNoNodes() Source: https://github.com/copyfactory/alpineflow/blob/main/README.md Checks if the editor is empty of nodes. This is a convenient way to verify if a flow has been initialized or cleared. ```APIDOC ## editor.hasNoNodes() ### Description Returns `true` if the editor has no nodes, otherwise `false`. ### Example ```javascript editor.hasNoNodes(); ``` ``` -------------------------------- ### editor.zoomOut(_zoomStep_) Source: https://github.com/copyfactory/alpineflow/blob/main/README.md Reduces the zoom level of the editor viewport. Accepts an optional zoom step factor. ```APIDOC ## editor.zoomOut(_zoomStep_) ### Description Zooms out the viewport. ### Parameters #### Query Parameters - **zoomStep** (number) - Optional - The factor to zoom out. Defaults to `1 / 1.2`. ### Example ```javascript editor.zoomOut(); ``` ``` -------------------------------- ### Accessing Nodes from a Custom Registry Source: https://github.com/copyfactory/alpineflow/blob/main/README.md This snippet shows how to access registered node types from a custom registry using the $nodes magic property. This is useful for configuring editors or other components that depend on available node types. ```html

``` -------------------------------- ### editor.addNode(_incompleteNode_, _dependsOn_=null) Source: https://github.com/copyfactory/alpineflow/blob/main/README.md Adds a new node to the flow editor. This method allows for specifying dependencies on existing nodes. ```APIDOC ## editor.addNode(_incompleteNode_, _dependsOn_=null) ### Description Adds a node to the flow editor. ### Parameters - `incompleteNode` (`Object`): The incomplete node to be added. - `dependsOn` (`Array|null`, optional): The node IDs on which the new node depends. Defaults to `null`. ### Example ```javascript let newNode = { id: 'my-node-id', type: 'myNode', data: { foo: 'bar' }, }; editor.addNode(newNode, [anotherNode.id]); ``` ``` -------------------------------- ### Set Custom Viewport Source: https://github.com/copyfactory/alpineflow/blob/main/README.md Manually sets the editor's viewport position (X, Y) and zoom level. Defaults to (0, 0) and zoom 1 if not provided. ```javascript editor.setViewPort(100, 100, 1.5); ``` -------------------------------- ### Zoom Out Viewport Source: https://github.com/copyfactory/alpineflow/blob/main/README.md Zooms out the editor's viewport. Accepts an optional zoom step factor; defaults to 1/1.2. ```javascript editor.zoomOut(); ``` -------------------------------- ### editor.findParents(_nodeId_) Source: https://github.com/copyfactory/alpineflow/blob/main/README.md Fetches all parent nodes for a given node ID. This is useful for understanding the hierarchical structure of the flow. ```APIDOC ## editor.findParents(_nodeId_) ### Description Get the parent nodes of a given nodeId. ### Parameters #### Path Parameters - **nodeId** (string) - Required - The ID of the node. ### Returns - (Array) - An array of nodes. ### Example ```javascript let nodes = editor.findParents('my-node-id'); console.log(nodes); ``` ``` -------------------------------- ### Check if Editor Has No Nodes Source: https://github.com/copyfactory/alpineflow/blob/main/README.md Use this method to determine if the flow editor is empty. Returns true if no nodes exist, false otherwise. ```javascript editor.hasNoNodes(); ``` -------------------------------- ### Zoom In Viewport Source: https://github.com/copyfactory/alpineflow/blob/main/README.md Zooms in the editor's viewport. Accepts an optional zoom step factor; defaults to 1.2. ```javascript editor.zoomIn(); ``` -------------------------------- ### editor.hasNodes() Source: https://github.com/copyfactory/alpineflow/blob/main/README.md Checks if the editor contains any nodes. This is useful for determining the current state of the flow editor. ```APIDOC ## editor.hasNodes() ### Description Returns `true` if the editor has nodes, otherwise `false`. ### Returns - (`boolean`): `true` if nodes exist, `false` otherwise. ### Example ```javascript editor.hasNodes(); ``` ``` -------------------------------- ### Find Parent Nodes Source: https://github.com/copyfactory/alpineflow/blob/main/README.md Retrieves an array of parent nodes for a given node ID. Useful for understanding hierarchical relationships. ```javascript let nodes = editor.findParents('my-node-id'); console.log(nodes); ``` -------------------------------- ### Add a New Node to the Flow Editor Source: https://github.com/copyfactory/alpineflow/blob/main/README.md Adds a new node to the flow editor. You can optionally specify dependencies on other nodes by their IDs. ```javascript let newNode = { id: 'my-node-id', type: 'myNode', data: { foo: 'bar' }, }; editor.addNode(newNode, [anotherNode.id]); ``` -------------------------------- ### Handle Nodes Deleted Event Source: https://github.com/copyfactory/alpineflow/blob/main/README.md Listens for the 'flow-nodes-deleted' event dispatched on the window when one or more nodes have been removed from the editor. The event detail is an array of the deleted node IDs. ```javascript event = $event.detail; console.log(event); // {data: [deletedNodeId1, deletedNodeId2]} ``` -------------------------------- ### Find Children Nodes Source: https://github.com/copyfactory/alpineflow/blob/main/README.md Retrieves an array of direct children nodes for a given node ID. Useful for exploring immediate sub-elements. ```javascript let nodes = editor.findChildren('my-node-id'); console.log(nodes); ``` -------------------------------- ### editor.findChildren(_nodeId_) Source: https://github.com/copyfactory/alpineflow/blob/main/README.md Retrieves all direct child nodes of a specified node ID. This helps in navigating down the hierarchy of the flow. ```APIDOC ## editor.findChildren(_nodeId_) ### Description Get the children nodes of a given nodeId. ### Parameters #### Path Parameters - **nodeId** (string) - Required - The ID of the node. ### Returns - (Array) - An array of nodes. ### Example ```javascript let nodes = editor.findChildren('my-node-id'); console.log(nodes); ``` ``` -------------------------------- ### editor.getNodeById(_nodeId_) Source: https://github.com/copyfactory/alpineflow/blob/main/README.md Retrieves a specific node from the editor using its unique identifier. Returns the node object if found, otherwise returns null. ```APIDOC ## editor.getNodeById(_nodeId_) ### Description Gets a node by its ID. ### Parameters #### Path Parameters - **nodeId** (string) - Required - The ID of the node. ### Returns - (Node|null) - The node with the given ID, or `null` if not found. ### Example ```javascript let myNode = editor.getNodeById('my-node-id'); console.log(myNode); ``` ``` -------------------------------- ### Check if Editor Has Nodes Source: https://github.com/copyfactory/alpineflow/blob/main/README.md Use this method to determine if the flow editor currently contains any nodes. Returns true if nodes exist, false otherwise. ```javascript editor.hasNodes(); ``` -------------------------------- ### editor.findDescendantsOfNode(_nodeId_) Source: https://github.com/copyfactory/alpineflow/blob/main/README.md Recursively finds all descendant nodes (children, grandchildren, etc.) of a given node ID. Returns an array of node IDs. ```APIDOC ## editor.findDescendantsOfNode(_nodeId_) ### Description Recursively searches nodes for all descendents of a given nodeId. ### Parameters #### Path Parameters - **nodeId** (string) - Required - The ID of the node. ### Returns - (Array) - An array of nodeIds. ### Example ```javascript let nodeIds = editor.findDescendantsOfNode('my-node-id'); console.log(nodes); ``` ``` -------------------------------- ### editor.deleteNode(_nodeId_, _strategy_) Source: https://github.com/copyfactory/alpineflow/blob/main/README.md Deletes a node from the flow editor, with options to manage its dependent edges and nodes. ```APIDOC ## editor.deleteNode(_nodeId_, _strategy_) ### Description Delete a node from the graph along with its edges. ### Parameters - `nodeId` (`string`): The ID of the node. - `strategy` (`string`): `preserve` (the default) tries to keep as many nodes as possible while deleting. `all` removes all descendants of the input node. ### Example ```javascript // Suppose you had a graph of nodes: '1 -> 2 -> 3' editor.deleteNode('2', 'preserve'); // by deleting node 2 the new nodes would be: '1 -> 3' since we can repoint node '1' to node '3'. editor.deleteNode('2', 'all'); // would delete all dependents on 2 onwards. // by deleting node 2 the new nodes would be: '1' since we delete node '2' and all dependants on node '2' (node '3') in this case. ``` ``` -------------------------------- ### Delete a Node and its Edges Source: https://github.com/copyfactory/alpineflow/blob/main/README.md Deletes a specified node and any associated edges from the graph. The 'strategy' parameter controls whether dependent nodes are preserved or removed. ```javascript // Suppose you had a graph of nodes: '1 -> 2 -> 3' editor.deleteNode('2', 'preserve'); // by deleting node 2 the new nodes would be: '1 -> 3' since we can repoint node '1' to node '3'. editor.deleteNode('2', 'all'); // would delete all dependents on 2 onwards. // by deleting node 2 the new nodes would be: '1' since we delete node '2' and all dependants on node '2' (node '3') in this case. ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.