@likec4/diagram 1.39.5 → 1.40.0

package/dist/likec4diagram/custom/index.js

@@ -1,4 +1,7 @@
 import { RelationshipEdge } from './edges/RelationshipEdge.js';
+import { SequenceStepEdge } from './edges/SequenceStepEdge.js';
+import { SequenceActorNode } from './nodes/SequenceActorNode.js';
+export { SequenceParallelArea } from './nodes/SequenceActorNode.js';
 import { ViewGroupNode, CompoundDeploymentNode, CompoundElementNode, DeploymentNode, ElementNode } from './nodes/nodes.js';
 
 const BuiltinNodes = {
@@ -6,10 +9,12 @@ const BuiltinNodes = {
   deployment: DeploymentNode,
   compoundElement: CompoundElementNode,
   compoundDeployment: CompoundDeploymentNode,
-  viewGroup: ViewGroupNode
+  viewGroup: ViewGroupNode,
+  sequenceActor: SequenceActorNode
 };
 const edgeTypes = {
-  relationship: RelationshipEdge
+  relationship: RelationshipEdge,
+  "seq-step": SequenceStepEdge
 };
 
 export { BuiltinNodes, edgeTypes };

package/dist/likec4diagram/custom/nodes/ElementActions.d.ts

@@ -1,6 +1,7 @@
 import { ElementActionButtons } from '../../../base/primitives';
 import { NodeProps } from '../../../base/types';
 import { Types } from '../../types';
+type RequiredData = Pick<Types.ElementNodeData, 'modelFqn' | 'navigateTo'>;
 type WithExtraButtons = {
     /**
      * Add extra action buttons
@@ -23,7 +24,7 @@ type WithExtraButtons = {
      */
     extraButtons?: ElementActionButtons.Item[];
 };
-export type ElementActionsProps = NodeProps<Types.ElementNodeData> & WithExtraButtons;
+export type ElementActionsProps = NodeProps<RequiredData> & WithExtraButtons;
 export declare const ElementActions: ({ extraButtons, ...props }: ElementActionsProps) => import("react/jsx-runtime").JSX.Element;
 export type DeploymentElementActionsProps = NodeProps<Types.DeploymentElementNodeData> & WithExtraButtons;
 export declare const DeploymentElementActions: ({ extraButtons, ...props }: DeploymentElementActionsProps) => import("react/jsx-runtime").JSX.Element;

package/dist/likec4diagram/custom/nodes/SequenceActorNode.d.ts

@@ -0,0 +1,4 @@
+import { NodeProps } from '@xyflow/react';
+import { Types } from '../../types';
+export declare function SequenceActorNode(props: NodeProps<Types.SequenceActorNode>): import("react/jsx-runtime").JSX.Element;
+export declare function SequenceParallelArea(props: NodeProps<Types.SequenceActorNode>): import("react/jsx-runtime").JSX.Element;

package/dist/likec4diagram/custom/nodes/SequenceActorNode.js

@@ -0,0 +1,157 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { defaultTheme } from '@likec4/core';
+import { css } from '@likec4/styles/css';
+import { Box } from '@likec4/styles/jsx';
+import { Handle } from '@xyflow/react';
+import { Position } from '@xyflow/system';
+import { ElementActions } from './ElementActions.js';
+import { ElementDetailsButtonWithHandler } from './nodes.js';
+import { ElementNodeContainer } from '../../../base/primitives/element/ElementNodeContainer.js';
+import { ElementShape } from '../../../base/primitives/element/ElementShape.js';
+import { ElementTitle } from '../../../base/primitives/element/ElementTitle.js';
+
+const positionMap = {
+  left: Position.Left,
+  right: Position.Right,
+  top: Position.Top,
+  bottom: Position.Bottom
+};
+const ActorStepPort = ({
+  data,
+  port: p
+}) => {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        "data-likec4-color": data.color,
+        className: css({
+          position: "absolute",
+          backgroundColor: "var(--likec4-palette-fill)",
+          rounded: "xs",
+          width: {
+            base: "5px",
+            _whenHovered: "7px",
+            _whenSelected: "7px"
+          },
+          // pointerEvents: 'none',
+          transition: "fast",
+          translateX: "-1/2",
+          translateY: "-1/2",
+          translate: "auto"
+          // transform: 'translate',
+        }),
+        style: {
+          top: p.cy,
+          left: p.cx,
+          height: p.height
+          // transform: p.type === 'source' ? 'translate(-50%, -16px)' : 'translate(-50%, -50%)',
+          // transform: 'translate(-50%, -50%)',
+          // zIndex: p.type === 'source' ? 1 : 0,
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Handle,
+      {
+        id: p.id,
+        type: p.type,
+        position: positionMap[p.position],
+        style: {
+          top: p.cy - 3,
+          left: p.cx - 3,
+          width: 6,
+          height: 6,
+          right: "unset",
+          bottom: "unset",
+          visibility: "hidden",
+          transform: p.position === "left" ? "translate(-150%, 0)" : "translate(100%, 0)"
+        }
+      }
+    )
+  ] });
+};
+function SequenceActorNode(props) {
+  const data = props.data;
+  const {
+    positionAbsoluteY,
+    data: {
+      viewHeight,
+      hovered: isHovered = false,
+      ports
+    }
+  } = props;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        className: css({
+          position: "absolute",
+          rounded: "xs",
+          top: "1",
+          pointerEvents: "none",
+          transition: "fast",
+          translateX: "-1/2",
+          translate: "auto"
+          // transform: 'translate',
+        }),
+        style: {
+          // position: 'absolute',
+          backgroundColor: defaultTheme.elements.gray.fill,
+          opacity: isHovered ? 0.5 : 0.4,
+          left: "50%",
+          width: isHovered ? 3 : 2,
+          height: viewHeight - positionAbsoluteY,
+          zIndex: -1,
+          pointerEvents: "none"
+          // top: p.y,
+          // left: p.width / 2,
+          // height: p.type === 'source' ? 48 : 32,
+          // transform: p.type === 'source' ? 'translate(-50%, -16px)' : 'translate(-50%, -50%)',
+          // transform: 'translate(-50%, -50%)',
+          // zIndex: p.type === 'source' ? 1 : 0,
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxs(ElementNodeContainer, { nodeProps: props, children: [
+      /* @__PURE__ */ jsx(ElementShape, { ...props }),
+      /* @__PURE__ */ jsx(ElementTitle, { ...props }),
+      data.modelFqn && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(ElementActions, { ...props, data }),
+        /* @__PURE__ */ jsx(ElementDetailsButtonWithHandler, { ...props, data })
+      ] })
+    ] }),
+    ports.map((p) => /* @__PURE__ */ jsx(ActorStepPort, { port: p, data: props.data }, p.id))
+  ] });
+}
+function SequenceParallelArea(props) {
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      "data-likec4-color": props.data.color,
+      css: {
+        width: "100%",
+        height: "100%",
+        border: "default",
+        rounded: "sm",
+        borderWidth: 1,
+        "--_color": {
+          base: "var(--likec4-palette-stroke)",
+          _dark: "[color-mix(in srgb, var(--likec4-palette-hiContrast) 40%, var(--likec4-palette-fill))]"
+        },
+        borderColor: "[var(--_color)/30]",
+        backgroundColor: "var(--likec4-palette-fill)/15",
+        pointerEvents: "none",
+        paddingLeft: "2",
+        paddingTop: "0.5",
+        fontSize: "xs",
+        fontWeight: "bold",
+        letterSpacing: ".75px",
+        color: "[var(--_color)/75]"
+      },
+      children: "PARALLEL"
+    }
+  );
+}
+
+export { SequenceActorNode, SequenceParallelArea };

package/dist/likec4diagram/custom/nodes/index.d.ts

@@ -1,6 +1,7 @@
 export { CompoundActions } from './CompoundActions';
 export { DeploymentElementActions, ElementActions } from './ElementActions';
 export { CompoundDeploymentNode, CompoundDetailsButtonWithHandler, CompoundElementNode, DeploymentNode, ElementDetailsButtonWithHandler, ElementNode, ViewGroupNode, } from './nodes';
+export { SequenceActorNode, SequenceParallelArea } from './SequenceActorNode';
 export * from './CompoundActions';
 export * from './ElementActions';
 export * from './toolbar/CompoundToolbar';

package/dist/likec4diagram/custom/nodes/nodes.d.ts

@@ -1,7 +1,7 @@
 import { NodeProps } from '../../../base';
 import { CustomNodes as CustomNodesType } from '../../../custom/customNodes';
 import { Types } from '../../types';
-type CustomNodes = Required<CustomNodesType>;
+export type CustomNodes = Required<CustomNodesType>;
 export declare function ElementDetailsButtonWithHandler(props: NodeProps<Types.ElementNodeData | Types.DeploymentElementNodeData>): import("react/jsx-runtime").JSX.Element | null;
 export declare function CompoundDetailsButtonWithHandler(props: NodeProps<Types.CompoundElementNodeData | Types.CompoundDeploymentNodeData>): import("react/jsx-runtime").JSX.Element | null;
 export declare const ElementNode: CustomNodes['element'];
@@ -9,4 +9,3 @@ export declare const DeploymentNode: CustomNodes['deployment'];
 export declare const CompoundElementNode: CustomNodes['compoundElement'];
 export declare const CompoundDeploymentNode: CustomNodes['compoundDeployment'];
 export declare const ViewGroupNode: CustomNodes['viewGroup'];
-export {};

package/dist/likec4diagram/relationship-popover/RelationshipPopover.js

@@ -8,7 +8,7 @@ import { Portal, ScrollAreaAutosize, Button, Divider, TooltipGroup, Tooltip as T
 import { useActorRef, useSelector } from '@xstate/react';
 import { shallowEqual } from 'fast-equals';
 import { memo, useEffect, useCallback, useRef, useState, Fragment as Fragment$1, forwardRef } from 'react';
-import { pipe, map, filter, isTruthy, partition, clamp } from 'remeda';
+import { isEmpty, pipe, map, filter, isTruthy, partition, clamp } from 'remeda';
 import { Link } from '../../components/Link.js';
 import { useDiagramEventHandlers } from '../../context/DiagramEventHandlers.js';
 import { useEnabledFeatures } from '../../context/DiagramFeatures.js';
@@ -41,6 +41,7 @@ function selectDiagramContext(c) {
   };
 }
 const RelationshipPopover = memo(() => {
+  const likec4model = useLikeC4Model();
   const actorRef = useActorRef(RelationshipPopoverActorLogic);
   const diagram = useDiagram();
   const { viewId, selected } = useDiagramContext(selectDiagramContext);
@@ -101,13 +102,39 @@ const RelationshipPopover = memo(() => {
     shallowEqual,
     [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) {
+        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 /* @__PURE__ */ jsx(
     RelationshipPopoverInternal,
     {
       viewId,
+      direct,
+      nested,
       diagramEdge,
       sourceNode,
       targetNode,
@@ -123,6 +150,8 @@ const POPOVER_PADDING = 8;
 const RelationshipPopoverInternal = ({
   viewId,
   diagramEdge,
+  direct,
+  nested,
   sourceNode,
   targetNode,
   onMouseEnter,
@@ -194,32 +223,7 @@ const RelationshipPopoverInternal = ({
       cleanup();
     };
   }, [referenceEl]);
-  const likec4model = useLikeC4Model();
   const diagram = useDiagram();
-  const [direct, nested] = pipe(
-    diagramEdge.relations,
-    map((id) => {
-      try {
-        return likec4model.relationship(id);
-      } catch (e) {
-        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 ? (viewId2) => {
     diagram.navigateTo(viewId2);
   } : void 0;

package/dist/likec4diagram/types.d.ts

@@ -1,4 +1,4 @@
-import { DeploymentFqn, DiagramEdge, DiagramNode, Fqn, IconUrl, RichTextOrEmpty, ViewId } from '@likec4/core/types';
+import { BBox, DeploymentFqn, DiagramEdge, DiagramNode, ExclusiveUnion, Fqn, IconUrl, RichTextOrEmpty, ViewId } from '@likec4/core/types';
 import { XYPosition } from '@xyflow/system';
 import { OptionalKeysOf, Simplify } from 'type-fest';
 import { Base, ReactFlowEdge, ReactFlowNode } from '../base/types';
@@ -20,14 +20,14 @@ export declare namespace Types {
     /**
      * Represents element from logical model
      */
-    type ElementNodeData = LeafNodeData & {
+    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
      */
@@ -36,6 +36,23 @@ export declare namespace Types {
         deploymentFqn: DeploymentFqn;
         modelFqn: Fqn | null;
     };
+    type SequenceActorNodePort = {
+        id: string;
+        cx: number;
+        cy: number;
+        height: number;
+        type: 'target' | 'source';
+        position: 'left' | 'right' | 'top' | 'bottom';
+    };
+    type SequenceActorNodeData = Simplify<LeafNodeData & {
+        navigateTo: ViewId | null;
+        modelFqn: Fqn | null;
+        ports: Array<SequenceActorNodePort>;
+        viewHeight: number;
+    }>;
+    type SequenceParallelAreaData = Simplify<LeafNodeData & {
+        parallelPrefix: string;
+    }>;
     type CompoundNodeData = Base.NodeData & NonOptional<Pick<DiagramNode, 'id' | 'title' | 'color' | 'shape' | 'style' | 'tags' | 'position'>> & {
         /**
          * View this node belongs to
@@ -68,18 +85,35 @@ export declare namespace Types {
     };
     type ElementNode = ReactFlowNode<ElementNodeData, 'element'>;
     type DeploymentElementNode = ReactFlowNode<DeploymentElementNodeData, 'deployment'>;
+    type SequenceActorNode = ReactFlowNode<SequenceActorNodeData, 'seq-actor'>;
+    type SequenceParallelArea = ReactFlowNode<SequenceParallelAreaData, 'seq-parallel'>;
     type CompoundElementNode = ReactFlowNode<CompoundElementNodeData, 'compound-element'>;
     type CompoundDeploymentNode = ReactFlowNode<CompoundDeploymentNodeData, 'compound-deployment'>;
     type ViewGroupNode = ReactFlowNode<ViewGroupNodeData, 'view-group'>;
-    type Node = ElementNode | DeploymentElementNode | CompoundElementNode | CompoundDeploymentNode | ViewGroupNode;
-    type NodeData = Node['data'];
+    type Node = ElementNode | DeploymentElementNode | CompoundElementNode | CompoundDeploymentNode | ViewGroupNode | SequenceActorNode | SequenceParallelArea;
+    type NodeData = ExclusiveUnion<{
+        ElementNodeData: ElementNodeData;
+        DeploymentElementNodeData: DeploymentElementNodeData;
+        CompoundElementNodeData: CompoundElementNodeData;
+        CompoundDeploymentNodeData: CompoundDeploymentNodeData;
+        ViewGroupNodeData: ViewGroupNodeData;
+        SequenceActorNodeData: SequenceActorNodeData;
+        SequenceParallelAreaData: SequenceParallelAreaData;
+    }>;
     type RelationshipEdgeData = Simplify<Base.EdgeData & NonOptional<Pick<DiagramEdge, 'id' | 'label' | 'labelBBox' | 'technology' | 'points' | 'dir' | 'color' | 'line' | 'head' | 'tail' | 'navigateTo'>> & {
         notes: RichTextOrEmpty;
         labelXY: XYPosition | null;
         controlPoints: XYPosition[] | undefined | null;
     }>;
+    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;
+    }>;
     type RelationshipEdge = ReactFlowEdge<RelationshipEdgeData, 'relationship'>;
-    type Edge = RelationshipEdge;
-    type EdgeData = RelationshipEdgeData;
+    type SequenceStepEdge = ReactFlowEdge<SequenceStepEdgeData, 'seq-step'>;
+    type Edge = RelationshipEdge | SequenceStepEdge;
+    type EdgeData = RelationshipEdgeData | SequenceStepEdgeData;
 }
 export {};

package/dist/likec4diagram/xyflow-diagram/diagram-view.d.ts

@@ -0,0 +1,11 @@
+import { BBox, DiagramView, WhereOperator } from '@likec4/core';
+import { Types } from '../types';
+export declare function diagramToXY(opts: {
+    view: Pick<DiagramView, 'id' | 'nodes' | 'edges' | 'bounds' | '_type'>;
+    where: WhereOperator | null;
+    nodesSelectable: boolean;
+}): {
+    bounds: BBox;
+    xynodes: Types.Node[];
+    xyedges: Types.Edge[];
+};

package/dist/likec4diagram/{useViewToNodesEdges.js → xyflow-diagram/diagram-view.js}

@@ -1,10 +1,8 @@
 import { Queue, whereOperatorAsPredicate, nonNullable, GroupElementKind, RichText, invariant } from '@likec4/core';
-import { useCustomCompareMemo } from '@react-hookz/web';
-import { shallowEqual, deepEqual } from 'fast-equals';
 import { pick, hasAtLeast } from 'remeda';
-import { ZIndexes } from '../base/const.js';
+import { ZIndexes } from '../../base/const.js';
 
-function viewToNodesEdge(opts) {
+function diagramToXY(opts) {
   const {
     view,
     nodesSelectable: selectable
@@ -220,17 +218,10 @@ function viewToNodesEdge(opts) {
     });
   }
   return {
+    bounds: view.bounds,
     xynodes,
     xyedges
   };
 }
-const viewToNodesEdgeEqual = (a, b) => 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);
-function useViewToNodesEdges(params) {
-  return useCustomCompareMemo(
-    () => viewToNodesEdge(params),
-    [params],
-    ([a], [b]) => !!a && !!b && viewToNodesEdgeEqual(a, b)
-  );
-}
 
-export { useViewToNodesEdges };
+export { diagramToXY };

package/dist/likec4diagram/xyflow-sequence/_types.d.ts

@@ -0,0 +1,41 @@
+import { 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;
+    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/dist/likec4diagram/xyflow-sequence/const.d.ts

@@ -0,0 +1,17 @@
+export declare const ACTOR_GAP = 60;
+export declare const COLUMN_GAP = 32;
+export declare const MIN_ROW_HEIGHT = 80;
+export declare const PORT_HEIGHT = 32;
+export declare const STEP_LABEL_MARGIN = 50;
+export declare const FIRST_STEP_OFFSET = 30;
+export declare const CONTINUOUS_OFFSET = 22;
+export declare const SeqZIndex: {
+    compound: number;
+    parallel: number;
+    actor: number;
+    step: number;
+};
+export declare const SeqParallelAreaColor: {
+    default: "gray";
+    active: "amber";
+};

package/dist/likec4diagram/xyflow-sequence/const.js

@@ -0,0 +1,16 @@
+const ACTOR_GAP = 60;
+const COLUMN_GAP = 32;
+const MIN_ROW_HEIGHT = 80;
+const PORT_HEIGHT = 32;
+const STEP_LABEL_MARGIN = 50;
+const FIRST_STEP_OFFSET = 30;
+const CONTINUOUS_OFFSET = 22;
+const SeqZIndex = {
+  parallel: 1,
+  actor: 10};
+const SeqParallelAreaColor = {
+  default: "gray",
+  active: "amber"
+};
+
+export { ACTOR_GAP, COLUMN_GAP, CONTINUOUS_OFFSET, FIRST_STEP_OFFSET, MIN_ROW_HEIGHT, PORT_HEIGHT, STEP_LABEL_MARGIN, SeqParallelAreaColor, SeqZIndex };

package/dist/likec4diagram/xyflow-sequence/layouter.d.ts

@@ -0,0 +1,46 @@
+import { BBox, DiagramNode, NonEmptyArray } from '@likec4/core/types';
+import { Compound, Step } from './_types';
+export declare class SequenceViewLayouter {
+    #private;
+    constructor({ actors, steps, compounds, }: {
+        actors: NonEmptyArray<DiagramNode>;
+        steps: Array<Step>;
+        compounds: Array<Compound>;
+    });
+    getParallelBoxes(): Array<BBox & {
+        parallelPrefix: string;
+    }>;
+    getActorBox(actor: DiagramNode): BBox;
+    getCompoundBoxes(): Array<BBox & {
+        node: DiagramNode;
+        depth: number;
+    }>;
+    getPortCenter(step: Step, type: 'source' | 'target'): {
+        cx: number;
+        cy: number;
+        height: number;
+    };
+    getViewBounds(): {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+    private actorBox;
+    private addActors;
+    private addStep;
+    private addParallelRect;
+    private addCompound;
+    private ensureRow;
+    private newVar;
+    /**
+     * Adds a required constraint:
+     * Also adds a weak constraint == if the operator is <= or >=
+     */
+    private require;
+    /**
+     * Adds a constraint with medium strength by default
+     */
+    private constraint;
+    private put;
+}