@pie-element/drawing-response 3.7.2 → 3.7.3-next.1016

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