@gjsify/example-dom-three-geometry-teapot 0.27.1 → 0.29.0

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@gjsify/example-dom-three-geometry-teapot",
-  "version": "0.27.1",
+  "version": "0.29.0",
   "description": "Three.js geometry teapot example ported from refs/three/examples/webgl_geometry_teapot.html with Adwaita controls",
   "main": "dist/gjs.js",
   "type": "module",
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
   "exports": {
     "./browser": "./src/browser/browser.ts",
@@ -26,7 +27,7 @@
     "build:assets": "gjsify copy src/browser/index.html src/browser/webgl.css src/assets dist/"
   },
   "dependencies": {
-    "@gjsify/webgl": "^0.27.1"
+    "@gjsify/webgl": "^0.29.0"
   },
   "devDependencies": {
     "@girs/adw-1": "^4.1.0",
@@ -34,12 +35,12 @@
     "@girs/gjs": "^4.1.0",
     "@girs/gobject-2.0": "^4.1.0",
     "@girs/gtk-4.0": "^4.1.0",
-    "@gjsify/adwaita-icons": "^0.27.1",
-    "@gjsify/adwaita-web": "^0.27.1",
-    "@gjsify/cli": "^0.27.1",
-    "@gjsify/devtools": "^0.27.1",
+    "@gjsify/adwaita-icons": "^0.29.0",
+    "@gjsify/adwaita-web": "^0.29.0",
+    "@gjsify/cli": "^0.29.0",
+    "@gjsify/devtools": "^0.29.0",
     "@gjsify/node-gi": "file:../../../packages/node-gi/node-gi",
-    "@gjsify/vite-plugin-blueprint": "^0.27.1",
+    "@gjsify/vite-plugin-blueprint": "^0.29.0",
     "@types/node": "^25.9.2",
     "@types/three": "^0.185.0",
     "http-server": "^14.1.1",

package/src/browser/browser-main.ts

@@ -0,0 +1,4 @@
+// Standalone browser entry point — runs the teapot demo fullscreen.
+import { mount } from './browser.js';
+
+mount(document.body);

package/src/browser/browser.ts

@@ -0,0 +1,284 @@
+// Browser UI for three-geometry-teapot example.
+// Mirrors the GJS/Adwaita UI from gjs/teapot-window.ts using @gjsify/adwaita-web.
+
+import '@gjsify/adwaita-web'; // registers the custom elements + self-injects the stylesheet
+import type { AdwOverlaySplitView, AdwHeaderBar } from '@gjsify/adwaita-web';
+import { mediaPlaybackPauseSymbolic, mediaPlaybackStartSymbolic } from '@gjsify/adwaita-icons/actions';
+import {
+    start,
+    TESS_VALUES,
+    SHADING_VALUES,
+    DEFAULT_TESS_INDEX,
+    DEFAULT_SHADING_INDEX,
+    type TeapotDemo,
+} from '../three-demo.js';
+
+export interface MountOptions {
+    /** Base path for loading texture assets (forwarded to three-demo). */
+    assetBase?: string;
+}
+
+/** Handle returned by `mount()` so hosts (e.g. the website slideshow) can pause and resume rendering. */
+export interface ShowcaseHandle {
+    pause(): void;
+    resume(): void;
+    readonly isPaused: boolean;
+}
+
+/** Parse a trusted literal SVG string into an SVGElement. */
+function parseSvg(svgSource: string): SVGElement {
+    const doc = new DOMParser().parseFromString(svgSource, 'image/svg+xml');
+    return doc.documentElement as unknown as SVGElement;
+}
+
+/** Replace a button's icon with a freshly-parsed copy of the given SVG source. */
+function setButtonIcon(btn: HTMLButtonElement, svgSource: string): void {
+    btn.replaceChildren(parseSvg(svgSource));
+}
+
+/**
+ * Create the Adwaita teapot UI and mount it into the given container.
+ * The container receives an adw-window with sidebar controls and a WebGL canvas.
+ */
+export function mount(container: HTMLElement, options?: MountOptions): ShowcaseHandle {
+    // Build UI — mirrors GJS Blueprint structure
+    const win = document.createElement('adw-window');
+    win.setAttribute('width', '1100');
+    win.setAttribute('height', '700');
+
+    // Header bar (toggle button added after DOM connection below)
+    const headerBar = document.createElement('adw-header-bar') as AdwHeaderBar;
+    headerBar.setAttribute('title', 'Three.js Teapot');
+
+    // Sidebar toggle button
+    const toggleBtn = document.createElement('button');
+    toggleBtn.className = 'adw-header-btn adw-sidebar-toggle-icon active';
+    toggleBtn.title = 'Toggle Sidebar';
+
+    // Pause/Resume rendering button — placed in header bar end section.
+    const pauseBtn = document.createElement('button');
+    pauseBtn.className = 'adw-header-btn';
+    pauseBtn.title = 'Pause Rendering';
+    setButtonIcon(pauseBtn, mediaPlaybackPauseSymbolic);
+
+    // OverlaySplitView — sidebar + content
+    const splitView = document.createElement('adw-overlay-split-view') as AdwOverlaySplitView;
+    splitView.setAttribute('min-sidebar-width', '280');
+    splitView.setAttribute('max-sidebar-width', '400');
+    splitView.setAttribute('sidebar-width-fraction', '0.30');
+    splitView.setAttribute('show-sidebar', '');
+
+    // Sidebar content
+    const sidebarContent = document.createElement('div');
+    sidebarContent.setAttribute('slot', 'sidebar');
+    sidebarContent.className = 'adw-sidebar-content';
+
+    // Geometry group
+    const geoGroup = document.createElement('adw-preferences-group');
+    geoGroup.setAttribute('title', 'Geometry');
+
+    const tessRow = document.createElement('adw-combo-row');
+    tessRow.setAttribute('title', 'Tessellation Level');
+    tessRow.setAttribute('items', JSON.stringify(TESS_VALUES.map(String)));
+    tessRow.setAttribute('selected', String(DEFAULT_TESS_INDEX));
+
+    const lidRow = document.createElement('adw-switch-row');
+    lidRow.setAttribute('title', 'Display Lid');
+    lidRow.setAttribute('active', '');
+
+    const bodyRow = document.createElement('adw-switch-row');
+    bodyRow.setAttribute('title', 'Display Body');
+    bodyRow.setAttribute('active', '');
+
+    const bottomRow = document.createElement('adw-switch-row');
+    bottomRow.setAttribute('title', 'Display Bottom');
+    bottomRow.setAttribute('active', '');
+
+    const fitLidRow = document.createElement('adw-switch-row');
+    fitLidRow.setAttribute('title', 'Snug Lid');
+
+    const nonblinnRow = document.createElement('adw-switch-row');
+    nonblinnRow.setAttribute('title', 'Original Scale');
+
+    geoGroup.append(tessRow, lidRow, bodyRow, bottomRow, fitLidRow, nonblinnRow);
+
+    // Material group
+    const matGroup = document.createElement('adw-preferences-group');
+    matGroup.setAttribute('title', 'Material');
+
+    const shadingRow = document.createElement('adw-combo-row');
+    shadingRow.setAttribute('title', 'Shading');
+    shadingRow.setAttribute('items', JSON.stringify([...SHADING_VALUES]));
+    shadingRow.setAttribute('selected', String(DEFAULT_SHADING_INDEX));
+
+    matGroup.append(shadingRow);
+
+    sidebarContent.append(geoGroup, matGroup);
+
+    // GL container (content slot) — inline styles so the showcase
+    // is self-contained and works regardless of host CSS.
+    const glContainer = document.createElement('div');
+    glContainer.setAttribute('slot', 'content');
+    glContainer.id = 'gl-area-container';
+    glContainer.style.cssText = 'flex:1;position:relative;min-width:0;min-height:0';
+
+    const canvas = document.createElement('canvas');
+    canvas.id = 'webgl-canvas';
+    canvas.style.cssText = 'display:block;width:100%;height:100%;position:absolute;inset:0';
+    glContainer.append(canvas);
+
+    splitView.append(sidebarContent, glContainer);
+    win.append(headerBar, splitView);
+    container.append(win);
+
+    // Append toggle button to header bar start section AFTER DOM connection
+    const startSection = headerBar.startSection ?? headerBar.querySelector('.adw-header-bar-start');
+    if (startSection) {
+        startSection.appendChild(toggleBtn);
+    } else {
+        headerBar.prepend(toggleBtn);
+    }
+
+    const endSection = headerBar.endSection ?? headerBar.querySelector('.adw-header-bar-end');
+    if (endSection) {
+        endSection.appendChild(pauseBtn);
+    } else {
+        headerBar.append(pauseBtn);
+    }
+
+    // Sidebar toggle wiring
+    toggleBtn.addEventListener('click', () => {
+        splitView.toggleSidebar();
+        toggleBtn.classList.toggle('active', splitView.showSidebar);
+    });
+
+    splitView.addEventListener('sidebar-toggled', () => {
+        toggleBtn.classList.toggle('active', splitView.showSidebar);
+    });
+
+    // Responsive breakpoints — mirror GJS Adw.Breakpoint behavior
+    let lastCollapsed: boolean | null = null;
+    new ResizeObserver(([entry]) => {
+        const width = entry.contentRect.width;
+        const shouldCollapse = width < 800;
+        if (shouldCollapse === lastCollapsed) return;
+        lastCollapsed = shouldCollapse;
+        splitView.collapsed = shouldCollapse;
+        splitView.showSidebar = !shouldCollapse;
+        toggleBtn.classList.toggle('active', !shouldCollapse);
+    }).observe(win);
+
+    // Sync canvas size with container and re-render on resize
+    // (needed when slide becomes visible after being display:none)
+    canvas.width = glContainer.clientWidth;
+    canvas.height = glContainer.clientHeight;
+
+    let demo: TeapotDemo | null = null;
+    // Buffers pause() calls that arrive before the demo exists.
+    let pendingPause = false;
+    new ResizeObserver(() => {
+        const w = glContainer.clientWidth;
+        const h = glContainer.clientHeight;
+        if (w > 0 && h > 0) {
+            canvas.width = w;
+            canvas.height = h;
+            if (!demo) {
+                demo = start(canvas, { assetBase: options?.assetBase });
+                connectControls(
+                    demo,
+                    tessRow as AdwRow,
+                    shadingRow as AdwRow,
+                    lidRow as AdwRow,
+                    bodyRow as AdwRow,
+                    bottomRow as AdwRow,
+                    fitLidRow as AdwRow,
+                    nonblinnRow as AdwRow,
+                );
+                if (pendingPause) {
+                    demo.pause();
+                    pendingPause = false;
+                }
+            } else {
+                demo.render();
+            }
+        }
+    }).observe(glContainer);
+
+    // Pause button wiring — toggles demo state and swaps the icon.
+    function updatePauseButton(paused: boolean): void {
+        setButtonIcon(pauseBtn, paused ? mediaPlaybackStartSymbolic : mediaPlaybackPauseSymbolic);
+        pauseBtn.title = paused ? 'Resume Rendering' : 'Pause Rendering';
+    }
+    pauseBtn.addEventListener('click', () => {
+        if (demo) {
+            if (demo.isPaused) demo.resume();
+            else demo.pause();
+            updatePauseButton(demo.isPaused);
+        } else {
+            pendingPause = !pendingPause;
+            updatePauseButton(pendingPause);
+        }
+    });
+
+    return {
+        get isPaused() {
+            return demo ? demo.isPaused : pendingPause;
+        },
+        pause() {
+            if (demo) {
+                demo.pause();
+                updatePauseButton(true);
+            } else {
+                pendingPause = true;
+                updatePauseButton(true);
+            }
+        },
+        resume() {
+            if (demo) {
+                demo.resume();
+                updatePauseButton(false);
+            } else {
+                pendingPause = false;
+                updatePauseButton(false);
+            }
+        },
+    };
+}
+
+// Adwaita web components expose custom properties (.selected, .active) not in HTMLElement types.
+type AdwRow = HTMLElement & Record<string, unknown>;
+
+function connectControls(
+    demo: TeapotDemo,
+    tessRow: AdwRow,
+    shadingRow: AdwRow,
+    lidRow: AdwRow,
+    bodyRow: AdwRow,
+    bottomRow: AdwRow,
+    fitLidRow: AdwRow,
+    nonblinnRow: AdwRow,
+) {
+    tessRow.addEventListener('notify::selected', () => {
+        demo.effectController.newTess = TESS_VALUES[tessRow.selected as number];
+        demo.render();
+    });
+
+    shadingRow.addEventListener('notify::selected', () => {
+        demo.effectController.newShading = SHADING_VALUES[shadingRow.selected as number];
+        demo.render();
+    });
+
+    const toggleRows: Array<[AdwRow, 'lid' | 'body' | 'bottom' | 'fitLid' | 'nonblinn']> = [
+        [lidRow, 'lid'],
+        [bodyRow, 'body'],
+        [bottomRow, 'bottom'],
+        [fitLidRow, 'fitLid'],
+        [nonblinnRow, 'nonblinn'],
+    ];
+    for (const [row, key] of toggleRows) {
+        row.addEventListener('notify::active', () => {
+            demo.effectController[key] = Boolean(row.active);
+            demo.render();
+        });
+    }
+}

package/src/browser/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <title>Three.js Teapot — gjsify</title>
+  <link rel="stylesheet" href="./webgl.css" type="text/css" />
+  <link rel="stylesheet" href="./browser.css" type="text/css" />
+  <script src="./browser.js" type="module" defer></script>
+</head>
+<body></body>
+</html>

package/src/browser/webgl.css

@@ -0,0 +1,53 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+html, body {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    background: #2d2d2d;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+adw-window {
+    max-width: 100%;
+    max-height: 100%;
+}
+
+.adw-window-body {
+    display: flex;
+    flex: 1;
+    min-height: 0;
+}
+
+.adw-sidebar {
+    width: 320px;
+    flex-shrink: 0;
+    overflow-y: auto;
+}
+
+.adw-sidebar-content {
+    padding: 12px;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+
+#gl-area-container {
+    flex: 1;
+    position: relative;
+    min-width: 0;
+}
+
+#gl-area-container canvas {
+    display: block;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    inset: 0;
+}

package/src/gjs/gjs.ts

@@ -0,0 +1,27 @@
+// GJS/Adwaita entry point for three-geometry-teapot example.
+// Ported from refs/three/examples/webgl_geometry_teapot.html
+
+import Adw from 'gi://Adw?version=1';
+import Gio from 'gi://Gio?version=2.0';
+
+import { installDevtools } from '@gjsify/devtools';
+import { TeapotWindow } from './teapot-window.js';
+
+const app = new Adw.Application({
+    application_id: 'gjsify.examples.three-geometry-teapot',
+    flags: Gio.ApplicationFlags.FLAGS_NONE,
+});
+
+app.connect('startup', () => installDevtools(app));
+
+app.connect('activate', () => {
+    let win = app.get_active_window();
+    if (!win) win = new TeapotWindow(app);
+    win.present();
+});
+
+// runAsync (NOT the sync run()): defers the blocking main loop to a macrotask so
+// the synchronous view load doesn't hang on its spinner, and it is the required
+// lifecycle on the `--app node` reverse bridge (a sync run() deadlocks there) as
+// well as the GJS-recommended one (Gio.Application.runAsync). Runs on all runtimes.
+await app.runAsync([]);

package/src/gjs/teapot-window.blp

@@ -0,0 +1,111 @@
+using Gtk 4.0;
+using Adw 1;
+
+template $TeapotWindow: Adw.ApplicationWindow {
+  default-width: 1100;
+  default-height: 700;
+  title: "Three.js Teapot";
+
+  [breakpoint]
+  Adw.Breakpoint {
+    condition ("max-width: 799sp")
+    setters {
+      splitView.collapsed: true;
+      splitView.show-sidebar: false;
+    }
+  }
+
+  [breakpoint]
+  Adw.Breakpoint {
+    condition ("min-width: 800sp")
+    setters {
+      splitView.collapsed: false;
+      splitView.show-sidebar: true;
+    }
+  }
+
+  content: Gtk.Box {
+    orientation: vertical;
+
+    Adw.HeaderBar {
+      [start]
+      ToggleButton sidebarToggleButton {
+        icon-name: "sidebar-show-symbolic";
+        tooltip-text: "Toggle Sidebar";
+        active: bind splitView.show-sidebar;
+      }
+
+      [end]
+      Gtk.Button pauseButton {
+        icon-name: "media-playback-pause-symbolic";
+        tooltip-text: "Pause Rendering";
+      }
+    }
+
+    Adw.OverlaySplitView splitView {
+      sidebar-width-fraction: 0.30;
+      min-sidebar-width: 280;
+      max-sidebar-width: 400;
+      show-sidebar: bind sidebarToggleButton.active;
+
+      sidebar: Gtk.ScrolledWindow {
+        hscrollbar-policy: never;
+
+        Gtk.Box {
+          orientation: vertical;
+          spacing: 12;
+          margin-top: 12;
+          margin-bottom: 12;
+          margin-start: 12;
+          margin-end: 12;
+
+          Adw.PreferencesGroup {
+            title: "Geometry";
+
+            Adw.ComboRow tessRow {
+              title: "Tessellation Level";
+            }
+
+            Adw.SwitchRow lidRow {
+              title: "Display Lid";
+              active: true;
+            }
+
+            Adw.SwitchRow bodyRow {
+              title: "Display Body";
+              active: true;
+            }
+
+            Adw.SwitchRow bottomRow {
+              title: "Display Bottom";
+              active: true;
+            }
+
+            Adw.SwitchRow fitLidRow {
+              title: "Snug Lid";
+              active: false;
+            }
+
+            Adw.SwitchRow nonblinnRow {
+              title: "Original Scale";
+              active: false;
+            }
+          }
+
+          Adw.PreferencesGroup {
+            title: "Material";
+
+            Adw.ComboRow shadingRow {
+              title: "Shading";
+            }
+          }
+        }
+      };
+
+      content: Gtk.Box glAreaContainer {
+        hexpand: true;
+        vexpand: true;
+      };
+    }
+  };
+}