Raska – Criação/exportação de grafos direcionados usando HTML5

Raska

Uma lib super leve em VanillaJS para importação/exportação de grafos direcionados em formato JSON.

Demos disponíveis

  • Criação/importação/exportação de grafos – aqui 
  • Criação de logo – aqui
  • Rastreamento elementos e restrição de contexto aqui
  • Jogo 1 – Mais cliques certeiros em menos tempo – aqui
  • Jogo 2 – Criação de links –  aqui

Até agora

logo

Releases

Histórico

  • Suporte para dispositivos touchscreen
  • Nova aparência para as “setas”
  • Suporte para eventos agora é cross browser 
  • Correção na reimportação do grafo JSON – não estava setando o tipo do elemento de forma adequada
  • Novo layout de setas agora ficou mais amigável apontando para um local mais preciso no elemento de destino
  • Correção para remontagem de triângulos (com lado e tamanho corretos)
  • Melhoria na biblioteca de animação que agora trata cada cadeia de eventos como única por elemento
  • O evento on.click agora recebe também o evento nativo do navegador como parâmetro
  • Elemetno on.click agora dispara para elementos pais
  • Tipo de elemento
    • Triangulo
  • Identificação/customização do click em elementos contidos em outros
  • Animações executando em Loop
  • Correção de memory leaks quando usando timers
  • Tipos de elemento
    • Quadrado
    • Círculo
  • Aplicação de estilo de forma individualizada
  • Hierarquia entre elementos (elementos contidos em outros)
  • Posição relativa dinâmica – em relação ao(s) pai(s)
  • Posição absoluta – em relação à posição x:0,y:0 do canvas
  • Criação e remoção de links unidirecionais com verificação instantânea de referência cíclica
  • Exportação / Importação do grafo em formato JSON
  • Inserção / deleção dinâmica de elementos
  • Filtro dinâmico para permitir/impedir criação de links entre elementos (via delegate)
  • Opção de não serializar um dado elemento
  • Exportar grafo como imagem
  • Rastreamento e atualização dinâmica da posição dos elementos

Um pouco na linha do que eu havia feito para o projeto PB, precisei criar uma forma de permitir que o usuário pudesse visualmente, no conforto de seu navegador, materializar as dependências de alguns processos de negócio e o fluxo de dados que ocorre entre estes ‘nós’.

Depois de cogitar algumas alternativas na linha do D3, cheguei a conclusão de que não precisava de tanto e, claro, minha lib poderia ser BEM menor e, ainda colocar em prática meus – meio enferrujados – conhecimentos de geometria.

Código manolo!

Repositório aqui! – Achou um bug? Tem uma sugestão de melhoria? Manda PR que é nóis!

Ainda na versão beta – mas você pode acompanhar os releases aqui.

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: