vue jsplumb editor

vue-jsplumb-editor

Vista previa en línea

Puntos funcionales

Área de nodo de menú

• Arrastre un nodo desde el menú al área de diseño principal para colocar el nodo
• Organizar nodos por tipo de nodo

Área de diseño principal

• La operación se puede revocar
• Sartén y zoom de fondo
• Pueden recibir nodos arrastrados desde el menú
• El nodo arrastrado generará el punto final correspondiente en función de la información del nodo actual (utilizado para arrastrar la conexión)
• Los puntos finales generados se dividen en dos tipos: punto final de origen y punto final de destino, que deben distinguirse con estilo.
• El punto final de origen se coloca en la posición inferior del nodo, y el nodo de destino evita que el nodo esté en la posición superior (para facilitar la arrastre de la línea de conexión de arriba a abajo)
• Todos los nodos se pueden mover arrastrando y moviéndose
• Todos los nodos y líneas de conexión se pueden eliminar
• Todos los nodos y puntos finales deben tener un cuadro de información sobre herramientas para solicitar la información del nodo o punto final en el mouse
• Todos los nodos, puntos finales y líneas de conexión deben establecerse diferentes estilos al flotar el mouse
• Se pueden seleccionar todos los nodos y líneas de conexión
• La operación guarda datos en tiempo real
• Importar diagrama de flujo de generación de datos

Área de configuración de nodo

• Al seleccionar un nodo en el área de diseño, el área de configuración del nodo muestra un panel de configuración del nodo correspondiente
• Diferentes nodos deben tener paneles de configuración de nodo correspondientes
• El panel de nodo se utiliza para mostrar y configurar las propiedades del nodo

Haga clic con el botón derecho en la función del menú

• nodo:
  • Copiar
  • borrar
  • Ver datos
  • Rebautizar
• Cable de conexión:
  • borrar
• fondo:
  • Pasta

Dependencias de instalación

 npm install

Modelo de desarrollo

 npm run serve

Compilar código de producción

 npm run build