[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:
- If components existing delete them all.
- Drag a new carousel block.
- Select the first children's container.
- Click on the DUPLICATE icon to create a new component.
- After that try to select the newest component and then select the first component again.
- 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)
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;
}
}The same result you can get when trigger render instead of reset.
@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.
Issue #2824
Dragging items do not position on intital drag?
So when I drag a component/item from the bar to the center it will not go where I told it to go... IT always goes about 20% page width to o...
Issue #761
Text component problem
Hi. I wish a text component that do not create new components every time I press "Enter" key to create new paragraphs (this is a bad usabil...
Issue #2068
GrapesJs gradient plugin not working anymore
Hello GrapesJs team After updating the grapesjs version form 14.0.59 i noticed the gradient plugin stopped to work, i also checked the grad...
Issue #912
[BUG]: HTML attributes/traits not escaped
When double quotes are added to an attribute it breaks the HTML.https://jsfiddle.net/szLp8h4n/Drag in the link block.Click the link in the...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.