@pie-element/drawing-response 3.7.3-next.135 → 3.7.3-next.1353

package/src/drawing-response/__tests__/__snapshots__/drawing-main.test.jsx.snap

@@ -26,7 +26,12 @@ exports[`DrawingResponse DrawableMain snapshot renders 1`] = `
   </div>
   <div>
     <WithStyles(DrawableImage)
-      dimensions={Object {}}
+      dimensions={
+        Object {
+          "height": NaN,
+          "width": NaN,
+        }
+      }
       url="url"
     />
     <ForwardRef
@@ -34,6 +39,8 @@ exports[`DrawingResponse DrawableMain snapshot renders 1`] = `
       height={350}
       onMouseMove={[Function]}
       onMouseUp={[Function]}
+      onTouchEnd={[Function]}
+      onTouchMove={[Function]}
       width={353}
     >
       <Layer />
@@ -58,7 +65,12 @@ exports[`DrawingResponse DrawableMain snapshot renders disabled 1`] = `
   </div>
   <div>
     <WithStyles(DrawableImage)
-      dimensions={Object {}}
+      dimensions={
+        Object {
+          "height": NaN,
+          "width": NaN,
+        }
+      }
       url="url"
     />
     <ForwardRef
@@ -83,9 +95,13 @@ exports[`DrawingResponse DrawableText snapshot renders 1`] = `
     name="text_gcifqhhimf8k2d6g8hs"
     onClick={[Function]}
     onDblClick={[Function]}
+    onDblTap={[Function]}
     onDragEnd={[MockFunction]}
     onMouseDown={[Function]}
     onMouseUp={[Function]}
+    onTap={[Function]}
+    onTouchEnd={[Function]}
+    onTouchStart={[Function]}
     onTransform={[Function]}
     onTransformEnd={[MockFunction]}
     text="Double click to edit this text. Press Enter to submit."
@@ -98,6 +114,8 @@ exports[`DrawingResponse DrawableText snapshot renders 1`] = `
     key="transformer_gcifqhhimf8k2d6g8hs"
     onMouseDown={[Function]}
     onMouseUp={[Function]}
+    onTouchEnd={[Function]}
+    onTouchStart={[Function]}
     selectedShapeName="text_gcifqhhimf8k2d6g8hs"
   />
 </div>
@@ -127,9 +145,13 @@ exports[`DrawingResponse DrawableText snapshot when there is no value renders 1`
     name="text_gcifqhhimf8k2d6g8hs"
     onClick={[Function]}
     onDblClick={[Function]}
+    onDblTap={[Function]}
     onDragEnd={[MockFunction]}
     onMouseDown={[Function]}
     onMouseUp={[Function]}
+    onTap={[Function]}
+    onTouchEnd={[Function]}
+    onTouchStart={[Function]}
     onTransform={[Function]}
     onTransformEnd={[MockFunction]}
     text="Double click to edit this text. Press Enter to submit."
@@ -142,6 +164,8 @@ exports[`DrawingResponse DrawableText snapshot when there is no value renders 1`
     key="transformer_gcifqhhimf8k2d6g8hs"
     onMouseDown={[Function]}
     onMouseUp={[Function]}
+    onTouchEnd={[Function]}
+    onTouchStart={[Function]}
     selectedShapeName="text_gcifqhhimf8k2d6g8hs"
   />
 </div>

package/src/drawing-response/__tests__/container.test.jsx

@@ -1,5 +1,12 @@
 import { shallow } from 'enzyme';
 import React from 'react';
+
+global.MutationObserver = class {
+  constructor(callback) {}
+  disconnect() {}
+  observe(element, initObject) {}
+};
+
 import { Container } from '../container';
 
 beforeEach(() => {

package/src/drawing-response/__tests__/drawing-main.test.jsx

@@ -507,7 +507,8 @@ describe('DrawingResponse', () => {
         startx: 200,
         starty: 200,
         x: 300,
-        y: 300
+        y: 300,
+        scale: 1
       };
       wrapper = mkWrapper('DrawableText', props, 'div');
     });

package/src/drawing-response/container.jsx

@@ -29,7 +29,8 @@ export class Container extends Component {
     session: PropTypes.object.isRequired,
     onSessionChange: PropTypes.func.isRequired,
     imageDimensions: PropTypes.object.isRequired,
-    imageUrl: PropTypes.string.isRequired
+    imageUrl: PropTypes.string.isRequired,
+    backgroundImageEnabled: PropTypes.bool.isRequired
   };
 
   constructor(props) {
@@ -37,6 +38,7 @@ export class Container extends Component {
     const TextEntry = new DrawableText();
 
     this.state = {
+      scale: 1,
       drawableDimensions: {
         height: 0,
         width: 0
@@ -80,12 +82,42 @@ export class Container extends Component {
 
   componentDidMount() {
     this.setDimensions();
+
+    this.observer = new MutationObserver((mutations) => {
+      mutations.forEach(() => {
+        const target = document.getElementById('question-container')?.style?.cssText
+        const zoom = target?.substring(
+          target.indexOf('--pie-zoom') + 11,
+          target.lastIndexOf('%')
+        );
+        const zoomParsed = zoom?.replace(/\s/g, '');
+
+      if (zoomParsed) {
+          const newScale = parseFloat(zoomParsed) / 100;
+          if (newScale !== this.state.scale) {
+            this.setState({
+              scale: parseFloat(zoomParsed) / 100,
+            })
+          }
+        } else if (!zoomParsed && this.state.scale !== 1) {
+          this.setState({
+            scale: 1,
+          });
+        }
+      });
+    });
+
+    const target = document.getElementById('question-container');
+    if (target) {
+      this.observer.observe(target, { attributes : true, attributeFilter : ['style'] })
+    }
   }
 
   componentWillUnmount() {
     const { TextEntry } = this.state;
 
     TextEntry.removeEventListeners();
+    this.observer?.disconnect();
   }
 
   handleMakeToolActive(tool) {
@@ -131,7 +163,8 @@ export class Container extends Component {
       imageUrl,
       imageDimensions,
       onSessionChange,
-      session
+      session,
+      backgroundImageEnabled
     } = this.props;
     const {
       drawableDimensions,
@@ -145,39 +178,41 @@ export class Container extends Component {
       TextEntry
     } = this.state;
 
+    const heightToUse = drawableDimensions.height * this.state.scale;
+
     return (
       <div className={classes.base}>
-        <DrawablePalette
-          fillColor={fillColor}
-          fillList={fillColorList}
-          outlineColor={outlineColor}
-          outlineList={outlineColorList}
-          paintColor={paintColor}
-          paintList={paintColorList}
-          onFillColorChange={color => this.handleColorChange('fill', color)}
-          onOutlineColorChange={color =>
-            this.handleColorChange('outline', color)
-          }
-          onPaintColorChange={color => this.handleColorChange('paint', color)}
-        />
+        {!disabled &&
+          <DrawablePalette
+            fillColor={fillColor}
+            fillList={fillColorList}
+            outlineColor={outlineColor}
+            outlineList={outlineColorList}
+            paintColor={paintColor}
+            paintList={paintColorList}
+            onFillColorChange={color => this.handleColorChange('fill', color)}
+            onOutlineColorChange={color =>
+              this.handleColorChange('outline', color)
+            }
+            onPaintColorChange={color => this.handleColorChange('paint', color)}
+          />
+        }
 
         <div className={classes.box}>
           <div className={classes.toolbar}>
-            <div>
-              {TOOLS.map(tool => {
-                const { type, label, icon } = tool;
-
-                return (
-                  <Button
-                    title={label}
-                    key={type}
-                    disabled={this.checkIfToolIsDisabled(type)}
-                    onClick={() => this.handleMakeToolActive(tool)}
-                    label={<Icon path={icon} />}
-                  />
-                );
-              })}
-            </div>
+            {TOOLS.map(tool => {
+              const { type, label, icon } = tool;
+
+              return (
+                <Button
+                  title={label}
+                  key={type}
+                  disabled={this.checkIfToolIsDisabled(type)}
+                  onClick={() => this.handleMakeToolActive(tool)}
+                  label={<Icon path={icon} />}
+                />
+              );
+            })}
           </div>
 
           <div
@@ -185,8 +220,10 @@ export class Container extends Component {
               this.drawable = drawable;
             }}
             className={classes.drawableHeight}
+            style={{ height: heightToUse, maxHeight: heightToUse }}
           >
             <DrawableMain
+              scale={this.state.scale}
               session={session}
               disabled={disabled}
               onSessionChange={onSessionChange}
@@ -198,6 +235,7 @@ export class Container extends Component {
               imageDimensions={imageDimensions}
               toolActive={toolActive}
               TextEntry={TextEntry}
+              backgroundImageEnabled={backgroundImageEnabled}
             />
           </div>
         </div>
@@ -213,19 +251,23 @@ const styles = theme => ({
   box: {
     border: '1px solid #E0E1E6',
     borderRadius: '5px',
-    marginTop: theme.spacing.unit * 2
+    marginTop: theme.spacing.unit * 2,
+    backgroundColor: '#ECEDF1'
   },
   drawableHeight: {
-    minHeight: 350
+    minHeight: 350,
+    backgroundColor: '#fff'
   },
   toolbar: {
-    backgroundColor: '#ECEDF1',
     borderBottom: '1px solid #E0E1E6',
     borderTopLeftRadius: '5px',
     borderTopRightRadius: '5px',
-    display: 'flex',
-    justifyContent: 'space-between',
-    padding: '12px 8px'
+    padding: '12px 8px 4px',
+    boxSizing: 'border-box',
+    maxWidth: 'calc(100% - 163px)', // 163px is the width set on undoControls
+    '& button': {
+      marginBottom: '8px'
+    }
   }
 });
 

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

@@ -5,6 +5,7 @@ import { withStyles } from '@material-ui/core/styles';
 const DrawableImage = ({ classes, url, dimensions: { height, width } }) => (
   <div className={classes.imageContainer}>
     <img
+      alt="drawing-response-image"
       className={classes.image}
       src={url}
       style={{

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

@@ -89,14 +89,18 @@ export class DrawableMain extends React.Component {
   onMouseOutElement = () => this.setState({ isOver: false });
 
   handleMouseDown = e => {
+    // ONLY IF MOBILE?
+    document.body.style.overflow = 'hidden';
+
     const { newDrawable, textIsSelected } = this.state;
-    const { toolActive, fillColor, outlineColor } = this.props;
+    const { toolActive, fillColor, outlineColor, scale } = this.props;
 
     if (newDrawable.length === 0 && !textIsSelected) {
       const { x, y } = e.target.getStage().getPointerPosition();
+
       const newDrawable = factory(toolActive.type, {
-        startx: x,
-        starty: y,
+        startx: x / scale,
+        starty: y / scale,
         fillColor,
         outlineColor,
         createdAt: new Date()
@@ -109,13 +113,17 @@ export class DrawableMain extends React.Component {
   };
 
   handleMouseUp = e => {
+    // ONLY IF MOBILE?
+    document.body.style.overflow = 'initial';
+
     const { newDrawable, drawables } = this.state;
+    const { scale } = this.props;
 
     if (newDrawable.length === 1) {
       const { x, y } = e.target.getStage().getPointerPosition();
       const drawableToAdd = newDrawable[0];
 
-      drawableToAdd.registerMovement(x, y);
+      drawableToAdd.registerMovement(x / scale, y / scale);
       drawables.push(drawableToAdd);
 
       this.setState(
@@ -130,12 +138,13 @@ export class DrawableMain extends React.Component {
 
   handleMouseMove = e => {
     const { newDrawable } = this.state;
+    const { scale } = this.props;
 
     if (newDrawable.length === 1) {
       const { x, y } = e.target.getStage().getPointerPosition();
       const updatedNewDrawable = newDrawable[0];
 
-      updatedNewDrawable.registerMovement(x, y);
+      updatedNewDrawable.registerMovement(x / scale, y / scale);
 
       this.setState({
         newDrawable: [updatedNewDrawable]
@@ -185,7 +194,9 @@ export class DrawableMain extends React.Component {
       paintColor,
       outlineColor,
       TextEntry,
-      toolActive: { type }
+      backgroundImageEnabled = true,
+      toolActive: { type },
+      scale
     } = this.props;
     const { isOver, newDrawable } = this.state;
 
@@ -205,7 +216,8 @@ export class DrawableMain extends React.Component {
       handleSessionChange: this.handleSessionChange,
       stage: this.stage,
       onMouseOverElement: this.onMouseOverElement,
-      onMouseOutElement: this.onMouseOutElement
+      onMouseOutElement: this.onMouseOutElement,
+      scale
     };
 
     let listeners = {};
@@ -213,35 +225,45 @@ export class DrawableMain extends React.Component {
     if (!disabled) {
       listeners = {
         onMouseUp: this.handleMouseUp,
-        onMouseMove: this.handleMouseMove
+        onTouchEnd: this.handleMouseUp,
+        onMouseMove: this.handleMouseMove,
+        onTouchMove: this.handleMouseMove,
       };
 
       if (!draggable) {
         listeners.onMouseDown = this.handleMouseDown;
+        listeners.onTouchStart = this.handleMouseDown;
       }
     }
 
+    const imageHeight = imageDimensions?.height * scale;
+    const imageWidth = imageDimensions?.width * scale;
+
     return (
-      <div>
+      <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}>
-          {imageUrl && (
-            <ImageBackground dimensions={imageDimensions} url={imageUrl} />
+          {backgroundImageEnabled && imageUrl && (
+            <ImageBackground
+              dimensions={{ height: imageHeight, width: imageWidth }}
+              url={imageUrl}/>
           )}
 
           {TextEntry.renderTextareas()}
 
           <Stage
+            scaleX={scale}
+            scaleY={scale}
             ref={ref => {
               this.stage = ref;
             }}
             className={classnames(classes.stage, {
               [classes.active]:
-                draggable &&
-                (isOver || (newDrawable && newDrawable.length === 1))
+              draggable &&
+              (isOver || (newDrawable && newDrawable.length === 1))
             })}
             height={drawableDimensions.height}
             width={drawableDimensions.width}
@@ -266,6 +288,11 @@ export class DrawableMain extends React.Component {
 }
 
 const styles = () => ({
+  wrapper: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    justifyContent: 'flex-end'
+  },
   base: {
     position: 'relative',
     width: '100%'
@@ -279,7 +306,6 @@ const styles = () => ({
     cursor: 'pointer'
   },
   undoControls: {
-    float: 'right',
     marginTop: -43,
     width: 163
   }
@@ -297,7 +323,9 @@ DrawableMain.propTypes = {
   imageUrl: PropTypes.string.isRequired,
   TextEntry: PropTypes.object.isRequired,
   toolActive: PropTypes.object.isRequired,
-  session: PropTypes.object.isRequired
+  session: PropTypes.object.isRequired,
+  backgroundImageEnabled: PropTypes.bool.isRequired,
+  scale: PropTypes.number.isRequired
 };
 
 export default withStyles(styles)(DrawableMain);

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

@@ -193,7 +193,7 @@ export default class TextDrawable {
   handleTransform = (e, textNode) => {
     this[textNode].setAttrs({
       width: this[textNode].width() * this[textNode].scaleX(),
-      scaleX: 1
+      scaleX: this.props.scale,
     });
   };
 
@@ -266,11 +266,15 @@ export default class TextDrawable {
       if (!props.disabled) {
         extraProps = {
           onClick: e => this.handleClick(e, id),
+          onTap: e => this.handleClick(e, id),
           onDblClick: e => this.handleDblClick(e, text),
+          onDblTap: e => this.handleDblClick(e, text),
           onTransform: e => this.handleTransform(e, textNode),
           onTransformEnd: this.props.handleSessionChange,
           onMouseDown: this.handleMouseDown,
+          onTouchStart: this.handleMouseDown,
           onMouseUp: this.handleMouseUp,
+          onTouchEnd: this.handleMouseUp,
           onDragEnd: this.props.handleSessionChange,
           onMouseEnter: this.props.onMouseOverElement,
           onMouseLeave: this.props.onMouseOutElement,
@@ -307,7 +311,9 @@ export default class TextDrawable {
             }}
             selectedShapeName={textNode}
             onMouseDown={this.handleMouseDown}
+            onTouchStart={this.handleMouseDown}
             onMouseUp={this.handleMouseUp}
+            onTouchEnd={this.handleMouseUp}
           />
         )
       ];

package/src/drawing-response/index.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Typography from '@material-ui/core/Typography';
-import { Collapsible } from '@pie-lib/render-ui';
+import {Collapsible, PreviewPrompt} from '@pie-lib/render-ui';
 import { withStyles } from '@material-ui/core/styles';
 
 import Container from './container';
@@ -27,7 +27,8 @@ class DrawingResponseComponent extends React.Component {
         imageUrl,
         prompt,
         mode,
-        teacherInstructions
+        teacherInstructions,
+        backgroundImageEnabled = true
       },
       session,
       onSessionChange,
@@ -48,14 +49,14 @@ class DrawingResponseComponent extends React.Component {
                 visible: 'Hide Teacher Instructions'
               }}
             >
-              <div dangerouslySetInnerHTML={{ __html: teacherInstructions }} />
+              <PreviewPrompt prompt={teacherInstructions} />
             </Collapsible>
             <br />
           </React.Fragment>
         )}
 
         <Typography className={classes.prompt}>
-          <span dangerouslySetInnerHTML={{ __html: prompt }} />
+          <PreviewPrompt tagName="span" prompt={prompt} />
         </Typography>
 
         <Container
@@ -64,6 +65,7 @@ class DrawingResponseComponent extends React.Component {
           isEvaluateMode={isEvaluateMode}
           imageDimensions={imageDimensions}
           imageUrl={imageUrl}
+          backgroundImageEnabled={backgroundImageEnabled}
           disabled={disabled}
         />
       </div>

package/src/index.js

@@ -40,6 +40,10 @@ export default class DrawingResponse extends HTMLElement {
     this._render();
   }
 
+  get session() {
+    return this._session;
+  }
+
   connectedCallback() {
     this._render();
   }
@@ -51,6 +55,7 @@ export default class DrawingResponse extends HTMLElement {
         session: this._session,
         onSessionChange: this.sessionChanged
       });
+
       ReactDOM.render(el, this, () => {
         renderMath(this);
       });