@likec4/diagram 1.19.1 → 1.20.0

package/src/base/primitives/compound/CompoundActionButton.tsx

@@ -0,0 +1,52 @@
+import { ActionIcon, Box } from '@mantine/core'
+import { IconZoomScan } 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 './CompoundActionButton.css'
+
+type CompoundActionButtonProps = NodeProps & {
+  icon?: React.ReactNode
+  onClick: (e: React.MouseEvent) => void
+}
+
+export function CompoundActionButton({
+  data: {
+    hovered: isHovered = false,
+  },
+  icon,
+  onClick,
+}: CompoundActionButtonProps) {
+  return (
+    <Box className={clsx(css.container, 'compound-action')}>
+      <Box
+        className={clsx('nodrag nopan', css.actionButton)}
+        component={m.div}
+        initial={false}
+        animate={{
+          scale: isHovered ? 1.2 : 1,
+          x: isHovered ? -1 : 0,
+          // y: isHovered ? -1 : 0,
+        }}
+        whileHover={{
+          scale: 1.35,
+          x: -1,
+          // y: 1,
+        }}
+        whileTap={{ scale: 1 }}
+      >
+        <ActionIcon
+          className={css.actionIcon}
+          size={'md'}
+          radius="md"
+          // Otherwise node receives click event and is selected
+          onClick={onClick}
+          onDoubleClick={stopPropagation}
+        >
+          {icon ?? <IconZoomScan stroke={2} />}
+        </ActionIcon>
+      </Box>
+    </Box>
+  )
+}

package/src/base/primitives/compound/CompoundDetailsButton.css.ts

@@ -0,0 +1,56 @@
+import { createVar, globalStyle, style } from '@vanilla-extract/css'
+import { vars } from '../../../theme-vars'
+
+export const container = style({
+  position: 'absolute',
+  top: 2,
+  right: 2,
+  zIndex: 10,
+})
+
+const btnColor = createVar('navigateBtnColor')
+globalStyle(`${container}`, {
+  vars: {
+    [btnColor]: vars.element.loContrast,
+  },
+})
+globalStyle(`:where([data-mantine-color-scheme='light'] [data-compound-transparent="true"]) ${container}`, {
+  vars: {
+    [btnColor]: vars.element.stroke,
+  },
+})
+
+export const actionIcon = style({
+  opacity: 0.4,
+  pointerEvents: 'all',
+  cursor: 'pointer',
+  color: `var(--_compound-title-color,${btnColor})`,
+  backgroundColor: 'var(--ai-bg)',
+  'vars': {
+    '--ai-color-hover': vars.element.hiContrast,
+    '--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': {
+    opacity: 1,
+    boxShadow: '1px 1px 3px 0px rgba(0, 0, 0, 0.15)',
+  },
+  selectors: {
+    [`:where([data-mantine-color-scheme='light'] [data-compound-transparent="true"]) &`]: {
+      opacity: 0.6,
+      vars: {
+        '--ai-bg-hover': `color-mix(in srgb , ${vars.element.fill},  transparent 20%)`,
+        '--ai-hover': `color-mix(in srgb , ${vars.element.fill},  transparent 10%)`,
+        '--ai-bg': `color-mix(in srgb , ${vars.element.fill},  transparent 99%)`,
+      },
+    },
+  },
+})
+
+export const actionIconWrapper = style({
+  width: 'min-content',
+  height: 'min-content',
+})

package/src/base/primitives/compound/CompoundDetailsButton.tsx

@@ -0,0 +1,54 @@
+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 './CompoundDetailsButton.css'
+
+type CompoundDetailsButtonProps = NodeProps & {
+  icon?: React.ReactNode
+  onClick: (e: React.MouseEvent) => void
+}
+
+export function CompoundDetailsButton({
+  data: {
+    hovered: isHovered = false,
+  },
+  icon,
+  onClick,
+}: CompoundDetailsButtonProps) {
+  return (
+    <Box className={clsx(css.container, 'details-button')} onClick={stopPropagation}>
+      <Box
+        component={m.div}
+        className={clsx('nodrag nopan', css.actionIconWrapper)}
+        initial={false}
+        style={{
+          originX: 0.45,
+          originY: 0.55,
+        }}
+        animate={isHovered
+          ? {
+            scale: 1.2,
+          }
+          : {
+            scale: 1,
+          }}
+        whileHover={{
+          scale: 1.42,
+        }}
+        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/compound/CompoundNodeContainer.css.ts

@@ -0,0 +1,161 @@
+import { rem } from '@mantine/core'
+import { createVar, fallbackVar, globalStyle, keyframes, style } from '@vanilla-extract/css'
+import { calc } from '@vanilla-extract/css-utils'
+import { easings, mantine, transitions, vars, whereLight } from '../../../theme-vars'
+
+export const varCompoundOpacity = createVar('opacity')
+export const varBorderRadius = createVar('borderRadius')
+export const varBorderTransparency = createVar('borderTransparency')
+export const varBorderColor = createVar('border-color')
+const varBorderWidth = createVar('border-width')
+
+export const dimmed = style({})
+globalStyle(`.react-flow__node:has(${dimmed})`, {
+  opacity: 0.25,
+  transition: 'opacity 600ms ease-in-out, filter 600ms ease-in-out',
+  transitionDelay: '200ms',
+  filter: `grayscale(0.85) ${fallbackVar(vars.safariAnimationHook, 'blur(1px)')}`,
+  willChange: 'opacity, filter',
+})
+
+export const container = style({
+  position: 'relative',
+  width: '100%',
+  height: '100%',
+  padding: 0,
+  margin: 0,
+  border: '0px solid transparent',
+  vars: {
+    [varBorderRadius]: '6px',
+    [varBorderWidth]: '3px',
+  },
+})
+
+const outlineColor = fallbackVar(
+  mantine.colors.primaryColors.outline,
+  mantine.colors.primaryColors.filled,
+  vars.element.stroke,
+)
+
+export const compoundBg = style({
+  borderRadius: varBorderRadius,
+  boxShadow: '0 4px 10px 0.5px rgba(0,0,0,0.1) , 0 2px 2px -1px rgba(0,0,0,0.4)',
+  padding: 0,
+  margin: 0,
+  transition: `all 250ms ${easings.inOut}`,
+  // backgroundClip: 'padding-box',
+  // overflow: 'hidden',
+  cursor: 'default',
+  selectors: {
+    [`:where(.react-flow__node.dragging) &`]: {
+      boxShadow: 'none',
+    },
+    ':where(.react-flow__node:focus-visible) &': {
+      transitionDuration: '0ms',
+      outline: `3px solid ${outlineColor}`,
+      outlineOffset: rem(1.5),
+    },
+    [`:where([data-compound-transparent="true"]) &`]: {
+      opacity: varCompoundOpacity,
+      borderWidth: calc(varBorderWidth).subtract('1px').toString(),
+    },
+    [`:where([data-compound-transparent="true"]:is([data-hovered="true"])) &`]: {
+      transitionDelay: '0.15s',
+      transitionDuration: '0.4s',
+    },
+  },
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  width: '100%',
+  height: '100%',
+  pointerEvents: 'none',
+  border: '0px solid transparent',
+  background: vars.element.fill,
+  backgroundClip: 'padding-box',
+})
+
+globalStyle(`:where([data-mantine-color-scheme='dark'] [data-compound-transparent="true"])`, {
+  vars: {
+    ['--_compound-border-color']: `color-mix(in srgb, ${vars.compound.titleColor} 25%, ${vars.element.stroke})`,
+  },
+})
+globalStyle(`:where([data-mantine-color-scheme='light'] [data-compound-transparent="true"])`, {
+  vars: {
+    ['--_compound-title-color']: vars.element.stroke,
+  },
+})
+
+export const compoundBorder = style({
+  borderRadius: varBorderRadius,
+  padding: 0,
+  margin: 0,
+  transition: `all 250ms ${easings.inOut}`,
+  cursor: 'default',
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  width: '100%',
+  height: '100%',
+  pointerEvents: 'none',
+  background: 'transparent',
+  borderStyle: 'dashed',
+  borderWidth: varBorderWidth,
+  borderColor: `color-mix(in srgb , ${varBorderColor}, transparent ${fallbackVar(varBorderTransparency, '5%')})`,
+  vars: {
+    [varBorderColor]: `var(--_compound-border-color,${vars.element.stroke})`,
+  },
+})
+
+const indicatorKeyframes = keyframes({
+  'from': {
+    opacity: 0.6,
+  },
+  'to': {
+    opacity: 0.3,
+  },
+})
+
+const indicatorStroke = createVar('indicator-stroke')
+const indicatorStrokeWidth = createVar('indicator-stroke-width')
+export const indicator = style({
+  position: 'absolute',
+  top: '0',
+  left: '0',
+  width: '100%',
+  height: '100%',
+  pointerEvents: 'none',
+  overflow: 'visible',
+  visibility: 'hidden',
+  vars: {
+    [indicatorStroke]: vars.element.loContrast,
+    [indicatorStrokeWidth]: '6',
+  },
+  selectors: {
+    ':where(.react-flow__node.selected:not(:focus-visible)) &': {
+      visibility: 'visible',
+    },
+    ':where(.react-flow__node:focus-within:not(.selected)) &': {
+      vars: {
+        [indicatorStroke]: `color-mix(in srgb, ${vars.element.stroke} 30%, ${vars.element.loContrast})`,
+        [indicatorStrokeWidth]: '8',
+      },
+    },
+    [`${whereLight} &`]: {
+      vars: {
+        [indicatorStroke]: `color-mix(in srgb, ${vars.element.stroke} 80%, #000)`,
+      },
+    },
+  },
+})
+
+globalStyle(`${indicator} rect`, {
+  stroke: indicatorStroke,
+  transformOrigin: 'center center',
+  strokeWidth: indicatorStrokeWidth,
+  animationDuration: '800ms',
+  animationName: indicatorKeyframes,
+  animationIterationCount: 'infinite',
+  animationDirection: 'alternate',
+  fill: 'none',
+})

package/src/base/primitives/compound/CompoundNodeContainer.tsx

@@ -0,0 +1,95 @@
+import type { DiagramNode } from '@likec4/core'
+import { type BoxProps, Box, createPolymorphicComponent } from '@mantine/core'
+import { assignInlineVars } from '@vanilla-extract/dynamic'
+import clsx from 'clsx'
+import { m } from 'framer-motion'
+import { type PropsWithChildren, forwardRef } from 'react'
+import { clamp, isNumber } from 'remeda'
+import type { NodeProps } from '../../types'
+import * as css from './CompoundNodeContainer.css'
+
+type RequiredData = Pick<
+  DiagramNode,
+  | 'color'
+  | 'depth'
+  | 'shape'
+  | 'style'
+>
+
+type CompoundNodeContainerProps =
+  & BoxProps
+  & PropsWithChildren<{
+    nodeProps: NodeProps<RequiredData>
+  }>
+
+export const CompoundNodeContainer = createPolymorphicComponent<'div', CompoundNodeContainerProps>(
+  forwardRef<HTMLDivElement, CompoundNodeContainerProps>(({
+    nodeProps: {
+      data: {
+        hovered: isHovered = false,
+        dimmed: isDimmed = false,
+        style,
+        ...data
+      },
+    },
+    children,
+    ...rest
+  }, ref) => {
+    const isTransparent = isNumber(style.opacity) && style.opacity < 100
+    let opacity = clamp((style.opacity ?? 100) / 100, {
+      min: 0,
+      max: 1,
+    })
+    if (isTransparent && isHovered) {
+      opacity = Math.min(opacity + 0.11, 1)
+    }
+    const MAX_TRANSPARENCY = 40
+    const borderTransparency = clamp(MAX_TRANSPARENCY - opacity * MAX_TRANSPARENCY, {
+      min: 0,
+      max: MAX_TRANSPARENCY,
+    })
+    return (
+      <Box
+        ref={ref}
+        component={m.div}
+        className={clsx([
+          css.container,
+          isDimmed && css.dimmed,
+          'likec4-compound-node',
+        ])}
+        initial={false}
+        data-hovered={isHovered}
+        data-likec4-color={data.color}
+        data-compound-depth={data.depth ?? 1}
+        data-compound-transparent={isTransparent}
+        data-likec4-shape={data.shape}
+        style={assignInlineVars({
+          [css.varCompoundOpacity]: opacity.toFixed(2),
+          [css.varBorderTransparency]: `${borderTransparency}%`,
+        })}
+        {...rest}
+      >
+        <svg className={css.indicator}>
+          <rect
+            x={0}
+            y={0}
+            width={'100%'}
+            height={'100%'}
+            rx={6}
+          />
+        </svg>
+        <div className={css.compoundBg} />
+        {isTransparent && style.border !== 'none' && (
+          <div
+            className={css.compoundBorder}
+            style={{
+              borderStyle: style.border ?? 'dashed',
+            }}
+          />
+        )}
+        {children}
+      </Box>
+    )
+  }),
+)
+CompoundNodeContainer.displayName = 'CompoundNodeContainer'

package/src/base/primitives/compound/CompoundTitle.css.ts

@@ -0,0 +1,43 @@
+import { rem } from '@mantine/core'
+import { style } from '@vanilla-extract/css'
+import { vars, whereLight } from '../../../theme-vars'
+
+export const compoundTitle = style({
+  display: 'flex',
+  alignItems: 'center',
+  gap: 6,
+  paddingLeft: 14,
+  paddingTop: 6,
+  minHeight: 30,
+  paddingRight: 2,
+  selectors: {
+    [`:where(.react-flow__node.draggable) &`]: {
+      cursor: 'grab',
+    },
+    [`.likec4-compound-node:has(.compound-action) &`]: {
+      paddingLeft: 30,
+    },
+  },
+})
+
+export const title = style({
+  flex: 1,
+  fontFamily: vars.compound.font,
+  fontWeight: 600,
+  fontSize: rem(15),
+  textTransform: 'uppercase',
+  letterSpacing: '0.2px',
+  // lineHeight: 1,
+  //
+  color: `var(--_compound-title-color,${vars.compound.titleColor})`,
+  // paddingLeft: 0,
+  // paddingTop: 13,
+  // paddingBottom: 6,
+  // minHeight: 20,
+  mixBlendMode: 'screen',
+  selectors: {
+    [`${whereLight} &`]: {
+      mixBlendMode: 'darken',
+    },
+  },
+})

package/src/base/primitives/compound/CompoundTitle.tsx

@@ -0,0 +1,29 @@
+import type { DiagramNode } from '@likec4/core'
+import { Box, Text } from '@mantine/core'
+import clsx from 'clsx'
+import type { NodeProps } from '../../types'
+import * as css from './CompoundTitle.css'
+
+type Data = Pick<
+  DiagramNode,
+  | 'color'
+  | 'title'
+>
+
+type CompoundTitleProps = NodeProps<Data>
+
+export function CompoundTitle({ data }: CompoundTitleProps) {
+  const isHovered = data.hovered ?? false
+
+  return (
+    <Box
+      className={clsx(
+        css.compoundTitle,
+        'likec4-compound-title',
+      )}>
+      <Text className={css.title} truncate="end">
+        {data.title}
+      </Text>
+    </Box>
+  )
+}

package/src/base/primitives/customEdge.ts

@@ -0,0 +1,32 @@
+import { deepEqual as eq } from 'fast-equals'
+import { type FunctionComponent, memo } from 'react'
+import type { Base, EdgeProps } from '../types'
+
+// If points are within 3px, consider them the same
+const isSame = (a: number, b: number) => {
+  return Math.abs(a - b) < 2.5
+}
+
+export const edgePropsEqual = <P extends Record<string, unknown> = Base.EdgeData>(
+  prev: EdgeProps<P>,
+  next: EdgeProps<P>,
+) => (
+  prev.id === next.id
+  && eq(prev.source, next.source)
+  && eq(prev.sourceHandleId ?? null, next.sourceHandleId ?? null)
+  && eq(prev.target, next.target)
+  && eq(prev.targetHandleId ?? null, next.targetHandleId ?? null)
+  && eq(prev.selected ?? false, next.selected ?? false)
+  && isSame(prev.sourceX, next.sourceX)
+  && isSame(prev.sourceY, next.sourceY)
+  && isSame(prev.targetX, next.targetX)
+  && isSame(prev.targetY, next.targetY)
+  && eq(prev.data, next.data)
+  && eq(prev.style, next.style)
+)
+
+export function customEdge<P extends Record<string, unknown> = Base.NodeData>(
+  Edge: FunctionComponent<EdgeProps<P>>,
+) {
+  return memo(Edge, edgePropsEqual)
+}

package/src/base/primitives/customNode.ts

@@ -0,0 +1,21 @@
+import { deepEqual as eq } from 'fast-equals'
+import { type FunctionComponent, memo } from 'react'
+import type { Base, NodeProps } from '../types'
+
+export const nodePropsEqual = <P extends Record<string, unknown> = Base.NodeData>(
+  prev: NodeProps<P>,
+  next: NodeProps<P>,
+) => (
+  prev.id === next.id
+  && eq(prev.selected ?? false, next.selected ?? false)
+  && eq(prev.dragging ?? false, next.dragging ?? false)
+  && eq(prev.width ?? 0, next.width ?? 0)
+  && eq(prev.height ?? 0, next.height ?? 0)
+  && eq(prev.data, next.data)
+)
+
+export function customNode<P extends Record<string, unknown> = Base.NodeData>(
+  Node: FunctionComponent<NodeProps<P>>,
+) {
+  return memo(Node, nodePropsEqual)
+}

package/src/base/primitives/edge/EdgeActionButton.tsx

@@ -0,0 +1,27 @@
+import { ActionIcon } from '@mantine/core'
+import { IconZoomScan } from '@tabler/icons-react'
+import clsx from 'clsx'
+import { stopPropagation } from '../../../utils/xyflow'
+import type { EdgeProps } from '../../types'
+import * as css from './EdgeLabel.css'
+
+type EdgeActionBtnProps = EdgeProps & {
+  icon?: React.ReactNode
+  onClick: (e: React.MouseEvent) => void
+}
+
+export function EdgeActionButton({ icon, onClick }: EdgeActionBtnProps) {
+  return (
+    <ActionIcon
+      className={clsx('nodrag nopan', css.actionBtn)}
+      size={'sm'}
+      radius="sm"
+      onPointerDownCapture={stopPropagation}
+      onClick={onClick}
+      role="button"
+      onDoubleClick={stopPropagation}
+    >
+      {icon ?? <IconZoomScan />}
+    </ActionIcon>
+  )
+}

package/src/base/primitives/edge/EdgeContainer.tsx

@@ -0,0 +1,48 @@
+import type { DiagramEdge } from '@likec4/core'
+import clsx from 'clsx'
+import { type PropsWithChildren } from 'react'
+import type { UndefinedOnPartialDeep } from 'type-fest'
+import type { EdgeProps } from '../../types'
+import * as css from './edge.css'
+
+type Data = UndefinedOnPartialDeep<
+  Pick<
+    DiagramEdge,
+    | 'dir'
+    | 'color'
+  >
+>
+
+type EdgeContainerProps = PropsWithChildren<
+  EdgeProps<Data> & {
+    className?: string | undefined
+  }
+>
+
+export function EdgeContainer({
+  className,
+  data: {
+    hovered: isHovered = false,
+    active: isActive = false,
+    dimmed: isDimmed = false,
+    ...data
+  },
+  children,
+}: EdgeContainerProps) {
+  return (
+    <g
+      className={clsx(
+        css.edgeVars,
+        isDimmed && css.dimmed,
+        className,
+      )}
+      data-likec4-color={data.color ?? 'gray'}
+      data-edge-dir={data.dir ?? 'forward'}
+      data-edge-active={isActive}
+      data-edge-animated={isActive}
+      data-edge-hovered={isHovered}
+      data-edge-dimmed={isDimmed}>
+      {children}
+    </g>
+  )
+}