@pie-element/hotspot 4.10.16 → 4.11.1

package/CHANGELOG.md

@@ -3,6 +3,43 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [4.11.1](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot@4.11.0...@pie-element/hotspot@4.11.1) (2022-05-09)
+
+**Note:** Version bump only for package @pie-element/hotspot
+
+
+
+
+
+# [4.11.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot@4.10.17...@pie-element/hotspot@4.11.0) (2022-05-03)
+
+
+### Bug Fixes
+
+* added getters for the session PD-1668 ([de8a754](https://github.com/pie-framework/pie-elements/commit/de8a754f4580370b127257c435e43db405b4bdc4))
+* **hotspot:** add support for --pie-zoom css property PD-360 ([f2dc70d](https://github.com/pie-framework/pie-elements/commit/f2dc70dc4b27bdab76c68cd938dc1b734b50a80f))
+* **hotspot:** add support for --pie-zoom css property PD-360 (review) ([cf34390](https://github.com/pie-framework/pie-elements/commit/cf34390d29c9291bd82b75c649d5b4d1b6c78fdf))
+* **hotspot:** add support for removing --pie-zoom css property PD-360 ([3e7a293](https://github.com/pie-framework/pie-elements/commit/3e7a29385d84264b167ad5f2e9a75ef38e9c14f3))
+* **hotspot:** use "prompt" class on PreviewPrompt PD-1553 ([9650b64](https://github.com/pie-framework/pie-elements/commit/9650b646414ecb9ee6d9a362f4cc1a129d92d357))
+
+
+### Features
+
+* **hotspot:** added configurable validation PD-1702 ([18eb985](https://github.com/pie-framework/pie-elements/commit/18eb98568adf9248dc616a9ae71d9f8394b62fc1))
+* **hotspot:** PD-1703 implement ui/ux for item validation ([a962183](https://github.com/pie-framework/pie-elements/commit/a962183d0941936b69a95b32002135507d769170))
+
+
+
+
+
+## [4.10.17](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot@4.10.16...@pie-element/hotspot@4.10.17) (2022-04-12)
+
+**Note:** Version bump only for package @pie-element/hotspot
+
+
+
+
+
 ## [4.10.16](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot@4.10.15...@pie-element/hotspot@4.10.16) (2022-03-28)
 
 **Note:** Version bump only for package @pie-element/hotspot

package/configure/CHANGELOG.md

@@ -3,6 +3,33 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [4.7.1](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-configure@4.7.0...@pie-element/hotspot-configure@4.7.1) (2022-05-09)
+
+**Note:** Version bump only for package @pie-element/hotspot-configure
+
+
+
+
+
+# [4.7.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-configure@4.6.16...@pie-element/hotspot-configure@4.7.0) (2022-05-03)
+
+
+### Features
+
+* **hotspot:** PD-1703 implement ui/ux for item validation ([a962183](https://github.com/pie-framework/pie-elements/commit/a962183d0941936b69a95b32002135507d769170))
+
+
+
+
+
+## [4.6.16](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-configure@4.6.15...@pie-element/hotspot-configure@4.6.16) (2022-04-12)
+
+**Note:** Version bump only for package @pie-element/hotspot-configure
+
+
+
+
+
 ## [4.6.15](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-configure@4.6.14...@pie-element/hotspot-configure@4.6.15) (2022-03-28)
 
 **Note:** Version bump only for package @pie-element/hotspot-configure

package/configure/lib/defaults.js

@@ -59,7 +59,8 @@ var _default = {
       settings: false,
       enabled: true,
       label: 'Preserve aspect ratio'
-    }
+    },
+    minShapes: 2
   }
 };
 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"],"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;AA1BR;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  }\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"],"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"}

package/configure/lib/hotspot-drawable.js

@@ -228,7 +228,7 @@ var Drawable = /*#__PURE__*/function (_React$Component) {
 
       var hasMinimumWidth = width > 150 && height > 150;
 
-      if (resizeValid && hasMinimumWidth) {
+      if (resizeValid && hasMinimumWidth && box) {
         box.style.width = "".concat(width, "px");
         box.style.height = "".concat(height, "px");
 

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

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

package/configure/lib/root.js

@@ -29,14 +29,20 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _editableHtml = _interopRequireDefault(require("@pie-lib/editable-html"));
 
+var _styles = require("@material-ui/core/styles");
+
 var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
 
-var _styles = require("@material-ui/core/styles");
+var _Info = _interopRequireDefault(require("@material-ui/icons/Info"));
+
+var _Tooltip = _interopRequireDefault(require("@material-ui/core/Tooltip"));
 
 var _hotspotPalette = _interopRequireDefault(require("./hotspot-palette"));
 
 var _hotspotContainer = _interopRequireDefault(require("./hotspot-container"));
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _utils = require("./utils");
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -134,9 +140,15 @@ var Root = /*#__PURE__*/function (_React$Component) {
           teacherInstructionsEnabled = _ref2.teacherInstructionsEnabled,
           promptEnabled = _ref2.promptEnabled,
           rationaleEnabled = _ref2.rationaleEnabled,
-          spellCheckEnabled = _ref2.spellCheckEnabled;
+          spellCheckEnabled = _ref2.spellCheckEnabled,
+          errors = _ref2.errors;
+
+      var _ref3 = errors || {},
+          shapesError = _ref3.shapesError,
+          selectionsError = _ref3.selectionsError;
 
       var toolbarOpts = {};
+      var validationMessage = (0, _utils.generateValidationMessage)(configuration);
 
       switch (model.toolbarEditorPosition) {
         case 'top':
@@ -200,10 +212,30 @@ var Root = /*#__PURE__*/function (_React$Component) {
         imageSupport: imageSupport,
         toolbarOpts: toolbarOpts,
         spellCheck: spellCheckEnabled
-      })), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
-        className: classes.label,
+      })), /*#__PURE__*/_react["default"].createElement("div", {
+        className: (0, _classnames["default"])(classes.label, classes.flexContainer)
+      }, /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+        className: classes.subheading,
         variant: "subheading"
-      }, "Define Hotspot"), /*#__PURE__*/_react["default"].createElement(_hotspotPalette["default"], {
+      }, "Define Hotspot"), /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
+        classes: {
+          tooltip: classes.tooltip
+        },
+        disableFocusListener: true,
+        disableTouchListener: true,
+        placement: 'left',
+        title: validationMessage
+      }, /*#__PURE__*/_react["default"].createElement(_Info["default"], {
+        fontSize: 'small',
+        color: 'primary',
+        style: {
+          "float": 'right'
+        }
+      }))), shapesError && /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.errorText
+      }, shapesError), selectionsError && /*#__PURE__*/_react["default"].createElement("div", {
+        className: classes.errorText
+      }, selectionsError), /*#__PURE__*/_react["default"].createElement(_hotspotPalette["default"], {
         hotspotColor: model.hotspotColor,
         hotspotList: model.hotspotList,
         outlineColor: model.outlineColor,
@@ -282,12 +314,29 @@ var styles = function styles(theme) {
       paddingTop: theme.spacing.unit * 2,
       width: '100%'
     },
+    subheading: {
+      marginRight: '5px'
+    },
     regular: {
       marginBottom: theme.spacing.unit * 3
     },
     switchElement: {
       justifyContent: 'space-between',
       margin: 0
+    },
+    flexContainer: {
+      display: 'flex',
+      alignItems: 'center'
+    },
+    tooltip: {
+      fontSize: '12px',
+      whiteSpace: 'pre',
+      maxWidth: '500px'
+    },
+    errorText: {
+      fontSize: '12px',
+      color: 'red',
+      padding: '5px 0'
     }
   };
 };

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","toolbarOpts","toolbarEditorPosition","position","base","label","Properties","regular","hotspotColor","hotspotList","outlineColor","outlineList","handleColorChange","imageUrl","strokeWidth","width","e","handleOnUpdateImageDimensions","field","height","React","Component","styles","theme","marginTop","spacing","unit","container","display","flex","paddingTop","marginBottom","switchElement","justifyContent","margin","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 Typography from '@material-ui/core/Typography';\nimport { withStyles } from '@material-ui/core/styles';\n\nimport HotspotPalette from './hotspot-palette';\nimport HotspotContainer from './hotspot-container';\nimport { updateImageDimensions, getUpdatedShapes, getAllShapes, groupShapes } 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 } = model || {};\n    const toolbarOpts = {};\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            <Typography className={classes.label} variant=\"subheading\">\n              Define Hotspot\n            </Typography>\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  regular: {\n    marginBottom: theme.spacing.unit * 3\n  },\n  switchElement: {\n    justifyContent: 'space-between',\n    margin: 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","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":"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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    } = 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"}

package/configure/lib/utils.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.updateImageDimensions = exports.groupShapes = exports.getUpdatedShapes = exports.getUpdatedRectangle = exports.getUpdatedPlygon = exports.getAllShapes = void 0;
+exports.updateImageDimensions = exports.groupShapes = exports.getUpdatedShapes = exports.getUpdatedRectangle = exports.getUpdatedPlygon = exports.getAllShapes = exports.generateValidationMessage = void 0;
 
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 
@@ -145,4 +145,16 @@ var groupShapes = function groupShapes(shapesArray) {
 };
 
 exports.groupShapes = groupShapes;
+
+var generateValidationMessage = function generateValidationMessage(config) {
+  var minShapes = config.minShapes,
+      maxShapes = config.maxShapes,
+      maxSelections = config.maxSelections;
+  var shapesMessage = "\nThere should be at least ".concat(minShapes, " ") + (maxShapes ? "and at most ".concat(maxShapes, " ") : '') + 'shapes defined.';
+  var selectionsMessage = "\nThere should be at least 1 " + (maxSelections ? "and at most ".concat(maxSelections, " ") : '') + 'shape' + (maxSelections ? 's' : '') + ' selected.';
+  var message = 'Validation requirements:' + shapesMessage + selectionsMessage;
+  return message;
+};
+
+exports.generateValidationMessage = generateValidationMessage;
 //# sourceMappingURL=utils.js.map

package/configure/lib/utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/utils.js"],"names":["updateImageDimensions","initialDim","nextDim","keepAspectRatio","resizeType","imageAspectRatio","width","height","getDelta","referenceInitialValue","referenceNextValue","currentValue","getUpdatedRectangle","shape","x","y","getUpdatedPlygon","points","map","point","getUpdatedShapes","shapes","group","getAllShapes","shapesMap","shapesArray","shapesKeys","Object","keys","length","reduce","acc","currentShapeKey","concat","index","groupShapes","rectangles","polygons","shapeProps"],"mappings":"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","sourcesContent":["import cloneDeep from 'lodash/cloneDeep';\n\nconst updateImageDimensions = (initialDim, nextDim, keepAspectRatio, resizeType) => {\n  // if we want to keep image aspect ratio\n  if (keepAspectRatio) {\n    const imageAspectRatio = initialDim.width / initialDim.height;\n\n    if (resizeType === 'height') {\n      // if we want to change image height => we update the width accordingly\n      return {\n        width: nextDim.height * imageAspectRatio,\n        height: nextDim.height\n      }\n    }\n\n    // if we want to change image width => we update the height accordingly\n    return {\n      width: nextDim.width,\n      height: nextDim.width / imageAspectRatio\n    }\n  }\n\n  // if we don't want to keep aspect ratio, we just update both values\n  return {\n    width: nextDim.width,\n    height: nextDim.height\n  }\n};\n\n// referenceInitialValue = the initial value of the Stage\n// referenceNextValue = the next value of the Stage\n// currentValue = the value that has to be re-sized influenced by the changes that were made on the Stage\nconst getDelta = (referenceInitialValue, referenceNextValue, currentValue) => (referenceNextValue / referenceInitialValue) * currentValue;\n\nconst getUpdatedRectangle = (initialDim, nextDim, shape) => ({\n  ...shape,\n  width: getDelta(initialDim.width, nextDim.width, shape.width),\n  height: getDelta(initialDim.height, nextDim.height, shape.height),\n  x: getDelta(initialDim.width, nextDim.width, shape.x),\n  y: getDelta(initialDim.height, nextDim.height, shape.y),\n});\n\nconst getUpdatedPlygon = (initialDim, nextDim, shape) => ({\n  ...shape,\n  points: shape.points.map(point => ({\n    x: getDelta(initialDim.width, nextDim.width, point.x),\n    y: getDelta(initialDim.height, nextDim.height, point.y),\n  }))\n});\n\n// initialDim = the initial dimensions: { width, height } of the Stage\n// nextDim = the next dimensions: { width, height } of the Stage\n// shapes = array of shapes that have to be re-sized and re-positioned\nconst getUpdatedShapes = (initialDim, nextDim, shapes) => {\n  return shapes.map(shape => {\n    if (shape.group === 'rectangles') {\n      return getUpdatedRectangle(initialDim, nextDim, shape);\n    }\n\n    if (shape.group === 'polygons') {\n      return getUpdatedPlygon(initialDim, nextDim, shape);\n    }\n  });\n};\n\n// converts shapes map to shapes array\n// example:\n// from: { rectangles: [r1], polygons: [p1, p2]}\n// to: [{ ...r1, group: 'rectangles' }, { ...p1, group: 'polygons' }, { ...p2, group: 'polygons' }]\n// if a shape has index defined, keep it, otherwise initialize it\n// index is used for the UNDO function\nconst getAllShapes = (shapesMap) => {\n  shapesMap = shapesMap || {};\n  const shapesArray = [];\n  const shapesKeys = Object.keys(shapesMap);\n\n  return shapesKeys.length\n    ? shapesKeys.reduce((acc, currentShapeKey) =>\n        acc.concat(\n          shapesMap[currentShapeKey]\n            ? shapesMap[currentShapeKey].map((shape, index) => ({\n              ...shape,\n              group: currentShapeKey,\n              index: shape.index || acc.length + index\n            }))\n            : []),\n      shapesArray)\n    : shapesArray;\n};\n\n// converts shapes array to shapes map\n// is the reverse of getAllShapes function\n// example:\n// from: [{ ...r1, group: 'rectangles' }, { ...p1, group: 'polygons' }, { ...p2, group: 'polygons' }]\n// to: { rectangles: [r1], polygons: [p1, p2]}\nconst groupShapes = (shapesArray) => {\n  shapesArray = shapesArray || [];\n  const shapesMap = {\n    rectangles: [],\n    polygons: []\n  };\n\n  if (shapesArray.length) {\n    return shapesArray.reduce((acc, { group, ...shapeProps }) => {\n      acc[group] = [...(acc[group] || []), shapeProps];\n      return acc;\n    }, shapesMap);\n  }\n\n  return cloneDeep(shapesMap);\n};\n\n\nexport { updateImageDimensions, getUpdatedShapes, getAllShapes, groupShapes, getUpdatedRectangle, getUpdatedPlygon };\n"],"file":"utils.js"}
+{"version":3,"sources":["../src/utils.js"],"names":["updateImageDimensions","initialDim","nextDim","keepAspectRatio","resizeType","imageAspectRatio","width","height","getDelta","referenceInitialValue","referenceNextValue","currentValue","getUpdatedRectangle","shape","x","y","getUpdatedPlygon","points","map","point","getUpdatedShapes","shapes","group","getAllShapes","shapesMap","shapesArray","shapesKeys","Object","keys","length","reduce","acc","currentShapeKey","concat","index","groupShapes","rectangles","polygons","shapeProps","generateValidationMessage","config","minShapes","maxShapes","maxSelections","shapesMessage","selectionsMessage","message"],"mappings":"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","sourcesContent":["import cloneDeep from 'lodash/cloneDeep';\n\nconst updateImageDimensions = (initialDim, nextDim, keepAspectRatio, resizeType) => {\n  // if we want to keep image aspect ratio\n  if (keepAspectRatio) {\n    const imageAspectRatio = initialDim.width / initialDim.height;\n\n    if (resizeType === 'height') {\n      // if we want to change image height => we update the width accordingly\n      return {\n        width: nextDim.height * imageAspectRatio,\n        height: nextDim.height\n      }\n    }\n\n    // if we want to change image width => we update the height accordingly\n    return {\n      width: nextDim.width,\n      height: nextDim.width / imageAspectRatio\n    }\n  }\n\n  // if we don't want to keep aspect ratio, we just update both values\n  return {\n    width: nextDim.width,\n    height: nextDim.height\n  }\n};\n\n// referenceInitialValue = the initial value of the Stage\n// referenceNextValue = the next value of the Stage\n// currentValue = the value that has to be re-sized influenced by the changes that were made on the Stage\nconst getDelta = (referenceInitialValue, referenceNextValue, currentValue) => (referenceNextValue / referenceInitialValue) * currentValue;\n\nconst getUpdatedRectangle = (initialDim, nextDim, shape) => ({\n  ...shape,\n  width: getDelta(initialDim.width, nextDim.width, shape.width),\n  height: getDelta(initialDim.height, nextDim.height, shape.height),\n  x: getDelta(initialDim.width, nextDim.width, shape.x),\n  y: getDelta(initialDim.height, nextDim.height, shape.y),\n});\n\nconst getUpdatedPlygon = (initialDim, nextDim, shape) => ({\n  ...shape,\n  points: shape.points.map(point => ({\n    x: getDelta(initialDim.width, nextDim.width, point.x),\n    y: getDelta(initialDim.height, nextDim.height, point.y),\n  }))\n});\n\n// initialDim = the initial dimensions: { width, height } of the Stage\n// nextDim = the next dimensions: { width, height } of the Stage\n// shapes = array of shapes that have to be re-sized and re-positioned\nconst getUpdatedShapes = (initialDim, nextDim, shapes) => {\n  return shapes.map(shape => {\n    if (shape.group === 'rectangles') {\n      return getUpdatedRectangle(initialDim, nextDim, shape);\n    }\n\n    if (shape.group === 'polygons') {\n      return getUpdatedPlygon(initialDim, nextDim, shape);\n    }\n  });\n};\n\n// converts shapes map to shapes array\n// example:\n// from: { rectangles: [r1], polygons: [p1, p2]}\n// to: [{ ...r1, group: 'rectangles' }, { ...p1, group: 'polygons' }, { ...p2, group: 'polygons' }]\n// if a shape has index defined, keep it, otherwise initialize it\n// index is used for the UNDO function\nconst getAllShapes = (shapesMap) => {\n  shapesMap = shapesMap || {};\n  const shapesArray = [];\n  const shapesKeys = Object.keys(shapesMap);\n\n  return shapesKeys.length\n    ? shapesKeys.reduce((acc, currentShapeKey) =>\n        acc.concat(\n          shapesMap[currentShapeKey]\n            ? shapesMap[currentShapeKey].map((shape, index) => ({\n              ...shape,\n              group: currentShapeKey,\n              index: shape.index || acc.length + index\n            }))\n            : []),\n      shapesArray)\n    : shapesArray;\n};\n\n// converts shapes array to shapes map\n// is the reverse of getAllShapes function\n// example:\n// from: [{ ...r1, group: 'rectangles' }, { ...p1, group: 'polygons' }, { ...p2, group: 'polygons' }]\n// to: { rectangles: [r1], polygons: [p1, p2]}\nconst groupShapes = (shapesArray) => {\n  shapesArray = shapesArray || [];\n  const shapesMap = {\n    rectangles: [],\n    polygons: []\n  };\n\n  if (shapesArray.length) {\n    return shapesArray.reduce((acc, { group, ...shapeProps }) => {\n      acc[group] = [...(acc[group] || []), shapeProps];\n      return acc;\n    }, shapesMap);\n  }\n\n  return cloneDeep(shapesMap);\n};\n\nconst generateValidationMessage = config => {\n  const { minShapes, maxShapes, maxSelections } = config;\n\n  const shapesMessage = `\\nThere should be at least ${minShapes} ` +\n    (maxShapes ? `and at most ${maxShapes} ` : '') + 'shapes defined.';\n\n  const selectionsMessage = `\\nThere should be at least 1 ` +\n    (maxSelections ? `and at most ${maxSelections} ` : '') + 'shape' +\n    (maxSelections ? 's' : '') +  ' selected.';\n\n  const message = 'Validation requirements:' + shapesMessage + selectionsMessage;\n\n  return message;\n};\n\nexport {\n  updateImageDimensions,\n  generateValidationMessage,\n  getUpdatedShapes,\n  getAllShapes,\n  groupShapes,\n  getUpdatedRectangle,\n  getUpdatedPlygon\n};\n"],"file":"utils.js"}

package/configure/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pie-element/hotspot-configure",
   "private": true,
-  "version": "4.6.15",
+  "version": "4.7.1",
   "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.10.24",
-    "@pie-lib/editable-html": "^7.19.3",
+    "@pie-lib/config-ui": "^10.12.2",
+    "@pie-lib/editable-html": "^7.22.2",
     "classnames": "^2.2.6",
     "debug": "^3.1.0",
     "konva": "^3.2.4",

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

@@ -7,6 +7,7 @@ exports[`Root render renders 1`] = `
       <Panel
         configuration={
           Object {
+            "minShapes": 2,
             "multipleCorrect": Object {
               "label": "Multiple Correct Responses",
               "settings": true,
@@ -176,11 +177,38 @@ exports[`Root render renders 1`] = `
     }
   >
     <div>
-      <WithStyles(Typography)
-        variant="subheading"
+      <div
+        className=""
       >
-        Define Hotspot
-      </WithStyles(Typography)>
+        <WithStyles(Typography)
+          variant="subheading"
+        >
+          Define Hotspot
+        </WithStyles(Typography)>
+        <WithStyles(Tooltip)
+          classes={
+            Object {
+              "tooltip": undefined,
+            }
+          }
+          disableFocusListener={true}
+          disableTouchListener={true}
+          placement="left"
+          title="Validation requirements:
+There should be at least 2 shapes defined.
+There should be at least 1 shape selected."
+        >
+          <pure(InfoIcon)
+            color="primary"
+            fontSize="small"
+            style={
+              Object {
+                "float": "right",
+              }
+            }
+          />
+        </WithStyles(Tooltip)>
+      </div>
       <WithStyles(Palette)
         hotspotColor="rgba(137, 183, 244, 0.65)"
         hotspotList={

package/configure/src/defaults.js

@@ -57,6 +57,7 @@ export default {
       settings: false,
       enabled: true,
       label: 'Preserve aspect ratio'
-    }
+    },
+    minShapes: 2
   }
 };

package/configure/src/hotspot-drawable.jsx

@@ -215,7 +215,7 @@ export class Drawable extends React.Component {
     const resizeValid = this.checkIfResizeValid(width, height);
     const hasMinimumWidth = width > 150 && height > 150;
 
-    if (resizeValid && hasMinimumWidth) {
+    if (resizeValid && hasMinimumWidth && box) {
       box.style.width = `${width}px`;
       box.style.height = `${height}px`;
 

package/configure/src/root.jsx

@@ -7,12 +7,20 @@ import {
 } from '@pie-lib/config-ui';
 import PropTypes from 'prop-types';
 import EditableHtml from '@pie-lib/editable-html';
-import Typography from '@material-ui/core/Typography';
 import { withStyles } from '@material-ui/core/styles';
-
+import Typography from '@material-ui/core/Typography';
+import Info from '@material-ui/icons/Info';
+import Tooltip from '@material-ui/core/Tooltip';
 import HotspotPalette from './hotspot-palette';
 import HotspotContainer from './hotspot-container';
-import { updateImageDimensions, getUpdatedShapes, getAllShapes, groupShapes } from './utils';
+import classNames from 'classnames';
+import {
+  updateImageDimensions,
+  generateValidationMessage,
+  getUpdatedShapes,
+  getAllShapes,
+  groupShapes
+} from './utils';
 
 const { Panel, toggle } = settings;
 
@@ -75,9 +83,12 @@ export class Root extends React.Component {
       spellCheck = {},
       preserveAspectRatio = {}
     } = configuration || {};
-    const { teacherInstructionsEnabled, promptEnabled, rationaleEnabled, spellCheckEnabled } = model || {};
+    const { teacherInstructionsEnabled, promptEnabled, rationaleEnabled, spellCheckEnabled, errors } = model || {};
+    const { shapesError, selectionsError } = errors || {};
     const toolbarOpts = {};
 
+    const validationMessage = generateValidationMessage(configuration);
+
     switch (model.toolbarEditorPosition) {
       case 'top':
         toolbarOpts.position = 'top';
@@ -157,9 +168,22 @@ export class Root extends React.Component {
               </InputContainer>
             )}
 
-            <Typography className={classes.label} variant="subheading">
-              Define Hotspot
-            </Typography>
+            <div className={classNames(classes.label, classes.flexContainer)}>
+              <Typography className={classes.subheading} variant="subheading">
+                Define Hotspot
+              </Typography>
+              <Tooltip
+                classes={{ tooltip: classes.tooltip }}
+                disableFocusListener
+                disableTouchListener
+                placement={'left'}
+                title={validationMessage}
+              >
+                <Info fontSize={'small'} color={'primary'} style={{ float: 'right' }}/>
+              </Tooltip>
+            </div>
+            {shapesError && <div className={classes.errorText}>{shapesError}</div>}
+            {selectionsError && <div className={classes.errorText}>{selectionsError}</div>}
 
             <HotspotPalette
               hotspotColor={model.hotspotColor}
@@ -245,12 +269,29 @@ const styles = theme => ({
     paddingTop: theme.spacing.unit * 2,
     width: '100%'
   },
+  subheading: {
+    marginRight: '5px'
+  },
   regular: {
     marginBottom: theme.spacing.unit * 3
   },
   switchElement: {
     justifyContent: 'space-between',
     margin: 0
+  },
+  flexContainer: {
+    display: 'flex',
+    alignItems: 'center'
+  },
+  tooltip: {
+    fontSize: '12px',
+    whiteSpace: 'pre',
+    maxWidth: '500px',
+  },
+  errorText: {
+    fontSize: '12px',
+    color: 'red',
+    padding: '5px 0'
   }
 });
 

package/configure/src/utils.js

@@ -110,5 +110,27 @@ const groupShapes = (shapesArray) => {
   return cloneDeep(shapesMap);
 };
 
+const generateValidationMessage = config => {
+  const { minShapes, maxShapes, maxSelections } = config;
 
-export { updateImageDimensions, getUpdatedShapes, getAllShapes, groupShapes, getUpdatedRectangle, getUpdatedPlygon };
+  const shapesMessage = `\nThere should be at least ${minShapes} ` +
+    (maxShapes ? `and at most ${maxShapes} ` : '') + 'shapes defined.';
+
+  const selectionsMessage = `\nThere should be at least 1 ` +
+    (maxSelections ? `and at most ${maxSelections} ` : '') + 'shape' +
+    (maxSelections ? 's' : '') +  ' selected.';
+
+  const message = 'Validation requirements:' + shapesMessage + selectionsMessage;
+
+  return message;
+};
+
+export {
+  updateImageDimensions,
+  generateValidationMessage,
+  getUpdatedShapes,
+  getAllShapes,
+  groupShapes,
+  getUpdatedRectangle,
+  getUpdatedPlygon
+};

package/controller/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.5.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-controller@3.4.8...@pie-element/hotspot-controller@3.5.0) (2022-05-03)
+
+
+### Features
+
+* **hotspot:** added configurable validation PD-1702 ([18eb985](https://github.com/pie-framework/pie-elements/commit/18eb98568adf9248dc616a9ae71d9f8394b62fc1))
+* **hotspot:** PD-1703 implement ui/ux for item validation ([a962183](https://github.com/pie-framework/pie-elements/commit/a962183d0941936b69a95b32002135507d769170))
+
+
+
+
+
 ## [3.4.5](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-controller@3.4.3...@pie-element/hotspot-controller@3.4.5) (2021-11-11)
 
 **Note:** Version bump only for package @pie-element/hotspot-controller

package/controller/lib/index.js

@@ -9,6 +9,7 @@ exports.createDefaultModel = exports.createCorrectResponseSession = void 0;
 exports.model = model;
 exports.normalize = void 0;
 exports.outcome = outcome;
+exports.validate = void 0;
 
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 
@@ -225,4 +226,38 @@ var createCorrectResponseSession = function createCorrectResponseSession(questio
 };
 
 exports.createCorrectResponseSession = createCorrectResponseSession;
+
+var validate = function validate() {
+  var model = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var shapes = model.shapes;
+  var _config$minShapes = config.minShapes,
+      minShapes = _config$minShapes === void 0 ? 2 : _config$minShapes,
+      maxShapes = config.maxShapes,
+      maxSelections = config.maxSelections;
+  var errors = {};
+  var allShapes = Object.values(shapes || {}).reduce(function (acc, shape) {
+    return [].concat((0, _toConsumableArray2["default"])(acc), (0, _toConsumableArray2["default"])(shape));
+  }, []);
+  var nbOfSelections = (allShapes || []).reduce(function (acc, shape) {
+    return shape.correct ? acc + 1 : acc;
+  }, 0);
+  var nbOfShapes = (allShapes || []).length;
+
+  if (nbOfShapes < minShapes) {
+    errors.shapesError = "There should be at least ".concat(minShapes, " shapes defined.");
+  } else if (nbOfShapes > maxShapes) {
+    errors.shapesError = "No more than ".concat(maxShapes, " shapes should be defined.");
+  }
+
+  if (nbOfSelections < 1) {
+    errors.selectionsError = 'There should be at least 1 shape selected.';
+  } else if (nbOfSelections > maxSelections) {
+    errors.selectionsError = "No more than ".concat(maxSelections, " shapes should be selected.");
+  }
+
+  return errors;
+};
+
+exports.validate = validate;
 //# sourceMappingURL=index.js.map

package/controller/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.js"],"names":["log","normalize","question","promptEnabled","rationaleEnabled","teacherInstructionsEnabled","studentInstructionsEnabled","strokeWidth","model","session","env","normalizedQuestion","imageUrl","dimensions","hotspotColor","multipleCorrect","outlineColor","partialScoring","prompt","shapes","rectangles","polygons","Promise","resolve","out","disabled","mode","map","index","rectProps","polyProps","responseCorrect","undefined","role","rationale","teacherInstructions","createDefaultModel","defaults","getScore","config","answers","partialScoringEnabled","enabled","correctAnswers","selectedChoices","choices","correctChoices","filter","choice","correct","forEach","shape","selected","answer","id","correctlySelected","extraAnswers","length","total","str","toFixed","parseFloat","outcome","score","empty","returnShapesCorrect","i","push","createCorrectResponseSession","rectangleCorrect","polygonsCorrect"],"mappings":"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","sourcesContent":["import debug from 'debug';\nimport isEmpty from 'lodash/isEmpty';\nimport { partialScoring } from '@pie-lib/controller-utils';\n\nimport { isResponseCorrect } from './utils';\n\nimport defaults from './defaults';\n\nconst log = debug('pie-elements:hotspot:controller');\n\nexport const normalize = question => ({\n  promptEnabled: true,\n  rationaleEnabled: true,\n  teacherInstructionsEnabled: true,\n  studentInstructionsEnabled: true,\n  strokeWidth: 5,\n  ...question,\n});\n\nexport function model(question, session, env) {\n  const normalizedQuestion = normalize(question);\n  const {\n    imageUrl,\n    dimensions,\n    hotspotColor,\n    multipleCorrect,\n    outlineColor,\n    partialScoring,\n    prompt,\n    shapes\n  } = normalizedQuestion;\n  const { rectangles, polygons } = shapes || {};\n\n  return new Promise(resolve => {\n    const out = {\n      disabled: env.mode !== 'gather',\n      mode: env.mode,\n      dimensions,\n      imageUrl,\n      outlineColor,\n      hotspotColor,\n      multipleCorrect,\n      partialScoring,\n      shapes: {\n        ...shapes,\n        // eslint-disable-next-line no-unused-vars\n        rectangles: (rectangles || []).map(({ index, ...rectProps }) => ({ ...rectProps })),\n        // eslint-disable-next-line no-unused-vars\n        polygons: (polygons || []).map(({ index, ...polyProps }) => ({ ...polyProps }))\n      },\n      responseCorrect:\n        env.mode === 'evaluate'\n          ? isResponseCorrect(normalizedQuestion, session)\n          : undefined\n    };\n\n    if (env.role === 'instructor' && (env.mode === 'view' || env.mode === 'evaluate')) {\n      out.rationale = normalizedQuestion.rationaleEnabled ? normalizedQuestion.rationale : null;\n      out.teacherInstructions = normalizedQuestion.teacherInstructionsEnabled ? normalizedQuestion.teacherInstructions : null;\n    } else {\n      out.rationale = null;\n      out.teacherInstructions = null;\n    }\n\n    out.prompt = normalizedQuestion.promptEnabled ? prompt : null;\n    out.strokeWidth = normalizedQuestion.strokeWidth;\n\n    // console.log(out);\n    resolve(out);\n  });\n}\n\nexport const createDefaultModel = (model = {}) =>\n  new Promise(resolve => {\n    resolve({\n      ...defaults,\n      ...model,\n    });\n  });\n\nconst getScore = (config, session, env = {}) => {\n  const { answers } = session || {};\n\n  if (!config.shapes || (!config.shapes.rectangles && !config.shapes.polygons)) {\n    return 0;\n  }\n\n  const { shapes: { rectangles = [], polygons = [] } = {} } = config;\n  const partialScoringEnabled = partialScoring.enabled(config, env);\n\n  if (!partialScoringEnabled) {\n    return isResponseCorrect(config, session) ? 1 : 0;\n  }\n\n  let correctAnswers = 0;\n  let selectedChoices = 0;\n\n  const choices = [...rectangles, ...polygons];\n\n  const correctChoices = choices.filter(choice => choice.correct);\n\n  choices.forEach(shape => {\n    const selected = answers && answers.filter(answer => answer.id === shape.id)[0];\n    const correctlySelected = shape.correct && selected;\n\n    if(selected) {\n      selectedChoices +=1;\n    }\n\n    if (correctlySelected) {\n      correctAnswers += 1;\n    }\n  });\n\n  const extraAnswers = selectedChoices > correctChoices.length ? selectedChoices - correctChoices.length : 0;\n\n  const total = correctChoices.length === 0 ? 1 : correctChoices.length;\n  const str = ((correctAnswers - extraAnswers) / total).toFixed(2);\n\n  return str < 0 ? 0 : parseFloat(str);\n};\n\nexport function outcome(config, session, env = {}) {\n  return new Promise(resolve => {\n    log('outcome...');\n\n    if (!session || isEmpty(session)) {\n      resolve({ score: 0, empty: true });\n    }\n\n    if (session.answers) {\n      const score = getScore(config, session, env);\n      resolve({ score });\n    } else {\n      resolve({score: 0, empty: true})\n    }\n  });\n}\n\nconst returnShapesCorrect = (shapes) => {\n  let answers = [];\n\n  shapes.forEach(i => {\n    const { correct, id } = i;\n    if (correct) {\n      answers.push({ id });\n    }\n  });\n  return answers;\n};\n\nexport const createCorrectResponseSession = (question, env) => {\n  return new Promise(resolve => {\n    if (env.mode !== 'evaluate' && env.role === 'instructor') {\n      const { shapes: { rectangles = [], polygons = {} } = {} } = question;\n\n      const rectangleCorrect = returnShapesCorrect(rectangles);\n      const polygonsCorrect = returnShapesCorrect(polygons);\n\n      resolve({\n        answers: [\n          ...rectangleCorrect,\n          ...polygonsCorrect\n        ],\n        id: '1'\n      });\n    } else {\n      resolve(null);\n    }\n  });\n};\n"],"file":"index.js"}
+{"version":3,"sources":["../src/index.js"],"names":["log","normalize","question","promptEnabled","rationaleEnabled","teacherInstructionsEnabled","studentInstructionsEnabled","strokeWidth","model","session","env","normalizedQuestion","imageUrl","dimensions","hotspotColor","multipleCorrect","outlineColor","partialScoring","prompt","shapes","rectangles","polygons","Promise","resolve","out","disabled","mode","map","index","rectProps","polyProps","responseCorrect","undefined","role","rationale","teacherInstructions","createDefaultModel","defaults","getScore","config","answers","partialScoringEnabled","enabled","correctAnswers","selectedChoices","choices","correctChoices","filter","choice","correct","forEach","shape","selected","answer","id","correctlySelected","extraAnswers","length","total","str","toFixed","parseFloat","outcome","score","empty","returnShapesCorrect","i","push","createCorrectResponseSession","rectangleCorrect","polygonsCorrect","validate","minShapes","maxShapes","maxSelections","errors","allShapes","Object","values","reduce","acc","nbOfSelections","nbOfShapes","shapesError","selectionsError"],"mappings":"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","sourcesContent":["import debug from 'debug';\nimport isEmpty from 'lodash/isEmpty';\nimport { partialScoring } from '@pie-lib/controller-utils';\n\nimport { isResponseCorrect } from './utils';\n\nimport defaults from './defaults';\n\nconst log = debug('pie-elements:hotspot:controller');\n\nexport const normalize = question => ({\n  promptEnabled: true,\n  rationaleEnabled: true,\n  teacherInstructionsEnabled: true,\n  studentInstructionsEnabled: true,\n  strokeWidth: 5,\n  ...question,\n});\n\nexport function model(question, session, env) {\n  const normalizedQuestion = normalize(question);\n  const {\n    imageUrl,\n    dimensions,\n    hotspotColor,\n    multipleCorrect,\n    outlineColor,\n    partialScoring,\n    prompt,\n    shapes\n  } = normalizedQuestion;\n  const { rectangles, polygons } = shapes || {};\n\n  return new Promise(resolve => {\n    const out = {\n      disabled: env.mode !== 'gather',\n      mode: env.mode,\n      dimensions,\n      imageUrl,\n      outlineColor,\n      hotspotColor,\n      multipleCorrect,\n      partialScoring,\n      shapes: {\n        ...shapes,\n        // eslint-disable-next-line no-unused-vars\n        rectangles: (rectangles || []).map(({ index, ...rectProps }) => ({ ...rectProps })),\n        // eslint-disable-next-line no-unused-vars\n        polygons: (polygons || []).map(({ index, ...polyProps }) => ({ ...polyProps }))\n      },\n      responseCorrect:\n        env.mode === 'evaluate'\n          ? isResponseCorrect(normalizedQuestion, session)\n          : undefined\n    };\n\n    if (env.role === 'instructor' && (env.mode === 'view' || env.mode === 'evaluate')) {\n      out.rationale = normalizedQuestion.rationaleEnabled ? normalizedQuestion.rationale : null;\n      out.teacherInstructions = normalizedQuestion.teacherInstructionsEnabled ? normalizedQuestion.teacherInstructions : null;\n    } else {\n      out.rationale = null;\n      out.teacherInstructions = null;\n    }\n\n    out.prompt = normalizedQuestion.promptEnabled ? prompt : null;\n    out.strokeWidth = normalizedQuestion.strokeWidth;\n\n    // console.log(out);\n    resolve(out);\n  });\n}\n\nexport const createDefaultModel = (model = {}) =>\n  new Promise(resolve => {\n    resolve({\n      ...defaults,\n      ...model,\n    });\n  });\n\nconst getScore = (config, session, env = {}) => {\n  const { answers } = session || {};\n\n  if (!config.shapes || (!config.shapes.rectangles && !config.shapes.polygons)) {\n    return 0;\n  }\n\n  const { shapes: { rectangles = [], polygons = [] } = {} } = config;\n  const partialScoringEnabled = partialScoring.enabled(config, env);\n\n  if (!partialScoringEnabled) {\n    return isResponseCorrect(config, session) ? 1 : 0;\n  }\n\n  let correctAnswers = 0;\n  let selectedChoices = 0;\n\n  const choices = [...rectangles, ...polygons];\n\n  const correctChoices = choices.filter(choice => choice.correct);\n\n  choices.forEach(shape => {\n    const selected = answers && answers.filter(answer => answer.id === shape.id)[0];\n    const correctlySelected = shape.correct && selected;\n\n    if(selected) {\n      selectedChoices +=1;\n    }\n\n    if (correctlySelected) {\n      correctAnswers += 1;\n    }\n  });\n\n  const extraAnswers = selectedChoices > correctChoices.length ? selectedChoices - correctChoices.length : 0;\n\n  const total = correctChoices.length === 0 ? 1 : correctChoices.length;\n  const str = ((correctAnswers - extraAnswers) / total).toFixed(2);\n\n  return str < 0 ? 0 : parseFloat(str);\n};\n\nexport function outcome(config, session, env = {}) {\n  return new Promise(resolve => {\n    log('outcome...');\n\n    if (!session || isEmpty(session)) {\n      resolve({ score: 0, empty: true });\n    }\n\n    if (session.answers) {\n      const score = getScore(config, session, env);\n      resolve({ score });\n    } else {\n      resolve({score: 0, empty: true})\n    }\n  });\n}\n\nconst returnShapesCorrect = (shapes) => {\n  let answers = [];\n\n  shapes.forEach(i => {\n    const { correct, id } = i;\n    if (correct) {\n      answers.push({ id });\n    }\n  });\n  return answers;\n};\n\nexport const createCorrectResponseSession = (question, env) => {\n  return new Promise(resolve => {\n    if (env.mode !== 'evaluate' && env.role === 'instructor') {\n      const { shapes: { rectangles = [], polygons = {} } = {} } = question;\n\n      const rectangleCorrect = returnShapesCorrect(rectangles);\n      const polygonsCorrect = returnShapesCorrect(polygons);\n\n      resolve({\n        answers: [\n          ...rectangleCorrect,\n          ...polygonsCorrect\n        ],\n        id: '1'\n      });\n    } else {\n      resolve(null);\n    }\n  });\n};\n\nexport const validate = (model = {}, config = {}) => {\n  const { shapes } = model;\n  const { minShapes = 2, maxShapes, maxSelections } = config;\n  const errors = {};\n\n  const allShapes = Object.values(shapes || {}).reduce((acc, shape) => [...acc, ...shape], []);\n\n  const nbOfSelections = (allShapes || []).reduce((acc, shape) => shape.correct ? acc + 1 : acc, 0);\n\n  const nbOfShapes = (allShapes || []).length;\n\n  if (nbOfShapes < minShapes) {\n    errors.shapesError = `There should be at least ${minShapes} shapes defined.`;\n  } else if (nbOfShapes > maxShapes) {\n    errors.shapesError = `No more than ${maxShapes} shapes should be defined.`;\n  }\n\n  if (nbOfSelections < 1) {\n    errors.selectionsError = 'There should be at least 1 shape selected.';\n  } else if (nbOfSelections > maxSelections) {\n    errors.selectionsError = `No more than ${maxSelections} shapes should be selected.`;\n  }\n\n  return errors;\n};\n"],"file":"index.js"}

package/controller/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pie-element/hotspot-controller",
   "private": true,
-  "version": "3.4.8",
+  "version": "3.5.0",
   "description": "",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"

package/controller/src/index.js

@@ -169,3 +169,29 @@ export const createCorrectResponseSession = (question, env) => {
     }
   });
 };
+
+export const validate = (model = {}, config = {}) => {
+  const { shapes } = model;
+  const { minShapes = 2, maxShapes, maxSelections } = config;
+  const errors = {};
+
+  const allShapes = Object.values(shapes || {}).reduce((acc, shape) => [...acc, ...shape], []);
+
+  const nbOfSelections = (allShapes || []).reduce((acc, shape) => shape.correct ? acc + 1 : acc, 0);
+
+  const nbOfShapes = (allShapes || []).length;
+
+  if (nbOfShapes < minShapes) {
+    errors.shapesError = `There should be at least ${minShapes} shapes defined.`;
+  } else if (nbOfShapes > maxShapes) {
+    errors.shapesError = `No more than ${maxShapes} shapes should be defined.`;
+  }
+
+  if (nbOfSelections < 1) {
+    errors.selectionsError = 'There should be at least 1 shape selected.';
+  } else if (nbOfSelections > maxSelections) {
+    errors.selectionsError = `No more than ${maxSelections} shapes should be selected.`;
+  }
+
+  return errors;
+};

package/lib/index.js

@@ -64,6 +64,9 @@ var Hotspot = /*#__PURE__*/function (_HTMLElement) {
     }
   }, {
     key: "session",
+    get: function get() {
+      return this._session;
+    },
     set: function set(s) {
       if (s && !s.answers) {
         s.answers = [];

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.js"],"names":["Hotspot","m","_model","dispatchEvent","ModelSetEvent","tagName","toLowerCase","isComplete","_render","_session","Array","isArray","answers","length","s","data","SessionChangedEvent","el","React","createElement","HotspotComponent","model","session","onSelectChoice","bind","ReactDOM","render","HTMLElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AAKA;;AACA;;;;;;IAEqBA,O;;;;;;;;;;;;SACnB,aAAUC,CAAV,EAAa;AACX,WAAKC,MAAL,GAAcD,CAAd;AAEA,WAAKE,aAAL,CACE,IAAIC,8BAAJ,CACE,KAAKC,OAAL,CAAaC,WAAb,EADF,EAEE,KAAKC,UAAL,EAFF,EAGE,CAAC,CAAC,KAAKL,MAHT,CADF;;AAOA,WAAKM,OAAL;AACD;;;WAED,sBAAa;AACX,UAAI,CAAC,KAAKC,QAAV,EAAoB;AAClB,eAAO,KAAP;AACD;;AAED,aACEC,KAAK,CAACC,OAAN,CAAc,KAAKF,QAAL,CAAcG,OAA5B,KAAwC,KAAKH,QAAL,CAAcG,OAAd,CAAsBC,MAAtB,GAA+B,CADzE;AAGD;;;SAED,aAAYC,CAAZ,EAAe;AACb,UAAIA,CAAC,IAAI,CAACA,CAAC,CAACF,OAAZ,EAAqB;AACnBE,QAAAA,CAAC,CAACF,OAAF,GAAY,EAAZ;AACD;;AAED,WAAKH,QAAL,GAAgBK,CAAhB;;AACA,WAAKN,OAAL;AACD;;;WAED,wBAAeO,IAAf,EAAqB;AACnB,8CAAmB,KAAKN,QAAxB,EAAkC,KAAKP,MAAvC,EAA+Ca,IAA/C;AAEA,WAAKZ,aAAL,CACE,IAAIa,oCAAJ,CAAwB,KAAKX,OAAL,CAAaC,WAAb,EAAxB,EAAoD,KAAKC,UAAL,EAApD,CADF;;AAIA,WAAKC,OAAL;AACD;;;WAED,6BAAoB;AAClB,WAAKA,OAAL;AACD;;;WAED,mBAAU;AAAA;;AACR,UAAI,KAAKN,MAAL,IAAe,KAAKO,QAAxB,EAAkC;AAChC,YAAMQ,EAAE,gBAAGC,kBAAMC,aAAN,CAAoBC,mBAApB,EAAsC;AAC/CC,UAAAA,KAAK,EAAE,KAAKnB,MADmC;AAE/CoB,UAAAA,OAAO,EAAE,KAAKb,QAFiC;AAG/Cc,UAAAA,cAAc,EAAE,KAAKA,cAAL,CAAoBC,IAApB,CAAyB,IAAzB;AAH+B,SAAtC,CAAX;;AAKAC,6BAASC,MAAT,CAAgBT,EAAhB,EAAoB,IAApB,EAA0B,YAAM;AAC9B,yCAAW,KAAX;AACD,SAFD;AAGD;AACF;;;kDA1DkCU,W","sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\nimport { renderMath } from '@pie-lib/math-rendering';\nimport {\n  SessionChangedEvent,\n  ModelSetEvent\n} from '@pie-framework/pie-player-events';\n\nimport HotspotComponent from './hotspot';\nimport { updateSessionValue } from './session-updater';\n\nexport default class Hotspot extends HTMLElement {\n  set model(m) {\n    this._model = m;\n\n    this.dispatchEvent(\n      new ModelSetEvent(\n        this.tagName.toLowerCase(),\n        this.isComplete(),\n        !!this._model\n      )\n    );\n    this._render();\n  }\n\n  isComplete() {\n    if (!this._session) {\n      return false;\n    }\n\n    return (\n      Array.isArray(this._session.answers) && this._session.answers.length > 0\n    );\n  }\n\n  set session(s) {\n    if (s && !s.answers) {\n      s.answers = [];\n    }\n\n    this._session = s;\n    this._render();\n  }\n\n  onSelectChoice(data) {\n    updateSessionValue(this._session, this._model, data);\n\n    this.dispatchEvent(\n      new SessionChangedEvent(this.tagName.toLowerCase(), this.isComplete())\n    );\n\n    this._render();\n  }\n\n  connectedCallback() {\n    this._render();\n  }\n\n  _render() {\n    if (this._model && this._session) {\n      const el = React.createElement(HotspotComponent, {\n        model: this._model,\n        session: this._session,\n        onSelectChoice: this.onSelectChoice.bind(this)\n      });\n      ReactDOM.render(el, this, () => {\n        renderMath(this);\n      });\n    }\n  }\n}\n"],"file":"index.js"}
+{"version":3,"sources":["../src/index.js"],"names":["Hotspot","m","_model","dispatchEvent","ModelSetEvent","tagName","toLowerCase","isComplete","_render","_session","Array","isArray","answers","length","s","data","SessionChangedEvent","el","React","createElement","HotspotComponent","model","session","onSelectChoice","bind","ReactDOM","render","HTMLElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AAKA;;AACA;;;;;;IAEqBA,O;;;;;;;;;;;;SACnB,aAAUC,CAAV,EAAa;AACX,WAAKC,MAAL,GAAcD,CAAd;AAEA,WAAKE,aAAL,CACE,IAAIC,8BAAJ,CACE,KAAKC,OAAL,CAAaC,WAAb,EADF,EAEE,KAAKC,UAAL,EAFF,EAGE,CAAC,CAAC,KAAKL,MAHT,CADF;;AAOA,WAAKM,OAAL;AACD;;;WAED,sBAAa;AACX,UAAI,CAAC,KAAKC,QAAV,EAAoB;AAClB,eAAO,KAAP;AACD;;AAED,aACEC,KAAK,CAACC,OAAN,CAAc,KAAKF,QAAL,CAAcG,OAA5B,KAAwC,KAAKH,QAAL,CAAcG,OAAd,CAAsBC,MAAtB,GAA+B,CADzE;AAGD;;;SAWD,eAAc;AACZ,aAAO,KAAKJ,QAAZ;AACD,K;SAXD,aAAYK,CAAZ,EAAe;AACb,UAAIA,CAAC,IAAI,CAACA,CAAC,CAACF,OAAZ,EAAqB;AACnBE,QAAAA,CAAC,CAACF,OAAF,GAAY,EAAZ;AACD;;AAED,WAAKH,QAAL,GAAgBK,CAAhB;;AACA,WAAKN,OAAL;AACD;;;WAMD,wBAAeO,IAAf,EAAqB;AACnB,8CAAmB,KAAKN,QAAxB,EAAkC,KAAKP,MAAvC,EAA+Ca,IAA/C;AAEA,WAAKZ,aAAL,CACE,IAAIa,oCAAJ,CAAwB,KAAKX,OAAL,CAAaC,WAAb,EAAxB,EAAoD,KAAKC,UAAL,EAApD,CADF;;AAIA,WAAKC,OAAL;AACD;;;WAED,6BAAoB;AAClB,WAAKA,OAAL;AACD;;;WAED,mBAAU;AAAA;;AACR,UAAI,KAAKN,MAAL,IAAe,KAAKO,QAAxB,EAAkC;AAChC,YAAMQ,EAAE,gBAAGC,kBAAMC,aAAN,CAAoBC,mBAApB,EAAsC;AAC/CC,UAAAA,KAAK,EAAE,KAAKnB,MADmC;AAE/CoB,UAAAA,OAAO,EAAE,KAAKb,QAFiC;AAG/Cc,UAAAA,cAAc,EAAE,KAAKA,cAAL,CAAoBC,IAApB,CAAyB,IAAzB;AAH+B,SAAtC,CAAX;;AAMAC,6BAASC,MAAT,CAAgBT,EAAhB,EAAoB,IAApB,EAA0B,YAAM;AAC9B,yCAAW,KAAX;AACD,SAFD;AAGD;AACF;;;kDA/DkCU,W","sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\nimport { renderMath } from '@pie-lib/math-rendering';\nimport {\n  SessionChangedEvent,\n  ModelSetEvent\n} from '@pie-framework/pie-player-events';\n\nimport HotspotComponent from './hotspot';\nimport { updateSessionValue } from './session-updater';\n\nexport default class Hotspot extends HTMLElement {\n  set model(m) {\n    this._model = m;\n\n    this.dispatchEvent(\n      new ModelSetEvent(\n        this.tagName.toLowerCase(),\n        this.isComplete(),\n        !!this._model\n      )\n    );\n    this._render();\n  }\n\n  isComplete() {\n    if (!this._session) {\n      return false;\n    }\n\n    return (\n      Array.isArray(this._session.answers) && this._session.answers.length > 0\n    );\n  }\n\n  set session(s) {\n    if (s && !s.answers) {\n      s.answers = [];\n    }\n\n    this._session = s;\n    this._render();\n  }\n\n  get session() {\n    return this._session;\n  }\n\n  onSelectChoice(data) {\n    updateSessionValue(this._session, this._model, data);\n\n    this.dispatchEvent(\n      new SessionChangedEvent(this.tagName.toLowerCase(), this.isComplete())\n    );\n\n    this._render();\n  }\n\n  connectedCallback() {\n    this._render();\n  }\n\n  _render() {\n    if (this._model && this._session) {\n      const el = React.createElement(HotspotComponent, {\n        model: this._model,\n        session: this._session,\n        onSelectChoice: this.onSelectChoice.bind(this)\n      });\n\n      ReactDOM.render(el, this, () => {\n        renderMath(this);\n      });\n    }\n  }\n}\n"],"file":"index.js"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-element/hotspot",
-  "version": "4.10.16",
+  "version": "4.11.1",
   "description": "",
   "repository": "pie-framework/pie-elements",
   "publishConfig": {
@@ -9,8 +9,8 @@
   "dependencies": {
     "@material-ui/core": "^3.9.3",
     "@pie-framework/pie-player-events": "^0.1.0",
-    "@pie-lib/math-rendering": "^2.3.13",
-    "@pie-lib/render-ui": "^4.12.5",
+    "@pie-lib/math-rendering": "^2.4.0",
+    "@pie-lib/render-ui": "^4.12.6",
     "konva": "^3.2.5",
     "prop-types": "^15.6.1",
     "react": "^16.8.1",
@@ -19,7 +19,7 @@
   },
   "author": "pie framework developers",
   "license": "ISC",
-  "gitHead": "92cd24e6736b2eed8f82ac44ba775ad4f2080ade",
+  "gitHead": "43f534de577f1eb49e63c8dc43d5519754d4df93",
   "scripts": {
     "postpublish": "../../scripts/postpublish"
   },

package/src/index.js

@@ -42,6 +42,10 @@ export default class Hotspot extends HTMLElement {
     this._render();
   }
 
+  get session() {
+    return this._session;
+  }
+
   onSelectChoice(data) {
     updateSessionValue(this._session, this._model, data);
 
@@ -63,6 +67,7 @@ export default class Hotspot extends HTMLElement {
         session: this._session,
         onSelectChoice: this.onSelectChoice.bind(this)
       });
+
       ReactDOM.render(el, this, () => {
         renderMath(this);
       });