Corregir y refactorizar Sorter.ts

La idea es refactorizar el clasificador para mejorar la mantenibilidad y legibilidad. Podemos implementar los siguientes cambios:

1. Hacer que la clase 'Sorter' dependa de una estructura abstracta de árbol en lugar de depender de implementaciones específicas como 'Component' o 'Layers', hacer que la clase 'Sorter' funcione con una estructura de árbol más genérica y abstracta. Esto lo hará más flexible y reutilizable.
2. Dividir el código en varias clases más pequeñas, cada una con una sola responsabilidad
3. 'ComponentManager.canMove': Utiliza el método 'ComponentManager.canMove' para determinar si un 'Component' puede moverse. Esto evita duplicar código y garantiza un comportamiento consistente en diferentes partes de tu aplicación.

Veremos cómo podemos aplicar esos puntos uno por uno

1. Para hacer que la clase 'Sorter' sea independiente de cualquier implementación de modelo, podemos añadir un argumento en 'SorterOptions' que es una función que devuelve si un elemento puede arrastrarse a otro elemento.

'''tsx export interface SorterOptions { contenedor?: HTMLElement; canMove: (targetModel: Model<any>, srcModel: Model<any>, index: number) => booleano; ... } ```

Por ejemplo, inicializar el 'Clasificador' para las 'Capas' en el 'StyleManager'

'''tsx Nuevos servicios públicos. Clasificador({ contenedor: esto.el, canMove: (targetModel, srcModel, index) => { return targetModel.view === this.el // Permitir que se descarte si el destino es el contenedor }, Em, }) ```

Y para cualquier cosa que dependa de 'Componente' sería

'''tsx Nuevos servicios públicos. Clasificador({ contenedor: esto.el, canMove: editor. Components.canMove, Em, }) ```

2. Dividir la funcionalidad de la clase 'Clasificador' en varias clases
   • 'DeterminadorDeDropLocation'
     • Recibe entrada: Toma como entrada datos de movimiento del ratón, el elemento HTML que se arrastra, la estructura del árbol y la función 'canMove'.
     • Calcula la ubicación de la caída: Analiza la posición del ratón, la estructura del árbol y la función 'canMove' para determinar el índice más adecuado para el elemento caído.
   • 'Manipulador de arrastre y solte'
     • Crea y gestiona elementos: Crea y gestiona el marcador de posición, el asistente de arrastre y el elemento que se está arrastrando, asegurando su apariencia y posición correctas.

Gracias por informar de esto, @mohamedsalem401.

Gracias por compartir tu informe sobre [Arreglar] Corregir y refactorizar Sorter.ts. Para ayudar al equipo a investigar y priorizar esto:

Por favor, proporciona:

1. Un ejemplo mínimo reproducible (CodeSandbox/JSFiddle)
2. Tu GrapesJS número de versión
3. Información sobre navegador y sistema operativo
4. Cualquier mensaje de error de la consola del navegador
5. Pasos para reproducir el problema

Lo que más ayuda:

• Ejemplo de código mínimo (no tu proyecto completo)
• Grabación de pantalla o captura de pantalla que muestra el problema
• Comportamiento esperado frente a comportamiento real claramente indicado
• Configuración GrapesJS que estás usando

Con estos detalles, los mantenedores pueden identificar y priorizar una solución mucho más rápido. El equipo de GrapesJS responde muy bien a los problemas bien documentados.