react-board-drawing-hook 1.0.0

package/README.md

@@ -0,0 +1,246 @@
+# 🎨 React Board Drawing Hook
+
+[![npm version](https://img.shields.io/npm/v/react-board-drawing-hook.svg)](https://www.npmjs.com/package/react-board-drawing-hook)
+[![npm downloads](https://img.shields.io/npm/dm/react-board-drawing-hook.svg)](https://www.npmjs.com/package/react-board-drawing-hook)
+[![license](https://img.shields.io/npm/l/react-board-drawing-hook.svg)](https://github.com/yourusername/react-board-drawing-hook/blob/main/LICENSE)
+[![TypeScript](https://img.shields.io/badge/TypeScript-5.0-blue.svg)](https://www.typescriptlang.org/)
+
+React хук для создания коллаборативной рисовальной доски с поддержкой WebSocket.
+Идеально подходит для онлайн-досок, рисовалок и real-time совместной работы.
+
+## ✨ Возможности
+
+- 🖱️ **Полная поддержка мыши** - рисование, перемещение, изменение размера, вращение
+- 🎨 **Различные инструменты** - кисть, линии, прямоугольники, круги, текст, изображения
+- 🔒 **Блокировка объектов** - предотвращает одновременное редактирование
+- 🌐 **Любой WebSocket** - Socket.IO, Native WebSocket, или свой адаптер
+- 📦 **TypeScript** - полная типизация
+- ⚡ **Производительность** - оптимизированные перерисовки
+- 🎯 **Легкий** - 0 зависимостей (кроме React)
+
+## 📦 Установка
+
+```bash
+npm install react-board-drawing-hook
+# или
+yarn add react-board-drawing-hook
+```
+
+## 🚀 Быстрый старт
+
+### 1. Простой пример без сервера
+
+```tsx
+import {
+	useBoardDrawing,
+	NativeWebSocketAdapter,
+} from 'react-board-drawing-hook';
+
+function Whiteboard() {
+	const canvasRef = useRef(null);
+	const wsAdapter = new NativeWebSocketAdapter('ws://localhost:8080');
+
+	const {
+		tool,
+		setTool,
+		handleMouseDown,
+		handleMouseMove,
+		handleMouseUp,
+		objects,
+	} = useBoardDrawing({
+		boardId: 'room-123',
+		userId: 1,
+		userName: 'Alice',
+		canvasRef,
+		webSocketService: wsAdapter,
+	});
+
+	return (
+		<div>
+			<div className='toolbar'>
+				<button onClick={() => setTool('pen')}>✏️ Pen</button>
+				<button onClick={() => setTool('rectangle')}>⬜ Rectangle</button>
+				<button onClick={() => setTool('circle')}>⚪ Circle</button>
+				<button onClick={() => setTool('text')}>📝 Text</button>
+			</div>
+
+			<canvas
+				ref={canvasRef}
+				width={1920}
+				height={1080}
+				style={{ width: '100%', height: '600px', border: '1px solid #ccc' }}
+				onMouseDown={handleMouseDown}
+				onMouseMove={handleMouseMove}
+				onMouseUp={handleMouseUp}
+				onMouseLeave={handleMouseUp}
+			/>
+		</div>
+	);
+}
+```
+
+### 2. С Socket.IO
+
+```tsx
+import {
+	useBoardDrawing,
+	SocketIOBoardAdapter,
+} from 'react-board-drawing-hook';
+
+const adapter = new SocketIOBoardAdapter({
+	url: 'https://your-server.com',
+	path: '/socket.io',
+	reconnection: true,
+});
+
+function App() {
+	return <Whiteboard />; // Тот же компонент
+}
+```
+
+## 📖 API
+
+### `useBoardDrawing(props)`
+
+#### Параметры
+
+| Параметр           | Тип                            | Обязательный | Описание          |
+| ------------------ | ------------------------------ | ------------ | ----------------- |
+| `boardId`          | `string \| number`             | ✅           | ID доски          |
+| `userId`           | `number`                       | ✅           | ID пользователя   |
+| `userName`         | `string`                       | ✅           | Имя пользователя  |
+| `canvasRef`        | `RefObject<HTMLCanvasElement>` | ✅           | Ссылка на canvas  |
+| `webSocketService` | `BoardWebSocketService`        | ✅           | WebSocket адаптер |
+| `config`           | `BoardDrawingConfig`           | ❌           | Конфигурация      |
+
+#### Возвращаемое значение
+
+```typescript
+{
+  // Состояния
+  tool: DrawingTool;
+  color: string;
+  fillColor: string;
+  lineWidth: number;
+  fontSize: number;
+  isDrawing: boolean;
+  selectedObjectId: string | null;
+  interactionMode: InteractionMode;
+  objects: BoardObject[];
+  usersOnline: Array<{ id: number; name: string }>;
+  isConnected: boolean;
+  editingTextId: string | null;
+
+  // Сеттеры
+  setTool: (tool: DrawingTool) => void;
+  setColor: (color: string) => void;
+  setFillColor: (color: string) => void;
+  setLineWidth: (width: number) => void;
+  setFontSize: (size: number) => void;
+  setSelectedObjectId: (id: string | null) => void;
+  setEditingTextId: (id: string | null) => void;
+
+  // Обработчики событий
+  handleMouseDown: (e: React.MouseEvent<HTMLCanvasElement>) => void;
+  handleMouseMove: (e: React.MouseEvent<HTMLCanvasElement>) => void;
+  handleMouseUp: (e: React.MouseEvent<HTMLCanvasElement>) => void;
+  handleDoubleClick: (e: React.MouseEvent<HTMLCanvasElement>) => void;
+
+  // Методы
+  deleteSelectedObject: () => void;
+  addImage: (imageUrl: string) => void;
+  updateObjectContent: (objectId: string, content: string) => void;
+  clearCanvas: () => void;
+  exportAsJSON: () => string;
+  importFromJSON: (json: string) => void;
+  redrawCanvas: () => void;
+}
+```
+
+## 🔧 Создание своего адаптера
+
+```ts
+import { BaseWebSocketAdapter, BoardObject } from 'react-board-drawing-hook';
+
+class MyCustomAdapter extends BaseWebSocketAdapter {
+	connect(boardId: string | number, userId: number, userName: string) {
+		// Ваша реализация
+	}
+
+	disconnect() {
+		// Ваша реализация
+	}
+
+	createObject(object: BoardObject) {
+		// Ваша реализация
+	}
+
+	// ... остальные методы
+}
+```
+
+## 🎯 Примеры
+
+### Изменение размера canvas
+
+```tsx
+const { handleMouseDown, handleMouseMove, handleMouseUp } = useBoardDrawing({
+	// ...
+	config: {
+		canvasSize: {
+			width: 3840,
+			height: 2160,
+		},
+	},
+});
+```
+
+### Отключение клавиатурных сокращений
+
+```tsx
+const { ... } = useBoardDrawing({
+  // ...
+  config: {
+    enableKeyboardShortcuts: false,
+    enableGlobalListeners: false
+  }
+});
+```
+
+### Загрузка изображения
+
+```tsx
+const { addImage } = useBoardDrawing({ ... });
+
+// Из input file
+<input
+  type="file"
+  accept="image/*"
+  onChange={(e) => {
+    const file = e.target.files?.[0];
+    if (file) {
+      const url = URL.createObjectURL(file);
+      addImage(url);
+    }
+  }}
+/>
+
+// По URL
+<button onClick={() => addImage('https://example.com/image.jpg')}>
+  Add Image
+</button>
+```
+
+## 🧪 Тестирование
+
+```bash
+npm test
+```
+
+## 📄 Лицензия
+
+MIT
+
+## 🤝 Контрибьюция
+
+PRs приветствуются! Читайте [CONTRIBUTING.md](CONTRIBUTING.md)

package/dist/index.d.mts

@@ -0,0 +1,254 @@
+import * as react from 'react';
+
+/**
+ * КОНСТАНТЫ ХОЛСТА
+ */
+declare const CANVAS_WIDTH = 1600;
+declare const CANVAS_HEIGHT = 900;
+/**
+ * ТИПЫ ОБЪЕКТОВ
+ */
+type ObjectType = 'text' | 'image' | 'rectangle' | 'circle' | 'line' | 'pencil';
+/**
+ * ИНСТРУМЕНТЫ РИСОВАНИЯ
+ */
+type DrawingTool = 'select' | 'pencil' | 'line' | 'rectangle' | 'circle' | 'text' | 'eraser';
+/**
+ * РЕЖИМЫ ВЗАИМОДЕЙСТВИЯ
+ */
+type InteractionMode = 'none' | 'move' | 'rotate' | 'resize' | 'draw';
+/**
+ * МАРКЕРЫ ИЗМЕНЕНИЯ РАЗМЕРА
+ */
+type ResizeHandle = 'nw' | 'ne' | 'sw' | 'se' | 'n' | 's' | 'e' | 'w' | 'rotate';
+/**
+ * ТОЧКА НА ХОЛСТЕ
+ */
+interface Point {
+    x: number;
+    y: number;
+}
+/**
+ * ОБЪЕКТ НА ДОСКЕ (BoardObject)
+ */
+interface BoardObject {
+    id: string;
+    type: ObjectType;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    rotation: number;
+    locked_by: number | null;
+    locked_by_name: string | null;
+    content?: string;
+    fontSize?: number;
+    color?: string;
+    imageUrl?: string;
+    aspectRatio?: number;
+    fillColor?: string;
+    strokeColor?: string;
+    strokeWidth?: number;
+    x2?: number;
+    y2?: number;
+    points?: Point[];
+    userId?: number;
+    timestamp?: number;
+}
+/**
+ * Ограничивает координаты объекта границами холста.
+ */
+declare function clampObjectToCanvas(obj: BoardObject): BoardObject;
+/**
+ * Проверяет, может ли пользователь редактировать объект.
+ */
+declare function canEditObject(obj: BoardObject, userId: number): boolean;
+/**
+ * Генерирует уникальный ID для нового объекта.
+ */
+declare function generateObjectId(): string;
+/**
+ * Вращает точку вокруг центра на заданный угол.
+ */
+declare function rotatePoint(x: number, y: number, cx: number, cy: number, angle: number): {
+    x: number;
+    y: number;
+};
+/**
+ * Изменяет размер изображения С СОХРАНЕНИЕМ ПРОПОРЦИЙ.
+ */
+declare function resizeImageWithAspectRatio(obj: BoardObject, handle: ResizeHandle, deltaX: number, deltaY: number, original: BoardObject): BoardObject;
+/**
+ * СВОБОДНЫЙ РЕСАЙЗ С ПОДДЕРЖКОЙ ПЕРЕВОРОТА
+ */
+declare function resizeObjectFree(obj: BoardObject, handle: ResizeHandle, deltaX: number, deltaY: number, original: BoardObject): BoardObject;
+/**
+ * РЕСАЙЗ ЛИНИИ
+ */
+declare function resizeLineObject(obj: BoardObject, handle: ResizeHandle, deltaX: number, deltaY: number, original: BoardObject): BoardObject;
+/**
+ * Вычисляет границы объекта (Bounding Box).
+ */
+declare function getObjectBoundingBox(obj: BoardObject): {
+    minX: number;
+    minY: number;
+    maxX: number;
+    maxY: number;
+};
+/**
+ * Проверка попадания точки в повернутый прямоугольник
+ */
+declare function isPointInRotatedRectangle(x: number, y: number, obj: BoardObject): boolean;
+/**
+ * Расстояние от точки до отрезка
+ */
+declare function distanceToLine(px: number, py: number, x1: number, y1: number, x2: number, y2: number): number;
+/**
+ * Проверка попадания точки в объект
+ */
+declare function isPointInObject(x: number, y: number, obj: BoardObject, userId: number): boolean;
+
+interface BoardEventHandlers {
+    onConnectionChange?: (connected: boolean) => void;
+    onObjectLocked?: (objectId: string, userId: number, userName: string) => void;
+    onObjectUnlocked?: (objectId: string) => void;
+    onObjectCreated?: (object: BoardObject) => void;
+    onObjectUpdated?: (object: BoardObject) => void;
+    onObjectDeleted?: (objectId: string) => void;
+    onUserJoined?: (userId: number, userName: string) => void;
+    onUserLeft?: (userId: number, userName: string) => void;
+    onError?: (error: Error, context?: any) => void;
+}
+interface BoardWebSocketService {
+    connect(boardId: string | number, userId: number, userName: string): void;
+    disconnect(): void;
+    isConnected(): boolean;
+    createObject(object: BoardObject): void;
+    updateObject(object: BoardObject): void;
+    deleteObject(objectId: string): void;
+    lockObject(objectId: string): void;
+    unlockObject(objectId: string): void;
+    setEventHandlers(handlers: BoardEventHandlers): void;
+}
+declare abstract class BaseWebSocketAdapter implements BoardWebSocketService {
+    protected handlers: BoardEventHandlers;
+    protected connected: boolean;
+    abstract connect(boardId: string | number, userId: number, userName: string): void;
+    abstract disconnect(): void;
+    abstract createObject(object: BoardObject): void;
+    abstract updateObject(object: BoardObject): void;
+    abstract deleteObject(objectId: string): void;
+    abstract lockObject(objectId: string): void;
+    abstract unlockObject(objectId: string): void;
+    isConnected(): boolean;
+    setEventHandlers(handlers: BoardEventHandlers): void;
+    protected handleError(error: Error, context?: any): void;
+}
+
+interface UseBoardDrawingProps {
+    boardId: string | number;
+    userId: number;
+    userName: string;
+    canvasRef: React.RefObject<HTMLCanvasElement | null>;
+    webSocketService: BoardWebSocketService;
+    onObjectsUpdated?: (objects: BoardObject[]) => void;
+    onObjectLocked?: (objectId: string, userId: number, userName: string) => void;
+    onObjectUnlocked?: (objectId: string) => void;
+    onUserJoined?: (userId: number, userName: string) => void;
+    onUserLeft?: (userId: number, userName: string) => void;
+    config?: {
+        enableKeyboardShortcuts?: boolean;
+        enableGlobalListeners?: boolean;
+        maxImageSize?: number;
+        defaultColors?: {
+            stroke?: string;
+            fill?: string;
+            lineWidth?: number;
+            fontSize?: number;
+        };
+    };
+}
+declare const useBoardDrawing: ({ boardId, userId, userName, canvasRef, webSocketService, onObjectLocked, onObjectUnlocked, onUserJoined, onUserLeft, config, }: UseBoardDrawingProps) => {
+    tool: DrawingTool;
+    color: string;
+    fillColor: string;
+    lineWidth: number;
+    fontSize: number;
+    isDrawing: boolean;
+    selectedObjectId: string | null;
+    interactionMode: InteractionMode;
+    objects: BoardObject[];
+    usersOnline: {
+        id: number;
+        name: string;
+    }[];
+    isConnected: boolean;
+    editingTextId: string | null;
+    setTool: react.Dispatch<react.SetStateAction<DrawingTool>>;
+    setColor: react.Dispatch<react.SetStateAction<string>>;
+    setFillColor: react.Dispatch<react.SetStateAction<string>>;
+    setLineWidth: react.Dispatch<react.SetStateAction<number>>;
+    setFontSize: react.Dispatch<react.SetStateAction<number>>;
+    setSelectedObjectId: react.Dispatch<react.SetStateAction<string | null>>;
+    setEditingTextId: react.Dispatch<react.SetStateAction<string | null>>;
+    handleMouseDown: (e: React.MouseEvent<HTMLCanvasElement>) => void;
+    handleMouseMove: (e: React.MouseEvent<HTMLCanvasElement>) => void;
+    handleMouseUp: (e: React.MouseEvent<HTMLCanvasElement>) => void;
+    handleDoubleClick: (e: React.MouseEvent<HTMLCanvasElement>) => void;
+    deleteSelectedObject: () => void;
+    addImage: (imageUrl: string) => void;
+    updateObjectContent: (objectId: string, content: string) => void;
+    clearCanvas: () => void;
+    exportAsJSON: () => string;
+    importFromJSON: (json: string) => void;
+    redrawCanvas: () => void;
+};
+declare global {
+    interface CanvasRenderingContext2D {
+        roundRect(x: number, y: number, w: number, h: number, r: number): CanvasRenderingContext2D;
+    }
+}
+
+declare class NativeWebSocketAdapter extends BaseWebSocketAdapter {
+    private ws;
+    private url;
+    private reconnectAttempts;
+    private maxReconnectAttempts;
+    private reconnectTimeout;
+    constructor(url: string);
+    connect(boardId: string | number, userId: number, userName: string): void;
+    private attemptReconnect;
+    private handleMessage;
+    disconnect(): void;
+    private send;
+    createObject(object: BoardObject): void;
+    updateObject(object: BoardObject): void;
+    deleteObject(objectId: string): void;
+    lockObject(objectId: string): void;
+    unlockObject(objectId: string): void;
+}
+
+interface SocketIOAdapterConfig {
+    url: string;
+    path?: string;
+    transports?: string[];
+    reconnection?: boolean;
+    reconnectionAttempts?: number;
+    reconnectionDelay?: number;
+}
+declare class SocketIOBoardAdapter extends BaseWebSocketAdapter {
+    private socket;
+    private config;
+    constructor(config: SocketIOAdapterConfig);
+    connect(boardId: string | number, userId: number, userName: string): void;
+    disconnect(): void;
+    createObject(object: BoardObject): void;
+    updateObject(object: BoardObject): void;
+    deleteObject(objectId: string): void;
+    lockObject(objectId: string): void;
+    unlockObject(objectId: string): void;
+}
+
+declare const VERSION = "1.0.0";
+
+export { BaseWebSocketAdapter, BoardEventHandlers, BoardObject, BoardWebSocketService, CANVAS_HEIGHT, CANVAS_WIDTH, DrawingTool, InteractionMode, NativeWebSocketAdapter, ObjectType, Point, ResizeHandle, SocketIOAdapterConfig, SocketIOBoardAdapter, UseBoardDrawingProps, VERSION, canEditObject, clampObjectToCanvas, distanceToLine, generateObjectId, getObjectBoundingBox, isPointInObject, isPointInRotatedRectangle, resizeImageWithAspectRatio, resizeLineObject, resizeObjectFree, rotatePoint, useBoardDrawing };