feat(打印能力): 打印后台运行，标签自由切换

assets/webui/ofdgo.js

@@ -653,13 +653,15 @@ const el = {
 	statusText: document.querySelector("#statusText"),
 };
 
-let printDialog = null;
-
-function createPrintDialog() {
+function createPrintDialog(tab) {
+	const panel = el.printPanel.cloneNode(true);
+	el.printPanel.remove();
+	documentDialogs.register(panel, {shared:false});
 	return new PrintDialog({
+		panel,
 		nativeHost,
-		show: panel => documentDialogs.showApplication(panel),
-		download: downloadBytes,
+		show: panel => documentDialogs.openFor(tab, panel),
+		download: (bytes, mime, name) => nativeHost ? nativeHost.download(bytes, mime, name) : downloadBytes(bytes, mime, name),
 		cancel: tab => {
 			for (const [id, request] of wasmRequests) if (request.tab === tab && ["ofdgoPreparePrint", "ofdgoLayoutPrint", "ofdgoPrintSide", "ofdgoPrintPDF"].includes(request.name)) tab.worker?.postMessage({type:"cancel", id});
 		},
@@ -669,8 +671,8 @@ function createPrintDialog() {
 function openPrintPanel() {
 	const tab = documentTab();
 	if (!tab.state.doc || !tab.state.ready || document.body.hasAttribute("data-busy") || formDialogOpen()) return;
-	printDialog ||= createPrintDialog();
-	printDialog.open({tab, document:documentEntryKey(tab.state.doc.documents?.[tab.state.doc.documentIndex || 0]), call:(name, ...args) => callTabWASM(tab, name, ...args), page:tab.state.pageIndex,
+	tab.print ||= createPrintDialog(tab);
+	tab.print.open({tab, document:documentEntryKey(tab.state.doc.documents?.[tab.state.doc.documentIndex || 0]), call:(name, ...args) => callTabWASM(tab, name, ...args), page:tab.state.pageIndex,
 		selection:tab.state.pageSelection.size ? selectedPageIndexes() : [], annotations:tab.state.renderAnnotations,
 		name:tab.state.fileName || tab.state.doc.title || "OFDGo"});
 }
@@ -1891,7 +1893,7 @@ function handleKeyDown(event) {
 	}
 	if (nativeHost && (event.ctrlKey || event.metaKey) && (key === "Tab" || key.toLowerCase() === "w")) {
 		event.preventDefault();
-		if (document.body.hasAttribute("data-busy") || formDialogOpen()) return;
+		if (document.body.hasAttribute("data-busy") || formDialogOpen() && !documentTab().print?.context) return;
 		if (key.toLowerCase() === "w") closeTab(documentTab());
 		else {
 			const count = workspace.tabs.length, index = workspace.tabs.indexOf(documentTab());
@@ -2008,7 +2010,7 @@ function handleKeyDown(event) {
 }
 
 function formDialogOpen() {
-	if (el.printPanel.open) return true;
+	if (documentTab().print?.context) return true;
 	return Boolean(sealPreview || resourceManager.pick) || el.aboutPanel.open || el.closePanel.open || el.attachmentDialog.open || settingsElements.Panel.open || fontBindingElements.Panel.open || el.signPanel.open || el.verifyPanel.open || el.credentialsPanel.open || el.encryptionPanel.open || batchElements.Panel.open || el.exportPanel.open || el.createPanel.open || el.insertPanel.open || el.pagePanel.open || el.paragraphPanel.open || el.importPanel.open || el.infoPanel.open || el.documentPanel.open
 		|| resourceElements.Panel.open || el.structureDialog.open || el.versionPanel.open || el.batchPagesPanel.open || el.objectStylePanel.open || el.outlinePanel.open || el.objectBoundsPanel.open || el.annotationNote.open || el.annotationCreate.open || el.objectPicker.open;
 }
@@ -2868,6 +2870,8 @@ async function mountDocumentTab(tab) {
 async function releaseDocumentTab(tab) {
 	if (tab.closed) return;
 	tab.closed = true;
+	tab.print?.destroy();
+	tab.print = null;
 	tab.opening?.controller.abort();
 	tab.opening = null;
 	documentDialogs?.release(tab);
@@ -5043,7 +5047,7 @@ function resizeViewer() {
 async function boot() {
 	documentDialogs = new DocumentDialogs({document, titlebar: el.documentTitleBar,
 		targets: () => [...document.body.children].filter(node => node !== el.documentTitleBar)});
-	for (const panel of document.querySelectorAll("dialog.form-dialog")) documentDialogs.register(panel);
+	for (const panel of document.querySelectorAll("dialog.form-dialog")) if (panel !== el.printPanel) documentDialogs.register(panel);
 	documentDialogs.setOwner(documentTab());
 	const openSeq = state.openSeq;
 	setBusy(true, "正在准备引擎", 8, STATUS.engine);

assets/webui/ofdgo_print.js

@@ -1,7 +1,10 @@
+let printQueue = Promise.resolve();
+
 export class PrintDialog {
 	constructor(options) {
 		Object.assign(this, options);
-		this.el = Object.fromEntries(["Panel", "Form", "Settings", "Printer", "Properties", "Copies", "Collation", "Duplex", "BackReverse", "BackRotate", "Contents", "Scope", "Range", "Parity", "Reverse", "Mode", "Paper", "Width", "Height", "Orientation", "Scaling", "Scale", "MarginTop", "MarginRight", "MarginBottom", "MarginLeft", "Grid", "PageOrder", "Gap", "Binding", "BookletSheets", "SheetFrom", "SheetTo", "Overlap", "Sides", "Rotate", "Grayscale", "Borders", "CropMarks", "Raster", "DPI", "DPIValue", "TileOnlyLarge", "Labels", "Preview", "Previous", "Next", "PreviewNumber", "PageControl", "PageCount", "Status", "Spinner", "ProgressTrack", "ProgressBar", "Cancel", "Submit"].map(name => [name, document.querySelector(`#print${name}`)]));
+		const panel = this.panel || document.querySelector("#printPanel");
+		this.el = Object.fromEntries(["Panel", "Form", "Settings", "Printer", "Properties", "Copies", "Collation", "Duplex", "BackReverse", "BackRotate", "Contents", "Scope", "Range", "Parity", "Reverse", "Mode", "Paper", "Width", "Height", "Orientation", "Scaling", "Scale", "MarginTop", "MarginRight", "MarginBottom", "MarginLeft", "Grid", "PageOrder", "Gap", "Binding", "BookletSheets", "SheetFrom", "SheetTo", "Overlap", "Sides", "Rotate", "Grayscale", "Borders", "CropMarks", "Raster", "DPI", "DPIValue", "TileOnlyLarge", "Labels", "Preview", "Previous", "Next", "PreviewNumber", "PageControl", "PageCount", "Status", "Spinner", "ProgressTrack", "ProgressBar", "Cancel", "Submit"].map(name => [name, name === "Panel" ? panel : panel.querySelector(`#print${name}`)]));
 		this.printerOptions = this.el.Printer.innerHTML;
 		this.paperOptions = this.el.Paper.innerHTML;
 		this.settings = new WeakMap();
@@ -23,18 +26,23 @@ export class PrintDialog {
 			event.preventDefault();
 			if (!event.repeat) this.el.PreviewNumber.dispatchEvent(new Event("change"));
 		});
-		new ResizeObserver(([entry]) => { this.previewSize = entry.contentRect; this.resize(); }).observe(this.el.Preview);
-		window.addEventListener("afterprint", () => { if (this.waiting === "browser") this.finishPrint(); });
-		window.addEventListener("beforeprint", () => {
-			if (!this.root?.children.length) {
-				this.root ||= this.createRoot();
+		this.observer = new ResizeObserver(([entry]) => { this.previewSize = entry.contentRect; this.resize(); });
+		this.observer.observe(this.el.Preview);
+		this.afterPrint = () => { if (this.waiting === "browser") this.finishPrint("打印窗口已关闭"); };
+		this.beforePrint = () => {
+			if (!this.context || !this.el.Panel.open) return;
+			const root = document.querySelector("#ofdgoPrintDocument");
+			if (!root?.children.length) {
+				this.root = root || this.createRoot();
 				this.root.textContent = "请先在OFDGo中打开打印预览，准备完整文档后打印。";
 			}
-		});
+		};
+		window.addEventListener("afterprint", this.afterPrint);
+		window.addEventListener("beforeprint", this.beforePrint);
 	}
 
 	open(context) {
-		if (this.el.Panel.open) return;
+		if (this.context) return;
 		const saved = this.settings.get(context.tab)?.get(context.document);
 		this.context = context;
 		this.restoring = true;
@@ -242,7 +250,11 @@ export class PrintDialog {
 		if (!this.current(sequence)) return;
 		const context = this.context;
 		try {
-			if (!this.el.Form.reportValidity()) return;
+			if (!this.el.Form.checkValidity()) {
+				if (this.el.Panel.open) this.el.Form.reportValidity();
+				else this.status("请检查打印设置");
+				return;
+			}
 			this.status("正在准备预览", true);
 			const deviceOptions = this.isDevice() ? this.deviceOptions() : null;
 			const profile = deviceOptions ? await this.nativeHost.call("print.query", deviceOptions) : null;
@@ -267,7 +279,7 @@ export class PrintDialog {
 		}
 	}
 
-	current(sequence = this.sequence) { return this.el.Panel.open && sequence === this.sequence && this.context && !this.context.tab.closed; }
+	current(sequence = this.sequence) { return sequence === this.sequence && this.context && !this.context.tab.closed; }
 
 	async preview(index) {
 		if (!this.layout || this.running) return;
@@ -359,8 +371,15 @@ export class PrintDialog {
 		const job = this.job;
 		this.running = true;
 		this.controls();
+		this.status("正在等待打印", true);
+		const previous = printQueue;
+		let release;
+		printQueue = new Promise(resolve => { release = resolve; });
+		await previous;
+		if (!this.current(sequence)) { release(); return; }
+		this.releasePrint = release;
 		try {
-			this.root ||= this.createRoot();
+			this.root = document.querySelector("#ofdgoPrintDocument") || this.createRoot();
 			this.root.replaceChildren();
 			const style = document.createElement("style");
 			this.root.append(style);
@@ -382,15 +401,17 @@ export class PrintDialog {
 			}
 			await document.fonts.ready;
 			if (!this.current(sequence)) throw new DOMException("打印已取消", "AbortError");
+			if (this.el.Panel.open) {
 				this.previousTitle = document.title;
-			document.title = context.name;
+				document.title = this.printTitle = context.name;
+			}
 			this.waiting = this.nativeHost ? "native" : "browser";
 			this.controls();
 			this.status(job.deviceOptions ? "正在提交打印" : "正在打开打印", true);
 			if (job.deviceOptions) {
 				const result = await this.nativeHost.call("print", {...job.deviceOptions, fingerprint:job.fingerprint});
+				this.finishPrint(result?.submitted ? "打印已提交" : "打印作业未被接受");
 				if (this.current(sequence)) {
-					this.finishPrint();
 					if (!result?.submitted) throw new Error("打印作业未被接受");
 					if (job.manual && job.sides === "front") {
 						if (job.backContent) { this.el.Sides.value = "back"; this.schedule(); }
@@ -403,12 +424,12 @@ export class PrintDialog {
 				if (!capabilities.systemDialog) throw new Error("当前运行时不支持系统打印");
 				if (!capabilities.dialogCompletion) this.waiting = "browser";
 				await this.nativeHost.call("print.dialog", {kind:"system"});
-				if (this.current(sequence) && capabilities.dialogCompletion) this.finishPrint();
+				if (capabilities.dialogCompletion) this.finishPrint("打印窗口已关闭");
 			} else if (typeof window.print === "function") window.print();
 			else throw new Error("当前浏览器不支持打印");
 		} catch (error) {
+			if (this.releasePrint === release) this.finishPrint();
 			if (this.current(sequence)) {
-				this.finishPrint();
 				this.status(error.name === "AbortError" ? "打印已取消" : error.message);
 			}
 		} finally {
@@ -419,14 +440,20 @@ export class PrintDialog {
 		}
 	}
 
-	finishPrint() {
-		if (this.previousTitle !== undefined) { document.title = this.previousTitle; delete this.previousTitle; }
-		this.root?.replaceChildren();
+	finishPrint(message = "") {
+		if (this.previousTitle !== undefined) {
+			if (document.title === this.printTitle) document.title = this.previousTitle;
+			delete this.previousTitle;
+		}
+		if (this.releasePrint) this.root?.replaceChildren();
 		for (const url of this.urls) URL.revokeObjectURL(url);
 		this.urls = [];
-		this.status();
+		this.releasePrint?.();
+		this.releasePrint = null;
+		this.status(message);
 		this.waiting = this.running = false;
 		this.controls();
+		if (this.destroyed) window.removeEventListener("afterprint", this.afterPrint);
 	}
 
 	async pdf() {
@@ -439,7 +466,7 @@ export class PrintDialog {
 			const result = await context.call("ofdgoPrintPDF");
 			if (this.current(sequence)) {
 				await this.download(result.bytes, "application/pdf", `${context.name.replace(/\.[^.]+$/, "")}-打印.pdf`);
-				if (this.current(sequence)) this.status();
+				if (this.current(sequence)) this.status("文件已生成");
 			}
 		} catch (error) { if (this.current(sequence)) this.status(error.message); }
 		finally { if (this.current(sequence)) { this.running = false; this.controls(); } }
@@ -451,11 +478,19 @@ export class PrintDialog {
 		this.sequence++;
 		clearTimeout(this.timer);
 		if (context) this.cancel(context.tab);
-		this.finishPrint();
+		if (!this.waiting) this.finishPrint();
 		if (this.previewURL) URL.revokeObjectURL(this.previewURL);
 		this.previewURL = null;
 		this.el.Preview.replaceChildren();
 		this.context = null;
 		this.queue = this.queue.catch(() => {}).then(() => context?.call("ofdgoDiscardPrint").catch(() => {}));
 	}
+
+	destroy() {
+		this.destroyed = true;
+		this.close();
+		this.observer.disconnect();
+		window.removeEventListener("beforeprint", this.beforePrint);
+		if (!this.waiting) window.removeEventListener("afterprint", this.afterPrint);
+	}
 }

assets/webui/ofdgo_util.js

@@ -30,9 +30,9 @@ export class DocumentDialogs {
 		root.defaultView.addEventListener("resize", () => this.paint());
 	}
 
-	register(panel) {
+	register(panel, { shared = true } = {}) {
 		if (this.records.has(panel)) return panel;
-		const record = { show: panel.show.bind(panel), showModal: panel.showModal.bind(panel), close: panel.close.bind(panel), owner: null, application: false, clicks: new WeakMap(), initial: this.snapshot(panel) };
+		const record = { show: panel.show.bind(panel), showModal: panel.showModal.bind(panel), close: panel.close.bind(panel), owner: null, application: false, shared, clicks: new WeakMap(), initial: shared ? this.snapshot(panel) : null };
 		this.records.set(panel, record);
 		panel.showModal = panel.show = () => this.openFor(this.owner, panel);
 		panel.close = value => {
@@ -91,6 +91,7 @@ export class DocumentDialogs {
 		this.unpaint();
 		this.records.get(panel).owner = tab;
 		this.prepare(entry, panel);
+		if (!this.records.get(panel).shared) this.document.body.append(panel);
 		if (!panel.open) this.records.get(panel).show();
 		this.paint();
 		this.focus();
@@ -124,9 +125,9 @@ export class DocumentDialogs {
 			this.unpaint();
 			if (value !== undefined) panel.returnValue = String(value);
 			panel.removeAttribute("open");
-			entry.snapshot = this.snapshot(panel);
+			if (this.records.get(panel).shared) entry.snapshot = this.snapshot(panel);
 		}
-		const result = value === undefined ? visible ? panel.returnValue : entry.snapshot.returnValue : String(value);
+		const result = value === undefined ? visible ? panel.returnValue : entry.snapshot?.returnValue ?? panel.returnValue : String(value);
 		state.stack = state.stack.filter(value => value !== panel);
 		const resolve = entry.resolve;
 		entry.resolve = entry.promise = null;
@@ -150,7 +151,11 @@ export class DocumentDialogs {
 		for (const [panel, entry] of this.current(tab)?.entries || []) {
 			const record = this.records.get(panel);
 			if (record.application || record.owner !== tab) continue;
-			entry.snapshot = this.snapshot(panel);
+			if (record.shared) entry.snapshot = this.snapshot(panel);
+			else {
+				entry.focus = panel.contains(this.document.activeElement) ? this.document.activeElement : null;
+				panel.remove();
+			}
 			panel.removeAttribute("open");
 		}
 		this.owner = null;
@@ -167,7 +172,8 @@ export class DocumentDialogs {
 		for (const [panel, entry] of state.entries) {
 			const record = this.records.get(panel);
 			if (record.application) continue;
-			this.applySnapshot(entry.snapshot, panel);
+			if (record.shared) this.applySnapshot(entry.snapshot, panel);
+			else this.document.body.append(panel);
 			record.owner = tab;
 		}
 		for (const [panel, entry] of state.entries) {
@@ -193,6 +199,11 @@ export class DocumentDialogs {
 		for (const entry of state?.entries.values() || []) entry.resolve?.(null);
 		for (const [panel] of state?.entries || []) {
 			const record = this.records.get(panel);
+			if (!record.shared) {
+				panel.remove();
+				this.records.delete(panel);
+				continue;
+			}
 			if (record.application || record.owner !== tab) continue;
 			this.applySnapshot(record.initial, panel);
 			record.owner = null;
@@ -303,11 +314,11 @@ export class DocumentDialogs {
 	focus(restore = false) {
 		const panel = this.current()?.stack.at(-1);
 		if (!panel || this.applicationOpen()) return;
-		const saved = restore ? this.current().entries.get(panel)?.snapshot.focus : null;
+		const saved = restore ? this.current().entries.get(panel)?.snapshot?.focus || this.current().entries.get(panel)?.focus : null;
 		const target = saved?.isConnected && panel.contains(saved) ? saved : panel.querySelector("[autofocus], button:not(:disabled), input:not(:disabled), select:not(:disabled), textarea:not(:disabled), [tabindex]") || panel;
 		if (restore || !panel.contains(this.document.activeElement)) target.focus({ preventScroll: true });
-		const selection = restore && this.current().entries.get(panel)?.snapshot.selection;
+		const selection = restore && this.current().entries.get(panel)?.snapshot?.selection;
 		if (selection?.anchor?.isConnected && selection.focus?.isConnected) this.document.getSelection().setBaseAndExtent(selection.anchor, selection.start, selection.focus, selection.end);
-		if (restore) for (const item of this.current().entries.get(panel)?.snapshot.nodes || []) { item.node.scrollTop = item.scrollTop; item.node.scrollLeft = item.scrollLeft; }
+		if (restore) for (const item of this.current().entries.get(panel)?.snapshot?.nodes || []) { item.node.scrollTop = item.scrollTop; item.node.scrollLeft = item.scrollLeft; }
 	}
 }