From 264e919c1f2665935dfd360dc738d0da085595b4 Mon Sep 17 00:00:00 2001
From: Samuel Selleck <samuel@pax.dev>
Date: Wed, 17 Jan 2024 14:57:59 -0800
Subject: [PATCH 1/2] textbox added (no styling)

---
 examples/src/playground/src/lib.pax           |   4 +-
 examples/src/playground/src/lib.rs            |   5 +
 .../public/pax-chassis-web-interface.js       | 105 ++++++++++++++++
 .../classes/messages/textbox-update-patch.ts  |  30 +++++
 .../src/classes/native-element-pool.ts        |  76 ++++++++++++
 pax-chassis-web/interface/src/index.ts        |  15 +++
 .../interface/src/pools/supported-objects.ts  |   7 ++
 pax-chassis-web/src/lib.rs                    |   7 ++
 pax-core/src/engine.rs                        |   8 +-
 pax-core/src/engine/expanded_node.rs          |   9 +-
 pax-message/src/lib.rs                        |  23 +++-
 pax-runtime-api/src/lib.rs                    |   5 +
 pax-std/pax-std-primitives/src/checkbox.rs    |   2 +-
 pax-std/pax-std-primitives/src/lib.rs         |   1 +
 pax-std/pax-std-primitives/src/textbox.rs     | 113 ++++++++++++++++++
 pax-std/src/lib.rs                            |   7 ++
 16 files changed, 409 insertions(+), 8 deletions(-)
 create mode 100644 pax-chassis-web/interface/src/classes/messages/textbox-update-patch.ts
 create mode 100644 pax-std/pax-std-primitives/src/textbox.rs

diff --git a/examples/src/playground/src/lib.pax b/examples/src/playground/src/lib.pax
index e273e1e71..3c108a80b 100644
--- a/examples/src/playground/src/lib.pax
+++ b/examples/src/playground/src/lib.pax
@@ -1,4 +1,4 @@
-<Text width=50% height=50% text="Text Properties Test 1 LONG long LONG long long long"
+<Text width=50% height=50% text={self.textbox_text}
         style = {
                 font: {Font::system("Times New Roman", FontStyle::Normal, FontWeight::Bold)},
                 fill: {self.color},
@@ -8,7 +8,9 @@
                 align_multiline: TextAlignHorizontal::Center
         }
 />
+<Textbox y=70% anchor_y=50% x=100px width=50% height=30px text={self.textbox_text} @textbox_change=self.textbox_change/>
 <Checkbox class=small y=50% anchor_y=50% x={50% - 100px} anchor_x=100% checked={self.checked} @checkbox_change=self.checkbox_change/>
+
 <Image class=small class=centered path="assets/images/pax-logo-light.png"/>
 <Button class=small y=50% anchor_y=50% x={50% + 150px} label="Test!!!" style = {
     font: {Font::system("Times New Roman", FontStyle::Normal, FontWeight::Bold)},
diff --git a/examples/src/playground/src/lib.rs b/examples/src/playground/src/lib.rs
index 5ea6cb655..eb3cae183 100644
--- a/examples/src/playground/src/lib.rs
+++ b/examples/src/playground/src/lib.rs
@@ -19,6 +19,7 @@ pub struct Example {
     pub checked: Property<bool>,
     pub align_vertical: Property<TextAlignVertical>,
     pub color: Property<Color>,
+    pub textbox_text: Property<String>,
 }
 
 impl Example {
@@ -55,6 +56,10 @@ impl Example {
         }
     }
 
+    pub fn textbox_change(&mut self, ctx: &NodeContext, args: ArgsTextboxChange) {
+        self.textbox_text.set(args.text);
+    }
+
     pub fn button_click(&mut self, ctx: &NodeContext, args: ArgsButtonClick) {
         self.color
             .set(Color::rgba(1.0.into(), 0.3.into(), 0.6.into(), 1.0.into()));
diff --git a/pax-chassis-web/interface/public/pax-chassis-web-interface.js b/pax-chassis-web/interface/public/pax-chassis-web-interface.js
index 16a150ea6..9840d9110 100644
--- a/pax-chassis-web/interface/public/pax-chassis-web-interface.js
+++ b/pax-chassis-web/interface/public/pax-chassis-web-interface.js
@@ -744,6 +744,69 @@ var Pax = (() => {
         parent.removeChild(oldNode);
       }
     }
+    textboxCreate(patch) {
+      const textbox = this.objectManager.getFromPool(INPUT);
+      textbox.type = "text";
+      textbox.addEventListener("input", (_event) => {
+        let message = {
+          "FormTextboxChange": {
+            "id_chain": patch.idChain,
+            "text": textbox.value
+          }
+        };
+        this.chassis.interrupt(JSON.stringify(message), void 0);
+        textbox.value = textbox.fixed_text_value;
+      });
+      let runningChain = this.objectManager.getFromPool(DIV);
+      runningChain.appendChild(textbox);
+      runningChain.setAttribute("class", NATIVE_LEAF_CLASS);
+      runningChain.setAttribute("id_chain", String(patch.idChain));
+      let scroller_id;
+      if (patch.scrollerIds != null) {
+        let length = patch.scrollerIds.length;
+        if (length != 0) {
+          scroller_id = patch.scrollerIds[length - 1];
+        }
+      }
+      if (patch.idChain != void 0 && patch.zIndex != void 0) {
+        _NativeElementPool.addNativeElement(
+          runningChain,
+          this.baseOcclusionContext,
+          this.scrollers,
+          patch.idChain,
+          scroller_id,
+          patch.zIndex
+        );
+      }
+      this.textNodes[patch.idChain] = runningChain;
+    }
+    textboxUpdate(patch) {
+      window.textNodes = this.textNodes;
+      let leaf = this.textNodes[patch.id_chain];
+      console.assert(leaf !== void 0);
+      let textbox = leaf.firstChild;
+      if (patch.text != null) {
+        textbox.value = patch.text;
+        textbox.fixed_text_value = textbox.value;
+      }
+      if (patch.size_x != null) {
+        textbox.style.width = patch.size_x - 1 + "px";
+      }
+      if (patch.size_y != null) {
+        textbox.style.height = patch.size_y + "px";
+      }
+      if (patch.transform != null) {
+        leaf.style.transform = packAffineCoeffsIntoMatrix3DString(patch.transform);
+      }
+    }
+    textboxDelete(id_chain) {
+      console.log("textbox deleted");
+      let oldNode = this.textNodes[id_chain];
+      if (oldNode) {
+        let parent = oldNode.parentElement;
+        parent.removeChild(oldNode);
+      }
+    }
     buttonCreate(patch) {
       console.assert(patch.idChain != null);
       console.assert(patch.clippingIds != null);
@@ -1283,6 +1346,27 @@ var Pax = (() => {
     }
   };
 
+  // src/classes/messages/textbox-update-patch.ts
+  var TextboxUpdatePatch = class {
+    constructor(objectManager2) {
+      this.objectManager = objectManager2;
+    }
+    fromPatch(jsonMessage) {
+      this.id_chain = jsonMessage["id_chain"];
+      this.size_x = jsonMessage["size_x"];
+      this.size_y = jsonMessage["size_y"];
+      this.transform = jsonMessage["transform"];
+      this.text = jsonMessage["text"];
+    }
+    cleanUp() {
+      this.id_chain = [];
+      this.size_x = 0;
+      this.size_y = 0;
+      this.transform = [];
+      this.text = "";
+    }
+  };
+
   // src/pools/supported-objects.ts
   var OBJECT = "Object";
   var ARRAY2 = "Array";
@@ -1297,6 +1381,7 @@ var Pax = (() => {
   var SCROLLER_UPDATE_PATCH = "Scroller Update Patch";
   var TEXT_UPDATE_PATCH = "Text Update Patch";
   var CHECKBOX_UPDATE_PATCH = "Checkbox Update Patch";
+  var TEXTBOX_UPDATE_PATCH = "Textbox Update Patch";
   var BUTTON_UPDATE_PATCH = "Button Update Patch";
   var LAYER = "LAYER";
   var OCCLUSION_CONTEXT = "Occlusion Context";
@@ -1398,6 +1483,13 @@ var Pax = (() => {
         patch.cleanUp();
       }
     },
+    {
+      name: TEXTBOX_UPDATE_PATCH,
+      factory: (objectManager2) => new TextboxUpdatePatch(objectManager2),
+      cleanUp: (patch) => {
+        patch.cleanUp();
+      }
+    },
     {
       name: BUTTON_UPDATE_PATCH,
       factory: (objectManager2) => new ButtonUpdatePatch(objectManager2),
@@ -1787,6 +1879,19 @@ var Pax = (() => {
       } else if (unwrapped_msg["CheckboxDelete"]) {
         let msg = unwrapped_msg["CheckboxDelete"];
         nativePool.checkboxDelete(msg);
+      } else if (unwrapped_msg["TextboxCreate"]) {
+        let msg = unwrapped_msg["TextboxCreate"];
+        let patch = objectManager2.getFromPool(ANY_CREATE_PATCH);
+        patch.fromPatch(msg);
+        nativePool.textboxCreate(patch);
+      } else if (unwrapped_msg["TextboxUpdate"]) {
+        let msg = unwrapped_msg["TextboxUpdate"];
+        let patch = objectManager2.getFromPool(TEXTBOX_UPDATE_PATCH, objectManager2);
+        patch.fromPatch(msg);
+        nativePool.textboxUpdate(patch);
+      } else if (unwrapped_msg["TextboxDelete"]) {
+        let msg = unwrapped_msg["TextboxDelete"];
+        nativePool.textboxDelete(msg);
       } else if (unwrapped_msg["TextCreate"]) {
         let msg = unwrapped_msg["TextCreate"];
         let patch = objectManager2.getFromPool(ANY_CREATE_PATCH);
diff --git a/pax-chassis-web/interface/src/classes/messages/textbox-update-patch.ts b/pax-chassis-web/interface/src/classes/messages/textbox-update-patch.ts
new file mode 100644
index 000000000..2292633e1
--- /dev/null
+++ b/pax-chassis-web/interface/src/classes/messages/textbox-update-patch.ts
@@ -0,0 +1,30 @@
+import {ObjectManager} from "../../pools/object-manager";
+
+export class TextboxUpdatePatch {
+    public id_chain?: number[];
+    public size_x?: number;
+    public size_y?: number;
+    public transform?: number[];
+    public text?: string;
+    objectManager: ObjectManager;
+
+    constructor(objectManager: ObjectManager) {
+        this.objectManager = objectManager;
+    }
+
+    fromPatch(jsonMessage: any) {
+        this.id_chain = jsonMessage["id_chain"];
+        this.size_x = jsonMessage["size_x"];
+        this.size_y = jsonMessage["size_y"];
+        this.transform = jsonMessage["transform"];
+        this.text = jsonMessage["text"];
+    }
+
+    cleanUp(){
+        this.id_chain = [];
+        this.size_x = 0;
+        this.size_y = 0;
+        this.transform = [];
+        this.text = "";
+    }
+}
diff --git a/pax-chassis-web/interface/src/classes/native-element-pool.ts b/pax-chassis-web/interface/src/classes/native-element-pool.ts
index 061c2bc13..d7a3630a9 100644
--- a/pax-chassis-web/interface/src/classes/native-element-pool.ts
+++ b/pax-chassis-web/interface/src/classes/native-element-pool.ts
@@ -17,6 +17,7 @@ import {arrayToKey, packAffineCoeffsIntoMatrix3DString, readImageToByteBuffer} f
 import {TextStyle, getAlignItems, getJustifyContent, getTextAlign} from "./text";
 import type {PaxChassisWeb} from "../types/pax-chassis-web";
 import { CheckboxUpdatePatch } from "./messages/checkbox-update-patch";
+import { TextboxUpdatePatch } from "./messages/textbox-update-patch";
 
 export class NativeElementPool {
     private canvases: Map<string, HTMLCanvasElement>;
@@ -182,6 +183,81 @@ export class NativeElementPool {
         }
     }
 
+    textboxCreate(patch: AnyCreatePatch) {
+        const textbox = this.objectManager.getFromPool(INPUT) as HTMLInputElement;
+        textbox.type = "text";
+        textbox.addEventListener("input", (_event) => {
+            let message = {
+                "FormTextboxChange": {
+                    "id_chain": patch.idChain!,
+                    "text": textbox.value,
+                }
+            }
+            this.chassis!.interrupt(JSON.stringify(message), undefined);
+            // @ts-ignore
+            textbox.value = textbox.fixed_text_value;
+        });
+
+        let runningChain: HTMLDivElement = this.objectManager.getFromPool(DIV);
+        runningChain.appendChild(textbox);
+        runningChain.setAttribute("class", NATIVE_LEAF_CLASS)
+        runningChain.setAttribute("id_chain", String(patch.idChain));
+        let scroller_id;
+        if(patch.scrollerIds != null){
+            let length = patch.scrollerIds.length;
+            if(length != 0) {
+                scroller_id = patch.scrollerIds[length-1];
+            }
+        }
+        if(patch.idChain != undefined && patch.zIndex != undefined){
+            NativeElementPool.addNativeElement(runningChain, this.baseOcclusionContext,
+                this.scrollers, patch.idChain, scroller_id, patch.zIndex);
+        }
+        // @ts-ignore
+        this.textNodes[patch.idChain] = runningChain;
+
+    }
+
+    
+    textboxUpdate(patch: TextboxUpdatePatch) {
+        //@ts-ignore
+        window.textNodes = this.textNodes;
+        // @ts-ignore
+        let leaf = this.textNodes[patch.id_chain];
+        console.assert(leaf !== undefined);
+        let textbox = leaf.firstChild;
+
+
+        // Apply the content
+        if (patch.text != null) {
+            textbox.value = patch.text;
+            // @ts-ignore
+            textbox.fixed_text_value = textbox.value;
+        }
+       
+        // Handle size_x and size_y
+        if (patch.size_x != null) {
+            textbox.style.width = patch.size_x - 1 + "px";
+        }
+        if (patch.size_y != null) {
+            textbox.style.height = patch.size_y + "px";
+        }
+        // Handle transform
+        if (patch.transform != null) {
+            leaf.style.transform = packAffineCoeffsIntoMatrix3DString(patch.transform);
+        }
+    }
+
+    textboxDelete(id_chain: number[]) {
+        console.log("textbox deleted");
+        // @ts-ignore
+        let oldNode = this.textNodes[id_chain];
+        if (oldNode){
+            let parent = oldNode.parentElement;
+            parent.removeChild(oldNode);
+        }
+    }
+
     buttonCreate(patch: AnyCreatePatch) {
         console.assert(patch.idChain != null);
         console.assert(patch.clippingIds != null);
diff --git a/pax-chassis-web/interface/src/index.ts b/pax-chassis-web/interface/src/index.ts
index 886f7282e..2b58023fc 100644
--- a/pax-chassis-web/interface/src/index.ts
+++ b/pax-chassis-web/interface/src/index.ts
@@ -9,6 +9,7 @@ import {
     FRAME_UPDATE_PATCH,
     IMAGE_LOAD_PATCH, OCCLUSION_UPDATE_PATCH, SCROLLER_UPDATE_PATCH,
     SUPPORTED_OBJECTS,
+    TEXTBOX_UPDATE_PATCH,
     TEXT_UPDATE_PATCH
 } from "./pools/supported-objects";
 import {NativeElementPool} from "./classes/native-element-pool";
@@ -22,6 +23,7 @@ import {setupEventListeners} from "./events/listeners";
 import "./styles/pax-web.css";
 import { OcclusionUpdatePatch } from "./classes/messages/occlusion-update-patch";
 import { ButtonUpdatePatch } from "./classes/messages/button-update-patch";
+import { TextboxUpdatePatch } from "./classes/messages/textbox-update-patch";
 
 let objectManager = new ObjectManager(SUPPORTED_OBJECTS);
 let messages : any[];
@@ -150,6 +152,19 @@ export function processMessages(messages: any[], chassis: PaxChassisWeb, objectM
         }else if (unwrapped_msg["CheckboxDelete"]) {
             let msg = unwrapped_msg["CheckboxDelete"];
             nativePool.checkboxDelete(msg)
+        } else if(unwrapped_msg["TextboxCreate"]) {
+            let msg = unwrapped_msg["TextboxCreate"]
+            let patch: AnyCreatePatch = objectManager.getFromPool(ANY_CREATE_PATCH);
+            patch.fromPatch(msg);
+            nativePool.textboxCreate(patch);
+        } else if (unwrapped_msg["TextboxUpdate"]){
+            let msg = unwrapped_msg["TextboxUpdate"]
+            let patch: TextboxUpdatePatch = objectManager.getFromPool(TEXTBOX_UPDATE_PATCH, objectManager);
+            patch.fromPatch(msg);
+            nativePool.textboxUpdate(patch);
+        }else if (unwrapped_msg["TextboxDelete"]) {
+            let msg = unwrapped_msg["TextboxDelete"];
+            nativePool.textboxDelete(msg)
         } else if(unwrapped_msg["TextCreate"]) {
             let msg = unwrapped_msg["TextCreate"]
             let patch: AnyCreatePatch = objectManager.getFromPool(ANY_CREATE_PATCH);
diff --git a/pax-chassis-web/interface/src/pools/supported-objects.ts b/pax-chassis-web/interface/src/pools/supported-objects.ts
index 15d33bff5..8768f8c39 100644
--- a/pax-chassis-web/interface/src/pools/supported-objects.ts
+++ b/pax-chassis-web/interface/src/pools/supported-objects.ts
@@ -12,6 +12,7 @@ import {Font, TextStyle} from "../classes/text";
 import { CheckboxUpdatePatch } from "../classes/messages/checkbox-update-patch";
 import { OcclusionUpdatePatch } from "../classes/messages/occlusion-update-patch";
 import { ButtonUpdatePatch } from "../classes/messages/button-update-patch";
+import { TextboxUpdatePatch } from "../classes/messages/textbox-update-patch";
 
 export const OBJECT = "Object";
 export const ARRAY = "Array";
@@ -26,6 +27,7 @@ export const IMAGE_LOAD_PATCH = "IMAGE LOAD PATCH";
 export const SCROLLER_UPDATE_PATCH = "Scroller Update Patch";
 export const TEXT_UPDATE_PATCH = "Text Update Patch";
 export const CHECKBOX_UPDATE_PATCH = "Checkbox Update Patch";
+export const TEXTBOX_UPDATE_PATCH = "Textbox Update Patch";
 export const BUTTON_UPDATE_PATCH = "Button Update Patch";
 
 export const LAYER = "LAYER";
@@ -125,6 +127,11 @@ export let SUPPORTED_OBJECTS = [{
         factory: (objectManager: ObjectManager) => new CheckboxUpdatePatch(objectManager),
         cleanUp: (patch: CheckboxUpdatePatch) => {patch.cleanUp()},
     },
+    {
+        name: TEXTBOX_UPDATE_PATCH,
+        factory: (objectManager: ObjectManager) => new TextboxUpdatePatch(objectManager),
+        cleanUp: (patch: CheckboxUpdatePatch) => {patch.cleanUp()},
+    },
     {
         name: BUTTON_UPDATE_PATCH,
         factory: (objectManager: ObjectManager) => new ButtonUpdatePatch(objectManager),
diff --git a/pax-chassis-web/src/lib.rs b/pax-chassis-web/src/lib.rs
index 55425251e..f9047f599 100644
--- a/pax-chassis-web/src/lib.rs
+++ b/pax-chassis-web/src/lib.rs
@@ -4,6 +4,7 @@ use js_sys::Uint8Array;
 use pax_core::ExpressionTable;
 use pax_runtime_api::ArgsButtonClick;
 use pax_runtime_api::ArgsCheckboxChange;
+use pax_runtime_api::ArgsTextboxChange;
 use pax_runtime_api::RenderContext;
 use std::cell::RefCell;
 use std::collections::HashMap;
@@ -149,6 +150,12 @@ impl PaxChassisWeb {
                     .expect("button node exists in engine");
                 node.dispatch_button_click(ArgsButtonClick {}, globals);
             }
+            NativeInterrupt::FormTextboxChange(args) => {
+                let node = engine
+                    .get_expanded_node(args.id_chain[0])
+                    .expect("textbox node exists in engine");
+                node.dispatch_textbox_change(ArgsTextboxChange { text: args.text }, globals);
+            }
             NativeInterrupt::FormCheckboxToggle(args) => {
                 let node = engine
                     .get_expanded_node(args.id_chain[0])
diff --git a/pax-core/src/engine.rs b/pax-core/src/engine.rs
index 72a9c957f..028f46932 100644
--- a/pax-core/src/engine.rs
+++ b/pax-core/src/engine.rs
@@ -8,9 +8,9 @@ use pax_message::{NativeMessage, OcclusionPatch};
 use pax_runtime_api::{
     ArgsButtonClick, ArgsCheckboxChange, ArgsClap, ArgsClick, ArgsContextMenu, ArgsDoubleClick,
     ArgsKeyDown, ArgsKeyPress, ArgsKeyUp, ArgsMouseDown, ArgsMouseMove, ArgsMouseOut,
-    ArgsMouseOver, ArgsMouseUp, ArgsScroll, ArgsTouchEnd, ArgsTouchMove, ArgsTouchStart, ArgsWheel,
-    CommonProperties, Interpolatable, Layer, NodeContext, OcclusionLayerGen, RenderContext,
-    TransitionManager,
+    ArgsMouseOver, ArgsMouseUp, ArgsScroll, ArgsTextboxChange, ArgsTouchEnd, ArgsTouchMove,
+    ArgsTouchStart, ArgsWheel, CommonProperties, Interpolatable, Layer, NodeContext,
+    OcclusionLayerGen, RenderContext, TransitionManager,
 };
 use piet::{ImageBuf, InterpolationMode};
 
@@ -84,6 +84,7 @@ pub struct HandlerRegistry {
     pub key_press_handlers: Vec<fn(Rc<RefCell<dyn Any>>, &NodeContext, ArgsKeyPress)>,
     pub checkbox_change_handlers: Vec<fn(Rc<RefCell<dyn Any>>, &NodeContext, ArgsCheckboxChange)>,
     pub button_click_handlers: Vec<fn(Rc<RefCell<dyn Any>>, &NodeContext, ArgsButtonClick)>,
+    pub textbox_change_handlers: Vec<fn(Rc<RefCell<dyn Any>>, &NodeContext, ArgsTextboxChange)>,
     pub click_handlers: Vec<fn(Rc<RefCell<dyn Any>>, &NodeContext, ArgsClick)>,
     pub mouse_down_handlers: Vec<fn(Rc<RefCell<dyn Any>>, &NodeContext, ArgsMouseDown)>,
     pub mouse_up_handlers: Vec<fn(Rc<RefCell<dyn Any>>, &NodeContext, ArgsMouseUp)>,
@@ -121,6 +122,7 @@ impl Default for HandlerRegistry {
             mount_handlers: Vec::new(),
             checkbox_change_handlers: Vec::new(),
             button_click_handlers: Vec::new(),
+            textbox_change_handlers: Vec::new(),
         }
     }
 }
diff --git a/pax-core/src/engine/expanded_node.rs b/pax-core/src/engine/expanded_node.rs
index 585927c4b..97c1c6c4c 100644
--- a/pax-core/src/engine/expanded_node.rs
+++ b/pax-core/src/engine/expanded_node.rs
@@ -10,8 +10,8 @@ use kurbo::Point;
 use pax_runtime_api::{
     ArgsButtonClick, ArgsCheckboxChange, ArgsClap, ArgsClick, ArgsContextMenu, ArgsDoubleClick,
     ArgsKeyDown, ArgsKeyPress, ArgsKeyUp, ArgsMouseDown, ArgsMouseMove, ArgsMouseOut,
-    ArgsMouseOver, ArgsMouseUp, ArgsScroll, ArgsTouchEnd, ArgsTouchMove, ArgsTouchStart, ArgsWheel,
-    Axis, CommonProperties, NodeContext, RenderContext, Size,
+    ArgsMouseOver, ArgsMouseUp, ArgsScroll, ArgsTextboxChange, ArgsTouchEnd, ArgsTouchMove,
+    ArgsTouchStart, ArgsWheel, Axis, CommonProperties, NodeContext, RenderContext, Size,
 };
 
 use crate::{
@@ -442,6 +442,11 @@ impl ExpandedNode {
         ArgsCheckboxChange,
         checkbox_change_handlers
     );
+    dispatch_event_handler!(
+        dispatch_textbox_change,
+        ArgsTextboxChange,
+        textbox_change_handlers
+    );
     dispatch_event_handler!(
         dispatch_button_click,
         ArgsButtonClick,
diff --git a/pax-message/src/lib.rs b/pax-message/src/lib.rs
index 58ceb1a35..479d051d2 100644
--- a/pax-message/src/lib.rs
+++ b/pax-message/src/lib.rs
@@ -21,6 +21,9 @@ pub enum NativeMessage {
     CheckboxCreate(AnyCreatePatch),
     CheckboxUpdate(CheckboxPatch),
     CheckboxDelete(Vec<u32>),
+    TextboxCreate(AnyCreatePatch),
+    TextboxUpdate(TextboxPatch),
+    TextboxDelete(Vec<u32>),
     ButtonCreate(AnyCreatePatch),
     ButtonUpdate(ButtonPatch),
     ButtonDelete(Vec<u32>),
@@ -55,6 +58,7 @@ pub enum NativeInterrupt {
     Image(ImageLoadInterruptArgs),
     AddedLayer(AddedLayerArgs),
     FormCheckboxToggle(FormCheckboxToggleArgs),
+    FormTextboxChange(FormTextboxChangeArgs),
     FormButtonClick(FormButtonClickArgs),
 }
 
@@ -65,6 +69,13 @@ pub struct FormCheckboxToggleArgs {
     pub id_chain: Vec<u32>,
 }
 
+#[derive(Deserialize)]
+#[repr(C)]
+pub struct FormTextboxChangeArgs {
+    pub text: String,
+    pub id_chain: Vec<u32>,
+}
+
 #[derive(Deserialize)]
 #[repr(C)]
 pub struct FormButtonClickArgs {
@@ -302,10 +313,20 @@ pub struct CheckboxPatch {
     pub transform: Option<Vec<f64>>,
     pub size_x: Option<f64>,
     pub size_y: Option<f64>,
-    //pub style: Option<TextStyleMessage>,
     pub checked: Option<bool>,
 }
 
+#[cfg_attr(debug_assertions, derive(Debug))]
+#[derive(Default, Serialize, Clone)]
+#[repr(C)]
+pub struct TextboxPatch {
+    pub id_chain: Vec<u32>,
+    pub transform: Option<Vec<f64>>,
+    pub size_x: Option<f64>,
+    pub size_y: Option<f64>,
+    pub text: Option<String>,
+}
+
 #[cfg_attr(debug_assertions, derive(Debug))]
 #[derive(Default, Serialize)]
 #[repr(C)]
diff --git a/pax-runtime-api/src/lib.rs b/pax-runtime-api/src/lib.rs
index c7fb62117..d28e4ab74 100644
--- a/pax-runtime-api/src/lib.rs
+++ b/pax-runtime-api/src/lib.rs
@@ -274,6 +274,11 @@ pub struct ArgsCheckboxChange {
     pub checked: bool,
 }
 
+#[derive(Clone)]
+pub struct ArgsTextboxChange {
+    pub text: String,
+}
+
 #[derive(Clone)]
 pub struct ArgsButtonClick {}
 
diff --git a/pax-std/pax-std-primitives/src/checkbox.rs b/pax-std/pax-std-primitives/src/checkbox.rs
index b8fa61a46..d8314f58f 100644
--- a/pax-std/pax-std-primitives/src/checkbox.rs
+++ b/pax-std/pax-std-primitives/src/checkbox.rs
@@ -5,7 +5,7 @@ use pax_core::{
     BaseInstance, ExpandedNode, InstanceFlags, InstanceNode, InstantiationArgs, RuntimeContext,
 };
 use pax_message::{AnyCreatePatch, CheckboxPatch};
-use pax_runtime_api::{Layer, RenderContext};
+use pax_runtime_api::Layer;
 use pax_std::primitives::Checkbox;
 use std::collections::HashMap;
 use std::rc::Rc;
diff --git a/pax-std/pax-std-primitives/src/lib.rs b/pax-std/pax-std-primitives/src/lib.rs
index a53471df1..81c681fb9 100644
--- a/pax-std/pax-std-primitives/src/lib.rs
+++ b/pax-std/pax-std-primitives/src/lib.rs
@@ -9,6 +9,7 @@ pub mod rectangle;
 pub mod button;
 pub mod checkbox;
 pub mod text;
+pub mod textbox;
 
 fn patch_if_needed<T: PartialEq + Clone>(
     old_state: &mut Option<T>,
diff --git a/pax-std/pax-std-primitives/src/textbox.rs b/pax-std/pax-std-primitives/src/textbox.rs
new file mode 100644
index 000000000..69b55d16b
--- /dev/null
+++ b/pax-std/pax-std-primitives/src/textbox.rs
@@ -0,0 +1,113 @@
+use std::cell::RefCell;
+
+use pax_core::declarative_macros::handle_vtable_update;
+use pax_core::{
+    BaseInstance, ExpandedNode, InstanceFlags, InstanceNode, InstantiationArgs, RuntimeContext,
+};
+use pax_message::{AnyCreatePatch, TextboxPatch};
+use pax_runtime_api::Layer;
+use pax_std::primitives::Textbox;
+use std::collections::HashMap;
+use std::rc::Rc;
+
+use crate::patch_if_needed;
+
+pub struct TextboxInstance {
+    base: BaseInstance,
+    //Used as a cache of last-sent values, for crude dirty-checking.
+    //Hopefully, this will by obviated by the built-in expression dirty-checking mechanism.
+    last_patches: RefCell<HashMap<Vec<u32>, pax_message::TextboxPatch>>,
+}
+
+impl InstanceNode for TextboxInstance {
+    fn instantiate(args: InstantiationArgs) -> Rc<Self>
+    where
+        Self: Sized,
+    {
+        Rc::new(Self {
+            base: BaseInstance::new(
+                args,
+                InstanceFlags {
+                    invisible_to_slot: false,
+                    invisible_to_raycasting: false,
+                    layer: Layer::Native,
+                    is_component: false,
+                },
+            ),
+            last_patches: Default::default(),
+        })
+    }
+
+    fn update(self: Rc<Self>, expanded_node: &Rc<ExpandedNode>, context: &mut RuntimeContext) {
+        expanded_node.with_properties_unwrapped(|properties: &mut Textbox| {
+            handle_vtable_update(
+                context.expression_table(),
+                &expanded_node.stack,
+                &mut properties.text,
+            );
+        });
+    }
+
+    fn handle_native_patches(&self, expanded_node: &ExpandedNode, context: &mut RuntimeContext) {
+        let id_chain = expanded_node.id_chain.clone();
+        let mut patch = TextboxPatch {
+            id_chain: id_chain.clone(),
+            ..Default::default()
+        };
+        let mut last_patches = self.last_patches.borrow_mut();
+        let old_state = last_patches
+            .entry(id_chain.clone())
+            .or_insert(patch.clone());
+
+        expanded_node.with_properties_unwrapped(|properties: &mut Textbox| {
+            let layout_properties = expanded_node.layout_properties.borrow();
+            let computed_tab = &layout_properties.as_ref().unwrap().computed_tab;
+            let update_needed = patch_if_needed(
+                &mut old_state.text,
+                &mut patch.text,
+                properties.text.get().string.clone(),
+            ) || patch_if_needed(
+                &mut old_state.size_x,
+                &mut patch.size_x,
+                computed_tab.bounds.0,
+            ) || patch_if_needed(
+                &mut old_state.size_y,
+                &mut patch.size_y,
+                computed_tab.bounds.1,
+            ) || patch_if_needed(
+                &mut old_state.transform,
+                &mut patch.transform,
+                computed_tab.transform.as_coeffs().to_vec(),
+            );
+            if update_needed {
+                context.enqueue_native_message(pax_message::NativeMessage::TextboxUpdate(patch));
+            }
+        });
+    }
+
+    fn handle_mount(&self, expanded_node: &Rc<ExpandedNode>, context: &mut RuntimeContext) {
+        context.enqueue_native_message(pax_message::NativeMessage::TextboxCreate(AnyCreatePatch {
+            id_chain: expanded_node.id_chain.clone(),
+            clipping_ids: vec![],
+            scroller_ids: vec![],
+            z_index: 0,
+        }));
+    }
+
+    fn handle_unmount(&self, expanded_node: &Rc<ExpandedNode>, context: &mut RuntimeContext) {
+        let id_chain = expanded_node.id_chain.clone();
+        context.enqueue_native_message(pax_message::NativeMessage::TextboxDelete(id_chain));
+    }
+
+    fn base(&self) -> &BaseInstance {
+        &self.base
+    }
+
+    fn resolve_debug(
+        &self,
+        f: &mut std::fmt::Formatter,
+        _expanded_node: Option<&ExpandedNode>,
+    ) -> std::fmt::Result {
+        f.debug_struct("Textbox").finish_non_exhaustive()
+    }
+}
diff --git a/pax-std/src/lib.rs b/pax-std/src/lib.rs
index d6000cda8..abb701b98 100644
--- a/pax-std/src/lib.rs
+++ b/pax-std/src/lib.rs
@@ -79,6 +79,13 @@ pub mod primitives {
         pub checked: Property<bool>,
     }
 
+    #[derive(Pax)]
+    #[custom(Imports)]
+    #[primitive("pax_std_primitives::textbox::TextboxInstance")]
+    pub struct Textbox {
+        pub text: Property<StringBox>,
+    }
+
     #[derive(Pax)]
     #[custom(Imports)]
     #[primitive("pax_std_primitives::button::ButtonInstance")]

From b535aa39394819a02f4b0aab2c29886d4bd38c7f Mon Sep 17 00:00:00 2001
From: Samuel Selleck <samuel@pax.dev>
Date: Wed, 17 Jan 2024 19:19:28 -0800
Subject: [PATCH 2/2] addressed pr feedback

---
 pax-chassis-web/interface/public/pax-chassis-web-interface.js | 3 +--
 pax-chassis-web/interface/src/classes/native-element-pool.ts  | 3 +--
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/pax-chassis-web/interface/public/pax-chassis-web-interface.js b/pax-chassis-web/interface/public/pax-chassis-web-interface.js
index 9840d9110..c62149302 100644
--- a/pax-chassis-web/interface/public/pax-chassis-web-interface.js
+++ b/pax-chassis-web/interface/public/pax-chassis-web-interface.js
@@ -728,7 +728,7 @@ var Pax = (() => {
         checkbox.checked = patch.checked;
       }
       if (patch.size_x != null) {
-        checkbox.style.width = patch.size_x - 1 + "px";
+        checkbox.style.width = patch.size_x + "px";
       }
       if (patch.size_y != null) {
         checkbox.style.height = patch.size_y + "px";
@@ -800,7 +800,6 @@ var Pax = (() => {
       }
     }
     textboxDelete(id_chain) {
-      console.log("textbox deleted");
       let oldNode = this.textNodes[id_chain];
       if (oldNode) {
         let parent = oldNode.parentElement;
diff --git a/pax-chassis-web/interface/src/classes/native-element-pool.ts b/pax-chassis-web/interface/src/classes/native-element-pool.ts
index d7a3630a9..0b6d85239 100644
--- a/pax-chassis-web/interface/src/classes/native-element-pool.ts
+++ b/pax-chassis-web/interface/src/classes/native-element-pool.ts
@@ -163,7 +163,7 @@ export class NativeElementPool {
         }
         // Handle size_x and size_y
         if (patch.size_x != null) {
-            checkbox.style.width = patch.size_x - 1 + "px";
+            checkbox.style.width = patch.size_x + "px";
         }
         if (patch.size_y != null) {
             checkbox.style.height = patch.size_y + "px";
@@ -249,7 +249,6 @@ export class NativeElementPool {
     }
 
     textboxDelete(id_chain: number[]) {
-        console.log("textbox deleted");
         // @ts-ignore
         let oldNode = this.textNodes[id_chain];
         if (oldNode){