@likec4/diagram 1.17.0 → 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'