Skip to content

feat(Signature): add undo functionality#13775

Open
wjw-gavin wants to merge 4 commits intoyouzan:mainfrom
wjw-gavin:feat/signature-undo
Open

feat(Signature): add undo functionality#13775
wjw-gavin wants to merge 4 commits intoyouzan:mainfrom
wjw-gavin:feat/signature-undo

Conversation

@wjw-gavin
Copy link
Collaborator

@wjw-gavin wjw-gavin commented Feb 4, 2026

close: #13633

@gemini-code-assist
Copy link

Summary of Changes

Hello @wjw-gavin, I'm Gemini Code Assist1! 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 significantly enhances the Signature component by integrating a robust undo functionality. Users can now easily correct drawing mistakes, improving the overall usability and flexibility of the component. The changes include comprehensive internationalization for the new 'undo' text, updated documentation, and a well-tested implementation, ensuring a seamless and accessible experience for a global user base.

Highlights

  • Undo Functionality: Introduced an 'undo' feature to the Signature component, allowing users to revert their last drawing stroke on the canvas.
  • Internationalization: Added multilingual support for the 'undo' button text across 25 different languages, ensuring a localized user experience.
  • Component API and Documentation Updates: Updated the Signature component's API with a new undoButtonText prop for custom text and exposed an undo method. The README files (English and Chinese) have been updated to reflect these changes.
  • Internal Implementation: The undo functionality is implemented by maintaining a history of canvas states using ImageData objects, which are saved after each stroke and restored upon undo.
  • Testing: New unit tests have been added to verify the exposure of the undo method and the correct rendering of custom undo button text.

🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console.

Changelog
  • packages/vant/src/locale/lang/*.ts
    • Added a new 'undo' translation key with corresponding localized text in 25 language files.
    • Minor formatting adjustments in ar-SA.ts.
  • packages/vant/src/signature/README.md
    • Updated the props table to include undo-button-text.
    • Updated the methods table to include the new undo method.
  • packages/vant/src/signature/README.zh-CN.md
    • Updated the props table to include undo-button-text (撤销按钮文案).
    • Updated the methods table to include the new undo method (撤销上一次笔画).
  • packages/vant/src/signature/Signature.tsx
    • Added undoButtonText to signatureProps for customizing the undo button's label.
    • Implemented history (a ref to ImageData[]) and saveState function to store canvas states.
    • Modified touchEnd to call saveState after each drawing stroke.
    • Updated the clear method to also reset the history of canvas states.
    • Introduced a new undo function that reverts the canvas to the previous state by popping from history and redrawing.
    • Exposed the undo method through the component's instance.
    • Added a new 'Undo' button with type="warning" to the component's footer, utilizing undoButtonText or the localized 'undo' text.
  • packages/vant/src/signature/test/snapshots/*.snap
    • Updated snapshot test files to reflect the addition of the new 'Undo' button in the component's UI.
  • packages/vant/src/signature/test/index.spec.ts
    • Added a test case to confirm that the undo method is exposed by the component.
    • Added a test case to verify that custom text provided via undoButtonText prop is correctly rendered on the undo button.
  • packages/vant/src/signature/types.ts
    • Updated the SignatureExpose type definition to include the new undo method.
Activity
  • No specific activity (comments, reviews, or progress updates) was provided in the context for this pull request.
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.

Copy link

@gemini-code-assist gemini-code-assist bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

这个 PR 为 Signature 组件引入了“撤销”功能,这是一个很棒的新特性。整体实现很扎实,涵盖了组件逻辑、文档和多语言支持。我提供了一些建议,主要关于撤销历史可能带来的内存消耗、撤销按钮颜色的 UI/UX、翻译的一致性以及测试覆盖率,希望能进一步完善这个功能。

Comment on lines 72 to 78
const saveState = () => {
if (ctx.value && canvasWidth && canvasHeight) {
history.value.push(
ctx.value.getImageData(0, 0, canvasWidth, canvasHeight),
);
}
};

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

每次笔划都存储整个画布的 ImageData 可能会消耗大量内存,尤其是在高分辨率设备上或用户绘制了许多笔划的情况下。这可能会在低内存设备上导致性能问题或崩溃。比较好的做法是限制撤销历史记录的大小。您也可以考虑将此限制作为一个可配置的 prop。

例如:

const MAX_HISTORY_SIZE = 20; // 或者可以是一个 prop

const saveState = () => {
  if (ctx.value && canvasWidth && canvasHeight) {
    if (history.value.length >= MAX_HISTORY_SIZE) {
      history.value.shift();
    }
    history.value.push(
      ctx.value.getImageData(0, 0, canvasWidth, canvasHeight),
    );
  }
};

});

expect(wrapper.find('.van-signature__footer').text()).toContain('Back');
});

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

新的测试覆盖了 undo 方法的暴露和按钮文本的自定义,这很好。但是,缺少一个测试来验证 undo 功能本身的核心逻辑(即,它是否能正确地将画布恢复到之前的状态)。建议增加一个测试用例,在画布上绘制、调用 undo,然后断言画布内容已恢复。

wjw-gavin and others added 3 commits February 4, 2026 15:58
Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
@codecov-commenter
Copy link

Codecov Report

❌ Patch coverage is 83.33333% with 3 lines in your changes missing coverage. Please review.
✅ Project coverage is 90.00%. Comparing base (ec5b45b) to head (cb31996).
⚠️ Report is 201 commits behind head on main.

Files with missing lines Patch % Lines
packages/vant/src/signature/Signature.tsx 83.33% 1 Missing and 2 partials ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##             main   #13775      +/-   ##
==========================================
+ Coverage   89.60%   90.00%   +0.40%     
==========================================
  Files         257      257              
  Lines        7013     7074      +61     
  Branches     1736     1755      +19     
==========================================
+ Hits         6284     6367      +83     
+ Misses        384      369      -15     
+ Partials      345      338       -7     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Feature Request] Signature 签名组件 希望增加一个撤销的功能

2 participants