@modern-ant/model-diagram 0.2.5

package/dist/rendering/diagram.js

@@ -0,0 +1,733 @@
+import { TypedEventEmitter } from "../events/emitter.js";
+import { JointJsAdapter } from "../jointjs/adapter.js";
+import { ElkLayoutEngine, } from "../layout/elk-layout.js";
+import { positionsEqual } from "./geometry.js";
+import { DiagramStore } from "./store.js";
+function copyPosition(position) {
+    return { x: position.x, y: position.y };
+}
+function copyWaypoints(waypoints) {
+    return waypoints.map(copyPosition);
+}
+function positionsRecord(layout) {
+    return Object.fromEntries(Object.entries(layout.classes ?? {}).map(([id, position]) => [
+        id,
+        copyPosition(position),
+    ]));
+}
+function positionRecordsEqual(first, second) {
+    const firstIds = Object.keys(first);
+    const secondIds = Object.keys(second);
+    return (firstIds.length === secondIds.length &&
+        firstIds.every((id) => {
+            const firstPosition = first[id];
+            const secondPosition = second[id];
+            return Boolean(firstPosition &&
+                secondPosition &&
+                positionsEqual(firstPosition, secondPosition));
+        }));
+}
+function waypointListsEqual(first, second) {
+    return (first.length === second.length &&
+        first.every((position, index) => {
+            const other = second[index];
+            return Boolean(other && positionsEqual(position, other));
+        }));
+}
+function changedWaypointIndex(before, after) {
+    const commonLength = Math.min(before.length, after.length);
+    for (let index = 0; index < commonLength; index += 1) {
+        const previous = before[index];
+        const next = after[index];
+        if (previous && next && !positionsEqual(previous, next))
+            return index;
+    }
+    return commonLength;
+}
+function selectionsEqual(first, second) {
+    if (first === null || second === null)
+        return first === second;
+    if (first.kind !== second.kind)
+        return false;
+    if (first.kind === "relationship-waypoint") {
+        return (second.kind === "relationship-waypoint" &&
+            first.relationshipId === second.relationshipId &&
+            first.index === second.index);
+    }
+    return second.kind !== "relationship-waypoint" && first.id === second.id;
+}
+export class ModelDiagram {
+    events = new TypedEventEmitter();
+    store;
+    renderer;
+    layoutEngine;
+    editable;
+    selection = null;
+    readyPromise = Promise.resolve();
+    destroyed = false;
+    layoutGeneration = 0;
+    undoStack = [];
+    redoStack = [];
+    elementDragState;
+    constructor(container, options) {
+        if (!(container instanceof HTMLElement)) {
+            throw new TypeError("createDiagram requires an HTMLElement container");
+        }
+        this.editable = options.editable ?? false;
+        this.store = new DiagramStore(options.model, options.layout);
+        this.layoutEngine = options.layoutEngine ?? new ElkLayoutEngine();
+        this.renderer = new JointJsAdapter(container, this.editable, {
+            onSelectionChanged: (selection) => this.changeSelection(selection),
+            onPositionDragStarted: (kind, id) => this.beginElementDrag(kind, id),
+            onPositionPreview: (kind, id, position) => this.previewElementPosition(kind, id, position),
+            onPositionCommitted: (kind, id, before, after) => this.commitElementPosition(kind, id, before, after),
+            onWaypointsPreview: (id, waypoints) => this.previewWaypoints(id, waypoints),
+            onWaypointsCommitted: (id, before, after) => this.commitWaypoints(id, before, after),
+            onWaypointAddRequested: (id, position, index) => this.addRelationshipWaypoint(id, position, index),
+            onDeleteSelectedWaypoint: () => this.deleteSelectedWaypoint(),
+        });
+        this.renderer.render(this.store);
+        const missingStoredPosition = options.model.classes.some(({ id }) => !options.layout?.classes?.[id]);
+        if ((options.autoLayout ?? true) && missingStoredPosition) {
+            this.readyPromise = this.performAutoLayout(options.layout ?? {}, {
+                preserveStoredPositions: true,
+            }, false).then(() => undefined);
+        }
+    }
+    on(type, listener) {
+        this.assertAlive();
+        return this.events.on(type, listener);
+    }
+    getModel() {
+        this.assertAlive();
+        return this.store.model;
+    }
+    setModel(model) {
+        this.assertAlive();
+        const previousLayout = this.store.getLayout();
+        const previousIds = new Set(this.store.model.classes.map(({ id }) => id));
+        this.store.setModel(model);
+        this.layoutGeneration += 1;
+        this.renderer.render(this.store);
+        this.resetHistory();
+        if (model.classes.some(({ id }) => !previousIds.has(id))) {
+            this.readyPromise = this.performAutoLayout(previousLayout, {
+                preserveStoredPositions: true,
+            }, false).then(() => undefined);
+        }
+    }
+    setLayout(layout) {
+        this.assertAlive();
+        this.store.setLayout(layout);
+        this.layoutGeneration += 1;
+        this.renderer.syncAllPositions(this.store);
+        this.resetHistory();
+        if (this.store.model.classes.some(({ id }) => !layout.classes?.[id])) {
+            this.readyPromise = this.performAutoLayout(layout, {
+                preserveStoredPositions: true,
+            }, false).then(() => undefined);
+        }
+    }
+    setEditable(editable) {
+        this.assertAlive();
+        const previous = this.historyAvailability();
+        this.editable = editable;
+        this.renderer.setEditable(editable);
+        const next = this.historyAvailability();
+        if (previous.canUndo !== next.canUndo ||
+            previous.canRedo !== next.canRedo) {
+            this.emitHistoryChanged();
+        }
+    }
+    getLayout() {
+        this.assertAlive();
+        return this.store.getLayout();
+    }
+    canUndo() {
+        this.assertAlive();
+        return this.historyAvailability().canUndo;
+    }
+    canRedo() {
+        this.assertAlive();
+        return this.historyAvailability().canRedo;
+    }
+    undo() {
+        this.assertEditable();
+        const entry = this.undoStack.pop();
+        if (!entry)
+            return;
+        this.redoStack.push(entry);
+        this.layoutGeneration += 1;
+        this.applyHistoryEntry(entry, false);
+        this.emitHistoryChanged();
+    }
+    redo() {
+        this.assertEditable();
+        const entry = this.redoStack.pop();
+        if (!entry)
+            return;
+        this.undoStack.push(entry);
+        this.layoutGeneration += 1;
+        this.applyHistoryEntry(entry, true);
+        this.emitHistoryChanged();
+    }
+    clearHistory() {
+        this.assertAlive();
+        this.resetHistory();
+    }
+    autoLayout(options = {}) {
+        this.assertAlive();
+        const operation = this.performAutoLayout(this.store.getLayout(), {
+            ...options,
+            preserveStoredPositions: options.preserveStoredPositions ?? false,
+        }, true);
+        this.readyPromise = operation.then(() => undefined);
+        return operation;
+    }
+    whenReady() {
+        return this.readyPromise;
+    }
+    updateRelationship(relationshipId, changes) {
+        this.assertEditable();
+        const previous = this.store.getRelationship(relationshipId);
+        this.store.updateRelationship(relationshipId, changes);
+        const next = this.store.getRelationship(relationshipId);
+        const before = {};
+        const after = {};
+        for (const field of ["label"]) {
+            if (!Object.hasOwn(changes, field) || previous[field] === next[field]) {
+                continue;
+            }
+            before[field] = previous[field];
+            after[field] = next[field];
+        }
+        if (Object.keys(after).length === 0)
+            return;
+        this.recordHistory({
+            kind: "relationship-properties",
+            relationshipId,
+            before,
+            after,
+        });
+        this.renderer.syncRelationship(relationshipId, this.store);
+        this.emit("relationship-changed", {
+            type: "relationship-changed",
+            relationshipId,
+            changes: { ...after },
+        });
+        this.emitHistoryChanged();
+    }
+    addRelationshipWaypoint(relationshipId, position, index) {
+        this.assertEditable();
+        const before = this.store.getWaypoints(relationshipId);
+        const insertedIndex = this.store.addWaypoint(relationshipId, position, index);
+        const after = this.store.getWaypoints(relationshipId);
+        this.recordHistory({
+            kind: "relationship-waypoints",
+            operation: "add",
+            relationshipId,
+            index: insertedIndex,
+            before,
+            after,
+        });
+        this.renderer.syncWaypoints(relationshipId, this.store);
+        this.changeSelection({
+            kind: "relationship-waypoint",
+            relationshipId,
+            index: insertedIndex,
+        });
+        this.emit("relationship-waypoint-added", {
+            type: "relationship-waypoint-added",
+            relationshipId,
+            index: insertedIndex,
+            ...position,
+        });
+        this.emitHistoryChanged();
+    }
+    moveRelationshipWaypoint(relationshipId, index, position) {
+        this.assertEditable();
+        const before = this.store.getWaypoints(relationshipId);
+        this.store.moveWaypoint(relationshipId, index, position);
+        const after = this.store.getWaypoints(relationshipId);
+        const recorded = !waypointListsEqual(before, after);
+        if (recorded) {
+            this.recordHistory({
+                kind: "relationship-waypoints",
+                operation: "move",
+                relationshipId,
+                index,
+                before,
+                after,
+            });
+        }
+        this.renderer.syncWaypoints(relationshipId, this.store);
+        this.changeSelection({
+            kind: "relationship-waypoint",
+            relationshipId,
+            index,
+        });
+        this.emit("relationship-waypoint-changed", {
+            type: "relationship-waypoint-changed",
+            relationshipId,
+            index,
+            ...position,
+        });
+        if (recorded)
+            this.emitHistoryChanged();
+    }
+    removeRelationshipWaypoint(relationshipId, index) {
+        this.assertEditable();
+        const before = this.store.getWaypoints(relationshipId);
+        this.store.removeWaypoint(relationshipId, index);
+        const after = this.store.getWaypoints(relationshipId);
+        this.recordHistory({
+            kind: "relationship-waypoints",
+            operation: "remove",
+            relationshipId,
+            index,
+            before,
+            after,
+        });
+        this.renderer.syncWaypoints(relationshipId, this.store);
+        this.changeSelection({ kind: "relationship", id: relationshipId });
+        this.emit("relationship-waypoint-removed", {
+            type: "relationship-waypoint-removed",
+            relationshipId,
+            index,
+        });
+        this.emitHistoryChanged();
+    }
+    resetRelationshipRoute(relationshipId) {
+        this.assertEditable();
+        const before = this.store.getWaypoints(relationshipId);
+        this.store.resetRoute(relationshipId);
+        const after = this.store.getWaypoints(relationshipId);
+        const recorded = !waypointListsEqual(before, after);
+        if (recorded) {
+            this.recordHistory({
+                kind: "relationship-waypoints",
+                operation: "reset",
+                relationshipId,
+                before,
+                after,
+            });
+        }
+        this.renderer.syncWaypoints(relationshipId, this.store);
+        this.changeSelection({ kind: "relationship", id: relationshipId });
+        this.emit("relationship-route-reset", {
+            type: "relationship-route-reset",
+            relationshipId,
+        });
+        if (recorded)
+            this.emitHistoryChanged();
+    }
+    fitToContent(padding) {
+        this.assertAlive();
+        this.renderer.fitToContent(padding);
+    }
+    setZoom(scale) {
+        this.assertAlive();
+        this.renderer.setZoom(scale);
+    }
+    zoomIn() {
+        this.setZoom(this.renderer.getZoom() * 1.2);
+    }
+    zoomOut() {
+        this.setZoom(this.renderer.getZoom() / 1.2);
+    }
+    panBy(dx, dy) {
+        this.assertAlive();
+        this.renderer.panBy(dx, dy);
+    }
+    destroy() {
+        if (this.destroyed)
+            return;
+        this.destroyed = true;
+        this.renderer.destroy();
+        this.undoStack.length = 0;
+        this.redoStack.length = 0;
+        this.elementDragState = undefined;
+        this.events.clear();
+        this.selection = null;
+    }
+    async performAutoLayout(storedLayout, options, addToHistory) {
+        const generation = ++this.layoutGeneration;
+        const before = positionsRecord(this.store.getLayout());
+        const model = this.store.model;
+        const positions = await this.layoutEngine.layout(model, storedLayout, options);
+        if (this.destroyed || generation !== this.layoutGeneration) {
+            return this.store.getLayout();
+        }
+        this.store.applyClassPositions(positions);
+        this.renderer.syncAllPositions(this.store);
+        const layout = this.store.getLayout();
+        const after = positionsRecord(layout);
+        const recorded = addToHistory && !positionRecordsEqual(before, after);
+        if (recorded) {
+            this.recordHistory({
+                kind: "layout-transaction",
+                before,
+                after,
+            });
+        }
+        this.emit("auto-layout-completed", {
+            type: "auto-layout-completed",
+            layout,
+        });
+        if (recorded)
+            this.emitHistoryChanged();
+        return layout;
+    }
+    beginElementDrag(kind, id) {
+        this.elementDragState = {
+            kind,
+            id,
+            ...(kind === "note"
+                ? { noteWasManual: this.store.hasManualNotePosition(id) }
+                : {}),
+        };
+    }
+    previewElementPosition(kind, id, position) {
+        if (!this.editable)
+            return;
+        if (kind === "class") {
+            this.layoutGeneration += 1;
+            this.store.setClassPosition(id, position);
+            if (!this.store.hasManualNotePosition(id)) {
+                this.renderer.syncNotePosition(id, this.store);
+            }
+            this.emit("class-position-preview", {
+                type: "class-position-preview",
+                classId: id,
+                ...position,
+            });
+        }
+        else {
+            this.store.setNotePosition(id, position);
+            this.emit("note-position-preview", {
+                type: "note-position-preview",
+                classId: id,
+                ...position,
+            });
+        }
+    }
+    commitElementPosition(kind, id, before, position) {
+        if (!this.editable)
+            return;
+        const dragState = this.elementDragState;
+        this.elementDragState = undefined;
+        if (kind === "class") {
+            this.store.setClassPosition(id, position);
+            this.recordHistory({
+                kind: "class-position",
+                classId: id,
+                before: copyPosition(before),
+                after: copyPosition(position),
+            });
+            this.emit("class-position-changed", {
+                type: "class-position-changed",
+                classId: id,
+                ...position,
+            });
+        }
+        else {
+            this.store.setNotePosition(id, position);
+            this.recordHistory({
+                kind: "note-position",
+                classId: id,
+                before: copyPosition(before),
+                after: copyPosition(position),
+                beforeWasManual: dragState?.kind === "note" && dragState.id === id
+                    ? Boolean(dragState.noteWasManual)
+                    : true,
+            });
+            this.emit("note-position-changed", {
+                type: "note-position-changed",
+                classId: id,
+                ...position,
+            });
+        }
+        this.emitHistoryChanged();
+    }
+    previewWaypoints(relationshipId, waypoints) {
+        if (!this.editable)
+            return;
+        const before = this.store.getWaypoints(relationshipId);
+        const index = changedWaypointIndex(before, waypoints);
+        this.store.replaceWaypoints(relationshipId, waypoints);
+        if (waypoints.length < before.length) {
+            this.changeSelection({ kind: "relationship", id: relationshipId });
+            this.emit("relationship-waypoint-removed", {
+                type: "relationship-waypoint-removed",
+                relationshipId,
+                index,
+            });
+            return;
+        }
+        if (waypoints.length > before.length) {
+            const added = waypoints[index];
+            if (!added)
+                return;
+            this.changeSelection({
+                kind: "relationship-waypoint",
+                relationshipId,
+                index,
+            });
+            this.emit("relationship-waypoint-added", {
+                type: "relationship-waypoint-added",
+                relationshipId,
+                index,
+                ...added,
+            });
+            return;
+        }
+        const changed = waypoints[index];
+        if (!changed)
+            return;
+        this.changeSelection({
+            kind: "relationship-waypoint",
+            relationshipId,
+            index,
+        });
+        this.emit("relationship-waypoint-preview", {
+            type: "relationship-waypoint-preview",
+            relationshipId,
+            index,
+            ...changed,
+        });
+    }
+    commitWaypoints(relationshipId, before, after) {
+        if (!this.editable || before.length !== after.length)
+            return;
+        this.store.replaceWaypoints(relationshipId, after);
+        const recorded = !waypointListsEqual(before, after);
+        if (recorded) {
+            this.recordHistory({
+                kind: "relationship-waypoints",
+                operation: "move",
+                relationshipId,
+                index: changedWaypointIndex(before, after),
+                before: copyWaypoints(before),
+                after: copyWaypoints(after),
+            });
+        }
+        for (let index = 0; index < after.length; index += 1) {
+            const previous = before[index];
+            const position = after[index];
+            if (!previous || !position || positionsEqual(previous, position))
+                continue;
+            this.changeSelection({
+                kind: "relationship-waypoint",
+                relationshipId,
+                index,
+            });
+            this.emit("relationship-waypoint-changed", {
+                type: "relationship-waypoint-changed",
+                relationshipId,
+                index,
+                ...position,
+            });
+        }
+        if (recorded)
+            this.emitHistoryChanged();
+    }
+    recordHistory(entry) {
+        this.undoStack.push(entry);
+        this.redoStack.length = 0;
+    }
+    resetHistory() {
+        if (this.undoStack.length === 0 && this.redoStack.length === 0)
+            return;
+        this.undoStack.length = 0;
+        this.redoStack.length = 0;
+        this.emitHistoryChanged();
+    }
+    historyAvailability() {
+        return {
+            canUndo: this.editable && this.undoStack.length > 0,
+            canRedo: this.editable && this.redoStack.length > 0,
+        };
+    }
+    emitHistoryChanged() {
+        this.emit("history-changed", {
+            type: "history-changed",
+            ...this.historyAvailability(),
+        });
+    }
+    applyHistoryEntry(entry, forward) {
+        switch (entry.kind) {
+            case "class-position": {
+                const position = forward ? entry.after : entry.before;
+                this.store.setClassPosition(entry.classId, position);
+                this.renderer.syncClassPosition(entry.classId, this.store);
+                if (!this.store.hasManualNotePosition(entry.classId)) {
+                    this.renderer.syncNotePosition(entry.classId, this.store);
+                }
+                this.emit("class-position-changed", {
+                    type: "class-position-changed",
+                    classId: entry.classId,
+                    ...position,
+                });
+                return;
+            }
+            case "note-position": {
+                const position = forward ? entry.after : entry.before;
+                if (forward || entry.beforeWasManual) {
+                    this.store.setNotePosition(entry.classId, position);
+                }
+                else {
+                    this.store.clearNotePosition(entry.classId);
+                }
+                this.renderer.syncNotePosition(entry.classId, this.store);
+                this.emit("note-position-changed", {
+                    type: "note-position-changed",
+                    classId: entry.classId,
+                    ...this.store.getNotePosition(entry.classId),
+                });
+                return;
+            }
+            case "relationship-waypoints": {
+                const waypoints = forward ? entry.after : entry.before;
+                this.store.replaceWaypoints(entry.relationshipId, waypoints);
+                this.renderer.syncWaypoints(entry.relationshipId, this.store);
+                this.ensureValidWaypointSelection(entry.relationshipId, waypoints.length);
+                this.emitWaypointTransition(entry, forward);
+                return;
+            }
+            case "relationship-properties": {
+                const changes = forward ? entry.after : entry.before;
+                this.store.updateRelationship(entry.relationshipId, changes);
+                this.renderer.syncRelationship(entry.relationshipId, this.store);
+                this.emit("relationship-changed", {
+                    type: "relationship-changed",
+                    relationshipId: entry.relationshipId,
+                    changes: { ...changes },
+                });
+                return;
+            }
+            case "layout-transaction": {
+                const positions = forward ? entry.after : entry.before;
+                this.store.applyClassPositions(new Map(Object.entries(positions)));
+                this.renderer.syncAllPositions(this.store);
+                this.emit("auto-layout-completed", {
+                    type: "auto-layout-completed",
+                    layout: this.store.getLayout(),
+                });
+            }
+        }
+    }
+    emitWaypointTransition(entry, forward) {
+        const before = forward ? entry.before : entry.after;
+        const after = forward ? entry.after : entry.before;
+        const index = entry.index ?? changedWaypointIndex(before, after);
+        if (entry.operation === "add") {
+            if (forward) {
+                const position = after[index];
+                if (position) {
+                    this.emit("relationship-waypoint-added", {
+                        type: "relationship-waypoint-added",
+                        relationshipId: entry.relationshipId,
+                        index,
+                        ...position,
+                    });
+                }
+            }
+            else {
+                this.emit("relationship-waypoint-removed", {
+                    type: "relationship-waypoint-removed",
+                    relationshipId: entry.relationshipId,
+                    index,
+                });
+            }
+            return;
+        }
+        if (entry.operation === "remove") {
+            if (forward) {
+                this.emit("relationship-waypoint-removed", {
+                    type: "relationship-waypoint-removed",
+                    relationshipId: entry.relationshipId,
+                    index,
+                });
+            }
+            else {
+                const position = after[index];
+                if (position) {
+                    this.emit("relationship-waypoint-added", {
+                        type: "relationship-waypoint-added",
+                        relationshipId: entry.relationshipId,
+                        index,
+                        ...position,
+                    });
+                }
+            }
+            return;
+        }
+        if (entry.operation === "reset") {
+            if (forward) {
+                this.emit("relationship-route-reset", {
+                    type: "relationship-route-reset",
+                    relationshipId: entry.relationshipId,
+                });
+            }
+            else {
+                for (const [restoredIndex, position] of after.entries()) {
+                    this.emit("relationship-waypoint-added", {
+                        type: "relationship-waypoint-added",
+                        relationshipId: entry.relationshipId,
+                        index: restoredIndex,
+                        ...position,
+                    });
+                }
+            }
+            return;
+        }
+        for (let changedIndex = 0; changedIndex < after.length; changedIndex += 1) {
+            const previous = before[changedIndex];
+            const position = after[changedIndex];
+            if (!previous || !position || positionsEqual(previous, position))
+                continue;
+            this.emit("relationship-waypoint-changed", {
+                type: "relationship-waypoint-changed",
+                relationshipId: entry.relationshipId,
+                index: changedIndex,
+                ...position,
+            });
+        }
+    }
+    ensureValidWaypointSelection(relationshipId, waypointCount) {
+        if (this.selection?.kind === "relationship-waypoint" &&
+            this.selection.relationshipId === relationshipId &&
+            this.selection.index >= waypointCount) {
+            this.changeSelection({ kind: "relationship", id: relationshipId });
+        }
+    }
+    deleteSelectedWaypoint() {
+        if (this.selection?.kind !== "relationship-waypoint")
+            return;
+        this.removeRelationshipWaypoint(this.selection.relationshipId, this.selection.index);
+    }
+    changeSelection(selection) {
+        if (selectionsEqual(this.selection, selection))
+            return;
+        this.selection = selection;
+        this.renderer.setSelection(selection);
+        this.emit("selection-changed", { type: "selection-changed", selection });
+    }
+    emit(type, event) {
+        this.events.emit(type, event);
+    }
+    assertAlive() {
+        if (this.destroyed)
+            throw new Error("Diagram has been destroyed");
+    }
+    assertEditable() {
+        this.assertAlive();
+        if (!this.editable) {
+            throw new Error("Diagram is read-only");
+        }
+    }
+}
+export function createDiagram(container, options) {
+    return new ModelDiagram(container, options);
+}
+//# sourceMappingURL=diagram.js.map