@likec4/diagram 1.1.0 → 1.2.0

package/src/xyflow/FitviewOnDiagramChange.tsx

@@ -1,99 +1,119 @@
-import { useDebouncedCallback, useDebouncedEffect, useRafEffect } from '@react-hookz/web'
-import { useNodesInitialized } from '@xyflow/react'
-import { memo, useEffect, useRef, useState } from 'react'
+import { useDebouncedEffect } from '@react-hookz/web'
+import { useEffect, useRef } from 'react'
 import { type DiagramState, type DiagramStoreApi, useDiagramState, useDiagramStoreApi } from '../state'
-import { useXYStore } from './hooks'
+import { useXYStore, useXYStoreApi, type XYStoreApi } from './hooks'
 import type { XYFlowState } from './types'
+import { toDomPrecision } from './utils'
 
 function selectDimensions(state: XYFlowState) {
   return `${Math.round(state.width)}:${Math.round(state.height)}`
 }
 
-function FitViewOnViewportResize({ diagramApi }: { diagramApi: DiagramStoreApi }) {
+function FitViewOnViewportResize({ diagramApi, xyflowApi }: {
+  xyflowApi: XYStoreApi
+  diagramApi: DiagramStoreApi
+}) {
   const dimensions = useXYStore(selectDimensions)
   const prevDimensionsRef = useRef(dimensions)
 
   useDebouncedEffect(
     () => {
-      if (prevDimensionsRef.current === dimensions) {
+      const { focusedNodeId, fitDiagram } = diagramApi.getState()
+      if (focusedNodeId || prevDimensionsRef.current === dimensions) {
         return
       }
-      diagramApi.getState().fitDiagram()
+      fitDiagram(xyflowApi)
       prevDimensionsRef.current = dimensions
     },
-    [dimensions],
-    150
+    [dimensions, diagramApi, xyflowApi],
+    200,
+    800
   )
 
   return null
 }
 
-const diagramChangeId = (s: DiagramState) => s.view.id + '_' + s.view.autoLayout + '_' + s.fitViewPadding
+function selector({ view, xyflowSynced, viewportChanged, lastOnNavigate, ...s }: DiagramState) {
+  const viewId = view.id + '_' + view.autoLayout + '_' + s.fitViewPadding
+
+  const waitCorrection = lastOnNavigate && lastOnNavigate.toView === view.id
+    && lastOnNavigate.positionCorrected === false
+  const elTo = waitCorrection ? view.nodes.find(n => n.id === lastOnNavigate.element.id) : undefined
+  if (waitCorrection && elTo) {
+    return {
+      viewId,
+      xyflowSynced,
+      viewportChanged,
+      waitCorrection: true,
+      elFrom: lastOnNavigate.element,
+      elTo
+    }
+  }
+
+  return {
+    viewId,
+    xyflowSynced,
+    viewportChanged,
+    waitCorrection: false,
+    fromElement: null,
+    toElement: null
+  }
+}
 
 /**
  * Fits the view when the view changes and nodes are initialized
  */
-function FitViewOnDiagramChanges() {
+export function FitViewOnDiagramChange() {
+  const xyflowApi = useXYStoreApi()
+  const {
+    viewId: pendingViewId,
+    xyflowSynced,
+    viewportChanged,
+    waitCorrection,
+    elFrom,
+    elTo
+  } = useDiagramState(selector)
   const diagramApi = useDiagramStoreApi()
-  const [viewportMoved, setViewportMoved] = useState(diagramApi.getState().viewportChanged)
-  const [processedChangeId, setProcessed] = useState(diagramChangeId(diagramApi.getState()))
-  const [pendingChangeId, setPending] = useState(processedChangeId)
-
-  const isReady = useNodesInitialized({
-    includeHiddenNodes: true
-  })
-
-  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]
-  )
-
-  useRafEffect(
-    () => {
-      if (!isReady || processedChangeId === pendingChangeId) {
-        return
+  const processedRef = useRef(pendingViewId)
+
+  useEffect(() => {
+    if (!xyflowSynced || pendingViewId === processedRef.current) {
+      return
+    }
+    if (waitCorrection && elTo && elFrom) {
+      const [x, y, zoom] = xyflowApi.getState().transform
+      const { xyflow, lastOnNavigate } = diagramApi.getState()
+      const nextZoom = Math.min(
+        elFrom.width / elTo.width,
+        elFrom.height / elTo.height
+      )
+      const centerFrom = lastOnNavigate!.elementCenterScreenPosition
+      if (nextZoom !== 1 && nextZoom < zoom) {
+        xyflowApi.setState({ transform: [x, y, nextZoom] })
+        xyflow.setViewport({
+          x,
+          y,
+          zoom: nextZoom
+        })
       }
-      diagramApi.getState().fitDiagram()
-      setProcessed(pendingChangeId)
-    },
-    [isReady, processedChangeId, pendingChangeId]
-  )
-
-  if (!viewportMoved && isReady) {
-    return <FitViewOnViewportResize diagramApi={diagramApi} />
+      const centerTo = xyflow.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)
+      diagramApi.setState({ lastOnNavigate: null })
+      return
+    }
+    processedRef.current = pendingViewId
+    diagramApi.getState().fitDiagram(xyflowApi)
+  }, [pendingViewId, xyflowSynced, waitCorrection])
+
+  if (!viewportChanged && xyflowSynced) {
+    return <FitViewOnViewportResize xyflowApi={xyflowApi} diagramApi={diagramApi} />
   }
   return null
 }
-
-const selectFitViewFlag = (s: DiagramState) => s.fitViewEnabled
-
-export const FitViewOnDiagramChange = memo(() => {
-  const fitView = useDiagramState(selectFitViewFlag)
-
-  if (!fitView) {
-    return null
-  }
-
-  return <FitViewOnDiagramChanges />
-})

package/src/xyflow/SelectEdgesOnNodeFocus.tsx

@@ -0,0 +1,75 @@
+import { nonNullable } from '@likec4/core'
+import type { EdgeChange, NodeChange } from '@xyflow/react'
+import { useUpdateEffect } from '../hooks/useUpdateEffect'
+import { useDiagramState, useDiagramStoreApi } from '../state/useDiagramStore'
+import { MinZoom } from './const'
+import { useXYStoreApi } from './hooks/useXYFlow'
+import type { XYFlowEdge, XYFlowNode } from './types'
+
+export function SelectEdgesOnNodeFocus() {
+  const focusedNodeId = useDiagramState(s => s.focusedNodeId)
+  const diagramStore = useDiagramStoreApi()
+  const xyflowApi = useXYStoreApi()
+
+  useUpdateEffect(() => {
+    if (!focusedNodeId) {
+      xyflowApi.getState().resetSelectedElements()
+      return
+    }
+
+    const edgeChanges = [] as EdgeChange<XYFlowEdge>[]
+    const nodeChanges = [] as NodeChange<XYFlowNode>[]
+    const { edgeLookup, nodeLookup, transform, triggerNodeChanges, fitView, triggerEdgeChanges } = xyflowApi.getState()
+    const fitViewNodes = new Set<XYFlowNode>()
+    fitViewNodes.add(nonNullable(nodeLookup.get(focusedNodeId)))
+
+    for (const [, edge] of edgeLookup) {
+      if (edge.source === focusedNodeId || edge.target === focusedNodeId) {
+        edgeChanges.push({
+          id: edge.id,
+          type: 'select',
+          selected: true
+        })
+        const anotherNode = nodeLookup.get(edge.source === focusedNodeId ? edge.target : edge.source)
+        if (anotherNode) {
+          fitViewNodes.add(anotherNode)
+        }
+      } else if (edge.selected) {
+        edgeChanges.push({
+          id: edge.id,
+          type: 'select',
+          selected: false
+        })
+      }
+    }
+    for (const [, node] of nodeLookup) {
+      if (node.selected && node.id !== focusedNodeId) {
+        nodeChanges.push({
+          id: node.id,
+          type: 'select',
+          selected: false
+        })
+      }
+    }
+    nodeChanges.push({
+      id: focusedNodeId,
+      type: 'select',
+      selected: true
+    })
+    if (edgeChanges.length > 0) {
+      triggerEdgeChanges(edgeChanges)
+    }
+    triggerNodeChanges(nodeChanges)
+
+    fitView({
+      includeHiddenNodes: true,
+      duration: 300,
+      padding: 0.1,
+      minZoom: MinZoom,
+      maxZoom: Math.max(1, transform[2]),
+      nodes: Array.from(fitViewNodes)
+    })
+  }, [diagramStore, xyflowApi, focusedNodeId])
+
+  return null
+}

package/src/xyflow/SyncWithDiagram.tsx

@@ -1,119 +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,
-        draggable: state.nodesDraggable,
-        selectable: state.nodesSelectable
-      }),
-      // listener
-      ({ viewId, nodes, edges, ...opts }) => {
-        const { lastOnNavigate } = diagramStoreApi.getState()
-        const updates = diagramViewToXYFlowData({ nodes, edges }, opts)
-
-        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,12 +1,15 @@
 import { useMantineColorScheme } from '@mantine/core'
-import { Controls, ReactFlow } from '@xyflow/react'
+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 { XYFlowEdge, XYFlowNode } from './types'
@@ -21,27 +24,25 @@ 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,
+  nodesSelectable: s.nodesSelectable || s.focusedNodeId !== null,
   nodesDraggable: s.nodesDraggable,
   fitView: s.fitViewEnabled,
   fitViewPadding: s.fitViewPadding,
@@ -55,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,
@@ -72,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}
@@ -113,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
       })}
@@ -140,20 +162,18 @@ function XYFlowWrapper({
       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 />}
       {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)
+}