Merge pull request #17 from gaarutyunov/claude/fix-canvas-cube-controls-01QrkYYrKSL6AahZgmtozD8S

fix: Make canvas square to prevent cube distortion

Author: gaarutyunov

examples/webgpu-cube/app.gx

@@ -1,6 +1,7 @@
 package main
 
 import "fmt"
+import "github.com/gaarutyunov/guix/pkg/runtime"
 
 func App() (Component) {
 	rotationX := 0.0
@@ -9,6 +10,8 @@ func App() (Component) {
 	speed := 1.0
 	commands := make(chan ControlCommand, 10)
 	controlState := make(chan ControlState, 10)
+	rotXPtr := &rotationX
+	rotYPtr := &rotationY
 
 	go func() {
 		state := ControlState{AutoRotate: autoRotate, Speed: float32(speed)}
@@ -60,10 +63,10 @@ func App() (Component) {
 		Canvas(
 			ID("webgpu-canvas"),
 			Width(500),
-			Height(375),
+			Height(500),
 			GPURenderUpdate(renderUpdate)
 		) {
-			GPUScene(NewCubeScene(float32(rotationX), float32(rotationY)))
+			GPUScene(NewCubeScene(rotXPtr, rotYPtr))
 		}
 		Controls(WithCommands(commands), WithState(controlState))
 	}

examples/webgpu-cube/app_gen.go

@@ -44,7 +44,9 @@
             display: block;
             border-radius: 8px;
             box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
-            max-width: 100%;
+            width: 100%;
+            max-width: 500px;
+            aspect-ratio: 1 / 1;
             height: auto;
         }
 

examples/webgpu-cube/index.html

@@ -1,16 +1,18 @@
 package main
 
-func CubeScene(rotX float32, rotY float32) (Scene) {
+func CubeScene(rotX *float64, rotY *float64) (Scene) {
+	rotZ := 0.0
+
 	Scene(Background(0.1, 0.1, 0.15, 1.0)) {
 		Mesh(
-			GeometryProp(NewBoxGeometry(2.0, 2.0, 2.0)),
-			MaterialProp(StandardMaterial(
+			WithGeometry(NewBoxGeometry(2.0, 2.0, 2.0)),
+			WithMaterial(StandardMaterial(
 				Color(0.91, 0.27, 0.38, 1.0),
 				Metalness(0.3),
 				Roughness(0.4)
 			)),
 			Position(0, 0, 0),
-			Rotation(rotX, rotY, 0),
+			BindRotation(rotX, rotY, &rotZ),
 			ScaleValue(1, 1, 1)
 		)
 

examples/webgpu-cube/scene.gx

@@ -39,16 +39,44 @@ func Vet() error {
 	return sh.RunWith(env, "go", "vet", "./pkg/runtime/...")
 }
 
-// Test runs all tests
+// Test runs all tests (excluding WASM-only packages)
 func Test() error {
 	fmt.Println("Running tests...")
-	return sh.RunV("go", "test", "./...")
+	// Test non-WASM packages (exclude runtime which requires WASM runtime to execute)
+	packages := []string{
+		"./cmd/...",
+		"./internal/...",
+		"./pkg/ast",
+		"./pkg/codegen",
+		"./pkg/parser",
+		"./pkg/visitors",
+	}
+	for _, pkg := range packages {
+		if err := sh.RunV("go", "test", pkg); err != nil {
+			return err
+		}
+	}
+	return nil
 }
 
-// Build builds all packages for native target
+// Build builds all packages for native target (excluding WASM-only packages)
 func Build() error {
 	fmt.Println("Building native packages...")
-	return sh.RunV("go", "build", "./...")
+	// Build non-WASM packages (exclude runtime which is WASM-only)
+	packages := []string{
+		"./cmd/...",
+		"./internal/...",
+		"./pkg/ast",
+		"./pkg/codegen",
+		"./pkg/parser",
+		"./pkg/visitors",
+	}
+	for _, pkg := range packages {
+		if err := sh.RunV("go", "build", pkg); err != nil {
+			return err
+		}
+	}
+	return nil
 }
 
 // BuildWasm builds the runtime package for WebAssembly

examples/webgpu-cube/scene_gen.go

@@ -86,10 +86,10 @@ type Type struct {
 	IsChannel   bool   `@("<-")?`
 	IsChan      bool   `@("chan")?`
 	IsSlice     bool   `@("[" "]")?`
+	IsPointer   bool   `@("*")?`
 	IsInterface bool   `@("interface" "{" "}")?` // Empty interface type
 	Name        string `@Ident?`
 	Generic     *Type  `("[" @@ "]")?`
-	IsPointer   bool   `@("*")?`
 	IsFunc      bool   `@("func")?`
 	FuncParams  []*Type
 	FuncResults []*Type
@@ -219,7 +219,7 @@ type KeyValue struct {
 // UnaryExpr represents a unary expression (e.g., !x, -x)
 type UnaryExpr struct {
 	Pos   lexer.Position
-	Op    string   `@("!" | "-" | "+")`
+	Op    string   `@("!" | "-" | "+" | "&" | "*")`
 	Right *Primary `@@`
 }
 

magefile.go

@@ -745,6 +745,27 @@ func (g *Generator) generateSceneConstructor(comp *guixast.Component) *ast.FuncD
 
 // generateRenderSceneMethod generates the RenderScene method for a Scene component
 func (g *Generator) generateRenderSceneMethod(comp *guixast.Component) *ast.FuncDecl {
+	// Generate variable declarations first
+	var stmts []ast.Stmt
+	if comp.Body != nil && len(comp.Body.VarDecls) > 0 {
+		for _, varDecl := range comp.Body.VarDecls {
+			// Generate: varName := value
+			var lhs []ast.Expr
+			for _, name := range varDecl.Names {
+				lhs = append(lhs, ast.NewIdent(name))
+			}
+			var rhs []ast.Expr
+			for _, value := range varDecl.Values {
+				rhs = append(rhs, g.generateExpr(value))
+			}
+			stmts = append(stmts, &ast.AssignStmt{
+				Lhs: lhs,
+				Tok: token.DEFINE, // :=
+				Rhs: rhs,
+			})
+		}
+	}
+
 	// Generate scene graph from body children
 	var sceneNode ast.Expr
 	if comp.Body != nil && len(comp.Body.Children) > 0 {
@@ -760,6 +781,11 @@ func (g *Generator) generateRenderSceneMethod(comp *guixast.Component) *ast.Func
 		}
 	}
 
+	// Add return statement
+	stmts = append(stmts, &ast.ReturnStmt{
+		Results: []ast.Expr{sceneNode},
+	})
+
 	return &ast.FuncDecl{
 		Recv: &ast.FieldList{
 			List: []*ast.Field{
@@ -787,11 +813,7 @@ func (g *Generator) generateRenderSceneMethod(comp *guixast.Component) *ast.Func
 			},
 		},
 		Body: &ast.BlockStmt{
-			List: []ast.Stmt{
-				&ast.ReturnStmt{
-					Results: []ast.Expr{sceneNode},
-				},
-			},
+			List: stmts,
 		},
 	}
 }
@@ -1867,6 +1889,7 @@ var runtimeFunctions = map[string]bool{
 	"LookAtPos": true, "Background": true,
 	"Width": true, "Height": true,
 	"GeometryProp": true, "MaterialProp": true, "GPURenderUpdate": true,
+	"WithGeometry": true, "WithMaterial": true, "BindRotation": true,
 	// GPU constructors
 	"NewBoxGeometry": true, "NewSphereGeometry": true, "NewPlaneGeometry": true,
 	"StandardMaterial": true,
@@ -2428,6 +2451,10 @@ func (g *Generator) unaryOpToToken(op string) token.Token {
 		return token.SUB
 	case "+":
 		return token.ADD
+	case "&":
+		return token.AND
+	case "*":
+		return token.MUL
 	default:
 		return token.NOT // Default fallback
 	}

pkg/ast/ast.go

@@ -20,14 +20,22 @@ type SceneRenderer struct {
 	AmbientLight  *Light
 }
 
+// ReactiveBinding holds pointers to values that should be synced to transform
+type ReactiveBinding struct {
+	RotationX *float64
+	RotationY *float64
+	RotationZ *float64
+}
+
 // MeshInstance represents an instantiated mesh with buffers
 type MeshInstance struct {
-	Transform    Transform
-	Geometry     Geometry
-	Material     *Material
-	VertexBuffer *GPUBuffer
-	IndexBuffer  *GPUBuffer
-	IndexCount   int
+	Transform       Transform
+	Geometry        Geometry
+	Material        *Material
+	VertexBuffer    *GPUBuffer
+	IndexBuffer     *GPUBuffer
+	IndexCount      int
+	ReactiveBinding *ReactiveBinding // Reactive binding for auto-updates
 }
 
 // NewSceneRenderer creates a new scene renderer
@@ -160,13 +168,22 @@ func (sr *SceneRenderer) createMeshInstance(node *GPUNode) (*MeshInstance, error
 		}
 	}
 
+	// Check for reactive binding
+	var binding *ReactiveBinding
+	if node.Properties != nil {
+		if b, ok := node.Properties["bindRotation"].(*ReactiveBinding); ok {
+			binding = b
+		}
+	}
+
 	return &MeshInstance{
-		Transform:    node.Transform,
-		Geometry:     node.Geometry,
-		Material:     material,
-		VertexBuffer: vertexBuffer,
-		IndexBuffer:  indexBuffer,
-		IndexCount:   len(indices),
+		Transform:       node.Transform,
+		Geometry:        node.Geometry,
+		Material:        material,
+		VertexBuffer:    vertexBuffer,
+		IndexBuffer:     indexBuffer,
+		IndexCount:      len(indices),
+		ReactiveBinding: binding,
 	}, nil
 }
 
@@ -227,8 +244,28 @@ func (sr *SceneRenderer) createPipeline() error {
 	return nil
 }
 
+// syncReactiveBindings updates mesh transforms from reactive bindings
+func (sr *SceneRenderer) syncReactiveBindings() {
+	for _, mesh := range sr.Meshes {
+		if binding := mesh.ReactiveBinding; binding != nil {
+			if binding.RotationX != nil {
+				mesh.Transform.Rotation.X = float32(*binding.RotationX)
+			}
+			if binding.RotationY != nil {
+				mesh.Transform.Rotation.Y = float32(*binding.RotationY)
+			}
+			if binding.RotationZ != nil {
+				mesh.Transform.Rotation.Z = float32(*binding.RotationZ)
+			}
+		}
+	}
+}
+
 // Render renders the scene
 func (sr *SceneRenderer) Render() {
+	// Sync reactive bindings before rendering
+	sr.syncReactiveBindings()
+
 	if sr.ActiveCamera == nil {
 		logError("No active camera in scene")
 		return

pkg/codegen/codegen.go

@@ -156,16 +156,36 @@ func OnGPURender(fn func(*GPUCanvas, float64)) GPUProp {
 	return GPUProp{Key: "onRender", Value: fn}
 }
 
-// GeometryProp wraps geometry for property passing
-func GeometryProp(geom Geometry) GPUProp {
+// WithGeometry wraps geometry for property passing
+func WithGeometry(geom Geometry) GPUProp {
 	return GPUProp{Key: "geometry", Value: geom}
 }
 
-// MaterialProp wraps material for property passing
-func MaterialProp(mat *Material) GPUProp {
+// GeometryProp is deprecated, use WithGeometry instead
+func GeometryProp(geom Geometry) GPUProp {
+	return WithGeometry(geom)
+}
+
+// WithMaterial wraps material for property passing
+func WithMaterial(mat *Material) GPUProp {
 	return GPUProp{Key: "material", Value: mat}
 }
 
+// MaterialProp is deprecated, use WithMaterial instead
+func MaterialProp(mat *Material) GPUProp {
+	return WithMaterial(mat)
+}
+
+// BindRotation creates a reactive binding for rotation values
+// The mesh will automatically update its rotation from these pointers each frame
+func BindRotation(x, y, z *float64) GPUProp {
+	return GPUProp{Key: "bindRotation", Value: &ReactiveBinding{
+		RotationX: x,
+		RotationY: y,
+		RotationZ: z,
+	}}
+}
+
 // GPU Node Builders
 // Note: Declarative GPU canvas builders are currently unused.
 // The working implementation uses CreateGPUCanvas() directly.