@likec4/diagram 1.20.1 → 1.20.3

package/src/likec4diagram/custom/nodes/nodeTypes.tsx

@@ -39,7 +39,7 @@ const ElementDetailsButtonWithHandler = ({ fqn, ...props }: NodeProps<Types.Node
 export const nodeTypes = {
   element: customNode<Types.ElementNodeData>((props) => (
     <ElementNodeContainer nodeProps={props}>
-      <ElementShape {...props} />
+      <ElementShape {...props} isMultiple={props.data.isMultiple} />
       <ElementTitle {...props} />
       <ElementActions {...props} />
       <ElementDetailsButtonWithHandler
@@ -53,7 +53,7 @@ export const nodeTypes = {
   )),
   deployment: customNode<Types.DeploymentElementNodeData>((props) => (
     <ElementNodeContainer nodeProps={props}>
-      <ElementShape {...props} />
+      <ElementShape {...props} isMultiple={props.data.isMultiple} />
       <ElementTitle {...props} />
       <DeploymentElementActions {...props} />
       {!!props.data.modelFqn && (

package/src/likec4diagram/types.ts

@@ -32,6 +32,7 @@ export namespace Types {
       >
     >
     & {
+      isMultiple?: boolean | undefined
       icon: string | null
     }
   >

package/src/likec4diagram/ui/diagram-title/DiagramTitlePanel.tsx

@@ -3,10 +3,10 @@ import { useLocalStorage } from '@mantine/hooks'
 import { IconMenu } from '@tabler/icons-react'
 import clsx from 'clsx'
 import { AnimatePresence, m } from 'framer-motion'
+import { Link } from '../../../base'
 import { useDiagramContext } from '../../../hooks/useDiagramContext'
 import type { DiagramContext } from '../../state/machine'
 import * as css from './DiagramTitlePanel.css'
-import { Link } from './Link'
 
 const selector = (s: DiagramContext) => ({
   id: s.view.id,
@@ -150,10 +150,11 @@ export function DiagramTitlePanel() {
               )}
               {links && (
                 <Stack
-                  gap={3}
+                  mt={'xs'}
+                  gap={4}
                   justify="stretch"
                   align="stretch">
-                  {links.map((link) => <Link link={link} key={link.url} />)}
+                  {links.map((link) => <Link value={link} key={link.url} />)}
                 </Stack>
               )}
             </>

package/src/likec4diagram/useLayoutConstraints.ts

@@ -60,42 +60,46 @@ abstract class Rect {
     }
   }
   protected abstract parent: Compound | null
-}
-
-class Compound extends Rect {
-  public readonly children = [] as Rect[]
 
   constructor(
     xynode: InternalNode,
-    protected readonly parent: Compound | null = null,
+    parent: Compound | null = null,
   ) {
-    super()
     this.id = xynode.id
 
+    this.positionAbsolute = !parent ? xynode.position : {
+      x: xynode.position.x + parent.minX,
+      y: xynode.position.y + parent.minY,
+    }
+
+    const { width, height } = getNodeDimensions(xynode)
+
+    this.maxX = this.minX + Math.ceil(width)
+    this.maxY = this.minY + Math.ceil(height)
+
     if (parent) {
       parent.children.push(this)
     }
   }
 }
 
-class Leaf extends Rect {
+class Compound extends Rect {
+  public readonly children = [] as Rect[]
+
   constructor(
     xynode: InternalNode,
     public readonly parent: Compound | null = null,
   ) {
-    super()
-    this.id = xynode.id
-
-    this.positionAbsolute = xynode.internals.positionAbsolute
-
-    const { width, height } = getNodeDimensions(xynode)
-
-    this.maxX = this.minX + Math.ceil(width)
-    this.maxY = this.minY + Math.ceil(height)
+    super(xynode, parent)
+  }
+}
 
-    if (parent) {
-      parent.children.push(this)
-    }
+class Leaf extends Rect {
+  constructor(
+    xynode: InternalNode,
+    public readonly parent: Compound | null = null,
+  ) {
+    super(xynode, parent)
   }
 }
 

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/element-details/TabPanelRelationships.tsx

@@ -28,8 +28,8 @@ export function TabPanelRelationships({
   const incoming = [...element.incoming()].map(r => r.id)
   const outgoing = [...element.outgoing()].map(r => r.id)
 
-  const incomingInView = unique(node.incoming().flatMap(e => e.$edge.relations).toArray())
-  const outgoingInView = unique(node.outgoing().flatMap(e => e.$edge.relations).toArray())
+  const incomingInView = unique([...node.incoming()].flatMap(e => e.$edge.relations))
+  const outgoingInView = unique([...node.outgoing()].flatMap(e => e.$edge.relations))
 
   const notIncludedRelations = [
     ...incoming,

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,