Download de flitter - download do código -fonte flitter

Flitter

O Flitter é um poderoso mecanismo de renderização e estrutura de JavaScript inspirado no Flutter, suportando o SVG e o Canvas para criar gráficos de alto desempenho e interfaces de usuário. Como mecanismo de renderização, ele fornece controle de granulação fina sobre o processo de renderização, permitindo que os desenvolvedores criem visualizações complexas e interativas com facilidade. Ele foi projetado para implementar com eficiência visualizações de dados, gráficos interativos, diagramas e editores gráficos em aplicativos da Web.

Principais recursos

Motor de renderização avançado : em sua essência, o Flitter é um mecanismo de renderização sofisticado que fornece aos desenvolvedores controle preciso sobre como os elementos são desenhados e atualizados na tela.
Renderize Árvore de Objetos : Flitter usa uma árvore de objetos renderizados para renderização eficiente, permitindo fácil gerenciamento e manipulação de layouts complexos. Essa abordagem baseada em árvores, central para o mecanismo de renderização de Flitter, permite atualizações e redraws otimizados.
Programação declarativa : Após um paradigma declarativo, a tela é atualizada automaticamente quando os valores mudam, simplificando o gerenciamento do estado do aplicativo e reduzindo a complexidade da manipulação manual de DOM.
O oleoduto de renderização otimizado : renderização, pintura e recálculos de layout são gerenciados pelo oleoduto do renderizador, com otimizações aplicadas para atualizar apenas as peças necessárias. Isso garante alto desempenho, mesmo com visualizações complexas e pesadas de dados.
Suporte ao renderizador duplo : como um mecanismo de renderização flexível, o Flitter suporta SVG e Canvas, atendendo a vários requisitos gráficos. Os desenvolvedores podem escolher o renderizador apropriado conforme necessário, alternando perfeitamente entre os gráficos de vetor e bitmap.
Layout do modelo da caixa : os usuários podem compor facilmente layouts usando o modelo de caixa familiar, fornecendo uma maneira intuitiva de estruturar as UIs complexas no mecanismo de renderização.
Aplicações diversas : podem ser utilizadas em vários campos, como gráficos, diagramas, visualização de dados e editores gráficos, alavancando o poder do mecanismo de renderização subjacente.

Showcase

Aqui estão alguns exemplos do que você pode criar com Flitter: ERD interativo (diagrama de relação de entidade) [https://easyrd.dev]

Este ERD interativo demonstra a capacidade de Flitter de criar diagramas complexos e interativos. Os usuários podem manipular entidades, adicionar relacionamentos e visualizar estruturas de banco de dados em tempo real. Esta vitrine destaca os pontos fortes de Flitter em:

Criação de elementos responsivos e draggable lidando interações complexas de usuário, renderizando diagramas complexos com atualizações de facilidade em tempo real com base na entrada do usuário

Guia de instalação

Flitter pode ser usado em vários ambientes JavaScript. Aqui estão os métodos de instalação e uso para os principais ambientes:

JavaScript puro

npm install @meursyphus/flitter

 import { Container } from "@meursyphus/flitter" ;

/**
 * canvas style must be set to 100%, 100%
 * and you also must wrap div for canvas in order to calculate the size of the canvas
 */
document . querySelector < HTMLDivElement > ( "#app" ) ! . innerHTML = `
  <div style="width: 100vw; height: 100vh" id="container">
    <canvas style="width: 100%; height: 100%;" id="view" />
  </div>
` ;
// Note: SVG is also supported
// document.querySelector<HTMLDivElement>("#app")!.innerHTML = `
//   <div style="width: 100vw; height: 100vh" id="container">
//     <svg style="width: 100%; height: 100%;" id="view"></svg>
//   </div>
// `;
const app = new AppRunner ( {
  view : document . querySelector < HTMLCanvasElement > ( "#view" ) ! ,
} ) ;
/**
 * you must set resizeTarget to calculate the size of the canvas
 */
app . onMount ( {
  resizeTarget : document . querySelector < HTMLDivElement > ( "#container" ) ! ,
} ) ;

app . runApp ( Container ( { color : 'lightblue' } ) ) ;

Reagir

npm install @meursyphus/flitter @meursyphus/flitter-react

 import { Container , Alignment , Text , TextStyle } from '@meursyphus/flitter' ;
import Widget from '@meursyphus/flitter-react' ;

const App = ( ) => (
  < >
    < Widget
      width = "600px"
      height = "300px"
      renderer = "canvas" // or svg
      widget = { Container ( {
        alignment : Alignment . center ,
        color : 'lightblue' ,
        child : Text ( "Hello, Flitter SVG!" , { style : TextStyle ( { fontSize : 30 , weight : 'bold' } ) } )
      } ) }
    />
  </ >
) ;

SVELTE

npm install @meursyphus/flitter @meursyphus/flitter-svelte

< script >
  import { Container , Alignment , Text , TextStyle } from ' @meursyphus/flitter ' ;
  import Widget from ' @meursyphus/flitter-svelte ' ;
</ script >

< Widget
  width = " 600px "
  height = " 300px "
  renderer = " canvas " <!-- or " svg " -->
  widget={ Container ({
    alignment: Alignment . center ,
    color: ' lightblue ' ,
    child: Text ( " Hello, Flitter SVG! " , { style: TextStyle ({ fontSize: 30 , weight: ' bold ' }) })
  })}
/>

Exemplo de uso

Exemplo de criação de um gráfico simples usando flitter:

 import {
  Container ,
  Animation ,
  Text ,
  TextStyle ,
  StatefulWidget ,
  State ,
  Alignment ,
  SizedBox ,
  Column ,
  MainAxisSize ,
  MainAxisAlignment ,
  Row ,
  CrossAxisAlignment ,
  FractionallySizedBox ,
  BoxDecoration ,
  BorderRadius ,
  Radius ,
  AnimationController ,
  Tween ,
  CurvedAnimation ,
  Curves
} from '@meursyphus/flitter' ;

export default function BarChart ( ) {
  return Container ( {
    alignment : Alignment . center ,
    color : 'lightgrey' ,
    child : Column ( {
      mainAxisSize : MainAxisSize . min ,
      crossAxisAlignment : CrossAxisAlignment . center ,
      children : [
        Text ( 'BarChart' , { style : new TextStyle ( { fontFamily : 'Intent' , fontWeight : '600' } ) } ) ,
        SizedBox ( {
          width : 200 ,
          height : 150 ,
          child : Row ( {
            mainAxisAlignment : MainAxisAlignment . spaceBetween ,
            children : [
              { label : 'S' , value : 60 } ,
              { label : 'M' , value : 20 } ,
              { label : 'T' , value : 30 } ,
              { label : 'W' , value : 90 } ,
              { label : 'T' , value : 70 } ,
              { label : 'F' , value : 50 } ,
              { label : 'S' , value : 40 }
            ] . map ( ( { label , value } ) => new Bar ( label , value ) )
          } )
        } )
      ]
    } )
  } ) ;
}

class Bar extends StatefulWidget {
  constructor ( public label : string , public value : number ) {
    super ( ) ;
  }

  createState ( ) : State < StatefulWidget > {
    return new BarState ( ) ;
  }
}

class BarState extends State < Bar > {
  animationController ! : AnimationController ;
  tweenAnimation ! : Animation < number > ;

  override initState ( ) : void {
    this . animationController = new AnimationController ( {
      duration : 10000
    } ) ;
    this . animationController . addListener ( ( ) => {
      this . setState ( ) ;
    } ) ;
    const tween = new Tween ( { begin : 0 , end : this . widget . value } ) ;
    this . tweenAnimation = tween . animated (
      new CurvedAnimation ( {
        parent : this . animationController ,
        curve : Curves . easeInOut
      } )
    ) ;
    this . animationController . forward ( ) ;
  }

  override build ( ) {
    return Column ( {
      mainAxisAlignment : MainAxisAlignment . end ,
      children : [
        FractionallySizedBox ( {
          heightFactor : this . tweenAnimation . value / 100 ,
          child : Column ( {
            children : [
              Container ( {
                width : 20 ,
                decoration : new BoxDecoration ( {
                  color : '#1a1a1a' ,
                  borderRadius : BorderRadius . only ( {
                    topLeft : Radius . circular ( 4 ) ,
                    topRight : Radius . circular ( 4 )
                  } )
                } )
              } ) ,
              SizedBox ( { height : 5 } ) ,
              Text ( this . widget . label , { style : new TextStyle ( { fontFamily : 'Intent' } ) } )
            ]
          } )
        } )
      ]
    } ) ;
  }
}

Por que flitter?

Motor de renderização poderoso : a força principal de Flitter está em suas capacidades avançadas de renderização, permitindo o manuseio suave de gráficos e animações complexas.
Curva fácil de aprendizado : usa a sintaxe semelhante ao Flutter, permitindo que os desenvolvedores móveis se adaptem facilmente ao ambiente da Web enquanto aproveitam um poderoso mecanismo de renderização baseado na Web.
Alto desempenho : o pipeline de renderização otimizado garante desempenho suave, mesmo com visualizações complexas e intensivas em dados.
Flexibilidade : resumos a manipulação de SVG e tela, permitindo que os desenvolvedores se concentrem na lógica de negócios enquanto o mecanismo de renderização lida com as operações de desenho de baixo nível.
Seleção de renderizador : pode escolher entre os renderizadores de SVG e Canvas conforme necessário, atendendo a vários requisitos gráficos e permitindo o melhor desempenho em diferentes cenários.
REUSIBILIDADE : Aumenta a reutilização de código por meio de uma abordagem baseada em componentes, ativada pela arquitetura do mecanismo de renderização subjacente.

Contribuindo

Flitter é um projeto de código aberto. Congratulamo -nos com todas as formas de contribuições, incluindo relatórios de bugs, sugestões de recursos e solicitações de extração. Para mais detalhes, visite Discord