@likec4/core 1.41.0 → 1.42.0

package/src/model/view/LikeC4ViewsFolder.ts

@@ -1,151 +0,0 @@
-import { isEmpty, last } from 'remeda'
-import type { aux, NonEmptyArray } from '../../types'
-import { invariant, memoizeProp } from '../../utils'
-import type { LikeC4Model } from '../LikeC4Model'
-import { LikeC4ViewModel } from './LikeC4ViewModel'
-
-export class LikeC4ViewsFolder<A extends aux.Any = aux.Any> {
-  public readonly $model: LikeC4Model<A>
-
-  /**
-   * Path to this view folder, processed by {@link normalizeViewPath}
-   *
-   * @example
-   * "Folder 1/Folder 2/Folder 3"
-   */
-  public readonly path: string
-
-  /**
-   * Title of this view folder.
-   *
-   * @example
-   * // title is the last segment of the path
-   * path = "Folder 1/Folder 2/Folder 3"
-   * title = "Folder 3"
-   */
-  public readonly title: string
-
-  /**
-   * Whether this is the root view folder.
-   *
-   * !NOTE
-   * Root folder is special folder with an empty path and used only for internal purposes. \
-   * It is not visible to the user and should not be used in the code.
-   */
-  public readonly isRoot: boolean
-
-  protected readonly parentPath: string | undefined
-
-  protected readonly defaultViewId: aux.StrictViewId<A> | undefined
-
-  constructor(
-    $model: LikeC4Model<A>,
-    path: NonEmptyArray<string>,
-    defaultViewId: aux.StrictViewId<A> | undefined,
-  ) {
-    this.$model = $model
-    this.path = path.join('/')
-    this.isRoot = this.path === ''
-    this.title = last(path)
-    if (this.isRoot) {
-      this.parentPath = undefined
-    } else {
-      this.parentPath = path.slice(0, -1).join('/')
-    }
-    this.defaultViewId = defaultViewId
-  }
-
-  /**
-   * Default view of this view folder.\
-   * It is for the case when there is a view at the same path as this folder.\
-   * (if there are multiple views at the same path, the first one is chosen)
-   *
-   * @example
-   * ```
-   * // Assume the following views exist:
-   * const views = [
-   *   "Folder 1/ Folder 2 / View",
-   *   "Folder 1/ Folder 2 / View / Subview",
-   * ]
-   * ```
-   * Group with path `Folder 1/ Folder 2 / View`\
-   * will have default view `Folder 1/ Folder 2 / View`
-   */
-  get defaultView(): LikeC4ViewModel<A> | null {
-    if (!this.defaultViewId) {
-      return null
-    }
-    return this.$model.view(this.defaultViewId)
-  }
-
-  /**
-   * Returns path to this view folder as an array of ancestors (excluding root) and this view folder as the last element
-   *
-   * @throws Error if this is the root folder.
-   */
-  get breadcrumbs(): [...LikeC4ViewsFolder<A>[], this] {
-    invariant(!this.isRoot, 'Root view folder has no breadcrumbs')
-    return memoizeProp(this, 'breadcrumbs', () => {
-      const parent = this.parent
-      if (parent) {
-        if (parent.isRoot) {
-          return [parent, this]
-        }
-        return [...parent.breadcrumbs, this]
-      }
-      return [this]
-    })
-  }
-
-  /**
-   * Returns parent folder
-   *
-   * @throws Error if this is the root folder.
-   */
-  get parent(): LikeC4ViewsFolder<A> | null {
-    invariant(!this.isRoot, 'Root view folder has no parent')
-    if (isEmpty(this.parentPath)) {
-      return null
-    }
-    return this.$model.viewFolder(this.parentPath)
-  }
-
-  /**
-   * Returns sorted set of children
-   * - First folders
-   * - Then views
-   */
-  get children(): ReadonlySet<LikeC4ViewsFolder<A> | LikeC4ViewModel<A>> {
-    return this.$model.viewFolderItems(this.path)
-  }
-
-  /**
-   * Returns sorted array of children folders
-   */
-  get folders(): ReadonlyArray<LikeC4ViewsFolder<A>> {
-    return memoizeProp(this, 'folders', () => {
-      const folders: LikeC4ViewsFolder<A>[] = []
-      for (const child of this.children) {
-        if (child instanceof LikeC4ViewsFolder) {
-          folders.push(child)
-        }
-      }
-      return folders
-    })
-  }
-
-  /**
-   * Returns all views in this view folder.
-   */
-  get views(): ReadonlyArray<LikeC4ViewModel<A>> {
-    return memoizeProp(this, 'views', () => {
-      const views: LikeC4ViewModel<A>[] = []
-      for (const child of this.children) {
-        if (child instanceof LikeC4ViewModel) {
-          views.push(child)
-        }
-      }
-      return views
-    })
-  }
-}

package/src/model/view/NodeModel.ts

@@ -1,247 +0,0 @@
-import { isTruthy } from 'remeda'
-import {
-  type Any,
-  type Color,
-  type ComputedNode,
-  type DiagramNode,
-  type ElementShape as C4ElementShape,
-  type ElementStyle,
-  type ExtractOnStage,
-  type IconUrl,
-  type IteratorLike,
-  type Link,
-  type RichTextOrEmpty,
-  type scalar,
-  GroupElementKind,
-  isGroupElementKind,
-  RichText,
-} from '../../types'
-import type * as aux from '../../types/_aux'
-import { memoizeProp } from '../../utils'
-import type { DeployedInstanceModel, DeploymentElementModel } from '../DeploymentElementModel'
-import type { ElementModel } from '../ElementModel'
-import type { $View, IncomingFilter, OutgoingFilter, WithTags } from '../types'
-import type { EdgesIterator } from './EdgeModel'
-import type { LikeC4ViewModel } from './LikeC4ViewModel'
-
-export type NodesIterator<M extends Any, V extends $View<M>> = IteratorLike<NodeModel<M, V>>
-
-export class NodeModel<A extends Any = Any, V extends $View<A> = $View<A>> implements WithTags<A> {
-  #node: ComputedNode<A> | DiagramNode<A>
-
-  constructor(
-    public readonly $view: LikeC4ViewModel<A, V>,
-    public readonly $node: V['nodes'][number],
-  ) {
-    this.#node = $node
-  }
-
-  get id(): scalar.NodeId {
-    return this.#node.id
-  }
-
-  get title(): string {
-    return this.#node.title
-  }
-
-  get kind(): aux.ElementKind<A> | aux.DeploymentKind<A> | typeof GroupElementKind | 'instance' {
-    return this.#node.kind as any
-  }
-
-  get description(): RichTextOrEmpty {
-    return RichText.memoize(this, 'description', this.#node.description)
-  }
-
-  get technology(): string | null {
-    return this.#node.technology ?? null
-  }
-
-  get parent(): NodeModel<A, V> | null {
-    return this.#node.parent ? this.$view.node(this.#node.parent) : null
-  }
-
-  get element(): ElementModel<A> | null {
-    const modelRef = this.#node.modelRef
-    return modelRef ? this.$view.$model.element(modelRef) : null
-  }
-
-  get deployment(): DeploymentElementModel<A> | null {
-    const modelRef = this.#node.deploymentRef
-    return modelRef ? this.$view.$model.deployment.element(modelRef) : null
-  }
-
-  get shape(): C4ElementShape {
-    return this.#node.shape
-  }
-
-  get color(): Color {
-    return this.#node.color
-  }
-
-  get icon(): IconUrl | null {
-    return this.#node.icon ?? null
-  }
-
-  get tags(): aux.Tags<A> {
-    return this.#node.tags
-  }
-
-  get links(): ReadonlyArray<Link> {
-    return this.#node.links ?? []
-  }
-
-  get navigateTo(): LikeC4ViewModel<A> | null {
-    return this.#node.navigateTo ? this.$view.$model.view(this.#node.navigateTo) : null
-  }
-
-  get style(): ElementStyle {
-    return this.#node.style
-  }
-
-  public children(): ReadonlySet<NodeModel<A, V>> {
-    return memoizeProp(this, 'children', () => new Set(this.#node.children.map((child) => this.$view.node(child))))
-  }
-
-  /**
-   * Get all ancestor elements (i.e. parent, parent’s parent, etc.)
-   * (from closest to root)
-   */
-  public *ancestors(): NodesIterator<A, V> {
-    let parent = this.parent
-    while (parent) {
-      yield parent
-      parent = parent.parent
-    }
-    return
-  }
-
-  public *siblings(): NodesIterator<A, V> {
-    const siblings = this.parent?.children() ?? this.$view.roots()
-    for (const sibling of siblings) {
-      if (sibling.id !== this.id) {
-        yield sibling
-      }
-    }
-    return
-  }
-
-  public *incoming(filter: IncomingFilter = 'all'): EdgesIterator<A, V> {
-    for (const edgeId of this.#node.inEdges) {
-      const edge = this.$view.edge(edgeId)
-      switch (true) {
-        case filter === 'all':
-        case filter === 'direct' && edge.target.id === this.id:
-        case filter === 'to-descendants' && edge.target.id !== this.id:
-          yield edge
-          break
-      }
-    }
-    return
-  }
-
-  public *incomers(filter: IncomingFilter = 'all'): NodesIterator<A, V> {
-    const unique = new Set<aux.NodeId>()
-    for (const r of this.incoming(filter)) {
-      if (unique.has(r.source.id)) {
-        continue
-      }
-      unique.add(r.source.id)
-      yield r.source
-    }
-    return
-  }
-
-  public *outgoing(filter: OutgoingFilter = 'all'): EdgesIterator<A, V> {
-    for (const edgeId of this.#node.outEdges) {
-      const edge = this.$view.edge(edgeId)
-      switch (true) {
-        case filter === 'all':
-        case filter === 'direct' && edge.source.id === this.id:
-        case filter === 'from-descendants' && edge.source.id !== this.id:
-          yield edge
-          break
-      }
-    }
-    return
-  }
-
-  public *outgoers(filter: OutgoingFilter = 'all'): NodesIterator<A, V> {
-    const unique = new Set<aux.NodeId>()
-    for (const r of this.outgoing(filter)) {
-      if (unique.has(r.target.id)) {
-        continue
-      }
-      unique.add(r.target.id)
-      yield r.target
-    }
-    return
-  }
-
-  public isDiagramNode(this: NodeModel<any, any>): this is NodeModel<A, ExtractOnStage<V, 'layouted'>> {
-    return 'width' in this.#node && 'height' in this.#node
-  }
-
-  public hasChildren(): boolean {
-    return this.#node.children.length > 0
-  }
-
-  public hasParent(): this is NodeModel.WithParent<A, V> {
-    return this.#node.parent !== null
-  }
-
-  /**
-   * Check if this node references to logical model element.
-   */
-  public hasElement(): this is NodeModel.WithElement<A, V> {
-    return isTruthy(this.#node.modelRef)
-  }
-  /**
-   * Check if this node references to deployment element (Node or Instance).
-   */
-  public hasDeployment(): this is NodeModel.WithDeploymentElement<A, V> {
-    return isTruthy(this.#node.deploymentRef)
-  }
-  /**
-   * Check if this node references to deployed instance
-   * Deployed instance always references to element and deployment element.
-   */
-  public hasDeployedInstance(): this is NodeModel.WithDeployedInstance<A, V> {
-    return this.hasElement() && this.hasDeployment()
-  }
-
-  public isGroup(): this is NodeModel.IsGroup<A, V> {
-    return isGroupElementKind(this.#node)
-  }
-
-  /**
-   * Checks if the node has the given tag.
-   */
-  public isTagged(tag: aux.LooseTag<A>): boolean {
-    return this.tags.includes(tag as aux.Tag<A>)
-  }
-}
-
-export namespace NodeModel {
-  export interface WithParent<A extends Any = Any, V extends $View<A> = $View<A>> extends NodeModel<A, V> {
-    parent: NodeModel<A, V>
-  }
-  export interface WithElement<A extends Any = Any, V extends $View<A> = $View<A>> extends NodeModel<A, V> {
-    kind: aux.ElementKind<A>
-    element: ElementModel<A>
-  }
-  export interface WithDeploymentElement<A extends Any = Any, V extends $View<A> = $View<A>> extends NodeModel<A, V> {
-    kind: aux.DeploymentKind<A>
-    deployment: DeploymentElementModel<A>
-  }
-  export interface WithDeployedInstance<A extends Any = Any, V extends $View<A> = $View<A>> extends NodeModel<A, V> {
-    kind: 'instance'
-    element: ElementModel<A>
-    deployment: DeployedInstanceModel<A>
-  }
-
-  export interface IsGroup<A extends Any = Any, V extends $View<A> = $View<A>> extends NodeModel<A, V> {
-    kind: typeof GroupElementKind
-    element: null
-    deployment: null
-  }
-}

package/src/theme/element.ts

@@ -1,61 +0,0 @@
-import type { ElementThemeColors, ElementThemeColorValues } from '../types'
-
-const blue = {
-  fill: '#3b82f6',
-  stroke: '#2563eb',
-  hiContrast: '#eff6ff',
-  loContrast: '#bfdbfe',
-} satisfies ElementThemeColorValues
-
-const sky = {
-  fill: '#0284c7',
-  stroke: '#0369a1',
-  hiContrast: '#f0f9ff',
-  loContrast: '#B6ECF7',
-} satisfies ElementThemeColorValues
-
-const slate = {
-  fill: '#64748b',
-  stroke: '#475569',
-  hiContrast: '#f8fafc',
-  loContrast: '#cbd5e1',
-} satisfies ElementThemeColorValues
-
-export const ElementColors: ElementThemeColors = {
-  primary: blue,
-  blue,
-  secondary: sky,
-  sky,
-  muted: slate,
-  slate,
-  gray: {
-    fill: '#737373',
-    stroke: '#525252',
-    hiContrast: '#fafafa',
-    loContrast: '#d4d4d4',
-  },
-  red: {
-    fill: '#AC4D39',
-    stroke: '#853A2D',
-    hiContrast: '#FBD3CB',
-    loContrast: '#f5b2a3',
-  },
-  green: {
-    fill: '#428a4f',
-    stroke: '#2d5d39',
-    hiContrast: '#f8fafc',
-    loContrast: '#c2f0c2',
-  },
-  amber: {
-    fill: '#A35829',
-    stroke: '#7E451D',
-    hiContrast: '#FFE0C2',
-    loContrast: '#f9b27c',
-  },
-  indigo: {
-    fill: '#6366f1',
-    stroke: '#4f46e5',
-    hiContrast: '#eef2ff',
-    loContrast: '#c7d2fe',
-  },
-}

package/src/theme/index.ts

@@ -1,127 +0,0 @@
-import { generateColors } from '@mantine/colors-generator'
-import chroma from 'chroma-js';
-import type { ColorLiteral, HexColor, LikeC4Theme, ThemeColorValues } from '../types'
-import { ElementColors } from './element'
-import { RelationshipColors } from './relationships'
-import { isDeepEqual } from 'remeda'
-
-const CONTRAST_MIN_WITH_FOREGROUND = 60
-const CONTRAST_START_TONE_DIFFERENCE = 2
-const CONTRAST_STEP_TONE_DIFFERENCE = 1
-
-export const defaultTheme: LikeC4Theme = {
-  elements: ElementColors,
-  relationships: RelationshipColors,
-  font: 'Arial',
-  shadow: '#0a0a0a',
-  sizes: {
-    xs: {
-      width: 180,
-      height: 100,
-    },
-    sm: {
-      width: 240,
-      height: 135,
-    },
-    md: {
-      width: 320,
-      height: 180,
-    },
-    lg: {
-      width: 420,
-      height: 234,
-    },
-    xl: {
-      width: 520,
-      height: 290,
-    },
-  },
-  spacing: {
-    xs: 8, // 0.5rem
-    sm: 10, // 0.625rem
-    md: 16, // 1rem
-    lg: 24, // 1.5rem = 16px + 8px
-    xl: 32, // 2rem
-  },
-  /**
-   * Text sizes for titles
-   * https://typescale.com/
-   *
-   * Scale:  1.2
-   * Base:   16px
-   */
-  textSizes: {
-    xs: 13.33,
-    sm: 16,
-    md: 19.2,
-    lg: 23.04,
-    xl: 27.65,
-  },
-}
-
-export function computeColorValues(color: ColorLiteral): ThemeColorValues {
-  if (color.match(/^#([0-9a-f]{3}){1,2}$/i)) {
-    const colors = generateColors(color)
-
-    const fillColor = colors[6]
-    const contrastedColors = getContrastedColorsAPCA(fillColor)
-    
-    return {
-      elements: {
-        fill: fillColor as HexColor,
-        stroke: colors[7] as HexColor,
-        hiContrast: contrastedColors[0] as HexColor,
-        loContrast: contrastedColors[1] as HexColor,
-      },
-      relationships: {
-        lineColor: colors[4] as HexColor,
-        labelColor: colors[3] as HexColor,
-        labelBgColor: colors[9] as HexColor,
-      },
-    }
-  } else {
-    return {
-      elements: defaultTheme.elements['primary'],
-      relationships: defaultTheme.relationships['primary'],
-    }
-  }
-}
-
-function getContrastedColorsAPCA(refColor: string): [string, string] {
-  const refColorChroma = chroma(refColor)
-
-  // Start with 2 steps tone difference in the CIELAB color space from reference
-  let lightColorRgb = refColorChroma.brighten(CONTRAST_START_TONE_DIFFERENCE);
-  let darkColorRgb = refColorChroma.darken(CONTRAST_START_TONE_DIFFERENCE);
-
-  let previousLight
-  let previousDark
-  let contrastWithLight
-  let contrastWithDark
-  do {
-    // Store previous colors for loop condition
-    previousLight = lightColorRgb
-    previousDark = darkColorRgb
-
-    // Change tone by 1 step each loop
-    lightColorRgb = lightColorRgb.brighten(CONTRAST_STEP_TONE_DIFFERENCE)
-    darkColorRgb = darkColorRgb.darken(CONTRAST_STEP_TONE_DIFFERENCE)
-
-    // Calculate contrast of each color with the reference color
-    contrastWithLight = chroma.contrastAPCA(refColorChroma, lightColorRgb);
-    contrastWithDark = chroma.contrastAPCA(refColorChroma, darkColorRgb);
-  }
-  // Stop if one of the contrast is high enough or if we reach max value for each (aka when they are equal between two rounds)
-  while (Math.abs(contrastWithLight) < CONTRAST_MIN_WITH_FOREGROUND
-    && Math.abs(contrastWithDark) < CONTRAST_MIN_WITH_FOREGROUND
-    && (!isDeepEqual(lightColorRgb, previousLight) || !isDeepEqual(darkColorRgb, previousDark)))
-
-  // Choose the max contrast between the two
-  if (Math.abs(contrastWithLight) > Math.abs(contrastWithDark)) {
-    return [lightColorRgb.brighten(0.4).hex(), lightColorRgb.hex()]
-  } else {
-    return [darkColorRgb.darken(0.4).hex(), darkColorRgb.hex()]
-  }
-}
-
-export { ElementColors, RelationshipColors }

package/src/theme/relationships.ts

@@ -1,54 +0,0 @@
-import type { RelationshipThemeColors, RelationshipThemeColorValues } from '../types/styles'
-
-const gray = {
-  lineColor: '#6E6E6E',
-  labelBgColor: '#18191b',
-  labelColor: '#C6C6C6',
-} satisfies RelationshipThemeColorValues
-const slate = {
-  lineColor: '#64748b', // 500
-  labelBgColor: '#0f172a', // 900
-  labelColor: '#cbd5e1', // 300
-} satisfies RelationshipThemeColorValues
-
-const blue = {
-  lineColor: '#3b82f6', // 500
-  labelBgColor: '#172554', // 950
-  labelColor: '#60a5fa', // 400
-} satisfies RelationshipThemeColorValues
-
-const sky = {
-  lineColor: '#0ea5e9', // 500
-  labelBgColor: '#082f49', // 950
-  labelColor: '#38bdf8', // 400
-} satisfies RelationshipThemeColorValues
-
-export const RelationshipColors: RelationshipThemeColors = {
-  amber: {
-    lineColor: '#b45309',
-    labelBgColor: '#78350f',
-    labelColor: '#FFE0C2',
-  },
-  blue,
-  gray,
-  green: {
-    lineColor: '#15803d', // 700
-    labelBgColor: '#052e16', // 950
-    labelColor: '#22c55e', // 500
-  },
-  indigo: {
-    lineColor: '#6366f1', // 500
-    labelBgColor: '#1e1b4b', // 950
-    labelColor: '#818cf8', // 400
-  },
-  muted: slate,
-  primary: blue,
-  red: {
-    lineColor: '#AC4D39',
-    labelBgColor: '#b91c1c',
-    labelColor: '#f5b2a3',
-  },
-  secondary: sky,
-  sky,
-  slate,
-}