@likec4/diagram 1.19.2 → 1.20.1

package/src/xyflow/edges/EdgeLabel.tsx

@@ -1,193 +0,0 @@
-import { type ViewId, extractStep, isStepEdgeId } from '@likec4/core'
-import {
-  type BoxProps,
-  ActionIcon,
-  Box,
-  Button,
-  CloseButton,
-  Group,
-  Popover,
-  PopoverDropdown,
-  PopoverTarget,
-  ScrollAreaAutosize,
-  Stack,
-  Text,
-} from '@mantine/core'
-import { useDebouncedEffect } from '@react-hookz/web'
-import { IconZoomScan } from '@tabler/icons-react'
-import { EdgeLabelRenderer } from '@xyflow/react'
-import clsx from 'clsx'
-import { type PropsWithChildren, type ReactNode, useState } from 'react'
-import { isTruthy } from 'remeda'
-import { useDiagramState, useDiagramStoreApi, useMantinePortalProps } from '../../hooks'
-import { useLikeC4Model } from '../../likec4model/useLikeC4Model'
-import type { DiagramFlowTypes } from '../types'
-import { stopPropagation } from '../utils'
-import * as edgesCss from './edges.css'
-import { RelationshipsDropdownMenu } from './RelationshipsDropdownMenu'
-
-export interface EdgeLabelProps extends Omit<BoxProps, 'label'> {
-  isDimmed: boolean
-  edgeData: DiagramFlowTypes.DiagramEdgeData
-}
-
-export const EdgeLabel = ({
-  isDimmed,
-  edgeData: {
-    label,
-    edge,
-  },
-  ...props
-}: EdgeLabelProps) => {
-  const likec4model = useLikeC4Model()
-  const {
-    enableRelationshipDetails,
-    isActiveWalkthroughStep,
-    hasOnNavigateTo,
-  } = useDiagramState(s => ({
-    enableRelationshipDetails: s.enableRelationshipDetails,
-    isActiveWalkthroughStep: s.activeWalkthrough?.stepId === edge.id,
-    hasOnNavigateTo: !!s.onNavigateTo,
-  }))
-  const notes = isActiveWalkthroughStep ? (edge.notes ?? null) : null
-  const stepNum = isStepEdgeId(edge.id) ? extractStep(edge.id) : null
-  const navigateTo = hasOnNavigateTo ? edge.navigateTo ?? null : null
-
-  const wrapWithPopover = (node: ReactNode) => {
-    if (isTruthy(notes)) {
-      return <NotePopover notes={notes}>{node}</NotePopover>
-    }
-    if (enableRelationshipDetails && likec4model && edge.relations.length > 0) {
-      return (
-        <RelationshipsDropdownMenu
-          disabled={isDimmed}
-          likec4model={likec4model}
-          edge={edge}>
-          {node}
-        </RelationshipsDropdownMenu>
-      )
-    }
-    return node
-  }
-
-  return (
-    <EdgeLabelRenderer>
-      {wrapWithPopover(
-        <Box {...props}>
-          {stepNum !== null && (
-            <Box className={edgesCss.stepEdgeNumber}>
-              {stepNum}
-            </Box>
-          )}
-          <Stack gap={4} align="center">
-            {isTruthy(label?.text) && (
-              <Text component="div" className={edgesCss.edgeLabelText} lineClamp={5}>
-                {label.text}
-              </Text>
-            )}
-            {isTruthy(edge.technology) && (
-              <Text component="div" className={edgesCss.edgeLabelTechnology}>
-                {'[ ' + edge.technology + ' ]'}
-              </Text>
-            )}
-            {navigateTo && <NavigateToBtn viewId={navigateTo} />}
-          </Stack>
-        </Box>,
-      )}
-    </EdgeLabelRenderer>
-  )
-}
-
-const NotePopover = ({ notes, children }: PropsWithChildren<{ notes: string }>) => {
-  const {
-    nextDynamicStep,
-    hasNext,
-    hasPrevious,
-  } = useDiagramState(s => ({
-    nextDynamicStep: s.nextDynamicStep,
-    hasNext: s.activeWalkthrough?.hasNext ?? false,
-    hasPrevious: s.activeWalkthrough?.hasPrevious ?? false,
-  }))
-
-  const [isOpened, setIsOpened] = useState(false)
-  const portalProps = useMantinePortalProps()
-
-  useDebouncedEffect(
-    () => {
-      setIsOpened(true)
-    },
-    [],
-    300,
-  )
-
-  return (
-    <Popover
-      shadow="xs"
-      offset={16}
-      opened={isOpened}
-      closeOnClickOutside={false}
-      {...portalProps}>
-      <PopoverTarget>
-        {children}
-      </PopoverTarget>
-      <PopoverDropdown
-        component={Stack}
-        p={'xs'}
-        onPointerDownCapture={stopPropagation}
-        onClick={stopPropagation}
-        onDoubleClick={stopPropagation}
-      >
-        <ScrollAreaAutosize maw={450} mah={350} type="scroll" mx={'auto'} mt={2}>
-          <Text component="div" className={edgesCss.edgeNoteText} p={4}>{notes}</Text>
-        </ScrollAreaAutosize>
-        <CloseButton
-          size={'xs'}
-          className={edgesCss.edgeNoteCloseButton}
-          onClick={() => setIsOpened(false)}
-        />
-        {(hasPrevious || hasNext) && (
-          <Group gap={0} justify={hasPrevious ? 'flex-start' : 'flex-end'}>
-            {hasPrevious && (
-              <Button
-                variant="subtle"
-                radius={'xs'}
-                size="compact-xs"
-                onClick={() => nextDynamicStep(-1)}>
-                back
-              </Button>
-            )}
-            {hasNext && (
-              <Button variant="subtle" radius={'xs'} size="compact-xs" onClick={() => nextDynamicStep()}>
-                next
-              </Button>
-            )}
-          </Group>
-        )}
-      </PopoverDropdown>
-    </Popover>
-  )
-}
-
-type NavigateToBtnProps = {
-  viewId: ViewId
-}
-
-function NavigateToBtn({ viewId }: NavigateToBtnProps) {
-  const diagramApi = useDiagramStoreApi()
-  return (
-    <ActionIcon
-      className={clsx('nodrag nopan', edgesCss.cssNavigateBtn)}
-      size={'sm'}
-      radius="sm"
-      onPointerDownCapture={stopPropagation}
-      onClick={event => {
-        event.stopPropagation()
-        diagramApi.getState().onNavigateTo?.(viewId, event)
-      }}
-      role="button"
-      onDoubleClick={stopPropagation}
-    >
-      <IconZoomScan className={edgesCss.cssNavigateBtnIcon} />
-    </ActionIcon>
-  )
-}