From 20786108659d74ff9b7d4b004b87b9b422ae46bb Mon Sep 17 00:00:00 2001
From: d9m0n4 <ched08@yandex.ru>
Date: Wed, 9 Apr 2025 23:56:58 +0300
Subject: [PATCH] feat(48000116): sync board elements with YJS

---
 packages/pkg.module.board/Canvas.tsx          |   3 +
 packages/pkg.module.board/CanvasLayer.tsx     |  20 +-
 .../components/SelectedElementToolbar.tsx     |  57 +++--
 .../components/Shapes/LineShape.tsx           |   4 +
 packages/pkg.module.board/hooks/index.ts      |   1 +
 .../hooks/useElementHandlers.ts               | 145 +++++++++++--
 packages/pkg.module.board/hooks/useYJS.tsx    |  24 +++
 packages/pkg.module.board/services/index.ts   |   1 +
 .../pkg.module.board/services/yjsService.ts   |  66 ++++++
 .../pkg.module.board/store/useBoardStore.ts   |  16 +-
 packages/pkg.module.board/types.ts            |  17 +-
 .../useWhiteboardCollaborative.ts             | 194 ++++++++++++++----
 12 files changed, 466 insertions(+), 82 deletions(-)
 create mode 100644 packages/pkg.module.board/hooks/useYJS.tsx
 create mode 100644 packages/pkg.module.board/services/index.ts
 create mode 100644 packages/pkg.module.board/services/yjsService.ts

diff --git a/packages/pkg.module.board/Canvas.tsx b/packages/pkg.module.board/Canvas.tsx
index a602063e..34dc0542 100644
--- a/packages/pkg.module.board/Canvas.tsx
+++ b/packages/pkg.module.board/Canvas.tsx
@@ -6,6 +6,7 @@ import { useCanvasHandlers, useZoom } from './hooks';
 import { useStage } from './providers';
 import { BackgroundLayer, SelectedElementToolbar, Navbar, ZoomMenu } from './components';
 import { CanvasLayer } from './CanvasLayer';
+import { useWhiteboardCollaborative } from './useWhiteboardCollaborative';
 
 export const Canvas = () => {
   const { stageRef } = useStage();
@@ -13,6 +14,8 @@ export const Canvas = () => {
   const { handleOnWheel, handleMouseUp, handleMouseDown, handleMouseMove, handleDragEnd } =
     useCanvasHandlers();
 
+  useWhiteboardCollaborative({ roomId: 'test/slate-yjs-demo' });
+
   const { handleResetZoom, handleZoomIn, handleZoomOut } = useZoom(stageRef);
 
   const boardWidth = window.innerWidth;
diff --git a/packages/pkg.module.board/CanvasLayer.tsx b/packages/pkg.module.board/CanvasLayer.tsx
index 0e8b5d80..6e8eea74 100644
--- a/packages/pkg.module.board/CanvasLayer.tsx
+++ b/packages/pkg.module.board/CanvasLayer.tsx
@@ -6,11 +6,10 @@ import { useStage } from './providers';
 import { useElementHandlers, useIsStageScaling } from './hooks';
 
 export const CanvasLayer = memo(() => {
-  const { boardElements, selectedElementId, selectedTool, setSelectToolbarPosition } =
-    useBoardStore();
+  const { boardElements, selectedElementId, selectedTool, updateElement } = useBoardStore();
 
   const { layerRef, transformerRef } = useStage();
-  const { onChangeTransformerPosition } = useElementHandlers();
+  const { handleTransformEnd, handleDragStart, onChangeTransformerPosition } = useElementHandlers();
   const { isScaling } = useIsStageScaling();
 
   useEffect(() => {
@@ -20,23 +19,20 @@ export const CanvasLayer = memo(() => {
         transformerRef.current.nodes([selectedNode]);
         transformerRef.current.getLayer()?.batchDraw();
         const box = transformerRef.current.getClientRect();
-        setSelectToolbarPosition({
-          x: box.x,
-          y: box.y,
-        });
+        updateElement('toolbar', { x: box.x, y: box.y });
       } else {
         transformerRef.current.nodes([]);
       }
     } else {
       transformerRef.current?.nodes([]);
     }
-  }, [layerRef, selectedElementId, setSelectToolbarPosition, transformerRef]);
+  }, [layerRef, selectedElementId, transformerRef, updateElement]);
 
   useEffect(() => {
     if (!isScaling && selectedElementId) {
       onChangeTransformerPosition();
     }
-  }, [isScaling, selectedElementId, onChangeTransformerPosition]);
+  }, [isScaling, onChangeTransformerPosition, selectedElementId]);
 
   return (
     <Layer ref={layerRef}>
@@ -47,14 +43,16 @@ export const CanvasLayer = memo(() => {
         <Transformer
           ref={transformerRef}
           rotateEnabled={false}
+          flipEnabled={false}
           anchorCornerRadius={8}
           anchorStroke="#070707"
           borderStroke="#070707"
           borderDash={[5, 5]}
           padding={8}
           enabledAnchors={['top-left', 'top-right', 'bottom-left', 'bottom-right']}
-          onTransform={onChangeTransformerPosition}
-          onDragMove={onChangeTransformerPosition}
+          onTransformEnd={handleTransformEnd}
+          onDragStart={handleDragStart}
+          onTransformStart={handleDragStart}
         />
       )}
     </Layer>
diff --git a/packages/pkg.module.board/components/SelectedElementToolbar.tsx b/packages/pkg.module.board/components/SelectedElementToolbar.tsx
index 4c4c3300..6edeeaf9 100644
--- a/packages/pkg.module.board/components/SelectedElementToolbar.tsx
+++ b/packages/pkg.module.board/components/SelectedElementToolbar.tsx
@@ -1,15 +1,52 @@
+import { useEffect, useMemo } from 'react';
 import { Button } from '@xipkg/button';
 import { Trash, Copy, MoreVert } from '@xipkg/icons';
 import { useBoardStore } from '../store';
 import { useIsStageScaling } from '../hooks';
+import { ToolbarElement } from '../types';
 
 export const SelectedElementToolbar = () => {
-  const { selectToolbarPosition, selectedTool, selectedElementId, removeElement, selectElement } =
-    useBoardStore();
+  const {
+    selectedTool,
+    selectedElementId,
+    removeElement,
+    selectElement,
+    boardElements,
+    isElementTransforming,
+    selectToolbarPosition,
+  } = useBoardStore();
 
   const { isScaling } = useIsStageScaling();
 
-  if (!selectedElementId || selectedTool !== 'select') {
+  useEffect(() => {
+    if (!selectedElementId) {
+      removeElement('toolbar');
+    }
+  }, [removeElement, selectedElementId]);
+
+  const position = useMemo(() => {
+    if (selectToolbarPosition && (selectToolbarPosition.x !== 0 || selectToolbarPosition.y !== 0)) {
+      return selectToolbarPosition;
+    }
+
+    const toolbarElement = boardElements.find(
+      (el) => el.id === 'toolbar' && el.type === 'toolbar',
+    ) as ToolbarElement;
+
+    return toolbarElement ? { x: toolbarElement.x || 0, y: toolbarElement.y || 0 } : { x: 0, y: 0 };
+  }, [selectToolbarPosition, boardElements]);
+
+  const handleDelete = useMemo(
+    () => () => {
+      if (selectedElementId) {
+        removeElement(selectedElementId);
+        selectElement(null);
+      }
+    },
+    [selectedElementId, removeElement, selectElement],
+  );
+
+  if (!selectedElementId || selectedTool !== 'select' || isElementTransforming) {
     return null;
   }
 
@@ -17,22 +54,14 @@ export const SelectedElementToolbar = () => {
     <div
       className="border-gray-10 bg-gray-0 z-400 absolute z-50 flex gap-2 rounded-xl border p-1"
       style={{
-        left: selectToolbarPosition.x,
-        top: selectToolbarPosition.y,
+        left: position.x,
+        top: position.y,
         transform: 'translate(0, -100%)',
         opacity: isScaling ? 0 : 1,
         visibility: isScaling ? 'hidden' : 'visible',
       }}
     >
-      <Button
-        variant="ghost"
-        size="s"
-        className="p-1"
-        onClick={() => {
-          removeElement(selectedElementId!);
-          selectElement(null);
-        }}
-      >
+      <Button variant="ghost" size="s" className="p-1" onClick={handleDelete}>
         <Trash />
       </Button>
       <Button variant="ghost" size="s" className="p-1">
diff --git a/packages/pkg.module.board/components/Shapes/LineShape.tsx b/packages/pkg.module.board/components/Shapes/LineShape.tsx
index 9fd2fa80..6c4e88c0 100644
--- a/packages/pkg.module.board/components/Shapes/LineShape.tsx
+++ b/packages/pkg.module.board/components/Shapes/LineShape.tsx
@@ -19,6 +19,10 @@ export const LineShape = memo(({ element }: { element: BoardElement }) => {
       points={element.points}
       stroke={element.stroke}
       strokeWidth={element.strokeWidth}
+      x={element.x}
+      y={element.y}
+      scaleX={element.scaleX ?? 1}
+      scaleY={element.scaleY ?? 1}
       lineJoin="round"
       lineCap="round"
       onClick={(e) => handleSelect(e, element.id)}
diff --git a/packages/pkg.module.board/hooks/index.ts b/packages/pkg.module.board/hooks/index.ts
index 57b8e81b..013636e7 100644
--- a/packages/pkg.module.board/hooks/index.ts
+++ b/packages/pkg.module.board/hooks/index.ts
@@ -2,3 +2,4 @@ export { useZoom } from './useWheelZoom';
 export { useElementHandlers } from './useElementHandlers';
 export { useIsStageScaling } from './useIsStageScaling';
 export { useCanvasHandlers } from './useCanvasHandlers';
+export { useYJS } from './useYJS';
diff --git a/packages/pkg.module.board/hooks/useElementHandlers.ts b/packages/pkg.module.board/hooks/useElementHandlers.ts
index 134b7fc2..abb92b8a 100644
--- a/packages/pkg.module.board/hooks/useElementHandlers.ts
+++ b/packages/pkg.module.board/hooks/useElementHandlers.ts
@@ -1,31 +1,59 @@
-import { useCallback, useRef } from 'react';
+import { useCallback, useRef, useMemo } from 'react';
 import Konva from 'konva';
-import { useBoardStore } from '../store/useBoardStore';
-import { BoardElement } from '../types';
+import { useBoardStore } from '../store';
+import { BoardElement, ToolbarElement } from '../types';
 import { useStage } from '../providers';
 
 export const useElementHandlers = () => {
   const {
     selectElement,
     selectedTool,
+    addElement,
     updateElement,
-    setSelectToolbarPosition,
     selectedElementId,
+    setIsElementTransforming,
+    setSelectToolbarPosition,
+    removeElement,
+    boardElements,
   } = useBoardStore();
-  const { transformerRef } = useStage();
+  const { transformerRef, layerRef } = useStage();
 
   const throttleUpdate = useRef<number | null>(null);
 
-  const handleSelect = (e: Konva.KonvaEventObject<MouseEvent>, id: string) => {
-    e.cancelBubble = true;
-    if (selectedTool === 'select') {
-      selectElement(id);
-    }
-  };
+  const toolbarElement = useMemo<ToolbarElement>(
+    () => ({
+      id: 'toolbar',
+      type: 'toolbar',
+      x: 0,
+      y: 0,
+      elementId: selectedElementId,
+    }),
+    [selectedElementId],
+  );
 
-  const handleDragEnd = (e: Konva.KonvaEventObject<DragEvent>, element: BoardElement) => {
-    updateElement(element.id, { x: e.target.x(), y: e.target.y() });
-  };
+  const updateToolbarPosition = useCallback(
+    (x: number, y: number) => {
+      if (!selectedElementId) return;
+
+      const updatedToolbar = { ...toolbarElement, x, y };
+      const existingToolbar = boardElements.find((el) => el.id === 'toolbar');
+      if (existingToolbar) {
+        updateElement('toolbar', updatedToolbar);
+      } else {
+        addElement(updatedToolbar);
+      }
+
+      setSelectToolbarPosition({ x, y });
+    },
+    [
+      selectedElementId,
+      updateElement,
+      addElement,
+      toolbarElement,
+      setSelectToolbarPosition,
+      boardElements,
+    ],
+  );
 
   const onChangeTransformerPosition = useCallback(() => {
     if (throttleUpdate.current) {
@@ -34,14 +62,99 @@ export const useElementHandlers = () => {
     throttleUpdate.current = requestAnimationFrame(() => {
       if (transformerRef.current && selectedElementId) {
         const box = transformerRef.current.getClientRect();
-        setSelectToolbarPosition({ x: box.x, y: box.y });
+        updateToolbarPosition(box.x, box.y);
+      }
+    });
+  }, [selectedElementId, updateToolbarPosition, transformerRef]);
+
+  const handleSelect = useCallback(
+    (e: Konva.KonvaEventObject<MouseEvent>, id: string) => {
+      e.cancelBubble = true;
+      selectElement(null);
+      if (selectedTool === 'select') {
+        selectElement(id);
+        if (transformerRef.current) {
+          const box = transformerRef.current.getClientRect();
+          updateToolbarPosition(box.x, box.y);
+        }
+      }
+    },
+    [selectElement, selectedTool, transformerRef, updateToolbarPosition],
+  );
+
+  const handleDragStart = useCallback(() => {
+    setIsElementTransforming(true);
+    setSelectToolbarPosition({ x: 0, y: 0 });
+    removeElement('toolbar');
+  }, [setIsElementTransforming, setSelectToolbarPosition, removeElement]);
+
+  const handleDragEnd = useCallback(
+    (e: Konva.KonvaEventObject<DragEvent>, element: BoardElement) => {
+      if (!transformerRef.current || !selectedElementId) return;
+
+      // проверяем появился ли в сторе элемент
+      const currentElement = boardElements.find((el) => el.id === element.id);
+      if (currentElement && JSON.stringify(currentElement) !== JSON.stringify(element)) {
+        updateElement(element.id, currentElement);
+        return;
       }
+
+      const box = transformerRef.current.getClientRect();
+      updateToolbarPosition(box.x, box.y);
+      setIsElementTransforming(false);
+
+      updateElement(element.id, {
+        x: e.target.x(),
+        y: e.target.y(),
+        width: e.target.width(),
+        height: e.target.height(),
+      });
+    },
+    [
+      transformerRef,
+      selectedElementId,
+      updateToolbarPosition,
+      setIsElementTransforming,
+      updateElement,
+      boardElements,
+    ],
+  );
+
+  const handleTransformEnd = useCallback(() => {
+    if (!transformerRef.current || !selectedElementId || !layerRef.current) return;
+
+    const selectedNode = layerRef.current.findOne(`#${selectedElementId}`);
+    if (!selectedNode) return;
+
+    const x = selectedNode.x();
+    const y = selectedNode.y();
+    const scaleX = selectedNode.scaleX();
+    const scaleY = selectedNode.scaleY();
+
+    updateElement(selectedElementId, {
+      x,
+      y,
+      scaleX,
+      scaleY,
     });
-  }, [selectedElementId, setSelectToolbarPosition, transformerRef]);
+
+    const box = transformerRef.current.getClientRect();
+    updateToolbarPosition(box.x, box.y);
+    setIsElementTransforming(false);
+  }, [
+    transformerRef,
+    selectedElementId,
+    layerRef,
+    updateToolbarPosition,
+    setIsElementTransforming,
+    updateElement,
+  ]);
 
   return {
     handleSelect,
     handleDragEnd,
+    handleTransformEnd,
+    handleDragStart,
     onChangeTransformerPosition,
   };
 };
diff --git a/packages/pkg.module.board/hooks/useYJS.tsx b/packages/pkg.module.board/hooks/useYJS.tsx
new file mode 100644
index 00000000..ee5ec09f
--- /dev/null
+++ b/packages/pkg.module.board/hooks/useYJS.tsx
@@ -0,0 +1,24 @@
+import { useEffect, useMemo } from 'react';
+import { getOrCreateInstance, releaseInstance, getKeys } from '../services';
+
+export const useYJS = (roomId: string, hostUrl: string) => {
+  // Получаем инстанс YJS
+  const instance = useMemo(() => getOrCreateInstance(roomId, hostUrl), [roomId, hostUrl]);
+
+  // Освобождаем инстанс при размонтировании
+  useEffect(
+    () => () => {
+      releaseInstance(roomId, hostUrl);
+    },
+    [roomId, hostUrl],
+  );
+
+  return {
+    yDoc: instance.yDoc,
+    yArr: instance.yArr,
+    yStore: instance.yStore,
+    provider: instance.provider,
+    getYJSKeys: () => getKeys(instance),
+    isConnected: instance.provider.isConnected,
+  };
+};
diff --git a/packages/pkg.module.board/services/index.ts b/packages/pkg.module.board/services/index.ts
new file mode 100644
index 00000000..c0f4e421
--- /dev/null
+++ b/packages/pkg.module.board/services/index.ts
@@ -0,0 +1 @@
+export { getKeys, getOrCreateInstance, releaseInstance } from './yjsService';
diff --git a/packages/pkg.module.board/services/yjsService.ts b/packages/pkg.module.board/services/yjsService.ts
new file mode 100644
index 00000000..8112a677
--- /dev/null
+++ b/packages/pkg.module.board/services/yjsService.ts
@@ -0,0 +1,66 @@
+import * as Y from 'yjs';
+import { YKeyValue } from 'y-utility/y-keyvalue';
+import { HocuspocusProvider } from '@hocuspocus/provider';
+
+/** Испольование инстанса YJS позволяет избежать
+ * многократного сздания соект соединения при монтировании компонента
+ */
+
+type YJSInstanceT = {
+  yDoc: Y.Doc;
+  yArr: Y.Array<{ key: string; val: string }>;
+  yStore: YKeyValue<string>;
+  provider: HocuspocusProvider;
+  refCount: number;
+};
+
+// Приватное хранилище инстансов
+const instances: Record<string, YJSInstanceT> = {};
+
+/**
+ * Получает или создает YJS инстанс для заданного идентификатора комнаты
+ */
+export const getOrCreateInstance = (roomId: string, hostUrl: string): YJSInstanceT => {
+  const instanceKey = `${roomId}@${hostUrl}`;
+
+  if (!instances[instanceKey]) {
+    const yDoc = new Y.Doc({ gc: true });
+    const yArr = yDoc.getArray<{ key: string; val: string }>('xi_board');
+    const yStore = new YKeyValue(yArr);
+
+    const provider = new HocuspocusProvider({
+      url: hostUrl,
+      name: roomId,
+      token: roomId,
+      document: yDoc,
+    });
+
+    instances[instanceKey] = { yDoc, yArr, yStore, provider, refCount: 0 };
+  }
+
+  // eslint-disable-next-line no-plusplus
+  instances[instanceKey].refCount++;
+  return instances[instanceKey];
+};
+
+/**
+ * Освобождает инстанс YJS
+ */
+export const releaseInstance = (roomId: string, hostUrl: string = 'wss://hocus.xieffect.ru') => {
+  const instanceKey = `${roomId}@${hostUrl}`;
+
+  if (instances[instanceKey]) {
+    // eslint-disable-next-line no-plusplus
+    instances[instanceKey].refCount--;
+
+    if (instances[instanceKey].refCount <= 0) {
+      instances[instanceKey].provider.destroy();
+      delete instances[instanceKey];
+    }
+  }
+};
+
+/**
+ * Получает список ключей из YJS хранилища
+ */
+export const getKeys = (instance: YJSInstanceT) => instance.yArr.toArray().map((item) => item.key);
diff --git a/packages/pkg.module.board/store/useBoardStore.ts b/packages/pkg.module.board/store/useBoardStore.ts
index dd52609f..b8576368 100644
--- a/packages/pkg.module.board/store/useBoardStore.ts
+++ b/packages/pkg.module.board/store/useBoardStore.ts
@@ -13,6 +13,8 @@ interface BoardState {
   setSelectedTool: (tool: ToolType) => void;
   selectedElementId: string | null;
   selectElement: (id: string | null) => void;
+  isElementTransforming: boolean;
+  setIsElementTransforming: (value: boolean) => void;
   selectToolbarPosition: { x: number; y: number };
   setSelectToolbarPosition: (position: { x: number; y: number }) => void;
 }
@@ -21,8 +23,9 @@ export const useBoardStore = create<BoardState>()(
   persist(
     (set) => ({
       boardElements: [],
-      addElement: (element: BoardElement) =>
-        set((state) => ({ boardElements: [...state.boardElements, element] })),
+      addElement: (element: BoardElement) => {
+        set((state) => ({ boardElements: [...state.boardElements, element] }));
+      },
       updateElement: (id: string, updates: Partial<BoardElement>) =>
         set((state) => ({
           boardElements: state.boardElements.map((el) =>
@@ -38,9 +41,14 @@ export const useBoardStore = create<BoardState>()(
       setSelectedTool: (tool: ToolType) => set(() => ({ selectedTool: tool })),
       selectedElementId: null,
       selectElement: (id: string | null) => set(() => ({ selectedElementId: id })),
+      isElementTransforming: false,
+      setIsElementTransforming: (value) => {
+        set(() => ({ isElementTransforming: value }));
+      },
       selectToolbarPosition: { x: 0, y: 0 },
-      setSelectToolbarPosition: (position: { x: number; y: number }) =>
-        set(() => ({ selectToolbarPosition: position })),
+      setSelectToolbarPosition: (position: { x: number; y: number }) => {
+        set(() => ({ selectToolbarPosition: position }));
+      },
     }),
     { name: 'board-storage' },
   ),
diff --git a/packages/pkg.module.board/types.ts b/packages/pkg.module.board/types.ts
index c6e37027..d5288630 100644
--- a/packages/pkg.module.board/types.ts
+++ b/packages/pkg.module.board/types.ts
@@ -9,7 +9,14 @@ export type ToolType =
   | 'select'
   | 'hand';
 
-export type ElementType = 'line' | 'rectangle' | 'circle' | 'text' | 'sticker' | 'image';
+export type ElementType =
+  | 'line'
+  | 'rectangle'
+  | 'circle'
+  | 'text'
+  | 'sticker'
+  | 'image'
+  | 'toolbar';
 
 export interface BoardElement {
   id: string;
@@ -26,6 +33,9 @@ export interface BoardElement {
   height?: number;
   radius?: number;
   fill?: string;
+  // Свойства масштабирования для всех элементов
+  scaleX?: number;
+  scaleY?: number;
   // Свойства для текста и стикера
   text?: string;
   fontSize?: number;
@@ -48,3 +58,8 @@ export interface ZoomConfig {
   animationDuration: number;
   baseScaleStep: number;
 }
+
+export interface ToolbarElement extends BoardElement {
+  type: 'toolbar';
+  elementId: string | null;
+}
diff --git a/packages/pkg.module.board/useWhiteboardCollaborative.ts b/packages/pkg.module.board/useWhiteboardCollaborative.ts
index 378f979b..3ec094ef 100644
--- a/packages/pkg.module.board/useWhiteboardCollaborative.ts
+++ b/packages/pkg.module.board/useWhiteboardCollaborative.ts
@@ -1,46 +1,168 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 // hooks/useWhiteboardCollaborative.ts
-import { useEffect } from 'react';
-import * as Y from 'yjs';
-import { WebsocketProvider } from 'y-websocket'; // Если у вас есть HocuspocusProvider – замените здесь
-import { useBoardStore } from './store/useBoardStore';
+import { useEffect, useState, useRef } from 'react';
+import { useBoardStore } from './store';
 import { BoardElement } from './types';
+import { useYJS } from './hooks';
+
+export const useWhiteboardCollaborative = ({
+  roomId = 'roomid',
+  hostUrl = 'wss://hocus.xieffect.ru',
+}: {
+  roomId?: string;
+  hostUrl?: string;
+}) => {
+  const [isConnected, setIsConnected] = useState(false);
+  const isUpdatingRef = useRef<boolean>(false);
+  let hasConnectedBefore = false;
+
+  const { addElement, updateElement, removeElement, boardElements } = useBoardStore();
+  const { yDoc, provider, yStore, yArr, getYJSKeys } = useYJS(roomId, hostUrl);
+
+  // Синхронизирует один элемент из YJS в локальный стор
+  const synchronizeElementFromYjs = (elementId: string) => {
+    // получаем элемент из yjs стора
+    const json = yStore.get(elementId);
+    if (!json) return;
+
+    try {
+      const element = JSON.parse(json) as BoardElement;
+      const existingElement = boardElements.find((el) => el.id === elementId);
+      // проверяем есть ли элемент в локальном сторе, если не добавляем, если есть то обновляем
+      if (!existingElement) {
+        addElement(element);
+      } else if (JSON.stringify(existingElement) !== JSON.stringify(element)) {
+        updateElement(elementId, element);
+      }
+    } catch (error) {
+      console.error(`Error parsing JSON for key ${elementId} during sync:`, error);
+    }
+  };
 
-export const useWhiteboardCollaborative = () => {
   useEffect(() => {
-    const ydoc = new Y.Doc();
-    // Подключение к серверу совместного редактирования
-    const provider = new WebsocketProvider(
-      'wss://your-hocuspocus-server.com',
-      'whiteboard-room',
-      ydoc,
-    );
+    const unsubs: (() => void)[] = [];
+
+    // Синхронизация изменений из стора в YJS
+    unsubs.push(
+      useBoardStore.subscribe((state) => {
+        if (isUpdatingRef.current) return;
 
-    const yElements = ydoc.getArray<BoardElement>('boardElements');
-    const { addElement, clearBoard } = useBoardStore.getState();
-
-    // Наблюдаем за изменениями в Yjs-массиве и синхронизируем локальное состояние
-    yElements.observeDeep(() => {
-      const elements = yElements.toArray();
-      // Для простоты очищаем и перезаписываем все элементы
-      // – в продакшене рекомендуется реализовать более «умный» diff
-      clearBoard();
-      elements.forEach((el) => addElement(el));
-    });
-
-    // Подписываемся на изменения в локальном состоянии и отправляем их в Yjs
-    const unsubscribe = useBoardStore.subscribe(
-      (state: any) => state.boardElements,
-      (boardElements) => {
-        yElements.delete(0, yElements.length);
-        boardElements.forEach((el) => yElements.push([el]));
-      },
+        const { boardElements } = state;
+
+        try {
+          isUpdatingRef.current = true;
+          const yjsKeys = getYJSKeys();
+          const storeKeysSet = new Set(boardElements.map((el) => el.id));
+
+          yDoc.transact(() => {
+            yjsKeys.forEach((key) => {
+              if (!storeKeysSet.has(key)) {
+                yStore.delete(key);
+              }
+            });
+
+            boardElements.forEach((element) => {
+              const key = element.id;
+              const existingJson = yStore.get(key);
+
+              if (!existingJson || JSON.stringify(element) !== existingJson) {
+                yStore.set(key, JSON.stringify(element));
+              }
+            });
+          });
+        } catch (error) {
+          console.error('Error updating YJS:', error);
+        } finally {
+          isUpdatingRef.current = false;
+        }
+      }),
     );
 
+    // Обрабатывает изменения, поступающие из YJS
+    const handleChange = (
+      changes: Map<
+        string,
+        | { action: 'delete'; oldValue?: string }
+        | { action: 'update'; oldValue?: string; newValue: string }
+        | { action: 'add'; newValue: string }
+      >,
+    ) => {
+      if (isUpdatingRef.current) return;
+
+      try {
+        isUpdatingRef.current = true;
+
+        changes.forEach((change, id) => {
+          if (change.action === 'update' || change.action === 'add') {
+            synchronizeElementFromYjs(id);
+          } else if (change.action === 'delete') {
+            removeElement(id);
+          }
+        });
+      } catch (error) {
+        console.error('Error updating store:', error);
+      } finally {
+        isUpdatingRef.current = false;
+      }
+    };
+
+    // Выполняет полную синхронизацию данных при подключении
+    const handleSync = () => {
+      const keys = getYJSKeys();
+      const yjsKeys = new Set(keys);
+      // Удаляем элементы, которых нет в YJS
+      boardElements.forEach((element) => {
+        if (!yjsKeys.has(element.id)) {
+          removeElement(element.id);
+        }
+      });
+      // Обрабатываем каждый ключ из YJS
+      keys.forEach((key) => {
+        synchronizeElementFromYjs(key);
+      });
+    };
+
+    // Обрабатывает изменения статуса соединения
+    const handleStatusChange = ({ status }: { status: 'disconnected' | 'connected' }) => {
+      setIsConnected(status === 'connected');
+
+      if (status === 'disconnected') {
+        return;
+      }
+
+      provider.off('synced', handleSync);
+
+      if (status === 'connected') {
+        if (hasConnectedBefore) return;
+        hasConnectedBefore = true;
+        provider.on('synced', handleSync);
+        unsubs.push(() => provider.off('synced', handleSync));
+      }
+    };
+
+    provider.on('status', handleStatusChange);
+    unsubs.push(() => provider.off('status', handleStatusChange));
+
+    // Подписываемся на изменения YJS
+    yStore.on('change', handleChange);
+    unsubs.push(() => yStore.off('change', handleChange));
+
     return () => {
-      unsubscribe();
-      provider.disconnect();
-      ydoc.destroy();
+      unsubs.forEach((fn) => fn());
+      unsubs.length = 0;
     };
-  }, []);
+  }, [
+    provider,
+    yDoc,
+    yArr,
+    yStore,
+    roomId,
+    addElement,
+    updateElement,
+    removeElement,
+    boardElements,
+  ]);
+
+  return {
+    isConnected,
+  };
 };