@pie-element/hotspot 4.8.4-next.135 → 4.8.4-next.1357

package/docs/config-schema.json

@@ -0,0 +1,212 @@
+{
+  "description": "Config Object for @pie-elements/hotspot",
+  "additionalProperties": false,
+  "type": "object",
+  "properties": {
+    "multipleCorrect": {
+      "title": "ConfigureProp",
+      "type": "object",
+      "properties": {
+        "settings": {
+          "description": "Indicates if the item has to be displayed in the Settings Panel",
+          "type": "boolean",
+          "title": "settings"
+        },
+        "label": {
+          "description": "Indicates the label for the item that has to be displayed in the Settings Panel",
+          "type": "string",
+          "title": "label"
+        }
+      }
+    },
+    "partialScoring": {
+      "title": "ConfigureProp",
+      "type": "object",
+      "properties": {
+        "settings": {
+          "description": "Indicates if the item has to be displayed in the Settings Panel",
+          "type": "boolean",
+          "title": "settings"
+        },
+        "label": {
+          "description": "Indicates the label for the item that has to be displayed in the Settings Panel",
+          "type": "string",
+          "title": "label"
+        }
+      }
+    },
+    "rationale": {
+      "title": "ConfigureProp",
+      "type": "object",
+      "properties": {
+        "settings": {
+          "description": "Indicates if the item has to be displayed in the Settings Panel",
+          "type": "boolean",
+          "title": "settings"
+        },
+        "label": {
+          "description": "Indicates the label for the item that has to be displayed in the Settings Panel",
+          "type": "string",
+          "title": "label"
+        }
+      }
+    },
+    "spellCheck": {
+      "title": "ConfigureProp",
+      "type": "object",
+      "properties": {
+        "settings": {
+          "description": "Indicates if the item has to be displayed in the Settings Panel",
+          "type": "boolean",
+          "title": "settings"
+        },
+        "label": {
+          "description": "Indicates the label for the item that has to be displayed in the Settings Panel",
+          "type": "string",
+          "title": "label"
+        }
+      }
+    },
+    "preserveAspectRatio": {
+      "title": "ConfigureProp",
+      "type": "object",
+      "properties": {
+        "settings": {
+          "description": "Indicates if the item has to be displayed in the Settings Panel",
+          "type": "boolean",
+          "title": "settings"
+        },
+        "label": {
+          "description": "Indicates the label for the item that has to be displayed in the Settings Panel",
+          "type": "string",
+          "title": "label"
+        }
+      }
+    },
+    "minShapes": {
+      "description": "Minimum number of shapes",
+      "type": "number",
+      "title": "minShapes"
+    },
+    "maxShapes": {
+      "description": "Maximum number of shapes",
+      "type": "number",
+      "title": "maxShapes"
+    },
+    "maxSelections": {
+      "description": "Maximum number of selected shapes in correct answer",
+      "type": "number",
+      "title": "maxSelections"
+    },
+    "maxImageWidth": {
+      "title": "ConfigureMaxImageDimensionsProp",
+      "type": "object",
+      "properties": {
+        "teacherInstructions": {
+          "description": "Indicates the max dimension for images in teacher instructions",
+          "type": "number",
+          "title": "teacherInstructions"
+        },
+        "prompt": {
+          "description": "Indicates the max dimension for images in prompt - this is also the default dimension for all other input fields if it's not specified",
+          "type": "number",
+          "title": "prompt"
+        },
+        "rationale": {
+          "description": "Indicates the max dimension for images in rationale",
+          "type": "number",
+          "title": "rationale"
+        }
+      }
+    },
+    "maxImageHeight": {
+      "title": "ConfigureMaxImageDimensionsProp",
+      "type": "object",
+      "properties": {
+        "teacherInstructions": {
+          "description": "Indicates the max dimension for images in teacher instructions",
+          "type": "number",
+          "title": "teacherInstructions"
+        },
+        "prompt": {
+          "description": "Indicates the max dimension for images in prompt - this is also the default dimension for all other input fields if it's not specified",
+          "type": "number",
+          "title": "prompt"
+        },
+        "rationale": {
+          "description": "Indicates the max dimension for images in rationale",
+          "type": "number",
+          "title": "rationale"
+        }
+      }
+    },
+    "withRubric": {
+      "title": "ConfigureProp",
+      "type": "object",
+      "properties": {
+        "settings": {
+          "description": "Indicates if the item has to be displayed in the Settings Panel",
+          "type": "boolean",
+          "title": "settings"
+        },
+        "label": {
+          "description": "Indicates the label for the item that has to be displayed in the Settings Panel",
+          "type": "string",
+          "title": "label"
+        }
+      }
+    },
+    "showPrompt": {
+      "description": "Determines whether prompt field will be displayed or not",
+      "default": true,
+      "type": "boolean",
+      "title": "showPrompt"
+    },
+    "promptLabel": {
+      "description": "The label for the item stem/prompt field",
+      "default": "Item Stemm",
+      "type": "string",
+      "title": "promptLabel"
+    }
+  },
+  "definitions": {
+    "ConfigureProp": {
+      "title": "ConfigureProp",
+      "type": "object",
+      "properties": {
+        "settings": {
+          "description": "Indicates if the item has to be displayed in the Settings Panel",
+          "type": "boolean",
+          "title": "settings"
+        },
+        "label": {
+          "description": "Indicates the label for the item that has to be displayed in the Settings Panel",
+          "type": "string",
+          "title": "label"
+        }
+      }
+    },
+    "ConfigureMaxImageDimensionsProp": {
+      "title": "ConfigureMaxImageDimensionsProp",
+      "type": "object",
+      "properties": {
+        "teacherInstructions": {
+          "description": "Indicates the max dimension for images in teacher instructions",
+          "type": "number",
+          "title": "teacherInstructions"
+        },
+        "prompt": {
+          "description": "Indicates the max dimension for images in prompt - this is also the default dimension for all other input fields if it's not specified",
+          "type": "number",
+          "title": "prompt"
+        },
+        "rationale": {
+          "description": "Indicates the max dimension for images in rationale",
+          "type": "number",
+          "title": "rationale"
+        }
+      }
+    }
+  },
+  "$schema": "http://json-schema.org/draft-07/schema#"
+}

package/docs/config-schema.json.md

@@ -0,0 +1,165 @@
+Config Object for @pie-elements/hotspot
+
+The schema defines the following properties:
+
+# `multipleCorrect` (object)
+
+Properties of the `multipleCorrect` object:
+
+## `settings` (boolean)
+
+Indicates if the item has to be displayed in the Settings Panel
+
+## `label` (string)
+
+Indicates the label for the item that has to be displayed in the Settings Panel
+
+# `partialScoring` (object)
+
+Properties of the `partialScoring` object:
+
+## `settings` (boolean)
+
+Indicates if the item has to be displayed in the Settings Panel
+
+## `label` (string)
+
+Indicates the label for the item that has to be displayed in the Settings Panel
+
+# `rationale` (object)
+
+Properties of the `rationale` object:
+
+## `settings` (boolean)
+
+Indicates if the item has to be displayed in the Settings Panel
+
+## `label` (string)
+
+Indicates the label for the item that has to be displayed in the Settings Panel
+
+# `spellCheck` (object)
+
+Properties of the `spellCheck` object:
+
+## `settings` (boolean)
+
+Indicates if the item has to be displayed in the Settings Panel
+
+## `label` (string)
+
+Indicates the label for the item that has to be displayed in the Settings Panel
+
+# `preserveAspectRatio` (object)
+
+Properties of the `preserveAspectRatio` object:
+
+## `settings` (boolean)
+
+Indicates if the item has to be displayed in the Settings Panel
+
+## `label` (string)
+
+Indicates the label for the item that has to be displayed in the Settings Panel
+
+# `minShapes` (number)
+
+Minimum number of shapes
+
+# `maxShapes` (number)
+
+Maximum number of shapes
+
+# `maxSelections` (number)
+
+Maximum number of selected shapes in correct answer
+
+# `maxImageWidth` (object)
+
+Properties of the `maxImageWidth` object:
+
+## `teacherInstructions` (number)
+
+Indicates the max dimension for images in teacher instructions
+
+## `prompt` (number)
+
+Indicates the max dimension for images in prompt - this is also the default dimension for all other input fields if it's not specified
+
+## `rationale` (number)
+
+Indicates the max dimension for images in rationale
+
+# `maxImageHeight` (object)
+
+Properties of the `maxImageHeight` object:
+
+## `teacherInstructions` (number)
+
+Indicates the max dimension for images in teacher instructions
+
+## `prompt` (number)
+
+Indicates the max dimension for images in prompt - this is also the default dimension for all other input fields if it's not specified
+
+## `rationale` (number)
+
+Indicates the max dimension for images in rationale
+
+# `withRubric` (object)
+
+Properties of the `withRubric` object:
+
+## `settings` (boolean)
+
+Indicates if the item has to be displayed in the Settings Panel
+
+## `label` (string)
+
+Indicates the label for the item that has to be displayed in the Settings Panel
+
+# `showPrompt` (boolean)
+
+Determines whether prompt field will be displayed or not
+
+Default: `true`
+
+# `promptLabel` (string)
+
+The label for the item stem/prompt field
+
+Default: `"Item Stemm"`
+
+---
+
+# Sub Schemas
+
+The schema defines the following additional types:
+
+## `ConfigureProp` (object)
+
+Properties of the `ConfigureProp` object:
+
+### `settings` (boolean)
+
+Indicates if the item has to be displayed in the Settings Panel
+
+### `label` (string)
+
+Indicates the label for the item that has to be displayed in the Settings Panel
+
+## `ConfigureMaxImageDimensionsProp` (object)
+
+Properties of the `ConfigureMaxImageDimensionsProp` object:
+
+### `teacherInstructions` (number)
+
+Indicates the max dimension for images in teacher instructions
+
+### `prompt` (number)
+
+Indicates the max dimension for images in prompt - this is also the default dimension for all other input fields if it's not specified
+
+### `rationale` (number)
+
+Indicates the max dimension for images in rationale

package/docs/demo/generate.js

@@ -65,4 +65,5 @@ exports.model = (id, element) => ({
   teacherInstructions: null,
   toolbarEditorPosition: 'bottom',
   prompt: '<div><audio controls="controls" src="https://storage.googleapis.com/pie-prod-221718-assets/audio/77f3f61e-5f2d-425f-80a5-fb814dfa5e4c"></audio><br><br>Choose ALL of the words with the long /o/ sound.</div>',
+  rubricEnabled: false
 });

package/docs/pie-schema.json

@@ -200,6 +200,11 @@
       "type": "boolean",
       "title": "studentInstructionsEnabled"
     },
+    "spellCheckEnabled": {
+      "description": "Indicates if spellcheck is enabled for the author. Default value is true",
+      "type": "boolean",
+      "title": "spellCheckEnabled"
+    },
     "strokeWidth": {
       "description": "Indicates the width of the outline for a selection",
       "type": "number",
@@ -220,6 +225,11 @@
       "type": "string",
       "title": "toolbarEditorPosition"
     },
+    "rubricEnabled": {
+      "description": "Indicates if Rubric is enabled",
+      "type": "boolean",
+      "title": "rubricEnabled"
+    },
     "id": {
       "description": "Identifier to identify the Pie Element in html markup, Must be unique within a pie item config.",
       "type": "string",
@@ -238,12 +248,51 @@
     "multipleCorrect",
     "partialScoring",
     "rationaleEnabled",
+    "rubricEnabled",
     "shapes",
+    "spellCheckEnabled",
     "strokeWidth",
     "studentInstructionsEnabled",
     "teacherInstructionsEnabled"
   ],
   "definitions": {
+    "ConfigureProp": {
+      "title": "ConfigureProp",
+      "type": "object",
+      "properties": {
+        "settings": {
+          "description": "Indicates if the item has to be displayed in the Settings Panel",
+          "type": "boolean",
+          "title": "settings"
+        },
+        "label": {
+          "description": "Indicates the label for the item that has to be displayed in the Settings Panel",
+          "type": "string",
+          "title": "label"
+        }
+      }
+    },
+    "ConfigureMaxImageDimensionsProp": {
+      "title": "ConfigureMaxImageDimensionsProp",
+      "type": "object",
+      "properties": {
+        "teacherInstructions": {
+          "description": "Indicates the max dimension for images in teacher instructions",
+          "type": "number",
+          "title": "teacherInstructions"
+        },
+        "prompt": {
+          "description": "Indicates the max dimension for images in prompt - this is also the default dimension for all other input fields if it's not specified",
+          "type": "number",
+          "title": "prompt"
+        },
+        "rationale": {
+          "description": "Indicates the max dimension for images in rationale",
+          "type": "number",
+          "title": "rationale"
+        }
+      }
+    },
     "Shape": {
       "title": "Shape",
       "type": "object",

package/docs/pie-schema.json.md

@@ -138,6 +138,10 @@ Indicates if Rationale are enabled
 
 Indicates if Student Instructions are enabled
 
+# `spellCheckEnabled` (boolean, required)
+
+Indicates if spellcheck is enabled for the author. Default value is true
+
 # `strokeWidth` (number, required)
 
 Indicates the width of the outline for a selection
@@ -157,6 +161,10 @@ This element must be one of the following enum values:
 
 Default: `": 'bottom'"`
 
+# `rubricEnabled` (boolean, required)
+
+Indicates if Rubric is enabled
+
 # `id` (string, required)
 
 Identifier to identify the Pie Element in html markup, Must be unique within a pie item config.
@@ -171,6 +179,34 @@ The html Element tag name
 
 The schema defines the following additional types:
 
+## `ConfigureProp` (object)
+
+Properties of the `ConfigureProp` object:
+
+### `settings` (boolean)
+
+Indicates if the item has to be displayed in the Settings Panel
+
+### `label` (string)
+
+Indicates the label for the item that has to be displayed in the Settings Panel
+
+## `ConfigureMaxImageDimensionsProp` (object)
+
+Properties of the `ConfigureMaxImageDimensionsProp` object:
+
+### `teacherInstructions` (number)
+
+Indicates the max dimension for images in teacher instructions
+
+### `prompt` (number)
+
+Indicates the max dimension for images in prompt - this is also the default dimension for all other input fields if it's not specified
+
+### `rationale` (number)
+
+Indicates the max dimension for images in rationale
+
 ## `Shape` (object)
 
 Properties of the `Shape` object:

package/lib/hotspot/container.js

@@ -37,7 +37,7 @@ var _polygon = _interopRequireDefault(require("./polygon"));
 
 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 { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+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);
@@ -91,8 +91,8 @@ var Container = /*#__PURE__*/function (_React$Component) {
       var _this$props = this.props,
           classes = _this$props.classes,
           _this$props$dimension = _this$props.dimensions,
-          width = _this$props$dimension.width,
-          height = _this$props$dimension.height,
+          withProp = _this$props$dimension.width,
+          heightProp = _this$props$dimension.height,
           disabled = _this$props.disabled,
           hotspotColor = _this$props.hotspotColor,
           imageUrl = _this$props.imageUrl,
@@ -102,7 +102,11 @@ var Container = /*#__PURE__*/function (_React$Component) {
           _this$props$shapes = _this$props.shapes,
           rectangles = _this$props$shapes.rectangles,
           polygons = _this$props$shapes.polygons,
-          strokeWidth = _this$props.strokeWidth;
+          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: {
@@ -111,6 +115,7 @@ var Container = /*#__PURE__*/function (_React$Component) {
       }, imageUrl ? /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.imageContainer
       }, /*#__PURE__*/_react["default"].createElement("img", {
+        alt: "hotspot-image",
         className: classes.image,
         height: "auto",
         src: imageUrl,
@@ -131,7 +136,9 @@ var Container = /*#__PURE__*/function (_React$Component) {
 
         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,
@@ -146,14 +153,18 @@ var Container = /*#__PURE__*/function (_React$Component) {
           width: shape.width,
           x: shape.x,
           y: shape.y,
-          strokeWidth: strokeWidth
+          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,
@@ -165,7 +176,9 @@ var Container = /*#__PURE__*/function (_React$Component) {
           onClick: onSelectChoice,
           outlineColor: outlineColor,
           points: polygon.points,
-          strokeWidth: strokeWidth
+          strokeWidth: strokeWidth,
+          markAsCorrect: markAsCorrect,
+          showCorrectEnabled: showCorrect
         });
       }))));
     }
@@ -219,7 +232,12 @@ Container.propTypes = {
   outlineColor: _propTypes["default"].string.isRequired,
   session: _propTypes["default"].object.isRequired,
   shapes: _propTypes["default"].object.isRequired,
-  strokeWidth: _propTypes["default"].number
+  strokeWidth: _propTypes["default"].number,
+  scale: _propTypes["default"].number,
+  showCorrect: _propTypes["default"].bool
+};
+Container.defaultProps = {
+  scale: 1
 };
 
 var _default = (0, _styles.withStyles)(styles)(Container);

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","width","height","disabled","hotspotColor","imageUrl","isEvaluateMode","outlineColor","onSelectChoice","shapes","rectangles","polygons","strokeWidth","base","padding","imageContainer","image","maxWidth","maxHeight","stage","map","isSelected","correctness","correct","undefined","evaluateText","getEvaluateText","x","y","polygon","points","React","Component","styles","theme","marginTop","spacing","unit","position","alignItems","display","justifyContent","left","top","resize","borderBottom","color","borderRight","bottom","cursor","right","propTypes","PropTypes","object","isRequired","bool","string","func","number"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAEA;;AACA;;;;;;IAEaA,S;;;;;;;;;;;;;;;oGAMG,UAACC,SAAD,EAAYC,SAAZ;AAAA,aAA0BD,SAAS,GAAGC,SAAH,GAAe,CAACA,SAAnD;AAAA,K;wGAEI,UAACD,SAAD,EAAYE,QAAZ,EAAyB;AACzC,UAAIA,QAAQ,IAAIF,SAAhB,EAA2B;AACzB,eAAO,qBAAP;AACD;;AAED,UAAIE,QAAQ,IAAI,CAACF,SAAjB,EAA4B;AAC1B,eAAO,gCAAP;AACD;;AAED,UAAI,CAACE,QAAD,IAAaF,SAAjB,EAA4B;AAC1B,eAAO,4BAAP;AACD;;AAED,aAAO,IAAP;AACD,K;;;;;;WArBD,oBAAWG,KAAX,EAAkB;AAChB,UAAMC,aAAa,GAAG,KAAKC,KAAL,CAAWC,OAAX,CAAmBC,OAAnB,CAA2BC,MAA3B,CAAkC,UAAAC,MAAM;AAAA,eAAIA,MAAM,CAACC,EAAP,KAAcP,KAAK,CAACO,EAAxB;AAAA,OAAxC,EAAoE,CAApE,CAAtB;AACA,aAAO,CAAC,CAACN,aAAT;AACD;;;WAoBD,kBAAS;AAAA;;AAAA,wBAYH,KAAKC,KAZF;AAAA,UAELM,OAFK,eAELA,OAFK;AAAA,8CAGLC,UAHK;AAAA,UAGSC,KAHT,yBAGSA,KAHT;AAAA,UAGgBC,MAHhB,yBAGgBA,MAHhB;AAAA,UAILC,QAJK,eAILA,QAJK;AAAA,UAKLC,YALK,eAKLA,YALK;AAAA,UAMLC,QANK,eAMLA,QANK;AAAA,UAOLC,cAPK,eAOLA,cAPK;AAAA,UAQLC,YARK,eAQLA,YARK;AAAA,UASLC,cATK,eASLA,cATK;AAAA,2CAULC,MAVK;AAAA,UAUKC,UAVL,sBAUKA,UAVL;AAAA,UAUiBC,QAVjB,sBAUiBA,QAVjB;AAAA,UAWLC,WAXK,eAWLA,WAXK;AAcP,0BACE;AACE,QAAA,SAAS,EAAEb,OAAO,CAACc,IADrB;AAEE,QAAA,KAAK,EAAE;AAAEC,UAAAA,OAAO,EAAEF,WAAW,GAAG;AAAzB;AAFT,SAIGP,QAAQ,gBACP;AAAK,QAAA,SAAS,EAAEN,OAAO,CAACgB;AAAxB,sBACE;AACE,QAAA,SAAS,EAAEhB,OAAO,CAACiB,KADrB;AAEE,QAAA,MAAM,EAAC,MAFT;AAGE,QAAA,GAAG,EAAEX,QAHP;AAIE,QAAA,KAAK,EAAE;AAAEJ,UAAAA,KAAK,EAALA,KAAF;AAASC,UAAAA,MAAM,EAANA,MAAT;AAAiBe,UAAAA,QAAQ,EAAEhB,KAA3B;AAAkCiB,UAAAA,SAAS,EAAEhB;AAA7C;AAJT,QADF,CADO,GASL,IAbN,eAeE,gCAAC,iBAAD;AACE,QAAA,SAAS,EAAEH,OAAO,CAACoB,KADrB;AAEE,QAAA,MAAM,EAAEjB,MAAM,GAAGU,WAFnB;AAGE,QAAA,KAAK,EAAEX,KAAK,GAAGW,WAHjB;AAIE,QAAA,CAAC,EAAEA,WAAW,GAAG,CAJnB;AAKE,QAAA,CAAC,EAAEA,WAAW,GAAG;AALnB,sBAOE,gCAAC,iBAAD,QACGF,UAAU,CAACU,GAAX,CAAe,UAAC7B,KAAD,EAAW;AACzB,YAAMD,QAAQ,GAAG,MAAI,CAAC+B,UAAL,CAAgB9B,KAAhB,CAAjB;;AACA,YAAMH,SAAS,GAAGkB,cAAc,GAAG,MAAI,CAACgB,WAAL,CAAiB/B,KAAK,CAACgC,OAAvB,EAAgCjC,QAAhC,CAAH,GAA+CkC,SAA/E;AACA,YAAMC,YAAY,GAAGnB,cAAc,GAAG,MAAI,CAACoB,eAAL,CAAqBnC,KAAK,CAACgC,OAA3B,EAAoCjC,QAApC,CAAH,GAAmD,IAAtF;AAEA,4BACE,gCAAC,qBAAD;AACE,UAAA,cAAc,EAAEgB,cADlB;AAEE,UAAA,SAAS,EAAElB,SAFb;AAGE,UAAA,YAAY,EAAEqC,YAHhB;AAIE,UAAA,QAAQ,EAAEtB,QAJZ;AAKE,UAAA,QAAQ,EAAEb,QALZ;AAME,UAAA,MAAM,EAAEC,KAAK,CAACW,MANhB;AAOE,UAAA,YAAY,EAAEE,YAPhB;AAQE,UAAA,EAAE,EAAEb,KAAK,CAACO,EARZ;AASE,UAAA,GAAG,EAAEP,KAAK,CAACO,EATb;AAUE,UAAA,OAAO,EAAEU,cAVX;AAWE,UAAA,YAAY,EAAED,YAXhB;AAYE,UAAA,KAAK,EAAEhB,KAAK,CAACU,KAZf;AAaE,UAAA,CAAC,EAAEV,KAAK,CAACoC,CAbX;AAcE,UAAA,CAAC,EAAEpC,KAAK,CAACqC,CAdX;AAeE,UAAA,WAAW,EAAEhB;AAff,UADF;AAmBD,OAxBA,CADH,EA0BGD,QAAQ,CAACS,GAAT,CAAa,UAACS,OAAD,EAAa;AACzB,YAAMvC,QAAQ,GAAG,MAAI,CAAC+B,UAAL,CAAgBQ,OAAhB,CAAjB;;AACA,YAAMzC,SAAS,GAAGkB,cAAc,GAAG,MAAI,CAACgB,WAAL,CAAiBO,OAAO,CAACN,OAAzB,EAAkCjC,QAAlC,CAAH,GAAiDkC,SAAjF;AACA,YAAMC,YAAY,GAAGnB,cAAc,GAAG,MAAI,CAACoB,eAAL,CAAqBG,OAAO,CAACN,OAA7B,EAAsCjC,QAAtC,CAAH,GAAqD,IAAxF;AAEA,4BACE,gCAAC,mBAAD;AACE,UAAA,cAAc,EAAEgB,cADlB;AAEE,UAAA,SAAS,EAAE,CAAC,CAAClB,SAFf;AAGE,UAAA,YAAY,EAAEqC,YAHhB;AAIE,UAAA,QAAQ,EAAEtB,QAJZ;AAKE,UAAA,QAAQ,EAAEb,QALZ;AAME,UAAA,YAAY,EAAEc,YANhB;AAOE,UAAA,EAAE,EAAEyB,OAAO,CAAC/B,EAPd;AAQE,UAAA,GAAG,EAAE+B,OAAO,CAAC/B,EARf;AASE,UAAA,OAAO,EAAEU,cATX;AAUE,UAAA,YAAY,EAAED,YAVhB;AAWE,UAAA,MAAM,EAAEsB,OAAO,CAACC,MAXlB;AAYE,UAAA,WAAW,EAAElB;AAZf,UADF;AAgBD,OArBA,CA1BH,CAPF,CAfF,CADF;AA2ED;;;EAjH4BmB,kBAAMC,S;;;;AAoHrC,IAAMC,MAAM,GAAG,SAATA,MAAS,CAAAC,KAAK;AAAA,SAAK;AACvBrB,IAAAA,IAAI,EAAE;AACJsB,MAAAA,SAAS,EAAED,KAAK,CAACE,OAAN,CAAcC,IAAd,GAAqB,CAD5B;AAEJC,MAAAA,QAAQ,EAAE;AAFN,KADiB;AAKvBtB,IAAAA,KAAK,EAAE;AACLuB,MAAAA,UAAU,EAAE,QADP;AAELC,MAAAA,OAAO,EAAE,MAFJ;AAGLC,MAAAA,cAAc,EAAE;AAHX,KALgB;AAUvB1B,IAAAA,cAAc,EAAE;AACduB,MAAAA,QAAQ,EAAE,UADI;AAEdrC,MAAAA,KAAK,EAAE;AAFO,KAVO;AAcvBkB,IAAAA,KAAK,EAAE;AACLuB,MAAAA,IAAI,EAAE,CADD;AAELC,MAAAA,GAAG,EAAE,CAFA;AAGLL,MAAAA,QAAQ,EAAE;AAHL,KAdgB;AAmBvBM,IAAAA,MAAM,EAAE;AACNC,MAAAA,YAAY,sBAAeC,gBAAM3C,QAAN,EAAf,CADN;AAEN4C,MAAAA,WAAW,sBAAeD,gBAAM3C,QAAN,EAAf,CAFL;AAGN6C,MAAAA,MAAM,EAAE,OAHF;AAINC,MAAAA,MAAM,EAAE,WAJF;AAKN/C,MAAAA,MAAM,EAAE,MALF;AAMNoC,MAAAA,QAAQ,EAAE,UANJ;AAONY,MAAAA,KAAK,EAAE,OAPD;AAQNjD,MAAAA,KAAK,EAAE;AARD;AAnBe,GAAL;AAAA,CAApB;;AA+BAd,SAAS,CAACgE,SAAV,GAAsB;AACpBpD,EAAAA,OAAO,EAAEqD,sBAAUC,MAAV,CAAiBC,UADN;AAEpBtD,EAAAA,UAAU,EAAEoD,sBAAUC,MAAV,CAAiBC,UAFT;AAGpBnD,EAAAA,QAAQ,EAAEiD,sBAAUG,IAAV,CAAeD,UAHL;AAIpBlD,EAAAA,YAAY,EAACgD,sBAAUI,MAAV,CAAiBF,UAJV;AAKpBjD,EAAAA,QAAQ,EAAC+C,sBAAUI,MAAV,CAAiBF,UALN;AAMpBhD,EAAAA,cAAc,EAAC8C,sBAAUG,IAAV,CAAeD,UANV;AAOpB9C,EAAAA,cAAc,EAAC4C,sBAAUK,IAAV,CAAeH,UAPV;AAQpB/C,EAAAA,YAAY,EAAC6C,sBAAUI,MAAV,CAAiBF,UARV;AASpB5D,EAAAA,OAAO,EAAC0D,sBAAUC,MAAV,CAAiBC,UATL;AAUpB7C,EAAAA,MAAM,EAAC2C,sBAAUC,MAAV,CAAiBC,UAVJ;AAWpB1C,EAAAA,WAAW,EAAEwC,sBAAUM;AAXH,CAAtB;;eAce,wBAAWzB,MAAX,EAAmB9C,SAAnB,C","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';\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, height },\n      disabled,\n      hotspotColor,\n      imageUrl,\n      isEvaluateMode,\n      outlineColor,\n      onSelectChoice,\n      shapes: { rectangles, polygons },\n      strokeWidth\n    } = this.props;\n\n    return (\n      <div\n        className={classes.base}\n        style={{ padding: strokeWidth / 2 }}\n      >\n        {imageUrl ? (\n          <div className={classes.imageContainer}>\n            <img\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\n              return (\n                <Rectangle\n                  isEvaluateMode={isEvaluateMode}\n                  isCorrect={isCorrect}\n                  evaluateText={evaluateText}\n                  disabled={disabled}\n                  selected={selected}\n                  height={shape.height}\n                  hotspotColor={hotspotColor}\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                />\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\n              return (\n                <Polygon\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                />\n              )\n            })}\n          </Layer>\n        </Stage>\n      </div>\n    );\n  }\n}\n\nconst styles = theme => ({\n  base: {\n    marginTop: theme.spacing.unit * 3,\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  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  imageUrl:PropTypes.string.isRequired,\n  isEvaluateMode:PropTypes.bool.isRequired,\n  onSelectChoice:PropTypes.func.isRequired,\n  outlineColor:PropTypes.string.isRequired,\n  session:PropTypes.object.isRequired,\n  shapes:PropTypes.object.isRequired,\n  strokeWidth: PropTypes.number\n};\n\nexport default withStyles(styles)(Container);\n"],"file":"container.js"}
+{"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","imageUrl","isEvaluateMode","outlineColor","onSelectChoice","shapes","rectangles","polygons","SCALE","scale","strokeWidth","showCorrect","base","padding","imageContainer","image","maxWidth","maxHeight","stage","map","isSelected","correctness","correct","undefined","evaluateText","getEvaluateText","markAsCorrect","x","y","polygon","points","React","Component","styles","theme","marginTop","spacing","unit","position","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';\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      imageUrl,\n      isEvaluateMode,\n      outlineColor,\n      onSelectChoice,\n      shapes: { rectangles, polygons },\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\n        className={classes.base}\n        style={{ padding: strokeWidth / 2 }}\n      >\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                  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                  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 * 3,\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  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  imageUrl:PropTypes.string.isRequired,\n  isEvaluateMode:PropTypes.bool.isRequired,\n  onSelectChoice:PropTypes.func.isRequired,\n  outlineColor:PropTypes.string.isRequired,\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"}

package/lib/hotspot/image.js

@@ -29,7 +29,7 @@ var _reactKonva = require("react-konva");
 
 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 { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+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 ImageComponent = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2["default"])(ImageComponent, _React$Component);