Add keybindings for zoom (01bf450c) · Commits · sc07 / Canvas · GitLab

packages/client/src/components/CanvasWrapper.tsx

+26 −0

Original line number	Diff line number	Diff line
		@@ -36,6 +36,9 @@ import {
		showPixelPlacedFeedback,
		} from "./ColorPickFeedback";

		const KEYBOARD_ZOOM_STEP = 1;
		const KEYBOARD_ZOOM_SMALL_STEP = 0.35;

		export const CanvasWrapper = () => {
		const hasMod = useHasRole("MOD");
		const { config } = useAppContext();
		@@ -426,12 +429,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);
		@@ -440,8 +461,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",