feat(svg-editor): 多元素选择、框选、元素属性展示#85
Merged
Merged
Conversation
Replace single-element selection (selectedElementId) with Set-based multi-selection (selectedElementIds). Add updateSelectionPanel for single/multi/empty states, batch annotation via Promise.all.
- Only pre-fill annotation textarea for single-select, clear for multi - Add .multi-count CSS class for multi-select count display
Add click-drag rubber band selection on empty space. Uses HTML overlay for drawing the selection rectangle and SVG getBBox + getScreenCTM for screen-space collision detection. Supports Ctrl+drag for additive mode. 5px threshold prevents accidental activation on clicks.
- Add cancelRubberBand() helper, call from selectSlide to reset state - Remove unused addToSelection parameter from selectByRubberBand - Fix overlay variable shadowing in mouseup handler - Clear selection on below-threshold click (preserves original behavior)
Ctrl+A selects all SVG elements (skips when textarea focused). Escape clears current selection.
Show element properties in right panel on selection: - Text: font, font-size, font-weight, fill, anchor, content preview - Shapes: fill, stroke, dimensions - Images: filename, dimensions - Multi-select: type count summary, shared font-size, element list
- Remove annotationText.focus() from updateSelectionPanel — it was
causing Ctrl+A to be intercepted by the textarea guard, and
interfering with rubber band drag operations
- Fix rubber band mousedown check: use closest('.svg-selectable')
instead of direct classList check, so clicking on SVG background
or container elements correctly starts rubber band
- Add rubberBandUsed flag to prevent SVG click handler from clearing
selection after a rubber band operation completes
Rubber band:
- Remove closest('.svg-selectable') guard from mousedown — it failed
when SVG had a background rect covering the canvas (all clicks
matched the guard, preventing rubber band from starting)
- Start tracking on every mousedown, only activate overlay and set
rubberBandUsed flag when mousemove exceeds threshold
- This allows element clicks to still work (below threshold) while
rubber band works for any drag (regardless of target element)
Other fixes:
- Add textarea focus guard to Escape handler — prevents clearing
selection when user is typing in annotation textarea
- Make rubber band more visible: 2px dashed border, higher opacity
Add XSS protection to sanitizeSvg — strip href/xlink:href attributes that contain javascript: protocol from <a> elements. Prevents potential XSS via crafted SVG content.
Security: - Block data: URIs in sanitizeSvg (defense-in-depth against XSS) - Validate CSS color values before inserting into style attributes to prevent CSS injection via crafted SVG fill/stroke values Bug fixes: - Ctrl+click on empty space now respects modifier key (was clearing selection unconditionally) Improvements: - Use diagonal distance for rubber band threshold (consistent between mousemove and mouseup handlers) - Cache #element-props in DOM refs block (consistent with pattern) - Add max-height/overflow-y to property panel (prevents layout push)
|
Codex usage limits have been reached for code reviews. Please check with the admins of this repo to increase the limits by adding credits. |
Closed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
概要
在 #84 的基础上,为 SVG 视觉编辑器添加多元素批量操作能力。用户现在可以通过 Ctrl+click、框选或 Ctrl+A 一次性选择多个元素,并对选中元素统一添加标注。同时,右侧面板新增元素属性展示(字体、字号、颜色、位置等),帮助用户更精准地描述修改意图。
Closes #84
新增功能
1. 多元素选择
2. 统一批量标注
3. 元素属性展示
修改文件
无后端改动,无新增依赖。
测试
自动化测试(20 项,全部通过)
人工测试
安全改进