Merge pull request #894 from AleziaKurdis/CreateApp_DEC2020

Create App. - Feature Bundle - Dec 2020
2025-04-14 00:46:41 +02:00 · 2020-12-10 17:54:10 -05:00 · 2020-12-10 17:54:10 -05:00 · 3c44d11bfa
commit 3c44d11bfa
parent 70f2866871 536bf4ef90
7 changed files with 360 additions and 101 deletions
--- a/scripts/system/create/edit.js
+++ b/scripts/system/create/edit.js
@ -41,7 +41,7 @@ Script.include([
 var CreateWindow = Script.require('./modules/createWindow.js');

 var TITLE_OFFSET = 60;
-var CREATE_TOOLS_WIDTH = 490;
+var CREATE_TOOLS_WIDTH = 750;
 var MAX_DEFAULT_ENTITY_LIST_HEIGHT = 942;
 var ENTIRE_DOMAIN_SCAN_RADIUS = 27713;

@ -148,7 +148,10 @@ var DEFAULT_DIMENSIONS = {

 var DEFAULT_LIGHT_DIMENSIONS = Vec3.multiply(20, DEFAULT_DIMENSIONS);

-var SUBMENU_ENTITY_EDITOR_PREFERENCES = "Edit > Create Application - Preferences";
+var MENU_IMPORT_FROM_FILE = "Import Entities (.json) From a File";
+var MENU_IMPORT_FROM_URL = "Import Entities (.json) From a URL";
+var MENU_CREATE_SEPARATOR = "Create Application";
+var SUBMENU_ENTITY_EDITOR_PREFERENCES = "Edit > Preferences";
 var MENU_AUTO_FOCUS_ON_SELECT = "Auto Focus on Select";
 var MENU_EASE_ON_FOCUS = "Ease Orientation on Focus";
 var MENU_SHOW_LIGHTS_AND_PARTICLES_IN_EDIT_MODE = "Show Lights and Particle Systems in Create Mode";
@ -880,13 +883,11 @@ var toolBar = (function () {
        });

        addButton("importEntitiesButton", function() {
-            Window.browseChanged.connect(onFileOpenChanged);
-            Window.browseAsync("Select .json to Import", "", "*.json");
+            importEntitiesFromFile();
        });

        addButton("importEntitiesFromUrlButton", function() {
-            Window.promptTextChanged.connect(onPromptTextChanged);
-            Window.promptAsync("URL of a .json to import", "");
+            importEntitiesFromUrl();
        });

        addButton("openAssetBrowserButton", function() {
@ -1402,6 +1403,22 @@ function setupModelMenus() {
        position: 1,
    });

+    Menu.addMenuItem({
+        menuName: "Edit",
+        menuItemName: MENU_CREATE_SEPARATOR,
+        isSeparator: true
+    });
+    Menu.addMenuItem({
+        menuName: "Edit",
+        menuItemName: MENU_IMPORT_FROM_FILE,
+        afterItem: MENU_CREATE_SEPARATOR
+    });
+    Menu.addMenuItem({
+        menuName: "Edit",
+        menuItemName: MENU_IMPORT_FROM_URL,
+        afterItem: MENU_IMPORT_FROM_FILE
+    });
+
    Menu.addMenu(SUBMENU_ENTITY_EDITOR_PREFERENCES);

    Menu.addMenuItem({
@ -1484,7 +1501,10 @@ function cleanupModelMenus() {
    Menu.removeMenuItem(SUBMENU_ENTITY_EDITOR_PREFERENCES, MENU_SHOW_ZONES_IN_EDIT_MODE);
    Menu.removeMenuItem(SUBMENU_ENTITY_EDITOR_PREFERENCES, MENU_CREATE_ENTITIES_GRABBABLE);
    Menu.removeMenuItem(SUBMENU_ENTITY_EDITOR_PREFERENCES, MENU_ENTITY_LIST_DEFAULT_RADIUS);
-    Menu.removeMenu(SUBMENU_ENTITY_EDITOR_PREFERENCES);   
+    Menu.removeMenu(SUBMENU_ENTITY_EDITOR_PREFERENCES);
+    Menu.removeMenuItem("Edit", MENU_IMPORT_FROM_URL);
+    Menu.removeMenuItem("Edit", MENU_IMPORT_FROM_FILE);
+    Menu.removeSeparator("Edit", MENU_CREATE_SEPARATOR);    
 }

 Script.scriptEnding.connect(function () {
@ -1858,6 +1878,10 @@ function handleMenuEvent(menuItem) {
    } else if (menuItem === MENU_ENTITY_LIST_DEFAULT_RADIUS) {
        Window.promptTextChanged.connect(onPromptTextChangedDefaultRadiusUserPref);
        Window.promptAsync("Entity List Default Radius (in meters)", "" + Settings.getValue(SETTING_ENTITY_LIST_DEFAULT_RADIUS, 100));         
+    } else if (menuItem === MENU_IMPORT_FROM_FILE) {
+        importEntitiesFromFile();
+    } else if (menuItem === MENU_IMPORT_FROM_URL) {
+        importEntitiesFromUrl();
    }
    tooltip.show(false);
 }
@ -2015,18 +2039,27 @@ function toggleKey(value) {
 }
 function focusKey(value) {
    if (value === 0) { // on release
-        cameraManager.enable();
-        if (selectionManager.hasSelection()) {
-            cameraManager.focus(selectionManager.worldPosition, selectionManager.worldDimensions,
-                                Menu.isOptionChecked(MENU_EASE_ON_FOCUS));
-        }
+        setCameraFocusToSelection();
    }
 }
 function gridKey(value) {
    if (value === 0) { // on release
-        if (selectionManager.hasSelection()) {
-            grid.moveToSelection();
-        }
+        alignGridToSelection();
+    }
+}
+function viewGridKey(value) {
+    if (value === 0) { // on release
+        toggleGridVisibility();
+    }
+}
+function snapKey(value) {
+    if (value === 0) { // on release
+        entityListTool.toggleSnapToGrid();
+    }
+}
+function gridToAvatarKey(value) {
+    if (value === 0) { // on release
+        alignGridToAvatar();
    }
 }
 function recursiveAdd(newParentID, parentData) {
@ -2426,7 +2459,6 @@ var PropertiesTool = function (opts) {
                }
            }

-
            if (data.onlyUpdateEntities) {
                blockPropertyUpdates = true;
            } else {
@ -2435,6 +2467,10 @@ var PropertiesTool = function (opts) {
            }
            selectionManager._update(false, this);
            blockPropertyUpdates = false;
+            
+            if (data.snapToGrid !== undefined) {
+                entityListTool.setListMenuSnapToGrid(data.snapToGrid);
+            }
        } else if (data.type === 'saveUserData' || data.type === 'saveMaterialData') {
            data.ids.forEach(function(entityID) {
                Entities.editEntity(entityID, data.properties);
@ -2789,7 +2825,10 @@ if (isOnMacPlatform) {
 }
 mapping.from([Controller.Hardware.Keyboard.T]).to(toggleKey);
 mapping.from([Controller.Hardware.Keyboard.F]).to(focusKey);
-mapping.from([Controller.Hardware.Keyboard.G]).to(gridKey);
+mapping.from([Controller.Hardware.Keyboard.J]).to(gridKey);
+mapping.from([Controller.Hardware.Keyboard.G]).to(viewGridKey);
+mapping.from([Controller.Hardware.Keyboard.H]).to(snapKey);
+mapping.from([Controller.Hardware.Keyboard.K]).to(gridToAvatarKey);
 mapping.from([Controller.Hardware.Keyboard.X])
    .when([Controller.Hardware.Keyboard.Control])
    .to(whenReleased(function() { selectionManager.cutSelectedEntities() }));
@ -2830,8 +2869,14 @@ keyUpEventFromUIWindow = function(keyUpEvent) {
        toggleKey(pressedValue);
    } else if (keyUpEvent.keyCodeString === "F") {
        focusKey(pressedValue);
-    } else if (keyUpEvent.keyCodeString === "G") {
+    } else if (keyUpEvent.keyCodeString === "J") {
        gridKey(pressedValue);
+    } else if (keyUpEvent.keyCodeString === "G") {
+        viewGridKey(pressedValue);
+    } else if (keyUpEvent.keyCodeString === "H") {
+        snapKey(pressedValue);    
+    } else if (keyUpEvent.keyCodeString === "K") {
+        gridToAvatarKey(pressedValue);
    } else if (keyUpEvent.controlKey && keyUpEvent.keyCodeString === "X") {
        selectionManager.cutSelectedEntities();
    } else if (keyUpEvent.controlKey && keyUpEvent.keyCodeString === "C") {
@ -2938,4 +2983,46 @@ function getDomainOnlyChildrenIDs(id) {
    return realChildren;
 }

+function importEntitiesFromFile() {
+    Window.browseChanged.connect(onFileOpenChanged);
+    Window.browseAsync("Select .json to Import", "", "*.json");    
+}
+
+function importEntitiesFromUrl() {
+    Window.promptTextChanged.connect(onPromptTextChanged);
+    Window.promptAsync("URL of a .json to import", "");    
+}
+
+function setCameraFocusToSelection() {
+    cameraManager.enable();
+    if (selectionManager.hasSelection()) {
+        cameraManager.focus(selectionManager.worldPosition, selectionManager.worldDimensions,
+                            Menu.isOptionChecked(MENU_EASE_ON_FOCUS));
+    }
+}
+
+function alignGridToSelection() {
+    if (selectionManager.hasSelection()) {
+        if (!grid.getVisible()) {
+            grid.setVisible(true, true);
+        }
+        grid.moveToSelection();
+    }
+}
+
+function alignGridToAvatar() {
+    if (!grid.getVisible()) {
+        grid.setVisible(true, true);
+    }
+    grid.moveToAvatar();
+}
+
+function toggleGridVisibility() {
+    if (!grid.getVisible()) {
+        grid.setVisible(true, true);
+    } else {
+        grid.setVisible(false, true);
+    }
+}
+
 }()); // END LOCAL_SCOPE
--- a/scripts/system/create/entityList/entityList.js
+++ b/scripts/system/create/entityList/entityList.js
@ -146,6 +146,20 @@ EntityListTool = function(shouldUseEditTabletApp) {
        });
    };

+    that.setListMenuSnapToGrid = function (isSnapToGrid) {
+        emitJSONScriptEvent({ "type": "setSnapToGrid", "snap": isSnapToGrid });
+    };
+
+    that.toggleSnapToGrid = function () {
+        if (!grid.getSnapToGrid()) {
+            grid.setSnapToGrid(true);
+            emitJSONScriptEvent({ "type": "setSnapToGrid", "snap": true });
+        } else {
+            grid.setSnapToGrid(false);
+            emitJSONScriptEvent({ "type": "setSnapToGrid", "snap": false });
+        }
+    };
+
    function valueIfDefined(value) {
        return value !== undefined ? value : "";
    }
@ -381,7 +395,22 @@ EntityListTool = function(shouldUseEditTabletApp) {
            });
        } else if (data.type === 'saveColumnsConfigSetting') {
            Settings.setValue(SETTING_EDITOR_COLUMNS_SETUP, data.columnsData);
+        } else if (data.type === 'importFromFile') {
+            importEntitiesFromFile();
+        } else if (data.type === 'importFromUrl') {
+            importEntitiesFromUrl();
+        } else if (data.type === 'setCameraFocusToSelection') {
+            setCameraFocusToSelection();
+        } else if (data.type === 'alignGridToSelection') {
+            alignGridToSelection();
+        } else if (data.type === 'alignGridToAvatar') {
+            alignGridToAvatar();
+        } else if (data.type === 'toggleGridVisibility') {
+            toggleGridVisibility();
+        } else if (data.type === 'toggleSnapToGrid') {
+            that.toggleSnapToGrid();     
        }
+        
    };

    webView.webEventReceived.connect(onWebEventReceived);
--- a/scripts/system/create/entityList/html/entityList.html
+++ b/scripts/system/create/entityList/html/entityList.html
@ -32,8 +32,9 @@
            </div>
            <button id="toggle-space-mode" class="hifi-edit-button space-mode-local">Local</button>
            <input type="button" class="vglyph" id="hmdmultiselect" value="I" style="display: none;" />
-            <input type="button" class="normal" id="selection" value="Selection..." />
-            <input type="button" class="normal" id="actions" value="Actions..." />
+            <input type="button" class="normal" id="selection" value="Select&#9662;" />
+            <input type="button" class="normal" id="actions" value="Edit&#9662;" />
+            <input type="button" class="normal" id="tools" value="Tools&#9662;" />
        </div>
        <div id="entity-list">
            <div id="filter-area">
@ -159,7 +160,7 @@
        <div class="entity-list-menu" id="selection-menu" >
            <button class="menu-button" id="selectall" >
                <div class = "menu-item">
-                    <div class = "menu-item-caption">Select All</div>
+                    <div class = "menu-item-caption">Select All (in List)</div>
                    <div class = "menu-item-shortcut">Ctrl-A</div>
                </div>
            </button>
@ -171,7 +172,7 @@
            </button>            
            <button class="menu-button" id="selectinverse" >
                <div class = "menu-item">
-                    <div class = "menu-item-caption">Inverse Selection</div>
+                    <div class = "menu-item-caption">Inverse Selection (in List)</div>
                    <div class = "menu-item-shortcut">Ctrl-I</div>
                </div>
            </button>
@ -219,13 +220,71 @@
                    <div class = "menu-item-shortcut"></div>
                </div>
            </button>
-            <div class="menu-separator"></div>
+        </div>
+        <div class="entity-list-menu" id="tools-menu" >
+            <button class="menu-button" id="setCameraFocusToSelection" >
+                <div class = "menu-item">
+                    <div class = "menu-item-caption">Set Camera Focus To Selection</div>
+                    <div class = "menu-item-shortcut">F</div>
+                </div>
+            </button>
            <button class="menu-button" id="teleport-to-entity" >
                <div class = "menu-item">
                    <div class = "menu-item-caption">Teleport To Selected Entities</div>
                    <div class = "menu-item-shortcut"></div>
                </div>
            </button>
+            <div class="menu-separator"></div>
+            <button class="menu-button" id="toggleLocalWorldMode" >
+                <div class = "menu-item">
+                    <div class = "menu-item-caption">Toggle Local/World Mode</div>
+                    <div class = "menu-item-shortcut">T</div>
+                </div>
+            </button>
+            <div class="menu-separator"></div>
+            <button class="menu-button" id="exportSelectedEntities" >
+                <div class = "menu-item">
+                    <div class = "menu-item-caption">Export Selected Entities</div>
+                    <div class = "menu-item-shortcut"></div>
+                </div>
+            </button>
+            <button class="menu-button" id="importEntitiesFromFile" >
+                <div class = "menu-item">
+                    <div class = "menu-item-caption">Import Entities (.json) From a File</div>
+                    <div class = "menu-item-shortcut"></div>
+                </div>
+            </button>
+            <button class="menu-button" id="importEntitiesFromUrl" >
+                <div class = "menu-item">
+                    <div class = "menu-item-caption">Import Entities (.json) From a URL</div>
+                    <div class = "menu-item-shortcut"></div>
+                </div>
+            </button>            
+            <div class="menu-separator"></div>
+            <button class="menu-button" id="gridActivator" >
+                <div class = "menu-item">
+                    <div class = "menu-item-caption">Toggle Grid</div>
+                    <div class = "menu-item-shortcut">G</div>
+                </div>
+            </button>
+            <button class="menu-button" id="snapToGridActivator" >
+                <div class = "menu-item">
+                    <div class = "menu-item-caption" id="snapToGridActivatorCaption">Activate Snap to Grid</div>
+                    <div class = "menu-item-shortcut">H</div>
+                </div>
+            </button>
+            <button class="menu-button" id="alignGridToSelection" >
+                <div class = "menu-item">
+                    <div class = "menu-item-caption">Align Grid to Selected Entities</div>
+                    <div class = "menu-item-shortcut">J</div>
+                </div>
+            </button>
+            <button class="menu-button" id="alignGridToAvatar" >
+                <div class = "menu-item">
+                    <div class = "menu-item-caption">Align Grid to Avatar</div>
+                    <div class = "menu-item-shortcut">K</div>
+                </div>
+            </button>            
        </div>
        <div id="menuBackgroundOverlay" ></div>
    </body>
--- a/scripts/system/create/entityList/html/js/entityList.js
+++ b/scripts/system/create/entityList/html/js/entityList.js
@ -9,8 +9,8 @@

 const ASCENDING_SORT = 1;
 const DESCENDING_SORT = -1;
-const ASCENDING_STRING = '&#x25B4;';
-const DESCENDING_STRING = '&#x25BE;';
+const ASCENDING_STRING = "&#x25B4;";
+const DESCENDING_STRING = "&#x25BE;";
 const BYTES_PER_MEGABYTE = 1024 * 1024;
 const COLLAPSE_EXTRA_INFO = "E";
 const EXPAND_EXTRA_INFO = "D";
@ -34,7 +34,7 @@ function displayIfNonZero(number) {
 }

 function getFilename(url) {
-    let urlParts = url.split('/');
+    let urlParts = url.split("/");
    return urlParts[urlParts.length - 1];
 }

@ -195,7 +195,7 @@ let lastSelectedEntity;
 */
 let entityListContextMenu = null;

-let currentSortColumnID = 'type';
+let currentSortColumnID = "type";
 let currentSortOrder = ASCENDING_SORT;
 let elSortOrders = {};
 let typeFilters = [];
@ -226,6 +226,7 @@ let elEntityTable,
    elToggleVisible,
    elActionsMenu,
    elSelectionMenu,
+    elToolsMenu,    
    elMenuBackgroundOverlay,
    elHmdMultiSelect, 
    elHmdCopy,
@ -249,6 +250,16 @@ let elEntityTable,
    elSelectFamily,
    elSelectTopFamily,
    elTeleportToEntity,
+    elSetCameraFocusToSelection,
+    elToggleLocalWorldMode,
+    elExportSelectedEntities,
+    elImportEntitiesFromFile,
+    elImportEntitiesFromUrl,
+    elGridActivator,
+    elSnapToGridActivator,
+    elSnapToGridActivatorCaption,
+    elAlignGridToSelection,
+    elAlignGridToAvatar,
    elFilterTypeMultiselectBox,
    elFilterTypeText,
    elFilterTypeOptions,
@ -268,7 +279,7 @@ let elEntityTable,
    elRenameInput;

 const ENABLE_PROFILING = false;
-let profileIndent = '';
+let profileIndent = "";
 const PROFILE_NOOP = function(_name, fn, args) {
    fn.apply(this, args);
 } ;
@ -298,6 +309,7 @@ function loaded() {
        elHmdMultiSelect = document.getElementById("hmdmultiselect");
        elActionsMenu = document.getElementById("actions");
        elSelectionMenu = document.getElementById("selection");
+        elToolsMenu = document.getElementById("tools");
        elMenuBackgroundOverlay = document.getElementById("menuBackgroundOverlay");
        elHmdCopy = document.getElementById("hmdcopy");
        elHmdCut = document.getElementById("hmdcut");
@ -320,6 +332,16 @@ function loaded() {
        elSelectFamily = document.getElementById("selectfamily");
        elSelectTopFamily = document.getElementById("selecttopfamily");
        elTeleportToEntity = document.getElementById("teleport-to-entity");
+        elSetCameraFocusToSelection = document.getElementById("setCameraFocusToSelection");
+        elToggleLocalWorldMode = document.getElementById("toggleLocalWorldMode");
+        elExportSelectedEntities = document.getElementById("exportSelectedEntities");
+        elImportEntitiesFromFile = document.getElementById("importEntitiesFromFile");
+        elImportEntitiesFromUrl = document.getElementById("importEntitiesFromUrl");
+        elGridActivator = document.getElementById("gridActivator");
+        elSnapToGridActivator = document.getElementById("snapToGridActivator");
+        elSnapToGridActivatorCaption = document.getElementById("snapToGridActivatorCaption");
+        elAlignGridToSelection = document.getElementById("alignGridToSelection");
+        elAlignGridToAvatar = document.getElementById("alignGridToAvatar");       
        elFilterTypeMultiselectBox = document.getElementById("filter-type-multiselect-box");
        elFilterTypeText = document.getElementById("filter-type-text");
        elFilterTypeOptions = document.getElementById("filter-type-options");
@ -335,17 +357,17 @@ function loaded() {
        elNoEntitiesMessage = document.getElementById("no-entities");
        elColumnsMultiselectBox = document.getElementById("entity-table-columns-multiselect-box");
        elColumnsOptions = document.getElementById("entity-table-columns-options");
-        elToggleSpaceMode = document.getElementById('toggle-space-mode');
+        elToggleSpaceMode = document.getElementById("toggle-space-mode");

        document.body.onclick = onBodyClick;
        elToggleLocked.onclick = function() {
-            EventBridge.emitWebEvent(JSON.stringify({ type: 'toggleLocked' }));
+            EventBridge.emitWebEvent(JSON.stringify({ type: "toggleLocked" }));
        };
        elToggleVisible.onclick = function() {
-            EventBridge.emitWebEvent(JSON.stringify({ type: 'toggleVisible' }));
+            EventBridge.emitWebEvent(JSON.stringify({ type: "toggleVisible" }));
        };
        elExport.onclick = function() {
-            EventBridge.emitWebEvent(JSON.stringify({ type: 'export'}));
+            EventBridge.emitWebEvent(JSON.stringify({ type: "export"}));
        };
        elHmdMultiSelect.onclick = function() {
            if (hmdMultiSelectMode) {
@ -355,7 +377,7 @@ function loaded() {
                elHmdMultiSelect.className = "white vglyph";
                hmdMultiSelectMode = true;
            }
-            EventBridge.emitWebEvent(JSON.stringify({ type: 'hmdMultiSelectMode', value: hmdMultiSelectMode }));
+            EventBridge.emitWebEvent(JSON.stringify({ type: "hmdMultiSelectMode", value: hmdMultiSelectMode }));
        };
        elActionsMenu.onclick = function() {
            document.getElementById("menuBackgroundOverlay").style.display = "block";
@ -365,47 +387,51 @@ function loaded() {
            document.getElementById("menuBackgroundOverlay").style.display = "block";
            document.getElementById("selection-menu").style.display = "block";
        };
+        elToolsMenu.onclick = function() {
+            document.getElementById("menuBackgroundOverlay").style.display = "block";
+            document.getElementById("tools-menu").style.display = "block";
+        };
        elMenuBackgroundOverlay.onclick = function() {
            closeAllEntityListMenu();
        };
        elHmdCopy.onclick = function() {
-            EventBridge.emitWebEvent(JSON.stringify({ type: 'copy' }));
+            EventBridge.emitWebEvent(JSON.stringify({ type: "copy" }));
            closeAllEntityListMenu();
        };
        elHmdCut.onclick = function() {
-            EventBridge.emitWebEvent(JSON.stringify({ type: 'cut' }));
+            EventBridge.emitWebEvent(JSON.stringify({ type: "cut" }));
            closeAllEntityListMenu();
        };
        elHmdPaste.onclick = function() {
-            EventBridge.emitWebEvent(JSON.stringify({ type: 'paste' }));
+            EventBridge.emitWebEvent(JSON.stringify({ type: "paste" }));
            closeAllEntityListMenu();
        };
        elHmdDuplicate.onclick = function() {
-            EventBridge.emitWebEvent(JSON.stringify({ type: 'duplicate' }));
+            EventBridge.emitWebEvent(JSON.stringify({ type: "duplicate" }));
            closeAllEntityListMenu();
        };
        elParent.onclick = function() {
-            EventBridge.emitWebEvent(JSON.stringify({ type: 'parent' }));
+            EventBridge.emitWebEvent(JSON.stringify({ type: "parent" }));
            closeAllEntityListMenu();
        };
        elUnparent.onclick = function() {
-            EventBridge.emitWebEvent(JSON.stringify({ type: 'unparent' }));
+            EventBridge.emitWebEvent(JSON.stringify({ type: "unparent" }));
            closeAllEntityListMenu();
        };
        elUndo.onclick = function() {
-            EventBridge.emitWebEvent(JSON.stringify({ type: 'undo' }));
+            EventBridge.emitWebEvent(JSON.stringify({ type: "undo" }));
            closeAllEntityListMenu();
        };
        elRedo.onclick = function() {
-            EventBridge.emitWebEvent(JSON.stringify({ type: 'redo' }));
+            EventBridge.emitWebEvent(JSON.stringify({ type: "redo" }));
            closeAllEntityListMenu();
        };         
        elDelete.onclick = function() {
-            EventBridge.emitWebEvent(JSON.stringify({ type: 'delete' }));
+            EventBridge.emitWebEvent(JSON.stringify({ type: "delete" }));
            closeAllEntityListMenu();
        };
        elMoveEntitySelectionToAvatar.onclick = function() {
-            EventBridge.emitWebEvent(JSON.stringify({ type: 'moveEntitySelectionToAvatar' }));
+            EventBridge.emitWebEvent(JSON.stringify({ type: "moveEntitySelectionToAvatar" }));
            closeAllEntityListMenu();
        };
        elSelectAll.onclick = function() {
@ -467,39 +493,75 @@ function loaded() {
            closeAllEntityListMenu();
        };
        elSelectAllInBox.onclick = function() {
-            EventBridge.emitWebEvent(JSON.stringify({ type: 'selectAllInBox' }));
+            EventBridge.emitWebEvent(JSON.stringify({ type: "selectAllInBox" }));
            closeAllEntityListMenu();
        };
        elSelectAllTouchingBox.onclick = function() {
-            EventBridge.emitWebEvent(JSON.stringify({ type: 'selectAllTouchingBox' }));
+            EventBridge.emitWebEvent(JSON.stringify({ type: "selectAllTouchingBox" }));
            closeAllEntityListMenu();
        };
        elSelectParent.onclick = function() {
-            EventBridge.emitWebEvent(JSON.stringify({ type: 'selectParent' }));
+            EventBridge.emitWebEvent(JSON.stringify({ type: "selectParent" }));
            closeAllEntityListMenu();
        };
        elSelectTopParent.onclick = function() {
-            EventBridge.emitWebEvent(JSON.stringify({ type: 'selectTopParent' }));
+            EventBridge.emitWebEvent(JSON.stringify({ type: "selectTopParent" }));
            closeAllEntityListMenu();
        };
        elAddChildrenToSelection.onclick = function() {
-            EventBridge.emitWebEvent(JSON.stringify({ type: 'addChildrenToSelection' }));
+            EventBridge.emitWebEvent(JSON.stringify({ type: "addChildrenToSelection" }));
            closeAllEntityListMenu();
        };
        elSelectFamily.onclick = function() {
-            EventBridge.emitWebEvent(JSON.stringify({ type: 'selectFamily' }));
+            EventBridge.emitWebEvent(JSON.stringify({ type: "selectFamily" }));
            closeAllEntityListMenu();
        };
        elSelectTopFamily.onclick = function() {
-            EventBridge.emitWebEvent(JSON.stringify({ type: 'selectTopFamily' }));
+            EventBridge.emitWebEvent(JSON.stringify({ type: "selectTopFamily" }));
            closeAllEntityListMenu();
        };
        elTeleportToEntity.onclick = function () {
            EventBridge.emitWebEvent(JSON.stringify({ type: "teleportToEntity" }));
            closeAllEntityListMenu();
        };
+        elSetCameraFocusToSelection.onclick = function () {
+            EventBridge.emitWebEvent(JSON.stringify({ type: "setCameraFocusToSelection" }));
+            closeAllEntityListMenu();
+        };
+        elToggleLocalWorldMode.onclick = function () {
+            EventBridge.emitWebEvent(JSON.stringify({ type: "toggleSpaceMode" }));
+            closeAllEntityListMenu();
+        };
+        elExportSelectedEntities.onclick = function () {
+            EventBridge.emitWebEvent(JSON.stringify({ type: "export"}));
+            closeAllEntityListMenu();
+        };
+        elImportEntitiesFromFile.onclick = function () {
+            EventBridge.emitWebEvent(JSON.stringify({ type: "importFromFile"}));
+            closeAllEntityListMenu();
+        };
+        elImportEntitiesFromUrl.onclick = function () {
+            EventBridge.emitWebEvent(JSON.stringify({ type: "importFromUrl"}));
+            closeAllEntityListMenu();
+        };
+        elGridActivator.onclick = function () {
+            EventBridge.emitWebEvent(JSON.stringify({ type: "toggleGridVisibility" }));
+            closeAllEntityListMenu();
+        };
+        elSnapToGridActivator.onclick = function () {
+            EventBridge.emitWebEvent(JSON.stringify({ type: "toggleSnapToGrid" }));
+            closeAllEntityListMenu();
+        };
+        elAlignGridToSelection.onclick = function () {
+            EventBridge.emitWebEvent(JSON.stringify({ type: "alignGridToSelection" }));
+            closeAllEntityListMenu();
+        };
+        elAlignGridToAvatar.onclick = function () {
+            EventBridge.emitWebEvent(JSON.stringify({ type: "alignGridToAvatar" }));
+            closeAllEntityListMenu();
+        };        
        elToggleSpaceMode.onclick = function() {
-            EventBridge.emitWebEvent(JSON.stringify({ type: 'toggleSpaceMode' }));
+            EventBridge.emitWebEvent(JSON.stringify({ type: "toggleSpaceMode" }));
        };
        elRefresh.onclick = refreshEntities;
        elFilterTypeMultiselectBox.onclick = onToggleTypeDropdown;
@ -517,11 +579,11 @@ function loaded() {
            let type = FILTER_TYPES[i];
            let typeFilterID = "filter-type-" + type;
            
-            let elDiv = document.createElement('div');
+            let elDiv = document.createElement("div");
            elDiv.onclick = onToggleTypeFilter;
            elFilterTypeOptions.insertBefore(elDiv, elFilterTypeOptionsButtons);
            
-            let elInput = document.createElement('input');
+            let elInput = document.createElement("input");
            elInput.setAttribute("type", "checkbox");
            elInput.setAttribute("id", typeFilterID);
            elInput.setAttribute("filterType", type);
@ -529,12 +591,12 @@ function loaded() {
            elFilterTypeInputs[type] = elInput;
            elDiv.appendChild(elInput);
            
-            let elLabel = document.createElement('label');
+            let elLabel = document.createElement("label");
            elLabel.setAttribute("for", typeFilterID);
            elLabel.innerText = type;
            elDiv.appendChild(elLabel);
            
-            let elSpan = document.createElement('span');
+            let elSpan = document.createElement("span");
            elSpan.setAttribute("class", "typeIcon");
            elSpan.innerHTML = ENTITY_TYPE_ICON[type];

@ -567,11 +629,11 @@ function loaded() {
                elTh.innerText = columnData.columnHeader;
            }
            elTh.onmousedown = function(event) {
-                if (event.target.nodeName === 'TH') {
+                if (event.target.nodeName === "TH") {
                    elTargetTh = event.target;
                    targetColumnIndex = parseInt(elTargetTh.getAttribute("columnIndex"));
                    lastColumnSwapPosition = event.clientX;
-                } else if (event.target.nodeName === 'SPAN') {
+                } else if (event.target.nodeName === "SPAN") {
                    elTargetSpan = event.target;
                }
                initialThEvent = event;
@ -594,18 +656,18 @@ function loaded() {
            if (columnData.alwaysShown !== true) { 
                let columnDropdownID = "entity-table-column-" + columnID;
                
-                let elDiv = document.createElement('div');
+                let elDiv = document.createElement("div");
                elDiv.onclick = onToggleColumn;
                elColumnsOptions.appendChild(elDiv);
                
-                let elInput = document.createElement('input');
+                let elInput = document.createElement("input");
                elInput.setAttribute("type", "checkbox");
                elInput.setAttribute("id", columnDropdownID);
                elInput.setAttribute("columnID", columnID);
                elInput.checked = columnData.initiallyShown === true;
                elDiv.appendChild(elInput);
                
-                let elLabel = document.createElement('label');
+                let elLabel = document.createElement("label");
                elLabel.setAttribute("for", columnDropdownID);
                elLabel.innerText = columnData.dropdownLabel;
                elDiv.appendChild(elLabel);
@ -640,7 +702,7 @@ function loaded() {

            let elCell = entity.elRow.childNodes[getColumnIndex("name")];
            elRenameInput = document.createElement("input");
-            elRenameInput.setAttribute('class', 'rename-entity');
+            elRenameInput.setAttribute("class", "rename-entity");
            elRenameInput.value = entity.name;
            let ignoreClicks = function(event) {
                event.stopPropagation();
@ -705,22 +767,22 @@ function loaded() {
        entityListContextMenu.setOnSelectedCallback(function(optionName, selectedEntityID) {
            switch (optionName) {
                case "Cut":
-                    EventBridge.emitWebEvent(JSON.stringify({ type: 'cut' }));
+                    EventBridge.emitWebEvent(JSON.stringify({ type: "cut" }));
                    break;
                case "Copy":
-                    EventBridge.emitWebEvent(JSON.stringify({ type: 'copy' }));
+                    EventBridge.emitWebEvent(JSON.stringify({ type: "copy" }));
                    break;
                case "Paste":
-                    EventBridge.emitWebEvent(JSON.stringify({ type: 'paste' }));
+                    EventBridge.emitWebEvent(JSON.stringify({ type: "paste" }));
                    break;
                case "Rename":
                    startRenamingEntity(selectedEntityID);
                    break;
                case "Duplicate":
-                    EventBridge.emitWebEvent(JSON.stringify({ type: 'duplicate' }));
+                    EventBridge.emitWebEvent(JSON.stringify({ type: "duplicate" }));
                    break;
                case "Delete":
-                    EventBridge.emitWebEvent(JSON.stringify({ type: 'delete' }));
+                    EventBridge.emitWebEvent(JSON.stringify({ type: "delete" }));
                    break;
            }
        });
@ -744,11 +806,11 @@ function loaded() {
                }));
            }

-            let enabledContextMenuItems = ['Copy', 'Paste', 'Duplicate'];
+            let enabledContextMenuItems = ["Copy", "Paste", "Duplicate"];
            if (entitiesByID[entityID] && !entitiesByID[entityID].locked) {
-                enabledContextMenuItems.push('Cut');
-                enabledContextMenuItems.push('Rename');
-                enabledContextMenuItems.push('Delete');
+                enabledContextMenuItems.push("Cut");
+                enabledContextMenuItems.push("Rename");
+                enabledContextMenuItems.push("Delete");
            }

            entityListContextMenu.open(clickEvent, entityID, enabledContextMenuItems);
@ -947,7 +1009,7 @@ function loaded() {
                    if (id === deletedIDs[i]) {
                        let elRow = entities[j].elRow;
                        if (elRow) {
-                            elRow.className = '';
+                            elRow.className = "";
                            elRow.dataset.entityID = EMPTY_ENTITY_ID;
                        }
                        entities.splice(j, 1);
@ -1030,7 +1092,7 @@ function loaded() {
        }
        
        function refreshEntities() {
-            EventBridge.emitWebEvent(JSON.stringify({ type: 'refresh' }));
+            EventBridge.emitWebEvent(JSON.stringify({ type: "refresh" }));
        }
        
        function refreshFooter() {
@ -1057,7 +1119,7 @@ function loaded() {
                if (entity !== undefined) {
                    entity.selected = false;
                    if (entity.elRow) {
-                        entity.elRow.className = '';
+                        entity.elRow.className = "";
                    }
                }
            });
@ -1071,9 +1133,9 @@ function loaded() {
                    entity.selected = true;
                    if (entity.elRow) {
                        if (id === lastSelectedEntity) {
-                            entity.elRow.className = 'last-selected';
+                            entity.elRow.className = "last-selected";
                        } else {
-                            entity.elRow.className = 'selected';
+                            entity.elRow.className = "selected";
                        }
                    }
                } else {
@ -1144,12 +1206,12 @@ function loaded() {
            // if this entity was previously selected flag it's row as selected
            if (itemData.selected) {
                if (itemData.id === lastSelectedEntity) {
-                    elRow.className = 'last-selected';
+                    elRow.className = "last-selected";
                } else {
-                    elRow.className = 'selected';
+                    elRow.className = "selected";
                }
            } else {
-                elRow.className = '';
+                elRow.className = "";
            }

            // if this row previously had an associated entity ID that wasn't the new entity ID then clear
@ -1202,9 +1264,9 @@ function loaded() {
        }
        
        function onRadiusChange() {
-            elFilterRadius.value = elFilterRadius.value.replace(/[^0-9]/g, '');
+            elFilterRadius.value = elFilterRadius.value.replace(/[^0-9]/g, "");
            elFilterRadius.value = Math.max(elFilterRadius.value, 0);
-            EventBridge.emitWebEvent(JSON.stringify({ type: 'radius', radius: elFilterRadius.value }));
+            EventBridge.emitWebEvent(JSON.stringify({ type: "radius", radius: elFilterRadius.value }));
            refreshEntities();
        }
        
@ -1425,7 +1487,7 @@ function loaded() {
            }
            
            if (isColumnsSettingLoaded) {
-                EventBridge.emitWebEvent(JSON.stringify({ type: 'saveColumnsConfigSetting', columnsData: columns }));
+                EventBridge.emitWebEvent(JSON.stringify({ type: "saveColumnsConfigSetting", columnsData: columns }));
            }
            
            entityList.refresh();
@ -1628,7 +1690,7 @@ function loaded() {
            }

            EventBridge.emitWebEvent(JSON.stringify({
-                type: 'keyUpEvent',
+                type: "keyUpEvent",
                keyUpEvent: {
                    code,
                    key,
@ -1673,6 +1735,12 @@ function loaded() {
                    removeEntities(data.ids);
                } else if (data.type === "setSpaceMode") {
                    setSpaceMode(data.spaceMode);
+                } else if (data.type === "setSnapToGrid") {
+                    if (data.snap) { 
+                        elSnapToGridActivatorCaption.innerHTML = "&#x2713; Deactivate Snap to Grid";
+                    } else {
+                        elSnapToGridActivatorCaption.innerHTML = "Activate Snap to Grid";
+                    }
                } else if (data.type === "confirmHMDstate") {
                    if (data.isHmd) {
                        document.getElementById("hmdmultiselect").style.display = "inline";
@ -1722,7 +1790,7 @@ function loaded() {
                                }
                            }
                        } else {
-                            EventBridge.emitWebEvent(JSON.stringify({ type: 'saveColumnsConfigSetting', columnsData: "" }));
+                            EventBridge.emitWebEvent(JSON.stringify({ type: "saveColumnsConfigSetting", columnsData: "" }));
                        }
                    }
                    isColumnsSettingLoaded = true;
@ -1735,7 +1803,7 @@ function loaded() {
        
        window.addEventListener("resize", updateColumnWidths);
        
-        EventBridge.emitWebEvent(JSON.stringify({ type: 'loadConfigSetting' }));
+        EventBridge.emitWebEvent(JSON.stringify({ type: "loadConfigSetting" }));
    });
    
    augmentSpinButtons();
@ -1758,6 +1826,7 @@ function loaded() {
        document.getElementById("menuBackgroundOverlay").style.display = "none";
        document.getElementById("selection-menu").style.display = "none";
        document.getElementById("actions-menu").style.display = "none";
+        document.getElementById("tools-menu").style.display = "none";
    }

 }
--- a/scripts/system/create/qml/EditToolsTabView.qml
+++ b/scripts/system/create/qml/EditToolsTabView.qml
@ -210,8 +210,8 @@ TabBar {
                        text: "Import Entities (.json) from a File"
                        color: hifi.buttons.black
                        colorScheme: hifi.colorSchemes.dark
-                        anchors.right: parent.horizontalCenter
-                        anchors.rightMargin: 10
+                        anchors.right: parent.right
+                        anchors.rightMargin: 55
                        anchors.left: parent.left
                        anchors.leftMargin: 55
                        anchors.top: assetServerButton.bottom
@ -231,9 +231,9 @@ TabBar {
                        colorScheme: hifi.colorSchemes.dark
                        anchors.right: parent.right
                        anchors.rightMargin: 55
-                        anchors.left: parent.horizontalCenter
-                        anchors.leftMargin: 10
-                        anchors.top: assetServerButton.bottom
+                        anchors.left: parent.left
+                        anchors.leftMargin: 55
+                        anchors.top: importButton.bottom
                        anchors.topMargin: 20
                        onClicked: {
                            editRoot.sendToScript({
--- a/scripts/system/html/css/edit-style.css
+++ b/scripts/system/html/css/edit-style.css
@ -404,7 +404,7 @@ input[type=button], button.hifi-edit-button {
    text-transform: uppercase;
    vertical-align: top;
    height: 28px;
-    min-width: 120px;
+    min-width: 70px;
    padding: 0 18px;
    margin-right: 6px;
    border-radius: 5px;
--- a/scripts/system/libraries/gridTool.js
+++ b/scripts/system/libraries/gridTool.js
@ -1,10 +1,19 @@
+//  gridTool.js
+//
+//  Created by Ryan Huffman on 6 Nov 2014
+//  Copyright 2014 High Fidelity, Inc.
+//  Copyright 2020 Vircadia contributors.
+//
+//  Distributed under the Apache License, Version 2.0.
+//  See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
+//
 /* global keyUpEventFromUIWindow */

 var GRID_CONTROLS_HTML_URL = Script.resolvePath('../html/gridControls.html');

 Grid = function() {
    var that = {};
-    var gridColor = { red: 0, green: 0, blue: 0 };
+    var gridColor = { red: 255, green: 255, blue: 255 };
    var gridAlpha = 0.6;
    var origin = { x: 0, y: +MyAvatar.getJointPosition('LeftToeBase').y.toFixed(1) + 0.1, z: 0 };
    var scale = 500;
@ -16,18 +25,19 @@ Grid = function() {

    var snapToGrid = false;

-    var gridOverlay = Overlays.addOverlay("grid", {
+    var gridEntityTool = Entities.addEntity({
+        type: "Grid",
        rotation: Quat.fromPitchYawRollDegrees(90, 0, 0),
        dimensions: { x: scale, y: scale, z: scale },
        position: origin,
        visible: false,
-        drawInFront: false,
+        renderLayer: "world",
        color: gridColor,
        alpha: gridAlpha,
        minorGridEvery: minorGridEvery,
        majorGridEvery: majorGridEvery,
        ignorePickIntersection: true
-    });
+    }, "local");

    that.visible = false;
    that.enabled = false;
@ -163,6 +173,14 @@ Grid = function() {
        newPosition = Vec3.subtract(newPosition, { x: 0, y: SelectionManager.worldDimensions.y * 0.5, z: 0 });
        that.setPosition(newPosition);
    };
+    
+    that.moveToAvatar = function() {
+        var position = MyAvatar.getJointPosition("LeftFoot");
+        if (position.x === 0.0 && position.y === 0.0 && position.z === 0.0) {
+            position = MyAvatar.position;
+        }
+        that.setPosition(position);        
+    };

    that.emitUpdate = function() {
        if (that.onUpdate) {
@ -214,7 +232,7 @@ Grid = function() {
    };

    function updateGrid(noUpdate) {
-        Overlays.editOverlay(gridOverlay, {
+        Entities.editEntity(gridEntityTool, {
            position: { x: 0, y: origin.y, z: 0 },
            visible: that.visible && that.enabled,
            minorGridEvery: minorGridEvery,
@ -222,6 +240,7 @@ Grid = function() {
            color: gridColor,
            alpha: gridAlpha
        });
+        

        if (!noUpdate) {
            that.emitUpdate();
@ -229,7 +248,7 @@ Grid = function() {
    }

    function cleanup() {
-        Overlays.deleteOverlay(gridOverlay);
+        Entities.deleteEntity(gridEntityTool);
    }

    that.addListener = function(callback) {
@ -283,11 +302,7 @@ GridTool = function(opts) {
        } else if (data.type === "action") {
            var action = data.action;
            if (action === "moveToAvatar") {
-                var position = MyAvatar.getJointPosition("LeftFoot");
-                if (position.x === 0 && position.y === 0 && position.z === 0) {
-                    position = MyAvatar.position;
-                }
-                horizontalGrid.setPosition(position);
+                horizontalGrid.moveToAvatar();
            } else if (action === "moveToSelection") {
                horizontalGrid.moveToSelection();
            }