@likec4/diagram 1.41.0 → 1.42.0

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

@@ -1,56 +0,0 @@
-import { cx } from '@likec4/styles/css'
-import { actionBtn } from '@likec4/styles/recipes'
-import { ActionIcon } from '@mantine/core'
-import { useDebouncedValue } from '@mantine/hooks'
-import { IconId } from '@tabler/icons-react'
-import * as m from 'motion/react-m'
-import type { Simplify } from 'type-fest'
-import { stopPropagation } from '../../../utils/xyflow'
-import type { NodeProps } from '../../types'
-import { compoundActionBtn } from './actionbtns.css'
-
-type CompoundDetailsButtonProps = Simplify<
-  NodeProps<{}> & {
-    icon?: React.ReactNode
-    onClick: (e: React.MouseEvent) => void
-  }
->
-
-export function CompoundDetailsButton({
-  data: {
-    hovered: isHovered = false,
-  },
-  icon,
-  onClick,
-}: CompoundDetailsButtonProps) {
-  // Debounce first "isHovered"
-  const debounced = useDebouncedValue(isHovered, isHovered ? 130 : 0)
-  const isHoverDebounced = debounced[0] && isHovered
-  return (
-    <m.div
-      initial={false}
-      animate={{
-        scale: isHoverDebounced ? 1.2 : 1,
-        // opacity: isHoverDebounced ? 1 : 0.6,
-      }}
-      whileHover={{
-        scale: 1.4,
-      }}
-      whileTap={{ scale: 1 }}
-      className="likec4-compound-details details-button"
-    >
-      <ActionIcon
-        className={cx(
-          'nodrag nopan',
-          compoundActionBtn({
-            delay: isHovered && !isHoverDebounced,
-          }),
-          actionBtn({ variant: 'transparent' }),
-        )}
-        onClick={onClick}
-        onDoubleClick={stopPropagation}>
-        {icon ?? <IconId stroke={1.8} style={{ width: '75%' }} />}
-      </ActionIcon>
-    </m.div>
-  )
-}

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

@@ -1,83 +0,0 @@
-import type { Color, ElementStyle } from '@likec4/core/types'
-import { cx } from '@likec4/styles/css'
-import { compoundNode } from '@likec4/styles/recipes'
-import { type HTMLMotionProps, m } from 'motion/react'
-import { type PropsWithChildren } from 'react'
-import { clamp } from 'remeda'
-import type { NodeProps } from '../../types'
-// import * as styles from './CompoundNodeContainer.css'
-
-export type RequiredData = {
-  color: Color
-  depth: number
-  style: ElementStyle
-}
-
-type CompoundNodeContainerProps =
-  & Omit<HTMLMotionProps<'div'>, 'children'>
-  & PropsWithChildren<{
-    nodeProps: NodeProps<RequiredData>
-  }>
-
-export function CompoundNodeContainer({
-  nodeProps: {
-    selected: isSelected = false,
-    data: {
-      hovered: isHovered = false,
-      dimmed: isDimmed = false,
-      ...data
-    },
-  },
-  className,
-  children,
-  style,
-  ...rest
-}: CompoundNodeContainerProps) {
-  let opacity = clamp(data.style.opacity ?? 100, {
-    min: 0,
-    max: 100,
-  })
-  const isTransparent = opacity < 99
-
-  const MIN_OPACITY = 65
-  const borderOpacity = MIN_OPACITY + clamp((100 - MIN_OPACITY) * (opacity / 100), {
-    min: 0,
-    max: 100 - MIN_OPACITY,
-  })
-
-  const compoundClass = compoundNode({
-    isTransparent,
-    inverseColor: opacity < 60,
-    borderStyle: data.style.border ?? (isTransparent ? 'dashed' : 'none'),
-  })
-
-  const depth = clamp(data.depth ?? 1, {
-    min: 1,
-    max: 5,
-  })
-
-  return (
-    <m.div
-      className={cx(
-        compoundClass,
-        className,
-      )}
-      initial={false}
-      data-likec4-hovered={isHovered}
-      data-likec4-color={data.color}
-      data-compound-depth={depth}
-      {...isDimmed !== false && {
-        'data-likec4-dimmed': isDimmed,
-      }}
-      style={{
-        ...style,
-        // @ts-expect-error
-        ['--_border-transparency']: `${borderOpacity}%`,
-        ['--_compound-transparency']: `${opacity}%`,
-      }}
-      {...rest}
-    >
-      {children}
-    </m.div>
-  )
-}

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

@@ -1,34 +0,0 @@
-import type { DiagramNode } from '@likec4/core/types'
-import { Text } from '@mantine/core'
-import { IconRenderer } from '../../../context'
-import type { NodeProps } from '../../types'
-
-type Data = Pick<
-  DiagramNode,
-  | 'color'
-  | 'title'
-  | 'icon'
-  | 'style'
->
-
-type CompoundTitleProps = NodeProps<Data>
-
-export function CompoundTitle({ id, data }: CompoundTitleProps) {
-  const elementIcon = IconRenderer({
-    element: {
-      id,
-      title: data.title,
-      icon: data.icon,
-    },
-    className: 'likec4-compound-icon',
-  })
-
-  return (
-    <div className={'likec4-compound-title-container'}>
-      {elementIcon}
-      <Text component="h3" className={'likec4-compound-title'} truncate="end">
-        {data.title}
-      </Text>
-    </div>
-  )
-}

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

@@ -1,18 +0,0 @@
-import { cva } from '@likec4/styles/css'
-
-export const compoundActionBtn = cva({
-  base: {
-    transitionDuration: 'normal',
-  },
-  variants: {
-    delay: {
-      true: {
-        // Debounce CSS transition
-        transitionDelay: {
-          base: '0.2s',
-          _hover: '0s',
-        },
-      },
-    },
-  },
-})

package/src/base/primitives/customEdge.ts

@@ -1,34 +0,0 @@
-import { deepEqual as eq } from 'fast-equals'
-import { type FunctionComponent, memo } from 'react'
-import type { 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 EdgeProps<any>>(
-  prev: P,
-  next: P,
-) => (
-  prev.id === next.id
-  && eq(prev.selected ?? false, next.selected ?? false)
-  && eq(prev.animated ?? false, next.animated ?? false)
-  && eq(prev.source, next.source)
-  && eq(prev.sourceHandleId ?? null, next.sourceHandleId ?? null)
-  && eq(prev.sourcePosition, next.sourcePosition)
-  && eq(prev.target, next.target)
-  && eq(prev.targetHandleId ?? null, next.targetHandleId ?? null)
-  && eq(prev.targetPosition, next.targetPosition)
-  && 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)
-)
-
-export function customEdge<P extends Record<string, unknown> = {}>(
-  Edge: FunctionComponent<EdgeProps<P>>,
-): FunctionComponent<EdgeProps<P>> {
-  return memo(Edge, edgePropsEqual)
-}

package/src/base/primitives/customNode.tsx

@@ -1,29 +0,0 @@
-import { deepEqual as eq } from 'fast-equals'
-import { type FunctionComponent, memo } from 'react'
-import type { NodeProps } from '../types'
-
-export function nodePropsEqual<P extends NodeProps<any, any>>(prev: P, next: P) {
-  return (
-    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.zIndex ?? 0, next.zIndex ?? 0)
-    // we can ignore position, as custom nodes positioned relative to it's NodeRenderer
-    // && eq(prev.positionAbsoluteX, next.positionAbsoluteX)
-    // && eq(prev.positionAbsoluteY, next.positionAbsoluteY)
-    && eq(prev.data, next.data)
-  )
-}
-
-export function customNode<P extends Record<string, unknown> = {}, NodeType extends string = string>(
-  Node: FunctionComponent<NodeProps<P, NodeType>>,
-): FunctionComponent<NodeProps<P, NodeType>> {
-  const NodeComponent = memo(
-    Node,
-    (prev, next) => nodePropsEqual(prev as NodeProps, next as NodeProps),
-  )
-  NodeComponent.displayName = 'Node'
-  return NodeComponent
-}

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

@@ -1,24 +0,0 @@
-import { cx } from '@likec4/styles/css'
-import { edgeActionBtn } from '@likec4/styles/recipes'
-import { ActionIcon } from '@mantine/core'
-import { IconZoomScan } from '@tabler/icons-react'
-import { stopPropagation } from '../../../utils/xyflow'
-
-type EdgeActionBtnProps = {
-  icon?: React.ReactNode
-  onClick: (e: React.MouseEvent) => void
-}
-
-export function EdgeActionButton({ icon, onClick }: EdgeActionBtnProps) {
-  return (
-    <ActionIcon
-      className={cx('nodrag nopan', edgeActionBtn())}
-      onPointerDownCapture={stopPropagation}
-      onClick={onClick}
-      role="button"
-      onDoubleClick={stopPropagation}
-    >
-      {icon ?? <IconZoomScan />}
-    </ActionIcon>
-  )
-}

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

@@ -1,68 +0,0 @@
-import { invariant } from '@likec4/core'
-import type { DiagramEdge } from '@likec4/core/types'
-import { cx } from '@likec4/styles/css'
-import { type PropsWithChildren } from 'react'
-import type { UndefinedOnPartialDeep } from 'type-fest'
-import type { EdgeProps } from '../../types'
-import * as styles from './edge.css'
-
-type Data = UndefinedOnPartialDeep<
-  Pick<
-    DiagramEdge,
-    | 'dir'
-    | 'color'
-  >
->
-
-type EdgeContainerProps = PropsWithChildren<
-  EdgeProps<Data> & {
-    component?: 'g' | 'svg' | undefined
-    className?: string | undefined
-  }
->
-
-// export
-//
-export function EdgeContainer({
-  className,
-  component = 'g',
-  data: {
-    color = 'gray',
-    hovered: isHovered = false,
-    active: isActive = false,
-    dimmed: isDimmed = false,
-    ...data
-  },
-  children,
-  style,
-}: EdgeContainerProps) {
-  const props = {
-    className: cx(
-      className,
-      styles.edgeContainer,
-      'likec4-edge-container',
-    ),
-    'data-likec4-color': color,
-    'data-edge-dir': data.dir ?? 'forward',
-    'data-edge-active': isActive,
-    'data-edge-animated': isActive,
-    'data-likec4-hovered': isHovered,
-    ...(isDimmed !== false && {
-      'data-likec4-dimmed': isDimmed,
-    }),
-  }
-  if (component === 'svg') {
-    return (
-      <svg style={style} {...props}>
-        {children}
-      </svg>
-    )
-  }
-  invariant(component === 'g', 'EdgeContainer: component must be "g" or "svg"')
-
-  return (
-    <g style={style} {...props}>
-      {children}
-    </g>
-  )
-}

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

@@ -1,94 +0,0 @@
-import { extractStep, isStepEdgeId } from '@likec4/core'
-import type { DiagramEdge } from '@likec4/core/types'
-import { css, cx } from '@likec4/styles/css'
-import { Box } from '@likec4/styles/jsx'
-import { edgeLabel } from '@likec4/styles/recipes'
-import type { HTMLMotionProps } from 'motion/react'
-import * as m from 'motion/react-m'
-import { forwardRef } from 'react'
-import { isTruthy } from 'remeda'
-import type { UndefinedOnPartialDeep } from 'type-fest'
-import type { EdgeProps } from '../../types'
-
-type Data = UndefinedOnPartialDeep<
-  Pick<
-    DiagramEdge,
-    | 'label'
-    | 'technology'
-  >
->
-
-type EdgeLabelProps =
-  & HTMLMotionProps<'div'>
-  & {
-    children?: React.ReactNode
-    edgeProps: EdgeProps<Data>
-  }
-
-export const EdgeLabel = forwardRef<HTMLDivElement, EdgeLabelProps>((
-  {
-    edgeProps: {
-      id,
-      data: {
-        label,
-        technology,
-        hovered: isHovered = false,
-      },
-      selected = false,
-      selectable = false,
-    },
-    className,
-    style,
-    children,
-    ...rest
-  },
-  ref,
-) => {
-  const stepNum = isStepEdgeId(id) ? extractStep(id) : null
-  const classes = edgeLabel({
-    isStepEdge: stepNum !== null,
-    cursor: selectable || stepNum !== null ? 'pointer' : 'default',
-  })
-
-  const hasLabel = isTruthy(label) || isTruthy(technology)
-
-  return (
-    <m.div
-      ref={ref}
-      className={cx(classes.root, 'likec4-edge-label', className)}
-      data-edge-id={id}
-      animate={{
-        scale: isHovered && !selected ? 1.06 : 1,
-      }}
-      {...rest}
-    >
-      {stepNum !== null && (
-        <Box className={classes.stepNumber}>
-          {stepNum}
-        </Box>
-      )}
-      {hasLabel && (
-        <Box className={classes.labelContents}>
-          {isTruthy(label) && (
-            <Box
-              className={cx(
-                classes.labelText,
-                css({
-                  lineClamp: 5,
-                }),
-              )}>
-              {label}
-            </Box>
-          )}
-          {isTruthy(technology) && (
-            <Box className={classes.labelTechnology}>
-              {'[ ' + technology + ' ]'}
-            </Box>
-          )}
-          {children}
-        </Box>
-      )}
-    </m.div>
-  )
-})
-EdgeLabel.displayName = 'EdgeLabel'

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

@@ -1,102 +0,0 @@
-import type { DiagramEdge } from '@likec4/core/types'
-import { cx } from '@likec4/styles/css'
-import { EdgeLabelRenderer } from '@xyflow/react'
-import { type HTMLAttributes, useCallback } from 'react'
-import { isNumber } from 'remeda'
-import type { UndefinedOnPartialDeep } from 'type-fest'
-import { useXYStore } from '../../../hooks'
-import { ZIndexes } from '../../const'
-import type { EdgeProps } from '../../types'
-
-type Data = UndefinedOnPartialDeep<
-  Pick<
-    DiagramEdge,
-    | 'labelBBox'
-    | 'color'
-  >
->
-
-type EdgeLabelContainerProps = HTMLAttributes<HTMLDivElement> & {
-  /**
-   * 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) ? `${Math.round(value)}px` : value
-}
-
-export function EdgeLabelContainer({
-  edgeProps: {
-    id,
-    data: {
-      hovered: isHovered = false,
-      active: isActive = false,
-      dimmed: isDimmed = false,
-      labelBBox,
-      color = 'gray',
-    },
-  },
-  labelPosition: labelXY,
-  className,
-  style,
-  children,
-  ...rest
-}: EdgeLabelContainerProps) {
-  let zIndex = useXYStore(
-    useCallback((state) => {
-      return state.edgeLookup.get(id)?.zIndex ?? ZIndexes.Edge
-    }, [id]),
-  )
-  // Move above the elements
-  if (isHovered || isActive) {
-    zIndex += 100
-  }
-
-  let labelX = labelXY?.x ?? labelBBox?.x,
-    labelY = labelXY?.y ?? labelBBox?.y
-
-  if (labelX === undefined || labelY === undefined) {
-    return null
-  }
-  const translate = labelXY?.translate
-
-  return (
-    <EdgeLabelRenderer>
-      <div
-        key={id}
-        {...rest}
-        className={cx(
-          'nodrag nopan',
-          'likec4-edge-label-container',
-          className,
-        )}
-        data-likec4-hovered={isHovered}
-        data-likec4-color={color}
-        data-edge-active={isActive}
-        data-edge-animated={isActive}
-        {...isDimmed !== false && {
-          'data-likec4-dimmed': isDimmed,
-        }}
-        style={{
-          ...(labelBBox && {
-            maxWidth: labelBBox.width + 18,
-          }),
-          zIndex,
-          ...style,
-          transform: `translate(${toCssVarValue(labelX)}, ${toCssVarValue(labelY)}) ${translate || ''}`,
-        }}
-      >
-        {children}
-      </div>
-    </EdgeLabelRenderer>
-  )
-}