@likec4/diagram 1.30.0 → 1.32.0

package/src/likec4diagram/custom/edges/RelationshipEdge.tsx

@@ -2,10 +2,10 @@ import {
   type EdgeId,
   nonNullable,
 } from '@likec4/core'
+import { cx as clsx } from '@likec4/styles/css'
 import { useDebouncedEffect } from '@react-hookz/web'
 import type { XYPosition } from '@xyflow/react'
 import { EdgeLabelRenderer } from '@xyflow/react'
-import clsx from 'clsx'
 import { curveCatmullRomOpen, line as d3line } from 'd3-shape'
 import { type PointerEvent as ReactPointerEvent, useEffect, useRef, useState } from 'react'
 import { first, isTruthy, last } from 'remeda'
@@ -193,6 +193,10 @@ export const RelationshipEdge = customEdge<Types.RelationshipEdgeData>((props) =
       }
       setIsControlPointDragging(false)
     }
+    const onClick = (e: MouseEvent) => {
+      e.stopPropagation()
+      e.preventDefault()
+    }
 
     domNode.addEventListener('pointermove', onPointerMove, {
       capture: true,
@@ -201,6 +205,11 @@ export const RelationshipEdge = customEdge<Types.RelationshipEdgeData>((props) =
       once: true,
       capture: true,
     })
+    // Handle click to prevent it from being handled by the edge #1945
+    domNode.addEventListener('click', onClick, {
+      capture: true,
+      once: true,
+    })
   }
 
   const onRmbControlPointerDown = (index: number, e: ReactPointerEvent<SVGCircleElement>, domNode: HTMLDivElement) => {

package/src/likec4diagram/custom/edges/RelationshipsDropdownMenu.tsx

@@ -1,11 +1,10 @@
 import {
   type DiagramEdge,
+  type DiagramNode,
   type EdgeId,
-  type LikeC4Model,
-  type NodeId,
-  DiagramNode,
   nameFromFqn,
 } from '@likec4/core'
+import type { LikeC4Model } from '@likec4/core/model'
 import { css, cx } from '@likec4/styles/css'
 import {
   type StackProps,
@@ -28,7 +27,7 @@ import { IconArrowRight, IconFileSymlink, IconInfoCircle, IconZoomScan } from '@
 import { type MouseEventHandler, type PropsWithChildren, forwardRef, Fragment, memo, useCallback } from 'react'
 import { filter, isTruthy, map, partition, pipe } from 'remeda'
 import { Link } from '../../../components/Link'
-import { IfEnabled, useDiagramEventHandlers, useEnabledFeature } from '../../../context'
+import { IfEnabled, useDiagramEventHandlers, useEnabledFeatures } from '../../../context'
 import { useMantinePortalProps } from '../../../hooks'
 import { useDiagram, useDiagramContext } from '../../../hooks/useDiagram'
 import { useLikeC4Model } from '../../../likec4model'
@@ -62,12 +61,16 @@ export const RelationshipsDropdownMenu = memo((
     disabled?: boolean | undefined
   }>,
 ) => {
-  const { diagramEdge, sourceNode, targetNode } = useDiagramContext(ctx => ({
-    diagramEdge: findDiagramEdge(ctx, edgeId),
-    sourceNode: findDiagramNode(ctx, source),
-    targetNode: findDiagramNode(ctx, target),
-  }))
-  const likec4model = useLikeC4Model(true)
+  const { diagramEdge, sourceNode, targetNode } = useDiagramContext(
+    ctx => ({
+      diagramEdge: findDiagramEdge(ctx, edgeId),
+      sourceNode: findDiagramNode(ctx, source),
+      targetNode: findDiagramNode(ctx, target),
+    }),
+    undefined,
+    [edgeId, source, target],
+  )
+  const likec4model = useLikeC4Model()
   const diagram = useDiagram()
 
   const portalProps = useMantinePortalProps()
@@ -188,7 +191,7 @@ const Relationship = forwardRef<
   ...props
 }, ref) => {
   const diagram = useDiagram()
-  const { enableNavigateTo } = useEnabledFeature('NavigateTo')
+  const { enableNavigateTo } = useEnabledFeatures()
   const { onOpenSource } = useDiagramEventHandlers()
   const viewId = diagram.currentView.id
 
@@ -264,15 +267,15 @@ const Relationship = forwardRef<
 })
 
 function getShortId(
-  r: LikeC4Model.AnyRelation<LikeC4Model.Any>,
-  actualEndpointId: NodeId<string>,
+  r: LikeC4Model.AnyRelation,
+  actualEndpointId: string,
   diagramNode: DiagramNode,
 ) {
   const diagramNodeId = r.isDeploymentRelation()
     // Relation defined in deployment model. Use id of the deployment node as is.
     ? diagramNode.id
     // Relation defined in model. Get id of the model element
-    : DiagramNode.modelRef(diagramNode) || ''
+    : diagramNode.modelRef || ''
 
   return nameFromFqn(diagramNodeId) + actualEndpointId.slice(diagramNodeId.length)
 }

package/src/likec4diagram/custom/{index.tsx → index.ts}

@@ -6,9 +6,9 @@ import {
   DeploymentNode,
   ElementNode,
   ViewGroupNode,
-} from './nodes/nodeTypes'
+} from './nodes/nodes'
 
-export const nodeTypes = {
+export const BuiltinNodes = {
   element: ElementNode,
   deployment: DeploymentNode,
   'compound-element': CompoundElementNode,

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

@@ -1,14 +1,14 @@
 import type { NodeId } from '@likec4/core'
 import { CompoundActionButton } from '../../../base/primitives'
 import type { NodeProps } from '../../../base/types'
-import { useEnabledFeature } from '../../../context'
+import { useEnabledFeatures } from '../../../context/DiagramFeatures'
 import { useDiagram } from '../../../hooks/useDiagram'
 import type { Types } from '../../types'
 
 type CompoundActionsProps = NodeProps<Types.CompoundElementNodeData | Types.CompoundDeploymentNodeData>
 
 export const CompoundActions = (props: CompoundActionsProps) => {
-  const { enableNavigateTo } = useEnabledFeature('NavigateTo')
+  const { enableNavigateTo } = useEnabledFeatures()
   const diagram = useDiagram()
 
   const { navigateTo } = props.data

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

@@ -1,74 +1,117 @@
-import type { NodeId } from '@likec4/core'
+import { type NodeId, hasAtLeast } from '@likec4/core'
 import { IconTransform, IconZoomScan } from '@tabler/icons-react'
+import { useMemo } from 'react'
 import { ElementActionButtons } from '../../../base/primitives'
 import type { NodeProps } from '../../../base/types'
-import { useEnabledFeature } from '../../../context'
+import { useEnabledFeatures } from '../../../context/DiagramFeatures'
 import { useDiagram } from '../../../hooks/useDiagram'
 import type { Types } from '../../types'
 
-type ElementActionsProps = NodeProps<Types.ElementNodeData>
-export const ElementActions = (props: ElementActionsProps) => {
-  const { enableNavigateTo, enableRelationshipBrowser } = useEnabledFeature('RelationshipBrowser', 'NavigateTo')
-  const diagram = useDiagram()
+type WithExtraButtons = {
+  /**
+   * Add extra action buttons
+   * @example
+   * ```tsx
+   * <ElementActions
+   *   extraButtons={[
+   *     {
+   *       key: 'extra',
+   *       icon: <IconZoomScan />,
+   *       onClick: (e) => {
+   *         e.stopPropagation()
+   *         console.log('extra action clicked')
+   *       },
+   *       },
+   *     },
+   *   ]}
+   * />
+   * ```
+   */
+  extraButtons?: ElementActionButtons.Item[]
+}
 
-  const buttons = [] as ElementActionButtons.Item[]
+export type ElementActionsProps = NodeProps<Types.ElementNodeData> & WithExtraButtons
 
+export const ElementActions = ({
+  extraButtons,
+  ...props
+}: ElementActionsProps) => {
+  const { enableNavigateTo, enableRelationshipBrowser } = useEnabledFeatures()
+  const diagram = useDiagram()
   const { navigateTo, modelFqn } = props.data
-  if (navigateTo && enableNavigateTo) {
-    buttons.push({
-      key: 'navigate',
-      icon: <IconZoomScan />,
-      onClick: (e) => {
-        e.stopPropagation()
-        diagram.navigateTo(navigateTo, props.id as NodeId)
-      },
-    })
-  }
-  if (enableRelationshipBrowser) {
-    buttons.push({
-      key: 'relationships',
-      icon: <IconTransform />,
-      onClick: (e) => {
-        e.stopPropagation()
-        diagram.openRelationshipsBrowser(modelFqn)
-      },
-    })
+  let buttons = useMemo(() => {
+    const buttons = [] as ElementActionButtons.Item[]
+
+    if (navigateTo && enableNavigateTo) {
+      buttons.push({
+        key: 'navigate',
+        icon: <IconZoomScan />,
+        onClick: (e) => {
+          e.stopPropagation()
+          diagram.navigateTo(navigateTo, props.id as NodeId)
+        },
+      })
+    }
+    if (enableRelationshipBrowser) {
+      buttons.push({
+        key: 'relationships',
+        icon: <IconTransform />,
+        onClick: (e) => {
+          e.stopPropagation()
+          diagram.openRelationshipsBrowser(modelFqn)
+        },
+      })
+    }
+    return buttons
+  }, [enableNavigateTo, enableRelationshipBrowser, diagram, modelFqn, navigateTo, props.id])
+
+  if (extraButtons && hasAtLeast(extraButtons, 1)) {
+    buttons = [...buttons, ...extraButtons]
   }
-  return (
-    <ElementActionButtons
-      buttons={buttons}
-      {...props}
-    />
-  )
+
+  // Spread all ReactFlow node props and override buttons with our computed buttons
+  return <ElementActionButtons {...props} buttons={buttons} />
 }
 
-type DeploymentElementActionsProps = NodeProps<Types.DeploymentElementNodeData>
-export const DeploymentElementActions = (props: DeploymentElementActionsProps) => {
-  const { enableNavigateTo, enableRelationshipBrowser } = useEnabledFeature('NavigateTo', 'RelationshipBrowser')
+export type DeploymentElementActionsProps = NodeProps<Types.DeploymentElementNodeData> & WithExtraButtons
+export const DeploymentElementActions = ({
+  extraButtons,
+  ...props
+}: DeploymentElementActionsProps) => {
+  const { enableNavigateTo, enableRelationshipBrowser } = useEnabledFeatures()
   const diagram = useDiagram()
+  const { navigateTo, modelFqn } = props.data
 
-  const buttons = [] as ElementActionButtons.Item[]
+  let buttons = useMemo(() => {
+    const buttons = [] as ElementActionButtons.Item[]
 
-  const { navigateTo, modelFqn } = props.data
-  if (navigateTo && enableNavigateTo) {
-    buttons.push({
-      key: 'navigate',
-      icon: <IconZoomScan />,
-      onClick: (e) => {
-        e.stopPropagation()
-        diagram.navigateTo(navigateTo, props.id as NodeId)
-      },
-    })
-  }
-  if (enableRelationshipBrowser && !!modelFqn) {
-    buttons.push({
-      key: 'relationships',
-      icon: <IconTransform />,
-      onClick: (e) => {
-        e.stopPropagation()
-        diagram.openRelationshipsBrowser(modelFqn)
-      },
-    })
+    if (navigateTo && enableNavigateTo) {
+      buttons.push({
+        key: 'navigate',
+        icon: <IconZoomScan />,
+        onClick: (e) => {
+          e.stopPropagation()
+          diagram.navigateTo(navigateTo, props.id as NodeId)
+        },
+      })
+    }
+    if (enableRelationshipBrowser && !!modelFqn) {
+      buttons.push({
+        key: 'relationships',
+        icon: <IconTransform />,
+        onClick: (e) => {
+          e.stopPropagation()
+          diagram.openRelationshipsBrowser(modelFqn)
+        },
+      })
+    }
+    return buttons
+  }, [enableNavigateTo, enableRelationshipBrowser, diagram, modelFqn, navigateTo, props.id])
+
+  if (extraButtons && hasAtLeast(extraButtons, 1)) {
+    buttons = [...buttons, ...extraButtons]
   }
-  return <ElementActionButtons buttons={buttons} {...props} />
+
+  // Spread all ReactFlow node props and override buttons with our computed buttons
+  return <ElementActionButtons {...props} buttons={buttons} />
 }

package/src/likec4diagram/custom/nodes/index.ts

@@ -0,0 +1,17 @@
+export { CompoundActions } from './CompoundActions'
+export { DeploymentElementActions, ElementActions } from './ElementActions'
+export {
+  CompoundDeploymentNode,
+  CompoundDetailsButtonWithHandler,
+  CompoundElementNode,
+  DeploymentNode,
+  ElementDetailsButtonWithHandler,
+  ElementNode,
+  ViewGroupNode,
+} from './nodes'
+
+export * from './CompoundActions'
+export * from './ElementActions'
+export * from './toolbar/CompoundToolbar'
+export * from './toolbar/ElementToolbar'
+export * from './toolbar/Toolbar'

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

@@ -0,0 +1,127 @@
+import { type NodeId } from '@likec4/core'
+import type { NodeProps } from '../../../base'
+import {
+  CompoundDetailsButton,
+  CompoundNodeContainer,
+  CompoundTitle,
+  customNode,
+  DefaultHandles,
+  ElementDetailsButton,
+  ElementNodeContainer,
+  ElementShape,
+  ElementTags,
+  ElementTitle,
+} from '../../../base/primitives'
+import { useEnabledFeatures } from '../../../context/DiagramFeatures'
+import { useDiagram } from '../../../hooks/useDiagram'
+import type { Types } from '../../types'
+import { CompoundActions } from './CompoundActions'
+import { DeploymentElementActions, ElementActions } from './ElementActions'
+import { CompoundDeploymentToolbar, CompoundElementToolbar } from './toolbar/CompoundToolbar'
+import { DeploymentElementToolbar, ElementToolbar } from './toolbar/ElementToolbar'
+
+export function ElementDetailsButtonWithHandler(
+  props: NodeProps<Types.ElementNodeData | Types.DeploymentElementNodeData>,
+) {
+  const { enableElementDetails } = useEnabledFeatures()
+  const diagram = useDiagram()
+  const fqn = props.data.modelFqn
+
+  if (!enableElementDetails || !fqn) return null
+
+  return (
+    <ElementDetailsButton
+      {...props}
+      onClick={e => {
+        e.stopPropagation()
+        diagram.openElementDetails(fqn, props.id as NodeId)
+      }} />
+  )
+}
+
+export function CompoundDetailsButtonWithHandler(
+  props: NodeProps<Types.CompoundElementNodeData | Types.CompoundDeploymentNodeData>,
+) {
+  const { enableElementDetails } = useEnabledFeatures()
+  const diagram = useDiagram()
+  const fqn = props.data.modelFqn
+
+  if (!enableElementDetails || !fqn) return null
+
+  return (
+    <CompoundDetailsButton
+      {...props}
+      onClick={e => {
+        e.stopPropagation()
+        diagram.openElementDetails(fqn, props.id as NodeId)
+      }} />
+  )
+}
+
+export const ElementNode = customNode<Types.ElementNodeData, 'element'>(props => {
+  const { enableElementTags, enableReadOnly } = useEnabledFeatures()
+  return (
+    <ElementNodeContainer nodeProps={props}>
+      <ElementShape {...props} />
+      <ElementTitle {...props} />
+      {enableElementTags && <ElementTags {...props} />}
+      <ElementActions {...props} />
+      <ElementDetailsButtonWithHandler {...props} />
+      {!enableReadOnly && <ElementToolbar {...props} />}
+      <DefaultHandles />
+    </ElementNodeContainer>
+  )
+})
+ElementNode.displayName = 'ElementNode'
+
+export const DeploymentNode = customNode<Types.DeploymentElementNodeData, 'deployment'>((props) => {
+  const { enableElementTags, enableReadOnly } = useEnabledFeatures()
+  return (
+    <ElementNodeContainer nodeProps={props}>
+      <ElementShape {...props} />
+      <ElementTitle {...props} />
+      {enableElementTags && <ElementTags {...props} />}
+      <DeploymentElementActions {...props} />
+      <ElementDetailsButtonWithHandler {...props} />
+      {!enableReadOnly && <DeploymentElementToolbar {...props} />}
+      <DefaultHandles />
+    </ElementNodeContainer>
+  )
+})
+DeploymentNode.displayName = 'DeploymentNode'
+
+export const CompoundElementNode = customNode<Types.CompoundElementNodeData, 'compound-element'>((props) => {
+  const { enableElementDetails, enableReadOnly } = useEnabledFeatures()
+  return (
+    <CompoundNodeContainer nodeProps={props}>
+      <CompoundTitle {...props} />
+      <CompoundActions {...props} />
+      {enableElementDetails && <CompoundDetailsButtonWithHandler {...props} />}
+      {!enableReadOnly && <CompoundElementToolbar {...props} />}
+      <DefaultHandles />
+    </CompoundNodeContainer>
+  )
+})
+CompoundElementNode.displayName = 'CompoundElementNode'
+
+export const CompoundDeploymentNode = customNode<Types.CompoundDeploymentNodeData, 'compound-deployment'>((props) => {
+  const { enableElementDetails, enableReadOnly } = useEnabledFeatures()
+  return (
+    <CompoundNodeContainer nodeProps={props}>
+      <CompoundTitle {...props} />
+      <CompoundActions {...props} />
+      {enableElementDetails && <CompoundDetailsButtonWithHandler {...props} />}
+      {!enableReadOnly && <CompoundDeploymentToolbar {...props} />}
+      <DefaultHandles />
+    </CompoundNodeContainer>
+  )
+})
+CompoundDeploymentNode.displayName = 'CompoundDeploymentNode'
+
+export const ViewGroupNode = customNode<Types.ViewGroupNodeData, 'view-group'>((props) => (
+  <CompoundNodeContainer nodeProps={props}>
+    <CompoundTitle {...props} />
+    <DefaultHandles />
+  </CompoundNodeContainer>
+))
+ViewGroupNode.displayName = 'ViewGroupNode'

package/src/likec4diagram/custom/nodes/toolbar/CompoundToolbar.tsx

@@ -2,7 +2,7 @@ import { type BorderStyle } from '@likec4/core'
 import { Box, SegmentedControl } from '@mantine/core'
 import { useEffect, useState } from 'react'
 import type { NodeProps } from '../../../../base/types'
-import { useEnabledFeature } from '../../../../context'
+import { useEnabledFeatures } from '../../../../context/DiagramFeatures'
 import type { Types } from '../../../types'
 import type { OnStyleChange } from './_shared'
 import { BrowseRelationshipsButton, GoToSourceButton, useHandlers } from './_shared'
@@ -11,7 +11,7 @@ import { Toolbar } from './Toolbar'
 
 type CompoundElementToolbarProps = NodeProps<Types.CompoundElementNodeData>
 export function CompoundElementToolbar(props: CompoundElementToolbarProps) {
-  const { enableVscode, enableRelationshipBrowser } = useEnabledFeature('RelationshipBrowser', 'Vscode')
+  const { enableVscode, enableRelationshipBrowser } = useEnabledFeatures()
   const {
     data: {
       style,
@@ -20,7 +20,6 @@ export function CompoundElementToolbar(props: CompoundElementToolbarProps) {
   } = props
 
   const { elementColor, onColorPreview, onChange } = useHandlers(modelFqn, props)
-
   return (
     <Toolbar
       nodeProps={props}
@@ -46,7 +45,7 @@ export function CompoundElementToolbar(props: CompoundElementToolbarProps) {
 
 type CompoundDeploymentToolbarProps = NodeProps<Types.CompoundDeploymentNodeData>
 export function CompoundDeploymentToolbar(props: CompoundDeploymentToolbarProps) {
-  const { enableVscode, enableRelationshipBrowser } = useEnabledFeature('RelationshipBrowser', 'Vscode')
+  const { enableVscode, enableRelationshipBrowser } = useEnabledFeatures()
   const {
     data: {
       deploymentFqn,

package/src/likec4diagram/custom/nodes/toolbar/ElementToolbar.tsx

@@ -2,7 +2,7 @@ import { type ElementShape, ElementShapes } from '@likec4/core'
 import { Button, Menu, MenuDropdown, MenuItem, MenuTarget } from '@mantine/core'
 import { IconCheck, IconSelector } from '@tabler/icons-react'
 import type { NodeProps } from '../../../../base/types'
-import { useEnabledFeature } from '../../../../context'
+import { useEnabledFeatures } from '../../../../context/DiagramFeatures'
 import { stopPropagation } from '../../../../utils/xyflow'
 import type { Types } from '../../../types'
 import type { OnStyleChange } from './_shared'
@@ -12,7 +12,7 @@ import { Toolbar } from './Toolbar'
 
 type ElementToolbarProps = NodeProps<Types.ElementNodeData>
 export function ElementToolbar(props: ElementToolbarProps) {
-  const { enableVscode, enableRelationshipBrowser } = useEnabledFeature('RelationshipBrowser', 'Vscode')
+  const { enableVscode, enableRelationshipBrowser } = useEnabledFeatures()
   const {
     data: {
       shape,
@@ -45,7 +45,7 @@ export function ElementToolbar(props: ElementToolbarProps) {
 
 type DeploymentElementToolbarProps = NodeProps<Types.DeploymentElementNodeData>
 export function DeploymentElementToolbar(props: DeploymentElementToolbarProps) {
-  const { enableVscode, enableRelationshipBrowser } = useEnabledFeature('RelationshipBrowser', 'Vscode')
+  const { enableVscode, enableRelationshipBrowser } = useEnabledFeatures()
   const {
     data: {
       shape,

package/src/likec4diagram/custom/nodes/toolbar/Toolbar.tsx

@@ -1,15 +1,16 @@
-import { Box, Group, Paper, Stack, Text, Tooltip } from '@mantine/core'
+import { cx as clsx } from '@likec4/styles/css'
+import { Box, Group, Paper, Stack, Text } from '@mantine/core'
 import { useDebouncedValue } from '@mantine/hooks'
 import { type NodeToolbarProps, NodeToolbar } from '@xyflow/react'
-import clsx from 'clsx'
 import type { ReactNode } from 'react'
-import type { Base } from '../../../../base'
+import type { NodeProps } from '../../../../base/types'
 import { useDiagramContext } from '../../../../hooks/useDiagram'
 import { stopPropagation } from '../../../../utils/xyflow'
+import type { Types } from '../../../types'
 import * as styles from './styles.css'
 
 export type ToolbarProps = Omit<NodeToolbarProps, 'title'> & {
-  nodeProps: Base.NodeProps
+  nodeProps: NodeProps<Types.NodeData>
   title: ReactNode
 }
 

package/src/likec4diagram/custom/nodes/toolbar/_shared.tsx

@@ -1,4 +1,12 @@
-import { type Fqn, type NodeId, type ThemeColor, type ViewChange, defaultTheme, invariant } from '@likec4/core'
+import {
+  type DeploymentFqn,
+  type Fqn,
+  type NodeId,
+  type ThemeColor,
+  type ViewChange,
+  defaultTheme,
+  invariant,
+} from '@likec4/core'
 import { ActionIcon, Tooltip as MantineTooltip } from '@mantine/core'
 import { useCallbackRef } from '@mantine/hooks'
 import { IconFileSymlink, IconTransform } from '@tabler/icons-react'
@@ -45,7 +53,7 @@ export const Tooltip = MantineTooltip.withProps({
 })
 
 export function useHandlers(
-  target: Fqn,
+  target: Fqn | DeploymentFqn,
   props: NodeProps<Types.NodeData>,
 ) {
   const { onChange: triggerOnChange } = useDiagramEventHandlers()
@@ -113,7 +121,7 @@ export function BrowseRelationshipsButton({ fqn }: { fqn: Fqn }) {
   )
 }
 
-export function GoToSourceButton(props: MergeExclusive<{ elementId: Fqn }, { deploymentId: Fqn }>) {
+export function GoToSourceButton(props: MergeExclusive<{ elementId: Fqn }, { deploymentId: DeploymentFqn }>) {
   const { onOpenSource } = useDiagramEventHandlers()
   if (!onOpenSource) return null
   // const diagramApi = useDiagramStoreApi()