3dtiles-inspector 0.2.2 → 0.2.3

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

@@ -67954,6 +67954,15 @@ function clientPointToNdc(point, domRect) {
     y: 1 - (point.y - domRect.top) / domRect.height * 2
   };
 }
+function getClientSelectionQuad(start, end) {
+  const clientRect = getClientSelectionRect(start, end);
+  return [
+    new Vector2(clientRect.minX, clientRect.minY),
+    new Vector2(clientRect.maxX, clientRect.minY),
+    new Vector2(clientRect.maxX, clientRect.maxY),
+    new Vector2(clientRect.minX, clientRect.maxY)
+  ];
+}
 function getNdcSelectionRect(clientRect, domRect) {
   const topLeft = clientPointToNdc(
     new Vector2(clientRect.minX, clientRect.minY),
@@ -67970,6 +67979,19 @@ function getNdcSelectionRect(clientRect, domRect) {
     maxY: Math.max(topLeft.y, bottomRight.y)
   };
 }
+function getNdcSelectionQuad(clientPoints, domRect) {
+  return clientPoints.map((point) => clientPointToNdc(point, domRect));
+}
+function getNdcBounds(points) {
+  const xs2 = points.map((point) => point.x);
+  const ys2 = points.map((point) => point.y);
+  return {
+    maxX: Math.max(...xs2),
+    maxY: Math.max(...ys2),
+    minX: Math.min(...xs2),
+    minY: Math.min(...ys2)
+  };
+}
 function updateOverlayRect(overlayEl, rectEl, clientRect) {
   if (!overlayEl || !rectEl) {
     return;
@@ -68151,10 +68173,10 @@ function createFarPlaneData({
     width
   };
 }
-function createFrustumData(camera, rect, depthRange) {
+function createFrustumDataFromQuad(camera, quad, depthRange) {
   const { farDepth, nearDepth } = normalizeDepthRange(camera, depthRange);
-  const centerX = (rect.minX + rect.maxX) * 0.5;
-  const centerY = (rect.minY + rect.maxY) * 0.5;
+  const centerX = quad.reduce((total, point) => total + point.x, 0) / quad.length;
+  const centerY = quad.reduce((total, point) => total + point.y, 0) / quad.length;
   const nearCenter = createPointAtViewDepth(
     camera,
     centerX,
@@ -68181,55 +68203,13 @@ function createFrustumData(camera, rect, depthRange) {
   const insidePoint = selectionForward.clone().multiplyScalar((nearDistance + farDistance) * 0.5).add(camera.position);
   plane.setFromNormalAndCoplanarPoint(selectionForward, farCenter);
   const farClipPlane = plane.clone();
-  const farTopLeft = createPointOnPlane(
-    camera,
-    rect.minX,
-    rect.maxY,
-    farClipPlane
-  );
-  const farTopRight = createPointOnPlane(
-    camera,
-    rect.maxX,
-    rect.maxY,
-    farClipPlane
-  );
-  const farBottomRight = createPointOnPlane(
-    camera,
-    rect.maxX,
-    rect.minY,
-    farClipPlane
-  );
-  const farBottomLeft = createPointOnPlane(
-    camera,
-    rect.minX,
-    rect.minY,
-    farClipPlane
+  const [farTopLeft, farTopRight, farBottomRight, farBottomLeft] = quad.map(
+    (point) => createPointOnPlane(camera, point.x, point.y, farClipPlane)
   );
   plane.setFromNormalAndCoplanarPoint(selectionForward, nearCenter);
   const nearPlane = plane.clone();
-  const nearTopLeft = createPointOnPlane(
-    camera,
-    rect.minX,
-    rect.maxY,
-    nearPlane
-  );
-  const nearTopRight = createPointOnPlane(
-    camera,
-    rect.maxX,
-    rect.maxY,
-    nearPlane
-  );
-  const nearBottomRight = createPointOnPlane(
-    camera,
-    rect.maxX,
-    rect.minY,
-    nearPlane
-  );
-  const nearBottomLeft = createPointOnPlane(
-    camera,
-    rect.minX,
-    rect.minY,
-    nearPlane
+  const [nearTopLeft, nearTopRight, nearBottomRight, nearBottomLeft] = quad.map(
+    (point) => createPointOnPlane(camera, point.x, point.y, nearPlane)
   );
   if (!farTopLeft || !farTopRight || !farBottomRight || !farBottomLeft || !nearTopLeft || !nearTopRight || !nearBottomRight || !nearBottomLeft) {
     return null;
@@ -68306,8 +68286,21 @@ function createFrustumData(camera, rect, depthRange) {
     selectionForward: selectionForward.toArray()
   };
 }
+function createFrustumData(camera, rect, depthRange) {
+  return createFrustumDataFromQuad(
+    camera,
+    [
+      { x: rect.minX, y: rect.maxY },
+      { x: rect.maxX, y: rect.maxY },
+      { x: rect.maxX, y: rect.minY },
+      { x: rect.minX, y: rect.minY }
+    ],
+    depthRange
+  );
+}
 function createSelectionData({
   camera,
+  clientPoints,
   domElement,
   end,
   getDepthRange,
@@ -68317,19 +68310,27 @@ function createSelectionData({
   if (domRect.width <= 0 || domRect.height <= 0) {
     return null;
   }
-  const clientRect = getClientSelectionRect(start, end);
+  const hasClientQuad = Array.isArray(clientPoints) && clientPoints.length === 4;
+  const points = hasClientQuad ? clientPoints : getClientSelectionQuad(start, end);
+  const clientRect = {
+    maxX: Math.max(...points.map((point) => point.x)),
+    maxY: Math.max(...points.map((point) => point.y)),
+    minX: Math.min(...points.map((point) => point.x)),
+    minY: Math.min(...points.map((point) => point.y))
+  };
   const width = clientRect.maxX - clientRect.minX;
   const height = clientRect.maxY - clientRect.minY;
   if (width * width + height * height < SCREEN_SELECTION_MIN_DRAG_DISTANCE_SQ) {
     return null;
   }
-  const rect = getNdcSelectionRect(clientRect, domRect);
+  const quad = getNdcSelectionQuad(points, domRect);
+  const rect = hasClientQuad ? getNdcBounds(quad) : getNdcSelectionRect(clientRect, domRect);
   camera.updateProjectionMatrix();
   camera.updateMatrixWorld(true);
   cameraPosition.copy(camera.position);
   const depthRange = normalizeDepthRange(camera, getDepthRange());
   const viewProjectionMatrix = new Matrix4().multiplyMatrices(camera.projectionMatrix, camera.matrixWorldInverse).toArray();
-  const frustum = createFrustumData(camera, rect, depthRange);
+  const frustum = hasClientQuad ? createFrustumDataFromQuad(camera, quad, depthRange) : createFrustumData(camera, rect, depthRange);
   if (!frustum) {
     return null;
   }
@@ -68687,6 +68688,8 @@ function createScreenSelectionPointerTracker({
   camera,
   domElement,
   getDepthRange,
+  onOverlayClear,
+  onOverlayUpdate,
   onSelectionCreated,
   overlayEl,
   rectEl
@@ -68695,8 +68698,18 @@ function createScreenSelectionPointerTracker({
   let drag = null;
   function clearDrag() {
     drag = null;
+    onOverlayClear?.();
     clearOverlay(overlayEl, rectEl);
   }
+  function updateDragOverlay() {
+    const clientRect = {
+      ...getClientSelectionRect(drag.start, drag.current)
+    };
+    if (onOverlayUpdate?.(clientRect) === true) {
+      return;
+    }
+    updateOverlayRect(overlayEl, rectEl, clientRect);
+  }
   function setActive(nextActive) {
     active = !!nextActive;
     if (!active) {
@@ -68715,11 +68728,7 @@ function createScreenSelectionPointerTracker({
       start: dragStart.clone(),
       current: dragCurrent.clone()
     };
-    updateOverlayRect(
-      overlayEl,
-      rectEl,
-      getClientSelectionRect(drag.start, drag.current)
-    );
+    updateDragOverlay();
     domElement.setPointerCapture?.(event.pointerId);
     event.preventDefault();
     event.stopPropagation();
@@ -68731,11 +68740,7 @@ function createScreenSelectionPointerTracker({
     }
     const domRect = domElement.getBoundingClientRect();
     getClampedClientPoint(event, domRect, drag.current);
-    updateOverlayRect(
-      overlayEl,
-      rectEl,
-      getClientSelectionRect(drag.start, drag.current)
-    );
+    updateDragOverlay();
     event.preventDefault();
     event.stopPropagation();
     return true;
@@ -68744,6 +68749,9 @@ function createScreenSelectionPointerTracker({
     if (!active || !drag || event.pointerId !== drag.pointerId) {
       return false;
     }
+    const clientRect = {
+      ...getClientSelectionRect(drag.start, drag.current)
+    };
     const selection = createSelectionData({
       camera,
       domElement,
@@ -68753,7 +68761,7 @@ function createScreenSelectionPointerTracker({
     });
     domElement.releasePointerCapture?.(event.pointerId);
     clearDrag();
-    onSelectionCreated(selection);
+    onSelectionCreated(selection, clientRect);
     event.preventDefault();
     event.stopPropagation();
     return true;
@@ -68832,6 +68840,56 @@ function getScreenSelectionPayload(selection) {
     viewProjectionMatrix: selection.viewProjectionMatrix.slice()
   };
 }
+function setScreenSelectionShape(selection, {
+  cameraPosition: sourceCameraPosition,
+  depthRange,
+  farPlane,
+  planeMatrices,
+  rect,
+  selectionForward: sourceSelectionForward,
+  viewProjectionMatrix
+}, currentTransformMatrix) {
+  if (!selection) {
+    return;
+  }
+  const previousFarDepth = Number(selection.depthRange?.farDepth);
+  const copiedPlaneMatrices = planeMatrices.map((matrix) => matrix.slice());
+  const referenceTransformMatrix = copyMatrix4Array(currentTransformMatrix);
+  selection.basePlaneMatrices = copiedPlaneMatrices.map(
+    (matrix) => matrix.slice()
+  );
+  selection.cameraPosition = copyVectorArray(sourceCameraPosition);
+  selection.currentTransformMatrix = referenceTransformMatrix.slice();
+  selection.depthRange = copyDepthRange(depthRange);
+  selection.farPlane = copyFarPlane(farPlane);
+  selection.planeMatrices = copiedPlaneMatrices;
+  selection.referenceTransformMatrix = referenceTransformMatrix;
+  selection.rect = copyRect(rect);
+  selection.selectionForward = copyVectorArray(sourceSelectionForward, [
+    0,
+    0,
+    -1
+  ]);
+  selection.viewProjectionMatrix = viewProjectionMatrix.slice();
+  updateScreenSelectionWorldState(selection, currentTransformMatrix);
+  if (!Number.isFinite(previousFarDepth)) {
+    return;
+  }
+  const nextFarDepth = Math.min(
+    selection.depthRange.maxFarDepth,
+    Math.max(
+      selection.depthRange.nearDepth + SCREEN_SELECTION_MIN_DEPTH_RANGE,
+      previousFarDepth
+    )
+  );
+  if (Math.abs(nextFarDepth - selection.depthRange.farDepth) > 1e-9) {
+    setScreenSelectionFarDepth(
+      selection,
+      nextFarDepth,
+      currentTransformMatrix
+    );
+  }
+}
 function updateScreenSelectionWorldState(selection, currentTransformMatrix, active = selection?.farHandle?.visible) {
   if (!selection) {
     return;
@@ -68876,6 +68934,313 @@ var init_screenSelection = __esm({
   }
 });
 
+// src/viewer/screenSelection/editOverlay.js
+function clampValue(value, min, max) {
+  return Math.min(max, Math.max(min, value));
+}
+function copyClientPoint(point) {
+  return {
+    x: Number(point?.x) || 0,
+    y: Number(point?.y) || 0
+  };
+}
+function copyClientPoints(points) {
+  return points.map(copyClientPoint);
+}
+function getClientPointsBounds(points) {
+  const xs2 = points.map((point) => point.x);
+  const ys2 = points.map((point) => point.y);
+  return {
+    maxX: Math.max(...xs2),
+    maxY: Math.max(...ys2),
+    minX: Math.min(...xs2),
+    minY: Math.min(...ys2)
+  };
+}
+function getClientRectPoints(rect) {
+  return [
+    { x: Number(rect?.minX) || 0, y: Number(rect?.minY) || 0 },
+    { x: Number(rect?.maxX) || 0, y: Number(rect?.minY) || 0 },
+    { x: Number(rect?.maxX) || 0, y: Number(rect?.maxY) || 0 },
+    { x: Number(rect?.minX) || 0, y: Number(rect?.maxY) || 0 }
+  ];
+}
+function clampClientPoint(point, domRect) {
+  return {
+    x: clampValue(point.x, domRect.left, domRect.right),
+    y: clampValue(point.y, domRect.top, domRect.bottom)
+  };
+}
+function clampClientPoints(points, domElement) {
+  const domRect = domElement.getBoundingClientRect();
+  return points.map((point) => clampClientPoint(point, domRect));
+}
+function getPointTurnCross(a2, b5, c2) {
+  return (b5.x - a2.x) * (c2.y - b5.y) - (b5.y - a2.y) * (c2.x - b5.x);
+}
+function isConvexClientQuad(points) {
+  if (!Array.isArray(points) || points.length !== 4) {
+    return false;
+  }
+  let turnSign = 0;
+  for (let index = 0; index < points.length; index++) {
+    const cross = getPointTurnCross(
+      points[index],
+      points[(index + 1) % points.length],
+      points[(index + 2) % points.length]
+    );
+    if (Math.abs(cross) <= SCREEN_EDIT_MIN_CONVEX_CROSS_ABS) {
+      return false;
+    }
+    const nextSign = Math.sign(cross);
+    if (turnSign === 0) {
+      turnSign = nextSign;
+    } else if (nextSign !== turnSign) {
+      return false;
+    }
+  }
+  return true;
+}
+function getPartPoint(points, part) {
+  const indices = SCREEN_EDIT_PART_POINT_INDICES[part] || [];
+  if (indices.length === 0) {
+    return { x: 0, y: 0 };
+  }
+  const x5 = indices.reduce((total, index) => total + points[index].x, 0) / indices.length;
+  const y6 = indices.reduce((total, index) => total + points[index].y, 0) / indices.length;
+  return { x: x5, y: y6 };
+}
+function getPartAngle(points, part) {
+  const indices = SCREEN_EDIT_PART_POINT_INDICES[part] || [];
+  if (indices.length !== 2) {
+    return null;
+  }
+  const start = points[indices[0]];
+  const end = points[indices[1]];
+  return Math.atan2(end.y - start.y, end.x - start.x);
+}
+function getPartLength(points, part) {
+  const indices = SCREEN_EDIT_PART_POINT_INDICES[part] || [];
+  if (indices.length !== 2) {
+    return null;
+  }
+  const start = points[indices[0]];
+  const end = points[indices[1]];
+  return Math.hypot(end.x - start.x, end.y - start.y);
+}
+function interpolatePoint(a2, b5, t2) {
+  return {
+    x: a2.x + (b5.x - a2.x) * t2,
+    y: a2.y + (b5.y - a2.y) * t2
+  };
+}
+function updateScreenEditGrid(grid, localPoints, visible) {
+  if (!grid) {
+    return;
+  }
+  grid.replaceChildren();
+  grid.hidden = !visible;
+  if (!visible) {
+    return;
+  }
+  const [topLeft, topRight, bottomRight, bottomLeft] = localPoints;
+  for (let index = 1; index < SCREEN_EDIT_GRID_DIVISIONS; index++) {
+    const t2 = index / SCREEN_EDIT_GRID_DIVISIONS;
+    const top = interpolatePoint(topLeft, topRight, t2);
+    const bottom = interpolatePoint(bottomLeft, bottomRight, t2);
+    const left = interpolatePoint(topLeft, bottomLeft, t2);
+    const right = interpolatePoint(topRight, bottomRight, t2);
+    const verticalLine = document.createElementNS(
+      "http://www.w3.org/2000/svg",
+      "line"
+    );
+    const horizontalLine = document.createElementNS(
+      "http://www.w3.org/2000/svg",
+      "line"
+    );
+    verticalLine.setAttribute("x1", String(top.x));
+    verticalLine.setAttribute("y1", String(top.y));
+    verticalLine.setAttribute("x2", String(bottom.x));
+    verticalLine.setAttribute("y2", String(bottom.y));
+    horizontalLine.setAttribute("x1", String(left.x));
+    horizontalLine.setAttribute("y1", String(left.y));
+    horizontalLine.setAttribute("x2", String(right.x));
+    horizontalLine.setAttribute("y2", String(right.y));
+    grid.append(verticalLine, horizontalLine);
+  }
+}
+function ensureEditableRectHandles(rectEl) {
+  if (!rectEl || rectEl.dataset.editHandlesReady === "true") {
+    return;
+  }
+  const svg2 = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  const polygon = document.createElementNS(
+    "http://www.w3.org/2000/svg",
+    "polygon"
+  );
+  const grid = document.createElementNS("http://www.w3.org/2000/svg", "g");
+  svg2.classList.add("screen-selection-edit-svg");
+  grid.classList.add("screen-selection-edit-grid");
+  polygon.classList.add("screen-selection-edit-polygon");
+  svg2.append(polygon, grid);
+  rectEl.appendChild(svg2);
+  SCREEN_EDIT_HANDLE_PARTS.forEach((part) => {
+    const handle = document.createElement("span");
+    handle.classList.add(
+      "screen-selection-edit-handle",
+      `screen-selection-edit-${part}`
+    );
+    handle.dataset.editPart = part;
+    rectEl.appendChild(handle);
+  });
+  rectEl.dataset.editHandlesReady = "true";
+}
+function pointSegmentDistanceSq(point, start, end) {
+  const dx = end.x - start.x;
+  const dy = end.y - start.y;
+  const lengthSq = dx * dx + dy * dy;
+  if (lengthSq <= 1e-12) {
+    const px2 = point.x - start.x;
+    const py2 = point.y - start.y;
+    return px2 * px2 + py2 * py2;
+  }
+  const t2 = clampValue(
+    ((point.x - start.x) * dx + (point.y - start.y) * dy) / lengthSq,
+    0,
+    1
+  );
+  const x5 = start.x + dx * t2;
+  const y6 = start.y + dy * t2;
+  const px = point.x - x5;
+  const py = point.y - y6;
+  return px * px + py * py;
+}
+function createScreenEditOverlay({ overlayEl, rectEl }) {
+  let activePart = null;
+  function applyActivePart() {
+    SCREEN_EDIT_HANDLE_PARTS.forEach((part) => {
+      const handle = rectEl?.querySelector(`[data-edit-part="${part}"]`);
+      handle?.classList.toggle("active", part === activePart);
+    });
+  }
+  function render(clientPoints, { showGrid = false } = {}) {
+    ensureEditableRectHandles(rectEl);
+    rectEl?.classList.add("editable");
+    rectEl?.classList.toggle("drawing", showGrid);
+    const bounds = getClientPointsBounds(clientPoints);
+    updateOverlayRect(overlayEl, rectEl, bounds);
+    const width = Math.max(1, bounds.maxX - bounds.minX);
+    const height = Math.max(1, bounds.maxY - bounds.minY);
+    const localPoints = clientPoints.map((point) => ({
+      x: point.x - bounds.minX,
+      y: point.y - bounds.minY
+    }));
+    const svg2 = rectEl?.querySelector(".screen-selection-edit-svg");
+    const polygon = rectEl?.querySelector(".screen-selection-edit-polygon");
+    const grid = rectEl?.querySelector(".screen-selection-edit-grid");
+    svg2?.setAttribute("viewBox", `0 0 ${width} ${height}`);
+    polygon?.setAttribute(
+      "points",
+      localPoints.map((point) => `${point.x},${point.y}`).join(" ")
+    );
+    updateScreenEditGrid(grid, localPoints, showGrid);
+    SCREEN_EDIT_HANDLE_PARTS.forEach((part) => {
+      const point = getPartPoint(localPoints, part);
+      const handle = rectEl?.querySelector(`[data-edit-part="${part}"]`);
+      if (!handle) {
+        return;
+      }
+      handle.style.left = `${point.x}px`;
+      handle.style.top = `${point.y}px`;
+      const angle = getPartAngle(localPoints, part);
+      const length = getPartLength(localPoints, part);
+      if (length != null) {
+        const maxVisualLength = Math.max(0, length - 2);
+        const visualLength = Math.max(
+          0,
+          Math.min(SCREEN_EDIT_EDGE_HANDLE_MAX_LENGTH, maxVisualLength)
+        );
+        const activeScaleX = visualLength > 0 ? Math.min(
+          SCREEN_EDIT_EDGE_HANDLE_ACTIVE_SCALE_X,
+          Math.max(1, maxVisualLength / visualLength)
+        ) : 1;
+        handle.style.width = `${visualLength}px`;
+        handle.style.height = `${length <= SCREEN_EDIT_EDGE_HANDLE_MIN_LENGTH ? 2 : 4}px`;
+        handle.style.setProperty(
+          "--screen-selection-edit-active-scale-x",
+          String(activeScaleX)
+        );
+        handle.style.setProperty(
+          "--screen-selection-edit-active-scale-y",
+          String(SCREEN_EDIT_EDGE_HANDLE_ACTIVE_SCALE_Y)
+        );
+      } else {
+        handle.style.width = "";
+        handle.style.height = "";
+        handle.style.removeProperty("--screen-selection-edit-active-scale-x");
+        handle.style.removeProperty("--screen-selection-edit-active-scale-y");
+      }
+      handle.style.transform = angle == null ? "translate(-50%, -50%)" : `translate(-50%, -50%) rotate(${angle}rad)`;
+    });
+    applyActivePart();
+  }
+  function clear() {
+    activePart = null;
+    rectEl?.classList.remove("drawing", "editable");
+    applyActivePart();
+  }
+  function setActivePart(part) {
+    activePart = SCREEN_EDIT_HANDLE_PARTS.includes(part) ? part : null;
+    applyActivePart();
+  }
+  return {
+    clear,
+    render,
+    setActivePart
+  };
+}
+var SCREEN_EDIT_EDGE_HIT_SIZE, SCREEN_EDIT_CORNER_HIT_SIZE, SCREEN_EDIT_EDGE_HANDLE_MAX_LENGTH, SCREEN_EDIT_EDGE_HANDLE_MIN_LENGTH, SCREEN_EDIT_EDGE_HANDLE_ACTIVE_SCALE_X, SCREEN_EDIT_EDGE_HANDLE_ACTIVE_SCALE_Y, SCREEN_EDIT_GRID_DIVISIONS, SCREEN_EDIT_MIN_CONVEX_CROSS_ABS, SCREEN_EDIT_HANDLE_PARTS, SCREEN_EDIT_CORNER_PARTS, SCREEN_EDIT_EDGE_PARTS, SCREEN_EDIT_PART_POINT_INDICES;
+var init_editOverlay = __esm({
+  "src/viewer/screenSelection/editOverlay.js"() {
+    init_geometry();
+    SCREEN_EDIT_EDGE_HIT_SIZE = 8;
+    SCREEN_EDIT_CORNER_HIT_SIZE = 16;
+    SCREEN_EDIT_EDGE_HANDLE_MAX_LENGTH = 26;
+    SCREEN_EDIT_EDGE_HANDLE_MIN_LENGTH = 6;
+    SCREEN_EDIT_EDGE_HANDLE_ACTIVE_SCALE_X = 1.5;
+    SCREEN_EDIT_EDGE_HANDLE_ACTIVE_SCALE_Y = 1.5;
+    SCREEN_EDIT_GRID_DIVISIONS = 8;
+    SCREEN_EDIT_MIN_CONVEX_CROSS_ABS = 1e-3;
+    SCREEN_EDIT_HANDLE_PARTS = [
+      "top-left",
+      "top",
+      "top-right",
+      "right",
+      "bottom-right",
+      "bottom",
+      "bottom-left",
+      "left"
+    ];
+    SCREEN_EDIT_CORNER_PARTS = [
+      "top-left",
+      "top-right",
+      "bottom-right",
+      "bottom-left"
+    ];
+    SCREEN_EDIT_EDGE_PARTS = ["top", "right", "bottom", "left"];
+    SCREEN_EDIT_PART_POINT_INDICES = {
+      "bottom-left": [3],
+      "bottom-right": [2],
+      bottom: [2, 3],
+      left: [3, 0],
+      right: [1, 2],
+      top: [0, 1],
+      "top-left": [0],
+      "top-right": [1]
+    };
+  }
+});
+
 // src/viewer/dom/cropUi.js
 function updateCropControls({
   activeScreenSelectionId,
@@ -68993,9 +69358,13 @@ function createCropController({
   let nextSelectionId = 1;
   let activeSelectionId = null;
   let pendingMode = false;
+  let pendingScreenEdit = null;
+  let pendingEditDrag = null;
+  let editCursor = "";
   let hasGaussianSplats = false;
   const sphere = new Sphere();
   const cameraForward2 = new Vector3();
+  const screenEditOverlay = createScreenEditOverlay({ overlayEl, rectEl });
   function getActiveSelection() {
     if (activeSelectionId == null) {
       return null;
@@ -69011,6 +69380,115 @@ function createCropController({
       }))
     ];
   }
+  function setEditCursor(cursor) {
+    const nextCursor = cursor || "";
+    if (editCursor === nextCursor) {
+      return;
+    }
+    domElement.style.cursor = nextCursor;
+    editCursor = nextCursor;
+  }
+  function clearEditCursor() {
+    setEditCursor("");
+  }
+  function getActivePendingEdit() {
+    if (!pendingScreenEdit || activeSelectionId !== pendingScreenEdit.selectionId) {
+      return null;
+    }
+    const match = pendingSelections.find(
+      (selection) => selection.id === pendingScreenEdit.selectionId
+    );
+    return match ? pendingScreenEdit : null;
+  }
+  function clearScreenEditOverlay() {
+    screenEditOverlay.clear();
+    clearEditCursor();
+  }
+  function syncPendingEditOverlay() {
+    const edit = getActivePendingEdit();
+    if (!edit) {
+      clearScreenEditOverlay();
+      if (!pendingMode) {
+        clearOverlay(overlayEl, rectEl);
+      }
+      return;
+    }
+    screenEditOverlay.render(edit.clientPoints, { showGrid: false });
+  }
+  function createCameraPoseSnapshot() {
+    camera.updateMatrixWorld(true);
+    return {
+      position: camera.position.toArray(),
+      projectionMatrix: camera.projectionMatrix.toArray(),
+      quaternion: camera.quaternion.toArray()
+    };
+  }
+  function projectionChanged(source, target) {
+    if (!Array.isArray(source) || !Array.isArray(target)) {
+      return true;
+    }
+    return source.some(
+      (value, index) => Math.abs(value - target[index]) > CAMERA_PROJECTION_EPSILON
+    );
+  }
+  function cameraPoseChanged(cameraPose) {
+    if (!cameraPose) {
+      return true;
+    }
+    camera.updateMatrixWorld(true);
+    const dx = camera.position.x - cameraPose.position[0];
+    const dy = camera.position.y - cameraPose.position[1];
+    const dz = camera.position.z - cameraPose.position[2];
+    if (dx * dx + dy * dy + dz * dz > CAMERA_POSITION_EPSILON_SQ) {
+      return true;
+    }
+    const quaternion = cameraPose.quaternion;
+    const quaternionDot = Math.abs(
+      camera.quaternion.x * quaternion[0] + camera.quaternion.y * quaternion[1] + camera.quaternion.z * quaternion[2] + camera.quaternion.w * quaternion[3]
+    );
+    if (1 - Math.min(1, quaternionDot) > CAMERA_QUATERNION_EPSILON) {
+      return true;
+    }
+    return projectionChanged(
+      camera.projectionMatrix.toArray(),
+      cameraPose.projectionMatrix
+    );
+  }
+  function clearPendingScreenEdit() {
+    pendingScreenEdit = null;
+    pendingEditDrag = null;
+    syncPendingEditOverlay();
+  }
+  function freezePendingScreenEdit(showStatus = false) {
+    const hadEdit = !!pendingScreenEdit;
+    if (!hadEdit) {
+      return false;
+    }
+    clearPendingScreenEdit();
+    if (showStatus) {
+      setStatus(
+        "Screen selection shape fixed after camera movement. Drag the 3D far plane, then Confirm or Cancel."
+      );
+    }
+    return true;
+  }
+  function freezePendingScreenEditIfCameraChanged() {
+    if (!pendingScreenEdit || pendingEditDrag) {
+      return false;
+    }
+    if (!cameraPoseChanged(pendingScreenEdit.cameraPose)) {
+      return false;
+    }
+    return freezePendingScreenEdit(true);
+  }
+  function createPendingScreenEdit(selection, clientRect) {
+    pendingScreenEdit = {
+      cameraPose: createCameraPoseSnapshot(),
+      clientPoints: clampClientPoints(getClientRectPoints(clientRect), domElement),
+      selectionId: selection.id
+    };
+    syncPendingEditOverlay();
+  }
   function syncWorldState() {
     const transform = getCurrentRootTransformArray();
     getEntries().forEach(({ selection }) => {
@@ -69090,10 +69568,171 @@ function createCropController({
     camera,
     domElement,
     getDepthRange,
+    onOverlayClear: clearScreenEditOverlay,
+    onOverlayUpdate: (clientRect) => {
+      screenEditOverlay.render(getClientRectPoints(clientRect), {
+        showGrid: true
+      });
+      return true;
+    },
     onSelectionCreated: handleSelectionCreated,
     overlayEl,
     rectEl
   });
+  function createEditHit(part) {
+    return { cursor: "grab", part };
+  }
+  function getPendingEditHit(event) {
+    if (freezePendingScreenEditIfCameraChanged()) {
+      return null;
+    }
+    const edit = getActivePendingEdit();
+    if (!edit) {
+      return null;
+    }
+    const pointer = { x: event.clientX, y: event.clientY };
+    for (const part of SCREEN_EDIT_CORNER_PARTS) {
+      const point = getPartPoint(edit.clientPoints, part);
+      const dx = pointer.x - point.x;
+      const dy = pointer.y - point.y;
+      if (dx * dx + dy * dy <= SCREEN_EDIT_CORNER_HIT_SIZE ** 2) {
+        return createEditHit(part);
+      }
+    }
+    for (const part of SCREEN_EDIT_EDGE_PARTS) {
+      const [startIndex, endIndex] = SCREEN_EDIT_PART_POINT_INDICES[part];
+      if (pointSegmentDistanceSq(
+        pointer,
+        edit.clientPoints[startIndex],
+        edit.clientPoints[endIndex]
+      ) <= SCREEN_EDIT_EDGE_HIT_SIZE ** 2) {
+        return createEditHit(part);
+      }
+    }
+    return null;
+  }
+  function getPendingEditDragPoints(event) {
+    const { part, startClientX, startClientY, startPoints } = pendingEditDrag;
+    const domRect = domElement.getBoundingClientRect();
+    const indices = SCREEN_EDIT_PART_POINT_INDICES[part] || [];
+    let dx = event.clientX - startClientX;
+    let dy = event.clientY - startClientY;
+    indices.forEach((index) => {
+      const point = startPoints[index];
+      dx = Math.max(dx, domRect.left - point.x);
+      dx = Math.min(dx, domRect.right - point.x);
+      dy = Math.max(dy, domRect.top - point.y);
+      dy = Math.min(dy, domRect.bottom - point.y);
+    });
+    return startPoints.map(
+      (point, index) => indices.includes(index) ? {
+        x: point.x + dx,
+        y: point.y + dy
+      } : copyClientPoint(point)
+    );
+  }
+  function updatePendingEditSelection(clientPoints) {
+    const edit = getActivePendingEdit();
+    if (!edit) {
+      return false;
+    }
+    const match = findSelection(edit.selectionId);
+    if (!match) {
+      return false;
+    }
+    if (!isConvexClientQuad(clientPoints)) {
+      return false;
+    }
+    const selectionData = createSelectionData({
+      camera,
+      clientPoints,
+      domElement,
+      getDepthRange
+    });
+    if (!selectionData) {
+      return false;
+    }
+    edit.clientPoints = copyClientPoints(clientPoints);
+    setScreenSelectionShape(
+      match.selection,
+      selectionData,
+      getCurrentRootTransformArray()
+    );
+    syncPendingEditOverlay();
+    syncTransformControlsState();
+    return true;
+  }
+  function handlePendingEditPointerDown(event) {
+    if (event.button !== 0) {
+      return false;
+    }
+    const hit = getPendingEditHit(event);
+    if (!hit) {
+      return false;
+    }
+    pendingEditDrag = {
+      part: hit.part,
+      pointerId: event.pointerId,
+      startClientX: event.clientX,
+      startClientY: event.clientY,
+      startPoints: copyClientPoints(pendingScreenEdit.clientPoints),
+      updated: false
+    };
+    domElement.setPointerCapture?.(event.pointerId);
+    screenEditOverlay.setActivePart(hit.part);
+    setEditCursor("grabbing");
+    event.preventDefault();
+    event.stopPropagation();
+    return true;
+  }
+  function handlePendingEditPointerMove(event) {
+    if (pendingEditDrag) {
+      if (event.pointerId !== pendingEditDrag.pointerId) {
+        return false;
+      }
+      pendingEditDrag.updated = updatePendingEditSelection(getPendingEditDragPoints(event)) || pendingEditDrag.updated;
+      event.preventDefault();
+      event.stopPropagation();
+      return true;
+    }
+    if (event.buttons) {
+      return false;
+    }
+    const hit = getPendingEditHit(event);
+    screenEditOverlay.setActivePart(hit?.part);
+    setEditCursor(hit?.cursor || "");
+    return false;
+  }
+  function handlePendingEditPointerUp(event) {
+    if (!pendingEditDrag || event.pointerId !== pendingEditDrag.pointerId) {
+      return false;
+    }
+    domElement.releasePointerCapture?.(event.pointerId);
+    const updated = pendingEditDrag.updated;
+    pendingEditDrag = null;
+    const hit = getPendingEditHit(event);
+    screenEditOverlay.setActivePart(hit?.part);
+    setEditCursor(hit?.cursor || "");
+    setStatus(
+      updated ? "Updated screen selection convex quadrilateral." : "Screen selection must stay convex.",
+      !updated
+    );
+    event.preventDefault();
+    event.stopPropagation();
+    return true;
+  }
+  function handlePendingEditPointerCancel(event) {
+    if (!pendingEditDrag || event.pointerId !== pendingEditDrag.pointerId) {
+      return false;
+    }
+    domElement.releasePointerCapture?.(event.pointerId);
+    pendingEditDrag = null;
+    screenEditOverlay.setActivePart(null);
+    clearEditCursor();
+    event.preventDefault();
+    event.stopPropagation();
+    return true;
+  }
   function setMode(active) {
     pendingMode = active && hasGaussianSplats && pendingSelections.length === 0;
     pointerTracker.setActive(pendingMode);
@@ -69106,6 +69745,7 @@ function createCropController({
     }
     cameraController.enabled = !transformControls.dragging;
     syncTransformControlsState();
+    syncPendingEditOverlay();
     refreshUi();
   }
   function cancelMode() {
@@ -69114,7 +69754,7 @@ function createCropController({
     }
     setMode(false);
   }
-  function handleSelectionCreated(selectionData) {
+  function handleSelectionCreated(selectionData, clientRect) {
     if (pendingSelections.length > 0) {
       setMode(false);
       setStatus(
@@ -69136,12 +69776,13 @@ function createCropController({
     pendingSelections.push(selection);
     activeSelectionId = selection.id;
     setMode(false);
+    createPendingScreenEdit(selection, clientRect);
     syncEditSdfs();
     syncFarHandles();
     syncTransformControlsState();
     refreshUi();
     setStatus(
-      "Added screen exclude selection. Drag the 3D far plane, then Confirm or Cancel before drawing another."
+      "Added screen exclude selection. Drag corner points or edges into a convex quadrilateral before moving the camera, then adjust the 3D far plane and Confirm or Cancel."
     );
   }
   function toggle() {
@@ -69173,6 +69814,7 @@ function createCropController({
     }
     const count = pendingSelections.length;
     selections.push(...pendingSelections);
+    clearPendingScreenEdit();
     pendingSelections = [];
     activeSelectionId = null;
     setMode(false);
@@ -69193,6 +69835,7 @@ function createCropController({
     )) {
       activeSelectionId = null;
     }
+    clearPendingScreenEdit();
     pendingSelections.forEach(disposeScreenSelection);
     pendingSelections = [];
     syncEditSdfs();
@@ -69259,10 +69902,12 @@ function createCropController({
     setTransformMode(null);
     syncEditSdfs();
     syncFarHandles();
+    syncPendingEditOverlay();
     refreshUi();
     syncTransformControlsState();
+    const canEditPendingRect = !wasActive && !!getActivePendingEdit();
     setStatus(
-      wasActive ? "Screen selection deactivated." : "Drag the 3D far plane handle to adjust screen selection depth."
+      wasActive ? "Screen selection deactivated." : canEditPendingRect ? "Drag corner points or edges into a convex quadrilateral before moving the camera, or drag the 3D far plane to adjust depth." : "Drag the 3D far plane handle to adjust screen selection depth."
     );
   }
   function removeFromList(list, selectionId) {
@@ -69283,6 +69928,9 @@ function createCropController({
     if (Number(selectionId) === activeSelectionId) {
       activeSelectionId = null;
     }
+    if (Number(selectionId) === pendingScreenEdit?.selectionId) {
+      clearPendingScreenEdit();
+    }
     syncEditSdfs();
     syncFarHandles();
     refreshUi();
@@ -69300,6 +69948,7 @@ function createCropController({
     selections = [];
     pendingSelections = [];
     activeSelectionId = null;
+    clearPendingScreenEdit();
     syncEditSdfs();
     syncFarHandles();
     refreshUi();
@@ -69313,6 +69962,7 @@ function createCropController({
     activeSelectionId = null;
     syncEditSdfs();
     syncFarHandles();
+    syncPendingEditOverlay();
     cancelMode();
     refreshUi();
   }
@@ -69323,8 +69973,44 @@ function createCropController({
     activeSelectionId = null;
     syncEditSdfs();
     syncFarHandles();
+    syncPendingEditOverlay();
     refreshUi();
   }
+  function shouldCapturePointerDown(event) {
+    return event.button === 0 && (pendingMode || getPendingEditHit(event) !== null);
+  }
+  function handlePointerDown(event) {
+    if (pointerTracker.handlePointerDown(event)) {
+      return true;
+    }
+    return handlePendingEditPointerDown(event);
+  }
+  function handlePointerMove(event) {
+    if (pointerTracker.handlePointerMove(event)) {
+      return true;
+    }
+    return handlePendingEditPointerMove(event);
+  }
+  function handlePointerUp(event) {
+    if (pointerTracker.handlePointerUp(event)) {
+      return true;
+    }
+    return handlePendingEditPointerUp(event);
+  }
+  function handlePointerCancel(event) {
+    if (pointerTracker.handlePointerCancel(event)) {
+      return true;
+    }
+    return handlePendingEditPointerCancel(event);
+  }
+  cameraController.addEventListener(
+    "update",
+    freezePendingScreenEditIfCameraChanged
+  );
+  cameraController.addEventListener(
+    "finish",
+    freezePendingScreenEditIfCameraChanged
+  );
   return {
     cancel,
     cancelMode,
@@ -69334,25 +70020,32 @@ function createCropController({
     getActiveSelection,
     getPayload,
     getPendingMode: () => pendingMode,
-    handlePointerCancel: pointerTracker.handlePointerCancel,
-    handlePointerDown: pointerTracker.handlePointerDown,
-    handlePointerMove: pointerTracker.handlePointerMove,
-    handlePointerUp: pointerTracker.handlePointerUp,
+    handlePointerCancel,
+    handlePointerDown,
+    handlePointerMove,
+    handlePointerUp,
     handleSelectionRemove,
     handleSelectionSelect,
     handleTransformControlObjectChange,
     hasPendingSelections: () => pendingSelections.length > 0,
     notifyTransformModeChanged,
     setHasGaussianSplats,
+    shouldCapturePointerDown,
     syncWorldState,
     toggle
   };
 }
+var CAMERA_POSITION_EPSILON_SQ, CAMERA_QUATERNION_EPSILON, CAMERA_PROJECTION_EPSILON;
 var init_cropController = __esm({
   "src/viewer/screenSelection/cropController.js"() {
     init_three_module();
     init_screenSelection();
+    init_geometry();
+    init_editOverlay();
     init_cropUi();
+    CAMERA_POSITION_EPSILON_SQ = 1e-12;
+    CAMERA_QUATERNION_EPSILON = 1e-10;
+    CAMERA_PROJECTION_EPSILON = 1e-10;
   }
 });
 
@@ -69961,7 +70654,7 @@ var require_app = __commonJS({
       savedControlDisabledStates = null;
     }
     cameraController.setPointerDownFilter((event) => {
-      return !(cropController?.getPendingMode() && event.button === 0);
+      return !(cropController?.shouldCapturePointerDown(event) ?? false);
     });
     var { transformControls, transformControlsHelper } = createViewerTransformControls({
       camera,