@likec4/diagram 1.2.2 → 1.4.0

package/src/xyflow/SyncWithDiagram.tsx

@@ -52,10 +52,29 @@ export function SyncWithDiagram() {
     setEdges(updates.edges.map(update => {
       const existing = edgeLookup.get(update.id)
       if (existing) {
-        return eq(existing.data.edge, update.data.edge) ? existing : {
+        if (eq(existing.data.controlPoints, update.data.controlPoints) && eq(existing.data.edge, update.data.edge)) {
+          return existing
+        }
+        return {
           ...existing,
-          ...update
+          ...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
     }))

package/src/xyflow/XYFlow.tsx

@@ -1,10 +1,8 @@
-import { useMantineColorScheme } from '@mantine/core'
-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 { ReactFlow, useOnViewportChange } from '@xyflow/react'
+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 { MinZoom } from './const'
 import { RelationshipEdge } from './edges/RelationshipEdge'
@@ -13,7 +11,6 @@ import { useXYStoreApi } from './hooks/useXYFlow'
 import { CompoundNode } from './nodes/compound'
 import { ElementNode } from './nodes/element'
 import { XYFlowEdge, XYFlowNode } from './types'
-import { XYFlowBackground } from './XYFlowBackground'
 import { useXYFlowEvents } from './XYFlowEvents'
 
 const nodeTypes = {
@@ -25,6 +22,7 @@ const edgeTypes = {
 }
 
 type XYFlowWrapperProps = PropsWithChildren<{
+  colorMode?: 'system' | 'light' | 'dark'
   className?: string | undefined
   defaultNodes: XYFlowNode[]
   defaultEdges: XYFlowEdge[]
@@ -45,7 +43,12 @@ const selector = (s: DiagramState) => ({
   nodesSelectable: s.nodesSelectable || s.focusedNodeId !== null,
   nodesDraggable: s.nodesDraggable,
   fitView: s.fitViewEnabled,
-  fitViewPadding: s.fitViewPadding,
+  fitViewOptions: {
+    minZoom: MinZoom,
+    maxZoom: 1,
+    padding: s.fitViewPadding,
+    includeHiddenNodes: true
+  },
   hasOnNavigateTo: !!s.onNavigateTo,
   hasOnNodeClick: !!s.onNodeClick,
   hasOnNodeContextMenu: !!s.onNodeContextMenu,
@@ -57,19 +60,21 @@ const selector = (s: DiagramState) => ({
 })
 
 export function XYFlow({
+  colorMode = 'system',
   className,
   children,
   defaultNodes,
   defaultEdges,
   style
 }: XYFlowWrapperProps) {
+  DEV && useTilg()
   const xyflowApi = useXYStoreApi()
   const diagramApi = useDiagramStoreApi()
   const {
     nodesSelectable,
     nodesDraggable,
     fitView,
-    fitViewPadding,
+    fitViewOptions,
     pannable,
     zoomable,
     hasOnNodeClick,
@@ -78,15 +83,12 @@ export function XYFlow({
     hasOnCanvasContextMenu,
     hasOnEdgeContextMenu,
     hasOnEdgeClick
-  } = useDiagramState(selector)
+  } = useDiagramState(selector, eq)
 
   const layoutConstraints = useLayoutConstraints()
 
   const handlers = useXYFlowEvents()
 
-  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
@@ -122,12 +124,7 @@ export function XYFlow({
       maxZoom={zoomable ? 1.9 : 1}
       minZoom={zoomable ? MinZoom : 1}
       fitView={fitView}
-      fitViewOptions={{
-        minZoom: MinZoom,
-        maxZoom: 1,
-        padding: fitViewPadding,
-        includeHiddenNodes: true
-      }}
+      fitViewOptions={fitViewOptions}
       preventScrolling={zoomable || pannable}
       defaultMarkerColor="var(--xy-edge-stroke)"
       noDragClassName="nodrag"
@@ -159,9 +156,9 @@ export function XYFlow({
       onNodeClick={handlers.onNodeClick}
       onNodeDoubleClick={handlers.onNodeDoubleClick}
       onEdgeClick={handlers.onEdgeClick}
-      onInit={() => {
+      onInit={useCallback(() => {
         diagramApi.setState({ initialized: true }, false, 'initialized')
-      }}
+      }, [diagramApi])}
       {...(hasOnNodeContextMenu && {
         onNodeContextMenu: handlers.onNodeContextMenu
       })}
@@ -176,4 +173,4 @@ export function XYFlow({
   )
 }
 
-// export const XYFlow = memo(XYFlowWrapper, propsAreEqual) as typeof XYFlowWrapper
+// export const XYFlow = memo(XYFlowWrapper) as typeof XYFlowWrapper

package/src/xyflow/XYFlowEvents.tsx

@@ -1,5 +1,6 @@
 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'
@@ -30,6 +31,8 @@ export function useXYFlowEvents() {
   const diagramApi = useDiagramStoreApi()
   const xyflowApi = useXYStoreApi()
 
+  const lastClickTimestamp = useRef<number>()
+
   const dblclickTimeout = useRef<number>()
 
   const dbclickLock = () => {
@@ -42,6 +45,10 @@ export function useXYFlowEvents() {
     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('')
@@ -68,8 +75,14 @@ export function useXYFlowEvents() {
         if (dbclickLock()) {
           return
         }
-        const { focusedNodeId, fitDiagram, onCanvasClick, resetLastClicked } = diagramApi.getState()
-        if (!!focusedNodeId) {
+        const {
+          focusedNodeId,
+          activeDynamicViewStep,
+          fitDiagram,
+          onCanvasClick,
+          resetLastClicked
+        } = diagramApi.getState()
+        if (focusedNodeId || activeDynamicViewStep) {
           fitDiagram(xyflowApi)
           if (!onCanvasClick) {
             event.stopPropagation()
@@ -100,20 +113,28 @@ export function useXYFlowEvents() {
       },
       onNodeClick: (event, xynode) => {
         const {
+          zoomable,
+          fitViewEnabled,
           focusedNodeId,
           focusOnNode,
           onNodeClick,
+          lastClickedNodeId,
           setLastClickedNode
         } = diagramApi.getState()
         setLastClickedNode(xynode.id)
+        const focusPossible = zoomable && fitViewEnabled
         // if we focused on a node, and clicked on another node - focus on the clicked node
-        if (!!focusedNodeId && focusedNodeId !== xynode.id) {
+        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) {
             // user did not provide a custom handler, stop propagation
             event.stopPropagation()
           }
         }
+        lastClickTimestamp.current = Date.now()
         onNodeClick?.({
           element: xynode.data.element,
           xynode,
@@ -166,10 +187,7 @@ export function useXYFlowEvents() {
       },
       onNodeMouseEnter: (_event, xynode) => {
         hoveredNodeFromOnEdgeEnterRef.current = ''
-        const { hoveredNodeId, setHoveredNode } = diagramApi.getState()
-        if (hoveredNodeId !== xynode.id) {
-          setHoveredNode(xynode.id)
-        }
+        diagramApi.getState().setHoveredNode(xynode.id)
       },
       onNodeMouseLeave: (_event, xynode) => {
         const { hoveredNodeId, setHoveredNode } = diagramApi.getState()
@@ -191,9 +209,9 @@ export function useXYFlowEvents() {
           setHoveredEdge(null)
         }
         if (hoveredNodeId === hoveredNodeFromOnEdgeEnterRef.current) {
-          hoveredNodeFromOnEdgeEnterRef.current = ''
           setHoveredNode(null)
         }
+        hoveredNodeFromOnEdgeEnterRef.current = ''
       }
     }) satisfies XYFlowEventHandlers, [diagramApi, xyflowApi])
 }

package/src/xyflow/XYFlowInner.tsx

@@ -1,11 +1,12 @@
-import { isDynamicView } from '@likec4/core'
 import { Controls } from '@xyflow/react'
-import type { PropsWithChildren } from 'react'
-import { isNonNull, isNonNullish, isNullish } from 'remeda'
+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 { DynamicViewWalkthrough } from '../ui'
+import { BackwardForwardPanel } from '../ui/BackwardForwardPanel'
 import DiagramTitlePanel from '../ui/DiagramTitlePanel'
+import { DynamicViewWalkthrough } from '../ui/DynamicViewWalkthrough'
 import OptionsPanel from '../ui/OptionsPanel'
 import { XYFlowBackground } from './XYFlowBackground'
 
@@ -13,14 +14,16 @@ type XYFlowInnerProps = PropsWithChildren<{
   background: NonNullable<LikeC4DiagramProperties['background']>
   controls: boolean
   showDiagramTitle: boolean
+  showNavigationButtons: boolean
   enableDynamicViewWalkthrough: boolean
 }>
 
-export function XYFlowInner({
+export const XYFlowInner = memo(function XYFlowInnerR({
   children,
   background,
   controls,
   showDiagramTitle,
+  showNavigationButtons,
   enableDynamicViewWalkthrough
 }: XYFlowInnerProps) {
   const {
@@ -44,7 +47,8 @@ export function XYFlowInner({
       {readonly === false && <OptionsPanel />}
       {isDiagramTitleVisible && <DiagramTitlePanel />}
       {isDynamicView && enableDynamicViewWalkthrough && <DynamicViewWalkthrough />}
+      {showNavigationButtons && <BackwardForwardPanel />}
       {children}
     </>
   )
-}
+}, shallowEqual)

package/src/xyflow/const.ts

@@ -4,4 +4,4 @@ export const ZIndexes = {
   Element: 3
 } as const
 
-export const MinZoom = 0.05
+export const MinZoom = 0.1

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

@@ -1,49 +1,12 @@
-import {
-  type DiagramNode,
-  type DiagramView,
-  extractStep,
-  type Fqn,
-  invariant,
-  type NonEmptyArray,
-  nonNullable,
-  type Point
-} from '@likec4/core'
-import { Bezier } from 'bezier-js'
+import { type DiagramNode, type DiagramView, extractStep, type Fqn, invariant, nonNullable } from '@likec4/core'
 import { hasAtLeast } from 'remeda'
 import type { XYFlowData } from '../xyflow/types'
 
-function deriveEdgePoints(bezierSpline: NonEmptyArray<Point>) {
-  let [start, ...bezierPoints] = bezierSpline
-  invariant(start, 'start should be defined')
-  const handles = [
-    // start
-  ] as Point[]
-
-  while (hasAtLeast(bezierPoints, 3)) {
-    const [cp1, cp2, end, ...rest] = bezierPoints
-    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])
-    })
-    bezierPoints = rest
-    start = end
-  }
-  invariant(bezierPoints.length === 0, 'all points should be consumed')
-
-  return handles
-}
-
 // const nodeZIndex = (node: DiagramNode) => node.level + (hasAtLeast(node.children, 1) ? 2 : 1)
 const nodeZIndex = (node: DiagramNode) => node.level + 1
 
 export function diagramViewToXYFlowData(
-  view: Pick<DiagramView, 'nodes' | 'edges' | '__'>,
+  view: Pick<DiagramView, 'id' | 'nodes' | 'edges' | '__' | 'manualLayout'>,
   opts: {
     draggable: boolean
     selectable: boolean
@@ -147,7 +110,7 @@ export function diagramViewToXYFlowData(
     const target = edge.target
     const id = ns + edge.id
     // const points = isElkEdge(edge) ? edge.points : deriveEdgePoints(edge.points)
-    const controlPoints = deriveEdgePoints(edge.points)
+    // const controlPoints = deriveEdgePoints(edge.points)
     // if (edge.tailArrowPoint) {
     //   controlPoints.unshift([...edge.tailArrowPoint])
     // }
@@ -169,7 +132,7 @@ export function diagramViewToXYFlowData(
       data: {
         edge,
         type: 'bezier',
-        controlPoints,
+        controlPoints: view.manualLayout?.edges[edge.id]?.controlPoints || null,
         headPoint: edge.headArrowPoint ?? null,
         tailPoint: edge.tailArrowPoint ?? null,
         stepNum: isDynamicView ? extractStep(edge.id) : null,