@likec4/diagram 1.3.0 → 1.5.0

package/src/xyflow/EdgeMarkers.tsx

@@ -0,0 +1,148 @@
+import type { SVGProps } from 'react'
+
+const Open = (props: SVGProps<SVGMarkerElement>) => (
+  <marker
+    viewBox="-4 -4 14 16"
+    refX={5}
+    refY={4}
+    markerWidth="7"
+    markerHeight="8"
+    preserveAspectRatio="xMaxYMid meet"
+    orient="auto-start-reverse"
+    {...props}
+  >
+    <path
+      d="M0,0 L7,4 L0,8 L4,4 Z"
+      stroke="context-stroke"
+      fill="context-stroke"
+      strokeDasharray={0}
+      strokeWidth={1}
+      strokeLinecap={'round'} />
+  </marker>
+)
+
+const Arrow = (props: SVGProps<SVGMarkerElement>) => (
+  <marker
+    viewBox="-1 -1 12 10"
+    refX={4}
+    refY={3}
+    markerWidth="8"
+    markerHeight="6"
+    preserveAspectRatio="xMaxYMid meet"
+    orient="auto-start-reverse"
+    {...props}>
+    <path
+      d="M 0 0 L 8 3 L 0 6 L 1 3 z"
+      fill="context-stroke"
+      strokeWidth={0}
+    />
+  </marker>
+)
+
+const OArrow = (props: SVGProps<SVGMarkerElement>) => (
+  <marker
+    viewBox="-1 -1 12 10"
+    refX={4}
+    refY={3}
+    markerWidth="8"
+    markerHeight="6"
+    preserveAspectRatio="xMaxYMid meet"
+    orient="auto-start-reverse"
+    {...props}>
+    <path
+      d="M 0 0 L 8 3 L 0 6 L 1 3 z"
+      stroke="context-stroke"
+      fill="var(--likec4-background-color)"
+      strokeWidth={1.25}
+      strokeLinejoin="miter"
+      strokeLinecap={'square'}
+    />
+  </marker>
+)
+
+const Diamond = (props: SVGProps<SVGMarkerElement>) => (
+  <marker
+    viewBox="-4 -4 16 14"
+    refX={5}
+    refY={4}
+    markerWidth="10"
+    markerHeight="8"
+    preserveAspectRatio="xMaxYMid meet"
+    orient="auto-start-reverse"
+    {...props}
+  >
+    <path
+      d="M5,0 L10,4 L5,8 L0,4 Z"
+      fill="context-stroke"
+      strokeWidth={0}
+      strokeLinecap={'round'}
+    />
+  </marker>
+)
+
+const ODiamond = (props: SVGProps<SVGMarkerElement>) => (
+  <marker
+    viewBox="-4 -4 16 14"
+    refX={6}
+    refY={4}
+    markerWidth="10"
+    markerHeight="8"
+    preserveAspectRatio="xMaxYMid meet"
+    orient="auto-start-reverse"
+    {...props}>
+    <path
+      d="M5,0 L10,4 L5,8 L0,4 Z"
+      stroke="context-stroke"
+      fill="var(--likec4-background-color)"
+      strokeWidth={1.25}
+      strokeLinecap={'round'}
+    />
+  </marker>
+)
+
+const Dot = (props: SVGProps<SVGMarkerElement>) => (
+  <marker
+    viewBox="0 0 10 10"
+    refX={4}
+    refY={4}
+    markerWidth="6"
+    markerHeight="6"
+    {...props}>
+    <circle
+      strokeWidth={0}
+      fill="context-stroke"
+      cx={4}
+      cy={4}
+      r={3}
+    />
+  </marker>
+)
+
+const ODot = (props: SVGProps<SVGMarkerElement>) => (
+  <marker
+    viewBox="0 0 10 10"
+    refX={4}
+    refY={4}
+    markerWidth="6"
+    markerHeight="6"
+    {...props}>
+    <circle
+      strokeWidth={1.25}
+      stroke="context-stroke"
+      fill="var(--likec4-background-color)"
+      cx={4}
+      cy={4}
+      r={3}
+    />
+  </marker>
+)
+
+export const EdgeMarkers = {
+  Arrow,
+  OArrow,
+  Open,
+  Diamond,
+  ODiamond,
+  Dot,
+  ODot
+}

package/src/xyflow/FitviewOnDiagramChange.tsx

@@ -2,7 +2,7 @@ import { invariant } from '@likec4/core'
 import { useDebouncedEffect } from '@react-hookz/web'
 import { shallowEqual } from 'fast-equals'
 import { useEffect, useRef } from 'react'
-import { type DiagramState, type DiagramStoreApi, useDiagramState, useDiagramStoreApi } from '../state'
+import { type DiagramState, type DiagramStoreApi, useDiagramState, useDiagramStoreApi } from '../state/hooks'
 import { useXYStore, useXYStoreApi, type XYStoreApi } from './hooks'
 import type { XYFlowState } from './types'
 import { toDomPrecision } from './utils'
@@ -24,11 +24,11 @@ function FitViewOnViewportResize({ diagramApi, xyflowApi }: {
       if (focusedNodeId || prevDimensionsRef.current === dimensions) {
         return
       }
-      fitDiagram(xyflowApi)
+      fitDiagram(300)
       prevDimensionsRef.current = dimensions
     },
     [dimensions, diagramApi, xyflowApi],
-    250,
+    300,
     1000
   )
 
@@ -77,6 +77,7 @@ export function FitViewOnDiagramChange() {
   } = useDiagramState(selector, shallowEqual)
   const diagramApi = useDiagramStoreApi()
   const processedRef = useRef(pendingViewId)
+  const durationRef = useRef(300)
 
   useEffect(() => {
     if (!xyflowSynced || pendingViewId === processedRef.current) {
@@ -97,11 +98,14 @@ export function FitViewOnDiagramChange() {
           y: toDomPrecision(fromPos.y - toPos.y)
         }
       xyflowApi.getState().panBy(diff)
+      durationRef.current = 500
       diagramApi.setState({ lastOnNavigate: null })
       return
     }
     processedRef.current = pendingViewId
-    diagramApi.getState().fitDiagram(xyflowApi)
+    diagramApi.getState().fitDiagram(durationRef.current)
+    // Reset duration
+    durationRef.current = 300
   }, [pendingViewId, xyflowSynced, waitCorrection])
 
   if (!viewportChanged && xyflowSynced) {

package/src/xyflow/SelectEdgesOnNodeFocus.tsx

@@ -1,72 +1,76 @@
 import { nonNullable } from '@likec4/core'
 import type { EdgeChange, NodeChange } from '@xyflow/react'
-import { useUpdateEffect } from '../hooks/useUpdateEffect'
-import { useDiagramState, useDiagramStoreApi } from '../state/useDiagramStore'
+import { getBoundsOfRects, getViewportForBounds, nodeToRect } from '@xyflow/system'
+import { useEffect } from 'react'
+import { useDiagramStoreApi } from '../state/hooks'
 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
-    }
+  useEffect(
+    () =>
+      diagramStore.subscribe(s => s.focusedNodeId, focusedNodeId => {
+        if (!focusedNodeId) {
+          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)))
+        const edgeChanges = [] as EdgeChange<XYFlowEdge>[]
+        const nodeChanges = [] as NodeChange<XYFlowNode>[]
+        const {
+          edgeLookup,
+          nodeLookup,
+          width,
+          height,
+          panZoom,
+          transform,
+          triggerNodeChanges,
+          triggerEdgeChanges
+        } = diagramStore.getState().xystore.getState()
+        let focusBounds = nodeToRect(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 = nonNullable(nodeLookup.get(edge.source === focusedNodeId ? edge.target : edge.source))
-        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) {
+        for (const [, edge] of edgeLookup) {
+          if (edge.source === focusedNodeId || edge.target === focusedNodeId) {
+            const anotherNodeId = edge.source === focusedNodeId ? edge.target : edge.source
+            const nd = nodeToRect(nonNullable(nodeLookup.get(anotherNodeId)))
+            focusBounds = getBoundsOfRects(focusBounds, nd)
+          }
+          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: node.id,
+          id: focusedNodeId,
           type: 'select',
-          selected: false
+          selected: true
         })
-      }
-    }
-    nodeChanges.push({
-      id: focusedNodeId,
-      type: 'select',
-      selected: true
-    })
-    if (edgeChanges.length > 0) {
-      triggerEdgeChanges(edgeChanges)
-    }
-    triggerNodeChanges(nodeChanges)
+        if (edgeChanges.length > 0) {
+          triggerEdgeChanges(edgeChanges)
+        }
+        triggerNodeChanges(nodeChanges)
 
-    fitView({
-      duration: 350,
-      padding: 0.1,
-      minZoom: MinZoom,
-      maxZoom: Math.max(1, transform[2]),
-      nodes: Array.from(fitViewNodes)
-    })
-  }, [diagramStore, xyflowApi, focusedNodeId])
+        const maxZoom = Math.max(1, transform[2])
+        const viewport = getViewportForBounds(focusBounds, width, height, MinZoom, maxZoom, 0.2)
+        panZoom?.setViewport(viewport, {
+          duration: 350
+        })
+      }),
+    [diagramStore]
+  )
 
   return null
 }

package/src/xyflow/SyncWithDiagram.tsx

@@ -1,8 +1,8 @@
 import { deepEqual as eq } from 'fast-equals'
-import { useXYStoreApi } from './hooks'
 
 import { useEffect } from 'react'
-import { useDiagramState, useDiagramStoreApi } from '../state'
+import { omit } from 'remeda'
+import { useDiagramState, useDiagramStoreApi } from '../state/hooks'
 import { diagramViewToXYFlowData } from './diagram-to-xyflow'
 
 /**
@@ -10,7 +10,6 @@ import { diagramViewToXYFlowData } from './diagram-to-xyflow'
  */
 export function SyncWithDiagram() {
   const xyflowSynced = useDiagramState(s => s.xyflowSynced)
-  const xyflowApi = useXYStoreApi()
   const diagramStoreApi = useDiagramStoreApi()
 
   useEffect(() => {
@@ -21,7 +20,8 @@ export function SyncWithDiagram() {
       view,
       nodesDraggable,
       nodesSelectable,
-      focusedNodeId
+      focusedNodeId,
+      xystore
     } = diagramStoreApi.getState()
     const updates = diagramViewToXYFlowData(view, {
       draggable: nodesDraggable,
@@ -33,7 +33,7 @@ export function SyncWithDiagram() {
       edgeLookup,
       setNodes,
       setEdges
-    } = xyflowApi.getState()
+    } = xystore.getState()
 
     setNodes(updates.nodes.map(update => {
       const existing = nodeLookup.get(update.id)?.internals.userNode
@@ -52,29 +52,22 @@ export function SyncWithDiagram() {
     setEdges(updates.edges.map(update => {
       const existing = edgeLookup.get(update.id)
       if (existing) {
-        if (eq(existing.data.controlPoints, update.data.controlPoints) && eq(existing.data.edge, update.data.edge)) {
+        if (
+          eq(existing.data.controlPoints, update.data.controlPoints)
+          && eq(existing.markerStart, update.markerStart)
+          && eq(existing.markerEnd, update.markerEnd)
+          && eq(existing.data.edge, update.data.edge)
+        ) {
           return existing
         }
         return {
-          ...existing,
+          ...omit(existing, ['data', 'markerStart', 'markerEnd']),
           ...update,
           data: {
             ...existing.data,
             ...update.data
           }
         }
-        // if (update.data.controlPoints === null && existing.data.controlPoints !== null) {
-        //   // we don't want accidentally
-        //   // overwrite existing control points
-        //   return {
-        //     ...existing,
-        //     ...update,
-        //     data: {
-        //       ...update.data,
-        //       controlPoints: existing.data.controlPoints
-        //     }
-        //   }
-        // }
       }
       return update
     }))
@@ -86,7 +79,7 @@ export function SyncWithDiagram() {
       false,
       'xyflowSynced'
     )
-  }, [xyflowSynced, xyflowApi, diagramStoreApi])
+  }, [xyflowSynced, diagramStoreApi])
 
   return null
 }

package/src/xyflow/XYFlow.tsx

@@ -3,7 +3,7 @@ import { DEV } from 'esm-env'
 import { deepEqual as eq } from 'fast-equals'
 import { type CSSProperties, type PropsWithChildren, useCallback } from 'react'
 import useTilg from 'tilg'
-import { type DiagramState, useDiagramState, useDiagramStoreApi } from '../state'
+import { type DiagramState, useDiagramState, useDiagramStoreApi } from '../state/hooks'
 import { MinZoom } from './const'
 import { RelationshipEdge } from './edges/RelationshipEdge'
 import { useLayoutConstraints } from './hooks/useLayoutConstraints'
@@ -134,9 +134,6 @@ export function XYFlow({
       elementsSelectable={nodesSelectable}
       nodesFocusable={nodesDraggable || nodesSelectable || hasOnNodeClick || hasOnNavigateTo}
       edgesFocusable={hasOnEdgeClick}
-      {...(!nodesSelectable && {
-        selectionKeyCode: null
-      })}
       nodesDraggable={nodesDraggable}
       {...nodesDraggable && {
         onNodeDragStart: layoutConstraints.onNodeDragStart,
@@ -146,6 +143,7 @@ export function XYFlow({
       zoomOnDoubleClick={false}
       elevateNodesOnSelect={false} // or edges are not visible after select
       selectNodesOnDrag={false} // or weird camera movement
+      selectionKeyCode={null}
       onDoubleClick={handlers.onDoubleClick}
       onPaneClick={handlers.onPaneClick}
       onMoveEnd={handlers.onMoveEnd}

package/src/xyflow/XYFlowEvents.tsx

@@ -1,12 +1,10 @@
 import type { ReactFlowProps } from '@xyflow/react'
 import { useMemo, useRef } from 'react'
-import { isNullish } from 'remeda'
 import type { Simplify } from 'type-fest'
-import { useDiagramStoreApi } from '../state'
-import { useXYStoreApi } from './hooks'
+import { useDiagramStoreApi } from '../state/hooks'
 import type { XYFlowEdge, XYFlowNode } from './types'
 
-type XYFlowEventHandlers = Simplify<
+export type XYFlowEventHandlers = Simplify<
   Required<
     Pick<
       ReactFlowProps<XYFlowNode, XYFlowEdge>,
@@ -29,32 +27,31 @@ type XYFlowEventHandlers = Simplify<
 
 export function useXYFlowEvents() {
   const diagramApi = useDiagramStoreApi()
-  const xyflowApi = useXYStoreApi()
 
   const lastClickTimestamp = useRef<number>()
 
   const dblclickTimeout = useRef<number>()
 
-  const dbclickLock = () => {
-    if (dblclickTimeout.current !== undefined) {
-      return true
-    }
-    dblclickTimeout.current = window.setTimeout(() => {
-      dblclickTimeout.current = undefined
-    }, 250)
-    return false
-  }
-
-  const lastClickWasRecent = (ms = 1500) => {
-    return lastClickTimestamp.current && (Date.now() - lastClickTimestamp.current) < ms
-  }
-
   // 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(() =>
-    ({
+  return useMemo(() => {
+    const dbclickLock = () => {
+      if (dblclickTimeout.current !== undefined) {
+        return true
+      }
+      dblclickTimeout.current = window.setTimeout(() => {
+        dblclickTimeout.current = undefined
+      }, 250)
+      return false
+    }
+
+    const lastClickWasRecent = (ms = 1500) => {
+      return lastClickTimestamp.current && (Date.now() - lastClickTimestamp.current) < ms
+    }
+
+    return ({
       onDoubleClick: (event) => {
         const {
           fitViewEnabled,
@@ -63,7 +60,7 @@ export function useXYFlowEvents() {
           fitDiagram
         } = diagramApi.getState()
         if (fitViewEnabled) {
-          fitDiagram(xyflowApi)
+          fitDiagram()
           if (!onCanvasDblClick) {
             event.stopPropagation()
           }
@@ -82,8 +79,8 @@ export function useXYFlowEvents() {
           onCanvasClick,
           resetLastClicked
         } = diagramApi.getState()
-        if (focusedNodeId || activeDynamicViewStep) {
-          fitDiagram(xyflowApi)
+        if ((focusedNodeId ?? activeDynamicViewStep) !== null) {
+          fitDiagram()
           if (!onCanvasClick) {
             event.stopPropagation()
           }
@@ -106,7 +103,7 @@ export function useXYFlowEvents() {
       onEdgeContextMenu: (event, xyedge) => {
         diagramApi.getState().setLastClickedEdge(xyedge.id)
         diagramApi.getState().onEdgeContextMenu?.({
-          relation: xyedge.data.edge,
+          edge: xyedge.data.edge,
           xyedge,
           event
         })
@@ -116,6 +113,7 @@ export function useXYFlowEvents() {
           zoomable,
           fitViewEnabled,
           focusedNodeId,
+          fitDiagram,
           focusOnNode,
           onNodeClick,
           lastClickedNodeId,
@@ -126,10 +124,21 @@ export function useXYFlowEvents() {
         // if we focused on a node, and clicked on another node - focus on the clicked node
         const shallChangeFocus = !!focusedNodeId && focusedNodeId !== xynode.id
         // if user clicked on the same node twice in a short time, focus on it
-        const clickedRecently = isNullish(focusedNodeId) && lastClickedNodeId === xynode.id && lastClickWasRecent()
-        if (focusPossible && (shallChangeFocus || clickedRecently)) {
-          focusOnNode(xynode.id)
-          if (!onNodeClick) {
+        const clickedRecently = lastClickedNodeId === xynode.id && lastClickWasRecent()
+        if (focusPossible) {
+          let stopPropagation = false
+          switch (true) {
+            case !focusedNodeId && clickedRecently:
+            case shallChangeFocus:
+              stopPropagation = true
+              focusOnNode(xynode.id)
+              break
+            case focusedNodeId === xynode.id && clickedRecently:
+              stopPropagation = true
+              fitDiagram()
+              break
+          }
+          if (!onNodeClick && stopPropagation) {
             // user did not provide a custom handler, stop propagation
             event.stopPropagation()
           }
@@ -151,10 +160,11 @@ export function useXYFlowEvents() {
           setLastClickedNode
         } = diagramApi.getState()
         setLastClickedNode(xynode.id)
+        lastClickTimestamp.current = Date.now()
         if (!!focusedNodeId || (zoomable && fitViewEnabled)) {
           // if we are already focused on the node, cancel
           if (focusedNodeId === xynode.id) {
-            fitDiagram(xyflowApi)
+            fitDiagram()
           } else {
             focusOnNode(xynode.id)
           }
@@ -163,7 +173,11 @@ export function useXYFlowEvents() {
       },
       onEdgeClick: (event, xyedge) => {
         diagramApi.getState().setLastClickedEdge(xyedge.id)
-        const { focusedNodeId, focusOnNode, onEdgeClick } = diagramApi.getState()
+        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)
@@ -173,7 +187,7 @@ export function useXYFlowEvents() {
           }
         }
         onEdgeClick?.({
-          relation: xyedge.data.edge,
+          edge: xyedge.data.edge,
           xyedge,
           event
         })
@@ -213,5 +227,6 @@ export function useXYFlowEvents() {
         }
         hoveredNodeFromOnEdgeEnterRef.current = ''
       }
-    }) satisfies XYFlowEventHandlers, [diagramApi, xyflowApi])
+    }) satisfies XYFlowEventHandlers
+  }, [diagramApi])
 }

package/src/xyflow/XYFlowInner.tsx

@@ -1,10 +1,10 @@
-import { isDynamicView } from '@likec4/core'
 import { Controls } from '@xyflow/react'
 import { shallowEqual } from 'fast-equals'
 import { memo, type PropsWithChildren } from 'react'
-import { isNonNull, isNonNullish, isNullish } from 'remeda'
+import { isNonNull } from 'remeda'
 import type { LikeC4DiagramProperties } from '../LikeC4Diagram.props'
-import { useDiagramState } from '../state/useDiagramStore'
+import { useDiagramState } from '../state/hooks'
+import { BackwardForwardPanel } from '../ui/BackwardForwardPanel'
 import DiagramTitlePanel from '../ui/DiagramTitlePanel'
 import { DynamicViewWalkthrough } from '../ui/DynamicViewWalkthrough'
 import OptionsPanel from '../ui/OptionsPanel'
@@ -14,6 +14,7 @@ type XYFlowInnerProps = PropsWithChildren<{
   background: NonNullable<LikeC4DiagramProperties['background']>
   controls: boolean
   showDiagramTitle: boolean
+  showNavigationButtons: boolean
   enableDynamicViewWalkthrough: boolean
 }>
 
@@ -22,6 +23,7 @@ export const XYFlowInner = memo(function XYFlowInnerR({
   background,
   controls,
   showDiagramTitle,
+  showNavigationButtons,
   enableDynamicViewWalkthrough
 }: XYFlowInnerProps) {
   const {
@@ -45,6 +47,7 @@ export const XYFlowInner = memo(function XYFlowInnerR({
       {readonly === false && <OptionsPanel />}
       {isDiagramTitleVisible && <DiagramTitlePanel />}
       {isDynamicView && enableDynamicViewWalkthrough && <DynamicViewWalkthrough />}
+      {showNavigationButtons && <BackwardForwardPanel />}
       {children}
     </>
   )

package/src/xyflow/const.ts

@@ -1,7 +1,7 @@
 export const ZIndexes = {
-  Compound: 1,
-  Edge: 2,
-  Element: 3
+  Compound: 2,
+  Edge: 4,
+  Element: 6
 } as const
 
 export const MinZoom = 0.1