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

common/changes/@visactor/vchart/fix-zoomable-outside_2025-01-09-07-35.json

@@ -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"
+}

common/changes/@visactor/vchart/fix-zoomable-outside_2025-01-09-08-15.json

@@ -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"
+}

packages/vchart/src/interaction/zoom/zoomable.ts

@@ -473,7 +473,10 @@ 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);
+      [end, `${end}outside`].forEach(type => {
+        this._eventObj.off(type, { level: Event_Bubble_Level.chart, source: Event_Source_Type.chart }, mouseup as any);
+      });
+
       this._eventObj.allow(end);
     }, delayTime);
 
@@ -502,6 +505,8 @@ 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, `${end}outside`].forEach(type => {
+      this._eventObj.on(type, { level: Event_Bubble_Level.chart, source: Event_Source_Type.chart }, mouseup as any);
+    });
   }
 }

packages/vchart/src/region/region.ts

@@ -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';
@@ -167,6 +167,11 @@ export class Region<T extends IRegionSpec = IRegionSpec> extends LayoutModel<T>
       'normal',
       AttributeLevel.User_Mark
     );
+
+    if ((this._spec as IGeoRegionSpec).roam) {
+      groupMark.setMarkConfig({ interactive: true });
+    }
+
     this._marks.addMark(groupMark);
     return groupMark;
   }