Add "figure mode" button [WIP]

emperor/support_files/js/controller.js

@@ -266,6 +266,25 @@ define([
     });
     this.$plotSpace.append(this.$optionsButton);
 
+    /**
+     * @type {Node}
+     * jQuery object
+     */
+    this.$figureModeButton = $('<button name="dm-button">&nbsp;</button>');
+    this.$figureModeButton.css({
+      'position': 'absolute',
+      'z-index': '3',
+      'top': '5px',
+      'right': '40px'
+    }).attr('title', 'Figure Mode').on('click', function(event) {
+        scope.controllers.axes.updateVisibleAxes(null, 2);
+        scope.controllers.axes._colorChanged("axes-color", "#000000");
+        scope.controllers.axes._colorChanged("background-color", "#ffffff");
+        scope.controllers.shape.makeEverythingACircle();
+        // TODO: fix axis labels
+    });
+    this.$plotSpace.append(this.$figureModeButton);
+
     // default decomposition view uses the full window
     this.addSceneView();
 
@@ -274,6 +293,9 @@ define([
       scope.$optionsButton.button({text: false,
                                    icons: {primary: ' ui-icon-gear'}});
 
+      scope.$figureModeButton.button({text: false,
+                                      icons: {primary: ' ui-icon-lightbulb'}});
+
       scope._buildUI();
       // Hide the loading splashscreen
       scope.$divId.find('.loading').hide();

emperor/support_files/js/shape-controller.js

@@ -106,6 +106,30 @@ define([
     });
   };
 
+  /**
+   *
+   * Analogue of _resetAttribute() above, but makes everything a circle instead
+   *
+   * NOTE: In the future, making this pay more close attention to the current
+   * shapes of each object (like how DecompositionView._buildVegaSpec() works)
+   * may be preferable. However, that may require adding more 2D shape options
+   * to Emperor.
+   *
+   * @extends EmperorAttributeABC
+   *
+   */
+  ShapeController.prototype.makeEverythingACircle = function() {
+    EmperorAttributeABC.prototype._resetAttribute.call(this);
+    var scope = this;
+
+    _.each(this.decompViewDict, function(view) {
+      scope.setPlottableAttributes(view, 'Circle', view.decomp.plottable);
+      view.needsUpdate = true;
+    });
+  };
+
+
+
   /**
    * Helper function to set the shape of plottable
    *

emperor/support_files/js/shapes.js

@@ -3,12 +3,12 @@
 // shapes.
 define(['jquery', 'three', 'underscore'], function($, THREE, _) {
 
-  var SPHERE = 'Sphere', SQUARE = 'Square', CONE = 'Cone',
+  var SPHERE = 'Sphere', CIRCLE = 'Circle', SQUARE = 'Square', CONE = 'Cone',
       ICOSAHEDRON = 'Icosahedron', CYLINDER = 'Cylinder',
       OCTAHEDRON = 'Diamond', RING = 'Ring', STAR = 'Star';
 
-  var shapes = [SPHERE, OCTAHEDRON, CONE, CYLINDER, RING, SQUARE, ICOSAHEDRON,
-                STAR];
+  var shapes = [SPHERE, CIRCLE, OCTAHEDRON, CONE, CYLINDER, RING, SQUARE,
+                ICOSAHEDRON, STAR];
 
   /**
    *
@@ -35,6 +35,10 @@ define(['jquery', 'three', 'underscore'], function($, THREE, _) {
     switch (shapeName) {
       case SPHERE:
         return new THREE.SphereGeometry(factor, 8, 8);
+      case CIRCLE:
+        geom = new THREE.CircleGeometry(factor, 16);
+        geom.rotateX(0.3);
+        return geom;
       case SQUARE:
         geom = new THREE.PlaneGeometry(factor * 2, factor * 2, 2, 2);
         geom.rotateX(0.3);

emperor/support_files/js/view.js

@@ -1221,6 +1221,7 @@ DecompositionView.prototype._buildVegaSpec = function() {
   // Maps THREE.js geometries to vega shapes
   var getShape = {
     Sphere: 'circle',
+    Circle: 'circle',
     Diamond: 'diamond',
     Cone: 'triangle-down',
     Cylinder: 'square',

tests/javascript_tests/test_shape_controller.js

@@ -19,8 +19,9 @@ requirejs([
     module('Shape Controller', {
       setup: function() {
         // setup function
-        this.shapesAvailable = ['Sphere', 'Diamond', 'Cone', 'Cylinder',
-                                'Ring', 'Square', 'Icosahedron', 'Star'];
+        this.shapesAvailable = ['Sphere', 'Circle', 'Diamond', 'Cone',
+                                'Cylinder', 'Ring', 'Square', 'Icosahedron',
+                                'Star'];
         this.sharedDecompositionViewDict = {};
 
         var UIState1 = new UIState();