Initial commit

web/utils/canvas.js

@@ -0,0 +1,23 @@
+/**
+ * Canvas utility functions
+ */
+
+/**
+ * Get mouse position relative to canvas, accounting for scaling
+ * @param {MouseEvent} e - Mouse event
+ * @param {HTMLCanvasElement} canvas - Canvas element
+ * @returns {{x: number, y: number}} Mouse position clamped to canvas bounds
+ */
+export function getMousePos(e, canvas) {
+    const rect = canvas.getBoundingClientRect();
+    const scaleX = canvas.width / rect.width;
+    const scaleY = canvas.height / rect.height;
+    // Calculate position even if mouse is outside canvas bounds
+    const x = (e.clientX - rect.left) * scaleX;
+    const y = (e.clientY - rect.top) * scaleY;
+    // Clamp to canvas bounds
+    return {
+        x: Math.max(0, Math.min(canvas.width, x)),
+        y: Math.max(0, Math.min(canvas.height, y))
+    };
+}

web/utils/fileUpload.js

@@ -0,0 +1,33 @@
+/**
+ * File upload and image loading utilities
+ */
+
+/**
+ * Upload an image file to ComfyUI server
+ * @param {File} file - Image file to upload
+ * @returns {Promise<Object>} Upload response with filename and subfolder
+ */
+export async function uploadImageFile(file) {
+    const body = new FormData();
+    body.append("image", file);
+    body.append("overwrite", "true");
+    const resp = await fetch("/upload/image", { method: "POST", body });
+    if (!resp.ok) {
+        throw new Error(`Failed to upload image: ${resp.statusText}`);
+    }
+    return resp.json();
+}
+
+/**
+ * Load an image asynchronously from a URL
+ * @param {string} imageURL - URL of the image to load
+ * @returns {Promise<HTMLImageElement>} Loaded image element
+ */
+export async function loadImageAsync(imageURL) {
+    return new Promise((resolve) => {
+        const img = new Image();
+        img.setAttribute("crossorigin", "anonymous");
+        img.addEventListener("load", () => resolve(img));
+        img.src = imageURL;
+    });
+}

web/utils/helpers.js

@@ -0,0 +1,27 @@
+/**
+ * General helper utilities
+ */
+
+/**
+ * Deep copy an object using JSON serialization
+ * @param {any} obj - Object to deep copy
+ * @returns {any} Deep copy of the object
+ */
+export function deepCopy(obj) {
+    return JSON.parse(JSON.stringify(obj));
+}
+
+/**
+ * Convert hex color string to RGB array [0-1]
+ * @param {string} hex - Hex color string (e.g., "#ff0000" or "ff0000")
+ * @returns {number[]} RGB array with values in range [0, 1]
+ */
+export function hexToRgb(hex) {
+    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    if (!result) return [0.0, 0.0, 0.0];
+    return [
+        parseInt(result[1], 16) / 255.0,
+        parseInt(result[2], 16) / 255.0,
+        parseInt(result[3], 16) / 255.0
+    ];
+}

web/utils/uuid.js

@@ -0,0 +1,11 @@
+/**
+ * UUID generation utility
+ */
+
+export function generateUUID() {
+    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+        const r = Math.random() * 16 | 0;
+        const v = c === 'x' ? r : (r & 0x3 | 0x8);
+        return v.toString(16);
+    });
+}