Select a region of the source when clicking on MIR output

Author: shepmaster

ui/frontend/AdvancedEditor.tsx

@@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { connect } from 'react-redux';
 
 import State from './state';
-import { CommonEditorProps, Crate, Edition, Focus, PairCharacters, Position } from './types';
+import { CommonEditorProps, Crate, Edition, Focus, PairCharacters, Position, Selection } from './types';
 
 type Ace = typeof import('ace-builds');
 type AceEditor = import('ace-builds').Ace.Editor;
@@ -64,6 +64,7 @@ interface AdvancedEditorProps {
   keybinding?: string;
   onEditCode: (_: string) => any;
   position: Position;
+  selection: Selection;
   theme: string;
   crates: Crate[];
   focus?: Focus;
@@ -250,6 +251,28 @@ const AdvancedEditor: React.SFC<AdvancedEditorProps> = props => {
     editor.focus();
   }, []));
 
+  const selectionProps = useMemo(() => ({
+    selection: props.selection,
+    ace: props.ace,
+  }), [props.selection, props.ace]);
+
+  useEditorProp(editor, selectionProps, useCallback((editor, { ace, selection }) => {
+    if (selection.start && selection.end) {
+      // Columns are zero-indexed in ACE, but why does the selection
+      // API and `gotoLine` treat the row/line differently?
+      const toPoint = ({ line, column }: Position) => ({ row: line - 1, column: column - 1 });
+
+      const start = toPoint(selection.start);
+      const end = toPoint(selection.end);
+
+      const range = new ace.Range(start.row, start.column, end.row, end.column);
+
+      editor.selection.setRange(range);
+      editor.renderer.scrollCursorIntoView(start);
+      editor.focus();
+    }
+  }, []));
+
   // There's a tricky bug with Ace:
   //
   // 1. Open the page
@@ -295,6 +318,7 @@ interface AdvancedEditorAsyncProps {
   keybinding?: string;
   onEditCode: (_: string) => any;
   position: Position;
+  selection: Selection;
   theme: string;
   crates: Crate[];
   focus?: Focus;

ui/frontend/Editor.tsx

@@ -3,7 +3,7 @@ import { useSelector, useDispatch } from 'react-redux';
 
 import * as actions from './actions';
 import AdvancedEditor from './AdvancedEditor';
-import { CommonEditorProps, Editor as EditorType, Position } from './types';
+import { CommonEditorProps, Editor as EditorType, Position, Selection } from './types';
 import { State } from './reducers';
 
 class CodeByteOffsets {
@@ -24,6 +24,17 @@ class CodeByteOffsets {
     return [precedingBytes, precedingBytes + highlightedBytes];
   }
 
+  public rangeToOffsets(start: Position, end: Position) {
+    const startBytes = this.positionToBytes(start);
+    const endBytes = this.positionToBytes(end);
+    return [startBytes, endBytes];
+  }
+
+  private positionToBytes(position: Position) {
+    // Subtract one as this logic is zero-based and the columns are one-based
+    return this.bytesBeforeLine(position.line) + position.column - 1;
+  }
+
   private bytesBeforeLine(line: number) {
     // Subtract one as this logic is zero-based and the lines are one-based
     line -= 1;
@@ -64,6 +75,7 @@ class SimpleEditor extends React.PureComponent<CommonEditorProps> {
 
   public componentDidUpdate(prevProps, _prevState) {
     this.gotoPosition(prevProps.position, this.props.position);
+    this.setSelection(prevProps.selection, this.props.selection);
   }
 
   private gotoPosition(oldPosition: Position, newPosition: Position) {
@@ -78,12 +90,26 @@ class SimpleEditor extends React.PureComponent<CommonEditorProps> {
     editor.focus();
     editor.setSelectionRange(startBytes, endBytes);
   }
+
+  private setSelection(oldSelection: Selection, newSelection: Selection) {
+    const editor = this._editor;
+
+    if (!newSelection || !editor) { return; }
+    if (newSelection === oldSelection) { return; }
+
+    const offsets = new CodeByteOffsets(this.props.code);
+    const [startBytes, endBytes] = offsets.rangeToOffsets(newSelection.start, newSelection.end);
+
+    editor.focus();
+    editor.setSelectionRange(startBytes, endBytes);
+  }
 }
 
 const Editor: React.SFC = () => {
   const code = useSelector((state: State) => state.code);
   const editor = useSelector((state: State) => state.configuration.editor);
   const position = useSelector((state: State) => state.position);
+  const selection = useSelector((state: State) => state.selection);
   const crates = useSelector((state: State) => state.crates);
 
   const dispatch = useDispatch();
@@ -96,6 +122,7 @@ const Editor: React.SFC = () => {
     <div className="editor">
       <SelectedEditor code={code}
         position={position}
+        selection={selection}
         crates={crates}
         onEditCode={onEditCode}
         execute={execute} />

ui/frontend/actions.ts

@@ -27,6 +27,7 @@ import {
   PrimaryActionAuto,
   PrimaryActionCore,
   ProcessAssembly,
+  Position,
   makePosition,
 } from './types';
 
@@ -93,6 +94,7 @@ export enum ActionType {
   AddImport = 'ADD_IMPORT',
   EnableFeatureGate = 'ENABLE_FEATURE_GATE',
   GotoPosition = 'GOTO_POSITION',
+  SelectText = 'SELECT_TEXT',
   RequestFormat = 'REQUEST_FORMAT',
   FormatSucceeded = 'FORMAT_SUCCEEDED',
   FormatFailed = 'FORMAT_FAILED',
@@ -433,6 +435,9 @@ export const enableFeatureGate = (featureGate: string) =>
 export const gotoPosition = (line: string | number, column: string | number) =>
   createAction(ActionType.GotoPosition, makePosition(line, column));
 
+export const selectText = (start: Position, end: Position) =>
+  createAction(ActionType.SelectText, { start, end });
+
 const requestFormat = () =>
   createAction(ActionType.RequestFormat);
 
@@ -793,6 +798,7 @@ export type Action =
   | ReturnType<typeof addImport>
   | ReturnType<typeof enableFeatureGate>
   | ReturnType<typeof gotoPosition>
+  | ReturnType<typeof selectText>
   | ReturnType<typeof requestFormat>
   | ReturnType<typeof receiveFormatSuccess>
   | ReturnType<typeof receiveFormatFailure>

ui/frontend/highlighting.ts

@@ -1,9 +1,11 @@
 import Prism from 'prismjs';
+import { makePosition } from './types';
 
 export function configureRustErrors({
   enableFeatureGate,
   getChannel,
   gotoPosition,
+  selectText,
   addImport,
   reExecuteWithBacktrace,
 }) {
@@ -158,10 +160,13 @@ export function configureRustErrors({
 
     const mirSourceLinks = env.element.querySelectorAll('.mir-source');
     Array.from(mirSourceLinks).forEach((link: HTMLAnchorElement) => {
-      const { startLine, startCol } = link.dataset;
+      const { startLine, startCol, endLine, endCol } = link.dataset;
+      const start = makePosition(startLine, startCol);
+      const end = makePosition(endLine, endCol);
+
       link.onclick = e => {
         e.preventDefault();
-        gotoPosition(startLine, startCol);
+        selectText(start, end);
       };
     });
   });

ui/frontend/index.tsx

@@ -14,6 +14,7 @@ import {
   editCode,
   enableFeatureGate,
   gotoPosition,
+  selectText,
   addImport,
   performCratesLoad,
   performVersionsLoad,
@@ -49,6 +50,7 @@ const store = createStore(playgroundApp, initialState, enhancers);
 configureRustErrors({
   enableFeatureGate: featureGate => store.dispatch(enableFeatureGate(featureGate)),
   gotoPosition: (line, col) => store.dispatch(gotoPosition(line, col)),
+  selectText: (start, end) => store.dispatch(selectText(start, end)),
   addImport: (code) => store.dispatch(addImport(code)),
   reExecuteWithBacktrace: () => store.dispatch(reExecuteWithBacktrace()),
   getChannel: () => store.getState().configuration.channel,

ui/frontend/reducers/index.ts

@@ -8,6 +8,7 @@ import notifications from './notifications';
 import output from './output';
 import page from './page';
 import position from './position';
+import selection from './selection';
 import versions from './versions';
 
 const playgroundApp = combineReducers({
@@ -19,6 +20,7 @@ const playgroundApp = combineReducers({
   output,
   page,
   position,
+  selection,
   versions,
 });
 

ui/frontend/reducers/selection.ts

@@ -0,0 +1,18 @@
+import { Action, ActionType } from '../actions';
+import { Selection } from '../types';
+
+const DEFAULT: Selection = {
+  start: null,
+  end: null,
+};
+
+export default function position(state = DEFAULT, action: Action) {
+  switch (action.type) {
+    case ActionType.SelectText: {
+      const { start, end } = action;
+      return { ...state, start, end };
+    }
+    default:
+      return state;
+  }
+}

ui/frontend/types.ts

@@ -8,6 +8,11 @@ export interface Position {
 export const makePosition = (line: string | number, column: string | number): Position =>
   ({ line: +line, column: +column });
 
+export interface Selection {
+  start?: Position;
+  end?: Position;
+}
+
 export interface Crate {
   id: string;
   name: string;
@@ -25,6 +30,7 @@ export interface CommonEditorProps {
   execute: () => any;
   onEditCode: (_: string) => any;
   position: Position;
+  selection: Selection;
   crates: Crate[];
 }