flitterダウンロード - flitterソースコードのダウンロード

フリッター

Flitterは、Flutterに触発された強力なJavaScriptレンダリングエンジンとフレームワークであり、SVGとCanvasの両方をサポートして高性能グラフィックスとユーザーインターフェイスを作成します。レンダリングエンジンとして、レンダリングプロセスを細かく制御し、開発者が複雑でインタラクティブな視覚化を簡単に作成できるようにします。 Webアプリケーションでデータの視覚化、インタラクティブなチャート、図、グラフィックエディターを効率的に実装するように設計されています。

重要な機能

高度なレンダリングエンジン：そのコアでは、Flitterは洗練されたレンダリングエンジンであり、開発者が画面上で要素の描画と更新を正確に制御できるようにします。
レンダリングオブジェクトツリー：Flitterはレンダリングオブジェクトツリーを使用して効率的なレンダリングを行い、簡単な管理と複雑なレイアウトの操作を可能にします。フリッターのレンダリングエンジンの中心であるこのツリーベースのアプローチにより、最適化された更新と再描画が可能になります。
宣言プログラミング：宣言的なパラダイムに続いて、値が変更されたときに画面が自動的に更新され、アプリケーションの状態管理を簡素化し、手動DOM操作の複雑さを軽減します。
最適化されたレンダリングパイプライン：再レンダリング、塗装、およびレイアウトの再計算は、レンダラーパイプラインによって管理され、必要な部品のみを更新するために最適化が適用されます。これにより、複雑でデータが多い視覚化があっても高性能が保証されます。
デュアルレンダラーサポート：柔軟なレンダリングエンジンとして、FlitterはSVGとCanvasの両方をサポートし、さまざまなグラフィック要件を満たしています。開発者は、必要に応じて適切なレンダラーを選択して、ベクターとビットマップグラフィックスのシームレスに切り替えることができます。
ボックスモデルレイアウト：ユーザーは、馴染みのあるボックスモデルを使用してレイアウトを簡単に作成でき、レンダリングエンジン内の複雑なUIを構成する直感的な方法を提供できます。
多様なアプリケーション：チャート、図、データの視覚化、グラフィックエディターなどのさまざまな分野で利用して、基礎となるレンダリングエンジンのパワーを活用できます。

ショーケース

フリッターで作成できるものの例は次のとおりです。インタラクティブERD（エンティティ関連図）

このインタラクティブなERDは、複雑でインタラクティブな図を作成するFlitterの機能を示しています。ユーザーは、エンティティを操作し、関係を追加し、データベース構造をリアルタイムで視覚化できます。このショーケースは、次のようなフリッターの強みを強調しています。

レスポンシブでドラッグ可能な要素の作成複雑なユーザーインタラクションを処理する複雑な図をレンダリングして、ユーザー入力に基づいて簡単にリアルタイム更新を行います

インストールガイド

フリッターは、さまざまなJavaScript環境で使用できます。主要な環境のインストールと使用方法は次のとおりです。

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

反応します

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

使用例

フリッターを使用してシンプルなチャートを作成する例：

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

なぜフリッター？

強力なレンダリングエンジン：Flitterのコア強度は、その高度なレンダリング機能にあり、複雑なグラフィックとアニメーションのスムーズな処理を可能にします。
簡単な学習曲線：Flutterと同様の構文を使用して、強力なWebベースのレンダリングエンジンを活用しながら、モバイル開発者がWeb環境に簡単に適応できるようにします。
高性能：最適化されたレンダリングパイプラインにより、複雑でデータ集約的な視覚化があってもスムーズなパフォーマンスが保証されます。
柔軟性：SVGとキャンバスの操作を要約して、開発者がビジネスロジックに集中できるようになり、レンダリングエンジンが低レベルの描画操作を処理します。
レンダラーの選択：必要に応じてSVGとキャンバスレンダラーを選択して、さまざまなグラフィック要件を満たし、さまざまなシナリオで最高のパフォーマンスを可能にすることができます。
再利用性：基礎となるレンダリングエンジンのアーキテクチャによって有効になっているコンポーネントベースのアプローチを通じて、コードの再利用性を向上させます。