@likec4/diagram 1.19.2 → 1.20.0

package/src/base/primitives/edge/EdgeLabel.css.ts

@@ -0,0 +1,196 @@
+import { rem } from '@mantine/core'
+import { createVar, fallbackVar, globalStyle, style } from '@vanilla-extract/css'
+import { easings, mantine, transitions, vars, whereDark, whereLight, xyvars } from '../../../theme-vars'
+import { mixColor } from './edge.css'
+
+export { dimmed, edgeVars } from './edge.css'
+
+const labelBorderRadius = 4
+export const stepEdgeNumber = style({
+  alignSelf: 'stretch',
+  flex: '0 0 auto',
+  fontWeight: 600,
+  fontSize: rem(14),
+  lineHeight: 1,
+  padding: '5px 5px',
+  textAlign: 'center',
+  minWidth: 22,
+  borderTopLeftRadius: labelBorderRadius,
+  borderBottomLeftRadius: labelBorderRadius,
+  backgroundColor: `color-mix(in srgb, ${vars.relation.labelBgColor}, ${mixColor} 5%)`,
+  fontVariantNumeric: 'tabular-nums',
+  selectors: {
+    [`${whereDark} :where([data-likec4-color="gray"]) &`]: {
+      backgroundColor: `color-mix(in srgb, ${vars.relation.labelBgColor}, ${mixColor} 15%)`,
+    },
+    [`:where([data-edge-active='true'], [data-edge-hovered="true"]) &`]: {
+      backgroundColor: 'transparent',
+    },
+  },
+})
+
+export const varLabelX = createVar('label-x')
+export const varLabelY = createVar('label-y')
+
+export const varTranslate = createVar('translate')
+
+export const edgeLabelContainer = style({
+  top: 0,
+  left: 0,
+  position: 'absolute',
+  pointerEvents: 'all',
+  cursor: 'pointer',
+  width: 'auto',
+  height: 'auto',
+  backgroundColor: xyvars.edge.labelBgColor,
+  borderRadius: labelBorderRadius,
+  border: '0px solid transparent',
+  mixBlendMode: 'plus-lighter',
+  transform: varTranslate,
+  transition: transitions.fast,
+  vars: {
+    [varTranslate]: `translate(0,0)`,
+  },
+  selectors: {
+    '&[data-edge-hovered="true"]': {
+      mixBlendMode: 'normal',
+      transition: `all 140ms ${easings.inOut}`,
+      transform: `${varTranslate} scale(1.12)`,
+    },
+    '&:is([data-edge-dimmed="true"])': {
+      opacity: 0.3,
+      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',
+    },
+    [`${whereLight} &`]: {
+      mixBlendMode: 'screen',
+    },
+  },
+})
+
+export const edgeLabel = style({
+  fontFamily: vars.likec4.font,
+  padding: '3px 5px 5px 5px',
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  width: 'max-content',
+  maxWidth: '100%',
+  gap: rem(4),
+  // position: 'absolute',
+  // pointerEvents: 'all',
+  // cursor: 'pointer',
+  // width: 'fit-content',
+  // // transformOrigin: '50% 50%',
+  // mixBlendMode: 'plus-lighter',
+  color: xyvars.edge.labelColor,
+  // // transform: varTranslate,
+  // transition: transitions.fast,
+  // vars: {
+  //   [varTranslate]: `translate(${fallbackVar(varLabelX, '-50%')}, ${fallbackVar(varLabelY, '-50%')})`,
+  // },
+  //
+  selectors: {
+    [`&:has(${stepEdgeNumber})`]: {
+      flexDirection: 'row',
+      padding: 0,
+      gap: 0,
+    },
+  },
+})
+
+export const secondColumn = style({
+  display: 'contents',
+  selectors: {
+    [`${edgeLabel}:has(${stepEdgeNumber}) &`]: {
+      flex: 1,
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      // width: 'max-content',
+      // maxWidth: '100%',
+      // gap: rem(4),
+      padding: '1px 5px 5px 5px',
+    },
+  },
+  ':empty': {
+    display: 'none !important',
+  },
+})
+
+export const edgeLabelText = style({
+  whiteSpaceCollapse: 'preserve-breaks',
+  fontSize: rem(14),
+  lineHeight: 1.185,
+  color: xyvars.edge.labelColor,
+})
+
+export const edgeLabelTechnology = style({
+  color: xyvars.edge.labelColor,
+  textAlign: 'center',
+  whiteSpaceCollapse: 'preserve-breaks',
+  fontSize: rem(11),
+  lineHeight: 1,
+  opacity: 0.75,
+})
+
+globalStyle(`${edgeLabel}:has(${stepEdgeNumber}) ${edgeLabelText}`, {
+  padding: '2px 5px 4px 2px',
+})
+
+export const edgeNoteCloseButton = style({
+  position: 'absolute',
+  top: 4,
+  right: 4,
+  zIndex: 9,
+})
+
+export const edgeNoteText = style({
+  userSelect: 'all',
+  textAlign: 'left',
+  whiteSpaceCollapse: 'preserve-breaks',
+  textWrap: 'pretty',
+  lineHeight: 1.25,
+  vars: {
+    '--text-fz': mantine.fontSizes.sm,
+  },
+  '@media': {
+    [mantine.largerThan('md')]: {
+      vars: {
+        '--text-fz': mantine.fontSizes.md,
+      },
+    },
+  },
+})
+
+export const actionBtn = style({
+  zIndex: 'calc(var(--layer-overlays, 1) + 1)',
+  pointerEvents: 'all',
+  color: xyvars.edge.labelColor,
+  cursor: 'pointer',
+  opacity: 0.75,
+  transition: transitions.fast,
+  backgroundColor: 'var(--ai-bg)',
+  vars: {
+    '--ai-bg': vars.relation.labelBgColor,
+    '--ai-hover': `color-mix(in srgb , ${vars.relation.labelBgColor}, ${mixColor} 10%)`,
+  },
+  ':hover': {
+    transform: 'translateY(1px) scale(1.15)',
+  },
+  ':active': {
+    transform: 'translateY(-1px) scale(0.9)',
+  },
+  selectors: {
+    ':where([data-edge-hovered="true"]) &': {
+      opacity: 1,
+    },
+  },
+})
+globalStyle(`${actionBtn} .tabler-icon`, {
+  width: '80%',
+  height: '80%',
+  strokeWidth: 2,
+})

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

@@ -0,0 +1,136 @@
+import { type DiagramEdge, extractStep, isStepEdgeId } from '@likec4/core'
+import { type BoxProps, Box, createPolymorphicComponent, Text } from '@mantine/core'
+import { assignInlineVars } from '@vanilla-extract/dynamic'
+import { EdgeLabelRenderer } from '@xyflow/react'
+import clsx from 'clsx'
+import { type PropsWithChildren, forwardRef } from 'react'
+import { isNumber, isTruthy } from 'remeda'
+import type { UndefinedOnPartialDeep } from 'type-fest'
+import { ZIndexes } from '../../const'
+import type { EdgeProps } from '../../types'
+import * as css from './EdgeLabel.css'
+
+type Data = UndefinedOnPartialDeep<
+  Pick<
+    DiagramEdge,
+    | 'label'
+    | 'technology'
+    | 'labelBBox'
+    | 'color'
+  >
+>
+
+type EdgeLabelProps = PropsWithChildren<
+  BoxProps & {
+    /**
+     * label position with optional translate
+     */
+    labelPosition?: {
+      x?: number | undefined
+      y?: number | undefined
+      translate?: string | undefined
+    } | undefined
+
+    edgeProps: EdgeProps<Data>
+  }
+>
+
+const toCssVarValue = (value: number | string | undefined) => {
+  if (value === undefined) return undefined
+  return isNumber(value) ? `${value}px` : value
+}
+
+export const EdgeLabel = createPolymorphicComponent<'div', EdgeLabelProps>(
+  forwardRef<HTMLDivElement, EdgeLabelProps>(({
+    edgeProps: {
+      id,
+      data: {
+        technology,
+        hovered: isHovered = false,
+        active: isActive = false,
+        dimmed = false,
+        labelBBox,
+        ...data
+      },
+    },
+    labelPosition: labelXY,
+    className,
+    style,
+    children,
+    ...rest
+  }, ref) => {
+    const stepNum = isStepEdgeId(id) ? extractStep(id) : null
+
+    let zIndex = ZIndexes.Edge
+    if (isHovered || isActive) {
+      // Move above the elements
+      zIndex = ZIndexes.Element + 1
+    }
+
+    let labelX = labelXY?.x ?? labelBBox?.x,
+      labelY = labelXY?.y ?? labelBBox?.y
+
+    if (labelX === undefined || labelY === undefined) {
+      return null
+    }
+
+    const translate = labelXY?.translate
+
+    return (
+      <EdgeLabelRenderer>
+        <Box
+          className={clsx(
+            'nodrag nopan',
+            css.edgeVars,
+            css.edgeLabelContainer,
+            !!dimmed && css.dimmed,
+            className,
+          )}
+          data-likec4-color={data.color ?? 'gray'}
+          data-edge-active={isActive}
+          data-edge-animated={isActive}
+          data-edge-hovered={isHovered}
+          data-edge-dimmed={dimmed}
+          style={{
+            top: toCssVarValue(labelY),
+            left: toCssVarValue(labelX),
+            // ...assignInlineVars({
+            //   [css.varLabelX]: toCssVarValue(labelX),
+            //   [css.varLabelY]: toCssVarValue(labelY),
+            // }),
+            ...(translate && assignInlineVars({
+              [css.varTranslate]: translate,
+            })),
+            ...(labelBBox && {
+              maxWidth: labelBBox.width + 18,
+            }),
+            zIndex,
+            ...style,
+          }}
+        >
+          <Box ref={ref} className={css.edgeLabel} {...rest}>
+            {stepNum !== null && (
+              <Box className={css.stepEdgeNumber}>
+                {stepNum}
+              </Box>
+            )}
+            <Box className={css.secondColumn}>
+              {isTruthy(data.label) && (
+                <Text component="div" className={css.edgeLabelText} lineClamp={5}>
+                  {data.label}
+                </Text>
+              )}
+              {isTruthy(technology) && (
+                <Text component="div" className={css.edgeLabelTechnology}>
+                  {'[ ' + technology + ' ]'}
+                </Text>
+              )}
+              {children}
+            </Box>
+          </Box>
+        </Box>
+      </EdgeLabelRenderer>
+    )
+  }),
+)
+EdgeLabel.displayName = 'EdgeLabel'

package/src/{xyflow → base/primitives/edge}/EdgeMarkers.tsx

@@ -1,3 +1,4 @@
+import { type RelationshipArrowType, nonexhaustive } from '@likec4/core'
 import type { SVGProps } from 'react'
 
 const Open = (props: SVGProps<SVGMarkerElement>) => (
@@ -163,7 +164,34 @@ export const EdgeMarkers = {
   Diamond,
   ODiamond,
   Dot,
-  ODot
+  ODot,
 }
 
 export type EdgeMarkerType = keyof typeof EdgeMarkers
+
+export function arrowTypeToMarker(arrowType?: RelationshipArrowType): EdgeMarkerType | undefined {
+  if (!arrowType || arrowType === 'none') {
+    return undefined
+  }
+  switch (arrowType) {
+    case 'normal':
+      return 'Arrow' as const
+    case 'crow':
+      return 'Crow' as const
+    case 'onormal':
+      return 'OArrow' as const
+    case 'diamond':
+      return 'Diamond' as const
+    case 'odiamond':
+      return 'ODiamond' as const
+    case 'open':
+    case 'vee':
+      return 'Open' as const
+    case 'dot':
+      return 'Dot' as const
+    case 'odot':
+      return `ODot` as const
+    default:
+      nonexhaustive(arrowType)
+  }
+}

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

@@ -0,0 +1,89 @@
+import type { DiagramEdge } from '@likec4/core'
+import clsx from 'clsx'
+import { type PointerEventHandler, forwardRef } from 'react'
+import type { UndefinedOnPartialDeep } from 'type-fest'
+import type { EdgeProps } from '../../types'
+import * as css from './edge.css'
+import { arrowTypeToMarker, EdgeMarkers } from './EdgeMarkers'
+
+type Data = UndefinedOnPartialDeep<
+  Pick<
+    DiagramEdge,
+    | 'line'
+    | 'dir'
+    | 'tail'
+    | 'head'
+  >
+>
+
+type EdgePathProps = EdgeProps<Data> & {
+  svgPath: string
+  onEdgePointerDown?: PointerEventHandler<SVGGElement> | undefined
+}
+
+export const EdgePath = forwardRef<SVGPathElement, EdgePathProps>(({
+  id,
+  data: {
+    line,
+    dir,
+    tail,
+    head,
+  },
+  svgPath,
+  style,
+  interactionWidth,
+  onEdgePointerDown,
+}, svgPathRef) => {
+  let markerStartName = arrowTypeToMarker(tail)
+  let markerEndName = arrowTypeToMarker(head ?? 'normal')
+  if (dir === 'back') {
+    ;[markerStartName, markerEndName] = [markerEndName, markerStartName]
+  }
+
+  const MarkerStart = markerStartName ? EdgeMarkers[markerStartName] : null
+  const MarkerEnd = markerEndName ? EdgeMarkers[markerEndName] : null
+
+  const isDotted = line === 'dotted'
+  const isDashed = isDotted || line === 'dashed'
+
+  let strokeDasharray: string | undefined
+  if (isDotted) {
+    strokeDasharray = '1,8'
+  } else if (isDashed) {
+    strokeDasharray = '8,10'
+  }
+
+  return (
+    <>
+      <path
+        className={clsx('react-flow__edge-interaction')}
+        d={svgPath}
+        fill="none"
+        stroke={'transparent'}
+        strokeWidth={interactionWidth ?? 10}
+      />
+      <g className={css.markerContext} onPointerDown={onEdgePointerDown}>
+        <defs>
+          {MarkerStart && <MarkerStart id={'start' + id} />}
+          {MarkerEnd && <MarkerEnd id={'end' + id} />}
+        </defs>
+        <path
+          className={clsx('react-flow__edge-path', css.edgePathBg)}
+          d={svgPath}
+          style={style}
+          strokeLinecap={'round'}
+        />
+        <path
+          ref={svgPathRef}
+          className={clsx('react-flow__edge-path', css.cssEdgePath)}
+          d={svgPath}
+          style={style}
+          strokeLinecap={'round'}
+          strokeDasharray={strokeDasharray}
+          markerStart={MarkerStart ? `url(#start${id})` : undefined}
+          markerEnd={MarkerEnd ? `url(#end${id})` : undefined}
+        />
+      </g>
+    </>
+  )
+})

package/src/base/primitives/edge/edge.css.ts

@@ -0,0 +1,122 @@
+import { createVar, fallbackVar, globalStyle, keyframes, style } from '@vanilla-extract/css'
+import { cssReactFlow } from '../../../LikeC4Diagram.css'
+import { vars, xyvars } from '../../../theme-vars'
+import { whereDark, whereLight } from '../../../theme-vars.css'
+
+export const mixColor = createVar('mix-color')
+
+export const edgeVars = style({
+  vars: {
+    [mixColor]: `black`,
+    [xyvars.edge.stroke]: vars.relation.lineColor,
+    [xyvars.edge.strokeSelected]: `color-mix(in srgb, ${vars.relation.lineColor}, ${mixColor} 35%)`,
+    [xyvars.edge.labelColor]: `color-mix(in srgb, ${vars.relation.labelColor}, rgba(255 255 255 / 0.85) 40%)`,
+    [xyvars.edge.labelBgColor]: `color-mix(in srgb, ${vars.relation.labelBgColor}, transparent 40%)`,
+    [xyvars.edge.strokeWidth]: '3',
+  },
+})
+
+globalStyle(`${whereDark} ${edgeVars}`, {
+  vars: {
+    [mixColor]: `white`,
+    [xyvars.edge.labelColor]: vars.relation.labelColor,
+    [xyvars.edge.labelBgColor]: `color-mix(in srgb, ${vars.relation.labelBgColor}, transparent 50%)`,
+  },
+})
+
+const isSelected = '.react-flow__edge.selected'
+
+globalStyle(`:where(${isSelected}) ${edgeVars}`, {
+  vars: {
+    [xyvars.edge.stroke]: xyvars.edge.strokeSelected,
+    [xyvars.edge.strokeWidth]: '3',
+  },
+})
+
+globalStyle(`${edgeVars}:is([data-edge-hovered='true'],[data-edge-active='true'])`, {
+  vars: {
+    // [xyvars.edge.stroke]: `color-mix(in srgb, ${vars.relation.lineColor}, ${mixColor} 35%)`,
+    [xyvars.edge.stroke]: xyvars.edge.strokeSelected,
+    [xyvars.edge.strokeWidth]: '3',
+  },
+})
+
+globalStyle(`:where(${isSelected}) ${edgeVars}[data-edge-hovered='true']`, {
+  vars: {
+    [xyvars.edge.strokeWidth]: '4',
+  },
+})
+
+globalStyle(`${cssReactFlow} .react-flow__edges > svg`, {
+  mixBlendMode: 'plus-lighter',
+})
+globalStyle(`${whereLight} ${cssReactFlow} .react-flow__edges > svg`, {
+  mixBlendMode: 'screen',
+})
+
+export const dimmed = style({})
+
+globalStyle(`${cssReactFlow} .react-flow__edges > svg:has(${dimmed})`, {
+  opacity: 0.6,
+  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 edgePathBg = style({
+  // strokeWidth: xyvars.edge.strokeWidth,
+  strokeOpacity: 0.08,
+  // transition: 'stroke-width 175ms ease-in-out',
+  // transition: 'stroke-width 175ms ease-in-out, stroke-opacity 150ms ease-out',
+  transitionProperty: 'stroke-width, stroke-opacity',
+  transitionDuration: '155ms',
+  transitionTimingFunction: 'ease-out',
+  selectors: {
+    [`:where(${isSelected}, [data-edge-active='true'], [data-edge-hovered='true']) &`]: {
+      strokeWidth: `calc(${xyvars.edge.strokeWidth} + 8)`,
+      strokeOpacity: 0.15,
+    },
+  },
+})
+
+// To fix issue with marker not inheriting color from path - we need to create container
+export const markerContext = style({
+  fill: xyvars.edge.stroke,
+  stroke: xyvars.edge.stroke,
+})
+
+const strokeKeyframes = keyframes({
+  'from': {
+    strokeDashoffset: 18 * 2 + 10,
+  },
+  'to': {
+    strokeDashoffset: 10,
+  },
+})
+
+export const cssEdgePath = style({
+  animationDuration: '800ms',
+  animationIterationCount: 'infinite',
+  animationTimingFunction: 'linear',
+  animationFillMode: 'both',
+  strokeDashoffset: 10,
+  selectors: {
+    [`:where([data-edge-hovered='true']) &`]: {
+      animationName: strokeKeyframes,
+      animationDelay: '450ms',
+      transition: 'stroke 130ms ease-out,stroke-width 130ms ease-out',
+    },
+    [`:where(${isSelected}, [data-edge-active='true'], [data-edge-animated='true']) &`]: {
+      animationName: strokeKeyframes,
+      animationDelay: '0ms',
+      transition: 'stroke 130ms ease-out,stroke-width 130ms ease-out',
+    },
+    [`:where([data-edge-dir='back']) &`]: {
+      animationDirection: 'reverse',
+    },
+    [`${dimmed} &`]: {
+      animationPlayState: 'paused',
+    },
+  },
+})

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

@@ -0,0 +1,48 @@
+import { style } from '@vanilla-extract/css'
+import { transitions, vars } from '../../../theme-vars'
+
+export const container = style({
+  position: 'absolute',
+  top: `calc(100% - 28px)`,
+  // transform: 'translateY(-100%)',
+  left: 0,
+  width: '100%',
+  minHeight: 28,
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  zIndex: 10,
+})
+
+export const actionButtons = style({
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+})
+
+export const actionIcon = style({
+  color: vars.element.loContrast,
+  opacity: 0.75,
+  transition: transitions.fast,
+  'vars': {
+    '--ai-bg-idle': `color-mix(in srgb , ${vars.element.fill},  transparent 99%)`,
+    '--ai-bg-container-hover': `color-mix(in srgb , ${vars.element.fill},  transparent 50%)`,
+    '--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})`,
+  },
+  background: `var(--ai-bg)`,
+  boxShadow: '1px 1px 3px 0px transparent',
+  selectors: {
+    [`:where([data-hovered='true']) &`]: {
+      opacity: 1,
+      boxShadow: '1px 1px 3px 0px rgba(0, 0, 0, 0.2)',
+      vars: {
+        '--ai-bg': `var(--ai-bg-hover)`,
+      },
+    },
+  },
+})
+// globalStyle(`${actionIcon} > *`, {
+//   pointerEvents: 'none',
+// })

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

@@ -0,0 +1,73 @@
+import { ActionIcon, Box } from '@mantine/core'
+import clsx from 'clsx'
+import { m } from 'framer-motion'
+import { stopPropagation } from '../../../utils/xyflow'
+import type { NodeProps } from '../../types'
+import * as css from './ElementActionButtons.css'
+
+type ElementActionButtonsProps = NodeProps & {
+  buttons: ElementActionButtons.Item[]
+}
+
+export function ElementActionButtons({
+  id,
+  selected = false,
+  data: {
+    hovered: isHovered = false,
+  },
+  buttons,
+}: ElementActionButtonsProps) {
+  if (!buttons.length) {
+    return null
+  }
+  return (
+    <Box className={css.container}>
+      <Box
+        component={m.div}
+        layoutRoot
+        initial={false}
+        style={{
+          originY: 0,
+          gap: '6px',
+        }}
+        animate={{
+          opacity: (isHovered || selected) ? 1 : 0.75,
+          scale: isHovered ? 1.1 : (selected ? 0.9 : 0.8),
+          y: (isHovered || selected) ? 6 : 0,
+        }}
+        data-hovered={isHovered}
+        className={clsx('nodrag nopan', css.actionButtons)}
+      >
+        {buttons.map((button, index) => (
+          <m.div
+            key={`action-button-${id}-${button.key ?? index}`}
+            initial={false}
+            whileTap={{ scale: 1 }}
+            whileHover={{
+              scale: 1.35,
+            }}
+          >
+            <ActionIcon
+              className={css.actionIcon}
+              size={'md'}
+              radius="md"
+              // Otherwise node receives click event and is selected
+              onClick={button.onClick}
+              onDoubleClick={stopPropagation}
+            >
+              {button.icon}
+            </ActionIcon>
+          </m.div>
+        ))}
+      </Box>
+    </Box>
+  )
+}
+
+export namespace ElementActionButtons {
+  export type Item = {
+    key?: string
+    icon: React.ReactNode
+    onClick: (e: React.MouseEvent) => void
+  }
+}