visio-solid-viewer 0.7.4 → 0.8.0

package/dist/index.js

@@ -1,6 +1,8 @@
-import { mountViewer, propertyKeys } from "ooxml-ui/visio";
-import { className, effect, setAttribute, style, template, use } from "solid-js/web";
-import { createEffect, createSignal, onCleanup, onMount } from "solid-js";
+import * as ui from "ooxml-ui/visio";
+import { ViewerController, createWorkerParser, mountViewer, propertyKeys } from "ooxml-ui/visio";
+import { addEventListener, className, createComponent, delegateEvents, effect, insert, setAttribute, style, template, use } from "solid-js/web";
+import { For, createEffect, createMemo, createSignal, onCleanup, onMount } from "solid-js";
+import * as officeTheme from "ooxml-ui/theme";
 export * from "ooxml-ui/visio";
 export * from "visio-core";
 //#region packages/bindings/src/common.ts
@@ -145,7 +147,7 @@ function viewerStateSource(current) {
 }
 //#endregion
 //#region packages/bindings/src/solid.tsx
-var _tmpl$ = /*#__PURE__*/ template(`<div>`);
+var _tmpl$$1 = /*#__PURE__*/ template(`<div>`);
 /** Native Solid host and ownership; all document work remains in the shared binding. */
 function VisioViewer(props) {
 	let host;
@@ -181,7 +183,7 @@ function VisioViewer(props) {
 		}
 	});
 	return (() => {
-		var _el$ = _tmpl$();
+		var _el$ = _tmpl$$1();
 		var _ref$ = host;
 		typeof _ref$ === "function" ? use(_ref$, _el$) : host = _el$;
 		effect((_p$) => {
@@ -213,4 +215,174 @@ function createVisioViewerState(handle) {
 	return state;
 }
 //#endregion
-export { VisioViewer, createVisioViewerState };
+//#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/solid/src/building-blocks.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<div>`);
+var _tmpl$2 = /*#__PURE__*/ template(`<div role=toolbar><button type=button></button><button type=button></button><button type=button>`);
+var _tmpl$3 = /*#__PURE__*/ template(`<select>`);
+var _tmpl$4 = /*#__PURE__*/ template(`<option>`);
+function createViewerBuildingBlocks(options = () => ({})) {
+	const session = createBuildingBlockSession();
+	const [state, setState] = createSignal(session.controller.state);
+	const stop = session.controller.subscribe((value) => setState(() => value));
+	createEffect(() => session.update(options()));
+	onCleanup(() => {
+		stop();
+		session.destroy();
+	});
+	const toolbarProps = createMemo(() => {
+		state();
+		return session.toolbar(options().locale);
+	});
+	return {
+		controller: session.controller,
+		state,
+		canvasProps: { mount: session.mount },
+		toolbarProps,
+		inspectorProps: { controller: session.controller },
+		loading: () => state().loading,
+		error: () => state().error ?? state().edit.error,
+		mode: () => state().canEdit ? "edit" : "view"
+	};
+}
+function DiagramCanvas(props) {
+	let host;
+	createEffect(() => {
+		const mount = props.mount;
+		mount(host);
+		onCleanup(() => mount(null));
+	});
+	return (() => {
+		var _el$ = _tmpl$();
+		var _ref$ = host;
+		typeof _ref$ === "function" ? use(_ref$, _el$) : host = _el$;
+		effect(() => className(_el$, props.class));
+		return _el$;
+	})();
+}
+function Toolbar(props) {
+	return (() => {
+		var _el$2 = _tmpl$2(), _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling, _el$5 = _el$4.nextSibling;
+		use((host) => prepareDiagramBlock(host, "toolbar"), _el$2);
+		_el$3.$$click = () => void props.onUndo();
+		insert(_el$3, () => props.labels.Undo);
+		_el$4.$$click = () => void props.onRedo();
+		insert(_el$4, () => props.labels.Redo);
+		addEventListener(_el$5, "click", props.onFit, true);
+		insert(_el$5, () => props.labels["Fit to Window"]);
+		effect((_p$) => {
+			var _v$ = !props.canUndo, _v$2 = !props.canRedo;
+			_v$ !== _p$.e && (_el$3.disabled = _p$.e = _v$);
+			_v$2 !== _p$.t && (_el$4.disabled = _p$.t = _v$2);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0
+		});
+		return _el$2;
+	})();
+}
+function PageNavigation(props) {
+	return (() => {
+		var _el$6 = _tmpl$3();
+		_el$6.addEventListener("change", (event) => props.onPageChange(Number(event.currentTarget.value)));
+		use((host) => prepareDiagramBlock(host, "tabs"), _el$6);
+		insert(_el$6, createComponent(For, {
+			get each() {
+				return props.pages;
+			},
+			children: (page, index) => (() => {
+				var _el$7 = _tmpl$4();
+				insert(_el$7, () => page.name);
+				effect(() => _el$7.value = index());
+				return _el$7;
+			})()
+		}));
+		effect(() => setAttribute(_el$6, "aria-label", props.labels.Page));
+		effect(() => _el$6.value = props.pageIndex);
+		return _el$6;
+	})();
+}
+function Inspector(props) {
+	let host;
+	createEffect(() => {
+		const stop = buildingBlock("mountDiagramInspector")(host, props.controller);
+		onCleanup(stop);
+	});
+	return (() => {
+		var _el$8 = _tmpl$();
+		var _ref$2 = host;
+		typeof _ref$2 === "function" ? use(_ref$2, _el$8) : host = _el$8;
+		return _el$8;
+	})();
+}
+delegateEvents(["click"]);
+//#endregion
+export { DiagramCanvas, Inspector, PageNavigation, Toolbar, VisioViewer, createViewerBuildingBlocks, createVisioViewerState };

package/dist/index.server.js

@@ -1,6 +1,8 @@
-import { mountViewer, propertyKeys } from "ooxml-ui/visio";
-import { escape, ssr, ssrAttribute, ssrHydrationKey, ssrStyle } from "solid-js/web";
-import { createEffect, createSignal, onCleanup, onMount } from "solid-js";
+import * as ui from "ooxml-ui/visio";
+import { ViewerController, createWorkerParser, mountViewer, propertyKeys } from "ooxml-ui/visio";
+import { createComponent, escape, ssr, ssrAttribute, ssrHydrationKey, ssrStyle } from "solid-js/web";
+import { For, createEffect, createMemo, createSignal, onCleanup, onMount } from "solid-js";
+import "ooxml-ui/theme";
 export * from "ooxml-ui/visio";
 export * from "visio-core";
 //#region packages/bindings/src/common.ts
@@ -145,7 +147,7 @@ function viewerStateSource(current) {
 }
 //#endregion
 //#region packages/bindings/src/solid.tsx
-var _tmpl$ = [
+var _tmpl$$1 = [
 	"<div",
 	" style=\"",
 	"\"",
@@ -185,7 +187,7 @@ function VisioViewer(props) {
 			mounted?.destroy();
 		}
 	});
-	return ssr(_tmpl$, ssrHydrationKey() + ssrAttribute("class", escape(props.class, true), false), ssrStyle(props.style), ssrAttribute("aria-label", escape(props["aria-label"], true), false));
+	return ssr(_tmpl$$1, ssrHydrationKey() + ssrAttribute("class", escape(props.class, true), false), ssrStyle(props.style), ssrAttribute("aria-label", escape(props["aria-label"], true), false));
 }
 /**
 * Reactive viewer state as a Solid accessor for a handle accessor (for example a signal set by
@@ -202,4 +204,139 @@ function createVisioViewerState(handle) {
 	return state;
 }
 //#endregion
-export { VisioViewer, createVisioViewerState };
+//#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();
+		}
+	};
+}
+//#endregion
+//#region packages/solid/src/building-blocks.tsx
+var _tmpl$ = ["<div", "></div>"];
+var _tmpl$2 = [
+	"<div",
+	" role=\"toolbar\"><button type=\"button\"",
+	">",
+	"</button><button type=\"button\"",
+	">",
+	"</button><button type=\"button\">",
+	"</button></div>"
+];
+var _tmpl$3 = [
+	"<select",
+	">",
+	"</select>"
+];
+var _tmpl$4 = [
+	"<option",
+	">",
+	"</option>"
+];
+function createViewerBuildingBlocks(options = () => ({})) {
+	const session = createBuildingBlockSession();
+	const [state, setState] = createSignal(session.controller.state);
+	const stop = session.controller.subscribe((value) => setState(() => value));
+	createEffect(() => session.update(options()));
+	onCleanup(() => {
+		stop();
+		session.destroy();
+	});
+	const toolbarProps = createMemo(() => {
+		state();
+		return session.toolbar(options().locale);
+	});
+	return {
+		controller: session.controller,
+		state,
+		canvasProps: { mount: session.mount },
+		toolbarProps,
+		inspectorProps: { controller: session.controller },
+		loading: () => state().loading,
+		error: () => state().error ?? state().edit.error,
+		mode: () => state().canEdit ? "edit" : "view"
+	};
+}
+function DiagramCanvas(props) {
+	let host;
+	createEffect(() => {
+		const mount = props.mount;
+		mount(host);
+		onCleanup(() => mount(null));
+	});
+	return ssr(_tmpl$, ssrHydrationKey() + ssrAttribute("class", escape(props.class, true), false));
+}
+function Toolbar(props) {
+	return ssr(_tmpl$2, ssrHydrationKey(), ssrAttribute("disabled", !props.canUndo, true), escape(props.labels.Undo), ssrAttribute("disabled", !props.canRedo, true), escape(props.labels.Redo), escape(props.labels["Fit to Window"]));
+}
+function PageNavigation(props) {
+	return ssr(_tmpl$3, ssrHydrationKey() + ssrAttribute("aria-label", escape(props.labels.Page, true), false) + ssrAttribute("value", escape(props.pageIndex, true), false), escape(createComponent(For, {
+		get each() {
+			return props.pages;
+		},
+		children: (page, index) => ssr(_tmpl$4, ssrHydrationKey() + ssrAttribute("value", escape(index(), true), false), escape(page.name))
+	})));
+}
+function Inspector(props) {
+	let host;
+	createEffect(() => {
+		const stop = buildingBlock("mountDiagramInspector")(host, props.controller);
+		onCleanup(stop);
+	});
+	return ssr(_tmpl$, ssrHydrationKey());
+}
+//#endregion
+export { DiagramCanvas, Inspector, PageNavigation, Toolbar, VisioViewer, createViewerBuildingBlocks, createVisioViewerState };

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/dist/types/packages/solid/src/building-blocks.d.ts

@@ -0,0 +1,55 @@
+import { type Accessor } from 'solid-js';
+import { type BuildingBlockOptions, type DiagramToolbarProps, type ViewerController } from '../../bindings/src/building-blocks.js';
+export declare function createViewerBuildingBlocks(options?: Accessor<BuildingBlockOptions>): {
+    controller: ViewerController;
+    state: Accessor<import("ooxml-ui/visio").ViewerState>;
+    canvasProps: {
+        mount: (node: HTMLElement | null) => void;
+    };
+    toolbarProps: Accessor<{
+        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;
+    }>;
+    inspectorProps: {
+        controller: ViewerController;
+    };
+    loading: () => boolean;
+    error: () => Error | null;
+    mode: () => "edit" | "view";
+};
+export declare function DiagramCanvas(props: {
+    mount(node: HTMLElement | null): void;
+    class?: string | undefined;
+}): import("solid-js").JSX.Element;
+export declare function Toolbar(props: DiagramToolbarProps): import("solid-js").JSX.Element;
+export declare function PageNavigation(props: DiagramToolbarProps): import("solid-js").JSX.Element;
+export declare function Inspector(props: {
+    controller: ViewerController;
+}): import("solid-js").JSX.Element;
+export type { BuildingBlockOptions, DiagramToolbarProps } from '../../bindings/src/building-blocks.js';

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "visio-solid-viewer",
-	"version": "0.7.4",
+	"version": "0.8.0",
 	"description": "Local-first Visio viewer for solid",
 	"homepage": "https://christophervr.github.io/ooxml/visio/",
 	"bugs": {
@@ -32,9 +32,9 @@
 	},
 	"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"
 	},
 	"peerDependencies": {
 		"solid-js": "^1.9.0"