[WIP] Fix color box functionality for undo and redo actions

imgkit/core/image_layer.js

@@ -172,7 +172,6 @@ class ImageLayer {
     };
 
     this.infoText.textContent = `${info.width} x ${info.height}`;
-    this.history.add(buffer, info, this.extension);
     // Extract colors and update color boxes
     let extractedColors = colors;
     if (!extractedColors) {
@@ -184,6 +183,8 @@ class ImageLayer {
       }
     }
 
+    this.history.add(buffer, info, this.extension, extractedColors);
+
     // Update color box UI
     if (Array.isArray(extractedColors) && extractedColors.length > 0) {
       extractedColors.forEach((color, idx) => {
@@ -250,7 +251,7 @@ class ImageLayer {
 
   /**
    * Restore state from history
-   * @param {Object} state - State object with buffer, info, extension
+   * @param {Object} state - State object with buffer, info, extension, colors
    */
   restoreFromHistory(state) {
     this.buffer = state.buffer;
@@ -267,6 +268,29 @@ class ImageLayer {
 
     this.infoText.textContent = `${state.info.width} x ${state.info.height}`;
     this.extensionCombo.value = state.extension;
+
+    // Restore color boxes
+    const colors = state.colors || [];
+    if (Array.isArray(colors) && colors.length > 0) {
+      colors.forEach((color, idx) => {
+        if (this.colorBox.colors[idx]) {
+          this.colorBox.colors[idx].style.backgroundColor = color;
+          this.colorBox.colors[idx].title = color;
+        }
+      });
+
+      // Clear unused color boxes
+      for (let i = colors.length; i < this.colorBox.colors.length; i++) {
+        this.colorBox.colors[i].style.backgroundColor = "transparent";
+        this.colorBox.colors[i].title = "empty";
+      }
+    } else {
+      // No colors - clear all boxes
+      this.colorBox.colors.forEach((colorDiv) => {
+        colorDiv.style.backgroundColor = "transparent";
+        colorDiv.title = "empty";
+      });
+    }
   }
 
   // --------------------------------------------------------------------------

imgkit/features/layer_history.js

@@ -15,6 +15,7 @@ class LayerHistory {
     this.buffers = []; // Array of image buffers
     this.infos = []; // Array of image metadata objects
     this.extensions = []; // Array of file extensions
+    this.colors = []; // Array of color arrays
     this.index = -1; // Current position in history (-1 = empty)
     this.maxSize = maxSize; // Maximum number of history states
   }
@@ -24,8 +25,9 @@ class LayerHistory {
    * @param {Buffer} buffer - Image buffer
    * @param {Object} info - Image metadata (width, height, format, etc.)
    * @param {string} extension - File extension (png, jpg, etc.)
+   * @param {Array<string>} [colors] - Optional array of color strings
    */
-  add(buffer, info, extension) {
+  add(buffer, info, extension, colors = []) {
     this.index++;
 
     // Remove future history if we're not at the end
@@ -34,20 +36,23 @@ class LayerHistory {
       this.buffers = this.buffers.slice(0, this.index);
       this.infos = this.infos.slice(0, this.index);
       this.extensions = this.extensions.slice(0, this.index);
+      this.colors = this.colors.slice(0, this.index);
     }
 
     // Limit history size (FIFO - remove oldest)
     if (this.index >= this.maxSize) {
       this.buffers.shift();
       this.infos.shift();
       this.extensions.shift();
+      this.colors.shift();
       this.index = this.maxSize - 1;
     }
 
     // Add new state
     this.buffers.push(buffer);
     this.infos.push(info);
     this.extensions.push(extension);
+    this.colors.push(colors);
   }
 
   /**
@@ -78,7 +83,7 @@ class LayerHistory {
 
   /**
    * Get current state from history
-   * @returns {Object|null} Current state {buffer, info, extension} or null if empty
+   * @returns {Object|null} Current state {buffer, info, extension, colors} or null if empty
    */
   getCurrentState() {
     if (this.index < 0 || this.index >= this.buffers.length) {
@@ -89,6 +94,7 @@ class LayerHistory {
       buffer: this.buffers[this.index],
       info: this.infos[this.index],
       extension: this.extensions[this.index],
+      colors: this.colors[this.index],
     };
   }
 
@@ -123,6 +129,7 @@ class LayerHistory {
     this.buffers = [];
     this.infos = [];
     this.extensions = [];
+    this.colors = [];
     this.index = -1;
   }