improved marquee menu interactions, fixed issue with panning on cffv

3 files changed, 21 insertions, 12 deletions

diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss
index a20d6df3a..9b608a576 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.scss
@@ -26,6 +26,9 @@
 }
 
 .collectionfreeformview-container {
+    // touch action none means that the browser will handle none of the touch actions. this allows us to implement our own actions.
+    touch-action: none;
+
     .collectionfreeformview>.jsx-parser {
         position: inherit;
         height: 100%;
diff --git a/src/client/views/collections/collectionFreeForm/MarqueeOptionsMenu.tsx b/src/client/views/collections/collectionFreeForm/MarqueeOptionsMenu.tsx
index 7c5b87283..91fcad4be 100644
--- a/src/client/views/collections/collectionFreeForm/MarqueeOptionsMenu.tsx
+++ b/src/client/views/collections/collectionFreeForm/MarqueeOptionsMenu.tsx
@@ -25,25 +25,19 @@ export default class MarqueeOptionsMenu extends AntimodeMenu {
             <button
                 className="antimodeMenu-button"
                 title="Create a Collection"
-                onPointerDown={this.createCollection}
-                onPointerLeave={this.hideMarquee}
-                onPointerEnter={this.showMarquee}>
+                onPointerDown={this.createCollection}>
                 <FontAwesomeIcon icon="object-group" size="lg" />
             </button>,
             <button
                 className="antimodeMenu-button"
                 title="Summarize Documents"
-                onPointerDown={this.summarize}
-                onPointerLeave={this.hideMarquee}
-                onPointerEnter={this.showMarquee}>
+                onPointerDown={this.summarize}>
                 <FontAwesomeIcon icon="compress-arrows-alt" size="lg" />
             </button>,
             <button
                 className="antimodeMenu-button"
                 title="Delete Documents"
-                onPointerDown={this.delete}
-                onPointerLeave={this.hideMarquee}
-                onPointerEnter={this.showMarquee}>
+                onPointerDown={this.delete}>
                 <FontAwesomeIcon icon="trash-alt" size="lg" />
             </button>,
         ]
diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
index ad4da7733..4a7fa629c 100644
--- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
+++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
@@ -51,13 +51,15 @@ export class MarqueeView extends React.Component<MarqueeViewProps>
     }
 
     @action
-    cleanupInteractions = (all: boolean = false) => {
+    cleanupInteractions = (all: boolean = false, hideMarquee: boolean = true) => {
         if (all) {
             document.removeEventListener("pointerup", this.onPointerUp, true);
             document.removeEventListener("pointermove", this.onPointerMove, true);
         }
         document.removeEventListener("keydown", this.marqueeCommand, true);
-        this._visible = false;
+        if (hideMarquee) {
+            this._visible = false;
+        }
     }
 
     @undoBatch
@@ -204,7 +206,14 @@ export class MarqueeView extends React.Component<MarqueeViewProps>
             MarqueeOptionsMenu.Instance.hideMarquee = this.hideMarquee;
             MarqueeOptionsMenu.Instance.jumpTo(e.clientX, e.clientY);
         }
-        this.cleanupInteractions(true);
+        this.cleanupInteractions(true, this._commandExecuted);
+
+        let hideMarquee = () => {
+            this.hideMarquee();
+            MarqueeOptionsMenu.Instance.fadeOut(true);
+            document.removeEventListener("pointerdown", hideMarquee);
+        }
+        document.addEventListener("pointerdown", hideMarquee)
 
         if (e.altKey) {
             e.preventDefault();
@@ -283,6 +292,7 @@ export class MarqueeView extends React.Component<MarqueeViewProps>
         SelectionManager.DeselectAll();
         this.cleanupInteractions(false);
         MarqueeOptionsMenu.Instance.fadeOut(true);
+        this.hideMarquee();
     }
 
     getCollection = (selected: Doc[]) => {
@@ -321,6 +331,7 @@ export class MarqueeView extends React.Component<MarqueeViewProps>
         let dataExtensionField = Doc.CreateDocumentExtensionForField(newCollection, "data");
         dataExtensionField.ink = inkData ? new InkField(this.marqueeInkSelect(inkData)) : undefined;
         this.marqueeInkDelete(inkData);
+        this.hideMarquee();
         return newCollection;
     }
 
@@ -341,6 +352,7 @@ export class MarqueeView extends React.Component<MarqueeViewProps>
         this.props.addDocument(newCollection, false);
         this.props.selectDocuments([newCollection]);
         MarqueeOptionsMenu.Instance.fadeOut(true);
+        this.hideMarquee();
     }
 
     @action