polly-graph 0.2.5 → 0.2.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +3160 -20
- package/dist/index.css +196 -0
- package/dist/index.d.cts +970 -16
- package/dist/index.d.ts +970 -16
- package/dist/index.js +3153 -20
- package/package.json +1 -1
package/dist/index.d.ts
CHANGED
|
@@ -233,11 +233,11 @@ type UIColors = typeof DEFAULT_COLORS.ui;
|
|
|
233
233
|
* Consolidated icons used across V1, V2, and demo
|
|
234
234
|
*/
|
|
235
235
|
declare const icons: {
|
|
236
|
-
readonly fit:
|
|
237
|
-
readonly reset:
|
|
238
|
-
readonly plus:
|
|
239
|
-
readonly minus:
|
|
240
|
-
readonly caret:
|
|
236
|
+
readonly fit: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M5 9V5H9\" />\n <path d=\"M19 9V5H15\" />\n <path d=\"M5 15V19H9\" />\n <path d=\"M19 15V19H15\" />\n</svg>";
|
|
237
|
+
readonly reset: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M20 12a8 8 0 1 1-2.3-5.7\" />\n <path d=\"M20 4.5v4h-4\" />\n</svg>";
|
|
238
|
+
readonly plus: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M5 12h14m-7-7v14\" />\n</svg>";
|
|
239
|
+
readonly minus: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M5 12h14\" />\n</svg>";
|
|
240
|
+
readonly caret: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M6 9l6 6 6-6\" />\n</svg>";
|
|
241
241
|
};
|
|
242
242
|
declare const iconSvg: {
|
|
243
243
|
readonly fit: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M5 9V5H9\" />\n <path d=\"M19 9V5H15\" />\n <path d=\"M5 15V19H9\" />\n <path d=\"M19 15V19H15\" />\n </svg>";
|
|
@@ -261,12 +261,12 @@ interface Coordinates {
|
|
|
261
261
|
}
|
|
262
262
|
type Position = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
|
|
263
263
|
type Orientation = 'vertical' | 'horizontal';
|
|
264
|
-
type GraphControlsPosition = Position;
|
|
265
|
-
type GraphControlsOrientation = Orientation;
|
|
266
|
-
interface GraphControlsConfig {
|
|
264
|
+
type GraphControlsPosition$1 = Position;
|
|
265
|
+
type GraphControlsOrientation$1 = Orientation;
|
|
266
|
+
interface GraphControlsConfig$1 {
|
|
267
267
|
readonly enabled: boolean;
|
|
268
|
-
readonly position?: GraphControlsPosition;
|
|
269
|
-
readonly orientation?: GraphControlsOrientation;
|
|
268
|
+
readonly position?: GraphControlsPosition$1;
|
|
269
|
+
readonly orientation?: GraphControlsOrientation$1;
|
|
270
270
|
readonly offset?: Coordinates;
|
|
271
271
|
readonly show?: {
|
|
272
272
|
readonly zoomIn?: boolean;
|
|
@@ -342,7 +342,7 @@ interface BaseGraphConfig {
|
|
|
342
342
|
readonly responsive?: boolean;
|
|
343
343
|
readonly simulation?: SimulationConfig;
|
|
344
344
|
readonly interaction?: GraphInteractionConfig;
|
|
345
|
-
readonly controls?: GraphControlsConfig;
|
|
345
|
+
readonly controls?: GraphControlsConfig$1;
|
|
346
346
|
readonly legend?: LegendConfig;
|
|
347
347
|
}
|
|
348
348
|
interface ControlsController {
|
|
@@ -380,7 +380,7 @@ interface V2Link extends SimulationLinkDatum<V2Node> {
|
|
|
380
380
|
__indexColor?: string;
|
|
381
381
|
__indexColorRGB?: [number, number, number];
|
|
382
382
|
}
|
|
383
|
-
interface InteractionConfig {
|
|
383
|
+
interface InteractionConfig$1 {
|
|
384
384
|
readonly hover?: HoverInteractionConfig;
|
|
385
385
|
readonly selection?: SelectionInteractionConfig;
|
|
386
386
|
readonly highlight?: HighlightInteractionConfig;
|
|
@@ -392,8 +392,8 @@ interface V2Config {
|
|
|
392
392
|
width?: number;
|
|
393
393
|
height?: number;
|
|
394
394
|
backgroundColor?: string;
|
|
395
|
-
interaction?: InteractionConfig;
|
|
396
|
-
controls?: GraphControlsConfig;
|
|
395
|
+
interaction?: InteractionConfig$1;
|
|
396
|
+
controls?: GraphControlsConfig$1;
|
|
397
397
|
legend?: LegendConfig;
|
|
398
398
|
autoFitView?: boolean;
|
|
399
399
|
cooldownTime?: number;
|
|
@@ -1306,7 +1306,7 @@ declare class Renderer {
|
|
|
1306
1306
|
initialize(config: {
|
|
1307
1307
|
nodes: V2Node[];
|
|
1308
1308
|
links: V2Link[];
|
|
1309
|
-
interaction?: InteractionConfig;
|
|
1309
|
+
interaction?: InteractionConfig$1;
|
|
1310
1310
|
}, canvasState: CanvasState, hoverManager: HoverManager, selectionManager?: SelectionManager): void;
|
|
1311
1311
|
/**
|
|
1312
1312
|
* Initialize the optimized z-index renderer with all required dependencies
|
|
@@ -1608,4 +1608,958 @@ declare class V2Graph implements V2Instance {
|
|
|
1608
1608
|
*/
|
|
1609
1609
|
declare function createV2Graph(config: V2Config): V2Instance;
|
|
1610
1610
|
|
|
1611
|
-
|
|
1611
|
+
/**
|
|
1612
|
+
* Force-Graph Wrapper Types
|
|
1613
|
+
*
|
|
1614
|
+
* Minimal overhead generic types with strategic use of 'any'
|
|
1615
|
+
* for force-graph library integration
|
|
1616
|
+
*/
|
|
1617
|
+
/**
|
|
1618
|
+
* Base node interface with generic data payload
|
|
1619
|
+
*/
|
|
1620
|
+
interface ForceGraphNode<T = Record<string, unknown>> {
|
|
1621
|
+
/** Unique identifier for the node */
|
|
1622
|
+
id: string;
|
|
1623
|
+
/** Optional custom data payload */
|
|
1624
|
+
data?: T;
|
|
1625
|
+
/** Position coordinates (managed by physics simulation) */
|
|
1626
|
+
x?: number;
|
|
1627
|
+
y?: number;
|
|
1628
|
+
vx?: number;
|
|
1629
|
+
vy?: number;
|
|
1630
|
+
/** Node properties for force-graph compatibility */
|
|
1631
|
+
[key: string]: unknown;
|
|
1632
|
+
}
|
|
1633
|
+
/**
|
|
1634
|
+
* Base link interface with generic data payload
|
|
1635
|
+
*/
|
|
1636
|
+
interface ForceGraphLink<NodeType = ForceGraphNode, T = Record<string, unknown>> {
|
|
1637
|
+
/** Source node reference - can be string ID or node object */
|
|
1638
|
+
source: string | NodeType;
|
|
1639
|
+
/** Target node reference - can be string ID or node object */
|
|
1640
|
+
target: string | NodeType;
|
|
1641
|
+
/** Optional custom data payload */
|
|
1642
|
+
data?: T;
|
|
1643
|
+
/** Link properties for force-graph compatibility */
|
|
1644
|
+
[key: string]: unknown;
|
|
1645
|
+
}
|
|
1646
|
+
/**
|
|
1647
|
+
* Graph data structure
|
|
1648
|
+
*/
|
|
1649
|
+
interface ForceGraphData<NodeType extends ForceGraphNode, LinkType extends ForceGraphLink<NodeType>> {
|
|
1650
|
+
nodes: NodeType[];
|
|
1651
|
+
links: LinkType[];
|
|
1652
|
+
}
|
|
1653
|
+
/**
|
|
1654
|
+
* Event handler types with proper generics
|
|
1655
|
+
*/
|
|
1656
|
+
type NodeEventHandler<NodeType> = (node: NodeType, event?: MouseEvent) => void;
|
|
1657
|
+
type LinkEventHandler<LinkType> = (link: LinkType, event?: MouseEvent) => void;
|
|
1658
|
+
type BackgroundEventHandler = (event: MouseEvent) => void;
|
|
1659
|
+
type CanvasRenderHandler = (ctx: CanvasRenderingContext2D, globalScale: number) => void;
|
|
1660
|
+
/**
|
|
1661
|
+
* Accessor types - can be property name or function
|
|
1662
|
+
*/
|
|
1663
|
+
type NodeAccessor<NodeType, ReturnType> = ReturnType | keyof NodeType | ((node: NodeType) => ReturnType);
|
|
1664
|
+
type LinkAccessor<LinkType, ReturnType> = ReturnType | keyof LinkType | ((link: LinkType) => ReturnType);
|
|
1665
|
+
/**
|
|
1666
|
+
* Common accessor return types
|
|
1667
|
+
*/
|
|
1668
|
+
type ColorAccessor<T> = T extends ForceGraphNode ? NodeAccessor<T, string> : T extends ForceGraphLink<unknown> ? LinkAccessor<T, string> : never;
|
|
1669
|
+
type NumberAccessor<T> = T extends ForceGraphNode ? NodeAccessor<T, number> : T extends ForceGraphLink<unknown> ? LinkAccessor<T, number> : never;
|
|
1670
|
+
type StringAccessor<T> = T extends ForceGraphNode ? NodeAccessor<T, string> : T extends ForceGraphLink<unknown> ? LinkAccessor<T, string> : never;
|
|
1671
|
+
type BooleanAccessor<T> = T extends ForceGraphNode ? NodeAccessor<T, boolean> : T extends ForceGraphLink<unknown> ? LinkAccessor<T, boolean> : never;
|
|
1672
|
+
/**
|
|
1673
|
+
* Canvas custom render modes for nodeCanvasObjectMode and linkCanvasObjectMode
|
|
1674
|
+
*/
|
|
1675
|
+
type CanvasCustomRenderMode = 'replace' | 'before' | 'after';
|
|
1676
|
+
/**
|
|
1677
|
+
* Force simulation configuration
|
|
1678
|
+
*/
|
|
1679
|
+
interface ForceConfig {
|
|
1680
|
+
/** D3 force simulation parameters */
|
|
1681
|
+
d3AlphaMin?: number;
|
|
1682
|
+
d3AlphaDecay?: number;
|
|
1683
|
+
d3VelocityDecay?: number;
|
|
1684
|
+
/** Simulation control */
|
|
1685
|
+
warmupTicks?: number;
|
|
1686
|
+
cooldownTicks?: number;
|
|
1687
|
+
cooldownTime?: number;
|
|
1688
|
+
}
|
|
1689
|
+
/**
|
|
1690
|
+
* Canvas configuration
|
|
1691
|
+
*/
|
|
1692
|
+
interface CanvasConfig {
|
|
1693
|
+
width?: number;
|
|
1694
|
+
height?: number;
|
|
1695
|
+
backgroundColor?: string;
|
|
1696
|
+
/** Zoom and pan controls */
|
|
1697
|
+
enableZoomInteraction?: boolean | ((event: MouseEvent) => boolean);
|
|
1698
|
+
enablePanInteraction?: boolean | ((event: MouseEvent) => boolean);
|
|
1699
|
+
minZoom?: number;
|
|
1700
|
+
maxZoom?: number;
|
|
1701
|
+
/** Rendering optimization */
|
|
1702
|
+
autoPauseRedraw?: boolean;
|
|
1703
|
+
}
|
|
1704
|
+
/**
|
|
1705
|
+
* Interaction configuration
|
|
1706
|
+
*/
|
|
1707
|
+
interface InteractionConfig<NodeType, LinkType> {
|
|
1708
|
+
/** Pointer interaction */
|
|
1709
|
+
enablePointerInteraction?: boolean;
|
|
1710
|
+
enableNodeDrag?: boolean;
|
|
1711
|
+
linkHoverPrecision?: number;
|
|
1712
|
+
/** Event handlers */
|
|
1713
|
+
onNodeClick?: NodeEventHandler<NodeType>;
|
|
1714
|
+
onNodeDoubleClick?: NodeEventHandler<NodeType>;
|
|
1715
|
+
onNodeRightClick?: NodeEventHandler<NodeType>;
|
|
1716
|
+
onNodeHover?: NodeEventHandler<NodeType>;
|
|
1717
|
+
onNodeDrag?: NodeEventHandler<NodeType>;
|
|
1718
|
+
onNodeDragEnd?: NodeEventHandler<NodeType>;
|
|
1719
|
+
onLinkClick?: LinkEventHandler<LinkType>;
|
|
1720
|
+
onLinkRightClick?: LinkEventHandler<LinkType>;
|
|
1721
|
+
onLinkHover?: LinkEventHandler<LinkType>;
|
|
1722
|
+
onBackgroundClick?: BackgroundEventHandler;
|
|
1723
|
+
onBackgroundRightClick?: BackgroundEventHandler;
|
|
1724
|
+
/** Canvas rendering hooks */
|
|
1725
|
+
onRenderFramePre?: CanvasRenderHandler;
|
|
1726
|
+
onRenderFramePost?: CanvasRenderHandler;
|
|
1727
|
+
}
|
|
1728
|
+
/**
|
|
1729
|
+
* Node styling configuration with generics
|
|
1730
|
+
*/
|
|
1731
|
+
interface NodeStylingConfig<NodeType> {
|
|
1732
|
+
/** Node appearance */
|
|
1733
|
+
nodeRelSize?: number;
|
|
1734
|
+
nodeId?: StringAccessor<NodeType>;
|
|
1735
|
+
nodeLabel?: StringAccessor<NodeType>;
|
|
1736
|
+
nodeVal?: NumberAccessor<NodeType>;
|
|
1737
|
+
nodeVisibility?: BooleanAccessor<NodeType>;
|
|
1738
|
+
nodeColor?: ColorAccessor<NodeType>;
|
|
1739
|
+
nodeAutoColorBy?: StringAccessor<NodeType>;
|
|
1740
|
+
/** Custom node rendering */
|
|
1741
|
+
nodeCanvasObjectMode?: NodeAccessor<NodeType, CanvasCustomRenderMode>;
|
|
1742
|
+
nodeCanvasObject?: (node: NodeType, ctx: CanvasRenderingContext2D, globalScale: number) => void;
|
|
1743
|
+
nodePointerAreaPaint?: (node: NodeType, color: string, ctx: CanvasRenderingContext2D, globalScale: number) => void;
|
|
1744
|
+
}
|
|
1745
|
+
/**
|
|
1746
|
+
* Link styling configuration with generics
|
|
1747
|
+
*/
|
|
1748
|
+
interface LinkStylingConfig<LinkType> {
|
|
1749
|
+
/** Link appearance */
|
|
1750
|
+
linkSource?: string;
|
|
1751
|
+
linkTarget?: string;
|
|
1752
|
+
linkLabel?: StringAccessor<LinkType>;
|
|
1753
|
+
linkVisibility?: BooleanAccessor<LinkType>;
|
|
1754
|
+
linkColor?: ColorAccessor<LinkType>;
|
|
1755
|
+
linkAutoColorBy?: StringAccessor<LinkType>;
|
|
1756
|
+
linkWidth?: NumberAccessor<LinkType>;
|
|
1757
|
+
linkLineDash?: LinkAccessor<LinkType, number[]>;
|
|
1758
|
+
linkCurvature?: NumberAccessor<LinkType>;
|
|
1759
|
+
/** Directional arrows */
|
|
1760
|
+
linkDirectionalArrowLength?: NumberAccessor<LinkType>;
|
|
1761
|
+
linkDirectionalArrowColor?: ColorAccessor<LinkType>;
|
|
1762
|
+
linkDirectionalArrowRelPos?: NumberAccessor<LinkType>;
|
|
1763
|
+
/** Directional particles */
|
|
1764
|
+
linkDirectionalParticles?: NumberAccessor<LinkType>;
|
|
1765
|
+
linkDirectionalParticleSpeed?: NumberAccessor<LinkType>;
|
|
1766
|
+
linkDirectionalParticleOffset?: NumberAccessor<LinkType>;
|
|
1767
|
+
linkDirectionalParticleWidth?: NumberAccessor<LinkType>;
|
|
1768
|
+
linkDirectionalParticleColor?: ColorAccessor<LinkType>;
|
|
1769
|
+
linkDirectionalParticleCanvasObject?: (link: LinkType, ctx: CanvasRenderingContext2D, globalScale: number) => void;
|
|
1770
|
+
/** Custom link rendering */
|
|
1771
|
+
linkCanvasObjectMode?: StringAccessor<LinkType>;
|
|
1772
|
+
linkCanvasObject?: (link: LinkType, ctx: CanvasRenderingContext2D, globalScale: number) => void;
|
|
1773
|
+
linkPointerAreaPaint?: (link: LinkType, color: string, ctx: CanvasRenderingContext2D, globalScale: number) => void;
|
|
1774
|
+
}
|
|
1775
|
+
/**
|
|
1776
|
+
* Performance targets for validation
|
|
1777
|
+
*/
|
|
1778
|
+
interface PerformanceTargets {
|
|
1779
|
+
creation: number;
|
|
1780
|
+
dataLoad: number;
|
|
1781
|
+
firstRender: number;
|
|
1782
|
+
render?: number;
|
|
1783
|
+
methodCall: number;
|
|
1784
|
+
memoryGrowth: number;
|
|
1785
|
+
}
|
|
1786
|
+
/**
|
|
1787
|
+
* Performance metrics collected during runtime
|
|
1788
|
+
*/
|
|
1789
|
+
interface PerformanceMetrics {
|
|
1790
|
+
creation: number;
|
|
1791
|
+
dataLoad: number;
|
|
1792
|
+
firstRender: number;
|
|
1793
|
+
render: number;
|
|
1794
|
+
memoryUsage: number;
|
|
1795
|
+
nodeCount: number;
|
|
1796
|
+
linkCount: number;
|
|
1797
|
+
methodCalls: number;
|
|
1798
|
+
optimizedForNodeCount: number;
|
|
1799
|
+
timestamp: number;
|
|
1800
|
+
}
|
|
1801
|
+
|
|
1802
|
+
/**
|
|
1803
|
+
* Force Graph Wrapper - Controls Component
|
|
1804
|
+
* Simple graph controls UI for zoom/pan/fit operations
|
|
1805
|
+
*/
|
|
1806
|
+
type GraphControlsPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
|
|
1807
|
+
type GraphControlsOrientation = 'vertical' | 'horizontal';
|
|
1808
|
+
interface GraphControlsConfig {
|
|
1809
|
+
readonly enabled: boolean;
|
|
1810
|
+
readonly position?: GraphControlsPosition;
|
|
1811
|
+
readonly orientation?: GraphControlsOrientation;
|
|
1812
|
+
readonly offset?: {
|
|
1813
|
+
x: number;
|
|
1814
|
+
y: number;
|
|
1815
|
+
};
|
|
1816
|
+
readonly show?: {
|
|
1817
|
+
readonly zoomIn?: boolean;
|
|
1818
|
+
readonly zoomOut?: boolean;
|
|
1819
|
+
readonly reset?: boolean;
|
|
1820
|
+
readonly fit?: boolean;
|
|
1821
|
+
};
|
|
1822
|
+
}
|
|
1823
|
+
|
|
1824
|
+
/**
|
|
1825
|
+
* Force Graph Wrapper - Legends Component
|
|
1826
|
+
* Graph legends UI showing node types with colored indicators
|
|
1827
|
+
*/
|
|
1828
|
+
type GraphLegendsPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
|
|
1829
|
+
interface GraphLegendsConfig {
|
|
1830
|
+
readonly enabled: boolean;
|
|
1831
|
+
readonly position?: GraphLegendsPosition;
|
|
1832
|
+
readonly offset?: {
|
|
1833
|
+
x: number;
|
|
1834
|
+
y: number;
|
|
1835
|
+
};
|
|
1836
|
+
readonly maxItems?: number;
|
|
1837
|
+
readonly showTitle?: boolean;
|
|
1838
|
+
readonly title?: string;
|
|
1839
|
+
}
|
|
1840
|
+
|
|
1841
|
+
/**
|
|
1842
|
+
* Configuration Types for Force-Graph Wrapper
|
|
1843
|
+
*
|
|
1844
|
+
* Complete configuration interface combining all aspects
|
|
1845
|
+
* of the force-graph wrapper functionality
|
|
1846
|
+
*/
|
|
1847
|
+
|
|
1848
|
+
/**
|
|
1849
|
+
* Complete configuration for Force-Graph Wrapper
|
|
1850
|
+
*/
|
|
1851
|
+
interface ForceGraphConfig<NodeType extends ForceGraphNode = ForceGraphNode, LinkType extends ForceGraphLink<NodeType> = ForceGraphLink<NodeType>> extends ForceConfig, CanvasConfig, InteractionConfig<NodeType, LinkType>, NodeStylingConfig<NodeType>, LinkStylingConfig<LinkType> {
|
|
1852
|
+
/** Container element */
|
|
1853
|
+
container: HTMLElement;
|
|
1854
|
+
/** Graph data */
|
|
1855
|
+
graphData?: ForceGraphData<NodeType, LinkType>;
|
|
1856
|
+
/** Performance monitoring */
|
|
1857
|
+
enablePerformanceMonitoring?: boolean;
|
|
1858
|
+
performanceTargets?: Partial<PerformanceTargets>;
|
|
1859
|
+
/** Page visibility handling for deterministic layouts */
|
|
1860
|
+
handlePageVisibility?: boolean;
|
|
1861
|
+
deterministicLayout?: boolean;
|
|
1862
|
+
/** Graph controls UI */
|
|
1863
|
+
controls?: GraphControlsConfig;
|
|
1864
|
+
/** Graph legends UI */
|
|
1865
|
+
legends?: GraphLegendsConfig;
|
|
1866
|
+
/** Lifecycle callbacks */
|
|
1867
|
+
onEngineTick?: () => void;
|
|
1868
|
+
onEngineStop?: () => void;
|
|
1869
|
+
onZoom?: (transform: {
|
|
1870
|
+
k: number;
|
|
1871
|
+
x: number;
|
|
1872
|
+
y: number;
|
|
1873
|
+
}) => void;
|
|
1874
|
+
onZoomEnd?: (transform: {
|
|
1875
|
+
k: number;
|
|
1876
|
+
x: number;
|
|
1877
|
+
y: number;
|
|
1878
|
+
}) => void;
|
|
1879
|
+
}
|
|
1880
|
+
/**
|
|
1881
|
+
* Minimal configuration for quick setup
|
|
1882
|
+
*/
|
|
1883
|
+
interface MinimalForceGraphConfig<NodeType extends ForceGraphNode = ForceGraphNode, LinkType extends ForceGraphLink<NodeType> = ForceGraphLink<NodeType>> {
|
|
1884
|
+
container: HTMLElement;
|
|
1885
|
+
graphData: ForceGraphData<NodeType, LinkType>;
|
|
1886
|
+
width?: number;
|
|
1887
|
+
height?: number;
|
|
1888
|
+
}
|
|
1889
|
+
/**
|
|
1890
|
+
* Performance-focused configuration
|
|
1891
|
+
*/
|
|
1892
|
+
interface PerformanceConfig {
|
|
1893
|
+
enablePerformanceMonitoring: true;
|
|
1894
|
+
autoPauseRedraw: boolean;
|
|
1895
|
+
warmupTicks: number;
|
|
1896
|
+
cooldownTime: number;
|
|
1897
|
+
performanceTargets: PerformanceTargets;
|
|
1898
|
+
}
|
|
1899
|
+
/**
|
|
1900
|
+
* Common presets for different use cases
|
|
1901
|
+
*/
|
|
1902
|
+
declare const ConfigPresets: {
|
|
1903
|
+
/**
|
|
1904
|
+
* High-performance preset for large graphs (5000+ nodes)
|
|
1905
|
+
*/
|
|
1906
|
+
readonly highPerformance: <NodeType extends ForceGraphNode, LinkType extends ForceGraphLink<NodeType>>() => Partial<ForceGraphConfig<NodeType, LinkType>>;
|
|
1907
|
+
/**
|
|
1908
|
+
* Interactive preset for medium graphs (50-1000 nodes)
|
|
1909
|
+
*/
|
|
1910
|
+
readonly interactive: <NodeType extends ForceGraphNode, LinkType extends ForceGraphLink<NodeType>>() => Partial<ForceGraphConfig<NodeType, LinkType>>;
|
|
1911
|
+
/**
|
|
1912
|
+
* Minimal preset for small graphs (5-50 nodes)
|
|
1913
|
+
*/
|
|
1914
|
+
readonly minimal: <NodeType extends ForceGraphNode, LinkType extends ForceGraphLink<NodeType>>() => Partial<ForceGraphConfig<NodeType, LinkType>>;
|
|
1915
|
+
};
|
|
1916
|
+
/**
|
|
1917
|
+
* Configuration builder for fluent API
|
|
1918
|
+
*/
|
|
1919
|
+
declare class ForceGraphConfigBuilder<NodeType extends ForceGraphNode = ForceGraphNode, LinkType extends ForceGraphLink<NodeType> = ForceGraphLink<NodeType>> {
|
|
1920
|
+
private config;
|
|
1921
|
+
constructor(container: HTMLElement);
|
|
1922
|
+
data(graphData: ForceGraphData<NodeType, LinkType>): this;
|
|
1923
|
+
size(width: number, height: number): this;
|
|
1924
|
+
performance(preset: 'highPerformance' | 'interactive' | 'minimal'): this;
|
|
1925
|
+
nodeColor(accessor: NodeStylingConfig<NodeType>['nodeColor']): this;
|
|
1926
|
+
onNodeClick(handler: NodeEventHandler<NodeType>): this;
|
|
1927
|
+
build(): ForceGraphConfig<NodeType, LinkType>;
|
|
1928
|
+
}
|
|
1929
|
+
|
|
1930
|
+
/**
|
|
1931
|
+
* Performance Monitor for Force-Graph Wrapper
|
|
1932
|
+
*
|
|
1933
|
+
* Built-in performance tracking to catch bottlenecks early
|
|
1934
|
+
* and prevent exponential complexity growth
|
|
1935
|
+
*/
|
|
1936
|
+
|
|
1937
|
+
declare class PerformanceMonitor {
|
|
1938
|
+
private metrics;
|
|
1939
|
+
private methodCallsDetailed;
|
|
1940
|
+
/**
|
|
1941
|
+
* Track execution time of any operation
|
|
1942
|
+
*/
|
|
1943
|
+
track<T>(operation: string, fn: () => T): T;
|
|
1944
|
+
/**
|
|
1945
|
+
* Set specific metric values
|
|
1946
|
+
*/
|
|
1947
|
+
setMetric(key: keyof PerformanceMetrics, value: number): void;
|
|
1948
|
+
/**
|
|
1949
|
+
* Get current metrics snapshot
|
|
1950
|
+
*/
|
|
1951
|
+
getMetrics(): PerformanceMetrics;
|
|
1952
|
+
/**
|
|
1953
|
+
* Get performance summary with statistics
|
|
1954
|
+
*/
|
|
1955
|
+
getSummary(): {
|
|
1956
|
+
averages: Record<string, number>;
|
|
1957
|
+
peaks: Record<string, number>;
|
|
1958
|
+
warnings: string[];
|
|
1959
|
+
nodeScaling: string;
|
|
1960
|
+
};
|
|
1961
|
+
/**
|
|
1962
|
+
* Reset all metrics
|
|
1963
|
+
*/
|
|
1964
|
+
reset(): void;
|
|
1965
|
+
/**
|
|
1966
|
+
* Log performance summary to console
|
|
1967
|
+
*/
|
|
1968
|
+
logSummary(): void;
|
|
1969
|
+
}
|
|
1970
|
+
|
|
1971
|
+
/**
|
|
1972
|
+
* Core methods available on force-graph instances
|
|
1973
|
+
* These mirror the methods from react-force-graph-2d
|
|
1974
|
+
*/
|
|
1975
|
+
interface ForceGraphMethods<NodeType extends ForceGraphNode = ForceGraphNode, LinkType extends ForceGraphLink<NodeType> = ForceGraphLink<NodeType>> {
|
|
1976
|
+
d3ReheatSimulation(): void;
|
|
1977
|
+
stopAnimation(): void;
|
|
1978
|
+
pauseAnimation(): void;
|
|
1979
|
+
resumeAnimation(): void;
|
|
1980
|
+
centerAt(x: number, y: number, duration?: number): void;
|
|
1981
|
+
zoom(): number;
|
|
1982
|
+
zoom(scale: number, duration?: number): void;
|
|
1983
|
+
zoomToFit(padding?: number, duration?: number): void;
|
|
1984
|
+
screen2GraphCoords(screenX: number, screenY: number): {
|
|
1985
|
+
x: number;
|
|
1986
|
+
y: number;
|
|
1987
|
+
};
|
|
1988
|
+
graph2ScreenCoords(graphX: number, graphY: number): {
|
|
1989
|
+
x: number;
|
|
1990
|
+
y: number;
|
|
1991
|
+
};
|
|
1992
|
+
getGraphBbox(nodes?: NodeType[]): {
|
|
1993
|
+
x: [number, number];
|
|
1994
|
+
y: [number, number];
|
|
1995
|
+
};
|
|
1996
|
+
emitParticle(link: LinkType): void;
|
|
1997
|
+
d3Force(forceName: string): unknown;
|
|
1998
|
+
d3Force(forceName: string, forceImpl: unknown): ForceGraphInstance<NodeType, LinkType>;
|
|
1999
|
+
exportGraph(fileName?: string): Promise<void>;
|
|
2000
|
+
}
|
|
2001
|
+
/**
|
|
2002
|
+
* Configuration methods for fluent API
|
|
2003
|
+
*/
|
|
2004
|
+
interface ForceGraphConfigMethods<NodeType extends ForceGraphNode = ForceGraphNode, LinkType extends ForceGraphLink<NodeType> = ForceGraphLink<NodeType>> {
|
|
2005
|
+
graphData(): ForceGraphData<NodeType, LinkType>;
|
|
2006
|
+
graphData(data: ForceGraphData<NodeType, LinkType>): ForceGraphInstance<NodeType, LinkType>;
|
|
2007
|
+
width(): number;
|
|
2008
|
+
width(width: number): ForceGraphInstance<NodeType, LinkType>;
|
|
2009
|
+
height(): number;
|
|
2010
|
+
height(height: number): ForceGraphInstance<NodeType, LinkType>;
|
|
2011
|
+
backgroundColor(): string;
|
|
2012
|
+
backgroundColor(color: string): ForceGraphInstance<NodeType, LinkType>;
|
|
2013
|
+
nodeRelSize(): number;
|
|
2014
|
+
nodeRelSize(size: number): ForceGraphInstance<NodeType, LinkType>;
|
|
2015
|
+
nodeColor(): ColorAccessor<NodeType>;
|
|
2016
|
+
nodeColor(color: ColorAccessor<NodeType>): ForceGraphInstance<NodeType, LinkType>;
|
|
2017
|
+
nodeVal(): NumberAccessor<NodeType>;
|
|
2018
|
+
nodeVal(val: NumberAccessor<NodeType>): ForceGraphInstance<NodeType, LinkType>;
|
|
2019
|
+
nodeLabel(): StringAccessor<NodeType>;
|
|
2020
|
+
nodeLabel(label: StringAccessor<NodeType>): ForceGraphInstance<NodeType, LinkType>;
|
|
2021
|
+
nodeVisibility(): BooleanAccessor<NodeType>;
|
|
2022
|
+
nodeVisibility(visibility: BooleanAccessor<NodeType>): ForceGraphInstance<NodeType, LinkType>;
|
|
2023
|
+
nodeCanvasObjectMode(): NodeAccessor<NodeType, CanvasCustomRenderMode>;
|
|
2024
|
+
nodeCanvasObjectMode(mode: NodeAccessor<NodeType, CanvasCustomRenderMode>): ForceGraphInstance<NodeType, LinkType>;
|
|
2025
|
+
linkColor(): ColorAccessor<LinkType>;
|
|
2026
|
+
linkColor(color: ColorAccessor<LinkType>): ForceGraphInstance<NodeType, LinkType>;
|
|
2027
|
+
linkWidth(): NumberAccessor<LinkType>;
|
|
2028
|
+
linkWidth(width: NumberAccessor<LinkType>): ForceGraphInstance<NodeType, LinkType>;
|
|
2029
|
+
linkLabel(): StringAccessor<LinkType>;
|
|
2030
|
+
linkLabel(label: StringAccessor<LinkType>): ForceGraphInstance<NodeType, LinkType>;
|
|
2031
|
+
linkVisibility(): BooleanAccessor<LinkType>;
|
|
2032
|
+
linkVisibility(visibility: BooleanAccessor<LinkType>): ForceGraphInstance<NodeType, LinkType>;
|
|
2033
|
+
linkDirectionalArrowLength(): NumberAccessor<LinkType>;
|
|
2034
|
+
linkDirectionalArrowLength(length: NumberAccessor<LinkType>): ForceGraphInstance<NodeType, LinkType>;
|
|
2035
|
+
linkDirectionalArrowColor(): ColorAccessor<LinkType>;
|
|
2036
|
+
linkDirectionalArrowColor(color: ColorAccessor<LinkType>): ForceGraphInstance<NodeType, LinkType>;
|
|
2037
|
+
linkDirectionalArrowRelPos(): NumberAccessor<LinkType>;
|
|
2038
|
+
linkDirectionalArrowRelPos(position: NumberAccessor<LinkType>): ForceGraphInstance<NodeType, LinkType>;
|
|
2039
|
+
linkDirectionalParticles(): NumberAccessor<LinkType>;
|
|
2040
|
+
linkDirectionalParticles(particles: NumberAccessor<LinkType>): ForceGraphInstance<NodeType, LinkType>;
|
|
2041
|
+
linkDirectionalParticleSpeed(): NumberAccessor<LinkType>;
|
|
2042
|
+
linkDirectionalParticleSpeed(speed: NumberAccessor<LinkType>): ForceGraphInstance<NodeType, LinkType>;
|
|
2043
|
+
linkDirectionalParticleWidth(): NumberAccessor<LinkType>;
|
|
2044
|
+
linkDirectionalParticleWidth(width: NumberAccessor<LinkType>): ForceGraphInstance<NodeType, LinkType>;
|
|
2045
|
+
linkDirectionalParticleColor(): ColorAccessor<LinkType>;
|
|
2046
|
+
linkDirectionalParticleColor(color: ColorAccessor<LinkType>): ForceGraphInstance<NodeType, LinkType>;
|
|
2047
|
+
linkCurvature(): NumberAccessor<LinkType>;
|
|
2048
|
+
linkCurvature(curvature: NumberAccessor<LinkType>): ForceGraphInstance<NodeType, LinkType>;
|
|
2049
|
+
linkCanvasObjectMode(): StringAccessor<LinkType>;
|
|
2050
|
+
linkCanvasObjectMode(mode: StringAccessor<LinkType>): ForceGraphInstance<NodeType, LinkType>;
|
|
2051
|
+
onNodeClick(): NodeEventHandler<NodeType> | null;
|
|
2052
|
+
onNodeClick(handler: NodeEventHandler<NodeType> | null): ForceGraphInstance<NodeType, LinkType>;
|
|
2053
|
+
onNodeDoubleClick(): NodeEventHandler<NodeType> | null;
|
|
2054
|
+
onNodeDoubleClick(handler: NodeEventHandler<NodeType> | null): ForceGraphInstance<NodeType, LinkType>;
|
|
2055
|
+
onNodeHover(): NodeEventHandler<NodeType> | null;
|
|
2056
|
+
onNodeHover(handler: NodeEventHandler<NodeType> | null): ForceGraphInstance<NodeType, LinkType>;
|
|
2057
|
+
onLinkClick(): LinkEventHandler<LinkType> | null;
|
|
2058
|
+
onLinkClick(handler: LinkEventHandler<LinkType> | null): ForceGraphInstance<NodeType, LinkType>;
|
|
2059
|
+
onLinkHover(): LinkEventHandler<LinkType> | null;
|
|
2060
|
+
onLinkHover(handler: LinkEventHandler<LinkType> | null): ForceGraphInstance<NodeType, LinkType>;
|
|
2061
|
+
onRenderFramePre(): CanvasRenderHandler | null;
|
|
2062
|
+
onRenderFramePre(handler: CanvasRenderHandler | null): ForceGraphInstance<NodeType, LinkType>;
|
|
2063
|
+
onRenderFramePost(): CanvasRenderHandler | null;
|
|
2064
|
+
onRenderFramePost(handler: CanvasRenderHandler | null): ForceGraphInstance<NodeType, LinkType>;
|
|
2065
|
+
cooldownTime(): number;
|
|
2066
|
+
cooldownTime(time: number): ForceGraphInstance<NodeType, LinkType>;
|
|
2067
|
+
cooldownTicks(): number;
|
|
2068
|
+
cooldownTicks(ticks: number): ForceGraphInstance<NodeType, LinkType>;
|
|
2069
|
+
d3AlphaDecay(): number;
|
|
2070
|
+
d3AlphaDecay(decay: number): ForceGraphInstance<NodeType, LinkType>;
|
|
2071
|
+
d3AlphaMin(): number;
|
|
2072
|
+
d3AlphaMin(min: number): ForceGraphInstance<NodeType, LinkType>;
|
|
2073
|
+
d3VelocityDecay(): number;
|
|
2074
|
+
d3VelocityDecay(decay: number): ForceGraphInstance<NodeType, LinkType>;
|
|
2075
|
+
enableNodeDrag(): boolean;
|
|
2076
|
+
enableNodeDrag(enable: boolean): ForceGraphInstance<NodeType, LinkType>;
|
|
2077
|
+
enableZoomInteraction(): boolean;
|
|
2078
|
+
enableZoomInteraction(enable: boolean): ForceGraphInstance<NodeType, LinkType>;
|
|
2079
|
+
enablePanInteraction(): boolean;
|
|
2080
|
+
enablePanInteraction(enable: boolean): ForceGraphInstance<NodeType, LinkType>;
|
|
2081
|
+
autoPauseRedraw(): boolean;
|
|
2082
|
+
autoPauseRedraw(enable: boolean): ForceGraphInstance<NodeType, LinkType>;
|
|
2083
|
+
nodeCanvasObject(): ((node: NodeType, ctx: CanvasRenderingContext2D, globalScale: number) => void) | null;
|
|
2084
|
+
nodeCanvasObject(paintFunction: ((node: NodeType, ctx: CanvasRenderingContext2D, globalScale: number) => void) | null): ForceGraphInstance<NodeType, LinkType>;
|
|
2085
|
+
linkCanvasObject(): ((link: LinkType, ctx: CanvasRenderingContext2D, globalScale: number) => void) | null;
|
|
2086
|
+
linkCanvasObject(paintFunction: ((link: LinkType, ctx: CanvasRenderingContext2D, globalScale: number) => void) | null): ForceGraphInstance<NodeType, LinkType>;
|
|
2087
|
+
onEngineStop(): (() => void) | undefined;
|
|
2088
|
+
onEngineStop(handler: (() => void) | undefined): ForceGraphInstance<NodeType, LinkType>;
|
|
2089
|
+
onEngineTick(): (() => void) | undefined;
|
|
2090
|
+
onEngineTick(handler: (() => void) | undefined): ForceGraphInstance<NodeType, LinkType>;
|
|
2091
|
+
}
|
|
2092
|
+
/**
|
|
2093
|
+
* Performance monitoring methods
|
|
2094
|
+
*/
|
|
2095
|
+
interface ForceGraphPerformanceMethods {
|
|
2096
|
+
getPerformanceMetrics(): PerformanceMetrics;
|
|
2097
|
+
resetPerformanceMetrics(): void;
|
|
2098
|
+
logPerformanceSummary(): void;
|
|
2099
|
+
validatePerformance(): {
|
|
2100
|
+
passed: boolean;
|
|
2101
|
+
warnings: string[];
|
|
2102
|
+
recommendations: string[];
|
|
2103
|
+
};
|
|
2104
|
+
}
|
|
2105
|
+
/**
|
|
2106
|
+
* Complete Force-Graph instance interface
|
|
2107
|
+
*/
|
|
2108
|
+
interface ForceGraphInstance<NodeType extends ForceGraphNode = ForceGraphNode, LinkType extends ForceGraphLink<NodeType> = ForceGraphLink<NodeType>> extends ForceGraphMethods<NodeType, LinkType>, ForceGraphConfigMethods<NodeType, LinkType>, ForceGraphPerformanceMethods {
|
|
2109
|
+
render(): void;
|
|
2110
|
+
destroy(): void;
|
|
2111
|
+
triggerKapsuleUpdate(): void;
|
|
2112
|
+
_getForceGraphInstance(): unknown;
|
|
2113
|
+
}
|
|
2114
|
+
/**
|
|
2115
|
+
* Factory function type for creating instances
|
|
2116
|
+
*/
|
|
2117
|
+
interface CreateForceGraphFunction {
|
|
2118
|
+
<NodeType extends ForceGraphNode = ForceGraphNode, LinkType extends ForceGraphLink<NodeType> = ForceGraphLink<NodeType>>(container: HTMLElement): ForceGraphInstance<NodeType, LinkType>;
|
|
2119
|
+
}
|
|
2120
|
+
|
|
2121
|
+
/**
|
|
2122
|
+
* Step 4: Rendering Performance Monitor
|
|
2123
|
+
*
|
|
2124
|
+
* Monitors canvas rendering performance, frame rates, and optimization metrics
|
|
2125
|
+
* Target: 60fps @ 1000 nodes with smooth animations
|
|
2126
|
+
*/
|
|
2127
|
+
interface RenderingMetrics {
|
|
2128
|
+
fps: number;
|
|
2129
|
+
averageFps: number;
|
|
2130
|
+
frameTime: number;
|
|
2131
|
+
averageFrameTime: number;
|
|
2132
|
+
droppedFrames: number;
|
|
2133
|
+
renderCalls: number;
|
|
2134
|
+
canvasOperations: number;
|
|
2135
|
+
nodeCount: number;
|
|
2136
|
+
linkCount: number;
|
|
2137
|
+
lastMeasurement: number;
|
|
2138
|
+
renderingEfficiency: number;
|
|
2139
|
+
memoryUsage: number;
|
|
2140
|
+
}
|
|
2141
|
+
|
|
2142
|
+
/**
|
|
2143
|
+
* Force-Graph Wrapper - Main Implementation
|
|
2144
|
+
*
|
|
2145
|
+
* Framework-independent wrapper around the core force-graph library
|
|
2146
|
+
* with built-in performance monitoring and TypeScript generics
|
|
2147
|
+
*/
|
|
2148
|
+
|
|
2149
|
+
/**
|
|
2150
|
+
* Main Force-Graph Wrapper Class
|
|
2151
|
+
*
|
|
2152
|
+
* Step 1: Basic class structure with performance monitoring
|
|
2153
|
+
* Target: Creation time < 1ms
|
|
2154
|
+
*/
|
|
2155
|
+
declare class ForceGraphWrapper<NodeType extends ForceGraphNode = ForceGraphNode, LinkType extends ForceGraphLink<NodeType> = ForceGraphLink<NodeType>> implements ForceGraphInstance<NodeType, LinkType> {
|
|
2156
|
+
private forceGraph;
|
|
2157
|
+
private container;
|
|
2158
|
+
private performanceMonitor;
|
|
2159
|
+
private renderingMonitor;
|
|
2160
|
+
private canvasOptimizer;
|
|
2161
|
+
private config;
|
|
2162
|
+
private isInitialized;
|
|
2163
|
+
private isDestroyed;
|
|
2164
|
+
private isRenderingOptimized;
|
|
2165
|
+
private enableVerboseLogging;
|
|
2166
|
+
private wasInitializedHidden;
|
|
2167
|
+
private visibilityChangeHandler;
|
|
2168
|
+
private wasInitializedOutOfView;
|
|
2169
|
+
private intersectionObserver;
|
|
2170
|
+
private webWorkerPhysicsCompleted;
|
|
2171
|
+
private physicsTimeoutId;
|
|
2172
|
+
private lastKnownDimensions;
|
|
2173
|
+
private deferredFitViewParams;
|
|
2174
|
+
private pendingFitView;
|
|
2175
|
+
private performanceTestInterval;
|
|
2176
|
+
private canvasClickHandler;
|
|
2177
|
+
private exportTimeoutId;
|
|
2178
|
+
private visibilityTimeoutId;
|
|
2179
|
+
private intersectionTimeoutId;
|
|
2180
|
+
private kapsuleTimeoutId;
|
|
2181
|
+
private controlsInstance;
|
|
2182
|
+
private legendsInstance;
|
|
2183
|
+
/**
|
|
2184
|
+
* Helper method to safely cast and call methods on the force graph instance
|
|
2185
|
+
*/
|
|
2186
|
+
private getGraphInstance;
|
|
2187
|
+
/**
|
|
2188
|
+
* Constructor - Step 1 Performance Test
|
|
2189
|
+
* Target: < 1ms creation time
|
|
2190
|
+
*/
|
|
2191
|
+
constructor(container: HTMLElement, config?: Partial<ForceGraphConfig<NodeType, LinkType>>);
|
|
2192
|
+
/**
|
|
2193
|
+
* Step 1 Performance Validation
|
|
2194
|
+
*/
|
|
2195
|
+
private validateCreationPerformance;
|
|
2196
|
+
/**
|
|
2197
|
+
* Setup automatic page visibility handling for deterministic layouts
|
|
2198
|
+
* Ensures consistent graph layouts regardless of tab visibility during initialization
|
|
2199
|
+
*/
|
|
2200
|
+
private setupPageVisibilityHandling;
|
|
2201
|
+
/**
|
|
2202
|
+
* Cleanup page visibility handling
|
|
2203
|
+
*/
|
|
2204
|
+
private cleanupPageVisibilityHandling;
|
|
2205
|
+
/**
|
|
2206
|
+
* Setup deterministic physics handling for viewport visibility
|
|
2207
|
+
* Ensures consistent physics timing regardless of element visibility
|
|
2208
|
+
*/
|
|
2209
|
+
private setupDeterministicPhysics;
|
|
2210
|
+
/**
|
|
2211
|
+
* Find the scrollable parent container for intersection observer
|
|
2212
|
+
* Similar to Angular component approach but more generic
|
|
2213
|
+
*/
|
|
2214
|
+
private findScrollableParent;
|
|
2215
|
+
/**
|
|
2216
|
+
* Setup deferred fitView mechanism using IntersectionObserver
|
|
2217
|
+
* This handles library-level viewport-aware fitView
|
|
2218
|
+
*/
|
|
2219
|
+
private setupDeferredFitView;
|
|
2220
|
+
/**
|
|
2221
|
+
* Execute fitView immediately (bypass visibility checks)
|
|
2222
|
+
*/
|
|
2223
|
+
private executeFitViewNow;
|
|
2224
|
+
/**
|
|
2225
|
+
* Cleanup deferred fitView intersection observer
|
|
2226
|
+
*/
|
|
2227
|
+
private cleanupDeferredFitView;
|
|
2228
|
+
/**
|
|
2229
|
+
* Cleanup performance test interval
|
|
2230
|
+
*/
|
|
2231
|
+
private cleanupPerformanceTest;
|
|
2232
|
+
/**
|
|
2233
|
+
* Cleanup export animation timeout
|
|
2234
|
+
*/
|
|
2235
|
+
private cleanupExportTimeout;
|
|
2236
|
+
/**
|
|
2237
|
+
* Cleanup visibility-related timeouts
|
|
2238
|
+
*/
|
|
2239
|
+
private cleanupVisibilityTimeouts;
|
|
2240
|
+
/**
|
|
2241
|
+
* Cleanup canvas event listeners
|
|
2242
|
+
*/
|
|
2243
|
+
private cleanupCanvasEventListeners;
|
|
2244
|
+
/**
|
|
2245
|
+
* Check if element is currently visible (even partially) in viewport
|
|
2246
|
+
*/
|
|
2247
|
+
private isElementInViewport;
|
|
2248
|
+
/**
|
|
2249
|
+
* Cache container dimensions when they're valid (non-zero)
|
|
2250
|
+
*/
|
|
2251
|
+
private cacheContainerDimensions;
|
|
2252
|
+
/**
|
|
2253
|
+
* Check if container has valid dimensions and cache them
|
|
2254
|
+
*/
|
|
2255
|
+
private hasValidDimensions;
|
|
2256
|
+
/**
|
|
2257
|
+
* Run deterministic physics using Web Worker for off-screen graphs only
|
|
2258
|
+
*/
|
|
2259
|
+
private runWebWorkerPhysics;
|
|
2260
|
+
/**
|
|
2261
|
+
* Apply Web Worker results to force-graph instance WITHOUT disrupting interactions
|
|
2262
|
+
*/
|
|
2263
|
+
private applyWebWorkerResults;
|
|
2264
|
+
/**
|
|
2265
|
+
* Cleanup deterministic physics handling
|
|
2266
|
+
*/
|
|
2267
|
+
private cleanupDeterministicPhysics;
|
|
2268
|
+
/**
|
|
2269
|
+
* Initialize the underlying force-graph instance
|
|
2270
|
+
* Step 2: Data loading with performance validation
|
|
2271
|
+
* Target: Linear scaling, < 10ms per 1000 nodes
|
|
2272
|
+
*/
|
|
2273
|
+
private initializeForceGraph;
|
|
2274
|
+
/**
|
|
2275
|
+
* Apply configuration to force-graph instance
|
|
2276
|
+
* Step 2: Performance-optimized configuration application
|
|
2277
|
+
*/
|
|
2278
|
+
private applyConfiguration;
|
|
2279
|
+
/**
|
|
2280
|
+
* Step 2 Performance Validation for Initialization
|
|
2281
|
+
*/
|
|
2282
|
+
private validateInitializationPerformance;
|
|
2283
|
+
/**
|
|
2284
|
+
* Validate data loading performance based on node/link count
|
|
2285
|
+
* Step 2: Linear scaling validation
|
|
2286
|
+
*/
|
|
2287
|
+
private validateDataLoadingPerformance;
|
|
2288
|
+
d3ReheatSimulation(): void;
|
|
2289
|
+
stopAnimation(): void;
|
|
2290
|
+
pauseAnimation(): void;
|
|
2291
|
+
resumeAnimation(): void;
|
|
2292
|
+
centerAt(x: number, y: number, duration?: number): void;
|
|
2293
|
+
zoom(): number;
|
|
2294
|
+
zoom(scale: number, duration?: number): void;
|
|
2295
|
+
zoomToFit(padding?: number, duration?: number): void;
|
|
2296
|
+
screen2GraphCoords(screenX: number, screenY: number): {
|
|
2297
|
+
x: number;
|
|
2298
|
+
y: number;
|
|
2299
|
+
};
|
|
2300
|
+
graph2ScreenCoords(graphX: number, graphY: number): {
|
|
2301
|
+
x: number;
|
|
2302
|
+
y: number;
|
|
2303
|
+
};
|
|
2304
|
+
getGraphBbox(nodes?: NodeType[]): {
|
|
2305
|
+
x: [number, number];
|
|
2306
|
+
y: [number, number];
|
|
2307
|
+
};
|
|
2308
|
+
emitParticle(link: LinkType): void;
|
|
2309
|
+
d3Force(forceName: string): unknown;
|
|
2310
|
+
d3Force(forceName: string, forceImpl: unknown): ForceGraphInstance<NodeType, LinkType>;
|
|
2311
|
+
graphData(): ForceGraphData<NodeType, LinkType>;
|
|
2312
|
+
graphData(data: ForceGraphData<NodeType, LinkType>): ForceGraphInstance<NodeType, LinkType>;
|
|
2313
|
+
width(): number;
|
|
2314
|
+
width(width: number): ForceGraphInstance<NodeType, LinkType>;
|
|
2315
|
+
height(): number;
|
|
2316
|
+
height(height: number): ForceGraphInstance<NodeType, LinkType>;
|
|
2317
|
+
backgroundColor(): string;
|
|
2318
|
+
backgroundColor(color: string): ForceGraphInstance<NodeType, LinkType>;
|
|
2319
|
+
nodeColor(): ColorAccessor<NodeType>;
|
|
2320
|
+
nodeColor(color: ColorAccessor<NodeType>): ForceGraphInstance<NodeType, LinkType>;
|
|
2321
|
+
nodeVal(): NumberAccessor<NodeType>;
|
|
2322
|
+
nodeVal(val: NumberAccessor<NodeType>): ForceGraphInstance<NodeType, LinkType>;
|
|
2323
|
+
nodeRelSize(): number;
|
|
2324
|
+
nodeRelSize(size: number): ForceGraphInstance<NodeType, LinkType>;
|
|
2325
|
+
nodeLabel(): StringAccessor<NodeType>;
|
|
2326
|
+
nodeLabel(label: StringAccessor<NodeType>): ForceGraphInstance<NodeType, LinkType>;
|
|
2327
|
+
nodeVisibility(): BooleanAccessor<NodeType>;
|
|
2328
|
+
nodeVisibility(visibility: BooleanAccessor<NodeType>): ForceGraphInstance<NodeType, LinkType>;
|
|
2329
|
+
nodeCanvasObjectMode(): NodeAccessor<NodeType, CanvasCustomRenderMode>;
|
|
2330
|
+
nodeCanvasObjectMode(mode: NodeAccessor<NodeType, CanvasCustomRenderMode>): ForceGraphInstance<NodeType, LinkType>;
|
|
2331
|
+
linkColor(): ColorAccessor<LinkType>;
|
|
2332
|
+
linkColor(color: ColorAccessor<LinkType>): ForceGraphInstance<NodeType, LinkType>;
|
|
2333
|
+
linkWidth(): NumberAccessor<LinkType>;
|
|
2334
|
+
linkWidth(width: NumberAccessor<LinkType>): ForceGraphInstance<NodeType, LinkType>;
|
|
2335
|
+
linkLabel(): StringAccessor<LinkType>;
|
|
2336
|
+
linkLabel(label: StringAccessor<LinkType>): ForceGraphInstance<NodeType, LinkType>;
|
|
2337
|
+
linkVisibility(): BooleanAccessor<LinkType>;
|
|
2338
|
+
linkVisibility(visibility: BooleanAccessor<LinkType>): ForceGraphInstance<NodeType, LinkType>;
|
|
2339
|
+
linkDirectionalArrowLength(): NumberAccessor<LinkType>;
|
|
2340
|
+
linkDirectionalArrowLength(length: NumberAccessor<LinkType>): ForceGraphInstance<NodeType, LinkType>;
|
|
2341
|
+
linkDirectionalParticles(): NumberAccessor<LinkType>;
|
|
2342
|
+
linkDirectionalParticles(particles: NumberAccessor<LinkType>): ForceGraphInstance<NodeType, LinkType>;
|
|
2343
|
+
linkDirectionalArrowColor(): ColorAccessor<LinkType>;
|
|
2344
|
+
linkDirectionalArrowColor(color: ColorAccessor<LinkType>): ForceGraphInstance<NodeType, LinkType>;
|
|
2345
|
+
linkDirectionalArrowRelPos(): NumberAccessor<LinkType>;
|
|
2346
|
+
linkDirectionalArrowRelPos(position: NumberAccessor<LinkType>): ForceGraphInstance<NodeType, LinkType>;
|
|
2347
|
+
linkDirectionalParticleSpeed(): NumberAccessor<LinkType>;
|
|
2348
|
+
linkDirectionalParticleSpeed(speed: NumberAccessor<LinkType>): ForceGraphInstance<NodeType, LinkType>;
|
|
2349
|
+
linkDirectionalParticleWidth(): NumberAccessor<LinkType>;
|
|
2350
|
+
linkDirectionalParticleWidth(width: NumberAccessor<LinkType>): ForceGraphInstance<NodeType, LinkType>;
|
|
2351
|
+
linkDirectionalParticleColor(): ColorAccessor<LinkType>;
|
|
2352
|
+
linkDirectionalParticleColor(color: ColorAccessor<LinkType>): ForceGraphInstance<NodeType, LinkType>;
|
|
2353
|
+
linkCurvature(): NumberAccessor<LinkType>;
|
|
2354
|
+
linkCurvature(curvature: NumberAccessor<LinkType>): ForceGraphInstance<NodeType, LinkType>;
|
|
2355
|
+
linkCanvasObjectMode(): StringAccessor<LinkType>;
|
|
2356
|
+
linkCanvasObjectMode(mode: StringAccessor<LinkType>): ForceGraphInstance<NodeType, LinkType>;
|
|
2357
|
+
onNodeClick(): NodeEventHandler<NodeType> | null;
|
|
2358
|
+
onNodeClick(handler: NodeEventHandler<NodeType> | null): ForceGraphInstance<NodeType, LinkType>;
|
|
2359
|
+
onNodeDoubleClick(): NodeEventHandler<NodeType> | null;
|
|
2360
|
+
onNodeDoubleClick(handler: NodeEventHandler<NodeType> | null): ForceGraphInstance<NodeType, LinkType>;
|
|
2361
|
+
onNodeHover(): NodeEventHandler<NodeType> | null;
|
|
2362
|
+
onNodeHover(handler: NodeEventHandler<NodeType> | null): ForceGraphInstance<NodeType, LinkType>;
|
|
2363
|
+
onLinkClick(): LinkEventHandler<LinkType> | null;
|
|
2364
|
+
onLinkClick(handler: LinkEventHandler<LinkType> | null): ForceGraphInstance<NodeType, LinkType>;
|
|
2365
|
+
onLinkHover(): LinkEventHandler<LinkType> | null;
|
|
2366
|
+
onLinkHover(handler: LinkEventHandler<LinkType> | null): ForceGraphInstance<NodeType, LinkType>;
|
|
2367
|
+
onRenderFramePre(): CanvasRenderHandler | null;
|
|
2368
|
+
onRenderFramePre(handler: CanvasRenderHandler | null): ForceGraphInstance<NodeType, LinkType>;
|
|
2369
|
+
onRenderFramePost(): CanvasRenderHandler | null;
|
|
2370
|
+
onRenderFramePost(handler: CanvasRenderHandler | null): ForceGraphInstance<NodeType, LinkType>;
|
|
2371
|
+
cooldownTime(): number;
|
|
2372
|
+
cooldownTime(time: number): ForceGraphInstance<NodeType, LinkType>;
|
|
2373
|
+
d3AlphaDecay(): number;
|
|
2374
|
+
d3AlphaDecay(decay: number): ForceGraphInstance<NodeType, LinkType>;
|
|
2375
|
+
d3VelocityDecay(): number;
|
|
2376
|
+
d3VelocityDecay(decay: number): ForceGraphInstance<NodeType, LinkType>;
|
|
2377
|
+
onEngineStop(): (() => void) | undefined;
|
|
2378
|
+
onEngineStop(handler: (() => void) | undefined): ForceGraphInstance<NodeType, LinkType>;
|
|
2379
|
+
onEngineTick(): (() => void) | undefined;
|
|
2380
|
+
onEngineTick(handler: (() => void) | undefined): ForceGraphInstance<NodeType, LinkType>;
|
|
2381
|
+
getPerformanceMetrics(): PerformanceMetrics;
|
|
2382
|
+
resetPerformanceMetrics(): void;
|
|
2383
|
+
logPerformanceSummary(): void;
|
|
2384
|
+
validatePerformance(): {
|
|
2385
|
+
passed: boolean;
|
|
2386
|
+
warnings: string[];
|
|
2387
|
+
recommendations: string[];
|
|
2388
|
+
};
|
|
2389
|
+
/**
|
|
2390
|
+
* Setup advanced rendering performance monitoring
|
|
2391
|
+
* Target: 60fps @ 1000 nodes with optimizations
|
|
2392
|
+
*/
|
|
2393
|
+
private setupRenderingMonitoring;
|
|
2394
|
+
/**
|
|
2395
|
+
* Start advanced rendering performance monitoring
|
|
2396
|
+
*/
|
|
2397
|
+
private startRenderingMonitoring;
|
|
2398
|
+
/**
|
|
2399
|
+
* Stop rendering performance monitoring
|
|
2400
|
+
*/
|
|
2401
|
+
private stopRenderingMonitoring;
|
|
2402
|
+
/**
|
|
2403
|
+
* Get current rendering performance metrics
|
|
2404
|
+
*/
|
|
2405
|
+
getRenderingMetrics(): RenderingMetrics | null;
|
|
2406
|
+
/**
|
|
2407
|
+
* Validate rendering performance against Step 4 targets
|
|
2408
|
+
*/
|
|
2409
|
+
validateRenderingPerformance(): {
|
|
2410
|
+
passed: boolean;
|
|
2411
|
+
metrics: RenderingMetrics;
|
|
2412
|
+
validation: {
|
|
2413
|
+
passed: boolean;
|
|
2414
|
+
results: {
|
|
2415
|
+
fpsTarget: {
|
|
2416
|
+
expected: number;
|
|
2417
|
+
actual: number;
|
|
2418
|
+
passed: boolean;
|
|
2419
|
+
};
|
|
2420
|
+
frameTimeTarget: {
|
|
2421
|
+
expected: number;
|
|
2422
|
+
actual: number;
|
|
2423
|
+
passed: boolean;
|
|
2424
|
+
};
|
|
2425
|
+
droppedFramesTarget: {
|
|
2426
|
+
expected: number;
|
|
2427
|
+
actual: number;
|
|
2428
|
+
passed: boolean;
|
|
2429
|
+
};
|
|
2430
|
+
efficiencyTarget: {
|
|
2431
|
+
expected: number;
|
|
2432
|
+
actual: number;
|
|
2433
|
+
passed: boolean;
|
|
2434
|
+
};
|
|
2435
|
+
};
|
|
2436
|
+
overallScore: number;
|
|
2437
|
+
};
|
|
2438
|
+
recommendations: string[];
|
|
2439
|
+
};
|
|
2440
|
+
/**
|
|
2441
|
+
* Optimize rendering for large datasets
|
|
2442
|
+
* Implements performance optimizations based on node count
|
|
2443
|
+
*/
|
|
2444
|
+
optimizeForDataset(nodeCount: number): void;
|
|
2445
|
+
/**
|
|
2446
|
+
* Force a rendering performance test
|
|
2447
|
+
* Useful for validation during data loading
|
|
2448
|
+
*/
|
|
2449
|
+
testRenderingPerformance(durationMs?: number): Promise<{
|
|
2450
|
+
averageFPS: number;
|
|
2451
|
+
minFPS: number;
|
|
2452
|
+
maxFPS: number;
|
|
2453
|
+
passed: boolean;
|
|
2454
|
+
targetFPS: number;
|
|
2455
|
+
}>;
|
|
2456
|
+
render(): void;
|
|
2457
|
+
cooldownTicks(): number;
|
|
2458
|
+
cooldownTicks(ticks: number): ForceGraphInstance<NodeType, LinkType>;
|
|
2459
|
+
d3AlphaMin(): number;
|
|
2460
|
+
d3AlphaMin(min: number): ForceGraphInstance<NodeType, LinkType>;
|
|
2461
|
+
enableNodeDrag(): boolean;
|
|
2462
|
+
enableNodeDrag(enable: boolean): ForceGraphInstance<NodeType, LinkType>;
|
|
2463
|
+
nodeCanvasObject(): ((node: NodeType, ctx: CanvasRenderingContext2D, globalScale: number) => void) | null;
|
|
2464
|
+
nodeCanvasObject(paintFunction: ((node: NodeType, ctx: CanvasRenderingContext2D, globalScale: number) => void) | null): ForceGraphInstance<NodeType, LinkType>;
|
|
2465
|
+
linkCanvasObject(): ((link: LinkType, ctx: CanvasRenderingContext2D, globalScale: number) => void) | null;
|
|
2466
|
+
linkCanvasObject(paintFunction: ((link: LinkType, ctx: CanvasRenderingContext2D, globalScale: number) => void) | null): ForceGraphInstance<NodeType, LinkType>;
|
|
2467
|
+
autoPauseRedraw(): boolean;
|
|
2468
|
+
autoPauseRedraw(enable: boolean): ForceGraphInstance<NodeType, LinkType>;
|
|
2469
|
+
enableZoomInteraction(): boolean;
|
|
2470
|
+
enableZoomInteraction(enable: boolean): ForceGraphInstance<NodeType, LinkType>;
|
|
2471
|
+
enablePanInteraction(): boolean;
|
|
2472
|
+
enablePanInteraction(enable: boolean): ForceGraphInstance<NodeType, LinkType>;
|
|
2473
|
+
/**
|
|
2474
|
+
* Initialize graph controls if enabled
|
|
2475
|
+
*/
|
|
2476
|
+
private initializeControls;
|
|
2477
|
+
/**
|
|
2478
|
+
* Zoom in by a factor of 1.5
|
|
2479
|
+
*/
|
|
2480
|
+
private zoomIn;
|
|
2481
|
+
/**
|
|
2482
|
+
* Zoom out by a factor of 0.67
|
|
2483
|
+
*/
|
|
2484
|
+
private zoomOut;
|
|
2485
|
+
/**
|
|
2486
|
+
* Fit the graph to the viewport
|
|
2487
|
+
*/
|
|
2488
|
+
private fitView;
|
|
2489
|
+
/**
|
|
2490
|
+
* Reset the view to initial state
|
|
2491
|
+
*/
|
|
2492
|
+
private resetView;
|
|
2493
|
+
/**
|
|
2494
|
+
* Cleanup graph controls
|
|
2495
|
+
*/
|
|
2496
|
+
private cleanupControls;
|
|
2497
|
+
/**
|
|
2498
|
+
* Initialize graph legends if enabled
|
|
2499
|
+
*/
|
|
2500
|
+
private initializeLegends;
|
|
2501
|
+
/**
|
|
2502
|
+
* Update legends with current graph data
|
|
2503
|
+
*/
|
|
2504
|
+
private updateLegends;
|
|
2505
|
+
/**
|
|
2506
|
+
* Cleanup graph legends
|
|
2507
|
+
*/
|
|
2508
|
+
private cleanupLegends;
|
|
2509
|
+
/**
|
|
2510
|
+
* Draw legends on the export canvas (similar to React implementation)
|
|
2511
|
+
*/
|
|
2512
|
+
private drawLegendsOnExportCanvas;
|
|
2513
|
+
/**
|
|
2514
|
+
* Draw rounded rectangle helper method
|
|
2515
|
+
*/
|
|
2516
|
+
private drawRoundedRect;
|
|
2517
|
+
/**
|
|
2518
|
+
* Export graph as PNG image
|
|
2519
|
+
*/
|
|
2520
|
+
exportGraph(fileName?: string): Promise<void>;
|
|
2521
|
+
/**
|
|
2522
|
+
* Setup double-click functionality
|
|
2523
|
+
* - Double-click on node: center and zoom to node
|
|
2524
|
+
* - Double-click on canvas: fit view
|
|
2525
|
+
*/
|
|
2526
|
+
private setupDoubleClickHandling;
|
|
2527
|
+
/**
|
|
2528
|
+
* Smooth zoom to fit that animates from current position
|
|
2529
|
+
*/
|
|
2530
|
+
private smoothZoomToFit;
|
|
2531
|
+
/**
|
|
2532
|
+
* Trigger Kapsule update to ensure render callbacks continue working
|
|
2533
|
+
* This is essential for onRenderFramePost callbacks after physics simulation stops
|
|
2534
|
+
*/
|
|
2535
|
+
triggerKapsuleUpdate(): void;
|
|
2536
|
+
/**
|
|
2537
|
+
* Find node at given graph coordinates
|
|
2538
|
+
*/
|
|
2539
|
+
private findNodeAtPosition;
|
|
2540
|
+
destroy(): void;
|
|
2541
|
+
_getForceGraphInstance(): unknown;
|
|
2542
|
+
}
|
|
2543
|
+
/**
|
|
2544
|
+
* Factory function for creating force-graph instances
|
|
2545
|
+
* Step 1 Performance Target: < 1ms total creation time
|
|
2546
|
+
*/
|
|
2547
|
+
declare function createForceGraph<NodeType extends ForceGraphNode = ForceGraphNode, LinkType extends ForceGraphLink<NodeType> = ForceGraphLink<NodeType>>(container: HTMLElement, config?: Partial<ForceGraphConfig<NodeType, LinkType>>): ForceGraphInstance<NodeType, LinkType>;
|
|
2548
|
+
|
|
2549
|
+
/**
|
|
2550
|
+
* Force-Graph Wrapper - Main Export
|
|
2551
|
+
*
|
|
2552
|
+
* Framework-independent wrapper around force-graph library
|
|
2553
|
+
* with TypeScript generics and performance monitoring
|
|
2554
|
+
*/
|
|
2555
|
+
|
|
2556
|
+
declare const VERSION = "1.0.0-alpha.1";
|
|
2557
|
+
declare const LIBRARY_INFO: {
|
|
2558
|
+
readonly name: "force-graph-wrapper";
|
|
2559
|
+
readonly version: "1.0.0-alpha.1";
|
|
2560
|
+
readonly description: "Framework-independent TypeScript wrapper for force-graph library";
|
|
2561
|
+
readonly performance: "Built-in performance monitoring and optimization";
|
|
2562
|
+
readonly compatibility: "Vanilla JS, React, Angular, Vue.js";
|
|
2563
|
+
};
|
|
2564
|
+
|
|
2565
|
+
export { type ArrowRenderStyle, type BaseGraphConfig, CanvasManager, type CanvasRenderConfig, type CanvasRenderHandler, type CanvasState, ConfigPresets, type ControlsController, type Coordinates, type CreateForceGraphFunction, DEFAULT_COLORS, DEFAULT_HOVER_STYLES, DEFAULT_LINK_LABEL_STYLE, DEFAULT_LINK_STYLE, type DragConfig, type DragInteractionConfig, DragManager, type DragState, ErrorHandler, type ForceGraphConfig, ForceGraphConfigBuilder, type ForceGraphConfigMethods, type ForceGraphData, type ForceGraphInstance, type ForceGraphLink, type ForceGraphMethods, type ForceGraphNode, type ForceGraphPerformanceMethods, ForceGraphWrapper, type GraphControlsConfig$1 as GraphControlsConfig, type GraphControlsOrientation$1 as GraphControlsOrientation, type GraphControlsPosition$1 as GraphControlsPosition, type GraphInteractionConfig, type GraphLink, type GraphNode, type GraphNodeWithInitial, type GraphTooltipTheme, type HighlightInteractionConfig, type HoverEvent, type HoverInteractionConfig, HoverManager, type HoverState, type HoverStyles, type IconName, type IconSvgName, type InteractionColors, type InteractionConfig$1 as InteractionConfig, LIBRARY_INFO, type LegendConfig, type LegendPosition, type LinkArrowStyle, type LinkColors, type LinkEventHandler, type LinkLabelRenderStyle, type LinkLabelStyle, type LinkRenderStyle, type LinkSelectHandler, type LinkStyle, type MinimalForceGraphConfig, NeutralColor, type NodeColorPalette, type NodeEventHandler, type NodeLabelRenderStyle, type NodeRenderStyle, type NodeSelectHandler, type NodeStyle, type Orientation, type PerformanceConfig, type PerformanceMetrics, PerformanceMonitor, type PhysicsConfig, PhysicsManager, PointerManager, type PointerState, type Position, PrimaryColor, type RenderStyles, Renderer, type ResolvedLinkLabelStyle, type ResolvedLinkStyle, SecondaryColor, type SelectionEvent, type SelectionInteractionConfig, SelectionManager, type SelectionState, type SimulationConfig, StandardColor, type TooltipInteractionConfig, type TooltipPlacement, type UIColors, type V2Config, V2Graph, type V2Instance, type V2Link, type V2Node, VERSION, ValidationError, type ZoomConfig, ZoomManager, createForceGraph, createV2Graph, getIcon, getIconSvg, iconSvg, icons, isValidLinkStyle, isValidNodeStyle, mergeLinkStyle, mergeNodeStyle };
|