drag-and-drop

url:https://ruanvfachini.github.io/workflow-diagram-vue/

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.

Documentação:

componentes

Diagram

<Diagram v-model="data" @edit-item="openEdit" :zoomCfg="zoomPanelConfig" >

Parâmetros

• Elemento principal do diagrama:

  Entrada dos arrays de cards e ligações do diagrama

  v-model: {
          actions: []  | lista de cards
          links: []    | lista de conexões
        }

• Display de zoom do diagrama:

  Parâmetros de entrada componente de zoom

  zoomCfg: {
          position: string | ver legenda
          height: number   | em pixels
          widtht: number   | em pixels
          scale: number    | em decimal
        }

Legenda:

Parâmetro de entrada para posicionamento do componente de zoom

Valor	Posição em X	Posição em Y
0-0	Esquerda	Cima
1-0	Direita	Cima
0-1	Esquesda	Baixo
1-1	Direita	Baixo

Eventos

• edit-item($event):

  Evento emitido sempre que o botão editar é clicado dentro de um card do diagrama

  $event: {
      title: string,
      description: string,
      name: string,
      x: number,
      y: number,
      input: {},
      output: {},
      alterput: {}
    }