xiaoqidun/ofdgo
1
0 Fork 0
mirror of https://github.com/xiaoqidun/ofdgo.git synced 2026-10-29 15:06:46 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat(编辑能力): 修正文本选框与工具栏布局
build.yaml / build (push) Successful in 54s
Details

Browse Source
This commit is contained in:
xiaoqidun committed 2026-10-14 15:12:01 +08:00
1 parent 6299c0f8f9
commit de229c163b
4 files changed
+47 -13
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

assets/webui/ofdgo.css
+23 -3
View File
@@ -3806,9 +3806,16 @@ audio.page-media {
}
}
@media (min-width: 901px) and (max-width: 1600px) and (pointer: fine) {
@media (min-width: 901px) {
.editor-toolbar {
--editor-control-width: 52px;
flex-wrap: wrap;
row-gap: 8px;
}
}
@media (min-width: 901px) and (max-width: 1600px) {
.editor-toolbar {
--editor-control-width: 44px;
}
.editor-group {
@@ -3820,12 +3827,25 @@ audio.page-media {
padding-inline: 6px;
}
.editor-group > select {
appearance: none;
padding-inline: 2px 10px;
background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
background-position: right 5px center, right 2px center;
background-size: 3px 3px;
background-repeat: no-repeat;
}
.editor-group:has(#textFont) {
grid-template-columns: repeat(7, 44px);
}
.editor-paragraph {
grid-template-columns: var(--editor-control-width) 108px;
grid-template-columns: var(--editor-control-width) 100px;
}
.editor-group:has(#shapeFill) {
grid-template-columns: repeat(2, 76px);
}
.toolbar {
assets/webui/ofdgo_edit.js
+7 -5
View File
@@ -689,11 +689,12 @@ export class CanvasEditor {
if (item.contour) item.contour.svg.setAttribute("viewBox", `${item.x} ${item.y} ${item.width} ${item.height}`);
if (item.textFrame) {
const { matrix: [a, b, c, d, e, f], width, height } = item.textFrame;
const box = item.textFrame.content || { x: 0, y: 0, width, height };
for (const handle of item.node.children) {
if (handle.dataset.corner !== "w" && handle.dataset.corner !== "e") continue;
const x = handle.dataset.corner === "e" ? width : 0;
handle.style.left = `${(a * x + c * height / 2 + e - item.x) * change.scale * PX_PER_MM}px`;
handle.style.top = `${(b * x + d * height / 2 + f - item.y) * change.scale * PX_PER_MM}px`;
const x = box.x + (handle.dataset.corner === "e" ? box.width : 0), y = box.y + box.height / 2;
handle.style.left = `${(a * x + c * y + e - item.x) * change.scale * PX_PER_MM}px`;
handle.style.top = `${(b * x + d * y + f - item.y) * change.scale * PX_PER_MM}px`;
handle.style.cursor = a === 0 ? "var(--resize-vertical, ns-resize)" : "var(--resize-horizontal, ew-resize)";
}
}
@@ -969,7 +970,7 @@ export class CanvasEditor {
if (drag.item.textFrame) {
const frame = drag.item.textFrame, [a, b, c, d] = frame.matrix;
const dx = (d * (to.x - from.x) - c * (to.y - from.y)) / (a * d - b * c);
const box = reshapeBox({ geometry: { x: 0, y: 0, width: frame.width, height: frame.height } }, dx, 0, drag.corner, false);
const box = reshapeBox({ geometry: frame.content || { x: 0, y: 0, width: frame.width, height: frame.height } }, dx, 0, drag.corner, false);
drag.box = { x: drag.item.x + box.x, width: box.width };
const bounds = transformedBox(box, frame.matrix);
Object.assign(drag.item.node.style, { left: `${bounds.x * PX_PER_MM}px`, top: `${bounds.y * PX_PER_MM}px`,
@@ -1130,7 +1131,8 @@ export class CanvasEditor {
if (drag.corner && drag.box) {
this.drag = null;
this.viewer.releasePointerCapture(drag.pointerID);
const geometry = drag.item.oriented?.box || drag.item.geometry || (drag.item.textFrame ? { x: drag.item.x, width: drag.item.textFrame.width } : drag.item);
const frame = drag.item.textFrame;
const geometry = drag.item.oriented?.box || drag.item.geometry || (frame ? { x: drag.item.x + (frame.content?.x || 0), width: frame.content?.width ?? frame.width } : drag.item);
const changed = Object.keys(drag.box).some((key) => drag.box[key] !== geometry[key]);
const apply = drag.item.shape || drag.item.oriented ? this.options.onReshape : canEditObject(drag.item, "stretch") ? this.options.onResize : this.options.onTextWidth;
Promise.resolve(changed && apply(drag.item, drag.box)).finally(() => {