rotations added

css/main.css

@@ -571,6 +571,18 @@ label {
 #contextMenu li:hover{
     background-color: #aaa;
 }
+#contextMenu li.divider{
+    height:2px;
+}
+
+#contextMenu li>a{
+    padding:6px 9px;
+    line-height:1.429;
+    color: #e1e4e7;
+    display: block;
+    font-weight:400;
+    white-space: nowrap;
+}
 
 #contextMenu ul {
     padding: 2px 0 2px 0;

js/cells/DMACell.js

@@ -115,6 +115,22 @@ define(['underscore', 'three', 'threeModel', 'lattice', 'appState', 'globals', '
         return this.object3D.position.clone();
     };
 
+    DMACell.prototype.rotateX = function(){
+        this.object3D.rotateX(Math.PI/2);
+    };
+
+    DMACell.prototype.rotateY = function(){
+        this.object3D.rotateY(Math.PI/2);
+    };
+
+    DMACell.prototype.rotateZ = function(){
+        this.object3D.rotateZ(Math.PI/2);
+    };
+
+    DMACell.prototype.getRotation = function(){
+        return this.object3D.rotation;
+    };
+
     DMACell.prototype.getOrientation = function(){
         return this.object3D.quaternion.clone();
     };

js/highlighter/Highlighter.js

@@ -199,6 +199,10 @@ define(['underscore', 'backbone', 'threeModel', 'appState', 'lattice', 'cell', '
             return this.highlightedObject && this.highlightedObject instanceof Arrow;
         },
 
+        highlightingCell: function(){
+            return this.highlightedObject && this.highlightedObject instanceof DMACell;
+        },
+
         adjustSelection3D: function(){
             if (!globals.get("selection3D")){
                 return;

js/main.js

@@ -31,6 +31,7 @@ require.config({
         fillGeometry: 'three/FillGeometry',
         selection3D: 'three/Selection3D',
         axes: 'three/Axes',
+        axesClass: 'three/AxesClass',
         arrow: 'three/Arrow',
         svgRenderer: '../dependencies/SVGRenderer',
         threeProjector: '../dependencies/Projector',
@@ -89,6 +90,7 @@ require.config({
         menuParent: 'menus/MenuParentView',
         emSetupMenu: 'menus/EmSetupMenuView',
         emRunMenu: 'menus/EmRunMenuView',
+        cellContextMenu: 'menus/contextMenu/CellContextMenu',
 
         //simulation
         glBoilerplate: "simulation/GLBoilerplate",

js/menus/contextMenu/CellContextMenu.html

+<ul>
+    <li><a href="#" data-axis="x" class="rotateCell">Rotate X (Red)</a></li>
+    <li><a href="#" data-axis="y" class="rotateCell">Rotate Y (Blue)</a></li>
+    <li><a href="#" data-axis="z" class="rotateCell">Rotate Z (Green)</a></li>
+    <li class="divider"></li>
+    <li><a href="#" id="deleteCell">Delete Cell</a></li>
+</ul>
\ No newline at end of file

js/menus/contextMenu/CellContextMenu.js

+/**
+ * Created by ghassaei on 5/26/16.
+ */
+
+define(['jquery', 'underscore', 'backbone', 'text!menus/contextMenu/CellContextMenu.html', 'appState', 'threeModel', 'axesClass'],
+    function($, _, Backbone, template, appState, three, AxesClass){
+
+    var cellAxesVis = new AxesClass(0.1, 0.4);
+
+    var $wrapper = $("#contextMenuWrapper");
+
+    var ContextMenu = Backbone.View.extend({
+
+        el: '#contextMenu',
+
+        events: {
+            "click .rotateCell":                      "_rotateCell",
+            "click #deleteCell":                      "_deleteCell"
+        },
+
+        cell: null,
+
+        initialize: function(){
+        },
+
+        render: function(cell){
+            this.selectCell(cell);
+            var templateJSON = {};
+            this.$el.html(_.template(template)(templateJSON));
+            this.showMenu(appState.mousePosition);
+        },
+
+        showMenu: function(position){
+            var padding = parseInt($wrapper.css("padding"));
+            var left = position.x-padding;
+            if ($('body').width()-200 < left) left -= 200;
+            $wrapper.css({left:left, top: position.y-padding});
+            $wrapper.show();
+        },
+
+        hideMenu: function(){
+            $wrapper.hide();
+            this.deselectCell();
+        },
+
+        selectCell: function(cell){
+            this.cell = cell;
+            cellAxesVis.setVisibility(true);
+            cellAxesVis.setPosition(this.cell.getPosition());
+            cellAxesVis.setRotation(this.cell.getRotation());
+            three.render();
+        },
+
+        deselectCell: function(){
+            this.cell = null;
+            cellAxesVis.setVisibility(false);
+            three.render();
+        },
+
+        _rotateCell: function(e){
+            e.preventDefault();
+            var axis = $(e.target).data("axis");
+            if (axis == "x") this.cell.rotateX();
+            else if (axis == "y") this.cell.rotateY();
+            else if (axis == "z") this.cell.rotateZ();
+            else console.warn("unknown axis " + axis);
+            cellAxesVis.setRotation(this.cell.getRotation());
+            three.render();
+        },
+
+        _deleteCell: function(e){
+            e.preventDefault();
+            var cell = this.cell;
+            require(["lattice"], function(lattice){
+                lattice.removeCell(cell);
+            });
+            this.hideMenu();
+        }
+
+    });
+
+    var contextMenu = new ContextMenu();
+
+    $wrapper.mouseleave(function(){
+        contextMenu.hideMenu();
+    });
+
+    return contextMenu;
+
+});
\ No newline at end of file

js/three/Arrow.js

@@ -24,7 +24,7 @@ define(['three', 'threeModel'], function(THREE, three){
         object3D.add(xAxisMesh);
         object3D.myParent = this;
         this.object3D = object3D;
-        xArrowMesh.scale.set(diameter, 1, diameter);
+        xArrowMesh.scale.set(diameter, diameter, diameter);
         xAxisMesh.scale.set(diameter, 1, diameter);
 
         if (position) this.setPosition(position);

js/three/Axes.js

@@ -3,29 +3,10 @@
  */
 
 
-define(['three', 'threeModel', 'arrow'], function(THREE, three, Arrow){
+//global axes
 
-    var xAxisMaterial = new THREE.MeshBasicMaterial({color: 0xFF0000});
-    var yAxisMaterial = new THREE.MeshBasicMaterial({color: 0x00FF00});
-    var zAxisMaterial = new THREE.MeshBasicMaterial({color: 0x0000FF});
-
-    var axesMesh = new THREE.Object3D();
-    var xAxis = new Arrow(new THREE.Vector3(1,0,0), 0.5, 7, xAxisMaterial);
-    var yAxis = new Arrow(new THREE.Vector3(0,1,0), 0.5, 7, yAxisMaterial);
-    var zAxis = new Arrow(new THREE.Vector3(0,0,1), 0.5, 7, zAxisMaterial);
-    axesMesh.add(xAxis.getObject3D());
-    axesMesh.add(yAxis.getObject3D());
-    axesMesh.add(zAxis.getObject3D());
-    three.secondPassSceneAdd(axesMesh);
-    setVisibility(false);
-
-
-    function setVisibility(visible){
-        axesMesh.visible = visible;
-    }
-
-    return {
-        setVisibility: setVisibility
-    }
+define(['axesClass'], function(AxesClass){
 
+    var globalAxes = new AxesClass(0.5, 7);
+    return globalAxes;
 });
\ No newline at end of file

js/three/AxesClass.js

+/**
+ * Created by ghassaei on 5/26/16.
+ */
+
+
+define(['three', "arrow", 'threeModel'], function(THREE, Arrow, three){
+
+    var xAxisMaterial = new THREE.MeshBasicMaterial({color: 0xFF0000});
+    var yAxisMaterial = new THREE.MeshBasicMaterial({color: 0x00FF00});
+    var zAxisMaterial = new THREE.MeshBasicMaterial({color: 0x0000FF});
+
+    function AxesClass(diameter, length){
+        this.object3D = new THREE.Object3D();
+        var xAxis = new Arrow(new THREE.Vector3(1,0,0), diameter, length, xAxisMaterial);
+        var yAxis = new Arrow(new THREE.Vector3(0,1,0), diameter, length, yAxisMaterial);
+        var zAxis = new Arrow(new THREE.Vector3(0,0,1), diameter, length, zAxisMaterial);
+        this.object3D.add(xAxis.getObject3D());
+        this.object3D.add(yAxis.getObject3D());
+        this.object3D.add(zAxis.getObject3D());
+        three.secondPassSceneAdd(this.object3D);
+        this.setVisibility(false);
+    }
+
+    AxesClass.prototype.setVisibility = function(visible){
+        this.object3D.visible = visible;
+    };
+
+    AxesClass.prototype.setPosition = function(position){
+        this.object3D.position.set(position.x, position.y, position.z);
+    };
+
+    AxesClass.prototype.setRotation = function(rotation){
+        this.object3D.rotation.set(rotation.x, rotation.y, rotation.z);
+    };
+
+    AxesClass.prototype.destroy = function(){
+        three.secondPassSceneRemove(this.object3D);
+    };
+
+    return AxesClass;
+});
\ No newline at end of file

js/three/ThreeView.js

@@ -84,19 +84,7 @@ define(['underscore', 'backbone', 'three', 'appState', 'globals', 'lattice', 'or
         },
 
         _mouseUp: function(e){
-            switch (e.which) {
-                case 1:
-                    this.leftClick = false;
-                    break;
-                case 2:
-                    //middle
-                    break;
-                case 3:
-                    this.rightClick = false;
-                    break;
-                default:
-                    break;
-            }
+
             if (appState.get("currentTab") == "emBoundaryCond"){
                 var position = globals.get("highlighter").getHighlightedObjectPosition();
                 if (position){
@@ -109,11 +97,33 @@ define(['underscore', 'backbone', 'three', 'appState', 'globals', 'lattice', 'or
                 }
             }
             //if (this.currentIntersectedPart) this.currentIntersectedPart.removeFromCell();
-            globals.get("highlighter").addRemoveVoxel(!appState.get("deleteMode"));
-            if (globals.get("highlighter").highlightingArrow()) {
-                this.controls.noRotate = false;
-                this.controls.noPan = false;
-                this.controls.noZoom = false;
+            var highlighter = globals.get("highlighter");
+            if (this.rightClick && !this.leftClick){
+                if (highlighter.highlightingCell()){
+                    require(['cellContextMenu'], function(cellContextMenu){
+                        cellContextMenu.render(highlighter.highlightedObject);
+                    });
+                }
+            } else if (this.leftClick && !this.rightClick) {
+                highlighter.addRemoveVoxel(!appState.get("deleteMode"));
+                if (highlighter.highlightingArrow()) {
+                    this.controls.noRotate = false;
+                    this.controls.noPan = false;
+                    this.controls.noZoom = false;
+                }
+            }
+            switch (e.which) {
+                case 1:
+                    this.leftClick = false;
+                    break;
+                case 2:
+                    //middle
+                    break;
+                case 3:
+                    this.rightClick = false;
+                    break;
+                default:
+                    break;
             }
         },