Commit Graph

68 Commits

Author SHA1 Message Date
Dariusz L
7ce7194cbf feat: add auto adjust output area for selected layers
Implements one-click auto adjustment of output area to fit selected layers with intelligent bounding box calculation. Supports rotation, crop mode, flips, and includes automatic padding with complete canvas state updates.
2025-08-14 12:23:29 +02:00
Dariusz L
06d94f6a63 Improve mask loading logic on node connection
Updated mask loading to immediately use available data from connected nodes and preserve existing masks if none is provided. Backend mask data is only fetched after workflow execution, ensuring no stale data is loaded during connection.
2025-08-09 02:33:28 +02:00
Dariusz L
b21d6e3502 implement strict image/mask input separation
Enhanced LayerForge input handling to strictly separate image and mask loading based on connection type. Images now only load when allowImage=true and masks only when allowMask=true, preventing unintended cross-loading between input types.
2025-08-09 01:44:31 +02:00
Dariusz L
afdac52144 Added mask and image input 2025-08-08 22:23:15 +02:00
Dariusz L
de83a884c2 Switch mask preview from chunked to canvas rendering
Replaced chunked rendering approach with direct canvas drawing for mask preview, then applying to main canvas. Added "Mask Opacity" slider.
2025-08-08 17:13:44 +02:00
Dariusz L
38973b4698 Rename CanvasNode to LayerForgeNode
Replaced all instances of CanvasNode with LayerForgeNode to prevent naming conflicts with the ComfyUI-YCanvas node.
2025-08-04 01:49:37 +02:00
Dariusz L
3d34bfafd5 Fix matting: refresh image after background removal
Fixed an issue where images were not immediately refreshed after background removal (matting). Now, the canvas updates instantly when the background is removed, ensuring correct display without requiring manual scaling or other actions.
2025-08-03 22:14:39 +02:00
Dariusz L
82c42f99fe Fix clipboard switch tooltip to update on toggle
Refactored tooltip logic for the clipboard switch so it now updates immediately when toggled, showing the correct template without requiring mouse movement. Added helper functions and improved event handling for better UX.
2025-08-03 14:56:18 +02:00
Dariusz L
5da0855a52 Added tooltip to mask visibility switch 2025-08-03 14:38:40 +02:00
Dariusz L
3d6e3901d0 Fix button crop icon display and update functionality 2025-08-03 02:19:52 +02:00
Dariusz L
e42e08e35d Crop mode button to switch 2025-08-02 19:43:03 +02:00
Dariusz L
7ed6f7ee93 Implement crop mode for cropping selected layer 2025-08-02 19:05:11 +02:00
Dariusz L
e3cef041c9 Implement robust world-based positioning for Blend Mode menu
Redesigned the positioning system for the Blend Mode menu, inspired by the "Custom Output Area" logic. The menu now anchors precisely to the top-right corner of the viewport and stays in place during panning and zooming.
2025-07-30 13:06:01 +02:00
Dariusz L
fcb5565a28 Fix "Output Area Size" button behavior using new sizing method
Refactored the "Output Area Size" button to use the new setOutputAreaSize method:

Correctly sets output area size and position based on current system logic (custom shape, extensions, outputAreaBounds)

Fully functional across all editor modes

New resizing logic:

Operates relative to the current center of the output area

Output area expands or contracts around its center without repositioning

Ensures center remains unchanged as expected

This fix provides precise control over layout dimensions and aligns with user expectations across workflows.
2025-07-30 11:17:48 +02:00
Dariusz L
6b04e3891b Changed to switch button mask on/off 2025-07-28 19:02:29 +02:00
Dariusz L
f57b9f6b58 Layout change 2025-07-28 15:57:28 +02:00
Dariusz L
5e9869f827 Refactor notifications and improve matting UX
Refactored notification utilities for a more modern, reusable notification system and added info/success/error notifications to the background removal (matting) workflow. Removed the custom error dialog in favor of notifications, and exposed all notification types for debugging. Updated imports and cleaned up notification-related code.
2025-07-28 00:58:04 +02:00
Dariusz L
bfea0cdbab Enhance notification system and auto-correct node_id
Adds a modern, type-based notification UI with support for success, error, info, warning, and alert styles, including a new showAlertNotification function. CanvasState now auto-corrects the node_id widget before saving state and notifies the user if a correction occurs. CanvasView centering logic now uses the actual canvas container for more accurate viewport adjustments.
2025-07-28 00:28:15 +02:00
Dariusz L
7701ceda56 Center canvas viewport on fullscreen toggle
Adds logic to adjust the canvas viewport to keep content centered when entering or exiting fullscreen mode. The adjustment calculates the difference in container sizes and updates the viewport position accordingly, improving user experience during fullscreen transitions.
2025-07-27 22:51:37 +02:00
Dariusz L
9e4e618955 Add ESC key support to close fullscreen editor
Implemented an ESC key handler to allow users to close the fullscreen editor mode using the Escape key. Updated the editor button tooltip and the shortcuts documentation to reflect this new shortcut.
2025-07-27 21:39:18 +02:00
Dariusz L
64ee2c6abb createElement to createCanvas 2025-07-27 20:02:45 +02:00
Dariusz L
f36f91487f Replace alert with notification utilities and refactor canvas creation
Replaces all uses of alert() with showErrorNotification or showSuccessNotification for improved user experience and consistency. Refactors canvas creation to use the createCanvas utility function across multiple files, reducing code duplication and improving maintainability. Also updates layer ID generation to use generateUUID.
2025-07-27 19:12:25 +02:00
Dariusz L
3b1a69041c Add layer visibility toggle and icon support
Introduces a 'visible' property to layers and updates all relevant logic to support toggling layer visibility. Adds visibility toggle icons to the layers panel using a new IconLoader utility, with SVG and fallback canvas icons. Updates rendering, selection, and batch preview logic to respect layer visibility. Also improves blend mode menu UI and ensures new/pasted layers are always added on top with correct z-index.
2025-07-24 19:10:17 +02:00
Dariusz L
60b6a9f932 Show placeholder image when preview is disabled
When the preview is disabled in the canvas widget, a 1x1 transparent PNG placeholder image is now set to node.imgs. This prevents issues with missing images and ensures consistent UI behavior.
2025-07-23 18:28:31 +02:00
Dariusz L
5235f7b961 Refactor SAM Detector integration into separate module
Moved all SAM Detector integration logic from CanvasView to a new SAMDetectorIntegration module for better maintainability and separation of concerns. Updated CanvasView to use the new integration functions and removed duplicate code.
2025-07-23 16:47:53 +02:00
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