Merge pull request #16 from gaarutyunov/claude/fix-cube-example-01VhpkmZkoUefZUFknZqaKjP

fix: Fix WebGPU cube example loading and rotation issues

Author: gaarutyunov

examples/calculator/calculator_gen.go

@@ -17,18 +17,23 @@ func App() (Component) {
 	}()
 
 	go func() {
+		log("[App] Command processing goroutine started")
 		for cmd := range commands {
 			log(fmt.Sprintf("[App] Received command: %s", cmd.String()))
 
 			switch cmd.Type {
 			case "rotX":
 				rotationX += float64(cmd.Value)
+				log(fmt.Sprintf("[App] Updated rotationX to: %.2f", rotationX))
 			case "rotY":
 				rotationY += float64(cmd.Value)
+				log(fmt.Sprintf("[App] Updated rotationY to: %.2f", rotationY))
 			case "autoRotate":
 				autoRotate = !autoRotate
+				log(fmt.Sprintf("[App] Toggled autoRotate to: %t", autoRotate))
 			case "speed":
 				speed = float64(cmd.Value)
+				log(fmt.Sprintf("[App] Updated speed to: %.2f", speed))
 			}
 
 			state := ControlState{AutoRotate: autoRotate, Speed: float32(speed)}
@@ -39,15 +44,24 @@ func App() (Component) {
 				log("[App] Channel full, skipping state update")
 			}
 		}
+		log("[App] Command processing goroutine ended")
 	}()
 
+	renderUpdate := func(delta float64, rendererInterface interface{}) {
+		if autoRotate {
+			rotationY = rotationY + (delta * speed)
+			rotationX = rotationX + (delta * speed * 0.5)
+		}
+	}
+
 	Div(
 		Class("webgpu-container")
 	) {
 		Canvas(
 			ID("webgpu-canvas"),
-			Width(600),
-			Height(400)
+			Width(500),
+			Height(375),
+			GPURenderUpdate(renderUpdate)
 		) {
 			GPUScene(NewCubeScene(float32(rotationX), float32(rotationY)))
 		}

examples/counter/counter_gen.go

@@ -15,7 +15,7 @@ type ControlState struct {
 
 @props func Controls(commands chan ControlCommand, state chan ControlState) (Component) {
 	currentState := <-state
-	log(fmt.Sprintf("[Controls] Received state: %s", currentState.String()))
+	log(fmt.Sprintf("[Controls] Received initial state: %s", currentState.String()))
 
 	Div(ID("controls"), Class("controls-panel")) {
 		// Arrow buttons
@@ -45,7 +45,11 @@ type ControlState struct {
 					ID("btn-toggle"),
 					Class("control-button toggle"),
 					OnClick(func(e Event) {
-						commands <- ControlCommand{Type: "autoRotate"}
+						log("[Controls] Toggle button clicked!")
+						cmd := ControlCommand{Type: "autoRotate"}
+						log(fmt.Sprintf("[Controls] Sending command: %s", cmd.String()))
+						commands <- cmd
+						log("[Controls] Command sent to channel")
 					})
 				) {
 					if currentState.AutoRotate {

examples/webgpu-cube/app.gx

@@ -36,12 +36,20 @@
             padding: 24px;
             box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
             backdrop-filter: blur(10px);
+            max-width: 100%;
+            width: fit-content;
         }
 
         canvas {
             display: block;
             border-radius: 8px;
             box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
+            max-width: 100%;
+            height: auto;
+        }
+
+        .webgpu-container {
+            max-width: 100%;
         }
 
         .loading {
@@ -88,6 +96,8 @@
             background: rgba(255, 255, 255, 0.03);
             border-radius: 12px;
             border: 1px solid rgba(255, 255, 255, 0.1);
+            position: relative;
+            z-index: 10;
         }
 
         /* Arrow Buttons Layout */
@@ -120,6 +130,9 @@
             align-items: center;
             justify-content: center;
             user-select: none;
+            pointer-events: auto;
+            position: relative;
+            z-index: 1;
         }
 
         .control-button:hover {

examples/webgpu-cube/app_gen.go

@@ -194,8 +194,11 @@ test.describe('WebGPU Rotating Cube', () => {
     // Wait for canvas to be rendered
     await page.waitForSelector('canvas', { timeout: 5000 });
 
-    // Wait for either controls or error to appear
-    await page.waitForSelector('#btn-toggle, div[style*="background: #ff4444"]', { timeout: 5000 });
+    // Wait for controls to appear and be fully loaded
+    await page.waitForSelector('#btn-toggle', { timeout: 5000, state: 'visible' });
+
+    // Additional wait for components to be fully interactive
+    await page.waitForTimeout(500);
 
     // Print all console messages for debugging
     console.log('\n=== Console Messages (should respond to button clicks) ===');
@@ -207,22 +210,28 @@ test.describe('WebGPU Rotating Cube', () => {
     const errorCount = await errorDivs.count();
     expect(errorCount).toBe(0);
 
-    // Get initial button text
-    const toggleButton = await page.locator('#btn-toggle');
+    // Get toggle button and verify it's visible and enabled
+    const toggleButton = page.locator('#btn-toggle');
+    await expect(toggleButton).toBeVisible();
+
+    // Scroll button into view to ensure it's clickable
+    await toggleButton.scrollIntoViewIfNeeded();
+    await page.waitForTimeout(100);
+
     const initialText = await toggleButton.textContent();
     expect(initialText).toBe('⏸'); // Should be pause icon initially
 
     // Click toggle button
     await toggleButton.click();
-    await page.waitForTimeout(100);
+    await page.waitForTimeout(300);
 
     // Check that button text changed
     const newText = await toggleButton.textContent();
     expect(newText).toBe('▶'); // Should be play icon now
 
     // Click again to toggle back
     await toggleButton.click();
-    await page.waitForTimeout(100);
+    await page.waitForTimeout(300);
 
     const finalText = await toggleButton.textContent();
     expect(finalText).toBe('⏸'); // Should be pause icon again
@@ -241,8 +250,11 @@ test.describe('WebGPU Rotating Cube', () => {
     // Wait for canvas to be rendered
     await page.waitForSelector('canvas', { timeout: 5000 });
 
-    // Wait for either controls or error to appear
-    await page.waitForSelector('#speed-control, div[style*="background: #ff4444"]', { timeout: 5000 });
+    // Wait for speed control to appear
+    await page.waitForSelector('#speed-control', { timeout: 5000, state: 'visible' });
+
+    // Additional wait for full interactivity
+    await page.waitForTimeout(500);
 
     // Print all console messages for debugging
     console.log('\n=== Console Messages (should show speed control when auto-rotate is enabled) ===');
@@ -255,13 +267,16 @@ test.describe('WebGPU Rotating Cube', () => {
     expect(errorCount).toBe(0);
 
     // Speed control should be visible initially (auto-rotate is on by default)
-    const speedControl = await page.locator('#speed-control');
+    const speedControl = page.locator('#speed-control');
     await expect(speedControl).toBeVisible();
 
     // Toggle auto-rotate off
-    const toggleButton = await page.locator('#btn-toggle');
+    const toggleButton = page.locator('#btn-toggle');
+    await expect(toggleButton).toBeVisible();
+    await toggleButton.scrollIntoViewIfNeeded();
+    await page.waitForTimeout(100);
     await toggleButton.click();
-    await page.waitForTimeout(200);
+    await page.waitForTimeout(300);
 
     // Speed control should not be rendered (not in DOM) when auto-rotate is off
     const speedControlCount = await page.locator('#speed-control').count();

examples/webgpu-cube/controls.gx

@@ -86,7 +86,8 @@ type Type struct {
 	IsChannel   bool   `@("<-")?`
 	IsChan      bool   `@("chan")?`
 	IsSlice     bool   `@("[" "]")?`
-	Name        string `@Ident`
+	IsInterface bool   `@("interface" "{" "}")?` // Empty interface type
+	Name        string `@Ident?`
 	Generic     *Type  `("[" @@ "]")?`
 	IsPointer   bool   `@("*")?`
 	IsFunc      bool   `@("func")?`