@likec4/diagram 1.19.2 → 1.20.1

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

@@ -1,378 +0,0 @@
-import { type AbstractRelation, delay, type DiagramView, type Fqn, isAncestor } from '@likec4/core'
-import { useId } from '@mantine/hooks'
-import { useDebouncedCallback, useDeepCompareEffect, useSyncedRef } from '@react-hookz/web'
-import {
-  getViewportForBounds,
-  ReactFlow,
-  type ReactFlowInstance,
-  type ReactFlowProps,
-  ReactFlowProvider,
-  type ReactFlowState,
-  useOnViewportChange,
-  useReactFlow,
-  useStore,
-  useStoreApi
-} from '@xyflow/react'
-import { getNodeDimensions } from '@xyflow/system'
-import { type PropsWithChildren, useRef, useState } from 'react'
-import { isNullish, map, omit, only, prop, setPath, unique } from 'remeda'
-import { useUpdateEffect } from '../../hooks'
-import { centerXYInternalNode } from '../../xyflow/utils'
-import { cssReactflowMarker } from '../Overlays.css'
-import type { RelationshipsOfFlowTypes } from './_types'
-import { ZIndexes } from './use-layouted-relationships'
-import { CompoundNode } from './xyflow/CompoundNode'
-import { ElementNode } from './xyflow/ElementNode'
-import { EmptyNode } from './xyflow/EmptyNode'
-import { RelationshipEdge } from './xyflow/RelationshipEdge'
-
-const nodeTypes = {
-  element: ElementNode,
-  compound: CompoundNode,
-  empty: EmptyNode
-}
-const edgeTypes = {
-  relation: RelationshipEdge
-}
-
-/**
- * Root node in 'subjects' column
- */
-const findRootSubject = (nodes: RelationshipsOfFlowTypes.Node[]) =>
-  nodes.find((n): n is RelationshipsOfFlowTypes.ElementNode => n.data.column === 'subjects' && isNullish(n.parentId))
-
-const resetDimmedAndHovered = (xyflow: ReactFlowInstance<RelationshipsOfFlowTypes.Node, RelationshipsOfFlowTypes.Edge>) => {
-  xyflow.setEdges(edges =>
-    edges.map(edge => ({
-      ...edge,
-      data: {
-        ...edge.data,
-        dimmed: false,
-        hovered: false
-      },
-      animated: false
-    }))
-  )
-  xyflow.setNodes(nodes =>
-    nodes.map(n =>
-      ({
-        ...n,
-        data: {
-          ...n.data,
-          dimmed: false,
-          hovered: false
-        }
-      }) as RelationshipsOfFlowTypes.Node
-    )
-  )
-}
-
-const animateEdge = (node: RelationshipsOfFlowTypes.Node, animated = true) => (edges: RelationshipsOfFlowTypes.Edge[]) => {
-  return edges.map(edge => {
-    const isConnected = edge.source === node.id || edge.target === node.id || isAncestor(node.id, edge.source)
-      || isAncestor(node.id, edge.target)
-    return {
-      ...edge,
-      animated: animated && isConnected
-    }
-  })
-}
-
-const onlyOneUnique = <T extends keyof AbstractRelation>(
-  data: RelationshipsOfFlowTypes.Edge['data'],
-  property: T
-): AbstractRelation[T] | undefined => {
-  return only(unique(map(data.relations, prop(property))))
-}
-
-type RelationshipsXYFlowProps =
-  & PropsWithChildren<{
-    subjectId: Fqn
-    view: DiagramView
-    nodes: RelationshipsOfFlowTypes.Node[]
-    edges: RelationshipsOfFlowTypes.Edge[]
-    bounds: {
-      x: number
-      y: number
-      width: number
-      height: number
-    }
-    viewportPadding?: number | undefined
-  }>
-  & Pick<
-    ReactFlowProps<RelationshipsOfFlowTypes.Node, RelationshipsOfFlowTypes.Edge>,
-    | 'onNodeClick'
-    | 'elementsSelectable'
-    | 'maxZoom'
-    | 'minZoom'
-  >
-const selectContainerViewport = (s: ReactFlowState) => `${s.width}x${s.height}`
-
-function RelationshipsXYFlowWrapped({
-  subjectId,
-  view,
-  nodes,
-  edges,
-  bounds,
-  children,
-  maxZoom = 2,
-  minZoom = 0.05,
-  viewportPadding = 0.1,
-  ...rest
-}: RelationshipsXYFlowProps) {
-  const id = useId()
-
-  const lastClickedNodeRef = useRef<RelationshipsOfFlowTypes.NonEmptyNode | null>(null)
-
-  const xyflow = useReactFlow<RelationshipsOfFlowTypes.Node, RelationshipsOfFlowTypes.Edge>()
-  const xystore = useStoreApi<RelationshipsOfFlowTypes.Node, RelationshipsOfFlowTypes.Edge>()
-
-  const [zoomOnDoubleClick, setZoomOnDoubleClick] = useState(true)
-
-  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)
-    }
-  })
-
-  const initialFitviewFlagRef = useRef(false)
-  const viewBoundsRef = useSyncedRef(bounds)
-
-  const fitview = useDebouncedCallback(
-    () => {
-      const { width, height } = xystore.getState()
-      xyflow.setViewport(
-        getViewportForBounds(viewBoundsRef.current, width, height, minZoom, maxZoom, viewportPadding),
-        initialFitviewFlagRef.current ? { duration: 500 } : undefined
-      )
-      initialFitviewFlagRef.current = true
-    },
-    [xyflow, minZoom, maxZoom, viewportPadding],
-    100
-  )
-
-  useUpdateEffect(() => {
-    fitview()
-  }, [containerviewport])
-
-  useDeepCompareEffect(() => {
-    const {
-      nodes: _nodes,
-      edges: _edges,
-      setNodes,
-      setEdges,
-      width,
-      height
-    } = xystore.getState()
-
-    const nextSubjectNode = findRootSubject(nodes)
-    const currentSubjectNode = findRootSubject(_nodes)
-
-    // If subject node is the same, don't animate
-    if (currentSubjectNode && nextSubjectNode?.data.fqn === currentSubjectNode.data.fqn) {
-      setNodes(map(nodes, setPath(['data', 'entering'], false)))
-      setEdges(edges)
-      fitview()
-      return
-    }
-
-    if (!nextSubjectNode) {
-      console.error('Subject node not found')
-    } else if (nextSubjectNode.data.fqn !== subjectId) {
-      console.error(`Subject node mismatch, expected: ${subjectId} got: ${nextSubjectNode.data.fqn}`)
-    }
-
-    const nextzoom = getViewportForBounds(bounds, width, height, minZoom, maxZoom, viewportPadding).zoom
-
-    const nextSubjectCenter = nextSubjectNode && {
-      x: nextSubjectNode.position.x + (nextSubjectNode.width ?? 0) / 2,
-      y: nextSubjectNode.position.y + (nextSubjectNode.height ?? 0) / 2
-    }
-
-    const existingNode = lastClickedNodeRef.current
-      ?? 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 && 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 RelationshipsOfFlowTypes.Node
-        }
-        // Move existing node
-        return {
-          ...omit(n, ['parentId']),
-          position: {
-            x: currentSubjectCenter.x - existingDimensions.width / 2,
-            y: currentSubjectCenter.y - existingDimensions.height / 2
-          },
-          zIndex: ZIndexes.max,
-          data: {
-            ...n.data,
-            leaving: false,
-            dimmed: false
-          }
-        } as RelationshipsOfFlowTypes.Node
-      }))
-      setEdges(_edges.map(e => ({
-        ...e,
-        data: {
-          ...e.data,
-          dimmed: 'immediate' as const
-        },
-        hidden: e.source === existingNode.id
-          || e.target === existingNode.id
-          || isAncestor(existingNode.id, e.source)
-          || isAncestor(existingNode.id, e.target)
-      })))
-
-      // Pick the smaller zoom level
-      const zoom = Math.min(
-        xyflow.getViewport().zoom,
-        nextzoom
-      )
-
-      let isCancelled = false
-
-      const layout = async () => {
-        // allow frameer to render
-        await delay(150)
-        if (isCancelled) return
-        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(map(nodes, setPath(['data', 'entering'], false)))
-    setEdges(edges)
-    fitview()
-    return undefined
-  }, [nodes, edges, subjectId])
-
-  return (
-    <ReactFlow
-      id={id}
-      defaultEdges={[] as RelationshipsOfFlowTypes.Edge[]}
-      defaultNodes={[] as RelationshipsOfFlowTypes.Node[]}
-      nodeTypes={nodeTypes}
-      edgeTypes={edgeTypes}
-      defaultMarkerColor="var(--likec4-relation-lineColor)"
-      className={cssReactflowMarker}
-      zoomOnPinch={true}
-      zoomOnScroll={false}
-      zoomOnDoubleClick={zoomOnDoubleClick}
-      maxZoom={maxZoom}
-      minZoom={minZoom}
-      fitView
-      fitViewOptions={{
-        padding: viewportPadding,
-        maxZoom,
-        minZoom,
-        includeHiddenNodes: true
-      }}
-      preventScrolling={true}
-      noDragClassName="nodrag"
-      noPanClassName="nopan"
-      panOnScroll
-      panOnDrag
-      nodesFocusable={false}
-      edgesFocusable={false}
-      nodesDraggable={false}
-      onNodeMouseEnter={(_, node) => {
-        if (node.type === 'empty') return
-        xyflow.setEdges(animateEdge(node, true))
-      }}
-      onNodeMouseLeave={() => {
-        resetDimmedAndHovered(xyflow)
-      }}
-      onEdgeMouseEnter={(_, edge) => {
-        xyflow.setEdges(edges =>
-          edges.map(e => ({
-            ...e,
-            data: {
-              ...e.data,
-              dimmed: e.id !== edge.id,
-              hovered: e.id === edge.id
-            },
-            zIndex: e.id === edge.id ? ZIndexes.max : ZIndexes.edge,
-            animated: e.id === edge.id
-          }))
-        )
-        xyflow.setNodes(nodes =>
-          nodes.map(n => ({
-            ...n,
-            data: {
-              ...n.data,
-              dimmed: n.id !== edge.source && n.id !== edge.target
-            }
-          } as RelationshipsOfFlowTypes.Node))
-        )
-      }}
-      onEdgeMouseLeave={() => {
-        resetDimmedAndHovered(xyflow)
-      }}
-      onNodeDoubleClick={(e) => {
-        e.stopPropagation()
-      }}
-      {...!zoomOnDoubleClick && {
-        onDoubleClick: e => {
-          e.stopPropagation()
-          fitview()
-        }
-      }}
-      {...rest}
-    >
-      {/* <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

@@ -1,40 +0,0 @@
-import type { AddEdgeData, AddNodeData } from '../../utils/types'
-import type { SharedFlowTypes } from '../shared/xyflow/_types'
-
-export namespace RelationshipsOfFlowTypes {
-
-  /**
-   * Data that is exclusive to the relationships-of overlay. It will be merged into the node types
-   * provided by SharedFlowTypes.
-   */
-  type RelationshipsOfNodeData = {
-    depth?: number
-    column: 'incomers' | 'subjects' | 'outgoers'
-    existsInCurrentView: boolean
-    layoutId?: string
-  }
-
-  // Extend the node types provided by SharedFlowTypes with RelationshipsOfNodeData
-
-  export type ElementNode = AddNodeData<SharedFlowTypes.ElementNode, RelationshipsOfNodeData>
-
-  export type CompoundNode = AddNodeData<SharedFlowTypes.CompoundNode, RelationshipsOfNodeData>
-
-  export type NonEmptyNode = ElementNode | CompoundNode
-
-  export type EmptyNode = AddNodeData<SharedFlowTypes.EmptyNode, RelationshipsOfNodeData>
-
-  export type Node = NonEmptyNode | EmptyNode
-
-  /**
-   * Data that is exclusive to the relationships-of overlay. It will be merged into the edge types
-   * provided by SharedFlowTypes.
-   */
-  type RelationshipsOfEdgeData = {
-    existsInCurrentView: boolean
-  }
-
-  // Extend the edge types provided by SharedFlowTypes with RelationshipsOfEdgeData
-
-  export type Edge = AddEdgeData<SharedFlowTypes.Edge, RelationshipsOfEdgeData>
-}