@likec4/diagram 1.1.1 → 1.2.0

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
@@ -162,33 +165,35 @@ export function useXYFlowEvents() {
         }
       },
       onNodeMouseEnter: (event, xynode) => {
-        diagramApi.getState().setHoveredNode(xynode.id)
+        hoveredNodeFromOnEdgeEnterRef.current = ''
+        const { hoveredNodeId, setHoveredNode } = diagramApi.getState()
+        if (hoveredNodeId !== xynode.id) {
+          setHoveredNode(xynode.id)
+        }
       },
       onNodeMouseLeave: (event, xynode) => {
-        diagramApi.getState().setHoveredNode(null)
+        const { hoveredNodeId, setHoveredNode } = diagramApi.getState()
+        if (hoveredNodeId === xynode.id) {
+          setHoveredNode(null)
+        }
       },
-      onEdgeMouseEnter: (event, xyedge) => {
-        diagramApi.getState().setHoveredEdge(xyedge.id)
+      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)
+        }
       },
       onEdgeMouseLeave: (event, xyedge) => {
-        diagramApi.getState().setHoveredEdge(null)
-      },
-      /**
-       * 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
-        })
+        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])
 }

package/src/xyflow/XYFlowInner.tsx

@@ -0,0 +1,50 @@
+import { isDynamicView } from '@likec4/core'
+import { Controls } from '@xyflow/react'
+import type { PropsWithChildren } from 'react'
+import { isNonNull, isNonNullish, isNullish } from 'remeda'
+import type { LikeC4DiagramProperties } from '../LikeC4Diagram.props'
+import { useDiagramState } from '../state/useDiagramStore'
+import { DynamicViewWalkthrough } from '../ui'
+import DiagramTitlePanel from '../ui/DiagramTitlePanel'
+import OptionsPanel from '../ui/OptionsPanel'
+import { XYFlowBackground } from './XYFlowBackground'
+
+type XYFlowInnerProps = PropsWithChildren<{
+  background: NonNullable<LikeC4DiagramProperties['background']>
+  controls: boolean
+  showDiagramTitle: boolean
+  enableDynamicViewWalkthrough: boolean
+}>
+
+export function XYFlowInner({
+  children,
+  background,
+  controls,
+  showDiagramTitle,
+  enableDynamicViewWalkthrough
+}: XYFlowInnerProps) {
+  const {
+    isDynamicView,
+    isDynamicViewActive,
+    readonly
+  } = useDiagramState(s => ({
+    isDynamicView: s.isDynamicView(),
+    readonly: s.readonly,
+    isDynamicViewActive: isNonNull(s.activeDynamicViewStep)
+  }))
+
+  const isBgWithPattern = background !== 'transparent' && background !== 'solid'
+
+  const isDiagramTitleVisible = !isDynamicViewActive && showDiagramTitle === true
+
+  return (
+    <>
+      {isBgWithPattern && <XYFlowBackground background={background} />}
+      {controls && <Controls position={'bottom-right'} />}
+      {readonly === false && <OptionsPanel />}
+      {isDiagramTitleVisible && <DiagramTitlePanel />}
+      {isDynamicView && enableDynamicViewWalkthrough && <DynamicViewWalkthrough />}
+      {children}
+    </>
+  )
+}

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

@@ -1,13 +1,14 @@
 import {
   type DiagramNode,
   type DiagramView,
+  extractStep,
   type Fqn,
   invariant,
   type NonEmptyArray,
   nonNullable,
   type Point
 } from '@likec4/core'
-import { getBezierEdgeCenter } from '@xyflow/react'
+import { Bezier } from 'bezier-js'
 import { hasAtLeast } from 'remeda'
 import type { XYFlowData } from '../xyflow/types'
 
@@ -20,24 +21,16 @@ function deriveEdgePoints(bezierSpline: NonEmptyArray<Point>) {
 
   while (hasAtLeast(bezierPoints, 3)) {
     const [cp1, cp2, end, ...rest] = bezierPoints
-    const [centerX, centerY] = getBezierEdgeCenter({
-      sourceX: start[0],
-      sourceY: start[1],
-      targetX: end[0],
-      targetY: end[1],
-      sourceControlX: cp1[0],
-      sourceControlY: cp1[1],
-      targetControlX: cp2[0],
-      targetControlY: cp2[1]
+    const bezier = new Bezier(start[0], start[1], cp1[0], cp1[1], cp2[0], cp2[1], end[0], end[1])
+    // const { x, y } = bezier.get(0.5)
+    const inflections = bezier.inflections()
+    if (inflections.length === 0) {
+      inflections.push(0.5)
+    }
+    inflections.forEach(t => {
+      const { x, y } = bezier.get(t)
+      handles.push([x, y])
     })
-    handles.push(
-      [centerX, centerY]
-    )
-    // if (rest.length === 0) {
-    //   handles.push(
-    //     end
-    //   )
-    // }
     bezierPoints = rest
     start = end
   }
@@ -50,12 +43,13 @@ function deriveEdgePoints(bezierSpline: NonEmptyArray<Point>) {
 const nodeZIndex = (node: DiagramNode) => node.level + 1
 
 export function diagramViewToXYFlowData(
-  view: Pick<DiagramView, 'nodes' | 'edges'>,
+  view: Pick<DiagramView, 'nodes' | 'edges' | '__'>,
   opts: {
     draggable: boolean
     selectable: boolean
   }
 ): XYFlowData {
+  const isDynamicView = view.__ === 'dynamic'
   const editor: XYFlowData = {
     nodes: [],
     edges: []
@@ -178,11 +172,12 @@ export function diagramViewToXYFlowData(
         controlPoints,
         headPoint: edge.headArrowPoint ?? null,
         tailPoint: edge.tailArrowPoint ?? null,
-        label: edge.labelBBox && edge.label
+        stepNum: isDynamicView ? extractStep(edge.id) : null,
+        label: !!edge.labelBBox
           ? {
             bbox: edge.labelBBox,
             // text: edge.labels ? edge.labels.map(l => l.text).join('\n') : ''
-            text: edge.label
+            text: edge.label ?? ''
           }
           : null
       },