@pie-element/drawing-response 4.3.4-next.8 → 4.3.4-next.88

package/src/drawing-response/container.jsx

@@ -11,16 +11,10 @@ import Icon from './icon';
 
 const { tools: TOOLS } = constants;
 
-const ROGVAIV = [
-  'red',
-  'orange',
-  'yellow',
-  'violet',
-  'blue',
-  'green',
-  'white',
-  'black'
-].map(c => ({ value: c, label: c }));
+const ROGVAIV = ['red', 'orange', 'yellow', 'violet', 'blue', 'green', 'white', 'black'].map((c) => ({
+  value: c,
+  label: c,
+}));
 
 export class Container extends Component {
   static propTypes = {
@@ -30,7 +24,7 @@ export class Container extends Component {
     onSessionChange: PropTypes.func.isRequired,
     imageDimensions: PropTypes.object.isRequired,
     imageUrl: PropTypes.string.isRequired,
-    backgroundImageEnabled: PropTypes.bool.isRequired
+    backgroundImageEnabled: PropTypes.bool.isRequired,
   };
 
   constructor(props) {
@@ -41,7 +35,7 @@ export class Container extends Component {
       scale: 1,
       drawableDimensions: {
         height: 0,
-        width: 0
+        width: 0,
       },
       toolActive: TOOLS[0],
       fillColor: 'white',
@@ -49,13 +43,13 @@ export class Container extends Component {
         { value: 'transparent', label: 'no fill' },
         { value: 'lightblue', label: 'light blue' },
         { value: 'lightyellow', label: 'light yellow' },
-        ...ROGVAIV
+        ...ROGVAIV,
       ],
       outlineColor: 'black',
       outlineColorList: ROGVAIV,
       paintColor: 'red',
       paintColorList: ROGVAIV,
-      TextEntry
+      TextEntry,
     };
   }
 
@@ -67,8 +61,8 @@ export class Container extends Component {
           this.setState({
             drawableDimensions: {
               height,
-              width
-            }
+              width,
+            },
           });
         }
       } catch (e) {
@@ -85,19 +79,16 @@ export class Container extends Component {
 
     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 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) {
+        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({
@@ -109,7 +100,7 @@ export class Container extends Component {
 
     const target = document.getElementById('question-container');
     if (target) {
-      this.observer.observe(target, { attributes : true, attributeFilter : ['style'] })
+      this.observer.observe(target, { attributes: true, attributeFilter: ['style'] });
     }
   }
 
@@ -126,21 +117,20 @@ export class Container extends Component {
 
     if (type !== 'Text') {
       this.setState({
-        toolActive: tool
+        toolActive: tool,
       });
     } else {
       TextEntry.addNewTextEntry();
       // Force update
       this.setState({
-        updatedAt: new Date()
+        updatedAt: new Date(),
       });
     }
   }
 
-  checkIfToolIsDisabled = type => {
+  checkIfToolIsDisabled = (type) => {
     if (this.props.disabled) return true;
 
-
     const { toolActive } = this.state;
     // Text will never be disabled since on each "Text Entry" click a new text is added
     if (type === 'Text') {
@@ -152,20 +142,13 @@ export class Container extends Component {
   handleColorChange(type, color) {
     const cType = `${type}Color`;
     this.setState({
-      [cType]: color
+      [cType]: color,
     });
   }
 
   render() {
-    const {
-      classes,
-      disabled,
-      imageUrl,
-      imageDimensions,
-      onSessionChange,
-      session,
-      backgroundImageEnabled
-    } = this.props;
+    const { classes, disabled, imageUrl, imageDimensions, onSessionChange, session, backgroundImageEnabled } =
+      this.props;
     const {
       drawableDimensions,
       toolActive,
@@ -175,14 +158,14 @@ export class Container extends Component {
       outlineColorList,
       paintColor,
       paintColorList,
-      TextEntry
+      TextEntry,
     } = this.state;
 
     const heightToUse = drawableDimensions.height * this.state.scale;
 
     return (
       <div className={classes.base}>
-        {!disabled &&
+        {!disabled && (
           <DrawablePalette
             fillColor={fillColor}
             fillList={fillColorList}
@@ -190,17 +173,15 @@ export class Container extends Component {
             outlineList={outlineColorList}
             paintColor={paintColor}
             paintList={paintColorList}
-            onFillColorChange={color => this.handleColorChange('fill', color)}
-            onOutlineColorChange={color =>
-              this.handleColorChange('outline', color)
-            }
-            onPaintColorChange={color => this.handleColorChange('paint', color)}
+            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}>
-            {TOOLS.map(tool => {
+            {TOOLS.map((tool) => {
               const { type, label, icon } = tool;
 
               return (
@@ -216,7 +197,7 @@ export class Container extends Component {
           </div>
 
           <div
-            ref={drawable => {
+            ref={(drawable) => {
               this.drawable = drawable;
             }}
             className={classes.drawableHeight}
@@ -244,19 +225,19 @@ export class Container extends Component {
   }
 }
 
-const styles = theme => ({
+const styles = (theme) => ({
   base: {
-    marginTop: theme.spacing.unit * 2
+    marginTop: theme.spacing.unit * 2,
   },
   box: {
     border: '1px solid #E0E1E6',
     borderRadius: '5px',
     marginTop: theme.spacing.unit * 2,
-    backgroundColor: '#ECEDF1'
+    backgroundColor: '#ECEDF1',
   },
   drawableHeight: {
     minHeight: 350,
-    backgroundColor: '#fff'
+    backgroundColor: '#fff',
   },
   toolbar: {
     borderBottom: '1px solid #E0E1E6',
@@ -266,9 +247,9 @@ const styles = theme => ({
     boxSizing: 'border-box',
     maxWidth: 'calc(100% - 163px)', // 163px is the width set on undoControls
     '& button': {
-      marginBottom: '8px'
-    }
-  }
+      marginBottom: '8px',
+    },
+  },
 });
 
 export default withStyles(styles)(Container);

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

@@ -22,18 +22,18 @@ const styles = () => ({
   image: {
     alignItems: 'center',
     display: 'flex',
-    justifyContent: 'center'
+    justifyContent: 'center',
   },
   imageContainer: {
     position: 'relative',
-    width: 'fit-content'
-  }
+    width: 'fit-content',
+  },
 });
 
 DrawableImage.propTypes = {
   classes: PropTypes.object.isRequired,
   dimensions: PropTypes.object.isRequired,
-  url:PropTypes.string.isRequired
+  url: PropTypes.string.isRequired,
 };
 
 export default withStyles(styles)(DrawableImage);

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

@@ -300,6 +300,7 @@ const styles = () => ({
   stage: {
     left: 0,
     position: 'absolute',
+    touchAction: 'none',
     top: 0
   },
   active: {

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

@@ -8,13 +8,9 @@ import classnames from 'classnames';
 
 // TODO: Change Palette so will render inputs and colors dynamically
 class Palette extends React.Component {
-  onChange = name => event => {
+  onChange = (name) => (event) => {
     const { value } = event.target;
-    const {
-      onFillColorChange,
-      onOutlineColorChange,
-      onPaintColorChange
-    } = this.props;
+    const { onFillColorChange, onOutlineColorChange, onPaintColorChange } = this.props;
 
     if (name === 'fill') {
       onFillColorChange(value);
@@ -26,29 +22,18 @@ class Palette extends React.Component {
   };
 
   render() {
-    const {
-      classes,
-      fillColor,
-      outlineColor,
-      fillList,
-      outlineList
-    } = this.props;
+    const { classes, fillColor, outlineColor, fillList, outlineList } = this.props;
 
     return (
       <div className={classes.base}>
         <InputContainer label="Fill Color" className={classes.input}>
-          <Select
-            className={classes.select}
-            onChange={this.onChange('fill')}
-            value={fillColor}
-          >
+          <Select className={classes.select} onChange={this.onChange('fill')} value={fillColor}>
             {fillList.map(({ value, label }) => (
               <MenuItem
                 key={value}
                 value={value}
                 className={classnames(classes.item, {
-                  [classes.blackColorItem]:
-                   value === 'black'
+                  [classes.blackColorItem]: value === 'black',
                 })}
                 style={{ backgroundColor: value }}
               >
@@ -59,18 +44,9 @@ class Palette extends React.Component {
         </InputContainer>
 
         <InputContainer label="Outline Color" className={classes.input}>
-          <Select
-            className={classes.select}
-            onChange={this.onChange('outline')}
-            value={outlineColor}
-          >
+          <Select className={classes.select} onChange={this.onChange('outline')} value={outlineColor}>
             {outlineList.map(({ value, label }) => (
-              <MenuItem
-                key={value}
-                value={value}
-                className={classes.item}
-                style={{ border: `2px solid ${value}` }}
-              >
+              <MenuItem key={value} value={value} className={classes.item} style={{ border: `2px solid ${value}` }}>
                 {label}
               </MenuItem>
             ))}
@@ -81,10 +57,10 @@ class Palette extends React.Component {
   }
 }
 
-const styles = theme => ({
+const styles = (theme) => ({
   base: {
     marginTop: theme.spacing.unit * 2,
-    display: 'flex'
+    display: 'flex',
   },
   input: {
     flex: 1,
@@ -97,15 +73,15 @@ const styles = theme => ({
     height: '22px',
     marginLeft: theme.spacing.unit * 2,
     marginRight: theme.spacing.unit * 2,
-    marginTop: theme.spacing.unit * 2
+    marginTop: theme.spacing.unit * 2,
   },
   blackColorItem: {
-    color:theme.palette.background.paper,
+    color: theme.palette.background.paper,
   },
   select: {
     fontSize: 'inherit',
     transform: 'translate(0%, 40%)',
-  }
+  },
 });
 
 Palette.propTypes = {
@@ -116,7 +92,7 @@ Palette.propTypes = {
   onOutlineColorChange: PropTypes.func.isRequired,
   onPaintColorChange: PropTypes.func.isRequired,
   outlineColor: PropTypes.string.isRequired,
-  outlineList: PropTypes.array.isRequired
+  outlineList: PropTypes.array.isRequired,
 };
 
 export default withStyles(styles)(Palette);

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();
@@ -198,14 +189,14 @@ export default class TextDrawable {
   };
 
   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,11 +245,11 @@ 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),
+          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,
@@ -278,7 +258,7 @@ export default class TextDrawable {
           onDragEnd: this.props.handleSessionChange,
           onMouseEnter: this.props.onMouseOverElement,
           onMouseLeave: this.props.onMouseOutElement,
-        }
+        };
       }
 
       if (rotation) {
@@ -290,7 +270,7 @@ export default class TextDrawable {
           key={id}
           bubbles={true}
           id={id}
-          ref={text => {
+          ref={(text) => {
             this[textNode] = text;
           }}
           text={text.text || label}
@@ -306,7 +286,7 @@ export default class TextDrawable {
         transformerVisible && (
           <Transformer
             key={`transformer_${id}`}
-            ref={text => {
+            ref={(text) => {
               this[transformerNode] = text;
             }}
             selectedShapeName={textNode}
@@ -315,7 +295,7 @@ export default class TextDrawable {
             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)}`);
 };