@likec4/diagram 1.39.4 → 1.40.0

package/src/likec4diagram/types.ts

@@ -1,4 +1,14 @@
-import type { DeploymentFqn, DiagramEdge, DiagramNode, Fqn, IconUrl, RichTextOrEmpty, ViewId } from '@likec4/core/types'
+import type {
+  BBox,
+  DeploymentFqn,
+  DiagramEdge,
+  DiagramNode,
+  ExclusiveUnion,
+  Fqn,
+  IconUrl,
+  RichTextOrEmpty,
+  ViewId,
+} from '@likec4/core/types'
 import type { XYPosition } from '@xyflow/system'
 import type { OptionalKeysOf, Simplify } from 'type-fest'
 import type { Base, ReactFlowEdge, ReactFlowNode } from '../base/types'
@@ -44,14 +54,16 @@ export namespace Types {
   /**
    * Represents element from logical model
    */
-  export type ElementNodeData = LeafNodeData & {
-    modelFqn: Fqn
-    deploymentFqn?: never
-    /**
-     * If set - this node has navigation to another view and diagram has handler for this
-     */
-    navigateTo: ViewId | null
-  }
+  export type ElementNodeData = Simplify<
+    LeafNodeData & {
+      modelFqn: Fqn
+      deploymentFqn?: never
+      /**
+       * If set - this node has navigation to another view and diagram has handler for this
+       */
+      navigateTo: ViewId | null
+    }
+  >
 
   /**
    * Represents element from deployment model
@@ -65,6 +77,32 @@ export namespace Types {
       modelFqn: Fqn | null
     }
 
+  export type SequenceActorNodePort = {
+    id: string
+    cx: number
+    cy: number
+    height: number
+    type: 'target' | 'source'
+    position: 'left' | 'right' | 'top' | 'bottom'
+  }
+  export type SequenceActorNodeData = Simplify<
+    & LeafNodeData
+    & {
+      navigateTo: ViewId | null
+      // If set - this node refers to a model element
+      modelFqn: Fqn | null
+      ports: Array<SequenceActorNodePort>
+      viewHeight: number
+    }
+  >
+
+  export type SequenceParallelAreaData = Simplify<
+    & LeafNodeData
+    & {
+      parallelPrefix: string
+    }
+  >
+
   export type CompoundNodeData =
     & Base.NodeData
     & NonOptional<
@@ -117,13 +155,32 @@ export namespace Types {
 
   export type ElementNode = ReactFlowNode<ElementNodeData, 'element'>
   export type DeploymentElementNode = ReactFlowNode<DeploymentElementNodeData, 'deployment'>
+
+  export type SequenceActorNode = ReactFlowNode<SequenceActorNodeData, 'seq-actor'>
+  export type SequenceParallelArea = ReactFlowNode<SequenceParallelAreaData, 'seq-parallel'>
+
   export type CompoundElementNode = ReactFlowNode<CompoundElementNodeData, 'compound-element'>
   export type CompoundDeploymentNode = ReactFlowNode<CompoundDeploymentNodeData, 'compound-deployment'>
   export type ViewGroupNode = ReactFlowNode<ViewGroupNodeData, 'view-group'>
 
-  export type Node = ElementNode | DeploymentElementNode | CompoundElementNode | CompoundDeploymentNode | ViewGroupNode
+  export type Node =
+    | ElementNode
+    | DeploymentElementNode
+    | CompoundElementNode
+    | CompoundDeploymentNode
+    | ViewGroupNode
+    | SequenceActorNode
+    | SequenceParallelArea
 
-  export type NodeData = Node['data']
+  export type NodeData = ExclusiveUnion<{
+    ElementNodeData: ElementNodeData
+    DeploymentElementNodeData: DeploymentElementNodeData
+    CompoundElementNodeData: CompoundElementNodeData
+    CompoundDeploymentNodeData: CompoundDeploymentNodeData
+    ViewGroupNodeData: ViewGroupNodeData
+    SequenceActorNodeData: SequenceActorNodeData
+    SequenceParallelAreaData: SequenceParallelAreaData
+  }>
 
   export type RelationshipEdgeData = Simplify<
     & Base.EdgeData
@@ -150,8 +207,34 @@ export namespace Types {
     }
   >
 
+  export type SequenceStepEdgeData = Simplify<
+    & Base.EdgeData
+    & NonOptional<
+      Pick<
+        DiagramEdge,
+        | 'id'
+        | 'label'
+        | 'technology'
+        | 'points'
+        | 'dir'
+        | 'color'
+        | 'line'
+        | 'head'
+        | 'tail'
+        | 'navigateTo'
+      >
+    >
+    & {
+      notes: RichTextOrEmpty
+      labelXY: XYPosition | null
+      labelBBox: BBox
+      controlPoints: XYPosition[] | undefined | null
+    }
+  >
+
   export type RelationshipEdge = ReactFlowEdge<RelationshipEdgeData, 'relationship'>
+  export type SequenceStepEdge = ReactFlowEdge<SequenceStepEdgeData, 'seq-step'>
 
-  export type Edge = RelationshipEdge
-  export type EdgeData = RelationshipEdgeData
+  export type Edge = RelationshipEdge | SequenceStepEdge
+  export type EdgeData = RelationshipEdgeData | SequenceStepEdgeData
 }

package/src/likec4diagram/{useViewToNodesEdges.ts → xyflow-diagram/diagram-view.ts}

@@ -1,4 +1,5 @@
 import {
+  type BBox,
   type DiagramEdge,
   type DiagramNode,
   type DiagramView,
@@ -13,18 +14,16 @@ import {
   RichText,
   whereOperatorAsPredicate,
 } from '@likec4/core'
-import { useCustomCompareMemo } from '@react-hookz/web'
-import { deepEqual, shallowEqual } from 'fast-equals'
 import { hasAtLeast, pick } from 'remeda'
-import { ZIndexes } from '../base/const'
-import type { Types } from './types'
+import { ZIndexes } from '../../base/const'
+import type { Types } from '../types'
 
-// const nodeZIndex = (node: DiagramNode) => node.level - (node.children.length > 0 ? 1 : 0)
-function viewToNodesEdge(opts: {
-  view: Pick<DiagramView, 'id' | 'nodes' | 'edges' | '_type'>
+export function diagramToXY(opts: {
+  view: Pick<DiagramView, 'id' | 'nodes' | 'edges' | 'bounds' | '_type'>
   where: WhereOperator | null
   nodesSelectable: boolean
 }): {
+  bounds: BBox
   xynodes: Types.Node[]
   xyedges: Types.Edge[]
 } {
@@ -269,28 +268,8 @@ function viewToNodesEdge(opts: {
   }
 
   return {
+    bounds: view.bounds,
     xynodes,
     xyedges,
   }
 }
-type ViewToNodesEdgeInput = {
-  view: DiagramView
-  where: WhereOperator | null
-  nodesSelectable: boolean
-}
-const viewToNodesEdgeEqual = (a: ViewToNodesEdgeInput, b: ViewToNodesEdgeInput) => (
-  a.view.id === b.view.id
-  && a.view._type === b.view._type
-  && a.nodesSelectable === b.nodesSelectable
-  && shallowEqual(a.view.nodes, b.view.nodes)
-  && shallowEqual(a.view.edges, b.view.edges)
-  && deepEqual(a.where, b.where)
-)
-
-export function useViewToNodesEdges(params: ViewToNodesEdgeInput) {
-  return useCustomCompareMemo(
-    () => viewToNodesEdge(params),
-    [params],
-    ([a], [b]) => !!a && !!b && viewToNodesEdgeEqual(a, b),
-  )
-}

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

@@ -0,0 +1,45 @@
+import type { DiagramEdge, DiagramNode, EdgeId } from '@likec4/core/types'
+
+export type Step = {
+  id: EdgeId
+  from: {
+    column: number
+    row: number
+  }
+  to: {
+    column: number
+    row: number
+  }
+  source: DiagramNode
+  target: DiagramNode
+  label: null | {
+    height: number
+    width: number
+    text: string | null
+  }
+  isSelfLoop: boolean
+  isBack: boolean
+  parallelPrefix: string | null
+  offset: number // offset for continuing edges
+  edge: DiagramEdge
+}
+
+export type Compound = {
+  node: DiagramNode
+  from: DiagramNode
+  to: DiagramNode
+
+  nested: Compound[]
+}
+
+export type ParallelRect = {
+  parallelPrefix: string
+  min: {
+    column: number
+    row: number
+  }
+  max: {
+    column: number
+    row: number
+  }
+}

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

@@ -0,0 +1,37 @@
+import type { ThemeColor } from '@likec4/core/types'
+
+// minimum space between actors
+export const ACTOR_GAP = 60
+
+// minimum space between columns
+export const COLUMN_GAP = 32
+
+// minimum height of a step row
+export const MIN_ROW_HEIGHT = 80
+
+// height of ports, edges connected to center of ports
+export const PORT_HEIGHT = 32
+
+// margin from step label to step box
+export const STEP_LABEL_MARGIN = 50
+
+// offset from actor box
+export const FIRST_STEP_OFFSET = 30
+
+// offset for continuing steps
+// A -> B,
+//      C -> D (sequential)
+// A -> B -> C (continuous)
+export const CONTINUOUS_OFFSET = 22
+
+export const SeqZIndex = {
+  compound: 0,
+  parallel: 1,
+  actor: 10,
+  step: 20,
+}
+
+export const SeqParallelAreaColor = {
+  default: 'gray',
+  active: 'amber',
+} satisfies Record<string, ThemeColor>