@likec4/diagram 1.24.0 → 1.25.0

package/src/overlays/relationships-browser/actor.ts

@@ -77,6 +77,9 @@ export type Events =
   | { type: 'xyflow.resized' }
   | { type: 'xyflow.edgeMouseEnter'; edge: RelationshipsBrowserTypes.Edge }
   | { type: 'xyflow.edgeMouseLeave'; edge: RelationshipsBrowserTypes.Edge }
+  | { type: 'xyflow.selectionChange'; nodes: RelationshipsBrowserTypes.Node[]; edges: RelationshipsBrowserTypes.Edge[] }
+  | { type: 'dim.nonhovered.edges' }
+  | { type: 'undim.edges' }
   | { type: 'xyflow.updateNodeInternals' }
   | { type: 'xyflow.unmount' }
   | { type: 'fitDiagram'; duration?: number; bounds?: BBox }
@@ -274,7 +277,7 @@ export const relationshipsBrowserLogic = setup({
         }
       }
 
-      requestAnimationFrame(() => updateNodeInternals(updates, { triggerFitView: false }))
+      updateNodeInternals(updates, { triggerFitView: false })
     },
     'xyflow:fitDiagram': ({ context }, params?: { duration?: number; bounds?: BBox }) => {
       let {
@@ -289,16 +292,14 @@ export const relationshipsBrowserLogic = setup({
       if (bounds) {
         const { width, height } = xystore.getState()
         const viewport = getViewportForBounds(bounds, width, height, MinZoom, maxZoom, ViewPadding)
-        requestAnimationFrame(() => xyflow.setViewport(viewport, duration > 0 ? { duration } : undefined))
+        xyflow.setViewport(viewport, duration > 0 ? { duration } : undefined)
       } else {
-        requestAnimationFrame(() =>
-          xyflow.fitView({
-            minZoom: MinZoom,
-            maxZoom,
-            padding: ViewPadding,
-            ...(duration > 0 && { duration }),
-          })
-        )
+        xyflow.fitView({
+          minZoom: MinZoom,
+          maxZoom,
+          padding: ViewPadding,
+          ...(duration > 0 && { duration }),
+        })
       }
     },
   },
@@ -350,7 +351,10 @@ export const relationshipsBrowserLogic = setup({
     'isReady': {
       always: [{
         guard: 'isReady',
-        actions: raise({ type: 'fitDiagram', duration: 0 }),
+        actions: [
+          raise({ type: 'fitDiagram', duration: 0 }),
+          raise({ type: 'xyflow.updateNodeInternals' }, { delay: 100 }),
+        ],
         target: 'active',
       }, {
         target: 'initializing',
@@ -360,7 +364,74 @@ export const relationshipsBrowserLogic = setup({
       initial: 'idle',
       tags: ['active'],
       states: {
-        'idle': {},
+        'idle': {
+          on: {
+            'xyflow.edgeMouseEnter': {
+              actions: [
+                assign({
+                  xyedges: ({ context, event }) => {
+                    const hasDimmed = context.xyedges.some(edge => edge.data.dimmed === true)
+                    return context.xyedges.map(edge => {
+                      if (edge.id === event.edge.id) {
+                        return Base.setData(edge, {
+                          hovered: true,
+                          dimmed: false,
+                        })
+                      }
+                      return hasDimmed && !edge.data.dimmed && !edge.selected ? Base.setDimmed(edge, 'immediate') : edge
+                    })
+                  },
+                }),
+                cancel('undim.edges'),
+                cancel('dim.nonhovered.edges'),
+                raise({ type: 'dim.nonhovered.edges' }, { id: 'dim.nonhovered.edges', delay: 100 }),
+              ],
+            },
+            'xyflow.edgeMouseLeave': {
+              actions: [
+                assign({
+                  xyedges: ({ context, event }) =>
+                    context.xyedges.map(edge => {
+                      if (edge.id === event.edge.id) {
+                        return Base.setHovered(edge, false)
+                      }
+                      return edge
+                    }),
+                }),
+                cancel('dim.nonhovered.edges'),
+                raise({ type: 'undim.edges' }, { id: 'undim.edges', delay: 400 }),
+              ],
+            },
+            'dim.nonhovered.edges': {
+              actions: assign({
+                xyedges: ({ context }) => context.xyedges.map(edge => Base.setDimmed(edge, edge.data.hovered !== true)),
+              }),
+            },
+            'undim.edges': {
+              actions: assign({
+                xyedges: ({ context }) => {
+                  const hasSelected = context.xyedges.some(edge => edge.selected === true)
+                  if (hasSelected) {
+                    return context.xyedges.map(edge =>
+                      Base.setDimmed(edge, edge.selected !== true ? edge.data.dimmed || 'immediate' : false)
+                    )
+                  }
+                  return context.xyedges.map(Base.setDimmed(false))
+                },
+              }),
+            },
+            'xyflow.selectionChange': {
+              actions: enqueueActions(({ event, context, enqueue }) => {
+                if (
+                  event.edges.length === 0 && context.xyedges.some(e => e.data.dimmed) &&
+                  !context.xyedges.some(e => e.data.hovered)
+                ) {
+                  enqueue.raise({ type: 'undim.edges' })
+                }
+              }),
+            },
+          },
+        },
         'layouting': {
           invoke: {
             id: 'layouter',
@@ -376,17 +447,16 @@ export const relationshipsBrowserLogic = setup({
             },
             onDone: {
               target: 'idle',
-              actions: [
-                assign({
-                  xynodes: ({ event }) => event.output.xynodes,
-                  xyedges: ({ event }) => event.output.xyedges,
+              actions: enqueueActions(({ enqueue, event }) => {
+                enqueue.assign({
+                  xynodes: event.output.xynodes,
+                  xyedges: event.output.xyedges,
                   navigateFromNode: null,
-                }),
-                raise({ type: 'fitDiagram' }, { id: 'fitDiagram', delay: 80 }),
-                raise({ type: 'xyflow.updateNodeInternals' }, { delay: 100 }),
-                raise({ type: 'xyflow.updateNodeInternals' }, { delay: 250 }),
-                raise({ type: 'xyflow.updateNodeInternals' }, { delay: 500 }),
-              ],
+                }), enqueue.raise({ type: 'fitDiagram' }, { id: 'fitDiagram', delay: 50 })
+                for (let i = 0; i <= 10; i++) {
+                  enqueue.raise({ type: 'xyflow.updateNodeInternals' }, { delay: 100 + i * 50 })
+                }
+              }),
             },
           },
           on: {

package/src/state/DiagramActorProvider.tsx

@@ -3,7 +3,7 @@ import { useCallbackRef } from '@mantine/hooks'
 import { useActorRef, useSelector } from '@xstate/react'
 import { useStoreApi } from '@xyflow/react'
 import { shallowEqual } from 'fast-equals'
-import { type PropsWithChildren, useEffect } from 'react'
+import { type PropsWithChildren, useEffect, useRef } from 'react'
 import { useDiagramEventHandlersRef } from '../context/DiagramEventHandlers'
 import { DiagramFeatures, useEnabledFeatures } from '../context/DiagramFeatures'
 import { DiagramActorSafeContext } from '../hooks/safeContext'
@@ -15,7 +15,6 @@ import { syncManualLayoutActorLogic } from './syncManualLayoutActor'
 import type { DiagramActorRef } from './types'
 
 type ActorContextInput = Omit<Input, 'xystore' | 'features'>
-
 export function DiagramActorProvider({ input, children }: PropsWithChildren<{ input: ActorContextInput }>) {
   const handlersRef = useDiagramEventHandlersRef()
   const xystore = useStoreApi<Types.Node, Types.Edge>()
@@ -80,8 +79,19 @@ const SyncStore = (
     actorRef.send({ type: 'update.features', features })
   }, [actorRef, features])
 
+  const frameReq = useRef<number>(null)
+
   useUpdateEffect(() => {
-    actorRef.send({ type: 'update.view', view, xyedges, xynodes })
+    frameReq.current = requestAnimationFrame(() => {
+      frameReq.current = null
+      actorRef.send({ type: 'update.view', view, xyedges, xynodes })
+    })
+    return () => {
+      if (frameReq.current != null) {
+        cancelAnimationFrame(frameReq.current)
+      }
+      frameReq.current = null
+    }
   }, [actorRef, view, xyedges, xynodes])
 
   return null

package/src/state/assign.ts

@@ -162,7 +162,21 @@ export function updateNavigationHistory({ context, event }: ActionArg): Partial<
     lastOnNavigate,
     viewport,
   } = context
-  const stepCurrent = nonNullable(history[currentIndex])
+  const stepCurrent = history[currentIndex]
+  if (!stepCurrent) {
+    return {
+      navigationHistory: {
+        currentIndex: 0,
+        history: [
+          {
+            viewId: event.view.id,
+            fromNode: null,
+            viewport: { ...viewport },
+          },
+        ],
+      },
+    }
+  }
   if (stepCurrent.viewId !== event.view.id) {
     // Navigation by browser back/forward ?
     if (!lastOnNavigate) {

package/src/state/diagram-machine.ts

@@ -62,6 +62,7 @@ import {
   updateNodeData,
 } from './assign'
 import { type HotKeyEvent, hotkeyActorLogic } from './hotkeyActor'
+import { DiagramToggledFeaturesPersistence } from './persistence'
 import { type Events as SyncLayoutEvents, syncManualLayoutActorLogic } from './syncManualLayoutActor'
 import { findDiagramNode, focusedBounds, typedSystem } from './utils'
 
@@ -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,22 +225,23 @@ export const diagramMachine = setup({
     'trigger:OpenSource': (_, _params: OpenSourceParams) => {
     },
 
-    'open source of focused node': enqueueActions(({ context, enqueue }) => {
-      if (!context.focusedNode || !context.features.enableVscode) return
-      const diagramNode = findDiagramNode(context, context.focusedNode)
+    '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
 
-      enqueue.cancel('openSource')
       if (DiagramNode.deploymentRef(diagramNode)) {
-        enqueue.raise({ type: 'open.source', deployment: DiagramNode.deploymentRef(diagramNode)! }, {
-          id: 'openSource',
-          delay: 100,
-        })
+        enqueue.raise({ type: 'open.source', deployment: DiagramNode.deploymentRef(diagramNode)! })
       } else if (DiagramNode.modelRef(diagramNode)) {
-        enqueue.raise({ type: 'open.source', element: DiagramNode.modelRef(diagramNode)! }, {
-          id: 'openSource',
-          delay: 100,
-        })
+        enqueue.raise({ type: 'open.source', element: DiagramNode.modelRef(diagramNode)! })
       }
     }),
 
@@ -260,6 +266,24 @@ export const diagramMachine = setup({
       panZoom?.setViewport(viewport, duration > 0 ? { duration } : undefined)
     },
 
+    'xyflow:fitFocusedBounds': ({ context }) => {
+      const { bounds, duration = 450 } = focusedBounds({ context })
+      const { width, height, panZoom, transform } = context.xystore.getState()
+
+      const maxZoom = Math.max(1, transform[2])
+      const viewport = getViewportForBounds(
+        bounds,
+        width,
+        height,
+        MinZoom,
+        maxZoom,
+        context.fitViewPadding,
+      )
+      viewport.x = Math.round(viewport.x)
+      viewport.y = Math.round(viewport.y)
+      panZoom?.setViewport(viewport, duration > 0 ? { duration } : undefined)
+    },
+
     'xyflow:setViewportCenter': ({ context }, params: { x: number; y: number }) => {
       const { x, y } = params
       invariant(context.xyflow, 'xyflow is not initialized')
@@ -359,7 +383,7 @@ export const diagramMachine = setup({
   context: ({ input, self, spawn }) => ({
     ...input,
     features: { ...AllDisabled },
-    toggledFeatures: {
+    toggledFeatures: DiagramToggledFeaturesPersistence.read() ?? {
       enableReadOnly: true,
     },
     initialized: false,
@@ -417,10 +441,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: [
@@ -432,9 +457,10 @@ export const diagramMachine = setup({
             target: 'focused',
           },
           {
-            actions: assign({
-              lastClickedNode,
-            }),
+            actions: [
+              'assign lastClickedNode',
+              'open source of focused or last clicked node',
+            ],
           },
         ],
         'xyflow.paneClick': {
@@ -477,12 +503,9 @@ export const diagramMachine = setup({
           ...focusNodesEdges(s),
           viewportBeforeFocus: { ...s.context.viewport },
         })),
-        'open source of focused node',
+        'open source of focused or last clicked node',
         spawnChild('hotkeyActorLogic', { id: 'hotkey' }),
-        {
-          type: 'xyflow:fitDiagram',
-          params: focusedBounds,
-        },
+        'xyflow:fitFocusedBounds',
       ],
       exit: enqueueActions(({ enqueue, context }) => {
         enqueue.stopChild('hotkey')
@@ -507,14 +530,11 @@ export const diagramMachine = setup({
             actions: [
               assign({
                 lastClickedNode,
-                focusedNode: ({ event }) => event.node.id as NodeId,
               }),
-              assign(focusNodesEdges),
-              'open source of focused node',
-              {
-                type: 'xyflow:fitDiagram',
-                params: focusedBounds,
-              },
+              raise(({ event }) => ({
+                type: 'focus.node',
+                nodeId: event.node.id as NodeId,
+              })),
             ],
           },
         ],
@@ -524,11 +544,8 @@ export const diagramMachine = setup({
               focusedNode: ({ event }) => event.nodeId,
             }),
             assign(focusNodesEdges),
-            'open source of focused node',
-            {
-              type: 'xyflow:fitDiagram',
-              params: focusedBounds,
-            },
+            'open source of focused or last clicked node',
+            'xyflow:fitFocusedBounds',
           ],
         },
         'key.esc': {
@@ -556,57 +573,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', {
@@ -614,12 +590,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 }) => {
@@ -632,10 +640,7 @@ export const diagramMachine = setup({
           },
         }),
         assign(updateActiveWalkthrough),
-        {
-          type: 'xyflow:fitDiagram',
-          params: focusedBounds,
-        },
+        'xyflow:fitFocusedBounds',
       ],
       on: {
         'key.esc': {
@@ -666,15 +671,15 @@ export const diagramMachine = setup({
               },
             })
             enqueue.assign(updateActiveWalkthrough)
-            enqueue({
-              type: 'xyflow:fitDiagram',
-              params: focusedBounds,
-            })
+            enqueue('xyflow:fitFocusedBounds')
           }),
         },
         'walkthrough.end': {
           target: 'idle',
         },
+        'xyflow.paneDblClick': {
+          target: 'idle',
+        },
         // We received another view, close overlay and process event again
         'update.view': {
           guard: 'is another view',
@@ -682,18 +687,18 @@ export const diagramMachine = setup({
           target: 'idle',
         },
       },
-      exit: enqueueActions(({ enqueue, context }) => {
+      exit: enqueueActions(({ enqueue, context, event }) => {
         enqueue.stopChild('hotkey')
         if (context.viewportBeforeFocus) {
           enqueue({ type: 'xyflow:setViewport', params: { viewport: context.viewportBeforeFocus } })
         } else {
           enqueue({ type: 'xyflow:fitDiagram' })
         }
-        enqueue.assign((s) => ({
+        enqueue.assign({
           activeWalkthrough: null,
-          ...unfocusNodesEdges(s),
+          ...unfocusNodesEdges({ context, event }),
           viewportBeforeFocus: null,
-        }))
+        })
       }),
     },
   },
@@ -723,15 +728,13 @@ export const diagramMachine = setup({
     },
     'navigate.to': {
       guard: 'is another view',
-      actions: [
-        assign({
-          lastOnNavigate: ({ context, event }) => ({
-            fromView: context.view.id,
-            toView: event.viewId,
-            fromNode: event.fromNode ?? null,
-          }),
+      actions: assign({
+        lastOnNavigate: ({ context, event }) => ({
+          fromView: context.view.id,
+          toView: event.viewId,
+          fromNode: event.fromNode ?? null,
         }),
-      ],
+      }),
       target: '.navigating',
     },
     'navigate.back': {
@@ -811,7 +814,10 @@ export const diagramMachine = setup({
     'layout.align': {
       guard: 'not readonly',
       actions: [
-        { type: 'layout.align', params: ({ event }) => ({ mode: event.mode }) },
+        {
+          type: 'layout.align',
+          params: ({ event }) => ({ mode: event.mode }),
+        },
         raise({ type: 'saveManualLayout.schedule' }),
       ],
     },
@@ -830,7 +836,7 @@ export const diagramMachine = setup({
       ],
     },
     'open.elementDetails': {
-      actions: enqueueActions(({ context, enqueue, system, event }) => {
+      actions: sendTo(({ system }) => typedSystem(system).overlaysActorRef!, ({ context, event }) => {
         let initiatedFrom = null as null | {
           node: NodeId
           clientRect: Rect
@@ -851,7 +857,7 @@ export const diagramMachine = setup({
             clientRect,
           }
         }
-        enqueue.sendTo(typedSystem(system).overlaysActorRef!, {
+        return ({
           type: 'open.elementDetails' as const,
           subject: event.fqn,
           currentView: context.view,
@@ -885,11 +891,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>
+      }
+      return null
+    } 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
+  },
+}

package/src/theme-vars.css.ts

@@ -67,15 +67,3 @@ export const xyvars = createGlobalThemeContract({
     borderRadius: 'node-border-radius',
   },
 }, (value) => `xy-${value}`)
-
-export const whereLight = ':where([data-mantine-color-scheme="light"])'
-export const whereDark = ':where([data-mantine-color-scheme="dark"])'
-
-export const easings = {
-  out: 'cubic-bezier(0, 0, 0.40, 1)',
-  inOut: 'cubic-bezier(0.50, 0, 0.2, 1)',
-}
-
-export const transitions = {
-  fast: `all 130ms ${easings.inOut}`,
-}