Add more canvas APIs

Author: laffra

examples/canvas.py

@@ -10,12 +10,19 @@ def create():
     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)
+        canvas.fill_style = random.choice(colors)
+        canvas.fill_rect(event.offsetX, event.offsetY, 50, 50)
+
+        canvas.fill_style = random.choice(colors)
+        canvas.fill_circle(event.offsetX + 25, event.offsetY + 25, 25)
+
+        canvas.stroke_style = "black"
+        canvas.rect(event.offsetX + 8, event.offsetY + 8, 34, 34)
+        canvas.circle(event.offsetX + 25, event.offsetY + 25, 12)
 
     return (
         ltk.VBox(
-            ltk.Heading2("This is a Canvas. Move the mouse draw squares."),
+            ltk.Heading2("This is a Canvas. Move the mouse to draw."),
             canvas
                 .attr("id", "pink-canvas") \
                 .on("mousemove", ltk.proxy(mousemove)) \

ltk/ltk.js

@@ -87,57 +87,34 @@
         $.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]
+    window.canvas = {
+        line: (context, x1, y1, x2, y2) => {
+            context.beginPath()
+            context.moveTo(x1, y1)
+            context.lineTo(x2, y2)
+            context.stroke()
+        },
+        rect: (context, x, y, w, h) => {
+            context.beginPath()
             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.stroke()
+        },
+        text: (context, x, y, text) => {
             context.beginPath()
-            context.moveTo(coordinates[n], coordinates[n + 1])
-            context.lineTo(coordinates[n + 2], coordinates[n + 3])
+            context.strokeText(x, y, text)
             context.stroke()
+        },
+        circle: (context, x, y, radius) => {
+            context.beginPath()
+            context.arc(x, y, radius, 0, 2 * Math.PI)
+            context.stroke()
+        },
+        fillCircle: (context, x, y, radius) => {
+            context.beginPath()
+            context.arc(x, y, radius, 0, 2 * Math.PI)
+            context.fill()
         }
-    }
+    };
 
     $.fn.isInViewport = function() {
         const offset = $(this).offset();

ltk/widgets.py

@@ -1135,6 +1135,9 @@ class Canvas(Widget):
 
     def __init__(self, style=DEFAULT_CSS) -> None:
         self._context = None
+        self._font = None
+        self._fill_style = None
+        self._stroke_style = None
         Widget.__init__(self, style)
 
     def __getattr__(self, name):
@@ -1160,19 +1163,57 @@ def context(self):
             self._context = self.element[0].getContext("2d")
         return self._context
 
-    def rects(self, rects):
-        return window.canvasRects(self.context, json.dumps(list(rects)))
+    @property
+    def stroke_style(self):
+        return self._stroke_style
+            
+    @stroke_style.setter
+    def stroke_style(self, value):
+        if self._stroke_style != value:
+            self._stroke_style = value
+            self.context.strokeStyle = value
+    
+    @property
+    def fill_style(self):
+        return self._fill_style
+            
+    @fill_style.setter
+    def fill_style(self, value):
+        if self._fill_style != value:
+            self._fill_style = value
+            self.context.fillStyle = value
+    
+    @property
+    def font(self):
+        return self._font
+            
+    @font.setter
+    def font(self, value):
+        if self._font != value:
+            self._font = value
+            self.context.font = value
+    
+    def line(self, x1, y1, x2, y2):
+        window.canvas.line(self.context, x1, y1, x2, y2)
+
+    def text(self, x, y, text):
+        window.canvas.text(self.context, x, y, text)
+
+    def fill_text(self, x, y, text):
+        self.context.fillText(x, y, text)
+
+    def rect(self, x, y, w, h):
+        window.canvas.rect(self.context, x, y, w, h)
+
+    def fill_rect(self, x, y, w, h):
+        self.context.fillRect(x, y, w, h)
 
-    def fill_rects(self, rects):
-        return window.canvasFillRects(self.context, json.dumps(list(rects)))
+    def circle(self, x, y, radius):
+        window.canvas.circle(self.context, x, y, radius)
 
-    def lines(self, lines, width, color):
-        return window.canvasDrawLines(self.context, width, color, json.dumps(list(lines)))
+    def fill_circle(self, x, y, radius):
+        window.canvas.fillCircle(self.context, x, y, radius)
 
-    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"):

pyproject.toml

@@ -6,7 +6,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name = "pyscript-ltk"
-version = "0.1.40"
+version = "0.1.41"
 description = "A little toolkit for writing UIs in PyScript"
 readme = "README.md"
 authors = [{ name = "Chris Laffra", email = "[email protected]" }]