@likec4/diagram 1.26.2 → 1.27.1

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

@@ -121,6 +121,7 @@ export function viewToNodesEdge(
               depth: node.depth ?? 0,
               icon: node.icon ?? 'none',
               ports: node.ports,
+              existsInCurrentView: node.existsInCurrentView,
               fqn,
               ...navigateTo,
             },
@@ -147,6 +148,7 @@ export function viewToNodesEdge(
               icon: node.icon ?? 'none',
               ports: node.ports,
               style: node.style,
+              existsInCurrentView: node.existsInCurrentView,
               ...navigateTo,
             },
           },
@@ -171,7 +173,7 @@ export function viewToNodesEdge(
 
     xyedges.push({
       id,
-      type: 'relationships',
+      type: 'relationship',
       source: ns + source,
       target: ns + target,
       sourceHandle: edge.sourceHandle,
@@ -185,16 +187,8 @@ export function viewToNodesEdge(
         color: edge.color ?? 'gray',
         label: edge.label,
         navigateTo: edge.navigateTo ?? null,
-
-        // technology: edge.technology,
-        // navigateTo: edge.navigateTo,
-        // labelBBox: edge.labelBBox ?? null,
-        // points: edge.points,
-        // color: edge.color ?? 'gray',
         line: edge.line ?? 'dashed',
-        // dir: edge.dir ?? 'forward',
-        // head: edge.head ?? 'normal',
-        // tail: edge.tail ?? 'none',
+        existsInCurrentView: edge.existsInCurrentView,
       },
       interactionWidth: 20,
     })

package/src/state/DiagramActorProvider.tsx

@@ -1,21 +1,32 @@
-import type { ViewId } from '@likec4/core'
-import { useCallbackRef } from '@mantine/hooks'
+import type { ViewId, WhereOperator } from '@likec4/core'
+import { useDeepCompareEffect } from '@react-hookz/web'
 import { useActorRef, useSelector } from '@xstate/react'
 import { useStoreApi } from '@xyflow/react'
 import { shallowEqual } from 'fast-equals'
-import { type PropsWithChildren, useEffect, useRef } from 'react'
+import { type PropsWithChildren, useEffect } from 'react'
 import { useDiagramEventHandlersRef } from '../context/DiagramEventHandlers'
 import { DiagramFeatures, useEnabledFeatures } from '../context/DiagramFeatures'
 import { DiagramActorSafeContext } from '../hooks/safeContext'
 import { useUpdateEffect } from '../hooks/useUpdateEffect'
 import type { Types } from '../likec4diagram/types'
+import { useViewToNodesEdges } from '../likec4diagram/useViewToNodesEdges'
 import { type Input, diagramMachine } from './diagram-machine'
-// import { inspector } from './inspector'
 import { syncManualLayoutActorLogic } from './syncManualLayoutActor'
-import type { DiagramActorRef } from './types'
+import type { DiagramActorSnapshot } from './types'
 
-type ActorContextInput = Omit<Input, 'xystore' | 'features'>
-export function DiagramActorProvider({ input, children }: PropsWithChildren<{ input: ActorContextInput }>) {
+const selectToggledFeatures = (state: DiagramActorSnapshot) => state.context.toggledFeatures
+type ActorContextInput = Omit<Input, 'xystore' | 'xynodes' | 'xyedges'>
+export function DiagramActorProvider({
+  input: {
+    view,
+    ...inputs
+  },
+  where,
+  children,
+}: PropsWithChildren<{
+  input: ActorContextInput
+  where?: WhereOperator<string, string> | undefined
+}>) {
   const handlersRef = useDiagramEventHandlersRef()
   const xystore = useStoreApi<Types.Node, Types.Edge>()
 
@@ -45,63 +56,43 @@ export function DiagramActorProvider({ input, children }: PropsWithChildren<{ in
       },
     }),
     {
-      id: `diagram:${input.view.id}`,
+      id: `diagram:${view.id}`,
       systemId: 'diagram',
       // ...inspector,
       input: {
         xystore,
-        ...input,
+        view,
+        ...inputs,
       },
     },
   )
 
-  return (
-    (
-      <DiagramActorSafeContext value={actorRef}>
-        <SyncStore input={input} actorRef={actorRef} />
-        <DiagramActorToggledFeatures actorRef={actorRef}>
-          {children}
-        </DiagramActorToggledFeatures>
-      </DiagramActorSafeContext>
-    )
-  )
-}
-
-const SyncStore = (
-  { input: { view, xyedges, xynodes, ...inputs }, actorRef }: { input: ActorContextInput; actorRef: DiagramActorRef },
-) => {
   const features = useEnabledFeatures()
   useUpdateEffect(() => {
     actorRef.send({ type: 'update.inputs', inputs })
-  }, [actorRef, inputs])
+  }, [inputs])
 
   useEffect(() => {
     actorRef.send({ type: 'update.features', features })
-  }, [actorRef, features])
+  }, [features])
 
-  const frameReq = useRef<number>(null)
+  const { xyedges, xynodes } = useViewToNodesEdges({
+    view,
+    where,
+    nodesSelectable: inputs.nodesSelectable,
+  })
 
-  useUpdateEffect(() => {
-    frameReq.current = requestAnimationFrame(() => {
-      frameReq.current = null
-      actorRef.send({ type: 'update.view', view, xyedges, xynodes })
-    })
-    return () => {
-      if (frameReq.current != null) {
-        cancelAnimationFrame(frameReq.current)
-      }
-      frameReq.current = null
-    }
-  }, [actorRef, view, xyedges, xynodes])
+  useDeepCompareEffect(() => {
+    actorRef.send({ type: 'update.view', view, xyedges, xynodes })
+  }, [view, xyedges, xynodes])
 
-  return null
-}
+  const toggledFeatures = useSelector(actorRef, selectToggledFeatures, shallowEqual)
 
-function DiagramActorToggledFeatures({ children, actorRef }: PropsWithChildren<{ actorRef: DiagramActorRef }>) {
-  const toggledFeatures = useSelector(actorRef, useCallbackRef(s => s.context.toggledFeatures), shallowEqual)
   return (
-    <DiagramFeatures overrides={toggledFeatures}>
-      {children}
-    </DiagramFeatures>
+    <DiagramActorSafeContext value={actorRef}>
+      <DiagramFeatures overrides={toggledFeatures}>
+        {children}
+      </DiagramFeatures>
+    </DiagramActorSafeContext>
   )
 }

package/src/state/assign.ts

@@ -391,8 +391,8 @@ export function updateActiveWalkthrough({ context }: ActionArg): Partial<Diagram
       })
     }),
     xynodes: context.xynodes.map(node => {
-      const active = step.source === node.id || step.target === node.id
-      return Base.setDimmed(node, !active)
+      const dimmed = step.source !== node.id && step.target !== node.id
+      return Base.setDimmed(node, dimmed)
     }),
   }
 }