From 63f727b031859bd500f716b53c9b8fa3210650d1 Mon Sep 17 00:00:00 2001
From: Chris Laffra <laffra@gmail.com>
Date: Fri, 13 Dec 2024 09:57:26 +0100
Subject: [PATCH] Find the Python widget for a given HTML element

---
 examples/canvas.py | 18 +++++++++---------
 ltk/ltk.js         |  6 ++++++
 ltk/widgets.py     |  2 ++
 pyproject.toml     |  2 +-
 widgets.py         |  6 ------
 5 files changed, 18 insertions(+), 16 deletions(-)
 delete mode 100644 widgets.py

diff --git a/examples/canvas.py b/examples/canvas.py
index 2bfeb75..43a4510 100644
--- a/examples/canvas.py
+++ b/examples/canvas.py
@@ -6,10 +6,10 @@
 
 def create():
 
-    canvas = ltk.Canvas()
     colors = ["black", "red", "white", "blue", "green", "yellow", "purple", "teal", "orange"]
 
     def mousemove(event):
+        canvas = ltk.find("#pink-canvas").widget()
         canvas.fill_style = random.choice(colors)
         canvas.fill_rect(event.offsetX, event.offsetY, 50, 50)
 
@@ -23,14 +23,14 @@ def mousemove(event):
     return (
         ltk.VBox(
             ltk.Heading2("This is a Canvas. Move the mouse to draw."),
-            canvas
-                .attr("id", "pink-canvas") \
-                .on("mousemove", ltk.proxy(mousemove)) \
-                .attr("width", "500px") \
-                .attr("height", "500px") \
-                .css("width", "500px") \
-                .css("height", "500px") \
-                .css("border", "1px solid gray") \
+            ltk.Canvas()
+                .attr("id", "pink-canvas")
+                .on("mousemove", ltk.proxy(mousemove))
+                .attr("width", "500px")
+                .attr("height", "500px")
+                .css("width", "500px")
+                .css("height", "500px")
+                .css("border", "1px solid gray")
                 .css("background", "pink")
         )
         .attr("name", "Canvas")
diff --git a/ltk/ltk.js b/ltk/ltk.js
index 5b0bd2a..cea5a41 100644
--- a/ltk/ltk.js
+++ b/ltk/ltk.js
@@ -134,6 +134,12 @@
         return elementBottom > viewportTop && elementTop < viewportBottom;
     };
 
+    window.ltk_widgets = {};
+
+    $.fn.widget = function() {
+        return window.ltk_widgets[$(this).attr("ltk_id")];
+    };
+
     // change the following to your own development root location
     window.development_location = "C:/Users/laffr/dev/ltk";
 
diff --git a/ltk/widgets.py b/ltk/widgets.py
index 38c8265..3f596f9 100644
--- a/ltk/widgets.py
+++ b/ltk/widgets.py
@@ -141,6 +141,8 @@ def __init__(self, *args):
                 .addClass(" ".join(self.classes))
                 .append(*self._flatten(args))
         )
+        window.ltk_widgets[id(self)] = self
+        self.attr("ltk_id", id(self))
         self._handle_css(args)
         if Widget.INSPECT:
             self.on("mousemove", proxy(lambda event: self._on_mousemove(event)))
diff --git a/pyproject.toml b/pyproject.toml
index 21da320..e5aa3a9 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -6,7 +6,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name = "pyscript-ltk"
-version = "0.2.15"
+version = "0.2.16"
 description = "A little toolkit for writing UIs in PyScript"
 readme = "README.md"
 authors = [{ name = "Chris Laffra", email = "chris@chrislaffra.com" }]
diff --git a/widgets.py b/widgets.py
deleted file mode 100644
index 1cb2768..0000000
--- a/widgets.py
+++ /dev/null
@@ -1,6 +0,0 @@
-def __init__(self, value, style=None):
-    Widget.__init__(self, style or DEFAULT_CSS)
-    if isinstance(value, ModelAttribute):
-        self.bind(value)
-    else:
-        self.element.val(value)