@likec4/diagram 1.23.0 → 1.24.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.
@@ -27,11 +27,12 @@ function StaticLikeC4Diagram({
27
27
  enableRelationshipDetails,
28
28
  enableRelationshipBrowser,
29
29
  enableDynamicViewWalkthrough: false,
30
+ showNavigationButtons: false,
30
31
  experimentalEdgeEditing: false,
31
32
  enableFocusMode: false,
33
+ enableSearch: false,
32
34
  nodesSelectable: false,
33
35
  nodesDraggable: false,
34
- enableSearch: false,
35
36
  ...rest
36
37
  }
37
38
  );
@@ -1880,6 +1880,10 @@ export declare function useDiagram(): {
1880
1880
  type: "trigger:OpenSource";
1881
1881
  params: OpenSourceParams;
1882
1882
  };
1883
+ "open source of focused node": {
1884
+ type: "open source of focused node";
1885
+ params: NonReducibleUnknown;
1886
+ };
1883
1887
  "xyflow:setViewportCenter": {
1884
1888
  type: "xyflow:setViewportCenter";
1885
1889
  params: {
@@ -3271,7 +3275,7 @@ export declare function useDiagram(): {
3271
3275
  }>;
3272
3276
  id: "overlays";
3273
3277
  };
3274
- }>, never, never, never, never>, ActionFunction<DiagramContext, Events, Events, undefined, Values<{
3278
+ }>, never, never, never, never>, "open source of focused node", ActionFunction<DiagramContext, Events, Events, undefined, Values<{
3275
3279
  syncManualLayoutActorLogic: {
3276
3280
  src: "syncManualLayoutActorLogic";
3277
3281
  logic: StateMachine<Readonly< Input>, Events, {}, never, {
@@ -3815,6 +3819,10 @@ export declare function useDiagram(): {
3815
3819
  type: "trigger:OpenSource";
3816
3820
  params: OpenSourceParams;
3817
3821
  };
3822
+ "open source of focused node": {
3823
+ type: "open source of focused node";
3824
+ params: NonReducibleUnknown;
3825
+ };
3818
3826
  "xyflow:setViewportCenter": {
3819
3827
  type: "xyflow:setViewportCenter";
3820
3828
  params: {
@@ -4396,7 +4404,7 @@ export declare function useDiagram(): {
4396
4404
  }>;
4397
4405
  id: "overlays";
4398
4406
  };
4399
- }>, never, never, never, never>, {
4407
+ }>, never, never, never, never>, "open source of focused node", {
4400
4408
  readonly type: "xyflow:fitDiagram";
4401
4409
  readonly params: focusedBounds;
4402
4410
  }];
@@ -4911,7 +4919,7 @@ export declare function useDiagram(): {
4911
4919
  }>;
4912
4920
  id: "overlays";
4913
4921
  };
4914
- }>, never, never, never, never>, {
4922
+ }>, never, never, never, never>, "open source of focused node", {
4915
4923
  readonly type: "xyflow:fitDiagram";
4916
4924
  readonly params: focusedBounds;
4917
4925
  }];
@@ -5480,6 +5488,10 @@ export declare function useDiagram(): {
5480
5488
  type: "trigger:OpenSource";
5481
5489
  params: OpenSourceParams;
5482
5490
  };
5491
+ "open source of focused node": {
5492
+ type: "open source of focused node";
5493
+ params: NonReducibleUnknown;
5494
+ };
5483
5495
  "xyflow:setViewportCenter": {
5484
5496
  type: "xyflow:setViewportCenter";
5485
5497
  params: {
@@ -5841,6 +5853,10 @@ export declare function useDiagram(): {
5841
5853
  type: "trigger:OpenSource";
5842
5854
  params: OpenSourceParams;
5843
5855
  };
5856
+ "open source of focused node": {
5857
+ type: "open source of focused node";
5858
+ params: NonReducibleUnknown;
5859
+ };
5844
5860
  "xyflow:setViewportCenter": {
5845
5861
  type: "xyflow:setViewportCenter";
5846
5862
  params: {
@@ -6986,6 +7002,10 @@ export declare function useDiagram(): {
6986
7002
  type: "trigger:OpenSource";
6987
7003
  params: OpenSourceParams;
6988
7004
  };
7005
+ "open source of focused node": {
7006
+ type: "open source of focused node";
7007
+ params: NonReducibleUnknown;
7008
+ };
6989
7009
  "xyflow:setViewportCenter": {
6990
7010
  type: "xyflow:setViewportCenter";
6991
7011
  params: {
@@ -7355,6 +7375,10 @@ export declare function useDiagram(): {
7355
7375
  type: "trigger:OpenSource";
7356
7376
  params: OpenSourceParams;
7357
7377
  };
7378
+ "open source of focused node": {
7379
+ type: "open source of focused node";
7380
+ params: NonReducibleUnknown;
7381
+ };
7358
7382
  "xyflow:setViewportCenter": {
7359
7383
  type: "xyflow:setViewportCenter";
7360
7384
  params: {
@@ -9545,6 +9569,10 @@ export declare function useDiagram(): {
9545
9569
  type: "trigger:OpenSource";
9546
9570
  params: OpenSourceParams;
9547
9571
  };
9572
+ "open source of focused node": {
9573
+ type: "open source of focused node";
9574
+ params: NonReducibleUnknown;
9575
+ };
9548
9576
  "xyflow:setViewportCenter": {
9549
9577
  type: "xyflow:setViewportCenter";
9550
9578
  params: {
@@ -10966,6 +10994,10 @@ export declare function useDiagram(): {
10966
10994
  type: "trigger:OpenSource";
10967
10995
  params: OpenSourceParams;
10968
10996
  };
10997
+ "open source of focused node": {
10998
+ type: "open source of focused node";
10999
+ params: NonReducibleUnknown;
11000
+ };
10969
11001
  "xyflow:setViewportCenter": {
10970
11002
  type: "xyflow:setViewportCenter";
10971
11003
  params: {
@@ -687,6 +687,10 @@ export declare const diagramMachine: StateMachine<Context, Events, {
687
687
  type: "trigger:OpenSource";
688
688
  params: OpenSourceParams;
689
689
  };
690
+ "open source of focused node": {
691
+ type: "open source of focused node";
692
+ params: NonReducibleUnknown;
693
+ };
690
694
  "xyflow:setViewportCenter": {
691
695
  type: "xyflow:setViewportCenter";
692
696
  params: {
@@ -1977,6 +1981,10 @@ export declare const diagramMachine: StateMachine<Context, Events, {
1977
1981
  type: "trigger:OpenSource";
1978
1982
  params: OpenSourceParams;
1979
1983
  };
1984
+ "open source of focused node": {
1985
+ type: "open source of focused node";
1986
+ params: NonReducibleUnknown;
1987
+ };
1980
1988
  "xyflow:setViewportCenter": {
1981
1989
  type: "xyflow:setViewportCenter";
1982
1990
  params: {
@@ -3368,7 +3376,7 @@ export declare const diagramMachine: StateMachine<Context, Events, {
3368
3376
  }>;
3369
3377
  id: "overlays";
3370
3378
  };
3371
- }>, never, never, never, never>, ActionFunction<Context, Events, Events, undefined, Values<{
3379
+ }>, never, never, never, never>, "open source of focused node", ActionFunction<Context, Events, Events, undefined, Values<{
3372
3380
  syncManualLayoutActorLogic: {
3373
3381
  src: "syncManualLayoutActorLogic";
3374
3382
  logic: StateMachine<Readonly< Input>, SyncLayoutEvents, {}, never, {
@@ -3912,6 +3920,10 @@ export declare const diagramMachine: StateMachine<Context, Events, {
3912
3920
  type: "trigger:OpenSource";
3913
3921
  params: OpenSourceParams;
3914
3922
  };
3923
+ "open source of focused node": {
3924
+ type: "open source of focused node";
3925
+ params: NonReducibleUnknown;
3926
+ };
3915
3927
  "xyflow:setViewportCenter": {
3916
3928
  type: "xyflow:setViewportCenter";
3917
3929
  params: {
@@ -4493,7 +4505,7 @@ export declare const diagramMachine: StateMachine<Context, Events, {
4493
4505
  }>;
4494
4506
  id: "overlays";
4495
4507
  };
4496
- }>, never, never, never, never>, {
4508
+ }>, never, never, never, never>, "open source of focused node", {
4497
4509
  readonly type: "xyflow:fitDiagram";
4498
4510
  readonly params: typeof focusedBounds;
4499
4511
  }];
@@ -5008,7 +5020,7 @@ export declare const diagramMachine: StateMachine<Context, Events, {
5008
5020
  }>;
5009
5021
  id: "overlays";
5010
5022
  };
5011
- }>, never, never, never, never>, {
5023
+ }>, never, never, never, never>, "open source of focused node", {
5012
5024
  readonly type: "xyflow:fitDiagram";
5013
5025
  readonly params: typeof focusedBounds;
5014
5026
  }];
@@ -5577,6 +5589,10 @@ export declare const diagramMachine: StateMachine<Context, Events, {
5577
5589
  type: "trigger:OpenSource";
5578
5590
  params: OpenSourceParams;
5579
5591
  };
5592
+ "open source of focused node": {
5593
+ type: "open source of focused node";
5594
+ params: NonReducibleUnknown;
5595
+ };
5580
5596
  "xyflow:setViewportCenter": {
5581
5597
  type: "xyflow:setViewportCenter";
5582
5598
  params: {
@@ -5938,6 +5954,10 @@ export declare const diagramMachine: StateMachine<Context, Events, {
5938
5954
  type: "trigger:OpenSource";
5939
5955
  params: OpenSourceParams;
5940
5956
  };
5957
+ "open source of focused node": {
5958
+ type: "open source of focused node";
5959
+ params: NonReducibleUnknown;
5960
+ };
5941
5961
  "xyflow:setViewportCenter": {
5942
5962
  type: "xyflow:setViewportCenter";
5943
5963
  params: {
@@ -7083,6 +7103,10 @@ export declare const diagramMachine: StateMachine<Context, Events, {
7083
7103
  type: "trigger:OpenSource";
7084
7104
  params: OpenSourceParams;
7085
7105
  };
7106
+ "open source of focused node": {
7107
+ type: "open source of focused node";
7108
+ params: NonReducibleUnknown;
7109
+ };
7086
7110
  "xyflow:setViewportCenter": {
7087
7111
  type: "xyflow:setViewportCenter";
7088
7112
  params: {
@@ -7452,6 +7476,10 @@ export declare const diagramMachine: StateMachine<Context, Events, {
7452
7476
  type: "trigger:OpenSource";
7453
7477
  params: OpenSourceParams;
7454
7478
  };
7479
+ "open source of focused node": {
7480
+ type: "open source of focused node";
7481
+ params: NonReducibleUnknown;
7482
+ };
7455
7483
  "xyflow:setViewportCenter": {
7456
7484
  type: "xyflow:setViewportCenter";
7457
7485
  params: {
@@ -9642,6 +9670,10 @@ export declare const diagramMachine: StateMachine<Context, Events, {
9642
9670
  type: "trigger:OpenSource";
9643
9671
  params: OpenSourceParams;
9644
9672
  };
9673
+ "open source of focused node": {
9674
+ type: "open source of focused node";
9675
+ params: NonReducibleUnknown;
9676
+ };
9645
9677
  "xyflow:setViewportCenter": {
9646
9678
  type: "xyflow:setViewportCenter";
9647
9679
  params: {
@@ -11063,6 +11095,10 @@ export declare const diagramMachine: StateMachine<Context, Events, {
11063
11095
  type: "trigger:OpenSource";
11064
11096
  params: OpenSourceParams;
11065
11097
  };
11098
+ "open source of focused node": {
11099
+ type: "open source of focused node";
11100
+ params: NonReducibleUnknown;
11101
+ };
11066
11102
  "xyflow:setViewportCenter": {
11067
11103
  type: "xyflow:setViewportCenter";
11068
11104
  params: {
@@ -1,4 +1,4 @@
1
- import { nonNullable, invariant, nonexhaustive, DiagramNode, getBBoxCenter, getParallelStepsPrefix } from "@likec4/core";
1
+ import { nonNullable, invariant, DiagramNode, nonexhaustive, getBBoxCenter, getParallelStepsPrefix } from "@likec4/core";
2
2
  import { getViewportForBounds, applyEdgeChanges, applyNodeChanges } from "@xyflow/react";
3
3
  import { nodeToRect } from "@xyflow/system";
4
4
  import { hasAtLeast, prop, clamp, first } from "remeda";
@@ -11,7 +11,7 @@ import { getAligner, toNodeRect } from "./aligners.js";
11
11
  import { resetEdgeControlPoints, updateEdgeData, updateNodeData, updateNavigationHistory, mergeXYNodesEdges, navigateForward, navigateBack, unfocusNodesEdges, updateActiveWalkthrough, focusNodesEdges, lastClickedNode } from "./assign.js";
12
12
  import { hotkeyActorLogic } from "./hotkeyActor.js";
13
13
  import { syncManualLayoutActorLogic } from "./syncManualLayoutActor.js";
14
- import { typedSystem, focusedBounds } from "./utils.js";
14
+ import { typedSystem, findDiagramNode, focusedBounds } from "./utils.js";
15
15
  const diagramMachine = setup({
16
16
  types: {
17
17
  context: {},
@@ -61,6 +61,23 @@ const diagramMachine = setup({
61
61
  },
62
62
  "trigger:OpenSource": (_, _params) => {
63
63
  },
64
+ "open source of focused node": enqueueActions(({ context, enqueue }) => {
65
+ if (!context.focusedNode || !context.features.enableVscode) return;
66
+ const diagramNode = findDiagramNode(context, context.focusedNode);
67
+ if (!diagramNode) return;
68
+ enqueue.cancel("openSource");
69
+ if (DiagramNode.deploymentRef(diagramNode)) {
70
+ enqueue.raise({ type: "open.source", deployment: DiagramNode.deploymentRef(diagramNode) }, {
71
+ id: "openSource",
72
+ delay: 100
73
+ });
74
+ } else if (DiagramNode.modelRef(diagramNode)) {
75
+ enqueue.raise({ type: "open.source", element: DiagramNode.modelRef(diagramNode) }, {
76
+ id: "openSource",
77
+ delay: 100
78
+ });
79
+ }
80
+ }),
64
81
  "xyflow:fitDiagram": ({ context }, params) => {
65
82
  const {
66
83
  bounds = context.view.bounds,
@@ -284,6 +301,7 @@ const diagramMachine = setup({
284
301
  ...focusNodesEdges(s),
285
302
  viewportBeforeFocus: { ...s.context.viewport }
286
303
  })),
304
+ "open source of focused node",
287
305
  spawnChild("hotkeyActorLogic", { id: "hotkey" }),
288
306
  {
289
307
  type: "xyflow:fitDiagram",
@@ -316,6 +334,7 @@ const diagramMachine = setup({
316
334
  focusedNode: ({ event }) => event.node.id
317
335
  }),
318
336
  assign(focusNodesEdges),
337
+ "open source of focused node",
319
338
  {
320
339
  type: "xyflow:fitDiagram",
321
340
  params: focusedBounds
@@ -329,6 +348,7 @@ const diagramMachine = setup({
329
348
  focusedNode: ({ event }) => event.nodeId
330
349
  }),
331
350
  assign(focusNodesEdges),
351
+ "open source of focused node",
332
352
  {
333
353
  type: "xyflow:fitDiagram",
334
354
  params: focusedBounds
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@likec4/diagram",
3
- "version": "1.23.0",
3
+ "version": "1.24.0",
4
4
  "license": "MIT",
5
5
  "bugs": "https://github.com/likec4/likec4/issues",
6
6
  "homepage": "https://likec4.dev",
@@ -37,8 +37,8 @@
37
37
  "@tabler/icons-react": "3.29.0",
38
38
  "@vanilla-extract/dynamic": "^2.1.2",
39
39
  "@xstate/react": "^5.0.2",
40
- "@xyflow/react": "12.4.2",
41
- "@xyflow/system": "0.0.50",
40
+ "@xyflow/react": "12.4.3",
41
+ "@xyflow/system": "0.0.51",
42
42
  "bezier-js": "^6.1.4",
43
43
  "clsx": "^2.1.1",
44
44
  "d3-shape": "^3.2.0",
@@ -51,7 +51,7 @@
51
51
  "remeda": "^2.20.1",
52
52
  "type-fest": "4.34.1",
53
53
  "xstate": "^5.19.2",
54
- "@likec4/core": "1.23.0"
54
+ "@likec4/core": "1.24.0"
55
55
  },
56
56
  "peerDependencies": {
57
57
  "@mantine/core": "7.17.0",
@@ -73,7 +73,7 @@
73
73
  "vite": "6.1.0",
74
74
  "vite-plugin-dts": "^4.5.0",
75
75
  "vitest": "^3.0.4",
76
- "@likec4/tsconfig": "1.23.0"
76
+ "@likec4/tsconfig": "1.24.0"
77
77
  },
78
78
  "scripts": {
79
79
  "typecheck": "tsc --noEmit",
@@ -43,11 +43,12 @@ export function StaticLikeC4Diagram({
43
43
  enableRelationshipDetails={enableRelationshipDetails}
44
44
  enableRelationshipBrowser={enableRelationshipBrowser}
45
45
  enableDynamicViewWalkthrough={false}
46
+ showNavigationButtons={false}
46
47
  experimentalEdgeEditing={false}
47
48
  enableFocusMode={false}
49
+ enableSearch={false}
48
50
  nodesSelectable={false}
49
51
  nodesDraggable={false}
50
- enableSearch={false}
51
52
  {...rest}
52
53
  />
53
54
  )
@@ -63,7 +63,7 @@ import {
63
63
  } from './assign'
64
64
  import { type HotKeyEvent, hotkeyActorLogic } from './hotkeyActor'
65
65
  import { type Events as SyncLayoutEvents, syncManualLayoutActorLogic } from './syncManualLayoutActor'
66
- import { focusedBounds, typedSystem } from './utils'
66
+ import { findDiagramNode, focusedBounds, typedSystem } from './utils'
67
67
 
68
68
  type XYStoreApi = ReturnType<typeof useStoreApi<Types.Node, Types.Edge>>
69
69
 
@@ -220,6 +220,25 @@ export const diagramMachine = setup({
220
220
  'trigger:OpenSource': (_, _params: OpenSourceParams) => {
221
221
  },
222
222
 
223
+ 'open source of focused node': enqueueActions(({ context, enqueue }) => {
224
+ if (!context.focusedNode || !context.features.enableVscode) return
225
+ const diagramNode = findDiagramNode(context, context.focusedNode)
226
+ if (!diagramNode) return
227
+
228
+ enqueue.cancel('openSource')
229
+ if (DiagramNode.deploymentRef(diagramNode)) {
230
+ enqueue.raise({ type: 'open.source', deployment: DiagramNode.deploymentRef(diagramNode)! }, {
231
+ id: 'openSource',
232
+ delay: 100,
233
+ })
234
+ } else if (DiagramNode.modelRef(diagramNode)) {
235
+ enqueue.raise({ type: 'open.source', element: DiagramNode.modelRef(diagramNode)! }, {
236
+ id: 'openSource',
237
+ delay: 100,
238
+ })
239
+ }
240
+ }),
241
+
223
242
  'xyflow:fitDiagram': ({ context }, params?: { duration?: number; bounds?: BBox }) => {
224
243
  const {
225
244
  bounds = context.view.bounds,
@@ -458,6 +477,7 @@ export const diagramMachine = setup({
458
477
  ...focusNodesEdges(s),
459
478
  viewportBeforeFocus: { ...s.context.viewport },
460
479
  })),
480
+ 'open source of focused node',
461
481
  spawnChild('hotkeyActorLogic', { id: 'hotkey' }),
462
482
  {
463
483
  type: 'xyflow:fitDiagram',
@@ -490,6 +510,7 @@ export const diagramMachine = setup({
490
510
  focusedNode: ({ event }) => event.node.id as NodeId,
491
511
  }),
492
512
  assign(focusNodesEdges),
513
+ 'open source of focused node',
493
514
  {
494
515
  type: 'xyflow:fitDiagram',
495
516
  params: focusedBounds,
@@ -503,6 +524,7 @@ export const diagramMachine = setup({
503
524
  focusedNode: ({ event }) => event.nodeId,
504
525
  }),
505
526
  assign(focusNodesEdges),
527
+ 'open source of focused node',
506
528
  {
507
529
  type: 'xyflow:fitDiagram',
508
530
  params: focusedBounds,