@likec4/diagram 1.19.2 → 1.20.0

package/src/overlays/relationships-of/xyflow/CompoundNode.tsx

@@ -1,124 +0,0 @@
-import { Handle, type NodeProps, Position, useStore } from '@xyflow/react'
-import clsx from 'clsx'
-import { deepEqual, shallowEqual } from 'fast-equals'
-import { m } from 'framer-motion'
-import { memo, useCallback } from 'react'
-import type { RelationshipsOfFlowTypes } from '../_types'
-import * as css from './styles.css'
-import { Text } from '../../../controls/Text'
-
-type CompoundNodeProps = NodeProps<RelationshipsOfFlowTypes.CompoundNode>
-
-export const CompoundNode = memo<CompoundNodeProps>(({
-  id,
-  data: {
-    element,
-    ports,
-    layoutId = id,
-    leaving = false,
-    entering = true,
-    ...data
-  },
-  width = 200,
-  height = 100,
-  ...props
-}) => {
-  const scale = (diff: number) => ({
-    scaleX: (width + diff) / width,
-    scaleY: (height + diff) / height
-  })
-
-  let opacity = 1
-  if (data.dimmed) {
-    opacity = data.dimmed === 'immediate' ? 0.05 : 0.15
-  }
-  if (leaving) {
-    opacity = 0
-  }
-
-  const {
-    elementsSelectable
-  } = useStore(
-    useCallback((s) => ({
-      elementsSelectable: s.elementsSelectable
-    }), []),
-    shallowEqual
-  )
-
-  const selectable = props.selectable ?? elementsSelectable
-
-  return (
-    <>
-      <m.div
-        className={clsx([
-          css.compoundNodeBody,
-          'likec4-compound-node'
-        ])}
-        layoutId={layoutId}
-        data-compound-depth={data.depth ?? 1}
-        data-likec4-color={element.color}
-        initial={(layoutId === id && entering)
-          ? {
-            ...scale(-20),
-            opacity: 0,
-            width,
-            height
-          }
-          : false}
-        animate={{
-          ...scale(0),
-          opacity,
-          width,
-          height,
-          transition: {
-            opacity: {
-              delay: !leaving && data.dimmed === true ? .4 : 0,
-              ...((leaving || data.dimmed === 'immediate') && {
-                duration: 0.09
-              })
-            }
-          }
-        }}
-        {...(selectable && {
-          whileHover: {
-            ...scale(12),
-            transition: {
-              delay: 0.1
-            }
-          },
-          whileTap: {
-            ...scale(-8)
-          }
-        })}
-      >
-        <Text className={css.compoundNodeTitle} maw={width - 20}>
-          {element.title}
-        </Text>
-      </m.div>
-      {ports.in.map((id, i) => (
-        <Handle
-          key={id}
-          id={id}
-          type="target"
-          position={Position.Left}
-          style={{
-            visibility: 'hidden',
-            top: `${20 * (i + 1)}px`
-          }} />
-      ))}
-      {ports.out.map((id, i) => (
-        <Handle
-          key={id}
-          id={id}
-          type="source"
-          position={Position.Right}
-          style={{
-            visibility: 'hidden',
-            top: `${20 * (i + 1)}px`
-          }} />
-      ))}
-    </>
-  )
-}, (prev, next) => {
-  return deepEqual(prev.data, next.data)
-})

package/src/overlays/relationships-of/xyflow/ElementNode.tsx

@@ -1,194 +0,0 @@
-import { ActionIcon, Box, Group } from '@mantine/core'
-import { IconFileSymlink, IconTransform, IconZoomScan } from '@tabler/icons-react'
-import { Handle, type NodeProps, Position } from '@xyflow/react'
-import clsx from 'clsx'
-import { deepEqual } from 'fast-equals'
-import { m } from 'framer-motion'
-import { memo } from 'react'
-import { type DiagramState, useDiagramState } from '../../../hooks'
-import { ElementShapeSvg } from '../../../xyflow/nodes/element/ElementShapeSvg'
-import { stopPropagation } from '../../../xyflow/utils'
-import { useOverlayDialog } from '../../OverlayContext'
-import type { RelationshipsOfFlowTypes } from '../_types'
-import * as css from './styles.css'
-import { Text } from '../../../controls/Text'
-
-const Action = ActionIcon.withProps({
-  className: 'nodrag nopan ' + css.navigateBtn,
-  radius: 'md',
-  role: 'button',
-  onDoubleClick: stopPropagation,
-  onPointerDownCapture: stopPropagation
-})
-
-type ElementNodeProps = NodeProps<RelationshipsOfFlowTypes.ElementNode>
-
-function selector(s: DiagramState) {
-  return {
-    currentViewId: s.view.id,
-    onNavigateTo: s.onNavigateTo,
-    onOpenSource: s.onOpenSource
-  }
-}
-
-export const ElementNode = memo<ElementNodeProps>(({
-  id,
-  data: {
-    element,
-    ports,
-    navigateTo,
-    layoutId = id,
-    leaving = false,
-    entering = true,
-    ...data
-  },
-  selectable = true,
-  width: w = 100,
-  height: h = 100
-}) => {
-  const overlay = useOverlayDialog()
-  const {
-    currentViewId,
-    onNavigateTo,
-    onOpenSource
-  } = useDiagramState(selector)
-
-  const maxWH = Math.max(w, h)
-  const scale = (diff: number) => {
-    const s = (maxWH + diff) / maxWH
-    return ({
-      scaleX: s,
-      scaleY: s
-    })
-  }
-
-  let opacity = 1
-  if (data.dimmed) {
-    opacity = data.dimmed === 'immediate' ? 0.05 : 0.15
-  }
-  if (leaving) {
-    opacity = 0
-  }
-
-  return (
-    <>
-      <m.div
-        className={clsx([
-          css.elementNode,
-          'likec4-element-node'
-        ])}
-        layoutId={layoutId}
-        data-likec4-color={element.color}
-        initial={(layoutId === id && entering)
-          ? {
-            ...scale(-20),
-            opacity: 0,
-            width: w,
-            height: h
-          }
-          : false}
-        animate={{
-          ...scale(0),
-          opacity,
-          width: w,
-          height: h,
-          transition: {
-            opacity: {
-              delay: !leaving && data.dimmed === true ? .4 : 0,
-              ...((leaving || data.dimmed === 'immediate') && {
-                duration: 0.09
-              })
-            }
-          }
-        }}
-        {...(selectable && {
-          whileHover: {
-            ...scale(16)
-            // transition: {
-            //   delay: 0.1
-            // }
-          },
-          whileTap: {
-            ...scale(-8)
-          }
-        })}
-      >
-        <svg
-          className={clsx(
-            css.cssShapeSvg
-          )}
-          viewBox={`0 0 ${w} ${h}`}
-          width={w}
-          height={h}
-        >
-          <ElementShapeSvg shape={element.shape} w={w} h={h} />
-        </svg>
-        <Box className={css.elementNodeContent}>
-          <Text className={css.elementNodeTitle} lineClamp={2}>
-            {element.title}
-          </Text>
-          {element.description && (
-            <Text className={css.elementNodeDescription} lineClamp={4}>{element.description}</Text>
-          )}
-        </Box>
-        <Group className={css.navigateBtnBox}>
-          {navigateTo && onNavigateTo && navigateTo !== currentViewId && (
-            <Action
-              onClick={(event) => {
-                event.stopPropagation()
-                overlay.close(() => onNavigateTo(navigateTo))
-              }}>
-              <IconZoomScan stroke={1.8} style={{ width: '75%' }} />
-            </Action>
-          )}
-          {data.column !== 'subjects' && (
-            <Action
-              onClick={(event) => {
-                event.stopPropagation()
-                overlay.openOverlay({
-                  relationshipsOf: data.fqn
-                })
-              }}>
-              <IconTransform stroke={1.8} style={{ width: '72%' }} />
-            </Action>
-          )}
-          {onOpenSource && (
-            <Action
-              onClick={(event) => {
-                event.stopPropagation()
-                onOpenSource?.({
-                  element: data.fqn
-                })
-              }}>
-              <IconFileSymlink stroke={1.8} style={{ width: '72%' }} />
-            </Action>
-          )}
-        </Group>
-      </m.div>
-      {ports.in.map((id, i) => (
-        <Handle
-          key={id}
-          id={id}
-          type="target"
-          position={Position.Left}
-          style={{
-            visibility: 'hidden',
-            top: `${15 + (i + 1) * ((h - 30) / (ports.in.length + 1))}px`
-          }} />
-      ))}
-      {ports.out.map((id, i) => (
-        <Handle
-          key={id}
-          id={id}
-          type="source"
-          position={Position.Right}
-          style={{
-            visibility: 'hidden',
-            top: `${15 + (i + 1) * ((h - 30) / (ports.out.length + 1))}px`
-          }} />
-      ))}
-    </>
-  )
-}, (prev, next) => {
-  return deepEqual(prev.data, next.data)
-})

package/src/overlays/relationships-of/xyflow/EmptyNode.tsx

@@ -1,19 +0,0 @@
-import { Box } from '@mantine/core'
-import { type NodeProps } from '@xyflow/react'
-import type { RelationshipsOfFlowTypes } from '../_types'
-import * as css from './styles.css'
-import { Text } from '../../../controls/Text'
-
-type EmptyNodeProps = NodeProps<RelationshipsOfFlowTypes.EmptyNode>
-
-export function EmptyNode({
-  data: {
-    column
-  }
-}: EmptyNodeProps) {
-  return (
-    <Box className={css.emptyNode}>
-      <Text c={'dimmed'} fz={'lg'} fw={500}>No {column === 'incomers' ? 'incoming' : 'outgoing'}</Text>
-    </Box>
-  )
-}

package/src/overlays/relationships-of/xyflow/RelationshipEdge.tsx

@@ -1,127 +0,0 @@
-import { ActionIcon, Box, Group, Stack, Text, ThemeIcon, Tooltip as MantineTooltip } from '@mantine/core'
-import { IconBoxMultipleFilled, IconZoomScan } from '@tabler/icons-react'
-import { type EdgeProps, BaseEdge, EdgeLabelRenderer, getBezierPath } from '@xyflow/react'
-import clsx from 'clsx'
-import { only } from 'remeda'
-import { useDiagramState } from '../../../hooks/useDiagramState'
-import { stopPropagation } from '../../../xyflow/utils'
-import { useOverlayDialog } from '../../OverlayContext'
-import * as css from '../../shared/xyflow/RelationshipEdge.css'
-import type { RelationshipsOfFlowTypes } from '../_types'
-import { ZIndexes } from '../use-layouted-relationships'
-
-const Tooltip = MantineTooltip.withProps({
-  color: 'dark',
-  fz: 'sm',
-  openDelay: 400,
-  closeDelay: 150,
-  withinPortal: false,
-  label: '',
-  children: null,
-  offset: 4,
-})
-
-export function RelationshipEdge({
-  data,
-  label,
-  // Exclude the following props from the rest
-  animated: _animated,
-  ...props
-}: EdgeProps<RelationshipsOfFlowTypes.Edge>) {
-  const {
-    viewId,
-    onNavigateTo,
-  } = useDiagramState(s => ({
-    viewId: s.view.id,
-    onNavigateTo: s.onNavigateTo,
-  }))
-  const overlay = useOverlayDialog()
-  const [edgePath, labelX, labelY] = getBezierPath(props)
-  const navigateTo = onNavigateTo ? only(data.relations)?.navigateTo : undefined
-  const isMultiRelation = data.relations.length > 1
-  const technology = only(data.relations)?.technology
-
-  return (
-    <>
-      <g
-        className={css.edgeContainer}
-        data-edge-dimmed={data.dimmed}
-        data-edge-hovered={data.hovered}
-        data-likec4-color={data.existsInCurrentView ? 'gray' : 'amber'}
-      >
-        <BaseEdge
-          path={edgePath}
-          {...props}
-        />
-      </g>
-      <EdgeLabelRenderer>
-        <Stack
-          gap={2}
-          style={{
-            position: 'absolute',
-            transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
-            maxWidth: Math.abs(props.targetX - props.sourceX - 70),
-            zIndex: ZIndexes.max,
-          }}
-          className={clsx([
-            css.edgeLabel,
-            'nodrag nopan',
-          ])}
-          data-edge-dimmed={data.dimmed}
-          data-edge-hovered={data.hovered}
-          data-likec4-color={data.existsInCurrentView ? 'gray' : 'amber'}
-          // {...data.existsInCurrentView === false && { 'data-likec4-color': 'amber' }}
-        >
-          {label && (
-            <Tooltip label="Not included in current view" disabled={data.existsInCurrentView} color={'orange'}>
-              <Group gap={6} wrap="nowrap">
-                {isMultiRelation && (
-                  <ThemeIcon size={'sm'} variant="transparent" color="orange">
-                    <IconBoxMultipleFilled style={{ width: '80%' }} />
-                  </ThemeIcon>
-                )}
-                <Text
-                  fw={isMultiRelation ? '500' : '400'}
-                  style={{
-                    whiteSpace: isMultiRelation ? 'nowrap' : undefined,
-                  }}
-                  component={'div'}
-                  className={css.edgeLabelText}
-                  lineClamp={3}>
-                  {label}
-                </Text>
-              </Group>
-            </Tooltip>
-          )}
-          {technology && (
-            <Text component={'div'} className={css.edgeLabelTechnology}>
-              {'[ '}
-              {technology}
-              {' ]'}
-            </Text>
-          )}
-          {navigateTo && viewId !== navigateTo && (
-            <Box ta={'center'} mt={4}>
-              <ActionIcon
-                variant="default"
-                size={'sm'}
-                radius="sm"
-                onPointerDownCapture={stopPropagation}
-                onClick={event => {
-                  event.stopPropagation()
-                  overlay.close(() => {
-                    onNavigateTo?.(navigateTo, event)
-                  })
-                }}
-                role="button"
-                onDoubleClick={stopPropagation}
-              >
-                <IconZoomScan />
-              </ActionIcon>
-            </Box>
-          )}
-        </Stack>
-      </EdgeLabelRenderer>
-    </>
-  )
-}

package/src/overlays/relationships-of/xyflow/styles.css.ts

@@ -1,214 +0,0 @@
-import { rem } from '@mantine/core'
-import { globalStyle, style } from '@vanilla-extract/css'
-import { mantine, transitions, vars, whereDark, xyvars } from '../../../theme-vars'
-import { mixColor } from '../../Overlays.css'
-
-export const elementNode = style({
-  position: 'relative',
-  width: '100%',
-  height: '100%'
-})
-
-export const elementNodeContent = style({
-  width: '100%',
-  height: '100%',
-  display: 'flex',
-  flexDirection: 'column',
-  justifyContent: 'center',
-  alignItems: 'center',
-  overflow: 'hidden',
-  gap: 6,
-  padding: 16
-})
-
-export const elementNodeTitle = style({
-  flex: '0 0 auto',
-  width: 'fit-content',
-  textAlign: 'center',
-  fontFamily: vars.element.font,
-  fontOpticalSizing: 'auto',
-  fontStyle: 'normal',
-  fontWeight: 500,
-  fontSize: 18,
-  lineHeight: 1.25,
-  textWrap: 'balance',
-  color: vars.element.hiContrast
-})
-
-export const elementNodeDescription = style({
-  flex: '0 0 auto',
-  width: 'fit-content',
-  textAlign: 'center',
-  fontFamily: vars.element.font,
-  fontOpticalSizing: 'auto',
-  fontStyle: 'normal',
-  fontSize: mantine.fontSizes.sm,
-  lineHeight: 1.25,
-  textWrap: 'balance',
-  color: vars.element.loContrast
-})
-
-export const compoundNodeBody = style({
-  position: 'relative',
-  width: '100%',
-  height: '100%',
-  boxShadow: '0 4px 10px 0.5px rgba(0,0,0,0.1) , 1px 1px 4px -1px rgba(0,0,0,0.3)',
-  // background: `color-mix(in srgb , ${vars.element.fill},  transparent 10%)`,
-  background: vars.element.fill,
-  borderRadius: 6
-})
-
-export const compoundNodeTitle = style({
-  fontFamily: vars.compound.font,
-  fontWeight: 600,
-  fontSize: 15,
-  lineHeight: 1,
-  textTransform: 'uppercase',
-  paddingTop: 14,
-  paddingLeft: 12,
-  mixBlendMode: 'screen',
-  color: vars.compound.titleColor
-})
-
-export const cssShapeSvg = style({
-  top: 0,
-  left: 0,
-  position: 'absolute',
-  pointerEvents: 'none',
-  fill: vars.element.fill,
-  stroke: vars.element.stroke,
-  overflow: 'visible',
-  filter: `
-      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))
-    `,
-  zIndex: -1
-})
-
-const DimmedTransitionDelay = '400ms'
-
-export const edgeContainer = style({
-  opacity: 1,
-  transition: transitions.fast,
-  vars: {
-    [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) 50%)`,
-    [xyvars.edge.labelBgColor]: `color-mix(in srgb, ${vars.relation.labelBgColor}, transparent 20%)`
-  },
-  selectors: {
-    [`&[data-edge-dimmed='true']`]: {
-      opacity: 0.2,
-      transitionDelay: DimmedTransitionDelay
-    },
-    [`&[data-edge-dimmed='immediate']`]: {
-      opacity: 0.2
-    },
-    [`${whereDark} &`]: {
-      vars: {
-        [xyvars.edge.labelBgColor]: `color-mix(in srgb, ${vars.relation.labelBgColor}, transparent 50%)`
-      }
-    }
-  }
-})
-
-export const edgeLabel = style([edgeContainer, {
-  padding: '2px 5px',
-  fontFamily: vars.likec4.font,
-  position: 'absolute',
-  cursor: 'pointer',
-  width: 'fit-content',
-  color: xyvars.edge.labelColor,
-  backgroundColor: xyvars.edge.labelBgColor,
-  borderRadius: 4,
-  // everything inside EdgeLabelRenderer has no pointer events by default
-  // if you have an interactive element, set pointer-events: all
-  pointerEvents: 'all',
-  textWrap: 'pretty',
-  whiteSpace: 'preserve-breaks'
-}])
-
-export const edgeLabelText = style({
-  textAlign: 'center',
-  whiteSpaceCollapse: 'preserve-breaks',
-  fontSize: mantine.fontSizes.md,
-  lineHeight: mantine.lineHeights.xs
-})
-
-export const edgeLabelTechnology = style({
-  textAlign: 'center',
-  whiteSpaceCollapse: 'preserve-breaks',
-  fontSize: mantine.fontSizes.sm,
-  lineHeight: 1
-})
-
-export const emptyNode = style({
-  width: '100%',
-  height: '100%',
-  border: `3px dashed ${mantine.colors.defaultBorder}`,
-  borderRadius: mantine.radius.md,
-  display: 'flex',
-  justifyContent: 'center',
-  alignItems: 'center'
-})
-
-export const navigateBtnBox = style({
-  zIndex: 100,
-  position: 'absolute',
-  left: '50%',
-  bottom: 2,
-  transform: 'translate(-50%, 0%)',
-  gap: 0,
-  transition: 'all 190ms cubic-bezier(0.5, 0, 0.4, 1)',
-  selectors: {
-    [`:where([data-likec4-shape='browser']) &`]: {
-      bottom: 4
-    }
-  }
-})
-globalStyle(`:where(${elementNode}:hover) ${navigateBtnBox}`, {
-  transitionDelay: '20ms',
-  gap: 8,
-  transform: 'translate(-50%, 5px)'
-})
-
-export const navigateBtn = style({
-  opacity: 0.7,
-  pointerEvents: 'all',
-  cursor: 'pointer',
-  transform: 'scale(0.9)',
-  transition: 'all 190ms cubic-bezier(0.5, 0, 0.4, 1)',
-  'vars': {
-    '--ai-bg': `color-mix(in srgb , ${vars.element.fill},  transparent 99%)`,
-    '--ai-bg-hover': `color-mix(in srgb , ${vars.element.fill} 65%, ${vars.element.stroke})`,
-    '--ai-hover': `color-mix(in srgb , ${vars.element.fill} 50%, ${vars.element.stroke})`
-  },
-  ':hover': {
-    transitionDelay: '0ms',
-    transform: 'scale(1.25)',
-    boxShadow: mantine.shadows.lg
-  },
-  ':active': {
-    transform: 'scale(0.975)'
-  }
-})
-
-globalStyle(`:where(${elementNode}:hover) ${navigateBtn}`, {
-  transitionDelay: '40ms',
-  transitionTimingFunction: 'cubic-bezier(0, 0, 0.40, 1)',
-  opacity: 1,
-  transform: 'scale(1.07)',
-  boxShadow: mantine.shadows.md,
-  vars: {
-    '--ai-bg': `var(--ai-bg-hover)`
-  }
-})
-// globalStyle(`${elementNode}:hover ${navigateBtn}`, {
-//   opacity: 1,
-//   transform: 'scale(1.05)',
-//   boxShadow: mantine.shadows.md,
-//   vars: {
-//     '--ai-bg': `var(--ai-bg-hover)`
-//   }
-// })