@likec4/diagram 1.20.3 → 1.21.1

package/src/overlays/element-details/TabPanelRelationships.tsx

@@ -1,12 +1,9 @@
 import { type DiagramView, type Fqn, type LikeC4Model, nameFromFqn } from '@likec4/core'
 import { Box, Group, Paper, Stack, Text, ThemeIcon } from '@mantine/core'
-import { useId } from '@mantine/hooks'
 import { IconArrowRight, IconInfoCircle } from '@tabler/icons-react'
 import { useActorRef } from '@xstate/react'
-import { LayoutGroup } from 'framer-motion'
-import { memo, useState } from 'react'
+import { useState } from 'react'
 import { unique } from 'remeda'
-import { DiagramFeatures, useEnabledFeature } from '../../context'
 import { relationshipsBrowserActor } from '../relationships-browser/actor'
 import { RelationshipsBrowser } from '../relationships-browser/RelationshipsBrowser'
 import * as css from './TabPanelRelationships.css'
@@ -22,7 +19,6 @@ export function TabPanelRelationships({
   node,
   element,
 }: RelationshipsTabPanelProps) {
-  const layoutId = useId()
   const [scope, setScope] = useState<'global' | 'view'>('view')
 
   const incoming = [...element.incoming()].map(r => r.id)
@@ -76,53 +72,7 @@ export function TabPanelRelationships({
       )}
 
       <Box className={css.xyflow}>
-        <LayoutGroup id={layoutId}>
-          <EmbeddedRelationshipsBrowser subjectId={element.id} currentView={currentView} />
-          {
-            /* <RelationshipsXYFlow
-            subjectId={element.id}
-            bounds={bounds}
-            nodes={nodes}
-            edges={edges}
-            view={currentView}
-            elementsSelectable={false}
-          >
-            <Panel position="top-left" className={css.panelScope}>
-              <SegmentedControl
-                size="xs"
-                withItemsBorders={false}
-                value={scope}
-                onChange={setScope as any}
-                data={[
-                  { label: 'Global', value: 'global' },
-                  { label: 'View', value: 'view' },
-                ]}
-              />
-            </Panel>
-            {enableRelationshipBrowser && (
-              <Panel position="top-right">
-                <Button
-                  size="compact-sm"
-                  variant="default"
-                  fz={'xs'}
-                  fw={500}
-                  rightSection={<IconExternalLink stroke={1.6} style={{ width: 16 }} />}
-                  onClick={(e) => {
-                    e.stopPropagation()
-                    overlay.close(() => {
-                      overlay.openOverlay({
-                        relationshipsOf: element.id,
-                      })
-                    })
-                  }}
-                >
-                  Open
-                </Button>
-              </Panel>
-            )}
-          </RelationshipsXYFlow> */
-          }
-        </LayoutGroup>
+        <EmbeddedRelationshipsBrowser subjectId={element.id} currentView={currentView} />
       </Box>
     </Stack>
   )
@@ -192,26 +142,14 @@ function RelationshipsStat({
   )
 }
 
-const EmbeddedRelationshipsBrowser = memo<{ subjectId: Fqn; currentView: DiagramView }>(
-  ({ subjectId, currentView }) => {
-    const actor = useActorRef(relationshipsBrowserActor, {
-      input: {
-        subject: subjectId,
-        scope: currentView,
-        closeable: false,
-        enableNavigationMenu: false,
-      },
-    })
-
-    return (
-      <DiagramFeatures
-        overrides={{
-          enableRelationshipBrowser: false,
-          enableNavigateTo: false,
-        }}>
-        <RelationshipsBrowser actorRef={actor} />
-      </DiagramFeatures>
-    )
-  },
-  (prev, next) => prev.subjectId === next.subjectId,
-)
+const EmbeddedRelationshipsBrowser = ({ subjectId, currentView }: { subjectId: Fqn; currentView: DiagramView }) => {
+  const actor = useActorRef(relationshipsBrowserActor, {
+    input: {
+      subject: subjectId,
+      scope: currentView,
+      closeable: false,
+      enableNavigationMenu: false,
+    },
+  })
+  return <RelationshipsBrowser actorRef={actor} />
+}

package/src/overlays/overlay/Overlay.tsx

@@ -35,7 +35,7 @@ export const Overlay = forwardRef<HTMLDialogElement, OverlayProps>(({ children,
   useLayoutEffect(() => {
     const cancel = (e: Event) => {
       e.preventDefault()
-      close()
+      onCloseRef.current()
     }
     dialogRef.current?.addEventListener('cancel', cancel, { capture: true })
     return () => {

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

@@ -1,4 +1,4 @@
-import type { Color, DiagramNode, Fqn, RelationId, RelationshipLineType, ViewId } from '@likec4/core'
+import type { Color, DiagramNode, Fqn, IconUrl, RelationId, RelationshipLineType, ViewId } from '@likec4/core'
 import type { Base, NonOptional, ReactFlowEdge, ReactFlowNode } from '../../base/types'
 
 export namespace RelationshipDetailsTypes {
@@ -27,7 +27,7 @@ export namespace RelationshipDetailsTypes {
     >
     & {
       fqn: Fqn
-      icon: string | null
+      icon: IconUrl
       ports: Ports
     }
   >
@@ -45,7 +45,7 @@ export namespace RelationshipDetailsTypes {
     & {
       fqn: Fqn
       depth: number
-      icon: string | null
+      icon?: IconUrl
       ports: Ports
     }
   >

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

@@ -115,7 +115,7 @@ function nodeData(
     description: diagramNode?.description ?? element.description,
     color: diagramNode?.color ?? ancestor?.color ?? element.color,
     shape: diagramNode?.shape ?? element.shape,
-    icon: diagramNode?.icon ?? element.icon,
+    icon: diagramNode?.icon ?? element.icon ?? 'none',
     style: diagramNode?.style ?? element.$element.style ?? {},
     navigateTo: diagramNode?.navigateTo ?? first(element.scopedViews().take(1).toArray())?.id ?? null,
     width: 0,

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

@@ -5,7 +5,7 @@ import { IconChevronLeft, IconChevronRight, IconX } from '@tabler/icons-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 { AnimatePresence, m } from 'framer-motion'
 import { memo, useEffect, useRef } from 'react'
 import type { SnapshotFrom } from 'xstate'
 import { BaseXYFlow } from '../../base/BaseXYFlow'
@@ -83,51 +83,49 @@ const RelationshipsBrowserXYFlow = memo(() => {
   // useLifecycleLogger('RelationshipsBrowserXYFlow.edges', [edges])
 
   return (
-    <LayoutGroup>
-      <BaseXYFlow<Types.Node, Types.Edge>
-        id="relationships-browser"
-        nodes={nodes}
-        edges={edges}
-        className={clsx(initialized && isActive ? 'initialized' : 'not-initialized')}
-        nodeTypes={nodeTypes}
-        edgeTypes={edgeTypes}
-        fitViewPadding={ViewPadding}
-        onInit={useCallbackRef((instance) => {
-          browser.send({ type: 'xyflow.init', instance, store: xystore })
-        })}
-        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' })
-        })}
-        onDoubleClick={useCallbackRef(e => {
-          e.stopPropagation()
-          browser.send({ type: 'xyflow.paneDblClick' })
-        })}
-        onViewportResize={useCallbackRef(() => {
-          browser.send({ type: 'xyflow.resized' })
-        })}
-        onNodesChange={useCallbackRef((changes) => {
-          browser.send({ type: 'xyflow.applyNodeChages', changes })
-        })}
-        onEdgesChange={useCallbackRef((changes) => {
-          browser.send({ type: 'xyflow.applyEdgeChages', changes })
-        })}
-        nodesDraggable={false}
-        fitView={false}
-        pannable
-        zoomable
-      >
-        {initialized && <RelationshipsBrowserInner />}
-      </BaseXYFlow>
-    </LayoutGroup>
+    <BaseXYFlow<Types.Node, Types.Edge>
+      id="relationships-browser"
+      nodes={nodes}
+      edges={edges}
+      className={clsx(initialized && isActive ? 'initialized' : 'not-initialized')}
+      nodeTypes={nodeTypes}
+      edgeTypes={edgeTypes}
+      fitViewPadding={ViewPadding}
+      onInit={useCallbackRef((instance) => {
+        browser.send({ type: 'xyflow.init', instance, store: xystore })
+      })}
+      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' })
+      })}
+      onDoubleClick={useCallbackRef(e => {
+        e.stopPropagation()
+        browser.send({ type: 'xyflow.paneDblClick' })
+      })}
+      onViewportResize={useCallbackRef(() => {
+        browser.send({ type: 'xyflow.resized' })
+      })}
+      onNodesChange={useCallbackRef((changes) => {
+        browser.send({ type: 'xyflow.applyNodeChages', changes })
+      })}
+      onEdgesChange={useCallbackRef((changes) => {
+        browser.send({ type: 'xyflow.applyEdgeChages', changes })
+      })}
+      nodesDraggable={false}
+      fitView={false}
+      pannable
+      zoomable
+    >
+      {initialized && <RelationshipsBrowserInner />}
+    </BaseXYFlow>
   )
 })
 
@@ -167,15 +165,6 @@ const RelationshipsBrowserInner = memo(() => {
   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

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

@@ -1,4 +1,13 @@
-import type { Color, DiagramNode, Fqn, NonEmptyArray, RelationId, RelationshipLineType, ViewId } from '@likec4/core'
+import type {
+  Color,
+  DiagramNode,
+  Fqn,
+  IconUrl,
+  NonEmptyArray,
+  RelationId,
+  RelationshipLineType,
+  ViewId,
+} from '@likec4/core'
 import type { Base, NonOptional, ReactFlowEdge, ReactFlowNode } from '../../base/types'
 
 export namespace RelationshipsBrowserTypes {
@@ -21,6 +30,7 @@ export namespace RelationshipsBrowserTypes {
         | 'description'
         | 'color'
         | 'shape'
+        | 'style'
         | 'width'
         | 'height'
         | 'navigateTo'
@@ -48,7 +58,7 @@ export namespace RelationshipsBrowserTypes {
       column: Column
       fqn: Fqn
       depth: number
-      icon: string | null
+      icon: IconUrl
       ports: Ports
     }
   >

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

@@ -21,6 +21,7 @@ import {
   fromPromise,
   raise,
   setup,
+  stopChild,
 } from 'xstate'
 import { Base } from '../../base'
 import { MinZoom, ZIndexes } from '../../base/const'
@@ -145,7 +146,6 @@ export const relationshipsBrowserActor = setup({
   },
   guards: {
     'enable: navigate.to': () => true,
-    'closeable': ({ context }) => context.closeable,
   },
   actors: {
     layouter: fromPromise<{
@@ -167,8 +167,6 @@ export const relationshipsBrowserActor = setup({
       } = input
       let {
         nodes: currentNodes,
-        setNodes,
-        setEdges,
         width,
         height,
       } = xystore.getState()
@@ -275,7 +273,7 @@ export const relationshipsBrowserActor = setup({
         nextviewport.zoom,
       )
       // allow framer to render
-      await delay(180)
+      await delay(175)
       next.xynodes = next.xynodes.map(Base.setDimmed(false))
 
       if (signal.aborted) {
@@ -431,18 +429,21 @@ export const relationshipsBrowserActor = setup({
           ],
         },
         'close': {
-          guard: 'closeable',
           target: 'closed',
         },
       },
-      exit: assign({
-        initialized: false,
-        xyflow: null,
-        xystore: null,
-      }),
     },
     'closed': {
+      id: 'closed',
       type: 'final',
+      entry: [
+        stopChild('layouter'),
+        assign({
+          initialized: false,
+          xyflow: null,
+          xystore: null,
+        }),
+      ],
     },
   },
   on: {

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

@@ -119,7 +119,7 @@ export function viewToNodesEdge(
               shape: node.shape,
               style: node.style,
               depth: node.depth ?? 0,
-              icon: node.icon ?? null,
+              icon: node.icon ?? 'none',
               ports: node.ports,
               fqn,
               ...navigateTo,
@@ -146,6 +146,7 @@ export function viewToNodesEdge(
               shape: node.shape,
               icon: node.icon ?? 'none',
               ports: node.ports,
+              style: node.style,
               ...navigateTo,
             },
           },

package/dist/hooks/useCurrentViewId.js

@@ -1,8 +0,0 @@
-import { useDiagramContext } from "./useDiagramContext.js";
-const selectViewId = (state) => state.view.id;
-function useCurrentViewId() {
-  return useDiagramContext(selectViewId);
-}
-export {
-  useCurrentViewId
-};