Issue #1991💬 RespondidoAbierto el 29 de abril de 2019por afdallahReacciones 2

Redimensionable, usando unitWidth en salida px en porcentaje.

Respuesta rápidapor artf1

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

  1. Los separé como 2 componentes,
  • componente 'grid', solo como contenedor que luego configura la pantalla en 'flex',
  • componente 'column', que puse como redimensionable.
  1. 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)

//...
}
  1. 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)

artf1 de mayo de 2019

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

afdallah2 de mayo de 2019

Eres el hombre!! 👍 👍 Muchas gracias @artf.

artf1 de mayo de 2019

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.

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.