@pie-element/hotspot 5.7.1-beta.1 → 5.7.1-beta.4

package/configure/lib/hotspot-drawable.js

@@ -0,0 +1,397 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Drawable = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+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"));
+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 _max = _interopRequireDefault(require("lodash/max"));
+var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));
+var _index = require("@material-ui/core/styles/index");
+var _hotspotRectangle = _interopRequireDefault(require("./hotspot-rectangle"));
+var _hotspotPolygon = _interopRequireDefault(require("./hotspot-polygon"));
+var _utils = require("./utils");
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+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 IMAGE_MAX_WIDTH = 800;
+var Drawable = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2["default"])(Drawable, _React$Component);
+  var _super = _createSuper(Drawable);
+  function Drawable(props) {
+    var _this;
+    (0, _classCallCheck2["default"])(this, Drawable);
+    _this = _super.call(this, props);
+    /// start of handling HotSpots section
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleOnMouseDown", function (e) {
+      if (e.target === e.currentTarget) {
+        var _this$props = _this.props,
+          onUpdateShapes = _this$props.onUpdateShapes,
+          shapes = _this$props.shapes;
+        // Add a new rectangle at the mouse position with 0 width and height
+        var newShapes = shapes.slice();
+        var value = (0, _max["default"])(newShapes.map(function (c) {
+          return parseInt(c.id);
+        }).filter(function (id) {
+          return !isNaN(id);
+        })) || 0;
+        newShapes.push({
+          id: "".concat(value + 1),
+          height: 0,
+          width: 0,
+          x: e.evt.layerX,
+          y: e.evt.layerY,
+          group: 'rectangles',
+          index: shapes.length
+        });
+        _this.setState({
+          isDrawing: true,
+          isDrawingShapeId: "".concat(value + 1)
+        });
+        onUpdateShapes(newShapes);
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleOnMouseUp", function () {
+      // !IMPORTANT: currently, only 'rectangles' are drawable
+      var _this$state = _this.state,
+        isDrawing = _this$state.isDrawing,
+        stateShapes = _this$state.stateShapes;
+      var onUpdateShapes = _this.props.onUpdateShapes;
+
+      // If we're drawing a shape, a click finishes the drawing and sends the new shapes to HOC
+      if (isDrawing) {
+        _this.setState({
+          isDrawing: !isDrawing,
+          stateShapes: false,
+          isDrawingShapeId: undefined
+        });
+        if (stateShapes) {
+          onUpdateShapes(stateShapes);
+        }
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleMouseMove", function (e) {
+      // !IMPORTANT: currently, only 'rectangles' are drawable
+      var _this$state2 = _this.state,
+        isDrawing = _this$state2.isDrawing,
+        isDrawingShapeId = _this$state2.isDrawingShapeId;
+      var shapes = _this.props.shapes;
+      if (isDrawing && isDrawingShapeId) {
+        var mouseX = e.evt.layerX;
+        var mouseY = e.evt.layerY;
+        var currShapeIndex = shapes.findIndex(function (shape) {
+          return shape.id === isDrawingShapeId;
+        });
+        var currShape = shapes[currShapeIndex];
+        if (currShape) {
+          var newWidth = mouseX - currShape.x;
+          var newHeight = mouseY - currShape.y;
+          var newShapesList = shapes.slice();
+          newShapesList[currShapeIndex] = _objectSpread(_objectSpread({}, newShapesList[currShapeIndex]), {}, {
+            height: newHeight,
+            width: newWidth,
+            x: currShape.x,
+            y: currShape.y
+          });
+
+          // On mouse move don't trigger any event. Put the shapes on this state instead.
+          _this.setState({
+            stateShapes: newShapesList
+          });
+        }
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleOnDragEnd", function (id, updatedProps) {
+      var _this$props2 = _this.props,
+        shapes = _this$props2.shapes,
+        onUpdateShapes = _this$props2.onUpdateShapes;
+      var newShapes = shapes.map(function (shape) {
+        if (shape.id === id) {
+          return _objectSpread(_objectSpread({}, shape), updatedProps);
+        }
+        return shape;
+      });
+      onUpdateShapes((0, _cloneDeep["default"])(newShapes));
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleOnSetAsCorrect", function (shape) {
+      var id = shape.id;
+      var _this$props3 = _this.props,
+        multipleCorrect = _this$props3.multipleCorrect,
+        shapes = _this$props3.shapes,
+        onUpdateShapes = _this$props3.onUpdateShapes;
+      var newShapes = [];
+      if (multipleCorrect) {
+        newShapes = shapes.map(function (shape) {
+          if (shape.id === id) {
+            shape.correct = !shape.correct;
+          }
+          return shape;
+        });
+      } else {
+        newShapes = shapes.map(function (shape) {
+          shape.correct = shape.id === id;
+          return shape;
+        });
+      }
+      onUpdateShapes((0, _cloneDeep["default"])(newShapes));
+    });
+    /// end of handling HotSpots section
+    /// start of handling Image section
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleOnImageLoad", function (_ref) {
+      var target = _ref.target;
+      var onUpdateImageDimension = _this.props.onUpdateImageDimension;
+      var resizeHandle = _this.resize;
+      var elementStyle = getComputedStyle(target);
+      var newHeight = parseFloat(elementStyle.height);
+      var newWidth = parseFloat(elementStyle.width);
+      var aspectWidth = newWidth / IMAGE_MAX_WIDTH;
+      var dimensions = newWidth > IMAGE_MAX_WIDTH ? {
+        height: newHeight / aspectWidth,
+        width: IMAGE_MAX_WIDTH
+      } : {
+        height: newHeight,
+        width: newWidth
+      };
+      _this.setState({
+        dimensions: dimensions
+      }, function () {
+        return onUpdateImageDimension(dimensions);
+      });
+      resizeHandle.addEventListener('mousedown', _this.initialiseResize, false);
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "initialiseResize", function () {
+      window.addEventListener('mousemove', _this.startResizing, false);
+      window.addEventListener('mouseup', _this.stopResizing, false);
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "startResizing", function (e) {
+      var bounds = e.target.getBoundingClientRect();
+      var box = _this.image;
+      var _this$props4 = _this.props,
+        disableDrag = _this$props4.disableDrag,
+        preserveAspectRatioEnabled = _this$props4.preserveAspectRatioEnabled,
+        dimensions = _this$props4.dimensions,
+        shapes = _this$props4.shapes;
+
+      // todo previously we had state.dimensions, is it needed?
+      var _updateImageDimension = (0, _utils.updateImageDimensions)(dimensions, {
+          width: e.clientX - bounds.left,
+          height: e.clientY - bounds.top
+        }, preserveAspectRatioEnabled),
+        width = _updateImageDimension.width,
+        height = _updateImageDimension.height;
+      var resizeValid = _this.checkIfResizeValid(width, height);
+      var hasMinimumWidth = width > 150 && height > 150;
+      if (resizeValid && hasMinimumWidth && box) {
+        box.style.width = "".concat(width, "px");
+        box.style.height = "".concat(height, "px");
+        _this.setState({
+          resizing: true,
+          dimensions: {
+            height: height,
+            width: width
+          },
+          stateShapes: (0, _utils.getUpdatedShapes)(dimensions, {
+            width: width,
+            height: height
+          }, shapes)
+        });
+      }
+      disableDrag();
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "stopResizing", function () {
+      var _this$props5 = _this.props,
+        enableDrag = _this$props5.enableDrag,
+        onUpdateImageDimension = _this$props5.onUpdateImageDimension,
+        onUpdateShapes = _this$props5.onUpdateShapes;
+      var _this$state3 = _this.state,
+        dimensions = _this$state3.dimensions,
+        stateShapes = _this$state3.stateShapes;
+      enableDrag();
+      if (stateShapes) {
+        onUpdateShapes((0, _cloneDeep["default"])(stateShapes));
+      }
+      onUpdateImageDimension(dimensions);
+      window.removeEventListener('mousemove', _this.startResizing, false);
+      window.removeEventListener('mouseup', _this.stopResizing, false);
+      _this.setState({
+        resizing: false,
+        stateShapes: false
+      });
+    });
+    _this.state = {
+      isDrawing: false,
+      stateShapes: false,
+      resizing: false,
+      dimensions: {
+        height: 0,
+        width: 0
+      }
+    };
+    return _this;
+  }
+  (0, _createClass2["default"])(Drawable, [{
+    key: "checkIfResizeValid",
+    value: function checkIfResizeValid(x, y) {
+      var shapes = this.state.shapes;
+      var drawable = true;
+
+      // Do not allow resizing over the hotspots
+      shapes && shapes.forEach(function (shape) {
+        var right = shape.x + shape.width + 5;
+        var bottom = shape.y + shape.height + 5;
+        if (x <= right || y <= bottom) {
+          drawable = false;
+        }
+      });
+      return drawable;
+    }
+  }, {
+    key: "render",
+    value:
+    /// end of handling Image section
+
+    function render() {
+      var _this2 = this;
+      var _this$props6 = this.props,
+        classes = _this$props6.classes,
+        imageUrl = _this$props6.imageUrl,
+        _this$props6$dimensio = _this$props6.dimensions,
+        height = _this$props6$dimensio.height,
+        width = _this$props6$dimensio.width,
+        hotspotColor = _this$props6.hotspotColor,
+        outlineColor = _this$props6.outlineColor,
+        shapes = _this$props6.shapes,
+        strokeWidth = _this$props6.strokeWidth;
+      var _this$state4 = this.state,
+        stateShapes = _this$state4.stateShapes,
+        isDrawing = _this$state4.isDrawing,
+        _this$state4$dimensio = _this$state4.dimensions,
+        heightFromState = _this$state4$dimensio.height,
+        widthFromState = _this$state4$dimensio.width;
+      var shapesToUse = stateShapes || shapes;
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.base
+      }, imageUrl && /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.imageContainer
+      }, /*#__PURE__*/_react["default"].createElement("img", (0, _extends2["default"])({
+        className: classes.image,
+        onLoad: this.handleOnImageLoad,
+        ref: function ref(_ref2) {
+          _this2.image = _ref2;
+        },
+        src: imageUrl
+      }, height && width ? {
+        style: {
+          height: height,
+          width: width
+        }
+      } : {})), /*#__PURE__*/_react["default"].createElement("div", {
+        ref: function ref(_ref3) {
+          _this2.resize = _ref3;
+        },
+        className: classes.resize
+      })), /*#__PURE__*/_react["default"].createElement(_reactKonva.Stage, {
+        className: classes.stage,
+        height: heightFromState || height,
+        width: widthFromState || width,
+        onMouseDown: this.handleOnMouseDown,
+        onMouseUp: this.handleOnMouseUp,
+        onMouseMove: this.handleMouseMove
+      }, /*#__PURE__*/_react["default"].createElement(_reactKonva.Layer, null, shapesToUse.map(function (shape, index) {
+        var Tag = shape.group === 'polygons' ? _hotspotPolygon["default"] : _hotspotRectangle["default"];
+        return /*#__PURE__*/_react["default"].createElement(Tag, {
+          correct: shape.correct,
+          isDrawing: isDrawing,
+          height: shape.height,
+          hotspotColor: hotspotColor,
+          id: shape.id,
+          key: index,
+          onClick: function onClick() {
+            return _this2.handleOnSetAsCorrect(shape);
+          },
+          onDragEnd: _this2.handleOnDragEnd,
+          outlineColor: outlineColor,
+          width: shape.width,
+          x: shape.x,
+          y: shape.y,
+          points: shape.points,
+          strokeWidth: strokeWidth
+        });
+      }))));
+    }
+  }], [{
+    key: "getDerivedStateFromProps",
+    value: function getDerivedStateFromProps(nextProps, prevState) {
+      var dimensions = nextProps.dimensions;
+      if (prevState && prevState.resizing) {
+        dimensions = prevState.dimensions;
+      }
+      return _objectSpread(_objectSpread({}, prevState), {}, {
+        dimensions: dimensions
+      });
+    }
+  }]);
+  return Drawable;
+}(_react["default"].Component);
+exports.Drawable = Drawable;
+var styles = function styles() {
+  return {
+    base: {
+      position: 'relative'
+    },
+    image: {
+      alignItems: 'center',
+      display: 'flex',
+      justifyContent: 'center'
+    },
+    imageContainer: {
+      position: 'relative',
+      width: 'fit-content'
+    },
+    resize: {
+      borderBottom: '1px solid #727272',
+      borderRight: '1px solid #727272',
+      bottom: '-10px',
+      cursor: 'se-resize',
+      height: '10px',
+      position: 'absolute',
+      right: '-10px',
+      width: '10px'
+    },
+    stage: {
+      left: 0,
+      top: 0,
+      position: 'absolute'
+    }
+  };
+};
+Drawable.propTypes = {
+  classes: _propTypes["default"].object.isRequired,
+  disableDrag: _propTypes["default"].func.isRequired,
+  dimensions: _propTypes["default"].object.isRequired,
+  enableDrag: _propTypes["default"].func.isRequired,
+  imageUrl: _propTypes["default"].string.isRequired,
+  hotspotColor: _propTypes["default"].string.isRequired,
+  multipleCorrect: _propTypes["default"].bool.isRequired,
+  onUpdateImageDimension: _propTypes["default"].func.isRequired,
+  onUpdateShapes: _propTypes["default"].func.isRequired,
+  outlineColor: _propTypes["default"].string.isRequired,
+  shapes: _propTypes["default"].array.isRequired,
+  strokeWidth: _propTypes["default"].number,
+  preserveAspectRatioEnabled: _propTypes["default"].bool
+};
+var _default = (0, _index.withStyles)(styles)(Drawable);
+exports["default"] = _default;
+//# sourceMappingURL=hotspot-drawable.js.map

package/configure/lib/hotspot-drawable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hotspot-drawable.js","names":["_react","_interopRequireDefault","require","_propTypes","_reactKonva","_max","_cloneDeep","_index","_hotspotRectangle","_hotspotPolygon","_utils","ownKeys","object","enumerableOnly","keys","Object","getOwnPropertySymbols","symbols","filter","sym","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","target","i","arguments","length","source","forEach","key","_defineProperty2","getOwnPropertyDescriptors","defineProperties","defineProperty","_createSuper","Derived","hasNativeReflectConstruct","_isNativeReflectConstruct","_createSuperInternal","Super","_getPrototypeOf2","result","NewTarget","constructor","Reflect","construct","_possibleConstructorReturn2","sham","Proxy","Boolean","prototype","valueOf","call","e","IMAGE_MAX_WIDTH","Drawable","_React$Component","_inherits2","_super","props","_this","_classCallCheck2","_assertThisInitialized2","currentTarget","_this$props","onUpdateShapes","shapes","newShapes","slice","value","max","map","c","parseInt","id","isNaN","concat","height","width","x","evt","layerX","y","layerY","group","index","setState","isDrawing","isDrawingShapeId","_this$state","state","stateShapes","undefined","_this$state2","mouseX","mouseY","currShapeIndex","findIndex","shape","currShape","newWidth","newHeight","newShapesList","updatedProps","_this$props2","cloneDeep","_this$props3","multipleCorrect","correct","_ref","onUpdateImageDimension","resizeHandle","resize","elementStyle","getComputedStyle","parseFloat","aspectWidth","dimensions","addEventListener","initialiseResize","window","startResizing","stopResizing","bounds","getBoundingClientRect","box","image","_this$props4","disableDrag","preserveAspectRatioEnabled","_updateImageDimension","updateImageDimensions","clientX","left","clientY","top","resizeValid","checkIfResizeValid","hasMinimumWidth","style","resizing","getUpdatedShapes","_this$props5","enableDrag","_this$state3","removeEventListener","_createClass2","drawable","right","bottom","render","_this2","_this$props6","classes","imageUrl","_this$props6$dimensio","hotspotColor","outlineColor","strokeWidth","_this$state4","_this$state4$dimensio","heightFromState","widthFromState","shapesToUse","createElement","className","base","imageContainer","_extends2","onLoad","handleOnImageLoad","ref","src","Stage","stage","onMouseDown","handleOnMouseDown","onMouseUp","handleOnMouseUp","onMouseMove","handleMouseMove","Layer","Tag","Polygon","Rectangle","onClick","handleOnSetAsCorrect","onDragEnd","handleOnDragEnd","points","getDerivedStateFromProps","nextProps","prevState","React","Component","exports","styles","position","alignItems","display","justifyContent","borderBottom","borderRight","cursor","propTypes","PropTypes","isRequired","func","string","bool","array","number","_default","withStyles"],"sources":["../src/hotspot-drawable.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Layer, Stage } from 'react-konva';\nimport max from 'lodash/max';\nimport cloneDeep from 'lodash/cloneDeep';\nimport { withStyles } from '@material-ui/core/styles/index';\n\nimport Rectangle from './hotspot-rectangle';\nimport Polygon from './hotspot-polygon';\nimport { updateImageDimensions, getUpdatedShapes } from './utils';\n\nconst IMAGE_MAX_WIDTH = 800;\n\nexport class Drawable extends React.Component {\n  static getDerivedStateFromProps(nextProps, prevState) {\n    let dimensions = nextProps.dimensions;\n\n    if (prevState && prevState.resizing) {\n      dimensions = prevState.dimensions;\n    }\n\n    return {\n      ...prevState,\n      dimensions: dimensions,\n    };\n  }\n\n  constructor(props) {\n    super(props);\n\n    this.state = {\n      isDrawing: false,\n      stateShapes: false,\n      resizing: false,\n      dimensions: {\n        height: 0,\n        width: 0,\n      },\n    };\n  }\n\n  /// start of handling HotSpots section\n  handleOnMouseDown = (e) => {\n    if (e.target === e.currentTarget) {\n      const { onUpdateShapes, shapes } = this.props;\n      // Add a new rectangle at the mouse position with 0 width and height\n      const newShapes = shapes.slice();\n      const value = max(newShapes.map((c) => parseInt(c.id)).filter((id) => !isNaN(id))) || 0;\n\n      newShapes.push({\n        id: `${value + 1}`,\n        height: 0,\n        width: 0,\n        x: e.evt.layerX,\n        y: e.evt.layerY,\n        group: 'rectangles',\n        index: shapes.length,\n      });\n\n      this.setState({ isDrawing: true, isDrawingShapeId: `${value + 1}` });\n      onUpdateShapes(newShapes);\n    }\n  };\n\n  handleOnMouseUp = () => {\n    // !IMPORTANT: currently, only 'rectangles' are drawable\n    const { isDrawing, stateShapes } = this.state;\n    const { onUpdateShapes } = this.props;\n\n    // If we're drawing a shape, a click finishes the drawing and sends the new shapes to HOC\n    if (isDrawing) {\n      this.setState({ isDrawing: !isDrawing, stateShapes: false, isDrawingShapeId: undefined });\n\n      if (stateShapes) {\n        onUpdateShapes(stateShapes);\n      }\n    }\n  };\n\n  handleMouseMove = (e) => {\n    // !IMPORTANT: currently, only 'rectangles' are drawable\n    const { isDrawing, isDrawingShapeId } = this.state;\n    const { shapes } = this.props;\n\n    if (isDrawing && isDrawingShapeId) {\n      const mouseX = e.evt.layerX;\n      const mouseY = e.evt.layerY;\n\n      const currShapeIndex = shapes.findIndex((shape) => shape.id === isDrawingShapeId);\n      const currShape = shapes[currShapeIndex];\n\n      if (currShape) {\n        const newWidth = mouseX - currShape.x;\n        const newHeight = mouseY - currShape.y;\n\n        const newShapesList = shapes.slice();\n\n        newShapesList[currShapeIndex] = {\n          ...newShapesList[currShapeIndex],\n          height: newHeight,\n          width: newWidth,\n          x: currShape.x,\n          y: currShape.y,\n        };\n\n        // On mouse move don't trigger any event. Put the shapes on this state instead.\n        this.setState({ stateShapes: newShapesList });\n      }\n    }\n  };\n\n  handleOnDragEnd = (id, updatedProps) => {\n    const { shapes, onUpdateShapes } = this.props;\n    const newShapes = shapes.map((shape) => {\n      if (shape.id === id) {\n        return {\n          ...shape,\n          ...updatedProps,\n        };\n      }\n      return shape;\n    });\n\n    onUpdateShapes(cloneDeep(newShapes));\n  };\n\n  handleOnSetAsCorrect = (shape) => {\n    const { id } = shape;\n    const { multipleCorrect, shapes, onUpdateShapes } = this.props;\n\n    let newShapes = [];\n\n    if (multipleCorrect) {\n      newShapes = shapes.map((shape) => {\n        if (shape.id === id) {\n          shape.correct = !shape.correct;\n        }\n        return shape;\n      });\n    } else {\n      newShapes = shapes.map((shape) => {\n        shape.correct = shape.id === id;\n        return shape;\n      });\n    }\n\n    onUpdateShapes(cloneDeep(newShapes));\n  };\n  /// end of handling HotSpots section\n\n  /// start of handling Image section\n  handleOnImageLoad = ({ target }) => {\n    const { onUpdateImageDimension } = this.props;\n    const resizeHandle = this.resize;\n    const elementStyle = getComputedStyle(target);\n    const newHeight = parseFloat(elementStyle.height);\n    const newWidth = parseFloat(elementStyle.width);\n    const aspectWidth = newWidth / IMAGE_MAX_WIDTH;\n\n    const dimensions =\n      newWidth > IMAGE_MAX_WIDTH\n        ? {\n            height: newHeight / aspectWidth,\n            width: IMAGE_MAX_WIDTH,\n          }\n        : {\n            height: newHeight,\n            width: newWidth,\n          };\n\n    this.setState({ dimensions }, () => onUpdateImageDimension(dimensions));\n\n    resizeHandle.addEventListener('mousedown', this.initialiseResize, false);\n  };\n\n  initialiseResize = () => {\n    window.addEventListener('mousemove', this.startResizing, false);\n    window.addEventListener('mouseup', this.stopResizing, false);\n  };\n\n  checkIfResizeValid(x, y) {\n    const { shapes } = this.state;\n    let drawable = true;\n\n    // Do not allow resizing over the hotspots\n    shapes &&\n      shapes.forEach((shape) => {\n        const right = shape.x + shape.width + 5;\n        const bottom = shape.y + shape.height + 5;\n        if (x <= right || y <= bottom) {\n          drawable = false;\n        }\n      });\n    return drawable;\n  }\n\n  startResizing = (e) => {\n    const bounds = e.target.getBoundingClientRect();\n    const box = this.image;\n    const { disableDrag, preserveAspectRatioEnabled, dimensions, shapes } = this.props;\n\n    // todo previously we had state.dimensions, is it needed?\n    const { width, height } = updateImageDimensions(\n      dimensions,\n      {\n        width: e.clientX - bounds.left,\n        height: e.clientY - bounds.top,\n      },\n      preserveAspectRatioEnabled,\n    );\n\n    const resizeValid = this.checkIfResizeValid(width, height);\n    const hasMinimumWidth = width > 150 && height > 150;\n\n    if (resizeValid && hasMinimumWidth && box) {\n      box.style.width = `${width}px`;\n      box.style.height = `${height}px`;\n\n      this.setState({\n        resizing: true,\n        dimensions: { height: height, width: width },\n        stateShapes: getUpdatedShapes(dimensions, { width, height }, shapes),\n      });\n    }\n\n    disableDrag();\n  };\n\n  stopResizing = () => {\n    const { enableDrag, onUpdateImageDimension, onUpdateShapes } = this.props;\n    const { dimensions, stateShapes } = this.state;\n\n    enableDrag();\n\n    if (stateShapes) {\n      onUpdateShapes(cloneDeep(stateShapes));\n    }\n\n    onUpdateImageDimension(dimensions);\n\n    window.removeEventListener('mousemove', this.startResizing, false);\n    window.removeEventListener('mouseup', this.stopResizing, false);\n\n    this.setState({ resizing: false, stateShapes: false });\n  };\n  /// end of handling Image section\n\n  render() {\n    const {\n      classes,\n      imageUrl,\n      dimensions: { height, width },\n      hotspotColor,\n      outlineColor,\n      shapes,\n      strokeWidth,\n    } = this.props;\n    const {\n      stateShapes,\n      isDrawing,\n      dimensions: { height: heightFromState, width: widthFromState },\n    } = this.state;\n    const shapesToUse = stateShapes || shapes;\n\n    return (\n      <div className={classes.base}>\n        {imageUrl && (\n          <div className={classes.imageContainer}>\n            <img\n              className={classes.image}\n              onLoad={this.handleOnImageLoad}\n              ref={(ref) => {\n                this.image = ref;\n              }}\n              src={imageUrl}\n              {...(height && width ? { style: { height, width } } : {})}\n            />\n            <div\n              ref={(ref) => {\n                this.resize = ref;\n              }}\n              className={classes.resize}\n            />\n          </div>\n        )}\n\n        <Stage\n          className={classes.stage}\n          height={heightFromState || height}\n          width={widthFromState || width}\n          onMouseDown={this.handleOnMouseDown}\n          onMouseUp={this.handleOnMouseUp}\n          onMouseMove={this.handleMouseMove}\n        >\n          <Layer>\n            {shapesToUse.map((shape, index) => {\n              const Tag = shape.group === 'polygons' ? Polygon : Rectangle;\n\n              return (\n                <Tag\n                  correct={shape.correct}\n                  isDrawing={isDrawing}\n                  height={shape.height}\n                  hotspotColor={hotspotColor}\n                  id={shape.id}\n                  key={index}\n                  onClick={() => this.handleOnSetAsCorrect(shape)}\n                  onDragEnd={this.handleOnDragEnd}\n                  outlineColor={outlineColor}\n                  width={shape.width}\n                  x={shape.x}\n                  y={shape.y}\n                  points={shape.points}\n                  strokeWidth={strokeWidth}\n                />\n              );\n            })}\n          </Layer>\n        </Stage>\n      </div>\n    );\n  }\n}\n\nconst styles = () => ({\n  base: {\n    position: 'relative',\n  },\n  image: {\n    alignItems: 'center',\n    display: 'flex',\n    justifyContent: 'center',\n  },\n  imageContainer: {\n    position: 'relative',\n    width: 'fit-content',\n  },\n  resize: {\n    borderBottom: '1px solid #727272',\n    borderRight: '1px solid #727272',\n    bottom: '-10px',\n    cursor: 'se-resize',\n    height: '10px',\n    position: 'absolute',\n    right: '-10px',\n    width: '10px',\n  },\n  stage: {\n    left: 0,\n    top: 0,\n    position: 'absolute',\n  },\n});\n\nDrawable.propTypes = {\n  classes: PropTypes.object.isRequired,\n  disableDrag: PropTypes.func.isRequired,\n  dimensions: PropTypes.object.isRequired,\n  enableDrag: PropTypes.func.isRequired,\n  imageUrl: PropTypes.string.isRequired,\n  hotspotColor: PropTypes.string.isRequired,\n  multipleCorrect: PropTypes.bool.isRequired,\n  onUpdateImageDimension: PropTypes.func.isRequired,\n  onUpdateShapes: PropTypes.func.isRequired,\n  outlineColor: PropTypes.string.isRequired,\n  shapes: PropTypes.array.isRequired,\n  strokeWidth: PropTypes.number,\n  preserveAspectRatioEnabled: PropTypes.bool,\n};\n\nexport default withStyles(styles)(Drawable);\n"],"mappings":"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"}

package/configure/lib/hotspot-palette.js

@@ -0,0 +1,126 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = 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"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _configUi = require("@pie-lib/config-ui");
+var _Select = _interopRequireDefault(require("@material-ui/core/Select"));
+var _MenuItem = _interopRequireDefault(require("@material-ui/core/MenuItem"));
+var _styles = require("@material-ui/core/styles");
+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 Palette = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2["default"])(Palette, _React$Component);
+  var _super = _createSuper(Palette);
+  function Palette() {
+    var _this;
+    (0, _classCallCheck2["default"])(this, Palette);
+    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), "onChange", function (name) {
+      return function (event) {
+        var value = event.target.value;
+        var _this$props = _this.props,
+          onHotspotColorChange = _this$props.onHotspotColorChange,
+          onOutlineColorChange = _this$props.onOutlineColorChange;
+        if (name === 'hotspot') {
+          onHotspotColorChange(value);
+        } else {
+          onOutlineColorChange(value);
+        }
+      };
+    });
+    return _this;
+  }
+  (0, _createClass2["default"])(Palette, [{
+    key: "render",
+    value: function render() {
+      var _this$props2 = this.props,
+        classes = _this$props2.classes,
+        hotspotColor = _this$props2.hotspotColor,
+        outlineColor = _this$props2.outlineColor,
+        hotspotList = _this$props2.hotspotList,
+        outlineList = _this$props2.outlineList;
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.base
+      }, /*#__PURE__*/_react["default"].createElement(_configUi.InputContainer, {
+        label: "Hot Spot",
+        className: classes.input
+      }, /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+        className: classes.select,
+        onChange: this.onChange('hotspot'),
+        value: hotspotColor
+      }, hotspotList.map(function (hotspot) {
+        return /*#__PURE__*/_react["default"].createElement(_MenuItem["default"], {
+          key: hotspot,
+          value: hotspot,
+          className: classes.item,
+          style: {
+            backgroundColor: hotspot
+          }
+        }, hotspot);
+      }))), /*#__PURE__*/_react["default"].createElement(_configUi.InputContainer, {
+        label: "Response Outline",
+        className: classes.input
+      }, /*#__PURE__*/_react["default"].createElement(_Select["default"], {
+        className: classes.select,
+        onChange: this.onChange('outline'),
+        value: outlineColor
+      }, outlineList.map(function (outline) {
+        return /*#__PURE__*/_react["default"].createElement(_MenuItem["default"], {
+          key: outline,
+          value: outline,
+          className: classes.item,
+          style: {
+            border: "2px solid ".concat(outline)
+          }
+        }, outline);
+      }))));
+    }
+  }]);
+  return Palette;
+}(_react["default"].Component);
+var styles = function styles(theme) {
+  return {
+    base: {
+      marginTop: theme.spacing.unit * 2,
+      display: 'flex'
+    },
+    input: {
+      flex: 1,
+      width: '90%'
+    },
+    item: {
+      borderRadius: '2px',
+      height: '22px',
+      marginLeft: theme.spacing.unit * 2,
+      marginRight: theme.spacing.unit * 2,
+      marginTop: theme.spacing.unit * 2
+    }
+  };
+};
+Palette.propTypes = {
+  classes: _propTypes["default"].object.isRequired,
+  hotspotColor: _propTypes["default"].string.isRequired,
+  hotspotList: _propTypes["default"].array.isRequired,
+  onHotspotColorChange: _propTypes["default"].func.isRequired,
+  onOutlineColorChange: _propTypes["default"].func.isRequired,
+  outlineColor: _propTypes["default"].string.isRequired,
+  outlineList: _propTypes["default"].array.isRequired
+};
+var _default = (0, _styles.withStyles)(styles)(Palette);
+exports["default"] = _default;
+//# sourceMappingURL=hotspot-palette.js.map

package/configure/lib/hotspot-palette.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hotspot-palette.js","names":["_react","_interopRequireDefault","require","_propTypes","_configUi","_Select","_MenuItem","_styles","_createSuper","Derived","hasNativeReflectConstruct","_isNativeReflectConstruct","_createSuperInternal","Super","_getPrototypeOf2","result","NewTarget","constructor","Reflect","construct","arguments","apply","_possibleConstructorReturn2","sham","Proxy","Boolean","prototype","valueOf","call","e","Palette","_React$Component","_inherits2","_super","_this","_classCallCheck2","_len","length","args","Array","_key","concat","_defineProperty2","_assertThisInitialized2","name","event","value","target","_this$props","props","onHotspotColorChange","onOutlineColorChange","_createClass2","key","render","_this$props2","classes","hotspotColor","outlineColor","hotspotList","outlineList","createElement","className","base","InputContainer","label","input","select","onChange","map","hotspot","item","style","backgroundColor","outline","border","React","Component","styles","theme","marginTop","spacing","unit","display","flex","width","borderRadius","height","marginLeft","marginRight","propTypes","PropTypes","object","isRequired","string","array","func","_default","withStyles","exports"],"sources":["../src/hotspot-palette.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { InputContainer } from '@pie-lib/config-ui';\nimport Select from '@material-ui/core/Select';\nimport MenuItem from '@material-ui/core/MenuItem';\nimport { withStyles } from '@material-ui/core/styles';\n\nclass Palette extends React.Component {\n  onChange = (name) => (event) => {\n    const { value } = event.target;\n    const { onHotspotColorChange, onOutlineColorChange } = this.props;\n\n    if (name === 'hotspot') {\n      onHotspotColorChange(value);\n    } else {\n      onOutlineColorChange(value);\n    }\n  };\n\n  render() {\n    const { classes, hotspotColor, outlineColor, hotspotList, outlineList } = this.props;\n\n    return (\n      <div className={classes.base}>\n        <InputContainer label=\"Hot Spot\" className={classes.input}>\n          <Select className={classes.select} onChange={this.onChange('hotspot')} value={hotspotColor}>\n            {hotspotList.map((hotspot) => (\n              <MenuItem key={hotspot} value={hotspot} className={classes.item} style={{ backgroundColor: hotspot }}>\n                {hotspot}\n              </MenuItem>\n            ))}\n          </Select>\n        </InputContainer>\n\n        <InputContainer label=\"Response Outline\" className={classes.input}>\n          <Select className={classes.select} onChange={this.onChange('outline')} value={outlineColor}>\n            {outlineList.map((outline) => (\n              <MenuItem\n                key={outline}\n                value={outline}\n                className={classes.item}\n                style={{ border: `2px solid ${outline}` }}\n              >\n                {outline}\n              </MenuItem>\n            ))}\n          </Select>\n        </InputContainer>\n      </div>\n    );\n  }\n}\n\nconst styles = (theme) => ({\n  base: {\n    marginTop: theme.spacing.unit * 2,\n    display: 'flex',\n  },\n  input: {\n    flex: 1,\n    width: '90%',\n  },\n  item: {\n    borderRadius: '2px',\n    height: '22px',\n    marginLeft: theme.spacing.unit * 2,\n    marginRight: theme.spacing.unit * 2,\n    marginTop: theme.spacing.unit * 2,\n  },\n});\n\nPalette.propTypes = {\n  classes: PropTypes.object.isRequired,\n  hotspotColor: PropTypes.string.isRequired,\n  hotspotList: PropTypes.array.isRequired,\n  onHotspotColorChange: PropTypes.func.isRequired,\n  onOutlineColorChange: PropTypes.func.isRequired,\n  outlineColor: PropTypes.string.isRequired,\n  outlineList: PropTypes.array.isRequired,\n};\n\nexport default withStyles(styles)(Palette);\n"],"mappings":"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"}