@tumaet/apollon 4.0.0-alpha.0

package/dist/initialElements.d.ts

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

package/dist/nodes/TitleAndDescriptionNode.d.ts

@@ -0,0 +1,7 @@
+import { NodeProps, Node } from '@xyflow/react';
+type Props = Node<{
+    description?: string;
+    title: string;
+}>;
+export declare function TitleAndDesctiption({ selected, width, height, id, data: { description, title }, }: NodeProps<Props>): JSX.Element | null;
+export {};

package/dist/nodes/classDiagram/Class.d.ts

@@ -0,0 +1,3 @@
+import { NodeProps, Node } from '@xyflow/react';
+import { ClassNodeProps } from '../../types';
+export declare function Class({ id, width, height, data: { methods, attributes, stereotype, name }, }: NodeProps<Node<ClassNodeProps>>): JSX.Element;

package/dist/nodes/classDiagram/ColorDescription.d.ts

@@ -0,0 +1,6 @@
+import { NodeProps, Node } from '@xyflow/react';
+type Props = Node<{
+    description: string;
+}>;
+export declare function ColorDescription({ width, height, data: { description }, id, }: NodeProps<Props>): JSX.Element | null;
+export {};

package/dist/nodes/classDiagram/Package.d.ts

@@ -0,0 +1,3 @@
+import { NodeProps, Node } from '@xyflow/react';
+import { PackageNodeProps } from '../../types';
+export default function Package({ id, width, height, data: { name }, parentId, type, }: NodeProps<Node<PackageNodeProps>>): JSX.Element | null;

package/dist/nodes/classDiagram/index.d.ts

@@ -0,0 +1,3 @@
+export * from './Class';
+export * from './Package';
+export * from './ColorDescription';

package/dist/nodes/index.d.ts

@@ -0,0 +1,3 @@
+export * from './classDiagram';
+export * from './types';
+export * from './TitleAndDescriptionNode';

package/dist/nodes/types.d.ts

@@ -0,0 +1,10 @@
+import { Class, ColorDescription } from './classDiagram';
+import { TitleAndDesctiption } from './TitleAndDescriptionNode';
+import { default as Package } from './classDiagram/Package';
+export declare const diagramNodeTypes: {
+    package: typeof Package;
+    class: typeof Class;
+    colorDescription: typeof ColorDescription;
+    titleAndDesctiption: typeof TitleAndDesctiption;
+};
+export type DiagramNodeType = keyof typeof diagramNodeTypes;

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

@@ -0,0 +1,8 @@
+interface Props {
+    children: React.ReactNode;
+    width?: number;
+    height?: number;
+    elementId: string;
+}
+export declare function DefaultNodeWrapper({ elementId, children, width, height, }: Props): JSX.Element;
+export {};

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

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

package/dist/store/context.d.ts

@@ -0,0 +1,10 @@
+import { StoreApi } from 'zustand';
+import { DiagramStore } from './diagramStore';
+import { MetadataStore } from './metadataStore';
+import { PopoverStore } from './popoverStore';
+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 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;

package/dist/store/diagramStore.d.ts

@@ -0,0 +1,32 @@
+import { StoreApi, UseBoundStore } from 'zustand';
+import { Node, Edge, OnNodesChange, OnEdgesChange } from '@xyflow/react';
+import { Assessment } from '../typings';
+import * as Y from "yjs";
+export type DiagramStoreData = {
+    nodes: Node[];
+    edges: Edge[];
+};
+export type DiagramStore = {
+    nodes: Node[];
+    edges: Edge[];
+    interactiveElementId: string | null;
+    diagramId: string;
+    assessments: Record<string, Assessment>;
+    setDiagramId: (diagramId: string) => void;
+    setNodes: (payload: Node[] | ((nodes: Node[]) => Node[])) => void;
+    setEdges: (payload: Edge[] | ((edges: Edge[]) => Edge[])) => void;
+    setNodesAndEdges: (nodes: Node[], edges: Edge[]) => void;
+    addEdge: (edge: Edge) => void;
+    addNode: (node: Node) => void;
+    onNodesChange: OnNodesChange;
+    onEdgesChange: OnEdgesChange;
+    reset: () => void;
+    setInteractiveElementId: (elementId: string | null) => void;
+    getAssessment: (id: string) => Assessment | undefined;
+    setAssessments: (assessments: Record<string, Assessment> | ((prev: Record<string, Assessment>) => Record<string, Assessment>)) => void;
+    updateNodesFromYjs: () => void;
+    updateEdgesFromYjs: () => void;
+    updateAssessmentFromYjs: () => void;
+    addOrUpdateAssessment: (assessment: Assessment) => void;
+};
+export declare const createDiagramStore: (ydoc: Y.Doc) => UseBoundStore<StoreApi<DiagramStore>>;

package/dist/store/index.d.ts

@@ -0,0 +1,4 @@
+export { createDiagramStore } from './diagramStore';
+export { createMetadataStore } from './metadataStore';
+export { createPopoverStore } from './popoverStore';
+export { DiagramStoreContext, MetadataStoreContext, useDiagramStore, useMetadataStore, } from './context';

package/dist/store/metadataStore.d.ts

@@ -0,0 +1,20 @@
+import { StoreApi, UseBoundStore } from 'zustand';
+import { UMLDiagramType } from '../types';
+import { ApollonMode } from '../typings';
+import * as Y from "yjs";
+export type MetadataStore = {
+    diagramTitle: string;
+    diagramType: UMLDiagramType;
+    mode: ApollonMode;
+    readonly: boolean;
+    popupEnabled: boolean;
+    setPopupEnabled: (isPopupEnabled: boolean) => void;
+    setMode: (mode: ApollonMode) => void;
+    setReadonly: (readonly: boolean) => void;
+    updateDiagramTitle: (diagramTitle: string) => void;
+    updateDiagramType: (diagramType: UMLDiagramType) => void;
+    updateMetaData: (diagramTitle: string, diagramType: UMLDiagramType) => void;
+    updateMetaDataFromYjs: () => void;
+    reset: () => void;
+};
+export declare const createMetadataStore: (ydoc: Y.Doc) => UseBoundStore<StoreApi<MetadataStore>>;

package/dist/store/popoverStore.d.ts

@@ -0,0 +1,7 @@
+import { StoreApi, UseBoundStore } from 'zustand';
+export type PopoverStore = {
+    popoverElementId: string | null;
+    setPopOverElementId: (value: string | null) => void;
+    reset: () => void;
+};
+export declare const createPopoverStore: () => UseBoundStore<StoreApi<PopoverStore>>;

package/dist/store/yjsSync.d.ts

@@ -0,0 +1,19 @@
+import { StoreApi } from 'zustand';
+import { DiagramStore } from './diagramStore';
+import { MetadataStore } from './metadataStore';
+import * as Y from "yjs";
+type SendFunction = (data: Uint8Array) => void;
+export declare class YjsSyncClass {
+    private readonly stopYjsObserver;
+    private sendFunction;
+    private readonly ydoc;
+    private readonly diagramStore;
+    private readonly metadataStore;
+    constructor(ydoc: Y.Doc, diagramStore: StoreApi<DiagramStore>, metadataStore: StoreApi<MetadataStore>);
+    stopSync(): void;
+    setSendFunction: (sendFn: SendFunction) => void;
+    applyUpdate: (update: Uint8Array, transactionOrigin: string) => void;
+    handleReceivedData: (data: Uint8Array) => void;
+    private startYjsObserver;
+}
+export {};

package/dist/styles/theme.d.ts

@@ -0,0 +1,51 @@
+export type Styles = typeof apollonTheme;
+export type withThemeProps = {
+    theme: Styles;
+};
+export type Color = "primary" | "secondary";
+export type Size = "sm" | "md" | "lg";
+declare const apollonTheme: {
+    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;
+    };
+};
+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;
+    };
+};
+export {};

package/dist/sync/index.d.ts

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

package/dist/sync/utils.d.ts

@@ -0,0 +1,7 @@
+import { Node, NodeOrigin, Rect, Box } from '@xyflow/react';
+export declare const sortNodes: (a: Node, b: Node) => number;
+export declare const getId: (prefix?: string) => string;
+export declare const getNodePositionInsideParent: (node: Partial<Node>, groupNode: Node) => import('@xyflow/system').XYPosition;
+export declare const getBoundsOfBoxes: (box1: Box, box2: Box) => Box;
+export declare const getRelativeNodesBounds: (nodes: Node[], nodeOrigin?: NodeOrigin) => Rect;
+export declare function stringToColor(str: string): string;

package/dist/sync/ydoc.d.ts

@@ -0,0 +1,7 @@
+import { Assessment } from '../typings';
+import { Node, Edge } from '@xyflow/react';
+import * as Y from "yjs";
+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>;

package/dist/types/DiagramType.d.ts

@@ -0,0 +1,15 @@
+export type UMLDiagramType = keyof typeof UMLDiagramType;
+export declare const UMLDiagramType: {
+    readonly ClassDiagram: "ClassDiagram";
+    readonly ObjectDiagram: "ObjectDiagram";
+    readonly ActivityDiagram: "ActivityDiagram";
+    readonly UseCaseDiagram: "UseCaseDiagram";
+    readonly CommunicationDiagram: "CommunicationDiagram";
+    readonly ComponentDiagram: "ComponentDiagram";
+    readonly DeploymentDiagram: "DeploymentDiagram";
+    readonly PetriNet: "PetriNet";
+    readonly ReachabilityGraph: "ReachabilityGraph";
+    readonly SyntaxTree: "SyntaxTree";
+    readonly Flowchart: "Flowchart";
+    readonly BPMN: "BPMN";
+};

package/dist/types/index.d.ts

@@ -0,0 +1,3 @@
+export * from './nodes';
+export * from './locationPopover';
+export * from './DiagramType';

package/dist/types/locationPopover.d.ts

@@ -0,0 +1,5 @@
+import { PopoverOrigin } from '@mui/material';
+export type LocationPopover = {
+    anchorOrigin: PopoverOrigin;
+    transformOrigin: PopoverOrigin;
+};

package/dist/types/nodes/DropNodeDate.d.ts

@@ -0,0 +1,7 @@
+import { DiagramNodeType } from '../../nodes';
+export interface DropNodeData {
+    type: DiagramNodeType;
+    data: Record<string, unknown>;
+    offsetX: number;
+    offsetY: number;
+}

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

@@ -0,0 +1,14 @@
+import { ClassType } from './enums';
+export type ClassNodeElement = {
+    id: string;
+    name: string;
+};
+export type ClassNodeProps = {
+    methods: ClassNodeElement[];
+    attributes: ClassNodeElement[];
+    stereotype?: ClassType;
+    name: string;
+};
+export type PackageNodeProps = {
+    name: string;
+};

package/dist/types/nodes/enums/ClassType.d.ts

@@ -0,0 +1,6 @@
+export declare enum ClassType {
+    Abstract = "Abstract",
+    Interface = "Interface",
+    Enumeration = "Enumeration",
+    ObjectClass = "ObjectClass"
+}

package/dist/types/nodes/enums/index.d.ts

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

package/dist/types/nodes/index.d.ts

@@ -0,0 +1,3 @@
+export * from './enums';
+export * from './DropNodeDate';
+export * from './NodeProps';

package/dist/typings.d.ts

@@ -0,0 +1,120 @@
+import { DiagramEdgeType } from './edges/types';
+import { DiagramNodeType } from './nodes/types';
+import { UMLDiagramType } from './types/DiagramType';
+import { Styles } from './styles/theme';
+import { DeepPartial } from './utils';
+export { UMLDiagramType, type DiagramNodeType, type DiagramEdgeType };
+export { type Styles };
+export type Unsubscriber = () => void;
+export type Subscribers = {
+    [key: number]: Unsubscriber;
+};
+export type UMLModelElementType = DiagramNodeType | DiagramEdgeType;
+export declare enum Locale {
+    en = "en",
+    de = "de"
+}
+export declare enum ApollonMode {
+    Modelling = "Modelling",
+    Exporting = "Exporting",
+    Assessment = "Assessment"
+}
+export type ApollonNode = {
+    id: string;
+    width: number;
+    height: number;
+    type: DiagramNodeType;
+    position: {
+        x: number;
+        y: number;
+    };
+    data: {
+        [key: string]: unknown;
+    };
+    parentId?: string;
+    measured: {
+        width: number;
+        height: number;
+    };
+};
+export type ApollonEdge = {
+    id: string;
+    source: string;
+    target: string;
+    type: DiagramEdgeType;
+    sourceHandle: string;
+    targetHandle: string;
+    data: {
+        [key: string]: unknown;
+    };
+};
+export type Selection = {
+    nodes: {
+        [id: string]: boolean;
+    };
+    edges: {
+        [id: string]: boolean;
+    };
+};
+export type UMLModel = {
+    version: `4.${number}.${number}`;
+    id: string;
+    title: string;
+    type: UMLDiagramType;
+    nodes: ApollonNode[];
+    edges: ApollonEdge[];
+    assessments: {
+        [id: string]: Assessment;
+    };
+};
+export declare enum ApollonView {
+    Modelling = "Modelling",
+    Exporting = "Exporting",
+    Highlight = "Highlight"
+}
+export type ApollonOptions = {
+    type?: UMLDiagramType;
+    mode?: ApollonMode;
+    readonly?: boolean;
+    enablePopups?: boolean;
+    model?: UMLModel;
+    theme?: DeepPartial<Styles>;
+    locale?: Locale;
+    copyPasteToClipboard?: boolean;
+    colorEnabled?: boolean;
+    scale?: number;
+};
+export type FeedbackCorrectionStatus = {
+    description?: string;
+    status: "CORRECT" | "INCORRECT" | "NOT_VALIDATED";
+};
+export type Assessment = {
+    modelElementId: string;
+    elementType: string;
+    score: number;
+    feedback?: string;
+    dropInfo?: unknown;
+    label?: string;
+    labelColor?: string;
+    correctionStatus?: FeedbackCorrectionStatus;
+};
+export type ExportOptions = {
+    margin?: number | {
+        top?: number;
+        right?: number;
+        bottom?: number;
+        left?: number;
+    };
+    keepOriginalSize?: boolean;
+    include?: string[];
+    exclude?: string[];
+};
+export type SVG = {
+    svg: string;
+    clip: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+};

package/dist/utils/deepPartial.d.ts

@@ -0,0 +1,3 @@
+export type DeepPartial<T> = {
+    [K in keyof T]?: T[K] extends object ? DeepPartial<T[K]> : T[K];
+};

package/dist/utils/diagramTypeUtils.d.ts

@@ -0,0 +1,6 @@
+import { UMLDiagramType } from '../types';
+import { ApollonEdge, ApollonNode } from '../typings';
+import { Node, Edge } from '@xyflow/react';
+export declare const parseDiagramType: (value: unknown, fallback?: UMLDiagramType) => UMLDiagramType;
+export declare const mapFromReactFlowNodeToApollonNode: (node: Node) => ApollonNode;
+export declare const mapFromReactFlowEdgeToApollonEdge: (edge: Edge) => ApollonEdge;

package/dist/utils/edgeUtils.d.ts

@@ -0,0 +1,55 @@
+import { IPoint } from '../edges/Connection';
+import { Position, Rect, XYPosition } from '@xyflow/react';
+/**
+ * Adjusts the target coordinates based on the position and marker padding.
+ *
+ * @param targetX - X coordinate of the target
+ * @param targetY - Y coordinate of the target
+ * @param targetPosition - Position of the target (left, right, top, bottom)
+ * @param targetPadding - Padding to adjust the position
+ * @returns Adjusted targetX and targetY
+ */
+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.
+ *
+ * @param sourceX - X coordinate of the source
+ * @param sourceY - Y coordinate of the source
+ * @param sourcePosition - Position of the source (left, right, top, bottom)
+ * @param sourcePadding - Padding to adjust the position
+ * @returns Adjusted sourceX and sourceY
+ */
+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 calculateEdgeLabels: (x: number, y: number, Position: Position) => {
+    roleX: number;
+    roleY: number;
+    multiplicityX: number;
+    multiplicityY: number;
+};
+export interface EdgeMarkerStyles {
+    markerEnd?: string;
+    markerPadding?: number;
+    strokeDashArray?: string;
+}
+export declare function getEdgeMarkerStyles(edgeType: string): EdgeMarkerStyles;
+export declare function findClosestHandle(point: XYPosition, rect: Rect): string;
+export declare function simplifySvgPath(path: string, decimals?: number): 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[], markerPadding: number, targetPosition: "top" | "bottom" | "left" | "right"): string;
+export {};

package/dist/utils/exportUtils.d.ts

@@ -0,0 +1,3 @@
+import { ReactFlowInstance, Node, Edge, Rect } from '@xyflow/react';
+export declare const getSVG: (container: HTMLElement, bounds: Rect) => string;
+export declare function getDiagramBounds(reactFlow: ReactFlowInstance<Node, Edge>): Rect;

package/dist/utils/index.d.ts

@@ -0,0 +1,11 @@
+export declare const generateUUID: () => string;
+export * from './layoutUtils';
+export * from './textUtils';
+export * from './popoverUtils';
+export * from './quadrantUtils';
+export * from './nodeUtils';
+export * from './edgeUtils';
+export * from './exportUtils';
+export * from './diagramTypeUtils';
+export * from './storeUtils';
+export * from './deepPartial';

package/dist/utils/layoutUtils.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Calculates the minimum width required to fit the text with specified padding and margin.
+ * @param maxTextWidth - The maximum width of the text.
+ * @param padding - The inner padding for text.
+ * @returns The calculated minimum width.
+ */
+export declare const calculateMinWidth: (maxTextWidth: number, padding: number) => number;
+/**
+ * Calculates the minimum height based on header, attributes, methods, and margins.
+ * @param headerHeight - The height of the header section.
+ * @param attributesCount - Number of attributes.
+ * @param methodsCount - Number of methods.
+ * @param attributeHeight - Height per attribute.
+ * @param methodHeight - Height per method.
+ * @returns The calculated minimum height.
+ */
+export declare const calculateMinHeight: (headerHeight: number, attributesCount: number, methodsCount: number, attributeHeight: number, methodHeight: number) => number;

package/dist/utils/nodeUtils.d.ts

@@ -0,0 +1,4 @@
+import { XYPosition, Node } from '@xyflow/react';
+export declare const getPositionOnCanvas: (node: Node, allNodes: Node[]) => XYPosition;
+export declare const resizeAllParents: (node: Node, allNodes: Node[]) => Node[];
+export declare function sortNodesTopologically(nodes: Node[]): Node[];

package/dist/utils/popoverUtils.d.ts

@@ -0,0 +1,3 @@
+import { Quadrant } from '../enums';
+import { LocationPopover } from '../types';
+export declare const getPopoverOrigin: (quadrant: Quadrant) => LocationPopover;

package/dist/utils/quadrantUtils.d.ts

@@ -0,0 +1,3 @@
+import { Quadrant } from '../enums';
+import { XYPosition } from '@xyflow/react';
+export declare const getQuadrant: (target: XYPosition, reference: XYPosition) => Quadrant;

package/dist/utils/storeUtils.d.ts

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

package/dist/utils/textUtils.d.ts

@@ -0,0 +1,7 @@
+/**
+ * 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;

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@tumaet/apollon",
+  "version": "4.0.0-alpha.0",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview",
+    "lint": "eslint .",
+    "lint:fix": "eslint --fix ."
+  },
+  "dependencies": {
+    "@mui/icons-material": "6.3.1",
+    "@mui/material": "6.3.1",
+    "@types/node": "22.13.8",
+    "@xyflow/react": "12.3.6",
+    "uuid": "11.0.3",
+    "y-websocket": "2.1.0",
+    "zustand": "5.0.3",
+    "react": "18.3.1",
+    "react-dom": "18.3.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "9.17.0",
+    "@vitejs/plugin-react": "4.3.4",
+    "eslint": "9.17.0",
+    "eslint-plugin-react": "7.37.2",
+    "globals": "15.13.0",
+    "typescript": "5.7.2",
+    "typescript-eslint": "8.18.1",
+    "vite": "6.3.3",
+    "vite-plugin-dts": "4.3.0"
+  }
+}