Fix undo (weird double and zero state)

Fixes #34

public/sprites/SpriteSheet.js

@@ -12,7 +12,6 @@ export default class SpriteSheet extends Hooks {
   previewCtx = [];
   history = [];
   ctx = null;
-  _undoPtr = 0;
   _current = 0;
   length = 0;
   clipboard = null;
@@ -106,20 +105,13 @@ export default class SpriteSheet extends Hooks {
   }
 
   set(data, offset = this._current * pixelLength) {
-    // FIXME support partial paste
+    // note: does not support partial paste
     this.snapshot();
     this.data.set(data, offset);
     this.rebuild(this._current);
     this.paint();
   }
 
-  snapshot() {
-    this.history.splice(this._undoPtr + 1);
-    this.history.push(new Uint8Array(this.data));
-    this._undoPtr = this.history.length - 1;
-    this.trigger();
-  }
-
   async rotate() {
     this.snapshot();
     await this.sprite.rotate();
@@ -134,28 +126,35 @@ export default class SpriteSheet extends Hooks {
     this.paint();
   }
 
+  snapshot() {
+    // this.history.splice(this._undoPtr + 1);
+    // this._undoPtr = this.history.length - 1;
+    this.history.push(new Uint8Array(this.data));
+    this.trigger();
+  }
+
   undo() {
-    const data = this.history[this._undoPtr];
+    const data = this.history.pop();
 
     if (!data) {
       console.log('undo: no data');
 
       return;
     }
-    this._undoPtr--;
+    // this._undoPtr--;
+    // if (this._undoPtr < 0) this._undoPtr = -1;
 
     this.data = data;
     const subSprite = this.sprite.subSprite;
-    const toggle = this.sprite.scale === 8;
 
     for (let i = 0; i < this.length; i++) {
       this.rebuild(i);
     }
-    if (toggle) this.sprite.toggleScale();
 
+    this.sprite.subSprite = subSprite;
     this.trigger();
+    this.paint(this._current, true);
     this.sprite.subSprite = subSprite;
-    this.paint();
   }
 
   rebuild(i) {

public/sprites/Tool.js

@@ -2,6 +2,10 @@ import { $ } from '../lib/$.js';
 import { getCoords } from './sprite-tools.js';
 import palette from './Palette.js';
 
+/**
+ * @typedef { import("./SpriteSheet").default } SpriteSheet
+ */
+
 export default class Tool {
   types = ['brush', 'fill', 'erase', 'pan'];
   _selected = 'brush';
@@ -127,13 +131,18 @@ export default class Tool {
     return sprites.pset(coords, target);
   }
 
-  start(event) {
+  start(event, sprites) {
     const coords = getCoords(event, 64); // FIXME
     this._coords = coords;
+    sprites.snapshot();
   }
 
   end() {}
 
+  /**
+   * @param {Event} event
+   * @param {SpriteSheet} sprites
+   */
   apply(event, sprites) {
     const coords = getCoords(
       event,
@@ -163,7 +172,7 @@ export default class Tool {
       if (event.type === 'click' && this._coords.index !== coords.index) {
         // this is a release
         // read from the canvas and put into pixels
-        sprites.snapshot();
+        // sprites.snapshot();
         sprites.canvasToPixels();
         sprites.rebuild(sprites.current);
         sprites.paint();
@@ -186,8 +195,6 @@ export default class Tool {
       this.paint(sprites, coords, target);
     }
 
-    // update canvas
-    if (event.type === 'click') sprites.snapshot();
     sprites.paint();
   }
 }

public/sprites/index.js

@@ -89,7 +89,11 @@ function generateNewSpriteSheet({
   if (!data) {
     const restored = restoreState();
 
-    if (!check && restored.lastSaved > Date.now() - ONE_WEEK) {
+    if (
+      !check &&
+      restored.lastSaved > Date.now() - ONE_WEEK &&
+      restored.spriteSheet
+    ) {
       spriteData = Uint8Array.from(restored.spriteSheet.data);
       sprites = newSpriteSheet(spriteData);
 
@@ -432,8 +436,8 @@ const drawHandler = (e) => {
 
 trackDown(container, {
   handler: drawHandler,
-  start() {
-    tool.start(event);
+  start(event) {
+    tool.start(event, sprites);
   },
   end() {
     tool.end();