@cyber-harbour/ui 1.0.45 → 1.0.47

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

@@ -683,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

@@ -682,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

@@ -212,6 +212,7 @@ export type Theme = {
   graph2D: {
     ring: {
       highlightFill: string;
+      selectionFill: string;
     };
     button: {
       stroke: string;