etudes 1.2.0 → 2.0.0

package/lib/PanoramaSlider.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++) {
@@ -68,23 +64,28 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PanoramaSliderImage = exports.PanoramaSliderIndicator = exports.PanoramaSliderTrack = exports.PanoramaSliderReticle = void 0;
+exports.PanoramaSliderIndicator = exports.PanoramaSliderReticle = exports.PanoramaSliderTrack = void 0;
 var classnames_1 = __importDefault(require("classnames"));
-var lodash_1 = __importDefault(require("lodash"));
 var react_1 = __importStar(require("react"));
-var styled_components_1 = __importDefault(require("styled-components"));
 var useResizeEffect_1 = __importDefault(require("./hooks/useResizeEffect"));
 var Panorama_1 = __importDefault(require("./Panorama"));
+var asClassNameDict_1 = __importDefault(require("./utils/asClassNameDict"));
+var asComponentDict_1 = __importDefault(require("./utils/asComponentDict"));
+var asStyleDict_1 = __importDefault(require("./utils/asStyleDict"));
+var cloneStyledElement_1 = __importDefault(require("./utils/cloneStyledElement"));
+var styles_1 = __importDefault(require("./utils/styles"));
 /**
- * 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.
  */
-function PanoramaSlider(_a) {
-    var fov = _a.fov, _b = _a.autoDimension, autoDimension = _b === void 0 ? 'width' : _b, viewportSize = _a.viewportSize, _c = _a.angle, angle = _c === void 0 ? 0 : _c, _d = _a.speed, speed = _d === void 0 ? 1 : _d, src = _a.src, _e = _a.zeroAnchor, zeroAnchor = _e === void 0 ? 0 : _e, 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, style = _a.style, props = __rest(_a, ["fov", "autoDimension", "viewportSize", "angle", "speed", "src", "zeroAnchor", "onAngleChange", "onPositionChange", "onDragStart", "onDragEnd", "onImageLoadStart", "onImageLoadComplete", "onImageLoadError", "onImageSizeChange", "onResize", "style"]);
+exports.default = (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, viewportSize = _a.viewportSize, _j = _a.zeroAnchor, zeroAnchor = _j === void 0 ? 0 : _j, onAngleChange = _a.onAngleChange, onDragEnd = _a.onDragEnd, onDragStart = _a.onDragStart, onImageLoadComplete = _a.onImageLoadComplete, onImageLoadError = _a.onImageLoadError, onImageLoadStart = _a.onImageLoadStart, onImageSizeChange = _a.onImageSizeChange, onPositionChange = _a.onPositionChange, onResize = _a.onResize, props = __rest(_a, ["className", "style", "angle", "autoDimension", "children", "fov", "speed", "src", "viewportSize", "zeroAnchor", "onAngleChange", "onDragEnd", "onDragStart", "onImageLoadComplete", "onImageLoadError", "onImageLoadStart", "onImageSizeChange", "onPositionChange", "onResize"]);
     var getAspectRatio = function () {
         if (!imageSize)
             return 0;
@@ -94,46 +95,150 @@ function PanoramaSlider(_a) {
         return width / height;
     };
     var getReticleWidth = function () {
-        var angle = lodash_1.default.clamp(fov !== null && fov !== void 0 ? fov : (viewportSize ? (viewportSize.width / (viewportSize.height * aspectRatio)) * 360 : 0), 0, 360);
-        return size.width * (angle / 360);
+        var deg = Math.min(360, Math.max(0, fov !== null && fov !== void 0 ? fov : (viewportSize ? viewportSize.width / (viewportSize.height * aspectRatio) * 360 : 0)));
+        return size.width * (deg / 360);
     };
     var getAdjustedZeroAnchor = function () {
         if (size.width <= 0)
             return zeroAnchor;
-        return ((size.width - reticleWidth) * 0.5 + (zeroAnchor * reticleWidth)) / size.width;
+        return ((size.width - reticleWidth) * 0.5 + zeroAnchor * reticleWidth) / size.width;
+    };
+    var dragStartHandler = function () {
+        setIsDragging(true);
+        onDragStart === null || onDragStart === void 0 ? void 0 : onDragStart();
     };
-    var rootRef = (0, react_1.useRef)(null);
-    var _f = __read((0, react_1.useState)(undefined), 2), imageSize = _f[0], setImageSize = _f[1];
-    var _g = __read((0, react_1.useState)(false), 2), isDragging = _g[0], setIsDragging = _g[1];
-    var _h = __read((0, useResizeEffect_1.default)(rootRef, { onResize: onResize }), 1), size = _h[0];
+    var dragEndHandler = function () {
+        setIsDragging(false);
+        onDragEnd === null || onDragEnd === void 0 ? void 0 : onDragEnd();
+    };
+    var panoramaRef = (0, react_1.useRef)(null);
+    var _k = __read((0, react_1.useState)(undefined), 2), imageSize = _k[0], setImageSize = _k[1];
+    var _l = __read((0, react_1.useState)(false), 2), isDragging = _l[0], setIsDragging = _l[1];
+    var _m = __read((0, useResizeEffect_1.default)(panoramaRef, { onResize: onResize }), 1), size = _m[0];
     var aspectRatio = getAspectRatio();
     var reticleWidth = getReticleWidth();
     var adjustedZeroAnchor = getAdjustedZeroAnchor();
-    return (react_1.default.createElement(StyledRoot, __assign({ ref: rootRef, style: __assign(__assign({}, style), autoDimension === 'width' ? {
+    var components = (0, asComponentDict_1.default)(children, {
+        track: exports.PanoramaSliderTrack,
+        reticle: exports.PanoramaSliderReticle,
+        indicator: exports.PanoramaSliderIndicator,
+    });
+    var fixedClassNames = (0, asClassNameDict_1.default)({
+        root: (0, classnames_1.default)({
+            dragging: isDragging,
+        }),
+        track: (0, classnames_1.default)({
+            dragging: isDragging,
+        }),
+        reticle: (0, classnames_1.default)({
+            dragging: isDragging,
+        }),
+        indicator: (0, classnames_1.default)({
+            dragging: isDragging,
+        }),
+    });
+    var fixedStyles = (0, asStyleDict_1.default)({
+        root: __assign({}, autoDimension === 'width' ? {
             width: "".concat(size.height * aspectRatio, "px"),
         } : {
             height: "".concat(size.width / aspectRatio, "px"),
-        }) }, props),
-        react_1.default.createElement(exports.PanoramaSliderImage, { angle: angle, onAngleChange: onAngleChange, onDragEnd: function () {
-                setIsDragging(false);
-                onDragEnd === null || onDragEnd === void 0 ? void 0 : onDragEnd();
-            }, onDragStart: function () {
-                setIsDragging(true);
-                onDragStart === null || onDragStart === void 0 ? void 0 : onDragStart();
-            }, onImageLoadComplete: onImageLoadComplete, onImageLoadError: onImageLoadError, onImageLoadStart: onImageLoadStart, onImageSizeChange: function (size) { return setImageSize(size); }, onPositionChange: onPositionChange, speed: speed, src: src, style: { height: '100%', width: '100%' }, zeroAnchor: adjustedZeroAnchor }),
-        react_1.default.createElement(StyledTrackContainer, null,
-            react_1.default.createElement("div", null,
-                react_1.default.createElement(exports.PanoramaSliderTrack, { className: (0, classnames_1.default)({ dragging: isDragging }) }),
-                react_1.default.createElement(exports.PanoramaSliderReticle, { className: (0, classnames_1.default)({ dragging: isDragging }), style: { width: "".concat(reticleWidth, "px") } }),
-                react_1.default.createElement(exports.PanoramaSliderTrack, { className: (0, classnames_1.default)({ dragging: isDragging }) }))),
-        react_1.default.createElement(exports.PanoramaSliderIndicator, { className: (0, classnames_1.default)({ dragging: isDragging }), style: { width: "".concat(reticleWidth, "px") } })));
-}
-exports.default = PanoramaSlider;
-exports.PanoramaSliderReticle = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background: rgba(0, 0, 0, .3);\n  flex: 0 0 auto;\n  height: 100%;\n  transition-duration: 100ms;\n  transition-property: background;\n  transition-timing-function: ease-out;\n\n  &.dragging {\n    background: rgba(0, 0, 0, 0);\n  }\n"], ["\n  background: rgba(0, 0, 0, .3);\n  flex: 0 0 auto;\n  height: 100%;\n  transition-duration: 100ms;\n  transition-property: background;\n  transition-timing-function: ease-out;\n\n  &.dragging {\n    background: rgba(0, 0, 0, 0);\n  }\n"])));
-exports.PanoramaSliderTrack = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background: rgba(0, 0, 0, .7);\n  display: block;\n  flex: 1 0 auto;\n  height: 100%;\n  pointer-events: none;\n"], ["\n  background: rgba(0, 0, 0, .7);\n  display: block;\n  flex: 1 0 auto;\n  height: 100%;\n  pointer-events: none;\n"])));
-exports.PanoramaSliderIndicator = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background: #fff;\n  border-radius: 2px;\n  bottom: -10px;\n  box-sizing: border-box;\n  display: block;\n  height: 2px;\n  left: 0;\n  margin: 0 auto;\n  opacity: 0;\n  right: 0;\n  transition: opacity .3s ease-out;\n\n  &.dragging {\n    opacity: 1;\n  }\n"], ["\n  background: #fff;\n  border-radius: 2px;\n  bottom: -10px;\n  box-sizing: border-box;\n  display: block;\n  height: 2px;\n  left: 0;\n  margin: 0 auto;\n  opacity: 0;\n  right: 0;\n  transition: opacity .3s ease-out;\n\n  &.dragging {\n    opacity: 1;\n  }\n"])));
-exports.PanoramaSliderImage = (0, styled_components_1.default)(Panorama_1.default)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n\n"], ["\n\n"])));
-var StyledTrackContainer = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: block;\n  height: 100%;\n  left: 0;\n  overflow: hidden;\n  pointer-events: none;\n  position: absolute;\n  top: 0;\n  width: 100%;\n\n  > div {\n    align-items: center;\n    display: flex;\n    height: 100%;\n    justify-content: flex-start;\n    left: 0;\n    overflow: visible;\n    position: absolute;\n    top: 0;\n    width: 100%;\n  }\n"], ["\n  box-sizing: border-box;\n  display: block;\n  height: 100%;\n  left: 0;\n  overflow: hidden;\n  pointer-events: none;\n  position: absolute;\n  top: 0;\n  width: 100%;\n\n  > div {\n    align-items: center;\n    display: flex;\n    height: 100%;\n    justify-content: flex-start;\n    left: 0;\n    overflow: visible;\n    position: absolute;\n    top: 0;\n    width: 100%;\n  }\n"])));
-var StyledRoot = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: block;\n  flex: 0 0 auto;\n  height: 100%;\n  width: 100%;\n"], ["\n  box-sizing: border-box;\n  display: block;\n  flex: 0 0 auto;\n  height: 100%;\n  width: 100%;\n"])));
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
+        }),
+        body: {
+            height: '100%',
+            left: '0',
+            overflow: 'hidden',
+            pointerEvents: 'none',
+            position: 'absolute',
+            top: '0',
+            width: '100%',
+        },
+        panorama: {
+            height: '100%',
+            width: '100%',
+        },
+        controls: {
+            alignItems: 'center',
+            display: 'flex',
+            height: '100%',
+            justifyContent: 'flex-start',
+            left: '0',
+            overflow: 'visible',
+            position: 'absolute',
+            top: '0',
+            width: '100%',
+        },
+        track: {
+            flex: '1 0 auto',
+        },
+        reticle: {
+            width: "".concat(reticleWidth, "px"),
+        },
+        indicator: {
+            width: "".concat(reticleWidth, "px"),
+        },
+    });
+    var defaultStyles = (0, asStyleDict_1.default)({
+        track: {
+            background: 'rgba(0, 0, 0, .7)',
+            height: '100%',
+        },
+        reticle: {
+            background: "rgba(0, 0, 0, ".concat(isDragging ? 0 : 0.3, ")"),
+            flex: '0 0 auto',
+            height: '100%',
+            transitionDuration: '100ms',
+            transitionProperty: 'background',
+            transitionTimingFunction: 'ease-out',
+        },
+        indicator: {
+            background: '#fff',
+            borderRadius: '2px',
+            bottom: '-10px',
+            boxSizing: 'border-box',
+            display: 'block',
+            height: '2px',
+            left: '0',
+            margin: '0 auto',
+            opacity: isDragging ? 1 : 0,
+            position: 'absolute',
+            right: '0',
+            transition: 'opacity .3s ease-out',
+        },
+    });
+    return (react_1.default.createElement("div", __assign({}, props, { ref: ref, className: (0, classnames_1.default)(className, fixedClassNames.root), style: (0, styles_1.default)(style, fixedStyles.root) }),
+        react_1.default.createElement(Panorama_1.default, { angle: angle, ref: panoramaRef, speed: speed, src: src, style: fixedStyles.panorama, zeroAnchor: adjustedZeroAnchor, onAngleChange: onAngleChange, onDragEnd: dragEndHandler, onDragStart: dragStartHandler, onImageLoadComplete: onImageLoadComplete, onImageLoadError: onImageLoadError, onImageLoadStart: onImageLoadStart, onImageSizeChange: setImageSize, onPositionChange: onPositionChange }),
+        react_1.default.createElement("div", { style: fixedStyles.body },
+            react_1.default.createElement("div", { style: fixedStyles.controls },
+                (0, cloneStyledElement_1.default)((_b = components.track) !== null && _b !== void 0 ? _b : react_1.default.createElement(exports.PanoramaSliderTrack, { style: defaultStyles.track }), {
+                    className: (0, classnames_1.default)(fixedClassNames.track),
+                    style: (0, styles_1.default)(fixedStyles.track),
+                }),
+                (0, cloneStyledElement_1.default)((_c = components.reticle) !== null && _c !== void 0 ? _c : react_1.default.createElement(exports.PanoramaSliderReticle, { style: defaultStyles.reticle }), {
+                    className: (0, classnames_1.default)(fixedClassNames.reticle),
+                    style: (0, styles_1.default)(fixedStyles.reticle),
+                }),
+                (0, cloneStyledElement_1.default)((_d = components.track) !== null && _d !== void 0 ? _d : react_1.default.createElement(exports.PanoramaSliderTrack, { style: defaultStyles.track }), {
+                    className: (0, classnames_1.default)(fixedClassNames.track),
+                    style: (0, styles_1.default)(fixedStyles.track),
+                }))),
+        (0, cloneStyledElement_1.default)((_e = components.indicator) !== null && _e !== void 0 ? _e : react_1.default.createElement(exports.PanoramaSliderIndicator, { style: defaultStyles.indicator }), {
+            className: (0, classnames_1.default)(fixedClassNames.indicator),
+            style: (0, styles_1.default)(fixedStyles.indicator),
+        })));
+});
+var PanoramaSliderTrack = function (_a) {
+    var props = __rest(_a, []);
+    return react_1.default.createElement("div", __assign({}, props));
+};
+exports.PanoramaSliderTrack = PanoramaSliderTrack;
+var PanoramaSliderReticle = function (_a) {
+    var props = __rest(_a, []);
+    return react_1.default.createElement("div", __assign({}, props));
+};
+exports.PanoramaSliderReticle = PanoramaSliderReticle;
+var PanoramaSliderIndicator = function (_a) {
+    var props = __rest(_a, []);
+    return react_1.default.createElement("div", __assign({}, props));
+};
+exports.PanoramaSliderIndicator = PanoramaSliderIndicator;
 //# sourceMappingURL=PanoramaSlider.js.map

package/lib/PanoramaSlider.js.map

@@ -1 +1 @@
-{"version":3,"file":"PanoramaSlider.js","sourceRoot":"/","sources":["PanoramaSlider.tsx"],"names":[],"mappings":"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","sourcesContent":["import classNames from 'classnames'\nimport _ from 'lodash'\nimport React, { HTMLAttributes, useRef, useState } from 'react'\nimport { Size } from 'spase'\nimport styled from 'styled-components'\nimport useResizeEffect from './hooks/useResizeEffect'\nimport Panorama, { Props as PanoramaProps } from './Panorama'\n\nexport type Props = HTMLAttributes<HTMLDivElement> & PanoramaProps & {\n  /**\n   * Field-of-view (0.0 - 360.0 degrees, inclusive) that represents the size of the reticle. 360\n   * indicates the reticle covers the entire image. If this is unspecified, the component will\n   * attempt to automatically calculate the FOV using the `viewportSize` prop.\n   */\n  fov?: number\n\n  /**\n   * Specifies which length (width or height) should be automatically calculated. The counterpart\n   * must be known (if `width` is specified here, the component's height must be known, i.e. it is\n   * specified in the CSS). Defaults to `width`.\n   */\n  autoDimension?: 'width' | 'height'\n\n  /**\n   * Size of the viewport that this component is controlling. A viewport can be thought of as a DOM\n   * element containing an aspect-filled image. This is used to automatically calculate the FOV if\n   * `fov` prop is not specified. If it is, this prop is ignored.\n   */\n  viewportSize?: Size\n}\n\n/**\n * A slider for {@link Panorama} components.\n *\n * @exports PanoramaSliderImage\n * @exports PanoramaSliderIndicator\n * @exports PanoramaSliderTrack\n * @exports PanoramaSliderReticle\n */\nexport default function PanoramaSlider({\n  fov,\n  autoDimension = 'width',\n  viewportSize,\n  angle = 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  style,\n  ...props\n}: Props) {\n  const getAspectRatio = (): number => {\n    if (!imageSize) return 0\n    const { width, height } = imageSize\n    if (height === 0) return 0\n    return width / height\n  }\n\n  const getReticleWidth = (): number => {\n    const angle = _.clamp(fov ?? (viewportSize ? (viewportSize.width / (viewportSize.height * aspectRatio)) * 360 : 0), 0, 360)\n    return size.width * (angle / 360)\n  }\n\n  const getAdjustedZeroAnchor = () => {\n    if (size.width <= 0) return zeroAnchor\n    return ((size.width - reticleWidth) * 0.5 + (zeroAnchor * reticleWidth)) / size.width\n  }\n\n  const rootRef = useRef<HTMLDivElement>(null)\n  const [imageSize, setImageSize] = useState<Size | undefined>(undefined)\n  const [isDragging, setIsDragging] = useState(false)\n  const [size] = useResizeEffect(rootRef, { onResize })\n  const aspectRatio = getAspectRatio()\n  const reticleWidth = getReticleWidth()\n  const adjustedZeroAnchor = getAdjustedZeroAnchor()\n\n  return (\n    <StyledRoot ref={rootRef} style={{\n      ...style,\n      ...autoDimension === 'width' ? {\n        width: `${size.height * aspectRatio}px`,\n      } : {\n        height: `${size.width / aspectRatio}px`,\n      },\n    }} {...props}>\n      <PanoramaSliderImage\n        angle={angle}\n        onAngleChange={onAngleChange}\n        onDragEnd={() => {\n          setIsDragging(false)\n          onDragEnd?.()\n        }}\n        onDragStart={() => {\n          setIsDragging(true)\n          onDragStart?.()\n        }}\n        onImageLoadComplete={onImageLoadComplete}\n        onImageLoadError={onImageLoadError}\n        onImageLoadStart={onImageLoadStart}\n        onImageSizeChange={size => setImageSize(size)}\n        onPositionChange={onPositionChange}\n        speed={speed}\n        src={src}\n        style={{ height: '100%', width: '100%' }}\n        zeroAnchor={adjustedZeroAnchor}\n      />\n      <StyledTrackContainer>\n        <div>\n          <PanoramaSliderTrack className={classNames({ dragging: isDragging })}/>\n          <PanoramaSliderReticle className={classNames({ dragging: isDragging })} style={{ width: `${reticleWidth}px` }}/>\n          <PanoramaSliderTrack className={classNames({ dragging: isDragging })}/>\n        </div>\n      </StyledTrackContainer>\n      <PanoramaSliderIndicator className={classNames({ dragging: isDragging })} style={{ width: `${reticleWidth}px` }}/>\n    </StyledRoot>\n  )\n}\n\nexport const PanoramaSliderReticle = styled.div`\n  background: rgba(0, 0, 0, .3);\n  flex: 0 0 auto;\n  height: 100%;\n  transition-duration: 100ms;\n  transition-property: background;\n  transition-timing-function: ease-out;\n\n  &.dragging {\n    background: rgba(0, 0, 0, 0);\n  }\n`\n\nexport const PanoramaSliderTrack = styled.div`\n  background: rgba(0, 0, 0, .7);\n  display: block;\n  flex: 1 0 auto;\n  height: 100%;\n  pointer-events: none;\n`\n\nexport const PanoramaSliderIndicator = styled.div`\n  background: #fff;\n  border-radius: 2px;\n  bottom: -10px;\n  box-sizing: border-box;\n  display: block;\n  height: 2px;\n  left: 0;\n  margin: 0 auto;\n  opacity: 0;\n  right: 0;\n  transition: opacity .3s ease-out;\n\n  &.dragging {\n    opacity: 1;\n  }\n`\n\nexport const PanoramaSliderImage = styled(Panorama)`\n\n`\n\nconst StyledTrackContainer = styled.div`\n  box-sizing: border-box;\n  display: block;\n  height: 100%;\n  left: 0;\n  overflow: hidden;\n  pointer-events: none;\n  position: absolute;\n  top: 0;\n  width: 100%;\n\n  > div {\n    align-items: center;\n    display: flex;\n    height: 100%;\n    justify-content: flex-start;\n    left: 0;\n    overflow: visible;\n    position: absolute;\n    top: 0;\n    width: 100%;\n  }\n`\n\nconst StyledRoot = styled.div`\n  box-sizing: border-box;\n  display: block;\n  flex: 0 0 auto;\n  height: 100%;\n  width: 100%;\n`\n"]}
+{"version":3,"file":"PanoramaSlider.js","sourceRoot":"/","sources":["PanoramaSlider.tsx"],"names":[],"mappings":"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","sourcesContent":["import classNames from 'classnames'\nimport React, { forwardRef, HTMLAttributes, PropsWithChildren, useRef, useState } from 'react'\nimport { Size } from 'spase'\nimport useResizeEffect from './hooks/useResizeEffect'\nimport Panorama, { PanoramaProps } from './Panorama'\nimport asClassNameDict from './utils/asClassNameDict'\nimport asComponentDict from './utils/asComponentDict'\nimport asStyleDict from './utils/asStyleDict'\nimport cloneStyledElement from './utils/cloneStyledElement'\nimport styles from './utils/styles'\n\nexport type PanoramaSliderProps = HTMLAttributes<HTMLDivElement> & PanoramaProps & PropsWithChildren<{\n  /**\n   * Field-of-view (0.0 - 360.0 degrees, inclusive) that represents the size of\n   * the reticle. 360 indicates the reticle covers the entire image. If this is\n   * unspecified, the component will attempt to automatically calculate the FOV\n   * using the `viewportSize` prop.\n   */\n  fov?: number\n\n  /**\n   * Specifies which length (width or height) should be automatically\n   * calculated. The counterpart must be known (if `width` is specified here,\n   * the component's height must be known, i.e. it is specified in the CSS).\n   * Defaults to `width`.\n   */\n  autoDimension?: 'width' | 'height'\n\n  /**\n   * Size of the viewport that this component is controlling. A viewport can be\n   * thought of as a DOM element containing an aspect-filled image. This is used\n   * to automatically calculate the FOV if `fov` prop is not specified. If it\n   * is, this prop is ignored.\n   */\n  viewportSize?: Size\n}>\n\n/**\n * A slider for a {@link Panorama} component.\n *\n * @exports PanoramaSliderIndicator - The indicator that appears when the slider\n *                                    is being dragged.\n * @exports PanoramaSliderReticle - The reticle that indicates the FOV of the\n *                                  backing {@link Panorama}.\n * @exports PanoramaSliderTrack - The slide track.\n */\nexport default forwardRef<HTMLDivElement, PanoramaSliderProps>(({\n  className,\n  style,\n  angle = 0,\n  autoDimension = 'width',\n  children,\n  fov,\n  speed = 1,\n  src,\n  viewportSize,\n  zeroAnchor = 0,\n  onAngleChange,\n  onDragEnd,\n  onDragStart,\n  onImageLoadComplete,\n  onImageLoadError,\n  onImageLoadStart,\n  onImageSizeChange,\n  onPositionChange,\n  onResize,\n  ...props\n}, ref) => {\n  const getAspectRatio = () => {\n    if (!imageSize) return 0\n    const { width, height } = imageSize\n    if (height === 0) return 0\n\n    return width / height\n  }\n\n  const getReticleWidth = () => {\n    const deg = Math.min(360, Math.max(0, fov ?? (viewportSize ? viewportSize.width / (viewportSize.height * aspectRatio) * 360 : 0)))\n\n    return size.width * (deg / 360)\n  }\n\n  const getAdjustedZeroAnchor = () => {\n    if (size.width <= 0) return zeroAnchor\n\n    return ((size.width - reticleWidth) * 0.5 + zeroAnchor * reticleWidth) / size.width\n  }\n\n  const dragStartHandler = () => {\n    setIsDragging(true)\n    onDragStart?.()\n  }\n\n  const dragEndHandler = () => {\n    setIsDragging(false)\n    onDragEnd?.()\n  }\n\n  const panoramaRef = useRef<HTMLDivElement>(null)\n\n  const [imageSize, setImageSize] = useState<Size | undefined>(undefined)\n  const [isDragging, setIsDragging] = useState(false)\n\n  const [size] = useResizeEffect(panoramaRef, { onResize })\n\n  const aspectRatio = getAspectRatio()\n  const reticleWidth = getReticleWidth()\n  const adjustedZeroAnchor = getAdjustedZeroAnchor()\n\n  const components = asComponentDict(children, {\n    track: PanoramaSliderTrack,\n    reticle: PanoramaSliderReticle,\n    indicator: PanoramaSliderIndicator,\n  })\n\n  const fixedClassNames = asClassNameDict({\n    root: classNames({\n      dragging: isDragging,\n    }),\n    track: classNames({\n      dragging: isDragging,\n    }),\n    reticle: classNames({\n      dragging: isDragging,\n    }),\n    indicator: classNames({\n      dragging: isDragging,\n    }),\n  })\n\n  const fixedStyles = asStyleDict({\n    root: {\n      ...autoDimension === 'width' ? {\n        width: `${size.height * aspectRatio}px`,\n      } : {\n        height: `${size.width / aspectRatio}px`,\n      },\n    },\n    body: {\n      height: '100%',\n      left: '0',\n      overflow: 'hidden',\n      pointerEvents: 'none',\n      position: 'absolute',\n      top: '0',\n      width: '100%',\n    },\n    panorama: {\n      height: '100%',\n      width: '100%',\n    },\n    controls: {\n      alignItems: 'center',\n      display: 'flex',\n      height: '100%',\n      justifyContent: 'flex-start',\n      left: '0',\n      overflow: 'visible',\n      position: 'absolute',\n      top: '0',\n      width: '100%',\n    },\n    track: {\n      flex: '1 0 auto',\n    },\n    reticle: {\n      width: `${reticleWidth}px`,\n    },\n    indicator: {\n      width: `${reticleWidth}px`,\n    },\n  })\n\n  const defaultStyles = asStyleDict({\n    track: {\n      background: 'rgba(0, 0, 0, .7)',\n      height: '100%',\n    },\n    reticle: {\n      background: `rgba(0, 0, 0, ${isDragging ? 0 : 0.3})`,\n      flex: '0 0 auto',\n      height: '100%',\n      transitionDuration: '100ms',\n      transitionProperty: 'background',\n      transitionTimingFunction: 'ease-out',\n    },\n    indicator: {\n      background: '#fff',\n      borderRadius: '2px',\n      bottom: '-10px',\n      boxSizing: 'border-box',\n      display: 'block',\n      height: '2px',\n      left: '0',\n      margin: '0 auto',\n      opacity: isDragging ? 1 : 0,\n      position: 'absolute',\n      right: '0',\n      transition: 'opacity .3s ease-out',\n    },\n  })\n\n  return (\n    <div\n      {...props}\n      ref={ref}\n      className={classNames(className, fixedClassNames.root)}\n      style={styles(style, fixedStyles.root)}\n    >\n      <Panorama\n        angle={angle}\n        ref={panoramaRef}\n        speed={speed}\n        src={src}\n        style={fixedStyles.panorama}\n        zeroAnchor={adjustedZeroAnchor}\n        onAngleChange={onAngleChange}\n        onDragEnd={dragEndHandler}\n        onDragStart={dragStartHandler}\n        onImageLoadComplete={onImageLoadComplete}\n        onImageLoadError={onImageLoadError}\n        onImageLoadStart={onImageLoadStart}\n        onImageSizeChange={setImageSize}\n        onPositionChange={onPositionChange}\n      />\n      <div style={fixedStyles.body}>\n        <div style={fixedStyles.controls}>\n          {cloneStyledElement(components.track ?? <PanoramaSliderTrack style={defaultStyles.track}/>, {\n            className: classNames(fixedClassNames.track),\n            style: styles(fixedStyles.track),\n          })}\n          {cloneStyledElement(components.reticle ?? <PanoramaSliderReticle style={defaultStyles.reticle}/>, {\n            className: classNames(fixedClassNames.reticle),\n            style: styles(fixedStyles.reticle),\n          })}\n          {cloneStyledElement(components.track ?? <PanoramaSliderTrack style={defaultStyles.track}/>, {\n            className: classNames(fixedClassNames.track),\n            style: styles(fixedStyles.track),\n          })}\n        </div>\n      </div>\n      {cloneStyledElement(components.indicator ?? <PanoramaSliderIndicator style={defaultStyles.indicator}/>, {\n        className: classNames(fixedClassNames.indicator),\n        style: styles(fixedStyles.indicator),\n      })}\n    </div>\n  )\n})\n\nexport const PanoramaSliderTrack = ({ ...props }: HTMLAttributes<HTMLDivElement>) => <div {...props}/>\n\nexport const PanoramaSliderReticle = ({ ...props }: HTMLAttributes<HTMLDivElement>) => <div {...props}/>\n\nexport const PanoramaSliderIndicator = ({ ...props }: HTMLAttributes<HTMLDivElement>) => <div {...props}/>\n"]}

package/lib/RangeSlider.d.ts

@@ -1,92 +1,32 @@
-import React, { CSSProperties, PureComponent } from 'react';
-import { Rect } from 'spase';
-import { ExtendedCSSFunction, Orientation, Range } from './types';
-export declare type KnobCSSProps = Readonly<{
-    radius: number;
-    tintColor: string;
-    hitboxPadding: number;
-    isDragging: boolean;
-    isReleasing: boolean;
-    isDisabled: boolean;
-}>;
-export declare type LabelCSSProps = Readonly<{
-    knobRadius: number;
-    orientation: Orientation;
-    isDragging: boolean;
-    isReleasing: boolean;
-}>;
-export declare type HighlightCSSProps = Readonly<{
-    tintColor: string;
-    isDragging: boolean;
-    isReleasing: boolean;
+import React, { HTMLAttributes, PropsWithChildren } from 'react';
+declare type Orientation = 'horizontal' | 'vertical';
+declare type Range = [number, number];
+export declare type RangeSliderProps = HTMLAttributes<HTMLDivElement> & PropsWithChildren<{
+    areLabelsVisible?: boolean;
+    decimalPlaces?: number;
+    knobPadding?: number;
+    max: number;
+    min: number;
+    orientation?: Orientation;
+    range?: Range;
+    steps?: number;
+    onRangeChange?: (range: Range) => void;
 }>;
-export interface Props {
-    className?: string;
-    style: CSSProperties;
-    defaultRange?: Range;
-    areLabelsVisible: boolean;
-    decimalPlaces: number;
-    hitboxPadding: number;
-    knobRadius: number;
+declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    areLabelsVisible?: boolean | undefined;
+    decimalPlaces?: number | undefined;
+    knobPadding?: number | undefined;
     max: number;
     min: number;
-    steps: number;
-    orientation: Orientation;
-    tintColor: string;
-    onRangeChange: (range: Range) => void;
-    cssKnob: ExtendedCSSFunction<KnobCSSProps>;
-    cssHighlight: ExtendedCSSFunction<HighlightCSSProps>;
-    cssLabel: ExtendedCSSFunction<LabelCSSProps>;
-    cssGutter: ExtendedCSSFunction;
-}
-export interface State {
-    range: Range;
-    isDraggingStartingKnob: boolean;
-    isReleasingStartingKnob: boolean;
-    isDraggingEndingKnob: boolean;
-    isReleasingEndingKnob: boolean;
-}
-export default class RangeSlider extends PureComponent<Props, State> {
-    static defaultProps: {
-        style: {};
-        areLabelsVisible: boolean;
-        decimalPlaces: number;
-        hitboxPadding: number;
-        knobRadius: number;
-        steps: number;
-        tintColor: string;
-        orientation: string;
-        onRangeChange: () => void;
-        cssGutter: () => import("styled-components").FlattenSimpleInterpolation;
-        cssHighlight: () => import("styled-components").FlattenSimpleInterpolation;
-        cssKnob: () => import("styled-components").FlattenSimpleInterpolation;
-        cssLabel: () => import("styled-components").FlattenSimpleInterpolation;
-    };
-    nodeRefs: {
-        root: React.RefObject<HTMLDivElement>;
-        knobA: React.RefObject<HTMLDivElement>;
-        knobB: React.RefObject<HTMLDivElement>;
-    };
-    constructor(props: Props);
-    get rect(): Rect;
-    get highlightLength(): number;
-    get breakpoints(): readonly number[];
-    componentDidMount(): void;
-    componentDidUpdate(prevProps: Props, prevState: State): void;
-    render(): JSX.Element;
-    private reconfigureInteractivityIfNeeded;
-    private snapToClosestBreakpoint;
-    private areRangesEqual;
-    private getPositionByValue;
-    private getDisplacementByPosition;
-    private getDisplacementByValue;
-    private getPositionByDisplacement;
-    private getValueByPosition;
-    private getClosestSteppedValueOfValue;
-    private onKnobADragStart;
-    private onKnobADragEnd;
-    private onKnobADragMove;
-    private onKnobBDragStart;
-    private onKnobBDragEnd;
-    private onKnobBDragMove;
-}
+    orientation?: Orientation | undefined;
+    range?: Range | undefined;
+    steps?: number | undefined;
+    onRangeChange?: ((range: Range) => void) | undefined;
+} & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;
+export default _default;
+export declare const RangeSliderGutter: ({ ...props }: HTMLAttributes<HTMLDivElement>) => JSX.Element;
+export declare const RangeSliderLabel: ({ ...props }: HTMLAttributes<HTMLDivElement>) => JSX.Element;
+export declare const RangeSliderHighlight: ({ ...props }: HTMLAttributes<HTMLDivElement>) => JSX.Element;
+export declare const RangeSliderKnob: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;