Téléchargement de flitter - Téléchargement du code source flitter

Nageur

Flitter est un puissant moteur de rendu JavaScript et un cadre inspiré de Flutter, prenant en charge SVG et Canvas pour créer des graphiques haute performance et des interfaces utilisateur. En tant que moteur de rendu, il fournit un contrôle à grain fin sur le processus de rendu, permettant aux développeurs de créer facilement des visualisations interactives complexes. Il est conçu pour implémenter efficacement les visualisations de données, les graphiques interactifs, les diagrammes et les éditeurs graphiques dans les applications Web.

Caractéristiques clés

Moteur de rendu avancé : À son cœur, Flitter est un moteur de rendu sophistiqué qui donne aux développeurs un contrôle précis sur la façon dont les éléments sont dessinés et mis à jour à l'écran.
Arbre d'objets de rendu : Flitter utilise un arbre d'objet de rendu pour un rendu efficace, permettant une gestion et une manipulation faciles de dispositions complexes. Cette approche basée sur des arbres, au cœur du moteur de rendu de Flitter, permet des mises à jour et des redestines optimisées.
Programmation déclarative : Après un paradigme déclaratif, l'écran se met automatiquement à jour lorsque les valeurs changent, simplifiant la gestion de l'état d'application et réduisant la complexité de la manipulation manuelle DOM.
Pipeline de rendu optimisé : les recalculations de réinstallation, de peinture et de mise en page sont gérées par le pipeline de rendu, avec des optimisations appliquées pour mettre à jour uniquement les pièces nécessaires. Cela garantit des performances élevées même avec des visualisations complexes et lourdes de données.
Support à double rendu : En tant que moteur de rendu flexible, Flitter prend en charge SVG et Canvas, répondant à diverses exigences graphiques. Les développeurs peuvent choisir le rendu approprié selon les besoins, en basant de manière transparente entre les graphiques vectoriels et bitmap.
Disposition du modèle de boîte : les utilisateurs peuvent facilement composer les dispositions à l'aide du modèle de boîte familier, fournissant un moyen intuitif de structurer des UIS complexes dans le moteur de rendu.
Des applications diverses : peuvent être utilisées dans divers domaines tels que les graphiques, les diagrammes, la visualisation des données et les éditeurs graphiques, en tirant parti de la puissance du moteur de rendu sous-jacent.

Vitrine

Voici quelques exemples de ce que vous pouvez créer avec Flerter: ERD interactif (diagramme de relation entité) [https://easyrd.dev]

Cet ERD interactif démontre la capacité de Flitter pour créer des diagrammes interactifs complexes. Les utilisateurs peuvent manipuler des entités, ajouter des relations et visualiser les structures de base de données en temps réel. Cette vitrine met en évidence les forces de Flitter dans:

Création d'éléments réactifs et dragables gantant les interactions utilisateur complexes rendant les diagrammes complexes avec des mises à jour en temps réel en fonction de l'entrée utilisateur

Guide d'installation

Flitter peut être utilisé dans divers environnements JavaScript. Voici des méthodes d'installation et d'utilisation pour les environnements majeurs:

Pur javascript

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

Réagir

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

Exemple d'utilisation

Exemple de création d'un graphique simple à l'aide de 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' } ) } )
            ]
          } )
        } )
      ]
    } ) ;
  }
}

Pourquoi Flitter?

Moteur de rendu puissant : la résistance au cœur de Flitter réside dans ses capacités de rendu avancées, permettant une manipulation en douceur de graphiques et d'animations complexes.
Courbe d'apprentissage facile : utilise une syntaxe similaire à Flutter, permettant aux développeurs mobiles de s'adapter facilement à l'environnement Web tout en tirant parti d'un puissant moteur de rendu Web.
Haute performance : le pipeline de rendu optimisé garantit des performances en douceur même avec des visualisations complexes à forte intensité de données.
Flexibilité : résume la manipulation de SVG et de toile, permettant aux développeurs de se concentrer sur la logique métier tandis que le moteur de rendu gère les opérations de dessin de bas niveau.
Sélection des rendus : Peut choisir entre SVG et les rendus de toile selon les besoins, en répondant à diverses exigences graphiques et en permettant les meilleures performances dans différents scénarios.
Réutilisabilité : augmente la réutilisabilité du code grâce à une approche basée sur les composants, activée par l'architecture du moteur de rendu sous-jacent.

Contributif

Flitter est un projet open-source. Nous accueillons toutes les formes de contributions, y compris les rapports de bogues, les suggestions de fonctionnalités et les demandes de traction. Pour plus de détails, veuillez visiter Discord