added support for multiple text boxes and backspace

examples/text-input/App.jsx

@@ -2,9 +2,12 @@ const React = require('react');
 
 exports.App = () => {
     const [name, setName] = React.useState("");
+    const [age, setAge] = React.useState("");
 
     return <div>
         <label>Hello {name != "" ? name : "World"}</label>
-        <input value={name} onChange={e => setName(e.target.value)} placeholder='Input Text' />
+        <input id="name" value={name} onChange={e => setName(e.target.value)} placeholder="Please Input Text" />
+        <label>Enter your Age</label>
+        <input id="age" value={age} onChange={e => setAge(e.target.value)} />
     </div>;
 };

examples/text-input/native.jsx

@@ -2,4 +2,5 @@ const React = require('react');
 const murayact = require('murayact');
 const { App } = require('./App.js');
 
+murayact.initWindow(1440, 800);
 murayact.render(<App />);

packages/muray/muray.cpp

@@ -2,16 +2,88 @@
 #ifdef __LINUX__
 #include <print>
 #endif
+#include <string.h>
+#include <vector>
 #include <node.h>
 #include <raylib.h>
 extern "C" {
     #include "microui.h"
 }
 
 #define FONT_SIZE 20
+#define BUFFER_SIZE 2048
 
 static mu_Context ctx = {0};
-static char input_buf[128];
+
+struct InputField
+{
+    std::string id;
+    std::string buffer;
+
+    std::vector<char> cbuf;
+    InputField(const std::string &_id, const std::string initial = "", int bufsize = BUFFER_SIZE) : 
+    id(_id), buffer(initial), cbuf(bufsize, 0)
+    {
+        strncpy(cbuf.data(), initial.c_str(), bufsize - 1);
+    }
+
+    char *data()
+    {
+        return cbuf.data();
+    }
+
+    int size()
+    {
+        return cbuf.size();
+    }
+
+    void sync()
+    {
+        buffer = cbuf.data();
+    }
+};
+
+struct InputList
+{
+    std::vector<InputField> items;
+
+    void add(const std::string &id, const std::string &initial = "", int bufsize = BUFFER_SIZE)
+    {
+        items.emplace_back(id, initial, bufsize);
+    }
+
+    bool checkID(const std::string &id)
+    {
+        for (auto &field : items)
+        {
+            if(field.id == id)
+                return true;
+        }
+        return false;
+    }
+
+    void render(mu_Context *ctx, char* id, const v8::FunctionCallbackInfo<v8::Value> &args)
+    {
+
+        if(!this->checkID(id)) this->add(id);
+        for (auto &field : items)
+        {
+            if(field.id == id) {
+                int val = mu_textbox(ctx, field.data(), field.size());
+                if (val & MU_RES_CHANGE)
+                {
+                    field.sync();
+                    mu_set_focus(ctx, ctx->last_id);
+                    auto isolate = args.GetIsolate();
+                    args.GetReturnValue().Set(v8::String::NewFromUtf8(isolate, field.data()).ToLocalChecked());
+                }
+            }
+        }
+    }
+};
+
+static InputList inputs;
+
 static mu_Rect unclipped_rect = { 0, 0, 0x1000000, 0x1000000 };
 
 void MuButton(const v8::FunctionCallbackInfo<v8::Value> &args) {
@@ -31,18 +103,13 @@ void MuLabel(const v8::FunctionCallbackInfo<v8::Value> &args) {
 void MuInput(const v8::FunctionCallbackInfo<v8::Value> &args) {
     auto isolate = args.GetIsolate();
     auto context = isolate->GetCurrentContext();
-    int val = mu_textbox(&ctx, input_buf, sizeof(input_buf));
-    if (val & MU_RES_CHANGE)
-    {
-        mu_set_focus(&ctx, ctx.last_id);
-        args.GetReturnValue().Set(v8::String::NewFromUtf8(isolate, input_buf).ToLocalChecked());
-    }
+    auto id = v8::String::Utf8Value(isolate, args[0]->ToString(context).ToLocalChecked());
+    inputs.render(&ctx, *id, args);
 }
 
 void MuBeginWindow(const v8::FunctionCallbackInfo<v8::Value> &args) {
     mu_begin_window(&ctx, "Murayact", mu_rect(20, 20, 300, 300));
-    const int widths[] = { 300, -1 };
-    mu_layout_row(&ctx, 2, widths, 50);
+    mu_layout_row(&ctx, 1, (int[]) { -1 }, 40);
 }
 
 void MuEndWindow(const v8::FunctionCallbackInfo<v8::Value> &args) {
@@ -58,14 +125,20 @@ void MuUpdateInput(const v8::FunctionCallbackInfo<v8::Value> &args) {
         if (IsMouseButtonReleased(button)) mu_input_mouseup  (&ctx, x, y, 1 << button);
     }
 
-    char c;
-    char input[2];
-    if ((c = GetCharPressed()))
-    {
-        input[0] = c;
-        input[1] = '\0';
-        mu_input_text(&ctx, input);
+    int key;
+    while ((key = GetCharPressed())) {
+        mu_input_text(&ctx, (char[2]){(char)key, 0});
     }
+
+    if(IsKeyPressed(KEY_BACKSPACE) || IsKeyPressedRepeat(KEY_BACKSPACE))  mu_input_keydown(&ctx, MU_KEY_BACKSPACE);
+    if(IsKeyReleased(KEY_BACKSPACE)) mu_input_keyup(&ctx, MU_KEY_BACKSPACE);
+
+    // I might be dumb, but i don't think MicroUI supports up down left right
+    // if(IsKeyPressed(KEY_LEFT))       mu_input_keydown(&ctx, MU_KEY_LEFT);
+    // if(IsKeyReleased(KEY_LEFT))      mu_input_keyup(&ctx, MU_KEY_LEFT);
+
+    // if(IsKeyPressed(KEY_RIGHT))      mu_input_keydown(&ctx, MU_KEY_RIGHT);
+    // if(IsKeyReleased(KEY_RIGHT))     mu_input_keyup(&ctx, MU_KEY_RIGHT);
 }
 
 void MuBegin(const v8::FunctionCallbackInfo<v8::Value> &args) {

packages/murayact/index.js

@@ -117,6 +117,11 @@ const hostConfig = {
         }
     },
 };
+const windowConfig = {
+    width: 800,
+    height: 600
+};
+
 const MurayRenderer = Reconciler(hostConfig);
 
 function renderTextElement(element) {
@@ -162,9 +167,10 @@ function renderElement(element) {
             } break;
         case 'input':
             {
-                let placeholder = element.placeholder || "";
-                muray.mu_label(placeholder);
-                let value = muray.mu_input();
+                // TODO: Add placeholder text into mu_textbox
+                // let placeholder = element.placeholder || "";
+                if (element.id == undefined || element.id == "") throw "MISSING ID FOR TEXT INPUT";
+                let value = muray.mu_input(element.id);
                 if (value) {
                     const evt = { target: { value } };
                     element.onChange(evt);
@@ -175,6 +181,12 @@ function renderElement(element) {
     }
 }
 
+exports.initWindow = (width, height) => {
+    windowConfig.width = width;
+    windowConfig.height = height;
+    // TODO: Add more window configurations from native.js
+}
+
 exports.render = (element) => {
     const container = MurayRenderer.createContainer(
         { type: 'window' },
@@ -188,7 +200,7 @@ exports.render = (element) => {
     );
     MurayRenderer.updateContainer(element, container);
 
-    muray.InitWindow(800, 600, "Hello from JavaScript");
+    muray.InitWindow(windowConfig.width, windowConfig.height, "Hello from JavaScript");
     while (!muray.WindowShouldClose()) {
         muray.mu_update_input();
         muray.BeginDrawing();