@yh-ui/flow 0.1.21

package/dist/utils/collaboration.cjs

@@ -0,0 +1,537 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FlowCollaborationEngine = void 0;
+exports.createCollaborationEngine = createCollaborationEngine;
+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];
+  }
+}
+exports.FlowCollaborationEngine = FlowCollaborationEngine;
+function createCollaborationEngine() {
+  return new FlowCollaborationEngine();
+}

package/dist/utils/collaboration.d.ts

@@ -0,0 +1,189 @@
+/**
+ * ============================================
+ * Flow Collaboration System
+ * Flow 实时协作系统 - CRDT + WebSocket 实现
+ * ============================================
+ */
+import type { Node, Edge, ViewportTransform } from '../types';
+export type OperationType = 'node_add' | 'node_update' | 'node_delete' | 'edge_add' | 'edge_update' | 'edge_delete' | 'viewport_change' | 'selection_change' | 'cursor_move';
+export interface CollaborationOperation {
+    id: string;
+    type: OperationType;
+    timestamp: number;
+    userId: string;
+    nodeId?: string;
+    edgeId?: string;
+    data?: unknown;
+    version: number;
+}
+export interface CollaborationUser {
+    id: string;
+    name: string;
+    color: string;
+    cursor?: {
+        x: number;
+        y: number;
+    };
+    selection?: string[];
+    lastActive: number;
+}
+export interface CollaborationRoom {
+    id: string;
+    name: string;
+    ownerId: string;
+    users: Map<string, CollaborationUser>;
+    nodes: Map<string, Node>;
+    edges: Map<string, Edge>;
+    viewport: ViewportTransform;
+    version: number;
+    createdAt: number;
+}
+export interface CRDTState {
+    nodes: Map<string, Node>;
+    edges: Map<string, Edge>;
+    viewport: ViewportTransform;
+    version: number;
+    pendingOps: CollaborationOperation[];
+    acknowledgedOps: CollaborationOperation[];
+}
+export interface CollaborationEvent {
+    type: 'user_joined' | 'user_left' | 'operation' | 'sync' | 'cursor_update' | 'selection_update' | 'error' | 'disconnected' | 'connecting' | 'connected' | 'reconnecting';
+    userId?: string;
+    data?: unknown;
+    error?: unknown;
+    timestamp: number;
+}
+export interface WSMessage {
+    type: 'join' | 'leave' | 'operation' | 'sync' | 'cursor' | 'selection' | 'error' | 'ping';
+    roomId: string;
+    userId: string;
+    payload: unknown;
+    timestamp: number;
+}
+export type ConnectionState = 'disconnected' | 'connecting' | 'connected' | 'reconnecting';
+/**
+ * 协作引擎核心类
+ */
+export declare class FlowCollaborationEngine {
+    private roomId;
+    private userId;
+    private userName;
+    private userColor;
+    private state;
+    private ws;
+    private connectionState;
+    private eventListeners;
+    private reconnectAttempts;
+    private maxReconnectAttempts;
+    private reconnectDelay;
+    private pingInterval;
+    private pendingOperations;
+    private versionVector;
+    private cursors;
+    constructor();
+    /**
+     * 连接到协作房间
+     */
+    connect(options: {
+        serverUrl: string;
+        roomId: string;
+        userId: string;
+        userName: string;
+        initialNodes?: Node[];
+        initialEdges?: Edge[];
+    }): Promise<void>;
+    /**
+     * 断开连接
+     */
+    disconnect(): void;
+    /**
+     * 添加节点
+     */
+    addNode(node: Node): void;
+    /**
+     * 更新节点
+     */
+    updateNode(nodeId: string, updates: Partial<Node>): void;
+    /**
+     * 删除节点
+     */
+    deleteNode(nodeId: string): void;
+    /**
+     * 添加边
+     */
+    addEdge(edge: Edge): void;
+    /**
+     * 更新边
+     */
+    updateEdge(edgeId: string, updates: Partial<Edge>): void;
+    /**
+     * 删除边
+     */
+    deleteEdge(edgeId: string): void;
+    /**
+     * 更新视口
+     */
+    updateViewport(viewport: ViewportTransform): void;
+    /**
+     * 更新光标位置
+     */
+    updateCursor(x: number, y: number): void;
+    /**
+     * 更新选区
+     */
+    updateSelection(nodeIds: string[]): void;
+    /**
+     * 获取当前状态
+     */
+    getState(): {
+        nodes: Node[];
+        edges: Edge[];
+        viewport: ViewportTransform;
+    };
+    /**
+     * 获取连接状态
+     */
+    getConnectionState(): ConnectionState;
+    /**
+     * 获取其他用户光标
+     */
+    getCursors(): Map<string, {
+        x: number;
+        y: number;
+        name: string;
+        color: string;
+    }>;
+    /**
+     * 注册事件监听
+     */
+    on(event: string, callback: (event: CollaborationEvent) => void): void;
+    /**
+     * 移除事件监听
+     */
+    off(event: string, callback: (event: CollaborationEvent) => void): void;
+    /**
+     * 严谨校验消息是否符合 WSMessage 协议结构
+     */
+    private isValidWSMessage;
+    private send;
+    private handleMessage;
+    private handleSync;
+    private handleRemoteOperation;
+    private applyOperation;
+    private broadcastOperation;
+    private handleCursorUpdate;
+    private handleSelectionUpdate;
+    private handleUserJoin;
+    private handleUserLeave;
+    private setConnectionState;
+    private handleDisconnect;
+    private reconnect;
+    private startPing;
+    private stopPing;
+    private emitEvent;
+    private generateUserColor;
+}
+/**
+ * 创建协作引擎实例
+ */
+export declare function createCollaborationEngine(): FlowCollaborationEngine;