mirror of
https://github.com/overte-org/overte.git
synced 2025-04-28 07:45:21 +02:00
381 lines
No EOL
18 KiB
HTML
381 lines
No EOL
18 KiB
HTML
<!--
|
|
// entityList.html
|
|
//
|
|
// Created by Ryan Huffman on 19 Nov 2014
|
|
// 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
|
|
-->
|
|
|
|
<html>
|
|
<head>
|
|
<link rel="stylesheet" type="text/css" href="edit-style.css">
|
|
<script src="list.min.js"></script>
|
|
<script type="text/javascript" src="qrc:///qtwebchannel/qwebchannel.js"></script>
|
|
<script type="text/javascript" src="eventBridgeLoader.js"></script>
|
|
<script type="text/javascript" src="spinButtons.js"></script>
|
|
<script>
|
|
var entities = {};
|
|
var selectedEntities = [];
|
|
var currentSortColumn = 'type';
|
|
var currentSortOrder = 'des';
|
|
var entityList = null;
|
|
var refreshEntityListTimer = null;
|
|
const ASCENDING_STRING = '▾';
|
|
const DESCENDING_STRING = '▴';
|
|
const LOCKED_GLYPH = "";
|
|
const VISIBLE_GLYPH = "";
|
|
const DELETE = 46; // Key code for the delete key.
|
|
const MAX_ITEMS = Number.MAX_VALUE; // Used to set the max length of the list of discovered entities.
|
|
|
|
debugPrint = function (message) {
|
|
console.log(message);
|
|
};
|
|
|
|
function loaded() {
|
|
openEventBridge(function() {
|
|
entityList = new List('entity-list', { valueNames: ['name', 'type', 'url', 'locked', 'visible'], page: MAX_ITEMS});
|
|
entityList.clear();
|
|
elEntityTable = document.getElementById("entity-table");
|
|
elEntityTableBody = document.getElementById("entity-table-body");
|
|
elRefresh = document.getElementById("refresh");
|
|
elToggleLocked = document.getElementById("locked");
|
|
elToggleVisible = document.getElementById("visible");
|
|
elDelete = document.getElementById("delete");
|
|
elTeleport = document.getElementById("teleport");
|
|
elRadius = document.getElementById("radius");
|
|
elFooter = document.getElementById("footer-text");
|
|
elNoEntitiesMessage = document.getElementById("no-entities");
|
|
elNoEntitiesRadius = document.getElementById("no-entities-radius");
|
|
elEntityTableScroll = document.getElementById("entity-table-scroll");
|
|
|
|
document.getElementById("entity-name").onclick = function() {
|
|
setSortColumn('name');
|
|
};
|
|
document.getElementById("entity-type").onclick = function() {
|
|
setSortColumn('type');
|
|
};
|
|
document.getElementById("entity-url").onclick = function() {
|
|
setSortColumn('url');
|
|
};
|
|
document.getElementById("entity-locked").onclick = function () {
|
|
setSortColumn('locked');
|
|
};
|
|
document.getElementById("entity-visible").onclick = function () {
|
|
setSortColumn('visible');
|
|
};
|
|
|
|
function onRowClicked(clickEvent) {
|
|
var id = this.dataset.entityId;
|
|
var selection = [this.dataset.entityId];
|
|
if (clickEvent.ctrlKey) {
|
|
selection = selection.concat(selectedEntities);
|
|
} else if (clickEvent.shiftKey && selectedEntities.length > 0) {
|
|
var previousItemFound = -1;
|
|
var clickedItemFound = -1;
|
|
for (var entity in entityList.visibleItems) {
|
|
if (clickedItemFound === -1 && this.dataset.entityId == entityList.visibleItems[entity].values().id) {
|
|
clickedItemFound = entity;
|
|
} else if(previousItemFound === -1 && selectedEntities[0] == entityList.visibleItems[entity].values().id) {
|
|
previousItemFound = entity;
|
|
}
|
|
}
|
|
if (previousItemFound !== -1 && clickedItemFound !== -1) {
|
|
var betweenItems = [];
|
|
var toItem = Math.max(previousItemFound, clickedItemFound);
|
|
// skip first and last item in this loop, we add them to selection after the loop
|
|
for (var i = (Math.min(previousItemFound, clickedItemFound) + 1); i < toItem; i++) {
|
|
entityList.visibleItems[i].elm.className = 'selected';
|
|
betweenItems.push(entityList.visibleItems[i].values().id);
|
|
}
|
|
if (previousItemFound > clickedItemFound) {
|
|
// always make sure that we add the items in the right order
|
|
betweenItems.reverse();
|
|
}
|
|
selection = selection.concat(betweenItems, selectedEntities);
|
|
}
|
|
}
|
|
|
|
selectedEntities = selection;
|
|
|
|
this.className = 'selected';
|
|
|
|
EventBridge.emitWebEvent(JSON.stringify({
|
|
type: "selectionUpdate",
|
|
focus: false,
|
|
entityIds: selection,
|
|
}));
|
|
}
|
|
|
|
function onRowDoubleClicked() {
|
|
EventBridge.emitWebEvent(JSON.stringify({
|
|
type: "selectionUpdate",
|
|
focus: true,
|
|
entityIds: [this.dataset.entityId],
|
|
}));
|
|
}
|
|
|
|
function addEntity(id, name, type, url, locked, visible) {
|
|
var urlParts = url.split('/');
|
|
var filename = urlParts[urlParts.length - 1];
|
|
|
|
if (entities[id] === undefined) {
|
|
entityList.add([{ id: id, name: name, type: type, url: filename, locked: locked, visible: visible }],
|
|
function (items) {
|
|
var currentElement = items[0].elm;
|
|
var id = items[0]._values.id;
|
|
entities[id] = {
|
|
id: id,
|
|
name: name,
|
|
el: currentElement,
|
|
item: items[0]
|
|
};
|
|
currentElement.setAttribute('id', 'entity_' + id);
|
|
currentElement.setAttribute('title', url);
|
|
currentElement.dataset.entityId = id;
|
|
currentElement.onclick = onRowClicked;
|
|
currentElement.ondblclick = onRowDoubleClicked;
|
|
});
|
|
|
|
if (refreshEntityListTimer) {
|
|
clearTimeout(refreshEntityListTimer);
|
|
}
|
|
refreshEntityListTimer = setTimeout(refreshEntityListObject, 50);
|
|
} else {
|
|
var item = entities[id].item;
|
|
item.values({ name: name, url: filename, locked: locked, visible: visible });
|
|
}
|
|
}
|
|
|
|
function clearEntities() {
|
|
entities = {};
|
|
entityList.clear();
|
|
}
|
|
|
|
var elSortOrder = {
|
|
name: document.querySelector('#entity-name .sort-order'),
|
|
type: document.querySelector('#entity-type .sort-order'),
|
|
url: document.querySelector('#entity-url .sort-order'),
|
|
locked: document.querySelector('#entity-locked .sort-order'),
|
|
visible: document.querySelector('#entity-visible .sort-order')
|
|
}
|
|
function setSortColumn(column) {
|
|
if (currentSortColumn == column) {
|
|
currentSortOrder = currentSortOrder == "asc" ? "desc" : "asc";
|
|
} else {
|
|
elSortOrder[currentSortColumn].innerHTML = "";
|
|
currentSortColumn = column;
|
|
currentSortOrder = "asc";
|
|
}
|
|
elSortOrder[column].innerHTML = currentSortOrder == "asc" ? ASCENDING_STRING : DESCENDING_STRING;
|
|
entityList.sort(currentSortColumn, { order: currentSortOrder });
|
|
}
|
|
setSortColumn('type');
|
|
|
|
function refreshEntities() {
|
|
clearEntities();
|
|
EventBridge.emitWebEvent(JSON.stringify({ type: 'refresh' }));
|
|
}
|
|
|
|
function refreshEntityListObject() {
|
|
refreshEntityListTimer = null;
|
|
entityList.sort(currentSortColumn, { order: currentSortOrder });
|
|
entityList.search(document.getElementById("filter").value);
|
|
}
|
|
|
|
function updateSelectedEntities(selectedEntities) {
|
|
var notFound = false;
|
|
for (var id in entities) {
|
|
entities[id].el.className = '';
|
|
}
|
|
for (var i = 0; i < selectedEntities.length; i++) {
|
|
var id = selectedEntities[i];
|
|
if (id in entities) {
|
|
var entity = entities[id];
|
|
entity.el.className = 'selected';
|
|
} else {
|
|
notFound = true;
|
|
}
|
|
}
|
|
|
|
if (selectedEntities.length > 1) {
|
|
elFooter.firstChild.nodeValue = selectedEntities.length + " entities selected";
|
|
} else if (selectedEntities.length === 1) {
|
|
elFooter.firstChild.nodeValue = "1 entity selected";
|
|
} else if (entityList.visibleItems.length === 1) {
|
|
elFooter.firstChild.nodeValue = "1 entity found";
|
|
} else {
|
|
elFooter.firstChild.nodeValue = entityList.visibleItems.length + " entities found";
|
|
}
|
|
|
|
// HACK: Fixes the footer and header text sometimes not displaying after adding or deleting entities.
|
|
// The problem appears to be a bug in the Qt HTML/CSS rendering (Qt 5.5).
|
|
document.getElementById("radius").focus();
|
|
document.getElementById("radius").blur();
|
|
|
|
return notFound;
|
|
}
|
|
|
|
elRefresh.onclick = function() {
|
|
refreshEntities();
|
|
}
|
|
elToggleLocked.onclick = function () {
|
|
EventBridge.emitWebEvent(JSON.stringify({ type: 'toggleLocked' }));
|
|
}
|
|
elToggleVisible.onclick = function () {
|
|
EventBridge.emitWebEvent(JSON.stringify({ type: 'toggleVisible' }));
|
|
}
|
|
elTeleport.onclick = function () {
|
|
EventBridge.emitWebEvent(JSON.stringify({ type: 'teleport' }));
|
|
}
|
|
elDelete.onclick = function() {
|
|
EventBridge.emitWebEvent(JSON.stringify({ type: 'delete' }));
|
|
refreshEntities();
|
|
}
|
|
|
|
document.addEventListener("keydown", function (keyDownEvent) {
|
|
if (keyDownEvent.target.nodeName === "INPUT") {
|
|
return;
|
|
}
|
|
var keyCode = keyDownEvent.keyCode;
|
|
if (keyCode === DELETE) {
|
|
EventBridge.emitWebEvent(JSON.stringify({ type: 'delete' }));
|
|
refreshEntities();
|
|
}
|
|
}, false);
|
|
|
|
elRadius.onchange = function () {
|
|
elRadius.value = Math.max(elRadius.value, 0);
|
|
EventBridge.emitWebEvent(JSON.stringify({ type: 'radius', radius: elRadius.value }));
|
|
refreshEntities();
|
|
elNoEntitiesRadius.firstChild.nodeValue = elRadius.value;
|
|
}
|
|
|
|
if (window.EventBridge !== undefined) {
|
|
EventBridge.scriptEventReceived.connect(function(data) {
|
|
data = JSON.parse(data);
|
|
|
|
if (data.type === "clearEntityList") {
|
|
clearEntities();
|
|
} else if (data.type == "selectionUpdate") {
|
|
var notFound = updateSelectedEntities(data.selectedIDs);
|
|
if (notFound) {
|
|
refreshEntities();
|
|
}
|
|
} else if (data.type == "update") {
|
|
var newEntities = data.entities;
|
|
if (newEntities.length == 0) {
|
|
elNoEntitiesMessage.style.display = "block";
|
|
elFooter.firstChild.nodeValue = "0 entities found";
|
|
} else {
|
|
elNoEntitiesMessage.style.display = "none";
|
|
for (var i = 0; i < newEntities.length; i++) {
|
|
var id = newEntities[i].id;
|
|
addEntity(id, newEntities[i].name, newEntities[i].type, newEntities[i].url,
|
|
newEntities[i].locked ? LOCKED_GLYPH : null,
|
|
newEntities[i].visible ? VISIBLE_GLYPH : null);
|
|
}
|
|
updateSelectedEntities(data.selectedIDs);
|
|
resize();
|
|
}
|
|
}
|
|
});
|
|
setTimeout(refreshEntities, 1000);
|
|
}
|
|
|
|
function resize() {
|
|
// Take up available window space
|
|
elEntityTableScroll.style.height = window.innerHeight - 207;
|
|
|
|
var tds = document.querySelectorAll("#entity-table-body tr:first-child td");
|
|
var ths = document.querySelectorAll("#entity-table thead th");
|
|
if (tds.length >= ths.length) {
|
|
// Update the widths of the header cells to match the body
|
|
for (var i = 0; i < ths.length; i++) {
|
|
ths[i].width = tds[i].offsetWidth;
|
|
}
|
|
} else {
|
|
// Reasonable widths if nothing is displayed
|
|
var tableWidth = document.getElementById("entity-table").offsetWidth;
|
|
ths[0].width = 0.16 * tableWidth;
|
|
ths[1].width = 0.34 * tableWidth;
|
|
ths[2].width = 0.34 * tableWidth;
|
|
ths[3].width = 0.08 * tableWidth;
|
|
ths[4].width = 0.08 * tableWidth;
|
|
}
|
|
};
|
|
|
|
window.onresize = resize;
|
|
resize();
|
|
});
|
|
|
|
augmentSpinButtons();
|
|
|
|
// Disable right-click context menu which is not visible in the HMD and makes it seem like the app has locked
|
|
document.addEventListener("contextmenu", function (event) {
|
|
event.preventDefault();
|
|
}, false);
|
|
}
|
|
</script>
|
|
</head>
|
|
<body onload='loaded();'>
|
|
<div id="entity-list-header">
|
|
<input type="button" class="glyph" id="refresh" value="F" />
|
|
<div>
|
|
<input type="button" id="locked" class="glyph" value="" />
|
|
<input type="button" id="visible" class="glyph" value="" />
|
|
</div>
|
|
<input type="button" id="teleport" value="Jump To Selection" />
|
|
<input type="button" class="red" id="delete" value="Delete" />
|
|
</div>
|
|
|
|
<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>
|
|
<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" />
|
|
</div>
|
|
</div>
|
|
<div id="entity-table-scroll">
|
|
<table id="entity-table">
|
|
<colgroup>
|
|
<col span="1" id="col-type" />
|
|
<col span="1" id="col-name" />
|
|
<col span="1" id="col-url" />
|
|
<col span="1" id="col-locked" />
|
|
<col span="1" id="col-visible" />
|
|
</colgroup>
|
|
<thead>
|
|
<tr>
|
|
<th id="entity-type" data-sort="type">Type<span class="sort-order"></span></th>
|
|
<th id="entity-name" data-sort="type">Name<span class="sort-order"></span></th>
|
|
<th id="entity-url" data-sort="url">File<span class="sort-order"></span></th>
|
|
<th id="entity-locked" data-sort="locked"><span class="glyph"></span><span class="sort-order"></span></th>
|
|
<th colspan="2" id="entity-visible" data-sort="visible"><span class="glyph"></span><span class="sort-order"></span></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="list" id="entity-table-body">
|
|
<tr>
|
|
<td class="type">Type</td>
|
|
<td class="name">Name</td>
|
|
<td class="url"><div class='outer'><div class='inner'>URL</div></div></td>
|
|
<td class="locked glyph">?</td>
|
|
<td class="visible glyph">?</td>
|
|
<td class="id" style="display: none">ID</td>
|
|
</tr>
|
|
</tbody>
|
|
<tfoot>
|
|
<tr>
|
|
<td id="footer-text" colspan="5"> </td>
|
|
</tr>
|
|
</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.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html> |