etudes 5.2.0 → 5.3.0

package/components/Panorama.js

@@ -1,78 +1,36 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __read = (this && this.__read) || function (o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m) return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-    }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
-        }
-        finally { if (e) throw e.error; }
-    }
-    return ar;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Panorama = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var spase_1 = require("spase");
-var useDragValueEffect_1 = require("../hooks/useDragValueEffect");
-var useImageSize_1 = require("../hooks/useImageSize");
-var useRect_1 = require("../hooks/useRect");
-var utils_1 = require("../utils");
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useEffect, useRef, useState } from 'react';
+import { Size } from 'spase';
+import { useDragValueEffect } from '../hooks/useDragValueEffect.js';
+import { useImageSize } from '../hooks/useImageSize.js';
+import { useRect } from '../hooks/useRect.js';
+import { asStyleDict } from '../utils/index.js';
 /**
  * A component containing a pannable 360° panorama image. The angle supports two-way binding.
  */
-exports.Panorama = (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, onLoadImageStart = _a.onLoadImageStart, onLoadImageComplete = _a.onLoadImageComplete, onLoadImageError = _a.onLoadImageError, onImageSizeChange = _a.onImageSizeChange, props = __rest(_a, ["angle", "speed", "src", "zeroAnchor", "onAngleChange", "onPositionChange", "onDragStart", "onDragEnd", "onLoadImageStart", "onLoadImageComplete", "onLoadImageError", "onImageSizeChange"]);
-    var mapDragPositionToDisplacement = function (currentPosition, dx, dy) {
-        var newDisplacement = currentPosition - dx * speed;
+export const Panorama = forwardRef(({ angle: externalAngle = 0, speed = 1, src, zeroAnchor = 0, onAngleChange, onPositionChange, onDragStart, onDragEnd, onLoadImageStart, onLoadImageComplete, onLoadImageError, onImageSizeChange, ...props }, ref) => {
+    const mapDragPositionToDisplacement = (currentPosition, dx, dy) => {
+        const newDisplacement = currentPosition - dx * speed;
         return newDisplacement;
     };
-    var bodyRef = (0, react_1.useRef)(null);
-    var bodyRect = (0, useRect_1.useRect)(bodyRef);
-    var imageSize = (0, useImageSize_1.useImageSize)({ src: src }, {
+    const bodyRef = useRef(null);
+    const bodyRect = useRect(bodyRef);
+    const imageSize = useImageSize({ src }, {
         onLoadStart: onLoadImageStart,
         onLoadComplete: onLoadImageComplete,
         onLoadError: onLoadImageError,
     });
-    var _e = __read((0, react_1.useState)(externalAngle), 2), angle = _e[0], setAngle = _e[1];
-    var _f = (0, useDragValueEffect_1.useDragValueEffect)(bodyRef, {
+    const [angle, setAngle] = useState(externalAngle);
+    const { isDragging: [isDragging], value: [displacement, setDisplacement] } = useDragValueEffect(bodyRef, {
         initialValue: 0,
         transform: mapDragPositionToDisplacement,
-        onDragStart: onDragStart,
-        onDragEnd: onDragEnd,
-    }), _g = __read(_f.isDragging, 1), isDragging = _g[0], _h = __read(_f.value, 2), displacement = _h[0], setDisplacement = _h[1];
-    (0, react_1.useEffect)(function () {
+        onDragStart,
+        onDragEnd,
+    });
+    useEffect(() => {
         if (isDragging || !imageSize)
             return;
-        var newDisplacement = getDisplacementFromAngle(externalAngle, imageSize, bodyRect.size, zeroAnchor);
+        const newDisplacement = getDisplacementFromAngle(externalAngle, imageSize, bodyRect.size, zeroAnchor);
         if (newDisplacement !== displacement) {
             setDisplacement(newDisplacement);
         }
@@ -80,31 +38,30 @@ exports.Panorama = (0, react_1.forwardRef)(function (_a, ref) {
             setAngle(externalAngle);
         }
     }, [externalAngle, imageSize, bodyRect.width, bodyRect.height, zeroAnchor]);
-    (0, react_1.useEffect)(function () {
+    useEffect(() => {
         if (!isDragging || !imageSize)
             return;
-        var newAngle = getAngleFromDisplacement(displacement, imageSize, bodyRect.size, zeroAnchor);
+        const newAngle = getAngleFromDisplacement(displacement, imageSize, bodyRect.size, zeroAnchor);
         if (angle !== newAngle) {
             setAngle(newAngle);
         }
     }, [displacement, imageSize, bodyRect.width, bodyRect.height, zeroAnchor]);
-    (0, react_1.useEffect)(function () {
-        onAngleChange === null || onAngleChange === void 0 ? void 0 : onAngleChange(angle, isDragging);
-        onPositionChange === null || onPositionChange === void 0 ? void 0 : onPositionChange(angle / 360, isDragging);
+    useEffect(() => {
+        onAngleChange?.(angle, isDragging);
+        onPositionChange?.(angle / 360, isDragging);
     }, [angle]);
-    (0, react_1.useEffect)(function () {
-        onImageSizeChange === null || onImageSizeChange === void 0 ? void 0 : onImageSizeChange(imageSize);
-    }, [imageSize === null || imageSize === void 0 ? void 0 : imageSize.width, imageSize === null || imageSize === void 0 ? void 0 : imageSize.height]);
-    var fixedStyles = getFixedStyles({ src: src, displacement: displacement });
-    return ((0, jsx_runtime_1.jsx)("div", __assign({}, props, { ref: ref, "data-component": 'panorama', children: (0, jsx_runtime_1.jsx)("div", { ref: bodyRef, style: fixedStyles.body }) })));
+    useEffect(() => {
+        onImageSizeChange?.(imageSize);
+    }, [imageSize?.width, imageSize?.height]);
+    const fixedStyles = getFixedStyles({ src, displacement });
+    return (_jsx("div", { ...props, ref: ref, "data-component": 'panorama', children: _jsx("div", { ref: bodyRef, style: fixedStyles.body }) }));
 });
-Object.defineProperty(exports.Panorama, 'displayName', { value: 'Panorama', writable: false });
-function getFixedStyles(_a) {
-    var _b = _a.src, src = _b === void 0 ? '' : _b, _c = _a.displacement, displacement = _c === void 0 ? NaN : _c;
-    return (0, utils_1.asStyleDict)({
+Object.defineProperty(Panorama, 'displayName', { value: 'Panorama', writable: false });
+function getFixedStyles({ src = '', displacement = NaN }) {
+    return asStyleDict({
         body: {
-            backgroundImage: "url(".concat(src, ")"),
-            backgroundPositionX: "".concat(-displacement, "px"),
+            backgroundImage: `url(${src})`,
+            backgroundPositionX: `${-displacement}px`,
             backgroundRepeat: 'repeat',
             backgroundSize: 'auto 100%',
             height: '100%',
@@ -114,27 +71,26 @@ function getFixedStyles(_a) {
     });
 }
 function getFilledImageSize(originalSize, sizeToFill) {
-    var originalWidth = originalSize.width, originalHeight = originalSize.height;
-    var filledHeignt = sizeToFill.height;
+    const { width: originalWidth, height: originalHeight } = originalSize;
+    const { height: filledHeignt } = sizeToFill;
     if (originalHeight <= 0)
-        return new spase_1.Size();
-    var aspectRatio = filledHeignt / originalHeight;
-    var filledWidth = aspectRatio * originalWidth;
-    return new spase_1.Size([filledWidth, filledHeignt]);
+        return new Size();
+    const aspectRatio = filledHeignt / originalHeight;
+    const filledWidth = aspectRatio * originalWidth;
+    return new Size([filledWidth, filledHeignt]);
 }
 function getDisplacementFromAngle(angle, originalImageSize, componentSize, zeroAnchor) {
-    var imageWidth = getFilledImageSize(originalImageSize, componentSize).width;
-    var componentWidth = componentSize.width;
-    var offset = componentWidth * zeroAnchor;
+    const { width: imageWidth } = getFilledImageSize(originalImageSize, componentSize);
+    const { width: componentWidth } = componentSize;
+    const 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;
+    const { width: imageWidth } = getFilledImageSize(originalImageSize, componentSize);
+    const { width: componentWidth } = componentSize;
+    const offset = componentWidth * zeroAnchor;
+    let angle = (displacement + offset) % imageWidth / imageWidth * 360;
     while (angle < 0)
         angle += 360;
     return angle;
 }
-//# sourceMappingURL=Panorama.js.map

package/components/PanoramaSlider.js

@@ -1,54 +1,10 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __read = (this && this.__read) || function (o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m) return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-    }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
-        }
-        finally { if (e) throw e.error; }
-    }
-    return ar;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PanoramaSliderIndicator = exports.PanoramaSliderReticle = exports.PanoramaSliderTrack = exports.PanoramaSlider = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var clsx_1 = __importDefault(require("clsx"));
-var react_1 = require("react");
-var spase_1 = require("spase");
-var useRect_1 = require("../hooks/useRect");
-var utils_1 = require("../utils");
-var Panorama_1 = require("./Panorama");
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { forwardRef, useRef, useState } from 'react';
+import { Rect } from 'spase';
+import { useRect } from '../hooks/useRect.js';
+import { asComponentDict, asStyleDict, cloneStyledElement, styles } from '../utils/index.js';
+import { Panorama } from './Panorama.js';
 /**
  * A slider for a {@link Panorama} component.
  *
@@ -58,80 +14,68 @@ var Panorama_1 = require("./Panorama");
  *                                backing {@link Panorama}.
  * @exports PanoramaSliderTrack The slide track.
  */
-exports.PanoramaSlider = (0, react_1.forwardRef)(function (_a, ref) {
-    var _b, _c, _d, _e;
-    var className = _a.className, style = _a.style, _f = _a.angle, angle = _f === void 0 ? 0 : _f, _g = _a.autoDimension, autoDimension = _g === void 0 ? 'width' : _g, children = _a.children, fov = _a.fov, _h = _a.speed, speed = _h === void 0 ? 1 : _h, src = _a.src, _j = _a.usesDefaultStyles, usesDefaultStyles = _j === void 0 ? false : _j, viewportSize = _a.viewportSize, _k = _a.zeroAnchor, zeroAnchor = _k === void 0 ? 0 : _k, onAngleChange = _a.onAngleChange, onDragEnd = _a.onDragEnd, onDragStart = _a.onDragStart, onLoadImageComplete = _a.onLoadImageComplete, onLoadImageError = _a.onLoadImageError, onLoadImageStart = _a.onLoadImageStart, onImageSizeChange = _a.onImageSizeChange, onPositionChange = _a.onPositionChange, props = __rest(_a, ["className", "style", "angle", "autoDimension", "children", "fov", "speed", "src", "usesDefaultStyles", "viewportSize", "zeroAnchor", "onAngleChange", "onDragEnd", "onDragStart", "onLoadImageComplete", "onLoadImageError", "onLoadImageStart", "onImageSizeChange", "onPositionChange"]);
-    var getAspectRatio = function () {
+export const PanoramaSlider = forwardRef(({ className, style, angle = 0, autoDimension = 'width', children, fov, speed = 1, src, usesDefaultStyles = false, viewportSize, zeroAnchor = 0, onAngleChange, onDragEnd, onDragStart, onLoadImageComplete, onLoadImageError, onLoadImageStart, onImageSizeChange, onPositionChange, ...props }, ref) => {
+    const getAspectRatio = () => {
         if (!imageSize)
             return 0;
-        var width = imageSize.width, height = imageSize.height;
+        const { width, height } = imageSize;
         if (height === 0)
             return 0;
         return width / height;
     };
-    var getReticleWidth = function () {
-        var deg = Math.min(360, Math.max(0, fov !== null && fov !== void 0 ? fov : (viewportSize ? viewportSize.width / (viewportSize.height * aspectRatio) * 360 : 0)));
+    const getReticleWidth = () => {
+        const deg = Math.min(360, Math.max(0, fov ?? (viewportSize ? viewportSize.width / (viewportSize.height * aspectRatio) * 360 : 0)));
         return panoramaRect.width * (deg / 360);
     };
-    var getAdjustedZeroAnchor = function () {
+    const getAdjustedZeroAnchor = () => {
         if (panoramaRect.width <= 0)
             return zeroAnchor;
         return ((panoramaRect.width - reticleWidth) * 0.5 + zeroAnchor * reticleWidth) / panoramaRect.width;
     };
-    var dragStartHandler = function () {
+    const dragStartHandler = () => {
         setIsDragging(true);
-        onDragStart === null || onDragStart === void 0 ? void 0 : onDragStart();
+        onDragStart?.();
     };
-    var dragEndHandler = function () {
+    const dragEndHandler = () => {
         setIsDragging(false);
-        onDragEnd === null || onDragEnd === void 0 ? void 0 : onDragEnd();
+        onDragEnd?.();
     };
-    var panoramaRef = (0, react_1.useRef)(null);
-    var panoramaRect = (0, useRect_1.useRect)(panoramaRef);
-    var _l = __read((0, react_1.useState)(), 2), imageSize = _l[0], setImageSize = _l[1];
-    var _m = __read((0, react_1.useState)(false), 2), isDragging = _m[0], setIsDragging = _m[1];
-    var aspectRatio = getAspectRatio();
-    var reticleWidth = getReticleWidth();
-    var adjustedZeroAnchor = getAdjustedZeroAnchor();
-    var components = (0, utils_1.asComponentDict)(children, {
-        track: exports.PanoramaSliderTrack,
-        reticle: exports.PanoramaSliderReticle,
-        indicator: exports.PanoramaSliderIndicator,
+    const panoramaRef = useRef(null);
+    const panoramaRect = useRect(panoramaRef);
+    const [imageSize, setImageSize] = useState();
+    const [isDragging, setIsDragging] = useState(false);
+    const aspectRatio = getAspectRatio();
+    const reticleWidth = getReticleWidth();
+    const adjustedZeroAnchor = getAdjustedZeroAnchor();
+    const components = asComponentDict(children, {
+        track: PanoramaSliderTrack,
+        reticle: PanoramaSliderReticle,
+        indicator: PanoramaSliderIndicator,
     });
-    var fixedStyles = getFixedStyles({ autoDimension: autoDimension, panoramaRect: panoramaRect, aspectRatio: aspectRatio, reticleWidth: reticleWidth });
-    var defaultStyles = usesDefaultStyles ? getDefaultStyles({ isDragging: isDragging }) : undefined;
-    return ((0, jsx_runtime_1.jsxs)("div", __assign({}, props, { ref: ref, className: (0, clsx_1.default)(className, { dragging: isDragging }), "data-component": 'panorama-slider', style: (0, utils_1.styles)(style, fixedStyles.root), children: [(0, jsx_runtime_1.jsx)(Panorama_1.Panorama, { ref: panoramaRef, angle: angle, speed: speed, src: src, style: fixedStyles.panorama, zeroAnchor: adjustedZeroAnchor, onAngleChange: onAngleChange, onDragEnd: dragEndHandler, onDragStart: dragStartHandler, onImageSizeChange: setImageSize, onLoadImageComplete: onLoadImageComplete, onLoadImageError: onLoadImageError, onLoadImageStart: onLoadImageStart, onPositionChange: onPositionChange }), (0, jsx_runtime_1.jsx)("div", { style: fixedStyles.body, children: (0, jsx_runtime_1.jsxs)("div", { style: fixedStyles.controls, children: [(0, utils_1.cloneStyledElement)((_b = components.track) !== null && _b !== void 0 ? _b : (0, jsx_runtime_1.jsx)(exports.PanoramaSliderTrack, { style: defaultStyles === null || defaultStyles === void 0 ? void 0 : defaultStyles.track }), {
-                            style: (0, utils_1.styles)(fixedStyles.track),
-                        }), (0, utils_1.cloneStyledElement)((_c = components.reticle) !== null && _c !== void 0 ? _c : (0, jsx_runtime_1.jsx)(exports.PanoramaSliderReticle, { style: defaultStyles === null || defaultStyles === void 0 ? void 0 : defaultStyles.reticle }), {
-                            style: (0, utils_1.styles)(fixedStyles.reticle),
-                        }), (0, utils_1.cloneStyledElement)((_d = components.track) !== null && _d !== void 0 ? _d : (0, jsx_runtime_1.jsx)(exports.PanoramaSliderTrack, { style: defaultStyles === null || defaultStyles === void 0 ? void 0 : defaultStyles.track }), {
-                            style: (0, utils_1.styles)(fixedStyles.track),
-                        })] }) }), (0, utils_1.cloneStyledElement)((_e = components.indicator) !== null && _e !== void 0 ? _e : (0, jsx_runtime_1.jsx)(exports.PanoramaSliderIndicator, { style: defaultStyles === null || defaultStyles === void 0 ? void 0 : defaultStyles.indicator }), {
-                style: (0, utils_1.styles)(fixedStyles.indicator),
-            })] })));
-});
-Object.defineProperty(exports.PanoramaSlider, 'displayName', { value: 'PanoramaSlider', writable: false });
-exports.PanoramaSliderTrack = (0, react_1.forwardRef)(function (_a, ref) {
-    var props = __rest(_a, []);
-    return (0, jsx_runtime_1.jsx)("div", __assign({}, props, { ref: ref, "data-child": 'track' }));
-});
-exports.PanoramaSliderReticle = (0, react_1.forwardRef)(function (_a, ref) {
-    var props = __rest(_a, []);
-    return (0, jsx_runtime_1.jsx)("div", __assign({}, props, { ref: ref, "data-child": 'reticle' }));
+    const fixedStyles = getFixedStyles({ autoDimension, panoramaRect, aspectRatio, reticleWidth });
+    const defaultStyles = usesDefaultStyles ? getDefaultStyles({ isDragging }) : undefined;
+    return (_jsxs("div", { ...props, ref: ref, className: clsx(className, { dragging: isDragging }), "data-component": 'panorama-slider', style: styles(style, fixedStyles.root), children: [_jsx(Panorama, { ref: panoramaRef, angle: angle, speed: speed, src: src, style: fixedStyles.panorama, zeroAnchor: adjustedZeroAnchor, onAngleChange: onAngleChange, onDragEnd: dragEndHandler, onDragStart: dragStartHandler, onImageSizeChange: setImageSize, onLoadImageComplete: onLoadImageComplete, onLoadImageError: onLoadImageError, onLoadImageStart: onLoadImageStart, onPositionChange: onPositionChange }), _jsx("div", { style: fixedStyles.body, children: _jsxs("div", { style: fixedStyles.controls, children: [cloneStyledElement(components.track ?? _jsx(PanoramaSliderTrack, { style: defaultStyles?.track }), {
+                            style: styles(fixedStyles.track),
+                        }), cloneStyledElement(components.reticle ?? _jsx(PanoramaSliderReticle, { style: defaultStyles?.reticle }), {
+                            style: styles(fixedStyles.reticle),
+                        }), cloneStyledElement(components.track ?? _jsx(PanoramaSliderTrack, { style: defaultStyles?.track }), {
+                            style: styles(fixedStyles.track),
+                        })] }) }), cloneStyledElement(components.indicator ?? _jsx(PanoramaSliderIndicator, { style: defaultStyles?.indicator }), {
+                style: styles(fixedStyles.indicator),
+            })] }));
 });
-exports.PanoramaSliderIndicator = (0, react_1.forwardRef)(function (_a, ref) {
-    var props = __rest(_a, []);
-    return (0, jsx_runtime_1.jsx)("div", __assign({}, props, { ref: ref, "data-child": 'indicator' }));
-});
-function getDefaultStyles(_a) {
-    var _b = _a.isDragging, isDragging = _b === void 0 ? false : _b;
-    return (0, utils_1.asStyleDict)({
+Object.defineProperty(PanoramaSlider, 'displayName', { value: 'PanoramaSlider', writable: false });
+export const PanoramaSliderTrack = forwardRef(({ ...props }, ref) => _jsx("div", { ...props, ref: ref, "data-child": 'track' }));
+export const PanoramaSliderReticle = forwardRef(({ ...props }, ref) => _jsx("div", { ...props, ref: ref, "data-child": 'reticle' }));
+export const PanoramaSliderIndicator = forwardRef(({ ...props }, ref) => _jsx("div", { ...props, ref: ref, "data-child": 'indicator' }));
+function getDefaultStyles({ isDragging = false }) {
+    return asStyleDict({
         track: {
             background: 'rgba(0, 0, 0, .7)',
             height: '100%',
         },
         reticle: {
-            background: "rgba(0, 0, 0, ".concat(isDragging ? 0 : 0.3, ")"),
+            background: `rgba(0, 0, 0, ${isDragging ? 0 : 0.3})`,
             flex: '0 0 auto',
             height: '100%',
             transitionDuration: '100ms',
@@ -154,14 +98,15 @@ function getDefaultStyles(_a) {
         },
     });
 }
-function getFixedStyles(_a) {
-    var _b = _a.autoDimension, autoDimension = _b === void 0 ? 'width' : _b, _c = _a.panoramaRect, panoramaRect = _c === void 0 ? new spase_1.Rect() : _c, _d = _a.aspectRatio, aspectRatio = _d === void 0 ? 0 : _d, _e = _a.reticleWidth, reticleWidth = _e === void 0 ? 0 : _e;
-    return (0, utils_1.asStyleDict)({
-        root: __assign({}, autoDimension === 'width' ? {
-            width: "".concat(panoramaRect.height * aspectRatio, "px"),
-        } : {
-            height: "".concat(panoramaRect.width / aspectRatio, "px"),
-        }),
+function getFixedStyles({ autoDimension = 'width', panoramaRect = new Rect(), aspectRatio = 0, reticleWidth = 0 }) {
+    return asStyleDict({
+        root: {
+            ...autoDimension === 'width' ? {
+                width: `${panoramaRect.height * aspectRatio}px`,
+            } : {
+                height: `${panoramaRect.width / aspectRatio}px`,
+            },
+        },
         body: {
             height: '100%',
             left: '0',
@@ -190,11 +135,10 @@ function getFixedStyles(_a) {
             flex: '1 0 auto',
         },
         reticle: {
-            width: "".concat(reticleWidth, "px"),
+            width: `${reticleWidth}px`,
         },
         indicator: {
-            width: "".concat(reticleWidth, "px"),
+            width: `${reticleWidth}px`,
         },
     });
 }
-//# sourceMappingURL=PanoramaSlider.js.map