-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- | TypeD |
- Name |
- File |
- |
- |
- Verts |
- Texts |
- Text MB |
- |
- Baked |
- Draws |
- k |
-
-
-
-
- |
- |
- |
- |
- |
- |
- |
- |
- |
- |
- |
- |
- |
-
-
+
+
+
+
There are no entities to display. Please check your filters or create an entity to begin.
diff --git a/scripts/system/html/js/entityList.js b/scripts/system/html/js/entityList.js
index 0204f0c349..82e64a6fbc 100644
--- a/scripts/system/html/js/entityList.js
+++ b/scripts/system/html/js/entityList.js
@@ -10,35 +10,103 @@ const ASCENDING_SORT = 1;
const DESCENDING_SORT = -1;
const ASCENDING_STRING = '▴';
const DESCENDING_STRING = '▾';
-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 COLLAPSE_EXTRA_INFO = "E";
const EXPAND_EXTRA_INFO = "D";
const FILTER_IN_VIEW_ATTRIBUTE = "pressed";
const WINDOW_NONVARIABLE_HEIGHT = 227;
-const NUM_COLUMNS = 12;
const EMPTY_ENTITY_ID = "0";
+const MAX_LENGTH_RADIUS = 9;
+const MINIMUM_COLUMN_WIDTH = 24;
+const SCROLLBAR_WIDTH = 20;
+const RESIZER_WIDTH = 10;
const DELETE = 46; // Key code for the delete key.
const KEY_P = 80; // Key code for letter p used for Parenting hotkey.
-const COLUMN_INDEX = {
- TYPE: 0,
- NAME: 1,
- URL: 2,
- LOCKED: 3,
- VISIBLE: 4,
- VERTICLES_COUNT: 5,
- TEXTURES_COUNT: 6,
- TEXTURES_SIZE: 7,
- HAS_TRANSPARENT: 8,
- IS_BAKED: 9,
- DRAW_CALLS: 10,
- HAS_SCRIPT: 11
+const COLUMNS = {
+ type: {
+ columnHeader: "Type",
+ propertyID: "type",
+ initialWidth: 0.16,
+ initiallyShown: true,
+ alwaysShown: true,
+ },
+ name: {
+ columnHeader: "Name",
+ propertyID: "name",
+ initialWidth: 0.34,
+ initiallyShown: true,
+ alwaysShown: true,
+ },
+ url: {
+ columnHeader: "File",
+ dropdownLabel: "File",
+ propertyID: "url",
+ initialWidth: 0.34,
+ initiallyShown: true,
+ },
+ locked: {
+ columnHeader: "",
+ glyph: true,
+ propertyID: "locked",
+ initialWidth: 0.08,
+ initiallyShown: true,
+ alwaysShown: true,
+ },
+ visible: {
+ columnHeader: "",
+ glyph: true,
+ propertyID: "visible",
+ initialWidth: 0.08,
+ initiallyShown: true,
+ alwaysShown: true,
+ },
+ verticesCount: {
+ columnHeader: "Verts",
+ dropdownLabel: "Vertices",
+ propertyID: "verticesCount",
+ initialWidth: 0.08,
+ },
+ texturesCount: {
+ columnHeader: "Texts",
+ dropdownLabel: "Textures",
+ propertyID: "texturesCount",
+ initialWidth: 0.08,
+ },
+ texturesSize: {
+ columnHeader: "Text MB",
+ dropdownLabel: "Texture Size",
+ propertyID: "texturesSize",
+ initialWidth: 0.10,
+ },
+ hasTransparent: {
+ columnHeader: "",
+ glyph: true,
+ dropdownLabel: "Transparency",
+ propertyID: "hasTransparent",
+ initialWidth: 0.04,
+ },
+ isBaked: {
+ columnHeader: "",
+ glyph: true,
+ dropdownLabel: "Baked",
+ propertyID: "isBaked",
+ initialWidth: 0.08,
+ },
+ drawCalls: {
+ columnHeader: "Draws",
+ dropdownLabel: "Draws",
+ propertyID: "drawCalls",
+ initialWidth: 0.08,
+ },
+ hasScript: {
+ columnHeader: "k",
+ glyph: true,
+ dropdownLabel: "Script",
+ propertyID: "hasScript",
+ initialWidth: 0.06,
+ },
};
const COMPARE_ASCENDING = function(a, b) {
@@ -101,11 +169,19 @@ let entityListContextMenu = null;
let currentSortColumn = 'type';
let currentSortOrder = ASCENDING_SORT;
+let elSortOrders = {};
let typeFilters = [];
let isFilterInView = false;
-let showExtraInfo = false;
+
+let columns = [];
+let columnsByID = {};
+let currentResizeEl = null;
+let startResizeEvent = null;
+let resizeColumnIndex = 0;
+let startThClick = null;
let elEntityTable,
+ elEntityTableHeader,
elEntityTableBody,
elEntityTableScroll,
elEntityTableHeaderRow,
@@ -113,19 +189,19 @@ let elEntityTable,
elToggleLocked,
elToggleVisible,
elDelete,
- elFilterTypeSelectBox,
+ elFilterTypeMultiselectBox,
elFilterTypeText,
- elFilterTypeCheckboxes,
+ elFilterTypeOptions,
elFilterSearch,
elFilterInView,
elFilterRadius,
elExport,
elPal,
- elInfoToggle,
- elInfoToggleGlyph,
elSelectedEntitiesCount,
elVisibleEntitiesCount,
elNoEntitiesMessage,
+ elColumnsMultiselectBox,
+ elColumnsOptions,
elToggleSpaceMode;
const ENABLE_PROFILING = false;
@@ -151,68 +227,29 @@ debugPrint = function (message) {
function loaded() {
openEventBridge(function() {
elEntityTable = document.getElementById("entity-table");
+ elEntityTableHeader = document.getElementById("entity-table-header");
elEntityTableBody = document.getElementById("entity-table-body");
elEntityTableScroll = document.getElementById("entity-table-scroll");
- elEntityTableHeaderRow = document.querySelectorAll("#entity-table thead th");
elRefresh = document.getElementById("refresh");
elToggleLocked = document.getElementById("locked");
elToggleVisible = document.getElementById("visible");
elDelete = document.getElementById("delete");
- elFilterTypeSelectBox = document.getElementById("filter-type-select-box");
+ elFilterTypeMultiselectBox = document.getElementById("filter-type-multiselect-box");
elFilterTypeText = document.getElementById("filter-type-text");
- elFilterTypeCheckboxes = document.getElementById("filter-type-checkboxes");
+ elFilterTypeOptions = document.getElementById("filter-type-options");
elFilterSearch = document.getElementById("filter-search");
elFilterInView = document.getElementById("filter-in-view");
elFilterRadius = document.getElementById("filter-radius");
elExport = document.getElementById("export");
elPal = document.getElementById("pal");
- elInfoToggle = document.getElementById("info-toggle");
- elInfoToggleGlyph = elInfoToggle.firstChild;
elSelectedEntitiesCount = document.getElementById("selected-entities-count");
elVisibleEntitiesCount = document.getElementById("visible-entities-count");
elNoEntitiesMessage = document.getElementById("no-entities");
+ elColumnsMultiselectBox = document.getElementById("entity-table-columns-multiselect-box");
+ elColumnsOptions = document.getElementById("entity-table-columns-options");
elToggleSpaceMode = document.getElementById('toggle-space-mode');
document.body.onclick = onBodyClick;
- 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' }));
};
@@ -231,53 +268,136 @@ function loaded() {
elToggleSpaceMode.onclick = function() {
EventBridge.emitWebEvent(JSON.stringify({ type: 'toggleSpaceMode' }));
};
-
- elFilterTypeSelectBox.onclick = onToggleTypeDropdown;
+ elRefresh.onclick = refreshEntities;
+ elFilterTypeMultiselectBox.onclick = onToggleTypeDropdown;
elFilterSearch.onkeyup = refreshEntityList;
elFilterSearch.onsearch = refreshEntityList;
- elFilterInView.onclick = toggleFilterInView;
+ elFilterInView.onclick = onToggleFilterInView;
elFilterRadius.onkeyup = onRadiusChange;
elFilterRadius.onchange = onRadiusChange;
- elFilterRadius.onclick = onRadiusChange;
- elInfoToggle.onclick = toggleInfo;
+ elColumnsMultiselectBox.onclick = onToggleColumnsDropdown;
// create filter type dropdown checkboxes with label and icon for each type
for (let i = 0; i < FILTER_TYPES.length; ++i) {
let type = FILTER_TYPES[i];
let typeFilterID = "filter-type-" + type;
+
let elDiv = document.createElement('div');
- let elLabel = document.createElement('label');
- elLabel.setAttribute("for", typeFilterID);
- elLabel.innerText = type;
- let elSpan = document.createElement('span');
- elSpan.setAttribute("class", "typeIcon");
- elSpan.innerHTML = ICON_FOR_TYPE[type];
+ elDiv.onclick = onToggleTypeFilter;
+ elFilterTypeOptions.appendChild(elDiv);
+
let elInput = document.createElement('input');
elInput.setAttribute("type", "checkbox");
elInput.setAttribute("id", typeFilterID);
elInput.setAttribute("filterType", type);
elInput.checked = true; // all types are checked initially
- toggleTypeFilter(elInput, false); // add all types to the initial types filter
elDiv.appendChild(elInput);
- elLabel.insertBefore(elSpan, elLabel.childNodes[0]);
+
+ let elLabel = document.createElement('label');
+ elLabel.setAttribute("for", typeFilterID);
+ elLabel.innerText = type;
elDiv.appendChild(elLabel);
- elFilterTypeCheckboxes.appendChild(elDiv);
- elDiv.onclick = onToggleTypeFilter;
+
+ let elSpan = document.createElement('span');
+ elSpan.setAttribute("class", "typeIcon");
+ elSpan.innerHTML = ICON_FOR_TYPE[type];
+
+ elLabel.insertBefore(elSpan, elLabel.childNodes[0]);
+
+ toggleTypeFilter(elInput, false); // add all types to the initial types filter
}
+ // create columns
+ elHeaderTr = document.createElement("tr");
+ elEntityTableHeader.appendChild(elHeaderTr);
+ let columnIndex = 0;
+ for (let columnID in COLUMNS) {
+ let columnData = COLUMNS[columnID];
+
+ let thID = "entity-" + columnID;
+ let elTh = document.createElement("th");
+ elTh.setAttribute("id", thID);
+ elTh.setAttribute("data-resizable-column-id", thID);
+ if (columnData.glyph) {
+ let elGlyph = document.createElement("span");
+ elGlyph.className = "glyph";
+ elGlyph.innerHTML = columnData.columnHeader;
+ elTh.appendChild(elGlyph);
+ } else {
+ elTh.innerText = columnData.columnHeader;
+ }
+ elTh.onmousedown = function() {
+ startThClick = this;
+ };
+ elTh.onmouseup = function() {
+ if (startThClick === this) {
+ setSortColumn(columnID);
+ }
+ startThClick = null;
+ };
+
+ let elResizer = document.createElement("span");
+ elResizer.className = "resizer";
+ elResizer.innerHTML = " ";
+ elResizer.setAttribute("columnIndex", columnIndex);
+ elResizer.onmousedown = onStartResize;
+ elTh.appendChild(elResizer);
+
+ let elSortOrder = document.createElement("span");
+ elSortOrder.className = "sort-order";
+ elTh.appendChild(elSortOrder);
+ elHeaderTr.appendChild(elTh);
+
+ elSortOrders[columnID] = elSortOrder;
+
+ // add column to columns dropdown if it is not set to be always shown
+ if (columnData.alwaysShown !== true) {
+ let columnDropdownID = "entity-table-column-" + columnID;
+
+ let elDiv = document.createElement('div');
+ elDiv.onclick = onToggleColumn;
+ elColumnsOptions.appendChild(elDiv);
+
+ let elInput = document.createElement('input');
+ elInput.setAttribute("type", "checkbox");
+ elInput.setAttribute("id", columnDropdownID);
+ elInput.setAttribute("columnID", columnID);
+ elInput.checked = columnData.initiallyShown === true;
+ elDiv.appendChild(elInput);
+
+ let elLabel = document.createElement('label');
+ elLabel.setAttribute("for", columnDropdownID);
+ elLabel.innerText = columnData.dropdownLabel;
+ elDiv.appendChild(elLabel);
+ }
+
+ let initialWidth = columnData.initiallyShown === true ? columnData.initialWidth : 0;
+ columns.push({
+ columnID: columnID,
+ elTh: elTh,
+ elResizer: elResizer,
+ width: initialWidth,
+ data: columnData
+ });
+ columnsByID[columnID] = columns[columnIndex];
+
+ ++columnIndex;
+ }
+
+ elEntityTableHeaderRow = document.querySelectorAll("#entity-table thead th");
+
entityList = new ListView(elEntityTableBody, elEntityTableScroll, elEntityTableHeaderRow,
createRow, updateRow, clearRow, WINDOW_NONVARIABLE_HEIGHT);
entityListContextMenu = new EntityListContextMenu();
-
function startRenamingEntity(entityID) {
let entity = entitiesByID[entityID];
if (!entity || entity.locked || !entity.elRow) {
return;
}
- let elCell = entity.elRow.childNodes[COLUMN_INDEX.NAME];
+ let elCell = entity.elRow.childNodes[getColumnIndex("name")];
let elRenameInput = document.createElement("input");
elRenameInput.setAttribute('class', 'rename-entity');
elRenameInput.value = entity.name;
@@ -494,6 +614,7 @@ function loaded() {
PROFILE("update-dom", function() {
entityList.itemData = visibleEntities;
entityList.refresh();
+ updateColumnWidths();
});
refreshFooter();
@@ -576,26 +697,12 @@ function loaded() {
refreshNoEntitiesMessage();
}
- 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 = "";
+ elSortOrders[currentSortColumn].innerHTML = "";
currentSortColumn = column;
currentSortOrder = ASCENDING_SORT;
}
@@ -603,8 +710,9 @@ function loaded() {
refreshEntityList();
});
}
+
function refreshSortOrder() {
- elSortOrder[currentSortColumn].innerHTML = currentSortOrder === ASCENDING_SORT ? ASCENDING_STRING : DESCENDING_STRING;
+ elSortOrders[currentSortColumn].innerHTML = currentSortOrder === ASCENDING_SORT ? ASCENDING_STRING : DESCENDING_STRING;
}
function refreshEntities() {
@@ -680,54 +788,33 @@ function loaded() {
return notFound;
}
- function isGlyphColumn(columnIndex) {
- return columnIndex === COLUMN_INDEX.LOCKED || columnIndex === COLUMN_INDEX.VISIBLE ||
- columnIndex === COLUMN_INDEX.HAS_TRANSPARENT || columnIndex === COLUMN_INDEX.IS_BAKED ||
- columnIndex === COLUMN_INDEX.HAS_SCRIPT;
- }
-
function createRow() {
- let row = document.createElement("tr");
- for (let i = 0; i < NUM_COLUMNS; i++) {
- let column = document.createElement("td");
- if (isGlyphColumn(i)) {
- column.className = 'glyph';
- }
- row.appendChild(column);
- }
- row.oncontextmenu = onRowContextMenu;
- row.onclick = onRowClicked;
- row.ondblclick = onRowDoubleClicked;
- return row;
+ let elRow = document.createElement("tr");
+ columns.forEach(function(column) {
+ let elRowColumn = document.createElement("td");
+ elRowColumn.className = createColumnClassName(column.columnID);
+ elRow.appendChild(elRowColumn);
+ });
+ elRow.oncontextmenu = onRowContextMenu;
+ elRow.onclick = onRowClicked;
+ elRow.ondblclick = onRowDoubleClicked;
+ return elRow;
}
function updateRow(elRow, itemData) {
// update all column texts and glyphs to this entity's data
- let typeCell = elRow.childNodes[COLUMN_INDEX.TYPE];
- typeCell.innerText = itemData.type;
- let nameCell = elRow.childNodes[COLUMN_INDEX.NAME];
- nameCell.innerText = itemData.name;
- let urlCell = elRow.childNodes[COLUMN_INDEX.URL];
- urlCell.innerText = itemData.url;
- let lockedCell = elRow.childNodes[COLUMN_INDEX.LOCKED];
- lockedCell.innerHTML = itemData.locked ? LOCKED_GLYPH : null;
- let visibleCell = elRow.childNodes[COLUMN_INDEX.VISIBLE];
- visibleCell.innerHTML = itemData.visible ? VISIBLE_GLYPH : null;
- let verticesCountCell = elRow.childNodes[COLUMN_INDEX.VERTICLES_COUNT];
- verticesCountCell.innerText = itemData.verticesCount;
- let texturesCountCell = elRow.childNodes[COLUMN_INDEX.TEXTURES_COUNT];
- texturesCountCell.innerText = itemData.texturesCount;
- let texturesSizeCell = elRow.childNodes[COLUMN_INDEX.TEXTURES_SIZE];
- texturesSizeCell.innerText = itemData.texturesSize;
- let hasTransparentCell = elRow.childNodes[COLUMN_INDEX.HAS_TRANSPARENT];
- hasTransparentCell.innerHTML = itemData.hasTransparent ? TRANSPARENCY_GLYPH : null;
- let isBakedCell = elRow.childNodes[COLUMN_INDEX.IS_BAKED];
- isBakedCell.innerHTML = itemData.isBaked ? BAKED_GLYPH : null;
- let drawCallsCell = elRow.childNodes[COLUMN_INDEX.DRAW_CALLS];
- drawCallsCell.innerText = itemData.drawCalls;
- let hasScriptCell = elRow.childNodes[COLUMN_INDEX.HAS_SCRIPT];
- hasScriptCell.innerHTML = itemData.hasScript ? SCRIPT_GLYPH : null;
-
+ for (let i = 0; i < columns.length; ++i) {
+ let column = columns[i];
+ let elCell = elRow.childNodes[i];
+ if (column.data.glyph) {
+ elCell.innerHTML = itemData[column.data.propertyID] ? column.data.columnHeader : null;
+ } else {
+ elCell.innerText = itemData[column.data.propertyID];
+ }
+ elCell.style = "min-width:" + column.widthPx + "px;" + "max-width:" + column.widthPx + "px;";
+ elCell.className = createColumnClassName(column.columnID);
+ }
+
// if this entity was previously selected flag it's row as selected
if (itemData.selected) {
elRow.className = 'selected';
@@ -752,16 +839,16 @@ function loaded() {
}
function clearRow(elRow) {
- // reset all texts and glyphs for each of the row's column
- for (let i = 0; i < NUM_COLUMNS; i++) {
+ // reset all texts and glyphs for each of the row's columns
+ for (let i = 0; i < columns.length; ++i) {
let cell = elRow.childNodes[i];
- if (isGlyphColumn(i)) {
+ if (columns[i].data.glyph) {
cell.innerHTML = "";
} else {
cell.innerText = "";
}
}
-
+
// clear the row from any associated entity
let entityID = elRow.dataset.entityID;
if (entityID && entitiesByID[entityID]) {
@@ -773,7 +860,7 @@ function loaded() {
elRow.dataset.entityID = EMPTY_ENTITY_ID;
}
- function toggleFilterInView() {
+ function onToggleFilterInView() {
isFilterInView = !isFilterInView;
if (isFilterInView) {
elFilterInView.setAttribute(FILTER_IN_VIEW_ATTRIBUTE, FILTER_IN_VIEW_ATTRIBUTE);
@@ -791,16 +878,109 @@ function loaded() {
refreshEntities();
}
+ function getColumnIndex(columnID) {
+ for (let i = 0; i < columns.length; ++i) {
+ if (columns[i].columnID === columnID) {
+ return i;
+ }
+ }
+ return -1;
+ }
+
+ function createColumnClassName(columnID) {
+ let column = columnsByID[columnID];
+ let visible = column.elTh.style.visibility !== "hidden";
+ let className = column.data.glyph ? "glyph" : "";
+ className += visible ? "" : " hidden";
+ return className;
+ }
+
+ function isColumnsDropdownVisible() {
+ return elColumnsOptions.style.display === "block";
+ }
+
+ function toggleColumnsDropdown() {
+ elColumnsOptions.style.display = isColumnsDropdownVisible() ? "none" : "block";
+ }
+
+ function onToggleColumnsDropdown(event) {
+ toggleColumnsDropdown();
+ if (isTypeDropdownVisible()) {
+ toggleTypeDropdown();
+ }
+ event.stopPropagation();
+ }
+
+ function toggleColumn(elInput, refresh) {
+ let columnID = elInput.getAttribute("columnID");
+ let columnChecked = elInput.checked;
+
+ if (columnChecked) {
+ let widthNeeded = columnsByID[columnID].data.initialWidth;
+
+ let numberVisibleColumns = 0;
+ for (let i = 0; i < columns.length; ++i) {
+ let column = columns[i];
+ if (column.columnID === columnID) {
+ column.width = widthNeeded;
+ } else if (column.width > 0) {
+ ++numberVisibleColumns;
+ }
+ }
+
+ for (let i = 0; i < columns.length; ++i) {
+ let column = columns[i];
+ if (column.columnID !== columnID && column.width > 0) {
+ column.width -= column.width * widthNeeded;
+ }
+ }
+ } else {
+ let widthLoss = 0;
+
+ let numberVisibleColumns = 0;
+ for (let i = 0; i < columns.length; ++i) {
+ let column = columns[i];
+ if (column.columnID === columnID) {
+ widthLoss = column.width;
+ column.width = 0;
+ } else if (column.width > 0) {
+ ++numberVisibleColumns;
+ }
+ }
+
+ for (let i = 0; i < columns.length; ++i) {
+ let column = columns[i];
+ if (column.columnID !== columnID && column.width > 0) {
+ let newTotalWidth = (1 - widthLoss);
+ column.width += (column.width / newTotalWidth) * widthLoss;
+ }
+ }
+ }
+
+ updateColumnWidths();
+ }
+
+ function onToggleColumn(event) {
+ let elTarget = event.target;
+ if (elTarget instanceof HTMLInputElement) {
+ toggleColumn(elTarget, true);
+ }
+ event.stopPropagation();
+ }
+
function isTypeDropdownVisible() {
- return elFilterTypeCheckboxes.style.display === "block";
+ return elFilterTypeOptions.style.display === "block";
}
function toggleTypeDropdown() {
- elFilterTypeCheckboxes.style.display = isTypeDropdownVisible() ? "none" : "block";
+ elFilterTypeOptions.style.display = isTypeDropdownVisible() ? "none" : "block";
}
function onToggleTypeDropdown(event) {
toggleTypeDropdown();
+ if (isColumnsDropdownVisible()) {
+ toggleColumnsDropdown();
+ }
event.stopPropagation();
}
@@ -837,25 +1017,93 @@ function loaded() {
}
function onBodyClick(event) {
- // if clicking anywhere outside of the type filter dropdown (since click event bubbled up to onBodyClick and
- // propagation wasn't stopped by onToggleTypeFilter or onToggleTypeDropdown) and the dropdown is open then close it
+ // if clicking anywhere outside of the multiselect dropdowns (since click event bubbled up to onBodyClick and
+ // propagation wasn't stopped in the toggle type/column callbacks) and the dropdown is open then close it
if (isTypeDropdownVisible()) {
toggleTypeDropdown();
}
+ if (isColumnsDropdownVisible()) {
+ toggleColumnsDropdown();
+ }
}
- function toggleInfo(event) {
- showExtraInfo = !showExtraInfo;
- if (showExtraInfo) {
- elEntityTable.className = "showExtraInfo";
- elInfoToggleGlyph.innerHTML = COLLAPSE_EXTRA_INFO;
- } else {
- elEntityTable.className = "";
- elInfoToggleGlyph.innerHTML = EXPAND_EXTRA_INFO;
- }
- entityList.resize();
+ function onStartResize(event) {
+ startResizeEvent = event;
+ resizeColumnIndex = parseInt(this.getAttribute("columnIndex"));
event.stopPropagation();
}
+
+ function updateColumnWidths() {
+ let fullWidth = elEntityTableBody.offsetWidth;
+ let remainingWidth = fullWidth;
+ let scrollbarVisible = elEntityTableScroll.scrollHeight > elEntityTableScroll.clientHeight;
+ let resizerRight = scrollbarVisible ? SCROLLBAR_WIDTH - RESIZER_WIDTH/2 : -RESIZER_WIDTH/2;
+ let visibleColumns = 0;
+
+ for (let i = columns.length - 1; i > 0; --i) {
+ let column = columns[i];
+ column.widthPx = Math.ceil(column.width * fullWidth);
+ column.elTh.style = "min-width:" + column.widthPx + "px;" + "max-width:" + column.widthPx + "px;";
+ let columnVisible = column.width > 0;
+ column.elTh.style.visibility = columnVisible ? "visible" : "hidden";
+ if (column.elResizer) {
+ column.elResizer.style = "right:" + resizerRight + "px;";
+ column.elResizer.style.visibility = columnVisible && visibleColumns > 0 ? "visible" : "hidden";
+ }
+ resizerRight += column.widthPx;
+ remainingWidth -= column.widthPx;
+ if (columnVisible) {
+ ++visibleColumns;
+ }
+ }
+
+ // assign all remaining space to the first column
+ let column = columns[0];
+ column.widthPx = remainingWidth;
+ column.width = remainingWidth / fullWidth;
+ column.elTh.style = "min-width:" + column.widthPx + "px;" + "max-width:" + column.widthPx + "px;";
+ let columnVisible = column.width > 0;
+ column.elTh.style.visibility = columnVisible ? "visible" : "hidden";
+ if (column.elResizer) {
+ column.elResizer.style = "right:" + resizerRight + "px;";
+ column.elResizer.style.visibility = columnVisible && visibleColumns > 0 ? "visible" : "hidden";
+ }
+
+ entityList.refresh();
+ }
+
+ document.onmousemove = function(ev) {
+ if (startResizeEvent) {
+ startTh = null;
+
+ let column = columns[resizeColumnIndex];
+
+ let nextColumnIndex = resizeColumnIndex + 1;
+ let nextColumn = columns[nextColumnIndex];
+ while (nextColumn.width === 0) {
+ nextColumn = columns[++nextColumnIndex];
+ }
+
+ let fullWidth = elEntityTableBody.offsetWidth;
+ let dx = ev.clientX - startResizeEvent.clientX;
+ let dPct = dx / fullWidth;
+
+ let newColWidth = column.width + dPct;
+ let newNextColWidth = nextColumn.width - dPct;
+
+ if (newColWidth * fullWidth >= MINIMUM_COLUMN_WIDTH && newNextColWidth * fullWidth >= MINIMUM_COLUMN_WIDTH) {
+ column.width += dPct;
+ nextColumn.width -= dPct;
+ updateColumnWidths();
+ startResizeEvent = ev;
+ }
+ }
+ }
+
+ document.onmouseup = function(ev) {
+ startResizeEvent = null;
+ ev.stopPropagation();
+ }
function setSpaceMode(spaceMode) {
if (spaceMode === "local") {
@@ -920,6 +1168,8 @@ function loaded() {
refreshSortOrder();
refreshEntities();
+
+ window.onresize = updateColumnWidths;
});
augmentSpinButtons();
diff --git a/scripts/system/html/js/listView.js b/scripts/system/html/js/listView.js
index 62163ffe16..07aba53f1c 100644
--- a/scripts/system/html/js/listView.js
+++ b/scripts/system/html/js/listView.js
@@ -7,7 +7,7 @@
// See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
const SCROLL_ROWS = 2; // number of rows used as scrolling buffer, each time we pass this number of rows we scroll
-const FIRST_ROW_INDEX = 3; // the first elRow element's index in the child nodes of the table body
+const FIRST_ROW_INDEX = 2; // the first elRow element's index in the child nodes of the table body
debugPrint = function (message) {
console.log(message);
@@ -284,18 +284,6 @@ ListView.prototype = {
this.elTableBody.insertBefore(scrollRow, this.elBottomBuffer);
this.elRows.push(scrollRow);
}
-
- let ths = this.elTableHeaderRow;
- let tds = this.getNumRows() > 0 ? this.elRows[0].childNodes : [];
- if (!ths) {
- debugPrint("ListView.resize - no valid table header row");
- } else if (tds.length !== ths.length) {
- debugPrint("ListView.resize - td list size " + tds.length + " does not match th list size " + ths.length);
- }
- // update the widths of the header cells to match the body cells (using first body row)
- for (let i = 0; i < ths.length; i++) {
- ths[i].width = tds[i].offsetWidth;
- }
// restore the scroll point to the same scroll point from before above changes
this.elTableScroll.scrollTop = prevScrollTop;
@@ -309,9 +297,6 @@ ListView.prototype = {
return;
}
- // delete initial blank row
- this.elTableBody.deleteRow(0);
-
this.elTopBuffer = document.createElement("tr");
this.elTableBody.appendChild(this.elTopBuffer);
this.elTopBuffer.setAttribute("height", 0);