Update entity list UI to be updated in a single batch

This commit is contained in:
Ryan Huffman 2018-08-13 13:21:00 -07:00
parent f6ac755bae
commit f2cc2f1485
2 changed files with 86 additions and 44 deletions

View file

@ -10,8 +10,9 @@
<html> <html>
<head> <head>
<link rel="stylesheet" type="text/css" href="css/edit-style.css"> <link rel="stylesheet" type="text/css" href="css/edit-style.css">
<script src="js/list.min.js"></script> <script type="text/javascript" src="js/list.js"></script>
<script type="text/javascript" src="qrc:///qtwebchannel/qwebchannel.js"></script> <script type="text/javascript" src="qrc:///qtwebchannel/qwebchannel.js"></script>
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="js/eventBridgeLoader.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/spinButtons.js"></script>
<script type="text/javascript" src="js/entityList.js"></script> <script type="text/javascript" src="js/entityList.js"></script>

View file

@ -23,16 +23,22 @@ const DELETE = 46; // Key code for the delete key.
const KEY_P = 80; // Key code for letter p used for Parenting hotkey. 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 MAX_ITEMS = Number.MAX_VALUE; // Used to set the max length of the list of discovered entities.
log = function(msg) {
EventBridge.emitWebEvent(msg);
}
var profileIndent = ''; var profileIndent = '';
PROFILE = function(name, fn, args) { PROFILE = function(name, fn, args) {
EventBridge.emitWebEvent("PROFILE-Web " + profileIndent + "(" + name + ") Begin"); log("PROFILE-Web " + profileIndent + "(" + name + ") Begin");
console.log("PROFILE-Web " + profileIndent + "(" + name + ") Begin");
var previousIndent = profileIndent; var previousIndent = profileIndent;
profileIndent += ' '; profileIndent += ' ';
var before = Date.now(); var before = Date.now();
fn.apply(this, args); fn.apply(this, args);
var delta = Date.now() - before; var delta = Date.now() - before;
profileIndent = previousIndent; profileIndent = previousIndent;
EventBridge.emitWebEvent("PROFILE-Web " + profileIndent + "(" + name + ") End " + delta + "ms"); log("PROFILE-Web " + profileIndent + "(" + name + ") End " + delta + "ms");
console.log("PROFILE-Web " + profileIndent + "(" + name + ") End " + delta + "ms");
} }
debugPrint = function (message) { debugPrint = function (message) {
@ -168,44 +174,89 @@ function loaded() {
return number ? number : ""; return number ? number : "";
} }
function addEntity(id, name, type, url, locked, visible, verticesCount, texturesCount, texturesSize, hasTransparent, function getFilename(url) {
isBaked, drawCalls, hasScript) { let urlParts = url.split('/');
return urlParts[urlParts.length - 1];
}
var urlParts = url.split('/'); //function addEntity(
var filename = urlParts[urlParts.length - 1]; //id, name, type, url, locked, visible, verticesCount,
//texturesCount, texturesSize, hasTransparent,
//isBaked, drawCalls, hasScript) {
function addEntities(entityData) {
const IMAGE_MODEL_NAME = 'default-image-model.fbx';
var IMAGE_MODEL_NAME = 'default-image-model.fbx'; let newEntities = entityData.filter(function(entity) {
if (entity.id in entities) {
var item = entities[entity.id].item;
item.values({
name: entity.name,
url: getFilename(entity.url),
locked: entity.locked,
visible: entity.visible
});
return false;
}
return true;
});
if (filename === IMAGE_MODEL_NAME) { if (newEntities.length === 0) {
type = "Image"; return;
} }
if (entities[id] === undefined) { newEntities = newEntities.map(function(entity) {
entityList.add([{ let type = entity.type;
id: id, name: name, type: type, url: filename, locked: locked, visible: visible, let filename = getFilename(entity.url);
verticesCount: displayIfNonZero(verticesCount), texturesCount: displayIfNonZero(texturesCount), if (filename === IMAGE_MODEL_NAME) {
texturesSize: decimalMegabytes(texturesSize), hasTransparent: hasTransparent, type = "Image";
isBaked: isBaked, drawCalls: displayIfNonZero(drawCalls), hasScript: hasScript }
}], return {
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
}
});
//newEntities = newEntities.splice(newEntities.length - 10);
console.log("Adding: " + newEntities.length);
let size = 2000;
let sets = Math.ceil(newEntities.length / size);
for (let i = 0; i < sets; i++) {
console.log(Date.now(), "Adding", i * size, (i + 1) * size);
entityList.add(newEntities.splice(i * size, (i + 1) * size),
function (items) { function (items) {
var currentElement = items[0].elm; console.log(Date.now(), "added: " + items.length);
var id = items[0]._values.id; items.forEach(function(item) {
entities[id] = { var currentElement = item.elm;
id: id, var values = item._values;
name: name,
el: currentElement, entities[values.id] = {
item: items[0] id: values.id,
}; name: values.name,
currentElement.setAttribute('id', 'entity_' + id); el: currentElement,
currentElement.setAttribute('title', url); item: item
currentElement.dataset.entityId = id; };
currentElement.onclick = onRowClicked; currentElement.setAttribute('id', 'entity_' + values.id);
currentElement.ondblclick = onRowDoubleClicked; currentElement.setAttribute('title', values.fullUrl);
currentElement.dataset.entityId = values.id;
currentElement.onclick = onRowClicked;
currentElement.ondblclick = onRowDoubleClicked;
});
}); });
} else {
var item = entities[id].item;
item.values({ name: name, url: filename, locked: locked, visible: visible });
} }
console.log(Date.now(), "DONE");
} }
function removeEntities(deletedIDs) { function removeEntities(deletedIDs) {
@ -382,17 +433,7 @@ function loaded() {
elFooter.firstChild.nodeValue = "0 entities found"; elFooter.firstChild.nodeValue = "0 entities found";
} else if (newEntities) { } else if (newEntities) {
elNoEntitiesMessage.style.display = "none"; elNoEntitiesMessage.style.display = "none";
for (var i = 0; i < newEntities.length; i++) { addEntities(newEntities);
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);
}
updateSelectedEntities(data.selectedIDs); updateSelectedEntities(data.selectedIDs);
scheduleRefreshEntityList(); scheduleRefreshEntityList();
resize(); resize();