From 77d9a3dc6341e10a579d6f3bede380236bd3af5e Mon Sep 17 00:00:00 2001 From: bobzel Date: Fri, 10 Nov 2023 12:48:29 -0500 Subject: tweaked keyboard modifiers for pan & zoom modes so that ctrl drag is distinguishable from pinch zoom --- src/client/util/SettingsManager.tsx | 2 +- src/client/views/GlobalKeyHandler.ts | 9 ++++++--- src/client/views/collections/TabDocView.tsx | 2 +- .../collectionFreeForm/CollectionFreeFormView.tsx | 19 ++++++++++++------- .../collections/collectionFreeForm/MarqueeView.tsx | 9 +++++++-- src/client/views/nodes/trails/PresElementBox.tsx | 2 +- 6 files changed, 28 insertions(+), 15 deletions(-) (limited to 'src') 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(); @@ -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 { 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 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() { return (