Commit bdf8f102 authored by Ategon's avatar Ategon Committed by Grant
Browse files

Add zoom sensitivity slider

parent b287e3b5

packages/client/src/components/CanvasWrapper.tsx

+6 −2
Original line number Diff line number Diff line
@@ -412,7 +412,7 @@ const CursorInspectPreview = () => { 
const CanvasInner = () => {

  const canvasSkeleton = useRef<HTMLDivElement>(null);

  const canvas = useRef<CanvasCore>(null);

  const { config, blankOverlay, setCanvasPosition, setCursorPos } =

  const { config, settings, blankOverlay, setCanvasPosition, setCursorPos } =

    useAppContext();

  const Panel = usePanel();

  const { enable: templateEnable } = useTemplateContext();
@@ -420,6 +420,10 @@ const CanvasInner = () => { 
  const { captureCanvas, captureView, captureRegion, captureTemplateArea } =

    useCaptureContext();



  useEffect(() => {

    PanZoom.setup.zoomSensitivity = settings.get["canvas.zoomSensitivity"];

  }, [PanZoom, settings.get["canvas.zoomSensitivity"]]);



  useEffect(() => {

    const heldKeys = new Set<string>();

    let animationFrame: number | undefined;
@@ -695,7 +699,7 @@ const CanvasInner = () => { 
      if (!PanZoom.$zoom || !PanZoom.$move) return;



      const oldScale = PanZoom.transform.scale;

      PanZoom.nudgeScale(step);

      PanZoom.nudgeScale(step * PanZoom.setup.zoomSensitivity);



      if (oldScale !== PanZoom.transform.scale) PanZoom.update();

    };

packages/client/src/components/Settings/MiscSettings.tsx

+16 −0
Original line number Diff line number Diff line 
import { Slider } from "@heroui/react";

import { useTheme } from "next-themes";



import { usePanel } from "@/contexts/PanelContext";
@@ -157,6 +158,21 @@ export const MiscSettings = () => { 
        >

          Show Overlays Card

        </Switch>

        <Slider

          className="px-2"

          label="Zoom Sensitivity"

          minValue={0.25}

          maxValue={2}

          step={0.05}

          value={settings.get["canvas.zoomSensitivity"]}

          onChange={(value) => {

            settings.set({

              key: "canvas.zoomSensitivity",

              value: value as number,

            });

          }}

          getValue={(value) => Math.round((value as number) * 100) + "%"}

        />

        <Button

          className="w-fit"

          onPress={() => {

packages/client/src/contexts/AppContext.tsx

+16 −0
Original line number Diff line number Diff line
@@ -18,6 +18,7 @@ import { oapi } from "../lib/utils"; 
type Whoami = RestAPI.components["schemas"]["Whoami"];



interface ISettings {

  "canvas.zoomSensitivity"(val: number): number;

  "capture.cameraFlash"(val: boolean): boolean;

  "keybindings.enabled"(val: boolean): boolean;

  "presence.cursors"(val: boolean): boolean;
@@ -112,6 +113,13 @@ interface IMapOverlay { 


const appContext = createContext<IAppContext>({} as any);



const getStoredZoomSensitivity = () => {

  const value = Number(localStorage.getItem("canvas.zoomSensitivity"));

  return Number.isFinite(value) && value > 0

    ? Math.min(2, Math.max(0.25, value))

    : 1;

};



type WithRequiredProperty<Type, Key extends keyof Type> = Type & {

  [Property in Key]-?: Type[Property];

};
@@ -173,6 +181,7 @@ export const AppContext = ({ children }: PropsWithChildren) => { 
      };

    },

    {

      "canvas.zoomSensitivity": getStoredZoomSensitivity(),

      "capture.cameraFlash": true,

      "keybindings.enabled": true,

      "presence.cursors": localStorage.getItem("presence.cursors") !== "false",
@@ -192,6 +201,13 @@ export const AppContext = ({ children }: PropsWithChildren) => { 
    },

  );



  useEffect(() => {

    localStorage.setItem(

      "canvas.zoomSensitivity",

      String(settings[0]["canvas.zoomSensitivity"]),

    );

  }, [settings[0]["canvas.zoomSensitivity"]]);



  useEffect(() => {

    localStorage.setItem(

      "presence.cursors",

packages/lib/src/renderer/PanZoom.ts

+4 −2
Original line number Diff line number Diff line
@@ -108,6 +108,8 @@ interface ISetup { 
   */

  scale: [number, number];



  zoomSensitivity: number;



  initialTransform?: TransformState;

}
@@ -197,6 +199,7 @@ export class PanZoom extends EventEmitter<PanZoomEvents> { 


    this.setup = {

      scale: [1, 50],

      zoomSensitivity: 1,

    };



    this.flags = {
@@ -659,8 +662,7 @@ export class PanZoom extends EventEmitter<PanZoomEvents> { 
        break;

    }



    // TODO: move this to settings

    this.nudgeScale(delta / 2);

    this.nudgeScale((delta / 2) * this.setup.zoomSensitivity);



    const scale = this.transform.scale;

    if (oldScale !== scale) {

packages/lib/src/renderer/lib/pinch.utils.ts

+2 −1
Original line number Diff line number Diff line
@@ -35,7 +35,8 @@ export const calculatePinchZoom = ( 
    return contextInstance.transform.scale;

  }



  const touchProportion = currentDistance / touch.pinchStartDistance;

  const touchProportion =

    (currentDistance / touch.pinchStartDistance) ** setup.zoomSensitivity;

  const scaleDifference = touchProportion * touch.pinchStartScale;



  return checkZoomBounds(roundNumber(scaleDifference, 2), minScale, maxScale);