Skip to content

fix: map roam drag interruption in pointer-only mobile browsers#4520

Open
xuefei1313 wants to merge 1 commit intodevelopfrom
009-fix-map-roam-pointer-drag
Open

fix: map roam drag interruption in pointer-only mobile browsers#4520
xuefei1313 wants to merge 1 commit intodevelopfrom
009-fix-map-roam-pointer-drag

Conversation

@xuefei1313
Copy link
Contributor

[中文版模板 / 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

This plan fixes a map roam drag bug where mobile browsers lose stable vertical dragging after supportsTouchEvents is forced to false, because the browser's default touch gesture handling interrupts pointer-based drag sequences for geo roam regions.

Language/Version: TypeScript 4.x

📝 Changelog

Language Changelog
🇺🇸 English fix map roam drag interruption in pointer-only mobile browsers
🇨🇳 Chinese

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

Copy link
Contributor Author

@xuefei1313 xuefei1313 left a comment

Choose a reason for hiding this comment

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

此 PR 修复了移动端浏览器在禁用 TouchEvents(使用 PointerEvents)时,地图组件垂直拖拽不稳定的问题。通过在地图 Roam 场景下设置 touch-action: none 来阻止浏览器的默认手势干扰,是一个非常针对性且有效的修复。建议对 region 的 spec 判断做进一步兼容,并优化内部类型声明。

private _isGeoRegionRoamDragEnabled() {
const chartSpec = this._compileChart?.getSpec?.();
const regions = chartSpec?.region;
if (!isArray(regions)) {
Copy link
Contributor Author

Choose a reason for hiding this comment

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

在 VChart 中,spec.region 可以是数组,也可以是单个对象。这里建议使用 const regionList = isArray(regions) ? regions : [regions] 并进行判空,以支持单 Region 的场景。

return false;
}

return regions.some((region: any) => {
Copy link
Contributor Author

Choose a reason for hiding this comment

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

建议使用具体的 Spec 类型(如 IRegionSpec)代替 any,以对齐仓库的类型安全标准。

@xuefei1313
Copy link
Contributor Author

🔍 深度 Review 报告

PR 目标:修复在仅支持 Pointer 事件(supportsTouchEvents: false)的移动端浏览器中,地图组件 roam 拖拽被浏览器原生手势中断的问题。

核心改动分析

  1. 逻辑注入点:在 Compiler 类中增加了对 touch-action 样式的动态控制。当检测到当前是移动端环境且关闭了 touch event 支持,同时地图开启了 roam.drag 时,将 canvas 的 touchAction 设置为 none
  2. 架构合规性:改动位于 packages/vchart/src/compile/compiler.ts,符合 vchart_codebase.md 中关于 Compiler 负责桥接 VRender 和处理渲染/布局阶段的定义(见笔记第 4.6 节)。
  3. 细节点评
    • 采用了 _isGeoRegionRoamDragEnabled 遍历 spec region 的方式,精准识别地图漫游场景,避免了对非地图图表的副作用(保持原生滚动)。
    • compile 周期中调用 _setCanvasStyle,确保 spec 更新时样式能同步刷新。

建议与备注

  • 这种处理方式在跨端适配中比较常见,通过 CSS 层禁止原生手势来保障 JS 层的事件流稳定性。
  • 改动点非常 surgical 且目标明确,符合 Patch 级别的修复标准。

Reviewer: Aime (ByteDance AI Assistant)

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.

1 participant