Modo Absoluto/Diseñador

Hola a todos, este número es una visión general de lo que es, lo que se ha hecho, qué hacer y lo que es agradable tener para completar la función Modo Diseñador.

Prefacio

Así que empecemos describiendo qué es y cuál es el objetivo de esta función. El modo Diseñador debería permitir al usuario arrastrar componentes libremente por el lienzo, sin restricciones de posicionamiento fijas en HTML, más parecido a herramientas como Photoshop o Boceto. De este modo, mover componentes es mucho más intuitivo, especialmente para quienes no tienen nada que ver con el posicionamiento en HTML.

! modo diseñador

Este enfoque puede ser extremadamente útil si estás creando documentos cuyo resultado final es visualmente estático, como, por ejemplo, PDFs o diapositivas de presentaciones. Así que lo que intento decir es que el posicionamiento absoluto no es fácil de manejar cuando tienes que trabajar con algo como sitios web, principalmente porque es un poco engorroso trabajar con plantillas responsivas. Un componente en posición absoluta, desde un punto de vista menos técnico, queda fuera del "flujo fijo HTML", de modo que ni sus hermanos ni los nodos padres pueden ver sus dimensiones.

Veamos a continuación un ejemplo de posicionamiento absoluto aplicado a una página HTML simple

! plantilla absoluta-html

Así que en este ejemplo, puedes ver claramente cómo se eliminan los componentes del flujo (puedes notarlo mirando su nodo padre) y lo extraño que se comportan al cambiar el ancho del lienzo, donde todos los demás componentes se adaptan al nuevo ancho pero el que está en absoluto permanece quieto. El ejemplo muestra solo unos pocos componentes en modo absoluto, imagina que se trata de una página entera.

Así que para el diseño de páginas web, pensé en una solución alternativa, en lugar de depender de 'posición: absoluta' parece mucho más fiable 'transformar: transición(...)' ya que mueve el componente relacionado con su posición fija original sin sacarlo del flujo.

! traducir-html-plantilla

Obviamente, no es perfecto y cada plantilla requeriría ajustes específicos para diferentes tamaños de dispositivo, pero al menos el componente no se ha movido totalmente de su posición original.

Así que, el objetivo de esta función sería:

• Ser capaz de crear un proyecto completo en modo absoluto, desde el inicio (inicialización) hasta el final (exportación de código)
• Poder mezclar diferentes modos de arrastre (por defecto, absoluto y traslado) Obviamente, esto no es algo que puedas activar solo con "una opción". La mezcla de modos de arrastre debería delegarse a quién implementa el editor

Implementación

Desde el https://github.com/artf/grapesjs/releases/tag/v0.14.57 ya puedes cambiar la opción de modo de arrastre, globalmente o por componente.

Para iniciar el editor, globalmente, en uno de los modos de arrastre deberías cambiar la opción del modelo del editor. Aún no hemos especificado ninguna API estable, así que cualquier sugerencia es bienvenida, pero para la inicialización, lo más probable es que la opción sea algo así:

'''js const editor = grapesjs.init({ // ... dragMode: 'absoluto', // 'absoluto' | 'traducir' }); // ... o cambiar mediante API editor.setDragMode('absolute');

Por ahora puedes habilitarlo de esta manera:

'''js
editor.getModel().set('dmode', 'absoluto');

No es tan diferente cambiar el modo de arrastre en un solo componente, simplemente añadimos una nueva propiedad a la instancia de Componente: 'component.set('dmode', 'absoluto'); Por ejemplo, podrías añadir un nuevo icono de barra de herramientas para cambiar entre diferentes modos

Aquí un ejemplo de un modo de arrastre global 'absoluto'

https://jsfiddle.net/9zf4kd6e/

Puedes notar que el editor añade automáticamente posicionamiento absoluto a los componentes.

Veamos con más detalle cómo se implementa. Cuando haces clic en el icono de mover, activas el comando por defecto 'tlb-move', donde [decide https://github.com/artf/grapesjs/blob/4c993c04f8e4fc824e5d1d1d4d8af53ac40fa630/src/commands/index.js#L144-L162 si mover el componente de la forma estándar o delegar la operación de arrastre solicitada a otro, nuevo, 'core:component-drag' mando. El nuevo comando utiliza la utilidad Arrastrador y actualiza la posición del componente cuando el arrastrador lo indica. Este comando también crea guías para el Arrastrador, que puede acoplarse a ellos (una especie de Guías Inteligentes).

Problemas/Bugs

Eliminando desde el bloque [Corregido en v0.15.3]

Actualmente, la caída de bloques no se gestiona, por lo que todos los componentes que caen se colocan de forma fija.

! issue que cae de bloques

No sé si hay que fiarnos del marcador verde (por cierto, no parece tan malo) o simplemente descartarlo según la posición del ratón

Desplazamiento automático [Corregido en v0.15.3]

El desplazamiento automático al arrastrar componentes no funciona

! problema-autoscroll

De hecho, está desactivado por esta regla CSS, de lo contrario el resultado es aún peor

! problema-autoscroll-malo

Necesitamos colocar un oyente 'scroll' al inicio del dragger (y quitarlo al final) y actualizar la posición del componente en el gatillo.

Posicionamiento de la barra de herramientas [Corregido en v0.14.62]

Cuando el componente se coloca fuera del lienzo (en el lado izquierdo), su barra de herramientas está mal posicionada

! problema-barra-pos

Definitivamente hay algo que arreglar en el comando 'SelectComponent'

Encantado de tener

Gobernantes

Es bastante común en las herramientas de posicionamiento absoluto tener reglas, con la posibilidad de alternarlas y añadir guías horizontales/verticales. Aquí un ejemplo de la interfaz Sketch

! reglas de boceto

Este es un breve resumen de lo que se me ha ocurrido y quería compartirlo, así que cualquier otra sugerencia, informes de errores, API o mejoras arquitectónicas es muy bienvenida. Desde mi punto de vista, el objetivo de 'Poder mezclar diferentes modos de arrastre' ya está en el punto bueno, pero para el 'Poder crear un proyecto completo en modo absoluto' el Eliminar desde el bloque es obligatorio.