@tumaet/apollon 4.3.0 → 4.5.0

package/package.json

@@ -1,23 +1,14 @@
 {
   "name": "@tumaet/apollon",
-  "version": "4.3.0",
-  "description": "An embeddable UML modeling editor for React. 13 diagram types, SVG/PNG/PDF/JSON export, optional real-time collaboration via Yjs.",
+  "version": "4.5.0",
+  "description": "Embeddable UML modeling editor. Mounts into any DOM node — works inside Angular, Vue, Svelte, vanilla JS, or React hosts.",
   "keywords": [
-    "apollon",
     "uml",
     "uml-editor",
-    "diagram",
     "diagram-editor",
-    "modeling",
     "react",
-    "typescript",
-    "collaborative",
-    "yjs",
-    "bpmn",
-    "petri-net",
-    "activity-diagram",
-    "class-diagram",
-    "flowchart"
+    "angular",
+    "yjs"
   ],
   "homepage": "https://github.com/ls1intum/Apollon#readme",
   "bugs": {
@@ -37,9 +28,8 @@
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
-  "source": "lib/index.tsx",
   "engines": {
-    "node": ">=20.0.0"
+    "node": ">=22.0.0"
   },
   "publishConfig": {
     "access": "public"
@@ -50,45 +40,115 @@
   "sideEffects": [
     "**/*.css"
   ],
-  "scripts": {
-    "dev": "vite",
-    "build": "tsc -b && vite build",
-    "build:watch": "tsc -b --watch & vite build --watch",
-    "preview": "vite preview",
-    "lint": "eslint .",
-    "lint:fix": "eslint --fix .",
-    "test": "vitest run",
-    "test:watch": "vitest",
-    "test:coverage": "vitest run --coverage"
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./react": {
+      "types": "./dist/react/react.d.ts",
+      "import": "./dist/react/react.js"
+    },
+    "./internals": {
+      "types": "./dist/internals.d.ts",
+      "import": "./dist/internals.js"
+    },
+    "./style.css": "./dist/assets/style.css",
+    "./package.json": "./package.json"
+  },
+  "size-limit": [
+    {
+      "name": "standalone entry (peers inlined)",
+      "path": "dist/index.js",
+      "limit": "220 kB"
+    },
+    {
+      "name": "/react entry (peers external)",
+      "path": "dist/react/react.js",
+      "limit": "110 kB"
+    },
+    {
+      "name": "yjs sync chunk",
+      "path": "dist/yjsSync-*.js",
+      "limit": "210 kB"
+    }
+  ],
+  "peerDependencies": {
+    "@emotion/react": "^11.11.0",
+    "@emotion/styled": "^11.11.0",
+    "@mui/material": "^6.4.0",
+    "@xyflow/react": "^12.3.0",
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0"
+  },
+  "peerDependenciesMeta": {
+    "@emotion/react": {
+      "optional": true
+    },
+    "@emotion/styled": {
+      "optional": true
+    },
+    "@mui/material": {
+      "optional": true
+    },
+    "@xyflow/react": {
+      "optional": true
+    },
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    }
   },
   "dependencies": {
     "@chenglou/pretext": "0.0.6",
-    "@emotion/react": "11.11.1",
-    "@emotion/styled": "11.11.0",
-    "@mui/material": "6.4.2",
-    "@xyflow/react": "12.3.6",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
+    "@dnd-kit/core": "6.3.1",
+    "@dnd-kit/sortable": "10.0.0",
+    "@dnd-kit/utilities": "3.2.2",
     "uuid": "11.0.3",
+    "y-protocols": "1.0.6",
     "yjs": "13.6.20",
-    "zustand": "5.0.3"
+    "zustand": "5.0.12"
   },
   "devDependencies": {
+    "@emotion/react": "11.11.1",
+    "@emotion/styled": "11.11.0",
     "@eslint/js": "9.17.0",
+    "@mui/material": "6.4.2",
     "@testing-library/jest-dom": "6.9.1",
     "@testing-library/react": "16.3.2",
-    "@testing-library/user-event": "14.6.1",
-    "@types/node": "22.13.8",
+    "@types/node": "24.12.4",
+    "@types/react": "18.3.28",
+    "@types/react-dom": "18.3.7",
     "@vitejs/plugin-react": "4.3.4",
     "@vitest/coverage-v8": "4.1.2",
+    "@xyflow/react": "12.3.6",
     "eslint": "9.17.0",
     "eslint-plugin-react": "7.37.2",
+    "eslint-plugin-react-hooks": "5.1.0",
     "globals": "15.13.0",
     "jsdom": "28.1.0",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "size-limit": "11.2.0",
+    "@size-limit/preset-big-lib": "11.2.0",
     "typescript": "5.7.2",
     "typescript-eslint": "8.18.1",
     "vite": "6.4.2",
     "vite-plugin-dts": "4.3.0",
     "vitest": "4.1.2"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build && LIB_PEERS=true vite build && rm -rf dist/react/assets",
+    "build:watch": "tsc -b --watch & vite build --watch",
+    "preview": "vite preview",
+    "lint": "eslint .",
+    "lint:fix": "eslint --fix .",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "size": "size-limit"
   }
-}
+}

package/dist/App.d.ts

@@ -1,6 +0,0 @@
-import { ReactFlowInstance } from '@xyflow/react';
-interface AppProps {
-    onReactFlowInit: (instance: ReactFlowInstance) => void;
-}
-export declare function AppWithProvider(props: AppProps): JSX.Element;
-export {};

package/dist/apollon-editor.d.ts

@@ -1,56 +0,0 @@
-import { Node, Edge } from '@xyflow/react';
-import { DeepPartial } from './utils';
-import { UMLDiagramType } from './types';
-import { SendBroadcastMessage } from './sync/yjsSyncClass';
-import * as Apollon from "./typings";
-export declare class ApollonEditor {
-    private root;
-    private reactFlowInstance;
-    private readonly syncManager;
-    private readonly ydoc;
-    private readonly diagramStore;
-    private readonly metadataStore;
-    private readonly popoverStore;
-    private readonly assessmentSelectionStore;
-    private readonly alignmentGuidesStore;
-    private subscribers;
-    constructor(element: HTMLElement, options?: Apollon.ApollonOptions);
-    private setReactFlowInstance;
-    getNodes(): Node[];
-    getEdges(): Edge[];
-    set diagramType(type: UMLDiagramType);
-    destroy(): void;
-    /**
-     * renders a model as a svg and returns it. Therefore the svg is temporarily added to the dom and removed after it has been rendered.
-     * @param model the apollon model to export as a svg
-     * @param options options to change the export behavior (add margin, exclude element ...)
-     * @param theme the theme which should be applied on the svg
-     */
-    static exportModelAsSvg(model: Apollon.UMLModel, options?: Apollon.ExportOptions, theme?: DeepPartial<Apollon.Styles>): Promise<Apollon.SVG>;
-    /**
-     * exports current model as svg
-     * @param options options to change the export behavior (add margin, exclude element ...)
-     */
-    exportAsSVG(options?: Apollon.ExportOptions): Promise<Apollon.SVG>;
-    private getNewSubscriptionId;
-    subscribeToModelChange(callback: (state: Apollon.UMLModel) => void): number;
-    subscribeToDiagramNameChange(callback: (diagramTitle: string) => void): number;
-    subscribeToAssessmentSelection(callback: (selectedElementIds: string[]) => void): number;
-    unsubscribe(subscriberId: number): void;
-    sendBroadcastMessage(sendFn: SendBroadcastMessage): void;
-    receiveBroadcastedMessage(base64Data: string): void;
-    updateDiagramTitle(name: string): void;
-    toggleInteractiveElementsMode(forceEnabled?: boolean): void;
-    getInteractiveForSerialization(): Apollon.InteractiveElements | undefined;
-    getDiagramMetadata(): {
-        diagramTitle: string;
-        diagramType: "ClassDiagram" | "ObjectDiagram" | "ActivityDiagram" | "UseCaseDiagram" | "CommunicationDiagram" | "ComponentDiagram" | "DeploymentDiagram" | "PetriNet" | "ReachabilityGraph" | "SyntaxTree" | "Flowchart" | "BPMN" | "Sfc";
-    };
-    get model(): Apollon.UMLModel;
-    set model(model: Apollon.UMLModel);
-    getSelectedElements(): string[];
-    get view(): Apollon.ApollonView;
-    set view(view: Apollon.ApollonView);
-    addOrUpdateAssessment(assessment: Apollon.Assessment): void;
-    static generateInitialSyncMessage(): string;
-}

package/dist/components/AlignmentGuides.d.ts

@@ -1 +0,0 @@
-export declare const AlignmentGuides: () => JSX.Element | null;

package/dist/components/AssessmentSelectionDebug.d.ts

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

package/dist/components/CustomBackground.d.ts

@@ -1 +0,0 @@
-export declare const CustomBackground: () => JSX.Element;

package/dist/components/CustomControls.d.ts

@@ -1 +0,0 @@
-export declare const CustomControls: () => JSX.Element;

package/dist/components/CustomMiniMap.d.ts

@@ -1 +0,0 @@
-export declare const CustomMiniMap: () => JSX.Element;

package/dist/components/Sidebar.d.ts

@@ -1 +0,0 @@
-export declare const Sidebar: () => JSX.Element | null;

package/dist/components/debug/AssessmentSelectionDebug.d.ts

@@ -1,6 +0,0 @@
-import { default as React } from 'react';
-/**
- * Debug component to show currently selected elements in assessment mode
- * This can be useful for testing and demonstration purposes
- */
-export declare const AssessmentSelectionDebug: React.FC;

package/dist/components/svgs/nodes/CustomText.d.ts

@@ -1,16 +0,0 @@
-import { FC } from 'react';
-type Props = {
-    children: React.ReactNode;
-    fill?: string;
-    x?: string | number;
-    y?: string | number;
-    dominantBaseline?: string;
-    textAnchor?: string;
-    fontWeight?: string;
-    fontFamily?: string;
-    pointerEvents?: string;
-    noX?: boolean;
-    noY?: boolean;
-};
-export declare const CustomText: FC<Props & Record<string, unknown>>;
-export {};

package/dist/components/theme/styles.d.ts

@@ -1,22 +0,0 @@
-export declare const defaults: () => {
-    color: {
-        primary: string;
-        secondary: string;
-        warningYellow: string;
-        background: string;
-        backgroundVariant: string;
-        grid: string;
-        primaryContrast: string;
-        gray: string;
-        grayAccent: string;
-    };
-    font: {
-        color: string;
-        family: string;
-        size: number;
-    };
-    interactive: {
-        normal: string;
-        hovered: string;
-    };
-};

package/dist/edges/GenericEdge.d.ts

@@ -1,43 +0,0 @@
-import { Node } from '@xyflow/react';
-import { ExtendedEdgeProps } from './EdgeProps';
-import { IPoint } from './Connection';
-import { Assessment } from '../typings';
-export interface BaseEdgeProps extends ExtendedEdgeProps {
-    diagramType?: "class" | "usecase" | "activity" | "component" | "deployment";
-}
-export declare const useEdgeState: (initialPoints?: IPoint[]) => {
-    customPoints: IPoint[];
-    setCustomPoints: import('react').Dispatch<import('react').SetStateAction<IPoint[]>>;
-    tempReconnectPoints: IPoint[] | null;
-    setTempReconnectPoints: import('react').Dispatch<import('react').SetStateAction<IPoint[] | null>>;
-};
-export declare const useEdgeReconnection: (id: string, source: string, target: string, sourceHandleId?: string | null, targetHandleId?: string | null) => {
-    isReconnectingRef: import('react').MutableRefObject<boolean>;
-    reconnectingEndRef: import('react').MutableRefObject<"source" | "target" | null>;
-    startReconnection: (e: React.PointerEvent, endType: "source" | "target", currentPoint: IPoint) => void;
-    completeReconnection: (upEvent: PointerEvent, handleFinder: (upEvent: PointerEvent) => {
-        handle: string | null;
-        node: Node | null;
-        shouldClearPoints: boolean;
-    }, onCustomPointsClear?: () => void) => void;
-};
-export declare const EdgeEndpointMarkers: ({ sourcePoint, targetPoint, isDiagramModifiable, selected, diagramType, pathType, onSourcePointerDown, onTargetPointerDown, }: {
-    sourcePoint: IPoint;
-    targetPoint: IPoint;
-    isDiagramModifiable: boolean;
-    selected?: boolean;
-    diagramType: string;
-    pathType: string;
-    onSourcePointerDown: (e: React.PointerEvent) => void;
-    onTargetPointerDown: (e: React.PointerEvent) => void;
-}) => JSX.Element | null;
-export declare const CommonEdgeElements: ({ id, pathMiddlePosition, isDiagramModifiable, assessments, anchorRef, handleDelete, setPopOverElementId, type, }: {
-    id: string;
-    pathMiddlePosition: IPoint;
-    isDiagramModifiable: boolean;
-    assessments: Record<string, Assessment>;
-    anchorRef: React.RefObject<SVGSVGElement>;
-    handleDelete: () => void;
-    setPopOverElementId: (id: string) => void;
-    type: string;
-}) => JSX.Element;

package/dist/enums/ExportFileFormat.d.ts

@@ -1,6 +0,0 @@
-export declare enum ExportFileFormat {
-    SVG = "SVG",
-    PNG = "PNG",
-    PDF = "PDF",
-    JSON = "JSON"
-}

package/dist/enums/index.d.ts

@@ -1,2 +0,0 @@
-export * from './Quadrant';
-export * from './ExportFileFormat';

package/dist/hooks/useClipboard.d.ts

@@ -1,11 +0,0 @@
-import { Node, Edge } from '@xyflow/react';
-interface ClipboardData {
-    nodes: Node[];
-    edges: Edge[];
-    timestamp: number;
-}
-export declare const useClipboard: () => {
-    copyToClipboard: (data: ClipboardData) => Promise<boolean>;
-    readFromClipboard: () => Promise<ClipboardData | null>;
-};
-export {};

package/dist/hooks/useStraightPathEdge.d.ts

@@ -1,31 +0,0 @@
-import { IPoint } from '../edges/Connection';
-import { BaseEdgeProps } from '../edges/GenericEdge';
-export interface StraightPathEdgeData {
-    pathMiddlePosition: IPoint;
-    isMiddlePathHorizontal: boolean;
-    sourcePoint: IPoint;
-    targetPoint: IPoint;
-}
-export declare const useStraightPathEdge: ({ id, type, source, target, sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, sourceHandleId, targetHandleId, enableReconnection, }: Omit<BaseEdgeProps, "data"> & {
-    enableReconnection?: boolean;
-}) => {
-    pathRef: import('react').MutableRefObject<SVGPathElement | null>;
-    edgeData: StraightPathEdgeData;
-    currentPath: string;
-    overlayPath: string;
-    markerEnd: string | undefined;
-    markerStart: string | undefined;
-    strokeDashArray: string | undefined;
-    sourcePoint: {
-        x: number;
-        y: number;
-    };
-    targetPoint: {
-        x: number;
-        y: number;
-    };
-    isDiagramModifiable: boolean;
-    isReconnectingRef: import('react').MutableRefObject<boolean>;
-    handleEndpointPointerDown: (e: React.PointerEvent, endType: "source" | "target") => void;
-    tempReconnectPath: string | null;
-};

package/dist/initialElements.d.ts

@@ -1,3 +0,0 @@
-import { Edge, Node } from '@xyflow/react';
-export declare const initialNodes: Node[];
-export declare const initialEdges: Edge[];

package/dist/nodes/wrappers/DefaultNodeWrapper.d.ts

@@ -1,33 +0,0 @@
-export declare enum HandleId {
-    TopLeft = "top-left",
-    TopMidLeft = "top-mid-left",
-    Top = "top",
-    TopMidRight = "top-mid-right",
-    TopRight = "top-right",
-    RightTop = "right-top",
-    RightMidTop = "right-mid-top",
-    Right = "right",
-    RightMidBottom = "right-mid-bottom",
-    RightBottom = "right-bottom",
-    BottomRight = "bottom-right",
-    BottomMidRight = "bottom-mid-right",
-    Bottom = "bottom",
-    BottomMidLeft = "bottom-mid-left",
-    BottomLeft = "bottom-left",
-    LeftBottom = "left-bottom",
-    LeftMidBottom = "left-mid-bottom",
-    Left = "left",
-    LeftMidTop = "left-mid-top",
-    LeftTop = "left-top"
-}
-export declare const FOUR_WAY_HANDLES_PRESET: HandleId[];
-interface Props {
-    children: React.ReactNode;
-    width?: number;
-    height?: number;
-    elementId: string;
-    hiddenHandles?: HandleId[] | true;
-    className?: string;
-}
-export declare function DefaultNodeWrapper({ elementId, children, hiddenHandles, className, }: Props): JSX.Element;
-export {};

package/dist/sync/index.d.ts

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

package/dist/sync/yjsSyncClass.d.ts

@@ -1,31 +0,0 @@
-import { StoreApi } from 'zustand';
-import { DiagramStore } from '../store/diagramStore';
-import { MetadataStore } from '../store/metadataStore';
-import * as Y from "yjs";
-export declare enum MessageType {
-    YjsSYNC = 0,
-    YjsUpdate = 1
-}
-export type SendBroadcastMessage = (base64data: string) => void;
-export declare class YjsSyncClass {
-    private readonly stopYjsObserver;
-    private sendBroadcastMessage;
-    private readonly ydoc;
-    private readonly diagramStore;
-    private readonly metadataStore;
-    constructor(ydoc: Y.Doc, diagramStore: StoreApi<DiagramStore>, metadataStore: StoreApi<MetadataStore>);
-    stopSync(): void;
-    setSendBroadcastMessage: (sendFn: SendBroadcastMessage) => void;
-    private applyUpdate;
-    handleReceivedData: (base64Data: string) => void;
-    private startYjsObserver;
-    private isUndoRedoTransaction;
-    /**
-     *  Convert Uint8Array to Base64 string
-     */
-    static uint8ToBase64(uint8: Uint8Array): string;
-    /**
-     * Convert Base64 string to Uint8Array
-     */
-    private base64ToUint8;
-}

package/dist/utils/edgeUtils.d.ts

@@ -1,90 +0,0 @@
-import { IPoint } from '../edges/Connection';
-import { DiagramEdgeType, UMLDiagramType } from '../typings';
-import { Position, Rect, XYPosition, ConnectionLineType } from '@xyflow/react';
-/**
- * Adjusts the target coordinates based on the position and marker padding.
- */
-export declare const adjustTargetCoordinates: (targetX: number, targetY: number, targetPosition: Position, markerPadding: number) => {
-    targetX: number;
-    targetY: number;
-};
-/**
- * Adjusts the source coordinates based on the position and marker padding.
- */
-export declare const adjustSourceCoordinates: (sourceX: number, sourceY: number, sourcePosition: Position, sourcePadding: number) => {
-    sourceX: number;
-    sourceY: number;
-};
-interface TextPlacement {
-    roleX: number;
-    roleY: number;
-    multiplicityX: number;
-    multiplicityY: number;
-}
-export declare const calculateTextPlacement: (x: number, y: number, position: Position) => TextPlacement;
-export declare const calculateDynamicEdgeLabels: (x: number, y: number, direction: string) => {
-    roleX: number;
-    roleY: number;
-    roleTextAnchor: "end";
-    multiplicityX: number;
-    multiplicityY: number;
-    multiplicityTextAnchor: "start";
-} | {
-    roleX: number;
-    roleY: number;
-    roleTextAnchor: "end";
-    multiplicityX: number;
-    multiplicityY: number;
-    multiplicityTextAnchor: "end";
-} | {
-    roleX: number;
-    roleY: number;
-    roleTextAnchor: "start";
-    multiplicityX: number;
-    multiplicityY: number;
-    multiplicityTextAnchor: "start";
-} | {
-    roleX: number;
-    roleY: number;
-    roleTextAnchor: "middle";
-    multiplicityX: number;
-    multiplicityY: number;
-    multiplicityTextAnchor: "middle";
-};
-export interface EdgeMarkerStyles {
-    markerEnd?: string;
-    markerStart?: string;
-    markerPadding?: number;
-    strokeDashArray?: string;
-    offset?: number;
-}
-export declare function getEdgeMarkerStyles(edgeType: string): EdgeMarkerStyles;
-interface FindClosestHandleParams {
-    point: XYPosition;
-    rect: Rect;
-    useFourHandles?: boolean;
-}
-export declare function findClosestHandle({ point, rect, useFourHandles, }: FindClosestHandleParams): string;
-/**
- * Helper function to get handle position on ellipse perimeter
- */
-export declare function getEllipseHandlePosition(centerX: number, centerY: number, radiusX: number, radiusY: number, handle: string): {
-    x: number;
-    y: number;
-};
-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): string;
-export declare function simplifyPoints(points: IPoint[]): IPoint[];
-export declare function parseSvgPath(path: string): IPoint[];
-export declare function calculateInnerMidpoints(points: IPoint[], decimals?: number): IPoint[];
-export declare function removeDuplicatePoints(points: IPoint[]): IPoint[];
-export declare function getMarkerSegmentPath(points: IPoint[], offset: number, targetPosition: "top" | "bottom" | "left" | "right"): string;
-export declare const getDefaultEdgeType: (diagramType: UMLDiagramType) => DiagramEdgeType;
-/**
- * Determines the appropriate connection line type based on the diagram type
- * @param diagramType - The type of diagram being rendered
- * @returns The corresponding ConnectionLineType
- */
-export declare function getConnectionLineType(diagramType: UMLDiagramType): ConnectionLineType;
-export {};

package/dist/utils/labelUtils.d.ts

@@ -1,16 +0,0 @@
-export declare const calculateOffsets: (arrowBoxPosition: {
-    x: number;
-    y: number;
-}, labelBoxPosition: {
-    x: number;
-    y: number;
-}, arrowDirection: "Up" | "Down" | "Left" | "Right", index: number) => {
-    arrowOffset: {
-        x: number;
-        y: number;
-    };
-    labelOffset: {
-        x: number;
-        y: number;
-    };
-};

package/dist/utils/storeUtils.d.ts

@@ -1 +0,0 @@
-export declare const deepEqual: <T>(a: T, b: T) => boolean;

package/dist/utils/textUtils.d.ts

@@ -1,7 +0,0 @@
-/**
- * Measures the width of a given text string using the Canvas API.
- * @param text - The text to measure.
- * @param font - The font style to use for measurement.
- * @returns The width of the text in pixels.
- */
-export declare const measureTextWidth: (text: string, font?: string) => number;