@cyber-harbour/ui 1.0.67 → 1.0.69

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cyber-harbour/ui",
-  "version": "1.0.67",
+  "version": "1.0.69",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",

package/src/Graph2D/Graph2D.tsx

@@ -90,10 +90,8 @@ export const Graph2D: any = forwardRef<Graph2DRef, Graph2DProps>(
       highlightLinks: new Set(),
       lastMousePos: { x: 0, y: 0 },
       mustBeStoppedPropagation: false,
-      lastHoveredNode: null,
       mouseStartPos: null,
       isDragging: false,
-      lastHoveredNodeRef: null,
       width: width * RATIO,
       height: height * RATIO,
     });
@@ -1062,13 +1060,10 @@ export const Graph2D: any = forwardRef<Graph2DRef, Graph2DProps>(
     const handleNodeHover = useCallback(
       (node: NodeObject | null) => {
         // Перевіряємо, чи вузол той самий, що і останній вузол, на який наводили
-        if (node === stateRef.current.lastHoveredNodeRef) {
+        if (node === stateRef.current.hoveredNode) {
           return; // Пропускаємо обробку, якщо це той самий вузол
         }
 
-        // Оновлюємо посилання на останній наведений вузол
-        stateRef.current.lastHoveredNodeRef = node;
-
         const newHighlightNodes = new Set<NodeObject>();
         const newHighlightLinks = new Set<any>();
 
@@ -1181,6 +1176,49 @@ export const Graph2D: any = forwardRef<Graph2DRef, Graph2DProps>(
       [getNodeAtPosition]
     );
 
+    const getHoveredIndex = useCallback(
+      (x: number, y: number) => {
+        let hoveredIndex = null;
+        if (canvasRef.current && stateRef.current && buttonImages.length > 0) {
+          const buttonRadius = (config.nodeSizeBase * config.nodeAreaFactor) / 2;
+          const rect = canvasRef.current.getBoundingClientRect();
+
+          // Масштабуємо координати відносно розміру відображення полотна
+          const canvasScaleX = canvasRef.current.width / rect.width;
+          const canvasScaleY = canvasRef.current.height / rect.height;
+
+          // Масштабовані координати миші в системі координат полотна
+          const scaledMouseX = x * canvasScaleX;
+          const scaledMouseY = y * canvasScaleY;
+
+          // Застосовуємо поточну трансформацію для отримання світових координат
+          const worldX = (scaledMouseX - stateRef.current.transform.x) / stateRef.current.transform.k;
+          const worldY = (scaledMouseY - stateRef.current.transform.y) / stateRef.current.transform.k;
+
+          // Node position
+          const nodeX = stateRef.current.selectedNode?.x || 0;
+          const nodeY = stateRef.current.selectedNode?.y || 0;
+
+          // Обчислюємо кількість кнопок та їхні сектори
+          const buttonCount = Math.min(buttonImages.length, 8);
+          const sectorAngle = Math.min((Math.PI * 2) / buttonCount, Math.PI);
+
+          // Перевіряємо, чи вказівник миші знаходиться над будь-яким сектором кнопок
+          for (let i = 0; i < buttonCount; i++) {
+            const startAngle = i * sectorAngle;
+            const endAngle = (i + 1) * sectorAngle;
+
+            if (isPointInButtonSector(worldX, worldY, nodeX, nodeY, buttonRadius, startAngle, endAngle)) {
+              hoveredIndex = i;
+              break;
+            }
+          }
+        }
+        return hoveredIndex;
+      },
+      [buttonImages]
+    );
+
     // Обробка руху миші для перетягування та наведення
     const handleMouseMove = useCallback(
       (event: React.MouseEvent<HTMLCanvasElement>) => {
@@ -1274,40 +1312,7 @@ export const Graph2D: any = forwardRef<Graph2DRef, Graph2DProps>(
 
         // Логіка виявлення наведення на кнопки
         if (stateRef.current.selectedNode && canvasRef.current && buttonImages.length > 0) {
-          const buttonRadius = (config.nodeSizeBase * config.nodeAreaFactor) / 2;
-
-          // Масштабуємо координати відносно розміру відображення полотна
-          const canvasScaleX = canvasRef.current.width / rect.width;
-          const canvasScaleY = canvasRef.current.height / rect.height;
-
-          // Масштабовані координати миші в системі координат полотна
-          const scaledMouseX = x * canvasScaleX;
-          const scaledMouseY = y * canvasScaleY;
-
-          // Застосовуємо поточну трансформацію для отримання світових координат
-          const worldX = (scaledMouseX - stateRef.current.transform.x) / stateRef.current.transform.k;
-          const worldY = (scaledMouseY - stateRef.current.transform.y) / stateRef.current.transform.k;
-
-          // Node position
-          const nodeX = stateRef.current.selectedNode.x || 0;
-          const nodeY = stateRef.current.selectedNode.y || 0;
-
-          // Обчислюємо кількість кнопок та їхні сектори
-          const buttonCount = Math.min(buttonImages.length, 8);
-          const sectorAngle = Math.min((Math.PI * 2) / buttonCount, Math.PI);
-
-          let hoveredIndex = null;
-
-          // Перевіряємо, чи вказівник миші знаходиться над будь-яким сектором кнопок
-          for (let i = 0; i < buttonCount; i++) {
-            const startAngle = i * sectorAngle;
-            const endAngle = (i + 1) * sectorAngle;
-
-            if (isPointInButtonSector(worldX, worldY, nodeX, nodeY, buttonRadius, startAngle, endAngle)) {
-              hoveredIndex = i;
-              break;
-            }
-          }
+          const hoveredIndex = getHoveredIndex(x, y);
           if (hoveredIndex !== null) hoveredNode = stateRef.current.selectedNode; // Set hoveredNode to selectedNode for further processing
           if (hoveredIndex !== stateRef.current.hoveredButtonIndex) {
             shouldRender = true; // Only render if hovered button index has changed
@@ -1340,8 +1345,8 @@ export const Graph2D: any = forwardRef<Graph2DRef, Graph2DProps>(
 
             if (shouldRenderLink) {
               renderCanvas2D();
+              return;
             }
-            return;
           }
         }
 
@@ -1371,6 +1376,7 @@ export const Graph2D: any = forwardRef<Graph2DRef, Graph2DProps>(
         handleLinkHover,
         renderCanvas2D,
         isPointInButtonSector,
+        getHoveredIndex,
       ]
     );
 
@@ -1396,7 +1402,9 @@ export const Graph2D: any = forwardRef<Graph2DRef, Graph2DProps>(
           if (rect) {
             const x = event.clientX - rect.left;
             const y = event.clientY - rect.top;
-
+            if (buttonImages.length > 0 && stateRef.current.hoveredButtonIndex === null) {
+              stateRef.current.hoveredButtonIndex = getHoveredIndex(x, y);
+            }
             // Спочатку перевіряємо, чи ми клікаємо на кнопку обраного вузла
             let isButtonClick = false;
             if (
@@ -1409,6 +1417,7 @@ export const Graph2D: any = forwardRef<Graph2DRef, Graph2DProps>(
               if (button && button.onClick) {
                 button.onClick(stateRef.current.selectedNode);
                 isButtonClick = true;
+                stateRef.current.hoveredButtonIndex = null;
               }
             }
 
@@ -1465,7 +1474,16 @@ export const Graph2D: any = forwardRef<Graph2DRef, Graph2DProps>(
 
         renderCanvas2D();
       },
-      [buttons, renderCanvas2D, handleNodeClick, handleBackgroundClick, getLinkAtPosition, handleLinkClick]
+      [
+        buttons,
+        renderCanvas2D,
+        handleNodeClick,
+        handleBackgroundClick,
+        getLinkAtPosition,
+        handleLinkClick,
+        getHoveredIndex,
+        buttonImages,
+      ]
     );
 
     // Обробляємо подію колеса миші для масштабування
@@ -1509,6 +1527,47 @@ export const Graph2D: any = forwardRef<Graph2DRef, Graph2DProps>(
       [renderCanvas2D]
     );
 
+    //Обробка подій на тачскрін девайсах
+    const convertTouchToMouseEvent = (
+      e: TouchEvent | React.TouchEvent<HTMLCanvasElement>,
+      callback: (event: React.MouseEvent<HTMLCanvasElement>) => void
+    ) => {
+      const touch = e.touches[0];
+      if (touch) {
+        // Create a synthetic React.MouseEvent-like object
+        const syntheticEvent = {
+          clientX: touch.clientX,
+          clientY: touch.clientY,
+        } as React.MouseEvent<HTMLCanvasElement>;
+        callback(syntheticEvent);
+      }
+    };
+    const handleTouchStart = useCallback(
+      (e: React.TouchEvent<HTMLCanvasElement>) => {
+        convertTouchToMouseEvent(e, handleMouseDown);
+      },
+      [handleMouseDown]
+    );
+
+    const handleTouchEnd = useCallback(
+      (e: TouchEvent) => {
+        if (stateRef.current.mustBeStoppedPropagation) {
+          e.preventDefault();
+          e.stopPropagation();
+        }
+        stateRef.current.mustBeStoppedPropagation = false;
+        convertTouchToMouseEvent(e, handleMouseUp);
+      },
+      [handleMouseUp]
+    );
+
+    const handleTouchMove = useCallback(
+      (e: React.TouchEvent<HTMLCanvasElement>) => {
+        convertTouchToMouseEvent(e, handleMouseMove);
+      },
+      [handleMouseMove]
+    );
+
     useImperativeHandle(
       ref,
       () => ({
@@ -1647,12 +1706,14 @@ export const Graph2D: any = forwardRef<Graph2DRef, Graph2DProps>(
 
       // Add event listener with passive: false to allow preventDefault
       canvas.addEventListener('wheel', handleWheel, { passive: false });
+      canvas.addEventListener('touchend', handleTouchEnd, { passive: false });
 
       // Clean up when component unmounts
       return () => {
         canvas.removeEventListener('wheel', handleWheel);
+        canvas.removeEventListener('touchend', handleTouchEnd);
       };
-    }, [handleWheel]);
+    }, [handleWheel, handleTouchEnd]);
 
     return (
       <Wrapper>
@@ -1665,6 +1726,8 @@ export const Graph2D: any = forwardRef<Graph2DRef, Graph2DProps>(
           onMouseUp={handleMouseUp}
           onMouseLeave={handleMouseUp}
           onClick={handleClick}
+          onTouchStart={handleTouchStart}
+          onTouchMove={handleTouchMove}
         />
       </Wrapper>
     );

package/src/Graph2D/types.ts

@@ -57,10 +57,6 @@ export interface GraphState {
   lastMousePos: { x: number; y: number };
   /** Флаг необходимости остановки распространения события */
   mustBeStoppedPropagation: boolean;
-  /** Последний узел, над которым был курсор */
-  lastHoveredNode: NodeObject | null;
-  /** Кэшированная ссылка на последний узел, над которым был курсор (для избежания лишних вычислений) */
-  lastHoveredNodeRef: NodeObject | null;
   /** Начальная позиция курсора при начале перетаскивания */
   mouseStartPos: { x: number; y: number } | null;
   /** Флаг режима перетаскивания */

package/src/Theme/themes/dark.ts

@@ -922,8 +922,8 @@ export const darkThemePx: Theme = {
     },
     color: {
       icon: '#FDC700',
-      text: '#894B00',
-      background: '#FFFBE0',
+      text: '#FFEDD8',
+      background: '#68550E',
     },
   },
   label: {