Add support for cruves (#217)

* Add most externals

* Change clear() -> clear_viewport()

This is a clear (lol) clash between the browser's clear() function, that
removes all console output

* Make getReadyWebGLForCanvas reset canvas

Now, all init scripts just call that function.

* Move initRuneBuffer to getReadyWebGLForCanvas

* Remove init files

We shall use a change in externals to decide this

* Remove init files from index script

* Add renderMode property

* Diversify mock libraries

Using all 4 external libraries available, and with the renderMode option

* Add renderMode param to components and containers

* Fix container imports and args

Application (URL parsing) does not support library yet so it does not
need to use the renderMode param.

* Add renderMode argument for clearContext action

* Refactor externals definitions

- Separated 2d and 3d runes
- Nicer names

* Change clearContext usage in saga

- Use null for things that should not affect clearContext
- Generate a renderMode for SELECT_PLAYGROUND_EXTERNAL
- Add a takeAll for CLEAR_CONTEXT that gets the canvas ready

* Add documentation for saga

* Format and update tests

* Move externals definitions to a new file

* Fix enum and import

* Change renderMode -> externalLibraryName in usage

components and containers

* Change clearContext action definition

* Update mock assessmentAPI

* Fix import order

* Change clearContext usage and CLEAR_CONTEXT saga

To use the correct arguments, and swtich case for the
ExternalLibraryNames

* Remove shallow check for assessment

* Add documentation for clearContext

* Fix mock externals not loading

* Change update method for content Workspaces

i.e AssessmentWorkspace and GradingWorkspace.
We depend on the componentDidUpdate being triggered, which is ensured by
componentDidMount. This is because multiple dispatches one
componentDidMount/componentDidUpdate does not work

* Format files

* Add delay for mock backend calls

* Fix import order

From rebase

* Simplify loading and resetting logic for workspace

This was causing some weird behaviour, but I think now the logic is
simplier and it works better

* Fix mock grading being passed as an object

* Format files

* Move ExternalLibraryName/ExternalLibraryNames

* Format reducer

* Remove delay

Author: remo5000

public/externalLibs/graphics/webGLcurve.js

@@ -70,7 +70,7 @@ function generateCurve(scaleMode, drawMode, numPoints, func, isFullView) {
   } else {
     // do nothing for normal situations
   }
-  clear();
+  clear_viewport();
   gl.uniformMatrix4fv(u_transformMatrix, false, transMat);
   drawCurve(drawMode, curvePosArray);
   return new ShapeDrawn();

public/externalLibs/graphics/webGLgraphics.js

@@ -188,6 +188,7 @@ var normalShaderProgram; // the default shader program
 var vertexBuffer;
 var vertexPositionAttribute; // location of a_position
 var colorAttribute; // location of a_color
+var canvas; // the <canvas> object that is used to display webGL output
 
 // rune 2d and 3d
 var instance_ext; // ANGLE_instanced_arrays extension
@@ -245,15 +246,48 @@ function open_pixmap(name, horiz, vert, aa_off) {
   return canvas;
 }
 
-function getReadyWebGLForCanvas(mode, canvas) {
+/**
+ * Creates a <canvas> object, or resets it if it exists.
+ *
+ * Post-condition: canvas is defined as the selected <canvas>
+ *   object in the document.
+ */
+function resetCanvas() {
+  canvas = document.querySelector('.rune-canvas');
+  if (!canvas) {
+    canvas = document.createElement('canvas');
+    canvas.setAttribute('width', 512);
+    canvas.setAttribute('height', 512);
+    canvas.className = 'rune-canvas';
+    canvas.hidden = true;
+    document.body.appendChild(canvas);
+  } else {
+    canvas.parentNode.removeChild(canvas);
+    resetCanvas();
+  }
+}
+
+/**
+ * Gets the WebGL object (gl) ready for usage. Use this
+ * to reset the mode of rendering i.e to change from 2d to 3d runes.
+ *
+ * Post-condition: gl is non-null, uses an appropriate
+ *   program and has an appropriate initialized state
+ *   for mode-specific rendering (e.g props for 3d render).
+ *
+ * @param mode a string -- '2d'/'3d'/'curve' that is the usage of
+ *   the gl object.
+ */
+function getReadyWebGLForCanvas(mode) {
+  resetCanvas();
   // Get the rendering context for WebGL
   gl = initWebGL(canvas);
   if (gl) {
     gl.clearColor(1.0, 1.0, 1.0, 1.0); // Set clear color to white, fully opaque
     gl.enable(gl.DEPTH_TEST); // Enable depth testing
     gl.depthFunc(gl.LEQUAL); // Near things obscure far things
     // Clear the color as well as the depth buffer.
-    clear();
+    clear_viewport();
 
     //TODO: Revise this, it seems unnecessary
     // Align the drawable canvas in the middle
@@ -274,6 +308,7 @@ function getReadyWebGLForCanvas(mode, canvas) {
     // rune-specific operations
     if (mode === '2d' || mode === '3d') {
       initRuneCommon();
+      initRuneBuffer(vertices, indices);
       // rune-3d-specific operations
       if (mode === '3d') {
         initRune3d();
@@ -298,7 +333,7 @@ function getReadyWebGL(mode, name, horiz, vert, aa_off) {
     gl.enable(gl.DEPTH_TEST); // Enable depth testing
     gl.depthFunc(gl.LEQUAL); // Near things obscure far things
     // Clear the color as well as the depth buffer.
-    clear();
+    clear_viewport();
 
     //TODO: Revise this, it seems unnecessary
     // Align the drawable canvas in the middle
@@ -491,11 +526,11 @@ function initFramebufferObject() {
 
 function clearFramebuffer(framebuffer) {
   gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
-  clear();
+  clear_viewport();
   gl.bindFramebuffer(gl.FRAMEBUFFER, null);
 }
 
-function clear() {
+function clear_viewport() {
   if (!gl) {
     throw new Error(
       'Please activate the Canvas component by clicking it in the sidebar'
@@ -508,8 +543,6 @@ function clear() {
   }
 }
 
-var clear_viewport = clear; // firefox console already has function clear
-
 //---------------------Rune 2d and 3d functions---------------------
 function initRuneCommon() {
   // set up attribute locations

public/externalLibs/graphics/webGLinit2D.js

@@ -394,14 +394,14 @@ function drawWithWebGL(flattened_shape_list, drawFunction) {
 }
 
 function show(shape) {
-  clear();
+  clear_viewport();
   var flattened_shape_list = generateFlattenedShapeList(shape);
   drawWithWebGL(flattened_shape_list, drawRune);
   return new ShapeDrawn();
 }
 
 function anaglyph(shape) {
-  clear();
+  clear_viewport();
   clearAnaglyphFramebuffer();
   var flattened_shape_list = generateFlattenedShapeList(shape);
   drawWithWebGL(flattened_shape_list, drawAnaglyph);
@@ -410,7 +410,7 @@ function anaglyph(shape) {
 
 var hollusionTimeout;
 function hollusion(shape, num) {
-  clear();
+  clear_viewport();
   var num = num > 3 ? num : 3;
   var flattened_shape_list = generateFlattenedShapeList(shape);
   var frame_list = [];
@@ -443,7 +443,7 @@ function hollusion(shape, num) {
     gl.finish();
     copy_viewport(gl.canvas, frame);
     frame_list.push(frame);
-    clear();
+    clear_viewport();
   }
   for (var i = frame_list.length - 2; i > 0; i--) {
     frame_list.push(frame_list[i]);
@@ -464,7 +464,7 @@ function clearHollusion() {
 }
 
 function stereogram(shape) {
-  clear();
+  clear_viewport();
   var flattened_shape_list = generateFlattenedShapeList(shape);
   var depth_map = open_pixmap('depth_map', viewport_size, viewport_size, true);
   // draw the depth map

public/externalLibs/graphics/webGLinit3D.js

@@ -16,18 +16,20 @@ function dynamicallyLoadScript(url) {
  */
 function loadLibs() {
   const files = [
+    // list library 
     '/externalLibs/list.js',
+    // sound
     '/externalLibs/sound/sounds.js',
     '/externalLibs/sound/soundToneMatrix.js',
     '/externalLibs/sound/riffwave.js',
+    // graphics
     '/externalLibs/graphics/gl-matrix.js',
-    '/externalLibs/graphics/webGLcurve.js',
-    '/externalLibs/graphics/webGLgraphics.js',
     '/externalLibs/graphics/webGLhi_graph.js',
-    '/externalLibs/graphics/webGLinitCurve.js',
+    '/externalLibs/graphics/webGLhi_graph_ce.js',
+    '/externalLibs/graphics/webGLgraphics.js',
+    '/externalLibs/graphics/webGLcurve.js',
     '/externalLibs/graphics/webGLrune.js',
-    '/externalLibs/graphics/webGLinit2D.js',
-    '/externalLibs/graphics/webGLinit3D.js',
+    // list visualizer
     '/externalLibs/visualizer/KineticJS.js',
     '/externalLibs/visualizer/visualizer.js',
   ];
@@ -37,5 +39,4 @@ function loadLibs() {
   }
 }
 
-// loadLibs(dependencies);
 loadLibs();

public/externalLibs/graphics/webGLinitCurve.js

@@ -1,4 +1,6 @@
 import { ActionCreator } from 'redux'
+
+import { ExternalLibraryName } from '../components/assessment/assessmentShape'
 import * as actionTypes from './actionTypes'
 
 /**
@@ -88,16 +90,26 @@ export const playgroundExternalSelect: ActionCreator<actionTypes.IAction> = (
   }
 })
 
+/**
+ * Clears the js-slang Context at a specified workspace location.
+ *
+ * @param chapter the SICP chapter for the context to be set in
+ * @param externals a list of symbols to be exposed from the global scope
+ * @param externalLibraryName the name of the external library used
+ * @param workspaceLocation the location of the workspace
+ */
 export const clearContext = (
   chapter: number,
   externals: string[],
+  externalLibraryName: ExternalLibraryName,
   workspaceLocation: WorkspaceLocation
 ) => ({
   type: actionTypes.CLEAR_CONTEXT,
   payload: {
-    workspaceLocation,
     chapter,
-    externals
+    externals,
+    externalLibraryName,
+    workspaceLocation
   }
 })
 

public/externalLibs/graphics/webGLrune.js

@@ -2,6 +2,7 @@ import { NonIdealState, Spinner, Text } from '@blueprintjs/core'
 import { IconNames } from '@blueprintjs/icons'
 import * as React from 'react'
 
+import { ExternalLibraryName } from '../../../components/assessment/assessmentShape'
 import GradingEditor from '../../../containers/academy/grading/GradingEditorContainer'
 import { InterpreterOutput } from '../../../reducers/states'
 import { history } from '../../../utils/history'
@@ -41,7 +42,11 @@ export type DispatchProps = {
   handleBrowseHistoryUp: () => void
   handleChangeActiveTab: (activeTab: number) => void
   handleChapterSelect: (chapter: any, changeEvent: any) => void
-  handleClearContext: (chapter: number, externals: string[]) => void
+  handleClearContext: (
+    chapter: number,
+    externals: string[],
+    externalLibraryName: ExternalLibraryName
+  ) => void
   handleEditorEval: () => void
   handleEditorValueChange: (val: string) => void
   handleEditorWidthChange: (widthChange: number) => void
@@ -56,11 +61,24 @@ export type DispatchProps = {
 }
 
 class GradingWorkspace extends React.Component<GradingWorkspaceProps> {
+  /**
+   * First, check for a need to reset the workspace,
+   * then fetch the grading. This works because a change in
+   * submissionId or questionId results in a navigation, causing
+   * this component to be mounted again. The handleGradingFetch
+   * occurs after the call to checkWorkspaceReset finishes.
+   */
   public componentDidMount() {
     this.checkWorkspaceReset(this.props)
     this.props.handleGradingFetch(this.props.submissionId)
   }
 
+  /**
+   * After the Grading is fetched, there is a check for wether the
+   * workspace needs to be udpated (a change in submissionId or questionId)
+   */
+  public componentDidUpdate() {}
+
   public render() {
     if (this.props.grading === undefined) {
       return (
@@ -133,10 +151,11 @@ class GradingWorkspace extends React.Component<GradingWorkspaceProps> {
       this.props.storedQuestionId !== questionId
     ) {
       const chapter = this.props.grading[questionId].question.library.chapter
+      const externalName = this.props.grading[questionId].question.library.externalLibraryName
       const externals = this.props.grading[questionId].question.library.externals
       this.props.handleUpdateCurrentSubmissionId(submissionId, questionId)
       this.props.handleResetWorkspace()
-      this.props.handleClearContext(chapter, externals)
+      this.props.handleClearContext(chapter, externals, externalName)
     }
   }
 

public/externalLibs/index.js

@@ -10,6 +10,7 @@ import Workspace, { WorkspaceProps } from '../workspace'
 import { ControlBarProps } from '../workspace/ControlBar'
 import { SideContentProps } from '../workspace/side-content'
 import {
+  ExternalLibraryName,
   IAssessment,
   IMCQQuestion,
   IProgrammingQuestion,
@@ -44,7 +45,11 @@ export type DispatchProps = {
   handleBrowseHistoryUp: () => void
   handleChangeActiveTab: (activeTab: number) => void
   handleChapterSelect: (chapter: any, changeEvent: any) => void
-  handleClearContext: (chapter: number, externals: string[]) => void
+  handleClearContext: (
+    chapter: number,
+    externals: string[],
+    externalLibraryName: ExternalLibraryName
+  ) => void
   handleEditorEval: () => void
   handleEditorValueChange: (val: string) => void
   handleEditorWidthChange: (widthChange: number) => void
@@ -63,9 +68,15 @@ class AssessmentWorkspace extends React.Component<
 > {
   public state = { showOverlay: false }
 
+  /**
+   * First, check for a need to reset the workspace,
+   * then fetch the assessment. This works because a change in
+   * assessmentId or questionId results in a navigation, causing
+   * this component to be mounted again. The handleAssessmentFetch
+   * occurs after the call to checkWorkspaceReset finishes.
+   */
   public componentDidMount() {
     this.checkWorkspaceReset(this.props)
-    /* Load assessment if it isn't passed as a prop. */
     this.props.handleAssessmentFetch(this.props.assessmentId)
     if (this.props.questionId === 0) {
       this.setState({ showOverlay: true })
@@ -158,10 +169,11 @@ class AssessmentWorkspace extends React.Component<
       this.props.storedQuestionId !== questionId
     ) {
       const chapter = this.props.assessment.questions[questionId].library.chapter
+      const externalName = this.props.assessment.questions[questionId].library.externalLibraryName
       const externals = this.props.assessment.questions[questionId].library.externals
       this.props.handleUpdateCurrentAssessmentId(assessmentId, questionId)
       this.props.handleResetWorkspace()
-      this.props.handleClearContext(chapter, externals)
+      this.props.handleClearContext(chapter, externals, externalName)
     }
   }