@tumaet/apollon 4.2.23 → 4.4.0

package/dist/store/diagramStore.d.ts

@@ -18,6 +18,7 @@ export type DiagramStore = {
     canUndo: boolean;
     canRedo: boolean;
     undoManager: Y.UndoManager | null;
+    previewMode: boolean;
     setDiagramId: (diagramId: string) => void;
     setNodes: (payload: Node[] | ((nodes: Node[]) => Node[])) => void;
     setEdges: (payload: Edge[] | ((edges: Edge[]) => Edge[])) => void;
@@ -42,5 +43,12 @@ export type DiagramStore = {
     getInteractiveForSerialization: () => InteractiveElements | undefined;
     setInteractive: (interactive: InteractiveElements | undefined) => void;
     isElementInteractive: (elementId: string) => boolean;
+    /**
+     * Toggle the preview overlay. When entering, the Yjs doc is left
+     * untouched by store mutators and observers. When exiting, the local
+     * Zustand state is rebuilt from the (peer-augmented) Yjs maps so the
+     * canvas catches up to everything that arrived during preview.
+     */
+    setPreviewMode: (active: boolean) => void;
 };
 export declare const createDiagramStore: (ydoc: Y.Doc) => UseBoundStore<StoreApi<DiagramStore>>;

package/dist/store/metadataStore.d.ts

@@ -25,4 +25,4 @@ export type MetadataStore = {
     reset: () => void;
     setDebug: (debug: boolean) => void;
 };
-export declare const createMetadataStore: (ydoc: Y.Doc) => UseBoundStore<StoreApi<MetadataStore>>;
+export declare const createMetadataStore: (ydoc: Y.Doc, isPreviewMode?: () => boolean) => UseBoundStore<StoreApi<MetadataStore>>;

package/dist/sync/headless.d.ts

@@ -0,0 +1,16 @@
+import { YjsSyncClass } from './yjsSyncClass';
+import * as Y from "yjs";
+/**
+ * Construct a `YjsSyncClass` against minimal stub stores. Intended for
+ * tests that exercise the wire protocol (sync/awareness handshake,
+ * incremental updates, reconnect behaviour) without dragging the React
+ * editor / React-Flow / zustand-with-middleware setup into the harness.
+ *
+ * Stores expose only the methods the sync class actually invokes. The
+ * Yjs observers will call them, but their bodies are no-ops because the
+ * test asserts directly against the `Y.Doc` that's returned.
+ */
+export declare function createHeadlessSync(ydoc?: Y.Doc): {
+    ydoc: Y.Doc;
+    sync: YjsSyncClass;
+};

package/dist/sync/yjsSyncClass.d.ts

@@ -1,10 +1,13 @@
-import { StoreApi } from 'zustand';
 import { DiagramStore } from '../store/diagramStore';
 import { MetadataStore } from '../store/metadataStore';
+import { CollaborationState, CollaborationUser, CollaboratorInfo } from '../typings';
+import { StoreApi } from 'zustand';
 import * as Y from "yjs";
 export declare enum MessageType {
     YjsSYNC = 0,
-    YjsUpdate = 1
+    YjsUpdate = 1,
+    AwarenessSync = 2,
+    AwarenessUpdate = 3
 }
 export type SendBroadcastMessage = (base64data: string) => void;
 export declare class YjsSyncClass {
@@ -13,9 +16,34 @@ export declare class YjsSyncClass {
     private readonly ydoc;
     private readonly diagramStore;
     private readonly metadataStore;
+    private readonly awareness;
     constructor(ydoc: Y.Doc, diagramStore: StoreApi<DiagramStore>, metadataStore: StoreApi<MetadataStore>);
     stopSync(): void;
+    /**
+     * Push the entire local Yjs document as a single `YjsUpdate`. Callers should
+     * invoke this after a (re)connect so peers absorb any edits made while we
+     * were disconnected — those updates fire while `readyState !== OPEN`, are
+     * silently dropped by the send callback, and never replayed otherwise.
+     * Yjs CRDTs converge on merge, so peers that already have these ops just
+     * no-op.
+     */
+    broadcastFullState: () => void;
     setSendBroadcastMessage: (sendFn: SendBroadcastMessage) => void;
+    setLocalAwarenessUser: (user: CollaborationUser) => void;
+    setLocalAwarenessCursor: (cursor: {
+        x: number;
+        y: number;
+    } | null) => void;
+    setLocalAwarenessSelectedElement: (selectedElementId: string | null) => void;
+    setLocalAwarenessState: (state: Partial<CollaborationState>) => void;
+    subscribeToAwarenessChanges: (callback: (states: Map<number, CollaborationState>) => void) => () => void;
+    getCollaborators: () => CollaboratorInfo[];
+    subscribeToCollaboratorChanges: (callback: (collaborators: CollaboratorInfo[]) => void) => () => void;
+    getLocalAwarenessClientId: () => number;
+    private static narrowState;
+    private getTypedStates;
+    private computeParticipantSignature;
+    private sendFramedMessage;
     private applyUpdate;
     handleReceivedData: (base64Data: string) => void;
     private startYjsObserver;

package/dist/typings.d.ts

@@ -10,6 +10,29 @@ export type Subscribers = {
     [key: number]: Unsubscriber;
 };
 export type UMLModelElementType = DiagramNodeType | DiagramEdgeType;
+export type CollaborationUser = {
+    name: string;
+    color: string;
+    id?: string;
+    imageUrl?: string;
+};
+export type CollaborationCursor = {
+    x: number;
+    y: number;
+};
+export type CollaborationState = {
+    user?: CollaborationUser;
+    cursor?: CollaborationCursor | null;
+    selectedElementId?: string | null;
+};
+export type CollaboratorInfo = {
+    id: string;
+    name: string;
+    color: string;
+    imageUrl?: string;
+    clientIds: number[];
+    isLocal: boolean;
+};
 export declare enum Locale {
     en = "en",
     de = "de"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tumaet/apollon",
-  "version": "4.2.23",
+  "version": "4.4.0",
   "description": "An embeddable UML modeling editor for React. 13 diagram types, SVG/PNG/PDF/JSON export, optional real-time collaboration via Yjs.",
   "keywords": [
     "apollon",
@@ -63,6 +63,9 @@
   },
   "dependencies": {
     "@chenglou/pretext": "0.0.6",
+    "@dnd-kit/core": "6.3.1",
+    "@dnd-kit/sortable": "10.0.0",
+    "@dnd-kit/utilities": "3.2.2",
     "@emotion/react": "11.11.1",
     "@emotion/styled": "11.11.0",
     "@mui/material": "6.4.2",
@@ -70,6 +73,7 @@
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "uuid": "11.0.3",
+    "y-protocols": "1.0.6",
     "yjs": "13.6.20",
     "zustand": "5.0.3"
   },