vue jsplumb editor

Vue-JSplumb-Editor

Visualização online

Pontos funcionais

Área do nó do menu

• Arraste um nó do menu para a área de design principal para colocar o nó
• Organizar nós por tipo de nó

Área de design principal

• A operação pode ser revogada
• Panela e zoom de fundo
• Pode receber nós arrastados do menu
• O nó arrastado gerará o terminal correspondente com base nas informações atuais do nó (usado para arrastar a conexão)
• Os pontos de extremidade gerados são divididos em dois tipos: terminal de origem e ponto de extremidade do alvo, que devem ser distinguidos em grande estilo.
• O terminal de origem é colocado na posição inferior do nó, e o nó de destino impede que o nó esteja na posição superior (para facilitar o arrastar a linha de conexão de cima para baixo)
• Todos os nós podem ser movidos arrastando e movendo -se
• Todos os nós e linhas de conexão podem ser excluídos
• Todos os nós e pontos de extremidade precisam ter uma caixa de dica de ferramenta para solicitar as informações do nó ou endpoint no mouse
• Todos os nós, pontos de extremidade e linhas de conexão precisam ser estilos diferentes ao flutuar o mouse
• Todos os nós e linhas de conexão podem ser selecionados
• Operação salva dados em tempo real
• Importar fluxograma de geração de dados

Área de configuração do nó

• Ao selecionar um nó na área de design, a área de configuração do nó exibe um painel de configuração de nó correspondente
• Nós diferentes devem ter painéis de configuração de nós correspondentes
• O painel do nó é usado para exibir e configurar propriedades do nó

Clique com o botão direito do mouse na função de menu

• nó:
  • cópia
  • excluir
  • Visualizar dados
  • Renomear
• Cabo de conexão:
  • excluir
• fundo:
  • Colar

Dependências de instalação

 npm install

Modelo de desenvolvimento

 npm run serve

Compilar código de produção

 npm run build