@super-linear/supertopo 0.0.1 → 0.0.3

package/src/react/supertopo.tsx

@@ -1,139 +0,0 @@
-import { useEffect, useRef } from "react";
-import Graph from "../core/graph";
-import { GraphData } from "../types";
-
-type EventListeners = Record<
-  string, // 格式: "click" 或 "click:node" 或 "click:node[type='server']"
-  (event: cytoscape.EventObject) => void
->;
-
-interface SuperTopoProps {
-  data: GraphData;
-  layout?: string;
-  height?: string | number;
-  width?: string | number;
-  className?: string;
-  style?: React.CSSProperties;
-  layoutOptions?: Record<string, unknown>;
-  fitView?: boolean;
-  events?: EventListeners;
-  /** 节点属性，key 是节点 id，value 是属性字典，会合并到节点的 data 中 */
-  nodeAttributes?: Record<string, Record<string, unknown>>;
-  /** 边属性，key 是边 id，value 是属性字典，会合并到边的 data 中 */
-  edgeAttributes?: Record<string, Record<string, unknown>>;
-  /** 自定义样式，key 是 Cytoscape selector，value 是样式属性 */
-  renderFunction?: Record<string, Record<string, unknown>>;
-}
-export default function SuperTopo({
-  data: initialData,
-  layout = "clos",
-  height = "600px",
-  width = "100%",
-  className,
-  style,
-  layoutOptions,
-  fitView = true,
-  events,
-  nodeAttributes,
-  edgeAttributes,
-  renderFunction,
-}: SuperTopoProps) {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const graphRef = useRef<Graph | null>(null);
-
-  // destroy graph when component unmount
-  useEffect(() => {
-    return () => {
-      if (graphRef.current) {
-        graphRef.current.destroy();
-        graphRef.current = null;
-      }
-    };
-  }, []);
-
-  useEffect(() => {
-    if (!containerRef.current) return;
-
-    // 销毁旧实例
-    if (graphRef.current) {
-      graphRef.current.destroy();
-      graphRef.current = null;
-    }
-
-    // 创建新实例
-    graphRef.current = new Graph();
-
-    // 如果需要，先加载数据
-    graphRef.current.load(initialData);
-    // 最后 render 到容器
-    graphRef.current.render(containerRef.current);
-
-    // 应用节点属性
-    if (nodeAttributes) {
-      Object.entries(nodeAttributes).forEach(([id, attrs]) => {
-        Object.entries(attrs).forEach(([key, value]) => {
-          graphRef.current?.setNodeAttribute(id, key, value);
-        });
-      });
-    }
-
-    // 应用边属性
-    if (edgeAttributes) {
-      Object.entries(edgeAttributes).forEach(([id, attrs]) => {
-        Object.entries(attrs).forEach(([key, value]) => {
-          graphRef.current?.setEdgeAttribute(id, key, value);
-        });
-      });
-    }
-
-    // 应用自定义样式
-    if (renderFunction) {
-      graphRef.current.batchSetStyles(renderFunction);
-    }
-
-    // 绑定事件
-    if (events) {
-      Object.entries(events).forEach(([key, callback]) => {
-        const [eventType, selector] = key.includes(":")
-          ? key.split(":")
-          : [key, undefined];
-
-        if (graphRef.current) {
-          if (selector) {
-            // 有 selector: graph.on('click', 'node', callback)
-            graphRef.current.on(eventType, selector, callback);
-          } else {
-            // 没有 selector: graph.on('click', callback)
-            graphRef.current.on(eventType, callback);
-          }
-        }
-      });
-    }
-
-    // 应用指定的布局
-    if (layout) {
-      graphRef.current.applyLayout(layout, layoutOptions);
-    }
-
-    // 如果需要，调用 fit
-    if (fitView) {
-      graphRef.current.fit(10);
-    }
-  }, [
-    initialData,
-    layout,
-    layoutOptions,
-    fitView,
-    nodeAttributes,
-    edgeAttributes,
-    renderFunction,
-  ]);
-
-  return (
-    <div
-      ref={containerRef}
-      className={className}
-      style={{ position: "relative", touchAction: "none", ...style }}
-    />
-  );
-}

package/src/react/topology.tsx

@@ -1,148 +0,0 @@
-// SuperTopo React 组件
-
-"use client";
-
-import React, {
-  useEffect,
-  useRef,
-} from "react";
-
-import Graph from "../core/graph";
-import type { GraphData, SUScope } from "../types";
-import cytoscape from "cytoscape";
-
-/**
- * 事件监听器类型
- * - key 格式: "event" 或 "event:selector"
- * 支持的 selector 语法: "node", "edge", "node[type='server']", "node[type^='gpu']", ".selected" 等
- */
-export type EventListeners = Record<
-  string,  // 格式: "click" 或 "click:node" 或 "click:node[type='server']"
-  (event: cytoscape.EventObject) => void
->
-
-export interface TopologyProps {
-  data: GraphData;
-  layout?: string;
-  height?: string | number;
-  width?: string | number;
-  className?: string;
-  style?: React.CSSProperties;
-  layoutOptions?: Record<string, unknown>;
-  fitView?: boolean;
-  events?: EventListeners;
-  /** 节点属性，key 是节点 id，value 是属性字典，会合并到节点的 data 中 */
-  nodeAttributes?: Record<string, Record<string, unknown>>;
-  /** 边属性，key 是边 id，value 是属性字典，会合并到边的 data 中 */
-  edgeAttributes?: Record<string, Record<string, unknown>>;
-  /** 自定义样式，key 是 Cytoscape selector，value 是样式属性 */
-  renderFunction?: Record<string, Record<string, unknown>>;
-}
-
-export function SuperTopo({
-  data: initialData,
-  layout = "clos",
-  height = "600px",
-  width = "100%",
-  className,
-  style,
-  layoutOptions,
-  fitView = true,
-  events,
-  nodeAttributes,
-  edgeAttributes,
-  renderFunction,
-}: TopologyProps) {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const graphRef = useRef<Graph | null>(null);
-
-  // 组件卸载时销毁 Graph 实例
-  useEffect(() => {
-    return () => {
-      if (graphRef.current) {
-        graphRef.current.destroy();
-        graphRef.current = null;
-      }
-    };
-  }, []);
-
-  // 渲染图表并应用布局
-  useEffect(() => {
-    if (!containerRef.current) return;
-    
-    // 销毁旧实例
-    if (graphRef.current) {
-      graphRef.current.destroy();
-      graphRef.current = null;
-    }
-
-    // 创建新实例
-    graphRef.current = new Graph();
-
-    // 如果需要，先加载数据
-    graphRef.current.load(initialData);
-    // 最后 render 到容器
-    graphRef.current.render(containerRef.current);
-    
-    // 应用节点属性
-    if (nodeAttributes) {
-      Object.entries(nodeAttributes).forEach(([id, attrs]) => {
-        Object.entries(attrs).forEach(([key, value]) => {
-          graphRef.current?.setNodeAttribute(id, key, value);
-        });
-      });
-    }
-    
-    // 应用边属性
-    if (edgeAttributes) {
-      Object.entries(edgeAttributes).forEach(([id, attrs]) => {
-        Object.entries(attrs).forEach(([key, value]) => {
-          graphRef.current?.setEdgeAttribute(id, key, value);
-        });
-      });
-    }
-    
-    // 应用自定义样式
-    if (renderFunction) {
-      graphRef.current.batchSetStyles(renderFunction);
-    }
-    
-    // 绑定事件
-    if (events) {
-      Object.entries(events).forEach(([key, callback]) => {
-        const [eventType, selector] = key.includes(':') ? key.split(':') : [key, undefined]
-        
-        if (graphRef.current) {
-          if (selector) {
-            // 有 selector: graph.on('click', 'node', callback)
-            graphRef.current.on(eventType, selector, callback)
-          } else {
-            // 没有 selector: graph.on('click', callback)
-            graphRef.current.on(eventType, callback)
-          }
-        }
-      });
-    }
-    
-    
-    // 应用指定的布局
-    if (layout) {
-      graphRef.current.applyLayout(layout, layoutOptions);
-    }
-    
-    // 如果需要，调用 fit
-    if (fitView) {
-      graphRef.current.fit(10);
-    }
-  }, [initialData, layout, layoutOptions, fitView, nodeAttributes, edgeAttributes, renderFunction]);
-
-  return (
-    <div
-      ref={containerRef}
-      className={className}
-      style={{ width, height, position: "relative", touchAction: "none", ...style }}
-    />
-  );
-}
-
-export default SuperTopo;

package/src/styles/graph-style.ts

@@ -1,30 +0,0 @@
-import type { StylesheetJson } from 'cytoscape';
-
-/**
- * Cytoscape 默认样式配置
- * 用于渲染节点和边的视觉样式
- */
-export const defaultGraphStyles: StylesheetJson = [
-    {
-        selector: 'node',
-        style: {
-            'background-color': 'data(color)',
-            label: 'data(label)',
-            'text-valign': 'center',
-            'text-halign': 'center',
-            color: '#ffffff',
-            'text-wrap': 'wrap',
-            'font-size': 'data(fontSize)',
-            width: 'data(size)',
-            height: 'data(size)',
-            shape: 'ellipse',
-        },
-    },
-    {
-        selector: 'edge',
-        style: {
-            'line-color': '#22c55e',
-            'curve-style': 'bezier',
-        },
-    },
-];

package/src/types/graph.ts

@@ -1,76 +0,0 @@
-import type {
-  Position,
-  NodeDataDefinition,
-  EdgeDataDefinition,
-  ElementDefinition,
-  NodeSingular,
-} from "cytoscape"
-
-// 使用 Cytoscape 原生类型，避免不必要的扩展
-export type NodeData = NodeDataDefinition
-export type EdgeData = EdgeDataDefinition
-
-// Cytoscape 节点类型别名，用于 suScope 回调函数
-export type CytoNode = NodeSingular
-
-// 事件回调函数类型
-export type EventCallback = (id: string, data: any) => void
-export type Events = Partial<Record<string, EventCallback>>
-
-/**
- * Topology 节点元素定义 - group 为可选，方便使用
- */
-export interface TopoNode extends Omit<ElementDefinition, 'group'> {
-  group?: "nodes"
-  data: NodeData
-  position?: Position
-}
-
-/**
- * Topology 边元素定义 - group 为可选，方便使用
- */
-export interface TopoEdge extends Omit<ElementDefinition, 'group'> {
-  group?: "edges"
-  data: EdgeData
-}
-
-/**
- * 图数据
- */
-export 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"
- * }
- */
-export interface SUScope {
-  /** 只考虑满足条件的服务器参与 SU 分组判断 */
-  include?: (node: CytoNode) => boolean
-  /** 排除满足条件的服务器后参与 SU 分组判断 */
-  exclude?: (node: CytoNode) => boolean
-}
-
-/**
- * 用于过滤回调的简化节点数据结构
- * 这是扁平结构，直接包含 id, type, label, size 等属性
- */
-export interface NodeDataForFilter {
-  id: string
-  label: string
-  type?: string
-  size: number
-}
-
-export default GraphData

package/src/types/index.ts

@@ -1 +0,0 @@
-export * from "./graph"

package/tsconfig.json

@@ -1,48 +0,0 @@
-{
-  // Visit https://aka.ms/tsconfig to read more about this file
-  "compilerOptions": {
-    // File Layout
-    "rootDir": "./src",
-    "outDir": "./dist",
-
-    // Environment Settings
-    // See also https://aka.ms/tsconfig/module
-    "module": "esnext",
-    "target": "esnext",
-    "types": [],
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "esModuleInterop": true,
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    // For nodejs:
-    // "lib": ["esnext"],
-    // "types": ["node"],
-    // and npm install -D @types/node
-
-    // Other Outputs
-    "sourceMap": true,
-    "declaration": true,
-    "declarationMap": false,
-
-    // Stricter Typechecking Options
-    "noUncheckedIndexedAccess": true,
-    "exactOptionalPropertyTypes": true,
-
-    // Style Options
-    // "noImplicitReturns": true,
-    // "noImplicitOverride": true,
-    // "noUnusedLocals": true,
-    // "noUnusedParameters": true,
-    // "noFallthroughCasesInSwitch": true,
-    // "noPropertyAccessFromIndexSignature": true,
-
-    // Recommended Options
-    "strict": true,
-    "jsx": "react-jsx",
-    "verbatimModuleSyntax": false,
-    "isolatedModules": true,
-    "noUncheckedSideEffectImports": true,
-    "moduleDetection": "force",
-    "skipLibCheck": true,
-  }
-}