add labels to tilemap color picker

ref DRE-1556

Author: luludotdev

editor/client/ui/css/tilemap-viewer.css

@@ -171,8 +171,9 @@
         .color-history-container {
           display: flex;
           flex-direction: column;
+          align-items: center;
           gap: 0.5rem;
-          width: 100%;
+          width: 400%;
           margin-top: 0.5rem;
 
           .color-history-label {
@@ -193,7 +194,59 @@
             min-height: 2rem;
 
             .color-swatch {
-              width: 1.5rem;
+              all: unset;
+              display: flex;
+              flex-direction: column;
+              font-family: var(--font-mono);
+              border-radius: var(--border-radius);
+
+              --size: 8rem;
+              --aspect: 7 / 3;
+
+              width: var(--size);
+              border: 1px solid var(--swatch-color);
+
+              & > .color {
+                all: unset;
+                cursor: pointer;
+                width: 100%;
+                height: calc(var(--size) / (var(--aspect)));
+                background-color: var(--swatch-color);
+              }
+
+              & > .label {
+                display: flex;
+                align-items: center;
+                width: 100%;
+                gap: 0.5rem;
+                padding: 0.25rem 0.4rem;
+
+                & > span {
+                  flex-grow: 1;
+                  padding-top: 2px;
+                  overflow: hidden;
+                  word-wrap: break-word;
+
+                  &[data-unnamed] {
+                    opacity: 80%;
+                  }
+                }
+
+                & > button {
+                  all: unset;
+                  cursor: pointer;
+                  --size: 1.1rem;
+                  width: var(--size);
+                  height: var(--size);
+
+                  & > svg {
+                    width: var(--size);
+                    height: var(--size);
+                  }
+                }
+              }
+
+              /* width: 1.5rem;
               height: 1.5rem;
               border-radius: 3px;
               cursor: pointer;
@@ -208,11 +261,11 @@
                 border-color: rgb(var(--color-text-1));
               }
 
-              &.selected {
+              &[data-selected] {
                 border-color: rgb(var(--color-primary));
                 border-width: 3px;
                 box-shadow: 0 0 0 1px rgb(var(--color-primary));
-              }
+              } */
             }
           }
         }

editor/client/ui/keyboard-shortcuts.ts

@@ -444,6 +444,12 @@ export function setupKeyboardShortcuts(
   // #region Key Events
   document.addEventListener("keydown", async (event: KeyboardEvent) => {
     if (document.activeElement instanceof HTMLInputElement) return;
+    if (
+      document.activeElement instanceof HTMLSpanElement &&
+      document.activeElement.isContentEditable
+    ) {
+      return;
+    }
     if ((window.getSelection()?.toString().length ?? 0) > 0) return;
 
     // Toggle entity enable/disable

editor/client/ui/tilemap-viewer.ts

@@ -8,9 +8,9 @@ import {
 } from "@dreamlab/engine";
 import { element as elem } from "@dreamlab/ui";
 import * as PIXI from "@dreamlab/vendor/pixi.ts";
-import "npm:vanilla-colorful/hex-color-picker.js";
+import "npm:vanilla-colorful@^0.7.2/hex-color-picker.js";
 import { EditorFacadeTilemap } from "../../common/facades/tilemap.ts";
-import { icon, Pipette, SquarePen, X } from "../_icons.tsx";
+import { icon, Pencil, Pipette, SquarePen, X } from "../_icons.tsx";
 import { IconButton } from "../components/icon-button.ts";
 import { InspectorUI } from "./inspector.ts";
 
@@ -207,6 +207,14 @@ export class TileMapViewer {
         }
       });
       this.#listeners.push(() => onTilemapUpdate.unsubscribe());
+
+      const onColorNamesChanged = () => {
+        this.#renderColorHistory();
+      };
+
+      const colorNames = tilemap.values.get("colorNames");
+      colorNames?.onChanged(onColorNamesChanged);
+      this.#listeners.push(() => colorNames?.removeChangeListener(onColorNamesChanged));
     });
 
     app.canvas.addEventListener(
@@ -865,20 +873,88 @@ export class TileMapViewer {
 
     for (const color of colors) {
       const hexColor = "#" + color.toString(16).padStart(6, "0");
-      const swatch = elem("div", {
-        className: "color-swatch",
+      const name = this.#tilemap?.colorNames?.[color];
+
+      const labelSpan = elem("span", { dataset: name ? undefined : { unnamed: "" } }, [
+        name ?? hexColor,
+      ]);
+
+      const renameButton = elem("button", { title: "Rename" }, [icon(Pencil)]);
+
+      const colorButton = elem("button", {
+        type: "button",
+        className: "color",
         title: hexColor,
-      }) as HTMLDivElement;
-      swatch.style.backgroundColor = hexColor;
+      });
 
-      if (color === this.#selectedColor) {
-        swatch.classList.add("selected");
-      }
+      const swatch = elem(
+        "div",
+        {
+          className: "color-swatch",
+          style: { "--swatch-color": hexColor },
+          dataset: color === this.#selectedColor ? { selected: "" } : undefined,
+        },
+        [colorButton, elem("div", { className: "label" }, [labelSpan, renameButton])],
+      );
 
-      swatch.addEventListener("click", () => {
+      colorButton.addEventListener("click", () => {
         this.#selectColorFromHistory(color);
       });
 
+      const startRename = (): void => {
+        if (labelSpan.isContentEditable) return;
+        labelSpan.contentEditable = "plaintext-only";
+        if (labelSpan.dataset.unnamed !== undefined) {
+          labelSpan.textContent = "";
+          delete labelSpan.dataset.unnamed;
+        }
+
+        labelSpan.focus();
+        window.getSelection()?.selectAllChildren(labelSpan);
+      };
+
+      const endRename = (cancel = false): void => {
+        if (!labelSpan.isContentEditable) return;
+        labelSpan.contentEditable = "false";
+
+        const label = labelSpan.textContent;
+        if (!cancel && this.#tilemap) {
+          if (label) this.#tilemap.colorNames[color] = label;
+          else delete this.#tilemap.colorNames[color];
+        }
+
+        this.#renderColorHistory();
+      };
+
+      labelSpan.addEventListener("keydown", ev => {
+        if (!labelSpan.isContentEditable) return;
+        if (ev.key === "Enter") {
+          ev.preventDefault();
+          endRename();
+          return;
+        }
+
+        if (ev.key === "Escape") {
+          ev.preventDefault();
+          ev.stopPropagation();
+          endRename(true);
+          return;
+        }
+      });
+
+      labelSpan.addEventListener("blur", () => {
+        if (!labelSpan.isContentEditable) return;
+        endRename();
+      });
+
+      labelSpan.addEventListener("dblclick", ev => {
+        ev.preventDefault();
+        startRename();
+      });
+      renameButton.addEventListener("click", ev => {
+        if (ev.button === 0) startRename();
+      });
+
       swatchesContainer.appendChild(swatch);
     }
   }

editor/common/facades/tilemap.ts

@@ -6,6 +6,7 @@ import {
   MouseDown,
   MouseMove,
   MouseUp,
+  ObjectAdapter,
   pointWorldToLocal,
   Tilemap,
   Vector2,
@@ -27,9 +28,14 @@ export class EditorFacadeTilemap extends BaseTilemap {
   paletteRows = 1;
   paletteIdDirty: boolean = true;
 
+  colorNames: Record<string, string> = {};
+
   constructor(ctx: EntityContext) {
     super(ctx);
 
+    // @ts-expect-error: this is fine
+    this.defineValue(EditorFacadeTilemap, "colorNames", { type: ObjectAdapter, hidden: true });
+
     const resValue = this.values.get("resolution");
     resValue?.onChanged?.(() => {
       for (const texture of this.#textureCache.values()) texture.destroy(true);