diff --git a/examples/canvas.py b/examples/canvas.py index 5e0f754..14e4c69 100644 --- a/examples/canvas.py +++ b/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)) \ diff --git a/ltk/ltk.js b/ltk/ltk.js index 5b1da09..6fb2fd1 100644 --- a/ltk/ltk.js +++ b/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(); diff --git a/ltk/widgets.py b/ltk/widgets.py index 00cf787..a899afc 100644 --- a/ltk/widgets.py +++ b/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"): diff --git a/pyproject.toml b/pyproject.toml index dac2a4d..44f863b 100644 --- a/pyproject.toml +++ b/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 = "chris@chrislaffra.com" }]