@likec4/diagram 1.39.5 → 1.41.0

package/src/likec4diagram/custom/nodes/index.ts

@@ -9,6 +9,7 @@ export {
   ElementNode,
   ViewGroupNode,
 } from './nodes'
+export { SequenceActorNode, SequenceParallelArea } from './SequenceActorNode'
 
 export * from './CompoundActions'
 export * from './ElementActions'

package/src/likec4diagram/custom/nodes/nodes.tsx

@@ -20,7 +20,7 @@ import { DeploymentElementActions, ElementActions } from './ElementActions'
 import { CompoundDeploymentToolbar, CompoundElementToolbar } from './toolbar/CompoundToolbar'
 import { DeploymentElementToolbar, ElementToolbar } from './toolbar/ElementToolbar'
 
-type CustomNodes = Required<CustomNodesType>
+export type CustomNodes = Required<CustomNodesType>
 
 export function ElementDetailsButtonWithHandler(
   props: NodeProps<Types.ElementNodeData | Types.DeploymentElementNodeData>,

package/src/likec4diagram/relationship-popover/RelationshipPopover.tsx

@@ -29,7 +29,7 @@ import {
   useRef,
   useState,
 } from 'react'
-import { clamp, filter, isTruthy, map, partition, pipe } from 'remeda'
+import { clamp, filter, isEmpty, isTruthy, map, partition, pipe } from 'remeda'
 import { Link } from '../../components/Link'
 import { useDiagramEventHandlers } from '../../context/DiagramEventHandlers'
 import { useEnabledFeatures } from '../../context/DiagramFeatures'
@@ -61,6 +61,7 @@ function selectDiagramContext(c: DiagramContext) {
 }
 
 export const RelationshipPopover = memo(() => {
+  const likec4model = useLikeC4Model()
   const actorRef = useActorRef(RelationshipPopoverActorLogic)
   const diagram = useDiagram()
   const { viewId, selected } = useDiagramContext(selectDiagramContext)
@@ -132,13 +133,42 @@ export const RelationshipPopover = memo(() => {
     [openedEdgeId],
   )
 
-  if (!diagramEdge || !sourceNode || !targetNode) {
+  if (!diagramEdge || !sourceNode || !targetNode || isEmpty(diagramEdge.relations)) {
+    return null
+  }
+
+  const [direct, nested] = pipe(
+    diagramEdge.relations,
+    map(id => {
+      try {
+        return likec4model.relationship(id)
+      } catch (e) {
+        // View was cached, but likec4model based on new data
+        console.error(
+          `View is cached and likec4model missing relationship ${id} from ${sourceNode.id} -> ${targetNode.id}`,
+          e,
+        )
+        return null
+      }
+    }),
+    filter(isTruthy),
+    partition(r => r.source.id === sourceNode.id && r.target.id === targetNode.id),
+  )
+
+  if (direct.length === 0 && nested.length === 0) {
+    console.warn('No relationships found  diagram edge', {
+      diagramEdge,
+      sourceNode,
+      targetNode,
+    })
     return null
   }
 
   return (
     <RelationshipPopoverInternal
       viewId={viewId}
+      direct={direct}
+      nested={nested}
       diagramEdge={diagramEdge}
       sourceNode={sourceNode}
       targetNode={targetNode}
@@ -153,6 +183,8 @@ const getEdgeLabelElement = (edgeId: string, container: HTMLDivElement | undefin
 
 type RelationshipPopoverInternalProps = {
   viewId: ViewId
+  direct: LikeC4Model.AnyRelation[]
+  nested: LikeC4Model.AnyRelation[]
   diagramEdge: DiagramEdge
   sourceNode: DiagramNode
   targetNode: DiagramNode
@@ -163,6 +195,8 @@ const POPOVER_PADDING = 8
 const RelationshipPopoverInternal = ({
   viewId,
   diagramEdge,
+  direct,
+  nested,
   sourceNode,
   targetNode,
   onMouseEnter,
@@ -240,36 +274,8 @@ const RelationshipPopoverInternal = ({
     }
   }, [referenceEl])
 
-  const likec4model = useLikeC4Model()
   const diagram = useDiagram()
 
-  const [direct, nested] = pipe(
-    diagramEdge.relations,
-    map(id => {
-      try {
-        return likec4model.relationship(id)
-      } catch (e) {
-        // View was cached, but likec4model based on new data
-        console.error(
-          `View is cached and likec4model missing relationship ${id} from ${sourceNode.id} -> ${targetNode.id}`,
-          e,
-        )
-        return null
-      }
-    }),
-    filter(isTruthy),
-    partition(r => r.source.id === sourceNode.id && r.target.id === targetNode.id),
-  )
-
-  if (direct.length === 0 && nested.length === 0) {
-    console.error('No relationships found  diagram edge', {
-      diagramEdge,
-      sourceNode,
-      targetNode,
-    })
-    return null
-  }
-
   const navigateTo = enableNavigateTo
     ? (viewId: ViewId) => {
       diagram.navigateTo(viewId)

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>