{"id":15529951,"url":"https://github.com/endlesstravel/rockyfi","last_synced_at":"2025-04-23T12:58:27.286Z","repository":{"id":143423618,"uuid":"169187381","full_name":"endlesstravel/Rockyfi","owner":"endlesstravel","description":"C# CSS flexbox implement, and more... . Adapt from https://github.com/kjk/flex","archived":false,"fork":false,"pushed_at":"2020-08-01T09:40:26.000Z","size":1194,"stargazers_count":19,"open_issues_count":1,"forks_count":3,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-23T12:58:20.643Z","etag":null,"topics":["flex","flexlayout","render"],"latest_commit_sha":null,"homepage":"","language":"C#","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/endlesstravel.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-02-05T03:53:50.000Z","updated_at":"2025-03-13T09:38:45.000Z","dependencies_parsed_at":null,"dependency_job_id":"36509d2c-d7f3-4462-bd3d-7f2ccdd31871","html_url":"https://github.com/endlesstravel/Rockyfi","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/endlesstravel%2FRockyfi","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/endlesstravel%2FRockyfi/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/endlesstravel%2FRockyfi/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/endlesstravel%2FRockyfi/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/endlesstravel","download_url":"https://codeload.github.com/endlesstravel/Rockyfi/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250439282,"owners_count":21430822,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["flex","flexlayout","render"],"created_at":"2024-10-02T11:20:34.904Z","updated_at":"2025-04-23T12:58:27.266Z","avatar_url":"https://github.com/endlesstravel.png","language":"C#","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![Build Status](https://travis-ci.com/endlesstravel/Rockyfi.svg?token=yUNRDJncmqWFxcbyT2R9\u0026branch=master)](https://travis-ci.com/endlesstravel/Rockyfi)\n\n# Rockyfi\n\nC# implementation of [flexbox CSS](https://www.w3.org/TR/css-flexbox-1/) layout algorithm. Adapt from https://github.com/kjk/flex\n\nThanks [kjk/flex](https://github.com/kjk/flex), there is no such project without him.\n\nNuget Package [Rockyfi](https://www.nuget.org/packages/Rockyfi/) :\n\n `Install-Package Rockyfi`\n\n## Status\n\n* The implementation of flexlayout has been completed, all the test is passed.\n* Support render XML to Flex Node tree is still on the way.\n* Support [Love2dCS](https://github.com/endlesstravel/Love2dCS) is on the way.\n* Unity3d support is a long-term goal.\n\n## Usage\n\nmore example please check [test file](RockyfiTests/Rockyfi.test.cs)\n\n\n```C#\nvar root = Flex.CreateDefaultNode();\nroot.StyleSetWidth(100);\nroot.StyleSetHeight(100);\n\nvar rootChild0 = Flex.CreateDefaultNode();\nrootChild0.StyleSetPositionType(PositionType.Absolute);\nrootChild0.StyleSetPosition(Edge.Start, 10);\nrootChild0.StyleSetPosition(Edge.Top, 10);\nrootChild0.StyleSetWidth(10);\nrootChild0.StyleSetHeight(10);\nroot.InsertChild(rootChild0, 0);\nFlex.CalculateLayout(root, float.NaN, float.NaN, Direction.LTR);\n\nassertFloatEqual(0, root.LayoutGetLeft());\nassertFloatEqual(0, root.LayoutGetTop());\nassertFloatEqual(100, root.LayoutGetWidth());\nassertFloatEqual(100, root.LayoutGetHeight());\n\nassertFloatEqual(10, rootChild0.LayoutGetLeft());\nassertFloatEqual(10, rootChild0.LayoutGetTop());\nassertFloatEqual(10, rootChild0.LayoutGetWidth());\nassertFloatEqual(10, rootChild0.LayoutGetHeight());\n\nConsole.WriteLine(NodePrinter.PrintToString(root));\n```\noutput is:\n\n```html\n\u003cdiv layout=\"width: 100; height: 100; top: 0; left: 0;\" style=\"width: 100px; height: 100px; \"\u003e\n  \u003cdiv layout=\"width: 10; height: 10; top: 10; left: 10;\" style=\"width: 10px; height: 10px; position: absolute; top: 10px; \"\u003e\u003c/div\u003e\n\u003c/div\u003e\n```\n\n## ShadowPlay Usage (beta?)\n\n\nThis is an example about [Love2dCS](https://github.com/endlesstravel/Love2dCS) support.\n\n![](example.gif)\n\n```C#\nusing System;\nusing System.Collections.Generic;\nusing System.Linq;\nusing System.Text;\nusing System.Threading.Tasks;\n\nusing Love;\nusing Love.Misc;\nusing Rockyfi;\nusing LoveBridge;\n\nnamespace Test\n{\n    public class Example01_ElementController : ElementController\n    {\n        public Example01_ElementController(string tagName) : base(tagName)\n        {\n        }\n\n        public override void Draw()\n        {\n            var rect = Rect;\n\n            Graphics.SetColor(fgColor);\n            Graphics.Print(TagName + Text, rect.X, rect.Y);\n            Graphics.Rectangle(DrawMode.Line, rect);\n            Graphics.SetColor(Color.White);\n        }\n\n        Color fgColor = Color.White;\n\n        public override void UpdateInputHoverVisible()\n        {\n\n            if (Mouse.IsReleased(Mouse.LeftButton))\n            {\n                Console.WriteLine(\"click me !\" + this);\n            }\n        }\n\n        public override void UpdateInputHover()\n        {\n            fgColor = Color.Red;\n        }\n\n        public override void UpdateInputNotHover()\n        {\n            fgColor = Color.White;\n        }\n\n        public override void UpdateInputHoverEnter()\n        {\n        }\n\n        public override void UpdateInputHoverLeave()\n        {\n        }\n\n        public override void UpdateInputAutoNavigation()\n        {\n            fgColor = Color.Green;\n        }\n    }\n\n\n    public class Example01_LayoutController : LayoutController\n    {\n        public override ElementController CreateElement(string tagName, Dictionary\u003cstring, object\u003e attr)\n        {\n            return new Example01_ElementController(tagName);\n        }\n\n        public override Dictionary\u003cstring, object\u003e DefineInitialData()\n        {\n            return new Dictionary\u003cstring, object\u003e\n            {\n                {\"w\", 0 },\n                {\"h\", 0 },\n                {\"pd\", 0.01f },\n                {\"listData\", new int[]{ } },\n            };\n        }\n\n        public override string DefineLayoutDocument()\n        {\n            return @\"\n\u003croot\n\n    el-bind:width='w * (1 - pd*2)' el-bind:height='h * (1 - pd*2)'\n    el-bind:margin-left='w * pd'  el-bind:margin-right='w * pd'\n    el-bind:margin-top='h * pd'  el-bind:margin-bottom='h * pd'\n    flex-wrap='wrap' flex-direction='row'\n    overflow='scroll'\n\n\u003e\n    \u003cdiv width='250px' height='150px' position='absolute' \u003e absolute \u003c/div\u003e\n    \u003cdiv autoNavigation='true' el-for='itemId in listData' width='150px' height='100px' el-bind:id='itemId'  margin='100' \u003e {{itemId}} \u003c/div\u003e\n\u003c/root\u003e\n\";\n\n            return Encoding.UTF8.GetString(Resource.Read(\"ui_xml/test.xml\"));\n        }\n\n        public override void Update()\n        {\n            SetData(\"w\", Graphics.GetWidth());\n            SetData(\"h\", Graphics.GetHeight());\n\n            SetData(\"listData\", new List\u003cstring\u003e\n            {\n                \"child-0\", \"child-1\", \"child-2\", \"child-3\", \"child-4\",\n            });\n\n            base.Update();\n        }\n\n\n    }\n\n    public class RockyTest01 : Scene\n    {\n        Example01_LayoutController rtlc = new Example01_LayoutController();\n\n        public override void Update(float dt)\n        {\n            base.Update(dt);\n            rtlc.Update();\n        }\n\n        public override void Draw()\n        {\n            base.Draw();\n            rtlc.Draw();\n        }\n    }\n}\n```\nsupport props, most attributes are covered in this [Guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)\n\n| name                  |default     |  example             |\n----------------------- |------------|-----------------------\n| overflow              | visible    |  visible / hidden / scroll |\n| position              | relative   |  relative / absolute            |\n| align-content         | auto       |  auto / flex-start / center / flex-end / stretch / baseline / space-between / space-around       |\n| align-items           | auto       |  auto / flex-start / center / flex-end / stretch / baseline / space-between / space-around       |\n| align-self            | auto       |  auto / flex-start / center / flex-end / stretch / baseline / space-between / space-around       |\n| flex-direction        | column     |  column / column-reverse / row / row-reverse |\n| flex-wrap             | no-wrap    |  no-wrap / wrap / wrap-reverse                    |\n| flex-basis            | auto       |  15px / 30%          |\n| flex                  | auto       |  5 / -3.2            |\n| flex-shrink           | auto       |  5 / -3.2            |\n| flex-grow             | auto       |  5 / -3.2            |\n| justify-content       | flex-start |  flex-start / center / flex-end / space-between / space-around                    |\n| direction             | inherit    |  inherit / ltr / rtl                    |\n| width                 | auto       |  10 / 15px / 30% / auto         |\n| height                | auto       |  10 / 15px / 30% / auto         |\n| min-width             | auto       |  10 / 15px / 30% / auto         |\n| min-height            | auto       |  10 / 15px / 30% / auto         |\n| max-width             | auto       |  10 / 15px / 30% / auto         |\n| max-height            | auto       |  10 / 15px / 30% / auto         |\n| pos                   | auto       |  10 / 1px / 1px 2px 3px 4px / 2px 3px  / auto  |\n| pos-left              | auto       |  10 / 15px / auto          |\n| pos-right             | auto       |  10 / 15px / auto          |\n| pos-top               | auto       |  10 / 15px / auto          |\n| pos-bottom            | auto       |  10 / 15px / auto          |\n| margin                | auto       |  10 / 1px / 1px 2px 3px 4px / 2px 3px  / auto   |\n| margin-left           | auto       |  10 / 15px / auto          |\n| margin-right          | auto       |  10 / 15px / auto          |\n| margin-top            | auto       |  10 / 15px / auto          |\n| margin-bottom         | auto       |  10 / 15px / auto          |\n| padding               | auto       |  10 / 1px / 1px 2px 3px 4px / 2px 3px / auto   |\n| padding-left          | auto       |  10 / 15px / auto          |\n| padding-right         | auto       |  10 / 15px / auto          |\n| padding-top           | auto       |  10 / 15px / auto          |\n| padding-bottom        | auto       |  10 / 15px / auto          |\n| border                | auto       |  10 / 1px / 1px 2px 3px 4px / 2px 3px / auto   |\n| border-left           | auto       |  10 / 15px / auto           |\n| border-right          | auto       |  10 / 15px / auto           |\n| border-top            | auto       |  10 / 15px / auto           |\n| border-bottom         | auto       |  10 / 15px / auto           |\n\u003c!-- | display               |  flex / none                 | --\u003e\n\n\nThis `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)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fendlesstravel%2Frockyfi","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fendlesstravel%2Frockyfi","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fendlesstravel%2Frockyfi/lists"}