3dtiles-inspector 0.2.2 → 0.2.4

package/src/viewer/screenSelection/editOverlay.js

@@ -0,0 +1,348 @@
+import { updateOverlayRect } from './geometry.js';
+
+export const SCREEN_EDIT_EDGE_HIT_SIZE = 8;
+export const SCREEN_EDIT_CORNER_HIT_SIZE = 16;
+const SCREEN_EDIT_EDGE_HANDLE_MAX_LENGTH = 26;
+const SCREEN_EDIT_EDGE_HANDLE_MIN_LENGTH = 6;
+const SCREEN_EDIT_EDGE_HANDLE_ACTIVE_SCALE_X = 1.5;
+const SCREEN_EDIT_EDGE_HANDLE_ACTIVE_SCALE_Y = 1.5;
+const SCREEN_EDIT_GRID_DIVISIONS = 8;
+const SCREEN_EDIT_MIN_CONVEX_CROSS_ABS = 1e-3;
+
+export const SCREEN_EDIT_HANDLE_PARTS = [
+  'top-left',
+  'top',
+  'top-right',
+  'right',
+  'bottom-right',
+  'bottom',
+  'bottom-left',
+  'left',
+];
+export const SCREEN_EDIT_CORNER_PARTS = [
+  'top-left',
+  'top-right',
+  'bottom-right',
+  'bottom-left',
+];
+export const SCREEN_EDIT_EDGE_PARTS = ['top', 'right', 'bottom', 'left'];
+export const 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],
+};
+
+function clampValue(value, min, max) {
+  return Math.min(max, Math.max(min, value));
+}
+
+export function copyClientPoint(point) {
+  return {
+    x: Number(point?.x) || 0,
+    y: Number(point?.y) || 0,
+  };
+}
+
+export function copyClientPoints(points) {
+  return points.map(copyClientPoint);
+}
+
+function getClientPointsBounds(points) {
+  const xs = points.map((point) => point.x);
+  const ys = points.map((point) => point.y);
+  return {
+    maxX: Math.max(...xs),
+    maxY: Math.max(...ys),
+    minX: Math.min(...xs),
+    minY: Math.min(...ys),
+  };
+}
+
+export 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),
+  };
+}
+
+export function clampClientPoints(points, domElement) {
+  const domRect = domElement.getBoundingClientRect();
+  return points.map((point) => clampClientPoint(point, domRect));
+}
+
+function getPointTurnCross(a, b, c) {
+  return (b.x - a.x) * (c.y - b.y) - (b.y - a.y) * (c.x - b.x);
+}
+
+export 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;
+}
+
+export function getPartPoint(points, part) {
+  const indices = SCREEN_EDIT_PART_POINT_INDICES[part] || [];
+  if (indices.length === 0) {
+    return { x: 0, y: 0 };
+  }
+  const x =
+    indices.reduce((total, index) => total + points[index].x, 0) /
+    indices.length;
+  const y =
+    indices.reduce((total, index) => total + points[index].y, 0) /
+    indices.length;
+  return { x, y };
+}
+
+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(a, b, t) {
+  return {
+    x: a.x + (b.x - a.x) * t,
+    y: a.y + (b.y - a.y) * t,
+  };
+}
+
+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 t = index / SCREEN_EDIT_GRID_DIVISIONS;
+    const top = interpolatePoint(topLeft, topRight, t);
+    const bottom = interpolatePoint(bottomLeft, bottomRight, t);
+    const left = interpolatePoint(topLeft, bottomLeft, t);
+    const right = interpolatePoint(topRight, bottomRight, t);
+    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 svg = 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');
+  svg.classList.add('screen-selection-edit-svg');
+  grid.classList.add('screen-selection-edit-grid');
+  polygon.classList.add('screen-selection-edit-polygon');
+  svg.append(polygon, grid);
+  rectEl.appendChild(svg);
+
+  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';
+}
+
+export 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 px = point.x - start.x;
+    const py = point.y - start.y;
+    return px * px + py * py;
+  }
+
+  const t = clampValue(
+    ((point.x - start.x) * dx + (point.y - start.y) * dy) / lengthSq,
+    0,
+    1,
+  );
+  const x = start.x + dx * t;
+  const y = start.y + dy * t;
+  const px = point.x - x;
+  const py = point.y - y;
+  return px * px + py * py;
+}
+
+export 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 svg = rectEl?.querySelector('.screen-selection-edit-svg');
+    const polygon = rectEl?.querySelector('.screen-selection-edit-polygon');
+    const grid = rectEl?.querySelector('.screen-selection-edit-grid');
+    svg?.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,
+  };
+}

package/src/viewer/screenSelection/geometry.js

@@ -44,6 +44,16 @@ function clientPointToNdc(point, domRect) {
   };
 }
 
+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),
@@ -61,6 +71,21 @@ function getNdcSelectionRect(clientRect, domRect) {
   };
 }
 
+function getNdcSelectionQuad(clientPoints, domRect) {
+  return clientPoints.map((point) => clientPointToNdc(point, domRect));
+}
+
+function getNdcBounds(points) {
+  const xs = points.map((point) => point.x);
+  const ys = points.map((point) => point.y);
+  return {
+    maxX: Math.max(...xs),
+    maxY: Math.max(...ys),
+    minX: Math.min(...xs),
+    minY: Math.min(...ys),
+  };
+}
+
 export function updateOverlayRect(overlayEl, rectEl, clientRect) {
   if (!overlayEl || !rectEl) {
     return;
@@ -277,10 +302,12 @@ function createFarPlaneData({
   };
 }
 
-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,
@@ -312,56 +339,14 @@ function createFrustumData(camera, rect, depthRange) {
   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 ||
@@ -451,8 +436,22 @@ function createFrustumData(camera, rect, depthRange) {
   };
 }
 
+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,
+  );
+}
+
 export function createSelectionData({
   camera,
+  clientPoints,
   domElement,
   end,
   getDepthRange,
@@ -463,14 +462,27 @@ export function createSelectionData({
     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);
@@ -478,7 +490,9 @@ export function createSelectionData({
   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;
   }

package/src/viewer/screenSelection/index.js

@@ -1,5 +1,6 @@
 import {
   SCREEN_SELECTION_ACTION_EXCLUDE,
+  SCREEN_SELECTION_MIN_DEPTH_RANGE,
   cameraPosition,
   copyDepthRange,
   copyFarPlane,
@@ -87,6 +88,66 @@ export function getScreenSelectionPayload(selection) {
   };
 }
 
+export 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,
+    );
+  }
+}
+
 export function updateScreenSelectionWorldState(
   selection,
   currentTransformMatrix,

package/src/viewer/screenSelection/pointerTracker.js

@@ -11,6 +11,8 @@ export function createScreenSelectionPointerTracker({
   camera,
   domElement,
   getDepthRange,
+  onOverlayClear,
+  onOverlayUpdate,
   onSelectionCreated,
   overlayEl,
   rectEl,
@@ -20,9 +22,20 @@ export function createScreenSelectionPointerTracker({
 
   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) {
@@ -43,11 +56,7 @@ export 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();
@@ -61,11 +70,7 @@ export 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;
@@ -76,6 +81,9 @@ export function createScreenSelectionPointerTracker({
       return false;
     }
 
+    const clientRect = {
+      ...getClientSelectionRect(drag.start, drag.current),
+    };
     const selection = createSelectionData({
       camera,
       domElement,
@@ -85,7 +93,7 @@ export function createScreenSelectionPointerTracker({
     });
     domElement.releasePointerCapture?.(event.pointerId);
     clearDrag();
-    onSelectionCreated(selection);
+    onSelectionCreated(selection, clientRect);
     event.preventDefault();
     event.stopPropagation();
     return true;