Dos dispositivos con el mismo ancho
Mira esta demo: https://jsfiddle.net/9w2g8su5/1/ Tengo 4 dispositivos. General y Desktop tienen el mismo ancho. Si cambio de General a Escritorio (o viceversa), no puedo seleccionar ni editar ningún componente del lienzo hasta seleccionar otro dispositivo con diferente ancho
Lee la respuesta completa abajo ↓Pregunta
Hola a todos, Tenemos un escenario en el que necesitamos tener dos dispositivos con el mismo ancho. Casi todo funciona bien, pero cuando intentamos cambiar entre estos dispositivos (mismo ancho), los elementos de la vista previa no responden hasta que cambiamos otro dispositivo con diferente tamaño.
¿Alguna idea?
¡Gracias!
Respuestas (3)
Mira esta demo: https://jsfiddle.net/9w2g8su5/1/ Tengo 4 dispositivos. General y Desktop tienen el mismo ancho. Si cambio de General a Escritorio (o viceversa), no puedo seleccionar ni editar ningún componente del lienzo hasta seleccionar otro dispositivo con diferente ancho
Hola a todos,
He investigado un poco sobre esto, creo que el problema empieza dentro de 'FrameView.updateDim()' cuando se llama a 'em.stopDefault()', que detiene 'select-comp' (el comando por defecto) hasta que se completa la transición de redimensionamiento. Como las dimensiones no han cambiado, no hay transición de redimensionamiento, 'FrameView.updateOffset()' nunca se ejecuta, por lo que el comando 'select-comp' nunca se vuelve a iniciar. En código, esto se ejecuta, luego esto se ejecuta, y esto se espera que se ejecute después de que termina la transición, pero nunca lo hace. No sé cuál es la solución, pero aquí tienes un jsfiddle que replica el problema tras 2 segundos (mira el setTimeout al final) sin alterar los dispositivos en absoluto.
¿Es necesario llamar 'em.stopDefault()' dentro de 'FrameView.updateDim()'? Supongo que hay una buena razón para ello, pero no estoy seguro de cuál es.
@kevinalvarez - aquí tienes una solución improvisada si necesitas encontrar una solución funcional ahora mismo: jsfiddle
¿Es necesario llamar a em.stopDefault() dentro de FrameView.updateDim()? Supongo que hay una buena razón para ello, pero no estoy seguro de cuál es.
Está ahí para evitar que la caja de resaltado fija aparezca cuando pasas el cursor por componentes durante la animación 😬
Pondré una corrección que comprobará el cambio de dimensión, de lo contrario se activará inmediatamente el 'udpateOffset'
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #681
La barra de herramientas se muestra de nuevo al desplazarse aunque esté oculta en Firefox
Hola, Tenemos que ocultar la barra de herramientas usando las propiedades gjs-data-*. Está oculto con éxito. Pero en Firefox, cuando bajas...
Issue #1092
[BUG] rasgos y disparador de almacenamiento
Oye, quizá no sea un bicho, no estoy seguro. Tengo rasgos con changeProp: campo verdadero. Cuando cambio el valor del rasgo por interfaz, e...
Issue #373
La entrada de color no actualiza el elemento en la página
Cuando uso el selector de color, todo funciona bien. Sin embargo, si añades un valor hex a la entrada y pulsas Enter, la vista previa de co...
Issue #1506
Problema con la consulta de medios en CSS
Hola @artf Hay un problema en la página de demostración y en la biblioteca en media query. El problema es que si el usuario actualiza el es...
Plugins de pago que cumplen con este problema
Seleccionado por temas clave y relevancia de etiquetas para ayudarte a enviar más rápido.
Cargando recomendaciones de plugins de pago...
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 →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.
Tutorial
Ship to Production Faster: What’s New in GrapesJS Shadcn
Supercharge your page builder! GrapesJS Shadcn adds live drag previews, rich text / commands, dynamic data, and canvas presets to ship to prod faster.
Tutorial
How to Build a Production GrapesJS Editor: The Complete Walkthrough of Brief, Preset, Plugins, and Services
A complete walkthrough of building a production GrapesJS editor: how to choose a preset, pick plugins, and scope setup services without burning a sprint.
Tutorial
GrapesJS Inline RTE Plugins Update: CKEditor 5 v0.1.4 and Froala Inline Text Editor
CKEditor 5 Inline for GrapesJS v0.1.4 fixes Studio SDK toolbar clipping, iframe injection and link balloon bugs. Compare with Froala Inline — both $69.
Explorar categorías de plugins
Ve directamente a las páginas de categorías de plugins en el marketplace.