@likec4/diagram 1.19.1 → 1.20.0

package/src/overlays/relationship-details/RelationshipDetails.tsx

@@ -0,0 +1,234 @@
+import type { DiagramEdge, DiagramView } from '@likec4/core'
+import { ActionIcon, Group } from '@mantine/core'
+import { useCallbackRef, useStateHistory } from '@mantine/hooks'
+import { IconChevronLeft, IconChevronRight, IconX } from '@tabler/icons-react'
+import { Panel, ReactFlowProvider, useEdgesState, useNodesState } from '@xyflow/react'
+import clsx from 'clsx'
+import { AnimatePresence, LayoutGroup, m } from 'framer-motion'
+import { memo, useEffect, useRef } from 'react'
+import { BaseXYFlow } from '../../base/BaseXYFlow'
+import { updateEdges } from '../../base/updateEdges'
+import { updateNodes } from '../../base/updateNodes'
+import { useUpdateEffect } from '../../hooks'
+import type { RelationshipDetailsTypes as Types } from './_types'
+import type { RelationshipDetailsActorRef, RelationshipDetailsSnapshot } from './actor'
+import { edgeTypes } from './custom/edgeTypes'
+import { nodeTypes } from './custom/nodeTypes'
+import {
+  RelationshipDetailsActorContext,
+  useRelationshipDetails,
+  useRelationshipsBrowserState,
+} from './hooks'
+import { SelectEdge } from './SelectEdge'
+import { useLayoutedDetails } from './useLayoutedDetails'
+
+export type RelationshipDetailsProps = {
+  actorRef: RelationshipDetailsActorRef
+}
+export function RelationshipDetails({ actorRef }: RelationshipDetailsProps) {
+  // const actorRef = useDiagramActorState(s => s.children.relationshipsBrowser)
+  // if (actorRef == null) {
+  //   return null
+  // }
+  const initialRef = useRef<{
+    defaultNodes: Types.Node[]
+    defaultEdges: Types.Edge[]
+  }>(null)
+
+  if (initialRef.current == null) {
+    initialRef.current = {
+      defaultNodes: [],
+      defaultEdges: [],
+    }
+  }
+
+  return (
+    <RelationshipDetailsActorContext.Provider value={actorRef}>
+      <ReactFlowProvider {...initialRef.current}>
+        <RelationshipDetailsInner />
+      </ReactFlowProvider>
+    </RelationshipDetailsActorContext.Provider>
+  )
+}
+
+const selector = (state: RelationshipDetailsSnapshot) => ({
+  edgeId: state.context.edgeId,
+  view: state.context.view,
+  initialized: state.context.initialized,
+})
+
+const RelationshipDetailsInner = memo(() => {
+  const browser = useRelationshipDetails()
+  const {
+    edgeId,
+    view,
+    initialized,
+  } = useRelationshipsBrowserState(selector)
+
+  const {
+    edge,
+    xynodes,
+    xyedges,
+    bounds,
+  } = useLayoutedDetails(edgeId, view)
+  const [nodes, setNodes, onNodesChange] = useNodesState(xynodes)
+  const [edges, setEdges, onEdgesChange] = useEdgesState(xyedges)
+
+  useUpdateEffect(() => {
+    setNodes(updateNodes(xynodes))
+    setEdges(updateEdges(xyedges))
+  }, [xynodes, xyedges])
+
+  const [historyEdgeId, historyOps, { history, current }] = useStateHistory(edgeId)
+
+  useEffect(() => {
+    if (historyEdgeId !== edgeId) {
+      historyOps.set(edgeId)
+    }
+  }, [edgeId])
+
+  useEffect(() => {
+    if (historyEdgeId !== edgeId) {
+      // browser.navigateTo(historyEdgeId)
+    }
+  }, [historyEdgeId])
+
+  const hasStepBack = current > 0
+  const hasStepForward = current + 1 < history.length
+
+  return (
+    <LayoutGroup>
+      <BaseXYFlow<Types.Node, Types.Edge>
+        id="relationship-details"
+        nodes={nodes}
+        edges={edges}
+        className={clsx(initialized ? 'initialized' : 'not-initialized')}
+        nodeTypes={nodeTypes}
+        edgeTypes={edgeTypes}
+        onEdgesChange={onEdgesChange}
+        onNodesChange={onNodesChange}
+        fitViewPadding={0.05}
+        onInit={useCallbackRef((instance) => {
+          browser.send({ type: 'xyflow.init', instance })
+        })}
+        onNodeClick={useCallbackRef((e, node) => {
+          e.stopPropagation()
+          browser.send({ type: 'xyflow.nodeClick', node })
+        })}
+        onEdgeClick={useCallbackRef((e, edge) => {
+          e.stopPropagation()
+          browser.send({ type: 'xyflow.edgeClick', edge })
+        })}
+        onPaneClick={useCallbackRef((e) => {
+          e.stopPropagation()
+          browser.send({ type: 'xyflow.paneClick' })
+        })}
+        onViewportResize={() => {
+          browser.send({ type: 'xyflow.resized' })
+        }}
+        nodesDraggable={false}
+        fitView={false}
+        pannable
+        zoomable
+      >
+        <TopLeftPanel
+          edge={edge}
+          view={view}
+          hasStepBack={hasStepBack}
+          hasStepForward={hasStepForward}
+          onStepBack={() => historyOps.back()}
+          onStepForward={() => historyOps.forward()}
+        />
+        <Panel position="top-right">
+          <ActionIcon
+            variant="default"
+            color="gray"
+            // color="gray"
+            // size={'lg'}
+            // data-autofocus
+            // autoFocus
+            onClick={(e) => {
+              e.stopPropagation()
+              browser.close()
+            }}>
+            <IconX />
+          </ActionIcon>
+        </Panel>
+      </BaseXYFlow>
+    </LayoutGroup>
+  )
+})
+
+type TopLeftPanelProps = {
+  edge: DiagramEdge
+  view: DiagramView
+  hasStepBack: boolean
+  hasStepForward: boolean
+  onStepBack: () => void
+  onStepForward: () => void
+}
+const TopLeftPanel = ({
+  edge,
+  view,
+  hasStepBack,
+  hasStepForward,
+  onStepBack,
+  onStepForward,
+}: TopLeftPanelProps) => {
+  const browser = useRelationshipDetails()
+  return (
+    <Panel position="top-left">
+      <Group gap={4} wrap={'nowrap'}>
+        <AnimatePresence mode="popLayout">
+          {hasStepBack && (
+            <m.div
+              layout
+              initial={{ opacity: 0.05, transform: 'translateX(-5px)' }}
+              animate={{ opacity: 1, transform: 'translateX(0)' }}
+              exit={{
+                opacity: 0.05,
+                transform: 'translateX(-10px)',
+              }}
+              key={'back'}>
+              <ActionIcon
+                variant="default"
+                color="gray"
+                onClick={e => {
+                  e.stopPropagation()
+                  onStepBack()
+                }}>
+                <IconChevronLeft />
+              </ActionIcon>
+            </m.div>
+          )}
+          {hasStepForward && (
+            <m.div
+              layout
+              initial={{ opacity: 0.05, transform: 'translateX(5px)' }}
+              animate={{ opacity: 1, transform: 'translateX(0)' }}
+              exit={{
+                opacity: 0,
+                transform: 'translateX(5px)',
+              }}
+              key={'forward'}>
+              <ActionIcon
+                variant="default"
+                color="gray"
+                onClick={e => {
+                  e.stopPropagation()
+                  onStepForward()
+                }}>
+                <IconChevronRight />
+              </ActionIcon>
+            </m.div>
+          )}
+
+          <Group gap={'xs'} wrap={'nowrap'} ml={'sm'}>
+            {/* <Box fz={'xs'} fw={'500'} style={{ whiteSpace: 'nowrap', userSelect: 'none' }}>Relationships of</Box> */}
+            <SelectEdge edge={edge} view={view} />
+          </Group>
+        </AnimatePresence>
+      </Group>
+    </Panel>
+  )
+}

package/src/overlays/{edge-details → relationship-details}/SelectEdge.css.ts

@@ -4,25 +4,25 @@ import { mantine } from '../../theme-vars'
 const edgeEnpoint = style({
   display: 'inline-flex',
   alignItems: 'center',
-  padding: '6px 2px 0 2px'
+  padding: '6px 2px 0 2px',
 })
 
 globalStyle(`${edgeEnpoint} .mantine-Text-root`, {
   fontSize: mantine.fontSizes.xs,
   fontWeight: 500,
-  lineHeight: 1
+  lineHeight: 1,
 })
 
 export const edgeSource = style([{
   paddingLeft: 4,
-  gridColumn: 1
+  gridColumn: 1,
 }, edgeEnpoint])
 export const edgeArrow = style([{
-  gridColumn: 2
+  gridColumn: 2,
 }, edgeEnpoint])
 export const edgeTarget = style([{
   gridColumn: 3,
-  paddingRight: 4
+  paddingRight: 4,
 }, edgeEnpoint])
 
 export const edgeLabel = style({
@@ -31,7 +31,7 @@ export const edgeLabel = style({
   gridColumnEnd: 4,
   borderBottom: `1px solid ${mantine.colors.defaultBorder}`,
   marginBottom: '0px',
-  padding: '0 4px 5px 4px'
+  padding: '0 4px 5px 4px',
   // gridArea: '2 / 1 / 3 / 3',
   // selectors: {
   //   '&:last-child': {
@@ -44,26 +44,26 @@ export const edgeLabel = style({
 globalStyle(`${edgeLabel} .mantine-Text-root`, {
   fontSize: mantine.fontSizes.sm,
   fontWeight: 400,
-  color: mantine.colors.dimmed
+  color: mantine.colors.dimmed,
 })
 
 export const edgeRow = style({
-  display: 'contents'
+  display: 'contents',
 })
 
 globalStyle(`${edgeRow}:last-child ${edgeLabel}`, {
   borderBottom: 'none',
-  marginBottom: 0
+  marginBottom: 0,
 })
 
 globalStyle(`${edgeRow} > *`, {
-  transition: 'all 0.15s ease-in'
+  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
+  backgroundColor: mantine.colors.defaultHover,
 })
 
 export const edgeGrid = style({
@@ -71,7 +71,7 @@ export const edgeGrid = style({
   gridTemplateColumns: '1fr 30px 1fr',
   gridAutoRows: 'min-content max-content',
   gap: 0,
-  alignItems: 'stretch'
+  alignItems: 'stretch',
   // gridTemplateColumns: 'auto',
   // gridTemplateRows: `
   //   [row1-start] "source target" auto [row1-end]
@@ -95,5 +95,12 @@ export const edgeDataGrid = style({
   gridAutoRows: 'min-content max-content',
   gap: '10px 12px',
   alignItems: 'baseline',
-  justifyItems: 'start'
+  justifyItems: 'start',
+})
+
+export const scrollArea = style({
+  maxHeight: [
+    '70vh',
+    'calc(100cqh - 70px)',
+  ],
 })

package/src/overlays/{edge-details → relationship-details}/SelectEdge.tsx

@@ -8,23 +8,25 @@ import {
   ScrollAreaAutosize,
   Text,
   ThemeIcon,
-  useComputedColorScheme
+  useComputedColorScheme,
 } from '@mantine/core'
 import { IconArrowRight, IconSelector } from '@tabler/icons-react'
 import { useRef } from 'react'
-import { useOverlayDialog } from '../OverlayContext'
+import { useMantinePortalProps } from '../../hooks'
+import { useRelationshipDetails } from './hooks'
 import * as css from './SelectEdge.css'
 
 export const SelectEdge = ({
   edge,
-  view
+  view,
 }: {
   edge: DiagramEdge
   view: DiagramView
   // onSelect: (id: Fqn) => void
 }) => {
-  const overlay = useOverlayDialog()
+  const overlay = useRelationshipDetails()
   const viewport = useRef<HTMLDivElement>(null)
+  const portalProps = useMantinePortalProps()
   // const data = useLikeC4ElementsTree(scope === 'view' ? viewId : undefined)
   // const tree = useTree({
   //   multiple: false
@@ -49,13 +51,13 @@ export const SelectEdge = ({
       id: edge.id,
       source,
       target,
-      label: edge.label
+      label: edge.label,
     }
   })
 
   return (
     <Popover
-      position="bottom"
+      position="bottom-start"
       shadow="md"
       keepMounted
       withinPortal={false}
@@ -82,7 +84,7 @@ export const SelectEdge = ({
             maw={160}
             p={0}
             mod={{
-              'likec4-color': edgeSource.color
+              'likec4-color': edgeSource.color,
             }}
           >
             <Text component="span" truncate>{edgeSource.title}</Text>
@@ -95,7 +97,7 @@ export const SelectEdge = ({
             maw={160}
             p={0}
             mod={{
-              'likec4-color': edgeTarget.color
+              'likec4-color': edgeTarget.color,
             }}
           >
             <Text component="span" truncate>{edgeTarget.title}</Text>
@@ -103,7 +105,7 @@ export const SelectEdge = ({
         </Button>
       </PopoverTarget>
       <PopoverDropdown p={0} miw={250} maw={420}>
-        <ScrollAreaAutosize mah={'70vh'} scrollbars="y" type="never" viewportRef={viewport}>
+        <ScrollAreaAutosize className={css.scrollArea} scrollbars="y" type="never" viewportRef={viewport}>
           <Box className={css.edgeGrid} p="xs">
             {edges.map(e => (
               <div
@@ -112,16 +114,14 @@ export const SelectEdge = ({
                 data-selected={e.id === edge.id}
                 onClick={event => {
                   event.stopPropagation()
-                  overlay.openOverlay({
-                    edgeDetails: e.id
-                  })
+                  overlay.navigateTo(e.id)
                 }}>
                 <Box
                   className={css.edgeSource}
                   maw={160}
                   mod={{
                     'edge-id': e.id,
-                    'likec4-color': e.source.color
+                    'likec4-color': e.source.color,
                   }}
                 >
                   <Text component="span" truncate>{e.source.title}</Text>
@@ -135,7 +135,7 @@ export const SelectEdge = ({
                   className={css.edgeTarget}
                   maw={160}
                   mod={{
-                    'likec4-color': e.target.color
+                    'likec4-color': e.target.color,
                   }}
                 >
                   <Text component="span" truncate>{e.target.title}</Text>

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

@@ -0,0 +1,73 @@
+import type { Color, DiagramNode, Fqn, RelationId, RelationshipLineType, ViewId } from '@likec4/core'
+import type { Base, NonOptional, ReactFlowEdge, ReactFlowNode } from '../../base/types'
+
+export namespace RelationshipDetailsTypes {
+  /**
+   * The node's incoming and outgoing ports
+   */
+  export type Ports = {
+    in: string[]
+    out: string[]
+  }
+
+  export type ElementNodeData = Base.NodeData<
+    & NonOptional<
+      Pick<
+        DiagramNode,
+        | 'title'
+        | 'technology'
+        | 'description'
+        | 'color'
+        | 'shape'
+        | 'width'
+        | 'height'
+        | 'navigateTo'
+        | 'style'
+      >
+    >
+    & {
+      fqn: Fqn
+      icon: string | null
+      ports: Ports
+    }
+  >
+
+  export type CompoundNodeData = Base.NodeData<
+    & NonOptional<
+      Pick<
+        DiagramNode,
+        | 'title'
+        | 'color'
+        | 'shape'
+        | 'style'
+      >
+    >
+    & {
+      fqn: Fqn
+      depth: number
+      icon: string | null
+      ports: Ports
+    }
+  >
+
+  export type ElementNode = ReactFlowNode<ElementNodeData, 'element'>
+
+  export type CompoundNode = ReactFlowNode<CompoundNodeData, 'compound'>
+
+  export type Node = ElementNode | CompoundNode
+  export type NodeData = Node['data']
+
+  // Extend the edge types provided by SharedFlowTypes with RelationshipsOfEdgeData
+
+  export type EdgeData = Base.EdgeData<{
+    relationId: RelationId
+    color: Color | undefined
+    label: string | null
+    technology?: string | undefined
+    description?: string | undefined
+    navigateTo: ViewId | null
+    line: RelationshipLineType
+  }>
+
+  export type Edge = ReactFlowEdge<EdgeData, 'relationship'>
+}

package/src/overlays/relationship-details/actor.ts

@@ -0,0 +1,162 @@
+import { type BBox, type DiagramView, type EdgeId, invariant } from '@likec4/core'
+import {
+  type ReactFlowInstance,
+} from '@xyflow/react'
+import { prop } from 'remeda'
+import {
+  type ActorLogic,
+  type ActorRefFromLogic,
+  type MachineSnapshot,
+  type SnapshotFrom,
+  assign,
+  cancel,
+  raise,
+  setup,
+} from 'xstate'
+import { MinZoom } from '../../base/const'
+import type { RelationshipDetailsTypes } from './_types'
+
+type XYFLowInstance = ReactFlowInstance<RelationshipDetailsTypes.Node, RelationshipDetailsTypes.Edge>
+
+export type Input = {
+  edgeId: EdgeId
+  view: DiagramView
+  // scope?: DiagramView | null
+  // parentRef?: AnyActorRef| null
+}
+
+export type Context = Readonly<
+  Input & {
+    // parentRef: AnyActorRef | null
+    xyflow: XYFLowInstance | null
+    initialized: boolean
+    // bounds: BBox | null
+  }
+>
+
+export type Events =
+  | { type: 'xyflow.init'; instance: XYFLowInstance }
+  | { type: 'xyflow.nodeClick'; node: RelationshipDetailsTypes.Node }
+  | { type: 'xyflow.edgeClick'; edge: RelationshipDetailsTypes.Edge }
+  | { type: 'xyflow.paneClick' }
+  | { type: 'xyflow.resized' }
+  // | { type: 'update.bounds'; bounds: BBox }
+  | { type: 'fitDiagram'; duration?: number; bounds?: BBox }
+  | { type: 'navigate.to'; edgeId: EdgeId }
+  | { type: 'close' }
+
+export const relationshipDetailsActor = setup({
+  types: {
+    context: {} as Context,
+    input: {} as Input,
+    events: {} as Events,
+  },
+  actions: {
+    'xyflow:fitDiagram': ({ context }, params?: { duration?: number; bounds?: BBox }) => {
+      const {
+        duration = 450,
+        bounds,
+      } = params ?? {}
+      const { xyflow } = context
+      invariant(xyflow, 'xyflow is not initialized')
+      if (bounds) {
+        xyflow.fitBounds(bounds, duration > 0 ? { duration } : undefined)
+      } else {
+        const maxZoom = Math.max(xyflow.getZoom(), 1)
+        xyflow.fitView({
+          minZoom: MinZoom,
+          maxZoom,
+          padding: 0.1,
+          ...(duration > 0 && { duration }),
+        })
+      }
+    },
+  },
+  guards: {
+    'enable: navigate.to': () => true,
+  },
+}).createMachine({
+  initial: 'opening',
+  context: ({ input }) => ({
+    ...input,
+    initialized: false,
+    xyflow: null,
+  }),
+  states: {
+    'opening': {
+      on: {
+        'xyflow.init': {
+          actions: assign({
+            initialized: true,
+            xyflow: ({ event }) => event.instance,
+          }),
+          target: 'active',
+        },
+        'close': {
+          target: 'closed',
+        },
+      },
+    },
+    'active': {
+      entry: {
+        type: 'xyflow:fitDiagram',
+        params: { duration: 0 },
+      },
+      on: {
+        // 'xyflow.nodeClick': {
+        //   actions: enqueueActions(({ event, enqueue }) => {
+        //     if ('fqn' in event.node.data) {
+        //       const fqn = event.node.data.fqn
+        //       enqueue.assign({
+        //         subject: fqn,
+        //       })
+        //       enqueue.raise({ type: 'fitDiagram' }, { delay: 50 })
+        //     }
+        //   }),
+        // },
+        'navigate.to': {
+          actions: [
+            assign({
+              edgeId: ({ event }) => event.edgeId,
+            }),
+            raise({ type: 'fitDiagram' }, { delay: 50 }),
+          ],
+        },
+        'close': {
+          target: 'closed',
+        },
+      },
+      exit: assign({
+        initialized: false,
+        xyflow: null,
+      }),
+    },
+    'closed': {
+      type: 'final',
+    },
+  },
+  on: {
+    'fitDiagram': {
+      actions: {
+        type: 'xyflow:fitDiagram',
+        params: prop('event'),
+      },
+    },
+    'xyflow.resized': {
+      actions: [
+        cancel('fitDiagram'),
+        raise({ type: 'fitDiagram' }, { id: 'fitDiagram', delay: 200 }),
+      ],
+    },
+  },
+}) as unknown as ActorLogic<
+  MachineSnapshot<Context, Events, any, 'opening' | 'active' | 'closed', any, any, any, any>,
+  Events,
+  Input,
+  any,
+  any
+> // TODO reduce type inference by forcing the types
+
+export type RelationshipDetailsLogic = typeof relationshipDetailsActor
+export type RelationshipDetailsActorRef = ActorRefFromLogic<typeof relationshipDetailsActor>
+export type RelationshipDetailsSnapshot = SnapshotFrom<RelationshipDetailsActorRef>