odysseus/static/js/editor/wire-merge-buttons.js

/**
 * Layer merge / flatten buttons in the layer-panel footer:
 *
 *   #ge-flatten     Flatten Copy — merge every visible layer into a
 *                   new "Flattened" layer, keep originals.
 *   #ge-merge-all   Merge All — flatten every VISIBLE layer into the
 *                   lowest visible one. Hidden layers dropped. Base
 *                   = lowest visible (not bottom of stack) so a
 *                   hidden base can't absorb the visible stack into
 *                   an invisible result.
 *   #ge-merge-down  Merge active layer into the one beneath it.
 *
 * @param {{
 *   saveState:        (label?: string) => void,
 *   createLayer:      (name, w, h) => object,
 *   renderLayerPanel: () => void,
 *   composite:        () => void,
 *   renderLayer?:     (layer) => HTMLCanvasElement,
 *   uiModule:         object,
 * }} deps
 */
import { state } from './state.js';

function _renderSource(layer, renderLayer) {
  if (!layer) return null;
  try {
    return typeof renderLayer === 'function' ? (renderLayer(layer) || layer.canvas) : layer.canvas;
  } catch {
    return layer.canvas;
  }
}

function _clearBakedAdjustments(layer) {
  if (!layer) return;
  layer.adjLayers = [];
  layer._adjFinal = null;
  layer._adjFinalKey = '';
  layer._adjCache = null;
  layer._adjCacheKey = '';
}

export function mergeLayerDownAtIndex(idx, renderLayer = null) {
  if (idx < 1 || idx >= state.layers.length) return null;
  const upper = state.layers[idx];
  const lower = state.layers[idx - 1];
  const upperOff = state.layerOffsets.get(upper.id) || { x: 0, y: 0 };
  const lowerOff = state.layerOffsets.get(lower.id) || { x: 0, y: 0 };
  const lowerSource = _renderSource(lower, renderLayer);
  const upperSource = _renderSource(upper, renderLayer);
  const merged = document.createElement('canvas');
  merged.width = state.imgWidth;
  merged.height = state.imgHeight;
  const mctx = merged.getContext('2d');
  mctx.globalAlpha = lower.opacity;
  mctx.drawImage(lowerSource, lowerOff.x, lowerOff.y);
  mctx.globalAlpha = upper.opacity;
  mctx.drawImage(upperSource, upperOff.x, upperOff.y);
  mctx.globalAlpha = 1;
  lower.canvas = merged;
  lower.ctx = lower.canvas.getContext('2d');
  lower.opacity = 1;
  lower.visible = true;
  state.layerOffsets.set(lower.id, { x: 0, y: 0 });
  _clearBakedAdjustments(lower);
  state.layers.splice(idx, 1);
  state.layerOffsets.delete(upper.id);
  state.activeLayerId = lower.id;
  return lower;
}

export function wireMergeButtons({ saveState, createLayer, renderLayerPanel, composite, renderLayer, uiModule }) {
  // Flatten Copy.
  document.getElementById('ge-flatten')?.addEventListener('click', () => {
    if (state.layers.length < 2) return;
    saveState('Flatten copy');
    const merged = createLayer('Flattened', state.imgWidth, state.imgHeight);
    const ctx = merged.ctx;
    for (const l of state.layers) {
      if (!l.visible) continue;
      const off = state.layerOffsets.get(l.id) || { x: 0, y: 0 };
      ctx.globalAlpha = l.opacity;
      ctx.drawImage(_renderSource(l, renderLayer), off.x, off.y);
      ctx.globalAlpha = 1;
    }
    _clearBakedAdjustments(merged);
    state.layers.push(merged);
    state.activeLayerId = merged.id;
    renderLayerPanel();
    composite();
    uiModule.showToast('Flattened copy created');
  });

  // Merge All — drop hidden layers; base = lowest visible.
  document.getElementById('ge-merge-all')?.addEventListener('click', () => {
    const visibleLayers = state.layers.filter(l => l.visible);
    if (visibleLayers.length < 2) {
      if (uiModule) uiModule.showToast('Need at least two visible layers to merge');
      return;
    }
    saveState('Merge all');
    const base = visibleLayers[0];
    const merged = document.createElement('canvas');
    merged.width = state.imgWidth;
    merged.height = state.imgHeight;
    const baseCtx = merged.getContext('2d');
    for (let i = 0; i < visibleLayers.length; i++) {
      const l = visibleLayers[i];
      const off = state.layerOffsets.get(l.id) || { x: 0, y: 0 };
      baseCtx.globalAlpha = l.opacity;
      baseCtx.drawImage(_renderSource(l, renderLayer), off.x, off.y);
      baseCtx.globalAlpha = 1;
    }
    base.canvas = merged;
    base.ctx = base.canvas.getContext('2d');
    base.opacity = 1;
    base.visible = true;
    state.layerOffsets.set(base.id, { x: 0, y: 0 });
    _clearBakedAdjustments(base);
    // Free offset entries for the discarded layers; keep base.
    for (const l of state.layers) {
      if (l === base) continue;
      state.layerOffsets.delete(l.id);
    }
    state.layers = [base];
    state.activeLayerId = base.id;
    renderLayerPanel();
    composite();
    uiModule.showToast('Visible layers merged');
  });

  // Merge Down.
  document.getElementById('ge-merge-down')?.addEventListener('click', () => {
    const idx = state.layers.findIndex(l => l.id === state.activeLayerId);
    if (idx < 1) return; // can't merge the bottom layer
    saveState('Merge down');
    mergeLayerDownAtIndex(idx, renderLayer);
    renderLayerPanel();
    composite();
    uiModule.showToast('Layer merged down');
  });
}