@likec4/diagram 1.6.1 → 1.7.1

package/src/types.ts

@@ -0,0 +1,22 @@
+import type { Fqn, RelationID, ViewID } from '@likec4/core'
+import type { Simplify } from 'type-fest'
+
+type TaggedUnion<
+  TagKey extends string,
+  UnionMembers extends Record<string, Record<string, unknown>>
+> = {
+  [Name in keyof UnionMembers]: Simplify<{ [Key in TagKey]: Name } & UnionMembers[Name]>
+}[keyof UnionMembers]
+
+export type DiagramEditorCommand = TaggedUnion<'type', {
+  // Sources
+  showElement: {
+    element: Fqn
+  }
+  showRelation: {
+    relation: RelationID
+  }
+  showView: {
+    view: ViewID
+  }
+}>

package/src/ui/BackwardForwardPanel.tsx

@@ -2,12 +2,23 @@ import { ActionIcon, Group } from '@mantine/core'
 import { IconChevronLeft, IconChevronRight } from '@tabler/icons-react'
 import clsx from 'clsx'
 import { AnimatePresence, m } from 'framer-motion'
-import { useNavigationHistory } from '../state/useNavigationHistory'
+import { type DiagramState, useDiagramState } from '../state/hooks'
 import * as css from './BackwardForwardPanel.css'
 
-export function BackwardForwardPanel() {
-  const { hasBack, hasForward, ops } = useNavigationHistory()
+const historySelector = (s: DiagramState) => ({
+  hasStepBack: s.navigationHistoryIndex > 0,
+  hasStepForward: s.navigationHistoryIndex < s.navigationHistory.length - 1,
+  goBack: s.goBack,
+  goForward: s.goForward
+})
 
+export function BackwardForwardPanel() {
+  const {
+    hasStepBack,
+    hasStepForward,
+    goBack,
+    goForward
+  } = useDiagramState(historySelector)
   return (
     <Group
       className={clsx(
@@ -17,7 +28,7 @@ export function BackwardForwardPanel() {
       )}
       gap={'xs'}>
       <AnimatePresence>
-        {hasBack && (
+        {hasStepBack && (
           <m.div
             layout
             initial={{ opacity: 0.05, transform: 'translateX(-10px)' }}
@@ -30,12 +41,15 @@ export function BackwardForwardPanel() {
             <ActionIcon
               variant="light"
               color="gray"
-              onClick={() => ops.back()}>
+              onClick={e => {
+                e.stopPropagation()
+                goBack()
+              }}>
               <IconChevronLeft />
             </ActionIcon>
           </m.div>
         )}
-        {hasForward && (
+        {hasStepForward && (
           <m.div
             layout
             initial={{ opacity: 0.05, transform: 'translateX(10px)' }}
@@ -48,7 +62,10 @@ export function BackwardForwardPanel() {
             <ActionIcon
               variant="light"
               color="gray"
-              onClick={() => ops.forward()}>
+              onClick={e => {
+                e.stopPropagation()
+                goForward()
+              }}>
               <IconChevronRight />
             </ActionIcon>
           </m.div>

package/src/xyflow/EdgeMarkers.tsx

@@ -146,3 +146,5 @@ export const EdgeMarkers = {
   Dot,
   ODot
 }
+
+export type EdgeMarkerType = keyof typeof EdgeMarkers

package/src/xyflow/FitviewOnDiagramChange.tsx

@@ -1,21 +1,29 @@
-import { invariant } from '@likec4/core'
 import { useDebouncedEffect } from '@react-hookz/web'
 import { shallowEqual } from 'fast-equals'
-import { useEffect, useRef } from 'react'
+import { useRef, useState } from 'react'
 import { type DiagramState, type DiagramStoreApi, useDiagramState, useDiagramStoreApi } from '../state/hooks'
-import { useXYStore, useXYStoreApi, type XYStoreApi } from './hooks/useXYFlow'
-import type { XYFlowState } from './types'
-import { toDomPrecision } from './utils'
+import { useXYStore } from './hooks/useXYFlow'
 
-function selectDimensions(state: XYFlowState) {
+function selectXYFlowSize(state: { width: number; height: number }): string {
   return `${Math.round(state.width)}:${Math.round(state.height)}`
 }
 
-function FitViewOnViewportResize({ diagramApi, xyflowApi }: {
-  xyflowApi: XYStoreApi
+function selectDiagramsize({ view, fitViewPadding }: DiagramState) {
+  return [
+    view.bounds.x,
+    view.bounds.y,
+    view.bounds.width,
+    view.bounds.height,
+    fitViewPadding
+  ].map(Math.round).join(':')
+}
+
+function FitViewOnViewportResize({ diagramApi }: {
   diagramApi: DiagramStoreApi
 }) {
-  const dimensions = useXYStore(selectDimensions)
+  const xyflowsize = useXYStore(selectXYFlowSize)
+  const viewsize = useDiagramState(selectDiagramsize)
+  const dimensions = xyflowsize + viewsize
   const prevDimensionsRef = useRef(dimensions)
 
   useDebouncedEffect(
@@ -24,92 +32,51 @@ function FitViewOnViewportResize({ diagramApi, xyflowApi }: {
       if (focusedNodeId || prevDimensionsRef.current === dimensions) {
         return
       }
-      fitDiagram(300)
       prevDimensionsRef.current = dimensions
+      fitDiagram(250)
     },
-    [dimensions, diagramApi, xyflowApi],
-    300,
+    [dimensions, diagramApi],
+    250,
     1000
   )
 
   return null
 }
 
-function selector({ view, xyflowSynced, viewportChanged, lastOnNavigate, ...s }: DiagramState) {
-  const viewId = view.id + '_' + view.autoLayout + '_' + s.fitViewPadding
-
-  const waitCorrection = lastOnNavigate && lastOnNavigate.toView === view.id
-    && lastOnNavigate.positionCorrected === false
-  const elTo = waitCorrection ? view.nodes.find(n => n.id === lastOnNavigate.element.id) : undefined
-  if (waitCorrection && elTo) {
-    return {
-      viewId,
-      xyflowSynced,
-      viewportChanged,
-      waitCorrection: true,
-      elFrom: lastOnNavigate.element,
-      elTo
-    }
-  }
-
+function selector({ view, viewportChanged, fitViewPadding }: DiagramState) {
   return {
-    viewId,
-    xyflowSynced,
-    viewportChanged,
-    waitCorrection: false,
-    fromElement: null,
-    toElement: null
+    layoutId: view.id + '_' + view.autoLayout + '_' + fitViewPadding,
+    viewportNotMoved: !viewportChanged
   }
 }
 
 /**
- * Fits the view when the view changes and nodes are initialized
+ * Fits the view when diagram changes
  */
 export function FitViewOnDiagramChange() {
-  const xyflowApi = useXYStoreApi()
   const {
-    viewId: pendingViewId,
-    xyflowSynced,
-    viewportChanged,
-    waitCorrection,
-    elFrom,
-    elTo
+    layoutId,
+    viewportNotMoved
   } = useDiagramState(selector, shallowEqual)
   const diagramApi = useDiagramStoreApi()
-  const processedRef = useRef(pendingViewId)
-  const durationRef = useRef(300)
+  const [currentLayoutId, setCurrent] = useState(layoutId)
+
+  const requiresFit = layoutId !== currentLayoutId
 
-  useEffect(() => {
-    if (!xyflowSynced || pendingViewId === processedRef.current) {
-      return
-    }
-    if (waitCorrection) {
-      invariant(elTo, 'elTo should be defined')
-      invariant(elFrom, 'elFrom should be defined')
-      const { xyflow, lastOnNavigate } = diagramApi.getState()
-      invariant(lastOnNavigate, 'lastOnNavigate should be defined')
-      const fromPos = lastOnNavigate.elementScreenPosition
-      const toPos = xyflow.flowToScreenPosition({
-          x: elTo.position[0], // + elFrom.width / 2,
-          y: elTo.position[1] // + elFrom.height / 2
-        }),
-        diff = {
-          x: toDomPrecision(fromPos.x - toPos.x),
-          y: toDomPrecision(fromPos.y - toPos.y)
-        }
-      xyflowApi.getState().panBy(diff)
-      durationRef.current = 500
-      diagramApi.setState({ lastOnNavigate: null })
-      return
-    }
-    processedRef.current = pendingViewId
-    diagramApi.getState().fitDiagram(durationRef.current)
-    // Reset duration
-    durationRef.current = 300
-  }, [pendingViewId, xyflowSynced, waitCorrection])
+  useDebouncedEffect(
+    () => {
+      if (layoutId === currentLayoutId) {
+        return
+      }
+      setCurrent(layoutId)
+      diagramApi.getState().fitDiagram(450)
+    },
+    [requiresFit, diagramApi],
+    50
+  )
 
-  if (!viewportChanged && xyflowSynced) {
-    return <FitViewOnViewportResize xyflowApi={xyflowApi} diagramApi={diagramApi} />
+  if (viewportNotMoved && !requiresFit) {
+    return <FitViewOnViewportResize diagramApi={diagramApi} />
   }
   return null
 }

package/src/xyflow/SelectEdgesOnNodeFocus.tsx

@@ -1,6 +1,6 @@
 import { nonNullable } from '@likec4/core'
 import type { EdgeChange, NodeChange } from '@xyflow/react'
-import { getBoundsOfRects, getViewportForBounds, nodeToRect } from '@xyflow/system'
+import { getBoundsOfRects, getNodesBounds, getViewportForBounds, nodeToRect } from '@xyflow/system'
 import { useEffect } from 'react'
 import { useDiagramStoreApi } from '../state/useDiagramStore'
 import { MinZoom } from './const'

package/src/xyflow/XYFlow.tsx

@@ -1,6 +1,6 @@
 import { ReactFlow, useOnViewportChange } from '@xyflow/react'
-import { deepEqual as eq } from 'fast-equals'
-import { type CSSProperties, type PropsWithChildren, useCallback } from 'react'
+import { deepEqual as eq, shallowEqual } from 'fast-equals'
+import { type CSSProperties, type PropsWithChildren, useCallback, useMemo } from 'react'
 import type { DiagramState } from '../state/diagramStore'
 import { useDiagramState, useDiagramStoreApi } from '../state/useDiagramStore'
 import { MinZoom } from './const'
@@ -11,6 +11,7 @@ import { CompoundNode } from './nodes/compound'
 import { ElementNode } from './nodes/element'
 import { XYFlowEdge, XYFlowNode } from './types'
 import { useXYFlowEvents } from './XYFlowEvents'
+// import { useLogger } from '@mantine/hooks'
 
 const nodeTypes = {
   element: ElementNode,
@@ -23,8 +24,6 @@ const edgeTypes = {
 type XYFlowWrapperProps = PropsWithChildren<{
   colorMode?: 'system' | 'light' | 'dark'
   className?: string | undefined
-  defaultNodes: XYFlowNode[]
-  defaultEdges: XYFlowEdge[]
   style?: CSSProperties | undefined
 }>
 
@@ -39,15 +38,15 @@ type XYFlowWrapperProps = PropsWithChildren<{
 // }
 
 const selector = (s: DiagramState) => ({
+  nodes: s.xynodes,
+  edges: s.xyedges,
+  onInit: s.onInit,
+  onNodesChange: s.onNodesChange,
+  onEdgesChange: s.onEdgesChange,
   nodesSelectable: s.nodesSelectable || s.focusedNodeId !== null,
   nodesDraggable: s.nodesDraggable,
   fitView: s.fitViewEnabled,
-  fitViewOptions: {
-    minZoom: MinZoom,
-    maxZoom: 1,
-    padding: s.fitViewPadding,
-    includeHiddenNodes: true
-  },
+  fitViewPadding: s.fitViewPadding,
   hasOnNavigateTo: !!s.onNavigateTo,
   hasOnNodeClick: !!s.onNodeClick,
   hasOnNodeContextMenu: !!s.onNodeContextMenu,
@@ -55,24 +54,30 @@ const selector = (s: DiagramState) => ({
   hasOnEdgeContextMenu: !!s.onEdgeContextMenu,
   hasOnEdgeClick: !!s.onEdgeClick,
   zoomable: s.zoomable,
-  pannable: s.pannable
+  pannable: s.pannable,
+  // If fitView is not enabled
+  // And diagram starts with a negative x or y - we need to translate viewprot
+  translateX: s.fitViewEnabled ? 0 : -Math.min(s.view.bounds.x, 0),
+  translateY: s.fitViewEnabled ? 0 : -Math.min(s.view.bounds.y, 0)
 })
 
 export function XYFlow({
   colorMode = 'system',
   className,
   children,
-  defaultNodes,
-  defaultEdges,
   style
 }: XYFlowWrapperProps) {
   const xyflowApi = useXYStoreApi()
-  const diagramApi = useDiagramStoreApi()
   const {
+    nodes,
+    edges,
+    onInit,
+    onNodesChange,
+    onEdgesChange,
     nodesSelectable,
     nodesDraggable,
     fitView,
-    fitViewOptions,
+    fitViewPadding,
     pannable,
     zoomable,
     hasOnNodeClick,
@@ -80,8 +85,14 @@ export function XYFlow({
     hasOnNodeContextMenu,
     hasOnCanvasContextMenu,
     hasOnEdgeContextMenu,
-    hasOnEdgeClick
-  } = useDiagramState(selector, eq)
+    translateX,
+    translateY
+  } = useDiagramState(selector, shallowEqual)
+
+  // useLogger('XYFlow',[
+  //   nodes,
+  //   edges,
+  // ])
 
   const layoutConstraints = useLayoutConstraints()
 
@@ -95,12 +106,10 @@ export function XYFlow({
    */
   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] })
+      const roundedX = Math.round(x),
+        roundedY = Math.round(y)
+      if (x !== roundedX || y !== roundedY) {
+        xyflowApi.setState({ transform: [roundedX, roundedY, zoom] })
       }
     }
   })
@@ -110,8 +119,8 @@ export function XYFlow({
       className={className}
       style={style}
       {...colorMode && { colorMode }}
-      defaultNodes={defaultNodes}
-      defaultEdges={defaultEdges}
+      nodes={nodes}
+      edges={edges}
       nodeTypes={nodeTypes}
       edgeTypes={edgeTypes}
       zoomOnPinch={zoomable}
@@ -122,26 +131,43 @@ export function XYFlow({
       maxZoom={zoomable ? 1.9 : 1}
       minZoom={zoomable ? MinZoom : 1}
       fitView={fitView}
-      fitViewOptions={fitViewOptions}
+      fitViewOptions={useMemo(() => ({
+        minZoom: MinZoom,
+        maxZoom: 1,
+        padding: fitViewPadding,
+        includeHiddenNodes: true
+      }), [fitViewPadding])}
+      {...(!fitView && {
+        viewport: {
+          x: translateX,
+          y: translateY,
+          zoom: 1
+        }
+      })}
       preventScrolling={zoomable || pannable}
       defaultMarkerColor="var(--xy-edge-stroke)"
       noDragClassName="nodrag"
       noPanClassName="nopan"
       panOnScroll={pannable}
       panOnDrag={pannable}
+      {...(!pannable && {
+        selectionKeyCode: null
+      })}
       elementsSelectable={nodesSelectable}
       nodesFocusable={nodesDraggable || nodesSelectable || hasOnNodeClick || hasOnNavigateTo}
-      edgesFocusable={hasOnEdgeClick}
+      edgesFocusable={false}
       nodesDraggable={nodesDraggable}
       {...nodesDraggable && {
         onNodeDragStart: layoutConstraints.onNodeDragStart,
         onNodeDrag: layoutConstraints.onNodeDrag,
         onNodeDragStop: layoutConstraints.onNodeDragStop
       }}
+      nodeDragThreshold={3}
       zoomOnDoubleClick={false}
-      elevateNodesOnSelect={false} // or edges are not visible after select
+      elevateNodesOnSelect={false} // or edges are not visible after select\
       selectNodesOnDrag={false} // or weird camera movement
-      selectionKeyCode={null}
+      onNodesChange={onNodesChange}
+      onEdgesChange={onEdgesChange}
       onDoubleClick={handlers.onDoubleClick}
       onPaneClick={handlers.onPaneClick}
       onMoveEnd={handlers.onMoveEnd}
@@ -152,9 +178,8 @@ export function XYFlow({
       onNodeClick={handlers.onNodeClick}
       onNodeDoubleClick={handlers.onNodeDoubleClick}
       onEdgeClick={handlers.onEdgeClick}
-      onInit={useCallback(() => {
-        diagramApi.setState({ initialized: true }, false, 'initialized')
-      }, [diagramApi])}
+      onEdgeDoubleClick={handlers.onEdgeDoubleClick}
+      onInit={onInit}
       {...(hasOnNodeContextMenu && {
         onNodeContextMenu: handlers.onNodeContextMenu
       })}

package/src/xyflow/XYFlowEvents.tsx

@@ -1,5 +1,7 @@
+import { extractStep } from '@likec4/core'
 import type { ReactFlowProps } from '@xyflow/react'
 import { useMemo, useRef } from 'react'
+import { isNonNullish, isTruthy } from 'remeda'
 import type { Simplify } from 'type-fest'
 import { useDiagramStoreApi } from '../state/useDiagramStore'
 import type { XYFlowEdge, XYFlowNode } from './types'
@@ -13,6 +15,7 @@ export type XYFlowEventHandlers = Simplify<
       | 'onNodeClick'
       | 'onNodeDoubleClick'
       | 'onEdgeClick'
+      | 'onEdgeDoubleClick'
       | 'onMoveEnd'
       | 'onNodeContextMenu'
       | 'onEdgeContextMenu'
@@ -110,22 +113,20 @@ export function useXYFlowEvents() {
       },
       onNodeClick: (event, xynode) => {
         const {
-          zoomable,
-          fitViewEnabled,
           focusedNodeId,
           fitDiagram,
           focusOnNode,
           onNodeClick,
+          enableFocusMode,
           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
         const shallChangeFocus = !!focusedNodeId && focusedNodeId !== xynode.id
         // if user clicked on the same node twice in a short time, focus on it
         const clickedRecently = lastClickedNodeId === xynode.id && lastClickWasRecent()
-        if (focusPossible) {
+        if (enableFocusMode) {
           let stopPropagation = false
           switch (true) {
             case !focusedNodeId && clickedRecently:
@@ -153,15 +154,14 @@ export function useXYFlowEvents() {
       onNodeDoubleClick: (event, xynode) => {
         const {
           focusedNodeId,
-          zoomable,
-          fitViewEnabled,
+          enableFocusMode,
           fitDiagram,
           focusOnNode,
           setLastClickedNode
         } = diagramApi.getState()
         setLastClickedNode(xynode.id)
         lastClickTimestamp.current = Date.now()
-        if (!!focusedNodeId || (zoomable && fitViewEnabled)) {
+        if (isNonNullish(focusedNodeId) || enableFocusMode) {
           // if we are already focused on the node, cancel
           if (focusedNodeId === xynode.id) {
             fitDiagram()
@@ -172,14 +172,36 @@ export function useXYFlowEvents() {
         }
       },
       onEdgeClick: (event, xyedge) => {
-        diagramApi.getState().setLastClickedEdge(xyedge.id)
         const {
+          lastClickedEdgeId,
+          isDynamicView,
+          enableDynamicViewWalkthrough,
+          activateDynamicStep,
+          activeDynamicViewStep,
           focusedNodeId,
           focusOnNode,
-          onEdgeClick
+          onEdgeClick,
+          setLastClickedEdge
         } = diagramApi.getState()
+        if (lastClickedEdgeId !== xyedge.id) {
+          setLastClickedEdge(xyedge.id)
+        }
+        const isNotAFirstClick = lastClickedEdgeId === xyedge.id
+        const isEdgeOfFocusedNode = isTruthy(focusedNodeId)
+          && (focusedNodeId === xyedge.source || focusedNodeId === xyedge.target)
+        if (
+          isDynamicView && enableDynamicViewWalkthrough
+          && (isEdgeOfFocusedNode || isNotAFirstClick || isNonNullish(activeDynamicViewStep))
+        ) {
+          const nextStep = extractStep(xyedge.data.edge.id)
+          if (activeDynamicViewStep !== nextStep) {
+            activateDynamicStep(nextStep)
+            event.stopPropagation()
+            return
+          }
+        }
         // 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)) {
+        if (isEdgeOfFocusedNode) {
           focusOnNode(focusedNodeId === xyedge.source ? xyedge.target : xyedge.source)
           if (!onEdgeClick) {
             // user did not provide a custom handler, stop propagation
@@ -192,6 +214,32 @@ export function useXYFlowEvents() {
           event
         })
       },
+      onEdgeDoubleClick: (event, xyedge) => {
+        diagramApi.getState().setLastClickedEdge(xyedge.id)
+        const {
+          enableFocusMode,
+          isDynamicView,
+          enableDynamicViewWalkthrough,
+          focusOnNode,
+          activateDynamicStep,
+          activeDynamicViewStep
+        } = diagramApi.getState()
+        // if we are in dynamic view, and clicked on an edge, activate the step
+        if (isDynamicView && enableDynamicViewWalkthrough) {
+          const nextStep = extractStep(xyedge.data.edge.id)
+          if (activeDynamicViewStep !== nextStep) {
+            activateDynamicStep(extractStep(xyedge.data.edge.id))
+            event.stopPropagation()
+          }
+          return
+        }
+
+        if (enableFocusMode) {
+          focusOnNode(xyedge.source)
+          event.stopPropagation()
+          return
+        }
+      },
       onMoveEnd: (event, _viewport) => {
         // if event is present, the move was triggered by user
         const viewportChanged = !!event

package/src/xyflow/XYFlowInner.tsx

@@ -1,7 +1,7 @@
 import { Controls } from '@xyflow/react'
 import { shallowEqual } from 'fast-equals'
 import { memo, type PropsWithChildren } from 'react'
-import { isNonNull } from 'remeda'
+import { isNonNullish } from 'remeda'
 import type { LikeC4DiagramProperties } from '../LikeC4Diagram.props'
 import { useDiagramState } from '../state/useDiagramStore'
 import { BackwardForwardPanel } from '../ui/BackwardForwardPanel'
@@ -15,7 +15,6 @@ type XYFlowInnerProps = PropsWithChildren<{
   controls: boolean
   showDiagramTitle: boolean
   showNavigationButtons: boolean
-  enableDynamicViewWalkthrough: boolean
 }>
 
 export const XYFlowInner = memo(function XYFlowInnerR({
@@ -23,22 +22,23 @@ export const XYFlowInner = memo(function XYFlowInnerR({
   background,
   controls,
   showDiagramTitle,
-  showNavigationButtons,
-  enableDynamicViewWalkthrough
+  showNavigationButtons
 }: XYFlowInnerProps) {
   const {
     isDynamicView,
     isDynamicViewActive,
-    readonly
+    readonly,
+    enableDynamicViewWalkthrough
   } = useDiagramState(s => ({
-    isDynamicView: s.isDynamicView(),
+    isDynamicView: s.isDynamicView,
     readonly: s.readonly,
-    isDynamicViewActive: isNonNull(s.activeDynamicViewStep)
+    enableDynamicViewWalkthrough: s.enableDynamicViewWalkthrough,
+    isDynamicViewActive: isNonNullish(s.activeDynamicViewStep)
   }))
 
   const isBgWithPattern = background !== 'transparent' && background !== 'solid'
 
-  const isDiagramTitleVisible = !isDynamicViewActive && showDiagramTitle === true
+  const isDiagramTitleVisible = showDiagramTitle === true && !isDynamicViewActive
 
   return (
     <>