48595868: add cursor for selected board tool

apps/xi.front/package.json

@@ -61,7 +61,7 @@
     "react-error-boundary": "^5.0.0",
     "socket.io": "4.7.5",
     "socket.io-client": "4.7.5",
-    "sonner": "1.4.41",
+    "sonner": "^2.0.3",
     "zod": "3.22.4",
     "zustand": "^4.5.5"
   },

packages/pkg.avatar.editor/package.json

@@ -16,7 +16,7 @@
     "pkg.utils": "*",
     "react-easy-crop": "5.0.4",
     "react-image-file-resizer": "0.4.8",
-    "sonner": "1.4.41"
+    "sonner": "^2.0.3"
   },
   "devDependencies": {
     "@types/node": "^20.3.1",

packages/pkg.community.channel-create/package.json

@@ -16,7 +16,7 @@
     "zod": "3.24.1",
     "@xipkg/form": "^3.3.0",
     "pkg.stores": "*",
-    "sonner": "1.4.41",
+    "sonner": "^2.0.3",
     "nanoid": "5.0.7"
   },
   "devDependencies": {

packages/pkg.community.empty/package.json

@@ -19,7 +19,7 @@
     "pkg.logo": "*",
     "pkg.stores": "*",
     "pkg.utils": "^0.0.0",
-    "sonner": "^1.4.41",
+    "sonner": "^2.0.3",
     "zod": "3.24.1"
   },
   "devDependencies": {

packages/pkg.community.settings/package.json

@@ -31,7 +31,7 @@
     "pkg.utils": "*",
     "pkg.utils.client": "*",
     "socket.io-client": "^4.7.5",
-    "sonner": "1.4.41",
+    "sonner": "^2.0.3",
     "zod": "3.24.1",
     "zustand": "^4.5.5"
   },

packages/pkg.form.new-password/package.json

@@ -16,7 +16,7 @@
     "@xipkg/utils": "1.3.0",
     "pkg.logo": "*",
     "pkg.utils": "*",
-    "sonner": "1.4.41",
+    "sonner": "^2.0.3",
     "zod": "3.24.1"
   },
   "devDependencies": {

packages/pkg.modal.add-community/package.json

@@ -18,7 +18,7 @@
     "pkg.stores": "*",
     "pkg.utils": "*",
     "pkg.utils.client": "*",
-    "sonner": "^1.4.41",
+    "sonner": "^2.0.3",
     "zod": "3.24.1"
   },
   "devDependencies": {

packages/pkg.modal.category-create/package.json

@@ -17,7 +17,7 @@
     "@xipkg/toggle": "^1.2.0",
     "zod": "3.24.1",
     "pkg.stores": "*",
-    "sonner": "1.4.41",
+    "sonner": "^2.0.3",
     "nanoid": "5.0.7"
   },
   "devDependencies": {

packages/pkg.modal.change-email/package.json

@@ -19,7 +19,7 @@
     "zod": "3.24.1",
     "@xipkg/modal": "^3.3.0",
     "pkg.stores": "*",
-    "sonner": "1.4.41"
+    "sonner": "^2.0.3"
   },
   "devDependencies": {
     "eslint-config-custom": "*",

packages/pkg.modal.change-password/package.json

@@ -19,7 +19,7 @@
     "@xipkg/utils": "1.3.0",
     "pkg.stores": "*",
     "pkg.utils": "*",
-    "sonner": "1.4.41",
+    "sonner": "^2.0.3",
     "zod": "3.24.1"
   },
   "devDependencies": {

packages/pkg.modal.invite-community/package.json

@@ -21,7 +21,7 @@
     "date-fns": "^3.6.0",
     "next-themes": "^0.2.1",
     "pkg.stores": "*",
-    "sonner": "^1.4.41",
+    "sonner": "^2.0.3",
     "zod": "3.24.1"
   },
   "devDependencies": {

packages/pkg.module.board/Canvas.tsx

@@ -2,7 +2,7 @@
 import { Stage } from 'react-konva';
 import { useKeyPress } from 'pkg.utils.client';
 import { useBoardStore } from './store';
-import { useCanvasHandlers, useZoom } from './hooks';
+import { useCanvasHandlers, useCursor, useZoom } from './hooks';
 import { useStage } from './providers';
 import { BackgroundLayer, SelectedElementToolbar, Navbar, ZoomMenu } from './components';
 import { CanvasLayer } from './CanvasLayer';
@@ -18,6 +18,8 @@ export const Canvas = () => {
 
   const { handleResetZoom, handleZoomIn, handleZoomOut } = useZoom(stageRef);
 
+  const { cursor, mouseHandlers } = useCursor(selectedTool);
+
   const boardWidth = window.innerWidth;
   const boardHeight = window.innerHeight;
 
@@ -29,7 +31,7 @@ export const Canvas = () => {
   });
 
   return (
-    <div className="flex h-full w-full flex-col">
+    <div className="flex h-full w-full flex-col" style={{ cursor }} {...mouseHandlers}>
       <div className="relative flex-1 overflow-hidden">
         <ZoomMenu zoomIn={handleZoomIn} zoomOut={handleZoomOut} resetZoom={handleResetZoom} />
         <Navbar />

packages/pkg.module.board/components/Navbar.tsx

@@ -9,11 +9,12 @@ import { ToolType } from '../types';
 
 export const Navbar = () => {
   const [isTooltipOpen] = React.useState(false);
-  const { setSelectedTool, selectedTool } = useBoardStore();
+  const { setSelectedTool, selectedTool, selectElement } = useBoardStore();
 
   // const resetStyles = () => {};
 
   const handleSelectTool = (toolName: ToolType) => {
+    selectElement(null);
     setSelectedTool(toolName);
   };
 

packages/pkg.module.board/hooks/index.ts

@@ -2,4 +2,5 @@ export { useZoom } from './useWheelZoom';
 export { useElementHandlers } from './useElementHandlers';
 export { useIsStageScaling } from './useIsStageScaling';
 export { useCanvasHandlers } from './useCanvasHandlers';
-export { useYJS } from './useYJS';
+export { useCursor } from './useCursor';
+export { useYjs } from './useYjs';

packages/pkg.module.board/hooks/useCursor.tsx

@@ -0,0 +1,20 @@
+import { useState } from 'react';
+import { ToolType } from '../types';
+import { getCursorType } from '../utils';
+
+export const useCursor = (tool: ToolType) => {
+  const [isDragging, setIsDragging] = useState(false);
+  const cursor = getCursorType(tool, isDragging);
+
+  const mouseHandlers = {
+    onMouseDown: () => {
+      if (tool === 'hand') {
+        setIsDragging(true);
+      }
+    },
+    onMouseUp: () => setIsDragging(false),
+    onMouseLeave: () => setIsDragging(false),
+  };
+
+  return { cursor, mouseHandlers };
+};

packages/pkg.module.board/hooks/useYJS.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useMemo } from 'react';
 import { getOrCreateInstance, releaseInstance, getKeys } from '../services';
 
-export const useYJS = (roomId: string, hostUrl: string) => {
+export const useYjs = (roomId: string, hostUrl: string) => {
   // Получаем инстанс YJS
   const instance = useMemo(() => getOrCreateInstance(roomId, hostUrl), [roomId, hostUrl]);
 

packages/pkg.module.board/types.ts

@@ -4,10 +4,12 @@ export type ToolType =
   | 'sticker'
   | 'text'
   | 'eraser'
-  | 'shape'
+  | 'rectangle'
   | 'image'
   | 'select'
-  | 'hand';
+  | 'hand'
+  | 'arrow'
+  | 'asset';
 
 export type ElementType =
   | 'line'

packages/pkg.module.board/useWhiteboardCollaborative.ts

@@ -2,7 +2,7 @@
 import { useEffect, useState, useRef } from 'react';
 import { useBoardStore } from './store';
 import { BoardElement } from './types';
-import { useYJS } from './hooks';
+import { useYjs } from './hooks';
 
 export const useWhiteboardCollaborative = ({
   roomId = 'roomid',
@@ -16,7 +16,7 @@ export const useWhiteboardCollaborative = ({
   let hasConnectedBefore = false;
 
   const { addElement, updateElement, removeElement, boardElements } = useBoardStore();
-  const { yDoc, provider, yStore, yArr, getYJSKeys } = useYJS(roomId, hostUrl);
+  const { yDoc, provider, yStore, yArr, getYJSKeys } = useYjs(roomId, hostUrl);
 
   // Синхронизирует один элемент из YJS в локальный стор
   const synchronizeElementFromYjs = (elementId: string) => {

packages/pkg.module.board/utils/getCursorType.ts

@@ -0,0 +1,24 @@
+import { ToolType } from '../types';
+
+// типы курсора можно задать через url, передав base64 строку
+
+const cursorMap: Record<ToolType, string> = {
+  pen: 'crosshair',
+  sticker: 'crosshair',
+  text: 'text',
+  eraser: 'crosshair',
+  rectangle: 'crosshair',
+  image: 'default',
+  select: 'default',
+  hand: 'grab',
+  arrow: 'crosshair',
+  asset: 'default',
+};
+
+export const getCursorType = (tool: ToolType, isGrabbing: boolean): string => {
+  if (tool === 'hand') {
+    return isGrabbing ? 'grabbing' : 'grab';
+  }
+
+  return cursorMap[tool] ?? 'default';
+};

packages/pkg.module.board/utils/index.ts

@@ -1,3 +1,4 @@
 export { defaultZoomConfig } from './zoomConfig';
 export { calculateZoom } from './calculateBoardZoom';
 export { gridConfig } from './gridConfig';
+export { getCursorType } from './getCursorType';

packages/pkg.module.tasks-admin/package.json

@@ -23,7 +23,7 @@
     "@xipkg/tooltip": "^1.2.0",
     "@xipkg/utils": "^1.3.0",
     "date-fns": "3.6.0",
-    "sonner": "^1.5.0",
+    "sonner": "^2.0.3",
     "zod": "3.24.1",
     "zustand": "^5.0.1"
   },

packages/pkg.navigation/package.json

@@ -40,7 +40,7 @@
     "pkg.utils": "*",
     "pkg.utils.client": "*",
     "socket.io-client": "4.7.5",
-    "sonner": "1.4.41",
+    "sonner": "^2.0.3",
     "swiper": "^11.1.14",
     "zustand": "^4.5.5"
   },

packages/pkg.popover.add-file/package.json

@@ -17,7 +17,7 @@
     "browser-image-compression": "^2.0.2",
     "pkg.utils": "*",
     "react-image-file-resizer": "^0.4.8",
-    "sonner": "1.4.41",
+    "sonner": "^2.0.3",
     "zod": "3.22.4"
   },
   "devDependencies": {

packages/pkg.user.settings/components/Customization.tsx

@@ -12,7 +12,7 @@ import { useTheme } from 'next-themes';
 import { patch } from 'pkg.utils';
 import { toast } from 'sonner';
 import { useMainSt } from 'pkg.stores';
-import { useDebouncedFunction } from '@xipkg/utils/useDebouncedFunction';
+import { useDebouncedFunction } from '@xipkg/utils';
 
 type ThemeT = 'light' | 'dark' | 'system';
 

packages/pkg.user.settings/package.json

@@ -20,7 +20,7 @@
     "@xipkg/modal": "3.3.0",
     "@xipkg/select": "1.3.0",
     "@xipkg/userprofile": "3.3.0",
-    "@xipkg/utils": "^1.3.0",
+    "@xipkg/utils": "^1.7.0",
     "dayjs": "^1.11.13",
     "next-themes": "^0.2.1",
     "pkg.avatar.editor": "*",
@@ -31,7 +31,7 @@
     "pkg.stores": "*",
     "pkg.utils": "*",
     "pkg.utils.client": "*",
-    "sonner": "1.4.41",
+    "sonner": "^2.0.3",
     "zod": "3.24.1"
   },
   "devDependencies": {
@@ -45,9 +45,9 @@
     "typescript": "^5.4.2"
   },
   "peerDependencies": {
-    "react": "19",
-    "next": "15",
     "@hookform/resolvers": "3.9.1",
+    "next": "15",
+    "react": "19",
     "react-hook-form": "^7.0.0"
   },
   "description": "form for signin",