visio-svelte-viewer 1.0.0 → 1.1.0

package/README.md

@@ -45,22 +45,34 @@ 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) and `events`.
-The callback map uses `document-load`, `document-change`, `document-error`,
-`page-change`, `zoom-change` and `shape-select`. File loading uses the imperative
+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`.
+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
 `load(File | Blob | Uint8Array | ArrayBuffer)` handle; `document` is not a file URL.
 Provide a height for the viewer host. Mount and load files in the browser.
 
 The handle supports `fit()`, `replacePlainText(pageId, shapeId, text)`,
 `applyEdits(edits)`, `undo()`, `redo()` and `exportVsdx()`.
 `exportVsdx()` returns `{ bytes, dirty, diagnostics }`; saving or downloading those
-bytes is the application's responsibility. Load original bytes through `load()`
+bytes is the application's responsibility, and `handle.controller.markClean()` declares them saved.
+Sharing state is on the handle's element: `collaborationState`, `reconnectCollaboration()` and
+`stopCollaboration()`. Load original bytes through `load()`
 to enable source-backed editing and export. Handles are usable after mount.
 
 Every viewer package includes the same browser UI and re-exports the
 `visio-core` document API. Parsing and editing belong to `ooxml-core/visio`;
 framework bindings only manage lifecycle, properties and events.
 
+## Compose your own UI
+
+To build a custom diagram UI instead of mounting the whole viewer, use the building blocks: `createViewerBuildingBlocks`, `DiagramCanvas`, `Toolbar`, `PageNavigation`, `Inspector` and `ShapesPane`. The factory returns readable stores
+for the flat `toolbarProps` (page, zoom, selection, search, enabled flags and callbacks), `mode`,
+`loading`/`error` and `markClean()`. Hosts pass `canEdit` (read-only until `true`) and optional
+`onOpenSettings`/`onOpenShareDialog`/`onOpenPageSetup`/`onOpenFile` callbacks for dialogs they own.
+See [composable building blocks](https://github.com/ChristopherVR/ooxml/blob/main/viewers/visio/docs/building-blocks.md).
+
 ## Limitations
 
 Rendering and editing are beta features. Supported text and geometry edits are
@@ -70,7 +82,7 @@ Files stay in the browser unless your application sends them elsewhere.
 
 ## Documentation
 
-[Viewer guide](https://christophervr.github.io/ooxml/visio/docs/) |
+[Viewer guide](https://christophervr.github.io/ooxml/visio/) |
 [Demo](https://christophervr.github.io/ooxml/visio/demo/) |
 [Source](https://github.com/ChristopherVR/ooxml/tree/main/viewers/visio)
 

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

@@ -38,6 +38,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);
@@ -158,8 +159,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

@@ -87,15 +87,18 @@ function viewerHandle(current) {
 //#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

@@ -36,6 +36,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);
@@ -151,7 +152,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);
 		}

package/dist/types/packages/bindings/src/building-blocks.d.ts

@@ -26,7 +26,7 @@ export declare function createBuildingBlockSession(initial?: BuildingBlockOption
     mount(node: HTMLElement | null): void;
     /** Flat control props; pass the framework's latest options so callbacks stay current. */
     toolbar(latest?: BuildingBlockOptions): {
-        labels: Readonly<Record<"Arc" | "Copy" | "Cut" | "Delete" | "Duplicate" | "Ellipse" | "Find" | "Fit to Window" | "Freeform" | "Group" | "Line" | "Next Result" | "Open" | "Options" | "Page" | "Page Setup" | "Paste" | "Pencil" | "Pointer Tool" | "Previous Result" | "Rectangle" | "Redo" | "Shapes" | "Share" | "Undo" | "Ungroup" | "Zoom In" | "Zoom Out", string>>;
+        labels: Readonly<Record<"Arc" | "Connector" | "Copy" | "Cut" | "Delete" | "Duplicate" | "Ellipse" | "Find" | "Fit to Window" | "Freeform" | "Group" | "Line" | "Next Result" | "Open" | "Options" | "Page" | "Page Setup" | "Paste" | "Pencil" | "Pointer Tool" | "Previous Result" | "Rectangle" | "Redo" | "Shapes" | "Share" | "Text" | "Undo" | "Ungroup" | "Zoom In" | "Zoom Out", string>>;
         mode: ui.DiagramMode;
         canEdit: boolean;
         pageIndex: number;

package/dist/types/packages/svelte/src/building-blocks.d.ts

@@ -7,7 +7,7 @@ export declare function createViewerBuildingBlocks(options?: BuildingBlockOption
         subscribe: (this: void, run: import("svelte/store").Subscriber<import("ooxml-ui/visio").ViewerState>, invalidate?: () => void) => import("svelte/store").Unsubscriber;
     };
     toolbarProps: Readable<{
-        labels: Readonly<Record<"Arc" | "Copy" | "Cut" | "Delete" | "Duplicate" | "Ellipse" | "Find" | "Fit to Window" | "Freeform" | "Group" | "Line" | "Next Result" | "Open" | "Options" | "Page" | "Page Setup" | "Paste" | "Pencil" | "Pointer Tool" | "Previous Result" | "Rectangle" | "Redo" | "Shapes" | "Share" | "Undo" | "Ungroup" | "Zoom In" | "Zoom Out", string>>;
+        labels: Readonly<Record<"Arc" | "Connector" | "Copy" | "Cut" | "Delete" | "Duplicate" | "Ellipse" | "Find" | "Fit to Window" | "Freeform" | "Group" | "Line" | "Next Result" | "Open" | "Options" | "Page" | "Page Setup" | "Paste" | "Pencil" | "Pointer Tool" | "Previous Result" | "Rectangle" | "Redo" | "Shapes" | "Share" | "Text" | "Undo" | "Ungroup" | "Zoom In" | "Zoom Out", string>>;
         mode: import("ooxml-ui/visio").DiagramMode;
         canEdit: boolean;
         pageIndex: number;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "visio-svelte-viewer",
-	"version": "1.0.0",
+	"version": "1.1.0",
 	"description": "Local-first Visio viewer for svelte",
 	"homepage": "https://christophervr.github.io/ooxml/visio/",
 	"bugs": {
@@ -38,9 +38,9 @@
 	},
 	"dependencies": {
 		"emf-converter": "4.21.0",
-		"ooxml-core": "^1.22.0",
-		"ooxml-ui": "^1.21.0",
-		"visio-core": "^1.0.0"
+		"ooxml-core": "^1.24.0",
+		"ooxml-ui": "^1.23.0",
+		"visio-core": "^1.0.1"
 	},
 	"peerDependencies": {
 		"svelte": "^5.0.0"