@likec4/diagram 1.13.0 → 1.15.0

package/src/overlays/edge-details/EdgeDetailsXYFlow.tsx

@@ -0,0 +1,247 @@
+import { type DiagramEdge, type EdgeId, isAncestor } from '@likec4/core'
+import { Box, Group, Text } from '@mantine/core'
+import { useDebouncedCallback, useSyncedRef, useUpdateEffect } from '@react-hookz/web'
+import {
+  getViewportForBounds,
+  Panel,
+  ReactFlow,
+  type ReactFlowInstance,
+  useReactFlow,
+  useStoreApi,
+  ViewportPortal
+} from '@xyflow/react'
+import { memo, useEffect } from 'react'
+import { useDiagramStoreApi } from '../../hooks/useDiagramState'
+import type { XYFlowTypes } from './_types'
+import { SelectEdge } from './SelectEdge'
+import * as css from './SelectEdge.css'
+import { useLayoutedEdgeDetails, ZIndexes } from './use-layouted-edge-details'
+import { CompoundNode } from './xyflow/CompoundNode'
+import { ElementNode } from './xyflow/ElementNode'
+import { RelationshipEdge } from './xyflow/RelationshipEdge'
+
+const nodeTypes = {
+  element: ElementNode,
+  compound: CompoundNode
+}
+const edgeTypes = {
+  relation: RelationshipEdge
+}
+
+const resetDimmedAndHovered = (xyflow: ReactFlowInstance<XYFlowTypes.Node, XYFlowTypes.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 XYFlowTypes.Node
+    )
+  )
+}
+
+const animateEdge = (node: XYFlowTypes.Node, animated = true) => (edges: XYFlowTypes.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
+    }
+  })
+}
+
+export const EdgeDetailsXYFlow = memo<{ edgeId: EdgeId }>(function EdgeDetailsXYFlow({ edgeId }) {
+  const diagramStore = useDiagramStoreApi()
+
+  const {
+    view,
+    edge,
+    edges,
+    nodes,
+    bounds
+  } = useLayoutedEdgeDetails(edgeId)
+
+  const boundsRef = useSyncedRef(bounds)
+
+  const xyflow = useReactFlow<XYFlowTypes.Node, XYFlowTypes.Edge>()
+  const xystore = useStoreApi<XYFlowTypes.Node, XYFlowTypes.Edge>()
+
+  const fitview = useDebouncedCallback(
+    () => {
+      const {
+        width,
+        height
+      } = xystore.getState()
+      const viewport = getViewportForBounds(
+        {
+          ...boundsRef.current,
+          height: Math.max(boundsRef.current.height + 100, height - 200) // Add some padding to the bottom
+        },
+        width,
+        height,
+        0.2,
+        1,
+        0.2
+      )
+      xyflow.setViewport(viewport, { duration: 350 })
+    },
+    [xyflow],
+    150
+  )
+
+  useEffect(() => {
+    xyflow.setNodes(nodes)
+    xyflow.setEdges(edges)
+  }, [nodes, edges])
+
+  const zoomable = true
+
+  useUpdateEffect(() => fitview(), [edge.id])
+
+  return (
+    <ReactFlow
+      defaultEdges={[] as XYFlowTypes.Edge[]}
+      defaultNodes={[] as XYFlowTypes.Node[]}
+      nodeTypes={nodeTypes}
+      edgeTypes={edgeTypes}
+      defaultMarkerColor="var(--xy-edge-stroke)"
+      zoomOnPinch={zoomable}
+      zoomOnScroll={false}
+      zoomOnDoubleClick={false}
+      maxZoom={1.5}
+      minZoom={0.1}
+      fitView
+      fitViewOptions={{
+        padding: 0.2,
+        maxZoom: 1,
+        minZoom: 0.1,
+        includeHiddenNodes: true
+      }}
+      preventScrolling={true}
+      noDragClassName="nodrag"
+      noPanClassName="nopan"
+      panOnScroll
+      panOnDrag
+      elementsSelectable
+      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 XYFlowTypes.Node))
+        )
+      }}
+      onEdgeMouseLeave={() => {
+        resetDimmedAndHovered(xyflow)
+      }}
+      // onNodeClick={(e, node) => {
+      //   e.stopPropagation()
+      //   if (node.type === 'empty') return
+      //   if (subject.id !== node.data.fqn) {
+      //     lastClickedNodeRef.current = node
+      //   }
+      //   overlay.openOverlay({
+      //     relationshipsOf: node.data.fqn
+      //   })
+      // }}
+      // onDoubleClick={e => {
+      //   e.stopPropagation()
+      //   xyflow.fitView({
+      //     includeHiddenNodes: true,
+      //     maxZoom: 1,
+      //     duration: 450
+      //   })
+      // }}
+      onEdgeClick={(e, edge) => {
+        e.stopPropagation()
+        diagramStore.getState().onOpenSourceRelation?.(edge.data.relation.id)
+      }}
+      // onEdgeClick={(e, edge) => {
+      //   e.stopPropagation()
+      //   if (edge.data.relations.length <= 1) {
+      //     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
+      //     })
+      //   }
+      // }}
+    >
+      <Panel position="top-center">
+        <Group gap={'xs'} wrap={'nowrap'}>
+          <SelectEdge
+            view={view}
+            edge={edge} />
+        </Group>
+      </Panel>
+      <EdgeData edge={edge} top={bounds.height} width={bounds.width} />
+    </ReactFlow>
+  )
+})
+
+const EdgeData = ({ edge, top, width }: { edge: DiagramEdge; top: number; width: number }) => {
+  return (
+    <ViewportPortal>
+      <Box
+        maw={width}
+        style={{
+          transform: `translate(100px, ${top + 32}px)`
+        }}>
+        <Box className={css.edgeDataGrid}>
+          <Text size="xs" fw={500} c="dimmed">technology</Text>
+          <Text>{edge.technology || 'unknown'}</Text>
+          <Text size="xs" fw={500} c="dimmed">description</Text>
+          <Text>{edge.description || 'no description'}</Text>
+        </Box>
+      </Box>
+    </ViewportPortal>
+  )
+}

package/src/overlays/edge-details/SelectEdge.css.ts

@@ -0,0 +1,99 @@
+import { globalStyle, style } from '@vanilla-extract/css'
+import { mantine } from '../../theme-vars'
+
+const edgeEnpoint = style({
+  display: 'inline-flex',
+  alignItems: 'center',
+  padding: '6px 2px 0 2px'
+})
+
+globalStyle(`${edgeEnpoint} .mantine-Text-root`, {
+  fontSize: mantine.fontSizes.xs,
+  fontWeight: 500,
+  lineHeight: 1
+})
+
+export const edgeSource = style([{
+  paddingLeft: 4,
+  gridColumn: 1
+}, edgeEnpoint])
+export const edgeArrow = style([{
+  gridColumn: 2
+}, edgeEnpoint])
+export const edgeTarget = style([{
+  gridColumn: 3,
+  paddingRight: 4
+}, edgeEnpoint])
+
+export const edgeLabel = style({
+  display: 'grid',
+  gridColumnStart: 1,
+  gridColumnEnd: 4,
+  borderBottom: `1px solid ${mantine.colors.defaultBorder}`,
+  marginBottom: '0px',
+  padding: '0 4px 5px 4px'
+  // gridArea: '2 / 1 / 3 / 3',
+  // selectors: {
+  //   '&:last-child': {
+  //     borderBottom: 'none',
+  //     marginBottom: 0
+  //   }
+  // }
+})
+
+globalStyle(`${edgeLabel} .mantine-Text-root`, {
+  fontSize: mantine.fontSizes.sm,
+  fontWeight: 400,
+  color: mantine.colors.dimmed
+})
+
+export const edgeRow = style({
+  display: 'contents'
+})
+
+globalStyle(`${edgeRow}:last-child ${edgeLabel}`, {
+  borderBottom: 'none',
+  marginBottom: 0
+})
+
+globalStyle(`${edgeRow} > *`, {
+  transition: 'all 0.15s ease-in'
+})
+
+globalStyle(`${edgeRow}:is(:hover, [data-selected=true]) > *`, {
+  transition: 'all 0.15s ease-out',
+  cursor: 'pointer',
+  backgroundColor: mantine.colors.defaultHover
+})
+
+export const edgeGrid = style({
+  display: 'grid',
+  gridTemplateColumns: '1fr 30px 1fr',
+  gridAutoRows: 'min-content max-content',
+  gap: 0,
+  alignItems: 'stretch'
+  // gridTemplateColumns: 'auto',
+  // gridTemplateRows: `
+  //   [row1-start] "source target" auto [row1-end]
+  //   [row2-start] "label label" 50px [row2-end]
+  // `,
+  // gridTemplateAreas: `
+  //   "source target"
+  //   "label label"
+  // `
+
+  // gridTemplateRows: `
+  //   repeat(auto-fill, [row1-start] "source target" 20px [row1-end]
+  //                     [row2-start] "label" . 20px [row2-end])
+  // `,
+  // gridAutoFlow: 'row',
+})
+
+export const edgeDataGrid = style({
+  display: 'grid',
+  gridTemplateColumns: 'min-content 1fr',
+  gridAutoRows: 'min-content max-content',
+  gap: '10px 12px',
+  alignItems: 'baseline',
+  justifyItems: 'start'
+})

package/src/overlays/edge-details/SelectEdge.tsx

@@ -0,0 +1,153 @@
+import { type DiagramEdge, type DiagramView } from '@likec4/core'
+import {
+  Box,
+  Button,
+  Popover,
+  PopoverDropdown,
+  PopoverTarget,
+  ScrollAreaAutosize,
+  Text,
+  ThemeIcon,
+  useComputedColorScheme
+} from '@mantine/core'
+import { IconArrowRight, IconSelector } from '@tabler/icons-react'
+import { useRef } from 'react'
+import { useOverlayDialog } from '../OverlayContext'
+import * as css from './SelectEdge.css'
+
+export const SelectEdge = ({
+  edge,
+  view
+}: {
+  edge: DiagramEdge
+  view: DiagramView
+  // onSelect: (id: Fqn) => void
+}) => {
+  const overlay = useOverlayDialog()
+  const viewport = useRef<HTMLDivElement>(null)
+  // const data = useLikeC4ElementsTree(scope === 'view' ? viewId : undefined)
+  // const tree = useTree({
+  //   multiple: false
+  // })
+
+  // useEffect(() => {
+  //   ancestorsFqn(subject.id).reverse().forEach(id => {
+  //     tree.expand(id)
+  //   })
+  //   tree.select(subject.id)
+  // }, [subject.id])
+
+  const theme = useComputedColorScheme()
+
+  const edgeSource = view.nodes.find(n => n.id === edge.source)!
+  const edgeTarget = view.nodes.find(n => n.id === edge.target)!
+
+  const edges = view.edges.map(edge => {
+    const source = view.nodes.find(n => n.id === edge.source)!
+    const target = view.nodes.find(n => n.id === edge.target)!
+    return {
+      id: edge.id,
+      source,
+      target,
+      label: edge.label
+    }
+  })
+
+  return (
+    <Popover
+      position="bottom"
+      shadow="md"
+      keepMounted
+      withinPortal={false}
+      closeOnClickOutside
+      clickOutsideEvents={['pointerdown', 'mousedown', 'click']}
+      onOpen={() => {
+        setTimeout(() => {
+          const item = viewport.current?.querySelector(`[data-edge-id="${edge.id}"]`)
+          item?.scrollIntoView({ behavior: 'instant', block: 'nearest' })
+        }, 100)
+      }}
+    >
+      <PopoverTarget>
+        <Button
+          size="xs"
+          variant="light"
+          color={theme === 'light' ? 'dark' : 'gray'}
+          fw={'500'}
+          style={{ padding: '0.25rem 0.75rem' }}
+          rightSection={<IconSelector size={16} />}
+        >
+          <Box
+            className={css.edgeSource}
+            maw={160}
+            p={0}
+            mod={{
+              'likec4-color': edgeSource.color
+            }}
+          >
+            <Text component="span" truncate>{edgeSource.title}</Text>
+          </Box>
+          <ThemeIcon color="dark" variant="transparent" size={'xs'}>
+            <IconArrowRight style={{ width: '80%' }} />
+          </ThemeIcon>
+          <Box
+            className={css.edgeTarget}
+            maw={160}
+            p={0}
+            mod={{
+              'likec4-color': edgeTarget.color
+            }}
+          >
+            <Text component="span" truncate>{edgeTarget.title}</Text>
+          </Box>
+        </Button>
+      </PopoverTarget>
+      <PopoverDropdown p={0} miw={250} maw={420}>
+        <ScrollAreaAutosize mah={'70vh'} scrollbars="y" type="never" viewportRef={viewport}>
+          <Box className={css.edgeGrid} p="xs">
+            {edges.map(e => (
+              <div
+                key={e.id}
+                className={css.edgeRow}
+                data-selected={e.id === edge.id}
+                onClick={event => {
+                  event.stopPropagation()
+                  overlay.openOverlay({
+                    edgeDetails: e.id
+                  })
+                }}>
+                <Box
+                  className={css.edgeSource}
+                  maw={160}
+                  mod={{
+                    'edge-id': e.id,
+                    'likec4-color': e.source.color
+                  }}
+                >
+                  <Text component="span" truncate>{e.source.title}</Text>
+                </Box>
+                <Box className={css.edgeArrow}>
+                  <ThemeIcon color="dark" variant="transparent" size={'xs'}>
+                    <IconArrowRight style={{ width: '80%' }} />
+                  </ThemeIcon>
+                </Box>
+                <Box
+                  className={css.edgeTarget}
+                  maw={160}
+                  mod={{
+                    'likec4-color': e.target.color
+                  }}
+                >
+                  <Text component="span" truncate>{e.target.title}</Text>
+                </Box>
+                <Box className={css.edgeLabel}>
+                  <Text component="span" truncate>{e.label || 'untitled'}</Text>
+                </Box>
+              </div>
+            ))}
+          </Box>
+        </ScrollAreaAutosize>
+      </PopoverDropdown>
+    </Popover>
+  )
+}

package/src/overlays/edge-details/_types.ts

@@ -0,0 +1,38 @@
+import type { ComputedNode, Fqn, Relation, ViewID } from '@likec4/core'
+import type { Edge as ReactFlowEdge, Node as ReactFlowNode, ReactFlowInstance } from '@xyflow/react'
+import type { SetRequired } from 'type-fest'
+
+export namespace XYFlowTypes {
+  type NodeProps = {
+    fqn: Fqn
+    element: Pick<ComputedNode, 'color' | 'title' | 'description' | 'shape' | 'kind'>
+    ports: {
+      in: string[]
+      out: string[]
+    }
+    navigateTo: ViewID | null
+    hovered?: boolean
+    /**
+     * Whether the node is dimmed
+     * 'immediate' means that the node is dimmed without delay
+     */
+    dimmed?: 'immediate' | boolean
+  }
+
+  export type ElementNode = SetRequired<ReactFlowNode<NodeProps, 'element'>, 'type'>
+
+  export type CompoundNode = SetRequired<ReactFlowNode<NodeProps, 'compound'>, 'type'>
+
+  export type Node = ElementNode | CompoundNode
+
+  export type Edge = Omit<ReactFlowEdge, 'data' | 'type'> & {
+    data: {
+      relation: Relation
+      hovered?: boolean
+      dimmed?: boolean
+    }
+    type: 'relation'
+  }
+
+  export type Instance = ReactFlowInstance<Node, Edge>
+}