@likec4/diagram 1.4.0 → 1.5.0

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

@@ -3,7 +3,7 @@ import { shallowEqual } from 'fast-equals'
 import { memo, type PropsWithChildren } from 'react'
 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'

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

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

@@ -1,9 +1,10 @@
-import { type DiagramNode, type DiagramView, extractStep, type Fqn, invariant, nonNullable } from '@likec4/core'
+import { extractStep, invariant, nonNullable } from '@likec4/core'
+import type { DiagramNode, DiagramView, Fqn } from '@likec4/core/types'
 import { hasAtLeast } from 'remeda'
 import type { XYFlowData } from '../xyflow/types'
+import { ZIndexes } from './const'
 
-// const nodeZIndex = (node: DiagramNode) => node.level + (hasAtLeast(node.children, 1) ? 2 : 1)
-const nodeZIndex = (node: DiagramNode) => node.level + 1
+// const nodeZIndex = (node: DiagramNode) => node.level - (node.children.length > 0 ? 1 : 0)
 
 export function diagramViewToXYFlowData(
   view: Pick<DiagramView, 'id' | 'nodes' | 'edges' | '__' | 'manualLayout'>,
@@ -39,10 +40,10 @@ export function diagramViewToXYFlowData(
   const nodeById = (id: Fqn) => nonNullable(nodeLookup.get(id), `Node not found: ${id}`)
 
   let next: typeof traverse[0] | undefined
-  while ((next = traverse.pop())) {
+  while ((next = traverse.shift())) {
     const { node, parent } = next
     if (node.children.length > 0) {
-      traverse.unshift(...node.children.map(child => ({ node: nodeById(child), parent: node })))
+      traverse.push(...node.children.map(child => ({ node: nodeById(child), parent: node })))
     }
     const isCompound = hasAtLeast(node.children, 1)
     const position = {
@@ -58,6 +59,7 @@ export function diagramViewToXYFlowData(
     // const inEdges = node.inEdges.map(e => view.edges.find(edge => edge.id === e)).filter(Boolean)
 
     const id = ns + node.id
+    const draggable = opts.draggable && (!parent || parent.children.length > 1)
     editor.nodes.push({
       id,
       type: isCompound ? 'compound' : 'element',
@@ -65,43 +67,22 @@ export function diagramViewToXYFlowData(
         fqn: node.id,
         element: node
       },
-      draggable: opts.draggable && (!parent || parent.children.length > 1),
+      draggable,
       selectable: opts.selectable,
       deletable: false,
       position,
-      zIndex: nodeZIndex(node),
+      zIndex: isCompound ? ZIndexes.Compound : ZIndexes.Element,
       hidden: false,
-      /*       initialWidth: node.width,
-      initialHeight: node.height, */
+      initialWidth: node.width,
+      initialHeight: node.height,
       width: node.width,
       height: node.height,
-      // measured: {
-      //   width: node.width,
-      //   height: node.height
-      // },
       ...(parent && {
         parentId: ns + parent.id
+      }),
+      ...(isCompound && {
+        dragHandle: '.likec4-compound-title'
       })
-      // handles: [
-      //   ...outEdges.map(out => ({
-      //     id: `${out.id}`,
-      //     type: 'source' as const,
-      //     position: Position.Bottom,
-      //     x: out.points[0][0],
-      //     y: out.points[0][1],
-      //     width: 10,
-      //     height: 10
-      //   })),
-      //   ...inEdges.map(out => ({
-      //     id: out.id,
-      //     type: 'target' as const,
-      //     position: Position.Top,
-      //     x: out.points[0][0],
-      //     y: out.points[0][1],
-      //     width: 10,
-      //     height: 10
-      //   }))
-      // ],
     })
   }
 
@@ -120,33 +101,28 @@ export function diagramViewToXYFlowData(
     invariant(hasAtLeast(edge.points, 2), 'edge should have at least 2 points')
     // invariant(hasAtLeast(controlPoints, 2), 'edge controlPoints should have at least 2 points')
 
-    const level = Math.max(nodeZIndex(nodeById(source)), nodeZIndex(nodeById(target)))
+    // const level = Math.max(nodeZIndex(nodeById(source)), nodeZIndex(nodeById(target)))
 
     editor.edges.push({
       id,
       type: 'relationship',
       source: ns + source,
       target: ns + target,
-      zIndex: level,
+      zIndex: ZIndexes.Edge,
+      selectable: opts.selectable,
       deletable: false,
       data: {
         edge,
         type: 'bezier',
         controlPoints: view.manualLayout?.edges[edge.id]?.controlPoints || null,
-        headPoint: edge.headArrowPoint ?? null,
-        tailPoint: edge.tailArrowPoint ?? null,
         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 ?? ''
           }
           : null
       },
-      // markerEnd: {
-      //   type: MarkerType.ArrowClosed
-      // },
       interactionWidth: 20
     })
   }