767 lines
30 KiB
JavaScript
767 lines
30 KiB
JavaScript
import { getSelectedLayer, boardExtent, editSnapshot, rememberEdit, editHistorySize, clearEditHistory, undoSceneEdit, setExpandedBoard, setMoveFrameVisible, moveSelectedLayer, previewLayerMove, cancelLayerPreview, clearPixelLayer, subscribeScene } from "../scene-board.js";
|
||
import {
|
||
announce,
|
||
createLocalState,
|
||
registerWorkspace,
|
||
setActiveButton,
|
||
} from "../core.js";
|
||
import { refreshColorTrigger, setColorValue } from "../color-picker.js";
|
||
import { hexToRgb, rgbToHex } from "../color-math.js";
|
||
import {
|
||
BRUSH_MODE_NORMAL,
|
||
BRUSH_MODE_PIXEL,
|
||
PixelUndoHistory,
|
||
brushModeSpec,
|
||
brushStampPoints,
|
||
chooseCoordinateGuideStep,
|
||
clampCanvasView,
|
||
clampFloatingButton,
|
||
coordinateGuideTicks,
|
||
linePoints,
|
||
normalizeBrushSize,
|
||
restoreCanvasToolState,
|
||
zoomCanvasView,
|
||
} from "../canvas-tools-model.js";
|
||
import { setControlReady, setControlUnavailable } from "../interaction-feedback.js";
|
||
import {
|
||
boardPoint,
|
||
commitPixelChanges,
|
||
fillPixelLayer,
|
||
getBoardOverlay,
|
||
getInteractionMode,
|
||
getPixelBuffer,
|
||
renderPixelDraft,
|
||
} from "../scene-board.js";
|
||
|
||
const canvas = getBoardOverlay();
|
||
const localState = createLocalState("canvas-tools", 3);
|
||
const previousLocalState = createLocalState("canvas-tools", 2).load(null)
|
||
|| createLocalState("canvas-tools", 1).load(null);
|
||
const legacyState = createLocalState("canvas", 3).load(null)
|
||
|| createLocalState("canvas", 2).load(null)
|
||
|| {};
|
||
const toolButtons = Array.from(document.querySelectorAll("[data-canvas-tool]"));
|
||
const paintColor = document.getElementById("paint-color");
|
||
const backgroundColor = document.getElementById("background-color");
|
||
const brushSizeInput = document.getElementById("brush-size");
|
||
const brushSizePresets = Array.from(document.querySelectorAll("[data-brush-size]"));
|
||
const pixelEditToggle = document.getElementById("pixel-edit-toggle");
|
||
const pixelEditStatus = document.getElementById("pixel-edit-status");
|
||
const pixelGrid = document.getElementById("pixel-grid");
|
||
const boardStage = document.getElementById("board-stage");
|
||
const coordinateGuide = document.getElementById("canvas-coordinate-guide");
|
||
const coordinateGuideContext = coordinateGuide.getContext("2d");
|
||
const canvasWorkbench = document.querySelector(".canvas-workbench");
|
||
const startEditButton = document.getElementById("start-canvas-edit");
|
||
const assistive = document.getElementById("canvas-edit-assistive");
|
||
const assistiveToggle = document.getElementById("canvas-assistive-toggle");
|
||
const assistiveMenu = document.getElementById("canvas-assistive-menu");
|
||
const editorModeHint = document.getElementById("canvas-edit-mode-hint");
|
||
const coordinateGuideToggle = document.getElementById("toggle-canvas-coordinates");
|
||
const undoButton = document.getElementById("undo-canvas-edit");
|
||
const exitEditButton = document.getElementById("exit-canvas-edit");
|
||
const moveViewButton = document.getElementById("move-canvas-view");
|
||
const continueEditButton = document.getElementById("continue-canvas-edit");
|
||
const savedTools = restoreCanvasToolState(localState.load(null), previousLocalState || legacyState);
|
||
let tool = savedTools.tool;
|
||
let previousDrawingTool = tool;
|
||
let pixelEditEnabled = savedTools.pixelEditEnabled;
|
||
let normalBrushSize = savedTools.normalBrushSize;
|
||
let pixelBrushSize = savedTools.pixelBrushSize;
|
||
let coordinateGuideEnabled = savedTools.coordinateGuideEnabled;
|
||
let drawing = false;
|
||
let drawingPointerId = null;
|
||
let lastPoint = null;
|
||
let drawingBefore = null;
|
||
let editorActive = false;
|
||
let editorMode = "draw";
|
||
let view = { scale: 1, x: 0, y: 0 };
|
||
let viewGesture = null;
|
||
let assistiveDrag = null;
|
||
let suppressAssistiveClick = false;
|
||
let coordinateGuideFrame = null;
|
||
let assistivePosition = { x: 36, y: window.innerHeight / 2 };
|
||
const viewPointers = new Map();
|
||
let expandedEnabled=Boolean(localState.load({}).expandedEnabled);
|
||
let layerDrag=null;
|
||
const expandedToggle=document.getElementById("toggle-expanded-board");
|
||
const moveLayerButton=document.getElementById("move-current-layer");
|
||
const exitLayerMoveButton=document.getElementById("exit-layer-move");
|
||
const moveControls=document.getElementById("layer-move-controls");
|
||
const offsetX=document.getElementById("layer-offset-x"),offsetY=document.getElementById("layer-offset-y");
|
||
|
||
paintColor.value = savedTools.paintColor || paintColor.value;
|
||
backgroundColor.value = savedTools.backgroundColor || backgroundColor.value;
|
||
|
||
function brushMode() {
|
||
return pixelEditEnabled ? BRUSH_MODE_PIXEL : BRUSH_MODE_NORMAL;
|
||
}
|
||
|
||
function currentBrushSize() {
|
||
return pixelEditEnabled ? pixelBrushSize : normalBrushSize;
|
||
}
|
||
|
||
function setPixel(x,y,rgb) {
|
||
const layer=getSelectedLayer(),{origin,size}=boardExtent(),worldX=x-64+layer.x,worldY=y-64+layer.y;
|
||
if(x<0||x>=192||y<0||y>=192||worldX<origin||worldX>=origin+size||worldY<origin||worldY>=origin+size)return;
|
||
const i=(y*192+x)*4;
|
||
layer.pixels.set(tool==="eraser"?[0,0,0,0]:[rgb.r,rgb.g,rgb.b,255],i);
|
||
}
|
||
|
||
function activeRgb() {
|
||
return hexToRgb(paintColor.value);
|
||
}
|
||
|
||
function stampBrush(centerX, centerY, rgb) {
|
||
brushStampPoints(centerX+64-getSelectedLayer().x, centerY+64-getSelectedLayer().y, currentBrushSize(), brushMode(),192,192)
|
||
.forEach((point) => setPixel(point.x, point.y, rgb));
|
||
}
|
||
|
||
function paintLine(from, to) {
|
||
const rgb = activeRgb();
|
||
linePoints(from, to).forEach((point) => stampBrush(point.x, point.y, rgb));
|
||
}
|
||
|
||
function paintEvent(event) {
|
||
const samples = typeof event.getCoalescedEvents === "function" ? event.getCoalescedEvents() : [event];
|
||
for (const sample of samples.length ? samples : [event]) {
|
||
const point = boardPoint(sample);
|
||
paintLine(lastPoint || point, point);
|
||
lastPoint = point;
|
||
}
|
||
renderPixelDraft();
|
||
}
|
||
|
||
function pixelSnapshot() {return {scene:editSnapshot(),pixels:getSelectedLayer().pixels?.slice()};}
|
||
function updateUndoControl() {if(editHistorySize()>0)setControlReady(undoButton);else setControlUnavailable(undoButton,"还没有可以撤销的编辑操作。");}
|
||
function clearUndoHistory() {clearEditHistory();updateUndoControl();}
|
||
function recordPixelOperation(before) {
|
||
if(!before)return false;
|
||
const l=getSelectedLayer(),changed=before.pixels?.some((v,i)=>v!==l.pixels[i]);
|
||
if(changed)l.revision++;
|
||
if(before.scene!==editSnapshot()){rememberEdit(before.scene);updateUndoControl();return true;}return false;
|
||
}
|
||
|
||
function viewportBounds() {
|
||
return {
|
||
viewportWidth: window.innerWidth,
|
||
viewportHeight: window.innerHeight,
|
||
baseSize: Math.max(1, boardStage.offsetWidth),
|
||
minVisible: 48,
|
||
};
|
||
}
|
||
|
||
function hideCoordinateGuide() {
|
||
if (coordinateGuideFrame !== null) {
|
||
window.cancelAnimationFrame(coordinateGuideFrame);
|
||
coordinateGuideFrame = null;
|
||
}
|
||
coordinateGuide.hidden = true;
|
||
}
|
||
|
||
function renderCoordinateGuide() {
|
||
coordinateGuideFrame = null;
|
||
if (!editorActive || !coordinateGuideEnabled || getInteractionMode() !== "pixels") {
|
||
coordinateGuide.hidden = true;
|
||
return;
|
||
}
|
||
|
||
const width = window.innerWidth;
|
||
const height = window.innerHeight;
|
||
const ratio = Math.max(1, window.devicePixelRatio || 1);
|
||
const physicalWidth = Math.max(1, Math.round(width * ratio));
|
||
const physicalHeight = Math.max(1, Math.round(height * ratio));
|
||
if (coordinateGuide.width !== physicalWidth || coordinateGuide.height !== physicalHeight) {
|
||
coordinateGuide.width = physicalWidth;
|
||
coordinateGuide.height = physicalHeight;
|
||
}
|
||
coordinateGuide.hidden = false;
|
||
coordinateGuideContext.setTransform(ratio, 0, 0, ratio, 0, 0);
|
||
coordinateGuideContext.clearRect(0, 0, width, height);
|
||
|
||
const rect = boardStage.getBoundingClientRect();
|
||
const left = Math.max(0, rect.left);
|
||
const top = Math.max(0, rect.top);
|
||
const right = Math.min(width, rect.right);
|
||
const bottom = Math.min(height, rect.bottom);
|
||
if (right <= left || bottom <= top || rect.width <= 0) return;
|
||
|
||
const extent=boardExtent();
|
||
const step = chooseCoordinateGuideStep(rect.width / extent.size);
|
||
const xTicks = coordinateGuideTicks({
|
||
count: extent.size, origin: extent.origin,
|
||
boardStart: rect.left,
|
||
boardSize: rect.width,
|
||
visibleStart: left,
|
||
visibleEnd: right,
|
||
step,
|
||
});
|
||
const yTicks = coordinateGuideTicks({
|
||
count: extent.size, origin: extent.origin,
|
||
boardStart: rect.top,
|
||
boardSize: rect.height,
|
||
visibleStart: top,
|
||
visibleEnd: bottom,
|
||
step,
|
||
});
|
||
const rulerSize = 24;
|
||
const rulerBottom = Math.min(bottom, top + rulerSize);
|
||
const rulerRight = Math.min(right, left + rulerSize);
|
||
|
||
coordinateGuideContext.save();
|
||
coordinateGuideContext.beginPath();
|
||
coordinateGuideContext.rect(left, top, right - left, bottom - top);
|
||
coordinateGuideContext.clip();
|
||
|
||
coordinateGuideContext.beginPath();
|
||
for (const tick of xTicks) {
|
||
coordinateGuideContext.moveTo(tick.position, top);
|
||
coordinateGuideContext.lineTo(tick.position, bottom);
|
||
}
|
||
for (const tick of yTicks) {
|
||
coordinateGuideContext.moveTo(left, tick.position);
|
||
coordinateGuideContext.lineTo(right, tick.position);
|
||
}
|
||
coordinateGuideContext.strokeStyle = "rgba(255, 255, 255, 0.42)";
|
||
coordinateGuideContext.lineWidth = 1;
|
||
coordinateGuideContext.stroke();
|
||
|
||
coordinateGuideContext.fillStyle = "rgba(255, 255, 255, 0.20)";
|
||
coordinateGuideContext.fillRect(left, top, right - left, rulerBottom - top);
|
||
coordinateGuideContext.fillRect(left, top, rulerRight - left, bottom - top);
|
||
coordinateGuideContext.fillStyle = "rgba(255, 255, 255, 0.34)";
|
||
coordinateGuideContext.fillRect(left, top, rulerRight - left, rulerBottom - top);
|
||
|
||
coordinateGuideContext.beginPath();
|
||
for (const tick of xTicks) {
|
||
coordinateGuideContext.moveTo(tick.position, rulerBottom - 7);
|
||
coordinateGuideContext.lineTo(tick.position, rulerBottom);
|
||
}
|
||
for (const tick of yTicks) {
|
||
coordinateGuideContext.moveTo(rulerRight - 7, tick.position);
|
||
coordinateGuideContext.lineTo(rulerRight, tick.position);
|
||
}
|
||
coordinateGuideContext.strokeStyle = "rgba(255, 255, 255, 0.88)";
|
||
coordinateGuideContext.stroke();
|
||
|
||
coordinateGuideContext.fillStyle = "rgba(255, 255, 255, 0.96)";
|
||
coordinateGuideContext.font = "10px ui-monospace, SFMono-Regular, Consolas, monospace";
|
||
coordinateGuideContext.textBaseline = "top";
|
||
for (const tick of xTicks) {
|
||
coordinateGuideContext.fillText(String(tick.value), tick.position + 2, top + 2);
|
||
}
|
||
for (const tick of yTicks) {
|
||
coordinateGuideContext.fillText(String(tick.value), left + 2, tick.position + 2);
|
||
}
|
||
coordinateGuideContext.restore();
|
||
}
|
||
|
||
function scheduleCoordinateGuideRender() {
|
||
if (!editorActive || !coordinateGuideEnabled || getInteractionMode() !== "pixels") {
|
||
hideCoordinateGuide();
|
||
return;
|
||
}
|
||
coordinateGuide.hidden = false;
|
||
if (coordinateGuideFrame === null) {
|
||
coordinateGuideFrame = window.requestAnimationFrame(renderCoordinateGuide);
|
||
}
|
||
}
|
||
|
||
function updateCoordinateGuideControl() {
|
||
coordinateGuideToggle.setAttribute("aria-pressed", String(coordinateGuideEnabled));
|
||
coordinateGuideToggle.textContent = coordinateGuideEnabled ? "隐藏坐标系" : "显示坐标系";
|
||
}
|
||
|
||
function applyCanvasView(next = view) {
|
||
view = clampCanvasView(next, viewportBounds());
|
||
boardStage.style.setProperty("--canvas-view-scale", String(view.scale));
|
||
boardStage.style.setProperty("--canvas-view-x", `${view.x}px`);
|
||
boardStage.style.setProperty("--canvas-view-y", `${view.y}px`);
|
||
scheduleCoordinateGuideRender();
|
||
}
|
||
|
||
function resetCanvasView() {
|
||
view = { scale: 1, x: 0, y: 0 };
|
||
applyCanvasView();
|
||
}
|
||
|
||
function applyAssistivePosition(next = assistivePosition) {
|
||
assistivePosition = clampFloatingButton(next, {
|
||
viewportWidth: window.innerWidth,
|
||
viewportHeight: window.innerHeight,
|
||
size: 56,
|
||
inset: 8,
|
||
});
|
||
assistive.style.setProperty("--assistive-x", `${assistivePosition.x}px`);
|
||
assistive.style.setProperty("--assistive-y", `${assistivePosition.y}px`);
|
||
const room=assistivePosition.y>window.innerHeight/2?assistivePosition.y:window.innerHeight-assistivePosition.y;
|
||
assistive.style.setProperty("--assistive-menu-height",`${Math.max(120,room+16)}px`);
|
||
assistive.dataset.menuHorizontal = assistivePosition.x > window.innerWidth / 2 ? "left" : "right";
|
||
assistive.dataset.menuVertical = assistivePosition.y > window.innerHeight / 2 ? "up" : "down";
|
||
}
|
||
|
||
function resetAssistivePosition() {
|
||
applyAssistivePosition({ x: 36, y: window.innerHeight / 2 });
|
||
}
|
||
|
||
function closeAssistiveMenu({ restoreFocus = false } = {}) {
|
||
assistiveMenu.hidden = true;
|
||
assistiveToggle.setAttribute("aria-expanded", "false");
|
||
assistiveToggle.setAttribute("aria-label", "打开画布编辑菜单");
|
||
if (restoreFocus && editorActive) assistiveToggle.focus();
|
||
}
|
||
|
||
function openAssistiveMenu() {
|
||
applyAssistivePosition();
|
||
assistiveMenu.hidden = false;
|
||
assistiveToggle.setAttribute("aria-expanded", "true");
|
||
assistiveToggle.setAttribute("aria-label", "关闭画布编辑菜单");
|
||
const firstAvailable = assistiveMenu.querySelector('button:not([aria-disabled="true"])');
|
||
firstAvailable?.focus();
|
||
}
|
||
|
||
function toggleAssistiveMenu() {
|
||
if (assistiveMenu.hidden) openAssistiveMenu();
|
||
else closeAssistiveMenu({ restoreFocus: true });
|
||
}
|
||
|
||
function updateEditorModeControls() {
|
||
const moving = editorMode === "move";
|
||
const textEditing = getSelectedLayer().type === "text";
|
||
moveLayerButton.setAttribute("aria-pressed",String(editorMode==="layer"));
|
||
if (editorActive) document.body.dataset.canvasEditorMode = editorMode;
|
||
else delete document.body.dataset.canvasEditorMode;
|
||
editorModeHint.textContent = editorMode==="layer"?"移动图层：拖动或使用偏移坐标；黄色框为实际屏幕":moving
|
||
? "移动模式：单指拖动画布，双指捏合缩放；桌面可使用滚轮缩放。"
|
||
: textEditing ? "文字编辑模式：拖动文字或使用缩放手柄。" : "绘画模式：直接在画布上绘制。";
|
||
if (moving) {
|
||
setControlUnavailable(moveViewButton, "当前已经是移动画布视线模式。");
|
||
setControlReady(continueEditButton);
|
||
} else {
|
||
setControlReady(moveViewButton);
|
||
if (editorMode === "layer") setControlReady(continueEditButton);
|
||
else setControlUnavailable(continueEditButton, textEditing ? "当前已经是文字编辑模式。" : "当前已经是绘画模式。");
|
||
}
|
||
updateUndoControl();
|
||
}
|
||
|
||
function resetViewGesture() {
|
||
const points = Array.from(viewPointers.values());
|
||
if (points.length >= 2) {
|
||
const [first, second] = points;
|
||
viewGesture = {
|
||
kind: "pinch",
|
||
startView: { ...view },
|
||
startMidpoint: { x: (first.x + second.x) / 2, y: (first.y + second.y) / 2 },
|
||
startDistance: Math.max(1, Math.hypot(second.x - first.x, second.y - first.y)),
|
||
};
|
||
} else if (points.length === 1) {
|
||
viewGesture = { kind: "pan", startView: { ...view }, startPoint: { ...points[0] } };
|
||
} else {
|
||
viewGesture = null;
|
||
}
|
||
}
|
||
|
||
function setEditorMode(mode) {
|
||
if (!editorActive) return;
|
||
const pointerIds = [...viewPointers.keys()];
|
||
if (layerDrag) {
|
||
pointerIds.push(layerDrag.id);
|
||
layerDrag = null;
|
||
cancelLayerPreview();
|
||
}
|
||
viewPointers.clear();
|
||
viewGesture = null;
|
||
for (const id of pointerIds) {
|
||
if (canvas.hasPointerCapture(id)) canvas.releasePointerCapture(id);
|
||
}
|
||
if (mode === "move") finishDrawing();
|
||
editorMode = ["move","layer"].includes(mode)?mode:"draw";
|
||
if (editorMode === "draw") moveControls.hidden = true;
|
||
setMoveFrameVisible(editorMode==="layer" || !moveControls.hidden);
|
||
updateEditorModeControls();
|
||
closeAssistiveMenu({ restoreFocus: true });
|
||
announce(editorMode === "move"
|
||
? "已进入移动画布视线模式：单指拖动，双指缩放"
|
||
: editorMode === "layer" ? "已进入移动当前图层模式：拖动图层或输入偏移" : "已继续编辑画布");
|
||
}
|
||
|
||
function enterCanvasEditor() {
|
||
if (editorActive || getInteractionMode() === "readonly") return;
|
||
editorActive = true;
|
||
editorMode = "draw";
|
||
canvas.dataset.canvasEditing = "true";
|
||
document.body.classList.add("canvas-edit-active");
|
||
assistive.hidden = false;
|
||
setExpandedBoard(expandedEnabled);
|
||
closeAssistiveMenu();
|
||
updateEditorModeControls();
|
||
updateCoordinateGuideControl();
|
||
window.requestAnimationFrame(() => {
|
||
resetCanvasView();
|
||
resetAssistivePosition();
|
||
scheduleCoordinateGuideRender();
|
||
assistiveToggle.focus();
|
||
});
|
||
announce("已进入全屏画布编辑；左侧悬浮按钮可撤销、移动视线或退出");
|
||
}
|
||
|
||
function exitCanvasEditor({ returnToTools = true } = {}) {
|
||
if (!editorActive) return;
|
||
finishDrawing();
|
||
editorActive = false;
|
||
editorMode = "draw";
|
||
viewPointers.clear();
|
||
viewGesture = null;
|
||
closeAssistiveMenu();
|
||
assistive.hidden = true;
|
||
moveControls.hidden=true;setMoveFrameVisible(false);setExpandedBoard(false);cancelLayerPreview();layerDrag=null;
|
||
hideCoordinateGuide();
|
||
delete canvas.dataset.canvasEditing;
|
||
document.body.classList.remove("canvas-edit-active");
|
||
delete document.body.dataset.canvasEditorMode;
|
||
boardStage.style.removeProperty("--canvas-view-scale");
|
||
boardStage.style.removeProperty("--canvas-view-x");
|
||
boardStage.style.removeProperty("--canvas-view-y");
|
||
view = { scale: 1, x: 0, y: 0 };
|
||
if (returnToTools) {
|
||
window.requestAnimationFrame(() => {
|
||
canvasWorkbench.scrollIntoView({ block: "start", behavior: "smooth" });
|
||
startEditButton.focus({ preventScroll: true });
|
||
});
|
||
}
|
||
announce("已退出画布编辑，可以重新选择颜色和画笔工具");
|
||
}
|
||
|
||
function undoPixelOperation() {if(undoSceneEdit())announce("已撤销上一个编辑操作");updateUndoControl();}
|
||
|
||
function persistTools() {
|
||
localState.save({
|
||
paintColor: paintColor.value,
|
||
backgroundColor: backgroundColor.value,
|
||
tool,
|
||
pixelEditEnabled,
|
||
normalBrushSize,
|
||
pixelBrushSize,
|
||
coordinateGuideEnabled,
|
||
expandedEnabled,
|
||
});
|
||
}
|
||
|
||
function toggleCoordinateGuide() {
|
||
coordinateGuideEnabled = !coordinateGuideEnabled;
|
||
updateCoordinateGuideControl();
|
||
persistTools();
|
||
scheduleCoordinateGuideRender();
|
||
closeAssistiveMenu({ restoreFocus: true });
|
||
announce(coordinateGuideEnabled
|
||
? "已显示画布坐标系，标尺和辅助线会随视角缩放"
|
||
: "已隐藏画布坐标系");
|
||
}
|
||
|
||
function renderBrushSize() {
|
||
const mode = brushMode();
|
||
const brushSize = currentBrushSize();
|
||
const spec = brushModeSpec(mode);
|
||
brushSizeInput.min = String(spec.min);
|
||
brushSizeInput.max = String(spec.max);
|
||
brushSizeInput.value = String(brushSize);
|
||
document.getElementById("brush-size-value").textContent = pixelEditEnabled
|
||
? `${brushSize} × ${brushSize}`
|
||
: `${brushSize} px`;
|
||
const preview = document.getElementById("brush-size-preview");
|
||
const previewSize = Math.max(4, brushSize * 2);
|
||
preview.style.width = `${previewSize}px`;
|
||
preview.style.height = `${previewSize}px`;
|
||
preview.dataset.shape = pixelEditEnabled ? "square" : "round";
|
||
brushSizePresets.forEach((button, index) => {
|
||
const value = spec.presets[index];
|
||
button.dataset.brushSize = String(value);
|
||
button.textContent = String(value);
|
||
});
|
||
setActiveButton(
|
||
brushSizePresets,
|
||
brushSizePresets.find((button) => Number(button.dataset.brushSize) === brushSize),
|
||
);
|
||
pixelEditToggle.setAttribute("aria-pressed", String(pixelEditEnabled));
|
||
pixelEditToggle.textContent = pixelEditEnabled ? "退出单像素编辑" : "开启单像素编辑";
|
||
pixelEditStatus.hidden = !pixelEditEnabled;
|
||
pixelEditStatus.textContent = pixelEditEnabled
|
||
? `画布已按 64×64 方形像素分格，当前笔尖为 ${brushSize}×${brushSize}。`
|
||
: "";
|
||
}
|
||
|
||
function setBrushSize(value) {
|
||
const normalized = normalizeBrushSize(value, brushMode());
|
||
if (pixelEditEnabled) pixelBrushSize = normalized;
|
||
else normalBrushSize = normalized;
|
||
renderBrushSize();
|
||
persistTools();
|
||
}
|
||
|
||
function updatePixelGridVisibility() {
|
||
pixelGrid.hidden = !(pixelEditEnabled && getInteractionMode() === "pixels");
|
||
}
|
||
|
||
function togglePixelEditMode() {
|
||
pixelEditEnabled = !pixelEditEnabled;
|
||
renderBrushSize();
|
||
updatePixelGridVisibility();
|
||
persistTools();
|
||
announce(pixelEditEnabled
|
||
? `已进入单像素编辑模式：画布已按 64×64 方形像素分格，笔尖为 ${pixelBrushSize}×${pixelBrushSize} 正方形。`
|
||
: `已退出单像素编辑模式：恢复 ${normalBrushSize} px 圆形笔尖。`);
|
||
}
|
||
|
||
function selectTool(button) {
|
||
tool = button.dataset.canvasTool;
|
||
if (tool !== "eyedropper") previousDrawingTool = tool;
|
||
setActiveButton(toolButtons, button);
|
||
persistTools();
|
||
}
|
||
|
||
toolButtons.forEach((button) => button.addEventListener("click", () => selectTool(button)));
|
||
|
||
canvas.addEventListener("pointerdown", (event) => {
|
||
if (!editorActive || getInteractionMode() === "readonly") return;
|
||
if (editorMode === "layer") {
|
||
event.preventDefault();const l=getSelectedLayer();layerDrag={id:event.pointerId,start:boardPoint(event,{round:false}),x:l.x,y:l.y};canvas.setPointerCapture(event.pointerId);return;
|
||
}
|
||
if (editorMode === "move") {
|
||
event.preventDefault();
|
||
viewPointers.set(event.pointerId, { x: event.clientX, y: event.clientY });
|
||
canvas.setPointerCapture(event.pointerId);
|
||
resetViewGesture();
|
||
return;
|
||
}
|
||
if (getInteractionMode()!=="pixels" || drawing) return;
|
||
if (tool === "eyedropper") {
|
||
const point = boardPoint(event);
|
||
const l=getSelectedLayer();
|
||
const offset = ((point.y+64-l.y)*192+point.x+64-l.x)*4;
|
||
const pixels = getPixelBuffer();
|
||
setColorValue(paintColor, rgbToHex({
|
||
r: pixels[offset],
|
||
g: pixels[offset + 1],
|
||
b: pixels[offset + 2],
|
||
}), { recordHistory: true });
|
||
tool = previousDrawingTool;
|
||
setActiveButton(toolButtons, toolButtons.find((button) => button.dataset.canvasTool === tool));
|
||
persistTools();
|
||
announce(`已吸取像素层 (${point.x}, ${point.y}) 的颜色`);
|
||
return;
|
||
}
|
||
event.preventDefault();
|
||
drawing = true;
|
||
drawingPointerId = event.pointerId;
|
||
drawingBefore = pixelSnapshot();
|
||
lastPoint = boardPoint(event);
|
||
canvas.setPointerCapture(event.pointerId);
|
||
paintEvent(event);
|
||
});
|
||
|
||
canvas.addEventListener("pointermove", (event) => {
|
||
if(layerDrag?.id===event.pointerId) {const p=boardPoint(event,{round:false});previewLayerMove(layerDrag.x+p.x-layerDrag.start.x,layerDrag.y+p.y-layerDrag.start.y);return;}
|
||
if (editorActive && editorMode === "move" && viewPointers.has(event.pointerId)) {
|
||
event.preventDefault();
|
||
viewPointers.set(event.pointerId, { x: event.clientX, y: event.clientY });
|
||
const points = Array.from(viewPointers.values());
|
||
if (viewGesture?.kind === "pinch" && points.length >= 2) {
|
||
const [first, second] = points;
|
||
const midpoint = { x: (first.x + second.x) / 2, y: (first.y + second.y) / 2 };
|
||
const distance = Math.max(1, Math.hypot(second.x - first.x, second.y - first.y));
|
||
const scaled = zoomCanvasView(
|
||
viewGesture.startView,
|
||
viewGesture.startView.scale * (distance / viewGesture.startDistance),
|
||
viewGesture.startMidpoint,
|
||
viewportBounds(),
|
||
);
|
||
applyCanvasView({
|
||
...scaled,
|
||
x: scaled.x + midpoint.x - viewGesture.startMidpoint.x,
|
||
y: scaled.y + midpoint.y - viewGesture.startMidpoint.y,
|
||
});
|
||
} else if (viewGesture?.kind === "pan" && points.length === 1) {
|
||
applyCanvasView({
|
||
...viewGesture.startView,
|
||
x: viewGesture.startView.x + points[0].x - viewGesture.startPoint.x,
|
||
y: viewGesture.startView.y + points[0].y - viewGesture.startPoint.y,
|
||
});
|
||
}
|
||
return;
|
||
}
|
||
if (drawing && drawingPointerId === event.pointerId && editorActive
|
||
&& editorMode === "draw" && getInteractionMode() === "pixels") paintEvent(event);
|
||
});
|
||
|
||
function finishDrawing() {
|
||
if (!drawing) return;
|
||
drawing = false;
|
||
drawingPointerId = null;
|
||
lastPoint = null;
|
||
const changed = recordPixelOperation(drawingBefore);
|
||
drawingBefore = null;
|
||
if (changed) commitPixelChanges("pixel-draw");
|
||
persistTools();
|
||
}
|
||
|
||
function finishCanvasPointer(event) {
|
||
if(layerDrag?.id===event.pointerId) {
|
||
const drag=layerDrag;layerDrag=null;
|
||
if(event.type==="pointercancel"||event.type==="lostpointercapture")cancelLayerPreview();
|
||
else {const p=boardPoint(event,{round:false});try{moveSelectedLayer(drag.x+p.x-drag.start.x,drag.y+p.y-drag.start.y);}catch(e){cancelLayerPreview();announce(e.message,true);}}
|
||
syncOffsets();return;
|
||
}
|
||
if (viewPointers.delete(event.pointerId)) {
|
||
resetViewGesture();
|
||
return;
|
||
}
|
||
if (drawingPointerId === event.pointerId) finishDrawing();
|
||
}
|
||
|
||
canvas.addEventListener("pointerup", finishCanvasPointer);
|
||
canvas.addEventListener("pointercancel", finishCanvasPointer);
|
||
canvas.addEventListener("lostpointercapture", finishCanvasPointer);
|
||
canvas.addEventListener("wheel", (event) => {
|
||
if (!editorActive || editorMode !== "move") return;
|
||
event.preventDefault();
|
||
const factor = Math.exp(-event.deltaY * 0.002);
|
||
applyCanvasView(zoomCanvasView(view, view.scale * factor, {
|
||
x: event.clientX,
|
||
y: event.clientY,
|
||
}, viewportBounds()));
|
||
}, { passive: false });
|
||
|
||
paintColor.addEventListener("input", persistTools);
|
||
backgroundColor.addEventListener("input", persistTools);
|
||
brushSizeInput.addEventListener("input", () => setBrushSize(brushSizeInput.value));
|
||
brushSizePresets.forEach((button) => button.addEventListener("click", () => setBrushSize(button.dataset.brushSize)));
|
||
pixelEditToggle.addEventListener("click", togglePixelEditMode);
|
||
coordinateGuideToggle.addEventListener("click", toggleCoordinateGuide);
|
||
document.getElementById("fill-canvas").addEventListener("click", () => {
|
||
const before = pixelSnapshot();
|
||
const rgb = hexToRgb(backgroundColor.value);
|
||
fillPixelLayer([rgb.r, rgb.g, rgb.b]);
|
||
recordPixelOperation(before);
|
||
announce("已开启当前画笔图层的背景");
|
||
});
|
||
document.getElementById("clear-canvas").addEventListener("click", () => {
|
||
const before = pixelSnapshot();
|
||
clearPixelLayer();
|
||
recordPixelOperation(before);
|
||
announce("当前图层笔迹已清空，背景保持不变");
|
||
});
|
||
|
||
startEditButton.addEventListener("click", enterCanvasEditor);
|
||
undoButton.addEventListener("click", undoPixelOperation);
|
||
exitEditButton.addEventListener("click", () => exitCanvasEditor());
|
||
moveViewButton.addEventListener("click", () => setEditorMode("move"));
|
||
continueEditButton.addEventListener("click", () => setEditorMode("draw"));
|
||
exitLayerMoveButton.addEventListener("click", () => setEditorMode("draw"));
|
||
|
||
assistiveToggle.addEventListener("pointerdown", (event) => {
|
||
if (!editorActive) return;
|
||
event.preventDefault();
|
||
event.stopPropagation();
|
||
assistiveDrag = {
|
||
pointerId: event.pointerId,
|
||
startX: event.clientX,
|
||
startY: event.clientY,
|
||
origin: { ...assistivePosition },
|
||
moved: false,
|
||
};
|
||
assistiveToggle.setPointerCapture(event.pointerId);
|
||
});
|
||
|
||
assistiveToggle.addEventListener("pointermove", (event) => {
|
||
if (!assistiveDrag || assistiveDrag.pointerId !== event.pointerId) return;
|
||
event.preventDefault();
|
||
event.stopPropagation();
|
||
const dx = event.clientX - assistiveDrag.startX;
|
||
const dy = event.clientY - assistiveDrag.startY;
|
||
if (Math.hypot(dx, dy) > 6) assistiveDrag.moved = true;
|
||
if (assistiveDrag.moved) {
|
||
closeAssistiveMenu();
|
||
applyAssistivePosition({ x: assistiveDrag.origin.x + dx, y: assistiveDrag.origin.y + dy });
|
||
}
|
||
});
|
||
|
||
function finishAssistiveDrag(event) {
|
||
if (!assistiveDrag || assistiveDrag.pointerId !== event.pointerId) return;
|
||
suppressAssistiveClick = assistiveDrag.moved;
|
||
assistiveDrag = null;
|
||
event.stopPropagation();
|
||
}
|
||
|
||
assistiveToggle.addEventListener("pointerup", finishAssistiveDrag);
|
||
assistiveToggle.addEventListener("pointercancel", finishAssistiveDrag);
|
||
assistiveToggle.addEventListener("lostpointercapture", finishAssistiveDrag);
|
||
assistiveToggle.addEventListener("click", () => {
|
||
if (suppressAssistiveClick) {
|
||
suppressAssistiveClick = false;
|
||
return;
|
||
}
|
||
toggleAssistiveMenu();
|
||
});
|
||
|
||
document.addEventListener("keydown", (event) => {
|
||
if (!editorActive || event.key !== "Escape") return;
|
||
event.preventDefault();
|
||
if (!assistiveMenu.hidden) closeAssistiveMenu({ restoreFocus: true });
|
||
else exitCanvasEditor();
|
||
});
|
||
|
||
window.addEventListener("resize", () => {
|
||
if (!editorActive) return;
|
||
applyCanvasView();
|
||
applyAssistivePosition();
|
||
});
|
||
|
||
document.addEventListener("matrix:composition-applied", clearUndoHistory);
|
||
document.addEventListener("matrix:canvas-history-checkpoint", clearUndoHistory);
|
||
document.addEventListener("matrix:scene-replaced", clearUndoHistory);
|
||
|
||
refreshColorTrigger(paintColor);
|
||
refreshColorTrigger(backgroundColor);
|
||
setActiveButton(toolButtons, toolButtons.find((button) => button.dataset.canvasTool === tool));
|
||
renderBrushSize();
|
||
updateCoordinateGuideControl();
|
||
persistTools();
|
||
updateEditorModeControls();
|
||
|
||
registerWorkspace({
|
||
id: "canvas",
|
||
title: "像素画布",
|
||
elementId: "workspace-canvas",
|
||
order: 30,
|
||
persistence: "local",
|
||
capabilities: ["scene-template-save"],
|
||
onEnter() {
|
||
renderPixelDraft();
|
||
updatePixelGridVisibility();
|
||
},
|
||
onLeave() {
|
||
exitCanvasEditor({ returnToTools: false });
|
||
finishDrawing();
|
||
pixelGrid.hidden = true;
|
||
hideCoordinateGuide();
|
||
},
|
||
});
|
||
|
||
function syncOffsets(){const l=getSelectedLayer();offsetX.value=l.x;offsetY.value=l.y;}
|
||
function commitOffsets(){try{moveSelectedLayer(Number(offsetX.value),Number(offsetY.value));}catch(e){announce(e.message,true);}syncOffsets();}
|
||
expandedToggle.setAttribute("aria-pressed",String(expandedEnabled));
|
||
expandedToggle.textContent=expandedEnabled?"隐藏扩展画面":"显示扩展画面";
|
||
expandedToggle.addEventListener("click",()=>{finishDrawing();expandedEnabled=!expandedEnabled;setExpandedBoard(expandedEnabled);expandedToggle.setAttribute("aria-pressed",String(expandedEnabled));expandedToggle.textContent=expandedEnabled?"隐藏扩展画面":"显示扩展画面";persistTools();updatePixelGridVisibility();applyCanvasView();});
|
||
moveLayerButton.addEventListener("click",()=>{finishDrawing();moveControls.hidden=false;syncOffsets();setEditorMode("layer");openAssistiveMenu();});
|
||
for(const input of [offsetX,offsetY]){
|
||
input.addEventListener("change",commitOffsets);
|
||
input.addEventListener("keydown",e=>{if(e.key==="Enter"){e.preventDefault();input.blur();}});
|
||
}
|
||
for(const button of document.querySelectorAll("[data-offset]"))button.addEventListener("click",()=>{
|
||
const l=getSelectedLayer(),axis=button.parentElement.dataset.axis,delta=Number(button.dataset.offset);
|
||
try{moveSelectedLayer(l.x+(axis==="x"?delta:0),l.y+(axis==="y"?delta:0));}catch(e){announce(e.message,true);}syncOffsets();
|
||
});
|
||
document.addEventListener("matrix:edit-history",updateUndoControl);
|
||
subscribeScene(({reason})=>{if(["selection","layer-move","undo","move-cancel"].includes(reason)){syncOffsets();updatePixelGridVisibility();}});
|