@tumaet/apollon 4.7.0 → 4.8.0

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

@@ -1,6 +1,6 @@
 import { StoreApi, UseBoundStore } from 'zustand';
 import { Node, Edge, OnNodesChange, OnEdgesChange } from '@xyflow/react';
-import { Assessment, InteractiveElements } from '../typings';
+import { Assessment, DraggingNode, InteractiveElements } from '../typings';
 import * as Y from "yjs";
 export type DiagramStoreData = {
     nodes: Node[];
@@ -18,8 +18,24 @@ export type DiagramStore = {
     canUndo: boolean;
     canRedo: boolean;
     undoManager: Y.UndoManager | null;
+    collaborationEnabled: boolean;
     previewMode: boolean;
     setDiagramId: (diagramId: string) => void;
+    setCollaborationEnabled: (enabled: boolean) => void;
+    /**
+     * Inject the sink that forwards transient drag/resize frames onto the
+     * ephemeral awareness channel (wired by `YjsSync` for every editor). Kept as
+     * runtime wiring rather than diagram state so a `reset()` never clears it.
+     * The broadcast itself is gated by `collaborationEnabled`, not by this sink;
+     * `null` (headless, where no `YjsSync` runs) just leaves it unwired.
+     */
+    setDraggingNodesPublisher: (publisher: ((draggingNodes: DraggingNode[] | null) => void) | null) => void;
+    /**
+     * Clear the peers' live-drag overlay once a gesture's settled value is
+     * committed. Called from `onNodeDragStop` (after the doc write) and on
+     * collaboration teardown; a no-op when nothing is being broadcast.
+     */
+    endTransientNodeBroadcast: () => void;
     setNodes: (payload: Node[] | ((nodes: Node[]) => Node[])) => void;
     setEdges: (payload: Edge[] | ((edges: Edge[]) => Edge[])) => void;
     setNodesAndEdges: (nodes: Node[], edges: Edge[]) => void;

package/dist/react/sync/perfCounters.d.ts

@@ -0,0 +1,6 @@
+export type PerfCounters = {
+    storeNodeWrites: number;
+};
+export declare const perfCounters: PerfCounters;
+export declare const getPerfCounters: () => PerfCounters | undefined;
+export declare const recordStoreNodeWrite: () => void;

package/dist/react/sync/ydoc.d.ts

@@ -1,7 +1,9 @@
 import { Assessment } from '../typings';
 import { Node, Edge } from '@xyflow/react';
 import * as Y from "yjs";
+export declare const STORE_ORIGIN = "store";
 export declare const getNodesMap: (ydoc: Y.Doc) => Y.Map<Node>;
 export declare const getEdgesMap: (ydoc: Y.Doc) => Y.Map<Edge>;
 export declare const getAssessments: (ydoc: Y.Doc) => Y.Map<Assessment>;
 export declare const getDiagramMetadata: (ydoc: Y.Doc) => Y.Map<string>;
+export declare const reconcileYMap: <T>(map: Y.Map<T>, nextEntries: Iterable<readonly [string, T]>) => void;

package/dist/react/sync/yjsSync.d.ts

@@ -1,6 +1,6 @@
 import { DiagramStore } from '../store/diagramStore';
 import { MetadataStore } from '../store/metadataStore';
-import { CollaborationState, CollaborationUser, CollaborationViewport, CollaboratorInfo } from '../typings';
+import { CollaborationState, CollaborationUser, CollaborationViewport, CollaboratorInfo, DraggingNode } from '../typings';
 import { StoreApi } from 'zustand';
 import * as Y from "yjs";
 export declare enum MessageType {
@@ -37,6 +37,7 @@ export declare class YjsSync {
     setLocalAwarenessViewport: (viewport: CollaborationViewport | null) => void;
     setLocalAwarenessFollowing: (followingClientId: number | null) => void;
     setLocalAwarenessSelectedElement: (selectedElementId: string | null) => void;
+    setLocalAwarenessDraggingNodes: (draggingNodes: DraggingNode[] | null) => void;
     setLocalAwarenessState: (state: Partial<CollaborationState>) => void;
     subscribeToAwarenessChanges: (callback: (states: Map<number, CollaborationState>) => void) => () => void;
     getAwarenessStates: () => Map<number, CollaborationState>;
@@ -58,5 +59,5 @@ export declare class YjsSync {
     /**
      * Convert Base64 string to Uint8Array
      */
-    private base64ToUint8;
+    static base64ToUint8(base64: string): Uint8Array;
 }

package/dist/react/typings.d.ts

@@ -24,12 +24,29 @@ export type CollaborationViewport = {
     y: number;
     zoom: number;
 };
+/**
+ * One node a peer is actively dragging or resizing. Broadcast over the
+ * ephemeral awareness channel — never written to the Yjs document — so peers
+ * can render the in-progress gesture live without growing the CRDT or entering
+ * anyone's undo history. The settled position/size is committed once on
+ * drop/release through the document like any other edit.
+ */
+export type DraggingNode = {
+    id: string;
+    position: {
+        x: number;
+        y: number;
+    };
+    width?: number | null;
+    height?: number | null;
+};
 export type CollaborationState = {
     user?: CollaborationUser;
     cursor?: CollaborationCursor | null;
     viewport?: CollaborationViewport | null;
     followingClientId?: number | null;
     selectedElementId?: string | null;
+    draggingNodes?: DraggingNode[] | null;
 };
 export type CollaboratorInfo = {
     id: string;

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

@@ -1,4 +1,4 @@
-import { CollaborationViewport } from '../typings';
+import { CollaborationViewport, DraggingNode } from '../typings';
 export declare const randomCollabName: () => string;
 export declare const collabColorFromName: (name: string) => string;
 /**
@@ -8,3 +8,12 @@ export declare const collabColorFromName: (name: string) => string;
  * Returns `null` for anything malformed.
  */
 export declare const sanitizeCollaborationViewport: (raw: unknown) => CollaborationViewport | null;
+/**
+ * Narrow an untrusted, peer-supplied `draggingNodes` payload before the overlay
+ * reader iterates it. A non-array value (or entries missing a string `id` or a
+ * finite numeric position) would otherwise throw in the awareness subscription
+ * handler and break the live overlay for everyone reading that peer. Returns the
+ * well-formed entries only; `null` if the value isn't an array. Per-entry
+ * `width`/`height` survive only when finite or explicitly `null`.
+ */
+export declare const sanitizeDraggingNodes: (raw: unknown) => DraggingNode[] | null;

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

@@ -1,5 +1,4 @@
 import { ReactFlowInstance, Node, Edge, Rect } from '@xyflow/react';
-import { Point } from './pathParsing';
 type SvgExportMode = "web" | "compat";
 type ExportFilterOptions = {
     include?: string[];
@@ -8,134 +7,5 @@ type ExportFilterOptions = {
 };
 export declare function filterRenderedElements(container: HTMLElement, options?: ExportFilterOptions): void;
 export declare const getSVG: (container: HTMLElement, clip: Rect, options?: ExportFilterOptions, fontFaceCss?: string) => string;
-/**
- * Extract all coordinate points from an SVG path string.
- * This includes endpoints AND control points for bezier curves,
- * which is important because bezier curves are bounded by the
- * convex hull of all their control points.
- *
- * For S (smooth cubic) and T (smooth quadratic) commands, we also
- * include the reflected control point which may extend the bounds.
- */
-declare function extractPathPoints(pathD: string): Point[];
-declare function getNodeBoundsFromDOM(container: HTMLElement, reactFlow?: ReactFlowInstance<Node, Edge>): Rect | undefined;
-/**
- * Calculate bounds for node SVG overflow content.
- *
- * Some nodes render elements outside their viewBox (e.g., the initial marking
- * arrow in Reachability Graphs extends to negative coordinates). These elements
- * are visible because the node SVGs use overflow="visible", but they are NOT
- * included in reactFlow.getNodesBounds() which only considers node position
- * and dimensions.
- *
- * This function scans node SVGs for <line>, <path>, and <circle> elements
- * that extend outside the node's local coordinate system (viewBox), converts
- * them to global coordinates, and returns the bounding box of all such content.
- */
-declare function getNodeOverflowBoundsFromDOM(container: HTMLElement): Rect | undefined;
-declare function mergeBounds(a: Rect, b: Rect): Rect;
 export declare function getRenderedDiagramBounds(reactFlow: ReactFlowInstance<Node, Edge>, container: HTMLElement): Rect;
-declare function extractStyles(styleString: string): {
-    transform: {
-        x: number;
-        y: number;
-    };
-    width: string | null;
-    height: string | null;
-};
-type CSSVariableMap = Readonly<Record<string, string>>;
-/**
- * Resolve a single CSS variable reference to its final value.
- * Handles recursive var() resolution and fallback values.
- */
-declare function resolveCSSVariable(value: string, cssVarMap?: CSSVariableMap): string;
-/**
- * Replace CSS variables and currentColor in all attributes of an element tree.
- *
- * @param node - The DOM node to process
- * @param inheritedColor - The inherited 'currentColor' value from parent elements
- */
-declare function replaceCSSVariables(node: Element | ChildNode, inheritedColor?: string, cssVarMap?: CSSVariableMap): void;
-/**
- * Convert inline style properties to direct SVG attributes for better compatibility.
- * PowerPoint and some other applications don't properly parse CSS in style attributes.
- */
-declare function convertStyleToAttributes(node: Element | ChildNode): void;
-/**
- * Ensure all <text> elements have explicit font-size, font-weight, and font-family.
- *
- * In the browser, text inherits these from CSS (:root font-family, default font-size).
- * In exported SVGs opened in non-browser renderers, missing attributes cause text to
- * render with the renderer's own defaults (often Times New Roman at an arbitrary size).
- *
- * This pass runs AFTER convertStyleToAttributes so any font props already extracted
- * from inline styles are present as attributes.
- */
-declare function ensureTextFontDefaults(svg: Element): void;
-/**
- * Resolve relative `font-size` (`%`, `em`) to px against the inherited size —
- * otherwise stereotypes (`font-size="85%"`) balloon over the class title. Walks
- * depth-first carrying the resolved px; runs after ensureTextFontDefaults so
- * every <text> already has a px size to inherit.
- */
-declare function resolveRelativeFontSizes(el: Element, inheritedPx?: number): void;
-/**
- * Flatten cumulative `<tspan dy>` to absolute `y` — Skia collapses sibling
- * tspans onto one line, overlapping a stereotype with its class name. Assumes
- * the flat `<text><tspan/></text>` shape Apollon emits (no nested tspans).
- */
-declare function resolveTspanDy(svg: Element): void;
-/**
- * Resolve `dominant-baseline` to an explicit baseline `y` — non-browser engines
- * draw every label at the alphabetic baseline (too high) otherwise. Runs after
- * resolveTspanDy so tspan `y` is already absolute.
- */
-declare function resolveDominantBaseline(svg: Element): void;
-/**
- * Replace `text-decoration="underline"` on `<text>` elements with manual
- * `<line>` siblings so the underline is visible in non-browser renderers.
- *
- * resvg 2.6.2 has a rendering bug where 3+ `text-decoration="underline"`
- * attributes across nested `<svg>` elements cause unrelated paths (particularly
- * vertical lines) to disappear. This workaround removes the problematic
- * attribute and draws explicit underline lines using `getBBox()` for accurate
- * text measurements.
- *
- * The SVG must be temporarily attached to the DOM for `getBBox()` to work.
- */
-declare function replaceTextDecorationWithManualUnderline(svg: SVGSVGElement): void;
-/**
- * Embed `@font-face` CSS (typically the bundled Inter woff2 as base64) into the
- * export SVG so the document carries its own font and renders identically when
- * opened away from the editor. Inserted first so the face is declared before
- * any `<text>` references it. Idempotent: a second call is a no-op.
- */
-declare function embedFontFaceCss(svg: SVGSVGElement, css: string): void;
-/**
- * Final safety pass: strip any legacy <marker> references that could sneak in
- * from third-party content. Keeps exports clean for PowerPoint/Keynote.
- */
-declare function removeMarkerElements(svg: Element): void;
-/**
- * @internal — Exported for unit testing only. Not part of the public API.
- */
-export declare const __testing: {
-    readonly embedFontFaceCss: typeof embedFontFaceCss;
-    readonly filterRenderedElements: typeof filterRenderedElements;
-    readonly getRenderedDiagramBounds: typeof getRenderedDiagramBounds;
-    readonly extractPathPoints: typeof extractPathPoints;
-    readonly extractStyles: typeof extractStyles;
-    readonly resolveCSSVariable: typeof resolveCSSVariable;
-    readonly replaceCSSVariables: typeof replaceCSSVariables;
-    readonly convertStyleToAttributes: typeof convertStyleToAttributes;
-    readonly ensureTextFontDefaults: typeof ensureTextFontDefaults;
-    readonly resolveRelativeFontSizes: typeof resolveRelativeFontSizes;
-    readonly resolveTspanDy: typeof resolveTspanDy;
-    readonly resolveDominantBaseline: typeof resolveDominantBaseline;
-    readonly removeMarkerElements: typeof removeMarkerElements;
-    readonly replaceTextDecorationWithManualUnderline: typeof replaceTextDecorationWithManualUnderline;
-    readonly mergeBounds: typeof mergeBounds;
-    readonly getNodeBoundsFromDOM: typeof getNodeBoundsFromDOM;
-    readonly getNodeOverflowBoundsFromDOM: typeof getNodeOverflowBoundsFromDOM;
-};
 export {};

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

@@ -0,0 +1,66 @@
+/**
+ * Layout math for the floating element palette. The palette is an overlay on
+ * the canvas (all viewports — there is no docked variant), so it must lay every
+ * element out in a grid that fits the available canvas WITHOUT scrolling.
+ *
+ * Objective (in priority order):
+ *   1. Use the FEWEST columns — a tall, narrow card preserves horizontal canvas
+ *      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.
+ *
+ * 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.
+ *
+ * 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. */
+    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;
+    /** 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 … */
+    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;
+    cellW: number;
+    cellH: number;
+    /** True only in the rare case all items can't fit even at the floor size. */
+    scroll: boolean;
+}
+/**
+ * @param itemCount total grid cells (drag elements + the color-description cell)
+ * @param availW    measured canvas width
+ * @param availH    measured canvas height
+ * @param chromeH   height of non-grid palette chrome (view switch / hint), 0 if none
+ */
+export declare function computePaletteLayout(itemCount: number, availW: number, availH: number, chromeH: number): PaletteLayout;
+/**
+ * Preview scale that fits an element's natural size into a cell's content box.
+ * Elements fill their cell (so they read "big"); wide boxes fit width, tall/
+ * square nodes fit height and letterbox.
+ */
+export declare function previewScaleForCell(naturalWidth: number, naturalHeight: number, cellW: number, cellH: number): number;