visio-angular-viewer 1.0.1 → 1.1.1

package/README.md

@@ -53,7 +53,7 @@ export class DiagramComponent {
 The shared properties are `document` (a parsed `VisioDocument`, or `null` to clear),
 `pageIndex` (zero-based), `zoom` (`1` means 100%), `showToolbar`, `ribbonAddIns` (tabs the host adds
 after Help), `canEdit` (editing permission; the viewer is editable unless you pass `false`),
-`collaboration` (shares the open drawing in a room while set; `null` leaves it) and `events`.
+`readOnly` (a restriction of its own), `storage` and `customization` (host-owned save and open), `collaboration` (shares the open drawing in a room while set; `null` leaves it) and `events`.
 The callback map uses `document-load`, `document-change` (`{ document, dirty, kind }` with kind
 `edit`, `undo`, `redo`, `remote` or `save`), `document-error`, `page-change`, `zoom-change`,
 `shape-select`, `selection-change`, `office-ribbon-add-in` and `collaboration-change`. File loading uses the imperative

package/dist/index.js

@@ -1,18 +1,52 @@
 import * as ui from "ooxml-ui/visio";
 import { ViewerController, createWorkerParser, eventKeys, mountViewer, propertyKeys } from "ooxml-ui/visio";
 import { Component, DestroyRef, ElementRef, EventEmitter, Injectable, Input, Output, computed, effect, inject, signal, untracked } from "@angular/core";
+import { deferredHandle, installHandle, pickProps } from "ooxml-ui/bindings";
 import * as officeTheme from "ooxml-ui/theme";
 export * from "ooxml-ui/visio";
 export * from "visio-core";
 //#region packages/bindings/src/common.ts
+/**
+* The Visio binding contract. `mountViewer` (ooxml-ui/visio) forwards properties and events itself,
+* so every property is `manual` here: `mountFrameworkViewer` sends them as revision-aware patches.
+* Events reach native outputs through the `events` callback map (`withEventEmitter`).
+*/
+var VIEWER_CONTRACT = {
+	props: Object.fromEntries(propertyKeys.map((key) => [key, { forward: "manual" }])),
+	events: {},
+	handle: {
+		element: "get",
+		controller: "get",
+		load: "async",
+		createBlankDrawing: "async",
+		applyEdits: "async",
+		selectShapes: "call",
+		selectAll: "call",
+		clearSelection: "call",
+		duplicateSelection: "async",
+		copySelection: "async",
+		cutSelection: "async",
+		pasteSelection: "async",
+		replacePlainText: "async",
+		undo: "async",
+		redo: "async",
+		cancelEdit: "call",
+		exportVsdx: "call",
+		fit: "call",
+		setLayerVisibility: "call",
+		resetLayerVisibility: "call",
+		exportSvg: "call",
+		createPrintSnapshot: "call"
+	}
+};
+/** The error every lazy handle member throws before mount and after unmount. */
+var VIEWER_HANDLE_OPTIONS = { message: "The viewer is not mounted." };
 /** One mapping for every property and event, shared by every framework adapter. */
 function viewerOptions(props) {
-	const result = { events: props.events ?? {} };
-	for (const key of propertyKeys) {
-		const value = props[key];
-		if (value !== void 0) Object.assign(result, { [key]: value });
-	}
-	return result;
+	return {
+		events: props.events ?? {},
+		...pickProps(VIEWER_CONTRACT, props, true)
+	};
 }
 /**
 * Native props are snapshots, while the browser binding accepts explicit patches. Forward only
@@ -35,6 +69,7 @@ function mountFrameworkViewer(container, initial) {
 				const touchedByOlderCall = [...activePatches].some((active) => key in active);
 				if (snapshot[key] !== void 0 && (snapshot[key] !== previous[key] || touchedByOlderCall)) Object.assign(patch, { [key]: snapshot[key] });
 			}
+			if (snapshot.readOnly === void 0 && previous.readOnly !== void 0) Object.assign(patch, { readOnly: false });
 			activePatches.add(patch);
 			try {
 				binding.update(patch);
@@ -53,79 +88,7 @@ function mountFrameworkViewer(container, initial) {
 }
 /** Lazy imperative methods reject both before mount and after unmount. */
 function viewerHandle(current) {
-	const requireViewer = () => {
-		const binding = current();
-		if (!binding) throw new Error("The viewer is not mounted.");
-		return binding;
-	};
-	return {
-		get element() {
-			return requireViewer().element;
-		},
-		get controller() {
-			return requireViewer().controller;
-		},
-		async load(source) {
-			await requireViewer().load(source);
-		},
-		async createBlankDrawing(options) {
-			await requireViewer().createBlankDrawing(options);
-		},
-		async applyEdits(edits) {
-			await requireViewer().applyEdits(edits);
-		},
-		selectShapes(shapes) {
-			requireViewer().selectShapes(shapes);
-		},
-		selectAll() {
-			requireViewer().selectAll();
-		},
-		clearSelection() {
-			requireViewer().clearSelection();
-		},
-		async replacePlainText(pageId, shapeId, text) {
-			await requireViewer().replacePlainText(pageId, shapeId, text);
-		},
-		async duplicateSelection() {
-			await requireViewer().duplicateSelection();
-		},
-		async copySelection() {
-			await requireViewer().copySelection();
-		},
-		async cutSelection() {
-			await requireViewer().cutSelection();
-		},
-		async pasteSelection() {
-			await requireViewer().pasteSelection();
-		},
-		async undo() {
-			await requireViewer().undo();
-		},
-		async redo() {
-			await requireViewer().redo();
-		},
-		cancelEdit() {
-			requireViewer().cancelEdit();
-		},
-		exportVsdx() {
-			return requireViewer().exportVsdx();
-		},
-		fit() {
-			requireViewer().fit();
-		},
-		setLayerVisibility(pageId, layerId, visible) {
-			requireViewer().setLayerVisibility(pageId, layerId, visible);
-		},
-		resetLayerVisibility(pageId) {
-			requireViewer().resetLayerVisibility(pageId);
-		},
-		exportSvg(options) {
-			return requireViewer().exportSvg(options);
-		},
-		createPrintSnapshot(options) {
-			return requireViewer().createPrintSnapshot(options);
-		}
-	};
+	return deferredHandle(VIEWER_CONTRACT.handle, current, VIEWER_HANDLE_OPTIONS);
 }
 function viewerStateSource(current) {
 	const controller = () => {
@@ -150,7 +113,7 @@ function withEventEmitter(props, emit) {
 	const callbacks = {};
 	for (const name of eventKeys) Object.assign(callbacks, { [name]: (value) => {
 		try {
-			(props.events?.[name])?.(value);
+			return (props.events?.[name])?.(value);
 		} finally {
 			emit(name, value);
 		}
@@ -181,6 +144,7 @@ var VisioViewerComponent = class VisioViewerComponent {
 		this.selectionChange = new EventEmitter();
 		this.ribbonAddIn = new EventEmitter();
 		this.collaborationChange = new EventEmitter();
+		this.fileCommand = new EventEmitter();
 		this.host = inject(ElementRef);
 		this.handle = viewerHandle(() => this.binding);
 		this.stopState = () => {};
@@ -195,9 +159,13 @@ var VisioViewerComponent = class VisioViewerComponent {
 			"shape-select": this.shapeSelect,
 			"selection-change": this.selectionChange,
 			"office-ribbon-add-in": this.ribbonAddIn,
-			"collaboration-change": this.collaborationChange
+			"collaboration-change": this.collaborationChange,
+			"file-command": this.fileCommand
 		};
 	}
+	static {
+		installHandle(this.prototype, VIEWER_CONTRACT.handle, (self) => self.binding, VIEWER_HANDLE_OPTIONS);
+	}
 	options() {
 		return withEventEmitter(this, (name, value) => {
 			this.outputs[name].emit(value);
@@ -220,80 +188,17 @@ var VisioViewerComponent = class VisioViewerComponent {
 		this.binding = void 0;
 		mounted?.destroy();
 	}
-	get element() {
-		return this.handle.element;
-	}
-	get controller() {
-		return this.handle.controller;
-	}
-	load(source) {
-		return this.handle.load(source);
-	}
-	createBlankDrawing(options) {
-		return this.handle.createBlankDrawing(options);
-	}
-	applyEdits(edits) {
-		return this.handle.applyEdits(edits);
-	}
-	selectShapes(shapes) {
-		this.handle.selectShapes(shapes);
-	}
-	selectAll() {
-		this.handle.selectAll();
-	}
-	clearSelection() {
-		this.handle.clearSelection();
-	}
-	duplicateSelection() {
-		return this.handle.duplicateSelection();
-	}
-	copySelection() {
-		return this.handle.copySelection();
-	}
-	cutSelection() {
-		return this.handle.cutSelection();
-	}
-	pasteSelection() {
-		return this.handle.pasteSelection();
-	}
-	replacePlainText(pageId, shapeId, text) {
-		return this.handle.replacePlainText(pageId, shapeId, text);
-	}
-	undo() {
-		return this.handle.undo();
-	}
-	redo() {
-		return this.handle.redo();
-	}
-	cancelEdit() {
-		this.handle.cancelEdit();
-	}
-	exportVsdx() {
-		return this.handle.exportVsdx();
-	}
-	fit() {
-		this.handle.fit();
-	}
-	setLayerVisibility(pageId, layerId, visible) {
-		this.handle.setLayerVisibility(pageId, layerId, visible);
-	}
-	resetLayerVisibility(pageId) {
-		this.handle.resetLayerVisibility(pageId);
-	}
-	exportSvg(options) {
-		return this.handle.exportSvg(options);
-	}
-	createPrintSnapshot(options) {
-		return this.handle.createPrintSnapshot(options);
-	}
 };
 __decorate([Input()], VisioViewerComponent.prototype, "document", void 0);
 __decorate([Input()], VisioViewerComponent.prototype, "pageIndex", void 0);
 __decorate([Input()], VisioViewerComponent.prototype, "zoom", void 0);
 __decorate([Input()], VisioViewerComponent.prototype, "showToolbar", void 0);
 __decorate([Input()], VisioViewerComponent.prototype, "canEdit", void 0);
+__decorate([Input()], VisioViewerComponent.prototype, "readOnly", void 0);
 __decorate([Input()], VisioViewerComponent.prototype, "ribbonAddIns", void 0);
 __decorate([Input()], VisioViewerComponent.prototype, "collaboration", void 0);
+__decorate([Input()], VisioViewerComponent.prototype, "storage", void 0);
+__decorate([Input()], VisioViewerComponent.prototype, "customization", void 0);
 __decorate([Input()], VisioViewerComponent.prototype, "events", void 0);
 __decorate([Output()], VisioViewerComponent.prototype, "documentLoad", void 0);
 __decorate([Output()], VisioViewerComponent.prototype, "documentChange", void 0);
@@ -304,6 +209,7 @@ __decorate([Output()], VisioViewerComponent.prototype, "shapeSelect", void 0);
 __decorate([Output()], VisioViewerComponent.prototype, "selectionChange", void 0);
 __decorate([Output()], VisioViewerComponent.prototype, "ribbonAddIn", void 0);
 __decorate([Output()], VisioViewerComponent.prototype, "collaborationChange", void 0);
+__decorate([Output()], VisioViewerComponent.prototype, "fileCommand", void 0);
 VisioViewerComponent = __decorate([Component({
 	selector: "visio-viewer-host",
 	standalone: true,

package/dist/types/packages/bindings/src/angular.d.ts

@@ -1,5 +1,8 @@
 import { EventEmitter, type AfterViewInit, type OnChanges, type OnDestroy } from '@angular/core';
-import { type ViewerCallbacks, type ViewerProperties, type ViewerState, type VsdxSource, type VisioEdit, type CreateVsdxOptions, type VisioShapeSelection, type SvgExportOptions, type CurrentPagePrintSnapshotOptions } from './common.js';
+import { type ViewerCallbacks, type ViewerHandle, type ViewerProperties, type ViewerState } from './common.js';
+/** The handle members, defined on the prototype from `VIEWER_CONTRACT.handle`. */
+export interface VisioViewerComponent extends ViewerHandle {
+}
 /** Angular input/output and lifecycle wiring over the one shared browser binding. */
 export declare class VisioViewerComponent implements AfterViewInit, OnChanges, OnDestroy {
     document?: ViewerProperties['document'];
@@ -7,8 +10,11 @@ export declare class VisioViewerComponent implements AfterViewInit, OnChanges, O
     zoom?: number;
     showToolbar?: boolean;
     canEdit?: boolean;
+    readOnly?: boolean;
     ribbonAddIns?: ViewerProperties['ribbonAddIns'];
     collaboration?: ViewerProperties['collaboration'];
+    storage?: ViewerProperties['storage'];
+    customization?: ViewerProperties['customization'];
     events?: ViewerCallbacks;
     documentLoad: EventEmitter<import("visio-core").VisioDocument>;
     documentChange: EventEmitter<{
@@ -19,10 +25,12 @@ export declare class VisioViewerComponent implements AfterViewInit, OnChanges, O
     documentError: EventEmitter<Error>;
     pageChange: EventEmitter<number>;
     zoomChange: EventEmitter<number>;
-    shapeSelect: EventEmitter<VisioShapeSelection | null>;
-    selectionChange: EventEmitter<readonly VisioShapeSelection[]>;
+    shapeSelect: EventEmitter<import("ooxml-ui/visio").VisioShapeSelection | null>;
+    selectionChange: EventEmitter<readonly import("ooxml-ui/visio").VisioShapeSelection[]>;
     ribbonAddIn: EventEmitter<import("ooxml-core/ribbon").RibbonAddInCommandDetail>;
     collaborationChange: EventEmitter<import("ooxml-core/collab").CollaborationState>;
+    /** Notification only: to cancel a File command, return false from `events['file-command']`. */
+    fileCommand: EventEmitter<import("ooxml-core/embedding").FileCommandDetail<import("ooxml-core/embedding").VisioFileCommand>>;
     private readonly host;
     private binding;
     private readonly handle;
@@ -35,27 +43,5 @@ export declare class VisioViewerComponent implements AfterViewInit, OnChanges, O
     ngAfterViewInit(): void;
     ngOnChanges(): void;
     ngOnDestroy(): void;
-    get element(): import("ooxml-ui/visio").VisioViewerElement;
-    get controller(): import("ooxml-ui/visio").ViewerController;
-    load(source: VsdxSource): Promise<void>;
-    createBlankDrawing(options?: CreateVsdxOptions): Promise<void>;
-    applyEdits(edits: readonly VisioEdit[]): Promise<void>;
-    selectShapes(shapes: readonly VisioShapeSelection[]): void;
-    selectAll(): void;
-    clearSelection(): void;
-    duplicateSelection(): Promise<void>;
-    copySelection(): Promise<void>;
-    cutSelection(): Promise<void>;
-    pasteSelection(): Promise<void>;
-    replacePlainText(pageId: string, shapeId: string, text: string): Promise<void>;
-    undo(): Promise<void>;
-    redo(): Promise<void>;
-    cancelEdit(): void;
-    exportVsdx(): import("ooxml-ui/visio").VsdxExportResult;
-    fit(): void;
-    setLayerVisibility(pageId: string, layerId: string, visible: boolean | null): void;
-    resetLayerVisibility(pageId?: string): void;
-    exportSvg(options?: SvgExportOptions): import("ooxml-ui/visio").SvgExportResult;
-    createPrintSnapshot(options?: CurrentPagePrintSnapshotOptions): import("ooxml-ui/visio").PrintSnapshot;
 }
 export type { ViewerState, ViewerHandle, ViewerCallbacks, ViewerOptions, ViewerEvents, VisioShapeSelection, CreateVsdxOptions, ViewerEditState, VsdxExportResult, RibbonAddInCommand, RibbonAddInGroup, RibbonAddInTab, } from './common.js';

package/dist/types/packages/bindings/src/common.d.ts

@@ -1,5 +1,6 @@
 import { mountViewer, type MountedViewer } from 'ooxml-ui/visio';
 import type { ViewerState } from 'ooxml-ui/visio';
+import { type BindingContract } from 'ooxml-ui/bindings';
 import { eventKeys, propertyKeys, type ViewerCallbacks, type ViewerOptions, type ViewerProperties } from 'ooxml-ui/visio';
 /** Framework props permit undefined; omitted values preserve the shared binding's state. */
 export type ViewerProps = {
@@ -8,6 +9,16 @@ export type ViewerProps = {
     events?: ViewerCallbacks | undefined;
 };
 export type ViewerHandle = Pick<MountedViewer, 'element' | 'controller' | 'load' | 'createBlankDrawing' | 'applyEdits' | 'selectShapes' | 'selectAll' | 'clearSelection' | 'duplicateSelection' | 'copySelection' | 'cutSelection' | 'pasteSelection' | 'replacePlainText' | 'undo' | 'redo' | 'cancelEdit' | 'exportVsdx' | 'fit' | 'setLayerVisibility' | 'resetLayerVisibility' | 'exportSvg' | 'createPrintSnapshot'>;
+/**
+ * The Visio binding contract. `mountViewer` (ooxml-ui/visio) forwards properties and events itself,
+ * so every property is `manual` here: `mountFrameworkViewer` sends them as revision-aware patches.
+ * Events reach native outputs through the `events` callback map (`withEventEmitter`).
+ */
+export declare const VIEWER_CONTRACT: BindingContract<never, ViewerProperties, ViewerHandle>;
+/** The error every lazy handle member throws before mount and after unmount. */
+export declare const VIEWER_HANDLE_OPTIONS: {
+    readonly message: "The viewer is not mounted.";
+};
 /** One mapping for every property and event, shared by every framework adapter. */
 export declare function viewerOptions(props: ViewerProps): ViewerOptions;
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "visio-angular-viewer",
-	"version": "1.0.1",
+	"version": "1.1.1",
 	"description": "Local-first Visio viewer for angular",
 	"homepage": "https://christophervr.github.io/ooxml/visio/",
 	"bugs": {
@@ -31,8 +31,8 @@
 	},
 	"dependencies": {
 		"emf-converter": "4.21.0",
-		"ooxml-core": "^1.23.0",
-		"ooxml-ui": "^1.22.0",
+		"ooxml-core": "^1.25.0",
+		"ooxml-ui": "^1.26.0",
 		"visio-core": "^1.0.1"
 	},
 	"devDependencies": {