Jony
ba920f2b66
Replace the prior release tree with the current plugin, frontend, tests, and documentation. Document retired node IDs and the public Gitea update source.
945 lines
45 KiB
JavaScript
945 lines
45 KiB
JavaScript
const EDITOR_ID = "o1key-reference-image-editor";
|
||
const EDITOR_STYLE_ID = "o1key-reference-image-editor-styles";
|
||
const MIN_CROP_SIZE = 8;
|
||
|
||
export const REFERENCE_EDITOR_RATIOS = Object.freeze([
|
||
{ key: "free", label: "自由", ratio: null },
|
||
{ key: "original", label: "原图", ratio: "original" },
|
||
{ key: "1:1", label: "1:1", ratio: 1 },
|
||
{ key: "4:3", label: "4:3", ratio: 4 / 3 },
|
||
{ key: "3:4", label: "3:4", ratio: 3 / 4 },
|
||
{ key: "3:2", label: "3:2", ratio: 3 / 2 },
|
||
{ key: "2:3", label: "2:3", ratio: 2 / 3 },
|
||
{ key: "16:9", label: "16:9", ratio: 16 / 9 },
|
||
{ key: "9:16", label: "9:16", ratio: 9 / 16 },
|
||
]);
|
||
|
||
const EDITOR_CSS = `
|
||
#${EDITOR_ID}{position:fixed;inset:0;z-index:10020;display:grid;place-items:center;padding:20px;box-sizing:border-box;
|
||
overflow:hidden;background:rgba(7,8,10,.88);color:#eceef2;font:12px/1.45 Inter,"Microsoft YaHei UI","Microsoft YaHei",system-ui,sans-serif;}
|
||
#${EDITOR_ID} *,#${EDITOR_ID} *::before,#${EDITOR_ID} *::after{box-sizing:border-box;}
|
||
#${EDITOR_ID} [hidden]{display:none!important;}
|
||
.o1key-reference-editor-dialog{width:min(1180px,96vw);height:min(850px,94vh);min-width:640px;min-height:500px;display:grid;
|
||
grid-template-rows:52px minmax(0,1fr) 58px;overflow:hidden;border:1px solid rgba(255,255,255,.16);border-radius:14px;
|
||
background:#202124;box-shadow:0 28px 90px rgba(0,0,0,.65);}
|
||
.o1key-reference-editor-header{display:flex;align-items:center;gap:12px;padding:0 16px;border-bottom:1px solid rgba(255,255,255,.1);}
|
||
.o1key-reference-editor-header strong{font-size:15px;}.o1key-reference-editor-filename{min-width:0;overflow:hidden;text-overflow:ellipsis;
|
||
white-space:nowrap;color:#96999f;}.o1key-reference-editor-close{margin-left:auto;width:32px;height:32px;border:0;border-radius:8px;
|
||
background:#303238;color:#d8d9dc;cursor:pointer;font:22px/1 system-ui,sans-serif;}.o1key-reference-editor-close:hover{background:#3b3d43;color:#fff;}
|
||
.o1key-reference-editor-body{min-width:0;min-height:0;display:grid;grid-template-columns:184px minmax(0,1fr);overflow:hidden;}
|
||
.o1key-reference-editor-sidebar{min-width:0;min-height:0;padding:14px 12px;overflow-x:hidden;overflow-y:auto;scrollbar-gutter:stable;
|
||
border-right:1px solid rgba(255,255,255,.1);background:#1b1c1f;}
|
||
.o1key-reference-editor-tools{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-bottom:16px;}
|
||
.o1key-reference-editor-tool,.o1key-reference-editor-ratio{height:34px;padding:0 8px;border:1px solid rgba(255,255,255,.12);
|
||
min-width:0;white-space:nowrap;border-radius:7px;background:#292b30;color:#c6c8cd;cursor:pointer;font:inherit;}.o1key-reference-editor-tool:hover,.o1key-reference-editor-ratio:hover{
|
||
border-color:rgba(255,255,255,.28);color:#fff;}.o1key-reference-editor-tool.active,.o1key-reference-editor-ratio.active{
|
||
border-color:#94b78a;background:#344332;color:#f4fff0;box-shadow:inset 0 0 0 1px rgba(180,220,166,.15);}
|
||
.o1key-reference-editor-section{margin:0 0 16px;}.o1key-reference-editor-section-title{margin:0 0 7px;color:#9da0a6;font-size:11px;font-weight:700;}
|
||
.o1key-reference-editor-ratios{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;}.o1key-reference-editor-ratio{height:30px;padding:0 4px;}
|
||
.o1key-reference-editor-control{min-width:0;display:grid;gap:7px;margin-top:10px;color:#a8abb0;}.o1key-reference-editor-control-row{min-width:0;display:flex;align-items:center;gap:8px;}
|
||
.o1key-reference-editor-control input[type=range]{min-width:0;flex:1;accent-color:#8daa83;}.o1key-reference-editor-control input[type=color]{
|
||
width:34px;height:28px;padding:2px;border:1px solid rgba(255,255,255,.14);border-radius:6px;background:#292b30;}
|
||
.o1key-reference-editor-width-value{width:44px;text-align:right;color:#d6d8dc;font-variant-numeric:tabular-nums;}
|
||
.o1key-reference-editor-sticker-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#8f9298;font-size:10px;}
|
||
.o1key-reference-editor-sticker-controls>.o1key-reference-editor-action{width:100%;min-width:0;white-space:nowrap;}
|
||
.o1key-reference-editor-help{min-height:50px;margin-top:12px;padding:9px;overflow-wrap:anywhere;border-radius:7px;background:rgba(255,255,255,.045);color:#898c92;font-size:10px;}
|
||
.o1key-reference-editor-stage{position:relative;min-width:0;min-height:0;display:grid;place-items:center;padding:18px;overflow:hidden;
|
||
background-color:#111214;background-image:linear-gradient(45deg,#18191c 25%,transparent 25%),linear-gradient(-45deg,#18191c 25%,transparent 25%),
|
||
linear-gradient(45deg,transparent 75%,#18191c 75%),linear-gradient(-45deg,transparent 75%,#18191c 75%);background-size:20px 20px;
|
||
background-position:0 0,0 10px,10px -10px,-10px 0;}
|
||
.o1key-reference-editor-canvas{display:block;max-width:100%;max-height:100%;background:#0a0a0a;box-shadow:0 8px 30px rgba(0,0,0,.5);touch-action:none;outline:none;}
|
||
.o1key-reference-editor-footer{min-width:0;display:flex;align-items:center;gap:8px;padding:0 16px;overflow:hidden;border-top:1px solid rgba(255,255,255,.1);}
|
||
.o1key-reference-editor-size{flex:0 0 auto;color:#8f9298;font-variant-numeric:tabular-nums;}.o1key-reference-editor-message{
|
||
min-width:0;flex:1;margin-left:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#e5a4a4;}
|
||
.o1key-reference-editor-action{height:34px;min-width:74px;padding:0 14px;border:0;border-radius:7px;background:#34363b;color:#dedfe2;cursor:pointer;font:inherit;}
|
||
.o1key-reference-editor-action:hover{background:#414349;color:#fff;}.o1key-reference-editor-action:disabled{
|
||
cursor:not-allowed;opacity:.55;}.o1key-reference-editor-action:disabled:hover{background:#34363b;color:#dedfe2;}
|
||
.o1key-reference-editor-action.primary{background:#82a777;color:#10200d;font-weight:750;}.o1key-reference-editor-action.primary:hover{background:#91b685;}
|
||
.o1key-reference-editor-action.ghost{min-width:34px;padding:0 9px;}.o1key-reference-editor-history{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;}
|
||
.o1key-reference-editor-sidebar-actions>.o1key-reference-editor-action,.o1key-reference-editor-history>.o1key-reference-editor-action{
|
||
width:100%;min-width:0;white-space:nowrap;}
|
||
@media (max-width:760px){#${EDITOR_ID}{padding:0}.o1key-reference-editor-dialog{width:100vw;height:100vh;min-width:0;min-height:0;border:0;border-radius:0;}
|
||
.o1key-reference-editor-body{grid-template-columns:150px minmax(0,1fr)}.o1key-reference-editor-sidebar{padding:10px 8px}.o1key-reference-editor-stage{padding:8px}}
|
||
`;
|
||
|
||
function clamp(value, minimum, maximum) {
|
||
return Math.max(minimum, Math.min(maximum, value));
|
||
}
|
||
|
||
export function constrainCropRect(rect, imageWidth, imageHeight, minimumSize = MIN_CROP_SIZE) {
|
||
const widthLimit = Math.max(1, Number(imageWidth) || 1);
|
||
const heightLimit = Math.max(1, Number(imageHeight) || 1);
|
||
const minimum = Math.min(Math.max(1, Number(minimumSize) || 1), widthLimit, heightLimit);
|
||
const width = clamp(Number(rect?.width) || minimum, minimum, widthLimit);
|
||
const height = clamp(Number(rect?.height) || minimum, minimum, heightLimit);
|
||
return {
|
||
x: clamp(Number(rect?.x) || 0, 0, widthLimit - width),
|
||
y: clamp(Number(rect?.y) || 0, 0, heightLimit - height),
|
||
width,
|
||
height,
|
||
};
|
||
}
|
||
|
||
export function fitCropToRatio(imageWidth, imageHeight, ratio) {
|
||
const width = Math.max(1, Number(imageWidth) || 1);
|
||
const height = Math.max(1, Number(imageHeight) || 1);
|
||
const numericRatio = ratio === "original" ? width / height : Number(ratio);
|
||
if (!(numericRatio > 0)) return { x: 0, y: 0, width, height };
|
||
let cropWidth = width;
|
||
let cropHeight = cropWidth / numericRatio;
|
||
if (cropHeight > height) {
|
||
cropHeight = height;
|
||
cropWidth = cropHeight * numericRatio;
|
||
}
|
||
return {
|
||
x: (width - cropWidth) / 2,
|
||
y: (height - cropHeight) / 2,
|
||
width: cropWidth,
|
||
height: cropHeight,
|
||
};
|
||
}
|
||
|
||
export function editedReferenceFilename(filename) {
|
||
const basename = String(filename || "reference.png").split(/[\\/]/).pop() || "reference.png";
|
||
const stem = basename.replace(/\.[^.]+$/, "") || "reference";
|
||
const safeStem = stem.replace(/[<>:"/\\|?*\u0000-\u001f]/g, "_").slice(0, 180) || "reference";
|
||
return `${safeStem}_edited.png`;
|
||
}
|
||
|
||
export function fitStickerTransform(imageWidth, imageHeight, canvasWidth, canvasHeight) {
|
||
const width = Math.max(1, Number(imageWidth) || 1);
|
||
const height = Math.max(1, Number(imageHeight) || 1);
|
||
const targetWidth = Math.max(1, Number(canvasWidth) || 1);
|
||
const targetHeight = Math.max(1, Number(canvasHeight) || 1);
|
||
const scale = Math.min(targetWidth * .5 / width, targetHeight * .5 / height, 1);
|
||
return {
|
||
x: targetWidth / 2,
|
||
y: targetHeight / 2,
|
||
width: width * scale,
|
||
height: height * scale,
|
||
rotation: 0,
|
||
opacity: 1,
|
||
};
|
||
}
|
||
|
||
function stickerPoint(sticker, localX, localY) {
|
||
const cosine = Math.cos(sticker.rotation || 0);
|
||
const sine = Math.sin(sticker.rotation || 0);
|
||
return {
|
||
x: sticker.x + localX * cosine - localY * sine,
|
||
y: sticker.y + localX * sine + localY * cosine,
|
||
};
|
||
}
|
||
|
||
export function stickerControlGeometry(sticker, rotationHandleDistance = 0) {
|
||
const halfWidth = Math.max(1, Number(sticker?.width) || 1) / 2;
|
||
const halfHeight = Math.max(1, Number(sticker?.height) || 1) / 2;
|
||
return {
|
||
corners: [
|
||
stickerPoint(sticker, -halfWidth, -halfHeight),
|
||
stickerPoint(sticker, halfWidth, -halfHeight),
|
||
stickerPoint(sticker, halfWidth, halfHeight),
|
||
stickerPoint(sticker, -halfWidth, halfHeight),
|
||
],
|
||
top: stickerPoint(sticker, 0, -halfHeight),
|
||
rotate: stickerPoint(sticker, 0, -halfHeight - rotationHandleDistance),
|
||
};
|
||
}
|
||
|
||
export function hitTestSticker(sticker, point, tolerance = 10, rotationHandleDistance = 28) {
|
||
if (!sticker || !point) return null;
|
||
const geometry = stickerControlGeometry(sticker, rotationHandleDistance);
|
||
if (Math.hypot(point.x - geometry.rotate.x, point.y - geometry.rotate.y) <= tolerance) return "rotate";
|
||
if (geometry.corners.some((corner) => Math.hypot(point.x - corner.x, point.y - corner.y) <= tolerance)) return "scale";
|
||
const cosine = Math.cos(-(sticker.rotation || 0));
|
||
const sine = Math.sin(-(sticker.rotation || 0));
|
||
const dx = point.x - sticker.x;
|
||
const dy = point.y - sticker.y;
|
||
const localX = dx * cosine - dy * sine;
|
||
const localY = dx * sine + dy * cosine;
|
||
return Math.abs(localX) <= sticker.width / 2 && Math.abs(localY) <= sticker.height / 2 ? "move" : null;
|
||
}
|
||
|
||
export function arrowHeadGeometry(start, end, lineWidth = 4) {
|
||
const angle = Math.atan2(end.y - start.y, end.x - start.x);
|
||
const length = Math.max(12, Math.max(1, Number(lineWidth) || 1) * 4.5);
|
||
const spread = Math.PI / 7;
|
||
return {
|
||
tip: { x: end.x, y: end.y },
|
||
left: {
|
||
x: end.x - length * Math.cos(angle - spread),
|
||
y: end.y - length * Math.sin(angle - spread),
|
||
},
|
||
right: {
|
||
x: end.x - length * Math.cos(angle + spread),
|
||
y: end.y - length * Math.sin(angle + spread),
|
||
},
|
||
};
|
||
}
|
||
|
||
function injectEditorStyles() {
|
||
if (document.getElementById(EDITOR_STYLE_ID)) return;
|
||
const style = document.createElement("style");
|
||
style.id = EDITOR_STYLE_ID;
|
||
style.textContent = EDITOR_CSS;
|
||
document.head.append(style);
|
||
}
|
||
|
||
function loadEditorImage(sourceUrl) {
|
||
return new Promise((resolve, reject) => {
|
||
const image = new Image();
|
||
image.decoding = "async";
|
||
image.onload = () => resolve(image);
|
||
image.onerror = () => reject(new Error("图片加载失败，请重新打开编辑器"));
|
||
image.src = sourceUrl;
|
||
});
|
||
}
|
||
|
||
function canvasBlob(canvas) {
|
||
return new Promise((resolve, reject) => {
|
||
canvas.toBlob((blob) => {
|
||
if (blob) resolve(blob);
|
||
else reject(new Error("无法导出编辑后的图片"));
|
||
}, "image/png");
|
||
});
|
||
}
|
||
|
||
function cloneSnapshot(state) {
|
||
return {
|
||
crop: { ...state.crop },
|
||
ratioKey: state.ratioKey,
|
||
strokes: state.strokes.map((stroke) => ({
|
||
...stroke,
|
||
points: stroke.points.map((point) => ({ ...point })),
|
||
})),
|
||
sticker: state.sticker ? { ...state.sticker } : null,
|
||
};
|
||
}
|
||
|
||
function drawStroke(context, stroke, scaleX = 1, scaleY = scaleX, offsetX = 0, offsetY = 0) {
|
||
if (!stroke?.points?.length) return;
|
||
const points = stroke.points;
|
||
if (stroke.tool === "arrow") {
|
||
if (points.length < 2) return;
|
||
const start = {
|
||
x: (points[0].x - offsetX) * scaleX,
|
||
y: (points[0].y - offsetY) * scaleY,
|
||
};
|
||
const last = points[points.length - 1];
|
||
const end = {
|
||
x: (last.x - offsetX) * scaleX,
|
||
y: (last.y - offsetY) * scaleY,
|
||
};
|
||
if (Math.hypot(end.x - start.x, end.y - start.y) < 1) return;
|
||
const lineWidth = Math.max(1, stroke.width * ((scaleX + scaleY) / 2));
|
||
const head = arrowHeadGeometry(start, end, lineWidth);
|
||
context.save();
|
||
context.lineCap = "round";
|
||
context.lineJoin = "round";
|
||
context.strokeStyle = stroke.color;
|
||
context.fillStyle = stroke.color;
|
||
context.lineWidth = lineWidth;
|
||
context.beginPath();
|
||
context.moveTo(start.x, start.y);
|
||
context.lineTo(end.x, end.y);
|
||
context.stroke();
|
||
context.beginPath();
|
||
context.moveTo(head.tip.x, head.tip.y);
|
||
context.lineTo(head.left.x, head.left.y);
|
||
context.lineTo(head.right.x, head.right.y);
|
||
context.closePath();
|
||
context.fill();
|
||
context.restore();
|
||
return;
|
||
}
|
||
context.save();
|
||
context.lineCap = "round";
|
||
context.lineJoin = "round";
|
||
context.strokeStyle = stroke.tool === "mask" ? "rgba(255,55,79,.52)" : stroke.color;
|
||
context.fillStyle = context.strokeStyle;
|
||
context.lineWidth = Math.max(1, stroke.width * ((scaleX + scaleY) / 2));
|
||
context.beginPath();
|
||
if (points.length === 1) {
|
||
const point = points[0];
|
||
context.arc((point.x - offsetX) * scaleX, (point.y - offsetY) * scaleY, context.lineWidth / 2, 0, Math.PI * 2);
|
||
context.fill();
|
||
} else {
|
||
context.moveTo((points[0].x - offsetX) * scaleX, (points[0].y - offsetY) * scaleY);
|
||
for (const point of points.slice(1)) {
|
||
context.lineTo((point.x - offsetX) * scaleX, (point.y - offsetY) * scaleY);
|
||
}
|
||
context.stroke();
|
||
}
|
||
context.restore();
|
||
}
|
||
|
||
function drawSticker(context, sticker, scaleX = 1, scaleY = scaleX, offsetX = 0, offsetY = 0) {
|
||
if (!sticker?.image) return;
|
||
context.save();
|
||
context.scale(scaleX, scaleY);
|
||
context.translate(sticker.x - offsetX, sticker.y - offsetY);
|
||
context.rotate(sticker.rotation || 0);
|
||
context.globalAlpha = clamp(Number(sticker.opacity ?? 1), 0, 1);
|
||
context.drawImage(sticker.image, -sticker.width / 2, -sticker.height / 2, sticker.width, sticker.height);
|
||
context.restore();
|
||
}
|
||
|
||
function button(label, className = "", title = "") {
|
||
const element = document.createElement("button");
|
||
element.type = "button";
|
||
element.className = className;
|
||
element.textContent = label;
|
||
if (title) element.title = title;
|
||
return element;
|
||
}
|
||
|
||
export async function openReferenceImageEditor({ sourceUrl, filename = "参考图", onConfirm } = {}) {
|
||
if (!sourceUrl) throw new Error("缺少可编辑的参考图地址");
|
||
if (typeof onConfirm !== "function") throw new Error("缺少图片编辑保存回调");
|
||
document.getElementById(EDITOR_ID)?._o1keyClose?.();
|
||
injectEditorStyles();
|
||
const sourceImage = await loadEditorImage(sourceUrl);
|
||
const sourceWidth = sourceImage.naturalWidth || sourceImage.width;
|
||
const sourceHeight = sourceImage.naturalHeight || sourceImage.height;
|
||
if (!sourceWidth || !sourceHeight) throw new Error("无法读取图片尺寸");
|
||
|
||
const previousFocus = document.activeElement;
|
||
const overlay = document.createElement("div");
|
||
overlay.id = EDITOR_ID;
|
||
overlay.setAttribute("role", "dialog");
|
||
overlay.setAttribute("aria-modal", "true");
|
||
overlay.setAttribute("aria-label", "编辑参考图");
|
||
const dialog = document.createElement("div");
|
||
dialog.className = "o1key-reference-editor-dialog";
|
||
|
||
const header = document.createElement("div");
|
||
header.className = "o1key-reference-editor-header";
|
||
const title = document.createElement("strong");
|
||
title.textContent = "编辑参考图";
|
||
const filenameLabel = document.createElement("span");
|
||
filenameLabel.className = "o1key-reference-editor-filename";
|
||
filenameLabel.textContent = filename;
|
||
const closeButton = button("×", "o1key-reference-editor-close", "关闭");
|
||
closeButton.setAttribute("aria-label", "关闭图片编辑器");
|
||
header.append(title, filenameLabel, closeButton);
|
||
|
||
const body = document.createElement("div");
|
||
body.className = "o1key-reference-editor-body";
|
||
const sidebar = document.createElement("aside");
|
||
sidebar.className = "o1key-reference-editor-sidebar";
|
||
const tools = document.createElement("div");
|
||
tools.className = "o1key-reference-editor-tools";
|
||
const toolButtons = new Map();
|
||
for (const [tool, label, tooltip] of [
|
||
["crop", "裁剪", "拖动裁剪框定位；自由比例下可拖动边角调整"],
|
||
["mask", "遮罩", "涂画半透明区域标记，不输出 MASK 数据"],
|
||
["brush", "画笔", "自由圈选或批注图片中的物品"],
|
||
["sticker", "贴图", "上传上层图片，并移动、旋转或等比缩放"],
|
||
["arrow", "箭头", "从箭尾拖向目标位置，箭头尖端指向松开处"],
|
||
]) {
|
||
const toolButton = button(label, "o1key-reference-editor-tool", tooltip);
|
||
toolButton.dataset.tool = tool;
|
||
toolButtons.set(tool, toolButton);
|
||
tools.append(toolButton);
|
||
}
|
||
|
||
const ratioSection = document.createElement("section");
|
||
ratioSection.className = "o1key-reference-editor-section";
|
||
const ratioTitle = document.createElement("div");
|
||
ratioTitle.className = "o1key-reference-editor-section-title";
|
||
ratioTitle.textContent = "快速裁剪";
|
||
const ratios = document.createElement("div");
|
||
ratios.className = "o1key-reference-editor-ratios";
|
||
const ratioButtons = new Map();
|
||
for (const preset of REFERENCE_EDITOR_RATIOS) {
|
||
const ratioButton = button(preset.label, "o1key-reference-editor-ratio");
|
||
ratioButton.dataset.ratio = preset.key;
|
||
ratioButtons.set(preset.key, ratioButton);
|
||
ratios.append(ratioButton);
|
||
}
|
||
ratioSection.append(ratioTitle, ratios);
|
||
|
||
const controlSection = document.createElement("section");
|
||
controlSection.className = "o1key-reference-editor-section o1key-reference-editor-control";
|
||
const widthRow = document.createElement("label");
|
||
widthRow.className = "o1key-reference-editor-control-row";
|
||
const widthText = document.createElement("span");
|
||
widthText.textContent = "粗细";
|
||
const widthInput = document.createElement("input");
|
||
widthInput.type = "range";
|
||
widthInput.min = "2";
|
||
widthInput.max = String(Math.max(24, Math.round(Math.min(sourceWidth, sourceHeight) * 0.12)));
|
||
widthInput.value = String(Math.max(6, Math.round(Math.min(sourceWidth, sourceHeight) * 0.012)));
|
||
const widthValue = document.createElement("span");
|
||
widthValue.className = "o1key-reference-editor-width-value";
|
||
widthRow.append(widthText, widthInput, widthValue);
|
||
const colorRow = document.createElement("label");
|
||
colorRow.className = "o1key-reference-editor-control-row";
|
||
const colorText = document.createElement("span");
|
||
colorText.textContent = "颜色";
|
||
const colorInput = document.createElement("input");
|
||
colorInput.type = "color";
|
||
colorInput.value = "#ff334f";
|
||
colorRow.append(colorText, colorInput);
|
||
controlSection.append(widthRow, colorRow);
|
||
|
||
const stickerSection = document.createElement("section");
|
||
stickerSection.className = "o1key-reference-editor-section o1key-reference-editor-control o1key-reference-editor-sticker-controls";
|
||
const stickerInput = document.createElement("input");
|
||
stickerInput.type = "file";
|
||
stickerInput.accept = "image/png,image/jpeg,image/webp,image/gif,image/bmp";
|
||
stickerInput.hidden = true;
|
||
const stickerUpload = button("上传贴图", "o1key-reference-editor-action", "上传一张上层贴图");
|
||
const stickerName = document.createElement("div");
|
||
stickerName.className = "o1key-reference-editor-sticker-name";
|
||
const opacityRow = document.createElement("label");
|
||
opacityRow.className = "o1key-reference-editor-control-row";
|
||
const opacityText = document.createElement("span");
|
||
opacityText.textContent = "透明度";
|
||
const opacityInput = document.createElement("input");
|
||
opacityInput.type = "range";
|
||
opacityInput.min = "0";
|
||
opacityInput.max = "100";
|
||
opacityInput.value = "100";
|
||
const opacityValue = document.createElement("span");
|
||
opacityValue.className = "o1key-reference-editor-width-value";
|
||
opacityRow.append(opacityText, opacityInput, opacityValue);
|
||
const removeSticker = button("移除贴图", "o1key-reference-editor-action", "移除当前上层贴图");
|
||
stickerSection.append(stickerUpload, stickerInput, stickerName, opacityRow, removeSticker);
|
||
const help = document.createElement("div");
|
||
help.className = "o1key-reference-editor-help";
|
||
|
||
const sidebarActions = document.createElement("div");
|
||
sidebarActions.className = "o1key-reference-editor-control o1key-reference-editor-sidebar-actions";
|
||
const historyRow = document.createElement("div");
|
||
historyRow.className = "o1key-reference-editor-history";
|
||
const undo = button("↶", "o1key-reference-editor-action ghost", "撤销（Ctrl+Z）");
|
||
const redo = button("↷", "o1key-reference-editor-action ghost", "重做（Ctrl+Y）");
|
||
const clearMarks = button("清除标记", "o1key-reference-editor-action", "清除遮罩和画笔内容");
|
||
historyRow.append(undo, redo);
|
||
const reset = button("全部重置", "o1key-reference-editor-action");
|
||
sidebarActions.append(historyRow, clearMarks, reset);
|
||
sidebar.append(tools, ratioSection, controlSection, stickerSection, help, sidebarActions);
|
||
|
||
const stage = document.createElement("div");
|
||
stage.className = "o1key-reference-editor-stage";
|
||
const canvas = document.createElement("canvas");
|
||
canvas.className = "o1key-reference-editor-canvas";
|
||
canvas.tabIndex = 0;
|
||
stage.append(canvas);
|
||
body.append(sidebar, stage);
|
||
|
||
const footer = document.createElement("footer");
|
||
footer.className = "o1key-reference-editor-footer";
|
||
const sizeLabel = document.createElement("span");
|
||
sizeLabel.className = "o1key-reference-editor-size";
|
||
const message = document.createElement("span");
|
||
message.className = "o1key-reference-editor-message";
|
||
const cancel = button("取消", "o1key-reference-editor-action");
|
||
const confirm = button("应用编辑", "o1key-reference-editor-action primary");
|
||
footer.append(sizeLabel, message, cancel, confirm);
|
||
dialog.append(header, body, footer);
|
||
overlay.append(dialog);
|
||
document.body.append(overlay);
|
||
|
||
const state = {
|
||
mode: "crop",
|
||
ratioKey: "original",
|
||
crop: fitCropToRatio(sourceWidth, sourceHeight, "original"),
|
||
strokes: [],
|
||
activeStroke: null,
|
||
sticker: null,
|
||
pointerAction: null,
|
||
canvasWidth: 1,
|
||
canvasHeight: 1,
|
||
history: [],
|
||
historyIndex: -1,
|
||
saving: false,
|
||
};
|
||
const stickerObjectUrls = new Set();
|
||
|
||
const context = canvas.getContext("2d");
|
||
const sourcePoint = (event) => {
|
||
const bounds = canvas.getBoundingClientRect();
|
||
return {
|
||
x: clamp((event.clientX - bounds.left) / Math.max(1, bounds.width) * sourceWidth, 0, sourceWidth),
|
||
y: clamp((event.clientY - bounds.top) / Math.max(1, bounds.height) * sourceHeight, 0, sourceHeight),
|
||
};
|
||
};
|
||
const cropDisplay = () => ({
|
||
x: state.crop.x / sourceWidth * state.canvasWidth,
|
||
y: state.crop.y / sourceHeight * state.canvasHeight,
|
||
width: state.crop.width / sourceWidth * state.canvasWidth,
|
||
height: state.crop.height / sourceHeight * state.canvasHeight,
|
||
});
|
||
const updateControls = () => {
|
||
for (const [tool, toolButton] of toolButtons) toolButton.classList.toggle("active", tool === state.mode);
|
||
for (const [key, ratioButton] of ratioButtons) ratioButton.classList.toggle("active", key === state.ratioKey);
|
||
ratioSection.hidden = state.mode !== "crop";
|
||
controlSection.hidden = state.mode === "crop" || state.mode === "sticker";
|
||
stickerSection.hidden = state.mode !== "sticker";
|
||
colorRow.hidden = state.mode !== "brush" && state.mode !== "arrow";
|
||
clearMarks.hidden = state.mode !== "mask" && state.mode !== "brush" && state.mode !== "arrow";
|
||
reset.textContent = state.mode === "crop" ? "重置裁剪" : state.mode === "sticker" ? "重置贴图" : "全部重置";
|
||
widthValue.textContent = `${widthInput.value}px`;
|
||
stickerUpload.textContent = state.sticker ? "更换贴图" : "上传贴图";
|
||
stickerName.textContent = state.sticker?.name || "尚未上传贴图";
|
||
opacityInput.value = String(Math.round((state.sticker?.opacity ?? 1) * 100));
|
||
opacityValue.textContent = `${opacityInput.value}%`;
|
||
opacityInput.disabled = !state.sticker;
|
||
removeSticker.disabled = !state.sticker;
|
||
reset.disabled = state.mode === "sticker" && !state.sticker;
|
||
help.textContent = state.mode === "crop"
|
||
? "选择比例即可得到居中最大裁剪框；拖动框可调整取景。自由比例支持拖动边角。"
|
||
: state.mode === "mask"
|
||
? "半透明红色只作为图片上的视觉标记，会合成进参考图，不会创建 MASK 数据。"
|
||
: state.mode === "brush"
|
||
? "用画笔自由圈选或标注物品。可调整颜色和线条粗细。"
|
||
: state.mode === "arrow"
|
||
? "从箭尾按下并拖向目标，松开位置就是箭头尖端。可调整颜色和粗细。"
|
||
: state.sticker
|
||
? "拖动贴图移动；拖动四角等比缩放；拖动顶部圆点旋转。按住 Shift 可按 15° 吸附。"
|
||
: "上传图片后，它会作为上层贴图置于画面中央。";
|
||
undo.disabled = state.historyIndex <= 0;
|
||
redo.disabled = state.historyIndex >= state.history.length - 1;
|
||
clearMarks.disabled = state.strokes.length === 0;
|
||
sizeLabel.textContent = `${Math.max(1, Math.round(state.crop.width))} × ${Math.max(1, Math.round(state.crop.height))} px`;
|
||
};
|
||
const drawCropOverlay = () => {
|
||
const crop = cropDisplay();
|
||
context.save();
|
||
context.fillStyle = "rgba(0,0,0,.56)";
|
||
context.beginPath();
|
||
context.rect(0, 0, state.canvasWidth, state.canvasHeight);
|
||
context.rect(crop.x, crop.y, crop.width, crop.height);
|
||
context.fill("evenodd");
|
||
context.strokeStyle = "rgba(255,255,255,.96)";
|
||
context.lineWidth = 1.5;
|
||
context.strokeRect(crop.x + .75, crop.y + .75, Math.max(0, crop.width - 1.5), Math.max(0, crop.height - 1.5));
|
||
context.strokeStyle = "rgba(255,255,255,.4)";
|
||
context.lineWidth = 1;
|
||
for (const part of [1 / 3, 2 / 3]) {
|
||
context.beginPath();
|
||
context.moveTo(crop.x + crop.width * part, crop.y);
|
||
context.lineTo(crop.x + crop.width * part, crop.y + crop.height);
|
||
context.moveTo(crop.x, crop.y + crop.height * part);
|
||
context.lineTo(crop.x + crop.width, crop.y + crop.height * part);
|
||
context.stroke();
|
||
}
|
||
if (state.ratioKey === "free") {
|
||
context.fillStyle = "#fff";
|
||
for (const [x, y] of [
|
||
[crop.x, crop.y], [crop.x + crop.width, crop.y],
|
||
[crop.x, crop.y + crop.height], [crop.x + crop.width, crop.y + crop.height],
|
||
]) context.fillRect(x - 5, y - 5, 10, 10);
|
||
}
|
||
context.restore();
|
||
};
|
||
const drawStickerControls = () => {
|
||
if (!state.sticker) return;
|
||
const scaleX = state.canvasWidth / sourceWidth;
|
||
const scaleY = state.canvasHeight / sourceHeight;
|
||
const sourceScale = Math.max(scaleX, scaleY);
|
||
const geometry = stickerControlGeometry(state.sticker, 28 / sourceScale);
|
||
const displayPoint = (point) => ({ x: point.x * scaleX, y: point.y * scaleY });
|
||
const corners = geometry.corners.map(displayPoint);
|
||
const top = displayPoint(geometry.top);
|
||
const rotateHandle = displayPoint(geometry.rotate);
|
||
context.save();
|
||
context.strokeStyle = "rgba(255,255,255,.96)";
|
||
context.fillStyle = "#8daa83";
|
||
context.lineWidth = 1.5;
|
||
context.beginPath();
|
||
context.moveTo(corners[0].x, corners[0].y);
|
||
for (const corner of corners.slice(1)) context.lineTo(corner.x, corner.y);
|
||
context.closePath();
|
||
context.stroke();
|
||
context.beginPath();
|
||
context.moveTo(top.x, top.y);
|
||
context.lineTo(rotateHandle.x, rotateHandle.y);
|
||
context.stroke();
|
||
for (const corner of corners) {
|
||
context.fillRect(corner.x - 5, corner.y - 5, 10, 10);
|
||
context.strokeRect(corner.x - 5, corner.y - 5, 10, 10);
|
||
}
|
||
context.beginPath();
|
||
context.arc(rotateHandle.x, rotateHandle.y, 6, 0, Math.PI * 2);
|
||
context.fill();
|
||
context.stroke();
|
||
context.restore();
|
||
};
|
||
const render = () => {
|
||
const pixelRatio = Math.max(1, window.devicePixelRatio || 1);
|
||
context.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
|
||
context.clearRect(0, 0, state.canvasWidth, state.canvasHeight);
|
||
context.drawImage(sourceImage, 0, 0, state.canvasWidth, state.canvasHeight);
|
||
drawSticker(context, state.sticker, state.canvasWidth / sourceWidth, state.canvasHeight / sourceHeight);
|
||
const allStrokes = state.activeStroke ? [...state.strokes, state.activeStroke] : state.strokes;
|
||
for (const stroke of allStrokes) {
|
||
drawStroke(context, stroke, state.canvasWidth / sourceWidth, state.canvasHeight / sourceHeight);
|
||
}
|
||
if (state.mode === "crop") drawCropOverlay();
|
||
if (state.mode === "sticker") drawStickerControls();
|
||
updateControls();
|
||
};
|
||
const resizeCanvas = () => {
|
||
const availableWidth = Math.max(240, (stage.clientWidth || window.innerWidth * .7) - 36);
|
||
const availableHeight = Math.max(220, (stage.clientHeight || window.innerHeight * .72) - 36);
|
||
const scale = Math.min(availableWidth / sourceWidth, availableHeight / sourceHeight, 1);
|
||
state.canvasWidth = Math.max(1, Math.round(sourceWidth * scale));
|
||
state.canvasHeight = Math.max(1, Math.round(sourceHeight * scale));
|
||
const pixelRatio = Math.max(1, window.devicePixelRatio || 1);
|
||
canvas.width = Math.max(1, Math.round(state.canvasWidth * pixelRatio));
|
||
canvas.height = Math.max(1, Math.round(state.canvasHeight * pixelRatio));
|
||
canvas.style.width = `${state.canvasWidth}px`;
|
||
canvas.style.height = `${state.canvasHeight}px`;
|
||
render();
|
||
};
|
||
const pushHistory = () => {
|
||
state.history.splice(state.historyIndex + 1);
|
||
state.history.push(cloneSnapshot(state));
|
||
if (state.history.length > 40) state.history.shift();
|
||
state.historyIndex = state.history.length - 1;
|
||
updateControls();
|
||
};
|
||
const restoreHistory = (index) => {
|
||
const snapshot = state.history[index];
|
||
if (!snapshot) return;
|
||
state.historyIndex = index;
|
||
state.crop = { ...snapshot.crop };
|
||
state.ratioKey = snapshot.ratioKey;
|
||
state.strokes = snapshot.strokes.map((stroke) => ({
|
||
...stroke,
|
||
points: stroke.points.map((point) => ({ ...point })),
|
||
}));
|
||
state.sticker = snapshot.sticker ? { ...snapshot.sticker } : null;
|
||
state.activeStroke = null;
|
||
render();
|
||
};
|
||
const hitCrop = (point) => {
|
||
const tolerance = 12 / Math.max(state.canvasWidth / sourceWidth, state.canvasHeight / sourceHeight);
|
||
const crop = state.crop;
|
||
if (state.ratioKey === "free") {
|
||
const corners = {
|
||
nw: [crop.x, crop.y], ne: [crop.x + crop.width, crop.y],
|
||
sw: [crop.x, crop.y + crop.height], se: [crop.x + crop.width, crop.y + crop.height],
|
||
};
|
||
for (const [handle, [x, y]] of Object.entries(corners)) {
|
||
if (Math.hypot(point.x - x, point.y - y) <= tolerance) return handle;
|
||
}
|
||
}
|
||
if (
|
||
point.x >= crop.x && point.x <= crop.x + crop.width
|
||
&& point.y >= crop.y && point.y <= crop.y + crop.height
|
||
) return "move";
|
||
return "create";
|
||
};
|
||
const updateFreeCrop = (action, point) => {
|
||
const origin = action.origin;
|
||
if (action.kind === "move") {
|
||
state.crop = constrainCropRect({
|
||
...action.crop,
|
||
x: action.crop.x + point.x - origin.x,
|
||
y: action.crop.y + point.y - origin.y,
|
||
}, sourceWidth, sourceHeight);
|
||
return;
|
||
}
|
||
const anchor = action.kind === "create" ? origin : {
|
||
x: action.kind.includes("w") ? action.crop.x + action.crop.width : action.crop.x,
|
||
y: action.kind.includes("n") ? action.crop.y + action.crop.height : action.crop.y,
|
||
};
|
||
state.crop = constrainCropRect({
|
||
x: Math.min(anchor.x, point.x),
|
||
y: Math.min(anchor.y, point.y),
|
||
width: Math.max(MIN_CROP_SIZE, Math.abs(point.x - anchor.x)),
|
||
height: Math.max(MIN_CROP_SIZE, Math.abs(point.y - anchor.y)),
|
||
}, sourceWidth, sourceHeight);
|
||
};
|
||
const moveFixedCrop = (action, point) => {
|
||
state.crop = constrainCropRect({
|
||
...action.crop,
|
||
x: action.crop.x + point.x - action.origin.x,
|
||
y: action.crop.y + point.y - action.origin.y,
|
||
}, sourceWidth, sourceHeight);
|
||
};
|
||
const resetStickerTransform = () => {
|
||
if (!state.sticker?.image) return;
|
||
const fitted = fitStickerTransform(
|
||
state.sticker.image.naturalWidth || state.sticker.image.width,
|
||
state.sticker.image.naturalHeight || state.sticker.image.height,
|
||
sourceWidth,
|
||
sourceHeight,
|
||
);
|
||
state.sticker = {
|
||
...state.sticker,
|
||
...fitted,
|
||
};
|
||
};
|
||
const stickerHit = (point) => {
|
||
const sourceScale = Math.max(state.canvasWidth / sourceWidth, state.canvasHeight / sourceHeight);
|
||
return hitTestSticker(state.sticker, point, 11 / sourceScale, 28 / sourceScale);
|
||
};
|
||
const updateStickerTransform = (action, point, event) => {
|
||
if (!state.sticker || !action?.sticker) return;
|
||
if (action.kind === "move") {
|
||
state.sticker.x = clamp(action.sticker.x + point.x - action.origin.x, 0, sourceWidth);
|
||
state.sticker.y = clamp(action.sticker.y + point.y - action.origin.y, 0, sourceHeight);
|
||
} else if (action.kind === "scale") {
|
||
const initialDistance = Math.max(1, Math.hypot(
|
||
action.origin.x - action.sticker.x,
|
||
action.origin.y - action.sticker.y,
|
||
));
|
||
const currentDistance = Math.max(1, Math.hypot(
|
||
point.x - action.sticker.x,
|
||
point.y - action.sticker.y,
|
||
));
|
||
const minimumScale = 16 / Math.max(1, Math.min(action.sticker.width, action.sticker.height));
|
||
const maximumScale = Math.max(sourceWidth, sourceHeight) * 4
|
||
/ Math.max(1, Math.max(action.sticker.width, action.sticker.height));
|
||
const scale = clamp(currentDistance / initialDistance, minimumScale, maximumScale);
|
||
state.sticker.width = action.sticker.width * scale;
|
||
state.sticker.height = action.sticker.height * scale;
|
||
} else if (action.kind === "rotate") {
|
||
let rotation = Math.atan2(point.y - action.sticker.y, point.x - action.sticker.x) - action.angleOffset;
|
||
if (event?.shiftKey) rotation = Math.round(rotation / (Math.PI / 12)) * (Math.PI / 12);
|
||
state.sticker.rotation = rotation;
|
||
}
|
||
};
|
||
|
||
stickerUpload.addEventListener("click", () => stickerInput.click());
|
||
stickerInput.addEventListener("change", async () => {
|
||
const file = stickerInput.files?.[0];
|
||
stickerInput.value = "";
|
||
if (!file) return;
|
||
if (!file.type?.startsWith("image/")) {
|
||
message.textContent = "请选择图片文件";
|
||
return;
|
||
}
|
||
const objectUrl = URL.createObjectURL(file);
|
||
try {
|
||
const image = await loadEditorImage(objectUrl);
|
||
stickerObjectUrls.add(objectUrl);
|
||
state.sticker = {
|
||
image,
|
||
name: file.name,
|
||
objectUrl,
|
||
...fitStickerTransform(
|
||
image.naturalWidth || image.width,
|
||
image.naturalHeight || image.height,
|
||
sourceWidth,
|
||
sourceHeight,
|
||
),
|
||
};
|
||
state.mode = "sticker";
|
||
message.textContent = "";
|
||
pushHistory();
|
||
render();
|
||
} catch (error) {
|
||
URL.revokeObjectURL(objectUrl);
|
||
message.textContent = error?.message || String(error);
|
||
}
|
||
});
|
||
opacityInput.addEventListener("input", () => {
|
||
if (!state.sticker) return;
|
||
state.sticker.opacity = Number(opacityInput.value) / 100;
|
||
render();
|
||
});
|
||
opacityInput.addEventListener("change", () => {
|
||
if (state.sticker) pushHistory();
|
||
});
|
||
removeSticker.addEventListener("click", () => {
|
||
if (!state.sticker) return;
|
||
state.sticker = null;
|
||
pushHistory();
|
||
render();
|
||
});
|
||
|
||
for (const [tool, toolButton] of toolButtons) {
|
||
toolButton.addEventListener("click", () => {
|
||
state.mode = tool;
|
||
canvas.style.cursor = tool === "crop" ? "move" : tool === "sticker" ? (state.sticker ? "grab" : "default") : "crosshair";
|
||
render();
|
||
});
|
||
}
|
||
for (const preset of REFERENCE_EDITOR_RATIOS) {
|
||
ratioButtons.get(preset.key).addEventListener("click", () => {
|
||
state.mode = "crop";
|
||
state.ratioKey = preset.key;
|
||
if (preset.key !== "free") state.crop = fitCropToRatio(sourceWidth, sourceHeight, preset.ratio);
|
||
pushHistory();
|
||
render();
|
||
});
|
||
}
|
||
widthInput.addEventListener("input", render);
|
||
colorInput.addEventListener("input", render);
|
||
undo.addEventListener("click", () => restoreHistory(state.historyIndex - 1));
|
||
redo.addEventListener("click", () => restoreHistory(state.historyIndex + 1));
|
||
clearMarks.addEventListener("click", () => {
|
||
if (!state.strokes.length) return;
|
||
state.strokes = [];
|
||
pushHistory();
|
||
render();
|
||
});
|
||
reset.addEventListener("click", () => {
|
||
if (state.mode === "crop") {
|
||
state.ratioKey = "original";
|
||
state.crop = fitCropToRatio(sourceWidth, sourceHeight, "original");
|
||
} else if (state.mode === "sticker") {
|
||
resetStickerTransform();
|
||
} else {
|
||
state.strokes = [];
|
||
state.activeStroke = null;
|
||
}
|
||
pushHistory();
|
||
render();
|
||
});
|
||
canvas.addEventListener("pointerdown", (event) => {
|
||
if (state.saving) return;
|
||
const point = sourcePoint(event);
|
||
canvas.setPointerCapture?.(event.pointerId);
|
||
if (state.mode === "crop") {
|
||
const kind = hitCrop(point);
|
||
state.pointerAction = { target: "crop", kind, origin: point, crop: { ...state.crop } };
|
||
if (kind === "create") {
|
||
state.ratioKey = "free";
|
||
updateFreeCrop(state.pointerAction, point);
|
||
}
|
||
} else if (state.mode === "sticker") {
|
||
const kind = stickerHit(point);
|
||
if (!kind) return;
|
||
state.pointerAction = {
|
||
target: "sticker",
|
||
kind,
|
||
origin: point,
|
||
sticker: { ...state.sticker },
|
||
angleOffset: Math.atan2(point.y - state.sticker.y, point.x - state.sticker.x)
|
||
- state.sticker.rotation,
|
||
};
|
||
canvas.style.cursor = kind === "move" ? "grabbing" : kind === "scale" ? "nwse-resize" : "crosshair";
|
||
} else {
|
||
state.activeStroke = {
|
||
tool: state.mode,
|
||
color: colorInput.value,
|
||
width: Number(widthInput.value),
|
||
points: [point],
|
||
};
|
||
}
|
||
event.preventDefault();
|
||
render();
|
||
});
|
||
canvas.addEventListener("pointermove", (event) => {
|
||
const point = sourcePoint(event);
|
||
if (state.activeStroke) {
|
||
const previous = state.activeStroke.points[state.activeStroke.points.length - 1];
|
||
if (state.activeStroke.tool === "arrow") {
|
||
if (state.activeStroke.points.length === 1) state.activeStroke.points.push(point);
|
||
else state.activeStroke.points[1] = point;
|
||
} else if (Math.hypot(point.x - previous.x, point.y - previous.y) >= 1) {
|
||
state.activeStroke.points.push(point);
|
||
}
|
||
render();
|
||
return;
|
||
}
|
||
if (!state.pointerAction) return;
|
||
if (state.pointerAction.target === "sticker") {
|
||
updateStickerTransform(state.pointerAction, point, event);
|
||
} else if (state.ratioKey === "free") updateFreeCrop(state.pointerAction, point);
|
||
else moveFixedCrop(state.pointerAction, point);
|
||
render();
|
||
});
|
||
canvas.addEventListener("pointermove", (event) => {
|
||
if (state.mode !== "sticker" || state.pointerAction || state.activeStroke) return;
|
||
const kind = stickerHit(sourcePoint(event));
|
||
canvas.style.cursor = kind === "move" ? "grab" : kind === "scale" ? "nwse-resize" : kind === "rotate" ? "crosshair" : "default";
|
||
});
|
||
const finishPointer = () => {
|
||
if (state.activeStroke) {
|
||
const points = state.activeStroke.points;
|
||
const validArrow = state.activeStroke.tool !== "arrow" || (
|
||
points.length > 1
|
||
&& Math.hypot(points[1].x - points[0].x, points[1].y - points[0].y) >= 1
|
||
);
|
||
if (validArrow) state.strokes.push(state.activeStroke);
|
||
state.activeStroke = null;
|
||
if (validArrow) pushHistory();
|
||
} else if (state.pointerAction) pushHistory();
|
||
state.pointerAction = null;
|
||
render();
|
||
};
|
||
canvas.addEventListener("pointerup", finishPointer);
|
||
canvas.addEventListener("pointercancel", finishPointer);
|
||
|
||
const close = () => {
|
||
if (state.saving) return;
|
||
window.removeEventListener("resize", resizeCanvas);
|
||
for (const objectUrl of stickerObjectUrls) URL.revokeObjectURL(objectUrl);
|
||
stickerObjectUrls.clear();
|
||
overlay.remove();
|
||
previousFocus?.focus?.();
|
||
};
|
||
overlay._o1keyClose = close;
|
||
closeButton.addEventListener("click", close);
|
||
cancel.addEventListener("click", close);
|
||
overlay.addEventListener("mousedown", (event) => {
|
||
if (event.target === overlay) close();
|
||
});
|
||
overlay.addEventListener("keydown", (event) => {
|
||
if (event.key === "Escape") {
|
||
event.preventDefault();
|
||
close();
|
||
} else if (event.ctrlKey && event.key.toLowerCase() === "z") {
|
||
event.preventDefault();
|
||
restoreHistory(state.historyIndex + (event.shiftKey ? 1 : -1));
|
||
} else if (event.ctrlKey && event.key.toLowerCase() === "y") {
|
||
event.preventDefault();
|
||
restoreHistory(state.historyIndex + 1);
|
||
}
|
||
});
|
||
confirm.addEventListener("click", async () => {
|
||
if (state.saving) return;
|
||
state.saving = true;
|
||
confirm.disabled = true;
|
||
cancel.disabled = true;
|
||
confirm.textContent = "保存中…";
|
||
message.textContent = "";
|
||
try {
|
||
const crop = constrainCropRect(state.crop, sourceWidth, sourceHeight, 1);
|
||
const output = document.createElement("canvas");
|
||
output.width = Math.max(1, Math.round(crop.width));
|
||
output.height = Math.max(1, Math.round(crop.height));
|
||
const outputContext = output.getContext("2d");
|
||
outputContext.drawImage(
|
||
sourceImage,
|
||
crop.x, crop.y, crop.width, crop.height,
|
||
0, 0, output.width, output.height,
|
||
);
|
||
const scaleX = output.width / crop.width;
|
||
const scaleY = output.height / crop.height;
|
||
drawSticker(outputContext, state.sticker, scaleX, scaleY, crop.x, crop.y);
|
||
for (const stroke of state.strokes) drawStroke(outputContext, stroke, scaleX, scaleY, crop.x, crop.y);
|
||
const blob = await canvasBlob(output);
|
||
await onConfirm({
|
||
blob,
|
||
filename: editedReferenceFilename(filename),
|
||
width: output.width,
|
||
height: output.height,
|
||
});
|
||
state.saving = false;
|
||
close();
|
||
} catch (error) {
|
||
state.saving = false;
|
||
confirm.disabled = false;
|
||
cancel.disabled = false;
|
||
confirm.textContent = "应用编辑";
|
||
message.textContent = error?.message || String(error);
|
||
}
|
||
});
|
||
|
||
pushHistory();
|
||
window.addEventListener("resize", resizeCanvas);
|
||
requestAnimationFrame(resizeCanvas);
|
||
overlay.tabIndex = -1;
|
||
overlay.focus();
|
||
return overlay;
|
||
}
|