@likec4/diagram 1.40.0 → 1.42.0

package/src/likec4diagram/xyflow-sequence/sequence-view.ts

@@ -1,337 +0,0 @@
-import {
-  type BBox,
-  type DiagramNode,
-  type LayoutedDynamicView,
-  type NodeId,
-  getParallelStepsPrefix,
-  isStepEdgeId,
-  RichText,
-} from '@likec4/core/types'
-import { DefaultMap, invariant, nonNullable } from '@likec4/core/utils'
-import { hasAtLeast } from 'remeda'
-import type { Types } from '../types'
-import type { Step } from './_types'
-import {
-  CONTINUOUS_OFFSET,
-  SeqParallelAreaColor,
-  SeqZIndex,
-} from './const'
-import { SequenceViewLayouter } from './layouter'
-import { buildCompounds } from './utils'
-
-type Port = {
-  step: Step
-  row: number
-  type: 'source' | 'target'
-  position: 'left' | 'right' | 'top' | 'bottom'
-}
-
-export function sequenceViewToXY(view: LayoutedDynamicView): {
-  bounds: BBox
-  xynodes: Array<Types.SequenceActorNode | Types.SequenceParallelArea | Types.ViewGroupNode>
-  xyedges: Array<Types.SequenceStepEdge>
-} {
-  const actors = [] as Array<DiagramNode>
-  const actorPorts = new DefaultMap<DiagramNode, Port[]>(() => [])
-
-  const steps = [] as Array<Step>
-
-  const getNode = (id: string) => nonNullable(view.nodes.find(n => n.id === id))
-  const parentsLookup: DefaultMap<DiagramNode, DiagramNode[]> = new DefaultMap(
-    key => {
-      const parent = key.parent ? getNode(key.parent) : null
-      if (parent) {
-        return [parent, ...parentsLookup.get(parent)]
-      }
-      return []
-    },
-  )
-
-  const addActor = (...[source, target]: [DiagramNode, DiagramNode]) => {
-    // source actor not yet added
-    if (!actors.includes(source)) {
-      const indexOfTarget = actors.indexOf(target)
-      if (indexOfTarget > 0) {
-        actors.splice(indexOfTarget, 0, source)
-      } else {
-        actors.push(source)
-      }
-    }
-    if (!actors.includes(target)) {
-      actors.push(target)
-    }
-  }
-
-  let row = 0
-
-  for (const edge of view.edges.filter(e => isStepEdgeId(e.id))) {
-    const prevStep = steps.at(-1)
-    const source = getNode(edge.source)
-    const target = getNode(edge.target)
-
-    if (source.children.length || target.children.length) {
-      console.error('Sequence view does not support nested actors')
-      continue
-    }
-
-    let sourceColumn = actors.indexOf(source)
-    let targetColumn = actors.indexOf(target)
-
-    const alreadyAdded = sourceColumn >= 0 && targetColumn >= 0
-
-    if (!alreadyAdded) {
-      if (edge.dir === 'back') {
-        addActor(target, source)
-      } else {
-        addActor(source, target)
-      }
-      sourceColumn = actors.indexOf(source)
-      targetColumn = actors.indexOf(target)
-    }
-
-    const isSelfLoop = source === target
-    const isBack = sourceColumn > targetColumn
-    const parallelPrefix = getParallelStepsPrefix(edge.id)
-
-    let isContinuing = false
-    if (prevStep && prevStep.target == source && prevStep.parallelPrefix === parallelPrefix) {
-      isContinuing = prevStep.isSelfLoop !== isSelfLoop || prevStep.isBack === isBack
-    }
-
-    if (!isContinuing) {
-      row++
-    }
-
-    const step: Step = {
-      id: edge.id,
-      from: {
-        column: sourceColumn,
-        row,
-      },
-      to: {
-        column: targetColumn,
-        row: isSelfLoop ? ++row : row,
-      },
-      edge,
-      isSelfLoop,
-      isBack,
-      parallelPrefix,
-      offset: isContinuing ? (prevStep?.offset ?? 0) + CONTINUOUS_OFFSET : 0,
-      source,
-      target,
-      label: edge.labelBBox
-        ? {
-          height: edge.labelBBox.height + 8 + (edge.navigateTo ? 20 : 0),
-          width: edge.labelBBox.width + 16,
-          text: edge.label,
-        }
-        : null,
-    }
-    steps.push(step)
-    actorPorts.get(source).push({ step, row, type: 'source', position: isBack && !isSelfLoop ? 'left' : 'right' })
-    actorPorts.get(target).push({ step, row, type: 'target', position: isBack || isSelfLoop ? 'right' : 'left' })
-  }
-
-  // Update columns, as actors may have been re-ordered
-  for (const step of steps) {
-    step.from.column = actors.indexOf(step.source)
-    step.to.column = actors.indexOf(step.target)
-  }
-
-  invariant(hasAtLeast(actors, 1), 'actors array must not be empty')
-
-  const layout = new SequenceViewLayouter({
-    actors,
-    steps,
-    compounds: buildCompounds(actors, view.nodes),
-  })
-
-  const bounds = layout.getViewBounds()
-
-  return {
-    bounds,
-    xynodes: [
-      ...layout.getCompoundBoxes().map((box, i) => toCompoundArea(box, i, view)),
-      ...layout.getParallelBoxes().map(box => toSeqParallelArea(box, view)),
-      ...actors.map(actor =>
-        toSeqActorNode({
-          actor,
-          ports: actorPorts.get(actor),
-          bounds,
-          layout,
-          view,
-        })
-      ),
-    ],
-    xyedges: steps.map(({ id, edge, ...step }): Types.SequenceStepEdge => ({
-      id: id,
-      type: 'seq-step',
-      data: {
-        id,
-        label: step.label?.text ?? null,
-        technology: edge.technology,
-        notes: RichText.from(edge.notes),
-        navigateTo: edge.navigateTo,
-        controlPoints: edge.controlPoints ?? null,
-        labelBBox: {
-          x: 0,
-          y: 0,
-          width: step.label?.width ?? edge.labelBBox?.width ?? 32,
-          height: step.label?.height ?? edge.labelBBox?.height ?? 32,
-        },
-        labelXY: null,
-        points: edge.points,
-        color: edge.color ?? 'gray',
-        line: edge.line ?? 'solid',
-        dir: 'forward',
-        head: 'normal',
-        tail: 'none',
-      },
-      selectable: true,
-      focusable: false,
-      zIndex: 20,
-      interactionWidth: 40,
-      source: step.source.id,
-      sourceHandle: id + '_source',
-      target: step.target.id,
-      targetHandle: id + '_target',
-    })),
-  }
-}
-
-/**
- * Shows a compound as a view group node
- */
-function toCompoundArea(
-  { node, x, y, width, height, depth }: BBox & { node: DiagramNode; depth: number },
-  index: number,
-  view: LayoutedDynamicView,
-): Types.ViewGroupNode {
-  return {
-    id: `${node.id}-${index}` as NodeId,
-    type: 'view-group',
-    data: {
-      id: node.id,
-      title: node.title,
-      color: node.color ?? 'gray',
-      shape: node.shape,
-      style: node.style,
-      tags: node.tags,
-      position: [x, y],
-      viewId: view.id,
-      depth,
-      isViewGroup: true,
-    },
-    // zIndex: SeqZIndex.compound,
-    position: {
-      x,
-      y,
-    },
-    draggable: false,
-    selectable: false,
-    focusable: false,
-    style: {
-      pointerEvents: 'none',
-    },
-    width,
-    initialWidth: width,
-    height,
-    initialHeight: height,
-  }
-}
-
-function toSeqParallelArea(
-  { parallelPrefix, x, y, width, height }: BBox & { parallelPrefix: string },
-  view: LayoutedDynamicView,
-): Types.SequenceParallelArea {
-  return {
-    id: `seq-parallel-${parallelPrefix}` as NodeId,
-    type: 'seq-parallel',
-    data: {
-      id: `seq-parallel-${parallelPrefix}` as NodeId,
-      title: 'PARALLEL',
-      technology: null,
-      color: SeqParallelAreaColor.default,
-      shape: 'rectangle',
-      style: {},
-      tags: [],
-      position: [x, y],
-      level: 0,
-      icon: null,
-      width,
-      height,
-      description: RichText.EMPTY,
-      viewId: view.id,
-      parallelPrefix,
-    },
-    zIndex: SeqZIndex.parallel,
-    position: {
-      x,
-      y,
-    },
-    draggable: false,
-    deletable: false,
-    selectable: false,
-    focusable: false,
-    style: {
-      pointerEvents: 'none',
-    },
-    width,
-    initialWidth: width,
-    height,
-    initialHeight: height,
-  }
-}
-
-function toSeqActorNode({ actor, ports, bounds, layout, view }: {
-  actor: DiagramNode
-  ports: Port[]
-  bounds: BBox
-  layout: SequenceViewLayouter
-  view: LayoutedDynamicView
-}): Types.SequenceActorNode {
-  const { x, y, width, height } = layout.getActorBox(actor)
-  return {
-    id: actor.id,
-    type: 'seq-actor',
-    data: {
-      id: actor.id,
-      position: [x, y],
-      level: 0,
-      icon: actor.icon ?? null,
-      isMultiple: actor.style.multiple ?? false,
-      title: actor.title,
-      width,
-      height,
-      color: actor.color,
-      navigateTo: actor.navigateTo ?? null,
-      shape: actor.shape,
-      style: actor.style,
-      tags: actor.tags,
-      modelFqn: actor.modelRef ?? null,
-      technology: actor.technology,
-      description: RichText.from(actor.description),
-      viewHeight: bounds.height,
-      viewId: view.id,
-      ports: ports.map((p): Types.SequenceActorNodePort => {
-        const bbox = layout.getPortCenter(p.step, p.type)
-        return ({
-          id: p.step.id + '_' + p.type,
-          cx: bbox.cx - x,
-          cy: bbox.cy - y,
-          height: bbox.height,
-          type: p.type,
-          position: p.position,
-        })
-      }),
-    },
-    deletable: false,
-    selectable: true,
-    zIndex: SeqZIndex.actor,
-    position: { x, y },
-    width,
-    initialWidth: width,
-    height,
-    initialHeight: height,
-  }
-}

package/src/likec4diagram/xyflow-sequence/utils.ts

@@ -1,112 +0,0 @@
-import type { DiagramEdge, DiagramNode, EdgeId } from '@likec4/core/types'
-import { isAncestor, nonNullable, Stack } from '@likec4/core/utils'
-import { groupBy, mapValues, pipe, values } from 'remeda'
-import type { Compound, ParallelRect, Step } from './_types'
-
-/**
- * From steps find boxes that must be marked as parallel on the layout
- */
-export function findParallelRects(steps: Array<Step>): Array<ParallelRect> {
-  return pipe(
-    steps,
-    groupBy(s => s.parallelPrefix ?? undefined),
-    mapValues((steps, parallelPrefix) => {
-      return steps.reduce(
-        (acc, step) => {
-          acc.min.column = Math.min(acc.min.column, step.from.column, step.to.column)
-          acc.min.row = Math.min(acc.min.row, step.from.row, step.to.row)
-
-          acc.max.column = Math.max(acc.max.column, step.from.column, step.to.column)
-          acc.max.row = Math.max(acc.max.row, step.from.row, step.to.row)
-
-          return acc
-        },
-        {
-          parallelPrefix,
-          min: {
-            column: Infinity,
-            row: Infinity,
-          },
-          max: {
-            column: -Infinity,
-            row: -Infinity,
-          },
-        } as ParallelRect,
-      )
-    }),
-    values(),
-  )
-}
-
-/**
- * Builds a tree of compounds from actors and nodes.
- * @param actors the actors in the sequence view
- * @param nodes the nodes in likec4 diagram
- * @returns an array of compounds where each compound is a node in the sequence view
- * that is an ancestor of one of the actors
- */
-export function buildCompounds(actors: Array<DiagramNode>, nodes: Array<DiagramNode>): Array<Compound> {
-  if (actors.length === 0 || actors.length === nodes.length) {
-    return []
-  }
-  const getNode = (id: string) => nonNullable(nodes.find(n => n.id === id))
-  function parentsLookup(node: DiagramNode): DiagramNode[] {
-    const parent = node.parent ? getNode(node.parent) : null
-    if (parent) {
-      return [parent, ...parentsLookup(parent)]
-    }
-    return []
-  }
-
-  const stack = new Stack<Compound>()
-  const result = [] as Array<Compound>
-
-  actors.forEach(actor => {
-    const _ancestors = parentsLookup(actor)
-    if (_ancestors.length === 0) {
-      stack.clear()
-      return
-    }
-    const ancestors = Stack.from(_ancestors)
-    let compound: DiagramNode | undefined
-    let parent: DiagramNode | undefined
-    while (true) {
-      compound = stack.peek()?.node
-      parent = ancestors.peek()
-      if (!parent || !compound) {
-        break
-      }
-      // Drop ancestors that are ancestors of the current compound
-      if (isAncestor(parent.id, compound.id) || parent.id === compound.id) {
-        ancestors.pop()
-        continue
-      }
-      // Drop compounds that are not ancestors of the current parent
-      if (!isAncestor(compound.id, parent.id)) {
-        stack.pop()
-        continue
-      }
-      break
-    }
-
-    // Add ancestors to the stack
-    while (parent = ancestors.pop()) {
-      const parentAsCompound = {
-        node: parent,
-        from: actor,
-        to: actor,
-        nested: [],
-      }
-      let compound = stack.peek()
-      if (!compound) {
-        result.push(parentAsCompound)
-      } else {
-        compound.nested.push(parentAsCompound)
-      }
-      stack.push(parentAsCompound)
-    }
-    stack.forEach(c => c.to = actor)
-  })
-
-  return result
-}

package/src/likec4model/LikeC4ModelContext.tsx

@@ -1,19 +0,0 @@
-import type { LikeC4Model, LikeC4ViewModel } from '@likec4/core/model'
-import type * as t from '@likec4/core/types'
-import type { DiagramView } from '@likec4/core/types'
-import { type PropsWithChildren, createContext, useContext } from 'react'
-
-type UnknownLayouted = t.aux.UnknownLayouted
-
-export const LikeC4ModelContext = createContext<LikeC4Model<any> | null>(null)
-
-export type CurrentViewModel = LikeC4ViewModel<UnknownLayouted, DiagramView<UnknownLayouted>>
-export const CurrentViewModelContext = createContext<CurrentViewModel | null>(null)
-
-export function EnsureCurrentViewModel({ children }: PropsWithChildren) {
-  const viewmodel = useContext(CurrentViewModelContext)
-  if (!viewmodel) {
-    return null
-  }
-  return <>{children}</>
-}

package/src/likec4model/LikeC4ProjectsContext.ts

@@ -1,9 +0,0 @@
-import type { LikeC4Project, ProjectId } from '@likec4/core/types'
-import { createContext } from 'react'
-
-export type LikeC4ProjectsContext = {
-  projects: ReadonlyArray<LikeC4Project>
-  onProjectChange: (id: ProjectId) => void
-}
-
-export const LikeC4ProjectsContext = createContext<LikeC4ProjectsContext | null>(null)

package/src/likec4model/index.ts

@@ -1,19 +0,0 @@
-export {
-  useCurrentViewModel,
-} from './useCurrentViewModel'
-export {
-  useLikeC4ElementsTree,
-} from './useLikeC4ElementsTree'
-export {
-  useLikeC4Model,
-  useLikeC4Specification,
-  useLikeC4ViewModel,
-} from './useLikeC4Model'
-
-export {
-  useChangeLikeC4Project,
-  useHasProjects,
-  useLikeC4ProjectId,
-  useLikeC4Projects,
-  useLikeC4ProjectsContext,
-} from './useLikeC4Project'

package/src/likec4model/useCurrentViewModel.ts

@@ -1,14 +0,0 @@
-import { useContext } from 'react'
-import { type CurrentViewModel, CurrentViewModelContext } from './LikeC4ModelContext'
-
-export function useOptionalCurrentViewModel(): CurrentViewModel | null {
-  return useContext(CurrentViewModelContext)
-}
-
-export function useCurrentViewModel(): CurrentViewModel {
-  const vm = useContext(CurrentViewModelContext)
-  if (!vm) {
-    throw new Error('No LikeC4ViewModel in context found')
-  }
-  return vm
-}

package/src/likec4model/useLikeC4ElementsTree.ts

@@ -1,39 +0,0 @@
-import type { LikeC4Model } from '@likec4/core/model'
-import type { Fqn, ViewId } from '@likec4/core/types'
-import { compareNatural } from '@likec4/core/utils'
-import { useMemo } from 'react'
-import { useLikeC4Model } from './useLikeC4Model'
-
-interface LikeC4ModelTreeNodeData {
-  label: string
-  value: Fqn
-  children: LikeC4ModelTreeNodeData[]
-}
-
-export const sortByLabel = (a: LikeC4ModelTreeNodeData, b: LikeC4ModelTreeNodeData) => compareNatural(a.label, b.label)
-
-function buildNode(
-  element: LikeC4Model.Node | LikeC4Model.Element,
-): LikeC4ModelTreeNodeData {
-  return {
-    label: element.title,
-    value: element.id,
-    children: [...element.children()].map(buildNode).sort(sortByLabel),
-  }
-}
-
-/**
- * Returns a tree of elements in the model.
- * If `viewId` is provided, returns the tree of elements in the view.
- */
-export function useLikeC4ElementsTree(viewId?: ViewId): LikeC4ModelTreeNodeData[] {
-  const model = useLikeC4Model()
-  return useMemo(() => {
-    if (viewId) {
-      const view = model.view(viewId)
-      return [...view.roots()].map(buildNode).sort(sortByLabel)
-    } else {
-      return [...model.roots()].map(buildNode).sort(sortByLabel)
-    }
-  }, [model, viewId ?? null])
-}

package/src/likec4model/useLikeC4Model.ts

@@ -1,35 +0,0 @@
-import type { LikeC4Model, LikeC4ViewModel } from '@likec4/core/model'
-import type * as t from '@likec4/core/types'
-import { deepEqual } from 'fast-equals'
-import { useContext, useEffect, useState } from 'react'
-import { LikeC4ModelContext } from './LikeC4ModelContext'
-
-type Any = t.aux.Any
-
-export function useLikeC4Model<A extends Any = t.aux.UnknownLayouted>(): LikeC4Model<A> {
-  const model = useContext(LikeC4ModelContext)
-  if (!model) {
-    throw new Error('LikeC4Model not found. Make sure you have LikeC4ModelProvider.')
-  }
-  return model
-}
-
-export function useLikeC4ViewModel<A extends Any = t.aux.UnknownLayouted>(
-  viewId: t.aux.ViewId<A>,
-): LikeC4ViewModel<A> {
-  const model = useLikeC4Model<A>()
-  // const [view, setView] = useState(() => model.findView(viewId))
-  // useEffect(() => {
-  //   setView(model.findView(viewId))
-  // }, [model, viewId])
-  return model.view(viewId)
-}
-
-export function useLikeC4Specification(): t.Specification<t.aux.UnknownLayouted> {
-  const model = useLikeC4Model()
-  const [specification, setSpecification] = useState(model.$data.specification)
-  useEffect(() => {
-    setSpecification(current => deepEqual(current, model.$data.specification) ? current : model.$data.specification)
-  }, [model])
-  return specification
-}

package/src/likec4model/useLikeC4Project.ts

@@ -1,61 +0,0 @@
-import { type LikeC4Project, type ProjectId } from '@likec4/core/types'
-import { useContext } from 'react'
-import { LikeC4ModelContext } from './LikeC4ModelContext'
-import { LikeC4ProjectsContext } from './LikeC4ProjectsContext'
-
-const emptyProjects: ReadonlyArray<LikeC4Project> = []
-/**
- * @returns The list of available projects, or empty array if no projects are available.
- */
-export function useLikeC4Projects(): ReadonlyArray<LikeC4Project> {
-  const ctx = useContext(LikeC4ProjectsContext)
-  if (!ctx) {
-    return emptyProjects
-  }
-  return ctx.projects
-}
-
-const emptyOnProjectChange: (id: ProjectId) => void = () => {}
-/**
- * @returns The callback to change current project.
- */
-export function useChangeLikeC4Project(): (id: ProjectId) => void {
-  const ctx = useContext(LikeC4ProjectsContext)
-  if (!ctx) {
-    return emptyOnProjectChange
-  }
-  return ctx.onProjectChange
-}
-
-const emptyContext: LikeC4ProjectsContext = {
-  projects: emptyProjects,
-  onProjectChange: emptyOnProjectChange,
-}
-/**
- * @returns The callback to change current project.
- */
-export function useLikeC4ProjectsContext(): LikeC4ProjectsContext {
-  return useContext(LikeC4ProjectsContext) ?? emptyContext
-}
-
-/**
- * @returns True if there are more than one project available in the context.
- */
-export function useHasProjects(): boolean {
-  const ctx = useContext(LikeC4ProjectsContext)
-  if (!ctx) {
-    return false
-  }
-  return ctx.projects.length > 1
-}
-
-/**
- * @returns The current project id.
- */
-export function useLikeC4ProjectId(): ProjectId {
-  const ctx = useContext(LikeC4ModelContext)
-  if (!ctx) {
-    throw new Error('No LikeC4ModelContext found')
-  }
-  return ctx.projectId as ProjectId
-}