Unduh flitter - Unduh Kode Sumber flitter

Flitter

Flitter adalah mesin rendering dan kerangka kerja JavaScript yang kuat yang terinspirasi oleh flutter, mendukung SVG dan Canvas untuk membuat grafik berkinerja tinggi dan antarmuka pengguna. Sebagai mesin rendering, ia memberikan kontrol berbutir halus atas proses rendering, memungkinkan pengembang untuk membuat visualisasi interaktif yang kompleks dengan mudah. Ini dirancang untuk mengimplementasikan visualisasi data secara efisien, bagan interaktif, diagram, dan editor grafis dalam aplikasi web.

Fitur utama

Mesin Rendering Advanced : Pada intinya, Flitter adalah mesin rendering yang canggih yang memberi pengembang kontrol yang tepat atas bagaimana elemen digambar dan diperbarui di layar.
Render Object Tree : Flitter menggunakan pohon objek render untuk rendering yang efisien, memungkinkan manajemen yang mudah dan manipulasi tata letak yang kompleks. Pendekatan berbasis pohon ini, pusat mesin rendering Flitter, memungkinkan pembaruan dan menggambar ulang yang dioptimalkan.
Pemrograman Deklaratif : Mengikuti paradigma deklaratif, layar secara otomatis memperbarui ketika nilai berubah, menyederhanakan manajemen negara aplikasi dan mengurangi kompleksitas manipulasi DOM manual.
Pipa rendering yang dioptimalkan : Pengembangan ulang, lukisan, dan penghitungan ulang tata letak dikelola oleh pipa renderer, dengan optimisasi diterapkan untuk memperbarui hanya bagian yang diperlukan. Ini memastikan kinerja tinggi bahkan dengan visualisasi data yang kompleks.
Dukungan renderer ganda : Sebagai mesin rendering yang fleksibel, flitter mendukung SVG dan kanvas, memenuhi berbagai persyaratan grafis. Pengembang dapat memilih renderer yang sesuai sesuai kebutuhan, beralih mulus antara grafik vektor dan bitmap.
Tata Letak Model Kotak : Pengguna dapat dengan mudah menyusun tata letak menggunakan model kotak yang akrab, memberikan cara intuitif untuk menyusun UI kompleks dalam mesin rendering.
Beragam Aplikasi : Dapat digunakan di berbagai bidang seperti grafik, diagram, visualisasi data, dan editor grafis, memanfaatkan kekuatan mesin rendering yang mendasarinya.

Memamerkan

Berikut adalah beberapa contoh dari apa yang dapat Anda buat dengan flitter: ERD interaktif (diagram entitas-relasi) [https://easyrd.dev]

ERD interaktif ini menunjukkan kemampuan Flitter untuk membuat diagram interaktif yang kompleks. Pengguna dapat memanipulasi entitas, menambahkan hubungan, dan memvisualisasikan struktur basis data secara real-time. Showcase ini menyoroti kekuatan Flitter di:

Membuat elemen yang responsif dan dapat diseret menangani interaksi pengguna yang rumit membuat diagram rumit dengan mudah pembaruan waktu nyata berdasarkan input pengguna

Panduan Instalasi

Flitter dapat digunakan di berbagai lingkungan JavaScript. Berikut adalah metode pemasangan dan penggunaan untuk lingkungan utama:

Javascript murni

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

Bereaksi

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

Langsing

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

Contoh Penggunaan

Contoh Membuat Bagan Sederhana Menggunakan 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' } ) } )
            ]
          } )
        } )
      ]
    } ) ;
  }
}

Mengapa Flitter?

Mesin rendering yang kuat : Kekuatan inti Flitter terletak pada kemampuan rendering canggihnya, memungkinkan penanganan grafik dan animasi yang rumit.
Kurva Pembelajaran Mudah : Menggunakan Sintaks Mirip dengan Flutter, memungkinkan pengembang seluler untuk dengan mudah beradaptasi dengan lingkungan web sambil memanfaatkan mesin rendering berbasis web yang kuat.
Kinerja Tinggi : Pipa rendering yang dioptimalkan memastikan kinerja yang lancar bahkan dengan visualisasi yang kompleks dan intensif data.
Fleksibilitas : Abstrak manipulasi SVG dan kanvas, memungkinkan pengembang untuk fokus pada logika bisnis sementara mesin rendering menangani operasi menggambar tingkat rendah.
Pemilihan Renderer : Dapat memilih antara SVG dan rendering kanvas sesuai kebutuhan, memenuhi berbagai persyaratan grafis dan memungkinkan kinerja terbaik dalam skenario yang berbeda.
Reusability : Meningkatkan penggunaan kembali kode melalui pendekatan berbasis komponen, diaktifkan oleh arsitektur mesin rendering yang mendasarinya.

Berkontribusi

Flitter adalah proyek open-source. Kami menyambut semua bentuk kontribusi termasuk laporan bug, saran fitur, dan permintaan tarik. Untuk detail lebih lanjut, silakan kunjungi Perselisihan