@likec4/diagram 1.19.2 → 1.20.1

package/src/overlays/edge-details/xyflow/RelationshipEdge.tsx

@@ -1,85 +0,0 @@
-import { ActionIcon, Box, Stack, Text } from '@mantine/core'
-import { IconZoomScan } from '@tabler/icons-react'
-import { BaseEdge, EdgeLabelRenderer, type EdgeProps, getBezierPath } from '@xyflow/react'
-import clsx from 'clsx'
-import { useDiagramState } from '../../../hooks/useDiagramState'
-import { stopPropagation } from '../../../xyflow/utils'
-import { useOverlayDialog } from '../../OverlayContext'
-import * as css from '../../shared/xyflow/RelationshipEdge.css'
-import type { EdgeDetailsFlowTypes } from '../_types'
-import { ZIndexes } from '../use-layouted-edge-details'
-
-export function RelationshipEdge({
-  data,
-  label,
-  ...props
-}: EdgeProps<EdgeDetailsFlowTypes.Edge>) {
-  const overlay = useOverlayDialog()
-  const onNavigateTo = useDiagramState(s => s.onNavigateTo)
-  const [edgePath, labelX, labelY] = getBezierPath(props)
-  const navigateTo = data.navigateTo
-  return (
-    <>
-      <g
-        className={css.edgeContainer}
-        data-edge-dimmed={data.dimmed}
-        data-edge-hovered={data.hovered}
-      >
-        <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 - 40),
-            zIndex: ZIndexes.max
-          }}
-          className={clsx([
-            css.edgeLabel,
-            'nodrag nopan'
-          ])}
-          data-edge-dimmed={data.dimmed}
-          data-edge-hovered={data.hovered}
-        >
-          {label && (
-            <Text component={'div'} className={css.edgeLabelText} lineClamp={3}>
-              {label}
-            </Text>
-          )}
-          {data.technology && (
-            <Text component={'div'} className={css.edgeLabelTechnology}>
-              {'[ '}
-              {data.technology}
-              {' ]'}
-            </Text>
-          )}
-          {navigateTo && onNavigateTo && (
-            <Box ta={'center'} mt={4}>
-              <ActionIcon
-                variant="default"
-                size={'sm'}
-                radius="sm"
-                onPointerDownCapture={stopPropagation}
-                onClick={event => {
-                  event.stopPropagation()
-                  overlay.close(() => {
-                    onNavigateTo(navigateTo)
-                  })
-                }}
-                role="button"
-                onDoubleClick={stopPropagation}
-              >
-                <IconZoomScan />
-              </ActionIcon>
-            </Box>
-          )}
-        </Stack>
-      </EdgeLabelRenderer>
-    </>
-  )
-}

package/src/overlays/edge-details/xyflow/styles.css.ts

@@ -1,144 +0,0 @@
-import { globalStyle, style } from '@vanilla-extract/css'
-import { mantine, vars } from '../../../theme-vars'
-
-export const elementNode = style({
-  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: 17,
-  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.xs,
-  lineHeight: 1.25,
-  textWrap: 'balance',
-  color: vars.element.loContrast
-})
-
-export const compoundNodeBody = style({
-  width: '100%',
-  height: '100%',
-  boxShadow: '0 4px 10px 0.5px rgba(0,0,0,0.1) , 0 2px 2px -1px rgba(0,0,0,0.4)',
-  background: `color-mix(in srgb , ${vars.element.fill},  transparent 10%)`,
-  borderRadius: 4
-})
-
-export const compoundNodeTitle = style({
-  fontFamily: vars.compound.font,
-  fontOpticalSizing: 'auto',
-  fontStyle: 'normal',
-  fontWeight: 600,
-  fontSize: 14,
-  lineHeight: 1,
-  textTransform: 'uppercase',
-  paddingTop: 12,
-  paddingLeft: 10,
-  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
-})
-
-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'],[data-likec4-shape='mobile']) &`]: {
-      bottom: 6
-    }
-  }
-})
-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)`
-//   }
-// })

package/src/overlays/index.tsx

@@ -1 +0,0 @@
-export { Overlays } from './Overlays'

package/src/overlays/relationships-of/RelationshipsOverlay.tsx

@@ -1,185 +0,0 @@
-import { type Fqn } from '@likec4/core'
-import { Box, Button, Group, SegmentedControl, Space, Text } from '@mantine/core'
-import { useLocalStorage, useStateHistory } from '@mantine/hooks'
-import { IconArrowLeft, IconArrowRight } from '@tabler/icons-react'
-import { Panel } from '@xyflow/react'
-import { memo, useEffect } from 'react'
-import { useDiagramState } from '../../hooks/useDiagramState'
-import { useOverlayDialog } from '../OverlayContext'
-import { RelationshipsXYFlow } from './RelationshipsXYFlow'
-import { SelectElement } from './SelectElement'
-import { useLayoutedRelationships } from './use-layouted-relationships'
-
-export const RelationshipsOverlay = memo<{ subjectId: Fqn }>(function RelationshipsOverlay({ subjectId }) {
-  const view = useDiagramState(s => s.view)
-  const [_scope, setScope] = useLocalStorage<'global' | 'view'>({
-    key: 'likec4:scope-relationships-of',
-    getInitialValueInEffect: false,
-    defaultValue: 'view'
-  })
-  const {
-    notIncludedRelations,
-    viewIncludesSubject,
-    edges,
-    nodes,
-    subject,
-    bounds
-  } = useLayoutedRelationships(subjectId, view, _scope)
-  const scope = viewIncludesSubject ? _scope : 'global'
-  const showSubjectWarning = !viewIncludesSubject && _scope === 'view'
-  const [historySubjectId, historyOps, { history, current }] = useStateHistory(subjectId)
-
-  const overlay = useOverlayDialog()
-
-  useEffect(() => {
-    if (historySubjectId !== subjectId) {
-      historyOps.set(subjectId)
-    }
-  }, [subjectId])
-
-  useEffect(() => {
-    if (historySubjectId !== subjectId) {
-      overlay.openOverlay({
-        relationshipsOf: historySubjectId
-      })
-    }
-  }, [historySubjectId])
-
-  return (
-    <RelationshipsXYFlow
-      nodes={nodes}
-      edges={edges}
-      bounds={bounds}
-      view={view}
-      subjectId={subjectId}
-      viewportPadding={0.2}
-      onNodeClick={(e, node) => {
-        e.stopPropagation()
-        if (node.type === 'empty') return
-        // lastClickedNodeRef.current = node
-        overlay.openOverlay({
-          relationshipsOf: node.data.fqn
-        })
-      }}
-    >
-      <Panel position="top-center">
-        <Group gap={'xs'} wrap={'nowrap'}>
-          <Button
-            leftSection={<IconArrowLeft stroke={3} size={14} />}
-            color="dimmed"
-            variant="subtle"
-            style={{
-              visibility: current > 0 ? 'visible' : 'hidden',
-              padding: '0.25rem 0.75rem'
-            }}
-            styles={{
-              label: {
-                fontWeight: 400
-              },
-              section: {
-                marginInlineEnd: 6
-              }
-            }}
-            size="sm"
-            onClick={(e) => {
-              e.stopPropagation()
-              historyOps.back()
-            }}>
-            Back
-          </Button>
-          <Space w={2} />
-          <Group gap={'xs'} pos={'relative'} wrap="nowrap" flex={'1 0 auto'}>
-            <Box fz={'sm'} fw={'400'} style={{ whiteSpace: 'nowrap', userSelect: 'none' }}>Relationships of</Box>
-            <Box flex={'1 0 auto'}>
-              <SelectElement
-                scope={scope}
-                subject={subject.$element}
-                onSelect={fqn =>
-                  overlay.openOverlay({
-                    relationshipsOf: fqn
-                  })}
-                viewId={view.id} />
-            </Box>
-            <SegmentedControl
-              flex={'1 0 auto'}
-              size="xs"
-              withItemsBorders={false}
-              value={scope}
-              onChange={setScope as any}
-              data={[
-                { label: 'Global', value: 'global' },
-                { label: 'Current view', value: 'view', disabled: !viewIncludesSubject }
-              ]}
-            />
-            {showSubjectWarning && (
-              <Box
-                pos={'absolute'}
-                top={'calc(100% + .5rem)'}
-                left={'50%'}
-                w={'max-content'}
-                style={{
-                  transform: 'translateX(-50%)',
-                  textAlign: 'center',
-                  cursor: 'pointer'
-                }}
-                onClick={(e) => {
-                  e.stopPropagation()
-                  setScope('global')
-                }}
-              >
-                <Text fw={500} size="xs" c="orange" component="div">
-                  Current view doesn't include this element, switched to Global
-                </Text>
-              </Box>
-            )}
-            {viewIncludesSubject && scope === 'view' && notIncludedRelations > 0 && (
-              <Box
-                pos={'absolute'}
-                top={'calc(100% + .5rem)'}
-                left={'50%'}
-                w={'max-content'}
-                style={{
-                  transform: 'translateX(-50%)',
-                  textAlign: 'center',
-                  cursor: 'pointer'
-                }}
-                onClick={(e) => {
-                  e.stopPropagation()
-                  setScope('global')
-                }}
-              >
-                <Text fw={500} size="xs" c="orange" component="div">
-                  View does not include {notIncludedRelations}{' '}
-                  relationship{notIncludedRelations > 1 ? 's' : ''}. Switch to Global to compare
-                </Text>
-              </Box>
-            )}
-          </Group>
-          <Button
-            rightSection={<IconArrowRight stroke={3} size={14} />}
-            color="dimmed"
-            variant="subtle"
-            style={{
-              visibility: current + 1 < history.length ? 'visible' : 'hidden',
-              padding: '0.25rem 0.75rem'
-            }}
-            styles={{
-              label: {
-                fontWeight: 400
-              },
-              section: {
-                marginInlineStart: 4
-              }
-            }}
-            size="sm"
-            onClick={(e) => {
-              e.stopPropagation()
-              historyOps.forward()
-            }}>
-            Forward
-          </Button>
-        </Group>
-      </Panel>
-    </RelationshipsXYFlow>
-  )
-})