@cyber-harbour/ui 1.0.50 → 1.0.52

package/src/Graph2D/types.ts

@@ -31,6 +31,44 @@ export interface Graph2DRef {
   removeNodes: (nodeIds: (string | number)[]) => void;
 }
 
+/**
+ * Интерфейс для внутреннего состояния компонента Graph2D
+ */
+export interface GraphState {
+  /** Трансформация графа (позиционирование и масштаб) */
+  transform: { x: number; y: number; k: number };
+  /** Флаг режима панорамирования */
+  isPanning: boolean;
+  /** Узел, над которым находится курсор */
+  hoveredNode: NodeObject | null;
+  /** Связь, над которой находится курсор */
+  hoveredLink: LinkObject | null;
+  /** Узел, который в данный момент перетаскивается */
+  draggedNode: NodeObject | null;
+  /** Выбранный узел */
+  selectedNode: NodeObject | null;
+  /** Индекс кнопки, над которой находится курсор */
+  hoveredButtonIndex: number | null;
+  /** Набор узлов, которые должны быть подсвечены */
+  highlightNodes: Set<NodeObject>;
+  /** Набор связей, которые должны быть подсвечены */
+  highlightLinks: Set<any>;
+  /** Последняя позиция курсора */
+  lastMousePos: { x: number; y: number };
+  /** Флаг необходимости остановки распространения события */
+  mustBeStoppedPropagation: boolean;
+  /** Последний узел, над которым был курсор */
+  lastHoveredNode: NodeObject | null;
+  /** Кэшированная ссылка на последний узел, над которым был курсор (для избежания лишних вычислений) */
+  lastHoveredNodeRef: NodeObject | null;
+  /** Начальная позиция курсора при начале перетаскивания */
+  mouseStartPos: { x: number; y: number } | null;
+  /** Флаг режима перетаскивания */
+  isDragging: boolean;
+  width: number;
+  height: number;
+}
+
 export interface Graph2DProps {
   graphData: GraphData;
   loading?: boolean;
@@ -46,6 +84,8 @@ export interface Graph2DProps {
   onNodeClick?: (node: NodeObject) => void;
   onBackgroundClick?: () => void;
   onNodeHover?: (node: NodeObject | null) => void;
+  onLinkHover?: (link: LinkObject | null) => void;
+  onLinkClick?: (link: LinkObject) => void;
 }
 
 export interface NodeButton {

package/src/Theme/componentFabric.ts

@@ -1,7 +1,7 @@
 import styled, { css, IStyledComponent, DefaultTheme, WebTarget } from 'styled-components';
 import { pxToRem } from './utils';
 
-type MarginProps = {
+type SpaceProps = {
   m?: string | number; // margin
   mt?: string | number; // margin-top
   mr?: string | number; // margin-right
@@ -18,7 +18,7 @@ type MarginProps = {
   py?: string | number; // padding-top + padding-bottom
 };
 
-export type FabricComponent<T = object> = T & MarginProps;
+export type FabricComponent<T = object> = T & SpaceProps;
 
 const marginStyles = ({ ignoreStyles }: FabricComponentOptions = {}) =>
   css<FabricComponent>(({ theme, ...props }) => {
@@ -91,3 +91,15 @@ export const createComponent = <T extends object = {}>(
     ${paddingStyles(options)}
   `;
 };
+
+export const destructSpaceProps = <T extends FabricComponent>(props: T): SpaceProps => {
+  const rest: SpaceProps = {};
+  ['m', 'mt', 'mr', 'mb', 'ml', 'mx', 'my', 'p', 'pt', 'pr', 'pb', 'pl', 'px', 'py'].forEach((key) => {
+    if (key in props) {
+      rest[key as keyof SpaceProps] = props[key as keyof SpaceProps];
+      delete props[key as keyof SpaceProps];
+    }
+  });
+
+  return rest;
+};

package/src/Theme/themes/dark.ts

@@ -758,6 +758,24 @@ export const darkThemePx: Theme = {
       background: '#FFFBE0',
     },
   },
+  label: {
+    sizes: {
+      small: {
+        fontSize: 14,
+        gap: 10,
+        marginBottom: 20,
+        helpText: { fontSize: 12, marginTop: 5 },
+      },
+      medium: {
+        fontSize: 16,
+        gap: 10,
+        marginBottom: 25,
+        helpText: { fontSize: 14, marginTop: 5 },
+      },
+    },
+    color: '#ffffff',
+    helpTextColor: '#535353',
+  },
 };
 
 export const darkTheme = convertPaletteToRem(darkThemePx, darkThemePx.baseSize) as DefaultTheme;

package/src/Theme/themes/light.ts

@@ -757,6 +757,24 @@ export const lightThemePx: Theme = {
       background: '#FFFBE0',
     },
   },
+  label: {
+    sizes: {
+      small: {
+        fontSize: 14,
+        gap: 10,
+        marginBottom: 20,
+        helpText: { fontSize: 12, marginTop: 5 },
+      },
+      medium: {
+        fontSize: 16,
+        gap: 10,
+        marginBottom: 25,
+        helpText: { fontSize: 14, marginTop: 5 },
+      },
+    },
+    color: '#101010',
+    helpTextColor: '#99989C',
+  },
 };
 
 export const lightTheme = convertPaletteToRem(lightThemePx, lightThemePx.baseSize) as DefaultTheme;

package/src/Theme/types.ts

@@ -22,6 +22,14 @@ export type TagColor =
   | 'orange'
   | string;
 
+export type LabelSize = 'small' | 'medium';
+export type LabelSizeStyle = {
+  fontSize: number | string;
+  gap: number | string;
+  marginBottom: number | string;
+  helpText: { fontSize: number | string; marginTop: number | string };
+};
+
 // Типи для spacing та breakpoints
 export type Breakpoint = 'xs' | 's' | 'm' | 'l' | 'xl';
 
@@ -274,6 +282,11 @@ export type Theme = {
       background: string;
     };
   };
+  label: {
+    sizes: Record<LabelSize, LabelSizeStyle>;
+    color: string;
+    helpTextColor: string;
+  };
 };
 
 //TODO check and refactoring

package/src/Theme/utils.ts

@@ -88,6 +88,27 @@ const IGNORE_CONVERT_KEYS: Record<string, string[] | boolean> = {
   baseSize: true,
 };
 
+/**
+ * Converts a prop value to rem units if needed
+ *
+ * @param value - The pixel value to convert. Can be a number or a string with 'px' suffix
+ * @param baseSize - Base font size in pixels. Default is 16px (browser default)
+ * @returns The value in rem units as a string (e.g., "1.25rem")
+ */
+export const propToRem = (value: number | string, baseSize: number = 16): string => {
+  if (typeof value === 'string' && value.trim().endsWith('%')) return value; // Return percentage values as-is
+  const numericValue = typeof value === 'string' ? parseFloat(value) : value;
+
+  // Handle invalid values
+  if (isNaN(numericValue)) {
+    return `${value}`;
+  }
+
+  // Convert to rem and round to 4 decimal places for precision
+  const remValue = (numericValue / baseSize).toFixed(4).replace(/\.?0+$/, '');
+
+  return `${remValue}rem`;
+};
 /**
  * Recursively converts all pixel values in an object to rem units
  *