Merge pull request #3960 from huffman/entity-tool-properties-updates

Entity tool properties updates

examples/editEntities.js

@@ -839,9 +839,11 @@ Controller.keyReleaseEvent.connect(function (event) {
         selectionDisplay.toggleSpaceMode();
     } else if (event.text == "f") {
         if (isActive) {
-            cameraManager.focus(selectionManager.worldPosition,
+            if (selectionManager.hasSelection()) {
-                                selectionManager.worldDimensions,
+                cameraManager.focus(selectionManager.worldPosition,
-                                Menu.isOptionChecked(MENU_EASE_ON_FOCUS));
+                                    selectionManager.worldDimensions,
+                                    Menu.isOptionChecked(MENU_EASE_ON_FOCUS));
+            }
         }
     } else if (event.text == '[') {
         if (isActive) {
@@ -1001,7 +1003,9 @@ PropertiesTool = function(opts) {
             type: 'update',
         };
         if (selectionManager.hasSelection()) {
+            data.id = selectionManager.selections[0].id;
             data.properties = Entities.getEntityProperties(selectionManager.selections[0]);
+            data.properties.rotation = Quat.safeEulerAngles(data.properties.rotation);
         }
         webView.eventBridge.emitScriptEvent(JSON.stringify(data));
     });
@@ -1010,8 +1014,59 @@ PropertiesTool = function(opts) {
         print(data);
         data = JSON.parse(data);
         if (data.type == "update") {
+            selectionManager.saveProperties();
+            if (data.properties.rotation !== undefined) {
+                var rotation = data.properties.rotation;
+                data.properties.rotation = Quat.fromPitchYawRollDegrees(rotation.x, rotation.y, rotation.z);
+            }
             Entities.editEntity(selectionManager.selections[0], data.properties);
+            pushCommandForSelections();
             selectionManager._update();
+        } else if (data.type == "action") {
+            if (data.action == "moveSelectionToGrid") {
+                if (selectionManager.hasSelection()) {
+                    selectionManager.saveProperties();
+                    var dY = grid.getOrigin().y - (selectionManager.worldPosition.y - selectionManager.worldDimensions.y / 2),
+                    var diff = { x: 0, y: dY, z: 0 };
+                    for (var i = 0; i < selectionManager.selections.length; i++) {
+                        var properties = selectionManager.savedProperties[selectionManager.selections[i].id];
+                        var newPosition = Vec3.sum(properties.position, diff);
+                        Entities.editEntity(selectionManager.selections[i], {
+                            position: newPosition,
+                        });
+                    }
+                    pushCommandForSelections();
+                    selectionManager._update();
+                }
+            } else if (data.action == "moveAllToGrid") {
+                if (selectionManager.hasSelection()) {
+                    selectionManager.saveProperties();
+                    for (var i = 0; i < selectionManager.selections.length; i++) {
+                        var properties = selectionManager.savedProperties[selectionManager.selections[i].id];
+                        var bottomY = properties.boundingBox.center.y - properties.boundingBox.dimensions.y / 2;
+                        var dY = grid.getOrigin().y - bottomY;
+                        var diff = { x: 0, y: dY, z: 0 };
+                        var newPosition = Vec3.sum(properties.position, diff);
+                        Entities.editEntity(selectionManager.selections[i], {
+                            position: newPosition,
+                        });
+                    }
+                    pushCommandForSelections();
+                    selectionManager._update();
+                }
+            } else if (data.action == "resetToNaturalDimensions") {
+                if (selectionManager.hasSelection()) {
+                    selectionManager.saveProperties();
+                    for (var i = 0; i < selectionManager.selections.length; i++) {
+                        var properties = selectionManager.savedProperties[selectionManager.selections[i].id];
+                        Entities.editEntity(selectionManager.selections[i], {
+                            dimensions: properties.naturalDimensions,
+                        });
+                    }
+                    pushCommandForSelections();
+                    selectionManager._update();
+                }
+            }
         }
     });
 

examples/html/entityProperties.html

@@ -70,21 +70,29 @@
         };
 
         function loaded() {
+            var elID = document.getElementById("property-id");
             var elType = document.getElementById("property-type");
             var elLocked = document.getElementById("property-locked");
             var elVisible = document.getElementById("property-visible");
             var elPositionX = document.getElementById("property-pos-x");
             var elPositionY = document.getElementById("property-pos-y");
             var elPositionZ = document.getElementById("property-pos-z");
+            var elMoveSelectionToGrid = document.getElementById("move-selection-to-grid");
+            var elMoveAllToGrid = document.getElementById("move-all-to-grid");
 
             var elDimensionsX = document.getElementById("property-dim-x");
             var elDimensionsY = document.getElementById("property-dim-y");
             var elDimensionsZ = document.getElementById("property-dim-z");
+            var elResetToNaturalDimensions = document.getElementById("reset-to-natural-dimensions");
 
             var elRegistrationX = document.getElementById("property-reg-x");
             var elRegistrationY = document.getElementById("property-reg-y");
             var elRegistrationZ = document.getElementById("property-reg-z");
 
+            var elRotationX = document.getElementById("property-rot-x");
+            var elRotationY = document.getElementById("property-rot-y");
+            var elRotationZ = document.getElementById("property-rot-z");
+
             var elLinearVelocityX = document.getElementById("property-lvel-x");
             var elLinearVelocityY = document.getElementById("property-lvel-y");
             var elLinearVelocityZ = document.getElementById("property-lvel-z");
@@ -156,6 +164,8 @@
                         } else {
                             var properties = data.properties;
 
+                            elID.innerHTML = data.id;
+
                             elType.innerHTML = properties.type;
 
                             elLocked.checked = properties.locked;
@@ -181,6 +191,10 @@
                             elRegistrationY.value = properties.registrationPoint.y.toFixed(2);
                             elRegistrationZ.value = properties.registrationPoint.z.toFixed(2);
 
+                            elRotationX.value = properties.rotation.x.toFixed(2);
+                            elRotationY.value = properties.rotation.y.toFixed(2);
+                            elRotationZ.value = properties.rotation.z.toFixed(2);
+
                             elLinearVelocityX.value = properties.velocity.x.toFixed(2);
                             elLinearVelocityY.value = properties.velocity.y.toFixed(2);
                             elLinearVelocityZ.value = properties.velocity.z.toFixed(2);
@@ -302,6 +316,12 @@
             elRegistrationY.addEventListener('change', registrationChangeFunction);
             elRegistrationZ.addEventListener('change', registrationChangeFunction);
 
+            var rotationChangeFunction = createEmitVec3PropertyUpdateFunction(
+                'rotation', elRotationX, elRotationY, elRotationZ);
+            elRotationX.addEventListener('change', rotationChangeFunction);
+            elRotationY.addEventListener('change', rotationChangeFunction);
+            elRotationZ.addEventListener('change', rotationChangeFunction);
+
             var velocityChangeFunction = createEmitVec3PropertyUpdateFunction(
                 'velocity', elLinearVelocityX, elLinearVelocityY, elLinearVelocityZ);
             elLinearVelocityX.addEventListener('change', velocityChangeFunction);
@@ -381,6 +401,25 @@
             elTextBackgroundColorGreen.addEventListener('change', textBackgroundColorChangeFunction);
             elTextBackgroundColorBlue.addEventListener('change', textBackgroundColorChangeFunction);
 
+            elMoveSelectionToGrid.addEventListener("click", function() {
+                EventBridge.emitWebEvent(JSON.stringify({
+                    type: "action",
+                    action: "moveSelectionToGrid",
+                }));
+            });
+            elMoveAllToGrid.addEventListener("click", function() {
+                EventBridge.emitWebEvent(JSON.stringify({
+                    type: "action",
+                    action: "moveAllToGrid",
+                }));
+            });
+            elResetToNaturalDimensions.addEventListener("click", function() {
+                EventBridge.emitWebEvent(JSON.stringify({
+                    type: "action",
+                    action: "resetToNaturalDimensions",
+                }));
+            });
+
 
             var resizing = false;
             var startX = 0;
@@ -437,6 +476,14 @@
             <col id="col-label">
             <col>
         </colgroup>
+        <tr>
+            <td class="label">
+                ID
+            </td>
+            <td>
+                <label id="property-id" class="selectable"></label>
+            </td>
+        </tr>
         <tr>
             <td class="label">
                 Type
@@ -465,6 +512,10 @@
                 <div class="input-area">X <input class="coord" type='number' id="property-pos-x"></input></div>
                 <div class="input-area">Y <input class="coord" type='number' id="property-pos-y"></input></div>
                 <div class="input-area">Z <input class="coord" type='number' id="property-pos-z"></input></div>
+                <div>
+                    <input type="button" id="move-selection-to-grid" value="Selection to Grid">
+                    <input type="button" id="move-all-to-grid" value="All to Grid">
+                </div>
             </td>
         </tr>
 
@@ -483,6 +534,18 @@
                 <div class="input-area">X <input class="coord" type='number' id="property-dim-x"></input></div>
                 <div class="input-area">Y <input class="coord" type='number' id="property-dim-y"></input></div>
                 <div class="input-area">Z <input class="coord" type='number' id="property-dim-z"></input></div>
+                <div>
+                    <input type="button" id="reset-to-natural-dimensions" value="Reset to Natural Dimensions">
+                </div>
+            </td>
+        </tr>
+
+        <tr>
+            <td class="label">Rotation</td>
+            <td>
+                <div class="input-area">Pitch <input class="coord" type='number' id="property-rot-x"></input></div>
+                <div class="input-area">Yaw <input class="coord" type='number' id="property-rot-y"></input></div>
+                <div class="input-area">Roll <input class="coord" type='number' id="property-rot-z"></input></div>
             </td>
         </tr>
 

examples/html/style.css

@@ -17,6 +17,17 @@ body {
     user-select: none;
 }
 
+.selectable {
+    -webkit-touch-callout: text;
+    -webkit-user-select: text;
+    -khtml-user-select: text;
+    -moz-user-select: text;
+    -ms-user-select: text;
+    user-select: text;
+
+    cursor: text;
+}
+
 .color-box {
     display: inline-block;
     width: 20px;