@cyber-harbour/ui 1.0.44 → 1.0.46

package/src/Graph2D/types.ts

@@ -1,29 +1,77 @@
-import { GraphData, NodeObject } from 'react-force-graph-2d';
+export interface Graph2DRef {
+  /**
+   * Масштабирует график так, чтобы все узлы были видны
+   * @param duration Длительность анимации масштабирования в миллисекундах
+   * @param padding Отступ от краев в пикселях
+   */
+  zoomToFit: (duration?: number, padding?: number) => void;
+
+  /**
+   * Добавляет новые узлы и связи на график
+   * @param newNodes Массив новых узлов для добавления
+   * @param newLinks Массив новых связей для добавления
+   * @param options Опции для настройки поведения при добавлении
+   *   - smoothAppearance: если true, существующие узлы не будут двигаться,
+   *     а новые появятся плавно рядом со связанными узлами
+   *   - transitionDuration: длительность анимации появления новых узлов в миллисекундах
+   */
+  addNodes: (
+    newNodes: NodeObject[],
+    newLinks?: LinkObject[],
+    options?: {
+      smoothAppearance?: boolean;
+      transitionDuration?: number;
+    }
+  ) => void;
+
+  /**
+   * Удаляет узлы и связанные с ними связи из графа
+   * @param nodeIds Массив идентификаторов узлов для удаления
+   */
+  removeNodes: (nodeIds: (string | number)[]) => void;
+}
 
 export interface Graph2DProps {
-  graphData?: GraphData;
-  linkSource?: string;
-  linkTarget?: string;
+  graphData: GraphData;
   loading?: boolean;
 
   // Container layout
-  width?: number;
-  height?: number;
-
-  //custom node rendering
-  config?: {
-    fontSize: number;
-    maxZoom: number;
-    nodeSizeBase: number;
-    nodeAreaFactor: number;
-    textPaddingFactor: number;
-    gridSpacing: number;
-    dotSize: number;
-  };
+  width: number;
+  height: number;
+
+  // Button controls
+  buttons?: NodeButton[];
+
+  // Event handlers
   onNodeClick?: (node: NodeObject) => void;
-  onLinkClick?: (link: NodeObject) => void;
-  onNodeHover?: (node: NodeObject | null) => void;
-  onLinkHover?: (link: NodeObject | null) => void;
   onBackgroundClick?: () => void;
-  onClickLoadNodes?: (node: NodeObject) => void;
+  onNodeHover?: (node: NodeObject | null) => void;
+}
+
+export interface NodeButton {
+  img: string;
+  hoverImg: string;
+  onClick: (node: NodeObject) => void;
 }
+
+export type GraphData<NodeType = {}, LinkType = {}> = {
+  nodes: NodeObject<NodeType>[];
+  links: LinkObject<NodeType, LinkType>[];
+};
+
+export type NodeObject<NodeType = {}> = NodeType & {
+  id?: string | number;
+  x?: number;
+  y?: number;
+  vx?: number;
+  vy?: number;
+  fx?: number;
+  fy?: number;
+  [others: string]: any;
+};
+
+export type LinkObject<NodeType = {}, LinkType = {}> = LinkType & {
+  source: string | number | NodeObject<NodeType>;
+  target: string | number | NodeObject<NodeType>;
+  [others: string]: any;
+};

package/src/Theme/themes/dark.ts

@@ -579,6 +579,7 @@ export const darkThemePx: Theme = {
         borderRadius: 0,
         iconSize: 14,
         height: 'auto',
+        lineHeight: 16,
       },
       small: {
         fontSize: 14,
@@ -587,6 +588,7 @@ export const darkThemePx: Theme = {
         borderRadius: 5,
         iconSize: 14,
         height: 40,
+        lineHeight: 16,
       },
       medium: {
         fontSize: 16,
@@ -595,6 +597,7 @@ export const darkThemePx: Theme = {
         borderRadius: 5,
         iconSize: 16,
         height: 40,
+        lineHeight: 18,
       },
     },
     outlined: {
@@ -680,6 +683,7 @@ export const darkThemePx: Theme = {
   graph2D: {
     ring: {
       highlightFill: 'rgba(0, 90, 255, 0.3)',
+      selectionFill: 'rgba(0, 90, 255, 0.5)',
     },
     button: {
       stroke: '#1A1A1A',

package/src/Theme/themes/light.ts

@@ -578,6 +578,7 @@ export const lightThemePx: Theme = {
         borderRadius: 0,
         iconSize: 14,
         height: 'auto',
+        lineHeight: 16,
       },
       small: {
         fontSize: 14,
@@ -586,6 +587,7 @@ export const lightThemePx: Theme = {
         borderRadius: 5,
         iconSize: 14,
         height: 40,
+        lineHeight: 16,
       },
       medium: {
         fontSize: 16,
@@ -594,6 +596,7 @@ export const lightThemePx: Theme = {
         borderRadius: 5,
         iconSize: 16,
         height: 40,
+        lineHeight: 18,
       },
     },
     outlined: {
@@ -679,6 +682,7 @@ export const lightThemePx: Theme = {
   graph2D: {
     ring: {
       highlightFill: 'rgba(255, 165, 0, 0.3)',
+      selectionFill: 'rgba(0, 66, 236, 0.3)',
     },
     button: {
       stroke: '#e5e5e5',

package/src/Theme/types.ts

@@ -54,6 +54,7 @@ export type InputSizeStyle = {
   borderRadius: number | string;
   iconSize: number | string;
   height: number | string;
+  lineHeight: number;
 };
 
 // Тип для палітри
@@ -211,6 +212,7 @@ export type Theme = {
   graph2D: {
     ring: {
       highlightFill: string;
+      selectionFill: string;
     };
     button: {
       stroke: string;

package/src/Theme/utils.ts

@@ -73,6 +73,16 @@ export const pxToRem = (pxValue: number | string, baseSize: number = 16): string
   return `${remValue}rem`;
 };
 
+export const remToPx = (remValue: number | string, baseSize: number = 16): number => {
+  // If remValue is a string with 'rem' suffix, extract the numeric value
+  const numericValue = typeof remValue === 'string' ? parseFloat(remValue.replace('rem', '')) : remValue;
+  if (isNaN(numericValue)) {
+    return 0;
+  }
+
+  return numericValue * baseSize;
+};
+
 const IGNORE_CONVERT_KEYS: Record<string, string[] | boolean> = {
   contextMenu: ['padding'],
   baseSize: true,