Vue - La mejor manera de dibujar lienzo grande basado en datos Json

Lo que estoy construyendo
Hay este juego Path of Exile, que tiene un árbol pasivo que estoy recreando en mi aplicación Vue con ayuda de Pixi Js. Los desarrolladores del juego liberan un json con los datos para este árbol pasivo cada expansión para que la gente trabaje con.

El Árbol: https://www.pathofexile.com/passive-skill-tree
El json: https://github.com/EmmittJ/SkillTree_TypeScript/blob/master/data/3.12.0-pre/SkillTree.json (No te olvides de presionar el enlace "Ver crudo")
Sandbox i creó con una variación donde intenté hacerlo con etch(): https://codesandbox.io/s/sharp-kalam-hzvt4?fontsize=14 implicahidenavigation=1 limittheme=dark

El problema
Mientras trabajaba con estos datos json y Pixi js para dibujar este árbol estoy corriendo en algunos problemas de rendimiento. Con todas las diferentes variaciones que intenté, o tengo grandes fugas de memoria después de un tiempo (en esto estoy más preocupado), o todo el json está cargado en mi paquete de producción para que esos archivos sean enormes, o ambos. En este momento intenté tantas cosas que ya no sé qué hacer.

Lo que estoy buscando
Estoy buscando construir un componente en mi Aplicación Vue con los datos de este json que es sólo estático en una carpeta /data (cambiará cada 3 meses al máximo), y con que los datos ejecutan algunas funciones para dibujar el árbol pasivo en mi lienzo. Cuando este árbol se dibuja todavía quiero ser capaz de cambiar dinámicamente las cosas en el lienzo. Esto es lo que la estructura del sitio debe buscar ahora:

enter image description here

Lo que intenté
Por supuesto hay múltiples maneras de obtener los datos json y trabajar con él, pero todos parecen funcionar en algún tipo de problemas. Traté de usar Axios, Fetch, sólo una importación, ponerlo en mi estado, y ponerlo en un objeto estático de datos. Pero al final siento que mi salto JS siempre parece algo así:

enter image description here

Sandbox
He creado una caja de arena con una variación donde carga los datos con etch():
https://codesandbox.io/s/sharp-kalam-hzvt4?fontsize=14 implicahidenavigation=1 limittheme=dark

¿Alguien que pueda ayudarme cómo debería ir?

Pregunta hecha hace 3 años, 4 meses, 26 días - Por compilercaptain

2 Respuestas:

  • Para mejorar el rendimiento al dibujar un lienzo grande basado en datos JSON en Vue utilizando Pixi Js, te recomendaría seguir los siguientes pasos:

    • Optimizar la carga de datos JSON:
    - En lugar de cargar todo el JSON en el paquete de producción, podrías considerar cargar los datos dinámicamente cuando sea necesario. Una opción podría ser almacenar el JSON en un archivo estático en la carpeta /data y luego cargarlo cuando se renderice el componente.

    • Utilizar una estrategia de renderizado eficiente:
    - En lugar de renderizar todos los nodos del árbol pasivo al mismo tiempo, podrías implementar una estrategia de renderizado por demanda. Por ejemplo, podrías renderizar solo los nodos visibles en la pantalla y a medida que el usuario se mueve por el árbol, ir renderizando más nodos de forma incremental.

    • Almacenamiento de datos:
    - Podrías almacenar los datos JSON en el Vuex store de Vue para facilitar el acceso a los datos y la gestión de las actualizaciones dinámicas en el lienzo.

    • Optimización de rendimiento:
    - Para evitar fugas de memoria, asegúrate de limpiar adecuadamente los recursos utilizados al eliminar nodos del árbol o al salir de la página.

    • Implementar reactividad:
    - Para cambios dinámicos en el lienzo, asegúrate de que tu componente Vue esté correctamente configurado para reaccionar a cambios en los datos y volver a renderizar el lienzo cuando sea necesario.

    Se puede implementar un componente <tree></tree> en Vue que gestione la carga y representación de los datos del JSON en el lienzo de forma eficiente siguiendo estos consejos. Puedes dividir la lógica de representación y manipulación de datos en métodos y utilizar las propiedades reactivas de Vue para mantener actualizado el lienzo en respuesta a los cambios en los datos.

    Si necesitas ayuda con algún aspecto específico o tienes más preguntas, ¡no dudes en preguntar!

    Respondida el Dec 20, 2020 a las 15:50 - por Gpt

    Votos positivos: 0 | Votos negativos: 0

  • Solución propuesta

    Manejo de datos:

    Importa el archivo JSON como un módulo estático en el archivo principal de tu aplicación Vue:

    javascript
import data from "./data/SkillTree.json";

    Esto cargará el JSON solo una vez, evitando fugas de memoria y problemas de tamaño del paquete.

    Dibujo del lienzo:

    Utiliza una biblioteca de gráficos como PixiJS para dibujar el árbol pasivo. Implementa un componente Vue para el árbol que utilice el objeto data importado para generar la representación gráfica. Divide el árbol en secciones más pequeñas para mejorar el rendimiento, cargando y dibujando solo las secciones visibles.

    Manejo de cambios dinámicos:

    Utiliza el estado de Vue para rastrear cualquier cambio en el árbol pasivo (por ejemplo, al seleccionar o anular la selección de nodos). Responde a estos cambios actualizando el lienzo en consecuencia, dibujando solo las áreas afectadas.

    Estructura recomendada:

    Archivo principal de Vue: Importar datos JSON y proporcionarlos a los componentes. Componente de árbol: Dibujar el árbol pasivo utilizando los datos proporcionados. Componentes de nodos: Dibujar nodos individuales dentro del árbol, respondiendo a los cambios de estado.

    Consejos adicionales:

    Utiliza el almacenamiento en caché para almacenar secciones del árbol ya dibujadas. Implementa la eliminación de elementos que ya no sean necesarios. Optimiza el código del lienzo para mejorar el rendimiento. Considera utilizar herramientas de perfilado como Chrome DevTools para identificar y abordar cuellos de botella.

    Ejemplo de código:

    javascript
// Archivo principal de Vue
import data from "./data/SkillTree.json";

export default {
  data() {
    return {
      data,
      selectedNodes: [],
    };
  },
};

// Componente de árbol

    Conclusión:*

    Siguiendo este enfoque, puedes dibujar de manera eficiente un gran lienzo basado en datos JSON, manejar cambios dinámicos y optimizar el rendimiento de tu aplicación Vue.

    Respondida el Dec 20, 2020 a las 16:05 - por Gemini

    Votos positivos: 0 | Votos negativos: 0