@gjsify/example-dom-three-loader-ldraw 0.1.7 → 0.38.0

package/src/browser/browser-main.ts

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

package/src/browser/browser.ts

@@ -0,0 +1,199 @@
+// Browser UI for three-loader-ldraw example.
+// Mirrors the GJS/Adwaita UI using @gjsify/adwaita-web.
+// Ported from refs/three/examples/webgl_loader_ldraw.html
+// Original: MIT license, three.js authors (https://threejs.org)
+// This software uses the LDraw Parts Library (http://www.ldraw.org), CC BY 2.0.
+
+import '@gjsify/adwaita-web';
+import '@gjsify/adwaita-web/style.css';
+import type { AdwOverlaySplitView } from '@gjsify/adwaita-web';
+import { start, MODEL_LIST, DEFAULT_MODEL_INDEX, type LDrawDemo } from '../three-demo.js';
+
+export interface MountOptions {
+    assetBase?: string;
+}
+
+/**
+ * What the website's `<ShowcaseEmbed>` holds on to: it pauses a demo that
+ * scrolls out of view, so an always-animating scene does not keep a GPU busy
+ * off-screen.
+ */
+export interface ShowcaseHandle {
+    pause(): void;
+    resume(): void;
+    readonly isPaused: boolean;
+}
+
+export function mount(container: HTMLElement, options?: MountOptions): ShowcaseHandle {
+    const { assetBase } = options ?? {};
+
+    const win = document.createElement('adw-window');
+    win.setAttribute('width', '1100');
+    win.setAttribute('height', '700');
+
+    const headerBar = document.createElement('adw-header-bar');
+    headerBar.setAttribute('title', 'LDraw Loader');
+
+    // A showcase has two hosts — the standalone page and the website embed — and only the former
+    // loads `browser/webgl.css`, so the layout has to live here rather than in that stylesheet.
+    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', '');
+
+    // Inline styles for the same reason as the GL container below.
+    const sidebarContent = document.createElement('div');
+    sidebarContent.setAttribute('slot', 'sidebar');
+    sidebarContent.className = 'adw-sidebar-content';
+    sidebarContent.style.cssText = 'padding:12px;display:flex;flex-direction:column;gap:12px';
+
+    const modelGroup = document.createElement('adw-preferences-group');
+    modelGroup.setAttribute('title', 'Model');
+
+    const modelRow = document.createElement('adw-combo-row');
+    modelRow.setAttribute('title', 'Model');
+    modelRow.setAttribute('items', JSON.stringify(MODEL_LIST.map((m) => m.name)));
+    modelRow.setAttribute('selected', String(DEFAULT_MODEL_INDEX));
+
+    modelGroup.append(modelRow);
+
+    // Rendering group
+    const renderGroup = document.createElement('adw-preferences-group');
+    renderGroup.setAttribute('title', 'Rendering');
+
+    const flatColorsRow = document.createElement('adw-switch-row');
+    flatColorsRow.setAttribute('title', 'Flat Colors');
+
+    const mergeModelRow = document.createElement('adw-switch-row');
+    mergeModelRow.setAttribute('title', 'Merge Model');
+
+    const smoothNormalsRow = document.createElement('adw-switch-row');
+    smoothNormalsRow.setAttribute('title', 'Smooth Normals');
+    smoothNormalsRow.setAttribute('active', '');
+
+    renderGroup.append(flatColorsRow, mergeModelRow, smoothNormalsRow);
+
+    // Display group
+    const displayGroup = document.createElement('adw-preferences-group');
+    displayGroup.setAttribute('title', 'Display');
+
+    const buildingStepRow = document.createElement('adw-spin-row');
+    buildingStepRow.setAttribute('title', 'Building Step');
+    buildingStepRow.setAttribute('min', '0');
+    buildingStepRow.setAttribute('max', '0');
+    buildingStepRow.setAttribute('step', '1');
+    buildingStepRow.setAttribute('value', '0');
+
+    const displayLinesRow = document.createElement('adw-switch-row');
+    displayLinesRow.setAttribute('title', 'Display Lines');
+    displayLinesRow.setAttribute('active', '');
+
+    const conditionalLinesRow = document.createElement('adw-switch-row');
+    conditionalLinesRow.setAttribute('title', 'Conditional Lines');
+    conditionalLinesRow.setAttribute('active', '');
+
+    displayGroup.append(buildingStepRow, displayLinesRow, conditionalLinesRow);
+
+    sidebarContent.append(modelGroup, renderGroup, displayGroup);
+
+    // 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);
+
+    // Sync canvas size
+    new ResizeObserver(() => {
+        canvas.width = glContainer.clientWidth;
+        canvas.height = glContainer.clientHeight;
+    }).observe(glContainer);
+    canvas.width = glContainer.clientWidth;
+    canvas.height = glContainer.clientHeight;
+
+    // Start three.js
+    const demo = start(canvas, { assetBase }, (numSteps) => {
+        // Update building step range when model loads
+        buildingStepRow.setAttribute('max', String(numSteps - 1));
+        // oxlint-disable-next-line typescript/no-explicit-any -- adw-spin-row is a custom element with no TypeScript type for .value property
+        (buildingStepRow as any).value = numSteps - 1;
+    });
+
+    connectControls(
+        demo,
+        modelRow as AdwRow,
+        flatColorsRow as AdwRow,
+        mergeModelRow as AdwRow,
+        smoothNormalsRow as AdwRow,
+        buildingStepRow as AdwRow,
+        displayLinesRow as AdwRow,
+        conditionalLinesRow as AdwRow,
+    );
+
+    return {
+        pause: () => demo.pause(),
+        resume: () => demo.resume(),
+        get isPaused() {
+            return demo.isPaused;
+        },
+    };
+}
+
+// Adwaita web components expose custom properties (.selected, .active, .value) not in HTMLElement types.
+type AdwRow = HTMLElement & Record<string, unknown>;
+
+function connectControls(
+    demo: LDrawDemo,
+    modelRow: AdwRow,
+    flatColorsRow: AdwRow,
+    mergeModelRow: AdwRow,
+    smoothNormalsRow: AdwRow,
+    buildingStepRow: AdwRow,
+    displayLinesRow: AdwRow,
+    conditionalLinesRow: AdwRow,
+) {
+    modelRow.addEventListener('notify::selected', () => {
+        demo.effectController.modelIndex = modelRow.selected as number;
+        demo.reloadObject(true);
+    });
+
+    flatColorsRow.addEventListener('notify::active', () => {
+        demo.effectController.flatColors = flatColorsRow.active as boolean;
+        demo.reloadObject(false);
+    });
+
+    mergeModelRow.addEventListener('notify::active', () => {
+        demo.effectController.mergeModel = mergeModelRow.active as boolean;
+        demo.reloadObject(false);
+    });
+
+    smoothNormalsRow.addEventListener('notify::active', () => {
+        demo.effectController.smoothNormals = smoothNormalsRow.active as boolean;
+        demo.reloadObject(false);
+    });
+
+    buildingStepRow.addEventListener('notify::value', () => {
+        demo.effectController.buildingStep = buildingStepRow.value as number;
+        demo.updateVisibility();
+    });
+
+    displayLinesRow.addEventListener('notify::active', () => {
+        demo.effectController.displayLines = displayLinesRow.active as boolean;
+        demo.updateVisibility();
+    });
+
+    conditionalLinesRow.addEventListener('notify::active', () => {
+        demo.effectController.conditionalLines = conditionalLinesRow.active as boolean;
+        demo.updateVisibility();
+    });
+}

package/src/browser/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <title>LDraw Loader — 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,28 @@
+/* Page chrome for the STANDALONE `index.html` only — how the window is centred
+   on an otherwise empty page. The window's own layout (sidebar vs. GL area) is
+   deliberately NOT here: `browser.ts` builds an <adw-overlay-split-view> and
+   inline-styles the GL container, because the website embeds `mount()` without
+   ever loading this file, and a layout that lives here is a layout the embed
+   does not get. */
+
+* {
+    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%;
+}
+

package/src/gjs/gjs.ts

@@ -0,0 +1,31 @@
+// GJS/Adwaita entry point for three-loader-ldraw example.
+// Ported from refs/three/examples/webgl_loader_ldraw.html
+// Original: MIT license, three.js authors (https://threejs.org)
+// This software uses the LDraw Parts Library (http://www.ldraw.org), CC BY 2.0.
+
+import Adw from 'gi://Adw?version=1';
+import Gio from 'gi://Gio?version=2.0';
+
+import { installDevtools } from '@gjsify/devtools';
+import { LDrawWindow } from './ldraw-window.js';
+
+const app = new Adw.Application({
+    application_id: 'gjsify.examples.three-loader-ldraw',
+    flags: Gio.ApplicationFlags.FLAGS_NONE,
+});
+
+// Opt-in devtools control plane — a no-op unless GJSIFY_DEVTOOLS is set, so
+// production runs are unaffected. It is how the rendered model gets verified
+// without a human: the model arrives through an async loader, so "the window
+// opened" proves nothing about what is in the GLArea.
+app.connect('startup', () => installDevtools(app));
+
+app.connect('activate', () => {
+    let win = app.get_active_window();
+    if (!win) win = new LDrawWindow(app);
+    win.present();
+});
+
+// runAsync (NOT the sync run()): the GJS-recommended lifecycle, and the required
+// one on the `--app node` reverse bridge where a sync run() deadlocks.
+await app.runAsync([]);

package/src/gjs/ldraw-window.blp

@@ -0,0 +1,87 @@
+using Gtk 4.0;
+using Adw 1;
+
+template $LDrawWindow: Adw.ApplicationWindow {
+  default-width: 1100;
+  default-height: 700;
+  title: "LDraw Loader";
+
+  content: Gtk.Box {
+    orientation: vertical;
+
+    Adw.HeaderBar {}
+
+    Gtk.Box {
+      orientation: horizontal;
+      hexpand: true;
+      vexpand: true;
+
+      Gtk.ScrolledWindow {
+        width-request: 320;
+        hexpand: false;
+        hscrollbar-policy: never;
+
+        Gtk.Box {
+          orientation: vertical;
+          spacing: 12;
+          margin-top: 12;
+          margin-bottom: 12;
+          margin-start: 12;
+          margin-end: 12;
+
+          Adw.PreferencesGroup {
+            title: "Model";
+
+            Adw.ComboRow modelRow {
+              title: "Model";
+            }
+          }
+
+          Adw.PreferencesGroup {
+            title: "Rendering";
+
+            Adw.SwitchRow flatColorsRow {
+              title: "Flat Colors";
+            }
+
+            Adw.SwitchRow mergeModelRow {
+              title: "Merge Model";
+            }
+
+            Adw.SwitchRow smoothNormalsRow {
+              title: "Smooth Normals";
+              active: true;
+            }
+          }
+
+          Adw.PreferencesGroup {
+            title: "Display";
+
+            Adw.SpinRow buildingStepRow {
+              title: "Building Step";
+            }
+
+            Adw.SwitchRow displayLinesRow {
+              title: "Display Lines";
+              active: true;
+            }
+
+            Adw.SwitchRow conditionalLinesRow {
+              title: "Conditional Lines";
+              active: true;
+            }
+          }
+        }
+      }
+
+      Gtk.Separator {
+        orientation: vertical;
+      }
+
+      Gtk.Box glAreaContainer {
+        hexpand: true;
+        vexpand: true;
+      }
+    }
+  };
+}

package/src/gjs/ldraw-window.ts

@@ -0,0 +1,132 @@
+// Adwaita window for the LDraw loader example.
+// Uses a Blueprint template for the UI layout and WebGLBridge for WebGL.
+// Ported from refs/three/examples/webgl_loader_ldraw.html
+// Original: MIT license, three.js authors (https://threejs.org)
+// This software uses the LDraw Parts Library (http://www.ldraw.org), CC BY 2.0.
+
+import GObject from 'gi://GObject?version=2.0';
+import Gtk from 'gi://Gtk?version=4.0';
+import Adw from 'gi://Adw?version=1';
+import { WebGLBridge } from '@gjsify/webgl';
+import { start, MODEL_LIST, DEFAULT_MODEL_INDEX, type LDrawDemo } from '../three-demo.js';
+import Template from './ldraw-window.blp';
+
+export class LDrawWindow extends Adw.ApplicationWindow {
+    declare private _glAreaContainer: Gtk.Box;
+    declare private _modelRow: Adw.ComboRow;
+    declare private _flatColorsRow: Adw.SwitchRow;
+    declare private _mergeModelRow: Adw.SwitchRow;
+    declare private _smoothNormalsRow: Adw.SwitchRow;
+    declare private _buildingStepRow: Adw.SpinRow;
+    declare private _displayLinesRow: Adw.SwitchRow;
+    declare private _conditionalLinesRow: Adw.SwitchRow;
+
+    static {
+        GObject.registerClass(
+            {
+                GTypeName: 'LDrawWindow',
+                Template,
+                InternalChildren: [
+                    'glAreaContainer',
+                    'modelRow',
+                    'flatColorsRow',
+                    'mergeModelRow',
+                    'smoothNormalsRow',
+                    'buildingStepRow',
+                    'displayLinesRow',
+                    'conditionalLinesRow',
+                ],
+            },
+            this,
+        );
+    }
+
+    constructor(application: Adw.Application) {
+        super({ application });
+
+        // Model ComboRow
+        this._modelRow.set_model(Gtk.StringList.new(MODEL_LIST.map((m) => m.name)));
+        this._modelRow.set_selected(DEFAULT_MODEL_INDEX);
+
+        // Building step SpinRow (initial range, updated on model load)
+        this._buildingStepRow.set_adjustment(
+            new Gtk.Adjustment({
+                lower: 0,
+                upper: 0,
+                step_increment: 1,
+                value: 0,
+            }),
+        );
+
+        // Create and insert WebGL widget
+        const glArea = new WebGLBridge();
+        glArea.set_hexpand(true);
+        glArea.set_vexpand(true);
+        glArea.installGlobals();
+        this._glAreaContainer.append(glArea);
+
+        Object.defineProperty(globalThis, 'innerWidth', {
+            get: () => glArea.get_allocated_width(),
+            configurable: true,
+        });
+        Object.defineProperty(globalThis, 'innerHeight', {
+            get: () => glArea.get_allocated_height(),
+            configurable: true,
+        });
+
+        glArea.onReady((canvas) => {
+            // The bundle's own directory, derived in URI SPACE rather than by
+            // pasting `file://` onto a native path. `GLib.filename_from_uri()`
+            // hands back a PLATFORM path, which on win32 is `C:\…\dist` — and
+            // `file://${that}/` makes `C:` the URI hostname, so every model
+            // fetch is refused for an invalid host. Same defect the pixel
+            // showcase paid for in ce4eb6aa1; keep the two spellings identical.
+            const assetBase = new URL('./', import.meta.url).href;
+
+            const demo = start(canvas, { assetBase }, (numSteps) => {
+                // Update building step range on model load
+                const adj = this._buildingStepRow.get_adjustment();
+                adj.set_upper(numSteps - 1);
+                adj.set_value(numSteps - 1);
+            });
+            this.connectControls(demo);
+        });
+    }
+
+    private connectControls(demo: LDrawDemo) {
+        this._modelRow.connect('notify::selected', () => {
+            demo.effectController.modelIndex = this._modelRow.selected;
+            demo.reloadObject(true);
+        });
+
+        this._flatColorsRow.connect('notify::active', () => {
+            demo.effectController.flatColors = this._flatColorsRow.active;
+            demo.reloadObject(false);
+        });
+
+        this._mergeModelRow.connect('notify::active', () => {
+            demo.effectController.mergeModel = this._mergeModelRow.active;
+            demo.reloadObject(false);
+        });
+
+        this._smoothNormalsRow.connect('notify::active', () => {
+            demo.effectController.smoothNormals = this._smoothNormalsRow.active;
+            demo.reloadObject(false);
+        });
+
+        this._buildingStepRow.connect('notify::value', () => {
+            demo.effectController.buildingStep = this._buildingStepRow.get_value();
+            demo.updateVisibility();
+        });
+
+        this._displayLinesRow.connect('notify::active', () => {
+            demo.effectController.displayLines = this._displayLinesRow.active;
+            demo.updateVisibility();
+        });
+
+        this._conditionalLinesRow.connect('notify::active', () => {
+            demo.effectController.conditionalLines = this._conditionalLinesRow.active;
+            demo.updateVisibility();
+        });
+    }
+}

package/src/models.ts

@@ -0,0 +1,28 @@
+// Shared model list for the LDraw viewer.
+// LDraw.org CC BY 2.0 Parts Library.
+
+export interface ModelEntry {
+    name: string;
+    file: string;
+}
+
+export const MODEL_LIST: readonly ModelEntry[] = [
+    { name: 'Car', file: 'models/car.ldr_Packed.mpd' },
+    { name: 'Lunar Vehicle', file: 'models/1621-1-LunarMPVVehicle.mpd_Packed.mpd' },
+    { name: 'Radar Truck', file: 'models/889-1-RadarTruck.mpd_Packed.mpd' },
+    { name: 'Trailer', file: 'models/4838-1-MiniVehicles.mpd_Packed.mpd' },
+    { name: 'Bulldozer', file: 'models/4915-1-MiniConstruction.mpd_Packed.mpd' },
+    { name: 'Helicopter', file: 'models/4918-1-MiniFlyers.mpd_Packed.mpd' },
+    { name: 'Plane', file: 'models/5935-1-IslandHopper.mpd_Packed.mpd' },
+    { name: 'Lighthouse', file: 'models/30023-1-Lighthouse.ldr_Packed.mpd' },
+    { name: 'X-Wing mini', file: 'models/30051-1-X-wingFighter-Mini.mpd_Packed.mpd' },
+    { name: 'AT-ST mini', file: 'models/30054-1-AT-ST-Mini.mpd_Packed.mpd' },
+    { name: 'AT-AT mini', file: 'models/4489-1-AT-AT-Mini.mpd_Packed.mpd' },
+    { name: 'Shuttle', file: 'models/4494-1-Imperial Shuttle-Mini.mpd_Packed.mpd' },
+    { name: 'TIE Interceptor', file: 'models/6965-1-TIEIntercep_4h4MXk5.mpd_Packed.mpd' },
+    { name: 'Star fighter', file: 'models/6966-1-JediStarfighter-Mini.mpd_Packed.mpd' },
+    { name: 'X-Wing', file: 'models/7140-1-X-wingFighter.mpd_Packed.mpd' },
+    { name: 'AT-ST', file: 'models/10174-1-ImperialAT-ST-UCS.mpd_Packed.mpd' },
+] as const;
+
+export const DEFAULT_MODEL_INDEX = 0; // Car