visio-angular-viewer 1.0.0 → 1.1.0

package/README.md

@@ -52,22 +52,34 @@ 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) 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` and the `ViewerBuildingBlocks` class, with the standalone `DiagramCanvasComponent`, `ToolbarComponent`, `PageNavigationComponent`, `InspectorComponent` and `ShapesPaneComponent`. They expose signals
+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
@@ -77,7 +89,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/index.js

@@ -35,6 +35,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);
@@ -150,7 +151,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 +182,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,7 +197,8 @@ 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
 		};
 	}
 	options() {
@@ -292,8 +295,11 @@ __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 +310,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/angular/src/building-blocks.d.ts

@@ -8,7 +8,7 @@ export declare class ViewerBuildingBlocks {
     readonly state: import("@angular/core").Signal<import("ooxml-ui/visio").ViewerState>;
     private readonly latest;
     readonly toolbarProps: import("@angular/core").Signal<{
-        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/dist/types/packages/bindings/src/angular.d.ts

@@ -7,8 +7,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<{
@@ -23,6 +26,8 @@ export declare class VisioViewerComponent implements AfterViewInit, OnChanges, O
     selectionChange: EventEmitter<readonly 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;

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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "visio-angular-viewer",
-	"version": "1.0.0",
+	"version": "1.1.0",
 	"description": "Local-first Visio viewer for angular",
 	"homepage": "https://christophervr.github.io/ooxml/visio/",
 	"bugs": {
@@ -31,9 +31,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"
 	},
 	"devDependencies": {
 		"@angular/compiler": "^22.2.3",