@xyflow/svelte/dist/lib/hooks/useNodesEdgesViewport.svelte.js

Svelte Flow - A highly customizable Svelte library for building node-based editors, workflow systems, diagrams and more.

import { useStore } from '../store';
/**
 * Hook for getting the current nodes from the store.
 *
 * @public
 * @returns A reactive signal of the current nodes
 */
export function useNodes() {
    const store = $derived(useStore());
    return {
        get current() {
            return store.nodes;
        },
        set current(nodes) {
            store.nodes = nodes;
        },
        update(updateFn) {
            store.nodes = updateFn(store.nodes);
        },
        set(nodes) {
            store.nodes = nodes;
        }
    };
}
/**
 * Hook for getting the current edges from the store.
 *
 * @public
 * @returns A reactive signal of the current edges
 */
export function useEdges() {
    const store = $derived(useStore());
    return {
        get current() {
            return store.edges;
        },
        set current(edges) {
            store.edges = edges;
        },
        update(updateFn) {
            store.edges = updateFn(store.edges);
        },
        set(edges) {
            store.edges = edges;
        }
    };
}
/**
 * Hook for getting the current viewport from the store.
 *
 * @public
 * @returns A reactive signal of the current viewport
 */
export function useViewport() {
    const store = $derived(useStore());
    return {
        get current() {
            return store.viewport;
        },
        set current(viewport) {
            store.viewport = viewport;
        },
        update(updateFn) {
            store.viewport = updateFn(store.viewport);
        },
        set(viewport) {
            store.viewport = viewport;
        }
    };
}