merge 1.0.12

README.md

@@ -6,7 +6,7 @@
 
 #### The Image Processing & Analysis Tool based on Electron framework & sharp npm package
 
-<img width="1259" height="1007" alt="image" src="https://github.com/user-attachments/assets/c6dbe835-26d8-40ab-8fa4-a6a330e23baf" />
+<img width="1257" height="1011" alt="image" src="https://github.com/user-attachments/assets/03b939c2-9f7b-40e2-8b40-d4b9ae100f31" />
 
 ## 0. Application mission : Give wings to pixels
 
@@ -66,7 +66,7 @@ npm run build
 ### 4-1. Availiable file extension
 
 ```bash
-png svg jpg jpeg webp gif bmp ico tiff tif avif
+png svg jpg jpeg webp gif bmp ico tiff tif avif heif heic pix
 ```
 
 **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.

assets/pix.pix

@@ -0,0 +1,14 @@
+{
+    "width": 8,
+    "height": 8,
+    "channel": 1,
+    "depth": 8,
+    "compression": {
+        "method": "none"
+    },
+    "hex_data": "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa",
+    "label": {
+        "cat": [22, 44],
+        "dog": [100, 103]
+    }
+}

css/paint_panel.css

@@ -4,6 +4,7 @@
 #watermarkBtn:hover,
 #colorpickerBtn:hover,
 #colorpickerBox:hover,
+#padColorBox:hover,
 #padBtn:hover,
 #watermarkUploadBtn:hover {
   cursor: pointer;
@@ -41,6 +42,7 @@
   right: 0px;
 }
 
+#padColorBox,
 #colorpickerBox {
   margin-left: 5px;
   width: 36px;
@@ -49,6 +51,7 @@
   background-color: black;
 }
 
+#padIndicator,
 #colorpickerIndicator {
   display: flex;
   align-items: center;
@@ -62,6 +65,7 @@
   object-fit: contain;
 }
 
+#padColorValue,
 #padValue {
   width: 80px;
   margin-left: 5px;

imgkit/core/image_layer.js

@@ -22,6 +22,7 @@ const { ImageLoader } = require("../processing/image_loader");
 const { ModeManager } = require("../features/image_mode");
 const { LayerHistory } = require("../features/layer_history");
 const { GifAnimation } = require("../features/gif_animation");
+const { Pix } = require("./pix");
 
 const LAYER_EVENT_CHANNEL = "imgkit-layer-event";
 let nextLayerId = 1;
@@ -493,6 +494,13 @@ class ImageLayer {
       // If saving as SVG and we have SVG data, save the actual SVG
       if (this.extension === "svg" && this.svgData) {
         buffer = Buffer.from(this.svgData, "utf-8");
+      } else if (this.extension === "pix") {
+        // For PIX format, convert back to PIX buffer
+        const pixData = await Pix.toPix(this.buffer, this.info);
+        await Pix.save(pixData, savePath);
+        this.filepath = savePath;
+        ipcRenderer.send("showNotificationREQ", "imgkit-save");
+        return;
       } else {
         // For other formats, extract from canvas
         const base64Data = this.image.src.replace(

imgkit/core/main_renderer.js

@@ -264,7 +264,9 @@ class ImgKitRenderer {
       if (!entry) continue;
 
       const targetLayer =
-        i === 0 ? this.getLayerById(targetLayerId) : this.createImageLayer(false);
+        i === 0
+          ? this.getLayerById(targetLayerId)
+          : this.createImageLayer(false);
       if (!targetLayer) continue;
 
       let success = false;

imgkit/core/pix.js

@@ -0,0 +1,73 @@
+const jsonfile = require("jsonfile");
+const sharp = require("sharp");
+
+class Pix {
+  static open(path) {
+    try {
+      const data = jsonfile.readFileSync(path);
+      return data;
+    } catch (err) {
+      console.error("Error reading pixData.json:", err);
+      return null;
+    }
+  }
+
+  static save(pixData, path) {
+    try {
+      jsonfile.writeFileSync(path, pixData, { spaces: 2 });
+    } catch (err) {
+      console.error("Error writing pixData.json:", err);
+    }
+  }
+
+  static openFromBuffer(buffer) {
+    try {
+      const text = Buffer.isBuffer(buffer) ? buffer.toString("utf-8") : buffer;
+      return JSON.parse(text);
+    } catch (err) {
+      console.error("Error parsing pix buffer:", err);
+      return null;
+    }
+  }
+
+  static async toSharp(pixData) {
+    const payload = pixData?.data ?? pixData;
+    const { width, height, channel, depth, hex_data } = payload;
+    if (!width || !height || !hex_data) return null;
+
+    const channels = channel ?? 4;
+    const raw = Buffer.from(hex_data, "hex");
+    const bytesPerPixel = Math.ceil(depth / 8) * channels;
+    const expectedLength = width * height * bytesPerPixel;
+    if (raw.length < expectedLength) raw.fill(0, raw.length, expectedLength);
+
+    return sharp(raw, {
+      raw: { width, height, channels, depth: depth ?? 8 },
+    })
+      .png()
+      .toBuffer({ resolveWithObject: true });
+  }
+
+  static async toPix(buffer, info) {
+    const { data, info: rawInfo } = await sharp(buffer)
+      .raw()
+      .toBuffer({ resolveWithObject: true });
+
+    return {
+      width: info.width,
+      height: info.height,
+      channel: info.channels,
+      depth: info.bitsPerSample || 8,
+      compression: {
+        method: "none",
+      },
+      hex_data: data.toString("hex"),
+      label: {},
+      joint: {},
+    };
+  }
+}
+
+module.exports = {
+  Pix,
+};

imgkit/features/image_layer_events.js

@@ -48,10 +48,9 @@ class ImageLayerEvents {
           y
         );
 
-        const color_name = await ImageProcessor.getColorName(color);
-
+        navigator.clipboard.writeText(color);
         // Send color to main renderer
-        ipcRenderer.send("colorpickerValueSEND", color, color_name);
+        ipcRenderer.send("colorpickerValueSEND", color);
       }
     });
 
@@ -101,6 +100,7 @@ class ImageLayerEvents {
         const color = colorDiv.title;
         if (color && color !== "empty") {
           navigator.clipboard.writeText(color).then(() => {
+            ipcRenderer.send("colorpickerValueSEND", color);
             ipcRenderer.send("showNotificationREQ", "imgkit-color-copy");
           });
         }
@@ -224,16 +224,33 @@ class ImageLayerEvents {
    * Setup drag and drop handlers
    */
   setupDragDrop() {
-    // Prevent default browser behavior
-    this.layer.canvas.addEventListener("dragover", (e) => e.preventDefault());
+    // Prevent default browser behavior and add rotating border effect
+    this.layer.canvas.addEventListener("dragover", (e) => {
+      e.preventDefault();
+      // Add rotating border animation class
+      this.layer.panel.classList.add("drag-border-active");
+    });
 
     this.layer.canvas.addEventListener("dragenter", (e) => {
       e.preventDefault();
       this.sendLayerEvent("select");
+      // Add rotating border animation class
+      this.layer.panel.classList.add("drag-border-active");
+    });
+
+    this.layer.canvas.addEventListener("dragleave", (e) => {
+      // Only remove class if drag actually left the canvas (not moving to child element)
+      // Also handle case where relatedTarget is null (e.g., drag left browser window)
+      if (!e.relatedTarget || !this.layer.canvas.contains(e.relatedTarget)) {
+        this.layer.panel.classList.remove("drag-border-active");
+      }
     });
 
     this.layer.canvas.addEventListener("drop", async (e) => {
       e.preventDefault();
+      // Remove rotating border animation class
+      this.layer.panel.classList.remove("drag-border-active");
+
       const files = e.dataTransfer.files;
 
       if (!files || files.length === 0) return;

imgkit/imgpanel.css

@@ -103,6 +103,37 @@
   border-top: 3px solid #4caf50;
 }
 
+/* Rotating dotted border animation during drag-over */
+@keyframes rotating-border {
+  from {
+    background-position: 0 0, 100% 100%, 0 100%, 100% 0;
+  }
+  to {
+    background-position: 12px 0, calc(100% - 12px) 100%, 0 calc(100% - 12px),
+      100% 12px;
+  }
+}
+
+.imgPanel.drag-border-active::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border-radius: inherit;
+  pointer-events: none;
+  z-index: 10;
+  background-image: linear-gradient(90deg, #666 50%, transparent 50%),
+    linear-gradient(90deg, #666 50%, transparent 50%),
+    linear-gradient(0deg, #666 50%, transparent 50%),
+    linear-gradient(0deg, #666 50%, transparent 50%);
+  background-size: 12px 3px, 12px 3px, 3px 12px, 3px 12px;
+  background-position: 0 0, 100% 100%, 0 100%, 100% 0;
+  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
+  animation: rotating-border 0.5s linear infinite;
+}
+
 .imgPanel:hover {
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
 }

imgkit/index.html

@@ -63,6 +63,7 @@ <h2 class="coord-text">( - , - )</h2>
           <h2 class="info-text">0 x 0</h2>
         </div>
         <select class="extension-combo">
+          <option value="pix">pix</option>
           <option value="png">png</option>
           <option value="svg">svg</option>
           <option value="jpg">jpg</option>
@@ -74,6 +75,8 @@ <h2 class="info-text">0 x 0</h2>
           <option value="tif">tif</option>
           <option value="tiff">tiff</option>
           <option value="avif">avif</option>
+          <option value="heif">heif</option>
+          <option value="heic">heic</option>
         </select>
       </div>
     </template>