From a0d1d26d5beabdb8678b2bda199b63137df7d358 Mon Sep 17 00:00:00 2001
From: Ayc0 <ayc0.benj@gmail.com>
Date: Tue, 21 May 2024 11:17:29 +0200
Subject: [PATCH] Fix clamp

---
 .../page-color-visualizer/ColorPicker/ColorPicker.ts |  5 +----
 .../page-color-visualizer/LCHPaint/LCHPaint.ts       | 12 ++++++++----
 .../generate-lch-colors/generate-lch-colors.ts       |  2 +-
 .../page-color-visualizer/OkLCHPaint/OkLCHPaint.ts   | 10 +++++++---
 4 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/src/components/page-color-visualizer/ColorPicker/ColorPicker.ts b/src/components/page-color-visualizer/ColorPicker/ColorPicker.ts
index 4ef762c..f99d704 100644
--- a/src/components/page-color-visualizer/ColorPicker/ColorPicker.ts
+++ b/src/components/page-color-visualizer/ColorPicker/ColorPicker.ts
@@ -187,7 +187,7 @@ export class ColorPicker extends LitElement {
               kind: "c",
               label: "chroma",
               min: 0,
-              max: 132,
+              max: 150,
             })}
             ${this.renderInput({
               category: "lch",
@@ -246,7 +246,6 @@ export class ColorPicker extends LitElement {
               min: 0,
               max: 1,
               step: 0.01,
-              mod: (v) => toFixed(v * 255),
             })}
             ${this.renderInput({
               category: "srgb",
@@ -255,7 +254,6 @@ export class ColorPicker extends LitElement {
               min: 0,
               max: 1,
               step: 0.01,
-              mod: (v) => toFixed(v * 255),
             })}
             ${this.renderInput({
               category: "srgb",
@@ -264,7 +262,6 @@ export class ColorPicker extends LitElement {
               min: 0,
               max: 1,
               step: 0.01,
-              mod: (v) => toFixed(v * 255),
             })}
 
             <pre class="code-wrapper"><code class='code'>${stored
diff --git a/src/components/page-color-visualizer/LCHPaint/LCHPaint.ts b/src/components/page-color-visualizer/LCHPaint/LCHPaint.ts
index b569d16..a75661d 100644
--- a/src/components/page-color-visualizer/LCHPaint/LCHPaint.ts
+++ b/src/components/page-color-visualizer/LCHPaint/LCHPaint.ts
@@ -6,6 +6,9 @@ import { colorController } from "../color-controller";
 
 import { createGenerateColors } from "./generate-lch-colors";
 
+const clamp = (min: number, value: number, max: number) =>
+  Math.min(Math.max(value, min), max);
+
 @customElement("lch-paint")
 export class LCHPaint extends LitElement {
   @property({ type: Number })
@@ -35,7 +38,7 @@ export class LCHPaint extends LitElement {
     const y = Math.min(Math.max(event.clientY - rect.y, 0), rect.height);
 
     const l = Math.floor((1 - y / rect.height) * 100);
-    const c = Math.floor((x / rect.width) * 132);
+    const c = Math.floor((x / rect.width) * 150);
 
     colorController([
       {
@@ -59,8 +62,8 @@ export class LCHPaint extends LitElement {
     }
     const rect = canvas.getBoundingClientRect();
     const lch = colorController().to("lch");
-    const x = Math.floor((lch.c / 132) * rect.width);
-    const y = Math.floor((1 - lch.l / 100) * rect.height);
+    const x = Math.floor((clamp(0, lch.c, 150) / 150) * rect.width);
+    const y = Math.floor((1 - clamp(0, lch.l, 100) / 100) * rect.height);
 
     marker.style.cssText = `transform: translate(calc(${x}px - 50%), calc(${y}px - 50%))`;
   };
@@ -152,7 +155,8 @@ export class LCHPaint extends LitElement {
       width: 6px;
       height: 6px;
       border-radius: 50%;
-      border: 1px solid var(--contrast);
+      box-shadow: 0px 0px 0px 0.5px var(--black),
+        inset 0px 0px 0px 0.5px var(--white);
       z-index: 1;
     }
   `;
diff --git a/src/components/page-color-visualizer/LCHPaint/generate-lch-colors/generate-lch-colors.ts b/src/components/page-color-visualizer/LCHPaint/generate-lch-colors/generate-lch-colors.ts
index 89d322d..77e90ed 100644
--- a/src/components/page-color-visualizer/LCHPaint/generate-lch-colors/generate-lch-colors.ts
+++ b/src/components/page-color-visualizer/LCHPaint/generate-lch-colors/generate-lch-colors.ts
@@ -14,7 +14,7 @@ export function* generateColors(
   const color = new Color("lch", [50, 50, hue]);
   for (let x = 0; x < width; x += 1) {
     for (let y = 0; y < height; y += 1) {
-      color.c = Math.floor((x / width) * 132); // chroma goes to 132
+      color.c = Math.floor((x / width) * 150); // chroma goes to 150
       color.l = Math.floor((1 - y / height) * 100);
       yield {
         coordinates: { x, y },
diff --git a/src/components/page-color-visualizer/OkLCHPaint/OkLCHPaint.ts b/src/components/page-color-visualizer/OkLCHPaint/OkLCHPaint.ts
index 2fef108..fd844fb 100644
--- a/src/components/page-color-visualizer/OkLCHPaint/OkLCHPaint.ts
+++ b/src/components/page-color-visualizer/OkLCHPaint/OkLCHPaint.ts
@@ -6,6 +6,9 @@ import { colorController } from "../color-controller";
 
 import { createGenerateColors } from "./generate-oklch-colors";
 
+const clamp = (min: number, value: number, max: number) =>
+  Math.min(Math.max(value, min), max);
+
 @customElement("oklch-paint")
 export class OkLCHPaint extends LitElement {
   @property({ type: Number })
@@ -59,8 +62,8 @@ export class OkLCHPaint extends LitElement {
     }
     const rect = canvas.getBoundingClientRect();
     const oklch = colorController().to("oklch");
-    const x = Math.floor((oklch.c / 0.4) * rect.width);
-    const y = Math.floor((1 - oklch.l) * rect.height);
+    const x = Math.floor((clamp(0, oklch.c, 0.4) / 0.4) * rect.width);
+    const y = Math.floor((1 - clamp(0, oklch.l, 1)) * rect.height);
 
     marker.style.cssText = `transform: translate(calc(${x}px - 50%), calc(${y}px - 50%))`;
   };
@@ -152,7 +155,8 @@ export class OkLCHPaint extends LitElement {
       width: 6px;
       height: 6px;
       border-radius: 50%;
-      border: 1px solid var(--contrast);
+      box-shadow: 0px 0px 0px 0.5px var(--black),
+        inset 0px 0px 0px 0.5px var(--white);
       z-index: 1;
     }
   `;
-- 
2.51.2