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

Allow color picking the void or empty space

parent c5a17ebb

packages/client/src/components/CanvasWrapper.tsx

+11 −4
Original line number Diff line number Diff line
@@ -32,6 +32,7 @@ import { Template as TemplateCl } from "../lib/template"; 
import { getRenderer } from "../lib/utils";

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

import {

  showColorDeselectFeedback,

  showColorPickFeedback,

  showPixelPlacedFeedback,

} from "./ColorPickFeedback";
@@ -497,24 +498,30 @@ const CanvasInner = () => { 
      }



      const [x, y] = canvas.current.screenToPos(clientX, clientY);

      if (!isCoordInCanvas(x, y)) return; // out of bounds

      if (!isCoordInCanvas(x, y)) {

        PaletteLib.setSelectedColor(undefined);

        showColorDeselectFeedback(clientX, clientY);

        return;

      }



      let pixelColor = -1;



      const templatePixel = getTemplatePixel(x, y);

      if (templatePixel) {

        pixelColor =

          PaletteLib.getColorFromHex(templatePixel.slice(1))?.id || -1;

          PaletteLib.getColorFromHex(templatePixel.slice(1))?.id ?? -1;

      }



      if (pixelColor === -1) {

        pixelColor = canvas.current.getPixel(x, y)?.color || -1;

        pixelColor = canvas.current.getPixel(x, y)?.color ?? -1;

      }



      if (pixelColor === -1) {

        return;

        pixelColor = PaletteLib.getColorFromHex("ffffff")?.id ?? -1;

      }



      if (pixelColor === -1) return;



      PaletteLib.setSelectedColor(pixelColor);

      showColorPickFeedback(

        clientX,

packages/client/src/components/ColorPickFeedback.tsx

+5 −0
Original line number Diff line number Diff line
@@ -52,6 +52,11 @@ const showFeedback = ( 
  );

};



export const showColorDeselectFeedback = (

  clientX: number,

  clientY: number,

) => showFeedback("Color deselected!", clientX, clientY);



export const showColorPickFeedback = (

  clientX: number,

  clientY: number,

packages/client/src/components/Toolbar/Palette.tsx

+29 −6
Original line number Diff line number Diff line
@@ -49,7 +49,10 @@ import { 
} from "../../lib/template";

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

import OpenChatButton from "../Chat/OpenChatButton";

import { showColorPickFeedback } from "../ColorPickFeedback";

import {

  showColorDeselectFeedback,

  showColorPickFeedback,

} from "../ColorPickFeedback";

import { Button } from "../core/Button";

import { ThemeSwitcher } from "../Header/ThemeSwitcher";

import { LoginButton } from "../Login/LoginButton";
@@ -383,12 +386,15 @@ export const Palette = () => { 
      return;

    }



    if (!isCoordInCanvas(x, y)) return 0;

    if (!isCoordInCanvas(x, y)) return null;



    const templateColor = getTemplatePixelColor(x, y);

    if (templateColor !== -1) return templateColor;



    return canvas.getPixel(x, y)?.color ?? 1;

    const canvasColor = canvas.getPixel(x, y)?.color;

    if (canvasColor !== undefined && canvasColor >= 0) return canvasColor;



    return PaletteLib.getColorFromHex("ffffff")?.id;

  };



  const handlePickColorAt = (
@@ -399,12 +405,27 @@ export const Palette = () => { 
    const pickedColor = getPickedColor(clientX, clientY);

    if (pickedColor === undefined) return undefined;



    if (pickedColor === null) {

      if (target === "secondary") {

        PaletteLib.setSecondaryColor(undefined);

      } else {

        PaletteLib.setSelectedColor(undefined);

      }

      return null;

    }



    if (target === "secondary") {

      handleSelectSecondaryColor(pickedColor);

      if (cursor.color === pickedColor) {

        PaletteLib.setSelectedColor(undefined);

      }

      PaletteLib.setSecondaryColor(pickedColor);

      return pickedColor;

    }



    handleSelectPrimaryColor(pickedColor);

    if (cursor.secondaryColor === pickedColor) {

      PaletteLib.setSecondaryColor(undefined);

    }

    PaletteLib.setSelectedColor(pickedColor);

    return pickedColor;

  };
@@ -531,7 +552,9 @@ export const Palette = () => { 
      event.clientY,

      event.button === 2 ? "secondary" : "primary",

    );

    if (pickedColor !== undefined) {

    if (pickedColor === null) {

      showColorDeselectFeedback(event.clientX, event.clientY);

    } else if (typeof pickedColor === "number") {

      showColorPickFeedback(

        event.clientX,

        event.clientY,