3dtiles-inspector 0.2.2 → 0.2.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "3dtiles-inspector",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "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

@@ -147,11 +147,120 @@ function buildViewerHtml(viewerConfig) {
       .screen-selection-rect {
         position: absolute;
         border: 1px solid #ffcf33;
-        background: rgba(255, 207, 51, 0.14);
+        background: rgba(255, 207, 51, 0.06);
         box-shadow:
           0 8px 24px rgba(120, 82, 0, 0.12);
       }
 
+      .screen-selection-rect.editable {
+        border: 0;
+        background: transparent;
+        box-shadow: none;
+      }
+
+      .screen-selection-edit-svg {
+        position: absolute;
+        inset: 0;
+        display: none;
+        overflow: visible;
+      }
+
+      .screen-selection-rect.editable .screen-selection-edit-svg {
+        display: block;
+      }
+
+      .screen-selection-edit-polygon {
+        fill: rgba(255, 207, 51, 0.06);
+        stroke: #ffcf33;
+        stroke-width: 2;
+        vector-effect: non-scaling-stroke;
+        filter: drop-shadow(0 8px 12px rgba(120, 82, 0, 0.12));
+      }
+
+      .screen-selection-rect.editable.drawing .screen-selection-edit-polygon {
+        fill: rgba(255, 207, 51, 0.2);
+      }
+
+      .screen-selection-edit-grid line {
+        stroke: rgba(255, 255, 255, 0.72);
+        stroke-width: 0.6;
+        vector-effect: non-scaling-stroke;
+      }
+
+      .screen-selection-edit-handle {
+        position: absolute;
+        display: none;
+        pointer-events: none;
+        transform: translate(-50%, -50%);
+        transform-origin: center;
+      }
+
+      .screen-selection-edit-handle::before {
+        content: "";
+        position: absolute;
+        inset: 0;
+        display: block;
+        box-sizing: border-box;
+        transform-origin: center;
+        scale: 1;
+        transition: scale 80ms ease;
+      }
+
+      .screen-selection-rect.editable .screen-selection-edit-handle {
+        display: block;
+      }
+
+      .screen-selection-edit-top-left,
+      .screen-selection-edit-top-right,
+      .screen-selection-edit-bottom-right,
+      .screen-selection-edit-bottom-left {
+        width: 10px;
+        height: 10px;
+      }
+
+      .screen-selection-edit-top-left::before,
+      .screen-selection-edit-top-right::before,
+      .screen-selection-edit-bottom-right::before,
+      .screen-selection-edit-bottom-left::before {
+        border: 2px solid #ffffff;
+        border-radius: 50%;
+        background: #ffcf33;
+        box-shadow: 0 2px 8px rgba(120, 82, 0, 0.28);
+      }
+
+      .screen-selection-edit-top-left.active::before,
+      .screen-selection-edit-top-right.active::before,
+      .screen-selection-edit-bottom-right.active::before,
+      .screen-selection-edit-bottom-left.active::before {
+        scale: 1.5;
+      }
+
+      .screen-selection-edit-top,
+      .screen-selection-edit-right,
+      .screen-selection-edit-bottom,
+      .screen-selection-edit-left {
+        width: 26px;
+        height: 4px;
+      }
+
+      .screen-selection-edit-top::before,
+      .screen-selection-edit-right::before,
+      .screen-selection-edit-bottom::before,
+      .screen-selection-edit-left::before {
+        border-radius: 999px;
+        background: #ffffff;
+        box-shadow: 0 1px 6px rgba(120, 82, 0, 0.24);
+      }
+
+      .screen-selection-edit-top.active::before,
+      .screen-selection-edit-right.active::before,
+      .screen-selection-edit-bottom.active::before,
+      .screen-selection-edit-left.active::before {
+        scale:
+          var(--screen-selection-edit-active-scale-x, 1.28)
+          var(--screen-selection-edit-active-scale-y, 1.5);
+      }
+
       .toolbar-dock {
         position: fixed;
         top: 14px;
@@ -743,13 +852,13 @@ function buildViewerHtml(viewerConfig) {
               <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>
+              <button id="crop-screen-select" class="wide" type="button">Draw 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 id="crop-list" class="crop-list"></div>
           </div>
         </div>
         <div class="toolbar-section status-panel">

package/src/viewer/app.js

@@ -193,7 +193,7 @@ function setSaveUiLocked(locked) {
 }
 
 cameraController.setPointerDownFilter((event) => {
-  return !(cropController?.getPendingMode() && event.button === 0);
+  return !(cropController?.shouldCapturePointerDown(event) ?? false);
 });
 
 const { transformControls, transformControlsHelper } =
@@ -469,9 +469,13 @@ function loadTileset(url, { frameOnLoad = true } = {}) {
     if (framed) {
       return;
     }
-    if (flyTo.frameTileset()) {
+    if (
+      flyTo.frameTileset({
+        activeStatus: 'Framing tileset...',
+        doneStatus: 'Tileset ready.',
+      })
+    ) {
       framed = true;
-      setStatus('Tileset ready.');
     }
   };
 
@@ -602,6 +606,7 @@ loadTileset(TILESET_URL);
 
 function frame() {
   cameraController.update();
+  flyTo.update();
   rootTransform.flush();
   globeController.update();
   tiles?.update();