Skip to content

Commit 63ada7c

Browse files
xuefei1313xuefei1313
authored
Merge pull request #4522 from VisActor/feat/pick-map-drag-fix
fix(vchart): prevent map roam drag interruption in pointer-only mobil…
2 parents a482577 + 899f17c commit 63ada7c

5 files changed

Lines changed: 167 additions & 1 deletion

File tree

‎common/changes/@visactor/vchart/009-fix-map-roam-pointer-drag_2026-03-19-08-23.json‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"changes": [
3+
{
4+
"comment": "update changes for 009-fix-map-roam-pointer-drag: This plan fixes a map roam drag bug where mobile browsers lose stable vertical dragging after supportsTouchEvents is forced to false",
5+
"type": "none",
6+
"packageName": "@visactor/vchart"
7+
}
8+
],
9+
"packageName": "@visactor/vchart",
10+
"email": "lixuef1313@163.com"
11+
}

‎packages/vchart/src/compile/compiler.ts‎

Lines changed: 35 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ import { isMobileLikeMode, isTrueBrowser } from '../util/env';
1818
import { isString } from '../util/type';
1919
import type { IBoundsLike } from '@visactor/vutils';
2020
// eslint-disable-next-line no-duplicate-imports
21-
import { isNil, isValid, Logger, LoggerLevel } from '@visactor/vutils';
21+
import { isArray, isNil, isValid, Logger, LoggerLevel } from '@visactor/vutils';
2222
import type { EventSourceType } from '../event/interface';
2323
import type { IChart } from '../chart/interface';
2424
import { vglobal } from '@visactor/vrender-core';
@@ -162,6 +162,38 @@ export class Compiler implements ICompiler {
162162
this._compileChart?.getEvent()?.emit(ChartEvent.afterRender, { chart: this._compileChart });
163163
};
164164

165+
private _isGeoRegionRoamDragEnabled() {
166+
const chartSpec = this._compileChart?.getSpec?.();
167+
const regions = chartSpec?.region;
168+
if (!isArray(regions)) {
169+
return false;
170+
}
171+
172+
return regions.some((region: any) => {
173+
if (region?.coordinate !== 'geo' || !region.roam) {
174+
return false;
175+
}
176+
177+
if (region.roam === true) {
178+
return true;
179+
}
180+
181+
return region.roam.drag ?? true;
182+
});
183+
}
184+
185+
private _shouldDisableCanvasTouchAction() {
186+
if (!isTrueBrowser(this._option.mode)) {
187+
return false;
188+
}
189+
190+
const supportsTouchEvents = isValid(this._option.supportsTouchEvents)
191+
? this._option.supportsTouchEvents
192+
: vglobal.supportsTouchEvents;
193+
194+
return supportsTouchEvents === false && this._isGeoRegionRoamDragEnabled();
195+
}
196+
165197
private _setCanvasStyle() {
166198
if (!this._view) {
167199
return;
@@ -172,6 +204,7 @@ export class Compiler implements ICompiler {
172204
const canvas = this.getCanvas();
173205
if (canvas) {
174206
canvas.style.display = 'block';
207+
canvas.style.touchAction = this._shouldDisableCanvasTouchAction() ? 'none' : '';
175208
}
176209
}
177210
}
@@ -223,6 +256,7 @@ export class Compiler implements ICompiler {
223256
}
224257

225258
chart.compile();
259+
this._setCanvasStyle();
226260
chart.afterCompile();
227261
this.updateDepend();
228262

‎specs/009-fix-map-roam-pointer-drag/checklists/requirements.md‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
# Specification Quality Checklist: Fix Map Roam Drag in Pointer-Only Mobile Browsers
2+
3+
**Purpose**: Validate specification completeness and quality before delivery
4+
**Created**: 2026-03-19
5+
**Feature**: [spec.md](../spec.md)
6+
7+
## Content Quality
8+
9+
- [x] No unnecessary implementation detail beyond delivery-critical context
10+
- [x] Focused on user-visible behavior and constraints
11+
- [x] Written clearly enough for downstream release artifacts
12+
- [x] All mandatory sections completed
13+
14+
## Requirement Completeness
15+
16+
- [x] No `[NEEDS CLARIFICATION]` markers remain
17+
- [x] Requirements are testable and unambiguous
18+
- [x] Success criteria are measurable
19+
- [x] Edge cases are identified
20+
- [x] Scope is clearly bounded
21+
22+
## Feature Readiness
23+
24+
- [x] Functional requirements map to the implemented bug fix
25+
- [x] User scenario covers the affected interaction path
26+
- [x] The feature is ready for changelog, commit, and PR generation

‎specs/009-fix-map-roam-pointer-drag/plan.md‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
# Implementation Plan: Fix Map Roam Drag in Pointer-Only Mobile Browsers
2+
3+
**Branch**: `009-fix-map-roam-pointer-drag` | **Date**: 2026-03-19 | **Spec**: [spec.md](./spec.md)
4+
**Input**: Feature specification from `/specs/009-fix-map-roam-pointer-drag/spec.md`
5+
6+
## Summary
7+
8+
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.
9+
10+
## Technical Context
11+
12+
**Language/Version**: TypeScript 4.x
13+
**Primary Dependencies**:
14+
- `@visactor/vrender-core`: Provides stage, canvas access, and global environment capability flags.
15+
- `@visactor/vutils`: Provides utility helpers already used by the compiler layer.
16+
**Storage**: N/A
17+
**Testing**: No new automated test is required for this change.
18+
**Target Platform**: Browser rendering, especially mobile browsers using pointer events without touch events.
19+
**Project Type**: Visualization Library (Monorepo)
20+
**Performance Goals**: No regression in render or interaction performance.
21+
**Constraints**: Must only affect geo roam drag scenarios and must not globally disable page scroll for unrelated charts.
22+
**Scale/Scope**: Compiler-level canvas style adjustment for map roam interaction.
23+
24+
## Constitution Check
25+
26+
- [x] Quality First: Fix is isolated to the browser interaction environment for the affected scenario.
27+
- [x] User Experience-Driven: Removes a broken drag path in a valid mobile embedding scenario.
28+
- [x] SDD: Uses specs as the semantic source for delivery artifacts.
29+
- [x] Unit Tests: Not required for this change by request.
30+
- [x] Compatibility: Non-breaking fix (PATCH).
31+
32+
## Project Structure
33+
34+
### Documentation (this feature)
35+
36+
```text
37+
specs/009-fix-map-roam-pointer-drag/
38+
├── plan.md
39+
├── spec.md
40+
└── checklists/
41+
└── requirements.md
42+
```
43+
44+
### Source Code (repository root)
45+
46+
```text
47+
packages/vchart/
48+
├── src/
49+
│ └── compile/
50+
│ └── compiler.ts
51+
└── specs/
52+
└── 009-fix-map-roam-pointer-drag/
53+
├── plan.md
54+
├── spec.md
55+
└── checklists/
56+
└── requirements.md
57+
```
58+
59+
**Structure Decision**: Update the compiler canvas style handling in `packages/vchart/src/compile/compiler.ts` and describe the change in a dedicated spec directory for downstream changelog, commit, and PR generation.

‎specs/009-fix-map-roam-pointer-drag/spec.md‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
# Feature Specification: Fix Map Roam Drag in Pointer-Only Mobile Browsers
2+
3+
**Feature Branch**: `009-fix-map-roam-pointer-drag`
4+
**Created**: 2026-03-19
5+
**Status**: Draft
6+
7+
## Summary
8+
9+
Fix a map interaction bug where dragging a roam-enabled map fails on mobile browsers when VChart is configured to use pointer events without touch events.
10+
11+
## User Scenarios
12+
13+
### Primary User Story
14+
15+
As a VChart user embedding a roam-enabled map in a mobile web page, I want vertical and horizontal dragging to remain stable when `supportsTouchEvents` is disabled, so that the map can still be panned reliably in pointer-only environments.
16+
17+
## Requirements
18+
19+
### Functional Requirements
20+
21+
1. The map component MUST support stable drag roaming on mobile browsers when `VChart.vglobal.supportsTouchEvents` is set to `false`.
22+
2. The fix MUST prevent the browser's default touch gesture handling from interrupting map drag sequences when a geo region enables roam dragging.
23+
3. The fix MUST preserve existing drag behavior for roam-enabled geo maps in normal browser rendering.
24+
4. The fix MUST NOT change interaction behavior for charts that are not geo roam drag scenarios.
25+
26+
### Edge Cases
27+
28+
1. When a geo region disables `roam.drag`, the browser's default touch behavior should remain unchanged.
29+
2. When a chart does not use geo regions, the fix should not alter canvas touch handling.
30+
3. When roam is toggled by spec updates, the canvas touch handling should reflect the latest spec state.
31+
32+
## Success Criteria
33+
34+
1. In pointer-only mobile browser mode, initial vertical dragging on a roam-enabled map no longer enters a broken partial-drag state.
35+
2. Horizontal and vertical panning both work consistently without requiring a prior horizontal gesture.
36+
3. Non-map or non-roam charts keep their existing page scrolling behavior.

0 commit comments

Comments
 (0)