@likec4/diagram 1.20.1 → 1.20.3

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

@@ -2,15 +2,17 @@ import type { Fqn } from '@likec4/core'
 import { ActionIcon, Box, 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 { Panel, ReactFlowProvider, useStoreApi } from '@xyflow/react'
 import clsx from 'clsx'
+import { shallowEqual } from 'fast-equals'
 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'
-import type { RelationshipsBrowserTypes as Types } from './_types'
+import type { RelationshipsBrowserTypes, RelationshipsBrowserTypes as Types } from './_types'
 import type { RelationshipsBrowserActorRef } from './actor'
+import { ViewPadding } from './const'
 import { edgeTypes } from './custom/edgeTypes'
 import { nodeTypes } from './custom/nodeTypes'
 import {
@@ -29,69 +31,56 @@ 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: [],
     }
   }
 
   return (
     <RelationshipsBrowserActorContext.Provider value={actorRef}>
       <ReactFlowProvider {...initialRef.current}>
-        <RelationshipsBrowserInner />
+        <RelationshipsBrowserXYFlow />
       </ReactFlowProvider>
     </RelationshipsBrowserActorContext.Provider>
   )
 }
 
 const selector = (state: SnapshotFrom<RelationshipsBrowserActorRef>) => ({
-  subjectId: state.context.subject,
   initialized: state.context.initialized,
-  scope: state.context.scope,
+  isActive: state.hasTag('active'),
   nodes: state.context.xynodes,
   edges: state.context.xyedges,
-  closeable: state.context.closeable,
-  enableNavigationMenu: state.context.enableNavigationMenu,
 })
+const selectorEq = (a: ReturnType<typeof selector>, b: ReturnType<typeof selector>) =>
+  a.initialized === b.initialized &&
+  a.isActive === b.isActive &&
+  shallowEqual(a.nodes, b.nodes) &&
+  shallowEqual(a.edges, b.edges)
 
-const RelationshipsBrowserInner = memo(() => {
+const RelationshipsBrowserXYFlow = memo(() => {
+  const xystore = useStoreApi<RelationshipsBrowserTypes.Node, RelationshipsBrowserTypes.Edge>()
   const browser = useRelationshipsBrowser()
   const {
-    subjectId,
     initialized,
-    scope,
+    isActive,
     nodes,
     edges,
-    closeable,
-    enableNavigationMenu,
-  } = useRelationshipsBrowserState(selector)
-
-  const layouted = useRelationshipsView(subjectId)
-  const [historySubjectId, historyOps, { history, current }] = useStateHistory(subjectId)
-
-  useEffect(() => {
-    if (historySubjectId !== subjectId) {
-      historyOps.set(subjectId)
-    }
-  }, [subjectId])
-
-  useEffect(() => {
-    if (historySubjectId !== subjectId) {
-      browser.navigateTo(historySubjectId)
-    }
-  }, [historySubjectId])
+  } = useRelationshipsBrowserState(
+    selector,
+    selectorEq,
+  )
 
-  useEffect(() => {
-    browser.send({ type: 'update.view', layouted })
-  }, [layouted])
-
-  const hasStepBack = current > 0
-  const hasStepForward = current + 1 < history.length
+  // useLifecycleLogger('RelationshipsBrowserXYFlow.browser', [browser])
+  // useLifecycleLogger('RelationshipsBrowserXYFlow.xystore', [xystore])
+  // useLifecycleLogger('RelationshipsBrowserXYFlow.initialized, isActive', [initialized, isActive])
+  // useLifecycleLogger('RelationshipsBrowserXYFlow.nodes', [nodes])
+  // useLifecycleLogger('RelationshipsBrowserXYFlow.edges', [edges])
 
   return (
     <LayoutGroup>
@@ -99,12 +88,12 @@ const RelationshipsBrowserInner = memo(() => {
         id="relationships-browser"
         nodes={nodes}
         edges={edges}
-        className={clsx(initialized ? 'initialized' : 'not-initialized')}
+        className={clsx(initialized && isActive ? 'initialized' : 'not-initialized')}
         nodeTypes={nodeTypes}
         edgeTypes={edgeTypes}
-        fitViewPadding={0.05}
+        fitViewPadding={ViewPadding}
         onInit={useCallbackRef((instance) => {
-          browser.send({ type: 'xyflow.init', instance })
+          browser.send({ type: 'xyflow.init', instance, store: xystore })
         })}
         onNodeClick={useCallbackRef((e, node) => {
           e.stopPropagation()
@@ -122,9 +111,9 @@ const RelationshipsBrowserInner = memo(() => {
           e.stopPropagation()
           browser.send({ type: 'xyflow.paneDblClick' })
         })}
-        onViewportResize={() => {
+        onViewportResize={useCallbackRef(() => {
           browser.send({ type: 'xyflow.resized' })
-        }}
+        })}
         onNodesChange={useCallbackRef((changes) => {
           browser.send({ type: 'xyflow.applyNodeChages', changes })
         })}
@@ -136,36 +125,84 @@ const RelationshipsBrowserInner = memo(() => {
         pannable
         zoomable
       >
-        <TopLeftPanel
-          enableNavigationMenu={enableNavigationMenu}
-          subjectId={subjectId}
-          hasStepBack={hasStepBack}
-          hasStepForward={hasStepForward}
-          onStepBack={() => historyOps.back()}
-          onStepForward={() => historyOps.forward()}
-        />
-        {closeable && (
-          <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>
-        )}
+        {initialized && <RelationshipsBrowserInner />}
       </BaseXYFlow>
     </LayoutGroup>
   )
 })
 
+const selector2 = (state: SnapshotFrom<RelationshipsBrowserActorRef>) => ({
+  subjectId: state.context.subject,
+  closeable: state.context.closeable,
+  enableNavigationMenu: state.context.enableNavigationMenu,
+})
+
+const RelationshipsBrowserInner = memo(() => {
+  const browser = useRelationshipsBrowser()
+  const {
+    subjectId,
+    closeable,
+    enableNavigationMenu,
+  } = useRelationshipsBrowserState(selector2)
+
+  const layouted = useRelationshipsView(subjectId)
+  const [historySubjectId, historyOps, { history, current }] = useStateHistory(subjectId)
+
+  useEffect(() => {
+    if (historySubjectId !== subjectId) {
+      historyOps.set(subjectId)
+    }
+  }, [subjectId])
+
+  useEffect(() => {
+    if (historySubjectId !== subjectId) {
+      browser.navigateTo(historySubjectId)
+    }
+  }, [historySubjectId])
+
+  useEffect(() => {
+    browser.send({ type: 'update.view', layouted })
+  }, [layouted])
+
+  const hasStepBack = current > 0
+  const hasStepForward = current + 1 < history.length
+
+  // useLifecycleLogger('RelationshipsBrowserInner.browser', [browser])
+  // useLifecycleLogger('RelationshipsBrowserInner.layouted', [layouted])
+  // useLifecycleLogger('RelationshipsBrowserInner', [
+  //   historySubjectId,
+  //   subjectId,
+  //   closeable,
+  //   enableNavigationMenu,
+  // ])
+
+  return (
+    <>
+      <TopLeftPanel
+        enableNavigationMenu={enableNavigationMenu}
+        subjectId={subjectId}
+        hasStepBack={hasStepBack}
+        hasStepForward={hasStepForward}
+        onStepBack={() => historyOps.back()}
+        onStepForward={() => historyOps.forward()}
+      />
+      {closeable && (
+        <Panel position="top-right">
+          <ActionIcon
+            variant="default"
+            color="gray"
+            onClick={(e) => {
+              e.stopPropagation()
+              browser.close()
+            }}>
+            <IconX />
+          </ActionIcon>
+        </Panel>
+      )}
+    </>
+  )
+})
+
 type TopLeftPanelProps = {
   enableNavigationMenu: boolean
   subjectId: Fqn

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

@@ -1,4 +1,4 @@
-import type { Color, DiagramNode, Fqn, RelationshipLineType, ViewId } from '@likec4/core'
+import type { Color, DiagramNode, Fqn, NonEmptyArray, RelationId, RelationshipLineType, ViewId } from '@likec4/core'
 import type { Base, NonOptional, ReactFlowEdge, ReactFlowNode } from '../../base/types'
 
 export namespace RelationshipsBrowserTypes {
@@ -79,6 +79,7 @@ export namespace RelationshipsBrowserTypes {
   // Extend the edge types provided by SharedFlowTypes with RelationshipsOfEdgeData
 
   export type EdgeData = Base.EdgeData<{
+    relations: NonEmptyArray<RelationId>
     color: Color | undefined
     label: string | null
     navigateTo: ViewId | null