Commit 774d56fb authored by Grant's avatar Grant
Browse files

add cursor pos to canvasmeta

parent b0f94196

packages/client-next/src/components/CanvasMeta.tsx

+9 −1
Original line number Diff line number Diff line
@@ -8,7 +8,7 @@ import { 
import { useAppContext } from "../contexts/AppContext";



export const CanvasMeta = () => {

  const { canvasPosition } = useAppContext();

  const { canvasPosition, cursorPosition } = useAppContext();

  const { isOpen, onOpen, onOpenChange } = useDisclosure();



  return (
@@ -19,6 +19,14 @@ export const CanvasMeta = () => { 
            <button className="btn-link" onClick={onOpen}>

              ({canvasPosition.x}, {canvasPosition.y})

            </button>

            {cursorPosition && (

              <>

                {" "}

                <span className="canvas-meta--cursor-pos">

                  (Cursor: {cursorPosition.x}, {cursorPosition.y})

                </span>

              </>

            )}

          </span>

        )}

        <span>

packages/client-next/src/components/CanvasWrapper.tsx

+17 −2
Original line number Diff line number Diff line
@@ -5,7 +5,7 @@ import { PanZoomWrapper } from "@sc07-canvas/lib/src/renderer"; 
import { RendererContext } from "@sc07-canvas/lib/src/renderer/RendererContext";

import { ViewportMoveEvent } from "@sc07-canvas/lib/src/renderer/PanZoom";

import throttle from "lodash.throttle";

import { ICanvasPosition } from "../types";

import { ICanvasPosition, IPosition } from "../types";

import { Routes } from "../lib/routes";



export const CanvasWrapper = () => {
@@ -21,7 +21,7 @@ export const CanvasWrapper = () => { 


const CanvasInner = () => {

  const canvasRef = createRef<HTMLCanvasElement>();

  const { config, setCanvasPosition } = useAppContext();

  const { config, setCanvasPosition, setCursorPosition } = useAppContext();

  const PanZoom = useContext(RendererContext);

  // const { centerView } = useControls();
@@ -45,11 +45,26 @@ const CanvasInner = () => { 
      window.location.replace(Routes.canvas(canvasPosition));

    }, 1000);



    const handleCursorPos = (pos: IPosition) => {

      if (

        pos.x < 0 ||

        pos.y < 0 ||

        pos.x > config.canvas.size[0] ||

        pos.y > config.canvas.size[1]

      ) {

        setCursorPosition();

      } else {

        setCursorPosition(pos);

      }

    };



    PanZoom.addListener("viewportMove", handleViewportMove);

    canvasInstance.on("cursorPos", handleCursorPos);



    return () => {

      canvasInstance.destroy();

      PanZoom.removeListener("viewportMove", handleViewportMove);

      canvasInstance.off("cursorPos", handleCursorPos);

    };

  }, [PanZoom, canvasRef, config, setCanvasPosition]);

packages/client-next/src/components/Pallete.tsx

+1 −1
Original line number Diff line number Diff line
@@ -13,7 +13,7 @@ export const Pallete = () => { 
  useEffect(() => {

    if (!Canvas.instance) return;



    Canvas.instance.emit("pallete", pallete);

    Canvas.instance.updatePallete(pallete);

  }, [pallete]);



  return (

packages/client-next/src/contexts/AppContext.tsx

+15 −2
Original line number Diff line number Diff line
@@ -5,7 +5,12 @@ import { 
  useEffect,

  useState,

} from "react";

import { ClientConfig, IAppContext, ICanvasPosition } from "../types";

import {

  ClientConfig,

  IAppContext,

  ICanvasPosition,

  IPosition,

} from "../types";

import { AuthSession } from "@sc07-canvas/lib/src/net";

import Network from "../lib/network";
@@ -17,6 +22,7 @@ export const AppContext = ({ children }: PropsWithChildren) => { 
  const [config, setConfig] = useState<ClientConfig>(undefined as any);

  const [auth, setAuth] = useState<AuthSession>();

  const [canvasPosition, setCanvasPosition] = useState<ICanvasPosition>();

  const [cursorPosition, setCursorPosition] = useState<IPosition>();



  useEffect(() => {

    function handleConfig(config: ClientConfig) {
@@ -41,7 +47,14 @@ export const AppContext = ({ children }: PropsWithChildren) => { 


  return (

    <appContext.Provider

      value={{ config, user: auth, canvasPosition, setCanvasPosition }}

      value={{

        config,

        user: auth,

        canvasPosition,

        setCanvasPosition,

        cursorPosition,

        setCursorPosition,

      }}

    >

      {config ? children : "Loading..."}

    </appContext.Provider>

packages/client-next/src/lib/canvas.ts

+15 −5
Original line number Diff line number Diff line 
import EventEmitter from "eventemitter3";

import { ClientConfig, IPalleteContext, Pixel } from "../types";

import { ClientConfig, IPalleteContext, IPosition, Pixel } from "../types";

import Network from "./network";

import {

  ClickEvent,
@@ -7,7 +7,17 @@ import { 
  PanZoom,

} from "@sc07-canvas/lib/src/renderer/PanZoom";



export class Canvas extends EventEmitter {

interface CanvasEvents {

  /**

   * Cursor canvas position

   * (-1, -1) is not on canvas

   * @param position Canvas position

   * @returns

   */

  cursorPos: (position: IPosition) => void;

}



export class Canvas extends EventEmitter<CanvasEvents> {

  static instance: Canvas | undefined;



  private _destroy = false;
@@ -41,8 +51,6 @@ export class Canvas extends EventEmitter { 
    this.PanZoom.addListener("hover", this.handleMouseMove.bind(this));

    this.PanZoom.addListener("click", this.handleMouseDown.bind(this));



    this.on("pallete", this.updatePallete.bind(this));



    Network.waitFor("canvas").then(([pixels]) => this.handleBatch(pixels));



    this.draw();
@@ -77,6 +85,8 @@ export class Canvas extends EventEmitter { 
      this.cursor.x = -1;

      this.cursor.y = -1;

    }



    this.emit("cursorPos", this.cursor);

  }



  handleBatch(pixels: string[]) {
@@ -92,7 +102,7 @@ export class Canvas extends EventEmitter { 
    });

  }



  handlePixel({ x, y, color, ...pixel }: Pixel) {

  handlePixel({ x, y, color }: Pixel) {

    this.pixels[x + "_" + y] = {

      color,

      type: "full",