Flex Property no funciona en el gestor de estilo

Diagnosticé el problema tras encontrar el mismo problema por mi cuenta.

Mirando 'StyleManager.select()'

https://github.com/artf/grapesjs/blob/75cd582a8d1a91096276bc4dccc7475a269ad45c/src/style_manager/index.js#L339-L395

En la línea 369, cada propiedad se recorre para comprobar su visibilidad para el nuevo objetivo.

Sin embargo, la función '__checkVisibility' no accede al valor actual mirando los estilos del objetivo. En su lugar, busca el valor actual almacenado en el modelo de propiedad. (fuente)

El problema es que se llama '__checkVisibility' antes de que el modelo de propiedad no haya sido informado de que se ha seleccionado un nuevo objetivo, ya que eso no ocurre hasta la línea 392. Así que el valor que se está comprobando no proviene del objetivo que acabamos de seleccionar.

@Vac1911 @artf Lo entiendo, pero ¿cuál es la solución, cómo puedo solucionar este problema? ¿Es este problema de Grapejs o mío?

@saudAtIrisdame Parece que es un problema de Grapejs. Lo arreglé yo mismo cambiando el código fuente, reordenando el método 'select' para comprobar la visibilidad al final.

Aquí está el archivo dist después de ejecutar 'build:js' https://gist.github.com/Vac1911/4c89f2a48809bee5fefd2d21525d37ad

'''js select(target, opts = {}) { const { em } = esto; const trgs = isArray(objetivo) ? objetivo: [objetivo]; const { stylable } = opts; const cssc = em.get("CssComposer"); Sea los objetivos = [];

trgs.filter(Boolean).forEach((target) => { Sea modelo = objetivo;

if (isString(target)) { regla const = cssc.getRule(target) || cssc.setRule(objetivo); !isUndefined(stylable) && rule.set({ stylable }); modelo = regla; }

targets.push (modelo); });

componente const = opts.component || targets.filter((t) => isComponent(t)).reverse()[0]; targets = targets.map((t) => this.getModelToStyle(t)); estado const = em.getState(); const lastTarget = targets.slice().reverse()[0]; const lastTargetParents = this.getParentRules(lastTarget, { estado, componente, }); sea stateTarget = this.__getStateTarget();

Gestiona la creación y actualización de la regla de estado, si está habilitada. em.skip(() => { si (state & lastTarget?. ¿getState?. ()) { const style = lastTarget.getStyle(); if (!stateTarget) { stateTarget = cssc .getAll() .add({ selectors: "gjs-selected", style, important: true }); } else { stateTarget.setStyle(estilo); } } else if (stateTarget) { cssc.remove(stateTarget); stateTarget = null; } });

this.model.set({ targets, lastTarget, lastTargetParents, stateTarget }); this.__upProps(opta);

Actualizar visibilidad de sectores/propiedades sectors.forEach((sector) => { const props = sector.getProperties(); props.forEach((prop) => { const isVisible = prop.__checkVisibility({ objetivo: lastTarget, componente, sectores, }); prop.set ("visible", isVisible); }); const sectorVisible = props.some((p) => p.isVisible()); sector.set ("visible", sectorVisible); });

devolver objetivos; },

Gracias por informar de esto, @saudAtIrisdame.

Buena pregunta sobre Flex Property que no trabaja en el estilo de gestor. El enfoque recomendado con StyleManager es usar la API orientada a eventos.

Empieza aquí:

1. Consulta la documentación de GrapesJS de tu módulo específico
2. Busca el método del oyente de eventos 'on()'
3. La mayoría de las operaciones se pueden realizar escuchando eventos del editor y de los componentes

Patrones comunes: '''javascript Prestad atención a los cambios editor.on('Change', () => console.log('Something Changed'));

Ciclo de vida de los componentes editor.on('component:mount', (c) => console.log('component ready', c)); editor.on('component:update', (c) => console.log('component updated', c));

**Si sigues atascado:**
- Compartir una reproducción mínima de CodeSandbox
- Incluye lo que ya has probado
- Menciona tu versión GrapesJS
- ¡La comunidad está aquí para ayudar!