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

6 files changed, 28 insertions, 15 deletions

diff --git a/src/client/util/SettingsManager.tsx b/src/client/util/SettingsManager.tsx
index e58c2687c..39c471970 100644
--- a/src/client/util/SettingsManager.tsx
+++ b/src/client/util/SettingsManager.tsx
@@ -450,7 +450,7 @@ export class SettingsManager extends React.Component<{}> {
                                     val: freeformScrollMode.Zoom,
                                 },
                             ]}
-                            selectedVal={StrCast(Doc.UserDoc().freeformScrollMode)}
+                            selectedVal={StrCast(Doc.UserDoc().freeformScrollMode, 'zoom')}
                             setSelectedVal={val => this.setFreeformScrollMode(val as string)}
                             dropdownType={DropdownType.SELECT}
                             type={Type.TERT}
diff --git a/src/client/views/GlobalKeyHandler.ts b/src/client/views/GlobalKeyHandler.ts
index ec10d21e0..aa0683964 100644
--- a/src/client/views/GlobalKeyHandler.ts
+++ b/src/client/views/GlobalKeyHandler.ts
@@ -33,6 +33,7 @@ type KeyControlInfo = {
     stopPropagation: boolean;
 };
 
+export let CtrlKey = false;
 export class KeyManager {
     public static Instance: KeyManager = new KeyManager();
     private router = new Map<string, KeyHandler>();
@@ -49,10 +50,12 @@ export class KeyManager {
     }
 
     public unhandle = action((e: KeyboardEvent) => {
+        e.key === 'Control' && (CtrlKey = false);
         if (e.key?.toLowerCase() === 'shift') runInAction(() => (DocumentDecorations.Instance.AddToSelection = false));
     });
 
     public handle = action((e: KeyboardEvent) => {
+        e.key === 'Control' && (CtrlKey = true);
         if (e.key?.toLowerCase() === 'shift') DocumentDecorations.Instance.AddToSelection = true;
         //if (!Doc.noviceMode && e.key.toLocaleLowerCase() === "shift") DocServer.UPDATE_SERVER_CACHE(true);
         const keyname = e.key && e.key.toLowerCase();
@@ -262,7 +265,7 @@ export class KeyManager {
                 PromiseValue(Cast(Doc.UserDoc()['tabs-button-tools'], Doc)).then(pv => pv && (pv.onClick as ScriptField).script.run({ this: pv }));
                 break;
             case 'i':
-                    const importBtn = DocListCast(Doc.MyLeftSidebarMenu.data).find(d => d.target === Doc.MyImports);
+                const importBtn = DocListCast(Doc.MyLeftSidebarMenu.data).find(d => d.target === Doc.MyImports);
                 if (importBtn) {
                     MainView.Instance.selectMenu(importBtn);
                 }
@@ -284,10 +287,10 @@ export class KeyManager {
                 }
                 break;
             case 'e':
-                Doc.ActiveTool = (Doc.ActiveTool === InkTool.Eraser ? InkTool.None : InkTool.Eraser);
+                Doc.ActiveTool = Doc.ActiveTool === InkTool.Eraser ? InkTool.None : InkTool.Eraser;
                 break;
             case 'p':
-                Doc.ActiveTool = (Doc.ActiveTool === InkTool.Pen ? InkTool.None : InkTool.Pen);
+                Doc.ActiveTool = Doc.ActiveTool === InkTool.Pen ? InkTool.None : InkTool.Pen;
                 break;
             case 'r':
                 preventDefault = false;
diff --git a/src/client/views/collections/TabDocView.tsx b/src/client/views/collections/TabDocView.tsx
index df36fdfbf..de23d7570 100644
--- a/src/client/views/collections/TabDocView.tsx
+++ b/src/client/views/collections/TabDocView.tsx
@@ -379,7 +379,7 @@ export class TabDocView extends React.Component<TabDocViewProps> {
                                                 return true;
                                             }
                                        }
-                                       return LightboxView.Instance.AddDocTab(doc, location);
+                                       return LightboxView.Instance.AddDocTab(doc, OpenWhere.lightbox);
             case OpenWhere.close:      return CollectionDockingView.CloseSplit(doc, whereMods);
             case OpenWhere.replace:    return CollectionDockingView.ReplaceTab(doc, whereMods, this.stack, undefined, keyValue);
             case OpenWhere.toggle:     return CollectionDockingView.ToggleSplit(doc, whereMods, this.stack, "dontSelectOnActivate", keyValue);
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.
diff --git a/src/client/views/nodes/trails/PresElementBox.tsx b/src/client/views/nodes/trails/PresElementBox.tsx
index 0402516a2..c667f126f 100644
--- a/src/client/views/nodes/trails/PresElementBox.tsx
+++ b/src/client/views/nodes/trails/PresElementBox.tsx
@@ -546,7 +546,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
 
         return (
             <div
-                className={`presItem-container`}
+                className='presItem-container'
                 key={this.props.Document[Id] + this.indexInPres}
                 ref={this._itemRef}
                 style={{