@likec4/language-server 1.2.2 → 1.3.0

package/src/model-graph/utils/applyElementCustomProperties.ts

@@ -0,0 +1,49 @@
+import type { ComputedNode, ViewRule } from '@likec4/core'
+import { Expr, nonNullable } from '@likec4/core'
+import { isEmpty, isNullish as isNil, omitBy } from 'remeda'
+
+export function applyElementCustomProperties(_rules: ViewRule[], _nodes: ComputedNode[]) {
+  const rules = _rules.flatMap(r => ('include' in r ? r.include.filter(Expr.isCustomElement) : []))
+  if (rules.length === 0) {
+    return _nodes
+  }
+  const nodes = [..._nodes]
+  for (
+    const {
+      custom: { element, ...props }
+    } of rules
+  ) {
+    const nodeIdx = nodes.findIndex(n => n.id === element)
+    if (nodeIdx === -1) {
+      continue
+    }
+    let node = nonNullable(nodes[nodeIdx])
+    const { border, opacity, ...rest } = omitBy(props, isNil)
+    if (!isEmpty(rest)) {
+      node = {
+        ...node,
+        ...rest
+      }
+    }
+
+    let styleOverride: ComputedNode['style'] | undefined
+    if (border !== undefined) {
+      styleOverride = { border }
+    }
+    if (opacity !== undefined) {
+      styleOverride = { ...styleOverride, opacity }
+    }
+    if (styleOverride) {
+      node = {
+        ...node,
+        style: {
+          ...node.style,
+          ...styleOverride
+        }
+      }
+    }
+
+    nodes[nodeIdx] = node
+  }
+  return nodes
+}

package/src/model-graph/utils/applyViewRuleStyles.ts

@@ -0,0 +1,68 @@
+import type { ComputedNode, ViewRule } from '@likec4/core'
+import { Expr, isViewRuleStyle, nonexhaustive, parentFqn } from '@likec4/core'
+import { anyPass, filter, type Predicate } from 'rambdax'
+import { isDefined, isNullish } from 'remeda'
+
+export function applyViewRuleStyles(_rules: ViewRule[], nodes: ComputedNode[]) {
+  const rules = _rules.filter(isViewRuleStyle)
+  if (rules.length === 0) {
+    return nodes
+  }
+  for (const rule of rules) {
+    const predicates = [] as Predicate<ComputedNode>[]
+    for (const target of rule.targets) {
+      if (Expr.isWildcard(target)) {
+        predicates.push(() => true)
+        break
+      }
+      if (Expr.isElementKindExpr(target)) {
+        predicates.push(
+          target.isEqual ? n => n.kind === target.elementKind : n => n.kind !== target.elementKind
+        )
+        continue
+      }
+      if (Expr.isElementTagExpr(target)) {
+        predicates.push(
+          target.isEqual
+            ? ({ tags }) => !!tags && tags.includes(target.elementTag)
+            : ({ tags }) => isNullish(tags) || !tags.includes(target.elementTag)
+        )
+        continue
+      }
+      if (Expr.isExpandedElementExpr(target)) {
+        predicates.push(n => n.id === target.expanded || parentFqn(n.id) === target.expanded)
+        continue
+      }
+      if (Expr.isElementRef(target)) {
+        const { element, isDescedants } = target
+        predicates.push(
+          isDescedants ? n => n.id.startsWith(element + '.') : n => (n.id as string) === element
+        )
+        continue
+      }
+      nonexhaustive(target)
+    }
+    filter(anyPass(predicates), nodes).forEach(n => {
+      n.shape = rule.style.shape ?? n.shape
+      n.color = rule.style.color ?? n.color
+      if (isDefined.strict(rule.style.icon)) {
+        n.icon = rule.style.icon
+      }
+      let styleOverride: ComputedNode['style'] | undefined
+      if (isDefined.strict(rule.style.border)) {
+        styleOverride = { ...styleOverride, border: rule.style.border }
+      }
+      if (isDefined.strict(rule.style.opacity)) {
+        styleOverride = { ...styleOverride, opacity: rule.style.opacity }
+      }
+      if (styleOverride) {
+        n.style = {
+          ...n.style,
+          ...styleOverride
+        }
+      }
+    })
+  }
+
+  return nodes
+}

package/src/model-graph/utils/buildComputeNodes.ts

@@ -0,0 +1,61 @@
+import type { ComputedNode, Element, Fqn } from '@likec4/core'
+import { compareByFqnHierarchically, DefaultElementShape, DefaultThemeColor, parentFqn } from '@likec4/core'
+
+function updateDepthOfAncestors(node: ComputedNode, nodes: ReadonlyMap<Fqn, ComputedNode>) {
+  let parentNd
+  while (!!node.parent && (parentNd = nodes.get(node.parent))) {
+    const depth = parentNd.depth ?? 1
+    parentNd.depth = Math.max(depth, (node.depth ?? 0) + 1)
+    if (parentNd.depth === depth) {
+      // stop if we didn't change depth
+      break
+    }
+    node = parentNd
+  }
+}
+
+export function buildComputeNodes(elements: Iterable<Element>) {
+  return (
+    Array.from(elements)
+      // Sort from Top to Bottom
+      // So we can ensure that parent nodes are created before child nodes
+      .sort(compareByFqnHierarchically)
+      .reduce((map, { id, color, shape, style, ...el }) => {
+        let parent = parentFqn(id)
+        let level = 0
+        // Find the first ancestor that is already in the map
+        while (parent) {
+          const parentNd = map.get(parent)
+          if (parentNd) {
+            // if parent has no children and we are about to add first one
+            // we need to set its depth to 1
+            if (parentNd.children.length == 0) {
+              parentNd.depth = 1
+              // go up the tree and update depth of all parents
+              updateDepthOfAncestors(parentNd, map)
+            }
+            parentNd.children.push(id)
+            level = parentNd.level + 1
+            break
+          }
+          parent = parentFqn(parent)
+        }
+        const node: ComputedNode = {
+          ...el,
+          id,
+          parent,
+          level,
+          color: color ?? DefaultThemeColor,
+          shape: shape ?? DefaultElementShape,
+          children: [],
+          inEdges: [],
+          outEdges: [],
+          style: {
+            ...style
+          }
+        }
+        map.set(id, node)
+        return map
+      }, new Map<Fqn, ComputedNode>()) as ReadonlyMap<Fqn, ComputedNode>
+  )
+}

package/src/model-graph/utils/sortNodes.ts

@@ -0,0 +1,105 @@
+import pkg from '@dagrejs/graphlib'
+import {
+  compareByFqnHierarchically,
+  compareRelations,
+  type ComputedEdge,
+  type ComputedNode,
+  type EdgeId,
+  type Fqn,
+  invariant,
+  nonNullable
+} from '@likec4/core'
+import { difference, filter, map, pipe, sort, take } from 'remeda'
+
+// '@dagrejs/graphlib' is a CommonJS module
+// Here is a workaround to import it
+const { Graph, alg } = pkg
+
+// side effect
+function sortChildren(nodes: readonly ComputedNode[]) {
+  nodes.forEach(parent => {
+    if (parent.children.length > 0) {
+      parent.children = nodes.flatMap(n => (n.parent === parent.id ? n.id : []))
+    }
+  })
+}
+
+export function sortNodes({
+  nodes,
+  edges
+}: {
+  nodes: ComputedNode[]
+  edges: ComputedEdge[]
+}): ComputedNode[] {
+  if (edges.length === 0) {
+    return nodes
+  }
+
+  const g = new Graph({
+    compound: false,
+    directed: true,
+    multigraph: false
+  })
+
+  const getNode = (id: Fqn) =>
+    nonNullable(
+      nodes.find(n => n.id === id),
+      'Edge not found'
+    )
+  const getEdge = (id: EdgeId) =>
+    nonNullable(
+      edges.find(edge => edge.id === id),
+      'Edge not found'
+    )
+
+  for (const e of [...edges].sort(compareRelations)) {
+    g.setEdge(e.source, e.target)
+  }
+
+  for (const n of nodes) {
+    g.setNode(n.id)
+    if (n.children.length > 0) {
+      // n.children.forEach(c => {
+      //   g.setEdge(n.id, c, undefined, `${n.id}:${c}`)
+      // })
+      n.inEdges.forEach(e => {
+        const edge = getEdge(e)
+        // if this edge from leaf to the child of this node
+        if (edge.target !== n.id && getNode(edge.source).children.length === 0) {
+          // const id = `${edge.source}:${n.id}`
+          g.setEdge(edge.source, n.id)
+        }
+      })
+      // n.outEdges.forEach(e => {
+      //   const edge = getEdge(e)
+      //   if (edge.source !== n.id) {
+      //     const id = `${n.id}:${edge.target}`
+      //     g.setEdge(n.id, edge.target, undefined, id)
+      //   }
+      // })
+    }
+    if (n.parent) {
+      g.setEdge(n.parent, n.id)
+    }
+  }
+
+  let sources = g.sources()
+  if (sources.length === 0) {
+    sources = pipe(
+      nodes,
+      sort(compareByFqnHierarchically),
+      filter(n => n.inEdges.length === 0 || n.parent === null),
+      map(n => n.id)
+    )
+  }
+  const orderedIds = alg.postorder(g, sources).reverse() as Fqn[]
+  const sorted = orderedIds.map(getNode)
+  if (sorted.length < nodes.length) {
+    const unsorted = difference(nodes, sorted)
+    sorted.push(...unsorted)
+  }
+
+  invariant(sorted.length === nodes.length, 'Not all nodes were processed by graphlib')
+  sortChildren(sorted)
+  return sorted
+}

package/src/module.ts

@@ -13,6 +13,7 @@ import { LikeC4GeneratedModule, LikeC4GeneratedSharedModule } from './generated/
 import { logger } from './logger'
 import {
   LikeC4CodeLensProvider,
+  LikeC4CompletionProvider,
   LikeC4DocumentHighlightProvider,
   LikeC4DocumentLinkProvider,
   LikeC4DocumentSymbolProvider,
@@ -69,6 +70,7 @@ export interface LikeC4AddedServices {
     ModelChanges: LikeC4ModelChanges
   }
   lsp: {
+    CompletionProvider: LikeC4CompletionProvider
     DocumentHighlightProvider: LikeC4DocumentHighlightProvider
     DocumentSymbolProvider: LikeC4DocumentSymbolProvider
     SemanticTokenProvider: LikeC4SemanticTokenProvider
@@ -100,6 +102,7 @@ export const LikeC4Module: Module<LikeC4Services, PartialLangiumServices & LikeC
     ModelLocator: bind(LikeC4ModelLocator)
   },
   lsp: {
+    CompletionProvider: bind(LikeC4CompletionProvider),
     DocumentHighlightProvider: bind(LikeC4DocumentHighlightProvider),
     DocumentSymbolProvider: bind(LikeC4DocumentSymbolProvider),
     SemanticTokenProvider: bind(LikeC4SemanticTokenProvider),

package/src/protocol.ts

@@ -1,14 +1,11 @@
 import type {
   AutoLayoutDirection,
-  BorderStyle,
   ComputedView,
-  ElementShape,
   Fqn,
   LikeC4ComputedModel,
   LikeC4Model,
-  NonEmptyArray,
   RelationID,
-  ThemeColor,
+  ViewChangeOp,
   ViewID
 } from '@likec4/core'
 import type { DocumentUri, Location } from 'vscode-languageserver-protocol'
@@ -57,31 +54,19 @@ export type LocateRequest = typeof locate
 // #endregion
 
 export namespace ChangeView {
-
   export interface ChangeAutoLayout {
     op: 'change-autolayout'
     layout: AutoLayoutDirection
   }
-
-  export interface ChangeElementStyle {
-    op: 'change-element-style'
-    style: {
-      border?: BorderStyle
-      opacity?: number
-      shape?: ElementShape
-      color?: ThemeColor
-    }
-    targets: NonEmptyArray<Fqn>
-  }
 }
 
 export type ChangeView =
   | ChangeView.ChangeAutoLayout
-  | ChangeView.ChangeElementStyle
+  | ViewChangeOp
 
 export interface ChangeViewRequestParams {
   viewId: ViewID
-  changes: NonEmptyArray<ChangeView>
+  change: ChangeView
 }
 export const changeView = new RequestType<ChangeViewRequestParams, Location | null, void>('likec4/change-view')
 export type ChangeViewRequest = typeof changeView

package/src/references/scope-computation.ts

@@ -1,3 +1,4 @@
+import { nonexhaustive } from '@likec4/core'
 import {
   type AstNode,
   type AstNodeDescription,
@@ -30,18 +31,35 @@ export class LikeC4ScopeComputation extends DefaultScopeComputation {
         ])
       ) {
         try {
-          if (ast.isSpecificationTag(spec)) {
-            if (spec.tag && isTruthy(spec.tag.name)) {
-              docExports.push(
-                this.descriptions.createDescription(spec.tag, '#' + spec.tag.name, document)
-              )
+          switch (true) {
+            case ast.isSpecificationElementKind(spec): {
+              if (isTruthy(spec.kind.name)) {
+                docExports.push(
+                  this.descriptions.createDescription(spec.kind, spec.kind.name, document)
+                )
+              }
+              continue
             }
-            continue
-          }
-          if (spec.kind && isTruthy(spec.kind.name)) {
-            docExports.push(
-              this.descriptions.createDescription(spec.kind, spec.kind.name, document)
-            )
+            case ast.isSpecificationTag(spec): {
+              if (isTruthy(spec.tag.name)) {
+                docExports.push(
+                  this.descriptions.createDescription(spec.tag, '#' + spec.tag.name, document)
+                )
+              }
+              continue
+            }
+            case ast.isSpecificationRelationshipKind(spec): {
+              if (isTruthy(spec.kind.name)) {
+                docExports.push(
+                  this.descriptions.createDescription(spec.kind, spec.kind.name, document),
+                  this.descriptions.createDescription(spec.kind, '.' + spec.kind.name, document)
+                )
+              }
+              continue
+            }
+            // Thow error if not exhaustive
+            default:
+              nonexhaustive(spec)
           }
         } catch (e) {
           logError(e)

package/src/references/scope-provider.ts

@@ -6,6 +6,7 @@ import {
   CstUtils,
   DefaultScopeProvider,
   DONE_RESULT,
+  EMPTY_SCOPE,
   EMPTY_STREAM,
   GrammarUtils,
   type ReferenceInfo,
@@ -17,7 +18,7 @@ import {
 } from 'langium'
 import { ast } from '../ast'
 import { elementRef, getFqnElementRef } from '../elementRef'
-import { logError } from '../logger'
+import { logger } from '../logger'
 import type { FqnIndex, FqnIndexEntry } from '../model/fqn-index'
 import type { LikeC4Services } from '../module'
 
@@ -102,26 +103,31 @@ export class LikeC4ScopeProvider extends DefaultScopeProvider {
   }
 
   override getScope(context: ReferenceInfo): Scope {
-    const referenceType = this.reflection.getReferenceType(context)
     try {
-      const container = context.container
-      if (ast.isFqnElementRef(container) && context.property === 'el') {
-        const parent = container.parent
-        if (!parent) {
-          return this.getGlobalScope(referenceType)
+      const referenceType = this.reflection.getReferenceType(context)
+      try {
+        const container = context.container
+        if (ast.isFqnElementRef(container) && context.property === 'el') {
+          const parent = container.parent
+          if (!parent) {
+            return this.getGlobalScope(referenceType)
+          }
+          return new StreamScope(this.directChildrenOf(getFqnElementRef(parent)))
         }
-        return new StreamScope(this.directChildrenOf(getFqnElementRef(parent)))
-      }
-      if (ast.isElementRef(container) && context.property === 'el') {
-        const parent = container.parent
-        if (parent) {
-          return new StreamScope(this.scopeElementRef(parent))
+        if (ast.isElementRef(container) && context.property === 'el') {
+          const parent = container.parent
+          if (parent) {
+            return new StreamScope(this.scopeElementRef(parent))
+          }
         }
+        return this.computeScope(context)
+      } catch (e) {
+        logger.error(e)
+        return this.getGlobalScope(referenceType)
       }
-      return this.computeScope(context)
     } catch (e) {
-      logError(e)
-      return this.getGlobalScope(referenceType)
+      logger.warn(e)
+      return EMPTY_SCOPE
     }
   }
 

package/src/validation/view.ts

@@ -1,13 +1,18 @@
-import type { ValidationCheck } from 'langium'
+import { CstUtils, type ValidationCheck } from 'langium'
 import { ast } from '../ast'
 import type { LikeC4Services } from '../module'
+import { deserializeFromComment, hasManualLayout } from '../view-utils/manual-layout'
 
 export const viewChecks = (services: LikeC4Services): ValidationCheck<ast.LikeC4View> => {
   const index = services.shared.workspace.IndexManager
   return (el, accept) => {
-    // if (el.extends) {
-    //   // TODO: circular dependency check
-    // }
+    const commentNode = CstUtils.findCommentNode(el.$cstNode, ['BLOCK_COMMENT'])
+    if (commentNode && hasManualLayout(commentNode.text) && !deserializeFromComment(commentNode.text)) {
+      accept('warning', `Malformed @likec4-generated (ignored)`, {
+        node: el,
+        range: commentNode.range
+      })
+    }
     if (!el.name) {
       return
     }

package/src/view-utils/manual-layout.ts

@@ -0,0 +1,93 @@
+import { invariant } from '@likec4/core'
+import type { EdgeId, Fqn, ViewManualLayout } from '@likec4/core/types'
+import JSON5 from 'json5'
+import { chunk, entries, hasAtLeast, mapToObj } from 'remeda'
+
+export namespace CompactViewManualLayout {
+  export type Node = [
+    id: Fqn,
+    x: number,
+    y: number,
+    width: number,
+    height: number
+  ]
+
+  export type Edge = [
+    id: EdgeId,
+    // flatten array of points, [x1, y1, x2, y2, ...]
+    controlPoints: number[]
+  ]
+
+  // TODO replace with Zod/Valibot
+  export function isCompactLayout(layout: any): layout is CompactViewManualLayout {
+    return Array.isArray(layout) && hasAtLeast(layout, 3)
+      && layout[0] === 1
+      && Array.isArray(layout[1])
+      && Array.isArray(layout[2])
+  }
+
+  export function pack(layout: ViewManualLayout): CompactViewManualLayout {
+    return [
+      1,
+      entries.strict(layout.nodes).map(([id, { x, y, width, height }]) => [id, x, y, width, height]),
+      entries.strict(layout.edges).map(([id, { controlPoints }]) => [id, controlPoints.flatMap(({ x, y }) => [x, y])])
+    ]
+  }
+
+  export function unpack([_v, nodes, edges]: CompactViewManualLayout): ViewManualLayout {
+    return {
+      nodes: mapToObj(nodes, ([id, x, y, width, height]) => [id, { x, y, width, height }]),
+      // edges: Object.fromEntries(edges.map(([id, controlPoints]) => [id, { controlPoints: mapWithFeedback(controlPoints, (x, y) => ({ x, y }), { x: 0, y: 0 }) }])
+      edges: mapToObj(edges, ([id, controlPoints]) => {
+        return [id, {
+          controlPoints: chunk(controlPoints, 2).map(([x, y = 0]) => ({ x, y }))
+        }]
+      })
+    }
+  }
+}
+
+export type CompactViewManualLayout = [
+  1, // version
+  nodes: Array<CompactViewManualLayout.Node>,
+  edges: Array<CompactViewManualLayout.Edge>
+]
+
+export function serializeToComment(layout: ViewManualLayout) {
+  const compacted = CompactViewManualLayout.pack(layout)
+  const encoded = btoa(JSON5.stringify(compacted))
+  const lines = chunk(Array.from(encoded), 100).map(l => ' * ' + l.join(''))
+  lines.unshift(
+    '/**',
+    ' * @likec4-generated(v1)'
+  )
+  lines.push(' */')
+
+  return lines.join('\n')
+}
+
+export function hasManualLayout(comment: string) {
+  return comment.includes('@likec4-generated')
+}
+
+export function deserializeFromComment(comment: string): ViewManualLayout | undefined {
+  if (!hasManualLayout(comment)) {
+    console.error(`Not a likec4-generated comment: ${comment}`)
+    return undefined
+  }
+  try {
+    const b64 = comment
+      .trim()
+      .split('\n')
+      .filter(l => !l.includes('**') && !l.includes('@likec4-') && !l.includes('*/'))
+      .map(l => l.replaceAll('*', '').trim())
+      .join('')
+    const decodedb64 = atob(b64)
+    const compacted = JSON5.parse(decodedb64)
+    invariant(CompactViewManualLayout.isCompactLayout(compacted), 'Invalid compacted layout')
+    return CompactViewManualLayout.unpack(compacted)
+  } catch (e) {
+    console.error(e)
+    return undefined
+  }
+}

package/contrib/likec4.monarch.ts

@@ -1,41 +0,0 @@
-// Monarch syntax highlighting for the likec4 language.
-export default {
-    keywords: [
-        'BottomTop','LeftRight','RightLeft','TopBottom','amber','autoLayout','blue','border','browser','color','crow','cylinder','dashed','description','diamond','dotted','dynamic','element','exclude','extend','extends','gray','green','head','icon','include','indigo','it','kind','line','link','mobile','model','muted','navigateTo','none','normal','odiamond','of','onormal','opacity','open','person','primary','queue','rectangle','red','relationship','secondary','shape','sky','slate','solid','specification','storage','style','tag','tail','technology','this','title','vee','view','views','with'
-    ],
-    operators: [
-        '*','->','<-','<->'
-    ],
-    symbols: /\*|->|-\[|<-|<->|\]->|\{|\}/,
-
-    tokenizer: {
-        initial: [
-            { regex: /\w+:\/\/\S+/, action: {"token":"URI_WITH_SCHEMA"} },
-            { regex: /\.{0,2}\/[^\/]\S+/, action: {"token":"URI_RELATIVE"} },
-            { regex: /\b\._/, action: {"token":"DotUnderscore"} },
-            { regex: /\b\.\*/, action: {"token":"DotWildcard"} },
-            { regex: /\#\b/, action: {"token":"TagHash"} },
-            { regex: /\b\./, action: {"token":"Dot"} },
-            { regex: /\!\={1,2}/, action: {"token":"NotEqual"} },
-            { regex: /\={1,2}/, action: {"token":"Eq"} },
-            { regex: /:/, action: {"token":"Colon"} },
-            { regex: /;/, action: {"token":"SemiColon"} },
-            { regex: /,/, action: {"token":"Comma"} },
-            { regex: /\b\d+%/, action: {"token":"Percent"} },
-            { regex: /"[^"]*"|'[^']*'/, action: {"token":"string"} },
-            { regex: /\b[_]*[a-zA-Z][_-\w]*/, action: { cases: { '@keywords': {"token":"keyword"}, '@default': {"token":"IdTerminal"} }} },
-            { include: '@whitespace' },
-            { regex: /@symbols/, action: { cases: { '@operators': {"token":"operator"}, '@default': {"token":""} }} },
-        ],
-        whitespace: [
-            { regex: /\/\*/, action: {"token":"comment","next":"@comment"} },
-            { regex: /\/\/[^\n\r]*/, action: {"token":"comment"} },
-            { regex: /\s+/, action: {"token":"white"} },
-        ],
-        comment: [
-            { regex: /[^/\*]+/, action: {"token":"comment"} },
-            { regex: /\*\//, action: {"token":"comment","next":"@pop"} },
-            { regex: /[/\*]/, action: {"token":"comment"} },
-        ],
-    }
-};