recursive the-grid event cancelling

[yorrd]

With the following code, I create THIS-ELEMENTs which are nested inside each other (I want grids within grids, yes).

        <slot></slot>
        {{myself.title}}, show children: {{showChildren}}
        <div hidden$="{{!showChildren}}">
            <the-grid id="grid" draggable resizable animated col-count$="{{maxCol(children)}}" row-count$="{{maxRow(children)}}" cell-margin="0" cell-height="200" cell-width="200">
                <template is="dom-repeat" items="{{children}}" as="box">
                    <THIS-ELEMENT box-id$="{{box._id}}" show-children$="{{_showChildren(box.width, box.height)}}" class="tile" col$="{{box.col}}" row$="{{box.row}}" height$="{{box.height}}" width$="{{box.width}}" style$="background-color: #{{box.color}}; opacity:0.5">
                        <span resize="bottom-right"><iron-icon icon="maps:zoom-out-map"></iron-icon></span>
                    </THIS-ELEMENT>
                </template>
                <div placeholder class="pulse"></div>
            </the-grid>
        </div>

in the database (mongo), I have the following items:

        {_id: "0", col: 0, row: 0, height: 6, width: 6, title: "root", color: "000", children: ["1", "2", "3"]},
        {_id: "1", col: 0, row: 0, height: 1, width: 4, title: "asdf1", color: 333, children: ["2", "4", "5"]},
        {_id: "2", col: 0, row: 0, height: 3, width: 1, title: "asdf2", color: 303, children: []},
        {_id: "3", col: 4, row: 3, height: 1, width: 1, title: "asdf3", color: 393, children: []},
        {_id: "4", col: 0, row: 0, height: 2, width: 2, title: "asdf4", color: 363, children: []},
        {_id: "5", col: 1, row: 0, height: 2, width: 2, title: "asdf5", color: 323, children: []}

which are resolved so that each THIS-ELEMENT-component only shows its children within itself. Those children can in turn show their children until the children list is empty. In the main layout, I just call THIS-ELEMENT once with the root element with ID zero.

Now, when I drag a child element within a few layers of parent grids, the child element is moved and at the same time, the parents are moved. Each layer down, the children thus move twice as quickly because they are moved with their parent and also moved for themselves. If I just grab the parent, everything works as expected.

Suggestion: we could just cancel the event (e.preventDefault()) once it has been handled once - maybe let this behavior be controlled by an attribute.

[yorrd]

@vpusher would you want me to write a pull request for this?

[vpusher]

@yorrd I don't know If I really want grids in grids, this might lead to something overly complex handling events and styles, and unmaintainable. You can give it a try but be sure I will be uncompromising at your code :). So don't feel disappointed if it finally doesn't come out.

[yorrd]

@vpusher well, it works alright so far, except the issue where the parent is moved along the child. I'll give it a shot over the weekend and you be sure to take a hard look before you accept it ;)

Thanks for your work!

[yorrd]

@vpusher oookay. in _handleMove, insert e.stopPropagation()

done.

I don't see a reason why we should allow propagating further and stopping propagation solves the entire problem.

I would write a pull request but I have a feeling it's quicker if you just insert the line ;D

[yorrd]

https://github.com/vpusher/the-grid/pull/11 I know, wrong pull request, but I've added the line in there as well if you feel like just accepting both ;)

[vpusher]

See v1.1.0