@likec4/diagram 1.28.0 → 1.29.0

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/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,

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

@@ -6,7 +6,7 @@ import { shallowEqual } from 'fast-equals'
 import { type PropsWithChildren, useEffect } from 'react'
 import { useDiagramEventHandlersRef } from '../context/DiagramEventHandlers'
 import { DiagramFeatures, useEnabledFeatures } from '../context/DiagramFeatures'
-import { DiagramActorSafeContext } from '../hooks/safeContext'
+import { DiagramActorContextProvider } from '../hooks/safeContext'
 import { useUpdateEffect } from '../hooks/useUpdateEffect'
 import type { Types } from '../likec4diagram/types'
 import { useViewToNodesEdges } from '../likec4diagram/useViewToNodesEdges'
@@ -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) => {
@@ -89,10 +92,10 @@ export function DiagramActorProvider({
   const toggledFeatures = useSelector(actorRef, selectToggledFeatures, shallowEqual)
 
   return (
-    <DiagramActorSafeContext value={actorRef}>
+    <DiagramActorContextProvider value={actorRef}>
       <DiagramFeatures overrides={toggledFeatures}>
         {children}
       </DiagramFeatures>
-    </DiagramActorSafeContext>
+    </DiagramActorContextProvider>
   )
 }

package/src/state/diagram-machine.ts

@@ -13,6 +13,7 @@ import {
   getBBoxCenter,
   getParallelStepsPrefix,
   invariant,
+  isStepEdgeId,
   nonexhaustive,
   nonNullable,
 } from '@likec4/core'
@@ -24,7 +25,7 @@ import {
   useStoreApi,
 } from '@xyflow/react'
 import { type EdgeChange, type NodeChange, type Rect, type Viewport, nodeToRect } from '@xyflow/system'
-import { clamp, first, hasAtLeast, prop, reduce } from 'remeda'
+import { clamp, first, hasAtLeast, prop } from 'remeda'
 import {
   type ActorLogicFrom,
   type ActorRef,
@@ -199,6 +200,7 @@ export const diagramMachine = setup({
     'enabled: FitView': ({ context }) => context.features.enableFitView,
     'enabled: FocusMode': ({ context }) => context.features.enableFocusMode,
     'enabled: Readonly': ({ context }) => context.features.enableReadOnly,
+    'enabled: RelationshipDetails': ({ context }) => context.features.enableRelationshipDetails,
     'not readonly': ({ context }) => !context.features.enableReadOnly,
     'is dynamic view': ({ context }) => context.view.__ === 'dynamic',
     'is another view': ({ context, event }) => {
@@ -227,6 +229,10 @@ export const diagramMachine = setup({
       assertEvent(event, 'xyflow.nodeClick')
       return context.xyedges.some(e => e.source === event.node.id || e.target === event.node.id)
     },
+    'click: selected edge': ({ event }) => {
+      assertEvent(event, 'xyflow.edgeClick')
+      return event.edge.selected === true || event.edge.data.active === true
+    },
   },
   actions: {
     'trigger:NavigateTo': (_, _params: { viewId: ViewId }) => {
@@ -529,7 +535,6 @@ export const diagramMachine = setup({
             type: 'xyflow:fitDiagram',
             params: { duration: 0 },
           },
-          'startSyncLayout',
           assign(({ context }) => ({
             navigationHistory: {
               currentIndex: 0,
@@ -540,6 +545,7 @@ export const diagramMachine = setup({
               }],
             },
           })),
+          'startSyncLayout',
         ],
         target: 'ready',
       }, {
@@ -767,6 +773,26 @@ export const diagramMachine = setup({
               }),
               target: 'focused',
             },
+            'xyflow.edgeClick': [{
+              guard: and([
+                'is dynamic view',
+                'click: selected edge',
+              ]) as any,
+              actions: raise(({ event }) => ({
+                type: 'walkthrough.start',
+                stepId: event.edge.id as StepEdgeId,
+              })),
+            }, {
+              guard: and([
+                'enabled: RelationshipDetails',
+                'click: selected edge',
+              ]) as any,
+              actions: sendTo(({ system }) => typedSystem(system).overlaysActorRef!, ({ context, event }) => ({
+                type: 'open.relationshipDetails',
+                viewId: context.view.id,
+                edgeId: event.edge.id as EdgeId,
+              })),
+            }],
           },
         },
         focused: {
@@ -779,18 +805,18 @@ export const diagramMachine = setup({
             spawnChild('hotkeyActorLogic', { id: 'hotkey' }),
             'xyflow:fitFocusedBounds',
           ],
-          exit: enqueueActions(({ enqueue, context }) => {
+          exit: enqueueActions(({ enqueue, context, event }) => {
             enqueue.stopChild('hotkey')
             if (context.viewportBeforeFocus) {
               enqueue({ type: 'xyflow:setViewport', params: { viewport: context.viewportBeforeFocus } })
             } else {
               enqueue({ type: 'xyflow:fitDiagram' })
             }
-            enqueue.assign((s) => ({
-              ...unfocusNodesEdges(s),
+            enqueue.assign({
+              ...unfocusNodesEdges({ context, event }),
               viewportBeforeFocus: null,
               focusedNode: null,
-            }))
+            })
           }),
           on: {
             'xyflow.nodeClick': [
@@ -885,6 +911,23 @@ export const diagramMachine = setup({
                 enqueue('xyflow:fitFocusedBounds')
               }),
             },
+            'xyflow.edgeClick': {
+              actions: [
+                assign(({ event, context }) => {
+                  if (!isStepEdgeId(event.edge.id) || event.edge.id === context.activeWalkthrough?.stepId) {
+                    return {}
+                  }
+                  return {
+                    activeWalkthrough: {
+                      stepId: event.edge.id,
+                      parallelPrefix: getParallelStepsPrefix(event.edge.id),
+                    },
+                  }
+                }),
+                assign(updateActiveWalkthrough),
+                'xyflow:fitFocusedBounds',
+              ],
+            },
             'notations.unhighlight': {
               actions: assign(s => ({
                 ...updateActiveWalkthrough(s),
@@ -947,13 +990,11 @@ export const diagramMachine = setup({
                   },
                 },
               })
-              enqueue.raise({ type: 'fitDiagram' }, { id: 'fitDiagram', delay: 80 })
             } else {
               enqueue({
                 type: 'xyflow:setViewportCenter',
                 params: getBBoxCenter(event.view.bounds),
               })
-              enqueue.raise({ type: 'fitDiagram', duration: 200 }, { id: 'fitDiagram', delay: 25 })
             }
             enqueue.assign(updateNavigationHistory)
             enqueue.assign({
@@ -961,6 +1002,7 @@ export const diagramMachine = setup({
               lastOnNavigate: null,
             })
             enqueue('startSyncLayout')
+            enqueue.raise({ type: 'fitDiagram' }, { id: 'fitDiagram', delay: 25 })
           }),
           target: '#idle',
         },