@pie-element/drawing-response 3.9.14 → 3.9.15-touch

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

@@ -10,7 +10,7 @@ const DrawableImage = ({ classes, url, dimensions: { height, width } }) => (
       src={url}
       style={{
         height,
-        maxWidth: 598,
+        maxWidth: width,
         maxHeight: 350,
         width,
       }}

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

@@ -89,11 +89,15 @@ 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, scale } = this.props;
 
     if (newDrawable.length === 0 && !textIsSelected) {
       const { x, y } = e.target.getStage().getPointerPosition();
+
       const newDrawable = factory(toolActive.type, {
         startx: x / scale,
         starty: y / scale,
@@ -109,6 +113,9 @@ 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;
 
@@ -218,27 +225,30 @@ 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;
+    const imageHeight = imageDimensions?.height * scale;
+    const imageWidth = imageDimensions?.width * scale;
 
     return (
       <div>
         <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}}
+              dimensions={{ height: imageHeight, width: imageWidth }}
               url={imageUrl}/>
           )}
 
@@ -252,8 +262,8 @@ export class DrawableMain extends React.Component {
             }}
             className={classnames(classes.stage, {
               [classes.active]:
-                draggable &&
-                (isOver || (newDrawable && newDrawable.length === 1))
+              draggable &&
+              (isOver || (newDrawable && newDrawable.length === 1))
             })}
             height={drawableDimensions.height}
             width={drawableDimensions.width}

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

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