Rewrote the raw api to the backend and inserted the new api into webzen

README.md

@@ -2,6 +2,7 @@
 
 ![GitHub last commit](https://img.shields.io/github/last-commit/dimkauzh/webzen)
 ![GitHub license](https://img.shields.io/github/license/dimkauzh/webzen)
+![Lines of code](https://tokei.rs/b1/github/dimkauzh/webzen?category=lines)
 
 Webzen is a Go UI Framework that targets WebAssembly, enabling you to build web applications with Go. It helps you build ui's in the web easy and fast. This project leverages `syscall/js` to interact with the JavaScript runtime in the browser.
 

src/backend/document/canvas.go

@@ -0,0 +1,43 @@
+package document
+
+import "syscall/js"
+
+type canvas struct {
+	canvas js.Value
+}
+
+type context struct {
+	context js.Value
+}
+
+func (c *canvas) GetContext(context_str string) context {
+	return context{c.canvas.Call("getContext", context_str)}
+}
+
+func (c *canvas) Get(key string) js.Value {
+	return c.canvas.Get(key)
+}
+
+func (c *canvas) Set(key string, value interface{}) {
+	c.canvas.Set(key, value)
+}
+
+func (c *canvas) IsNull() bool {
+	return c.canvas.IsNull()
+}
+
+func (c *context) Set(key string, value interface{}) {
+	c.context.Set(key, value)
+}
+
+func (c *context) FillText(text string, x, y float64) {
+	c.context.Call("fillText", text, x, y)
+}
+
+func (c *context) FillRect(x, y, width, height float64) {
+	c.context.Call("fillRect", x, y, width, height)
+}
+
+func (c *context) DrawImage(img js.Value, x, y, width, height float64) {
+	c.context.Call("drawImage", img, x, y, width, height)
+}

src/backend/document/document.go

@@ -3,25 +3,72 @@ package document
 import "syscall/js"
 
 var Body = body{}
+var DocumentElement = documentElement{}
 
-type body struct{}
+type body struct {
+	Style styleBody
+}
 
 type element struct {
 	el    js.Value
 	Style js.Value
 }
 
+type documentElement struct {
+	Style styleDocument
+}
+type styleDocument struct{}
+type styleBody struct{}
+
 func CreateElement(element_str string) element {
 	cd := js.Global().Get("document").Call("createElement", element_str)
 	style := cd.Get("style")
 	return element{cd, style}
 }
 
+func CreateCanvasElement() canvas {
+	cd := js.Global().Get("document").Call("createElement", "canvas")
+	return canvas{cd}
+}
+
 func (e *element) Set(key string, value interface{}) {
 	e.el.Set(key, value)
 }
 
+func (e *element) Call(type1, type2 string, f js.Func) {
+	e.el.Call(type1, type2, f)
+}
+
+func (e *element) AddEventListener(event string, f js.Func) {
+	e.el.Call("addEventListener", event, f)
+}
+
 func (b *body) AppendChild(el element) {
 	appendChild := el.el
 	js.Global().Get("document").Get("body").Call("appendChild", appendChild)
 }
+
+func (b *body) AppendCanvasChild(ca canvas) {
+	appendChild := ca.canvas
+	js.Global().Get("document").Get("body").Call("appendChild", appendChild)
+}
+
+func GetElementById(id string) canvas {
+	return canvas{js.Global().Get("document").Call("getElementById", "canvas")}
+}
+
+func (d *documentElement) ClientWidth() js.Value {
+	return js.Global().Get("document").Get("documentElement").Get("clientWidth")
+}
+
+func (d *documentElement) ClientHeight() js.Value {
+	return js.Global().Get("document").Get("documentElement").Get("clientHeight")
+}
+
+func (d *styleDocument) Set(key string, value interface{}) {
+	js.Global().Get("document").Get("documentElement").Get("style").Set(key, value)
+}
+
+func (b *styleBody) Set(key string, value interface{}) {
+	js.Global().Get("document").Get("body").Get("style").Set(key, value)
+}

src/backend/global/alert.go

@@ -0,0 +1,7 @@
+package global
+
+import "syscall/js"
+
+func Alert(text string) {
+	js.Global().Call("alert", text)
+}

src/backend/window/window.go

@@ -0,0 +1,7 @@
+package window
+
+import "syscall/js"
+
+func AddEventListener(ev string, fn js.Func) {
+	js.Global().Get("window").Call("addEventListener", ev, fn)
+}

src/webzen/draw/rect.go

@@ -2,13 +2,13 @@ package draw
 
 import (
 	"strconv"
-	"syscall/js"
+	"webzen/src/backend/document"
 )
 
-func DrawRect(width, height int, x, y float64, color [4]int) {
-	canvas := js.Global().Get("document").Call("getElementById", "canvas")
+func DrawRect(width, height, x, y float64, color [4]int) {
+	canvas := document.GetElementById("canvas")
 	// Get the canvas context
-	context := canvas.Call("getContext", "2d")
+	context := canvas.GetContext("2d")
 
 	// Draw the rectangle
 	rgba := "rgba(" +
@@ -17,13 +17,13 @@ func DrawRect(width, height int, x, y float64, color [4]int) {
 		strconv.Itoa(color[2]) + "," +
 		strconv.FormatFloat(float64(color[3])/255.0, 'f', -1, 64) + ")"
 	context.Set("fillStyle", rgba)
-	context.Call("fillRect", x, y, width, height) // Set the rectangle dimensions as needed
+	context.FillRect(x, y, width, height) // Set the rectangle dimensions as needed
 }
 
 func FillBackground(color [4]int) {
-	canvas := js.Global().Get("document").Call("getElementById", "canvas")
+	canvas := document.GetElementById("canvas")
 	// Get the canvas context
-	context := canvas.Call("getContext", "2d")
+	context := canvas.GetContext("2d")
 
 	// Fill the canvas with the specified color
 	rgba := "rgba(" +
@@ -32,5 +32,5 @@ func FillBackground(color [4]int) {
 		strconv.Itoa(color[2]) + "," +
 		strconv.FormatFloat(float64(color[3])/255.0, 'f', -1, 64) + ")"
 	context.Set("fillStyle", rgba)
-	context.Call("fillRect", 0, 0, canvas.Get("width").Float(), canvas.Get("height").Float())
+	context.FillRect(0, 0, canvas.Get("width").Float(), canvas.Get("height").Float())
 }

src/webzen/draw/text.go

@@ -2,20 +2,14 @@ package draw
 
 import (
 	"strconv"
-	"syscall/js"
+	"webzen/src/backend/document"
 )
 
 func DrawText(text string, size, x, y int) {
-	canvas := js.Global().Get("document").Call("getElementById", "canvas")
-	// Get the canvas context
-	context := canvas.Call("getContext", "2d")
+	canvas := document.GetElementById("canvas")
+	context := canvas.GetContext("2d")
 
-	// Set the text size and font
 	context.Set("font", strconv.Itoa(size)+"px Arial")
-
-	// Set the text color
-	context.Set("fillStyle", "black") // You can change the text color as needed
-
-	// Draw the text at the specified position
-	context.Call("fillText", text, float64(x), float64(y))
+	context.Set("fillStyle", "black")
+	context.FillText(text, float64(x), float64(y))
 }

src/webzen/image/image.go

@@ -1,22 +1,26 @@
 package image
 
-import "syscall/js"
+import (
+	"syscall/js"
+	"webzen/src/backend/document"
+	"webzen/src/backend/global"
+)
 
 func DrawImage(imagePath string, width, height, x, y float64) {
-	canvas := js.Global().Get("document").Call("getElementById", "canvas")
-	context := canvas.Call("getContext", "2d")
+	canvas := document.GetElementById("canvas")
+	context := canvas.GetContext("2d")
 
 	// Load and draw the image
-	img := js.Global().Get("document").Call("createElement", "img")
+	img := document.CreateElement("img")
 	img.Set("src", imagePath)
-	img.Call("addEventListener", "load", js.FuncOf(func(this js.Value, p []js.Value) interface{} {
-		context.Call("drawImage", img, x, y, width, height)
+	img.AddEventListener("load", js.FuncOf(func(this js.Value, p []js.Value) interface{} {
+		context.DrawImage(img, x, y, width, height)
 		return nil
 	}))
 
 	// Handle image loading errors
-	img.Call("addEventListener", "error", js.FuncOf(func(this js.Value, p []js.Value) interface{} {
-		js.Global().Call("alert", "Failed to load image")
+	img.AddEventListener("error", js.FuncOf(func(this js.Value, p []js.Value) interface{} {
+		global.Alert("Failed to load image: " + imagePath)
 		return nil
 	}))
 }

src/webzen/init.go

@@ -1,29 +1,31 @@
 package webzen
 
-import "syscall/js"
+import (
+	"syscall/js"
+	"webzen/src/backend/document"
+	"webzen/src/backend/window"
+)
 
 func Init() {
-	var canvas js.Value
-	// Create a canvas element if it doesn't exist
-	canvas = js.Global().Get("document").Call("getElementById", "canvas")
+	canvas := document.GetElementById("canvas")
 	if canvas.IsNull() {
-		canvas = js.Global().Get("document").Call("createElement", "canvas")
+		canvas = document.CreateCanvasElement()
 		canvas.Set("id", "canvas")
-		js.Global().Get("document").Get("body").Call("appendChild", canvas)
+		document.Body.AppendCanvasChild(canvas)
 	}
 
 	// Set the canvas size to match the viewport size
-	canvas.Set("width", js.Global().Get("document").Get("documentElement").Get("clientWidth"))
-	canvas.Set("height", js.Global().Get("document").Get("documentElement").Get("clientHeight"))
+	canvas.Set("width", document.DocumentElement.ClientWidth())
+	canvas.Set("height", document.DocumentElement.ClientHeight())
 
 	// Prevent scrolling on the HTML and body elements
-	js.Global().Get("document").Get("documentElement").Get("style").Set("overflow", "hidden")
-	js.Global().Get("document").Get("body").Get("style").Set("overflow", "hidden")
+	document.DocumentElement.Style.Set("overflow", "hidden")
+	document.Body.Style.Set("overflow", "hidden")
 
 	// Listen for window resize events to adjust the canvas size
-	js.Global().Get("window").Call("addEventListener", "resize", js.FuncOf(func(this js.Value, p []js.Value) interface{} {
-		canvas.Set("width", js.Global().Get("document").Get("documentElement").Get("clientWidth"))
-		canvas.Set("height", js.Global().Get("document").Get("documentElement").Get("clientHeight"))
+	window.AddEventListener("resize", js.FuncOf(func(this js.Value, p []js.Value) interface{} {
+		canvas.Set("width", document.DocumentElement.ClientWidth())
+		canvas.Set("height", document.DocumentElement.ClientHeight())
 		return nil
 	}))
 }