mirror of
https://github.com/Azornes/Comfyui-LayerForge.git
synced 2026-03-22 13:12:10 -03:00
3e4cdf10bc
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.
41 lines
2.2 KiB
HTML
41 lines
2.2 KiB
HTML
<h4>Canvas Control</h4>
|
|
<table>
|
|
<tr><td><kbd>Click + Drag</kbd></td><td>Pan canvas view</td></tr>
|
|
<tr><td><kbd>Mouse Wheel</kbd></td><td>Zoom view in/out</td></tr>
|
|
<tr><td><kbd>Shift + Click (background)</kbd></td><td>Start resizing canvas area</td></tr>
|
|
<tr><td><kbd>Shift + Ctrl + Click</kbd></td><td>Start moving entire canvas</td></tr>
|
|
<tr><td><kbd>Single Click (background)</kbd></td><td>Deselect all layers</td></tr>
|
|
</table>
|
|
|
|
<h4>Clipboard & I/O</h4>
|
|
<table>
|
|
<tr><td><kbd>Ctrl + C</kbd></td><td>Copy selected layer(s)</td></tr>
|
|
<tr><td><kbd>Ctrl + V</kbd></td><td>Paste from clipboard (image or internal layers)</td></tr>
|
|
<tr><td><kbd>Drag & Drop Image File</kbd></td><td>Add image as a new layer</td></tr>
|
|
</table>
|
|
|
|
<h4>Layer Interaction</h4>
|
|
<table>
|
|
<tr><td><kbd>Click + Drag</kbd></td><td>Move selected layer(s)</td></tr>
|
|
<tr><td><kbd>Ctrl + Click</kbd></td><td>Add/Remove layer from selection</td></tr>
|
|
<tr><td><kbd>Alt + Drag</kbd></td><td>Clone selected layer(s)</td></tr>
|
|
<tr><td><kbd>Right Click</kbd></td><td>Show blend mode & opacity menu</td></tr>
|
|
<tr><td><kbd>Mouse Wheel</kbd></td><td>Scale layer (snaps to grid)</td></tr>
|
|
<tr><td><kbd>Ctrl + Mouse Wheel</kbd></td><td>Fine-scale layer</td></tr>
|
|
<tr><td><kbd>Shift + Mouse Wheel</kbd></td><td>Rotate layer by 5° steps</td></tr>
|
|
<tr><td><kbd>Shift + Ctrl + Mouse Wheel</kbd></td><td>Snap rotation to 5° increments</td></tr>
|
|
<tr><td><kbd>Arrow Keys</kbd></td><td>Nudge layer by 1px</td></tr>
|
|
<tr><td><kbd>Shift + Arrow Keys</kbd></td><td>Nudge layer by 10px</td></tr>
|
|
<tr><td><kbd>[</kbd> or <kbd>]</kbd></td><td>Rotate by 1°</td></tr>
|
|
<tr><td><kbd>Shift + [</kbd> or <kbd>]</kbd></td><td>Rotate by 10°</td></tr>
|
|
<tr><td><kbd>Delete</kbd></td><td>Delete selected layer(s)</td></tr>
|
|
</table>
|
|
|
|
<h4>Transform Handles (on selected layer)</h4>
|
|
<table>
|
|
<tr><td><kbd>Drag Corner/Side</kbd></td><td>Resize layer</td></tr>
|
|
<tr><td><kbd>Drag Rotation Handle</kbd></td><td>Rotate layer</td></tr>
|
|
<tr><td><kbd>Hold Shift</kbd></td><td>Keep aspect ratio / Snap rotation to 15°</td></tr>
|
|
<tr><td><kbd>Hold Ctrl</kbd></td><td>Snap to grid</td></tr>
|
|
</table>
|