From 089c5f4e1c0bd9b0ae6d38b988ceebff32485088 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicolas=20Fle=CC=81ron?= Date: Tue, 16 Oct 2018 23:47:49 +0200 Subject: [PATCH 1/3] Change width style handling --- addon/-private/column-tree.js | 19 ++++++++++++------- addon/components/-private/base-table-cell.js | 20 ++++++++++++++++---- 2 files changed, 28 insertions(+), 11 deletions(-) diff --git a/addon/-private/column-tree.js b/addon/-private/column-tree.js index 483d7a638..b90daf89d 100644 --- a/addon/-private/column-tree.js +++ b/addon/-private/column-tree.js @@ -19,8 +19,6 @@ import { assert } from '@ember/debug'; const SCROLL_THRESHOLD = 50; const DEFAULT_COLUMN_WIDTH = 100; -const DEFAULT_MIN_WIDTH = 50; -const DEFAULT_MAX_WIDTH = Infinity; const LOOP_COUNT_GUARD = 500; @@ -66,7 +64,7 @@ function divideRounded(x, n) { class TableColumnMeta extends EmberObject { // If no width is set on the column itself, we cache a temporary width on the // meta object. This is set to the default width. - _width = DEFAULT_COLUMN_WIDTH; + _width = null; @readOnly('_node.isLeaf') isLeaf; @@ -86,6 +84,12 @@ class TableColumnMeta extends EmberObject { @readOnly('_node.width') width; + @readOnly('_node.minWidth') + minWidth; + + @readOnly('_node.maxWidth') + maxWidth; + @readOnly('_node.offsetLeft') offsetLeft; @@ -322,7 +326,7 @@ class ColumnTreeNode extends EmberObject { if (get(this, 'isLeaf')) { let columnMinWidth = get(this, 'column.minWidth'); - return typeof columnMinWidth === 'number' ? columnMinWidth : DEFAULT_MIN_WIDTH; + return typeof columnMinWidth === 'number' ? columnMinWidth : null; } return get(this, 'subcolumnNodes').reduce((sum, subcolumn) => { @@ -332,12 +336,12 @@ class ColumnTreeNode extends EmberObject { }, 0); } - @computed('column.minWidth') + @computed('column.maxWidth') get maxWidth() { if (get(this, 'isLeaf')) { let columnMaxWidth = get(this, 'column.maxWidth'); - return typeof columnMaxWidth === 'number' ? columnMaxWidth : DEFAULT_MAX_WIDTH; + return typeof columnMaxWidth === 'number' ? columnMaxWidth : null; } return get(this, 'subcolumnNodes').reduce((sum, subcolumn) => { @@ -357,7 +361,8 @@ class ColumnTreeNode extends EmberObject { return columnWidth; } else { let meta = get(this, 'tree.columnMetaCache').get(column); - return get(meta, '_width'); + let metaWidth = get(meta, '_width'); + return typeof metaWidth === 'number' ? metaWidth : null; } } diff --git a/addon/components/-private/base-table-cell.js b/addon/components/-private/base-table-cell.js index fe138aa31..1cbf00ccc 100644 --- a/addon/components/-private/base-table-cell.js +++ b/addon/components/-private/base-table-cell.js @@ -1,5 +1,5 @@ import Component from '@ember/component'; -import { equal } from '@ember/object/computed'; +import { equal, bool } from '@ember/object/computed'; import { observer } from '@ember/object'; import { scheduleOnce } from '@ember/runloop'; @@ -7,11 +7,21 @@ export default Component.extend({ // Provided by subclasses columnMeta: null, - classNameBindings: ['isFirstColumn', 'isFixedLeft', 'isFixedRight'], + classNameBindings: [ + 'isFirstColumn', + 'isFixedLeft', + 'isFixedRight', + 'hasWidth', + 'hasMinWidth', + 'hasMaxWidth', + ], isFirstColumn: equal('columnMeta.index', 0), isFixedLeft: equal('columnMeta.isFixed', 'left'), isFixedRight: equal('columnMeta.isFixed', 'right'), + hasWidth: bool('columnMeta.width'), + hasMinWidth: bool('columnMeta.minWidth'), + hasMaxWidth: bool('columnMeta.maxWidth'), // eslint-disable-next-line scheduleUpdateStyles: observer( @@ -27,10 +37,12 @@ export default Component.extend({ updateStyles() { if (typeof FastBoot === 'undefined' && this.element) { let width = `${this.get('columnMeta.width')}px`; + let minWidth = `${this.get('columnMeta.minWidth')}px`; + let maxWidth = `${this.get('columnMeta.maxWidth')}px`; this.element.style.width = width; - this.element.style.minWidth = width; - this.element.style.maxWidth = width; + this.element.style.minWidth = minWidth; + this.element.style.maxWidth = maxWidth; if (this.get('isFixedLeft')) { this.element.style.left = `${Math.round(this.get('columnMeta.offsetLeft'))}px`; From d5fe0c3a8dc1bcc33d43b8f088244b9716e8757e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicolas=20Fle=CC=81ron?= Date: Wed, 17 Oct 2018 09:08:20 +0200 Subject: [PATCH 2/3] Fix lint : no-unused-vars --- addon/-private/column-tree.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/addon/-private/column-tree.js b/addon/-private/column-tree.js index b90daf89d..89b9d16d6 100644 --- a/addon/-private/column-tree.js +++ b/addon/-private/column-tree.js @@ -18,8 +18,6 @@ import { assert } from '@ember/debug'; const SCROLL_THRESHOLD = 50; -const DEFAULT_COLUMN_WIDTH = 100; - const LOOP_COUNT_GUARD = 500; export const RESIZE_MODE = { From d5d88581b29ff15b95910d815d0b357bf1dc736d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicolas=20Fle=CC=81ron?= Date: Mon, 7 Jan 2019 15:38:25 +0100 Subject: [PATCH 3/3] Make calculation based html element --- addon/-private/column-tree.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/addon/-private/column-tree.js b/addon/-private/column-tree.js index 89b9d16d6..8e86b3fcf 100644 --- a/addon/-private/column-tree.js +++ b/addon/-private/column-tree.js @@ -490,7 +490,7 @@ class ColumnTreeNode extends EmberObject { } let subcolumns = get(parent, 'subcolumnNodes'); - let offsetLeft = get(parent, 'offsetLeft'); + let offsetLeft = get(parent, 'element.offsetLeft'); for (let column of subcolumns) { if (column === this) { @@ -759,9 +759,9 @@ export default class ColumnTree extends EmberObject { let subcolumns = get(column.parent, 'subcolumnNodes'); for (let column of subcolumns) { - let offset = get(column, 'offsetLeft'); + let offset = get(column, 'element.offsetLeft'); - if (left < offset + get(column, 'width')) { + if (left < offset + get(column, 'element.offsetWidth')) { return column; } } @@ -771,7 +771,7 @@ export default class ColumnTree extends EmberObject { getClosestColumnOffset(column, left, isFixed) { let closestColumn = this.getClosestColumn(column, left, isFixed); - let offsetLeft = get(closestColumn, 'offsetLeft'); + let offsetLeft = get(closestColumn, 'element.offsetLeft'); // If the column is fixed, readjust the offset so that it's correct within // the container @@ -842,7 +842,7 @@ export default class ColumnTree extends EmberObject { this._reorderDropIndicator.width = get( this.getClosestColumn(node, this._reorderDropIndicator.left, get(node, 'isFixed')), - 'width' + 'element.offsetWidth' ); }