@likec4/diagram 1.24.0 → 1.25.0

package/src/overlays/overlay/Overlay.tsx

@@ -6,6 +6,8 @@ import { useDebouncedCallback, useSyncedRef, useTimeoutEffect } from '@react-hoo
 import clsx from 'clsx'
 import { type HTMLMotionProps, m } from 'framer-motion'
 import { type PropsWithChildren, useLayoutEffect, useRef, useState } from 'react'
+import { stopPropagation } from '../../utils'
+import { getVarName } from '../../utils/css'
 import * as css from './Overlay.css'
 
 type OverlayProps = PropsWithChildren<
@@ -19,6 +21,9 @@ type OverlayProps = PropsWithChildren<
   }
 >
 
+const backdropBlur = getVarName(css.backdropBlur) as '--backdrop-blur'
+const backdropOpacity = getVarName(css.backdropOpacity) as '--backdrop-opacity'
+
 export function Overlay({ children, onClose, className, classes, ...rest }: OverlayProps) {
   const [opened, setOpened] = useState(false)
   const dialogRef = useRef<HTMLDialogElement>(null)
@@ -65,17 +70,17 @@ export function Overlay({ children, onClose, className, classes, ...rest }: Over
   return (
     <m.dialog
       ref={dialogRef}
-      className={clsx(css.dialog, classes?.dialog, className)}
+      className={clsx(css.dialog, classes?.dialog, className, RemoveScroll.classNames.fullWidth)}
       initial={{
-        '--backdrop-blur': '0px',
-        '--backdrop-opacity': '5%',
+        [backdropBlur]: '0px',
+        [backdropOpacity]: '5%',
         opacity: 0.85,
         translateY: 12,
         // opacity: 02.8,
       }}
       animate={{
-        '--backdrop-blur': '6px',
-        '--backdrop-opacity': '60%',
+        [backdropBlur]: '6px',
+        // [backdropOpacity]: '60%',
         translateY: 0,
         opacity: 1,
         // transition: {
@@ -85,26 +90,28 @@ export function Overlay({ children, onClose, className, classes, ...rest }: Over
       exit={{
         opacity: 0,
         translateY: -10,
-        '--backdrop-blur': '0px',
-        '--backdrop-opacity': '0%',
+        [backdropBlur]: '0px',
+        [backdropOpacity]: '0%',
         transition: {
           duration: 0.1,
         },
       }}
       onClick={e => {
+        e.stopPropagation()
         if ((e.target as any)?.nodeName?.toUpperCase() === 'DIALOG') {
-          e.stopPropagation()
           dialogRef.current?.close()
           return
         }
       }}
+      onDoubleClick={stopPropagation}
+      onPointerDown={stopPropagation}
       onClose={e => {
         e.stopPropagation()
         close()
       }}
       {...rest}
     >
-      <RemoveScroll forwardProps>
+      <RemoveScroll forwardProps removeScrollBar={false}>
         <Box className={clsx(css.body, classes?.body)}>
           {opened && <>{children}</>}
         </Box>

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

@@ -2,14 +2,11 @@ import type { DiagramEdge, DiagramView } 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, useEdgesState, useNodesState } from '@xyflow/react'
+import { Panel, ReactFlowProvider } from '@xyflow/react'
 import clsx from 'clsx'
 import { AnimatePresence, LayoutGroup, m } from 'framer-motion'
 import { memo, useEffect, useRef } from 'react'
 import { BaseXYFlow } from '../../base/BaseXYFlow'
-import { updateEdges } from '../../base/updateEdges'
-import { updateNodes } from '../../base/updateNodes'
-import { useUpdateEffect } from '../../hooks'
 import type { RelationshipDetailsTypes as Types } from './_types'
 import type { RelationshipDetailsActorRef, RelationshipDetailsSnapshot } from './actor'
 import { edgeTypes } from './custom/edgeTypes'
@@ -45,7 +42,11 @@ export function RelationshipDetails({ actorRef }: RelationshipDetailsProps) {
   return (
     <RelationshipDetailsActorContext.Provider value={actorRef}>
       <ReactFlowProvider {...initialRef.current}>
-        <RelationshipDetailsInner />
+        <LayoutGroup id={actorRef.sessionId} inherit={false}>
+          <AnimatePresence>
+            <RelationshipDetailsInner />
+          </AnimatePresence>
+        </LayoutGroup>
       </ReactFlowProvider>
     </RelationshipDetailsActorContext.Provider>
   )
@@ -55,6 +56,8 @@ 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 RelationshipDetailsInner = memo(() => {
@@ -63,6 +66,8 @@ const RelationshipDetailsInner = memo(() => {
     edgeId,
     view,
     initialized,
+    nodes,
+    edges,
   } = useRelationshipDetailsState(selector)
 
   const {
@@ -71,12 +76,9 @@ const RelationshipDetailsInner = memo(() => {
     xyedges,
     bounds,
   } = useLayoutedDetails(edgeId, view)
-  const [nodes, setNodes, onNodesChange] = useNodesState(xynodes)
-  const [edges, setEdges, onEdgesChange] = useEdgesState(xyedges)
 
-  useUpdateEffect(() => {
-    setNodes(updateNodes(xynodes))
-    setEdges(updateEdges(xyedges))
+  useEffect(() => {
+    browser.send({ type: 'update.xydata', xynodes, xyedges })
   }, [xynodes, xyedges])
 
   const [historyEdgeId, historyOps, { history, current }] = useStateHistory(edgeId)
@@ -89,7 +91,7 @@ const RelationshipDetailsInner = memo(() => {
 
   useEffect(() => {
     if (historyEdgeId !== edgeId) {
-      // browser.navigateTo(historyEdgeId)
+      browser.navigateTo(historyEdgeId)
     }
   }, [historyEdgeId])
 
@@ -97,65 +99,76 @@ const RelationshipDetailsInner = memo(() => {
   const hasStepForward = current + 1 < history.length
 
   return (
-    <LayoutGroup>
-      <BaseXYFlow<Types.Node, Types.Edge>
-        id="relationship-details"
-        nodes={nodes}
-        edges={edges}
-        className={clsx(initialized ? 'initialized' : 'not-initialized')}
-        nodeTypes={nodeTypes}
-        edgeTypes={edgeTypes}
-        onEdgesChange={onEdgesChange}
-        onNodesChange={onNodesChange}
-        fitViewPadding={0.05}
-        onInit={useCallbackRef((instance) => {
-          browser.send({ type: 'xyflow.init', instance })
-        })}
-        onNodeClick={useCallbackRef((e, node) => {
-          e.stopPropagation()
-          browser.send({ type: 'xyflow.nodeClick', node })
-        })}
-        onEdgeClick={useCallbackRef((e, edge) => {
-          e.stopPropagation()
-          browser.send({ type: 'xyflow.edgeClick', edge })
-        })}
-        onPaneClick={useCallbackRef((e) => {
-          e.stopPropagation()
-          browser.send({ type: 'xyflow.paneClick' })
-        })}
-        onViewportResize={useCallbackRef(() => {
-          browser.send({ type: 'xyflow.resized' })
-        })}
-        nodesDraggable={false}
-        fitView={false}
-        pannable
-        zoomable
-      >
-        <TopLeftPanel
-          edge={edge}
-          view={view}
-          hasStepBack={hasStepBack}
-          hasStepForward={hasStepForward}
-          onStepBack={() => historyOps.back()}
-          onStepForward={() => historyOps.forward()}
-        />
-        <Panel position="top-right">
-          <ActionIcon
-            variant="default"
-            color="gray"
-            // color="gray"
-            // size={'lg'}
-            // data-autofocus
-            // autoFocus
-            onClick={(e) => {
-              e.stopPropagation()
-              browser.close()
-            }}>
-            <IconX />
-          </ActionIcon>
-        </Panel>
-      </BaseXYFlow>
-    </LayoutGroup>
+    <BaseXYFlow<Types.Node, Types.Edge>
+      id={`relationships-details-${browser.actor.sessionId}`}
+      nodes={nodes}
+      edges={edges}
+      className={clsx(initialized ? 'initialized' : 'not-initialized')}
+      nodeTypes={nodeTypes}
+      edgeTypes={edgeTypes}
+      onNodesChange={useCallbackRef((changes) => {
+        browser.send({ type: 'xyflow.applyNodeChanges', changes })
+      })}
+      onEdgesChange={useCallbackRef((changes) => {
+        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 })
+      })}
+      onEdgeClick={useCallbackRef((e, edge) => {
+        e.stopPropagation()
+        browser.send({ type: 'xyflow.edgeClick', edge })
+      })}
+      onPaneClick={useCallbackRef((e) => {
+        e.stopPropagation()
+        browser.send({ type: 'xyflow.paneClick' })
+      })}
+      onViewportResize={useCallbackRef(() => {
+        browser.send({ type: 'xyflow.resized' })
+      })}
+      onEdgeMouseEnter={useCallbackRef((_event, edge) => {
+        browser.send({ type: 'xyflow.edgeMouseEnter', edge })
+      })}
+      onEdgeMouseLeave={useCallbackRef((_event, edge) => {
+        browser.send({ type: 'xyflow.edgeMouseLeave', edge })
+      })}
+      onSelectionChange={useCallbackRef((params) => {
+        browser.send({ type: 'xyflow.selectionChange', ...params })
+      })}
+      nodesDraggable={false}
+      fitView={false}
+      pannable
+      zoomable
+    >
+      <TopLeftPanel
+        edge={edge}
+        view={view}
+        hasStepBack={hasStepBack}
+        hasStepForward={hasStepForward}
+        onStepBack={() => historyOps.back()}
+        onStepForward={() => historyOps.forward()}
+      />
+      <Panel position="top-right">
+        <ActionIcon
+          variant="default"
+          color="gray"
+          // color="gray"
+          // size={'lg'}
+          // data-autofocus
+          // autoFocus
+          onClick={(e) => {
+            e.stopPropagation()
+            browser.close()
+          }}>
+          <IconX />
+        </ActionIcon>
+      </Panel>
+    </BaseXYFlow>
   )
 })
 

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

@@ -1,19 +1,23 @@
 import { type BBox, type DiagramView, type EdgeId, invariant } from '@likec4/core'
 import {
+  type EdgeChange,
+  type NodeChange,
   type ReactFlowInstance,
+  applyEdgeChanges,
+  applyNodeChanges,
 } from '@xyflow/react'
 import { prop } from 'remeda'
 import {
-  type ActorLogic,
   type ActorLogicFrom,
   type ActorRefFromLogic,
-  type MachineSnapshot,
   type SnapshotFrom,
   assign,
   cancel,
+  enqueueActions,
   raise,
   setup,
 } from 'xstate'
+import { Base } from '../../base'
 import { MinZoom } from '../../base/const'
 import type { RelationshipDetailsTypes } from './_types'
 
@@ -31,6 +35,8 @@ export type Context = Readonly<
     // parentRef: AnyActorRef | null
     xyflow: XYFLowInstance | null
     initialized: boolean
+    xynodes: RelationshipDetailsTypes.Node[]
+    xyedges: RelationshipDetailsTypes.Edge[]
     // bounds: BBox | null
   }
 >
@@ -39,8 +45,20 @@ export type Events =
   | { type: 'xyflow.init'; instance: XYFLowInstance }
   | { type: 'xyflow.nodeClick'; node: RelationshipDetailsTypes.Node }
   | { type: 'xyflow.edgeClick'; edge: RelationshipDetailsTypes.Edge }
+  | { type: 'xyflow.edgeMouseEnter'; edge: RelationshipDetailsTypes.Edge }
+  | { type: 'xyflow.edgeMouseLeave'; edge: RelationshipDetailsTypes.Edge }
+  | { type: 'dim.nonhovered.edges' }
+  | { type: 'undim.edges' }
+  | { type: 'xyflow.selectionChange'; nodes: RelationshipDetailsTypes.Node[]; edges: RelationshipDetailsTypes.Edge[] }
+  | { type: 'xyflow.applyNodeChanges'; changes: NodeChange<RelationshipDetailsTypes.Node>[] }
+  | { type: 'xyflow.applyEdgeChanges'; changes: EdgeChange<RelationshipDetailsTypes.Edge>[] }
   | { type: 'xyflow.paneClick' }
   | { type: 'xyflow.resized' }
+  | {
+    type: 'update.xydata'
+    xynodes: RelationshipDetailsTypes.Node[]
+    xyedges: RelationshipDetailsTypes.Edge[]
+  }
   // | { type: 'update.bounds'; bounds: BBox }
   | { type: 'fitDiagram'; duration?: number; bounds?: BBox }
   | { type: 'navigate.to'; edgeId: EdgeId }
@@ -82,6 +100,8 @@ export const relationshipDetailsLogic = setup({
     ...input,
     initialized: false,
     xyflow: null,
+    xynodes: [],
+    xyedges: [],
   }),
   states: {
     'opening': {
@@ -104,17 +124,70 @@ export const relationshipDetailsLogic = setup({
         params: { duration: 0 },
       },
       on: {
-        // 'xyflow.nodeClick': {
-        //   actions: enqueueActions(({ event, enqueue }) => {
-        //     if ('fqn' in event.node.data) {
-        //       const fqn = event.node.data.fqn
-        //       enqueue.assign({
-        //         subject: fqn,
-        //       })
-        //       enqueue.raise({ type: 'fitDiagram' }, { delay: 50 })
-        //     }
-        //   }),
-        // },
+        'xyflow.edgeMouseEnter': {
+          actions: [
+            assign({
+              xyedges: ({ context, event }) => {
+                const hasDimmed = context.xyedges.some(edge => edge.data.dimmed === true)
+                return context.xyedges.map(edge => {
+                  if (edge.id === event.edge.id) {
+                    return Base.setData(edge, {
+                      hovered: true,
+                      dimmed: false,
+                    })
+                  }
+                  return hasDimmed && !edge.data.dimmed && !edge.selected ? Base.setDimmed(edge, 'immediate') : edge
+                })
+              },
+            }),
+            cancel('undim.edges'),
+            cancel('dim.nonhovered.edges'),
+            raise({ type: 'dim.nonhovered.edges' }, { id: 'dim.nonhovered.edges', delay: 100 }),
+          ],
+        },
+        'xyflow.edgeMouseLeave': {
+          actions: [
+            assign({
+              xyedges: ({ context, event }) =>
+                context.xyedges.map(edge => {
+                  if (edge.id === event.edge.id) {
+                    return Base.setHovered(edge, false)
+                  }
+                  return edge
+                }),
+            }),
+            cancel('dim.nonhovered.edges'),
+            raise({ type: 'undim.edges' }, { id: 'undim.edges', delay: 400 }),
+          ],
+        },
+        'dim.nonhovered.edges': {
+          actions: assign({
+            xyedges: ({ context }) => context.xyedges.map(edge => Base.setDimmed(edge, edge.data.hovered !== true)),
+          }),
+        },
+        'undim.edges': {
+          actions: assign({
+            xyedges: ({ context }) => {
+              const hasSelected = context.xyedges.some(edge => edge.selected === true)
+              if (hasSelected) {
+                return context.xyedges.map(edge =>
+                  Base.setDimmed(edge, edge.selected !== true ? edge.data.dimmed || 'immediate' : false)
+                )
+              }
+              return context.xyedges.map(Base.setDimmed(false))
+            },
+          }),
+        },
+        'xyflow.selectionChange': {
+          actions: enqueueActions(({ event, context, enqueue }) => {
+            if (
+              event.edges.length === 0 && context.xyedges.some(e => e.data.dimmed) &&
+              !context.xyedges.some(e => e.data.hovered)
+            ) {
+              enqueue.raise({ type: 'undim.edges' })
+            }
+          }),
+        },
         'navigate.to': {
           actions: [
             assign({
@@ -149,6 +222,26 @@ export const relationshipDetailsLogic = setup({
         raise({ type: 'fitDiagram' }, { id: 'fitDiagram', delay: 200 }),
       ],
     },
+    'update.xydata': {
+      actions: assign({
+        xynodes: ({ event }) => event.xynodes,
+        xyedges: ({ event }) => event.xyedges,
+      }),
+    },
+    'xyflow.applyNodeChanges': {
+      actions: assign({
+        xynodes: ({ context, event }) => {
+          return applyNodeChanges(event.changes, context.xynodes)
+        },
+      }),
+    },
+    'xyflow.applyEdgeChanges': {
+      actions: assign({
+        xyedges: ({ context, event }) => {
+          return applyEdgeChanges(event.changes, context.xyedges)
+        },
+      }),
+    },
   },
 })
 

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

@@ -3,6 +3,7 @@ import { useCallbackRef } from '@mantine/hooks'
 import { useSelector } from '@xstate/react'
 import { shallowEqual } from 'fast-equals'
 import { createContext, useContext, useMemo, useTransition } from 'react'
+import type { OverlaysActorRef } from '../overlaysActor'
 import type { RelationshipDetailsActorRef, RelationshipDetailsSnapshot } from './actor'
 
 export const RelationshipDetailsActorContext = createContext<RelationshipDetailsActorRef | null>(null)
@@ -24,6 +25,7 @@ export function useRelationshipDetails() {
   const actor = useRelationshipDetailsActor()
   const [, startTransition] = useTransition()
   return useMemo(() => ({
+    actor,
     getState: () => actor.getSnapshot().context,
     send: actor.send,
     navigateTo: (edgeId: EdgeId) => {
@@ -40,9 +42,11 @@ export function useRelationshipDetails() {
       })
     },
     close: () => {
-      startTransition(() => {
+      if (actor._parent) {
+        ;(actor._parent as OverlaysActorRef)?.send({ type: 'close', actorId: actor.id })
+      } else {
         actor.send({ type: 'close' })
-      })
+      }
     },
   }), [actor])
 }

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

@@ -44,10 +44,10 @@ const Sizes = {
 }
 
 export const ZIndexes = {
-  compound: 2,
-  edge: 3,
-  element: 4,
-
+  compound: 0,
+  // keep edges and elements in the same layer
+  edge: 2,
+  element: 2,
   max: 5,
 }
 

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

@@ -391,6 +391,16 @@ export function layoutRelationshipsView(data: RelationshipsViewData): LayoutRela
     })
   }
 
+  const edgeCount = g.edgeCount()
+  if (edgeCount > 10) {
+    for (const edge of g.edges()) {
+      g.setEdge(edge, {
+        ...Sizes.edgeLabel,
+        width: edgeCount > 30 ? 800 : 400,
+      })
+    }
+  }
+
   const dagreBounds = applyDagreLayout(g)
 
   // Calculate bounds for all nodes except compounds

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

@@ -5,8 +5,8 @@ import { IconChevronLeft, IconChevronRight, IconX } from '@tabler/icons-react'
 import { Panel, ReactFlowProvider, useReactFlow, useStoreApi } from '@xyflow/react'
 import clsx from 'clsx'
 import { shallowEqual } from 'fast-equals'
-import { AnimatePresence, LayoutGroup, m, useUnmountEffect } from 'framer-motion'
-import { memo, useEffect, useId, useRef } from 'react'
+import { AnimatePresence, LayoutGroup, m } from 'framer-motion'
+import { memo, useEffect, useRef } from 'react'
 import type { SnapshotFrom } from 'xstate'
 import { BaseXYFlow } from '../../base/BaseXYFlow'
 import { useRelationshipsView } from './-useRelationshipsView'
@@ -18,7 +18,6 @@ import { nodeTypes } from './custom/nodeTypes'
 import {
   RelationshipsBrowserActorContext,
   useRelationshipsBrowser,
-  useRelationshipsBrowserActor,
   useRelationshipsBrowserState,
 } from './hooks'
 import { SelectElement } from './SelectElement'
@@ -32,14 +31,14 @@ export function RelationshipsBrowser({ actorRef }: RelationshipsBrowserProps) {
   //   return null
   // }
   const initialRef = useRef<{
-    defaultNodes: Types.Node[]
-    defaultEdges: Types.Edge[]
+    initialNodes: Types.Node[]
+    initialEdges: Types.Edge[]
   }>(null)
 
   if (initialRef.current == null) {
     initialRef.current = {
-      defaultNodes: [],
-      defaultEdges: [],
+      initialNodes: [],
+      initialEdges: [],
     }
   }
 
@@ -85,6 +84,7 @@ const RelationshipsBrowserXYFlow = memo(() => {
       className={clsx(isActive ? 'initialized' : 'not-initialized')}
       nodeTypes={nodeTypes}
       edgeTypes={edgeTypes}
+      fitView={false}
       fitViewPadding={ViewPadding}
       onNodeClick={useCallbackRef((e, node) => {
         e.stopPropagation()
@@ -111,8 +111,16 @@ const RelationshipsBrowserXYFlow = memo(() => {
       onEdgesChange={useCallbackRef((changes) => {
         browser.send({ type: 'xyflow.applyEdgeChanges', changes })
       })}
+      onEdgeMouseEnter={useCallbackRef((_event, edge) => {
+        browser.send({ type: 'xyflow.edgeMouseEnter', edge })
+      })}
+      onEdgeMouseLeave={useCallbackRef((_event, edge) => {
+        browser.send({ type: 'xyflow.edgeMouseLeave', edge })
+      })}
+      onSelectionChange={useCallbackRef((params) => {
+        browser.send({ type: 'xyflow.selectionChange', ...params })
+      })}
       nodesDraggable={false}
-      fitView={false}
       pannable
       zoomable
     >