https://github.com/endlesstravel/rockyfi
C# CSS flexbox implement, and more... . Adapt from https://github.com/kjk/flex
https://github.com/endlesstravel/rockyfi
flex flexlayout render
Last synced: 11 months ago
JSON representation
C# CSS flexbox implement, and more... . Adapt from https://github.com/kjk/flex
- Host: GitHub
- URL: https://github.com/endlesstravel/rockyfi
- Owner: endlesstravel
- License: other
- Created: 2019-02-05T03:53:50.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2020-08-01T09:40:26.000Z (over 5 years ago)
- Last Synced: 2025-04-23T12:58:20.643Z (11 months ago)
- Topics: flex, flexlayout, render
- Language: C#
- Homepage:
- Size: 1.14 MB
- Stars: 19
- Watchers: 4
- Forks: 3
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://travis-ci.com/endlesstravel/Rockyfi)
# Rockyfi
C# implementation of [flexbox CSS](https://www.w3.org/TR/css-flexbox-1/) layout algorithm. Adapt from https://github.com/kjk/flex
Thanks [kjk/flex](https://github.com/kjk/flex), there is no such project without him.
Nuget Package [Rockyfi](https://www.nuget.org/packages/Rockyfi/) :
`Install-Package Rockyfi`
## Status
* The implementation of flexlayout has been completed, all the test is passed.
* Support render XML to Flex Node tree is still on the way.
* Support [Love2dCS](https://github.com/endlesstravel/Love2dCS) is on the way.
* Unity3d support is a long-term goal.
## Usage
more example please check [test file](RockyfiTests/Rockyfi.test.cs)
```C#
var root = Flex.CreateDefaultNode();
root.StyleSetWidth(100);
root.StyleSetHeight(100);
var rootChild0 = Flex.CreateDefaultNode();
rootChild0.StyleSetPositionType(PositionType.Absolute);
rootChild0.StyleSetPosition(Edge.Start, 10);
rootChild0.StyleSetPosition(Edge.Top, 10);
rootChild0.StyleSetWidth(10);
rootChild0.StyleSetHeight(10);
root.InsertChild(rootChild0, 0);
Flex.CalculateLayout(root, float.NaN, float.NaN, Direction.LTR);
assertFloatEqual(0, root.LayoutGetLeft());
assertFloatEqual(0, root.LayoutGetTop());
assertFloatEqual(100, root.LayoutGetWidth());
assertFloatEqual(100, root.LayoutGetHeight());
assertFloatEqual(10, rootChild0.LayoutGetLeft());
assertFloatEqual(10, rootChild0.LayoutGetTop());
assertFloatEqual(10, rootChild0.LayoutGetWidth());
assertFloatEqual(10, rootChild0.LayoutGetHeight());
Console.WriteLine(NodePrinter.PrintToString(root));
```
output is:
```html
```
## ShadowPlay Usage (beta?)
This is an example about [Love2dCS](https://github.com/endlesstravel/Love2dCS) support.
```C#
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Love;
using Love.Misc;
using Rockyfi;
using LoveBridge;
namespace Test
{
public class Example01_ElementController : ElementController
{
public Example01_ElementController(string tagName) : base(tagName)
{
}
public override void Draw()
{
var rect = Rect;
Graphics.SetColor(fgColor);
Graphics.Print(TagName + Text, rect.X, rect.Y);
Graphics.Rectangle(DrawMode.Line, rect);
Graphics.SetColor(Color.White);
}
Color fgColor = Color.White;
public override void UpdateInputHoverVisible()
{
if (Mouse.IsReleased(Mouse.LeftButton))
{
Console.WriteLine("click me !" + this);
}
}
public override void UpdateInputHover()
{
fgColor = Color.Red;
}
public override void UpdateInputNotHover()
{
fgColor = Color.White;
}
public override void UpdateInputHoverEnter()
{
}
public override void UpdateInputHoverLeave()
{
}
public override void UpdateInputAutoNavigation()
{
fgColor = Color.Green;
}
}
public class Example01_LayoutController : LayoutController
{
public override ElementController CreateElement(string tagName, Dictionary attr)
{
return new Example01_ElementController(tagName);
}
public override Dictionary DefineInitialData()
{
return new Dictionary
{
{"w", 0 },
{"h", 0 },
{"pd", 0.01f },
{"listData", new int[]{ } },
};
}
public override string DefineLayoutDocument()
{
return @"
absolute
{{itemId}}
";
return Encoding.UTF8.GetString(Resource.Read("ui_xml/test.xml"));
}
public override void Update()
{
SetData("w", Graphics.GetWidth());
SetData("h", Graphics.GetHeight());
SetData("listData", new List
{
"child-0", "child-1", "child-2", "child-3", "child-4",
});
base.Update();
}
}
public class RockyTest01 : Scene
{
Example01_LayoutController rtlc = new Example01_LayoutController();
public override void Update(float dt)
{
base.Update(dt);
rtlc.Update();
}
public override void Draw()
{
base.Draw();
rtlc.Draw();
}
}
}
```
support props, most attributes are covered in this [Guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
| name |default | example |
----------------------- |------------|-----------------------
| overflow | visible | visible / hidden / scroll |
| position | relative | relative / absolute |
| align-content | auto | auto / flex-start / center / flex-end / stretch / baseline / space-between / space-around |
| align-items | auto | auto / flex-start / center / flex-end / stretch / baseline / space-between / space-around |
| align-self | auto | auto / flex-start / center / flex-end / stretch / baseline / space-between / space-around |
| flex-direction | column | column / column-reverse / row / row-reverse |
| flex-wrap | no-wrap | no-wrap / wrap / wrap-reverse |
| flex-basis | auto | 15px / 30% |
| flex | auto | 5 / -3.2 |
| flex-shrink | auto | 5 / -3.2 |
| flex-grow | auto | 5 / -3.2 |
| justify-content | flex-start | flex-start / center / flex-end / space-between / space-around |
| direction | inherit | inherit / ltr / rtl |
| width | auto | 10 / 15px / 30% / auto |
| height | auto | 10 / 15px / 30% / auto |
| min-width | auto | 10 / 15px / 30% / auto |
| min-height | auto | 10 / 15px / 30% / auto |
| max-width | auto | 10 / 15px / 30% / auto |
| max-height | auto | 10 / 15px / 30% / auto |
| pos | auto | 10 / 1px / 1px 2px 3px 4px / 2px 3px / auto |
| pos-left | auto | 10 / 15px / auto |
| pos-right | auto | 10 / 15px / auto |
| pos-top | auto | 10 / 15px / auto |
| pos-bottom | auto | 10 / 15px / auto |
| margin | auto | 10 / 1px / 1px 2px 3px 4px / 2px 3px / auto |
| margin-left | auto | 10 / 15px / auto |
| margin-right | auto | 10 / 15px / auto |
| margin-top | auto | 10 / 15px / auto |
| margin-bottom | auto | 10 / 15px / auto |
| padding | auto | 10 / 1px / 1px 2px 3px 4px / 2px 3px / auto |
| padding-left | auto | 10 / 15px / auto |
| padding-right | auto | 10 / 15px / auto |
| padding-top | auto | 10 / 15px / auto |
| padding-bottom | auto | 10 / 15px / auto |
| border | auto | 10 / 1px / 1px 2px 3px 4px / 2px 3px / auto |
| border-left | auto | 10 / 15px / auto |
| border-right | auto | 10 / 15px / auto |
| border-top | auto | 10 / 15px / auto |
| border-bottom | auto | 10 / 15px / auto |
This `shadow play` is not mean [Shadow Play](https://www.nvidia.com/en-us/geforce/geforce-experience/shadowplay/) but [Shadow Play](https://en.wikipedia.org/wiki/Shadow_play)