mirror of
https://github.com/Azornes/Comfyui-LayerForge.git
synced 2026-03-22 21:12:12 -03:00
d84b9385ad
Moved all inline styles from CanvasLayersPanel.ts to layers_panel.css Updated TypeScript to load external CSS and removed injectStyles() Replaced inline styles with CSS classes in UI methods Ensured all panel features and interactions work as before Improved code maintainability and consistency with project structure
461 lines
19 KiB
JavaScript
461 lines
19 KiB
JavaScript
import { createModuleLogger } from "./utils/LoggerUtils.js";
|
|
import { iconLoader, LAYERFORGE_TOOLS } from "./utils/IconLoader.js";
|
|
import { createCanvas } from "./utils/CommonUtils.js";
|
|
import { addStylesheet, getUrl } from "./utils/ResourceManager.js";
|
|
const log = createModuleLogger('CanvasLayersPanel');
|
|
export class CanvasLayersPanel {
|
|
constructor(canvas) {
|
|
this.canvas = canvas;
|
|
this.container = null;
|
|
this.layersContainer = null;
|
|
this.draggedElements = [];
|
|
this.dragInsertionLine = null;
|
|
this.isMultiSelecting = false;
|
|
this.lastSelectedIndex = -1;
|
|
this.handleLayerClick = this.handleLayerClick.bind(this);
|
|
this.handleDragStart = this.handleDragStart.bind(this);
|
|
this.handleDragOver = this.handleDragOver.bind(this);
|
|
this.handleDragEnd = this.handleDragEnd.bind(this);
|
|
this.handleDrop = this.handleDrop.bind(this);
|
|
// Preload icons
|
|
this.initializeIcons();
|
|
// Load CSS for layers panel
|
|
addStylesheet(getUrl('./css/layers_panel.css'));
|
|
log.info('CanvasLayersPanel initialized');
|
|
}
|
|
async initializeIcons() {
|
|
try {
|
|
await iconLoader.preloadToolIcons();
|
|
log.debug('Icons preloaded successfully');
|
|
}
|
|
catch (error) {
|
|
log.warn('Failed to preload icons, using fallbacks:', error);
|
|
}
|
|
}
|
|
createIconElement(toolName, size = 16) {
|
|
const iconContainer = document.createElement('div');
|
|
iconContainer.className = 'icon-container';
|
|
iconContainer.style.width = `${size}px`;
|
|
iconContainer.style.height = `${size}px`;
|
|
const icon = iconLoader.getIcon(toolName);
|
|
if (icon) {
|
|
if (icon instanceof HTMLImageElement) {
|
|
const img = icon.cloneNode();
|
|
img.style.width = `${size}px`;
|
|
img.style.height = `${size}px`;
|
|
iconContainer.appendChild(img);
|
|
}
|
|
else if (icon instanceof HTMLCanvasElement) {
|
|
const { canvas, ctx } = createCanvas(size, size);
|
|
if (ctx) {
|
|
ctx.drawImage(icon, 0, 0, size, size);
|
|
}
|
|
iconContainer.appendChild(canvas);
|
|
}
|
|
}
|
|
else {
|
|
// Fallback text
|
|
iconContainer.classList.add('fallback-text');
|
|
iconContainer.textContent = toolName.charAt(0).toUpperCase();
|
|
iconContainer.style.fontSize = `${size * 0.6}px`;
|
|
}
|
|
return iconContainer;
|
|
}
|
|
createVisibilityIcon(isVisible) {
|
|
if (isVisible) {
|
|
return this.createIconElement(LAYERFORGE_TOOLS.VISIBILITY, 16);
|
|
}
|
|
else {
|
|
// Create a "hidden" version of the visibility icon
|
|
const iconContainer = document.createElement('div');
|
|
iconContainer.className = 'icon-container visibility-hidden';
|
|
iconContainer.style.width = '16px';
|
|
iconContainer.style.height = '16px';
|
|
const icon = iconLoader.getIcon(LAYERFORGE_TOOLS.VISIBILITY);
|
|
if (icon) {
|
|
if (icon instanceof HTMLImageElement) {
|
|
const img = icon.cloneNode();
|
|
img.style.width = '16px';
|
|
img.style.height = '16px';
|
|
iconContainer.appendChild(img);
|
|
}
|
|
else if (icon instanceof HTMLCanvasElement) {
|
|
const { canvas, ctx } = createCanvas(16, 16);
|
|
if (ctx) {
|
|
ctx.globalAlpha = 0.3;
|
|
ctx.drawImage(icon, 0, 0, 16, 16);
|
|
}
|
|
iconContainer.appendChild(canvas);
|
|
}
|
|
}
|
|
else {
|
|
// Fallback
|
|
iconContainer.classList.add('fallback-text');
|
|
iconContainer.textContent = 'H';
|
|
iconContainer.style.fontSize = '10px';
|
|
}
|
|
return iconContainer;
|
|
}
|
|
}
|
|
createPanelStructure() {
|
|
this.container = document.createElement('div');
|
|
this.container.className = 'layers-panel';
|
|
this.container.tabIndex = 0; // Umożliwia fokus na panelu
|
|
this.container.innerHTML = `
|
|
<div class="layers-panel-header">
|
|
<span class="layers-panel-title">Layers</span>
|
|
<div class="layers-panel-controls">
|
|
<button class="layers-btn" id="delete-layer-btn" title="Delete layer"></button>
|
|
</div>
|
|
</div>
|
|
<div class="layers-container" id="layers-container">
|
|
<!-- Lista warstw będzie renderowana tutaj -->
|
|
</div>
|
|
`;
|
|
this.layersContainer = this.container.querySelector('#layers-container');
|
|
// Setup event listeners dla przycisków
|
|
this.setupControlButtons();
|
|
// Dodaj listener dla klawiatury, aby usuwanie działało z panelu
|
|
this.container.addEventListener('keydown', (e) => {
|
|
if (e.key === 'Delete' || e.key === 'Backspace') {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
this.deleteSelectedLayers();
|
|
}
|
|
});
|
|
log.debug('Panel structure created');
|
|
return this.container;
|
|
}
|
|
setupControlButtons() {
|
|
if (!this.container)
|
|
return;
|
|
const deleteBtn = this.container.querySelector('#delete-layer-btn');
|
|
// Add delete icon to button
|
|
if (deleteBtn) {
|
|
const deleteIcon = this.createIconElement(LAYERFORGE_TOOLS.DELETE, 16);
|
|
deleteBtn.appendChild(deleteIcon);
|
|
}
|
|
deleteBtn?.addEventListener('click', () => {
|
|
log.info('Delete layer button clicked');
|
|
this.deleteSelectedLayers();
|
|
});
|
|
}
|
|
renderLayers() {
|
|
if (!this.layersContainer) {
|
|
log.warn('Layers container not initialized');
|
|
return;
|
|
}
|
|
// Wyczyść istniejącą zawartość
|
|
this.layersContainer.innerHTML = '';
|
|
// Usuń linię wstawiania jeśli istnieje
|
|
this.removeDragInsertionLine();
|
|
// Sortuj warstwy według zIndex (od najwyższej do najniższej)
|
|
const sortedLayers = [...this.canvas.layers].sort((a, b) => b.zIndex - a.zIndex);
|
|
sortedLayers.forEach((layer, index) => {
|
|
const layerElement = this.createLayerElement(layer, index);
|
|
if (this.layersContainer)
|
|
this.layersContainer.appendChild(layerElement);
|
|
});
|
|
log.debug(`Rendered ${sortedLayers.length} layers`);
|
|
}
|
|
createLayerElement(layer, index) {
|
|
const layerRow = document.createElement('div');
|
|
layerRow.className = 'layer-row';
|
|
layerRow.draggable = true;
|
|
layerRow.dataset.layerIndex = String(index);
|
|
const isSelected = this.canvas.canvasSelection.selectedLayers.includes(layer);
|
|
if (isSelected) {
|
|
layerRow.classList.add('selected');
|
|
}
|
|
// Ustawienie domyślnych właściwości jeśli nie istnieją
|
|
if (!layer.name) {
|
|
layer.name = this.ensureUniqueName(`Layer ${layer.zIndex + 1}`, layer);
|
|
}
|
|
else {
|
|
// Sprawdź unikalność istniejącej nazwy (np. przy duplikowaniu)
|
|
layer.name = this.ensureUniqueName(layer.name, layer);
|
|
}
|
|
layerRow.innerHTML = `
|
|
<div class="layer-visibility-toggle" data-layer-index="${index}" title="Toggle layer visibility"></div>
|
|
<div class="layer-thumbnail" data-layer-index="${index}"></div>
|
|
<span class="layer-name" data-layer-index="${index}">${layer.name}</span>
|
|
`;
|
|
// Add visibility icon
|
|
const visibilityToggle = layerRow.querySelector('.layer-visibility-toggle');
|
|
if (visibilityToggle) {
|
|
const visibilityIcon = this.createVisibilityIcon(layer.visible);
|
|
visibilityToggle.appendChild(visibilityIcon);
|
|
}
|
|
const thumbnailContainer = layerRow.querySelector('.layer-thumbnail');
|
|
if (thumbnailContainer) {
|
|
this.generateThumbnail(layer, thumbnailContainer);
|
|
}
|
|
this.setupLayerEventListeners(layerRow, layer, index);
|
|
return layerRow;
|
|
}
|
|
generateThumbnail(layer, thumbnailContainer) {
|
|
if (!layer.image) {
|
|
thumbnailContainer.style.background = '#4a4a4a';
|
|
return;
|
|
}
|
|
const { canvas, ctx } = createCanvas(48, 48, '2d', { willReadFrequently: true });
|
|
if (!ctx)
|
|
return;
|
|
const scale = Math.min(48 / layer.image.width, 48 / layer.image.height);
|
|
const scaledWidth = layer.image.width * scale;
|
|
const scaledHeight = layer.image.height * scale;
|
|
// Wycentruj obraz
|
|
const x = (48 - scaledWidth) / 2;
|
|
const y = (48 - scaledHeight) / 2;
|
|
ctx.imageSmoothingEnabled = true;
|
|
ctx.imageSmoothingQuality = 'high';
|
|
ctx.drawImage(layer.image, x, y, scaledWidth, scaledHeight);
|
|
thumbnailContainer.appendChild(canvas);
|
|
}
|
|
setupLayerEventListeners(layerRow, layer, index) {
|
|
layerRow.addEventListener('mousedown', (e) => {
|
|
const nameElement = layerRow.querySelector('.layer-name');
|
|
if (nameElement && nameElement.classList.contains('editing')) {
|
|
return;
|
|
}
|
|
this.handleLayerClick(e, layer, index);
|
|
});
|
|
// --- PRAWY PRZYCISK: ODJAZNACZ LAYER ---
|
|
layerRow.addEventListener('contextmenu', (e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
if (this.canvas.canvasSelection.selectedLayers.includes(layer)) {
|
|
const newSelection = this.canvas.canvasSelection.selectedLayers.filter((l) => l !== layer);
|
|
this.canvas.updateSelection(newSelection);
|
|
this.updateSelectionAppearance();
|
|
}
|
|
});
|
|
layerRow.addEventListener('dblclick', (e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
const nameElement = layerRow.querySelector('.layer-name');
|
|
if (nameElement) {
|
|
this.startEditingLayerName(nameElement, layer);
|
|
}
|
|
});
|
|
// Add visibility toggle event listener
|
|
const visibilityToggle = layerRow.querySelector('.layer-visibility-toggle');
|
|
if (visibilityToggle) {
|
|
visibilityToggle.addEventListener('click', (e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
this.toggleLayerVisibility(layer);
|
|
});
|
|
}
|
|
layerRow.addEventListener('dragstart', (e) => this.handleDragStart(e, layer, index));
|
|
layerRow.addEventListener('dragover', this.handleDragOver.bind(this));
|
|
layerRow.addEventListener('dragend', this.handleDragEnd.bind(this));
|
|
layerRow.addEventListener('drop', (e) => this.handleDrop(e, index));
|
|
}
|
|
handleLayerClick(e, layer, index) {
|
|
const isCtrlPressed = e.ctrlKey || e.metaKey;
|
|
const isShiftPressed = e.shiftKey;
|
|
// Aktualizuj wewnętrzny stan zaznaczenia w obiekcie canvas
|
|
// Ta funkcja NIE powinna już wywoływać onSelectionChanged w panelu.
|
|
this.canvas.updateSelectionLogic(layer, isCtrlPressed, isShiftPressed, index);
|
|
// Aktualizuj tylko wygląd (klasy CSS), bez niszczenia DOM
|
|
this.updateSelectionAppearance();
|
|
log.debug(`Layer clicked: ${layer.name}, selection count: ${this.canvas.canvasSelection.selectedLayers.length}`);
|
|
}
|
|
startEditingLayerName(nameElement, layer) {
|
|
const currentName = layer.name;
|
|
nameElement.classList.add('editing');
|
|
const input = document.createElement('input');
|
|
input.type = 'text';
|
|
input.value = currentName;
|
|
input.style.width = '100%';
|
|
nameElement.innerHTML = '';
|
|
nameElement.appendChild(input);
|
|
input.focus();
|
|
input.select();
|
|
const finishEditing = () => {
|
|
let newName = input.value.trim() || `Layer ${layer.zIndex + 1}`;
|
|
newName = this.ensureUniqueName(newName, layer);
|
|
layer.name = newName;
|
|
nameElement.classList.remove('editing');
|
|
nameElement.textContent = newName;
|
|
this.canvas.saveState();
|
|
log.info(`Layer renamed to: ${newName}`);
|
|
};
|
|
input.addEventListener('blur', finishEditing);
|
|
input.addEventListener('keydown', (e) => {
|
|
if (e.key === 'Enter') {
|
|
finishEditing();
|
|
}
|
|
else if (e.key === 'Escape') {
|
|
nameElement.classList.remove('editing');
|
|
nameElement.textContent = currentName;
|
|
}
|
|
});
|
|
}
|
|
ensureUniqueName(proposedName, currentLayer) {
|
|
const existingNames = this.canvas.layers
|
|
.filter((layer) => layer !== currentLayer)
|
|
.map((layer) => layer.name);
|
|
if (!existingNames.includes(proposedName)) {
|
|
return proposedName;
|
|
}
|
|
// Sprawdź czy nazwa już ma numerację w nawiasach
|
|
const match = proposedName.match(/^(.+?)\s*\((\d+)\)$/);
|
|
let baseName, startNumber;
|
|
if (match) {
|
|
baseName = match[1].trim();
|
|
startNumber = parseInt(match[2]) + 1;
|
|
}
|
|
else {
|
|
baseName = proposedName;
|
|
startNumber = 1;
|
|
}
|
|
// Znajdź pierwszą dostępną numerację
|
|
let counter = startNumber;
|
|
let uniqueName;
|
|
do {
|
|
uniqueName = `${baseName} (${counter})`;
|
|
counter++;
|
|
} while (existingNames.includes(uniqueName));
|
|
return uniqueName;
|
|
}
|
|
toggleLayerVisibility(layer) {
|
|
layer.visible = !layer.visible;
|
|
// If layer became invisible and is selected, deselect it
|
|
if (!layer.visible && this.canvas.canvasSelection.selectedLayers.includes(layer)) {
|
|
const newSelection = this.canvas.canvasSelection.selectedLayers.filter((l) => l !== layer);
|
|
this.canvas.updateSelection(newSelection);
|
|
}
|
|
this.canvas.render();
|
|
this.canvas.requestSaveState();
|
|
// Update the eye icon in the panel
|
|
this.renderLayers();
|
|
log.info(`Layer "${layer.name}" visibility toggled to: ${layer.visible}`);
|
|
}
|
|
deleteSelectedLayers() {
|
|
if (this.canvas.canvasSelection.selectedLayers.length === 0) {
|
|
log.debug('No layers selected for deletion');
|
|
return;
|
|
}
|
|
log.info(`Deleting ${this.canvas.canvasSelection.selectedLayers.length} selected layers`);
|
|
this.canvas.removeSelectedLayers();
|
|
this.renderLayers();
|
|
}
|
|
handleDragStart(e, layer, index) {
|
|
if (!this.layersContainer || !e.dataTransfer)
|
|
return;
|
|
const editingElement = this.layersContainer.querySelector('.layer-name.editing');
|
|
if (editingElement) {
|
|
e.preventDefault();
|
|
return;
|
|
}
|
|
// Jeśli przeciągana warstwa nie jest zaznaczona, zaznacz ją
|
|
if (!this.canvas.canvasSelection.selectedLayers.includes(layer)) {
|
|
this.canvas.updateSelection([layer]);
|
|
this.renderLayers();
|
|
}
|
|
this.draggedElements = [...this.canvas.canvasSelection.selectedLayers];
|
|
e.dataTransfer.effectAllowed = 'move';
|
|
e.dataTransfer.setData('text/plain', '');
|
|
this.layersContainer.querySelectorAll('.layer-row').forEach((row, idx) => {
|
|
const sortedLayers = [...this.canvas.layers].sort((a, b) => b.zIndex - a.zIndex);
|
|
if (this.draggedElements.includes(sortedLayers[idx])) {
|
|
row.classList.add('dragging');
|
|
}
|
|
});
|
|
log.debug(`Started dragging ${this.draggedElements.length} layers`);
|
|
}
|
|
handleDragOver(e) {
|
|
e.preventDefault();
|
|
if (e.dataTransfer)
|
|
e.dataTransfer.dropEffect = 'move';
|
|
const layerRow = e.currentTarget;
|
|
const rect = layerRow.getBoundingClientRect();
|
|
const midpoint = rect.top + rect.height / 2;
|
|
const isUpperHalf = e.clientY < midpoint;
|
|
this.showDragInsertionLine(layerRow, isUpperHalf);
|
|
}
|
|
showDragInsertionLine(targetRow, isUpperHalf) {
|
|
this.removeDragInsertionLine();
|
|
const line = document.createElement('div');
|
|
line.className = 'drag-insertion-line';
|
|
if (isUpperHalf) {
|
|
line.style.top = '-1px';
|
|
}
|
|
else {
|
|
line.style.bottom = '-1px';
|
|
}
|
|
targetRow.style.position = 'relative';
|
|
targetRow.appendChild(line);
|
|
this.dragInsertionLine = line;
|
|
}
|
|
removeDragInsertionLine() {
|
|
if (this.dragInsertionLine) {
|
|
this.dragInsertionLine.remove();
|
|
this.dragInsertionLine = null;
|
|
}
|
|
}
|
|
handleDrop(e, targetIndex) {
|
|
e.preventDefault();
|
|
this.removeDragInsertionLine();
|
|
if (this.draggedElements.length === 0 || !(e.currentTarget instanceof HTMLElement))
|
|
return;
|
|
const rect = e.currentTarget.getBoundingClientRect();
|
|
const midpoint = rect.top + rect.height / 2;
|
|
const isUpperHalf = e.clientY < midpoint;
|
|
// Oblicz docelowy indeks
|
|
let insertIndex = targetIndex;
|
|
if (!isUpperHalf) {
|
|
insertIndex = targetIndex + 1;
|
|
}
|
|
// Użyj nowej, centralnej funkcji do przesuwania warstw
|
|
this.canvas.canvasLayers.moveLayers(this.draggedElements, { toIndex: insertIndex });
|
|
log.info(`Dropped ${this.draggedElements.length} layers at position ${insertIndex}`);
|
|
}
|
|
handleDragEnd(e) {
|
|
this.removeDragInsertionLine();
|
|
if (!this.layersContainer)
|
|
return;
|
|
this.layersContainer.querySelectorAll('.layer-row').forEach((row) => {
|
|
row.classList.remove('dragging');
|
|
});
|
|
this.draggedElements = [];
|
|
}
|
|
onLayersChanged() {
|
|
this.renderLayers();
|
|
}
|
|
updateSelectionAppearance() {
|
|
if (!this.layersContainer)
|
|
return;
|
|
const sortedLayers = [...this.canvas.layers].sort((a, b) => b.zIndex - a.zIndex);
|
|
const layerRows = this.layersContainer.querySelectorAll('.layer-row');
|
|
layerRows.forEach((row, index) => {
|
|
const layer = sortedLayers[index];
|
|
if (this.canvas.canvasSelection.selectedLayers.includes(layer)) {
|
|
row.classList.add('selected');
|
|
}
|
|
else {
|
|
row.classList.remove('selected');
|
|
}
|
|
});
|
|
}
|
|
/**
|
|
* Aktualizuje panel gdy zmieni się zaznaczenie (wywoływane z zewnątrz).
|
|
* Zamiast pełnego renderowania, tylko aktualizujemy wygląd.
|
|
*/
|
|
onSelectionChanged() {
|
|
this.updateSelectionAppearance();
|
|
}
|
|
destroy() {
|
|
if (this.container && this.container.parentNode) {
|
|
this.container.parentNode.removeChild(this.container);
|
|
}
|
|
this.container = null;
|
|
this.layersContainer = null;
|
|
this.draggedElements = [];
|
|
this.removeDragInsertionLine();
|
|
log.info('CanvasLayersPanel destroyed');
|
|
}
|
|
}
|