@likec4/diagram 1.1.0 → 1.2.0

package/src/xyflow/XYFlowEvents.tsx

@@ -32,7 +32,7 @@ export function useXYFlowEvents() {
 
   const dblclickTimeout = useRef<number>()
 
-  const dbclickGuarg = () => {
+  const dbclickLock = () => {
     if (dblclickTimeout.current !== undefined) {
       return true
     }
@@ -42,112 +42,158 @@ export function useXYFlowEvents() {
     return false
   }
 
-  return useMemo<XYFlowEventHandlers>(() => ({
-    onDoubleClick: (event) => {
-      diagramApi.getState().setLastClickedNode(null)
-      diagramApi.getState().setLastClickedEdge(null)
-      const diagramState = diagramApi.getState()
-      if (diagramState.onCanvasDblClick) {
-        diagramState.onCanvasDblClick(event)
-        return
-      }
-      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)
-      diagramApi.getState().onNodeContextMenu?.({
-        element: xynode.data.element,
-        xynode,
-        event
-      })
-    },
-    onPaneContextMenu: (event) => {
-      diagramApi.getState().setLastClickedNode(null)
-      diagramApi.getState().setLastClickedEdge(null)
-      diagramApi.getState().onCanvasContextMenu?.(event as any)
-    },
-    onEdgeContextMenu: (event, xyedge) => {
-      diagramApi.getState().setLastClickedEdge(xyedge.id)
-      diagramApi.getState().onEdgeContextMenu?.({
-        relation: xyedge.data.edge,
-        xyedge,
-        event
-      })
-    },
-    onNodeClick: (event, xynode) => {
-      diagramApi.getState().setLastClickedNode(xynode.id)
-      const { focusedNodeId, fitDiagram, onNodeClick } = diagramApi.getState()
-      if (onNodeClick) {
-        onNodeClick({
+  // 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) => {
+        const {
+          fitViewEnabled,
+          onCanvasDblClick,
+          resetLastClicked,
+          fitDiagram
+        } = diagramApi.getState()
+        if (fitViewEnabled) {
+          fitDiagram(xyflowApi)
+          if (!onCanvasDblClick) {
+            event.stopPropagation()
+          }
+        }
+        resetLastClicked()
+        onCanvasDblClick?.(event)
+      },
+      onPaneClick: (event) => {
+        if (dbclickLock()) {
+          return
+        }
+        const { focusedNodeId, fitDiagram, onCanvasClick, resetLastClicked } = diagramApi.getState()
+        if (!!focusedNodeId) {
+          fitDiagram(xyflowApi)
+          if (!onCanvasClick) {
+            event.stopPropagation()
+          }
+        }
+        resetLastClicked()
+        onCanvasClick?.(event)
+      },
+      onNodeContextMenu: (event, xynode) => {
+        diagramApi.getState().setLastClickedNode(xynode.id)
+        diagramApi.getState().onNodeContextMenu?.({
           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)
-      diagramApi.getState().onEdgeClick?.({
-        relation: xyedge.data.edge,
-        xyedge,
-        event
-      })
-    },
-    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}`)
+      },
+      onPaneContextMenu: (event) => {
+        diagramApi.getState().resetLastClicked()
+        diagramApi.getState().onCanvasContextMenu?.(event as any)
+      },
+      onEdgeContextMenu: (event, xyedge) => {
+        diagramApi.getState().setLastClickedEdge(xyedge.id)
+        diagramApi.getState().onEdgeContextMenu?.({
+          relation: xyedge.data.edge,
+          xyedge,
+          event
+        })
+      },
+      onNodeClick: (event, xynode) => {
+        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) {
+          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) => {
+        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, 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)) {
+          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
+        const viewportChanged = !!event
+        if (viewportChanged !== diagramApi.getState().viewportChanged) {
+          diagramApi.setState({ viewportChanged }, false, `viewport-changed: ${viewportChanged}`)
+        }
+      },
+      onNodeMouseEnter: (event, xynode) => {
+        hoveredNodeFromOnEdgeEnterRef.current = ''
+        const { hoveredNodeId, setHoveredNode } = diagramApi.getState()
+        if (hoveredNodeId !== xynode.id) {
+          setHoveredNode(xynode.id)
+        }
+      },
+      onNodeMouseLeave: (event, xynode) => {
+        const { hoveredNodeId, setHoveredNode } = diagramApi.getState()
+        if (hoveredNodeId === xynode.id) {
+          setHoveredNode(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)
+        }
+      },
+      onEdgeMouseLeave: (event, xyedge) => {
+        const { hoveredEdgeId, setHoveredEdge, hoveredNodeId, setHoveredNode } = diagramApi.getState()
+        if (hoveredEdgeId === xyedge.id) {
+          setHoveredEdge(null)
+        }
+        if (hoveredNodeId === hoveredNodeFromOnEdgeEnterRef.current) {
+          hoveredNodeFromOnEdgeEnterRef.current = ''
+          setHoveredNode(null)
+        }
       }
-    },
-    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])
+    }) 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
       },