@likec4/diagram 1.27.2 → 1.28.0

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 { type HTMLMotionProps, m, useReducedMotionConfig } from 'framer-motion'
-import { type PropsWithChildren, forwardRef, useLayoutEffect, useRef, useState } from 'react'
+import { m, useReducedMotionConfig } from 'framer-motion'
+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,110 +21,117 @@ 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()
+      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,
-              translateY: 0,
-              transition: {
-                delay: 0.075,
-              },
-            },
-            exit: {
-              scale: 1.3,
-              opacity: 0,
-              translateY: -10,
-              [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/actor.ts

@@ -321,12 +321,7 @@ export const relationshipDetailsLogic = setup({
           actions: [
             'updateLayoutData',
             cancel('fitDiagram'),
-            {
-              type: 'xyflow:fitDiagram',
-              params: {
-                duration: 0,
-              },
-            },
+            raise({ type: 'fitDiagram', duration: 0 }, { id: 'fitDiagram', delay: 50 }),
             raise({ type: 'xyflow.updateNodeInternals' }, { delay: 75 }),
           ],
         },

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/relationship-details/hooks.ts

@@ -2,7 +2,7 @@ import { type EdgeId, type Fqn, nonNullable } from '@likec4/core'
 import { useCallbackRef } from '@mantine/hooks'
 import { useSelector } from '@xstate/react'
 import { shallowEqual } from 'fast-equals'
-import { createContext, useContext, useMemo, useTransition } from 'react'
+import { createContext, useContext, useMemo } from 'react'
 import type { OverlaysActorRef } from '../overlaysActor'
 import type { RelationshipDetailsActorRef, RelationshipDetailsSnapshot } from './actor'
 
@@ -23,7 +23,6 @@ export function useRelationshipDetailsState<T = unknown>(
 
 export function useRelationshipDetails() {
   const actor = useRelationshipDetailsActor()
-  const [, startTransition] = useTransition()
   return useMemo(() => ({
     actor,
     get rootElementId(): string {
@@ -39,9 +38,7 @@ export function useRelationshipDetails() {
       }
     },
     fitDiagram: () => {
-      startTransition(() => {
-        actor.send({ type: 'fitDiagram' })
-      })
+      actor.send({ type: 'fitDiagram' })
     },
     close: () => {
       if (actor._parent) {

package/src/overlays/relationship-details/layout-to-xyflow.ts

@@ -1,35 +1,12 @@
-import dagre, { type GraphLabel, type Label } from '@dagrejs/dagre'
 import {
-  type AbstractRelation,
-  type DiagramEdge,
-  type DiagramView,
-  type EdgeId,
   type Fqn,
-  type LikeC4Model,
-  type XYPoint,
-  compareFqnHierarchically,
-  compareRelations,
-  DiagramNode,
-  invariant,
-  isAncestor,
   nonNullable,
   Queue,
 } from '@likec4/core'
-import { useSelector } from '@xstate/react'
-import { deepEqual } from 'fast-equals'
-import { useMemo } from 'react'
-import { filter, first, forEach, hasAtLeast, isTruthy, map, pipe, prop, reverse, sort, sortBy, takeWhile } from 'remeda'
+import { hasAtLeast } from 'remeda'
 import { ZIndexes } from '../../base/const'
-import { useLikeC4Model } from '../../likec4model'
 import type { RelationshipDetailsTypes } from './_types'
-import type { RelationshipDetailsSnapshot } from './actor'
-import {
-  type RelationshipDetailsViewData,
-  computeEdgeDetailsViewData,
-  computeRelationshipDetailsViewData,
-} from './compute'
-import { useRelationshipDetailsActor, useRelationshipDetailsState } from './hooks'
-import { type LayoutResult, layoutRelationshipDetails } from './layout'
+import { type LayoutResult } from './layout'
 
 // const nodeZIndex = (node: DiagramNode) => node.level - (node.children.length > 0 ? 1 : 0)
 export function layoutResultToXYFlow(

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

@@ -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/hooks.ts

@@ -2,7 +2,7 @@ import { type Fqn, nonNullable } from '@likec4/core'
 import { useCallbackRef } from '@mantine/hooks'
 import { useSelector } from '@xstate/react'
 import { shallowEqual } from 'fast-equals'
-import { createContext, useContext, useMemo, useTransition } from 'react'
+import { createContext, useContext, useMemo } from 'react'
 import type { OverlaysActorRef } from '../overlaysActor'
 import type { RelationshipsBrowserActorRef, RelationshipsBrowserSnapshot } from './actor'
 import type { LayoutRelationshipsViewResult } from './layout'
@@ -23,7 +23,6 @@ export function useRelationshipsBrowserState<T>(
 
 export function useRelationshipsBrowser() {
   const actor = useRelationshipsBrowserActor()
-  const [, startTransition] = useTransition()
   return useMemo(() => ({
     actor,
     get rootElementId(): string {
@@ -44,12 +43,10 @@ export function useRelationshipsBrowser() {
       })
     },
     navigateTo: (subject: Fqn, fromNode?: string) => {
-      startTransition(() => {
-        actor.send({
-          type: 'navigate.to',
-          subject,
-          fromNode,
-        })
+      actor.send({
+        type: 'navigate.to',
+        subject,
+        fromNode,
       })
     },
     fitDiagram: () => {

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

@@ -55,7 +55,7 @@ const Sizes = {
     edgesep: 25,
   } satisfies GraphLabel,
   edgeLabel: {
-    width: 120,
+    width: 140,
     height: 10,
     minlen: 1,
     weight: 1,
@@ -97,19 +97,6 @@ function createGraph() {
   g.setDefaultEdgeLabel(() => ({ ...Sizes.edgeLabel }))
   g.setDefaultNodeLabel(() => ({}))
 
-  // columns.reduce((prev, column) => {
-  //   const c = graphColumn(column)
-  //   g.setNode(c.id, {})
-  //   g.setNode(c.anchor, { width: 40, height: 2 })
-  //   g.setParent(c.anchor, c.id)
-  //   if (prev) {
-  //     g.setEdge(prev, c.anchor, {
-  //       width: 0
-  //     })
-  //   }
-  //   return c.anchor
-  // }, null as string | null)
-
   return g
 }
 type G = ReturnType<typeof createGraph>
@@ -212,7 +199,7 @@ export type LayoutRelationshipsViewResult = {
 export namespace LayoutRelationshipsViewResult {
   export const Empty = '@empty' as ElementKind
 
-  export type Node = DiagramNode & {
+  export type Node = Omit<DiagramNode, 'deploymentRef' | 'inEdges' | 'outEdges'> & {
     column: RelationshipsBrowserTypes.Column
     ports: RelationshipsBrowserTypes.Ports
     existsInCurrentView: boolean
@@ -368,7 +355,7 @@ export function layoutRelationshipsView(
     for (const edge of g.edges()) {
       g.setEdge(edge, {
         ...Sizes.edgeLabel,
-        width: edgeCount > 30 ? 800 : 400,
+        width: edgeCount > 25 ? 800 : 400,
       })
     }
   }
@@ -492,8 +479,6 @@ export function layoutRelationshipsView(
           width: width,
           height: height,
         },
-        inEdges: [],
-        outEdges: [],
         children: [],
         width,
         height,
@@ -546,8 +531,6 @@ export function layoutRelationshipsView(
         ...element.$element.style,
       },
       navigateTo,
-      inEdges: [],
-      outEdges: [],
       ...(children.length > 0 && { depth: nodeDepth(id) }),
       children,
       width,

package/src/state/hotkeyActor.ts

@@ -1,4 +1,5 @@
 import { getHotkeyHandler } from '@mantine/hooks'
+import type { KeyboardEvent } from 'react'
 import { type AnyEventObject, type NonReducibleUnknown, fromCallback } from 'xstate'
 
 export type HotKeyEvent = { type: 'key.esc' | `key.arrow.${'left' | 'right'}` }
@@ -7,16 +8,25 @@ export const hotkeyActorLogic = fromCallback<AnyEventObject, NonReducibleUnknown
   sendBack: (event: HotKeyEvent) => void
 }) => {
   const escHandler = getHotkeyHandler([
-    ['Escape', () => sendBack({ type: 'key.esc' }), {
+    ['Escape', (event: KeyboardEvent) => {
+      event.stopPropagation()
+      sendBack({ type: 'key.esc' })
+    }, {
       preventDefault: true,
     }],
   ])
 
   const arrowshandler = getHotkeyHandler([
-    ['ArrowLeft', () => sendBack({ type: 'key.arrow.left' }), {
+    ['ArrowLeft', (event: KeyboardEvent) => {
+      event.stopPropagation()
+      sendBack({ type: 'key.arrow.left' })
+    }, {
       preventDefault: true,
     }],
-    ['ArrowRight', () => sendBack({ type: 'key.arrow.right' }), {
+    ['ArrowRight', (event: KeyboardEvent) => {
+      event.stopPropagation()
+      sendBack({ type: 'key.arrow.right' })
+    }, {
       preventDefault: true,
     }],
   ])

package/src/utils/index.ts

@@ -1,4 +1,3 @@
-export type { AddEdgeData, AddNodeData } from './types'
 export { vector, VectorImpl } from './vector'
 export type { Vector } from './vector'
 export {

package/dist/utils/types.d.ts

@@ -1,8 +0,0 @@
-import { Edge, Node } from '@xyflow/react';
-import { Merge } from 'type-fest';
-export type AddNodeData<T extends Node, Data> = Omit<T, 'data'> & {
-    data: Merge<T['data'], Data>;
-};
-export type AddEdgeData<T extends Edge, Data> = Omit<T, 'data'> & {
-    data: Merge<T['data'], Data>;
-};

package/src/utils/types.ts

@@ -1,6 +0,0 @@
-import type { Edge, Node } from '@xyflow/react'
-import type { Merge } from 'type-fest'
-
-export type AddNodeData<T extends Node, Data> = Omit<T, 'data'> & { data: Merge<T['data'], Data> }
-
-export type AddEdgeData<T extends Edge, Data> = Omit<T, 'data'> & { data: Merge<T['data'], Data> }