@likec4/diagram 1.41.0 → 1.42.0

package/src/likec4diagram/custom/nodes/toolbar/_shared.tsx

@@ -1,151 +0,0 @@
-import {
-  type DeploymentFqn,
-  type Fqn,
-  type NodeId,
-  type ThemeColor,
-  type ViewChange,
-  defaultTheme,
-  invariant,
-} from '@likec4/core'
-import { ActionIcon, Tooltip as MantineTooltip } from '@mantine/core'
-import { useCallbackRef } from '@mantine/hooks'
-import { IconFileSymlink, IconTransform } from '@tabler/icons-react'
-import { useState } from 'react'
-import { keys } from 'remeda'
-import type { MergeExclusive } from 'type-fest'
-import type { NodeProps } from '../../../../base'
-import { useDiagramEventHandlers } from '../../../../context'
-import { useDiagram } from '../../../../hooks/useDiagram'
-import type { Types } from '../../../types'
-
-export type OnStyleChange = (style: ViewChange.ChangeElementStyle['style']) => void
-
-const {
-  primary,
-  secondary,
-  muted,
-  ...otherColors
-} = defaultTheme.elements
-
-export const themedColors = [
-  { key: 'primary', value: primary.fill },
-  { key: 'secondary', value: secondary.fill },
-  { key: 'muted', value: muted.fill },
-] satisfies Array<{ key: ThemeColor; value: string }>
-
-export const colors = keys(otherColors).map(key => ({
-  key,
-  value: defaultTheme.elements[key].fill,
-}))
-
-export type ThemeColorKey = typeof themedColors[0]['key']
-export type ColorKey = typeof colors[0]['key']
-
-export const Tooltip = MantineTooltip.withProps({
-  color: 'dark',
-  fz: 'xs',
-  openDelay: 400,
-  closeDelay: 150,
-  label: '',
-  children: null,
-  offset: 4,
-  withinPortal: false,
-})
-
-export function useHandlers(
-  target: Fqn | DeploymentFqn,
-  props: NodeProps<Types.NodeData>,
-) {
-  const { onChange: triggerOnChange } = useDiagramEventHandlers()
-  const diagram = useDiagram()
-
-  const [originalColor, setOriginalColor] = useState<ThemeColor | null>(null)
-  const onColorPreview = useCallbackRef((color: ThemeColor | null) => {
-    if (color === null) {
-      invariant(originalColor, 'originalColor is null')
-      setOriginalColor(null)
-      diagram.updateNodeData(props.id as NodeId, {
-        color: originalColor,
-      })
-      return
-    }
-    setOriginalColor(value => value ?? props.data.color as ThemeColor)
-    diagram.updateNodeData(props.id as NodeId, {
-      color,
-    })
-  })
-
-  const onChange: OnStyleChange = useCallbackRef((change) => {
-    triggerOnChange?.({
-      change: {
-        op: 'change-element-style',
-        style: change,
-        targets: [target],
-      },
-    })
-    const { shape, color, ...style } = change
-    diagram.updateNodeData(props.id as NodeId, {
-      ...(shape && { shape }),
-      ...(color && { color }),
-      style,
-    })
-  })
-
-  return {
-    elementColor: originalColor ?? props.data.color as ThemeColor,
-    onColorPreview,
-    onChange,
-  }
-}
-
-export function BrowseRelationshipsButton({ fqn }: { fqn: Fqn }) {
-  const diagram = useDiagram()
-  return (
-    <Tooltip label={'Browse relationships'}>
-      <ActionIcon
-        size={'sm'}
-        variant="subtle"
-        color="gray"
-        onClick={e => {
-          e.stopPropagation()
-          diagram.openRelationshipsBrowser(fqn)
-        }}>
-        <IconTransform
-          stroke={2}
-          style={{
-            width: '72%',
-            height: '72%',
-          }} />
-      </ActionIcon>
-    </Tooltip>
-  )
-}
-
-export function GoToSourceButton(props: MergeExclusive<{ elementId: Fqn }, { deploymentId: DeploymentFqn }>) {
-  const { onOpenSource } = useDiagramEventHandlers()
-  if (!onOpenSource) return null
-  // const diagramApi = useDiagramStoreApi()
-  // const portalProps = useMantinePortalProps()
-  return (
-    <Tooltip label={'Open source'}>
-      <ActionIcon
-        size={'sm'}
-        variant="subtle"
-        color="gray"
-        onClick={e => {
-          e.stopPropagation()
-          if (props.elementId) {
-            onOpenSource?.({
-              element: props.elementId,
-            })
-          } else if (props.deploymentId) {
-            onOpenSource?.({
-              deployment: props.deploymentId,
-            })
-          }
-        }}>
-        <IconFileSymlink stroke={1.8} style={{ width: '70%' }} />
-      </ActionIcon>
-    </Tooltip>
-  )
-}

package/src/likec4diagram/custom/nodes/toolbar/styles.css.ts

@@ -1,13 +0,0 @@
-import { css } from '@likec4/styles/css'
-
-export const toolbarTitle = css({
-  color: 'mantine.colors.dimmed',
-  fontSize: '10px',
-  fontWeight: 600,
-  maxWidth: '220px',
-  cursor: 'default',
-  userSelect: 'all',
-  textOverflow: 'ellipsis',
-  overflow: 'hidden',
-  whiteSpace: 'nowrap',
-})

package/src/likec4diagram/relationship-popover/RelationshipPopover.tsx

@@ -1,549 +0,0 @@
-import { autoPlacement, autoUpdate, computePosition, hide, offset, size } from '@floating-ui/dom'
-import { nameFromFqn } from '@likec4/core'
-import type { LikeC4Model } from '@likec4/core/model'
-import type { DiagramEdge, DiagramNode, EdgeId, ViewId } from '@likec4/core/types'
-import { css, cx } from '@likec4/styles/css'
-import { Box, HStack, styled, VStack } from '@likec4/styles/jsx'
-import { bleed } from '@likec4/styles/patterns'
-import {
-  ActionIcon,
-  Button,
-  Divider,
-  Portal,
-  ScrollAreaAutosize,
-  Text,
-  Tooltip as MantineTooltip,
-  TooltipGroup,
-} from '@mantine/core'
-import { IconArrowRight, IconFileSymlink, IconZoomScan } from '@tabler/icons-react'
-import { useActorRef, useSelector } from '@xstate/react'
-import { shallowEqual } from 'fast-equals'
-import {
-  type MouseEvent,
-  type MouseEventHandler,
-  forwardRef,
-  Fragment,
-  memo,
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-} from 'react'
-import { clamp, filter, isEmpty, isTruthy, map, partition, pipe } from 'remeda'
-import { Link } from '../../components/Link'
-import { useDiagramEventHandlers } from '../../context/DiagramEventHandlers'
-import { useEnabledFeatures } from '../../context/DiagramFeatures'
-import { MarkdownBlock } from '../../custom'
-import { useDiagram, useDiagramContext, useOnDiagramEvent } from '../../hooks/useDiagram'
-import { useMantinePortalProps } from '../../hooks/useMantinePortalProps'
-import { useLikeC4Model } from '../../likec4model'
-import type { DiagramContext } from '../../state/types'
-import { findDiagramEdge, findDiagramNode } from '../../state/utils'
-import { roundDpr } from '../../utils'
-import { RelationshipPopoverActorLogic } from './actor'
-import * as styles from './styles.css'
-
-function selectDiagramContext(c: DiagramContext) {
-  let selected: EdgeId | null = null
-  for (const edge of c.xyedges) {
-    if (edge.selected) {
-      if (selected) {
-        selected = null
-        break
-      }
-      selected = edge.data.id
-    }
-  }
-  return {
-    viewId: c.view.id,
-    selected,
-  }
-}
-
-export const RelationshipPopover = memo(() => {
-  const likec4model = useLikeC4Model()
-  const actorRef = useActorRef(RelationshipPopoverActorLogic)
-  const diagram = useDiagram()
-  const { viewId, selected } = useDiagramContext(selectDiagramContext)
-
-  const openedEdgeId = useSelector(actorRef, s => s.hasTag('opened') ? s.context.edgeId : null)
-
-  useOnDiagramEvent('navigateTo', () => {
-    actorRef.send({ type: 'close' })
-  })
-
-  useOnDiagramEvent('edgeMouseEnter', ({ edge }) => {
-    actorRef.send({ type: 'xyedge.mouseEnter', edgeId: edge.data.id })
-  })
-
-  useOnDiagramEvent('edgeMouseLeave', () => {
-    actorRef.send({ type: 'xyedge.mouseLeave' })
-  })
-
-  useOnDiagramEvent('edgeEditingStarted', () => {
-    actorRef.send({ type: 'close' })
-  })
-
-  useOnDiagramEvent('walkthroughStarted', () => {
-    actorRef.send({ type: 'close' })
-  })
-
-  useEffect(() => {
-    if (selected) {
-      actorRef.send({ type: 'xyedge.select', edgeId: selected })
-    } else {
-      actorRef.send({ type: 'xyedge.unselect' })
-    }
-  }, [selected])
-
-  const onMouseEnter = useCallback((event: MouseEvent<HTMLDivElement>) => {
-    if (!openedEdgeId) {
-      return
-    }
-    actorRef.send({ type: 'dropdown.mouseEnter' })
-    const edge = diagram.findEdge(openedEdgeId)
-    if (edge && !edge.data.hovered) {
-      diagram.send({ type: 'xyflow.edgeMouseEnter', edge, event })
-    }
-  }, [actorRef, diagram, openedEdgeId])
-
-  const onMouseLeave = useCallback((event: MouseEvent<HTMLDivElement>) => {
-    if (!openedEdgeId) {
-      return
-    }
-    actorRef.send({ type: 'dropdown.mouseLeave' })
-    const edge = diagram.findEdge(openedEdgeId)
-    if (edge?.data.hovered) {
-      diagram.send({ type: 'xyflow.edgeMouseLeave', edge, event })
-    }
-  }, [actorRef, diagram, openedEdgeId])
-
-  const { diagramEdge, sourceNode, targetNode } = useDiagramContext(
-    ctx => {
-      const diagramEdge = openedEdgeId ? findDiagramEdge(ctx, openedEdgeId) : null
-      const sourceNode = diagramEdge ? findDiagramNode(ctx, diagramEdge.source) : null
-      const targetNode = diagramEdge ? findDiagramNode(ctx, diagramEdge.target) : null
-      return ({
-        diagramEdge,
-        sourceNode,
-        targetNode,
-      })
-    },
-    shallowEqual,
-    [openedEdgeId],
-  )
-
-  if (!diagramEdge || !sourceNode || !targetNode || isEmpty(diagramEdge.relations)) {
-    return null
-  }
-
-  const [direct, nested] = pipe(
-    diagramEdge.relations,
-    map(id => {
-      try {
-        return likec4model.relationship(id)
-      } catch (e) {
-        // View was cached, but likec4model based on new data
-        console.error(
-          `View is cached and likec4model missing relationship ${id} from ${sourceNode.id} -> ${targetNode.id}`,
-          e,
-        )
-        return null
-      }
-    }),
-    filter(isTruthy),
-    partition(r => r.source.id === sourceNode.id && r.target.id === targetNode.id),
-  )
-
-  if (direct.length === 0 && nested.length === 0) {
-    console.warn('No relationships found  diagram edge', {
-      diagramEdge,
-      sourceNode,
-      targetNode,
-    })
-    return null
-  }
-
-  return (
-    <RelationshipPopoverInternal
-      viewId={viewId}
-      direct={direct}
-      nested={nested}
-      diagramEdge={diagramEdge}
-      sourceNode={sourceNode}
-      targetNode={targetNode}
-      onMouseEnter={onMouseEnter}
-      onMouseLeave={onMouseLeave} />
-  )
-})
-
-const getEdgeLabelElement = (edgeId: string, container: HTMLDivElement | undefined) => {
-  return container?.querySelector<HTMLDivElement>(`.likec4-edge-label[data-edge-id="${edgeId}"]`) ?? null
-}
-
-type RelationshipPopoverInternalProps = {
-  viewId: ViewId
-  direct: LikeC4Model.AnyRelation[]
-  nested: LikeC4Model.AnyRelation[]
-  diagramEdge: DiagramEdge
-  sourceNode: DiagramNode
-  targetNode: DiagramNode
-  onMouseEnter: MouseEventHandler<HTMLDivElement>
-  onMouseLeave: MouseEventHandler<HTMLDivElement>
-}
-const POPOVER_PADDING = 8
-const RelationshipPopoverInternal = ({
-  viewId,
-  diagramEdge,
-  direct,
-  nested,
-  sourceNode,
-  targetNode,
-  onMouseEnter,
-  onMouseLeave,
-}: RelationshipPopoverInternalProps) => {
-  const ref = useRef<HTMLDivElement>(null)
-  const { enableNavigateTo, enableVscode } = useEnabledFeatures()
-  const { onOpenSource } = useDiagramEventHandlers()
-
-  const { portalProps } = useMantinePortalProps()
-
-  const [referenceEl, setReferenceEl] = useState<HTMLDivElement | null>(null)
-
-  useEffect(() => {
-    setReferenceEl(getEdgeLabelElement(diagramEdge.id, portalProps?.target))
-  }, [diagramEdge])
-
-  useEffect(() => {
-    const reference = referenceEl
-    const popper = ref.current
-    if (!reference || !popper) {
-      return
-    }
-    let wasCanceled = false
-
-    const update = () => {
-      computePosition(reference, popper, {
-        placement: 'bottom-start',
-        middleware: [
-          offset(2),
-          autoPlacement({
-            padding: POPOVER_PADDING,
-            allowedPlacements: [
-              'bottom-start',
-              'bottom-end',
-              'top-start',
-              'top-end',
-              'right-start',
-              'right-end',
-              'left-start',
-              'left-end',
-            ],
-          }),
-          size({
-            padding: POPOVER_PADDING,
-            apply({ availableHeight, availableWidth, elements }) {
-              if (wasCanceled) {
-                return
-              }
-              Object.assign(elements.floating.style, {
-                maxWidth: `${clamp(roundDpr(availableWidth), { min: 200, max: 400 })}px`,
-                maxHeight: `${clamp(roundDpr(availableHeight), { min: 0, max: 500 })}px`,
-              })
-            },
-          }),
-          hide({
-            padding: POPOVER_PADDING * 2,
-          }),
-        ],
-      }).then(({ x, y, middlewareData }) => {
-        if (wasCanceled) {
-          return
-        }
-        popper.style.transform = `translate(${roundDpr(x)}px, ${roundDpr(y)}px)`
-        popper.style.visibility = middlewareData.hide?.referenceHidden ? 'hidden' : 'visible'
-      })
-    }
-    const cleanup = autoUpdate(reference, popper, update, {
-      ancestorResize: false,
-      animationFrame: true,
-    })
-    return () => {
-      wasCanceled = true
-      cleanup()
-    }
-  }, [referenceEl])
-
-  const diagram = useDiagram()
-
-  const navigateTo = enableNavigateTo
-    ? (viewId: ViewId) => {
-      diagram.navigateTo(viewId)
-    }
-    : undefined
-
-  const renderRelationship = (relationship: LikeC4Model.AnyRelation, index: number) => (
-    <Fragment key={relationship.id}>
-      {index > 0 && <Divider />}
-      <Relationship
-        viewId={viewId}
-        relationship={relationship}
-        sourceNode={sourceNode}
-        targetNode={targetNode}
-        edge={diagramEdge}
-        onNavigateTo={navigateTo}
-        {...(onOpenSource && enableVscode && {
-          onOpenSource: () => onOpenSource({ relation: relationship.id }),
-        })}
-      />
-    </Fragment>
-  )
-
-  return (
-    <Portal {...portalProps}>
-      <ScrollAreaAutosize
-        ref={ref}
-        onMouseEnter={onMouseEnter}
-        onMouseLeave={onMouseLeave}
-        type="auto"
-        scrollbars={'y'}
-        scrollbarSize={6}
-        styles={{
-          viewport: {
-            overscrollBehavior: 'contain',
-            minWidth: 180,
-          },
-        }}
-        className={cx(
-          'react-flow__panel nowheel nopan nodrag',
-          css({
-            layerStyle: 'likec4.dropdown',
-            p: '0',
-            pointerEvents: 'all',
-            position: 'absolute',
-            top: '0',
-            left: '0',
-            width: 'max-content',
-            cursor: 'default',
-          }),
-        )}
-      >
-        <VStack
-          css={{
-            gap: '3',
-            padding: '4',
-            paddingTop: '2',
-          }}
-        >
-          <Button
-            variant="default"
-            color="gray"
-            size="compact-xs"
-            style={{
-              alignSelf: 'flex-start',
-              fontWeight: 500,
-              ['--button-fz']: 'var(--font-sizes-xxs)',
-            }}
-            onClick={(e) => {
-              e.stopPropagation()
-              diagram.openRelationshipDetails(diagramEdge.id)
-            }}
-          >
-            browse relationships
-          </Button>
-          {direct.length > 0 && (
-            <>
-              <Label>DIRECT RELATIONSHIPS</Label>
-              {direct.map(renderRelationship)}
-            </>
-          )}
-          {nested.length > 0 && (
-            <>
-              <Label
-                css={{
-                  mt: direct.length > 0 ? '2' : '0',
-                }}
-              >
-                RESOLVED FROM NESTED
-              </Label>
-              {nested.map(renderRelationship)}
-            </>
-          )}
-        </VStack>
-      </ScrollAreaAutosize>
-    </Portal>
-  )
-}
-
-const Relationship = forwardRef<
-  HTMLDivElement,
-  {
-    // current view id
-    viewId: ViewId
-    relationship: LikeC4Model.AnyRelation
-    edge: DiagramEdge
-    sourceNode: DiagramNode
-    targetNode: DiagramNode
-    onOpenSource?: () => void
-    onNavigateTo?: ((next: ViewId) => void) | undefined
-  }
->(({
-  viewId,
-  relationship: r,
-  edge,
-  sourceNode,
-  targetNode,
-  onNavigateTo,
-  onOpenSource,
-}, ref) => {
-  const sourceId = getEndpointId(r, 'source', sourceNode)
-  const targetId = getEndpointId(r, 'target', targetNode)
-  const navigateTo = onNavigateTo && r.navigateTo?.id !== viewId ? r.navigateTo?.id : undefined
-  const links = r.links
-
-  return (
-    <VStack
-      ref={ref}
-      className={bleed({
-        block: '2',
-        inline: '2',
-        paddingY: '2.5',
-        paddingX: '2',
-        gap: '1',
-        rounded: 'sm',
-        backgroundColor: {
-          _hover: {
-            base: 'mantine.colors.gray[1]',
-            _dark: 'mantine.colors.dark[5]/70',
-          },
-        },
-      })}
-    >
-      <HStack gap={'0.5'}>
-        <TooltipGroup openDelay={200}>
-          <Tooltip label={sourceId.full} offset={2} position="top-start">
-            <Text component="div" data-likec4-color={sourceNode.color} className={styles.endpoint}>
-              {sourceId.short}
-            </Text>
-          </Tooltip>
-          <IconArrowRight stroke={2.5} size={'11px'} opacity={0.65} />
-          <Tooltip label={targetId.full} offset={2} position="top-start">
-            <Text component="div" data-likec4-color={targetNode.color} className={styles.endpoint}>
-              {targetId.short}
-            </Text>
-          </Tooltip>
-          {navigateTo && (
-            <Tooltip label={'Open dynamic view'}>
-              <ActionIcon
-                size={'sm'}
-                radius="sm"
-                variant="default"
-                onClick={event => {
-                  event.stopPropagation()
-                  onNavigateTo?.(navigateTo)
-                }}
-                style={{
-                  alignSelf: 'flex-end',
-                }}
-                role="button"
-              >
-                <IconZoomScan size="80%" stroke={2} />
-              </ActionIcon>
-            </Tooltip>
-          )}
-          {onOpenSource && (
-            <Tooltip label={'Open source'}>
-              <ActionIcon
-                size={'sm'}
-                radius="sm"
-                variant="default"
-                onClick={event => {
-                  event.stopPropagation()
-                  onOpenSource()
-                }}
-                role="button"
-              >
-                <IconFileSymlink size="80%" stroke={2} />
-              </ActionIcon>
-            </Tooltip>
-          )}
-        </TooltipGroup>
-      </HStack>
-      <Box className={styles.title}>{r.title || 'untitled'}</Box>
-      {r.kind && (
-        <HStack gap="2">
-          <Label>kind</Label>
-          <Text size="xs" className={css({ userSelect: 'all' })}>{r.kind}</Text>
-        </HStack>
-      )}
-      {r.technology && (
-        <HStack gap="2">
-          <Label>technology</Label>
-          <Text size="xs" className={css({ userSelect: 'all' })}>{r.technology}</Text>
-        </HStack>
-      )}
-      {r.description.nonEmpty && (
-        <>
-          <Label>description</Label>
-          <Box
-            css={{
-              paddingLeft: '2.5',
-              py: '1.5',
-              borderLeft: '2px dotted',
-              borderLeftColor: {
-                base: 'mantine.colors.gray[3]',
-                _dark: 'mantine.colors.dark[4]',
-              },
-            }}
-          >
-            <MarkdownBlock value={r.description} fontSize={'sm'} />
-          </Box>
-        </>
-      )}
-      {links.length > 0 && (
-        <>
-          <Label>links</Label>
-          <HStack gap="1" flexWrap={'wrap'}>
-            {links.map((link) => <Link key={link.url} size="sm" value={link} />)}
-          </HStack>
-        </>
-      )}
-    </VStack>
-  )
-})
-
-const Label = styled('div', {
-  base: {
-    display: 'block',
-    fontSize: 'xxs',
-    fontWeight: 500,
-    userSelect: 'none',
-    lineHeight: 'sm',
-    color: 'mantine.colors.dimmed',
-  },
-})
-
-const Tooltip = MantineTooltip.withProps({
-  color: 'dark',
-  fz: 'xs',
-  label: '',
-  children: null,
-  offset: 8,
-  withinPortal: false,
-})
-
-function getEndpointId(
-  r: LikeC4Model.AnyRelation,
-  endpoint: 'source' | 'target',
-  diagramNode: DiagramNode,
-) {
-  const diagramNodeId = r.isDeploymentRelation()
-    // Relation defined in deployment model. Use id of the deployment node as is.
-    ? diagramNode.id
-    // Relation defined in model. Get id of the model element
-    : diagramNode.modelRef || ''
-
-  const full = r[endpoint].id
-  const short = nameFromFqn(diagramNodeId) + full.slice(diagramNodeId.length)
-  return { full, short }
-}