@pie-element/hotspot 4.11.4 → 5.0.0

package/CHANGELOG.md

@@ -3,6 +3,23 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.0.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot@4.11.4...@pie-element/hotspot@5.0.0) (2022-06-28)
+
+
+### chore
+
+* Merge master with develop. ([cdca48a](https://github.com/pie-framework/pie-elements/commit/cdca48abaa1d4179e4a961e13d171e14b7ed2444))
+
+
+### BREAKING CHANGES
+
+* Image percent buttons were removed from toolbar.
+New properties maxImageWidth and maxImageHeight were added.
+
+
+
+
+
 ## [4.11.4](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot@4.11.3...@pie-element/hotspot@4.11.4) (2022-06-13)
 
 **Note:** Version bump only for package @pie-element/hotspot

package/configure/CHANGELOG.md

@@ -3,6 +3,23 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.0.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-configure@4.7.4...@pie-element/hotspot-configure@5.0.0) (2022-06-28)
+
+
+### chore
+
+* Merge master with develop. ([cdca48a](https://github.com/pie-framework/pie-elements/commit/cdca48abaa1d4179e4a961e13d171e14b7ed2444))
+
+
+### BREAKING CHANGES
+
+* Image percent buttons were removed from toolbar.
+New properties maxImageWidth and maxImageHeight were added.
+
+
+
+
+
 ## [4.7.4](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-configure@4.7.3...@pie-element/hotspot-configure@4.7.4) (2022-06-13)
 
 **Note:** Version bump only for package @pie-element/hotspot-configure

package/configure/lib/defaults.js

@@ -60,7 +60,17 @@ var _default = {
       enabled: true,
       label: 'Preserve aspect ratio'
     },
-    minShapes: 2
+    minShapes: 2,
+    maxImageWidth: {
+      teacherInstructions: 300,
+      prompt: 300,
+      rationale: 300
+    },
+    maxImageHeight: {
+      teacherInstructions: 300,
+      prompt: 300,
+      rationale: 300
+    }
   }
 };
 exports["default"] = _default;

package/configure/lib/defaults.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/defaults.js"],"names":["model","prompt","toolbarEditorPosition","promptEnabled","imageUrl","shapes","rectangles","polygons","multipleCorrect","partialScoring","dimensions","height","width","hotspotColor","hotspotList","outlineColor","outlineList","rationaleEnabled","teacherInstructionsEnabled","studentInstructionsEnabled","strokeWidth","configuration","settings","label","rationale","spellCheck","enabled","teacherInstructions","preserveAspectRatio","minShapes"],"mappings":";;;;;;eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,MAAM,EAAE,6BADH;AAELC,IAAAA,qBAAqB,EAAE,QAFlB;AAGLC,IAAAA,aAAa,EAAE,IAHV;AAILC,IAAAA,QAAQ,EAAE,EAJL;AAKLC,IAAAA,MAAM,EAAE;AACNC,MAAAA,UAAU,EAAE,EADN;AAENC,MAAAA,QAAQ,EAAE;AAFJ,KALH;AASLC,IAAAA,eAAe,EAAE,IATZ;AAULC,IAAAA,cAAc,EAAE,KAVX;AAWLC,IAAAA,UAAU,EAAE;AACVC,MAAAA,MAAM,EAAE,CADE;AAEVC,MAAAA,KAAK,EAAE;AAFG,KAXP;AAeLC,IAAAA,YAAY,EAAE,2BAfT;AAgBLC,IAAAA,WAAW,EAAE,CACX,2BADW,CAhBR;AAmBLC,IAAAA,YAAY,EAAE,MAnBT;AAoBLC,IAAAA,WAAW,EAAE,CACX,MADW,CApBR;AAuBLC,IAAAA,gBAAgB,EAAE,IAvBb;AAwBLC,IAAAA,0BAA0B,EAAE,IAxBvB;AAyBLC,IAAAA,0BAA0B,EAAE,IAzBvB;AA0BLC,IAAAA,WAAW,EAAE;AA1BR,GADM;AA6BbC,EAAAA,aAAa,EAAE;AACbb,IAAAA,eAAe,EAAE;AACfc,MAAAA,QAAQ,EAAE,IADK;AAEfC,MAAAA,KAAK,EAAE;AAFQ,KADJ;AAKbd,IAAAA,cAAc,EAAE;AACda,MAAAA,QAAQ,EAAE,KADI;AAEdC,MAAAA,KAAK,EAAE;AAFO,KALH;AASbC,IAAAA,SAAS,EAAE;AACTF,MAAAA,QAAQ,EAAE,IADD;AAETC,MAAAA,KAAK,EAAE;AAFE,KATE;AAabtB,IAAAA,MAAM,EAAE;AACNqB,MAAAA,QAAQ,EAAE,IADJ;AAENC,MAAAA,KAAK,EAAE;AAFD,KAbK;AAiBbE,IAAAA,UAAU,EAAE;AACVF,MAAAA,KAAK,EAAE,YADG;AAEVD,MAAAA,QAAQ,EAAC,KAFC;AAGVI,MAAAA,OAAO,EAAC;AAHE,KAjBC;AAsBbC,IAAAA,mBAAmB,EAAE;AACnBL,MAAAA,QAAQ,EAAE,IADS;AAEnBC,MAAAA,KAAK,EAAE;AAFY,KAtBR;AA0BbK,IAAAA,mBAAmB,EAAE;AACnBN,MAAAA,QAAQ,EAAE,KADS;AAEnBI,MAAAA,OAAO,EAAE,IAFU;AAGnBH,MAAAA,KAAK,EAAE;AAHY,KA1BR;AA+BbM,IAAAA,SAAS,EAAE;AA/BE;AA7BF,C","sourcesContent":["export default {\n  model: {\n    prompt: 'This is the question prompt',\n    toolbarEditorPosition: 'bottom',\n    promptEnabled: true,\n    imageUrl: '',\n    shapes: {\n      rectangles: [],\n      polygons: []\n    },\n    multipleCorrect: true,\n    partialScoring: false,\n    dimensions: {\n      height: 0,\n      width: 0\n    },\n    hotspotColor: 'rgba(137, 183, 244, 0.65)',\n    hotspotList: [\n      'rgba(137, 183, 244, 0.65)'\n    ],\n    outlineColor: 'blue',\n    outlineList: [\n      'blue'\n    ],\n    rationaleEnabled: true,\n    teacherInstructionsEnabled: true,\n    studentInstructionsEnabled: true,\n    strokeWidth: 5\n  },\n  configuration: {\n    multipleCorrect: {\n      settings: true,\n      label: 'Multiple Correct Responses'\n    },\n    partialScoring: {\n      settings: false,\n      label: 'Allow Partial Scoring'\n    },\n    rationale: {\n      settings: true,\n      label: 'Rationale'\n    },\n    prompt: {\n      settings: true,\n      label: 'Prompt'\n    },\n    spellCheck: {\n      label: 'Spellcheck',\n      settings:false,\n      enabled:true\n    },\n    teacherInstructions: {\n      settings: true,\n      label: 'Teacher Instructions'\n    },\n    preserveAspectRatio: {\n      settings: false,\n      enabled: true,\n      label: 'Preserve aspect ratio'\n    },\n    minShapes: 2\n  }\n};\n"],"file":"defaults.js"}
+{"version":3,"sources":["../src/defaults.js"],"names":["model","prompt","toolbarEditorPosition","promptEnabled","imageUrl","shapes","rectangles","polygons","multipleCorrect","partialScoring","dimensions","height","width","hotspotColor","hotspotList","outlineColor","outlineList","rationaleEnabled","teacherInstructionsEnabled","studentInstructionsEnabled","strokeWidth","configuration","settings","label","rationale","spellCheck","enabled","teacherInstructions","preserveAspectRatio","minShapes","maxImageWidth","maxImageHeight"],"mappings":";;;;;;eAAe;AACbA,EAAAA,KAAK,EAAE;AACLC,IAAAA,MAAM,EAAE,6BADH;AAELC,IAAAA,qBAAqB,EAAE,QAFlB;AAGLC,IAAAA,aAAa,EAAE,IAHV;AAILC,IAAAA,QAAQ,EAAE,EAJL;AAKLC,IAAAA,MAAM,EAAE;AACNC,MAAAA,UAAU,EAAE,EADN;AAENC,MAAAA,QAAQ,EAAE;AAFJ,KALH;AASLC,IAAAA,eAAe,EAAE,IATZ;AAULC,IAAAA,cAAc,EAAE,KAVX;AAWLC,IAAAA,UAAU,EAAE;AACVC,MAAAA,MAAM,EAAE,CADE;AAEVC,MAAAA,KAAK,EAAE;AAFG,KAXP;AAeLC,IAAAA,YAAY,EAAE,2BAfT;AAgBLC,IAAAA,WAAW,EAAE,CACX,2BADW,CAhBR;AAmBLC,IAAAA,YAAY,EAAE,MAnBT;AAoBLC,IAAAA,WAAW,EAAE,CACX,MADW,CApBR;AAuBLC,IAAAA,gBAAgB,EAAE,IAvBb;AAwBLC,IAAAA,0BAA0B,EAAE,IAxBvB;AAyBLC,IAAAA,0BAA0B,EAAE,IAzBvB;AA0BLC,IAAAA,WAAW,EAAE;AA1BR,GADM;AA6BbC,EAAAA,aAAa,EAAE;AACbb,IAAAA,eAAe,EAAE;AACfc,MAAAA,QAAQ,EAAE,IADK;AAEfC,MAAAA,KAAK,EAAE;AAFQ,KADJ;AAKbd,IAAAA,cAAc,EAAE;AACda,MAAAA,QAAQ,EAAE,KADI;AAEdC,MAAAA,KAAK,EAAE;AAFO,KALH;AASbC,IAAAA,SAAS,EAAE;AACTF,MAAAA,QAAQ,EAAE,IADD;AAETC,MAAAA,KAAK,EAAE;AAFE,KATE;AAabtB,IAAAA,MAAM,EAAE;AACNqB,MAAAA,QAAQ,EAAE,IADJ;AAENC,MAAAA,KAAK,EAAE;AAFD,KAbK;AAiBbE,IAAAA,UAAU,EAAE;AACVF,MAAAA,KAAK,EAAE,YADG;AAEVD,MAAAA,QAAQ,EAAC,KAFC;AAGVI,MAAAA,OAAO,EAAC;AAHE,KAjBC;AAsBbC,IAAAA,mBAAmB,EAAE;AACnBL,MAAAA,QAAQ,EAAE,IADS;AAEnBC,MAAAA,KAAK,EAAE;AAFY,KAtBR;AA0BbK,IAAAA,mBAAmB,EAAE;AACnBN,MAAAA,QAAQ,EAAE,KADS;AAEnBI,MAAAA,OAAO,EAAE,IAFU;AAGnBH,MAAAA,KAAK,EAAE;AAHY,KA1BR;AA+BbM,IAAAA,SAAS,EAAE,CA/BE;AAgCbC,IAAAA,aAAa,EAAE;AACbH,MAAAA,mBAAmB,EAAE,GADR;AAEb1B,MAAAA,MAAM,EAAE,GAFK;AAGbuB,MAAAA,SAAS,EAAE;AAHE,KAhCF;AAqCbO,IAAAA,cAAc,EAAE;AACdJ,MAAAA,mBAAmB,EAAE,GADP;AAEd1B,MAAAA,MAAM,EAAE,GAFM;AAGduB,MAAAA,SAAS,EAAE;AAHG;AArCH;AA7BF,C","sourcesContent":["export default {\n  model: {\n    prompt: 'This is the question prompt',\n    toolbarEditorPosition: 'bottom',\n    promptEnabled: true,\n    imageUrl: '',\n    shapes: {\n      rectangles: [],\n      polygons: []\n    },\n    multipleCorrect: true,\n    partialScoring: false,\n    dimensions: {\n      height: 0,\n      width: 0\n    },\n    hotspotColor: 'rgba(137, 183, 244, 0.65)',\n    hotspotList: [\n      'rgba(137, 183, 244, 0.65)'\n    ],\n    outlineColor: 'blue',\n    outlineList: [\n      'blue'\n    ],\n    rationaleEnabled: true,\n    teacherInstructionsEnabled: true,\n    studentInstructionsEnabled: true,\n    strokeWidth: 5\n  },\n  configuration: {\n    multipleCorrect: {\n      settings: true,\n      label: 'Multiple Correct Responses'\n    },\n    partialScoring: {\n      settings: false,\n      label: 'Allow Partial Scoring'\n    },\n    rationale: {\n      settings: true,\n      label: 'Rationale'\n    },\n    prompt: {\n      settings: true,\n      label: 'Prompt'\n    },\n    spellCheck: {\n      label: 'Spellcheck',\n      settings:false,\n      enabled:true\n    },\n    teacherInstructions: {\n      settings: true,\n      label: 'Teacher Instructions'\n    },\n    preserveAspectRatio: {\n      settings: false,\n      enabled: true,\n      label: 'Preserve aspect ratio'\n    },\n    minShapes: 2,\n    maxImageWidth: {\n      teacherInstructions: 300,\n      prompt: 300,\n      rationale: 300,\n    },\n    maxImageHeight: {\n      teacherInstructions: 300,\n      prompt: 300,\n      rationale: 300,\n    }\n  }\n};\n"],"file":"defaults.js"}

package/configure/lib/root.js

@@ -134,7 +134,11 @@ var Root = /*#__PURE__*/function (_React$Component) {
           _ref$spellCheck = _ref.spellCheck,
           spellCheck = _ref$spellCheck === void 0 ? {} : _ref$spellCheck,
           _ref$preserveAspectRa = _ref.preserveAspectRatio,
-          preserveAspectRatio = _ref$preserveAspectRa === void 0 ? {} : _ref$preserveAspectRa;
+          preserveAspectRatio = _ref$preserveAspectRa === void 0 ? {} : _ref$preserveAspectRa,
+          _ref$maxImageWidth = _ref.maxImageWidth,
+          maxImageWidth = _ref$maxImageWidth === void 0 ? {} : _ref$maxImageWidth,
+          _ref$maxImageHeight = _ref.maxImageHeight,
+          maxImageHeight = _ref$maxImageHeight === void 0 ? {} : _ref$maxImageHeight;
 
       var _ref2 = model || {},
           teacherInstructionsEnabled = _ref2.teacherInstructionsEnabled,
@@ -149,6 +153,8 @@ var Root = /*#__PURE__*/function (_React$Component) {
 
       var toolbarOpts = {};
       var validationMessage = (0, _utils.generateValidationMessage)(configuration);
+      var defaultImageMaxWidth = maxImageWidth && maxImageWidth.prompt;
+      var defaultImageMaxHeight = maxImageHeight && maxImageHeight.prompt;
 
       switch (model.toolbarEditorPosition) {
         case 'top':
@@ -192,7 +198,9 @@ var Root = /*#__PURE__*/function (_React$Component) {
         imageSupport: imageSupport,
         nonEmpty: false,
         toolbarOpts: toolbarOpts,
-        spellCheck: spellCheckEnabled
+        spellCheck: spellCheckEnabled,
+        maxImageWidth: maxImageWidth && maxImageWidth.teacherInstructions || defaultImageMaxWidth,
+        maxImageHeight: maxImageHeight && maxImageHeight.teacherInstructions || defaultImageMaxHeight
       })), promptEnabled && /*#__PURE__*/_react["default"].createElement(_configUi.InputContainer, {
         label: prompt.label,
         className: classes.prompt
@@ -202,7 +210,9 @@ var Root = /*#__PURE__*/function (_React$Component) {
         imageSupport: imageSupport,
         nonEmpty: false,
         toolbarOpts: toolbarOpts,
-        spellCheck: spellCheckEnabled
+        spellCheck: spellCheckEnabled,
+        maxImageWidth: defaultImageMaxWidth,
+        maxImageHeight: defaultImageMaxHeight
       })), rationaleEnabled && /*#__PURE__*/_react["default"].createElement(_configUi.InputContainer, {
         label: rationale.label,
         className: classes.prompt
@@ -211,7 +221,9 @@ var Root = /*#__PURE__*/function (_React$Component) {
         onChange: onRationaleChanged,
         imageSupport: imageSupport,
         toolbarOpts: toolbarOpts,
-        spellCheck: spellCheckEnabled
+        spellCheck: spellCheckEnabled,
+        maxImageWidth: maxImageWidth && maxImageWidth.rationale || defaultImageMaxWidth,
+        maxImageHeight: maxImageHeight && maxImageHeight.rationale || defaultImageMaxHeight
       })), /*#__PURE__*/_react["default"].createElement("div", {
         className: (0, _classnames["default"])(classes.label, classes.flexContainer)
       }, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {

package/configure/lib/root.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/root.jsx"],"names":["Panel","settings","toggle","Root","fieldType","color","onColorChanged","props","cType","value","resizeType","model","dimensions","shapes","configuration","preserveAspectRatio","onUpdateImageDimension","onUpdateShapes","nextImageDimensions","updatedDimensions","enabled","shapesArray","updatedShapes","classes","imageSupport","onConfigurationChanged","onImageUpload","onModelChangedByConfig","onPromptChanged","onRationaleChanged","onTeacherInstructionsChanged","multipleCorrect","partialScoring","prompt","teacherInstructions","rationale","spellCheck","teacherInstructionsEnabled","promptEnabled","rationaleEnabled","spellCheckEnabled","errors","shapesError","selectionsError","toolbarOpts","validationMessage","toolbarEditorPosition","position","base","label","Properties","regular","flexContainer","subheading","tooltip","errorText","hotspotColor","hotspotList","outlineColor","outlineList","handleColorChange","imageUrl","strokeWidth","width","e","handleOnUpdateImageDimensions","field","height","React","Component","styles","theme","marginTop","spacing","unit","container","display","flex","paddingTop","marginRight","marginBottom","switchElement","justifyContent","margin","alignItems","fontSize","whiteSpace","maxWidth","padding","propTypes","PropTypes","object","isRequired","shape","add","func"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AAMA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;AAQA,IAAQA,KAAR,GAA0BC,kBAA1B,CAAQD,KAAR;AAAA,IAAeE,MAAf,GAA0BD,kBAA1B,CAAeC,MAAf;;IAEaC,I;;;;;;;;;;;;;;;0GACS,UAACC,SAAD,EAAYC,KAAZ,EAAsB;AACxC,UAAQC,cAAR,GAA2B,MAAKC,KAAhC,CAAQD,cAAR;AACA,UAAME,KAAK,aAAMJ,SAAN,UAAX;AAEAE,MAAAA,cAAc,CAACE,KAAD,EAAQH,KAAR,CAAd;AACD,K;sHAE+B,UAACI,KAAD,EAAQC,UAAR,EAAuB;AACrD,wBAKI,MAAKH,KALT;AAAA,0CACEI,KADF;AAAA,UACWC,UADX,qBACWA,UADX;AAAA,UACuBC,MADvB,qBACuBA,MADvB;AAAA,8CAEEC,aAFF,CAEmBC,mBAFnB;AAAA,UAEmBA,mBAFnB,sCAEyC,EAFzC;AAAA,UAGEC,sBAHF,eAGEA,sBAHF;AAAA,UAIEC,cAJF,eAIEA,cAJF;;AAOA,UAAMC,mBAAmB,mCAAQN,UAAR,4CAAqBF,UAArB,EAAkCD,KAAlC,EAAzB,CARqD,CAUrD;;;AACA,UAAMU,iBAAiB,GAAG,kCACxBP,UADwB,EAExBM,mBAFwB,EAGxBH,mBAAmB,CAACK,OAHI,EAIxBV,UAJwB,CAA1B,CAXqD,CAiBrD;;AACA,UAAMW,WAAW,GAAG,yBAAaR,MAAb,CAApB,CAlBqD,CAmBrD;;AACA,UAAMS,aAAa,GAAG,6BAAiBV,UAAjB,EAA6BO,iBAA7B,EAAgDE,WAAhD,CAAtB,CApBqD,CAqBrD;;AAEAJ,MAAAA,cAAc,CAAC,wBAAYK,aAAZ,CAAD,CAAd;AACAN,MAAAA,sBAAsB,CAACG,iBAAD,CAAtB;AACD,K;;;;;;WAED,kBAAS;AAAA;;AACP,yBAaI,KAAKZ,KAbT;AAAA,UACEgB,OADF,gBACEA,OADF;AAAA,UAEET,aAFF,gBAEEA,aAFF;AAAA,UAGEH,KAHF,gBAGEA,KAHF;AAAA,UAIEa,YAJF,gBAIEA,YAJF;AAAA,UAKEC,sBALF,gBAKEA,sBALF;AAAA,UAMEC,aANF,gBAMEA,aANF;AAAA,UAOEC,sBAPF,gBAOEA,sBAPF;AAAA,UAQEC,eARF,gBAQEA,eARF;AAAA,UASEC,kBATF,gBASEA,kBATF;AAAA,UAUEb,sBAVF,gBAUEA,sBAVF;AAAA,UAWEc,4BAXF,gBAWEA,4BAXF;AAAA,UAYEb,cAZF,gBAYEA,cAZF;;AAcA,iBAQIH,aAAa,IAAI,EARrB;AAAA,sCACEiB,eADF;AAAA,UACEA,eADF,qCACoB,EADpB;AAAA,qCAEEC,cAFF;AAAA,UAEEA,cAFF,oCAEmB,EAFnB;AAAA,6BAGEC,MAHF;AAAA,UAGEA,MAHF,4BAGW,EAHX;AAAA,uCAIEC,mBAJF;AAAA,UAIEA,mBAJF,sCAIwB,EAJxB;AAAA,gCAKEC,SALF;AAAA,UAKEA,SALF,+BAKc,EALd;AAAA,iCAMEC,UANF;AAAA,UAMEA,UANF,gCAMe,EANf;AAAA,uCAOErB,mBAPF;AAAA,UAOEA,mBAPF,sCAOwB,EAPxB;;AASA,kBAAmGJ,KAAK,IAAI,EAA5G;AAAA,UAAQ0B,0BAAR,SAAQA,0BAAR;AAAA,UAAoCC,aAApC,SAAoCA,aAApC;AAAA,UAAmDC,gBAAnD,SAAmDA,gBAAnD;AAAA,UAAqEC,iBAArE,SAAqEA,iBAArE;AAAA,UAAwFC,MAAxF,SAAwFA,MAAxF;;AACA,kBAAyCA,MAAM,IAAI,EAAnD;AAAA,UAAQC,WAAR,SAAQA,WAAR;AAAA,UAAqBC,eAArB,SAAqBA,eAArB;;AACA,UAAMC,WAAW,GAAG,EAApB;AAEA,UAAMC,iBAAiB,GAAG,sCAA0B/B,aAA1B,CAA1B;;AAEA,cAAQH,KAAK,CAACmC,qBAAd;AACE,aAAK,KAAL;AACEF,UAAAA,WAAW,CAACG,QAAZ,GAAuB,KAAvB;AACA;;AACF;AACEH,UAAAA,WAAW,CAACG,QAAZ,GAAuB,QAAvB;AACA;AANJ;;AASA,0BACE;AAAK,QAAA,SAAS,EAAExB,OAAO,CAACyB;AAAxB,sBACE,gCAAC,gBAAD,CAAQ,YAAR;AACE,QAAA,QAAQ,eACN,gCAAC,KAAD;AACE,UAAA,KAAK,EAAErC,KADT;AAEE,UAAA,aAAa,EAAEgB,sBAFjB;AAGE,UAAA,aAAa,EAAEb,aAHjB;AAIE,UAAA,qBAAqB,EAAEW,sBAJzB;AAKE,UAAA,MAAM,EAAE;AACN,wBAAY;AACVM,cAAAA,eAAe,EACbA,eAAe,CAAC9B,QAAhB,IAA4BC,MAAM,CAAC6B,eAAe,CAACkB,KAAjB,CAF1B;AAGVjB,cAAAA,cAAc,EACZA,cAAc,CAAC/B,QAAf,IAA2BC,MAAM,CAAC8B,cAAc,CAACiB,KAAhB,CAJzB;AAKVX,cAAAA,aAAa,EACXL,MAAM,CAAChC,QAAP,IAAmBC,MAAM,CAAC+B,MAAM,CAACgB,KAAR;AANjB,aADN;AASNC,YAAAA,UAAU,EAAE;AACVb,cAAAA,0BAA0B,EACxBH,mBAAmB,CAACjC,QAApB,IAAgCC,MAAM,CAACgC,mBAAmB,CAACe,KAArB,CAF9B;AAGVV,cAAAA,gBAAgB,EAAEJ,SAAS,CAAClC,QAAV,IAAsBC,MAAM,CAACiC,SAAS,CAACc,KAAX,CAHpC;AAIVT,cAAAA,iBAAiB,EACfJ,UAAU,CAACnC,QAAX,IAAuBC,MAAM,CAACkC,UAAU,CAACa,KAAZ;AALrB;AATN;AALV;AAFJ,sBA2BE;AAAK,QAAA,SAAS,EAAE1B,OAAO,CAAC4B;AAAxB,SACGd,0BAA0B,iBACzB,gCAAC,wBAAD;AAAgB,QAAA,KAAK,EAAEH,mBAAmB,CAACe,KAA3C;AAAkD,QAAA,SAAS,EAAE1B,OAAO,CAACU;AAArE,sBACE,gCAAC,wBAAD;AACE,QAAA,MAAM,EAAEtB,KAAK,CAACuB,mBAAN,IAA6B,EADvC;AAEE,QAAA,QAAQ,EAAEJ,4BAFZ;AAGE,QAAA,YAAY,EAAEN,YAHhB;AAIE,QAAA,QAAQ,EAAE,KAJZ;AAKE,QAAA,WAAW,EAAEoB,WALf;AAME,QAAA,UAAU,EAAEJ;AANd,QADF,CAFJ,EAaGF,aAAa,iBACZ,gCAAC,wBAAD;AAAgB,QAAA,KAAK,EAAEL,MAAM,CAACgB,KAA9B;AAAqC,QAAA,SAAS,EAAE1B,OAAO,CAACU;AAAxD,sBACE,gCAAC,wBAAD;AACE,QAAA,MAAM,EAAEtB,KAAK,CAACsB,MAAN,IAAgB,EAD1B;AAEE,QAAA,QAAQ,EAAEL,eAFZ;AAGE,QAAA,YAAY,EAAEJ,YAHhB;AAIE,QAAA,QAAQ,EAAE,KAJZ;AAKE,QAAA,WAAW,EAAEoB,WALf;AAME,QAAA,UAAU,EAAEJ;AANd,QADF,CAdJ,EA0BGD,gBAAgB,iBACf,gCAAC,wBAAD;AACE,QAAA,KAAK,EAAEJ,SAAS,CAACc,KADnB;AAEE,QAAA,SAAS,EAAE1B,OAAO,CAACU;AAFrB,sBAIE,gCAAC,wBAAD;AACE,QAAA,MAAM,EAAEtB,KAAK,CAACwB,SAAN,IAAmB,EAD7B;AAEE,QAAA,QAAQ,EAAEN,kBAFZ;AAGE,QAAA,YAAY,EAAEL,YAHhB;AAIE,QAAA,WAAW,EAAEoB,WAJf;AAKE,QAAA,UAAU,EAAEJ;AALd,QAJF,CA3BJ,eAyCE;AAAK,QAAA,SAAS,EAAE,4BAAWjB,OAAO,CAAC0B,KAAnB,EAA0B1B,OAAO,CAAC6B,aAAlC;AAAhB,sBACE,gCAAC,sBAAD;AAAY,QAAA,SAAS,EAAE7B,OAAO,CAAC8B,UAA/B;AAA2C,QAAA,OAAO,EAAC;AAAnD,0BADF,eAIE,gCAAC,mBAAD;AACE,QAAA,OAAO,EAAE;AAAEC,UAAAA,OAAO,EAAE/B,OAAO,CAAC+B;AAAnB,SADX;AAEE,QAAA,oBAAoB,MAFtB;AAGE,QAAA,oBAAoB,MAHtB;AAIE,QAAA,SAAS,EAAE,MAJb;AAKE,QAAA,KAAK,EAAET;AALT,sBAOE,gCAAC,gBAAD;AAAM,QAAA,QAAQ,EAAE,OAAhB;AAAyB,QAAA,KAAK,EAAE,SAAhC;AAA2C,QAAA,KAAK,EAAE;AAAE,mBAAO;AAAT;AAAlD,QAPF,CAJF,CAzCF,EAuDGH,WAAW,iBAAI;AAAK,QAAA,SAAS,EAAEnB,OAAO,CAACgC;AAAxB,SAAoCb,WAApC,CAvDlB,EAwDGC,eAAe,iBAAI;AAAK,QAAA,SAAS,EAAEpB,OAAO,CAACgC;AAAxB,SAAoCZ,eAApC,CAxDtB,eA0DE,gCAAC,0BAAD;AACE,QAAA,YAAY,EAAEhC,KAAK,CAAC6C,YADtB;AAEE,QAAA,WAAW,EAAE7C,KAAK,CAAC8C,WAFrB;AAGE,QAAA,YAAY,EAAE9C,KAAK,CAAC+C,YAHtB;AAIE,QAAA,WAAW,EAAE/C,KAAK,CAACgD,WAJrB;AAKE,QAAA,oBAAoB,EAAE,8BAAAtD,KAAK;AAAA,iBACzB,MAAI,CAACuD,iBAAL,CAAuB,SAAvB,EAAkCvD,KAAlC,CADyB;AAAA,SAL7B;AAQE,QAAA,oBAAoB,EAAE,8BAAAA,KAAK;AAAA,iBACzB,MAAI,CAACuD,iBAAL,CAAuB,SAAvB,EAAkCvD,KAAlC,CADyB;AAAA;AAR7B,QA1DF,eAuEE,gCAAC,4BAAD;AACE,QAAA,UAAU,EAAEM,KAAK,CAACC,UADpB;AAEE,QAAA,QAAQ,EAAED,KAAK,CAACkD,QAFlB;AAGE,QAAA,eAAe,EAAElD,KAAK,CAACoB,eAHzB;AAIE,QAAA,YAAY,EAAEpB,KAAK,CAAC6C,YAJtB;AAKE,QAAA,YAAY,EAAE7C,KAAK,CAAC+C,YALtB;AAME,QAAA,sBAAsB,EAAE1C,sBAN1B;AAOE,QAAA,cAAc,EAAEC,cAPlB;AAQE,QAAA,aAAa,EAAES,aARjB;AASE,QAAA,MAAM,EAAEf,KAAK,CAACE,MAThB;AAUE,QAAA,WAAW,EAAEF,KAAK,CAACmD,WAVrB;AAWE,QAAA,0BAA0B,EAAE/C,mBAAmB,CAACK;AAXlD,QAvEF,EAqFGT,KAAK,CAACkD,QAAN,iBACC,0DACE,gCAAC,sBAAD;AAAY,QAAA,SAAS,EAAEtC,OAAO,CAAC0B,KAA/B;AAAsC,QAAA,OAAO,EAAC;AAA9C,4BADF,eAKE;AAAK,QAAA,SAAS,EAAE1B,OAAO,CAACX;AAAxB,sBACE,gCAAC,yBAAD;AACE,QAAA,GAAG,EAAC,sBADN;AAEE,QAAA,KAAK,EAAC,OAFR;AAGE,QAAA,KAAK,EAAED,KAAK,CAACC,UAAN,CAAiBmD,KAH1B;AAIE,QAAA,GAAG,EAAE,CAJP;AAKE,QAAA,QAAQ,EAAE,kBAACC,CAAD,EAAIvD,KAAJ;AAAA,iBAAc,MAAI,CAACwD,6BAAL,CAAmCxD,KAAnC,EAA0C,OAA1C,CAAd;AAAA,SALZ;AAME,QAAA,yBAAyB,MAN3B;AAOE,QAAA,SAAS,EAAEc,OAAO,CAAC2C;AAPrB,QADF,eAUE,gCAAC,yBAAD;AACE,QAAA,GAAG,EAAC,uBADN;AAEE,QAAA,KAAK,EAAC,QAFR;AAGE,QAAA,KAAK,EAAEvD,KAAK,CAACC,UAAN,CAAiBuD,MAH1B;AAIE,QAAA,GAAG,EAAE,CAJP;AAKE,QAAA,QAAQ,EAAE,kBAACH,CAAD,EAAIvD,KAAJ;AAAA,iBAAc,MAAI,CAACwD,6BAAL,CAAmCxD,KAAnC,EAA0C,QAA1C,CAAd;AAAA,SALZ;AAME,QAAA,yBAAyB,MAN3B;AAOE,QAAA,SAAS,EAAEc,OAAO,CAAC2C;AAPrB,QAVF,CALF,CAtFJ,CA3BF,CADF,CADF;AAkJD;;;EA5NuBE,kBAAMC,S;;;;AA+NhC,IAAMC,MAAM,GAAG,SAATA,MAAS,CAAAC,KAAK;AAAA,SAAK;AACvBvB,IAAAA,IAAI,EAAE;AACJwB,MAAAA,SAAS,EAAED,KAAK,CAACE,OAAN,CAAcC,IAAd,GAAqB;AAD5B,KADiB;AAIvBC,IAAAA,SAAS,EAAE;AACTC,MAAAA,OAAO,EAAE,MADA;AAETJ,MAAAA,SAAS,EAAED,KAAK,CAACE,OAAN,CAAcC;AAFhB,KAJY;AAQvB9D,IAAAA,UAAU,EAAE;AACVgE,MAAAA,OAAO,EAAE;AADC,KARW;AAWvBV,IAAAA,KAAK,EAAE;AACLW,MAAAA,IAAI,EAAE,CADD;AAELd,MAAAA,KAAK,EAAE;AAFF,KAXgB;AAevBd,IAAAA,KAAK,EAAE;AACLuB,MAAAA,SAAS,EAAED,KAAK,CAACE,OAAN,CAAcC,IAAd,GAAqB;AAD3B,KAfgB;AAkBvBzC,IAAAA,MAAM,EAAE;AACN6C,MAAAA,UAAU,EAAEP,KAAK,CAACE,OAAN,CAAcC,IAAd,GAAqB,CAD3B;AAENX,MAAAA,KAAK,EAAE;AAFD,KAlBe;AAsBvBV,IAAAA,UAAU,EAAE;AACV0B,MAAAA,WAAW,EAAE;AADH,KAtBW;AAyBvB5B,IAAAA,OAAO,EAAE;AACP6B,MAAAA,YAAY,EAAET,KAAK,CAACE,OAAN,CAAcC,IAAd,GAAqB;AAD5B,KAzBc;AA4BvBO,IAAAA,aAAa,EAAE;AACbC,MAAAA,cAAc,EAAE,eADH;AAEbC,MAAAA,MAAM,EAAE;AAFK,KA5BQ;AAgCvB/B,IAAAA,aAAa,EAAE;AACbwB,MAAAA,OAAO,EAAE,MADI;AAEbQ,MAAAA,UAAU,EAAE;AAFC,KAhCQ;AAoCvB9B,IAAAA,OAAO,EAAE;AACP+B,MAAAA,QAAQ,EAAE,MADH;AAEPC,MAAAA,UAAU,EAAE,KAFL;AAGPC,MAAAA,QAAQ,EAAE;AAHH,KApCc;AAyCvBhC,IAAAA,SAAS,EAAE;AACT8B,MAAAA,QAAQ,EAAE,MADD;AAEThF,MAAAA,KAAK,EAAE,KAFE;AAGTmF,MAAAA,OAAO,EAAE;AAHA;AAzCY,GAAL;AAAA,CAApB;;AAgDArF,IAAI,CAACsF,SAAL,GAAiB;AACflE,EAAAA,OAAO,EAAEmE,sBAAUC,MAAV,CAAiBC,UADX;AAEf9E,EAAAA,aAAa,EAAE4E,sBAAUC,MAFV;AAGfhF,EAAAA,KAAK,EAAE+E,sBAAUC,MAAV,CAAiBC,UAHT;AAIfpE,EAAAA,YAAY,EAAEkE,sBAAUG,KAAV,CAAgB;AAC5BC,IAAAA,GAAG,EAAEJ,sBAAUK,IADa;AAE5B,cAAQL,sBAAUK;AAFU,GAAhB,CAJC;AAQfrE,EAAAA,aAAa,EAAEgE,sBAAUK,IAAV,CAAeH,UARf;AASftF,EAAAA,cAAc,EAAEoF,sBAAUK,IAAV,CAAeH,UAThB;AAUfhE,EAAAA,eAAe,EAAE8D,sBAAUK,IAAV,CAAeH,UAVjB;AAWf5E,EAAAA,sBAAsB,EAAE0E,sBAAUK,IAAV,CAAeH,UAXxB;AAYf3E,EAAAA,cAAc,EAAEyE,sBAAUK,IAAV,CAAeH,UAZhB;AAafjE,EAAAA,sBAAsB,EAAE+D,sBAAUK,IAAV,CAAeH,UAbxB;AAcf/D,EAAAA,kBAAkB,EAAE6D,sBAAUK,IAAV,CAAeH,UAdpB;AAefnE,EAAAA,sBAAsB,EAAEiE,sBAAUK,IAAV,CAAeH,UAfxB;AAgBf9D,EAAAA,4BAA4B,EAAE4D,sBAAUK,IAAV,CAAeH;AAhB9B,CAAjB;;eAmBe,wBAAWtB,MAAX,EAAmBnE,IAAnB,C","sourcesContent":["import React from 'react';\nimport {\n  settings,\n  layout,\n  InputContainer,\n  NumberTextField\n} from '@pie-lib/config-ui';\nimport PropTypes from 'prop-types';\nimport EditableHtml from '@pie-lib/editable-html';\nimport { withStyles } from '@material-ui/core/styles';\nimport Typography from '@material-ui/core/Typography';\nimport Info from '@material-ui/icons/Info';\nimport Tooltip from '@material-ui/core/Tooltip';\nimport HotspotPalette from './hotspot-palette';\nimport HotspotContainer from './hotspot-container';\nimport classNames from 'classnames';\nimport {\n  updateImageDimensions,\n  generateValidationMessage,\n  getUpdatedShapes,\n  getAllShapes,\n  groupShapes\n} from './utils';\n\nconst { Panel, toggle } = settings;\n\nexport class Root extends React.Component {\n  handleColorChange = (fieldType, color) => {\n    const { onColorChanged } = this.props;\n    const cType = `${fieldType}Color`;\n\n    onColorChanged(cType, color);\n  };\n\n  handleOnUpdateImageDimensions = (value, resizeType) => {\n    const {\n      model: { dimensions, shapes },\n      configuration: { preserveAspectRatio = {} },\n      onUpdateImageDimension,\n      onUpdateShapes,\n    } = this.props;\n\n    const nextImageDimensions = { ...dimensions, [resizeType]: value };\n\n    // if preserveAspectRatio.enabled, updateImageDimensions function makes sure aspect ratio is kept\n    const updatedDimensions = updateImageDimensions(\n      dimensions,\n      nextImageDimensions,\n      preserveAspectRatio.enabled,\n      resizeType\n    );\n    // transform shapes map into shapes array\n    const shapesArray = getAllShapes(shapes);\n    // transform all the shapes to fit the re-sized image\n    const updatedShapes = getUpdatedShapes(dimensions, updatedDimensions, shapesArray);\n    // transform shapes array back into shapes map\n\n    onUpdateShapes(groupShapes(updatedShapes));\n    onUpdateImageDimension(updatedDimensions);\n  };\n\n  render() {\n    const {\n      classes,\n      configuration,\n      model,\n      imageSupport,\n      onConfigurationChanged,\n      onImageUpload,\n      onModelChangedByConfig,\n      onPromptChanged,\n      onRationaleChanged,\n      onUpdateImageDimension,\n      onTeacherInstructionsChanged,\n      onUpdateShapes\n    } = this.props;\n    const {\n      multipleCorrect = {},\n      partialScoring = {},\n      prompt = {},\n      teacherInstructions = {},\n      rationale = {},\n      spellCheck = {},\n      preserveAspectRatio = {}\n    } = configuration || {};\n    const { teacherInstructionsEnabled, promptEnabled, rationaleEnabled, spellCheckEnabled, errors } = model || {};\n    const { shapesError, selectionsError } = errors || {};\n    const toolbarOpts = {};\n\n    const validationMessage = generateValidationMessage(configuration);\n\n    switch (model.toolbarEditorPosition) {\n      case 'top':\n        toolbarOpts.position = 'top';\n        break;\n      default:\n        toolbarOpts.position = 'bottom';\n        break;\n    }\n\n    return (\n      <div className={classes.base}>\n        <layout.ConfigLayout\n          settings={\n            <Panel\n              model={model}\n              onChangeModel={onModelChangedByConfig}\n              configuration={configuration}\n              onChangeConfiguration={onConfigurationChanged}\n              groups={{\n                'Settings': {\n                  multipleCorrect:\n                    multipleCorrect.settings && toggle(multipleCorrect.label),\n                  partialScoring:\n                    partialScoring.settings && toggle(partialScoring.label),\n                  promptEnabled:\n                    prompt.settings && toggle(prompt.label),\n                },\n                Properties: {\n                  teacherInstructionsEnabled:\n                    teacherInstructions.settings && toggle(teacherInstructions.label),\n                  rationaleEnabled: rationale.settings && toggle(rationale.label),\n                  spellCheckEnabled:\n                    spellCheck.settings && toggle(spellCheck.label),\n                }\n              }}\n            />\n          }\n        >\n          <div className={classes.regular}>\n            {teacherInstructionsEnabled && (\n              <InputContainer label={teacherInstructions.label} className={classes.prompt}>\n                <EditableHtml\n                  markup={model.teacherInstructions || ''}\n                  onChange={onTeacherInstructionsChanged}\n                  imageSupport={imageSupport}\n                  nonEmpty={false}\n                  toolbarOpts={toolbarOpts}\n                  spellCheck={spellCheckEnabled}\n                />\n              </InputContainer>\n            )}\n            {promptEnabled && (\n              <InputContainer label={prompt.label} className={classes.prompt}>\n                <EditableHtml\n                  markup={model.prompt || ''}\n                  onChange={onPromptChanged}\n                  imageSupport={imageSupport}\n                  nonEmpty={false}\n                  toolbarOpts={toolbarOpts}\n                  spellCheck={spellCheckEnabled}\n                />\n              </InputContainer>\n            )}\n\n            {rationaleEnabled && (\n              <InputContainer\n                label={rationale.label}\n                className={classes.prompt}\n              >\n                <EditableHtml\n                  markup={model.rationale || ''}\n                  onChange={onRationaleChanged}\n                  imageSupport={imageSupport}\n                  toolbarOpts={toolbarOpts}\n                  spellCheck={spellCheckEnabled}\n                />\n              </InputContainer>\n            )}\n\n            <div className={classNames(classes.label, classes.flexContainer)}>\n              <Typography className={classes.subheading} variant=\"subheading\">\n                Define Hotspot\n              </Typography>\n              <Tooltip\n                classes={{ tooltip: classes.tooltip }}\n                disableFocusListener\n                disableTouchListener\n                placement={'left'}\n                title={validationMessage}\n              >\n                <Info fontSize={'small'} color={'primary'} style={{ float: 'right' }}/>\n              </Tooltip>\n            </div>\n            {shapesError && <div className={classes.errorText}>{shapesError}</div>}\n            {selectionsError && <div className={classes.errorText}>{selectionsError}</div>}\n\n            <HotspotPalette\n              hotspotColor={model.hotspotColor}\n              hotspotList={model.hotspotList}\n              outlineColor={model.outlineColor}\n              outlineList={model.outlineList}\n              onHotspotColorChange={color =>\n                this.handleColorChange('hotspot', color)\n              }\n              onOutlineColorChange={color =>\n                this.handleColorChange('outline', color)\n              }\n            />\n\n            <HotspotContainer\n              dimensions={model.dimensions}\n              imageUrl={model.imageUrl}\n              multipleCorrect={model.multipleCorrect}\n              hotspotColor={model.hotspotColor}\n              outlineColor={model.outlineColor}\n              onUpdateImageDimension={onUpdateImageDimension}\n              onUpdateShapes={onUpdateShapes}\n              onImageUpload={onImageUpload}\n              shapes={model.shapes}\n              strokeWidth={model.strokeWidth}\n              preserveAspectRatioEnabled={preserveAspectRatio.enabled}\n            />\n\n            {model.imageUrl && (\n              <div>\n                <Typography className={classes.label} variant=\"subheading\">\n                  Image Dimensions\n                </Typography>\n\n                <div className={classes.dimensions}>\n                  <NumberTextField\n                    key=\"hotspot-manual-width\"\n                    label=\"Width\"\n                    value={model.dimensions.width}\n                    min={0}\n                    onChange={(e, value) => this.handleOnUpdateImageDimensions(value, 'width')}\n                    showErrorWhenOutsideRange\n                    className={classes.field}\n                  />\n                  <NumberTextField\n                    key=\"hotspot-manual-height\"\n                    label=\"Height\"\n                    value={model.dimensions.height}\n                    min={0}\n                    onChange={(e, value) => this.handleOnUpdateImageDimensions(value, 'height')}\n                    showErrorWhenOutsideRange\n                    className={classes.field}\n                  />\n                </div>\n              </div>\n            )}\n          </div>\n        </layout.ConfigLayout>\n      </div>\n    );\n  }\n}\n\nconst styles = theme => ({\n  base: {\n    marginTop: theme.spacing.unit * 3\n  },\n  container: {\n    display: 'flex',\n    marginTop: theme.spacing.unit\n  },\n  dimensions: {\n    display: 'flex'\n  },\n  field: {\n    flex: 1,\n    width: '90%'\n  },\n  label: {\n    marginTop: theme.spacing.unit * 4\n  },\n  prompt: {\n    paddingTop: theme.spacing.unit * 2,\n    width: '100%'\n  },\n  subheading: {\n    marginRight: '5px'\n  },\n  regular: {\n    marginBottom: theme.spacing.unit * 3\n  },\n  switchElement: {\n    justifyContent: 'space-between',\n    margin: 0\n  },\n  flexContainer: {\n    display: 'flex',\n    alignItems: 'center'\n  },\n  tooltip: {\n    fontSize: '12px',\n    whiteSpace: 'pre',\n    maxWidth: '500px',\n  },\n  errorText: {\n    fontSize: '12px',\n    color: 'red',\n    padding: '5px 0'\n  }\n});\n\nRoot.propTypes = {\n  classes: PropTypes.object.isRequired,\n  configuration: PropTypes.object,\n  model: PropTypes.object.isRequired,\n  imageSupport: PropTypes.shape({\n    add: PropTypes.func,\n    delete: PropTypes.func\n  }),\n  onImageUpload: PropTypes.func.isRequired,\n  onColorChanged: PropTypes.func.isRequired,\n  onPromptChanged: PropTypes.func.isRequired,\n  onUpdateImageDimension: PropTypes.func.isRequired,\n  onUpdateShapes: PropTypes.func.isRequired,\n  onModelChangedByConfig: PropTypes.func.isRequired,\n  onRationaleChanged: PropTypes.func.isRequired,\n  onConfigurationChanged: PropTypes.func.isRequired,\n  onTeacherInstructionsChanged: PropTypes.func.isRequired,\n};\n\nexport default withStyles(styles)(Root);\n"],"file":"root.js"}
+{"version":3,"sources":["../src/root.jsx"],"names":["Panel","settings","toggle","Root","fieldType","color","onColorChanged","props","cType","value","resizeType","model","dimensions","shapes","configuration","preserveAspectRatio","onUpdateImageDimension","onUpdateShapes","nextImageDimensions","updatedDimensions","enabled","shapesArray","updatedShapes","classes","imageSupport","onConfigurationChanged","onImageUpload","onModelChangedByConfig","onPromptChanged","onRationaleChanged","onTeacherInstructionsChanged","multipleCorrect","partialScoring","prompt","teacherInstructions","rationale","spellCheck","maxImageWidth","maxImageHeight","teacherInstructionsEnabled","promptEnabled","rationaleEnabled","spellCheckEnabled","errors","shapesError","selectionsError","toolbarOpts","validationMessage","defaultImageMaxWidth","defaultImageMaxHeight","toolbarEditorPosition","position","base","label","Properties","regular","flexContainer","subheading","tooltip","errorText","hotspotColor","hotspotList","outlineColor","outlineList","handleColorChange","imageUrl","strokeWidth","width","e","handleOnUpdateImageDimensions","field","height","React","Component","styles","theme","marginTop","spacing","unit","container","display","flex","paddingTop","marginRight","marginBottom","switchElement","justifyContent","margin","alignItems","fontSize","whiteSpace","maxWidth","padding","propTypes","PropTypes","object","isRequired","shape","add","func"],"mappings":"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","sourcesContent":["import React from 'react';\nimport {\n  settings,\n  layout,\n  InputContainer,\n  NumberTextField\n} from '@pie-lib/config-ui';\nimport PropTypes from 'prop-types';\nimport EditableHtml from '@pie-lib/editable-html';\nimport { withStyles } from '@material-ui/core/styles';\nimport Typography from '@material-ui/core/Typography';\nimport Info from '@material-ui/icons/Info';\nimport Tooltip from '@material-ui/core/Tooltip';\nimport HotspotPalette from './hotspot-palette';\nimport HotspotContainer from './hotspot-container';\nimport classNames from 'classnames';\nimport {\n  updateImageDimensions,\n  generateValidationMessage,\n  getUpdatedShapes,\n  getAllShapes,\n  groupShapes\n} from './utils';\n\nconst { Panel, toggle } = settings;\n\nexport class Root extends React.Component {\n  handleColorChange = (fieldType, color) => {\n    const { onColorChanged } = this.props;\n    const cType = `${fieldType}Color`;\n\n    onColorChanged(cType, color);\n  };\n\n  handleOnUpdateImageDimensions = (value, resizeType) => {\n    const {\n      model: { dimensions, shapes },\n      configuration: { preserveAspectRatio = {} },\n      onUpdateImageDimension,\n      onUpdateShapes,\n    } = this.props;\n\n    const nextImageDimensions = { ...dimensions, [resizeType]: value };\n\n    // if preserveAspectRatio.enabled, updateImageDimensions function makes sure aspect ratio is kept\n    const updatedDimensions = updateImageDimensions(\n      dimensions,\n      nextImageDimensions,\n      preserveAspectRatio.enabled,\n      resizeType\n    );\n    // transform shapes map into shapes array\n    const shapesArray = getAllShapes(shapes);\n    // transform all the shapes to fit the re-sized image\n    const updatedShapes = getUpdatedShapes(dimensions, updatedDimensions, shapesArray);\n    // transform shapes array back into shapes map\n\n    onUpdateShapes(groupShapes(updatedShapes));\n    onUpdateImageDimension(updatedDimensions);\n  };\n\n  render() {\n    const {\n      classes,\n      configuration,\n      model,\n      imageSupport,\n      onConfigurationChanged,\n      onImageUpload,\n      onModelChangedByConfig,\n      onPromptChanged,\n      onRationaleChanged,\n      onUpdateImageDimension,\n      onTeacherInstructionsChanged,\n      onUpdateShapes\n    } = this.props;\n    const {\n      multipleCorrect = {},\n      partialScoring = {},\n      prompt = {},\n      teacherInstructions = {},\n      rationale = {},\n      spellCheck = {},\n      preserveAspectRatio = {},\n      maxImageWidth = {},\n      maxImageHeight = {}\n    } = configuration || {};\n    const { teacherInstructionsEnabled, promptEnabled, rationaleEnabled, spellCheckEnabled, errors } = model || {};\n    const { shapesError, selectionsError } = errors || {};\n    const toolbarOpts = {};\n\n    const validationMessage = generateValidationMessage(configuration);\n\n    const defaultImageMaxWidth = maxImageWidth && maxImageWidth.prompt;\n    const defaultImageMaxHeight = maxImageHeight && maxImageHeight.prompt;\n\n    switch (model.toolbarEditorPosition) {\n      case 'top':\n        toolbarOpts.position = 'top';\n        break;\n      default:\n        toolbarOpts.position = 'bottom';\n        break;\n    }\n\n    return (\n      <div className={classes.base}>\n        <layout.ConfigLayout\n          settings={\n            <Panel\n              model={model}\n              onChangeModel={onModelChangedByConfig}\n              configuration={configuration}\n              onChangeConfiguration={onConfigurationChanged}\n              groups={{\n                'Settings': {\n                  multipleCorrect:\n                    multipleCorrect.settings && toggle(multipleCorrect.label),\n                  partialScoring:\n                    partialScoring.settings && toggle(partialScoring.label),\n                  promptEnabled:\n                    prompt.settings && toggle(prompt.label),\n                },\n                Properties: {\n                  teacherInstructionsEnabled:\n                    teacherInstructions.settings && toggle(teacherInstructions.label),\n                  rationaleEnabled: rationale.settings && toggle(rationale.label),\n                  spellCheckEnabled:\n                    spellCheck.settings && toggle(spellCheck.label),\n                }\n              }}\n            />\n          }\n        >\n          <div className={classes.regular}>\n            {teacherInstructionsEnabled && (\n              <InputContainer label={teacherInstructions.label} className={classes.prompt}>\n                <EditableHtml\n                  markup={model.teacherInstructions || ''}\n                  onChange={onTeacherInstructionsChanged}\n                  imageSupport={imageSupport}\n                  nonEmpty={false}\n                  toolbarOpts={toolbarOpts}\n                  spellCheck={spellCheckEnabled}\n                  maxImageWidth={maxImageWidth && maxImageWidth.teacherInstructions || defaultImageMaxWidth}\n                  maxImageHeight={maxImageHeight && maxImageHeight.teacherInstructions || defaultImageMaxHeight}\n                />\n              </InputContainer>\n            )}\n            {promptEnabled && (\n              <InputContainer label={prompt.label} className={classes.prompt}>\n                <EditableHtml\n                  markup={model.prompt || ''}\n                  onChange={onPromptChanged}\n                  imageSupport={imageSupport}\n                  nonEmpty={false}\n                  toolbarOpts={toolbarOpts}\n                  spellCheck={spellCheckEnabled}\n                  maxImageWidth={defaultImageMaxWidth}\n                  maxImageHeight={defaultImageMaxHeight}\n                />\n              </InputContainer>\n            )}\n\n            {rationaleEnabled && (\n              <InputContainer\n                label={rationale.label}\n                className={classes.prompt}\n              >\n                <EditableHtml\n                  markup={model.rationale || ''}\n                  onChange={onRationaleChanged}\n                  imageSupport={imageSupport}\n                  toolbarOpts={toolbarOpts}\n                  spellCheck={spellCheckEnabled}\n                  maxImageWidth={maxImageWidth && maxImageWidth.rationale || defaultImageMaxWidth}\n                  maxImageHeight={maxImageHeight && maxImageHeight.rationale || defaultImageMaxHeight}\n                />\n              </InputContainer>\n            )}\n\n            <div className={classNames(classes.label, classes.flexContainer)}>\n              <Typography className={classes.subheading} variant=\"subheading\">\n                Define Hotspot\n              </Typography>\n              <Tooltip\n                classes={{ tooltip: classes.tooltip }}\n                disableFocusListener\n                disableTouchListener\n                placement={'left'}\n                title={validationMessage}\n              >\n                <Info fontSize={'small'} color={'primary'} style={{ float: 'right' }}/>\n              </Tooltip>\n            </div>\n            {shapesError && <div className={classes.errorText}>{shapesError}</div>}\n            {selectionsError && <div className={classes.errorText}>{selectionsError}</div>}\n\n            <HotspotPalette\n              hotspotColor={model.hotspotColor}\n              hotspotList={model.hotspotList}\n              outlineColor={model.outlineColor}\n              outlineList={model.outlineList}\n              onHotspotColorChange={color =>\n                this.handleColorChange('hotspot', color)\n              }\n              onOutlineColorChange={color =>\n                this.handleColorChange('outline', color)\n              }\n            />\n\n            <HotspotContainer\n              dimensions={model.dimensions}\n              imageUrl={model.imageUrl}\n              multipleCorrect={model.multipleCorrect}\n              hotspotColor={model.hotspotColor}\n              outlineColor={model.outlineColor}\n              onUpdateImageDimension={onUpdateImageDimension}\n              onUpdateShapes={onUpdateShapes}\n              onImageUpload={onImageUpload}\n              shapes={model.shapes}\n              strokeWidth={model.strokeWidth}\n              preserveAspectRatioEnabled={preserveAspectRatio.enabled}\n            />\n\n            {model.imageUrl && (\n              <div>\n                <Typography className={classes.label} variant=\"subheading\">\n                  Image Dimensions\n                </Typography>\n\n                <div className={classes.dimensions}>\n                  <NumberTextField\n                    key=\"hotspot-manual-width\"\n                    label=\"Width\"\n                    value={model.dimensions.width}\n                    min={0}\n                    onChange={(e, value) => this.handleOnUpdateImageDimensions(value, 'width')}\n                    showErrorWhenOutsideRange\n                    className={classes.field}\n                  />\n                  <NumberTextField\n                    key=\"hotspot-manual-height\"\n                    label=\"Height\"\n                    value={model.dimensions.height}\n                    min={0}\n                    onChange={(e, value) => this.handleOnUpdateImageDimensions(value, 'height')}\n                    showErrorWhenOutsideRange\n                    className={classes.field}\n                  />\n                </div>\n              </div>\n            )}\n          </div>\n        </layout.ConfigLayout>\n      </div>\n    );\n  }\n}\n\nconst styles = theme => ({\n  base: {\n    marginTop: theme.spacing.unit * 3\n  },\n  container: {\n    display: 'flex',\n    marginTop: theme.spacing.unit\n  },\n  dimensions: {\n    display: 'flex'\n  },\n  field: {\n    flex: 1,\n    width: '90%'\n  },\n  label: {\n    marginTop: theme.spacing.unit * 4\n  },\n  prompt: {\n    paddingTop: theme.spacing.unit * 2,\n    width: '100%'\n  },\n  subheading: {\n    marginRight: '5px'\n  },\n  regular: {\n    marginBottom: theme.spacing.unit * 3\n  },\n  switchElement: {\n    justifyContent: 'space-between',\n    margin: 0\n  },\n  flexContainer: {\n    display: 'flex',\n    alignItems: 'center'\n  },\n  tooltip: {\n    fontSize: '12px',\n    whiteSpace: 'pre',\n    maxWidth: '500px',\n  },\n  errorText: {\n    fontSize: '12px',\n    color: 'red',\n    padding: '5px 0'\n  }\n});\n\nRoot.propTypes = {\n  classes: PropTypes.object.isRequired,\n  configuration: PropTypes.object,\n  model: PropTypes.object.isRequired,\n  imageSupport: PropTypes.shape({\n    add: PropTypes.func,\n    delete: PropTypes.func\n  }),\n  onImageUpload: PropTypes.func.isRequired,\n  onColorChanged: PropTypes.func.isRequired,\n  onPromptChanged: PropTypes.func.isRequired,\n  onUpdateImageDimension: PropTypes.func.isRequired,\n  onUpdateShapes: PropTypes.func.isRequired,\n  onModelChangedByConfig: PropTypes.func.isRequired,\n  onRationaleChanged: PropTypes.func.isRequired,\n  onConfigurationChanged: PropTypes.func.isRequired,\n  onTeacherInstructionsChanged: PropTypes.func.isRequired,\n};\n\nexport default withStyles(styles)(Root);\n"],"file":"root.js"}

package/configure/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pie-element/hotspot-configure",
   "private": true,
-  "version": "4.7.4",
+  "version": "5.0.0",
   "description": "",
   "main": "lib/index.js",
   "module": "src/index.js",
@@ -10,8 +10,8 @@
     "@material-ui/core": "^3.9.2",
     "@material-ui/icons": "^3.0.2",
     "@pie-framework/pie-configure-events": "^1.2.0",
-    "@pie-lib/config-ui": "^10.13.3",
-    "@pie-lib/editable-html": "^7.22.6",
+    "@pie-lib/config-ui": "^11.0.1",
+    "@pie-lib/editable-html": "^8.1.0",
     "classnames": "^2.2.6",
     "debug": "^3.1.0",
     "konva": "^3.2.4",

package/configure/src/__tests__/__snapshots__/root.test.js.snap

@@ -7,6 +7,16 @@ exports[`Root render renders 1`] = `
       <Panel
         configuration={
           Object {
+            "maxImageHeight": Object {
+              "prompt": 300,
+              "rationale": 300,
+              "teacherInstructions": 300,
+            },
+            "maxImageWidth": Object {
+              "prompt": 300,
+              "rationale": 300,
+              "teacherInstructions": 300,
+            },
             "minShapes": 2,
             "multipleCorrect": Object {
               "label": "Multiple Correct Responses",

package/configure/src/defaults.js

@@ -58,6 +58,16 @@ export default {
       enabled: true,
       label: 'Preserve aspect ratio'
     },
-    minShapes: 2
+    minShapes: 2,
+    maxImageWidth: {
+      teacherInstructions: 300,
+      prompt: 300,
+      rationale: 300,
+    },
+    maxImageHeight: {
+      teacherInstructions: 300,
+      prompt: 300,
+      rationale: 300,
+    }
   }
 };

package/configure/src/root.jsx

@@ -81,7 +81,9 @@ export class Root extends React.Component {
       teacherInstructions = {},
       rationale = {},
       spellCheck = {},
-      preserveAspectRatio = {}
+      preserveAspectRatio = {},
+      maxImageWidth = {},
+      maxImageHeight = {}
     } = configuration || {};
     const { teacherInstructionsEnabled, promptEnabled, rationaleEnabled, spellCheckEnabled, errors } = model || {};
     const { shapesError, selectionsError } = errors || {};
@@ -89,6 +91,9 @@ export class Root extends React.Component {
 
     const validationMessage = generateValidationMessage(configuration);
 
+    const defaultImageMaxWidth = maxImageWidth && maxImageWidth.prompt;
+    const defaultImageMaxHeight = maxImageHeight && maxImageHeight.prompt;
+
     switch (model.toolbarEditorPosition) {
       case 'top':
         toolbarOpts.position = 'top';
@@ -137,6 +142,8 @@ export class Root extends React.Component {
                   nonEmpty={false}
                   toolbarOpts={toolbarOpts}
                   spellCheck={spellCheckEnabled}
+                  maxImageWidth={maxImageWidth && maxImageWidth.teacherInstructions || defaultImageMaxWidth}
+                  maxImageHeight={maxImageHeight && maxImageHeight.teacherInstructions || defaultImageMaxHeight}
                 />
               </InputContainer>
             )}
@@ -149,6 +156,8 @@ export class Root extends React.Component {
                   nonEmpty={false}
                   toolbarOpts={toolbarOpts}
                   spellCheck={spellCheckEnabled}
+                  maxImageWidth={defaultImageMaxWidth}
+                  maxImageHeight={defaultImageMaxHeight}
                 />
               </InputContainer>
             )}
@@ -164,6 +173,8 @@ export class Root extends React.Component {
                   imageSupport={imageSupport}
                   toolbarOpts={toolbarOpts}
                   spellCheck={spellCheckEnabled}
+                  maxImageWidth={maxImageWidth && maxImageWidth.rationale || defaultImageMaxWidth}
+                  maxImageHeight={maxImageHeight && maxImageHeight.rationale || defaultImageMaxHeight}
                 />
               </InputContainer>
             )}

package/docs/config-schema.json

@@ -98,6 +98,48 @@
       "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"
+        }
+      }
+    },
     "showPrompt": {
       "description": "Determines whether prompt field will be displayed or not",
       "default": true,
@@ -127,6 +169,27 @@
           "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

@@ -74,6 +74,38 @@ Maximum number of shapes
 
 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
+
 # `showPrompt` (boolean)
 
 Determines whether prompt field will be displayed or not
@@ -102,4 +134,20 @@ 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
+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/pie-schema.json

@@ -266,6 +266,27 @@
         }
       }
     },
+    "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

@@ -187,6 +187,22 @@ Indicates if the item has to be displayed in the Settings Panel
 
 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-element/hotspot",
-  "version": "4.11.4",
+  "version": "5.0.0",
   "description": "",
   "repository": "pie-framework/pie-elements",
   "publishConfig": {
@@ -19,7 +19,7 @@
   },
   "author": "pie framework developers",
   "license": "ISC",
-  "gitHead": "2b16a41c0627a27ee758af9285afde4d226dc12b",
+  "gitHead": "ff92cee6f9a7bf3f3dc75dbafd2263710f0a6b3d",
   "scripts": {
     "postpublish": "../../scripts/postpublish"
   },