Redo implemented

Author: tmanderson

src/Frame.ts

@@ -38,6 +38,11 @@ export default class Frame {
     return this.activePath.push(point);
   }
 
+  addPath(path: Array<[number, number]>) {
+    this.activePath = path;
+    this.paths.push(path);
+  }
+
   destroy() {
     this.activePath = undefined;
     this.paths = undefined;

src/Layer.ts

@@ -28,7 +28,7 @@ export default class Layer {
 
   color: string = chroma.random().hex();
   width: number = 5;
-  fill: boolean = true;
+  fill: boolean = false;
   cycles: number = 0;
 
   playing: boolean = false;
@@ -143,6 +143,16 @@ export default class Layer {
   }
 
   pointTransform(x, y) {
+    try {
+      // Apple sucks, and there's a proportional term added to the position of a
+      // pointer, to compensate for their stupid scrolling behaviors.
+      // Actually, they double suck because they claim "parity" between iPad OS
+      // Safari and Desktop Safari such that they have identical user-agents
+      // which means we have to create this stupid touch event on all platforms.
+      document.createEvent("TouchEvent");
+      y -= 60 * y / this.canvas.height
+    } catch (e) {}
+
     return [
       ((x-this.canvas.width/2) * 1/this.scale) * Math.cos(-this.rotation) -
         ((y-this.canvas.height/2) * 1/this.scale) * Math.sin(-this.rotation),
@@ -176,9 +186,10 @@ export default class Layer {
     this.frames.splice(at, 1);
   }
 
-  undo(at = this.frame) {
-    this.frames[at].paths.pop();
+  undo(frameIndex = this.frame) {
+    const path = this.frames[frameIndex].paths.pop();
     this.render();
+    return path;
   }
 
   next() {
@@ -232,22 +243,21 @@ export default class Layer {
     this._drawing = true;
     this.canvas.style.zIndex = '100';
     this.frames[this.frame].beginPath([x-this.offset[0], y-this.offset[1]]);
+    this.last_pos = [x, y];
   }
 
   handleMove = ({ clientX, clientY, pointerType }) => {
     if (pointerType === 'touch' || !this.drawing) return;
     const [x, y] = this.pointTransform(clientX, clientY);
 
-    this.last_pos = [x, y];
-    
     // As user is drawing, we immediately render the new path
     this.ctx.beginPath();
     this.ctx.moveTo(...this.last_pos);
     this.ctx.lineTo(x, y); 
     this.ctx.stroke();
 
     this.frames[this.frame].lineTo([x-this.offset[0], y-this.offset[1]]);
-
+    this.last_pos = [x, y];
     this.render();
   }
 

src/Scene.ts

@@ -202,10 +202,17 @@ export default class Scene {
   }
 
   handleKeyDown = e => {
-    if ((e.metaKey || e.ctrlKey) && e.which === 37 || e.which === 39) e.preventDefault();
+    if ((e.metaKey || e.ctrlKey) && (e.which === 89 || e.which === 37 || e.which === 39)) e.preventDefault();
+    
+    // e.preventDefault();
+    // e.stopPropagation();
+    // e.stopImmediatePropagation();
 
     switch (e.which) {
+      // cmd+z, undo
       case 90: e.metaKey && this.undo(); break;
+      // cmd+y, redo
+      case 89: e.metaKey && this.redo(); break;
       case 32: this.play(); break;
       case 39:
         e.metaKey || e.ctrlKey ? this.layers[this.active_layer].rotation += 0.1 : this.next()
@@ -229,7 +236,8 @@ export default class Scene {
       this.history_offset < this.history.length ? this.history.length - this.history_offset : 0,
       [
         this.layers[this.active_layer].id,
-        this.layers[this.active_layer].currentFrame.id
+        this.layers[this.active_layer].currentFrame.id,
+        null
       ]
     );
 
@@ -262,6 +270,8 @@ export default class Scene {
   }
 
   undo() {
+    if (this.history_offset <= 0) return;
+
     this.history_offset = Math.max(0, this.history_offset - 1);
     const [layerId, frameId] = this.history[this.history_offset];
 
@@ -272,12 +282,38 @@ export default class Scene {
     if (this.layers[layerIndex].id !== this.layers[this.active_layer].id) this.active_layer = layerIndex;
     // move all layers if frame is navigated to
     if (this.layers[layerIndex].frame !== frameIndex) this.layers.forEach(l => l.goTo(l.frame + frameDelta));
-    this.layers[layerIndex].undo(frameIndex);
+    // The layer action that was undone
+    const layerPath = this.layers[layerIndex].undo(frameIndex);
+    // add a third value to the `history` tuple, for `redo` action
+    this.history[this.history_offset][2] = layerPath;
+
     this.onlayeractivate && this.onlayeractivate(this.layers[this.active_layer]);
   }
 
   redo() {
+    if (this.history_offset === this.history.length) return;
+
+    const historyItem = this.history[this.history_offset];
+    const [layerId, frameId, path] = historyItem;
+
+    this.history_offset = Math.min(this.history.length, this.history_offset + 1);
+
+    const layerIndex = this.layers.findIndex(l => l.id === layerId);
+    const frameIndex = this.layers[layerIndex].frames.findIndex(f => f.id === frameId);
+    const frameDelta = frameIndex - this.layers[layerIndex].frame;
+    
+    if (!path) throw new Error(`${layerIndex}:${frameIndex}: No path found for redo action!`);
 
+    if (this.layers[layerIndex].id !== this.layers[this.active_layer].id) this.active_layer = layerIndex;
+    // move all layers if frame is navigated to
+    if (this.layers[layerIndex].frame !== frameIndex) this.layers.forEach(l => l.goTo(l.frame + frameDelta));
+    
+    this.layers[layerIndex].frames[frameIndex].addPath(path);
+    // unset saved path (as its now back in the frame)
+    historyItem[2] = null;
+    
+    this.onlayeractivate && this.onlayeractivate(this.layers[this.active_layer]);
+    this.layers[layerIndex].render();
   }
 
   play() {

src/index.scss

@@ -3,6 +3,7 @@ html, body {
   padding: 0;
   height: 100vh;
   width: 100vw;
+  user-select: none;
 }
 
 body {
@@ -11,6 +12,8 @@ body {
   height: 100vh;
   width: 100vw;
   overflow: hidden;
+  user-select: none;
+  pointer-events: none;
 }
 
 #root > header {
@@ -29,6 +32,7 @@ body {
     align-items: center;
     -webkit-appearance: none;
     height: 30px;
+    pointer-events: all;
 
     & + button {
       border-radius: 0;
@@ -56,9 +60,10 @@ main {
     top: 0;
     height: 100vh;
     width: 100vw;
+    user-select: none;
 
     &.active {
-      pointer-events: auto;
+      pointer-events: all;
     }
   }
 }
@@ -71,6 +76,7 @@ aside:first-of-type {
   max-width: 100px;
   z-index: 10;
   opacity: 0.5;
+  pointer-events: all;
 
   transform: translate3d(-50%, 0, 0);
   transition: transform 150ms ease, opacity 150ms ease;
@@ -137,6 +143,7 @@ aside:last-of-type {
   z-index: 10;
   opacity: 0.5;
   user-select: none;
+  pointer-events: all;
 
   transform: translate3d(80%, 0, 0);
   transition: transform 250ms ease, opacity 150ms ease;