refactor: centralize modal creation and reduce canvas duplication

Author: Azornes

js/canvas/resolution_master_canvas_methods.js

@@ -194,56 +194,55 @@ export const canvasMethods = {
         );
     },
 
-    updateCanvasValueWidth(x, w, ctrlKey) {
-        const diagnosticsToken = performanceDiagnostics.start("updateCanvasValueWidth");
+    updateCanvasValueDimension(axis, coord, size, ctrlKey) {
+        const axisUpper = axis.toUpperCase();
+        const diagnosticsToken = performanceDiagnostics.start(`updateCanvasValueDimension${axisUpper}`);
         try {
             const node = this.node;
             const props = node.properties;
+            const isX = axis === 'x';
+
+            let val = isX ? coord / size : 1 - coord / size;
+            val = Math.max(0, Math.min(1, val));
 
-            let vX = Math.max(0, Math.min(1, x / w));
             if (!ctrlKey) {
-                let sX = props.canvas_step_x / (props.canvas_max_x - props.canvas_min_x);
-                vX = Math.round(vX / sX) * sX;
+                const step = props[`canvas_step_${axis}`];
+                const min = props[`canvas_min_${axis}`];
+                const max = props[`canvas_max_${axis}`];
+                const range = max - min;
+                const stepScale = step / range;
+                val = Math.round(val / stepScale) * stepScale;
             }
 
-            node.intpos.x = vX;
+            node.intpos[axis] = val;
 
-            let newX = props.canvas_min_x + (props.canvas_max_x - props.canvas_min_x) * vX;
+            const min = props[`canvas_min_${axis}`];
+            const max = props[`canvas_max_${axis}`];
+            let newVal = min + (max - min) * val;
 
-            const rnX = Math.pow(10, props.canvas_decimals_x);
-            newX = Math.round(rnX * newX) / rnX;
-            if (props.valueX !== newX) {
-                this.setDimensions(newX, this.heightWidget.value, { syncPosition: false });
+            const decimals = props[`canvas_decimals_${axis}`];
+            const rn = Math.pow(10, decimals);
+            newVal = Math.round(rn * newVal) / rn;
+
+            const propName = isX ? 'valueX' : 'valueY';
+            if (props[propName] !== newVal) {
+                if (isX) {
+                    this.setDimensions(newVal, this.heightWidget.value, { syncPosition: false });
+                } else {
+                    this.setDimensions(this.widthWidget.value, newVal, { syncPosition: false });
+                }
             }
         } finally {
             performanceDiagnostics.end(diagnosticsToken);
         }
     },
 
-    updateCanvasValueHeight(y, h, ctrlKey) {
-        const diagnosticsToken = performanceDiagnostics.start("updateCanvasValueHeight");
-        try {
-            const node = this.node;
-            const props = node.properties;
-
-            let vY = Math.max(0, Math.min(1, 1 - y / h));
-            if (!ctrlKey) {
-                let sY = props.canvas_step_y / (props.canvas_max_y - props.canvas_min_y);
-                vY = Math.round(vY / sY) * sY;
-            }
-
-            node.intpos.y = vY;
-
-            let newY = props.canvas_min_y + (props.canvas_max_y - props.canvas_min_y) * vY;
+    updateCanvasValueWidth(x, w, ctrlKey) {
+        this.updateCanvasValueDimension('x', x, w, ctrlKey);
+    },
 
-            const rnY = Math.pow(10, props.canvas_decimals_y);
-            newY = Math.round(rnY * newY) / rnY;
-            if (props.valueY !== newY) {
-                this.setDimensions(this.widthWidget.value, newY, { syncPosition: false });
-            }
-        } finally {
-            performanceDiagnostics.end(diagnosticsToken);
-        }
+    updateCanvasValueHeight(y, h, ctrlKey) {
+        this.updateCanvasValueDimension('y', y, h, ctrlKey);
     },
 
     isPointInControl(x, y, control) {

js/dialogs/custom_value_dialog_manager.js

@@ -1,5 +1,6 @@
 // custom_value_dialog_manager.js - Manages custom value input dialogs for ResolutionMaster
 import { createModuleLogger } from "../log_system/log_funcs.js";
+import { createModalWrapper } from "../utils/dialog_helper.js";
 
 const log = createModuleLogger('custom_value_dialog_manager');
 
@@ -10,6 +11,7 @@ export class CustomValueDialogManager {
         this.customInputDialog = null;
         this.customInputOverlay = null;
         this.inputDialogActive = false;
+        this.closeWrapper = null;
     }
 
     /**
@@ -83,28 +85,32 @@ export class CustomValueDialogManager {
         this.inputDialogActive = true;
         log.debug(`Creating dialog for ${valueType}, current: ${currentValue}`);
 
-        // Create overlay
-        const overlay = document.createElement('div');
-        this.customInputOverlay = overlay;
-        overlay.style.cssText = `
-            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
-            background: rgba(0,0,0,0.5); z-index: 9999;
-        `;
-        overlay.addEventListener('mousedown', () => this.closeCustomInputDialog());
-        document.body.appendChild(overlay);
+        // Create overlay and dialog container via dialog_helper
+        const wrapper = createModalWrapper({
+            className: 'litegraph-custom-input-dialog',
+            overlayStyle: `
+                position: fixed; top: 0; left: 0; width: 100%; height: 100%;
+                background: rgba(0,0,0,0.5); z-index: 9999;
+            `,
+            dialogStyle: `
+                position: fixed;
+                background: linear-gradient(135deg, #2a2a2a 0%, #1e1e1e 100%);
+                border: 2px solid #555; border-radius: 8px; padding: 20px;
+                box-shadow: 0 8px 32px rgba(0,0,0,0.8); z-index: 10000;
+                font-family: Arial, sans-serif; min-width: 280px;
+            `,
+            onClose: () => {
+                this.customInputDialog = null;
+                this.customInputOverlay = null;
+                this.inputDialogActive = false;
+                this.closeWrapper = null;
+            }
+        });
 
-        // Create dialog container
-        const dialog = document.createElement('div');
-        this.customInputDialog = dialog;
-        dialog.className = 'litegraph-custom-input-dialog';
-        dialog.addEventListener('mousedown', (e) => e.stopPropagation()); // Prevent clicks inside from closing
-        dialog.style.cssText = `
-            position: fixed;
-            background: linear-gradient(135deg, #2a2a2a 0%, #1e1e1e 100%);
-            border: 2px solid #555; border-radius: 8px; padding: 20px;
-            box-shadow: 0 8px 32px rgba(0,0,0,0.8); z-index: 10000;
-            font-family: Arial, sans-serif; min-width: 280px;
-        `;
+        this.customInputOverlay = wrapper.overlay;
+        this.customInputDialog = wrapper.dialog;
+        this.closeWrapper = wrapper.close;
+        const dialog = wrapper.dialog;
 
         // Position dialog
         const x = e.clientX ? e.clientX + 20 : (window.innerWidth - 280) / 2;
@@ -129,8 +135,6 @@ export class CustomValueDialogManager {
             </div>
         `;
 
-        document.body.appendChild(dialog);
-        
         // Get elements
         const input = dialog.querySelector('#customValueInput');
         const validationMsg = dialog.querySelector('#validationMessage');
@@ -222,15 +226,20 @@ export class CustomValueDialogManager {
      * Closes and cleans up the custom input dialog
      */
     closeCustomInputDialog() {
-        if (this.customInputDialog) {
-            document.body.removeChild(this.customInputDialog);
-            this.customInputDialog = null;
-        }
-        if (this.customInputOverlay) {
-            document.body.removeChild(this.customInputOverlay);
-            this.customInputOverlay = null;
+        if (this.closeWrapper) {
+            this.closeWrapper();
+            this.closeWrapper = null;
+        } else {
+            if (this.customInputDialog) {
+                document.body.removeChild(this.customInputDialog);
+                this.customInputDialog = null;
+            }
+            if (this.customInputOverlay) {
+                document.body.removeChild(this.customInputOverlay);
+                this.customInputOverlay = null;
+            }
+            this.inputDialogActive = false;
         }
-        this.inputDialogActive = false;
     }
 
     /**

js/presets/preset_manager/json_editor_dialog.js

@@ -3,6 +3,7 @@
 import { TooltipManager } from './tooltip_manager.js';
 import { presetManagerTooltips } from '../../config/resolution_master_tooltips.js';
 import { createModuleLogger } from "../../log_system/log_funcs.js";
+import { createModalWrapper } from "../../utils/dialog_helper.js";
 
 const log = createModuleLogger('json_editor_dialog');
 
@@ -25,13 +26,14 @@ export class JSONEditorDialog {
             jsonLength: currentJSON.length
         });
 
-        // Create overlay
-        const overlay = document.createElement('div');
-        overlay.className = 'resolution-master-json-editor-overlay';
-        
-        // Create dialog container
-        const dialog = document.createElement('div');
-        dialog.className = 'resolution-master-json-editor-dialog';
+        // Create overlay and dialog container via dialog_helper
+        const wrapper = createModalWrapper({
+            className: 'resolution-master-json-editor-dialog',
+            overlayClassName: 'resolution-master-json-editor-overlay',
+            clickAwayToClose: false
+        });
+        const overlay = wrapper.overlay;
+        const dialog = wrapper.dialog;
 
         // Create tooltip manager
         const tooltipManager = new TooltipManager({
@@ -50,8 +52,7 @@ export class JSONEditorDialog {
                 this.editor = null;
             }
             tooltipManager.destroy();
-            document.body.removeChild(overlay);
-            document.body.removeChild(dialog);
+            wrapper.close();
         });
         dialog.appendChild(header);
 
@@ -151,15 +152,10 @@ export class JSONEditorDialog {
                 this.editor = null;
             }
             tooltipManager.destroy();
-            document.body.removeChild(overlay);
-            document.body.removeChild(dialog);
+            wrapper.close();
         });
         dialog.appendChild(footer);
 
-        // Add to DOM
-        document.body.appendChild(overlay);
-        document.body.appendChild(dialog);
-        
         // Attach tooltips to buttons (after adding to DOM)
         const closeBtn = dialog.querySelector('#json-editor-close-btn');
         const cancelBtn = dialog.querySelector('#json-editor-cancel-btn');

js/presets/preset_manager/preset_add_view_renderer.js

@@ -2,6 +2,7 @@
 
 import { AspectRatioUtils } from "../aspect_ratio_utils.js";
 import { getIconHtml } from "../../utils/icon_utils.js";
+import { aspectRatioString } from "../../canvas/aspect_ratio_math.js";
 
 /**
  * Renderer for the add/edit preset view
@@ -386,14 +387,11 @@ export class PresetAddViewRenderer {
                 previewShape.style.border = `2px solid ${borderColor}`;
                 previewShape.style.background = bgColor;
 
-                const gcd = (a, b) => b === 0 ? a : gcd(b, a % b);
-                const divisor = gcd(width, height);
-                const ratioW = width / divisor;
-                const ratioH = height / divisor;
+                const ratioStr = aspectRatioString(width, height);
 
                 previewText.innerHTML = `
                     <div style="color: ${textColor};">${width}×${height}</div>
-                    <div style="font-size: 10px; color: #888;">${ratioW}:${ratioH}</div>
+                    <div style="font-size: 10px; color: #888;">${ratioStr}</div>
                 `;
 
                 if (previewCanvas.parentElement) {

js/presets/preset_manager/preset_manager_dialog.js

@@ -18,6 +18,7 @@ import { JSONEditorDialog } from './json_editor_dialog.js';
 import { PresetListRenderer } from './preset_list_renderer.js';
 import { PresetAddViewRenderer } from './preset_add_view_renderer.js';
 import { TooltipManager } from './tooltip_manager.js';
+import { createModalWrapper } from "../../utils/dialog_helper.js";
 
 const log = createModuleLogger('preset_manager_dialog');
 
@@ -146,18 +147,19 @@ export class PresetManagerDialog {
         this.selectedPresetsForDeletion.clear(); // Clear selection when opening dialog
         this.lastClickedPresetKey = null; // Reset last clicked for shift-click
 
-        // Create overlay
-        this.overlay = document.createElement('div');
-        this.overlay.className = 'resolution-master-preset-manager-overlay';
+        // Create overlay and container via dialog_helper
+        const wrapper = createModalWrapper({
+            className: 'resolution-master-preset-manager-dialog',
+            overlayClassName: 'resolution-master-preset-manager-overlay',
+            clickAwayToClose: false // Manual overlay click check below
+        });
+        this.overlay = wrapper.overlay;
+        this.container = wrapper.dialog;
+        this.closeWrapper = wrapper.close;
+
         this.overlay.addEventListener('mousedown', (e) => {
             if (e.target === this.overlay) this.hide();
         });
-        document.body.appendChild(this.overlay);
-
-        // Create container
-        this.container = document.createElement('div');
-        this.container.className = 'resolution-master-preset-manager-dialog';
-        document.body.appendChild(this.container);
 
         this.renderDialog();
     }
@@ -846,11 +848,16 @@ export class PresetManagerDialog {
             this.registerTooltips();
         }
 
-        if (this.container && this.container.parentNode) {
-            document.body.removeChild(this.container);
-        }
-        if (this.overlay && this.overlay.parentNode) {
-            document.body.removeChild(this.overlay);
+        if (this.closeWrapper) {
+            this.closeWrapper();
+            this.closeWrapper = null;
+        } else {
+            if (this.container && this.container.parentNode) {
+                document.body.removeChild(this.container);
+            }
+            if (this.overlay && this.overlay.parentNode) {
+                document.body.removeChild(this.overlay);
+            }
         }
 
         this.container = null;