Redimensionable, usando unitWidth en salida px en porcentaje.
Ah, espera, culpa mía, 'opts' es el tercero 'updateWidth(model, value, opts = {}) {' por cierto, el segundo argumento en setStyle son las opciones (por ejemplo, '{ silent: true }' para evitar activar los oyentes de cambio) y esas opciones también aparecen en la callback de tus oyentes, así que simplemente coloqué una...
Lee la respuesta completa abajo ↓Pregunta
Hola @artf,
Gracias por crear este marco. Recientemente hice un componente personalizado basado en tu plugin flexbox.
! demo La flecha roja es el valor real del modelo. La flecha verde es lo que esperaba que fuera.
¿Es posible poner 'unitWidth' como 'px' pero la salida en 'percentual'? Esto es lo que he probado
- Los separé como 2 componentes,
- componente 'grid', solo como contenedor que luego configura la pantalla en 'flex',
- componente 'column', que puse como redimensionable.
- conjunto redimensionable '''javascript clauclauAncho de constancia = 'ancho' paso const = 1 const minDim = 1 const unitWidth = 'px'
const resizerRight = { ... resizerBtm, Resumen: 0, TC: 0, TR: 0, CL: 0, CR: 1, BL: 0, BC: 0, br: 0, keyWidth, actualUnidad, minDim, Paso Ancho de unidad }
3. Hace que la 'columna' escuche el evento de redimensionamiento. (No estoy seguro de si esto era correcto, quizá tenga que hacer una nueva publicación diferente para esta pregunta)
'''javascript
init () {
this.listenTo(this, 'change:style', this.updateWidth)
//...
}
- Quiero actualizar el ancho del modelo de píxel a porcentaje usando matemáticas simples. '''javascript updateWidth(model) { //... model.setStyle({ width: parseFloat(selectedWidth, 10) / containerWidth * 100 + '%' }) //... }
Sé que el código anterior crearía un redimensionamiento infinito.
Así que estoy buscando otra solución que me lleve al [código fuente redimensionable](https://github.com/artf/grapesjs/blob/dev/src/utils/Resizer.js#L6-L14).
Me pregunto si podría aprovechar los métodos que aparecen allí
'''javascript
var defaultOpts = {
// ...
mousePosFetcher: null,
Indica una estrategia personalizada de actualización de objetivos
updateTarget: null,
Función que recibe HTMLElement como arg y le devuelve la posición relativa
ratioDefault: 0,
posFetcher: null,
onStart: null,
onMove: null,
onEnd: null,
// ...
}
Aquí está la demo enlace y el código
Perdón por este post tan largo, solo quiero que entiendas mi caso más fácilmente.
Respuestas (3)
Ah, espera, culpa mía, 'opts' es el tercero 'updateWidth(model, value, opts = {}) {' por cierto, el segundo argumento en setStyle son las opciones (por ejemplo, '{ silent: true }' para evitar activar los oyentes de cambio) y esas opciones también aparecen en la callback de tus oyentes, así que simplemente coloqué una clave personalizada 'fromPxToPerc' para saber cuándo se activa el cambio desde tu lógica personalizada
Eres el hombre!! 👍 👍 Muchas gracias @artf.
Hola @afdallah, desde el punto de vista del redimensionador tendrías que usar la opción 'updateTarget' para personalizar el objetivo, pero desafortunadamente no puedes porque ya está muy usada por el SelectCommand Así que te pediría que intentes usar esto en tu función updateWidth para evitar el bucle infinito: '''js updateWidth(model, opts = {}) { si (opts.fromPxToPerc) return; //... model.setStyle({ width: parseFloat(selectedWidth, 10) / containerWidth * 100 + '%' }, { fromPxToPerc: 1 }) //... }
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #1690
Faltan iconos de flexbox en la distribución, pero se muestran en la página de demostración de grapesjs.com.
Hola, Parece que faltan los iconos / imágenes de las propiedades de flexbox (fila, columna, etc.). Estos iconos están presentes en la págin...
Issue #1735
Fabricante de componentes Vuejs
Hola, estaría bien tener un constructor de componentes de Vue como mjml... Este proyecto iniciado por el usuario: https://github.com/Patric...
Issue #1679
Cómo renderizar un componente en el lienzo usando un rasgo.
Hola Artf, gracias por tu gran herramienta, he creado un caso de prueba para mi problema https://js.do/code/271771 He creado una barra late...
Issue #643
¿Cómo ocultar el bloqueo de vídeo?
Hola, Estoy usando extensiones Basic Extensions en Grapesjs. Quiero ocultar "Video Block" en estas extensiones. ¿Cómo puedo hacerlo? Gracia...
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.
Explorar categorías de plugins
Ve directamente a las páginas de categorías de plugins en el marketplace.