@likec4/diagram 1.41.0 → 1.42.0

package/src/overlays/overlaysActor.ts

@@ -1,284 +0,0 @@
-import type { Fqn } from '@likec4/core/types'
-import { getHotkeyHandler } from '@mantine/hooks'
-import type { KeyboardEvent } from 'react'
-import { isString, last, reverse } from 'remeda'
-import {
-  type ActorLogicFrom,
-  type ActorRefFrom,
-  type SnapshotFrom,
-  assertEvent,
-  enqueueActions,
-  fromCallback,
-  setup,
-  spawnChild,
-  stopChild,
-} from 'xstate'
-import { elementDetailsLogic } from './element-details/actor'
-import { relationshipDetailsLogic } from './relationship-details/actor'
-import { relationshipsBrowserLogic } from './relationships-browser/actor'
-import type { Overlays } from './types'
-
-export type OverlayActorEvent =
-  | { type: 'open.elementDetails' } & Overlays.ElementDetails.Input
-  | { type: 'open.relationshipDetails' } & Overlays.RelationshipDetails.Input
-  | { type: 'open.relationshipsBrowser' } & Overlays.RelationshipsBrowser.Input
-  | { type: 'close'; actorId?: string | undefined } // Close last overlay if actorId is not provided
-  | { type: 'close.all' }
-
-export interface OverlaysContext {
-  seq: number
-  overlays: Array<
-    | { type: 'elementDetails'; id: `elementDetails-${number}`; subject: Fqn }
-    | { type: 'relationshipDetails'; id: `relationshipDetails-${number}` }
-    | { type: 'relationshipsBrowser'; id: `relationshipsBrowser-${number}`; subject: Fqn }
-  >
-}
-
-export type OverlayActorEmitedEvent =
-  | { type: 'opened'; overlay: 'elementDetails' | 'relationshipsBrowser' | 'relationshipDetails' }
-  | { type: 'closed'; overlay: 'elementDetails' | 'relationshipsBrowser' | 'relationshipDetails' }
-  | { type: 'idle' }
-
-type HotKeyEvent = { type: 'close' }
-// TODO: naming convention for actors
-const hotkeyLogic = fromCallback(({ sendBack }: {
-  sendBack: (event: HotKeyEvent) => void
-}) => {
-  const handler = getHotkeyHandler([
-    ['Escape', (event: KeyboardEvent) => {
-      event.stopPropagation()
-      sendBack({ type: 'close' })
-    }, {
-      preventDefault: true,
-    }],
-  ])
-  document.body.addEventListener('keydown', handler, { capture: true })
-  return () => {
-    document.body.removeEventListener('keydown', handler, { capture: true })
-  }
-})
-
-const _overlaysActorLogic = setup({
-  types: {
-    context: {} as OverlaysContext,
-    events: {} as OverlayActorEvent,
-    emitted: {} as OverlayActorEmitedEvent,
-    children: {} as {
-      hotkey: 'hotkey'
-      [key: `elementDetails-${number}`]: 'elementDetails'
-      [key: `relationshipDetails-${number}`]: 'relationshipDetails'
-      [key: `relationshipsBrowser-${number}`]: 'relationshipsBrowser'
-    },
-  },
-  actors: {
-    relationshipDetails: relationshipDetailsLogic as Overlays.RelationshipDetails.Logic,
-    elementDetails: elementDetailsLogic as Overlays.ElementDetails.Logic,
-    relationshipsBrowser: relationshipsBrowserLogic as Overlays.RelationshipsBrowser.Logic,
-    hotkey: hotkeyLogic,
-  },
-  actions: {
-    'closeLastOverlay': enqueueActions(({ context, enqueue }) => {
-      if (context.overlays.length === 0) {
-        return
-      }
-      const lastOverlay = last(context.overlays)?.id
-      if (!lastOverlay) {
-        return
-      }
-      enqueue.sendTo(lastOverlay, { type: 'close' })
-      enqueue.stopChild(lastOverlay)
-      enqueue.assign({
-        overlays: context.overlays.filter(o => o.id !== lastOverlay),
-      })
-    }),
-    'closeSpecificOverlay': enqueueActions(({ context, enqueue }, params: { actorId: string }) => {
-      const toClose = context.overlays.find(o => o.id === params.actorId)?.id
-      if (toClose) {
-        enqueue.sendTo(toClose, { type: 'close' })
-        enqueue.stopChild(toClose)
-        enqueue.assign({
-          overlays: context.overlays.filter(o => o.id !== toClose),
-        })
-      }
-    }),
-    'closeAllOverlays': enqueueActions(({ context, enqueue }) => {
-      for (const { id } of reverse(context.overlays)) {
-        enqueue.sendTo(id, { type: 'close' })
-        enqueue.stopChild(id)
-      }
-
-      enqueue.assign({ overlays: [] })
-    }),
-    'openElementDetails': enqueueActions(({ context, enqueue, event }) => {
-      assertEvent(event, 'open.elementDetails')
-      if (context.overlays.some(o => o.type === 'elementDetails' && o.subject === event.subject)) {
-        return
-      }
-      const id = `elementDetails-${context.seq}` as const
-      enqueue.spawnChild('elementDetails', {
-        id,
-        input: event,
-      })
-      enqueue.assign({
-        seq: context.seq + 1,
-        overlays: [
-          ...context.overlays,
-          {
-            type: 'elementDetails' as const,
-            id,
-            subject: event.subject,
-          },
-        ],
-      })
-    }),
-    'openRelationshipDetails': enqueueActions(({ context, enqueue, event }) => {
-      assertEvent(event, 'open.relationshipDetails')
-      const currentOverlay = last(context.overlays)
-      if (currentOverlay?.type === 'relationshipDetails') {
-        enqueue.sendTo(currentOverlay.id, {
-          ...event,
-          type: 'navigate.to',
-        })
-        return
-      }
-      const id = `relationshipDetails-${context.seq}` as const
-      enqueue.spawnChild('relationshipDetails', {
-        id,
-        input: event,
-      })
-      enqueue.assign({
-        seq: context.seq + 1,
-        overlays: [
-          ...context.overlays,
-          {
-            type: 'relationshipDetails' as const,
-            id,
-          },
-        ],
-      })
-    }),
-    'openRelationshipsBrowser': enqueueActions(({ context, enqueue, event }) => {
-      assertEvent(event, 'open.relationshipsBrowser')
-      const currentOverlay = last(context.overlays)
-      if (currentOverlay?.type === 'relationshipsBrowser') {
-        enqueue.sendTo(currentOverlay.id, {
-          type: 'navigate.to',
-          subject: event.subject,
-          viewId: event.viewId,
-        })
-        return
-      }
-      const id = `relationshipsBrowser-${context.seq}` as const
-      enqueue.spawnChild('relationshipsBrowser', {
-        id,
-        input: event,
-      })
-      enqueue.assign({
-        seq: context.seq + 1,
-        overlays: [
-          ...context.overlays,
-          {
-            type: 'relationshipsBrowser' as const,
-            id,
-            subject: event.subject,
-          },
-        ],
-      })
-    }),
-    'listenToEsc': spawnChild('hotkey', {
-      id: 'hotkey',
-    }),
-    'stopListeningToEsc': stopChild('hotkey'),
-  },
-  guards: {
-    'has overlays?': ({ context }) => context.overlays.length > 0,
-    'close specific overlay?': ({ context, event }) => {
-      assertEvent(event, 'close')
-      return isString(event.actorId) && context.overlays.some(o => o.id === event.actorId)
-    },
-    'last: is relationshipDetails?': ({ context }) => {
-      const lastOverlay = last(context.overlays)
-      return lastOverlay?.type === 'relationshipDetails'
-    },
-    'last: is relationshipsBrowser?': ({ context }) => {
-      const lastOverlay = last(context.overlays)
-      return lastOverlay?.type === 'relationshipsBrowser'
-    },
-  },
-}).createMachine({
-  id: 'overlays',
-  context: () => ({
-    seq: 1,
-    overlays: [],
-  }),
-  initial: 'idle',
-  on: {
-    'open.elementDetails': {
-      actions: 'openElementDetails',
-      target: '.active',
-      reenter: false,
-    },
-    'open.relationshipDetails': {
-      actions: 'openRelationshipDetails',
-      target: '.active',
-      reenter: false,
-    },
-    'open.relationshipsBrowser': {
-      actions: 'openRelationshipsBrowser',
-      target: '.active',
-      reenter: false,
-    },
-  },
-  states: {
-    idle: {},
-    active: {
-      entry: 'listenToEsc',
-      exit: 'stopListeningToEsc',
-      on: {
-        'close': [
-          {
-            guard: 'close specific overlay?',
-            actions: {
-              type: 'closeSpecificOverlay',
-              params: ({ event }) => ({ actorId: event.actorId! }),
-            },
-            target: 'closing',
-          },
-          {
-            actions: 'closeLastOverlay',
-            target: 'closing',
-          },
-        ],
-        'close.all': {
-          actions: [
-            'closeAllOverlays',
-            'stopListeningToEsc',
-          ],
-          target: 'idle',
-        },
-      },
-    },
-    closing: {
-      always: [
-        {
-          guard: 'has overlays?',
-          target: 'active',
-        },
-        {
-          actions: 'stopListeningToEsc',
-          target: 'idle',
-        },
-      ],
-    },
-  },
-  exit: [
-    'stopListeningToEsc',
-    'closeAllOverlays',
-  ],
-})
-
-export interface OverlaysActorLogic extends ActorLogicFrom<typeof _overlaysActorLogic> {}
-export const overlaysActorLogic: OverlaysActorLogic = _overlaysActorLogic
-
-export type OverlaysActorSnapshot = SnapshotFrom<OverlaysActorLogic>
-export interface OverlaysActorRef extends ActorRefFrom<OverlaysActorLogic> {}

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

@@ -1,334 +0,0 @@
-import { type DiagramEdge, type DiagramView, invariant, isAncestor, nonNullable } from '@likec4/core'
-import { cx } from '@likec4/styles/css'
-import { ActionIcon, Group } from '@mantine/core'
-import { useCallbackRef, useStateHistory } from '@mantine/hooks'
-import { IconChevronLeft, IconChevronRight, IconX } from '@tabler/icons-react'
-import { useSelector } from '@xstate/react'
-import { Panel, ReactFlowProvider, useReactFlow, useStoreApi } from '@xyflow/react'
-import { deepEqual } from 'fast-equals'
-import { AnimatePresence, LayoutGroup, m } from 'motion/react'
-import { memo, useEffect, useMemo, useRef } from 'react'
-import { find, isTruthy } from 'remeda'
-import { BaseXYFlow } from '../../base/BaseXYFlow'
-import { useLikeC4Model } from '../../likec4model/useLikeC4Model'
-import type { RelationshipDetailsTypes, RelationshipDetailsTypes as Types } from './_types'
-import type { RelationshipDetailsActorRef, RelationshipDetailsSnapshot } from './actor'
-import {
-  type RelationshipDetailsViewData,
-  computeEdgeDetailsViewData,
-  computeRelationshipDetailsViewData,
-} from './compute'
-import { CompoundNode, ElementNode, RelationshipEdge } from './custom'
-import {
-  RelationshipDetailsActorContext,
-  useRelationshipDetails,
-  useRelationshipDetailsActor,
-  useRelationshipDetailsState,
-} from './hooks'
-import { layoutRelationshipDetails } from './layout'
-import { SelectEdge } from './SelectEdge'
-
-const nodeTypes = {
-  element: ElementNode,
-  compound: CompoundNode,
-} satisfies {
-  [key in RelationshipDetailsTypes.Node['type']]: any
-}
-
-export const edgeTypes = {
-  relationship: RelationshipEdge,
-} satisfies {
-  [key in RelationshipDetailsTypes.Edge['type']]: any
-}
-
-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}>
-        <LayoutGroup id={actorRef.sessionId} inherit={false}>
-          <AnimatePresence>
-            <RelationshipDetailsInner key="xyflow" />
-            <SyncRelationshipDetailsXYFlow key="sync" />
-          </AnimatePresence>
-        </LayoutGroup>
-      </ReactFlowProvider>
-    </RelationshipDetailsActorContext.Provider>
-  )
-}
-
-const selectSubject = (state: RelationshipDetailsSnapshot) => ({
-  ...state.context.subject,
-  viewId: state.context.viewId,
-})
-
-const SyncRelationshipDetailsXYFlow = memo(() => {
-  const actor = useRelationshipDetailsActor()
-  const subject = useSelector(actor, selectSubject, deepEqual)
-  const likec4model = useLikeC4Model()
-  const view = likec4model.findView(subject.viewId) ?? null
-  const data = useMemo(() => {
-    let data: RelationshipDetailsViewData
-    if ('edgeId' in subject && isTruthy(subject.edgeId)) {
-      invariant(view, `view ${subject.viewId} not found`)
-      const edge = nonNullable(view.findEdge(subject.edgeId), `edge ${subject.edgeId} not found in ${subject.viewId}`)
-      data = computeEdgeDetailsViewData([edge.id], view)
-    } else if (!!subject.source && !!subject.target) {
-      data = computeRelationshipDetailsViewData({
-        source: likec4model.element(subject.source),
-        target: likec4model.element(subject.target),
-      })
-    } else {
-      return null
-    }
-    return layoutRelationshipDetails(data, view)
-  }, [
-    subject,
-    view,
-    likec4model,
-  ])
-
-  const store = useStoreApi<RelationshipDetailsTypes.Node, RelationshipDetailsTypes.Edge>()
-  const instance = useReactFlow<RelationshipDetailsTypes.Node, RelationshipDetailsTypes.Edge>()
-
-  useEffect(() => {
-    if (instance.viewportInitialized) {
-      actor.send({ type: 'xyflow.init', instance, store })
-    }
-  }, [store, instance.viewportInitialized, actor])
-
-  useEffect(() => {
-    if (data !== null) {
-      actor.send({ type: 'update.layoutData', data })
-    }
-  }, [data, actor])
-
-  return null
-})
-
-const selector = ({ context }: RelationshipDetailsSnapshot) => ({
-  // subject: context.subject,
-  // view: state.context.view,
-  initialized: context.initialized.xydata && context.initialized.xyflow,
-  nodes: context.xynodes,
-  edges: context.xyedges,
-})
-
-const RelationshipDetailsInner = memo(() => {
-  const browser = useRelationshipDetails()
-  const {
-    initialized,
-    nodes,
-    edges,
-  } = useRelationshipDetailsState(selector, deepEqual)
-
-  return (
-    <BaseXYFlow<Types.Node, Types.Edge>
-      id={browser.rootElementId}
-      nodes={nodes}
-      edges={edges}
-      className={cx(
-        initialized ? 'initialized' : 'not-initialized',
-        'likec4-relationship-details',
-      )}
-      nodeTypes={nodeTypes}
-      edgeTypes={edgeTypes}
-      onNodesChange={useCallbackRef((changes) => {
-        browser.send({ type: 'xyflow.applyNodeChanges', changes })
-      })}
-      onEdgesChange={useCallbackRef((changes) => {
-        browser.send({ type: 'xyflow.applyEdgeChanges', changes })
-      })}
-      fitViewPadding={0.05}
-      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) => {
-        browser.send({ type: 'xyflow.paneClick' })
-      })}
-      onDoubleClick={useCallbackRef(e => {
-        browser.send({ type: 'xyflow.paneDblClick' })
-      })}
-      onViewportResize={useCallbackRef(() => {
-        browser.send({ type: 'xyflow.resized' })
-      })}
-      onEdgeMouseEnter={useCallbackRef((_event, edge) => {
-        if (!edge.data.hovered) {
-          browser.send({ type: 'xyflow.edgeMouseEnter', edge })
-        }
-      })}
-      onEdgeMouseLeave={useCallbackRef((_event, edge) => {
-        if (edge.data.hovered) {
-          browser.send({ type: 'xyflow.edgeMouseLeave', edge })
-        }
-      })}
-      onSelectionChange={useCallbackRef((params) => {
-        browser.send({ type: 'xyflow.selectionChange', ...params })
-      })}
-      nodesDraggable={false}
-      fitView={false}
-      pannable
-      zoomable
-    >
-      <TopLeftPanel />
-      <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>
-  )
-})
-
-// type TopLeftPanelProps = {
-//   edge: DiagramEdge
-//   view: DiagramView
-//   hasStepBack: boolean
-//   hasStepForward: boolean
-//   onStepBack: () => void
-//   onStepForward: () => void
-// }
-const topLeftPanelselector = ({ context }: RelationshipDetailsSnapshot) => ({
-  subject: context.subject,
-  viewId: context.viewId,
-})
-const TopLeftPanel = memo(() => {
-  const { subject, viewId } = useRelationshipDetailsState(topLeftPanelselector, deepEqual)
-  const likec4model = useLikeC4Model()
-  const view = likec4model.findView(viewId)
-
-  if (!view || !view.isDiagram()) {
-    return null
-  }
-
-  const edges = [...view.edges()]
-
-  let edge = ('edgeId' in subject && isTruthy(subject.edgeId))
-    ? edges.find(e => e.id === subject.edgeId)
-    : (
-      find(edges, (e) => e.source.element?.id === subject.source && e.target.element?.id === subject.target)
-      || find(edges, (e) => {
-        return (e.source.element?.id === subject.source ||
-          isAncestor(e.source.element?.id ?? '__', subject.source ?? '__')) &&
-          (e.target.element?.id === subject.target || isAncestor(e.target.element?.id ?? '__', subject.target ?? '__'))
-      })
-    )
-  if (!edge) {
-    return null
-  }
-  return <TopLeftPanelInner edge={edge.$edge} view={view.$view} />
-})
-
-type TopLeftPanelProps = {
-  edge: DiagramEdge
-  view: DiagramView
-}
-const TopLeftPanelInner = ({ edge, view }: TopLeftPanelProps) => {
-  const browser = useRelationshipDetails()
-  const edgeId = edge.id
-  const [historyEdgeId, historyOps, { history, current }] = useStateHistory(edge.id)
-
-  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 (
-    <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()
-                  historyOps.back()
-                }}>
-                <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()
-                  historyOps.forward()
-                }}>
-                <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/relationship-details/SelectEdge.css.ts

@@ -1,88 +0,0 @@
-import { css, cx } from '@likec4/styles/css'
-
-const edgeEnpoint = css.raw({
-  display: 'inline-flex',
-  alignItems: 'center',
-  padding: '[6px 2px 0 2px]',
-  '& .mantine-Text-root': {
-    color: 'mantine.colors.text/90',
-    fontSize: 'xs',
-    fontWeight: 500,
-    lineHeight: '1.2',
-  },
-})
-
-export const edgeSource = css({
-  paddingLeft: '1',
-  gridColumn: 1,
-}, edgeEnpoint)
-
-export const edgeArrow = css({
-  gridColumn: 2,
-}, edgeEnpoint)
-
-export const edgeTarget = css({
-  gridColumn: 3,
-  paddingRight: '1',
-}, edgeEnpoint)
-
-const edgeLabelclass = 'likec4-edge-label'
-export const edgeLabel = cx(
-  edgeLabelclass,
-  css({
-    display: 'grid',
-    gridColumnStart: 1,
-    gridColumnEnd: 4,
-    borderBottom: `1px solid`,
-    borderBottomColor: 'mantine.colors.defaultBorder',
-    marginBottom: '0',
-    padding: '[0 4px 5px 4px]',
-    width: '100%',
-    '& .mantine-Text-root': {
-      fontSize: 'xxs',
-      fontWeight: 400,
-      lineHeight: 'xs',
-      color: 'mantine.colors.dimmed',
-    },
-  }),
-)
-
-export const edgeRow = css({
-  display: 'contents',
-  [`&:last-child .${edgeLabelclass}`]: {
-    borderBottom: 'none',
-    marginBottom: '0',
-  },
-  '& > *': {
-    transition: 'all 0.15s ease-in',
-  },
-  '&:is(:hover, [data-selected=true]) > *': {
-    transition: 'all 0.15s ease-out',
-    cursor: 'pointer',
-    backgroundColor: 'mantine.colors.defaultHover',
-  },
-})
-
-export const edgeGrid = css({
-  display: 'grid',
-  gridTemplateColumns: '1fr 30px 1fr',
-  gridAutoRows: 'min-content max-content',
-  gap: '0',
-  alignItems: 'stretch',
-})
-
-export const edgeDataGrid = css({
-  display: 'grid',
-  gridTemplateColumns: 'min-content 1fr',
-  gridAutoRows: 'min-content max-content',
-  gap: '[10px 12px]',
-  alignItems: 'baseline',
-  justifyItems: 'start',
-})
-
-export const scrollArea = css({
-  maxHeight: [
-    '70vh',
-    'calc(100cqh - 70px)',
-  ],
-})