AquaMotion — Editor (patched)

by Sharxxy

HTML

<!-- gif.js worker + lib -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gif.js/0.2.0/gif.worker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gif.js/0.2.0/gif.js"></script>

<div class="app">
  <div id="toolbar" class="panel">
    <button class="toolBtn" data-tool="pointer" title="Pointer (V)">🖱️</button>
    <button class="toolBtn active" data-tool="pencil" title="Pencil (B)">✏️</button>
    <button class="toolBtn" data-tool="eraser" title="Eraser (E)">🩹</button>
    <button class="toolBtn" data-tool="line" title="Line (L)">➖</button>
    <button class="toolBtn" data-tool="rect" title="Rectangle (R)">⬛</button>
    <button class="toolBtn" data-tool="circle" title="Circle (C)">⭕</button>

    <input type="color" id="colorPicker" value="#000000" title="Color">
    <input type="range" id="brushSize" min="1" max="120" value="4" title="Brush size">

    <label style="font-size:11px;">Brush</label>
    <select id="brushType" title="Brush type" style="width:64px;padding:6px;border-radius:6px;background:transparent;color:#fff;border:1px solid rgba(255,255,255,0.06)">
      <option value="hard">Hard</option>
      <option value="ink">Ink</option>
      <option value="air">Airbrush</option>
      <option value="charcoal">Charcoal</option>
      <option value="pattern">Pattern</option>
      <option value="shadow">EFX: Shadow</option>
      <option value="glow">EFX: Glow</option>
      <option value="blur">EFX: Blur</option>
    </select>

    <label style="font-size:11px;">Onion</label>
    <input type="checkbox" id="onionToggle" checked>
    <label style="font-size:11px;">Prev / Next</label>

    <label style="font-size:11px;">Grid</label>
    <input type="checkbox" id="gridToggle">
    <input type="range" id="gridSize" min="4" max="80" value="20" style="width:64px">

    <div style="height:6px"></div>
    <button class="toolBtn" id="undo" title="Undo (Ctrl+Z)">↩️</button>
    <button class="toolBtn"...

CSS

:root{--accent:#4fc3f7;--bg:#0b1e3d}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter,system-ui,Segoe UI,Roboto,'Helvetica Neue';background:var(--bg);color:#eaf6ff}
.app{display:flex;height:100vh;gap:12px;padding:12px}
.panel{background:linear-gradient(180deg,#09263a,#061726);padding:10px;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.6)}
#toolbar{width:88px;background:linear-gradient(180deg,#19375a,#12304e);border-right:2px solid var(--accent);display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px 8px;border-radius:10px}
.toolBtn{width:64px;height:44px;background:rgba(255,255,255,0.04);border-radius:8px;border:none;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:18px}
.toolBtn.active{background:var(--accent);color:#042033;font-weight:600}
#toolbar input[type=color],#toolbar input[type=range]{width:64px;background:transparent;border-radius:6px;border:none}
#toolbar label{font-size:11px;color:rgba(255,255,255,0.85);text-align:center}
.center{flex:1;display:flex;flex-direction:column;min-width:0}
#topBar{height:48px;display:flex;align-items:center;padding:6px 10px;border-bottom:2px solid rgba(127, 199, 240, .06)}
.inlineInput{padding:6px;border-radius:6px;border:none;background:rgba(255,255,255,0.03);color:#fff;width:80px}
#workspace{flex:1;display:flex;min-height:0;gap:12px}
#canvasArea{flex:1;display:flex;justify-content:center;align-items:center;background:var(--panel);overflow:hidden;position:relative;border-radius:10px;padding:12px}
#canvasWrap{position:relative; touch-action:none; border-radius:8px; background:#e9eef6; padding:6px}
canvas{display:block;background:#fff;border-radius:6px; box-shadow:0 6px 18px...

JavaScript

/* Full replacement script: implements working tools, brushes, shapes, pointer, layers, frames, exports */
(() => {
  'use strict';
  const canvas = document.getElementById('mainCanvas');
  const ctx = canvas.getContext('2d', { willReadFrequently: true });
  const overlayText = document.getElementById('overlayText');
  const statusEl = document.getElementById('status');
  const dpr = Math.max(1, window.devicePixelRatio || 1);

  function setCanvasSize(w,h){
    canvas.width = Math.round(w * dpr);
    canvas.height = Math.round(h * dpr);
    canvas.style.width = w + 'px';
    canvas.style.height = h + 'px';
  }
  setCanvasSize(+document.getElementById('canvasW').value, +document.getElementById('canvasH').value);

  const state = {
    scale: 1, offsetX: 0, offsetY: 0,
    tool: 'pencil', color: document.getElementById('colorPicker').value,
    size: +document.getElementById('brushSize').value, brush: document.getElementById('brushType').value,
    onion: document.getElementById('onionToggle').checked, onionAlpha: 0.35,
    playing: false, loop: true, fps: +document.getElementById('fpsInput').value || 12,
    frames: [ { layers: [ { name:'Layer 1', visible:true, locked:false, strokes:[] } ] } ],
    currentFrame: 0, currentLayer: 0,
    undoStack: [], redoStack: [], clipboard: null,
    grid: { enabled:false, size:20, visible:true }, bucketTolerance:32,
    patternImg: null
  };

  function updateStatus(msg){ statusEl.textContent = msg || `Tool: ${state.tool} • Brush: ${state.brush} • Size: ${state.size}`; }
  updateStatus();

  function screenToWorld(cx, cy){
    const rect = canvas.getBoundingClientRect();
    let x = (cx - rect.left - state.offsetX) / state.scale;
    let y = (cy - rect.top - state.offsetY) / state.scale;
    if(state.grid.enabled){
      const g = state.grid.size;
      x = Math.round(x/g)*g; y = Math.round(y/g)*g;
    }
    return { x,y };
  }

  function deepCopyFrames(frames){ return...