Find the Python widget for a given HTML element

Author: laffra

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")

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";
 

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)))

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" }]