Merge pull request #175 from parallaxinc/highlight-syntax

Syntax check shortcut and highlight syntax errors

Author: phated

package.json

@@ -13,7 +13,7 @@
     "frylord": "^0.6.0",
     "holovisor": "^0.2.0",
     "iggins": "^0.2.1",
-    "irken": "^0.7.0",
+    "irken": "^0.7.1",
     "lodash": "^3.9.1",
     "react": "^0.13.1",
     "react-loader": "^1.2.0",

plugins/editor/index.js

@@ -9,19 +9,24 @@ require('codemirror/addon/selection/mark-selection');
 require('codemirror/lib/codemirror.css');
 require('../../assets/theme/parallax.css');
 
+const React = require('react');
 const CodeMirror = require('codemirror');
 require('./pbasic')(CodeMirror);
 
 const keyExtension = require('./key-extension');
+
 const consoleStore = require('../../src/stores/console');
 const editorStore = require('../../src/stores/editor');
+const deviceStore = require('../../src/stores/device');
 const fileStore = require('../../src/stores/file');
+
 const { handleInput } = require('../../src/actions/editor');
 const DocumentsStore = require('../../src/stores/documents');
 
-const React = require('react');
 const TransmissionBar = require('./transmission-bar');
 
+const makeToasts = require('../../src/lib/toasts');
+
 function editor(app, opts, done){
 
   var codeEditor;
@@ -37,9 +42,39 @@ function editor(app, opts, done){
     }
   }
 
+  function highlighter(position, length) {
+    if(!codeEditor){
+      return;
+    }
+
+    const doc = codeEditor.getDoc();
+
+    const anchor = doc.posFromIndex(position);
+    const head = doc.posFromIndex(position + length);
+
+    doc.setSelection(anchor, head, { scroll: false });
+
+    const charRect = codeEditor.charCoords(anchor, 'local');
+    const halfHeight = codeEditor.getScrollerElement().offsetHeight / 2;
+    const halfTextHeight = Math.floor((charRect.bottom - charRect.top) / 2);
+    codeEditor.scrollTo(null, charRect.top - halfHeight - halfTextHeight);
+  }
+
   consoleStore.listen(refreshConsole);
 
-  var space = app.workspace;
+  const space = app.workspace;
+  const compile = app.compile.bind(app);
+  // seems strange to pass highlighter to toasts
+  // maybe this should be named "handlers" or something
+  const toasts = makeToasts(app.toast, highlighter);
+
+  editorStore.toasts = toasts;
+  editorStore.compile = compile;
+  editorStore.workspace = space;
+
+  // really stinks to attach these in here
+  fileStore.toasts = toasts;
+  deviceStore.toasts = toasts;
 
   app.view('editor', function(el, cb){
     console.log('editor render');
@@ -67,7 +102,8 @@ function editor(app, opts, done){
         'Ctrl-Up': false,
         'Ctrl-Down': false,
         'Tab': false,
-        'Shift-Tab': false
+        'Shift-Tab': false,
+        'Ctrl-T': false
       });
       keyExtension.setup(app);
       editorStore.cm = codeEditor;

plugins/editor/key-extension.js

@@ -6,6 +6,7 @@ const { findNext, findPrevious, replace } = require('../../src/actions/find');
 const { moveByScrollUpLine, moveByScrollDownLine } = require('../../src/actions/editor-move');
 const { dedent, indent } = require('../../src/actions/text-move');
 const { print } = require('../../src/actions/system');
+const { syntaxCheck } = require('../../src/actions/editor');
 const { newFile, saveFile } = require('../../src/actions/file');
 const { hideOverlays, showSave, showDownload, showProjects } = require('../../src/actions/overlay');
 const { disableAuto, enableAuto } = require('../../src/actions/device');
@@ -120,6 +121,13 @@ const keyExtension = {
           evt.preventDefault();
           showProjects();
         }
+      },
+      syntaxCheck: {
+        code: ['CTRL_T', 'F7'],
+        exec(evt){
+          evt.preventDefault();
+          syntaxCheck();
+        }
       }
     };
 

plugins/overlays/index.js

@@ -11,7 +11,7 @@ const overlayStore = require('../../src/stores/overlay');
 const projectStore = require('../../src/stores/project');
 
 const { confirmDelete, changeProject, deleteProject } = require('../../src/actions/project');
-const { handleError, handleSuccess, deleteFile, saveFileAs } = require('../../src/actions/file');
+const { deleteFile, saveFileAs } = require('../../src/actions/file');
 const { hideSave, hideDelete, hideDownload, showProjects, hideProjects } = require('../../src/actions/overlay');
 
 function overlays(app, opts, done){
@@ -61,10 +61,7 @@ function overlays(app, opts, done){
     if(showDownloadOverlay){
       component = (
         <DownloadOverlay
-          onCancel={hideDownload}
-          handleSuccess={handleSuccess}
-          handleError={handleError}
-          handleComplete={hideDownload} />
+          onCancel={hideDownload} />
       );
     }
 

plugins/sidebar/index.js

@@ -10,20 +10,18 @@ const FileOperations = require('./file-operations');
 const ProjectOperations = require('./project-operations');
 
 const deviceStore = require('../../src/stores/device');
-const editorStore = require('../../src/stores/editor');
 const fileStore = require('../../src/stores/file');
 
 const { loadFile } = require('../../src/actions/file');
 
+const makeToasts = require('../../src/lib/toasts');
+
 function sidebar(app, opts, done){
 
   const space = app.workspace;
-  const toast = app.toast;
-  const overlay = app.overlay;
   const userConfig = app.userConfig;
-  const irken = app;
-  const getBoard = app.getBoard.bind(irken);
-  const scanBoards = app.scanBoards.bind(irken);
+  const getBoard = app.getBoard.bind(app);
+  const scanBoards = app.scanBoards.bind(app);
 
   function refreshDirectory(){
     // TODO: expose a method to refresh directory without changing it
@@ -58,16 +56,11 @@ function sidebar(app, opts, done){
 
   // Store bindings
   deviceStore.workspace = space;
-  deviceStore.toast = toast;
-  deviceStore.overlay = overlay;
   deviceStore.getBoard = getBoard;
   deviceStore.scanBoards = scanBoards;
 
-  editorStore.workspace = space;
-
   fileStore.workspace = space;
   fileStore.userConfig = userConfig;
-  fileStore.toast = toast;
 
   done();
 }

plugins/sidebar/styles.js

@@ -31,12 +31,6 @@ const styles = {
   },
   fileHasTemp: {
     backgroundColor: red
-  },
-  errorToast: {
-    backgroundColor: red
-  },
-  successToast: {
-    backgroundColor: green
   }
 };
 

src/actions/editor.js

@@ -6,6 +6,10 @@ class EditorActions {
   handleInput(inst) {
     this.dispatch(inst);
   }
+
+  syntaxCheck(){
+    this.dispatch();
+  }
 }
 
 module.exports = alt.createActions(EditorActions);

src/actions/file.js

@@ -30,14 +30,6 @@ class FileActions {
   saveFileAs(name) {
     this.dispatch(name);
   }
-
-  handleError(err) {
-    this.dispatch(err);
-  }
-
-  handleSuccess(msg) {
-    this.dispatch(msg);
-  }
 }
 
 module.exports = alt.createActions(FileActions);

src/lib/toasts.js

@@ -0,0 +1,47 @@
+'use strict';
+
+const red = '#da2100';
+const green = '#159600';
+
+const styles = {
+  errorToast: {
+    backgroundColor: red
+  },
+  successToast: {
+    backgroundColor: green
+  }
+};
+
+function toasts(api, highlighter){
+
+  function success(msg){
+    api.show(msg, { style: styles.successToast, timeout: 5000 });
+  }
+
+  function error(err){
+    // leaving this in for better debugging of errors
+    console.log(err);
+
+    api.show(err.message, { style: styles.errorToast });
+
+    if(typeof highlighter !== 'function'){
+      return;
+    }
+
+    if(err && err.errorLength){
+      highlighter(err.errorPosition, err.errorLength);
+    }
+  }
+
+  function clear(){
+    api.clear();
+  }
+
+  return {
+    success,
+    error,
+    clear
+  };
+}
+
+module.exports = toasts;

src/stores/device.js

@@ -1,13 +1,13 @@
 'use strict';
 
-const alt = require('../alt');
 const _ = require('lodash');
 
+const alt = require('../alt');
+
 const { rx, tx } = require('../actions/transmission');
 const { hideDownload, showDownload } = require('../actions/overlay');
 const { clearOutput, output } = require('../actions/console');
 const { enableAuto, disableAuto, reloadDevices, updateSelected } = require('../actions/device');
-const { handleSuccess, handleError } = require('../actions/file');
 
 class DeviceStore {
   constructor() {
@@ -134,7 +134,7 @@ class DeviceStore {
       this.setState({ progress: progress });
     }
 
-    const { workspace, toast, getBoard } = this.getInstance();
+    const { workspace, getBoard } = this.getInstance();
     const { selectedDevice } = this.state;
 
     const name = workspace.filename.deref();
@@ -155,16 +155,34 @@ class DeviceStore {
       .tap(() => clearOutput())
       .then(() => board.on('terminal', output))
       .then(() => board.on('terminal', rx))
-      .tap(() => toast.clear())
-      .tap(() => handleSuccess(`'${name}' downloaded successfully`))
-      .catch(handleError)
+      .tap(() => this._handleClear())
+      .tap(() => this._handleSuccess(`'${name}' downloaded successfully`))
+      .catch((err) => this._handleError(err))
       .finally(() => {
         board.removeListener('progress', updateProgress);
         this.setState({ progress: 0 });
         hideDownload();
       });
   }
 
+  _handleClear(){
+    const { toasts } = this.getInstance();
+
+    toasts.clear();
+  }
+
+  _handleError(err){
+    const { toasts } = this.getInstance();
+
+    toasts.error(err);
+  }
+
+  _handleSuccess(msg){
+    const { toasts } = this.getInstance();
+
+    toasts.success(msg);
+  }
+
 }
 
 DeviceStore.config = {