Merge pull request #116 from Pascal-Institute/develop

Version Up

Author: volta2030

README.md

@@ -66,14 +66,15 @@ npm run build
 ### 4-1. Availiable file extension
 
 ```bash
-png svg jpg jpeg webp gif bmp ico tiff tif
+png svg jpg jpeg webp gif bmp ico tiff tif avif
 ```
 
 **Note:** Animated GIF files are now supported! When you load an animated GIF, playback controls appear automatically. See [GIF Animation Documentation](docs/GIF_ANIMATION.md) for details.
 
 ### 4-2. Multi-Select Image Panels
 
 **Multiple image panels can be selected simultaneously:**
+
 - **Single Select:** Click on an image panel to select it (clears other selections)
 - **Multi-Select:** Hold `Ctrl` key + click to toggle selection of multiple panels
 - **Deselect:** `Ctrl` + click on a selected panel to deselect it (all panels can be deselected)

assets/addImage.ico

@@ -1,3 +1,4 @@
-#resizeExecuteBtn:hover {
+#resizeExecuteBtn:hover,
+#resizePixelExecuteBtn:hover {
   cursor: pointer;
 }

css/resize_panel.css

@@ -89,12 +89,6 @@ select#extensionComboBox {
   transform: translateY(1px);
 }
 
-#nameInput {
-  position: absolute;
-  top: 8px;
-  left: 8px;
-}
-
 .mainColorBox {
   width: 24px;
   height: 86px;

css/styles.css

@@ -118,6 +118,7 @@ class ImageLayer {
     // Get UI control elements
     this.deleteBtn = this.panel.querySelector(".delete-btn");
     this.nameInput = this.panel.querySelector(".name-input");
+    this.coordText = this.panel.querySelector(".coord-text");
     this.infoText = this.panel.querySelector(".info-text");
     this.extensionCombo = this.panel.querySelector(".extension-combo");
 
@@ -172,7 +173,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 +184,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 +252,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 +269,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";
+      });
+    }
   }
 
   // --------------------------------------------------------------------------
@@ -295,6 +320,7 @@ class ImageLayer {
       this.nameInput,
       this.colorBox.container,
       this.infoText,
+      this.coordText,
       this.extensionCombo,
     ].forEach((el) => (el.style.visibility = visibility));
     this.visibility = visibility;
@@ -478,6 +504,10 @@ class ImageLayer {
     }
   }
 
+  async applyWatermark({ filePath }) {
+    await ImageProcessor.applyWatermark(filePath);
+  }
+
   /**
    * Process image with various operations
    * Bridges UI to backend operations

imgkit/core/image_layer.js

@@ -103,6 +103,17 @@ class ImageLayerEvents {
     // Extension change
     this.layer.extensionCombo.addEventListener("change", (e) => {
       if (this.layer.convertFormat) {
+        if (e.target.value === "ico") {
+          if (
+            this.layer.info.width > 256 ||
+            this.layer.info.height > 256 ||
+            this.layer.info.width !== this.layer.info.height
+          )
+            ipcRenderer.send("showNotificationREQ", "imgkit-ico-error");
+          this.layer.extensionCombo.value = this.layer.extension;
+          return;
+        }
+
         this.layer.convertFormat(e.target.value);
       }
     });
@@ -120,6 +131,7 @@ class ImageLayerEvents {
     this.setupCropping();
     this.setupDrawing();
     this.setupMagnifying();
+    this.setupCoordinateDisplay();
 
     this.setupPanelDragging();
   }
@@ -248,7 +260,10 @@ class ImageLayerEvents {
     }
 
     // Add one more empty layer for next image
-    if (this.layer.renderer.currentIndex === this.layer.renderer.imageLayerQueue.length - 1) {
+    if (
+      this.layer.renderer.currentIndex ===
+      this.layer.renderer.imageLayerQueue.length - 1
+    ) {
       this.layer.renderer.createDefaultImage();
     }
   }
@@ -362,7 +377,6 @@ class ImageLayerEvents {
         case "hide":
           this.layer.hide();
           break;
-
       }
     });
 
@@ -594,6 +608,26 @@ class ImageLayerEvents {
       }
     });
   }
+
+  /**
+   * Setup coordinate display functionality
+   */
+  setupCoordinateDisplay() {
+    // Track mouse position on canvas and display coordinates
+    this.layer.canvas.addEventListener("mousemove", (e) => {
+      const rect = this.layer.canvas.getBoundingClientRect();
+      const x = Math.floor(e.clientX - rect.left);
+      const y = Math.floor(e.clientY - rect.top);
+
+      // Update coordinate text
+      this.layer.coordText.textContent = `( ${x} , ${y} )`;
+    });
+
+    // Reset coordinate display when mouse leaves canvas
+    this.layer.canvas.addEventListener("mouseleave", () => {
+      this.layer.coordText.textContent = "( - , - )";
+    });
+  }
 }
 
 module.exports = { ImageLayerEvents };

imgkit/features/image_layer_events.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;
   }
 

imgkit/features/layer_history.js

@@ -77,7 +77,8 @@
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
   transition: all 0.2s;
   position: relative;
-  min-width: 200px;
+  min-width: 192px;
+  min-height: 192px;
   flex-shrink: 0;
   outline: none;
 }
@@ -114,8 +115,6 @@
 }
 
 .img-canvas {
-  max-width: 600px;
-  max-height: 600px;
   border: 1px solid #ddd;
   border-radius: 4px;
   cursor: pointer;
@@ -158,6 +157,11 @@
   position: absolute;
   left: 18px;
   top: 8px;
+  border-top: none;
+  border-left: none;
+  border-right: none;
+  border-bottom: 1px solid #ccc;
+  outline: none;
 }
 
 .color-box-container {
@@ -185,12 +189,10 @@
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 }
 
+.coord-text,
 .info-text {
   font-size: 13px;
   color: #666;
-  position: absolute;
-  right: 12px;
-  bottom: 12px;
 }
 
 .extension-combo {
@@ -252,3 +254,13 @@
 .context-menu-item:hover {
   background: #f5f5f5;
 }
+
+.coord-container {
+  position: absolute;
+  right: 12px;
+  bottom: 12px;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-end;
+  gap: 4px;
+}

imgkit/imgpanel.css

@@ -30,6 +30,9 @@
     <div id="imgkit-convert" class="imgkit-notification success">
       Converted Successfully
     </div>
+    <div id="imgkit-ico-error" class="imgkit-notification error">
+      Could not convert to ICO format. Keep same dimensions under 256x256
+    </div>
     <div id="imgkit-error" class="imgkit-notification error">ERROR</div>
     <div id="imgkit-open-error" class="imgkit-notification error">
       Sorry. Couldn't open image...
@@ -55,7 +58,10 @@
           id="image-name-input"
           value="Untitled"
         />
-        <h2 class="info-text">0 x 0</h2>
+        <div class="coord-container">
+          <h2 class="coord-text">( - , - )</h2>
+          <h2 class="info-text">0 x 0</h2>
+        </div>
         <select class="extension-combo">
           <option value="png">png</option>
           <option value="svg">svg</option>
@@ -67,6 +73,7 @@ <h2 class="info-text">0 x 0</h2>
           <option value="ico">ico</option>
           <option value="tif">tif</option>
           <option value="tiff">tiff</option>
+          <option value="avif">avif</option>
         </select>
       </div>
     </template>

imgkit/index.html

@@ -7,6 +7,8 @@ const namer = require("color-namer");
 const { FormatConverter } = require("./format_converter");
 
 class ImageProcessor {
+  static filePath = "";
+
   // Delegate to FormatConverter
   static async convertFormat(buffer, fromExt, toExt) {
     return FormatConverter.convert(buffer, fromExt, toExt);
@@ -20,6 +22,10 @@ class ImageProcessor {
     FormatConverter.cleanupTempFiles();
   }
 
+  static async applyWatermark(filePath) {
+    this.filePath = filePath;
+  }
+
   // Image Processing Operations (kept in ImageProcessor)
   static async processImage(buffer, options = {}) {
     try {
@@ -95,7 +101,8 @@ class ImageProcessor {
       }
 
       if (options.composite) {
-        const watermarkPath = "./assets/icon.png";
+        const watermarkPath =
+          this.filePath !== "" ? this.filePath : "./assets/icon.png";
 
         const watermark = await sharp(watermarkPath).resize(32, 32).toBuffer();