Add a canvas widget + example

Author: laffra

examples/__init__.py

@@ -1,6 +1,7 @@
 # LTK - Copyright 2023 - All Rights Reserved - chrislaffra.com - See LICENSE 
 
 from examples import app
+from examples import canvas
 from examples import custom
 from examples import documentation
 from examples import dom
@@ -28,7 +29,7 @@
     ("examples/documentation.py", documentation.create()),
     ("examples/pitch.py", pitch.create()),
     ("examples/svg.py", svg.create()),
-    ("examples/pydata.py", pydata.create()),
+    ("examples/canvas.py", canvas.create()),
     ("examples/pizza.py", pizza.create()),
     ("examples/splits.py", splits.create()),
     ("examples/tutorial.py", tutorial.create()),

examples/canvas.py

@@ -0,0 +1,30 @@
+# LTK - Copyright 2023 - All Rights Reserved - chrislaffra.com - See LICENSE 
+
+import ltk
+import random
+
+
+def create():
+
+    canvas = ltk.Canvas()
+    colors = ["black", "red", "white", "blue", "green", "yellow", "purple", "teal", "orange"]
+
+    def mousemove(event):
+        canvas.fillStyle = random.choice(colors)
+        canvas.fillRect(event.offsetX, event.offsetY, 50, 50)
+
+    return (
+        ltk.VBox(
+            ltk.Heading2("This is a Canvas. Move the mouse draw squares."),
+            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")
+    )

kitchensink.toml

@@ -9,6 +9,7 @@ files = [
     "ltk/ltk.css",
     "examples/__init__.py",
     "examples/app.py",
+    "examples/canvas.py",
     "examples/documentation.py",
     "examples/dom.py",
     "examples/inputs.py",

ltk/ltk.js

@@ -86,4 +86,66 @@
     window.ltk_delete = (url, success, error) => {
         $.ajax({ url, type: "DELETE", success}).fail(error)
     }
+
+    window.canvasRects = (context, coordinatesJson) => {
+        const coordinates = JSON.parse(coordinatesJson)
+        context.beginPath()
+        for (var n = 0; n < coordinates.length; n += 5) {
+            x = coordinates[n]
+            y = coordinates[n + 1]
+            w = coordinates[n + 2]
+            h = coordinates[n + 3]
+            context.rect(x, y, w, h)
+        }
+    }
+
+    window.canvasFillRects = (context, coordinatesJson) => {
+        const coordinates = JSON.parse(coordinatesJson)
+        context.beginPath()
+        for (var n = 0; n < coordinates.length; n += 5) {
+            x = coordinates[n]
+            y = coordinates[n + 1]
+            w = coordinates[n + 2]
+            h = coordinates[n + 3]
+            context.fillStyle = coordinates[n + 4]
+            context.fillRect(x, y, w, h)
+        }
+    }
+
+    window.canvasDrawTexts = (context, coordinatesJson) => {
+        const coordinates = JSON.parse(coordinatesJson)
+        context.beginPath()
+        context.strokeStyle = "red"
+        for (var n = 0; n < coordinates.length; n += 5) {
+            x = coordinates[n]
+            y = coordinates[n + 1]
+            text = coordinates[n + 2]
+            color = coordinates[n + 3]
+            w = coordinates[n + 4]
+            context.fillStyle = color
+            context.fillText(text, x, y, w)
+        }
+    }
+
+    window.canvasDrawLines = (context, lineWidth, strokeStyle, coordinatesJson) => {
+        const coordinates = JSON.parse(coordinatesJson)
+        context.lineWidth = lineWidth
+        context.strokeStyle = strokeStyle
+        for (var n = 0; n < coordinates.length; n += 4) {
+            context.beginPath()
+            context.moveTo(coordinates[n], coordinates[n + 1])
+            context.lineTo(coordinates[n + 2], coordinates[n + 3])
+            context.stroke()
+        }
+    }
+
+    $.fn.isInViewport = function() {
+        const offset = $(this).offset();
+        if (!offset) return true
+        const elementTop = $(this).offset().top;
+        const elementBottom = elementTop + $(this).outerHeight(); 
+        const viewportTop = $(window).scrollTop() + 50;
+        const viewportBottom = viewportTop + $(window).height();
+        return elementBottom > viewportTop && elementTop < viewportBottom;
+    };
 })()

ltk/widgets.py

@@ -2,7 +2,10 @@
 
 from pyscript import window # type: ignore
 from ltk.jquery import *
+import itertools
+import json
 import logging
+import math
 
 __all__ = [
     "HBox", "Div", "VBox", "Container", "Card", "Preformatted", "Text", "Input", "Checkbox",
@@ -84,8 +87,6 @@ def _flatten(self, children):
                 result.append(child)
         return result
 
-    names = set()
-
     def css(self, property, value=None):
         """
         Get or set a computed style property. 
@@ -329,8 +330,6 @@ def animate(self, properties, duration=None, easing=None, complete=None):
         return self.element.animate(properties, duration, easing, proxy(complete))
 
     def __getattr__(self, name):
-        if not name in self.names:
-            self.names.add(name)
         try:
             return getattr(self.element, name)
         except:
@@ -1130,6 +1129,52 @@ def show(self):
         widget.on(event, ltk.proxy(lambda *args: self.event(index)))
 
 
+class Canvas(Widget):
+    classes = [ "ltk-canvas" ]
+    tag = "canvas"
+
+    def __init__(self, style=DEFAULT_CSS) -> None:
+        self._context = None
+        Widget.__init__(self, style)
+
+    def __getattr__(self, name):
+        try:
+            return getattr(self.element, name)
+        except:
+            try:
+                return getattr(self.context, name)
+            except:
+                raise AttributeError(f"LTK widget {self} does not have attribute {name}")
+ 
+    def __setattr__(self, name, value):
+        if name != "_context" and self._context and hasattr(self._context, name):
+            setattr(self._context, name, value)
+        elif name != "_context" and hasattr(self.element, name):
+            setattr(self.element, name, value)
+        else:
+            super().__setattr__(name, value)
+ 
+    @property
+    def context(self):
+        if self._context == None:
+            window.console.log("Create context", self.element, self.element[0])
+            self._context = self.element[0].getContext("2d")
+        return self._context
+
+    def rects(self, rects):
+        return window.canvasRects(self.context, json.dumps(list(rects)))
+
+    def fill_rects(self, rects):
+        return window.canvasFillRects(self.context, json.dumps(list(rects)))
+
+    def lines(self, lines, width, color):
+        return window.canvasDrawLines(self.context, width, color, json.dumps(list(lines)))
+
+    def texts(self, texts, font):
+        self.set_font(font)
+        return window.canvasDrawTexts(self.context, json.dumps(list(texts)))
+       
+
 def _close_all_menus(event=None):
     if event and jQuery(event.target).hasClass("ltk-menulabel"):
         return