@likec4/core 1.20.3 → 1.21.0

package/src/builder/__snapshots__/Builder-style1.spec.ts.snap

@@ -16,6 +16,7 @@ exports[`Builder (style1) > should build nested elements and relTo 1`] = `
       "shape": "rectangle",
       "style": {
         "opacity": 10,
+        "size": "lg",
       },
       "tags": null,
       "technology": null,
@@ -28,7 +29,9 @@ exports[`Builder (style1) > should build nested elements and relTo 1`] = `
       "kind": "component",
       "links": null,
       "shape": "browser",
-      "style": {},
+      "style": {
+        "textSize": "sm",
+      },
       "tags": null,
       "technology": null,
       "title": "c1",
@@ -42,6 +45,7 @@ exports[`Builder (style1) > should build nested elements and relTo 1`] = `
       "shape": "rectangle",
       "style": {
         "opacity": 10,
+        "size": "lg",
       },
       "tags": null,
       "technology": null,
@@ -54,7 +58,9 @@ exports[`Builder (style1) > should build nested elements and relTo 1`] = `
       "kind": "component",
       "links": null,
       "shape": "browser",
-      "style": {},
+      "style": {
+        "textSize": "sm",
+      },
       "tags": null,
       "technology": null,
       "title": "Component s2.1",
@@ -66,7 +72,9 @@ exports[`Builder (style1) > should build nested elements and relTo 1`] = `
       "kind": "component",
       "links": null,
       "shape": "browser",
-      "style": {},
+      "style": {
+        "textSize": "sm",
+      },
       "tags": null,
       "technology": null,
       "title": "Component s2.1.2",
@@ -78,7 +86,9 @@ exports[`Builder (style1) > should build nested elements and relTo 1`] = `
       "kind": "component",
       "links": null,
       "shape": "browser",
-      "style": {},
+      "style": {
+        "textSize": "sm",
+      },
       "tags": null,
       "technology": null,
       "title": "c3",
@@ -115,12 +125,14 @@ exports[`Builder (style1) > should build nested elements and relTo 1`] = `
       "component": {
         "style": {
           "shape": "browser",
+          "textSize": "sm",
         },
       },
       "system": {
         "style": {
           "color": "green",
           "opacity": 10,
+          "size": "lg",
         },
       },
     },

package/src/builder/__snapshots__/Builder-style2.spec.ts.snap

@@ -10,7 +10,9 @@ exports[`Builder (style 2) > should build  1`] = `
         "id": "dev",
         "kind": "env",
         "shape": "rectangle",
-        "style": {},
+        "style": {
+          "size": "lg",
+        },
         "tags": null,
         "technology": null,
         "title": "dev",
@@ -32,7 +34,9 @@ exports[`Builder (style 2) > should build  1`] = `
         "id": "prod",
         "kind": "env",
         "shape": "rectangle",
-        "style": {},
+        "style": {
+          "size": "lg",
+        },
         "tags": null,
         "technology": null,
         "title": "prod",
@@ -63,7 +67,10 @@ exports[`Builder (style 2) > should build  1`] = `
       "kind": "system",
       "links": null,
       "shape": "rectangle",
-      "style": {},
+      "style": {
+        "size": "lg",
+        "textSize": "sm",
+      },
       "tags": null,
       "technology": null,
       "title": "cloud",
@@ -101,13 +108,22 @@ exports[`Builder (style 2) > should build  1`] = `
   "relations": {},
   "specification": {
     "deployments": {
-      "env": {},
+      "env": {
+        "style": {
+          "size": "lg",
+        },
+      },
       "node": {},
     },
     "elements": {
       "actor": {},
       "component": {},
-      "system": {},
+      "system": {
+        "style": {
+          "size": "lg",
+          "textSize": "sm",
+        },
+      },
     },
     "relationships": {},
     "tags": [],

package/src/builder/_types.ts

@@ -12,6 +12,9 @@ import type {
   RelationshipArrowType,
   RelationshipKindSpecification,
   RelationshipLineType,
+  ShapeSize,
+  SpacingSize,
+  TextSize,
 } from '../types'
 import type { ExpressionV2 } from '../types/expression-v2'
 import type { Builder } from './Builder'
@@ -47,6 +50,9 @@ export type NewElementProps<Tag, Metadata> = {
     border?: BorderStyle
     // 0-100
     opacity?: number
+    size?: ShapeSize
+    padding?: SpacingSize
+    textSize?: TextSize
   }
 }
 
@@ -64,6 +70,9 @@ export type NewDeploymentNodeProps<Tag, Metadata> = {
     border?: BorderStyle
     // 0-100
     opacity?: number
+    size?: ShapeSize
+    padding?: SpacingSize
+    textSize?: TextSize
   }
 }
 

package/src/colors/index.ts

@@ -7,7 +7,43 @@ export const defaultTheme: LikeC4Theme = {
   elements: ElementColors,
   relationships: RelationshipColors,
   font: 'Arial',
-  shadow: '#0a0a0a'
+  shadow: '#0a0a0a',
+  sizes: {
+    xs: {
+      width: 120,
+      height: 80,
+    },
+    sm: {
+      width: 180,
+      height: 110,
+    },
+    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: 24, // 1.5rem = 16px + 8px
+    lg: 32, // 2rem
+    xl: 48,
+  },
+  textSizes: {
+    xs: 12,
+    sm: 14,
+    md: 19,
+    lg: 24,
+    xl: 32,
+  },
 }
 
 export function computeColorValues(color: HexColorLiteral): ThemeColorValues {
@@ -19,18 +55,18 @@ export function computeColorValues(color: HexColorLiteral): ThemeColorValues {
         fill: colors[6] as HexColorLiteral,
         stroke: colors[7] as HexColorLiteral,
         hiContrast: colors[0] as HexColorLiteral,
-        loContrast: colors[1] as HexColorLiteral
+        loContrast: colors[1] as HexColorLiteral,
       },
       relationships: {
         lineColor: colors[4] as HexColorLiteral,
         labelColor: colors[3] as HexColorLiteral,
-        labelBgColor: colors[9] as HexColorLiteral
-      }
+        labelBgColor: colors[9] as HexColorLiteral,
+      },
     }
   } else {
     return {
       elements: defaultTheme.elements['primary'],
-      relationships: defaultTheme.relationships['primary']
+      relationships: defaultTheme.relationships['primary'],
     }
   }
 }

package/src/compute-view/deployment-view/predicates/{elements.ts → deploymentRefs.ts}

@@ -1,4 +1,4 @@
-import { pipe, reduce } from 'remeda'
+import { filter, forEach, pipe, reduce } from 'remeda'
 import { isDeployedInstance } from '../../../model'
 import { findConnectionsBetween, findConnectionsWithin } from '../../../model/connection/deployment'
 import type { DeploymentElementModel, DeploymentNodeModel } from '../../../model/DeploymentElementModel'
@@ -7,15 +7,18 @@ import type { Elem, IncludePredicateCtx, PredicateExecutor } from '../_types'
 import { cleanCrossBoundary, cleanRedundantRelationships } from '../clean-connections'
 import type { StageInclude } from '../memory'
 import { deploymentExpressionToPredicate } from '../utils'
+import { applyElementPredicate } from './utils'
 
 export const DeploymentRefPredicate: PredicateExecutor<FqnExpr.DeploymentRef> = {
   include: (ctx) => {
-    const { expr } = ctx
+    const { expr, where } = ctx
     const el = ctx.model.element(expr.ref.deployment)
 
     if (isDeployedInstance(el)) {
-      ctx.stage.addExplicit(el)
-      ctx.stage.connectWithExisting(el)
+      if (applyElementPredicate(el, where)) {
+        ctx.stage.addExplicit(el)
+        ctx.stage.connectWithExisting(el)
+      }
       return ctx.stage
     }
 
@@ -30,16 +33,23 @@ export const DeploymentRefPredicate: PredicateExecutor<FqnExpr.DeploymentRef> =
         includeDeployedNodeDescendants(el, ctx)
         break
       default: {
-        ctx.stage.addExplicit(el)
-        ctx.stage.connectWithExisting(el)
+        if (applyElementPredicate(el, where)) {
+          ctx.stage.addExplicit(el)
+          ctx.stage.connectWithExisting(el)
+        }
       }
     }
     return ctx.stage
   },
 
-  exclude: ({ expr, stage, memory }) => {
+  exclude: ({ expr, stage, memory, where }) => {
     const exprPredicate = deploymentExpressionToPredicate(expr)
-    stage.exclude([...memory.elements].filter(exprPredicate))
+    const toExclude = pipe(
+      [...memory.elements],
+      filter<DeploymentElementModel>(exprPredicate),
+      applyElementPredicate(where),
+    )
+    stage.exclude(toExclude)
     return stage
   },
 }
@@ -49,9 +59,9 @@ export const DeploymentRefPredicate: PredicateExecutor<FqnExpr.DeploymentRef> =
  */
 function includeDeployedNodeChildren(
   node: DeploymentNodeModel,
-  { stage }: IncludePredicateCtx,
+  { stage, where }: IncludePredicateCtx,
 ) {
-  const children = [...node.children()]
+  const children = applyElementPredicate([...node.children()], where)
   if (children.length === 0) {
     return
   }
@@ -68,12 +78,12 @@ function includeDeployedNodeChildren(
  */
 function includeDeployedNodeWithExpanded(
   node: DeploymentNodeModel,
-  { memory, stage }: IncludePredicateCtx,
+  { memory, stage, where }: IncludePredicateCtx,
 ) {
-  const children = [...node.children()]
   stage.addImplicit(node)
   stage.connectWithExisting(node)
 
+  const children = applyElementPredicate([...node.children()], where)
   let hasConnectionsWithVisible = false
   for (const child of children) {
     if (findConnectionsBetween(child, memory.elements).length > 0) {
@@ -99,7 +109,7 @@ function includeDeployedNodeWithExpanded(
  */
 function includeDeployedNodeDescendants(
   node: DeploymentNodeModel,
-  { stage }: IncludePredicateCtx,
+  { stage, where }: IncludePredicateCtx,
 ) {
   const dfs = (node: DeploymentNodeModel): DeploymentElementModel[] => {
     const children = [] as DeploymentElementModel[]
@@ -107,7 +117,9 @@ function includeDeployedNodeDescendants(
       if (child.isDeploymentNode()) {
         children.push(...dfs(child))
       }
-      children.push(child)
+      if (applyElementPredicate(child, where)) {
+        children.push(child)
+      }
     }
     stage.connectWithExisting(children, 'in')
     stage.addConnections(findConnectionsWithin(children))
@@ -120,14 +132,13 @@ function includeDeployedNodeDescendants(
     return
   }
   stage.connectWithExisting(descendants, 'out')
-  // stage.addImplicit(descendants)
 
-  const allconnected = findConnectedElements(stage)
-  descendants.forEach((desc) => {
-    if (allconnected.has(desc)) {
-      stage.addExplicit(desc)
-    }
-  })
+  const allConnected = findConnectedElements(stage)
+  pipe(
+    descendants,
+    filter(desc => allConnected.has(desc)),
+    forEach(desc => stage.addExplicit(desc)),
+  )
 }
 
 function findConnectedElements(stage: StageInclude) {

package/src/compute-view/deployment-view/predicates/index.ts

@@ -1,4 +1,4 @@
-export * from './elements'
+export * from './deploymentRefs'
 export * from './relation-direct'
 export * from './relation-in-out'
 export * from './relation-incoming'

package/src/compute-view/deployment-view/predicates/utils.ts

@@ -14,7 +14,7 @@ import { type Filterable, type OperatorPredicate, FqnExpr, RelationExpr } from '
 import { hasIntersection, intersection } from '../../../utils/set'
 import type { ExcludePredicateCtx, PredicateCtx } from '../_types'
 import type { StageExclude, StageInclude } from '../memory'
-import { DeploymentRefPredicate } from './elements'
+import { DeploymentRefPredicate } from './deploymentRefs'
 import { DirectRelationPredicate } from './relation-direct'
 import { InOutRelationPredicate } from './relation-in-out'
 import { IncomingRelationPredicate } from './relation-incoming'
@@ -37,6 +37,7 @@ export function predicateToPatch(
       return DeploymentRefPredicate[op]({ ...ctx, expr, where } as any)
     case FqnExpr.isWildcard(expr):
       return WildcardPredicate[op]({ ...ctx, expr, where } as any)
+
     case RelationExpr.isDirect(expr):
       return DirectRelationPredicate[op]({ ...ctx, expr, where } as any)
     case RelationExpr.isInOut(expr):
@@ -155,6 +156,60 @@ export function applyPredicate<M extends AnyAux>(
   })
 }
 
+/**
+ * Checks elements using the provided predicate.
+ *
+ * @param c The collection of element to apply the predicate to
+ * @param where The predicate
+ * @returns Returns array of elements those match the predicate
+ */
+export function applyElementPredicate<M extends AnyAux>(
+  c: readonly DeploymentElementModel<M>[],
+  where: OperatorPredicate<Filterable> | null,
+): readonly DeploymentElementModel<M>[]
+/**
+ * Checks element using the provided predicate.
+ *
+ * @param c The element to apply the predicate to
+ * @param where The predicate
+ * @returns The result of the check
+ */
+export function applyElementPredicate<M extends AnyAux, E extends DeploymentElementModel<M>>(
+  c: E,
+  where: OperatorPredicate<Filterable> | null,
+): boolean
+/**
+ * Creates a function that filters elemetns using the provided predicate.
+ *
+ * @param where The predicate
+ * @returns A function to filter elements
+ */
+export function applyElementPredicate<M extends AnyAux, E extends DeploymentElementModel<M>>(
+  where: OperatorPredicate<Filterable> | null,
+): (data: readonly E[]) => readonly E[]
+export function applyElementPredicate<M extends AnyAux, E extends DeploymentElementModel<M>>(
+  ...args:
+    | [readonly E[], OperatorPredicate<Filterable> | null]
+    | [OperatorPredicate<Filterable> | null]
+    | [c: E, OperatorPredicate<Filterable> | null]
+):
+  | boolean
+  | readonly E[]
+  | ((data: readonly E[]) => readonly E[])
+{
+  if (args.length === 1) {
+    return x => applyElementPredicate(x, args[0]) as readonly E[]
+  }
+
+  const [c, where] = args
+
+  if (isArray(c)) {
+    return c.filter(x => applyElementPredicate(x, where))
+  }
+
+  return where?.(toFilterable(c, c)) ?? true
+}
+
 export function matchConnections<M extends AnyAux>(
   connections: readonly DeploymentConnectionModel<M>[],
   where: OperatorPredicate<Filterable> | null,

package/src/compute-view/deployment-view/predicates/wildcard.ts

@@ -1,17 +1,22 @@
+import { map, pipe } from 'remeda'
 import { findConnectionsWithin } from '../../../model/connection/deployment'
 import type { FqnExpr } from '../../../types'
 import { type Elem, type PredicateExecutor } from '../_types'
+import { applyElementPredicate } from './utils'
 
 export const WildcardPredicate: PredicateExecutor<FqnExpr.Wildcard> = {
-  include: ({ model, stage }) => {
+  include: ({ model, stage, where }) => {
     const children = [] as Elem[]
 
-    const rootElements = [...model.roots()].map(root => {
-      if (!root.onlyOneInstance()) {
-        children.push(...root.children())
-      }
-      return root
-    })
+    const rootElements = pipe(
+      [...model.roots()],
+      applyElementPredicate(where),
+      map(root => {
+        if (!root.onlyOneInstance()) {
+          children.push(...root.children())
+        }
+        return root
+      }))
 
     stage.addExplicit(rootElements)
     if (children.length > 1) {
@@ -22,8 +27,14 @@ export const WildcardPredicate: PredicateExecutor<FqnExpr.Wildcard> = {
     }
     return stage
   },
-  exclude: ({ stage, memory }) => {
-    stage.exclude(memory.elements)
+  exclude: ({ stage, memory, where }) => {
+    const elementsToExclude = pipe(
+      [...memory.elements],
+      applyElementPredicate(where),
+    )
+
+    stage.exclude(elementsToExclude)
+
     return stage
   },
 }

package/src/compute-view/memory/AbstractStageExclude.ts

@@ -209,7 +209,7 @@ export abstract class AbstractStageExclude<T extends AnyCtx> implements StageExc
       state = this.removeElements(state)
     }
 
-    state = this.moveDisconnectedExplicitsToImplicits(state)
+    //state = this.moveDisconnectedExplicitsToImplicits(state)
 
     return this.memory.update(this.postcommit(state))
   }

package/src/compute-view/utils/applyCustomElementProperties.ts

@@ -27,7 +27,15 @@ export function applyCustomElementProperties(_rules: ViewRule[], _nodes: Compute
       custom: { expr, ...props },
     } of rules
   ) {
-    const { border, opacity, multiple, ...rest } = omitBy(props, isNullish)
+    const {
+      border,
+      opacity,
+      multiple,
+      padding,
+      size,
+      textSize,
+      ...rest
+    } = omitBy(props, isNullish)
     const notEmpty = !isEmpty(rest)
     const satisfies = elementExprToPredicate(expr)
     nodes.forEach((node, i) => {
@@ -52,6 +60,15 @@ export function applyCustomElementProperties(_rules: ViewRule[], _nodes: Compute
       if (multiple !== undefined) {
         styleOverride = { ...styleOverride, multiple }
       }
+      if (padding !== undefined) {
+        styleOverride = { ...styleOverride, padding }
+      }
+      if (size !== undefined) {
+        styleOverride = { ...styleOverride, size }
+      }
+      if (textSize !== undefined) {
+        styleOverride = { ...styleOverride, textSize }
+      }
       if (styleOverride) {
         node = {
           ...node,

package/src/compute-view/utils/applyViewRuleStyles.ts

@@ -34,6 +34,15 @@ export function applyViewRuleStyle<Rule extends CommonViewRuleStyle>(
       if (isDefined(rule.style.multiple)) {
         styleOverride = { ...styleOverride, multiple: rule.style.multiple }
       }
+      if (isDefined(rule.style.padding)) {
+        styleOverride = { ...styleOverride, padding: rule.style.padding }
+      }
+      if (isDefined(rule.style.size)) {
+        styleOverride = { ...styleOverride, size: rule.style.size }
+      }
+      if (isDefined(rule.style.textSize)) {
+        styleOverride = { ...styleOverride, textSize: rule.style.textSize }
+      }
       if (styleOverride) {
         n.style = {
           ...n.style,

package/src/compute-view/utils/buildComputedNodes.ts

@@ -2,12 +2,12 @@ import type { Simplify } from 'type-fest'
 import { nonNullable } from '../../errors'
 import {
   type ComputedNode,
+  type Element,
+  type Fqn,
+  type NodeId,
   DefaultElementShape,
   DefaultThemeColor,
-  type Element,
   ElementKind,
-  type Fqn,
-  type NodeId
 } from '../../types'
 import { compareByFqnHierarchically, parentFqn } from '../../utils/fqn'
 import { NodesGroup } from '../element-view/memory'
@@ -28,7 +28,7 @@ function updateDepthOfAncestors(node: ComputedNode, nodes: ReadonlyMap<Fqn, Comp
 const modelElementAsNodeSource = (element: Element): ComputedNodeSource => {
   return {
     ...element,
-    modelRef: 1
+    modelRef: 1,
   }
 }
 
@@ -44,7 +44,7 @@ export function buildComputedNodesFromElements(elements: ReadonlyArray<Element>,
 
 export function buildComputedNodes(
   elements: ReadonlyArray<ComputedNodeSource>,
-  groups?: ReadonlyArray<NodesGroup>
+  groups?: ReadonlyArray<NodesGroup>,
 ): ReadonlyMap<Fqn, ComputedNode> {
   const nodesMap = new Map<Fqn, ComputedNode>()
 
@@ -72,8 +72,12 @@ export function buildComputedNodes(
       links: null,
       style: {
         border: viewRule.border ?? 'dashed',
-        opacity: viewRule.opacity ?? 0
-      }
+        opacity: viewRule.opacity ?? 0,
+        size: viewRule.size ?? 'md',
+        multiple: viewRule.multiple ?? false,
+        padding: viewRule.padding ?? 'md',
+        textSize: viewRule.textSize ?? 'md',
+      },
     })
     for (const e of elements) {
       elementToGroup.set(e.id, id)
@@ -128,8 +132,8 @@ export function buildComputedNodes(
         outEdges: [],
         ...el,
         style: {
-          ...style
-        }
+          ...style,
+        },
       }
       nodesMap.set(id, node)
     })

package/src/model/DeploymentElementModel.ts

@@ -18,6 +18,7 @@ import {
   DefaultElementShape,
   DefaultThemeColor,
 } from '../types'
+import { DefaultShapeSize } from '../types/element'
 import { commonAncestor, hierarchyLevel } from '../utils'
 import { difference, intersection, union } from '../utils/set'
 import type { LikeC4DeploymentModel } from './DeploymentModel'
@@ -43,10 +44,11 @@ abstract class AbstractDeploymentElementModel<M extends AnyAux = AnyAux> {
   abstract readonly $model: LikeC4DeploymentModel<M>
   abstract readonly $node: DeploymentNode | DeployedInstance
 
-  get style(): SetRequired<DeploymentElementStyle, 'shape' | 'color'> {
+  get style(): SetRequired<DeploymentElementStyle, 'shape' | 'color' | 'size'> {
     return {
       shape: DefaultElementShape,
       color: DefaultThemeColor,
+      size: DefaultShapeSize,
       ...this.$node.style,
     }
   }
@@ -349,11 +351,12 @@ export class DeployedInstanceModel<M extends AnyAux = AnyAux> extends AbstractDe
     return nonNullable(this.$model.parent(this), `Parent of ${this.id} not found`)
   }
 
-  override get style(): SetRequired<DeploymentElementStyle, 'shape' | 'color'> {
+  override get style(): SetRequired<DeploymentElementStyle, 'shape' | 'color' | 'size'> {
     const { icon, style } = this.element.$element
     return {
       shape: this.element.shape,
       color: this.element.color,
+      size: DefaultShapeSize,
       ...icon && { icon },
       ...style,
       ...this.$instance.style,

package/src/model/ElementModel.ts

@@ -1,8 +1,10 @@
 import { isTruthy } from 'remeda'
+import type { SetRequired } from 'type-fest'
 import {
   type Element as C4Element,
   type ElementKind as C4ElementKind,
   type ElementShape as C4ElementShape,
+  type ElementStyle,
   type IconUrl,
   type IteratorLike,
   type Link,
@@ -11,6 +13,7 @@ import {
   DefaultElementShape,
   DefaultThemeColor,
 } from '../types'
+import { DefaultShapeSize } from '../types/element'
 import { commonAncestor, hierarchyLevel, isAncestor, sortNaturalByFqn } from '../utils'
 import { type DeployedInstancesIterator } from './DeploymentElementModel'
 import type { LikeC4Model } from './LikeC4Model'
@@ -80,6 +83,13 @@ export class ElementModel<M extends AnyAux = AnyAux> {
     return this.parent === null
   }
 
+  get style(): SetRequired<ElementStyle, 'size'> {
+    return {
+      size: DefaultShapeSize,
+      ...this.$element.style,
+    }
+  }
+
   public isAncestorOf(another: ElementModel<M>): boolean {
     return isAncestor(this, another)
   }