From af82a570ba79e796400fc1e2ba265ffe2dafd480 Mon Sep 17 00:00:00 2001 From: Ben McIntyre Date: Wed, 17 May 2023 11:46:16 +0930 Subject: [PATCH] feat: remove legacy TreeColumns code - now unused (#775) * remove legacy treecolumns code - now unused * fix typo and add back apparently unnecessary call to setcolumns() which does in fact do crucial refreshing of grid structure --- slick.core.js | 173 -------------------------------------------------- slick.grid.js | 159 +--------------------------------------------- 2 files changed, 3 insertions(+), 329 deletions(-) diff --git a/slick.core.js b/slick.core.js index ba3e78f9..ac5dba02 100644 --- a/slick.core.js +++ b/slick.core.js @@ -512,178 +512,6 @@ }; } - /** - * - * @param {Array} treeColumns Array com levels of columns - * @returns {{hasDepth: 'hasDepth', getTreeColumns: 'getTreeColumns', extractColumns: 'extractColumns', getDepth: 'getDepth', getColumnsInDepth: 'getColumnsInDepth', getColumnsInGroup: 'getColumnsInGroup', visibleColumns: 'visibleColumns', filter: 'filter', reOrder: reOrder}} - * @constructor - */ - function TreeColumns(treeColumns) { - var columnsById = {}; - - function init() { - mapToId(treeColumns); - } - - function mapToId(columns) { - columns - .forEach(function (column) { - columnsById[column.id] = column; - - if (column.columns) { - mapToId(column.columns); - } - }); - } - - function filter(node, condition) { - return node.filter(function (column) { - var valid = condition.call(column); - - if (valid && column.columns) { - column.columns = filter(column.columns, condition); - } - - return valid && (!column.columns || column.columns.length); - }); - - } - - function sort(columns, grid) { - columns - .sort(function (a, b) { - var indexA = getOrDefault(grid.getColumnIndex(a.id)), - indexB = getOrDefault(grid.getColumnIndex(b.id)); - - return indexA - indexB; - }) - .forEach(function (column) { - if (column.columns) { - sort(column.columns, grid); - } - }); - } - - function getOrDefault(value) { - return typeof value === 'undefined' ? -1 : value; - } - - function getDepth(node) { - if (node.length) { - for (var i in node) { - return getDepth(node[i]); - } - } else if (node.columns) { - return 1 + getDepth(node.columns); - } else { - return 1; - } - } - - function getColumnsInDepth(node, depth, current) { - var columns = []; - current = current || 0; - - if (depth == current) { - if (node.length) { - node.forEach(function(n) { - if (n.columns) { - n.extractColumns = function() { - return extractColumns(n); - }; - } - }); - } - return node; - } else { - for (var i in node) { - if (node[i].columns) { - columns = columns.concat(getColumnsInDepth(node[i].columns, depth, current + 1)); - } - } - } - - return columns; - } - - function extractColumns(node) { - var result = []; - - if (node.hasOwnProperty('length')) { - for (var i = 0; i < node.length; i++) { - result = result.concat(extractColumns(node[i])); - } - } else { - if (node.hasOwnProperty('columns')) { - result = result.concat(extractColumns(node.columns)); - } else { - return node; - } - } - - return result; - } - - function cloneTreeColumns() { - return extend([], treeColumns); - } - - init(); - - this.hasDepth = function () { - for (var i in treeColumns) { - if (treeColumns[i].hasOwnProperty('columns')) - return true; - } - - return false; - }; - - this.getTreeColumns = function () { - return treeColumns; - }; - - this.extractColumns = function () { - return this.hasDepth()? extractColumns(treeColumns): treeColumns; - }; - - this.getDepth = function () { - return getDepth(treeColumns); - }; - - this.getColumnsInDepth = function (depth) { - return getColumnsInDepth(treeColumns, depth); - }; - - this.getColumnsInGroup = function (groups) { - return extractColumns(groups); - }; - - this.visibleColumns = function () { - return filter(cloneTreeColumns(), function () { - return this.visible; - }); - }; - - this.filter = function (condition) { - return filter(cloneTreeColumns(), condition); - }; - - this.reOrder = function (grid) { - return sort(treeColumns, grid); - }; - - this.getById = function (id) { - return columnsById[id]; - }; - - this.getInIds = function (ids) { - return ids.map(function (id) { - return columnsById[id]; - }); - }; - } - function regexSanitizer(dirtyHtml) { return dirtyHtml.replace(/(\b)(on[a-z]+)(\s*)=|javascript:([^>]*)[^>]*|(<\s*)(\/*)script([<>]*).*(<\s*)(\/*)script(>*)|(<)(\/*)(script|script defer)(.*)(>|>">)/gi, ''); } @@ -1138,7 +966,6 @@ * @constructor */ "GlobalEditorLock": new EditorLock(), - "TreeColumns": TreeColumns, "keyCode": { SPACE: 8, diff --git a/slick.grid.js b/slick.grid.js index 0323f785..05096dbd 100644 --- a/slick.grid.js +++ b/slick.grid.js @@ -182,7 +182,6 @@ if (typeof Slick === "undefined") { var _canvas; var _style; var _boundAncestors = []; - var treeColumns; var stylesheet, columnCssRulesL, columnCssRulesR; var viewportH, viewportW; var canvasWidth, canvasWidthL, canvasWidthR; @@ -337,9 +336,6 @@ if (typeof Slick === "undefined") { if (!options.suppressCssChangesOnHiddenInit) { cacheCssForHiddenInit(); } - treeColumns = new Slick.TreeColumns(columns); - columns = treeColumns.extractColumns(); - updateColumnProps(); // validate loaded JavaScript modules against requested options @@ -397,16 +393,6 @@ if (typeof Slick === "undefined") { _headerScroller.push(_headerScrollerL); _headerScroller.push(_headerScrollerR); - if (treeColumns.hasDepth()) { - _groupHeadersL = []; - _groupHeadersR = []; - for (var index = 0; index < treeColumns.getDepth() - 1; index++) { - _groupHeadersL[index] = utils.createDomElement('div', { className: 'slick-group-header-columns slick-group-header-columns-left', style: { left: '-1000px' } }, _headerScrollerL); - _groupHeadersR[index] = utils.createDomElement('div', { className: 'slick-group-header-columns slick-group-header-columns-right', style: { left: '-1000px' } }, _headerScrollerR); - } - _groupHeaders = [_groupHeadersL, _groupHeadersR]; - } - // Append the columnn containers to the headers _headerL = utils.createDomElement('div', { className: 'slick-header-columns slick-header-columns-left', style: { left: '-1000px' } }, _headerScrollerL); _headerR = utils.createDomElement('div', { className: 'slick-header-columns slick-header-columns-right', style: { left: '-1000px' } }, _headerScrollerR); @@ -571,7 +557,6 @@ if (typeof Slick === "undefined") { updateColumnCaches(); createColumnHeaders(); - createColumnGroupHeaders(); createColumnFooter(); setupColumnSort(); createCssRules(); @@ -1215,50 +1200,6 @@ if (typeof Slick === "undefined") { } } - function createColumnGroupHeaders() { - var columnsLength = 0; - var frozenColumnsValid = false; - - if (!treeColumns.hasDepth()) { - return; - } - - for (var index = 0; index < _groupHeadersL.length; index++) { - _groupHeadersL[index].replaceChildren(); - _groupHeadersR[index].replaceChildren(); - - var groupColumns = treeColumns.getColumnsInDepth(index); - - for (var indexGroup in groupColumns) { - var m = groupColumns[indexGroup]; - - columnsLength += m.extractColumns().length; - - if (hasFrozenColumns() && index === 0 && (columnsLength - 1) === options.frozenColumn) { - frozenColumnsValid = true; - } - - const el = utils.createDomElement('div', - { id: `${uid + m.id}`, className: 'ui-state-default slick-group-header-column', title: m.toolTip || '' }, - hasFrozenColumns() && (columnsLength - 1) > options.frozenColumn ? _groupHeadersR[index] : _groupHeadersL[index] - ); - utils.createDomElement('span', { className: 'slick-column-name', innerHTML: sanitizeHtmlString(m.name) }, el); - el.classList.add(m.headerCssClass || "") - el.classList.add(hasFrozenColumns() && (columnsLength - 1) > options.frozenColumn ? 'frozen' : ''); - utils.storage.put(el, "column", m); - } - - if (hasFrozenColumns() && index === 0 && !frozenColumnsValid) { - _groupHeadersL[index].replaceChildren(); - _groupHeadersR[index].replaceChildren(); - alert("All columns of group should to be grouped!"); - break; - } - } - - applyColumnGroupHeaderWidths(); - } - function handleHeaderMouseHoverOn(e) { e.target.classList.add("ui-state-hover"); } @@ -1543,36 +1484,6 @@ if (typeof Slick === "undefined") { return currentPosition; } - function limitPositionInGroup(idColumn) { - var groupColumnOfPreviousPosition, - startLimit = 0, - endLimit = 0; - - treeColumns - .getColumnsInDepth(_groupHeadersL.length - 1) - .some(function (groupColumn) { - startLimit = endLimit; - endLimit += groupColumn.columns.length; - - groupColumn.columns.some(function (column) { - if (column.id === idColumn) { - groupColumnOfPreviousPosition = groupColumn; - } - return groupColumnOfPreviousPosition; - }); - - return groupColumnOfPreviousPosition; - }); - - endLimit--; - - return { - start: startLimit, - end: endLimit, - group: groupColumnOfPreviousPosition - }; - } - function remove(arr, elem) { var index = arr.lastIndexOf(elem); if (index > -1) { @@ -1581,18 +1492,6 @@ if (typeof Slick === "undefined") { } } - function columnPositionValidInGroup(item) { - var currentPosition = currentPositionInHeader(item.id); - var limit = limitPositionInGroup(utils.storage.get(item, "column").id); - var positionValid = limit.start <= currentPosition && currentPosition <= limit.end; - - return { - limit: limit, - valid: positionValid, - message: positionValid ? '' : 'Column "'.concat(item.textContent, '" can be reordered only within the "', limit.group.name, '" group!') - }; - } - function setupColumnReorder() { if (sortableSideLeftInstance) { sortableSideLeftInstance.destroy(); @@ -1642,17 +1541,6 @@ if (typeof Slick === "undefined") { columnScrollTimer = null; var limit = null; - if (treeColumns.hasDepth()) { - var validPositionInGroup = columnPositionValidInGroup(e.item); - limit = validPositionInGroup.limit; - - cancel = !validPositionInGroup.valid; - - if (cancel) { - alert(validPositionInGroup.message); - } - } - if (cancel || !getEditorLock().commitCurrentEdit()) { return; } @@ -1981,7 +1869,6 @@ if (typeof Slick === "undefined") { } applyColumnHeaderWidths(); - applyColumnGroupHeaderWidths(); if (options.syncColumnCellResize) { applyColumnWidths(); } @@ -1996,7 +1883,6 @@ if (typeof Slick === "undefined") { var triggeredByColumn = resizeElms.resizeableElement.id.replace(uid, ""); if (trigger(self.onBeforeColumnsResize, { triggeredByColumn: triggeredByColumn }).getReturnValue() === true) { applyColumnHeaderWidths(); - applyColumnGroupHeaderWidths(); } var newWidth; for (j = 0; j < columns.length; j++) { @@ -2950,7 +2836,6 @@ if (typeof Slick === "undefined") { function reRenderColumns(reRender) { applyColumnHeaderWidths(); - applyColumnGroupHeaderWidths(); updateCanvasWidth(true); trigger(self.onAutosizeColumns, { "columns": columns}); @@ -2988,36 +2873,6 @@ if (typeof Slick === "undefined") { return columnsById[id]; } - function applyColumnGroupHeaderWidths() { - if (!treeColumns.hasDepth()) { - return; - } - - for (var depth = _groupHeadersL.length - 1; depth >= 0; depth--) { - var groupColumns = treeColumns.getColumnsInDepth(depth); - - const groupHeaders = [_groupHeadersL[depth], _groupHeadersR[depth]]; - groupHeaders.forEach(function (groupHeader) { - var currentColumnIndex = 0; - - utils.width(groupHeader, i === 0 ? getHeadersWidthL() : getHeadersWidthR()); - - groupHeader.children.forEach(function (groupHeaderColumn) { - var m = utils.storage.get(groupHeaderColumn, "column"); - - m.width = 0; - - m.columns.forEach(function() { - const headerColumn = groupHeader.nextElementSibling.children[currentColumnIndex++]; - m.width += headerColumn.offsetWidth; - }); - - utils.width(groupHeaderColumn, m.width - headerColumnWidthDiff); - }); - }); - } - } - function applyColumnHeaderWidths() { if (!initialized) { return; @@ -3213,14 +3068,7 @@ if (typeof Slick === "undefined") { function setColumns(columnDefinitions) { trigger(self.onBeforeSetColumns, { previousColumns: columns, newColumns: columnDefinitions, grid: self }); - - var _treeColumns = new Slick.TreeColumns(columnDefinitions); - if (_treeColumns.hasDepth()) { - treeColumns = _treeColumns; - columns = treeColumns.extractColumns(); - } else { - columns = columnDefinitions; - } + columns = columnDefinitions; columns = columnDefinitions; updateColumnsInternal(); @@ -3241,7 +3089,6 @@ if (typeof Slick === "undefined") { invalidateAllRows(); createColumnHeaders(); - createColumnGroupHeaders(); createColumnFooter(); removeCssRules(); createCssRules(); @@ -3300,9 +3147,9 @@ if (typeof Slick === "undefined") { } if (!suppressColumnSet) { - setColumns(treeColumns.extractColumns()); + setColumns(columns); } - + if (options.enableMouseWheelScrollHandler && _viewport && (!slickMouseWheelInstances || slickMouseWheelInstances.length === 0)) { _viewport.forEach(function (view) { slickMouseWheelInstances.push(Slick.MouseWheel({