drawboard-microservice 1.0.7 → 1.0.9

package/src/hooks/useWebSocket.ts

@@ -1,202 +0,0 @@
-import { useEffect, useRef, useCallback, useState, useMemo } from 'react';
-import type { Shape } from '../types';
-
-const WS_BASE_URL =
-  import.meta.env.VITE_PUBLIC_WS_URL || 'ws://localhost:8000';
-
-export interface WebSocketMessage {
-  type: 'init' | 'update' | 'clear' | 'undo' | 'shapes';
-  data?: any;
-  userId?: string;
-}
-
-export interface CanvasData {
-  shapes: Shape[];
-  config?: any;
-  history?: any[];
-}
-
-export const useWebSocket = (
-  boardId: string,
-  onCanvasUpdate: (data: CanvasData) => void,
-  userId: string = crypto.randomUUID()
-) => {
-  const wsRef = useRef<WebSocket | null>(null);
-  const onCanvasUpdateRef = useRef(onCanvasUpdate);
-  const reconnectTimerRef = useRef<number | null>(null);
-  const reconnectAttempts = useRef(0);
-  
-  // ⬇️ Используем useRef для стабильных значений
-  const boardIdRef = useRef(boardId);
-  const userIdRef = useRef(userId);
-
-  const MAX_RECONNECT_ATTEMPTS = 5;
-  const RECONNECT_DELAY = 1500;
-
-  const [isConnected, setIsConnected] = useState(false);
-
-  // Обновляем refs при изменении пропсов
-  useEffect(() => {
-    boardIdRef.current = boardId;
-  }, [boardId]);
-
-  useEffect(() => {
-    userIdRef.current = userId;
-  }, [userId]);
-
-  // Всегда актуальный callback
-  useEffect(() => {
-    onCanvasUpdateRef.current = onCanvasUpdate;
-  }, [onCanvasUpdate]);
-
-  // ⬇️ connect больше не зависит от изменяющихся пропсов
-  const connect = useCallback(() => {
-    if (wsRef.current?.readyState === WebSocket.OPEN) {
-      console.log('[WS] Already connected, skipping');
-      return;
-    }
-
-    // Закрываем существующее соединение
-    if (wsRef.current) {
-      wsRef.current.close();
-      wsRef.current = null;
-    }
-
-    const ws = new WebSocket(
-      `${WS_BASE_URL}/ws/canvas/${boardIdRef.current}/`
-    );
-
-    wsRef.current = ws;
-
-    ws.onopen = () => {
-      console.log('[WS] Connected to board:', boardIdRef.current);
-      setIsConnected(true);
-      reconnectAttempts.current = 0;
-      
-      // Запрашиваем начальное состояние
-      ws.send(JSON.stringify({
-        type: 'init',
-        userId: userIdRef.current
-      }));
-    };
-
-    ws.onmessage = (event) => {
-      try {
-        const message: WebSocketMessage = JSON.parse(event.data);
-
-        if (message.userId === userIdRef.current) return;
-
-        switch (message.type) {
-          case 'init':
-            if (message.data) {
-              onCanvasUpdateRef.current(message.data);
-            }
-            break;
-
-          case 'update':
-          case 'shapes':
-          case 'undo':
-            if (message.data) {
-              onCanvasUpdateRef.current(message.data);
-            }
-            break;
-
-          case 'clear':
-            onCanvasUpdateRef.current({ shapes: [], config: {}, history: [] });
-            break;
-
-          default:
-            console.warn('[WS] Unknown message type:', message.type);
-        }
-      } catch (e) {
-        console.error('[WS] Message parse error:', e);
-      }
-    };
-
-    ws.onerror = (e) => {
-      console.error('[WS] Connection error:', e);
-    };
-
-    ws.onclose = (event) => {
-      console.log('[WS] Disconnected, code:', event.code, 'reason:', event.reason);
-      setIsConnected(false);
-      wsRef.current = null;
-
-      // Не переподключаемся при нормальном закрытии
-      if (event.code === 1000) return;
-
-      if (reconnectAttempts.current < MAX_RECONNECT_ATTEMPTS) {
-        reconnectAttempts.current += 1;
-        console.log(`[WS] Reconnecting in ${RECONNECT_DELAY * reconnectAttempts.current}ms (attempt ${reconnectAttempts.current})`);
-
-        reconnectTimerRef.current = window.setTimeout(() => {
-          connect();
-        }, RECONNECT_DELAY * reconnectAttempts.current);
-      } else {
-        console.error('[WS] Max reconnection attempts reached');
-      }
-    };
-  }, []); // ⬅️ Пустой массив зависимостей - функция создается один раз
-
-  const disconnect = useCallback(() => {
-    // Очищаем таймер переподключения
-    if (reconnectTimerRef.current) {
-      clearTimeout(reconnectTimerRef.current);
-      reconnectTimerRef.current = null;
-    }
-
-    // Закрываем соединение с кодом 1000 (нормальное закрытие)
-    if (wsRef.current) {
-      wsRef.current.close(1000, 'Client disconnect');
-      wsRef.current = null;
-      setIsConnected(false);
-    }
-  }, []);
-
-  const sendMessage = useCallback((message: WebSocketMessage) => {
-    if (wsRef.current?.readyState === WebSocket.OPEN) {
-      wsRef.current.send(
-        JSON.stringify({ ...message, userId: userIdRef.current })
-      );
-    } else {
-      console.warn('[WS] Cannot send message - connection not open');
-    }
-  }, []);
-
-  const sendShapesUpdate = useCallback(
-    (shapes: Shape[]) => {
-      sendMessage({
-        type: 'update',
-        data: { shapes },
-      });
-    },
-    [sendMessage]
-  );
-
-  const sendClear = useCallback(() => {
-    sendMessage({ type: 'clear' });
-  }, [sendMessage]);
-
-  const sendUndo = useCallback(() => {
-    sendMessage({ type: 'undo' });
-  }, [sendMessage]);
-
-  // ⬇️ Ключевое исправление - эффект зависит только от boardId
-  useEffect(() => {
-    console.log('[WS] Setting up connection for board:', boardId);
-    connect();
-
-    return () => {
-      console.log('[WS] Cleaning up connection for board:', boardId);
-      disconnect();
-    };
-  }, [boardId]); // ⬅️ Только boardId вызывает переподключение
-
-  // Мемоизируем возвращаемый объект, чтобы не вызывать перерендеры
-  return useMemo(() => ({
-    sendShapesUpdate,
-    sendClear,
-    sendUndo,
-    isConnected,
-  }), [sendShapesUpdate, sendClear, sendUndo, isConnected]);
-};

package/src/index.ts

@@ -1,4 +0,0 @@
-// Экспортируем компоненты, которые хотим сделать публичными
-export { default as DrawingApp } from './App';
-export { getInfo } from './services/widgetBridge';
-// Добавьте другие экспорты по необходимости

package/src/main.tsx

@@ -1,18 +0,0 @@
-  import React from 'react';
-  import ReactDOM from 'react-dom/client';
-  import { getInfo } from './services/widgetBridge';
-  import DrawingApp from './App.tsx';
-
-  // 👇 Делаем доступным из консоли и iframe
-  (window as any).getInfo = getInfo;
-
-
-  const root = ReactDOM.createRoot(
-    document.getElementById('root') as HTMLElement
-  );
-
-  root.render(
-    <React.StrictMode>
-      <DrawingApp />
-    </React.StrictMode>
-  );

package/src/services/api.ts

@@ -1,81 +0,0 @@
-// API service for sending canvas commands to backend
-// Added for backend data sending logic
-
-const API_BASE_URL = 'http://localhost:8000'; // Adjust to your backend URL
-
-export interface ApiResponse {
-  success: boolean;
-  message?: string;
-  data?: any;
-}
-
-export const sendCanvasCommand = async (
-  boardId: string,
-  action: 'clear' | 'undo' | 'update',
-  data?: any
-): Promise<ApiResponse> => {
-  try {
-    const url = `${API_BASE_URL}/api/canvas/${boardId}/${action}/`;
-
-    const response = await fetch(url, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify(data || {}),
-    });
-
-    if (!response.ok) {
-      throw new Error(`HTTP error! status: ${response.status}`);
-    }
-
-    const result = await response.json();
-    return result;
-  } catch (error) {
-    console.error('API Error:', error);
-    return { success: false, message: error instanceof Error ? error.message : 'Unknown error' };
-  }
-};
-
-// OCR функция для отправки изображения
-export const sendOcrImage = async (imageData: string): Promise<ApiResponse> => {
-  try {
-    const url = `${API_BASE_URL}/api/ocr/latex/`;
-
-    const response = await fetch(url, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify({ image_data: imageData }),
-    });
-
-    if (!response.ok) {
-      throw new Error(`HTTP error! status: ${response.status}`);
-    }
-
-    const result = await response.json();
-    return result;
-  } catch (error) {
-    console.error('OCR API Error:', error);
-    return { success: false, message: error instanceof Error ? error.message : 'Unknown error' };
-  }
-};
-
-// Specific functions for each action
-export const clearCanvas = async (boardId: string): Promise<ApiResponse> => {
-  return sendCanvasCommand(boardId, 'clear');
-};
-
-export const undoAction = async (boardId: string): Promise<ApiResponse> => {
-  return sendCanvasCommand(boardId, 'undo');
-};
-
-export const updateCanvasData = async (boardId: string, data: { shapes: any[], config?: any, history?: any[] }): Promise<ApiResponse> => {
-  return sendCanvasCommand(boardId, 'update', data);
-};
-
-// Legacy function for backward compatibility
-export const updateShapes = async (boardId: string, shapes: any[]): Promise<ApiResponse> => {
-  return updateCanvasData(boardId, { shapes });
-};

package/src/services/statsService.ts

@@ -1,165 +0,0 @@
-// @ts-nocheck
-import type { CanvasData } from '../hooks/useWebSocket';
-
-export interface MetricsData {
-  shapesCount: number;
-  toolsUsage: Record<string, number>;
-  lastUpdated: string;
-  sessionDuration?: number;
-  boardId: string;
-  widgetId: number | null;
-}
-
-export interface WidgetConfig {
-  shapes: any[];
-  config: any;
-  lastModified: string;
-  version: string;
-}
-
-class StatsService {
-  private baseURL = 'https://statservice.example.com';
-  private moduleToken: string | null = null;
-  private rateLimitCache = new Map<string, { count: number; resetTime: number }>();
-  private readonly RATE_LIMIT_WINDOW = 60 * 60 * 1000; // 60 minutes
-  private readonly MAX_REQUESTS = 12;
-
-  constructor() {
-    this.loadToken();
-  }
-
-  private loadToken() {
-    const savedToken = localStorage.getItem('moduleToken');
-    if (savedToken) {
-      this.moduleToken = savedToken;
-    }
-  }
-
-  private saveToken(token: string) {
-    this.moduleToken = token;
-    localStorage.setItem('moduleToken', token);
-  }
-
-  async createModule(moduleName: string): Promise<{
-    moduleId: number;
-    moduleName: string;
-    token: string;
-    tokenExpired: string;
-  }> {
-    try {
-      const response = await fetch(`${this.baseURL}/api/stats/module/create`, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({ moduleName })
-      });
-
-      if (!response.ok) {
-        throw new Error(`Failed to create module: ${response.statusText}`);
-      }
-
-      const data = await response.json();
-      this.saveToken(data.token);
-      return data;
-    } catch (error) {
-      console.error('Error creating module:', error);
-      throw error;
-    }
-  }
-
-  private checkRateLimit(): boolean {
-    const now = Date.now();
-    const moduleKey = this.moduleToken || 'anonymous';
-
-    const limitInfo = this.rateLimitCache.get(moduleKey);
-    
-    if (!limitInfo) {
-      this.rateLimitCache.set(moduleKey, {
-        count: 1,
-        resetTime: now + this.RATE_LIMIT_WINDOW
-      });
-      return true;
-    }
-
-    if (now > limitInfo.resetTime) {
-      this.rateLimitCache.set(moduleKey, {
-        count: 1,
-        resetTime: now + this.RATE_LIMIT_WINDOW
-      });
-      return true;
-    }
-
-    if (limitInfo.count >= this.MAX_REQUESTS) {
-      return false;
-    }
-
-    limitInfo.count++;
-    return true;
-  }
-
-  async sendMetrics(metrics: MetricsData): Promise<{ moduleId: number; metricId: number }> {
-    if (!this.moduleToken) {
-      throw new Error('Module token not set. Please create module first.');
-    }
-
-    if (!this.checkRateLimit()) {
-      throw new Error('Rate limit exceeded. Please try again later.');
-    }
-
-    try {
-      const response = await fetch(`${this.baseURL}/api/stats/module/metrics`, {
-        method: 'PUT',
-        headers: {
-          'X-Module-Token': this.moduleToken,
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify(metrics)
-      });
-
-      if (response.status === 429) {
-        const retryAfter = response.headers.get('Retry-After');
-        throw new Error(`Rate limit exceeded. Retry after ${retryAfter} seconds`);
-      }
-
-      if (!response.ok) {
-        throw new Error(`Failed to send metrics: ${response.statusText}`);
-      }
-
-      return await response.json();
-    } catch (error) {
-      console.error('Error sending metrics:', error);
-      throw error;
-    }
-  }
-
-  async getMetrics(): Promise<any> {
-    if (!this.moduleToken) {
-      throw new Error('Module token not set');
-    }
-
-    try {
-      const response = await fetch(`${this.baseURL}/api/stats/module/metrics`, {
-        method: 'GET',
-        headers: {
-          'X-Module-Token': this.moduleToken,
-        }
-      });
-
-      if (response.status === 404) {
-        return null;
-      }
-
-      if (!response.ok) {
-        throw new Error(`Failed to get metrics: ${response.statusText}`);
-      }
-
-      return await response.json();
-    } catch (error) {
-      console.error('Error getting metrics:', error);
-      throw error;
-    }
-  }
-}
-
-export const statsService = new StatsService();

package/src/services/widgetBridge.ts

@@ -1,73 +0,0 @@
-// widgetBridge.ts
-export interface WidgetInitPayload {
-  widgetId: number;
-  userId: number;
-  role: string;
-  config: any;
-  board: {
-    id: number;
-    name: string;
-    parentId: number;
-  };
-}
-
-let widgetContext: WidgetInitPayload | null = null;
-let onInitializedCallbacks: Array<(payload: WidgetInitPayload) => void> = [];
-
-export const getInfo = (payload: WidgetInitPayload) => {
-  if (!payload?.board?.id || typeof payload.board.id !== 'number') {
-    throw new Error('Invalid board.id');
-  }
-
-  if (typeof payload.widgetId !== 'number') {
-    throw new Error('Invalid widgetId');
-  }
-
-  widgetContext = payload;
-
-  console.log('[Widget] Initialized with:', payload);
-
-  // Уведомляем всех подписчиков
-  onInitializedCallbacks.forEach(callback => callback(payload));
-
-  return {
-    widgetId: payload.widgetId,
-    boardId: String(payload.board.id),
-    userId: payload.userId,
-    role: payload.role,
-    config: payload.config,
-  };
-};
-
-export const getWidgetContext = () => {
-  if (!widgetContext) {
-    throw new Error('Widget not initialized. Call getInfo first.');
-  }
-  return widgetContext;
-};
-
-// Подписка на инициализацию виджета
-export const onWidgetInitialized = (callback: (payload: WidgetInitPayload) => void) => {
-  onInitializedCallbacks.push(callback);
-  
-  // Если виджет уже инициализирован, вызываем callback сразу
-  if (widgetContext) {
-    callback(widgetContext);
-  }
-  
-  // Функция для отписки
-  return () => {
-    const index = onInitializedCallbacks.indexOf(callback);
-    if (index > -1) {
-      onInitializedCallbacks.splice(index, 1);
-    }
-  };
-};
-
-// Получение только boardId (для обратной совместимости)
-export const getBoardId = (): string => {
-  if (!widgetContext) {
-    throw new Error('Widget not initialized');
-  }
-  return String(widgetContext.board.id);
-};

package/src/types.ts

@@ -1,80 +0,0 @@
-export type ShapeType = 'rectangle' | 'ellipse' | 'line' | 'path' | 'text' | 'latex' | 'highlighter';
-export type ToolMode = 
-  | 'select' 
-  | 'rectangle' 
-  | 'ellipse' 
-  | 'line' 
-  | 'pencil' 
-  | 'eraser' 
-  | 'text' 
-  | 'latex' 
-  | 'highlighter' 
-  | 'ocr-selection';
-export type AnchorType = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | null;
-export type TextAlign = 'left' | 'center' | 'right';
-
-export interface Shape {
-  id: string;
-  type: ShapeType;
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-  stroke: string;
-  strokeWidth: number;
-  fill?: string;
-  dash?: number[];
-  points?: number[];
-  opacity?: number;
-  isSelected?: boolean;
-  text?: string;
-  latex?: string;
-  fontSize?: number;
-  fontFamily?: string;
-  textAlign?: TextAlign;
-  isEditing?: boolean;
-  fontWeight?: 'normal' | 'bold';
-  fontStyle?: 'normal' | 'italic';
-  textDecoration?: 'none' | 'underline' | 'line-through' | 'underline line-through';
-  isLatex?: boolean;
-  latexRendered?: string;
-  scaleX?: number;
-  scaleY?: number;
-  rotation?: number;
-}
-
-export interface DrawingState {
-  isDrawing: boolean;
-  startX: number;
-  startY: number;
-  currentShape: Partial<Shape> | null;
-}
-
-export interface TransformState {
-  isTransforming: boolean;
-  shapeId: string | null;
-  startWidth: number;
-  startHeight: number;
-  startX: number;
-  startY: number;
-  startMouseX: number;
-  startMouseY: number;
-  anchor: AnchorType;
-  originalPoints?: number[];
-  originalBbox?: { x: number, y: number, width: number, height: number };
-  startFontSize?: number;
-}
-
-export interface LatexSymbol {
-  name: string;
-  latex: string;
-  description: string;
-  category: 'fraction' | 'root' | 'superscript' | 'subscript' | 'brackets' | 'operators' | 'symbols';
-  placeholder?: string;
-}
-
-export interface LatexCategory {
-  id: string;
-  name: string;
-  icon: string;
-}

package/src/utils/colorUtils.ts

@@ -1,6 +0,0 @@
-export const hexToRgba = (hex: string, opacity: number): string => {
-  const r = parseInt(hex.slice(1, 3), 16);
-  const g = parseInt(hex.slice(3, 5), 16);
-  const b = parseInt(hex.slice(5, 7), 16);
-  return `rgba(${r}, ${g}, ${b}, ${opacity})`;
-};

package/src/utils/latexUtils.ts

@@ -1,48 +0,0 @@
-// @ts-nocheck
-import katex from 'katex';
-
-export const renderLatexToHtml = (latex: string, fontSize: number = 20): string => {
-  try {
-    return katex.renderToString(latex, {
-      throwOnError: false,
-      displayMode: false,
-      output: 'html',
-      strict: false,
-      fontSize: `${fontSize}px`
-    });
-  } catch (error) {
-    console.error('LaTeX rendering error:', error);
-    return `<span style="color: red;">LaTeX error: ${latex}</span>`;
-  }
-};
-
-export const measureLatexSize = (latex: string, fontSize: number): { width: number, height: number } => {
-  const container = document.createElement('div');
-  container.style.position = 'absolute';
-  container.style.visibility = 'hidden';
-  container.style.display = 'inline-block';
-  container.style.fontSize = `${fontSize}px`;
-  container.style.padding = '0';
-  container.style.margin = '0';
-  container.style.lineHeight = '1';
-  document.body.appendChild(container);
-  
-  try {
-    katex.render(latex, container, {
-      throwOnError: false,
-      displayMode: false,
-      output: 'html',
-      strict: false
-    });
-    
-    const width = container.offsetWidth + 20;
-    const height = container.offsetHeight + 10;
-    
-    return { width, height };
-  } catch (error) {
-    console.error('LaTeX measurement error:', error);
-    return { width: 200, height: 50 };
-  } finally {
-    document.body.removeChild(container);
-  }
-};