vue3 script hangs up at addWidget(node)

[the-marcules]

Subject

i'm trying to build a dashboard in a vue3 template on the base of the vue3js.html example. page loads w/o erros.
but as soon i invoke the addWidget method, the script hangs.

environment

• gridstack 3.3.0 using html5
• vue 3.0.0
• vue-router 4.0

tested on

• firefox 78.6.0esr
• MS Edge Version 88.0.705.74

code

<template>
<h1>Dashboard</h1>
   <button @click="addNewWidget">add Widget</button>
         <div class="grid-stack"></div>
</template>

<script>
const api = require("../js/api-connector");

import { GridStack } from 'gridstack'; // $ optional if you depend on it, to be removed in 3.x
import 'gridstack/dist/gridstack.css';

// THEN to get HTML5 drag&drop
import 'gridstack/dist/h5/gridstack-dd-native';


        export default {
                name: "Dashboard",
                data () {
                        return {
                                //grid
                                grid: undefined,
                                count: 0,
                                info: ""
                        }
                },
                items: [
                            { x: 2, y: 1, h: 2 },
                            { x: 2, y: 4, w: 3},
                            { x: 4, y: 2},
                            { x: 3, y: 1, h: 2 },
                            { x: 0, y: 6, w: 2, h: 2 }
                ],
                watch: {
                        /**
                         * Clear the info text after a two second timeout. Clears previous timeout first.
                         */
                        info: function (newVal, oldVal) {
                        if (newVal.length === 0) return;

                        window.clearTimeout(this.timerId);
                                this.timerId = window.setTimeout(() => {
                                this.info = "";
                                }, 2000);
                        }
                }, 
                mounted() {
                                this.grid = GridStack.init({ float: true, cellHeight: '70px', minRow: 1 });
                                this.grid.on("dragstop", (event, element) => {
                                const node = element.gridstackNode;
                                this.info = `you just dragged node #${node.id} to ${node.x},${node.y} – good job!`;
                                });  
                },
                methods: {
                        addNewWidget() {
                                const node = this.$options.items[this.count] || {
                                        x: Math.round(12 * Math.random()),
                                        y: Math.round(5 * Math.random()),
                                        w: Math.round(1 + 3 * Math.random()),
                                        h: Math.round(1 + 3 * Math.random()),
                                };
                                node.id = node.content = String(this.count++);
                                this.grid.addWidget(node);
                        }

                }
        }
</script>

what happens:

the script hangs up. firefox issues that the scripts slows down the browser and gives the choice of either stop the script or wait for it to finish. if you stop it the following appears in the console:

Script terminated by timeout at:
get@webpack-internal:///./node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js:257:48
_fixCollisions/hasLocked<@webpack-internal:///./node_modules/gridstack/dist/gridstack-engine.js:50:54
_fixCollisions@webpack-internal:///./node_modules/gridstack/dist/gridstack-engine.js:50:44
moveNode@webpack-internal:///./node_modules/gridstack/dist/gridstack-engine.js:474:14
_fixCollisions@webpack-internal:///./node_modules/gridstack/dist/gridstack-engine.js:64:30
addNode@webpack-internal:///./node_modules/gridstack/dist/gridstack-engine.js:315:14
_prepareElement@webpack-internal:///./node_modules/gridstack/dist/gridstack.js:1098:28
addWidget@webpack-internal:///./node_modules/gridstack/dist/gridstack.js:335:14
addNewWidget@webpack-internal:///./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader-v16/dist/index.js?!./src/views/Dashboard.vue?vue&type=script&lang=js:190:17
render</_cache[2]@webpack-internal:///./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader-v16/dist/templateLoader.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader-v16/dist/index.js?!./src/views/Dashboard.vue?vue&type=template&id=22ba47ca&scoped=true:54:61
callWithErrorHandling@webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:275:22
callWithAsyncErrorHandling@webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:284:42
invoker@webpack-internal:///./node_modules/@vue/runtime-dom/dist/runtime-dom.esm-bundler.js:512:97

Since there is no error until i try to add a new widget i assume that gridstack is imported correctly into the template. Any hints or suggestions to fix that?
best regards
m

[adumesny]

looks like an infinite loop. are you saying that the grid (which is empty) loads fine but on the first addWidget() which has nothing to conflict with you get that inf loop stack above ?

I have seen inf loop in the current code (not published) during collision which I have fixed, but wasn't aware of the issue in 3.3

https://gridstackjs.com/demo/vue3js.html is fine, so you must be doing something different.

[the-marcules]

looks like an infinite loop. are you saying that the grid (which is empty) loads fine but on the first addWidget() which has nothing to conflict with you get that inf loop stack above ?

yes, i think so.
I tried something different. I swapped the addNewWidget method with the one below.
what happens is that the new div element gets added as expected, but as soon the code reaches the makeWidget function call
it seems to be hanging in a loop.

addNewWidget() {
     let ne = document.createElement("div")
     ne.setAttribute("id", "gsi-1")
     ne.setAttribute("gs-x","0")
     ne.setAttribute("gs-y",0)
     ne.setAttribute("gs-w","3")
     ne.setAttribute("gs-h", "2")
     ne.setAttribute("gs-auto-postition","true")

      
     this.grid.el.appendChild(ne)
     this.grid.makeWidget('#gsi-1');
}

And this is what the grid object looks like:

grid 
Proxy {_gsEventHandler: {…}, el: section#grid-stack.grid-stack.grid-stack-instance-110.grid-stack-animate.ui-droppable, opts: {…}, _isAutoCellHeight: false, engine: GridStackEngine, …}
[[Handler]]: Object
deleteProperty: ƒ deleteProperty(target, key)
get: ƒ (target, key, receiver)
has: ƒ has(target, key)
ownKeys: ƒ ownKeys(target)
set: ƒ (target, key, value, receiver)
__proto__: Object
[[Target]]: GridStack
el: section#grid-stack.grid-stack.grid-stack-instance-110.grid-stack-animate.ui-droppable
engine: GridStackEngine {addedNodes: Array(0), removedNodes: Array(0), column: 12, getGridHeight: ƒ, onChange: ƒ, …}
opts: {float: true, cellHeight: 70, minRow: 1, column: 12, maxRow: 0, …}
_gsEventHandler: {dragstop: ƒ}
_isAutoCellHeight: false
_styles: CSSStyleSheet {_id: "gridstack-style-19555", _max: 0, ownerRule: null, cssRules: CSSRuleList, rules: CSSRuleList, …}
_windowResizeBind: ƒ ()
placeholder: (...)
__proto__: Object
[[IsRevoked]]: false

https://gridstackjs.com/demo/vue3js.html is fine, so you must be doing something different.

well, i'm usign vue-router and this dashboard is inside a .vue file. as i'm not that familiar with vue i don't know how that might have an impact on the rendering, perhaps here is the problem and i need to to something different?

[adumesny]

can you post a running example to show the issue - can't debug without it.

you can check for empty grid by checking grid.engine.nodes to e empty list of nodes, then call addWidget() should NOT fail as that has nothing to collide with, but you need to post the params of that call to see what/how you are adding.

[the-marcules]

Found the issue:
I don't know why, but I thought I had to tell vue that in the data() section there is a variable grid which initially is set to undefined. this grid variable eventually becomes a grid object after mounted() is called: this.grid = GridStack.init({ float: true, cellHeight: '70px', minRow: 1 });
But this actually does not work (even if the variable looks like an grid object for my understanding after mounted() finished). I cannot figure out why. Sorry for any confusion I may have caused.

bad code

export default {
                name: "Dashboard",
                data () {
                        return {
                                //grid
                                grid: undefined, // <-- don't do that.
                                count: 0,
                                info: ""
                        }
                },

when usign that code it works perfectly:
working code

  export default {
                name: "Dashboard",
                data () {
                        return {
                                //grid
                                count: 0,
                                info: ""
                        }
                },

[adumesny]

np, may help the next react guy... might want to add a comment in the demo code for others. thanks.