Add and wire up "search in view" JavaScript API stub

libraries/entities/src/EntityScriptingInterface.cpp

@@ -550,6 +550,14 @@ QVector<QUuid> EntityScriptingInterface::findEntities(const glm::vec3& center, f
     return result;
 }
 
+QVector<QUuid> EntityScriptingInterface::findEntitiesInView(const glm::vec3& center, float radius) const {
+    QVector<QUuid> result;
+
+    // TODO
+
+    return result;
+}
+
 QVector<QUuid> EntityScriptingInterface::findEntitiesInBox(const glm::vec3& corner, const glm::vec3& dimensions) const {
     QVector<QUuid> result;
     if (_entityTree) {

libraries/entities/src/EntityScriptingInterface.h

@@ -129,6 +129,10 @@ public slots:
 
     /// finds models within the search sphere specified by the center point and radius
     /// this function will not find any models in script engine contexts which don't have access to models
+    Q_INVOKABLE QVector<QUuid> findEntitiesInView(const glm::vec3& center, float radius) const;
+
+    /// finds models within the box specified by the corner and dimensions
+    /// this function will not find any models in script engine contexts which don't have access to models
     Q_INVOKABLE QVector<QUuid> findEntitiesInBox(const glm::vec3& corner, const glm::vec3& dimensions) const;
 
     /// If the scripting context has visible entities, this will determine a ray intersection, the results

scripts/system/html/css/edit-style.css

@@ -366,6 +366,10 @@ input[type=button]:disabled {
     background: linear-gradient(#575757 20%, #252525 100%);
 }
 
+input[type=button][pressed=pressed] {
+    color: #00b4ef;
+}
+
 input[type=checkbox] {
     display: none;
 }
@@ -861,11 +865,6 @@ textarea:enabled[scrolling="true"]::-webkit-resizer {
     position: relative; /* New positioning context. */
 }
 
-#entity-list .glyph {
-    font-family: HiFi-Glyphs;
-    font-size: 15px;
-}
-
 #search-area {
     padding-right: 168px;
     padding-bottom: 24px;
@@ -875,7 +874,7 @@ textarea:enabled[scrolling="true"]::-webkit-resizer {
     width: 98%;
 }
 
-#inView {
+#in-view {
     position: absolute;
     right: 126px;
 }
@@ -904,8 +903,11 @@ textarea:enabled[scrolling="true"]::-webkit-resizer {
     border-left: 2px solid #575757;
     border-right: 2px solid #575757;
     background-color: #1c1c1c;
+}
 
-    height: 100px;
+#entity-table-scroll .glyph {
+    font-family: HiFi-Glyphs;
+    font-size: 15px;
 }
 
 #entity-table {

scripts/system/html/entityList.html

@@ -29,7 +29,7 @@
         <div id="entity-list">
             <div id="search-area">
                 <span class="icon-input"><input type="text" class="search" id="filter" placeholder="Filter" /><span>Y</span></span>
-                <input type="button" id="inView" class="glyph" value="&#xe007;" />
+                <input type="button" id="in-view" class="glyph" value="&#xe007;" />
                 <div id="radius-and-unit" class="number">
                     <label for="radius">Search radius <span class="unit">m</span></label>
                     <input type="number" id="radius" value="100" />
@@ -88,7 +88,7 @@
                     </tfoot>
                 </table>
                 <div id="no-entities">
-                    No entities found within a <span id="no-entities-radius">100</span> meter radius. Try moving to a different location and refreshing.
+                    No entities found <span id="no-entities-in-view">in view</span> within a <span id="no-entities-radius">100</span> meter radius. Try moving to a different location and refreshing.
                 </div>
             </div>
         </div>

scripts/system/html/js/entityList.js

@@ -36,13 +36,15 @@ function loaded() {
       elToggleVisible = document.getElementById("visible");
       elDelete = document.getElementById("delete");
       elFilter = document.getElementById("filter");
-      elTeleport = document.getElementById("teleport");
+      elInView = document.getElementById("in-view")
       elRadius = document.getElementById("radius");
+      elTeleport = document.getElementById("teleport");
       elEntityTable = document.getElementById("entity-table");
       elInfoToggle = document.getElementById("info-toggle");
       elInfoToggleGlyph = elInfoToggle.firstChild;
       elFooter = document.getElementById("footer-text");
       elNoEntitiesMessage = document.getElementById("no-entities");
+      elNoEntitiesInView = document.getElementById("no-entities-in-view");
       elNoEntitiesRadius = document.getElementById("no-entities-radius");
       elEntityTableScroll = document.getElementById("entity-table-scroll");
       
@@ -271,6 +273,22 @@ function loaded() {
           }
       }, false);
       
+      var isFilterInView = false;
+      var FILTER_IN_VIEW_ATTRIBUTE = "pressed";
+      elNoEntitiesInView.style.display = "none";
+      elInView.onclick = function () {
+          isFilterInView = !isFilterInView;
+          if (isFilterInView) {
+              elInView.setAttribute(FILTER_IN_VIEW_ATTRIBUTE, FILTER_IN_VIEW_ATTRIBUTE);
+              elNoEntitiesInView.style.display = "inline";
+          } else {
+              elInView.removeAttribute(FILTER_IN_VIEW_ATTRIBUTE);
+              elNoEntitiesInView.style.display = "none";
+          }
+          EventBridge.emitWebEvent(JSON.stringify({ type: "filterInView", filterInView: isFilterInView }));
+          refreshEntities();
+      }
+
       elRadius.onchange = function () {
           elRadius.value = Math.max(elRadius.value, 0);
           EventBridge.emitWebEvent(JSON.stringify({ type: 'radius', radius: elRadius.value }));

scripts/system/libraries/entityList.js

@@ -9,7 +9,7 @@ EntityListTool = function(opts) {
     });
 
 
-
+    var filterInView = false;
     var searchRadius = 100;
 
     var visible = false;
@@ -54,7 +54,14 @@ EntityListTool = function(opts) {
 
     that.sendUpdate = function() {
         var entities = [];
-        var ids = Entities.findEntities(MyAvatar.position, searchRadius);
+
+        var ids;
+        if (filterInView) {
+            ids = Entities.findEntitiesInView(MyAvatar.position, searchRadius);
+        } else {
+            ids = Entities.findEntities(MyAvatar.position, searchRadius);
+        }
+
         for (var i = 0; i < ids.length; i++) {
             var id = ids[i];
             var properties = Entities.getEntityProperties(id);
@@ -115,9 +122,10 @@ EntityListTool = function(opts) {
             toggleSelectedEntitiesLocked();
         } else if (data.type == "toggleVisible") {
             toggleSelectedEntitiesVisible();
+        } else if (data.type === "filterInView") {
+            filterInView = data.filterInView === true;
         } else if (data.type === "radius") {
             searchRadius = data.radius;
-            that.sendUpdate();
         }
     });