Removed redundant and explanatory comments from CanvasInteractions.js, CanvasLayers.js, and ClipboardManager.js to improve code readability. Deleted the REFACTORING_GUIDE.md documentation file. Minor code cleanups were made to event handler logic and UI widget setup, with no changes to core functionality.
Introduces a draggable title bar to the blend mode menu for better usability and restricts its movement within the viewport. Right-clicking on selected layers now opens the blend mode menu, and the default context menu is suppressed on the canvas. Also refines tooltip table cell sizing for improved display.
Adds robust clipboard and drag & drop support for images, including ComfyUI Clipspace integration, system clipboard fallback, and improved user feedback. Clipboard and paste logic is centralized and clarified, with priority handling for internal clipboard, ComfyUI Clipspace, and system clipboard. Drag & drop is now handled at the canvas level, and tooltips and notifications provide clearer guidance for users.
Moved all system clipboard paste and image path handling logic from CanvasLayers.js into a new ClipboardManager utility class. This improves code organization and separation of concerns, making clipboard-related functionality easier to maintain and extend.
Introduces a backend API endpoint to load images from local file paths and return them as base64-encoded PNGs. Updates CanvasLayers.js to detect image file paths in the clipboard, validate them, and attempt to load images using multiple strategies, including the new backend endpoint, ComfyUI view endpoints, and a file picker fallback. Also updates canvas context creation to use the 'willReadFrequently' option for improved performance.
This commit applies consistent code style changes (mainly spacing and formatting) across multiple JS files for improved readability and maintainability. Additionally, it removes the unused 'js/examples/mask_editor_examples.js' file.
Deleted documentation files related to automatic mask loading. Cleaned up and streamlined comments across Canvas.js, CanvasInteractions.js, CanvasLayers.js, CanvasView.js, MaskTool.js, mask_utils.js, and example scripts for improved clarity and maintainability. No functional changes to core logic.
Introduces a clipboardPreference setting to choose between system clipboard and ComfyUI Clipspace as the source for paste operations in CanvasLayers. Adds a UI button in CanvasView to toggle the clipboard source, improving user control over paste behavior.
Improves the paste operation in CanvasLayers to prioritize internal clipboard, then ComfyUI Clipspace, and finally the system clipboard, pasting images at the mouse position. Also clears the internal clipboard when the mouse leaves the canvas in CanvasInteractions.
Replaces the mask editor's image preparation to use a new method that combines the full image with the current mask, ensuring the editor starts with the correct state. Updates mask application logic to fully replace the mask area instead of blending, and refactors mask extraction and application in CanvasLayers for consistency and correctness, including a new getFlattenedCanvasForMaskEditor method.
Introduces a new method to export the flattened canvas with the mask applied as the alpha channel. Updates UI actions to allow previewing, copying, and saving the image with mask alpha, and ensures node previews use the new export method. This enhances workflows that require the mask to be embedded as transparency in the output image.
Removed delegating methods to CanvasState from Canvas.js and updated all references to use canvas.canvasState directly for state operations (undo, redo, saveStateToDB). Updated CanvasInteractions.js, CanvasIO.js, CanvasLayers.js, and CanvasView.js accordingly. Updated REFACTORING_GUIDE.md to reflect the completion of this refactor.
Renamed the CanvasLayers constructor parameter from 'canvasLayers' to 'canvas' and updated all internal references accordingly for clarity and consistency. Adjusted CanvasView.js to call layer operations via canvas.canvasLayers. Updated REFACTORING_GUIDE.md to document these architectural changes and ensure all modules follow a unified naming convention.
Moved the resizeLayer and rotateLayer logic from Canvas.js to CanvasLayers.js, improving modularity and consistency. Updated REFACTORING_GUIDE.md to reflect these changes and document the current architecture and status.
Refactored the Canvas class to act as a facade, providing a simplified high-level interface and delegating detailed operations to internal modules. Added Polish documentation, grouped and clarified main operations, and moved legacy/delegation methods to the end for backward compatibility. Removed unused or redundant methods from CanvasLayers.js, such as removeLayer, moveLayer, addMattedLayer, isRotationHandle, getResizeHandle, handleBlendModeSelection, and getFlattenedCanvasAsDataURL, to streamline the codebase.
Introduces the ability to open the current canvas in a mask editor, upload and retrieve mask edits, and apply them to the mask layer. Adds utility functions for mask editor state detection and control, a new 'Edit Mask' button in the UI, and methods for handling mask updates and preview refresh. Also adds a setMask method to MaskTool for precise mask placement.
Added originalWidth and originalHeight properties to layers in CanvasLayers.js. Updated CanvasRenderer.js to display the original image dimensions in the layer info overlay if available, and improved overlay rendering to support multiline text.
Introduces a 'fit_on_add' boolean option to control whether images are fit to the canvas when added or pasted. Updates image addition and paste logic in Canvas, CanvasLayers, and CanvasView to support new placement modes ('fit', 'center', 'mouse', 'default').
The handlePaste method now accepts a pasteMode parameter to control image placement, allowing images to be pasted either at the mouse position or centered on the canvas. This improves user control when pasting images via keyboard shortcuts or UI buttons.
Replaces direct DOM removal with a dedicated closeBlendModeMenu method for consistency. Increases menu z-index for better stacking, and appends the menu to the canvas container if available instead of always using document.body.
Replaces the onInteractionEnd callback with onStateChange for more consistent state change notifications. Adds a removeSelectedLayers method to Canvas for cleaner layer removal logic. Updates UI event handlers to use the new methods and callbacks, and ensures state is saved after relevant operations. Cleans up redundant updateOutput calls and streamlines output update logic.
This commit applies consistent code formatting across multiple files, including spacing, indentation, and object destructuring. No functional changes were made; the update improves code readability and maintainability.
Refactored method and variable names from 'canvas size' to 'output area size' across multiple files for clarity. Updated UI labels and related function calls to reflect this terminology change.
Eliminated the applyBlendMode method from Canvas and CanvasLayers, along with related unused imports in CanvasIO and CanvasLayers. This streamlines the code by removing dead code and unnecessary dependencies.
Removed Polish-language and redundant comments from multiple modules, including Canvas, CanvasInteractions, CanvasLayers, CanvasRenderer, CanvasState, Canvas_view, Mask_tool, and CommonUtils. This improves code readability and maintainability by reducing clutter and focusing on self-explanatory code.
Moved CommonUtils.js, ImageUtils.js, and LoggerUtils.js to a new utils/ directory and updated all import paths accordingly throughout the codebase. Also increased the default canvas width in Canvas.js from 512 to 1024.
Extracted and centralized common utility functions such as createCanvas, normalizeToUint8, and generateUniqueFileName in CommonUtils.js to reduce code duplication. Added createImageFromSource to ImageUtils.js. Refactored db.js to use a helper for IndexedDB requests, simplifying error handling and reducing boilerplate. Updated CanvasIO.js, CanvasLayers.js, and Canvas_view.js to use the new utilities.
Enhanced the canvas save mechanism to ensure unique file names per node, prevent concurrent saves and executions, and handle missing files more robustly. Switched all logger levels to DEBUG for detailed tracing. Added fallback logic for file naming, improved error handling, and ensured that empty canvases are not saved. These changes improve reliability and traceability of canvas operations, especially in multi-node scenarios.
Moved all layer-related logic from Canvas.js to a new CanvasLayers.js module, including blend modes, clipboard operations, transformations, and utility functions. Canvas.js now delegates these operations to CanvasLayers, improving code organization and maintainability.
