feat(编辑能力): 修复对象选取与文字拖拽的边界问题

assets/webui/index.html

@@ -103,6 +103,7 @@
 				<button id="drawLineButton" class="button" type="button" aria-label="绘制直线" aria-pressed="false">直线</button>
 				<button id="drawRectangleButton" class="button" type="button" aria-label="绘制矩形" aria-pressed="false">矩形</button>
 				<button id="drawEllipseButton" class="button" type="button" aria-label="绘制椭圆" aria-pressed="false">椭圆</button>
+				<select id="arrowTool" aria-label="绘制箭头" title="绘制箭头"><option value="" hidden>箭头</option><option value="arrow">单向</option><option value="double-arrow">双向</option></select>
 				<span>插入</span>
 			</div>
 			<div class="editor-group">
@@ -152,7 +153,7 @@
 					<option value="horizontal">水平</option>
 					<option value="vertical">垂直</option>
 				</select>
-				<span>变换</span>
+				<button id="objectBoundsButton" class="editor-group-action" type="button" title="位置尺寸" aria-label="位置尺寸" aria-haspopup="dialog" aria-controls="objectBoundsPanel" disabled>变换</button>
 			</div>
 			<div class="editor-group">
 				<select id="addPageButton" aria-label="新增页面" title="新增页面"><option value="" hidden>新增</option><option value="blank">空白</option><option value="import">插页</option></select>
@@ -173,6 +174,7 @@
 		</dialog>
 		<dialog id="objectStylePanel" class="form-dialog" aria-label="对象样式">
 			<form id="objectStyleForm">
+				<div class="form-row"><span>格式</span><div class="form-format"><button id="copyStyleButton" class="button" type="button" aria-label="复制格式">复制</button><button id="pasteStyleButton" class="button" type="button" aria-label="粘贴格式">粘贴</button></div></div>
 				<div class="form-row"><label for="objectOpacity">透明</label><div class="form-unit"><input id="objectOpacity" type="number" min="0" max="100" step="any" aria-label="透明度" autofocus><span>%</span></div></div>
 				<div id="objectStrokeFields">
 					<div class="form-row"><label for="objectDash">线型</label><select id="objectDash"><option value="mixed" hidden>混合</option><option value="solid">实线</option><option value="dash">虚线</option><option value="dot">点线</option><option value="dashdot">点划</option><option value="custom">自定</option></select></div>
@@ -191,9 +193,24 @@
 				<div class="form-row"><label for="outlineTitle">标题</label><input id="outlineTitle" type="text" required autofocus></div>
 				<div class="form-row"><label for="outlineParent">上级</label><select id="outlineParent"></select></div>
 				<div class="form-row"><label for="outlinePage">页码</label><input id="outlinePage" type="number" min="1" step="1" placeholder="无" aria-label="目标页码，留空表示无目标"></div>
+				<div id="outlinePositionRow" class="form-row" hidden><label for="outlinePosition">顺序</label><input id="outlinePosition" type="number" min="1" step="1" required value="1"></div>
 				<div class="form-actions"><div id="outlineStatus" class="form-status" role="status"></div><button id="outlineCancel" class="button" type="button">取消</button><button id="outlineSubmit" class="button" type="submit">新增</button></div>
 			</form>
 		</dialog>
+		<dialog id="objectBoundsPanel" class="form-dialog" aria-label="位置尺寸">
+			<form id="objectBoundsForm">
+				<div class="form-pair">
+					<div class="form-row"><label for="objectX">横向</label><div class="form-unit"><input id="objectX" type="number" step="any" required autofocus><span>mm</span></div></div>
+					<div class="form-row"><label for="objectY">纵向</label><div class="form-unit"><input id="objectY" type="number" step="any" required><span>mm</span></div></div>
+				</div>
+				<div class="form-pair">
+					<div class="form-row"><label for="objectWidth">宽度</label><div class="form-unit"><input id="objectWidth" type="number" min="0" step="any" required><span>mm</span></div></div>
+					<div class="form-row"><label for="objectHeight">高度</label><div class="form-unit"><input id="objectHeight" type="number" min="0" step="any" required><span>mm</span></div></div>
+				</div>
+				<div class="form-row"><span>比例</span><label class="form-check"><input id="objectAspect" type="checkbox" checked>锁定</label></div>
+				<div class="form-actions"><div id="objectBoundsStatus" class="form-status" role="status"></div><button id="objectBoundsCancel" class="button" type="button">取消</button><button class="button" type="submit">确定</button></div>
+			</form>
+		</dialog>
 		<dialog id="createPanel" class="form-dialog" aria-label="新建文档">
 			<form id="createForm">
 				<div class="form-row">

assets/webui/ofdgo.css

@@ -1511,6 +1511,21 @@ button.outline-link:hover {
 	margin-bottom: 10px;
 }
 
+.form-format {
+	display: flex;
+	gap: 8px;
+}
+
+.form-format > button {
+	flex: 1;
+}
+
+.form-check {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+}
+
 .outline-link.selected {
 	background: var(--accent-soft);
 	color: var(--accent);

assets/webui/ofdgo.js

@@ -1,4 +1,4 @@
-import { CanvasEditor, canEditObject, editTextValue, missingGlyphMessage, objectEditReason, selectedText } from "./ofdgo_edit.js";
+import { CanvasEditor, canEditObject, editTextValue, missingGlyphMessage, objectEditReason, selectedText, lineShape, selectionBounds } from "./ofdgo_edit.js";
 import { FontManager, FontPicker } from "./ofdgo_font.js";
 
 const MM_TO_PX = 96 / 25.4;
@@ -43,6 +43,8 @@ const state = {
 	outlineAction: "add",
 	styleOriginal: null,
 	objectClipboard: null,
+	styleClipboard: null,
+	outlineExpanded: new Map(),
 	textFonts: [],
 	textFontID: null,
 	textDefaults: { type: "TextObject", size: 12 * 25.4 / 72, color: "#000000", wrap: true, align: "left", paragraphHeight: 0, letterSpacing: 0 },
@@ -147,6 +149,7 @@ const el = {
 	textSize: document.querySelector("#textSize"),
 	textColor: document.querySelector("#textColor"),
 	drawLineButton: document.querySelector("#drawLineButton"),
+	arrowTool: document.querySelector("#arrowTool"),
 	drawRectangleButton: document.querySelector("#drawRectangleButton"),
 	drawEllipseButton: document.querySelector("#drawEllipseButton"),
 	eraseObjectButton: document.querySelector("#eraseObjectButton"),
@@ -176,6 +179,18 @@ const el = {
 	batchPagesCancel: document.querySelector("#batchPagesCancel"),
 	batchPagesSubmit: document.querySelector("#batchPagesSubmit"),
 	objectStyleButton: document.querySelector("#objectStyleButton"),
+	copyStyleButton: document.querySelector("#copyStyleButton"),
+	pasteStyleButton: document.querySelector("#pasteStyleButton"),
+	objectBoundsButton: document.querySelector("#objectBoundsButton"),
+	objectBoundsPanel: document.querySelector("#objectBoundsPanel"),
+	objectBoundsForm: document.querySelector("#objectBoundsForm"),
+	objectBoundsCancel: document.querySelector("#objectBoundsCancel"),
+	objectBoundsStatus: document.querySelector("#objectBoundsStatus"),
+	objectX: document.querySelector("#objectX"),
+	objectY: document.querySelector("#objectY"),
+	objectWidth: document.querySelector("#objectWidth"),
+	objectHeight: document.querySelector("#objectHeight"),
+	objectAspect: document.querySelector("#objectAspect"),
 	objectStylePanel: document.querySelector("#objectStylePanel"),
 	objectStyleForm: document.querySelector("#objectStyleForm"),
 	objectOpacity: document.querySelector("#objectOpacity"),
@@ -192,6 +207,8 @@ const el = {
 	outlineForm: document.querySelector("#outlineForm"),
 	outlineTitle: document.querySelector("#outlineTitle"),
 	outlineParent: document.querySelector("#outlineParent"),
+	outlinePosition: document.querySelector("#outlinePosition"),
+	outlinePositionRow: document.querySelector("#outlinePositionRow"),
 	outlinePage: document.querySelector("#outlinePage"),
 	outlineStatus: document.querySelector("#outlineStatus"),
 	outlineCancel: document.querySelector("#outlineCancel"),
@@ -598,6 +615,51 @@ el.batchPagesForm.addEventListener("submit", async event => {
 	if (await changeDocument("ofdgoBatchPages", null, el.batchPageAction.value, el.batchPageRange.value)) el.batchPagesPanel.close();
 });
 editorClick(el.objectStyleButton, openObjectStyle);
+editorClick(el.objectBoundsButton, openObjectBounds);
+el.arrowTool.addEventListener("change", async () => {
+	const tool = el.arrowTool.value;
+	el.arrowTool.value = "";
+	if (await canvasEditor.commitText() && await canvasEditor.commitCrop()) {
+		setPan(false);
+		state.selectObjects = true;
+		canvasEditor.setTool(tool);
+		updateControls();
+	}
+});
+el.copyStyleButton.addEventListener("click", async () => {
+	const item = canvasEditor.selected, seq = state.openSeq;
+	setBusy(true);
+	try {
+		await callWASM("ofdgoCaptureStyle", item.index, item.id);
+		if (seq === state.openSeq) { state.styleClipboard = item.type; el.objectStylePanel.close(); }
+	} catch (err) { if (seq === state.openSeq) el.objectStyleStatus.textContent = err.message; }
+	finally { if (seq === state.openSeq) setBusy(false); }
+});
+el.pasteStyleButton.addEventListener("click", async () => {
+	const item = canvasEditor.selected;
+	if (await changeDocument("ofdgoPasteStyle", { ...item, id: canvasEditor.items().map(member => member.id) })) el.objectStylePanel.close();
+});
+el.objectBoundsCancel.addEventListener("click", () => el.objectBoundsPanel.close());
+for (const input of [el.objectWidth, el.objectHeight]) input.addEventListener("input", () => {
+	if (!el.objectAspect.checked || !input.value || el.objectWidth.disabled || el.objectHeight.disabled) return;
+	const box = state.boundsOriginal;
+	if (input === el.objectWidth) setObjectDimension(el.objectHeight, Number(input.value) * box.height / box.width);
+	else setObjectDimension(el.objectWidth, Number(input.value) * box.width / box.height);
+});
+el.objectAspect.addEventListener("change", () => {
+	if (el.objectAspect.checked) setObjectDimension(el.objectHeight, objectDimension(el.objectWidth) * state.boundsOriginal.height / state.boundsOriginal.width);
+});
+el.objectBoundsForm.addEventListener("submit", async event => {
+	event.preventDefault();
+	const item = canvasEditor.selected;
+	const values = [el.objectX, el.objectY, el.objectWidth, el.objectHeight].map(objectDimension);
+	let saved;
+	if (item.shape) {
+		if (lineShape(item.shape)) { values[2] *= Math.sign(item.geometry.width); values[3] *= Math.sign(item.geometry.height); }
+		saved = await changeDocument("ofdgoReshapeObject", item, ...values);
+	} else saved = await changeDocument("ofdgoResizeObjects", { ...item, id: canvasEditor.items().map(member => member.id) }, ...values);
+	if (saved) el.objectBoundsPanel.close();
+});
 el.objectStyleCancel.addEventListener("click", () => el.objectStylePanel.close());
 el.objectDash.addEventListener("change", () => {
 	el.objectDashRow.hidden = el.objectDash.value !== "custom";
@@ -614,8 +676,12 @@ el.outlineForm.addEventListener("submit", async event => {
 	event.preventDefault();
 	const path = state.outlineAction === "add" ? JSON.parse(el.outlineParent.value) : state.outlineSelection;
 	const page = el.outlinePage.value === "" ? -1 : Number(el.outlinePage.value) - 1;
-	if (await changeDocument("ofdgoChangeOutline", null, state.outlineAction, path, el.outlineTitle.value, page)) el.outlinePanel.close();
+	const saved = state.outlineAction === "move"
+		? await changeDocument("ofdgoMoveOutline", null, state.outlineSelection, JSON.parse(el.outlineParent.value), Number(el.outlinePosition.value) - 1)
+		: await changeDocument("ofdgoChangeOutline", null, state.outlineAction, path, el.outlineTitle.value, page);
+	if (saved) el.outlinePanel.close();
 });
+el.outlineParent.addEventListener("change", updateOutlinePosition);
 el.pageCancel.addEventListener("click", () => el.pagePanel.close());
 el.pageWidth.addEventListener("input", updatePageDirection);
 el.pageHeight.addEventListener("input", updatePageDirection);
@@ -865,12 +931,37 @@ function handleKeyDown(event) {
 
 function formDialogOpen() {
 	return el.exportPanel.open || el.createPanel.open || el.insertPanel.open || el.pagePanel.open || el.paragraphPanel.open || el.importPanel.open || el.infoPanel.open
-		|| el.batchPagesPanel.open || el.objectStylePanel.open || el.outlinePanel.open;
+		|| el.batchPagesPanel.open || el.objectStylePanel.open || el.outlinePanel.open || el.objectBoundsPanel.open;
+}
+
+function setObjectDimension(input, value) {
+	input.value = String(Number(value.toFixed(2)));
+	input.defaultValue = input.value;
+	input.dataset.precise = String(value);
+}
+
+function objectDimension(input) {
+	return Number(input.value === input.defaultValue ? input.dataset.precise : input.value);
+}
+
+function openObjectBounds() {
+	const item = canvasEditor.selected;
+	const box = item.geometry || selectionBounds((item.items || [item]).map(member => member.bounds || member));
+	state.boundsOriginal = { x: box.x, y: box.y, width: Math.abs(box.width), height: Math.abs(box.height) };
+	for (const [input, key] of [[el.objectX,"x"], [el.objectY,"y"], [el.objectWidth,"width"], [el.objectHeight,"height"]]) setObjectDimension(input, state.boundsOriginal[key]);
+	el.objectAspect.checked = true;
+	el.objectAspect.disabled = !item.shape && (item.items || [item]).some(member => member.type !== "ImageObject") || lineShape(item.shape) && (!box.width || !box.height);
+	el.objectWidth.disabled = lineShape(item.shape) && !box.width;
+	el.objectHeight.disabled = lineShape(item.shape) && !box.height;
+	el.objectBoundsStatus.textContent = "";
+	el.objectBoundsPanel.showModal();
 }
 
 function openObjectStyle() {
 	const items = canvasEditor.items();
 	if (!items.length) return;
+	el.copyStyleButton.disabled = items.length !== 1 || !canEditObject(items[0], "update");
+	el.pasteStyleButton.disabled = !state.styleClipboard || !items.every(item => item.type === state.styleClipboard && canEditObject(item, "update"));
 	const shared = (key, fallback) => items.every(item => (item[key] ?? fallback) === (items[0][key] ?? fallback)) ? items[0][key] ?? fallback : null;
 	const alpha = shared("alpha", 255), dash = shared("dashPattern", "");
 	el.objectOpacity.value = alpha === null ? "" : String(Math.round((1 - alpha / 255) * 10000) / 100);
@@ -921,18 +1012,59 @@ function openOutlinePanel(action) {
 	addOption([], "无");
 	const walk = (items, path = []) => items.forEach((item, index) => {
 		const next = [...path, index];
+		if (action === "move" && state.outlineSelection.every((part, i) => next[i] === part)) return;
 		addOption(next, `${"　".repeat(path.length)}${item.title}`);
 		walk(item.children || [], next);
 	});
 	walk(state.doc.outlines || []);
 	el.outlineParent.value = JSON.stringify(action === "add" ? state.outlineSelection || [] : state.outlineSelection.slice(0, -1));
-	el.outlineParent.disabled = action !== "add";
-	el.outlineTitle.disabled = el.outlinePage.disabled = action === "delete";
-	el.outlineSubmit.textContent = { add: "新增", update: "确定", delete: "删除" }[action];
+	el.outlineParent.disabled = action !== "add" && action !== "move";
+	el.outlineTitle.disabled = el.outlinePage.disabled = action === "delete" || action === "move";
+	el.outlinePositionRow.hidden = action !== "move";
+	el.outlinePosition.disabled = action !== "move";
+	updateOutlinePosition();
+	el.outlineSubmit.textContent = { add: "新增", update: "确定", delete: "删除", move: "确定" }[action];
 	el.outlineStatus.textContent = action === "delete" && outline.children?.length ? "同时删除子目录" : "";
 	el.outlinePanel.showModal();
 }
 
+function outlineChildren(outlines, path) {
+	for (const index of path) outlines = outlines[index].children || [];
+	return outlines;
+}
+
+function updateOutlinePosition() {
+	if (state.outlineAction !== "move") return;
+	const parent = JSON.parse(el.outlineParent.value);
+	const same = JSON.stringify(parent) === JSON.stringify(state.outlineSelection.slice(0, -1));
+	const count = outlineChildren(state.doc.outlines, parent).length + (same ? 0 : 1);
+	el.outlinePosition.max = String(count);
+	el.outlinePosition.value = String(same ? state.outlineSelection.at(-1) + 1 : count);
+}
+
+function remapOutlineExpansion(name, args, next) {
+	const roots = state.doc.outlines || [], expanded = new Map();
+	const walk = (items, visit, path = []) => items.forEach((item, index) => {
+		const current = [...path, index];
+		visit(item, JSON.stringify(current));
+		walk(item.children || [], visit, current);
+	});
+	walk(roots, (item, key) => expanded.set(item, state.outlineExpanded.get(key) ?? item.expanded));
+	const moving = name === "ofdgoMoveOutline", action = moving ? "move" : args[0], source = moving ? args[0] : args[1];
+	let item;
+	if (action === "move" || action === "delete") item = outlineChildren(roots, source.slice(0, -1)).splice(source.at(-1), 1)[0];
+	if (action === "move" || action === "add") {
+		let children = roots;
+		for (const index of next.slice(0, -1)) {
+			expanded.set(children[index], true);
+			children = children[index].children ||= [];
+		}
+		children.splice(next.at(-1), 0, item || {});
+	}
+	state.outlineExpanded.clear();
+	walk(roots, (item, key) => state.outlineExpanded.set(key, Boolean(expanded.get(item))));
+}
+
 function openImportPanel() {
 	if (!state.editing || document.body.hasAttribute("aria-busy")) return;
 	state.importPageCount = 0;
@@ -1050,6 +1182,7 @@ async function toggleEditor() {
 		state.selectObjects = true;
 		state.ofdBytes = null;
 		state.objectClipboard = null;
+		state.styleClipboard = null;
 		canvasEditor.clear();
 		setPan(false);
 		await openDocument({ doc, openSeq, skipAutoFonts: true, pageIndex, fitMode, scale,
@@ -1097,6 +1230,7 @@ async function createDocument(event) {
 		}
 		state.editing = true;
 		state.objectClipboard = null;
+		state.styleClipboard = null;
 		state.fontRenderPending = false;
 		canvasEditor.clear();
 		delete state.textDefaults.fontChoice;
@@ -1516,12 +1650,13 @@ async function changeShapeStyle() {
 function updateDrawingControls() {
 	const tool = canvasEditor.tool;
 	el.insertTextButton.setAttribute("aria-pressed", String(tool === "text"));
-	const line = tool === "line" || !tool && canvasEditor.selected?.shape === "line";
+	const line = lineShape(tool) || !tool && lineShape(canvasEditor.selected?.shape);
 	if (line) {
 		el.shapeFill.checked = false;
 		el.shapeStroke.checked = true;
 	}
 	const disabled = !state.editing || !state.ready || state.exporting;
+	el.arrowTool.disabled = disabled || !pageCan("insert");
 	for (const [button, name] of [[el.drawLineButton, "line"], [el.drawRectangleButton, "rectangle"], [el.drawEllipseButton, "ellipse"]]) {
 		button.disabled = disabled || !pageCan("insert");
 		button.setAttribute("aria-pressed", String(tool === name));
@@ -1560,6 +1695,10 @@ async function changeDocument(name, item, ...args) {
 		if (doc.revision === state.editorInfo?.revision) {
 			return true;
 		}
+		if ((name === "ofdgoUndo" || name === "ofdgoRedo") && JSON.stringify(doc.outlines) !== JSON.stringify(state.doc.outlines)) {
+			state.outlineSelection = null;
+			state.outlineExpanded.clear();
+		}
 		setEditorInfo(doc);
 		if (name === "ofdgoUpdateInfo") {
 			Object.assign(state.doc, { title: doc.title, author: doc.author, subject: doc.subject });
@@ -1567,8 +1706,10 @@ async function changeDocument(name, item, ...args) {
 			updateControls();
 			return true;
 		}
-		if (name === "ofdgoChangeOutline") {
+		if (name === "ofdgoChangeOutline" || name === "ofdgoMoveOutline") {
+			remapOutlineExpansion(name, args, doc.outlinePath);
 			state.doc.outlines = doc.outlines;
+			state.outlineSelection = doc.outlinePath;
 			renderOutlines(false);
 			showNavigation(el.outlinesTab);
 			updateControls();
@@ -1603,6 +1744,8 @@ async function changeDocument(name, item, ...args) {
 				el.batchPagesStatus.textContent = err.message;
 			} else if (el.objectStylePanel.open) {
 				el.objectStyleStatus.textContent = err.message;
+			} else if (el.objectBoundsPanel.open) {
+				el.objectBoundsStatus.textContent = err.message;
 			} else if (el.outlinePanel.open) {
 				el.outlineStatus.textContent = err.message;
 			} else if (el.infoPanel.open) {
@@ -2121,6 +2264,7 @@ async function openOFD(file) {
 		state.fileName = file.name || "ofdgo.ofd";
 		state.editing = false;
 		state.objectClipboard = null;
+		state.styleClipboard = null;
 		state.editorInfo = null;
 		state.fontRenderPending = false;
 		state.savedRevision = null;
@@ -2134,6 +2278,7 @@ async function openOFD(file) {
 		el.importPanel.close();
 		el.batchPagesPanel.close();
 		el.objectStylePanel.close();
+		el.objectBoundsPanel.close();
 		el.outlinePanel.close();
 		updateControls();
 		await openDocument({ pageIndex: 0, resetScroll: true, openSeq });
@@ -3668,23 +3813,26 @@ function showNavigation(selected) {
 function renderOutlines(reset = true) {
 	const selected = !reset && [el.pagesTab, el.outlinesTab, el.searchTab].find(tab => tab.getAttribute("aria-selected") === "true");
 	const scrollTop = reset ? 0 : el.pageListPanel.scrollTop;
-	if (reset) state.navigationScroll.clear();
+	if (reset) {
+		state.navigationScroll.clear();
+		state.outlineExpanded.clear();
+		state.outlineSelection = null;
+	}
 	const outlines = state.doc.outlines || [];
 	el.pageListTitle.hidden = true;
 	el.navigationTabs.hidden = false;
 	el.outlinesTab.hidden = outlines.length === 0 && !state.editing;
 	el.outlineList.replaceChildren();
-	state.outlineSelection = null;
 	if (state.editing) {
 		const tools = document.createElement("div");
 		tools.className = "outline-tools";
-		for (const [action, label] of [["add", "新增"], ["update", "修改"], ["delete", "删除"]]) {
+		for (const [action, label] of [["add", "新增"], ["update", "修改"], ["move", "移动"], ["delete", "删除"]]) {
 			const button = document.createElement("button");
 			button.className = "button";
 			button.type = "button";
 			button.textContent = label;
 			button.dataset.outlineAction = action;
-			button.disabled = action !== "add";
+			button.disabled = action !== "add" && !state.outlineSelection?.length;
 			editorClick(button, () => openOutlinePanel(action));
 			tools.append(button);
 		}
@@ -3885,6 +4033,7 @@ function createOutlineList(outlines, path = []) {
 		}
 		const link = document.createElement(outline.page || state.editing ? "button" : "span");
 		link.className = "outline-link";
+		link.classList.toggle("selected", state.editing && JSON.stringify(current) === JSON.stringify(state.outlineSelection));
 		const title = document.createElement("span");
 		title.textContent = outline.title;
 		link.append(title);
@@ -3911,7 +4060,11 @@ function createOutlineList(outlines, path = []) {
 		row.append(link);
 		if (hasChildren) {
 			const details = document.createElement("details");
-			details.open = outline.expanded;
+			const key = JSON.stringify(current);
+			details.open = state.outlineExpanded.get(key) ?? outline.expanded;
+			details.addEventListener("toggle", () => {
+				if (details.isConnected) state.outlineExpanded.set(key, details.open);
+			});
 			details.append(row, createOutlineList(outline.children, current));
 			item.append(details);
 		} else {
@@ -4940,6 +5093,7 @@ function updateObjectControls(item, reset = false) {
 	el.copyObjectButton.disabled = disabled || !canEditObject(item, "copy");
 	el.objectStyleButton.disabled = disabled || !canEditObject(item, "transform");
 	const cropping = Boolean(canvasEditor.crop);
+	el.objectBoundsButton.disabled = disabled || cropping || !canEditObject(item, "transform");
 	el.objectAlign.disabled = disabled || cropping || !canEditObject(item, "arrange");
 	el.objectRotate.disabled = el.objectFlip.disabled = el.objectAlign.disabled;
 	el.cropImageButton.disabled = disabled || item.type !== "ImageObject" || !canEditObject(item, "update");
@@ -5063,6 +5217,7 @@ function setBusy(busy, text = "", percent = 0, status = "") {
 	el.importForm.inert = busy;
 	el.batchPagesForm.inert = busy;
 	el.objectStyleForm.inert = busy;
+	el.objectBoundsForm.inert = busy;
 	el.outlineForm.inert = busy;
 	el.outlineList.inert = busy;
 	el.navigationTabs.inert = busy;

assets/webui/ofdgo_edit.js

@@ -32,6 +32,34 @@ export function objectTransform(box, dx, dy, corner = "") {
 	return { x: left ? box.width * (1 - scale) : 0, y: top ? box.height * (1 - scale) : 0, scale };
 }
 
+export function textTransform(box, dx, dy, corner) {
+	if (!corner) return objectTransform(box, dx, dy);
+	const left = corner.includes("w"), top = corner.includes("n");
+	const horizontal = (left ? -dx : dx) / box.width;
+	const vertical = (top ? -dy : dy) / box.height;
+	const delta = corner.length === 1 || Math.abs(vertical) > Math.abs(horizontal) ? vertical : horizontal;
+	const scale = Math.max(Math.min(1, 1 / box.height), 1 + delta);
+	return { x: corner.length === 1 ? box.width * (1 - scale) / 2 : left ? box.width * (1 - scale) : 0,
+		y: top ? box.height * (1 - scale) : 0, scale };
+}
+
+export function lineShape(shape) {
+	return shape === "line" || shape === "arrow" || shape === "double-arrow";
+}
+
+function arrowPath(shape, box) {
+	const { x, y, width: w, height: h } = box, length = Math.hypot(w, h);
+	let path = `M${x} ${y}L${x + w} ${y + h}`;
+	if (!length) return path;
+	const head = Math.min(4, length / 3), ux = w / length, uy = h / length;
+	for (const reverse of shape === "double-arrow" ? [false, true] : [false]) {
+		const px = reverse ? x : x + w, py = reverse ? y : y + h, direction = reverse ? -1 : 1;
+		const bx = px - ux * head * direction, by = py - uy * head * direction;
+		path += `M${bx - uy * head * .45} ${by + ux * head * .45}L${px} ${py}L${bx + uy * head * .45} ${by - ux * head * .45}`;
+	}
+	return path;
+}
+
 export function selectionBounds(items) {
 	const x = Math.min(...items.map(item => item.x)), y = Math.min(...items.map(item => item.y));
 	return { x, y, width: Math.max(...items.map(item => item.x + item.width)) - x,
@@ -96,7 +124,7 @@ function cropBox(box, bounds, dx, dy, corner) {
 
 export function constrainedPoint(from, to, shape, shift) {
 	let dx = to.x - from.x, dy = to.y - from.y;
-	if (shift && shape === "line") {
+	if (shift && lineShape(shape)) {
 		const directions = [[1, 0], [1, 1], [0, 1], [-1, 1], [-1, 0], [-1, -1], [0, -1], [1, -1]];
 		const [x, y] = directions[(Math.round(Math.atan2(dy, dx) / (Math.PI / 4)) + 8) % 8];
 		const length = (dx * x + dy * y) / (x * x + y * y);
@@ -113,7 +141,7 @@ export function constrainedPoint(from, to, shape, shift) {
 export function reshapeBox(item, dx, dy, handle, shift) {
 	const box = item.geometry;
 	if (!dx && !dy && !shift) return { ...box };
-	if (item.shape === "line") {
+	if (lineShape(item.shape)) {
 		const start = { x: box.x, y: box.y }, end = { x: box.x + box.width, y: box.y + box.height };
 		const fixed = handle === "start" ? end : start, moving = handle === "start" ? start : end;
 		const point = constrainedPoint(fixed, { x: moving.x + dx, y: moving.y + dy }, "line", shift);
@@ -136,7 +164,8 @@ export function reshapeBox(item, dx, dy, handle, shift) {
 
 function paintShape(node, shape, box) {
 	const { x, y, width, height } = box;
-	const attributes = shape === "line" ? { x1: x, y1: y, x2: x + width, y2: y + height }
+	const attributes = lineShape(shape) && shape !== "line" ? { d: arrowPath(shape, box) }
+		: shape === "line" ? { x1: x, y1: y, x2: x + width, y2: y + height }
 		: shape === "ellipse" ? { cx: x + width / 2, cy: y + height / 2, rx: width / 2, ry: height / 2 }
 		: { x, y, width, height };
 	for (const [key, value] of Object.entries(attributes)) {
@@ -237,18 +266,21 @@ export class CanvasEditor {
 		this.pages.set(surface, { index, width: page.width, height: page.height });
 		const layer = document.createElement("div");
 		layer.className = "edit-layer";
-		for (const object of page.objects) {
+		const artwork = new Map([...surface.querySelectorAll("[data-ofd-object]")].map((node, order) => [node.getAttribute("data-ofd-object"), { node, order }]));
+		const objects = [...page.objects].sort((a, b) => (artwork.get(a.id)?.order ?? 0) - (artwork.get(b.id)?.order ?? 0));
+		for (const object of objects) {
 			const node = document.createElement("div");
 			node.className = "edit-object";
 			node.classList.toggle("read-only", !canEditObject(object, "transform"));
 			node.title = objectEditReason(object);
-			if (object.shape === "line") {
+			if (lineShape(object.shape)) {
 				node.classList.add("edit-line");
 			}
 			node.tabIndex = 0;
 			node.setAttribute("role", "button");
 			node.setAttribute("aria-label", { ImageObject: "图片对象", TextObject: "文字对象", PathObject: "图形对象" }[object.type]);
 			const item = { ...object, index, page: { width: page.width, height: page.height }, node, surface };
+			item.artwork = artwork.get(object.id)?.node;
 			if (object.type === "PathObject" && (object.shape || object.outline)) {
 				node.classList.add("edit-contour");
 				const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
@@ -263,10 +295,10 @@ export class CanvasEditor {
 			}
 			this.nodes.set(node, item);
 			node.addEventListener("focus", () => this.select(item));
-			const handles = !canEditObject(object, "transform") ? [] : object.shape === "line" ? ["start", "end"]
+			const handles = !canEditObject(object, "transform") ? [] : lineShape(object.shape) ? ["start", "end"]
 				: object.shape ? ["nw", "n", "ne", "e", "se", "s", "sw", "w"]
 					: object.type === "TextObject" && canEditObject(object, "reflow") && canEditObject(object, "layoutKnown")
-						? ["nw", "ne", "e", "se", "sw", "w"] : ["nw", "ne", "sw", "se"];
+						? ["nw", "n", "ne", "e", "se", "s", "sw", "w"] : ["nw", "ne", "sw", "se"];
 			for (const corner of handles) {
 				const handle = document.createElement("span");
 				handle.className = `edit-handle edit-${corner}`;
@@ -299,6 +331,11 @@ export class CanvasEditor {
 				y: change.y + (member.y - item.y) * (change.scale - 1), scale: change.scale,
 			});
 		}
+		if (item.artwork) {
+			const scale = change.scale, x = item.x * (1 - scale) + change.x, y = item.y * (1 - scale) + change.y;
+			if (x || y || scale !== 1) item.artwork.setAttribute("transform", `translate(${x} ${y}) scale(${scale})`);
+			else item.artwork.removeAttribute("transform");
+		}
 		if (item.shape) {
 			this.placeShape(item, { x: item.geometry.x + change.x + (item.geometry.x - item.x) * (change.scale - 1),
 				y: item.geometry.y + change.y + (item.geometry.y - item.y) * (change.scale - 1),
@@ -328,7 +365,7 @@ export class CanvasEditor {
 			left: `${x * PX_PER_MM}px`, top: `${y * PX_PER_MM}px`,
 			width: `${Math.abs(box.width) * PX_PER_MM}px`, height: `${Math.abs(box.height) * PX_PER_MM}px`,
 		});
-		if (item.shape === "line") {
+		if (lineShape(item.shape)) {
 			for (const handle of item.node.children) {
 				if (!handle.dataset.corner) continue;
 				const end = handle.dataset.corner === "end";
@@ -340,7 +377,8 @@ export class CanvasEditor {
 			const { svg, path } = item.contour;
 			const width = Math.abs(box.width), height = Math.abs(box.height);
 			svg.setAttribute("viewBox", `0 0 ${width || 1} ${height || 1}`);
-			const values = item.shape === "line" ? { x1: box.x - x, y1: box.y - y, x2: box.x + box.width - x, y2: box.y + box.height - y }
+			const values = lineShape(item.shape) && item.shape !== "line" ? { d: arrowPath(item.shape, { x: box.x - x, y: box.y - y, width: box.width, height: box.height }) }
+				: item.shape === "line" ? { x1: box.x - x, y1: box.y - y, x2: box.x + box.width - x, y2: box.y + box.height - y }
 				: item.shape === "ellipse" ? { cx: width / 2, cy: height / 2, rx: width / 2, ry: height / 2 }
 					: { x: 0, y: 0, width, height };
 			for (const [key, value] of Object.entries(values)) path.setAttribute(key, String(value));
@@ -430,12 +468,12 @@ export class CanvasEditor {
 			this.cycleSelection(event);
 			return;
 		}
-		const node = event.target.closest(".edit-object, .edit-selection");
-		if (node) {
-			event.preventDefault();
-		}
+		let node = event.target.closest(".edit-object, .edit-selection");
+		const direct = this.nodes.get(node);
+		const target = event.target.dataset.corner || direct && !direct.contours ? direct : this.itemsAt(event)[0];
+		if (node || target) event.preventDefault();
+		node = target?.node;
 		this.viewer.focus({ preventScroll: true });
-		const target = node ? this.nodes.get(node) : null;
 		const additive = event.shiftKey || event.ctrlKey || event.metaKey || this.multiple;
 		if (!target) {
 			this.startMarquee(event, additive);
@@ -462,7 +500,7 @@ export class CanvasEditor {
 				.map(node => this.nodes.get(node)).filter(member => !selected.includes(member));
 			this.drag.targets.push({ x: 0, y: 0, ...item.page });
 		}
-		if (item.shape === "line" && this.drag.corner) {
+		if (lineShape(item.shape) && this.drag.corner) {
 			Object.assign(this.drag, this.createPreview(item.surface, item.page, item.shape, {
 				fill: false, stroke: true, strokeColor: "var(--accent)", lineWidth: item.lineWidth,
 			}));
@@ -470,13 +508,28 @@ export class CanvasEditor {
 		this.viewer.setPointerCapture(event.pointerId);
 	}
 
-	cycleSelection(event) {
+	contains(item, point, tolerance = 0) {
+		if (point.x < item.x - tolerance || point.x > item.x + item.width + tolerance || point.y < item.y - tolerance || point.y > item.y + item.height + tolerance) return false;
+		if (!item.contours) return point.x >= item.x && point.x <= item.x + item.width && point.y >= item.y && point.y <= item.y + item.height;
+		this.hitContext ||= document.createElement("canvas").getContext("2d");
+		item.hitPaths ||= item.contours.map(contour => ({ path: new Path2D(contour.path), rule: contour.evenOdd ? "evenodd" : "nonzero" }));
+		this.hitContext.lineWidth = tolerance * 2;
+		return item.hitPaths.some(({ path, rule }) => this.hitContext.isPointInPath(path, point.x, point.y, rule)
+			|| tolerance > 0 && this.hitContext.isPointInStroke(path, point.x, point.y));
+	}
+
+	itemsAt(event) {
 		const surface = event.target.closest(".page-surface");
 		const page = this.pages.get(surface);
-		if (!page) return;
-		const point = pagePoint(event.clientX, event.clientY, surface.getBoundingClientRect(), page, this.options.rotation());
-		const items = [...surface.querySelectorAll(".edit-object")].map(node => this.nodes.get(node)).reverse()
-			.filter(item => point.x >= item.x && point.x <= item.x + item.width && point.y >= item.y && point.y <= item.y + item.height);
+		if (!page) return [];
+		const rect = surface.getBoundingClientRect(), rotation = this.options.rotation();
+		const point = pagePoint(event.clientX, event.clientY, rect, page, rotation);
+		const tolerance = 3 * page.width / (rotation % 180 ? rect.height : rect.width);
+		return [...surface.querySelectorAll(".edit-object")].map(node => this.nodes.get(node)).reverse().filter(item => this.contains(item, point, tolerance));
+	}
+
+	cycleSelection(event) {
+		const items = this.itemsAt(event);
 		if (!items.length) return;
 		event.preventDefault();
 		this.viewer.focus({ preventScroll: true });
@@ -514,6 +567,15 @@ export class CanvasEditor {
 		}
 		const from = pagePoint(drag.clientX, drag.clientY, drag.rect, drag.item.page, drag.rotation);
 		const to = pagePoint(event.clientX, event.clientY, drag.rect, drag.item.page, drag.rotation);
+		if (!drag.box && !drag.change && drag.item.type === "TextObject" && (drag.corner === "w" || drag.corner === "e")) {
+			const scale = (drag.rotation % 180 ? drag.rect.width : drag.rect.height) / drag.item.page.height;
+			const dx = to.x - from.x, dy = to.y - from.y;
+			const frame = drag.item.textFrame;
+			if ((!frame || frame.matrix[0] > 0 && frame.matrix[3] > 0)
+				&& drag.item.height * scale < 28 && Math.abs(dy) * scale >= 3 && Math.abs(dy) > Math.abs(dx) / 2) {
+				drag.corner = (dy < 0 ? "n" : "s") + drag.corner;
+			}
+		}
 		if (drag.item.type === "TextObject" && (drag.corner === "w" || drag.corner === "e")) {
 			if (drag.item.textFrame) {
 				const frame = drag.item.textFrame, [a, b, c, d] = frame.matrix;
@@ -535,7 +597,8 @@ export class CanvasEditor {
 			if (drag.node) paintShape(drag.node, drag.item.shape, drag.box || drag.item.geometry);
 			return;
 		}
-		drag.change = objectTransform(drag.item, to.x - from.x, to.y - from.y, drag.corner);
+		const transform = drag.item.type === "TextObject" ? textTransform : objectTransform;
+		drag.change = transform(drag.item, to.x - from.x, to.y - from.y, drag.corner);
 		if (!drag.corner) this.snap(drag, event.altKey);
 		this.place(drag.item, drag.change);
 	}
@@ -681,8 +744,7 @@ export class CanvasEditor {
 			drag.node.setAttribute("d", drag.points.map((point, index) => `${index ? "L" : "M"}${point.x} ${point.y}`).join(" ") + " Z");
 			return;
 		}
-		const item = [...drag.items].reverse().find(item => point.x >= item.x && point.x <= item.x + item.width
-			&& point.y >= item.y && point.y <= item.y + item.height);
+		const item = [...drag.items].reverse().find(item => this.contains(item, point, 3 * drag.page.width / (drag.rotation % 180 ? drag.rect.height : drag.rect.width)));
 		if (item) { drag.erased.add(item); item.node.classList.add("erasing"); }
 	}
 
@@ -729,7 +791,7 @@ export class CanvasEditor {
 		this.viewer.focus({ preventScroll: true });
 		const shape = this.tool;
 		const style = this.options.drawStyle();
-		if (shape === "line") {
+		if (lineShape(shape)) {
 			style.fill = false;
 			style.stroke = true;
 		}
@@ -758,7 +820,7 @@ export class CanvasEditor {
 		const preview = document.createElementNS("http://www.w3.org/2000/svg", "svg");
 		preview.classList.add("edit-preview");
 		preview.setAttribute("viewBox", `0 0 ${page.width} ${page.height}`);
-		const node = document.createElementNS("http://www.w3.org/2000/svg", shape === "rectangle" ? "rect" : shape);
+		const node = document.createElementNS("http://www.w3.org/2000/svg", lineShape(shape) && shape !== "line" ? "path" : shape === "rectangle" ? "rect" : shape);
 		node.setAttribute("fill", style.fill ? style.fillColor : "none");
 		node.setAttribute("stroke", style.stroke ? style.strokeColor : "none");
 		node.setAttribute("stroke-width", style.lineWidth);
@@ -777,11 +839,11 @@ export class CanvasEditor {
 		const x = Math.min(from.x, to.x), y = Math.min(from.y, to.y);
 		const width = Math.abs(to.x - from.x), height = drag.shape === "text" ? Math.max(5, Math.abs(to.y - from.y)) : Math.abs(to.y - from.y);
 		const valid = Math.hypot(event.clientX - drag.clientX, event.clientY - drag.clientY) >= 3
-			&& (drag.shape === "line" ? width > 0 || height > 0 : width > 0 && height > 0);
-		drag.box = valid ? drag.shape === "line"
+			&& (lineShape(drag.shape) ? width > 0 || height > 0 : width > 0 && height > 0);
+		drag.box = valid ? lineShape(drag.shape)
 			? { x: from.x, y: from.y, width: to.x - from.x, height: to.y - from.y }
 			: { x, y, width, height } : null;
-		paintShape(drag.node, drag.shape === "text" ? "rectangle" : drag.shape, drag.shape === "line"
+		paintShape(drag.node, drag.shape === "text" ? "rectangle" : drag.shape, lineShape(drag.shape)
 			? { x: from.x, y: from.y, width: to.x - from.x, height: to.y - from.y } : { x, y, width, height });
 	}