react-html-graph 1.0.0

package/dist/module.d.ts

@@ -0,0 +1,18 @@
+export { default, default as Graph } from "./graph";
+export { calculateLabels, calculatePath, configureWorkerPool } from "./calculations";
+export { ConnectionContext } from "./context/connection-context";
+export { ErrorContext } from "./context/error-context";
+export { GraphContext } from "./context/graph-context";
+export { GraphRootContext } from "./context/graph-root-context";
+export { default as useConnectionApi } from "./hooks/api";
+export { useConnections, usePortDrag, usePortDrop } from "./hooks/connection";
+export { default as useGraphError } from "./hooks/error";
+export { default as useGraphItems } from "./hooks/graph";
+export { default as useGraphMode } from "./hooks/graph-mode";
+export { default as useGraphRoot } from "./hooks/graph-root";
+export { default as useViewbox } from "./hooks/viewbox";
+export { default as GraphLink } from "./link/base";
+export { default as GraphObject } from "./nodes/base";
+export { default as GraphPort } from "./ports/base";
+export * from "./types";
+//# sourceMappingURL=module.d.ts.map

package/dist/module.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"module.d.ts","sourceRoot":"","sources":["../src/module.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AACpD,OAAO,EAAE,eAAe,EAAE,aAAa,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AACrF,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AACjE,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AACvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC1D,OAAO,EAAE,cAAc,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAC9E,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,iBAAiB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,cAAc,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,cAAc,CAAC;AACpD,cAAc,SAAS,CAAC"}

package/dist/module.js

@@ -0,0 +1,18 @@
+export { default, default as Graph } from "./graph";
+export { calculateLabels, calculatePath, configureWorkerPool } from "./calculations";
+export { ConnectionContext } from "./context/connection-context";
+export { ErrorContext } from "./context/error-context";
+export { GraphContext } from "./context/graph-context";
+export { GraphRootContext } from "./context/graph-root-context";
+export { default as useConnectionApi } from "./hooks/api";
+export { useConnections, usePortDrag, usePortDrop } from "./hooks/connection";
+export { default as useGraphError } from "./hooks/error";
+export { default as useGraphItems } from "./hooks/graph";
+export { default as useGraphMode } from "./hooks/graph-mode";
+export { default as useGraphRoot } from "./hooks/graph-root";
+export { default as useViewbox } from "./hooks/viewbox";
+export { default as GraphLink } from "./link/base";
+export { default as GraphObject } from "./nodes/base";
+export { default as GraphPort } from "./ports/base";
+export * from "./types";
+//# sourceMappingURL=module.js.map

package/dist/module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"module.js","sourceRoot":"","sources":["../src/module.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AACpD,OAAO,EAAE,eAAe,EAAE,aAAa,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AACrF,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AACjE,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AACvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC1D,OAAO,EAAE,cAAc,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAC9E,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,iBAAiB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,cAAc,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,cAAc,CAAC;AACpD,cAAc,SAAS,CAAC"}

package/dist/nodes/base.d.ts

@@ -0,0 +1,11 @@
+import { GraphObjectProps } from "../types";
+/**
+ * Componente que representa um objeto/nó do grafo. Gerencia posicionamento,
+ * arraste (drag) e exposição das portas no local correto.
+ *
+ * @param props GraphObjectProps
+ * @returns JSX.Element
+ */
+declare const MemoizedGraphObject: import("react").MemoExoticComponent<({ children, id, ports, data, initialPosition, onMove }: GraphObjectProps) => import("react/jsx-runtime").JSX.Element>;
+export default MemoizedGraphObject;
+//# sourceMappingURL=base.d.ts.map

package/dist/nodes/base.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"base.d.ts","sourceRoot":"","sources":["../../src/nodes/base.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAA4B,MAAM,UAAU,CAAC;AAatE;;;;;;GAMG;AACH,QAAA,MAAM,mBAAmB,+FAAqF,gBAAgB,6CAwI5H,CAAA;AAEF,eAAe,mBAAmB,CAAC"}

package/dist/nodes/base.js

@@ -0,0 +1,117 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef, useState, useCallback, useEffect, useMemo, memo } from "react";
+import useGraphMode from "../hooks/graph-mode";
+import GraphPort from "../ports/base";
+import useGetZoom from "../hooks/get-zoom";
+/**
+ * Componente que representa um objeto/nó do grafo. Gerencia posicionamento,
+ * arraste (drag) e exposição das portas no local correto.
+ *
+ * @param props GraphObjectProps
+ * @returns JSX.Element
+ */
+const MemoizedGraphObject = memo(function GraphObject({ children, id, ports, data, initialPosition, onMove }) {
+    const ref = useRef(null);
+    const getZoom = useGetZoom();
+    const mode = useGraphMode();
+    const [position, setPosition] = useState(() => initialPosition ?? { x: 0, y: 0, z: 0 });
+    const moveRef = useRef({
+        moving: false,
+        movePointStart: { x: 0, y: 0 },
+        startPos: { x: 0, y: 0 },
+        currentPos: { x: 0, y: 0 },
+    });
+    const handleMouseDown = useCallback((e) => {
+        if (e.button !== 0 || mode === "readonly")
+            return;
+        e.preventDefault();
+        moveRef.current.moving = true;
+        moveRef.current.movePointStart.x = e.clientX;
+        moveRef.current.movePointStart.y = e.clientY;
+        moveRef.current.startPos = { x: position.x, y: position.y };
+        moveRef.current.currentPos = { x: position.x, y: position.y };
+    }, [position, mode]);
+    const stopMoving = useCallback((e) => {
+        if (e.button === 0 && moveRef.current.moving) {
+            moveRef.current.moving = false;
+            setPosition(prev => ({
+                x: moveRef.current.currentPos.x,
+                y: moveRef.current.currentPos.y,
+                z: prev.z
+            }));
+        }
+    }, []);
+    const handleMouseMove = useCallback((e) => {
+        if (!ref.current || !moveRef.current.moving)
+            return;
+        const zoom = getZoom();
+        const dx = (e.clientX - moveRef.current.movePointStart.x) / zoom;
+        const dy = (e.clientY - moveRef.current.movePointStart.y) / zoom;
+        const newX = moveRef.current.startPos.x + dx;
+        const newY = moveRef.current.startPos.y + dy;
+        moveRef.current.currentPos.x = newX;
+        moveRef.current.currentPos.y = newY;
+        ref.current.style.left = `${newX.toFixed(0)}px`;
+        ref.current.style.top = `${newY.toFixed(0)}px`;
+    }, [getZoom]);
+    useEffect(() => {
+        if (!ref.current)
+            return;
+        ref.current.style.left = `${position.x.toFixed(0)}px`;
+        ref.current.style.top = `${position.y.toFixed(0)}px`;
+        ref.current.style.zIndex = position.z.toFixed(0);
+    }, [position]);
+    useEffect(() => {
+        if (mode === "readonly")
+            return;
+        const handlerUp = (e) => {
+            stopMoving(e);
+        };
+        const handleMove = (e) => {
+            handleMouseMove(e);
+        };
+        document.addEventListener('mouseup', handlerUp);
+        document.addEventListener('mousemove', handleMove);
+        return () => {
+            document.removeEventListener('mouseup', handlerUp);
+            document.removeEventListener('mousemove', handleMove);
+        };
+    }, [stopMoving, handleMouseMove, mode]);
+    const portsByLocation = useMemo(() => {
+        const result = {
+            top: [], bottom: [], left: [], right: [], floating: [], all: [],
+        };
+        for (const port of ports ?? []) {
+            const element = (_jsx(GraphPort, { type: port.type, id: port.id, nodeId: id, direction: port.direction, location: port.location, onDragEnd: port.onDragEnd, children: port.children }, port.id));
+            if (typeof port.location === "string" && port.location in result) {
+                result[port.location].push(element);
+            }
+            else if (typeof port.location === "object") {
+                result.floating.push(element);
+            }
+            result.all.push(element);
+        }
+        return result;
+    }, [ports, id]);
+    useEffect(() => {
+        if (onMove) {
+            onMove({ x: position.x, y: position.y, z: position.z });
+        }
+        if (ref.current) {
+            ref.current.style.zIndex = position.z.toFixed(0);
+        }
+    }, [position, onMove]);
+    useEffect(() => {
+        if (initialPosition) {
+            setPosition({
+                x: initialPosition.x,
+                y: initialPosition.y,
+                z: initialPosition.z ?? 0
+            });
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [initialPosition?.x, initialPosition?.y, initialPosition?.z]);
+    return _jsx("node-graph-object", { ref: ref, onMouseDown: handleMouseDown, onMouseUp: stopMoving, "node-id": id, children: children({ id, ports: portsByLocation, data }) }, id);
+});
+export default MemoizedGraphObject;
+//# sourceMappingURL=base.js.map

package/dist/nodes/base.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base.js","sourceRoot":"","sources":["../../src/nodes/base.tsx"],"names":[],"mappings":"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"}

package/dist/ports/base.d.ts

@@ -0,0 +1,11 @@
+import { GraphPortProps } from "../types";
+/**
+ * Componente que representa uma porta de nó (input/output/bidirectional).
+ * Registra a porta no contexto de conexões e fornece handlers de arraste
+ * e drop conforme o modo do graph.
+ *
+ * @param props Propriedades da porta (GraphPortProps)
+ * @returns JSX.Element
+ */
+export default function GraphPort({ onClick, onMouseOver, onMouseLeave, ...props }: GraphPortProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=base.d.ts.map

package/dist/ports/base.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"base.d.ts","sourceRoot":"","sources":["../../src/ports/base.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAY,cAAc,EAAE,MAAM,UAAU,CAAC;AAIpD;;;;;;;GAOG;AACH,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAC9B,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,GAAG,KAAK,EAC/C,EAAE,cAAc,2CA8HhB"}

package/dist/ports/base.js

@@ -0,0 +1,115 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useContext, useCallback } from "react";
+import { usePortDrag, usePortDrop } from "../hooks/connection";
+import { ConnectionContext } from "../context/connection-context";
+import useGraphMode from "../hooks/graph-mode";
+/**
+ * Componente que representa uma porta de nó (input/output/bidirectional).
+ * Registra a porta no contexto de conexões e fornece handlers de arraste
+ * e drop conforme o modo do graph.
+ *
+ * @param props Propriedades da porta (GraphPortProps)
+ * @returns JSX.Element
+ */
+export default function GraphPort({ onClick, onMouseOver, onMouseLeave, ...props }) {
+    const { registerPort, unregisterPort, getGraphApi } = useContext(ConnectionContext);
+    const mode = useGraphMode();
+    const { dragHandlers, isDragging, canDrag } = usePortDrag(props.nodeId, props.id, props.type);
+    const { dropHandlers, canDrop } = usePortDrop(props.nodeId, props.id, props.type);
+    useEffect(() => {
+        registerPort({
+            nodeId: props.nodeId,
+            portName: props.id,
+            connectionType: props.type,
+            direction: props.direction,
+            onDragEnd: props.onDragEnd,
+        });
+        return () => {
+            unregisterPort(props.nodeId, props.id);
+        };
+    }, [
+        props.nodeId,
+        props.id,
+        props.type,
+        props.direction,
+        props.onDragEnd,
+        registerPort,
+        unregisterPort,
+    ]);
+    const forwardClickEvents = useCallback((event) => {
+        if (!onClick)
+            return;
+        const api = getGraphApi();
+        if (!api)
+            return;
+        onClick({
+            type: 'click',
+            graph: {
+                type: props.type,
+                id: props.id,
+                nodeId: props.nodeId,
+                direction: props.direction,
+            },
+            nativeEvent: event.nativeEvent,
+            api,
+        });
+    }, [getGraphApi, onClick, props.direction, props.id, props.nodeId, props.type]);
+    const forwardMouseOverEvents = useCallback((event) => {
+        if (!onMouseOver)
+            return;
+        const api = getGraphApi();
+        if (!api)
+            return;
+        onMouseOver({
+            type: 'mouseOver',
+            graph: {
+                type: props.type,
+                id: props.id,
+                nodeId: props.nodeId,
+                direction: props.direction,
+            },
+            nativeEvent: event.nativeEvent,
+            api,
+        });
+    }, [getGraphApi, onMouseOver, props.direction, props.id, props.nodeId, props.type]);
+    const forwardMouseLeaveEvents = useCallback((event) => {
+        if (!onMouseLeave)
+            return;
+        const api = getGraphApi();
+        if (!api)
+            return;
+        onMouseLeave({
+            type: 'mouseLeave',
+            graph: {
+                type: props.type,
+                id: props.id,
+                nodeId: props.nodeId,
+                direction: props.direction,
+            },
+            nativeEvent: event.nativeEvent,
+            api,
+        });
+    }, [getGraphApi, onMouseLeave, props.direction, props.id, props.nodeId, props.type]);
+    const isOutput = props.direction === "output" || props.direction === "bidirectional";
+    const isInput = props.direction === "input" || props.direction === "bidirectional";
+    const handlers = mode === "edit"
+        ? {
+            ...(isOutput ? dragHandlers : {}),
+            ...(isInput ? dropHandlers : {}),
+        }
+        : {};
+    const portAttr = props.direction === "bidirectional"
+        ? "bidirectional"
+        : props.direction;
+    return (_jsx("node-graph-port", { ...handlers, onClick: forwardClickEvents, onMouseOver: forwardMouseOverEvents, onMouseLeave: forwardMouseLeaveEvents, "node-port": portAttr, "port-id": props.id, children: props.children({
+            type: props.type,
+            id: props.id,
+            nodeId: props.nodeId,
+            direction: props.direction,
+            location: props.location,
+            isDragging,
+            canDrop,
+            canDrag,
+        }) }));
+}
+//# sourceMappingURL=base.js.map

package/dist/ports/base.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base.js","sourceRoot":"","sources":["../../src/ports/base.tsx"],"names":[],"mappings":"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"}

package/dist/providers/connection-provider.d.ts

@@ -0,0 +1,10 @@
+import { ConnectionProviderProps } from "../types";
+/**
+ * Provider que gerencia o estado de conexões e arraste entre portas. Expõe a
+ * API de conexões e o estado de drag através do ConnectionContext.
+ *
+ * @param props Propriedades do provider (ConnectionProviderProps)
+ * @returns JSX.Element
+ */
+export default function ConnectionProvider({ graphApiRef, children }: ConnectionProviderProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=connection-provider.d.ts.map

package/dist/providers/connection-provider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"connection-provider.d.ts","sourceRoot":"","sources":["../../src/providers/connection-provider.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAkC,uBAAuB,EAA+B,MAAM,UAAU,CAAC;AAMhH;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EAAE,WAAW,EAAE,QAAQ,EAAE,EAAE,uBAAuB,2CAuI5F"}

package/dist/providers/connection-provider.js

@@ -0,0 +1,120 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState, useCallback, useRef, useMemo, useEffect } from "react";
+import { ConnectionContext } from "../context/connection-context";
+import useGraphMode from "../hooks/graph-mode";
+import useViewbox from "../hooks/viewbox";
+import useGraphRoot from "../hooks/graph-root";
+/**
+ * Provider que gerencia o estado de conexões e arraste entre portas. Expõe a
+ * API de conexões e o estado de drag através do ConnectionContext.
+ *
+ * @param props Propriedades do provider (ConnectionProviderProps)
+ * @returns JSX.Element
+ */
+export default function ConnectionProvider({ graphApiRef, children }) {
+    const [connections, setConnections] = useState([]);
+    const [dragState, setDragState] = useState({ active: false });
+    const dragStateRef = useRef({ active: false });
+    const connectionsRef = useRef([]);
+    const portRegistry = useRef(new Map());
+    const mode = useGraphMode();
+    const viewbox = useViewbox();
+    const graphRoot = useGraphRoot();
+    const viewboxRef = useRef(viewbox);
+    viewboxRef.current = viewbox;
+    connectionsRef.current = connections;
+    const registerPort = useCallback((reg) => {
+        portRegistry.current.set(`${reg.nodeId}:${reg.portName}`, reg);
+    }, []);
+    const unregisterPort = useCallback((nodeId, portName) => {
+        portRegistry.current.delete(`${nodeId}:${portName}`);
+    }, []);
+    const getGraphApi = useCallback(() => {
+        return graphApiRef.current;
+    }, [graphApiRef]);
+    const connect = useCallback((connection) => {
+        if (mode === "readonly")
+            return;
+        setConnections(prev => [...prev, connection]);
+    }, [mode]);
+    const disconnect = useCallback((connection) => {
+        if (mode === "readonly")
+            return;
+        setConnections(prev => prev.filter(c => !(c.from.nodeId === connection.from.nodeId &&
+            c.from.portName === connection.from.portName &&
+            c.to.nodeId === connection.to.nodeId &&
+            c.to.portName === connection.to.portName)));
+    }, [mode]);
+    const startDrag = useCallback((sourceNodeId, sourcePortName, connectionType) => {
+        if (mode === "readonly")
+            return;
+        const state = {
+            active: true,
+            sourceNodeId,
+            sourcePortName,
+            connectionType,
+            cursorPosition: { x: 0, y: 0 },
+        };
+        dragStateRef.current = state;
+        setDragState(state);
+    }, [mode]);
+    const endDrag = useCallback(async (targetNodeId, targetPortName, cursorPosition) => {
+        const current = dragStateRef.current;
+        if (!current.active)
+            return;
+        // Evita reentradas causadas por mouseup global
+        dragStateRef.current = { active: false };
+        const sourceKey = `${current.sourceNodeId}:${current.sourcePortName}`;
+        const sourcePort = portRegistry.current.get(sourceKey);
+        if (sourcePort?.onDragEnd) {
+            try {
+                await sourcePort.onDragEnd(graphApiRef.current, {
+                    sourceNodeId: current.sourceNodeId,
+                    sourcePortName: current.sourcePortName,
+                    connectionType: current.connectionType,
+                    targetNodeId,
+                    targetPortName,
+                    cursorPosition: cursorPosition ?? { x: 0, y: 0 },
+                });
+            }
+            catch (_e) {
+                // Erro no callback - o link temporário ainda será limpo
+            }
+        }
+        // Oculta o link temporário após o callback finalizar
+        setDragState({ active: false });
+    }, [graphApiRef]);
+    // mouseup global: encerra o arraste quando clicado em espaço vazio
+    useEffect(() => {
+        const handleMouseUp = (e) => {
+            if (!dragStateRef.current.active)
+                return;
+            const vb = viewboxRef.current;
+            const graph = graphRoot.current;
+            let cursorPos = { x: 0, y: 0 };
+            if (graph) {
+                const rect = graph.getBoundingClientRect();
+                cursorPos = {
+                    x: (e.clientX - rect.left) / vb.zoom + vb.x,
+                    y: (e.clientY - rect.top) / vb.zoom + vb.y,
+                };
+            }
+            endDrag(undefined, undefined, cursorPos);
+        };
+        document.addEventListener("mouseup", handleMouseUp);
+        return () => document.removeEventListener("mouseup", handleMouseUp);
+    }, [endDrag, graphRoot]);
+    const value = useMemo(() => ({
+        connections,
+        dragState,
+        getGraphApi,
+        connect,
+        disconnect,
+        startDrag,
+        endDrag,
+        registerPort,
+        unregisterPort,
+    }), [connections, dragState, getGraphApi, connect, disconnect, startDrag, endDrag, registerPort, unregisterPort]);
+    return (_jsx(ConnectionContext.Provider, { value: value, children: children }));
+}
+//# sourceMappingURL=connection-provider.js.map

package/dist/providers/connection-provider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"connection-provider.js","sourceRoot":"","sources":["../../src/providers/connection-provider.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC1E,OAAO,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AAElE,OAAO,YAAY,MAAM,qBAAqB,CAAC;AAC/C,OAAO,UAAU,MAAM,kBAAkB,CAAC;AAC1C,OAAO,YAAY,MAAM,qBAAqB,CAAC;AAG/C;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EAAE,WAAW,EAAE,QAAQ,EAA2B;IACzF,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAmB,EAAE,CAAC,CAAC;IACrE,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAY,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,CAAC;IACzE,MAAM,YAAY,GAAG,MAAM,CAAY,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,CAAC;IAC1D,MAAM,cAAc,GAAG,MAAM,CAAmB,EAAE,CAAC,CAAC;IACpD,MAAM,YAAY,GAAG,MAAM,CAAgC,IAAI,GAAG,EAAE,CAAC,CAAC;IACtE,MAAM,IAAI,GAAG,YAAY,EAAE,CAAC;IAC5B,MAAM,OAAO,GAAG,UAAU,EAAE,CAAC;IAC7B,MAAM,SAAS,GAAG,YAAY,EAAE,CAAC;IACjC,MAAM,UAAU,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;IACnC,UAAU,CAAC,OAAO,GAAG,OAAO,CAAC;IAC7B,cAAc,CAAC,OAAO,GAAG,WAAW,CAAC;IAErC,MAAM,YAAY,GAAG,WAAW,CAAC,CAAC,GAAqB,EAAE,EAAE;QACvD,YAAY,CAAC,OAAO,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC,MAAM,IAAI,GAAG,CAAC,QAAQ,EAAE,EAAE,GAAG,CAAC,CAAC;IACnE,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,cAAc,GAAG,WAAW,CAAC,CAAC,MAAc,EAAE,QAAgB,EAAE,EAAE;QACpE,YAAY,CAAC,OAAO,CAAC,MAAM,CAAC,GAAG,MAAM,IAAI,QAAQ,EAAE,CAAC,CAAC;IACzD,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,WAAW,GAAG,WAAW,CAAC,GAAG,EAAE;QACjC,OAAO,WAAW,CAAC,OAAO,CAAC;IAC/B,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IAElB,MAAM,OAAO,GAAG,WAAW,CAAC,CAAC,UAA0B,EAAQ,EAAE;QAC7D,IAAI,IAAI,KAAK,UAAU;YAAE,OAAO;QAChC,cAAc,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,GAAG,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC;IAClD,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,MAAM,UAAU,GAAG,WAAW,CAAC,CAAC,UAA0B,EAAQ,EAAE;QAChE,IAAI,IAAI,KAAK,UAAU;YAAE,OAAO;QAChC,cAAc,CAAC,IAAI,CAAC,EAAE,CAClB,IAAI,CAAC,MAAM,CACP,CAAC,CAAC,EAAE,CACA,CAAC,CACG,CAAC,CAAC,IAAI,CAAC,MAAM,KAAK,UAAU,CAAC,IAAI,CAAC,MAAM;YACxC,CAAC,CAAC,IAAI,CAAC,QAAQ,KAAK,UAAU,CAAC,IAAI,CAAC,QAAQ;YAC5C,CAAC,CAAC,EAAE,CAAC,MAAM,KAAK,UAAU,CAAC,EAAE,CAAC,MAAM;YACpC,CAAC,CAAC,EAAE,CAAC,QAAQ,KAAK,UAAU,CAAC,EAAE,CAAC,QAAQ,CAC3C,CACR,CACJ,CAAC;IACN,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,MAAM,SAAS,GAAG,WAAW,CACzB,CAAC,YAAoB,EAAE,cAAsB,EAAE,cAA8B,EAAE,EAAE;QAC7E,IAAI,IAAI,KAAK,UAAU;YAAE,OAAO;QAChC,MAAM,KAAK,GAAc;YACrB,MAAM,EAAE,IAAI;YACZ,YAAY;YACZ,cAAc;YACd,cAAc;YACd,cAAc,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;SACjC,CAAC;QACF,YAAY,CAAC,OAAO,GAAG,KAAK,CAAC;QAC7B,YAAY,CAAC,KAAK,CAAC,CAAC;IACxB,CAAC,EACD,CAAC,IAAI,CAAC,CACT,CAAC;IAEF,MAAM,OAAO,GAAG,WAAW,CACvB,KAAK,EAAE,YAAqB,EAAE,cAAuB,EAAE,cAAyC,EAAE,EAAE;QAChG,MAAM,OAAO,GAAG,YAAY,CAAC,OAAO,CAAC;QACrC,IAAI,CAAC,OAAO,CAAC,MAAM;YAAE,OAAO;QAE5B,+CAA+C;QAC/C,YAAY,CAAC,OAAO,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC;QAEzC,MAAM,SAAS,GAAG,GAAG,OAAO,CAAC,YAAY,IAAI,OAAO,CAAC,cAAc,EAAE,CAAC;QACtE,MAAM,UAAU,GAAG,YAAY,CAAC,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,CAAC;QAEvD,IAAI,UAAU,EAAE,SAAS,EAAE,CAAC;YACxB,IAAI,CAAC;gBACD,MAAM,UAAU,CAAC,SAAS,CAAC,WAAW,CAAC,OAAQ,EAAE;oBAC7C,YAAY,EAAE,OAAO,CAAC,YAAY;oBAClC,cAAc,EAAE,OAAO,CAAC,cAAc;oBACtC,cAAc,EAAE,OAAO,CAAC,cAAc;oBACtC,YAAY;oBACZ,cAAc;oBACd,cAAc,EAAE,cAAc,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;iBACnD,CAAC,CAAC;YACP,CAAC;YAAC,OAAO,EAAE,EAAE,CAAC;gBACV,wDAAwD;YAC5D,CAAC;QACL,CAAC;QAED,qDAAqD;QACrD,YAAY,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,CAAC;IACpC,CAAC,EACD,CAAC,WAAW,CAAC,CAChB,CAAC;IAEF,mEAAmE;IACnE,SAAS,CAAC,GAAG,EAAE;QACX,MAAM,aAAa,GAAG,CAAC,CAAa,EAAE,EAAE;YACpC,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,MAAM;gBAAE,OAAO;YAEzC,MAAM,EAAE,GAAG,UAAU,CAAC,OAAO,CAAC;YAC9B,MAAM,KAAK,GAAG,SAAS,CAAC,OAAO,CAAC;YAChC,IAAI,SAAS,GAAG,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC;YAC/B,IAAI,KAAK,EAAE,CAAC;gBACR,MAAM,IAAI,GAAG,KAAK,CAAC,qBAAqB,EAAE,CAAC;gBAC3C,SAAS,GAAG;oBACR,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,IAAI,GAAG,EAAE,CAAC,CAAC;oBAC3C,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC,IAAI,GAAG,EAAE,CAAC,CAAC;iBAC7C,CAAC;YACN,CAAC;YAED,OAAO,CAAC,SAAS,EAAE,SAAS,EAAE,SAAS,CAAC,CAAC;QAC7C,CAAC,CAAC;QACF,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;QACpD,OAAO,GAAG,EAAE,CAAC,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;IACxE,CAAC,EAAE,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC,CAAC;IAEzB,MAAM,KAAK,GAAG,OAAO,CACjB,GAAG,EAAE,CAAC,CAAC;QACH,WAAW;QACX,SAAS;QACT,WAAW;QACX,OAAO;QACP,UAAU;QACV,SAAS;QACT,OAAO;QACP,YAAY;QACZ,cAAc;KACjB,CAAC,EACF,CAAC,WAAW,EAAE,SAAS,EAAE,WAAW,EAAE,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,OAAO,EAAE,YAAY,EAAE,cAAc,CAAC,CAC/G,CAAC;IAEF,OAAO,CACH,KAAC,iBAAiB,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,YACnC,QAAQ,GACgB,CAChC,CAAC;AACN,CAAC"}

package/dist/style.css

@@ -0,0 +1,78 @@
+graph-root {
+    display: block;
+    position: relative;
+    width: 100%;
+    height: 100%;
+    background: #000;
+    color: #fff;
+    overflow: hidden;
+
+    graph-viewbox {
+        display: block;
+        position: relative;
+        min-width: 100%;
+        min-height: 100%;
+        transform-origin: 0 0;
+        overflow: visible;
+
+        node-graph-object {
+            position: absolute;
+            width: fit-content;
+            height: fit-content;
+            display: flex;
+            align-items: center;
+        }
+    }
+}
+
+
+
+@keyframes graph-link-flow {
+    from {
+        stroke-dashoffset: 0;
+    }
+
+    to {
+        stroke-dashoffset: var(--cycle-len);
+    }
+}
+
+node-graph-link,
+node-graph-node {
+    position: absolute;
+    pointer-events: all;
+}
+
+node-graph-temp-link {
+    position: absolute;
+
+    >svg {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 0;
+        height: 0;
+        overflow: visible;
+        pointer-events: none;
+    }
+}
+
+node-graph-link>svg {
+    position: absolute;
+    pointer-events: none;
+    overflow: visible;
+}
+
+node-graph-link>svg path {
+    animation-name: graph-link-flow;
+    animation-timing-function: linear;
+    animation-iteration-count: infinite;
+    transition: stroke 0.3s ease, stroke-width 0.15s ease;
+}
+
+node-graph-link>svg text {
+    pointer-events: none;
+    -webkit-user-select: none;
+    user-select: none;
+    transition: font-size 0.15s ease;
+}