vpusher / the-grid

Grid layout custom element with drag and drop capabilities
https://www.webcomponents.org/element/vpusher/the-grid
MIT License
129 stars 32 forks source link

dynamic growing only works when adjusting attributes once #17

Open yorrd opened 7 years ago

yorrd commented 7 years ago

Hey, there's a bug currently which involves dynamically expanding the grid. The col-count and row-count is by default set to 10 each. When you insert tiles which have boundaries exceeding this 10x10, they will only show once you update their position or scale because the xxx-count isn't updated by ensureSpace on first load.

Here's an adjusted _attachEvents which fixes this, only calling computeStyles() once.


                let moveHandler = this._handleMoveFn = this._handleMoveFn || this._handleMove.bind(this);
                let resizeHandler = this._handleResizeFn = this._handleResizeFn || this._handleResize.bind(this);
                let addOrRemoveResizeListener = this.resizable ? 'addListener' : 'removeListener';
                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;
                    } else {
                        let resizers = child.querySelectorAll('[resize]') || [];

                        Array.prototype.forEach.call(resizers, resizer => {
                            Polymer.Gestures[addOrRemoveResizeListener](resizer, 'track', resizeHandler);
                        });

                        Polymer.Gestures[addOrRemoveMoveListener](child, 'track', moveHandler);

                        // We need this dirty prevent default since 'track' gestures
                        // - let pass some events before triggering the 'start' state.
                        // - does not allow access to the real source event on touch devices.
                        child.addEventListener('touchmove', this._safePreventDefault);
                    }
                });
                this.computeStyles();

Thanks a lot for your time.