@pie-element/hotspot 7.1.5-next.3 → 7.2.0

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [7.2.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot@7.1.4...@pie-element/hotspot@7.2.0) (2024-10-29)
+
+
+### Bug Fixes
+
+* fixed all tests after updating pie-toolbox [PD-1460] ([9f5293d](https://github.com/pie-framework/pie-elements/commit/9f5293d618edc06f69fabb27a042ec5eee66e151))
+
+
+### Features
+
+* used configlayout, preview layout or uilayout to enable extraCSSRules inside author and player elements [PD-1460] ([eeebb02](https://github.com/pie-framework/pie-elements/commit/eeebb02f200208620c1af56366a22bf65944ba3e))
+
+
+
+
+
 ## [7.1.4](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot@7.1.3...@pie-element/hotspot@7.1.4) (2024-10-28)
 
 

package/configure/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [7.1.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-configure@7.0.6...@pie-element/hotspot-configure@7.1.0) (2024-10-29)
+
+
+### Bug Fixes
+
+* fixed all tests after updating pie-toolbox [PD-1460] ([9f5293d](https://github.com/pie-framework/pie-elements/commit/9f5293d618edc06f69fabb27a042ec5eee66e151))
+
+
+### Features
+
+* used configlayout, preview layout or uilayout to enable extraCSSRules inside author and player elements [PD-1460] ([eeebb02](https://github.com/pie-framework/pie-elements/commit/eeebb02f200208620c1af56366a22bf65944ba3e))
+
+
+
+
+
 ## [7.0.6](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-configure@7.0.5...@pie-element/hotspot-configure@7.0.6) (2024-10-28)
 
 

package/configure/lib/root.js

@@ -155,6 +155,7 @@ var Root = /*#__PURE__*/function (_React$Component) {
 
       var _ref2 = model || {},
           errors = _ref2.errors,
+          extraCSSRules = _ref2.extraCSSRules,
           promptEnabled = _ref2.promptEnabled,
           rationaleEnabled = _ref2.rationaleEnabled,
           spellCheckEnabled = _ref2.spellCheckEnabled,
@@ -194,6 +195,7 @@ var Root = /*#__PURE__*/function (_React$Component) {
       };
 
       return /*#__PURE__*/_react["default"].createElement(_configUi.layout.ConfigLayout, {
+        extraCSSRules: extraCSSRules,
         dimensions: contentDimensions,
         hideSettings: settingsPanelDisabled,
         settings: /*#__PURE__*/_react["default"].createElement(Panel, {

package/configure/lib/root.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/root.jsx"],"names":["Panel","settings","toggle","dropdown","Root","fieldType","color","onColorChanged","props","cType","value","resizeType","model","dimensions","shapes","configuration","preserveAspectRatio","onUpdateImageDimension","onUpdateShapes","nextImageDimensions","updatedDimensions","enabled","shapesArray","updatedShapes","classes","imageSupport","uploadSoundSupport","onConfigurationChanged","onImageUpload","onModelChangedByConfig","onPromptChanged","onRationaleChanged","onTeacherInstructionsChanged","baseInputConfiguration","contentDimensions","maxImageWidth","maxImageHeight","multipleCorrect","partialScoring","prompt","rationale","settingsPanelDisabled","spellCheck","teacherInstructions","withRubric","mathMlOptions","language","languageChoices","errors","promptEnabled","rationaleEnabled","spellCheckEnabled","teacherInstructionsEnabled","toolbarEditorPosition","promptError","rationaleError","shapesError","selectionsError","selections","teacherInstructionsError","validationMessage","defaultImageMaxWidth","defaultImageMaxHeight","toolbarOpts","position","panelSettings","label","options","panelProperties","rubricEnabled","getPluginProps","Settings","Properties","promptContainer","inputConfiguration","errorText","flexContainer","subheading","tooltip","hotspotColor","hotspotList","outlineColor","outlineList","handleColorChange","imageUrl","selectedHotspotColor","hoverOutlineColor","strokeWidth","add","width","e","handleOnUpdateImageDimensions","field","height","React","Component","styles","theme","display","marginBottom","spacing","unit","flex","paddingTop","marginRight","alignItems","fontSize","typography","whiteSpace","maxWidth","palette","error","main","propTypes","PropTypes","object","isRequired","shape","func"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { settings, layout, InputContainer, NumberTextField } from '@pie-lib/pie-toolbox/config-ui';\nimport PropTypes from 'prop-types';\nimport { EditableHtml } from '@pie-lib/pie-toolbox/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 { updateImageDimensions, generateValidationMessage, getUpdatedShapes, getAllShapes, groupShapes } from './utils';\n\nconst { Panel, toggle, dropdown } = 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      uploadSoundSupport,\n      onConfigurationChanged,\n      onImageUpload,\n      onModelChangedByConfig,\n      onPromptChanged,\n      onRationaleChanged,\n      onUpdateImageDimension,\n      onTeacherInstructionsChanged,\n      onUpdateShapes,\n    } = this.props;\n    const {\n      baseInputConfiguration = {},\n      contentDimensions = {},\n      maxImageWidth = {},\n      maxImageHeight = {},\n      multipleCorrect = {},\n      partialScoring = {},\n      preserveAspectRatio = {},\n      prompt = {},\n      rationale = {},\n      settingsPanelDisabled,\n      spellCheck = {},\n      teacherInstructions = {},\n      withRubric = {},\n      mathMlOptions = {},\n      language = {},\n      languageChoices = {},\n    } = configuration || {};\n    const {\n      errors,\n      promptEnabled,\n      rationaleEnabled,\n      spellCheckEnabled,\n      teacherInstructionsEnabled,\n      toolbarEditorPosition,\n    } = model || {};\n    const {\n      prompt: promptError,\n      rationale: rationaleError,\n      shapes: shapesError,\n      selections: selectionsError,\n      teacherInstructions: teacherInstructionsError,\n    } = errors || {};\n    const validationMessage = generateValidationMessage(configuration);\n\n    const defaultImageMaxWidth = maxImageWidth && maxImageWidth.prompt;\n    const defaultImageMaxHeight = maxImageHeight && maxImageHeight.prompt;\n\n    const toolbarOpts = {\n      position: toolbarEditorPosition === 'top' ? 'top' : 'bottom',\n    };\n\n    const panelSettings = {\n      multipleCorrect: multipleCorrect.settings && toggle(multipleCorrect.label),\n      partialScoring: partialScoring.settings && toggle(partialScoring.label),\n      promptEnabled: prompt.settings && toggle(prompt.label),\n      'language.enabled': language.settings && toggle(language.label, true),\n      language: language.settings && language.enabled && dropdown(languageChoices.label, languageChoices.options),\n    };\n    const panelProperties = {\n      teacherInstructionsEnabled: teacherInstructions.settings && toggle(teacherInstructions.label),\n      rationaleEnabled: rationale.settings && toggle(rationale.label),\n      spellCheckEnabled: spellCheck.settings && toggle(spellCheck.label),\n      rubricEnabled: withRubric?.settings && toggle(withRubric?.label),\n    };\n\n    const getPluginProps = (props = {}) => ({\n      ...baseInputConfiguration,\n      ...props,\n    });\n\n    return (\n      <layout.ConfigLayout\n        dimensions={contentDimensions}\n        hideSettings={settingsPanelDisabled}\n        settings={\n          <Panel\n            model={model}\n            onChangeModel={onModelChangedByConfig}\n            configuration={configuration}\n            onChangeConfiguration={onConfigurationChanged}\n            groups={{\n              Settings: panelSettings,\n              Properties: panelProperties,\n            }}\n          />\n        }\n      >\n        {teacherInstructionsEnabled && (\n          <InputContainer label={teacherInstructions.label} className={classes.promptContainer}>\n            <EditableHtml\n              markup={model.teacherInstructions || ''}\n              onChange={onTeacherInstructionsChanged}\n              imageSupport={imageSupport}\n              nonEmpty={false}\n              error={teacherInstructionsError}\n              toolbarOpts={toolbarOpts}\n              pluginProps={getPluginProps(teacherInstructions?.inputConfiguration)}\n              spellCheck={spellCheckEnabled}\n              maxImageWidth={(maxImageWidth && maxImageWidth.teacherInstructions) || defaultImageMaxWidth}\n              maxImageHeight={(maxImageHeight && maxImageHeight.teacherInstructions) || defaultImageMaxHeight}\n              uploadSoundSupport={uploadSoundSupport}\n              languageCharactersProps={[{ language: 'spanish' }, { language: 'special' }]}\n              mathMlOptions={mathMlOptions}\n            />\n            {teacherInstructionsError && <div className={classes.errorText}>{teacherInstructionsError}</div>}\n          </InputContainer>\n        )}\n\n        {promptEnabled && (\n          <InputContainer label={prompt.label} className={classes.promptContainer}>\n            <EditableHtml\n              markup={model.prompt || ''}\n              onChange={onPromptChanged}\n              imageSupport={imageSupport}\n              nonEmpty={false}\n              error={promptError}\n              toolbarOpts={toolbarOpts}\n              pluginProps={getPluginProps(prompt?.inputConfiguration)}\n              spellCheck={spellCheckEnabled}\n              maxImageWidth={defaultImageMaxWidth}\n              maxImageHeight={defaultImageMaxHeight}\n              uploadSoundSupport={uploadSoundSupport}\n              languageCharactersProps={[{ language: 'spanish' }, { language: 'special' }]}\n              mathMlOptions={mathMlOptions}\n            />\n            {promptError && <div className={classes.errorText}>{promptError}</div>}\n          </InputContainer>\n        )}\n\n        <div className={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\n        <HotspotPalette\n          hotspotColor={model.hotspotColor}\n          hotspotList={model.hotspotList}\n          outlineColor={model.outlineColor}\n          outlineList={model.outlineList}\n          onHotspotColorChange={(color) => this.handleColorChange('hotspot', color)}\n          onOutlineColorChange={(color) => this.handleColorChange('outline', color)}\n        />\n\n        <HotspotContainer\n          dimensions={model.dimensions}\n          imageUrl={model.imageUrl}\n          multipleCorrect={model.multipleCorrect}\n          hasErrors={!!shapesError || !!selectionsError}\n          hotspotColor={model.hotspotColor}\n          outlineColor={model.outlineColor}\n          selectedHotspotColor={model.selectedHotspotColor}\n          hoverOutlineColor={model.hoverOutlineColor}\n          onUpdateImageDimension={onUpdateImageDimension}\n          onUpdateShapes={onUpdateShapes}\n          onImageUpload={onImageUpload}\n          shapes={model.shapes}\n          strokeWidth={model.strokeWidth}\n          preserveAspectRatioEnabled={preserveAspectRatio.enabled}\n          insertImage={imageSupport && imageSupport.add}\n        />\n        {shapesError && <div className={classes.errorText}>{shapesError}</div>}\n        {selectionsError && <div className={classes.errorText}>{selectionsError}</div>}\n\n        {model.imageUrl && (\n          <React.Fragment>\n            <Typography variant=\"subheading\">Image Dimensions</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\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          </React.Fragment>\n        )}\n\n        {rationaleEnabled && (\n          <InputContainer label={rationale.label} className={classes.promptContainer}>\n            <EditableHtml\n              markup={model.rationale || ''}\n              onChange={onRationaleChanged}\n              imageSupport={imageSupport}\n              error={rationaleError}\n              toolbarOpts={toolbarOpts}\n              pluginProps={getPluginProps(rationale?.inputConfiguration)}\n              spellCheck={spellCheckEnabled}\n              maxImageWidth={(maxImageWidth && maxImageWidth.rationale) || defaultImageMaxWidth}\n              maxImageHeight={(maxImageHeight && maxImageHeight.rationale) || defaultImageMaxHeight}\n              uploadSoundSupport={uploadSoundSupport}\n              languageCharactersProps={[{ language: 'spanish' }, { language: 'special' }]}\n              mathMlOptions={mathMlOptions}\n            />\n            {rationaleError && <div className={classes.errorText}>{rationaleError}</div>}\n          </InputContainer>\n        )}\n      </layout.ConfigLayout>\n    );\n  }\n}\n\nconst styles = (theme) => ({\n  dimensions: {\n    display: 'flex',\n    marginBottom: theme.spacing.unit * 1.5,\n  },\n  field: {\n    flex: 1,\n    width: '90%',\n  },\n  promptContainer: {\n    paddingTop: theme.spacing.unit * 2,\n    marginBottom: theme.spacing.unit * 2,\n    width: '100%',\n  },\n  subheading: {\n    marginRight: theme.spacing.unit,\n  },\n  flexContainer: {\n    display: 'flex',\n    alignItems: 'center',\n  },\n  tooltip: {\n    fontSize: theme.typography.fontSize - 2,\n    whiteSpace: 'pre',\n    maxWidth: '500px',\n  },\n  errorText: {\n    fontSize: theme.typography.fontSize - 2,\n    color: theme.palette.error.main,\n    paddingTop: theme.spacing.unit,\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  uploadSoundSupport: 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","dropdown","Root","fieldType","color","onColorChanged","props","cType","value","resizeType","model","dimensions","shapes","configuration","preserveAspectRatio","onUpdateImageDimension","onUpdateShapes","nextImageDimensions","updatedDimensions","enabled","shapesArray","updatedShapes","classes","imageSupport","uploadSoundSupport","onConfigurationChanged","onImageUpload","onModelChangedByConfig","onPromptChanged","onRationaleChanged","onTeacherInstructionsChanged","baseInputConfiguration","contentDimensions","maxImageWidth","maxImageHeight","multipleCorrect","partialScoring","prompt","rationale","settingsPanelDisabled","spellCheck","teacherInstructions","withRubric","mathMlOptions","language","languageChoices","errors","extraCSSRules","promptEnabled","rationaleEnabled","spellCheckEnabled","teacherInstructionsEnabled","toolbarEditorPosition","promptError","rationaleError","shapesError","selectionsError","selections","teacherInstructionsError","validationMessage","defaultImageMaxWidth","defaultImageMaxHeight","toolbarOpts","position","panelSettings","label","options","panelProperties","rubricEnabled","getPluginProps","Settings","Properties","promptContainer","inputConfiguration","errorText","flexContainer","subheading","tooltip","hotspotColor","hotspotList","outlineColor","outlineList","handleColorChange","imageUrl","selectedHotspotColor","hoverOutlineColor","strokeWidth","add","width","e","handleOnUpdateImageDimensions","field","height","React","Component","styles","theme","display","marginBottom","spacing","unit","flex","paddingTop","marginRight","alignItems","fontSize","typography","whiteSpace","maxWidth","palette","error","main","propTypes","PropTypes","object","isRequired","shape","func"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { settings, layout, InputContainer, NumberTextField } from '@pie-lib/pie-toolbox/config-ui';\nimport PropTypes from 'prop-types';\nimport { EditableHtml } from '@pie-lib/pie-toolbox/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 { updateImageDimensions, generateValidationMessage, getUpdatedShapes, getAllShapes, groupShapes } from './utils';\n\nconst { Panel, toggle, dropdown } = 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      uploadSoundSupport,\n      onConfigurationChanged,\n      onImageUpload,\n      onModelChangedByConfig,\n      onPromptChanged,\n      onRationaleChanged,\n      onUpdateImageDimension,\n      onTeacherInstructionsChanged,\n      onUpdateShapes,\n    } = this.props;\n    const {\n      baseInputConfiguration = {},\n      contentDimensions = {},\n      maxImageWidth = {},\n      maxImageHeight = {},\n      multipleCorrect = {},\n      partialScoring = {},\n      preserveAspectRatio = {},\n      prompt = {},\n      rationale = {},\n      settingsPanelDisabled,\n      spellCheck = {},\n      teacherInstructions = {},\n      withRubric = {},\n      mathMlOptions = {},\n      language = {},\n      languageChoices = {},\n    } = configuration || {};\n    const {\n      errors,\n      extraCSSRules,\n      promptEnabled,\n      rationaleEnabled,\n      spellCheckEnabled,\n      teacherInstructionsEnabled,\n      toolbarEditorPosition,\n    } = model || {};\n    const {\n      prompt: promptError,\n      rationale: rationaleError,\n      shapes: shapesError,\n      selections: selectionsError,\n      teacherInstructions: teacherInstructionsError,\n    } = errors || {};\n    const validationMessage = generateValidationMessage(configuration);\n\n    const defaultImageMaxWidth = maxImageWidth && maxImageWidth.prompt;\n    const defaultImageMaxHeight = maxImageHeight && maxImageHeight.prompt;\n\n    const toolbarOpts = {\n      position: toolbarEditorPosition === 'top' ? 'top' : 'bottom',\n    };\n\n    const panelSettings = {\n      multipleCorrect: multipleCorrect.settings && toggle(multipleCorrect.label),\n      partialScoring: partialScoring.settings && toggle(partialScoring.label),\n      promptEnabled: prompt.settings && toggle(prompt.label),\n      'language.enabled': language.settings && toggle(language.label, true),\n      language: language.settings && language.enabled && dropdown(languageChoices.label, languageChoices.options),\n    };\n    const panelProperties = {\n      teacherInstructionsEnabled: teacherInstructions.settings && toggle(teacherInstructions.label),\n      rationaleEnabled: rationale.settings && toggle(rationale.label),\n      spellCheckEnabled: spellCheck.settings && toggle(spellCheck.label),\n      rubricEnabled: withRubric?.settings && toggle(withRubric?.label),\n    };\n\n    const getPluginProps = (props = {}) => ({\n      ...baseInputConfiguration,\n      ...props,\n    });\n\n    return (\n      <layout.ConfigLayout\n        extraCSSRules={extraCSSRules}\n        dimensions={contentDimensions}\n        hideSettings={settingsPanelDisabled}\n        settings={\n          <Panel\n            model={model}\n            onChangeModel={onModelChangedByConfig}\n            configuration={configuration}\n            onChangeConfiguration={onConfigurationChanged}\n            groups={{\n              Settings: panelSettings,\n              Properties: panelProperties,\n            }}\n          />\n        }\n      >\n        {teacherInstructionsEnabled && (\n          <InputContainer label={teacherInstructions.label} className={classes.promptContainer}>\n            <EditableHtml\n              markup={model.teacherInstructions || ''}\n              onChange={onTeacherInstructionsChanged}\n              imageSupport={imageSupport}\n              nonEmpty={false}\n              error={teacherInstructionsError}\n              toolbarOpts={toolbarOpts}\n              pluginProps={getPluginProps(teacherInstructions?.inputConfiguration)}\n              spellCheck={spellCheckEnabled}\n              maxImageWidth={(maxImageWidth && maxImageWidth.teacherInstructions) || defaultImageMaxWidth}\n              maxImageHeight={(maxImageHeight && maxImageHeight.teacherInstructions) || defaultImageMaxHeight}\n              uploadSoundSupport={uploadSoundSupport}\n              languageCharactersProps={[{ language: 'spanish' }, { language: 'special' }]}\n              mathMlOptions={mathMlOptions}\n            />\n            {teacherInstructionsError && <div className={classes.errorText}>{teacherInstructionsError}</div>}\n          </InputContainer>\n        )}\n\n        {promptEnabled && (\n          <InputContainer label={prompt.label} className={classes.promptContainer}>\n            <EditableHtml\n              markup={model.prompt || ''}\n              onChange={onPromptChanged}\n              imageSupport={imageSupport}\n              nonEmpty={false}\n              error={promptError}\n              toolbarOpts={toolbarOpts}\n              pluginProps={getPluginProps(prompt?.inputConfiguration)}\n              spellCheck={spellCheckEnabled}\n              maxImageWidth={defaultImageMaxWidth}\n              maxImageHeight={defaultImageMaxHeight}\n              uploadSoundSupport={uploadSoundSupport}\n              languageCharactersProps={[{ language: 'spanish' }, { language: 'special' }]}\n              mathMlOptions={mathMlOptions}\n            />\n            {promptError && <div className={classes.errorText}>{promptError}</div>}\n          </InputContainer>\n        )}\n\n        <div className={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\n        <HotspotPalette\n          hotspotColor={model.hotspotColor}\n          hotspotList={model.hotspotList}\n          outlineColor={model.outlineColor}\n          outlineList={model.outlineList}\n          onHotspotColorChange={(color) => this.handleColorChange('hotspot', color)}\n          onOutlineColorChange={(color) => this.handleColorChange('outline', color)}\n        />\n\n        <HotspotContainer\n          dimensions={model.dimensions}\n          imageUrl={model.imageUrl}\n          multipleCorrect={model.multipleCorrect}\n          hasErrors={!!shapesError || !!selectionsError}\n          hotspotColor={model.hotspotColor}\n          outlineColor={model.outlineColor}\n          selectedHotspotColor={model.selectedHotspotColor}\n          hoverOutlineColor={model.hoverOutlineColor}\n          onUpdateImageDimension={onUpdateImageDimension}\n          onUpdateShapes={onUpdateShapes}\n          onImageUpload={onImageUpload}\n          shapes={model.shapes}\n          strokeWidth={model.strokeWidth}\n          preserveAspectRatioEnabled={preserveAspectRatio.enabled}\n          insertImage={imageSupport && imageSupport.add}\n        />\n        {shapesError && <div className={classes.errorText}>{shapesError}</div>}\n        {selectionsError && <div className={classes.errorText}>{selectionsError}</div>}\n\n        {model.imageUrl && (\n          <React.Fragment>\n            <Typography variant=\"subheading\">Image Dimensions</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\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          </React.Fragment>\n        )}\n\n        {rationaleEnabled && (\n          <InputContainer label={rationale.label} className={classes.promptContainer}>\n            <EditableHtml\n              markup={model.rationale || ''}\n              onChange={onRationaleChanged}\n              imageSupport={imageSupport}\n              error={rationaleError}\n              toolbarOpts={toolbarOpts}\n              pluginProps={getPluginProps(rationale?.inputConfiguration)}\n              spellCheck={spellCheckEnabled}\n              maxImageWidth={(maxImageWidth && maxImageWidth.rationale) || defaultImageMaxWidth}\n              maxImageHeight={(maxImageHeight && maxImageHeight.rationale) || defaultImageMaxHeight}\n              uploadSoundSupport={uploadSoundSupport}\n              languageCharactersProps={[{ language: 'spanish' }, { language: 'special' }]}\n              mathMlOptions={mathMlOptions}\n            />\n            {rationaleError && <div className={classes.errorText}>{rationaleError}</div>}\n          </InputContainer>\n        )}\n      </layout.ConfigLayout>\n    );\n  }\n}\n\nconst styles = (theme) => ({\n  dimensions: {\n    display: 'flex',\n    marginBottom: theme.spacing.unit * 1.5,\n  },\n  field: {\n    flex: 1,\n    width: '90%',\n  },\n  promptContainer: {\n    paddingTop: theme.spacing.unit * 2,\n    marginBottom: theme.spacing.unit * 2,\n    width: '100%',\n  },\n  subheading: {\n    marginRight: theme.spacing.unit,\n  },\n  flexContainer: {\n    display: 'flex',\n    alignItems: 'center',\n  },\n  tooltip: {\n    fontSize: theme.typography.fontSize - 2,\n    whiteSpace: 'pre',\n    maxWidth: '500px',\n  },\n  errorText: {\n    fontSize: theme.typography.fontSize - 2,\n    color: theme.palette.error.main,\n    paddingTop: theme.spacing.unit,\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  uploadSoundSupport: PropTypes.shape({\n    add: PropTypes.func,\n    delete: PropTypes.func,\n  }),\n  onImageUpload: PropTypes.func.isRequired,\n  onColorChanged: PropTypes.func.isRequired,\n  onPromptChanged: PropTypes.func.isRequired,\n  onUpdateImageDimension: PropTypes.func.isRequired,\n  onUpdateShapes: PropTypes.func.isRequired,\n  onModelChangedByConfig: PropTypes.func.isRequired,\n  onRationaleChanged: PropTypes.func.isRequired,\n  onConfigurationChanged: PropTypes.func.isRequired,\n  onTeacherInstructionsChanged: PropTypes.func.isRequired,\n};\n\nexport default withStyles(styles)(Root);\n"],"file":"root.js"}

package/configure/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pie-element/hotspot-configure",
   "private": true,
-  "version": "7.0.6",
+  "version": "7.1.0",
   "description": "",
   "main": "lib/index.js",
   "module": "src/index.js",
@@ -10,7 +10,7 @@
     "@material-ui/core": "^3.9.2",
     "@material-ui/icons": "^3.0.2",
     "@pie-framework/pie-configure-events": "^1.3.0",
-    "@pie-lib/pie-toolbox": "2.0.15",
+    "@pie-lib/pie-toolbox": "2.1.0",
     "classnames": "^2.2.6",
     "debug": "^3.1.0",
     "konva": "^3.2.4",

package/configure/src/root.jsx

@@ -83,6 +83,7 @@ export class Root extends React.Component {
     } = configuration || {};
     const {
       errors,
+      extraCSSRules,
       promptEnabled,
       rationaleEnabled,
       spellCheckEnabled,
@@ -126,6 +127,7 @@ export class Root extends React.Component {
 
     return (
       <layout.ConfigLayout
+        extraCSSRules={extraCSSRules}
         dimensions={contentDimensions}
         hideSettings={settingsPanelDisabled}
         settings={

package/controller/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [5.1.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-controller@5.0.7...@pie-element/hotspot-controller@5.1.0) (2024-10-29)
+
+
+### Bug Fixes
+
+* fixed all tests after updating pie-toolbox [PD-1460] ([9f5293d](https://github.com/pie-framework/pie-elements/commit/9f5293d618edc06f69fabb27a042ec5eee66e151))
+
+
+### Features
+
+* used configlayout, preview layout or uilayout to enable extraCSSRules inside author and player elements [PD-1460] ([eeebb02](https://github.com/pie-framework/pie-elements/commit/eeebb02f200208620c1af56366a22bf65944ba3e))
+
+
+
+
+
 ## [5.0.7](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-controller@5.0.6...@pie-element/hotspot-controller@5.0.7) (2024-10-28)
 
 

package/controller/lib/index.js

@@ -95,7 +95,8 @@ function model(question, session, env) {
           return _objectSpread({}, circleProps);
         })
       }),
-      responseCorrect: env.mode === 'evaluate' ? (0, _utils.isResponseCorrect)(normalizedQuestion, session) : undefined
+      responseCorrect: env.mode === 'evaluate' ? (0, _utils.isResponseCorrect)(normalizedQuestion, session) : undefined,
+      extraCSSRules: normalizedQuestion.extraCSSRules
     };
 
     if (env.role === 'instructor' && (env.mode === 'view' || env.mode === 'evaluate')) {

package/controller/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.js"],"names":["log","normalize","question","defaults","model","session","env","normalizedQuestion","imageUrl","dimensions","hotspotColor","hoverOutlineColor","selectedHotspotColor","multipleCorrect","outlineColor","partialScoring","prompt","shapes","language","rectangles","polygons","circles","Promise","resolve","out","disabled","mode","map","index","rectProps","polyProps","circleProps","responseCorrect","undefined","role","rationale","rationaleEnabled","teacherInstructions","teacherInstructionsEnabled","promptEnabled","strokeWidth","createDefaultModel","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","circlesCorrect","getInnerText","html","replaceAll","getContent","replace","validate","minShapes","maxShapes","maxSelections","errors","field","required","allShapes","Object","values","reduce","acc","nbOfSelections","nbOfShapes","selections"],"mappings":"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","sourcesContent":["import debug from 'debug';\nimport isEmpty from 'lodash/isEmpty';\nimport { partialScoring } from '@pie-lib/pie-toolbox/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  ...defaults,\n  ...question,\n});\n\nexport function model(question, session, env) {\n  const normalizedQuestion = normalize(question);\n  const {\n    imageUrl,\n    dimensions,\n    hotspotColor,\n    hoverOutlineColor,\n    selectedHotspotColor,\n    multipleCorrect,\n    outlineColor,\n    partialScoring,\n    prompt,\n    shapes,\n    language,\n  } = normalizedQuestion;\n  const { rectangles, polygons, circles } = 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      hoverOutlineColor,\n      selectedHotspotColor,\n      multipleCorrect,\n      partialScoring,\n      language,\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        // eslint-disable-next-line no-unused-vars\n        circles: (circles || []).map(({ index, ...circleProps }) => ({ ...circleProps })),\n      },\n      responseCorrect: env.mode === 'evaluate' ? isResponseCorrect(normalizedQuestion, session) : 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\n        ? normalizedQuestion.teacherInstructions\n        : 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 && !config.shapes.circles)) {\n    return 0;\n  }\n\n  const { shapes: { rectangles = [], polygons = [], circles = [] } = {} } = 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, ...circles];\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 = [], circles = [], polygons = {} } = {} } = question;\n\n      const rectangleCorrect = returnShapesCorrect(rectangles);\n      const polygonsCorrect = returnShapesCorrect(polygons);\n      const circlesCorrect = returnShapesCorrect(circles);\n\n      resolve({\n        answers: [...rectangleCorrect, ...polygonsCorrect, ...circlesCorrect],\n        id: '1',\n      });\n    } else {\n      resolve(null);\n    }\n  });\n};\n\n// remove all html tags\nconst getInnerText = (html) => (html || '').replaceAll(/<[^>]*>/g, '');\n\n// remove all html tags except img and iframe\nconst getContent = (html) => (html || '').replace(/(<(?!img|iframe)([^>]+)>)/gi, '');\n\nexport const validate = (model = {}, config = {}) => {\n  const { shapes } = model;\n  const { minShapes = 2, maxShapes, maxSelections } = config;\n  const errors = {};\n\n  ['teacherInstructions', 'prompt', 'rationale'].forEach((field) => {\n    if (config[field]?.required && !getContent(model[field])) {\n      errors[field] = 'This field is required.';\n    }\n  });\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.shapes = `There should be at least ${minShapes} shapes defined.`;\n  } else if (nbOfShapes > maxShapes) {\n    errors.shapes = `No more than ${maxShapes} shapes should be defined.`;\n  }\n\n  if (nbOfSelections < 1) {\n    errors.selections = 'There should be at least 1 shape selected.';\n  } else if (nbOfSelections > maxSelections) {\n    errors.selections = `No more than ${maxSelections} shapes should be selected.`;\n  }\n\n  return errors;\n};\n"],"file":"index.js"}
+{"version":3,"sources":["../src/index.js"],"names":["log","normalize","question","defaults","model","session","env","normalizedQuestion","imageUrl","dimensions","hotspotColor","hoverOutlineColor","selectedHotspotColor","multipleCorrect","outlineColor","partialScoring","prompt","shapes","language","rectangles","polygons","circles","Promise","resolve","out","disabled","mode","map","index","rectProps","polyProps","circleProps","responseCorrect","undefined","extraCSSRules","role","rationale","rationaleEnabled","teacherInstructions","teacherInstructionsEnabled","promptEnabled","strokeWidth","createDefaultModel","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","circlesCorrect","getInnerText","html","replaceAll","getContent","replace","validate","minShapes","maxShapes","maxSelections","errors","field","required","allShapes","Object","values","reduce","acc","nbOfSelections","nbOfShapes","selections"],"mappings":"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","sourcesContent":["import debug from 'debug';\nimport isEmpty from 'lodash/isEmpty';\nimport { partialScoring } from '@pie-lib/pie-toolbox/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  ...defaults,\n  ...question,\n});\n\nexport function model(question, session, env) {\n  const normalizedQuestion = normalize(question);\n  const {\n    imageUrl,\n    dimensions,\n    hotspotColor,\n    hoverOutlineColor,\n    selectedHotspotColor,\n    multipleCorrect,\n    outlineColor,\n    partialScoring,\n    prompt,\n    shapes,\n    language,\n  } = normalizedQuestion;\n  const { rectangles, polygons, circles } = 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      hoverOutlineColor,\n      selectedHotspotColor,\n      multipleCorrect,\n      partialScoring,\n      language,\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        // eslint-disable-next-line no-unused-vars\n        circles: (circles || []).map(({ index, ...circleProps }) => ({ ...circleProps })),\n      },\n      responseCorrect: env.mode === 'evaluate' ? isResponseCorrect(normalizedQuestion, session) : undefined,\n      extraCSSRules: normalizedQuestion.extraCSSRules,\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\n        ? normalizedQuestion.teacherInstructions\n        : 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 && !config.shapes.circles)) {\n    return 0;\n  }\n\n  const { shapes: { rectangles = [], polygons = [], circles = [] } = {} } = 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, ...circles];\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 = [], circles = [], polygons = {} } = {} } = question;\n\n      const rectangleCorrect = returnShapesCorrect(rectangles);\n      const polygonsCorrect = returnShapesCorrect(polygons);\n      const circlesCorrect = returnShapesCorrect(circles);\n\n      resolve({\n        answers: [...rectangleCorrect, ...polygonsCorrect, ...circlesCorrect],\n        id: '1',\n      });\n    } else {\n      resolve(null);\n    }\n  });\n};\n\n// remove all html tags\nconst getInnerText = (html) => (html || '').replaceAll(/<[^>]*>/g, '');\n\n// remove all html tags except img and iframe\nconst getContent = (html) => (html || '').replace(/(<(?!img|iframe)([^>]+)>)/gi, '');\n\nexport const validate = (model = {}, config = {}) => {\n  const { shapes } = model;\n  const { minShapes = 2, maxShapes, maxSelections } = config;\n  const errors = {};\n\n  ['teacherInstructions', 'prompt', 'rationale'].forEach((field) => {\n    if (config[field]?.required && !getContent(model[field])) {\n      errors[field] = 'This field is required.';\n    }\n  });\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.shapes = `There should be at least ${minShapes} shapes defined.`;\n  } else if (nbOfShapes > maxShapes) {\n    errors.shapes = `No more than ${maxShapes} shapes should be defined.`;\n  }\n\n  if (nbOfSelections < 1) {\n    errors.selections = 'There should be at least 1 shape selected.';\n  } else if (nbOfSelections > maxSelections) {\n    errors.selections = `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": "5.0.7",
+  "version": "5.1.0",
   "description": "",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
@@ -11,7 +11,7 @@
   "main": "lib/index.js",
   "module": "src/index.js",
   "dependencies": {
-    "@pie-lib/pie-toolbox": "2.0.15",
+    "@pie-lib/pie-toolbox": "2.1.0",
     "debug": "^4.1.1",
     "lodash": "^4.17.15"
   }

package/controller/src/index.js

@@ -53,6 +53,7 @@ export function model(question, session, env) {
         circles: (circles || []).map(({ index, ...circleProps }) => ({ ...circleProps })),
       },
       responseCorrect: env.mode === 'evaluate' ? isResponseCorrect(normalizedQuestion, session) : undefined,
+      extraCSSRules: normalizedQuestion.extraCSSRules,
     };
 
     if (env.role === 'instructor' && (env.mode === 'view' || env.mode === 'evaluate')) {

package/lib/hotspot/index.js

@@ -113,6 +113,7 @@ var HotspotComponent = /*#__PURE__*/function (_React$Component) {
           session = _this$props.session,
           _this$props$model = _this$props.model,
           disabled = _this$props$model.disabled,
+          extraCSSRules = _this$props$model.extraCSSRules,
           imageUrl = _this$props$model.imageUrl,
           prompt = _this$props$model.prompt,
           mode = _this$props$model.mode,
@@ -133,7 +134,8 @@ var HotspotComponent = /*#__PURE__*/function (_React$Component) {
       var showCorrect = this.state.showCorrect;
       var isEvaluateMode = mode === 'evaluate';
       var showCorrectAnswerToggle = isEvaluateMode && !responseCorrect;
-      return /*#__PURE__*/_react["default"].createElement("div", {
+      return /*#__PURE__*/_react["default"].createElement(_renderUi.UiLayout, {
+        extraCSSRules: extraCSSRules,
         className: classes.main
       }, teacherInstructions && (0, _renderUi.hasText)(teacherInstructions) && /*#__PURE__*/_react["default"].createElement(_renderUi.Collapsible, {
         labels: {

package/lib/hotspot/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/hotspot/index.jsx"],"names":["HotspotComponent","props","showCorrect","state","setState","observer","scale","MutationObserver","mutations","forEach","target","document","getElementById","style","cssText","zoom","substring","indexOf","lastIndexOf","zoomParsed","replace","newScale","parseFloat","observe","attributes","attributeFilter","disconnect","session","model","disabled","imageUrl","prompt","mode","multipleCorrect","shapes","outlineColor","hotspotColor","hoverOutlineColor","selectedHotspotColor","dimensions","rationale","teacherInstructions","strokeWidth","responseCorrect","language","onSelectChoice","classes","isEvaluateMode","showCorrectAnswerToggle","main","hidden","visible","collapsible","onToggle","bind","React","Component","propTypes","PropTypes","object","isRequired","func","defaultProps","styles","theme","color","text","backgroundColor","background","marginBottom","spacing","unit","fontSize"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { CorrectAnswerToggle } from '@pie-lib/pie-toolbox/correct-answer-toggle';\nimport { color, Collapsible, hasText, PreviewPrompt } from '@pie-lib/pie-toolbox/render-ui';\nimport { withStyles } from '@material-ui/core/styles';\n\nimport Container from './container';\n\nclass HotspotComponent extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      showCorrect: false,\n      observer: null,\n      scale: 1,\n    };\n  }\n\n  componentDidMount() {\n    this.observer = new MutationObserver((mutations) => {\n      mutations.forEach(() => {\n        const target = document.getElementById('question-container')?.style?.cssText;\n        const zoom = target?.substring(target.indexOf('--pie-zoom') + 11, target.lastIndexOf('%'));\n        const zoomParsed = zoom?.replace(/\\s/g, '');\n\n        if (zoomParsed) {\n          const newScale = parseFloat(zoomParsed) / 100;\n\n          if (newScale !== this.state.scale) {\n            this.setState({\n              scale: parseFloat(zoomParsed) / 100,\n            });\n          }\n        } else if (!zoomParsed && this.state.scale !== 1) {\n          this.setState({\n            scale: 1,\n          });\n        }\n      });\n    });\n\n    const target = document.getElementById('question-container');\n\n    if (target) {\n      this.observer.observe(target, { attributes: true, attributeFilter: ['style'] });\n    }\n  }\n\n  componentWillUnmount() {\n    this.observer?.disconnect();\n  }\n\n  onToggle = () => {\n    const { showCorrect } = this.state;\n    this.setState({ showCorrect: !showCorrect });\n  };\n\n  render() {\n    const {\n      session,\n      model: {\n        disabled,\n        imageUrl,\n        prompt,\n        mode,\n        multipleCorrect,\n        shapes,\n        outlineColor,\n        hotspotColor,\n        hoverOutlineColor,\n        selectedHotspotColor,\n        dimensions,\n        rationale,\n        teacherInstructions,\n        strokeWidth,\n        responseCorrect,\n        language,\n      },\n      onSelectChoice,\n      classes,\n    } = this.props;\n    const { showCorrect } = this.state;\n    const isEvaluateMode = mode === 'evaluate';\n    const showCorrectAnswerToggle = isEvaluateMode && !responseCorrect;\n\n    return (\n      <div className={classes.main}>\n        {teacherInstructions && hasText(teacherInstructions) && (\n          <Collapsible\n            labels={{ hidden: 'Show Teacher Instructions', visible: 'Hide Teacher Instructions' }}\n            className={classes.collapsible}\n          >\n            <PreviewPrompt className=\"prompt\" prompt={teacherInstructions} />\n          </Collapsible>\n        )}\n\n        {prompt && <PreviewPrompt className=\"prompt\" prompt={prompt} />}\n\n        {showCorrectAnswerToggle && (\n          <CorrectAnswerToggle\n            show={showCorrectAnswerToggle}\n            toggled={showCorrect}\n            onToggle={this.onToggle.bind(this)}\n            language={language}\n          />\n        )}\n\n        {imageUrl ? (\n          <Container\n            isEvaluateMode={isEvaluateMode}\n            session={session}\n            dimensions={dimensions}\n            imageUrl={imageUrl}\n            hotspotColor={hotspotColor}\n            hoverOutlineColor={hoverOutlineColor}\n            selectedHotspotColor={selectedHotspotColor}\n            multipleCorrect={multipleCorrect}\n            outlineColor={outlineColor}\n            onSelectChoice={onSelectChoice}\n            shapes={shapes}\n            disabled={disabled}\n            strokeWidth={strokeWidth}\n            scale={this.state.scale}\n            showCorrect={showCorrect}\n          />\n        ) : null}\n\n        {rationale && hasText(rationale) && (\n          <Collapsible labels={{ hidden: 'Show Rationale', visible: 'Hide Rationale' }}>\n            <PreviewPrompt className=\"prompt\" prompt={rationale} />\n          </Collapsible>\n        )}\n      </div>\n    );\n  }\n}\n\nHotspotComponent.propTypes = {\n  classes: PropTypes.object,\n  model: PropTypes.object.isRequired,\n  onSelectChoice: PropTypes.func.isRequired,\n  session: PropTypes.object.isRequired,\n};\n\nHotspotComponent.defaultProps = {\n  classes: {},\n};\n\nconst styles = (theme) => ({\n  main: {\n    color: color.text(),\n    backgroundColor: color.background(),\n  },\n  collapsible: {\n    marginBottom: theme.spacing.unit * 2,\n  },\n  prompt: {\n    fontSize: 'inherit',\n  },\n});\n\nexport default withStyles(styles)(HotspotComponent);\n"],"file":"index.js"}
+{"version":3,"sources":["../../src/hotspot/index.jsx"],"names":["HotspotComponent","props","showCorrect","state","setState","observer","scale","MutationObserver","mutations","forEach","target","document","getElementById","style","cssText","zoom","substring","indexOf","lastIndexOf","zoomParsed","replace","newScale","parseFloat","observe","attributes","attributeFilter","disconnect","session","model","disabled","extraCSSRules","imageUrl","prompt","mode","multipleCorrect","shapes","outlineColor","hotspotColor","hoverOutlineColor","selectedHotspotColor","dimensions","rationale","teacherInstructions","strokeWidth","responseCorrect","language","onSelectChoice","classes","isEvaluateMode","showCorrectAnswerToggle","main","hidden","visible","collapsible","onToggle","bind","React","Component","propTypes","PropTypes","object","isRequired","func","defaultProps","styles","theme","color","text","backgroundColor","background","marginBottom","spacing","unit","fontSize"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { CorrectAnswerToggle } from '@pie-lib/pie-toolbox/correct-answer-toggle';\nimport { color, Collapsible, hasText, PreviewPrompt, UiLayout } from '@pie-lib/pie-toolbox/render-ui';\nimport { withStyles } from '@material-ui/core/styles';\n\nimport Container from './container';\n\nclass HotspotComponent extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      showCorrect: false,\n      observer: null,\n      scale: 1,\n    };\n  }\n\n  componentDidMount() {\n    this.observer = new MutationObserver((mutations) => {\n      mutations.forEach(() => {\n        const target = document.getElementById('question-container')?.style?.cssText;\n        const zoom = target?.substring(target.indexOf('--pie-zoom') + 11, target.lastIndexOf('%'));\n        const zoomParsed = zoom?.replace(/\\s/g, '');\n\n        if (zoomParsed) {\n          const newScale = parseFloat(zoomParsed) / 100;\n\n          if (newScale !== this.state.scale) {\n            this.setState({\n              scale: parseFloat(zoomParsed) / 100,\n            });\n          }\n        } else if (!zoomParsed && this.state.scale !== 1) {\n          this.setState({\n            scale: 1,\n          });\n        }\n      });\n    });\n\n    const target = document.getElementById('question-container');\n\n    if (target) {\n      this.observer.observe(target, { attributes: true, attributeFilter: ['style'] });\n    }\n  }\n\n  componentWillUnmount() {\n    this.observer?.disconnect();\n  }\n\n  onToggle = () => {\n    const { showCorrect } = this.state;\n    this.setState({ showCorrect: !showCorrect });\n  };\n\n  render() {\n    const {\n      session,\n      model: {\n        disabled,\n        extraCSSRules,\n        imageUrl,\n        prompt,\n        mode,\n        multipleCorrect,\n        shapes,\n        outlineColor,\n        hotspotColor,\n        hoverOutlineColor,\n        selectedHotspotColor,\n        dimensions,\n        rationale,\n        teacherInstructions,\n        strokeWidth,\n        responseCorrect,\n        language,\n      },\n      onSelectChoice,\n      classes,\n    } = this.props;\n    const { showCorrect } = this.state;\n    const isEvaluateMode = mode === 'evaluate';\n    const showCorrectAnswerToggle = isEvaluateMode && !responseCorrect;\n\n    return (\n      <UiLayout extraCSSRules={extraCSSRules} className={classes.main}>\n        {teacherInstructions && hasText(teacherInstructions) && (\n          <Collapsible\n            labels={{ hidden: 'Show Teacher Instructions', visible: 'Hide Teacher Instructions' }}\n            className={classes.collapsible}\n          >\n            <PreviewPrompt className=\"prompt\" prompt={teacherInstructions} />\n          </Collapsible>\n        )}\n\n        {prompt && <PreviewPrompt className=\"prompt\" prompt={prompt} />}\n\n        {showCorrectAnswerToggle && (\n          <CorrectAnswerToggle\n            show={showCorrectAnswerToggle}\n            toggled={showCorrect}\n            onToggle={this.onToggle.bind(this)}\n            language={language}\n          />\n        )}\n\n        {imageUrl ? (\n          <Container\n            isEvaluateMode={isEvaluateMode}\n            session={session}\n            dimensions={dimensions}\n            imageUrl={imageUrl}\n            hotspotColor={hotspotColor}\n            hoverOutlineColor={hoverOutlineColor}\n            selectedHotspotColor={selectedHotspotColor}\n            multipleCorrect={multipleCorrect}\n            outlineColor={outlineColor}\n            onSelectChoice={onSelectChoice}\n            shapes={shapes}\n            disabled={disabled}\n            strokeWidth={strokeWidth}\n            scale={this.state.scale}\n            showCorrect={showCorrect}\n          />\n        ) : null}\n\n        {rationale && hasText(rationale) && (\n          <Collapsible labels={{ hidden: 'Show Rationale', visible: 'Hide Rationale' }}>\n            <PreviewPrompt className=\"prompt\" prompt={rationale} />\n          </Collapsible>\n        )}\n      </UiLayout>\n    );\n  }\n}\n\nHotspotComponent.propTypes = {\n  classes: PropTypes.object,\n  model: PropTypes.object.isRequired,\n  onSelectChoice: PropTypes.func.isRequired,\n  session: PropTypes.object.isRequired,\n};\n\nHotspotComponent.defaultProps = {\n  classes: {},\n};\n\nconst styles = (theme) => ({\n  main: {\n    color: color.text(),\n    backgroundColor: color.background(),\n  },\n  collapsible: {\n    marginBottom: theme.spacing.unit * 2,\n  },\n  prompt: {\n    fontSize: 'inherit',\n  },\n});\n\nexport default withStyles(styles)(HotspotComponent);\n"],"file":"index.js"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-element/hotspot",
-  "version": "7.1.5-next.3+59535a35f",
+  "version": "7.2.0",
   "description": "",
   "repository": "pie-framework/pie-elements",
   "publishConfig": {
@@ -9,7 +9,7 @@
   "dependencies": {
     "@material-ui/core": "^3.9.3",
     "@pie-framework/pie-player-events": "^0.1.0",
-    "@pie-lib/pie-toolbox": "2.0.15",
+    "@pie-lib/pie-toolbox": "2.1.0",
     "konva": "^3.2.5",
     "prop-types": "^15.6.1",
     "react": "^16.8.1",
@@ -18,7 +18,7 @@
   },
   "author": "pie framework developers",
   "license": "ISC",
-  "gitHead": "59535a35fed818c74f3d6d6cc41b352c1ed939eb",
+  "gitHead": "0ceacdb80b0be7b4cae60b1eff7974170b088358",
   "scripts": {
     "postpublish": "../../scripts/postpublish"
   },

package/src/hotspot/index.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { CorrectAnswerToggle } from '@pie-lib/pie-toolbox/correct-answer-toggle';
-import { color, Collapsible, hasText, PreviewPrompt } from '@pie-lib/pie-toolbox/render-ui';
+import { color, Collapsible, hasText, PreviewPrompt, UiLayout } from '@pie-lib/pie-toolbox/render-ui';
 import { withStyles } from '@material-ui/core/styles';
 
 import Container from './container';
@@ -60,6 +60,7 @@ class HotspotComponent extends React.Component {
       session,
       model: {
         disabled,
+        extraCSSRules,
         imageUrl,
         prompt,
         mode,
@@ -84,7 +85,7 @@ class HotspotComponent extends React.Component {
     const showCorrectAnswerToggle = isEvaluateMode && !responseCorrect;
 
     return (
-      <div className={classes.main}>
+      <UiLayout extraCSSRules={extraCSSRules} className={classes.main}>
         {teacherInstructions && hasText(teacherInstructions) && (
           <Collapsible
             labels={{ hidden: 'Show Teacher Instructions', visible: 'Hide Teacher Instructions' }}
@@ -130,7 +131,7 @@ class HotspotComponent extends React.Component {
             <PreviewPrompt className="prompt" prompt={rationale} />
           </Collapsible>
         )}
-      </div>
+      </UiLayout>
     );
   }
 }