-
Notifications
You must be signed in to change notification settings - Fork 11
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* code sendbox 추가 * reactive * layout * monaco reactive layout * 얼개 잡음 * 얼개 * gogo * auto refresh not on app.js * 중간 저장 * stack positioned * good * asdf
- Loading branch information
1 parent
7faf6a2
commit 8d94492
Showing
28 changed files
with
1,401 additions
and
43 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -11,3 +11,6 @@ package | |
| /playwright-report/ | ||
| /blob-report/ | ||
| /playwright/.cache/ | ||
| packages/*/dist/ | ||
| packages/*/package/ | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,60 @@ | ||
| --- | ||
| category: How to start | ||
| title: "Introduction" | ||
| files: | ||
| App.js: | | ||
| import { useEffect, useRef } from "react"; | ||
| import { | ||
| Alignment, | ||
| AppRunner, | ||
| Container, | ||
| Text, | ||
| } from "@meursyphus/flitter"; | ||
| export default function App() { | ||
| let runner | ||
| const svgRef = useRef(null); | ||
| const widget = Container({ | ||
| width: Infinity, | ||
| height: Infinity, | ||
| alignment: Alignment.center, | ||
| color: "red", | ||
| child: Text("Hello World") | ||
| }); | ||
| useEffect(() => { | ||
| runner = new AppRunner({ | ||
| view: svgRef.current | ||
| }); | ||
| runner.onMount({ | ||
| resizeTarget: svgRef.current | ||
| }); | ||
| runner.runApp(widget); | ||
| return () => { | ||
| runner.dispose(); | ||
| }; | ||
| }, []); | ||
| return ( | ||
| <svg style={{ width: "200px", height: "200px" }} ref={svgRef} /> | ||
| ); | ||
| } | ||
| --- | ||
|
|
||
| # Introduction | ||
|
|
||
| ```bash | ||
| npm install @meursyphus/flitter | ||
| ``` | ||
|
|
||
| This example demonstrates how to render widgets using the `AppRunner` class. `AppRunner` is initialized with an SVG element as the `view` property, which is referenced through React's `useRef`. The widget is created using the `Container` function, which includes a `Text` widget as a child. | ||
|
|
||
| Within the `useEffect` hook, an `AppRunner` instance is created, and a resize event is set up through the `onMount` method. Afterwards, the `runApp` method is called to render the widget. When the component unmounts, the `dispose` method is called to clean up resources. | ||
|
|
||
| Through this process, the widget defined within the SVG element is rendered, and the layout is automatically updated according to screen size adjustments. This is handled by the `AppRunner`'s `handleViewResize` method. | ||
|
|
||
| Using the `@meursyphus/flitter` library in this way allows for declarative and reactive data visualization without complex DOM manipulation. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| --- | ||
| category: How to start | ||
| title: Flitter-React | ||
| files: | ||
| App.js: | | ||
| import {Text,Container,Alignment} from '@meursyphus/flitter' | ||
| import Widget from '@meursyphus/flitter-react' | ||
| export default function App() { | ||
| return ( | ||
| <Widget | ||
| height="200px" | ||
| width="200px" | ||
| /* | ||
| The renderer can be set to either "svg" or "canvas". | ||
| The default is "svg". | ||
| */ | ||
| // renderer="canvas" | ||
| widget={ | ||
| Container({ | ||
| width: Infinity, | ||
| height: Infinity, | ||
| alignment: Alignment.center, | ||
| color: "red", | ||
| child: Text("Hello World") | ||
| }) | ||
| } | ||
| /> | ||
| ); | ||
| } | ||
| --- | ||
|
|
||
| # Flitter-React | ||
|
|
||
| Flitter-React is a library that facilitates the easy use of Flitter widgets in a React environment. | ||
| Through this, developers can integrate Flitter's widgets into their React projects without complex configurations. | ||
| The example below demonstrates how to implement a simple widget as a React component using Flitter-React. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,67 @@ | ||
| --- | ||
| category: Basic | ||
| title: Container Text | ||
| files: | ||
| App.js: | | ||
| import { | ||
| Text, | ||
| Container, | ||
| Alignment, | ||
| EdgesInset, | ||
| Border, | ||
| BoxDecoration, | ||
| BorderRadius, | ||
| TextStyle | ||
| } from '@meursyphus/flitter' | ||
| import Widget from '@meursyphus/flitter-react' | ||
| export default function App() { | ||
| return ( | ||
| <Widget | ||
| height="400px" | ||
| width="100%" | ||
| /* | ||
| The renderer can be set to either "svg" or "canvas". | ||
| The default is "svg". | ||
| */ | ||
| // renderer="canvas" | ||
| widget={ | ||
| Container({ | ||
| alignment: Alignment.center, | ||
| decoration: new BoxDecoration({ | ||
| border: Border.all({color: "black", width: 3}), | ||
| borderRadius: BorderRadius.circular(10), | ||
| color: "yellow" | ||
| }), | ||
| child: Text("Hello World", { | ||
| style: new TextStyle({ | ||
| color: "blue", | ||
| fontSize: 30 | ||
| }) | ||
| }) | ||
| }) | ||
| } | ||
| /> | ||
| ); | ||
| } | ||
| --- | ||
|
|
||
| # Container Text | ||
|
|
||
| The descriptions of each prop used in this example are as follows: | ||
|
|
||
| `Container` widget props: | ||
|
|
||
| - `alignment`: Sets the alignment of child elements within the container. `Alignment.center` positions the child elements at the center. | ||
| - `decoration`: Defines the style of the container. `BoxDecoration` is used to set the background color, border, and the style of the border's edges. | ||
| - `border`: `Border.all` is used to apply a border to all sides. The color is "black", and the width is 3px. | ||
| - `borderRadius`: `BorderRadius.circular(10)` is used to round the edges. The value in the parentheses represents the radius of the corners. | ||
| - `color`: Sets the background color. In this example, it is set to "yellow". | ||
|
|
||
| `Text` widget props: | ||
|
|
||
| - `style`: Defines the style of the text. `TextStyle` is used to set the text color and font size. | ||
| - `color`: Sets the color of the text. In this example, it is set to "blue". | ||
| - `fontSize`: Sets the size of the text. In this example, it is set to 30. | ||
|
|
||
| These settings allow users to freely adjust the appearance and layout of the widget. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,107 @@ | ||
| --- | ||
| category: Basic | ||
| title: Container Text | ||
| files: | ||
| App.js: | | ||
| import { | ||
| Column, | ||
| Row, | ||
| Container, | ||
| Text, | ||
| Alignment, | ||
| Flexible, | ||
| CrossAxisAlignment, | ||
| MainAxisAlignment, | ||
| SizedBox | ||
| } from '@meursyphus/flitter'; | ||
| import Widget from '@meursyphus/flitter-react'; | ||
| export default function App() { | ||
| return ( | ||
| <Widget | ||
| height="400px" | ||
| width="100%" | ||
| widget={ | ||
| Column({ | ||
| mainAxisAlignment: MainAxisAlignment.spaceBetween, | ||
| children: [ | ||
| Row({ | ||
| mainAxisAlignment: MainAxisAlignment.spaceBetween, | ||
| children: [ | ||
| Container({ | ||
| width: 200, | ||
| height: 100, | ||
| color: 'red', | ||
| alignment: Alignment.center, | ||
| child: Text("Row 1, Column 1") | ||
| }), | ||
| Container({ | ||
| width: 200, | ||
| height: 100, | ||
| color: 'blue', | ||
| alignment: Alignment.center, | ||
| child: Text("Row 1, Column 2") | ||
| }) | ||
| ] | ||
| }), | ||
| Row({ | ||
| children: [ | ||
| Flexible({ | ||
| flex: 1, | ||
| child: Container({ | ||
| height: 100, | ||
| alignment: Alignment.center, | ||
| color: 'green', | ||
| child: Text("Row 2, Column 1") | ||
| }) | ||
| }), | ||
| SizedBox({ | ||
| width: 100, | ||
| }), | ||
| Flexible({ | ||
| flex: 2, | ||
| child: Container({ | ||
| height: 100, | ||
| alignment: Alignment.center, | ||
| color: 'purple', | ||
| child: Text("Row 2, Column 1") | ||
| }) | ||
| }), | ||
| ] | ||
| }) | ||
| ] | ||
| }) | ||
| } | ||
| /> | ||
| ); | ||
| } | ||
| --- | ||
|
|
||
| # Column Row | ||
|
|
||
| The descriptions of each prop used in this example are as follows: | ||
| `Row` and `Container` widget prop descriptions: | ||
|
|
||
| `Row` widget props: | ||
|
|
||
| - `children`: This array defines the child widgets that will be included within the `Row`. Each child can be a `Flexible` widget. | ||
| - `mainAxis`: Defines the main axis of the `Row` widget, along which the child widgets will be arranged. It is horizontal by default. | ||
| - `crossAxis`: Defines the cross axis of the `Row` widget, determining how the child widgets will be aligned along this axis. For example, `crossAxisAlignment: CrossAxisAlignment.center` positions the children at the center of the cross axis. | ||
|
|
||
| `Column` widget props: | ||
|
|
||
| - `children`: This array defines the child widgets that will be included within the `Column`. Each child can be a `Flexible` widget. | ||
| - `mainAxis`: Defines the main axis of the `Column` widget, along which the child widgets will be arranged. It is vertical by default. | ||
| - `crossAxis`: Defines the cross axis of the `Column` widget, determining how the child widgets will be aligned along this axis. For example, `crossAxisAlignment: CrossAxisAlignment.center` positions the children at the center of the cross axis. | ||
|
|
||
| `Flexible` widget props: | ||
|
|
||
| - `flex`: Defines the proportion of space this widget will occupy within the `Row`. For example, `flex: 1` indicates a size relative to other `flex` values. | ||
| - `child`: The child element to be included within the `Flexible`, typically a `Container`. | ||
|
|
||
| Layout description: | ||
|
|
||
| - The first `Row` contains two `Container` children, each with a background color of red and blue respectively, and dimensions of 200x100. | ||
| - The second `Row` uses `Flexible` widgets to provide a flexible layout. The first `Flexible` has a `flex: 1` value, and the second has a `flex: 2` value. This means the second container occupies twice the space of the first. Each contains a container with heights of 100 and backgrounds of green and purple respectively. | ||
|
|
||
| This configuration allows users to flexibly arrange containers of various sizes and colors, and easily adjust text alignment. |
Oops, something went wrong.