@pie-element/drawing-response 3.9.9 → 3.9.10-beta.1445

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

@@ -3,10 +3,7 @@ import { Text } from 'react-konva';
 
 import Transformer from './drawable-transformer';
 
-export const generateId = () =>
-  Math.random()
-    .toString(36)
-    .substring(2) + new Date().getTime().toString(36);
+export const generateId = () => Math.random().toString(36).substring(2) + new Date().getTime().toString(36);
 
 export default class TextDrawable {
   static getTextareaNode(id) {
@@ -26,10 +23,9 @@ export default class TextDrawable {
     this.eventListenersDetachArray = [];
   }
 
-  removeEventListeners = () =>
-    this.eventListenersDetachArray.forEach(fn => fn());
+  removeEventListeners = () => this.eventListenersDetachArray.forEach((fn) => fn());
 
-  setAll = all => {
+  setAll = (all) => {
     this.all = all;
     this.props.forceUpdate();
   };
@@ -49,14 +45,14 @@ export default class TextDrawable {
       transformerVisible: true,
       textareaVisible: false,
       createdAt: new Date(),
-      type: 'text-entry'
+      type: 'text-entry',
     });
 
     this.props.handleSessionChange();
   };
 
   showOnlyTextNodes() {
-    this.all.map(item => {
+    this.all.map((item) => {
       item.textVisible = true;
       item.transformerVisible = false;
       item.textareaVisible = false;
@@ -64,13 +60,13 @@ export default class TextDrawable {
   }
 
   toggleTextarea(id, value) {
-    this.all = this.all.map(item => {
+    this.all = this.all.map((item) => {
       if (item.id === id) {
         return {
           ...item,
           textVisible: !value,
           transformerVisible: !value,
-          textareaVisible: value
+          textareaVisible: value,
         };
       }
       return item;
@@ -80,7 +76,7 @@ export default class TextDrawable {
 
   initializeDefault(id, isDefault) {
     if (isDefault) {
-      const current = this.all.filter(item => item.id === id)[0];
+      const current = this.all.filter((item) => item.id === id)[0];
       current.isDefault = false;
     }
   }
@@ -89,7 +85,7 @@ export default class TextDrawable {
     if (textareaNode.value) {
       textNode.text(textareaNode.value);
     } else {
-      this.all = this.all.filter(text => text.id !== id);
+      this.all = this.all.filter((text) => text.id !== id);
       this.props.forceUpdate();
     }
 
@@ -100,7 +96,7 @@ export default class TextDrawable {
   handleMouseUp = () => this.props.toggleTextSelected(false);
 
   handleClick = (e, id) => {
-    const current = this.all.filter(item => item.id === id)[0];
+    const current = this.all.filter((item) => item.id === id)[0];
     current.transformerVisible = true;
     this.props.forceUpdate();
   };
@@ -119,8 +115,7 @@ export default class TextDrawable {
     textareaNode.style.top = areaPosition.y + 'px';
     textareaNode.style.left = areaPosition.x + 'px';
     textareaNode.style.width = textNode.width() - textNode.padding() * 2 + 'px';
-    textareaNode.style.height =
-      textNode.height() - textNode.padding() * 2 + 5 + 'px';
+    textareaNode.style.height = textNode.height() - textNode.padding() * 2 + 5 + 'px';
     textareaNode.style.fontSize = textNode.fontSize() + 'px';
     textareaNode.style.border = 'none';
     textareaNode.style.padding = '0px';
@@ -156,7 +151,7 @@ export default class TextDrawable {
 
     textareaNode.focus();
 
-    const keyDownHandler = e => {
+    const keyDownHandler = (e) => {
       // hide on enter but don't hide on shift + enter
       if (e.keyCode === 13 && !e.shiftKey) {
         this.toggleTextarea(id, false);
@@ -171,9 +166,7 @@ export default class TextDrawable {
 
     textareaNode.addEventListener('keydown', keyDownHandler);
 
-    this.eventListenersDetachArray.push(() =>
-      textareaNode.removeEventListener('keydown', keyDownHandler)
-    );
+    this.eventListenersDetachArray.push(() => textareaNode.removeEventListener('keydown', keyDownHandler));
 
     const blurHandler = () => {
       this.showOnlyTextNodes();
@@ -182,9 +175,7 @@ export default class TextDrawable {
 
     textareaNode.addEventListener('blur', blurHandler);
 
-    this.eventListenersDetachArray.push(() =>
-      textareaNode.removeEventListener('blur', blurHandler)
-    );
+    this.eventListenersDetachArray.push(() => textareaNode.removeEventListener('blur', blurHandler));
 
     this.initializeDefault(id, isDefault);
     this.props.forceUpdate();
@@ -193,19 +184,19 @@ export default class TextDrawable {
   handleTransform = (e, textNode) => {
     this[textNode].setAttrs({
       width: this[textNode].width() * this[textNode].scaleX(),
-      scaleX: 1
+      scaleX: this.props.scale,
     });
   };
 
   renderTextareas() {
-    return this.all.map(text => {
+    return this.all.map((text) => {
       const { id, textareaVisible } = text;
       const textareaNode = `textarea_${id}`;
 
       return (
         <textarea
           key={textareaNode}
-          ref={textarea => {
+          ref={(textarea) => {
             this[textareaNode] = textarea;
           }}
           style={{ display: `${textareaVisible ? 'block' : 'none'}` }}
@@ -228,7 +219,7 @@ export default class TextDrawable {
 
       // setting the handler only once
       if (newStage !== this.stage) {
-        const stageClickHandler = e => {
+        const stageClickHandler = (e) => {
           if (e.target !== this.stage) {
             return;
           }
@@ -239,25 +230,14 @@ export default class TextDrawable {
 
         newStage.on('click', stageClickHandler);
 
-        this.eventListenersDetachArray.push(() =>
-          newStage.off('click', stageClickHandler)
-        );
+        this.eventListenersDetachArray.push(() => newStage.off('click', stageClickHandler));
       }
 
       this.stage = newStage;
     }
 
-    return this.all.map(text => {
-      const {
-        id,
-        label,
-        x,
-        y,
-        width,
-        textVisible,
-        rotation,
-        transformerVisible
-      } = text;
+    return this.all.map((text) => {
+      const { id, label, x, y, width, textVisible, rotation, transformerVisible } = text;
 
       const textNode = `text_${id}`;
       const transformerNode = `transformer_${id}`;
@@ -265,16 +245,20 @@ export default class TextDrawable {
 
       if (!props.disabled) {
         extraProps = {
-          onClick: e => this.handleClick(e, id),
-          onDblClick: e => this.handleDblClick(e, text),
-          onTransform: e => this.handleTransform(e, textNode),
+          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,
-        }
+        };
       }
 
       if (rotation) {
@@ -286,7 +270,7 @@ export default class TextDrawable {
           key={id}
           bubbles={true}
           id={id}
-          ref={text => {
+          ref={(text) => {
             this[textNode] = text;
           }}
           text={text.text || label}
@@ -302,14 +286,16 @@ export default class TextDrawable {
         transformerVisible && (
           <Transformer
             key={`transformer_${id}`}
-            ref={text => {
+            ref={(text) => {
               this[transformerNode] = text;
             }}
             selectedShapeName={textNode}
             onMouseDown={this.handleMouseDown}
+            onTouchStart={this.handleMouseDown}
             onMouseUp={this.handleMouseUp}
+            onTouchEnd={this.handleMouseUp}
           />
-        )
+        ),
       ];
     });
   }

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

@@ -35,7 +35,9 @@ class TransformerComponent extends React.Component {
   render() {
     return (
       <Transformer
-        ref={node => { this.transformer = node; }}
+        ref={(node) => {
+          this.transformer = node;
+        }}
         enabledAnchors={['middle-left', 'middle-right']}
         {...this.props}
       />

package/src/drawing-response/factory.js

@@ -4,22 +4,14 @@ import RectangleDrawable from './drawable-rectangle';
 import CircleDrawable from './drawable-circle';
 import EraserDrawable from './drawable-eraser';
 
-const DRAWABLES = [
-  FreePathDrawable,
-  LineDrawable,
-  RectangleDrawable,
-  CircleDrawable,
-  EraserDrawable
-];
+const DRAWABLES = [FreePathDrawable, LineDrawable, RectangleDrawable, CircleDrawable, EraserDrawable];
 
 export default (type, props) => {
-  const T = DRAWABLES.find(D => D.TYPE === type);
+  const T = DRAWABLES.find((D) => D.TYPE === type);
 
   if (T) {
     return new T(props);
   }
 
-  throw new Error(
-    `Can't find drawable for type: ${type} and props: ${JSON.stringify(props)}`
-  );
+  throw new Error(`Can't find drawable for type: ${type} and props: ${JSON.stringify(props)}`);
 };

package/src/drawing-response/icon.jsx

@@ -9,7 +9,7 @@ import {
   mdiCircle,
   mdiFormatColorText,
   mdiFormatColorFill,
-  mdiEraser
+  mdiEraser,
 } from '@mdi/js';
 
 const IconWrapper = ({ path }) => {
@@ -17,37 +17,36 @@ const IconWrapper = ({ path }) => {
 
   switch (path) {
     case 'mdiPencil':
-      iconPath = mdiPencil; break;
+      iconPath = mdiPencil;
+      break;
     case 'mdiMinus':
-      iconPath = mdiMinus; break;
+      iconPath = mdiMinus;
+      break;
     case 'mdiCircle':
-      iconPath = mdiCircle; break;
+      iconPath = mdiCircle;
+      break;
     case 'mdiRectangle':
-      iconPath = mdiRectangle; break;
+      iconPath = mdiRectangle;
+      break;
     case 'mdiFormatColorText':
-      iconPath = mdiFormatColorText; break;
+      iconPath = mdiFormatColorText;
+      break;
     case 'mdiFormatColorFill':
-      iconPath = mdiFormatColorFill; break;
+      iconPath = mdiFormatColorFill;
+      break;
     case 'mdiEraser':
-      iconPath = mdiEraser; break;
+      iconPath = mdiEraser;
+      break;
     default:
-      iconPath = mdiCursorDefault; break;
+      iconPath = mdiCursorDefault;
+      break;
   }
 
-  return (
-    <Icon
-      path={iconPath}
-      size={0.8}
-      rotate={180}
-      horizontal
-      vertical
-      color="#2B3963"
-    />
-  )
+  return <Icon path={iconPath} size={0.8} rotate={180} horizontal vertical color="#2B3963" />;
 };
 
 IconWrapper.propTypes = {
-  path: PropTypes.string.isRequired
+  path: PropTypes.string.isRequired,
 };
 
 export default IconWrapper;

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, PreviewPrompt} from '@pie-lib/render-ui';
+import { Collapsible, PreviewPrompt } from '@pie-lib/render-ui';
 import { withStyles } from '@material-ui/core/styles';
 
 import Container from './container';
@@ -11,7 +11,7 @@ class DrawingResponseComponent extends React.Component {
     super(props);
     this.state = {
       showCorrect: false,
-      hasError: false
+      hasError: false,
     };
   }
 
@@ -21,17 +21,10 @@ class DrawingResponseComponent extends React.Component {
 
   render() {
     const {
-      model: {
-        disabled,
-        imageDimensions,
-        imageUrl,
-        prompt,
-        mode,
-        teacherInstructions
-      },
+      model: { disabled, imageDimensions, imageUrl, prompt, mode, teacherInstructions, backgroundImageEnabled = true },
       session,
       onSessionChange,
-      classes
+      classes,
     } = this.props;
     const { hasError, errorMessage } = this.state;
     const isEvaluateMode = mode === 'evaluate';
@@ -45,7 +38,7 @@ class DrawingResponseComponent extends React.Component {
             <Collapsible
               labels={{
                 hidden: 'Show Teacher Instructions',
-                visible: 'Hide Teacher Instructions'
+                visible: 'Hide Teacher Instructions',
               }}
             >
               <PreviewPrompt prompt={teacherInstructions} />
@@ -64,6 +57,7 @@ class DrawingResponseComponent extends React.Component {
           isEvaluateMode={isEvaluateMode}
           imageDimensions={imageDimensions}
           imageUrl={imageUrl}
+          backgroundImageEnabled={backgroundImageEnabled}
           disabled={disabled}
         />
       </div>
@@ -75,13 +69,13 @@ DrawingResponseComponent.propTypes = {
   classes: PropTypes.object,
   model: PropTypes.object.isRequired,
   onSessionChange: PropTypes.func.isRequired,
-  session: PropTypes.object.isRequired
+  session: PropTypes.object.isRequired,
 };
 
 const styles = () => ({
   prompt: {
-    fontSize: 'inherit'
-  }
+    fontSize: 'inherit',
+  },
 });
 
 export default withStyles(styles)(DrawingResponseComponent);

package/src/index.js

@@ -10,13 +10,7 @@ export default class DrawingResponse extends HTMLElement {
   set model(m) {
     this._model = m;
 
-    this.dispatchEvent(
-      new ModelSetEvent(
-        this.tagName.toLowerCase(),
-        this.isComplete(),
-        !!this._model
-      )
-    );
+    this.dispatchEvent(new ModelSetEvent(this.tagName.toLowerCase(), this.isComplete(), !!this._model));
     this._render();
   }
 
@@ -28,9 +22,7 @@ export default class DrawingResponse extends HTMLElement {
     this._session.drawables = update.drawables;
     this._session.texts = update.texts;
 
-    this.dispatchEvent(
-      new SessionChangedEvent(this.tagName.toLowerCase(), this.isComplete())
-    );
+    this.dispatchEvent(new SessionChangedEvent(this.tagName.toLowerCase(), this.isComplete()));
 
     this._render();
   };
@@ -40,6 +32,10 @@ export default class DrawingResponse extends HTMLElement {
     this._render();
   }
 
+  get session() {
+    return this._session;
+  }
+
   connectedCallback() {
     this._render();
   }
@@ -49,8 +45,9 @@ export default class DrawingResponse extends HTMLElement {
       const el = React.createElement(DrawingResponseComponent, {
         model: this._model,
         session: this._session,
-        onSessionChange: this.sessionChanged
+        onSessionChange: this.sessionChanged,
       });
+
       ReactDOM.render(el, this, () => {
         renderMath(this);
       });