3dtiles-inspector 0.2.0 → 0.2.1

package/CHANGELOG.md

@@ -6,6 +6,13 @@ The format is based on Keep a Changelog and this project follows Semantic Versio
 
 ## [Unreleased]
 
+## [0.2.1] - 2026-05-03
+
+### Changed
+
+- Renamed the crop selection action to `Select Region` and show pending or newest crop regions first in the list.
+- Kept the Save/status controls fixed at the bottom of the sidebar, moved `Reset` into the Transform controls, and tightened sidebar behavior on narrow screens.
+
 ## [0.2.0] - 2026-05-03
 
 ### Added

package/README.md

@@ -10,7 +10,7 @@
 
 </div>
 
-`3dtiles-inspector` is a Node.js package and CLI for opening a local 3D Tiles tileset in a browser inspector, adjusting the root transform, tuning the effective geometric error scale, and saving the result back to disk.
+`3dtiles-inspector` is a Node.js package and CLI for opening a local 3D Tiles tileset in a browser inspector, adjusting the root transform, tuning geometric-error scaling, cropping supported 3D Gaussian Splat tilesets, and saving the result back to disk.
 
 Requires Node.js 18 or newer.
 
@@ -93,7 +93,7 @@ const {
 - `Geometric Error` scaling from `1/16x` to `16x`
 - `Layer Multiplier` scaling from `1/8x` to `8x` for each tile's geometric-error difference from the tileset's global leaf baseline
 - `Crop Regions` for drawing screen-space exclude regions on 3D Gaussian Splat tilesets
-- `Save` to persist the updated root transform and geometric-error scale back to disk
+- `Save` to persist root transform edits, geometric-error scaling, and confirmed crop regions back to disk
 
 ### Crop Regions
 
@@ -101,7 +101,7 @@ const {
 
 The basic workflow is:
 
-1. Click `Screen Select` and drag a rectangle over the splats to remove.
+1. Click `Select Region` and drag a rectangle over the splats to remove.
 2. Drag the far-plane handle to set how deep the crop region extends into the scene.
 3. Click `Confirm` to add the region to the save list, or `Cancel` to discard the pending rectangle.
 4. Select a confirmed region row if you need to adjust its 3D far plane with the transform handle.

package/dist/inspector-assets/viewer/app.js

@@ -68903,22 +68903,22 @@ function updateCropControls({
     screenSelections.length + pendingScreenSelections.length
   );
   cropListEl.replaceChildren();
-  screenSelections.forEach((selection, index) => {
+  pendingScreenSelections.forEach((selection) => {
     cropListEl.appendChild(
       createSelectionControl({
         active: selection.id === activeScreenSelectionId,
-        label: `Region ${index + 1}`,
+        label: "Pending",
         onScreenSelectionRemove,
         onScreenSelectionSelect,
         selection
       })
     );
   });
-  pendingScreenSelections.forEach((selection) => {
+  screenSelections.map((selection, index) => ({ label: `Region ${index + 1}`, selection })).reverse().forEach(({ label, selection }) => {
     cropListEl.appendChild(
       createSelectionControl({
         active: selection.id === activeScreenSelectionId,
-        label: "Pending",
+        label,
         onScreenSelectionRemove,
         onScreenSelectionSelect,
         selection

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "3dtiles-inspector",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Inspect, align, and save local 3D Tiles root transforms in an interactive browser session.",
   "author": "William Liu <lyz15972107087@gmail.com>",
   "license": "Apache-2.0",

package/src/server/viewerHtml.js

@@ -167,8 +167,8 @@ function buildViewerHtml(viewerConfig) {
 
       .toolbar {
         display: grid;
-        align-content: start;
-        gap: 8px;
+        grid-template-rows: minmax(0, 1fr) auto;
+        gap: 0;
         padding: 10px 14px;
         border: 1px solid rgba(22, 50, 79, 0.12);
         border-top: 0;
@@ -177,8 +177,7 @@ function buildViewerHtml(viewerConfig) {
         box-shadow: 0 18px 44px rgba(33, 52, 73, 0.16);
         backdrop-filter: blur(14px);
         min-height: 0;
-        overflow-y: auto;
-        overscroll-behavior: contain;
+        overflow: hidden;
         transition:
           opacity 160ms ease,
           transform 160ms ease;
@@ -215,8 +214,8 @@ function buildViewerHtml(viewerConfig) {
       .toolbar-dock.collapsed .toolbar-toggle {
         justify-self: start;
         width: auto;
-        min-height: 36px;
-        padding: 6px 12px 7px;
+        min-height: 32px;
+        padding: 4px 12px 5px;
         border-radius: 999px;
         color: #506377;
         background: rgba(255, 255, 255, 0.94);
@@ -249,6 +248,35 @@ function buildViewerHtml(viewerConfig) {
           linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(243, 247, 251, 0.9));
       }
 
+      .toolbar-scroll {
+        display: grid;
+        align-content: start;
+        gap: 8px;
+        min-height: 0;
+        overflow-y: auto;
+        overscroll-behavior: contain;
+        padding-bottom: 8px;
+        scrollbar-color: rgba(93, 115, 139, 0.45) transparent;
+        scrollbar-width: thin;
+      }
+
+      .toolbar-scroll::-webkit-scrollbar {
+        width: 6px;
+      }
+
+      .toolbar-scroll::-webkit-scrollbar-track {
+        background: transparent;
+      }
+
+      .toolbar-scroll::-webkit-scrollbar-thumb {
+        border-radius: 999px;
+        background: rgba(93, 115, 139, 0.32);
+      }
+
+      .toolbar-scroll::-webkit-scrollbar-thumb:hover {
+        background: rgba(93, 115, 139, 0.48);
+      }
+
       .toolbar-section-header {
         display: flex;
         align-items: flex-start;
@@ -521,6 +549,11 @@ function buildViewerHtml(viewerConfig) {
       .status-panel {
         display: grid;
         gap: 10px;
+        margin-top: 8px;
+      }
+
+      .status-panel .status-actions {
+        grid-template-columns: 1fr;
       }
 
       .status-actions {
@@ -544,12 +577,14 @@ function buildViewerHtml(viewerConfig) {
         }
 
         .tile-runtime-stats {
-          right: 16px;
-          bottom: 16px;
-          left: 16px;
+          right: 50%;
+          bottom: 5px;
+          left: auto;
           flex-wrap: wrap;
-          justify-content: stretch;
-          max-width: none;
+          justify-content: center;
+          width: max-content;
+          max-width: calc(100vw - 32px);
+          transform: translateX(50%);
         }
 
         .runtime-stat {
@@ -564,15 +599,21 @@ function buildViewerHtml(viewerConfig) {
 
         .toolbar-dock {
           top: auto;
-          bottom: 16px;
+          bottom: 32px;
           right: 16px;
           left: 16px;
           width: auto;
-          max-height: min(78vh, 640px);
+          max-height: min(calc(78vh - 26px), 614px);
         }
 
         .toolbar {
-          max-height: min(calc(78vh - 44px), 596px);
+          max-height: min(calc(78vh - 70px), 570px);
+        }
+
+        .toolbar-dock.collapsed .toolbar-toggle {
+          justify-self: center;
+          min-height: 28px;
+          padding: 3px 12px 4px;
         }
 
         .coordinate-actions button,
@@ -627,90 +668,92 @@ function buildViewerHtml(viewerConfig) {
         Hide Sidebar
       </button>
       <div id="toolbar" class="toolbar">
-        <div class="toolbar-section" data-save-lock-exempt>
-          <div class="toolbar-section-header">
-            <p class="toolbar-section-title">Canvas</p>
-          </div>
-          <div class="coordinate-actions">
-            <button id="terrain" class="wide" type="button">Terrain</button>
-            <button id="bounding-volume" class="wide" type="button">Bounding Volume</button>
-            <button id="move-to-tiles" type="button">Move To Tiles</button>
-          </div>
-        </div>
-        <div class="toolbar-section">
-          <div class="toolbar-section-header">
-            <p class="toolbar-section-title">Transform</p>
-          </div>
-          <div class="transform-actions">
-            <button id="translate" type="button">Translate</button>
-            <button id="rotate" type="button">Rotate</button>
-            <button id="set-position" class="full-span" type="button">Set Position</button>
-          </div>
-        </div>
-        <div class="toolbar-section">
-          <div class="toolbar-section-header">
-            <p class="toolbar-section-title">Coordinate</p>
-          </div>
-          <div class="coordinate-grid">
-            <label><span>Latitude</span><input id="latitude" type="number" step="any" value="0" /></label>
-            <label><span>Longitude</span><input id="longitude" type="number" step="any" value="0" /></label>
-            <label><span>Height</span><input id="height" type="number" step="any" value="0" /></label>
-          </div>
-          <div class="coordinate-actions">
-            <button id="move-camera-to-coordinate" class="wide" type="button">Move Camera</button>
-            <button id="move-tiles-to-coordinate" class="wide" type="button">Move Tiles</button>
+        <div class="toolbar-scroll">
+          <div class="toolbar-section" data-save-lock-exempt>
+            <div class="toolbar-section-header">
+              <p class="toolbar-section-title">Canvas</p>
+            </div>
+            <div class="coordinate-actions">
+              <button id="terrain" class="wide" type="button">Terrain</button>
+              <button id="bounding-volume" class="wide" type="button">Bounding Volume</button>
+              <button id="move-to-tiles" type="button">Move To Tiles</button>
+            </div>
           </div>
-        </div>
-        <div class="toolbar-section">
-          <div class="toolbar-section-header">
-            <p class="toolbar-section-title">LOD</p>
+          <div class="toolbar-section">
+            <div class="toolbar-section-header">
+              <p class="toolbar-section-title">Transform</p>
+            </div>
+            <div class="transform-actions">
+              <button id="translate" type="button">Translate</button>
+              <button id="rotate" type="button">Rotate</button>
+              <button id="set-position" type="button">Set Position</button>
+              <button id="reset" type="button">Reset</button>
+            </div>
           </div>
-          <label class="range-field">
-            <div class="range-field-header">
-              <span>Geometric Error</span>
-              <p id="geometric-error-value" class="toolbar-value">x1.00</p>
+          <div class="toolbar-section">
+            <div class="toolbar-section-header">
+              <p class="toolbar-section-title">Coordinate</p>
             </div>
-            <input
-              id="geometric-error-scale"
-              type="range"
-              min="-4"
-              max="4"
-              step="0.1"
-              value="0"
-            />
-          </label>
-          <label class="range-field">
-            <div class="range-field-header">
-              <span>Layer Multiplier</span>
-              <p id="geometric-error-layer-value" class="toolbar-value">x1.00</p>
+            <div class="coordinate-grid">
+              <label><span>Latitude</span><input id="latitude" type="number" step="any" value="0" /></label>
+              <label><span>Longitude</span><input id="longitude" type="number" step="any" value="0" /></label>
+              <label><span>Height</span><input id="height" type="number" step="any" value="0" /></label>
+            </div>
+            <div class="coordinate-actions">
+              <button id="move-camera-to-coordinate" class="wide" type="button">Move Camera</button>
+              <button id="move-tiles-to-coordinate" class="wide" type="button">Move Tiles</button>
             </div>
-            <input
-              id="geometric-error-layer-scale"
-              type="range"
-              min="-3"
-              max="3"
-              step="0.1"
-              value="0"
-            />
-          </label>
-        </div>
-        <div id="crop-section" class="toolbar-section" hidden>
-          <div class="toolbar-section-header">
-            <p class="toolbar-section-title">Crop Regions</p>
-            <p id="crop-count-value" class="toolbar-value">0</p>
           </div>
-          <div class="coordinate-actions">
-            <button id="crop-screen-select" class="wide" type="button">Screen Select</button>
+          <div class="toolbar-section">
+            <div class="toolbar-section-header">
+              <p class="toolbar-section-title">LOD</p>
+            </div>
+            <label class="range-field">
+              <div class="range-field-header">
+                <span>Geometric Error</span>
+                <p id="geometric-error-value" class="toolbar-value">x1.00</p>
+              </div>
+              <input
+                id="geometric-error-scale"
+                type="range"
+                min="-4"
+                max="4"
+                step="0.1"
+                value="0"
+              />
+            </label>
+            <label class="range-field">
+              <div class="range-field-header">
+                <span>Layer Multiplier</span>
+                <p id="geometric-error-layer-value" class="toolbar-value">x1.00</p>
+              </div>
+              <input
+                id="geometric-error-layer-scale"
+                type="range"
+                min="-3"
+                max="3"
+                step="0.1"
+                value="0"
+              />
+            </label>
           </div>
-          <div id="crop-list" class="crop-list"></div>
-          <div class="status-actions">
-            <button id="crop-screen-confirm" type="button">Confirm</button>
-            <button id="crop-screen-cancel" type="button">Cancel</button>
+          <div id="crop-section" class="toolbar-section" hidden>
+            <div class="toolbar-section-header">
+              <p class="toolbar-section-title">Crop Regions</p>
+              <p id="crop-count-value" class="toolbar-value">0</p>
+            </div>
+            <div class="coordinate-actions">
+              <button id="crop-screen-select" class="wide" type="button">Select Region</button>
+            </div>
+            <div id="crop-list" class="crop-list"></div>
+            <div class="status-actions">
+              <button id="crop-screen-confirm" type="button">Confirm</button>
+              <button id="crop-screen-cancel" type="button">Cancel</button>
+            </div>
           </div>
         </div>
         <div class="toolbar-section status-panel">
           <div class="status-actions">
-            <button id="reset" type="button">Reset</button>
             <button id="save" class="save" type="button">Save</button>
           </div>
           <progress id="save-progress" class="save-progress" max="100" value="0" hidden></progress>

package/src/viewer/dom/cropUi.js

@@ -30,17 +30,6 @@ export function updateCropControls({
   );
 
   cropListEl.replaceChildren();
-  screenSelections.forEach((selection, index) => {
-    cropListEl.appendChild(
-      createSelectionControl({
-        active: selection.id === activeScreenSelectionId,
-        label: `Region ${index + 1}`,
-        onScreenSelectionRemove,
-        onScreenSelectionSelect,
-        selection,
-      }),
-    );
-  });
   pendingScreenSelections.forEach((selection) => {
     cropListEl.appendChild(
       createSelectionControl({
@@ -52,6 +41,20 @@ export function updateCropControls({
       }),
     );
   });
+  screenSelections
+    .map((selection, index) => ({ label: `Region ${index + 1}`, selection }))
+    .reverse()
+    .forEach(({ label, selection }) => {
+      cropListEl.appendChild(
+        createSelectionControl({
+          active: selection.id === activeScreenSelectionId,
+          label,
+          onScreenSelectionRemove,
+          onScreenSelectionSelect,
+          selection,
+        }),
+      );
+    });
 }
 
 function createSelectionControl({