@likec4/diagram 1.19.2 → 1.20.1

package/src/xyflow/nodes/compound/CompoundNode.css.ts

@@ -1,258 +0,0 @@
-import { rem } from '@mantine/core'
-import { createVar, fallbackVar, globalStyle, keyframes, style } from '@vanilla-extract/css'
-import { calc } from '@vanilla-extract/css-utils'
-import { mantine, vars } from '../../../theme-vars'
-
-// For framer motion
-export const containerForFramer = style({
-  position: 'relative',
-  width: '100%',
-  height: '100%'
-  // transformOrigin: 'center center'
-})
-
-const iconSize = createVar('icon-size')
-export const container = style({
-  width: '100%',
-  height: '100%',
-  position: 'relative',
-  padding: 0,
-  margin: 0,
-  vars: {
-    [iconSize]: '18px'
-  },
-  ':before': {
-    content: ' ',
-    position: 'absolute',
-    top: 0,
-    left: -16,
-    width: 16,
-    height: 'min(100%, 80px)',
-    pointerEvents: 'all',
-    background: 'transparent'
-  }
-})
-
-export const nodeHandlerInCenter = style({
-  top: '50%',
-  left: '50%',
-  visibility: 'hidden'
-})
-
-globalStyle(`:where([data-mantine-color-scheme='dark'] .likec4-compound-transparent)`, {
-  vars: {
-    ['--_compound-border-color']: `color-mix(in srgb, ${vars.compound.titleColor} 25%, ${vars.element.stroke})`
-  }
-})
-globalStyle(`:where([data-mantine-color-scheme='light'] .likec4-compound-transparent)`, {
-  vars: {
-    ['--_compound-title-color']: vars.element.stroke
-  }
-})
-
-export const varOpacity = createVar('opacity')
-export const varBorderColor = createVar('border-color')
-export const varBorderRadius = createVar('border-transparency')
-export const varBorderTransparency = createVar('border-transparency')
-
-const outlineColor = fallbackVar(
-  mantine.colors.primaryColors.outline,
-  mantine.colors.primaryColors.filled,
-  vars.element.stroke
-)
-
-export const compoundBody = style({
-  width: '100%',
-  height: '100%',
-  position: 'relative',
-  borderRadius: varBorderRadius,
-  boxShadow: '0 4px 10px 0.5px rgba(0,0,0,0.1) , 0 2px 2px -1px rgba(0,0,0,0.4)',
-  padding: 0,
-  margin: 0,
-  transition: 'all 200ms ease-out',
-  // backgroundClip: 'padding-box',
-  // overflow: 'hidden',
-  cursor: 'default',
-  vars: {
-    [varBorderRadius]: '6px'
-  },
-  selectors: {
-    [`:where(.react-flow__node.selected) &`]: {
-      boxShadow: 'none'
-    },
-    ':where(.react-flow__node:focus-visible) &': {
-      transitionDuration: '0ms',
-      outline: `3px solid ${outlineColor}`,
-      outlineOffset: rem(1.5)
-    }
-  },
-  ':before': {
-    content: ' ',
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    width: '100%',
-    height: '100%',
-    pointerEvents: 'none',
-    border: '1px solid transparent',
-    borderRadius: varBorderRadius,
-    transition: 'background 175ms ease-out, opacity 175ms ease-out',
-    background: vars.element.fill,
-    backgroundClip: 'border-box'
-  }
-})
-export const compoundTitle = style({
-  display: 'flex',
-  alignItems: 'center',
-  gap: 6,
-  paddingLeft: 14,
-  paddingTop: 6,
-  minHeight: 30,
-  paddingRight: 2,
-  selectors: {
-    [`:where(.react-flow__node.draggable) &`]: {
-      cursor: 'grab'
-    },
-    [`:where(.likec4-compound-transparent) &`]: {
-      paddingTop: 3
-    }
-  }
-})
-export const withNavigation = style({
-  paddingLeft: 32
-})
-
-const opacityDeltaOnHover = createVar('opacityDeltaOnHover')
-export const transparent = style({
-  borderStyle: 'dashed',
-  borderWidth: 3,
-  boxShadow: 'none',
-  borderColor: `color-mix(in srgb , ${varBorderColor}, transparent ${fallbackVar(varBorderTransparency, '5%')})`,
-  vars: {
-    [varBorderColor]: `var(--_compound-border-color,${vars.element.stroke})`,
-    [opacityDeltaOnHover]: '0'
-  },
-  ':before': {
-    borderRadius: 'unset',
-    transitionDelay: '100ms',
-    opacity: calc.add(fallbackVar(varOpacity, '1'), opacityDeltaOnHover)
-  },
-  selectors: {
-    // [`:where(.react-flow__node.selected) &`]: {
-    //   vars: {
-    //     [opacityDeltaOnHover]: '.05'
-    //   }
-    // },
-    [`:where([data-hovered]) &`]: {
-      vars: {
-        [opacityDeltaOnHover]: '.08'
-      }
-    }
-  }
-})
-
-export const title = style({
-  flex: 1,
-  fontFamily: vars.compound.font,
-  fontWeight: 600,
-  fontSize: rem(15),
-  textTransform: 'uppercase',
-  letterSpacing: '0.2px',
-  // lineHeight: 1,
-  color: `var(--_compound-title-color,${vars.compound.titleColor})`,
-  // paddingLeft: 0,
-  // paddingTop: 13,
-  // paddingBottom: 6,
-  // minHeight: 20,
-  mixBlendMode: 'screen'
-})
-
-const indicatorKeyframes = keyframes({
-  'from': {
-    opacity: 0.6
-  },
-  'to': {
-    opacity: 0.3
-  }
-})
-
-const indicatorStroke = createVar('indicator-stroke')
-const indicatorStrokeWidth = createVar('indicator-stroke-width')
-export const indicator = style({
-  position: 'absolute',
-  top: '0',
-  left: '0',
-  width: '100%',
-  height: '100%',
-  pointerEvents: 'none',
-  overflow: 'visible',
-  visibility: 'hidden',
-  vars: {
-    [indicatorStroke]: vars.element.loContrast,
-    [indicatorStrokeWidth]: '6'
-  },
-  selectors: {
-    ':where(.react-flow__node.selected:not(:focus-visible)) &': {
-      visibility: 'visible'
-    },
-    ':where(.react-flow__node:focus-within:not(.selected)) &': {
-      vars: {
-        [indicatorStroke]: `color-mix(in srgb, ${vars.element.stroke} 30%, ${vars.element.loContrast})`,
-        [indicatorStrokeWidth]: '8'
-      }
-    },
-    [`:where([data-mantine-color-scheme='light']) &`]: {
-      vars: {
-        [indicatorStroke]: `color-mix(in srgb, ${vars.element.stroke} 80%, #000)`
-      }
-    }
-  }
-})
-
-globalStyle(`${indicator} rect`, {
-  stroke: indicatorStroke,
-  transformOrigin: 'center center',
-  strokeWidth: indicatorStrokeWidth,
-  animationDuration: '800ms',
-  animationName: indicatorKeyframes,
-  animationIterationCount: 'infinite',
-  animationDirection: 'alternate',
-  fill: 'none'
-})
-
-const navigateBtnColor = createVar('navigateBtnColor')
-
-globalStyle(`${container}`, {
-  vars: {
-    [navigateBtnColor]: vars.element.loContrast
-  }
-})
-globalStyle(`:where([data-mantine-color-scheme='light'] .likec4-compound-transparent)`, {
-  vars: {
-    [navigateBtnColor]: vars.element.stroke
-  }
-})
-
-export const elementIcon = style({
-  flex: `0 0 ${iconSize}`,
-  height: iconSize,
-  width: iconSize,
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  mixBlendMode: 'luminosity'
-})
-globalStyle(`${elementIcon} svg, ${elementIcon} img`, {
-  width: '100%',
-  height: 'auto',
-  maxHeight: '100%',
-  pointerEvents: 'none',
-  filter: `
-    drop-shadow(0 0 3px rgb(0 0 0 / 10%))
-    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'
-})

package/src/xyflow/nodes/compound/CompoundNode.tsx

@@ -1,227 +0,0 @@
-import { type ThemeColor, DiagramNode } from '@likec4/core'
-import { Box, Text } from '@mantine/core'
-import { useDebouncedValue } from '@mantine/hooks'
-import { assignInlineVars } from '@vanilla-extract/dynamic'
-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 { clamp } from 'remeda'
-import { ActionButtonBar } from '../../../controls/action-button-bar/ActionButtonBar'
-import { NavigateToButton, OpenDetailsButton } from '../../../controls/action-buttons/ActionButtons'
-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 { CompoundToolbar } from '../shared/Toolbar'
-import * as css from './CompoundNode.css'
-
-type CompoundNodeProps = NodeProps<DiagramFlowTypes.CompoundNode>
-
-const isEqualProps = (prev: CompoundNodeProps, next: CompoundNodeProps) => (
-  prev.id === next.id
-  && eq(prev.selected ?? false, next.selected ?? false)
-  && eq(prev.dragging ?? false, next.dragging ?? false)
-  && eq(prev.data, next.data)
-)
-
-export const CompoundNodeMemo = /* @__PURE__ */ memo<CompoundNodeProps>((
-  {
-    id,
-    selected = false,
-    dragging = false,
-    data: {
-      isViewGroup,
-      element,
-    },
-    width,
-    height,
-  },
-) => {
-  const modelRef = DiagramNode.modelRef(element)
-  const { depth, style, color } = element
-  const isNotViewGroup = !isViewGroup
-  const opacity = clamp((style.opacity ?? 100) / 100, {
-    min: 0,
-    max: 1,
-  })
-  const MAX_TRANSPARENCY = 40
-  const borderTransparency = clamp(MAX_TRANSPARENCY - opacity * MAX_TRANSPARENCY, {
-    min: 0,
-    max: MAX_TRANSPARENCY,
-  })
-
-  const {
-    viewId,
-    isEditable,
-    isDimmed,
-    isInteractive,
-    isNavigable,
-    renderIcon,
-    isInActiveOverlay,
-    enableElementDetails,
-  } = useDiagramState(s => ({
-    viewId: s.view.id,
-    isEditable: s.readonly !== true,
-    isDimmed: s.dimmed.has(id),
-    isInteractive: s.nodesDraggable || s.nodesSelectable || s.enableElementDetails
-      || (!!s.onNavigateTo && !!element.navigateTo),
-    // If this is a view group, we don't want to show the navigate button
-    isNavigable: isNotViewGroup && !!s.onNavigateTo && !!element.navigateTo,
-    renderIcon: s.renderIcon,
-    isInActiveOverlay: (s.activeOverlay?.elementDetails ?? s.activeOverlay?.relationshipsOf) === id,
-    enableElementDetails: isNotViewGroup && s.enableElementDetails,
-  }))
-
-  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 = Array.isArray(animateVariant) && animateVariant.includes('hovered')
-
-  const _isToolbarVisible = isNotViewGroup && ((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 nodeVariants = NodeVariants(w, h, {
-    selectedScaleBy: 0,
-    hoveredScaleBy: 0,
-    tapScaleBy: -10,
-  })
-
-  const [previewColor, setPreviewColor] = useState<ThemeColor | null>(null)
-
-  const elementIcon = ElementIcon({
-    element,
-    viewId,
-    className: css.elementIcon,
-    renderIcon,
-  })
-
-  return (
-    <>
-      {isEditable && (
-        <CompoundToolbar
-          isVisible={isToolbarVisible}
-          element={element}
-          align="start"
-          onColorPreview={setPreviewColor} />
-      )}
-      <Box
-        component={m.div}
-        variants={nodeVariants}
-        key={`${viewId}:element:${id}`}
-        layoutId={`${viewId}:element:${id}`}
-        className={css.containerForFramer}>
-        <Box
-          component={m.div}
-          className={clsx(
-            css.container,
-            'likec4-compound-node',
-            opacity < 1 && 'likec4-compound-transparent',
-          )}
-          initial={false}
-          variants={nodeVariants}
-          animate={animateVariant}
-          {...isInteractive && animateHandlers}
-          mod={{
-            'animate-target': '',
-            'compound-depth': depth,
-            'likec4-color': previewColor ?? color,
-          }}
-          tabIndex={-1}
-        >
-          <svg className={css.indicator}>
-            <rect
-              x={0}
-              y={0}
-              width={'100%'}
-              height={'100%'}
-              rx={6}
-            />
-          </svg>
-          <Box
-            className={clsx(
-              css.compoundBody,
-              opacity < 1 && css.transparent,
-              'likec4-compound',
-            )}
-            style={{
-              ...(opacity < 1 && {
-                ...assignInlineVars({
-                  [css.varBorderTransparency]: `${borderTransparency}%`,
-                  [css.varOpacity]: opacity.toFixed(2),
-                }),
-                ...style.border === 'none'
-                  ? {
-                    borderColor: 'transparent',
-                  }
-                  : {
-                    borderStyle: style.border ?? 'dashed',
-                  },
-              }),
-            }}
-          >
-            <Box
-              className={clsx(
-                css.compoundTitle,
-                isNavigable && css.withNavigation,
-                'likec4-compound-title',
-              )}>
-              {elementIcon}
-              <Text
-                component={m.div}
-                key={`${viewId}:element:title:${id}`}
-                layoutId={`${viewId}:element:title:${id}`}
-                className={css.title}>
-                {element.title}
-              </Text>
-              {enableElementDetails && !!modelRef && (
-                <Box className={clsx(nodeCss.topRightBtnContainer)}>
-                  <OpenDetailsButton fqn={modelRef} {...isInteractive && animateHandlers} />
-                </Box>
-              )}
-            </Box>
-          </Box>
-          {isNavigable && (
-            <Box className={clsx(nodeCss.topLeftBtnContainer)}>
-              <ActionButtonBar shiftX="left">
-                <NavigateToButton xynodeId={id} {...isInteractive && animateHandlers} />
-              </ActionButtonBar>
-            </Box>
-          )}
-        </Box>
-      </Box>
-      <Handle type="target" position={Position.Top} className={css.nodeHandlerInCenter} />
-      <Handle type="source" position={Position.Top} className={css.nodeHandlerInCenter} />
-    </>
-  )
-}, isEqualProps)

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

@@ -1 +0,0 @@
-export { CompoundNodeMemo as CompoundNode } from './CompoundNode'

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

@@ -1,67 +0,0 @@
-import { globalStyle, style } from '@vanilla-extract/css'
-import { vars } from '../../../theme-vars'
-
-export const elementLink = style({
-  position: 'absolute',
-  left: 0,
-  bottom: 0,
-  paddingLeft: 6,
-  paddingBottom: 6,
-  pointerEvents: 'all',
-  selectors: {
-    ':where([data-likec4-shape="cylinder"], [data-likec4-shape="storage"]) &': {
-      bottom: 6
-    },
-    ':where([data-likec4-shape="queue"]) &': {
-      left: 12,
-      bottom: -3
-    }
-  }
-  // fontSize: rem(10),
-  // height: 12,
-  // width: '100%',
-  // height: '100%',
-  // vars: {
-  //   [stokeFillMix]: `color-mix(in srgb, ${vars.element.stroke} 90%, ${vars.element.fill})`
-  // }
-})
-
-export const trigger = style({
-  display: 'flex',
-  lineHeight: 0.75,
-  fontSize: 11,
-  fontWeight: 500,
-  alignItems: 'center',
-  justifyContent: 'center',
-  color: vars.element.loContrast,
-  paddingTop: 2,
-  paddingBottom: 2,
-  paddingLeft: 4,
-  paddingRight: 5,
-  borderRadius: 3,
-  backgroundColor: `color-mix(in srgb, ${vars.element.stroke}, transparent 20%)`,
-  transition: 'all 180ms ease-out',
-  opacity: 0.85,
-  ':hover': {
-    color: vars.element.hiContrast,
-    backgroundColor: vars.element.stroke,
-    opacity: 1
-  }
-})
-
-globalStyle(`${trigger} .icon`, {
-  display: 'inline-block',
-  lineHeight: 1,
-  width: 10,
-  height: 10,
-  opacity: 0.6
-})
-globalStyle(`${trigger} span`, {
-  display: 'inline-block',
-  lineHeight: 1,
-  marginLeft: 3
-})
-
-export const linkButton = style({
-  textAlign: 'left'
-})

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

@@ -1,97 +0,0 @@
-import { invariant } from '@likec4/core'
-import {
-  Anchor,
-  Box,
-  Button,
-  CopyButton,
-  Group,
-  HoverCard,
-  HoverCardDropdown,
-  HoverCardTarget,
-  Stack,
-  UnstyledButton
-} from '@mantine/core'
-import { IconLink } from '@tabler/icons-react'
-import clsx from 'clsx'
-import { useId } from 'react'
-import { clamp } from 'remeda'
-import { useMantinePortalProps } from '../../../hooks/useMantinePortalProps'
-import { elementLink, trigger } from './ElementLink.css'
-import type { DiagramFlowTypes } from '../../types'
-
-type ElementLinkProps = {
-  element: DiagramFlowTypes.Node['data']['element']
-}
-
-const stopEventPropagation = (e: React.MouseEvent) => e.stopPropagation()
-
-export function ElementLink({
-  element
-}: ElementLinkProps) {
-  invariant(element.links, 'ElementLink: links are required')
-  const id = useId()
-  const portalProps = useMantinePortalProps()
-  return (
-    <div
-      className={elementLink}
-      data-likec4-linkid={id}
-      onPointerDownCapture={stopEventPropagation}
-      onDoubleClick={stopEventPropagation}
-      onClick={stopEventPropagation}>
-      <HoverCard
-        position="bottom-start"
-        shadow="lg"
-        radius="sm"
-        classNames={{
-          dropdown: clsx('nodrag', 'nopan')
-        }}
-        transitionProps={{
-          transition: 'pop'
-        }}
-        {...portalProps}
-        floatingStrategy={'fixed'}
-        openDelay={350}
-        closeDelay={800}
-        offset={{
-          mainAxis: 5,
-          crossAxis: -10
-        }}>
-        <HoverCardTarget>
-          <UnstyledButton
-            tabIndex={-1}
-            className={clsx('nodrag nopan', trigger)}
-            autoFocus={false}>
-            <IconLink size={12} />
-            <span>links</span>
-          </UnstyledButton>
-        </HoverCardTarget>
-        <HoverCardDropdown p={'xs'}>
-          <Stack gap={'xs'}>
-            {element.links.map((link) => (
-              <Group key={link.url} wrap="nowrap" gap={'sm'}>
-                <Box flex={'1'} style={{ overflow: 'clip', maxWidth: clamp(element.width, { min: 200, max: 400 }) }}>
-                  <Anchor href={link.url} target="_blank" fz="13" truncate="end">
-                    {link.title || link.url}
-                  </Anchor>
-                </Box>
-                <CopyButton value={link.url}>
-                  {({ copied, copy }) => (
-                    <Button
-                      size="compact-xs"
-                      fz={'10'}
-                      variant="light"
-                      onClick={copy}
-                      color={copied ? 'teal' : 'gray'}
-                    >
-                      {copied ? 'copied' : 'copy'}
-                    </Button>
-                  )}
-                </CopyButton>
-              </Group>
-            ))}
-          </Stack>
-        </HoverCardDropdown>
-      </HoverCard>
-    </div>
-  )
-}