Commit e0ab0f4b authored by Grant's avatar Grant
Browse files

Add snapshot key

parent e2c95060

packages/client/src/components/CanvasWrapper.tsx

+20 −3
Original line number Diff line number Diff line
@@ -17,6 +17,7 @@ import { PixelPulses } from "./Overlay/PixelPulses"; 
import { CanvasUtils } from "../lib/canvas.utils";

import { ModCanvasOverlay } from "../Moderator/ModCanvasOverlay";

import { useHasRole } from "../hooks/useHasRole";

import { toast } from "react-toastify";



export const CanvasWrapper = () => {

  const hasMod = useHasRole("MOD");
@@ -103,8 +104,8 @@ const Cursor = () => { 
};



const CanvasInner = () => {

  const canvasRef = useRef<HTMLCanvasElement | null>();

  const canvas = useRef<Canvas>();

  const canvasRef = useRef<HTMLCanvasElement>(null);

  const canvas = useRef<Canvas>(null);

  const { config, setCanvasPosition, setCursor, setPixelWhois } =

    useAppContext();

  const {
@@ -227,6 +228,20 @@ const CanvasInner = () => { 
    [canvas.current]

  );



  const handleSnapshot = useCallback(() => {

    if (!canvasRef.current) {

      toast.info("Unable to snapshot: can't find canvas");

      return;

    }



    const $el = document.createElement("a");

    $el.setAttribute("download", "canvas-" + Date.now() + ".png");

    $el.setAttribute("href", canvasRef.current.toDataURL("image/png"));

    document.body.appendChild($el);

    $el.click();

    $el.remove();

  }, [canvasRef]);



  useEffect(() => {

    if (!canvasRef.current) return;

    canvas.current = new Canvas(canvasRef.current!, PanZoom);
@@ -236,10 +251,12 @@ const CanvasInner = () => { 


    KeybindManager.on("PIXEL_WHOIS", handlePixelWhois);

    KeybindManager.on("PICK_COLOR", handlePickPixel);

    KeybindManager.on("SNAPSHOT", handleSnapshot);



    return () => {

      KeybindManager.off("PIXEL_WHOIS", handlePixelWhois);

      KeybindManager.off("PICK_COLOR", handlePickPixel);

      KeybindManager.off("SNAPSHOT", handleSnapshot);

      canvas.current!.destroy();

    };

  }, [PanZoom]);
@@ -370,7 +387,7 @@ const CanvasInner = () => { 
      width="1000"

      height="1000"

      className="pixelate"

      ref={(ref) => (canvasRef.current = ref)}

      ref={canvasRef}

    ></canvas>

  );

};

packages/client/src/lib/keybinds.ts

+11 −1
Original line number Diff line number Diff line
@@ -2,7 +2,12 @@ import EventEmitter from "eventemitter3"; 
import { EnforceObjectType } from "./utils";



export interface IKeybind {

  key: KeyboardEvent["code"] | "LCLICK" | "RCLICK" | "MCLICK" | "LONG_PRESS";

  key:

    | (KeyboardEvent["code"] & {})

    | "LCLICK"

    | "RCLICK"

    | "MCLICK"

    | "LONG_PRESS";



  alt?: boolean;

  ctrl?: boolean;
@@ -70,6 +75,11 @@ const KEYBINDS = enforceObjectType({ 
      ctrl: true,

    },

  ],

  SNAPSHOT: [

    {

      key: "KeyP",

    },

  ],

});



class KeybindManager_ extends EventEmitter<{