@likec4/diagram 1.41.0 → 1.42.1

package/src/base/primitives/element/ElementNodeContainer.tsx

@@ -1,98 +0,0 @@
-import {
-  type Color,
-  type ElementShape,
-  type ElementStyle,
-  ensureSizes,
-} from '@likec4/core/types'
-import { cx } from '@likec4/styles/css'
-import type { MotionNodeLayoutOptions } from 'motion/react'
-import * as m from 'motion/react-m'
-import { type CSSProperties, type ReactNode, forwardRef } from 'react'
-import type { NodeProps } from '../../types'
-import * as styles from './ElementNodeContainer.css'
-
-export type RequiredData = {
-  color: Color
-  shape: ElementShape
-  style?: ElementStyle
-}
-
-export type ElementNodeContainerProps =
-  & {
-    nodeProps: NodeProps<RequiredData>
-    children?: ReactNode | undefined
-    className?: string | undefined
-    style?: CSSProperties | undefined
-    [key: `data-${string}`]: string | undefined
-  }
-  & MotionNodeLayoutOptions
-/**
- * Top-level primitive to compose leaf nodes renderers.
- * This container provides the state via data-* attributes
- */
-export const ElementNodeContainer = forwardRef<HTMLDivElement, ElementNodeContainerProps>(({
-  nodeProps: {
-    selected = false,
-    selectable = false,
-    data: {
-      hovered: isHovered = false,
-      dimmed: isDimmed = false,
-      ...data
-    },
-  },
-  className,
-  style,
-  children,
-  ...rest
-}, ref) => {
-  let scale = 1
-  switch (true) {
-    case isHovered:
-      scale = 1.05
-      break
-    case selected:
-      scale = 1.02
-      break
-  }
-
-  const {
-    size,
-    padding,
-    textSize,
-  } = ensureSizes(data.style ?? {})
-
-  return (
-    <m.div
-      ref={ref}
-      className={cx(
-        styles.container,
-        'group',
-        'likec4-element-node',
-        className,
-      )}
-      initial={false}
-      {...selectable && {
-        animate: {
-          scale,
-        },
-        whileTap: { scale: 0.98 },
-      }}
-      data-likec4-hovered={isHovered}
-      data-likec4-color={data.color}
-      data-likec4-shape={data.shape}
-      data-likec4-shape-size={size}
-      data-likec4-spacing={padding}
-      data-likec4-text-size={textSize}
-      {...(isDimmed !== false && {
-        'data-likec4-dimmed': isDimmed,
-      })}
-      style={{
-        ...style as any,
-      }}
-      {...rest}
-    >
-      {children}
-    </m.div>
-  )
-})
-ElementNodeContainer.displayName = 'ElementNodeContainer'

package/src/base/primitives/element/ElementShape.tsx

@@ -1,250 +0,0 @@
-import { nonexhaustive } from '@likec4/core'
-import type { ElementShape, ElementStyle } from '@likec4/core/types'
-import { Box } from '@likec4/styles/jsx'
-import { elementShapeRecipe } from '@likec4/styles/recipes'
-import { roundDpr } from '../../../utils'
-
-export function cylinderSVGPath(diameter: number, height: number, tilt = 0.065) {
-  const radius = Math.round(diameter / 2)
-  // const tiltAdjustedHeight = height * Math.cos((tilt * Math.PI) / 2)
-  const rx = radius
-  const ry = roundDpr(tilt * radius)
-  const tiltAdjustedHeight = height - 2 * ry
-
-  const path = `  M ${diameter},${ry}
-        a ${rx},${ry} 0,0,0 ${-diameter} 0
-        l 0,${tiltAdjustedHeight}
-        a ${rx},${ry} 0,0,0 ${diameter} 0
-        l 0,${-tiltAdjustedHeight}
-        z
-        `
-    .replace(/\s+/g, ' ')
-    .trim()
-  return {
-    path,
-    ry,
-    rx,
-  }
-}
-
-function queueSVGPath(width: number, height: number, tilt = 0.185) {
-  const diameter = height
-  const radius = Math.round(diameter / 2)
-  const ry = radius
-  const rx = roundDpr((diameter / 2) * tilt)
-  const tiltAdjustedWidth = width - 2 * rx
-
-  const path = `
-    M ${rx},0
-    a ${rx},${ry} 0,0,0 0 ${diameter}
-    l ${tiltAdjustedWidth},0
-    a ${rx},${ry} 0,0,0 0 ${-diameter}
-    z`
-    .replace(/\s+/g, ' ')
-    .trim()
-  return {
-    path,
-    ry,
-    rx,
-  }
-}
-
-const PersonIcon = {
-  width: 115,
-  height: 120,
-  path:
-    `M57.9197 0C10.9124 0 33.5766 54.75 33.5766 54.75C38.6131 62.25 45.3285 60.75 45.3285 66C45.3285 70.5 39.4526 72 33.5766 72.75C24.3431 72.75 15.9489 71.25 7.55474 84.75C2.51825 93 0 120 0 120H115C115 120 112.482 93 108.285 84.75C99.8905 70.5 91.4963 72.75 82.2628 72C76.3869 71.25 70.5109 69.75 70.5109 65.25C70.5109 60.75 77.2263 62.25 82.2628 54C82.2628 54.75 104.927 0 57.9197 0V0Z`,
-} as const
-
-type ElementShapeProps = {
-  shape: ElementShape
-  w: number
-  h: number
-}
-
-function ShapeSvg({ shape, w, h }: ElementShapeProps) {
-  switch (shape) {
-    case 'mobile': {
-      return (
-        <>
-          <rect
-            width={w}
-            height={h}
-            rx={6}
-            data-likec4-fill="mix-stroke"
-            strokeWidth={0}
-          />
-          <g data-likec4-fill="fill" strokeWidth={0}>
-            <circle cx={17} cy={h / 2} r={12} />
-            <rect x={33} y={12} width={w - 44} height={h - 24} rx={5} />
-          </g>
-        </>
-      )
-    }
-    case 'browser': {
-      return (
-        <>
-          <rect
-            width={w}
-            height={h}
-            rx={6}
-            data-likec4-fill="mix-stroke"
-            strokeWidth={0}
-          />
-          <g data-likec4-fill="fill" strokeWidth={0}>
-            <circle cx={16} cy={17} r={7} />
-            <circle cx={36} cy={17} r={7} />
-            <circle cx={56} cy={17} r={7} />
-            <rect x={70} y={8} width={w - 80} height={17} rx={4} />
-            <rect x={10} y={32} width={w - 20} height={h - 42} rx={4} />
-          </g>
-        </>
-      )
-    }
-    case 'person': {
-      return (
-        <>
-          <rect
-            width={w}
-            height={h}
-            rx={6}
-            strokeWidth={0} />
-          <svg
-            x={w - PersonIcon.width - 6}
-            y={h - PersonIcon.height}
-            width={PersonIcon.width}
-            height={PersonIcon.height}
-            viewBox={`0 0 ${PersonIcon.width} ${PersonIcon.height}`}
-            data-likec4-fill="mix-stroke"
-          >
-            <path
-              strokeWidth={0}
-              d={PersonIcon.path} />
-          </svg>
-        </>
-      )
-    }
-    case 'queue': {
-      const { path, rx, ry } = queueSVGPath(w, h)
-      return (
-        <>
-          <path d={path} strokeWidth={2} />
-          <ellipse cx={rx} cy={ry} ry={ry - 0.75} rx={rx} data-likec4-fill="mix-stroke" strokeWidth={2} />
-        </>
-      )
-    }
-    case 'storage':
-    case 'cylinder': {
-      const { path, rx, ry } = cylinderSVGPath(w, h)
-      return (
-        <>
-          <path d={path} strokeWidth={2} />
-          <ellipse cx={rx} cy={ry} ry={ry} rx={rx - 0.75} data-likec4-fill="mix-stroke" strokeWidth={2} />
-        </>
-      )
-    }
-    case 'rectangle': {
-      return (
-        <rect
-          width={w}
-          height={h}
-          rx={6}
-          strokeWidth={0} />
-      )
-    }
-    default: {
-      return nonexhaustive(shape)
-    }
-  }
-}
-
-function ShapeHtml({ multiple, withOutLine }: { multiple: boolean; withOutLine: boolean }) {
-  return (
-    <Box
-      className={elementShapeRecipe({
-        shapetype: 'html',
-      })}
-    >
-      {multiple && <div className={'likec4-shape-multiple'} />}
-      {withOutLine && <div className={'likec4-shape-outline'} />}
-    </Box>
-  )
-}
-
-type Data = {
-  shape: ElementShape
-  width: number
-  height: number
-  style?: ElementStyle
-}
-
-// type ElementShapePrimitiveProps = NodeProps<Data> & {
-type ElementShapePrimitiveProps = {
-  data: Data
-  width?: number
-  height?: number
-  // isMultiple?: boolean | undefined
-  /**
-   * @default true
-   */
-  withSelectedIndicator?: boolean | undefined
-}
-
-export function ElementShape(
-  { data, width, height, withSelectedIndicator = true }: ElementShapePrimitiveProps,
-) {
-  let w = !!width && width > 10 ? width : data.width
-  let h = !!height && height > 10 ? height : data.height
-  const isMultiple = data.style?.multiple ?? false
-
-  if (data.shape === 'rectangle') {
-    return <ShapeHtml multiple={isMultiple} withOutLine={withSelectedIndicator} />
-  }
-
-  const className = elementShapeRecipe({
-    shapetype: 'svg',
-  })
-
-  return (
-    <>
-      {isMultiple && (
-        <svg className={className} data-likec4-shape-multiple="true" viewBox={`0 0 ${w} ${h}`}>
-          <ShapeSvg shape={data.shape} w={w} h={h} />
-        </svg>
-      )}
-      <svg className={className} viewBox={`0 0 ${w} ${h}`}>
-        {withSelectedIndicator && <SelectedIndicator shape={data.shape} w={w} h={h} />}
-        <ShapeSvg shape={data.shape} w={w} h={h} />
-      </svg>
-    </>
-  )
-}
-
-/**
- * When element is selected, this component is used to render the indicator
- */
-export function SelectedIndicator({ shape, w, h }: ElementShapeProps) {
-  let svg
-  switch (shape) {
-    case 'queue':
-      svg = <path d={queueSVGPath(w, h).path} />
-      break
-    case 'storage':
-    case 'cylinder': {
-      svg = <path d={cylinderSVGPath(w, h).path} />
-      break
-    }
-    default: {
-      svg = (
-        <rect
-          x={-1}
-          y={-1}
-          width={w + 2}
-          height={h + 2}
-          rx={6} />
-      )
-      break
-    }
-  }
-  return <g className={'likec4-shape-outline'}>{svg}</g>
-}

package/src/base/primitives/element/ElementTags.tsx

@@ -1,190 +0,0 @@
-import { isTagColorSpecified } from '@likec4/core'
-import { css, cx } from '@likec4/styles/css'
-import { type BoxProps, Box, HStack } from '@likec4/styles/jsx'
-import { hstack } from '@likec4/styles/patterns'
-import { likec4tag } from '@likec4/styles/recipes'
-import { useDebouncedState, useHover } from '@mantine/hooks'
-import { NodeToolbar, Position } from '@xyflow/react'
-import { deepEqual } from 'fast-equals'
-import { forwardRef, memo, useCallback, useEffect } from 'react'
-import { useTagSpecification } from '../../../context/TagStylesContext'
-import { useDiagram } from '../../../hooks/useDiagram'
-import { useCurrentZoom } from '../../../hooks/useXYFlow'
-import { stopPropagation } from '../../../utils/xyflow'
-import type { NodeProps } from '../../types'
-
-export type ElementTagProps = {
-  tag: string
-  cursor?: 'pointer' | 'default'
-} & Omit<BoxProps, 'children'>
-
-export const ElementTag = forwardRef<HTMLDivElement, ElementTagProps>(
-  ({ tag, cursor, className, style, ...props }, ref) => {
-    const spec = useTagSpecification(tag)
-    return (
-      <Box
-        ref={ref}
-        data-likec4-tag={tag}
-        className={cx(
-          likec4tag({
-            autoTextColor: isTagColorSpecified(spec),
-          }),
-          className,
-        )}
-        {...props}
-        style={{
-          cursor,
-          ...style,
-        }}
-      >
-        <span>#</span>
-        <span>{tag}</span>
-      </Box>
-    )
-  },
-)
-
-type Data = {
-  tags: readonly string[] | null | undefined
-  width: number
-}
-type ElementTagsProps = NodeProps<Data>
-
-const propsAreEqual = (prev: ElementTagsProps, next: ElementTagsProps) => {
-  return (
-    prev.data.width === next.data.width &&
-    deepEqual(prev.data.tags, next.data.tags) &&
-    (prev.data.hovered ?? false) === (next.data.hovered ?? false)
-  )
-}
-export const ElementTags = memo(({ id, data: { tags, width, hovered = false } }: ElementTagsProps) => {
-  const {
-    hovered: isTagsBarHovered,
-    ref: tagsBarRef,
-  } = useHover()
-  const {
-    hovered: isTagsToolbarHovered,
-    ref: tagsToolbarRef,
-  } = useHover()
-
-  const [isVisible, setVisible] = useDebouncedState(false, hovered ? 120 : 300)
-
-  useEffect(() => {
-    setVisible(visibleNow => {
-      if (!visibleNow) {
-        return hovered && (isTagsBarHovered || isTagsToolbarHovered)
-      }
-      return hovered || isTagsBarHovered || isTagsToolbarHovered
-    })
-  }, [isTagsBarHovered, isTagsToolbarHovered, hovered])
-
-  const zoom = useCurrentZoom()
-  const zoomIsLargeEnough = zoom > 1.2
-
-  const diagram = useDiagram()
-
-  const onHover = (tag: string) => {
-    diagram.send({ type: 'tag.highlight', tag })
-  }
-
-  const onLeave = useCallback(() => {
-    diagram.send({ type: 'tag.unhighlight' })
-  }, [])
-
-  if (!tags || tags.length === 0) {
-    return null
-  }
-  const maxWidth = Math.max(Math.round(width * zoom) - 10, 200)
-
-  return (
-    <>
-      <div
-        ref={tagsBarRef}
-        className={cx(
-          'likec4-element-tags',
-          hstack({
-            pointerEvents: 'all',
-            gap: '1',
-            alignItems: 'flex-end',
-            justifyItems: 'stretch',
-            position: 'absolute',
-            width: '100%',
-            bottom: '0',
-            left: '0',
-            padding: '1',
-            _shapeCylinder: {
-              bottom: '[5px]',
-            },
-            _shapeStorage: {
-              bottom: '[5px]',
-            },
-            _shapeQueue: {
-              bottom: '0',
-              paddingLeft: '[14px]',
-            },
-          }),
-        )}
-        onClick={stopPropagation}
-      >
-        {tags.map((tag) => (
-          <Box
-            key={id + '#' + tag}
-            data-likec4-tag={tag}
-            className={css({
-              layerStyle: 'likec4.tag',
-              flex: '1',
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-              maxWidth: 50,
-              height: 5,
-              _whenHovered: {
-                height: 12,
-                borderRadius: 4,
-                transitionDelay: '.08s',
-              },
-              transition: 'fast',
-            })}
-          />
-        ))}
-      </div>
-      <NodeToolbar isVisible={isVisible} align="start" position={Position.Bottom}>
-        <HStack
-          ref={tagsToolbarRef}
-          css={{
-            gap: '0.5',
-            alignItems: 'baseline',
-            flexWrap: 'wrap',
-            pb: 'sm',
-            translate: 'auto',
-            x: '[-8px]',
-            maxWidth,
-          }}
-        >
-          {tags.map((tag) => (
-            <ElementTag
-              key={tag}
-              tag={tag}
-              cursor="pointer"
-              className={css({
-                userSelect: 'none',
-                ...(zoomIsLargeEnough && {
-                  fontSize: 'lg',
-                  borderRadius: '[4px]',
-                  px: '1.5', // 6px
-                }),
-              })}
-              onClick={e => {
-                e.stopPropagation()
-                diagram.openSearch(`#${tag}`)
-              }}
-              onMouseEnter={() => onHover(tag)}
-              onMouseLeave={onLeave}
-            />
-          ))}
-        </HStack>
-      </NodeToolbar>
-    </>
-  )
-}, propsAreEqual)
-ElementTags.displayName = 'ElementTags'

package/src/base/primitives/element/ElementTitle.tsx

@@ -1,94 +0,0 @@
-import { type DiagramNode, type RichTextOrEmpty, ensureSizes } from '@likec4/core/types'
-import { cx } from '@likec4/styles/css'
-import { Box } from '@likec4/styles/jsx'
-import { elementNodeData, elementNodeIcon as elementIconRecipe } from '@likec4/styles/recipes'
-import { Text } from '@mantine/core'
-import { isEmpty, isNumber, isTruthy } from 'remeda'
-import type { Simplify } from 'type-fest'
-import { IconRenderer } from '../../../context/IconRenderer'
-import type { NodeProps, NonOptional } from '../../types'
-import { MarkdownBlock } from '../MarkdownBlock'
-
-type Data = Simplify<
-  & NonOptional<
-    Pick<
-      DiagramNode,
-      | 'title'
-      | 'technology'
-      | 'color'
-      | 'style'
-    >
-  >
-  & {
-    description?: RichTextOrEmpty
-    icon?: string | null
-  }
->
-
-type ElementTitleProps = NodeProps<Data> & {
-  iconSize?: number
-}
-
-export function ElementTitle({ id, data, iconSize }: ElementTitleProps) {
-  const elementIcon = IconRenderer({
-    element: {
-      id,
-      title: data.title,
-      icon: data.icon,
-    },
-    className: elementIconRecipe(),
-  })
-  const classes = elementNodeData({
-    hasIcon: isTruthy(elementIcon),
-    hasDescription: !!data.description?.nonEmpty,
-    hasTechnology: !isEmpty(data.technology ?? ''),
-  })
-  const { size } = ensureSizes(data.style)
-  const isSm = size === 'sm'
-  const isSmOrXs = isSm || size === 'xs'
-  return (
-    <Box
-      className={cx(
-        classes.root,
-        'likec4-element',
-      )}
-      style={isNumber(iconSize)
-        ? {
-          // @ts-ignore
-          ['--likec4-icon-size']: `${iconSize}px`,
-        }
-        : undefined}
-    >
-      {elementIcon}
-      <Box className={cx(classes.textContainer, 'likec4-element-main-props')}>
-        <Text
-          component="div"
-          className={cx(classes.title, 'likec4-element-title')}
-          lineClamp={isSmOrXs ? 2 : 3}>
-          {data.title}
-        </Text>
-
-        {data.technology && (
-          <Text
-            component="div"
-            className={cx(classes.technology, 'likec4-element-technology')}>
-            {data.technology}
-          </Text>
-        )}
-
-        {data.description?.nonEmpty && (
-          <MarkdownBlock
-            className={cx(classes.description, 'likec4-element-description')}
-            value={data.description}
-            uselikec4palette
-            hideIfEmpty
-            // Workaround for lineClamp not working with nested TABLE elements (if markdown has tables)
-            maxHeight={data.description.isMarkdown ? '8rem' : undefined}
-            // textScale={0.95}
-            lineClamp={isSmOrXs ? 3 : 5}
-          />
-        )}
-      </Box>
-    </Box>
-  )
-}

package/src/base/primitives/index.ts

@@ -1,20 +0,0 @@
-export { CompoundActionButton } from './compound/CompoundActionButton'
-export { CompoundDetailsButton } from './compound/CompoundDetailsButton'
-export { CompoundNodeContainer } from './compound/CompoundNodeContainer'
-export { CompoundTitle } from './compound/CompoundTitle'
-export { customEdge } from './customEdge'
-export { customNode } from './customNode'
-export { EdgeActionButton } from './edge/EdgeActionButton'
-export { EdgeContainer } from './edge/EdgeContainer'
-export { EdgeLabel } from './edge/EdgeLabel'
-export { EdgeLabelContainer } from './edge/EdgeLabelContainer'
-export { arrowTypeToMarker, EdgeMarkers, type EdgeMarkerType } from './edge/EdgeMarkers'
-export { EdgePath } from './edge/EdgePath'
-export { ElementActionButtons } from './element/ElementActionButtons'
-export { ElementDetailsButton } from './element/ElementDetailsButton'
-export { ElementNodeContainer } from './element/ElementNodeContainer'
-export { ElementShape } from './element/ElementShape'
-export { ElementTag, ElementTags } from './element/ElementTags'
-export { ElementTitle } from './element/ElementTitle'
-export { MarkdownBlock } from './MarkdownBlock'
-export { DefaultHandles } from './NodeHandles'