@likec4/diagram 1.41.0 → 1.42.0

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

@@ -1,198 +0,0 @@
-import { nonexhaustive } from '@likec4/core'
-import type { RelationshipArrowType } from '@likec4/core/types'
-import type { SVGProps } from 'react'
-
-const Open = (props: SVGProps<SVGMarkerElement>) => (
-  <marker
-    viewBox="-4 -4 14 16"
-    refX={5}
-    refY={4}
-    markerWidth="7"
-    markerHeight="8"
-    preserveAspectRatio="xMaxYMid meet"
-    orient="auto-start-reverse"
-    {...props}
-  >
-    <path
-      d="M0,0 L7,4 L0,8 L4,4 Z"
-      stroke="context-stroke"
-      fill="context-stroke"
-      strokeDasharray={0}
-      strokeWidth={1}
-      strokeLinecap={'round'} />
-  </marker>
-)
-
-const Arrow = (props: SVGProps<SVGMarkerElement>) => (
-  <marker
-    viewBox="-1 -1 12 10"
-    refX={4}
-    refY={3}
-    markerWidth="8"
-    markerHeight="6"
-    preserveAspectRatio="xMaxYMid meet"
-    orient="auto-start-reverse"
-    {...props}>
-    <path
-      d="M 0 0 L 8 3 L 0 6 L 1 3 z"
-      fill="context-stroke"
-      strokeWidth={0}
-    />
-  </marker>
-)
-
-const Crow = (props: SVGProps<SVGMarkerElement>) => (
-  <marker
-    viewBox="-1 -1 12 12"
-    refX={8}
-    refY={4}
-    markerWidth="8"
-    markerHeight="8"
-    preserveAspectRatio="xMaxYMid meet"
-    orient="auto-start-reverse"
-    {...props}>
-    <path
-      d="M 8 0 L 0 4 L 8 8 M 8 4 L 0 4"
-      fill="none"
-      strokeWidth={1}
-    />
-  </marker>
-)
-
-const OArrow = (props: SVGProps<SVGMarkerElement>) => (
-  <marker
-    viewBox="-1 -1 12 10"
-    refX={4}
-    refY={3}
-    markerWidth="8"
-    markerHeight="6"
-    preserveAspectRatio="xMaxYMid meet"
-    orient="auto-start-reverse"
-    {...props}>
-    <path
-      d="M 0 0 L 8 3 L 0 6 L 1 3 z"
-      stroke="context-stroke"
-      fill="context-stroke"
-      strokeWidth={1.25}
-      strokeLinejoin="miter"
-      strokeLinecap={'square'}
-    />
-  </marker>
-)
-
-const Diamond = (props: SVGProps<SVGMarkerElement>) => (
-  <marker
-    viewBox="-4 -4 16 14"
-    refX={5}
-    refY={4}
-    markerWidth="10"
-    markerHeight="8"
-    preserveAspectRatio="xMaxYMid meet"
-    orient="auto-start-reverse"
-    {...props}
-  >
-    <path
-      d="M5,0 L10,4 L5,8 L0,4 Z"
-      fill="context-stroke"
-      strokeWidth={0}
-      strokeLinecap={'round'}
-    />
-  </marker>
-)
-
-const ODiamond = (props: SVGProps<SVGMarkerElement>) => (
-  <marker
-    viewBox="-4 -4 16 14"
-    refX={6}
-    refY={4}
-    markerWidth="10"
-    markerHeight="8"
-    preserveAspectRatio="xMaxYMid meet"
-    orient="auto-start-reverse"
-    {...props}>
-    <path
-      d="M5,0 L10,4 L5,8 L0,4 Z"
-      stroke="context-stroke"
-      fill="context-stroke"
-      strokeWidth={1.25}
-      strokeLinecap={'round'}
-    />
-  </marker>
-)
-
-const Dot = (props: SVGProps<SVGMarkerElement>) => (
-  <marker
-    viewBox="0 0 10 10"
-    refX={4}
-    refY={4}
-    markerWidth="6"
-    markerHeight="6"
-    {...props}>
-    <circle
-      strokeWidth={0}
-      fill="context-stroke"
-      cx={4}
-      cy={4}
-      r={3}
-    />
-  </marker>
-)
-
-const ODot = (props: SVGProps<SVGMarkerElement>) => (
-  <marker
-    viewBox="0 0 10 10"
-    refX={4}
-    refY={4}
-    markerWidth="6"
-    markerHeight="6"
-    {...props}>
-    <circle
-      strokeWidth={1.25}
-      stroke="context-stroke"
-      fill="context-stroke"
-      cx={4}
-      cy={4}
-      r={3}
-    />
-  </marker>
-)
-
-export const EdgeMarkers = {
-  Arrow,
-  Crow,
-  OArrow,
-  Open,
-  Diamond,
-  ODiamond,
-  Dot,
-  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

@@ -1,126 +0,0 @@
-import type { DiagramEdge } from '@likec4/core/types'
-import { css, cx } from '@likec4/styles/css'
-import { type PointerEventHandler, forwardRef } from 'react'
-import type { UndefinedOnPartialDeep } from 'type-fest'
-import type { EdgeProps } from '../../types'
-import { cssEdgePath, edgePathBg, markerContext } from './edge.css'
-import { arrowTypeToMarker, EdgeMarkers } from './EdgeMarkers'
-
-type Data = UndefinedOnPartialDeep<
-  Pick<
-    DiagramEdge,
-    | 'line'
-    | 'dir'
-    | 'tail'
-    | 'head'
-  >
->
-
-type EdgePathProps = {
-  edgeProps: EdgeProps<Data>
-  svgPath: string
-  strokeWidth?: number
-  onEdgePointerDown?: PointerEventHandler<SVGGElement> | undefined
-}
-
-export const EdgePath = forwardRef<SVGPathElement, EdgePathProps>(({
-  edgeProps: {
-    id,
-    data: {
-      line,
-      dir,
-      tail,
-      head,
-    },
-    selectable = true,
-    style,
-    interactionWidth,
-  },
-  onEdgePointerDown,
-  strokeWidth,
-  svgPath,
-}, 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'
-  }
-  // if (isLooseReduce) {
-  //   strokeDasharray = undefined
-  // }
-
-  // const isAnimated = (animated || data.hovered || data.active) && !data.dimmed
-  // if (isLooseReduce && isAnimated) {
-  //   style = {
-  //     ...style,
-  //     animationName: 'none',
-  //   }
-  // }
-
-  return (
-    <>
-      {selectable && (
-        <path
-          className={cx(
-            'react-flow__edge-interaction',
-            'hide-on-reduced-graphics',
-            css({
-              fill: 'none',
-            }),
-          )}
-          d={svgPath}
-          style={{
-            strokeWidth: interactionWidth ?? 10,
-            stroke: 'currentcolor',
-            strokeOpacity: 0,
-          }}
-        />
-      )}
-      <g className={markerContext} onPointerDown={onEdgePointerDown}>
-        <defs>
-          {MarkerStart && <MarkerStart id={'start' + id} />}
-          {MarkerEnd && <MarkerEnd id={'end' + id} />}
-        </defs>
-        <path
-          className={cx(
-            'react-flow__edge-path',
-            'hide-on-reduced-graphics',
-            edgePathBg,
-          )}
-          d={svgPath}
-          style={style}
-          strokeLinecap={'round'}
-        />
-        <path
-          ref={svgPathRef}
-          className={cx(
-            'react-flow__edge-path',
-            selectable && 'react-flow__edge-interaction',
-            cssEdgePath,
-          )}
-          d={svgPath}
-          style={style}
-          strokeWidth={strokeWidth}
-          strokeLinecap={'round'}
-          strokeDasharray={strokeDasharray}
-          markerStart={MarkerStart ? `url(#start${id})` : undefined}
-          markerEnd={MarkerEnd ? `url(#end${id})` : undefined}
-        />
-      </g>
-    </>
-  )
-})
-EdgePath.displayName = 'EdgePath'

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

@@ -1,74 +0,0 @@
-import { css } from '@likec4/styles/css'
-
-const isSelected = '.react-flow__edge.selected'
-
-export const edgeContainer = css({
-  _reduceGraphics: {
-    transition: 'none',
-  },
-})
-
-export const edgePathBg = css({
-  pointerEvents: 'none',
-  fill: 'none',
-  strokeWidth: 'calc(var(--xy-edge-stroke-width) + 2)',
-  strokeOpacity: 0.08,
-  _noReduceGraphics: {
-    transitionProperty: 'stroke-width, stroke-opacity',
-    transitionDuration: 'fast',
-    transitionTimingFunction: 'inOut',
-  },
-  _whenHovered: {
-    transitionTimingFunction: 'out',
-    strokeWidth: 'calc(var(--xy-edge-stroke-width) + 4)',
-    strokeOpacity: 0.2,
-  },
-  _whenSelected: {
-    strokeWidth: 'calc(var(--xy-edge-stroke-width) + 6)',
-    strokeOpacity: 0.25,
-    _whenHovered: {
-      strokeOpacity: 0.4,
-    },
-  },
-})
-
-// To fix issue with marker not inheriting color from path - we need to create container
-export const markerContext = css({
-  fill: '[var(--xy-edge-stroke)]' as const,
-  stroke: '[var(--xy-edge-stroke)]' as const,
-})
-
-export const cssEdgePath = css({
-  fill: 'none',
-  strokeDashoffset: 0,
-  _noReduceGraphics: {
-    animationStyle: 'xyedgeAnimated',
-    animationPlayState: 'paused',
-    transition: 'stroke 130ms ease-out,stroke-width 130ms ease-out',
-  },
-  [`:where([data-edge-dir='back']) &`]: {
-    animationDirection: 'reverse',
-  },
-  _whenHovered: {
-    _noReduceGraphics: {
-      animationPlayState: 'running',
-      animationDelay: '450ms',
-    },
-  },
-  [`:where(${isSelected}, [data-edge-active='true'], [data-edge-animated='true']) &`]: {
-    _noReduceGraphics: {
-      animationPlayState: 'running',
-      animationDelay: '0ms',
-    },
-  },
-  _whenDimmed: {
-    animationPlayState: 'paused',
-  },
-  _smallZoom: {
-    animationName: 'none',
-  },
-  _whenPanning: {
-    strokeDasharray: 'none !important',
-    animationPlayState: 'paused',
-  },
-})

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

@@ -1,31 +0,0 @@
-export const xyvars = {
-  edge: {
-    stroke: {
-      var: '--xy-edge-stroke',
-      ref: 'var(--xy-edge-stroke)',
-    },
-    strokeSelected: {
-      var: '--xy-edge-stroke-selected',
-      ref: 'var(--xy-edge-stroke-selected)',
-    },
-    labelColor: {
-      var: '--xy-edge-label-color',
-      ref: 'var(--xy-edge-label-color)',
-    },
-    labelBgColor: {
-      var: '--xy-edge-label-background-color',
-      ref: 'var(--xy-edge-label-background-color)',
-    },
-    strokeWidth: {
-      var: '--xy-edge-stroke-width',
-      ref: 'var(--xy-edge-stroke-width)',
-    },
-  },
-  // edge: cssVar.scope('xy-edge', [
-  //   'stroke',
-  //   ['strokeSelected', 'stroke-selected'],
-  //   ['labelColor', 'label-color'],
-  //   ['labelBgColor', 'label-background-color'],
-  //   ['strokeWidth', 'stroke-width'],
-  // ]),
-} as const

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

@@ -1,95 +0,0 @@
-import { css, cx } from '@likec4/styles/css'
-import { Box } from '@likec4/styles/jsx'
-import { actionBtn } from '@likec4/styles/recipes'
-import { ActionIcon } from '@mantine/core'
-import { useId } from '@mantine/hooks'
-import * as m from 'motion/react-m'
-import { stopPropagation } from '../../../utils/xyflow'
-import type { NodeProps } from '../../types'
-
-type ElementActionButtonsProps = NodeProps & {
-  buttons: ElementActionButtons.Item[]
-}
-
-const container = css({
-  position: 'absolute',
-  zIndex: 1,
-  top: `[calc(100% - 30px)]`,
-  transform: 'translateX(-50%)',
-  left: `[50%]`,
-  width: 'auto',
-  minHeight: '30px',
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-  _smallZoom: {
-    display: 'none',
-  },
-  // zIndex: 10,
-})
-
-const actionButtons = css({
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center',
-})
-
-export function ElementActionButtons({
-  selected = false,
-  data: {
-    hovered: isHovered = false,
-  },
-  buttons,
-}: ElementActionButtonsProps) {
-  const id = useId()
-  if (!buttons.length) {
-    return null
-  }
-  return (
-    <Box className={container}>
-      <m.div
-        layoutRoot
-        key={`${id}-action-buttons`}
-        initial={false}
-        style={{
-          originY: 0,
-          gap: 6,
-        }}
-        animate={{
-          opacity: (isHovered || selected) ? 1 : 0.75,
-          scale: isHovered ? 1.1 : (selected ? 0.9 : 0.8),
-          y: (isHovered || selected) ? 6 : 0,
-        }}
-        data-likec4-hovered={isHovered}
-        className={cx('nodrag nopan', actionButtons)}
-      >
-        {buttons.map((button, index) => (
-          <ActionIcon
-            component={m.button}
-            // layout
-            className={actionBtn({})}
-            key={`${id}-${button.key ?? index}`}
-            initial={false}
-            whileTap={{ scale: 1 }}
-            whileHover={{
-              scale: 1.3,
-            }}
-            onClick={button.onClick}
-            // Otherwise node receives click event and is selected
-            onDoubleClick={stopPropagation}
-          >
-            {button.icon}
-          </ActionIcon>
-        ))}
-      </m.div>
-    </Box>
-  )
-}
-
-export namespace ElementActionButtons {
-  export type Item = {
-    key?: string
-    icon: React.ReactNode
-    onClick: (e: React.MouseEvent) => void
-  }
-}

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

@@ -1,80 +0,0 @@
-import { css, cx } from '@likec4/styles/css'
-import { Box } from '@likec4/styles/jsx'
-import { actionBtn } from '@likec4/styles/recipes'
-import { ActionIcon } from '@mantine/core'
-import { useId } from '@mantine/hooks'
-import { IconId } from '@tabler/icons-react'
-import * as m from 'motion/react-m'
-import { stopPropagation } from '../../../utils/xyflow'
-import type { NodeProps } from '../../types'
-
-type ElementDetailsButtonProps = NodeProps & {
-  icon?: React.ReactNode
-  onClick: (e: React.MouseEvent) => void
-}
-
-const container = css({
-  position: 'absolute',
-  top: '0.5',
-  right: '0.5',
-  _shapeBrowser: {
-    right: '[5px]',
-  },
-  _shapeCylinder: {
-    top: '[14px]',
-  },
-  _shapeStorage: {
-    top: '[14px]',
-  },
-  _shapeQueue: {
-    top: '[1px]',
-    right: '3', // 12px
-  },
-  _smallZoom: {
-    display: 'none',
-  },
-})
-
-export function ElementDetailsButton({
-  selected = false,
-  data: {
-    hovered: isHovered = false,
-  },
-  icon,
-  onClick,
-}: ElementDetailsButtonProps) {
-  const id = useId()
-  return (
-    <Box className={cx(container, 'details-button')}>
-      <ActionIcon
-        key={id}
-        className={cx('nodrag nopan', actionBtn({ variant: 'transparent' }))}
-        component={m.button}
-        // layout
-        initial={false}
-        style={{
-          originX: 0.45,
-          originY: 0.55,
-        }}
-        animate={(isHovered || selected)
-          ? {
-            scale: 1.2,
-            opacity: 0.8,
-          }
-          : {
-            scale: 1,
-            opacity: 0.5,
-          }}
-        whileHover={{
-          scale: 1.4,
-          opacity: 1,
-        }}
-        whileTap={{ scale: 1.15 }}
-        onClick={onClick}
-        onDoubleClick={stopPropagation}
-      >
-        {icon ?? <IconId stroke={1.8} style={{ width: '75%' }} />}
-      </ActionIcon>
-    </Box>
-  )
-}

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

@@ -1,51 +0,0 @@
-import { css as style } from '@likec4/styles/css'
-
-export const container = style({
-  position: 'relative',
-  width: '100%',
-  height: '100%',
-  padding: '0',
-  margin: '0',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  pointerEvents: 'none',
-  _before: {
-    content: '" "',
-    position: 'absolute',
-    top: '[calc(100% - 4px)]',
-    left: '0',
-    width: '100%',
-    height: '24px',
-    background: '[transparent]',
-    pointerEvents: 'all',
-  },
-  _focusVisible: {
-    outline: 'none',
-  },
-
-  // _whenDimmed: {
-  //   opacity: 0.25,
-  //   transition: `opacity 400ms {easings.inOut}, filter 500ms {easings.inOut}`,
-  //   transitionDelay: '50ms',
-  //   grayscale: 0.85,
-  //   blur: '2px',
-  //   // filter: `grayscale(0.85) ${fallbackVar(vars.safariAnimationHook, 'blur(2px)')}`,
-  // },
-  // _whenDimmedImmediate: {
-  //   opacity: 0.25,
-  //   grayscale: 0.85,
-  //   blur: '2px',
-  //   // transition: `opacity 100ms ${easings.inOut}, filter 100ms ${easings.inOut}`,
-  //   // filter: `grayscale(0.85) ${fallbackVar(vars.safariAnimationHook, 'blur(2px)')}`,
-  // },
-  _reduceGraphicsOnPan: {
-    _before: {
-      display: 'none',
-    },
-  },
-
-  [`:where(.react-flow__node.selectable:not(.dragging)) &`]: {
-    cursor: 'pointer',
-  },
-})