feat: add ExtensionMarkSyncStatePlugin for vchart-extension

[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 draw custom graphics on a series, those graphics do not follow the interactive states (hover, select, etc.) of the primary mark by default. This creates a visual inconsistency when users interact with the chart.

Solution: Add a new ExtensionMarkSyncStatePlugin to @visactor/vchart-extension. When an extensionMark is configured with syncState: true, the plugin automatically synchronizes the primary mark's interactive states (highlight, blur, selected, etc.) to the corresponding extension mark graphics, matched by context.key (data dimension identifier).

API:

import { registerExtensionMarkSyncStatePlugin } from '@visactor/vchart-extension';

// Register before creating VChart instance
registerExtensionMarkSyncStatePlugin();

// In spec, add syncState: true to extensionMark entries
extensionMark: [
  {
    type: 'symbol',
    dataId: 'barData',
    syncState: true,
    state: {
      highlight: { fill: 'orange', size: 20 },
      blur: { fillOpacity: 0.15 },
      selected: { fill: 'red', size: 22 }
    }
  }
]

📝 Changelog

Language	Changelog
🇺🇸 English	feat: add ExtensionMarkSyncStatePlugin in @visactor/vchart-extension — enables extensionMark to automatically synchronize interactive states (hover/select/blur) from the corresponding primary mark via syncState: true config
🇨🇳 Chinese	feat: 在 @visactor/vchart-extension 中新增 ExtensionMarkSyncStatePlugin —— 通过 syncState: true 配置，让 extensionMark 自动同步主图元的交互状态（hover/select/blur）

☑️ 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

[xuefei1313]

我看逻辑入口是chart 层的 'afterRender' ，那这里的状态更新监听其实没有必要，因为 afterRender 在每次完成状态更新后都会触发。

[kitee0325]

感谢指出，目前已经做了以下修改：

移除了单个 graphic 上的 afterStateUpdate 事件监听，改为在 afterRender 回调中直接读取 mainGraphic.currentStates 并同步到 extensionMark graphic。

具体变更：

• 移除 _bindHandlers 数组及所有 afterStateUpdate 事件绑定/解绑逻辑
• 移除 graphic 上的去重标记位（_syncStateBindKey、_syncStateBindTarget、_syncStateHandler）
• afterRender 回调中直接遍历 extensionMark graphics，按 context.key 配对主 graphic，同步 currentStates
• 补充了 clearStates() 处理主图元无状态时清除 extensionMark 状态的场景