Add adaptive coordinate guides to canvas editor

2026-09-10 17:48:04 +08:00
parent 8d368de3b5
commit a493fe1757
9 changed files with 292 additions and 13 deletions
@@ -17,7 +17,7 @@
 | `TEST-FRP-MAINTENANCE` | `WEB-FRP-MAINTENANCE`、`CONFIG-FRP`、`DEPLOY-FRP`、多配置、systemd 持久与真实 SSH 穿透 | Windows mock + 核桃派 | 否 |
 | `TEST-NETWORK-DIAGNOSTICS` | `WEB-NETWORK-DIAGNOSTICS`、接口、路由、DNS、TCP/TLS 和 ICMP 分类 | Windows mock + 核桃派 | 否 |
 | `TEST-WS-CANVAS` | RGB888、最新帧覆盖、正常断开 | mock / 核桃派 | 否 |
-| `TEST-CANVAS-EDIT` | `WEB-CANVAS-EDIT` 默认只读、全屏编辑、悬浮菜单、撤销和平移缩放 | Windows / 本机浏览器 | 否 |
+| `TEST-CANVAS-EDIT` | `WEB-CANVAS-EDIT`、`WEB-CANVAS-COORDINATES` 默认只读、全屏编辑、悬浮菜单、撤销、平移缩放和自适应坐标系 | Windows / 本机浏览器 | 否 |
 | `TEST-TEMPLATE-MANAGEMENT` | `WEB-PREVIEW`、`WEB-TEMPLATES`、静态/动图播放编辑解耦、保存选择与未保存守卫 | Windows / mock / 核桃派 | 否 |
 | `TEST-CURRENT-PLAYBACK` | `WEB-CURRENT-DISPLAY`、当前帧弹层、动图跳转、暂停/继续、倍速和会话失效 | Windows / mock + 核桃派软件接口 | 用户最终交互确认 |
 | `TEST-ANIMATION-THUMBNAIL-PERF` | 动图长名称、完整动态缩略图、浏览器/HTTP 资源与 H618 GPIO 刷新隔离 | Windows / mock + 核桃派/HUB75 | 仅摄像头歧义时确认 |
@@ -59,7 +59,7 @@ node --test @($tests.FullName)

 `TEST-SYSTEM-INDICATOR-PIXELS` 在 mock 中逐像素验证 OTA 的 `OTA`、百分比和进度条缩小后无断笔、百分比未被底边裁切、四边仍各有 3 像素黑边；联网 IP 与断网提示的字体覆盖像素只能是全白或全灭，禁止抗锯齿灰阶造成低亮度缺块。部署后依次只显示 OTA、联网 IP、断网提示三个画面；每次只显示一个并停止，由用户回复内容无误后再进入下一个，不使用摄像头代替本轮人工确认，三个画面均确认前不得写成通过。

-`TEST-CANVAS-EDIT` 使用本机 mock 服务，在约 `320px`、`390px`、平板和桌面视口逐项检查：像素工作区默认滑动画板不落笔且页面可滚动；点击“开始编辑”后才进入全屏绘画；悬浮按钮点击与拖动不产生像素；移动模式支持单指平移、双指缩放和桌面滚轮缩放，切回绘画后落点准确；画笔、橡皮、填充和清空可连续撤销。退出编辑回到颜色工具区，离开工作区强制退出；文字工作区保持原有选择、拖动和缩放。成功应用画板、保存或更新模板、保存或新建动图帧后撤销历史清空，失败请求保留历史。该测试不连接 HUB75、ADC，也不进行实屏目测。
+`TEST-CANVAS-EDIT` 使用本机 mock 服务，在约 `320px`、`390px`、平板和桌面视口逐项检查：像素工作区默认滑动画板不落笔且页面可滚动；点击“开始编辑”后才进入全屏绘画；悬浮按钮点击与拖动不产生像素；移动模式支持单指平移、双指缩放和桌面滚轮缩放，切回绘画后落点准确；画笔、橡皮、填充和清空可连续撤销。悬浮菜单的坐标系按钮使用 `aria-pressed`，默认关闭并按浏览器记忆；坐标层无指针事件，只在全屏像素编辑中显示。分别在 `1x/2x/4x/8x` 缩放和不同平移位置检查上、左 `0..63` 标尺、主刻度与贯穿线对齐，间隔从 `1/2/4/8/16/32` 中自适应；普通与单像素模式均可使用，单像素网格可同时显示。切换坐标系前后重复绘画、吸管、撤销、平移和缩放，并逐字节比较场景、导出 PNG 与 WebSocket RGB888 不变。退出编辑回到颜色工具区，离开工作区强制退出；文字工作区保持原有选择、拖动和缩放。成功应用画板、保存或更新模板、保存或新建动图帧后撤销历史清空，失败请求保留历史。该测试不连接 HUB75、ADC，也不进行实屏目测。

 `TEST-TEMPLATE-MANAGEMENT` 使用 mock 和前端自动化验证：模板管理顶部为与系统设置相同的 `160 CSS px` 当前帧监视器且没有应用、导出或画板交互；静态模板和动图卡片均按“播放/编辑、复制/重命名、删除、上移/下移”两列四行排列，演示案例显示相同布局并对受限项提供原因。静态与动图播放只改变设备输出，不替换普通画布或动图编辑上下文，也不修改默认内容；静态编辑进入像素画布，未绑定草稿或保存后又修改的模板在被替换前提示“当前内容将会丢失”，干净模板直接切换，取消及读取失败保持原状态。普通模板保存覆盖当前或另存后都更新绑定基线，冲突保留未保存内容；演示静态图只能另存。板端只用故意过期的静态播放修订验证 `409` 且当前帧字节不变，不要求摄像头、实屏目测或物理操作。