add auto-highlighting of selected/updated code

src/presentation/TheCodeArea.vue

@@ -7,7 +7,9 @@ import { Component, Prop, Watch, Vue } from 'vue-property-decorator';
 import { StatefulVue } from './StatefulVue';
 import ace from 'ace-builds';
 import 'ace-builds/webpack-resolver';
-import { CodeBuilder } from '../application/State/Code/CodeBuilder';
+import { CodeBuilder } from '@/application/State/Code/Generation/CodeBuilder';
+import { ICodeChangedEvent } from '@/application/State/Code/Event/ICodeChangedEvent';
+import { IScript } from '@/domain/IScript';
 
 const NothingChosenCode =
   new CodeBuilder()
@@ -28,19 +30,65 @@ const NothingChosenCode =
 @Component
 export default class TheCodeArea extends StatefulVue {
   public readonly editorId = 'codeEditor';
+
   private editor!: ace.Ace.Editor;
+  private currentMarkerId?: number;
 
   @Prop() private theme!: string;
 
   public async mounted() {
     this.editor = initializeEditor(this.theme, this.editorId);
     const state = await this.getCurrentStateAsync();
-    this.updateCode(state.code.current);
+    this.editor.setValue(state.code.current || NothingChosenCode, 1);
     state.code.changed.on((code) => this.updateCode(code));
   }
 
-  private updateCode(code: string) {
-    this.editor.setValue(code || NothingChosenCode, 1);
+  private updateCode(event: ICodeChangedEvent) {
+    this.removeCurrentHighlighting();
+    if (event.isEmpty()) {
+      this.editor.setValue(NothingChosenCode, 1);
+      return;
+    }
+    this.editor.setValue(event.code, 1);
+
+    if (event.addedScripts && event.addedScripts.length) {
+      this.reactToChanges(event, event.addedScripts);
+    } else if (event.changedScripts && event.changedScripts.length) {
+      this.reactToChanges(event, event.changedScripts);
+    }
+  }
+
+  private reactToChanges(event: ICodeChangedEvent, scripts: ReadonlyArray<IScript>) {
+      const positions = scripts
+        .map((script) => event.getScriptPositionInCode(script));
+      const start = Math.min(
+        ...positions.map((position) => position.startLine),
+      );
+      const end = Math.max(
+        ...positions.map((position) => position.endLine),
+      );
+      this.scrollToLine(end + 2);
+      this.highlight(start, end);
+  }
+
+  private highlight(startRow: number, endRow: number) {
+    const AceRange = ace.require('ace/range').Range;
+    this.currentMarkerId = this.editor.session.addMarker(
+        new AceRange(startRow, 0, endRow, 0), 'code-area__highlight', 'fullLine',
+    );
+  }
+
+  private scrollToLine(row: number) {
+    const column = this.editor.session.getLine(row).length;
+    this.editor.gotoLine(row, column, true);
+  }
+
+  private removeCurrentHighlighting() {
+    if (!this.currentMarkerId) {
+      return;
+    }
+    this.editor.session.removeMarker(this.currentMarkerId);
+    this.currentMarkerId = undefined;
   }
 }
 
@@ -58,12 +106,16 @@ function initializeEditor(theme: string, editorId: string): ace.Ace.Editor {
 
 </script>
 
-<style scoped lang="scss">
+<style lang="scss">
+@import "@/presentation/styles/colors.scss";
 .code-area {
-    /* ----- Fill its parent div ------ */
     width: 100%;
-    /* height */
     max-height: 1000px;
     min-height: 200px;
+    &__highlight {
+      background-color:$accent;
+      opacity: 20%;
+      position:absolute;
+    }
 }
 </style>