Add undo/redo buttons and support for blockmato

src/components/tabs/automator/AutomatorBlockEditor.vue

@@ -103,7 +103,7 @@ export const BlockAutomator = {
     AutomatorBackend.saveScript(automatorID, content);
   },
 
-  fromText(scriptText) {
+  updateEditor(scriptText) {
     const lines = AutomatorGrammar.blockifyTextAutomator(scriptText).blocks;
     this.lines = lines;
     return lines;

src/components/tabs/automator/AutomatorControls.vue

@@ -21,7 +21,9 @@ export default {
       statusName: "",
       editingName: "",
       editingDifferentScript: false,
-      currentChars: 0
+      currentChars: 0,
+      hasUndo: false,
+      hasRedo: false,
     };
   },
   computed: {
@@ -80,8 +82,9 @@ export default {
       this.editingDifferentScript = (this.isRunning || this.isPaused) &&
         AutomatorBackend.currentEditingScript.id !== AutomatorBackend.currentRunningScript.id;
 
-
       this.currentChars = AutomatorData.singleScriptCharacters();
+      this.hasUndo = AutomatorData.undoBuffer.length > 0;
+      this.hasRedo = AutomatorData.redoBuffer.length > 0;
     },
     rewind: () => AutomatorBackend.restart(),
     play() {
@@ -107,13 +110,16 @@ export default {
     repeat: () => AutomatorBackend.toggleRepeat(),
     restart: () => AutomatorBackend.toggleForceRestart(),
     follow: () => AutomatorBackend.toggleFollowExecution(),
+    undo: () => AutomatorData.undoScriptEdit(),
+    redo: () => AutomatorData.redoScriptEdit(),
   }
 };
 </script>
 
 <template>
   <div class="c-automator__controls l-automator__controls">
-    <div class="l-automator-button-row">
+    <div class="c-automator-control-row l-automator-button-row">
+      <div class="c-button-group">
         <AutomatorButton
           v-tooltip="'Rewind Automator to the first command'"
           class="fa-fast-backward"
@@ -162,8 +168,23 @@ export default {
         >
           This script: {{ formatInt(currentChars) }}/{{ formatInt(maxScriptChars) }}
         </span>
+      </div>
+      <div class="c-button-group">
+        <AutomatorButton
+          v-tooltip="'Undo'"
+          class="fa-arrow-rotate-left"
+          :class="{ 'c-automator__button--inactive' : !hasUndo }"
+          @click="undo"
+        />
+        <AutomatorButton
+          v-tooltip="'Redo'"
+          class="fa-arrow-rotate-right"
+          :class="{ 'c-automator__button--inactive' : !hasRedo }"
+          @click="redo"
+        />
         <AutomatorModeSwitch />
       </div>
+    </div>
     <div class="l-automator-button-row">
       <span
         v-if="duplicateStatus"
@@ -191,6 +212,15 @@ export default {
 </template>
 
 <style scoped>
+.c-automator-control-row {
+  justify-content: space-between;
+}
+
+.c-button-group {
+  display: flex;
+  flex-direction: row;
+}
+
 .c-automator__status-text {
   font-size: 1.3rem;
   font-weight: bold;
@@ -215,6 +245,11 @@ export default {
   border-color: var(--color-reality-light);
 }
 
+.c-automator__button--inactive {
+  background-color: var(--color-automator-controls-border);
+  border-color: var(--color-reality-light);
+}
+
 .c-automator__button.fa-eject::before {
   transform: rotate(90deg);
 }

src/components/tabs/automator/AutomatorDocs.vue

@@ -181,7 +181,7 @@ export default {
       }
 
       this.$nextTick(() => {
-        BlockAutomator.fromText(this.currentScript);
+        BlockAutomator.updateEditor(this.currentScript);
         if (!this.isBlock) AutomatorTextUI.editor.performLint();
       });
     },

src/components/tabs/automator/AutomatorDocsIntroPage.vue

@@ -41,7 +41,10 @@ export default {
     <b>Writing Scripts:</b> Scripts in the block editor are made by going to the block tab
     <div class="fas fa-cubes c-automator-button-icon" />, while scripts in the text editor are made by typing into
     the left half as a text box. In either editor mode, you can also use some smaller premade scripts from the
-    template generator <div class="fas fa-file-code c-automator-button-icon" />.
+    template generator <div class="fas fa-file-code c-automator-button-icon" />. You can undo or redo a limited
+    number of edits using <div class="fas fa-arrow-rotate-left c-automator-button-icon" /> or
+    <div class="fas fa-arrow-rotate-right c-automator-button-icon" />, or by using the respective hotkeys. Edit history
+    is cleared upon switching or converting scripts.
     <br>
     <br>
     <b>Debugging:</b> The two main tools you have for fixing your scripts are the Error Log

src/components/tabs/automator/AutomatorEditor.vue

@@ -67,7 +67,7 @@ export default {
         Modal.message.show(`Some script commands were unrecognizable - defaulting to text editor.`);
         AutomatorBackend.changeModes(this.currentScriptID);
       }
-      this.$nextTick(() => BlockAutomator.fromText(this.currentScript));
+      this.$nextTick(() => BlockAutomator.updateEditor(this.currentScript));
     },
   }
 };

src/components/tabs/automator/AutomatorModeSwitch.vue

@@ -60,7 +60,7 @@ export default {
         Modal.message.show(`Some script commands were unrecognizable - defaulting to text editor.`);
         AutomatorBackend.changeModes(this.currentScriptID);
       }
-      this.$nextTick(() => BlockAutomator.fromText(this.currentScript));
+      this.$nextTick(() => BlockAutomator.updateEditor(this.currentScript));
     },
     toggleAutomatorMode() {
       const currScript = player.reality.automator.scripts[this.currentScriptID].content;
@@ -116,7 +116,7 @@ export default {
   background-color: #626262;
   border: var(--var-border-width, 0.2rem) solid #767676;
   border-radius: var(--var-border-radius, 0.3rem);
-  margin: 0.2rem 0.4rem 0.2rem auto;
+  margin: 0.3rem 0.4rem 0.3rem auto;
   padding: 0.3rem 0;
   cursor: pointer;
 }

src/components/tabs/automator/AutomatorScriptDropdownEntryList.vue

@@ -65,7 +65,7 @@ export default {
         this.currentScriptID = Number(Object.keys(storedScripts)[0]);
         player.reality.automator.state.editorScript = this.currentScriptID;
       }
-      if (this.isBlock) this.$nextTick(() => BlockAutomator.fromText(this.currentScript));
+      if (this.isBlock) this.$nextTick(() => BlockAutomator.updateEditor(this.currentScript));
       this.$parent.openRequest = false;
       AutomatorData.clearUndoData();
     },

src/core/automator/automator-backend.js

@@ -292,8 +292,9 @@ export const AutomatorData = {
     this.pushRedoData(this.currentScriptText());
     player.reality.automator.scripts[this.scriptIndex()].content = undoContent;
 
-    if (AutomatorTextUI.editor) AutomatorTextUI.editor.setValue(undoContent);
     AutomatorBackend.saveScript(this.scriptIndex(), undoContent);
+    if (player.reality.automator.type === AUTOMATOR_TYPE.TEXT) AutomatorTextUI.editor.setValue(undoContent);
+    else BlockAutomator.updateEditor(undoContent);
   },
   redoScriptEdit() {
     if (this.redoBuffer.length === 0) return;
@@ -303,8 +304,9 @@ export const AutomatorData = {
     this.pushUndoData(this.currentScriptText(), 2 * this.MIN_CHARS_BETWEEN_UNDOS);
     player.reality.automator.scripts[this.scriptIndex()].content = redoContent;
 
-    if (AutomatorTextUI.editor) AutomatorTextUI.editor.setValue(redoContent);
     AutomatorBackend.saveScript(this.scriptIndex(), redoContent);
+    if (player.reality.automator.type === AUTOMATOR_TYPE.TEXT) AutomatorTextUI.editor.setValue(redoContent);
+    else BlockAutomator.updateEditor(redoContent);
   }
 };
 
@@ -982,7 +984,7 @@ export const AutomatorBackend = {
     } else {
       const toConvert = AutomatorTextUI.editor.getDoc().getValue();
       // Needs to be called to update the lines prop in the BlockAutomator object
-      BlockAutomator.fromText(toConvert);
+      BlockAutomator.updateEditor(toConvert);
       AutomatorBackend.saveScript(scriptID, toConvert);
       player.reality.automator.type = AUTOMATOR_TYPE.BLOCK;
       player.reality.automator.currentInfoPane = AutomatorPanels.BLOCKS;