@tumaet/apollon 4.2.16 → 4.2.18

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 TUM Applied Education Technologies
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,87 @@
+# @tumaet/apollon
+
+[![npm version](https://img.shields.io/npm/v/@tumaet/apollon)](https://www.npmjs.com/package/@tumaet/apollon)
+[![npm license](https://img.shields.io/npm/l/@tumaet/apollon)](https://github.com/ls1intum/Apollon/blob/main/LICENSE)
+
+A UML modeling editor for React. Mount it into any DOM node. 13 diagram types, SVG/PNG/PDF/JSON export, optional real-time collaboration via Yjs.
+
+> Replaces the deprecated [`@ls1intum/apollon`](https://www.npmjs.com/package/@ls1intum/apollon) — see that page for the migration guide.
+
+## Install
+
+```sh
+npm install @tumaet/apollon
+```
+
+## Usage
+
+```ts
+import {
+  ApollonEditor,
+  ApollonMode,
+  Locale,
+  UMLDiagramType,
+} from "@tumaet/apollon"
+
+const container = document.getElementById("apollon")
+if (!container) throw new Error("#apollon container missing")
+
+const editor = new ApollonEditor(container, {
+  type: UMLDiagramType.ClassDiagram,
+  mode: ApollonMode.Modelling,
+  locale: Locale.en,
+  // model, theme, readonly, enablePopups, colorEnabled, scale,
+  // collaborationEnabled, scrollLock — see `ApollonOptions`
+})
+
+// Read / write the model
+console.log(editor.model)
+editor.model = nextModel
+
+// React to edits
+const subscriptionId = editor.subscribeToModelChange((model) => {
+  // persist / broadcast
+})
+
+// Export
+const svg = await editor.exportAsSVG({ svgMode: "web" })
+
+// Teardown
+editor.unsubscribe(subscriptionId)
+editor.destroy()
+```
+
+The editor mounts into the DOM and is client-only. In SSR frameworks (Next.js, Remix), instantiate inside `useEffect` or behind a dynamic import. Call `editor.destroy()` before re-mounting on the same container.
+
+Type definitions ship with the package (`dist/index.d.ts`).
+
+## Supported diagrams
+
+`ClassDiagram`, `ObjectDiagram`, `ActivityDiagram`, `UseCaseDiagram`, `CommunicationDiagram`, `ComponentDiagram`, `DeploymentDiagram`, `PetriNet`, `ReachabilityGraph`, `SyntaxTree`, `Flowchart`, `BPMN`, `Sfc` (Sequential Function Chart).
+
+## Real-time collaboration
+
+Collaboration is opt-in and transport-agnostic. Enable `collaborationEnabled` in `ApollonOptions`, then wire your transport to the editor's Yjs bridge:
+
+```ts
+editor.sendBroadcastMessage((base64) => transport.send(base64))
+transport.onMessage((base64) => editor.receiveBroadcastedMessage(base64))
+```
+
+Use any Yjs-compatible transport (WebSocket, WebRTC, `y-websocket`, etc.).
+
+## Export
+
+- `editor.exportAsSVG(options)` resolves to `{ svg, clip }` — render or serialize as-is.
+- PNG and PDF use the same pipeline via `ExportOptions` (`svgMode: "web" | "compat"`); see `dist/index.d.ts`.
+- `editor.model` returns the `UMLModel` as JSON.
+
+## Related
+
+- Source and issue tracker: <https://github.com/ls1intum/Apollon>
+- Standalone web editor, server, and mobile apps live in the same monorepo.
+- Developed alongside [Artemis](https://artemis.tum.de/), TUM's interactive learning platform.
+
+## License
+
+MIT — see [LICENSE](https://github.com/ls1intum/Apollon/blob/main/LICENSE).

package/dist/constants.d.ts

@@ -24,10 +24,15 @@ export declare const LAYOUT: Readonly<{
     readonly LINE_WIDTH_EDGE: 2;
     readonly ICON_LINE_WIDTH: 1.5;
 }>;
+export declare const INTERFACE_SIZE = 30;
+export declare const INTERFACE_RADIUS: number;
+export declare const INTERFACE_STROKE_WIDTH = 2;
+export declare const INTERFACE_SOCKET_GAP = 4;
 export declare const INTERFACE: Readonly<{
     readonly SIZE: 30;
-    readonly RADIUS: 15;
+    readonly RADIUS: number;
     readonly STROKE_WIDTH: 2;
+    readonly SOCKET_GAP: 4;
 }>;
 export declare const MARKER_BASE_SIZE = 18;
 export declare const BPMN_MARKER_SIZE = 11;
@@ -100,15 +105,15 @@ export declare const MARKER_CONFIGS: Readonly<{
     readonly "required-interface": {
         readonly type: "semicircle";
         readonly filled: false;
-        readonly size: 15;
+        readonly size: number;
         readonly widthFactor: 1;
         readonly heightFactor: 1;
-        readonly arcSpanDegrees: 180;
+        readonly arcSpanDegrees: 150;
     };
     readonly "required-interface-quarter": {
         readonly type: "semicircle";
         readonly filled: false;
-        readonly size: 15;
+        readonly size: number;
         readonly widthFactor: 1;
         readonly heightFactor: 1;
         readonly arcSpanDegrees: 90;
@@ -116,7 +121,7 @@ export declare const MARKER_CONFIGS: Readonly<{
     readonly "required-interface-threequarter": {
         readonly type: "semicircle";
         readonly filled: false;
-        readonly size: 15;
+        readonly size: number;
         readonly widthFactor: 1;
         readonly heightFactor: 1;
         readonly arcSpanDegrees: 270;

package/dist/edges/types.d.ts

@@ -107,16 +107,16 @@ export declare const edgeConfig: {
         readonly allowMidpointDragging: true;
     };
     readonly ComponentProvidedInterface: {
-        readonly allowMidpointDragging: false;
+        readonly allowMidpointDragging: true;
     };
     readonly ComponentRequiredInterface: {
-        readonly allowMidpointDragging: false;
+        readonly allowMidpointDragging: true;
     };
     readonly ComponentRequiredThreeQuarterInterface: {
-        readonly allowMidpointDragging: false;
+        readonly allowMidpointDragging: true;
     };
     readonly ComponentRequiredQuarterInterface: {
-        readonly allowMidpointDragging: false;
+        readonly allowMidpointDragging: true;
     };
     readonly DeploymentAssociation: {
         readonly allowMidpointDragging: true;

package/dist/hooks/useEdgeConfig.d.ts

@@ -53,13 +53,13 @@ export declare const useEdgeConfig: (edgeType: DiagramEdgeType) => {
 } | {
     readonly allowMidpointDragging: true;
 } | {
-    readonly allowMidpointDragging: false;
+    readonly allowMidpointDragging: true;
 } | {
-    readonly allowMidpointDragging: false;
+    readonly allowMidpointDragging: true;
 } | {
-    readonly allowMidpointDragging: false;
+    readonly allowMidpointDragging: true;
 } | {
-    readonly allowMidpointDragging: false;
+    readonly allowMidpointDragging: true;
 } | {
     readonly allowMidpointDragging: true;
     readonly showRelationshipLabels: true;