@dschz/solid-g6/dist/index.jsx

A SolidJS component library for graph visualization, powered by @antv/g6

// src/context.tsx
import { createContext, useContext } from "solid-js";
var G6GraphContext = createContext();
var useGraph = () => {
  const ctx = useContext(G6GraphContext);
  if (!ctx) {
    throw new Error("[solid-g6] useGraph must be used within a G6GraphProvider.");
  }
  return ctx;
};

// src/Graph.tsx
import { Graph as G6Graph } from "@antv/g6";
import {
  createEffect,
  createSignal,
  mergeProps,
  onCleanup,
  onMount,
  Show,
  splitProps
} from "solid-js";
var Graph = (props) => {
  let container;
  const _props = mergeProps(
    {
      id: "solid-g6",
      events: {},
      data: {
        nodes: [],
        edges: [],
        combos: []
      },
      style: {
        height: "inherit",
        position: "relative"
      }
    },
    props
  );
  const [graph, setGraph] = createSignal();
  const [local, g6GraphOptions] = splitProps(_props, [
    "id",
    "class",
    "style",
    "events",
    "onInit",
    "onReady",
    "onDestroy",
    "children"
  ]);
  const setGraphOptions = async (options) => {
    const g = graph();
    if (!g || g.destroyed) return;
    g.setOptions(options);
    await g.render();
    local.onReady?.(g);
  };
  onMount(() => {
    const graph2 = new G6Graph({ container, ...g6GraphOptions });
    for (const [event, entry] of Object.entries(local.events)) {
      if (!entry) continue;
      if (typeof entry === "function") {
        graph2.on(event, entry);
      } else {
        const { handler, once = false } = entry;
        graph2.on(event, handler, once);
      }
    }
    local.onInit?.(graph2);
    setGraph(graph2);
    createEffect(() => {
      void setGraphOptions(g6GraphOptions);
    });
    onCleanup(() => {
      graph2.off();
      graph2.destroy();
      local.onDestroy?.();
      setGraph(void 0);
    });
  });
  const GraphContext = G6GraphContext;
  return <div ref={container} id={local.id} class={local.class} style={local.style}>
      <Show when={graph()}>
        {(g) => {
    return <GraphContext.Provider
      value={{
        graph: g,
        graphData: () => g().getData(),
        setGraphOptions
      }}
    >
              {local.children}
            </GraphContext.Provider>;
  }}
      </Show>
    </div>;
};

// src/utils/createGraphBehaviors.ts
var createGraphBehaviors = (behaviors) => {
  return behaviors;
};

// src/utils/createGraphComboOptions.ts
var createGraphComboOptions = (combo) => {
  return combo;
};

// src/utils/createGraphData.ts
var createGraphData = (data) => {
  return data;
};

// src/utils/createGraphEdgeOptions.ts
var createGraphEdgeOptions = (edge) => {
  return edge;
};

// src/utils/createGraphLayout.ts
var createGraphLayout = (layout) => {
  return layout;
};

// src/utils/createGraphNodeOptions.ts
var createGraphNodeOptions = (node) => {
  return node;
};

// src/utils/createGraphOptions.ts
var createGraphOptions = (options) => {
  return options;
};
export {
  Graph,
  createGraphBehaviors,
  createGraphComboOptions,
  createGraphData,
  createGraphEdgeOptions,
  createGraphLayout,
  createGraphNodeOptions,
  createGraphOptions,
  useGraph
};