diff options
| -rw-r--r-- | src/client/util/SettingsManager.tsx | 18 | ||||
| -rw-r--r-- | src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx | 50 |
2 files changed, 60 insertions, 8 deletions
diff --git a/src/client/util/SettingsManager.tsx b/src/client/util/SettingsManager.tsx index 92032a8f9..5c1c836f7 100644 --- a/src/client/util/SettingsManager.tsx +++ b/src/client/util/SettingsManager.tsx @@ -26,6 +26,11 @@ export enum ColorScheme { System = '-MatchSystem', } +export enum freeformScrollMode { + Pan = 'pan', + Zoom = 'zoom' +} + @observer export class SettingsManager extends React.Component<{}> { public static Instance: SettingsManager; @@ -302,6 +307,12 @@ export class SettingsManager extends React.Component<{}> { ); } + + + setFreeformScrollMode = (mode: freeformScrollMode) => { + Doc.UserDoc().freeformScrollMode = mode; + } + @computed get modesContent() { return ( <div className="tab-content modes-content"> @@ -323,6 +334,13 @@ export class SettingsManager extends React.Component<{}> { <div className="playground-text">Playground Mode</div> </div> </div> + <div className="tab-column-title">Freeform scroll mode</div> + <div> + <button onClick={() => this.setFreeformScrollMode(freeformScrollMode.Pan)}>Scroll to pan</button> + <div>Scrolling pans around the freeform, holding shift and scrolling zooms in and out.</div> + <button onClick={() => this.setFreeformScrollMode(freeformScrollMode.Zoom)}>Scroll to zoom</button> + <div>Scrolling zooms in and out of canvas</div> + </div> </div> <div className="tab-column"> <div className="tab-column-title">Permissions</div> diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx index 7b93408c3..50ccc77cb 100644 --- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx +++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx @@ -26,7 +26,7 @@ import { InteractionUtils } from '../../../util/InteractionUtils'; import { ReplayMovements } from '../../../util/ReplayMovements'; import { ScriptingGlobals } from '../../../util/ScriptingGlobals'; import { SelectionManager } from '../../../util/SelectionManager'; -import { ColorScheme } from '../../../util/SettingsManager'; +import { ColorScheme, freeformScrollMode } from '../../../util/SettingsManager'; import { SnappingManager } from '../../../util/SnappingManager'; import { Transform } from '../../../util/Transform'; import { undoBatch, UndoManager } from '../../../util/UndoManager'; @@ -701,6 +701,14 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection }; @action + scrollPan = (e: WheelEvent | { deltaX: number; deltaY: number }): void => { + const dx = e.deltaX; + const dy = e.deltaY; + console.log("2: ", dx, dy); + this.setPan(NumCast(this.Document._panX) - dx, NumCast(this.Document._panY) - dy, 0, true); + }; + + @action pan = (e: PointerEvent | React.Touch | { clientX: number; clientY: number }): void => { const [dx, dy] = this.getTransform().transformDirection(e.clientX - this._lastX, e.clientY - this._lastY); this.setPan(NumCast(this.Document._panX) - dx, NumCast(this.Document._panY) - dy, 0, true); @@ -999,13 +1007,39 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection @action onPointerWheel = (e: React.WheelEvent): void => { if (this.layoutDoc._Transform || DocListCast(Doc.MyOverlayDocs?.data).includes(this.props.Document) || this.props.Document.treeViewOutlineMode === TreeViewType.outline) return; - if (!e.ctrlKey && this.props.Document.scrollHeight !== undefined) { - // things that can scroll vertically should do that instead of zooming - e.stopPropagation(); - } else if (this.props.isContentActive(true) && !this.Document._isGroup) { - e.stopPropagation(); - e.preventDefault(); - !this.props.isAnnotationOverlayScrollable && this.zoom(e.clientX, e.clientY, e.deltaY); // if (!this.props.isAnnotationOverlay) // bcz: do we want to zoom in on images/videos/etc? + e.stopPropagation(); + e.preventDefault(); + switch (Doc.UserDoc().freeformScrollMode) { + case freeformScrollMode.Pan: + // if shift is selected then zoom + if(e.ctrlKey) { + if (!e.ctrlKey && this.props.Document.scrollHeight !== undefined) { + // things that can scroll vertically should do that instead of zooming + } else if (this.props.isContentActive(true) && !this.Document._isGroup) { + !this.props.isAnnotationOverlayScrollable && this.zoom(e.clientX, e.clientY, e.deltaY); // if (!this.props.isAnnotationOverlay) // bcz: do we want to zoom in on images/videos/etc? + } + // otherwise pan + } else if (!e.ctrlKey && this.props.Document.scrollHeight !== undefined) { + // things that can scroll vertically should do that instead of zooming + } else if (this.props.isContentActive(true) && !this.Document._isGroup) { + const dx = e.deltaX; + const dy = e.deltaY; + console.log("1: ", dx, dy); + if (e.shiftKey) { + !this.props.isAnnotationOverlayScrollable && this.scrollPan({ deltaX: dy, deltaY: 0 }); + } else { + !this.props.isAnnotationOverlayScrollable && this.scrollPan({ deltaX: dx, deltaY: dy }); + } + } + break; + default: + case freeformScrollMode.Zoom: + if (!e.ctrlKey && this.props.Document.scrollHeight !== undefined) { + // things that can scroll vertically should do that instead of zooming + } else if (this.props.isContentActive(true) && !this.Document._isGroup) { + !this.props.isAnnotationOverlayScrollable && this.zoom(e.clientX, e.clientY, e.deltaY); // if (!this.props.isAnnotationOverlay) // bcz: do we want to zoom in on images/videos/etc? + } + break; } }; |