@pie-element/drawing-response 3.9.8 → 3.9.10-beta.1443

package/configure/src/__tests__/image-container.test.jsx

@@ -5,14 +5,14 @@ import { ImageContainer } from '../image-container';
 
 jest.mock('@pie-lib/config-ui', () => ({
   settings: {
-    Panel: props => <div {...props} />,
+    Panel: (props) => <div {...props} />,
     toggle: jest.fn(),
     radio: jest.fn(),
-    dropdown: jest.fn()
+    dropdown: jest.fn(),
   },
   layout: {
-    ConfigLayout: props => <div>{props.children}</div>
-  }
+    ConfigLayout: (props) => <div>{props.children}</div>,
+  },
 }));
 
 describe('ImageContainer', () => {
@@ -25,7 +25,7 @@ describe('ImageContainer', () => {
       classes: {},
       imageUrl: 'url',
       onUpdateImageDimension,
-      onImageUpload
+      onImageUpload,
     };
     wrapper = () => shallow(<ImageContainer {...props} />);
   });
@@ -73,30 +73,32 @@ describe('ImageContainer', () => {
       w.instance().handleOnDrop({
         preventDefault: jest.fn(),
         dataTransfer: {
-          items: [{
-            kind: 'file',
-            getAsFile: jest.fn().mockReturnValue({ type: 'image', key: 'item' })
-          }
+          items: [
+            {
+              kind: 'file',
+              getAsFile: jest.fn().mockReturnValue({ type: 'image', key: 'item' }),
+            },
           ],
-          files: []
-        }
+          files: [],
+        },
       });
 
       expect(onImageUpload).toBeCalledWith({ type: 'image', key: 'item' });
       expect(onImageUpload).toHaveBeenCalledTimes(3);
     });
 
-    it('handleOnDrop calls handleFileRead which doesn\'t call onImageUpload if item is file but not image', () => {
+    it("handleOnDrop calls handleFileRead which doesn't call onImageUpload if item is file but not image", () => {
       w.instance().handleOnDrop({
         preventDefault: jest.fn(),
         dataTransfer: {
-          items: [{
-            kind: 'file',
-            getAsFile: jest.fn().mockReturnValue({ type: 'jpg' })
-          }
+          items: [
+            {
+              kind: 'file',
+              getAsFile: jest.fn().mockReturnValue({ type: 'jpg' }),
+            },
           ],
-          files: []
-        }
+          files: [],
+        },
       });
 
       // same times number as in previous test, meaning that is was not called again
@@ -107,30 +109,32 @@ describe('ImageContainer', () => {
       w.instance().handleOnDrop({
         preventDefault: jest.fn(),
         dataTransfer: {
-          items: [{
-            kind: 'something else',
-            getAsFile: jest.fn().mockReturnValue({ type: 'image' })
-          }
+          items: [
+            {
+              kind: 'something else',
+              getAsFile: jest.fn().mockReturnValue({ type: 'image' }),
+            },
           ],
-          files: [{ type: 'image', key: 'file' }]
-        }
+          files: [{ type: 'image', key: 'file' }],
+        },
       });
 
       expect(onImageUpload).toBeCalledWith({ type: 'image', key: 'file' });
       expect(onImageUpload).toHaveBeenCalledTimes(4);
     });
 
-    it('handleOnDrop calls handleFileRead which doesn\'t call onImageUpload if item is not file and file is not image', () => {
+    it("handleOnDrop calls handleFileRead which doesn't call onImageUpload if item is not file and file is not image", () => {
       w.instance().handleOnDrop({
         preventDefault: jest.fn(),
         dataTransfer: {
-          items: [{
-            kind: 'something else',
-            getAsFile: jest.fn().mockReturnValue({ type: 'image' })
-          }
+          items: [
+            {
+              kind: 'something else',
+              getAsFile: jest.fn().mockReturnValue({ type: 'image' }),
+            },
           ],
-          files: [{ type: 'something else', key: 'file' }]
-        }
+          files: [{ type: 'something else', key: 'file' }],
+        },
       });
 
       // same times number as in previous test, meaning that is was not called again
@@ -138,16 +142,20 @@ describe('ImageContainer', () => {
     });
 
     it('handleOnImageLoad calls onUpdateImageDimension', () => {
-      w.instance().handleOnImageLoad({ target: { offsetHeight: 50, offsetWidth: 50 }});
+      w.instance().handleOnImageLoad({
+        target: { offsetHeight: 50, offsetWidth: 50, naturalWidth: 50, naturalHeight: 50 },
+      });
 
       expect(onUpdateImageDimension).toHaveBeenCalledWith({
         height: 50,
-        width: 50
+        width: 50,
       });
     });
 
     it('stopResizing calls onUpdateImageDimension', () => {
-      w.instance().handleOnImageLoad({ target: { offsetHeight: 50, offsetWidth: 50 }});
+      w.instance().handleOnImageLoad({
+        target: { offsetHeight: 50, offsetWidth: 50, naturalWidth: 50, naturalHeight: 50 },
+      });
 
       expect(onUpdateImageDimension).toHaveBeenCalledWith(w.instance().state.dimensions);
     });
@@ -157,4 +165,3 @@ describe('ImageContainer', () => {
     });
   });
 });
-

package/configure/src/__tests__/index.test.js

@@ -4,13 +4,13 @@ import { shallow } from 'enzyme';
 
 jest.mock('@pie-lib/config-ui', () => ({
   choiceUtils: {
-    firstAvailableIndex: jest.fn()
+    firstAvailableIndex: jest.fn(),
   },
   settings: {
-    Panel: props => <div {...props} />,
+    Panel: (props) => <div {...props} />,
     toggle: jest.fn(),
-    radio: jest.fn()
-  }
+    radio: jest.fn(),
+  },
 }));
 
 const model = () => ({
@@ -19,12 +19,12 @@ const model = () => ({
   imageUrl: '',
   imageDimensions: {
     height: 0,
-    width: 0
-  }
+    width: 0,
+  },
 });
 
 jest.mock('react-dom', () => ({
-  render: jest.fn()
+  render: jest.fn(),
 }));
 
 describe('index', () => {

package/configure/src/__tests__/root.test.jsx

@@ -6,14 +6,14 @@ import defaults from '../defaults';
 
 jest.mock('@pie-lib/config-ui', () => ({
   settings: {
-    Panel: props => <div {...props} />,
+    Panel: (props) => <div {...props} />,
     toggle: jest.fn(),
     radio: jest.fn(),
-    dropdown: jest.fn()
+    dropdown: jest.fn(),
   },
   layout: {
-    ConfigLayout: props => <div>{props.children}</div>
-  }
+    ConfigLayout: (props) => <div>{props.children}</div>,
+  },
 }));
 
 const model = {
@@ -22,8 +22,8 @@ const model = {
   imageUrl: '',
   imageDimensions: {
     height: 100,
-    width: 100
-  }
+    width: 100,
+  },
 };
 
 describe('Root', () => {
@@ -58,37 +58,37 @@ describe('Root', () => {
     it('onPromptChanged calls onModelChanged', () => {
       w.instance().onPromptChanged('New Prompt');
 
-      expect(onModelChanged).toHaveBeenCalledWith(
-          expect.objectContaining({ prompt: 'New Prompt' }))
+      expect(onModelChanged).toHaveBeenCalledWith(expect.objectContaining({ prompt: 'New Prompt' }));
     });
 
     it('onTeacherInstructionsChanged calls onModelChanged', () => {
       w.instance().onTeacherInstructionsChanged('New Teacher Instructions');
 
       expect(onModelChanged).toHaveBeenCalledWith(
-          expect.objectContaining({ teacherInstructions: 'New Teacher Instructions' }))
+        expect.objectContaining({ teacherInstructions: 'New Teacher Instructions' }),
+      );
     });
 
     it('onUpdateImageDimension calls onModelChanged', () => {
       w.instance().onUpdateImageDimension({
         height: 200,
-        width: 200
+        width: 200,
       });
 
       expect(onModelChanged).toHaveBeenCalledWith(
-          expect.objectContaining({ imageDimensions: {
-              height: 200,
-              width: 200
-            }
-          }))
+        expect.objectContaining({
+          imageDimensions: {
+            height: 200,
+            width: 200,
+          },
+        }),
+      );
     });
 
     it('onImageUpload calls onModelChanged', () => {
       w.instance().onImageUpload('url');
 
-      expect(onModelChanged).toHaveBeenCalledWith(
-          expect.objectContaining({ imageUrl: 'url' }))
+      expect(onModelChanged).toHaveBeenCalledWith(expect.objectContaining({ imageUrl: 'url' }));
     });
   });
 });
-

package/configure/src/button.jsx

@@ -22,20 +22,20 @@ RawButton.propTypes = {
   className: PropTypes.string,
   disabled: PropTypes.bool,
   label: PropTypes.string,
-  onClick: PropTypes.func
+  onClick: PropTypes.func,
 };
 
 RawButton.defaultProps = {
   className: '',
   disabled: false,
   label: 'Add',
-  onClick: () => {}
+  onClick: () => {},
 };
 
 const styles = () => ({
   addButton: {
-    marginLeft: 8
-  }
+    marginLeft: 8,
+  },
 });
 
 const ButtonStyled = withStyles(styles)(RawButton);

package/configure/src/defaults.js

@@ -4,26 +4,45 @@ export default {
     imageUrl: '',
     imageDimensions: {
       height: 0,
-      width: 0
+      width: 0,
     },
     promptEnabled: true,
     teacherInstructionsEnabled: true,
     studentInstructionsEnabled: true,
+    backgroundImageEnabled: true,
+    spellCheckEnabled: true,
     toolbarEditorPosition: 'bottom',
   },
   configuration: {
+    spellCheck: {
+      label: 'Spellcheck',
+      settings: false,
+      enabled: true,
+    },
     backgroundImage: {
       settings: true,
       label: 'Background Image',
-      enabled: true
     },
     prompt: {
       settings: true,
-      label: 'Prompt'
+      label: 'Prompt',
     },
+    settingsPanelDisabled: false,
     teacherInstructions: {
       settings: true,
       label: 'Teacher Instructions',
-    }
-  }
+    },
+    maxImageWidth: {
+      teacherInstructions: 300,
+      prompt: 300,
+    },
+    maxImageHeight: {
+      teacherInstructions: 300,
+      prompt: 300,
+    },
+    withRubric: {
+      settings: false,
+      label: 'Add Rubric',
+    },
+  },
 };

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);