@likec4/diagram 1.26.2 → 1.27.1

package/src/overlays/overlay/Overlay.tsx

@@ -1,14 +1,14 @@
+import { cx } from '@likec4/styles/css'
 import {
   Box,
   RemoveScroll,
 } from '@mantine/core'
+import { useMergedRef } from '@mantine/hooks'
 import { useDebouncedCallback, useSyncedRef, useTimeoutEffect } from '@react-hookz/web'
-import clsx from 'clsx'
-import { type HTMLMotionProps, m } from 'framer-motion'
-import { type PropsWithChildren, useLayoutEffect, useRef, useState } from 'react'
+import { type HTMLMotionProps, m, useReducedMotionConfig } from 'framer-motion'
+import { type PropsWithChildren, forwardRef, useLayoutEffect, useRef, useState } from 'react'
 import { stopPropagation } from '../../utils'
-import { getVarName } from '../../utils/css'
-import * as css from './Overlay.css'
+import * as styles from './Overlay.css'
 
 type OverlayProps = PropsWithChildren<
   HTMLMotionProps<'dialog'> & {
@@ -21,101 +21,105 @@ type OverlayProps = PropsWithChildren<
   }
 >
 
-const backdropBlur = getVarName(css.backdropBlur) as '--backdrop-blur'
-const backdropOpacity = getVarName(css.backdropOpacity) as '--backdrop-opacity'
+export const Overlay = forwardRef<HTMLDialogElement, OverlayProps>(
+  ({ children, onClose, className, classes, ...rest }, ref) => {
+    const [opened, setOpened] = useState(false)
+    const dialogRef = useRef<HTMLDialogElement>(null)
+    const isClosingRef = useRef(false)
 
-export function Overlay({ children, onClose, className, classes, ...rest }: OverlayProps) {
-  const [opened, setOpened] = useState(false)
-  const dialogRef = useRef<HTMLDialogElement>(null)
-  const isClosingRef = useRef(false)
+    const motionNotReduced = useReducedMotionConfig() !== true
 
-  // Move dialog to the top of the DOM
-  const onCloseRef = useSyncedRef(onClose)
-  const close = useDebouncedCallback(
-    () => {
-      if (isClosingRef.current) return
-      isClosingRef.current = true
-      onCloseRef.current()
-    },
-    [],
-    50,
-  )
-  // const close = useCallbackRef(() => {
-  //   if (isOpenedRef.current) {
-  //     isOpenedRef.current = false
-  //     requestAnimationFrame(() => {
-  //       onClose()
-  //     })
-  //   }
-  // })
+    const onCloseRef = useSyncedRef(onClose)
+    const close = useDebouncedCallback(
+      () => {
+        if (isClosingRef.current) return
+        isClosingRef.current = true
+        onCloseRef.current()
+      },
+      [],
+      50,
+    )
 
-  useLayoutEffect(() => {
-    const cancel = (e: Event) => {
-      e.preventDefault()
-      close()
-    }
-    dialogRef.current?.addEventListener('cancel', cancel, { capture: true })
-    return () => {
-      dialogRef.current?.removeEventListener('cancel', cancel, { capture: true })
-    }
-  }, [])
+    useLayoutEffect(() => {
+      const cancel = (e: Event) => {
+        e.preventDefault()
+        close()
+      }
+      dialogRef.current?.addEventListener('cancel', cancel, { capture: true })
+      return () => {
+        dialogRef.current?.removeEventListener('cancel', cancel, { capture: true })
+      }
+    }, [])
 
-  useTimeoutEffect(() => {
-    if (!dialogRef.current?.open) {
-      dialogRef.current?.showModal()
-    }
-    setOpened(true)
-  }, 30)
+    useTimeoutEffect(() => {
+      if (!dialogRef.current?.open) {
+        // Move dialog to the top of the DOM
+        dialogRef.current?.showModal()
+      }
+    }, 10)
 
-  return (
-    <m.dialog
-      ref={dialogRef}
-      className={clsx(css.dialog, classes?.dialog, className, RemoveScroll.classNames.fullWidth)}
-      initial={{
-        [backdropBlur]: '0px',
-        [backdropOpacity]: '5%',
-        opacity: 0.85,
-        translateY: 12,
-        // opacity: 02.8,
-      }}
-      animate={{
-        [backdropBlur]: '6px',
-        // [backdropOpacity]: '60%',
-        translateY: 0,
-        opacity: 1,
-        // transition: {
-        //   delay: 0.25,
-        // }
-      }}
-      exit={{
-        opacity: 0,
-        translateY: -10,
-        [backdropBlur]: '0px',
-        [backdropOpacity]: '0%',
-        transition: {
-          duration: 0.1,
-        },
-      }}
-      onClick={e => {
-        e.stopPropagation()
-        if ((e.target as any)?.nodeName?.toUpperCase() === 'DIALOG') {
-          dialogRef.current?.close()
-          return
-        }
-      }}
-      onDoubleClick={stopPropagation}
-      onPointerDown={stopPropagation}
-      onClose={e => {
-        e.stopPropagation()
-        close()
-      }}
-      {...rest}
-    >
-      <RemoveScroll forwardProps removeScrollBar={false}>
-        <Box className={clsx(css.body, classes?.body)}>
-          {opened && <>{children}</>}
-        </Box>
-      </RemoveScroll>
-    </m.dialog>
-  )
-}
+    useTimeoutEffect(() => {
+      setOpened(true)
+    }, 120)
+
+    return (
+      <m.dialog
+        ref={useMergedRef(dialogRef, ref)}
+        className={cx(RemoveScroll.classNames.fullWidth, styles.dialog, classes?.dialog, className)}
+        layout
+        {...motionNotReduced
+          ? ({
+            initial: {
+              [styles.backdropBlur]: '0px',
+              [styles.backdropOpacity]: '0%',
+              scale: 1.075,
+              opacity: 0,
+            },
+            animate: {
+              [styles.backdropBlur]: '8px',
+              [styles.backdropOpacity]: '60%',
+              scale: 1,
+              opacity: 1,
+              transition: {
+                delay: 0.075,
+              },
+            },
+            exit: {
+              scale: 1.3,
+              opacity: 0,
+              translateY: -10,
+              [styles.backdropBlur]: '0px',
+              [styles.backdropOpacity]: '0%',
+            },
+          })
+          : {
+            initial: {
+              [styles.backdropBlur]: '8px',
+              [styles.backdropOpacity]: '60%',
+            },
+          }}
+        onClick={e => {
+          e.stopPropagation()
+          if ((e.target as any)?.nodeName?.toUpperCase() === 'DIALOG') {
+            dialogRef.current?.close()
+            return
+          }
+        }}
+        onDoubleClick={stopPropagation}
+        onPointerDown={stopPropagation}
+        onClose={e => {
+          e.stopPropagation()
+          close()
+        }}
+        {...rest}
+      >
+        <RemoveScroll forwardProps removeScrollBar={false}>
+          <Box className={cx(styles.body, 'overlay-body', classes?.body)}>
+            {opened && <>{children}</>}
+          </Box>
+        </RemoveScroll>
+      </m.dialog>
+    )
+  },
+)
+Overlay.displayName = 'Overlay'

package/src/overlays/overlaysActor.ts

@@ -161,6 +161,7 @@ export const overlaysActorLogic = setup({
         enqueue.sendTo(currentOverlay.id, {
           type: 'navigate.to',
           subject: event.subject,
+          viewId: event.viewId,
         })
         return
       }

package/src/overlays/relationship-details/RelationshipDetails.tsx

@@ -7,10 +7,9 @@ import clsx from 'clsx'
 import { AnimatePresence, LayoutGroup, m } from 'framer-motion'
 import { memo, useEffect, useRef } from 'react'
 import { BaseXYFlow } from '../../base/BaseXYFlow'
-import type { RelationshipDetailsTypes as Types } from './_types'
+import type { RelationshipDetailsTypes, RelationshipDetailsTypes as Types } from './_types'
 import type { RelationshipDetailsActorRef, RelationshipDetailsSnapshot } from './actor'
-import { edgeTypes } from './custom/edgeTypes'
-import { nodeTypes } from './custom/nodeTypes'
+import { CompoundNode, ElementNode, RelationshipEdge } from './custom'
 import {
   RelationshipDetailsActorContext,
   useRelationshipDetails,
@@ -19,6 +18,19 @@ import {
 import { SelectEdge } from './SelectEdge'
 import { useLayoutedDetails } from './useLayoutedDetails'
 
+const nodeTypes = {
+  element: ElementNode,
+  compound: CompoundNode,
+} satisfies {
+  [key in RelationshipDetailsTypes.Node['type']]: any
+}
+
+export const edgeTypes = {
+  relationship: RelationshipEdge,
+} satisfies {
+  [key in RelationshipDetailsTypes.Edge['type']]: any
+}
+
 export type RelationshipDetailsProps = {
   actorRef: RelationshipDetailsActorRef
 }

package/src/overlays/relationship-details/SelectEdge.css.ts

@@ -1,96 +1,77 @@
-import { globalStyle, style } from '@vanilla-extract/css'
-import { mantine } from '../../theme-vars'
+import { css, cx } from '@likec4/styles/css'
 
-const edgeEnpoint = style({
+const edgeEnpoint = css.raw({
   display: 'inline-flex',
   alignItems: 'center',
   padding: '6px 2px 0 2px',
+  '& .mantine-Text-root': {
+    color: 'mantine.colors.text/90',
+    fontSize: 'xs',
+    fontWeight: 500,
+    lineHeight: '1.2',
+  },
 })
 
-globalStyle(`${edgeEnpoint} .mantine-Text-root`, {
-  fontSize: mantine.fontSizes.xs,
-  fontWeight: 500,
-  lineHeight: 1,
-})
-
-export const edgeSource = style([{
+export const edgeSource = css({
   paddingLeft: 4,
   gridColumn: 1,
-}, edgeEnpoint])
-export const edgeArrow = style([{
+}, edgeEnpoint)
+
+export const edgeArrow = css({
   gridColumn: 2,
-}, edgeEnpoint])
-export const edgeTarget = style([{
+}, edgeEnpoint)
+
+export const edgeTarget = css({
   gridColumn: 3,
   paddingRight: 4,
-}, edgeEnpoint])
+}, edgeEnpoint)
 
-export const edgeLabel = style({
-  display: 'grid',
-  gridColumnStart: 1,
-  gridColumnEnd: 4,
-  borderBottom: `1px solid ${mantine.colors.defaultBorder}`,
-  marginBottom: '0px',
-  padding: '0 4px 5px 4px',
-  width: '100%',
-  // gridArea: '2 / 1 / 3 / 3',
-  // selectors: {
-  //   '&:last-child': {
-  //     borderBottom: 'none',
-  //     marginBottom: 0
-  //   }
-  // }
-})
-
-globalStyle(`${edgeLabel} .mantine-Text-root`, {
-  fontSize: mantine.fontSizes.sm,
-  fontWeight: 400,
-  color: mantine.colors.dimmed,
-})
+const edgeLabelclass = 'likec4-edge-label'
+export const edgeLabel = cx(
+  edgeLabelclass,
+  css({
+    display: 'grid',
+    gridColumnStart: 1,
+    gridColumnEnd: 4,
+    borderBottom: `1px solid`,
+    borderBottomColor: 'mantine.colors.defaultBorder',
+    marginBottom: '0px',
+    padding: '0 4px 5px 4px',
+    width: '100%',
+    '& .mantine-Text-root': {
+      fontSize: 'xxs',
+      fontWeight: 400,
+      lineHeight: 'xs',
+      color: 'mantine.colors.dimmed',
+    },
+  }),
+)
 
-export const edgeRow = style({
+export const edgeRow = css({
   display: 'contents',
+  [`&:last-child .${edgeLabelclass}`]: {
+    borderBottom: 'none',
+    marginBottom: 0,
+  },
+  '& > *': {
+    transition: 'all 0.15s ease-in',
+  },
+  '&:is(:hover, [data-selected=true]) > *': {
+    transition: 'all 0.15s ease-out',
+    cursor: 'pointer',
+    backgroundColor: 'mantine.colors.defaultHover',
+  },
 })
 
-globalStyle(`${edgeRow}:last-child ${edgeLabel}`, {
-  borderBottom: 'none',
-  marginBottom: 0,
-})
-
-globalStyle(`${edgeRow} > *`, {
-  transition: 'all 0.15s ease-in',
-})
-
-globalStyle(`${edgeRow}:is(:hover, [data-selected=true]) > *`, {
-  transition: 'all 0.15s ease-out',
-  cursor: 'pointer',
-  backgroundColor: mantine.colors.defaultHover,
-})
-
-export const edgeGrid = style({
+export const edgeGrid = css({
   display: 'grid',
   gridTemplateColumns: '1fr 30px 1fr',
   gridAutoRows: 'min-content max-content',
   gap: 0,
   alignItems: 'stretch',
-  // gridTemplateColumns: 'auto',
-  // gridTemplateRows: `
-  //   [row1-start] "source target" auto [row1-end]
-  //   [row2-start] "label label" 50px [row2-end]
-  // `,
-  // gridTemplateAreas: `
-  //   "source target"
-  //   "label label"
-  // `
-
-  // gridTemplateRows: `
-  //   repeat(auto-fill, [row1-start] "source target" 20px [row1-end]
-  //                     [row2-start] "label" . 20px [row2-end])
-  // `,
-  // gridAutoFlow: 'row',
 })
 
-export const edgeDataGrid = style({
+export const edgeDataGrid = css({
   display: 'grid',
   gridTemplateColumns: 'min-content 1fr',
   gridAutoRows: 'min-content max-content',
@@ -99,7 +80,7 @@ export const edgeDataGrid = style({
   justifyItems: 'start',
 })
 
-export const scrollArea = style({
+export const scrollArea = css({
   maxHeight: [
     '70vh',
     'calc(100cqh - 70px)',

package/src/overlays/relationship-details/SelectEdge.tsx

@@ -73,8 +73,7 @@ export const SelectEdge = ({
       <PopoverTarget>
         <Button
           size="xs"
-          variant="light"
-          color={theme === 'light' ? 'dark' : 'gray'}
+          variant="default"
           fw={'500'}
           style={{ padding: '0.25rem 0.75rem' }}
           rightSection={<IconSelector size={16} />}

package/src/overlays/relationship-details/custom/edgeTypes.tsx

@@ -1,32 +1,39 @@
 import { getBezierPath } from '@xyflow/system'
-import { customEdge, EdgeActionButton, EdgeContainer, EdgeLabel, EdgePath } from '../../../base/primitives'
+import {
+  customEdge,
+  EdgeActionButton,
+  EdgeContainer,
+  EdgeLabel,
+  EdgeLabelContainer,
+  EdgePath,
+} from '../../../base/primitives'
 import { useEnabledFeature } from '../../../context'
 import { useDiagram } from '../../../hooks/useDiagram'
 import type { RelationshipDetailsTypes } from '../_types'
 
-export const edgeTypes = {
-  relationship: customEdge<RelationshipDetailsTypes.EdgeData>((props) => {
-    const { enableNavigateTo } = useEnabledFeature('NavigateTo')
-    const {
-      sourceX,
-      targetY,
-      data: { navigateTo },
-    } = props
-    const [svgPath, labelX, labelY] = getBezierPath(props)
-    const diagram = useDiagram()
-    return (
-      <EdgeContainer {...props}>
-        <EdgePath {...props} svgPath={svgPath} />
-        <EdgeLabel
-          edgeProps={props}
-          labelPosition={{
-            x: labelX,
-            y: labelY,
-            translate: 'translate(-50%, 0)',
-          }}
-          style={{
-            maxWidth: Math.abs(props.targetX - props.sourceX - 70),
-          }}>
+export const RelationshipEdge = customEdge<RelationshipDetailsTypes.EdgeData>((props) => {
+  const { enableNavigateTo } = useEnabledFeature('NavigateTo')
+  const {
+    sourceX,
+    targetY,
+    data: { navigateTo },
+  } = props
+  const [svgPath, labelX, labelY] = getBezierPath(props)
+  const diagram = useDiagram()
+  return (
+    <EdgeContainer {...props}>
+      <EdgePath {...props} svgPath={svgPath} />
+      <EdgeLabelContainer
+        edgeProps={props}
+        labelPosition={{
+          x: labelX,
+          y: labelY,
+          translate: 'translate(-50%, 0)',
+        }}
+        style={{
+          maxWidth: Math.abs(props.targetX - props.sourceX - 70),
+        }}>
+        <EdgeLabel edgeProps={props}>
           {enableNavigateTo && navigateTo && (
             <EdgeActionButton
               {...props}
@@ -36,9 +43,7 @@ export const edgeTypes = {
               }} />
           )}
         </EdgeLabel>
-      </EdgeContainer>
-    )
-  }),
-} satisfies {
-  [key in RelationshipDetailsTypes.Edge['type']]: any
-}
+      </EdgeLabelContainer>
+    </EdgeContainer>
+  )
+})

package/src/overlays/relationship-details/custom/index.ts

@@ -0,0 +1,2 @@
+export { RelationshipEdge } from './edgeTypes'
+export { CompoundNode, ElementNode } from './nodeTypes'

package/src/overlays/relationship-details/custom/nodeTypes.tsx

@@ -29,31 +29,27 @@ const ElementDetailsButtonWithHandler = (props: NodeProps<RelationshipDetailsTyp
   )
 }
 
-export const nodeTypes = {
-  element: customNode<RelationshipDetailsTypes.ElementNodeData>((props) => {
-    return (
-      <ElementNodeContainer nodeProps={props}>
-        <ElementShape {...props} />
-        <ElementTitle {...props} iconSize={40} />
-        <ElementDetailsButtonWithHandler {...props} />
-        <ElementActions {...props} />
-        <ElementPorts {...props} />
-      </ElementNodeContainer>
-    )
-  }),
+export const ElementNode = customNode<RelationshipDetailsTypes.ElementNodeData>((props) => {
+  return (
+    <ElementNodeContainer nodeProps={props}>
+      <ElementShape {...props} />
+      <ElementTitle {...props} iconSize={40} />
+      <ElementDetailsButtonWithHandler {...props} />
+      <ElementActions {...props} />
+      <ElementPorts {...props} />
+    </ElementNodeContainer>
+  )
+})
 
-  compound: customNode<RelationshipDetailsTypes.CompoundNodeData>((props) => {
-    return (
-      <CompoundNodeContainer nodeProps={props}>
-        <ElementDetailsButtonWithHandler {...props} />
-        <CompoundTitle {...props} />
-        <CompoundPorts {...props} />
-      </CompoundNodeContainer>
-    )
-  }),
-} satisfies {
-  [key in RelationshipDetailsTypes.Node['type']]: any
-}
+export const CompoundNode = customNode<RelationshipDetailsTypes.CompoundNodeData>((props) => {
+  return (
+    <CompoundNodeContainer nodeProps={props}>
+      <ElementDetailsButtonWithHandler {...props} />
+      <CompoundTitle {...props} />
+      <CompoundPorts {...props} />
+    </CompoundNodeContainer>
+  )
+})
 
 type ElementPortsProps = NodeProps<
   Pick<

package/src/overlays/relationship-details/custom/styles.css.ts

@@ -1,12 +1,12 @@
-import { rem } from '@mantine/core'
-import { globalStyle, style } from '@vanilla-extract/css'
-import { mantine, transitions, vars, whereDark, xyvars } from '../../../theme-vars'
+import { css } from '@likec4/styles/css'
 
-export const emptyNode = style({
-  width: '100%',
-  height: '100%',
-  border: `3px dashed ${mantine.colors.defaultBorder}`,
-  borderRadius: mantine.radius.md,
+export const emptyNode = css({
+  w: '100%',
+  h: '100%',
+  borderWidth: '3px',
+  borderStyle: 'dashed',
+  borderColor: 'mantine.colors.defaultBorder',
+  rounded: 'md',
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',

package/src/overlays/relationship-details/useLayoutedDetails.ts

@@ -102,7 +102,7 @@ function nodeData(
   // Ansector separetely, because we want to inherit
   // color from it if there is no diagram node
   const ancestor = diagramNode ?? pipe(
-    element.ancestors().toArray(),
+    [...element.ancestors()],
     map(ancestor => ctx.diagramNodes.get(ancestor.id)),
     filter(isTruthy),
     first(),