fix(编辑能力): 修复底色及其他颜色提交异常

assets/webui/ofdgo.js

@@ -702,12 +702,14 @@ const fontManager = new FontManager({
 const fontPicker = new FontPicker(el.textFont, el.textFontToggle, el.textFontList, changeTextFont, loadEditorFonts);
 const textFormatButtons = [...document.querySelectorAll("[data-text-format]")];
 const textBackground = document.querySelector("#textBackground");
+const editorColors = new Map();
 const annotationFields = Object.fromEntries(["CreateForm", "CreateCancel", "Content", "Old", "Font", "Text", "TextRow", "Image", "ImageRow", "Author", "LinkKind", "Address", "AddressRow", "Target", "TargetRow", "X", "Y", "Width", "Height", "Angle", "Opacity", "Tile", "Placement", "PlacementLabel", "Pick", "Scope", "Pages"].map(key => [key, document.querySelector(`#annotation${key}`)]));
 el.editorTools.addEventListener("scroll", () => fontPicker.position());
 
 const canvasEditor = new CanvasEditor(el.viewerPanel, {
 	textControls: [el.textAlign, el.textFont, el.textFontToggle, el.textFontAdd, el.textFontList, el.textSize, el.textColor, el.textLineHeight, el.textSpacing, el.textWrap, el.paragraphButton, el.paragraphPanel, textBackground, ...textFormatButtons, el.undoButton, el.redoButton, el.saveButton, el.saveAsButton, el.fontInput, document.querySelector("#textReflow")],
 	keepTextFocus: () => fontPicker.open || el.closePanel.open || el.paragraphPanel.open || canvasEditor.input?.fontDialog,
+	prepareTextCommit: flushEditorColors,
 	onTextFormat: changeRangeFormat,
 	onRichInput: ensureRichInput,
 	textClipboardScope: () => `${documentTab().id}:${documentContentKey(state)}:${state.editorInfo?.revision ?? ""}`,
@@ -867,9 +869,10 @@ editorClick(el.editObjectButton, () => {
 	}
 });
 el.textSize.addEventListener("change", () => changeTextStyle(false));
-el.textColor.addEventListener("change", () => changeTextStyle(true));
+bindEditorColor(el.textColor, () => changeTextStyle(true));
 for (const button of textFormatButtons) button.addEventListener("click", () => changeRangeFormat(button.dataset.textFormat));
-textBackground.addEventListener("change", () => changeRangeFormat("background", textBackground.value));
+bindEditorColor(textBackground, value => changeRangeFormat("background", value));
+document.addEventListener("pointerdown", flushEditorColors, true);
 editorClick(el.textWrap, () => changeParagraph(!currentTextStyle().wrap), true);
 el.textAlign.addEventListener("change", () => changeTextAlignment());
 el.textLineHeight.addEventListener("change", () => changeParagraph(undefined, "lineHeight"));
@@ -1303,9 +1306,10 @@ editorClick(el.eraseButton, () => toggleDrawingTool(el.eraseMode.value));
 el.eraseMode.addEventListener("change", () => {
 	if (canvasEditor.tool.startsWith("erase-")) canvasEditor.setTool(el.eraseMode.value);
 });
-for (const input of [el.shapeFill, el.shapeFillColor, el.shapeStroke, el.shapeStrokeColor, el.shapeWidth]) {
+for (const input of [el.shapeFill, el.shapeStroke, el.shapeWidth]) {
 	input.addEventListener("change", changeShapeStyle);
 }
+for (const input of [el.shapeFillColor, el.shapeStrokeColor]) bindEditorColor(input, () => changeShapeStyle({ target: input }));
 el.addPageButton.addEventListener("change", async () => {
 	const action = el.addPageButton.value;
 	el.addPageButton.value = "";
@@ -3005,6 +3009,9 @@ async function releaseDocumentTab(tab) {
 		if (!prepared && workspace.objectClipboard === clipboard) workspace.objectClipboard = null;
 	}
 	tab.closed = true;
+	for (const color of editorColors.values()) {
+		if (color.pending?.tab === tab) { color.pending = null; color.handled = true; }
+	}
 	tab.print?.destroy();
 	tab.print = null;
 	tab.opening?.controller.abort();
@@ -4208,6 +4215,46 @@ async function reflowCanvasText() {
 	updateObjectControls(canvasEditor.selected, true);
 }
 
+function bindEditorColor(input, change) {
+	const color = { input, change, pending: null, task: null, handled: false };
+	editorColors.set(input, color);
+	const remember = () => {
+		color.pending = { value: input.value, tab: documentTab(), content: documentContentKey(state), editing: canvasEditor.input, selected: canvasEditor.selected };
+		color.handled = false;
+	};
+	input.addEventListener("input", remember);
+	input.addEventListener("change", () => {
+		let task;
+		if (!color.handled) {
+			if (!color.pending) remember();
+			task = flushEditorColor(color);
+		}
+		color.handled = false;
+		return task;
+	});
+}
+
+function flushEditorColor(color) {
+	if (color.task || !color.pending) return color.task;
+	color.task = (async () => {
+		while (color.pending) {
+			const pending = color.pending;
+			color.pending = null;
+			color.handled = true;
+			if (!isForegroundDocument(pending.tab) || pending.content !== documentContentKey(state)
+				|| pending.editing !== canvasEditor.input || pending.selected !== canvasEditor.selected) continue;
+			color.input.value = pending.value;
+			await color.change(pending.value);
+		}
+	})().finally(() => { color.task = null; });
+	return color.task;
+}
+
+function flushEditorColors() {
+	const tasks = [...editorColors.values()].map(flushEditorColor).filter(Boolean);
+	return tasks.length ? Promise.all(tasks) : null;
+}
+
 async function changeRangeFormat(key, value) {
 	if (!state.ready || document.body.hasAttribute("data-busy") || canvasEditor.input?.composing) return;
 	const tab = documentTab(), editing = canvasEditor.input;