@likec4/diagram 1.41.0 → 1.42.1

package/src/LikeC4Styles.tsx

@@ -1,137 +0,0 @@
-import {
-  type CustomColorDefinitions,
-  type ThemeColorValues,
-  defaultTheme,
-  ThemeColors,
-} from '@likec4/core'
-import { useMantineStyleNonce } from '@mantine/core'
-import { mix, scale, toHex, toRgba } from 'khroma'
-import { memo } from 'react'
-import { entries, join, map, pipe, range } from 'remeda'
-import { useLikeC4Specification } from './likec4model'
-
-const scheme = (scheme: 'dark' | 'light') => `[data-mantine-color-scheme="${scheme}"]`
-
-const whenDark = scheme('dark')
-const whenLight = scheme('light')
-
-const MAX_DEPTH = 5
-const generateCompoundColors = (rootSelector: string, name: string, colors: ThemeColorValues, depth: number) => {
-  const compoundDarkColor = (color: string) =>
-    toHex(
-      scale(color, {
-        l: -22 - 5 * depth,
-        s: -10 - 6 * depth,
-      }),
-    )
-  const compoundLightColor = (color: string) =>
-    toHex(
-      scale(color, {
-        l: -20 - 3 * depth,
-        s: -3 - 6 * depth,
-      }),
-    )
-  const selector = `:where(${rootSelector} [data-likec4-color="${name}"][data-compound-depth="${depth}"])`
-
-  return `
-${selector} {
-  --likec4-palette-fill: ${compoundLightColor(colors.elements.fill)};
-  --likec4-palette-stroke: ${compoundLightColor(colors.elements.stroke)};
-}
-${whenDark} ${selector} {
-  --likec4-palette-fill: ${compoundDarkColor(colors.elements.fill)};
-  --likec4-palette-stroke: ${compoundDarkColor(colors.elements.stroke)};
-}
-  `.trim()
-}
-
-function toStyle(rootSelector: string, name: string, colors: ThemeColorValues): string {
-  const selector = `:where(${rootSelector} [data-likec4-color=${name}])`
-  return [
-    `
-${selector} {
-  --likec4-palette-fill: ${colors.elements.fill};
-  --likec4-palette-stroke: ${colors.elements.stroke};
-  --likec4-palette-hiContrast: ${colors.elements.hiContrast};
-  --likec4-palette-loContrast: ${colors.elements.loContrast};
-  --likec4-palette-relation-stroke: ${colors.relationships.lineColor};
-  --likec4-palette-relation-label: ${colors.relationships.labelColor};
-  --likec4-palette-relation-label-bg: ${colors.relationships.labelBgColor};
-}
-${whenLight} ${selector} {
-  --likec4-palette-relation-stroke-selected: ${toRgba(mix(colors.relationships.lineColor, 'black', 85))};
-}
-${whenDark} ${selector} {
-  --likec4-palette-relation-stroke-selected: ${toRgba(mix(colors.relationships.lineColor, 'white', 70))};
-}
-
-  `.trim(),
-    ...range(1, MAX_DEPTH + 1).map((depth) => generateCompoundColors(rootSelector, name, colors, depth)),
-  ].join('\n')
-}
-
-function generateCustomColorStyles(customColors: CustomColorDefinitions, rootSelector: string) {
-  return pipe(
-    entries(customColors),
-    map(([name, color]) => toStyle(rootSelector, name, color)),
-    join('\n'),
-  )
-}
-
-function generateBuiltInColorStyles(rootSelector: string) {
-  return pipe(
-    ThemeColors,
-    map((color) =>
-      toStyle(rootSelector, color, {
-        elements: defaultTheme.elements[color],
-        relationships: defaultTheme.relationships[color],
-      })
-    ),
-    join('\n'),
-  )
-}
-
-export function LikeC4Styles({ id }: { id: string }) {
-  const rootSelector = `#${id}`
-  const nonce = useMantineStyleNonce()?.()
-
-  const { customColors } = useLikeC4Specification()
-  const customColorsStyles = customColors ? generateCustomColorStyles(customColors, rootSelector) : ''
-
-  const builtInColors = generateBuiltInColorStyles(rootSelector)
-
-  return (
-    <MemoizedStyles
-      id={id}
-      nonce={nonce}
-      customColorsStyles={customColorsStyles}
-      builtInColors={builtInColors} />
-  )
-}
-
-/**
- * @internal This gives a performance boost during development
- */
-const MemoizedStyles = memo<{
-  id: string
-  nonce: string | undefined
-  customColorsStyles: string
-  builtInColors: string
-}>((
-  { id, nonce, customColorsStyles, builtInColors },
-) => (
-  <>
-    <style
-      type="text/css"
-      data-likec4-colors={id}
-      dangerouslySetInnerHTML={{ __html: builtInColors }}
-      nonce={nonce} />
-    {customColorsStyles && (
-      <style
-        type="text/css"
-        data-likec4-custom-colors={id}
-        dangerouslySetInnerHTML={{ __html: customColorsStyles }}
-        nonce={nonce} />
-    )}
-  </>
-))

package/src/StaticLikeC4Diagram.tsx

@@ -1,62 +0,0 @@
-import type { Any, UnknownLayouted } from '@likec4/core/types'
-import { cx } from '@likec4/styles/css'
-import { LikeC4Diagram } from './LikeC4Diagram'
-import type { LikeC4DiagramProperties } from './LikeC4Diagram.props'
-
-export type StaticLikeC4DiagramProps<A extends Any> = Pick<
-  LikeC4DiagramProperties<A>,
-  | 'view'
-  | 'className'
-  | 'fitView'
-  | 'fitViewPadding'
-  | 'background'
-  | 'enableElementDetails'
-  | 'enableRelationshipDetails'
-  | 'enableRelationshipBrowser'
-  | 'enableElementTags'
-  | 'reduceGraphics'
-  | 'initialWidth'
-  | 'initialHeight'
-  | 'renderIcon'
-  | 'renderNodes'
-  | 'where'
->
-
-export function StaticLikeC4Diagram<A extends Any = UnknownLayouted>({
-  view,
-  fitView = true,
-  fitViewPadding = '8px',
-  enableRelationshipDetails = false,
-  enableRelationshipBrowser = enableRelationshipDetails,
-  background = 'transparent',
-  className,
-  ...rest
-}: StaticLikeC4DiagramProps<A>) {
-  return (
-    <LikeC4Diagram
-      view={view}
-      readonly
-      className={cx(className, 'likec4-static-view')}
-      fitView={fitView}
-      fitViewPadding={fitViewPadding}
-      pannable={false}
-      zoomable={false}
-      controls={false}
-      background={background}
-      showDiagramTitle={false}
-      showNotations={false}
-      enableElementDetails={false}
-      enableRelationshipDetails={enableRelationshipDetails}
-      enableRelationshipBrowser={enableRelationshipBrowser}
-      enableDynamicViewWalkthrough={false}
-      showNavigationButtons={false}
-      experimentalEdgeEditing={false}
-      enableFocusMode={false}
-      enableSearch={false}
-      nodesSelectable={false}
-      nodesDraggable={false}
-      enableElementTags={false}
-      {...rest}
-    />
-  )
-}

package/src/base/Background.tsx

@@ -1,31 +0,0 @@
-import { nonexhaustive } from '@likec4/core'
-import { type BackgroundProps, Background as XYFlowBackground, BackgroundVariant } from '@xyflow/react'
-
-export type XYBackgroundVariant = 'dots' | 'lines' | 'cross'
-export type XYBackground =
-  | XYBackgroundVariant
-  | BackgroundProps
-
-export type XYBackgroundProps = {
-  background: XYBackground
-}
-
-function literalToEnum(value: XYBackgroundVariant): BackgroundVariant {
-  switch (value) {
-    case 'dots':
-      return BackgroundVariant.Dots
-    case 'lines':
-      return BackgroundVariant.Lines
-    case 'cross':
-      return BackgroundVariant.Cross
-    default:
-      nonexhaustive(value)
-  }
-}
-
-export function Background({ background }: XYBackgroundProps) {
-  if (typeof background === 'string') {
-    return <XYFlowBackground variant={literalToEnum(background)} size={2} gap={20} />
-  }
-  return <XYFlowBackground {...background} />
-}

package/src/base/BaseXYFlow.tsx

@@ -1,218 +0,0 @@
-import { cx } from '@likec4/styles/css'
-import { useCallbackRef } from '@mantine/hooks'
-import {
-  type ReactFlowProps,
-  type ReactFlowState,
-  ReactFlow,
-  useStore,
-} from '@xyflow/react'
-import { Fragment } from 'react'
-import type { SetRequired, Simplify } from 'type-fest'
-import { useUpdateEffect } from '../hooks/useUpdateEffect'
-import { useIsZoomTooSmall, useXYStoreApi } from '../hooks/useXYFlow'
-import type { ViewPadding } from '../LikeC4Diagram.props'
-import { roundDpr } from '../utils/roundDpr'
-import { stopPropagation } from '../utils/xyflow'
-import { type XYBackground, Background } from './Background'
-import { MaxZoom, MinZoom } from './const'
-import { Base } from './types'
-
-export type BaseXYFlowProps<NodeType extends Base.Node, EdgeType extends Base.Edge> = Simplify<
-  & {
-    pannable?: boolean
-    zoomable?: boolean
-    nodesSelectable?: boolean
-    nodesDraggable?: boolean
-    background?: 'transparent' | 'solid' | XYBackground
-    fitViewPadding?: ViewPadding | undefined
-    onViewportResize?: undefined | (() => void)
-  }
-  & SetRequired<
-    Omit<
-      ReactFlowProps<NodeType, EdgeType>,
-      // Omited props
-      | 'defaultNodes'
-      | 'defaultEdges'
-      | 'onNodeDoubleClick'
-      | 'onEdgeDoubleClick'
-      | 'fitViewOptions'
-    >,
-    // Required props
-    | 'nodes'
-    | 'edges'
-    | 'onNodesChange'
-    | 'onEdgesChange'
-  >
->
-
-export const BaseXYFlow = <
-  NodeType extends Base.Node,
-  EdgeType extends Base.Edge,
->({
-  nodes,
-  edges,
-  onEdgesChange,
-  onNodesChange,
-  className,
-  pannable = true,
-  zoomable = true,
-  nodesSelectable = true,
-  nodesDraggable = false,
-  background = 'dots',
-  children,
-  colorMode = 'system',
-  fitViewPadding = 0,
-  fitView = true,
-  zoomOnDoubleClick = false,
-  onViewportResize,
-  onMoveEnd,
-  onNodeMouseEnter,
-  onNodeMouseLeave,
-  onEdgeMouseEnter,
-  onEdgeMouseLeave,
-  ...props
-}: BaseXYFlowProps<NodeType, EdgeType>) => {
-  const isBgWithPattern = background !== 'transparent' && background !== 'solid'
-  const isZoomTooSmall = useIsZoomTooSmall()
-  const xystore = useXYStoreApi()
-
-  return (
-    <ReactFlow<NodeType, EdgeType>
-      colorMode={colorMode}
-      nodes={nodes}
-      edges={edges}
-      className={cx(
-        background === 'transparent' && 'bg-transparent',
-        className,
-      )}
-      {...isZoomTooSmall && {
-        ['data-likec4-zoom-small']: true,
-      }}
-      zoomOnPinch={zoomable}
-      zoomOnScroll={!pannable && zoomable}
-      {...(!zoomable && {
-        zoomActivationKeyCode: null,
-      })}
-      zoomOnDoubleClick={zoomOnDoubleClick}
-      maxZoom={zoomable ? MaxZoom : 1}
-      minZoom={zoomable ? MinZoom : 1}
-      fitView={fitView}
-      fitViewOptions={{
-        minZoom: MinZoom,
-        maxZoom: 1,
-        padding: fitViewPadding,
-        includeHiddenNodes: false,
-      }}
-      preventScrolling={zoomable || pannable}
-      defaultMarkerColor="var(--xy-edge-stroke)"
-      noDragClassName="nodrag"
-      noPanClassName="nopan"
-      noWheelClassName="nowheel"
-      panOnScroll={pannable}
-      panOnDrag={pannable}
-      {...(!pannable && {
-        panActivationKeyCode: null,
-        selectionKeyCode: null,
-      })}
-      elementsSelectable={nodesSelectable}
-      nodesFocusable={nodesDraggable || nodesSelectable}
-      edgesFocusable={false}
-      nodesDraggable={nodesDraggable}
-      nodeDragThreshold={4}
-      nodeClickDistance={3}
-      paneClickDistance={3}
-      elevateNodesOnSelect={false} // or edges are not visible after select\
-      selectNodesOnDrag={false}
-      onNodesChange={onNodesChange}
-      onEdgesChange={onEdgesChange}
-      onMoveEnd={useCallbackRef((event, { x, y, zoom }) => {
-        /**
-         * WORKAROUND
-         * Viewport transform is not rounded to integers which results in blurry nodes on some resolution
-         * https://github.com/xyflow/xyflow/issues/3282
-         * https://github.com/likec4/likec4/issues/734
-         */
-        const roundedX = roundDpr(x),
-          roundedY = roundDpr(y)
-        if (x !== roundedX || y !== roundedY) {
-          xystore.setState({ transform: [roundedX, roundedY, zoom] })
-        }
-        onMoveEnd?.(event, { x: roundedX, y: roundedY, zoom })
-      })}
-      onNodeMouseEnter={useCallbackRef((_event, node) => {
-        if (onNodeMouseEnter) {
-          onNodeMouseEnter(_event, node)
-          return
-        }
-        if (!node.data.hovered) {
-          onNodesChange([{
-            id: node.id,
-            type: 'replace',
-            item: Base.setHovered(node, true),
-          }])
-        }
-      })}
-      onNodeMouseLeave={useCallbackRef((_event, node) => {
-        if (onNodeMouseLeave) {
-          onNodeMouseLeave(_event, node)
-          return
-        }
-        if (node.data.hovered) {
-          onNodesChange([{
-            id: node.id,
-            type: 'replace',
-            item: Base.setHovered(node, false),
-          }])
-        }
-      })}
-      onEdgeMouseEnter={useCallbackRef((_event, edge) => {
-        if (onEdgeMouseEnter) {
-          onEdgeMouseEnter(_event, edge)
-          return
-        }
-        if (!edge.data.hovered) {
-          onEdgesChange([{
-            id: edge.id,
-            type: 'replace',
-            item: Base.setHovered(edge, true),
-          }])
-        }
-      })}
-      onEdgeMouseLeave={useCallbackRef((_event, edge) => {
-        if (onEdgeMouseLeave) {
-          onEdgeMouseLeave(_event, edge)
-          return
-        }
-        if (edge.data.hovered) {
-          onEdgesChange([{
-            id: edge.id,
-            type: 'replace',
-            item: Base.setHovered(edge, false),
-          }])
-        }
-      })}
-      onNodeDoubleClick={stopPropagation}
-      onEdgeDoubleClick={stopPropagation}
-      {...props}
-    >
-      <Fragment key="_internals">
-        {isBgWithPattern && <Background background={background} />}
-        {onViewportResize && <ViewportResizeHanlder onViewportResize={onViewportResize} />}
-      </Fragment>
-      {children}
-    </ReactFlow>
-  )
-}
-
-const selectDimensions = ({ width, height }: ReactFlowState) => (width || 1) * (height || 1)
-
-const ViewportResizeHanlder = ({
-  onViewportResize,
-}: {
-  onViewportResize: () => void
-}) => {
-  const square = useStore(selectDimensions)
-  useUpdateEffect(onViewportResize, [square])
-
-  return null
-}

package/src/base/const.ts

@@ -1,22 +0,0 @@
-import type { ViewPadding } from '../LikeC4Diagram.props'
-
-export const ZIndexes = {
-  Compound: 1,
-  // XYFlow increments zIndexes of compounds
-  Edge: 20,
-  Element: 20,
-  Max: 30,
-} as const
-
-export const MinZoom = 0.05
-export const MaxZoom = 3
-
-export const FitViewPaddings = {
-  default: '16px',
-  withControls: {
-    top: '50px',
-    left: '16px',
-    right: '16px',
-    bottom: '16px',
-  },
-} satisfies Record<string, ViewPadding>

package/src/base/index.ts

@@ -1,12 +0,0 @@
-export { BaseXYFlow, type BaseXYFlowProps } from './BaseXYFlow'
-
-export {
-  Base,
-  type EdgeProps,
-  type NodeProps,
-  type NonOptional,
-  type ReactFlowEdge,
-  type ReactFlowNode,
-} from './types'
-
-export * from './const'

package/src/base/primitives/MarkdownBlock.tsx

@@ -1,82 +0,0 @@
-import { type RichTextOrEmpty as RichTextType } from '@likec4/core/types'
-import { cx } from '@likec4/styles/css'
-import { type BoxProps, Box } from '@likec4/styles/jsx'
-import { markdownBlock } from '@likec4/styles/recipes'
-import type { JsxStyleProps } from '@likec4/styles/types'
-import { Text } from '@mantine/core'
-import { forwardRef } from 'react'
-
-export type MarkdownBlockProps = Omit<BoxProps, 'dangerouslySetInnerHTML' | 'children'> & {
-  value: RichTextType
-
-  /**
-   * When markdown block is used inside a diagram node, this variant should be used to apply the likec4 palette.
-   * @default false
-   */
-  uselikec4palette?: boolean
-  /**
-   * Scale factor for the block
-   * @default 1
-   */
-  textScale?: number
-
-  /**
-   * Font size for the block
-   * @default 'md'
-   */
-  fontSize?: JsxStyleProps['fontSize']
-
-  /**
-   * If true, the component will not render anything if the value is empty.
-   * @default false
-   */
-  hideIfEmpty?: boolean
-  /**
-   * Text to show if the value is empty.
-   * @default "no content"
-   */
-  emptyText?: string
-}
-
-export const MarkdownBlock = forwardRef<HTMLDivElement, MarkdownBlockProps>(({
-  value,
-  textScale = 1,
-  uselikec4palette = false,
-  hideIfEmpty = false,
-  emptyText = 'no content',
-  className,
-  style,
-  ...props
-}, ref) => {
-  if (value.isEmpty && hideIfEmpty) {
-    return null
-  }
-  const content = value.nonEmpty
-    ? value.isMarkdown
-      ? { dangerouslySetInnerHTML: { __html: value.html } }
-      : { children: <p>{value.text}</p> }
-    : { children: <Text component="span" fz={'xs'} c="dimmed" style={{ userSelect: 'none' }}>{emptyText}</Text> }
-  return (
-    <Box
-      ref={ref}
-      {...props}
-      className={cx(
-        markdownBlock({
-          uselikec4palette,
-          value: value.isMarkdown ? 'markdown' : 'plaintext',
-        }),
-        className,
-      )}
-      style={{
-        ...style,
-        ...props.fontSize && {
-          '--text-fz': `var(--font-sizes-${props.fontSize}, var(--font-sizes-md))`,
-        },
-        // @ts-expect-error
-        ['--mantine-scale']: textScale,
-      }}
-      {...content}
-    />
-  )
-})
-MarkdownBlock.displayName = 'MarkdownBlock'

package/src/base/primitives/NodeHandles.tsx

@@ -1,18 +0,0 @@
-import { Handle, Position } from '@xyflow/react'
-import type { CSSProperties } from 'react'
-
-const style: CSSProperties = {
-  top: '50%',
-  left: '50%',
-  visibility: 'hidden',
-}
-
-/**
- * XYFlow requires handles to be defined on nodes.
- */
-export const DefaultHandles = () => (
-  <>
-    <Handle type="target" position={Position.Top} style={style} />
-    <Handle type="source" position={Position.Bottom} style={style} />
-  </>
-)

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

@@ -1,62 +0,0 @@
-import { cx } from '@likec4/styles/css'
-import { actionBtn } from '@likec4/styles/recipes'
-import { ActionIcon } from '@mantine/core'
-import { useDebouncedValue } from '@mantine/hooks'
-import { IconZoomScan } from '@tabler/icons-react'
-import * as m from 'motion/react-m'
-import type { Simplify } from 'type-fest'
-import { stopPropagation } from '../../../utils/xyflow'
-import type { NodeProps } from '../../types'
-import { compoundActionBtn } from './actionbtns.css'
-
-type CompoundActionButtonProps = Simplify<
-  NodeProps<{}> & {
-    icon?: React.ReactNode
-    onClick: (e: React.MouseEvent) => void
-  }
->
-
-export function CompoundActionButton({
-  data: {
-    hovered: isHovered = false,
-  },
-  icon,
-  onClick,
-}: CompoundActionButtonProps) {
-  // Debounce first "isHovered"
-  const debounced = useDebouncedValue(isHovered, isHovered ? 130 : 0)
-  const isHoverDebounced = debounced[0] && isHovered
-  return (
-    <m.div
-      initial={false}
-      animate={{
-        scale: isHoverDebounced ? 1.2 : 1,
-        x: isHoverDebounced ? -1 : 0,
-        y: isHoverDebounced ? -1 : 0,
-      }}
-      whileHover={{
-        scale: 1.4,
-        x: -3,
-        y: -1,
-      }}
-      className="likec4-compound-navigation compound-action"
-      whileTap={{ scale: 1 }}
-      onClick={stopPropagation}
-    >
-      <ActionIcon
-        className={cx(
-          'nodrag nopan',
-          compoundActionBtn({
-            delay: isHovered && !isHoverDebounced,
-          }),
-          actionBtn({ variant: 'transparent' }),
-        )}
-        // Otherwise node receives click event and is selected
-        onClick={onClick}
-        onDoubleClick={stopPropagation}
-      >
-        {icon ?? <IconZoomScan stroke={2} />}
-      </ActionIcon>
-    </m.div>
-  )
-}