@likec4/diagram 1.1.1 → 1.2.1

package/src/xyflow/SyncWithDiagram.tsx

@@ -1,125 +1,73 @@
-import { deepEqual as eq, shallowEqual } from 'fast-equals'
-import { useXYFlow, useXYStoreApi } from './hooks'
-import type { XYFlowNode } from './types'
+import { deepEqual as eq } from 'fast-equals'
+import { useXYStoreApi } from './hooks'
 
-import { memo, useEffect, useRef } from 'react'
-import { useDiagramStoreApi } from '../state'
+import { useEffect } from 'react'
+import { useDiagramState, useDiagramStoreApi } from '../state'
 import { diagramViewToXYFlowData } from './diagram-to-xyflow'
-import { toDomPrecision } from './utils'
-
-const isSameNode = (a: XYFlowNode) => (b: XYFlowNode) =>
-  a.id === b.id && a.type === b.type && Object.is(a.parentId, b.parentId)
 
 /**
  * Syncs the diagram state with the XYFlow instance
  */
-export const SyncWithDiagram = memo(() => {
-  const _xyflow = useXYFlow()
-  const xyflowRef = useRef(_xyflow)
-  xyflowRef.current = _xyflow
-
+export function SyncWithDiagram() {
+  const xyflowSynced = useDiagramState(s => s.xyflowSynced)
   const xyflowApi = useXYStoreApi()
   const diagramStoreApi = useDiagramStoreApi()
 
   useEffect(() => {
-    return diagramStoreApi.subscribe(
-      // selector
-      state => ({
-        viewId: state.view.id,
-        nodes: state.view.nodes,
-        edges: state.view.edges
-      }),
-      // listener
-      ({ viewId, nodes, edges }) => {
-        const {
-          lastOnNavigate,
-          nodesDraggable,
-          nodesSelectable,
-          focusedNodeId
-        } = diagramStoreApi.getState()
-        const updates = diagramViewToXYFlowData({ nodes, edges }, {
-          draggable: nodesDraggable,
-          selectable: nodesSelectable || focusedNodeId !== null
-        })
-
-        xyflowRef.current.setNodes(prev =>
-          updates.nodes.map(update => {
-            const existing = prev.find(isSameNode(update))
-            if (existing) {
-              if (eq(existing.data.element, update.data.element)) {
-                return existing
-              }
-              return {
-                ...existing,
-                ...update
-              }
-            }
-            return update
-          })
-        )
+    if (xyflowSynced) {
+      return
+    }
+    const {
+      view,
+      nodesDraggable,
+      nodesSelectable,
+      focusedNodeId
+    } = diagramStoreApi.getState()
+    const updates = diagramViewToXYFlowData(view, {
+      draggable: nodesDraggable,
+      selectable: nodesSelectable || focusedNodeId !== null
+    })
 
-        xyflowRef.current.setEdges(prev =>
-          updates.edges.map(update => {
-            const existing = prev.find(e => e.id === update.id)
-            if (existing) {
-              return eq(existing.data, update.data) ? existing : {
-                ...existing,
-                ...update
-              }
-            }
-            return update
-          })
-        )
+    const {
+      nodeLookup,
+      edgeLookup,
+      setNodes,
+      setEdges
+    } = xyflowApi.getState()
 
-        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
-            let nextZoom = Math.min(elFrom.width / elTo.width, elFrom.height / elTo.height)
-
-            // TODO: investigate why 2 animation frames are needed
-            requestAnimationFrame(() => {
-              requestAnimationFrame(() => {
-                const v = xyflowRef.current.getViewport()
-                if (nextZoom < v.zoom) {
-                  nextZoom = Math.max(nextZoom, v.zoom * 0.5)
-                  xyflowRef.current.setViewport({
-                    x: v.x,
-                    y: v.y,
-                    zoom: nextZoom
-                  })
-                }
+    setNodes(updates.nodes.map(update => {
+      const existing = nodeLookup.get(update.id)?.internals.userNode
+      if (existing && existing.type === update.type && eq(existing.parentId, update.parentId)) {
+        if (eq(existing.data.element, update.data.element)) {
+          return existing
+        }
+        return {
+          ...existing,
+          ...update
+        }
+      }
+      return update
+    }))
 
-                const centerTo = xyflowRef.current.flowToScreenPosition({
-                    x: elTo.position[0] + elTo.width / 2,
-                    y: elTo.position[1] + elTo.height / 2
-                  }),
-                  diff = {
-                    x: toDomPrecision(centerFrom.x - centerTo.x),
-                    y: toDomPrecision(centerFrom.y - centerTo.y)
-                  }
-                xyflowApi.getState().panBy(diff)
-              })
-            })
-          }
-          diagramStoreApi.setState(
-            {
-              lastOnNavigate: {
-                ...lastOnNavigate,
-                positionCorrected: true
-              }
-            },
-            false,
-            'positionCorrected'
-          )
+    setEdges(updates.edges.map(update => {
+      const existing = edgeLookup.get(update.id)
+      if (existing) {
+        return eq(existing.data.edge, update.data.edge) ? existing : {
+          ...existing,
+          ...update
         }
-      },
-      {
-        equalityFn: shallowEqual
       }
+      return update
+    }))
+
+    diagramStoreApi.setState(
+      {
+        xyflowSynced: true
+      },
+      false,
+      'xyflowSynced'
     )
-  }, [xyflowApi, diagramStoreApi])
+  }, [xyflowSynced, xyflowApi, diagramStoreApi])
 
   return null
-})
+}

package/src/xyflow/XYFlow.tsx

@@ -1,16 +1,17 @@
 import { useMantineColorScheme } from '@mantine/core'
-import { Controls, PanOnScrollMode, ReactFlow } from '@xyflow/react'
-import { DEV } from 'esm-env'
+import { Controls, ReactFlow, useOnViewportChange } from '@xyflow/react'
+import { deepEqual as eq, shallowEqual } from 'fast-equals'
 import { type CSSProperties, memo, type PropsWithChildren } from 'react'
+import { omit, omitBy } from 'remeda'
 import type { SetNonNullable, Simplify } from 'type-fest'
 import type { LikeC4DiagramProperties } from '../LikeC4Diagram.props'
 import { type DiagramState, useDiagramState, useDiagramStoreApi } from '../state'
 import { MinZoom } from './const'
 import { RelationshipEdge } from './edges/RelationshipEdge'
 import { useLayoutConstraints } from './hooks/useLayoutConstraints'
+import { useXYStoreApi } from './hooks/useXYFlow'
 import { CompoundNode } from './nodes/compound'
 import { ElementNode } from './nodes/element'
-import { SelectEdgesOnNodeFocus } from './SelectEdgesOnNodeFocus'
 import { XYFlowEdge, XYFlowNode } from './types'
 import { XYFlowBackground } from './XYFlowBackground'
 import { useXYFlowEvents } from './XYFlowEvents'
@@ -23,24 +24,22 @@ const edgeTypes = {
   relationship: RelationshipEdge
 }
 
-type OnlyExpectedProps = Required<
-  Pick<
-    LikeC4DiagramProperties,
-    | 'className'
-    | 'controls'
-    | 'background'
-  >
->
+type XYFlowWrapperProps = PropsWithChildren<{
+  className?: string | undefined
+  defaultNodes: XYFlowNode[]
+  defaultEdges: XYFlowEdge[]
+  style?: CSSProperties | undefined
+}>
 
-type XYFlowWrapperProps = Simplify<
-  PropsWithChildren<
-    SetNonNullable<OnlyExpectedProps> & {
-      defaultNodes: XYFlowNode[]
-      defaultEdges: XYFlowEdge[]
-      style?: CSSProperties | undefined
-    }
-  >
->
+// const propsAreEqual = (
+//   prev: XYFlowWrapperProps,
+//   next: XYFlowWrapperProps
+// ) => {
+//   return shallowEqual(
+//     omit(prev, ['children']),
+//     omit(next, ['children'])
+//   )
+// }
 
 const selector = (s: DiagramState) => ({
   nodesSelectable: s.nodesSelectable || s.focusedNodeId !== null,
@@ -57,15 +56,14 @@ const selector = (s: DiagramState) => ({
   pannable: s.pannable
 })
 
-function XYFlowWrapper({
+export function XYFlow({
   className,
   children,
   defaultNodes,
   defaultEdges,
-  controls,
-  background,
   style
 }: XYFlowWrapperProps) {
+  const xyflowApi = useXYStoreApi()
   const diagramApi = useDiagramStoreApi()
   const {
     nodesSelectable,
@@ -74,17 +72,39 @@ function XYFlowWrapper({
     fitViewPadding,
     pannable,
     zoomable,
-    ...editor
+    hasOnNodeClick,
+    hasOnNavigateTo,
+    hasOnNodeContextMenu,
+    hasOnCanvasContextMenu,
+    hasOnEdgeContextMenu,
+    hasOnEdgeClick
   } = useDiagramState(selector)
 
   const layoutConstraints = useLayoutConstraints()
 
   const handlers = useXYFlowEvents()
-  const isBgWithPattern = background !== 'transparent' && background !== 'solid'
 
   const { colorScheme } = useMantineColorScheme()
   const colorMode = colorScheme !== 'auto' ? colorScheme : undefined
 
+  /**
+   * WORKAROUND - Called on viewport change
+   * Viewport transform is not rounded to integers which results in blurry nodes on some resolution
+   * https://github.com/xyflow/xyflow/issues/3282
+   * https://github.com/likec4/likec4/issues/734
+   */
+  useOnViewportChange({
+    onEnd: ({ x, y, zoom }) => {
+      const rounded = {
+        x: Math.round(x),
+        y: Math.round(y)
+      }
+      if (x !== rounded.x || y !== rounded.y) {
+        xyflowApi.setState({ transform: [rounded.x, rounded.y, zoom] })
+      }
+    }
+  })
+
   return (
     <ReactFlow<XYFlowNode, XYFlowEdge>
       className={className}
@@ -115,8 +135,8 @@ function XYFlowWrapper({
       panOnScroll={pannable}
       panOnDrag={pannable}
       elementsSelectable={nodesSelectable}
-      nodesFocusable={nodesDraggable || nodesSelectable || editor.hasOnNodeClick || editor.hasOnNavigateTo}
-      edgesFocusable={editor.hasOnEdgeClick}
+      nodesFocusable={nodesDraggable || nodesSelectable || hasOnNodeClick || hasOnNavigateTo}
+      edgesFocusable={hasOnEdgeClick}
       {...(!nodesSelectable && {
         selectionKeyCode: null
       })}
@@ -139,25 +159,21 @@ function XYFlowWrapper({
       onNodeClick={handlers.onNodeClick}
       onNodeDoubleClick={handlers.onNodeDoubleClick}
       onEdgeClick={handlers.onEdgeClick}
-      onViewportChange={handlers.onViewportChange}
       onInit={() => {
         diagramApi.setState({ initialized: true }, false, 'initialized')
       }}
-      {...(editor.hasOnNodeContextMenu && {
+      {...(hasOnNodeContextMenu && {
         onNodeContextMenu: handlers.onNodeContextMenu
       })}
-      {...(editor.hasOnEdgeContextMenu && {
+      {...(hasOnEdgeContextMenu && {
         onEdgeContextMenu: handlers.onEdgeContextMenu
       })}
-      {...(editor.hasOnCanvasContextMenu && {
+      {...(hasOnCanvasContextMenu && {
         onPaneContextMenu: handlers.onPaneContextMenu
       })}>
-      {isBgWithPattern && <XYFlowBackground background={background} />}
-      {controls && <Controls position={'bottom-right'} />}
-      {zoomable && !editor.hasOnNodeClick && <SelectEdgesOnNodeFocus />}
       {children}
     </ReactFlow>
   )
 }
 
-export const XYFlow = memo(XYFlowWrapper) as typeof XYFlowWrapper
+// export const XYFlow = memo(XYFlowWrapper, propsAreEqual) as typeof XYFlowWrapper

package/src/xyflow/XYFlowBackground.tsx

@@ -1,16 +1,18 @@
 import { nonexhaustive } from '@likec4/core'
 import { Background, type BackgroundProps, BackgroundVariant } from '@xyflow/react'
-import { deepEqual } from 'fast-equals'
-import { memo } from 'react'
 import type { OverrideProperties } from 'type-fest'
 
 export type XYBackgroundVariant = 'dots' | 'lines' | 'cross'
-export type XYBackgroundProps =
+export type XYBackground =
   | XYBackgroundVariant
   | OverrideProperties<BackgroundProps, {
     variant: XYBackgroundVariant
   }>
 
+export type XYBackgroundProps = {
+  background: XYBackground
+}
+
 function literalToEnum(value: XYBackgroundVariant): BackgroundVariant {
   switch (value) {
     case 'dots':
@@ -24,10 +26,10 @@ function literalToEnum(value: XYBackgroundVariant): BackgroundVariant {
   }
 }
 
-export const XYFlowBackground = memo<{ background: XYBackgroundProps }>(({ background }) => {
+export function XYFlowBackground({ background }: XYBackgroundProps) {
   if (typeof background === 'string') {
     return <Background variant={literalToEnum(background)} />
   }
   const { variant, ...rest } = background
   return <Background variant={literalToEnum(variant)} {...rest} />
-}, deepEqual)
+}

package/src/xyflow/XYFlowEvents.tsx

@@ -1,9 +1,9 @@
 import type { ReactFlowProps } from '@xyflow/react'
-import { useEffect, useMemo, useRef } from 'react'
+import { useMemo, useRef } from 'react'
 import type { Simplify } from 'type-fest'
 import { useDiagramStoreApi } from '../state'
 import { useXYStoreApi } from './hooks'
-import type { XYFlowEdge, XYFlowNode, XYFlowState } from './types'
+import type { XYFlowEdge, XYFlowNode } from './types'
 
 type XYFlowEventHandlers = Simplify<
   Required<
@@ -22,23 +22,17 @@ type XYFlowEventHandlers = Simplify<
       | 'onNodeMouseLeave'
       | 'onEdgeMouseEnter'
       | 'onEdgeMouseLeave'
-      | 'onViewportChange'
     >
   >
 >
 
-const viewportDomNode = (state: XYFlowState) =>
-  state.domNode?.querySelector<HTMLDivElement>('.react-flow__viewport') ?? null
-
 export function useXYFlowEvents() {
   const diagramApi = useDiagramStoreApi()
   const xyflowApi = useXYStoreApi()
 
   const dblclickTimeout = useRef<number>()
 
-  const viewportRef = useRef(viewportDomNode(xyflowApi.getState()))
-
-  const dbclickGuarg = () => {
+  const dbclickLock = () => {
     if (dblclickTimeout.current !== undefined) {
       return true
     }
@@ -48,46 +42,41 @@ export function useXYFlowEvents() {
     return false
   }
 
-  const transformRef = useRef('')
-  const cbRef = useRef<number>()
-
-  useEffect(() =>
-    xyflowApi.subscribe((state, prev) => {
-      if (state.domNode !== prev.domNode || (state.domNode && !viewportRef.current)) {
-        viewportRef.current = viewportDomNode(state)
-      }
-    }), [xyflowApi])
+  // If we are in focused mode, on edge enter we want to "highlight" the other node
+  // This ref contains the id of this node
+  const hoveredNodeFromOnEdgeEnterRef = useRef('')
 
   return useMemo(() =>
     ({
       onDoubleClick: (event) => {
-        diagramApi.getState().resetLastClicked()
-        const diagramState = diagramApi.getState()
-        if (diagramState.onCanvasDblClick) {
-          diagramState.onCanvasDblClick(event)
-          return
-        }
-        if (diagramState.fitViewEnabled && diagramState.zoomable) {
-          diagramState.fitDiagram()
-          event.stopPropagation()
-          return
+        const {
+          fitViewEnabled,
+          onCanvasDblClick,
+          resetLastClicked,
+          fitDiagram
+        } = diagramApi.getState()
+        if (fitViewEnabled) {
+          fitDiagram(xyflowApi)
+          if (!onCanvasDblClick) {
+            event.stopPropagation()
+          }
         }
+        resetLastClicked()
+        onCanvasDblClick?.(event)
       },
       onPaneClick: (event) => {
-        if (dbclickGuarg()) {
+        if (dbclickLock()) {
           return
         }
         const { focusedNodeId, fitDiagram, onCanvasClick, resetLastClicked } = diagramApi.getState()
-        resetLastClicked()
-        if (onCanvasClick) {
-          onCanvasClick(event)
-          return
-        }
-        // reset focus if clicked on empty space
-        if (focusedNodeId) {
-          fitDiagram()
-          event.stopPropagation()
+        if (!!focusedNodeId) {
+          fitDiagram(xyflowApi)
+          if (!onCanvasClick) {
+            event.stopPropagation()
+          }
         }
+        resetLastClicked()
+        onCanvasClick?.(event)
       },
       onNodeContextMenu: (event, xynode) => {
         diagramApi.getState().setLastClickedNode(xynode.id)
@@ -110,49 +99,63 @@ export function useXYFlowEvents() {
         })
       },
       onNodeClick: (event, xynode) => {
-        diagramApi.getState().setLastClickedNode(xynode.id)
-        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
+        const {
+          focusedNodeId,
+          focusOnNode,
+          onNodeClick,
+          setLastClickedNode
+        } = diagramApi.getState()
+        setLastClickedNode(xynode.id)
+        // if we focused on a node, and clicked on another node - focus on the clicked node
         if (!!focusedNodeId && focusedNodeId !== xynode.id) {
-          fitDiagram(xynode)
-          event.stopPropagation()
+          focusOnNode(xynode.id)
+          if (!onNodeClick) {
+            // user did not provide a custom handler, stop propagation
+            event.stopPropagation()
+          }
         }
+        onNodeClick?.({
+          element: xynode.data.element,
+          xynode,
+          event
+        })
       },
       onNodeDoubleClick: (event, xynode) => {
-        diagramApi.getState().setLastClickedNode(xynode.id)
-        const { zoomable, fitViewEnabled, fitDiagram, onNodeClick } = diagramApi.getState()
-        if (onNodeClick) {
-          return
-        }
-        if (zoomable && fitViewEnabled) {
-          fitDiagram(xynode)
+        const {
+          focusedNodeId,
+          zoomable,
+          fitViewEnabled,
+          fitDiagram,
+          focusOnNode,
+          setLastClickedNode
+        } = diagramApi.getState()
+        setLastClickedNode(xynode.id)
+        if (!!focusedNodeId || (zoomable && fitViewEnabled)) {
+          // if we are already focused on the node, cancel
+          if (focusedNodeId === xynode.id) {
+            fitDiagram(xyflowApi)
+          } else {
+            focusOnNode(xynode.id)
+          }
           event.stopPropagation()
         }
       },
       onEdgeClick: (event, xyedge) => {
         diagramApi.getState().setLastClickedEdge(xyedge.id)
-        const { focusedNodeId, fitDiagram, onEdgeClick, xyflow } = diagramApi.getState()
-        if (onEdgeClick) {
-          onEdgeClick({
-            relation: xyedge.data.edge,
-            xyedge,
-            event
-          })
-          return
-        }
+        const { focusedNodeId, focusOnNode, onEdgeClick } = diagramApi.getState()
+        // if we focused on a node, and clicked on an edge connected to it - focus on the other node
         if (focusedNodeId && (focusedNodeId === xyedge.source || focusedNodeId === xyedge.target)) {
-          const nextFocus = focusedNodeId === xyedge.source ? xyedge.target : xyedge.source
-          fitDiagram(xyflow.getNode(nextFocus))
-          event.stopPropagation()
+          focusOnNode(focusedNodeId === xyedge.source ? xyedge.target : xyedge.source)
+          if (!onEdgeClick) {
+            // user did not provide a custom handler, stop propagation
+            event.stopPropagation()
+          }
         }
+        onEdgeClick?.({
+          relation: xyedge.data.edge,
+          xyedge,
+          event
+        })
       },
       onMoveEnd: (event, _viewport) => {
         // if event is present, the move was triggered by user
@@ -161,34 +164,36 @@ export function useXYFlowEvents() {
           diagramApi.setState({ viewportChanged }, false, `viewport-changed: ${viewportChanged}`)
         }
       },
-      onNodeMouseEnter: (event, xynode) => {
-        diagramApi.getState().setHoveredNode(xynode.id)
-      },
-      onNodeMouseLeave: (event, xynode) => {
-        diagramApi.getState().setHoveredNode(null)
+      onNodeMouseEnter: (_event, xynode) => {
+        hoveredNodeFromOnEdgeEnterRef.current = ''
+        const { hoveredNodeId, setHoveredNode } = diagramApi.getState()
+        if (hoveredNodeId !== xynode.id) {
+          setHoveredNode(xynode.id)
+        }
       },
-      onEdgeMouseEnter: (event, xyedge) => {
-        diagramApi.getState().setHoveredEdge(xyedge.id)
+      onNodeMouseLeave: (_event, xynode) => {
+        const { hoveredNodeId, setHoveredNode } = diagramApi.getState()
+        if (hoveredNodeId === xynode.id) {
+          setHoveredNode(null)
+        }
       },
-      onEdgeMouseLeave: (event, xyedge) => {
-        diagramApi.getState().setHoveredEdge(null)
+      onEdgeMouseEnter: (_event, { id, source, target }) => {
+        const { hoveredNodeId, focusedNodeId, setHoveredEdge, setHoveredNode } = diagramApi.getState()
+        setHoveredEdge(id)
+        if ((focusedNodeId === source || focusedNodeId === target) && focusedNodeId !== hoveredNodeId) {
+          const next = hoveredNodeFromOnEdgeEnterRef.current = source === focusedNodeId ? target : source
+          setHoveredNode(next)
+        }
       },
-      /**
-       * WOKAROUND:
-       * Viewport transform is not rounded to integers which results in blurry nodes on some resolution
-       * https://github.com/xyflow/xyflow/issues/3282
-       */
-      onViewportChange: ({ x, y, zoom }) => {
-        const scale = zoom != 1 ? zoom.toFixed(6) : '1'
-        transformRef.current = `translate(${Math.round(x)}px, ${Math.round(y)}px) scale(${scale})`
-        cbRef.current ??= requestIdleCallback(() => {
-          cbRef.current = undefined
-          if (viewportRef.current && viewportRef.current.style.transform !== transformRef.current) {
-            viewportRef.current.style.transform = transformRef.current
-          }
-        }, {
-          timeout: 1000
-        })
+      onEdgeMouseLeave: (_event, xyedge) => {
+        const { hoveredEdgeId, setHoveredEdge, hoveredNodeId, setHoveredNode } = diagramApi.getState()
+        if (hoveredEdgeId === xyedge.id) {
+          setHoveredEdge(null)
+        }
+        if (hoveredNodeId === hoveredNodeFromOnEdgeEnterRef.current) {
+          hoveredNodeFromOnEdgeEnterRef.current = ''
+          setHoveredNode(null)
+        }
       }
     }) satisfies XYFlowEventHandlers, [diagramApi, xyflowApi])
 }