Add grid tools to entity edit tools

examples/libraries/entitySelectionTool.js

@@ -394,8 +394,7 @@ SelectionDisplay = (function () {
     var baseOverlayAngles = { x: 0, y: 0, z: 0 };
     var baseOverlayRotation = Quat.fromVec3Degrees(baseOverlayAngles);
     var baseOfEntityProjectionOverlay = Overlays.addOverlay("rectangle3d", {
-                    position: { x:0, y: 0, z: 0},
+                    position: { x: 1, y: 0, z: 0},
-                    size: 1,
                     color: { red: 51, green: 152, blue: 203 },
                     alpha: 0.5,
                     solid: true,
@@ -570,6 +569,7 @@ SelectionDisplay = (function () {
         xRailOverlay,
         yRailOverlay,
         zRailOverlay,
+        baseOfEntityProjectionOverlay,
     ].concat(stretchHandles);
 
     overlayNames[highlightBox] = "highlightBox";
@@ -878,20 +878,24 @@ SelectionDisplay = (function () {
             translateHandlesVisible = false;
         }
         
-        var rotation = SelectionManager.worldRotation;
+        var rotation = selectionManager.worldRotation;
-        var dimensions = SelectionManager.worldDimensions;
+        var dimensions = selectionManager.worldDimensions;
-        var position = SelectionManager.worldPosition;
+        var position = selectionManager.worldPosition;
 
         Overlays.editOverlay(baseOfEntityProjectionOverlay, 
                             { 
-                                visible: true,
+                                visible: mode != "ROTATE_YAW" && mode != "ROTATE_PITCH" && mode != "ROTATE_ROLL",
-                                solid:true,
+                                solid: true,
-                                lineWidth: 2.0,
+                                // lineWidth: 2.0,
-                                position: { x: position.x,
+                                position: {
-                                            y: 0,
+                                    x: position.x,
-                                            z: position.z },
+                                    y: grid.getOrigin().y,
-
+                                    z: position.z
-                                dimensions: { x: dimensions.x, y: 0, z: dimensions.z },
+                                },
+                                dimensions: {
+                                    x: dimensions.x,
+                                    y: dimensions.z
+                                },
                                 rotation: rotation,
                             });
 
@@ -1098,6 +1102,7 @@ SelectionDisplay = (function () {
 
     var initialXZPick = null;
     var isConstrained = false;
+    var constrainMajorOnly = false;
     var startPosition = null;
     var duplicatedEntityIDs = null;
     var translateXZTool = {
@@ -1143,34 +1148,46 @@ SelectionDisplay = (function () {
 
             // If shifted, constrain to one axis
             if (event.isShifted) {
-                if (Math.abs(vector.x) > Math.abs(vector.z)) {
+                // if (Math.abs(vector.x) > Math.abs(vector.z)) {
-                    vector.z = 0;
+                //     vector.z = 0;
-                } else {
+                // } else {
-                    vector.x = 0;
+                //     vector.x = 0;
-                }
+                // }
                 if (!isConstrained) {
-                    Overlays.editOverlay(xRailOverlay, { visible: true });
+                    // Overlays.editOverlay(xRailOverlay, { visible: true });
-                    var xStart = Vec3.sum(startPosition, { x: -10000, y: 0, z: 0 });
+                    // var xStart = Vec3.sum(startPosition, { x: -10000, y: 0, z: 0 });
-                    var xEnd = Vec3.sum(startPosition, { x: 10000, y: 0, z: 0 });
+                    // var xEnd = Vec3.sum(startPosition, { x: 10000, y: 0, z: 0 });
-                    var zStart = Vec3.sum(startPosition, { x: 0, y: 0, z: -10000 });
+                    // var zStart = Vec3.sum(startPosition, { x: 0, y: 0, z: -10000 });
-                    var zEnd = Vec3.sum(startPosition, { x: 0, y: 0, z: 10000 });
+                    // var zEnd = Vec3.sum(startPosition, { x: 0, y: 0, z: 10000 });
-                    Overlays.editOverlay(xRailOverlay, { start: xStart, end: xEnd, visible: true });
+                    // Overlays.editOverlay(xRailOverlay, { start: xStart, end: xEnd, visible: true });
-                    Overlays.editOverlay(zRailOverlay, { start: zStart, end: zEnd, visible: true });
+                    // Overlays.editOverlay(zRailOverlay, { start: zStart, end: zEnd, visible: true });
                     isConstrained = true;
                 }
+                // constrainMajorOnly = event.isControl;
+                // vector = Vec3.subtract(
+                //     grid.snapToGrid(Vec3.sum(startPosition, vector), constrainMajorOnly),
+                //     startPosition);
             } else {
                 if (isConstrained) {
-                    Overlays.editOverlay(xRailOverlay, { visible: false });
+                    // Overlays.editOverlay(xRailOverlay, { visible: false });
-                    Overlays.editOverlay(zRailOverlay, { visible: false });
+                    // Overlays.editOverlay(zRailOverlay, { visible: false });
+                    isConstrained = false;
                 }
             }
 
+            constrainMajorOnly = event.isControl;
+            var cornerPosition = Vec3.sum(startPosition, Vec3.multiply(-0.5, selectionManager.worldDimensions));
+            vector = Vec3.subtract(
+                    grid.snapToGrid(Vec3.sum(cornerPosition, vector), constrainMajorOnly),
+                    cornerPosition);
+
             var wantDebug = false;
 
             for (var i = 0; i < SelectionManager.selections.length; i++) {
                 var properties = SelectionManager.savedProperties[SelectionManager.selections[i].id];
+                var newPosition = Vec3.sum(properties.position, { x: vector.x, y: 0, z: vector.z });
                 Entities.editEntity(SelectionManager.selections[i], {
-                    position: Vec3.sum(properties.position, vector),
+                    position: newPosition,
                 });
 
                 if (wantDebug) {

examples/libraries/gridTool.js

@@ -0,0 +1,266 @@
+Grid = function(opts) {
+    var that = {};
+
+    var color = { red: 100, green: 152, blue: 203 };
+    var gridColor = { red: 100, green: 152, blue: 203 };
+    var gridAlpha = 0.9;
+    var origin = { x: 0, y: 0, z: 0 };
+    var majorGridEvery = 5;
+    var minorGridSpacing = 0.2;
+    var halfSize = 40;
+    var yOffset = 0.001;
+
+    var worldSize = 16384;
+
+    var minorGridWidth = 0.5;
+    var majorGridWidth = 1.5;
+
+    var gridOverlays = [];
+
+    var snapToGrid = true;
+
+    var gridPlane = Overlays.addOverlay("rectangle3d", {
+        position: origin,
+        color: color,
+        size: halfSize * 2 * minorGridSpacing * 1.05,
+        alpha: 0.2,
+        solid: true,
+        visible: false,
+        ignoreRayIntersection: true,
+    });
+
+    that.getMinorIncrement = function() { return minorGridSpacing; };
+    that.getMajorIncrement = function() { return minorGridSpacing * majorGridEvery; };
+
+    that.visible = false;
+
+    that.getOrigin = function() {
+        return origin;
+    }
+
+    that.getSnapToGrid = function() { return snapToGrid; };
+
+    that.setVisible = function(visible, noUpdate) {
+        that.visible = visible;
+        updateGrid();
+        // for (var i = 0; i < gridOverlays.length; i++) {
+        //     Overlays.editOverlay(gridOverlays[i], { visible: visible });
+        // }
+        // Overlays.editOverlay(gridPlane, { visible: visible });
+
+        if (!noUpdate) {
+            that.emitUpdate();
+        }
+    }
+
+    that.snapToGrid = function(position, majorOnly) {
+        if (!snapToGrid) {
+            return position;
+        }
+
+        var spacing = majorOnly ? (minorGridSpacing * majorGridEvery) : minorGridSpacing;
+
+        position = Vec3.subtract(position, origin);
+
+        position.x = Math.round(position.x / spacing) * spacing;
+        position.y = Math.round(position.y / spacing) * spacing;
+        position.z = Math.round(position.z / spacing) * spacing;
+
+        return Vec3.sum(position, origin);
+    }
+
+    that.setPosition = function(newPosition, noUpdate) {
+        origin = Vec3.subtract(newPosition, { x: 0, y: yOffset, z: 0 });
+        updateGrid();
+
+        print("updated grid");
+        if (!noUpdate) {
+            that.emitUpdate();
+        }
+    };
+
+    that.emitUpdate = function() {
+        if (that.onUpdate) {
+            that.onUpdate({
+                origin: origin,
+                minorGridSpacing: minorGridSpacing,
+                majorGridEvery: majorGridEvery,
+                gridSize: halfSize,
+                visible: that.visible,
+                snapToGrid: snapToGrid,
+                gridColor: gridColor,
+            });
+        }
+    };
+
+    that.update = function(data) {
+        print("Got update");
+        if (data.snapToGrid !== undefined) {
+            snapToGrid = data.snapToGrid;
+        }
+
+        if (data.origin) {
+            var pos = data.origin;
+            pos.x = pos.x === undefined ? origin.x : pos.x;
+            pos.y = pos.y === undefined ? origin.y : pos.y;
+            pos.z = pos.z === undefined ? origin.z : pos.z;
+            that.setPosition(pos, true);
+        }
+
+        if (data.minorGridSpacing) {
+            minorGridSpacing = data.minorGridSpacing;
+        }
+
+        if (data.majorGridEvery) {
+            majorGridEvery = data.majorGridEvery;
+        }
+
+        if (data.gridColor) {
+            gridColor = data.gridColor;
+        }
+
+        if (data.gridSize) {
+            halfSize = data.gridSize;
+        }
+
+        if (data.visible !== undefined) {
+            that.setVisible(data.visible, true);
+        }
+
+        updateGrid();
+    }
+
+    function updateGrid() {
+        // Delete overlays
+        var gridLinesRequired = (halfSize * 2 + 1) * 2;
+        if (gridLinesRequired > gridOverlays.length) {
+            for (var i = gridOverlays.length; i < gridLinesRequired; i++) {
+                gridOverlays.push(Overlays.addOverlay("line3d", {}));
+            }
+        } else if (gridLinesRequired < gridOverlays.length) {
+            var numberToRemove = gridOverlays.length - gridLinesRequired;
+            var removed = gridOverlays.splice(gridOverlays.length - numberToRemove, numberToRemove);
+            for (var i = 0; i < removed.length; i++) {
+                Overlays.deleteOverlay(removed[i]);
+            }
+        }
+
+        Overlays.editOverlay(gridPlane, {
+            position: origin,
+            size: halfSize * 2 * minorGridSpacing * 1.05,
+        });
+
+        var startX = {
+            x: origin.x - (halfSize * minorGridSpacing),
+            y: origin.y,
+            z: origin.z,
+        };
+        var endX = {
+            x: origin.x + (halfSize * minorGridSpacing),
+            y: origin.y,
+            z: origin.z,
+        };
+        var startZ = {
+            x: origin.x,
+            y: origin.y,
+            z: origin.z - (halfSize * minorGridSpacing)
+        };
+        var endZ = {
+            x: origin.x,
+            y: origin.y,
+            z: origin.z + (halfSize * minorGridSpacing)
+        };
+
+        var overlayIdx = 0;
+        for (var i = -halfSize; i <= halfSize; i++) {
+            // Offset for X-axis aligned grid line
+            var offsetX = { x: 0, y: 0, z: i * minorGridSpacing };
+
+            // Offset for Z-axis aligned grid line
+            var offsetZ = { x: i * minorGridSpacing, y: 0, z: 0 };
+
+            var position = Vec3.sum(origin, offsetX);
+            var size = i % majorGridEvery == 0 ? majorGridWidth : minorGridWidth;
+
+            var gridLineX = gridOverlays[overlayIdx++];
+            var gridLineZ = gridOverlays[overlayIdx++];
+
+            Overlays.editOverlay(gridLineX, {
+                start: Vec3.sum(startX, offsetX),
+                end: Vec3.sum(endX, offsetX),
+                lineWidth: size,
+                color: gridColor,
+                alpha: gridAlpha,
+                solid: true,
+                visible: that.visible,
+                ignoreRayIntersection: true,
+            });
+            Overlays.editOverlay(gridLineZ, {
+                start: Vec3.sum(startZ, offsetZ),
+                end: Vec3.sum(endZ, offsetZ),
+                lineWidth: size,
+                color: gridColor,
+                alpha: gridAlpha,
+                solid: true,
+                visible: that.visible,
+                ignoreRayIntersection: true,
+            });
+        }
+    }
+
+    function cleanup() {
+        Overlays.deleteOverlay(gridPlane);
+        for (var i = 0; i < gridOverlays.length; i++) {
+            Overlays.deleteOverlay(gridOverlays[i]);
+        }
+    }
+
+    that.addListener = function(callback) {
+        that.onUpdate = callback;
+    }
+
+    Script.scriptEnding.connect(cleanup);
+    updateGrid();
+
+    that.onUpdate = null;
+
+    return that;
+};
+
+GridTool = function(opts) {
+    var that = {};
+
+    var horizontalGrid = opts.horizontalGrid;
+    var verticalGrid = opts.verticalGrid;
+    var listeners = [];
+
+    // var webView = Window.createWebView('http://localhost:8000/gridControls.html', 200, 280);
+    var webView = new WebWindow('http://localhost:8000/gridControls.html', 200, 280);
+
+    horizontalGrid.addListener(function(data) {
+        webView.eventBridge.emitScriptEvent(JSON.stringify(data));
+    });
+
+    webView.eventBridge.webEventReceived.connect(function(data) {
+        print('got event: ' + data);
+        data = JSON.parse(data);
+        if (data.type == "init") {
+            horizontalGrid.emitUpdate(); 
+        } else if (data.type == "update") {
+            horizontalGrid.update(data);
+            for (var i = 0; i < listeners.length; i++) {
+                listeners[i](data);
+            }
+        }
+    });
+
+    that.addListener = function(callback) {
+        listeners.push(callback);
+    }
+
+    that.setVisible = function(visible) {
+        webView.setVisible(visible);
+    }
+
+    return that;
+};

examples/newEditEntities.js

@@ -35,6 +35,12 @@ var entityPropertyDialogBox = EntityPropertyDialogBox;
 Script.include("libraries/entityCameraTool.js");
 var cameraManager = new CameraManager();
 
+Script.include("libraries/gridTool.js");
+var grid = Grid();
+gridTool = GridTool({ horizontalGrid: grid });
+gridTool.addListener(function(data) {
+});
+
 selectionManager.setEventListener(selectionDisplay.updateHandles);
 
 var windowDimensions = Controller.getViewportDimensions();
@@ -258,6 +264,7 @@ var toolBar = (function () {
 
         if (activeButton === toolBar.clicked(clickedOverlay)) {
             isActive = !isActive;
+            gridTool.setVisible(isActive);
             if (!isActive) {
                 selectionManager.clearSelections();
                 cameraManager.disable();
@@ -747,25 +754,32 @@ Controller.keyReleaseEvent.connect(function (event) {
         if (isActive) {
             cameraManager.enable();
         }
+    } else if (event.text == 'g') {
+        if (isActive && selectionManager.hasSelection()) {
+            var newPosition = selectionManager.worldPosition;
+            newPosition = Vec3.subtract(newPosition, { x: 0, y: selectionManager.worldDimensions.y * 0.5, z: 0 });
+            grid.setPosition(newPosition);
+        }
     } else if (isActive) {
         var delta = null;
+        var increment = event.isShifted ? grid.getMajorIncrement() : grid.getMinorIncrement();
 
         if (event.text == 'UP') {
             if (event.isControl || event.isAlt) {
-                delta = { x: 0, y: 1, z: 0 };
+                delta = { x: 0, y: increment, z: 0 };
             } else {
-                delta = { x: 0, y: 0, z: -1 };
+                delta = { x: 0, y: 0, z: -increment };
             }
         } else if (event.text == 'DOWN') {
             if (event.isControl || event.isAlt) {
-                delta = { x: 0, y: -1, z: 0 };
+                delta = { x: 0, y: -increment, z: 0 };
             } else {
-                delta = { x: 0, y: 0, z: 1 };
+                delta = { x: 0, y: 0, z: increment };
             }
         } else if (event.text == 'LEFT') {
-            delta = { x: -1, y: 0, z: 0 };
+            delta = { x: -increment, y: 0, z: 0 };
         } else if (event.text == 'RIGHT') {
-            delta = { x: 1, y: 0, z: 0 };
+            delta = { x: increment, y: 0, z: 0 };
         }
 
         if (delta != null) {
@@ -820,7 +834,6 @@ function applyEntityProperties(data) {
         var properties = data.createEntities[i].properties;
         var newEntityID = Entities.addEntity(properties);
         DELETED_ENTITY_MAP[entityID.id] = newEntityID;
-        print(newEntityID.isKnownID);
         if (data.selectCreated) {
             selectedEntityIDs.push(newEntityID);
         }

gridControls.html

@@ -0,0 +1,206 @@
+<html>
+<head>
+    <script>
+        function loaded() {
+            function log(msg) {
+                var el = document.createElement('div');
+                el.innerHTML = msg;
+                document.body.appendChild(el);
+            }
+
+            var gridColor = { red: 0, green: 0, blue: 0 };
+            var gridColors = [
+                { red: 0, green: 0, blue: 0 },
+                { red: 128, green: 128, blue: 128 },
+                // { red: 255, green: 255, blue: 255 },
+                { red: 255, green: 128, blue: 128 },
+                { red: 128, green: 255, blue: 128 },
+                { red: 128, green: 128, blue: 255 },
+            ];
+
+            posY = document.getElementById("horiz-y");
+            minorSpacing = document.getElementById("minor-spacing");
+            majorSpacing = document.getElementById("major-spacing");
+            gridOn = document.getElementById("grid-on");
+            snapToGrid = document.getElementById("snap-to-grid");
+            hGridVisible = document.getElementById("horiz-grid-visible");
+
+
+            if (window.EventBridge !== undefined) {
+                EventBridge.scriptEventReceived.connect(function(data) {
+                    data = JSON.parse(data);
+                    if (data.origin) {
+
+                        var origin = data.origin;
+                        // posX.value = origin.x;
+                        posY.value = origin.y;
+                        // posZ.value = origin.z;
+                    }
+
+                    if (data.minorGridSpacing) {
+                        minorSpacing.value = data.minorGridSpacing;
+                    }
+
+                    if (data.majorGridEvery) {
+                        majorSpacing.value = data.majorGridEvery;
+                    }
+
+                    if (data.gridColor) {
+                        gridColor = data.gridColor;
+                    }
+
+                    if (data.snapToGrid !== undefined) {
+                        snapToGrid.checked = data.snapToGrid == true;
+                    }
+
+                    if (data.visible !== undefined) {
+                        hGridVisible.checked = data.visible == true;
+                    }
+                });
+
+                function emitUpdate() {
+                    EventBridge.emitWebEvent(JSON.stringify({
+                        type: "update",
+                        origin: {
+                            // x: posX.value,
+                            y: posY.value,
+                            // z: posZ.value,
+                        },
+                        minorGridSpacing: minorSpacing.value,
+                        majorGridEvery: majorSpacing.value,
+                        gridColor: gridColor,
+                        snapToGrid: snapToGrid.checked,
+                        visible: hGridVisible.checked,
+                    }));
+                }
+
+            }
+
+            document.addEventListener("input", emitUpdate);
+            hGridVisible.addEventListener("change", emitUpdate);
+            snapToGrid.addEventListener("change", emitUpdate);
+
+            var gridColorBox = document.getElementById('grid-color');
+
+            for (var i = 0; i < gridColors.length; i++) {
+                var colors = gridColors[i];
+                var box = document.createElement('div');
+                box.setAttribute('class', 'color-box');
+                box.style.background = 'rgb(' + colors.red + ', ' + colors.green + ', ' + colors.blue + ')';
+                document.getElementById("grid-colors").appendChild(box);
+                box.addEventListener("click", function(color) { 
+                    return function() {
+                        gridColor = color;
+                        // this.setAttribute('class', 'color-box highlight');
+
+                        emitUpdate();
+                    }
+                }({ red: colors.red, green: colors.green, blue: colors.blue }));
+            }
+
+            EventBridge.emitWebEvent(JSON.stringify({ type: 'init' }));
+        }
+    </script>
+    <style>
+        * {
+        }
+
+        body {
+            margin: 0;
+            padding: 0;
+
+            background: #DDD;
+            font-family: Sans-Serif;
+            font-size: 12px;
+
+            -webkit-touch-callout: none;
+            -webkit-user-select: none;
+            -khtml-user-select: none;
+            -moz-user-select: none;
+            -ms-user-select: none;
+            user-select: none;
+        }
+
+        input {
+            line-height: 2;
+        }
+
+        .input-left {
+            display: inline-block;
+            width: 20px;
+        }
+
+        .color-box {
+            display: inline-block;
+            width: 20px;
+            height: 20px;
+            border: 1px solid black;
+            background: blue;
+            margin: 2px;
+        }
+
+        .color-box.highlight {
+            width: 18px;
+            height: 18px;
+            border: 2px solid black;
+        }
+
+        .section-header {
+            background: #AAA;
+            border-bottom: 1px solid #CCC;
+        }
+
+        .section-header label {
+            font-weight: bold;
+        }
+
+        .grid-section {
+            border-top: 1px solid #DDD;
+            padding: 4px 0px 4px 20px;
+            background: #DDD;
+        }
+    </style>
+</head>
+<body onload='loaded();'>
+    <div class="section-header">
+        <input type='checkbox' id="horiz-grid-visible">
+        <label>Horizontal Grid</label>
+    </div>
+    <div class="grid-section">
+
+        <label>Snap to grid</label>
+        <div>
+            <div class="input-left">
+            </div>
+            <input type='checkbox' id="snap-to-grid">
+        </div>
+
+        <label>Position (Y Axis)</label>
+        <div id="horizontal-position">
+            <div class="input-left">
+            </div>
+            <input type='number' id="horiz-y" class="number" value="0.0" step="0.1"></input>
+        </div>
+
+        <label>Minor Grid Size</label>
+        <div>
+            <div class="input-left">
+            </div>
+            <input type='number' id="minor-spacing" min="0" step="0.01", ></input>
+        </div>
+
+        <label>Major Grid Every</label>
+        <div>
+            <div class="input-left">
+            </div>
+            <input type='number' id="major-spacing" min="2" step="1", ></input>
+        </div>
+
+        <label>Grid Color</label>
+        <div id="grid-colors">
+            <div class="input-left">
+            </div>
+        </div>
+    </div>
+</body>
+</html>

libraries/script-engine/src/ScriptEngine.cpp

@@ -322,6 +322,11 @@ QScriptValue ScriptEngine::registerGlobalObject(const QString& name, QObject* ob
     return QScriptValue::NullValue;
 }
 
+void ScriptEngine::registerFunction(const QString& name, QScriptEngine::FunctionSignature fun, int numArguments) {
+    QScriptValue scriptFun = newFunction(fun, numArguments);
+    globalObject().setProperty(name, scriptFun);
+}
+
 void ScriptEngine::registerGetterSetter(const QString& name, QScriptEngine::FunctionSignature getter,
                                         QScriptEngine::FunctionSignature setter, QScriptValue object) {
     QScriptValue setterFunction = newFunction(setter, 1);

libraries/script-engine/src/ScriptEngine.h

@@ -65,6 +65,7 @@ public:
     QScriptValue registerGlobalObject(const QString& name, QObject* object); /// registers a global object by name
     void registerGetterSetter(const QString& name, QScriptEngine::FunctionSignature getter,
                               QScriptEngine::FunctionSignature setter, QScriptValue object = QScriptValue::NullValue);
+    void registerFunction(const QString& name, QScriptEngine::FunctionSignature fun, int numArguments = -1);
 
     Q_INVOKABLE void setIsAvatar(bool isAvatar);
     bool isAvatar() const { return _isAvatar; }