From 77620eccd21d564473c81b43341f59de22339248 Mon Sep 17 00:00:00 2001
From: stew-ro <60453211+stew-ro@users.noreply.github.com>
Date: Tue, 15 Sep 2020 03:07:24 -0700
Subject: [PATCH] Stew ro/support drag pan for release (#576)

* fix: support multiple env files

* fix: support drag pan for release
---
 .../components/common/imageMap/imageMap.tsx   | 58 +++++++++++--------
 .../components/pages/editorPage/canvas.tsx    |  1 +
 2 files changed, 34 insertions(+), 25 deletions(-)

diff --git a/src/react/components/common/imageMap/imageMap.tsx b/src/react/components/common/imageMap/imageMap.tsx
index eae095990..b786c7643 100644
--- a/src/react/components/common/imageMap/imageMap.tsx
+++ b/src/react/components/common/imageMap/imageMap.tsx
@@ -78,6 +78,7 @@ export class ImageMap extends React.Component<IImageMapProps> {
 
     private mapElement: HTMLDivElement | null = null;
 
+    private dragPan: DragPan;
     private draw: Draw;
     private dragBox: DragBox;
     private modify: Modify;
@@ -192,7 +193,11 @@ export class ImageMap extends React.Component<IImageMapProps> {
 
     public render() {
         return (
-            <div onMouseLeave={this.handlePonterLeaveImageMap} className="map-wrapper">
+            <div
+                onMouseLeave={this.handlePonterLeaveImageMap}
+                onMouseEnter={this.handlePointerEnterImageMap}
+                className="map-wrapper"
+            >
                 <div style={{cursor: this.getCursor()}} id="map" className="map" ref={(el) => this.mapElement = el}/>
             </div>
         );
@@ -640,17 +645,15 @@ export class ImageMap extends React.Component<IImageMapProps> {
             return;
         }
 
-        this.countPointerDown += 1;
-        if (this.countPointerDown >= 2) {
-            this.setDragPanInteraction(true /*dragPanEnabled*/);
-            this.isSwiping = false;
-            return;
-        }
-
         const eventPixel =  this.map.getEventPixel(event.originalEvent);
 
         const filter = this.getLayerFilterAtPixel(eventPixel);
 
+        const isPixelOnFeature = !!filter;
+        if (isPixelOnFeature) {
+            this.setDragPanInteraction(false);
+        }
+
         if (filter && this.props.handleFeatureSelect) {
             this.map.forEachFeatureAtPixel(
                 eventPixel,
@@ -660,9 +663,6 @@ export class ImageMap extends React.Component<IImageMapProps> {
                 filter.layerfilter,
             );
         }
-        const isPixelOnFeature = !!filter;
-        this.setDragPanInteraction(!isPixelOnFeature /*dragPanEnabled*/);
-        this.isSwiping = isPixelOnFeature;
     }
 
     private getLayerFilterAtPixel = (eventPixel: any) => {
@@ -786,18 +786,21 @@ export class ImageMap extends React.Component<IImageMapProps> {
             return;
         }
 
-        this.countPointerDown -= 1;
-        this.setDragPanInteraction(true /*dragPanEnabled*/);
-        this.isSwiping = false;
-        this.pointerMoveEventCount = 0;
+        this.setDragPanInteraction(true);
     }
 
     private setDragPanInteraction = (dragPanEnabled: boolean) => {
-        this.map.getInteractions().forEach((interaction) => {
-            if (interaction instanceof DragPan) {
-                interaction.setActive(dragPanEnabled);
-            }
-        });
+        if (dragPanEnabled) {
+            this.addInteraction(this.dragPan)
+            this.setSwiping(false);
+        } else {
+            this.removeInteraction(this.dragPan)
+            this.setSwiping(true);
+        }
+    }
+
+    public setSwiping = (swiping: boolean) => {
+        this.isSwiping = swiping;
     }
 
     private shouldIgnorePointerMove = () => {
@@ -809,11 +812,6 @@ export class ImageMap extends React.Component<IImageMapProps> {
             return true;
         }
 
-        if (this.ignorePointerMoveEventCount > this.pointerMoveEventCount) {
-            ++this.pointerMoveEventCount;
-            return true;
-        }
-
         return false;
     }
 
@@ -849,6 +847,8 @@ export class ImageMap extends React.Component<IImageMapProps> {
     }
 
     private initializeDefaultSelectionMode = () => {
+        this.initializeDragPan();
+        this.setDragPanInteraction(true);
         this.initializeSnapCheck();
         this.initializePointerOnImageCheck();
         this.initializeDragBox();
@@ -965,6 +965,10 @@ export class ImageMap extends React.Component<IImageMapProps> {
         });
     }
 
+    private initializeDragPan = () => {
+        this.dragPan = new DragPan();
+    }
+
     private initializeDragBox = () => {
         this.dragBox = new DragBox({
             condition: shiftKeyOnly,
@@ -1060,6 +1064,10 @@ export class ImageMap extends React.Component<IImageMapProps> {
         }
     }
 
+    private handlePointerEnterImageMap = () => {
+        this.setDragPanInteraction(true);
+    }
+
     private initializeEditorLayers = (projection: Projection) => {
         this.initializeImageLayer(projection);
         this.initializeTextLayer();
diff --git a/src/react/components/pages/editorPage/canvas.tsx b/src/react/components/pages/editorPage/canvas.tsx
index 26ec4fdfe..8d4a3e8d1 100644
--- a/src/react/components/pages/editorPage/canvas.tsx
+++ b/src/react/components/pages/editorPage/canvas.tsx
@@ -997,6 +997,7 @@ export default class Canvas extends React.Component<ICanvasProps, ICanvasState>
         const regionId = feature.get("id");
         if (isToggle && this.isRegionSelected(regionId)) {
             this.removeFromSelectedRegions(regionId);
+            this.imageMap.setSwiping(false);
         } else {
             this.handleMultiSelection(regionId, category);
             const polygon = regionId.split(",").map(parseFloat);