Merge pull request #2610 from IvarK/blockmato-line-number

Multiple QoL blockmato fixes

public/stylesheets/styles.css

@@ -8911,14 +8911,9 @@ kbd {
 
 /* #endregion reality-tab */
 
-.c-automator-blocks {
-  width: 100%;
-  padding-bottom: 5rem;
-}
-
 .o-automator-command {
   display: inline-block;
-  width: 8.5rem;
+  min-width: 8.5rem;
   color: #c080ff;
   background: #000115;
   border: 0.1rem solid #353535;
@@ -8946,8 +8941,10 @@ kbd {
 
 .c-automator-block-row {
   display: flex;
+  min-height: 2.85rem;
+  max-height: 2.85rem;
   align-items: center;
-  margin-bottom: 0.5rem;
+  margin: 0.3rem 0;
 }
 
 .c-automator-block-row > * {
@@ -8960,20 +8957,11 @@ kbd {
 
 .c-automator-block-row-ghost {
   display: block;
+  width: 100%;
   margin: auto;
   margin-bottom: 0.5rem;
   margin-left: 0;
-}
-
-.c-automator-block-editor {
-  overflow-y: scroll;
-  tab-size: 1.5rem;
-  height: 100%;
-  background-color: black;
-  border-top-left-radius: var(--var-border-radius, 1rem);
-  border-bottom-left-radius: var(--var-border-radius, 1rem);
-  box-sizing: border-box;
-  padding: 0.5rem;
+  padding: 0.3rem 0.6rem;
 }
 
 .s-base--metro .c-automator-block-editor::-webkit-scrollbar-thumb {
@@ -8995,15 +8983,6 @@ input.o-automator-block-input {
   color: #00ff00;
 }
 
-.l-automator-nested-block {
-  width: fit-content;
-  min-width: 30rem;
-  border: var(--var-border-width, 2px) dotted #55ff55;
-  margin-top: 0.5rem;
-  margin-left: 3rem;
-  padding: 1rem;
-}
-
 .o-automator-block-delete {
   font-size: 1.7rem;
   color: #ff3333;

src/components/tabs/automator/AutomatorBlockEditor.vue

@@ -10,9 +10,6 @@ export default {
     draggable
   },
   computed: {
-    lineNumbersCount() {
-      return Math.max(this.lines.length, 1);
-    },
     lines: {
       get() {
         return this.$viewModel.tabs.reality.automator.lines;
@@ -20,9 +17,22 @@ export default {
       set(value) {
         this.$viewModel.tabs.reality.automator.lines = value;
       }
-    }
+    },
+    numberOfLines() {
+      return this.lines.reduce((a, l) => a + BlockAutomator.numberOfLinesInBlock(l), 0);
+    },
+  },
+  mounted() {
+    this.$refs.blockEditorElement.scrollTo(0, BlockAutomator.previousScrollPosition);
+    // We want to set it here directly instead of through v-bind because it's slightly faster and less jittery
+    this.$refs.editorGutter.style.bottom = `${this.$refs.blockEditorElement.scrollTop}px`;
   },
   methods: {
+    setPreviousScroll() {
+      BlockAutomator.previousScrollPosition = this.$refs.blockEditorElement.scrollTop;
+      // We want to set it here directly instead of through v-bind because it's slightly faster and less jittery
+      this.$refs.editorGutter.style.bottom = `${this.$refs.blockEditorElement.scrollTop}px`;
+    },
     parseRequest() {
       BlockAutomator.parseTextFromBlocks();
     },
@@ -118,31 +128,97 @@ export const BlockAutomator = {
 
   updateIdArray() {
     this._idArray = this.blockIdArray(this.lines);
-  }
+  },
+
+  numberOfLinesInBlock(block) {
+    return block.nested ? Math.max(block.nest.reduce((v, b) => v + this.numberOfLinesInBlock(b), 1), 2) : 1;
+  },
+
+  previousScrollPosition: 0
 };
 </script>
 
 <template>
-  <div class="c-automator-block-editor">
-    <draggable
-      v-model="lines"
-      group="code-blocks"
-      class="c-automator-blocks"
-      ghost-class="c-automator-block-row-ghost"
-      @end="parseRequest"
+  <div class="c-automator-block-editor--container">
+    <div
+      ref="editorGutter"
+      class="c-automator-block-editor--gutter"
     >
-      <AutomatorSingleBlock
-        v-for="(block, index) in lines"
-        :key="block.id"
-        :line-number="index"
-        :block="block"
-        :update-block="updateBlock"
-        :delete-block="deleteBlock"
-      />
-    </draggable>
+      <div
+        v-for="i in numberOfLines"
+        :key="i"
+        class="c-automator-block-line-number"
+        :style="{
+          top: `${i * 3.45 - 3.45}rem`
+        }"
+      >
+        {{ i }}
+      </div>
+    </div>
+    <div
+      ref="blockEditorElement"
+      class="c-automator-block-editor"
+      @scroll="setPreviousScroll()"
+    >
+      <draggable
+        v-model="lines"
+        group="code-blocks"
+        class="c-automator-blocks"
+        ghost-class="c-automator-block-row-ghost"
+        @end="parseRequest"
+      >
+        <AutomatorSingleBlock
+          v-for="block in lines"
+          :key="block.id"
+          :block="block"
+          :update-block="updateBlock"
+          :delete-block="deleteBlock"
+        />
+      </draggable>
+    </div>
   </div>
 </template>
 
 <style scoped>
+.c-automator-block-editor {
+  display: flex;
+  overflow-y: auto;
+  tab-size: 1.5rem;
+  width: 100%;
+  background-color: black;
+  box-sizing: content-box;
+}
 
+.c-automator-block-editor--container {
+  display: flex;
+  overflow-y: hidden;
+  height: 100%;
+  position: relative;
+  box-sizing: border-box;
+}
+
+.c-automator-blocks {
+  width: 100%;
+  height: max-content;
+  padding: 0.3rem 0.6rem 5rem;
+}
+
+.c-automator-block-editor--gutter {
+  height: max-content;
+  min-height: 100%;
+  position: relative;
+  background-color: #262626;
+  border-right: 0.1rem solid #505050;
+  /* left and right paddings are 1 to make space for text, bottom padding is 20 to make for a buffer */
+  padding: 0.3rem 1rem 20rem;
+}
+
+.c-automator-block-line-number {
+  display: flex;
+  height: 3.45rem;
+  justify-content: flex-end;
+  align-items: center;
+  font-size: 1.4rem;
+  color: #606060;
+}
 </style>

src/components/tabs/automator/AutomatorSingleBlock.vue

@@ -18,10 +18,6 @@ export default {
     deleteBlock: {
       type: Function,
       required: true
-    },
-    lineNumber: {
-      type: Number,
-      required: true
     }
   },
   data() {
@@ -113,7 +109,7 @@ export default {
 </script>
 
 <template>
-  <div>
+  <div class="c-automator-block-row--container">
     <div
       class="c-automator-block-row"
       :class="{ 'c-automator-block-row-active' : isCurrentLine }"
@@ -192,10 +188,9 @@ export default {
       class="l-automator-nested-block"
       group="code-blocks"
     >
-      <automator-single-block
-        v-for="(subblock, index) in block.nest"
+      <AutomatorSingleBlock
+        v-for="subblock in block.nest"
         :key="subblock.id"
-        :line-number="index"
         :block="subblock"
         :update-block="updateBlockFromNest"
         :delete-block="deleteBlockFromNest"
@@ -205,5 +200,18 @@ export default {
 </template>
 
 <style scoped>
+.c-automator-block-row--container {
+  margin: -0.002rem;
+  /* The only purpose of this is to prevent margin overlapping so the nested blocks can fit nicer */
+  padding: 0.002rem;
+}
 
+.l-automator-nested-block {
+  width: fit-content;
+  min-width: 30rem;
+  min-height: 3.65rem;
+  border: 0.1rem dotted #55ff55;
+  margin: -0.1rem 0 -0.1rem 3rem;
+  padding: 0 0.5rem;
+}
 </style>