CB-5506 support directional selections (#3095)

webapp/packages/plugin-sql-editor-new/src/SQLEditor/SQLCodeEditorPanel/SQLCodeEditorPanel.tsx

@@ -106,16 +106,16 @@ export const SQLCodeEditorPanel: TabContainerPanelComponent<ISqlEditorModeProps>
         ref={setEditorRef}
         getValue={() => data.value}
         cursor={{
-          anchor: data.cursor.begin,
-          head: data.cursor.end,
+          anchor: data.cursor.anchor,
+          head: data.cursor.head,
         }}
         incomingValue={data.incomingValue}
         extensions={extensions}
         readonly={data.readonly}
         autoFocus
         lineNumbers
         onChange={panel.onQueryChange}
-        onCursorChange={selection => panel.onCursorChange(selection.from, selection.to)}
+        onCursorChange={selection => panel.onCursorChange(selection.anchor, selection.head)}
       >
         {data.isIncomingChanges && (
           <>

webapp/packages/plugin-sql-editor-new/src/SQLEditor/SQLCodeEditorPanel/useSQLCodeEditorPanel.ts

@@ -17,7 +17,7 @@ import type { IEditor } from '../SQLCodeEditor/useSQLCodeEditor.js';
 interface State {
   highlightActiveQuery: () => void;
   onQueryChange: (query: string) => void;
-  onCursorChange: (begin: number, end?: number) => void;
+  onCursorChange: (anchor: number, head?: number) => void;
 }
 
 export function useSQLCodeEditorPanel(data: ISQLEditorData, editor: IEditor) {
@@ -35,8 +35,8 @@ export function useSQLCodeEditorPanel(data: ISQLEditorData, editor: IEditor) {
       onQueryChange(query: string) {
         this.data.setScript(query);
       },
-      onCursorChange(begin: number, end?: number) {
-        this.data.setCursor(begin, end);
+      onCursorChange(anchor: number, head?: number) {
+        this.data.setCursor(anchor, head);
       },
     }),
     { onQueryChange: action.bound, onCursorChange: action.bound },

webapp/packages/plugin-sql-editor/src/SqlDataSource/BaseSqlDataSource.ts

@@ -96,7 +96,7 @@ export abstract class BaseSqlDataSource implements ISqlDataSource {
     this.message = undefined;
     this.outdated = true;
     this.editing = true;
-    this.innerCursorState = { begin: 0, end: 0 };
+    this.innerCursorState = { anchor: 0, head: 0 };
     this.history = new SqlDataSourceHistory();
     this.onUpdate = new SyncExecutor();
     this.onSetScript = new SyncExecutor();
@@ -232,17 +232,14 @@ export abstract class BaseSqlDataSource implements ISqlDataSource {
     return this.features.includes(feature);
   }
 
-  setCursor(begin: number, end = begin): void {
-    if (begin > end) {
-      throw new Error('Cursor begin can not be greater than the end of it');
-    }
-
+  setCursor(anchor: number, head = anchor): void {
     const scriptLength = this.script.length;
 
     this.innerCursorState = Object.freeze({
-      begin: Math.min(begin, scriptLength),
-      end: Math.min(end, scriptLength),
+      anchor: Math.min(anchor, scriptLength),
+      head: Math.min(head, scriptLength),
     });
+
     this.onUpdate.execute();
   }
 

webapp/packages/plugin-sql-editor/src/SqlDataSource/ISqlDataSource.ts

@@ -24,8 +24,8 @@ export interface ISetScriptData {
 }
 
 export interface ISqlEditorCursor {
-  readonly begin: number;
-  readonly end: number;
+  readonly anchor: number;
+  readonly head: number;
 }
 
 export interface ISqlDataSource extends ILoadableState {
@@ -71,7 +71,7 @@ export interface ISqlDataSource extends ILoadableState {
   setName(name: string | null): void;
   setProject(projectId: string | null): void;
   setScript(script: string, source?: string): void;
-  setCursor(begin: number, end?: number): void;
+  setCursor(anchor: number, head?: number): void;
   setEditing(state: boolean): void;
   setExecutionContext(executionContext?: IConnectionExecutionContextInfo): void;
   setIncomingExecutionContext(executionContext?: IConnectionExecutionContextInfo): void;

webapp/packages/plugin-sql-editor/src/SqlEditor/SQLEditorModeContext.ts

@@ -16,8 +16,11 @@ export interface ISQLEditorMode {
 }
 
 export const SQLEditorModeContext: ISyncContextLoader<ISQLEditorMode, ISQLEditorData> = function SQLEditorModeContext(context, data) {
+  const from = Math.min(data.cursor.anchor, data.cursor.head);
+  const to = Math.max(data.cursor.anchor, data.cursor.head);
+
   return {
-    activeSegment: data.parser.getSegment(data.cursor.begin, data.cursor.end),
+    activeSegment: data.parser.getSegment(from, to),
     activeSegmentMode: false,
   };
 };

webapp/packages/plugin-sql-editor/src/SqlEditor/useSqlEditor.ts

@@ -93,7 +93,7 @@ export function useSqlEditor(state: ISqlEditorTabState): ISQLEditorData {
       },
 
       get cursorSegment(): ISQLScriptSegment | undefined {
-        return this.parser.getSegment(this.cursor.begin, -1);
+        return this.parser.getSegment(this.cursor.anchor, -1);
       },
 
       get readonly(): boolean {
@@ -123,7 +123,7 @@ export function useSqlEditor(state: ISqlEditorTabState): ISQLEditorData {
       },
 
       get cursor(): ISqlEditorCursor {
-        return this.dataSource?.cursor ?? { begin: 0, end: 0 };
+        return this.dataSource?.cursor ?? { anchor: 0, head: 0 };
       },
 
       get value(): string {
@@ -437,15 +437,15 @@ export function useSqlEditor(state: ISqlEditorTabState): ISQLEditorData {
 
         await data.updateParserScripts();
 
-        if (!projectId || !connectionId || this.cursor.begin !== this.cursor.end) {
+        if (!projectId || !connectionId || this.cursor.anchor !== this.cursor.head) {
           return this.getSubQuery();
         }
 
         if (this.activeSegmentMode.activeSegmentMode) {
           return this.activeSegment;
         }
 
-        const result = await this.sqlEditorService.parseSQLQuery(projectId, connectionId, this.value, this.cursor.begin);
+        const result = await this.sqlEditorService.parseSQLQuery(projectId, connectionId, this.value, this.cursor.anchor);
 
         if (result.end === 0 && result.start === 0) {
           return;
@@ -509,7 +509,7 @@ export function useSqlEditor(state: ISqlEditorTabState): ISQLEditorData {
     handlers: [
       function setScript({ script }) {
         // ensure that cursor is in script boundaries
-        data.setCursor(data.cursor.begin, data.cursor.end);
+        data.setCursor(data.cursor.anchor, data.cursor.head);
         data.parser.setScript(script);
         data.updateParserScriptsDebounced().catch(() => {});
         data.onUpdate.execute();