@likec4/diagram 1.31.0 → 1.32.0

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

@@ -1,4 +1,5 @@
-import type { Fqn, LikeC4Model } from '@likec4/core'
+import type { LikeC4Model } from '@likec4/core/model'
+import type { Fqn } from '@likec4/core/types'
 import { Alert, Box, Button, Group, Menu, rem, Text, ThemeIcon, Tree, useTree } from '@mantine/core'
 import { IconInfoCircle, IconTarget, IconZoomScan } from '@tabler/icons-react'
 import { type ReactNode, memo, useEffect, useMemo } from 'react'
@@ -107,7 +108,7 @@ const DeployedInstanceRenderer = (
 
 const setHoveredNode = () => {}
 export const TabPanelDeployments = memo<TabPanelDeploymentsProps>(({ elementFqn }) => {
-  const element = useLikeC4Model(true).element(elementFqn)
+  const element = useLikeC4Model().element(elementFqn)
   const deployments = [...element.deployments()]
 
   const tree = useTree({

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

@@ -1,4 +1,5 @@
-import { type LikeC4Model, nameFromFqn } from '@likec4/core'
+import { nameFromFqn } from '@likec4/core'
+import type { LikeC4Model } from '@likec4/core/model'
 import { ActionIcon, Box, Group, Paper, Stack, Text, ThemeIcon, Tooltip as MantineTooltip } from '@mantine/core'
 import { IconArrowRight, IconExternalLink, IconInfoCircle } from '@tabler/icons-react'
 import { useSelector } from '@xstate/react'

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

@@ -1,4 +1,4 @@
-import type { LikeC4Model } from '@likec4/core'
+import type { LikeC4Model } from '@likec4/core/model'
 import { Alert, Anchor, Box, Pill, Text, Tree, useTree } from '@mantine/core'
 import { IconInfoCircle } from '@tabler/icons-react'
 import { type ReactNode, useEffect, useMemo } from 'react'

package/src/overlays/element-details/actor.ts

@@ -1,5 +1,5 @@
-import { type DiagramView, type Fqn, type NodeId } from '@likec4/core'
-import { type Rect } from '@xyflow/system'
+import type { DiagramView, Fqn, NodeId } from '@likec4/core/types'
+import type { Rect } from '@xyflow/system'
 import {
   type ActorLogicFrom,
   type ActorRefFromLogic,

package/src/overlays/overlay/Overlay.css.ts

@@ -12,8 +12,8 @@ const dialog = css.raw({
   boxSizing: 'border-box',
   margin: 0,
   position: 'fixed',
-  width: 'auto',
-  height: 'auto',
+  width: '100vw',
+  height: '100vh',
   maxWidth: '100vw',
   maxHeight: '100vh',
   background: `mantine.colors.defaultBorder/50`,
@@ -26,41 +26,12 @@ const dialog = css.raw({
   [offset]: '0px',
   [inset]: 'calc((1 + var(--_level) * 0.75) * var(--_offset))',
   [backdropOpacity]: '0%',
+  [borderRadius]: '0px',
   _backdrop: {
     cursor: 'zoom-out',
-    backdropFilter: `blur(var(${backdropBlur}))`,
-    backgroundColor: {
-      _dark: `[rgb(34 34 34 / var(${backdropOpacity}))]`,
-      _light: `[rgb(15 15 15/ var(${backdropOpacity}))]`,
-    },
-  },
-  smDown: {
-    [borderRadius]: '0px',
-    border: 'none',
-    inset: 0,
-    padding: 0,
-    // [offset]: '0px',
-    // [inset]: '0px',
-    width: '100vw',
-    height: '100vh',
-  },
-  sm: {
-    inset: '[var(--_inset) var(--_inset) var(--_offset) var(--_inset)]',
-    width: 'calc(100vw - 2 * var(--_inset))',
-    height: 'calc(100vh - var(--_offset) - var(--_inset))',
-    [borderRadius]: '6px',
-    padding: '6px',
-    [offset]: '1rem',
-  },
-  md: {
-    [offset]: '1rem',
-  },
-  lg: {
-    [offset]: '2rem',
-  },
-  xl: {
-    [offset]: '4rem',
   },
+  inset: 0,
+  padding: 0,
 })
 
 const body = css.raw({
@@ -68,13 +39,10 @@ const body = css.raw({
   containerName: 'overlay-dialog',
   containerType: 'size',
   border: `0 solid transparent`,
-  background: 'mantine.colors.body',
   overflow: 'hidden',
   width: '100%',
   height: '100%',
-  sm: {
-    borderRadius: `calc(var(${borderRadius}) - 2px)`,
-  },
+  background: 'mantine.colors.body',
 })
 
 export const overlay = sva({
@@ -83,4 +51,73 @@ export const overlay = sva({
     dialog: dialog,
     body: body,
   },
+  variants: {
+    fullscreen: {
+      false: {
+        dialog: {
+          sm: {
+            inset: '[var(--_inset) var(--_inset) var(--_offset) var(--_inset)]',
+            width: 'calc(100vw - 2 * var(--_inset))',
+            height: 'calc(100vh - var(--_offset) - var(--_inset))',
+            [borderRadius]: '6px',
+            padding: '6px',
+            [offset]: '1rem',
+          },
+          md: {
+            [offset]: '1rem',
+          },
+          lg: {
+            [offset]: '2rem',
+          },
+          xl: {
+            [offset]: '4rem',
+          },
+        },
+        body: {
+          sm: {
+            borderRadius: `calc(var(${borderRadius}) - 2px)`,
+          },
+        },
+      },
+      true: {
+        dialog: {
+          inset: 0,
+          padding: 0,
+        },
+      },
+    },
+    // transparent: {
+    //   false: {
+    //   },
+    //   true: {
+    //     dialog: {
+    //       background: 'transparent',
+    //     },
+    //   },
+    // },
+    withBackdrop: {
+      false: {
+        dialog: {
+          _backdrop: {
+            display: 'none',
+          },
+        },
+      },
+      true: {
+        dialog: {
+          _backdrop: {
+            backdropFilter: `blur(var(${backdropBlur}))`,
+            backgroundColor: {
+              _dark: `[rgb(34 34 34 / var(${backdropOpacity}))]`,
+              _light: `[rgb(15 15 15/ var(${backdropOpacity}))]`,
+            },
+          },
+        },
+      },
+    },
+  },
+  defaultVariants: {
+    fullscreen: false,
+    withBackdrop: true,
+  },
 })

package/src/overlays/overlay/Overlay.tsx

@@ -3,19 +3,25 @@ import {
   RemoveScroll,
 } from '@mantine/core'
 import { useMergedRef } from '@mantine/hooks'
-import { useDebouncedCallback, useSyncedRef, useTimeoutEffect } from '@react-hookz/web'
+import { useDebouncedCallback, useTimeoutEffect } from '@react-hookz/web'
 import { m, useReducedMotionConfig } from 'motion/react'
-import { type PropsWithChildren, forwardRef, useEffect, useRef, useState } from 'react'
+import { type PropsWithChildren, forwardRef, useLayoutEffect, useRef, useState } from 'react'
 import { stopPropagation } from '../../utils'
 import { backdropBlur, backdropOpacity, level as cssVarLevel, overlay as overlayCVA } from './Overlay.css'
 
 export type OverlayProps = PropsWithChildren<{
+  fullscreen?: boolean | undefined
+  withBackdrop?: boolean | undefined
   overlayLevel?: number
   className?: string
   classes?: {
     dialog?: string
     body?: string
   }
+  backdrop?: {
+    opacity?: number
+  }
+  openDelay?: number
   onClose: () => void
   onClick?: never
 }>
@@ -26,15 +32,21 @@ export const Overlay = forwardRef<HTMLDialogElement, OverlayProps>(({
   classes,
   overlayLevel = 0,
   children,
+  fullscreen = false,
+  withBackdrop = true,
+  backdrop,
+  openDelay = 130,
   ...rest
 }, ref) => {
-  const [opened, setOpened] = useState(false)
+  const [opened, setOpened] = useState(openDelay === 0)
   const dialogRef = useRef<HTMLDialogElement>(null)
   const isClosingRef = useRef(false)
 
   const motionNotReduced = useReducedMotionConfig() !== true
 
-  const onCloseRef = useSyncedRef(onClose)
+  const onCloseRef = useRef(onClose)
+  onCloseRef.current = onClose
+
   const close = useDebouncedCallback(
     () => {
       if (isClosingRef.current) return
@@ -45,37 +57,30 @@ export const Overlay = forwardRef<HTMLDialogElement, OverlayProps>(({
     50,
   )
 
-  useEffect(() => {
-    const cancel = (e: Event) => {
-      e.preventDefault()
-      e.stopPropagation()
-      close()
-    }
-    dialogRef.current?.addEventListener('cancel', cancel, { capture: true })
-    return () => {
-      dialogRef.current?.removeEventListener('cancel', cancel, { capture: true })
-    }
-  }, [])
-
-  useTimeoutEffect(() => {
+  useLayoutEffect(() => {
     if (!dialogRef.current?.open) {
       // Move dialog to the top of the DOM
       dialogRef.current?.showModal()
     }
-  }, 30)
+  }, [])
 
   useTimeoutEffect(() => {
     setOpened(true)
-  }, 120)
+  }, openDelay > 0 ? openDelay : undefined)
 
   const styles = overlayCVA({
-    level: overlayLevel as 0 | 1 | 2 | 3,
+    fullscreen,
+    withBackdrop,
   })
 
+  let targetBackdropOpacity = overlayLevel > 0 ? '50%' : '60%'
+  if (backdrop?.opacity !== undefined) {
+    targetBackdropOpacity = `${backdrop.opacity * 100}%`
+  }
   return (
     <m.dialog
       ref={useMergedRef(dialogRef, ref)}
-      className={cx(RemoveScroll.classNames.fullWidth, styles.dialog, classes?.dialog, className)}
+      className={cx(RemoveScroll.classNames.fullWidth, classes?.dialog, className, styles.dialog)}
       layout
       style={{
         // @ts-ignore
@@ -86,21 +91,28 @@ export const Overlay = forwardRef<HTMLDialogElement, OverlayProps>(({
           initial: {
             [backdropBlur]: '0px',
             [backdropOpacity]: '0%',
-            scale: overlayLevel > 0 ? 0.9 : 1.075,
+            scale: 0.95,
+            originY: 0,
+            translateY: -20,
             opacity: 0,
           },
           animate: {
             [backdropBlur]: overlayLevel > 0 ? '4px' : '8px',
-            [backdropOpacity]: overlayLevel > 0 ? '50%' : '60%',
+            [backdropOpacity]: targetBackdropOpacity,
             scale: 1,
             opacity: 1,
+            translateY: 0,
             transition: {
               delay: 0.075,
             },
           },
           exit: {
-            scale: 1.2,
             opacity: 0,
+            scale: 0.98,
+            translateY: -20,
+            transition: {
+              duration: 0.1,
+            },
             [backdropBlur]: '0px',
             [backdropOpacity]: '0%',
           },
@@ -108,7 +120,7 @@ export const Overlay = forwardRef<HTMLDialogElement, OverlayProps>(({
         : {
           initial: {
             [backdropBlur]: '8px',
-            [backdropOpacity]: '60%',
+            [backdropOpacity]: targetBackdropOpacity,
           },
         }}
       onClick={e => {
@@ -118,6 +130,11 @@ export const Overlay = forwardRef<HTMLDialogElement, OverlayProps>(({
           return
         }
       }}
+      onCancel={e => {
+        e.preventDefault()
+        e.stopPropagation()
+        close()
+      }}
       onDoubleClick={stopPropagation}
       onPointerDown={stopPropagation}
       onClose={e => {
@@ -127,7 +144,7 @@ export const Overlay = forwardRef<HTMLDialogElement, OverlayProps>(({
       {...rest}
     >
       <RemoveScroll forwardProps removeScrollBar={false}>
-        <div className={cx(styles.body, 'overlay-body', classes?.body)}>
+        <div className={cx(classes?.body, styles.body, 'overlay-body')}>
           {opened && <>{children}</>}
         </div>
       </RemoveScroll>

package/src/overlays/overlaysActor.ts

@@ -1,4 +1,4 @@
-import type { Fqn } from '@likec4/core'
+import type { Fqn } from '@likec4/core/types'
 import { getHotkeyHandler } from '@mantine/hooks'
 import type { KeyboardEvent } from 'react'
 import { isString, last, reverse } from 'remeda'

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

@@ -83,7 +83,7 @@ const selectSubject = (state: RelationshipDetailsSnapshot) => ({
 const SyncRelationshipDetailsXYFlow = memo(() => {
   const actor = useRelationshipDetailsActor()
   const subject = useSelector(actor, selectSubject, deepEqual)
-  const likec4model = useLikeC4Model(true)
+  const likec4model = useLikeC4Model()
   const view = likec4model.findView(subject.viewId) ?? null
   const data = useMemo(() => {
     let data: RelationshipDetailsViewData
@@ -224,7 +224,7 @@ const topLeftPanelselector = ({ context }: RelationshipDetailsSnapshot) => ({
 })
 const TopLeftPanel = memo(() => {
   const { subject, viewId } = useRelationshipDetailsState(topLeftPanelselector, deepEqual)
-  const likec4model = useLikeC4Model(true)
+  const likec4model = useLikeC4Model()
   const view = likec4model.findView(viewId)
 
   if (!view || !view.isDiagram()) {
@@ -239,8 +239,8 @@ const TopLeftPanel = memo(() => {
       find(edges, (e) => e.source.element?.id === subject.source && e.target.element?.id === subject.target)
       || find(edges, (e) => {
         return (e.source.element?.id === subject.source ||
-          isAncestor(e.source.element?.id ?? '--', subject.source ?? '__')) &&
-          (e.target.element?.id === subject.target || isAncestor(e.target.element?.id ?? '', subject.target ?? '__'))
+          isAncestor(e.source.element?.id ?? '__', subject.source ?? '__')) &&
+          (e.target.element?.id === subject.target || isAncestor(e.target.element?.id ?? '__', subject.target ?? '__'))
       })
     )
   if (!edge) {

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

@@ -1,4 +1,4 @@
-import type { Color, DiagramNode, Fqn, IconUrl, RelationId, RelationshipLineType, ViewId } from '@likec4/core'
+import type { Color, DiagramNode, Fqn, IconUrl, RelationId, RelationshipLineType, ViewId } from '@likec4/core/types'
 import type { Simplify } from 'type-fest'
 import type { Base, NonOptional, ReactFlowEdge, ReactFlowNode } from '../../base/types'
 
@@ -26,6 +26,7 @@ export namespace RelationshipDetailsTypes {
         | 'height'
         | 'navigateTo'
         | 'style'
+        | 'tags'
       >
     >
     & {

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

@@ -5,6 +5,7 @@ import {
   ElementDetailsButton,
   ElementNodeContainer,
   ElementShape,
+  ElementTags,
   ElementTitle,
 } from '../../../base/primitives'
 import { ElementActions } from './ElementActions'
@@ -12,6 +13,7 @@ import { ElementActions } from './ElementActions'
 import { Handle } from '@xyflow/react'
 import { Position } from '@xyflow/system'
 import type { NodeProps } from '../../../base'
+import { useEnabledFeatures } from '../../../context/DiagramFeatures'
 import { useDiagram } from '../../../hooks/useDiagram'
 import type { RelationshipDetailsTypes } from '../_types'
 
@@ -30,10 +32,12 @@ const ElementDetailsButtonWithHandler = (props: NodeProps<RelationshipDetailsTyp
 }
 
 export const ElementNode = customNode<RelationshipDetailsTypes.ElementNodeData>((props) => {
+  const { enableElementTags } = useEnabledFeatures()
   return (
     <ElementNodeContainer nodeProps={props}>
       <ElementShape {...props} />
       <ElementTitle {...props} />
+      {enableElementTags && <ElementTags {...props} />}
       <ElementDetailsButtonWithHandler {...props} />
       <ElementActions {...props} />
       <ElementPorts {...props} />

package/src/overlays/relationship-details/layout-to-xyflow.ts

@@ -119,6 +119,7 @@ export function layoutResultToXYFlow(
               icon: node.icon ?? 'none',
               ports: node.ports,
               style: node.style,
+              tags: node.tags,
               ...navigateTo,
             },
           },

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

@@ -394,11 +394,13 @@ export function layoutRelationshipDetails(
     return {
       id: id as NodeId,
       parent: parentId as NodeId ?? null,
+      x: position.x,
+      y: position.y,
       position: [position.x, position.y],
       title: element.title,
       description: element.description,
       technology: element.technology,
-      tags: null,
+      tags: [...element.tags],
       links: null,
       color: inheritFromNodeOrAncestor?.color ?? element.color,
       shape: inheritFromNode?.shape ?? element.shape,

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

@@ -47,7 +47,7 @@ export const SelectElement = memo(() => {
 
   const root = useRef<HTMLDivElement>(null)
   const viewport = useRef<HTMLDivElement>(null)
-  const model = useLikeC4Model(true)
+  const model = useLikeC4Model()
   const subject = model.findElement(subjectId)
   const data = useLikeC4ElementsTree(scope === 'view' && viewId ? viewId : undefined)
   const tree = useTree({

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

@@ -7,7 +7,7 @@ import type {
   RelationId,
   RelationshipLineType,
   ViewId,
-} from '@likec4/core'
+} from '@likec4/core/types'
 import type { Simplify } from 'type-fest'
 import type { Base, NonOptional, ReactFlowEdge, ReactFlowNode } from '../../base/types'
 
@@ -35,6 +35,7 @@ export namespace RelationshipsBrowserTypes {
         | 'style'
         | 'width'
         | 'height'
+        | 'tags'
         | 'navigateTo'
       >
     >

package/src/overlays/relationships-browser/custom/nodeTypes.tsx

@@ -8,8 +8,10 @@ import {
   ElementDetailsButton,
   ElementNodeContainer,
   ElementShape,
+  ElementTags,
   ElementTitle,
 } from '../../../base/primitives'
+import { useEnabledFeatures } from '../../../context/DiagramFeatures'
 import { useDiagram } from '../../../hooks/useDiagram'
 import type { RelationshipsBrowserTypes } from '../_types'
 import { ElementActions } from './ElementActions'
@@ -32,10 +34,12 @@ const ElementDetailsButtonWithHandler = (
 }
 
 export const ElementNode = customNode<RelationshipsBrowserTypes.ElementNodeData>((props) => {
+  const { enableElementTags } = useEnabledFeatures()
   return (
     <ElementNodeContainer key={props.id} layoutId={props.id} nodeProps={props}>
       <ElementShape {...props} />
       <ElementTitle {...props} />
+      {enableElementTags && <ElementTags {...props} />}
       <ElementDetailsButtonWithHandler {...props} />
       <ElementActions {...props} />
       <ElementPorts {...props} />

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

@@ -23,9 +23,10 @@ import {
   DefaultMap,
   ifind,
   invariant,
+  nonNullable,
   toArray,
 } from '@likec4/core'
-import type { AnyAux, ElementModel, LikeC4ViewModel, RelationshipModel } from '@likec4/core/model'
+import type { ElementModel, LikeC4ViewModel, RelationshipModel } from '@likec4/core/model'
 import {
   concat,
   filter,
@@ -216,7 +217,7 @@ export namespace LayoutRelationshipsViewResult {
 
 export function layoutRelationshipsView(
   data: RelationshipsViewData,
-  scope: LikeC4ViewModel<AnyAux> | null,
+  scope: LikeC4ViewModel | null,
 ): Omit<LayoutRelationshipsViewResult, 'subject'> {
   const g = createGraph()
 
@@ -459,12 +460,14 @@ export function layoutRelationshipsView(
       return {
         id: id as NodeId,
         parent: null,
+        x: position.x,
+        y: position.y,
         position: [position.x, position.y],
         title: 'empty node',
         description: null,
         technology: null,
-        tags: null,
-        links: null,
+        tags: [],
+        links: [],
         color: 'muted',
         shape: 'rectangle',
         style: {
@@ -508,11 +511,13 @@ export function layoutRelationshipsView(
     return {
       id: id as NodeId,
       parent: parentId as NodeId ?? null,
+      x: position.x,
+      y: position.y,
       position: [position.x, position.y],
       title: element.title,
       description: element.description,
       technology: element.technology,
-      tags: null,
+      tags: [...element.tags],
       links: null,
       color: inheritFromNodeOrAncestor?.color ?? element.color,
       shape: inheritFromNode?.shape ?? element.shape,
@@ -568,7 +573,7 @@ export function layoutRelationshipsView(
         relations,
         sourceHandle,
         targetHandle,
-      } = find(edges, e => e.name === ename)!
+      } = nonNullable(find(edges, e => e.name === ename))
       const onlyRelation = only(relations)
       const label = onlyRelation?.title ?? 'untitled'
       const isMultiple = relations.length > 1
@@ -602,7 +607,7 @@ export function useRelationshipsView(
   viewId: ViewId | null,
   scope: 'global' | 'view',
 ): LayoutRelationshipsViewResult {
-  const model = useLikeC4Model(true)
+  const model = useLikeC4Model()
   return useMemo(() => {
     const view = viewId ? model.findView(viewId) : null
     const data = layoutRelationshipsView(

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

@@ -1,7 +1,6 @@
 import {
   type Fqn,
-  DiagramNode,
-  ElementKind,
+  GroupElementKind,
   invariant,
   nonNullable,
   Queue,
@@ -47,7 +46,7 @@ export function viewToNodesEdge(
   let next: TraverseItem | undefined
   while ((next = queue.dequeue())) {
     const { node, parent } = next
-    const isCompound = hasAtLeast(node.children, 1) || node.kind == ElementKind.Group
+    const isCompound = hasAtLeast(node.children, 1) || node.kind == GroupElementKind
     if (isCompound) {
       for (const child of node.children) {
         queue.enqueue({ node: nodeById(child), parent: node })
@@ -83,7 +82,7 @@ export function viewToNodesEdge(
       }),
     } satisfies Omit<RelationshipsBrowserTypes.Node, 'data' | 'type'>
 
-    const fqn = DiagramNode.modelRef(node)
+    const fqn = node.modelRef ?? null
     // const deploymentRef = DiagramNode.deploymentRef(node)
     // if (!fqn) {
     //   console.error('Invalid node', node)
@@ -148,6 +147,7 @@ export function viewToNodesEdge(
               ports: node.ports,
               style: node.style,
               existsInCurrentView: node.existsInCurrentView,
+              tags: node.tags,
               ...navigateTo,
             },
           },