@likec4/diagram 1.19.1 → 1.20.0

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

@@ -0,0 +1,54 @@
+import { style } from '@vanilla-extract/css'
+import { vars } from '../../../theme-vars'
+
+export const container = style({
+  position: 'absolute',
+  top: 2,
+  right: 2,
+  zIndex: 10,
+  selectors: {
+    [`:where([data-likec4-shape='browser']) &`]: {
+      right: 5,
+    },
+    ':where([data-likec4-shape="cylinder"], [data-likec4-shape="storage"]) &': {
+      top: 14,
+    },
+    ':where([data-likec4-shape="queue"]) &': {
+      top: 1,
+      right: 12,
+    },
+  },
+})
+
+export const actionIconWrapper = style({
+  width: 'min-content',
+  height: 'min-content',
+  // display: 'flex',
+  // justifyContent: 'center',
+  // alignItems: 'center',
+})
+
+export const actionIcon = style({
+  pointerEvents: 'all',
+  color: vars.element.loContrast,
+  cursor: 'pointer',
+  backgroundColor: 'var(--ai-bg)',
+  'vars': {
+    '--ai-bg-idle': `color-mix(in srgb , ${vars.element.fill},  transparent 99%)`,
+    '--ai-bg': `var(--ai-bg-idle)`,
+    '--ai-bg-hover': `color-mix(in srgb , ${vars.element.fill} 65%, ${vars.element.stroke})`,
+    '--ai-hover': `color-mix(in srgb , ${vars.element.fill} 50%, ${vars.element.stroke})`,
+  },
+  boxShadow: '1px 1px 3px 0px transparent',
+  ':hover': {
+    boxShadow: '1px 1px 3px 0px rgba(0, 0, 0, 0.15)',
+  },
+  // selectors: {
+  //   [`:where([data-hovered='true']) &`]: {
+  //     // boxShadow: '1px 1px 3px 0px rgba(0, 0, 0, 0.15)',
+  //     // vars: {
+  //     //   '--ai-bg': `var(--ai-bg-hover)`,
+  //     // },
+  //   },
+  // },
+})

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

@@ -0,0 +1,59 @@
+import { ActionIcon, Box } from '@mantine/core'
+import { IconId } from '@tabler/icons-react'
+import clsx from 'clsx'
+import { m } from 'framer-motion'
+import { stopPropagation } from '../../../utils/xyflow'
+import type { NodeProps } from '../../types'
+import * as css from './ElementDetailsButton.css'
+
+type ElementDetailsButtonProps = NodeProps & {
+  icon?: React.ReactNode
+  onClick: (e: React.MouseEvent) => void
+}
+
+export function ElementDetailsButton({
+  selected = false,
+  data: {
+    hovered: isHovered = false,
+  },
+  icon,
+  onClick,
+}: ElementDetailsButtonProps) {
+  return (
+    <Box className={clsx(css.container, 'details-button')}>
+      <Box
+        className={clsx('nodrag nopan', css.actionIconWrapper)}
+        component={m.div}
+        initial={false}
+        style={{
+          originX: 0.45,
+          originY: 0.55,
+        }}
+        animate={(isHovered || selected)
+          ? {
+            scale: 1.2,
+            opacity: 0.7,
+          }
+          : {
+            scale: 1,
+            opacity: 0.5,
+          }}
+        whileHover={{
+          scale: 1.4,
+          opacity: 1,
+        }}
+        whileTap={{ scale: 1.15 }}
+      >
+        <ActionIcon
+          className={css.actionIcon}
+          size={'md'}
+          radius="md"
+          onClick={onClick}
+          onDoubleClick={stopPropagation}
+        >
+          {icon ?? <IconId stroke={1.8} style={{ width: '75%' }} />}
+        </ActionIcon>
+      </Box>
+    </Box>
+  )
+}

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

@@ -0,0 +1,47 @@
+import { createVar, fallbackVar, globalStyle, style } from '@vanilla-extract/css'
+import { transitions, vars } from '../../../theme-vars'
+
+export const stokeFillMix = createVar('stroke-fill-mix')
+
+export const container = style({
+  // position: 'absolute',
+  // top: 0,
+  // left: 0,
+  position: 'relative',
+  width: '100%',
+  height: '100%',
+  padding: 0,
+  margin: 0,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  vars: {
+    [stokeFillMix]: `color-mix(in srgb, ${vars.element.stroke} 90%, ${vars.element.fill})`,
+  },
+  // selectors: {
+  //   ':where(.react-flow__node.selected) &': {
+  //     willChange: 'transform',
+  //   },
+  // },
+  // Catch pointer below the element
+  ':after': {
+    content: ' ',
+    position: 'absolute',
+    top: '100%',
+    left: 0,
+    right: 0,
+    height: 20,
+    background: 'transparent',
+    pointerEvents: 'all',
+  },
+})
+
+export const dimmed = style({})
+
+globalStyle(`.react-flow__node:has(${dimmed})`, {
+  opacity: 0.25,
+  transition: 'opacity 400ms ease-in-out, filter 500ms ease-in-out',
+  transitionDelay: '50ms',
+  filter: `grayscale(0.85) ${fallbackVar(vars.safariAnimationHook, 'blur(2px)')}`,
+  willChange: 'opacity, filter',
+})

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

@@ -0,0 +1,72 @@
+import type { DiagramNode } from '@likec4/core'
+import { type BoxProps, Box, createPolymorphicComponent } from '@mantine/core'
+import clsx from 'clsx'
+import { m } from 'framer-motion'
+import { type PropsWithChildren, forwardRef } from 'react'
+import type { NodeProps } from '../../types'
+import * as css from './ElementNodeContainer.css'
+
+type RequiredData = Pick<
+  DiagramNode,
+  | 'color'
+  | 'shape'
+>
+
+type ElementNodeContainerProps =
+  & BoxProps
+  & PropsWithChildren<{
+    nodeProps: NodeProps<RequiredData>
+  }>
+
+export const ElementNodeContainer = createPolymorphicComponent<'div', ElementNodeContainerProps>(
+  forwardRef<HTMLDivElement, ElementNodeContainerProps>(({
+    nodeProps: {
+      selected = false,
+      selectable = false,
+      data: {
+        hovered: isHovered = false,
+        dimmed: isDimmed = false,
+        ...data
+      },
+    },
+    children,
+    ...rest
+  }, ref) => {
+    let scale = 1
+    switch (true) {
+      case isHovered:
+        scale = 1.05
+        break
+      case selected:
+        scale = 1.02
+        break
+    }
+
+    return (
+      <Box
+        component={m.div}
+        ref={ref}
+        className={clsx([
+          css.container,
+          isDimmed && css.dimmed,
+          'likec4-element-node',
+        ])}
+        initial={false}
+        layoutRoot
+        {...selectable && {
+          animate: {
+            scale,
+          },
+          whileTap: { scale: 0.98 },
+        }}
+        data-hovered={isHovered}
+        data-likec4-color={data.color}
+        data-likec4-shape={data.shape}
+        {...rest}
+      >
+        {children}
+      </Box>
+    )
+  }),
+)
+ElementNodeContainer.displayName = 'ElementNodeContainer'

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

@@ -0,0 +1,134 @@
+import { createVar, fallbackVar, globalStyle, keyframes, style } from '@vanilla-extract/css'
+import { easings, mantine, vars } from '../../../theme-vars'
+import { container, stokeFillMix } from './ElementNodeContainer.css'
+
+const indicatorKeyframes = keyframes({
+  'from': {
+    strokeOpacity: 0.8,
+  },
+  'to': {
+    strokeOpacity: 0.5,
+  },
+})
+
+const outlineColor = fallbackVar(
+  mantine.colors.primaryColors.outline,
+  mantine.colors.primaryColors.filled,
+  vars.element.stroke,
+)
+
+const indicatorStroke = createVar('indicator-stroke')
+
+export const indicator = style({
+  stroke: indicatorStroke,
+  fill: 'none',
+  transformOrigin: 'center center',
+  strokeWidth: 6,
+  animationDuration: '1s',
+  animationIterationCount: 'infinite',
+  animationDirection: 'alternate',
+  strokeOpacity: 0.8,
+  visibility: 'hidden',
+  pointerEvents: 'none',
+  vars: {
+    [indicatorStroke]: vars.element.loContrast,
+  },
+  selectors: {
+    ':where(.react-flow__node.selected) &': {
+      visibility: 'visible',
+      animationName: fallbackVar(vars.safariAnimationHook, indicatorKeyframes),
+    },
+    [`:where(.react-flow__node:focus-visible, ${container}:focus-visible) &`]: {
+      strokeWidth: 10,
+      stroke: outlineColor,
+      visibility: 'visible',
+    },
+    ':where([data-likec4-shape="queue"], [data-likec4-shape="cylinder"], [data-likec4-shape="storage"]) &': {
+      strokeWidth: 10,
+    },
+    [`:where([data-mantine-color-scheme='light']) &`]: {
+      vars: {
+        [indicatorStroke]: `color-mix(in srgb, ${vars.element.fill} 50%, #3c3c3c)`,
+      },
+    },
+  },
+})
+
+export const fillElementFill = style({
+  fill: vars.element.fill,
+})
+
+export const fillElementStroke = style({
+  fill: vars.element.stroke,
+})
+
+export const fillMixStroke = style({
+  fill: fallbackVar(stokeFillMix, `color-mix(in srgb, ${vars.element.stroke} 90%, ${vars.element.fill})`),
+})
+
+const filterShadow = createVar('filter-shadow')
+
+const shapeBase = style({
+  top: 0,
+  left: 0,
+  position: 'absolute',
+  width: '100%',
+  height: '100%',
+  pointerEvents: 'none',
+  fill: vars.element.fill,
+  stroke: vars.element.stroke,
+  overflow: 'visible',
+  zIndex: -1,
+})
+
+export const shapeSvgMultiple = style([shapeBase, {
+  transformOrigin: '50% 25%',
+  transform: 'translate(14px, 14px) perspective(300px) translateZ(-8px)',
+  filter: ' brightness(0.65) saturate(0.8)',
+  stroke: 'none',
+  selectors: {
+    // [`:where(.react-flow__node.selected, .react-flow__node:focus-visible, ${container}:focus-visible) &`]: {
+    //   visibility: 'hidden',
+    // },
+    ':where([data-likec4-shape="cylinder"], [data-likec4-shape="storage"]) &': {
+      transformOrigin: '50% 100%',
+    },
+    ':where([data-likec4-shape="queue"]) &': {
+      transformOrigin: '75% 25%',
+      // transform: 'translate(14px,15px) perspective(200px) translateZ(-2px)',
+    },
+  },
+  // filter: 'brightness(0.5)'
+}])
+globalStyle(`.${shapeSvgMultiple} ${fillMixStroke}`, {
+  fill: vars.element.fill,
+})
+export const shapeSvg = style([shapeBase, {
+  filter: filterShadow,
+  transition: `fill 120ms linear, filter 130ms ${easings.inOut}`,
+  transitionDelay: '0ms',
+  vars: {
+    [filterShadow]: `
+      drop-shadow(0 2px 1px rgba(0, 0, 0, 0.21))
+      drop-shadow(0 1px 1px color-mix(in srgb, ${vars.element.stroke} 40%, transparent))
+      drop-shadow(0 5px 3px rgba(0, 0, 0, 0.1))
+    `,
+  },
+  selectors: {
+    [`:where([data-hovered='true']) &`]: {
+      vars: {
+        [filterShadow]: `
+        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(.react-flow__node.selected, .react-flow__node:focus-visible, ${container}:focus-visible) &`]: {
+      vars: {
+        [filterShadow]: `none`,
+      },
+    },
+  },
+}])

package/src/{xyflow/nodes/element/ElementShapeSvg.tsx → base/primitives/element/ElementShape.tsx}

@@ -1,6 +1,7 @@
-import { type ElementShape, nonexhaustive } from '@likec4/core'
-import { toDomPrecision } from '../../utils'
-import { fillElementFill, fillMixStroke } from './element.css'
+import { type DiagramNode, type ElementShape, nonexhaustive } from '@likec4/core'
+import { toDomPrecision } from '../../../utils/xyflow'
+import type { NodeProps } from '../../types'
+import * as css from './ElementShape.css'
 
 export function cylinderSVGPath(diameter: number, height: number, tilt = 0.065) {
   const radius = Math.round(diameter / 2)
@@ -21,7 +22,7 @@ export function cylinderSVGPath(diameter: number, height: number, tilt = 0.065)
   return {
     path,
     ry,
-    rx
+    rx,
   }
 }
 
@@ -43,7 +44,7 @@ function queueSVGPath(width: number, height: number, tilt = 0.185) {
   return {
     path,
     ry,
-    rx
+    rx,
   }
 }
 
@@ -51,16 +52,16 @@ 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`
+    `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 ElementShapeSvgProps = {
+type ElementShapeProps = {
   shape: ElementShape
   w: number
   h: number
 }
 
-export function ElementShapeSvg({ shape, w, h }: ElementShapeSvgProps) {
+function ElementShapeSvg({ shape, w, h }: ElementShapeProps) {
   switch (shape) {
     case 'mobile': {
       return (
@@ -69,10 +70,10 @@ export function ElementShapeSvg({ shape, w, h }: ElementShapeSvgProps) {
             width={w}
             height={h}
             rx={6}
-            className={fillMixStroke}
+            className={css.fillMixStroke}
             strokeWidth={0}
           />
-          <g className={fillElementFill} strokeWidth={0}>
+          <g className={css.fillElementFill} strokeWidth={0}>
             <circle cx={17} cy={h / 2} r={12} />
             <rect x={33} y={12} width={w - 44} height={h - 24} rx={5} />
           </g>
@@ -86,10 +87,10 @@ export function ElementShapeSvg({ shape, w, h }: ElementShapeSvgProps) {
             width={w}
             height={h}
             rx={6}
-            className={fillMixStroke}
+            className={css.fillMixStroke}
             strokeWidth={0}
           />
-          <g className={fillElementFill} strokeWidth={0}>
+          <g className={css.fillElementFill} strokeWidth={0}>
             <circle cx={16} cy={17} r={7} />
             <circle cx={36} cy={17} r={7} />
             <circle cx={56} cy={17} r={7} />
@@ -113,7 +114,7 @@ export function ElementShapeSvg({ shape, w, h }: ElementShapeSvgProps) {
             width={PersonIcon.width}
             height={PersonIcon.height}
             viewBox={`0 0 ${PersonIcon.width} ${PersonIcon.height}`}
-            className={fillMixStroke}
+            className={css.fillMixStroke}
           >
             <path
               strokeWidth={0}
@@ -127,7 +128,7 @@ export function ElementShapeSvg({ shape, w, h }: ElementShapeSvgProps) {
       return (
         <>
           <path d={path} strokeWidth={2} />
-          <ellipse cx={rx} cy={ry} ry={ry - 0.75} rx={rx} className={fillMixStroke} strokeWidth={2} />
+          <ellipse cx={rx} cy={ry} ry={ry - 0.75} rx={rx} className={css.fillMixStroke} strokeWidth={2} />
         </>
       )
     }
@@ -137,7 +138,7 @@ export function ElementShapeSvg({ shape, w, h }: ElementShapeSvgProps) {
       return (
         <>
           <path d={path} strokeWidth={2} />
-          <ellipse cx={rx} cy={ry} ry={ry} rx={rx - 0.75} className={fillMixStroke} strokeWidth={2} />
+          <ellipse cx={rx} cy={ry} ry={ry} rx={rx - 0.75} className={css.fillMixStroke} strokeWidth={2} />
         </>
       )
     }
@@ -156,19 +157,61 @@ export function ElementShapeSvg({ shape, w, h }: ElementShapeSvgProps) {
   }
 }
 
+type Data = Pick<
+  DiagramNode,
+  | 'shape'
+  | 'width'
+  | 'height'
+>
+
+// 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, isMultiple = false, withSelectedIndicator = true }: ElementShapePrimitiveProps,
+) {
+  let w = !!width && width > 10 ? width : data.width
+  let h = !!height && height > 10 ? height : data.height
+  return (
+    <>
+      {isMultiple && (
+        <svg className={css.shapeSvgMultiple} viewBox={`0 0 ${w} ${h}`}>
+          <ElementShapeSvg shape={data.shape} w={w} h={h} />
+        </svg>
+      )}
+      <svg className={css.shapeSvg} viewBox={`0 0 ${w} ${h}`}>
+        {withSelectedIndicator && <SelectedIndicator shape={data.shape} w={w} h={h} />}
+        <ElementShapeSvg 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 }: ElementShapeSvgProps) {
+export function SelectedIndicator({ shape, w, h }: ElementShapeProps) {
+  let svg
   switch (shape) {
     case 'queue':
-      return <path d={queueSVGPath(w, h).path} />
+      svg = <path d={queueSVGPath(w, h).path} />
+      break
     case 'storage':
     case 'cylinder': {
-      return <path d={cylinderSVGPath(w, h).path} />
+      svg = <path d={cylinderSVGPath(w, h).path} />
+      break
     }
     default: {
-      return (
+      svg = (
         <rect
           x={-1}
           y={-1}
@@ -176,6 +219,8 @@ export function SelectedIndicator({ shape, w, h }: ElementShapeSvgProps) {
           height={h + 2}
           rx={6} />
       )
+      break
     }
   }
+  return <g className={css.indicator}>{svg}</g>
 }

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

@@ -0,0 +1,156 @@
+import { rem } from '@mantine/core'
+import { createVar, globalStyle, style } from '@vanilla-extract/css'
+import { vars } from '../../../theme-vars'
+
+export const hasIcon = style({})
+
+const textAlign = createVar('text-align')
+export const iconSize = createVar('icon-size')
+
+export const title = style({
+  flex: '0 0 auto',
+  fontFamily: vars.element.font,
+  fontOpticalSizing: 'auto',
+  fontStyle: 'normal',
+  textAlign: textAlign,
+  fontWeight: 500,
+  fontSize: 19,
+  lineHeight: 1.15,
+  textWrap: 'balance',
+  color: vars.element.hiContrast,
+  whiteSpaceCollapse: 'preserve-breaks',
+})
+
+export const description = style({
+  flex: '0 1 auto',
+  fontFamily: vars.element.font,
+  fontOpticalSizing: 'auto',
+  fontStyle: 'normal',
+  fontWeight: 400,
+  fontSize: 14,
+  lineHeight: 1.2,
+  textAlign: textAlign,
+  textWrap: 'pretty',
+  color: vars.element.loContrast,
+  whiteSpaceCollapse: 'preserve-breaks',
+  textOverflow: 'ellipsis',
+  overflow: 'hidden',
+  selectors: {
+    [`:where(${hasIcon}) &`]: {
+      textWrap: 'wrap',
+    },
+  },
+})
+
+export const technology = style({
+  flex: '0 0 auto',
+  fontFamily: vars.element.font,
+  fontOpticalSizing: 'auto',
+  fontStyle: 'normal',
+  fontWeight: 400,
+  fontSize: 12,
+  lineHeight: 1.125,
+  textAlign: textAlign,
+  textWrap: 'balance',
+  opacity: 0.92,
+  color: vars.element.loContrast,
+  selectors: {
+    [`:where([data-hovered='true']) &`]: {
+      opacity: 1,
+    },
+  },
+})
+
+export const elementDataContainer = style({
+  flex: '1',
+  height: 'fit-content',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  flexDirection: 'row',
+  padding: rem(24),
+  overflow: 'hidden',
+  gap: rem(10),
+  vars: {
+    [iconSize]: '48px',
+  },
+  selectors: {
+    ':where([data-likec4-shape="queue"], [data-likec4-shape="mobile"]) &': {
+      paddingLeft: 40,
+      paddingRight: 20,
+    },
+    ':where([data-likec4-shape="cylinder"], [data-likec4-shape="storage"]) &': {
+      paddingTop: 30,
+    },
+    ':where([data-likec4-shape="browser"]) &': {
+      paddingTop: 32,
+      paddingBottom: 28,
+    },
+    // [`&:is(${hasIcon})`]: {
+    //   paddingLeft: 40,
+    //   paddingRight: 20
+    // },
+    [`.likec4-element-node:not(:is([data-likec4-shape="queue"],[data-likec4-shape="mobile"])) &:is(${hasIcon})`]: {
+      paddingLeft: 24,
+      paddingRight: 18,
+    },
+    [`&:has(${description}, ${technology})`]: {
+      gap: rem(16),
+      vars: {
+        [iconSize]: '60px',
+      },
+    },
+  },
+})
+
+export const elementTextData = style({
+  height: 'fit-content',
+  width: 'max-content',
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'stretch',
+  justifyContent: 'center',
+  flexWrap: 'nowrap',
+  overflow: 'hidden',
+  gap: rem(8),
+  'vars': {
+    [textAlign]: 'center',
+  },
+  selectors: {
+    [`&:has(${description}):has(${technology})`]: {
+      gap: rem(6),
+    },
+    [`:where(${hasIcon}) &`]: {
+      minWidth: 'calc(100% - 160px)',
+      alignItems: 'flex-start',
+      'vars': {
+        [textAlign]: 'left',
+      },
+    },
+  },
+})
+
+export const elementIcon = style({
+  flex: `0 0 ${iconSize}`,
+  height: iconSize,
+  width: iconSize,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  mixBlendMode: 'hard-light',
+  alignSelf: 'flex-start',
+})
+globalStyle(`${elementIcon} svg, ${elementIcon} img`, {
+  width: '100%',
+  height: 'auto',
+  maxHeight: '100%',
+  pointerEvents: 'none',
+  filter: `
+    drop-shadow(0 0 3px rgb(0 0 0 / 12%))
+    drop-shadow(0 1px 8px rgb(0 0 0 / 8%))
+    drop-shadow(1px 1px 16px rgb(0 0 0 / 3%))
+  `,
+})
+globalStyle(`${elementIcon} img`, {
+  objectFit: 'contain',
+})