@likec4/diagram 1.23.1 → 1.24.1

package/src/state/diagram-machine.ts

@@ -62,8 +62,9 @@ import {
   updateNodeData,
 } from './assign'
 import { type HotKeyEvent, hotkeyActorLogic } from './hotkeyActor'
+import { DiagramToggledFeaturesPersistence } from './persistence'
 import { type Events as SyncLayoutEvents, syncManualLayoutActorLogic } from './syncManualLayoutActor'
-import { focusedBounds, typedSystem } from './utils'
+import { findDiagramNode, focusedBounds, typedSystem } from './utils'
 
 type XYStoreApi = ReturnType<typeof useStoreApi<Types.Node, Types.Edge>>
 
@@ -197,7 +198,7 @@ export const diagramMachine = setup({
       }
       nonexhaustive(event.type)
     },
-    'click: selected node ': ({ event }) => {
+    'click: selected node': ({ event }) => {
       assertEvent(event, 'xyflow.nodeClick')
       return event.node.selected === true
     },
@@ -209,6 +210,10 @@ export const diagramMachine = setup({
       assertEvent(event, 'xyflow.nodeClick')
       return context.focusedNode === event.node.id
     },
+    'click: node has connections': ({ context, event }) => {
+      assertEvent(event, 'xyflow.nodeClick')
+      return context.xyedges.some(e => e.source === event.node.id || e.target === event.node.id)
+    },
   },
   actions: {
     'trigger:NavigateTo': (_, _params: { viewId: ViewId }) => {
@@ -220,6 +225,26 @@ export const diagramMachine = setup({
     'trigger:OpenSource': (_, _params: OpenSourceParams) => {
     },
 
+    'assign lastClickedNode': assign(({ context, event }) => {
+      assertEvent(event, 'xyflow.nodeClick')
+      return {
+        lastClickedNode: lastClickedNode({ context, event }),
+      }
+    }),
+
+    'open source of focused or last clicked node': enqueueActions(({ context, enqueue }) => {
+      const nodeId = context.focusedNode ?? context.lastClickedNode?.id
+      if (!nodeId || !context.features.enableVscode) return
+      const diagramNode = findDiagramNode(context, nodeId)
+      if (!diagramNode) return
+
+      if (DiagramNode.deploymentRef(diagramNode)) {
+        enqueue.raise({ type: 'open.source', deployment: DiagramNode.deploymentRef(diagramNode)! })
+      } else if (DiagramNode.modelRef(diagramNode)) {
+        enqueue.raise({ type: 'open.source', element: DiagramNode.modelRef(diagramNode)! })
+      }
+    }),
+
     'xyflow:fitDiagram': ({ context }, params?: { duration?: number; bounds?: BBox }) => {
       const {
         bounds = context.view.bounds,
@@ -340,7 +365,7 @@ export const diagramMachine = setup({
   context: ({ input, self, spawn }) => ({
     ...input,
     features: { ...AllDisabled },
-    toggledFeatures: {
+    toggledFeatures: DiagramToggledFeaturesPersistence.read() ?? {
       enableReadOnly: true,
     },
     initialized: false,
@@ -398,10 +423,11 @@ export const diagramMachine = setup({
           {
             // TODO: xstate fails to infer the type of the guard
             guard: and([
-              'enabled: FocusMode' as const,
+              'enabled: FocusMode',
+              'click: node has connections',
               or([
-                'click: same node' as const,
-                'click: selected node ' as const,
+                'click: same node',
+                'click: selected node',
               ]),
             ]) as any,
             actions: [
@@ -413,9 +439,10 @@ export const diagramMachine = setup({
             target: 'focused',
           },
           {
-            actions: assign({
-              lastClickedNode,
-            }),
+            actions: [
+              'assign lastClickedNode',
+              'open source of focused or last clicked node',
+            ],
           },
         ],
         'xyflow.paneClick': {
@@ -458,6 +485,7 @@ export const diagramMachine = setup({
           ...focusNodesEdges(s),
           viewportBeforeFocus: { ...s.context.viewport },
         })),
+        'open source of focused or last clicked node',
         spawnChild('hotkeyActorLogic', { id: 'hotkey' }),
         {
           type: 'xyflow:fitDiagram',
@@ -490,6 +518,7 @@ export const diagramMachine = setup({
                 focusedNode: ({ event }) => event.node.id as NodeId,
               }),
               assign(focusNodesEdges),
+              'open source of focused or last clicked node',
               {
                 type: 'xyflow:fitDiagram',
                 params: focusedBounds,
@@ -503,6 +532,7 @@ export const diagramMachine = setup({
               focusedNode: ({ event }) => event.nodeId,
             }),
             assign(focusNodesEdges),
+            'open source of focused or last clicked node',
             {
               type: 'xyflow:fitDiagram',
               params: focusedBounds,
@@ -534,57 +564,16 @@ export const diagramMachine = setup({
     },
     // Navigating to another view (after `navigateTo` event)
     navigating: {
-      initial: 'pending',
-      type: 'compound',
-      states: {
-        pending: {
-          entry: enqueueActions(({ enqueue }) => {
-            enqueue('closeAllOverlays')
-            enqueue('stopSyncLayout')
-            enqueue({
-              type: 'trigger:NavigateTo',
-              params: ({ context }) => ({
-                viewId: nonNullable(context.lastOnNavigate, 'Invalid state, lastOnNavigate is null').toView,
-              }),
-            })
+      entry: [
+        'closeAllOverlays',
+        'stopSyncLayout',
+        {
+          type: 'trigger:NavigateTo',
+          params: ({ context }) => ({
+            viewId: nonNullable(context.lastOnNavigate, 'Invalid state, lastOnNavigate is null').toView,
           }),
-          on: {
-            'update.view': {
-              actions: enqueueActions(({ enqueue, context, event }) => {
-                const { fromNode, toNode } = findCorrespondingNode(context, event)
-                if (fromNode && toNode) {
-                  enqueue({
-                    type: 'xyflow:alignNodeFromToAfterNavigate',
-                    params: {
-                      fromNode: fromNode.id,
-                      toPosition: {
-                        x: toNode.position[0],
-                        y: toNode.position[1],
-                      },
-                    },
-                  })
-                  enqueue.raise({ type: 'fitDiagram' }, { id: 'fitDiagram', delay: 80 })
-                } else {
-                  enqueue({
-                    type: 'xyflow:setViewportCenter',
-                    params: getBBoxCenter(event.view.bounds),
-                  })
-                  enqueue.raise({ type: 'fitDiagram', duration: 200 }, { id: 'fitDiagram', delay: 25 })
-                }
-                enqueue.assign(updateNavigationHistory)
-                enqueue.assign(mergeXYNodesEdges)
-              }),
-              target: 'done',
-            },
-          },
         },
-        done: {
-          type: 'final',
-        },
-      },
-      onDone: {
-        target: 'idle',
-      },
+      ],
       exit: assign({
         syncLayoutActorRef: ({ self, context, spawn }) =>
           spawn('syncManualLayoutActorLogic', {
@@ -592,12 +581,44 @@ export const diagramMachine = setup({
             systemId: 'syncLayout',
             input: { parent: self, viewId: context.view.id },
           }),
-        lastOnNavigate: null,
+        // lastOnNavigate: null,
       }),
+      on: {
+        'update.view': {
+          actions: enqueueActions(({ enqueue, context, event }) => {
+            const { fromNode, toNode } = findCorrespondingNode(context, event)
+            if (fromNode && toNode) {
+              enqueue({
+                type: 'xyflow:alignNodeFromToAfterNavigate',
+                params: {
+                  fromNode: fromNode.id,
+                  toPosition: {
+                    x: toNode.position[0],
+                    y: toNode.position[1],
+                  },
+                },
+              })
+              enqueue.raise({ type: 'fitDiagram' }, { id: 'fitDiagram', delay: 80 })
+            } else {
+              enqueue({
+                type: 'xyflow:setViewportCenter',
+                params: getBBoxCenter(event.view.bounds),
+              })
+              enqueue.raise({ type: 'fitDiagram', duration: 200 }, { id: 'fitDiagram', delay: 25 })
+            }
+            enqueue.assign(updateNavigationHistory)
+            enqueue.assign(mergeXYNodesEdges)
+            enqueue.assign({
+              lastOnNavigate: null,
+            })
+          }),
+          target: '#idle',
+        },
+      },
     },
     walkthrough: {
       entry: [
-        // spawnChild('hotkeyActor', { id: 'hotkey' }),
+        spawnChild('hotkeyActorLogic', { id: 'hotkey' }),
         assign({
           viewportBeforeFocus: ({ context }) => context.viewport,
           activeWalkthrough: ({ context, event }) => {
@@ -863,11 +884,13 @@ export const diagramMachine = setup({
     },
     'toggle.feature': {
       actions: assign({
-        toggledFeatures: ({ context, event }) => ({
-          ...context.toggledFeatures,
-          [`enable${event.feature}`]: event.forceValue ??
-            !(context.toggledFeatures[`enable${event.feature}`] ?? context.features[`enable${event.feature}`]),
-        }),
+        toggledFeatures: ({ context, event }) => {
+          return DiagramToggledFeaturesPersistence.write({
+            ...context.toggledFeatures,
+            [`enable${event.feature}`]: event.forceValue ??
+              !(context.toggledFeatures[`enable${event.feature}`] ?? context.features[`enable${event.feature}`]),
+          })
+        },
       }),
     },
   },

package/src/state/persistence.ts

@@ -0,0 +1,22 @@
+import { isBoolean, pickBy } from 'remeda'
+import type { EnabledFeatures } from '../context/DiagramFeatures'
+
+const key = `likec4:diagram:toggledFeatures`
+export const DiagramToggledFeaturesPersistence = {
+  read() {
+    try {
+      let fromStorage = sessionStorage.getItem(key)
+      if (fromStorage) {
+        return JSON.parse(fromStorage) as Partial<EnabledFeatures>
+      }
+      throw new Error(`Workspace ${key} not found`)
+    } catch (e) {
+      console.error(`Error reading fromStorage ${key}:`, e)
+      return null
+    }
+  },
+  write<F extends Partial<EnabledFeatures>>(toggledFeatures: F): F {
+    sessionStorage.setItem(key, JSON.stringify(pickBy(toggledFeatures, isBoolean)))
+    return toggledFeatures
+  },
+}