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

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

import { createContext, useContext, mergeProps, createSignal, splitProps, onMount, createEffect, onCleanup, Show } from 'solid-js';
import { template, use, insert, createComponent, effect, setAttribute, className, style } from 'solid-js/web';
import { Graph as Graph$1 } from '@antv/g6';

// src/context.tsx
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;
};
var _tmpl$ = /* @__PURE__ */ template(`<div>`);
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 Graph$1({
      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 (() => {
    var _el$ = _tmpl$();
    var _ref$ = container;
    typeof _ref$ === "function" ? use(_ref$, _el$) : container = _el$;
    insert(_el$, createComponent(Show, {
      get when() {
        return graph();
      },
      children: (g) => {
        return createComponent(GraphContext.Provider, {
          value: {
            graph: g,
            graphData: () => g().getData(),
            setGraphOptions
          },
          get children() {
            return local.children;
          }
        });
      }
    }));
    effect((_p$) => {
      var _v$ = local.id, _v$2 = local.class, _v$3 = local.style;
      _v$ !== _p$.e && setAttribute(_el$, "id", _p$.e = _v$);
      _v$2 !== _p$.t && className(_el$, _p$.t = _v$2);
      _p$.a = style(_el$, _v$3, _p$.a);
      return _p$;
    }, {
      e: void 0,
      t: void 0,
      a: void 0
    });
    return _el$;
  })();
};

// 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 };