k88936
7288c6f641
closes #279 closes #284 实现: 从2(暂定)倍放大绘制的画布scale 0.5* 真正的scale before:   after:   svg看起来stroke窄了一点点, 可以接受 Reviewed-on: #285
2.5 KiB
2.5 KiB
预览画布缩放滑杆
交付目标
将 UI 编辑器预览区现有的缩放按钮替换为桌面端可拖动滑杆，同时保留快速缩小、放大和适配画布操作。
交互约定
- 滑杆选择范围为 25%–200%，步进 5%；快捷加减继续使用核心视口的现有缩放边界。
- 滑杆位于预览区右下角固定工具栏；不提供移动端或窄窗口 fallback。
- 保留
−与+按钮。点击轨道可跳转，拖动滑块实时更新画布和百分比。 - 缩放以视口中心为中心，继续支持 Ctrl/Cmd + 滚轮缩放。
- 滑杆支持方向键、Home、End；百分比文本可点击编辑并在失焦时限制到有效范围。
- 百分比文本使用数字输入框呈现；输入提交后同步视口缩放，适配画布保持独立按钮，点击百分比不会触发适配。
- 缩放滑杆获得焦点时，Delete/Backspace 不触发 UI 节点快捷删除；缩放按钮鼠标点击不改变快捷键焦点。
- Windows/Linux 使用
Ctrl，macOS 使用Cmd；+、=与NumpadAdd放大，-与NumpadSubtract缩小，允许按键重复时连续缩放。 - 快捷键直接复用现有
+/−按钮动作：以视口中心为锚点，按×1.16/×0.86改变缩放。 - 鼠标悬停在预览画布上，或预览画布已获得键盘焦点时，快捷键生效。预览画布需提供可聚焦语义与无障碍名称。
- 事件来自输入框、文本编辑区、按钮、链接、缩放工具栏或其他可操作控件时不拦截；不向 iframe 子文档注入监听。
- 仅在存在可缩放视口且确认命中快捷键时调用
preventDefault()与stopPropagation()，防止浏览器页面同时缩放。 - 保留现有
Ctrl/Cmd+0适配画布与Ctrl/Cmd+1恢复 100% 行为，不增加其他重置快捷键。缩放仍是当前预览实例的临时 UI 状态。 - 快捷键和百分比使用逻辑
viewport.scale作为缩放真相；共享CanvasWorld的渲染 transform 可能包含超采样换算，验证时不得直接把 CSS transform 值当作用户可见比例。 - 保留快捷键与缩放焦点边界的组件级回归测试，不扩展端到端测试。
验收
桌面端可通过按钮、轨道点击、拖动和键盘改变缩放；百分比与画布同步，边界不会越界。组件级测试覆盖平台修饰键、主键盘与小键盘变体、按键重复、悬停/焦点作用域、可编辑与可操作目标放行、无内容放行、浏览器默认行为拦截和现有 0/1 回归；另运行前端定向类型检查、编码检查和 git diff --check。