@pie-element/drawing-response 6.0.1-next.2 → 6.0.1-next.39

package/src/drawing-response/drawable-main.jsx

@@ -17,7 +17,7 @@ export class DrawableMain extends React.Component {
     this.state = {
       drawables: [],
       newDrawable: [],
-      textIsSelected: false
+      textIsSelected: false,
     };
   }
 
@@ -29,27 +29,20 @@ export class DrawableMain extends React.Component {
       if (nextProps.session.drawables) {
         const newDrawables = cloneDeep(nextProps.session.drawables);
         const drawablesString = JSON.stringify(currentDrawables);
-        const sessionDrawableString = JSON.stringify(
-          (newDrawables || []).map(drawable => omit(drawable, 'type'))
-        );
+        const sessionDrawableString = JSON.stringify((newDrawables || []).map((drawable) => omit(drawable, 'type')));
 
         if (drawablesString !== sessionDrawableString) {
           const drawableArray = nextProps.session.drawables;
 
           this.setState({
-            drawables: drawableArray.map(drawable =>
-              factory(drawable.type, drawable)
-            )
+            drawables: drawableArray.map((drawable) => factory(drawable.type, drawable)),
           });
         }
 
-        const currentTexts = TextEntry.all.map(text => ({
+        const currentTexts = TextEntry.all.map((text) => ({
           ...text,
-          ...(TextEntry[`text_${text.id}`] &&
-            TextEntry[`text_${text.id}`].attrs),
-          value:
-            TextEntry[`textarea_${text.id}`] &&
-            TextEntry[`textarea_${text.id}`].value
+          ...(TextEntry[`text_${text.id}`] && TextEntry[`text_${text.id}`].attrs),
+          value: TextEntry[`textarea_${text.id}`] && TextEntry[`textarea_${text.id}`].value,
         }));
 
         if (!isEqual(currentTexts, nextProps.session.texts)) {
@@ -66,20 +59,18 @@ export class DrawableMain extends React.Component {
     const { drawables } = this.state;
 
     const newSession = {
-      drawables: drawables.map(d => d.toJson()),
-      texts: TextEntry.all.map(text => ({
+      drawables: drawables.map((d) => d.toJson()),
+      texts: TextEntry.all.map((text) => ({
         ...text,
         ...(TextEntry[`text_${text.id}`] && TextEntry[`text_${text.id}`].attrs),
-        value:
-          TextEntry[`textarea_${text.id}`] &&
-          TextEntry[`textarea_${text.id}`].value
-      }))
+        value: TextEntry[`textarea_${text.id}`] && TextEntry[`textarea_${text.id}`].value,
+      })),
     };
 
     if (!isEqual(newSession, session)) {
       onSessionChange({
         ...session,
-        ...newSession
+        ...newSession,
       });
     }
   };
@@ -88,7 +79,7 @@ export class DrawableMain extends React.Component {
 
   onMouseOutElement = () => this.setState({ isOver: false });
 
-  handleMouseDown = e => {
+  handleMouseDown = (e) => {
     // ONLY IF MOBILE?
     document.body.style.overflow = 'hidden';
 
@@ -103,16 +94,16 @@ export class DrawableMain extends React.Component {
         starty: y / scale,
         fillColor,
         outlineColor,
-        createdAt: new Date()
+        createdAt: new Date(),
       });
 
       this.setState({
-        newDrawable: [newDrawable]
+        newDrawable: [newDrawable],
       });
     }
   };
 
-  handleMouseUp = e => {
+  handleMouseUp = (e) => {
     // ONLY IF MOBILE?
     document.body.style.overflow = 'initial';
 
@@ -129,14 +120,14 @@ export class DrawableMain extends React.Component {
       this.setState(
         {
           newDrawable: [],
-          drawables
+          drawables,
         },
-        this.handleSessionChange.bind(this, drawableToAdd)
+        this.handleSessionChange.bind(this, drawableToAdd),
       );
     }
   };
 
-  handleMouseMove = e => {
+  handleMouseMove = (e) => {
     const { newDrawable } = this.state;
     const { scale } = this.props;
 
@@ -147,7 +138,7 @@ export class DrawableMain extends React.Component {
       updatedNewDrawable.registerMovement(x / scale, y / scale);
 
       this.setState({
-        newDrawable: [updatedNewDrawable]
+        newDrawable: [updatedNewDrawable],
       });
     }
   };
@@ -175,13 +166,10 @@ export class DrawableMain extends React.Component {
     const { TextEntry } = this.props;
 
     TextEntry.all = [];
-    this.setState(
-      { drawables: [], updatedAt: new Date() },
-      this.handleSessionChange
-    );
+    this.setState({ drawables: [], updatedAt: new Date() }, this.handleSessionChange);
   };
 
-  toggleTextSelected = textIsSelected => this.setState({ textIsSelected });
+  toggleTextSelected = (textIsSelected) => this.setState({ textIsSelected });
 
   render() {
     const {
@@ -196,7 +184,7 @@ export class DrawableMain extends React.Component {
       TextEntry,
       backgroundImageEnabled = true,
       toolActive: { type },
-      scale
+      scale,
     } = this.props;
     const { isOver, newDrawable } = this.state;
 
@@ -217,7 +205,7 @@ export class DrawableMain extends React.Component {
       stage: this.stage,
       onMouseOverElement: this.onMouseOverElement,
       onMouseOutElement: this.onMouseOutElement,
-      scale
+      scale,
     };
 
     let listeners = {};
@@ -242,14 +230,12 @@ export class DrawableMain extends React.Component {
     return (
       <div className={classes.wrapper}>
         <div className={classes.undoControls}>
-          <Button disabled={disabled} onClick={this.handleUndo} label="Undo"/>
-          <Button disabled={disabled} onClick={this.handleClearAll} label="Clear all"/>
+          <Button disabled={disabled} onClick={this.handleUndo} label="Undo" />
+          <Button disabled={disabled} onClick={this.handleClearAll} label="Clear all" />
         </div>
         <div className={classes.base}>
           {backgroundImageEnabled && imageUrl && (
-            <ImageBackground
-              dimensions={{ height: imageHeight, width: imageWidth }}
-              url={imageUrl}/>
+            <ImageBackground dimensions={{ height: imageHeight, width: imageWidth }} url={imageUrl} />
           )}
 
           {TextEntry.renderTextareas()}
@@ -257,26 +243,22 @@ export class DrawableMain extends React.Component {
           <Stage
             scaleX={scale}
             scaleY={scale}
-            ref={ref => {
+            ref={(ref) => {
               this.stage = ref;
             }}
             className={classnames(classes.stage, {
-              [classes.active]:
-              draggable &&
-              (isOver || (newDrawable && newDrawable.length === 1))
+              [classes.active]: draggable && (isOver || (newDrawable && newDrawable.length === 1)),
             })}
             height={drawableDimensions.height}
             width={drawableDimensions.width}
             {...listeners}
           >
             <Layer
-              ref={ref => {
+              ref={(ref) => {
                 this.layer = ref;
               }}
             >
-              {drawables.map((drawable, key) =>
-                drawable.render({ ...drawableProps, key })
-              )}
+              {drawables.map((drawable, key) => drawable.render({ ...drawableProps, key }))}
               {/* Text Entry is a special case  */}
               {TextEntry.render(drawableProps)}
             </Layer>
@@ -291,25 +273,25 @@ const styles = () => ({
   wrapper: {
     display: 'flex',
     flexWrap: 'wrap',
-    justifyContent: 'flex-end'
+    justifyContent: 'flex-end',
   },
   base: {
     position: 'relative',
-    width: '100%'
+    width: '100%',
   },
   stage: {
     left: 0,
     position: 'absolute',
     touchAction: 'none',
-    top: 0
+    top: 0,
   },
   active: {
-    cursor: 'pointer'
+    cursor: 'pointer',
   },
   undoControls: {
     marginTop: -43,
-    width: 163
-  }
+    width: 172,
+  },
 });
 
 DrawableMain.propTypes = {
@@ -326,7 +308,7 @@ DrawableMain.propTypes = {
   toolActive: PropTypes.object.isRequired,
   session: PropTypes.object.isRequired,
   backgroundImageEnabled: PropTypes.bool.isRequired,
-  scale: PropTypes.number.isRequired
+  scale: PropTypes.number.isRequired,
 };
 
 export default withStyles(styles)(DrawableMain);

package/src/drawing-response/index.jsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Typography from '@material-ui/core/Typography';
 import { Collapsible, PreviewPrompt } from '@pie-lib/render-ui';
 import { withStyles } from '@material-ui/core/styles';
 
@@ -34,22 +33,18 @@ class DrawingResponseComponent extends React.Component {
     ) : (
       <div>
         {teacherInstructions && (
-          <React.Fragment>
-            <Collapsible
-              labels={{
-                hidden: 'Show Teacher Instructions',
-                visible: 'Hide Teacher Instructions',
-              }}
-            >
-              <PreviewPrompt prompt={teacherInstructions} />
-            </Collapsible>
-            <br />
-          </React.Fragment>
+          <Collapsible
+            className={classes.collapsible}
+            labels={{
+              hidden: 'Show Teacher Instructions',
+              visible: 'Hide Teacher Instructions',
+            }}
+          >
+            <PreviewPrompt prompt={teacherInstructions} />
+          </Collapsible>
         )}
 
-        <Typography className={classes.prompt}>
-          <PreviewPrompt tagName="span" prompt={prompt} />
-        </Typography>
+        {prompt && <PreviewPrompt tagName="span" prompt={prompt} />}
 
         <Container
           session={session}
@@ -72,9 +67,9 @@ DrawingResponseComponent.propTypes = {
   session: PropTypes.object.isRequired,
 };
 
-const styles = () => ({
-  prompt: {
-    fontSize: 'inherit',
+const styles = (theme) => ({
+  collapsible: {
+    marginBottom: theme.spacing.unit * 2,
   },
 });