@cyber-harbour/ui 1.0.45 → 1.0.46

package/dist/index.d.mts

@@ -6,7 +6,6 @@ import { CSSProperties, DefaultTheme, WebTarget } from 'styled-components';
 import * as styled_components_dist_types from 'styled-components/dist/types';
 import { DefaultTheme as DefaultTheme$1 } from 'styled-components/dist/types';
 import { PopoverPosition, PopoverAlign } from 'react-tiny-popover';
-import { GraphData, NodeObject } from 'react-force-graph-2d';
 
 declare const GlobalStyle: react.NamedExoticComponent<styled_components.ExecutionProps & object>;
 
@@ -217,6 +216,7 @@ type Theme = {
     graph2D: {
         ring: {
             highlightFill: string;
+            selectionFill: string;
         };
         button: {
             stroke: string;
@@ -838,31 +838,68 @@ type ContainerProps = FabricComponent<{
 }>;
 declare const Container: ({ maxWidth, ...props }: ContainerProps) => react_jsx_runtime.JSX.Element;
 
+declare const Graph2D: any;
+
+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;
+}
 interface Graph2DProps {
-    graphData?: GraphData;
-    linkSource?: string;
-    linkTarget?: string;
+    graphData: GraphData;
     loading?: boolean;
-    width?: number;
-    height?: number;
-    config?: {
-        fontSize: number;
-        maxZoom: number;
-        nodeSizeBase: number;
-        nodeAreaFactor: number;
-        textPaddingFactor: number;
-        gridSpacing: number;
-        dotSize: number;
-    };
+    width: number;
+    height: number;
+    buttons?: NodeButton[];
     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;
 }
-
-declare const Graph2D: ({ graphData, width, height, linkTarget, linkSource, loading, config, onNodeClick, onNodeHover, onLinkHover, onLinkClick, onBackgroundClick, onClickLoadNodes, }: Graph2DProps) => react_jsx_runtime.JSX.Element;
+interface NodeButton {
+    img: string;
+    hoverImg: string;
+    onClick: (node: NodeObject) => void;
+}
+type GraphData<NodeType = {}, LinkType = {}> = {
+    nodes: NodeObject<NodeType>[];
+    links: LinkObject<NodeType, LinkType>[];
+};
+type NodeObject<NodeType = {}> = NodeType & {
+    id?: string | number;
+    x?: number;
+    y?: number;
+    vx?: number;
+    vy?: number;
+    fx?: number;
+    fy?: number;
+    [others: string]: any;
+};
+type LinkObject<NodeType = {}, LinkType = {}> = LinkType & {
+    source: string | number | NodeObject<NodeType>;
+    target: string | number | NodeObject<NodeType>;
+    [others: string]: any;
+};
 
 interface FullscreenCardProps {
     children: any;
@@ -876,4 +913,4 @@ interface FullscreenCardProps {
 }
 declare const FullscreenCard: ({ isActive, position, top, left, right, bottom, ...props }: FullscreenCardProps) => react_jsx_runtime.JSX.Element;
 
-export { type Action, AlertIcon, ApiIcon, ArrowCircleTopRightIcon, ArrowRightIcon, BallsMenu, Box, type Breakpoint, BugReportIcon, Button, type ButtonColor, type ButtonElementStyle, type ButtonProps, type ButtonSize, type ButtonSizeStyle, type ButtonState, type ButtonVariant, CalendarIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CloseCircleIcon, ClosedLockIcon, type ColorVariant, type ColumnTable, Container, ContextMenu, ContextMenuDelimiter, CrossIcon, DataSetsIcon, DeepSearchIcon, DisabledVisibleIcon, DocsIcon, DownloadIcon, EditUserIcon, EmptyData, type EmptyDataProps, EnableVisibleIcon, EnterArrowLeftIcon, type FabricComponent, FiltersIcon, FlexContainer, FlexItem, FullscreenCard, GlobalStyle, Graph2D, type Graph2DProps, Header, HeaderDelimeter, HeaderSection, HomepageIcon, InfoCircleFilledIcon, InfoCircleIcon, Input, type InputElementProps, type InputElementStyle, type InputProps, type InputSize, type InputSizeStyle, type InputState, type InputVariant, Line, ListMenu, ListMenuItem, type ListMenuItemAnchorProps, type ListMenuItemBase, type ListMenuItemButtonProps, type ListMenuItemProps, type ListMenuProps, ListMenuSection, type ListMenuSectionProps, MapRadarIcon, MaximizeIcon, MoonIcon, type NestedColorPaths, OpenLockIcon, OrganizationIcon, PageLayout, Pagination, type PaginationProps, PasswordFinderIcon, PhonebookIcon, PlusIcon, PrintIcon, Profiler2Icon, ProfilerIcon, type RenderCellProps, type RenderHeaderCellProps, RowActionsMenu, SandBoxIcon, SearchIcon, Select, Sidebar, SidebarContext, SidebarDelimeter, SidebarItem, type SidebarItemProps, type SidebarProps, SidebarSection, type SidebarSectionProps, StatisticIcon, StyledContainer, SunIcon, Table, type TextAreaElementProps, type Theme, type ThemeMode, ThemeProvider, Typography, type TypographyVariant, UnfoldIcon, UpRightArrowCircleIcon, UsersIcon, VectorIcon, convertPaletteToRem, createComponent, darkTheme, darkThemePx, getBreakpoint, getButtonSizeStyles, getButtonStyles, getInputStyles, getTypographyStyles, lightTheme, lightThemePx, pxToRem, remToPx, resolveThemeColor, useContextMenuControl };
+export { type Action, AlertIcon, ApiIcon, ArrowCircleTopRightIcon, ArrowRightIcon, BallsMenu, Box, type Breakpoint, BugReportIcon, Button, type ButtonColor, type ButtonElementStyle, type ButtonProps, type ButtonSize, type ButtonSizeStyle, type ButtonState, type ButtonVariant, CalendarIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CloseCircleIcon, ClosedLockIcon, type ColorVariant, type ColumnTable, Container, ContextMenu, ContextMenuDelimiter, CrossIcon, DataSetsIcon, DeepSearchIcon, DisabledVisibleIcon, DocsIcon, DownloadIcon, EditUserIcon, EmptyData, type EmptyDataProps, EnableVisibleIcon, EnterArrowLeftIcon, type FabricComponent, FiltersIcon, FlexContainer, FlexItem, FullscreenCard, GlobalStyle, Graph2D, type Graph2DProps, type Graph2DRef, type GraphData, Header, HeaderDelimeter, HeaderSection, HomepageIcon, InfoCircleFilledIcon, InfoCircleIcon, Input, type InputElementProps, type InputElementStyle, type InputProps, type InputSize, type InputSizeStyle, type InputState, type InputVariant, Line, type LinkObject, ListMenu, ListMenuItem, type ListMenuItemAnchorProps, type ListMenuItemBase, type ListMenuItemButtonProps, type ListMenuItemProps, type ListMenuProps, ListMenuSection, type ListMenuSectionProps, MapRadarIcon, MaximizeIcon, MoonIcon, type NestedColorPaths, type NodeButton, type NodeObject, OpenLockIcon, OrganizationIcon, PageLayout, Pagination, type PaginationProps, PasswordFinderIcon, PhonebookIcon, PlusIcon, PrintIcon, Profiler2Icon, ProfilerIcon, type RenderCellProps, type RenderHeaderCellProps, RowActionsMenu, SandBoxIcon, SearchIcon, Select, Sidebar, SidebarContext, SidebarDelimeter, SidebarItem, type SidebarItemProps, type SidebarProps, SidebarSection, type SidebarSectionProps, StatisticIcon, StyledContainer, SunIcon, Table, type TextAreaElementProps, type Theme, type ThemeMode, ThemeProvider, Typography, type TypographyVariant, UnfoldIcon, UpRightArrowCircleIcon, UsersIcon, VectorIcon, convertPaletteToRem, createComponent, darkTheme, darkThemePx, getBreakpoint, getButtonSizeStyles, getButtonStyles, getInputStyles, getTypographyStyles, lightTheme, lightThemePx, pxToRem, remToPx, resolveThemeColor, useContextMenuControl };

package/dist/index.d.ts

@@ -6,7 +6,6 @@ import { CSSProperties, DefaultTheme, WebTarget } from 'styled-components';
 import * as styled_components_dist_types from 'styled-components/dist/types';
 import { DefaultTheme as DefaultTheme$1 } from 'styled-components/dist/types';
 import { PopoverPosition, PopoverAlign } from 'react-tiny-popover';
-import { GraphData, NodeObject } from 'react-force-graph-2d';
 
 declare const GlobalStyle: react.NamedExoticComponent<styled_components.ExecutionProps & object>;
 
@@ -217,6 +216,7 @@ type Theme = {
     graph2D: {
         ring: {
             highlightFill: string;
+            selectionFill: string;
         };
         button: {
             stroke: string;
@@ -838,31 +838,68 @@ type ContainerProps = FabricComponent<{
 }>;
 declare const Container: ({ maxWidth, ...props }: ContainerProps) => react_jsx_runtime.JSX.Element;
 
+declare const Graph2D: any;
+
+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;
+}
 interface Graph2DProps {
-    graphData?: GraphData;
-    linkSource?: string;
-    linkTarget?: string;
+    graphData: GraphData;
     loading?: boolean;
-    width?: number;
-    height?: number;
-    config?: {
-        fontSize: number;
-        maxZoom: number;
-        nodeSizeBase: number;
-        nodeAreaFactor: number;
-        textPaddingFactor: number;
-        gridSpacing: number;
-        dotSize: number;
-    };
+    width: number;
+    height: number;
+    buttons?: NodeButton[];
     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;
 }
-
-declare const Graph2D: ({ graphData, width, height, linkTarget, linkSource, loading, config, onNodeClick, onNodeHover, onLinkHover, onLinkClick, onBackgroundClick, onClickLoadNodes, }: Graph2DProps) => react_jsx_runtime.JSX.Element;
+interface NodeButton {
+    img: string;
+    hoverImg: string;
+    onClick: (node: NodeObject) => void;
+}
+type GraphData<NodeType = {}, LinkType = {}> = {
+    nodes: NodeObject<NodeType>[];
+    links: LinkObject<NodeType, LinkType>[];
+};
+type NodeObject<NodeType = {}> = NodeType & {
+    id?: string | number;
+    x?: number;
+    y?: number;
+    vx?: number;
+    vy?: number;
+    fx?: number;
+    fy?: number;
+    [others: string]: any;
+};
+type LinkObject<NodeType = {}, LinkType = {}> = LinkType & {
+    source: string | number | NodeObject<NodeType>;
+    target: string | number | NodeObject<NodeType>;
+    [others: string]: any;
+};
 
 interface FullscreenCardProps {
     children: any;
@@ -876,4 +913,4 @@ interface FullscreenCardProps {
 }
 declare const FullscreenCard: ({ isActive, position, top, left, right, bottom, ...props }: FullscreenCardProps) => react_jsx_runtime.JSX.Element;
 
-export { type Action, AlertIcon, ApiIcon, ArrowCircleTopRightIcon, ArrowRightIcon, BallsMenu, Box, type Breakpoint, BugReportIcon, Button, type ButtonColor, type ButtonElementStyle, type ButtonProps, type ButtonSize, type ButtonSizeStyle, type ButtonState, type ButtonVariant, CalendarIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CloseCircleIcon, ClosedLockIcon, type ColorVariant, type ColumnTable, Container, ContextMenu, ContextMenuDelimiter, CrossIcon, DataSetsIcon, DeepSearchIcon, DisabledVisibleIcon, DocsIcon, DownloadIcon, EditUserIcon, EmptyData, type EmptyDataProps, EnableVisibleIcon, EnterArrowLeftIcon, type FabricComponent, FiltersIcon, FlexContainer, FlexItem, FullscreenCard, GlobalStyle, Graph2D, type Graph2DProps, Header, HeaderDelimeter, HeaderSection, HomepageIcon, InfoCircleFilledIcon, InfoCircleIcon, Input, type InputElementProps, type InputElementStyle, type InputProps, type InputSize, type InputSizeStyle, type InputState, type InputVariant, Line, ListMenu, ListMenuItem, type ListMenuItemAnchorProps, type ListMenuItemBase, type ListMenuItemButtonProps, type ListMenuItemProps, type ListMenuProps, ListMenuSection, type ListMenuSectionProps, MapRadarIcon, MaximizeIcon, MoonIcon, type NestedColorPaths, OpenLockIcon, OrganizationIcon, PageLayout, Pagination, type PaginationProps, PasswordFinderIcon, PhonebookIcon, PlusIcon, PrintIcon, Profiler2Icon, ProfilerIcon, type RenderCellProps, type RenderHeaderCellProps, RowActionsMenu, SandBoxIcon, SearchIcon, Select, Sidebar, SidebarContext, SidebarDelimeter, SidebarItem, type SidebarItemProps, type SidebarProps, SidebarSection, type SidebarSectionProps, StatisticIcon, StyledContainer, SunIcon, Table, type TextAreaElementProps, type Theme, type ThemeMode, ThemeProvider, Typography, type TypographyVariant, UnfoldIcon, UpRightArrowCircleIcon, UsersIcon, VectorIcon, convertPaletteToRem, createComponent, darkTheme, darkThemePx, getBreakpoint, getButtonSizeStyles, getButtonStyles, getInputStyles, getTypographyStyles, lightTheme, lightThemePx, pxToRem, remToPx, resolveThemeColor, useContextMenuControl };
+export { type Action, AlertIcon, ApiIcon, ArrowCircleTopRightIcon, ArrowRightIcon, BallsMenu, Box, type Breakpoint, BugReportIcon, Button, type ButtonColor, type ButtonElementStyle, type ButtonProps, type ButtonSize, type ButtonSizeStyle, type ButtonState, type ButtonVariant, CalendarIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CloseCircleIcon, ClosedLockIcon, type ColorVariant, type ColumnTable, Container, ContextMenu, ContextMenuDelimiter, CrossIcon, DataSetsIcon, DeepSearchIcon, DisabledVisibleIcon, DocsIcon, DownloadIcon, EditUserIcon, EmptyData, type EmptyDataProps, EnableVisibleIcon, EnterArrowLeftIcon, type FabricComponent, FiltersIcon, FlexContainer, FlexItem, FullscreenCard, GlobalStyle, Graph2D, type Graph2DProps, type Graph2DRef, type GraphData, Header, HeaderDelimeter, HeaderSection, HomepageIcon, InfoCircleFilledIcon, InfoCircleIcon, Input, type InputElementProps, type InputElementStyle, type InputProps, type InputSize, type InputSizeStyle, type InputState, type InputVariant, Line, type LinkObject, ListMenu, ListMenuItem, type ListMenuItemAnchorProps, type ListMenuItemBase, type ListMenuItemButtonProps, type ListMenuItemProps, type ListMenuProps, ListMenuSection, type ListMenuSectionProps, MapRadarIcon, MaximizeIcon, MoonIcon, type NestedColorPaths, type NodeButton, type NodeObject, OpenLockIcon, OrganizationIcon, PageLayout, Pagination, type PaginationProps, PasswordFinderIcon, PhonebookIcon, PlusIcon, PrintIcon, Profiler2Icon, ProfilerIcon, type RenderCellProps, type RenderHeaderCellProps, RowActionsMenu, SandBoxIcon, SearchIcon, Select, Sidebar, SidebarContext, SidebarDelimeter, SidebarItem, type SidebarItemProps, type SidebarProps, SidebarSection, type SidebarSectionProps, StatisticIcon, StyledContainer, SunIcon, Table, type TextAreaElementProps, type Theme, type ThemeMode, ThemeProvider, Typography, type TypographyVariant, UnfoldIcon, UpRightArrowCircleIcon, UsersIcon, VectorIcon, convertPaletteToRem, createComponent, darkTheme, darkThemePx, getBreakpoint, getButtonSizeStyles, getButtonStyles, getInputStyles, getTypographyStyles, lightTheme, lightThemePx, pxToRem, remToPx, resolveThemeColor, useContextMenuControl };