Browse Source

[editor] Enable control of editor location highlighting types for the web component

Johan Åhlén 4 years ago
parent
commit
1d5d21eec3

+ 11 - 1
desktop/core/src/desktop/js/apps/editor/components/aceEditor/AceEditor.vue

@@ -42,7 +42,10 @@
   import AceSyntaxDropdown from './AceSyntaxDropdown.vue';
   import AceAutocomplete from './autocomplete/AceAutocomplete.vue';
   import AceGutterHandler from './AceGutterHandler';
-  import AceLocationHandler, { ACTIVE_STATEMENT_CHANGED_EVENT } from './AceLocationHandler';
+  import AceLocationHandler, {
+    ACTIVE_STATEMENT_CHANGED_EVENT,
+    ActiveLocationHighlighting
+  } from './AceLocationHandler';
   import { EXECUTE_ACTIVE_EXECUTABLE_TOPIC } from '../events';
   import { formatSql } from 'apps/editor/api';
   import Executor from 'apps/editor/execution/executor';
@@ -95,6 +98,11 @@
         type: Object as PropType<Executor>,
         required: true
       },
+      activeLocationHighlighting: {
+        type: String as () => ActiveLocationHighlighting,
+        required: false,
+        default: () => 'all'
+      },
       aceOptions: {
         type: Object as PropType<Ace.Options>,
         required: false,
@@ -129,6 +137,7 @@
         sqlReferenceProvider,
         executor,
         initialCursorPosition,
+        activeLocationHighlighting,
         sqlParserProvider,
         initialValue,
         aceOptions
@@ -426,6 +435,7 @@
           editor,
           editorId: id.value,
           executor: executor.value as Executor,
+          activeLocationHighlighting: activeLocationHighlighting.value,
           sqlReferenceProvider: sqlReferenceProvider.value
         });
         subTracker.addDisposable(aceLocationHandler);

+ 11 - 1
desktop/core/src/desktop/js/apps/editor/components/aceEditor/AceLocationHandler.ts

@@ -102,10 +102,13 @@ const equalPositions = (editorPositionOne: Ace.Position, editorPositionTwo: Ace.
   editorPositionOne.row === editorPositionTwo.row &&
   editorPositionOne.column === editorPositionTwo.column;
 
+export type ActiveLocationHighlighting = 'error' | 'all';
+
 export default class AceLocationHandler implements Disposable {
   editor: Ace.Editor;
   editorId: string;
   executor: Executor;
+  activeLocationHighlighting: ActiveLocationHighlighting;
   temporaryOnly: boolean;
 
   subTracker: SubscriptionTracker = new SubscriptionTracker();
@@ -127,12 +130,14 @@ export default class AceLocationHandler implements Disposable {
     editor: Ace.Editor;
     editorId: string;
     executor: Executor;
+    activeLocationHighlighting?: ActiveLocationHighlighting;
     temporaryOnly?: boolean;
     sqlReferenceProvider?: SqlReferenceProvider;
   }) {
     this.editor = options.editor;
     this.editorId = options.editorId;
     this.executor = options.executor;
+    this.activeLocationHighlighting = options.activeLocationHighlighting || 'all';
     this.temporaryOnly = !!options.temporaryOnly;
     this.sqlReferenceProvider = options.sqlReferenceProvider;
 
@@ -251,6 +256,7 @@ export default class AceLocationHandler implements Disposable {
         if (endTestPosition.column !== pointerPosition.column) {
           const token = this.editor.session.getTokenAt(pointerPosition.row, pointerPosition.column);
           if (
+            this.activeLocationHighlighting === 'all' &&
             token !== null &&
             !token.notFound &&
             token.parseLocation &&
@@ -375,6 +381,7 @@ export default class AceLocationHandler implements Disposable {
           if (lastHoveredToken !== token) {
             clearActiveMarkers();
             if (
+              this.activeLocationHighlighting === 'all' &&
               token !== null &&
               !token.notFound &&
               token.parseLocation &&
@@ -439,7 +446,10 @@ export default class AceLocationHandler implements Disposable {
         ) {
           let range: Ace.Range | undefined = undefined;
 
-          if (token.parseLocation) {
+          if (
+            token.parseLocation &&
+            (this.activeLocationHighlighting === 'all' || token.notFound)
+          ) {
             range = markLocation(token.parseLocation);
           } else if (token.syntaxError) {
             range = new AceRange(

+ 1 - 1
desktop/core/src/desktop/js/apps/editor/components/sqlScratchpad/SqlScratchpad.vue

@@ -19,7 +19,7 @@
 <template>
   <div class="sql-scratchpad">
     <HueIcons />
-    <Spinner v-if="loading" spin="true" />
+    <Spinner v-if="loading" :spin="true" />
     <div v-if="!loading && executor" class="sql-scratchpad-container">
       <div class="sql-scratchpad-editor">
         <AceEditor