@likec4/diagram 1.17.1 → 1.18.0

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

@@ -7,27 +7,27 @@ import * as css from './TabPanelStructure.css'
 interface ElementTreeNodeData {
   label: ReactNode
   value: string
-  element: LikeC4Model.ElementModel
+  element: LikeC4Model.Element
   type: 'ancestor' | 'current' | 'descedant'
   children: TreeNodeData[]
 }
 
-interface MessageNodeData {
+export interface MessageNodeData {
   label: ReactNode
   value: string
   type: 'message'
   children: TreeNodeData[]
 }
 
-type TreeNodeData = ElementTreeNodeData | MessageNodeData
+export type TreeNodeData = ElementTreeNodeData | MessageNodeData
 
-type TabElementStructureProps = {
-  element: LikeC4Model.ElementModel
+type TabPanelStructureProps = {
+  element: LikeC4Model.Element
 }
 
-const ElementLabel = ({
+export const ElementLabel = ({
   element
-}: { element: LikeC4Model.ElementModel; type: 'ancestor' | 'current' | 'descedant' }) => (
+}: { element: LikeC4Model.Element; type: 'ancestor' | 'current' | 'descedant' }) => (
   <Box className={css.elementLabel}>
     <Text component="div" fz={'sm'} fw={'500'}>{element.title}</Text>
   </Box>
@@ -38,9 +38,9 @@ const ElementLabel = ({
 // }: RenderTreeNodePayload) => {
 // }
 
-export function TabElementStructure({
+export function TabPanelStructure({
   element
-}: TabElementStructureProps) {
+}: TabPanelStructureProps) {
   const tree = useTree({
     multiple: false
   })
@@ -60,7 +60,7 @@ export function TabElementStructure({
       value: element.id,
       element,
       type: 'current',
-      children: element.children().map((child): TreeNodeData => ({
+      children: [...element.children()].map((child): TreeNodeData => ({
         label: <ElementLabel type="descedant" element={child} />,
         value: child.id,
         element: child,

package/src/overlays/relationships-of/RelationshipsOverlay.tsx

@@ -93,7 +93,7 @@ export const RelationshipsOverlay = memo<{ subjectId: Fqn }>(function Relationsh
             <Box flex={'1 0 auto'}>
               <SelectElement
                 scope={scope}
-                subject={subject.element}
+                subject={subject.$element}
                 onSelect={fqn =>
                   overlay.openOverlay({
                     relationshipsOf: fqn

package/src/overlays/relationships-of/RelationshipsXYFlow.tsx

@@ -1,13 +1,8 @@
 import { delay, type DiagramView, type Fqn, isAncestor, type Relation } from '@likec4/core'
-import { Box, Button, Group, SegmentedControl, Space, Text } from '@mantine/core'
-import { useId, useLocalStorage, useStateHistory } from '@mantine/hooks'
+import { useId } from '@mantine/hooks'
 import { useDebouncedCallback, useDeepCompareEffect, useSyncedRef } from '@react-hookz/web'
-import { IconArrowLeft, IconArrowRight } from '@tabler/icons-react'
 import {
-  Background,
-  BackgroundVariant,
   getViewportForBounds,
-  Panel,
   ReactFlow,
   type ReactFlowInstance,
   type ReactFlowProps,
@@ -19,16 +14,13 @@ import {
   useStoreApi
 } from '@xyflow/react'
 import { getNodeDimensions } from '@xyflow/system'
-import { memo, type PropsWithChildren, useEffect, useRef, useState } from 'react'
+import { type PropsWithChildren, useRef, useState } from 'react'
 import { isNullish, map, omit, only, prop, setPath, unique } from 'remeda'
 import { useUpdateEffect } from '../../hooks'
-import { useDiagramStoreApi } from '../../hooks/useDiagramState'
 import { centerXYInternalNode } from '../../xyflow/utils'
-import { useOverlayDialog } from '../OverlayContext'
 import { cssReactflowMarker } from '../Overlays.css'
 import type { XYFlowTypes } from './_types'
-import { SelectElement } from './SelectElement'
-import { useLayoutedRelationships, ZIndexes } from './use-layouted-relationships'
+import { ZIndexes } from './use-layouted-relationships'
 import { CompoundNode } from './xyflow/CompoundNode'
 import { ElementNode } from './xyflow/ElementNode'
 import { EmptyNode } from './xyflow/EmptyNode'

package/src/overlays/relationships-of/SelectElement.tsx

@@ -1,4 +1,4 @@
-import { ancestorsFqn, type Element, type Fqn, type ViewID } from '@likec4/core'
+import { ancestorsFqn, type Element, type Fqn, type ViewId } from '@likec4/core'
 import {
   ActionIcon,
   Box,
@@ -25,7 +25,7 @@ export const SelectElement = ({
   onSelect
 }: {
   subject: Element
-  viewId: ViewID
+  viewId: ViewId
   scope: 'global' | 'view'
   onSelect: (id: Fqn) => void
 }) => {

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

@@ -1,4 +1,4 @@
-import type { ComputedNode, Fqn, Relation, ViewID } from '@likec4/core'
+import type { ComputedNode, Fqn, Relation, ViewId } from '@likec4/core'
 import type {
   Edge as ReactFlowEdge,
   InternalNode as ReactFlowInternalNode,
@@ -26,7 +26,7 @@ export namespace XYFlowTypes {
       left: Port[]
       right: Port[]
     }
-    navigateTo: ViewID | null
+    navigateTo: ViewId | null
     hovered?: boolean
     layoutId?: string
     leaving?: boolean

package/src/overlays/relationships-of/use-layouted-relationships.ts

@@ -11,7 +11,7 @@ import {
   type LikeC4Model,
   nonNullable,
   parentFqn,
-  type RelationID
+  type RelationId
 } from '@likec4/core'
 import { MarkerType } from '@xyflow/system'
 import { useMemo } from 'react'
@@ -118,15 +118,12 @@ function createGraph() {
   return g
 }
 
-type LikeC4ModelElement = LikeC4Model.ElementModel
-// type LikeC4ModelElement = LikeC4ViewModel.Element
-
 type Context = {
   scope: 'global' | 'view'
   g: dagre.graphlib.Graph
   subjectId: Fqn
   diagramNodes: Map<Fqn, DiagramNode>
-  subjectElement: LikeC4ModelElement
+  subjectElement: LikeC4Model.Element
   // likec4model: LikeC4Model
   // subject: XYFlowTypes.ElementNode
   // Model
@@ -157,7 +154,7 @@ const graphId = (node: XYFlowTypes.Node) => ({
 })
 
 function nodeData(
-  element: LikeC4Model.ElementModel,
+  element: LikeC4Model.Element,
   ctx: Context
 ): Omit<XYFlowTypes.NonEmptyNode['data'], 'column'> {
   // We try to inherit style from existing diagram node
@@ -167,7 +164,7 @@ function nodeData(
   // color from it if there is no diagram node
   const ancestor = diagramNode ?? (ctx.scope === 'view'
     ? pipe(
-      element.ancestors(),
+      element.ancestors().toArray(),
       map(ancestor => ctx.diagramNodes.get(ancestor.id)),
       filter(isTruthy),
       first()
@@ -180,11 +177,11 @@ function nodeData(
     element: {
       kind: element.kind,
       title: diagramNode?.title ?? element.title,
-      description: diagramNode?.description ?? element.element.description,
+      description: diagramNode?.description ?? element.description,
       color: diagramNode?.color ?? ancestor?.color ?? element.color,
       shape: diagramNode?.shape ?? element.shape
     },
-    navigateTo: diagramNode?.navigateTo ?? first(element.viewsOf())?.id ?? null,
+    navigateTo: diagramNode?.navigateTo ?? element.defaultView?.id ?? null,
     ports: {
       left: [],
       right: []
@@ -228,7 +225,7 @@ function createEmptyNode(
 function createNode(
   column: ColumnKey,
   nodeType: Exclude<XYFlowTypes.Node['type'], 'empty'>,
-  element: LikeC4Model.ElementModel,
+  element: LikeC4Model.Element,
   ctx: Context,
   depth: number = 0
 ): XYFlowTypes.ElementNode | XYFlowTypes.CompoundNode {
@@ -245,7 +242,7 @@ function createNode(
 
   // Create parent node
   const parent = pipe(
-    element.ancestors(),
+    element.ancestors().toArray(),
     takeWhile(ancestor => !isAncestor(ancestor.id, ctx.subjectId)),
     find(ancestor =>
       ctx.diagramNodes.has(ancestor.id) || ctx.connected[column].has(ancestor.id)
@@ -363,7 +360,7 @@ function layout(
 ): {
   viewIncludesSubject: boolean
   notIncludedRelations: number
-  subject: LikeC4ModelElement
+  subject: LikeC4Model.Element
   nodes: XYFlowTypes.Node[]
   edges: XYFlowTypes.Edge[]
   bounds: {
@@ -381,7 +378,7 @@ function layout(
     view.edges.flatMap(e => e.relations)
   )
   // Relations that are not included in the view
-  const notIncludedRelations = new Set<RelationID>()
+  const notIncludedRelations = new Set<RelationId>()
 
   if (!viewIncludesSubject) {
     // Reset scope to global if subject is not in the view
@@ -401,16 +398,18 @@ function layout(
 
   if (scope === 'global') {
     relationships = {
-      incoming: subjectElement.incoming().map(r => r.relationship),
-      outgoing: subjectElement.outgoing().map(r => r.relationship)
+      incoming: subjectElement.incoming().map(r => r.$relationship).toArray(),
+      outgoing: subjectElement.outgoing().map(r => r.$relationship).toArray()
     }
   } else {
-    const subjectViewModel = likec4model.view(view.id).element(subjectId)
+    const subjectViewModel = likec4model.view(view.id).node(subjectId)
     relationships = {
       incoming: subjectViewModel.incoming()
-        .flatMap(c => c.relationships().map(r => r.relationship)),
+        .flatMap(c => c.relationships('model').map(r => r.$relationship))
+        .toArray(),
       outgoing: subjectViewModel.outgoing()
-        .flatMap(c => c.relationships().map(r => r.relationship))
+        .flatMap(c => c.relationships('model').map(r => r.$relationship))
+        .toArray()
     }
   }
 
@@ -445,7 +444,7 @@ function layout(
   })
 
   if (viewIncludesSubject) {
-    const subjectViewModel = likec4model.view(view.id).element(subjectId)
+    const subjectViewModel = likec4model.view(view.id).node(subjectId)
     subjectViewModel.incomers().forEach(incomer => {
       ctx.connected.incomers.add(incomer.id)
     })

package/src/overlays/relationships-of/xyflow/CompoundNode.tsx

@@ -86,14 +86,12 @@ export const CompoundNode = memo<CompoundNodeProps>(({
         {...(selectable && {
           whileHover: {
             ...scale(12),
-            scaleX: (width + 12) / width,
-            scaleY: (height + 12) / height,
             transition: {
               delay: 0.1
             }
           },
           whileTap: {
-            ...scale(-12)
+            ...scale(-8)
           }
         })}
       >

package/src/overlays/relationships-of/xyflow/ElementNode.tsx

@@ -30,7 +30,7 @@ function selector(s: DiagramState) {
   return {
     currentViewId: s.view.id,
     onNavigateTo: s.onNavigateTo,
-    onOpenSource: s.onOpenSourceElement
+    onOpenSource: s.onOpenSource
   }
 }
 
@@ -56,10 +56,14 @@ export const ElementNode = memo<ElementNodeProps>(({
     onOpenSource
   } = useDiagramState(selector)
 
-  const scale = (diff: number) => ({
-    scaleX: (w + diff) / w,
-    scaleY: (h + diff) / h
-  })
+  const maxWH = Math.max(w, h)
+  const scale = (diff: number) => {
+    const s = (maxWH + diff) / maxWH
+    return ({
+      scaleX: s,
+      scaleY: s
+    })
+  }
 
   let opacity = 1
   if (data.dimmed) {
@@ -155,7 +159,9 @@ export const ElementNode = memo<ElementNodeProps>(({
             <Action
               onClick={(event) => {
                 event.stopPropagation()
-                onOpenSource(data.fqn)
+                onOpenSource?.({
+                  element: data.fqn
+                })
               }}>
               <IconFileSymlink stroke={1.8} style={{ width: '72%' }} />
             </Action>

package/src/overlays/relationships-of/xyflow/RelationshipEdge.tsx

@@ -2,7 +2,6 @@ import { ActionIcon, Box, Group, Stack, Text, ThemeIcon, Tooltip as MantineToolt
 import { IconBoxMultipleFilled, IconZoomScan } from '@tabler/icons-react'
 import { BaseEdge, EdgeLabelRenderer, type EdgeProps, getBezierPath } from '@xyflow/react'
 import clsx from 'clsx'
-import { useEffect, useRef } from 'react'
 import { only } from 'remeda'
 import { useDiagramState } from '../../../hooks/useDiagramState'
 import { stopPropagation } from '../../../xyflow/utils'

package/src/state/diagramStore.ts

@@ -1,13 +1,13 @@
 import type {
+  ComputedNode,
   DiagramNode,
   DiagramView,
   EdgeId,
-  ElementKind,
   ElementNotation,
   Fqn,
   NodeId,
   ViewChange,
-  ViewID,
+  ViewId,
   XYPoint
 } from '@likec4/core'
 import {
@@ -17,17 +17,16 @@ import {
   isStepEdgeId,
   nonexhaustive,
   nonNullable,
-  StepEdgeId
+  type StepEdgeId
 } from '@likec4/core'
 import {
   applyEdgeChanges,
   applyNodeChanges,
   getViewportForBounds,
-  type InternalNode,
   type OnEdgesChange,
   type OnNodesChange
 } from '@xyflow/react'
-import { boxToRect, getBoundsOfRects, getNodeDimensions, type XYPosition } from '@xyflow/system'
+import { boxToRect, getBoundsOfRects, getNodeDimensions } from '@xyflow/system'
 import { DEV } from 'esm-env'
 import { deepEqual as eq, shallowEqual } from 'fast-equals'
 import type { MouseEvent as ReactMouseEvent } from 'react'
@@ -46,7 +45,6 @@ import type {
 import { type Vector, vector } from '../utils/vector'
 import { MinZoom } from '../xyflow/const'
 import type { XYFlowEdge, XYFlowInstance, XYFlowNode } from '../xyflow/types'
-import { createLayoutConstraints } from '../xyflow/useLayoutConstraints'
 import { bezierControlPoints, isInside, isSamePoint, toDomPrecision } from '../xyflow/utils'
 import { diagramViewToXYFlowData } from './diagram-to-xyflow'
 import { align, type AlignmentMode } from './diagramStore.layout'
@@ -87,6 +85,8 @@ export type DiagramInitialState = {
   getContainer: () => HTMLDivElement | null
 } & RequiredOrNull<LikeC4DiagramEventHandlers>
 
+type NodeKind = ComputedNode['kind']
+
 const StringSet = Set<string>
 
 export type DiagramState = Simplify<
@@ -132,12 +132,12 @@ export type DiagramState = Simplify<
     dimmed: ReadonlySet<string>
 
     lastOnNavigate: null | {
-      fromView: ViewID
-      toView: ViewID
+      fromView: ViewId
+      toView: ViewId
       fromNode: NodeId | null
     }
     navigationHistory: Array<{
-      viewId: ViewID
+      viewId: ViewId
       nodeId: NodeId | null
     }>
     navigationHistoryIndex: number
@@ -186,10 +186,12 @@ export type DiagramState = Simplify<
     onNodesChange: OnNodesChange<XYFlowNode>
     onEdgesChange: OnEdgesChange<XYFlowEdge>
 
-    highlightByElementNotation: (notation: ElementNotation, onlyOfKind?: ElementKind) => void
+    highlightByElementNotation: (notation: ElementNotation, onlyOfKind?: NodeKind) => void
 
     resetEdgeControlPoints: () => void
     align: (mode: AlignmentMode) => void
+
+    onOpenSourceView: () => void
   }
 >
 
@@ -850,10 +852,25 @@ export function createDiagramStore(props: DiagramInitialState) {
             }
           },
 
+          onOpenSourceView: () => {
+            const { view, onOpenSource } = get()
+            onOpenSource?.({
+              view: view.id
+            })
+          },
+
           openOverlay: (overlay) => {
             if (eq(overlay, get().activeOverlay)) {
               return
             }
+            if ('elementDetails' in overlay) {
+              const diagramNode = get().view.nodes.find(({ id }) => id === overlay.elementDetails)
+              if (!diagramNode || !diagramNode.modelRef) {
+                get().closeOverlay()
+                return
+              }
+            }
+
             set(
               {
                 activeWalkthrough: null,
@@ -992,7 +1009,7 @@ export function createDiagramStore(props: DiagramInitialState) {
             }
           },
 
-          highlightByElementNotation: (notation: ElementNotation, onlyOfKind?: ElementKind) => {
+          highlightByElementNotation: (notation: ElementNotation, onlyOfKind?: NodeKind) => {
             const { xynodes, xyedges } = get()
             const dimmed = new StringSet(map(xyedges, prop('id')))
             xynodes.forEach(({ id, data }) => {

package/src/ui/DiagramTitlePanel.tsx

@@ -5,6 +5,7 @@ import clsx from 'clsx'
 import { AnimatePresence, m } from 'framer-motion'
 import { type DiagramState, useDiagramState } from '../hooks'
 import * as css from './DiagramTitlePanel.css'
+import { Link } from './Link'
 
 const selector = (s: DiagramState) => ({
   id: s.view.id,
@@ -151,35 +152,7 @@ export default function DiagramTitlePanel() {
                   gap={3}
                   justify="stretch"
                   align="stretch">
-                  {links.map((link) => (
-                    <Group key={link.url} wrap="nowrap" align="center" gap={'sm'}>
-                      <Box flex={'1'} style={{ overflow: 'hidden' }}>
-                        <Anchor
-                          href={link.url}
-                          target="_blank"
-                          fz="xs"
-                          truncate="end"
-                          display={'inline-block'}
-                          w={'100%'}>
-                          {link.title || link.url}
-                        </Anchor>
-                      </Box>
-                      <CopyButton value={link.url}>
-                        {({ copied, copy }) => (
-                          <Button
-                            size="compact-xs"
-                            fz={'10'}
-                            variant="light"
-                            onClick={copy}
-                            color={copied
-                              ? 'teal'
-                              : 'gray'}>
-                            {copied ? 'copied' : 'copy'}
-                          </Button>
-                        )}
-                      </CopyButton>
-                    </Group>
-                  ))}
+                  {links.map((link) => <Link link={link} />)}
                 </Stack>
               )}
             </>

package/src/ui/Link.tsx

@@ -0,0 +1,40 @@
+import type { Link } from '@likec4/core'
+import { Anchor, Box, Button, CopyButton, Group } from '@mantine/core'
+
+export function Link({ link }: { link: Link }) {
+  return (
+    <>
+      <Group key={link.url} wrap="nowrap" align="center" gap={'sm'}>
+        <Box flex={'1'} style={{ overflow: 'hidden' }}>
+          <Anchor
+            href={link.url}
+            target="_blank"
+            fz="xs"
+            truncate="end"
+            display={'inline-block'}
+            w={'100%'}
+            onClick={(e) => e.stopPropagation()}>
+            {link.title || link.url}
+          </Anchor>
+        </Box>
+        <CopyButton value={link.url}>
+          {({ copied, copy }) => (
+            <Button
+              size="compact-xs"
+              fz={'10'}
+              variant="light"
+              onClick={(e) => {
+                e.stopPropagation()
+                copy()
+              }}
+              color={copied
+                ? 'teal'
+                : 'gray'}>
+              {copied ? 'copied' : 'copy'}
+            </Button>
+          )}
+        </CopyButton>
+      </Group>
+    </>
+  )
+}

package/src/ui/notation/NotationPanel.tsx

@@ -1,4 +1,4 @@
-import { type ElementKind, type ElementNotation as ElementNotationData } from '@likec4/core'
+import { type ComputedNode, type ElementNotation as ElementNotationData } from '@likec4/core'
 import {
   ActionIcon,
   Badge,
@@ -29,13 +29,15 @@ import { vars } from '../../theme-vars'
 import { ElementShapeSvg } from '../../xyflow/nodes/element/ElementShapeSvg'
 import * as css from './NotationPanel.css'
 
+type NodeKind = ComputedNode['kind']
+
 const ElementNotation = ({ value }: { value: ElementNotationData }) => {
   const {
     title,
     color = 'primary',
     shape = 'rectangle'
   } = value
-  const [onlyKind, setOnlyKind] = useState<ElementKind | null>(null)
+  const [onlyKind, setOnlyKind] = useState<NodeKind | null>(null)
   const diagramStore = useDiagramStoreApi()
   const w = 300
   const h = 200

package/src/ui/top-left/ChangeAutoLayoutButton.tsx

@@ -137,7 +137,7 @@ export const ChangeAutoLayoutButton = (props: PopoverProps) => {
 }
 
 const MAX_SPACING = 400
-const SpacingSliders = forwardRef<HTMLDivElement, {
+const SpacingSliders = forwardRef<HTMLDivElement | null, {
   isVertical: boolean
   nodeSep: number | undefined
   rankSep: number | undefined
@@ -160,7 +160,7 @@ const SpacingSliders = forwardRef<HTMLDivElement, {
       onChange(Math.round(x * MAX_SPACING), Math.round(y * MAX_SPACING))
     },
     [onChange, isVertical],
-    150,
+    250,
     2000
   )
 

package/src/ui/top-left/TopLeftPanel.tsx

@@ -12,6 +12,7 @@ import {
   Text,
   TooltipGroup
 } from '@mantine/core'
+import { openSpotlight } from '@mantine/spotlight'
 import {
   IconAlertTriangle,
   IconChevronLeft,
@@ -31,7 +32,6 @@ import { ActionIcon, Tooltip } from './_shared'
 import { ChangeAutoLayoutButton } from './ChangeAutoLayoutButton'
 import { ManualLayoutToolsButton } from './ManualLayoutToolsButton'
 import * as css from './styles.css'
-import { openSpotlight } from '@mantine/spotlight'
 
 const historySelector = (s: DiagramState) => ({
   showBurgerMenu: !!s.onBurgerMenuClick,
@@ -158,7 +158,7 @@ export const TopLeftPanel = () => {
       showFitDiagram: s.controls && s.fitViewEnabled && s.zoomable && isNotWalkthrough,
       showLayoutDriftWarning: s.controls && !s.readonly && s.view.hasLayoutDrift === true && isNotActive,
       showChangeAutoLayout: s.controls && s.isEditable() && isNotActive,
-      showGoToSource: s.controls && !!s.onOpenSourceView && isNotWalkthrough,
+      showGoToSource: s.controls && !!s.onOpenSource && isNotWalkthrough,
       viewportChanged: s.viewportChanged,
       showManualLayoutTools: s.controls && s.readonly !== true && s.experimentalEdgeEditing === true
     })
@@ -179,10 +179,10 @@ export const TopLeftPanel = () => {
         {showNavigationButtons && <BackwardForwardButtons />}
         <ActionIconGroup className={css.actionIconGroup} orientation="vertical">
           {enableSearch && (
-            <Tooltip label="Search">
+            <Tooltip label="Search (Ctrl+F or ⌘+F)">
               <ActionIcon
                 onClick={() => openSpotlight()}
-                >
+              >
                 <IconSearch />
               </ActionIcon>
             </Tooltip>
@@ -192,7 +192,7 @@ export const TopLeftPanel = () => {
               <ActionIcon
                 onClick={e => {
                   e.stopPropagation()
-                  store.getState().onOpenSourceView?.()
+                  store.getState().onOpenSourceView()
                 }}>
                 <IconFileSymlink stroke={1.5} />
               </ActionIcon>

package/src/xyflow/edges/EdgeLabel.tsx

@@ -1,4 +1,4 @@
-import { extractStep, isStepEdgeId, type ViewID } from '@likec4/core'
+import { extractStep, isStepEdgeId, type ViewId } from '@likec4/core'
 import {
   ActionIcon,
   Box,
@@ -80,9 +80,9 @@ export const EdgeLabel = ({
             </Box>
           )}
           {isTruthy(label?.text) && (
-            <Box className={edgesCss.edgeLabelText}>
+            <Text component="div" className={edgesCss.edgeLabelText} lineClamp={5}>
               {label.text}
-            </Box>
+            </Text>
           )}
           {navigateTo && <NavigateToBtn viewId={navigateTo} />}
         </Box>
@@ -162,7 +162,7 @@ const NotePopover = ({ notes, children }: PropsWithChildren<{ notes: string }>)
 }
 
 type NavigateToBtnProps = {
-  viewId: ViewID
+  viewId: ViewId
 }
 
 function NavigateToBtn({ viewId }: NavigateToBtnProps) {