visio-angular-viewer 0.7.4 → 0.8.0

package/dist/index.js

@@ -1,5 +1,7 @@
-import { eventKeys, mountViewer, propertyKeys } from "ooxml-ui/visio";
-import { Component, ElementRef, EventEmitter, Input, Output, inject, signal } from "@angular/core";
+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 * as officeTheme from "ooxml-ui/theme";
 export * from "ooxml-ui/visio";
 export * from "visio-core";
 //#region packages/bindings/src/common.ts
@@ -287,6 +289,7 @@ __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, "ribbonAddIns", void 0);
 __decorate([Input()], VisioViewerComponent.prototype, "events", void 0);
 __decorate([Output()], VisioViewerComponent.prototype, "documentLoad", void 0);
@@ -303,4 +306,242 @@ VisioViewerComponent = __decorate([Component({
 	template: ""
 })], VisioViewerComponent);
 //#endregion
-export { VisioViewerComponent };
+//#region packages/bindings/src/building-blocks.ts
+function buildingBlock(key) {
+	const value = Reflect.get(ui, key);
+	if (typeof value !== "function") throw new Error("Update ooxml-ui to use Visio building blocks.");
+	return value;
+}
+/** Framework-neutral ownership only; each adapter supplies its own reactive state. */
+function createBuildingBlockSession() {
+	const controller = new ViewerController(createWorkerParser());
+	let options = {};
+	let source;
+	let host = null;
+	let disposeCanvas;
+	let destroyed = false;
+	const stopEvents = controller.onEvent((name, detail) => {
+		if (name === "document-change") {
+			const change = detail;
+			options.onDocumentChange?.(change.document);
+			options.onDirtyChange?.(change.dirty);
+		} else if (name === "document-error") options.onDocumentError?.(detail);
+	});
+	const fit = () => {
+		if (host) buildingBlock("fitDiagramCanvas")(host, controller);
+	};
+	return {
+		controller,
+		mount(node) {
+			if (destroyed || node === host) return;
+			disposeCanvas?.();
+			disposeCanvas = void 0;
+			host = node;
+			if (node) disposeCanvas = buildingBlock("mountDiagramCanvas")(node, controller);
+		},
+		toolbar(locale = options.locale) {
+			return buildingBlock("diagramToolbarProps")(controller, fit, locale);
+		},
+		update(next) {
+			if (destroyed) return;
+			options = next;
+			controller.canEdit = next.canEdit !== false;
+			if (source === next.content) return;
+			source = next.content;
+			controller.cancelLoad();
+			if (!source) return;
+			const input = source;
+			controller.loadSource(async () => {
+				return input instanceof Blob ? new Uint8Array(await input.arrayBuffer()) : input;
+			}).catch(() => {});
+		},
+		destroy() {
+			if (destroyed) return;
+			destroyed = true;
+			disposeCanvas?.();
+			disposeCanvas = void 0;
+			host = null;
+			stopEvents();
+			controller.destroy();
+		}
+	};
+}
+/** Resolve the new optional-control theme API only when that control is mounted. */
+function prepareDiagramBlock(host, kind) {
+	if (!host) return;
+	const prepare = Reflect.get(officeTheme, "prepareOfficeUiBlock");
+	if (typeof prepare !== "function") throw new Error("Update ooxml-ui to theme Visio building blocks.");
+	prepare(host, kind, "visio");
+}
+//#endregion
+//#region packages/angular/src/building-blocks.ts
+var ViewerBuildingBlocks = class ViewerBuildingBlocks {
+	session = createBuildingBlockSession();
+	controller = this.session.controller;
+	current = signal(this.controller.state);
+	state = this.current.asReadonly();
+	locale = signal(void 0);
+	toolbarProps = computed(() => {
+		this.state();
+		return this.session.toolbar(this.locale());
+	});
+	loading = computed(() => this.state().loading);
+	error = computed(() => this.state().error ?? this.state().edit.error);
+	mode = computed(() => this.state().canEdit ? "edit" : "view");
+	documentChange = new EventEmitter();
+	dirtyChange = new EventEmitter();
+	documentError = new EventEmitter();
+	canvasProps = { mount: (node) => this.session.mount(node) };
+	inspectorProps = { controller: this.controller };
+	constructor() {
+		this.update({});
+		const stop = this.controller.subscribe((state) => this.current.set(state));
+		inject(DestroyRef).onDestroy(() => {
+			stop();
+			this.session.destroy();
+		});
+	}
+	update(options) {
+		this.locale.set(options.locale);
+		this.session.update({
+			...options,
+			onDocumentChange: (document) => {
+				this.documentChange.emit(document);
+				options.onDocumentChange?.(document);
+			},
+			onDirtyChange: (dirty) => {
+				this.dirtyChange.emit(dirty);
+				options.onDirtyChange?.(dirty);
+			},
+			onDocumentError: (error) => {
+				this.documentError.emit(error);
+				options.onDocumentError?.(error);
+			}
+		});
+	}
+};
+ViewerBuildingBlocks = __decorate([Injectable()], ViewerBuildingBlocks);
+/** Connect host signals to the scoped owner within an Angular injection context. */
+function createViewerBuildingBlocks(options = () => ({})) {
+	const blocks = inject(ViewerBuildingBlocks);
+	effect(() => {
+		const next = options();
+		untracked(() => blocks.update(next));
+	});
+	return blocks;
+}
+var ViewerBuildingBlocksComponent = class ViewerBuildingBlocksComponent {
+	blocks = inject(ViewerBuildingBlocks);
+	content;
+	canEdit = true;
+	locale;
+	documentChange = this.blocks.documentChange;
+	dirtyChange = this.blocks.dirtyChange;
+	documentError = this.blocks.documentError;
+	ngOnInit() {
+		this.ngOnChanges();
+	}
+	ngOnChanges() {
+		this.blocks.update({
+			content: this.content,
+			canEdit: this.canEdit,
+			locale: this.locale
+		});
+	}
+};
+__decorate([Input()], ViewerBuildingBlocksComponent.prototype, "content", void 0);
+__decorate([Input()], ViewerBuildingBlocksComponent.prototype, "canEdit", void 0);
+__decorate([Input()], ViewerBuildingBlocksComponent.prototype, "locale", void 0);
+__decorate([Output()], ViewerBuildingBlocksComponent.prototype, "documentChange", void 0);
+__decorate([Output()], ViewerBuildingBlocksComponent.prototype, "dirtyChange", void 0);
+__decorate([Output()], ViewerBuildingBlocksComponent.prototype, "documentError", void 0);
+ViewerBuildingBlocksComponent = __decorate([Component({
+	selector: "visio-building-blocks",
+	standalone: true,
+	template: "<ng-content />",
+	providers: [ViewerBuildingBlocks]
+})], ViewerBuildingBlocksComponent);
+var DiagramCanvasComponent = class DiagramCanvasComponent {
+	blocks = inject(ViewerBuildingBlocks);
+	host = inject(ElementRef);
+	ngAfterViewInit() {
+		this.blocks.canvasProps.mount(this.host.nativeElement);
+	}
+	ngOnDestroy() {
+		this.blocks.canvasProps.mount(null);
+	}
+};
+DiagramCanvasComponent = __decorate([Component({
+	selector: "visio-diagram-canvas",
+	standalone: true,
+	template: ""
+})], DiagramCanvasComponent);
+var ToolbarComponent = class ToolbarComponent {
+	host = inject(ElementRef);
+	ngAfterViewInit() {
+		prepareDiagramBlock(this.host.nativeElement.querySelector("div"), "toolbar");
+	}
+	blocks = inject(ViewerBuildingBlocks);
+};
+ToolbarComponent = __decorate([Component({
+	selector: "visio-diagram-toolbar",
+	standalone: true,
+	template: `<div role="toolbar">
+		<button
+			type="button"
+			[disabled]="!blocks.toolbarProps().canUndo"
+			(click)="blocks.toolbarProps().onUndo()"
+		>
+			{{ blocks.toolbarProps().labels['Undo'] }}</button
+		><button
+			type="button"
+			[disabled]="!blocks.toolbarProps().canRedo"
+			(click)="blocks.toolbarProps().onRedo()"
+		>
+			{{ blocks.toolbarProps().labels['Redo'] }}</button
+		><button type="button" (click)="blocks.toolbarProps().onFit()">
+			{{ blocks.toolbarProps().labels['Fit to Window'] }}
+		</button>
+	</div>`
+})], ToolbarComponent);
+var PageNavigationComponent = class PageNavigationComponent {
+	host = inject(ElementRef);
+	ngAfterViewInit() {
+		prepareDiagramBlock(this.host.nativeElement.querySelector("select"), "tabs");
+	}
+	blocks = inject(ViewerBuildingBlocks);
+	change(event) {
+		this.blocks.toolbarProps().onPageChange(Number(event.target.value));
+	}
+};
+PageNavigationComponent = __decorate([Component({
+	selector: "visio-page-navigation",
+	standalone: true,
+	template: `<select
+		[attr.aria-label]="blocks.toolbarProps().labels['Page']"
+		[value]="blocks.toolbarProps().pageIndex"
+		(change)="change($event)"
+	>
+		@for (page of blocks.toolbarProps().pages; track page.id; let index = $index) {
+			<option [value]="index">{{ page.name }}</option>
+		}
+	</select>`
+})], PageNavigationComponent);
+var InspectorComponent = class InspectorComponent {
+	blocks = inject(ViewerBuildingBlocks);
+	host = inject(ElementRef);
+	stop;
+	ngAfterViewInit() {
+		this.stop = buildingBlock("mountDiagramInspector")(this.host.nativeElement, this.blocks.controller);
+	}
+	ngOnDestroy() {
+		this.stop?.();
+	}
+};
+InspectorComponent = __decorate([Component({
+	selector: "visio-diagram-inspector",
+	standalone: true,
+	template: ""
+})], InspectorComponent);
+//#endregion
+export { DiagramCanvasComponent, InspectorComponent, PageNavigationComponent, ToolbarComponent, ViewerBuildingBlocks, ViewerBuildingBlocksComponent, VisioViewerComponent, createViewerBuildingBlocks };

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

@@ -0,0 +1,91 @@
+import { EventEmitter, type AfterViewInit, type OnChanges, type OnDestroy, type OnInit } from '@angular/core';
+import { type BuildingBlockOptions } from '../../bindings/src/building-blocks.js';
+export declare class ViewerBuildingBlocks {
+    private readonly session;
+    readonly controller: import("ooxml-ui/visio").ViewerController;
+    private readonly current;
+    readonly state: import("@angular/core").Signal<import("ooxml-ui/visio").ViewerState>;
+    private readonly locale;
+    readonly toolbarProps: import("@angular/core").Signal<{
+        labels: {
+            [k: string]: string;
+        };
+        canEdit: boolean;
+        pageIndex: number;
+        pages: {
+            id: string;
+            name: string;
+        }[];
+        zoom: number;
+        selection: readonly import("ooxml-ui/visio").VisioShapeSelection[];
+        canUndo: boolean;
+        canRedo: boolean;
+        canDuplicate: boolean;
+        canGroup: boolean;
+        canUngroup: boolean;
+        onPageChange: (index: number) => void;
+        onZoomChange: (zoom: number) => void;
+        onFit: () => void;
+        onUndo: () => Promise<void>;
+        onRedo: () => Promise<void>;
+        onDuplicate: () => Promise<void>;
+        onGroup: () => Promise<void>;
+        onUngroup: () => Promise<void>;
+        onTextChange: (pageId: string, shapeId: string, text: string) => Promise<void>;
+        onSearchChange: (query: string) => void;
+        onNextSearchResult: () => void;
+        onPreviousSearchResult: () => void;
+    }>;
+    readonly loading: import("@angular/core").Signal<boolean>;
+    readonly error: import("@angular/core").Signal<Error | null>;
+    readonly mode: import("@angular/core").Signal<"edit" | "view">;
+    readonly documentChange: EventEmitter<import("visio-core").VisioDocument>;
+    readonly dirtyChange: EventEmitter<boolean>;
+    readonly documentError: EventEmitter<Error>;
+    readonly canvasProps: {
+        mount: (node: HTMLElement | null) => void;
+    };
+    readonly inspectorProps: {
+        controller: import("ooxml-ui/visio").ViewerController;
+    };
+    constructor();
+    update(options: BuildingBlockOptions): void;
+}
+/** Connect host signals to the scoped owner within an Angular injection context. */
+export declare function createViewerBuildingBlocks(options?: () => BuildingBlockOptions): ViewerBuildingBlocks;
+export declare class ViewerBuildingBlocksComponent implements OnChanges, OnInit {
+    readonly blocks: ViewerBuildingBlocks;
+    content?: BuildingBlockOptions['content'];
+    canEdit: boolean;
+    locale?: string;
+    readonly documentChange: EventEmitter<import("visio-core").VisioDocument>;
+    readonly dirtyChange: EventEmitter<boolean>;
+    readonly documentError: EventEmitter<Error>;
+    ngOnInit(): void;
+    ngOnChanges(): void;
+}
+export declare class DiagramCanvasComponent implements AfterViewInit, OnDestroy {
+    readonly blocks: ViewerBuildingBlocks;
+    private readonly host;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+}
+export declare class ToolbarComponent implements AfterViewInit {
+    private readonly host;
+    ngAfterViewInit(): void;
+    readonly blocks: ViewerBuildingBlocks;
+}
+export declare class PageNavigationComponent implements AfterViewInit {
+    private readonly host;
+    ngAfterViewInit(): void;
+    readonly blocks: ViewerBuildingBlocks;
+    change(event: Event): void;
+}
+export declare class InspectorComponent implements AfterViewInit, OnDestroy {
+    readonly blocks: ViewerBuildingBlocks;
+    private readonly host;
+    private stop;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+}
+export type { BuildingBlockOptions, DiagramToolbarProps } from '../../bindings/src/building-blocks.js';

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

@@ -1,3 +1,4 @@
 export * from '../../../src/index.js';
 export * from 'visio-core';
 export * from '../../bindings/src/angular.js';
+export * from './building-blocks.js';

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

@@ -6,6 +6,7 @@ export declare class VisioViewerComponent implements AfterViewInit, OnChanges, O
     pageIndex?: number;
     zoom?: number;
     showToolbar?: boolean;
+    canEdit?: boolean;
     ribbonAddIns?: ViewerProperties['ribbonAddIns'];
     events?: ViewerCallbacks;
     documentLoad: EventEmitter<import("visio-core").VisioDocument>;

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

@@ -0,0 +1,53 @@
+import { ViewerController, type VsdxSource } from 'ooxml-ui/visio';
+import * as ui from 'ooxml-ui/visio';
+export interface BuildingBlockOptions {
+    content?: VsdxSource | undefined;
+    canEdit?: boolean | undefined;
+    locale?: string | undefined;
+    onDocumentChange?: ((document: NonNullable<ViewerController['state']['document']>) => void) | undefined;
+    onDirtyChange?: ((dirty: boolean) => void) | undefined;
+    onDocumentError?: ((error: Error) => void) | undefined;
+}
+type Api = Pick<typeof ui, 'mountDiagramCanvas' | 'fitDiagramCanvas' | 'mountDiagramInspector' | 'diagramToolbarProps'>;
+export declare function buildingBlock<K extends keyof Api>(key: K): Api[K];
+/** Framework-neutral ownership only; each adapter supplies its own reactive state. */
+export declare function createBuildingBlockSession(): {
+    controller: ViewerController;
+    mount(node: HTMLElement | null): void;
+    toolbar(locale?: string | undefined): {
+        labels: {
+            [k: string]: string;
+        };
+        canEdit: boolean;
+        pageIndex: number;
+        pages: {
+            id: string;
+            name: string;
+        }[];
+        zoom: number;
+        selection: readonly import("ooxml-core/visio/ui").VisioShapeSelection[];
+        canUndo: boolean;
+        canRedo: boolean;
+        canDuplicate: boolean;
+        canGroup: boolean;
+        canUngroup: boolean;
+        onPageChange: (index: number) => void;
+        onZoomChange: (zoom: number) => void;
+        onFit: () => void;
+        onUndo: () => Promise<void>;
+        onRedo: () => Promise<void>;
+        onDuplicate: () => Promise<void>;
+        onGroup: () => Promise<void>;
+        onUngroup: () => Promise<void>;
+        onTextChange: (pageId: string, shapeId: string, text: string) => Promise<void>;
+        onSearchChange: (query: string) => void;
+        onNextSearchResult: () => void;
+        onPreviousSearchResult: () => void;
+    };
+    update(next: BuildingBlockOptions): void;
+    destroy(): void;
+};
+export type BuildingBlockSession = ReturnType<typeof createBuildingBlockSession>;
+export type { DiagramToolbarProps, ViewerController } from 'ooxml-ui/visio';
+/** Resolve the new optional-control theme API only when that control is mounted. */
+export declare function prepareDiagramBlock(host: HTMLElement | null, kind: 'toolbar' | 'tabs'): void;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "visio-angular-viewer",
-	"version": "0.7.4",
+	"version": "0.8.0",
 	"description": "Local-first Visio viewer for angular",
 	"homepage": "https://christophervr.github.io/ooxml/visio/",
 	"bugs": {
@@ -31,11 +31,16 @@
 	},
 	"dependencies": {
 		"emf-converter": "4.21.0",
-		"ooxml-core": "^1.19.2",
-		"ooxml-ui": "^1.18.3",
-		"visio-core": "^0.4.1"
+		"ooxml-core": "^1.20.0",
+		"ooxml-ui": "^1.19.0",
+		"visio-core": "^0.5.0"
+	},
+	"devDependencies": {
+		"@angular/compiler": "^22.2.3",
+		"@angular/core": "^22.2.3",
+		"@angular/platform-browser": "^22.2.3"
 	},
 	"peerDependencies": {
-		"@angular/core": "^21.0.0"
+		"@angular/core": "^21.0.0 || ^22.0.0"
 	}
 }