etudes 1.2.0 → 2.1.0

package/lib/DebugConsole.js

@@ -1,23 +1,4 @@
 "use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-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++) {
@@ -52,6 +33,17 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+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;
@@ -82,75 +74,82 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
-var styled_components_1 = __importDefault(require("styled-components"));
-var DebugConsole = /** @class */ (function (_super) {
-    __extends(DebugConsole, _super);
-    function DebugConsole(props) {
-        var _this = _super.call(this, props) || this;
-        _this.nodeRefs = {
-            messages: (0, react_1.createRef)(),
-        };
-        _this.state = {
-            messages: _this.props.message ? [_this.props.message] : [],
-        };
-        return _this;
-    }
-    DebugConsole.prototype.componentDidUpdate = function (prevProps, prevState) {
-        var _a, _b, _c, _d;
-        if (prevProps.message !== this.props.message) {
-            this.push((_a = this.props.message) !== null && _a !== void 0 ? _a : '');
-        }
-        if (prevState.messages.length !== this.state.messages.length) {
-            var m = (_c = (_b = this.nodeRefs.messages.current) === null || _b === void 0 ? void 0 : _b.scrollHeight) !== null && _c !== void 0 ? _c : 0;
-            (_d = this.nodeRefs.messages.current) === null || _d === void 0 ? void 0 : _d.scrollTo(0, m);
-        }
-    };
-    DebugConsole.prototype.push = function (message) {
-        if (this.props.maxEntries < 0) {
-            this.setState({
-                messages: __spreadArray(__spreadArray([], __read(this.state.messages), false), [message], false),
-            });
+var Each_1 = __importDefault(require("./Each"));
+var asStyleDict_1 = __importDefault(require("./utils/asStyleDict"));
+var styles_1 = __importDefault(require("./utils/styles"));
+exports.default = (0, react_1.forwardRef)(function (_a, ref) {
+    var _b = _a.align, align = _b === void 0 ? 'br' : _b, _c = _a.margin, margin = _c === void 0 ? 0 : _c, _d = _a.maxEntries, maxEntries = _d === void 0 ? -1 : _d, message = _a.message, _e = _a.style, style = _e === void 0 ? {} : _e, title = _a.title, props = __rest(_a, ["align", "margin", "maxEntries", "message", "style", "title"]);
+    var _f = __read((0, react_1.useState)([]), 2), messages = _f[0], setMessages = _f[1];
+    var messagesRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(function () {
+        if (message === undefined) {
+            setMessages([]);
         }
         else {
-            var n = this.state.messages.length;
-            this.setState({
-                messages: __spreadArray(__spreadArray([], __read(this.state.messages.slice(Math.max(0, n - (this.props.maxEntries - 1)), n)), false), [message], false),
-            });
+            var numMessages = messages.length;
+            setMessages(__spreadArray(__spreadArray([], __read(maxEntries < 0
+                ? messages
+                : messages.slice(Math.max(0, numMessages - (maxEntries - 1)), numMessages)), false), [
+                message,
+            ], false));
         }
-    };
-    DebugConsole.prototype.clear = function () {
-        this.setState({
-            messages: [],
-        });
-    };
-    DebugConsole.prototype.render = function () {
-        var _a;
-        return (react_1.default.createElement(StyledRoot, { className: this.props.className, style: __assign(__assign(__assign({}, this.props.style), { margin: 0, position: 'fixed' }), this.getStyleByAlignment(this.props.align)) },
-            react_1.default.createElement("h6", null, (_a = this.props.title) !== null && _a !== void 0 ? _a : 'Untitled'),
-            react_1.default.createElement("div", { ref: this.nodeRefs.messages }, this.state.messages.map(function (v, i) { return (react_1.default.createElement("span", { key: "item-".concat(i), dangerouslySetInnerHTML: { __html: v } })); }))));
-    };
-    DebugConsole.prototype.getStyleByAlignment = function (align) {
-        switch (align) {
-            case 'tl': return { top: "".concat(this.props.margin, "px"), left: "".concat(this.props.margin, "px") };
-            case 'tc': return { top: "".concat(this.props.margin, "px"), left: 0, right: 0, margin: '0 auto' };
-            case 'tr': return { top: "".concat(this.props.margin, "px"), right: "".concat(this.props.margin, "px") };
-            case 'cl': return { top: 0, left: "".concat(this.props.margin, "px"), bottom: 0, margin: 'auto 0' };
-            case 'cc': return { top: 0, left: 0, right: 0, bottom: 0, margin: 'auto' };
-            case 'cr': return { top: 0, bottom: 0, right: "".concat(this.props.margin, "px"), margin: 'auto 0' };
-            case 'bl': return { bottom: "".concat(this.props.margin, "px"), left: "".concat(this.props.margin, "px") };
-            case 'bc': return { bottom: "".concat(this.props.margin, "px"), left: 0, right: 0, margin: '0 auto' };
-            default: return { bottom: "".concat(this.props.margin, "px"), right: "".concat(this.props.margin, "px") };
-        }
-    };
-    DebugConsole.defaultProps = {
-        align: 'br',
-        margin: 0,
-        maxEntries: -1,
-        style: {},
-    };
-    return DebugConsole;
-}(react_1.PureComponent));
-exports.default = DebugConsole;
-var StyledRoot = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: flex-start;\n  background: #000;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  font-family: monospace;\n  justify-content: flex-start;\n  max-height: 20rem;\n  min-height: 10rem;\n  width: 300px;\n\n  h6 {\n    background: #fff;\n    color: #000;\n    flex: 0 0 auto;\n    font-size: 20px;\n    font-weight: 700;\n    overflow: hidden;\n    padding: 10px;\n    text-overflow: ellipsis;\n    text-transform: uppercase;\n    white-space: nowrap;\n    width: 100%;\n  }\n\n  > div {\n    -webkit-overflow-scrolling: touch;\n    align-items: flex-start;\n    box-sizing: border-box;\n    color: #fff;\n    display: flex;\n    flex-direction: column;\n    font-size: 14px;\n    justify-content: flex-start;\n    overflow-x: hidden;\n    overflow-y: scroll;\n    padding: 10px 20px;\n    width: 100%;\n\n    > span:not(:last-child) {\n      margin-bottom: 2px;\n    }\n  }\n"], ["\n  align-items: flex-start;\n  background: #000;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  font-family: monospace;\n  justify-content: flex-start;\n  max-height: 20rem;\n  min-height: 10rem;\n  width: 300px;\n\n  h6 {\n    background: #fff;\n    color: #000;\n    flex: 0 0 auto;\n    font-size: 20px;\n    font-weight: 700;\n    overflow: hidden;\n    padding: 10px;\n    text-overflow: ellipsis;\n    text-transform: uppercase;\n    white-space: nowrap;\n    width: 100%;\n  }\n\n  > div {\n    -webkit-overflow-scrolling: touch;\n    align-items: flex-start;\n    box-sizing: border-box;\n    color: #fff;\n    display: flex;\n    flex-direction: column;\n    font-size: 14px;\n    justify-content: flex-start;\n    overflow-x: hidden;\n    overflow-y: scroll;\n    padding: 10px 20px;\n    width: 100%;\n\n    > span:not(:last-child) {\n      margin-bottom: 2px;\n    }\n  }\n"])));
-var templateObject_1;
+    }, [message]);
+    (0, react_1.useEffect)(function () {
+        var _a, _b;
+        (_a = messagesRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo(0, (_b = messagesRef.current) === null || _b === void 0 ? void 0 : _b.scrollHeight);
+    }, [messages]);
+    var fixedStyles = (0, asStyleDict_1.default)({
+        root: {
+            background: '#000',
+            fontFamily: 'monospace',
+            position: 'fixed',
+            width: '300px',
+        },
+        title: {
+            background: '#fff',
+            boxSizing: 'border-box',
+            color: '#000',
+            fontSize: '14px',
+            fontWeight: '700',
+            height: '30px',
+            lineHeight: '30px',
+            overflow: 'hidden',
+            padding: '0 10px',
+            textOverflow: 'ellipsis',
+            textTransform: 'uppercase',
+            whiteSpace: 'nowrap',
+            width: '100%',
+        },
+        messages: {
+            boxSizing: 'border-box',
+            color: '#fff',
+            fontSize: '12px',
+            lineHeight: '150%',
+            maxHeight: '200px',
+            minHeight: '100px',
+            overflowX: 'hidden',
+            overflowY: 'scroll',
+            padding: '10px',
+            WebkitOverflowScrolling: 'touch',
+            width: '100%',
+        },
+    });
+    return (react_1.default.createElement("div", __assign({}, props, { ref: ref, style: (0, styles_1.default)(style, fixedStyles.root, getStyleByAlignment(align, margin)) }),
+        react_1.default.createElement("div", { style: fixedStyles.title }, title !== null && title !== void 0 ? title : 'Untitled'),
+        react_1.default.createElement("div", { ref: messagesRef, style: fixedStyles.messages },
+            react_1.default.createElement(Each_1.default, { in: messages, render: function (msg) { return react_1.default.createElement("div", { dangerouslySetInnerHTML: { __html: msg } }); } }))));
+});
+function getStyleByAlignment(align, margin) {
+    switch (align) {
+        case 'tl': return { top: "".concat(margin, "px"), left: "".concat(margin, "px") };
+        case 'tc': return { top: "".concat(margin, "px"), left: 0, right: 0, margin: '0 auto' };
+        case 'tr': return { top: "".concat(margin, "px"), right: "".concat(margin, "px") };
+        case 'cl': return { top: 0, left: "".concat(margin, "px"), bottom: 0, margin: 'auto 0' };
+        case 'cc': return { top: 0, left: 0, right: 0, bottom: 0, margin: 'auto' };
+        case 'cr': return { top: 0, bottom: 0, right: "".concat(margin, "px"), margin: 'auto 0' };
+        case 'bl': return { bottom: "".concat(margin, "px"), left: "".concat(margin, "px") };
+        case 'bc': return { bottom: "".concat(margin, "px"), left: 0, right: 0, margin: '0 auto' };
+        default: return { bottom: "".concat(margin, "px"), right: "".concat(margin, "px") };
+    }
+}
 //# sourceMappingURL=DebugConsole.js.map

package/lib/DebugConsole.js.map

@@ -1 +1 @@
-{"version":3,"file":"DebugConsole.js","sourceRoot":"/","sources":["DebugConsole.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { createRef, CSSProperties, PureComponent } from 'react'\nimport styled from 'styled-components'\n\nexport interface Props {\n  className?: string\n  style: CSSProperties\n  margin: number\n  maxEntries: number\n  align: 'tl' | 'tc' | 'tr' | 'cl' | 'cc' | 'cr' | 'bl' | 'bc' | 'br'\n  message?: string\n  title?: string\n}\n\nexport interface State {\n  messages: string[]\n}\n\nexport default class DebugConsole extends PureComponent<Props, State> {\n  static defaultProps: Partial<Props> = {\n    align: 'br',\n    margin: 0,\n    maxEntries: -1,\n    style: {},\n  }\n\n  nodeRefs = {\n    messages: createRef<HTMLDivElement>(),\n  }\n\n  constructor(props: Props) {\n    super(props)\n\n    this.state = {\n      messages: this.props.message ? [this.props.message] : [],\n    }\n  }\n\n  componentDidUpdate(prevProps: Props, prevState: State) {\n    if (prevProps.message !== this.props.message) {\n      this.push(this.props.message ?? '')\n    }\n\n    if (prevState.messages.length !== this.state.messages.length) {\n      const m = this.nodeRefs.messages.current?.scrollHeight ?? 0\n      this.nodeRefs.messages.current?.scrollTo(0, m)\n    }\n  }\n\n  push(message: string) {\n    if (this.props.maxEntries < 0) {\n      this.setState({\n        messages: [...this.state.messages, message],\n      })\n    }\n    else {\n      const n = this.state.messages.length\n\n      this.setState({\n        messages: [...this.state.messages.slice(Math.max(0, n - (this.props.maxEntries - 1)), n), message],\n      })\n    }\n  }\n\n  clear() {\n    this.setState({\n      messages: [],\n    })\n  }\n\n  render() {\n    return (\n      <StyledRoot\n        className={this.props.className}\n        style={{\n          ...this.props.style,\n          margin: 0,\n          position: 'fixed',\n          ...this.getStyleByAlignment(this.props.align),\n        }}\n      >\n        <h6>{this.props.title ?? 'Untitled'}</h6>\n        <div ref={this.nodeRefs.messages}>\n          {this.state.messages.map((v, i) => (\n            <span key={`item-${i}`} dangerouslySetInnerHTML={{ __html: v }}/>\n          ))}\n        </div>\n      </StyledRoot>\n    )\n  }\n\n  private getStyleByAlignment(align: Props['align']): CSSProperties {\n    switch (align) {\n    case 'tl': return { top: `${this.props.margin}px`, left: `${this.props.margin}px` }\n    case 'tc': return { top: `${this.props.margin}px`, left: 0, right: 0, margin: '0 auto' }\n    case 'tr': return { top: `${this.props.margin}px`, right: `${this.props.margin}px` }\n    case 'cl': return { top: 0, left: `${this.props.margin}px`, bottom: 0, margin: 'auto 0' }\n    case 'cc': return { top: 0, left: 0, right: 0, bottom: 0, margin: 'auto' }\n    case 'cr': return { top: 0, bottom: 0, right: `${this.props.margin}px`, margin: 'auto 0' }\n    case 'bl': return { bottom: `${this.props.margin}px`, left: `${this.props.margin}px` }\n    case 'bc': return { bottom: `${this.props.margin}px`, left: 0, right: 0, margin: '0 auto' }\n    default: return { bottom: `${this.props.margin}px`, right: `${this.props.margin}px` }\n    }\n  }\n}\n\nconst StyledRoot = styled.div`\n  align-items: flex-start;\n  background: #000;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  font-family: monospace;\n  justify-content: flex-start;\n  max-height: 20rem;\n  min-height: 10rem;\n  width: 300px;\n\n  h6 {\n    background: #fff;\n    color: #000;\n    flex: 0 0 auto;\n    font-size: 20px;\n    font-weight: 700;\n    overflow: hidden;\n    padding: 10px;\n    text-overflow: ellipsis;\n    text-transform: uppercase;\n    white-space: nowrap;\n    width: 100%;\n  }\n\n  > div {\n    -webkit-overflow-scrolling: touch;\n    align-items: flex-start;\n    box-sizing: border-box;\n    color: #fff;\n    display: flex;\n    flex-direction: column;\n    font-size: 14px;\n    justify-content: flex-start;\n    overflow-x: hidden;\n    overflow-y: scroll;\n    padding: 10px 20px;\n    width: 100%;\n\n    > span:not(:last-child) {\n      margin-bottom: 2px;\n    }\n  }\n`\n"]}
+{"version":3,"file":"DebugConsole.js","sourceRoot":"/","sources":["DebugConsole.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { CSSProperties, forwardRef, HTMLAttributes, useEffect, useRef, useState } from 'react'\nimport Each from './Each'\nimport asStyleDict from './utils/asStyleDict'\nimport styles from './utils/styles'\n\nexport type DebugConsoleProps = HTMLAttributes<HTMLDivElement> & {\n  align?: 'tl' | 'tc' | 'tr' | 'cl' | 'cc' | 'cr' | 'bl' | 'bc' | 'br'\n  margin?: number\n  maxEntries?: number\n  message?: string\n  title?: string\n}\n\nexport default forwardRef<HTMLDivElement, DebugConsoleProps>(({\n  align = 'br',\n  margin = 0,\n  maxEntries = -1,\n  message,\n  style = {},\n  title,\n  ...props\n}, ref) => {\n  const [messages, setMessages] = useState<string[]>([])\n  const messagesRef = useRef<HTMLDivElement>(null)\n\n  useEffect(() => {\n    if (message === undefined) {\n      setMessages([])\n    }\n    else {\n      const numMessages = messages.length\n\n      setMessages([\n        ...maxEntries < 0\n          ? messages\n          : messages.slice(Math.max(0, numMessages - (maxEntries - 1)), numMessages),\n        message,\n      ])\n    }\n  }, [message])\n\n  useEffect(() => {\n    messagesRef.current?.scrollTo(0, messagesRef.current?.scrollHeight)\n  }, [messages])\n\n  const fixedStyles = asStyleDict({\n    root: {\n      background: '#000',\n      fontFamily: 'monospace',\n      position: 'fixed',\n      width: '300px',\n    },\n    title: {\n      background: '#fff',\n      boxSizing: 'border-box',\n      color: '#000',\n      fontSize: '14px',\n      fontWeight: '700',\n      height: '30px',\n      lineHeight: '30px',\n      overflow: 'hidden',\n      padding: '0 10px',\n      textOverflow: 'ellipsis',\n      textTransform: 'uppercase',\n      whiteSpace: 'nowrap',\n      width: '100%',\n    },\n    messages: {\n      boxSizing: 'border-box',\n      color: '#fff',\n      fontSize: '12px',\n      lineHeight: '150%',\n      maxHeight: '200px',\n      minHeight: '100px',\n      overflowX: 'hidden',\n      overflowY: 'scroll',\n      padding: '10px',\n      WebkitOverflowScrolling: 'touch',\n      width: '100%',\n    },\n  })\n\n  return (\n    <div\n      {...props}\n      ref={ref}\n      style={styles(style, fixedStyles.root, getStyleByAlignment(align, margin))}\n    >\n      <div style={fixedStyles.title}>{title ?? 'Untitled'}</div>\n      <div ref={messagesRef} style={fixedStyles.messages}>\n        <Each in={messages} render={msg => <div dangerouslySetInnerHTML={{ __html: msg }}/>}/>\n      </div>\n    </div>\n  )\n})\n\nfunction getStyleByAlignment(align: DebugConsoleProps['align'], margin: number): CSSProperties {\n  switch (align) {\n    case 'tl': return { top: `${margin}px`, left: `${margin}px` }\n    case 'tc': return { top: `${margin}px`, left: 0, right: 0, margin: '0 auto' }\n    case 'tr': return { top: `${margin}px`, right: `${margin}px` }\n    case 'cl': return { top: 0, left: `${margin}px`, bottom: 0, margin: 'auto 0' }\n    case 'cc': return { top: 0, left: 0, right: 0, bottom: 0, margin: 'auto' }\n    case 'cr': return { top: 0, bottom: 0, right: `${margin}px`, margin: 'auto 0' }\n    case 'bl': return { bottom: `${margin}px`, left: `${margin}px` }\n    case 'bc': return { bottom: `${margin}px`, left: 0, right: 0, margin: '0 auto' }\n    default: return { bottom: `${margin}px`, right: `${margin}px` }\n  }\n}\n"]}

package/lib/Dial.d.ts

@@ -1,16 +1,17 @@
-import { HTMLAttributes } from 'react';
-export declare type Props = HTMLAttributes<HTMLDivElement> & {
+import React, { HTMLAttributes, PropsWithChildren, SVGAttributes } from 'react';
+export type DialProps = HTMLAttributes<HTMLDivElement> & PropsWithChildren<{
     /**
-     * Current angle reading of the compass, between 0.0 - 360.0 degrees, inclusive.
+     * Current angle reading of the compass, between 0.0 - 360.0 degrees,
+     * inclusive.
      */
     angle?: number;
     /**
-     * Length of the knob along the track expressed in degrees, between 0.0 and 360.0 degrees,
-     * exclusive. If set to 0 or 360, the knob disappears.
+     * Length of the knob along the track expressed in degrees, between 0.0 and
+     * 360.0 degrees, exclusive. If set to 0 or 360, the knob disappears.
      *
-     * @example Suppose the compass were to be used to control a photosphere of an image that is 1000
-     *          x 500, and the window size is 500 x 500, that would mean the FOV is 500 / 1000 * 360 =
-     *          180 degrees.
+     * @example Suppose the compass were to be used to control a photosphere of an
+     *          image that is 1000 x 500, and the window size is 500 x 500, that
+     *          would mean the FOV is 500 / 1000 * 360 = 180 degrees.
      */
     knobLength?: number;
     /**
@@ -18,22 +19,58 @@ export declare type Props = HTMLAttributes<HTMLDivElement> & {
      */
     radius?: number;
     /**
-     * The thickness of the knob, which is equivalent to the `stroke-width` of the `<path>` element.
-     * Note that this overwrites the `stroke-width` set inside `cssKnob`.
+     * The thickness of the knob, which is equivalent to the `stroke-width` of the
+     * `<path>` element. Note that this overwrites the `stroke-width` set inside
+     * `cssKnob`.
      */
     knobThickness?: number;
     /**
-     * The thickness of the circular track, which is equivalent to the `stroke-width` of the
-     * `<circle>` element. Note that this overwrites the `stroke-width` set inside `cssTrack`.
+     * The thickness of the circular track, which is equivalent to the
+     * `stroke-width` of the `<circle>` element. Note that this overwrites the
+     * `stroke-width` set inside `cssTrack`.
      */
     trackThickness?: number;
-};
+}>;
 /**
  * A circular dial with a knob and a track.
  *
  * @exports DialKnob
  * @exports DialTrack
  */
-export default function Dial({ angle, radius, knobLength, knobThickness, trackThickness, style, ...props }: Props): JSX.Element;
-export declare const DialTrack: import("styled-components").StyledComponent<"circle", any, {}, never>;
-export declare const DialKnob: import("styled-components").StyledComponent<"path", any, {}, never>;
+declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    /**
+     * Current angle reading of the compass, between 0.0 - 360.0 degrees,
+     * inclusive.
+     */
+    angle?: number | undefined;
+    /**
+     * Length of the knob along the track expressed in degrees, between 0.0 and
+     * 360.0 degrees, exclusive. If set to 0 or 360, the knob disappears.
+     *
+     * @example Suppose the compass were to be used to control a photosphere of an
+     *          image that is 1000 x 500, and the window size is 500 x 500, that
+     *          would mean the FOV is 500 / 1000 * 360 = 180 degrees.
+     */
+    knobLength?: number | undefined;
+    /**
+     * Radius of the compass.
+     */
+    radius?: number | undefined;
+    /**
+     * The thickness of the knob, which is equivalent to the `stroke-width` of the
+     * `<path>` element. Note that this overwrites the `stroke-width` set inside
+     * `cssKnob`.
+     */
+    knobThickness?: number | undefined;
+    /**
+     * The thickness of the circular track, which is equivalent to the
+     * `stroke-width` of the `<circle>` element. Note that this overwrites the
+     * `stroke-width` set inside `cssTrack`.
+     */
+    trackThickness?: number | undefined;
+} & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;
+export default _default;
+export declare const DialTrack: ({ ...props }: SVGAttributes<SVGCircleElement>) => JSX.Element;
+export declare const DialKnob: ({ ...props }: SVGAttributes<SVGPathElement>) => JSX.Element;

package/lib/Dial.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++) {
@@ -14,6 +10,29 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 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)
@@ -30,13 +49,96 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DialKnob = exports.DialTrack = void 0;
-var react_1 = __importDefault(require("react"));
-var styled_components_1 = __importDefault(require("styled-components"));
+var react_1 = __importStar(require("react"));
+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 circular dial with a knob and a track.
+ *
+ * @exports DialKnob
+ * @exports DialTrack
+ */
+exports.default = (0, react_1.forwardRef)(function (_a, ref) {
+    var _b, _c;
+    var _d = _a.angle, angle = _d === void 0 ? 0 : _d, children = _a.children, _e = _a.knobLength, knobLength = _e === void 0 ? 30 : _e, _f = _a.knobThickness, knobThickness = _f === void 0 ? 10 : _f, _g = _a.radius, radius = _g === void 0 ? 50 : _g, _h = _a.trackThickness, trackThickness = _h === void 0 ? 2 : _h, style = _a.style, props = __rest(_a, ["angle", "children", "knobLength", "knobThickness", "radius", "trackThickness", "style"]);
+    var diameter = radius * 2;
+    var clampedKnobAngle = Math.max(0, Math.min(360, knobLength));
+    var components = (0, asComponentDict_1.default)(children, {
+        track: exports.DialTrack,
+        knob: exports.DialKnob,
+    });
+    var fixedStyles = (0, asStyleDict_1.default)({
+        root: {
+            height: "".concat(diameter, "px"),
+            width: "".concat(diameter, "px"),
+        },
+        knobContainer: {
+            backgroundPosition: 'center',
+            backgroundRepeat: 'no-repeat',
+            backgroundSize: '100%',
+            height: '100%',
+            left: '0',
+            position: 'absolute',
+            top: '0',
+            transformOrigin: 'center',
+            width: '100%',
+            transform: "rotate(".concat((angle + 360) % 360, "deg)"),
+        },
+        trackContainer: {
+            height: '100%',
+            left: '0',
+            position: 'absolute',
+            top: '0',
+            transformOrigin: 'center',
+            width: '100%',
+        },
+        svgContainer: {
+            overflow: 'visible',
+            position: 'absolute',
+            right: '0',
+            top: '0',
+        },
+    });
+    var defaultStyles = (0, asStyleDict_1.default)({
+        knob: {
+            stroke: '#fff',
+        },
+        track: {
+            strokeDasharray: '4',
+            stroke: '#fff',
+        },
+    });
+    return (react_1.default.createElement("div", __assign({}, props, { ref: ref, style: (0, styles_1.default)(style, fixedStyles.root) }),
+        react_1.default.createElement("div", { style: fixedStyles.trackContainer },
+            react_1.default.createElement("svg", { width: diameter, height: diameter, viewBox: "0 0 ".concat(diameter, " ").concat(diameter), style: fixedStyles.svgContainer }, (0, cloneStyledElement_1.default)((_b = components.track) !== null && _b !== void 0 ? _b : react_1.default.createElement(exports.DialTrack, { style: defaultStyles.track }), {
+                cx: radius,
+                cy: radius,
+                r: radius - trackThickness / 2,
+                strokeWidth: trackThickness,
+            }))),
+        react_1.default.createElement("div", { style: (0, styles_1.default)(fixedStyles.knobContainer) },
+            react_1.default.createElement("svg", { viewBox: "0 0 ".concat(diameter, " ").concat(diameter), xmlns: 'http://www.w3.org/2000/svg', style: fixedStyles.svgContainer }, (0, cloneStyledElement_1.default)((_c = components.knob) !== null && _c !== void 0 ? _c : react_1.default.createElement(exports.DialKnob, { style: defaultStyles.knob }), {
+                strokeWidth: knobThickness,
+                d: arcPath(radius, radius, radius - knobThickness / 2 - (trackThickness - knobThickness) / 2, -clampedKnobAngle / 2, clampedKnobAngle / 2),
+            })))));
+});
+var DialTrack = function (_a) {
+    var props = __rest(_a, []);
+    return react_1.default.createElement("circle", __assign({}, props));
+};
+exports.DialTrack = DialTrack;
+var DialKnob = function (_a) {
+    var props = __rest(_a, []);
+    return react_1.default.createElement("path", __assign({}, props));
+};
+exports.DialKnob = DialKnob;
 function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
     var angleInRadians = (angleInDegrees - 90) * Math.PI / 180.0;
     return {
-        x: centerX + (radius * Math.cos(angleInRadians)),
-        y: centerY + (radius * Math.sin(angleInRadians)),
+        x: centerX + radius * Math.cos(angleInRadians),
+        y: centerY + radius * Math.sin(angleInRadians),
     };
 }
 function arcPath(x, y, radius, startAngle, endAngle) {
@@ -44,34 +146,18 @@ function arcPath(x, y, radius, startAngle, endAngle) {
     var end = polarToCartesian(x, y, radius, startAngle);
     var largeArcFlag = endAngle - startAngle <= 180 ? '0' : '1';
     var d = [
-        'M', start.x, start.y,
-        'A', radius, radius, 0, largeArcFlag, 0, end.x, end.y,
+        'M',
+        start.x,
+        start.y,
+        'A',
+        radius,
+        radius,
+        0,
+        largeArcFlag,
+        0,
+        end.x,
+        end.y,
     ];
     return d.join(' ');
 }
-/**
- * A circular dial with a knob and a track.
- *
- * @exports DialKnob
- * @exports DialTrack
- */
-function Dial(_a) {
-    var _b = _a.angle, angle = _b === void 0 ? 0 : _b, _c = _a.radius, radius = _c === void 0 ? 50 : _c, _d = _a.knobLength, knobLength = _d === void 0 ? 30 : _d, _e = _a.knobThickness, knobThickness = _e === void 0 ? 10 : _e, _f = _a.trackThickness, trackThickness = _f === void 0 ? 2 : _f, style = _a.style, props = __rest(_a, ["angle", "radius", "knobLength", "knobThickness", "trackThickness", "style"]);
-    var diameter = radius * 2;
-    var clampedKnobAngle = Math.max(0, Math.min(360, knobLength));
-    return (react_1.default.createElement(StyledRoot, __assign({ style: __assign(__assign({}, style), { width: "".concat(diameter, "px"), height: "".concat(diameter, "px") }) }, props),
-        react_1.default.createElement(StyledTrackContainer, null,
-            react_1.default.createElement("svg", { width: diameter, height: diameter, viewBox: "0 0 ".concat(diameter, " ").concat(diameter) },
-                react_1.default.createElement(exports.DialTrack, { cx: radius, cy: radius, r: radius - trackThickness / 2, strokeWidth: trackThickness }))),
-        react_1.default.createElement(StyledKnobContainer, { style: { transform: "rotate(".concat((angle + 360) % 360, "deg)") } },
-            react_1.default.createElement("svg", { viewBox: "0 0 ".concat(diameter, " ").concat(diameter), xmlns: 'http://www.w3.org/2000/svg' },
-                react_1.default.createElement(exports.DialKnob, { strokeWidth: knobThickness, d: arcPath(radius, radius, radius - knobThickness / 2 - (trackThickness - knobThickness) / 2, -clampedKnobAngle / 2, clampedKnobAngle / 2) })))));
-}
-exports.default = Dial;
-exports.DialTrack = styled_components_1.default.circle(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  stroke-dasharray: 4;\n  stroke: #fff;\n"], ["\n  stroke-dasharray: 4;\n  stroke: #fff;\n"])));
-exports.DialKnob = styled_components_1.default.path(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  stroke: #fff;\n"], ["\n  stroke: #fff;\n"])));
-var StyledTrackContainer = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: 100%;\n  left: 0;\n  position: absolute;\n  top: 0;\n  transform-origin: center;\n  width: 100%;\n"], ["\n  height: 100%;\n  left: 0;\n  position: absolute;\n  top: 0;\n  transform-origin: center;\n  width: 100%;\n"])));
-var StyledKnobContainer = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  background-position: center;\n  background-repeat: no-repeat;\n  background-size: 100%;\n  height: 100%;\n  left: 0;\n  position: absolute;\n  top: 0;\n  transform-origin: center;\n  width: 100%;\n\n  svg {\n    overflow: visible;\n    position: absolute;\n    right: 0;\n    top: 0;\n  }\n"], ["\n  background-position: center;\n  background-repeat: no-repeat;\n  background-size: 100%;\n  height: 100%;\n  left: 0;\n  position: absolute;\n  top: 0;\n  transform-origin: center;\n  width: 100%;\n\n  svg {\n    overflow: visible;\n    position: absolute;\n    right: 0;\n    top: 0;\n  }\n"])));
-var StyledRoot = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: block;\n"], ["\n  box-sizing: border-box;\n  display: block;\n"])));
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
 //# sourceMappingURL=Dial.js.map

package/lib/Dial.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dial.js","sourceRoot":"/","sources":["Dial.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { HTMLAttributes } from 'react'\nimport styled from 'styled-components'\n\nexport type Props = HTMLAttributes<HTMLDivElement> & {\n  /**\n   * Current angle reading of the compass, between 0.0 - 360.0 degrees, inclusive.\n   */\n  angle?: number\n\n  /**\n   * Length of the knob along the track expressed in degrees, between 0.0 and 360.0 degrees,\n   * exclusive. If set to 0 or 360, the knob disappears.\n   *\n   * @example Suppose the compass were to be used to control a photosphere of an image that is 1000\n   *          x 500, and the window size is 500 x 500, that would mean the FOV is 500 / 1000 * 360 =\n   *          180 degrees.\n   */\n  knobLength?: number\n\n  /**\n   * Radius of the compass.\n   */\n  radius?: number\n\n  /**\n   * The thickness of the knob, which is equivalent to the `stroke-width` of the `<path>` element.\n   * Note that this overwrites the `stroke-width` set inside `cssKnob`.\n   */\n  knobThickness?: number\n\n  /**\n   * The thickness of the circular track, which is equivalent to the `stroke-width` of the\n   * `<circle>` element. Note that this overwrites the `stroke-width` set inside `cssTrack`.\n   */\n  trackThickness?: number\n}\n\nfunction polarToCartesian(centerX: number, centerY: number, radius: number, angleInDegrees: number) {\n  const angleInRadians = (angleInDegrees - 90) * Math.PI / 180.0\n\n  return {\n    x: centerX + (radius * Math.cos(angleInRadians)),\n    y: centerY + (radius * Math.sin(angleInRadians)),\n  }\n}\n\nfunction arcPath(x: number, y: number, radius: number, startAngle: number, endAngle: number) {\n  const start = polarToCartesian(x, y, radius, endAngle)\n  const end = polarToCartesian(x, y, radius, startAngle)\n  const largeArcFlag = endAngle - startAngle <= 180 ? '0' : '1'\n  const d = [\n    'M', start.x, start.y,\n    'A', radius, radius, 0, largeArcFlag, 0, end.x, end.y,\n  ]\n\n  return d.join(' ')\n}\n\n/**\n * A circular dial with a knob and a track.\n *\n * @exports DialKnob\n * @exports DialTrack\n */\nexport default function Dial({\n  angle = 0,\n  radius = 50,\n  knobLength = 30,\n  knobThickness = 10,\n  trackThickness = 2,\n  style,\n  ...props\n}: Props) {\n  const diameter = radius * 2\n  const clampedKnobAngle = Math.max(0, Math.min(360, knobLength))\n\n  return (\n    <StyledRoot style={{ ...style, width: `${diameter}px`, height: `${diameter}px` }} {...props}>\n      <StyledTrackContainer>\n        <svg width={diameter} height={diameter} viewBox={`0 0 ${diameter} ${diameter}`}>\n          <DialTrack\n            cx={radius}\n            cy={radius}\n            r={radius - trackThickness / 2}\n            strokeWidth={trackThickness}\n          />\n        </svg>\n      </StyledTrackContainer>\n      <StyledKnobContainer style={{ transform: `rotate(${(angle + 360) % 360}deg)` }}>\n        <svg viewBox={`0 0 ${diameter} ${diameter}`} xmlns='http://www.w3.org/2000/svg'>\n          <DialKnob strokeWidth={knobThickness} d={arcPath(radius, radius, radius - knobThickness / 2 - (trackThickness - knobThickness) / 2, -clampedKnobAngle / 2, clampedKnobAngle / 2)}/>\n        </svg>\n      </StyledKnobContainer>\n    </StyledRoot>\n  )\n}\n\nexport const DialTrack = styled.circle`\n  stroke-dasharray: 4;\n  stroke: #fff;\n`\n\nexport const DialKnob = styled.path`\n  stroke: #fff;\n`\n\nconst StyledTrackContainer = styled.div`\n  height: 100%;\n  left: 0;\n  position: absolute;\n  top: 0;\n  transform-origin: center;\n  width: 100%;\n`\n\nconst StyledKnobContainer = styled.div`\n  background-position: center;\n  background-repeat: no-repeat;\n  background-size: 100%;\n  height: 100%;\n  left: 0;\n  position: absolute;\n  top: 0;\n  transform-origin: center;\n  width: 100%;\n\n  svg {\n    overflow: visible;\n    position: absolute;\n    right: 0;\n    top: 0;\n  }\n`\n\nconst StyledRoot = styled.div`\n  box-sizing: border-box;\n  display: block;\n`\n"]}
+{"version":3,"file":"Dial.js","sourceRoot":"/","sources":["Dial.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { forwardRef, HTMLAttributes, PropsWithChildren, SVGAttributes } from 'react'\nimport asComponentDict from './utils/asComponentDict'\nimport asStyleDict from './utils/asStyleDict'\nimport cloneStyledElement from './utils/cloneStyledElement'\nimport styles from './utils/styles'\n\nexport type DialProps = HTMLAttributes<HTMLDivElement> & PropsWithChildren<{\n  /**\n   * Current angle reading of the compass, between 0.0 - 360.0 degrees,\n   * inclusive.\n   */\n  angle?: number\n\n  /**\n   * Length of the knob along the track expressed in degrees, between 0.0 and\n   * 360.0 degrees, exclusive. If set to 0 or 360, the knob disappears.\n   *\n   * @example Suppose the compass were to be used to control a photosphere of an\n   *          image that is 1000 x 500, and the window size is 500 x 500, that\n   *          would mean the FOV is 500 / 1000 * 360 = 180 degrees.\n   */\n  knobLength?: number\n\n  /**\n   * Radius of the compass.\n   */\n  radius?: number\n\n  /**\n   * The thickness of the knob, which is equivalent to the `stroke-width` of the\n   * `<path>` element. Note that this overwrites the `stroke-width` set inside\n   * `cssKnob`.\n   */\n  knobThickness?: number\n\n  /**\n   * The thickness of the circular track, which is equivalent to the\n   * `stroke-width` of the `<circle>` element. Note that this overwrites the\n   * `stroke-width` set inside `cssTrack`.\n   */\n  trackThickness?: number\n}>\n\n/**\n * A circular dial with a knob and a track.\n *\n * @exports DialKnob\n * @exports DialTrack\n */\nexport default forwardRef<HTMLDivElement, DialProps>(({\n  angle = 0,\n  children,\n  knobLength = 30,\n  knobThickness = 10,\n  radius = 50,\n  trackThickness = 2,\n  style,\n  ...props\n}, ref) => {\n  const diameter = radius * 2\n  const clampedKnobAngle = Math.max(0, Math.min(360, knobLength))\n\n  const components = asComponentDict(children, {\n    track: DialTrack,\n    knob: DialKnob,\n  })\n\n  const fixedStyles = asStyleDict({\n    root: {\n      height: `${diameter}px`,\n      width: `${diameter}px`,\n    },\n    knobContainer: {\n      backgroundPosition: 'center',\n      backgroundRepeat: 'no-repeat',\n      backgroundSize: '100%',\n      height: '100%',\n      left: '0',\n      position: 'absolute',\n      top: '0',\n      transformOrigin: 'center',\n      width: '100%',\n      transform: `rotate(${(angle + 360) % 360}deg)`,\n    },\n    trackContainer: {\n      height: '100%',\n      left: '0',\n      position: 'absolute',\n      top: '0',\n      transformOrigin: 'center',\n      width: '100%',\n    },\n    svgContainer: {\n      overflow: 'visible',\n      position: 'absolute',\n      right: '0',\n      top: '0',\n    },\n  })\n\n  const defaultStyles = asStyleDict({\n    knob: {\n      stroke: '#fff',\n    },\n    track: {\n      strokeDasharray: '4',\n      stroke: '#fff',\n    },\n  })\n\n  return (\n    <div {...props} ref={ref} style={styles(style, fixedStyles.root)}>\n      <div style={fixedStyles.trackContainer}>\n        <svg width={diameter} height={diameter} viewBox={`0 0 ${diameter} ${diameter}`} style={fixedStyles.svgContainer}>\n          {cloneStyledElement(components.track ?? <DialTrack style={defaultStyles.track}/>, {\n            cx: radius,\n            cy: radius,\n            r: radius - trackThickness / 2,\n            strokeWidth: trackThickness,\n          })}\n        </svg>\n      </div>\n      <div style={styles(fixedStyles.knobContainer)}>\n        <svg viewBox={`0 0 ${diameter} ${diameter}`} xmlns='http://www.w3.org/2000/svg' style={fixedStyles.svgContainer}>\n          {cloneStyledElement(components.knob ?? <DialKnob style={defaultStyles.knob}/>, {\n            strokeWidth: knobThickness,\n            d: arcPath(radius, radius, radius - knobThickness / 2 - (trackThickness - knobThickness) / 2, -clampedKnobAngle / 2, clampedKnobAngle / 2),\n          })}\n        </svg>\n      </div>\n    </div>\n  )\n})\n\nexport const DialTrack = ({ ...props }: SVGAttributes<SVGCircleElement>) => <circle {...props}/>\n\nexport const DialKnob = ({ ...props }: SVGAttributes<SVGPathElement>) => <path {...props}/>\n\nfunction polarToCartesian(centerX: number, centerY: number, radius: number, angleInDegrees: number) {\n  const angleInRadians = (angleInDegrees - 90) * Math.PI / 180.0\n\n  return {\n    x: centerX + radius * Math.cos(angleInRadians),\n    y: centerY + radius * Math.sin(angleInRadians),\n  }\n}\n\nfunction arcPath(x: number, y: number, radius: number, startAngle: number, endAngle: number) {\n  const start = polarToCartesian(x, y, radius, endAngle)\n  const end = polarToCartesian(x, y, radius, startAngle)\n  const largeArcFlag = endAngle - startAngle <= 180 ? '0' : '1'\n  const d = [\n    'M',\n    start.x,\n    start.y,\n    'A',\n    radius,\n    radius,\n    0,\n    largeArcFlag,\n    0,\n    end.x,\n    end.y,\n  ]\n\n  return d.join(' ')\n}\n"]}