@likec4/diagram 1.27.0 → 1.27.2

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

@@ -1,15 +1,17 @@
-import { css } from '@likec4/styles/css'
+import { css, sva } from '@likec4/styles/css'
 
 export const backdropBlur = '--_blur'
 export const backdropOpacity = '--_opacity'
-const backdropColor = '--backdrop-color'
 
-const borderRadius = '8px'
-export const dialog = css({
+export const level = '--_level'
+const offset = '--_offset'
+const inset = '--_inset'
+
+const borderRadius = '--_border-radius'
+const dialog = css.raw({
   boxSizing: 'border-box',
   margin: 0,
   position: 'fixed',
-  inset: '3rem',
   width: 'auto',
   height: 'auto',
   maxWidth: '100vw',
@@ -18,9 +20,11 @@ export const dialog = css({
   shadow: 'xl',
   border: 'transparent',
   outline: 'none',
-  borderRadius: borderRadius,
-  padding: '6px',
+  borderRadius: `var(${borderRadius})`,
   [backdropBlur]: '0px',
+  [level]: '0',
+  [offset]: '0px',
+  [inset]: 'calc((1 + var(--_level) * 0.5) * var(--_offset))',
   [backdropOpacity]: '0%',
   _backdrop: {
     cursor: 'zoom-out',
@@ -30,29 +34,93 @@ export const dialog = css({
       _light: `[rgb(15 15 15/ var(${backdropOpacity}))]`,
     },
   },
-  mdDown: {
-    borderRadius: 'sm',
-    inset: '2rem',
-    width: 'calc(100vw - 4rem)',
-    height: 'calc(100vh - 4rem)',
-  },
   smDown: {
+    [borderRadius]: '0px',
     border: 'none',
     inset: 0,
     padding: 0,
+    // [offset]: '0px',
+    // [inset]: '0px',
     width: '100vw',
     height: '100vh',
   },
+  sm: {
+    inset: '[var(--_inset) var(--_offset) var(--_offset) var(--_inset)]',
+    width: 'calc(100vw - var(--_offset) - var(--_inset))',
+    height: 'calc(100vh - var(--_offset) - var(--_inset))',
+    [borderRadius]: '6px',
+    padding: '6px',
+    [offset]: '1rem',
+  },
+  md: {
+    [offset]: '1rem',
+  },
+  lg: {
+    [offset]: '2rem',
+  },
+  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)',
+  //   },
 })
 
-export const body = css({
+const body = css.raw({
   position: 'relative',
   containerName: 'overlay-dialog',
   containerType: 'size',
   border: `0 solid transparent`,
-  borderRadius: `calc(${borderRadius} - 2px)`,
   background: 'mantine.colors.body',
   overflow: 'hidden',
   width: '100%',
   height: '100%',
+  sm: {
+    borderRadius: `calc(var(${borderRadius}) - 2px)`,
+  },
+})
+
+export const overlay = sva({
+  slots: ['dialog', 'body'],
+  base: {
+    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,28 +5,30 @@ import {
 } from '@mantine/core'
 import { useMergedRef } from '@mantine/hooks'
 import { useDebouncedCallback, useSyncedRef, useTimeoutEffect } from '@react-hookz/web'
-import { type HTMLMotionProps, m } from 'framer-motion'
+import { type HTMLMotionProps, m, useReducedMotionConfig } from 'framer-motion'
 import { type PropsWithChildren, forwardRef, useLayoutEffect, useRef, useState } from 'react'
 import { stopPropagation } from '../../utils'
-import * as styles from './Overlay.css'
+import { backdropBlur, backdropOpacity, overlay as overlayCVA } from './Overlay.css'
 
-type OverlayProps = PropsWithChildren<
-  HTMLMotionProps<'dialog'> & {
-    classes?: {
-      dialog?: string
-      body?: string
-    }
-    onClose: () => void
-    onClick?: never
+type OverlayProps = PropsWithChildren<{
+  overlayLevel?: 0 | 1 | 2 | 3
+  className?: string
+  classes?: {
+    dialog?: string
+    body?: string
   }
->
+  onClose: () => void
+  onClick?: never
+}>
 
 export const Overlay = forwardRef<HTMLDialogElement, OverlayProps>(
-  ({ children, onClose, className, classes, ...rest }, ref) => {
+  ({ children, onClose, className, classes, overlayLevel = 0, ...rest }, ref) => {
     const [opened, setOpened] = useState(false)
     const dialogRef = useRef<HTMLDialogElement>(null)
     const isClosingRef = useRef(false)
 
+    const motionNotReduced = useReducedMotionConfig() !== true
+
     const onCloseRef = useSyncedRef(onClose)
     const close = useDebouncedCallback(
       () => {
@@ -54,44 +56,53 @@ export const Overlay = forwardRef<HTMLDialogElement, OverlayProps>(
         // Move dialog to the top of the DOM
         dialogRef.current?.showModal()
       }
-    }, 10)
+    }, 20)
 
     useTimeoutEffect(() => {
       setOpened(true)
     }, 120)
 
+    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)}
-        initial={{
-          [styles.backdropBlur]: '0px',
-          [styles.backdropOpacity]: '0%',
-          scale: 1.075,
-          opacity: 0.2,
-          // originY: 0.45,
-          // translateY: '-10px',
-        }}
-        animate={{
-          [styles.backdropBlur]: '8px',
-          [styles.backdropOpacity]: '60%',
-          scale: 1,
-          opacity: 1,
-          // translateY: '0px',
-          transition: {
-            delay: 0.06,
-            // duration: 0.2,
-          },
-        }}
-        exit={{
-          scale: 1.3,
-          opacity: 0,
-          [styles.backdropBlur]: '0px',
-          [styles.backdropOpacity]: '0%',
-          // transition: {
-          //   duration: 0.2,
-          // },
-        }}
+        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%',
+            },
+          })
+          : {
+            initial: {
+              [backdropBlur]: '8px',
+              [backdropOpacity]: '60%',
+            },
+          }}
         onClick={e => {
           e.stopPropagation()
           if ((e.target as any)?.nodeName?.toUpperCase() === 'DIALOG') {

package/src/overlays/overlaysActor.ts

@@ -133,8 +133,8 @@ export const overlaysActorLogic = setup({
       const currentOverlay = last(context.overlays)
       if (currentOverlay?.type === 'relationshipDetails') {
         enqueue.sendTo(currentOverlay.id, {
+          ...event,
           type: 'navigate.to',
-          edgeId: event.edgeId,
         })
         return
       }

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

@@ -1,22 +1,32 @@
-import type { DiagramEdge, DiagramView } from '@likec4/core'
+import { type DiagramEdge, type DiagramView, ifind, 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'
-import { Panel, ReactFlowProvider } from '@xyflow/react'
+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 { memo, useEffect, useRef } from 'react'
+import { memo, useEffect, useMemo, useRef } from 'react'
+import { first } from 'remeda'
 import { BaseXYFlow } from '../../base/BaseXYFlow'
+import { useLikeC4Model } from '../../likec4model/useLikeC4Model'
 import type { RelationshipDetailsTypes, RelationshipDetailsTypes as Types } from './_types'
 import type { RelationshipDetailsActorRef, RelationshipDetailsSnapshot } from './actor'
+import {
+  type RelationshipDetailsViewData,
+  computeEdgeDetailsViewData,
+  computeRelationshipDetailsViewData,
+} from './compute'
 import { CompoundNode, ElementNode, RelationshipEdge } from './custom'
 import {
   RelationshipDetailsActorContext,
   useRelationshipDetails,
+  useRelationshipDetailsActor,
   useRelationshipDetailsState,
 } from './hooks'
+import { layoutRelationshipDetails } from './layout'
 import { SelectEdge } from './SelectEdge'
-import { useLayoutedDetails } from './useLayoutedDetails'
 
 const nodeTypes = {
   element: ElementNode,
@@ -59,60 +69,76 @@ export function RelationshipDetails({ actorRef }: RelationshipDetailsProps) {
             <RelationshipDetailsInner />
           </AnimatePresence>
         </LayoutGroup>
+        <SyncRelationshipDetailsXYFlow />
       </ReactFlowProvider>
     </RelationshipDetailsActorContext.Provider>
   )
 }
 
-const selector = (state: RelationshipDetailsSnapshot) => ({
-  edgeId: state.context.edgeId,
-  view: state.context.view,
-  initialized: state.context.initialized,
-  nodes: state.context.xynodes,
-  edges: state.context.xyedges,
+const selectSubject = (state: RelationshipDetailsSnapshot) => ({
+  ...state.context.subject,
+  viewId: state.context.viewId,
 })
 
-const RelationshipDetailsInner = memo(() => {
-  const browser = useRelationshipDetails()
-  const {
-    edgeId,
+function SyncRelationshipDetailsXYFlow() {
+  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) {
+      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 {
+      data = computeRelationshipDetailsViewData({
+        source: likec4model.element(subject.source),
+        target: likec4model.element(subject.target),
+      })
+    }
+    return layoutRelationshipDetails(data, view)
+  }, [
+    subject,
     view,
-    initialized,
-    nodes,
-    edges,
-  } = useRelationshipDetailsState(selector)
+    likec4model,
+  ])
 
-  const {
-    edge,
-    xynodes,
-    xyedges,
-    bounds,
-  } = useLayoutedDetails(edgeId, view)
-
-  useEffect(() => {
-    browser.send({ type: 'update.xydata', xynodes, xyedges })
-  }, [xynodes, xyedges])
-
-  const [historyEdgeId, historyOps, { history, current }] = useStateHistory(edgeId)
+  const store = useStoreApi<RelationshipDetailsTypes.Node, RelationshipDetailsTypes.Edge>()
+  const instance = useReactFlow<RelationshipDetailsTypes.Node, RelationshipDetailsTypes.Edge>()
 
   useEffect(() => {
-    if (historyEdgeId !== edgeId) {
-      historyOps.set(edgeId)
+    if (instance.viewportInitialized) {
+      actor.send({ type: 'xyflow.init', instance, store })
     }
-  }, [edgeId])
+  }, [store, instance.viewportInitialized, actor])
 
   useEffect(() => {
-    if (historyEdgeId !== edgeId) {
-      browser.navigateTo(historyEdgeId)
-    }
-  }, [historyEdgeId])
+    actor.send({ type: 'update.layoutData', data })
+  }, [data, actor])
 
-  const hasStepBack = current > 0
-  const hasStepForward = current + 1 < history.length
+  return null
+}
+
+const selector = ({ context }: RelationshipDetailsSnapshot) => ({
+  // subject: context.subject,
+  // view: state.context.view,
+  initialized: context.initialized.xydata && context.initialized.xyflow,
+  nodes: context.xynodes,
+  edges: context.xyedges,
+})
+
+const RelationshipDetailsInner = memo(() => {
+  const browser = useRelationshipDetails()
+  const {
+    initialized,
+    nodes,
+    edges,
+  } = useRelationshipDetailsState(selector, deepEqual)
 
   return (
     <BaseXYFlow<Types.Node, Types.Edge>
-      id={`relationships-details-${browser.actor.sessionId}`}
+      id={browser.rootElementId}
       nodes={nodes}
       edges={edges}
       className={clsx(initialized ? 'initialized' : 'not-initialized')}
@@ -125,9 +151,6 @@ const RelationshipDetailsInner = memo(() => {
         browser.send({ type: 'xyflow.applyEdgeChanges', changes })
       })}
       fitViewPadding={0.05}
-      onInit={useCallbackRef((instance) => {
-        browser.send({ type: 'xyflow.init', instance })
-      })}
       onNodeClick={useCallbackRef((e, node) => {
         e.stopPropagation()
         browser.send({ type: 'xyflow.nodeClick', node })
@@ -137,17 +160,23 @@ const RelationshipDetailsInner = memo(() => {
         browser.send({ type: 'xyflow.edgeClick', edge })
       })}
       onPaneClick={useCallbackRef((e) => {
-        e.stopPropagation()
         browser.send({ type: 'xyflow.paneClick' })
       })}
+      onDoubleClick={useCallbackRef(e => {
+        browser.send({ type: 'xyflow.paneDblClick' })
+      })}
       onViewportResize={useCallbackRef(() => {
         browser.send({ type: 'xyflow.resized' })
       })}
       onEdgeMouseEnter={useCallbackRef((_event, edge) => {
-        browser.send({ type: 'xyflow.edgeMouseEnter', edge })
+        if (!edge.data.hovered) {
+          browser.send({ type: 'xyflow.edgeMouseEnter', edge })
+        }
       })}
       onEdgeMouseLeave={useCallbackRef((_event, edge) => {
-        browser.send({ type: 'xyflow.edgeMouseLeave', edge })
+        if (edge.data.hovered) {
+          browser.send({ type: 'xyflow.edgeMouseLeave', edge })
+        }
       })}
       onSelectionChange={useCallbackRef((params) => {
         browser.send({ type: 'xyflow.selectionChange', ...params })
@@ -157,14 +186,7 @@ const RelationshipDetailsInner = memo(() => {
       pannable
       zoomable
     >
-      <TopLeftPanel
-        edge={edge}
-        view={view}
-        hasStepBack={hasStepBack}
-        hasStepForward={hasStepForward}
-        onStepBack={() => historyOps.back()}
-        onStepForward={() => historyOps.forward()}
-      />
+      <TopLeftPanel />
       <Panel position="top-right">
         <ActionIcon
           variant="default"
@@ -184,23 +206,64 @@ const RelationshipDetailsInner = memo(() => {
   )
 })
 
+// type TopLeftPanelProps = {
+//   edge: DiagramEdge
+//   view: DiagramView
+//   hasStepBack: boolean
+//   hasStepForward: boolean
+//   onStepBack: () => void
+//   onStepForward: () => void
+// }
+const topLeftPanelselector = ({ context }: RelationshipDetailsSnapshot) => ({
+  subject: context.subject,
+  viewId: context.viewId,
+})
+const TopLeftPanel = memo(() => {
+  const { subject, viewId } = useRelationshipDetailsState(topLeftPanelselector, deepEqual)
+  const likec4model = useLikeC4Model(true)
+  const view = likec4model.findView(viewId)
+
+  if (!view || !view.isDiagram()) {
+    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))
+      })
+  if (!edge) {
+    return null
+  }
+  return <TopLeftPanelInner edge={edge.$edge} view={view.$view} />
+})
+
 type TopLeftPanelProps = {
   edge: DiagramEdge
   view: DiagramView
-  hasStepBack: boolean
-  hasStepForward: boolean
-  onStepBack: () => void
-  onStepForward: () => void
 }
-const TopLeftPanel = ({
-  edge,
-  view,
-  hasStepBack,
-  hasStepForward,
-  onStepBack,
-  onStepForward,
-}: TopLeftPanelProps) => {
+const TopLeftPanelInner = ({ edge, view }: TopLeftPanelProps) => {
   const browser = useRelationshipDetails()
+  const edgeId = edge.id
+  const [historyEdgeId, historyOps, { history, current }] = useStateHistory(edge.id)
+
+  useEffect(() => {
+    if (historyEdgeId !== edgeId) {
+      historyOps.set(edgeId)
+    }
+  }, [edgeId])
+
+  useEffect(() => {
+    if (historyEdgeId !== edgeId) {
+      browser.navigateTo(historyEdgeId)
+    }
+  }, [historyEdgeId])
+
+  const hasStepBack = current > 0
+  const hasStepForward = current + 1 < history.length
+
   return (
     <Panel position="top-left">
       <Group gap={4} wrap={'nowrap'}>
@@ -220,7 +283,7 @@ const TopLeftPanel = ({
                 color="gray"
                 onClick={e => {
                   e.stopPropagation()
-                  onStepBack()
+                  historyOps.back()
                 }}>
                 <IconChevronLeft />
               </ActionIcon>
@@ -241,7 +304,7 @@ const TopLeftPanel = ({
                 color="gray"
                 onClick={e => {
                   e.stopPropagation()
-                  onStepForward()
+                  historyOps.forward()
                 }}>
                 <IconChevronRight />
               </ActionIcon>

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

@@ -24,7 +24,7 @@ export const SelectEdge = ({
   view: DiagramView
   // onSelect: (id: Fqn) => void
 }) => {
-  const overlay = useRelationshipDetails()
+  const browser = useRelationshipDetails()
   const viewport = useRef<HTMLDivElement>(null)
   const portalProps = useMantinePortalProps()
   // const data = useLikeC4ElementsTree(scope === 'view' ? viewId : undefined)
@@ -41,20 +41,27 @@ export const SelectEdge = ({
 
   const theme = useComputedColorScheme()
 
-  const edgeSource = view.nodes.find(n => n.id === edge.source)!
-  const edgeTarget = view.nodes.find(n => n.id === edge.target)!
+  const edgeSource = view.nodes.find(n => n.id === edge.source)
+  const edgeTarget = view.nodes.find(n => n.id === edge.target)
 
-  const edges = view.edges.map(edge => {
-    const source = view.nodes.find(n => n.id === edge.source)!
-    const target = view.nodes.find(n => n.id === edge.target)!
-    return {
-      id: edge.id,
-      source,
-      target,
-      label: edge.label,
+  const edges = view.edges.flatMap(edge => {
+    const source = view.nodes.find(n => n.id === edge.source)
+    const target = view.nodes.find(n => n.id === edge.target)
+    if (source && target) {
+      return {
+        id: edge.id,
+        source,
+        target,
+        label: edge.label,
+      }
     }
+    return []
   })
 
+  if (!edgeSource || !edgeTarget || edges.length === 0) {
+    return null
+  }
+
   return (
     <Popover
       position="bottom-start"
@@ -113,7 +120,7 @@ export const SelectEdge = ({
                 data-selected={e.id === edge.id}
                 onClick={event => {
                   event.stopPropagation()
-                  overlay.navigateTo(e.id)
+                  browser.navigateTo(e.id)
                 }}>
                 <Box
                   className={css.edgeSource}

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

@@ -2,6 +2,7 @@ import type { Color, DiagramNode, Fqn, IconUrl, RelationId, RelationshipLineType
 import type { Base, NonOptional, ReactFlowEdge, ReactFlowNode } from '../../base/types'
 
 export namespace RelationshipDetailsTypes {
+  export type Column = 'sources' | 'targets'
   /**
    * The node's incoming and outgoing ports
    */
@@ -26,6 +27,7 @@ export namespace RelationshipDetailsTypes {
       >
     >
     & {
+      column: Column
       fqn: Fqn
       icon: IconUrl
       ports: Ports
@@ -38,11 +40,11 @@ export namespace RelationshipDetailsTypes {
         DiagramNode,
         | 'title'
         | 'color'
-        | 'shape'
         | 'style'
       >
     >
     & {
+      column: Column
       fqn: Fqn
       depth: number
       icon?: IconUrl