@likec4/diagram 1.40.0 → 1.42.0

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

@@ -1,65 +0,0 @@
-import { getSmoothStepPath } from '@xyflow/system'
-import type { EdgeProps } from '../../../base'
-import { EdgeActionButton, EdgeContainer, EdgeLabel, EdgeLabelContainer, EdgePath } from '../../../base/primitives'
-import { useDiagram } from '../../../hooks/useDiagram'
-import type { Types } from '../../types'
-
-const LABEL_OFFSET = 16
-export function SequenceStepEdge(props: EdgeProps<Types.SequenceStepEdgeData>) {
-  const diagram = useDiagram()
-  const { navigateTo } = props.data
-  const isSelfLoop = props.source === props.target
-  const isBack = props.sourceX > props.targetX
-  const [path] = getSmoothStepPath({
-    sourceX: props.sourceX,
-    sourceY: props.sourceY,
-    sourcePosition: props.sourcePosition,
-    targetX: props.targetX,
-    targetY: props.targetY,
-    targetPosition: props.targetPosition,
-    ...(isSelfLoop && {
-      offset: 30,
-      borderRadius: 16,
-    }),
-  })
-
-  let labelX = props.sourceX
-  switch (true) {
-    case isSelfLoop:
-      labelX = props.sourceX + 24 + LABEL_OFFSET
-      break
-    case isBack:
-      labelX = props.sourceX - LABEL_OFFSET
-      break
-    default:
-      labelX = props.sourceX + LABEL_OFFSET
-      break
-  }
-
-  return (
-    <EdgeContainer {...props}>
-      <EdgePath
-        edgeProps={props}
-        svgPath={path}
-      />
-      <EdgeLabelContainer
-        edgeProps={props}
-        labelPosition={{
-          x: labelX,
-          y: props.sourceY + (!isSelfLoop ? LABEL_OFFSET : 0),
-          translate: isBack ? 'translate(-100%, 0)' : undefined,
-        }}
-      >
-        <EdgeLabel edgeProps={props}>
-          {navigateTo && (
-            <EdgeActionButton
-              onClick={e => {
-                e.stopPropagation()
-                diagram.navigateTo(navigateTo)
-              }} />
-          )}
-        </EdgeLabel>
-      </EdgeLabelContainer>
-    </EdgeContainer>
-  )
-}

package/src/likec4diagram/custom/edges/edges.css.ts

@@ -1,45 +0,0 @@
-import { css } from '@likec4/styles/css'
-
-const isSelected = '.react-flow__edge.selected'
-
-export const controlPointsContainer = css({
-  overflow: 'visible',
-  position: 'absolute',
-  pointerEvents: 'none',
-  top: '0',
-  left: '0',
-  mixBlendMode: 'normal',
-})
-
-export const controlPoint = css({
-  fill: `var(--likec4-palette-relation-stroke)`,
-  stroke: `var(--likec4-palette-relation-stroke)`,
-  fillOpacity: 0.75,
-  strokeWidth: 1,
-  cursor: 'grab',
-  pointerEvents: 'auto',
-  visibility: 'hidden',
-  _hover: {
-    fillOpacity: 1,
-    stroke: 'mantine.colors.primary.filledHover',
-    strokeWidth: 10,
-    transition: 'stroke 100ms ease-out, stroke-width 100ms ease-out',
-  },
-  [`:where(${isSelected}, [data-likec4-hovered='true']) &`]: {
-    visibility: 'visible',
-    transition: 'fill-opacity 150ms ease-out, stroke 150ms ease-out, stroke-width 150ms ease-out',
-    transitionDelay: '50ms',
-    fillOpacity: 1,
-    strokeWidth: 5,
-  },
-})
-
-export const controlDragging = css({
-  cursor: 'grabbing',
-  '& *': {
-    cursor: 'grabbing !important',
-  },
-  '& .react-flow__edge-interaction': {
-    cursor: 'grabbing !important',
-  },
-})

package/src/likec4diagram/custom/edges/utils.ts

@@ -1,125 +0,0 @@
-import { type InternalNode, type XYPosition, Position } from '@xyflow/react'
-import { getNodeDimensions } from '@xyflow/system'
-import { vector, VectorImpl } from '../../../utils'
-
-export function getNodeCenter(node: InternalNode): XYPosition {
-  const { width, height } = getNodeDimensions(node)
-  const { x, y } = node.internals.positionAbsolute
-
-  return {
-    x: x + width / 2,
-    y: y + height / 2,
-  }
-}
-
-/**
- * Helper function returns the intersection point
- * of the line between the center of the intersectionNode and the target
- *
- * @param intersectionNode the node that is the center of the line
- * @param target position of the target
- * @param nodeMargin the margin of the intersectionNode. The point will be placed at nodeMargin distance from the border of the node
- * @returns coordinates of the intersection point
- */
-export function getNodeIntersectionFromCenterToPoint(
-  intersectionNode: InternalNode,
-  target: XYPosition,
-  nodeMargin: number = 0,
-) {
-  const nodeCenter = getNodeCenter(intersectionNode)
-  const { width, height } = getNodeDimensions(intersectionNode)
-  const v = new VectorImpl(target.x, target.y).sub(nodeCenter)
-  const xScale = (nodeMargin + (width || 0) / 2) / v.x
-  const yScale = (nodeMargin + (height || 0) / 2) / v.y
-
-  const scale = Math.min(Math.abs(xScale), Math.abs(yScale))
-
-  return vector(v).mul(scale).add(nodeCenter)
-}
-
-/**
- * Helper function returns the intersection point
- * of the line between the center of the intersectionNode and the target
- *
- * @param intersectionNode the node that is the center of the line
- * @param targetNode the target node
- * @returns coordinates of the intersection point
- */
-function getNodeIntersection(
-  intersectionNode: InternalNode,
-  targetNode: InternalNode,
-): XYPosition {
-  return getNodeIntersectionFromCenterToPoint(intersectionNode, getNodeCenter(targetNode))
-}
-
-// returns the position (top,right,bottom or right) passed node compared to the intersection point
-export function getPointPosition(node: InternalNode, intersectionPoint: XYPosition) {
-  const n = {
-    // x: node.data.element.position[0],
-    // y: node.data.element.position[1],
-    ...node.internals.positionAbsolute,
-    ...getNodeDimensions(node),
-  }
-  const nx = Math.round(n.x)
-  const ny = Math.round(n.y)
-  const px = Math.round(intersectionPoint.x)
-  const py = Math.round(intersectionPoint.y)
-
-  let handlePosition = Position.Top
-  if (px <= nx + 1) {
-    handlePosition = Position.Left
-  } else if (px >= nx + n.width - 1) {
-    handlePosition = Position.Right
-  } else if (py <= ny + 1) {
-    handlePosition = Position.Top
-  } else if (py >= n.y + n.height - 1) {
-    handlePosition = Position.Bottom
-  }
-
-  let handleWidth = 8, handleHeight = 8
-
-  let offsetX = 0
-  let offsetY = 0
-
-  // this is a tiny detail to make the markerEnd of an edge visible.
-  // The handle position that gets calculated has the origin top-left, so depending which side we are using, we add a little offset
-  // when the handlePosition is Position.Right for example, we need to add an offset as big as the handle itself in order to get the correct position
-  switch (handlePosition) {
-    case Position.Left:
-      offsetX = -handleWidth
-      break
-    case Position.Right:
-      offsetX = handleWidth
-      break
-    case Position.Top:
-      offsetY = -handleHeight
-      break
-    case Position.Bottom:
-      offsetY = handleHeight
-      break
-  }
-
-  return [
-    intersectionPoint.x + offsetX,
-    intersectionPoint.y + offsetY,
-    handlePosition,
-  ] as const
-}
-
-// returns the parameters (sx, sy, tx, ty, sourcePos, targetPos) you need to create an edge
-export function getEdgeParams(source: InternalNode, target: InternalNode) {
-  const sourceIntersectionPoint = getNodeIntersection(source, target)
-  const targetIntersectionPoint = getNodeIntersection(target, source)
-
-  const [sx, sy, sourcePos] = getPointPosition(source, sourceIntersectionPoint)
-  const [tx, ty, targetPos] = getPointPosition(target, targetIntersectionPoint)
-
-  return {
-    sx,
-    sy,
-    tx,
-    ty,
-    sourcePos,
-    targetPos,
-  }
-}

package/src/likec4diagram/custom/index.ts

@@ -1,28 +0,0 @@
-import type { CustomNodes } from '../../custom/customNodes'
-import type { Types } from '../types'
-import { RelationshipEdge } from './edges/RelationshipEdge'
-import { SequenceStepEdge } from './edges/SequenceStepEdge'
-import {
-  CompoundDeploymentNode,
-  CompoundElementNode,
-  DeploymentNode,
-  ElementNode,
-  SequenceActorNode,
-  ViewGroupNode,
-} from './nodes'
-
-export const BuiltinNodes = {
-  element: ElementNode,
-  deployment: DeploymentNode,
-  compoundElement: CompoundElementNode,
-  compoundDeployment: CompoundDeploymentNode,
-  viewGroup: ViewGroupNode,
-  sequenceActor: SequenceActorNode,
-} satisfies Required<CustomNodes>
-
-export { SequenceParallelArea } from './nodes/SequenceActorNode'
-
-export const edgeTypes = {
-  relationship: RelationshipEdge,
-  'seq-step': SequenceStepEdge,
-} satisfies { [key in Types.Edge['type']]: any }

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

@@ -1,27 +0,0 @@
-import type { NodeId } from '@likec4/core'
-import { CompoundActionButton } from '../../../base/primitives'
-import type { NodeProps } from '../../../base/types'
-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 } = useEnabledFeatures()
-  const diagram = useDiagram()
-
-  const { navigateTo } = props.data
-  if (navigateTo && enableNavigateTo) {
-    return (
-      <CompoundActionButton
-        onClick={(e) => {
-          e.stopPropagation()
-          diagram.navigateTo(navigateTo, props.id as NodeId)
-        }}
-        {...props}
-      />
-    )
-  }
-  return null
-}

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

@@ -1,120 +0,0 @@
-import type { NodeId } from '@likec4/core/types'
-import { IconTransform, IconZoomScan } from '@tabler/icons-react'
-import { useMemo } from 'react'
-import { hasAtLeast } from 'remeda'
-import { ElementActionButtons } from '../../../base/primitives'
-import type { NodeProps } from '../../../base/types'
-import { useEnabledFeatures } from '../../../context/DiagramFeatures'
-import { useDiagram } from '../../../hooks/useDiagram'
-import type { Types } from '../../types'
-
-type RequiredData = Pick<Types.ElementNodeData, 'modelFqn' | 'navigateTo'>
-
-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[]
-}
-
-export type ElementActionsProps = NodeProps<RequiredData> & WithExtraButtons
-
-export const ElementActions = ({
-  extraButtons,
-  ...props
-}: ElementActionsProps) => {
-  const { enableNavigateTo, enableRelationshipBrowser } = useEnabledFeatures()
-  const diagram = useDiagram()
-  const { navigateTo, modelFqn } = props.data
-  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]
-  }
-
-  // Spread all ReactFlow node props and override buttons with our computed buttons
-  return <ElementActionButtons {...props} buttons={buttons} />
-}
-
-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
-
-  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 && !!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]
-  }
-
-  // Spread all ReactFlow node props and override buttons with our computed buttons
-  return <ElementActionButtons {...props} buttons={buttons} />
-}

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

@@ -1,175 +0,0 @@
-import { defaultTheme } from '@likec4/core'
-import { css } from '@likec4/styles/css'
-import { Box } from '@likec4/styles/jsx'
-import type { NodeProps } from '@xyflow/react'
-import { Handle } from '@xyflow/react'
-import { Position } from '@xyflow/system'
-import { ElementNodeContainer, ElementShape, ElementTitle } from '../../../custom'
-import { type Types } from '../../types'
-import { ElementActions } from './ElementActions'
-import { ElementDetailsButtonWithHandler } from './nodes'
-
-const positionMap: Record<Types.SequenceActorNodePort['position'], Position> = {
-  left: Position.Left,
-  right: Position.Right,
-  top: Position.Top,
-  bottom: Position.Bottom,
-}
-
-const ActorStepPort = ({
-  data,
-  port: p,
-}: {
-  data: Types.SequenceActorNodeData
-  port: Types.SequenceActorNodePort
-}) => {
-  return (
-    <>
-      <Box
-        data-likec4-color={data.color}
-        className={css({
-          position: 'absolute',
-          backgroundColor: 'var(--likec4-palette-fill)',
-          rounded: 'xs',
-          width: {
-            base: '5px',
-            _whenHovered: '7px',
-            _whenSelected: '7px',
-          },
-          // pointerEvents: 'none',
-          transition: 'fast',
-          translateX: '-1/2',
-          translateY: '-1/2',
-          translate: 'auto',
-          // transform: 'translate',
-        })}
-        style={{
-          top: p.cy,
-          left: p.cx,
-          height: p.height,
-          // transform: p.type === 'source' ? 'translate(-50%, -16px)' : 'translate(-50%, -50%)',
-          // transform: 'translate(-50%, -50%)',
-          // zIndex: p.type === 'source' ? 1 : 0,
-        }}
-      />
-      <Handle
-        id={p.id}
-        type={p.type}
-        position={positionMap[p.position]}
-        style={{
-          top: p.cy - 3,
-          left: p.cx - 3,
-          width: 6,
-          height: 6,
-          right: 'unset',
-          bottom: 'unset',
-          visibility: 'hidden',
-          transform: p.position === 'left' ? 'translate(-150%, 0)' : 'translate(100%, 0)',
-        }} />
-    </>
-  )
-}
-
-export function SequenceActorNode(props: NodeProps<Types.SequenceActorNode>) {
-  const data = props.data
-  const {
-    positionAbsoluteY,
-    data: {
-      viewHeight,
-      hovered: isHovered = false,
-      ports,
-    },
-  } = props
-
-  return (
-    <>
-      <Box
-        className={css({
-          position: 'absolute',
-          rounded: 'xs',
-          top: '1',
-          pointerEvents: 'none',
-          transition: 'fast',
-          translateX: '-1/2',
-          translate: 'auto',
-          // transform: 'translate',
-        })}
-        style={{
-          // position: 'absolute',
-          backgroundColor: defaultTheme.elements.gray.fill,
-          opacity: isHovered ? 0.5 : 0.4,
-          left: '50%',
-          width: isHovered ? 3 : 2,
-          height: viewHeight - positionAbsoluteY,
-          zIndex: -1,
-          pointerEvents: 'none',
-          // top: p.y,
-          // left: p.width / 2,
-          // height: p.type === 'source' ? 48 : 32,
-          // transform: p.type === 'source' ? 'translate(-50%, -16px)' : 'translate(-50%, -50%)',
-          // transform: 'translate(-50%, -50%)',
-          // zIndex: p.type === 'source' ? 1 : 0,
-        }}
-      />
-      {
-        /* <div
-        // css={{
-        //   backgroundColor: 'var(--likec4-palette-fill)',
-        // }}
-        style={{
-          position: 'absolute',
-          backgroundColor: defaultTheme.elements.gray.fill,
-          opacity: 0.5,
-          top: 8,
-          left: 'calc(50% - 1px)',
-          width: 2,
-          height: viewHeight - positionAbsoluteY,
-          zIndex: -1,
-          pointerEvents: 'none',
-        }}>
-      </div> */
-      }
-      <ElementNodeContainer nodeProps={props}>
-        <ElementShape {...props} />
-        <ElementTitle {...props} />
-        {data.modelFqn && (
-          <>
-            <ElementActions {...props} data={data as Types.ElementNodeData} />
-            <ElementDetailsButtonWithHandler {...props} data={data as Types.ElementNodeData} />
-          </>
-        )}
-      </ElementNodeContainer>
-      {ports.map(p => <ActorStepPort key={p.id} port={p} data={props.data} />)}
-    </>
-  )
-}
-
-export function SequenceParallelArea(props: NodeProps<Types.SequenceActorNode>) {
-  return (
-    <Box
-      data-likec4-color={props.data.color}
-      css={{
-        width: '100%',
-        height: '100%',
-        border: 'default',
-        rounded: 'sm',
-        borderWidth: 1,
-        '--_color': {
-          base: 'var(--likec4-palette-stroke)',
-          _dark: '[color-mix(in srgb, var(--likec4-palette-hiContrast) 40%, var(--likec4-palette-fill))]',
-        },
-        borderColor: '[var(--_color)/30]',
-        backgroundColor: 'var(--likec4-palette-fill)/15',
-        pointerEvents: 'none',
-        paddingLeft: '2',
-        paddingTop: '0.5',
-        fontSize: 'xs',
-        fontWeight: 'bold',
-        letterSpacing: '.75px',
-        color: '[var(--_color)/75]',
-      }}
-    >
-      PARALLEL
-    </Box>
-  )
-}

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

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