Add zoom sensitivity slider

packages/app/package.json

@@ -44,6 +44,7 @@
     "@atlaskit/modal-dialog": "^12.8.3",
     "@atlaskit/popup": "^1.11.2",
     "@atlaskit/portal": "^4.3.6",
+    "@atlaskit/range": "^7.1.7",
     "@atlaskit/select": "^16.7.3",
     "@atlaskit/side-navigation": "^3.0.0",
     "@atlaskit/tabs": "^13.4.9",

packages/app/src/components/NodeCanvas.tsx

@@ -43,6 +43,7 @@ import { useCopyNodesHotkeys } from '../hooks/useCopyNodesHotkeys';
 import { useCanvasHotkeys } from '../hooks/useCanvasHotkeys';
 import { useSearchGraph } from '../hooks/useSearchGraph';
 import Portal from '@atlaskit/portal';
+import { zoomSensitivityState } from '../state/settings';
 
 const styles = css`
   width: 100vw;
@@ -373,6 +374,8 @@ export const NodeCanvas: FC<NodeCanvasProps> = ({
     return false;
   };
 
+  const zoomSensitivity = useRecoilValue(zoomSensitivityState);
+
   // I think safari deals with wheel events differently, so we need to throttle the zooming
   // because otherwise it lags like CRAZY
   const zoomDebounced = useThrottleFn(
@@ -381,7 +384,7 @@ export const NodeCanvas: FC<NodeCanvasProps> = ({
         return;
       }
 
-      const zoomSpeed = 0.025;
+      const zoomSpeed = zoomSensitivity / 10; // 0.25 -> 0.025;
 
       const zoomFactor = wheelDelta < 0 ? 1 + zoomSpeed : 1 - zoomSpeed;
       const newZoom = canvasPosition.zoom * zoomFactor;

packages/app/src/components/SettingsModal.tsx

@@ -9,6 +9,7 @@ import {
   skippedMaxVersionState,
   themeState,
   themes,
+  zoomSensitivityState,
 } from '../state/settings.js';
 import Modal, { ModalTransition, ModalHeader, ModalTitle, ModalBody, ModalFooter } from '@atlaskit/modal-dialog';
 import TextField from '@atlaskit/textfield';
@@ -25,6 +26,7 @@ import { css } from '@emotion/react';
 import Toggle from '@atlaskit/toggle';
 import { KeyValuePairs } from './editors/KeyValuePairEditor';
 import { useCheckForUpdate } from '../hooks/useCheckForUpdate';
+import Range from '@atlaskit/range';
 
 interface SettingsModalProps {}
 
@@ -116,6 +118,7 @@ export const GeneralSettingsPage: FC = () => {
   const [recordExecutions, setRecordExecutions] = useRecoilState(recordExecutionsState);
   const [defaultExecutor, setDefaultExecutor] = useRecoilState(defaultExecutorState);
   const [previousDataPerNodeToKeep, setPreviousDataPerNodeToKeep] = useRecoilState(previousDataPerNodeToKeepState);
+  const [zoomSensitivity, setZoomSensitivity] = useRecoilState(zoomSensitivityState);
 
   return (
     <div css={fields}>
@@ -211,6 +214,32 @@ export const GeneralSettingsPage: FC = () => {
           </>
         )}
       </Field>
+      <Field name="zoomSensitivity">
+        {() => (
+          <>
+            <Label htmlFor="zoomSensitivity" testId="zoomSensitivity">
+              Zoom sensitivity
+            </Label>
+            <div className="toggle-field">
+              <Range
+                min={0.01}
+                max={2}
+                step={0.01}
+                value={zoomSensitivity}
+                onChange={(value) => {
+                  if (Number.isNaN(value) || value == null) {
+                    return;
+                  }
+                  setZoomSensitivity(value);
+                }}
+              />
+            </div>
+            <HelperMessage>
+              The sensitivity of the zoom when using the mouse wheel. Lower values will zoom slower.
+            </HelperMessage>
+          </>
+        )}
+      </Field>
     </div>
   );
 };

packages/app/src/state/settings.ts

@@ -87,3 +87,9 @@ export const updateStatusState = atom<string | undefined>({
   key: 'updateStatus',
   default: undefined,
 });
+
+export const zoomSensitivityState = atom<number>({
+  key: 'zoomSensitivity',
+  default: 0.25,
+  effects_UNSTABLE: [persistAtom],
+});

yarn.lock

@@ -666,6 +666,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@atlaskit/range@npm:^7.1.7":
+  version: 7.1.7
+  resolution: "@atlaskit/range@npm:7.1.7"
+  dependencies:
+    "@atlaskit/ds-lib": "npm:^2.2.0"
+    "@atlaskit/theme": "npm:^12.5.0"
+    "@atlaskit/tokens": "npm:^1.14.0"
+    "@babel/runtime": "npm:^7.0.0"
+    "@emotion/react": "npm:^11.7.1"
+  peerDependencies:
+    react: ^16.8.0
+  checksum: 8a8c20c77e1b28996164c8fce448f9df87fe5db75a64ad7c128441f18fe8ead713e0d24ee05b32bc93d3dca0ebee2e716d2f0d5c4dd885a785c753f7876c1ab4
+  languageName: node
+  linkType: hard
+
 "@atlaskit/select@npm:^16.7.3":
   version: 16.7.3
   resolution: "@atlaskit/select@npm:16.7.3"
@@ -4017,6 +4032,7 @@ __metadata:
     "@atlaskit/modal-dialog": "npm:^12.8.3"
     "@atlaskit/popup": "npm:^1.11.2"
     "@atlaskit/portal": "npm:^4.3.6"
+    "@atlaskit/range": "npm:^7.1.7"
     "@atlaskit/select": "npm:^16.7.3"
     "@atlaskit/side-navigation": "npm:^3.0.0"
     "@atlaskit/tabs": "npm:^13.4.9"