@pie-element/hotspot 11.1.1-next.0 → 11.1.1-next.101

package/configure/lib/root.js

@@ -0,0 +1,331 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Root = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _configUi = require("@pie-lib/config-ui");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _editableHtmlTipTap = _interopRequireDefault(require("@pie-lib/editable-html-tip-tap"));
+var _styles = require("@mui/material/styles");
+var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
+var _Info = _interopRequireDefault(require("@mui/icons-material/Info"));
+var _Tooltip = _interopRequireDefault(require("@mui/material/Tooltip"));
+var _hotspotPalette = _interopRequireDefault(require("./hotspot-palette"));
+var _hotspotContainer = _interopRequireDefault(require("./hotspot-container"));
+var _utils = require("./utils");
+const {
+  Panel,
+  toggle,
+  dropdown
+} = _configUi.settings;
+const checkNullish = value => value !== null && value !== undefined;
+const DimensionsContainer = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  display: 'flex',
+  marginBottom: theme.spacing(1.5)
+}));
+const FieldContainer = (0, _styles.styled)('div')({
+  flex: 1,
+  width: '90%'
+});
+const PromptContainer = (0, _styles.styled)(_configUi.InputContainer)(({
+  theme
+}) => ({
+  paddingTop: theme.spacing(1),
+  marginTop: theme.spacing(2),
+  marginBottom: theme.spacing(2),
+  width: '100%'
+}));
+const SubHeading = (0, _styles.styled)(_Typography.default)(({
+  theme
+}) => ({
+  marginRight: theme.spacing(1)
+}));
+const FlexContainer = (0, _styles.styled)('div')({
+  display: 'flex',
+  alignItems: 'center'
+});
+const StyledTooltip = (0, _styles.styled)(_Tooltip.default)(({
+  theme
+}) => ({
+  '& .MuiTooltip-tooltip': {
+    fontSize: theme.typography.fontSize - 2,
+    whiteSpace: 'pre',
+    maxWidth: '500px'
+  }
+}));
+const ErrorText = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  fontSize: theme.typography.fontSize - 2,
+  color: theme.palette.error.main,
+  paddingTop: theme.spacing(1)
+}));
+class Root extends _react.default.Component {
+  constructor(...args) {
+    super(...args);
+    (0, _defineProperty2.default)(this, "handleColorChange", (fieldType, color) => {
+      const {
+        onColorChanged
+      } = this.props;
+      const cType = `${fieldType}Color`;
+      onColorChanged(cType, color);
+    });
+    (0, _defineProperty2.default)(this, "handleOnUpdateImageDimensions", (value, resizeType) => {
+      const {
+        model: {
+          dimensions,
+          shapes
+        },
+        configuration: {
+          preserveAspectRatio = {}
+        },
+        onUpdateImageDimension,
+        onUpdateShapes
+      } = this.props;
+      const nextImageDimensions = {
+        ...dimensions,
+        [resizeType]: value
+      };
+
+      // if preserveAspectRatio.enabled, updateImageDimensions function makes sure aspect ratio is kept
+      const updatedDimensions = (0, _utils.updateImageDimensions)(dimensions, nextImageDimensions, preserveAspectRatio.enabled, resizeType);
+      // transform shapes map into shapes array
+      const shapesArray = (0, _utils.getAllShapes)(shapes);
+      // transform all the shapes to fit the re-sized image
+      const updatedShapes = (0, _utils.getUpdatedShapes)(dimensions, updatedDimensions, shapesArray);
+      // transform shapes array back into shapes map
+
+      onUpdateShapes((0, _utils.groupShapes)(updatedShapes));
+      onUpdateImageDimension(updatedDimensions);
+    });
+  }
+  render() {
+    const {
+      configuration,
+      model,
+      imageSupport,
+      uploadSoundSupport,
+      onConfigurationChanged,
+      onImageUpload,
+      onModelChangedByConfig,
+      onPromptChanged,
+      onRationaleChanged,
+      onUpdateImageDimension,
+      onTeacherInstructionsChanged,
+      onUpdateShapes
+    } = this.props;
+    const {
+      baseInputConfiguration = {},
+      contentDimensions = {},
+      maxImageWidth = {},
+      maxImageHeight = {},
+      multipleCorrect = {},
+      partialScoring = {},
+      preserveAspectRatio = {},
+      prompt = {},
+      rationale = {},
+      settingsPanelDisabled,
+      spellCheck = {},
+      teacherInstructions = {},
+      withRubric = {},
+      mathMlOptions = {},
+      language = {},
+      languageChoices = {}
+    } = configuration || {};
+    const {
+      errors,
+      extraCSSRules,
+      promptEnabled,
+      rationaleEnabled,
+      spellCheckEnabled,
+      teacherInstructionsEnabled,
+      toolbarEditorPosition
+    } = model || {};
+    const {
+      prompt: promptError,
+      rationale: rationaleError,
+      shapes: shapesError,
+      selections: selectionsError,
+      teacherInstructions: teacherInstructionsError
+    } = errors || {};
+    const validationMessage = (0, _utils.generateValidationMessage)(configuration);
+    const defaultImageMaxWidth = maxImageWidth && maxImageWidth.prompt;
+    const defaultImageMaxHeight = maxImageHeight && maxImageHeight.prompt;
+    const toolbarOpts = {
+      position: toolbarEditorPosition === 'top' ? 'top' : 'bottom'
+    };
+    const panelSettings = {
+      multipleCorrect: multipleCorrect.settings && toggle(multipleCorrect.label),
+      partialScoring: partialScoring.settings && toggle(partialScoring.label),
+      promptEnabled: prompt.settings && toggle(prompt.label),
+      'language.enabled': language.settings && toggle(language.label, true),
+      language: language.settings && language.enabled && dropdown(languageChoices.label, languageChoices.options)
+    };
+    const panelProperties = {
+      teacherInstructionsEnabled: teacherInstructions.settings && toggle(teacherInstructions.label),
+      rationaleEnabled: rationale.settings && toggle(rationale.label),
+      spellCheckEnabled: spellCheck.settings && toggle(spellCheck.label),
+      rubricEnabled: withRubric?.settings && toggle(withRubric?.label)
+    };
+    const getPluginProps = (props = {}) => ({
+      ...baseInputConfiguration,
+      ...props
+    });
+    return /*#__PURE__*/_react.default.createElement(_configUi.layout.ConfigLayout, {
+      extraCSSRules: extraCSSRules,
+      dimensions: contentDimensions,
+      hideSettings: settingsPanelDisabled,
+      settings: /*#__PURE__*/_react.default.createElement(Panel, {
+        model: model,
+        onChangeModel: onModelChangedByConfig,
+        configuration: configuration,
+        onChangeConfiguration: onConfigurationChanged,
+        groups: {
+          Settings: panelSettings,
+          Properties: panelProperties
+        }
+      })
+    }, teacherInstructionsEnabled && /*#__PURE__*/_react.default.createElement(PromptContainer, {
+      label: teacherInstructions.label
+    }, /*#__PURE__*/_react.default.createElement(_editableHtmlTipTap.default, {
+      markup: model.teacherInstructions || '',
+      onChange: onTeacherInstructionsChanged,
+      imageSupport: imageSupport,
+      nonEmpty: false,
+      error: teacherInstructionsError,
+      toolbarOpts: toolbarOpts,
+      pluginProps: getPluginProps(teacherInstructions?.inputConfiguration),
+      spellCheck: spellCheckEnabled,
+      maxImageWidth: maxImageWidth && maxImageWidth.teacherInstructions || defaultImageMaxWidth,
+      maxImageHeight: maxImageHeight && maxImageHeight.teacherInstructions || defaultImageMaxHeight,
+      uploadSoundSupport: uploadSoundSupport,
+      languageCharactersProps: [{
+        language: 'spanish'
+      }, {
+        language: 'special'
+      }],
+      mathMlOptions: mathMlOptions
+    }), teacherInstructionsError && /*#__PURE__*/_react.default.createElement(ErrorText, null, teacherInstructionsError)), promptEnabled && /*#__PURE__*/_react.default.createElement(PromptContainer, {
+      label: prompt.label
+    }, /*#__PURE__*/_react.default.createElement(_editableHtmlTipTap.default, {
+      markup: model.prompt || '',
+      onChange: onPromptChanged,
+      imageSupport: imageSupport,
+      nonEmpty: false,
+      error: promptError,
+      toolbarOpts: toolbarOpts,
+      pluginProps: getPluginProps(prompt?.inputConfiguration),
+      spellCheck: spellCheckEnabled,
+      maxImageWidth: defaultImageMaxWidth,
+      maxImageHeight: defaultImageMaxHeight,
+      uploadSoundSupport: uploadSoundSupport,
+      languageCharactersProps: [{
+        language: 'spanish'
+      }, {
+        language: 'special'
+      }],
+      mathMlOptions: mathMlOptions
+    }), promptError && /*#__PURE__*/_react.default.createElement(ErrorText, null, promptError)), /*#__PURE__*/_react.default.createElement(FlexContainer, null, /*#__PURE__*/_react.default.createElement(SubHeading, {
+      variant: "h6"
+    }, "Define Hotspot"), /*#__PURE__*/_react.default.createElement(StyledTooltip, {
+      disableFocusListener: true,
+      disableTouchListener: true,
+      placement: 'left',
+      title: validationMessage
+    }, /*#__PURE__*/_react.default.createElement(_Info.default, {
+      fontSize: 'small',
+      color: 'primary',
+      style: {
+        float: 'right'
+      }
+    }))), /*#__PURE__*/_react.default.createElement(_hotspotPalette.default, {
+      hotspotColor: model.hotspotColor,
+      hotspotList: model.hotspotList,
+      outlineColor: model.outlineColor,
+      outlineList: model.outlineList,
+      onHotspotColorChange: color => this.handleColorChange('hotspot', color),
+      onOutlineColorChange: color => this.handleColorChange('outline', color)
+    }), /*#__PURE__*/_react.default.createElement(_hotspotContainer.default, {
+      dimensions: model.dimensions,
+      imageUrl: model.imageUrl,
+      multipleCorrect: model.multipleCorrect,
+      hasErrors: !!shapesError || !!selectionsError,
+      hotspotColor: model.hotspotColor,
+      outlineColor: model.outlineColor,
+      selectedHotspotColor: model.selectedHotspotColor,
+      hoverOutlineColor: checkNullish(model.hoverOutlineColor) ? model.hoverOutlineColor : 'black',
+      onUpdateImageDimension: onUpdateImageDimension,
+      onUpdateShapes: onUpdateShapes,
+      onImageUpload: onImageUpload,
+      shapes: model.shapes,
+      strokeWidth: model.strokeWidth,
+      preserveAspectRatioEnabled: preserveAspectRatio.enabled,
+      insertImage: imageSupport && imageSupport.add
+    }), shapesError && /*#__PURE__*/_react.default.createElement(ErrorText, null, shapesError), selectionsError && /*#__PURE__*/_react.default.createElement(ErrorText, null, selectionsError), model.imageUrl && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+      variant: "h6"
+    }, "Image Dimensions"), /*#__PURE__*/_react.default.createElement(DimensionsContainer, null, /*#__PURE__*/_react.default.createElement(FieldContainer, null, /*#__PURE__*/_react.default.createElement(_configUi.NumberTextField, {
+      key: "hotspot-manual-width",
+      label: "Width",
+      value: model.dimensions.width,
+      min: 0,
+      onChange: (e, value) => this.handleOnUpdateImageDimensions(value, 'width'),
+      showErrorWhenOutsideRange: true
+    })), /*#__PURE__*/_react.default.createElement(FieldContainer, null, /*#__PURE__*/_react.default.createElement(_configUi.NumberTextField, {
+      key: "hotspot-manual-height",
+      label: "Height",
+      value: model.dimensions.height,
+      min: 0,
+      onChange: (e, value) => this.handleOnUpdateImageDimensions(value, 'height'),
+      showErrorWhenOutsideRange: true
+    })))), rationaleEnabled && /*#__PURE__*/_react.default.createElement(PromptContainer, {
+      label: rationale.label
+    }, /*#__PURE__*/_react.default.createElement(_editableHtmlTipTap.default, {
+      markup: model.rationale || '',
+      onChange: onRationaleChanged,
+      imageSupport: imageSupport,
+      error: rationaleError,
+      toolbarOpts: toolbarOpts,
+      pluginProps: getPluginProps(rationale?.inputConfiguration),
+      spellCheck: spellCheckEnabled,
+      maxImageWidth: maxImageWidth && maxImageWidth.rationale || defaultImageMaxWidth,
+      maxImageHeight: maxImageHeight && maxImageHeight.rationale || defaultImageMaxHeight,
+      uploadSoundSupport: uploadSoundSupport,
+      languageCharactersProps: [{
+        language: 'spanish'
+      }, {
+        language: 'special'
+      }],
+      mathMlOptions: mathMlOptions
+    }), rationaleError && /*#__PURE__*/_react.default.createElement(ErrorText, null, rationaleError)));
+  }
+}
+exports.Root = Root;
+Root.propTypes = {
+  configuration: _propTypes.default.object,
+  model: _propTypes.default.object.isRequired,
+  imageSupport: _propTypes.default.shape({
+    add: _propTypes.default.func,
+    delete: _propTypes.default.func
+  }),
+  uploadSoundSupport: _propTypes.default.shape({
+    add: _propTypes.default.func,
+    delete: _propTypes.default.func
+  }),
+  onImageUpload: _propTypes.default.func.isRequired,
+  onColorChanged: _propTypes.default.func.isRequired,
+  onPromptChanged: _propTypes.default.func.isRequired,
+  onUpdateImageDimension: _propTypes.default.func.isRequired,
+  onUpdateShapes: _propTypes.default.func.isRequired,
+  onModelChangedByConfig: _propTypes.default.func.isRequired,
+  onRationaleChanged: _propTypes.default.func.isRequired,
+  onConfigurationChanged: _propTypes.default.func.isRequired,
+  onTeacherInstructionsChanged: _propTypes.default.func.isRequired
+};
+var _default = exports.default = Root;
+//# sourceMappingURL=root.js.map

package/configure/lib/root.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"root.js","names":["_react","_interopRequireDefault","require","_configUi","_propTypes","_editableHtmlTipTap","_styles","_Typography","_Info","_Tooltip","_hotspotPalette","_hotspotContainer","_utils","Panel","toggle","dropdown","settings","checkNullish","value","undefined","DimensionsContainer","styled","theme","display","marginBottom","spacing","FieldContainer","flex","width","PromptContainer","InputContainer","paddingTop","marginTop","SubHeading","Typography","marginRight","FlexContainer","alignItems","StyledTooltip","Tooltip","fontSize","typography","whiteSpace","maxWidth","ErrorText","color","palette","error","main","Root","React","Component","constructor","args","_defineProperty2","default","fieldType","onColorChanged","props","cType","resizeType","model","dimensions","shapes","configuration","preserveAspectRatio","onUpdateImageDimension","onUpdateShapes","nextImageDimensions","updatedDimensions","updateImageDimensions","enabled","shapesArray","getAllShapes","updatedShapes","getUpdatedShapes","groupShapes","render","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","selections","selectionsError","teacherInstructionsError","validationMessage","generateValidationMessage","defaultImageMaxWidth","defaultImageMaxHeight","toolbarOpts","position","panelSettings","label","options","panelProperties","rubricEnabled","getPluginProps","createElement","layout","ConfigLayout","hideSettings","onChangeModel","onChangeConfiguration","groups","Settings","Properties","markup","onChange","nonEmpty","pluginProps","inputConfiguration","languageCharactersProps","variant","disableFocusListener","disableTouchListener","placement","title","style","float","hotspotColor","hotspotList","outlineColor","outlineList","onHotspotColorChange","handleColorChange","onOutlineColorChange","imageUrl","hasErrors","selectedHotspotColor","hoverOutlineColor","strokeWidth","preserveAspectRatioEnabled","insertImage","add","Fragment","NumberTextField","key","min","e","handleOnUpdateImageDimensions","showErrorWhenOutsideRange","height","exports","propTypes","PropTypes","object","isRequired","shape","func","delete","_default"],"sources":["../src/root.jsx"],"sourcesContent":["import React from 'react';\nimport { settings, layout, InputContainer, NumberTextField } from '@pie-lib/config-ui';\nimport PropTypes from 'prop-types';\nimport EditableHtml from '@pie-lib/editable-html-tip-tap';\nimport { styled } from '@mui/material/styles';\nimport Typography from '@mui/material/Typography';\nimport Info from '@mui/icons-material/Info';\nimport Tooltip from '@mui/material/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\nconst checkNullish = (value) => value !== null && value !== undefined;\n\nconst DimensionsContainer = styled('div')(({ theme }) => ({\n  display: 'flex',\n  marginBottom: theme.spacing(1.5),\n}));\n\nconst FieldContainer = styled('div')({\n  flex: 1,\n  width: '90%',\n});\n\nconst PromptContainer = styled(InputContainer)(({ theme }) => ({\n  paddingTop: theme.spacing(1),\n  marginTop: theme.spacing(2),\n  marginBottom: theme.spacing(2),\n  width: '100%',\n}));\n\nconst SubHeading = styled(Typography)(({ theme }) => ({\n  marginRight: theme.spacing(1),\n}));\n\nconst FlexContainer = styled('div')({\n  display: 'flex',\n  alignItems: 'center',\n});\n\nconst StyledTooltip = styled(Tooltip)(({ theme }) => ({\n  '& .MuiTooltip-tooltip': {\n    fontSize: theme.typography.fontSize - 2,\n    whiteSpace: 'pre',\n    maxWidth: '500px',\n  },\n}));\n\nconst ErrorText = styled('div')(({ theme }) => ({\n  fontSize: theme.typography.fontSize - 2,\n  color: theme.palette.error.main,\n  paddingTop: theme.spacing(1),\n}));\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      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\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          <PromptContainer label={teacherInstructions.label}>\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 && <ErrorText>{teacherInstructionsError}</ErrorText>}\n          </PromptContainer>\n        )}\n\n        {promptEnabled && (\n          <PromptContainer label={prompt.label}>\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 && <ErrorText>{promptError}</ErrorText>}\n          </PromptContainer>\n        )}\n\n        <FlexContainer>\n          <SubHeading variant=\"h6\">Define Hotspot</SubHeading>\n          <StyledTooltip disableFocusListener disableTouchListener placement={'left'} title={validationMessage}>\n            <Info fontSize={'small'} color={'primary'} style={{ float: 'right' }} />\n          </StyledTooltip>\n        </FlexContainer>\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={checkNullish(model.hoverOutlineColor) ? model.hoverOutlineColor : 'black'}\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 && <ErrorText>{shapesError}</ErrorText>}\n        {selectionsError && <ErrorText>{selectionsError}</ErrorText>}\n\n        {model.imageUrl && (\n          <React.Fragment>\n            <Typography variant=\"h6\">Image Dimensions</Typography>\n\n            <DimensionsContainer>\n              <FieldContainer>\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                />\n              </FieldContainer>\n\n              <FieldContainer>\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                />\n              </FieldContainer>\n            </DimensionsContainer>\n          </React.Fragment>\n        )}\n\n        {rationaleEnabled && (\n          <PromptContainer label={rationale.label}>\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 && <ErrorText>{rationaleError}</ErrorText>}\n          </PromptContainer>\n        )}\n      </layout.ConfigLayout>\n    );\n  }\n}\n\nRoot.propTypes = {\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 Root;\n"],"mappings":"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","ignoreList":[]}

package/configure/lib/shapes/circle.js

@@ -0,0 +1,84 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CircleShape = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+class CircleShape {
+  static create(shapes, e) {
+    const newShapes = [...shapes];
+    const highestId = Math.max(...newShapes.map(shape => parseInt(shape.id)), 0);
+    const newCircle = {
+      id: `${highestId + 1}`,
+      radius: 0,
+      x: e.evt.layerX,
+      y: e.evt.layerY,
+      group: 'circles',
+      index: newShapes.length
+    };
+    newShapes.push(newCircle);
+    return {
+      shapes: newShapes,
+      isDrawing: true,
+      isDrawingShapeId: newCircle.id
+    };
+  }
+  static finalizeCreation(state, props) {
+    const currentShapeIndex = state.shapes.findIndex(shape => shape.id === state.isDrawingShapeId);
+    if (currentShapeIndex !== -1) {
+      const currentShape = state.shapes[currentShapeIndex];
+
+      // Check if the shape is a valid circle (has more than 0 radius) before finalizing
+      if (currentShape.radius > 0) {
+        return {
+          ...state,
+          isDrawing: false,
+          stateShapes: false,
+          isDrawingShapeId: undefined
+        };
+      } else {
+        return {
+          ...state,
+          isDrawing: false,
+          stateShapes: false,
+          isDrawingShapeId: undefined,
+          shapes: state.shapes.filter(shape => shape.id !== state.isDrawingShapeId)
+        };
+      }
+    }
+    return {
+      ...state,
+      isDrawing: false,
+      stateShapes: false,
+      isDrawingShapeId: undefined
+    };
+  }
+  static handleMouseMove(state, e) {
+    const {
+      isDrawing,
+      isDrawingShapeId,
+      shapes
+    } = state;
+    if (isDrawing) {
+      const tempShapes = [...shapes];
+      const resizingShapeIndex = tempShapes.findIndex(shape => shape.id === isDrawingShapeId);
+      if (resizingShapeIndex !== -1) {
+        const resizingShape = tempShapes[resizingShapeIndex];
+
+        // Calculate radius based on mouse position
+        const dx = e.evt.layerX - resizingShape.x;
+        const dy = e.evt.layerY - resizingShape.y;
+        resizingShape.radius = Math.sqrt(dx * dx + dy * dy);
+        return {
+          shapes: tempShapes
+        };
+      }
+    }
+    return state;
+  }
+}
+exports.CircleShape = CircleShape;
+(0, _defineProperty2.default)(CircleShape, "name", 'circle');
+//# sourceMappingURL=circle.js.map

package/configure/lib/shapes/circle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"circle.js","names":["CircleShape","create","shapes","e","newShapes","highestId","Math","max","map","shape","parseInt","id","newCircle","radius","x","evt","layerX","y","layerY","group","index","length","push","isDrawing","isDrawingShapeId","finalizeCreation","state","props","currentShapeIndex","findIndex","currentShape","stateShapes","undefined","filter","handleMouseMove","tempShapes","resizingShapeIndex","resizingShape","dx","dy","sqrt","exports","_defineProperty2","default"],"sources":["../../src/shapes/circle.js"],"sourcesContent":["export class CircleShape {\n  static name = 'circle'\n\n  static create(shapes, e) {\n    const newShapes = [...shapes];\n    const highestId = Math.max(...newShapes.map((shape) => parseInt(shape.id)), 0);\n    const newCircle = {\n      id: `${highestId + 1}`,\n      radius: 0,\n      x: e.evt.layerX,\n      y: e.evt.layerY,\n      group: 'circles',\n      index: newShapes.length,\n    };\n\n    newShapes.push(newCircle);\n\n    return {\n      shapes: newShapes,\n      isDrawing: true,\n      isDrawingShapeId: newCircle.id,\n    };\n  }\n\n  static finalizeCreation(state, props) {\n    const currentShapeIndex = state.shapes.findIndex((shape) => shape.id === state.isDrawingShapeId);\n\n    if (currentShapeIndex !== -1) {\n      const currentShape = state.shapes[currentShapeIndex];\n\n      // Check if the shape is a valid circle (has more than 0 radius) before finalizing\n      if (currentShape.radius > 0) {\n        return {\n          ...state,\n          isDrawing: false,\n          stateShapes: false,\n          isDrawingShapeId: undefined,\n        };\n      } else {\n        return {\n          ...state,\n          isDrawing: false,\n          stateShapes: false,\n          isDrawingShapeId: undefined,\n          shapes: state.shapes.filter((shape) => shape.id !== state.isDrawingShapeId),\n        };\n      }\n    }\n\n    return {\n      ...state,\n      isDrawing: false,\n      stateShapes: false,\n      isDrawingShapeId: undefined,\n    };\n  }\n\n  static handleMouseMove(state, e) {\n    const { isDrawing, isDrawingShapeId, shapes } = state;\n\n    if (isDrawing) {\n      const tempShapes = [...shapes];\n      const resizingShapeIndex = tempShapes.findIndex((shape) => shape.id === isDrawingShapeId);\n\n      if (resizingShapeIndex !== -1) {\n        const resizingShape = tempShapes[resizingShapeIndex];\n\n        // Calculate radius based on mouse position\n        const dx = e.evt.layerX - resizingShape.x;\n        const dy = e.evt.layerY - resizingShape.y;\n        resizingShape.radius = Math.sqrt(dx * dx + dy * dy);\n\n        return {\n          shapes: tempShapes,\n        };\n      }\n    }\n\n    return state;\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/configure/lib/shapes/index.js

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _circle = require("./circle");
+Object.keys(_circle).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _circle[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _circle[key];
+    }
+  });
+});
+var _rectagle = require("./rectagle");
+Object.keys(_rectagle).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _rectagle[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _rectagle[key];
+    }
+  });
+});
+var _polygon = require("./polygon");
+Object.keys(_polygon).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _polygon[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _polygon[key];
+    }
+  });
+});
+var _utils = require("./utils");
+Object.keys(_utils).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _utils[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _utils[key];
+    }
+  });
+});
+//# sourceMappingURL=index.js.map

package/configure/lib/shapes/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["_circle","require","Object","keys","forEach","key","exports","defineProperty","enumerable","get","_rectagle","_polygon","_utils"],"sources":["../../src/shapes/index.js"],"sourcesContent":["export * from './circle';\nexport * from './rectagle';\nexport * from './polygon';\nexport * from './utils';\n"],"mappings":";;;;;AAAA,IAAAA,OAAA,GAAAC,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAH,OAAA,EAAAI,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAL,OAAA,CAAAK,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAT,OAAA,CAAAK,GAAA;IAAA;EAAA;AAAA;AACA,IAAAK,SAAA,GAAAT,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAO,SAAA,EAAAN,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAK,SAAA,CAAAL,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAC,SAAA,CAAAL,GAAA;IAAA;EAAA;AAAA;AACA,IAAAM,QAAA,GAAAV,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAQ,QAAA,EAAAP,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAM,QAAA,CAAAN,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAE,QAAA,CAAAN,GAAA;IAAA;EAAA;AAAA;AACA,IAAAO,MAAA,GAAAX,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAS,MAAA,EAAAR,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAO,MAAA,CAAAP,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAG,MAAA,CAAAP,GAAA;IAAA;EAAA;AAAA","ignoreList":[]}

package/configure/lib/shapes/polygon.js

@@ -0,0 +1,82 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PolygonShape = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+class PolygonShape {
+  static create(shapes, e) {
+    const newShapes = [...shapes];
+    const newPolygon = {
+      id: 'newPolygon',
+      points: [{
+        x: e.evt.layerX,
+        y: e.evt.layerY
+      }],
+      group: 'polygons',
+      index: newShapes.length
+    };
+    newShapes.push(newPolygon);
+    return {
+      shapes: newShapes,
+      isDrawing: true,
+      isDrawingShapeId: newPolygon.id
+    };
+  }
+  static addPoint(state, e, onPolygonComplete) {
+    // Number of pixels allowed to determine if the first point was clicked
+    const clickDelta = 5;
+    const shapesCopy = JSON.parse(JSON.stringify(state.shapes));
+    const currentShapeIndex = shapesCopy.findIndex(shape => shape.id === state.isDrawingShapeId);
+    if (currentShapeIndex !== -1) {
+      const currentShape = shapesCopy[currentShapeIndex];
+      if (currentShape.points && Array.isArray(currentShape.points)) {
+        const firstPoint = currentShape.points[0];
+
+        // If click is close enough to the first point (within clickDelta pixels), close the polygon
+        if (Math.abs(firstPoint.x - e.evt.layerX) <= clickDelta && Math.abs(firstPoint.y - e.evt.layerY) <= clickDelta) {
+          return PolygonShape.finalizeCreation(state, onPolygonComplete);
+        }
+        currentShape.points.push({
+          x: e.evt.layerX,
+          y: e.evt.layerY
+        });
+        shapesCopy[currentShapeIndex] = currentShape;
+        return {
+          shapes: shapesCopy
+        };
+      }
+    }
+    return state;
+  }
+  static finalizeCreation(state, onPolygonComplete) {
+    const {
+      shapes
+    } = state;
+    const tempShapes = [...shapes];
+    const highestId = Math.max(...state.shapes.map(shape => parseInt(shape.id) || 0), 0);
+    const polygonIndex = tempShapes.findIndex(shape => shape.id === state.isDrawingShapeId);
+    if (polygonIndex !== -1 && tempShapes[polygonIndex].points.length > 2) {
+      const completedPolygon = tempShapes[polygonIndex];
+      completedPolygon.id = `${highestId + 1}`;
+      onPolygonComplete(tempShapes);
+      return {
+        isDrawing: false,
+        shapes: tempShapes,
+        isDrawingShapeId: undefined
+      };
+    }
+    return state;
+  }
+
+  // No need to update anything on mouse move,
+  // but it's here if we need to add any logic later.
+  static handleMouseMove(state, e) {
+    return state;
+  }
+}
+exports.PolygonShape = PolygonShape;
+(0, _defineProperty2.default)(PolygonShape, "name", 'polygon');
+//# sourceMappingURL=polygon.js.map

package/configure/lib/shapes/polygon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"polygon.js","names":["PolygonShape","create","shapes","e","newShapes","newPolygon","id","points","x","evt","layerX","y","layerY","group","index","length","push","isDrawing","isDrawingShapeId","addPoint","state","onPolygonComplete","clickDelta","shapesCopy","JSON","parse","stringify","currentShapeIndex","findIndex","shape","currentShape","Array","isArray","firstPoint","Math","abs","finalizeCreation","tempShapes","highestId","max","map","parseInt","polygonIndex","completedPolygon","undefined","handleMouseMove","exports","_defineProperty2","default"],"sources":["../../src/shapes/polygon.js"],"sourcesContent":["export class PolygonShape {\n  static name = 'polygon'\n\n  static create(shapes, e) {\n    const newShapes = [...shapes];\n    const newPolygon = {\n      id: 'newPolygon',\n      points: [{ x: e.evt.layerX, y: e.evt.layerY }],\n      group: 'polygons',\n      index: newShapes.length,\n    };\n\n    newShapes.push(newPolygon);\n\n    return {\n      shapes: newShapes,\n      isDrawing: true,\n      isDrawingShapeId: newPolygon.id,\n    };\n  }\n\n  static addPoint(state, e, onPolygonComplete) {\n    // Number of pixels allowed to determine if the first point was clicked\n    const clickDelta = 5;\n\n    const shapesCopy = JSON.parse(JSON.stringify(state.shapes));\n    const currentShapeIndex = shapesCopy.findIndex((shape) => shape.id === state.isDrawingShapeId);\n\n    if (currentShapeIndex !== -1) {\n      const currentShape = shapesCopy[currentShapeIndex];\n      if (currentShape.points && Array.isArray(currentShape.points)) {\n        const firstPoint = currentShape.points[0];\n\n        // If click is close enough to the first point (within clickDelta pixels), close the polygon\n        if (\n          Math.abs(firstPoint.x - e.evt.layerX) <= clickDelta &&\n          Math.abs(firstPoint.y - e.evt.layerY) <= clickDelta\n        ) {\n          return PolygonShape.finalizeCreation(state, onPolygonComplete);\n        }\n\n        currentShape.points.push({ x: e.evt.layerX, y: e.evt.layerY });\n        shapesCopy[currentShapeIndex] = currentShape;\n\n        return {\n          shapes: shapesCopy,\n        };\n      }\n    }\n    return state;\n  }\n\n  static finalizeCreation(state, onPolygonComplete) {\n    const { shapes } = state;\n    const tempShapes = [...shapes];\n    const highestId = Math.max(...state.shapes.map((shape) => parseInt(shape.id) || 0), 0);\n\n    const polygonIndex = tempShapes.findIndex((shape) => shape.id === state.isDrawingShapeId);\n\n    if (polygonIndex !== -1 && tempShapes[polygonIndex].points.length > 2) {\n      const completedPolygon = tempShapes[polygonIndex];\n\n      completedPolygon.id = `${highestId + 1}`;\n      onPolygonComplete(tempShapes);\n\n      return {\n        isDrawing: false,\n        shapes: tempShapes,\n        isDrawingShapeId: undefined,\n      };\n    }\n\n    return state;\n  }\n\n  // No need to update anything on mouse move,\n  // but it's here if we need to add any logic later.\n  static handleMouseMove(state, e) {\n    return state;\n  }\n}\n"],"mappings":"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","ignoreList":[]}