скачать flitter - скачать исходный код flitter

Флиттер

Flitter-это мощный двигатель рендеринга JavaScript и структура, вдохновленная Flutter, поддерживающая как SVG, так и Canvas для создания высокопроизводительной графики и пользовательских интерфейсов. В качестве двигателя рендеринга он обеспечивает мелкозернистый контроль над процессом рендеринга, позволяя разработчикам с легкостью создавать сложные интерактивные визуализации. Он предназначен для эффективной реализации данных, интерактивных диаграмм, диаграмм и графических редакторов в веб -приложениях.

Ключевые функции

Advanced Rendering Engine : По своей сути Flitter - это сложный двигатель рендеринга, который дает разработчикам точный контроль над тем, как элементы рисуются и обновляются на экране.
Дерево объекта рендеринга : Flitter использует дерево объектов рендеринга для эффективного рендеринга, позволяя легко управлять и манипулировать сложными макетами. Этот подход на основе дерева, центральный в двигателе рендеринга Flitter, позволяет оптимизированным обновлениям и перерывам.
Декларативное программирование : после декларативной парадигмы экран автоматически обновляется, когда значения изменяются, упрощая управление состоянием приложения и уменьшая сложность ручной манипуляции с DOM.
Оптимизированный конвейер рендеринга : повторное использование, покраска и перечисление макетов управляется трубопроводом рендеринга, с оптимизацией, применяемыми для обновления только необходимых деталей. Это обеспечивает высокую производительность даже при сложных, тяжелых данных визуализации.
Поддержка двойного рендеринга : как гибкий двигатель рендеринга, Flitter поддерживает как SVG, так и холст, отвечая различным графическим требованиям. Разработчики могут выбрать соответствующий рендеринг по мере необходимости, плавно переключаясь между вектором и растровой графикой.
Макет модели коробки : Пользователи могут легко сочинять макеты, используя модель знакомой коробки, обеспечивая интуитивно понятный способ структурирования сложных интерфейсов интерфейса в двигателе рендеринга.
Разнообразные приложения : могут использоваться в различных областях, таких как диаграммы, диаграммы, визуализация данных и графические редакторы, используя мощность базового двигателя рендеринга.

Витрина

Вот несколько примеров того, что вы можете создать с помощью Flitter: Interactive ERD (диаграмма рецидивов объектов) [https://easyrd.dev]

Этот интерактивный 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' } ) } )
      } ) }
    />
  </ >
) ;

Стройный

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

Почему Флитер?

Мощный двигатель рендеринга : основная сила Flitter заключается в его расширенных возможностях рендеринга, что позволяет плавно обрабатывать сложную графику и анимацию.
Простая кривая обучения : использует синтаксис, аналогичный Flutter, позволяя разработчикам мобильных устройств легко адаптироваться к веб-среде, используя при этом мощный веб-рендеринг.
Высокая производительность : оптимизированный конвейер рендеринга обеспечивает плавную производительность даже при сложных, интенсивных данных визуализации.
Гибкость : рефераты SVG и манипуляции с холстом, позволяющие разработчикам сосредоточиться на бизнес-логике, в то время как двигатель рендеринга обрабатывает операции рисования низкого уровня.
Выбор визуализатора : может выбрать между рендерингами SVG и холста по мере необходимости, удовлетворяя различные графические требования и обеспечивая наилучшие результаты в разных сценариях.
Способность повторного использования : увеличивает повторную способность кода с помощью подхода на основе компонентов, обеспечиваемого архитектурой базового рендеринга.

Внося

Flitter-это проект с открытым исходным кодом. Мы приветствуем все формы вкладов, включая отчеты об ошибках, предложения по функциям и запросы на привлечение. Для получения более подробной информации, пожалуйста, посетите Discord