@likec4/diagram 1.0.0-next.2 → 1.0.0

package/src/xyflow/FitviewOnDiagramChange.tsx

@@ -0,0 +1,93 @@
+import { useDebouncedEffect, useDebouncedState, useRafEffect } from '@react-hookz/web'
+import { useNodesInitialized } from '@xyflow/react'
+import { shallowEqual } from 'fast-equals'
+import { memo, useEffect, useRef, useState } from 'react'
+import { type DiagramState, type DiagramStoreApi, useDiagramState, useDiagramStoreApi } from '../state'
+import { useXYStore } from './hooks'
+import type { XYFlowState } from './types'
+
+function selectDimensions(state: XYFlowState) {
+  return `${Math.round(state.width)}:${Math.round(state.height)}`
+}
+
+function FitViewOnViewportResize({ diagramApi }: { diagramApi: DiagramStoreApi }) {
+  const dimensions = useXYStore(selectDimensions)
+  const prevDimensionsRef = useRef(dimensions)
+
+  useDebouncedEffect(
+    () => {
+      if (prevDimensionsRef.current === dimensions) {
+        return
+      }
+      diagramApi.getState().fitDiagram()
+      prevDimensionsRef.current = dimensions
+    },
+    [dimensions],
+    150
+  )
+
+  return null
+}
+
+const diagramChangeId = (s: DiagramState) => s.view.id + '_' + s.view.autoLayout + '_' + s.fitViewPadding
+
+/**
+ * Fits the view when the view changes and nodes are initialized
+ */
+function FitViewOnDiagramChanges() {
+  const diagramApi = useDiagramStoreApi()
+  const [viewportMoved, setViewportMoved] = useState(diagramApi.getState().viewportChanged)
+  const [processedChangeId, setProcessed] = useState(diagramChangeId(diagramApi.getState()))
+  const [pendingChangeId, setPending] = useDebouncedState(processedChangeId, 100)
+
+  const isReady = useNodesInitialized({
+    includeHiddenNodes: true
+  })
+
+  useEffect(
+    () => {
+      return diagramApi.subscribe(
+        s => ({
+          viewportMoved: s.viewportChanged,
+          changeid: diagramChangeId(s)
+        }),
+        ({ viewportMoved, changeid }) => {
+          setPending(changeid)
+          setViewportMoved(viewportMoved)
+        },
+        {
+          equalityFn: shallowEqual
+        }
+      )
+    },
+    [diagramApi]
+  )
+
+  useRafEffect(
+    () => {
+      if (!isReady || processedChangeId === pendingChangeId) {
+        return
+      }
+      diagramApi.getState().fitDiagram()
+      setProcessed(pendingChangeId)
+    },
+    [isReady, processedChangeId, pendingChangeId]
+  )
+
+  if (!viewportMoved && isReady) {
+    return <FitViewOnViewportResize diagramApi={diagramApi} />
+  }
+  return null
+}
+
+const selectFitViewFlag = (s: DiagramState) => s.fitViewEnabled
+
+export const FitViewOnDiagramChange = memo(() => {
+  const fitView = useDiagramState(selectFitViewFlag)
+
+  if (!fitView) {
+    return null
+  }
+
+  return <FitViewOnDiagramChanges />
+})

package/src/xyflow/SyncWithDiagram.tsx

@@ -0,0 +1,113 @@
+import { deepEqual as eq, shallowEqual } from 'fast-equals'
+import { useXYFlow, useXYStoreApi } from './hooks'
+import type { XYFlowNode } from './types'
+
+import { memo, useEffect } from 'react'
+import { useDiagramStoreApi } from '../state'
+import { diagramViewToXYFlowData } from './diagram-to-xyflow'
+import { toDomPrecision } from './utils'
+
+const isSameNode = (a: XYFlowNode) => (b: XYFlowNode) =>
+  a.id === b.id && a.type === b.type && Object.is(a.parentId, b.parentId)
+
+/**
+ * Syncs the diagram state with the XYFlow instance
+ */
+export const SyncWithDiagram = memo(() => {
+  const xyflow = useXYFlow()
+  const xyflowApi = useXYStoreApi()
+  const diagramStoreApi = useDiagramStoreApi()
+
+  useEffect(() => {
+    return diagramStoreApi.subscribe(
+      // selector
+      state => ({
+        viewId: state.view.id,
+        nodes: state.view.nodes,
+        edges: state.view.edges,
+        draggable: state.nodesDraggable,
+        selectable: state.nodesSelectable
+      }),
+      // listener
+      ({ viewId, nodes, edges, ...opts }) => {
+        const { lastOnNavigate } = diagramStoreApi.getState()
+        const updates = diagramViewToXYFlowData({ nodes, edges }, opts)
+
+        xyflow.setNodes(prev =>
+          updates.nodes.map(update => {
+            const existing = prev.find(isSameNode(update))
+            if (existing) {
+              if (eq(existing.data.element, update.data.element)) {
+                return existing
+              }
+              return {
+                ...existing,
+                ...update
+              }
+            }
+            return update
+          })
+        )
+
+        xyflow.setEdges(prev =>
+          updates.edges.map(update => {
+            const existing = prev.find(e => e.id === update.id)
+            if (existing) {
+              return eq(existing.data, update.data) ? existing : {
+                ...existing,
+                ...update
+              }
+            }
+            return update
+          })
+        )
+
+        if (lastOnNavigate?.toView === viewId && !lastOnNavigate.positionCorrected) {
+          const elFrom = lastOnNavigate.element
+          const elTo = nodes.find(n => n.id === elFrom.id)
+          if (elTo) {
+            const centerFrom = lastOnNavigate.elementCenterScreenPosition
+            const nextZoom = Math.min(elFrom.width / elTo.width, elFrom.height / elTo.height)
+
+            requestAnimationFrame(() => {
+              requestAnimationFrame(() => {
+                const v = xyflow.getViewport()
+                if (nextZoom < v.zoom) {
+                  xyflow.setViewport({
+                    x: v.x,
+                    y: v.y,
+                    zoom: nextZoom
+                  })
+                }
+                const centerTo = xyflow.flowToScreenPosition({
+                    x: elTo.position[0] + elTo.width / 2,
+                    y: elTo.position[1] + elTo.height / 2
+                  }),
+                  diff = {
+                    x: toDomPrecision(centerFrom.x - centerTo.x),
+                    y: toDomPrecision(centerFrom.y - centerTo.y)
+                  }
+                xyflowApi.getState().panBy(diff)
+              })
+            })
+          }
+          diagramStoreApi.setState(
+            {
+              lastOnNavigate: {
+                ...lastOnNavigate,
+                positionCorrected: true
+              }
+            },
+            false,
+            'positionCorrected'
+          )
+        }
+      },
+      {
+        equalityFn: shallowEqual
+      }
+    )
+  }, [xyflow, xyflowApi, diagramStoreApi])
+
+  return null
+})

package/src/xyflow/XYFlowBackground.tsx

@@ -0,0 +1,33 @@
+import { nonexhaustive } from '@likec4/core'
+import { Background, type BackgroundProps, BackgroundVariant } from '@xyflow/react'
+import { deepEqual } from 'fast-equals'
+import { memo } from 'react'
+import type { OverrideProperties } from 'type-fest'
+
+export type XYBackgroundVariant = 'dots' | 'lines' | 'cross'
+export type XYBackgroundProps =
+  | XYBackgroundVariant
+  | OverrideProperties<BackgroundProps, {
+    variant: XYBackgroundVariant
+  }>
+
+function literalToEnum(value: XYBackgroundVariant): BackgroundVariant {
+  switch (value) {
+    case 'dots':
+      return BackgroundVariant.Dots
+    case 'lines':
+      return BackgroundVariant.Lines
+    case 'cross':
+      return BackgroundVariant.Cross
+    default:
+      nonexhaustive(value)
+  }
+}
+
+export const XYFlowBackground = memo<{ background: XYBackgroundProps }>(({ background }) => {
+  if (typeof background === 'string') {
+    return <Background variant={literalToEnum(background)} />
+  }
+  const { variant, ...rest } = background
+  return <Background variant={literalToEnum(variant)} {...rest} />
+}, deepEqual)

package/src/xyflow/XYFlowEvents.tsx

@@ -0,0 +1,100 @@
+import type { EdgeMouseHandler, NodeMouseHandler, OnMoveEnd } from '@xyflow/react'
+import type { MouseEvent as ReactMouseEvent } from 'react'
+import { useMemo, useRef } from 'react'
+import { useDiagramStoreApi } from '../state'
+import { useXYStoreApi } from './hooks'
+import type { XYFlowEdge, XYFlowNode } from './types'
+
+type XYFlowEventHandlers = {
+  onPaneClick: (event: ReactMouseEvent) => void
+  onNodeContextMenu: NodeMouseHandler<XYFlowNode>
+  onEdgeContextMenu: EdgeMouseHandler<XYFlowEdge>
+  onPaneContextMenu: (event: ReactMouseEvent | MouseEvent) => void
+  onNodeClick: NodeMouseHandler<XYFlowNode>
+  onEdgeClick: EdgeMouseHandler<XYFlowEdge>
+  // onMoveStart: OnMoveStart
+  onMoveEnd: OnMoveEnd
+}
+
+export function useXYFlowEvents() {
+  const diagramApi = useDiagramStoreApi()
+  const xyflowApi = useXYStoreApi()
+
+  const dblclickTimeout = useRef<number>()
+
+  return useMemo<XYFlowEventHandlers>(() => ({
+    onPaneClick: (event) => {
+      diagramApi.setState(
+        {
+          lastClickedNodeId: null,
+          lastClickedEdgeId: null
+        },
+        false,
+        'onPaneClick'
+      )
+      const diagramState = diagramApi.getState()
+
+      if (dblclickTimeout.current) {
+        window.clearTimeout(dblclickTimeout.current)
+        dblclickTimeout.current = undefined
+        if (diagramState.onCanvasDblClick) {
+          diagramState.onCanvasDblClick(event)
+          return
+        }
+        diagramState.onCanvasClick?.(event)
+        if (diagramState.fitViewEnabled && diagramState.viewportChanged) {
+          diagramState.fitDiagram()
+        }
+        return
+      }
+
+      dblclickTimeout.current = window.setTimeout(() => {
+        dblclickTimeout.current = undefined
+        diagramApi.getState().onCanvasClick?.(event)
+      }, 300)
+    },
+    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)
+      diagramApi.getState().onNodeClick?.({
+        element: xynode.data.element,
+        xynode,
+        event
+      })
+    },
+    onEdgeClick: (event, xyedge) => {
+      diagramApi.getState().setLastClickedEdge(xyedge.id)
+      diagramApi.getState().onEdgeClick?.({
+        relation: xyedge.data.edge,
+        xyedge,
+        event
+      })
+    },
+    onMoveEnd: (event, _viewport) => {
+      const viewportChanged = !!event
+      if (viewportChanged !== diagramApi.getState().viewportChanged) {
+        diagramApi.setState({ viewportChanged }, false, `viewport-changed: ${viewportChanged}`)
+      }
+    }
+  }), [diagramApi, xyflowApi])
+}

package/src/xyflow/XYFlowWrapper.tsx

@@ -0,0 +1,166 @@
+import { useMantineColorScheme } from '@mantine/core'
+import { Controls, ReactFlow } from '@xyflow/react'
+import { type CSSProperties, memo, type PropsWithChildren } from 'react'
+import type { SetNonNullable, Simplify } from 'type-fest'
+import type { LikeC4DiagramProperties } from '../LikeC4Diagram.props'
+import { type DiagramState, useDiagramState, useDiagramStoreApi } from '../state'
+import { MinZoom } from './const'
+import { RelationshipEdge } from './edges/RelationshipEdge'
+import { useLayoutConstraints } from './hooks/useLayoutConstraints'
+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 = {
+  element: ElementNode,
+  compound: CompoundNode
+}
+const edgeTypes = {
+  relationship: RelationshipEdge
+}
+
+type OnlyExpectedProps = Required<
+  Pick<
+    LikeC4DiagramProperties,
+    | 'className'
+    | 'controls'
+    | 'pannable'
+    | 'zoomable'
+    | 'background'
+  >
+>
+
+type XYFlowWrapperProps = Simplify<
+  PropsWithChildren<
+    SetNonNullable<OnlyExpectedProps> & {
+      defaultNodes: XYFlowNode[]
+      defaultEdges: XYFlowEdge[]
+      style?: CSSProperties | undefined
+    }
+  >
+>
+
+const selector = (s: DiagramState) => ({
+  nodesSelectable: s.nodesSelectable,
+  nodesDraggable: s.nodesDraggable,
+  fitView: s.fitViewEnabled,
+  fitViewPadding: s.fitViewPadding,
+  hasOnNavigateTo: !!s.onNavigateTo,
+  hasOnNodeClick: !!s.onNodeClick,
+  hasOnNodeContextMenu: !!s.onNodeContextMenu,
+  hasOnCanvasContextMenu: !!s.onCanvasContextMenu,
+  hasOnEdgeContextMenu: !!s.onEdgeContextMenu,
+  hasOnEdgeClick: !!s.onEdgeClick,
+  hasOnCanvasClick: !!s.onCanvasClick || !!s.onCanvasDblClick
+})
+
+function XYFlowWrapper({
+  className,
+  children,
+  defaultNodes,
+  defaultEdges,
+  pannable,
+  zoomable,
+  controls,
+  background,
+  style
+}: XYFlowWrapperProps) {
+  const diagramApi = useDiagramStoreApi()
+  const {
+    nodesSelectable,
+    nodesDraggable,
+    fitView,
+    fitViewPadding,
+    ...editor
+  } = useDiagramState(selector)
+
+  const layoutConstraints = useLayoutConstraints()
+
+  const handlers = useXYFlowEvents()
+  const isBgWithPattern = background !== 'transparent' && background !== 'solid'
+
+  const { colorScheme } = useMantineColorScheme()
+  const colorMode = colorScheme !== 'auto' ? colorScheme : undefined
+
+  return (
+    <ReactFlow<XYFlowNode, XYFlowEdge>
+      className={className}
+      style={style}
+      {...colorMode && { colorMode }}
+      defaultNodes={defaultNodes}
+      defaultEdges={defaultEdges}
+      nodeTypes={nodeTypes}
+      edgeTypes={edgeTypes}
+      zoomOnPinch={zoomable}
+      zoomOnScroll={!pannable && zoomable}
+      {...(!zoomable && {
+        zoomActivationKeyCode: null
+      })}
+      maxZoom={zoomable ? 1.9 : 1}
+      minZoom={zoomable ? MinZoom : 1}
+      fitView={fitView}
+      fitViewOptions={{
+        minZoom: MinZoom,
+        maxZoom: 1,
+        padding: fitViewPadding,
+        includeHiddenNodes: true
+      }}
+      preventScrolling={zoomable || pannable}
+      defaultMarkerColor="var(--xy-edge-stroke)"
+      noDragClassName="nodrag"
+      noPanClassName="nopan"
+      panOnScroll={pannable}
+      panOnDrag={pannable}
+      elementsSelectable={nodesSelectable}
+      nodesFocusable={nodesDraggable || nodesSelectable || editor.hasOnNodeClick || editor.hasOnNavigateTo}
+      edgesFocusable={editor.hasOnEdgeClick}
+      {...(!nodesSelectable && {
+        selectionKeyCode: null
+      })}
+      nodesDraggable={nodesDraggable}
+      {...(nodesDraggable && layoutConstraints)}
+      zoomOnDoubleClick={false}
+      elevateNodesOnSelect={false} // or edges are not visible after select
+      selectNodesOnDrag={false} // or weird camera movement
+      onPaneClick={handlers.onPaneClick}
+      {...(editor.hasOnNodeClick && {
+        onNodeClick: handlers.onNodeClick
+      })}
+      {...(editor.hasOnEdgeClick && {
+        onEdgeClick: handlers.onEdgeClick
+      })}
+      onMoveEnd={handlers.onMoveEnd}
+      onInit={() => {
+        diagramApi.setState({ initialized: true }, false, 'initialized')
+      }}
+      onNodeMouseEnter={(_event, node) => {
+        diagramApi.getState().setHoveredNode(node.id)
+      }}
+      onNodeMouseLeave={() => {
+        diagramApi.getState().setHoveredNode(null)
+      }}
+      onEdgeMouseEnter={(_event, edge) => {
+        diagramApi.getState().setHoveredEdge(edge.id)
+      }}
+      onEdgeMouseLeave={() => {
+        diagramApi.getState().setHoveredEdge(null)
+      }}
+      {...(editor.hasOnNodeContextMenu && {
+        onNodeContextMenu: handlers.onNodeContextMenu
+      })}
+      {...(editor.hasOnEdgeContextMenu && {
+        onEdgeContextMenu: handlers.onEdgeContextMenu
+      })}
+      {...(editor.hasOnCanvasContextMenu && {
+        onPaneContextMenu: handlers.onPaneContextMenu
+      })}>
+      {isBgWithPattern && <XYFlowBackground background={background} />}
+      {controls && <Controls />}
+      {children}
+    </ReactFlow>
+  )
+}
+
+export const XYFlow = memo(XYFlowWrapper) as typeof XYFlowWrapper

package/src/xyflow/const.ts

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