@likec4/diagram 1.20.1 → 1.20.2

package/src/likec4diagram/useViewToNodesEdges.ts

@@ -137,6 +137,7 @@ function viewToNodesEdge(opts: {
       style: node.style,
       icon: node.icon ?? null,
       position: node.position,
+      isMultiple: node.style?.multiple ?? false,
     } satisfies Types.LeafNodeData
 
     if (node.kind === ElementKind.Group) {

package/src/overlays/element-details/ElementDetailsCard.css.ts

@@ -275,34 +275,6 @@ export const propertyLabel = style({
   justifySelf: 'end',
 })
 
-export const elementLink = style({
-  transition: transitions.fast,
-  border: `1px dashed ${mantine.colors.defaultBorder}`,
-  borderRadius: mantine.radius.sm,
-  minHeight: 30,
-  padding: '3px 16px 3px 3px',
-  cursor: 'pointer',
-  color: mantine.colors.gray[7],
-  ':hover': {
-    transitionTimingFunction: easings.out,
-    borderStyle: 'solid',
-    color: mantine.colors.defaultColor,
-    background: mantine.colors.defaultHover,
-  },
-  selectors: {
-    [`${whereDark} &`]: {
-      color: mantine.colors.dark[1],
-    },
-  },
-})
-globalStyle(`${elementLink} > *`, {
-  transition: transitions.fast,
-})
-globalStyle(`${elementLink}:hover > *`, {
-  transitionTimingFunction: easings.out,
-  transform: 'translateX(1px)',
-})
-
 export const resizeHandle = style({
   position: 'absolute',
   width: 14,

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

@@ -3,7 +3,6 @@ import {
   type Element,
   type Fqn,
   type LikeC4View,
-  type Link,
   ComputedNode,
   ComputedView,
   isDeploymentView,
@@ -43,6 +42,7 @@ import clsx from 'clsx'
 import { type PanInfo, m, useDragControls, useMotionValue } from 'framer-motion'
 import { type PropsWithChildren, memo, useCallback, useLayoutEffect, useRef } from 'react'
 import { clamp, isNullish, map, only, partition, pipe } from 'remeda'
+import { Link } from '../../base'
 import { IconRenderer, IfEnabled } from '../../context'
 import { useUpdateEffect } from '../../hooks'
 import { useDiagram } from '../../hooks/useDiagram'
@@ -424,7 +424,7 @@ export const ElementDetailsCard = memo(({ fqn }: ElementDetailsCardProps) => {
                       <>
                         <PropertyLabel>links</PropertyLabel>
                         <Stack gap={'xs'} align="flex-start">
-                          {elementModel.links.map((link, i) => <ElementLink key={i} value={link} />)}
+                          {elementModel.links.map((link, i) => <Link key={i} value={link} />)}
                         </Stack>
                       </>
                     )}
@@ -601,54 +601,6 @@ function ElementProperty({
   )
 }
 
-function ElementLink({
-  value,
-}: {
-  value: Link
-}) {
-  const url = new URL(value.url, window.location.href).toString()
-  return (
-    <CopyButton value={url}>
-      {({ copied, copy }) => (
-        <Anchor href={url} target="_blank" underline="never" className={css.elementLink}>
-          <Group gap={4} align="center" wrap="nowrap">
-            <ActionIcon
-              tabIndex={-1}
-              size={24}
-              variant={copied ? 'light' : 'subtle'}
-              color={copied ? 'teal' : 'gray'}
-              onClick={e => {
-                e.stopPropagation()
-                e.preventDefault()
-                copy()
-              }}
-            >
-              {copied ? <IconCheck /> : <IconCopy style={{ width: '65%', opacity: 0.8 }} />}
-            </ActionIcon>
-            <Box flex={1}>
-              <Text fz={'sm'} truncate lh={1.3} fw={value.title ? 500 : 400}>
-                {value.title || url}
-              </Text>
-              {value.title && (
-                <Text component="div" fz={10} c={'dimmed'} lh={1.2} truncate>
-                  {url}
-                </Text>
-              )}
-            </Box>
-          </Group>
-        </Anchor>
-      )}
-    </CopyButton>
-  )
-  // <Anchor href={value.url} fz={'sm'}>
-  //   {value.title || url}
-  // </Anchor><Button variant='default' size='sm'>
-  //     {value.title || value.url}
-  //   </Button>
-  //  </Box>
-  // )
-}
-
 function ElementMetata({
   value,
 }: {

package/src/overlays/relationship-details/RelationshipDetails.tsx

@@ -17,7 +17,7 @@ import { nodeTypes } from './custom/nodeTypes'
 import {
   RelationshipDetailsActorContext,
   useRelationshipDetails,
-  useRelationshipsBrowserState,
+  useRelationshipDetailsState,
 } from './hooks'
 import { SelectEdge } from './SelectEdge'
 import { useLayoutedDetails } from './useLayoutedDetails'
@@ -63,7 +63,7 @@ const RelationshipDetailsInner = memo(() => {
     edgeId,
     view,
     initialized,
-  } = useRelationshipsBrowserState(selector)
+  } = useRelationshipDetailsState(selector)
 
   const {
     edge,
@@ -123,9 +123,9 @@ const RelationshipDetailsInner = memo(() => {
           e.stopPropagation()
           browser.send({ type: 'xyflow.paneClick' })
         })}
-        onViewportResize={() => {
+        onViewportResize={useCallbackRef(() => {
           browser.send({ type: 'xyflow.resized' })
-        }}
+        })}
         nodesDraggable={false}
         fitView={false}
         pannable

package/src/overlays/relationship-details/custom/ElementActions.tsx

@@ -11,11 +11,10 @@ type ElementActionsProps = NodeProps<Types.ElementNodeData>
 export const ElementActions = (props: ElementActionsProps) => {
   const { enableNavigateTo } = useEnabledFeature('NavigateTo')
   const diagram = useDiagram()
-  const browser = useRelationshipDetails()
 
   const buttons = [] as ElementActionButtons.Item[]
 
-  const { navigateTo, fqn } = props.data
+  const { navigateTo } = props.data
   if (navigateTo && enableNavigateTo) {
     buttons.push({
       key: 'navigate',

package/src/overlays/relationship-details/custom/edgeTypes.tsx

@@ -36,11 +36,6 @@ export const edgeTypes = {
               }} />
           )}
         </EdgeLabel>
-        {
-          /* <EdgeLabel {...props}>
-
-        </EdgeLabel> */
-        }
       </EdgeContainer>
     )
   }),

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

@@ -7,21 +7,21 @@ import type { RelationshipDetailsActorRef, RelationshipDetailsSnapshot } from '.
 
 export const RelationshipDetailsActorContext = createContext<RelationshipDetailsActorRef | null>(null)
 
-export function useRelationshipsBrowserActor() {
-  return nonNullable(useContext(RelationshipDetailsActorContext), 'No RelationshipsBrowserActorContext')
+export function useRelationshipDetailsActor() {
+  return nonNullable(useContext(RelationshipDetailsActorContext), 'No RelationshipDetailsActorContext')
 }
 
-export function useRelationshipsBrowserState<T>(
+export function useRelationshipDetailsState<T = unknown>(
   selector: (state: RelationshipDetailsSnapshot) => T,
-  compare: (a: T, b: T) => boolean = shallowEqual,
+  compare: (a: NoInfer<T>, b: NoInfer<T>) => boolean = shallowEqual,
 ) {
   const select = useCallbackRef(selector)
-  const actor = useRelationshipsBrowserActor()
+  const actor = useRelationshipDetailsActor()
   return useSelector(actor, select, compare)
 }
 
 export function useRelationshipDetails() {
-  const actor = useRelationshipsBrowserActor()
+  const actor = useRelationshipDetailsActor()
   const [, startTransition] = useTransition()
   return useMemo(() => ({
     getState: () => actor.getSnapshot().context,

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

@@ -290,8 +290,8 @@ function layout(
       type: 'relationship',
       source: source.id,
       target: target.id,
-      sourceHandle: target.id,
-      targetHandle: source.id,
+      sourceHandle: source.id + '_out' + (source.data.ports.out.length - 1),
+      targetHandle: target.id + '_in' + (target.data.ports.in.length - 1),
       data: {
         relationId: relation.id,
         color: relation.color,
@@ -309,15 +309,12 @@ function layout(
   const nodebounds = applyDagreLayout(ctx.g)
 
   // Sort ports
-  const sortedPorts = (ports: string[]) => {
-    if (ports.length < 2) {
-      return ports
-    }
+  const sortedPorts = (nodeId: string, type: 'in' | 'out', ports: string[]) => {
     return pipe(
       ports,
-      map(port => {
+      map((port, index) => {
         return {
-          port,
+          port: nodeId + '_' + type + index,
           topY: nodebounds(port).position.y,
         }
       }),
@@ -328,8 +325,8 @@ function layout(
 
   const xynodes = [...ctx.xynodes.values()].map((node) => {
     const { position, width, height } = nodebounds(node.id, node.parentId)
-    node.data.ports.in = sortedPorts(node.data.ports.in)
-    node.data.ports.out = sortedPorts(node.data.ports.out)
+    node.data.ports.in = sortedPorts(node.id, 'in', node.data.ports.in)
+    node.data.ports.out = sortedPorts(node.id, 'out', node.data.ports.out)
     if (node.type === 'element') {
       node.data.width = width
       node.data.height = height

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

@@ -256,6 +256,8 @@ export namespace LayoutRelationshipsViewResult {
     ports: RelationshipsBrowserTypes.Ports
   }
   export type Edge = DiagramEdge & {
+    sourceHandle: string
+    targetHandle: string
     // column: RelationshipsBrowserTypes.Column
   }
 }
@@ -271,6 +273,8 @@ export function layoutRelationshipsView(data: RelationshipsViewData): LayoutRela
     name: string
     source: string // node id
     target: string // node id
+    sourceHandle: string
+    targetHandle: string
     relations: RelationshipModel[]
   }>
 
@@ -319,7 +323,9 @@ export function layoutRelationshipsView(data: RelationshipsViewData): LayoutRela
       edges.push({
         name,
         source: source.id,
+        sourceHandle: source.id + '_out' + (g.node(source.id).outPorts.length - 1),
         target: target.id,
+        targetHandle: target.id + '_in' + (g.node(target.id).inPorts.length - 1),
         relations: map(grouped, prop('relation')),
       })
     }),
@@ -446,15 +452,12 @@ export function layoutRelationshipsView(data: RelationshipsViewData): LayoutRela
   }
 
   // Sort ports in subject vertically
-  const sortedPorts = (ports: string[]) => {
-    if (ports.length < 2) {
-      return ports
-    }
+  const sortedPorts = (nodeId: string, type: 'in' | 'out', ports: string[]) => {
     return pipe(
       ports,
-      map(port => {
+      map((port, index) => {
         return {
-          port,
+          port: nodeId + '_' + type + index,
           topY: nodeBounds(port).position.y,
         }
       }),
@@ -462,7 +465,6 @@ export function layoutRelationshipsView(data: RelationshipsViewData): LayoutRela
       map(prop('port')),
     )
   }
-
   // In case we got negative positions
   let minX = 0
   let minY = 0
@@ -573,16 +575,16 @@ export function layoutRelationshipsView(data: RelationshipsViewData): LayoutRela
       height,
       column,
       ports: {
-        in: sortedPorts(inPorts),
-        out: sortedPorts(outPorts),
+        in: sortedPorts(id, 'in', inPorts),
+        out: sortedPorts(id, 'out', outPorts),
       },
     }
   })
 
   return {
     bounds: {
-      x: minX,
-      y: minY,
+      x: Math.min(minX, 0),
+      y: Math.min(minY, 0),
       width: g.graph().width ?? 100,
       height: g.graph().height ?? 100,
     },
@@ -593,7 +595,7 @@ export function layoutRelationshipsView(data: RelationshipsViewData): LayoutRela
       if (!ename) {
         return acc
       }
-      const { name, source, target, relations } = find(edges, e => e.name === ename)!
+      const { name, source, target, relations, sourceHandle, targetHandle } = find(edges, e => e.name === ename)!
       const onlyRelation = only(relations)
       const label = onlyRelation?.title ?? 'untitled'
       const isMultiple = relations.length > 1
@@ -607,7 +609,9 @@ export function layoutRelationshipsView(data: RelationshipsViewData): LayoutRela
       acc.push({
         id: name as EdgeId,
         source: source as NodeId,
+        sourceHandle,
         target: target as NodeId,
+        targetHandle,
         label: isMultiple ? `${relations.length} relationships` : label,
         relations: relations.map(r => r.id),
         parent: null,

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