@likec4/diagram 1.19.1 → 1.20.0

package/src/xyflow/edges/edges.css.ts

@@ -1,288 +0,0 @@
-import { rem } from '@mantine/core'
-import { createVar, fallbackVar, globalStyle, keyframes, style } from '@vanilla-extract/css'
-import { mantine, transitions, vars, xyvars } from '../../theme-vars'
-
-const mixColor = createVar('mix-color')
-
-export const container = 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(`:where([data-mantine-color-scheme="dark"]) ${container}`, {
-  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}) ${container}`, {
-  vars: {
-    [xyvars.edge.stroke]: xyvars.edge.strokeSelected,
-    [xyvars.edge.strokeWidth]: '3',
-  },
-})
-
-globalStyle(`${container}: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}) ${container}[data-edge-hovered='true']`, {
-  vars: {
-    [xyvars.edge.strokeWidth]: '4',
-  },
-})
-
-globalStyle(`.likec4-diagram .react-flow__edges > svg`, {
-  mixBlendMode: 'plus-lighter',
-})
-globalStyle(`:where([data-mantine-color-scheme="light"]) .likec4-diagram .react-flow__edges > svg`, {
-  mixBlendMode: 'screen',
-})
-
-export const dimmed = style({})
-
-globalStyle(`.likec4-diagram .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,
-})
-
-export const controlPoint = style({
-  fill: xyvars.edge.stroke,
-  stroke: xyvars.edge.stroke,
-  fillOpacity: 0.75,
-  strokeWidth: 1,
-  cursor: 'grab',
-  pointerEvents: 'auto',
-  visibility: 'hidden',
-  ':hover': {
-    stroke: mantine.colors.primaryColors.filledHover,
-    strokeWidth: 9,
-    transition: 'stroke 100ms ease-out, stroke-width 100ms ease-out',
-  },
-  selectors: {
-    [`:where(${isSelected}, [data-edge-hovered='true']) &`]: {
-      visibility: 'visible',
-      transition: 'fill-opacity 150ms ease-out, stroke 150ms ease-out, stroke-width 150ms ease-out',
-      transitionDelay: '50ms',
-      fillOpacity: 1,
-      strokeWidth: 5,
-    },
-  },
-})
-
-export const controlDragging = style({
-  cursor: 'grabbing',
-})
-
-globalStyle(`${controlDragging} *`, {
-  cursor: 'grabbing !important',
-})
-
-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',
-    },
-  },
-})
-
-const labelBorderRadius = 2
-export const stepEdgeNumber = style({
-  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: {
-    [`:where([data-mantine-color-scheme="dark"]) :where([data-likec4-color="gray"]) &`]: {
-      backgroundColor: `color-mix(in srgb, ${vars.relation.labelBgColor}, ${mixColor} 15%)`,
-    },
-    [`:where([data-edge-active='true']) &`]: {
-      backgroundColor: 'transparent',
-    },
-  },
-})
-
-export const varLabelX = createVar('label-x')
-export const varLabelY = createVar('label-y')
-
-const varTranslate = createVar('translate')
-
-export const edgeLabel = style({
-  top: 0,
-  left: 0,
-  padding: '2px 4px 4px 4px',
-  fontFamily: vars.likec4.font,
-  display: 'flex',
-  position: 'absolute',
-  pointerEvents: 'all',
-  cursor: 'pointer',
-  width: 'fit-content',
-  transformOrigin: '50% 50%',
-  mixBlendMode: 'plus-lighter',
-  color: xyvars.edge.labelColor,
-  backgroundColor: xyvars.edge.labelBgColor,
-  borderRadius: labelBorderRadius,
-  transform: varTranslate,
-  vars: {
-    [varTranslate]: `translate(${fallbackVar(varLabelX, '-50%')}, ${fallbackVar(varLabelY, '-50%')})`,
-  },
-  selectors: {
-    '&[data-edge-hovered="true"]': {
-      transition: 'all 140ms ease-in-out',
-      transform: `${varTranslate} scale(1.12)`,
-    },
-    [`&:has(${stepEdgeNumber})`]: {
-      padding: 0,
-      gap: 2,
-    },
-    [`&:is(${dimmed})`]: {
-      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',
-    },
-  },
-})
-
-export const edgeLabelText = style({
-  whiteSpaceCollapse: 'preserve-breaks',
-  fontSize: rem(14),
-  lineHeight: 1.185,
-})
-
-export const edgeLabelTechnology = style({
-  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 cssNavigateBtn = style({
-  zIndex: 'calc(var(--layer-overlays, 1) + 1)',
-  pointerEvents: 'all',
-  color: xyvars.edge.labelColor,
-  cursor: 'pointer',
-  opacity: 1,
-  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)',
-  },
-})
-globalStyle(`${cssNavigateBtn} .tabler-icon`, {
-  width: '80%',
-  height: '80%',
-  strokeWidth: 2,
-})
-export const cssNavigateBtnIcon = style({})

package/src/xyflow/edges/utils.ts

@@ -1,153 +0,0 @@
-import { Position, type XYPosition } from '@xyflow/react'
-import { getNodeDimensions } from '@xyflow/system'
-import type { DiagramFlowTypes } from '../types'
-
-export function getNodeCenter(node: DiagramFlowTypes.InternalNode): XYPosition {
-  const { width, height } = getNodeDimensions(node)
-  const { x, y } = node.internals.positionAbsolute
-
-  return {
-    x: x + width / 2,
-    y: y + height / 2
-  }
-}
-
-// this helper function returns the intersection point
-// of the line between the center of the intersectionNode and the target node
-export function getNodeIntersectionFromCenterToPoint(
-  intersectionNode: DiagramFlowTypes.InternalNode,
-  { x: x1, y: y1 }: XYPosition
-) {
-  // https://math.stackexchange.com/questions/1724792/an-algorithm-for-finding-the-intersection-point-between-a-center-of-vision-and-a
-  const {
-    width: intersectionNodeWidth,
-    height: intersectionNodeHeight
-  } = getNodeDimensions(intersectionNode)
-
-  const intersectionNodePosition = intersectionNode.internals.positionAbsolute
-
-  const w = intersectionNodeWidth / 2
-  const h = intersectionNodeHeight / 2
-
-  const x2 = intersectionNodePosition.x + w
-  const y2 = intersectionNodePosition.y + h
-  // const x1 = targetPoint.x
-  // const y1 = targetPoint.y
-
-  const xx1 = (x1 - x2) / (2 * w) - (y1 - y2) / (2 * h)
-  const yy1 = (x1 - x2) / (2 * w) + (y1 - y2) / (2 * h)
-  const a = 1 / (Math.abs(xx1) + Math.abs(yy1))
-  const xx3 = a * xx1
-  const yy3 = a * yy1
-  const x = w * (xx3 + yy3) + x2
-  const y = h * (-xx3 + yy3) + y2
-
-  return { x, y }
-}
-
-// this helper function returns the intersection point
-// of the line between the center of the intersectionNode and the target node
-function getNodeIntersection(intersectionNode: DiagramFlowTypes.InternalNode, targetNode: DiagramFlowTypes.InternalNode): XYPosition {
-  // https://math.stackexchange.com/questions/1724792/an-algorithm-for-finding-the-intersection-point-between-a-center-of-vision-and-a
-  const {
-    width: intersectionNodeWidth,
-    height: intersectionNodeHeight
-  } = getNodeDimensions(intersectionNode)
-  const {
-    width: targetNodeWidth,
-    height: targetNodeHeight
-  } = getNodeDimensions(targetNode)
-
-  const intersectionNodePosition = intersectionNode.internals.positionAbsolute
-  const targetPosition = targetNode.internals.positionAbsolute
-
-  const w = intersectionNodeWidth / 2
-  const h = intersectionNodeHeight / 2
-
-  const x2 = intersectionNodePosition.x + w
-  const y2 = intersectionNodePosition.y + h
-  const x1 = targetPosition.x + targetNodeWidth / 2
-  const y1 = targetPosition.y + targetNodeHeight / 2
-
-  const xx1 = (x1 - x2) / (2 * w) - (y1 - y2) / (2 * h)
-  const yy1 = (x1 - x2) / (2 * w) + (y1 - y2) / (2 * h)
-  const a = 1 / (Math.abs(xx1) + Math.abs(yy1))
-  const xx3 = a * xx1
-  const yy3 = a * yy1
-  const x = w * (xx3 + yy3) + x2
-  const y = h * (-xx3 + yy3) + y2
-
-  return { x, y }
-}
-
-// returns the position (top,right,bottom or right) passed node compared to the intersection point
-export function getPointPosition(node: DiagramFlowTypes.InternalNode, intersectionPoint: XYPosition) {
-  const n = {
-    // x: node.data.element.position[0],
-    // y: node.data.element.position[1],
-    ...node.internals.positionAbsolute,
-    ...getNodeDimensions(node)
-  }
-  const nx = Math.round(n.x)
-  const ny = Math.round(n.y)
-  const px = Math.round(intersectionPoint.x)
-  const py = Math.round(intersectionPoint.y)
-
-  let handlePosition = Position.Top
-  if (px <= nx + 1) {
-    handlePosition = Position.Left
-  } else if (px >= nx + n.width - 1) {
-    handlePosition = Position.Right
-  } else if (py <= ny + 1) {
-    handlePosition = Position.Top
-  } else if (py >= n.y + n.height - 1) {
-    handlePosition = Position.Bottom
-  }
-
-  let handleWidth = 8, handleHeight = 8
-
-  let offsetX = 0
-  let offsetY = 0
-
-  // this is a tiny detail to make the markerEnd of an edge visible.
-  // The handle position that gets calculated has the origin top-left, so depending which side we are using, we add a little offset
-  // when the handlePosition is Position.Right for example, we need to add an offset as big as the handle itself in order to get the correct position
-  switch (handlePosition) {
-    case Position.Left:
-      offsetX = -handleWidth
-      break
-    case Position.Right:
-      offsetX = handleWidth
-      break
-    case Position.Top:
-      offsetY = -handleHeight
-      break
-    case Position.Bottom:
-      offsetY = handleHeight
-      break
-  }
-
-  return [
-    intersectionPoint.x + offsetX,
-    intersectionPoint.y + offsetY,
-    handlePosition
-  ] as const
-}
-
-// returns the parameters (sx, sy, tx, ty, sourcePos, targetPos) you need to create an edge
-export function getEdgeParams(source: DiagramFlowTypes.InternalNode, target: DiagramFlowTypes.InternalNode) {
-  const sourceIntersectionPoint = getNodeIntersection(source, target)
-  const targetIntersectionPoint = getNodeIntersection(target, source)
-
-  const [sx, sy, sourcePos] = getPointPosition(source, sourceIntersectionPoint)
-  const [tx, ty, targetPos] = getPointPosition(target, targetIntersectionPoint)
-
-  return {
-    sx,
-    sy,
-    tx,
-    ty,
-    sourcePos,
-    targetPos
-  }
-}

package/src/xyflow/nodes/AnimateVariants.ts

@@ -1,143 +0,0 @@
-import { fallbackVar } from '@vanilla-extract/css'
-import type { Variants } from 'framer-motion'
-import { useMemo, useState } from 'react'
-import { isEmpty, isNumber, isString } from 'remeda'
-import { vars } from '../../theme-vars'
-
-const DEFAULT_SCALE_BY = 0
-const SELECTED_SCALE_BY = 16
-const HOVERED_SCALE_BY = 12
-const TAP_SCALE_BY = -16
-
-const DELAY_NODE = 0.1
-const DELAY_NODE_CHILDREN = 0.06
-
-const DIMMED_OPACITY = 0.15
-const DIMMED_DELAY = 0.2
-
-export type VariantKeys = 'dimmed' | 'hoverd' | 'idle' | 'selected' | 'tap'
-
-export const NodeVariants = (width: number, height: number, opts?: {
-  selectedScaleBy?: number
-  hoveredScaleBy?: number
-  tapScaleBy?: number
-}) => {
-  const {
-    selectedScaleBy = SELECTED_SCALE_BY,
-    hoveredScaleBy = HOVERED_SCALE_BY,
-    tapScaleBy = TAP_SCALE_BY,
-  } = opts ?? {}
-
-  // Same scale for X and Y
-  const maxwh = Math.max(width, height)
-  const scaleBy = (diffPx: number) => ({
-    scale: (maxwh + diffPx) / maxwh,
-    // scaleY: (maxwh + diffPx) / maxwh,
-  })
-
-  return {
-    dimmed: {
-      filter: `grayscale(0.85) ${fallbackVar(vars.safariAnimationHook, 'blur(1px)')}`,
-      opacity: DIMMED_OPACITY,
-      transition: {
-        delay: DIMMED_DELAY,
-        ease: 'easeInOut',
-      },
-      willChange: 'opacity, filter',
-    },
-    idle: {
-      ...scaleBy(DEFAULT_SCALE_BY),
-      transition: {
-        delay: DELAY_NODE,
-        delayChildren: DELAY_NODE_CHILDREN,
-      },
-      filter: `grayscale(0) ${fallbackVar(vars.safariAnimationHook, 'blur(0px)')}`,
-    },
-    selected: {
-      ...scaleBy(selectedScaleBy),
-    },
-    hovered: (_, { scale }) => ({
-      ...scaleBy(hoveredScaleBy),
-      transition: !isNumber(scale) || (scale === 1)
-        ? ({
-          delay: DELAY_NODE,
-          delayChildren: DELAY_NODE_CHILDREN,
-        })
-        : {},
-    }),
-    tap: {
-      ...scaleBy(tapScaleBy),
-    },
-  } satisfies Variants
-}
-
-export function useFramerAnimateVariants() {
-  const [variants, setVariants] = useState<string[] | null>(null)
-
-  const handlers = useMemo(() => {
-    const getTarget = (e: MouseEvent | undefined) => {
-      try {
-        // 🤔 Sometimes target is null
-        return (e?.target as HTMLElement | null)?.closest('[data-animate-target]')?.getAttribute('data-animate-target')
-          ?? null
-      } catch (_e) {
-        console.warn(`Failed to get animate target`, _e)
-        // noop
-        return null
-      }
-    }
-
-    const onHoverStart = (e: MouseEvent) => {
-      e?.stopPropagation()
-      const hoverTarget = getTarget(e)
-      if (!isString(hoverTarget)) {
-        setVariants(null)
-        return
-      }
-      if (isEmpty(hoverTarget)) {
-        setVariants(['hovered'])
-        return
-      }
-      setVariants(['hovered', `hovered:${hoverTarget}`])
-    }
-
-    const resetVariants = (e: MouseEvent) => {
-      e?.stopPropagation()
-      const hoverTarget = getTarget(e)
-      if (!isString(hoverTarget) || isEmpty(hoverTarget)) {
-        setVariants(null)
-        return
-      }
-      setVariants(v => v?.filter(v => !v.includes(hoverTarget)) ?? null)
-    }
-
-    return ({
-      onTapStart: (e: MouseEvent) => {
-        e?.stopPropagation()
-        const tapTarget = getTarget(e)
-        if (!isString(tapTarget)) {
-          setVariants(null)
-          return
-        }
-        if (isEmpty(tapTarget)) {
-          setVariants([
-            'hovered',
-            'tap',
-          ])
-        } else {
-          setVariants([
-            'hovered',
-            `hovered:${tapTarget}`,
-            `tap:${tapTarget}`,
-          ])
-        }
-      },
-      onHoverStart,
-      onHoverEnd: resetVariants,
-      onTapCancel: resetVariants,
-      onTap: onHoverStart,
-    })
-  }, [setVariants])
-
-  return [variants, handlers] as const
-}

package/src/xyflow/nodes/Node.css.ts

@@ -1,44 +0,0 @@
-import { style } from "@vanilla-extract/css";
-
-export const topLeftBtnContainer = style({
-  position: 'absolute',
-  left: 3,
-  top: 6
-})
-
-export const topRightBtnContainer = style({
-  position: 'absolute',
-  top: 2,
-  right: 2,
-  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 bottomBtnContainer = style({
-  zIndex: 100,
-  position: 'absolute',
-  left: 0,
-  width: '100%',
-  bottom: 2,
-  display: 'flex',
-  flexDirection: 'row',
-  flexWrap: 'nowrap',
-  alignItems: 'center',
-  justifyContent: 'center',
-  pointerEvents: 'none',
-  selectors: {
-    [`:where([data-likec4-shape='browser']) &`]: {
-      bottom: 4
-    }
-  }
-})