Can select colors

examples/paint/src/geometry.ts

@@ -0,0 +1,6 @@
+const WIDTH = 1280;
+const HEIGHT = 960;
+
+export function normalizedToPixelCoords([x, y]: [number, number]): Point {
+  return [x * WIDTH, y * HEIGHT];
+}

examples/paint/src/paint.ts

@@ -1,9 +1,9 @@
 import { init, AirfingerEvent } from "manitas";
-import tinycolor from "tinycolor2";
 import { continueStroke, startStroke } from "./brush";
+import { normalizedToPixelCoords } from "./geometry";
+import { colors, maybeSelectColor, setupPallete } from "./pallete";
 
-const WIDTH = 1280;
-const HEIGHT = 960;
+let colorIdx = 0;
 
 export function setupPaint(canvasElement: HTMLCanvasElement | null) {
   if (!canvasElement) {
@@ -12,54 +12,62 @@ export function setupPaint(canvasElement: HTMLCanvasElement | null) {
   }
   init({ delegate: "GPU" });
   const canvasCtx = canvasElement.getContext("2d");
-  if (!canvasCtx) {
+  if (canvasCtx === null) {
     console.warn("Unable to get canvas context");
   }
   const document: Document = window.document;
-  document.addEventListener("airfingerstart", airfingerStart);
-  document.addEventListener("airfingermove", airfingerMove(canvasCtx));
+  document.addEventListener(
+    "airfingerstart",
+    airfingerStart(canvasCtx as CanvasRenderingContext2D)
+  );
+  document.addEventListener(
+    "airfingermove",
+    airfingerMove(canvasCtx as CanvasRenderingContext2D)
+  );
   document.addEventListener("airfingerend", airfingerEnd);
-  setupPallete(canvasCtx as CanvasRenderingContext2D);
+  setupPallete(canvasCtx as CanvasRenderingContext2D, colorIdx);
 }
 
-function airfingerStart(event: Event) {
-  const detail = (event as AirfingerEvent).detail;
-  const { x, y } = detail.airpoint;
-  startStroke([x * WIDTH, y * HEIGHT], colors[colorIdx]);
+function airfingerStart(canvasCtx: CanvasRenderingContext2D) {
+  return function (event: Event) {
+    const detail = (event as AirfingerEvent).detail;
+    const hand = detail.hand;
+    const { x, y } = detail.airpoint;
+    if (hand === "left") {
+      const colorSelected = maybeSelectColor([x, y]);
+      if (colorSelected !== false) {
+        colorIdx = colorSelected;
+        setupPallete(canvasCtx, colorIdx);
+      }
+    } else {
+      const point = normalizedToPixelCoords([x, y]);
+      startStroke(point, colors[colorIdx]);
+    }
+  };
 }
 
 function airfingerMove(canvasCtx: CanvasRenderingContext2D) {
   return function (event: Event) {
     const detail = (event as AirfingerEvent).detail;
+    const { hand } = detail;
     const { x, y } = detail.airpoint;
-    continueStroke([x * WIDTH, y * HEIGHT], canvasCtx);
+    if (hand === "right") {
+      canvasCtx.save();
+      continueStroke(normalizedToPixelCoords([x, y]), canvasCtx);
+      canvasCtx.restore();
+    }
+    if (hand === "left") {
+      const colorSelected = maybeSelectColor([x, y]);
+      if (colorSelected !== false) {
+        colorIdx = colorSelected;
+        setupPallete(canvasCtx, colorIdx);
+      }
+    } else {
+    }
   };
 }
 
 function airfingerEnd(event: Event) {
   const detail = (event as AirfingerEvent).detail;
   //console.log(detail);
 }
-
-let colorIdx = 0;
-
-function setupPallete(canvasCtx: CanvasRenderingContext2D) {
-  canvasCtx.clearRect(5, 15, 160, 480);
-  colors.forEach((color, idx) => {
-    console.log(idx);
-    const colorPallete = tinycolor(color);
-    canvasCtx.fillStyle =
-      idx === colorIdx
-        ? colorPallete.setAlpha(0.9).toString()
-        : colorPallete.setAlpha(0.5).toString();
-    console.log(canvasCtx.fillStyle);
-    canvasCtx.fillRect(10, 120 * idx + 30, 150, 100);
-  });
-}
-
-const colors = [
-  "rgb(0, 161, 157, 0.5)",
-  "rgb(255, 248, 229, 0.5)",
-  "rgb(255, 179, 68,0.5)",
-  "rgb(224, 93, 93,0.5)",
-];

examples/paint/src/pallete.ts

@@ -0,0 +1,49 @@
+import tinycolor from "tinycolor2";
+import { normalizedToPixelCoords } from "./geometry";
+
+const offsetX = 10;
+const offsetY = 30;
+const width = 150;
+const height = 100;
+const separation = 20;
+
+export function setupPallete(
+  canvasCtx: CanvasRenderingContext2D,
+  colorIdx: number
+) {
+  canvasCtx.save();
+  canvasCtx.clearRect(5, 15, 160, 480);
+  colors.forEach((color, idx) => {
+    const colorPallete = tinycolor(color);
+    canvasCtx.fillStyle =
+      idx === colorIdx
+        ? colorPallete.setAlpha(0.9).toString()
+        : colorPallete.setAlpha(0.5).toString();
+    canvasCtx.fillRect(10, 120 * idx + 30, 150, 100);
+  });
+  canvasCtx.restore();
+}
+
+export function maybeSelectColor([xOrig, yOrig]: Point): number | false {
+  const [x, y] = normalizedToPixelCoords([xOrig, yOrig]);
+  let found: false | number = false;
+  colors.forEach((color, idx) => {
+    if (
+      x > offsetX &&
+      x < width + offsetX &&
+      y > offsetY + idx * (height + separation) &&
+      y < offsetY + idx * (height + separation) + height
+    ) {
+      found = idx;
+    }
+  });
+
+  return found;
+}
+
+export const colors = [
+  "rgb(0, 161, 157, 0.5)",
+  "rgb(255, 248, 229, 0.5)",
+  "rgb(255, 179, 68,0.5)",
+  "rgb(224, 93, 93,0.5)",
+];