@likec4/diagram 1.19.2 → 1.20.0

package/src/xyflow/nodes/element/ElementNode.tsx

@@ -1,209 +0,0 @@
-import { type ThemeColor, DiagramNode } from '@likec4/core'
-import { Box } from '@mantine/core'
-import { useDebouncedValue } from '@mantine/hooks'
-import { type NodeProps, Handle, Position } from '@xyflow/react'
-import clsx from 'clsx'
-import { deepEqual as eq } from 'fast-equals'
-import { m } from 'framer-motion'
-import { memo, useState } from 'react'
-import { isTruthy } from 'remeda'
-import { ActionButtonBar } from '../../../controls/action-button-bar/ActionButtonBar'
-import {
-  BrowseRelationshipsButton,
-  NavigateToButton,
-  OpenDetailsButton,
-} from '../../../controls/action-buttons/ActionButtons'
-import { Text } from '../../../controls/Text'
-import { useDiagramState } from '../../../hooks/useDiagramState'
-import type { DiagramFlowTypes } from '../../types'
-import { toDomPrecision } from '../../utils'
-import { type VariantKeys, NodeVariants, useFramerAnimateVariants } from '../AnimateVariants'
-import * as nodeCss from '../Node.css'
-import { ElementIcon } from '../shared/ElementIcon'
-import { ElementToolbar } from '../shared/Toolbar'
-import * as css from './element.css'
-import { ElementShapeSvg, SelectedIndicator } from './ElementShapeSvg'
-
-type ElementNodeProps = NodeProps<DiagramFlowTypes.ElementNode>
-const isEqualProps = (prev: ElementNodeProps, next: ElementNodeProps) => (
-  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 const ElementNodeMemo = memo<ElementNodeProps>(function ElementNode({
-  id,
-  data: {
-    element,
-  },
-  dragging,
-  selected = false,
-  width,
-  height,
-}) {
-  const modelRef = DiagramNode.modelRef(element)
-  // const deploymentRef = DiagramNode.deploymentRef(element)
-  const {
-    viewId,
-    isEditable,
-    isDimmed,
-    isNavigable,
-    isInteractive,
-    enableElementDetails,
-    enableRelationshipBrowser,
-    isInActiveOverlay,
-    renderIcon,
-  } = useDiagramState(s => ({
-    viewId: s.view.id,
-    isEditable: s.readonly !== true,
-    isDimmed: s.dimmed.has(id),
-    isInteractive: s.nodesDraggable || s.nodesSelectable || s.enableElementDetails || s.enableRelationshipBrowser
-      || (!!s.onNavigateTo && !!element.navigateTo),
-    isNavigable: (!!s.onNavigateTo && !!element.navigateTo),
-    enableElementDetails: s.enableElementDetails,
-    enableRelationshipBrowser: s.enableRelationshipBrowser,
-    openOverlay: s.openOverlay,
-    isInActiveOverlay: (s.activeOverlay?.elementDetails ?? s.activeOverlay?.relationshipsOf) === id,
-    renderIcon: s.renderIcon,
-  }))
-
-  const w = toDomPrecision(width ?? element.width)
-  const h = toDomPrecision(height ?? element.height)
-
-  let animateVariant: VariantKeys | string[]
-  switch (true) {
-    case isInActiveOverlay:
-      animateVariant = 'idle'
-      break
-    case dragging && selected:
-      animateVariant = 'selected'
-      break
-    case dragging:
-      animateVariant = 'idle'
-      break
-    case isDimmed:
-      animateVariant = 'dimmed'
-      break
-    case selected:
-      animateVariant = 'selected'
-      break
-    default:
-      animateVariant = 'idle'
-  }
-
-  const [animateVariants, animateHandlers] = useFramerAnimateVariants()
-  if (!dragging && !isInActiveOverlay) {
-    animateVariant = animateVariants ?? animateVariant
-  }
-
-  const isHovered = !!animateVariants && animateVariants.includes('hovered')
-
-  const _isToolbarVisible = (selected && !dragging) || isHovered
-  // TODO: This is a workaround to prevent the toolbar from flickering when the node unhovered
-  const [isToolbarVisible] = useDebouncedValue(_isToolbarVisible, _isToolbarVisible ? 500 : 1000)
-
-  const elementIcon = ElementIcon({
-    element,
-    viewId,
-    className: css.elementIcon,
-    renderIcon,
-  })
-
-  const [previewColor, setPreviewColor] = useState<ThemeColor | null>(null)
-
-  return (
-    <>
-      <Box
-        component={m.div}
-        className={clsx([
-          css.container,
-          animateVariant !== 'idle' && css.containerAnimated,
-          'likec4-element-node',
-        ])}
-        key={`${viewId}:element:${id}`}
-        layoutId={`${viewId}:element:${id}`}
-        data-hovered={!dragging && isHovered}
-        data-likec4-color={previewColor ?? element.color}
-        data-likec4-shape={element.shape}
-        data-animate-target=""
-        initial={false}
-        variants={NodeVariants(w, h)}
-        animate={animateVariant}
-        {...isInteractive && animateHandlers}
-        tabIndex={-1}
-      >
-        {isEditable && (
-          <ElementToolbar
-            element={element}
-            isVisible={isToolbarVisible}
-            align="start"
-            onColorPreview={setPreviewColor}
-          />
-        )}
-        <svg
-          className={clsx(css.shapeSvg)}
-          viewBox={`0 0 ${w} ${h}`}>
-          <g className={css.indicator}>
-            <SelectedIndicator shape={element.shape} w={w} h={h} />
-          </g>
-          <ElementShapeSvg shape={element.shape} w={w} h={h} />
-        </svg>
-        <Box
-          className={clsx(
-            css.elementDataContainer,
-            isTruthy(elementIcon) && css.hasIcon,
-            'likec4-element',
-          )}
-        >
-          {elementIcon}
-          <Box className={clsx(css.elementTextData, 'likec4-element-main-props')}>
-            <Text
-              component={m.div}
-              key={`${viewId}:element:title:${id}`}
-              layoutId={`${viewId}:element:title:${id}`}
-              className={clsx(css.title, 'likec4-element-title')}>
-              {element.title}
-            </Text>
-
-            {element.technology && (
-              <Text className={clsx(css.technology, 'likec4-element-technology')}>
-                {element.technology}
-              </Text>
-            )}
-            {element.description && (
-              <Text className={clsx(css.description, 'likec4-element-description')} lineClamp={5}>
-                {element.description}
-              </Text>
-            )}
-          </Box>
-        </Box>
-        <Box className={clsx(nodeCss.bottomBtnContainer)}>
-          <ActionButtonBar shiftY="bottom">
-            {isNavigable && (
-              <NavigateToButton
-                xynodeId={id}
-                {...isInteractive && animateHandlers}
-              />
-            )}
-            {enableRelationshipBrowser && !!modelRef && (
-              <BrowseRelationshipsButton
-                fqn={modelRef}
-                {...isInteractive && animateHandlers}
-              />
-            )}
-          </ActionButtonBar>
-        </Box>
-        {enableElementDetails && !!modelRef && (
-          <Box className={clsx(nodeCss.topRightBtnContainer)}>
-            <OpenDetailsButton fqn={modelRef} {...isInteractive && animateHandlers} />
-          </Box>
-        )}
-      </Box>
-      <Handle type="target" position={Position.Top} className={css.handleCenter} />
-      <Handle type="source" position={Position.Top} className={css.handleCenter} />
-    </>
-  )
-}, isEqualProps)

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

@@ -1,369 +0,0 @@
-import { rem } from '@mantine/core'
-import { createVar, fallbackVar, globalStyle, keyframes, style } from '@vanilla-extract/css'
-import { mantine, vars } from '../../../theme-vars'
-
-export const stokeFillMix = createVar('stroke-fill-mix')
-
-export const container = style({
-  position: 'absolute',
-  top: 0,
-  left: 0,
-  width: '100%',
-  height: '100%',
-  padding: 0,
-  margin: 0,
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  vars: {
-    [stokeFillMix]: `color-mix(in srgb, ${vars.element.stroke} 90%, ${vars.element.fill})`
-  },
-  selectors: {
-    ':where(.react-flow__node.selected) &': {
-      willChange: 'transform'
-    }
-  },
-  // Catch pointer below the element
-  ':after': {
-    content: ' ',
-    position: 'absolute',
-    top: '100%',
-    left: 0,
-    right: 0,
-    height: 16,
-    background: 'transparent',
-    pointerEvents: 'all'
-  }
-})
-
-export const handleCenter = style({
-  top: '50%',
-  left: '50%',
-  visibility: 'hidden'
-})
-
-export const containerAnimated = style({
-  willChange: 'transform'
-})
-
-const indicatorKeyframes = keyframes({
-  'from': {
-    strokeOpacity: 0.8
-  },
-  'to': {
-    strokeOpacity: 0.5
-  }
-})
-
-const outlineColor = fallbackVar(
-  mantine.colors.primaryColors.outline,
-  mantine.colors.primaryColors.filled,
-  vars.element.stroke
-)
-
-const indicatorStroke = createVar('indicator-stroke')
-
-export const indicator = style({
-  stroke: indicatorStroke,
-  fill: 'none',
-  transformOrigin: 'center center',
-  strokeWidth: 6,
-  animationDuration: '1s',
-  animationIterationCount: 'infinite',
-  animationDirection: 'alternate',
-  strokeOpacity: 0.8,
-  visibility: 'hidden',
-  vars: {
-    [indicatorStroke]: vars.element.loContrast
-  },
-  selectors: {
-    ':where(.react-flow__node.selected) &': {
-      visibility: 'visible',
-      animationName: fallbackVar(vars.safariAnimationHook, indicatorKeyframes)
-    },
-    [`:where(.react-flow__node:focus-visible, ${container}:focus-visible) &`]: {
-      strokeWidth: 10,
-      stroke: outlineColor,
-      visibility: 'visible'
-    },
-    ':where([data-likec4-shape="queue"], [data-likec4-shape="cylinder"], [data-likec4-shape="storage"]) &': {
-      strokeWidth: 10
-    },
-    [`:where([data-mantine-color-scheme='light']) &`]: {
-      vars: {
-        [indicatorStroke]: `color-mix(in srgb, ${vars.element.fill} 50%, #3c3c3c)`
-      }
-    }
-  }
-})
-
-export const fillElementFill = style({
-  fill: vars.element.fill
-})
-
-export const fillElementStroke = style({
-  fill: vars.element.stroke
-})
-
-export const fillMixStroke = style({
-  fill: fallbackVar(stokeFillMix, `color-mix(in srgb, ${vars.element.stroke} 90%, ${vars.element.fill})`)
-})
-
-export const hasIcon = style({})
-
-const textAlign = createVar('text-align')
-const iconSize = createVar('icon-size')
-
-export const title = style({
-  flex: '0 0 auto',
-  fontFamily: vars.element.font,
-  fontOpticalSizing: 'auto',
-  fontStyle: 'normal',
-  textAlign: textAlign,
-  fontWeight: 500,
-  fontSize: 19,
-  lineHeight: 1.15,
-  textWrap: 'balance',
-  color: vars.element.hiContrast,
-  whiteSpaceCollapse: 'preserve-breaks'
-})
-
-export const description = style({
-  flex: '0 1 auto',
-  fontFamily: vars.element.font,
-  fontOpticalSizing: 'auto',
-  fontStyle: 'normal',
-  fontWeight: 400,
-  fontSize: 14,
-  lineHeight: 1.2,
-  textAlign: textAlign,
-  textWrap: 'pretty',
-  color: vars.element.loContrast,
-  whiteSpaceCollapse: 'preserve-breaks',
-  textOverflow: 'ellipsis',
-  overflow: 'hidden',
-  selectors: {
-    [`:where(${hasIcon}) &`]: {
-      textWrap: 'wrap'
-    }
-  }
-})
-
-export const technology = style({
-  flex: '0 0 auto',
-  fontFamily: vars.element.font,
-  fontOpticalSizing: 'auto',
-  fontStyle: 'normal',
-  fontWeight: 400,
-  fontSize: 12,
-  lineHeight: 1.125,
-  textAlign: textAlign,
-  textWrap: 'balance',
-  opacity: 0.92,
-  color: vars.element.loContrast,
-  selectors: {
-    [`${container}:hover &`]: {
-      opacity: 1
-    }
-  }
-})
-
-export const elementDataContainer = style({
-  flex: '1',
-  height: 'fit-content',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  flexDirection: 'row',
-  padding: rem(24),
-  overflow: 'hidden',
-  gap: rem(10),
-  vars: {
-    [iconSize]: '48px'
-  },
-  selectors: {
-    ':where([data-likec4-shape="queue"], [data-likec4-shape="mobile"]) &': {
-      paddingLeft: 40,
-      paddingRight: 20
-    },
-    ':where([data-likec4-shape="cylinder"], [data-likec4-shape="storage"]) &': {
-      paddingTop: 30
-    },
-    ':where([data-likec4-shape="browser"]) &': {
-      paddingTop: 32,
-      paddingBottom: 28
-    },
-    // [`&:is(${hasIcon})`]: {
-    //   paddingLeft: 40,
-    //   paddingRight: 20
-    // },
-    [`${container}:not(:is([data-likec4-shape="queue"],[data-likec4-shape="mobile"])) &:is(${hasIcon})`]: {
-      paddingLeft: 24,
-      paddingRight: 18
-    },
-    [`&:has(${description}, ${technology})`]: {
-      gap: rem(16),
-      vars: {
-        [iconSize]: '60px'
-      }
-    }
-  }
-})
-
-export const elementTextData = style({
-  height: 'fit-content',
-  width: 'max-content',
-  display: 'flex',
-  flexDirection: 'column',
-  alignItems: 'stretch',
-  justifyContent: 'center',
-  flexWrap: 'nowrap',
-  overflow: 'hidden',
-  gap: rem(8),
-  'vars': {
-    [textAlign]: 'center'
-  },
-  selectors: {
-    [`&:has(${description}):has(${technology})`]: {
-      gap: rem(6)
-    },
-    [`:where(${hasIcon}) &`]: {
-      minWidth: 'calc(100% - 160px)',
-      alignItems: 'flex-start',
-      'vars': {
-        [textAlign]: 'left'
-      }
-    }
-  }
-})
-
-export const elementIcon = style({
-  flex: `0 0 ${iconSize}`,
-  height: iconSize,
-  width: iconSize,
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  mixBlendMode: 'hard-light',
-  alignSelf: 'flex-start'
-})
-globalStyle(`${elementIcon} svg, ${elementIcon} img`, {
-  width: '100%',
-  height: 'auto',
-  maxHeight: '100%',
-  pointerEvents: 'none',
-  filter: `
-    drop-shadow(0 0 3px rgb(0 0 0 / 12%))
-    drop-shadow(0 1px 8px rgb(0 0 0 / 8%))
-    drop-shadow(1px 1px 16px rgb(0 0 0 / 3%))
-  `
-})
-globalStyle(`${elementIcon} img`, {
-  objectFit: 'contain'
-})
-
-const filterShadow = createVar('filter-shadow')
-
-export const shapeSvgMultiple = style({
-  top: 0,
-  left: 0,
-  position: 'absolute',
-  pointerEvents: 'none',
-  transformOrigin: '50% 50%',
-  fill: vars.element.fill,
-  stroke: 'none',
-  zIndex: -1,
-  transition: 'opacity 500ms ease-out',
-  transform: 'translate(8px,10px)',
-  opacity: 0.5,
-  selectors: {
-    [`:where(.react-flow__node.selected, .react-flow__node:focus-visible, ${container}:focus-visible) &`]: {
-      visibility: 'hidden'
-    },
-    ':where([data-likec4-shape="cylinder"], [data-likec4-shape="storage"]) &': {
-      transform: 'translate(8px,8px)'
-    },
-    ':where([data-likec4-shape="queue"]) &': {
-      transform: 'translate(-10px,8px)'
-    }
-  }
-})
-export const shapeSvg = style({
-  top: 0,
-  left: 0,
-  position: 'absolute',
-  width: '100%',
-  height: '100%',
-  pointerEvents: 'none',
-  fill: vars.element.fill,
-  stroke: vars.element.stroke,
-  overflow: 'visible',
-  filter: filterShadow,
-  transition: 'filter 300ms ease-out',
-  transitionDelay: '0ms',
-  zIndex: -1,
-  vars: {
-    [filterShadow]: `
-      drop-shadow(0 2px 1px rgba(0, 0, 0, 0.21))
-      drop-shadow(0 1px 1px color-mix(in srgb, ${vars.element.stroke} 40%, transparent))
-      drop-shadow(0 5px 3px rgba(0, 0, 0, 0.1))
-    `
-  },
-  selectors: {
-    [`:where(.react-flow__node.selected, .react-flow__node:focus-visible, ${container}:focus-visible) &`]: {
-      vars: {
-        [filterShadow]: `none`
-      }
-    }
-  }
-})
-
-export const bottomButtonsContainer = style({
-  zIndex: 100,
-  position: 'absolute',
-  left: 0,
-  width: '100%',
-  bottom: 2,
-  display: 'flex',
-  flexDirection: 'row',
-  flexWrap: 'nowrap',
-  alignItems: 'center',
-  gap: 2,
-  justifyContent: 'center',
-  pointerEvents: 'none',
-  selectors: {
-    [`:where([data-likec4-shape='browser']) &`]: {
-      bottom: 4
-    }
-  }
-})
-
-//   --group-gap: var(--mantine-spacing-md);
-//   --group-align: center;
-//   --group-justify: flex-start;
-//   --group-wrap: wrap;
-//   gap: 0px;
-// }
-// <style>
-// .element_bottomButtonsContainer__14yllojn {
-//   z-index: 100;
-//   position: absolute;
-//   left: 50%;
-//   bottom: 2px;
-//   transform: translate(-50%, 0%);
-// }
-
-// <style>
-// .m_4081bf90 {
-//   display: flex
-// ;
-//   flex-direction: row;
-//   flex-wrap: var(--group-wrap, wrap);
-//   justify-content: var(--group-justify, flex-start);
-//   align-items: var(--group-align, center);
-//   gap: var(--group-gap, var(--mantine-spacing-md));
-// }
-// globalStyle(`:where(.react-flow__node:hover) ${bottomButtonsContainer}`, {
-//   transitionDelay: '20ms',
-//   gap: 16
-// })

package/src/xyflow/nodes/element/index.ts

@@ -1 +0,0 @@
-export { ElementNodeMemo as ElementNode } from './ElementNode'

package/src/xyflow/nodes/shared/ElementIcon.tsx

@@ -1,43 +0,0 @@
-import type { DiagramNode } from '@likec4/core'
-import clsx from 'clsx'
-import { m } from 'framer-motion'
-import type { ElementIconRenderer } from '../../../LikeC4Diagram.props'
-
-export const ElementIcon = ({
-  element,
-  viewId,
-  className,
-  renderIcon: RenderIcon
-}: {
-  element: DiagramNode
-  viewId: string
-  className: string
-  renderIcon: ElementIconRenderer | null
-}) => {
-  if (!element.icon || element.icon === 'none') {
-    return null
-  }
-  let icon = null as React.ReactNode
-  if (element.icon.startsWith('http://') || element.icon.startsWith('https://')) {
-    icon = <img src={element.icon} alt={element.title} />
-  } else if (RenderIcon) {
-    icon = <RenderIcon node={element} />
-  }
-
-  if (!icon) {
-    return null
-  }
-  return (
-    <m.div
-      key={`${viewId}:element:icon:${element.id}`}
-      layoutId={`${viewId}:element:icon:${element.id}`}
-      className={clsx(
-        className,
-        'likec4-element-icon'
-      )}
-      data-likec4-icon={element.icon}
-    >
-      {icon}
-    </m.div>
-  )
-}