@likec4/diagram 1.2.2 → 1.3.0

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.
Files changed (56) hide show
  1. package/dist/LikeC4Diagram.d.ts +1 -1
  2. package/dist/LikeC4Diagram.props.d.ts +21 -3
  3. package/dist/index.mjs +1335 -1240
  4. package/dist/state/DiagramContext.d.ts +2263 -175
  5. package/dist/state/diagramStore.d.ts +2272 -180
  6. package/dist/state/useDiagramStore.d.ts +2409 -321
  7. package/dist/style.css +123 -92
  8. package/dist/theme.css.d.ts +0 -1
  9. package/dist/ui/OptionsPanel.d.ts +3 -1
  10. package/dist/xyflow/XYFlow.d.ts +2 -1
  11. package/dist/xyflow/XYFlowInner.d.ts +1 -1
  12. package/dist/xyflow/const.d.ts +1 -1
  13. package/dist/xyflow/diagram-to-xyflow.d.ts +1 -1
  14. package/dist/xyflow/edges/RelationshipEdge.d.ts +3 -4
  15. package/dist/xyflow/edges/utils.d.ts +4 -2
  16. package/dist/xyflow/nodes/compound/CompoundNode.css.d.ts +3 -1
  17. package/dist/xyflow/nodes/element/ElementNode.d.ts +1 -1
  18. package/dist/xyflow/nodes/element/index.d.ts +1 -1
  19. package/dist/xyflow/types.d.ts +2 -2
  20. package/dist/xyflow/utils.d.ts +3 -0
  21. package/package.json +15 -14
  22. package/src/LikeC4Diagram.css.ts +4 -4
  23. package/src/LikeC4Diagram.props.ts +23 -2
  24. package/src/LikeC4Diagram.tsx +79 -31
  25. package/src/globals.css.ts +0 -1
  26. package/src/mantine/theme.ts +1 -0
  27. package/src/state/DiagramContext.tsx +0 -1
  28. package/src/state/diagramStore.ts +177 -100
  29. package/src/theme.css.ts +0 -1
  30. package/src/ui/DiagramTitlePanel.tsx +3 -3
  31. package/src/ui/DynamicViewWalkthrough.css.ts +3 -2
  32. package/src/ui/DynamicViewWalkthrough.tsx +36 -17
  33. package/src/ui/OptionsPanel.tsx +12 -12
  34. package/src/ui/options/NodeOptions.tsx +16 -19
  35. package/src/xyflow/FitviewOnDiagramChange.tsx +15 -23
  36. package/src/xyflow/SelectEdgesOnNodeFocus.tsx +3 -6
  37. package/src/xyflow/SyncWithDiagram.tsx +21 -2
  38. package/src/xyflow/XYFlow.tsx +20 -23
  39. package/src/xyflow/XYFlowEvents.tsx +26 -8
  40. package/src/xyflow/XYFlowInner.tsx +5 -4
  41. package/src/xyflow/const.ts +1 -1
  42. package/src/xyflow/diagram-to-xyflow.ts +5 -31
  43. package/src/xyflow/edges/RelationshipEdge.tsx +158 -112
  44. package/src/xyflow/edges/edges.css.ts +32 -21
  45. package/src/xyflow/edges/utils.ts +5 -2
  46. package/src/xyflow/hooks/useLayoutConstraints.ts +17 -3
  47. package/src/xyflow/nodes/compound/CompoundNode.css.ts +40 -32
  48. package/src/xyflow/nodes/compound/CompoundNode.tsx +36 -26
  49. package/src/xyflow/nodes/element/ElementNode.tsx +20 -6
  50. package/src/xyflow/nodes/element/element.css.ts +15 -15
  51. package/src/xyflow/nodes/element/index.ts +1 -1
  52. package/src/xyflow/nodes/shared/NavigateToBtn.tsx +7 -3
  53. package/src/xyflow/types.ts +5 -2
  54. package/src/xyflow/utils.ts +48 -0
  55. package/dist/ui/index.d.ts +0 -2
  56. package/src/ui/index.ts +0 -3
package/dist/state/useDiagramStore.d.ts CHANGED
@@ -12,6 +12,9 @@ declare function useDiagramStoreApi(): {
12
12
  pannable: boolean;
13
13
  nodesDraggable: boolean;
14
14
  nodesSelectable: boolean;
15
+ experimentalEdgeEditing: boolean;
16
+ viewSyncState: "synced" | "changed";
17
+ viewSyncDebounceTimeout: number | null;
15
18
  xyflow: import('..').XYFlowInstance;
16
19
  initialized: boolean;
17
20
  xyflowSynced: boolean;
@@ -27,7 +30,7 @@ declare function useDiagramStoreApi(): {
27
30
  fromView: import('@likec4/core').ViewID;
28
31
  toView: import('@likec4/core').ViewID;
29
32
  element: import('@likec4/core').DiagramNode;
30
- elementCenterScreenPosition: import('@xyflow/system').XYPosition;
33
+ elementScreenPosition: import('@xyflow/system').XYPosition;
31
34
  positionCorrected: boolean;
32
35
  } | null;
33
36
  viewportChanged: boolean;
@@ -49,9 +52,8 @@ declare function useDiagramStoreApi(): {
49
52
  setLastClickedEdge: (edgeId: string | null) => void;
50
53
  resetLastClicked: () => void;
51
54
  getElement: (id: import('@likec4/core').Fqn) => import('@likec4/core').DiagramNode | null;
52
- triggerOnChange: (changes: import('@likec4/core').NonEmptyArray<import("..").Changes.ChangeElementStyle>) => void;
53
- triggerOnNavigateTo: (xynodeId: string, event: import('react').MouseEvent<Element, MouseEvent>) => void;
54
- fitDiagram: (xyStore: {
55
+ triggerChangeElementStyle: (change: import("..").Changes.ChangeElementStyle) => void;
56
+ triggerSaveManualLayout: (xystore: {
55
57
  getState: () => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
56
58
  source: string;
57
59
  target: string;
@@ -280,59 +282,6 @@ declare function useDiagramStoreApi(): {
280
282
  readonly type: "relationship";
281
283
  }>) => void) => () => void;
282
284
  }) => void;
283
- nextDynamicStep: (increment?: number | undefined) => void;
284
- stopDynamicView: () => void;
285
- };
286
- setState: <A extends string | {
287
- type: string;
288
- }>(partial: {
289
- view: import('@likec4/core').DiagramView;
290
- readonly: boolean;
291
- showElementLinks: boolean;
292
- fitViewEnabled: boolean;
293
- fitViewPadding: number;
294
- zoomable: boolean;
295
- pannable: boolean;
296
- nodesDraggable: boolean;
297
- nodesSelectable: boolean;
298
- xyflow: import('..').XYFlowInstance;
299
- initialized: boolean;
300
- xyflowSynced: boolean;
301
- activeDynamicViewStep: number | null;
302
- lastClickedNodeId: string | null;
303
- lastClickedEdgeId: string | null;
304
- focusedNodeId: string | null;
305
- hoveredNodeId: string | null;
306
- hoveredEdgeId: string | null;
307
- dimmed: ReadonlySet<string>;
308
- previousViews: import('@likec4/core').DiagramView[];
309
- lastOnNavigate: {
310
- fromView: import('@likec4/core').ViewID;
311
- toView: import('@likec4/core').ViewID;
312
- element: import('@likec4/core').DiagramNode;
313
- elementCenterScreenPosition: import('@xyflow/system').XYPosition;
314
- positionCorrected: boolean;
315
- } | null;
316
- viewportChanged: boolean;
317
- onChange: import('..').OnChange | null | undefined;
318
- onNavigateTo: import('..').OnNavigateTo | null | undefined;
319
- onNodeClick: import('..').OnNodeClick | null | undefined;
320
- onNodeContextMenu: import('..').OnNodeClick | null | undefined;
321
- onCanvasContextMenu: import('..').OnCanvasClick | null | undefined;
322
- onEdgeClick: import('..').OnEdgeClick | null | undefined;
323
- onEdgeContextMenu: import('..').OnEdgeClick | null | undefined;
324
- onCanvasClick: import('..').OnCanvasClick | null | undefined;
325
- onCanvasDblClick: import('..').OnCanvasClick | null | undefined;
326
- isDynamicView: () => boolean;
327
- updateView: (view: import('@likec4/core').DiagramView) => void;
328
- focusOnNode: (nodeId: string) => void;
329
- setHoveredNode: (nodeId: string | null) => void;
330
- setHoveredEdge: (edgeId: string | null) => void;
331
- setLastClickedNode: (nodeId: string | null) => void;
332
- setLastClickedEdge: (edgeId: string | null) => void;
333
- resetLastClicked: () => void;
334
- getElement: (id: import('@likec4/core').Fqn) => import('@likec4/core').DiagramNode | null;
335
- triggerOnChange: (changes: import('@likec4/core').NonEmptyArray<import("..").Changes.ChangeElementStyle>) => void;
336
285
  triggerOnNavigateTo: (xynodeId: string, event: import('react').MouseEvent<Element, MouseEvent>) => void;
337
286
  fitDiagram: (xyStore: {
338
287
  getState: () => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
@@ -565,7 +514,10 @@ declare function useDiagramStoreApi(): {
565
514
  }) => void;
566
515
  nextDynamicStep: (increment?: number | undefined) => void;
567
516
  stopDynamicView: () => void;
568
- } | Partial<{
517
+ };
518
+ setState: <A extends string | {
519
+ type: string;
520
+ }>(partial: {
569
521
  view: import('@likec4/core').DiagramView;
570
522
  readonly: boolean;
571
523
  showElementLinks: boolean;
@@ -575,6 +527,9 @@ declare function useDiagramStoreApi(): {
575
527
  pannable: boolean;
576
528
  nodesDraggable: boolean;
577
529
  nodesSelectable: boolean;
530
+ experimentalEdgeEditing: boolean;
531
+ viewSyncState: "synced" | "changed";
532
+ viewSyncDebounceTimeout: number | null;
578
533
  xyflow: import('..').XYFlowInstance;
579
534
  initialized: boolean;
580
535
  xyflowSynced: boolean;
@@ -590,7 +545,7 @@ declare function useDiagramStoreApi(): {
590
545
  fromView: import('@likec4/core').ViewID;
591
546
  toView: import('@likec4/core').ViewID;
592
547
  element: import('@likec4/core').DiagramNode;
593
- elementCenterScreenPosition: import('@xyflow/system').XYPosition;
548
+ elementScreenPosition: import('@xyflow/system').XYPosition;
594
549
  positionCorrected: boolean;
595
550
  } | null;
596
551
  viewportChanged: boolean;
@@ -612,9 +567,8 @@ declare function useDiagramStoreApi(): {
612
567
  setLastClickedEdge: (edgeId: string | null) => void;
613
568
  resetLastClicked: () => void;
614
569
  getElement: (id: import('@likec4/core').Fqn) => import('@likec4/core').DiagramNode | null;
615
- triggerOnChange: (changes: import('@likec4/core').NonEmptyArray<import("..").Changes.ChangeElementStyle>) => void;
616
- triggerOnNavigateTo: (xynodeId: string, event: import('react').MouseEvent<Element, MouseEvent>) => void;
617
- fitDiagram: (xyStore: {
570
+ triggerChangeElementStyle: (change: import("..").Changes.ChangeElementStyle) => void;
571
+ triggerSaveManualLayout: (xystore: {
618
572
  getState: () => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
619
573
  source: string;
620
574
  target: string;
@@ -843,56 +797,6 @@ declare function useDiagramStoreApi(): {
843
797
  readonly type: "relationship";
844
798
  }>) => void) => () => void;
845
799
  }) => void;
846
- nextDynamicStep: (increment?: number | undefined) => void;
847
- stopDynamicView: () => void;
848
- }> | ((state: {
849
- view: import('@likec4/core').DiagramView;
850
- readonly: boolean;
851
- showElementLinks: boolean;
852
- fitViewEnabled: boolean;
853
- fitViewPadding: number;
854
- zoomable: boolean;
855
- pannable: boolean;
856
- nodesDraggable: boolean;
857
- nodesSelectable: boolean;
858
- xyflow: import('..').XYFlowInstance;
859
- initialized: boolean;
860
- xyflowSynced: boolean;
861
- activeDynamicViewStep: number | null;
862
- lastClickedNodeId: string | null;
863
- lastClickedEdgeId: string | null;
864
- focusedNodeId: string | null;
865
- hoveredNodeId: string | null;
866
- hoveredEdgeId: string | null;
867
- dimmed: ReadonlySet<string>;
868
- previousViews: import('@likec4/core').DiagramView[];
869
- lastOnNavigate: {
870
- fromView: import('@likec4/core').ViewID;
871
- toView: import('@likec4/core').ViewID;
872
- element: import('@likec4/core').DiagramNode;
873
- elementCenterScreenPosition: import('@xyflow/system').XYPosition;
874
- positionCorrected: boolean;
875
- } | null;
876
- viewportChanged: boolean;
877
- onChange: import('..').OnChange | null | undefined;
878
- onNavigateTo: import('..').OnNavigateTo | null | undefined;
879
- onNodeClick: import('..').OnNodeClick | null | undefined;
880
- onNodeContextMenu: import('..').OnNodeClick | null | undefined;
881
- onCanvasContextMenu: import('..').OnCanvasClick | null | undefined;
882
- onEdgeClick: import('..').OnEdgeClick | null | undefined;
883
- onEdgeContextMenu: import('..').OnEdgeClick | null | undefined;
884
- onCanvasClick: import('..').OnCanvasClick | null | undefined;
885
- onCanvasDblClick: import('..').OnCanvasClick | null | undefined;
886
- isDynamicView: () => boolean;
887
- updateView: (view: import('@likec4/core').DiagramView) => void;
888
- focusOnNode: (nodeId: string) => void;
889
- setHoveredNode: (nodeId: string | null) => void;
890
- setHoveredEdge: (edgeId: string | null) => void;
891
- setLastClickedNode: (nodeId: string | null) => void;
892
- setLastClickedEdge: (edgeId: string | null) => void;
893
- resetLastClicked: () => void;
894
- getElement: (id: import('@likec4/core').Fqn) => import('@likec4/core').DiagramNode | null;
895
- triggerOnChange: (changes: import('@likec4/core').NonEmptyArray<import("..").Changes.ChangeElementStyle>) => void;
896
800
  triggerOnNavigateTo: (xynodeId: string, event: import('react').MouseEvent<Element, MouseEvent>) => void;
897
801
  fitDiagram: (xyStore: {
898
802
  getState: () => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
@@ -1125,7 +1029,7 @@ declare function useDiagramStoreApi(): {
1125
1029
  }) => void;
1126
1030
  nextDynamicStep: (increment?: number | undefined) => void;
1127
1031
  stopDynamicView: () => void;
1128
- }) => {
1032
+ } | Partial<{
1129
1033
  view: import('@likec4/core').DiagramView;
1130
1034
  readonly: boolean;
1131
1035
  showElementLinks: boolean;
@@ -1135,6 +1039,9 @@ declare function useDiagramStoreApi(): {
1135
1039
  pannable: boolean;
1136
1040
  nodesDraggable: boolean;
1137
1041
  nodesSelectable: boolean;
1042
+ experimentalEdgeEditing: boolean;
1043
+ viewSyncState: "synced" | "changed";
1044
+ viewSyncDebounceTimeout: number | null;
1138
1045
  xyflow: import('..').XYFlowInstance;
1139
1046
  initialized: boolean;
1140
1047
  xyflowSynced: boolean;
@@ -1150,7 +1057,7 @@ declare function useDiagramStoreApi(): {
1150
1057
  fromView: import('@likec4/core').ViewID;
1151
1058
  toView: import('@likec4/core').ViewID;
1152
1059
  element: import('@likec4/core').DiagramNode;
1153
- elementCenterScreenPosition: import('@xyflow/system').XYPosition;
1060
+ elementScreenPosition: import('@xyflow/system').XYPosition;
1154
1061
  positionCorrected: boolean;
1155
1062
  } | null;
1156
1063
  viewportChanged: boolean;
@@ -1172,9 +1079,8 @@ declare function useDiagramStoreApi(): {
1172
1079
  setLastClickedEdge: (edgeId: string | null) => void;
1173
1080
  resetLastClicked: () => void;
1174
1081
  getElement: (id: import('@likec4/core').Fqn) => import('@likec4/core').DiagramNode | null;
1175
- triggerOnChange: (changes: import('@likec4/core').NonEmptyArray<import("..").Changes.ChangeElementStyle>) => void;
1176
- triggerOnNavigateTo: (xynodeId: string, event: import('react').MouseEvent<Element, MouseEvent>) => void;
1177
- fitDiagram: (xyStore: {
1082
+ triggerChangeElementStyle: (change: import("..").Changes.ChangeElementStyle) => void;
1083
+ triggerSaveManualLayout: (xystore: {
1178
1084
  getState: () => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
1179
1085
  source: string;
1180
1086
  target: string;
@@ -1403,56 +1309,6 @@ declare function useDiagramStoreApi(): {
1403
1309
  readonly type: "relationship";
1404
1310
  }>) => void) => () => void;
1405
1311
  }) => void;
1406
- nextDynamicStep: (increment?: number | undefined) => void;
1407
- stopDynamicView: () => void;
1408
- } | Partial<{
1409
- view: import('@likec4/core').DiagramView;
1410
- readonly: boolean;
1411
- showElementLinks: boolean;
1412
- fitViewEnabled: boolean;
1413
- fitViewPadding: number;
1414
- zoomable: boolean;
1415
- pannable: boolean;
1416
- nodesDraggable: boolean;
1417
- nodesSelectable: boolean;
1418
- xyflow: import('..').XYFlowInstance;
1419
- initialized: boolean;
1420
- xyflowSynced: boolean;
1421
- activeDynamicViewStep: number | null;
1422
- lastClickedNodeId: string | null;
1423
- lastClickedEdgeId: string | null;
1424
- focusedNodeId: string | null;
1425
- hoveredNodeId: string | null;
1426
- hoveredEdgeId: string | null;
1427
- dimmed: ReadonlySet<string>;
1428
- previousViews: import('@likec4/core').DiagramView[];
1429
- lastOnNavigate: {
1430
- fromView: import('@likec4/core').ViewID;
1431
- toView: import('@likec4/core').ViewID;
1432
- element: import('@likec4/core').DiagramNode;
1433
- elementCenterScreenPosition: import('@xyflow/system').XYPosition;
1434
- positionCorrected: boolean;
1435
- } | null;
1436
- viewportChanged: boolean;
1437
- onChange: import('..').OnChange | null | undefined;
1438
- onNavigateTo: import('..').OnNavigateTo | null | undefined;
1439
- onNodeClick: import('..').OnNodeClick | null | undefined;
1440
- onNodeContextMenu: import('..').OnNodeClick | null | undefined;
1441
- onCanvasContextMenu: import('..').OnCanvasClick | null | undefined;
1442
- onEdgeClick: import('..').OnEdgeClick | null | undefined;
1443
- onEdgeContextMenu: import('..').OnEdgeClick | null | undefined;
1444
- onCanvasClick: import('..').OnCanvasClick | null | undefined;
1445
- onCanvasDblClick: import('..').OnCanvasClick | null | undefined;
1446
- isDynamicView: () => boolean;
1447
- updateView: (view: import('@likec4/core').DiagramView) => void;
1448
- focusOnNode: (nodeId: string) => void;
1449
- setHoveredNode: (nodeId: string | null) => void;
1450
- setHoveredEdge: (edgeId: string | null) => void;
1451
- setLastClickedNode: (nodeId: string | null) => void;
1452
- setLastClickedEdge: (edgeId: string | null) => void;
1453
- resetLastClicked: () => void;
1454
- getElement: (id: import('@likec4/core').Fqn) => import('@likec4/core').DiagramNode | null;
1455
- triggerOnChange: (changes: import('@likec4/core').NonEmptyArray<import("..").Changes.ChangeElementStyle>) => void;
1456
1312
  triggerOnNavigateTo: (xynodeId: string, event: import('react').MouseEvent<Element, MouseEvent>) => void;
1457
1313
  fitDiagram: (xyStore: {
1458
1314
  getState: () => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
@@ -1685,104 +1541,2384 @@ declare function useDiagramStoreApi(): {
1685
1541
  }) => void;
1686
1542
  nextDynamicStep: (increment?: number | undefined) => void;
1687
1543
  stopDynamicView: () => void;
1688
- }>), replace?: boolean | undefined, action?: A | undefined) => void;
1689
- subscribe: {
1690
- (listener: (selectedState: {
1691
- view: import('@likec4/core').DiagramView;
1692
- readonly: boolean;
1693
- showElementLinks: boolean;
1694
- fitViewEnabled: boolean;
1695
- fitViewPadding: number;
1696
- zoomable: boolean;
1697
- pannable: boolean;
1698
- nodesDraggable: boolean;
1699
- nodesSelectable: boolean;
1700
- xyflow: import('..').XYFlowInstance;
1701
- initialized: boolean;
1702
- xyflowSynced: boolean;
1703
- activeDynamicViewStep: number | null;
1704
- lastClickedNodeId: string | null;
1705
- lastClickedEdgeId: string | null;
1706
- focusedNodeId: string | null;
1707
- hoveredNodeId: string | null;
1708
- hoveredEdgeId: string | null;
1709
- dimmed: ReadonlySet<string>;
1710
- previousViews: import('@likec4/core').DiagramView[];
1711
- lastOnNavigate: {
1712
- fromView: import('@likec4/core').ViewID;
1713
- toView: import('@likec4/core').ViewID;
1714
- element: import('@likec4/core').DiagramNode;
1715
- elementCenterScreenPosition: import('@xyflow/system').XYPosition;
1716
- positionCorrected: boolean;
1717
- } | null;
1718
- viewportChanged: boolean;
1719
- onChange: import('..').OnChange | null | undefined;
1720
- onNavigateTo: import('..').OnNavigateTo | null | undefined;
1721
- onNodeClick: import('..').OnNodeClick | null | undefined;
1722
- onNodeContextMenu: import('..').OnNodeClick | null | undefined;
1723
- onCanvasContextMenu: import('..').OnCanvasClick | null | undefined;
1724
- onEdgeClick: import('..').OnEdgeClick | null | undefined;
1725
- onEdgeContextMenu: import('..').OnEdgeClick | null | undefined;
1726
- onCanvasClick: import('..').OnCanvasClick | null | undefined;
1727
- onCanvasDblClick: import('..').OnCanvasClick | null | undefined;
1728
- isDynamicView: () => boolean;
1729
- updateView: (view: import('@likec4/core').DiagramView) => void;
1730
- focusOnNode: (nodeId: string) => void;
1731
- setHoveredNode: (nodeId: string | null) => void;
1732
- setHoveredEdge: (edgeId: string | null) => void;
1733
- setLastClickedNode: (nodeId: string | null) => void;
1734
- setLastClickedEdge: (edgeId: string | null) => void;
1735
- resetLastClicked: () => void;
1736
- getElement: (id: import('@likec4/core').Fqn) => import('@likec4/core').DiagramNode | null;
1737
- triggerOnChange: (changes: import('@likec4/core').NonEmptyArray<import("..").Changes.ChangeElementStyle>) => void;
1738
- triggerOnNavigateTo: (xynodeId: string, event: import('react').MouseEvent<Element, MouseEvent>) => void;
1739
- fitDiagram: (xyStore: {
1740
- getState: () => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
1741
- source: string;
1742
- target: string;
1743
- sourceHandle?: string | null;
1744
- targetHandle?: string | null;
1745
- animated?: boolean;
1746
- hidden?: boolean;
1747
- deletable?: boolean;
1748
- selectable?: boolean;
1749
- selected?: boolean;
1750
- markerStart?: import('@xyflow/system').EdgeMarkerType;
1751
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
1752
- zIndex?: number;
1753
- ariaLabel?: string;
1754
- interactionWidth?: number;
1755
- label?: import('react').ReactNode;
1756
- labelStyle?: import('react').CSSProperties;
1757
- labelShowBg?: boolean;
1758
- labelBgStyle?: import('react').CSSProperties;
1759
- labelBgPadding?: [number, number];
1760
- labelBgBorderRadius?: number;
1761
- style?: import('react').CSSProperties;
1762
- className?: string;
1763
- updatable?: import('@xyflow/react').EdgeUpdatable;
1764
- focusable?: boolean;
1765
- data: import('..').RelationshipData;
1766
- readonly id: string;
1767
- readonly type: "relationship";
1768
- }>;
1769
- setState: (partial: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
1770
- source: string;
1771
- target: string;
1772
- sourceHandle?: string | null;
1773
- targetHandle?: string | null;
1774
- animated?: boolean;
1775
- hidden?: boolean;
1776
- deletable?: boolean;
1777
- selectable?: boolean;
1778
- selected?: boolean;
1779
- markerStart?: import('@xyflow/system').EdgeMarkerType;
1780
- markerEnd?: import('@xyflow/system').EdgeMarkerType;
1781
- zIndex?: number;
1782
- ariaLabel?: string;
1783
- interactionWidth?: number;
1784
- label?: import('react').ReactNode;
1785
- labelStyle?: import('react').CSSProperties;
1544
+ }> | ((state: {
1545
+ view: import('@likec4/core').DiagramView;
1546
+ readonly: boolean;
1547
+ showElementLinks: boolean;
1548
+ fitViewEnabled: boolean;
1549
+ fitViewPadding: number;
1550
+ zoomable: boolean;
1551
+ pannable: boolean;
1552
+ nodesDraggable: boolean;
1553
+ nodesSelectable: boolean;
1554
+ experimentalEdgeEditing: boolean;
1555
+ viewSyncState: "synced" | "changed";
1556
+ viewSyncDebounceTimeout: number | null;
1557
+ xyflow: import('..').XYFlowInstance;
1558
+ initialized: boolean;
1559
+ xyflowSynced: boolean;
1560
+ activeDynamicViewStep: number | null;
1561
+ lastClickedNodeId: string | null;
1562
+ lastClickedEdgeId: string | null;
1563
+ focusedNodeId: string | null;
1564
+ hoveredNodeId: string | null;
1565
+ hoveredEdgeId: string | null;
1566
+ dimmed: ReadonlySet<string>;
1567
+ previousViews: import('@likec4/core').DiagramView[];
1568
+ lastOnNavigate: {
1569
+ fromView: import('@likec4/core').ViewID;
1570
+ toView: import('@likec4/core').ViewID;
1571
+ element: import('@likec4/core').DiagramNode;
1572
+ elementScreenPosition: import('@xyflow/system').XYPosition;
1573
+ positionCorrected: boolean;
1574
+ } | null;
1575
+ viewportChanged: boolean;
1576
+ onChange: import('..').OnChange | null | undefined;
1577
+ onNavigateTo: import('..').OnNavigateTo | null | undefined;
1578
+ onNodeClick: import('..').OnNodeClick | null | undefined;
1579
+ onNodeContextMenu: import('..').OnNodeClick | null | undefined;
1580
+ onCanvasContextMenu: import('..').OnCanvasClick | null | undefined;
1581
+ onEdgeClick: import('..').OnEdgeClick | null | undefined;
1582
+ onEdgeContextMenu: import('..').OnEdgeClick | null | undefined;
1583
+ onCanvasClick: import('..').OnCanvasClick | null | undefined;
1584
+ onCanvasDblClick: import('..').OnCanvasClick | null | undefined;
1585
+ isDynamicView: () => boolean;
1586
+ updateView: (view: import('@likec4/core').DiagramView) => void;
1587
+ focusOnNode: (nodeId: string) => void;
1588
+ setHoveredNode: (nodeId: string | null) => void;
1589
+ setHoveredEdge: (edgeId: string | null) => void;
1590
+ setLastClickedNode: (nodeId: string | null) => void;
1591
+ setLastClickedEdge: (edgeId: string | null) => void;
1592
+ resetLastClicked: () => void;
1593
+ getElement: (id: import('@likec4/core').Fqn) => import('@likec4/core').DiagramNode | null;
1594
+ triggerChangeElementStyle: (change: import("..").Changes.ChangeElementStyle) => void;
1595
+ triggerSaveManualLayout: (xystore: {
1596
+ getState: () => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
1597
+ source: string;
1598
+ target: string;
1599
+ sourceHandle?: string | null;
1600
+ targetHandle?: string | null;
1601
+ animated?: boolean;
1602
+ hidden?: boolean;
1603
+ deletable?: boolean;
1604
+ selectable?: boolean;
1605
+ selected?: boolean;
1606
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
1607
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
1608
+ zIndex?: number;
1609
+ ariaLabel?: string;
1610
+ interactionWidth?: number;
1611
+ label?: import('react').ReactNode;
1612
+ labelStyle?: import('react').CSSProperties;
1613
+ labelShowBg?: boolean;
1614
+ labelBgStyle?: import('react').CSSProperties;
1615
+ labelBgPadding?: [number, number];
1616
+ labelBgBorderRadius?: number;
1617
+ style?: import('react').CSSProperties;
1618
+ className?: string;
1619
+ updatable?: import('@xyflow/react').EdgeUpdatable;
1620
+ focusable?: boolean;
1621
+ data: import('..').RelationshipData;
1622
+ readonly id: string;
1623
+ readonly type: "relationship";
1624
+ }>;
1625
+ setState: (partial: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
1626
+ source: string;
1627
+ target: string;
1628
+ sourceHandle?: string | null;
1629
+ targetHandle?: string | null;
1630
+ animated?: boolean;
1631
+ hidden?: boolean;
1632
+ deletable?: boolean;
1633
+ selectable?: boolean;
1634
+ selected?: boolean;
1635
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
1636
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
1637
+ zIndex?: number;
1638
+ ariaLabel?: string;
1639
+ interactionWidth?: number;
1640
+ label?: import('react').ReactNode;
1641
+ labelStyle?: import('react').CSSProperties;
1642
+ labelShowBg?: boolean;
1643
+ labelBgStyle?: import('react').CSSProperties;
1644
+ labelBgPadding?: [number, number];
1645
+ labelBgBorderRadius?: number;
1646
+ style?: import('react').CSSProperties;
1647
+ className?: string;
1648
+ updatable?: import('@xyflow/react').EdgeUpdatable;
1649
+ focusable?: boolean;
1650
+ data: import('..').RelationshipData;
1651
+ readonly id: string;
1652
+ readonly type: "relationship";
1653
+ }> | Partial<import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
1654
+ source: string;
1655
+ target: string;
1656
+ sourceHandle?: string | null;
1657
+ targetHandle?: string | null;
1658
+ animated?: boolean;
1659
+ hidden?: boolean;
1660
+ deletable?: boolean;
1661
+ selectable?: boolean;
1662
+ selected?: boolean;
1663
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
1664
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
1665
+ zIndex?: number;
1666
+ ariaLabel?: string;
1667
+ interactionWidth?: number;
1668
+ label?: import('react').ReactNode;
1669
+ labelStyle?: import('react').CSSProperties;
1670
+ labelShowBg?: boolean;
1671
+ labelBgStyle?: import('react').CSSProperties;
1672
+ labelBgPadding?: [number, number];
1673
+ labelBgBorderRadius?: number;
1674
+ style?: import('react').CSSProperties;
1675
+ className?: string;
1676
+ updatable?: import('@xyflow/react').EdgeUpdatable;
1677
+ focusable?: boolean;
1678
+ data: import('..').RelationshipData;
1679
+ readonly id: string;
1680
+ readonly type: "relationship";
1681
+ }>> | ((state: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
1682
+ source: string;
1683
+ target: string;
1684
+ sourceHandle?: string | null;
1685
+ targetHandle?: string | null;
1686
+ animated?: boolean;
1687
+ hidden?: boolean;
1688
+ deletable?: boolean;
1689
+ selectable?: boolean;
1690
+ selected?: boolean;
1691
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
1692
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
1693
+ zIndex?: number;
1694
+ ariaLabel?: string;
1695
+ interactionWidth?: number;
1696
+ label?: import('react').ReactNode;
1697
+ labelStyle?: import('react').CSSProperties;
1698
+ labelShowBg?: boolean;
1699
+ labelBgStyle?: import('react').CSSProperties;
1700
+ labelBgPadding?: [number, number];
1701
+ labelBgBorderRadius?: number;
1702
+ style?: import('react').CSSProperties;
1703
+ className?: string;
1704
+ updatable?: import('@xyflow/react').EdgeUpdatable;
1705
+ focusable?: boolean;
1706
+ data: import('..').RelationshipData;
1707
+ readonly id: string;
1708
+ readonly type: "relationship";
1709
+ }>) => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
1710
+ source: string;
1711
+ target: string;
1712
+ sourceHandle?: string | null;
1713
+ targetHandle?: string | null;
1714
+ animated?: boolean;
1715
+ hidden?: boolean;
1716
+ deletable?: boolean;
1717
+ selectable?: boolean;
1718
+ selected?: boolean;
1719
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
1720
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
1721
+ zIndex?: number;
1722
+ ariaLabel?: string;
1723
+ interactionWidth?: number;
1724
+ label?: import('react').ReactNode;
1725
+ labelStyle?: import('react').CSSProperties;
1726
+ labelShowBg?: boolean;
1727
+ labelBgStyle?: import('react').CSSProperties;
1728
+ labelBgPadding?: [number, number];
1729
+ labelBgBorderRadius?: number;
1730
+ style?: import('react').CSSProperties;
1731
+ className?: string;
1732
+ updatable?: import('@xyflow/react').EdgeUpdatable;
1733
+ focusable?: boolean;
1734
+ data: import('..').RelationshipData;
1735
+ readonly id: string;
1736
+ readonly type: "relationship";
1737
+ }> | Partial<import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
1738
+ source: string;
1739
+ target: string;
1740
+ sourceHandle?: string | null;
1741
+ targetHandle?: string | null;
1742
+ animated?: boolean;
1743
+ hidden?: boolean;
1744
+ deletable?: boolean;
1745
+ selectable?: boolean;
1746
+ selected?: boolean;
1747
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
1748
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
1749
+ zIndex?: number;
1750
+ ariaLabel?: string;
1751
+ interactionWidth?: number;
1752
+ label?: import('react').ReactNode;
1753
+ labelStyle?: import('react').CSSProperties;
1754
+ labelShowBg?: boolean;
1755
+ labelBgStyle?: import('react').CSSProperties;
1756
+ labelBgPadding?: [number, number];
1757
+ labelBgBorderRadius?: number;
1758
+ style?: import('react').CSSProperties;
1759
+ className?: string;
1760
+ updatable?: import('@xyflow/react').EdgeUpdatable;
1761
+ focusable?: boolean;
1762
+ data: import('..').RelationshipData;
1763
+ readonly id: string;
1764
+ readonly type: "relationship";
1765
+ }>>), replace?: boolean | undefined) => void;
1766
+ subscribe: (listener: (state: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
1767
+ source: string;
1768
+ target: string;
1769
+ sourceHandle?: string | null;
1770
+ targetHandle?: string | null;
1771
+ animated?: boolean;
1772
+ hidden?: boolean;
1773
+ deletable?: boolean;
1774
+ selectable?: boolean;
1775
+ selected?: boolean;
1776
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
1777
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
1778
+ zIndex?: number;
1779
+ ariaLabel?: string;
1780
+ interactionWidth?: number;
1781
+ label?: import('react').ReactNode;
1782
+ labelStyle?: import('react').CSSProperties;
1783
+ labelShowBg?: boolean;
1784
+ labelBgStyle?: import('react').CSSProperties;
1785
+ labelBgPadding?: [number, number];
1786
+ labelBgBorderRadius?: number;
1787
+ style?: import('react').CSSProperties;
1788
+ className?: string;
1789
+ updatable?: import('@xyflow/react').EdgeUpdatable;
1790
+ focusable?: boolean;
1791
+ data: import('..').RelationshipData;
1792
+ readonly id: string;
1793
+ readonly type: "relationship";
1794
+ }>, prevState: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
1795
+ source: string;
1796
+ target: string;
1797
+ sourceHandle?: string | null;
1798
+ targetHandle?: string | null;
1799
+ animated?: boolean;
1800
+ hidden?: boolean;
1801
+ deletable?: boolean;
1802
+ selectable?: boolean;
1803
+ selected?: boolean;
1804
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
1805
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
1806
+ zIndex?: number;
1807
+ ariaLabel?: string;
1808
+ interactionWidth?: number;
1809
+ label?: import('react').ReactNode;
1810
+ labelStyle?: import('react').CSSProperties;
1811
+ labelShowBg?: boolean;
1812
+ labelBgStyle?: import('react').CSSProperties;
1813
+ labelBgPadding?: [number, number];
1814
+ labelBgBorderRadius?: number;
1815
+ style?: import('react').CSSProperties;
1816
+ className?: string;
1817
+ updatable?: import('@xyflow/react').EdgeUpdatable;
1818
+ focusable?: boolean;
1819
+ data: import('..').RelationshipData;
1820
+ readonly id: string;
1821
+ readonly type: "relationship";
1822
+ }>) => void) => () => void;
1823
+ }) => void;
1824
+ triggerOnNavigateTo: (xynodeId: string, event: import('react').MouseEvent<Element, MouseEvent>) => void;
1825
+ fitDiagram: (xyStore: {
1826
+ getState: () => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
1827
+ source: string;
1828
+ target: string;
1829
+ sourceHandle?: string | null;
1830
+ targetHandle?: string | null;
1831
+ animated?: boolean;
1832
+ hidden?: boolean;
1833
+ deletable?: boolean;
1834
+ selectable?: boolean;
1835
+ selected?: boolean;
1836
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
1837
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
1838
+ zIndex?: number;
1839
+ ariaLabel?: string;
1840
+ interactionWidth?: number;
1841
+ label?: import('react').ReactNode;
1842
+ labelStyle?: import('react').CSSProperties;
1843
+ labelShowBg?: boolean;
1844
+ labelBgStyle?: import('react').CSSProperties;
1845
+ labelBgPadding?: [number, number];
1846
+ labelBgBorderRadius?: number;
1847
+ style?: import('react').CSSProperties;
1848
+ className?: string;
1849
+ updatable?: import('@xyflow/react').EdgeUpdatable;
1850
+ focusable?: boolean;
1851
+ data: import('..').RelationshipData;
1852
+ readonly id: string;
1853
+ readonly type: "relationship";
1854
+ }>;
1855
+ setState: (partial: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
1856
+ source: string;
1857
+ target: string;
1858
+ sourceHandle?: string | null;
1859
+ targetHandle?: string | null;
1860
+ animated?: boolean;
1861
+ hidden?: boolean;
1862
+ deletable?: boolean;
1863
+ selectable?: boolean;
1864
+ selected?: boolean;
1865
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
1866
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
1867
+ zIndex?: number;
1868
+ ariaLabel?: string;
1869
+ interactionWidth?: number;
1870
+ label?: import('react').ReactNode;
1871
+ labelStyle?: import('react').CSSProperties;
1872
+ labelShowBg?: boolean;
1873
+ labelBgStyle?: import('react').CSSProperties;
1874
+ labelBgPadding?: [number, number];
1875
+ labelBgBorderRadius?: number;
1876
+ style?: import('react').CSSProperties;
1877
+ className?: string;
1878
+ updatable?: import('@xyflow/react').EdgeUpdatable;
1879
+ focusable?: boolean;
1880
+ data: import('..').RelationshipData;
1881
+ readonly id: string;
1882
+ readonly type: "relationship";
1883
+ }> | Partial<import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
1884
+ source: string;
1885
+ target: string;
1886
+ sourceHandle?: string | null;
1887
+ targetHandle?: string | null;
1888
+ animated?: boolean;
1889
+ hidden?: boolean;
1890
+ deletable?: boolean;
1891
+ selectable?: boolean;
1892
+ selected?: boolean;
1893
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
1894
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
1895
+ zIndex?: number;
1896
+ ariaLabel?: string;
1897
+ interactionWidth?: number;
1898
+ label?: import('react').ReactNode;
1899
+ labelStyle?: import('react').CSSProperties;
1900
+ labelShowBg?: boolean;
1901
+ labelBgStyle?: import('react').CSSProperties;
1902
+ labelBgPadding?: [number, number];
1903
+ labelBgBorderRadius?: number;
1904
+ style?: import('react').CSSProperties;
1905
+ className?: string;
1906
+ updatable?: import('@xyflow/react').EdgeUpdatable;
1907
+ focusable?: boolean;
1908
+ data: import('..').RelationshipData;
1909
+ readonly id: string;
1910
+ readonly type: "relationship";
1911
+ }>> | ((state: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
1912
+ source: string;
1913
+ target: string;
1914
+ sourceHandle?: string | null;
1915
+ targetHandle?: string | null;
1916
+ animated?: boolean;
1917
+ hidden?: boolean;
1918
+ deletable?: boolean;
1919
+ selectable?: boolean;
1920
+ selected?: boolean;
1921
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
1922
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
1923
+ zIndex?: number;
1924
+ ariaLabel?: string;
1925
+ interactionWidth?: number;
1926
+ label?: import('react').ReactNode;
1927
+ labelStyle?: import('react').CSSProperties;
1928
+ labelShowBg?: boolean;
1929
+ labelBgStyle?: import('react').CSSProperties;
1930
+ labelBgPadding?: [number, number];
1931
+ labelBgBorderRadius?: number;
1932
+ style?: import('react').CSSProperties;
1933
+ className?: string;
1934
+ updatable?: import('@xyflow/react').EdgeUpdatable;
1935
+ focusable?: boolean;
1936
+ data: import('..').RelationshipData;
1937
+ readonly id: string;
1938
+ readonly type: "relationship";
1939
+ }>) => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
1940
+ source: string;
1941
+ target: string;
1942
+ sourceHandle?: string | null;
1943
+ targetHandle?: string | null;
1944
+ animated?: boolean;
1945
+ hidden?: boolean;
1946
+ deletable?: boolean;
1947
+ selectable?: boolean;
1948
+ selected?: boolean;
1949
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
1950
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
1951
+ zIndex?: number;
1952
+ ariaLabel?: string;
1953
+ interactionWidth?: number;
1954
+ label?: import('react').ReactNode;
1955
+ labelStyle?: import('react').CSSProperties;
1956
+ labelShowBg?: boolean;
1957
+ labelBgStyle?: import('react').CSSProperties;
1958
+ labelBgPadding?: [number, number];
1959
+ labelBgBorderRadius?: number;
1960
+ style?: import('react').CSSProperties;
1961
+ className?: string;
1962
+ updatable?: import('@xyflow/react').EdgeUpdatable;
1963
+ focusable?: boolean;
1964
+ data: import('..').RelationshipData;
1965
+ readonly id: string;
1966
+ readonly type: "relationship";
1967
+ }> | Partial<import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
1968
+ source: string;
1969
+ target: string;
1970
+ sourceHandle?: string | null;
1971
+ targetHandle?: string | null;
1972
+ animated?: boolean;
1973
+ hidden?: boolean;
1974
+ deletable?: boolean;
1975
+ selectable?: boolean;
1976
+ selected?: boolean;
1977
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
1978
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
1979
+ zIndex?: number;
1980
+ ariaLabel?: string;
1981
+ interactionWidth?: number;
1982
+ label?: import('react').ReactNode;
1983
+ labelStyle?: import('react').CSSProperties;
1984
+ labelShowBg?: boolean;
1985
+ labelBgStyle?: import('react').CSSProperties;
1986
+ labelBgPadding?: [number, number];
1987
+ labelBgBorderRadius?: number;
1988
+ style?: import('react').CSSProperties;
1989
+ className?: string;
1990
+ updatable?: import('@xyflow/react').EdgeUpdatable;
1991
+ focusable?: boolean;
1992
+ data: import('..').RelationshipData;
1993
+ readonly id: string;
1994
+ readonly type: "relationship";
1995
+ }>>), replace?: boolean | undefined) => void;
1996
+ subscribe: (listener: (state: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
1997
+ source: string;
1998
+ target: string;
1999
+ sourceHandle?: string | null;
2000
+ targetHandle?: string | null;
2001
+ animated?: boolean;
2002
+ hidden?: boolean;
2003
+ deletable?: boolean;
2004
+ selectable?: boolean;
2005
+ selected?: boolean;
2006
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
2007
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
2008
+ zIndex?: number;
2009
+ ariaLabel?: string;
2010
+ interactionWidth?: number;
2011
+ label?: import('react').ReactNode;
2012
+ labelStyle?: import('react').CSSProperties;
2013
+ labelShowBg?: boolean;
2014
+ labelBgStyle?: import('react').CSSProperties;
2015
+ labelBgPadding?: [number, number];
2016
+ labelBgBorderRadius?: number;
2017
+ style?: import('react').CSSProperties;
2018
+ className?: string;
2019
+ updatable?: import('@xyflow/react').EdgeUpdatable;
2020
+ focusable?: boolean;
2021
+ data: import('..').RelationshipData;
2022
+ readonly id: string;
2023
+ readonly type: "relationship";
2024
+ }>, prevState: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2025
+ source: string;
2026
+ target: string;
2027
+ sourceHandle?: string | null;
2028
+ targetHandle?: string | null;
2029
+ animated?: boolean;
2030
+ hidden?: boolean;
2031
+ deletable?: boolean;
2032
+ selectable?: boolean;
2033
+ selected?: boolean;
2034
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
2035
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
2036
+ zIndex?: number;
2037
+ ariaLabel?: string;
2038
+ interactionWidth?: number;
2039
+ label?: import('react').ReactNode;
2040
+ labelStyle?: import('react').CSSProperties;
2041
+ labelShowBg?: boolean;
2042
+ labelBgStyle?: import('react').CSSProperties;
2043
+ labelBgPadding?: [number, number];
2044
+ labelBgBorderRadius?: number;
2045
+ style?: import('react').CSSProperties;
2046
+ className?: string;
2047
+ updatable?: import('@xyflow/react').EdgeUpdatable;
2048
+ focusable?: boolean;
2049
+ data: import('..').RelationshipData;
2050
+ readonly id: string;
2051
+ readonly type: "relationship";
2052
+ }>) => void) => () => void;
2053
+ }) => void;
2054
+ nextDynamicStep: (increment?: number | undefined) => void;
2055
+ stopDynamicView: () => void;
2056
+ }) => {
2057
+ view: import('@likec4/core').DiagramView;
2058
+ readonly: boolean;
2059
+ showElementLinks: boolean;
2060
+ fitViewEnabled: boolean;
2061
+ fitViewPadding: number;
2062
+ zoomable: boolean;
2063
+ pannable: boolean;
2064
+ nodesDraggable: boolean;
2065
+ nodesSelectable: boolean;
2066
+ experimentalEdgeEditing: boolean;
2067
+ viewSyncState: "synced" | "changed";
2068
+ viewSyncDebounceTimeout: number | null;
2069
+ xyflow: import('..').XYFlowInstance;
2070
+ initialized: boolean;
2071
+ xyflowSynced: boolean;
2072
+ activeDynamicViewStep: number | null;
2073
+ lastClickedNodeId: string | null;
2074
+ lastClickedEdgeId: string | null;
2075
+ focusedNodeId: string | null;
2076
+ hoveredNodeId: string | null;
2077
+ hoveredEdgeId: string | null;
2078
+ dimmed: ReadonlySet<string>;
2079
+ previousViews: import('@likec4/core').DiagramView[];
2080
+ lastOnNavigate: {
2081
+ fromView: import('@likec4/core').ViewID;
2082
+ toView: import('@likec4/core').ViewID;
2083
+ element: import('@likec4/core').DiagramNode;
2084
+ elementScreenPosition: import('@xyflow/system').XYPosition;
2085
+ positionCorrected: boolean;
2086
+ } | null;
2087
+ viewportChanged: boolean;
2088
+ onChange: import('..').OnChange | null | undefined;
2089
+ onNavigateTo: import('..').OnNavigateTo | null | undefined;
2090
+ onNodeClick: import('..').OnNodeClick | null | undefined;
2091
+ onNodeContextMenu: import('..').OnNodeClick | null | undefined;
2092
+ onCanvasContextMenu: import('..').OnCanvasClick | null | undefined;
2093
+ onEdgeClick: import('..').OnEdgeClick | null | undefined;
2094
+ onEdgeContextMenu: import('..').OnEdgeClick | null | undefined;
2095
+ onCanvasClick: import('..').OnCanvasClick | null | undefined;
2096
+ onCanvasDblClick: import('..').OnCanvasClick | null | undefined;
2097
+ isDynamicView: () => boolean;
2098
+ updateView: (view: import('@likec4/core').DiagramView) => void;
2099
+ focusOnNode: (nodeId: string) => void;
2100
+ setHoveredNode: (nodeId: string | null) => void;
2101
+ setHoveredEdge: (edgeId: string | null) => void;
2102
+ setLastClickedNode: (nodeId: string | null) => void;
2103
+ setLastClickedEdge: (edgeId: string | null) => void;
2104
+ resetLastClicked: () => void;
2105
+ getElement: (id: import('@likec4/core').Fqn) => import('@likec4/core').DiagramNode | null;
2106
+ triggerChangeElementStyle: (change: import("..").Changes.ChangeElementStyle) => void;
2107
+ triggerSaveManualLayout: (xystore: {
2108
+ getState: () => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2109
+ source: string;
2110
+ target: string;
2111
+ sourceHandle?: string | null;
2112
+ targetHandle?: string | null;
2113
+ animated?: boolean;
2114
+ hidden?: boolean;
2115
+ deletable?: boolean;
2116
+ selectable?: boolean;
2117
+ selected?: boolean;
2118
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
2119
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
2120
+ zIndex?: number;
2121
+ ariaLabel?: string;
2122
+ interactionWidth?: number;
2123
+ label?: import('react').ReactNode;
2124
+ labelStyle?: import('react').CSSProperties;
2125
+ labelShowBg?: boolean;
2126
+ labelBgStyle?: import('react').CSSProperties;
2127
+ labelBgPadding?: [number, number];
2128
+ labelBgBorderRadius?: number;
2129
+ style?: import('react').CSSProperties;
2130
+ className?: string;
2131
+ updatable?: import('@xyflow/react').EdgeUpdatable;
2132
+ focusable?: boolean;
2133
+ data: import('..').RelationshipData;
2134
+ readonly id: string;
2135
+ readonly type: "relationship";
2136
+ }>;
2137
+ setState: (partial: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2138
+ source: string;
2139
+ target: string;
2140
+ sourceHandle?: string | null;
2141
+ targetHandle?: string | null;
2142
+ animated?: boolean;
2143
+ hidden?: boolean;
2144
+ deletable?: boolean;
2145
+ selectable?: boolean;
2146
+ selected?: boolean;
2147
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
2148
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
2149
+ zIndex?: number;
2150
+ ariaLabel?: string;
2151
+ interactionWidth?: number;
2152
+ label?: import('react').ReactNode;
2153
+ labelStyle?: import('react').CSSProperties;
2154
+ labelShowBg?: boolean;
2155
+ labelBgStyle?: import('react').CSSProperties;
2156
+ labelBgPadding?: [number, number];
2157
+ labelBgBorderRadius?: number;
2158
+ style?: import('react').CSSProperties;
2159
+ className?: string;
2160
+ updatable?: import('@xyflow/react').EdgeUpdatable;
2161
+ focusable?: boolean;
2162
+ data: import('..').RelationshipData;
2163
+ readonly id: string;
2164
+ readonly type: "relationship";
2165
+ }> | Partial<import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2166
+ source: string;
2167
+ target: string;
2168
+ sourceHandle?: string | null;
2169
+ targetHandle?: string | null;
2170
+ animated?: boolean;
2171
+ hidden?: boolean;
2172
+ deletable?: boolean;
2173
+ selectable?: boolean;
2174
+ selected?: boolean;
2175
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
2176
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
2177
+ zIndex?: number;
2178
+ ariaLabel?: string;
2179
+ interactionWidth?: number;
2180
+ label?: import('react').ReactNode;
2181
+ labelStyle?: import('react').CSSProperties;
2182
+ labelShowBg?: boolean;
2183
+ labelBgStyle?: import('react').CSSProperties;
2184
+ labelBgPadding?: [number, number];
2185
+ labelBgBorderRadius?: number;
2186
+ style?: import('react').CSSProperties;
2187
+ className?: string;
2188
+ updatable?: import('@xyflow/react').EdgeUpdatable;
2189
+ focusable?: boolean;
2190
+ data: import('..').RelationshipData;
2191
+ readonly id: string;
2192
+ readonly type: "relationship";
2193
+ }>> | ((state: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2194
+ source: string;
2195
+ target: string;
2196
+ sourceHandle?: string | null;
2197
+ targetHandle?: string | null;
2198
+ animated?: boolean;
2199
+ hidden?: boolean;
2200
+ deletable?: boolean;
2201
+ selectable?: boolean;
2202
+ selected?: boolean;
2203
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
2204
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
2205
+ zIndex?: number;
2206
+ ariaLabel?: string;
2207
+ interactionWidth?: number;
2208
+ label?: import('react').ReactNode;
2209
+ labelStyle?: import('react').CSSProperties;
2210
+ labelShowBg?: boolean;
2211
+ labelBgStyle?: import('react').CSSProperties;
2212
+ labelBgPadding?: [number, number];
2213
+ labelBgBorderRadius?: number;
2214
+ style?: import('react').CSSProperties;
2215
+ className?: string;
2216
+ updatable?: import('@xyflow/react').EdgeUpdatable;
2217
+ focusable?: boolean;
2218
+ data: import('..').RelationshipData;
2219
+ readonly id: string;
2220
+ readonly type: "relationship";
2221
+ }>) => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2222
+ source: string;
2223
+ target: string;
2224
+ sourceHandle?: string | null;
2225
+ targetHandle?: string | null;
2226
+ animated?: boolean;
2227
+ hidden?: boolean;
2228
+ deletable?: boolean;
2229
+ selectable?: boolean;
2230
+ selected?: boolean;
2231
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
2232
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
2233
+ zIndex?: number;
2234
+ ariaLabel?: string;
2235
+ interactionWidth?: number;
2236
+ label?: import('react').ReactNode;
2237
+ labelStyle?: import('react').CSSProperties;
2238
+ labelShowBg?: boolean;
2239
+ labelBgStyle?: import('react').CSSProperties;
2240
+ labelBgPadding?: [number, number];
2241
+ labelBgBorderRadius?: number;
2242
+ style?: import('react').CSSProperties;
2243
+ className?: string;
2244
+ updatable?: import('@xyflow/react').EdgeUpdatable;
2245
+ focusable?: boolean;
2246
+ data: import('..').RelationshipData;
2247
+ readonly id: string;
2248
+ readonly type: "relationship";
2249
+ }> | Partial<import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2250
+ source: string;
2251
+ target: string;
2252
+ sourceHandle?: string | null;
2253
+ targetHandle?: string | null;
2254
+ animated?: boolean;
2255
+ hidden?: boolean;
2256
+ deletable?: boolean;
2257
+ selectable?: boolean;
2258
+ selected?: boolean;
2259
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
2260
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
2261
+ zIndex?: number;
2262
+ ariaLabel?: string;
2263
+ interactionWidth?: number;
2264
+ label?: import('react').ReactNode;
2265
+ labelStyle?: import('react').CSSProperties;
2266
+ labelShowBg?: boolean;
2267
+ labelBgStyle?: import('react').CSSProperties;
2268
+ labelBgPadding?: [number, number];
2269
+ labelBgBorderRadius?: number;
2270
+ style?: import('react').CSSProperties;
2271
+ className?: string;
2272
+ updatable?: import('@xyflow/react').EdgeUpdatable;
2273
+ focusable?: boolean;
2274
+ data: import('..').RelationshipData;
2275
+ readonly id: string;
2276
+ readonly type: "relationship";
2277
+ }>>), replace?: boolean | undefined) => void;
2278
+ subscribe: (listener: (state: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2279
+ source: string;
2280
+ target: string;
2281
+ sourceHandle?: string | null;
2282
+ targetHandle?: string | null;
2283
+ animated?: boolean;
2284
+ hidden?: boolean;
2285
+ deletable?: boolean;
2286
+ selectable?: boolean;
2287
+ selected?: boolean;
2288
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
2289
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
2290
+ zIndex?: number;
2291
+ ariaLabel?: string;
2292
+ interactionWidth?: number;
2293
+ label?: import('react').ReactNode;
2294
+ labelStyle?: import('react').CSSProperties;
2295
+ labelShowBg?: boolean;
2296
+ labelBgStyle?: import('react').CSSProperties;
2297
+ labelBgPadding?: [number, number];
2298
+ labelBgBorderRadius?: number;
2299
+ style?: import('react').CSSProperties;
2300
+ className?: string;
2301
+ updatable?: import('@xyflow/react').EdgeUpdatable;
2302
+ focusable?: boolean;
2303
+ data: import('..').RelationshipData;
2304
+ readonly id: string;
2305
+ readonly type: "relationship";
2306
+ }>, prevState: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2307
+ source: string;
2308
+ target: string;
2309
+ sourceHandle?: string | null;
2310
+ targetHandle?: string | null;
2311
+ animated?: boolean;
2312
+ hidden?: boolean;
2313
+ deletable?: boolean;
2314
+ selectable?: boolean;
2315
+ selected?: boolean;
2316
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
2317
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
2318
+ zIndex?: number;
2319
+ ariaLabel?: string;
2320
+ interactionWidth?: number;
2321
+ label?: import('react').ReactNode;
2322
+ labelStyle?: import('react').CSSProperties;
2323
+ labelShowBg?: boolean;
2324
+ labelBgStyle?: import('react').CSSProperties;
2325
+ labelBgPadding?: [number, number];
2326
+ labelBgBorderRadius?: number;
2327
+ style?: import('react').CSSProperties;
2328
+ className?: string;
2329
+ updatable?: import('@xyflow/react').EdgeUpdatable;
2330
+ focusable?: boolean;
2331
+ data: import('..').RelationshipData;
2332
+ readonly id: string;
2333
+ readonly type: "relationship";
2334
+ }>) => void) => () => void;
2335
+ }) => void;
2336
+ triggerOnNavigateTo: (xynodeId: string, event: import('react').MouseEvent<Element, MouseEvent>) => void;
2337
+ fitDiagram: (xyStore: {
2338
+ getState: () => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2339
+ source: string;
2340
+ target: string;
2341
+ sourceHandle?: string | null;
2342
+ targetHandle?: string | null;
2343
+ animated?: boolean;
2344
+ hidden?: boolean;
2345
+ deletable?: boolean;
2346
+ selectable?: boolean;
2347
+ selected?: boolean;
2348
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
2349
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
2350
+ zIndex?: number;
2351
+ ariaLabel?: string;
2352
+ interactionWidth?: number;
2353
+ label?: import('react').ReactNode;
2354
+ labelStyle?: import('react').CSSProperties;
2355
+ labelShowBg?: boolean;
2356
+ labelBgStyle?: import('react').CSSProperties;
2357
+ labelBgPadding?: [number, number];
2358
+ labelBgBorderRadius?: number;
2359
+ style?: import('react').CSSProperties;
2360
+ className?: string;
2361
+ updatable?: import('@xyflow/react').EdgeUpdatable;
2362
+ focusable?: boolean;
2363
+ data: import('..').RelationshipData;
2364
+ readonly id: string;
2365
+ readonly type: "relationship";
2366
+ }>;
2367
+ setState: (partial: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2368
+ source: string;
2369
+ target: string;
2370
+ sourceHandle?: string | null;
2371
+ targetHandle?: string | null;
2372
+ animated?: boolean;
2373
+ hidden?: boolean;
2374
+ deletable?: boolean;
2375
+ selectable?: boolean;
2376
+ selected?: boolean;
2377
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
2378
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
2379
+ zIndex?: number;
2380
+ ariaLabel?: string;
2381
+ interactionWidth?: number;
2382
+ label?: import('react').ReactNode;
2383
+ labelStyle?: import('react').CSSProperties;
2384
+ labelShowBg?: boolean;
2385
+ labelBgStyle?: import('react').CSSProperties;
2386
+ labelBgPadding?: [number, number];
2387
+ labelBgBorderRadius?: number;
2388
+ style?: import('react').CSSProperties;
2389
+ className?: string;
2390
+ updatable?: import('@xyflow/react').EdgeUpdatable;
2391
+ focusable?: boolean;
2392
+ data: import('..').RelationshipData;
2393
+ readonly id: string;
2394
+ readonly type: "relationship";
2395
+ }> | Partial<import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2396
+ source: string;
2397
+ target: string;
2398
+ sourceHandle?: string | null;
2399
+ targetHandle?: string | null;
2400
+ animated?: boolean;
2401
+ hidden?: boolean;
2402
+ deletable?: boolean;
2403
+ selectable?: boolean;
2404
+ selected?: boolean;
2405
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
2406
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
2407
+ zIndex?: number;
2408
+ ariaLabel?: string;
2409
+ interactionWidth?: number;
2410
+ label?: import('react').ReactNode;
2411
+ labelStyle?: import('react').CSSProperties;
2412
+ labelShowBg?: boolean;
2413
+ labelBgStyle?: import('react').CSSProperties;
2414
+ labelBgPadding?: [number, number];
2415
+ labelBgBorderRadius?: number;
2416
+ style?: import('react').CSSProperties;
2417
+ className?: string;
2418
+ updatable?: import('@xyflow/react').EdgeUpdatable;
2419
+ focusable?: boolean;
2420
+ data: import('..').RelationshipData;
2421
+ readonly id: string;
2422
+ readonly type: "relationship";
2423
+ }>> | ((state: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2424
+ source: string;
2425
+ target: string;
2426
+ sourceHandle?: string | null;
2427
+ targetHandle?: string | null;
2428
+ animated?: boolean;
2429
+ hidden?: boolean;
2430
+ deletable?: boolean;
2431
+ selectable?: boolean;
2432
+ selected?: boolean;
2433
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
2434
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
2435
+ zIndex?: number;
2436
+ ariaLabel?: string;
2437
+ interactionWidth?: number;
2438
+ label?: import('react').ReactNode;
2439
+ labelStyle?: import('react').CSSProperties;
2440
+ labelShowBg?: boolean;
2441
+ labelBgStyle?: import('react').CSSProperties;
2442
+ labelBgPadding?: [number, number];
2443
+ labelBgBorderRadius?: number;
2444
+ style?: import('react').CSSProperties;
2445
+ className?: string;
2446
+ updatable?: import('@xyflow/react').EdgeUpdatable;
2447
+ focusable?: boolean;
2448
+ data: import('..').RelationshipData;
2449
+ readonly id: string;
2450
+ readonly type: "relationship";
2451
+ }>) => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2452
+ source: string;
2453
+ target: string;
2454
+ sourceHandle?: string | null;
2455
+ targetHandle?: string | null;
2456
+ animated?: boolean;
2457
+ hidden?: boolean;
2458
+ deletable?: boolean;
2459
+ selectable?: boolean;
2460
+ selected?: boolean;
2461
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
2462
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
2463
+ zIndex?: number;
2464
+ ariaLabel?: string;
2465
+ interactionWidth?: number;
2466
+ label?: import('react').ReactNode;
2467
+ labelStyle?: import('react').CSSProperties;
2468
+ labelShowBg?: boolean;
2469
+ labelBgStyle?: import('react').CSSProperties;
2470
+ labelBgPadding?: [number, number];
2471
+ labelBgBorderRadius?: number;
2472
+ style?: import('react').CSSProperties;
2473
+ className?: string;
2474
+ updatable?: import('@xyflow/react').EdgeUpdatable;
2475
+ focusable?: boolean;
2476
+ data: import('..').RelationshipData;
2477
+ readonly id: string;
2478
+ readonly type: "relationship";
2479
+ }> | Partial<import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2480
+ source: string;
2481
+ target: string;
2482
+ sourceHandle?: string | null;
2483
+ targetHandle?: string | null;
2484
+ animated?: boolean;
2485
+ hidden?: boolean;
2486
+ deletable?: boolean;
2487
+ selectable?: boolean;
2488
+ selected?: boolean;
2489
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
2490
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
2491
+ zIndex?: number;
2492
+ ariaLabel?: string;
2493
+ interactionWidth?: number;
2494
+ label?: import('react').ReactNode;
2495
+ labelStyle?: import('react').CSSProperties;
2496
+ labelShowBg?: boolean;
2497
+ labelBgStyle?: import('react').CSSProperties;
2498
+ labelBgPadding?: [number, number];
2499
+ labelBgBorderRadius?: number;
2500
+ style?: import('react').CSSProperties;
2501
+ className?: string;
2502
+ updatable?: import('@xyflow/react').EdgeUpdatable;
2503
+ focusable?: boolean;
2504
+ data: import('..').RelationshipData;
2505
+ readonly id: string;
2506
+ readonly type: "relationship";
2507
+ }>>), replace?: boolean | undefined) => void;
2508
+ subscribe: (listener: (state: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2509
+ source: string;
2510
+ target: string;
2511
+ sourceHandle?: string | null;
2512
+ targetHandle?: string | null;
2513
+ animated?: boolean;
2514
+ hidden?: boolean;
2515
+ deletable?: boolean;
2516
+ selectable?: boolean;
2517
+ selected?: boolean;
2518
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
2519
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
2520
+ zIndex?: number;
2521
+ ariaLabel?: string;
2522
+ interactionWidth?: number;
2523
+ label?: import('react').ReactNode;
2524
+ labelStyle?: import('react').CSSProperties;
2525
+ labelShowBg?: boolean;
2526
+ labelBgStyle?: import('react').CSSProperties;
2527
+ labelBgPadding?: [number, number];
2528
+ labelBgBorderRadius?: number;
2529
+ style?: import('react').CSSProperties;
2530
+ className?: string;
2531
+ updatable?: import('@xyflow/react').EdgeUpdatable;
2532
+ focusable?: boolean;
2533
+ data: import('..').RelationshipData;
2534
+ readonly id: string;
2535
+ readonly type: "relationship";
2536
+ }>, prevState: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2537
+ source: string;
2538
+ target: string;
2539
+ sourceHandle?: string | null;
2540
+ targetHandle?: string | null;
2541
+ animated?: boolean;
2542
+ hidden?: boolean;
2543
+ deletable?: boolean;
2544
+ selectable?: boolean;
2545
+ selected?: boolean;
2546
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
2547
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
2548
+ zIndex?: number;
2549
+ ariaLabel?: string;
2550
+ interactionWidth?: number;
2551
+ label?: import('react').ReactNode;
2552
+ labelStyle?: import('react').CSSProperties;
2553
+ labelShowBg?: boolean;
2554
+ labelBgStyle?: import('react').CSSProperties;
2555
+ labelBgPadding?: [number, number];
2556
+ labelBgBorderRadius?: number;
2557
+ style?: import('react').CSSProperties;
2558
+ className?: string;
2559
+ updatable?: import('@xyflow/react').EdgeUpdatable;
2560
+ focusable?: boolean;
2561
+ data: import('..').RelationshipData;
2562
+ readonly id: string;
2563
+ readonly type: "relationship";
2564
+ }>) => void) => () => void;
2565
+ }) => void;
2566
+ nextDynamicStep: (increment?: number | undefined) => void;
2567
+ stopDynamicView: () => void;
2568
+ } | Partial<{
2569
+ view: import('@likec4/core').DiagramView;
2570
+ readonly: boolean;
2571
+ showElementLinks: boolean;
2572
+ fitViewEnabled: boolean;
2573
+ fitViewPadding: number;
2574
+ zoomable: boolean;
2575
+ pannable: boolean;
2576
+ nodesDraggable: boolean;
2577
+ nodesSelectable: boolean;
2578
+ experimentalEdgeEditing: boolean;
2579
+ viewSyncState: "synced" | "changed";
2580
+ viewSyncDebounceTimeout: number | null;
2581
+ xyflow: import('..').XYFlowInstance;
2582
+ initialized: boolean;
2583
+ xyflowSynced: boolean;
2584
+ activeDynamicViewStep: number | null;
2585
+ lastClickedNodeId: string | null;
2586
+ lastClickedEdgeId: string | null;
2587
+ focusedNodeId: string | null;
2588
+ hoveredNodeId: string | null;
2589
+ hoveredEdgeId: string | null;
2590
+ dimmed: ReadonlySet<string>;
2591
+ previousViews: import('@likec4/core').DiagramView[];
2592
+ lastOnNavigate: {
2593
+ fromView: import('@likec4/core').ViewID;
2594
+ toView: import('@likec4/core').ViewID;
2595
+ element: import('@likec4/core').DiagramNode;
2596
+ elementScreenPosition: import('@xyflow/system').XYPosition;
2597
+ positionCorrected: boolean;
2598
+ } | null;
2599
+ viewportChanged: boolean;
2600
+ onChange: import('..').OnChange | null | undefined;
2601
+ onNavigateTo: import('..').OnNavigateTo | null | undefined;
2602
+ onNodeClick: import('..').OnNodeClick | null | undefined;
2603
+ onNodeContextMenu: import('..').OnNodeClick | null | undefined;
2604
+ onCanvasContextMenu: import('..').OnCanvasClick | null | undefined;
2605
+ onEdgeClick: import('..').OnEdgeClick | null | undefined;
2606
+ onEdgeContextMenu: import('..').OnEdgeClick | null | undefined;
2607
+ onCanvasClick: import('..').OnCanvasClick | null | undefined;
2608
+ onCanvasDblClick: import('..').OnCanvasClick | null | undefined;
2609
+ isDynamicView: () => boolean;
2610
+ updateView: (view: import('@likec4/core').DiagramView) => void;
2611
+ focusOnNode: (nodeId: string) => void;
2612
+ setHoveredNode: (nodeId: string | null) => void;
2613
+ setHoveredEdge: (edgeId: string | null) => void;
2614
+ setLastClickedNode: (nodeId: string | null) => void;
2615
+ setLastClickedEdge: (edgeId: string | null) => void;
2616
+ resetLastClicked: () => void;
2617
+ getElement: (id: import('@likec4/core').Fqn) => import('@likec4/core').DiagramNode | null;
2618
+ triggerChangeElementStyle: (change: import("..").Changes.ChangeElementStyle) => void;
2619
+ triggerSaveManualLayout: (xystore: {
2620
+ getState: () => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2621
+ source: string;
2622
+ target: string;
2623
+ sourceHandle?: string | null;
2624
+ targetHandle?: string | null;
2625
+ animated?: boolean;
2626
+ hidden?: boolean;
2627
+ deletable?: boolean;
2628
+ selectable?: boolean;
2629
+ selected?: boolean;
2630
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
2631
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
2632
+ zIndex?: number;
2633
+ ariaLabel?: string;
2634
+ interactionWidth?: number;
2635
+ label?: import('react').ReactNode;
2636
+ labelStyle?: import('react').CSSProperties;
2637
+ labelShowBg?: boolean;
2638
+ labelBgStyle?: import('react').CSSProperties;
2639
+ labelBgPadding?: [number, number];
2640
+ labelBgBorderRadius?: number;
2641
+ style?: import('react').CSSProperties;
2642
+ className?: string;
2643
+ updatable?: import('@xyflow/react').EdgeUpdatable;
2644
+ focusable?: boolean;
2645
+ data: import('..').RelationshipData;
2646
+ readonly id: string;
2647
+ readonly type: "relationship";
2648
+ }>;
2649
+ setState: (partial: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2650
+ source: string;
2651
+ target: string;
2652
+ sourceHandle?: string | null;
2653
+ targetHandle?: string | null;
2654
+ animated?: boolean;
2655
+ hidden?: boolean;
2656
+ deletable?: boolean;
2657
+ selectable?: boolean;
2658
+ selected?: boolean;
2659
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
2660
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
2661
+ zIndex?: number;
2662
+ ariaLabel?: string;
2663
+ interactionWidth?: number;
2664
+ label?: import('react').ReactNode;
2665
+ labelStyle?: import('react').CSSProperties;
2666
+ labelShowBg?: boolean;
2667
+ labelBgStyle?: import('react').CSSProperties;
2668
+ labelBgPadding?: [number, number];
2669
+ labelBgBorderRadius?: number;
2670
+ style?: import('react').CSSProperties;
2671
+ className?: string;
2672
+ updatable?: import('@xyflow/react').EdgeUpdatable;
2673
+ focusable?: boolean;
2674
+ data: import('..').RelationshipData;
2675
+ readonly id: string;
2676
+ readonly type: "relationship";
2677
+ }> | Partial<import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2678
+ source: string;
2679
+ target: string;
2680
+ sourceHandle?: string | null;
2681
+ targetHandle?: string | null;
2682
+ animated?: boolean;
2683
+ hidden?: boolean;
2684
+ deletable?: boolean;
2685
+ selectable?: boolean;
2686
+ selected?: boolean;
2687
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
2688
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
2689
+ zIndex?: number;
2690
+ ariaLabel?: string;
2691
+ interactionWidth?: number;
2692
+ label?: import('react').ReactNode;
2693
+ labelStyle?: import('react').CSSProperties;
2694
+ labelShowBg?: boolean;
2695
+ labelBgStyle?: import('react').CSSProperties;
2696
+ labelBgPadding?: [number, number];
2697
+ labelBgBorderRadius?: number;
2698
+ style?: import('react').CSSProperties;
2699
+ className?: string;
2700
+ updatable?: import('@xyflow/react').EdgeUpdatable;
2701
+ focusable?: boolean;
2702
+ data: import('..').RelationshipData;
2703
+ readonly id: string;
2704
+ readonly type: "relationship";
2705
+ }>> | ((state: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2706
+ source: string;
2707
+ target: string;
2708
+ sourceHandle?: string | null;
2709
+ targetHandle?: string | null;
2710
+ animated?: boolean;
2711
+ hidden?: boolean;
2712
+ deletable?: boolean;
2713
+ selectable?: boolean;
2714
+ selected?: boolean;
2715
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
2716
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
2717
+ zIndex?: number;
2718
+ ariaLabel?: string;
2719
+ interactionWidth?: number;
2720
+ label?: import('react').ReactNode;
2721
+ labelStyle?: import('react').CSSProperties;
2722
+ labelShowBg?: boolean;
2723
+ labelBgStyle?: import('react').CSSProperties;
2724
+ labelBgPadding?: [number, number];
2725
+ labelBgBorderRadius?: number;
2726
+ style?: import('react').CSSProperties;
2727
+ className?: string;
2728
+ updatable?: import('@xyflow/react').EdgeUpdatable;
2729
+ focusable?: boolean;
2730
+ data: import('..').RelationshipData;
2731
+ readonly id: string;
2732
+ readonly type: "relationship";
2733
+ }>) => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2734
+ source: string;
2735
+ target: string;
2736
+ sourceHandle?: string | null;
2737
+ targetHandle?: string | null;
2738
+ animated?: boolean;
2739
+ hidden?: boolean;
2740
+ deletable?: boolean;
2741
+ selectable?: boolean;
2742
+ selected?: boolean;
2743
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
2744
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
2745
+ zIndex?: number;
2746
+ ariaLabel?: string;
2747
+ interactionWidth?: number;
2748
+ label?: import('react').ReactNode;
2749
+ labelStyle?: import('react').CSSProperties;
2750
+ labelShowBg?: boolean;
2751
+ labelBgStyle?: import('react').CSSProperties;
2752
+ labelBgPadding?: [number, number];
2753
+ labelBgBorderRadius?: number;
2754
+ style?: import('react').CSSProperties;
2755
+ className?: string;
2756
+ updatable?: import('@xyflow/react').EdgeUpdatable;
2757
+ focusable?: boolean;
2758
+ data: import('..').RelationshipData;
2759
+ readonly id: string;
2760
+ readonly type: "relationship";
2761
+ }> | Partial<import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2762
+ source: string;
2763
+ target: string;
2764
+ sourceHandle?: string | null;
2765
+ targetHandle?: string | null;
2766
+ animated?: boolean;
2767
+ hidden?: boolean;
2768
+ deletable?: boolean;
2769
+ selectable?: boolean;
2770
+ selected?: boolean;
2771
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
2772
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
2773
+ zIndex?: number;
2774
+ ariaLabel?: string;
2775
+ interactionWidth?: number;
2776
+ label?: import('react').ReactNode;
2777
+ labelStyle?: import('react').CSSProperties;
2778
+ labelShowBg?: boolean;
2779
+ labelBgStyle?: import('react').CSSProperties;
2780
+ labelBgPadding?: [number, number];
2781
+ labelBgBorderRadius?: number;
2782
+ style?: import('react').CSSProperties;
2783
+ className?: string;
2784
+ updatable?: import('@xyflow/react').EdgeUpdatable;
2785
+ focusable?: boolean;
2786
+ data: import('..').RelationshipData;
2787
+ readonly id: string;
2788
+ readonly type: "relationship";
2789
+ }>>), replace?: boolean | undefined) => void;
2790
+ subscribe: (listener: (state: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2791
+ source: string;
2792
+ target: string;
2793
+ sourceHandle?: string | null;
2794
+ targetHandle?: string | null;
2795
+ animated?: boolean;
2796
+ hidden?: boolean;
2797
+ deletable?: boolean;
2798
+ selectable?: boolean;
2799
+ selected?: boolean;
2800
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
2801
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
2802
+ zIndex?: number;
2803
+ ariaLabel?: string;
2804
+ interactionWidth?: number;
2805
+ label?: import('react').ReactNode;
2806
+ labelStyle?: import('react').CSSProperties;
2807
+ labelShowBg?: boolean;
2808
+ labelBgStyle?: import('react').CSSProperties;
2809
+ labelBgPadding?: [number, number];
2810
+ labelBgBorderRadius?: number;
2811
+ style?: import('react').CSSProperties;
2812
+ className?: string;
2813
+ updatable?: import('@xyflow/react').EdgeUpdatable;
2814
+ focusable?: boolean;
2815
+ data: import('..').RelationshipData;
2816
+ readonly id: string;
2817
+ readonly type: "relationship";
2818
+ }>, prevState: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2819
+ source: string;
2820
+ target: string;
2821
+ sourceHandle?: string | null;
2822
+ targetHandle?: string | null;
2823
+ animated?: boolean;
2824
+ hidden?: boolean;
2825
+ deletable?: boolean;
2826
+ selectable?: boolean;
2827
+ selected?: boolean;
2828
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
2829
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
2830
+ zIndex?: number;
2831
+ ariaLabel?: string;
2832
+ interactionWidth?: number;
2833
+ label?: import('react').ReactNode;
2834
+ labelStyle?: import('react').CSSProperties;
2835
+ labelShowBg?: boolean;
2836
+ labelBgStyle?: import('react').CSSProperties;
2837
+ labelBgPadding?: [number, number];
2838
+ labelBgBorderRadius?: number;
2839
+ style?: import('react').CSSProperties;
2840
+ className?: string;
2841
+ updatable?: import('@xyflow/react').EdgeUpdatable;
2842
+ focusable?: boolean;
2843
+ data: import('..').RelationshipData;
2844
+ readonly id: string;
2845
+ readonly type: "relationship";
2846
+ }>) => void) => () => void;
2847
+ }) => void;
2848
+ triggerOnNavigateTo: (xynodeId: string, event: import('react').MouseEvent<Element, MouseEvent>) => void;
2849
+ fitDiagram: (xyStore: {
2850
+ getState: () => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2851
+ source: string;
2852
+ target: string;
2853
+ sourceHandle?: string | null;
2854
+ targetHandle?: string | null;
2855
+ animated?: boolean;
2856
+ hidden?: boolean;
2857
+ deletable?: boolean;
2858
+ selectable?: boolean;
2859
+ selected?: boolean;
2860
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
2861
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
2862
+ zIndex?: number;
2863
+ ariaLabel?: string;
2864
+ interactionWidth?: number;
2865
+ label?: import('react').ReactNode;
2866
+ labelStyle?: import('react').CSSProperties;
2867
+ labelShowBg?: boolean;
2868
+ labelBgStyle?: import('react').CSSProperties;
2869
+ labelBgPadding?: [number, number];
2870
+ labelBgBorderRadius?: number;
2871
+ style?: import('react').CSSProperties;
2872
+ className?: string;
2873
+ updatable?: import('@xyflow/react').EdgeUpdatable;
2874
+ focusable?: boolean;
2875
+ data: import('..').RelationshipData;
2876
+ readonly id: string;
2877
+ readonly type: "relationship";
2878
+ }>;
2879
+ setState: (partial: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2880
+ source: string;
2881
+ target: string;
2882
+ sourceHandle?: string | null;
2883
+ targetHandle?: string | null;
2884
+ animated?: boolean;
2885
+ hidden?: boolean;
2886
+ deletable?: boolean;
2887
+ selectable?: boolean;
2888
+ selected?: boolean;
2889
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
2890
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
2891
+ zIndex?: number;
2892
+ ariaLabel?: string;
2893
+ interactionWidth?: number;
2894
+ label?: import('react').ReactNode;
2895
+ labelStyle?: import('react').CSSProperties;
2896
+ labelShowBg?: boolean;
2897
+ labelBgStyle?: import('react').CSSProperties;
2898
+ labelBgPadding?: [number, number];
2899
+ labelBgBorderRadius?: number;
2900
+ style?: import('react').CSSProperties;
2901
+ className?: string;
2902
+ updatable?: import('@xyflow/react').EdgeUpdatable;
2903
+ focusable?: boolean;
2904
+ data: import('..').RelationshipData;
2905
+ readonly id: string;
2906
+ readonly type: "relationship";
2907
+ }> | Partial<import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2908
+ source: string;
2909
+ target: string;
2910
+ sourceHandle?: string | null;
2911
+ targetHandle?: string | null;
2912
+ animated?: boolean;
2913
+ hidden?: boolean;
2914
+ deletable?: boolean;
2915
+ selectable?: boolean;
2916
+ selected?: boolean;
2917
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
2918
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
2919
+ zIndex?: number;
2920
+ ariaLabel?: string;
2921
+ interactionWidth?: number;
2922
+ label?: import('react').ReactNode;
2923
+ labelStyle?: import('react').CSSProperties;
2924
+ labelShowBg?: boolean;
2925
+ labelBgStyle?: import('react').CSSProperties;
2926
+ labelBgPadding?: [number, number];
2927
+ labelBgBorderRadius?: number;
2928
+ style?: import('react').CSSProperties;
2929
+ className?: string;
2930
+ updatable?: import('@xyflow/react').EdgeUpdatable;
2931
+ focusable?: boolean;
2932
+ data: import('..').RelationshipData;
2933
+ readonly id: string;
2934
+ readonly type: "relationship";
2935
+ }>> | ((state: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2936
+ source: string;
2937
+ target: string;
2938
+ sourceHandle?: string | null;
2939
+ targetHandle?: string | null;
2940
+ animated?: boolean;
2941
+ hidden?: boolean;
2942
+ deletable?: boolean;
2943
+ selectable?: boolean;
2944
+ selected?: boolean;
2945
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
2946
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
2947
+ zIndex?: number;
2948
+ ariaLabel?: string;
2949
+ interactionWidth?: number;
2950
+ label?: import('react').ReactNode;
2951
+ labelStyle?: import('react').CSSProperties;
2952
+ labelShowBg?: boolean;
2953
+ labelBgStyle?: import('react').CSSProperties;
2954
+ labelBgPadding?: [number, number];
2955
+ labelBgBorderRadius?: number;
2956
+ style?: import('react').CSSProperties;
2957
+ className?: string;
2958
+ updatable?: import('@xyflow/react').EdgeUpdatable;
2959
+ focusable?: boolean;
2960
+ data: import('..').RelationshipData;
2961
+ readonly id: string;
2962
+ readonly type: "relationship";
2963
+ }>) => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2964
+ source: string;
2965
+ target: string;
2966
+ sourceHandle?: string | null;
2967
+ targetHandle?: string | null;
2968
+ animated?: boolean;
2969
+ hidden?: boolean;
2970
+ deletable?: boolean;
2971
+ selectable?: boolean;
2972
+ selected?: boolean;
2973
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
2974
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
2975
+ zIndex?: number;
2976
+ ariaLabel?: string;
2977
+ interactionWidth?: number;
2978
+ label?: import('react').ReactNode;
2979
+ labelStyle?: import('react').CSSProperties;
2980
+ labelShowBg?: boolean;
2981
+ labelBgStyle?: import('react').CSSProperties;
2982
+ labelBgPadding?: [number, number];
2983
+ labelBgBorderRadius?: number;
2984
+ style?: import('react').CSSProperties;
2985
+ className?: string;
2986
+ updatable?: import('@xyflow/react').EdgeUpdatable;
2987
+ focusable?: boolean;
2988
+ data: import('..').RelationshipData;
2989
+ readonly id: string;
2990
+ readonly type: "relationship";
2991
+ }> | Partial<import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2992
+ source: string;
2993
+ target: string;
2994
+ sourceHandle?: string | null;
2995
+ targetHandle?: string | null;
2996
+ animated?: boolean;
2997
+ hidden?: boolean;
2998
+ deletable?: boolean;
2999
+ selectable?: boolean;
3000
+ selected?: boolean;
3001
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
3002
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
3003
+ zIndex?: number;
3004
+ ariaLabel?: string;
3005
+ interactionWidth?: number;
3006
+ label?: import('react').ReactNode;
3007
+ labelStyle?: import('react').CSSProperties;
3008
+ labelShowBg?: boolean;
3009
+ labelBgStyle?: import('react').CSSProperties;
3010
+ labelBgPadding?: [number, number];
3011
+ labelBgBorderRadius?: number;
3012
+ style?: import('react').CSSProperties;
3013
+ className?: string;
3014
+ updatable?: import('@xyflow/react').EdgeUpdatable;
3015
+ focusable?: boolean;
3016
+ data: import('..').RelationshipData;
3017
+ readonly id: string;
3018
+ readonly type: "relationship";
3019
+ }>>), replace?: boolean | undefined) => void;
3020
+ subscribe: (listener: (state: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
3021
+ source: string;
3022
+ target: string;
3023
+ sourceHandle?: string | null;
3024
+ targetHandle?: string | null;
3025
+ animated?: boolean;
3026
+ hidden?: boolean;
3027
+ deletable?: boolean;
3028
+ selectable?: boolean;
3029
+ selected?: boolean;
3030
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
3031
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
3032
+ zIndex?: number;
3033
+ ariaLabel?: string;
3034
+ interactionWidth?: number;
3035
+ label?: import('react').ReactNode;
3036
+ labelStyle?: import('react').CSSProperties;
3037
+ labelShowBg?: boolean;
3038
+ labelBgStyle?: import('react').CSSProperties;
3039
+ labelBgPadding?: [number, number];
3040
+ labelBgBorderRadius?: number;
3041
+ style?: import('react').CSSProperties;
3042
+ className?: string;
3043
+ updatable?: import('@xyflow/react').EdgeUpdatable;
3044
+ focusable?: boolean;
3045
+ data: import('..').RelationshipData;
3046
+ readonly id: string;
3047
+ readonly type: "relationship";
3048
+ }>, prevState: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
3049
+ source: string;
3050
+ target: string;
3051
+ sourceHandle?: string | null;
3052
+ targetHandle?: string | null;
3053
+ animated?: boolean;
3054
+ hidden?: boolean;
3055
+ deletable?: boolean;
3056
+ selectable?: boolean;
3057
+ selected?: boolean;
3058
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
3059
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
3060
+ zIndex?: number;
3061
+ ariaLabel?: string;
3062
+ interactionWidth?: number;
3063
+ label?: import('react').ReactNode;
3064
+ labelStyle?: import('react').CSSProperties;
3065
+ labelShowBg?: boolean;
3066
+ labelBgStyle?: import('react').CSSProperties;
3067
+ labelBgPadding?: [number, number];
3068
+ labelBgBorderRadius?: number;
3069
+ style?: import('react').CSSProperties;
3070
+ className?: string;
3071
+ updatable?: import('@xyflow/react').EdgeUpdatable;
3072
+ focusable?: boolean;
3073
+ data: import('..').RelationshipData;
3074
+ readonly id: string;
3075
+ readonly type: "relationship";
3076
+ }>) => void) => () => void;
3077
+ }) => void;
3078
+ nextDynamicStep: (increment?: number | undefined) => void;
3079
+ stopDynamicView: () => void;
3080
+ }>), replace?: boolean | undefined, action?: A | undefined) => void;
3081
+ subscribe: {
3082
+ (listener: (selectedState: {
3083
+ view: import('@likec4/core').DiagramView;
3084
+ readonly: boolean;
3085
+ showElementLinks: boolean;
3086
+ fitViewEnabled: boolean;
3087
+ fitViewPadding: number;
3088
+ zoomable: boolean;
3089
+ pannable: boolean;
3090
+ nodesDraggable: boolean;
3091
+ nodesSelectable: boolean;
3092
+ experimentalEdgeEditing: boolean;
3093
+ viewSyncState: "synced" | "changed";
3094
+ viewSyncDebounceTimeout: number | null;
3095
+ xyflow: import('..').XYFlowInstance;
3096
+ initialized: boolean;
3097
+ xyflowSynced: boolean;
3098
+ activeDynamicViewStep: number | null;
3099
+ lastClickedNodeId: string | null;
3100
+ lastClickedEdgeId: string | null;
3101
+ focusedNodeId: string | null;
3102
+ hoveredNodeId: string | null;
3103
+ hoveredEdgeId: string | null;
3104
+ dimmed: ReadonlySet<string>;
3105
+ previousViews: import('@likec4/core').DiagramView[];
3106
+ lastOnNavigate: {
3107
+ fromView: import('@likec4/core').ViewID;
3108
+ toView: import('@likec4/core').ViewID;
3109
+ element: import('@likec4/core').DiagramNode;
3110
+ elementScreenPosition: import('@xyflow/system').XYPosition;
3111
+ positionCorrected: boolean;
3112
+ } | null;
3113
+ viewportChanged: boolean;
3114
+ onChange: import('..').OnChange | null | undefined;
3115
+ onNavigateTo: import('..').OnNavigateTo | null | undefined;
3116
+ onNodeClick: import('..').OnNodeClick | null | undefined;
3117
+ onNodeContextMenu: import('..').OnNodeClick | null | undefined;
3118
+ onCanvasContextMenu: import('..').OnCanvasClick | null | undefined;
3119
+ onEdgeClick: import('..').OnEdgeClick | null | undefined;
3120
+ onEdgeContextMenu: import('..').OnEdgeClick | null | undefined;
3121
+ onCanvasClick: import('..').OnCanvasClick | null | undefined;
3122
+ onCanvasDblClick: import('..').OnCanvasClick | null | undefined;
3123
+ isDynamicView: () => boolean;
3124
+ updateView: (view: import('@likec4/core').DiagramView) => void;
3125
+ focusOnNode: (nodeId: string) => void;
3126
+ setHoveredNode: (nodeId: string | null) => void;
3127
+ setHoveredEdge: (edgeId: string | null) => void;
3128
+ setLastClickedNode: (nodeId: string | null) => void;
3129
+ setLastClickedEdge: (edgeId: string | null) => void;
3130
+ resetLastClicked: () => void;
3131
+ getElement: (id: import('@likec4/core').Fqn) => import('@likec4/core').DiagramNode | null;
3132
+ triggerChangeElementStyle: (change: import("..").Changes.ChangeElementStyle) => void;
3133
+ triggerSaveManualLayout: (xystore: {
3134
+ getState: () => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
3135
+ source: string;
3136
+ target: string;
3137
+ sourceHandle?: string | null;
3138
+ targetHandle?: string | null;
3139
+ animated?: boolean;
3140
+ hidden?: boolean;
3141
+ deletable?: boolean;
3142
+ selectable?: boolean;
3143
+ selected?: boolean;
3144
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
3145
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
3146
+ zIndex?: number;
3147
+ ariaLabel?: string;
3148
+ interactionWidth?: number;
3149
+ label?: import('react').ReactNode;
3150
+ labelStyle?: import('react').CSSProperties;
3151
+ labelShowBg?: boolean;
3152
+ labelBgStyle?: import('react').CSSProperties;
3153
+ labelBgPadding?: [number, number];
3154
+ labelBgBorderRadius?: number;
3155
+ style?: import('react').CSSProperties;
3156
+ className?: string;
3157
+ updatable?: import('@xyflow/react').EdgeUpdatable;
3158
+ focusable?: boolean;
3159
+ data: import('..').RelationshipData;
3160
+ readonly id: string;
3161
+ readonly type: "relationship";
3162
+ }>;
3163
+ setState: (partial: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
3164
+ source: string;
3165
+ target: string;
3166
+ sourceHandle?: string | null;
3167
+ targetHandle?: string | null;
3168
+ animated?: boolean;
3169
+ hidden?: boolean;
3170
+ deletable?: boolean;
3171
+ selectable?: boolean;
3172
+ selected?: boolean;
3173
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
3174
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
3175
+ zIndex?: number;
3176
+ ariaLabel?: string;
3177
+ interactionWidth?: number;
3178
+ label?: import('react').ReactNode;
3179
+ labelStyle?: import('react').CSSProperties;
3180
+ labelShowBg?: boolean;
3181
+ labelBgStyle?: import('react').CSSProperties;
3182
+ labelBgPadding?: [number, number];
3183
+ labelBgBorderRadius?: number;
3184
+ style?: import('react').CSSProperties;
3185
+ className?: string;
3186
+ updatable?: import('@xyflow/react').EdgeUpdatable;
3187
+ focusable?: boolean;
3188
+ data: import('..').RelationshipData;
3189
+ readonly id: string;
3190
+ readonly type: "relationship";
3191
+ }> | Partial<import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
3192
+ source: string;
3193
+ target: string;
3194
+ sourceHandle?: string | null;
3195
+ targetHandle?: string | null;
3196
+ animated?: boolean;
3197
+ hidden?: boolean;
3198
+ deletable?: boolean;
3199
+ selectable?: boolean;
3200
+ selected?: boolean;
3201
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
3202
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
3203
+ zIndex?: number;
3204
+ ariaLabel?: string;
3205
+ interactionWidth?: number;
3206
+ label?: import('react').ReactNode;
3207
+ labelStyle?: import('react').CSSProperties;
3208
+ labelShowBg?: boolean;
3209
+ labelBgStyle?: import('react').CSSProperties;
3210
+ labelBgPadding?: [number, number];
3211
+ labelBgBorderRadius?: number;
3212
+ style?: import('react').CSSProperties;
3213
+ className?: string;
3214
+ updatable?: import('@xyflow/react').EdgeUpdatable;
3215
+ focusable?: boolean;
3216
+ data: import('..').RelationshipData;
3217
+ readonly id: string;
3218
+ readonly type: "relationship";
3219
+ }>> | ((state: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
3220
+ source: string;
3221
+ target: string;
3222
+ sourceHandle?: string | null;
3223
+ targetHandle?: string | null;
3224
+ animated?: boolean;
3225
+ hidden?: boolean;
3226
+ deletable?: boolean;
3227
+ selectable?: boolean;
3228
+ selected?: boolean;
3229
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
3230
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
3231
+ zIndex?: number;
3232
+ ariaLabel?: string;
3233
+ interactionWidth?: number;
3234
+ label?: import('react').ReactNode;
3235
+ labelStyle?: import('react').CSSProperties;
3236
+ labelShowBg?: boolean;
3237
+ labelBgStyle?: import('react').CSSProperties;
3238
+ labelBgPadding?: [number, number];
3239
+ labelBgBorderRadius?: number;
3240
+ style?: import('react').CSSProperties;
3241
+ className?: string;
3242
+ updatable?: import('@xyflow/react').EdgeUpdatable;
3243
+ focusable?: boolean;
3244
+ data: import('..').RelationshipData;
3245
+ readonly id: string;
3246
+ readonly type: "relationship";
3247
+ }>) => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
3248
+ source: string;
3249
+ target: string;
3250
+ sourceHandle?: string | null;
3251
+ targetHandle?: string | null;
3252
+ animated?: boolean;
3253
+ hidden?: boolean;
3254
+ deletable?: boolean;
3255
+ selectable?: boolean;
3256
+ selected?: boolean;
3257
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
3258
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
3259
+ zIndex?: number;
3260
+ ariaLabel?: string;
3261
+ interactionWidth?: number;
3262
+ label?: import('react').ReactNode;
3263
+ labelStyle?: import('react').CSSProperties;
3264
+ labelShowBg?: boolean;
3265
+ labelBgStyle?: import('react').CSSProperties;
3266
+ labelBgPadding?: [number, number];
3267
+ labelBgBorderRadius?: number;
3268
+ style?: import('react').CSSProperties;
3269
+ className?: string;
3270
+ updatable?: import('@xyflow/react').EdgeUpdatable;
3271
+ focusable?: boolean;
3272
+ data: import('..').RelationshipData;
3273
+ readonly id: string;
3274
+ readonly type: "relationship";
3275
+ }> | Partial<import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
3276
+ source: string;
3277
+ target: string;
3278
+ sourceHandle?: string | null;
3279
+ targetHandle?: string | null;
3280
+ animated?: boolean;
3281
+ hidden?: boolean;
3282
+ deletable?: boolean;
3283
+ selectable?: boolean;
3284
+ selected?: boolean;
3285
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
3286
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
3287
+ zIndex?: number;
3288
+ ariaLabel?: string;
3289
+ interactionWidth?: number;
3290
+ label?: import('react').ReactNode;
3291
+ labelStyle?: import('react').CSSProperties;
3292
+ labelShowBg?: boolean;
3293
+ labelBgStyle?: import('react').CSSProperties;
3294
+ labelBgPadding?: [number, number];
3295
+ labelBgBorderRadius?: number;
3296
+ style?: import('react').CSSProperties;
3297
+ className?: string;
3298
+ updatable?: import('@xyflow/react').EdgeUpdatable;
3299
+ focusable?: boolean;
3300
+ data: import('..').RelationshipData;
3301
+ readonly id: string;
3302
+ readonly type: "relationship";
3303
+ }>>), replace?: boolean | undefined) => void;
3304
+ subscribe: (listener: (state: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
3305
+ source: string;
3306
+ target: string;
3307
+ sourceHandle?: string | null;
3308
+ targetHandle?: string | null;
3309
+ animated?: boolean;
3310
+ hidden?: boolean;
3311
+ deletable?: boolean;
3312
+ selectable?: boolean;
3313
+ selected?: boolean;
3314
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
3315
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
3316
+ zIndex?: number;
3317
+ ariaLabel?: string;
3318
+ interactionWidth?: number;
3319
+ label?: import('react').ReactNode;
3320
+ labelStyle?: import('react').CSSProperties;
3321
+ labelShowBg?: boolean;
3322
+ labelBgStyle?: import('react').CSSProperties;
3323
+ labelBgPadding?: [number, number];
3324
+ labelBgBorderRadius?: number;
3325
+ style?: import('react').CSSProperties;
3326
+ className?: string;
3327
+ updatable?: import('@xyflow/react').EdgeUpdatable;
3328
+ focusable?: boolean;
3329
+ data: import('..').RelationshipData;
3330
+ readonly id: string;
3331
+ readonly type: "relationship";
3332
+ }>, prevState: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
3333
+ source: string;
3334
+ target: string;
3335
+ sourceHandle?: string | null;
3336
+ targetHandle?: string | null;
3337
+ animated?: boolean;
3338
+ hidden?: boolean;
3339
+ deletable?: boolean;
3340
+ selectable?: boolean;
3341
+ selected?: boolean;
3342
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
3343
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
3344
+ zIndex?: number;
3345
+ ariaLabel?: string;
3346
+ interactionWidth?: number;
3347
+ label?: import('react').ReactNode;
3348
+ labelStyle?: import('react').CSSProperties;
3349
+ labelShowBg?: boolean;
3350
+ labelBgStyle?: import('react').CSSProperties;
3351
+ labelBgPadding?: [number, number];
3352
+ labelBgBorderRadius?: number;
3353
+ style?: import('react').CSSProperties;
3354
+ className?: string;
3355
+ updatable?: import('@xyflow/react').EdgeUpdatable;
3356
+ focusable?: boolean;
3357
+ data: import('..').RelationshipData;
3358
+ readonly id: string;
3359
+ readonly type: "relationship";
3360
+ }>) => void) => () => void;
3361
+ }) => void;
3362
+ triggerOnNavigateTo: (xynodeId: string, event: import('react').MouseEvent<Element, MouseEvent>) => void;
3363
+ fitDiagram: (xyStore: {
3364
+ getState: () => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
3365
+ source: string;
3366
+ target: string;
3367
+ sourceHandle?: string | null;
3368
+ targetHandle?: string | null;
3369
+ animated?: boolean;
3370
+ hidden?: boolean;
3371
+ deletable?: boolean;
3372
+ selectable?: boolean;
3373
+ selected?: boolean;
3374
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
3375
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
3376
+ zIndex?: number;
3377
+ ariaLabel?: string;
3378
+ interactionWidth?: number;
3379
+ label?: import('react').ReactNode;
3380
+ labelStyle?: import('react').CSSProperties;
3381
+ labelShowBg?: boolean;
3382
+ labelBgStyle?: import('react').CSSProperties;
3383
+ labelBgPadding?: [number, number];
3384
+ labelBgBorderRadius?: number;
3385
+ style?: import('react').CSSProperties;
3386
+ className?: string;
3387
+ updatable?: import('@xyflow/react').EdgeUpdatable;
3388
+ focusable?: boolean;
3389
+ data: import('..').RelationshipData;
3390
+ readonly id: string;
3391
+ readonly type: "relationship";
3392
+ }>;
3393
+ setState: (partial: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
3394
+ source: string;
3395
+ target: string;
3396
+ sourceHandle?: string | null;
3397
+ targetHandle?: string | null;
3398
+ animated?: boolean;
3399
+ hidden?: boolean;
3400
+ deletable?: boolean;
3401
+ selectable?: boolean;
3402
+ selected?: boolean;
3403
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
3404
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
3405
+ zIndex?: number;
3406
+ ariaLabel?: string;
3407
+ interactionWidth?: number;
3408
+ label?: import('react').ReactNode;
3409
+ labelStyle?: import('react').CSSProperties;
3410
+ labelShowBg?: boolean;
3411
+ labelBgStyle?: import('react').CSSProperties;
3412
+ labelBgPadding?: [number, number];
3413
+ labelBgBorderRadius?: number;
3414
+ style?: import('react').CSSProperties;
3415
+ className?: string;
3416
+ updatable?: import('@xyflow/react').EdgeUpdatable;
3417
+ focusable?: boolean;
3418
+ data: import('..').RelationshipData;
3419
+ readonly id: string;
3420
+ readonly type: "relationship";
3421
+ }> | Partial<import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
3422
+ source: string;
3423
+ target: string;
3424
+ sourceHandle?: string | null;
3425
+ targetHandle?: string | null;
3426
+ animated?: boolean;
3427
+ hidden?: boolean;
3428
+ deletable?: boolean;
3429
+ selectable?: boolean;
3430
+ selected?: boolean;
3431
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
3432
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
3433
+ zIndex?: number;
3434
+ ariaLabel?: string;
3435
+ interactionWidth?: number;
3436
+ label?: import('react').ReactNode;
3437
+ labelStyle?: import('react').CSSProperties;
3438
+ labelShowBg?: boolean;
3439
+ labelBgStyle?: import('react').CSSProperties;
3440
+ labelBgPadding?: [number, number];
3441
+ labelBgBorderRadius?: number;
3442
+ style?: import('react').CSSProperties;
3443
+ className?: string;
3444
+ updatable?: import('@xyflow/react').EdgeUpdatable;
3445
+ focusable?: boolean;
3446
+ data: import('..').RelationshipData;
3447
+ readonly id: string;
3448
+ readonly type: "relationship";
3449
+ }>> | ((state: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
3450
+ source: string;
3451
+ target: string;
3452
+ sourceHandle?: string | null;
3453
+ targetHandle?: string | null;
3454
+ animated?: boolean;
3455
+ hidden?: boolean;
3456
+ deletable?: boolean;
3457
+ selectable?: boolean;
3458
+ selected?: boolean;
3459
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
3460
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
3461
+ zIndex?: number;
3462
+ ariaLabel?: string;
3463
+ interactionWidth?: number;
3464
+ label?: import('react').ReactNode;
3465
+ labelStyle?: import('react').CSSProperties;
3466
+ labelShowBg?: boolean;
3467
+ labelBgStyle?: import('react').CSSProperties;
3468
+ labelBgPadding?: [number, number];
3469
+ labelBgBorderRadius?: number;
3470
+ style?: import('react').CSSProperties;
3471
+ className?: string;
3472
+ updatable?: import('@xyflow/react').EdgeUpdatable;
3473
+ focusable?: boolean;
3474
+ data: import('..').RelationshipData;
3475
+ readonly id: string;
3476
+ readonly type: "relationship";
3477
+ }>) => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
3478
+ source: string;
3479
+ target: string;
3480
+ sourceHandle?: string | null;
3481
+ targetHandle?: string | null;
3482
+ animated?: boolean;
3483
+ hidden?: boolean;
3484
+ deletable?: boolean;
3485
+ selectable?: boolean;
3486
+ selected?: boolean;
3487
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
3488
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
3489
+ zIndex?: number;
3490
+ ariaLabel?: string;
3491
+ interactionWidth?: number;
3492
+ label?: import('react').ReactNode;
3493
+ labelStyle?: import('react').CSSProperties;
3494
+ labelShowBg?: boolean;
3495
+ labelBgStyle?: import('react').CSSProperties;
3496
+ labelBgPadding?: [number, number];
3497
+ labelBgBorderRadius?: number;
3498
+ style?: import('react').CSSProperties;
3499
+ className?: string;
3500
+ updatable?: import('@xyflow/react').EdgeUpdatable;
3501
+ focusable?: boolean;
3502
+ data: import('..').RelationshipData;
3503
+ readonly id: string;
3504
+ readonly type: "relationship";
3505
+ }> | Partial<import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
3506
+ source: string;
3507
+ target: string;
3508
+ sourceHandle?: string | null;
3509
+ targetHandle?: string | null;
3510
+ animated?: boolean;
3511
+ hidden?: boolean;
3512
+ deletable?: boolean;
3513
+ selectable?: boolean;
3514
+ selected?: boolean;
3515
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
3516
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
3517
+ zIndex?: number;
3518
+ ariaLabel?: string;
3519
+ interactionWidth?: number;
3520
+ label?: import('react').ReactNode;
3521
+ labelStyle?: import('react').CSSProperties;
3522
+ labelShowBg?: boolean;
3523
+ labelBgStyle?: import('react').CSSProperties;
3524
+ labelBgPadding?: [number, number];
3525
+ labelBgBorderRadius?: number;
3526
+ style?: import('react').CSSProperties;
3527
+ className?: string;
3528
+ updatable?: import('@xyflow/react').EdgeUpdatable;
3529
+ focusable?: boolean;
3530
+ data: import('..').RelationshipData;
3531
+ readonly id: string;
3532
+ readonly type: "relationship";
3533
+ }>>), replace?: boolean | undefined) => void;
3534
+ subscribe: (listener: (state: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
3535
+ source: string;
3536
+ target: string;
3537
+ sourceHandle?: string | null;
3538
+ targetHandle?: string | null;
3539
+ animated?: boolean;
3540
+ hidden?: boolean;
3541
+ deletable?: boolean;
3542
+ selectable?: boolean;
3543
+ selected?: boolean;
3544
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
3545
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
3546
+ zIndex?: number;
3547
+ ariaLabel?: string;
3548
+ interactionWidth?: number;
3549
+ label?: import('react').ReactNode;
3550
+ labelStyle?: import('react').CSSProperties;
3551
+ labelShowBg?: boolean;
3552
+ labelBgStyle?: import('react').CSSProperties;
3553
+ labelBgPadding?: [number, number];
3554
+ labelBgBorderRadius?: number;
3555
+ style?: import('react').CSSProperties;
3556
+ className?: string;
3557
+ updatable?: import('@xyflow/react').EdgeUpdatable;
3558
+ focusable?: boolean;
3559
+ data: import('..').RelationshipData;
3560
+ readonly id: string;
3561
+ readonly type: "relationship";
3562
+ }>, prevState: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
3563
+ source: string;
3564
+ target: string;
3565
+ sourceHandle?: string | null;
3566
+ targetHandle?: string | null;
3567
+ animated?: boolean;
3568
+ hidden?: boolean;
3569
+ deletable?: boolean;
3570
+ selectable?: boolean;
3571
+ selected?: boolean;
3572
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
3573
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
3574
+ zIndex?: number;
3575
+ ariaLabel?: string;
3576
+ interactionWidth?: number;
3577
+ label?: import('react').ReactNode;
3578
+ labelStyle?: import('react').CSSProperties;
3579
+ labelShowBg?: boolean;
3580
+ labelBgStyle?: import('react').CSSProperties;
3581
+ labelBgPadding?: [number, number];
3582
+ labelBgBorderRadius?: number;
3583
+ style?: import('react').CSSProperties;
3584
+ className?: string;
3585
+ updatable?: import('@xyflow/react').EdgeUpdatable;
3586
+ focusable?: boolean;
3587
+ data: import('..').RelationshipData;
3588
+ readonly id: string;
3589
+ readonly type: "relationship";
3590
+ }>) => void) => () => void;
3591
+ }) => void;
3592
+ nextDynamicStep: (increment?: number | undefined) => void;
3593
+ stopDynamicView: () => void;
3594
+ }, previousSelectedState: {
3595
+ view: import('@likec4/core').DiagramView;
3596
+ readonly: boolean;
3597
+ showElementLinks: boolean;
3598
+ fitViewEnabled: boolean;
3599
+ fitViewPadding: number;
3600
+ zoomable: boolean;
3601
+ pannable: boolean;
3602
+ nodesDraggable: boolean;
3603
+ nodesSelectable: boolean;
3604
+ experimentalEdgeEditing: boolean;
3605
+ viewSyncState: "synced" | "changed";
3606
+ viewSyncDebounceTimeout: number | null;
3607
+ xyflow: import('..').XYFlowInstance;
3608
+ initialized: boolean;
3609
+ xyflowSynced: boolean;
3610
+ activeDynamicViewStep: number | null;
3611
+ lastClickedNodeId: string | null;
3612
+ lastClickedEdgeId: string | null;
3613
+ focusedNodeId: string | null;
3614
+ hoveredNodeId: string | null;
3615
+ hoveredEdgeId: string | null;
3616
+ dimmed: ReadonlySet<string>;
3617
+ previousViews: import('@likec4/core').DiagramView[];
3618
+ lastOnNavigate: {
3619
+ fromView: import('@likec4/core').ViewID;
3620
+ toView: import('@likec4/core').ViewID;
3621
+ element: import('@likec4/core').DiagramNode;
3622
+ elementScreenPosition: import('@xyflow/system').XYPosition;
3623
+ positionCorrected: boolean;
3624
+ } | null;
3625
+ viewportChanged: boolean;
3626
+ onChange: import('..').OnChange | null | undefined;
3627
+ onNavigateTo: import('..').OnNavigateTo | null | undefined;
3628
+ onNodeClick: import('..').OnNodeClick | null | undefined;
3629
+ onNodeContextMenu: import('..').OnNodeClick | null | undefined;
3630
+ onCanvasContextMenu: import('..').OnCanvasClick | null | undefined;
3631
+ onEdgeClick: import('..').OnEdgeClick | null | undefined;
3632
+ onEdgeContextMenu: import('..').OnEdgeClick | null | undefined;
3633
+ onCanvasClick: import('..').OnCanvasClick | null | undefined;
3634
+ onCanvasDblClick: import('..').OnCanvasClick | null | undefined;
3635
+ isDynamicView: () => boolean;
3636
+ updateView: (view: import('@likec4/core').DiagramView) => void;
3637
+ focusOnNode: (nodeId: string) => void;
3638
+ setHoveredNode: (nodeId: string | null) => void;
3639
+ setHoveredEdge: (edgeId: string | null) => void;
3640
+ setLastClickedNode: (nodeId: string | null) => void;
3641
+ setLastClickedEdge: (edgeId: string | null) => void;
3642
+ resetLastClicked: () => void;
3643
+ getElement: (id: import('@likec4/core').Fqn) => import('@likec4/core').DiagramNode | null;
3644
+ triggerChangeElementStyle: (change: import("..").Changes.ChangeElementStyle) => void;
3645
+ triggerSaveManualLayout: (xystore: {
3646
+ getState: () => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
3647
+ source: string;
3648
+ target: string;
3649
+ sourceHandle?: string | null;
3650
+ targetHandle?: string | null;
3651
+ animated?: boolean;
3652
+ hidden?: boolean;
3653
+ deletable?: boolean;
3654
+ selectable?: boolean;
3655
+ selected?: boolean;
3656
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
3657
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
3658
+ zIndex?: number;
3659
+ ariaLabel?: string;
3660
+ interactionWidth?: number;
3661
+ label?: import('react').ReactNode;
3662
+ labelStyle?: import('react').CSSProperties;
3663
+ labelShowBg?: boolean;
3664
+ labelBgStyle?: import('react').CSSProperties;
3665
+ labelBgPadding?: [number, number];
3666
+ labelBgBorderRadius?: number;
3667
+ style?: import('react').CSSProperties;
3668
+ className?: string;
3669
+ updatable?: import('@xyflow/react').EdgeUpdatable;
3670
+ focusable?: boolean;
3671
+ data: import('..').RelationshipData;
3672
+ readonly id: string;
3673
+ readonly type: "relationship";
3674
+ }>;
3675
+ setState: (partial: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
3676
+ source: string;
3677
+ target: string;
3678
+ sourceHandle?: string | null;
3679
+ targetHandle?: string | null;
3680
+ animated?: boolean;
3681
+ hidden?: boolean;
3682
+ deletable?: boolean;
3683
+ selectable?: boolean;
3684
+ selected?: boolean;
3685
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
3686
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
3687
+ zIndex?: number;
3688
+ ariaLabel?: string;
3689
+ interactionWidth?: number;
3690
+ label?: import('react').ReactNode;
3691
+ labelStyle?: import('react').CSSProperties;
3692
+ labelShowBg?: boolean;
3693
+ labelBgStyle?: import('react').CSSProperties;
3694
+ labelBgPadding?: [number, number];
3695
+ labelBgBorderRadius?: number;
3696
+ style?: import('react').CSSProperties;
3697
+ className?: string;
3698
+ updatable?: import('@xyflow/react').EdgeUpdatable;
3699
+ focusable?: boolean;
3700
+ data: import('..').RelationshipData;
3701
+ readonly id: string;
3702
+ readonly type: "relationship";
3703
+ }> | Partial<import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
3704
+ source: string;
3705
+ target: string;
3706
+ sourceHandle?: string | null;
3707
+ targetHandle?: string | null;
3708
+ animated?: boolean;
3709
+ hidden?: boolean;
3710
+ deletable?: boolean;
3711
+ selectable?: boolean;
3712
+ selected?: boolean;
3713
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
3714
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
3715
+ zIndex?: number;
3716
+ ariaLabel?: string;
3717
+ interactionWidth?: number;
3718
+ label?: import('react').ReactNode;
3719
+ labelStyle?: import('react').CSSProperties;
3720
+ labelShowBg?: boolean;
3721
+ labelBgStyle?: import('react').CSSProperties;
3722
+ labelBgPadding?: [number, number];
3723
+ labelBgBorderRadius?: number;
3724
+ style?: import('react').CSSProperties;
3725
+ className?: string;
3726
+ updatable?: import('@xyflow/react').EdgeUpdatable;
3727
+ focusable?: boolean;
3728
+ data: import('..').RelationshipData;
3729
+ readonly id: string;
3730
+ readonly type: "relationship";
3731
+ }>> | ((state: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
3732
+ source: string;
3733
+ target: string;
3734
+ sourceHandle?: string | null;
3735
+ targetHandle?: string | null;
3736
+ animated?: boolean;
3737
+ hidden?: boolean;
3738
+ deletable?: boolean;
3739
+ selectable?: boolean;
3740
+ selected?: boolean;
3741
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
3742
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
3743
+ zIndex?: number;
3744
+ ariaLabel?: string;
3745
+ interactionWidth?: number;
3746
+ label?: import('react').ReactNode;
3747
+ labelStyle?: import('react').CSSProperties;
3748
+ labelShowBg?: boolean;
3749
+ labelBgStyle?: import('react').CSSProperties;
3750
+ labelBgPadding?: [number, number];
3751
+ labelBgBorderRadius?: number;
3752
+ style?: import('react').CSSProperties;
3753
+ className?: string;
3754
+ updatable?: import('@xyflow/react').EdgeUpdatable;
3755
+ focusable?: boolean;
3756
+ data: import('..').RelationshipData;
3757
+ readonly id: string;
3758
+ readonly type: "relationship";
3759
+ }>) => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
3760
+ source: string;
3761
+ target: string;
3762
+ sourceHandle?: string | null;
3763
+ targetHandle?: string | null;
3764
+ animated?: boolean;
3765
+ hidden?: boolean;
3766
+ deletable?: boolean;
3767
+ selectable?: boolean;
3768
+ selected?: boolean;
3769
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
3770
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
3771
+ zIndex?: number;
3772
+ ariaLabel?: string;
3773
+ interactionWidth?: number;
3774
+ label?: import('react').ReactNode;
3775
+ labelStyle?: import('react').CSSProperties;
3776
+ labelShowBg?: boolean;
3777
+ labelBgStyle?: import('react').CSSProperties;
3778
+ labelBgPadding?: [number, number];
3779
+ labelBgBorderRadius?: number;
3780
+ style?: import('react').CSSProperties;
3781
+ className?: string;
3782
+ updatable?: import('@xyflow/react').EdgeUpdatable;
3783
+ focusable?: boolean;
3784
+ data: import('..').RelationshipData;
3785
+ readonly id: string;
3786
+ readonly type: "relationship";
3787
+ }> | Partial<import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
3788
+ source: string;
3789
+ target: string;
3790
+ sourceHandle?: string | null;
3791
+ targetHandle?: string | null;
3792
+ animated?: boolean;
3793
+ hidden?: boolean;
3794
+ deletable?: boolean;
3795
+ selectable?: boolean;
3796
+ selected?: boolean;
3797
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
3798
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
3799
+ zIndex?: number;
3800
+ ariaLabel?: string;
3801
+ interactionWidth?: number;
3802
+ label?: import('react').ReactNode;
3803
+ labelStyle?: import('react').CSSProperties;
3804
+ labelShowBg?: boolean;
3805
+ labelBgStyle?: import('react').CSSProperties;
3806
+ labelBgPadding?: [number, number];
3807
+ labelBgBorderRadius?: number;
3808
+ style?: import('react').CSSProperties;
3809
+ className?: string;
3810
+ updatable?: import('@xyflow/react').EdgeUpdatable;
3811
+ focusable?: boolean;
3812
+ data: import('..').RelationshipData;
3813
+ readonly id: string;
3814
+ readonly type: "relationship";
3815
+ }>>), replace?: boolean | undefined) => void;
3816
+ subscribe: (listener: (state: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
3817
+ source: string;
3818
+ target: string;
3819
+ sourceHandle?: string | null;
3820
+ targetHandle?: string | null;
3821
+ animated?: boolean;
3822
+ hidden?: boolean;
3823
+ deletable?: boolean;
3824
+ selectable?: boolean;
3825
+ selected?: boolean;
3826
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
3827
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
3828
+ zIndex?: number;
3829
+ ariaLabel?: string;
3830
+ interactionWidth?: number;
3831
+ label?: import('react').ReactNode;
3832
+ labelStyle?: import('react').CSSProperties;
3833
+ labelShowBg?: boolean;
3834
+ labelBgStyle?: import('react').CSSProperties;
3835
+ labelBgPadding?: [number, number];
3836
+ labelBgBorderRadius?: number;
3837
+ style?: import('react').CSSProperties;
3838
+ className?: string;
3839
+ updatable?: import('@xyflow/react').EdgeUpdatable;
3840
+ focusable?: boolean;
3841
+ data: import('..').RelationshipData;
3842
+ readonly id: string;
3843
+ readonly type: "relationship";
3844
+ }>, prevState: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
3845
+ source: string;
3846
+ target: string;
3847
+ sourceHandle?: string | null;
3848
+ targetHandle?: string | null;
3849
+ animated?: boolean;
3850
+ hidden?: boolean;
3851
+ deletable?: boolean;
3852
+ selectable?: boolean;
3853
+ selected?: boolean;
3854
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
3855
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
3856
+ zIndex?: number;
3857
+ ariaLabel?: string;
3858
+ interactionWidth?: number;
3859
+ label?: import('react').ReactNode;
3860
+ labelStyle?: import('react').CSSProperties;
3861
+ labelShowBg?: boolean;
3862
+ labelBgStyle?: import('react').CSSProperties;
3863
+ labelBgPadding?: [number, number];
3864
+ labelBgBorderRadius?: number;
3865
+ style?: import('react').CSSProperties;
3866
+ className?: string;
3867
+ updatable?: import('@xyflow/react').EdgeUpdatable;
3868
+ focusable?: boolean;
3869
+ data: import('..').RelationshipData;
3870
+ readonly id: string;
3871
+ readonly type: "relationship";
3872
+ }>) => void) => () => void;
3873
+ }) => void;
3874
+ triggerOnNavigateTo: (xynodeId: string, event: import('react').MouseEvent<Element, MouseEvent>) => void;
3875
+ fitDiagram: (xyStore: {
3876
+ getState: () => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
3877
+ source: string;
3878
+ target: string;
3879
+ sourceHandle?: string | null;
3880
+ targetHandle?: string | null;
3881
+ animated?: boolean;
3882
+ hidden?: boolean;
3883
+ deletable?: boolean;
3884
+ selectable?: boolean;
3885
+ selected?: boolean;
3886
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
3887
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
3888
+ zIndex?: number;
3889
+ ariaLabel?: string;
3890
+ interactionWidth?: number;
3891
+ label?: import('react').ReactNode;
3892
+ labelStyle?: import('react').CSSProperties;
3893
+ labelShowBg?: boolean;
3894
+ labelBgStyle?: import('react').CSSProperties;
3895
+ labelBgPadding?: [number, number];
3896
+ labelBgBorderRadius?: number;
3897
+ style?: import('react').CSSProperties;
3898
+ className?: string;
3899
+ updatable?: import('@xyflow/react').EdgeUpdatable;
3900
+ focusable?: boolean;
3901
+ data: import('..').RelationshipData;
3902
+ readonly id: string;
3903
+ readonly type: "relationship";
3904
+ }>;
3905
+ setState: (partial: import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
3906
+ source: string;
3907
+ target: string;
3908
+ sourceHandle?: string | null;
3909
+ targetHandle?: string | null;
3910
+ animated?: boolean;
3911
+ hidden?: boolean;
3912
+ deletable?: boolean;
3913
+ selectable?: boolean;
3914
+ selected?: boolean;
3915
+ markerStart?: import('@xyflow/system').EdgeMarkerType;
3916
+ markerEnd?: import('@xyflow/system').EdgeMarkerType;
3917
+ zIndex?: number;
3918
+ ariaLabel?: string;
3919
+ interactionWidth?: number;
3920
+ label?: import('react').ReactNode;
3921
+ labelStyle?: import('react').CSSProperties;
1786
3922
  labelShowBg?: boolean;
1787
3923
  labelBgStyle?: import('react').CSSProperties;
1788
3924
  labelBgPadding?: [number, number];
@@ -1967,7 +4103,8 @@ declare function useDiagramStoreApi(): {
1967
4103
  }) => void;
1968
4104
  nextDynamicStep: (increment?: number | undefined) => void;
1969
4105
  stopDynamicView: () => void;
1970
- }, previousSelectedState: {
4106
+ }) => void): () => void;
4107
+ <U>(selector: (state: {
1971
4108
  view: import('@likec4/core').DiagramView;
1972
4109
  readonly: boolean;
1973
4110
  showElementLinks: boolean;
@@ -1977,6 +4114,9 @@ declare function useDiagramStoreApi(): {
1977
4114
  pannable: boolean;
1978
4115
  nodesDraggable: boolean;
1979
4116
  nodesSelectable: boolean;
4117
+ experimentalEdgeEditing: boolean;
4118
+ viewSyncState: "synced" | "changed";
4119
+ viewSyncDebounceTimeout: number | null;
1980
4120
  xyflow: import('..').XYFlowInstance;
1981
4121
  initialized: boolean;
1982
4122
  xyflowSynced: boolean;
@@ -1992,7 +4132,7 @@ declare function useDiagramStoreApi(): {
1992
4132
  fromView: import('@likec4/core').ViewID;
1993
4133
  toView: import('@likec4/core').ViewID;
1994
4134
  element: import('@likec4/core').DiagramNode;
1995
- elementCenterScreenPosition: import('@xyflow/system').XYPosition;
4135
+ elementScreenPosition: import('@xyflow/system').XYPosition;
1996
4136
  positionCorrected: boolean;
1997
4137
  } | null;
1998
4138
  viewportChanged: boolean;
@@ -2014,9 +4154,8 @@ declare function useDiagramStoreApi(): {
2014
4154
  setLastClickedEdge: (edgeId: string | null) => void;
2015
4155
  resetLastClicked: () => void;
2016
4156
  getElement: (id: import('@likec4/core').Fqn) => import('@likec4/core').DiagramNode | null;
2017
- triggerOnChange: (changes: import('@likec4/core').NonEmptyArray<import("..").Changes.ChangeElementStyle>) => void;
2018
- triggerOnNavigateTo: (xynodeId: string, event: import('react').MouseEvent<Element, MouseEvent>) => void;
2019
- fitDiagram: (xyStore: {
4157
+ triggerChangeElementStyle: (change: import("..").Changes.ChangeElementStyle) => void;
4158
+ triggerSaveManualLayout: (xystore: {
2020
4159
  getState: () => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {
2021
4160
  source: string;
2022
4161
  target: string;
@@ -2245,57 +4384,6 @@ declare function useDiagramStoreApi(): {
2245
4384
  readonly type: "relationship";
2246
4385
  }>) => void) => () => void;
2247
4386
  }) => void;
2248
- nextDynamicStep: (increment?: number | undefined) => void;
2249
- stopDynamicView: () => void;
2250
- }) => void): () => void;
2251
- <U>(selector: (state: {
2252
- view: import('@likec4/core').DiagramView;
2253
- readonly: boolean;
2254
- showElementLinks: boolean;
2255
- fitViewEnabled: boolean;
2256
- fitViewPadding: number;
2257
- zoomable: boolean;
2258
- pannable: boolean;
2259
- nodesDraggable: boolean;
2260
- nodesSelectable: boolean;
2261
- xyflow: import('..').XYFlowInstance;
2262
- initialized: boolean;
2263
- xyflowSynced: boolean;
2264
- activeDynamicViewStep: number | null;
2265
- lastClickedNodeId: string | null;
2266
- lastClickedEdgeId: string | null;
2267
- focusedNodeId: string | null;
2268
- hoveredNodeId: string | null;
2269
- hoveredEdgeId: string | null;
2270
- dimmed: ReadonlySet<string>;
2271
- previousViews: import('@likec4/core').DiagramView[];
2272
- lastOnNavigate: {
2273
- fromView: import('@likec4/core').ViewID;
2274
- toView: import('@likec4/core').ViewID;
2275
- element: import('@likec4/core').DiagramNode;
2276
- elementCenterScreenPosition: import('@xyflow/system').XYPosition;
2277
- positionCorrected: boolean;
2278
- } | null;
2279
- viewportChanged: boolean;
2280
- onChange: import('..').OnChange | null | undefined;
2281
- onNavigateTo: import('..').OnNavigateTo | null | undefined;
2282
- onNodeClick: import('..').OnNodeClick | null | undefined;
2283
- onNodeContextMenu: import('..').OnNodeClick | null | undefined;
2284
- onCanvasContextMenu: import('..').OnCanvasClick | null | undefined;
2285
- onEdgeClick: import('..').OnEdgeClick | null | undefined;
2286
- onEdgeContextMenu: import('..').OnEdgeClick | null | undefined;
2287
- onCanvasClick: import('..').OnCanvasClick | null | undefined;
2288
- onCanvasDblClick: import('..').OnCanvasClick | null | undefined;
2289
- isDynamicView: () => boolean;
2290
- updateView: (view: import('@likec4/core').DiagramView) => void;
2291
- focusOnNode: (nodeId: string) => void;
2292
- setHoveredNode: (nodeId: string | null) => void;
2293
- setHoveredEdge: (edgeId: string | null) => void;
2294
- setLastClickedNode: (nodeId: string | null) => void;
2295
- setLastClickedEdge: (edgeId: string | null) => void;
2296
- resetLastClicked: () => void;
2297
- getElement: (id: import('@likec4/core').Fqn) => import('@likec4/core').DiagramNode | null;
2298
- triggerOnChange: (changes: import('@likec4/core').NonEmptyArray<import("..").Changes.ChangeElementStyle>) => void;
2299
4387
  triggerOnNavigateTo: (xynodeId: string, event: import('react').MouseEvent<Element, MouseEvent>) => void;
2300
4388
  fitDiagram: (xyStore: {
2301
4389
  getState: () => import('@xyflow/react').ReactFlowState<import('..').XYFlowNode, {