@super-linear/supertopo 0.0.1

package/dist/types.d.ts

@@ -0,0 +1,60 @@
+import { NodeSingular, EdgeDataDefinition, ElementDefinition, NodeDataDefinition, Position } from 'cytoscape';
+
+type NodeData = NodeDataDefinition;
+type EdgeData = EdgeDataDefinition;
+type CytoNode = NodeSingular;
+type EventCallback = (id: string, data: any) => void;
+type Events = Partial<Record<string, EventCallback>>;
+/**
+ * Topology 节点元素定义 - group 为可选，方便使用
+ */
+interface TopoNode extends Omit<ElementDefinition, 'group'> {
+    group?: "nodes";
+    data: NodeData;
+    position?: Position;
+}
+/**
+ * Topology 边元素定义 - group 为可选，方便使用
+ */
+interface TopoEdge extends Omit<ElementDefinition, 'group'> {
+    group?: "edges";
+    data: EdgeData;
+}
+/**
+ * 图数据
+ */
+interface GraphData {
+    nodes: TopoNode[];
+    edges: TopoEdge[];
+}
+/**
+ * SU 范围配置 - 用于控制 SU 分组时使用哪些服务器
+ * include/exclude 回调函数接收 Cytoscape 节点对象（CytoNode）
+ *
+ * @example
+ * suScope: {
+ *   // Cytoscape 节点对象，可以使用 node.id() 或 node.data() 访问数据
+ *   include: (node) => String(node.data("id") || node.id()).toLowerCase().includes("gpu"),
+ *
+ *   // 根据类型过滤
+ *   exclude: (node) => node.data("type") === "switch"
+ * }
+ */
+interface SUScope {
+    /** 只考虑满足条件的服务器参与 SU 分组判断 */
+    include?: (node: CytoNode) => boolean;
+    /** 排除满足条件的服务器后参与 SU 分组判断 */
+    exclude?: (node: CytoNode) => boolean;
+}
+/**
+ * 用于过滤回调的简化节点数据结构
+ * 这是扁平结构，直接包含 id, type, label, size 等属性
+ */
+interface NodeDataForFilter {
+    id: string;
+    label: string;
+    type?: string;
+    size: number;
+}
+
+export type { CytoNode, EdgeData, EventCallback, Events, GraphData, NodeData, NodeDataForFilter, SUScope, TopoEdge, TopoNode };

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@super-linear/supertopo",
+  "version": "0.0.1",
+  "description": "",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/index.d.ts",
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^29.0.0",
+    "@rollup/plugin-node-resolve": "^16.0.3",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^12.3.0",
+    "@types/react": "^19.2.14",
+    "react": "^19.2.4",
+    "rollup": "^4.59.0",
+    "rollup-plugin-dts": "^6.3.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "tslib": "^2.8.1",
+    "typescript": "^5.9.3"
+  },
+  "dependencies": {
+    "cytoscape": "^3.33.1"
+  },
+  "peerDependencies": {
+    "react": "^19.2.4"
+  },
+  "scripts": {
+    "rollup": "rollup -c --bundleConfigAsCjs",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  }
+}

package/rollup.config.js

@@ -0,0 +1,39 @@
+import resolve from "@rollup/plugin-node-resolve";
+import commonjs from "@rollup/plugin-commonjs";
+import typescript from "@rollup/plugin-typescript";
+import dts from "rollup-plugin-dts";
+import terser from "@rollup/plugin-terser";
+import peerDepsExternal from "rollup-plugin-peer-deps-external";
+
+const packageJson = require("./package.json");
+
+export default [
+  {
+    input: "src/index.ts",
+    output: [
+      {
+        file: packageJson.main,
+        format: "cjs",
+        sourcemap: true,
+      },
+      {
+        file: packageJson.module,
+        format: "esm",
+        sourcemap: true,
+      },
+    ],
+    plugins: [
+      peerDepsExternal(),
+      resolve(),
+      commonjs(),
+      typescript({ tsconfig: "./tsconfig.json", declaration: false, declarationMap: false }),
+      terser(),
+    ],
+    external: ["react", "react-dom"],
+  },
+  {
+    input: "src/index.ts",
+    output: [{ file: "dist/types.d.ts", format: "es" }],
+    plugins: [dts.default()],
+  },
+];

package/src/core/config.ts

@@ -0,0 +1,44 @@
+// Graph 配置
+// 这里定义了节点的默认颜色、大小等样式
+
+/**
+ * 节点默认配置
+ */
+export const NODE_DEFAULTS = {
+  /** 节点默认大小统一值（与 SuperGraph 保持一致） */
+  DEFAULT_SIZE: 45,
+  
+  /** switch 节点默认颜色 */
+  SWITCH_COLOR: "#3b82f6",
+  
+  /** server 节点默认颜色 */
+  SERVER_COLOR: "#999999",
+  
+  /** 节点字体最小大小 */
+  MIN_FONT_SIZE: 4,
+  
+  /** 计算字体大小的字符宽度系数（SuperGraph 使用 0.6） */
+  FONT_SIZE_COEFFICIENT: 0.6,
+} as const
+
+/**
+ * 图形默认配置
+ */
+export const GRAPH_DEFAULTS = {
+  /** 最小缩放级别 */
+  MIN_ZOOM: 0.1,
+  
+  /** 最大缩放级别 */
+  MAX_ZOOM: 10,
+  
+  /** 边 ID 分隔符（用于自动生成边 ID） */
+  EDGE_ID_SEPARATOR: "<->",
+} as const
+
+/**
+ * 视图默认配置
+ */
+export const VIEW_DEFAULTS = {
+  /** fit padding 默认值 */
+  FIT_PADDING: 10,
+} as const

package/src/core/graph.ts

@@ -0,0 +1,298 @@
+// Graph 核心类
+
+import cytoscape from 'cytoscape';
+import type { StylesheetJson } from 'cytoscape';
+import { GraphData, NodeData, EdgeData } from '../types';
+import { defaultGraphStyles } from '../styles/graph-style';
+import { register } from '../layouts/clos';
+import { NODE_DEFAULTS, GRAPH_DEFAULTS, VIEW_DEFAULTS } from './config';
+
+/**
+ * Graph 初始化选项
+ */
+export interface GraphOptions {
+    /** 自定义样式（会与默认样式合并，用户样式优先级更高） */
+    style?: StylesheetJson;
+    /** 最小缩放级别 */
+    minZoom?: number;
+    /** 最大缩放级别 */
+    maxZoom?: number;
+    /** 图元池大小（优化性能） */
+    textureOnViewport?: boolean;
+    /** 视口移动时隐藏边缘 */
+    hideEdgesOnViewport?: boolean;
+    /** 视口移动时隐藏标签 */
+    hideLabelsOnViewport?: boolean;
+}
+
+/**
+ * Graph 核心类
+ * 管理节点和边的数据，提供 CRUD 操作和事件系统
+ */
+export class Graph {
+    private cy: cytoscape.Core;
+
+    constructor(options?: GraphOptions) {
+        // 合并样式：默认样式在前，用户样式在后（用户样式会覆盖默认样式）
+        const style = options?.style
+            ? [...defaultGraphStyles, ...options.style]
+            : (defaultGraphStyles as StylesheetJson);
+
+        // 构造配置对象，只包含必要的选项
+        const config = {
+            minZoom: options?.minZoom ?? GRAPH_DEFAULTS.MIN_ZOOM,
+            maxZoom: options?.maxZoom ?? GRAPH_DEFAULTS.MAX_ZOOM,
+            style,
+            textureOnViewport: options?.textureOnViewport ?? false,
+            hideEdgesOnViewport: options?.hideEdgesOnViewport ?? false,
+            hideLabelsOnViewport: options?.hideLabelsOnViewport ?? false,
+        };
+
+        this.cy = cytoscape(config);
+
+        // 注册 clos 布局（只在浏览器环境中执行）
+        if (typeof window !== 'undefined') {
+            register(cytoscape as any);
+        }
+    }
+
+    /**
+     * 计算节点字体大小
+     * 确保标签文本能完整显示在节点圆圈内
+     */
+    private calculateFontSize(label: string, nodeSize: number): number {
+        if (label.length === 0) return 12;
+
+        const charWidth = nodeSize / label.length;
+        const fontSize = Math.floor(charWidth / NODE_DEFAULTS.FONT_SIZE_COEFFICIENT);
+        return Math.max(NODE_DEFAULTS.MIN_FONT_SIZE, fontSize);
+    }
+
+    /**
+     * 挂载到容器
+     * 可以重复调用以重新挂载到不同的容器
+     * @param container - DOM 容器元素
+     * @param fit - 是否自动适配视图，默认为 false
+     * @param padding - 适配时的内边距（像素）
+     */
+    render(container: HTMLDivElement, fit = false, padding?: number): void {
+        this.cy.mount(container);
+        if (fit) {
+            // 使用 requestAnimationFrame 确保 DOM 完全渲染后再 fit
+            requestAnimationFrame(() => {
+                this.cy.fit(undefined, padding ?? VIEW_DEFAULTS.FIT_PADDING);
+            });
+        }
+    }
+
+    /**
+     * 加载数据
+     * 直接使用 Cytoscape 的 add 方法，并设置默认值
+     * 注意：只设置 switch 和 server 的默认值
+     * spine、leaf 等其他类型的节点，颜色应通过 nodeAttributes 或 renderFunction 由用户自定义
+     */
+    load(data: GraphData): void {
+        // 先清空旧数据
+        this.cy.elements().remove();
+
+        // 为没有 id 的边生成默认 id
+        const edgesWithId = data.edges.map((edge) => {
+            if (!edge.data.id) {
+                const source = edge.data.source;
+                const target = edge.data.target;
+                // 使用配置文件中的分隔符
+                const defaultId = [String(source), String(target)]
+                    .sort()
+                    .join(GRAPH_DEFAULTS.EDGE_ID_SEPARATOR);
+                return {
+                    ...edge,
+                    data: {
+                        ...edge.data,
+                        id: defaultId,
+                    },
+                };
+            }
+            return edge;
+        });
+
+        this.cy.add([...data.nodes, ...edgesWithId]);
+
+        // 遍历所有节点，设置默认值并计算 fontSize
+        this.cy.nodes().forEach((n: cytoscape.NodeSingular) => {
+            // 设置默认颜色和大小（只处理 switch 和 server）
+            const type = String(n.data('type') || '').toLowerCase();
+
+            if (!n.data('size')) {
+                // 所有节点都使用统一的默认大小
+                n.data('size', NODE_DEFAULTS.DEFAULT_SIZE);
+            }
+
+            if (!n.data('color')) {
+                if (type === 'switch') {
+                    // switch 节点默认颜色（蓝色）
+                    n.data('color', NODE_DEFAULTS.SWITCH_COLOR);
+                } else if (type === 'server') {
+                    // server 节点默认颜色（灰色）
+                    n.data('color', NODE_DEFAULTS.SERVER_COLOR);
+                }
+                // 其他类型（spine、leaf 等）不设置默认颜色，由用户通过 nodeAttributes 或 renderFunction 自定义
+            }
+
+            // 计算并设置 fontSize（根据原始 label）
+            const size = n.data('size');
+            const label = n.data('label') || n.id();
+            const fontSize = this.calculateFontSize(label, size);
+            n.data('fontSize', fontSize);
+        });
+    }
+
+    /**
+     * 获取节点数据
+     */
+    getNode(id: string): NodeData | null {
+        const node = this.cy.getElementById(id);
+        return node.length > 0 ? (node.data() as NodeData) : null;
+    }
+
+    /**
+     * 设置节点属性
+     */
+    setNodeAttribute(id: string, key: string, value: unknown): void {
+        const node = this.cy.getElementById(id);
+        if (node.length > 0) {
+            node.data(key, value);
+        }
+    }
+
+    /**
+     * 获取边数据
+     */
+    getEdge(id: string): EdgeData | null {
+        const edge = this.cy.getElementById(id);
+        return edge.length > 0 ? (edge.data() as EdgeData) : null;
+    }
+
+    /**
+     * 设置边属性
+     */
+    setEdgeAttribute(id: string, key: string, value: unknown): void {
+        const edge = this.cy.getElementById(id);
+        if (edge.length > 0) {
+            edge.data(key, value);
+        }
+    }
+
+    /**
+     * 应用布局
+     * @param name - 布局名称（如 "clos", "random", "grid" 等）
+     * @param options - 布局选项
+     */
+    applyLayout(name: string, options?: Record<string, unknown>): void {
+        try {
+            const elements = this.cy.elements();
+            if (!elements || elements.length === 0) {
+                console.error('[Graph] 错误：没有可布局的元素！');
+                return;
+            }
+
+            const layout = elements.layout({
+                name,
+                ...options,
+            });
+
+            layout.run();
+        } catch (error) {
+            console.error(`[Graph] 布局执行失败 (${name}):`, error);
+            throw error;
+        }
+    }
+
+    /**
+     * 调整视图以容纳所有内容
+     * @param padding - 周围内边距（像素），默认使用配置文件中的值
+     */
+    fit(padding?: number): void {
+        this.cy.fit(undefined, padding ?? VIEW_DEFAULTS.FIT_PADDING);
+    }
+
+    /**
+     * 设置元素的样式
+     * @param selector - Cytoscape selector 语法（如 "node", "node[type='server']", "edge", ".selected" 等）
+     * @param style - 样式属性（使用 Cytoscape style 属性名）
+     * @example
+     * // 设置所有节点的背景色
+     * graph.setStyles('node', { 'background-color': '#ff0000' })
+     *
+     * // 设置 spine 节点的样式（由用户自定义）
+     * graph.setStyles("node[type='spine']", { 'background-color': '#3b82f6' })
+     *
+     * // 设置 leaf 节点的样式（由用户自定义）
+     * graph.setStyles("node[type='leaf']", { 'background-color': '#0d9488' })
+     */
+    setStyles(selector: string, style: Record<string, unknown>): void {
+        this.cy
+            .style()
+            .selector(selector)
+            .style(style as any)
+            .update();
+    }
+
+    /**
+     * 批量设置样式
+     * @param styles - 样式配置，key 是 selector，value 是样式对象
+     * 样式值可以是静态值，也可以是函数（Cytoscape 会为每个匹配元素调用该函数）
+     * 注意：由于 Cytoscape 限制，renderFunction 中通过函数修改的 label 无法正确计算 fontSize
+     * 建议修改原始 data.label（通过 nodeAttributes）而非在 renderFunction 中修改
+     * @example
+     * graph.batchSetStyles({
+     *   'node[type="spine"]': { 'background-color': "#3b82f6" },
+     *   'node[type="leaf"]': { 'background-color': "#0d9488" },
+     *   'node[type="server"]': { 'background-color': (ele) => ele.data('color') || '#999999' }
+     * })
+     */
+    batchSetStyles(styles: Record<string, Record<string, unknown>>): void {
+        const cyStyle = this.cy.style();
+        Object.entries(styles).forEach(([selector, style]) => {
+            cyStyle.selector(selector).style(style as any);
+        });
+        cyStyle.update();
+    }
+
+    /**
+     * 绑定事件处理器
+     * @param eventTypes - 事件类型（如 "tap", "click" 等）
+     * @param selectorOrCallback - 选择器或回调函数（支持 Cytoscape selector 语法，如 "node", "node[type='server']", "node[type^='gpu']" 等）
+     * @param callback - 回调函数（当第二个参数是 selector 时使用）
+     * @example
+     * // 不使用 selector（向后兼容）
+     * graph.on('click', (evt) => console.log(evt.target.id()))
+     *
+     * // 使用 selector
+     * graph.on('click', 'node', (evt) => console.log('节点', evt.target.id()))
+     * graph.on('click', "node[type='server']", (evt) => console.log('服务器', evt.target.id()))
+     * graph.on('click', "node[type^='gpu']", (evt) => console.log('GPU节点', evt.target.id()))
+     * graph.on('click', '.selected', (evt) => console.log('选中元素', evt.target.id()))
+     */
+    on(
+        eventTypes: string,
+        selectorOrCallback: string | ((evt: cytoscape.EventObject) => void),
+        callback?: (event: cytoscape.EventObject) => void
+    ): void {
+        if (typeof selectorOrCallback === 'function') {
+            // 如果第二个参数是函数，则是最早的API（向后兼容）
+            this.cy.on(eventTypes, selectorOrCallback);
+        } else {
+            // 如果第二个参数是字符串，则是 selector
+            this.cy.on(eventTypes, selectorOrCallback, callback!);
+        }
+    }
+
+    /**
+     * 销毁 Graph 实例
+     */
+    destroy(): void {
+        this.cy.destroy();
+    }
+}
+
+export default Graph;

package/src/index.ts

@@ -0,0 +1,2 @@
+export * from './react/supertopo'
+export * from './types'