@pie-element/drawing-response 3.6.0 → 3.6.1-beta.587

package/configure/src/image-container.jsx

@@ -13,11 +13,11 @@ export class ImageContainer extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      maxImageWidth: 0,
-      maxImageHeight: 0,
+      maxImageWidth: '100%',
+      maxImageHeight: 'auto',
       dragEnabled: true,
       dropzoneActive: false,
-    }
+    };
   }
 
   componentDidMount() {
@@ -26,7 +26,7 @@ export class ImageContainer extends Component {
       const { height, width } = positionInfo;
       this.setState({
         maxImageWidth: width,
-        maxImageHeight: height
+        maxImageHeight: height,
       });
     }
   }
@@ -46,7 +46,7 @@ export class ImageContainer extends Component {
     this.handleFileRead(file);
   };
 
-  makeDropzoneActive= () => this.setState({ dropzoneActive: true });
+  makeDropzoneActive = () => this.setState({ dropzoneActive: true });
 
   makeDropzoneInactive = () => this.setState({ dropzoneActive: false });
 
@@ -84,15 +84,22 @@ export class ImageContainer extends Component {
   handleDisableDrag = () => this.setState({ dragEnabled: false });
   handleInputClick = () => this.input.click();
 
-  handleOnImageLoad = ({ target: { offsetHeight, offsetWidth } }) => {
-    const { onUpdateImageDimension } = this.props;
+  handleOnImageLoad = ({ target: { offsetHeight, offsetWidth, naturalHeight, naturalWidth } }) => {
+    const { onUpdateImageDimension, imageDimensions } = this.props;
     const resizeHandle = this.resize;
 
     const dimensions = {
-      height: offsetHeight,
-      width: offsetWidth
+      height: (imageDimensions && imageDimensions.height) || offsetHeight || naturalHeight,
+      width: (imageDimensions && imageDimensions.width) || offsetWidth || naturalWidth,
     };
 
+    // check if aspect ratio is not respected on replacing image
+    const imageAspectRatio = naturalWidth / naturalHeight;
+
+    if (dimensions.width !== dimensions.height * imageAspectRatio) {
+      dimensions.width = dimensions.height * imageAspectRatio;
+    }
+
     this.setState({ dimensions });
     onUpdateImageDimension(dimensions);
 
@@ -117,20 +124,26 @@ export class ImageContainer extends Component {
 
   startResizing = (e) => {
     const box = this.image;
-    const { maxImageWidth } = this.state;
+    const { maxImageWidth, maxImageHeight, dimensions } = this.state;
 
     const bounds = e.target.getBoundingClientRect();
     const x = e.clientX - bounds.left;
     const y = e.clientY - bounds.top;
 
-    const fitsContainer = x <= maxImageWidth + 5;
+    const imageAspectRatio = dimensions.width / dimensions.height;
+    const fitsContainer = x <= maxImageWidth + 5 && x / imageAspectRatio <= maxImageHeight + 5;
     const hasMinimumWidth = x > 150 && y > 150;
 
-    if (fitsContainer && hasMinimumWidth) {
+    if (fitsContainer && hasMinimumWidth && box) {
       box.style.width = `${x}px`;
-      box.style.height = `${y}px`;
+      box.style.height = `${x / imageAspectRatio}px`;
 
-      this.setState({ dimensions: { height: y, width: x }});
+      this.setState({
+        dimensions: {
+          width: x,
+          height: x / imageAspectRatio,
+        },
+      });
     }
 
     this.handleDisableDrag();
@@ -141,60 +154,68 @@ export class ImageContainer extends Component {
 
     return (
       <div>
-        <Button
-          label={label}
-          onClick={this.handleInputClick}
-        />
+        <Button label={label} onClick={this.handleInputClick} />
         <input
           accept="image/*"
           className={classes.input}
           onChange={this.handleUploadImage}
-          ref={ref => { this.input = ref; }}
+          ref={(ref) => {
+            this.input = ref;
+          }}
           type="file"
         />
       </div>
-    )
+    );
   }
 
   render() {
-    const {
-      classes,
-      imageUrl
-    } = this.props;
-    const {
-      dropzoneActive,
-      dragEnabled,
-      maxImageHeight,
-      maxImageWidth
-    } = this.state;
+    const { classes, imageUrl, imageDimensions } = this.props;
+    const { dropzoneActive, dragEnabled, maxImageHeight, maxImageWidth } = this.state;
 
     return (
-      <div className={classes.base} >
-        <div className={`${classes.box} ${dropzoneActive ? classes.boxActive : ''}`}
-             {...dragEnabled ? {
-               onDragExit: this.handleOnDragExit,
-               onDragLeave: this.handleOnDragExit,
-               onDragOver: this.handleOnDragOver ,
-               onDrop: this.handleOnDrop
-             } : {}}
+      <div className={classes.base}>
+        <div
+          className={`${classes.box} ${dropzoneActive ? classes.boxActive : ''}`}
+          {...(dragEnabled
+            ? {
+                onDragExit: this.handleOnDragExit,
+                onDragLeave: this.handleOnDragExit,
+                onDragOver: this.handleOnDragOver,
+                onDrop: this.handleOnDrop,
+              }
+            : {})}
         >
-          <div className={classes.toolbar}>
-            {this.renderUploadControl(imageUrl ? 'Replace Image' : 'Upload Image')}
-          </div>
-
-          <div ref={ref => { this.imageSection = ref; }} className={classes.drawableHeight}>
+          <div className={classes.toolbar}>{this.renderUploadControl(imageUrl ? 'Replace Image' : 'Upload Image')}</div>
+
+          <div
+            ref={(ref) => {
+              this.imageSection = ref;
+            }}
+            className={classes.drawableHeight}
+          >
             {imageUrl ? (
               <div className={classes.imageContainer}>
                 <img
                   className={classes.image}
                   height="auto"
                   onLoad={this.handleOnImageLoad}
-                  ref={ref => { this.image = ref; }}
+                  ref={(ref) => {
+                    this.image = ref;
+                  }}
                   src={imageUrl}
-                  style={{ maxWidth: maxImageWidth, maxHeight: maxImageHeight }}
-                  alt=''
+                  style={{
+                    width: imageDimensions && imageDimensions.width ? imageDimensions.width : undefined,
+                    maxWidth: maxImageWidth,
+                    maxHeight: maxImageHeight,
+                  }}
+                  alt=""
+                />
+                <div
+                  ref={(ref) => {
+                    this.resize = ref;
+                  }}
+                  className={classes.resize}
                 />
-                <div ref={ref => { this.resize = ref; }} className={classes.resize} />
               </div>
             ) : (
               <div className={`${classes.drawableHeight} ${classes.centered}`}>
@@ -210,25 +231,25 @@ export class ImageContainer extends Component {
   }
 }
 
-const styles = theme => ({
+const styles = (theme) => ({
   base: {
-    marginTop: theme.spacing.unit * 2
+    marginTop: theme.spacing.unit * 2,
   },
   box: {
     border: '1px solid #E0E1E6',
-    borderRadius: '5px'
+    borderRadius: '5px',
   },
   boxActive: {
-    border: '1px solid #0032C2'
+    border: '1px solid #0032C2',
   },
   centered: {
     alignItems: 'center',
     display: 'flex',
     flexDirection: 'column',
-    justifyContent: 'center'
+    justifyContent: 'center',
   },
   drawableHeight: {
-    minHeight: 350
+    minHeight: 350,
   },
   image: {
     alignItems: 'center',
@@ -237,7 +258,7 @@ const styles = theme => ({
   },
   imageContainer: {
     position: 'relative',
-    width: 'fit-content'
+    width: 'fit-content',
   },
   resize: {
     borderBottom: '1px solid #727272',
@@ -247,10 +268,10 @@ const styles = theme => ({
     height: '10px',
     position: 'absolute',
     right: '-10px',
-    width: '10px'
+    width: '10px',
   },
   input: {
-    display: 'none'
+    display: 'none',
   },
   toolbar: {
     backgroundColor: '#ECEDF1',
@@ -258,15 +279,15 @@ const styles = theme => ({
     borderTopLeftRadius: '5px',
     borderTopRightRadius: '5px',
     display: 'flex',
-    padding: '12px 8px'
-  }
+    padding: '12px 8px',
+  },
 });
 
 ImageContainer.propTypes = {
   classes: PropTypes.object.isRequired,
   imageUrl: PropTypes.string.isRequired,
   onImageUpload: PropTypes.func.isRequired,
-  onUpdateImageDimension: PropTypes.func.isRequired
+  onUpdateImageDimension: PropTypes.func.isRequired,
 };
 
 export default withStyles(styles)(ImageContainer);

package/configure/src/index.js

@@ -2,6 +2,8 @@ import {
   ModelUpdatedEvent,
   DeleteImageEvent,
   InsertImageEvent,
+  InsertSoundEvent,
+  DeleteSoundEvent,
 } from '@pie-framework/pie-configure-events';
 
 import React from 'react';
@@ -14,25 +16,45 @@ import sensibleDefaults from './defaults';
 const log = debug('hotspot:configure');
 
 export default class DrawableResponseConfigure extends HTMLElement {
-  static createDefaultModel = (model = {}) => ({
-    ...sensibleDefaults.model,
-    ...model,
-  });
+  static createDefaultModel = (model = {}, config) => {
+    const defaultModel = {
+      ...sensibleDefaults.model,
+      ...model,
+    };
+
+    if (config?.withRubric?.forceEnabled && !defaultModel.rubricEnabled) {
+      defaultModel.rubricEnabled = true;
+    }
+
+    return defaultModel;
+  };
 
   constructor() {
     super();
-    this._model = DrawableResponseConfigure.createDefaultModel();
     this._configuration = sensibleDefaults.configuration;
+    this._model = DrawableResponseConfigure.createDefaultModel({}, this._configuration);
     this.onModelChanged = this.onModelChanged.bind(this);
   }
 
+  verifyRubric = async (c) => {
+    const { withRubric = {} } = c || {};
+
+    if (withRubric?.forceEnabled && !this._model.rubricEnabled) {
+      this._model.rubricEnabled = true;
+      this.dispatchEvent(new ModelUpdatedEvent(this._model));
+    }
+  };
+
   set model(s) {
-    this._model = DrawableResponseConfigure.createDefaultModel(s);
+    this._model = DrawableResponseConfigure.createDefaultModel(s, this._configuration);
     this._render();
   }
 
   set configuration(c) {
     this._configuration = c;
+
+    this.verifyRubric(this._configuration);
+
     this._render();
   }
 
@@ -49,13 +71,10 @@ export default class DrawableResponseConfigure extends HTMLElement {
   };
 
   onConfigurationChanged = (c) => {
-    if (!c.backgroundImage.enabled) {
-      this.onModelChanged({
-        ...this._model,
-        imageUrl: ''
-      });
-    }
     this._configuration = c;
+
+    this.verifyRubric(this._configuration);
+
     this._render();
   };
 
@@ -67,8 +86,17 @@ export default class DrawableResponseConfigure extends HTMLElement {
     this.dispatchEvent(new DeleteImageEvent(src, done));
   };
 
+  insertSound(handler) {
+    this.dispatchEvent(new InsertSoundEvent(handler));
+  }
+
+  onDeleteSound(src, done) {
+    this.dispatchEvent(new DeleteSoundEvent(src, done));
+  }
+
   _render() {
     log('_render');
+
     let element = React.createElement(Root, {
       model: this._model,
       configuration: this._configuration,
@@ -76,8 +104,12 @@ export default class DrawableResponseConfigure extends HTMLElement {
       onConfigurationChanged: this.onConfigurationChanged,
       imageSupport: {
         add: this.insertImage,
-        delete: this.onDeleteImage
-      }
+        delete: this.onDeleteImage,
+      },
+      uploadSoundSupport: {
+        add: this.insertSound.bind(this),
+        delete: this.onDeleteSound.bind(this),
+      },
     });
     ReactDOM.render(element, this);
   }

package/configure/src/root.jsx

@@ -11,69 +11,74 @@ import cloneDeep from 'lodash/cloneDeep';
 const { Panel, toggle } = settings;
 
 export class Root extends React.Component {
-  onPromptChanged = prompt => {
+  onPromptChanged = (prompt) => {
     const { model, onModelChanged } = this.props;
     const update = cloneDeep(model);
 
-    onModelChanged({
-      ...update,
-      prompt
-    });
+    onModelChanged({ ...update, prompt });
   };
 
-  onRationaleChanged = rationale => {
+  onTeacherInstructionsChanged = (teacherInstructions) => {
     const { model, onModelChanged } = this.props;
 
-    onModelChanged({
-      ...model,
-      rationale
-    });
-  };
-
-  onTeacherInstructionsChanged = teacherInstructions => {
-    const { model, onModelChanged } = this.props;
-
-    onModelChanged({
-      ...model,
-      teacherInstructions
-    });
+    onModelChanged({ ...model, teacherInstructions });
   };
 
   onUpdateImageDimension = (dimensions) => {
     const { model, onModelChanged } = this.props;
 
-    onModelChanged({
-      ...model,
-      imageDimensions: dimensions
-    });
+    onModelChanged({ ...model, imageDimensions: dimensions });
   };
 
-  onImageUpload = imageUrl => {
+  onImageUpload = (imageUrl) => {
     const { model, onModelChanged } = this.props;
 
-    onModelChanged({
-      ...model,
-      imageUrl
-    });
+    onModelChanged({ ...model, imageUrl });
   };
 
   render() {
+    const { classes, configuration, imageSupport, model, onConfigurationChanged, onModelChanged, uploadSoundSupport } =
+      this.props;
     const {
-      classes,
-      configuration,
-      model,
-      imageSupport,
-      onConfigurationChanged,
-      onModelChanged
-    } = this.props;
-    const { backgroundImage = {}, rationale = {}, prompt = {}, teacherInstructions = {} } =
-      configuration || {};
-    const { teacherInstructionsEnabled, promptEnabled, rationaleEnabled } =
-      model || {};
+      backgroundImage = {},
+      maxImageWidth = {},
+      maxImageHeight = {},
+      prompt = {},
+      settingsPanelDisabled,
+      spellCheck = {},
+      teacherInstructions = {},
+      withRubric = {},
+    } = configuration || {};
+    const {
+      backgroundImageEnabled,
+      promptEnabled,
+      spellCheckEnabled,
+      teacherInstructionsEnabled,
+      toolbarEditorPosition,
+    } = model || {};
+
+    const defaultImageMaxWidth = maxImageWidth && maxImageWidth.prompt;
+    const defaultImageMaxHeight = maxImageHeight && maxImageHeight.prompt;
+
+    const toolbarOpts = {
+      position: toolbarEditorPosition === 'top' ? 'top' : 'bottom',
+    };
+
+    const panelSettings = {
+      backgroundImageEnabled: backgroundImage.settings && toggle(backgroundImage.label),
+      promptEnabled: prompt.settings && toggle(prompt.label),
+    };
+
+    const panelProperties = {
+      teacherInstructionsEnabled: teacherInstructions.settings && toggle(teacherInstructions.label),
+      spellCheckEnabled: spellCheck.settings && toggle(spellCheck.label),
+      rubricEnabled: !withRubric?.forceEnabled && withRubric?.settings && toggle(withRubric?.label),
+    };
 
     return (
       <div className={classes.base}>
         <layout.ConfigLayout
+          hideSettings={settingsPanelDisabled}
           settings={
             <Panel
               model={model}
@@ -81,34 +86,26 @@ export class Root extends React.Component {
               configuration={configuration}
               onChangeConfiguration={onConfigurationChanged}
               groups={{
-                Settings: {
-                  'backgroundImage.enabled':
-                    backgroundImage.settings &&
-                    toggle(backgroundImage.label, true),
-                  promptEnabled: prompt.settings && toggle(prompt.label)
-                },
-                Properties: {
-                  teacherInstructionsEnabled:
-                    teacherInstructions.settings &&
-                    toggle(teacherInstructions.label),
-                  rationaleEnabled:
-                    rationale.settings && toggle(rationale.label)
-                }
+                Settings: panelSettings,
+                Properties: panelProperties,
               }}
             />
           }
         >
           <div className={classes.regular}>
             {teacherInstructionsEnabled && (
-              <InputContainer
-                label={teacherInstructions.label}
-                className={classes.prompt}
-              >
+              <InputContainer label={teacherInstructions.label} className={classes.prompt}>
                 <EditableHtml
                   markup={model.teacherInstructions || ''}
                   onChange={this.onTeacherInstructionsChanged}
                   imageSupport={imageSupport}
                   nonEmpty={false}
+                  toolbarOpts={toolbarOpts}
+                  spellCheck={spellCheckEnabled}
+                  maxImageWidth={(maxImageWidth && maxImageWidth.teacherInstructions) || defaultImageMaxWidth}
+                  maxImageHeight={(maxImageHeight && maxImageHeight.teacherInstructions) || defaultImageMaxHeight}
+                  uploadSoundSupport={uploadSoundSupport}
+                  languageCharactersProps={[{ language: 'spanish' }, { language: 'special' }]}
                 />
               </InputContainer>
             )}
@@ -118,24 +115,18 @@ export class Root extends React.Component {
                 <EditableHtml
                   markup={model.prompt}
                   onChange={this.onPromptChanged}
-                />
-              </InputContainer>
-            )}
-
-            {rationaleEnabled && (
-              <InputContainer
-                label={rationale.label}
-                className={classes.prompt}
-              >
-                <EditableHtml
-                  markup={model.rationale || ''}
-                  onChange={this.onRationaleChanged}
+                  toolbarOpts={toolbarOpts}
+                  spellCheck={spellCheckEnabled}
                   imageSupport={imageSupport}
+                  maxImageWidth={defaultImageMaxWidth}
+                  maxImageHeight={defaultImageMaxHeight}
+                  uploadSoundSupport={uploadSoundSupport}
+                  languageCharactersProps={[{ language: 'spanish' }, { language: 'special' }]}
                 />
               </InputContainer>
             )}
 
-            {backgroundImage.enabled && (
+            {backgroundImageEnabled && (
               <div>
                 <Typography className={classes.label} variant="subheading">
                   Define Background Image
@@ -145,6 +136,7 @@ export class Root extends React.Component {
                   imageUrl={model.imageUrl}
                   onUpdateImageDimension={this.onUpdateImageDimension}
                   onImageUpload={this.onImageUpload}
+                  imageDimensions={model.imageDimensions}
                 />
               </div>
             )}
@@ -155,20 +147,20 @@ export class Root extends React.Component {
   }
 }
 
-const styles = theme => ({
+const styles = (theme) => ({
   base: {
-    marginTop: theme.spacing.unit * 3
+    marginTop: theme.spacing.unit * 3,
   },
   label: {
-    marginTop: theme.spacing.unit * 4
+    marginTop: theme.spacing.unit * 4,
   },
   prompt: {
     paddingTop: theme.spacing.unit * 2,
-    width: '100%'
+    width: '100%',
   },
   regular: {
-    marginBottom: theme.spacing.unit * 3
-  }
+    marginBottom: theme.spacing.unit * 3,
+  },
 });
 
 Root.propTypes = {
@@ -177,7 +169,11 @@ Root.propTypes = {
   model: PropTypes.object.isRequired,
   imageSupport: PropTypes.shape({
     add: PropTypes.func,
-    delete: PropTypes.func
+    delete: PropTypes.func,
+  }),
+  uploadSoundSupport: PropTypes.shape({
+    add: PropTypes.func,
+    delete: PropTypes.func,
   }),
   onModelChanged: PropTypes.func.isRequired,
   onConfigurationChanged: PropTypes.func.isRequired,

package/controller/CHANGELOG.md

@@ -3,6 +3,64 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.2.9](https://github.com/pie-framework/pie-elements/compare/@pie-element/drawing-response-controller@3.2.8...@pie-element/drawing-response-controller@3.2.9) (2022-12-07)
+
+
+### Bug Fixes
+
+* PD-1642 toggle backgroundImageEnabled property instead of just config property, keep image link in model ([6661854](https://github.com/pie-framework/pie-elements/commit/6661854ab93f801d19b8cc8014f89ea8e5d83848))
+* tests ([b196414](https://github.com/pie-framework/pie-elements/commit/b196414b2d019dfdbd8ea6bfc996b47c2f152cb0))
+
+
+
+
+
+## [3.2.8](https://github.com/pie-framework/pie-elements/compare/@pie-element/drawing-response-controller@3.2.7...@pie-element/drawing-response-controller@3.2.8) (2022-03-22)
+
+**Note:** Version bump only for package @pie-element/drawing-response-controller
+
+
+
+
+
+## [3.2.4](https://github.com/pie-framework/pie-elements/compare/@pie-element/drawing-response-controller@3.2.2...@pie-element/drawing-response-controller@3.2.4) (2021-11-11)
+
+**Note:** Version bump only for package @pie-element/drawing-response-controller
+
+
+
+
+
+## [3.2.3](https://github.com/pie-framework/pie-elements/compare/@pie-element/drawing-response-controller@3.2.2...@pie-element/drawing-response-controller@3.2.3) (2021-11-11)
+
+**Note:** Version bump only for package @pie-element/drawing-response-controller
+
+
+
+
+
+## [3.2.2](https://github.com/pie-framework/pie-elements/compare/@pie-element/drawing-response-controller@3.2.0...@pie-element/drawing-response-controller@3.2.2) (2021-08-05)
+
+
+### Bug Fixes
+
+* force bump ([5ea7295](https://github.com/pie-framework/pie-elements/commit/5ea7295e4755fbc492a76e7ec69e5fc35b196919))
+
+
+
+
+
+# [3.2.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/drawing-response-controller@3.1.8...@pie-element/drawing-response-controller@3.2.0) (2021-06-29)
+
+
+### Features
+
+* **drawing-response:** remove rationale PD-191 ([#597](https://github.com/pie-framework/pie-elements/issues/597)) ([3b52331](https://github.com/pie-framework/pie-elements/commit/3b52331ac843084e6d402daad3536627ab0ddf28))
+
+
+
+
+
 ## [3.1.8](https://github.com/pie-framework/pie-elements/compare/@pie-element/drawing-response-controller@3.1.6...@pie-element/drawing-response-controller@3.1.8) (2021-03-03)
 
 **Note:** Version bump only for package @pie-element/drawing-response-controller

package/controller/lib/defaults.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/defaults.js"],"names":["prompt","imageUrl","imageDimensions","height","width"],"mappings":";;;;;;eAAe;AACbA,EAAAA,MAAM,EAAE,6BADK;AAEbC,EAAAA,QAAQ,EAAE,EAFG;AAGbC,EAAAA,eAAe,EAAE;AACfC,IAAAA,MAAM,EAAE,CADO;AAEfC,IAAAA,KAAK,EAAE;AAFQ;AAHJ,C","sourcesContent":["export default {\n  prompt: 'This is the question prompt',\n  imageUrl: '',\n  imageDimensions: {\n    height: 0,\n    width: 0\n  }\n};\n"],"file":"defaults.js"}
+{"version":3,"sources":["../src/defaults.js"],"names":["prompt","imageUrl","imageDimensions","height","width"],"mappings":";;;;;;eAAe;AACbA,EAAAA,MAAM,EAAE,6BADK;AAEbC,EAAAA,QAAQ,EAAE,EAFG;AAGbC,EAAAA,eAAe,EAAE;AACfC,IAAAA,MAAM,EAAE,CADO;AAEfC,IAAAA,KAAK,EAAE;AAFQ;AAHJ,C","sourcesContent":["export default {\n  prompt: 'This is the question prompt',\n  imageUrl: '',\n  imageDimensions: {\n    height: 0,\n    width: 0,\n  },\n};\n"],"file":"defaults.js"}