@likec4/diagram 1.41.0 → 1.42.1

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

@@ -1,141 +0,0 @@
-import { type DiagramEdge, type DiagramView } from '@likec4/core'
-import {
-  Box,
-  Button,
-  Popover,
-  PopoverDropdown,
-  PopoverTarget,
-  ScrollAreaAutosize,
-  Text,
-  ThemeIcon,
-} from '@mantine/core'
-import { IconArrowRight, IconSelector } from '@tabler/icons-react'
-import { useRef } from 'react'
-import { useRelationshipDetails } from './hooks'
-import * as css from './SelectEdge.css'
-
-export const SelectEdge = ({
-  edge,
-  view,
-}: {
-  edge: DiagramEdge
-  view: DiagramView
-  // onSelect: (id: Fqn) => void
-}) => {
-  const browser = useRelationshipDetails()
-  const viewport = useRef<HTMLDivElement>(null)
-
-  const edgeSource = view.nodes.find(n => n.id === edge.source)
-  const edgeTarget = view.nodes.find(n => n.id === edge.target)
-
-  const edges = view.edges.flatMap(edge => {
-    const source = view.nodes.find(n => n.id === edge.source)
-    const target = view.nodes.find(n => n.id === edge.target)
-    if (source && target) {
-      return {
-        id: edge.id,
-        source,
-        target,
-        label: edge.label,
-      }
-    }
-    return []
-  })
-
-  if (!edgeSource || !edgeTarget || edges.length === 0) {
-    return null
-  }
-
-  return (
-    <Popover
-      position="bottom-start"
-      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="default"
-          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={400}>
-        <ScrollAreaAutosize className={css.scrollArea} scrollbars="y" type="never" viewportRef={viewport}>
-          <Box className={css.edgeGrid} p="xs" maw={400}>
-            {edges.map(e => (
-              <div
-                key={e.id}
-                className={css.edgeRow}
-                data-selected={e.id === edge.id}
-                onClick={event => {
-                  event.stopPropagation()
-                  browser.navigateTo(e.id)
-                }}>
-                <Box
-                  className={css.edgeSource}
-                  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}
-                  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/relationship-details/_types.ts

@@ -1,88 +0,0 @@
-import type {
-  Color,
-  DiagramNode,
-  Fqn,
-  IconUrl,
-  RelationId,
-  RelationshipLineType,
-  RichTextOrEmpty,
-  ViewId,
-} from '@likec4/core/types'
-import type { Simplify } from 'type-fest'
-import type { Base, NonOptional, ReactFlowEdge, ReactFlowNode } from '../../base/types'
-
-export namespace RelationshipDetailsTypes {
-  export type Column = 'sources' | 'targets'
-  /**
-   * The node's incoming and outgoing ports
-   */
-  export type Ports = {
-    in: string[]
-    out: string[]
-  }
-
-  export type ElementNodeData =
-    & Base.NodeData
-    & NonOptional<
-      Pick<
-        DiagramNode,
-        | 'title'
-        | 'technology'
-        | 'color'
-        | 'shape'
-        | 'width'
-        | 'height'
-        | 'navigateTo'
-        | 'style'
-        | 'tags'
-      >
-    >
-    & {
-      column: Column
-      fqn: Fqn
-      icon: IconUrl
-      ports: Ports
-      description: RichTextOrEmpty
-    }
-
-  export type CompoundNodeData =
-    & Base.NodeData
-    & NonOptional<
-      Pick<
-        DiagramNode,
-        | 'title'
-        | 'color'
-        | 'style'
-      >
-    >
-    & {
-      column: Column
-      fqn: Fqn
-      depth: number
-      icon?: IconUrl
-      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 = Simplify<
-    Base.EdgeData & {
-      relationId: RelationId
-      color: Color | undefined
-      label: string | null
-      technology?: string | undefined
-      navigateTo: ViewId | null
-      line: RelationshipLineType
-      description: RichTextOrEmpty
-    }
-  >
-
-  export type Edge = ReactFlowEdge<EdgeData, 'relationship'>
-}

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

@@ -1,397 +0,0 @@
-import {
-  type BBox,
-  type EdgeId,
-  type ExclusiveUnion,
-  type Fqn,
-  type ViewId,
-  invariant,
-} from '@likec4/core'
-import {
-  type EdgeChange,
-  type NodeChange,
-  type ReactFlowInstance,
-  type useStoreApi,
-  applyEdgeChanges,
-  applyNodeChanges,
-  getViewportForBounds,
-} from '@xyflow/react'
-import type { InternalNodeUpdate } from '@xyflow/system'
-import { shallowEqual } from 'fast-equals'
-import { isString, prop } from 'remeda'
-import {
-  type ActorLogicFrom,
-  type ActorRefFromLogic,
-  type SnapshotFrom,
-  assertEvent,
-  assign,
-  cancel,
-  enqueueActions,
-  raise,
-  setup,
-} from 'xstate'
-import { Base } from '../../base'
-import { MinZoom } from '../../base/const'
-import { updateEdges } from '../../base/updateEdges'
-import { updateNodes } from '../../base/updateNodes'
-import type { RelationshipDetailsTypes } from './_types'
-import type { LayoutResult } from './layout'
-import { layoutResultToXYFlow } from './layout-to-xyflow'
-
-type XYFLowInstance = ReactFlowInstance<RelationshipDetailsTypes.Node, RelationshipDetailsTypes.Edge>
-type XYStoreApi = ReturnType<typeof useStoreApi<RelationshipDetailsTypes.Node, RelationshipDetailsTypes.Edge>>
-
-export type Input = ExclusiveUnion<{
-  Edge: {
-    edgeId: EdgeId
-    viewId: ViewId
-  }
-  Between: {
-    source: Fqn
-    target: Fqn
-    viewId: ViewId
-  }
-}>
-
-type Subject = {
-  edgeId: EdgeId
-  source?: never
-  target?: never
-  // relationships: null
-} | {
-  source: Fqn
-  target: Fqn
-  edgeId?: never
-  // relationships: null
-}
-
-export type Context = Readonly<{
-  // parentRef: AnyActorRef | null
-  subject: Subject
-  // Scope
-  viewId: ViewId
-  xyflow: XYFLowInstance | null
-  xystore: XYStoreApi | null
-  initialized: {
-    xydata: boolean
-    xyflow: boolean
-  }
-  xynodes: RelationshipDetailsTypes.Node[]
-  xyedges: RelationshipDetailsTypes.Edge[]
-  bounds: BBox
-}>
-
-function inputToSubject(input: { edgeId: EdgeId } | { source: Fqn; target: Fqn }): Context['subject'] {
-  if ('edgeId' in input) {
-    invariant(isString(input.edgeId), 'edgeId is required')
-    return {
-      edgeId: input.edgeId,
-    }
-  }
-  return {
-    source: input.source,
-    target: input.target,
-  }
-}
-
-export type Events =
-  | { type: 'xyflow.init'; instance: XYFLowInstance; store: XYStoreApi }
-  | { type: 'xyflow.nodeClick'; node: RelationshipDetailsTypes.Node }
-  | { type: 'xyflow.edgeClick'; edge: RelationshipDetailsTypes.Edge }
-  | { type: 'xyflow.edgeMouseEnter'; edge: RelationshipDetailsTypes.Edge }
-  | { type: 'xyflow.edgeMouseLeave'; edge: RelationshipDetailsTypes.Edge }
-  | { type: 'dim.nonhovered.edges' }
-  | { type: 'undim.edges' }
-  | { type: 'xyflow.selectionChange'; nodes: RelationshipDetailsTypes.Node[]; edges: RelationshipDetailsTypes.Edge[] }
-  | { type: 'xyflow.applyNodeChanges'; changes: NodeChange<RelationshipDetailsTypes.Node>[] }
-  | { type: 'xyflow.applyEdgeChanges'; changes: EdgeChange<RelationshipDetailsTypes.Edge>[] }
-  | { type: 'xyflow.paneClick' }
-  | { type: 'xyflow.paneDblClick' }
-  | { type: 'xyflow.resized' }
-  | { type: 'xyflow.updateNodeInternals' }
-  | {
-    type: 'update.layoutData'
-    data: LayoutResult
-  }
-  // | { type: 'update.bounds'; bounds: BBox }
-  | { type: 'fitDiagram'; duration?: number; bounds?: BBox }
-  | { type: 'navigate.to'; params: { edgeId: EdgeId; viewId?: ViewId } | { source: Fqn; target: Fqn; viewId?: ViewId } }
-  | { type: 'close' }
-
-export const relationshipDetailsLogic = setup({
-  types: {
-    context: {} as Context,
-    input: {} as Input,
-    events: {} as Events,
-  },
-  actions: {
-    'xyflow:fitDiagram': ({ context }, params?: { duration?: number; bounds?: BBox }) => {
-      let { duration, bounds } = params ?? {}
-      duration ??= 450
-      const { xyflow, xystore } = context
-      invariant(xyflow, 'xyflow is not initialized')
-      invariant(xystore, 'xystore is not initialized')
-      bounds ??= context.bounds
-      const maxZoom = Math.max(xyflow.getZoom(), 1)
-      if (bounds) {
-        const { width, height } = xystore.getState()
-        const viewport = getViewportForBounds(bounds, width, height, MinZoom, maxZoom, 0.1)
-        xyflow.setViewport(viewport, duration > 0 ? { duration } : undefined)
-      } else {
-        xyflow.fitView({
-          minZoom: MinZoom,
-          maxZoom,
-          padding: 0.1,
-          ...(duration > 0 && { duration }),
-        })
-      }
-    },
-    'xyflow:updateNodeInternals': ({ context }) => {
-      invariant(context.xystore, 'xystore is not initialized')
-      const { domNode, updateNodeInternals } = context.xystore.getState()
-      const nodeIds = new Set(context.xyedges.flatMap((e) => [e.source, e.target]))
-
-      if (nodeIds.size === 0 || !domNode) {
-        return
-      }
-
-      const updates = new Map<string, InternalNodeUpdate>()
-
-      for (const updateId of nodeIds) {
-        const nodeElement = domNode.querySelector(`.react-flow__node[data-id="${updateId}"]`) as HTMLDivElement
-        if (nodeElement) {
-          updates.set(updateId, { id: updateId, nodeElement, force: true })
-        }
-      }
-
-      updateNodeInternals(updates, { triggerFitView: false })
-    },
-    'updateXYFlow': assign(({ context, event }) => {
-      assertEvent(event, 'xyflow.init')
-      let initialized = context.initialized
-      if (!initialized.xyflow) {
-        initialized = {
-          ...initialized,
-          xyflow: true,
-        }
-      }
-      return {
-        initialized,
-        xyflow: event.instance,
-        xystore: event.store,
-      }
-    }),
-    'updateLayoutData': assign(({ context, event }) => {
-      assertEvent(event, 'update.layoutData')
-      const { xynodes, xyedges, bounds } = layoutResultToXYFlow(event.data)
-      let initialized = context.initialized
-      if (!initialized.xydata) {
-        initialized = {
-          ...initialized,
-          xydata: true,
-        }
-      }
-      return {
-        initialized,
-        xynodes: updateNodes(context.xynodes, xynodes),
-        xyedges: updateEdges(context.xyedges, xyedges),
-        bounds: shallowEqual(context.bounds, bounds) ? context.bounds : bounds,
-      }
-    }),
-  },
-  guards: {
-    'isReady': ({ context }) => context.initialized.xydata && context.initialized.xyflow,
-    'enable: navigate.to': () => true,
-  },
-}).createMachine({
-  initial: 'initializing',
-  context: ({ input }) => ({
-    subject: inputToSubject(input),
-    viewId: input.viewId,
-    bounds: {
-      x: 0,
-      y: 0,
-      width: 200,
-      height: 200,
-    },
-    initialized: {
-      xydata: false,
-      xyflow: false,
-    },
-    xyflow: null,
-    xystore: null,
-    xynodes: [],
-    xyedges: [],
-  }),
-  states: {
-    'initializing': {
-      on: {
-        'xyflow.init': {
-          actions: 'updateXYFlow',
-          target: 'isReady',
-        },
-        'update.layoutData': {
-          actions: 'updateLayoutData',
-          target: 'isReady',
-        },
-        'close': {
-          target: 'closed',
-        },
-      },
-    },
-    'isReady': {
-      always: [{
-        guard: 'isReady',
-        actions: [
-          { type: 'xyflow:fitDiagram', params: { duration: 0 } },
-          raise({ type: 'xyflow.updateNodeInternals' }, { delay: 50 }),
-        ],
-        target: 'ready',
-      }, {
-        target: 'initializing',
-      }],
-    },
-    'ready': {
-      on: {
-        'xyflow.edgeMouseEnter': {
-          actions: [
-            assign({
-              xyedges: ({ context, event }) => {
-                const hasDimmed = context.xyedges.some(edge =>
-                  edge.data.dimmed === true || edge.data.dimmed === 'immediate'
-                )
-                return context.xyedges.map(edge => {
-                  if (edge.id === event.edge.id) {
-                    return Base.setData(edge, {
-                      hovered: true,
-                      dimmed: false,
-                    })
-                  }
-                  return hasDimmed && !edge.selected ? Base.setDimmed(edge, 'immediate') : edge
-                })
-              },
-            }),
-            cancel('undim.edges'),
-            cancel('dim.nonhovered.edges'),
-            raise({ type: 'dim.nonhovered.edges' }, { id: 'dim.nonhovered.edges', delay: 100 }),
-          ],
-        },
-        'xyflow.edgeMouseLeave': {
-          actions: [
-            assign({
-              xyedges: ({ context, event }) =>
-                context.xyedges.map(edge => {
-                  if (edge.id === event.edge.id) {
-                    return Base.setHovered(edge, false)
-                  }
-                  return edge
-                }),
-            }),
-            cancel('dim.nonhovered.edges'),
-            raise({ type: 'undim.edges' }, { id: 'undim.edges', delay: 400 }),
-          ],
-        },
-        'dim.nonhovered.edges': {
-          actions: assign({
-            xyedges: ({ context }) => context.xyedges.map(edge => Base.setDimmed(edge, edge.data.hovered !== true)),
-          }),
-        },
-        'undim.edges': {
-          actions: assign({
-            xyedges: ({ context }) => {
-              const hasSelected = context.xyedges.some(edge => edge.selected === true)
-              if (hasSelected) {
-                return context.xyedges.map(edge =>
-                  Base.setDimmed(edge, edge.selected !== true ? edge.data.dimmed || 'immediate' : false)
-                )
-              }
-              return context.xyedges.map(Base.setDimmed(false))
-            },
-          }),
-        },
-        'xyflow.selectionChange': {
-          actions: enqueueActions(({ event, context, enqueue }) => {
-            if (
-              event.edges.length === 0 && context.xyedges.some(e => e.data.dimmed) &&
-              !context.xyedges.some(e => e.data.hovered)
-            ) {
-              enqueue.raise({ type: 'undim.edges' })
-            }
-          }),
-        },
-        'update.layoutData': {
-          actions: [
-            'updateLayoutData',
-            cancel('fitDiagram'),
-            raise({ type: 'fitDiagram', duration: 0 }, { id: 'fitDiagram', delay: 50 }),
-            raise({ type: 'xyflow.updateNodeInternals' }, { delay: 75 }),
-          ],
-        },
-        'xyflow.init': {
-          actions: 'updateXYFlow',
-        },
-        'xyflow.applyNodeChanges': {
-          actions: assign({
-            xynodes: ({ context, event }) => {
-              return applyNodeChanges(event.changes, context.xynodes)
-            },
-          }),
-        },
-        'xyflow.applyEdgeChanges': {
-          actions: assign({
-            xyedges: ({ context, event }) => {
-              return applyEdgeChanges(event.changes, context.xyedges)
-            },
-          }),
-        },
-        'xyflow.paneDblClick': {
-          actions: 'xyflow:fitDiagram',
-        },
-        'navigate.to': {
-          actions: assign({
-            subject: ({ event }) => inputToSubject(event.params),
-            viewId: ({ context, event }) => event.params.viewId ?? context.viewId,
-          }),
-        },
-        'close': {
-          target: 'closed',
-        },
-      },
-      exit: assign({
-        xyedges: [],
-        xynodes: [],
-        initialized: {
-          xydata: false,
-          xyflow: false,
-        },
-        xyflow: null,
-        xystore: 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 }),
-      ],
-    },
-    'xyflow.updateNodeInternals': {
-      actions: 'xyflow:updateNodeInternals',
-    },
-  },
-})
-
-export interface RelationshipDetailsLogic extends ActorLogicFrom<typeof relationshipDetailsLogic> {
-}
-export interface RelationshipDetailsActorRef extends ActorRefFromLogic<RelationshipDetailsLogic> {
-}
-export type RelationshipDetailsSnapshot = SnapshotFrom<RelationshipDetailsActorRef>