feat: add ResetViewBox plugin

[xxMudCloudxx]

功能

提供“重置视图”的UI插件。当用户对画布进行缩放（Zoom）或平移（Pan）操作导致视图发生变化时，该插件会在画布右下角显示一个浮动的重置按钮。点击该按钮可将视图恢复到最佳适配（Fit View）状态或初始状态。

功能特性

• 自动检测: 监听 viewBox:change 事件，仅在视图偏离初始状态时显示按钮。
• 智能定位: 自动计算 SVG 画布在屏幕上的位置，将按钮定位在画布右下角。
• 响应式: 监听窗口 resize 事件，自动调整初始状态基准和按钮位置。
• 可配置: 支持自定义按钮的样式、类名以及挂载容器。
• 命令集成: 点击重置使用 UpdateOptionsCommand，因此该操作支持撤销/重做（Undo/Redo）。

配置项

属性	类型	说明
style	Partial<CSSStyleDeclaration>	(可选) 自定义按钮的内联样式对象。
className	string	(可选) 添加到按钮上的额外的 CSS 类名。
getContainer	HTMLElement | (() => HTMLElement)	(可选) 指定按钮挂载的父容器。默认为 document.body。

样式

默认样式包含在 constant RESET_BUTTON_CLASS 中，样式 ID 为 RESET_BUTTON_STYLE_ID。

• 宽/高: 40px
• 位置: 绝对定位，SVG 右下角内缩 25px
• 外观: 白色背景，圆形，带阴影悬浮效果和hover变灰

自定义配置项使用示例

// 在编辑器实例化时引入插件
import { Infographic, ResetViewBox } from '@antv/infographic';

const instance = new Infographic({
  // 直接在顶层配置 plugins（注意是复数）
  plugins: [
    new ResetViewBox({
      className: 'my-custom-reset-btn',
      style: { backgroundColor: '#f0f0f0' }
    })
  ],
  
  // ... 其他配置项
  container: '#root',
  data: myData,
});

// 渲染
instance.render();

已解决的问题

• state层耦合性问题
• 滚轮缩放的undo/redo栈污染

TODO / Dependencies

• 验证功能完好
• 完成 ResetViewBox插件的防御性编程审查
• 完善单元测试

预览

[gemini-code-assist]

Summary of Changes

Hello @xxMudCloudxx, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request introduces a new ResetViewBox plugin, enhancing the editor's usability by providing a dedicated mechanism to revert the SVG canvas to its original zoom and pan state. It also refines the existing ZoomWheel interaction to address issues with undo/redo stack pollution and state management, ensuring a smoother user experience. Additionally, common UI components have been reorganized into a shared directory, promoting better code structure and reusability across plugins.

Highlights

• New ResetViewBox Plugin: Introduced a new plugin that provides a UI button to reset the SVG editor's viewBox to its initial state, enhancing navigation and user control.
• Improved ZoomWheel Interaction: Refactored the ZoomWheel interaction to address undo/redo stack pollution by consolidating zoom actions into a single command upon key release, and improved state management by using state.updateOptions.
• Component Refactoring: Moved shared UI components (Button, ColorPicker, Icons, Popover, Select) from src/editor/plugins/edit-bar/components to a more general src/editor/plugins/components directory, promoting reusability.
• ViewBox Change Event: Implemented a viewBox:change event in the state manager, allowing other parts of the application, like the new ResetViewBox plugin, to react to changes in the SVG's view.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[xxMudCloudxx]

原来Draft PR也会触发CI/CR

[gemini-code-assist]

Code Review

本次PR引入了ResetViewBox插件，并重构了滚轮缩放功能以解决undo/redo栈污染问题，整体实现很棒。我发现了一些可以改进的地方，主要涉及事件负载的类型安全、代码可读性和魔法数的处理。具体建议请见评论。

[xxMudCloudxx]

/gemini review

[gemini-code-assist]

Code Review

这个 PR 引入了 ResetViewBox 插件，并���构了滚轮缩放功能以解决 undo/redo 栈污染问题，做得很好。通过将缩放时的状态更新直接交由 state.updateOptions 处理，避免了为每一次缩放步长都创建命令，然后在缩放结束后（通过监听 keyup 事件）创建单个命令记录到历史记录中，这个实现非常巧妙。

不过，在 StateManager 的实现中存在一些问题。将自定义的 applyOptionUpdates 函数替换为 lodash.merge 导致了部分重要功能的回归，例如无法通过传入 undefined 来删除属性。此外，viewBox 和 padding 的更新逻辑也存在缺陷。我还对新的 ResetViewBox 插件的样式实现提出了一些改进建议。请查看具体的审查评论。

[gemini-code-assist]

updateOptions 方法中，将 applyOptionUpdates 替换为 lodash.merge 会导致功能退化。之前的 applyOptionUpdates 会将 undefined 值视作删除属性的指令，而 lodash.merge 会忽略 undefined 值。这导致了无法通过 updateOptions({ viewBox: undefined }) 的方式来移除 viewBox 属性，破坏了原有的功能。这是一个严重的问题，因为它移除了一个核心的API行为。建议恢复对 undefined 值的处理逻辑，以允许删除属性。

[xxMudCloudxx]

@Aarebecca 还需要 undefined 值视作删除属性这个业务逻辑吗?

[codecov-commenter]

Codecov Report

❌ Patch coverage is 83.91960% with 32 lines in your changes missing coverage. Please review.
✅ Project coverage is 45.55%. Comparing base (bb8761a) to head (4a772ca).

Files with missing lines	Patch %	Lines
src/editor/plugins/reset-viewbox.ts	82.22%	24 Missing ⚠️
src/utils/padding.ts	11.11%	8 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #192      +/-   ##
==========================================
+ Coverage   45.22%   45.55%   +0.32%     
==========================================
  Files         334      334              
  Lines       26635    26790     +155     
  Branches     2115     2142      +27     
==========================================
+ Hits        12046    12204     +158     
+ Misses      14579    14576       -3     
  Partials       10       10              

Flag	Coverage Δ
infographic	45.55% <83.91%> (+0.32%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

Files with missing lines	Coverage Δ
src/editor/interactions/zoom-wheel.ts	100.00% <100.00%> (ø)
src/editor/managers/state.ts	98.68% <100.00%> (+0.05%)	⬆️
src/editor/plugins/components/button.ts	91.42% <100.00%> (ø)
src/editor/plugins/components/color-picker.ts	17.32% <100.00%> (ø)
src/editor/plugins/components/icons.ts	100.00% <100.00%> (ø)
src/editor/plugins/components/index.ts	100.00% <ø> (ø)
src/editor/plugins/components/popover.ts	2.63% <100.00%> (ø)
src/editor/plugins/components/select.ts	6.76% <100.00%> (ø)
...itor/plugins/edit-bar/edit-items/align-elements.ts	6.16% <100.00%> (ø)
...c/editor/plugins/edit-bar/edit-items/font-align.ts	20.93% <100.00%> (ø)
... and 12 more

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.