@tumaet/apollon 4.2.8 → 4.2.10

package/dist/types/SVG.d.ts

@@ -2,7 +2,7 @@ export interface SVGComponentProps {
     id: string;
     width: number;
     height: number;
-    transformScale?: number;
+    SIDEBAR_PREVIEW_SCALE?: number;
     svgAttributes?: React.SVGAttributes<SVGElement>;
     showAssessmentResults?: boolean;
 }

package/dist/typings.d.ts

@@ -65,6 +65,7 @@ export declare enum ApollonView {
     Exporting = "Exporting",
     Highlight = "Highlight"
 }
+export type SvgExportMode = "web" | "compat";
 export type ApollonOptions = {
     type?: UMLDiagramType;
     mode?: ApollonMode;
@@ -104,6 +105,12 @@ export type ExportOptions = {
     keepOriginalSize?: boolean;
     include?: string[];
     exclude?: string[];
+    /**
+     * Controls how SVG output is post-processed.
+     * - "web": keep CSS variables for theme-adaptive rendering in browsers
+     * - "compat": resolve CSS variables + inline attributes for PowerPoint/Inkscape
+     */
+    svgMode?: SvgExportMode;
 };
 export type SVG = {
     svg: string;

package/dist/utils/edgeUtils.d.ts

@@ -74,7 +74,7 @@ export declare function getEllipseHandlePosition(centerX: number, centerY: numbe
 };
 export declare function calculateOverlayPath(sourceX: number, sourceY: number, targetX: number, targetY: number, type: string): string;
 export declare function calculateStraightPath(sourceX: number, sourceY: number, targetX: number, targetY: number, type: string): string;
-export declare function simplifySvgPath(path: string, decimals?: number): string;
+export declare function simplifySvgPath(path: string): string;
 export declare function simplifyPoints(points: IPoint[]): IPoint[];
 export declare function parseSvgPath(path: string): IPoint[];
 export declare function calculateInnerMidpoints(points: IPoint[], decimals?: number): IPoint[];

package/dist/utils/exportUtils.d.ts

@@ -1,3 +1,103 @@
 import { ReactFlowInstance, Node, Edge, Rect } from '@xyflow/react';
-export declare const getSVG: (container: HTMLElement, clip: Rect) => string;
-export declare function getDiagramBounds(reactFlow: ReactFlowInstance<Node, Edge>): Rect;
+import { Point } from './pathParsing';
+type SvgExportMode = "web" | "compat";
+export declare const getSVG: (container: HTMLElement, clip: Rect, options?: {
+    svgMode?: SvgExportMode;
+}) => 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[];
+/**
+ * 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 getDiagramBounds(reactFlow: ReactFlowInstance<Node, Edge>, container?: HTMLElement | null): 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;
+/**
+ * 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;
+/**
+ * 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 extractPathPoints: typeof extractPathPoints;
+    readonly extractStyles: typeof extractStyles;
+    readonly resolveCSSVariable: typeof resolveCSSVariable;
+    readonly replaceCSSVariables: typeof replaceCSSVariables;
+    readonly convertStyleToAttributes: typeof convertStyleToAttributes;
+    readonly ensureTextFontDefaults: typeof ensureTextFontDefaults;
+    readonly removeMarkerElements: typeof removeMarkerElements;
+    readonly replaceTextDecorationWithManualUnderline: typeof replaceTextDecorationWithManualUnderline;
+    readonly mergeBounds: typeof mergeBounds;
+    readonly getNodeOverflowBoundsFromDOM: typeof getNodeOverflowBoundsFromDOM;
+};
+export {};

package/dist/utils/flatSvgExporter.d.ts

@@ -0,0 +1,8 @@
+import { SVG, UMLModel } from '../typings';
+export type FlatSvgExportOptions = {
+    margin?: number;
+    background?: "white" | "transparent";
+    fontFamily?: string;
+    fontSize?: number;
+};
+export declare const exportClassDiagramAsFlatSvg: (model: UMLModel, options?: FlatSvgExportOptions) => SVG;

package/dist/utils/index.d.ts

@@ -13,3 +13,4 @@ export * from './bpmnConstraints';
 export * from './versionConverter';
 export * from './labelUtils';
 export * from './alignmentUtils';
+export * from './flatSvgExporter';

package/dist/utils/pathParsing.d.ts

@@ -0,0 +1,54 @@
+/**
+ * SVG Path Parsing Utilities
+ *
+ * Parses SVG path commands to extract endpoint positions and directions.
+ * Used by InlineMarker to correctly position and orient edge markers.
+ *
+ * Supports all SVG path commands including relative coordinates.
+ */
+export interface Point {
+    readonly x: number;
+    readonly y: number;
+}
+export interface PathEndInfo {
+    /** The endpoint coordinates */
+    readonly endPoint: Point;
+    /** Direction angle in radians (from previous point to endpoint) */
+    readonly direction: number;
+}
+export interface PathStartInfo {
+    /** The start point coordinates */
+    readonly startPoint: Point;
+    /** Direction angle in radians (pointing into the start, away from second point) */
+    readonly direction: number;
+}
+/**
+ * Calculate the direction angle from point A to point B.
+ */
+export declare function calculateDirection(from: Point, to: Point): number;
+/**
+ * Extract endpoint information from an SVG path.
+ *
+ * Parses the path to find the final position and the direction of approach.
+ * The direction is calculated from the control point (or previous point) to the endpoint.
+ *
+ * @param pathD - SVG path data string (e.g., "M0,0 L100,100")
+ * @returns Endpoint info or null if path is invalid
+ */
+export declare function getPathEndInfo(pathD: string): PathEndInfo | null;
+/**
+ * Extract start point information from an SVG path.
+ *
+ * @param pathD - SVG path data string
+ * @returns Start point info or null if path is invalid
+ */
+export declare function getPathStartInfo(pathD: string): PathStartInfo | null;
+/**
+ * Extract marker ID from a url() reference.
+ *
+ * @example
+ * extractMarkerId("url(#black-arrow)") // "black-arrow"
+ * extractMarkerId("url('#my-marker')") // "my-marker"
+ * extractMarkerId(undefined) // null
+ */
+export declare function extractMarkerId(markerUrl: string | undefined): string | null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tumaet/apollon",
-  "version": "4.2.8",
+  "version": "4.2.10",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -20,7 +20,10 @@
     "build:watch": "tsc -b --watch & vite build --watch",
     "preview": "vite preview",
     "lint": "eslint .",
-    "lint:fix": "eslint --fix ."
+    "lint:fix": "eslint --fix .",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage"
   },
   "dependencies": {
     "@emotion/react": "11.11.1",
@@ -31,18 +34,24 @@
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "uuid": "11.0.3",
-    "zustand": "5.0.3",
-    "yjs": "13.6.20"
+    "yjs": "13.6.20",
+    "zustand": "5.0.3"
   },
   "devDependencies": {
     "@eslint/js": "9.17.0",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
     "@vitejs/plugin-react": "4.3.4",
+    "@vitest/coverage-v8": "^4.0.18",
     "eslint": "9.17.0",
     "eslint-plugin-react": "7.37.2",
     "globals": "15.13.0",
+    "jsdom": "^28.1.0",
     "typescript": "5.7.2",
     "typescript-eslint": "8.18.1",
     "vite": "6.3.4",
-    "vite-plugin-dts": "4.3.0"
+    "vite-plugin-dts": "4.3.0",
+    "vitest": "^4.0.18"
   }
 }

package/dist/components/svgs/edges/markers/SvgMarkers.d.ts

@@ -1 +0,0 @@
-export declare function SvgMarkers(): JSX.Element;

package/dist/components/svgs/edges/markers/index.d.ts

@@ -1 +0,0 @@
-export * from './SvgMarkers';

package/dist/constants/canvasConstants.d.ts

@@ -1,6 +0,0 @@
-export declare const MIN_SCALE_TO_ZOOM_OUT = 0.4;
-export declare const MAX_SCALE_TO_ZOOM_IN = 2.5;
-export declare const MOUSE_UP_OFFSET_IN_PIXELS = 5;
-export declare const SNAP_TO_GRID_PX = 10;
-export declare const EXTRA_SPACE_FOR_EXTENTION = 10;
-export declare const PASTE_OFFSET = 20;

package/dist/constants/dropElementConfig.d.ts

@@ -1,14 +0,0 @@
-import { UMLDiagramType } from '../types';
-import { DiagramNodeType } from '../nodes';
-export * from './layoutConstants';
-export declare const transformScale = 0.8;
-export type DropElementConfig = {
-    type: DiagramNodeType;
-    width: number;
-    height: number;
-    defaultData?: Record<string, unknown>;
-    svg: React.FC<any>;
-    marginTop?: number;
-};
-export declare const dropElementConfigs: Record<UMLDiagramType, DropElementConfig[]>;
-export declare const ColorDescriptionConfig: DropElementConfig;

package/dist/constants/edgeConstants.d.ts

@@ -1,13 +0,0 @@
-export declare const ARROW_MARKER_PADDING = -3;
-export declare const DOTTED_ARROW_MARKER_PADDING = -3;
-export declare const TRIANGLE_MARKER_PADDING = -3;
-export declare const RHOMBUS_MARKER_PADDING = 12;
-export declare const MARKER_PADDING = -3;
-export declare const SOURCE_CONNECTION_POINT_PADDING = 3.5;
-export declare const STEP_BOARDER_RADIUS = 0;
-export declare const USECASE_PADDING = -3;
-export declare const NO_PADDING = 0;
-export declare const EDGE_HIGHTLIGHT_STROKE_WIDTH = 15;
-export declare const BPMN_SMALL_ARROW_PADDING = 4;
-export declare const BPMN_CIRCLE_PADDING = 5;
-export declare const BPMN_MESSAGE_ARROW_PADDING = 4.5;

package/dist/constants/index.d.ts

@@ -1,4 +0,0 @@
-export * from './dropElementConfig';
-export * from './canvasConstants';
-export * from './edgeConstants';
-export * from './layoutConstants';

package/dist/constants/layoutConstants.d.ts

@@ -1,9 +0,0 @@
-export declare const DEFAULT_FONT = "400 16px Inter, system-ui, Avenir, Helvetica, Arial, sans-serif";
-export declare const DEFAULT_HEADER_HEIGHT = 40;
-export declare const DEFAULT_HEADER_HEIGHT_WITH_STREOTYPE = 50;
-export declare const DEFAULT_ATTRIBUTE_HEIGHT = 30;
-export declare const DEFAULT_METHOD_HEIGHT = 30;
-export declare const DEFAULT_PADDING = 10;
-export declare const LINE_WIDTH = 1;
-export declare const LINE_WIDTH_INTERFACE = 2;
-export declare const LINE_WIDTH_ON_EDGE: number;

package/dist/constants/zindexConstants.d.ts

@@ -1,9 +0,0 @@
-export declare const ZINDEX_BASE = 0;
-export declare const ZINDEX_HEADER_SWITCH = 1;
-export declare const ZINDEX_MODAL = 9998;
-export declare const ZINDEX_TOOLTIP = 10000;
-export declare const ZINDEX_LABEL = 9998;
-export declare const ZINDEX_PANEL = 10;
-export declare const ZINDEX_MINIMAP = 5;
-export declare const ZINDEX_DRAGGABLE_GHOST = 2;
-export declare const ZINDEX_DRAGGABLE_ELEMENT = 9999;