mirror of
https://github.com/Azornes/Comfyui-LayerForge.git
synced 2026-03-21 20:52:12 -03:00
Crop mode button to switch
This commit is contained in:
Dariusz L
@@ -326,47 +326,38 @@ async function createCanvasWidget(node: ComfyNode, widget: any, app: ComfyApp):
|
||||
|
||||
$el("div.painter-separator"),
|
||||
$el("div.painter-button-group", {}, [
|
||||
$el("button.painter-button.requires-selection", {
|
||||
id: `crop-mode-btn-${node.id}`,
|
||||
textContent: "Crop Mode",
|
||||
title: "Toggle crop mode for selected layer(s)",
|
||||
onclick: () => {
|
||||
const cropBtn = controlPanel.querySelector(`#crop-mode-btn-${node.id}`) as HTMLButtonElement;
|
||||
const selectedLayers = canvas.canvasSelection.selectedLayers;
|
||||
|
||||
if (selectedLayers.length === 0) return;
|
||||
|
||||
// Toggle crop mode for all selected layers
|
||||
const firstLayer = selectedLayers[0];
|
||||
const newCropMode = !firstLayer.cropMode;
|
||||
|
||||
selectedLayers.forEach((layer: Layer) => {
|
||||
layer.cropMode = newCropMode;
|
||||
$el("label.clipboard-switch.requires-selection", {
|
||||
id: `crop-transform-switch-${node.id}`,
|
||||
title: "Toggle between Transform and Crop mode for selected layer(s)"
|
||||
}, [
|
||||
$el("input", {
|
||||
type: "checkbox",
|
||||
checked: false,
|
||||
onchange: (e: Event) => {
|
||||
const isCropMode = (e.target as HTMLInputElement).checked;
|
||||
const selectedLayers = canvas.canvasSelection.selectedLayers;
|
||||
if (selectedLayers.length === 0) return;
|
||||
|
||||
// Initialize crop bounds if entering crop mode
|
||||
if (newCropMode && !layer.cropBounds) {
|
||||
layer.cropBounds = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: layer.originalWidth,
|
||||
height: layer.originalHeight
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
// Update button appearance
|
||||
if (newCropMode) {
|
||||
cropBtn.classList.add('primary');
|
||||
cropBtn.title = "Exit crop mode for selected layer(s)";
|
||||
} else {
|
||||
cropBtn.classList.remove('primary');
|
||||
cropBtn.title = "Toggle crop mode for selected layer(s)";
|
||||
selectedLayers.forEach((layer: Layer) => {
|
||||
layer.cropMode = isCropMode;
|
||||
if (isCropMode && !layer.cropBounds) {
|
||||
layer.cropBounds = { x: 0, y: 0, width: layer.originalWidth, height: layer.originalHeight };
|
||||
}
|
||||
});
|
||||
|
||||
canvas.saveState();
|
||||
canvas.render();
|
||||
}
|
||||
|
||||
canvas.saveState();
|
||||
canvas.render();
|
||||
}
|
||||
}),
|
||||
}),
|
||||
$el("span.switch-track"),
|
||||
$el("span.switch-labels", { style: { fontSize: "11px" } }, [
|
||||
$el("span.text-clipspace", {}, ["Crop"]),
|
||||
$el("span.text-system", {}, ["Transform"])
|
||||
]),
|
||||
$el("span.switch-knob", {}, [
|
||||
$el("span.switch-icon", { id: `crop-transform-icon-${node.id}`})
|
||||
])
|
||||
]),
|
||||
$el("button.painter-button.requires-selection", {
|
||||
textContent: "Rotate +90°",
|
||||
title: "Rotate selected layer(s) by +90 degrees",
|
||||
@@ -713,18 +704,53 @@ $el("label.clipboard-switch.mask-switch", {
|
||||
const updateButtonStates = () => {
|
||||
const selectionCount = canvas.canvasSelection.selectedLayers.length;
|
||||
const hasSelection = selectionCount > 0;
|
||||
controlPanel.querySelectorAll('.requires-selection').forEach((btn: any) => {
|
||||
const button = btn as HTMLButtonElement;
|
||||
if (button.textContent === 'Fuse') {
|
||||
button.disabled = selectionCount < 2;
|
||||
} else {
|
||||
button.disabled = !hasSelection;
|
||||
|
||||
// --- Handle Standard Buttons ---
|
||||
controlPanel.querySelectorAll('.requires-selection').forEach((el: any) => {
|
||||
if (el.tagName === 'BUTTON') {
|
||||
if (el.textContent === 'Fuse') {
|
||||
el.disabled = selectionCount < 2;
|
||||
} else {
|
||||
el.disabled = !hasSelection;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const mattingBtn = controlPanel.querySelector('.matting-button') as HTMLButtonElement;
|
||||
if (mattingBtn && !mattingBtn.classList.contains('loading')) {
|
||||
mattingBtn.disabled = selectionCount !== 1;
|
||||
}
|
||||
|
||||
// --- Handle Crop/Transform Switch ---
|
||||
const switchEl = controlPanel.querySelector(`#crop-transform-switch-${node.id}`) as HTMLLabelElement;
|
||||
if (switchEl) {
|
||||
const input = switchEl.querySelector('input') as HTMLInputElement;
|
||||
const knobIcon = switchEl.querySelector('.switch-icon') as HTMLElement;
|
||||
|
||||
const isDisabled = !hasSelection;
|
||||
switchEl.classList.toggle('disabled', isDisabled);
|
||||
input.disabled = isDisabled;
|
||||
|
||||
if (!isDisabled) {
|
||||
const isCropMode = canvas.canvasSelection.selectedLayers[0].cropMode || false;
|
||||
if (input.checked !== isCropMode) {
|
||||
input.checked = isCropMode;
|
||||
}
|
||||
|
||||
// Update icon view
|
||||
const iconTool = isCropMode ? LAYERFORGE_TOOLS.CROP : LAYERFORGE_TOOLS.TRANSFORM;
|
||||
const icon = iconLoader.getIcon(iconTool);
|
||||
if (icon instanceof HTMLImageElement) {
|
||||
knobIcon.innerHTML = '';
|
||||
const clonedIcon = icon.cloneNode() as HTMLImageElement;
|
||||
clonedIcon.style.width = '20px';
|
||||
clonedIcon.style.height = '20px';
|
||||
knobIcon.appendChild(clonedIcon);
|
||||
} else {
|
||||
knobIcon.textContent = isCropMode ? "✂️" : "✥";
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
canvas.canvasSelection.onSelectionChange = updateButtonStates;
|
||||
|
||||
@@ -332,6 +332,20 @@
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* Disabled state for switch */
|
||||
.clipboard-switch.disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.6;
|
||||
background: #3a3a3a !important; /* Override gradient */
|
||||
border-color: #4a4a4a !important;
|
||||
transform: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.clipboard-switch.disabled .switch-knob {
|
||||
background-color: #4a4a4a !important;
|
||||
}
|
||||
|
||||
|
||||
.painter-separator {
|
||||
width: 1px;
|
||||
|
||||
@@ -13,7 +13,7 @@ export const LAYERFORGE_TOOLS = {
|
||||
DELETE: 'delete',
|
||||
DUPLICATE: 'duplicate',
|
||||
BLEND_MODE: 'blend_mode',
|
||||
OPACITY: 'opacity',
|
||||
OPACITY: 'opacity',
|
||||
MASK: 'mask',
|
||||
BRUSH: 'brush',
|
||||
ERASER: 'eraser',
|
||||
@@ -21,16 +21,21 @@ export const LAYERFORGE_TOOLS = {
|
||||
SETTINGS: 'settings',
|
||||
SYSTEM_CLIPBOARD: 'system_clipboard',
|
||||
CLIPSPACE: 'clipspace',
|
||||
CROP: 'crop',
|
||||
TRANSFORM: 'transform',
|
||||
} as const;
|
||||
|
||||
// SVG Icons for LayerForge tools
|
||||
const SYSTEM_CLIPBOARD_ICON_SVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#ffffff"><path d="M19 2h-4.18C14.4.84 13.3 0 12 0S9.6.84 9.18 2H5c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm5 15H7v-2h10v2zm0-4H7v-2h10v2zm0-4H7V7h10v2z"/></svg>`;
|
||||
const CLIPSPACE_ICON_SVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <defs> <mask id="cutout"> <rect width="100%" height="100%" fill="white"/> <path d="M5.485 23.76c-.568 0-1.026-.207-1.325-.598-.307-.402-.387-.964-.22-1.54l.672-2.315a.605.605 0 00-.1-.536.622.622 0 00-.494-.243H2.085c-.568 0-1.026-.207-1.325-.598-.307-.403-.387-.964-.22-1.54l2.31-7.917.255-.87c.343-1.18 1.592-2.14 2.786-2.14h2.313c.276 0 .519-.18.595-.442l.764-2.633C9.906 1.208 11.155.249 12.35.249l4.945-.008h3.62c.568 0 1.027.206 1.325.597.307.402.387.964.22 1.54l-1.035 3.566c-.343 1.178-1.593 2.137-2.787 2.137l-4.956.01H11.37a.618.618 0 00-.594.441l-1.928 6.604a.605.605 0 00.1.537c.118.153.3.243.495.243l3.275-.006h3.61c.568 0 1.026.206 1.325.598.307.402.387.964.22 1.54l-1.036 3.565c-.342 1.179-1.592 2.138-2.786 2.138l-4.957.01h-3.61z" fill="black" transform="translate(4.8 4.8) scale(0.6)" /> </mask> </defs> <path d="M19 2h-4.18C14.4.84 13.3 0 12 0S9.6.84 9.18 2H5c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1z" fill="#ffffff" mask="url(#cutout)" /></svg>`;
|
||||
|
||||
const CROP_ICON_SVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#ffffff"><path d="M7,17V17.25V19H5V17.25V7H7V17M17,7H9V5H17V7M17,17H7V19H17V17Z"/></svg>`;
|
||||
const TRANSFORM_ICON_SVG = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#ffffff"><path d="M22,20H18V22H16V16H22V18H20V20M22,8H16V14H18V10H22V8M8,16H2V18H4V20H8V16M8,2H2V4H6V8H8V2Z" /></svg>`;
|
||||
|
||||
const LAYERFORGE_TOOL_ICONS = {
|
||||
[LAYERFORGE_TOOLS.SYSTEM_CLIPBOARD]: `data:image/svg+xml;charset=utf-8,${encodeURIComponent(SYSTEM_CLIPBOARD_ICON_SVG)}`,
|
||||
[LAYERFORGE_TOOLS.CLIPSPACE]: `data:image/svg+xml;charset=utf-8,${encodeURIComponent(CLIPSPACE_ICON_SVG)}`,
|
||||
[LAYERFORGE_TOOLS.CROP]: `data:image/svg+xml;charset=utf-8,${encodeURIComponent(CROP_ICON_SVG)}`,
|
||||
[LAYERFORGE_TOOLS.TRANSFORM]: `data:image/svg+xml;charset=utf-8,${encodeURIComponent(TRANSFORM_ICON_SVG)}`,
|
||||
[LAYERFORGE_TOOLS.VISIBILITY]: `data:image/svg+xml;charset=utf-8,${encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#ffffff"><path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/></svg>')}`,
|
||||
|
||||
[LAYERFORGE_TOOLS.MOVE]: `data:image/svg+xml;charset=utf-8,${encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#ffffff"><path d="M13,20H11V8L5.5,13.5L4.08,12.08L12,4.16L19.92,12.08L18.5,13.5L13,8V20Z"/></svg>')}`,
|
||||
@@ -72,7 +77,9 @@ const LAYERFORGE_TOOL_COLORS = {
|
||||
[LAYERFORGE_TOOLS.BRUSH]: '#4285F4',
|
||||
[LAYERFORGE_TOOLS.ERASER]: '#FBBC05',
|
||||
[LAYERFORGE_TOOLS.SHAPE]: '#FF6D01',
|
||||
[LAYERFORGE_TOOLS.SETTINGS]: '#F06292'
|
||||
[LAYERFORGE_TOOLS.SETTINGS]: '#F06292',
|
||||
[LAYERFORGE_TOOLS.CROP]: '#EA4335',
|
||||
[LAYERFORGE_TOOLS.TRANSFORM]: '#34A853',
|
||||
};
|
||||
|
||||
export interface IconCache {
|
||||
|
||||
Reference in New Issue
Block a user