etudes 0.35.0 → 0.36.0

package/lib/Dial.d.ts

@@ -1,18 +1,6 @@
-/// <reference types="react" />
-import { CSSProp, CSSProperties } from 'styled-components';
-export interface Props {
-    /**
-     * ID attribute of the root element.
-     */
-    id?: string;
-    /**
-     * Class attribute of the component.
-     */
-    className?: string;
-    /**
-     * Inline style attribute of the root element.
-     */
-    style?: CSSProperties;
+import { HTMLAttributes } from 'react';
+import { CSSProp } from 'styled-components';
+export declare type Props = HTMLAttributes<HTMLDivElement> & {
     /**
      * Current angle reading of the compass, between 0.0 - 360.0 degrees, inclusive.
      */
@@ -48,8 +36,11 @@ export interface Props {
      * CSS of the track, which is a `<circle>` element.
      */
     trackCSS?: CSSProp<any>;
-}
+};
 /**
  * A circular dial with a knob and a track.
+ *
+ * @requires react
+ * @requires styled-components
  */
-export default function Dial({ id, className, style, angle, radius, knobLength, knobThickness, knobCSS, trackThickness, trackCSS, }: Props): JSX.Element;
+export default function Dial({ angle, radius, knobLength, knobThickness, knobCSS, trackThickness, trackCSS, style, ...props }: Props): JSX.Element;

package/lib/Dial.js

@@ -14,6 +14,17 @@ var __assign = (this && this.__assign) || function () {
     };
     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 __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -39,12 +50,15 @@ function arcPath(x, y, radius, startAngle, endAngle) {
 }
 /**
  * A circular dial with a knob and a track.
+ *
+ * @requires react
+ * @requires styled-components
  */
 function Dial(_a) {
-    var id = _a.id, className = _a.className, style = _a.style, _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, knobCSS = _a.knobCSS, _f = _a.trackThickness, trackThickness = _f === void 0 ? 2 : _f, trackCSS = _a.trackCSS;
+    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, knobCSS = _a.knobCSS, _f = _a.trackThickness, trackThickness = _f === void 0 ? 2 : _f, trackCSS = _a.trackCSS, style = _a.style, props = __rest(_a, ["angle", "radius", "knobLength", "knobThickness", "knobCSS", "trackThickness", "trackCSS", "style"]);
     var diameter = radius * 2;
     var clampedKnobAngle = Math.max(0, Math.min(360, knobLength));
-    return (react_1.default.createElement(StyledRoot, { id: id, className: className, style: __assign(__assign({}, style), { width: "".concat(diameter, "px"), height: "".concat(diameter, "px") }) },
+    return (react_1.default.createElement(StyledRoot, __assign({ style: __assign(__assign({}, style), { width: "".concat(diameter, "px"), height: "".concat(diameter, "px") }) }, props),
         react_1.default.createElement(StyledTrack, null,
             react_1.default.createElement("svg", { width: diameter, height: diameter, viewBox: "0 0 ".concat(diameter, " ").concat(diameter) },
                 react_1.default.createElement(StyledTrackCircle, { cx: radius, cy: radius, r: radius - trackThickness / 2, css: trackCSS, strokeWidth: trackThickness }))),

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 from 'react'\nimport styled, { CSSProp, CSSProperties } from 'styled-components'\n\nexport interface Props {\n  /**\n   * ID attribute of the root element.\n   */\n  id?: string\n\n  /**\n   * Class attribute of the component.\n   */\n  className?: string\n\n  /**\n   * Inline style attribute of the root element.\n   */\n  style?: CSSProperties\n\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 `knobCSS`.\n   */\n  knobThickness?: number\n\n  /**\n   * CSS of the knob, which is a `<path>` element.\n   */\n  knobCSS?: CSSProp<any>\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 `trackCSS`.\n   */\n  trackThickness?: number\n\n  /**\n   * CSS of the track, which is a `<circle>` element.\n   */\n  trackCSS?: CSSProp<any>\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 */\nexport default function Dial({\n  id,\n  className,\n  style,\n  angle = 0,\n  radius = 50,\n  knobLength = 30,\n  knobThickness = 10,\n  knobCSS,\n  trackThickness = 2,\n  trackCSS,\n}: Props) {\n  const diameter = radius * 2\n  const clampedKnobAngle = Math.max(0, Math.min(360, knobLength))\n\n  return (\n    <StyledRoot id={id} className={className} style={{ ...style, width: `${diameter}px`, height: `${diameter}px` }}>\n      <StyledTrack>\n        <svg width={diameter} height={diameter} viewBox={`0 0 ${diameter} ${diameter}`}>\n          <StyledTrackCircle\n            cx={radius}\n            cy={radius}\n            r={radius - trackThickness / 2}\n            css={trackCSS}\n            strokeWidth={trackThickness}\n          />\n        </svg>\n      </StyledTrack>\n      <StyledKnob style={{ transform: `rotate(${(angle + 360) % 360}deg)` }}>\n        <svg viewBox={`0 0 ${diameter} ${diameter}`} xmlns='http://www.w3.org/2000/svg'>\n          <StyledKnobPath css={knobCSS} strokeWidth={knobThickness} d={arcPath(radius, radius, radius - knobThickness / 2 - (trackThickness - knobThickness) / 2, -clampedKnobAngle / 2, clampedKnobAngle / 2)}/>\n        </svg>\n      </StyledKnob>\n    </StyledRoot>\n  )\n}\n\nconst StyledTrack = styled.div`\n  height: 100%;\n  left: 0;\n  position: absolute;\n  top: 0;\n  transform-origin: center;\n  width: 100%;\n`\n\nconst StyledTrackCircle = styled.circle`\n  stroke-dasharray: 4;\n  stroke: #fff;\n  ${props => props.css}\n`\n\nconst StyledKnob = 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 StyledKnobPath = styled.path`\n  stroke: #fff;\n  ${props => props.css}\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, { HTMLAttributes } from 'react'\nimport styled, { CSSProp } 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 `knobCSS`.\n   */\n  knobThickness?: number\n\n  /**\n   * CSS of the knob, which is a `<path>` element.\n   */\n  knobCSS?: CSSProp<any>\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 `trackCSS`.\n   */\n  trackThickness?: number\n\n  /**\n   * CSS of the track, which is a `<circle>` element.\n   */\n  trackCSS?: CSSProp<any>\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 * @requires react\n * @requires styled-components\n */\nexport default function Dial({\n  angle = 0,\n  radius = 50,\n  knobLength = 30,\n  knobThickness = 10,\n  knobCSS,\n  trackThickness = 2,\n  trackCSS,\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      <StyledTrack>\n        <svg width={diameter} height={diameter} viewBox={`0 0 ${diameter} ${diameter}`}>\n          <StyledTrackCircle\n            cx={radius}\n            cy={radius}\n            r={radius - trackThickness / 2}\n            css={trackCSS}\n            strokeWidth={trackThickness}\n          />\n        </svg>\n      </StyledTrack>\n      <StyledKnob style={{ transform: `rotate(${(angle + 360) % 360}deg)` }}>\n        <svg viewBox={`0 0 ${diameter} ${diameter}`} xmlns='http://www.w3.org/2000/svg'>\n          <StyledKnobPath css={knobCSS} strokeWidth={knobThickness} d={arcPath(radius, radius, radius - knobThickness / 2 - (trackThickness - knobThickness) / 2, -clampedKnobAngle / 2, clampedKnobAngle / 2)}/>\n        </svg>\n      </StyledKnob>\n    </StyledRoot>\n  )\n}\n\nconst StyledTrack = styled.div`\n  height: 100%;\n  left: 0;\n  position: absolute;\n  top: 0;\n  transform-origin: center;\n  width: 100%;\n`\n\nconst StyledTrackCircle = styled.circle`\n  stroke-dasharray: 4;\n  stroke: #fff;\n  ${props => props.css}\n`\n\nconst StyledKnob = 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 StyledKnobPath = styled.path`\n  stroke: #fff;\n  ${props => props.css}\n`\n\nconst StyledRoot = styled.div`\n  box-sizing: border-box;\n  display: block;\n`\n"]}

package/lib/FlatSVG.d.ts

@@ -1,8 +1,5 @@
-import { CSSProperties } from 'react';
-export declare type Props = {
-    id?: string;
-    className?: string;
-    style?: CSSProperties;
+import { HTMLAttributes } from 'react';
+export declare type Props = HTMLAttributes<HTMLDivElement> & {
     isAnimated?: boolean;
     fillColor?: string;
     strokeColor?: string;
@@ -14,4 +11,4 @@ export declare type Props = {
  * @requires react
  * @requires styled-component
  */
-export default function FlatSVG({ id, className, style, isAnimated, fillColor, strokeColor, svgMarkup, }: Props): JSX.Element;
+export default function FlatSVG({ isAnimated, fillColor, strokeColor, svgMarkup, ...props }: Props): JSX.Element;

package/lib/FlatSVG.js

@@ -3,6 +3,17 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     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++) {
+            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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
@@ -22,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 __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -35,8 +57,8 @@ var styled_components_1 = __importStar(require("styled-components"));
  * @requires styled-component
  */
 function FlatSVG(_a) {
-    var id = _a.id, className = _a.className, style = _a.style, _b = _a.isAnimated, isAnimated = _b === void 0 ? false : _b, fillColor = _a.fillColor, strokeColor = _a.strokeColor, svgMarkup = _a.svgMarkup;
-    return (react_1.default.createElement(StyledRoot, { id: id, className: className, dangerouslySetInnerHTML: { __html: svgMarkup }, isAnimated: isAnimated, fillColor: fillColor, strokeColor: strokeColor, style: style }));
+    var _b = _a.isAnimated, isAnimated = _b === void 0 ? false : _b, fillColor = _a.fillColor, strokeColor = _a.strokeColor, svgMarkup = _a.svgMarkup, props = __rest(_a, ["isAnimated", "fillColor", "strokeColor", "svgMarkup"]);
+    return (react_1.default.createElement(StyledRoot, __assign({ dangerouslySetInnerHTML: { __html: svgMarkup }, isAnimated: isAnimated, fillColor: fillColor, strokeColor: strokeColor }, props)));
 }
 exports.default = FlatSVG;
 var StyledRoot = styled_components_1.default.figure(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  box-sizing: border-box;\n  display: inline-block;\n  flex: 0 0 auto;\n  height: 100%;\n  position: relative;\n  width: auto;\n\n  > svg {\n    height: 100%;\n    transition-delay: inherit;\n    transition-duration: inherit;\n    transition-property: inherit;\n    transition-timing-function: inherit;\n    width: auto;\n\n    ", "\n\n    * {\n      transition-delay: inherit;\n      transition-duration: inherit;\n      transition-property: inherit;\n      transition-timing-function: inherit;\n\n      ", "\n\n      ", "\n    }\n  }\n"], ["\n  box-sizing: border-box;\n  display: inline-block;\n  flex: 0 0 auto;\n  height: 100%;\n  position: relative;\n  width: auto;\n\n  > svg {\n    height: 100%;\n    transition-delay: inherit;\n    transition-duration: inherit;\n    transition-property: inherit;\n    transition-timing-function: inherit;\n    width: auto;\n\n    ", "\n\n    * {\n      transition-delay: inherit;\n      transition-duration: inherit;\n      transition-property: inherit;\n      transition-timing-function: inherit;\n\n      ", "\n\n      ", "\n    }\n  }\n"])), function (props) { return props.isAnimated && (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      transition-property: stroke, fill, transform;\n      transition-duration: 100ms;\n      transition-timing-function: ease-out;\n    "], ["\n      transition-property: stroke, fill, transform;\n      transition-duration: 100ms;\n      transition-timing-function: ease-out;\n    "]))); }, function (props) { return props.fillColor !== undefined && (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n        fill: ", " !important;\n      "], ["\n        fill: ", " !important;\n      "])), props.fillColor); }, function (props) { return props.strokeColor !== undefined && (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n        stroke: ", " !important;\n      "], ["\n        stroke: ", " !important;\n      "])), props.strokeColor); });

package/lib/FlatSVG.js.map

@@ -1 +1 @@
-{"version":3,"file":"FlatSVG.js","sourceRoot":"/","sources":["FlatSVG.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAA4C;AAC5C,qEAA+C;AAY/C;;;;;GAKG;AACH,SAAwB,OAAO,CAAC,EAQxB;QAPN,EAAE,QAAA,EACF,SAAS,eAAA,EACT,KAAK,WAAA,EACL,kBAAkB,EAAlB,UAAU,mBAAG,KAAK,KAAA,EAClB,SAAS,eAAA,EACT,WAAW,iBAAA,EACX,SAAS,eAAA;IAET,OAAO,CACL,8BAAC,UAAU,IACT,EAAE,EAAE,EAAE,EACN,SAAS,EAAE,SAAS,EACpB,uBAAuB,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,EAC9C,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,KAAK,GACZ,CACH,CAAA;AACH,CAAC;AApBD,0BAoBC;AAED,IAAM,UAAU,GAAG,2BAAM,CAAC,MAAM,gmBAI9B,4UAgBI,EAID,+KAQG,EAED,YAEC,EAED,gBAGN,KArBK,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,UAAU,QAAI,uBAAG,iNAAA,6IAIjC,IAAA,EAJU,CAIV,EAQG,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,SAAS,KAAK,SAAS,QAAI,uBAAG,8GAAA,kBACrC,EAAe,sBACxB,KADS,KAAK,CAAC,SAAS,CACxB,EAFU,CAEV,EAEC,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,WAAW,KAAK,SAAS,QAAI,uBAAG,gHAAA,oBACrC,EAAiB,sBAC5B,KADW,KAAK,CAAC,WAAW,CAC5B,EAFU,CAEV,CAGN,CAAA","sourcesContent":["import React, { CSSProperties } from 'react'\nimport styled, { css } from 'styled-components'\n\nexport type Props = {\n  id?: string\n  className?: string\n  style?: CSSProperties\n  isAnimated?: boolean\n  fillColor?: string\n  strokeColor?: string\n  svgMarkup: string\n}\n\n/**\n * A component whose root element wraps an SVG markup.\n *\n * @requires react\n * @requires styled-component\n */\nexport default function FlatSVG({\n  id,\n  className,\n  style,\n  isAnimated = false,\n  fillColor,\n  strokeColor,\n  svgMarkup,\n}: Props) {\n  return (\n    <StyledRoot\n      id={id}\n      className={className}\n      dangerouslySetInnerHTML={{ __html: svgMarkup }}\n      isAnimated={isAnimated}\n      fillColor={fillColor}\n      strokeColor={strokeColor}\n      style={style}\n    />\n  )\n}\n\nconst StyledRoot = styled.figure<{\n  fillColor?: string\n  strokeColor?: string\n  isAnimated: boolean\n}>`\n  box-sizing: border-box;\n  display: inline-block;\n  flex: 0 0 auto;\n  height: 100%;\n  position: relative;\n  width: auto;\n\n  > svg {\n    height: 100%;\n    transition-delay: inherit;\n    transition-duration: inherit;\n    transition-property: inherit;\n    transition-timing-function: inherit;\n    width: auto;\n\n    ${props => props.isAnimated && css`\n      transition-property: stroke, fill, transform;\n      transition-duration: 100ms;\n      transition-timing-function: ease-out;\n    `}\n\n    * {\n      transition-delay: inherit;\n      transition-duration: inherit;\n      transition-property: inherit;\n      transition-timing-function: inherit;\n\n      ${props => props.fillColor !== undefined && css`\n        fill: ${props.fillColor} !important;\n      `}\n\n      ${props => props.strokeColor !== undefined && css`\n        stroke: ${props.strokeColor} !important;\n      `}\n    }\n  }\n`\n"]}
+{"version":3,"file":"FlatSVG.js","sourceRoot":"/","sources":["FlatSVG.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAA6C;AAC7C,qEAA+C;AAS/C;;;;;GAKG;AACH,SAAwB,OAAO,CAAC,EAMxB;IALN,IAAA,kBAAkB,EAAlB,UAAU,mBAAG,KAAK,KAAA,EAClB,SAAS,eAAA,EACT,WAAW,iBAAA,EACX,SAAS,eAAA,EACN,KAAK,cALsB,uDAM/B,CADS;IAER,OAAO,CACL,8BAAC,UAAU,aACT,uBAAuB,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,EAC9C,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,WAAW,IACpB,KAAK,EACT,CACH,CAAA;AACH,CAAC;AAhBD,0BAgBC;AAED,IAAM,UAAU,GAAG,2BAAM,CAAC,MAAM,gmBAI9B,4UAgBI,EAID,+KAQG,EAED,YAEC,EAED,gBAGN,KArBK,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,UAAU,QAAI,uBAAG,iNAAA,6IAIjC,IAAA,EAJU,CAIV,EAQG,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,SAAS,KAAK,SAAS,QAAI,uBAAG,8GAAA,kBACrC,EAAe,sBACxB,KADS,KAAK,CAAC,SAAS,CACxB,EAFU,CAEV,EAEC,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,WAAW,KAAK,SAAS,QAAI,uBAAG,gHAAA,oBACrC,EAAiB,sBAC5B,KADW,KAAK,CAAC,WAAW,CAC5B,EAFU,CAEV,CAGN,CAAA","sourcesContent":["import React, { HTMLAttributes } from 'react'\nimport styled, { css } from 'styled-components'\n\nexport type Props = HTMLAttributes<HTMLDivElement> & {\n  isAnimated?: boolean\n  fillColor?: string\n  strokeColor?: string\n  svgMarkup: string\n}\n\n/**\n * A component whose root element wraps an SVG markup.\n *\n * @requires react\n * @requires styled-component\n */\nexport default function FlatSVG({\n  isAnimated = false,\n  fillColor,\n  strokeColor,\n  svgMarkup,\n  ...props\n}: Props) {\n  return (\n    <StyledRoot\n      dangerouslySetInnerHTML={{ __html: svgMarkup }}\n      isAnimated={isAnimated}\n      fillColor={fillColor}\n      strokeColor={strokeColor}\n      {...props}\n    />\n  )\n}\n\nconst StyledRoot = styled.figure<{\n  fillColor?: string\n  strokeColor?: string\n  isAnimated: boolean\n}>`\n  box-sizing: border-box;\n  display: inline-block;\n  flex: 0 0 auto;\n  height: 100%;\n  position: relative;\n  width: auto;\n\n  > svg {\n    height: 100%;\n    transition-delay: inherit;\n    transition-duration: inherit;\n    transition-property: inherit;\n    transition-timing-function: inherit;\n    width: auto;\n\n    ${props => props.isAnimated && css`\n      transition-property: stroke, fill, transform;\n      transition-duration: 100ms;\n      transition-timing-function: ease-out;\n    `}\n\n    * {\n      transition-delay: inherit;\n      transition-duration: inherit;\n      transition-property: inherit;\n      transition-timing-function: inherit;\n\n      ${props => props.fillColor !== undefined && css`\n        fill: ${props.fillColor} !important;\n      `}\n\n      ${props => props.strokeColor !== undefined && css`\n        stroke: ${props.strokeColor} !important;\n      `}\n    }\n  }\n`\n"]}

package/lib/Panorama.d.ts

@@ -1,44 +1,84 @@
-import React, { CSSProperties, PureComponent } from 'react';
-import { Rect, Size } from 'spase';
-export interface Props {
-    className?: string;
-    style: CSSProperties;
-    defaultAngle: number;
-    speed: number;
+import { HTMLAttributes } from 'react';
+import { Size } from 'spase';
+export declare type Props = HTMLAttributes<HTMLDivElement> & {
+    /**
+     * The current angle in degrees, 0.0 - 360.0, inclusive. When angle is 0 or 360, the left bound of
+     * the image is at the center of the component.
+     */
+    angle?: number;
+    /**
+     * The panning speed. This is a multiplier to the number of pixels dragged, i.e. when set to 1,
+     * the image will shift the same amount of pixels that were dragged.
+     */
+    speed?: number;
+    /**
+     * The source URL of the image.
+     */
     src: string;
-    onAngleChange?: (angle: number) => void;
-    onDragEnd?: () => void;
+    /**
+     * A decimal percentage of the component width indicating where 0° should be, i.e. if `zeroAnchor`
+     * is `0`, the `angle` would be 0° when the left edge of the image is at the left edge of the
+     * component.
+     */
+    zeroAnchor?: number;
+    /**
+     * Handler invoked when the changes. This can either be invoked from the `angle` prop being
+     * changed or from the image being dragged.
+     *
+     * @param position - The current position.
+     * @param isDragging - Specifies if the position change is due to dragging.
+     */
+    onPositionChange?: (position: number, isDragging: boolean) => void;
+    /**
+     * Handler invoked when the angle changes.
+     *
+     * @param angle - The current angle.
+     * @param isDragging - Specifies if the angle change is due to dragging.
+     */
+    onAngleChange?: (angle: number, isDragging: boolean) => void;
+    /**
+     * Handler invoked when dragging starts.
+     */
     onDragStart?: () => void;
-    onImageLoad?: (image: HTMLImageElement) => void;
-    onPositionChange?: (position: number) => void;
-}
-export interface State {
-    angle: number;
-    position: number;
-    isDragging: boolean;
-    imageSize: Size;
-}
-export default class Panorama extends PureComponent<Props, State> {
-    static defaultProps: Partial<Props>;
-    nodeRefs: {
-        root: React.RefObject<HTMLDivElement>;
-    };
-    image?: HTMLImageElement;
-    constructor(props: Props);
-    get rect(): Rect;
-    get imageSize(): Size;
-    componentDidMount(): void;
-    componentWillUnmount(): void;
-    componentDidUpdate(prevProps: Props, prevState: State): void;
-    render(): JSX.Element;
-    setAngle(angle: number): void;
-    getImageSize(): Size;
-    getPositionFromAngle(angle: number): number;
-    getAngleFromPosition(position: number): number;
-    resetPosition(): void;
-    private reconfigureInteractivityIfNeeded;
-    private onImageLoad;
-    private onDragStart;
-    private onDragMove;
-    private onDragEnd;
-}
+    /**
+     * Handler invoked when dragging ends.
+     */
+    onDragEnd?: () => void;
+    /**
+     * Handler invoked when the image begins loading.
+     */
+    onImageLoadStart?: () => void;
+    /**
+     * Handler invoked when the image is done loading.
+     *
+     * @param imageElement - The loaded image element.
+     */
+    onImageLoadComplete?: (imageElement: HTMLImageElement) => void;
+    /**
+     * Handler invoked when there is an error loading the image.
+     */
+    onImageLoadError?: () => void;
+    /**
+     * Handler invoked when the image size changes. This is the actual size of the loaded image. When
+     * no images are loaded yet, the size is `undefined`.
+     *
+     * @param size - The actual size of the loaded iamge. If no images are loaded yet, the size is
+     *               `undefined`.
+     */
+    onImageSizeChange?: (size?: Size) => void;
+    /**
+     * Handler invoked when the size of this component changes.
+     *
+     * @param size - The size of this component.
+     */
+    onResize?: (size: Size) => void;
+};
+/**
+ * A component containing a pannable 360° panorama image. The angle supports two-way binding.
+ *
+ * @requires react
+ * @requires styled-component
+ * @requires spase
+ * @requires interactjs
+ */
+export default function Panorama({ angle: externalAngle, speed, src, zeroAnchor, onAngleChange, onPositionChange, onDragStart, onDragEnd, onImageLoadStart, onImageLoadComplete, onImageLoadError, onImageSizeChange, onResize, ...props }: Props): JSX.Element;