@likec4/diagram 1.36.1 → 1.37.0

package/src/base/primitives/element/ElementShape.css.ts

@@ -1,112 +0,0 @@
-import { css, cx } from '@likec4/styles/css'
-
-export const indicator = css({
-  _smallZoom: {
-    visibility: 'hidden',
-  },
-  stroke: 'var(--likec4-palette-loContrast)',
-  fill: '[none]',
-
-  strokeWidth: 8,
-  strokeOpacity: 0.8,
-  visibility: 'hidden',
-  pointerEvents: 'none',
-  _light: {
-    stroke: `[color-mix(in srgb, var(--likec4-palette-fill) 50%,rgb(121, 121, 121))]`,
-  },
-  _whenFocused: {
-    visibility: 'visible',
-  },
-  _groupFocusVisible: {
-    visibility: 'visible',
-  },
-  _whenSelected: {
-    animationStyle: 'indicator',
-    visibility: 'visible',
-  },
-})
-
-export const fillElementFill = css({
-  fill: 'var(--likec4-palette-fill)',
-})
-
-export const fillElementStroke = css({
-  fill: 'var(--likec4-palette-stroke)',
-})
-
-export const fillMixStroke = css({
-  fill: '[color-mix(in srgb, var(--likec4-palette-stroke) 90%, var(--likec4-palette-fill))]',
-  '.shape-svg-multiple &': {
-    fill: 'var(--likec4-palette-fill)',
-  },
-})
-
-const shapeBase = css.raw({
-  top: '0',
-  left: '0',
-  position: 'absolute',
-  width: '100%',
-  height: '100%',
-  pointerEvents: 'none',
-  fill: 'var(--likec4-palette-fill)',
-  stroke: 'var(--likec4-palette-stroke)',
-  overflow: 'visible',
-  // zIndex is removed to improve rendering performance
-  // this forces to keep shape in the same layer as the node
-  // zIndex: -1,
-})
-
-export const shapeSvgMultiple = cx(
-  'shape-svg-multiple',
-  css(shapeBase, {
-    transformOrigin: {
-      base: '50% 50%',
-      _shapeQueue: '75% 25%',
-      _shapeCylinder: '50% 100%',
-      _shapeStorage: '50% 100%',
-    },
-    transform: 'translate(14px, 14px) perspective(300px) translateZ(-8px)',
-    filter: 'brightness(0.65) saturate(0.8)',
-    stroke: '[none]',
-    display: {
-      _smallZoom: 'none',
-      _reduceGraphicsOnPan: 'none',
-      _whenSelected: 'none',
-      _whenFocused: 'none',
-    },
-  }),
-)
-
-export const shapeSvg = css(shapeBase, {
-  transition: `fill 120ms linear, filter 130ms {easings.inOut}`,
-  transitionDelay: '0ms',
-  filter: `
-      drop-shadow(0 2px 1px rgba(0, 0, 0, 0.21))
-      drop-shadow(0 1px 1px color-mix(in srgb, var(--likec4-palette-stroke) 40%, transparent))
-      drop-shadow(0 5px 3px rgba(0, 0, 0, 0.1))
-    `,
-  _whenHovered: {
-    filter: `
-        drop-shadow(0 2px 1px rgba(0, 0, 0, 0.25))
-        drop-shadow(0 8px 3px rgba(0, 0, 0, 0.1))
-        drop-shadow(0 10px 10px rgba(0, 0, 0, 0.05))
-        `,
-  },
-  [`:where([data-likec4-level='true']) &`]: {
-    filter: `
-        drop-shadow(0 2px 1px rgba(0, 0, 0, 0.25))
-        drop-shadow(0 8px 3px rgba(0, 0, 0, 0.1))
-        drop-shadow(0 10px 10px rgba(0, 0, 0, 0.05))
-        `,
-  },
-  _whenSelected: {
-    filter: 'none',
-  },
-  _smallZoom: {
-    filter: 'none',
-  },
-  _whenPanning: {
-    transition: 'none',
-    filter: 'none',
-  },
-})

package/src/likec4diagram/custom/edges/RelationshipsDropdownMenu.tsx

@@ -1,281 +0,0 @@
-import {
-  type DiagramEdge,
-  type DiagramNode,
-  type EdgeId,
-  nameFromFqn,
-} from '@likec4/core'
-import type { LikeC4Model } from '@likec4/core/model'
-import { cx } from '@likec4/styles/css'
-import {
-  type StackProps,
-  ActionIcon,
-  Box,
-  Group,
-  Menu,
-  MenuDivider,
-  MenuDropdown,
-  MenuItem,
-  MenuLabel,
-  MenuTarget,
-  Space,
-  Stack,
-  Text,
-  Tooltip as MantineTooltip,
-  TooltipGroup,
-} from '@mantine/core'
-import { IconArrowRight, IconFileSymlink, IconInfoCircle, IconZoomScan } from '@tabler/icons-react'
-import { type MouseEventHandler, type PropsWithChildren, forwardRef, Fragment, memo, useCallback } from 'react'
-import { filter, isTruthy, map, partition, pipe } from 'remeda'
-import { Link } from '../../../components/Link'
-import { IfEnabled, useDiagramEventHandlers, useEnabledFeatures } from '../../../context'
-import { useMantinePortalProps } from '../../../hooks'
-import { useDiagram, useDiagramContext } from '../../../hooks/useDiagram'
-import { useLikeC4Model } from '../../../likec4model'
-import { findDiagramEdge, findDiagramNode } from '../../../state/utils'
-import * as styles from './RelationshipsDropdownMenu.css'
-
-const stopPropagation: MouseEventHandler = (e) => e.stopPropagation()
-
-export const Tooltip = MantineTooltip.withProps({
-  color: 'gray',
-  fz: 'xs',
-  openDelay: 300,
-  closeDelay: 150,
-  label: '',
-  children: null,
-  offset: 8,
-  withinPortal: false,
-})
-
-export const RelationshipsDropdownMenu = memo((
-  {
-    edgeId,
-    source,
-    target,
-    disabled = false,
-    children,
-  }: PropsWithChildren<{
-    edgeId: EdgeId
-    source: string
-    target: string
-    disabled?: boolean | undefined
-  }>,
-) => {
-  const { diagramEdge, sourceNode, targetNode } = useDiagramContext(
-    ctx => ({
-      diagramEdge: findDiagramEdge(ctx, edgeId),
-      sourceNode: findDiagramNode(ctx, source),
-      targetNode: findDiagramNode(ctx, target),
-    }),
-    undefined,
-    [edgeId, source, target],
-  )
-  const likec4model = useLikeC4Model()
-  const diagram = useDiagram()
-
-  const portalProps = useMantinePortalProps()
-  const onClickOpenOverlay = useCallback((e: React.MouseEvent): void => {
-    e.stopPropagation()
-    diagram.openRelationshipDetails(edgeId)
-  }, [edgeId])
-
-  if (!diagramEdge || !sourceNode || !targetNode) {
-    return <>{children}</>
-  }
-
-  // const { source, target } = diagramEdge
-
-  // invariant(sourceNode.type !== 'view-group', 'View group node cannot have relationships')
-  // invariant(targetNode.type !== 'view-group', 'View group node cannot have relationships')
-
-  const [direct, nested] = pipe(
-    diagramEdge.relations,
-    map(id => {
-      try {
-        return likec4model.findRelationship(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),
-  )
-
-  const renderRelationship = (relationship: LikeC4Model.AnyRelation, index: number) => (
-    <Fragment key={relationship.id}>
-      {index > 0 && <MenuDivider opacity={0.65} />}
-      <MenuItem
-        onClick={onClickOpenOverlay}
-        component={Relationship}
-        relationship={relationship}
-        sourceNode={sourceNode}
-        targetNode={targetNode}
-        edge={diagramEdge} />
-    </Fragment>
-  )
-
-  if (direct.length + nested.length === 0) {
-    return <>{children}</>
-  }
-
-  return (
-    <Menu
-      trigger={'click-hover'}
-      openDelay={300}
-      closeDelay={450}
-      closeOnClickOutside
-      clickOutsideEvents={['pointerdown', 'mousedown', 'click']}
-      closeOnEscape
-      keepMounted={false}
-      closeOnItemClick={false}
-      disabled={disabled}
-      position="bottom-start"
-      middlewares={{ size: { padding: 8 } }}
-      {...portalProps}
-    >
-      <MenuTarget>
-        {children}
-      </MenuTarget>
-      <MenuDropdown
-        className={styles.menuDropdown}
-        onPointerDownCapture={stopPropagation}
-        onPointerDown={stopPropagation}
-        onClick={stopPropagation}
-      >
-        {direct.length > 0 && (
-          <>
-            <MenuLabel>direct relationships</MenuLabel>
-            {direct.map(renderRelationship)}
-          </>
-        )}
-        {nested.length > 0 && (
-          <>
-            {direct.length > 0 && <MenuDivider />}
-            <MenuLabel>resolved from nested</MenuLabel>
-            {nested.map(renderRelationship)}
-          </>
-        )}
-        <Box pos={'absolute'} top={5} right={6}>
-          <ActionIcon
-            size={24}
-            variant="subtle"
-            onClick={onClickOpenOverlay}
-          >
-            <IconInfoCircle style={{ width: '70%' }} />
-          </ActionIcon>
-        </Box>
-      </MenuDropdown>
-    </Menu>
-  )
-})
-
-const Relationship = forwardRef<
-  HTMLDivElement,
-  StackProps & {
-    relationship: LikeC4Model.AnyRelation
-    edge: DiagramEdge
-    sourceNode: DiagramNode
-    targetNode: DiagramNode
-  }
->(({
-  className,
-  relationship: r,
-  edge,
-  sourceNode,
-  targetNode,
-  ...props
-}, ref) => {
-  const diagram = useDiagram()
-  const { enableNavigateTo } = useEnabledFeatures()
-  const { onOpenSource } = useDiagramEventHandlers()
-  const viewId = diagram.currentView.id
-
-  const sourceId = getShortId(r, r.source.id, sourceNode)
-  const targetId = getShortId(r, r.target.id, targetNode)
-  const navigateTo = enableNavigateTo && r.navigateTo?.id !== viewId ? r.navigateTo?.id : undefined
-  const links = r.links
-
-  return (
-    <Stack ref={ref} className={cx(styles.menuItemRelationship, className)} {...props}>
-      <Group gap={4}>
-        <Text component="div" data-likec4-color={sourceNode.color} className={styles.endpoint}>
-          {sourceId}
-        </Text>
-        <IconArrowRight stroke={2.5} size={'11px'} opacity={0.65} />
-        <Text component="div" data-likec4-color={targetNode.color} className={styles.endpoint}>
-          {targetId}
-        </Text>
-        {(navigateTo || !!onOpenSource) && (
-          <TooltipGroup openDelay={100}>
-            <Space w={'xs'} />
-            {navigateTo && (
-              <Tooltip label={'Open dynamic view'}>
-                <ActionIcon
-                  className={cx('nodrag nopan')}
-                  size={'sm'}
-                  radius="sm"
-                  variant="default"
-                  onPointerDownCapture={stopPropagation}
-                  onClick={event => {
-                    event.stopPropagation()
-                    diagram.navigateTo(navigateTo)
-                  }}
-                  role="button"
-                >
-                  <IconZoomScan size="80%" stroke={2} />
-                </ActionIcon>
-              </Tooltip>
-            )}
-            <IfEnabled feature="Vscode">
-              <Tooltip label={'Open source'}>
-                <ActionIcon
-                  className={cx('nodrag nopan')}
-                  size={'sm'}
-                  radius="sm"
-                  variant="default"
-                  onPointerDownCapture={stopPropagation}
-                  onClick={event => {
-                    event.stopPropagation()
-                    diagram.openSource({ relation: r.id })
-                  }}
-                  role="button"
-                >
-                  <IconFileSymlink size="80%" stroke={2} />
-                </ActionIcon>
-              </Tooltip>
-            </IfEnabled>
-          </TooltipGroup>
-        )}
-      </Group>
-      <Box className={styles.title}>{r.title || 'untitled'}</Box>
-      {r.description.nonEmpty && <Text size="xs" c="dimmed">{r.description.text}</Text>}
-      {links.length > 0 && (
-        <Stack
-          gap={3}
-          justify="stretch"
-          align="stretch">
-          {links.map((link) => <Link key={link.url} size="sm" value={link} />)}
-        </Stack>
-      )}
-    </Stack>
-  )
-})
-
-function getShortId(
-  r: LikeC4Model.AnyRelation,
-  actualEndpointId: string,
-  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 || ''
-
-  return nameFromFqn(diagramNodeId) + actualEndpointId.slice(diagramNodeId.length)
-}