From b9281ccc76b0702d3adc940ecf76ddbb4322a5bd Mon Sep 17 00:00:00 2001 From: Yorrd Date: Sat, 6 May 2017 02:54:33 +0200 Subject: [PATCH 01/10] allow for infinite expansion if the respective property is set to true --- the-grid.html | 41 ++++++++++++++++++++++++++++++++++------- 1 file changed, 34 insertions(+), 7 deletions(-) diff --git a/the-grid.html b/the-grid.html index 9cc56c2..c844466 100644 --- a/the-grid.html +++ b/the-grid.html @@ -149,6 +149,17 @@ value: false, reflectToAttribute: true, observer: '_attachEvents' + }, + + /** + * Enable infinite automatic extension of the grid on resize and move. + * @type {boolean} + */ + selfResize: { + type: Boolean, + value: true, + reflectToAttribute: true, + observer: '_attachEvents' } } } @@ -179,6 +190,8 @@ let addOrRemoveMoveListener = this.draggable ? 'addListener' : 'removeListener'; Array.prototype.forEach.call(this.children, child => { + this.ensureSpaceIfSelfResizing(child); + this.computeStyles(); let isPlaceholder = child.hasAttribute('placeholder'); if (isPlaceholder) { this.placeholder = child; @@ -267,11 +280,21 @@ } + ensureSpaceIfSelfResizing(child) { + if(!this.selfResize) return; + let minHeight = parseInt(child.getAttribute("row")) + parseInt(child.getAttribute("height")); + if(this.rowCount < minHeight) this.rowCount = minHeight; + let minWidth = parseInt(child.getAttribute("col")) + parseInt(child.getAttribute("width")); + if(this.colCount < minWidth) this.colCount = minWidth; + } + /** * Process events related to a player being moved. * @private */ _handleMove(e) { + e.stopPropagation(); + let player = e.target, state = e.detail.state; @@ -309,11 +332,13 @@ player.style.top = `${newTop}px`; this.placeholder.setAttribute('row', position.row); this.placeholder.setAttribute('col', position.col); + this.ensureSpaceIfSelfResizing(this.placeholder); } if (state == 'end') { player.setAttribute('row', this.placeholder.getAttribute('row')); - player.setAttribute('col', this.placeholder.getAttribute('col')) + player.setAttribute('col', this.placeholder.getAttribute('col')); + this.ensureSpaceIfSelfResizing(player); player.style.left = ''; player.style.top = ''; player.style.transition = ''; @@ -368,8 +393,8 @@ let newTop = top + e.detail.ddy; let newWidth = width + (isLeft ? -e.detail.ddx : e.detail.ddx); let newHeight = height + (isTop ? -e.detail.ddy : e.detail.ddy); - let row = +player.getAttribute('row') - let col = +player.getAttribute('col') + let row = +player.getAttribute('row'); + let col = +player.getAttribute('col'); let cols = +player.getAttribute('width'); let rows = +player.getAttribute('height'); let position = this.getClosestPosition(newLeft, newTop, 1, 1, isTop || isLeft); @@ -388,6 +413,7 @@ isLeft && this.placeholder.setAttribute('col', position.col); isHeight && this.placeholder.setAttribute('height', size.height); isWidth && this.placeholder.setAttribute('width', size.width); + this.ensureSpaceIfSelfResizing(this.placeholder); } if (state == 'end') { @@ -395,6 +421,7 @@ player.setAttribute('col', this.placeholder.getAttribute('col')); player.setAttribute('width', this.placeholder.getAttribute('width')); player.setAttribute('height', this.placeholder.getAttribute('height')); + this.ensureSpaceIfSelfResizing(this.placeholder); player.style.transition = 'var(--grid-resize-animation-transition)'; player.style.left = ''; player.style.top = ''; @@ -454,8 +481,8 @@ // Min = 0. // Max = grid size - player size. return { - col: Math.max(Math.min(position.col, this.colCount - cols), 0), - row: Math.max(Math.min(position.row, this.rowCount - rows), 0) + col: Math.max(Math.min(position.col, this.selfResize ? Infinity : this.colCount - cols), 0), + row: Math.max(Math.min(position.row, this.selfResize ? Infinity : this.rowCount - rows), 0) } } @@ -478,8 +505,8 @@ // Min = 1. // Max = grid size (or provided max) return { - width: Math.max(Math.min(size.width, maxWidth), 1), - height: Math.max(Math.min(size.height, maxHeight), 1) + width: Math.max(Math.min(size.width, this.selfResize ? Infinity : maxWidth), 1), + height: Math.max(Math.min(size.height, this.selfResize ? Infinity : maxHeight), 1) } } From dc45d3daa8febac00cd9436a465d4158adecebe1 Mon Sep 17 00:00:00 2001 From: Yorrd Date: Tue, 9 May 2017 17:20:29 +0200 Subject: [PATCH 02/10] requested changes --- the-grid.html | 40 ++++++++++++++-------------------------- 1 file changed, 14 insertions(+), 26 deletions(-) diff --git a/the-grid.html b/the-grid.html index c844466..71fd6b0 100644 --- a/the-grid.html +++ b/the-grid.html @@ -149,17 +149,6 @@ value: false, reflectToAttribute: true, observer: '_attachEvents' - }, - - /** - * Enable infinite automatic extension of the grid on resize and move. - * @type {boolean} - */ - selfResize: { - type: Boolean, - value: true, - reflectToAttribute: true, - observer: '_attachEvents' } } } @@ -177,6 +166,7 @@ this.addEventListener('dom-change', this._attachEvents); this._attachEvents(); + this.computeStyles(); } /** @@ -190,8 +180,7 @@ let addOrRemoveMoveListener = this.draggable ? 'addListener' : 'removeListener'; Array.prototype.forEach.call(this.children, child => { - this.ensureSpaceIfSelfResizing(child); - this.computeStyles(); + this.ensureSpace(child); let isPlaceholder = child.hasAttribute('placeholder'); if (isPlaceholder) { this.placeholder = child; @@ -280,12 +269,11 @@ } - ensureSpaceIfSelfResizing(child) { - if(!this.selfResize) return; + ensureSpace(child) { let minHeight = parseInt(child.getAttribute("row")) + parseInt(child.getAttribute("height")); - if(this.rowCount < minHeight) this.rowCount = minHeight; + if(+this.rowCount === 0 && this.rowCount < minHeight) this.rowCount = minHeight; let minWidth = parseInt(child.getAttribute("col")) + parseInt(child.getAttribute("width")); - if(this.colCount < minWidth) this.colCount = minWidth; + if(+this.colCount === 0 && this.colCount < minWidth) this.colCount = minWidth; } /** @@ -293,7 +281,6 @@ * @private */ _handleMove(e) { - e.stopPropagation(); let player = e.target, state = e.detail.state; @@ -332,13 +319,13 @@ player.style.top = `${newTop}px`; this.placeholder.setAttribute('row', position.row); this.placeholder.setAttribute('col', position.col); - this.ensureSpaceIfSelfResizing(this.placeholder); + this.ensureSpace(this.placeholder); } if (state == 'end') { player.setAttribute('row', this.placeholder.getAttribute('row')); player.setAttribute('col', this.placeholder.getAttribute('col')); - this.ensureSpaceIfSelfResizing(player); + this.ensureSpace(player); player.style.left = ''; player.style.top = ''; player.style.transition = ''; @@ -348,6 +335,7 @@ this._safePreventDefault(e.detail.sourceEvent); e.preventDefault(); + e.stopPropagation(); } @@ -413,7 +401,7 @@ isLeft && this.placeholder.setAttribute('col', position.col); isHeight && this.placeholder.setAttribute('height', size.height); isWidth && this.placeholder.setAttribute('width', size.width); - this.ensureSpaceIfSelfResizing(this.placeholder); + this.ensureSpace(this.placeholder); } if (state == 'end') { @@ -421,7 +409,7 @@ player.setAttribute('col', this.placeholder.getAttribute('col')); player.setAttribute('width', this.placeholder.getAttribute('width')); player.setAttribute('height', this.placeholder.getAttribute('height')); - this.ensureSpaceIfSelfResizing(this.placeholder); + this.ensureSpace(this.placeholder); player.style.transition = 'var(--grid-resize-animation-transition)'; player.style.left = ''; player.style.top = ''; @@ -481,8 +469,8 @@ // Min = 0. // Max = grid size - player size. return { - col: Math.max(Math.min(position.col, this.selfResize ? Infinity : this.colCount - cols), 0), - row: Math.max(Math.min(position.row, this.selfResize ? Infinity : this.rowCount - rows), 0) + col: Math.max(Math.min(position.col, +this.colCount === 0 ? Infinity : this.colCount - cols), 0), + row: Math.max(Math.min(position.row, +this.rowCount === 0 ? Infinity : this.rowCount - rows), 0) } } @@ -505,8 +493,8 @@ // Min = 1. // Max = grid size (or provided max) return { - width: Math.max(Math.min(size.width, this.selfResize ? Infinity : maxWidth), 1), - height: Math.max(Math.min(size.height, this.selfResize ? Infinity : maxHeight), 1) + width: Math.max(Math.min(size.width, +this.colCount === 0 ? Infinity : maxWidth), 1), + height: Math.max(Math.min(size.height, +this.rowCount === 0 ? Infinity : maxHeight), 1) } } From 20f292bd91f1a701de3332212323d746dde49680 Mon Sep 17 00:00:00 2001 From: Yorrd Date: Tue, 9 May 2017 17:23:09 +0200 Subject: [PATCH 03/10] requested changes --- the-grid.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/the-grid.html b/the-grid.html index 71fd6b0..27e8b0b 100644 --- a/the-grid.html +++ b/the-grid.html @@ -102,7 +102,7 @@ */ colCount: { type: Number, - value: 10, + value: 0, reflectToAttribute: true, observer: 'computeStyles' }, @@ -113,7 +113,7 @@ */ rowCount: { type: Number, - value: 10, + value: 0, reflectToAttribute: true, observer: 'computeStyles' }, From cb335e2e07a27d39718e2c220cd24b65c9335dbd Mon Sep 17 00:00:00 2001 From: Yorrd Date: Tue, 9 May 2017 17:40:15 +0200 Subject: [PATCH 04/10] requested changes --- the-grid.html | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/the-grid.html b/the-grid.html index 27e8b0b..179e7e9 100644 --- a/the-grid.html +++ b/the-grid.html @@ -102,7 +102,7 @@ */ colCount: { type: Number, - value: 0, + value: 10, reflectToAttribute: true, observer: 'computeStyles' }, @@ -113,7 +113,7 @@ */ rowCount: { type: Number, - value: 0, + value: 10, reflectToAttribute: true, observer: 'computeStyles' }, @@ -270,9 +270,9 @@ } ensureSpace(child) { - let minHeight = parseInt(child.getAttribute("row")) + parseInt(child.getAttribute("height")); + let minHeight = +child.getAttribute("row") + +child.getAttribute("height"); if(+this.rowCount === 0 && this.rowCount < minHeight) this.rowCount = minHeight; - let minWidth = parseInt(child.getAttribute("col")) + parseInt(child.getAttribute("width")); + let minWidth = +child.getAttribute("col") + +child.getAttribute("width"); if(+this.colCount === 0 && this.colCount < minWidth) this.colCount = minWidth; } From 126599d7b78d98d7ca30d03a73bf6c844e587531 Mon Sep 17 00:00:00 2001 From: Yorrd Date: Fri, 19 May 2017 17:55:22 +0200 Subject: [PATCH 05/10] requested changes --- the-grid.html | 50 ++++++++++++++++++++++++++++++++++++++++---------- 1 file changed, 40 insertions(+), 10 deletions(-) diff --git a/the-grid.html b/the-grid.html index 179e7e9..30d5b53 100644 --- a/the-grid.html +++ b/the-grid.html @@ -149,6 +149,24 @@ value: false, reflectToAttribute: true, observer: '_attachEvents' + }, + + /** + * Internal property to control the current maxRow if rowCount is set to 0 + */ + _maxRow: { + type: Number, + value: 0, + observer: "computeStyles" + }, + + /** + * Internal property to control the current maxCol if colCount is set to 0 + */ + _maxCol: { + type: Number, + value: 0, + observer: "computeStyles" } } } @@ -221,8 +239,8 @@ let margin = this.cellMargin, height = this.cellHeight, width = this.cellWidth, - cols = this.colCount, - rows = this.rowCount; + cols = this._shouldColSelfResize() ? this._maxCol : this.colCount, + rows = this._shouldRowSelfResize() ? this._maxRow : this.rowCount; let styleRules = ''; let styleVars = { @@ -270,10 +288,22 @@ } ensureSpace(child) { - let minHeight = +child.getAttribute("row") + +child.getAttribute("height"); - if(+this.rowCount === 0 && this.rowCount < minHeight) this.rowCount = minHeight; - let minWidth = +child.getAttribute("col") + +child.getAttribute("width"); - if(+this.colCount === 0 && this.colCount < minWidth) this.colCount = minWidth; + if(this._shouldRowSelfResize()) { + let minHeight = +child.getAttribute("row") + +child.getAttribute("height"); + if(this._maxRow < minHeight) this._maxRow = minHeight; + } + if(this._shouldColSelfResize()) { + let minWidth = +child.getAttribute("col") + +child.getAttribute("width"); + if (this._maxCol < minWidth) this._maxCol = minWidth; + } + } + + _shouldRowSelfResize() { + return +this.rowCount === 0; + } + + _shouldColSelfResize() { + return +this.colCount === 0; } /** @@ -469,8 +499,8 @@ // Min = 0. // Max = grid size - player size. return { - col: Math.max(Math.min(position.col, +this.colCount === 0 ? Infinity : this.colCount - cols), 0), - row: Math.max(Math.min(position.row, +this.rowCount === 0 ? Infinity : this.rowCount - rows), 0) + col: Math.max(Math.min(position.col, this._shouldColSelfResize() ? Infinity : this.colCount - cols), 0), + row: Math.max(Math.min(position.row, this._shouldRowSelfResize() ? Infinity : this.rowCount - rows), 0) } } @@ -493,8 +523,8 @@ // Min = 1. // Max = grid size (or provided max) return { - width: Math.max(Math.min(size.width, +this.colCount === 0 ? Infinity : maxWidth), 1), - height: Math.max(Math.min(size.height, +this.rowCount === 0 ? Infinity : maxHeight), 1) + width: Math.max(Math.min(size.width, this._shouldColSelfResize() ? Infinity : maxWidth), 1), + height: Math.max(Math.min(size.height, this._shouldRowSelfResize() ? Infinity : maxHeight), 1) } } From 14193d04f2f237fa37d126ba499fde1225e4f7c6 Mon Sep 17 00:00:00 2001 From: Yorrd Date: Mon, 17 Jul 2017 22:51:50 +0200 Subject: [PATCH 06/10] fix loading issue and throw a dragging event --- the-grid.html | 23 +++++++++++++++++++++-- 1 file changed, 21 insertions(+), 2 deletions(-) diff --git a/the-grid.html b/the-grid.html index ea84cbe..885b555 100644 --- a/the-grid.html +++ b/the-grid.html @@ -216,7 +216,6 @@ super.connectedCallback(); this.addEventListener('dom-change', this._attachEvents); this._attachEvents(); - this.computeStyles(); } /** @@ -230,6 +229,7 @@ let addOrRemoveMoveListener = this.draggable ? 'addListener' : 'removeListener'; Array.prototype.forEach.call(this.children, child => { + this.ensureSpace(child); let isPlaceholder = child.hasAttribute('placeholder'); if (isPlaceholder) { this.placeholder = child; @@ -248,7 +248,7 @@ child.addEventListener('touchmove', this._safePreventDefault); } }); - + this.computeStyles(); } /** @@ -384,6 +384,25 @@ this.placeholder.setAttribute('col', position.col); this.ensureSpace(this.placeholder); } + + /** + * `dragging` event when resizer/gripper is being moved. + * + * @event TheGrid#dragging + * @type {object} + * @property {HTMLElement} grid - The grid in which the event occurred. + * @property {HTMLElement} tile - The tile that has been resized. + * @property {Event} sourceEvent - The original tracking event. + */ + player.dispatchEvent(new CustomEvent('dragging', { + bubbles: true, + composed: true, + detail: { + grid: this, + tile: player, + sourceEvent: e + } + })); } if (state == 'end') { From 99842c0ab499686724679aedcef8716baf639bb4 Mon Sep 17 00:00:00 2001 From: Yorrd Date: Mon, 17 Jul 2017 23:16:31 +0200 Subject: [PATCH 07/10] only emit if necessary --- the-grid.html | 55 +++++++++++++++++++++++++++------------------------ 1 file changed, 29 insertions(+), 26 deletions(-) diff --git a/the-grid.html b/the-grid.html index 885b555..2fd939f 100644 --- a/the-grid.html +++ b/the-grid.html @@ -378,31 +378,34 @@ player.style.left = `${newLeft}px`; player.style.top = `${newTop}px`; + if(position.col !== +this.placeholder.getAttribute("col") + || position.row !== +this.placeholder.getAttribute("row")) { + /** + * `dragging` event when resizer/gripper is being moved. + * + * @event TheGrid#dragging + * @type {object} + * @property {HTMLElement} grid - The grid in which the event occurred. + * @property {HTMLElement} tile - The tile that has been resized. + * @property {Event} sourceEvent - The original tracking event. + */ + player.dispatchEvent(new CustomEvent('dragging', { + bubbles: true, + composed: true, + detail: { + grid: this, + tile: player, + sourceEvent: e + } + })); + } + // Check for overlaps if enabled. if (this.overlappable || !this._isOverlapping(position.col, position.row, cols, rows, [player])) { this.placeholder.setAttribute('row', position.row); this.placeholder.setAttribute('col', position.col); this.ensureSpace(this.placeholder); } - - /** - * `dragging` event when resizer/gripper is being moved. - * - * @event TheGrid#dragging - * @type {object} - * @property {HTMLElement} grid - The grid in which the event occurred. - * @property {HTMLElement} tile - The tile that has been resized. - * @property {Event} sourceEvent - The original tracking event. - */ - player.dispatchEvent(new CustomEvent('dragging', { - bubbles: true, - composed: true, - detail: { - grid: this, - tile: player, - sourceEvent: e - } - })); } if (state == 'end') { @@ -603,13 +606,13 @@ } /** - * Checks if the given width or height as `value` is within grid constraints. - * @param {Number} value in grid unit. - * @param {Number} min in grid unit. - * @param {Number} max in grid unit. - * @return {Boolean} true when within constraints, otherwise false. - * @private - */ + * Checks if the given width or height as `value` is within grid constraints. + * @param {Number} value in grid unit. + * @param {Number} min in grid unit. + * @param {Number} max in grid unit. + * @return {Boolean} true when within constraints, otherwise false. + * @private + */ _isWithinConstraints(value, min = 1, max = Infinity) { return value >= min && value <= max; } From 4065ffc6a5dbb445394262fba6726fdb19c72c0a Mon Sep 17 00:00:00 2001 From: Yorrd Date: Tue, 18 Jul 2017 00:30:03 +0200 Subject: [PATCH 08/10] only emit if necessary --- the-grid.html | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/the-grid.html b/the-grid.html index 2fd939f..b629f21 100644 --- a/the-grid.html +++ b/the-grid.html @@ -395,7 +395,8 @@ detail: { grid: this, tile: player, - sourceEvent: e + col: position.col, + row: position.row } })); } From 951dd4a498976248c550e53e3a3701a989340b61 Mon Sep 17 00:00:00 2001 From: Yorrd Date: Tue, 18 Jul 2017 14:34:31 +0200 Subject: [PATCH 09/10] add dragging should also be fired on resize but with different type --- the-grid.html | 29 ++++++++++++++++++++++++++++- 1 file changed, 28 insertions(+), 1 deletion(-) diff --git a/the-grid.html b/the-grid.html index b629f21..99e4eeb 100644 --- a/the-grid.html +++ b/the-grid.html @@ -431,7 +431,8 @@ composed: true, detail: { grid: this, - tile: player + tile: player, + type: "move" } })); } @@ -507,6 +508,32 @@ isWidth && newWidth >= this.cellWidth && (player.style.width = `${newWidth}px`); isHeight && newHeight >= this.cellHeight && (player.style.height = `${newHeight}px`); + if(size.width !== +this.placeholder.getAttribute("width") + || position.height !== +this.placeholder.getAttribute("height")) { + /** + * `dragging` event when resizer/gripper is being moved. + * + * @event TheGrid#dragging + * @type {object} + * @property {HTMLElement} grid - The grid in which the event occurred. + * @property {HTMLElement} tile - The tile that has been resized. + * @property {Event} sourceEvent - The original tracking event. + */ + player.dispatchEvent(new CustomEvent('dragging', { + bubbles: true, + composed: true, + detail: { + grid: this, + tile: player, + type: "resize", + col: size.col, + row: size.row, + width: size.width, + height: size.height + } + })); + } + // Check for overlaps if enabled. if (this.overlappable || !this._isOverlapping(position.col, position.row, size.width, size.height, [player])) { let isWidthValid = this._isWithinConstraints(size.width, minWidth, maxWidth); From 9e391f532be19db777ccfd620ec7e493987a103d Mon Sep 17 00:00:00 2001 From: Yorrd Date: Tue, 18 Jul 2017 15:45:07 +0200 Subject: [PATCH 10/10] also pass the source event for mouse pointer data --- the-grid.html | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/the-grid.html b/the-grid.html index 99e4eeb..016ee46 100644 --- a/the-grid.html +++ b/the-grid.html @@ -396,7 +396,8 @@ grid: this, tile: player, col: position.col, - row: position.row + row: position.row, + sourceEvent: e } })); } @@ -529,7 +530,8 @@ col: size.col, row: size.row, width: size.width, - height: size.height + height: size.height, + sourceEvent: e } })); }