@pie-element/hotspot 9.3.4-next.3 → 10.0.0-beta.0

package/lib/hotspot/container.js

@@ -1,292 +1,206 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Container = void 0;
-
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
+exports.default = exports.Container = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _reactKonva = require("react-konva");
-
-var _styles = require("@material-ui/core/styles");
-
-var _renderUi = require("@pie-lib/render-ui");
-
+var _styles = require("@mui/material/styles");
 var _rectangle = _interopRequireDefault(require("./rectangle"));
-
 var _polygon = _interopRequireDefault(require("./polygon"));
-
 var _circle = _interopRequireDefault(require("./circle"));
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-var Container = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2["default"])(Container, _React$Component);
-
-  var _super = _createSuper(Container);
-
-  function Container() {
-    var _this;
-
-    (0, _classCallCheck2["default"])(this, Container);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _super.call.apply(_super, [this].concat(args));
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "correctness", function (isCorrect, isChecked) {
-      return isCorrect ? isChecked : !isChecked;
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getEvaluateText", function (isCorrect, selected) {
+const BaseContainer = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  marginTop: theme.spacing(2),
+  marginBottom: theme.spacing(2),
+  position: 'relative',
+  background: theme.palette.common.white,
+  border: `${theme.spacing(1)} solid ${theme.palette.common.white}`,
+  width: 'fit-content'
+}));
+const ImageContainer = (0, _styles.styled)('div')({
+  position: 'relative',
+  width: 'fit-content'
+});
+const Image = (0, _styles.styled)('img')({
+  alignItems: 'center',
+  display: 'flex',
+  justifyContent: 'center'
+});
+const StyledStage = (0, _styles.styled)(_reactKonva.Stage)({
+  left: 0,
+  top: 0,
+  position: 'absolute'
+});
+class Container extends _react.default.Component {
+  constructor(...args) {
+    super(...args);
+    (0, _defineProperty2.default)(this, "correctness", (isCorrect, isChecked) => isCorrect ? isChecked : !isChecked);
+    (0, _defineProperty2.default)(this, "getEvaluateText", (isCorrect, selected) => {
       if (selected && isCorrect) {
         return 'Correctly\nselected';
       }
-
       if (selected && !isCorrect) {
         return 'Should not have\nbeen selected';
       }
-
       if (!selected && isCorrect) {
         return 'Should have\nbeen selected';
       }
-
       return null;
     });
-    return _this;
   }
-
-  (0, _createClass2["default"])(Container, [{
-    key: "isSelected",
-    value: function isSelected(shape) {
-      var selectedShape = this.props.session.answers.filter(function (answer) {
-        return answer.id === shape.id;
-      })[0];
-      return !!selectedShape;
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-
-      var _this$props = this.props,
-          classes = _this$props.classes,
-          _this$props$dimension = _this$props.dimensions,
-          withProp = _this$props$dimension.width,
-          heightProp = _this$props$dimension.height,
-          disabled = _this$props.disabled,
-          hotspotColor = _this$props.hotspotColor,
-          hoverOutlineColor = _this$props.hoverOutlineColor,
-          selectedHotspotColor = _this$props.selectedHotspotColor,
-          imageUrl = _this$props.imageUrl,
-          isEvaluateMode = _this$props.isEvaluateMode,
-          outlineColor = _this$props.outlineColor,
-          onSelectChoice = _this$props.onSelectChoice,
-          _this$props$shapes = _this$props.shapes,
-          _this$props$shapes$re = _this$props$shapes.rectangles,
-          rectangles = _this$props$shapes$re === void 0 ? [] : _this$props$shapes$re,
-          _this$props$shapes$po = _this$props$shapes.polygons,
-          polygons = _this$props$shapes$po === void 0 ? [] : _this$props$shapes$po,
-          _this$props$shapes$ci = _this$props$shapes.circles,
-          circles = _this$props$shapes$ci === void 0 ? [] : _this$props$shapes$ci,
-          SCALE = _this$props.scale,
-          strokeWidth = _this$props.strokeWidth,
-          showCorrect = _this$props.showCorrect;
-      var width = withProp * SCALE;
-      var height = heightProp * SCALE;
-      return /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.base,
-        style: {
-          padding: strokeWidth / 2
-        }
-      }, imageUrl ? /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.imageContainer
-      }, /*#__PURE__*/_react["default"].createElement("img", {
-        alt: "hotspot-image",
-        className: classes.image,
-        height: "auto",
-        src: imageUrl,
-        style: {
-          width: width,
-          height: height,
-          maxWidth: width,
-          maxHeight: height
-        }
-      })) : null, /*#__PURE__*/_react["default"].createElement(_reactKonva.Stage, {
-        className: classes.stage,
-        height: height + strokeWidth,
-        width: width + strokeWidth,
-        x: strokeWidth / 2,
-        y: strokeWidth / 2
-      }, /*#__PURE__*/_react["default"].createElement(_reactKonva.Layer, null, rectangles.map(function (shape) {
-        var selected = _this2.isSelected(shape);
-
-        var isCorrect = isEvaluateMode ? _this2.correctness(shape.correct, selected) : undefined;
-        var evaluateText = isEvaluateMode ? _this2.getEvaluateText(shape.correct, selected) : null;
-        var markAsCorrect = !!(isEvaluateMode && showCorrect && shape.correct);
-        return /*#__PURE__*/_react["default"].createElement(_rectangle["default"], {
-          scale: SCALE,
-          isEvaluateMode: isEvaluateMode,
-          isCorrect: isCorrect,
-          evaluateText: evaluateText,
-          disabled: disabled,
-          selected: selected,
-          height: shape.height,
-          hotspotColor: hotspotColor,
-          hoverOutlineColor: hoverOutlineColor,
-          selectedHotspotColor: selectedHotspotColor,
-          id: shape.id,
-          key: shape.id,
-          onClick: onSelectChoice,
-          outlineColor: outlineColor,
-          width: shape.width,
-          x: shape.x,
-          y: shape.y,
-          strokeWidth: strokeWidth,
-          markAsCorrect: markAsCorrect,
-          showCorrectEnabled: showCorrect
-        });
-      }), polygons.map(function (polygon) {
-        var selected = _this2.isSelected(polygon);
-
-        var isCorrect = isEvaluateMode ? _this2.correctness(polygon.correct, selected) : undefined;
-        var evaluateText = isEvaluateMode ? _this2.getEvaluateText(polygon.correct, selected) : null;
-        var markAsCorrect = !!(isEvaluateMode && showCorrect && polygon.correct);
-        return /*#__PURE__*/_react["default"].createElement(_polygon["default"], {
-          scale: SCALE,
-          isEvaluateMode: isEvaluateMode,
-          isCorrect: !!isCorrect,
-          evaluateText: evaluateText,
-          disabled: disabled,
-          selected: selected,
-          hotspotColor: hotspotColor,
-          id: polygon.id,
-          key: polygon.id,
-          onClick: onSelectChoice,
-          outlineColor: outlineColor,
-          points: polygon.points,
-          strokeWidth: strokeWidth,
-          markAsCorrect: markAsCorrect,
-          selectedHotspotColor: selectedHotspotColor,
-          hoverOutlineColor: hoverOutlineColor,
-          showCorrectEnabled: showCorrect
-        });
-      }), circles.map(function (shape) {
-        var selected = _this2.isSelected(shape);
-
-        var isCorrect = isEvaluateMode ? _this2.correctness(shape.correct, selected) : undefined;
-        var evaluateText = isEvaluateMode ? _this2.getEvaluateText(shape.correct, selected) : null;
-        var markAsCorrect = !!(isEvaluateMode && showCorrect && shape.correct);
-        return /*#__PURE__*/_react["default"].createElement(_circle["default"], {
-          classes: classes,
-          scale: SCALE,
-          isEvaluateMode: isEvaluateMode,
-          isCorrect: isCorrect,
-          evaluateText: evaluateText,
-          disabled: disabled,
-          selected: selected,
-          radius: shape.radius,
-          hotspotColor: hotspotColor,
-          id: shape.id,
-          key: shape.id,
-          onClick: onSelectChoice,
-          outlineColor: outlineColor,
-          x: shape.x,
-          y: shape.y,
-          strokeWidth: strokeWidth,
-          markAsCorrect: markAsCorrect,
-          selectedHotspotColor: selectedHotspotColor,
-          hoverOutlineColor: hoverOutlineColor,
-          showCorrectEnabled: showCorrect
-        });
-      }))));
-    }
-  }]);
-  return Container;
-}(_react["default"].Component);
-
+  isSelected(shape) {
+    const selectedShape = this.props.session.answers.filter(answer => answer.id === shape.id)[0];
+    return !!selectedShape;
+  }
+  render() {
+    const {
+      dimensions: {
+        width: withProp,
+        height: heightProp
+      },
+      disabled,
+      hotspotColor,
+      hoverOutlineColor,
+      selectedHotspotColor,
+      imageUrl,
+      isEvaluateMode,
+      outlineColor,
+      onSelectChoice,
+      shapes: {
+        rectangles = [],
+        polygons = [],
+        circles = []
+      },
+      scale: SCALE,
+      strokeWidth,
+      showCorrect
+    } = this.props;
+    const width = withProp * SCALE;
+    const height = heightProp * SCALE;
+    return /*#__PURE__*/_react.default.createElement(BaseContainer, {
+      style: {
+        padding: strokeWidth / 2
+      }
+    }, imageUrl ? /*#__PURE__*/_react.default.createElement(ImageContainer, null, /*#__PURE__*/_react.default.createElement(Image, {
+      alt: "hotspot-image",
+      height: "auto",
+      src: imageUrl,
+      style: {
+        width,
+        height,
+        maxWidth: width,
+        maxHeight: height
+      }
+    })) : null, /*#__PURE__*/_react.default.createElement(StyledStage, {
+      height: height + strokeWidth,
+      width: width + strokeWidth,
+      x: strokeWidth / 2,
+      y: strokeWidth / 2
+    }, /*#__PURE__*/_react.default.createElement(_reactKonva.Layer, null, rectangles.map(shape => {
+      const selected = this.isSelected(shape);
+      const isCorrect = isEvaluateMode ? this.correctness(shape.correct, selected) : undefined;
+      const evaluateText = isEvaluateMode ? this.getEvaluateText(shape.correct, selected) : null;
+      const markAsCorrect = !!(isEvaluateMode && showCorrect && shape.correct);
+      return /*#__PURE__*/_react.default.createElement(_rectangle.default, {
+        scale: SCALE,
+        isEvaluateMode: isEvaluateMode,
+        isCorrect: isCorrect,
+        evaluateText: evaluateText,
+        disabled: disabled,
+        selected: selected,
+        height: shape.height,
+        hotspotColor: hotspotColor,
+        hoverOutlineColor: hoverOutlineColor,
+        selectedHotspotColor: selectedHotspotColor,
+        id: shape.id,
+        key: shape.id,
+        onClick: onSelectChoice,
+        outlineColor: outlineColor,
+        width: shape.width,
+        x: shape.x,
+        y: shape.y,
+        strokeWidth: strokeWidth,
+        markAsCorrect: markAsCorrect,
+        showCorrectEnabled: showCorrect
+      });
+    }), polygons.map(polygon => {
+      const selected = this.isSelected(polygon);
+      const isCorrect = isEvaluateMode ? this.correctness(polygon.correct, selected) : undefined;
+      const evaluateText = isEvaluateMode ? this.getEvaluateText(polygon.correct, selected) : null;
+      const markAsCorrect = !!(isEvaluateMode && showCorrect && polygon.correct);
+      return /*#__PURE__*/_react.default.createElement(_polygon.default, {
+        scale: SCALE,
+        isEvaluateMode: isEvaluateMode,
+        isCorrect: !!isCorrect,
+        evaluateText: evaluateText,
+        disabled: disabled,
+        selected: selected,
+        hotspotColor: hotspotColor,
+        id: polygon.id,
+        key: polygon.id,
+        onClick: onSelectChoice,
+        outlineColor: outlineColor,
+        points: polygon.points,
+        strokeWidth: strokeWidth,
+        markAsCorrect: markAsCorrect,
+        selectedHotspotColor: selectedHotspotColor,
+        hoverOutlineColor: hoverOutlineColor,
+        showCorrectEnabled: showCorrect
+      });
+    }), circles.map(shape => {
+      const selected = this.isSelected(shape);
+      const isCorrect = isEvaluateMode ? this.correctness(shape.correct, selected) : undefined;
+      const evaluateText = isEvaluateMode ? this.getEvaluateText(shape.correct, selected) : null;
+      const markAsCorrect = !!(isEvaluateMode && showCorrect && shape.correct);
+      return /*#__PURE__*/_react.default.createElement(_circle.default, {
+        scale: SCALE,
+        isEvaluateMode: isEvaluateMode,
+        isCorrect: isCorrect,
+        evaluateText: evaluateText,
+        disabled: disabled,
+        selected: selected,
+        radius: shape.radius,
+        hotspotColor: hotspotColor,
+        id: shape.id,
+        key: shape.id,
+        onClick: onSelectChoice,
+        outlineColor: outlineColor,
+        x: shape.x,
+        y: shape.y,
+        strokeWidth: strokeWidth,
+        markAsCorrect: markAsCorrect,
+        selectedHotspotColor: selectedHotspotColor,
+        hoverOutlineColor: hoverOutlineColor,
+        showCorrectEnabled: showCorrect
+      });
+    }))));
+  }
+}
 exports.Container = Container;
-
-var styles = function styles(theme) {
-  return {
-    base: {
-      marginTop: theme.spacing.unit * 2,
-      marginBottom: theme.spacing.unit * 2,
-      position: 'relative',
-      background: theme.palette.common.white,
-      border: "".concat(theme.spacing.unit, "px solid ").concat(theme.palette.common.white),
-      width: 'fit-content'
-    },
-    image: {
-      alignItems: 'center',
-      display: 'flex',
-      justifyContent: 'center'
-    },
-    imageContainer: {
-      position: 'relative',
-      width: 'fit-content'
-    },
-    stage: {
-      left: 0,
-      top: 0,
-      position: 'absolute'
-    },
-    resize: {
-      borderBottom: "1px solid ".concat(_renderUi.color.disabled()),
-      borderRight: "1px solid ".concat(_renderUi.color.disabled()),
-      bottom: '-10px',
-      cursor: 'se-resize',
-      height: '10px',
-      position: 'absolute',
-      right: '-10px',
-      width: '10px'
-    }
-  };
-};
-
 Container.propTypes = {
-  classes: _propTypes["default"].object.isRequired,
-  dimensions: _propTypes["default"].object.isRequired,
-  disabled: _propTypes["default"].bool.isRequired,
-  hotspotColor: _propTypes["default"].string.isRequired,
-  hoverOutlineColor: _propTypes["default"].string,
-  imageUrl: _propTypes["default"].string.isRequired,
-  isEvaluateMode: _propTypes["default"].bool.isRequired,
-  onSelectChoice: _propTypes["default"].func.isRequired,
-  outlineColor: _propTypes["default"].string.isRequired,
-  selectedHotspotColor: _propTypes["default"].string,
-  session: _propTypes["default"].object.isRequired,
-  shapes: _propTypes["default"].object.isRequired,
-  strokeWidth: _propTypes["default"].number,
-  scale: _propTypes["default"].number,
-  showCorrect: _propTypes["default"].bool
+  dimensions: _propTypes.default.object.isRequired,
+  disabled: _propTypes.default.bool.isRequired,
+  hotspotColor: _propTypes.default.string.isRequired,
+  hoverOutlineColor: _propTypes.default.string,
+  imageUrl: _propTypes.default.string.isRequired,
+  isEvaluateMode: _propTypes.default.bool.isRequired,
+  onSelectChoice: _propTypes.default.func.isRequired,
+  outlineColor: _propTypes.default.string.isRequired,
+  selectedHotspotColor: _propTypes.default.string,
+  session: _propTypes.default.object.isRequired,
+  shapes: _propTypes.default.object.isRequired,
+  strokeWidth: _propTypes.default.number,
+  scale: _propTypes.default.number,
+  showCorrect: _propTypes.default.bool
 };
 Container.defaultProps = {
   scale: 1
 };
-
-var _default = (0, _styles.withStyles)(styles)(Container);
-
-exports["default"] = _default;
+var _default = exports.default = Container;
 //# sourceMappingURL=container.js.map

package/lib/hotspot/container.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/hotspot/container.jsx"],"names":["Container","isCorrect","isChecked","selected","shape","selectedShape","props","session","answers","filter","answer","id","classes","dimensions","withProp","width","heightProp","height","disabled","hotspotColor","hoverOutlineColor","selectedHotspotColor","imageUrl","isEvaluateMode","outlineColor","onSelectChoice","shapes","rectangles","polygons","circles","SCALE","scale","strokeWidth","showCorrect","base","padding","imageContainer","image","maxWidth","maxHeight","stage","map","isSelected","correctness","correct","undefined","evaluateText","getEvaluateText","markAsCorrect","x","y","polygon","points","radius","React","Component","styles","theme","marginTop","spacing","unit","marginBottom","position","background","palette","common","white","border","alignItems","display","justifyContent","left","top","resize","borderBottom","color","borderRight","bottom","cursor","right","propTypes","PropTypes","object","isRequired","bool","string","func","number","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Layer, Stage } from 'react-konva';\nimport { withStyles } from '@material-ui/core/styles';\nimport { color } from '@pie-lib/render-ui';\n\nimport Rectangle from './rectangle';\nimport Polygon from './polygon';\nimport Circle from './circle';\n\nexport class Container extends React.Component {\n  isSelected(shape) {\n    const selectedShape = this.props.session.answers.filter((answer) => answer.id === shape.id)[0];\n    return !!selectedShape;\n  }\n\n  correctness = (isCorrect, isChecked) => (isCorrect ? isChecked : !isChecked);\n\n  getEvaluateText = (isCorrect, selected) => {\n    if (selected && isCorrect) {\n      return 'Correctly\\nselected';\n    }\n\n    if (selected && !isCorrect) {\n      return 'Should not have\\nbeen selected';\n    }\n\n    if (!selected && isCorrect) {\n      return 'Should have\\nbeen selected';\n    }\n\n    return null;\n  };\n\n  render() {\n    const {\n      classes,\n      dimensions: { width: withProp, height: heightProp },\n      disabled,\n      hotspotColor,\n      hoverOutlineColor,\n      selectedHotspotColor,\n      imageUrl,\n      isEvaluateMode,\n      outlineColor,\n      onSelectChoice,\n      shapes: { rectangles = [], polygons = [], circles = [] },\n      scale: SCALE,\n      strokeWidth,\n      showCorrect,\n    } = this.props;\n\n    const width = withProp * SCALE;\n    const height = heightProp * SCALE;\n\n    return (\n      <div className={classes.base} style={{ padding: strokeWidth / 2 }}>\n        {imageUrl ? (\n          <div className={classes.imageContainer}>\n            <img\n              alt=\"hotspot-image\"\n              className={classes.image}\n              height=\"auto\"\n              src={imageUrl}\n              style={{ width, height, maxWidth: width, maxHeight: height }}\n            />\n          </div>\n        ) : null}\n\n        <Stage\n          className={classes.stage}\n          height={height + strokeWidth}\n          width={width + strokeWidth}\n          x={strokeWidth / 2}\n          y={strokeWidth / 2}\n        >\n          <Layer>\n            {rectangles.map((shape) => {\n              const selected = this.isSelected(shape);\n              const isCorrect = isEvaluateMode ? this.correctness(shape.correct, selected) : undefined;\n              const evaluateText = isEvaluateMode ? this.getEvaluateText(shape.correct, selected) : null;\n              const markAsCorrect = !!(isEvaluateMode && showCorrect && shape.correct);\n\n              return (\n                <Rectangle\n                  scale={SCALE}\n                  isEvaluateMode={isEvaluateMode}\n                  isCorrect={isCorrect}\n                  evaluateText={evaluateText}\n                  disabled={disabled}\n                  selected={selected}\n                  height={shape.height}\n                  hotspotColor={hotspotColor}\n                  hoverOutlineColor={hoverOutlineColor}\n                  selectedHotspotColor={selectedHotspotColor}\n                  id={shape.id}\n                  key={shape.id}\n                  onClick={onSelectChoice}\n                  outlineColor={outlineColor}\n                  width={shape.width}\n                  x={shape.x}\n                  y={shape.y}\n                  strokeWidth={strokeWidth}\n                  markAsCorrect={markAsCorrect}\n                  showCorrectEnabled={showCorrect}\n                />\n              );\n            })}\n            {polygons.map((polygon) => {\n              const selected = this.isSelected(polygon);\n              const isCorrect = isEvaluateMode ? this.correctness(polygon.correct, selected) : undefined;\n              const evaluateText = isEvaluateMode ? this.getEvaluateText(polygon.correct, selected) : null;\n              const markAsCorrect = !!(isEvaluateMode && showCorrect && polygon.correct);\n\n              return (\n                <Polygon\n                  scale={SCALE}\n                  isEvaluateMode={isEvaluateMode}\n                  isCorrect={!!isCorrect}\n                  evaluateText={evaluateText}\n                  disabled={disabled}\n                  selected={selected}\n                  hotspotColor={hotspotColor}\n                  id={polygon.id}\n                  key={polygon.id}\n                  onClick={onSelectChoice}\n                  outlineColor={outlineColor}\n                  points={polygon.points}\n                  strokeWidth={strokeWidth}\n                  markAsCorrect={markAsCorrect}\n                  selectedHotspotColor={selectedHotspotColor}\n                  hoverOutlineColor={hoverOutlineColor}\n                  showCorrectEnabled={showCorrect}\n                />\n              );\n            })}\n            {circles.map((shape) => {\n              const selected = this.isSelected(shape);\n              const isCorrect = isEvaluateMode ? this.correctness(shape.correct, selected) : undefined;\n              const evaluateText = isEvaluateMode ? this.getEvaluateText(shape.correct, selected) : null;\n              const markAsCorrect = !!(isEvaluateMode && showCorrect && shape.correct);\n\n              return (\n                <Circle\n                  classes={classes}\n                  scale={SCALE}\n                  isEvaluateMode={isEvaluateMode}\n                  isCorrect={isCorrect}\n                  evaluateText={evaluateText}\n                  disabled={disabled}\n                  selected={selected}\n                  radius={shape.radius}\n                  hotspotColor={hotspotColor}\n                  id={shape.id}\n                  key={shape.id}\n                  onClick={onSelectChoice}\n                  outlineColor={outlineColor}\n                  x={shape.x}\n                  y={shape.y}\n                  strokeWidth={strokeWidth}\n                  markAsCorrect={markAsCorrect}\n                  selectedHotspotColor={selectedHotspotColor}\n                  hoverOutlineColor={hoverOutlineColor}\n                  showCorrectEnabled={showCorrect}\n                />\n              );\n            })}\n          </Layer>\n        </Stage>\n      </div>\n    );\n  }\n}\n\nconst styles = (theme) => ({\n  base: {\n    marginTop: theme.spacing.unit * 2,\n    marginBottom: theme.spacing.unit * 2,\n    position: 'relative',\n    background: theme.palette.common.white,\n    border: `${theme.spacing.unit}px solid ${theme.palette.common.white}`,\n    width: 'fit-content',\n  },\n  image: {\n    alignItems: 'center',\n    display: 'flex',\n    justifyContent: 'center',\n  },\n  imageContainer: {\n    position: 'relative',\n    width: 'fit-content',\n  },\n  stage: {\n    left: 0,\n    top: 0,\n    position: 'absolute',\n  },\n  resize: {\n    borderBottom: `1px solid ${color.disabled()}`,\n    borderRight: `1px solid ${color.disabled()}`,\n    bottom: '-10px',\n    cursor: 'se-resize',\n    height: '10px',\n    position: 'absolute',\n    right: '-10px',\n    width: '10px',\n  },\n});\n\nContainer.propTypes = {\n  classes: PropTypes.object.isRequired,\n  dimensions: PropTypes.object.isRequired,\n  disabled: PropTypes.bool.isRequired,\n  hotspotColor: PropTypes.string.isRequired,\n  hoverOutlineColor: PropTypes.string,\n  imageUrl: PropTypes.string.isRequired,\n  isEvaluateMode: PropTypes.bool.isRequired,\n  onSelectChoice: PropTypes.func.isRequired,\n  outlineColor: PropTypes.string.isRequired,\n  selectedHotspotColor: PropTypes.string,\n  session: PropTypes.object.isRequired,\n  shapes: PropTypes.object.isRequired,\n  strokeWidth: PropTypes.number,\n  scale: PropTypes.number,\n  showCorrect: PropTypes.bool,\n};\n\nContainer.defaultProps = {\n  scale: 1,\n};\n\nexport default withStyles(styles)(Container);\n"],"file":"container.js"}
+{"version":3,"file":"container.js","names":["_react","_interopRequireDefault","require","_propTypes","_reactKonva","_styles","_rectangle","_polygon","_circle","BaseContainer","styled","theme","marginTop","spacing","marginBottom","position","background","palette","common","white","border","width","ImageContainer","Image","alignItems","display","justifyContent","StyledStage","Stage","left","top","Container","React","Component","constructor","args","_defineProperty2","default","isCorrect","isChecked","selected","isSelected","shape","selectedShape","props","session","answers","filter","answer","id","render","dimensions","withProp","height","heightProp","disabled","hotspotColor","hoverOutlineColor","selectedHotspotColor","imageUrl","isEvaluateMode","outlineColor","onSelectChoice","shapes","rectangles","polygons","circles","scale","SCALE","strokeWidth","showCorrect","createElement","style","padding","alt","src","maxWidth","maxHeight","x","y","Layer","map","correctness","correct","undefined","evaluateText","getEvaluateText","markAsCorrect","key","onClick","showCorrectEnabled","polygon","points","radius","exports","propTypes","PropTypes","object","isRequired","bool","string","func","number","defaultProps","_default"],"sources":["../../src/hotspot/container.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Layer, Stage } from 'react-konva';\nimport { styled } from '@mui/material/styles';\n\nimport Rectangle from './rectangle';\nimport Polygon from './polygon';\nimport Circle from './circle';\n\nconst BaseContainer = styled('div')(({ theme }) => ({\n  marginTop: theme.spacing(2),\n  marginBottom: theme.spacing(2),\n  position: 'relative',\n  background: theme.palette.common.white,\n  border: `${theme.spacing(1)} solid ${theme.palette.common.white}`,\n  width: 'fit-content',\n}));\n\nconst ImageContainer = styled('div')({\n  position: 'relative',\n  width: 'fit-content',\n});\n\nconst Image = styled('img')({\n  alignItems: 'center',\n  display: 'flex',\n  justifyContent: 'center',\n});\n\nconst StyledStage = styled(Stage)({\n  left: 0,\n  top: 0,\n  position: 'absolute',\n});\n\nexport class Container extends React.Component {\n  isSelected(shape) {\n    const selectedShape = this.props.session.answers.filter((answer) => answer.id === shape.id)[0];\n    return !!selectedShape;\n  }\n\n  correctness = (isCorrect, isChecked) => (isCorrect ? isChecked : !isChecked);\n\n  getEvaluateText = (isCorrect, selected) => {\n    if (selected && isCorrect) {\n      return 'Correctly\\nselected';\n    }\n\n    if (selected && !isCorrect) {\n      return 'Should not have\\nbeen selected';\n    }\n\n    if (!selected && isCorrect) {\n      return 'Should have\\nbeen selected';\n    }\n\n    return null;\n  };\n\n  render() {\n    const {\n      dimensions: { width: withProp, height: heightProp },\n      disabled,\n      hotspotColor,\n      hoverOutlineColor,\n      selectedHotspotColor,\n      imageUrl,\n      isEvaluateMode,\n      outlineColor,\n      onSelectChoice,\n      shapes: { rectangles = [], polygons = [], circles = [] },\n      scale: SCALE,\n      strokeWidth,\n      showCorrect,\n    } = this.props;\n\n    const width = withProp * SCALE;\n    const height = heightProp * SCALE;\n\n    return (\n      <BaseContainer style={{ padding: strokeWidth / 2 }}>\n        {imageUrl ? (\n          <ImageContainer>\n            <Image\n              alt=\"hotspot-image\"\n              height=\"auto\"\n              src={imageUrl}\n              style={{ width, height, maxWidth: width, maxHeight: height }}\n            />\n          </ImageContainer>\n        ) : null}\n\n        <StyledStage\n          height={height + strokeWidth}\n          width={width + strokeWidth}\n          x={strokeWidth / 2}\n          y={strokeWidth / 2}\n        >\n          <Layer>\n            {rectangles.map((shape) => {\n              const selected = this.isSelected(shape);\n              const isCorrect = isEvaluateMode ? this.correctness(shape.correct, selected) : undefined;\n              const evaluateText = isEvaluateMode ? this.getEvaluateText(shape.correct, selected) : null;\n              const markAsCorrect = !!(isEvaluateMode && showCorrect && shape.correct);\n\n              return (\n                <Rectangle\n                  scale={SCALE}\n                  isEvaluateMode={isEvaluateMode}\n                  isCorrect={isCorrect}\n                  evaluateText={evaluateText}\n                  disabled={disabled}\n                  selected={selected}\n                  height={shape.height}\n                  hotspotColor={hotspotColor}\n                  hoverOutlineColor={hoverOutlineColor}\n                  selectedHotspotColor={selectedHotspotColor}\n                  id={shape.id}\n                  key={shape.id}\n                  onClick={onSelectChoice}\n                  outlineColor={outlineColor}\n                  width={shape.width}\n                  x={shape.x}\n                  y={shape.y}\n                  strokeWidth={strokeWidth}\n                  markAsCorrect={markAsCorrect}\n                  showCorrectEnabled={showCorrect}\n                />\n              );\n            })}\n            {polygons.map((polygon) => {\n              const selected = this.isSelected(polygon);\n              const isCorrect = isEvaluateMode ? this.correctness(polygon.correct, selected) : undefined;\n              const evaluateText = isEvaluateMode ? this.getEvaluateText(polygon.correct, selected) : null;\n              const markAsCorrect = !!(isEvaluateMode && showCorrect && polygon.correct);\n\n              return (\n                <Polygon\n                  scale={SCALE}\n                  isEvaluateMode={isEvaluateMode}\n                  isCorrect={!!isCorrect}\n                  evaluateText={evaluateText}\n                  disabled={disabled}\n                  selected={selected}\n                  hotspotColor={hotspotColor}\n                  id={polygon.id}\n                  key={polygon.id}\n                  onClick={onSelectChoice}\n                  outlineColor={outlineColor}\n                  points={polygon.points}\n                  strokeWidth={strokeWidth}\n                  markAsCorrect={markAsCorrect}\n                  selectedHotspotColor={selectedHotspotColor}\n                  hoverOutlineColor={hoverOutlineColor}\n                  showCorrectEnabled={showCorrect}\n                />\n              );\n            })}\n            {circles.map((shape) => {\n              const selected = this.isSelected(shape);\n              const isCorrect = isEvaluateMode ? this.correctness(shape.correct, selected) : undefined;\n              const evaluateText = isEvaluateMode ? this.getEvaluateText(shape.correct, selected) : null;\n              const markAsCorrect = !!(isEvaluateMode && showCorrect && shape.correct);\n\n              return (\n                <Circle\n                  scale={SCALE}\n                  isEvaluateMode={isEvaluateMode}\n                  isCorrect={isCorrect}\n                  evaluateText={evaluateText}\n                  disabled={disabled}\n                  selected={selected}\n                  radius={shape.radius}\n                  hotspotColor={hotspotColor}\n                  id={shape.id}\n                  key={shape.id}\n                  onClick={onSelectChoice}\n                  outlineColor={outlineColor}\n                  x={shape.x}\n                  y={shape.y}\n                  strokeWidth={strokeWidth}\n                  markAsCorrect={markAsCorrect}\n                  selectedHotspotColor={selectedHotspotColor}\n                  hoverOutlineColor={hoverOutlineColor}\n                  showCorrectEnabled={showCorrect}\n                />\n              );\n            })}\n          </Layer>\n        </StyledStage>\n      </BaseContainer>\n    );\n  }\n}\n\nContainer.propTypes = {\n  dimensions: PropTypes.object.isRequired,\n  disabled: PropTypes.bool.isRequired,\n  hotspotColor: PropTypes.string.isRequired,\n  hoverOutlineColor: PropTypes.string,\n  imageUrl: PropTypes.string.isRequired,\n  isEvaluateMode: PropTypes.bool.isRequired,\n  onSelectChoice: PropTypes.func.isRequired,\n  outlineColor: PropTypes.string.isRequired,\n  selectedHotspotColor: PropTypes.string,\n  session: PropTypes.object.isRequired,\n  shapes: PropTypes.object.isRequired,\n  strokeWidth: PropTypes.number,\n  scale: PropTypes.number,\n  showCorrect: PropTypes.bool,\n};\n\nContainer.defaultProps = {\n  scale: 1,\n};\n\nexport default Container;\n"],"mappings":"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","ignoreList":[]}