flitter

flitter

Flitter عبارة عن محرك وإطار قوي لتقديم JavaScript مستوحى من الرفرفة ، ويدعم كل من SVG و Canvas لإنشاء رسومات عالية الأداء وواجهات المستخدم. كمحرك عرض ، فإنه يوفر تحكمًا دقيقًا في عملية التقديم ، مما يسمح للمطورين بإنشاء تصورات معقدة وتفاعلية بسهولة. تم تصميمه لتنفيذ تصورات البيانات بكفاءة ، والمخططات التفاعلية ، والمخططات ، ومحرري الرسوم في تطبيقات الويب.

الميزات الرئيسية

• محرك التقديم المتقدم : في جوهره ، يعد Flitter محركًا متطورًا للعرض يمنح المطورين تحكمًا دقيقًا في كيفية رسم العناصر وتحديثها على الشاشة.

• TREENT TREE TREE : يستخدم FLITTER شجرة كائن عرض لتقديم كفاءة ، مما يسمح بإدارة سهلة ومعالجة للتخطيطات المعقدة. يتيح هذا النهج القائم على الأشجار ، وهو مركزي لمحرك تقديم Flitter ، التحديثات المحسنة وإعادة الرسم.

• البرمجة التعريفية : بعد النموذج التعريفي ، يتم تحديث الشاشة تلقائيًا عندما تتغير القيم ، وتبسيط إدارة حالة التطبيق وتقليل تعقيد معالجة DOM اليدوي.

• خط أنابيب التقديم المحسّن : يتم إدارة عمليات إعادة الإشارة والرسم والتخطيط بواسطة خط أنابيب العارض ، مع تطبيق التحسينات لتحديث الأجزاء اللازمة فقط. هذا يضمن أداءً عاليًا حتى مع تصورات معقدة ثقيلة البيانات.

• دعم العارض المزدوج : كمحرك عرض مرن ، يدعم Flitter كلاً من SVG و Canvas ، وتلبية متطلبات الرسومات المختلفة. يمكن للمطورين اختيار العارض المناسب حسب الحاجة ، والتبديل بسلاسة بين Vector و Bitmap Graphics.

• تخطيط نموذج المربع : يمكن للمستخدمين بسهولة إنشاء تخطيطات باستخدام نموذج المربع المألوف ، مما يوفر طريقة بديهية لتنظيم واجهة المستخدم المعقدة داخل محرك التقديم.

• التطبيقات المتنوعة : يمكن استخدامها في مختلف المجالات مثل المخططات ، والرسوم البيانية ، وتصور البيانات ، ومحرري الرسوم ، والاستفادة من قوة المحرك الأساسي.

عرض

فيما يلي بعض الأمثلة على ما يمكنك إنشاؤه باستخدام flitter: ERD التفاعلي (مخطط العلاقة بين الكيان) [https://easyrd.dev]

يوضح هذا ERD التفاعلي قدرة Flitter على إنشاء مخططات تفاعلية معقدة. يمكن للمستخدمين معالجة الكيانات وإضافة العلاقات وتصور هياكل قاعدة البيانات في الوقت الفعلي. يسلط هذا العرض الضوء على نقاط القوة في:

إنشاء عناصر مستجيبة وقابلة للتجاهل معالجة تفاعلات المستخدم المعقدة مما يجعل الرسوم البيانية المعقدة مع سهولة التحديثات في الوقت الفعلي بناءً على إدخال المستخدم

دليل التثبيت

يمكن استخدام Flitter في بيئات 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' } ) } )
      } ) }
    />
  </ >
) ;

ممشوق

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

مثال الاستخدام

مثال على إنشاء مخطط بسيط باستخدام 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' } ) } )
            ]
          } )
        } )
      ]
    } ) ;
  }
} 

لماذا فليتر؟

1. محرك تقديم قوي : تكمن قوة Flitter الأساسية في إمكانيات العرض المتقدمة ، مما يتيح التعامل السلس للرسومات والرسوم المتحركة المعقدة.

2. منحنى التعلم السهل : يستخدم بناء الجملة مشابهًا لرفع الرفرفة ، مما يسمح لمطوري الهواتف المحمولة بالتكيف بسهولة مع بيئة الويب مع الاستفادة من محرك تقديم قوي على الويب.

3. الأداء العالي : يضمن خط أنابيب العرض الأمثل أداءً سلسًا حتى مع وجود تصورات معقدة كثيفة البيانات.

4. المرونة : الملخصات معالجة SVG و Canvas ، مما يسمح للمطورين بالتركيز على منطق الأعمال بينما يتعامل محرك العرض مع عمليات الرسم منخفض المستوى.

5. اختيار العارض : يمكن الاختيار بين عارضو SVG و Canvas حسب الحاجة ، وتلبية متطلبات الرسوم المختلفة والسماح بأفضل أداء في سيناريوهات مختلفة.

6. إعادة الاستخدام : يزيد من قابلية إعادة استخدام الكود من خلال نهج قائم على المكون ، والذي تم تمكينه بواسطة بنية تقديم المحرك الأساسي.

المساهمة

Flitter هو مشروع مفتوح المصدر. نرحب بجميع أشكال المساهمات بما في ذلك تقارير الأخطاء ، واقتراحات الميزات ، وطلبات السحب. لمزيد من التفاصيل ، يرجى زيارة Discord

رخصة

يتم توفير flitter تحت رخصة معهد ماساتشوستس للتكنولوجيا.

يتعلم أكثر

للحصول على وثائق وأمثلة مفصلة ، تفضل بزيارة الوثائق الرسمية Flitter.