@likec4/diagram 1.27.3 → 1.28.1

package/src/overlays/overlay/Overlay.css.ts

@@ -61,22 +61,6 @@ const dialog = css.raw({
   xl: {
     [offset]: '4rem',
   },
-  //     inset: '[calc(2rem + var(--_level, 0) * 1rem), 2rem, 2rem, 2rem]',
-  //     width: 'calc(100vw - 4rem)',
-  //     height: 'calc(100vh - 4rem - var(--_level, 0) * 1rem)',
-  //   },
-  //   lg: {
-  //     inset: '[calc(4rem + var(--_level, 0) * 1rem), 4rem, 4rem, 4rem]',
-  //     width: 'calc(100vw - 8rem)',
-  //     height: 'calc(100vh - 8rem)',
-  //   },
-  //   xl: {
-  //     [borderRadius]: '8px',
-  //     padding: '8px',
-  //     inset: '[calc(5rem + var(--_level, 0) * 1rem), 5rem, 5rem, 5rem]',
-  //     width: 'calc(100vw - 10rem)',
-  //     height: 'calc(100vh - 10rem - var(--_level, 0) * 1rem)',
-  //   },
 })
 
 const body = css.raw({
@@ -99,28 +83,4 @@ export const overlay = sva({
     dialog: dialog,
     body: body,
   },
-  variants: {
-    level: {
-      0: {
-        dialog: {
-          [level]: '0',
-        },
-      },
-      1: {
-        dialog: {
-          [level]: '1',
-        },
-      },
-      2: {
-        dialog: {
-          [level]: '2',
-        },
-      },
-      3: {
-        dialog: {
-          [level]: '3',
-        },
-      },
-    },
-  },
 })

package/src/overlays/overlay/Overlay.tsx

@@ -5,13 +5,13 @@ import {
 } from '@mantine/core'
 import { useMergedRef } from '@mantine/hooks'
 import { useDebouncedCallback, useSyncedRef, useTimeoutEffect } from '@react-hookz/web'
-import { m, useReducedMotionConfig } from 'framer-motion'
-import { type PropsWithChildren, forwardRef, useLayoutEffect, useRef, useState } from 'react'
+import { m, useReducedMotionConfig } from 'motion/react'
+import { type PropsWithChildren, forwardRef, useEffect, useRef, useState } from 'react'
 import { stopPropagation } from '../../utils'
-import { backdropBlur, backdropOpacity, overlay as overlayCVA } from './Overlay.css'
+import { backdropBlur, backdropOpacity, level as cssVarLevel, overlay as overlayCVA } from './Overlay.css'
 
 type OverlayProps = PropsWithChildren<{
-  overlayLevel?: 0 | 1 | 2 | 3
+  overlayLevel?: number
   className?: string
   classes?: {
     dialog?: string
@@ -21,108 +21,118 @@ type OverlayProps = PropsWithChildren<{
   onClick?: never
 }>
 
-export const Overlay = forwardRef<HTMLDialogElement, OverlayProps>(
-  ({ children, onClose, className, classes, overlayLevel = 0, ...rest }, ref) => {
-    const [opened, setOpened] = useState(false)
-    const dialogRef = useRef<HTMLDialogElement>(null)
-    const isClosingRef = useRef(false)
+export const Overlay = forwardRef<HTMLDialogElement, OverlayProps>(({
+  onClose,
+  className,
+  classes,
+  overlayLevel = 0,
+  children,
+  ...rest
+}, ref) => {
+  const [opened, setOpened] = useState(false)
+  const dialogRef = useRef<HTMLDialogElement>(null)
+  const isClosingRef = useRef(false)
 
-    const motionNotReduced = useReducedMotionConfig() !== true
+  const motionNotReduced = useReducedMotionConfig() !== true
 
-    const onCloseRef = useSyncedRef(onClose)
-    const close = useDebouncedCallback(
-      () => {
-        if (isClosingRef.current) return
-        isClosingRef.current = true
-        onCloseRef.current()
-      },
-      [],
-      50,
-    )
+  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 })
-      }
-    }, [])
+  useEffect(() => {
+    const cancel = (e: Event) => {
+      e.preventDefault()
+      e.stopPropagation()
+      close()
+    }
+    dialogRef.current?.addEventListener('cancel', cancel, { capture: true })
+    return () => {
+      dialogRef.current?.removeEventListener('cancel', cancel, { capture: true })
+    }
+  }, [])
 
-    useTimeoutEffect(() => {
-      if (!dialogRef.current?.open) {
-        // Move dialog to the top of the DOM
-        dialogRef.current?.showModal()
-      }
-    }, 20)
+  useTimeoutEffect(() => {
+    if (!dialogRef.current?.open) {
+      // Move dialog to the top of the DOM
+      dialogRef.current?.showModal()
+    }
+  }, 30)
 
-    useTimeoutEffect(() => {
-      setOpened(true)
-    }, 120)
+  useTimeoutEffect(() => {
+    setOpened(true)
+  }, 120)
 
-    const styles = overlayCVA({
-      level: overlayLevel as 0 | 1 | 2 | 3,
-    })
+  const styles = overlayCVA({
+    level: overlayLevel as 0 | 1 | 2 | 3,
+  })
 
-    return (
-      <m.dialog
-        ref={useMergedRef(dialogRef, ref)}
-        className={cx(RemoveScroll.classNames.fullWidth, styles.dialog, classes?.dialog, className)}
-        layout
-        {...motionNotReduced
-          ? ({
-            initial: {
-              [backdropBlur]: '0px',
-              [backdropOpacity]: '0%',
-              scale: overlayLevel > 0 ? 0.9 : 1.075,
-              opacity: 0,
-            },
-            animate: {
-              [backdropBlur]: overlayLevel > 0 ? '4px' : '8px',
-              [backdropOpacity]: overlayLevel > 0 ? '50%' : '60%',
-              scale: 1,
-              opacity: 1,
-              transition: {
-                delay: 0.075,
-              },
-            },
-            exit: {
-              scale: 1.2,
-              opacity: 0,
-              [backdropBlur]: '0px',
-              [backdropOpacity]: '0%',
+  return (
+    <m.dialog
+      ref={useMergedRef(dialogRef, ref)}
+      className={cx(RemoveScroll.classNames.fullWidth, styles.dialog, classes?.dialog, className)}
+      layout
+      style={{
+        // @ts-ignore
+        [cssVarLevel]: overlayLevel,
+      }}
+      {...motionNotReduced
+        ? ({
+          initial: {
+            [backdropBlur]: '0px',
+            [backdropOpacity]: '0%',
+            scale: overlayLevel > 0 ? 0.9 : 1.075,
+            opacity: 0,
+          },
+          animate: {
+            [backdropBlur]: overlayLevel > 0 ? '4px' : '8px',
+            [backdropOpacity]: overlayLevel > 0 ? '50%' : '60%',
+            scale: 1,
+            opacity: 1,
+            transition: {
+              delay: 0.075,
             },
-          })
-          : {
-            initial: {
-              [backdropBlur]: '8px',
-              [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()
+          },
+          exit: {
+            scale: 1.2,
+            opacity: 0,
+            [backdropBlur]: '0px',
+            [backdropOpacity]: '0%',
+          },
+        })
+        : {
+          initial: {
+            [backdropBlur]: '8px',
+            [backdropOpacity]: '60%',
+          },
         }}
-        {...rest}
-      >
-        <RemoveScroll forwardProps removeScrollBar={false}>
-          <Box className={cx(styles.body, 'overlay-body', classes?.body)}>
-            {opened && <>{children}</>}
-          </Box>
-        </RemoveScroll>
-      </m.dialog>
-    )
-  },
-)
+      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

@@ -1,5 +1,6 @@
 import type { Fqn } from '@likec4/core'
 import { getHotkeyHandler } from '@mantine/hooks'
+import type { KeyboardEvent } from 'react'
 import { isString, last, reverse } from 'remeda'
 import {
   type ActorLogicFrom,
@@ -45,7 +46,10 @@ const hotkeyLogic = fromCallback(({ sendBack }: {
   sendBack: (event: HotKeyEvent) => void
 }) => {
   const handler = getHotkeyHandler([
-    ['Escape', () => sendBack({ type: 'close' }), {
+    ['Escape', (event: KeyboardEvent) => {
+      event.stopPropagation()
+      sendBack({ type: 'close' })
+    }, {
       preventDefault: true,
     }],
   ])

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

@@ -1,4 +1,4 @@
-import { type DiagramEdge, type DiagramView, ifind, invariant, isAncestor, nonNullable } from '@likec4/core'
+import { type DiagramEdge, type DiagramView, invariant, isAncestor, nonNullable } from '@likec4/core'
 import { ActionIcon, Group } from '@mantine/core'
 import { useCallbackRef, useStateHistory } from '@mantine/hooks'
 import { IconChevronLeft, IconChevronRight, IconX } from '@tabler/icons-react'
@@ -6,9 +6,9 @@ import { useSelector } from '@xstate/react'
 import { Panel, ReactFlowProvider, useReactFlow, useStoreApi } from '@xyflow/react'
 import clsx from 'clsx'
 import { deepEqual } from 'fast-equals'
-import { AnimatePresence, LayoutGroup, m } from 'framer-motion'
+import { AnimatePresence, LayoutGroup, m } from 'motion/react'
 import { memo, useEffect, useMemo, useRef } from 'react'
-import { first } from 'remeda'
+import { find, isTruthy } from 'remeda'
 import { BaseXYFlow } from '../../base/BaseXYFlow'
 import { useLikeC4Model } from '../../likec4model/useLikeC4Model'
 import type { RelationshipDetailsTypes, RelationshipDetailsTypes as Types } from './_types'
@@ -66,10 +66,10 @@ export function RelationshipDetails({ actorRef }: RelationshipDetailsProps) {
       <ReactFlowProvider {...initialRef.current}>
         <LayoutGroup id={actorRef.sessionId} inherit={false}>
           <AnimatePresence>
-            <RelationshipDetailsInner />
+            <RelationshipDetailsInner key="xyflow" />
+            <SyncRelationshipDetailsXYFlow key="sync" />
           </AnimatePresence>
         </LayoutGroup>
-        <SyncRelationshipDetailsXYFlow />
       </ReactFlowProvider>
     </RelationshipDetailsActorContext.Provider>
   )
@@ -80,22 +80,24 @@ const selectSubject = (state: RelationshipDetailsSnapshot) => ({
   viewId: state.context.viewId,
 })
 
-function SyncRelationshipDetailsXYFlow() {
+const SyncRelationshipDetailsXYFlow = memo(() => {
   const actor = useRelationshipDetailsActor()
   const subject = useSelector(actor, selectSubject, deepEqual)
   const likec4model = useLikeC4Model(true)
   const view = likec4model.findView(subject.viewId) ?? null
   const data = useMemo(() => {
     let data: RelationshipDetailsViewData
-    if ('edgeId' in subject) {
+    if ('edgeId' in subject && isTruthy(subject.edgeId)) {
       invariant(view, `view ${subject.viewId} not found`)
       const edge = nonNullable(view.findEdge(subject.edgeId), `edge ${subject.edgeId} not found in ${subject.viewId}`)
       data = computeEdgeDetailsViewData([edge.id], view)
-    } else {
+    } else if (!!subject.source && !!subject.target) {
       data = computeRelationshipDetailsViewData({
         source: likec4model.element(subject.source),
         target: likec4model.element(subject.target),
       })
+    } else {
+      return null
     }
     return layoutRelationshipDetails(data, view)
   }, [
@@ -114,11 +116,13 @@ function SyncRelationshipDetailsXYFlow() {
   }, [store, instance.viewportInitialized, actor])
 
   useEffect(() => {
-    actor.send({ type: 'update.layoutData', data })
+    if (data !== null) {
+      actor.send({ type: 'update.layoutData', data })
+    }
   }, [data, actor])
 
   return null
-}
+})
 
 const selector = ({ context }: RelationshipDetailsSnapshot) => ({
   // subject: context.subject,
@@ -227,13 +231,18 @@ const TopLeftPanel = memo(() => {
     return null
   }
 
-  let edge = ('edgeId' in subject)
-    ? view.findEdge(subject.edgeId)
-    : ifind(view.edges(), (e) => e.source.element?.id === subject.source && e.target.element?.id === subject.target)
-      ?? ifind(view.edges(), (e) => {
-        return (e.source.element?.id === subject.source || isAncestor(e.source.element?.id ?? '--', subject.source)) &&
-          (e.target.element?.id === subject.target || isAncestor(e.target.element?.id ?? '', subject.target))
+  const edges = [...view.edges()]
+
+  let edge = ('edgeId' in subject && isTruthy(subject.edgeId))
+    ? edges.find(e => e.id === subject.edgeId)
+    : (
+      find(edges, (e) => e.source.element?.id === subject.source && e.target.element?.id === subject.target)
+      || find(edges, (e) => {
+        return (e.source.element?.id === subject.source ||
+          isAncestor(e.source.element?.id ?? '--', subject.source ?? '__')) &&
+          (e.target.element?.id === subject.target || isAncestor(e.target.element?.id ?? '', subject.target ?? '__'))
       })
+    )
   if (!edge) {
     return null
   }

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

@@ -26,20 +26,6 @@ export const SelectEdge = ({
 }) => {
   const browser = useRelationshipDetails()
   const viewport = useRef<HTMLDivElement>(null)
-  const portalProps = useMantinePortalProps()
-  // const data = useLikeC4ElementsTree(scope === 'view' ? viewId : undefined)
-  // const tree = useTree({
-  //   multiple: false
-  // })
-
-  // useEffect(() => {
-  //   ancestorsFqn(subject.id).reverse().forEach(id => {
-  //     tree.expand(id)
-  //   })
-  //   tree.select(subject.id)
-  // }, [subject.id])
-
-  const theme = useComputedColorScheme()
 
   const edgeSource = view.nodes.find(n => n.id === edge.source)
   const edgeTarget = view.nodes.find(n => n.id === edge.target)

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

@@ -1,6 +1,5 @@
 import {
   type BBox,
-  type DiagramView,
   type EdgeId,
   type ExclusiveUnion,
   type Fqn,
@@ -55,6 +54,8 @@ export type Input = ExclusiveUnion<{
 
 type Subject = {
   edgeId: EdgeId
+  source?: never
+  target?: never
   // relationships: null
 } | {
   source: Fqn

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

@@ -22,7 +22,7 @@ export const RelationshipEdge = customEdge<RelationshipDetailsTypes.EdgeData>((p
   const diagram = useDiagram()
   return (
     <EdgeContainer {...props}>
-      <EdgePath {...props} svgPath={svgPath} />
+      <EdgePath edgeProps={props} svgPath={svgPath} />
       <EdgeLabelContainer
         edgeProps={props}
         labelPosition={{

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

@@ -33,7 +33,7 @@ export const ElementNode = customNode<RelationshipDetailsTypes.ElementNodeData>(
   return (
     <ElementNodeContainer nodeProps={props}>
       <ElementShape {...props} />
-      <ElementTitle {...props} iconSize={40} />
+      <ElementTitle {...props} />
       <ElementDetailsButtonWithHandler {...props} />
       <ElementActions {...props} />
       <ElementPorts {...props} />

package/src/overlays/relationships-browser/RelationshipsBrowser.tsx

@@ -4,13 +4,12 @@ import { useCallbackRef, useStateHistory } from '@mantine/hooks'
 import { IconChevronLeft, IconChevronRight, IconX } from '@tabler/icons-react'
 import { Panel, ReactFlowProvider, useReactFlow, useStoreApi } from '@xyflow/react'
 import { shallowEqual } from 'fast-equals'
-import { AnimatePresence, LayoutGroup, m } from 'framer-motion'
+import { AnimatePresence, LayoutGroup, m } from 'motion/react'
 import { memo, useEffect, useRef } from 'react'
 import type { SnapshotFrom } from 'xstate'
 import { BaseXYFlow } from '../../base/BaseXYFlow'
 import type { RelationshipsBrowserTypes, RelationshipsBrowserTypes as Types } from './_types'
 import type { RelationshipsBrowserActorRef } from './actor'
-import { ViewPadding } from './const'
 import { CompoundNode, ElementNode, EmptyNode, RelationshipEdge } from './custom'
 import {
   RelationshipsBrowserActorContext,
@@ -101,7 +100,6 @@ const RelationshipsBrowserXYFlow = memo(() => {
       nodeTypes={nodeTypes}
       edgeTypes={edgeTypes}
       fitView={false}
-      fitViewPadding={ViewPadding}
       onNodeClick={useCallbackRef((e, node) => {
         browser.send({ type: 'xyflow.nodeClick', node })
       })}

package/src/overlays/relationships-browser/SelectElement.tsx

@@ -33,6 +33,7 @@ const selector2 = (state: RelationshipsBrowserSnapshot) => {
   })
 }
 
+const setHoveredNode = () => {}
 export const SelectElement = memo(() => {
   const browser = useRelationshipsBrowser()
   const {
@@ -52,6 +53,7 @@ export const SelectElement = memo(() => {
   const tree = useTree({
     multiple: false,
   })
+  tree.setHoveredNode = setHoveredNode
 
   useEffect(() => {
     ancestorsFqn(subjectId).reverse().forEach(id => {

package/src/overlays/relationships-browser/actor.ts

@@ -7,7 +7,7 @@ import {
   applyNodeChanges,
   useStoreApi,
 } from '@xyflow/react'
-import { type InternalNodeUpdate, getNodeDimensions, getViewportForBounds } from '@xyflow/system'
+import { type InternalNodeUpdate, getViewportForBounds } from '@xyflow/system'
 import { isNullish, omit, prop } from 'remeda'
 import {
   type ActorLogicFrom,
@@ -109,8 +109,8 @@ export const layouter = fromPromise<{
   const currentSubjectCenter = centerXYInternalNode(currentSubjectInternalNode)
 
   // Move to center of existing node
-  const existingInternalNode = xyflow.getInternalNode(existingNode.id)!
-  const existingDimensions = getNodeDimensions(existingInternalNode)
+  // const existingInternalNode = xyflow.getInternalNode(existingNode.id)!
+  // const existingDimensions = getNodeDimensions(existingInternalNode)
 
   // Dim all nodes except the existing node
   // Hide nested nodes
@@ -146,8 +146,8 @@ export const layouter = fromPromise<{
       return {
         ...omit(n, ['parentId']),
         position: {
-          x: currentSubjectCenter.x - existingDimensions.width / 2,
-          y: currentSubjectCenter.y - existingDimensions.height / 2,
+          x: currentSubjectCenter.x - n.initialWidth / 2,
+          y: currentSubjectCenter.y - n.initialHeight / 2,
         },
         zIndex: ZIndexes.Max,
         hidden: false,
@@ -164,19 +164,14 @@ export const layouter = fromPromise<{
     xyedges: [],
   })
 
-  // Pick the smaller zoom level
-  zoom = Math.min(
-    zoom,
-    nextviewport.zoom,
-  )
   // allow framer to render
-  await delay(175)
+  await delay(120)
   next.xynodes = next.xynodes.map(Base.setDimmed(false))
 
   if (signal.aborted) {
     return updateXYData()
   }
-  await xyflow.setCenter(currentSubjectCenter.x, currentSubjectCenter.y, { zoom, duration: 350 })
+  await xyflow.setCenter(currentSubjectCenter.x, currentSubjectCenter.y, { zoom, duration: 300 })
   await xyflow.setCenter(nextSubjectCenter.x, nextSubjectCenter.y, { zoom })
   return updateXYData()
 })
@@ -551,7 +546,7 @@ export const relationshipsBrowserLogic = setup({
                   xyedges: event.output.xyedges,
                   navigateFromNode: null,
                 })
-                enqueue.raise({ type: 'fitDiagram' }, { id: 'fitDiagram', delay: 50 })
+                enqueue.raise({ type: 'fitDiagram', duration: 200 }, { id: 'fitDiagram', delay: 50 })
                 for (let i = 0; i < 6; i++) {
                   enqueue.raise({ type: 'xyflow.updateNodeInternals' }, { delay: 100 + i * 100 })
                 }

package/src/overlays/relationships-browser/const.ts

@@ -1 +1,8 @@
-export const ViewPadding = 0.1
+import type { Padding } from '@xyflow/system'
+
+export const ViewPadding: Padding = {
+  top: '40px',
+  bottom: '16px',
+  left: '16px',
+  right: '16px',
+}

package/src/overlays/relationships-browser/custom/edgeTypes.tsx

@@ -77,10 +77,9 @@ export const RelationshipEdge = customEdge<RelationshipsBrowserTypes.EdgeData>((
   }
 
   return (
-    <EdgeContainer key={id} {...edgeProps}>
+    <EdgeContainer {...edgeProps}>
       <EdgePath
-        key={id}
-        {...edgeProps}
+        edgeProps={edgeProps}
         svgPath={svgPath}
         {...markOrange && {
           strokeWidth: 5,

package/src/overlays/relationships-browser/custom/nodeTypes.tsx

@@ -1,6 +1,6 @@
 import { Handle } from '@xyflow/react'
 import { Position } from '@xyflow/system'
-import { m } from 'framer-motion'
+import * as m from 'motion/react-m'
 import type { NodeProps } from '../../../base'
 import {
   CompoundNodeContainer,
@@ -36,7 +36,7 @@ export const ElementNode = customNode<RelationshipsBrowserTypes.ElementNodeData>
   return (
     <ElementNodeContainer key={props.id} component={m.div} layoutId={props.id} nodeProps={props}>
       <ElementShape {...props} />
-      <ElementTitle {...props} iconSize={40} />
+      <ElementTitle {...props} />
       <ElementDetailsButtonWithHandler {...props} />
       <ElementActions {...props} />
       <ElementPorts {...props} />

package/src/overlays/relationships-browser/useViewToNodesEdges.ts

@@ -70,7 +70,6 @@ export function viewToNodesEdge(
       draggable: false,
       selectable: true,
       focusable: true,
-      deletable: false,
       position,
       zIndex: isCompound ? ZIndexes.Compound : ZIndexes.Element,
       style: {
@@ -181,7 +180,7 @@ export function viewToNodesEdge(
       zIndex: ZIndexes.Edge,
       // selectable: selectable,
       // hidden: !visiblePredicate(edge),
-      deletable: false,
+      // deletable: false,
       data: {
         sourceFqn: edge.sourceFqn,
         targetFqn: edge.targetFqn,

package/src/state/DiagramActorProvider.tsx

@@ -34,7 +34,10 @@ export function DiagramActorProvider({
     diagramMachine.provide({
       actions: {
         'trigger:NavigateTo': ((_, { viewId }) => {
-          handlersRef.current.onNavigateTo?.(viewId as ViewId)
+          // this delay allows tap animations to finish
+          setTimeout(() => {
+            handlersRef.current.onNavigateTo?.(viewId as ViewId)
+          }, 30)
         }),
 
         'trigger:OnChange': ((_, params) => {