tweaked keyboard modifiers for pan & zoom modes so that ctrl drag is distinguishable from pinch zoom

2 files changed, 19 insertions, 9 deletions

diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 17490e68e..ce1aa87af 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -52,6 +52,7 @@ import { CollectionFreeFormRemoteCursors } from './CollectionFreeFormRemoteCurso
 import './CollectionFreeFormView.scss';
 import { MarqueeView } from './MarqueeView';
 import React = require('react');
+import { CtrlKey } from '../../GlobalKeyHandler';
 
 export type collectionFreeformViewProps = {
     NativeWidth?: () => number;
@@ -649,7 +650,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
         this._downX = this._lastX = e.pageX;
         this._downY = this._lastY = e.pageY;
         this._downTime = Date.now();
-        if (e.button === 0 && !e.altKey && (!(e.ctrlKey && !e.metaKey) || Doc.UserDoc().freeformScrollMode === freeformScrollMode.Zoom) && this.props.isContentActive(true)) {
+        if (e.button === 0 && !e.altKey && (!(e.ctrlKey && !e.metaKey) || Doc.UserDoc().freeformScrollMode !== freeformScrollMode.Pan) && this.props.isContentActive(true)) {
             if (
                 !this.props.Document._isGroup && // group freeforms don't pan when dragged -- instead let the event go through to allow the group itself to drag
                 !InteractionUtils.IsType(e, InteractionUtils.TOUCHTYPE) &&
@@ -843,7 +844,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
         PresBox.Instance?.pauseAutoPres();
         this.props.DocumentView?.().clearViewTransition();
         const [dx, dy] = this.getTransform().transformDirection(e.clientX - this._lastX, e.clientY - this._lastY);
-        this.setPan(NumCast(this.Document[this.panXFieldKey]) - (ctrlKey ? 0: dx), NumCast(this.Document[this.panYFieldKey]) - (shiftKey ? 0: dy), 0, true);
+        this.setPan(NumCast(this.Document[this.panXFieldKey]) - (ctrlKey ? 0 : dx), NumCast(this.Document[this.panYFieldKey]) - (shiftKey ? 0 : dy), 0, true);
         this._lastX = e.clientX;
         this._lastY = e.clientY;
     };
@@ -1082,12 +1083,16 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
         e.stopPropagation();
         const docHeight = NumCast(this.rootDoc[Doc.LayoutFieldKey(this.rootDoc) + '_nativeHeight'], this.nativeHeight);
         const scrollable = NumCast(this.layoutDoc[this.scaleFieldKey], 1) === 1 && docHeight > this.props.PanelHeight() / this.nativeDimScaling + 1e-4;
-        switch (!e.ctrlKey && !e.shiftKey? Doc.UserDoc().freeformScrollMode : freeformScrollMode.Pan) {
+        switch (
+            !e.ctrlKey && !e.shiftKey && !e.metaKey && !e.altKey ?//
+                Doc.UserDoc().freeformScrollMode : // no modifiers, do assigned mode
+                    e.ctrlKey && !CtrlKey? // otherwise, if ctrl key (pinch gesture) try to zoom else pan
+                        freeformScrollMode.Zoom : freeformScrollMode.Pan // prettier-ignore
+        ) {
             case freeformScrollMode.Pan:
-                // if ctrl is selected then zoom
-                if ((!e.ctrlKey || Doc.UserDoc().freeformScrollMode === freeformScrollMode.Zoom) && this.props.isContentActive(true)) {
-                    const deltaX = e.shiftKey ? e.deltaY: e.deltaX;
-                    const deltaY = e.shiftKey ? e.deltaX : e.deltaY;
+                if (((!e.metaKey && !e.altKey) || Doc.UserDoc().freeformScrollMode === freeformScrollMode.Zoom) && this.props.isContentActive(true)) {
+                    const deltaX = e.shiftKey ? e.deltaX : e.ctrlKey ? 0 : e.deltaX;
+                    const deltaY = e.shiftKey ? 0 : e.ctrlKey ? e.deltaY : e.deltaY;
                     this.scrollPan({ deltaX: -deltaX * this.getTransform().Scale, deltaY: e.shiftKey ? 0 : -deltaY * this.getTransform().Scale });
                     break;
                 }
diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
index 1da26e707..5614c3d7b 100644
--- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
+++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
@@ -223,8 +223,13 @@ export class MarqueeView extends React.Component<SubCollectionViewProps & Marque
         this._downY = this._lastY = e.clientY;
         if (!(e.nativeEvent as any).marqueeHit) {
             (e.nativeEvent as any).marqueeHit = true;
-            // allow marquee if right click OR alt+left click OR in adding presentation slide & left key drag mode
-            if (e.button === 2 || (e.button === 0 && (e.altKey || (this.props.isContentActive?.(true) && Doc.UserDoc().freeformScrollMode === freeformScrollMode.Pan && !e.metaKey)))) {
+            // allow marquee
+            if (
+                e.button === 2 || //if right drag
+                e.altKey || // or alt drag
+                e.metaKey || // or alt drag
+                Doc.UserDoc().freeformScrollMode === freeformScrollMode.Pan // or pan mode
+            ) {
                 // if (e.altKey || (MarqueeView.DragMarquee && this.props.active(true))) {
                 this.setPreviewCursor(e.clientX, e.clientY, true, false, this.props.Document);
                 // (!e.altKey) && e.stopPropagation(); // bcz: removed so that you can alt-click on button in a collection to switch link following behaviors.