-
-
-
+
+
+
+ 擦除
diff --git a/assets/webui/ofdgo.css b/assets/webui/ofdgo.css
index ccbb028..fe2a2ec 100644
--- a/assets/webui/ofdgo.css
+++ b/assets/webui/ofdgo.css
@@ -89,7 +89,6 @@ a:focus-visible {
display: flex;
max-height: 40dvh;
overflow: auto;
- gap: 8px;
padding: 8px 10px 6px;
border-bottom: 1px solid var(--line);
background: var(--panel);
@@ -102,35 +101,32 @@ a:focus-visible {
.editor-group {
display: grid;
- flex: 0 0 auto;
+ flex: 1 0 auto;
+ justify-content: center;
grid-template-columns: repeat(3, max-content);
grid-template-rows: repeat(2, 28px) 16px;
column-gap: 4px;
row-gap: 4px;
- padding-right: 8px;
+ padding: 0 8px;
border-right: 1px solid var(--line);
}
.editor-file,
-.editor-erase,
.editor-image {
grid-template-columns: repeat(2, max-content);
}
-.editor-transform {
+.editor-transform,
+.editor-erase {
grid-template-columns: max-content;
}
-#eraseObjectButton {
- grid-row: span 2;
- height: 100%;
-}
-
.editor-image > select {
grid-column: 1 / -1;
}
-.editor-paragraph > .editor-field {
+.editor-paragraph > .editor-field,
+.editor-group:has(#textFont) > .editor-field {
grid-column: auto;
}
@@ -142,7 +138,8 @@ a:focus-visible {
display: grid;
align-items: center;
grid-column: 1 / -1;
- grid-template-columns: 2em minmax(0, 1fr);
+ grid-template-columns: 2em 86px;
+ justify-content: space-between;
gap: 6px;
white-space: nowrap;
}
@@ -189,17 +186,15 @@ a:focus-visible {
}
.editor-group:has(#textFont) {
- grid-template-columns: 102px 54px;
+ grid-template-columns: 160px 32px;
}
.editor-paragraph {
- width: 194px;
- grid-template-columns: 54px minmax(0, 1fr);
+ grid-template-columns: 54px max-content;
}
.editor-group:has(#shapeFill) {
- width: 180px;
- grid-template-columns: repeat(2, minmax(0, 1fr));
+ grid-template-columns: repeat(2, 84px);
}
.editor-file #saveButton {
@@ -211,11 +206,6 @@ a:focus-visible {
grid-column: 2;
}
-#textFont {
- width: 100%;
- min-width: 0;
-}
-
.font-picker {
display: flex;
min-width: 0;
@@ -227,6 +217,7 @@ a:focus-visible {
.font-picker #textFont {
flex: 1 1 0;
width: 0;
+ min-width: 0;
text-overflow: ellipsis;
padding: 0 6px;
border: 0;
@@ -333,7 +324,15 @@ a:focus-visible {
accent-color: var(--accent);
}
+.editor-group:first-child {
+ flex-grow: 0.5;
+ justify-content: start;
+ padding-left: 0;
+}
+
.editor-group:last-child {
+ flex-grow: 0.5;
+ justify-content: end;
padding-right: 0;
border-right: 0;
}
@@ -766,12 +765,16 @@ button:not(:disabled):hover {
.text-font {
display: grid;
- width: 160px;
+ width: 196px;
grid-template-columns: minmax(0, 1fr) auto;
grid-column: 1 / -1;
gap: 4px;
}
+.text-font .icon-button {
+ width: 32px;
+}
+
.form-row input[aria-invalid="true"] {
border-color: #b14343;
}
diff --git a/assets/webui/ofdgo.js b/assets/webui/ofdgo.js
index c22a70d..d9d076e 100644
--- a/assets/webui/ofdgo.js
+++ b/assets/webui/ofdgo.js
@@ -152,9 +152,8 @@ const el = {
arrowTool: document.querySelector("#arrowTool"),
drawRectangleButton: document.querySelector("#drawRectangleButton"),
drawEllipseButton: document.querySelector("#drawEllipseButton"),
- eraseObjectButton: document.querySelector("#eraseObjectButton"),
- eraseRegionButton: document.querySelector("#eraseRegionButton"),
- erasePathButton: document.querySelector("#erasePathButton"),
+ eraseButton: document.querySelector("#eraseButton"),
+ eraseMode: document.querySelector("#eraseMode"),
shapeFill: document.querySelector("#shapeFill"),
shapeFillColor: document.querySelector("#shapeFillColor"),
shapeStroke: document.querySelector("#shapeStroke"),
@@ -547,19 +546,13 @@ el.resetCropButton.addEventListener("click", () => {
});
editorClick(el.undoButton, () => changeDocument("ofdgoUndo"));
editorClick(el.redoButton, () => changeDocument("ofdgoRedo"));
-for (const [button, tool] of [[el.drawLineButton, "line"], [el.drawRectangleButton, "rectangle"], [el.drawEllipseButton, "ellipse"],
- [el.eraseObjectButton, "erase-object"], [el.eraseRegionButton, "erase-region"], [el.erasePathButton, "erase-path"]]) {
- editorClick(button, () => {
- if (!state.editing || document.body.hasAttribute("aria-busy")) {
- return;
- }
- const next = canvasEditor.tool === tool ? "" : tool;
- state.selectObjects = true;
- setPan(false);
- canvasEditor.setTool(next);
- el.viewerPanel.focus({ preventScroll: true });
- });
+for (const [button, tool] of [[el.drawLineButton, "line"], [el.drawRectangleButton, "rectangle"], [el.drawEllipseButton, "ellipse"]]) {
+ editorClick(button, () => toggleDrawingTool(tool));
}
+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]) {
input.addEventListener("change", changeShapeStyle);
}
@@ -1647,6 +1640,15 @@ async function changeShapeStyle() {
updateDrawingControls();
}
+function toggleDrawingTool(tool) {
+ if (!state.editing || document.body.hasAttribute("aria-busy")) return;
+ const next = canvasEditor.tool === tool ? "" : tool;
+ state.selectObjects = true;
+ setPan(false);
+ canvasEditor.setTool(next);
+ el.viewerPanel.focus({ preventScroll: true });
+}
+
function updateDrawingControls() {
const tool = canvasEditor.tool;
el.insertTextButton.setAttribute("aria-pressed", String(tool === "text"));
@@ -1661,10 +1663,8 @@ function updateDrawingControls() {
button.disabled = disabled || !pageCan("insert");
button.setAttribute("aria-pressed", String(tool === name));
}
- for (const [button, name] of [[el.eraseObjectButton, "erase-object"], [el.eraseRegionButton, "erase-region"], [el.erasePathButton, "erase-path"]]) {
- button.disabled = disabled;
- button.setAttribute("aria-pressed", String(tool === name));
- }
+ el.eraseButton.disabled = el.eraseMode.disabled = disabled;
+ el.eraseButton.setAttribute("aria-pressed", String(tool.startsWith("erase-")));
el.selectObjectButton.setAttribute("aria-pressed", String(canvasEditor.enabled && !tool));
const styleDisabled = disabled || (canvasEditor.selected?.type === "PathObject"
? !canEditObject(canvasEditor.selected, "update") : !pageCan("insert"));