Issue #2656Opened March 16, 2020by abozhinov1 reactions

[BUG] Wrong position of toolbar when duplicate children component

Question

Hi, you can check this example: https://codepen.io/abozhinov/pen/XWbqjEJ

Steps to reproduce the problem:

  1. If components existing delete them all.
  2. Drag a new carousel block.
  3. Select the first children's container.
  4. Click on the DUPLICATE icon to create a new component.
  5. After that try to select the newest component and then select the first component again.
  6. The position of the toolbar is wrong because the browser can't get the width and height of the element.

[Error] TypeError: null is not an object (evaluating 'this.canvas.getHighlighter(t).style') showHighlighter (grapes.min.js:2:263826) updateToolsLocal (grapes.min.js:2:266937) (anonymous function) (grapes.min.js:2:260549) forEach onHovered (grapes.min.js:2:260438) m (grapes.min.js:2:22592) v (grapes.min.js:2:22263) h (grapes.min.js:2:20216) (anonymous function) (grapes.min.js:2:22156) set (grapes.min.js:2:24026) setHovered (grapes.min.js:11:128341) handleHover (grapes.min.js:2:351496) I (grapes.min.js:2:9008) (anonymous function) (grapes.min.js:2:9208) (anonymous function) (grapes.min.js:2:2321) t (grapes.min.js:2:80874)

When I trigger getView().reset() the new elements in the DOM don't exist and their width and height are 0. I want to reset the view and then to trigger JS which will build the carousel.

Answers (3)

abozhinovApril 7, 20201 reactions
Code SnippetTEXT
When overwrite these two methods in 'select-comp' command everything works perfectly. 
The problem was that "el" doesn't exist in the DOM. 


`
    

            onHovered(em, component) {
                let result = {};

                if (component) {
                    const { view } = component;
                    const { el } = view;
                    const pos = this.getElementPos(el);

                    result = { el, pos, component, view };

                    if (pos.width > 0) {
                        this.updateToolsLocal(result);

                        if (el.ownerDocument === this.currentDoc) {
                            this.elHovered = result;
                        }
                    }
                }
            },
            onSelect() {
                const { em } = this;
                const component = em.getSelected();

                if (component) {
                    const { view } = component;
                    const { el } = view;

                    if (el) {
                        const pos = this.getElementPos(el);
                        const result = { el, pos, component, view };

                        if (pos.width > 0) {
                            this.elSelected = result;
                            this.updateToolsGlobal();
                            // This will hide some elements from the select component
                            this.updateToolsLocal(result);
                        }
                    }
                } else {
                    this.toggleToolsEl();
                    this.lastSelected = 0;
                }
            }
abozhinovMarch 16, 20200 reactions

The same result you can get when trigger render instead of reset.

abozhinovMarch 16, 20200 reactions

@artf if you try on the demo is the same. Just drag the carousel and click on the slide. <img width="1440" alt="Screenshot 2020-03-16 at 14 58 23" src="https://user-images.githubusercontent.com/1404839/76760669-b8b75780-6796-11ea-8e24-8946e27949f9.png">

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.