etudes 1.2.0 → 2.0.0

package/lib/Panorama.d.ts

@@ -1,14 +1,15 @@
-import { HTMLAttributes } from 'react';
+import React, { HTMLAttributes } from 'react';
 import { Size } from 'spase';
-export declare type Props = HTMLAttributes<HTMLDivElement> & {
+export declare type PanoramaProps = Omit<HTMLAttributes<HTMLDivElement>, 'onResize'> & {
     /**
-     * The current angle in degrees, 0.0 - 360.0, inclusive. When angle is 0 or 360, the left bound of
-     * the image is at the center of the component.
+     * The current angle in degrees, 0.0 - 360.0, inclusive. When angle is 0 or
+     * 360, the left bound of the image is at the center of the component.
      */
     angle?: number;
     /**
-     * The panning speed. This is a multiplier to the number of pixels dragged, i.e. when set to 1,
-     * the image will shift the same amount of pixels that were dragged.
+     * The panning speed. This is a multiplier to the number of pixels dragged,
+     * i.e. when set to 1, the image will shift the same amount of pixels that
+     * were dragged.
      */
     speed?: number;
     /**
@@ -16,24 +17,24 @@ export declare type Props = HTMLAttributes<HTMLDivElement> & {
      */
     src?: string;
     /**
-     * A decimal percentage of the component width indicating where 0° should be, i.e. if `zeroAnchor`
-     * is `0`, the `angle` would be 0° when the left edge of the image is at the left edge of the
-     * component.
+     * A decimal percentage of the component width indicating where 0° should be,
+     * i.e. if `zeroAnchor` is `0`, the `angle` would be 0° when the left edge of
+     * the image is at the left edge of the component.
      */
     zeroAnchor?: number;
     /**
-     * Handler invoked when the positionchanges. This can either be invoked from the `angle` prop
-     * being changed or from the image being dragged.
+     * Handler invoked when the positionchanges. This can either be invoked from
+     * the `angle` prop being changed or from the image being dragged.
      *
      * @param position - The current position.
      * @param isDragging - Specifies if the position change is due to dragging.
      */
     onPositionChange?: (position: number, isDragging: boolean) => void;
     /**
-     * Handler invoked when the angle changes. This can either be invoked from the `angle` prop being
-     * changed or from the image being dragged. When `angle` is being double-binded, ensure that the
-     * value is only being set by this handler when `isDragging` is `true` to avoid potential update
-     * overflow.
+     * Handler invoked when the angle changes. This can either be invoked from the
+     * `angle` prop being changed or from the image being dragged. When `angle` is
+     * being double-binded, ensure that the value is only being set by this
+     * handler when `isDragging` is `true` to avoid potential update overflow.
      *
      * @param angle - The current angle.
      * @param isDragging - Specifies if the angle change is due to dragging.
@@ -62,11 +63,11 @@ export declare type Props = HTMLAttributes<HTMLDivElement> & {
      */
     onImageLoadError?: () => void;
     /**
-     * Handler invoked when the image size changes. This is the actual size of the loaded image. When
-     * no images are loaded yet, the size is `undefined`.
+     * Handler invoked when the image size changes. This is the actual size of the
+     * loaded image. When no images are loaded yet, the size is `undefined`.
      *
-     * @param size - The actual size of the loaded iamge. If no images are loaded yet, the size is
-     *               `undefined`.
+     * @param size - The actual size of the loaded iamge. If no images are loaded
+     *               yet, the size is `undefined`.
      */
     onImageSizeChange?: (size?: Size) => void;
     /**
@@ -77,6 +78,84 @@ export declare type Props = HTMLAttributes<HTMLDivElement> & {
     onResize?: (size: Size) => void;
 };
 /**
- * A component containing a pannable 360° panorama image. The angle supports two-way binding.
+ * A component containing a pannable 360° panorama image. The angle supports
+ * two-way binding.
  */
-export default function Panorama({ angle: externalAngle, speed, src, zeroAnchor, onAngleChange, onPositionChange, onDragStart, onDragEnd, onImageLoadStart, onImageLoadComplete, onImageLoadError, onImageSizeChange, onResize, ...props }: Props): JSX.Element;
+declare const _default: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "onResize"> & {
+    /**
+     * The current angle in degrees, 0.0 - 360.0, inclusive. When angle is 0 or
+     * 360, the left bound of the image is at the center of the component.
+     */
+    angle?: number | undefined;
+    /**
+     * The panning speed. This is a multiplier to the number of pixels dragged,
+     * i.e. when set to 1, the image will shift the same amount of pixels that
+     * were dragged.
+     */
+    speed?: number | undefined;
+    /**
+     * The source URL of the image.
+     */
+    src?: string | undefined;
+    /**
+     * A decimal percentage of the component width indicating where 0° should be,
+     * i.e. if `zeroAnchor` is `0`, the `angle` would be 0° when the left edge of
+     * the image is at the left edge of the component.
+     */
+    zeroAnchor?: number | undefined;
+    /**
+     * Handler invoked when the positionchanges. This can either be invoked from
+     * the `angle` prop being changed or from the image being dragged.
+     *
+     * @param position - The current position.
+     * @param isDragging - Specifies if the position change is due to dragging.
+     */
+    onPositionChange?: ((position: number, isDragging: boolean) => void) | undefined;
+    /**
+     * Handler invoked when the angle changes. This can either be invoked from the
+     * `angle` prop being changed or from the image being dragged. When `angle` is
+     * being double-binded, ensure that the value is only being set by this
+     * handler when `isDragging` is `true` to avoid potential update overflow.
+     *
+     * @param angle - The current angle.
+     * @param isDragging - Specifies if the angle change is due to dragging.
+     */
+    onAngleChange?: ((angle: number, isDragging: boolean) => void) | undefined;
+    /**
+     * Handler invoked when dragging starts.
+     */
+    onDragStart?: (() => void) | undefined;
+    /**
+     * Handler invoked when dragging ends.
+     */
+    onDragEnd?: (() => void) | undefined;
+    /**
+     * Handler invoked when the image begins loading.
+     */
+    onImageLoadStart?: (() => void) | undefined;
+    /**
+     * Handler invoked when the image is done loading.
+     *
+     * @param imageElement - The loaded image element.
+     */
+    onImageLoadComplete?: ((imageElement: HTMLImageElement) => void) | undefined;
+    /**
+     * Handler invoked when there is an error loading the image.
+     */
+    onImageLoadError?: (() => void) | undefined;
+    /**
+     * Handler invoked when the image size changes. This is the actual size of the
+     * loaded image. When no images are loaded yet, the size is `undefined`.
+     *
+     * @param size - The actual size of the loaded iamge. If no images are loaded
+     *               yet, the size is `undefined`.
+     */
+    onImageSizeChange?: ((size?: Size | undefined) => void) | undefined;
+    /**
+     * Handler invoked when the size of this component changes.
+     *
+     * @param size - The size of this component.
+     */
+    onResize?: ((size: Size) => void) | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export default _default;

package/lib/Panorama.js

@@ -1,8 +1,4 @@
 "use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -70,52 +66,29 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
 var spase_1 = require("spase");
-var styled_components_1 = __importDefault(require("styled-components"));
 var useDragEffect_1 = __importDefault(require("./hooks/useDragEffect"));
 var useLoadImageEffect_1 = __importDefault(require("./hooks/useLoadImageEffect"));
 var useResizeEffect_1 = __importDefault(require("./hooks/useResizeEffect"));
-function getFilledImageSize(originalSize, sizeToFill) {
-    var originalWidth = originalSize.width, originalHeight = originalSize.height;
-    var filledHeignt = sizeToFill.height;
-    if (originalHeight <= 0)
-        return new spase_1.Size();
-    var aspectRatio = filledHeignt / originalHeight;
-    var filledWidth = aspectRatio * originalWidth;
-    return new spase_1.Size([filledWidth, filledHeignt]);
-}
-function getDisplacementFromAngle(angle, originalImageSize, componentSize, zeroAnchor) {
-    var imageWidth = getFilledImageSize(originalImageSize, componentSize).width;
-    var componentWidth = componentSize.width;
-    var offset = componentWidth * zeroAnchor;
-    return (angle / 360) * imageWidth - offset;
-}
-function getAngleFromDisplacement(displacement, originalImageSize, componentSize, zeroAnchor) {
-    var imageWidth = getFilledImageSize(originalImageSize, componentSize).width;
-    var componentWidth = componentSize.width;
-    var offset = componentWidth * zeroAnchor;
-    var angle = ((displacement + offset) % imageWidth) / imageWidth * 360;
-    while (angle < 0)
-        angle += 360;
-    return angle;
-}
+var asStyleDict_1 = __importDefault(require("./utils/asStyleDict"));
 /**
- * A component containing a pannable 360° panorama image. The angle supports two-way binding.
+ * A component containing a pannable 360° panorama image. The angle supports
+ * two-way binding.
  */
-function Panorama(_a) {
+exports.default = (0, react_1.forwardRef)(function (_a, ref) {
     var _b = _a.angle, externalAngle = _b === void 0 ? 0 : _b, _c = _a.speed, speed = _c === void 0 ? 1 : _c, src = _a.src, _d = _a.zeroAnchor, zeroAnchor = _d === void 0 ? 0 : _d, onAngleChange = _a.onAngleChange, onPositionChange = _a.onPositionChange, onDragStart = _a.onDragStart, onDragEnd = _a.onDragEnd, onImageLoadStart = _a.onImageLoadStart, onImageLoadComplete = _a.onImageLoadComplete, onImageLoadError = _a.onImageLoadError, onImageSizeChange = _a.onImageSizeChange, onResize = _a.onResize, props = __rest(_a, ["angle", "speed", "src", "zeroAnchor", "onAngleChange", "onPositionChange", "onDragStart", "onDragEnd", "onImageLoadStart", "onImageLoadComplete", "onImageLoadError", "onImageSizeChange", "onResize"]);
     var mapDragPositionToDisplacement = function (currentPosition, dx, dy) {
-        var newDisplacement = currentPosition - (dx * speed);
+        var newDisplacement = currentPosition - dx * speed;
         return newDisplacement;
     };
-    var rootRef = (0, react_1.useRef)(null);
-    var _e = __read((0, useResizeEffect_1.default)(rootRef, { onResize: onResize }), 1), size = _e[0];
+    var bodyRef = (0, react_1.useRef)(null);
+    var _e = __read((0, useResizeEffect_1.default)(bodyRef, { onResize: onResize }), 1), size = _e[0];
     var _f = __read((0, react_1.useState)(externalAngle), 2), angle = _f[0], setAngle = _f[1];
     var _g = (0, useLoadImageEffect_1.default)(src, {
         onImageLoadComplete: onImageLoadComplete,
         onImageLoadError: onImageLoadError,
         onImageSizeChange: onImageSizeChange,
     }), _h = __read(_g.isLoading, 1), isLoading = _h[0], _j = __read(_g.imageSize, 1), imageSize = _j[0];
-    var _k = (0, useDragEffect_1.default)(rootRef, {
+    var _k = (0, useDragEffect_1.default)(bodyRef, {
         initialValue: 0,
         transform: mapDragPositionToDisplacement,
         onDragStart: onDragStart,
@@ -144,14 +117,42 @@ function Panorama(_a) {
         onAngleChange === null || onAngleChange === void 0 ? void 0 : onAngleChange(angle, isDragging);
         onPositionChange === null || onPositionChange === void 0 ? void 0 : onPositionChange(angle / 360, isDragging);
     }, [angle]);
-    return (react_1.default.createElement(StyledRoot, __assign({ ref: rootRef }, props),
-        react_1.default.createElement(StyledImageContainer, { style: {
-                backgroundImage: "url(".concat(src, ")"),
-                backgroundPositionX: "".concat(-displacement, "px"),
-            } })));
+    var fixedStyles = (0, asStyleDict_1.default)({
+        body: {
+            backgroundImage: "url(".concat(src, ")"),
+            backgroundPositionX: "".concat(-displacement, "px"),
+            backgroundRepeat: 'repeat',
+            backgroundSize: 'auto 100%',
+            height: '100%',
+            touchAction: 'none',
+            width: '100%',
+        },
+    });
+    return (react_1.default.createElement("div", __assign({}, props, { ref: ref }),
+        react_1.default.createElement("div", { ref: bodyRef, style: fixedStyles.body })));
+});
+function getFilledImageSize(originalSize, sizeToFill) {
+    var originalWidth = originalSize.width, originalHeight = originalSize.height;
+    var filledHeignt = sizeToFill.height;
+    if (originalHeight <= 0)
+        return new spase_1.Size();
+    var aspectRatio = filledHeignt / originalHeight;
+    var filledWidth = aspectRatio * originalWidth;
+    return new spase_1.Size([filledWidth, filledHeignt]);
+}
+function getDisplacementFromAngle(angle, originalImageSize, componentSize, zeroAnchor) {
+    var imageWidth = getFilledImageSize(originalImageSize, componentSize).width;
+    var componentWidth = componentSize.width;
+    var offset = componentWidth * zeroAnchor;
+    return angle / 360 * imageWidth - offset;
+}
+function getAngleFromDisplacement(displacement, originalImageSize, componentSize, zeroAnchor) {
+    var imageWidth = getFilledImageSize(originalImageSize, componentSize).width;
+    var componentWidth = componentSize.width;
+    var offset = componentWidth * zeroAnchor;
+    var angle = (displacement + offset) % imageWidth / imageWidth * 360;
+    while (angle < 0)
+        angle += 360;
+    return angle;
 }
-exports.default = Panorama;
-var StyledImageContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-repeat: repeat;\n  background-size: auto 100%;\n  height: 100%;\n  left: 0;\n  margin: 0;\n  padding: 0;\n  position: absolute;\n  top: 0;\n  width: 100%;\n"], ["\n  background-repeat: repeat;\n  background-size: auto 100%;\n  height: 100%;\n  left: 0;\n  margin: 0;\n  padding: 0;\n  position: absolute;\n  top: 0;\n  width: 100%;\n"])));
-var StyledRoot = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  align-items: center;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  flex: 0 0 auto;\n  height: 100%;\n  justify-content: center;\n  padding: 0;\n  position: relative;\n  touch-action: none;\n  width: 100%;\n\n  > div {\n    height: 100%;\n    left: 0;\n    margin: 0;\n    padding: 0;\n    position: absolute;\n    top: 0;\n    width: 100%;\n  }\n"], ["\n  align-items: center;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  flex: 0 0 auto;\n  height: 100%;\n  justify-content: center;\n  padding: 0;\n  position: relative;\n  touch-action: none;\n  width: 100%;\n\n  > div {\n    height: 100%;\n    left: 0;\n    margin: 0;\n    padding: 0;\n    position: absolute;\n    top: 0;\n    width: 100%;\n  }\n"])));
-var templateObject_1, templateObject_2;
 //# sourceMappingURL=Panorama.js.map

package/lib/Panorama.js.map

@@ -1 +1 @@
-{"version":3,"file":"Panorama.js","sourceRoot":"/","sources":["Panorama.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { HTMLAttributes, useEffect, useRef, useState } from 'react'\nimport { Size } from 'spase'\nimport styled from 'styled-components'\nimport useDragEffect from './hooks/useDragEffect'\nimport useLoadImageEffect from './hooks/useLoadImageEffect'\nimport useResizeEffect from './hooks/useResizeEffect'\n\nexport type Props = HTMLAttributes<HTMLDivElement> & {\n  /**\n   * The current angle in degrees, 0.0 - 360.0, inclusive. When angle is 0 or 360, the left bound of\n   * the image is at the center of the component.\n   */\n  angle?: number\n\n  /**\n   * The panning speed. This is a multiplier to the number of pixels dragged, i.e. when set to 1,\n   * the image will shift the same amount of pixels that were dragged.\n   */\n  speed?: number\n\n  /**\n   * The source URL of the image.\n   */\n  src?: string\n\n  /**\n   * A decimal percentage of the component width indicating where 0° should be, i.e. if `zeroAnchor`\n   * is `0`, the `angle` would be 0° when the left edge of the image is at the left edge of the\n   * component.\n   */\n  zeroAnchor?: number\n\n  /**\n   * Handler invoked when the positionchanges. This can either be invoked from the `angle` prop\n   * being changed or from the image being dragged.\n   *\n   * @param position - The current position.\n   * @param isDragging - Specifies if the position change is due to dragging.\n   */\n  onPositionChange?: (position: number, isDragging: boolean) => void\n\n  /**\n   * Handler invoked when the angle changes. This can either be invoked from the `angle` prop being\n   * changed or from the image being dragged. When `angle` is being double-binded, ensure that the\n   * value is only being set by this handler when `isDragging` is `true` to avoid potential update\n   * overflow.\n   *\n   * @param angle - The current angle.\n   * @param isDragging - Specifies if the angle change is due to dragging.\n   */\n  onAngleChange?: (angle: number, isDragging: boolean) => void\n\n  /**\n   * Handler invoked when dragging starts.\n   */\n  onDragStart?: () => void\n\n  /**\n   * Handler invoked when dragging ends.\n   */\n  onDragEnd?: () => void\n\n  /**\n   * Handler invoked when the image begins loading.\n   */\n  onImageLoadStart?: () => void\n\n  /**\n   * Handler invoked when the image is done loading.\n   *\n   * @param imageElement - The loaded image element.\n   */\n  onImageLoadComplete?: (imageElement: HTMLImageElement) => void\n\n  /**\n   * Handler invoked when there is an error loading the image.\n   */\n  onImageLoadError?: () => void\n\n  /**\n   * Handler invoked when the image size changes. This is the actual size of the loaded image. When\n   * no images are loaded yet, the size is `undefined`.\n   *\n   * @param size - The actual size of the loaded iamge. If no images are loaded yet, the size is\n   *               `undefined`.\n   */\n  onImageSizeChange?: (size?: Size) => void\n\n  /**\n   * Handler invoked when the size of this component changes.\n   *\n   * @param size - The size of this component.\n   */\n  onResize?: (size: Size) => void\n}\n\nfunction getFilledImageSize(originalSize: Size, sizeToFill: Size): Size {\n  const { width: originalWidth, height: originalHeight } = originalSize\n  const { height: filledHeignt } = sizeToFill\n\n  if (originalHeight <= 0) return new Size()\n\n  const aspectRatio = filledHeignt / originalHeight\n  const filledWidth = aspectRatio * originalWidth\n\n  return new Size([filledWidth, filledHeignt])\n}\n\nfunction getDisplacementFromAngle(angle: number, originalImageSize: Size, componentSize: Size, zeroAnchor: number): number {\n  const { width: imageWidth } = getFilledImageSize(originalImageSize, componentSize)\n  const { width: componentWidth } = componentSize\n  const offset = componentWidth*zeroAnchor\n  return (angle / 360) * imageWidth - offset\n}\n\nfunction getAngleFromDisplacement(displacement: number, originalImageSize: Size, componentSize: Size, zeroAnchor: number): number {\n  const { width: imageWidth } = getFilledImageSize(originalImageSize, componentSize)\n  const { width: componentWidth } = componentSize\n  const offset = componentWidth*zeroAnchor\n\n  let angle = ((displacement + offset) % imageWidth) / imageWidth*360\n  while (angle < 0) angle += 360\n  return angle\n}\n\n/**\n * A component containing a pannable 360° panorama image. The angle supports two-way binding.\n */\nexport default function Panorama({\n  angle: externalAngle = 0,\n  speed = 1,\n  src,\n  zeroAnchor = 0,\n  onAngleChange,\n  onPositionChange,\n  onDragStart,\n  onDragEnd,\n  onImageLoadStart,\n  onImageLoadComplete,\n  onImageLoadError,\n  onImageSizeChange,\n  onResize,\n  ...props\n}: Props) {\n  const mapDragPositionToDisplacement = (currentPosition: number, dx: number, dy: number): number => {\n    const newDisplacement = currentPosition - (dx * speed)\n    return newDisplacement\n  }\n\n  const rootRef = useRef<HTMLDivElement>(null)\n  const [size] = useResizeEffect(rootRef, { onResize })\n  const [angle, setAngle] = useState(externalAngle)\n\n  const { isLoading: [isLoading], imageSize: [imageSize] } = useLoadImageEffect(src, {\n    onImageLoadComplete,\n    onImageLoadError,\n    onImageSizeChange,\n  })\n\n  const { isDragging: [isDragging], value: [displacement, setDisplacement] } = useDragEffect(rootRef, {\n    initialValue: 0,\n    transform: mapDragPositionToDisplacement,\n    onDragStart,\n    onDragEnd,\n  })\n\n  useEffect(() => {\n    if (isDragging || isLoading || !imageSize) return\n\n    const newDisplacement = getDisplacementFromAngle(externalAngle, imageSize, size, zeroAnchor)\n\n    if (newDisplacement !== displacement) {\n      setDisplacement(newDisplacement)\n    }\n\n    if (externalAngle !== angle) {\n      setAngle(externalAngle)\n    }\n  }, [externalAngle, isLoading, imageSize, size, zeroAnchor])\n\n  useEffect(() => {\n    if (!isDragging || !imageSize) return\n\n    const newAngle = getAngleFromDisplacement(displacement, imageSize, size, zeroAnchor)\n\n    if (angle !== newAngle) {\n      setAngle(newAngle)\n    }\n  }, [displacement, imageSize, size, zeroAnchor])\n\n  useEffect(() => {\n    onAngleChange?.(angle, isDragging)\n    onPositionChange?.(angle / 360, isDragging)\n  }, [angle])\n\n  return (\n    <StyledRoot ref={rootRef} {...props}>\n      <StyledImageContainer\n        style={{\n          backgroundImage: `url(${src})`,\n          backgroundPositionX: `${-displacement}px`,\n        }}\n      />\n    </StyledRoot>\n  )\n}\n\nconst StyledImageContainer = styled.div`\n  background-repeat: repeat;\n  background-size: auto 100%;\n  height: 100%;\n  left: 0;\n  margin: 0;\n  padding: 0;\n  position: absolute;\n  top: 0;\n  width: 100%;\n`\n\nconst StyledRoot = styled.div`\n  align-items: center;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  flex: 0 0 auto;\n  height: 100%;\n  justify-content: center;\n  padding: 0;\n  position: relative;\n  touch-action: none;\n  width: 100%;\n\n  > div {\n    height: 100%;\n    left: 0;\n    margin: 0;\n    padding: 0;\n    position: absolute;\n    top: 0;\n    width: 100%;\n  }\n`\n"]}
+{"version":3,"file":"Panorama.js","sourceRoot":"/","sources":["Panorama.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { forwardRef, HTMLAttributes, useEffect, useRef, useState } from 'react'\nimport { Size } from 'spase'\nimport useDragEffect from './hooks/useDragEffect'\nimport useLoadImageEffect from './hooks/useLoadImageEffect'\nimport useResizeEffect from './hooks/useResizeEffect'\nimport asStyleDict from './utils/asStyleDict'\n\nexport type PanoramaProps = Omit<HTMLAttributes<HTMLDivElement>, 'onResize'> & {\n  /**\n   * The current angle in degrees, 0.0 - 360.0, inclusive. When angle is 0 or\n   * 360, the left bound of the image is at the center of the component.\n   */\n  angle?: number\n\n  /**\n   * The panning speed. This is a multiplier to the number of pixels dragged,\n   * i.e. when set to 1, the image will shift the same amount of pixels that\n   * were dragged.\n   */\n  speed?: number\n\n  /**\n   * The source URL of the image.\n   */\n  src?: string\n\n  /**\n   * A decimal percentage of the component width indicating where 0° should be,\n   * i.e. if `zeroAnchor` is `0`, the `angle` would be 0° when the left edge of\n   * the image is at the left edge of the component.\n   */\n  zeroAnchor?: number\n\n  /**\n   * Handler invoked when the positionchanges. This can either be invoked from\n   * the `angle` prop being changed or from the image being dragged.\n   *\n   * @param position - The current position.\n   * @param isDragging - Specifies if the position change is due to dragging.\n   */\n  onPositionChange?: (position: number, isDragging: boolean) => void\n\n  /**\n   * Handler invoked when the angle changes. This can either be invoked from the\n   * `angle` prop being changed or from the image being dragged. When `angle` is\n   * being double-binded, ensure that the value is only being set by this\n   * handler when `isDragging` is `true` to avoid potential update overflow.\n   *\n   * @param angle - The current angle.\n   * @param isDragging - Specifies if the angle change is due to dragging.\n   */\n  onAngleChange?: (angle: number, isDragging: boolean) => void\n\n  /**\n   * Handler invoked when dragging starts.\n   */\n  onDragStart?: () => void\n\n  /**\n   * Handler invoked when dragging ends.\n   */\n  onDragEnd?: () => void\n\n  /**\n   * Handler invoked when the image begins loading.\n   */\n  onImageLoadStart?: () => void\n\n  /**\n   * Handler invoked when the image is done loading.\n   *\n   * @param imageElement - The loaded image element.\n   */\n  onImageLoadComplete?: (imageElement: HTMLImageElement) => void\n\n  /**\n   * Handler invoked when there is an error loading the image.\n   */\n  onImageLoadError?: () => void\n\n  /**\n   * Handler invoked when the image size changes. This is the actual size of the\n   * loaded image. When no images are loaded yet, the size is `undefined`.\n   *\n   * @param size - The actual size of the loaded iamge. If no images are loaded\n   *               yet, the size is `undefined`.\n   */\n  onImageSizeChange?: (size?: Size) => void\n\n  /**\n   * Handler invoked when the size of this component changes.\n   *\n   * @param size - The size of this component.\n   */\n  onResize?: (size: Size) => void\n}\n\n/**\n * A component containing a pannable 360° panorama image. The angle supports\n * two-way binding.\n */\nexport default forwardRef<HTMLDivElement, PanoramaProps>(({\n  angle: externalAngle = 0,\n  speed = 1,\n  src,\n  zeroAnchor = 0,\n  onAngleChange,\n  onPositionChange,\n  onDragStart,\n  onDragEnd,\n  onImageLoadStart,\n  onImageLoadComplete,\n  onImageLoadError,\n  onImageSizeChange,\n  onResize,\n  ...props\n}, ref) => {\n  const mapDragPositionToDisplacement = (currentPosition: number, dx: number, dy: number): number => {\n    const newDisplacement = currentPosition - dx * speed\n\n    return newDisplacement\n  }\n\n  const bodyRef = useRef<HTMLDivElement>(null)\n  const [size] = useResizeEffect(bodyRef, { onResize })\n  const [angle, setAngle] = useState(externalAngle)\n\n  const { isLoading: [isLoading], imageSize: [imageSize] } = useLoadImageEffect(src, {\n    onImageLoadComplete,\n    onImageLoadError,\n    onImageSizeChange,\n  })\n\n  const { isDragging: [isDragging], value: [displacement, setDisplacement] } = useDragEffect(bodyRef, {\n    initialValue: 0,\n    transform: mapDragPositionToDisplacement,\n    onDragStart,\n    onDragEnd,\n  })\n\n  useEffect(() => {\n    if (isDragging || isLoading || !imageSize) return\n\n    const newDisplacement = getDisplacementFromAngle(externalAngle, imageSize, size, zeroAnchor)\n\n    if (newDisplacement !== displacement) {\n      setDisplacement(newDisplacement)\n    }\n\n    if (externalAngle !== angle) {\n      setAngle(externalAngle)\n    }\n  }, [externalAngle, isLoading, imageSize, size, zeroAnchor])\n\n  useEffect(() => {\n    if (!isDragging || !imageSize) return\n\n    const newAngle = getAngleFromDisplacement(displacement, imageSize, size, zeroAnchor)\n\n    if (angle !== newAngle) {\n      setAngle(newAngle)\n    }\n  }, [displacement, imageSize, size, zeroAnchor])\n\n  useEffect(() => {\n    onAngleChange?.(angle, isDragging)\n    onPositionChange?.(angle / 360, isDragging)\n  }, [angle])\n\n  const fixedStyles = asStyleDict({\n    body: {\n      backgroundImage: `url(${src})`,\n      backgroundPositionX: `${-displacement}px`,\n      backgroundRepeat: 'repeat',\n      backgroundSize: 'auto 100%',\n      height: '100%',\n      touchAction: 'none',\n      width: '100%',\n    },\n  })\n\n  return (\n    <div {...props} ref={ref}>\n      <div ref={bodyRef} style={fixedStyles.body}/>\n    </div>\n  )\n})\n\nfunction getFilledImageSize(originalSize: Size, sizeToFill: Size): Size {\n  const { width: originalWidth, height: originalHeight } = originalSize\n  const { height: filledHeignt } = sizeToFill\n\n  if (originalHeight <= 0) return new Size()\n\n  const aspectRatio = filledHeignt / originalHeight\n  const filledWidth = aspectRatio * originalWidth\n\n  return new Size([filledWidth, filledHeignt])\n}\n\nfunction getDisplacementFromAngle(angle: number, originalImageSize: Size, componentSize: Size, zeroAnchor: number): number {\n  const { width: imageWidth } = getFilledImageSize(originalImageSize, componentSize)\n  const { width: componentWidth } = componentSize\n  const offset = componentWidth * zeroAnchor\n\n  return angle / 360 * imageWidth - offset\n}\n\nfunction getAngleFromDisplacement(displacement: number, originalImageSize: Size, componentSize: Size, zeroAnchor: number): number {\n  const { width: imageWidth } = getFilledImageSize(originalImageSize, componentSize)\n  const { width: componentWidth } = componentSize\n  const offset = componentWidth * zeroAnchor\n\n  let angle = (displacement + offset) % imageWidth / imageWidth * 360\n  while (angle < 0) angle += 360\n\n  return angle\n}\n"]}

package/lib/PanoramaSlider.d.ts

@@ -1,36 +1,78 @@
-import { HTMLAttributes } from 'react';
+import React, { HTMLAttributes, PropsWithChildren } from 'react';
 import { Size } from 'spase';
-import Panorama, { Props as PanoramaProps } from './Panorama';
-export declare type Props = HTMLAttributes<HTMLDivElement> & PanoramaProps & {
+import { PanoramaProps } from './Panorama';
+export declare type PanoramaSliderProps = HTMLAttributes<HTMLDivElement> & PanoramaProps & PropsWithChildren<{
     /**
-     * Field-of-view (0.0 - 360.0 degrees, inclusive) that represents the size of the reticle. 360
-     * indicates the reticle covers the entire image. If this is unspecified, the component will
-     * attempt to automatically calculate the FOV using the `viewportSize` prop.
+     * Field-of-view (0.0 - 360.0 degrees, inclusive) that represents the size of
+     * the reticle. 360 indicates the reticle covers the entire image. If this is
+     * unspecified, the component will attempt to automatically calculate the FOV
+     * using the `viewportSize` prop.
      */
     fov?: number;
     /**
-     * Specifies which length (width or height) should be automatically calculated. The counterpart
-     * must be known (if `width` is specified here, the component's height must be known, i.e. it is
-     * specified in the CSS). Defaults to `width`.
+     * Specifies which length (width or height) should be automatically
+     * calculated. The counterpart must be known (if `width` is specified here,
+     * the component's height must be known, i.e. it is specified in the CSS).
+     * Defaults to `width`.
      */
     autoDimension?: 'width' | 'height';
     /**
-     * Size of the viewport that this component is controlling. A viewport can be thought of as a DOM
-     * element containing an aspect-filled image. This is used to automatically calculate the FOV if
-     * `fov` prop is not specified. If it is, this prop is ignored.
+     * Size of the viewport that this component is controlling. A viewport can be
+     * thought of as a DOM element containing an aspect-filled image. This is used
+     * to automatically calculate the FOV if `fov` prop is not specified. If it
+     * is, this prop is ignored.
      */
     viewportSize?: Size;
-};
+}>;
 /**
- * A slider for {@link Panorama} components.
+ * A slider for a {@link Panorama} component.
  *
- * @exports PanoramaSliderImage
- * @exports PanoramaSliderIndicator
- * @exports PanoramaSliderTrack
- * @exports PanoramaSliderReticle
+ * @exports PanoramaSliderIndicator - The indicator that appears when the slider
+ *                                    is being dragged.
+ * @exports PanoramaSliderReticle - The reticle that indicates the FOV of the
+ *                                  backing {@link Panorama}.
+ * @exports PanoramaSliderTrack - The slide track.
  */
-export default function PanoramaSlider({ fov, autoDimension, viewportSize, angle, speed, src, zeroAnchor, onAngleChange, onPositionChange, onDragStart, onDragEnd, onImageLoadStart, onImageLoadComplete, onImageLoadError, onImageSizeChange, onResize, style, ...props }: Props): JSX.Element;
-export declare const PanoramaSliderReticle: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const PanoramaSliderTrack: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const PanoramaSliderIndicator: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const PanoramaSliderImage: import("styled-components").StyledComponent<typeof Panorama, any, {}, never>;
+declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & Omit<React.HTMLAttributes<HTMLDivElement>, "onResize"> & {
+    angle?: number | undefined;
+    speed?: number | undefined;
+    src?: string | undefined;
+    zeroAnchor?: number | undefined;
+    onPositionChange?: ((position: number, isDragging: boolean) => void) | undefined;
+    onAngleChange?: ((angle: number, isDragging: boolean) => void) | undefined;
+    onDragStart?: (() => void) | undefined;
+    onDragEnd?: (() => void) | undefined;
+    onImageLoadStart?: (() => void) | undefined;
+    onImageLoadComplete?: ((imageElement: HTMLImageElement) => void) | undefined;
+    onImageLoadError?: (() => void) | undefined;
+    onImageSizeChange?: ((size?: Size | undefined) => void) | undefined;
+    onResize?: ((size: Size) => void) | undefined;
+} & {
+    /**
+     * Field-of-view (0.0 - 360.0 degrees, inclusive) that represents the size of
+     * the reticle. 360 indicates the reticle covers the entire image. If this is
+     * unspecified, the component will attempt to automatically calculate the FOV
+     * using the `viewportSize` prop.
+     */
+    fov?: number | undefined;
+    /**
+     * Specifies which length (width or height) should be automatically
+     * calculated. The counterpart must be known (if `width` is specified here,
+     * the component's height must be known, i.e. it is specified in the CSS).
+     * Defaults to `width`.
+     */
+    autoDimension?: "width" | "height" | undefined;
+    /**
+     * Size of the viewport that this component is controlling. A viewport can be
+     * thought of as a DOM element containing an aspect-filled image. This is used
+     * to automatically calculate the FOV if `fov` prop is not specified. If it
+     * is, this prop is ignored.
+     */
+    viewportSize?: Size | undefined;
+} & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;
+export default _default;
+export declare const PanoramaSliderTrack: ({ ...props }: HTMLAttributes<HTMLDivElement>) => JSX.Element;
+export declare const PanoramaSliderReticle: ({ ...props }: HTMLAttributes<HTMLDivElement>) => JSX.Element;
+export declare const PanoramaSliderIndicator: ({ ...props }: HTMLAttributes<HTMLDivElement>) => JSX.Element;