@likec4/diagram 1.13.0 → 1.15.0

package/src/components/Overlay.tsx

@@ -1,102 +0,0 @@
-import { ActionIcon, Box } from '@mantine/core'
-import { useMergedRef, useTimeout } from '@mantine/hooks'
-import { useDebouncedEffect, useSyncedRef } from '@react-hookz/web'
-import { IconX } from '@tabler/icons-react'
-import clsx from 'clsx'
-import { forwardRef, type HTMLAttributes, type ReactNode, useMemo, useRef, useState } from 'react'
-import { useDiagramStoreApi } from '../hooks/useDiagramState'
-import * as css from './Overlay.css'
-import { OverlayContext, useOverlayDialog } from './OverlayContext'
-
-type OverlayDialogProps = Pick<HTMLAttributes<HTMLDialogElement>, 'style' | 'className'> & {
-  onClose?: (() => void) | undefined
-  children: (renderProps: {
-    opened: boolean
-    close: () => void
-  }) => ReactNode
-}
-
-export const OverlayDialog = forwardRef<HTMLDialogElement, OverlayDialogProps>(({
-  className,
-  children,
-  onClose,
-  ...props
-}, forwardedRef) => {
-  const onCloseRef = useSyncedRef(onClose)
-  const api = useDiagramStoreApi()
-  const [opened, setOpened] = useState(false)
-  const dialogRef = useRef<HTMLDialogElement>(null)
-  const ref = useMergedRef(dialogRef, forwardedRef)
-
-  useDebouncedEffect(
-    () => {
-      dialogRef.current?.showModal()
-    },
-    [],
-    30
-  )
-
-  useDebouncedEffect(
-    () => {
-      setOpened(true)
-    },
-    [],
-    80
-  )
-
-  const { start: triggerOnClose } = useTimeout(() => {
-    onCloseRef.current?.()
-  }, 300)
-
-  const ctxValue = useMemo(() => ({
-    openOverlay: api.getState().openOverlay,
-    close: () => {
-      dialogRef.current?.close()
-    }
-  }), [api])
-
-  return (
-    <OverlayContext.Provider value={ctxValue}>
-      <dialog
-        aria-modal="true"
-        ref={ref}
-        className={clsx(css.dialog, className)}
-        onClick={e => {
-          if ((e.target as any)?.nodeName?.toUpperCase() === 'DIALOG') {
-            e.stopPropagation()
-            dialogRef.current?.close()
-          }
-        }}
-        onClose={e => {
-          e.stopPropagation()
-          triggerOnClose()
-        }}
-        {...props}
-      >
-        {children({
-          opened,
-          ...ctxValue
-        })}
-      </dialog>
-    </OverlayContext.Provider>
-  )
-})
-
-export const OverlayDialogCloseButton = () => {
-  const { close } = useOverlayDialog()
-  return (
-    <Box pos={'absolute'} top={'1rem'} right={'1rem'}>
-      <ActionIcon
-        variant="default"
-        // color="gray"
-        size={'lg'}
-        autoFocus
-        onClick={(e) => {
-          e.stopPropagation()
-          close()
-        }}>
-        <IconX />
-      </ActionIcon>
-    </Box>
-  )
-}

package/src/components/index.ts

@@ -1,2 +0,0 @@
-export { OverlayDialog, OverlayDialogCloseButton } from './Overlay'
-export { useOverlayDialog } from './OverlayContext'

package/src/overlays/edge-details/EdgeDetailsOverlay.css.ts

@@ -1,13 +0,0 @@
-import { style } from '@vanilla-extract/css'
-
-//
-export const dependencyViewContainer = style({
-  width: '100%',
-  height: '100%'
-  // position: 'absolute',
-  // top: 20,
-  // left: 20,
-  // width: 'calc(100% - 40px)',
-  // height: 'calc(100% - 40px)',
-  // overflow: 'hidden',
-})

package/src/overlays/edge-details/EdgeDetailsOverlay.tsx

@@ -1,37 +0,0 @@
-import { type EdgeId, invariant } from '@likec4/core'
-import { ActionIcon, Code, Paper } from '@mantine/core'
-import { IconX } from '@tabler/icons-react'
-import { OverlayDialog } from '../../components'
-import { useDiagramState, useDiagramStoreApi } from '../../hooks'
-import * as css from './EdgeDetailsOverlay.css'
-
-export function EdgeDetailsOverlay({ edgeId }: { edgeId: EdgeId }) {
-  const diagramApi = useDiagramStoreApi()
-  const edge = useDiagramState(s => s.xyedges.find(e => e.id === edgeId))
-  invariant(edge, `Edge with id ${edgeId} not found`)
-  return (
-    <OverlayDialog
-      onClose={() => {
-        diagramApi.getState().closeOverlay()
-      }}
-      data-likec4-color="gray"
-    >
-      {({ close }) => (
-        <Paper className={css.dependencyViewContainer}>
-          <div>edge</div>
-          <Code block>{JSON.stringify(edge, null, 2)}</Code>
-          <ActionIcon
-            variant="default"
-            color="gray"
-            autoFocus
-            onClick={(e) => {
-              e.stopPropagation()
-              close()
-            }}>
-            <IconX />
-          </ActionIcon>
-        </Paper>
-      )}
-    </OverlayDialog>
-  )
-}

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

@@ -1,33 +0,0 @@
-import { ReactFlowProvider as XYFlowProvider } from '@xyflow/react'
-import { memo } from 'react'
-import { OverlayDialog, OverlayDialogCloseButton } from '../../components'
-import { useDiagramStoreApi } from '../../hooks'
-import { RelationshipsXYFlow } from './RelationshipsXYFlow'
-import * as css from './styles.css'
-
-export const RelationshipsOfOverlay = memo(() => {
-  const diagramApi = useDiagramStoreApi()
-
-  return (
-    <OverlayDialog
-      className={css.overlay}
-      onClose={() => {
-        diagramApi.getState().closeOverlay()
-      }}
-      data-likec4-color="gray"
-    >
-      {({ opened }) => (
-        <>
-          {opened && (
-            <XYFlowProvider
-              defaultNodes={[]}
-              defaultEdges={[]}>
-              <RelationshipsXYFlow />
-            </XYFlowProvider>
-          )}
-          <OverlayDialogCloseButton />
-        </>
-      )}
-    </OverlayDialog>
-  )
-})

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

@@ -1,34 +0,0 @@
-import { createVar, globalStyle, style } from '@vanilla-extract/css'
-import { vars, xyvars } from '../../theme-vars'
-
-const mixColor = createVar('mix-color')
-
-export const root = 'likec4-relationships-xyflow'
-
-export const overlay = style({
-  vars: {
-    [mixColor]: `black`,
-    [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 30%)`
-  }
-})
-
-globalStyle(`:where([data-mantine-color-scheme="dark"]) ${overlay}`, {
-  vars: {
-    [mixColor]: `white`,
-    [xyvars.edge.labelColor]: vars.relation.labelColor,
-    [xyvars.edge.labelBgColor]: `color-mix(in srgb, ${vars.relation.labelBgColor}, transparent 50%)`
-  }
-})
-
-globalStyle(`:where(${overlay}) .react-flow__attribution`, {
-  display: 'none'
-})
-globalStyle(`:where(${overlay}) .react-flow__edge-text`, {
-  fontSize: 14
-})
-globalStyle(`:where(${overlay}) .react-flow__node-compound`, {
-  mixBlendMode: 'hard-light'
-})