@tumaet/apollon 4.8.0 → 4.9.0

package/dist/react/store/context.d.ts

@@ -5,15 +5,18 @@ import { PopoverStore } from './popoverStore';
 import { AssessmentSelectionStore } from './assessmentSelectionStore';
 import { AlignmentGuidesStore } from './alignmentGuidesStore';
 import { EdgeGeometryStore } from './edgeGeometryStore';
+import { OverlayStore } from '../overlay/overlayStore';
 export declare const DiagramStoreContext: import('react').Context<StoreApi<DiagramStore> | null>;
 export declare const MetadataStoreContext: import('react').Context<StoreApi<MetadataStore> | null>;
 export declare const PopoverStoreContext: import('react').Context<StoreApi<PopoverStore> | null>;
 export declare const AssessmentSelectionStoreContext: import('react').Context<StoreApi<AssessmentSelectionStore> | null>;
 export declare const AlignmentGuidesStoreContext: import('react').Context<StoreApi<AlignmentGuidesStore> | null>;
 export declare const EdgeGeometryStoreContext: import('react').Context<StoreApi<EdgeGeometryStore> | null>;
+export declare const OverlayStoreContext: import('react').Context<StoreApi<OverlayStore> | null>;
 export declare const useDiagramStore: <T>(selector: (state: DiagramStore) => T) => T;
 export declare const useMetadataStore: <T>(selector: (state: MetadataStore) => T) => T;
 export declare const usePopoverStore: <T>(selector: (state: PopoverStore) => T) => T;
 export declare const useAssessmentSelectionStore: <T>(selector: (state: AssessmentSelectionStore) => T) => T;
 export declare const useAlignmentGuidesStore: <T>(selector: (state: AlignmentGuidesStore) => T) => T;
 export declare const useEdgeGeometryStore: <T>(selector: (state: EdgeGeometryStore) => T) => T;
+export declare const useOverlayStore: <T>(selector: (state: OverlayStore) => T) => T;

package/dist/react/types/nodes/NodeProps.d.ts

@@ -8,6 +8,30 @@ export type DefaultNodeProps = {
 export type ClassNodeElement = {
     id: string;
 } & DefaultNodeProps;
+/** A single partition (lane) inside an activity swimlane. */
+export type SwimlaneLane = {
+    id: string;
+    name: string;
+    /**
+     * Lane's extent along the swimlane's primary axis, in absolute flow px. The
+     * last lane is elastic (fills the remainder), so resizing the swimlane only
+     * changes the last lane. Optional: lanes without it divide the space equally,
+     * so existing saved swimlanes render as equal lanes until a separator moves.
+     */
+    size?: number;
+};
+/**
+ * Activity-partition (swimlane) container. Lanes are equal divisions along the
+ * primary axis (columns when vertical, rows when horizontal). Elements dropped
+ * into the swimlane become its children and move with it; which lane an element
+ * belongs to is expressed by where the modeller places it, matching the UML
+ * activity-partition notation where partition membership is positional rather
+ * than stored per element.
+ */
+export type ActivitySwimlaneProps = DefaultNodeProps & {
+    orientation: "vertical" | "horizontal";
+    lanes: SwimlaneLane[];
+};
 export type ClassNodeProps = {
     methods: ClassNodeElement[];
     attributes: ClassNodeElement[];

package/dist/react/utils/geometry/edgeLabelLayout.d.ts

@@ -0,0 +1,123 @@
+import { IPoint } from '../../edges/Connection';
+/**
+ * Pure geometry for edge-label placement, in flow space. No React, no DOM —
+ * every output is derived synchronously from the edge's polyline so it is
+ * identical interactively and in headless (resvg) export, and unit-testable on
+ * its own (mirrors edges/labelTypes/messageLayout.ts, the #645 gold standard).
+ *
+ * The model follows the cross-tool consensus (yEd / ELK CENTER / mxGraph /
+ * JointJS): keep the text horizontal and offset it by a constant gap onto a
+ * perpendicular side. The label is hosted on whichever ARM of the (possibly
+ * stepped) edge has room — scored against the edge's own arms, nodes, and
+ * neighbour edges — defaulting to centered-on-top of the arc-mid segment when
+ * that is already clear. Deterministic scoring, not a continuous optimizer.
+ */
+export interface Rect {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export interface MidSegment {
+    /** Rounded midpoint of the chosen mid-segment (flow space). */
+    point: IPoint;
+    /** Orientation of the chosen mid-segment. */
+    isHorizontal: boolean;
+    /** Index of the chosen segment in the collapsed polyline. */
+    segmentIndex: number;
+    /** The chosen segment's endpoints in source->target order. Useful to derive
+     * the LOCAL flow direction at the middle (e.g. communication arrows) instead
+     * of the raw node anchors, which can disagree on a bent edge. */
+    start: IPoint;
+    end: IPoint;
+}
+export type LabelSide = "above" | "below" | "left" | "right";
+export interface PlacedLabel {
+    x: number;
+    y: number;
+    textAnchor: "start" | "middle" | "end";
+    dominantBaseline: "auto" | "middle" | "hanging";
+    /** Exposed for unit assertions; not needed for rendering. */
+    side: LabelSide;
+}
+/**
+ * The mid-SEGMENT midpoint and orientation, computed purely from the polyline.
+ *
+ * Walks the collapsed polyline accumulating Manhattan segment length (exact
+ * because EDGES.STEP_BORDER_RADIUS === 0, so getSmoothStepPath emits no corner
+ * arcs and the rendered path equals the polyline). The "middle" is the first
+ * segment whose cumulative length reaches half the total; the midpoint is lerped
+ * strictly INSIDE that one segment, so it is corner-safe — unlike sampling the
+ * rendered path with getPointAtLength(total/2), which can land on a bend or, if
+ * line-jump bridges are present, on a bridge arc off the straight line.
+ */
+export declare function getMidSegment(renderPoints: IPoint[], fallbackSource: IPoint, fallbackTarget: IPoint): MidSegment;
+/**
+ * Rough single-line text width (flow px). Deterministic — a pure character-count
+ * estimate, never canvas measurement — so the chosen placement is identical
+ * interactively and in headless export, and SSR-safe. Slightly generous so the
+ * scoring box errs toward MORE clearance.
+ */
+export declare function estimateLabelWidth(text: string, fontSize: number): number;
+/**
+ * The text box (flow space) for a label anchored at `point` on the chosen side,
+ * sized to the actual label (`w` × `h`). Used to score overlap against the
+ * edge's own arms, neighbour edges, and nodes.
+ */
+export declare function candidateBox(point: IPoint, side: LabelSide, w: number, h: number): Rect;
+/**
+ * The other edges' polylines whose bounding box comes within `radius` of
+ * `center`, excluding `selfId`. Bounds the neighbour scan to edges actually near
+ * the label so placement stays O(nearby), not O(all edges) per label.
+ */
+export declare function collectNeighborPolylines(geometryById: Record<string, IPoint[]>, selfId: string, center: IPoint, radius: number): IPoint[][];
+export interface MiddleLabelInput {
+    /** The edge's full rendered polyline (source → target). */
+    renderPoints: IPoint[];
+    /** The label text — used for a width fallback when measuredWidth is absent. */
+    labelText: string;
+    /** Render font size (px) of the label. */
+    fontSize: number;
+    /** Real measured label width (px), from the rendering context. Preferred over
+     * the character-count estimate so the scored box equals the rendered ink. */
+    measuredWidth?: number;
+    /** Node rects to avoid — NOT only source/target: every node the edge routes
+     * near, so the label never lands on an unrelated node's body. */
+    nodeRects?: Rect[];
+    /** Nearby other-edge polylines (see collectNeighborPolylines), collected over
+     * the WHOLE edge so they cover any arm the label may land on. */
+    neighborGeometry?: IPoint[][];
+}
+/**
+ * Places the relationship/stereotype middle label so it overlaps nothing it can
+ * avoid. The label is hosted on whichever arm of the edge — and on whichever
+ * perpendicular side — has room: each candidate (every segment × its two sides)
+ * is scored lexicographically by
+ *   [ overlaps (own other arms + nodes + neighbour edges),
+ *     does-not-fit-within-the-segment,
+ *     distance from the arc-midpoint (keep it central),
+ *     side preference (on top / right) ].
+ * For a simple edge the arc-mid segment wins with zero overlaps, so the label
+ * stays centered on top exactly as before; on a zig-zag/stepped edge it moves to
+ * a longer arm with clearance instead of crossing the short mid-segment's
+ * neighbouring arms. All inputs are static geometry, so the placement is stable
+ * across selection and identical in headless export.
+ */
+export declare function computeMiddleLabelLayout(input: MiddleLabelInput): PlacedLabel;
+export interface RotatedLabelPlacement {
+    x: number;
+    y: number;
+    /** Degrees; the label is rotated to lie along the connector, flipped to stay
+     * upright. */
+    rotation: number;
+}
+/**
+ * Placement for a label that lies ALONG a straight (possibly diagonal)
+ * connector — use-case association names and the <<include>>/<<extend>>
+ * stereotype. The text is rotated to the line's slope (flipped to stay upright)
+ * and pushed `perpendicularOffset` px off the line on the upper-left normal.
+ * Pass 0 to center it on the line (e.g. include/extend, which sits in the gap
+ * carved by calculateStraightPath). Centralises the rotation math that was
+ * duplicated across the use-case label components.
+ */
+export declare function computeUseCaseLabelLayout(source: IPoint, target: IPoint, perpendicularOffset: number): RotatedLabelPlacement;

package/dist/react/utils/geometry/interfaceLabelLayout.d.ts

@@ -0,0 +1,44 @@
+/**
+ * Pure side-selection for the provided/required interface node label. The
+ * interface is a small circle that connects only at its four directional
+ * handles ("top"/"right"/"bottom"/"left"). The name sits centered below by
+ * default (see InterfaceLabel), but must move off any side a connecting edge
+ * attaches to — otherwise the label overlaps that edge. Pure and unit-testable
+ * in the spirit of edgeLabelLayout.ts; no React, no DOM, no constants.
+ */
+/** A side an edge can attach to (the four directional interface handles). */
+export type CardinalSide = "top" | "right" | "bottom" | "left";
+/**
+ * Where the label sits relative to the circle: one of the four sides, or — when
+ * every side has a connecting edge — a diagonal quadrant (which no cardinal edge
+ * passes through).
+ */
+export type InterfaceLabelSide = CardinalSide | "top-left" | "top-right" | "bottom-left" | "bottom-right";
+/** Minimal structural view of a React Flow edge (the store's `Edge[]` fits). */
+interface InterfaceEdgeLike {
+    source: string;
+    target: string;
+    sourceHandle?: string | null;
+    targetHandle?: string | null;
+}
+/** The sides of `nodeId` that a connecting edge attaches to. */
+export declare function getOccupiedInterfaceSides(edges: ReadonlyArray<InterfaceEdgeLike>, nodeId: string): Set<CardinalSide>;
+/**
+ * Picks where the label sits. Prefers a free cardinal side by priority — reads
+ * naturally under a small circle (bottom, then top, then a horizontal side).
+ * When the assessment badge occupies the top-right corner, "top" and "right"
+ * are demoted last so a label can't graze the badge.
+ *
+ * If every cardinal side has a connecting edge, the label moves into a DIAGONAL
+ * quadrant: each cardinal edge leaves along an axis, so a corner label sits in
+ * the gap between two of them and crosses none. Prefer a corner away from the
+ * top-right badge.
+ */
+export declare function pickInterfaceLabelSide(occupied: ReadonlySet<CardinalSide>, opts?: {
+    badgeTopRight?: boolean;
+}): InterfaceLabelSide;
+/** Convenience: the interface label side for `nodeId` given the current edges. */
+export declare function computeInterfaceLabelSide(edges: ReadonlyArray<InterfaceEdgeLike>, nodeId: string, opts?: {
+    badgeTopRight?: boolean;
+}): InterfaceLabelSide;
+export {};

package/dist/react/utils/index.d.ts

@@ -10,6 +10,7 @@ export * from './diagramTypeUtils';
 export * from './storeUtils';
 export * from './deepPartial';
 export * from './bpmnConstraints';
+export * from './swimlaneUtils';
 export { importDiagram } from './versionConverter';
 export * from './alignmentUtils';
 export * from './requiredInterfaceUtils';

package/dist/react/utils/paletteLayout.d.ts

@@ -8,41 +8,45 @@
  *      space, which is what you actually draw in.
  *   2. Fill the available VERTICAL space — a single column down the side reads
  *      like a classic palette and wastes no height.
- *   3. Keep cells comfortably large — never below `COMFORT_MIN_H` just to save a
- *      column, and never below the HIG `CELL_MIN_H` touch floor at all.
+ *   3. Shrink the cells down to the `COMFORT_MIN_H` LEGIBILITY threshold BEFORE
+ *      adding a column — but no smaller: below that, spill to another column so
+ *      the node types stay distinguishable (rather than collapsing to an
+ *      illegible sliver). Cap at `CELL_MAX_H` so they're never too large. The
+ *      `CELL_MIN_H` touch floor is the last-resort fallback on a tiny canvas.
  *
  * So: walk column counts low→high and take the first one whose cells, sized to
- * fill the height, are still comfortable. Few elements get big capped cells in
- * one column; many elements get a taller single column of moderate cells before
- * a second column is ever added.
+ * fill the height (capped), are still at least the legibility threshold. One
+ * column of legible cells is preferred over two columns of bigger ones; cells
+ * shrink toward the legibility threshold first, and only spill to another column
+ * when staying legible in fewer columns no longer fits the height.
+ *
+ * `availH` is the palette's REAL available band (the caller measures the space
+ * between the palette's top and the bottom controls), so this math does NOT
+ * re-subtract any top/bottom chrome reserve — it fills the band it is given.
  *
  * Cells are rectangular (the dominant elements — class boxes, BPMN tasks — are
  * ~1.6:1 wide); narrower/square elements letterbox centered inside. Sizing the
  * cell, not the SVG, keeps the node components untouched.
  */
 export declare const PALETTE: Readonly<{
-    /** HIG/WCAG touch + legibility floor — never shrink a cell past this. */
+    /** Absolute floor (HIG/WCAG touch) — only reached on a tiny canvas where even
+     *  spilling to more columns can't keep cells legible; never shrink past it. */
     readonly CELL_MIN_H: 44;
-    /** Bias toward fewer columns: keep a single (or narrower) column as long as
-     *  its height-filling cells stay at least this big; only add a column when
-     *  that would drop below it. Just above the touch floor, so the strong
-     *  preference is fewer columns + filling the height. */
-    readonly COMFORT_MIN_H: 48;
-    /** Upper bound so few-element palettes don't get absurdly tall cells. */
-    readonly CELL_MAX_H: 78;
+    /** Legibility threshold: shrink a column's cells down to here BEFORE adding
+     *  another column, but spill (rather than go smaller) so the node types stay
+     *  distinguishable. ~a comfortably legible node-preview cell. */
+    readonly COMFORT_MIN_H: 64;
+    /** Upper bound so few-element palettes don't get absurdly tall cells;
+     *  ~a 0.8-scale class-box preview. */
+    readonly CELL_MAX_H: 88;
     /** cellW = round(CELL_RATIO * cellH); ~matches the 160×100 class box. */
     readonly CELL_RATIO: 1.6;
     readonly GAP: 8;
     readonly PAD: 6;
-    /** Keep the palette horizontally narrow so the canvas keeps its width … */
+    /** Keep the palette horizontally narrow so the canvas keeps its width. */
     readonly MAX_FRAC_W: 0.5;
-    /** … but let it use most of the height. */
-    readonly MAX_FRAC_H: 0.9;
     /** Letterbox padding around the preview inside a cell. */
     readonly CONTENT_INSET: 6;
-    /** Space kept clear above (top offset) and below (zoom controls) the palette. */
-    readonly TOP_RESERVE: 10;
-    readonly BOTTOM_RESERVE: 84;
 }>;
 export interface PaletteLayout {
     cols: number;

package/dist/react/utils/swimlaneUtils.d.ts

@@ -0,0 +1,58 @@
+import { SwimlaneLane } from '../types';
+/** Smallest a lane may be shrunk to (flow px) when dragging a separator. */
+export declare const MIN_LANE_EXTENT = 40;
+/**
+ * Pixel `start`/`extent` of every lane along the primary axis.
+ *
+ * Lane sizes are stored as absolute flow px. The **last** lane is elastic: it
+ * always fills the remaining space. That way resizing the whole swimlane only
+ * grows/shrinks the last lane — the interior separators stay put — instead of
+ * rescaling every lane (which would move every separator). Lanes with no size
+ * at all (a freshly dropped swimlane) divide the axis equally.
+ */
+export declare const getLaneOffsets: (lanes: {
+    size?: number;
+}[], primaryExtent: number) => {
+    start: number;
+    extent: number;
+}[];
+/**
+ * Pin every lane's current rendered extent as its `size`, so the elastic last
+ * lane gets a concrete value before an operation (reorder/add/remove) that
+ * changes which lane is last.
+ */
+export declare const materializeLaneSizes: (lanes: SwimlaneLane[], primaryExtent: number) => SwimlaneLane[];
+/** Index of the lane whose range contains the primary-axis coordinate `pos`. */
+export declare const laneIndexAtOffset: (offsets: {
+    start: number;
+    extent: number;
+}[], pos: number) => number;
+/**
+ * Balanced resize of the divider between lane `index` and `index + 1`: move the
+ * shared boundary by `deltaPx`, growing one lane and shrinking the other by the
+ * same amount so the swimlane's outer size never changes. Neither lane drops
+ * below `MIN_LANE_EXTENT`. Returns lanes with an explicit `size` on every entry.
+ *
+ * When `snapGridPx > 0` the moved boundary is snapped to that grid, so a lane
+ * separator lands on the same grid that nodes and edge bends snap to. The lane
+ * offsets are measured from the swimlane's own origin, which React Flow already
+ * keeps grid-aligned, so the snapped boundary lines up with the absolute grid.
+ */
+export declare const resizeLaneDivider: (lanes: SwimlaneLane[], index: number, deltaPx: number, primaryExtent: number, snapGridPx?: number) => SwimlaneLane[];
+/**
+ * Reposition a swimlane child when orientation flips and the swimlane's
+ * width/height swap: transpose the child's corner (x,y)->(y,x), then clamp it
+ * into the swapped frame by its own size so it can't be stranded off the new
+ * (shorter) cross-axis. `newWidth`/`newHeight` are the post-swap dimensions.
+ */
+export declare const flipSwimlaneChildPosition: (child: {
+    position: {
+        x: number;
+        y: number;
+    };
+    width?: number;
+    height?: number;
+}, newWidth: number, newHeight: number) => {
+    x: number;
+    y: number;
+};