@antv/gpt-vis 1.0.0-beta.1 → 1.0.0-beta.2

package/dist/cjs/vis/indented-tree/index.js

@@ -0,0 +1,375 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/vis/indented-tree/index.ts
+var indented_tree_exports = {};
+__export(indented_tree_exports, {
+  IndentedTree: () => IndentedTree
+});
+module.exports = __toCommonJS(indented_tree_exports);
+var import_g6 = require("@antv/g6");
+var import_theme = require("../../util/theme");
+var TreeEvent = {
+  COLLAPSE_EXPAND: "collapse-expand",
+  ADD_CHILD: "add-child"
+};
+var _iconfontInjected = false;
+function ensureIconfontInjected() {
+  if (_iconfontInjected)
+    return;
+  if (typeof document === "undefined")
+    return;
+  const style = document.createElement("style");
+  style.innerHTML = `@import url('${import_g6.iconfont.css}');`;
+  document.head.appendChild(style);
+  _iconfontInjected = true;
+}
+var _measureCanvas = null;
+var _measureCtx = null;
+function measureTextWidth(text, fontSize = 12) {
+  if (!text)
+    return 0;
+  if (typeof document === "undefined" || typeof HTMLCanvasElement === "undefined") {
+    let w = 0;
+    for (const ch of text)
+      w += ch.charCodeAt(0) > 19968 ? fontSize : fontSize * 0.6;
+    return w;
+  }
+  if (!_measureCanvas) {
+    _measureCanvas = document.createElement("canvas");
+    _measureCtx = _measureCanvas.getContext("2d");
+  }
+  if (!_measureCtx)
+    return text.length * fontSize * 0.6;
+  _measureCtx.font = `${fontSize}px system-ui,-apple-system,BlinkMacSystemFont,sans-serif`;
+  return _measureCtx.measureText(text).width;
+}
+var _IndentedNode = class extends import_g6.BaseNode {
+  constructor(options) {
+    Object.assign(options.style, _IndentedNode.defaultStyleProps);
+    super(options);
+  }
+  get childrenData() {
+    return this.context.model.getChildrenData(this.id);
+  }
+  getKeyStyle(attributes) {
+    const [width, height] = this.getSize(attributes);
+    const keyStyle = super.getKeyStyle(attributes);
+    return { width, height, ...keyStyle, fill: "transparent" };
+  }
+  drawKeyShape(attributes, container) {
+    const keyStyle = this.getKeyStyle(attributes);
+    return this.upsert("key", "rect", keyStyle, container);
+  }
+  getLabelStyle(attributes) {
+    if (attributes.label === false || !attributes.labelText)
+      return false;
+    return (0, import_g6.subStyleProps)(this.getGraphicStyle(attributes), "label");
+  }
+  drawIconArea(attributes, container) {
+    const [, h] = this.getSize(attributes);
+    const iconAreaStyle = { fill: "transparent", height: 30, width: 12, x: -6, y: h, zIndex: -1 };
+    this.upsert("icon-area", "rect", iconAreaStyle, container);
+  }
+  forwardEvent(target, type, listener) {
+    if (target && !Reflect.has(target, "__bind__")) {
+      Reflect.set(target, "__bind__", true);
+      target.addEventListener(type, listener);
+    }
+  }
+  getCountStyle(attributes) {
+    const { collapsed, color } = attributes;
+    if (collapsed) {
+      const [, height] = this.getSize(attributes);
+      return {
+        backgroundFill: color,
+        cursor: "pointer",
+        fill: "#fff",
+        fontSize: 8,
+        padding: [0, 10],
+        text: `${this.childrenData.length}`,
+        textAlign: "center",
+        y: height + 8
+      };
+    }
+    return false;
+  }
+  drawCountShape(attributes, container) {
+    const countStyle = this.getCountStyle(attributes);
+    const btn = this.upsert("count", import_g6.Badge, countStyle, container);
+    this.forwardEvent(btn, import_g6.CommonEvent.CLICK, (event) => {
+      event.stopPropagation();
+      this.context.graph.emit(TreeEvent.COLLAPSE_EXPAND, { id: this.id, collapsed: false });
+    });
+  }
+  isShowCollapse(attributes) {
+    return !attributes.collapsed && this.childrenData.length > 0;
+  }
+  getCollapseStyle(attributes) {
+    const { showIcon, color } = attributes;
+    if (!this.isShowCollapse(attributes))
+      return false;
+    const [, height] = this.getSize(attributes);
+    return {
+      visibility: showIcon ? "visible" : "hidden",
+      backgroundFill: color,
+      backgroundHeight: 12,
+      backgroundWidth: 12,
+      cursor: "pointer",
+      fill: "#fff",
+      fontFamily: "iconfont",
+      fontSize: 8,
+      text: "",
+      textAlign: "center",
+      x: -1,
+      y: height + 8
+    };
+  }
+  drawCollapseShape(attributes, container) {
+    const iconStyle = this.getCollapseStyle(attributes);
+    const btn = this.upsert("collapse-expand", import_g6.Badge, iconStyle, container);
+    this.forwardEvent(btn, import_g6.CommonEvent.CLICK, (event) => {
+      event.stopPropagation();
+      this.context.graph.emit(TreeEvent.COLLAPSE_EXPAND, {
+        id: this.id,
+        collapsed: !attributes.collapsed
+      });
+    });
+  }
+  render(attributes = this.parsedAttributes, container = this) {
+    super.render(attributes, container);
+    this.drawCountShape(attributes, container);
+    this.drawIconArea(attributes, container);
+    this.drawCollapseShape(attributes, container);
+  }
+};
+var IndentedNode = _IndentedNode;
+IndentedNode.defaultStyleProps = {
+  ports: [
+    { key: "in", placement: "right-bottom" },
+    { key: "out", placement: "left-bottom" }
+  ]
+};
+var IndentedEdge = class extends import_g6.Polyline {
+  getControlPoints(attributes) {
+    const [sourcePoint, targetPoint] = this.getEndpoints(attributes, false);
+    const [sx] = sourcePoint;
+    const [, ty] = targetPoint;
+    return [[sx, ty]];
+  }
+};
+var CollapseExpandTree = class extends import_g6.BaseBehavior {
+  constructor(context, options) {
+    super(context, options);
+    this.status = "idle";
+    this.showIcon = (event) => {
+      this.setIcon(event, true);
+    };
+    this.hideIcon = (event) => {
+      this.setIcon(event, false);
+    };
+    this.setIcon = (event, show) => {
+      var _a;
+      if (this.status !== "idle")
+        return;
+      const { target } = event;
+      const id = target.id;
+      const { graph, element } = this.context;
+      graph.updateNodeData([{ id, style: { showIcon: show } }]);
+      (_a = element == null ? void 0 : element.draw) == null ? void 0 : _a.call(element, { animation: false, silence: true });
+    };
+    this.onCollapseExpand = async (event) => {
+      this.status = "busy";
+      const { id, collapsed } = event;
+      const { graph } = this.context;
+      if (collapsed)
+        await graph.collapseElement(id);
+      else
+        await graph.expandElement(id);
+      this.status = "idle";
+    };
+    // GPT-Vis 版本只保留官方的折叠/展开交互；新增子节点会引入额外数据模型管理，暂不启用。
+    this.addChild = () => {
+    };
+    this.bindEvents();
+  }
+  update(options) {
+    this.unbindEvents();
+    super.update(options);
+    this.bindEvents();
+  }
+  bindEvents() {
+    const { graph } = this.context;
+    graph.on(import_g6.NodeEvent.POINTER_ENTER, this.showIcon);
+    graph.on(import_g6.NodeEvent.POINTER_LEAVE, this.hideIcon);
+    graph.on(TreeEvent.COLLAPSE_EXPAND, this.onCollapseExpand);
+    graph.on(TreeEvent.ADD_CHILD, this.addChild);
+  }
+  unbindEvents() {
+    const { graph } = this.context;
+    graph.off(import_g6.NodeEvent.POINTER_ENTER, this.showIcon);
+    graph.off(import_g6.NodeEvent.POINTER_LEAVE, this.hideIcon);
+    graph.off(TreeEvent.COLLAPSE_EXPAND, this.onCollapseExpand);
+    graph.off(TreeEvent.ADD_CHILD, this.addChild);
+  }
+};
+var GPT_VIS_INDENTED_NODE = "gpt-vis-indented";
+var GPT_VIS_INDENTED_EDGE = "gpt-vis-indented-edge";
+var GPT_VIS_COLLAPSE_BEHAVIOR = "gpt-vis-collapse-expand-tree";
+var _extensionsRegistered = false;
+function ensureExtensionsRegistered() {
+  if (_extensionsRegistered)
+    return;
+  (0, import_g6.register)(import_g6.ExtensionCategory.NODE, GPT_VIS_INDENTED_NODE, IndentedNode);
+  (0, import_g6.register)(import_g6.ExtensionCategory.EDGE, GPT_VIS_INDENTED_EDGE, IndentedEdge);
+  (0, import_g6.register)(import_g6.ExtensionCategory.BEHAVIOR, GPT_VIS_COLLAPSE_BEHAVIOR, CollapseExpandTree);
+  _extensionsRegistered = true;
+}
+var NODE_HEIGHT = 20;
+function toG6TreeData(node) {
+  return {
+    id: node.name,
+    children: (node.children || []).map(toG6TreeData)
+  };
+}
+var IndentedTree = (options) => {
+  const { container, width, height, theme: chartTheme = "default" } = options;
+  let graph = null;
+  const render = (config) => {
+    const { data, theme = chartTheme, title, style = {}, direction = "LR" } = config;
+    if (!(data == null ? void 0 : data.name)) {
+      throw new Error("IndentedTree: data with a name field is required");
+    }
+    if (graph) {
+      graph.destroy();
+      graph = null;
+    }
+    const containerEl = typeof container === "string" ? document.querySelector(container) : container;
+    if (!containerEl)
+      throw new Error("IndentedTree: container element not found");
+    containerEl.innerHTML = "";
+    const backgroundColor = style.backgroundColor || (0, import_theme.getBackgroundColor)(theme);
+    const isDark = theme === "dark";
+    const palette = (0, import_theme.normalizePalette)(style.palette, theme);
+    containerEl.style.background = backgroundColor;
+    containerEl.style.borderRadius = "4px";
+    containerEl.style.overflow = "hidden";
+    ensureIconfontInjected();
+    ensureExtensionsRegistered();
+    const rootId = data.name;
+    const graphData = (0, import_g6.treeToGraphData)(toG6TreeData(data));
+    graph = new import_g6.Graph({
+      animation: false,
+      container: containerEl,
+      x: 60,
+      width,
+      height,
+      autoFit: "view",
+      autoResize: true,
+      padding: 20,
+      data: graphData,
+      node: {
+        type: GPT_VIS_INDENTED_NODE,
+        style: {
+          size: (d) => [measureTextWidth(String(d.id ?? ""), 12) + 6, NODE_HEIGHT],
+          labelBackground: (datum) => datum.id === rootId,
+          labelBackgroundRadius: 0,
+          labelBackgroundFill: palette[0] ?? "#1783FF",
+          labelFill: (datum) => datum.id === rootId ? "#fff" : isDark ? "#d0d0d0" : "#666",
+          labelText: (d) => {
+            var _a;
+            return ((_a = d.style) == null ? void 0 : _a.labelText) || d.id;
+          },
+          labelTextAlign: (datum) => datum.id === rootId ? "center" : "left",
+          labelTextBaseline: "top",
+          color: (datum) => {
+            try {
+              const depth = graph.getAncestorsData(datum.id, "tree").length - 1;
+              return palette[depth % palette.length] ?? palette[0] ?? "#1783FF";
+            } catch {
+              return palette[0] ?? "#1783FF";
+            }
+          }
+        },
+        state: {
+          selected: {
+            lineWidth: 0,
+            labelFill: "#40A8FF",
+            labelBackground: true,
+            labelFontWeight: "normal",
+            labelBackgroundFill: "#e8f7ff",
+            labelBackgroundRadius: 10
+          }
+        }
+      },
+      edge: {
+        type: GPT_VIS_INDENTED_EDGE,
+        style: {
+          radius: 16,
+          lineWidth: 2,
+          sourcePort: "out",
+          targetPort: "in",
+          stroke: (datum) => {
+            try {
+              if ((datum == null ? void 0 : datum.source) == null)
+                return palette[0] ?? "#1783FF";
+              const depth = graph.getAncestorsData(datum.source, "tree").length;
+              return palette[depth % palette.length] ?? palette[0] ?? "#1783FF";
+            } catch {
+              return palette[0] ?? "#1783FF";
+            }
+          }
+        }
+      },
+      layout: {
+        type: "indented",
+        direction,
+        isHorizontal: true,
+        indent: 40,
+        getHeight: () => NODE_HEIGHT,
+        getVGap: () => 10
+      },
+      behaviors: [
+        "drag-canvas",
+        GPT_VIS_COLLAPSE_BEHAVIOR,
+        {
+          type: "click-select",
+          enable: (event) => event.targetType === "node" && event.target.id !== rootId
+        }
+      ],
+      plugins: title ? [{ key: "title", type: "title", title, titleFill: isDark ? "#e0e6ed" : "#1a1a2e" }] : []
+    });
+    graph.render();
+  };
+  const destroy = () => {
+    if (graph) {
+      graph.destroy();
+      graph = null;
+    }
+  };
+  return {
+    render,
+    destroy,
+    zoomTo: (zoom) => graph == null ? void 0 : graph.zoomTo(zoom),
+    getZoom: () => graph == null ? void 0 : graph.getZoom()
+  };
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  IndentedTree
+});

package/dist/cjs/vis/line/index.js

@@ -35,7 +35,7 @@ var Line = (options) => {
     }
     const { lineWidth = 2 } = style;
     const hasGroupField = data.length > 0 && ((_a = data[0]) == null ? void 0 : _a.group) !== void 0;
-    const colors = style.palette || (0, import_theme.getThemeColors)(theme);
+    const colors = (0, import_theme.normalizePalette)(style.palette, theme);
     const backgroundColor = style.backgroundColor || (0, import_theme.getBackgroundColor)(theme);
     chart = new import_g2.Chart({
       container,
@@ -52,6 +52,7 @@ var Line = (options) => {
       encode = { x: "time", y: "value" };
     }
     const chartOptions = {
+      animate: false,
       type: "view",
       data,
       title: title ?? "",

package/dist/cjs/vis/liquid/index.js

@@ -34,7 +34,7 @@ var Liquid = (options) => {
     if (chart) {
       chart.destroy();
     }
-    const colors = style.palette || (0, import_theme.getThemeColors)(theme);
+    const colors = (0, import_theme.normalizePalette)(style.palette, theme);
     const backgroundColor = style.backgroundColor || (0, import_theme.getBackgroundColor)(theme);
     const inferFontSize = Math.min(width ?? DEFAULT_WIDTH, height ?? DEFAULT_HEIGHT) / 10;
     const fontSize = Math.min(Math.max(inferFontSize, 24), 64);
@@ -45,6 +45,7 @@ var Liquid = (options) => {
       autoFit: true
     });
     const chartOptions = {
+      animate: false,
       type: "liquid",
       data: percent,
       title: title ?? "",

package/dist/cjs/vis/mindmap/index.d.ts

@@ -0,0 +1,32 @@
+import type { TreeGraphData, VisualizationOptions } from '../../types';
+export type MindmapData = TreeGraphData;
+/**
+ * MindmapConfig defines the configuration for rendering the mindmap.
+ */
+export interface MindmapConfig {
+    type?: 'mindmap';
+    data: MindmapData;
+    direction?: 'H' | 'LR' | 'RL';
+    theme?: 'default' | 'academy' | 'dark';
+    title?: string;
+    style?: {
+        backgroundColor?: string;
+        palette?: string[];
+    };
+}
+/**
+ * MindmapInstance represents a mindmap instance with render and destroy methods.
+ */
+export interface MindmapInstance {
+    render: (config: MindmapConfig) => void;
+    destroy: () => void;
+    zoomTo: (zoom: number) => void;
+    getZoom: () => number | undefined;
+}
+/** Props type for SSR package to import */
+export type MindMapProps = Pick<MindmapConfig, 'data' | 'direction'>;
+/**
+ * Mindmap component using G6 5.0 with mindmap layout.
+ * Follows the "boxed" type style from 0.x @ant-design/graphs MindMap.
+ */
+export declare const Mindmap: (options: VisualizationOptions) => MindmapInstance;

package/dist/cjs/vis/mindmap/index.js

@@ -0,0 +1,214 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/vis/mindmap/index.ts
+var mindmap_exports = {};
+__export(mindmap_exports, {
+  Mindmap: () => Mindmap
+});
+module.exports = __toCommonJS(mindmap_exports);
+var import_g6 = require("@antv/g6");
+var import_theme = require("../../util/theme");
+function toG6TreeData(node) {
+  return {
+    id: node.name,
+    children: (node.children || []).map(toG6TreeData)
+  };
+}
+function convertTreeData(treeData) {
+  return (0, import_g6.treeToGraphData)(toG6TreeData(treeData), {
+    getNodeData: (datum, depth) => {
+      datum.depth = depth;
+      if (!datum.children)
+        return datum;
+      const { children, ...rest } = datum;
+      return {
+        ...rest,
+        children: children.map((child) => child.id)
+      };
+    }
+  });
+}
+function assignBranchColors(graphData, colors) {
+  const nodes = graphData.nodes || [];
+  let colorIndex = 0;
+  const nodeMap = /* @__PURE__ */ new Map();
+  for (const node of nodes) {
+    nodeMap.set(String(node.id), node);
+  }
+  const dfs = (nodeId, color) => {
+    var _a;
+    const node = nodeMap.get(String(nodeId));
+    if (!node)
+      return;
+    node.style = node.style || {};
+    node.style.color = color || colors[colorIndex++ % colors.length];
+    (_a = node.children) == null ? void 0 : _a.forEach((childId) => dfs(childId, node.style.color));
+  };
+  nodes.filter((n) => n.depth === 1).forEach((n) => dfs(String(n.id)));
+}
+function getNodeSide(nodeData, parentData) {
+  if (!parentData)
+    return "center";
+  return (0, import_g6.positionOf)(parentData)[0] > (0, import_g6.positionOf)(nodeData)[0] ? "left" : "right";
+}
+function estimateNodeWidth(text, fontSize, padding) {
+  const avgCharWidth = fontSize * 0.58;
+  const cjkCount = (text.match(/[\u4e00-\u9fff\u3000-\u303f\uff00-\uffef]/g) || []).length;
+  const otherCount = text.length - cjkCount;
+  const textWidth = cjkCount * fontSize + otherCount * avgCharWidth;
+  return Math.min(Math.max(textWidth + padding, 120), 300);
+}
+var Mindmap = (options) => {
+  const { container, width, height, theme: chartTheme = "default" } = options;
+  let graph = null;
+  const render = (config) => {
+    const { data, direction = "H", theme = chartTheme, title, style = {} } = config;
+    if (!data || !data.name) {
+      throw new Error("Mindmap: data with a name field is required");
+    }
+    if (graph) {
+      graph.destroy();
+      graph = null;
+    }
+    const containerEl = typeof container === "string" ? document.querySelector(container) : container;
+    if (!containerEl) {
+      throw new Error("Mindmap: container element not found");
+    }
+    containerEl.innerHTML = "";
+    const colors = (0, import_theme.normalizePalette)(style.palette, theme);
+    const backgroundColor = style.backgroundColor || (0, import_theme.getBackgroundColor)(theme);
+    const isDark = theme === "dark";
+    containerEl.style.background = backgroundColor;
+    const graphData = convertTreeData(data);
+    assignBranchColors(graphData, colors);
+    for (const node of graphData.nodes || []) {
+      const label = String(node.id);
+      const depth = node.depth ?? 0;
+      const fontSize = depth === 0 ? 24 : 16;
+      const pad = depth === 0 ? 64 : 36;
+      node.layoutSize = [estimateNodeWidth(label, fontSize, pad), depth === 0 ? 60 : 48];
+    }
+    graph = new import_g6.Graph({
+      animation: false,
+      container: containerEl,
+      width,
+      height,
+      autoFit: "view",
+      autoResize: true,
+      padding: 20,
+      zoomRange: [0.1, 5],
+      zoom: 1,
+      theme: chartTheme,
+      data: graphData,
+      plugins: title ? [{ key: "title", type: "title", title, titleFill: isDark ? "#e0e6ed" : "#1a1a2e" }] : [],
+      node: {
+        type: "rect",
+        animation: { translate: false, update: false },
+        style: function(d) {
+          var _a;
+          const depth = d.depth ?? 0;
+          const color = (_a = d.style) == null ? void 0 : _a.color;
+          const label = String((0, import_g6.idOf)(d));
+          const parentData = this.getParentData((0, import_g6.idOf)(d), "tree");
+          const [nodeWidth, nodeHeight] = d.layoutSize || [120, 48];
+          const side = direction === "RL" ? "left" : direction === "LR" ? "right" : getNodeSide(d, parentData);
+          const fontSize = depth === 0 ? 24 : 16;
+          const fontWeight = depth <= 1 ? 600 : 400;
+          const dx = side === "left" ? -nodeWidth : side === "center" ? -nodeWidth / 2 : 0;
+          const base = {
+            size: [nodeWidth, nodeHeight],
+            dx,
+            radius: 8,
+            labelText: label,
+            labelPlacement: "center",
+            labelFontSize: fontSize,
+            labelFontWeight: fontWeight,
+            ports: [{ placement: "left" }, { placement: "right" }]
+          };
+          if (depth === 0) {
+            return {
+              ...base,
+              fill: isDark ? "#333" : "#f1f4f5",
+              labelFill: isDark ? "#e0e0e0" : "#252525"
+            };
+          }
+          if (depth === 1) {
+            return {
+              ...base,
+              fill: color || "#99ADD1",
+              labelFill: "#fff"
+            };
+          }
+          return {
+            ...base,
+            fill: backgroundColor,
+            stroke: color || (isDark ? "#555" : "#99ADD1"),
+            lineWidth: 3,
+            labelFill: isDark ? color || "#ccc" : color || "#333"
+          };
+        }
+      },
+      edge: {
+        type: "cubic-horizontal",
+        animation: { translate: false, update: false },
+        style: {
+          lineWidth: 3,
+          stroke: function(edgeData) {
+            var _a;
+            const sourceNode = this.getNodeData(edgeData.source);
+            return ((_a = sourceNode == null ? void 0 : sourceNode.style) == null ? void 0 : _a.color) || (isDark ? "#555" : "#99ADD1");
+          }
+        }
+      },
+      layout: {
+        type: "mindmap",
+        direction,
+        preLayout: false,
+        getWidth: (nodeData) => {
+          var _a;
+          return ((_a = nodeData.layoutSize) == null ? void 0 : _a[0]) ?? 120;
+        },
+        getHeight: (nodeData) => {
+          var _a;
+          return ((_a = nodeData.layoutSize) == null ? void 0 : _a[1]) ?? 48;
+        },
+        getHGap: () => 64,
+        getVGap: () => 14
+      },
+      behaviors: ["drag-canvas"]
+    });
+    graph.render();
+  };
+  const destroy = () => {
+    if (graph) {
+      graph.destroy();
+      graph = null;
+    }
+  };
+  return {
+    render,
+    destroy,
+    zoomTo: (zoom) => graph == null ? void 0 : graph.zoomTo(zoom),
+    getZoom: () => graph == null ? void 0 : graph.getZoom()
+  };
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Mindmap
+});