@likec4/diagram 1.27.1 → 1.27.2

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