Commit 6553d41c authored by Ategon's avatar Ategon Committed by Grant
Browse files

Add keybindings for zoom

parent 6b08923c

packages/client/src/components/CanvasWrapper.tsx

+29 −10
Original line number Diff line number Diff line
@@ -38,6 +38,8 @@ import { 
} from "./ColorPickFeedback";

import { CursorPresenceLayer } from "./CursorPresenceLayer";



const KEYBOARD_ZOOM_STEP = 1;

const KEYBOARD_ZOOM_SMALL_STEP = 0.35;

const INSPECT_END_ANIMATION_DURATION = 180;



export function CanvasWrapper() {
@@ -257,12 +259,8 @@ const CanvasInner = () => { 
    enable: templateEnable,

  } = useTemplateContext();

  const PanZoom = useContext(RendererContext);

  const {

    captureCanvas,

    captureView,

    captureRegion,

    captureTemplateArea,

  } = useCaptureContext();

  const { captureCanvas, captureView, captureRegion, captureTemplateArea } =

    useCaptureContext();



  useEffect(() => {

    const heldKeys = new Set<string>();
@@ -323,10 +321,8 @@ const CanvasInner = () => { 
      velocityY += (targetVelocityY - velocityY) * easing;



      if (Math.abs(velocityX) > 0.5 || Math.abs(velocityY) > 0.5) {

        PanZoom.transform.x +=

          (velocityX * elapsed) / PanZoom.transform.scale;

        PanZoom.transform.y +=

          (velocityY * elapsed) / PanZoom.transform.scale;

        PanZoom.transform.x += (velocityX * elapsed) / PanZoom.transform.scale;

        PanZoom.transform.y += (velocityY * elapsed) / PanZoom.transform.scale;

        const visualX = snapToDevicePixel(PanZoom.transform.x);

        const visualY = snapToDevicePixel(PanZoom.transform.y);

        PanZoom.$move.style.setProperty(
@@ -540,12 +536,30 @@ const CanvasInner = () => { 
  }, []);



  useEffect(() => {

    const zoomBy = (step: number) => {

      if (!PanZoom.$zoom || !PanZoom.$move) return;



      const oldScale = PanZoom.transform.scale;

      PanZoom.nudgeScale(step);



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

    };



    const zoomOut = () => zoomBy(-KEYBOARD_ZOOM_STEP);

    const zoomIn = () => zoomBy(KEYBOARD_ZOOM_STEP);

    const zoomOutSmall = () => zoomBy(-KEYBOARD_ZOOM_SMALL_STEP);

    const zoomInSmall = () => zoomBy(KEYBOARD_ZOOM_SMALL_STEP);



    KeybindManager.on("PIXEL_WHOIS", handlePixelWhois);

    KeybindManager.on("PICK_COLOR", handlePickPixel);

    KeybindManager.on("CAPTURE_CANVAS", captureCanvas);

    KeybindManager.on("CAPTURE_VIEW", captureView);

    KeybindManager.on("CAPTURE_REGION", captureRegion);

    KeybindManager.on("CAPTURE_TEMPLATE", captureTemplateArea);

    KeybindManager.on("ZOOM_OUT", zoomOut);

    KeybindManager.on("ZOOM_IN", zoomIn);

    KeybindManager.on("ZOOM_OUT_SMALL", zoomOutSmall);

    KeybindManager.on("ZOOM_IN_SMALL", zoomInSmall);



    return () => {

      KeybindManager.off("PIXEL_WHOIS", handlePixelWhois);
@@ -554,8 +568,13 @@ const CanvasInner = () => { 
      KeybindManager.off("CAPTURE_VIEW", captureView);

      KeybindManager.off("CAPTURE_REGION", captureRegion);

      KeybindManager.off("CAPTURE_TEMPLATE", captureTemplateArea);

      KeybindManager.off("ZOOM_OUT", zoomOut);

      KeybindManager.off("ZOOM_IN", zoomIn);

      KeybindManager.off("ZOOM_OUT_SMALL", zoomOutSmall);

      KeybindManager.off("ZOOM_IN_SMALL", zoomInSmall);

    };

  }, [

    PanZoom,

    handlePixelWhois,

    handlePickPixel,

    captureCanvas,

packages/client/src/lib/keybinds.ts

+64 −0
Original line number Diff line number Diff line
@@ -27,6 +27,70 @@ const KEYBINDS = enforceObjectType({ 
  PAN_DOWN: [{ key: "KeyS" }, { key: "ArrowDown" }],

  PAN_LEFT: [{ key: "KeyA" }, { key: "ArrowLeft" }],

  PAN_RIGHT: [{ key: "KeyD" }, { key: "ArrowRight" }],

  ZOOM_OUT: [

    {

      key: "KeyQ",

      ctrl: false,

      alt: false,

      meta: false,

      shift: false,

    },

    {

      key: "Minus",

      ctrl: false,

      alt: false,

      meta: false,

      shift: false,

    },

  ],

  ZOOM_IN: [

    {

      key: "KeyE",

      ctrl: false,

      alt: false,

      meta: false,

      shift: false,

    },

    {

      key: "Equal",

      ctrl: false,

      alt: false,

      meta: false,

      shift: false,

    },

  ],

  ZOOM_OUT_SMALL: [

    {

      key: "KeyQ",

      ctrl: false,

      alt: false,

      meta: false,

      shift: true,

    },

    {

      key: "Minus",

      ctrl: false,

      alt: false,

      meta: false,

      shift: true,

    },

  ],

  ZOOM_IN_SMALL: [

    {

      key: "KeyE",

      ctrl: false,

      alt: false,

      meta: false,

      shift: true,

    },

    {

      key: "Equal",

      ctrl: false,

      alt: false,

      meta: false,

      shift: true,

    },

  ],

  PIXEL_WHOIS: [

    {

      key: "LCLICK",