From ebbf967749b03f58874bcb487345719731b88b9c Mon Sep 17 00:00:00 2001 From: Marcus Fedarko Date: Sat, 23 May 2020 00:20:51 -0700 Subject: [PATCH 1/6] ENH: Add initial "display mode" btn #753 --- emperor/support_files/js/controller.js | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/emperor/support_files/js/controller.js b/emperor/support_files/js/controller.js index d9e56417..a83b6615 100644 --- a/emperor/support_files/js/controller.js +++ b/emperor/support_files/js/controller.js @@ -266,6 +266,24 @@ define([ }); this.$plotSpace.append(this.$optionsButton); + /** + * @type {Node} + * jQuery object + */ + this.$displayModeButton = $(''); + this.$displayModeButton.css({ + 'position': 'absolute', + 'z-index': '3', + 'top': '5px', + 'right': '40px' + }).attr('title', 'Display 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"); + // TODO: show circles instead of spheres; fix axis labels + }); + this.$plotSpace.append(this.$displayModeButton); + // default decomposition view uses the full window this.addSceneView(); @@ -274,6 +292,9 @@ define([ scope.$optionsButton.button({text: false, icons: {primary: ' ui-icon-gear'}}); + scope.$displayModeButton.button({text: false, + icons: {primary: ' ui-icon-star'}}); + scope._buildUI(); // Hide the loading splashscreen scope.$divId.find('.loading').hide(); From 2a706b1346fc78a6ecda86bd583688cdf3b7a1f8 Mon Sep 17 00:00:00 2001 From: Marcus Fedarko Date: Sat, 23 May 2020 00:39:47 -0700 Subject: [PATCH 2/6] ENH: Add circle glyph support - close #604 huh --- emperor/support_files/js/controller.js | 3 ++- emperor/support_files/js/shape-controller.js | 19 +++++++++++++++++++ emperor/support_files/js/shapes.js | 10 +++++++--- emperor/support_files/js/view.js | 1 + 4 files changed, 29 insertions(+), 4 deletions(-) diff --git a/emperor/support_files/js/controller.js b/emperor/support_files/js/controller.js index a83b6615..911aff39 100644 --- a/emperor/support_files/js/controller.js +++ b/emperor/support_files/js/controller.js @@ -280,7 +280,8 @@ define([ scope.controllers.axes.updateVisibleAxes(null, 2); scope.controllers.axes._colorChanged("axes-color", "#000000"); scope.controllers.axes._colorChanged("background-color", "#ffffff"); - // TODO: show circles instead of spheres; fix axis labels + scope.controllers.shape.makeEverythingACircle(); + // TODO: fix axis labels }); this.$plotSpace.append(this.$displayModeButton); diff --git a/emperor/support_files/js/shape-controller.js b/emperor/support_files/js/shape-controller.js index 03aef5eb..57dbb6f7 100644 --- a/emperor/support_files/js/shape-controller.js +++ b/emperor/support_files/js/shape-controller.js @@ -106,6 +106,25 @@ define([ }); }; + /** + * + * haha circle go brrrrr + * + * @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 * diff --git a/emperor/support_files/js/shapes.js b/emperor/support_files/js/shapes.js index a976efb6..97d4824c 100644 --- a/emperor/support_files/js/shapes.js +++ b/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); diff --git a/emperor/support_files/js/view.js b/emperor/support_files/js/view.js index 2ce67545..c5be14bb 100644 --- a/emperor/support_files/js/view.js +++ b/emperor/support_files/js/view.js @@ -1084,6 +1084,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', From aa4b1e495a83a7f9072747e6dbd4ec0178b2e006 Mon Sep 17 00:00:00 2001 From: Marcus Fedarko Date: Sat, 23 May 2020 00:41:10 -0700 Subject: [PATCH 3/6] DOC: "display mode" -> "figure mode" --- emperor/support_files/js/controller.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/emperor/support_files/js/controller.js b/emperor/support_files/js/controller.js index 911aff39..6aff19d3 100644 --- a/emperor/support_files/js/controller.js +++ b/emperor/support_files/js/controller.js @@ -270,8 +270,8 @@ define([ * @type {Node} * jQuery object */ - this.$displayModeButton = $(''); - this.$displayModeButton.css({ + this.$figureModeButton = $(''); + this.$figureModeButton.css({ 'position': 'absolute', 'z-index': '3', 'top': '5px', @@ -283,7 +283,7 @@ define([ scope.controllers.shape.makeEverythingACircle(); // TODO: fix axis labels }); - this.$plotSpace.append(this.$displayModeButton); + this.$plotSpace.append(this.$figureModeButton); // default decomposition view uses the full window this.addSceneView(); @@ -293,8 +293,8 @@ define([ scope.$optionsButton.button({text: false, icons: {primary: ' ui-icon-gear'}}); - scope.$displayModeButton.button({text: false, - icons: {primary: ' ui-icon-star'}}); + scope.$figureModeButton.button({text: false, + icons: {primary: ' ui-icon-lightbulb'}}); scope._buildUI(); // Hide the loading splashscreen From 9ae4f6c40c18c9b234c2810cf20852ab3d82c7b2 Mon Sep 17 00:00:00 2001 From: Marcus Fedarko Date: Sat, 23 May 2020 00:42:46 -0700 Subject: [PATCH 4/6] DOC: fix figure mode tooltip --- emperor/support_files/js/controller.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/emperor/support_files/js/controller.js b/emperor/support_files/js/controller.js index 6aff19d3..24229a0f 100644 --- a/emperor/support_files/js/controller.js +++ b/emperor/support_files/js/controller.js @@ -276,7 +276,7 @@ define([ 'z-index': '3', 'top': '5px', 'right': '40px' - }).attr('title', 'Display Mode').on('click', function(event) { + }).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"); From 9c4b5dc1549d243d3d80fbd94bb54e6b8393a4be Mon Sep 17 00:00:00 2001 From: Marcus Fedarko Date: Sat, 23 May 2020 00:48:20 -0700 Subject: [PATCH 5/6] TST: Un-break shape controller test --- tests/javascript_tests/test_shape_controller.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/tests/javascript_tests/test_shape_controller.js b/tests/javascript_tests/test_shape_controller.js index 7cb0e617..1e76500e 100644 --- a/tests/javascript_tests/test_shape_controller.js +++ b/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(); From d1037fe10c4fb70a66d87101800243db439787e0 Mon Sep 17 00:00:00 2001 From: Marcus Fedarko Date: Sat, 30 May 2020 14:34:04 -0700 Subject: [PATCH 6/6] DOC: add ...more informative docs for circle func --- emperor/support_files/js/shape-controller.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/emperor/support_files/js/shape-controller.js b/emperor/support_files/js/shape-controller.js index 57dbb6f7..a6fafe88 100644 --- a/emperor/support_files/js/shape-controller.js +++ b/emperor/support_files/js/shape-controller.js @@ -108,7 +108,12 @@ define([ /** * - * haha circle go brrrrr + * 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 *