Mirrors/overte
3
0
Fork 0
mirror of https://github.com/overte-org/overte.git synced 2025-08-06 18:50:00 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add filtering support to entity list

Browse source
This commit is contained in:
Ryan Huffman 2018-09-05 14:28:57 -07:00
parent 739530cb85
commit 335f66d165
2 changed files with 131 additions and 107 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
scripts/system/html/entityList.html
View file

@ -9,6 +9,7 @@
--> -->
<html> <html>
<head> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="css/edit-style.css"> <link rel="stylesheet" type="text/css" href="css/edit-style.css">
<script type="text/javascript" src="js/list.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>

237
scripts/system/html/js/entityList.js
View file

@ -34,22 +34,24 @@ const COMPARE_DESCENDING = function(a, b) {
return COMPARE_ASCENDING(b, a); return COMPARE_ASCENDING(b, a);
} }
var entities = {}; //console.log = function() { };
var entityCount = 0;
// Raw entity data sent from script
let entityData = []
// List of all entities
let entities = []
// List of all entities, indexed by Entity ID
var entitiesByID = {};
// The filtered and sorted list of entities
var visibleEntities = [];
var selectedEntities = []; var selectedEntities = [];
var currentSortColumn = 'type'; var currentSortColumn = 'type';
var currentSortOrder = ASCENDING_SORT; var currentSortOrder = ASCENDING_SORT;
var refreshEntityListTimer = null;
log = function(msg) {
EventBridge.emitWebEvent(msg);
}
const ENABLE_PROFILING = true;
var profileIndent = ''; var profileIndent = '';
PROFILE = function(name, fn, args) { const PROFILE = !ENABLE_PROFILING ? function() { } : function(name, fn, args) {
log("PROFILE-Web " + profileIndent + "(" + name + ") Begin");
console.log("PROFILE-Web " + profileIndent + "(" + name + ") Begin"); console.log("PROFILE-Web " + profileIndent + "(" + name + ") Begin");
var previousIndent = profileIndent; var previousIndent = profileIndent;
profileIndent += ' '; profileIndent += ' ';
@ -57,9 +59,8 @@ PROFILE = function(name, fn, args) {
fn.apply(this, args); fn.apply(this, args);
var delta = Date.now() - before; var delta = Date.now() - before;
profileIndent = previousIndent; profileIndent = previousIndent;
log("PROFILE-Web " + profileIndent + "(" + name + ") End " + delta + "ms");
console.log("PROFILE-Web " + profileIndent + "(" + name + ") End " + delta + "ms"); console.log("PROFILE-Web " + profileIndent + "(" + name + ") End " + delta + "ms");
} };
debugPrint = function (message) { debugPrint = function (message) {
console.log(message); console.log(message);
@ -127,10 +128,9 @@ function loaded() {
function onRowClicked(clickEvent) { function onRowClicked(clickEvent) {
let entityID = this.dataset.entityID; let entityID = this.dataset.entityID;
console.log("CLICKED", entityID, this); console.log("CLICKED", entityID, this);
//return; let selection = [entityID];
var selection = [entityID];
if (clickEvent.ctrlKey) { if (clickEvent.ctrlKey) {
var selectedIndex = selectedEntities.indexOf(entityID); let selectedIndex = selectedEntities.indexOf(entityID);
if (selectedIndex >= 0) { if (selectedIndex >= 0) {
selection = selectedEntities; selection = selectedEntities;
selection.splice(selectedIndex, 1) selection.splice(selectedIndex, 1)
@ -138,22 +138,23 @@ function loaded() {
selection = selection.concat(selectedEntities); selection = selection.concat(selectedEntities);
} }
} else if (clickEvent.shiftKey && selectedEntities.length > 0) { } else if (clickEvent.shiftKey && selectedEntities.length > 0) {
var previousItemFound = -1; let previousItemFound = -1;
var clickedItemFound = -1; let clickedItemFound = -1;
for (var entity in entityList.visibleItems) { for (let i = 0, len = visibleEntities.length; i < len; ++i) {
if (clickedItemFound === -1 && entityID == entityList.visibleItems[entity].values().id) { let entity = visibleEntities[i];
clickedItemFound = entity; if (clickedItemFound === -1 && entityID == entity.id) {
} else if(previousItemFound === -1 && selectedEntities[0] == entityList.visibleItems[entity].values().id) { clickedItemFound = i;
previousItemFound = entity; } else if (previousItemFound === -1 && selectedEntities[0] === entity.id) {
previousItemFound = i;
} }
} };
if (previousItemFound !== -1 && clickedItemFound !== -1) { if (previousItemFound !== -1 && clickedItemFound !== -1) {
var betweenItems = []; let betweenItems = [];
var toItem = Math.max(previousItemFound, clickedItemFound); let toItem = Math.max(previousItemFound, clickedItemFound);
// skip first and last item in this loop, we add them to selection after the loop // 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++) { for (let i = (Math.min(previousItemFound, clickedItemFound) + 1); i < toItem; i++) {
entityList.visibleItems[i].elm.className = 'selected'; visibleEntities[i].el.className = 'selected';
betweenItems.push(entityList.visibleItems[i].values().id); betweenItems.push(visibleEntities[i].id);
} }
if (previousItemFound > clickedItemFound) { if (previousItemFound > clickedItemFound) {
// always make sure that we add the items in the right order // always make sure that we add the items in the right order
@ -165,7 +166,7 @@ function loaded() {
selectedEntities.forEach(function(entityID) { selectedEntities.forEach(function(entityID) {
if (selection.indexOf(entityID) === -1) { if (selection.indexOf(entityID) === -1) {
entities[entityID].el.className = ''; entitiesByID[entityID].el.className = '';
} }
}); });
@ -205,26 +206,28 @@ function loaded() {
return urlParts[urlParts.length - 1]; return urlParts[urlParts.length - 1];
} }
function refreshEntityList() { elFilter.onkeyup = refreshEntityList;
elFilter.onpaste = refreshEntityList;
elFilter.onchange = refreshEntityList;
// Update the entity list with the new set of data sent from edit.js
function updateEntityList(entityData) {
console.warn("updating entity list");
const IMAGE_MODEL_NAME = 'default-image-model.fbx'; const IMAGE_MODEL_NAME = 'default-image-model.fbx';
PROFILE("sort", function() { entities = []
let cmp = currentSortOrder === ASCENDING_SORT ? COMPARE_ASCENDING : COMPARE_DESCENDING; entitiesByID = {};
console.log("Doing sort", currentSortColumn, currentSortOrder); visibleEntities = [];
entityData.sort(cmp);
});
entities = {};
let newEntities;
PROFILE("map-data", function() { PROFILE("map-data", function() {
newEntities = entityData.map(function(entity) { entityData.forEach(function(entity) {
let type = entity.type; let type = entity.type;
let filename = getFilename(entity.url); let filename = getFilename(entity.url);
if (filename === IMAGE_MODEL_NAME) { if (filename === IMAGE_MODEL_NAME) {
type = "Image"; type = "Image";
} }
return {
let entityData = {
id: entity.id, id: entity.id,
name: entity.name, name: entity.name,
type: type, type: type,
@ -238,46 +241,83 @@ function loaded() {
hasTransparent: entity.hasTransparent ? TRANSPARENCY_GLYPH : null, hasTransparent: entity.hasTransparent ? TRANSPARENCY_GLYPH : null,
isBaked: entity.isBaked ? BAKED_GLYPH : null, isBaked: entity.isBaked ? BAKED_GLYPH : null,
drawCalls: displayIfNonZero(entity.drawCalls), drawCalls: displayIfNonZero(entity.drawCalls),
hasScript: entity.hasScript ? SCRIPT_GLYPH : null hasScript: entity.hasScript ? SCRIPT_GLYPH : null,
} }
entities.push(entityData);
entitiesByID[entityData.id] = entityData;
}); });
}); });
console.log("Adding: " + newEntities.length); PROFILE("create-rows", function() {
entities.forEach(function(entity) {
let row = document.createElement('tr');
row.dataset.entityID = entity.id;
row.attributes.title = entity.fullUrl;
function addColumn(cls, text) {
let col = document.createElement('td');
col.className = cls;
col.innerText = text;
row.append(col);
}
function addColumnHTML(cls, text) {
let col = document.createElement('td');
col.className = cls;
col.innerHTML = text;
row.append(col);
}
addColumn('type', entity.type);
addColumn('name', entity.name);
addColumn('url', entity.url);
addColumnHTML('locked glyph', entity.locked);
addColumnHTML('visible glyph', entity.visible);
addColumn('verticesCount', entity.verticesCount);
addColumn('texturesCount', entity.texturesCount);
addColumn('texturesSize', entity.texturesSize);
addColumnHTML('hasTransparent glyph', entity.hasTransparent);
addColumnHTML('isBaked glyph', entity.isBaked);
addColumn('drawCalls', entity.drawCalls);
addColumn('hasScript glyph', entity.hasScript);
row.addEventListener('click', onRowClicked);
row.addEventListener('dblclick', onRowDoubleClicked);
elEntityTableBody.innerHTML = ''; entity.el = row;
});
entities = {};
PROFILE("update-dom", function() {
newEntities.forEach(function(entity) {
let row = document.createElement('tr');
row.dataset.entityID = entity.id;
row.attributes.title = entity.fullUrl;
function addColumn(cls, text) {
let col = document.createElement('td');
col.className = cls;
col.innerText = text;
row.append(col);
}
addColumn('type', entity.type);
addColumn('name', entity.name);
addColumn('url', entity.url);
addColumn('locked glyph', entity.locked);
addColumn('visible glyph', entity.visible);
addColumn('verticesCount', entity.verticesCount);
addColumn('texturesCount', entity.texturesCount);
addColumn('texturesSize', entity.texturesSize);
addColumn('hasTransparent glyph', entity.hasTransparent);
addColumn('isBaked glyph', entity.isBaked);
addColumn('drawCalls', entity.drawCalls);
addColumn('hasScript glyph', entity.hasScript);
elEntityTableBody.append(row);
row.addEventListener('click', onRowClicked);
row.addEventListener('dblclick', onRowDoubleClicked);
entities[entity.id] = { el: row };
}); });
refreshEntityList();
updateSelectedEntities(selectedEntities);
}
function refreshEntityList() {
PROFILE("refresh-entity-list", function() {
console.warn("refreshing entity list");
PROFILE("filter", function() {
let searchTerm = elFilter.value;
if (searchTerm === '') {
visibleEntities = entities.slice(0);
} else {
console.log("Filtering on: ", searchTerm);
visibleEntities = entities.filter(function(e) {
return e.name.indexOf(searchTerm) > -1
|| e.type.indexOf(searchTerm) > -1
|| e.fullUrl.indexOf(searchTerm) > -1;
});
}
});
PROFILE("sort", function() {
let cmp = currentSortOrder === ASCENDING_SORT ? COMPARE_ASCENDING : COMPARE_DESCENDING;
console.log("Doing sort", currentSortColumn, currentSortOrder);
visibleEntities.sort(cmp);
});
PROFILE("update-dom", function() {
elEntityTableBody.innerHTML = '';
for (let i = 0, len = visibleEntities.length; i < len; ++i) {
elEntityTableBody.append(visibleEntities[i].el);
}
});
}); });
} }
@ -290,14 +330,6 @@ function loaded() {
} }
} }
function scheduleRefreshEntityList() {
var REFRESH_DELAY = 50;
if (refreshEntityListTimer) {
clearTimeout(refreshEntityListTimer);
}
refreshEntityListTimer = setTimeout(refreshEntityListObject, REFRESH_DELAY);
}
function clearEntities() { function clearEntities() {
entities = {}; entities = {};
refreshFooter(); refreshFooter();
@ -327,8 +359,6 @@ function loaded() {
currentSortOrder = ASCENDING_SORT; currentSortOrder = ASCENDING_SORT;
} }
elSortOrder[column].innerHTML = currentSortOrder == ASCENDING_SORT ? ASCENDING_STRING : DESCENDING_STRING; elSortOrder[column].innerHTML = currentSortOrder == ASCENDING_SORT ? ASCENDING_STRING : DESCENDING_STRING;
//entityList.sort(currentSortColumn, { order: currentSortOrder });
refreshEntityList(); refreshEntityList();
}); });
} }
@ -340,37 +370,31 @@ function loaded() {
} }
function refreshFooter() { function refreshFooter() {
return;
if (selectedEntities.length > 1) { if (selectedEntities.length > 1) {
elFooter.firstChild.nodeValue = selectedEntities.length + " entities selected"; elFooter.firstChild.nodeValue = selectedEntities.length + " entities selected";
} else if (selectedEntities.length === 1) { } else if (selectedEntities.length === 1) {
elFooter.firstChild.nodeValue = "1 entity selected"; elFooter.firstChild.nodeValue = "1 entity selected";
} else if (entityCount === 1) { } else if (visibleEntities.length === 1) {
elFooter.firstChild.nodeValue = "1 entity found"; elFooter.firstChild.nodeValue = "1 entity found";
} else { } else {
elFooter.firstChild.nodeValue = entityCount + " entities found"; elFooter.firstChild.nodeValue = visibleEntities.length + " entities found";
} }
} }
function refreshEntityListObject() {
refreshEntityListTimer = null;
//entityList.sort(currentSortColumn, { order: currentSortOrder });
//entityList.search(elFilter.value);
refreshFooter();
}
function updateSelectedEntities(selectedIDs) { function updateSelectedEntities(selectedIDs) {
var notFound = false; let notFound = false;
for (var id in entities) {
entities[id].el.className = ''; selectedEntities.forEach(function(id) {
} entitiesByID[id].el.className = '';
});
selectedEntities = []; selectedEntities = [];
for (var i = 0; i < selectedIDs.length; i++) { for (let i = 0; i < selectedIDs.length; i++) {
var id = selectedIDs[i]; let id = selectedIDs[i];
selectedEntities.push(id); selectedEntities.push(id);
if (id in entities) { if (id in entitiesByID) {
var entity = entities[id]; let entity = entitiesByID[id];
entity.el.className = 'selected'; entity.el.className = 'selected';
} else { } else {
notFound = true; notFound = true;
@ -461,17 +485,16 @@ 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";
entityData = newEntities; //entityData = newEntities;
refreshEntityList(); updateEntityList(newEntities);
//updateSelectedEntities(data.selectedIDs); //refreshEntityList();
//scheduleRefreshEntityList(); updateSelectedEntities(data.selectedIDs);
//resize(); //resize();
} }
}); });
} else if (data.type === "removeEntities" && data.deletedIDs !== undefined && data.selectedIDs !== undefined) { } else if (data.type === "removeEntities" && data.deletedIDs !== undefined && data.selectedIDs !== undefined) {
removeEntities(data.deletedIDs); removeEntities(data.deletedIDs);
updateSelectedEntities(data.selectedIDs); updateSelectedEntities(data.selectedIDs);
scheduleRefreshEntityList();
} else if (data.type === "deleted" && data.ids) { } else if (data.type === "deleted" && data.ids) {
removeEntities(data.ids); removeEntities(data.ids);
refreshFooter(); refreshFooter();