@cyber-harbour/ui 1.0.66 → 1.0.68

package/package.json

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

package/src/Core/IconComponents/RotateLeftIcon.tsx

@@ -0,0 +1,24 @@
+import { SVGProps } from 'react';
+
+interface RotateLeftIconProps extends SVGProps<SVGSVGElement> {
+  fill?: string;
+}
+
+export const RotateLeftIcon = ({ fill = 'currentColor', ...props }: RotateLeftIconProps) => {
+  return (
+    <svg viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="M8.37229 15.6666C4.90562 15.6666 2.09229 12.8466 2.09229 9.38659C2.09229 8.13993 2.45895 6.93326 3.15229 5.89326C3.30562 5.66659 3.61895 5.59993 3.84562 5.75326C4.07229 5.9066 4.13895 6.21993 3.98562 6.44659C3.40562 7.31326 3.09895 8.33326 3.09895 9.37993C3.09895 12.2933 5.46562 14.6599 8.37895 14.6599C11.2923 14.6599 13.659 12.2933 13.659 9.37993C13.659 6.46659 11.2856 4.09993 8.37229 4.09993C7.75895 4.09993 7.15895 4.18659 6.59229 4.35993C6.32562 4.43993 6.04562 4.29326 5.96562 4.02659C5.88562 3.75993 6.03229 3.47993 6.29895 3.39993C6.96562 3.19993 7.65895 3.09326 8.37229 3.09326C11.839 3.09326 14.6523 5.91326 14.6523 9.37326C14.6523 12.8333 11.839 15.6666 8.37229 15.6666Z"
+        fill={fill}
+      />
+      <path
+        d="M5.61881 4.54658C5.50548 4.54658 5.38548 4.50658 5.29215 4.42658C5.07881 4.23992 5.05881 3.92658 5.23881 3.71992L7.16548 1.50658C7.34548 1.29992 7.66548 1.27325 7.87215 1.45992C8.07881 1.63992 8.09881 1.95992 7.91881 2.16658L5.99215 4.37325C5.89215 4.48658 5.75215 4.54658 5.61881 4.54658Z"
+        fill={fill}
+      />
+      <path
+        d="M7.86545 6.18659C7.76545 6.18659 7.65879 6.15325 7.57212 6.09325L5.31879 4.44659C5.09879 4.28659 5.05212 3.97325 5.21212 3.75325C5.37212 3.52659 5.68545 3.47992 5.91212 3.63992L8.15879 5.27992C8.37879 5.43992 8.43212 5.75325 8.26545 5.97992C8.17212 6.11992 8.01879 6.18659 7.86545 6.18659Z"
+        fill={fill}
+      />
+    </svg>
+  );
+};

package/src/Core/IconComponents/RotateRightIcon.tsx

@@ -0,0 +1,24 @@
+import { SVGProps } from 'react';
+
+interface RotateRightIconProps extends SVGProps<SVGSVGElement> {
+  fill?: string;
+}
+
+export const RotateRightIcon = ({ fill = 'currentColor', ...props }: RotateRightIconProps) => {
+  return (
+    <svg viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="M8.37228 15.6668C4.90562 15.6668 2.09229 12.8468 2.09229 9.38676C2.09229 5.92676 4.90562 3.1001 8.37228 3.1001C9.08562 3.1001 9.77895 3.2001 10.4456 3.40676C10.7123 3.48676 10.859 3.76676 10.779 4.03343C10.699 4.3001 10.419 4.44676 10.1523 4.36676C9.58562 4.19343 8.98562 4.1001 8.37228 4.1001C5.45895 4.1001 3.09229 6.46676 3.09229 9.3801C3.09229 12.2934 5.45895 14.6601 8.37228 14.6601C11.2856 14.6601 13.6523 12.2934 13.6523 9.3801C13.6523 8.32676 13.3456 7.31343 12.7656 6.44676C12.6123 6.2201 12.6723 5.90676 12.9056 5.75343C13.1323 5.6001 13.4456 5.6601 13.599 5.89343C14.2923 6.92676 14.659 8.13343 14.659 9.38676C14.6523 12.8468 11.839 15.6668 8.37228 15.6668Z"
+        fill={fill}
+      />
+      <path
+        d="M11.1252 4.54664C10.9852 4.54664 10.8452 4.48664 10.7452 4.37331L8.81854 2.15998C8.63854 1.95331 8.65854 1.63331 8.86521 1.45331C9.07188 1.27331 9.39188 1.29331 9.57188 1.49998L11.4985 3.71331C11.6785 3.91998 11.6585 4.23998 11.4519 4.41998C11.3652 4.50664 11.2452 4.54664 11.1252 4.54664Z"
+        fill={fill}
+      />
+      <path
+        d="M8.87904 6.18696C8.72571 6.18696 8.57237 6.11363 8.47237 5.9803C8.31237 5.7603 8.35904 5.44696 8.57904 5.2803L10.8257 3.6403C11.0457 3.47363 11.359 3.52696 11.5257 3.74696C11.6924 3.96696 11.639 4.2803 11.419 4.44696L9.17237 6.09363C9.08571 6.1603 8.98571 6.18696 8.87904 6.18696Z"
+        fill={fill}
+      />
+    </svg>
+  );
+};

package/src/Core/IconComponents/index.ts

@@ -62,3 +62,5 @@ export { PencilIcon } from './PencilIcon';
 export { UserInCircleIcon } from './UserInCircle';
 export { FlashIcon } from './FlashIcon';
 export { FolderInfoIcon } from './FolderInfoIcon';
+export { RotateLeftIcon } from './RotateLeftIcon';
+export { RotateRightIcon } from './RotateRightIcon';

package/src/Core/Overlay/Overlay.tsx

@@ -0,0 +1,92 @@
+import { createPortal } from 'react-dom';
+import { styled } from 'styled-components';
+import { useBodyScrollLock } from '../../utils';
+import { createComponent, createStyledComponent, generatePropertySpaceStyle, StyledFabricComponent } from '../../Theme';
+
+type Position = 'start' | 'center' | 'end';
+
+export type OverlayProps = {
+  children: any;
+  onOutsideClick?: () => void;
+  append?: any;
+  appendPosition?: Position;
+  prepend?: any;
+  prependPosition?: Position;
+};
+
+export const Overlay = createComponent<OverlayProps>(
+  ({ children, onOutsideClick, prepend, append, prependPosition, appendPosition, ...props }) => {
+    useBodyScrollLock(true);
+    return createPortal(
+      <Container
+        {...props}
+        onClick={(e) => {
+          if (e.target === e.currentTarget && onOutsideClick) {
+            onOutsideClick();
+          }
+        }}
+      >
+        {!!prepend && <PrependWrapper $position={prependPosition}>{prepend}</PrependWrapper>}
+        <StyledWrapper>{children}</StyledWrapper>
+        {!!append && <AppendWrapper $position={appendPosition}>{append}</AppendWrapper>}
+      </Container>,
+      document.body
+    );
+  }
+);
+
+const PrependWrapper = styled.div<{ $position?: Position }>(
+  ({ theme, $position = 'end' }) => `
+  position: absolute;
+  top: ${theme.overlay.gap};
+  z-index: ${theme.zIndex.backdrop};
+  ${
+    $position === 'end'
+      ? `right: ${theme.overlay.gap};`
+      : $position === 'start'
+      ? `left: ${theme.overlay.gap};`
+      : 'left: 50%; transform: translateX(-50%);'
+  }
+`
+);
+
+const AppendWrapper = styled.div<{ $position?: Position }>(
+  ({ theme, $position = 'center' }) => `
+  position: absolute;
+  bottom: ${theme.overlay.gap};
+  z-index: ${theme.zIndex.backdrop};
+  ${
+    $position === 'end'
+      ? `right: ${theme.overlay.gap};`
+      : $position === 'start'
+      ? `left: ${theme.overlay.gap};`
+      : 'left: 50%; transform: translateX(-50%);'
+  }
+`
+);
+
+const StyledWrapper = styled.div`
+  max-width: 100%;
+  max-height: 100%;
+  overflow: hidden;
+`;
+
+const Container = createStyledComponent(
+  styled.div<StyledFabricComponent>(
+    ({ theme, py = theme.overlay.paddingBlock }) => `
+    position: fixed;
+     ${generatePropertySpaceStyle(theme, 'padding-block', py)};
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    min-width: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: ${theme.overlay.background};
+    z-index: ${theme.zIndex.backdrop};
+    
+`
+  )
+);

package/src/Core/Overlay/index.ts

@@ -0,0 +1 @@
+export * from './Overlay';

package/src/Core/index.ts

@@ -23,3 +23,4 @@ export * from './Switch';
 export * from './Drawer';
 export * from './Tooltip';
 export * from './ContentLoader';
+export * from './Overlay';

package/src/Graph2D/Graph2D.tsx

@@ -1181,6 +1181,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 +1317,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
@@ -1371,6 +1381,7 @@ export const Graph2D: any = forwardRef<Graph2DRef, Graph2DProps>(
         handleLinkHover,
         renderCanvas2D,
         isPointInButtonSector,
+        getHoveredIndex,
       ]
     );
 
@@ -1396,7 +1407,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 +1422,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 +1479,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 +1532,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 +1711,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 +1731,8 @@ export const Graph2D: any = forwardRef<Graph2DRef, Graph2DProps>(
           onMouseUp={handleMouseUp}
           onMouseLeave={handleMouseUp}
           onClick={handleClick}
+          onTouchStart={handleTouchStart}
+          onTouchMove={handleTouchMove}
         />
       </Wrapper>
     );

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: {
@@ -985,6 +985,11 @@ export const darkThemePx: Theme = {
     height: 26,
     iconSize: 8,
   },
+  overlay: {
+    paddingBlock: 40,
+    gap: 6,
+    background: 'rgba(0, 0, 0, 0.5)',
+  },
 };
 
 export const darkTheme = convertPaletteToRem(darkThemePx, darkThemePx.baseSize) as DefaultTheme;

package/src/Theme/themes/light.ts

@@ -984,6 +984,11 @@ export const lightThemePx: Theme = {
     height: 26,
     iconSize: 8,
   },
+  overlay: {
+    paddingBlock: 40,
+    gap: 6,
+    background: 'rgba(16, 16, 16, 0.1)',
+  },
 };
 
 export const lightTheme = convertPaletteToRem(lightThemePx, lightThemePx.baseSize) as DefaultTheme;

package/src/Theme/types.ts

@@ -328,6 +328,11 @@ export type Theme = {
     height: string | number;
     iconSize: string | number;
   };
+  overlay: {
+    paddingBlock: string | number;
+    background: string;
+    gap: string | number;
+  };
 };
 
 //TODO check and refactoring