visio-svelte-viewer 1.0.1 → 1.1.1

package/README.md

@@ -46,7 +46,7 @@ npm install visio-svelte-viewer
 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/VisioViewer.svelte

@@ -3,8 +3,8 @@
   import { readonly, writable } from 'svelte/store';
   import { mountFrameworkViewer, viewerHandle, viewerOptions, viewerStateSource, type ViewerState, type MountedViewer, type ViewerProps, type VsdxSource, type VisioEdit, type VisioShapeSelection, type SvgExportOptions, type CurrentPagePrintSnapshotOptions } from './runtime.js';
   type Props = ViewerProps & { class?: string; style?: string; 'aria-label'?: string };
-  let { document, pageIndex, zoom, showToolbar, canEdit, ribbonAddIns, collaboration, events, class: className, style, 'aria-label': ariaLabel }: Props = $props();
-  const options = $derived({ document, pageIndex, zoom, showToolbar, canEdit, ribbonAddIns, collaboration, events } satisfies Required<ViewerProps>);
+  let { document, pageIndex, zoom, showToolbar, canEdit, readOnly, ribbonAddIns, collaboration, customization, storage, events, class: className, style, 'aria-label': ariaLabel }: Props = $props();
+  const options = $derived({ document, pageIndex, zoom, showToolbar, canEdit, readOnly, ribbonAddIns, collaboration, customization, storage, events } satisfies Required<ViewerProps>);
   let binding: MountedViewer | undefined;
   const handle = viewerHandle(() => binding);
   // The component owns its state store, so subscribers made before mount still see updates.

package/dist/index.js

@@ -3,19 +3,53 @@ import { ViewerController, createWorkerParser, mountViewer, propertyKeys } from
 import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
 import { derived, get, readonly, writable } from "svelte/store";
+import { deferredHandle, pickProps } from "ooxml-ui/bindings";
 import { onDestroy } from "svelte";
 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
@@ -38,6 +72,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);
@@ -56,79 +91,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 = () => {
@@ -158,8 +121,11 @@ function VisioViewer($$anchor, $$props) {
 		zoom: $$props.zoom,
 		showToolbar: $$props.showToolbar,
 		canEdit: $$props.canEdit,
+		readOnly: $$props.readOnly,
 		ribbonAddIns: $$props.ribbonAddIns,
 		collaboration: $$props.collaboration,
+		customization: $$props.customization,
+		storage: $$props.storage,
 		events: $$props.events
 	}));
 	let binding;

package/dist/index.server.js

@@ -1,101 +1,68 @@
 import * as ui from "ooxml-ui/visio";
-import { ViewerController, createWorkerParser } from "ooxml-ui/visio";
+import { ViewerController, createWorkerParser, propertyKeys } from "ooxml-ui/visio";
 import * as $ from "svelte/internal/server";
 import { derived, get, readonly, writable } from "svelte/store";
+import { deferredHandle } from "ooxml-ui/bindings";
 import { onDestroy } from "svelte";
 import "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." };
 /** 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);
 }
 //#endregion
 //#region packages/bindings/src/VisioViewer.svelte
 function VisioViewer($$renderer, $$props) {
 	$$renderer.component(($$renderer) => {
-		let { document, pageIndex, zoom, showToolbar, canEdit, ribbonAddIns, collaboration, events, class: className, style, "aria-label": ariaLabel } = $$props;
+		let { document, pageIndex, zoom, showToolbar, canEdit, readOnly, ribbonAddIns, collaboration, customization, storage, events, class: className, style, "aria-label": ariaLabel } = $$props;
 		$.derived(() => ({
 			document,
 			pageIndex,
 			zoom,
 			showToolbar,
 			canEdit,
+			readOnly,
 			ribbonAddIns,
 			collaboration,
+			customization,
+			storage,
 			events
 		}));
 		let binding;

package/dist/runtime.js

@@ -1,19 +1,53 @@
 import * as ui from "ooxml-ui/visio";
 import { ViewerController, ViewerController as ViewerController$1, createWorkerParser, eventKeys, mountViewer, propertyKeys } from "ooxml-ui/visio";
+import { deferredHandle, pickProps } from "ooxml-ui/bindings";
 import * as officeTheme from "ooxml-ui/theme";
 import { onDestroy } from "svelte";
 import { derived, get, writable } from "svelte/store";
 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
@@ -36,6 +70,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);
@@ -54,79 +89,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 = () => {
@@ -151,7 +114,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);
 		}
@@ -366,4 +329,4 @@ function createViewerBuildingBlocks(options = {}) {
 	};
 }
 //#endregion
-export { TOOLBAR_GROUPS, ViewerController, buildingBlock, createBuildingBlockSession, createViewerBuildingBlocks, effectiveMode, eventKeys, mountFrameworkViewer, mountViewer, prepareDiagramBlock, propertyKeys, toolbarGroups, viewerHandle, viewerOptions, viewerStateSource, withEventEmitter };
+export { TOOLBAR_GROUPS, VIEWER_CONTRACT, VIEWER_HANDLE_OPTIONS, ViewerController, buildingBlock, createBuildingBlockSession, createViewerBuildingBlocks, effectiveMode, eventKeys, mountFrameworkViewer, mountViewer, prepareDiagramBlock, propertyKeys, toolbarGroups, viewerHandle, viewerOptions, viewerStateSource, withEventEmitter };

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-svelte-viewer",
-	"version": "1.0.1",
+	"version": "1.1.1",
 	"description": "Local-first Visio viewer for svelte",
 	"homepage": "https://christophervr.github.io/ooxml/visio/",
 	"bugs": {
@@ -38,8 +38,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"
 	},
 	"peerDependencies": {