@likec4/diagram 1.40.0 → 1.42.0

package/src/base/types.ts

@@ -1,174 +0,0 @@
-import type * as RF from '@xyflow/react'
-import { hasSubObject } from 'remeda'
-import type { OptionalKeysOf, SetRequired, Simplify } from 'type-fest'
-
-// We do these aliases to ensure bundled type definitions are correct (see packages/likec4/react)
-
-type RFNode<
-  NodeData extends Record<string, unknown> = Record<string, unknown>,
-  NodeType extends string | undefined = string | undefined,
-> = RF.Node<NodeData, NodeType>
-type RFEdge<
-  EdgeData extends Record<string, unknown> = Record<string, unknown>,
-  EdgeType extends string | undefined = string | undefined,
-> = RF.Edge<EdgeData, EdgeType>
-type ReactFlowNodeProps<
-  NodeData extends Record<string, unknown> = Record<string, unknown>,
-  NodeType extends string | undefined = string | undefined,
-> = RF.NodeProps<RF.Node<NodeData, NodeType>>
-type ReactFlowEdgeProps<
-  EdgeData extends Record<string, unknown> = Record<string, unknown>,
-  EdgeType extends string | undefined = string | undefined,
-> = RF.EdgeProps<RF.Edge<EdgeData, EdgeType>>
-
-export namespace Base {
-  // 'immediate' means that the node is dimmed without delay
-  export type Dimmed = 'immediate' | boolean
-
-  export type NodeData = {
-    /**
-     * Whether the cursor is hovering over the node
-     */
-    hovered?: boolean
-    /**
-     * Whether the node is dimmed
-     * 'immediate' means that the node is dimmed without delay
-     */
-    dimmed?: Dimmed
-  }
-  export type Node = RFNode<NodeData>
-
-  export type NodeProps = ReactFlowNodeProps<RFNode<NodeData, any>>
-
-  export type EdgeData = {
-    /**
-     * Whether the cursor is hovering over the edge
-     */
-    hovered?: boolean
-    /**
-     * Whether the edge is active (animated and highlighted)
-     */
-    active?: boolean
-    /**
-     * Whether the edge is dimmed
-     * 'immediate' means that the edge is dimmed without delay
-     */
-    dimmed?: Dimmed
-  }
-
-  // export type Edge = SetRequired<ReactFlowEdge<EdgeData, 'relation'>, 'data' | 'type'>
-  export type Edge = Simplify<Omit<RFEdge, 'data'> & { data: EdgeData }>
-
-  type WithDimmed = { data: { dimmed?: Dimmed } }
-  type WithHovered = { data: { hovered?: boolean } }
-
-  const _setDimmed = <T extends WithDimmed>(v: T, dimmed: Dimmed): T =>
-    (v.data.dimmed ?? false) === dimmed ? v : ({
-      ...v,
-      data: {
-        ...v.data,
-        dimmed,
-      },
-    })
-
-  export function setDimmed<T extends WithDimmed>(value: T, dimmed: 'immediate' | boolean): T
-  export function setDimmed(dimmed: 'immediate' | boolean): <T extends WithDimmed>(value: T) => T
-  export function setDimmed<T extends WithDimmed>(arg1: T | Dimmed, arg2?: Dimmed) {
-    if (arg2 !== undefined) {
-      return _setDimmed(arg1 as T, arg2)
-    }
-    return (v: T) => _setDimmed(v, arg1 as Dimmed)
-  }
-
-  const _setHovered = <T extends WithHovered>(v: T, hovered: boolean): T =>
-    (v.data.hovered ?? false) === hovered ? v : ({
-      ...v,
-      data: {
-        ...v.data,
-        hovered,
-      },
-    })
-  export function setHovered<T extends WithHovered>(value: T, hovered: boolean): T
-  export function setHovered(hovered: boolean): <T extends WithHovered>(value: T) => T
-  export function setHovered<T extends WithHovered>(arg1: T | boolean, arg2?: boolean) {
-    if (arg2 !== undefined) {
-      return _setHovered(arg1 as T, arg2)
-    }
-    return (v: T) => _setHovered(v, arg1 as boolean)
-  }
-
-  type WithData<D> = { data: D }
-  function _setData<D, E extends WithData<D>>(value: E, state: Partial<NoInfer<D>>): E {
-    if (hasSubObject(value.data as any, state as any)) {
-      return value
-    }
-    return {
-      ...value,
-      data: {
-        ...value.data,
-        ...state,
-      },
-    }
-  }
-  export function setData<E extends WithData<any>>(value: E, state: Partial<E['data']>): E
-  export function setData<E extends WithData<any>>(state: Partial<E['data']>): (value: E) => E
-  export function setData<E extends WithData<any>>(arg1: E | Partial<E['data']>, arg2?: any) {
-    if (arg2 !== undefined) {
-      return _setData(arg1 as E, arg2)
-    }
-    return (edge: E) => _setData(edge, arg1 as Partial<EdgeData>)
-  }
-}
-
-/**
- * To cooperate with `exactOptionalPropertyTypes` in `tsconfig.json`
- *
- * @example
- * interface User {
- * 	name: string;
- * 	surname?: string;
- * 	luckyNumber?: number;
- * }
- *
- * type NonOptionalUser = NonOptional<User>
- * // NonOptionalUser = {
- * //   name: string
- * //   surname: string | undefined
- * //   luckyNumber: number | undefined
- * // }
- */
-export type NonOptional<T extends object, Keys extends OptionalKeysOf<T> = OptionalKeysOf<T>> = Simplify<
-  & {
-    [P in Exclude<keyof T, Keys>]: T[P]
-  }
-  & {
-    [P in Keys]-?: T[P] | undefined
-  }
->
-
-/**
- * ReactFlow Custom Node properties with BaseNodeData at least
- */
-export type NodeProps<T extends Record<string, unknown> = {}, NodeType extends string = string> = Simplify<
-  ReactFlowNodeProps<Base.NodeData & T, NodeType>
->
-
-/**
- * ReactFlow Custom Edge properties with BaseEdgeData at least
- */
-export type EdgeProps<T extends Record<string, unknown> = {}, EdgeType extends string = string> = Simplify<
-  SetRequired<
-    ReactFlowEdgeProps<Base.EdgeData & T, EdgeType>,
-    'data'
-  >
->
-
-export type ReactFlowNode<Data extends Record<string, unknown>, NodeType extends string> = SetRequired<
-  RFNode<Data, NodeType>,
-  'type' | 'initialWidth' | 'initialHeight'
->
-
-export type ReactFlowEdge<Data extends Record<string, unknown>, EdgeType extends string> = SetRequired<
-  RFEdge<Data, EdgeType>,
-  'type' | 'data'
->

package/src/base/updateEdges.ts

@@ -1,38 +0,0 @@
-import { deepEqual as eq } from 'fast-equals'
-import { isDefined, omit } from 'remeda'
-import type { Base } from './types'
-
-function _update<E extends Base.Edge>(current: E[], update: E[]): E[] {
-  return update.map((next) => {
-    const existing = current.find(n => n.id === next.id)
-    if (existing && eq(existing.type, next.type)) {
-      if (
-        eq(existing.hidden ?? false, next.hidden ?? false)
-        && eq(existing.source, next.source)
-        && eq(existing.sourceHandle ?? null, next.sourceHandle ?? null)
-        && eq(existing.target, next.target)
-        && eq(existing.targetHandle ?? null, next.targetHandle ?? null)
-        && eq(existing.zIndex ?? 0, next.zIndex ?? 0)
-        && eq(existing.data, next.data)
-      ) {
-        return existing
-      }
-      return {
-        ...omit(existing, ['hidden', 'zIndex']),
-        ...next,
-        data: next.data,
-      }
-    }
-    return next
-  })
-}
-
-export function updateEdges<E extends Base.Edge>(current: E[], update: E[]): E[]
-export function updateEdges<E extends Base.Edge>(update: E[]): (current: E[]) => E[]
-export function updateEdges<E extends Base.Edge>(current: E[], update?: E[]) {
-  if (isDefined(update)) {
-    return _update(current, update)
-  }
-  update = current
-  return (current: E[]) => _update(current, update)
-}

package/src/base/updateNodes.ts

@@ -1,43 +0,0 @@
-import { getNodeDimensions } from '@xyflow/system'
-import { deepEqual as eq } from 'fast-equals'
-import { isDefined, omit } from 'remeda'
-import type { Base } from './types'
-
-function _update<N extends Base.Node>(current: N[], updated: N[]): N[] {
-  return updated.map((update) => {
-    const existing = current.find(n => n.id === update.id)
-    if (existing && eq(existing.type, update.type)) {
-      const { width: existingWidth, height: existingHeight } = getNodeDimensions(existing)
-      if (
-        eq(existingWidth, update.initialWidth)
-        && eq(existingHeight, update.initialHeight)
-        && eq(existing.parentId ?? null, update.parentId ?? null)
-        && eq(existing.hidden ?? false, update.hidden ?? false)
-        && eq(existing.zIndex ?? 0, update.zIndex ?? 0)
-        && eq(existing.position, update.position)
-        && eq(existing.data, update.data)
-      ) {
-        return existing
-      }
-      return {
-        ...omit(existing, ['measured', 'parentId', 'hidden', 'zIndex']),
-        ...update,
-        // Force dimensions from update
-        width: update.initialWidth,
-        height: update.initialHeight,
-        data: update.data,
-      } as N
-    }
-    return update
-  })
-}
-
-export function updateNodes<N extends Base.Node>(current: N[], update: N[]): N[]
-export function updateNodes<N extends Base.Node>(update: N[]): (current: N[]) => N[]
-export function updateNodes<N extends Base.Node>(current: N[], update?: N[]) {
-  if (isDefined(update)) {
-    return _update(current, update)
-  }
-  update = current
-  return (current: N[]) => _update(current, update)
-}

package/src/bundle/LikeC4ModelProvider.tsx

@@ -1,12 +0,0 @@
-import type { JSX, PropsWithChildren } from 'react'
-import { LikeC4ModelProvider as LikeC4ModelProviderLib } from '../LikeC4ModelProvider'
-
-export type LikeC4ModelProviderProps = PropsWithChildren<{
-  /**
-   * The LikeC4 model to be provided to the context.
-   * TODO: refer to 'likec4/model'
-   */
-  likec4model: any
-}>
-
-export const LikeC4ModelProvider: (props: LikeC4ModelProviderProps) => JSX.Element = LikeC4ModelProviderLib

package/src/bundle/LikeC4View.props.ts

@@ -1,288 +0,0 @@
-import type * as t from '@likec4/core/types'
-import type { CSSProperties } from 'react'
-import type {
-  CustomNodes,
-  ElementIconRenderer,
-  OverrideReactFlowProps,
-  PaddingWithUnit,
-  ViewPadding,
-} from '../LikeC4Diagram.props'
-
-export interface LikeC4ViewProps<A extends t.aux.Any = t.aux.UnknownLayouted> {
-  /**
-   * View to display.
-   */
-  viewId: t.aux.ViewId<A>
-
-  /**
-   * Enable/disable panning
-   * @default false
-   */
-  pannable?: boolean | undefined
-
-  /**
-   * Enable/disable zooming
-   * @default false
-   */
-  zoomable?: boolean | undefined
-
-  /**
-   * @default true
-   */
-  keepAspectRatio?: boolean | undefined
-
-  /**
-   * Background pattern
-   * @default 'transparent'
-   */
-  background?: 'dots' | 'lines' | 'cross' | 'transparent' | 'solid' | undefined
-
-  /**
-   * Click on the view opens a modal with browser.
-   * You can customize or disable the browser.
-   *
-   * @default true
-   */
-  browser?: boolean | LikeC4BrowserProps | undefined
-
-  /**
-   * @default - determined by the user's system preferences.
-   */
-  colorScheme?: 'light' | 'dark' | undefined
-
-  /**
-   * LikeC4 views are using 'IBM Plex Sans' font.
-   * By default, component injects the CSS to document head.
-   * Set to false if you want to handle the font yourself.
-   *
-   * @default true
-   */
-  injectFontCss?: boolean | undefined
-
-  /**
-   * Show/hide panel with top left controls,
-   * @default false
-   */
-  controls?: boolean | undefined
-
-  /**
-   * If set, initial viewport will show all nodes & edges
-   * @default true
-   */
-  fitView?: boolean | undefined
-
-  /**
-   * Padding around the diagram
-   * @default '8px'
-   *
-   * @see {@link ViewPadding}
-   */
-  fitViewPadding?: ViewPadding | undefined
-
-  /**
-   * Display diagram title / description
-   *
-   * @default false
-   */
-  showDiagramTitle?: boolean | undefined
-
-  /**
-   * Show back/forward navigation buttons
-   * @default false
-   */
-  showNavigationButtons?: undefined | boolean
-
-  /**
-   * Display notations of the view
-   * @default false
-   */
-  showNotations?: boolean | undefined
-
-  /**
-   * If double click on a node should enable focus mode, i.e. highlight incoming/outgoing edges
-   * Conflicts with `browser` prop
-   *
-   * @default false
-   */
-  enableFocusMode?: boolean | undefined
-
-  /**
-   * If Walkthrough for dynamic views should be enabled
-   * @default false
-   */
-  enableDynamicViewWalkthrough?: boolean | undefined
-
-  /**
-   * Default dynamic view display variant
-   * @default 'diagram'
-   */
-  dynamicViewVariant?: t.DynamicViewDisplayVariant | undefined
-
-  /**
-   * Enable popup with element details
-   * @default false
-   */
-  enableElementDetails?: boolean | undefined
-
-  /**
-   * Display element tags in the bottom left corner
-   * @default false
-   */
-  enableElementTags?: boolean | undefined
-
-  /**
-   * Experimental feature to browse relationships
-   *
-   * @default enableElementDetails
-   */
-  enableRelationshipBrowser?: boolean | undefined
-
-  /**
-   * Display dropdown with details on relationship's label click
-   * @default enableRelationshipBrowser
-   */
-  enableRelationshipDetails?: boolean | undefined
-
-  /**
-   * Improve performance by hiding certain elements and reducing visual effects (disable mix-blend, shadows, animations)
-   *
-   * @default 'auto' - will be set to true if view is pannable and has more than 3000 * 2000 pixels
-   */
-  reduceGraphics?: 'auto' | boolean | undefined
-
-  where?: t.WhereOperator<A> | undefined
-
-  /**
-   * Override some react flow props
-   */
-  reactFlowProps?: OverrideReactFlowProps | undefined
-
-  className?: string | undefined
-  style?: CSSProperties | undefined
-
-  /**
-   * Override Mantine theme
-   */
-  mantineTheme?: any
-
-  /** Function to generate nonce attribute added to all generated `<style />` tags */
-  styleNonce?: string | (() => string) | undefined
-
-  /**
-   * Override node renderers
-   */
-  renderNodes?: CustomNodes | undefined
-
-  /**
-   * Render custom icon for a node
-   * By default, if icon is http:// or https://, it will be rendered as an image
-   */
-  renderIcon?: ElementIconRenderer | undefined
-}
-
-export interface LikeC4BrowserProps {
-  /**
-   * Background pattern for the browser view.
-   * @default 'dots'
-   */
-  background?: 'dots' | 'lines' | 'cross' | 'transparent' | 'solid' | undefined
-
-  /**
-   * Padding around the diagram
-   * @default '16px'
-   */
-  fitViewPadding?: PaddingWithUnit | undefined
-
-  /**
-   * Show/hide panel with top left controls,
-   * - `next` - show navigation panel (Experimental)
-   *
-   * @default `next`
-   */
-  controls?: boolean | 'next' | undefined
-
-  /**
-   * Display diagram title / description
-   *
-   * @default true
-   */
-  showDiagramTitle?: boolean | undefined
-
-  /**
-   * Show back/forward navigation buttons
-   * @default true
-   */
-  showNavigationButtons?: undefined | boolean
-
-  /**
-   * Enable search popup for elements and views
-   * @default true
-   */
-  enableSearch?: boolean | undefined
-
-  /**
-   * If double click on a node should enable focus mode
-   *
-   * @default true
-   */
-  enableFocusMode?: boolean | undefined
-
-  /**
-   * If Walkthrough for dynamic views should be enabled
-   * @default true
-   */
-  enableDynamicViewWalkthrough?: boolean | undefined
-
-  /**
-   * Default dynamic view display variant
-   * @default 'diagram'
-   */
-  dynamicViewVariant?: t.DynamicViewDisplayVariant | undefined
-
-  /**
-   * Enable popup with element details
-   * @default true
-   */
-  enableElementDetails?: boolean | undefined
-
-  /**
-   * Experimental feature to browse relationships
-   *
-   * @default enableElementDetails
-   */
-  enableRelationshipBrowser?: boolean | undefined
-
-  /**
-   * Display dropdown with details on relationship's label click
-   * @default enableRelationshipBrowser
-   */
-  enableRelationshipDetails?: boolean | undefined
-
-  /**
-   * Display element tags in the bottom left corner
-   * @default true
-   */
-  enableElementTags?: boolean | undefined
-
-  /**
-   * Display notations of the view
-   * @default true
-   */
-  showNotations?: boolean | undefined
-
-  /**
-   * Improve performance by hiding certain elements and reducing visual effects (disable mix-blend, shadows, animations)
-   *
-   * @default 'auto' - will be set to true if view is pannable and has more than 3000 * 2000 pixels
-   */
-  reduceGraphics?: 'auto' | boolean | undefined
-
-  className?: string | undefined
-
-  style?: CSSProperties | undefined
-
-  /**
-   * Override some react flow props
-   */
-  reactFlowProps?: OverrideReactFlowProps | undefined
-}