From 40acde468ea9b9fda09e0b6ec0451289607acac1 Mon Sep 17 00:00:00 2001
From: Lumi Pakkanen <lumi.pakkanen@gmail.com>
Date: Tue, 11 Jun 2024 15:14:39 +0300
Subject: [PATCH] WIP: Undo system

ref #719
---
 src/assets/main.css              | 18 +++++++++++++
 src/components/ScaleControls.vue | 20 ++++++++++++++-
 src/stores/scale.ts              | 32 +++++++++++++++++++++--
 src/undo.ts                      | 44 ++++++++++++++++++++++++++++++++
 4 files changed, 111 insertions(+), 3 deletions(-)
 create mode 100644 src/undo.ts

diff --git a/src/assets/main.css b/src/assets/main.css
index 6ac709b6..63c0cae2 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -225,3 +225,21 @@ div.alert-box-danger {
 p.alert-message-danger {
   color: var(--color-alert-danger);
 }
+
+.undo,
+.redo {
+  cursor: pointer;
+}
+
+.undo.disabled,
+.redo.disabled {
+  cursor: default;
+  color: var(--color-text-mute);
+}
+
+.undo::after {
+  content: '↺';
+}
+.redo::after {
+  content: '↻';
+}
diff --git a/src/components/ScaleControls.vue b/src/components/ScaleControls.vue
index 585d6314..f5c24833 100644
--- a/src/components/ScaleControls.vue
+++ b/src/components/ScaleControls.vue
@@ -115,7 +115,17 @@ defineExpose({ focus, clearPaletteInfo })
   </div>
 
   <div class="control-group">
-    <h2>Scale data</h2>
+    <h2>
+      <span class="scale-data-header">Scale data</span>
+      <span
+        :class="{ undo: true, disabled: scale.undoDisabled }"
+        @click="scale.history.undo"
+      ></span>
+      <span
+        :class="{ redo: true, disabled: scale.redoDisabled }"
+        @click="scale.history.redo"
+      ></span>
+    </h2>
     <div class="control">
       <textarea
         id="scale-data"
@@ -149,4 +159,12 @@ defineExpose({ focus, clearPaletteInfo })
   height: 3em;
   overflow-y: hidden;
 }
+.scale-data-header {
+  pointer-events: none;
+  user-select: none;
+}
+.undo,
+.redo {
+  margin-left: 1em;
+}
 </style>
diff --git a/src/stores/scale.ts b/src/stores/scale.ts
index d17b1ec5..a38b1590 100644
--- a/src/stores/scale.ts
+++ b/src/stores/scale.ts
@@ -8,7 +8,7 @@ import {
   randomId
 } from '@/utils'
 import { defineStore } from 'pinia'
-import { computed, ref, watch } from 'vue'
+import { computed, reactive, ref, watch } from 'vue'
 import { Fraction, mmod, mtof } from 'xen-dev-utils'
 import {
   parseAST,
@@ -38,6 +38,7 @@ import {
 import { pianoMap } from 'isomorphic-qwerty'
 import { computeWhiteIndices } from '@/midi'
 import { midiKeyInfo } from 'xen-midi'
+import { StoreHistory } from '@/undo'
 
 // Colors from #1 to #12 inclusive.
 function defaultColors(base: number) {
@@ -434,6 +435,7 @@ export const useScaleStore = defineStore('scale', () => {
         const rootFrequency = autoFrequency.value ? 'mtof(_)' : 'baseFrequency'
         warning.value = `Base MIDI note ${noteNumber} defaults to ${midiName}. Use an explicit ${enharmonics[0]} = ${rootFrequency} or ${enharmonics[1]} = ${rootFrequency} to get rid of this warning.`
       }
+      history.pushState()
     } catch (e) {
       if (e instanceof Error) {
         error.value = e.message
@@ -567,6 +569,28 @@ export const useScaleStore = defineStore('scale', () => {
     uploadedId.value = data['id']
   }
 
+  function serialize() {
+    const data = toJSON()
+    data.id = id.value
+    data.uploadedId = uploadedId.value
+    console.log(data.id)
+    return JSON.stringify(data)
+  }
+
+  function restore(body: string) {
+    const data = JSON.parse(body, (key, value) => Interval.reviver(key, Scale.reviver(key, value)))
+    fromJSON(data)
+    uploadedId.value = data.uploadedId
+    // TODO: Figure out the interaction between undo history and server uploading
+    console.log(id.value, uploadedId.value)
+  }
+
+  const history = reactive(new StoreHistory(serialize, restore))
+
+  const undoDisabled = computed(() => history.pointer <= 0)
+
+  const redoDisabled = computed(() => history.pointer >= history.states.length - 1)
+
   return {
     // Live state
     ...LIVE_STATE,
@@ -599,6 +623,10 @@ export const useScaleStore = defineStore('scale', () => {
     colorForIndex,
     labelForIndex,
     toJSON,
-    fromJSON
+    fromJSON,
+    // Class instances
+    history,
+    undoDisabled,
+    redoDisabled
   }
 })
diff --git a/src/undo.ts b/src/undo.ts
new file mode 100644
index 00000000..3b6b7235
--- /dev/null
+++ b/src/undo.ts
@@ -0,0 +1,44 @@
+type Serializer = () => string
+type Restorer = (state: string) => void
+
+export class StoreHistory {
+  states: string[]
+  pointer: number
+  capacity: number
+  serialize: Serializer
+  restore: Restorer
+
+  constructor(serialize: Serializer, restore: Restorer, capacity = 10) {
+    this.states = []
+    this.pointer = -1
+    this.capacity = capacity
+    this.serialize = serialize
+    this.restore = restore
+    this.pushState()
+  }
+
+  pushState() {
+    this.states = this.states.slice(0, this.pointer + 1)
+    this.states.push(this.serialize())
+    this.states = this.states.slice(-this.capacity)
+    this.pointer = this.states.length - 1
+  }
+
+  undo() {
+    this.pointer--
+    if (this.pointer < 0) {
+      this.pointer = -1
+      return
+    }
+    this.restore(this.states[this.pointer])
+  }
+
+  redo() {
+    this.pointer++
+    if (this.pointer >= this.states.length) {
+      this.pointer = this.states.length - 1
+      return
+    }
+    this.restore(this.states[this.pointer])
+  }
+}