feat: add syncState support for extensionMark to sync interactive states

[kitee0325]

[中文版模板 / Chinese template]

🤔 This is a ...

• New feature
• Bug fix
• TypeScript definition update
• Bundle size optimization
• Performance optimization
• Enhancement feature
• Refactoring
• Update dependency
• Code style optimization
• Test Case
• Branch merge
• Release
• Site / documentation update
• Demo update
• Workflow
• Other (about what?)

🔗 Related issue link

🔗 Related PR link

🐞 Bugserver case id

💡 Background and solution

When using extensionMark to add custom decorative marks (e.g., icons, badges) alongside primary series marks, users often want these extension marks to visually respond to interactive states (hover, select, etc.) just like the primary marks do.

Previously, there was no built-in mechanism to synchronize interactive states between an extensionMark and its corresponding primary mark. Users had to manually implement state synchronization using low-level VRender APIs.

Solution:

A new syncState option (boolean, default false) is added to IExtensionMarkSpec. When enabled:

1. After each render (afterRender event), the series binds afterStateUpdate listeners on primary mark graphics.
2. Each extension mark graphic is matched to its corresponding primary mark graphic via context.key (shared data key).
3. When the primary mark's state changes (hover/select/etc.), the same states are applied to the paired extension mark graphic via useStates().
4. Duplicate bindings are prevented via a guard flag to avoid memory leaks across re-renders.

API:

extensionMark: [
  {
    type: 'symbol',
    syncState: true,  // new option
    dataIndex: 0,
    style: { /* normal style */ },
    state: {
      hover: { /* hover style */ },
      selected: { /* selected style */ }
    }
  }
]

📝 Changelog

Language	Changelog
🇺🇸 English	feat: add syncState option to extensionMark to automatically synchronize interactive states (hover, select, etc.) from the corresponding primary mark graphic
🇨🇳 Chinese	feat: 为 extensionMark 新增 syncState 配置项，支持自动同步主图元的交互状态（hover、select 等）

☑️ Self-Check before Merge

⚠️ Please check all items below before requesting a reviewing. ⚠️

• Doc is updated/provided or not needed
• Demo is updated/provided or not needed
• TypeScript definition is updated/provided or not needed
• Changelog is provided or not needed

---

🚀 Summary

copilot:summary

🔍 Walkthrough

copilot:walkthrough