Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: fix the issue where map drag interaction cannot be terminated ou… #3658

Open
wants to merge 3 commits into
base: develop
Choose a base branch
from
+52 −15
Open

fix: fix the issue where map drag interaction cannot be terminated ou… #3658

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e580904
fix: fix the issue where map drag interaction cannot be terminated ou…
xiaoluoHe Jan 9, 2025
5ae3011
fix: fix the issue where pictorial charts cannot zoom in the blank ar…
xiaoluoHe Jan 9, 2025
9de8011
fix: region event & event trigger
xiaoluoHe Jan 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions common/changes/@visactor/vchart/fix-zoomable-outside_2025-01-09-07-35.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
{
"changes": [
{
"packageName": "@visactor/vchart",
"comment": "fix: fix the issue where map drag interaction cannot be terminated outside the canvas, #3650",
"type": "none"
}
],
"packageName": "@visactor/vchart"
}
10 changes: 10 additions & 0 deletions common/changes/@visactor/vchart/fix-zoomable-outside_2025-01-09-08-15.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
{
"changes": [
{
"packageName": "@visactor/vchart",
"comment": "fix: fix the issue where map drag interaction cannot be terminated outside the canvas.",
"type": "none"
}
],
"packageName": "@visactor/vchart"
}
4 changes: 2 additions & 2 deletions packages/vchart/src/component/common/trigger/config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ export function getDefaultTriggerEventByMode(mode: RenderMode) {
return {
start: 'pointerdown',
move: 'pointermove',
end: 'pointerup',
end: ['pointerup', 'pointerupoutside'],
zoom: 'wheel',
zoomEnd: 'pointerup',
scroll: 'wheel',
Expand All @@ -23,7 +23,7 @@ export function getDefaultTriggerEventByMode(mode: RenderMode) {
return {
start: 'pointerdown',
move: 'pointermove',
end: 'pointerup',
end: ['pointerup', 'pointerupoutside'],
zoom: 'pinch',
zoomEnd: 'pinchend',
scroll: 'pan',
Expand Down
36 changes: 24 additions & 12 deletions packages/vchart/src/interaction/zoom/zoomable.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,7 @@ export class Zoomable implements IZoomable {
}

// event
private _getZoomTriggerEvent(type: string): EventType {
private _getZoomTriggerEvent(type: string): EventType | EventType[] {
return getDefaultTriggerEventByMode(this._renderMode)[type];
}

Expand Down Expand Up @@ -168,8 +168,8 @@ export class Zoomable implements IZoomable {
? [this._getZoomTriggerEvent('zoom')]
: [this._getZoomTriggerEvent('zoom'), { level: Event_Bubble_Level.chart, consume: true }];
const zoomEndParams: [string] | [string, EventQuery] = this._isGestureListener
? [this._getZoomTriggerEvent('zoomEnd')]
: [this._getZoomTriggerEvent('zoomEnd'), { level: Event_Bubble_Level.chart, consume: false }];
? [this._getZoomTriggerEvent('zoomEnd') as string]
: [this._getZoomTriggerEvent('zoomEnd') as string, { level: Event_Bubble_Level.chart, consume: false }];
// pc端没有scrollEnd事件，所以漫游模式下scroll仅支持realTime
(event as any).on(
...zoomEndParams,
Expand Down Expand Up @@ -337,7 +337,7 @@ export class Zoomable implements IZoomable {
callback?: (delta: [number, number], e: BaseEventParams['event']) => void,
option?: ITriggerOption
) {
eventObj.on(this._getZoomTriggerEvent('start'), { level: Event_Bubble_Level.chart }, (params: any) => {
eventObj.on(this._getZoomTriggerEvent('start') as string, { level: Event_Bubble_Level.chart }, (params: any) => {
if (!params.event) {
return;
}
Expand Down Expand Up @@ -376,7 +376,7 @@ export class Zoomable implements IZoomable {
}
if (getDefaultTriggerEventByMode(this._renderMode)) {
s.event.on(
this._getZoomTriggerEvent('start'),
this._getZoomTriggerEvent('start') as string,
{ level: Event_Bubble_Level.model, filter: ({ model }) => model?.id === s.id },
params => {
this._handleDrag(params, callback, option);
Expand All @@ -400,7 +400,7 @@ export class Zoomable implements IZoomable {
r.getSeries().forEach(s => {
if (filter(s)) {
s.event.on(
this._getZoomTriggerEvent('start'),
this._getZoomTriggerEvent('start') as string,
{ level: Event_Bubble_Level.model, filter: ({ model }) => model?.id === s.id },
params => {
this._handleDrag(params, callback);
Expand Down Expand Up @@ -445,8 +445,8 @@ export class Zoomable implements IZoomable {
const delayType = option?.delayType ?? 'throttle';
const delayTime = option?.delayTime ?? 0;
const realTime = option?.realTime ?? true;
const move = this._getZoomTriggerEvent('move');
const end = this._getZoomTriggerEvent('end');
const move = this._getZoomTriggerEvent('move') as string;
const end = this._getZoomTriggerEvent('end') as string[];
const event = params.event;
let moveX = event.canvasX;
let moveY = event.canvasY;
Expand All @@ -473,16 +473,22 @@ export class Zoomable implements IZoomable {
} as unknown as BaseEventParams);
this._zoomableTrigger.pointerId = null;
this._eventObj.off(move, { level: Event_Bubble_Level.chart, source: Event_Source_Type.chart }, mousemove as any);
this._eventObj.off(end, { level: Event_Bubble_Level.chart, source: Event_Source_Type.window }, mouseup as any);
this._eventObj.allow(end);
end.forEach(endEventType => {
this._eventObj.off(
endEventType,
{ level: Event_Bubble_Level.chart, source: Event_Source_Type.chart },
mouseup as any
);
this._eventObj.allow(endEventType);
});
}, delayTime);

const mousemove = delayMap[delayType]((params: BaseEventParams) => {
if (!this._zoomableTrigger.parserDragEvent(params.event)) {
return;
}
this._clickEnable = false;
this._eventObj.prevent(end, mouseup as any);
end.forEach(endEventType => this._eventObj.prevent(endEventType, mouseup as any));

const event = params.event;
const dx = event.canvasX - moveX;
Expand All @@ -502,6 +508,12 @@ export class Zoomable implements IZoomable {
}, delayTime);

this._eventObj.on(move, { level: Event_Bubble_Level.chart, source: Event_Source_Type.chart }, mousemove as any);
this._eventObj.on(end, { level: Event_Bubble_Level.chart, source: Event_Source_Type.chart }, mouseup as any);
end.forEach(endEventType => {
this._eventObj.on(
endEventType,
{ level: Event_Bubble_Level.chart, source: Event_Source_Type.chart },
mouseup as any
);
});
}
}
7 changes: 6 additions & 1 deletion packages/vchart/src/region/region.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import { MarkTypeEnum } from '../mark/interface/type';
import type { ISeries } from '../series/interface';
import type { IModelOption } from '../model/interface';
import type { CoordinateType } from '../typings/coordinate';
import type { IRegion, IRegionSpec, IRegionSpecInfo } from './interface';
import type { IGeoRegionSpec, IRegion, IRegionSpec, IRegionSpecInfo } from './interface';
import type { IInteraction, ITrigger } from '../interaction/interface';
import { Interaction } from '../interaction/interaction';
import { ChartEvent } from '../constant/event';
Expand Down Expand Up @@ -108,6 +108,10 @@ export class Region<T extends IRegionSpec = IRegionSpec> extends LayoutModel<T>
super.created();
const clip = this._spec.clip ?? this._getClipDefaultValue();
this._groupMark = this._createGroupMark('regionGroup', this.userId, this.layoutZIndex);
if ((this._spec as IGeoRegionSpec).roam) {
this._groupMark.setMarkConfig({ interactive: true });
}

// 交互层
this._interactionMark = this._createGroupMark(
'regionInteractionGroup',
Expand Down Expand Up @@ -167,6 +171,7 @@ export class Region<T extends IRegionSpec = IRegionSpec> extends LayoutModel<T>
'normal',
AttributeLevel.User_Mark
);

this._marks.addMark(groupMark);
return groupMark;
}
Expand Down
Loading