@likec4/diagram 1.0.1 → 1.1.0

package/src/state/diagramStore.ts

@@ -11,7 +11,7 @@ import { shallow } from 'zustand/shallow'
 import { createWithEqualityFn } from 'zustand/traditional'
 import type { Change, DiagramNodeWithNavigate, LikeC4DiagramEventHandlers } from '../LikeC4Diagram.props'
 import { MinZoom } from '../xyflow/const'
-import type { XYFlowInstance } from '../xyflow/types'
+import type { XYFlowInstance, XYFlowNode } from '../xyflow/types'
 
 export type DiagramStore = {
   // Incoming props
@@ -20,6 +20,8 @@ export type DiagramStore = {
   showElementLinks: boolean
   fitViewEnabled: boolean
   fitViewPadding: number
+  zoomable: boolean
+  pannable: boolean
   nodesDraggable: boolean
   nodesSelectable: boolean
 
@@ -30,6 +32,7 @@ export type DiagramStore = {
   // This is XYFlow id's
   lastClickedNodeId: string | null
   lastClickedEdgeId: string | null
+  focusedNodeId: string | null
   hoveredNodeId: string | null
   hoveredEdgeId: string | null
 
@@ -57,6 +60,8 @@ export type DiagramInitialState = // Required properties
     | 'showElementLinks'
     | 'fitViewEnabled'
     | 'fitViewPadding'
+    | 'zoomable'
+    | 'pannable'
     | 'nodesDraggable'
     | 'nodesSelectable'
   >
@@ -81,7 +86,7 @@ interface DiagramStoreActions {
   getElement(id: Fqn): DiagramNode | null
   triggerOnChange: (changes: NonEmptyArray<Change>) => void
   triggerOnNavigateTo: (xynodeId: string, event: ReactMouseEvent) => void
-  fitDiagram: () => void
+  fitDiagram: (centerNode?: XYFlowNode) => void
 }
 
 export type DiagramState = Simplify<DiagramStore & DiagramStoreActions>
@@ -90,6 +95,7 @@ const DEFAULT_PROPS: Except<DiagramStore, RequiredKeysOf<DiagramInitialState> |
   initialized: false,
   previousViews: [],
   viewportChanged: false,
+  focusedNodeId: null,
   hoveredNodeId: null,
   hoveredEdgeId: null,
   lastClickedNodeId: null,
@@ -133,6 +139,7 @@ export function createDiagramStore<T extends Exact<CreateDiagramStore, T>>(props
               view: currentView,
               lastOnNavigate,
               previousViews,
+              focusedNodeId,
               lastClickedNodeId,
               lastClickedEdgeId,
               hoveredEdgeId,
@@ -159,6 +166,9 @@ export function createDiagramStore<T extends Exact<CreateDiagramStore, T>>(props
               if (hoveredNodeId && !containsWithId(view.nodes, hoveredNodeId)) {
                 hoveredNodeId = null
               }
+              if (focusedNodeId && !containsWithId(view.nodes, focusedNodeId)) {
+                focusedNodeId = null
+              }
               if (lastClickedEdgeId && !containsWithId(view.edges, lastClickedEdgeId)) {
                 lastClickedEdgeId = null
               }
@@ -171,6 +181,7 @@ export function createDiagramStore<T extends Exact<CreateDiagramStore, T>>(props
               lastClickedNodeId = null
               hoveredEdgeId = null
               hoveredNodeId = null
+              focusedNodeId = null
 
               // Update history stack (back button not implemented yet)
               previousViews = [
@@ -186,6 +197,7 @@ export function createDiagramStore<T extends Exact<CreateDiagramStore, T>>(props
                 previousViews,
                 lastClickedNodeId,
                 lastClickedEdgeId,
+                focusedNodeId,
                 hoveredEdgeId,
                 hoveredNodeId
               },
@@ -336,15 +348,22 @@ export function createDiagramStore<T extends Exact<CreateDiagramStore, T>>(props
             )
           },
 
-          fitDiagram: () => {
-            const { fitViewPadding, xyflow } = get()
+          fitDiagram: (centerNode) => {
+            const { fitViewPadding, xyflow, focusedNodeId } = get()
             xyflow.fitView({
               includeHiddenNodes: true,
-              duration: 400,
-              padding: fitViewPadding,
+              duration: (centerNode && focusedNodeId) ? 300 : 400,
+              padding: centerNode ? 0 : fitViewPadding,
               minZoom: MinZoom,
-              maxZoom: 1
+              maxZoom: 1,
+              ...(centerNode && { nodes: [centerNode] })
             })
+            if (centerNode && focusedNodeId !== centerNode.id) {
+              set({ focusedNodeId: centerNode.id }, noReplace, 'focus node')
+            }
+            if (!centerNode && !!focusedNodeId) {
+              set({ focusedNodeId: null }, noReplace, 'unfocus')
+            }
           }
         }),
         {

package/src/ui/index.ts

@@ -1,3 +1,2 @@
 // export { default as Camera } from './Camera'
-export { KeepAspectRatio } from './KeepAspectRatio'
 export { default as OptionsPanel } from './OptionsPanel'

package/src/xyflow/FitviewOnDiagramChange.tsx

@@ -1,6 +1,5 @@
-import { useDebouncedEffect, useDebouncedState, useRafEffect } from '@react-hookz/web'
+import { useDebouncedCallback, useDebouncedEffect, useRafEffect } from '@react-hookz/web'
 import { useNodesInitialized } from '@xyflow/react'
-import { shallowEqual } from 'fast-equals'
 import { memo, useEffect, useRef, useState } from 'react'
 import { type DiagramState, type DiagramStoreApi, useDiagramState, useDiagramStoreApi } from '../state'
 import { useXYStore } from './hooks'
@@ -38,28 +37,35 @@ function FitViewOnDiagramChanges() {
   const diagramApi = useDiagramStoreApi()
   const [viewportMoved, setViewportMoved] = useState(diagramApi.getState().viewportChanged)
   const [processedChangeId, setProcessed] = useState(diagramChangeId(diagramApi.getState()))
-  const [pendingChangeId, setPending] = useDebouncedState(processedChangeId, 100)
+  const [pendingChangeId, setPending] = useState(processedChangeId)
 
   const isReady = useNodesInitialized({
     includeHiddenNodes: true
   })
 
-  useEffect(
-    () => {
-      return diagramApi.subscribe(
-        s => ({
-          viewportMoved: s.viewportChanged,
-          changeid: diagramChangeId(s)
-        }),
-        ({ viewportMoved, changeid }) => {
-          setPending(changeid)
-          setViewportMoved(viewportMoved)
-        },
-        {
-          equalityFn: shallowEqual
-        }
-      )
+  const schedulePending = useDebouncedCallback(
+    (pendingChangeId: string) => {
+      setPending(pendingChangeId)
     },
+    [setPending],
+    75
+  )
+
+  useEffect(
+    () =>
+      diagramApi.subscribe(
+        s => diagramChangeId(s),
+        schedulePending
+      ),
+    [diagramApi, schedulePending]
+  )
+
+  useEffect(
+    () =>
+      diagramApi.subscribe(
+        s => s.viewportChanged,
+        setViewportMoved
+      ),
     [diagramApi]
   )
 

package/src/xyflow/SyncWithDiagram.tsx

@@ -2,7 +2,7 @@ import { deepEqual as eq, shallowEqual } from 'fast-equals'
 import { useXYFlow, useXYStoreApi } from './hooks'
 import type { XYFlowNode } from './types'
 
-import { memo, useEffect } from 'react'
+import { memo, useEffect, useRef } from 'react'
 import { useDiagramStoreApi } from '../state'
 import { diagramViewToXYFlowData } from './diagram-to-xyflow'
 import { toDomPrecision } from './utils'
@@ -14,7 +14,10 @@ const isSameNode = (a: XYFlowNode) => (b: XYFlowNode) =>
  * Syncs the diagram state with the XYFlow instance
  */
 export const SyncWithDiagram = memo(() => {
-  const xyflow = useXYFlow()
+  const _xyflow = useXYFlow()
+  const xyflowRef = useRef(_xyflow)
+  xyflowRef.current = _xyflow
+
   const xyflowApi = useXYStoreApi()
   const diagramStoreApi = useDiagramStoreApi()
 
@@ -33,7 +36,7 @@ export const SyncWithDiagram = memo(() => {
         const { lastOnNavigate } = diagramStoreApi.getState()
         const updates = diagramViewToXYFlowData({ nodes, edges }, opts)
 
-        xyflow.setNodes(prev =>
+        xyflowRef.current.setNodes(prev =>
           updates.nodes.map(update => {
             const existing = prev.find(isSameNode(update))
             if (existing) {
@@ -49,7 +52,7 @@ export const SyncWithDiagram = memo(() => {
           })
         )
 
-        xyflow.setEdges(prev =>
+        xyflowRef.current.setEdges(prev =>
           updates.edges.map(update => {
             const existing = prev.find(e => e.id === update.id)
             if (existing) {
@@ -62,24 +65,27 @@ export const SyncWithDiagram = memo(() => {
           })
         )
 
-        if (lastOnNavigate?.toView === viewId && !lastOnNavigate.positionCorrected) {
+        if (lastOnNavigate?.toView === viewId && lastOnNavigate.positionCorrected !== true) {
           const elFrom = lastOnNavigate.element
           const elTo = nodes.find(n => n.id === elFrom.id)
           if (elTo) {
             const centerFrom = lastOnNavigate.elementCenterScreenPosition
-            const nextZoom = Math.min(elFrom.width / elTo.width, elFrom.height / elTo.height)
+            let nextZoom = Math.min(elFrom.width / elTo.width, elFrom.height / elTo.height)
 
+            // TODO: investigate why 2 animation frames are needed
             requestAnimationFrame(() => {
               requestAnimationFrame(() => {
-                const v = xyflow.getViewport()
+                const v = xyflowRef.current.getViewport()
                 if (nextZoom < v.zoom) {
-                  xyflow.setViewport({
+                  nextZoom = Math.max(nextZoom, v.zoom * 0.5)
+                  xyflowRef.current.setViewport({
                     x: v.x,
                     y: v.y,
                     zoom: nextZoom
                   })
                 }
-                const centerTo = xyflow.flowToScreenPosition({
+
+                const centerTo = xyflowRef.current.flowToScreenPosition({
                     x: elTo.position[0] + elTo.width / 2,
                     y: elTo.position[1] + elTo.height / 2
                   }),
@@ -107,7 +113,7 @@ export const SyncWithDiagram = memo(() => {
         equalityFn: shallowEqual
       }
     )
-  }, [xyflow, xyflowApi, diagramStoreApi])
+  }, [xyflowApi, diagramStoreApi])
 
   return null
 })

package/src/xyflow/{XYFlowWrapper.tsx → XYFlow.tsx}

@@ -26,8 +26,6 @@ type OnlyExpectedProps = Required<
     LikeC4DiagramProperties,
     | 'className'
     | 'controls'
-    | 'pannable'
-    | 'zoomable'
     | 'background'
   >
 >
@@ -53,7 +51,8 @@ const selector = (s: DiagramState) => ({
   hasOnCanvasContextMenu: !!s.onCanvasContextMenu,
   hasOnEdgeContextMenu: !!s.onEdgeContextMenu,
   hasOnEdgeClick: !!s.onEdgeClick,
-  hasOnCanvasClick: !!s.onCanvasClick || !!s.onCanvasDblClick
+  zoomable: s.zoomable,
+  pannable: s.pannable
 })
 
 function XYFlowWrapper({
@@ -61,8 +60,6 @@ function XYFlowWrapper({
   children,
   defaultNodes,
   defaultEdges,
-  pannable,
-  zoomable,
   controls,
   background,
   style
@@ -73,6 +70,8 @@ function XYFlowWrapper({
     nodesDraggable,
     fitView,
     fitViewPadding,
+    pannable,
+    zoomable,
     ...editor
   } = useDiagramState(selector)
 
@@ -120,33 +119,27 @@ function XYFlowWrapper({
         selectionKeyCode: null
       })}
       nodesDraggable={nodesDraggable}
-      {...(nodesDraggable && layoutConstraints)}
+      {...nodesDraggable && {
+        onNodeDragStart: layoutConstraints.onNodeDragStart,
+        onNodeDrag: layoutConstraints.onNodeDrag,
+        onNodeDragStop: layoutConstraints.onNodeDragStop
+      }}
       zoomOnDoubleClick={false}
       elevateNodesOnSelect={false} // or edges are not visible after select
       selectNodesOnDrag={false} // or weird camera movement
+      onDoubleClick={handlers.onDoubleClick}
       onPaneClick={handlers.onPaneClick}
-      {...(editor.hasOnNodeClick && {
-        onNodeClick: handlers.onNodeClick
-      })}
-      {...(editor.hasOnEdgeClick && {
-        onEdgeClick: handlers.onEdgeClick
-      })}
       onMoveEnd={handlers.onMoveEnd}
+      onNodeMouseEnter={handlers.onNodeMouseEnter}
+      onNodeMouseLeave={handlers.onNodeMouseLeave}
+      onEdgeMouseEnter={handlers.onEdgeMouseEnter}
+      onEdgeMouseLeave={handlers.onEdgeMouseLeave}
+      onNodeClick={handlers.onNodeClick}
+      onNodeDoubleClick={handlers.onNodeDoubleClick}
+      onEdgeClick={handlers.onEdgeClick}
       onInit={() => {
         diagramApi.setState({ initialized: true }, false, 'initialized')
       }}
-      onNodeMouseEnter={(_event, node) => {
-        diagramApi.getState().setHoveredNode(node.id)
-      }}
-      onNodeMouseLeave={() => {
-        diagramApi.getState().setHoveredNode(null)
-      }}
-      onEdgeMouseEnter={(_event, edge) => {
-        diagramApi.getState().setHoveredEdge(edge.id)
-      }}
-      onEdgeMouseLeave={() => {
-        diagramApi.getState().setHoveredEdge(null)
-      }}
       {...(editor.hasOnNodeContextMenu && {
         onNodeContextMenu: handlers.onNodeContextMenu
       })}

package/src/xyflow/XYFlowEvents.tsx

@@ -1,20 +1,30 @@
-import type { EdgeMouseHandler, NodeMouseHandler, OnMoveEnd } from '@xyflow/react'
-import type { MouseEvent as ReactMouseEvent } from 'react'
+import type { ReactFlowProps } from '@xyflow/react'
 import { useMemo, useRef } from 'react'
+import type { Simplify } from 'type-fest'
 import { useDiagramStoreApi } from '../state'
 import { useXYStoreApi } from './hooks'
 import type { XYFlowEdge, XYFlowNode } from './types'
 
-type XYFlowEventHandlers = {
-  onPaneClick: (event: ReactMouseEvent) => void
-  onNodeContextMenu: NodeMouseHandler<XYFlowNode>
-  onEdgeContextMenu: EdgeMouseHandler<XYFlowEdge>
-  onPaneContextMenu: (event: ReactMouseEvent | MouseEvent) => void
-  onNodeClick: NodeMouseHandler<XYFlowNode>
-  onEdgeClick: EdgeMouseHandler<XYFlowEdge>
-  // onMoveStart: OnMoveStart
-  onMoveEnd: OnMoveEnd
-}
+type XYFlowEventHandlers = Simplify<
+  Required<
+    Pick<
+      ReactFlowProps<XYFlowNode, XYFlowEdge>,
+      | 'onDoubleClick'
+      | 'onPaneClick'
+      | 'onNodeClick'
+      | 'onNodeDoubleClick'
+      | 'onEdgeClick'
+      | 'onMoveEnd'
+      | 'onNodeContextMenu'
+      | 'onEdgeContextMenu'
+      | 'onPaneContextMenu'
+      | 'onNodeMouseEnter'
+      | 'onNodeMouseLeave'
+      | 'onEdgeMouseEnter'
+      | 'onEdgeMouseLeave'
+    >
+  >
+>
 
 export function useXYFlowEvents() {
   const diagramApi = useDiagramStoreApi()
@@ -22,36 +32,47 @@ export function useXYFlowEvents() {
 
   const dblclickTimeout = useRef<number>()
 
+  const dbclickGuarg = () => {
+    if (dblclickTimeout.current !== undefined) {
+      return true
+    }
+    dblclickTimeout.current = window.setTimeout(() => {
+      dblclickTimeout.current = undefined
+    }, 250)
+    return false
+  }
+
   return useMemo<XYFlowEventHandlers>(() => ({
-    onPaneClick: (event) => {
-      diagramApi.setState(
-        {
-          lastClickedNodeId: null,
-          lastClickedEdgeId: null
-        },
-        false,
-        'onPaneClick'
-      )
+    onDoubleClick: (event) => {
+      diagramApi.getState().setLastClickedNode(null)
+      diagramApi.getState().setLastClickedEdge(null)
       const diagramState = diagramApi.getState()
-
-      if (dblclickTimeout.current) {
-        window.clearTimeout(dblclickTimeout.current)
-        dblclickTimeout.current = undefined
-        if (diagramState.onCanvasDblClick) {
-          diagramState.onCanvasDblClick(event)
-          return
-        }
-        diagramState.onCanvasClick?.(event)
-        if (diagramState.fitViewEnabled && diagramState.viewportChanged) {
-          diagramState.fitDiagram()
-        }
+      if (diagramState.onCanvasDblClick) {
+        diagramState.onCanvasDblClick(event)
         return
       }
-
-      dblclickTimeout.current = window.setTimeout(() => {
-        dblclickTimeout.current = undefined
-        diagramApi.getState().onCanvasClick?.(event)
-      }, 300)
+      if (diagramState.fitViewEnabled && diagramState.zoomable) {
+        diagramState.fitDiagram()
+        event.stopPropagation()
+        return
+      }
+    },
+    onPaneClick: (event) => {
+      if (dbclickGuarg()) {
+        return
+      }
+      diagramApi.getState().setLastClickedNode(null)
+      diagramApi.getState().setLastClickedEdge(null)
+      const { focusedNodeId, fitDiagram, onCanvasClick } = diagramApi.getState()
+      if (onCanvasClick) {
+        onCanvasClick(event)
+        return
+      }
+      // reset focus if clicked on empty space
+      if (focusedNodeId) {
+        fitDiagram()
+        event.stopPropagation()
+      }
     },
     onNodeContextMenu: (event, xynode) => {
       diagramApi.getState().setLastClickedNode(xynode.id)
@@ -76,11 +97,30 @@ export function useXYFlowEvents() {
     },
     onNodeClick: (event, xynode) => {
       diagramApi.getState().setLastClickedNode(xynode.id)
-      diagramApi.getState().onNodeClick?.({
-        element: xynode.data.element,
-        xynode,
-        event
-      })
+      const { focusedNodeId, fitDiagram, onNodeClick } = diagramApi.getState()
+      if (onNodeClick) {
+        onNodeClick({
+          element: xynode.data.element,
+          xynode,
+          event
+        })
+        return
+      }
+      // if we clicked on a node that is not focused, fit the diagram
+      if (!!focusedNodeId && focusedNodeId !== xynode.id) {
+        fitDiagram(xynode)
+        event.stopPropagation()
+      }
+    },
+    onNodeDoubleClick: (event, xynode) => {
+      const { zoomable, fitDiagram, onNodeClick } = diagramApi.getState()
+      if (onNodeClick) {
+        return
+      }
+      if (zoomable) {
+        fitDiagram(xynode)
+        event.stopPropagation()
+      }
     },
     onEdgeClick: (event, xyedge) => {
       diagramApi.getState().setLastClickedEdge(xyedge.id)
@@ -91,10 +131,23 @@ export function useXYFlowEvents() {
       })
     },
     onMoveEnd: (event, _viewport) => {
+      // if event is present, the move was triggered by user
       const viewportChanged = !!event
       if (viewportChanged !== diagramApi.getState().viewportChanged) {
         diagramApi.setState({ viewportChanged }, false, `viewport-changed: ${viewportChanged}`)
       }
+    },
+    onNodeMouseEnter: (event, xynode) => {
+      diagramApi.getState().setHoveredNode(xynode.id)
+    },
+    onNodeMouseLeave: (event, xynode) => {
+      diagramApi.getState().setHoveredNode(null)
+    },
+    onEdgeMouseEnter: (event, xyedge) => {
+      diagramApi.getState().setHoveredEdge(xyedge.id)
+    },
+    onEdgeMouseLeave: (event, xyedge) => {
+      diagramApi.getState().setHoveredEdge(null)
     }
   }), [diagramApi, xyflowApi])
 }

package/src/xyflow/diagram-to-xyflow.ts

@@ -118,10 +118,10 @@ export function diagramViewToXYFlowData(
       initialHeight: node.height, */
       width: node.width,
       height: node.height,
-      measured: {
-        width: node.width,
-        height: node.height
-      },
+      // measured: {
+      //   width: node.width,
+      //   height: node.height
+      // },
       ...(parent && {
         parentId: ns + parent.id
       })