xi-effect · unknownproperty · Apr 13, 2025 · Apr 9, 2025
diff --git a/packages/pkg.module.board/Canvas.tsx b/packages/pkg.module.board/Canvas.tsx
@@ -6,13 +6,16 @@ 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();
   const { selectedTool, removeElement, selectedElementId, selectElement } = useBoardStore();
   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
@@ -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
@@ -1,38 +1,67 @@
+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;
   }
 
   return (
     <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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -0,0 +1 @@
+export { getKeys, getOrCreateInstance, releaseInstance } from './yjsService';
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { getKeys, getOrCreateInstance, releaseInstance } from './yjsService';