@yh-ui/flow 0.1.21

package/dist/utils/collaboration.mjs

@@ -0,0 +1,521 @@
+export class FlowCollaborationEngine {
+  roomId = "";
+  userId = "";
+  userName = "";
+  userColor = "";
+  state;
+  ws = null;
+  connectionState = "disconnected";
+  eventListeners = /* @__PURE__ */ new Map();
+  reconnectAttempts = 0;
+  maxReconnectAttempts = 5;
+  reconnectDelay = 1e3;
+  pingInterval = null;
+  pendingOperations = /* @__PURE__ */ new Map();
+  versionVector = /* @__PURE__ */ new Map();
+  // 用户光标信息
+  cursors = /* @__PURE__ */ new Map();
+  constructor() {
+    this.state = {
+      nodes: /* @__PURE__ */ new Map(),
+      edges: /* @__PURE__ */ new Map(),
+      viewport: { x: 0, y: 0, zoom: 1 },
+      version: 0,
+      pendingOps: [],
+      acknowledgedOps: []
+    };
+  }
+  /**
+   * 连接到协作房间
+   */
+  async connect(options) {
+    const { serverUrl, roomId, userId, userName, initialNodes = [], initialEdges = [] } = options;
+    this.roomId = roomId;
+    this.userId = userId;
+    this.userName = userName;
+    this.userColor = this.generateUserColor(userId);
+    this.state.nodes = new Map(initialNodes.map((n) => [n.id, n]));
+    this.state.edges = new Map(initialEdges.map((e) => [e.id, e]));
+    return new Promise((resolve, reject) => {
+      try {
+        this.setConnectionState("connecting");
+        this.ws = new WebSocket(serverUrl);
+        this.ws.onopen = () => {
+          this.setConnectionState("connected");
+          this.reconnectAttempts = 0;
+          this.send({
+            type: "join",
+            roomId: this.roomId,
+            userId: this.userId,
+            payload: {
+              userName: this.userName,
+              userColor: this.userColor,
+              nodes: initialNodes,
+              edges: initialEdges
+            },
+            timestamp: Date.now()
+          });
+          this.startPing();
+          resolve();
+        };
+        this.ws.onmessage = (event) => {
+          const { data } = event;
+          if (typeof data !== "string") return;
+          try {
+            const message = JSON.parse(data);
+            if (this.isValidWSMessage(message)) {
+              this.handleMessage(message);
+            }
+          } catch {
+          }
+        };
+        this.ws.onerror = (error) => {
+          console.error("WebSocket error:", error);
+          this.emitEvent("error", { type: "error", error, timestamp: Date.now() });
+        };
+        this.ws.onclose = () => {
+          this.setConnectionState("disconnected");
+          this.stopPing();
+          this.handleDisconnect();
+        };
+      } catch (error) {
+        this.setConnectionState("disconnected");
+        reject(error);
+      }
+    });
+  }
+  /**
+   * 断开连接
+   */
+  disconnect() {
+    if (this.ws) {
+      this.send({
+        type: "leave",
+        roomId: this.roomId,
+        userId: this.userId,
+        payload: {},
+        timestamp: Date.now()
+      });
+      this.ws.close();
+      this.ws = null;
+    }
+    this.setConnectionState("disconnected");
+    this.stopPing();
+  }
+  /**
+   * 添加节点
+   */
+  addNode(node) {
+    const operation = {
+      id: `op_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
+      type: "node_add",
+      timestamp: Date.now(),
+      userId: this.userId,
+      nodeId: node.id,
+      data: node,
+      version: this.state.version + 1
+    };
+    this.applyOperation(operation);
+    this.broadcastOperation(operation);
+  }
+  /**
+   * 更新节点
+   */
+  updateNode(nodeId, updates) {
+    const operation = {
+      id: `op_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
+      type: "node_update",
+      timestamp: Date.now(),
+      userId: this.userId,
+      nodeId,
+      data: updates,
+      version: this.state.version + 1
+    };
+    this.applyOperation(operation);
+    this.broadcastOperation(operation);
+  }
+  /**
+   * 删除节点
+   */
+  deleteNode(nodeId) {
+    const operation = {
+      id: `op_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
+      type: "node_delete",
+      timestamp: Date.now(),
+      userId: this.userId,
+      nodeId,
+      version: this.state.version + 1
+    };
+    this.applyOperation(operation);
+    this.broadcastOperation(operation);
+  }
+  /**
+   * 添加边
+   */
+  addEdge(edge) {
+    const operation = {
+      id: `op_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
+      type: "edge_add",
+      timestamp: Date.now(),
+      userId: this.userId,
+      edgeId: edge.id,
+      data: edge,
+      version: this.state.version + 1
+    };
+    this.applyOperation(operation);
+    this.broadcastOperation(operation);
+  }
+  /**
+   * 更新边
+   */
+  updateEdge(edgeId, updates) {
+    const operation = {
+      id: `op_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
+      type: "edge_update",
+      timestamp: Date.now(),
+      userId: this.userId,
+      edgeId,
+      data: updates,
+      version: this.state.version + 1
+    };
+    this.applyOperation(operation);
+    this.broadcastOperation(operation);
+  }
+  /**
+   * 删除边
+   */
+  deleteEdge(edgeId) {
+    const operation = {
+      id: `op_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
+      type: "edge_delete",
+      timestamp: Date.now(),
+      userId: this.userId,
+      edgeId,
+      version: this.state.version + 1
+    };
+    this.applyOperation(operation);
+    this.broadcastOperation(operation);
+  }
+  /**
+   * 更新视口
+   */
+  updateViewport(viewport) {
+    const operation = {
+      id: `op_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
+      type: "viewport_change",
+      timestamp: Date.now(),
+      userId: this.userId,
+      data: viewport,
+      version: this.state.version + 1
+    };
+    this.state.viewport = viewport;
+    this.broadcastOperation(operation, true);
+  }
+  /**
+   * 更新光标位置
+   */
+  updateCursor(x, y) {
+    this.send({
+      type: "cursor",
+      roomId: this.roomId,
+      userId: this.userId,
+      payload: { x, y, name: this.userName, color: this.userColor },
+      timestamp: Date.now()
+    });
+  }
+  /**
+   * 更新选区
+   */
+  updateSelection(nodeIds) {
+    this.send({
+      type: "selection",
+      roomId: this.roomId,
+      userId: this.userId,
+      payload: { nodeIds },
+      timestamp: Date.now()
+    });
+  }
+  /**
+   * 获取当前状态
+   */
+  getState() {
+    return {
+      nodes: Array.from(this.state.nodes.values()),
+      edges: Array.from(this.state.edges.values()),
+      viewport: this.state.viewport
+    };
+  }
+  /**
+   * 获取连接状态
+   */
+  getConnectionState() {
+    return this.connectionState;
+  }
+  /**
+   * 获取其他用户光标
+   */
+  getCursors() {
+    return this.cursors;
+  }
+  /**
+   * 注册事件监听
+   */
+  on(event, callback) {
+    const listeners = this.eventListeners.get(event) || [];
+    listeners.push(callback);
+    this.eventListeners.set(event, listeners);
+  }
+  /**
+   * 移除事件监听
+   */
+  off(event, callback) {
+    const listeners = this.eventListeners.get(event) || [];
+    const index = listeners.indexOf(callback);
+    if (index > -1) {
+      listeners.splice(index, 1);
+    }
+  }
+  // ==================== 私有方法 ====================
+  /**
+   * 严谨校验消息是否符合 WSMessage 协议结构
+   */
+  isValidWSMessage(message) {
+    if (message && typeof message === "object") {
+      const m = message;
+      return typeof m.type === "string" && typeof m.roomId === "string" && typeof m.userId === "string" && "payload" in m;
+    }
+    return false;
+  }
+  send(message) {
+    if (this.ws && this.ws.readyState === WebSocket.OPEN) {
+      this.ws.send(JSON.stringify(message));
+    }
+  }
+  handleMessage(message) {
+    switch (message.type) {
+      case "sync":
+        this.handleSync(message.payload);
+        break;
+      case "operation":
+        this.handleRemoteOperation(message.payload);
+        break;
+      case "cursor":
+        this.handleCursorUpdate(
+          message.userId,
+          message.payload
+        );
+        break;
+      case "selection":
+        this.handleSelectionUpdate(
+          message.userId,
+          message.payload
+        );
+        break;
+      case "join":
+        this.handleUserJoin(
+          message.userId,
+          message.payload
+        );
+        break;
+      case "leave":
+        this.handleUserLeave(message.userId);
+        break;
+    }
+  }
+  handleSync(payload) {
+    this.state.nodes = new Map(payload.nodes.map((n) => [n.id, n]));
+    this.state.edges = new Map(payload.edges.map((e) => [e.id, e]));
+    this.state.viewport = payload.viewport;
+    this.state.version = payload.version;
+    this.emitEvent("sync", {
+      type: "sync",
+      data: payload,
+      timestamp: Date.now()
+    });
+  }
+  handleRemoteOperation(operation) {
+    if (operation.userId === this.userId) {
+      return;
+    }
+    this.applyOperation(operation);
+    this.emitEvent("operation", {
+      type: "operation",
+      userId: operation.userId,
+      data: operation,
+      timestamp: Date.now()
+    });
+  }
+  applyOperation(operation) {
+    switch (operation.type) {
+      case "node_add":
+        if (operation.nodeId && operation.data) {
+          this.state.nodes.set(operation.nodeId, operation.data);
+        }
+        break;
+      case "node_update":
+        if (operation.nodeId) {
+          const existing = this.state.nodes.get(operation.nodeId);
+          if (existing) {
+            this.state.nodes.set(operation.nodeId, {
+              ...existing,
+              ...operation.data
+            });
+          }
+        }
+        break;
+      case "node_delete":
+        if (operation.nodeId) {
+          this.state.nodes.delete(operation.nodeId);
+          for (const [edgeId, edge] of this.state.edges) {
+            if (edge.source === operation.nodeId || edge.target === operation.nodeId) {
+              this.state.edges.delete(edgeId);
+            }
+          }
+        }
+        break;
+      case "edge_add":
+        if (operation.edgeId && operation.data) {
+          this.state.edges.set(operation.edgeId, operation.data);
+        }
+        break;
+      case "edge_update":
+        if (operation.edgeId) {
+          const existing = this.state.edges.get(operation.edgeId);
+          if (existing) {
+            this.state.edges.set(operation.edgeId, {
+              ...existing,
+              ...operation.data
+            });
+          }
+        }
+        break;
+      case "edge_delete":
+        if (operation.edgeId) {
+          this.state.edges.delete(operation.edgeId);
+        }
+        break;
+      case "viewport_change":
+        if (operation.data) {
+          this.state.viewport = operation.data;
+        }
+        break;
+    }
+    this.state.version = operation.version;
+    this.versionVector.set(operation.userId, (this.versionVector.get(operation.userId) || 0) + 1);
+  }
+  broadcastOperation(operation, unreliable = false) {
+    this.pendingOperations.set(operation.id, operation);
+    this.send({
+      type: "operation",
+      roomId: this.roomId,
+      userId: this.userId,
+      payload: operation,
+      timestamp: Date.now()
+    });
+    if (unreliable) {
+      this.pendingOperations.delete(operation.id);
+    }
+  }
+  handleCursorUpdate(userId, payload) {
+    this.cursors.set(userId, {
+      x: payload.x,
+      y: payload.y,
+      name: payload.name,
+      color: payload.color
+    });
+    this.emitEvent("cursor_update", {
+      type: "cursor_update",
+      userId,
+      data: payload,
+      timestamp: Date.now()
+    });
+  }
+  handleSelectionUpdate(userId, payload) {
+    this.emitEvent("selection_update", {
+      type: "selection_update",
+      userId,
+      data: payload,
+      timestamp: Date.now()
+    });
+  }
+  handleUserJoin(userId, payload) {
+    this.emitEvent("user_joined", {
+      type: "user_joined",
+      userId,
+      data: payload,
+      timestamp: Date.now()
+    });
+  }
+  handleUserLeave(userId) {
+    this.cursors.delete(userId);
+    this.emitEvent("user_left", {
+      type: "user_left",
+      userId,
+      timestamp: Date.now()
+    });
+  }
+  setConnectionState(state) {
+    this.connectionState = state;
+    this.emitEvent(state, { type: "sync", timestamp: Date.now() });
+  }
+  handleDisconnect() {
+    if (this.reconnectAttempts < this.maxReconnectAttempts) {
+      this.reconnectAttempts++;
+      const delay = this.reconnectDelay * Math.pow(2, this.reconnectAttempts - 1);
+      this.setConnectionState("reconnecting");
+      setTimeout(() => {
+        this.reconnect();
+      }, delay);
+    }
+  }
+  async reconnect() {
+    console.log(`Reconnect attempt ${this.reconnectAttempts}/${this.maxReconnectAttempts}`);
+  }
+  startPing() {
+    this.pingInterval = window.setInterval(() => {
+      this.send({
+        type: "ping",
+        roomId: this.roomId,
+        userId: this.userId,
+        payload: {},
+        timestamp: Date.now()
+      });
+    }, 3e4);
+  }
+  stopPing() {
+    if (this.pingInterval) {
+      clearInterval(this.pingInterval);
+      this.pingInterval = null;
+    }
+  }
+  emitEvent(eventType, event) {
+    const listeners = this.eventListeners.get(eventType) || [];
+    for (const listener of listeners) {
+      listener(event);
+    }
+    const wildcardListeners = this.eventListeners.get("*") || [];
+    for (const listener of wildcardListeners) {
+      listener(event);
+    }
+  }
+  generateUserColor(userId) {
+    const colors = [
+      "#f56565",
+      "#ed8936",
+      "#48bb78",
+      "#4299e1",
+      "#667eea",
+      "#ed64a6",
+      "#a0aec0",
+      "#fc8181"
+    ];
+    let hash = 0;
+    for (let i = 0; i < userId.length; i++) {
+      hash = userId.charCodeAt(i) + ((hash << 5) - hash);
+    }
+    return colors[Math.abs(hash) % colors.length];
+  }
+}
+export function createCollaborationEngine() {
+  return new FlowCollaborationEngine();
+}

package/dist/utils/custom-types.cjs

@@ -0,0 +1,138 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.clearCustomTypes = clearCustomTypes;
+exports.createNodeFromTemplate = createNodeFromTemplate;
+exports.exportFlowData = exportFlowData;
+exports.getAllCustomEdges = getAllCustomEdges;
+exports.getAllCustomNodeTemplates = getAllCustomNodeTemplates;
+exports.getAllCustomNodes = getAllCustomNodes;
+exports.getAllEdgeTemplates = getAllEdgeTemplates;
+exports.getCustomEdge = getCustomEdge;
+exports.getCustomNode = getCustomNode;
+exports.getCustomNodeTemplate = getCustomNodeTemplate;
+exports.getEdgeTemplate = getEdgeTemplate;
+exports.getNodeChildren = getNodeChildren;
+exports.getNodeParent = getNodeParent;
+exports.hasCustomEdge = hasCustomEdge;
+exports.hasCustomNode = hasCustomNode;
+exports.hasCustomNodeTemplate = hasCustomNodeTemplate;
+exports.importFlowData = importFlowData;
+exports.isNestedNode = isNestedNode;
+exports.registerCustomEdge = registerCustomEdge;
+exports.registerCustomNode = registerCustomNode;
+exports.registerCustomNodeTemplate = registerCustomNodeTemplate;
+exports.registerEdgeTemplate = registerEdgeTemplate;
+const customEdges = /* @__PURE__ */new Map();
+function registerCustomEdge(edge) {
+  customEdges.set(edge.type, edge);
+}
+function getCustomEdge(type) {
+  return customEdges.get(type);
+}
+function getAllCustomEdges() {
+  return Array.from(customEdges.values());
+}
+function hasCustomEdge(type) {
+  return customEdges.has(type);
+}
+const customNodeTemplates = /* @__PURE__ */new Map();
+function registerCustomNodeTemplate(template) {
+  customNodeTemplates.set(template.type, template);
+}
+function getCustomNodeTemplate(type) {
+  return customNodeTemplates.get(type);
+}
+function getAllCustomNodeTemplates() {
+  return Array.from(customNodeTemplates.values());
+}
+function hasCustomNodeTemplate(type) {
+  return customNodeTemplates.has(type);
+}
+function createNodeFromTemplate(type, id, position, overrides) {
+  const template = getCustomNodeTemplate(type);
+  if (!template) return null;
+  return {
+    id,
+    type,
+    position,
+    data: {
+      ...template.defaultData,
+      ...overrides?.data
+    },
+    width: overrides?.width ?? template.defaultWidth ?? 180,
+    height: overrides?.height ?? template.defaultHeight ?? 60,
+    selected: false,
+    dragging: false,
+    ...overrides
+  };
+}
+const customNodes = /* @__PURE__ */new Map();
+function registerCustomNode(node) {
+  if (!customNodeTemplates.has(node.type)) {
+    customNodeTemplates.set(node.type, {
+      type: node.type,
+      component: node.component,
+      defaultData: node.defaultData
+    });
+  }
+  customNodes.set(node.type, node);
+}
+function getCustomNode(type) {
+  return customNodes.get(type);
+}
+function getAllCustomNodes() {
+  return Array.from(customNodes.values());
+}
+function hasCustomNode(type) {
+  return customNodes.has(type);
+}
+function isNestedNode(node) {
+  return !!node.parentId;
+}
+function getNodeChildren(node, allNodes) {
+  if (!node.id) return [];
+  return allNodes.filter(n => n.parentId === node.id);
+}
+function getNodeParent(node, allNodes) {
+  if (!node.parentId) return void 0;
+  return allNodes.find(n => n.id === node.parentId);
+}
+const edgeTemplates = /* @__PURE__ */new Map();
+function registerEdgeTemplate(template) {
+  edgeTemplates.set(template.type, template);
+}
+function getEdgeTemplate(type) {
+  return edgeTemplates.get(type);
+}
+function getAllEdgeTemplates() {
+  return Array.from(edgeTemplates.values());
+}
+function exportFlowData(nodes, edges, viewport) {
+  const data = {
+    nodes,
+    edges,
+    viewport,
+    version: "1.0.0"
+  };
+  return JSON.stringify(data, null, 2);
+}
+function importFlowData(json) {
+  try {
+    const data = JSON.parse(json);
+    if (!data.nodes || !Array.isArray(data.nodes)) {
+      return null;
+    }
+    return data;
+  } catch {
+    return null;
+  }
+}
+function clearCustomTypes() {
+  customEdges.clear();
+  customNodes.clear();
+  customNodeTemplates.clear();
+  edgeTemplates.clear();
+}