Rockyfi

C# implementation of flexbox CSS layout algorithm. Adapt from https://github.com/kjk/flex

Thanks kjk/flex, there is no such project without him.

Nuget Package 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 is on the way.
Unity3d support is a long-term goal.

Usage

more example please check test file

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:

<div layout="width: 100; height: 100; top: 0; left: 0;" style="width: 100px; height: 100px; ">
  <div layout="width: 10; height: 10; top: 10; left: 10;" style="width: 10px; height: 10px; position: absolute; top: 10px; "></div>
</div>

ShadowPlay Usage (beta?)

This is an example about Love2dCS support.

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<string, object> attr)
        {
            return new Example01_ElementController(tagName);
        }

        public override Dictionary<string, object> DefineInitialData()
        {
            return new Dictionary<string, object>
            {
                {"w", 0 },
                {"h", 0 },
                {"pd", 0.01f },
                {"listData", new int[]{ } },
            };
        }

        public override string DefineLayoutDocument()
        {
            return @"
<root

    el-bind:width='w * (1 - pd*2)' el-bind:height='h * (1 - pd*2)'
    el-bind:margin-left='w * pd'  el-bind:margin-right='w * pd'
    el-bind:margin-top='h * pd'  el-bind:margin-bottom='h * pd'
    flex-wrap='wrap' flex-direction='row'
    overflow='scroll'

>
    <div width='250px' height='150px' position='absolute' > absolute </div>
    <div autoNavigation='true' el-for='itemId in listData' width='150px' height='100px' el-bind:id='itemId'  margin='100' > {{itemId}} </div>
</root>
";

            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<string>
            {
                "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

| 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 but Shadow Play

Rockyfi

Install / Use

README

Rockyfi

Status

Usage

ShadowPlay Usage (beta?)