@likec4/diagram 1.15.1 → 1.17.0

package/src/overlays/relationships-of/RelationshipsXYFlow.tsx

@@ -1,21 +1,31 @@
-import { type Fqn, isAncestor, type Relation } from '@likec4/core'
+import { delay, type DiagramView, type Fqn, isAncestor, type Relation } from '@likec4/core'
 import { Box, Button, Group, SegmentedControl, Space, Text } from '@mantine/core'
-import { useLocalStorage, useStateHistory } from '@mantine/hooks'
-import { useDebouncedCallback, useSyncedRef } from '@react-hookz/web'
+import { useId, useLocalStorage, useStateHistory } from '@mantine/hooks'
+import { useDebouncedCallback, useDeepCompareEffect, useSyncedRef } from '@react-hookz/web'
 import { IconArrowLeft, IconArrowRight } from '@tabler/icons-react'
 import {
+  Background,
+  BackgroundVariant,
   getViewportForBounds,
   Panel,
   ReactFlow,
   type ReactFlowInstance,
+  type ReactFlowProps,
+  ReactFlowProvider,
+  type ReactFlowState,
+  useOnViewportChange,
   useReactFlow,
+  useStore,
   useStoreApi
 } from '@xyflow/react'
 import { getNodeDimensions } from '@xyflow/system'
-import { memo, useEffect, useRef } from 'react'
-import { map, only, prop, unique } from 'remeda'
+import { memo, type PropsWithChildren, useEffect, useRef, useState } from 'react'
+import { isNullish, map, omit, only, prop, setPath, unique } from 'remeda'
+import { useUpdateEffect } from '../../hooks'
 import { useDiagramStoreApi } from '../../hooks/useDiagramState'
+import { centerXYInternalNode } from '../../xyflow/utils'
 import { useOverlayDialog } from '../OverlayContext'
+import { cssReactflowMarker } from '../Overlays.css'
 import type { XYFlowTypes } from './_types'
 import { SelectElement } from './SelectElement'
 import { useLayoutedRelationships, ZIndexes } from './use-layouted-relationships'
@@ -33,8 +43,11 @@ const edgeTypes = {
   relation: RelationshipEdge
 }
 
-const findSubjectNode = (nodes: XYFlowTypes.Node[]) =>
-  nodes.find((n): n is XYFlowTypes.ElementNode => n.type === 'element' && n.data.column === 'subject')
+/**
+ * Root node in 'subjects' column
+ */
+const findRootSubject = (nodes: XYFlowTypes.Node[]) =>
+  nodes.find((n): n is XYFlowTypes.ElementNode => n.data.column === 'subjects' && isNullish(n.parentId))
 
 const resetDimmedAndHovered = (xyflow: ReactFlowInstance<XYFlowTypes.Node, XYFlowTypes.Edge>) => {
   xyflow.setEdges(edges =>
@@ -80,59 +93,90 @@ const onlyOneUnique = <T extends keyof Relation>(
   return only(unique(map(data.relations, prop(property))))
 }
 
-export const RelationshipsXYFlow = memo<{ subjectId: Fqn }>(function RelationshipsXYFlow({ subjectId }) {
-  const diagramStore = useDiagramStoreApi()
-  const lastClickedNodeRef = useRef<XYFlowTypes.NonEmptyNode | null>(null)
-  const [_scope, setScope] = useLocalStorage<'global' | 'view'>({
-    key: 'likec4:scope-relationships-of',
-    getInitialValueInEffect: false,
-    defaultValue: 'view'
-  })
-  const {
-    view,
-    viewIncludesSubject,
-    edges,
-    nodes,
-    subject,
-    bounds
-  } = useLayoutedRelationships(subjectId, _scope)
-  const scope = viewIncludesSubject ? _scope : 'global'
-  const showSubjectWarning = !viewIncludesSubject && _scope === 'view'
+type RelationshipsXYFlowProps =
+  & PropsWithChildren<{
+    subjectId: Fqn
+    view: DiagramView
+    nodes: XYFlowTypes.Node[]
+    edges: XYFlowTypes.Edge[]
+    bounds: {
+      x: number
+      y: number
+      width: number
+      height: number
+    }
+    viewportPadding?: number | undefined
+  }>
+  & Pick<
+    ReactFlowProps<XYFlowTypes.Node, XYFlowTypes.Edge>,
+    | 'onNodeClick'
+    | 'elementsSelectable'
+    | 'maxZoom'
+    | 'minZoom'
+  >
+const selectContainerViewport = (s: ReactFlowState) => `${s.width}x${s.height}`
 
-  const [historySubjectId, historyOps, { history, current }] = useStateHistory(subject.id)
+function RelationshipsXYFlowWrapped({
+  subjectId,
+  view,
+  nodes,
+  edges,
+  bounds,
+  children,
+  maxZoom = 2,
+  minZoom = 0.05,
+  viewportPadding = 0.1,
+  ...rest
+}: RelationshipsXYFlowProps) {
+  const id = useId()
+
+  const lastClickedNodeRef = useRef<XYFlowTypes.NonEmptyNode | null>(null)
 
   const xyflow = useReactFlow<XYFlowTypes.Node, XYFlowTypes.Edge>()
   const xystore = useStoreApi<XYFlowTypes.Node, XYFlowTypes.Edge>()
-  const overlay = useOverlayDialog()
 
-  useEffect(() => {
-    if (historySubjectId !== subject.id) {
-      historyOps.set(subject.id)
-    }
-  }, [subject.id])
+  const [zoomOnDoubleClick, setZoomOnDoubleClick] = useState(true)
 
-  useEffect(() => {
-    if (historySubjectId !== subject.id) {
-      overlay.openOverlay({
-        relationshipsOf: historySubjectId
-      })
+  const containerviewport = useStore(selectContainerViewport)
+
+  /**
+   * WORKAROUND - Called on viewport change
+   * Viewport transform is not rounded to integers which results in blurry nodes on some resolution
+   * https://github.com/xyflow/xyflow/issues/3282
+   * https://github.com/likec4/likec4/issues/734
+   */
+  useOnViewportChange({
+    onEnd: ({ x, y, zoom }) => {
+      const roundedX = Math.round(x),
+        roundedY = Math.round(y)
+      if (x !== roundedX || y !== roundedY) {
+        xystore.setState({ transform: [roundedX, roundedY, zoom] })
+      }
+      setZoomOnDoubleClick(zoom < 0.7)
     }
-  }, [historySubjectId])
+  })
+
+  const initialFitviewFlagRef = useRef(false)
+  const viewBoundsRef = useSyncedRef(bounds)
 
   const fitview = useDebouncedCallback(
     () => {
-      xyflow.fitView({
-        padding: 0.2,
-        includeHiddenNodes: true,
-        maxZoom: 1,
-        duration: 500
-      })
+      const { width, height } = xystore.getState()
+      xyflow.setViewport(
+        getViewportForBounds(viewBoundsRef.current, width, height, minZoom, maxZoom, viewportPadding),
+        initialFitviewFlagRef.current ? { duration: 500 } : undefined
+      )
+      initialFitviewFlagRef.current = true
     },
-    [xyflow],
-    150
+    [xyflow, minZoom, maxZoom, viewportPadding],
+    100
   )
 
-  useEffect(() => {
+  useUpdateEffect(() => {
+    fitview()
+  }, [containerviewport])
+
+  useDeepCompareEffect(() => {
     const {
       nodes: _nodes,
       edges: _edges,
@@ -142,23 +186,24 @@ export const RelationshipsXYFlow = memo<{ subjectId: Fqn }>(function Relationshi
       height
     } = xystore.getState()
 
-    const nextSubjectNode = findSubjectNode(nodes)
-    const currentSubjectNode = findSubjectNode(_nodes)
+    const nextSubjectNode = findRootSubject(nodes)
+    const currentSubjectNode = findRootSubject(_nodes)
 
     // If subject node is the same, don't animate
-    if (nextSubjectNode?.data.fqn === currentSubjectNode?.data.fqn) {
-      setNodes(nodes)
+    if (currentSubjectNode && nextSubjectNode?.data.fqn === currentSubjectNode.data.fqn) {
+      setNodes(map(nodes, setPath(['data', 'initialAnimation'], false)))
       setEdges(edges)
+      fitview()
       return
     }
 
     if (!nextSubjectNode) {
       console.error('Subject node not found')
-    } else if (nextSubjectNode.data.fqn !== subject.id) {
-      console.error(`Subject node mismatch, expected: ${subject.id} got: ${nextSubjectNode.data.fqn}`)
+    } else if (nextSubjectNode.data.fqn !== subjectId) {
+      console.error(`Subject node mismatch, expected: ${subjectId} got: ${nextSubjectNode.data.fqn}`)
     }
 
-    const nextzoom = getViewportForBounds(bounds, width, height, 0.2, 1, 0.2).zoom
+    const nextzoom = getViewportForBounds(bounds, width, height, minZoom, maxZoom, viewportPadding).zoom
 
     const nextSubjectCenter = nextSubjectNode && {
       x: nextSubjectNode.position.x + (nextSubjectNode.width ?? 0) / 2,
@@ -166,17 +211,44 @@ export const RelationshipsXYFlow = memo<{ subjectId: Fqn }>(function Relationshi
     }
 
     const existingNode = lastClickedNodeRef.current
-      ?? xyflow.getNodes().find(n => n.type !== 'empty' && n.data.column !== 'subject' && n.data.fqn === subject.id)
+      ?? xyflow.getNodes().find(n => n.type !== 'empty' && n.data.column !== 'subjects' && n.data.fqn === subjectId)
     lastClickedNodeRef.current = null
     // Animate from existing node to next subject node
-    if (nextSubjectCenter && existingNode) {
+    if (nextSubjectCenter && existingNode && currentSubjectNode) {
+      // Center of current subject
+      const currentSubjectInternalNode = xyflow.getInternalNode(currentSubjectNode.id)!
+      const currentSubjectCenter = centerXYInternalNode(currentSubjectInternalNode)
+
+      // Move to center of existing node
+      const existingInternalNode = xyflow.getInternalNode(existingNode.id)!
+      const existingDimensions = getNodeDimensions(existingInternalNode)
+      nextSubjectNode.data.layoutId = existingNode.id
+
       // Dim all nodes except the existing node
       setNodes(_nodes.map(n => {
+        if (n.id !== existingNode.id) {
+          return {
+            ...n,
+            data: {
+              ...n.data,
+              leaving: n.data.column === 'subjects',
+              dimmed: n.data.column === 'subjects' ? 'immediate' : false
+            }
+            // hidden: n.data.column === 'subjects'
+          } as XYFlowTypes.Node
+        }
+        // Move existing node
         return {
-          ...n,
+          ...omit(n, ['parentId']),
+          position: {
+            x: currentSubjectCenter.x - existingDimensions.width / 2,
+            y: currentSubjectCenter.y - existingDimensions.height / 2
+          },
+          zIndex: ZIndexes.max,
           data: {
             ...n.data,
-            dimmed: n.id !== existingNode.id ? 'immediate' : false
+            leaving: false,
+            dimmed: false
           }
         } as XYFlowTypes.Node
       }))
@@ -184,63 +256,65 @@ export const RelationshipsXYFlow = memo<{ subjectId: Fqn }>(function Relationshi
         ...e,
         data: {
           ...e.data,
-          dimmed: true
-        }
+          dimmed: 'immediate' as const
+        },
+        hidden: e.source === existingNode.id
+          || e.target === existingNode.id
+          || isAncestor(existingNode.id, e.source)
+          || isAncestor(existingNode.id, e.target)
       })))
 
-      // Move to center of existing node
-      const existingInternalNode = xyflow.getInternalNode(existingNode.id)!
-      const existingDimensions = getNodeDimensions(existingInternalNode)
-      const existingCenter = {
-        x: existingInternalNode.internals.positionAbsolute.x + existingDimensions.width / 2,
-        y: existingInternalNode.internals.positionAbsolute.y + existingDimensions.height / 2
-      }
-
       // Pick the smaller zoom level
       const zoom = Math.min(
         xyflow.getViewport().zoom,
-        nextzoom,
-        nextSubjectNode.width! / existingDimensions.width,
-        nextSubjectNode.height! / existingDimensions.height
+        nextzoom
       )
 
       let isCancelled = false
 
-      xyflow.setCenter(existingCenter.x, existingCenter.y, { zoom, duration: 350 }).then(() => {
-        // If the component is unmounted, we don't want to update the state
+      const layout = async () => {
+        // allow frameer to render
+        await delay(150)
         if (isCancelled) return
-        setNodes(nodes)
-        setEdges(edges)
-        xyflow.setCenter(nextSubjectCenter.x, nextSubjectCenter.y, { zoom: nextzoom })
-        fitview()
-      })
+        await xyflow.setCenter(currentSubjectCenter.x, currentSubjectCenter.y, { zoom, duration: 250 })
+        requestAnimationFrame(() => {
+          if (isCancelled) return
+          xyflow.setCenter(nextSubjectCenter.x, nextSubjectCenter.y, { zoom })
+          setNodes(nodes)
+          setEdges(edges)
+          fitview()
+        })
+      }
+      requestAnimationFrame(layout)
       return () => {
         isCancelled = true
       }
     }
-    setNodes(nodes)
+    setNodes(map(nodes, setPath(['data', 'initialAnimation'], false)))
     setEdges(edges)
     fitview()
     return undefined
-  }, [nodes, edges])
+  }, [nodes, edges, subjectId])
 
   return (
     <ReactFlow
+      id={id}
       defaultEdges={[] as XYFlowTypes.Edge[]}
       defaultNodes={[] as XYFlowTypes.Node[]}
       nodeTypes={nodeTypes}
       edgeTypes={edgeTypes}
-      defaultMarkerColor="var(--xy-edge-stroke)"
+      defaultMarkerColor="var(--likec4-relation-lineColor)"
+      className={cssReactflowMarker}
       zoomOnPinch={true}
       zoomOnScroll={false}
-      zoomOnDoubleClick={false}
-      maxZoom={1.5}
-      minZoom={0.1}
+      zoomOnDoubleClick={zoomOnDoubleClick}
+      maxZoom={maxZoom}
+      minZoom={minZoom}
       fitView
       fitViewOptions={{
-        padding: 0.2,
-        maxZoom: 1,
-        minZoom: 0.1,
+        padding: viewportPadding,
+        maxZoom,
+        minZoom,
         includeHiddenNodes: true
       }}
       preventScrolling={true}
@@ -248,7 +322,6 @@ export const RelationshipsXYFlow = memo<{ subjectId: Fqn }>(function Relationshi
       noPanClassName="nopan"
       panOnScroll
       panOnDrag
-      elementsSelectable
       nodesFocusable={false}
       edgesFocusable={false}
       nodesDraggable={false}
@@ -285,136 +358,29 @@ export const RelationshipsXYFlow = memo<{ subjectId: Fqn }>(function Relationshi
       onEdgeMouseLeave={() => {
         resetDimmedAndHovered(xyflow)
       }}
-      onNodeClick={(e, node) => {
-        e.stopPropagation()
-        if (node.type === 'empty') return
-        lastClickedNodeRef.current = node
-        overlay.openOverlay({
-          relationshipsOf: node.data.fqn
-        })
-      }}
       onNodeDoubleClick={(e) => {
         e.stopPropagation()
       }}
-      onDoubleClick={e => {
-        e.stopPropagation()
-        fitview()
-      }}
-      onEdgeClick={(e, edge) => {
-        e.stopPropagation()
-        // One relation in edge
-        const relationId = only(edge.data.relations)?.id
-        if (relationId) {
-          diagramStore.getState().onOpenSourceRelation?.(relationId)
-          return
-        }
-
-        const nodeId = onlyOneUnique(edge.data, 'source') ? edge.source : edge.target
-        const next = xyflow.getNode(nodeId)
-        if (next && next.type !== 'empty') {
-          lastClickedNodeRef.current = next
-          overlay.openOverlay({
-            relationshipsOf: next.data.fqn
-          })
+      {...!zoomOnDoubleClick && {
+        onDoubleClick: e => {
+          e.stopPropagation()
+          fitview()
         }
       }}
+      {...rest}
     >
-      <Panel position="top-center">
-        <Group gap={'xs'} wrap={'nowrap'}>
-          <Button
-            leftSection={<IconArrowLeft stroke={3} size={14} />}
-            color="dimmed"
-            variant="subtle"
-            style={{
-              visibility: current > 0 ? 'visible' : 'hidden',
-              padding: '0.25rem 0.75rem'
-            }}
-            styles={{
-              label: {
-                fontWeight: 400
-              },
-              section: {
-                marginInlineEnd: 6
-              }
-            }}
-            size="sm"
-            onClick={(e) => {
-              e.stopPropagation()
-              historyOps.back()
-            }}>
-            Back
-          </Button>
-          <Space w={2} />
-          <Group gap={'xs'} pos={'relative'} wrap="nowrap" flex={'1 0 auto'}>
-            <Box fz={'sm'} fw={'400'} style={{ whiteSpace: 'nowrap', userSelect: 'none' }}>Relationships of</Box>
-            <Box flex={'1 0 auto'}>
-              <SelectElement
-                scope={scope}
-                subject={subject.element}
-                onSelect={fqn =>
-                  overlay.openOverlay({
-                    relationshipsOf: fqn
-                  })}
-                viewId={view.id} />
-            </Box>
-            <SegmentedControl
-              flex={'1 0 auto'}
-              size="xs"
-              withItemsBorders={false}
-              value={scope}
-              onChange={setScope as any}
-              data={[
-                { label: 'Global', value: 'global' },
-                { label: 'Current view', value: 'view', disabled: !viewIncludesSubject }
-              ]}
-            />
-            {showSubjectWarning && (
-              <Box
-                pos={'absolute'}
-                top={'calc(100% + .5rem)'}
-                left={'50%'}
-                w={'max-content'}
-                style={{
-                  transform: 'translateX(-50%)',
-                  textAlign: 'center',
-                  cursor: 'pointer'
-                }}
-                onClick={(e) => {
-                  e.stopPropagation()
-                  setScope('global')
-                }}
-              >
-                <Text fw={500} size="xs" c="orange" component="div">
-                  Current view doesn't include this element, switched to Global
-                </Text>
-              </Box>
-            )}
-          </Group>
-          <Button
-            rightSection={<IconArrowRight stroke={3} size={14} />}
-            color="dimmed"
-            variant="subtle"
-            style={{
-              visibility: current + 1 < history.length ? 'visible' : 'hidden',
-              padding: '0.25rem 0.75rem'
-            }}
-            styles={{
-              label: {
-                fontWeight: 400
-              },
-              section: {
-                marginInlineStart: 4
-              }
-            }}
-            size="sm"
-            onClick={(e) => {
-              e.stopPropagation()
-              historyOps.forward()
-            }}>
-            Forward
-          </Button>
-        </Group>
-      </Panel>
+      {/* <Background variant={BackgroundVariant.Dots} size={2} gap={20} /> */}
+      {children}
     </ReactFlow>
   )
-})
+}
+
+export function RelationshipsXYFlow(props: RelationshipsXYFlowProps) {
+  return (
+    <ReactFlowProvider
+      defaultNodes={[]}
+      defaultEdges={[]}>
+      <RelationshipsXYFlowWrapped {...props} />
+    </ReactFlowProvider>
+  )
+}

package/src/overlays/relationships-of/_types.ts

@@ -17,8 +17,8 @@ export namespace XYFlowTypes {
   }
 
   type NodeProps = {
-    // level: number
-    column: 'incomers' | 'subject' | 'outgoers'
+    depth?: number
+    column: 'incomers' | 'subjects' | 'outgoers'
     fqn: Fqn
     existsInCurrentView: boolean
     element: Pick<ComputedNode, 'color' | 'title' | 'description' | 'shape' | 'kind'>
@@ -28,6 +28,12 @@ export namespace XYFlowTypes {
     }
     navigateTo: ViewID | null
     hovered?: boolean
+    layoutId?: string
+    leaving?: boolean
+    /**
+     * @default true
+     */
+    initialAnimation?: boolean
     /**
      * Whether the node is dimmed
      * 'immediate' means that the node is dimmed without delay
@@ -43,9 +49,13 @@ export namespace XYFlowTypes {
 
   export type EmptyNode = SetRequired<
     ReactFlowNode<{
-      column: 'incomers' | 'outgoers'
+      column: 'incomers' | 'subjects' | 'outgoers'
       hovered?: boolean
       dimmed?: boolean
+      /**
+       * @default true
+       */
+      initialAnimation?: boolean
     }, 'empty'>,
     'type'
   >
@@ -55,8 +65,9 @@ export namespace XYFlowTypes {
   export type Edge = Omit<ReactFlowEdge, 'data' | 'type'> & {
     data: {
       relations: [Relation, ...Relation[]]
+      includedInCurrentView: boolean
       hovered?: boolean
-      dimmed?: boolean
+      dimmed?: 'immediate' | boolean
     }
     type: 'relation'
   }