Commit Graph

43 Commits

Author SHA1 Message Date
Dariusz L
ab4a8f7ca7 Debounce canvas output updates and optimize image handling
Added debouncing to the updateOutput function to prevent excessive updates during rapid changes. Large images are now handled using blob URLs for better performance, while small images use data URIs. Also added logic to skip output updates when preview is disabled and improved cleanup of temporary file trackers when nodes are removed.
2025-07-23 16:27:12 +02:00
Dariusz L
472f8768a5 Add addMask method to MaskTool for overlaying masks
Introduces the addMask method to MaskTool in both JS and TS implementations, allowing new masks to be overlaid without clearing existing ones. Updates CanvasView to use addMask instead of setMask when applying SAM detector results.
2025-07-22 23:39:56 +02:00
Dariusz L
1d520eca01 Improve SAM Detector monitoring with modal observer
Replaces polling-based monitoring of SAM Detector results with a MutationObserver that detects modal closure and style changes. Adds fallback to polling if modal is not found, and provides user notification if no mask is applied. This improves reliability and user feedback when applying masks from the SAM Detector.
2025-07-22 23:37:37 +02:00
Dariusz L
784e3d9296 Remove Clipspace integration from CanvasView
Eliminates the sendCanvasToClipspace method and related UI/menu options from CanvasView and its TypeScript counterpart, as well as the associated type definition. Also removes the unused maskContext getter from MaskTool. This refactor likely reflects a change in feature requirements or a move away from Impact Pack compatibility.
2025-07-22 23:19:34 +02:00
Dariusz L
eaf9c28ef0 Add Impact Pack clipspace and SAM Detector integration
Introduces automatic registration of canvas images in ComfyUI's clipspace for Impact Pack compatibility, including a new 'Send to Clipspace' menu option and a method on ComfyNode. Adds monitoring and mask application for SAM Detector results, ensuring seamless mask transfer to LayerForge. Also exposes MaskTool's maskContext property for external access.
2025-07-22 23:10:09 +02:00
Dariusz L
20d52b632a Refactor layer rendering into reusable methods
Moved layer drawing logic into CanvasLayers._drawLayer and _drawLayers methods, replacing repeated rendering code in CanvasIO and CanvasLayers. This improves maintainability and ensures consistent handling of layer properties such as blend mode, opacity, rotation, and flipping. Also, fixed layer serialization to only generate imageId when missing, and ensured new layers have flipH/flipV set when created from matted images.
2025-07-21 23:03:52 +02:00
Dariusz L
98d4769ba1 Fix preview visibility initialization in Canvas
Replaces setPreviewVisibility(false) with direct assignment to previewVisible in Canvas and Canvas.ts. Adds initialization of preview state based on widget value in CanvasView and CanvasView.ts to ensure correct preview visibility on widget creation.
2025-07-21 20:45:13 +02:00
Dariusz L
4e55bb25bc Improve matting error handling and user feedback
Adds specific handling for JSONDecodeError during model loading in Python, returning a clear error message if the model config is corrupted. Updates the JS/TS frontends to show a custom error dialog with details and copy-to-clipboard functionality instead of a simple alert, and ensures spinner removal is safe. This improves user experience and troubleshooting for matting model errors.
2025-07-04 07:31:33 +02:00
Dariusz L
5adc77471f project migration to typescript
Project migration to typescript
2025-07-04 04:22:51 +02:00
Dariusz L
3e4cdf10bc Refactor CanvasView: externalize styles and tooltips
Moved inline CSS from CanvasView.js to a dedicated canvas_view.css file and added dynamic stylesheet loading. Extracted tooltip and shortcut HTML into separate template files and implemented a ResourceManager utility for loading stylesheets and templates. Updated CanvasInteractions.js and CanvasView.js to use the new resource management and template loading approach, improving maintainability and modularity.
2025-07-03 17:27:00 +02:00
Dariusz L
af5e81c56b Initial commit
Add initial project files and setup.
2025-07-03 15:59:11 +02:00
Dariusz L
152a3f7dff Auto-hide and restore mask overlay in batch preview
BatchPreviewManager now automatically hides the mask overlay when batch preview starts and restores its previous state when preview ends. The mask toggle button's state and label are updated accordingly. Also, mask toggle button IDs are now unique per canvas node.
2025-07-03 02:26:44 +02:00
Dariusz L
9f9a733731 Add batch preview manager and mask overlay toggle
Introduces BatchPreviewManager for reviewing and confirming multiple imported layers after auto-refresh. Adds a toggle button for mask overlay visibility in the UI and updates mask rendering logic to respect overlay visibility. Also refactors image import to return new layers and adds a utility for removing layers by ID.
2025-07-03 02:22:51 +02:00
Dariusz L
195e25437a Improve matting error handling and user feedback
Adds checks for missing 'transformers' dependency and network errors in the matting endpoint, returning clear error messages for common failure cases. Updates the frontend to display more informative alerts to users when matting fails, including details from server responses.
2025-07-02 10:36:22 +02:00
Dariusz L
d2ccfc4e20 Update undo/redo button handlers in CanvasView
Changed the undo and redo button onclick handlers to call canvas.undo() and canvas.redo() instead of canvas.canvasState.undo() and canvas.canvasState.redo(). This aligns the button actions with the updated canvas API.
2025-07-02 10:08:32 +02:00
Dariusz L
e0a4549321 Refactor tooltip positioning logic in CanvasView
Extracted tooltip positioning code into reusable showTooltip and hideTooltip helper functions. Updated event handlers to use these helpers, reducing code duplication and improving maintainability.
2025-07-02 09:53:35 +02:00
Dariusz L
29ab916759 Refactor layers panel UI and improve resize handling
Changed UI text in CanvasLayersPanel from Polish to English and removed the add layer button and its logic. Moved and improved the ResizeObserver logic in CanvasView.js to update both the canvas and layers panel positions dynamically based on the controls' height.
2025-07-02 09:40:21 +02:00
Dariusz L
cae24310db Adjust canvas and panel layout widths
Reduced the right margin of the canvas from 320px to 270px and the panel width from 300px to 250px to optimize space allocation in the UI.
2025-07-02 09:25:33 +02:00
Dariusz L
7d8fd30bbf Add snap-to-5° rotation with Shift+Ctrl+Mouse Wheel
Introduces a new shortcut (Shift + Ctrl + Mouse Wheel) to snap layer rotation to the nearest 5° increment. Updates the CanvasView help table to document this new functionality and clarifies the description for existing rotation shortcuts.
2025-07-02 09:21:47 +02:00
Dariusz L
244d48728c Refactor canvas interactions and update keyboard shortcuts
Reorganizes mouse and keyboard event handling in CanvasInteractions for clearer priority and improved usability. Adds global keyboard shortcuts for undo, redo, copy, and paste. Updates context-sensitive shortcuts to support both Delete and Backspace for layer removal. Refactors CanvasLayers to use delayed state saving via requestSaveState. Updates CanvasView shortcut documentation to reflect these changes and clarify mouse/keyboard actions.
2025-07-02 09:16:16 +02:00
Dariusz L
a73a3dcf96 Add layers panel UI and improve layer management
Introduces a new CanvasLayersPanel component for managing layers visually, including selection, renaming, reordering via drag-and-drop, and deletion. Integrates the panel into the main Canvas and CanvasView, synchronizes selection and state changes, and adds logic for duplicating layers and debounced state saving. Moves IndexedDB state saving to a Web Worker for better performance. Also sets default logger level to DEBUG for improved diagnostics.
2025-07-02 08:09:49 +02:00
Dariusz L
53aa35491e Add layer fusion (flatten/merge) feature
Introduces a new 'Fuse' button to the canvas UI, allowing users to flatten and merge multiple selected layers into a single layer. The implementation handles bounding box calculation, z-index ordering, and updates the canvas state and selection accordingly. The fuse button is enabled only when at least two layers are selected.
2025-07-02 00:42:38 +02:00
Dariusz L
562b0db042 Initial commit
Project scaffolding and initial file setup.
2025-07-01 17:02:15 +02:00
Dariusz L
3544576605 Revert "Add mask editor integration to canvas workflow"
This reverts commit 7a7c8f2295.
2025-06-29 04:49:56 +02:00
Dariusz L
7a7c8f2295 Add mask editor integration to canvas workflow
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.
2025-06-29 04:15:45 +02:00
Dariusz L
4376a21147 Add 'fit on add' option for image placement
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').
2025-06-28 19:48:57 +02:00
Dariusz L
8ead4176b5 Add paste mode to handlePaste for image positioning
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.
2025-06-28 19:30:24 +02:00
Dariusz L
7c3a6f72c7 Defer canvas rendering with setTimeout for UI updates
Replaces direct calls to canvas.render() and node.onResize() with setTimeout to defer execution, ensuring UI updates occur after DOM changes. This helps prevent rendering issues and improves responsiveness when toggling mask controls and editor view.
2025-06-28 08:07:10 +02:00
Dariusz L
51eaac362a Rename brush softness to hardness in mask tool
Replaces all references to 'softness' with 'hardness' for brush controls in both CanvasView.js and MaskTool.js. Updates UI labels, slider IDs, and internal logic to use 'hardness' terminology, clarifying that a higher value means a harder brush edge.
2025-06-28 07:59:32 +02:00
Dariusz L
d783709287 Improve tooltip styling and positioning in CanvasView
Refactors the .painter-tooltip CSS for better appearance, responsiveness, and usability, including new scaling classes, table-based layout, and improved scrollbar styling. Updates shortcut help content to use tables instead of lists for clarity. Enhances tooltip positioning logic to prevent overflow outside the viewport and ensures proper display near screen edges.
2025-06-28 04:01:04 +02:00
Dariusz L
16730cf9a1 Refactor canvas help tooltip for mask mode support
Split help tooltip content into standard and mask mode shortcuts. Tooltip now dynamically displays relevant shortcuts based on whether the mask tool is active, improving user guidance during mask editing.
2025-06-28 03:37:23 +02:00
Dariusz L
092748ef85 Add descriptive titles to canvas control buttons
Added 'title' attributes to various canvas control buttons to provide tooltips with descriptive information about each button's function. This improves accessibility and user experience by clarifying the purpose of each control.
2025-06-28 02:37:58 +02:00
Dariusz L
3957aa0f61 Refactor canvas state change handling and layer removal
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.
2025-06-28 02:26:06 +02:00
Dariusz L
f76f047fa6 Add onInteractionEnd callback to Canvas
Introduces an optional onInteractionEnd callback to the Canvas class, which is triggered at the end of user interactions. CanvasView now uses this callback to update output after interactions, improving responsiveness to user actions.
2025-06-28 01:35:18 +02:00
Dariusz L
375ed6a2b8 Refactor codebase for consistent formatting and style
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.
2025-06-27 07:13:20 +02:00
Dariusz L
b40d645a79 Refactor canvas and mask handling for clarity and maintainability
Removed redundant comments and streamlined logic across canvas-related modules, including mask positioning, garbage collection, and WebSocket communication. Improved code readability and maintainability by eliminating unnecessary explanations and clarifying intent in both Python and JavaScript files. No functional changes were made; this is a cleanup and refactor for better developer experience.
2025-06-27 06:17:24 +02:00
Dariusz L
711722eb9f Revert "Refactor logging and formatting"
This reverts commit 83ce890ef4.
2025-06-27 05:50:47 +02:00
Dariusz L
83ce890ef4 Refactor logging and formatting
Improved code readability
2025-06-27 05:32:11 +02:00
Dariusz L
be4fae2964 Add WebSocket-based RAM output for CanvasNode
Introduces a WebSocket-based mechanism for CanvasNode to send and receive canvas image and mask data in RAM, enabling fast, diskless data transfer between frontend and backend. Adds a new WebSocketManager utility, updates CanvasIO to support RAM output mode, and modifies CanvasView to send canvas data via WebSocket before prompt execution. The backend (canvas_node.py) is updated to handle WebSocket data storage and retrieval, with improved locking and cleanup logic. This change improves workflow speed and reliability by avoiding unnecessary disk I/O and ensuring up-to-date canvas data is available during node execution.
2025-06-27 05:28:13 +02:00
Dariusz L
3ca0a32a14 Add operation-based auto garbage collection for images
Introduces an operation counter and threshold in ImageReferenceManager to trigger automatic garbage collection after a set number of canvas operations. Canvas now increments the operation count on save, undo, and redo, and exposes methods to set the operation threshold and retrieve stats including operation count. CanvasView displays the operation count and threshold after manual garbage collection.
2025-06-26 19:18:05 +02:00
Dariusz L
7d7076cc45 Add image garbage collection to canvas
Introduced ImageReferenceManager to track and clean up unused images from the database and cache. Added manual garbage collection controls to the UI and exposed related stats and cleanup methods in Canvas. Updated db.js with a method to retrieve all image IDs for cleanup purposes.
2025-06-26 18:28:50 +02:00
Dariusz L
dd6a9dfc85 Rename canvas size methods and labels to output area
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.
2025-06-26 18:06:40 +02:00
Dariusz L
7c23373e8c Refactor file names and clean up imports
Renamed Mask_tool.js to MaskTool.js and Canvas_view.js to CanvasView.js for consistency. Removed unused imports and redundant properties/methods from Canvas.js and CanvasState.js to streamline the codebase.
2025-06-26 05:09:21 +02:00