Merge pull request #2854 from Atlante45/mouse_handling_in_editModels

Mouse handling in edit models

examples/editModels.js

@@ -9,11 +9,16 @@
 //  See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
 //
 
+Script.include("toolBars.js");
+
 var windowDimensions = Controller.getViewportDimensions();
+var toolIconUrl = "http://highfidelity-public.s3-us-west-1.amazonaws.com/images/tools/";
+var toolHeight = 50;
+var toolWidth = 50;
 
 var LASER_WIDTH = 4;
 var LASER_COLOR = { red: 255, green: 0, blue: 0 };
-var LASER_LENGTH_FACTOR = 1.5;
+var LASER_LENGTH_FACTOR = 5;
 
 var LEFT = 0;
 var RIGHT = 1;
@@ -33,24 +38,7 @@ var modelURLs = [
                  "http://highfidelity-public.s3-us-west-1.amazonaws.com/meshes/slimer.fbx",
                  ];
 
-var toolIconUrl = "http://highfidelity-public.s3-us-west-1.amazonaws.com/images/tools/";
+var toolBar;
-var numberOfTools = 1;
-var toolHeight = 50;
-var toolWidth = 50;
-var toolVerticalSpacing = 4;
-var toolsHeight = toolHeight * numberOfTools + toolVerticalSpacing * (numberOfTools - 1);
-var toolsX = windowDimensions.x - 8 - toolWidth;
-var toolsY = (windowDimensions.y - toolsHeight) / 2;
-
-
-var firstModel = Overlays.addOverlay("image", {
-                                     x: 0, y: 0, width: toolWidth, height: toolHeight,
-                                     subImage: { x: 0, y: toolHeight, width: toolWidth, height: toolHeight },
-                                     imageURL: toolIconUrl + "voxel-tool.svg",
-                                     x: toolsX, y: toolsY + ((toolHeight + toolVerticalSpacing) * 0), width: toolWidth, height: toolHeight,
-                                     visible: true,
-                                     alpha: 0.9
-                                     });
 
 function controller(wichSide) {
     this.side = wichSide;
@@ -206,6 +194,13 @@ function controller(wichSide) {
                              });
     }
     
+    this.hideLaser = function() {
+        Overlays.editOverlay(this.laser, { visible: false });
+        Overlays.editOverlay(this.ball, { visible: false });
+        Overlays.editOverlay(this.leftRight, { visible: false });
+        Overlays.editOverlay(this.topDown, { visible: false });
+    }
+    
     this.moveModel = function () {
         if (this.grabbing) {
             var newPosition = Vec3.sum(this.palmPosition,
@@ -345,67 +340,272 @@ function moveModels() {
     rightController.moveModel();
 }
 
+var hydraConnected = false;
 function checkController(deltaTime) {
     var numberOfButtons = Controller.getNumberOfButtons();
     var numberOfTriggers = Controller.getNumberOfTriggers();
     var numberOfSpatialControls = Controller.getNumberOfSpatialControls();
     var controllersPerTrigger = numberOfSpatialControls / numberOfTriggers;
-
-    moveOverlays();
     
     // this is expected for hydras
-    if (!(numberOfButtons==12 && numberOfTriggers == 2 && controllersPerTrigger == 2)) {
+    if (numberOfButtons==12 && numberOfTriggers == 2 && controllersPerTrigger == 2) {
-        //print("no hydra connected?");
+        if (!hydraConnected) {
-        return; // bail if no hydra
+            hydraConnected = true;
+        }
+        
+        leftController.update();
+        rightController.update();
+        moveModels();
+    } else {
+        if (hydraConnected) {
+            hydraConnected = false;
+            
+            leftController.hideLaser();
+            rightController.hideLaser();
+        }
     }
     
-    leftController.update();
+    moveOverlays();
-    rightController.update();
+}
-    moveModels();
+
+
+
+function initToolBar() {
+    toolBar = new ToolBar(0, 0, ToolBar.VERTICAL);
+    // New Model
+    newModel = toolBar.addTool({
+                               imageURL: toolIconUrl + "voxel-tool.svg",
+                               subImage: { x: 0, y: Tool.IMAGE_WIDTH, width: Tool.IMAGE_WIDTH, height: Tool.IMAGE_HEIGHT },
+                               width: toolWidth, height: toolHeight,
+                               visible: true,
+                               alpha: 0.9
+                               });
 }
 
 function moveOverlays() {
-    windowDimensions = Controller.getViewportDimensions();
+    if (typeof(toolBar) === 'undefined') {
-    
+        initToolBar();
-    toolsX = windowDimensions.x - 8 - toolWidth;
+        
-    toolsY = (windowDimensions.y - toolsHeight) / 2;
+    } else if (windowDimensions.x == Controller.getViewportDimensions().x &&
-    
+               windowDimensions.y == Controller.getViewportDimensions().y) {
-    Overlays.editOverlay(firstModel, {
-                        x: toolsX, y: toolsY + ((toolHeight + toolVerticalSpacing) * 0), width: toolWidth, height: toolHeight,
-                        });
-}
-
-function mousePressEvent(event) {
-    var clickedOverlay = Overlays.getOverlayAtPoint({x: event.x, y: event.y});
-    var url;
-    
-    if (clickedOverlay == firstModel) {
-        url = Window.prompt("Model url", modelURLs[Math.floor(Math.random() * modelURLs.length)]);
-        if (url == null) {
-            return;        }
-    } else {
-        print("Didn't click on anything");
         return;
     }
     
-    var position = Vec3.sum(MyAvatar.position, Vec3.multiply(Quat.getFront(MyAvatar.orientation), SPAWN_DISTANCE));
+    
-    Models.addModel({ position: position,
+    windowDimensions = Controller.getViewportDimensions();
-                    radius: radiusDefault,
+    var toolsX = windowDimensions.x - 8 - toolBar.width;
-                    modelURL: url
+    var toolsY = (windowDimensions.y - toolBar.height) / 2;
-                    });
+    
+    toolBar.move(toolsX, toolsY);
+}
+
+
+
+var modelSelected = false;
+var selectedModelID;
+var selectedModelProperties;
+var mouseLastPosition;
+var orientation;
+var intersection;
+
+
+var SCALE_FACTOR = 200.0;
+var TRANSLATION_FACTOR = 100.0;
+var ROTATION_FACTOR = 100.0;
+
+function rayPlaneIntersection(pickRay, point, normal) {
+    var d = -Vec3.dot(point, normal);
+    var t = -(Vec3.dot(pickRay.origin, normal) + d) / Vec3.dot(pickRay.direction, normal);
+    
+    return Vec3.sum(pickRay.origin, Vec3.multiply(pickRay.direction, t));
+}
+
+function mousePressEvent(event) {
+    mouseLastPosition = { x: event.x, y: event.y };
+    modelSelected = false;
+    var clickedOverlay = Overlays.getOverlayAtPoint({x: event.x, y: event.y});
+    
+    if (newModel == toolBar.clicked(clickedOverlay)) {
+        var url = Window.prompt("Model url", modelURLs[Math.floor(Math.random() * modelURLs.length)]);
+        if (url == null) {
+            return;
+        }
+        
+        var position = Vec3.sum(MyAvatar.position, Vec3.multiply(Quat.getFront(MyAvatar.orientation), SPAWN_DISTANCE));
+        Models.addModel({ position: position,
+                        radius: radiusDefault,
+                        modelURL: url
+                        });
+        
+    } else {
+        var pickRay = Camera.computePickRay(event.x, event.y);
+        Vec3.print("[Mouse] Looking at: ", pickRay.origin);
+        var foundModels = Models.findModels(pickRay.origin, LASER_LENGTH_FACTOR);
+        for (var i = 0; i < foundModels.length; i++) {
+            if (!foundModels[i].isKnownID) {
+                var identify = Models.identifyModel(foundModels[i]);
+                if (!identify.isKnownID) {
+                    print("Unknown ID " + identify.id + "(update loop)");
+                    continue;
+                }
+                foundModels[i] = identify;
+            }
+            
+            var properties = Models.getModelProperties(foundModels[i]);
+            print("Checking properties: " + properties.id + " " + properties.isKnownID);
+            
+            //                P         P - Model
+            //               /|         A - Palm
+            //              / | d       B - unit vector toward tip
+            //             /  |         X - base of the perpendicular line
+            //            A---X----->B  d - distance fom axis
+            //              x           x - distance from A
+            //
+            //            |X-A| = (P-A).B
+            //            X == A + ((P-A).B)B
+            //            d = |P-X|
+            
+            var A = pickRay.origin;
+            var B = Vec3.normalize(pickRay.direction);
+            var P = properties.position;
+            
+            var x = Vec3.dot(Vec3.subtract(P, A), B);
+            var X = Vec3.sum(A, Vec3.multiply(B, x));
+            var d = Vec3.length(Vec3.subtract(P, X));
+            
+            if (d < properties.radius && 0 < x && x < LASER_LENGTH_FACTOR) {
+                modelSelected = true;
+                selectedModelID = foundModels[i];
+                selectedModelProperties = properties;
+                
+                selectedModelProperties.oldRadius = selectedModelProperties.radius;
+                selectedModelProperties.oldPosition = {
+                x: selectedModelProperties.position.x,
+                y: selectedModelProperties.position.y,
+                z: selectedModelProperties.position.z,
+                };
+                selectedModelProperties.oldRotation = {
+                x: selectedModelProperties.modelRotation.x,
+                y: selectedModelProperties.modelRotation.y,
+                z: selectedModelProperties.modelRotation.z,
+                w: selectedModelProperties.modelRotation.w,
+                };
+                
+                
+                orientation = MyAvatar.orientation;
+                intersection = rayPlaneIntersection(pickRay, P, Quat.getFront(orientation));
+                print("Clicked on " + selectedModelID.id + " " +  modelSelected);
+                
+                return;
+            }
+        }
+    }
+}
+
+var oldModifier = 0;
+var modifier = 0;
+var wasShifted = false;
+function mouseMoveEvent(event)  {
+    if (!modelSelected) {
+        return;
+    }
+    
+    if (event.isLeftButton) {
+        if (event.isRightButton) {
+            modifier = 1; // Scale
+        } else {
+            modifier = 2; // Translate
+        }
+    } else if (event.isRightButton) {
+        modifier = 3; // rotate
+    } else {
+        modifier = 0;
+    }
+    
+    var pickRay = Camera.computePickRay(event.x, event.y);
+    if (wasShifted != event.isShifted || modifier != oldModifier) {
+        selectedModelProperties.oldRadius = selectedModelProperties.radius;
+        
+        selectedModelProperties.oldPosition = {
+        x: selectedModelProperties.position.x,
+        y: selectedModelProperties.position.y,
+        z: selectedModelProperties.position.z,
+        };
+        selectedModelProperties.oldRotation = {
+        x: selectedModelProperties.modelRotation.x,
+        y: selectedModelProperties.modelRotation.y,
+        z: selectedModelProperties.modelRotation.z,
+        w: selectedModelProperties.modelRotation.w,
+        };
+        orientation = MyAvatar.orientation;
+        intersection = rayPlaneIntersection(pickRay,
+                                            selectedModelProperties.oldPosition,
+                                            Quat.getFront(orientation));
+        
+        mouseLastPosition = { x: event.x, y: event.y };
+        wasShifted = event.isShifted;
+        oldModifier = modifier;
+        return;
+    }
+    
+    
+    switch (modifier) {
+        case 0:
+            return;
+        case 1:
+            // Let's Scale
+            selectedModelProperties.radius = (selectedModelProperties.oldRadius *
+                                              (1.0 + (mouseLastPosition.y - event.y) / SCALE_FACTOR));
+            
+            if (selectedModelProperties.radius < 0.01) {
+                print("Scale too small ... bailling.");
+                return;
+            }
+            break;
+            
+        case 2:
+            // Let's translate
+            var newIntersection = rayPlaneIntersection(pickRay,
+                                                       selectedModelProperties.oldPosition,
+                                                       Quat.getFront(orientation));
+            var vector = Vec3.subtract(newIntersection, intersection)
+            if (event.isShifted) {
+                var i = Vec3.dot(vector, Quat.getRight(orientation));
+                var j = Vec3.dot(vector, Quat.getUp(orientation));
+                vector = Vec3.sum(Vec3.multiply(Quat.getRight(orientation), i),
+                                  Vec3.multiply(Quat.getFront(orientation), j));
+            }
+            
+            selectedModelProperties.position = Vec3.sum(selectedModelProperties.oldPosition, vector);
+            break;
+        case 3:
+            // Let's rotate
+            var rotation = Quat.fromVec3Degrees({ x: event.y - mouseLastPosition.y, y: event.x - mouseLastPosition.x, z: 0 });
+            if (event.isShifted) {
+                rotation = Quat.fromVec3Degrees({ x: event.y - mouseLastPosition.y, y: 0, z: mouseLastPosition.x - event.x });
+            }
+            
+            var newRotation = Quat.multiply(orientation, rotation);
+            newRotation = Quat.multiply(newRotation, Quat.inverse(orientation));
+            
+            selectedModelProperties.modelRotation = Quat.multiply(newRotation, selectedModelProperties.oldRotation);
+            break;
+    }
+    
+    Models.editModel(selectedModelID, selectedModelProperties);
 }
 
 function scriptEnding() {
     leftController.cleanup();
     rightController.cleanup();
-    
+    toolBar.cleanup();
-    Overlays.deleteOverlay(firstModel);
 }
 Script.scriptEnding.connect(scriptEnding);
 
 // register the call back so it fires before each data send
 Script.update.connect(checkController);
 Controller.mousePressEvent.connect(mousePressEvent);
+Controller.mouseMoveEvent.connect(mouseMoveEvent);
 
 
 

examples/toolBars.js

@@ -0,0 +1,197 @@
+//
+//  toolBars.js
+//  examples
+//
+//  Created by Clément Brisset on 5/7/14.
+//  Copyright 2014 High Fidelity, Inc.
+//
+//  Distributed under the Apache License, Version 2.0.
+//  See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
+//
+
+Overlay2D = function(properties, overlay) { // overlay is an optionnal variable
+    if (!(typeof(properties) === 'undefined')) {
+        if(typeof(overlay) === 'undefined') {
+            overlay = Overlays.addOverlay("image", properties);
+        } else {
+            Overlays.editOverlay(overlay, properties);
+        }
+    }
+    
+    this.overlay = function() {
+        return overlay;
+    }
+    this.x = function() {
+        return properties.x;
+    }
+    this.y = function() {
+        return properties.y;
+    }
+    this.width = function() {
+        return properties.width;
+    }
+    this.height = function() {
+        return properties.height;
+    }
+    this.alpha = function() {
+        return properties.alpha;
+    }
+    this.visible = function() {
+        return properties.visible;
+    }
+    
+    
+    this.move = function(x, y) {
+        properties.x = x;
+        properties.y = y;
+        Overlays.editOverlay(overlay, { x: x, y: y });
+    }
+    this.resize = function(width, height) {
+        properties.width = width;
+        properties.height = height;
+        Overlays.editOverlay(overlay, { width: width, height: height });
+    }
+    this.setAlpha = function(alpha) {
+        properties.alpha = alpha;
+        Overlays.editOverlay(overlay, { alpha: alpha });
+    }
+    this.show = function(doShow) {
+        properties.visible = doShow;
+        Overlays.editOverlay(overlay, { visible: doShow });
+    }
+    
+    this.clicked = function(clickedOverlay) {
+        return (overlay == clickedOverlay ? true : false);
+    }
+    
+    this.cleanup = function() {
+        print("Cleanup");
+        Overlays.deleteOverlay(overlay);
+    }
+}
+
+
+Tool = function(properties, selectable, selected) { // selectable and selected are optional variables.
+    Overlay2D.call(this, properties);
+    
+    if(typeof(selectable)==='undefined') {
+        selectable = false;
+        if(typeof(selected)==='undefined') {
+            selected = false;
+            
+        }
+    }
+    
+    this.selectable = function() {
+        return selectable;
+    }
+    
+    this.selected = function() {
+        return selected;
+    }
+    this.select = function(doSelect) {
+        selected = doSelect;
+        properties.subImage.y = (selected ? 2 : 1) * properties.subImage.height;
+        Overlays.editOverlay(this.overlay(), { subImage: properties.subImage });
+    }
+    this.toggle = function() {
+        selected = !selected;
+        properties.subImage.y = (selected ? 2 : 1) * properties.subImage.height;
+        Overlays.editOverlay(this.overlay(), { subImage: properties.subImage });
+        
+        return selected;
+    }
+    
+    this.select(selected);
+    
+    this.baseClicked = this.clicked;
+    this.clicked = function(clickedOverlay) {
+        if (this.baseClicked(clickedOverlay)) {
+            if (selectable) {
+                this.toggle();
+            }
+            return true;
+        }
+        return false;
+    }
+}
+Tool.prototype = new Overlay2D;
+Tool.IMAGE_HEIGHT = 50;
+Tool.IMAGE_WIDTH = 50;
+
+ToolBar = function(x, y, direction) {
+    this.tools = [];
+    this.x = x;
+    this.y = y;
+    this.width = 0;
+    this.height = 0;
+    
+    
+    this.addTool = function(properties, selectable, selected) {
+        if (direction == ToolBar.HORIZONTAL) {
+            properties.x = this.x + this.width;
+            properties.y = this.y;
+            this.width += properties.width + ToolBar.SPACING;
+            this.height += Math.max(properties.height, this.height);
+        } else {
+            properties.x = this.x;
+            properties.y = this.y + this.height;
+            this.width = Math.max(properties.width, this.width);
+            this.height += properties.height + ToolBar.SPACING;
+        }
+        
+        this.tools[this.tools.length] = new Tool(properties, selectable, selected);
+        return ((this.tools.length) - 1);
+    }
+    
+    this.move = function(x, y) {
+        var dx = x - this.x;
+        var dy = y - this.y;
+        this.x = x;
+        this.y = y;
+        for(var tool in this.tools) {
+            this.tools[tool].move(this.tools[tool].x() + dx, this.tools[tool].y() + dy);
+        }
+    }
+    
+    this.setAlpha = function(alpha) {
+        for(var tool in this.tools) {
+            this.tools[tool].setAlpha(alpha);
+        }
+    }
+    
+    this.show = function(doShow) {
+        for(var tool in this.tools) {
+            this.tools[tool].show(doShow);
+        }
+    }
+    
+    this.clicked = function(clickedOverlay) {
+        for(var tool in this.tools) {
+            if (this.tools[tool].visible() && this.tools[tool].clicked(clickedOverlay)) {
+                return parseInt(tool);
+            }
+        }
+        return -1;
+    }
+    
+    this.numberOfTools = function() {
+        return this.tools.length;
+    }
+    
+    this.cleanup = function() {
+        for(var tool in this.tools) {
+            this.tools[tool].cleanup();
+            delete this.tools[tool];
+        }
+        
+        this.tools = [];
+        this.x = x;
+        this.y = y;
+        this.width = 0;
+        this.height = 0;
+    }
+}
+ToolBar.SPACING = 4;
+ToolBar.VERTICAL = 0;
+ToolBar.HORIZONTAL = 1;

interface/src/scripting/WindowScriptingInterface.cpp

@@ -78,6 +78,7 @@ QScriptValue WindowScriptingInterface::showPrompt(const QString& message, const
     promptDialog.setWindowTitle("");
     promptDialog.setLabelText(message);
     promptDialog.setTextValue(defaultText);
+    promptDialog.setFixedSize(600, 200);
 
     if (promptDialog.exec() == QDialog::Accepted) {
         return QScriptValue(promptDialog.textValue());

libraries/models/src/ModelsScriptingInterface.cpp

@@ -105,7 +105,6 @@ ModelItemID ModelsScriptingInterface::editModel(ModelItemID modelID, const Model
         _modelTree->updateModel(modelID, properties);
         _modelTree->unlock();
     }
-    
     return modelID;
 }