@likec4/diagram 1.31.0 → 1.32.1

package/src/LikeC4Diagram.props.ts

@@ -1,23 +1,21 @@
 import type {
+  Any,
   DiagramEdge,
   DiagramNode,
-  DiagramView,
-  Fqn,
-  RelationId,
+  LayoutedView,
   ViewChange,
-  ViewId,
   WhereOperator,
-} from '@likec4/core'
+} from '@likec4/core/types'
+import type * as aux from '@likec4/core/types/aux'
 import type { ReactFlowProps as XYFlowProps } from '@xyflow/react'
 import type { MouseEvent as ReactMouseEvent, ReactNode } from 'react'
+import type { SetRequired } from 'type-fest'
 import type { ControlsCustomLayout } from './context/ControlsCustomLayout'
 import type { CustomNodes } from './custom/customNodes'
 
 export type { CustomNodes, WhereOperator }
 
-export type DiagramNodeWithNavigate<ID = ViewId> = Omit<DiagramNode, 'navigateTo'> & {
-  navigateTo: ID
-}
+export type DiagramNodeWithNavigate<A extends Any> = SetRequired<DiagramNode<A>, 'navigateTo'>
 
 type ElementIconRendererProps = {
   node: {
@@ -25,24 +23,25 @@ type ElementIconRendererProps = {
     title: string
     icon?: string | null | undefined
   }
+  className?: string
 }
 
 export type ElementIconRenderer = (props: ElementIconRendererProps) => ReactNode
 
-export type OnNavigateTo<ID = ViewId> = (
-  to: ID,
+export type OnNavigateTo<A extends Any> = (
+  to: aux.ViewId<A>,
   // These fields present if navigateTo triggered by a node click
   event?: ReactMouseEvent,
-  element?: DiagramNodeWithNavigate<ID>,
+  element?: DiagramNodeWithNavigate<A>,
 ) => void
 
-export type OnNodeClick = (
-  node: DiagramNode,
+export type OnNodeClick<A extends Any> = (
+  node: DiagramNode<A>,
   event: ReactMouseEvent,
 ) => void
 
-export type OnEdgeClick = (
-  edge: DiagramEdge,
+export type OnEdgeClick<A extends Any> = (
+  edge: DiagramEdge<A>,
   event: ReactMouseEvent,
 ) => void
 
@@ -87,8 +86,8 @@ export type OverrideReactFlowProps = Pick<
 export type PaddingUnit = 'px' | '%'
 export type PaddingWithUnit = `${number}${PaddingUnit}` | number
 
-export interface LikeC4DiagramProperties {
-  view: DiagramView
+export interface LikeC4DiagramProperties<A extends aux.Any> {
+  view: LayoutedView<A>
 
   className?: string | undefined
 
@@ -135,7 +134,15 @@ export interface LikeC4DiagramProperties {
    */
   nodesDraggable?: boolean | undefined
 
+  /**
+   * Initial width of the diagram
+   * (supposed to be used during SSR)
+   */
   initialWidth?: number | undefined
+  /**
+   * Initial height of the diagram
+   * (supposed to be used during SSR)
+   */
   initialHeight?: number | undefined
 
   /**
@@ -157,7 +164,9 @@ export interface LikeC4DiagramProperties {
   showNavigationButtons?: undefined | boolean
 
   /**
-   * Display notations of the view
+   * Display notations in the bottom right corner
+   * (Active if only notations are present)
+   *
    * @default true
    */
   showNotations?: boolean | undefined
@@ -199,6 +208,12 @@ export interface LikeC4DiagramProperties {
    */
   enableDynamicViewWalkthrough?: boolean | undefined
 
+  /**
+   * Display element tags in the bottom left corner
+   * @default false
+   */
+  enableElementTags?: boolean | undefined
+
   /**
    * Experimental feature to enable edge editing
    * @default false
@@ -207,8 +222,9 @@ export interface LikeC4DiagramProperties {
 
   /**
    * Improve performance by hiding certain elements and reducing visual effects (disable mix-blend, shadows, animations)
+   * Enable it if you have a large or static view
    *
-   * @default 'auto' - will be set to true if view has more then 3000 * 2000 pixels
+   * @default 'auto' - will be `true` if view has more then 3000 * 2000 pixels
    */
   reduceGraphics?: 'auto' | boolean | undefined
 
@@ -231,7 +247,7 @@ export interface LikeC4DiagramProperties {
   /**
    * Dynamic filter, applies both to nodes and edges
    */
-  where?: WhereOperator<string, string> | undefined
+  where?: WhereOperator<A> | undefined
 
   /**
    * Override ReactFlow props
@@ -239,35 +255,35 @@ export interface LikeC4DiagramProperties {
   reactFlowProps?: OverrideReactFlowProps | undefined
 }
 
-export type OpenSourceParams =
+export type OpenSourceParams<A extends aux.Any = aux.Any> =
   | {
-    element: Fqn
+    element: aux.Fqn<A>
     property?: string
   }
   | {
-    relation: RelationId
+    relation: aux.RelationId
   }
   | {
-    deployment: Fqn
+    deployment: aux.DeploymentFqn<A>
     property?: string
   }
   | {
-    view: ViewId
+    view: aux.StrictViewId<A>
   }
 
-export interface LikeC4DiagramEventHandlers {
+export interface LikeC4DiagramEventHandlers<A extends aux.Any> {
   onChange?: OnChange | null | undefined
-  onNavigateTo?: OnNavigateTo | null | undefined
-  onNodeClick?: OnNodeClick | null | undefined
-  onNodeContextMenu?: OnNodeClick | null | undefined
+  onNavigateTo?: OnNavigateTo<A> | null | undefined
+  onNodeClick?: OnNodeClick<A> | null | undefined
+  onNodeContextMenu?: OnNodeClick<A> | null | undefined
   onCanvasContextMenu?: OnCanvasClick | null | undefined
-  onEdgeClick?: OnEdgeClick | null | undefined
-  onEdgeContextMenu?: OnEdgeClick | null | undefined
+  onEdgeClick?: OnEdgeClick<A> | null | undefined
+  onEdgeContextMenu?: OnEdgeClick<A> | null | undefined
   onCanvasClick?: OnCanvasClick | null | undefined
   onCanvasDblClick?: OnCanvasClick | null | undefined
 
   // if set, will render a burger menu icon in the top left corner
   onBurgerMenuClick?: null | undefined | (() => void)
 
-  onOpenSource?: null | undefined | ((params: OpenSourceParams) => void)
+  onOpenSource?: null | undefined | ((params: OpenSourceParams<A>) => void)
 }

package/src/LikeC4Diagram.tsx

@@ -1,6 +1,6 @@
+import type { Any } from '@likec4/core/types'
 import { ReactFlowProvider as XYFlowProvider } from '@xyflow/react'
 import { type PropsWithChildren, useRef } from 'react'
-import { isEmpty } from 'remeda'
 import {
   DiagramEventHandlers,
   DiagramFeatures,
@@ -15,11 +15,14 @@ import { LikeC4CustomColors } from './LikeC4CustomColors'
 import { type LikeC4DiagramEventHandlers, type LikeC4DiagramProperties } from './LikeC4Diagram.props'
 import { LikeC4DiagramXYFlow } from './likec4diagram/DiagramXYFlow'
 import type { Types } from './likec4diagram/types'
-import { useLikeC4Model } from './likec4model'
 import { DiagramActorProvider } from './state/DiagramActorProvider'
 
-export type LikeC4DiagramProps = PropsWithChildren<LikeC4DiagramProperties & LikeC4DiagramEventHandlers>
-export function LikeC4Diagram({
+export type LikeC4DiagramProps<A extends Any = Any> = PropsWithChildren<
+  & LikeC4DiagramProperties<A>
+  & LikeC4DiagramEventHandlers<A>
+>
+
+export function LikeC4Diagram<A extends Any = Any>({
   onCanvasClick,
   onCanvasContextMenu,
   onCanvasDblClick,
@@ -39,6 +42,7 @@ export function LikeC4Diagram({
   pannable = true,
   zoomable = true,
   background = 'dots',
+  enableElementTags = false,
   enableFocusMode = false,
   enableElementDetails = false,
   enableRelationshipDetails = enableElementDetails,
@@ -61,8 +65,7 @@ export function LikeC4Diagram({
   reactFlowProps = {},
   renderNodes,
   children,
-}: LikeC4DiagramProps) {
-  const hasLikec4model = !!useLikeC4Model()
+}: LikeC4DiagramProps<A>) {
   const initialRef = useRef<{
     defaultNodes: Types.Node[]
     defaultEdges: Types.Edge[]
@@ -70,8 +73,6 @@ export function LikeC4Diagram({
     initialHeight: number
   }>(null)
 
-  const isDynamicView = view.__ === 'dynamic'
-
   if (initialRef.current == null) {
     initialRef.current = {
       defaultEdges: [],
@@ -104,13 +105,13 @@ export function LikeC4Diagram({
               enableRelationshipBrowser,
               enableSearch,
               enableNavigationButtons: showNavigationButtons && !!onNavigateTo,
-              enableDynamicViewWalkthrough: isDynamicView && enableDynamicViewWalkthrough,
+              enableDynamicViewWalkthrough: view._type === 'dynamic' && enableDynamicViewWalkthrough,
               enableEdgeEditing: experimentalEdgeEditing,
               enableNotations: showNotations,
               enableVscode: !!onOpenSource,
               enableControls: controls,
               enableViewTitle: showDiagramTitle,
-              enableLikeC4Model: hasLikec4model,
+              enableElementTags,
             }}
           >
             <DiagramEventHandlers
@@ -129,21 +130,19 @@ export function LikeC4Diagram({
               }}>
               <ReduceGraphicsContext reduceGraphics={isReducedGraphicsMode}>
                 <RootContainer className={className} reduceGraphics={isReducedGraphicsMode}>
-                  {!isEmpty(view.customColorDefinitions) && (
-                    <LikeC4CustomColors customColors={view.customColorDefinitions} />
-                  )}
+                  <LikeC4CustomColors />
                   <XYFlowProvider
                     fitView={fitView}
                     {...initialRef.current}
                   >
                     <DiagramActorProvider
-                      input={{
-                        view,
-                        pannable,
-                        zoomable,
-                        nodesSelectable,
-                        fitViewPadding,
-                      }}>
+                      view={view}
+                      zoomable={zoomable}
+                      pannable={pannable}
+                      fitViewPadding={fitViewPadding}
+                      nodesSelectable={nodesSelectable}
+                      where={where ?? null}
+                    >
                       <ControlsCustomLayoutProvider value={renderControls ?? null}>
                         <LikeC4DiagramXYFlow
                           nodesDraggable={nodesDraggable}

package/src/LikeC4ModelProvider.tsx

@@ -1,18 +1,19 @@
-import type { AnyAux, LikeC4Model } from '@likec4/core/model'
+import type { LikeC4Model } from '@likec4/core/model'
+import type { Any, Unknown } from '@likec4/core/types'
 import { type PropsWithChildren } from 'react'
 import { LikeC4ModelContext } from './likec4model/LikeC4ModelContext'
 
-export type LikeC4ModelProviderProps = PropsWithChildren<{
-  likec4model: LikeC4Model<AnyAux>
+export type LikeC4ModelProviderProps<A extends Any> = PropsWithChildren<{
+  likec4model: LikeC4Model<A>
 }>
 
 /**
  * Ensures LikeC4Model context
  */
-export function LikeC4ModelProvider({
+export function LikeC4ModelProvider<A extends Any = Unknown>({
   children,
   likec4model,
-}: LikeC4ModelProviderProps) {
+}: LikeC4ModelProviderProps<A>) {
   return (
     <LikeC4ModelContext.Provider value={likec4model}>
       {children}

package/src/StaticLikeC4Diagram.tsx

@@ -1,8 +1,9 @@
+import type * as aux from '@likec4/core/types/aux'
 import { LikeC4Diagram } from './LikeC4Diagram'
 import type { LikeC4DiagramProperties } from './LikeC4Diagram.props'
 
-export type StaticLikeC4DiagramProps = Pick<
-  LikeC4DiagramProperties,
+export type StaticLikeC4DiagramProps<A extends aux.Any> = Pick<
+  LikeC4DiagramProperties<A>,
   | 'view'
   | 'className'
   | 'fitView'
@@ -11,6 +12,7 @@ export type StaticLikeC4DiagramProps = Pick<
   | 'enableElementDetails'
   | 'enableRelationshipDetails'
   | 'enableRelationshipBrowser'
+  | 'enableElementTags'
   | 'reduceGraphics'
   | 'initialWidth'
   | 'initialHeight'
@@ -19,16 +21,15 @@ export type StaticLikeC4DiagramProps = Pick<
   | 'where'
 >
 
-export function StaticLikeC4Diagram({
+export function StaticLikeC4Diagram<A extends aux.Any = aux.UnknownLayouted>({
   view,
   fitView = true,
   fitViewPadding = '8px',
-  enableElementDetails = false,
   enableRelationshipDetails = false,
   enableRelationshipBrowser = enableRelationshipDetails,
   background = 'transparent',
   ...rest
-}: StaticLikeC4DiagramProps) {
+}: StaticLikeC4DiagramProps<A>) {
   return (
     <LikeC4Diagram
       view={view}
@@ -41,7 +42,7 @@ export function StaticLikeC4Diagram({
       background={background}
       showDiagramTitle={false}
       showNotations={false}
-      enableElementDetails={enableElementDetails}
+      enableElementDetails={false}
       enableRelationshipDetails={enableRelationshipDetails}
       enableRelationshipBrowser={enableRelationshipBrowser}
       enableDynamicViewWalkthrough={false}
@@ -51,6 +52,7 @@ export function StaticLikeC4Diagram({
       enableSearch={false}
       nodesSelectable={false}
       nodesDraggable={false}
+      enableElementTags={false}
       {...rest}
     />
   )

package/src/base/const.ts

@@ -6,4 +6,4 @@ export const ZIndexes = {
 } as const
 
 export const MinZoom = 0.05
-export const MaxZoom = 2
+export const MaxZoom = 3

package/src/base/index.ts

@@ -1,10 +1,11 @@
 export { BaseXYFlow, type BaseXYFlowProps } from './BaseXYFlow'
 
 export {
-  Base,
   type EdgeProps,
   type NodeProps,
   type NonOptional,
   type ReactFlowEdge,
   type ReactFlowNode,
 } from './types'
+
+export * as Base from './types.Base'

package/src/base/primitives/compound/CompoundActionButton.tsx

@@ -1,6 +1,7 @@
 import { css, cx } from '@likec4/styles/css'
+import { Box } from '@likec4/styles/jsx'
 import { actionBtn } from '@likec4/styles/recipes'
-import { ActionIcon, Box } from '@mantine/core'
+import { ActionIcon } from '@mantine/core'
 import { useDebouncedValue } from '@mantine/hooks'
 import { IconZoomScan } from '@tabler/icons-react'
 import * as m from 'motion/react-m'

package/src/base/primitives/compound/CompoundDetailsButton.tsx

@@ -1,6 +1,7 @@
 import { css, cx } from '@likec4/styles/css'
+import { Box } from '@likec4/styles/jsx'
 import { actionBtn } from '@likec4/styles/recipes'
-import { ActionIcon, Box } from '@mantine/core'
+import { ActionIcon } from '@mantine/core'
 import { useDebouncedValue } from '@mantine/hooks'
 import { IconId } from '@tabler/icons-react'
 import * as m from 'motion/react-m'

package/src/base/primitives/compound/CompoundTitle.tsx

@@ -1,6 +1,7 @@
-import type { DiagramNode } from '@likec4/core'
+import type { DiagramNode } from '@likec4/core/types'
 import { css, cx } from '@likec4/styles/css'
-import { Box, Text } from '@mantine/core'
+import { Box } from '@likec4/styles/jsx'
+import { Text } from '@mantine/core'
 import { IconRenderer } from '../../../context'
 import type { NodeProps } from '../../types'
 

package/src/base/primitives/edge/EdgeContainer.tsx

@@ -1,4 +1,5 @@
-import { type DiagramEdge, invariant } from '@likec4/core'
+import { invariant } from '@likec4/core'
+import type { DiagramEdge } from '@likec4/core/types'
 import { css, cx } from '@likec4/styles/css'
 import { type PropsWithChildren } from 'react'
 import type { UndefinedOnPartialDeep } from 'type-fest'

package/src/base/primitives/edge/EdgeLabel.css.ts

@@ -67,6 +67,7 @@ export const labelsva = sva({
   slots: ['root', 'stepNumber', 'labelContents', 'labelText', 'labelTechnology'],
   base: {
     root: {
+      pointerEvents: 'all',
       fontFamily: 'likec4.relation',
       padding: '3px 5px 5px 5px',
       display: 'flex',

package/src/base/primitives/edge/EdgeLabel.tsx

@@ -1,8 +1,9 @@
-import { type DiagramEdge, extractStep, isStepEdgeId } from '@likec4/core'
+import { extractStep, isStepEdgeId } from '@likec4/core'
+import type { DiagramEdge } from '@likec4/core/types'
 import { cx } from '@likec4/styles/css'
 import { type BoxProps, Box } from '@likec4/styles/jsx'
 import { Text } from '@mantine/core'
-import { type PropsWithChildren } from 'react'
+import { type PropsWithChildren, forwardRef } from 'react'
 import { isTruthy } from 'remeda'
 import type { UndefinedOnPartialDeep } from 'type-fest'
 import type { EdgeProps } from '../../types'
@@ -22,26 +23,29 @@ type EdgeLabelProps = PropsWithChildren<
   }
 >
 
-export function EdgeLabel({
-  edgeProps: {
-    id,
-    data: {
-      label,
-      technology,
+export const EdgeLabel = forwardRef<HTMLDivElement, EdgeLabelProps>((
+  {
+    edgeProps: {
+      id,
+      data: {
+        label,
+        technology,
+      },
     },
+    className,
+    style,
+    children,
+    ...rest
   },
-  className,
-  style,
-  children,
-  ...rest
-}: EdgeLabelProps) {
+  ref,
+) => {
   const stepNum = isStepEdgeId(id) ? extractStep(id) : null
   const classes = labelsva({
     isStepEdge: stepNum !== null,
   })
 
   return (
-    <Box className={cx(classes.root!, className)} {...rest}>
+    <Box ref={ref} className={cx(classes.root!, className)} {...rest}>
       {stepNum !== null && (
         <Box className={classes.stepNumber!}>
           {stepNum}
@@ -62,4 +66,5 @@ export function EdgeLabel({
       </Box>
     </Box>
   )
-}
+})
+EdgeLabel.displayName = 'EdgeLabel'

package/src/base/primitives/edge/EdgeLabelContainer.tsx

@@ -1,4 +1,4 @@
-import { type DiagramEdge } from '@likec4/core'
+import type { DiagramEdge } from '@likec4/core/types'
 import { css, cx } from '@likec4/styles/css'
 import { EdgeLabelRenderer } from '@xyflow/react'
 import { type HTMLAttributes } from 'react'

package/src/base/primitives/edge/EdgeMarkers.tsx

@@ -1,4 +1,5 @@
-import { type RelationshipArrowType, nonexhaustive } from '@likec4/core'
+import { nonexhaustive } from '@likec4/core'
+import type { RelationshipArrowType } from '@likec4/core/types'
 import type { SVGProps } from 'react'
 
 const Open = (props: SVGProps<SVGMarkerElement>) => (

package/src/base/primitives/edge/EdgePath.tsx

@@ -1,4 +1,4 @@
-import type { DiagramEdge } from '@likec4/core'
+import type { DiagramEdge } from '@likec4/core/types'
 import { css, cx } from '@likec4/styles/css'
 import { type PointerEventHandler, forwardRef } from 'react'
 import type { UndefinedOnPartialDeep } from 'type-fest'

package/src/base/primitives/element/ElementActionButtons.tsx

@@ -1,6 +1,7 @@
 import { css, cx } from '@likec4/styles/css'
+import { Box } from '@likec4/styles/jsx'
 import { actionBtn } from '@likec4/styles/recipes'
-import { ActionIcon, Box } from '@mantine/core'
+import { ActionIcon } from '@mantine/core'
 import { useId } from '@mantine/hooks'
 import * as m from 'motion/react-m'
 import { useIsZoomTooSmall } from '../../../hooks/useXYFlow'
@@ -13,11 +14,12 @@ type ElementActionButtonsProps = NodeProps & {
 
 const container = css({
   position: 'absolute',
-  top: `calc(100% - 28px)`,
-  // transform: 'translateY(-100%)',
-  left: 0,
-  width: '100%',
-  minHeight: '28px',
+  zIndex: 1,
+  top: `calc(100% - 30px)`,
+  transform: 'translateX(-50%)',
+  left: `50%`,
+  width: 'auto',
+  minHeight: '30px',
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
@@ -47,14 +49,13 @@ export function ElementActionButtons({
   }
   return (
     <Box className={container}>
-      <Box
-        component={m.div}
+      <m.div
         layoutRoot
         key={`${id}-action-buttons`}
         initial={false}
         style={{
           originY: 0,
-          gap: '8px',
+          gap: 6,
         }}
         animate={{
           opacity: (isHovered || selected) ? 1 : 0.75,
@@ -82,7 +83,7 @@ export function ElementActionButtons({
             {button.icon}
           </ActionIcon>
         ))}
-      </Box>
+      </m.div>
     </Box>
   )
 }

package/src/base/primitives/element/ElementDetailsButton.tsx

@@ -1,6 +1,7 @@
 import { css, cx } from '@likec4/styles/css'
+import { Box } from '@likec4/styles/jsx'
 import { actionBtn } from '@likec4/styles/recipes'
-import { ActionIcon, Box } from '@mantine/core'
+import { ActionIcon } from '@mantine/core'
 import { useId } from '@mantine/hooks'
 import { IconId } from '@tabler/icons-react'
 import * as m from 'motion/react-m'

package/src/base/primitives/element/ElementShape.tsx

@@ -1,4 +1,5 @@
-import { type ElementShape, type ElementStyle, nonexhaustive } from '@likec4/core'
+import { nonexhaustive } from '@likec4/core'
+import type { ElementShape, ElementStyle } from '@likec4/core/types'
 import { cx as clsx } from '@likec4/styles/css'
 import { toDomPrecision } from '../../../utils/xyflow'
 import * as css from './ElementShape.css'