mirror of
https://github.com/HifiExperiments/overte.git
synced 2025-05-06 15:38:35 +02:00
remove separate new entity list with option, fix row clicking
This commit is contained in:
David Back
parent
729e857aa2
commit
0a67c49ef9
7 changed files with 356 additions and 967 deletions
|
|
@ -1,15 +0,0 @@
|
|||
import QtQuick 2.7
|
||||
import QtQuick.Controls 2.2
|
||||
import QtWebChannel 1.0
|
||||
import "../../controls"
|
||||
import "../toolbars"
|
||||
import QtGraphicalEffects 1.0
|
||||
import "../../controls-uit" as HifiControls
|
||||
import "../../styles-uit"
|
||||
|
||||
|
||||
WebView {
|
||||
id: entityListToolWebView
|
||||
url: Paths.defaultScripts + "/system/html/entityListNew.html"
|
||||
enabled: true
|
||||
}
|
||||
|
|
@ -156,7 +156,6 @@ 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";
|
||||
var MENU_SHOW_ZONES_IN_EDIT_MODE = "Show Zones in Create Mode";
|
||||
var MENU_USE_NEW_ENTITY_LIST = "Use New Entity List";
|
||||
|
||||
var MENU_CREATE_ENTITIES_GRABBABLE = "Create Entities As Grabbable (except Zones, Particles, and Lights)";
|
||||
var MENU_ALLOW_SELECTION_LARGE = "Allow Selecting of Large Models";
|
||||
|
|
@ -167,7 +166,6 @@ var SETTING_AUTO_FOCUS_ON_SELECT = "autoFocusOnSelect";
|
|||
var SETTING_EASE_ON_FOCUS = "cameraEaseOnFocus";
|
||||
var SETTING_SHOW_LIGHTS_AND_PARTICLES_IN_EDIT_MODE = "showLightsAndParticlesInEditMode";
|
||||
var SETTING_SHOW_ZONES_IN_EDIT_MODE = "showZonesInEditMode";
|
||||
var SETTING_USE_NEW_ENTITY_LIST = "useNewEntityList";
|
||||
|
||||
var SETTING_EDIT_PREFIX = "Edit/";
|
||||
|
||||
|
|
@ -873,11 +871,8 @@ var toolBar = (function () {
|
|||
tablet.gotoHomeScreen();
|
||||
}
|
||||
UserActivityLogger.enabledEdit();
|
||||
entityListTool.setUseNewEntityList(Menu.isOptionChecked(MENU_USE_NEW_ENTITY_LIST));
|
||||
entityListTool.setVisible(true);
|
||||
if (!Menu.isOptionChecked(MENU_USE_NEW_ENTITY_LIST)) {
|
||||
entityListTool.sendUpdate();
|
||||
}
|
||||
entityListTool.sendUpdate();
|
||||
gridTool.setVisible(true);
|
||||
grid.setEnabled(true);
|
||||
propertiesTool.setVisible(true);
|
||||
|
|
@ -1354,13 +1349,6 @@ function setupModelMenus() {
|
|||
isCheckable: true,
|
||||
isChecked: Settings.getValue(SETTING_SHOW_ZONES_IN_EDIT_MODE) !== "false"
|
||||
});
|
||||
Menu.addMenuItem({
|
||||
menuName: "Edit",
|
||||
menuItemName: MENU_USE_NEW_ENTITY_LIST,
|
||||
afterItem: MENU_SHOW_ZONES_IN_EDIT_MODE,
|
||||
isCheckable: true,
|
||||
isChecked: Settings.getValue(SETTING_USE_NEW_ENTITY_LIST, false)
|
||||
});
|
||||
|
||||
Entities.setLightsArePickable(false);
|
||||
}
|
||||
|
|
@ -1399,7 +1387,6 @@ Script.scriptEnding.connect(function () {
|
|||
Settings.setValue(SETTING_EASE_ON_FOCUS, Menu.isOptionChecked(MENU_EASE_ON_FOCUS));
|
||||
Settings.setValue(SETTING_SHOW_LIGHTS_AND_PARTICLES_IN_EDIT_MODE, Menu.isOptionChecked(MENU_SHOW_LIGHTS_AND_PARTICLES_IN_EDIT_MODE));
|
||||
Settings.setValue(SETTING_SHOW_ZONES_IN_EDIT_MODE, Menu.isOptionChecked(MENU_SHOW_ZONES_IN_EDIT_MODE));
|
||||
Settings.setValue(SETTING_USE_NEW_ENTITY_LIST, Menu.isOptionChecked(MENU_USE_NEW_ENTITY_LIST));
|
||||
|
||||
Settings.setValue(SETTING_EDIT_PREFIX + MENU_CREATE_ENTITIES_GRABBABLE, Menu.isOptionChecked(MENU_CREATE_ENTITIES_GRABBABLE));
|
||||
Settings.setValue(SETTING_EDIT_PREFIX + MENU_ALLOW_SELECTION_LARGE, Menu.isOptionChecked(MENU_ALLOW_SELECTION_LARGE));
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@
|
|||
<script type="text/javascript" src="qrc:///qtwebchannel/qwebchannel.js"></script>
|
||||
<script type="text/javascript" src="js/eventBridgeLoader.js"></script>
|
||||
<script type="text/javascript" src="js/spinButtons.js"></script>
|
||||
<script type="text/javascript" src="js/listView.js"></script>
|
||||
<script type="text/javascript" src="js/entityList.js"></script>
|
||||
</head>
|
||||
<body onload='loaded();'>
|
||||
|
|
|
|||
|
|
@ -1,102 +0,0 @@
|
|||
<!--
|
||||
// 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="css/edit-style.css">
|
||||
<script src="js/list.min.js"></script>
|
||||
<script type="text/javascript" src="qrc:///qtwebchannel/qwebchannel.js"></script>
|
||||
<script type="text/javascript" src="js/eventBridgeLoader.js"></script>
|
||||
<script type="text/javascript" src="js/spinButtons.js"></script>
|
||||
<script type="text/javascript" src="js/listView.js"></script>
|
||||
<script type="text/javascript" src="js/entityListNew.js"></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="export" value="Export Selection" />
|
||||
<input type="button" id="pal" class="glyph" value="" />
|
||||
<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>
|
||||
<input type="button" id="in-view" class="glyph" value="" />
|
||||
<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" />
|
||||
<col span="1" id="col-verticesCount" />
|
||||
<col span="1" id="col-texturesCount" />
|
||||
<col span="1" id="col-texturesSize" />
|
||||
<col span="1" id="col-hasTransparent" />
|
||||
<col span="1" id="col-isBaked" />
|
||||
<col span="1" id="col-drawCalls" />
|
||||
<col span="1" id="col-hasScript" />
|
||||
</colgroup>
|
||||
<thead id="entity-table-header">
|
||||
<tr>
|
||||
<th id="entity-type">Type<span class="sort-order"></span><span id="info-toggle"><span class="glyph">D</span></span></th>
|
||||
<th id="entity-name">Name<span class="sort-order"></span></th>
|
||||
<th id="entity-url">File<span class="sort-order"></span></th>
|
||||
<th id="entity-locked"><span class="glyph"></span><span class="sort-order"></span></th>
|
||||
<th id="entity-visible"><span class="glyph"></span><span class="sort-order"></span></th>
|
||||
<th id="entity-verticesCount">Verts<span class="sort-order"></span></th>
|
||||
<th id="entity-texturesCount">Texts<span class="sort-order"></span></th>
|
||||
<th id="entity-texturesSize">Text MB<span class="sort-order"></span></th>
|
||||
<th id="entity-hasTransparent"><span class="glyph"></span><span class="sort-order"></span></th>
|
||||
<th id="entity-isBaked">Baked<span class="sort-order"></span></th>
|
||||
<th id="entity-drawCalls">Draws<span class="sort-order"></span></th>
|
||||
<th colspan="1" id="entity-hasScript"><span class="glyph">k</span><span class="sort-order"></span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="list" id="entity-table-body">
|
||||
<tr>
|
||||
<td class="type"></td>
|
||||
<td class="name"></td>
|
||||
<td class="url"><div class='outer'><div class='inner'></div></div></td>
|
||||
<td class="locked glyph"></td>
|
||||
<td class="visible glyph"></td>
|
||||
<td class="verticesCount"></td>
|
||||
<td class="texturesCount"></td>
|
||||
<td class="texturesSize"></td>
|
||||
<td class="hasTransparent glyph"></td>
|
||||
<td class="isBaked glyph"></td>
|
||||
<td class="drawCalls"></td>
|
||||
<td class="hasScript glyph"></td>
|
||||
<td class="id" style="display: none"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot id="entity-table-footer">
|
||||
<tr>
|
||||
<td id="footer-text" colspan="12"> </td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
|
||||
<div id="no-entities">
|
||||
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>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,27 +1,61 @@
|
|||
// entityList.js
|
||||
// entityListNew.js
|
||||
//
|
||||
// Created by Ryan Huffman on 19 Nov 2014
|
||||
// Copyright 2014 High Fidelity, Inc.
|
||||
// Created by David Back on 27 Aug 2018
|
||||
// Copyright 2018 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
|
||||
|
||||
var entities = {};
|
||||
var selectedEntities = [];
|
||||
var currentSortColumn = 'type';
|
||||
var currentSortOrder = 'des';
|
||||
var entityList = null;
|
||||
var refreshEntityListTimer = null;
|
||||
const ASCENDING_SORT = 1;
|
||||
const DESCENDING_SORT = -1;
|
||||
const ASCENDING_STRING = '▴';
|
||||
const DESCENDING_STRING = '▾';
|
||||
const COMPARE_ASCENDING = function(a, b) {
|
||||
let va = a[currentSortColumn];
|
||||
let vb = b[currentSortColumn];
|
||||
|
||||
if (va < vb) {
|
||||
return -1;
|
||||
} else if (va > vb) {
|
||||
return 1;
|
||||
}
|
||||
return 0;
|
||||
}
|
||||
const COMPARE_DESCENDING = function(a, b) {
|
||||
return COMPARE_ASCENDING(b, a);
|
||||
}
|
||||
const LOCKED_GLYPH = "";
|
||||
const VISIBLE_GLYPH = "";
|
||||
const TRANSPARENCY_GLYPH = "";
|
||||
const BAKED_GLYPH = ""
|
||||
const SCRIPT_GLYPH = "k";
|
||||
const DELETE = 46; // Key code for the delete key.
|
||||
const KEY_P = 80; // Key code for letter p used for Parenting hotkey.
|
||||
const MAX_ITEMS = Number.MAX_VALUE; // Used to set the max length of the list of discovered entities.
|
||||
const BYTES_PER_MEGABYTE = 1024 * 1024;
|
||||
const IMAGE_MODEL_NAME = 'default-image-model.fbx';
|
||||
const NUM_COLUMNS = 12;
|
||||
|
||||
var entities = [];
|
||||
var entitiesByID = {};
|
||||
var visibleEntities = [];
|
||||
|
||||
var selectedEntities = [];
|
||||
|
||||
var currentSortColumn = 'type';
|
||||
var currentSortOrder = 'des';
|
||||
|
||||
var entityList = null;
|
||||
|
||||
const ENABLE_PROFILING = true;
|
||||
var profileIndent = '';
|
||||
const PROFILE = !ENABLE_PROFILING ? function() { } : function(name, fn, args) {
|
||||
console.log("PROFILE-Web " + profileIndent + "(" + name + ") Begin");
|
||||
var previousIndent = profileIndent;
|
||||
profileIndent += ' ';
|
||||
var before = Date.now();
|
||||
fn.apply(this, args);
|
||||
var delta = Date.now() - before;
|
||||
profileIndent = previousIndent;
|
||||
console.log("PROFILE-Web " + profileIndent + "(" + name + ") End " + delta + "ms");
|
||||
};
|
||||
|
||||
debugPrint = function (message) {
|
||||
console.log(message);
|
||||
|
|
@ -29,10 +63,11 @@ debugPrint = function (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");
|
||||
elEntityTableScroll = document.getElementById("entity-table-scroll");
|
||||
elEntityTableHeader = document.getElementById("entity-table-header");
|
||||
elEntityTableFooter = document.getElementById("entity-table-footer");
|
||||
elRefresh = document.getElementById("refresh");
|
||||
elToggleLocked = document.getElementById("locked");
|
||||
elToggleVisible = document.getElementById("visible");
|
||||
|
|
@ -48,8 +83,9 @@ function loaded() {
|
|||
elNoEntitiesMessage = document.getElementById("no-entities");
|
||||
elNoEntitiesInView = document.getElementById("no-entities-in-view");
|
||||
elNoEntitiesRadius = document.getElementById("no-entities-radius");
|
||||
elEntityTableScroll = document.getElementById("entity-table-scroll");
|
||||
|
||||
entityList = new ListView("entity-table", "entity-table-body", "entity-table-scroll", createRowFunction, updateRowFunction, clearRowFunction);
|
||||
|
||||
document.getElementById("entity-name").onclick = function() {
|
||||
setSortColumn('name');
|
||||
};
|
||||
|
|
@ -86,12 +122,97 @@ function loaded() {
|
|||
document.getElementById("entity-hasScript").onclick = function () {
|
||||
setSortColumn('hasScript');
|
||||
};
|
||||
|
||||
elRefresh.onclick = function() {
|
||||
refreshEntities();
|
||||
}
|
||||
elToggleLocked.onclick = function() {
|
||||
EventBridge.emitWebEvent(JSON.stringify({ type: 'toggleLocked' }));
|
||||
}
|
||||
elToggleVisible.onclick = function() {
|
||||
EventBridge.emitWebEvent(JSON.stringify({ type: 'toggleVisible' }));
|
||||
}
|
||||
elExport.onclick = function() {
|
||||
EventBridge.emitWebEvent(JSON.stringify({ type: 'export'}));
|
||||
}
|
||||
elPal.onclick = function() {
|
||||
EventBridge.emitWebEvent(JSON.stringify({ type: 'pal' }));
|
||||
}
|
||||
elDelete.onclick = function() {
|
||||
EventBridge.emitWebEvent(JSON.stringify({ type: 'delete' }));
|
||||
}
|
||||
|
||||
function createRowFunction(elBottomBuffer) {
|
||||
var row = document.createElement("tr");
|
||||
for (var i = 0; i < NUM_COLUMNS; i++) {
|
||||
var column = document.createElement("td");
|
||||
// locked, visible, hasTransparent, isBaked glyph columns
|
||||
if (i === 3 || i === 4 || i === 8 || i === 9) {
|
||||
column.className = 'glyph';
|
||||
}
|
||||
row.appendChild(column);
|
||||
}
|
||||
row.onclick = onRowClicked;
|
||||
row.ondblclick = onRowDoubleClicked;
|
||||
elEntityTableBody.insertBefore(row, elBottomBuffer);
|
||||
return row;
|
||||
}
|
||||
|
||||
function updateRowFunction(elRow, itemData) {
|
||||
var typeCell = elRow.childNodes[0];
|
||||
typeCell.innerText = itemData.type;
|
||||
var nameCell = elRow.childNodes[1];
|
||||
nameCell.innerText = itemData.name;
|
||||
var urlCell = elRow.childNodes[2];
|
||||
urlCell.innerText = itemData.url;
|
||||
var lockedCell = elRow.childNodes[3];
|
||||
lockedCell.innerHTML = itemData.locked;
|
||||
var visibleCell = elRow.childNodes[4];
|
||||
visibleCell.innerHTML = itemData.visible;
|
||||
var verticesCountCell = elRow.childNodes[5];
|
||||
verticesCountCell.innerText = itemData.verticesCount;
|
||||
var texturesCountCell = elRow.childNodes[6];
|
||||
texturesCountCell.innerText = itemData.texturesCount;
|
||||
var texturesSizeCell = elRow.childNodes[7];
|
||||
texturesSizeCell.innerText = itemData.texturesSize;
|
||||
var hasTransparentCell = elRow.childNodes[8];
|
||||
hasTransparentCell.innerHTML = itemData.hasTransparent;
|
||||
var isBakedCell = elRow.childNodes[9];
|
||||
isBakedCell.innerHTML = itemData.isBaked;
|
||||
var drawCallsCell = elRow.childNodes[10];
|
||||
drawCallsCell.innerText = itemData.drawCalls;
|
||||
var hasScriptCell = elRow.childNodes[11];
|
||||
hasScriptCell.innerText = itemData.hasScript;
|
||||
|
||||
var prevItemId = elRow.getAttribute("id");
|
||||
var newItemId = itemData.id;
|
||||
if (prevItemId && prevItemId !== newItemId) {
|
||||
entitiesByID[prevItemId].elRow = null;
|
||||
}
|
||||
if (!prevItemId || prevItemId !== newItemId) {
|
||||
elRow.setAttribute("id", newItemId);
|
||||
entitiesByID[newItemId].elRow = elRow;
|
||||
}
|
||||
}
|
||||
|
||||
function clearRowFunction(elRow) {
|
||||
for (var i = 0; i < NUM_COLUMNS; i++) {
|
||||
var cell = elRow.childNodes[i];
|
||||
cell.innerHTML = "";
|
||||
}
|
||||
|
||||
var id = elRow.getAttribute("id");
|
||||
if (id && entitiesByID[id]) {
|
||||
entitiesByID[id].elRow = null;
|
||||
}
|
||||
}
|
||||
|
||||
function onRowClicked(clickEvent) {
|
||||
var id = this.dataset.entityId;
|
||||
var selection = [this.dataset.entityId];
|
||||
var entityID = this.getAttribute("id");
|
||||
var selection = [entityID];
|
||||
|
||||
if (clickEvent.ctrlKey) {
|
||||
var selectedIndex = selectedEntities.indexOf(id);
|
||||
var selectedIndex = selectedEntities.indexOf(entityID);
|
||||
if (selectedIndex >= 0) {
|
||||
selection = selectedEntities;
|
||||
selection.splice(selectedIndex, 1)
|
||||
|
|
@ -101,11 +222,12 @@ function loaded() {
|
|||
} 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;
|
||||
for (var i = 0; i < visibleEntities.length; i++) {
|
||||
var entity = visibleEntities[i];
|
||||
if (clickedItemFound === -1 && entityID == entity.id) {
|
||||
clickedItemFound = i;
|
||||
} else if(previousItemFound === -1 && selectedEntities[0] == entity.id) {
|
||||
previousItemFound = i;
|
||||
}
|
||||
}
|
||||
if (previousItemFound !== -1 && clickedItemFound !== -1) {
|
||||
|
|
@ -113,8 +235,8 @@ function loaded() {
|
|||
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);
|
||||
visibleEntities[i].elRow.className = 'selected';
|
||||
betweenItems.push(visibleEntities[i].id);
|
||||
}
|
||||
if (previousItemFound > clickedItemFound) {
|
||||
// always make sure that we add the items in the right order
|
||||
|
|
@ -138,84 +260,14 @@ function loaded() {
|
|||
}
|
||||
|
||||
function onRowDoubleClicked() {
|
||||
var entityID = this.getAttribute("id");
|
||||
EventBridge.emitWebEvent(JSON.stringify({
|
||||
type: "selectionUpdate",
|
||||
focus: true,
|
||||
entityIds: [this.dataset.entityId],
|
||||
entityIds: [entityID],
|
||||
}));
|
||||
}
|
||||
|
||||
const BYTES_PER_MEGABYTE = 1024 * 1024;
|
||||
|
||||
function decimalMegabytes(number) {
|
||||
return number ? (number / BYTES_PER_MEGABYTE).toFixed(1) : "";
|
||||
}
|
||||
|
||||
function displayIfNonZero(number) {
|
||||
return number ? number : "";
|
||||
}
|
||||
|
||||
function addEntity(id, name, type, url, locked, visible, verticesCount, texturesCount, texturesSize, hasTransparent,
|
||||
isBaked, drawCalls, hasScript) {
|
||||
|
||||
var urlParts = url.split('/');
|
||||
var filename = urlParts[urlParts.length - 1];
|
||||
|
||||
var IMAGE_MODEL_NAME = 'default-image-model.fbx';
|
||||
|
||||
if (filename === IMAGE_MODEL_NAME) {
|
||||
type = "Image";
|
||||
}
|
||||
|
||||
if (entities[id] === undefined) {
|
||||
entityList.add([{
|
||||
id: id, name: name, type: type, url: filename, locked: locked, visible: visible,
|
||||
verticesCount: displayIfNonZero(verticesCount), texturesCount: displayIfNonZero(texturesCount),
|
||||
texturesSize: decimalMegabytes(texturesSize), hasTransparent: hasTransparent,
|
||||
isBaked: isBaked, drawCalls: displayIfNonZero(drawCalls), hasScript: hasScript
|
||||
}],
|
||||
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;
|
||||
});
|
||||
} else {
|
||||
var item = entities[id].item;
|
||||
item.values({ name: name, url: filename, locked: locked, visible: visible });
|
||||
}
|
||||
}
|
||||
|
||||
function removeEntities(deletedIDs) {
|
||||
for (i = 0, length = deletedIDs.length; i < length; i++) {
|
||||
delete entities[deletedIDs[i]];
|
||||
entityList.remove("id", deletedIDs[i]);
|
||||
}
|
||||
}
|
||||
|
||||
function scheduleRefreshEntityList() {
|
||||
var REFRESH_DELAY = 50;
|
||||
if (refreshEntityListTimer) {
|
||||
clearTimeout(refreshEntityListTimer);
|
||||
}
|
||||
refreshEntityListTimer = setTimeout(refreshEntityListObject, REFRESH_DELAY);
|
||||
}
|
||||
|
||||
function clearEntities() {
|
||||
entities = {};
|
||||
entityList.clear();
|
||||
refreshFooter();
|
||||
}
|
||||
|
||||
var elSortOrder = {
|
||||
name: document.querySelector('#entity-name .sort-order'),
|
||||
type: document.querySelector('#entity-type .sort-order'),
|
||||
|
|
@ -231,21 +283,22 @@ function loaded() {
|
|||
hasScript: document.querySelector('#entity-hasScript .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 });
|
||||
PROFILE("set-sort-column", function() {
|
||||
if (currentSortColumn === column) {
|
||||
currentSortOrder *= -1;
|
||||
} else {
|
||||
elSortOrder[currentSortColumn].innerHTML = "";
|
||||
currentSortColumn = column;
|
||||
currentSortOrder = ASCENDING_SORT;
|
||||
}
|
||||
elSortOrder[column].innerHTML = currentSortOrder == ASCENDING_SORT ? ASCENDING_STRING : DESCENDING_STRING;
|
||||
refreshEntityList();
|
||||
});
|
||||
}
|
||||
setSortColumn('type');
|
||||
|
||||
function refreshEntities() {
|
||||
clearEntities();
|
||||
EventBridge.emitWebEvent(JSON.stringify({ type: 'refresh' }));
|
||||
|
||||
function clearEntities() {
|
||||
entities = {};
|
||||
refreshFooter();
|
||||
}
|
||||
|
||||
function refreshFooter() {
|
||||
|
|
@ -253,33 +306,112 @@ function loaded() {
|
|||
elFooter.firstChild.nodeValue = selectedEntities.length + " entities selected";
|
||||
} else if (selectedEntities.length === 1) {
|
||||
elFooter.firstChild.nodeValue = "1 entity selected";
|
||||
} else if (entityList.visibleItems.length === 1) {
|
||||
} else if (visibleEntities.length === 1) {
|
||||
elFooter.firstChild.nodeValue = "1 entity found";
|
||||
} else {
|
||||
elFooter.firstChild.nodeValue = entityList.visibleItems.length + " entities found";
|
||||
elFooter.firstChild.nodeValue = visibleEntities.length + " entities found";
|
||||
}
|
||||
}
|
||||
|
||||
function refreshEntities() {
|
||||
clearEntities();
|
||||
EventBridge.emitWebEvent(JSON.stringify({ type: 'refresh' }));
|
||||
}
|
||||
|
||||
function refreshEntityListObject() {
|
||||
refreshEntityListTimer = null;
|
||||
entityList.sort(currentSortColumn, { order: currentSortOrder });
|
||||
entityList.search(elFilter.value);
|
||||
refreshFooter();
|
||||
function refreshEntityList() {
|
||||
PROFILE("refresh-entity-list", function() {
|
||||
PROFILE("filter", function() {
|
||||
var searchTerm = elFilter.value;
|
||||
if (searchTerm === '') {
|
||||
visibleEntities = entities.slice(0);
|
||||
} else {
|
||||
visibleEntities = entities.filter(function(e) {
|
||||
return e.name.indexOf(searchTerm) > -1
|
||||
|| e.type.indexOf(searchTerm) > -1
|
||||
|| e.fullUrl.indexOf(searchTerm) > -1;
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
PROFILE("sort", function() {
|
||||
var cmp = currentSortOrder === ASCENDING_SORT ? COMPARE_ASCENDING : COMPARE_DESCENDING;
|
||||
visibleEntities.sort(cmp);
|
||||
});
|
||||
|
||||
PROFILE("update-dom", function() {
|
||||
entityList.setVisibleItemData(visibleEntities);
|
||||
entityList.refresh();
|
||||
});
|
||||
|
||||
refreshFooter();
|
||||
});
|
||||
}
|
||||
|
||||
function decimalMegabytes(number) {
|
||||
return number ? (number / BYTES_PER_MEGABYTE).toFixed(1) : "";
|
||||
}
|
||||
|
||||
function displayIfNonZero(number) {
|
||||
return number ? number : "";
|
||||
}
|
||||
|
||||
function getFilename(url) {
|
||||
var urlParts = url.split('/');
|
||||
return urlParts[urlParts.length - 1];
|
||||
}
|
||||
|
||||
function updateEntityData(entityData) {
|
||||
entities = [];
|
||||
entitiesByID = {};
|
||||
visibleEntities = [];
|
||||
|
||||
PROFILE("map-data", function() {
|
||||
entityData.forEach(function(entity) {
|
||||
var type = entity.type
|
||||
var filename = getFilename(entity.url);
|
||||
if (filename === IMAGE_MODEL_NAME) {
|
||||
type = "Image";
|
||||
}
|
||||
|
||||
var entityData = {
|
||||
id: entity.id,
|
||||
name: entity.name,
|
||||
type: type,
|
||||
url: filename,
|
||||
fullUrl: entity.url,
|
||||
locked: entity.locked ? LOCKED_GLYPH : null,
|
||||
visible: entity.visible ? VISIBLE_GLYPH : null,
|
||||
verticesCount: displayIfNonZero(entity.verticesCount),
|
||||
texturesCount: displayIfNonZero(entity.texturesCount),
|
||||
texturesSize: decimalMegabytes(entity.texturesSize),
|
||||
hasTransparent: entity.hasTransparent ? TRANSPARENCY_GLYPH : null,
|
||||
isBaked: entity.isBaked ? BAKED_GLYPH : null,
|
||||
drawCalls: displayIfNonZero(entity.drawCalls),
|
||||
hasScript: entity.hasScript ? SCRIPT_GLYPH : null,
|
||||
elRow : null
|
||||
}
|
||||
|
||||
entities.push(entityData);
|
||||
entitiesByID[entityData.id] = entityData;
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function updateSelectedEntities(selectedIDs) {
|
||||
var notFound = false;
|
||||
for (var id in entities) {
|
||||
entities[id].el.className = '';
|
||||
for (var id in entitiesByID) {
|
||||
if (entitiesByID[id].elRow) {
|
||||
entitiesByID[id].elRow.className = '';
|
||||
}
|
||||
}
|
||||
|
||||
selectedEntities = [];
|
||||
for (var i = 0; i < selectedIDs.length; i++) {
|
||||
var id = selectedIDs[i];
|
||||
selectedEntities.push(id);
|
||||
if (id in entities) {
|
||||
var entity = entities[id];
|
||||
entity.el.className = 'selected';
|
||||
if (id in entitiesByID) {
|
||||
var entity = entitiesByID[id];
|
||||
entity.elRow.className = 'selected';
|
||||
} else {
|
||||
notFound = true;
|
||||
}
|
||||
|
|
@ -289,25 +421,68 @@ function loaded() {
|
|||
|
||||
return notFound;
|
||||
}
|
||||
|
||||
function removeEntities(deletedIDs) {
|
||||
for (var i = 0, length = deletedIDs.length; i < length; i++) {
|
||||
var deleteID = deletedIDs[i];
|
||||
delete entitiesByID[deleteID];
|
||||
}
|
||||
}
|
||||
|
||||
elRefresh.onclick = function() {
|
||||
refreshEntities();
|
||||
}
|
||||
elToggleLocked.onclick = function () {
|
||||
EventBridge.emitWebEvent(JSON.stringify({ type: 'toggleLocked' }));
|
||||
}
|
||||
elToggleVisible.onclick = function () {
|
||||
EventBridge.emitWebEvent(JSON.stringify({ type: 'toggleVisible' }));
|
||||
}
|
||||
elExport.onclick = function() {
|
||||
EventBridge.emitWebEvent(JSON.stringify({ type: 'export'}));
|
||||
}
|
||||
elPal.onclick = function () {
|
||||
EventBridge.emitWebEvent(JSON.stringify({ type: 'pal' }));
|
||||
}
|
||||
elDelete.onclick = function() {
|
||||
EventBridge.emitWebEvent(JSON.stringify({ type: 'delete' }));
|
||||
function resize() {
|
||||
// Take up available window space
|
||||
elEntityTableScroll.style.height = window.innerHeight - 207;
|
||||
|
||||
var SCROLLABAR_WIDTH = 21;
|
||||
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 - SCROLLABAR_WIDTH;
|
||||
if (showExtraInfo) {
|
||||
ths[0].width = 0.10 * tableWidth;
|
||||
ths[1].width = 0.20 * tableWidth;
|
||||
ths[2].width = 0.20 * tableWidth;
|
||||
ths[3].width = 0.04 * tableWidth;
|
||||
ths[4].width = 0.04 * tableWidth;
|
||||
ths[5].width = 0.08 * tableWidth;
|
||||
ths[6].width = 0.08 * tableWidth;
|
||||
ths[7].width = 0.10 * tableWidth;
|
||||
ths[8].width = 0.04 * tableWidth;
|
||||
ths[9].width = 0.08 * tableWidth;
|
||||
ths[10].width = 0.04 * tableWidth + SCROLLABAR_WIDTH;
|
||||
} else {
|
||||
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;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var showExtraInfo = false;
|
||||
var COLLAPSE_EXTRA_INFO = "E";
|
||||
var EXPAND_EXTRA_INFO = "D";
|
||||
|
||||
function toggleInfo(event) {
|
||||
showExtraInfo = !showExtraInfo;
|
||||
if (showExtraInfo) {
|
||||
elEntityTable.className = "showExtraInfo";
|
||||
elInfoToggleGlyph.innerHTML = COLLAPSE_EXTRA_INFO;
|
||||
} else {
|
||||
elEntityTable.className = "";
|
||||
elInfoToggleGlyph.innerHTML = EXPAND_EXTRA_INFO;
|
||||
}
|
||||
resize();
|
||||
event.stopPropagation();
|
||||
}
|
||||
elInfoToggle.addEventListener("click", toggleInfo, true);
|
||||
|
||||
document.addEventListener("keydown", function (keyDownEvent) {
|
||||
if (keyDownEvent.target.nodeName === "INPUT") {
|
||||
|
|
@ -349,11 +524,10 @@ function loaded() {
|
|||
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") {
|
||||
|
|
@ -362,105 +536,34 @@ function loaded() {
|
|||
refreshEntities();
|
||||
}
|
||||
} else if (data.type === "update" && data.selectedIDs !== undefined) {
|
||||
var newEntities = data.entities;
|
||||
if (newEntities && newEntities.length == 0) {
|
||||
elNoEntitiesMessage.style.display = "block";
|
||||
elFooter.firstChild.nodeValue = "0 entities found";
|
||||
} else if (newEntities) {
|
||||
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,
|
||||
newEntities[i].verticesCount, newEntities[i].texturesCount, newEntities[i].texturesSize,
|
||||
newEntities[i].hasTransparent ? TRANSPARENCY_GLYPH : null,
|
||||
newEntities[i].isBaked ? BAKED_GLYPH : null,
|
||||
newEntities[i].drawCalls,
|
||||
newEntities[i].hasScript ? SCRIPT_GLYPH : null);
|
||||
PROFILE("update", function() {
|
||||
var newEntities = data.entities;
|
||||
if (newEntities && newEntities.length == 0) {
|
||||
elNoEntitiesMessage.style.display = "block";
|
||||
elFooter.firstChild.nodeValue = "0 entities found";
|
||||
} else if (newEntities) {
|
||||
elNoEntitiesMessage.style.display = "none";
|
||||
updateEntityData(newEntities);
|
||||
refreshEntityList();
|
||||
updateSelectedEntities(data.selectedIDs);
|
||||
}
|
||||
updateSelectedEntities(data.selectedIDs);
|
||||
scheduleRefreshEntityList();
|
||||
resize();
|
||||
}
|
||||
});
|
||||
} else if (data.type === "removeEntities" && data.deletedIDs !== undefined && data.selectedIDs !== undefined) {
|
||||
removeEntities(data.deletedIDs);
|
||||
updateSelectedEntities(data.selectedIDs);
|
||||
scheduleRefreshEntityList();
|
||||
} else if (data.type === "deleted" && data.ids) {
|
||||
removeEntities(data.ids);
|
||||
refreshFooter();
|
||||
}
|
||||
});
|
||||
setTimeout(refreshEntities, 1000);
|
||||
}
|
||||
|
||||
function resize() {
|
||||
// Take up available window space
|
||||
elEntityTableScroll.style.height = window.innerHeight - 207;
|
||||
|
||||
var SCROLLABAR_WIDTH = 21;
|
||||
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 - SCROLLABAR_WIDTH;
|
||||
if (showExtraInfo) {
|
||||
ths[0].width = 0.10 * tableWidth;
|
||||
ths[1].width = 0.20 * tableWidth;
|
||||
ths[2].width = 0.20 * tableWidth;
|
||||
ths[3].width = 0.04 * tableWidth;
|
||||
ths[4].width = 0.04 * tableWidth;
|
||||
ths[5].width = 0.08 * tableWidth;
|
||||
ths[6].width = 0.08 * tableWidth;
|
||||
ths[7].width = 0.10 * tableWidth;
|
||||
ths[8].width = 0.04 * tableWidth;
|
||||
ths[9].width = 0.08 * tableWidth;
|
||||
ths[10].width = 0.04 * tableWidth + SCROLLABAR_WIDTH;
|
||||
} else {
|
||||
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;
|
||||
elFilter.onchange = resize;
|
||||
elFilter.onblur = refreshFooter;
|
||||
|
||||
|
||||
var showExtraInfo = false;
|
||||
var COLLAPSE_EXTRA_INFO = "E";
|
||||
var EXPAND_EXTRA_INFO = "D";
|
||||
|
||||
function toggleInfo(event) {
|
||||
showExtraInfo = !showExtraInfo;
|
||||
if (showExtraInfo) {
|
||||
elEntityTable.className = "showExtraInfo";
|
||||
elInfoToggleGlyph.innerHTML = COLLAPSE_EXTRA_INFO;
|
||||
} else {
|
||||
elEntityTable.className = "";
|
||||
elInfoToggleGlyph.innerHTML = EXPAND_EXTRA_INFO;
|
||||
}
|
||||
resize();
|
||||
event.stopPropagation();
|
||||
}
|
||||
elInfoToggle.addEventListener("click", toggleInfo, true);
|
||||
|
||||
|
||||
|
||||
setSortColumn('type');
|
||||
resize();
|
||||
entityList.initialize(572);
|
||||
refreshEntities();
|
||||
});
|
||||
|
||||
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();
|
||||
|
|
|
|||
|
|
@ -1,571 +0,0 @@
|
|||
// entityListNew.js
|
||||
//
|
||||
// Created by David Back on 27 Aug 2018
|
||||
// Copyright 2018 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
|
||||
|
||||
const ASCENDING_SORT = 1;
|
||||
const DESCENDING_SORT = -1;
|
||||
const ASCENDING_STRING = '▴';
|
||||
const DESCENDING_STRING = '▾';
|
||||
const COMPARE_ASCENDING = function(a, b) {
|
||||
let va = a[currentSortColumn];
|
||||
let vb = b[currentSortColumn];
|
||||
|
||||
if (va < vb) {
|
||||
return -1;
|
||||
} else if (va > vb) {
|
||||
return 1;
|
||||
}
|
||||
return 0;
|
||||
}
|
||||
const COMPARE_DESCENDING = function(a, b) {
|
||||
return COMPARE_ASCENDING(b, a);
|
||||
}
|
||||
const LOCKED_GLYPH = "";
|
||||
const VISIBLE_GLYPH = "";
|
||||
const TRANSPARENCY_GLYPH = "";
|
||||
const BAKED_GLYPH = ""
|
||||
const SCRIPT_GLYPH = "k";
|
||||
const BYTES_PER_MEGABYTE = 1024 * 1024;
|
||||
const IMAGE_MODEL_NAME = 'default-image-model.fbx';
|
||||
const NUM_COLUMNS = 12;
|
||||
|
||||
var entities = [];
|
||||
var entitiesByID = {};
|
||||
var visibleEntities = [];
|
||||
|
||||
var selectedEntities = [];
|
||||
|
||||
var currentSortColumn = 'type';
|
||||
var currentSortOrder = 'des';
|
||||
|
||||
var entityList = null;
|
||||
|
||||
const ENABLE_PROFILING = true;
|
||||
var profileIndent = '';
|
||||
const PROFILE = !ENABLE_PROFILING ? function() { } : function(name, fn, args) {
|
||||
console.log("PROFILE-Web " + profileIndent + "(" + name + ") Begin");
|
||||
var previousIndent = profileIndent;
|
||||
profileIndent += ' ';
|
||||
var before = Date.now();
|
||||
fn.apply(this, args);
|
||||
var delta = Date.now() - before;
|
||||
profileIndent = previousIndent;
|
||||
console.log("PROFILE-Web " + profileIndent + "(" + name + ") End " + delta + "ms");
|
||||
};
|
||||
|
||||
debugPrint = function (message) {
|
||||
console.log(message);
|
||||
};
|
||||
|
||||
function loaded() {
|
||||
openEventBridge(function() {
|
||||
elEntityTable = document.getElementById("entity-table");
|
||||
elEntityTableBody = document.getElementById("entity-table-body");
|
||||
elEntityTableScroll = document.getElementById("entity-table-scroll");
|
||||
elEntityTableHeader = document.getElementById("entity-table-header");
|
||||
elEntityTableFooter = document.getElementById("entity-table-footer");
|
||||
elRefresh = document.getElementById("refresh");
|
||||
elToggleLocked = document.getElementById("locked");
|
||||
elToggleVisible = document.getElementById("visible");
|
||||
elDelete = document.getElementById("delete");
|
||||
elFilter = document.getElementById("filter");
|
||||
elInView = document.getElementById("in-view")
|
||||
elRadius = document.getElementById("radius");
|
||||
elExport = document.getElementById("export");
|
||||
elPal = document.getElementById("pal");
|
||||
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");
|
||||
|
||||
entityList = new ListView("entity-table", "entity-table-body", "entity-table-scroll", createRowFunction, updateRowFunction, clearRowFunction);
|
||||
|
||||
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');
|
||||
};
|
||||
document.getElementById("entity-verticesCount").onclick = function () {
|
||||
setSortColumn('verticesCount');
|
||||
};
|
||||
document.getElementById("entity-texturesCount").onclick = function () {
|
||||
setSortColumn('texturesCount');
|
||||
};
|
||||
document.getElementById("entity-texturesSize").onclick = function () {
|
||||
setSortColumn('texturesSize');
|
||||
};
|
||||
document.getElementById("entity-hasTransparent").onclick = function () {
|
||||
setSortColumn('hasTransparent');
|
||||
};
|
||||
document.getElementById("entity-isBaked").onclick = function () {
|
||||
setSortColumn('isBaked');
|
||||
};
|
||||
document.getElementById("entity-drawCalls").onclick = function () {
|
||||
setSortColumn('drawCalls');
|
||||
};
|
||||
document.getElementById("entity-hasScript").onclick = function () {
|
||||
setSortColumn('hasScript');
|
||||
};
|
||||
|
||||
elRefresh.onclick = function() {
|
||||
refreshEntities();
|
||||
}
|
||||
elToggleLocked.onclick = function() {
|
||||
EventBridge.emitWebEvent(JSON.stringify({ type: 'toggleLocked' }));
|
||||
}
|
||||
elToggleVisible.onclick = function() {
|
||||
EventBridge.emitWebEvent(JSON.stringify({ type: 'toggleVisible' }));
|
||||
}
|
||||
elExport.onclick = function() {
|
||||
EventBridge.emitWebEvent(JSON.stringify({ type: 'export'}));
|
||||
}
|
||||
elPal.onclick = function() {
|
||||
EventBridge.emitWebEvent(JSON.stringify({ type: 'pal' }));
|
||||
}
|
||||
elDelete.onclick = function() {
|
||||
EventBridge.emitWebEvent(JSON.stringify({ type: 'delete' }));
|
||||
}
|
||||
|
||||
function createRowFunction(elBottomBuffer) {
|
||||
var row = document.createElement("tr");
|
||||
for (var i = 0; i < NUM_COLUMNS; i++) {
|
||||
var column = document.createElement("td");
|
||||
// locked, visible, hasTransparent, isBaked glyph columns
|
||||
if (i === 3 || i === 4 || i === 8 || i === 9) {
|
||||
column.className = 'glyph';
|
||||
}
|
||||
row.appendChild(column);
|
||||
}
|
||||
row.onclick = onRowClicked;
|
||||
row.ondblclick = onRowDoubleClicked;
|
||||
elEntityTableBody.insertBefore(row, elBottomBuffer);
|
||||
return row;
|
||||
}
|
||||
|
||||
function updateRowFunction(elRow, itemData) {
|
||||
var typeCell = elRow.childNodes[0];
|
||||
typeCell.innerText = itemData.type;
|
||||
var nameCell = elRow.childNodes[1];
|
||||
nameCell.innerText = itemData.name;
|
||||
var urlCell = elRow.childNodes[2];
|
||||
urlCell.innerText = itemData.url;
|
||||
var lockedCell = elRow.childNodes[3];
|
||||
lockedCell.innerHTML = itemData.locked;
|
||||
var visibleCell = elRow.childNodes[4];
|
||||
visibleCell.innerHTML = itemData.visible;
|
||||
var verticesCountCell = elRow.childNodes[5];
|
||||
verticesCountCell.innerText = itemData.verticesCount;
|
||||
var texturesCountCell = elRow.childNodes[6];
|
||||
texturesCountCell.innerText = itemData.texturesCount;
|
||||
var texturesSizeCell = elRow.childNodes[7];
|
||||
texturesSizeCell.innerText = itemData.texturesSize;
|
||||
var hasTransparentCell = elRow.childNodes[8];
|
||||
hasTransparentCell.innerHTML = itemData.hasTransparent;
|
||||
var isBakedCell = elRow.childNodes[9];
|
||||
isBakedCell.innerHTML = itemData.isBaked;
|
||||
var drawCallsCell = elRow.childNodes[10];
|
||||
drawCallsCell.innerText = itemData.drawCalls;
|
||||
var hasScriptCell = elRow.childNodes[11];
|
||||
hasScriptCell.innerText = itemData.hasScript;
|
||||
|
||||
var prevItemId = elRow.getAttribute("id");
|
||||
var newItemId = itemData.id;
|
||||
if (prevItemId && prevItemId !== newItemId) {
|
||||
entitiesByID[prevItemId].elRow = null;
|
||||
}
|
||||
if (!prevItemId || prevItemId !== newItemId) {
|
||||
elRow.setAttribute("id", newItemId);
|
||||
entitiesByID[newItemId].elRow = elRow;
|
||||
}
|
||||
}
|
||||
|
||||
function clearRowFunction(elRow) {
|
||||
for (var i = 0; i < NUM_COLUMNS; i++) {
|
||||
var cell = elRow.childNodes[i];
|
||||
cell.innerHTML = "";
|
||||
}
|
||||
|
||||
var id = elRow.getAttribute("id");
|
||||
if (id && entitiesByID[id]) {
|
||||
entitiesByID[id].elRow = null;
|
||||
}
|
||||
}
|
||||
|
||||
function onRowClicked(clickEvent) {
|
||||
var entityID = this.getAttribute("id");
|
||||
var selection = [entityID];
|
||||
|
||||
if (clickEvent.ctrlKey) {
|
||||
var selectedIndex = selectedEntities.indexOf(entityID);
|
||||
if (selectedIndex >= 0) {
|
||||
selection = selectedEntities;
|
||||
selection.splice(selectedIndex, 1)
|
||||
} else {
|
||||
selection = selection.concat(selectedEntities);
|
||||
}
|
||||
} else if (clickEvent.shiftKey && selectedEntities.length > 0) {
|
||||
var previousItemFound = -1;
|
||||
var clickedItemFound = -1;
|
||||
for (var i = 0; i < visibleEntities.length; i++) {
|
||||
var entity = visibleEntities[i];
|
||||
if (clickedItemFound === -1 && entityID == entity.id) {
|
||||
clickedItemFound = i;
|
||||
} else if(previousItemFound === -1 && selectedEntities[0] == entity.id) {
|
||||
previousItemFound = i;
|
||||
}
|
||||
}
|
||||
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++) {
|
||||
visibleEntities[i].elRow.className = 'selected';
|
||||
betweenItems.push(visibleEntities[i].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,
|
||||
}));
|
||||
|
||||
refreshFooter();
|
||||
}
|
||||
|
||||
function onRowDoubleClicked() {
|
||||
var entityID = this.getAttribute("id");
|
||||
EventBridge.emitWebEvent(JSON.stringify({
|
||||
type: "selectionUpdate",
|
||||
focus: true,
|
||||
entityIds: [entityID],
|
||||
}));
|
||||
}
|
||||
|
||||
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'),
|
||||
verticesCount: document.querySelector('#entity-verticesCount .sort-order'),
|
||||
texturesCount: document.querySelector('#entity-texturesCount .sort-order'),
|
||||
texturesSize: document.querySelector('#entity-texturesSize .sort-order'),
|
||||
hasTransparent: document.querySelector('#entity-hasTransparent .sort-order'),
|
||||
isBaked: document.querySelector('#entity-isBaked .sort-order'),
|
||||
drawCalls: document.querySelector('#entity-drawCalls .sort-order'),
|
||||
hasScript: document.querySelector('#entity-hasScript .sort-order'),
|
||||
}
|
||||
function setSortColumn(column) {
|
||||
PROFILE("set-sort-column", function() {
|
||||
if (currentSortColumn === column) {
|
||||
currentSortOrder *= -1;
|
||||
} else {
|
||||
elSortOrder[currentSortColumn].innerHTML = "";
|
||||
currentSortColumn = column;
|
||||
currentSortOrder = ASCENDING_SORT;
|
||||
}
|
||||
elSortOrder[column].innerHTML = currentSortOrder == ASCENDING_SORT ? ASCENDING_STRING : DESCENDING_STRING;
|
||||
refreshEntityList();
|
||||
});
|
||||
}
|
||||
|
||||
function clearEntities() {
|
||||
entities = {};
|
||||
refreshFooter();
|
||||
}
|
||||
|
||||
function refreshFooter() {
|
||||
if (selectedEntities.length > 1) {
|
||||
elFooter.firstChild.nodeValue = selectedEntities.length + " entities selected";
|
||||
} else if (selectedEntities.length === 1) {
|
||||
elFooter.firstChild.nodeValue = "1 entity selected";
|
||||
} else if (visibleEntities.length === 1) {
|
||||
elFooter.firstChild.nodeValue = "1 entity found";
|
||||
} else {
|
||||
elFooter.firstChild.nodeValue = visibleEntities.length + " entities found";
|
||||
}
|
||||
}
|
||||
|
||||
function refreshEntities() {
|
||||
clearEntities();
|
||||
EventBridge.emitWebEvent(JSON.stringify({ type: 'refresh' }));
|
||||
}
|
||||
|
||||
function refreshEntityList() {
|
||||
PROFILE("refresh-entity-list", function() {
|
||||
PROFILE("filter", function() {
|
||||
var searchTerm = elFilter.value;
|
||||
if (searchTerm === '') {
|
||||
visibleEntities = entities.slice(0);
|
||||
} else {
|
||||
visibleEntities = entities.filter(function(e) {
|
||||
return e.name.indexOf(searchTerm) > -1
|
||||
|| e.type.indexOf(searchTerm) > -1
|
||||
|| e.fullUrl.indexOf(searchTerm) > -1;
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
PROFILE("sort", function() {
|
||||
var cmp = currentSortOrder === ASCENDING_SORT ? COMPARE_ASCENDING : COMPARE_DESCENDING;
|
||||
visibleEntities.sort(cmp);
|
||||
});
|
||||
|
||||
PROFILE("update-dom", function() {
|
||||
entityList.setVisibleItemData(visibleEntities);
|
||||
entityList.refresh();
|
||||
});
|
||||
|
||||
refreshFooter();
|
||||
});
|
||||
}
|
||||
|
||||
function decimalMegabytes(number) {
|
||||
return number ? (number / BYTES_PER_MEGABYTE).toFixed(1) : "";
|
||||
}
|
||||
|
||||
function displayIfNonZero(number) {
|
||||
return number ? number : "";
|
||||
}
|
||||
|
||||
function getFilename(url) {
|
||||
var urlParts = url.split('/');
|
||||
return urlParts[urlParts.length - 1];
|
||||
}
|
||||
|
||||
function updateEntityData(entityData) {
|
||||
entities = [];
|
||||
entitiesByID = {};
|
||||
visibleEntities = [];
|
||||
|
||||
PROFILE("map-data", function() {
|
||||
entityData.forEach(function(entity) {
|
||||
var type = entity.type
|
||||
var filename = getFilename(entity.url);
|
||||
if (filename === IMAGE_MODEL_NAME) {
|
||||
type = "Image";
|
||||
}
|
||||
|
||||
var entityData = {
|
||||
id: entity.id,
|
||||
name: entity.name,
|
||||
type: type,
|
||||
url: filename,
|
||||
fullUrl: entity.url,
|
||||
locked: entity.locked ? LOCKED_GLYPH : null,
|
||||
visible: entity.visible ? VISIBLE_GLYPH : null,
|
||||
verticesCount: displayIfNonZero(entity.verticesCount),
|
||||
texturesCount: displayIfNonZero(entity.texturesCount),
|
||||
texturesSize: decimalMegabytes(entity.texturesSize),
|
||||
hasTransparent: entity.hasTransparent ? TRANSPARENCY_GLYPH : null,
|
||||
isBaked: entity.isBaked ? BAKED_GLYPH : null,
|
||||
drawCalls: displayIfNonZero(entity.drawCalls),
|
||||
hasScript: entity.hasScript ? SCRIPT_GLYPH : null,
|
||||
elRow : null
|
||||
}
|
||||
|
||||
entities.push(entityData);
|
||||
entitiesByID[entityData.id] = entityData;
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function updateSelectedEntities(selectedIDs) {
|
||||
var notFound = false;
|
||||
for (var id in entitiesByID) {
|
||||
if (entitiesByID[id].elRow) {
|
||||
entitiesByID[id].elRow.className = '';
|
||||
}
|
||||
}
|
||||
|
||||
selectedEntities = [];
|
||||
for (var i = 0; i < selectedIDs.length; i++) {
|
||||
var id = selectedIDs[i];
|
||||
selectedEntities.push(id);
|
||||
if (id in entities) {
|
||||
var entity = entitiesByID[id];
|
||||
entity.elRow.className = 'selected';
|
||||
} else {
|
||||
notFound = true;
|
||||
}
|
||||
}
|
||||
|
||||
refreshFooter();
|
||||
|
||||
return notFound;
|
||||
}
|
||||
|
||||
function removeEntities(deletedIDs) {
|
||||
for (var i = 0, length = deletedIDs.length; i < length; i++) {
|
||||
var deleteID = deletedIDs[i];
|
||||
delete entitiesByID[deleteID];
|
||||
}
|
||||
}
|
||||
|
||||
function resize() {
|
||||
// Take up available window space
|
||||
elEntityTableScroll.style.height = window.innerHeight - 207;
|
||||
|
||||
var SCROLLABAR_WIDTH = 21;
|
||||
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 - SCROLLABAR_WIDTH;
|
||||
if (showExtraInfo) {
|
||||
ths[0].width = 0.10 * tableWidth;
|
||||
ths[1].width = 0.20 * tableWidth;
|
||||
ths[2].width = 0.20 * tableWidth;
|
||||
ths[3].width = 0.04 * tableWidth;
|
||||
ths[4].width = 0.04 * tableWidth;
|
||||
ths[5].width = 0.08 * tableWidth;
|
||||
ths[6].width = 0.08 * tableWidth;
|
||||
ths[7].width = 0.10 * tableWidth;
|
||||
ths[8].width = 0.04 * tableWidth;
|
||||
ths[9].width = 0.08 * tableWidth;
|
||||
ths[10].width = 0.04 * tableWidth + SCROLLABAR_WIDTH;
|
||||
} else {
|
||||
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;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var showExtraInfo = false;
|
||||
var COLLAPSE_EXTRA_INFO = "E";
|
||||
var EXPAND_EXTRA_INFO = "D";
|
||||
|
||||
function toggleInfo(event) {
|
||||
showExtraInfo = !showExtraInfo;
|
||||
if (showExtraInfo) {
|
||||
elEntityTable.className = "showExtraInfo";
|
||||
elInfoToggleGlyph.innerHTML = COLLAPSE_EXTRA_INFO;
|
||||
} else {
|
||||
elEntityTable.className = "";
|
||||
elInfoToggleGlyph.innerHTML = EXPAND_EXTRA_INFO;
|
||||
}
|
||||
resize();
|
||||
event.stopPropagation();
|
||||
}
|
||||
elInfoToggle.addEventListener("click", toggleInfo, true);
|
||||
|
||||
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();
|
||||
}
|
||||
if (keyDownEvent.keyCode === KEY_P && keyDownEvent.ctrlKey) {
|
||||
if (keyDownEvent.shiftKey) {
|
||||
EventBridge.emitWebEvent(JSON.stringify({ type: 'unparent' }));
|
||||
} else {
|
||||
EventBridge.emitWebEvent(JSON.stringify({ type: 'parent' }));
|
||||
}
|
||||
}
|
||||
}, 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 }));
|
||||
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" && data.selectedIDs !== undefined) {
|
||||
PROFILE("update", function() {
|
||||
var newEntities = data.entities;
|
||||
if (newEntities && newEntities.length == 0) {
|
||||
elNoEntitiesMessage.style.display = "block";
|
||||
elFooter.firstChild.nodeValue = "0 entities found";
|
||||
} else if (newEntities) {
|
||||
elNoEntitiesMessage.style.display = "none";
|
||||
updateEntityData(newEntities);
|
||||
refreshEntityList();
|
||||
updateSelectedEntities(data.selectedIDs);
|
||||
}
|
||||
});
|
||||
} else if (data.type === "removeEntities" && data.deletedIDs !== undefined && data.selectedIDs !== undefined) {
|
||||
removeEntities(data.deletedIDs);
|
||||
updateSelectedEntities(data.selectedIDs);
|
||||
} else if (data.type === "deleted" && data.ids) {
|
||||
removeEntities(data.ids);
|
||||
refreshFooter();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
setSortColumn('type');
|
||||
resize();
|
||||
entityList.initialize(572);
|
||||
refreshEntities();
|
||||
});
|
||||
|
||||
// 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);
|
||||
}
|
||||
|
|
@ -20,11 +20,28 @@ EntityListTool = function(shouldUseEditTabletApp) {
|
|||
var ENTITY_LIST_WIDTH = 495;
|
||||
var MAX_DEFAULT_CREATE_TOOLS_HEIGHT = 778;
|
||||
|
||||
var defaultEntityListWindow = createEntityListWindow(Script.resourcesPath() + "qml/hifi/tablet/EditEntityList.qml",
|
||||
'Entity List');
|
||||
var newEntityListWindow = createEntityListWindow(Script.resourcesPath() + "qml/hifi/tablet/EditEntityListNew.qml",
|
||||
'Entity List (New)');
|
||||
var entityListWindow = defaultEntityListWindow;
|
||||
var entityListWindow = new CreateWindow(
|
||||
Script.resourcesPath() + "qml/hifi/tablet/EditEntityList.qml",
|
||||
'Entity List',
|
||||
'com.highfidelity.create.entityListWindow',
|
||||
function () {
|
||||
var windowHeight = Window.innerHeight - TITLE_OFFSET;
|
||||
if (windowHeight > MAX_DEFAULT_CREATE_TOOLS_HEIGHT) {
|
||||
windowHeight = MAX_DEFAULT_CREATE_TOOLS_HEIGHT;
|
||||
}
|
||||
return {
|
||||
size: {
|
||||
x: ENTITY_LIST_WIDTH,
|
||||
y: windowHeight
|
||||
},
|
||||
position: {
|
||||
x: Window.x,
|
||||
y: Window.y + TITLE_OFFSET
|
||||
}
|
||||
};
|
||||
},
|
||||
false
|
||||
);
|
||||
|
||||
var webView = null;
|
||||
webView = Tablet.getTablet("com.highfidelity.interface.tablet.system");
|
||||
|
|
@ -36,36 +53,6 @@ EntityListTool = function(shouldUseEditTabletApp) {
|
|||
var visible = false;
|
||||
|
||||
that.webView = webView;
|
||||
|
||||
function createEntityListWindow(entityListPath, windowName) {
|
||||
var listWindow = new CreateWindow(
|
||||
entityListPath,
|
||||
windowName,
|
||||
'com.highfidelity.create.entityListWindow',
|
||||
function () {
|
||||
var windowHeight = Window.innerHeight - TITLE_OFFSET;
|
||||
if (windowHeight > MAX_DEFAULT_CREATE_TOOLS_HEIGHT) {
|
||||
windowHeight = MAX_DEFAULT_CREATE_TOOLS_HEIGHT;
|
||||
}
|
||||
return {
|
||||
size: {
|
||||
x: ENTITY_LIST_WIDTH,
|
||||
y: windowHeight
|
||||
},
|
||||
position: {
|
||||
x: Window.x,
|
||||
y: Window.y + TITLE_OFFSET
|
||||
}
|
||||
};
|
||||
},
|
||||
false
|
||||
);
|
||||
return listWindow;
|
||||
}
|
||||
|
||||
that.setUseNewEntityList = function(useNewEntityList) {
|
||||
entityListWindow = useNewEntityList ? newEntityListWindow : defaultEntityListWindow;
|
||||
};
|
||||
|
||||
that.setVisible = function(newVisible) {
|
||||
visible = newVisible;
|
||||
|
|
@ -261,8 +248,7 @@ EntityListTool = function(shouldUseEditTabletApp) {
|
|||
};
|
||||
|
||||
webView.webEventReceived.connect(onWebEventReceived);
|
||||
defaultEntityListWindow.webEventReceived.addListener(onWebEventReceived);
|
||||
newEntityListWindow.webEventReceived.addListener(onWebEventReceived);
|
||||
entityListWindow.webEventReceived.addListener(onWebEventReceived);
|
||||
that.interactiveWindowHidden = entityListWindow.interactiveWindowHidden;
|
||||
|
||||
return that;
|
||||
|
|
|
|||
Loading…
Reference in a new issue