@pie-element/drawing-response 8.1.5-next.3 → 8.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.
 
+# [8.2.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/drawing-response@8.1.4...@pie-element/drawing-response@8.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))
+
+
+
+
+
 ## [8.1.4](https://github.com/pie-framework/pie-elements/compare/@pie-element/drawing-response@8.1.3...@pie-element/drawing-response@8.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.
 
+# [8.1.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/drawing-response-configure@8.0.6...@pie-element/drawing-response-configure@8.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))
+
+
+
+
+
 ## [8.0.6](https://github.com/pie-framework/pie-elements/compare/@pie-element/drawing-response-configure@8.0.5...@pie-element/drawing-response-configure@8.0.6) (2024-10-28)
 
 

package/configure/lib/root.js

@@ -143,6 +143,7 @@ var Root = /*#__PURE__*/function (_React$Component) {
           backgroundImageEnabled = _ref2.backgroundImageEnabled,
           _ref2$errors = _ref2.errors,
           errors = _ref2$errors === void 0 ? {} : _ref2$errors,
+          extraCSSRules = _ref2.extraCSSRules,
           promptEnabled = _ref2.promptEnabled,
           spellCheckEnabled = _ref2.spellCheckEnabled,
           teacherInstructionsEnabled = _ref2.teacherInstructionsEnabled,
@@ -173,6 +174,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","prompt","props","model","onModelChanged","update","teacherInstructions","dimensions","imageDimensions","imageUrl","classes","configuration","imageSupport","onConfigurationChanged","uploadSoundSupport","baseInputConfiguration","backgroundImage","contentDimensions","maxImageWidth","maxImageHeight","settingsPanelDisabled","spellCheck","withRubric","language","languageChoices","mathMlOptions","backgroundImageEnabled","errors","promptEnabled","spellCheckEnabled","teacherInstructionsEnabled","toolbarEditorPosition","promptError","teacherInstructionsError","defaultImageMaxWidth","defaultImageMaxHeight","toolbarOpts","position","panelSettings","label","enabled","options","panelProperties","rubricEnabled","getPluginProps","Settings","Properties","promptHolder","onTeacherInstructionsChanged","inputConfiguration","errorText","onPromptChanged","onUpdateImageDimension","onImageUpload","add","React","Component","styles","theme","paddingTop","spacing","unit","marginBottom","width","fontSize","typography","color","palette","error","main","propTypes","PropTypes","object","isRequired","shape","func"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { settings, layout, InputContainer } from '@pie-lib/pie-toolbox/config-ui';\nimport PropTypes from 'prop-types';\nimport { EditableHtml } from '@pie-lib/pie-toolbox/editable-html';\nimport Typography from '@material-ui/core/Typography';\nimport { withStyles } from '@material-ui/core/styles';\n\nimport ImageContainer from './image-container';\nimport cloneDeep from 'lodash/cloneDeep';\n\nconst { Panel, toggle, dropdown } = settings;\n\nexport class Root extends React.Component {\n  onPromptChanged = (prompt) => {\n    const { model, onModelChanged } = this.props;\n    const update = cloneDeep(model);\n\n    onModelChanged({ ...update, prompt });\n  };\n\n  onTeacherInstructionsChanged = (teacherInstructions) => {\n    const { model, onModelChanged } = this.props;\n\n    onModelChanged({ ...model, teacherInstructions });\n  };\n\n  onUpdateImageDimension = (dimensions) => {\n    const { model, onModelChanged } = this.props;\n\n    onModelChanged({ ...model, imageDimensions: dimensions });\n  };\n\n  onImageUpload = (imageUrl) => {\n    const { model, onModelChanged } = this.props;\n\n    onModelChanged({ ...model, imageUrl });\n  };\n\n  render() {\n    const { classes, configuration, imageSupport, model, onConfigurationChanged, onModelChanged, uploadSoundSupport } =\n      this.props;\n    const {\n      baseInputConfiguration = {},\n      backgroundImage = {},\n      contentDimensions = {},\n      maxImageWidth = {},\n      maxImageHeight = {},\n      prompt = {},\n      settingsPanelDisabled,\n      spellCheck = {},\n      teacherInstructions = {},\n      withRubric = {},\n      language = {},\n      languageChoices = {},\n      mathMlOptions = {},\n    } = configuration || {};\n    const {\n      backgroundImageEnabled,\n      errors = {},\n      promptEnabled,\n      spellCheckEnabled,\n      teacherInstructionsEnabled,\n      toolbarEditorPosition,\n    } = model || {};\n    const { prompt: promptError, teacherInstructions: teacherInstructionsError } = errors;\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      backgroundImageEnabled: backgroundImage.settings && toggle(backgroundImage.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\n    const panelProperties = {\n      teacherInstructionsEnabled: teacherInstructions.settings && toggle(teacherInstructions.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={onModelChanged}\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.promptHolder}>\n            <EditableHtml\n              markup={model.teacherInstructions || ''}\n              onChange={this.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=\"Item Stem\" className={classes.promptHolder}>\n            <EditableHtml\n              markup={model.prompt}\n              onChange={this.onPromptChanged}\n              error={promptError}\n              toolbarOpts={toolbarOpts}\n              spellCheck={spellCheckEnabled}\n              pluginProps={getPluginProps(prompt?.inputConfiguration)}\n              imageSupport={imageSupport}\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        {backgroundImageEnabled && (\n          <React.Fragment>\n            <Typography variant=\"subheading\">Define Background Image</Typography>\n\n            <ImageContainer\n              imageUrl={model.imageUrl}\n              onUpdateImageDimension={this.onUpdateImageDimension}\n              onImageUpload={this.onImageUpload}\n              imageDimensions={model.imageDimensions}\n              insertImage={imageSupport && imageSupport.add}\n            />\n          </React.Fragment>\n        )}\n      </layout.ConfigLayout>\n    );\n  }\n}\n\nconst styles = (theme) => ({\n  promptHolder: {\n    paddingTop: theme.spacing.unit * 2,\n    marginBottom: theme.spacing.unit * 2,\n    width: '100%',\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  onModelChanged: PropTypes.func.isRequired,\n  onConfigurationChanged: 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","prompt","props","model","onModelChanged","update","teacherInstructions","dimensions","imageDimensions","imageUrl","classes","configuration","imageSupport","onConfigurationChanged","uploadSoundSupport","baseInputConfiguration","backgroundImage","contentDimensions","maxImageWidth","maxImageHeight","settingsPanelDisabled","spellCheck","withRubric","language","languageChoices","mathMlOptions","backgroundImageEnabled","errors","extraCSSRules","promptEnabled","spellCheckEnabled","teacherInstructionsEnabled","toolbarEditorPosition","promptError","teacherInstructionsError","defaultImageMaxWidth","defaultImageMaxHeight","toolbarOpts","position","panelSettings","label","enabled","options","panelProperties","rubricEnabled","getPluginProps","Settings","Properties","promptHolder","onTeacherInstructionsChanged","inputConfiguration","errorText","onPromptChanged","onUpdateImageDimension","onImageUpload","add","React","Component","styles","theme","paddingTop","spacing","unit","marginBottom","width","fontSize","typography","color","palette","error","main","propTypes","PropTypes","object","isRequired","shape","func"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { settings, layout, InputContainer } from '@pie-lib/pie-toolbox/config-ui';\nimport PropTypes from 'prop-types';\nimport { EditableHtml } from '@pie-lib/pie-toolbox/editable-html';\nimport Typography from '@material-ui/core/Typography';\nimport { withStyles } from '@material-ui/core/styles';\n\nimport ImageContainer from './image-container';\nimport cloneDeep from 'lodash/cloneDeep';\n\nconst { Panel, toggle, dropdown } = settings;\n\nexport class Root extends React.Component {\n  onPromptChanged = (prompt) => {\n    const { model, onModelChanged } = this.props;\n    const update = cloneDeep(model);\n\n    onModelChanged({ ...update, prompt });\n  };\n\n  onTeacherInstructionsChanged = (teacherInstructions) => {\n    const { model, onModelChanged } = this.props;\n\n    onModelChanged({ ...model, teacherInstructions });\n  };\n\n  onUpdateImageDimension = (dimensions) => {\n    const { model, onModelChanged } = this.props;\n\n    onModelChanged({ ...model, imageDimensions: dimensions });\n  };\n\n  onImageUpload = (imageUrl) => {\n    const { model, onModelChanged } = this.props;\n\n    onModelChanged({ ...model, imageUrl });\n  };\n\n  render() {\n    const { classes, configuration, imageSupport, model, onConfigurationChanged, onModelChanged, uploadSoundSupport } =\n      this.props;\n    const {\n      baseInputConfiguration = {},\n      backgroundImage = {},\n      contentDimensions = {},\n      maxImageWidth = {},\n      maxImageHeight = {},\n      prompt = {},\n      settingsPanelDisabled,\n      spellCheck = {},\n      teacherInstructions = {},\n      withRubric = {},\n      language = {},\n      languageChoices = {},\n      mathMlOptions = {},\n    } = configuration || {};\n    const {\n      backgroundImageEnabled,\n      errors = {},\n      extraCSSRules,\n      promptEnabled,\n      spellCheckEnabled,\n      teacherInstructionsEnabled,\n      toolbarEditorPosition,\n    } = model || {};\n    const { prompt: promptError, teacherInstructions: teacherInstructionsError } = errors;\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      backgroundImageEnabled: backgroundImage.settings && toggle(backgroundImage.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\n    const panelProperties = {\n      teacherInstructionsEnabled: teacherInstructions.settings && toggle(teacherInstructions.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={onModelChanged}\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.promptHolder}>\n            <EditableHtml\n              markup={model.teacherInstructions || ''}\n              onChange={this.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=\"Item Stem\" className={classes.promptHolder}>\n            <EditableHtml\n              markup={model.prompt}\n              onChange={this.onPromptChanged}\n              error={promptError}\n              toolbarOpts={toolbarOpts}\n              spellCheck={spellCheckEnabled}\n              pluginProps={getPluginProps(prompt?.inputConfiguration)}\n              imageSupport={imageSupport}\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        {backgroundImageEnabled && (\n          <React.Fragment>\n            <Typography variant=\"subheading\">Define Background Image</Typography>\n\n            <ImageContainer\n              imageUrl={model.imageUrl}\n              onUpdateImageDimension={this.onUpdateImageDimension}\n              onImageUpload={this.onImageUpload}\n              imageDimensions={model.imageDimensions}\n              insertImage={imageSupport && imageSupport.add}\n            />\n          </React.Fragment>\n        )}\n      </layout.ConfigLayout>\n    );\n  }\n}\n\nconst styles = (theme) => ({\n  promptHolder: {\n    paddingTop: theme.spacing.unit * 2,\n    marginBottom: theme.spacing.unit * 2,\n    width: '100%',\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  onModelChanged: PropTypes.func.isRequired,\n  onConfigurationChanged: 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/drawing-response-configure",
   "private": true,
-  "version": "8.0.6",
+  "version": "8.1.0",
   "description": "",
   "main": "lib/index.js",
   "module": "src/index.js",
@@ -9,7 +9,7 @@
   "dependencies": {
     "@material-ui/core": "^3.9.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",
     "lodash": "^4.17.15",

package/configure/src/root.jsx

@@ -57,6 +57,7 @@ export class Root extends React.Component {
     const {
       backgroundImageEnabled,
       errors = {},
+      extraCSSRules,
       promptEnabled,
       spellCheckEnabled,
       teacherInstructionsEnabled,
@@ -91,6 +92,7 @@ export class Root extends React.Component {
 
     return (
       <layout.ConfigLayout
+        extraCSSRules={extraCSSRules}
         dimensions={contentDimensions}
         hideSettings={settingsPanelDisabled}
         settings={

package/controller/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.5.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/drawing-response-controller@3.4.1...@pie-element/drawing-response-controller@3.5.0) (2024-10-29)
+
+
+### 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))
+
+
+
+
+
 ## [3.4.1](https://github.com/pie-framework/pie-elements/compare/@pie-element/drawing-response-controller@3.4.0...@pie-element/drawing-response-controller@3.4.1) (2024-10-22)
 
 **Note:** Version bump only for package @pie-element/drawing-response-controller

package/controller/lib/index.js

@@ -31,7 +31,8 @@ exports.normalize = normalize;
 
 function model(question, session, env) {
   var normalizedQuestion = normalize(question);
-  var imageUrl = normalizedQuestion.imageUrl,
+  var extraCSSRules = normalizedQuestion.extraCSSRules,
+      imageUrl = normalizedQuestion.imageUrl,
       imageDimensions = normalizedQuestion.imageDimensions,
       prompt = normalizedQuestion.prompt,
       promptEnabled = normalizedQuestion.promptEnabled,
@@ -45,7 +46,8 @@ function model(question, session, env) {
       imageUrl: imageUrl,
       prompt: promptEnabled ? prompt : null,
       backgroundImageEnabled: backgroundImageEnabled,
-      language: language
+      language: language,
+      extraCSSRules: 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","imageDimensions","prompt","promptEnabled","backgroundImageEnabled","language","Promise","resolve","out","disabled","mode","role","teacherInstructions","teacherInstructionsEnabled","createDefaultModel","outcome","score","completed","note","getInnerText","html","replaceAll","getContent","replace","validate","config","errors","forEach","field","required"],"mappings":"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","sourcesContent":["import debug from 'debug';\nimport defaults from './defaults';\n\nconst log = debug('pie-elements:drawing-response:controller');\n\nexport const normalize = (question) => ({ ...defaults, ...question });\n\nexport function model(question, session, env) {\n  const normalizedQuestion = normalize(question);\n  const { imageUrl, imageDimensions, prompt, promptEnabled, backgroundImageEnabled, language } = normalizedQuestion;\n\n  return new Promise((resolve) => {\n    const out = {\n      disabled: env.mode !== 'gather',\n      mode: env.mode,\n      imageDimensions,\n      imageUrl,\n      prompt: promptEnabled ? prompt : null,\n      backgroundImageEnabled,\n      language,\n    };\n\n    if (env.role === 'instructor' && (env.mode === 'view' || env.mode === 'evaluate')) {\n      out.teacherInstructions = normalizedQuestion.teacherInstructionsEnabled\n        ? normalizedQuestion.teacherInstructions\n        : null;\n    } else {\n      out.teacherInstructions = null;\n    }\n\n    resolve(out);\n  });\n}\n\nexport const createDefaultModel = (model = {}) =>\n  new Promise((resolve) => {\n    resolve({\n      ...defaults,\n      ...model,\n    });\n  });\n\nexport function outcome(/*config, session*/) {\n  return new Promise((resolve) => {\n    log('outcome...');\n    resolve({\n      score: 0,\n      completed: 'n/a',\n      note: 'Requires manual scoring',\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 errors = {};\n\n  ['teacherInstructions', 'prompt'].forEach((field) => {\n    if (config[field]?.required && !getContent(model[field])) {\n      errors[field] = 'This field is required.';\n    }\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","extraCSSRules","imageUrl","imageDimensions","prompt","promptEnabled","backgroundImageEnabled","language","Promise","resolve","out","disabled","mode","role","teacherInstructions","teacherInstructionsEnabled","createDefaultModel","outcome","score","completed","note","getInnerText","html","replaceAll","getContent","replace","validate","config","errors","forEach","field","required"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;;;;;AAEA,IAAMA,GAAG,GAAG,uBAAM,0CAAN,CAAZ;;AAEO,IAAMC,SAAS,GAAG,SAAZA,SAAY,CAACC,QAAD;AAAA,yCAAoBC,oBAApB,GAAiCD,QAAjC;AAAA,CAAlB;;;;AAEA,SAASE,KAAT,CAAeF,QAAf,EAAyBG,OAAzB,EAAkCC,GAAlC,EAAuC;AAC5C,MAAMC,kBAAkB,GAAGN,SAAS,CAACC,QAAD,CAApC;AACA,MAAQM,aAAR,GAA8GD,kBAA9G,CAAQC,aAAR;AAAA,MAAuBC,QAAvB,GAA8GF,kBAA9G,CAAuBE,QAAvB;AAAA,MAAiCC,eAAjC,GAA8GH,kBAA9G,CAAiCG,eAAjC;AAAA,MAAkDC,MAAlD,GAA8GJ,kBAA9G,CAAkDI,MAAlD;AAAA,MAA0DC,aAA1D,GAA8GL,kBAA9G,CAA0DK,aAA1D;AAAA,MAAyEC,sBAAzE,GAA8GN,kBAA9G,CAAyEM,sBAAzE;AAAA,MAAiGC,QAAjG,GAA8GP,kBAA9G,CAAiGO,QAAjG;AAEA,SAAO,IAAIC,OAAJ,CAAY,UAACC,OAAD,EAAa;AAC9B,QAAMC,GAAG,GAAG;AACVC,MAAAA,QAAQ,EAAEZ,GAAG,CAACa,IAAJ,KAAa,QADb;AAEVA,MAAAA,IAAI,EAAEb,GAAG,CAACa,IAFA;AAGVT,MAAAA,eAAe,EAAfA,eAHU;AAIVD,MAAAA,QAAQ,EAARA,QAJU;AAKVE,MAAAA,MAAM,EAAEC,aAAa,GAAGD,MAAH,GAAY,IALvB;AAMVE,MAAAA,sBAAsB,EAAtBA,sBANU;AAOVC,MAAAA,QAAQ,EAARA,QAPU;AAQVN,MAAAA,aAAa,EAAbA;AARU,KAAZ;;AAWA,QAAIF,GAAG,CAACc,IAAJ,KAAa,YAAb,KAA8Bd,GAAG,CAACa,IAAJ,KAAa,MAAb,IAAuBb,GAAG,CAACa,IAAJ,KAAa,UAAlE,CAAJ,EAAmF;AACjFF,MAAAA,GAAG,CAACI,mBAAJ,GAA0Bd,kBAAkB,CAACe,0BAAnB,GACtBf,kBAAkB,CAACc,mBADG,GAEtB,IAFJ;AAGD,KAJD,MAIO;AACLJ,MAAAA,GAAG,CAACI,mBAAJ,GAA0B,IAA1B;AACD;;AAEDL,IAAAA,OAAO,CAACC,GAAD,CAAP;AACD,GArBM,CAAP;AAsBD;;AAEM,IAAMM,kBAAkB,GAAG,SAArBA,kBAAqB;AAAA,MAACnB,KAAD,uEAAS,EAAT;AAAA,SAChC,IAAIW,OAAJ,CAAY,UAACC,OAAD,EAAa;AACvBA,IAAAA,OAAO,iCACFb,oBADE,GAEFC,KAFE,EAAP;AAID,GALD,CADgC;AAAA,CAA3B;;;;AAQA;AAAiB;AAARoB,OAAT,GAAsC;AAC3C,SAAO,IAAIT,OAAJ,CAAY,UAACC,OAAD,EAAa;AAC9BhB,IAAAA,GAAG,CAAC,YAAD,CAAH;AACAgB,IAAAA,OAAO,CAAC;AACNS,MAAAA,KAAK,EAAE,CADD;AAENC,MAAAA,SAAS,EAAE,KAFL;AAGNC,MAAAA,IAAI,EAAE;AAHA,KAAD,CAAP;AAKD,GAPM,CAAP;AAQD,C,CAED;;;AACA,IAAMC,YAAY,GAAG,SAAfA,YAAe,CAACC,IAAD;AAAA,SAAU,CAACA,IAAI,IAAI,EAAT,EAAaC,UAAb,CAAwB,UAAxB,EAAoC,EAApC,CAAV;AAAA,CAArB,C,CAEA;;;AACA,IAAMC,UAAU,GAAG,SAAbA,UAAa,CAACF,IAAD;AAAA,SAAU,CAACA,IAAI,IAAI,EAAT,EAAaG,OAAb,CAAqB,6BAArB,EAAoD,EAApD,CAAV;AAAA,CAAnB;;AAEO,IAAMC,QAAQ,GAAG,SAAXA,QAAW,GAA6B;AAAA,MAA5B7B,KAA4B,uEAApB,EAAoB;AAAA,MAAhB8B,MAAgB,uEAAP,EAAO;AACnD,MAAMC,MAAM,GAAG,EAAf;AAEA,GAAC,qBAAD,EAAwB,QAAxB,EAAkCC,OAAlC,CAA0C,UAACC,KAAD,EAAW;AAAA;;AACnD,QAAI,iBAAAH,MAAM,CAACG,KAAD,CAAN,wDAAeC,QAAf,IAA2B,CAACP,UAAU,CAAC3B,KAAK,CAACiC,KAAD,CAAN,CAA1C,EAA0D;AACxDF,MAAAA,MAAM,CAACE,KAAD,CAAN,GAAgB,yBAAhB;AACD;AACF,GAJD;AAMA,SAAOF,MAAP;AACD,CAVM","sourcesContent":["import debug from 'debug';\nimport defaults from './defaults';\n\nconst log = debug('pie-elements:drawing-response:controller');\n\nexport const normalize = (question) => ({ ...defaults, ...question });\n\nexport function model(question, session, env) {\n  const normalizedQuestion = normalize(question);\n  const { extraCSSRules, imageUrl, imageDimensions, prompt, promptEnabled, backgroundImageEnabled, language } = normalizedQuestion;\n\n  return new Promise((resolve) => {\n    const out = {\n      disabled: env.mode !== 'gather',\n      mode: env.mode,\n      imageDimensions,\n      imageUrl,\n      prompt: promptEnabled ? prompt : null,\n      backgroundImageEnabled,\n      language,\n      extraCSSRules,\n    };\n\n    if (env.role === 'instructor' && (env.mode === 'view' || env.mode === 'evaluate')) {\n      out.teacherInstructions = normalizedQuestion.teacherInstructionsEnabled\n        ? normalizedQuestion.teacherInstructions\n        : null;\n    } else {\n      out.teacherInstructions = null;\n    }\n\n    resolve(out);\n  });\n}\n\nexport const createDefaultModel = (model = {}) =>\n  new Promise((resolve) => {\n    resolve({\n      ...defaults,\n      ...model,\n    });\n  });\n\nexport function outcome(/*config, session*/) {\n  return new Promise((resolve) => {\n    log('outcome...');\n    resolve({\n      score: 0,\n      completed: 'n/a',\n      note: 'Requires manual scoring',\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 errors = {};\n\n  ['teacherInstructions', 'prompt'].forEach((field) => {\n    if (config[field]?.required && !getContent(model[field])) {\n      errors[field] = 'This field is required.';\n    }\n  });\n\n  return errors;\n};\n"],"file":"index.js"}

package/controller/package.json

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

package/controller/src/index.js

@@ -7,7 +7,7 @@ export const normalize = (question) => ({ ...defaults, ...question });
 
 export function model(question, session, env) {
   const normalizedQuestion = normalize(question);
-  const { imageUrl, imageDimensions, prompt, promptEnabled, backgroundImageEnabled, language } = normalizedQuestion;
+  const { extraCSSRules, imageUrl, imageDimensions, prompt, promptEnabled, backgroundImageEnabled, language } = normalizedQuestion;
 
   return new Promise((resolve) => {
     const out = {
@@ -18,6 +18,7 @@ export function model(question, session, env) {
       prompt: promptEnabled ? prompt : null,
       backgroundImageEnabled,
       language,
+      extraCSSRules,
     };
 
     if (env.role === 'instructor' && (env.mode === 'view' || env.mode === 'evaluate')) {

package/lib/drawing-response/index.js

@@ -53,6 +53,7 @@ var DrawingResponseComponent = /*#__PURE__*/function (_React$Component) {
     value: function render() {
       var _this$props = this.props,
           _this$props$model = _this$props.model,
+          extraCSSRules = _this$props$model.extraCSSRules,
           disabled = _this$props$model.disabled,
           imageDimensions = _this$props$model.imageDimensions,
           imageUrl = _this$props$model.imageUrl,
@@ -70,7 +71,8 @@ var DrawingResponseComponent = /*#__PURE__*/function (_React$Component) {
       var isEvaluateMode = mode === 'evaluate';
       return hasError ? /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.main
-      }, "An error occured: ", errorMessage) : /*#__PURE__*/_react["default"].createElement("div", {
+      }, "An error occured: ", errorMessage) : /*#__PURE__*/_react["default"].createElement(_renderUi.UiLayout, {
+        extraCSSRules: extraCSSRules,
         className: classes.main
       }, teacherInstructions && /*#__PURE__*/_react["default"].createElement(_renderUi.Collapsible, {
         className: classes.collapsible,

package/lib/drawing-response/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/drawing-response/index.jsx"],"names":["DrawingResponseComponent","props","state","showCorrect","hasError","model","disabled","imageDimensions","imageUrl","prompt","mode","teacherInstructions","backgroundImageEnabled","language","session","onSessionChange","classes","errorMessage","isEvaluateMode","main","collapsible","hidden","visible","error","message","React","Component","propTypes","PropTypes","object","isRequired","func","styles","theme","color","text","backgroundColor","background","marginBottom","spacing","unit"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { color, Collapsible, PreviewPrompt } from '@pie-lib/pie-toolbox/render-ui';\nimport { withStyles } from '@material-ui/core/styles';\n\nimport Container from './container';\n\nclass DrawingResponseComponent extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      showCorrect: false,\n      hasError: false,\n    };\n  }\n\n  static getDerivedStateFromError(error) {\n    return { hasError: true, errorMessage: error.message };\n  }\n\n  render() {\n    const {\n      model: {\n        disabled,\n        imageDimensions,\n        imageUrl,\n        prompt,\n        mode,\n        teacherInstructions,\n        backgroundImageEnabled,\n        language\n      },\n      session,\n      onSessionChange,\n      classes,\n    } = this.props;\n    const { hasError, errorMessage } = this.state;\n    const isEvaluateMode = mode === 'evaluate';\n\n    return hasError ? (\n      <div className={classes.main}>An error occured: {errorMessage}</div>\n    ) : (\n      <div className={classes.main}>\n        {teacherInstructions && (\n          <Collapsible\n            className={classes.collapsible}\n            labels={{\n              hidden: 'Show Teacher Instructions',\n              visible: 'Hide Teacher Instructions',\n            }}\n          >\n            <PreviewPrompt prompt={teacherInstructions} />\n          </Collapsible>\n        )}\n\n        {prompt && <PreviewPrompt tagName=\"span\" prompt={prompt} />}\n\n        <Container\n          session={session}\n          onSessionChange={onSessionChange}\n          isEvaluateMode={isEvaluateMode}\n          imageDimensions={imageDimensions}\n          imageUrl={imageUrl}\n          backgroundImageEnabled={backgroundImageEnabled}\n          disabled={disabled}\n          language={language}\n        />\n      </div>\n    );\n  }\n}\n\nDrawingResponseComponent.propTypes = {\n  classes: PropTypes.object,\n  model: PropTypes.object.isRequired,\n  onSessionChange: PropTypes.func.isRequired,\n  session: PropTypes.object.isRequired,\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});\n\nexport default withStyles(styles)(DrawingResponseComponent);\n"],"file":"index.js"}
+{"version":3,"sources":["../../src/drawing-response/index.jsx"],"names":["DrawingResponseComponent","props","state","showCorrect","hasError","model","extraCSSRules","disabled","imageDimensions","imageUrl","prompt","mode","teacherInstructions","backgroundImageEnabled","language","session","onSessionChange","classes","errorMessage","isEvaluateMode","main","collapsible","hidden","visible","error","message","React","Component","propTypes","PropTypes","object","isRequired","func","styles","theme","color","text","backgroundColor","background","marginBottom","spacing","unit"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { color, Collapsible, PreviewPrompt, UiLayout } from '@pie-lib/pie-toolbox/render-ui';\nimport { withStyles } from '@material-ui/core/styles';\n\nimport Container from './container';\n\nclass DrawingResponseComponent extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      showCorrect: false,\n      hasError: false,\n    };\n  }\n\n  static getDerivedStateFromError(error) {\n    return { hasError: true, errorMessage: error.message };\n  }\n\n  render() {\n    const {\n      model: {\n        extraCSSRules,\n        disabled,\n        imageDimensions,\n        imageUrl,\n        prompt,\n        mode,\n        teacherInstructions,\n        backgroundImageEnabled,\n        language\n      },\n      session,\n      onSessionChange,\n      classes,\n    } = this.props;\n    const { hasError, errorMessage } = this.state;\n    const isEvaluateMode = mode === 'evaluate';\n\n    return hasError ? (\n      <div className={classes.main}>An error occured: {errorMessage}</div>\n    ) : (\n      <UiLayout extraCSSRules={extraCSSRules} className={classes.main}>\n        {teacherInstructions && (\n          <Collapsible\n            className={classes.collapsible}\n            labels={{\n              hidden: 'Show Teacher Instructions',\n              visible: 'Hide Teacher Instructions',\n            }}\n          >\n            <PreviewPrompt prompt={teacherInstructions} />\n          </Collapsible>\n        )}\n\n        {prompt && <PreviewPrompt tagName=\"span\" prompt={prompt} />}\n\n        <Container\n          session={session}\n          onSessionChange={onSessionChange}\n          isEvaluateMode={isEvaluateMode}\n          imageDimensions={imageDimensions}\n          imageUrl={imageUrl}\n          backgroundImageEnabled={backgroundImageEnabled}\n          disabled={disabled}\n          language={language}\n        />\n      </UiLayout>\n    );\n  }\n}\n\nDrawingResponseComponent.propTypes = {\n  classes: PropTypes.object,\n  model: PropTypes.object.isRequired,\n  onSessionChange: PropTypes.func.isRequired,\n  session: PropTypes.object.isRequired,\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});\n\nexport default withStyles(styles)(DrawingResponseComponent);\n"],"file":"index.js"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-element/drawing-response",
-  "version": "8.1.5-next.3+59535a35f",
+  "version": "8.2.0",
   "description": "",
   "repository": "pie-framework/pie-elements",
   "publishConfig": {
@@ -11,7 +11,7 @@
     "@mdi/js": "^3.6.95",
     "@mdi/react": "^1.1.1",
     "@pie-framework/pie-player-events": "^0.1.0",
-    "@pie-lib/pie-toolbox": "2.0.15",
+    "@pie-lib/pie-toolbox": "2.1.0",
     "classnames": "^2.2.6",
     "enzyme-to-json": "^3.3.5",
     "konva": "^3.4.1",
@@ -23,7 +23,7 @@
   },
   "author": "pie framework developers",
   "license": "ISC",
-  "gitHead": "59535a35fed818c74f3d6d6cc41b352c1ed939eb",
+  "gitHead": "0ceacdb80b0be7b4cae60b1eff7974170b088358",
   "scripts": {
     "postpublish": "../../scripts/postpublish"
   },

package/src/drawing-response/index.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { color, Collapsible, PreviewPrompt } from '@pie-lib/pie-toolbox/render-ui';
+import { color, Collapsible, PreviewPrompt, UiLayout } from '@pie-lib/pie-toolbox/render-ui';
 import { withStyles } from '@material-ui/core/styles';
 
 import Container from './container';
@@ -21,6 +21,7 @@ class DrawingResponseComponent extends React.Component {
   render() {
     const {
       model: {
+        extraCSSRules,
         disabled,
         imageDimensions,
         imageUrl,
@@ -40,7 +41,7 @@ class DrawingResponseComponent extends React.Component {
     return hasError ? (
       <div className={classes.main}>An error occured: {errorMessage}</div>
     ) : (
-      <div className={classes.main}>
+      <UiLayout extraCSSRules={extraCSSRules} className={classes.main}>
         {teacherInstructions && (
           <Collapsible
             className={classes.collapsible}
@@ -65,7 +66,7 @@ class DrawingResponseComponent extends React.Component {
           disabled={disabled}
           language={language}
         />
-      </div>
+      </UiLayout>
     );
   }
 }