Issue #2656💬 RespondidoAbierto el 16 de marzo de 2020por abozhinovReacciones 1

Posición incorrecta de la barra de herramientas al duplicar un componente hijo

Respuesta rápidapor abozhinov1

Cuando sobrescribes estos dos métodos en el comando 'select-comp', todo funciona perfectamente. El problema era que "el" no existe en el DOM. ` onHovered(em, component) { Sea el resultado = {}; si (componente) { const { view } = component; const { el } = vista; const pos = this.getElementPos(el); Resultado = { el, pos...

Lee la respuesta completa abajo ↓

Pregunta

Hola, Puedes consultar este ejemplo: https://codepen.io/abozhinov/pen/XWbqjEJ

Pasos para reproducir el problema:

  1. Si existen componentes, elimínalos todos.
  2. Arrastra un nuevo bloque de carrusel.
  3. Selecciona el primer recipiente para niños.
  4. Haz clic en el icono DUPLICADO para crear un nuevo componente.
  5. Después de eso, intenta seleccionar el componente más reciente y luego vuelve a seleccionar el primero.
  6. La posición de la barra de herramientas es incorrecta porque el navegador no puede obtener el ancho y la altura del elemento.

[Error] TypeError: null no es un objeto (evaluando 'this.canvas.getHighlighter(t).style') showHighlighter (grapes.min.js:2:263826) updateToolsLocal (grapes.min.js:2:266937) (función anónima) (grapes.min.js:2:260549) forEach onHover (grapes.min.js:2:260438) m (grapes.min.js:2:22592) V (grapes.min.js:2:22263) h (grapes.min.js:2:20216) (función anónima) (grapes.min.js:2:22156) Set (grapes.min.js:2:24026) setHover (grapes.min.js:11:128341) handleHover (grapes.min.js:2:351496) I (grapes.min.js:2:9008) (función anónima) (grapes.min.js:2:9208) (función anónima) (grapes.min.js:2:2321) t (grapes.min.js:2:80874)

Cuando activo getView().reset(), los nuevos elementos en el DOM no existen y su ancho y altura son 0. Quiero reiniciar la vista y luego activar JS, que construirá el carrusel.

Respuestas (3)

abozhinov7 de abril de 2020
Fragmento de códigoTEXT
Cuando sobrescribes estos dos métodos en el comando 'select-comp', todo funciona perfectamente. 
El problema era que "el" no existe en el DOM. 

`
    
onHovered(em, component) {
                Sea el resultado = {};

si (componente) {
                    const { view } = component;
                    const { el } = vista;
                    const pos = this.getElementPos(el);

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

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

if (el.ownerDocument === this.currentDoc) {
                            this.elHovered = resultado;
                        }
                    }
                }
            },
            onSelect() {
                const { em } = esto;
                componente const = em.getSelected();

si (componente) {
                    const { view } = component;
                    const { el } = vista;

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

si (pos.width > 0) {
                            this.elSelected = resultado;
                            this.updateToolsGlobal();
                            Esto ocultará algunos elementos del componente select
                            this.updateToolsLocal(result);
                        }
                    }
                } else {
                    this.toggleToolsEl();
                    this.lastSelected = 0;
                }
            }
abozhinov16 de marzo de 2020

El mismo resultado que puedes obtener cuando el trigger renderiza en vez de reiniciar.

abozhinov16 de marzo de 2020

@artf si lo pruebas en la demo es igual. Solo tienes que arrastrar el carrusel y hacer clic en la diapositiva. <img width="1440" alt="Captura de pantalla 2020-03-16 at 14 58 23" src="https://user-images.githubusercontent.com/1404839/76760669-b8b75780-6796-11ea-8e24-8946e27949f9.png">

Preguntas y respuestas relacionadas

Continúa investigando con debates sobre temas similares.

Plugins de pago que cumplen con este problema

Seleccionado por temas clave y relevancia de etiquetas para ayudarte a enviar más rápido.

Ver todos los plugins

Cargando recomendaciones de plugins de pago...

Opción gratuita

Consulta los plugins de código abierto de GrapesJS en GitHub O haz una búsqueda rápida en nuestro catálogo gratuito.

Explora plugins gratuitos →
Opción premium

Los plugins premium incluyen soporte, actualizaciones regulares y funciones listas para producción — ahorrando días de trabajo de integración.

Explora plugins premium →

Tutoriales relacionados

Guías detalladas sobre el mismo tema.

Todos los tutoriales →

Explorar categorías de plugins

Ve directamente a las páginas de categorías de plugins en el marketplace.