Update version and docs a bit

Author: TheHorscht

README.md

@@ -5,7 +5,7 @@ You make an XML file that contains your GUI definition, just like single file co
 A root Layout element is mandatory.
 ```xml
 <Layout>
-  <Button @click="a_method('with a string arg')">Click me!</Button>
+  <Button @click="add_button_margin(5)">Click me!</Button>
   <Text forEach="element in collection">{{ element }}</Text>
 </Layout>
 <Style>
@@ -26,9 +26,12 @@ local render_gui = dofile_once("mods/your_mod_id/lib/EZGUI/EZGUI.lua").init("mod
 local data = {
   collection = { "Bloo", "Blaa", "Blee" },
   button_margin = 5,
-  -- Methods defined here can be used in @click, arg1 is the data_context itself, arg2 the element that was clicked, arg3 the first custom arg
-  a_method = function(data, element, arg1)
-    print(arg1)
+  -- Methods defined here can be used in @click, two variables will be available within these functions:
+  -- 'self', refering to the data_context and
+  -- 'element', the element that was clicked on
+  add_button_margin = function(amount)
+    print(element.name .. " was clicked!")
+    self.button_margin = self.button_margin + amount
   end,
 }
 
@@ -42,35 +45,35 @@ I've also managed to make it work in the `settings.lua` by bundling up all the n
 
 # Currently existing Elements:
 ## Layout
-**The** element to handle layouting, can either layout child elements horizontally or vertically.
-Also responsible for rendering a border, if you like.
-- CSS Properties: `direction`
+**The** element to handle layouting, can either layout child elements horizontally or vertically, depending on its CSS property `direction`.
 
 ## Button
-Draws a button with text (probably also Images in the future) that you can click.
+A button with text that you can click and execute functions. The text is determined by it's contents, e.g: `<Button @click="do_something()">Click me!</Button>`
 ### Attributes:
 - `@click`:function a function to call. It uses a primitive lua function parser and therefore only supports a syntax like this: `function_name('a string', 5)`
 
 ## Image
 Render an image.
-### Properties:
+### Attributes:
 - `src`:string - The path to the image file
-
+- `scaleX`:number - Stretch the image on the x axis
+- `scaleY`:number - Stretch the image on the y axis
 ## Slider
 Render a slider.
-### Properties:
+### Attributes:
 - `bind` - The data context variable to bind to
-
+- `min`:number
+- `max`:number
+- `precision`:number - Number of digits to show after the decimal point
 ## Text
 Render some text. Example `<Text>Hello</Text>`
 
 ## Input
 For getting user input. Example `<Input bind="name"></Input>`
-
-### Properties:
+### Attributes:
 - `bind` - The data context variable to bind to
-
-All element support the `padding`, `margin` properties.
+- `max_length`:number - Maximum number of allowed characters
+- `allowed_characters`:string - Example: 0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ
 
 # Styling / Pseudo-CSS
 The framework uses a custom implementation of CSS based solely on my own assumptions on how CSS works. It tries to mimic it without meeting any official specifications. Because it's custom made, it only implements a small subset of selectors and only a handful of properties. There are no IDs, only classes.
@@ -79,11 +82,14 @@ The framework uses a custom implementation of CSS based solely on my own assumpt
 - Class selector: `.classname`
 - Ancestor selector: `Layout Button`
 - Child selector: `Layout > Button`
+- Universal selector: `Layout > *`
 
 And of course you can combine them like: `Layout.classname > Button Text.otherclass`
 
 Margin and padding should work just like the CSS Box Model https://www.w3schools.com/css/css_boxmodel.asp
 
-Except that there's no border except for the Layout element, which has an optional fixed border style and width of 3.
+There are also the CSS properties `width` and `height`, which only take effect if they're bigger than the elements calculated size.
+Can be used to set the size of an element to a specific size, if the size is bigger than it's content, you can use `align_self_horizontal`
+and `align_self_vertical` to align its content, kind of like `text-align` in real CSS, but also vertical.
 
 ![alt text](www/assets/box_model.png "Title")

TODO.md

@@ -1,10 +1,8 @@
-[ ] Text input element
 [ ] Binding to mod settings
 [ ] Extend function bindings by writing their content to a virtual file and dofile that and execute it inside context...?
 [ ] Parse bound data like color = "#FFFFFF" and do it again whenever it changes?...
 [ ] Create github workflow script to zip files and create a release when pushing a new tag
 [ ] Create local script to zip files and create a release when setting a new tag
-[ ] setfenv/metatable magic for @click functions so `self` and `element` is available in the function
 [ ] Layout item wrapping when exceeeding max size
 [ ] support style setting on the element: <Element style="border: false">
 [ ] Caching of data_context access?

changelog.txt

@@ -1,4 +1,7 @@
+v0.2.0:
 - Images now support the @click attribute to basically create an ImageButton
+- Add Input element
+- (Button): Change default style to 'border: true'
 - BREAKING: Methods now automatically have access to 'self' (which is the data_context) and 'element' which is the element it was triggered on
 - FIX: Button padding was no longer included in the click area
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ezgui",
-  "version": "0.1.4",
+  "version": "0.2.0",
   "description": "You make an XML file that contains your GUI definition, just like single file components in Vue.js.\r A root Layout element is mandatory.\r ```xml\r <Layout>\r   <Button @click=\"a_method('with a string arg')\">Click me!</Button>\r   <Text forEach=\"element in collection\">{{ element }}</Text>\r </Layout>\r <Style>\r Layout {\r   direction: vertical;\r   padding: 2;\r }\r Layout > Button {\r   margin: [button_margin]; // Can also databind to CSS properties!\r }\r </Style>\r ```\r Then in your init.lua you can render this GUI:\r ```lua\r -- Dofiling EZGUI.lua returns a table with an init function that you need to call and pass in the path to the library, which in turn will return a render function you can call to render a GUI\r local render_gui = dofile_once(\"mods/your_mod_id/lib/EZGUI/EZGUI.lua\").init(\"mods/your_mod_id/lib/EZGUI\")\r -- This is the data context table, here lives your data that you can bind to\r local data = {\r   collection = { \"Bloo\", \"Blaa\", \"Blee\" },\r   button_margin = 5,\r   -- Methods defined here can be used in @click, arg1 is the data_context itself, arg2 the element that was clicked, arg3 the first custom arg\r   a_method = function(data, element, arg1)\r     print(arg1)\r   end,\r }",
   "main": "build.js",
   "directories": {

www/elementData.js

@@ -1,6 +1,7 @@
 const bool = typeof true;
 const string = typeof "";
 const number = typeof 0;
+const func = "function";
 const loop_expression = "loop expression";
 const color = "RGB(A) Hex Color #FFFFFF(FF)";
 const direction = "horizontal | vertical";
@@ -36,31 +37,76 @@ local data_context = {
     },
     {
       name: "Layout",
-      description: "Responsible for positioning items, either horizontally or vertically (set by the CSS property ^direction)",
+      description: "Responsible for positioning items, either horizontally or vertically (set by the CSS property ^direction).",
       attributes: [{
         name: "debug",
         values: [
           [bool]
         ],
-        description: "Renders a debug overlay for padding and content"
+        description: "Renders a debug overlay for padding and content."
       }]
     },
     {
       name: "Button",
-      description: "Despite it's name it only supports text right now.",
+      attributes: [{
+        name: "@click",
+        values: [ [func] ],
+      }],
+      description: "A text button. Its padding will be included in the clickable area.",
     },
     {
       name: "Image",
-      description: "Can you guess what this does?",
+      attributes: [{
+        name: "scaleX",
+        values: [ [number] ],
+      },{
+        name: "scaleY",
+        values: [ [number] ],
+      },
+      {
+        name: "@click",
+        values: [ [func] ],
+      }],
+      description: "Renders an image. You can scale it using scaleX and scaleY attributes and add an @click listener to use it as an ImageButton.",
     },
     {
       name: "Slider",
-      description: "I think you know what a slider is.",
+      attributes: [{
+        name: "min",
+        values: [ [number] ],
+      },{
+        name: "max",
+        values: [ [number] ],
+      },
+      {
+        name: "precision",
+        values: [ [number] ],
+        description: "Number of digits to show after the decimal point."
+      }],
+      description: "A slider :)",
     },
     {
       name: "Text",
       description: "Self explanatory, really.",
     },
+    {
+      name: "Input",
+      description: "An input element for entering text, is kinda buggy but there's nothing I can do about that, it's part of the Noita GUI API.",
+      attributes: [{
+        name: "max_length",
+        values: [
+          [number]
+        ],
+        description: "Maximum number of allowed characters"
+      },
+      {
+        name: "allowed_characters",
+        values: [
+          [string]
+        ],
+        description: "Example: 0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ"
+      }]
+    },
   ],
   // CSS Properties
   cssProperties: [
@@ -97,7 +143,7 @@ local data_context = {
       values: [
         { types: [bool] },
       ],
-      description: "Toggles border rendering for certain elements like ^Layout and ^Button.",
+      description: "Renders a border around an element.",
     },
     {
       name: "color",