@ericchen1990/pano-view 0.1.5 → 0.1.6

package/dist/index.d.mts

@@ -2,7 +2,7 @@ import * as react from 'react';
 import { ReactNode, ComponentPropsWithoutRef } from 'react';
 import { Texture, ColorRepresentation, Vector3 } from 'three';
 
-declare const MAX_HOTSPOT_PITCH = 89.9;
+declare const MAX_HOTSPOT_PITCH = 90;
 type HotspotPosition = {
     /** Horizontal panorama angle in degrees. Positive values look right. */
     yaw: number;
@@ -36,6 +36,8 @@ type HotspotCommonProps = {
     width?: number;
     /** Angular height in degrees. Defaults to 8. */
     height?: number;
+    /** Overall multiplier for the hotspot's angular width and height. Defaults to 1. */
+    scale?: number;
     /** Defaults to "billboard". */
     mode?: HotspotMode;
     /**
@@ -305,7 +307,7 @@ type PolygonVerticesChangeEvent = {
     position: HotspotPosition;
     startPosition: HotspotPosition;
 };
-type PolygonHotspotProps = Omit<HotspotCommonProps, "position" | "width" | "height" | "mode" | "distance" | "scaleMode" | "onDragStart" | "onPositionChange" | "onDragEnd"> & {
+type PolygonHotspotProps = Omit<HotspotCommonProps, "position" | "width" | "height" | "scale" | "mode" | "distance" | "scaleMode" | "rotation" | "onDragStart" | "onPositionChange" | "onDragEnd"> & {
     vertices: HotspotPosition[];
     fill?: ColorRepresentation;
     fillOpacity?: number;
@@ -337,7 +339,7 @@ type PolylineVerticesChangeEvent = {
     position: HotspotPosition;
     startPosition: HotspotPosition;
 };
-type PolylineHotspotProps = Omit<HotspotCommonProps, "position" | "width" | "height" | "mode" | "distance" | "scaleMode" | "onDragStart" | "onPositionChange" | "onDragEnd"> & {
+type PolylineHotspotProps = Omit<HotspotCommonProps, "position" | "width" | "height" | "scale" | "mode" | "distance" | "scaleMode" | "rotation" | "onDragStart" | "onPositionChange" | "onDragEnd"> & {
     vertices: HotspotPosition[];
     stroke?: ColorRepresentation;
     /** Screen-space line width in CSS pixels. Defaults to 2. */
@@ -464,6 +466,7 @@ type PointHotspotDefinitionBase = HotspotDefinitionBase & {
     position: HotspotPosition;
     width?: number;
     height?: number;
+    scale?: number;
     mode?: HotspotMode;
     distance?: number;
     scaleMode?: HotspotScaleMode;

package/dist/index.d.ts

@@ -2,7 +2,7 @@ import * as react from 'react';
 import { ReactNode, ComponentPropsWithoutRef } from 'react';
 import { Texture, ColorRepresentation, Vector3 } from 'three';
 
-declare const MAX_HOTSPOT_PITCH = 89.9;
+declare const MAX_HOTSPOT_PITCH = 90;
 type HotspotPosition = {
     /** Horizontal panorama angle in degrees. Positive values look right. */
     yaw: number;
@@ -36,6 +36,8 @@ type HotspotCommonProps = {
     width?: number;
     /** Angular height in degrees. Defaults to 8. */
     height?: number;
+    /** Overall multiplier for the hotspot's angular width and height. Defaults to 1. */
+    scale?: number;
     /** Defaults to "billboard". */
     mode?: HotspotMode;
     /**
@@ -305,7 +307,7 @@ type PolygonVerticesChangeEvent = {
     position: HotspotPosition;
     startPosition: HotspotPosition;
 };
-type PolygonHotspotProps = Omit<HotspotCommonProps, "position" | "width" | "height" | "mode" | "distance" | "scaleMode" | "onDragStart" | "onPositionChange" | "onDragEnd"> & {
+type PolygonHotspotProps = Omit<HotspotCommonProps, "position" | "width" | "height" | "scale" | "mode" | "distance" | "scaleMode" | "rotation" | "onDragStart" | "onPositionChange" | "onDragEnd"> & {
     vertices: HotspotPosition[];
     fill?: ColorRepresentation;
     fillOpacity?: number;
@@ -337,7 +339,7 @@ type PolylineVerticesChangeEvent = {
     position: HotspotPosition;
     startPosition: HotspotPosition;
 };
-type PolylineHotspotProps = Omit<HotspotCommonProps, "position" | "width" | "height" | "mode" | "distance" | "scaleMode" | "onDragStart" | "onPositionChange" | "onDragEnd"> & {
+type PolylineHotspotProps = Omit<HotspotCommonProps, "position" | "width" | "height" | "scale" | "mode" | "distance" | "scaleMode" | "rotation" | "onDragStart" | "onPositionChange" | "onDragEnd"> & {
     vertices: HotspotPosition[];
     stroke?: ColorRepresentation;
     /** Screen-space line width in CSS pixels. Defaults to 2. */
@@ -464,6 +466,7 @@ type PointHotspotDefinitionBase = HotspotDefinitionBase & {
     position: HotspotPosition;
     width?: number;
     height?: number;
+    scale?: number;
     mode?: HotspotMode;
     distance?: number;
     scaleMode?: HotspotScaleMode;

package/dist/index.mjs

@@ -20,7 +20,7 @@ import {
   useRef
 } from "react";
 import { Euler, MathUtils, PerspectiveCamera } from "three";
-var MAX_PITCH = 89.9;
+var MAX_PITCH = 90;
 var INERTIA_ROTATION_DAMPING = 8;
 var INERTIA_ZOOM_DAMPING = 12;
 var DEFAULT_ROTATE_DAMPING = 14;
@@ -559,9 +559,10 @@ import { BackSide } from "three";
 import { MathUtils as MathUtils2, Vector3 } from "three";
 
 // src/hotspot/types.ts
-var MAX_HOTSPOT_PITCH = 89.9;
+var MAX_HOTSPOT_PITCH = 90;
 
 // src/hotspot/coordinates.ts
+var POLE_EPSILON_DEGREES = 1e-6;
 function normalizePanoYaw(yaw) {
   if (!Number.isFinite(yaw)) {
     return 0;
@@ -572,12 +573,18 @@ function clampPanoPitch(pitch) {
   if (!Number.isFinite(pitch)) {
     return 0;
   }
-  return MathUtils2.clamp(pitch, -MAX_HOTSPOT_PITCH, MAX_HOTSPOT_PITCH);
+  const clamped = MathUtils2.clamp(
+    pitch,
+    -MAX_HOTSPOT_PITCH,
+    MAX_HOTSPOT_PITCH
+  );
+  return Math.abs(clamped) >= MAX_HOTSPOT_PITCH - POLE_EPSILON_DEGREES ? Math.sign(clamped) * MAX_HOTSPOT_PITCH : clamped;
 }
 function normalizePanoPosition(position) {
+  const pitch = clampPanoPitch(position.pitch);
   return {
-    yaw: normalizePanoYaw(position.yaw),
-    pitch: clampPanoPitch(position.pitch)
+    yaw: Math.abs(pitch) === MAX_HOTSPOT_PITCH ? 0 : normalizePanoYaw(position.yaw),
+    pitch
   };
 }
 function panoPositionToVector3(position, radius = 1) {
@@ -705,7 +712,7 @@ var PanoView = forwardRef2(
     const normalizedInitialView = useMemo2(
       () => ({
         yaw: initialView?.yaw ?? DEFAULT_VIEW.yaw,
-        pitch: initialView?.pitch ?? DEFAULT_VIEW.pitch,
+        pitch: clampPanoPitch(initialView?.pitch ?? DEFAULT_VIEW.pitch),
         fov: Math.max(
           normalizedMinFov,
           Math.min(initialView?.fov ?? DEFAULT_VIEW.fov, normalizedMaxFov)
@@ -2505,6 +2512,9 @@ function angularSizeToWorldSize(size, radius) {
   const safeSize = Number.isFinite(size) ? MathUtils4.clamp(Math.abs(size), MIN_ANGULAR_SIZE, MAX_ANGULAR_SIZE) : MIN_ANGULAR_SIZE;
   return 2 * radius * Math.tan(MathUtils4.degToRad(safeSize) / 2);
 }
+function resolveScale(scale) {
+  return Number.isFinite(scale) && scale > 0 ? scale : 1;
+}
 function resolveDistance(placement, distance, width, height) {
   const maximumDistance = maximumHotspotDistance(width, height);
   if (placement === "surface") {
@@ -2569,6 +2579,7 @@ function HotspotAnchor({
   position,
   width,
   height,
+  scale = 1,
   useAngularScale = true,
   focusContent,
   mode = "billboard",
@@ -2597,7 +2608,15 @@ function HotspotAnchor({
   const normalizedPosition = normalizePanoPosition(position);
   const rendering = internalOrientation && internalPlacement ? { orientation: internalOrientation, placement: internalPlacement } : HOTSPOT_MODE_RENDERING[mode];
   const { orientation: orientation2, placement } = rendering;
-  const resolvedDistance = resolveDistance(placement, distance, width, height);
+  const resolvedScale = resolveScale(scale);
+  const scaledWidth = width * resolvedScale;
+  const scaledHeight = height * resolvedScale;
+  const resolvedDistance = resolveDistance(
+    placement,
+    distance,
+    scaledWidth,
+    scaledHeight
+  );
   const worldPosition = useMemo6(
     () => panoPositionToVector3(normalizedPosition, resolvedDistance),
     [normalizedPosition.pitch, normalizedPosition.yaw, resolvedDistance]
@@ -2606,8 +2625,8 @@ function HotspotAnchor({
     () => createSurfaceQuaternion(normalizedPosition),
     [normalizedPosition.pitch, normalizedPosition.yaw]
   );
-  const worldWidth = angularSizeToWorldSize(width, resolvedDistance);
-  const worldHeight = angularSizeToWorldSize(height, resolvedDistance);
+  const worldWidth = angularSizeToWorldSize(scaledWidth, resolvedDistance);
+  const worldHeight = angularSizeToWorldSize(scaledHeight, resolvedDistance);
   const focusGeometry = useMemo6(() => {
     const planeGeometry = new PlaneGeometry3(1, 1);
     const geometry = new EdgesGeometry(planeGeometry);