Descarga de flitter - Descarga del código fuente flitter

Rareza

Flitter es un potente motor de renderizado de JavaScript y un marco inspirado en Flutter, que admite SVG y Canvas para crear gráficos de alto rendimiento e interfaces de usuario. Como motor de representación, proporciona un control de grano fino sobre el proceso de representación, lo que permite a los desarrolladores crear visualizaciones complejas e interactivas con facilidad. Está diseñado para implementar eficientemente visualizaciones de datos, gráficos interactivos, diagramas y editores gráficos en aplicaciones web.

Características clave

Motor de renderizado avanzado : en su núcleo, Flitter es un motor de renderizado sofisticado que brinda a los desarrolladores un control preciso sobre cómo se dibujan y se actualizan los elementos en la pantalla.
Render el árbol de objetos : Flitter utiliza un árbol de objetos de renderizado para una representación eficiente, lo que permite una fácil gestión y manipulación de diseños complejos. Este enfoque basado en árboles, central para el motor de representación de Flitter, permite actualizaciones y redibujados optimizados.
Programación declarativa : después de un paradigma declarativo, la pantalla se actualiza automáticamente cuando los valores cambian, simplifican la gestión del estado de la aplicación y reducen la complejidad de la manipulación manual de DOM.
La tubería de representación optimizada : la re-renderización, la pintura y los recalculaciones de diseño son gestionados por la tubería de renderizador, con optimizaciones aplicadas para actualizar solo las piezas necesarias. Esto garantiza un alto rendimiento incluso con visualizaciones complejas y pesadas de datos.
Soporte de renderizador dual : como motor de representación flexible, Flitter admite SVG y lienzo, cumpliendo varios requisitos gráficos. Los desarrolladores pueden elegir el renderizador apropiado según sea necesario, cambiando a la perfección entre los gráficos de vector y mapa de bits.
Diseño del modelo de caja : los usuarios pueden componer fácilmente diseños utilizando el modelo de caja familiar, proporcionando una forma intuitiva de estructurar UI complejas dentro del motor de representación.
Diversas aplicaciones : se pueden utilizar en varios campos, como gráficos, diagramas, visualización de datos y editores gráficos, aprovechando la potencia del motor de representación subyacente.

Escaparate

Aquí hay algunos ejemplos de lo que puede crear con Flitter: ERD interactivo (diagrama de la relación entre entidades) [https://easyrd.dev]

Este ERD interactivo demuestra la capacidad de Flitter para crear diagramas complejos e interactivos. Los usuarios pueden manipular entidades, agregar relaciones y visualizar estructuras de bases de datos en tiempo real. Este escaparate resalta las fortalezas de Flitter en:

Creación de elementos receptivos y arrastrables que manejan interacciones complejas del usuario que hacen diagramas intrincados con facilidad actualizaciones en tiempo real basadas en la entrada del usuario

Guía de instalación

Flitter se puede usar en varios entornos de JavaScript. Aquí hay métodos de instalación y uso para entornos principales:

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' } ) ) ;

Reaccionar

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' } ) } )
      } ) }
    />
  </ >
) ;

Esbelto

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 ' }) })
  })}
/>

Ejemplo de uso

Ejemplo de creación de un gráfico simple 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 qué Flitter?

Potente motor de renderizado : la fuerza central de Flitter se encuentra en sus capacidades de representación avanzadas, lo que permite un manejo suave de gráficos y animaciones complejas.
Curva de aprendizaje fácil : utiliza una sintaxis similar a Flutter, lo que permite a los desarrolladores móviles adaptarse fácilmente al entorno web al tiempo que aprovecha un potente motor de renderizado basado en la web.
Alto rendimiento : la tubería de representación optimizada garantiza un rendimiento sin problemas incluso con visualizaciones complejas y intensivas en datos.
Flexibilidad : Abstracts SVG y Manipulación de lienzo, lo que permite a los desarrolladores centrarse en la lógica comercial, mientras que el motor de representación maneja las operaciones de dibujo de bajo nivel.
Selección de renderizador : puede elegir entre SVG y los renderistas de lienzo según sea necesario, cumplir con varios requisitos gráficos y permitir el mejor rendimiento en diferentes escenarios.
Reutilización : aumenta la reutilización del código a través de un enfoque basado en componentes, habilitado por la arquitectura del motor de representación subyacente.

Que contribuye

Flitter es un proyecto de código abierto. Damos la bienvenida a todas las formas de contribuciones, incluidos informes de errores, sugerencias de características y solicitudes de extracción. Para más detalles, visite Discord