@pie-element/drawing-response 3.9.8 → 3.9.10-beta.1443

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 = {
@@ -29,7 +23,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,23 +32,24 @@ export class Container extends Component {
     const TextEntry = new DrawableText();
 
     this.state = {
+      scale: 1,
       drawableDimensions: {
         height: 0,
-        width: 0
+        width: 0,
       },
       toolActive: TOOLS[0],
       fillColor: 'white',
       fillColorList: [
         { value: 'transparent', label: 'no fill' },
-        { value: 'lightblue', label: 'lightblue' },
-        { value: 'lightyellow', label: 'lightyellow' },
-        ...ROGVAIV
+        { value: 'lightblue', label: 'light blue' },
+        { value: 'lightyellow', label: 'light yellow' },
+        ...ROGVAIV,
       ],
       outlineColor: 'black',
       outlineColorList: ROGVAIV,
       paintColor: 'red',
       paintColorList: ROGVAIV,
-      TextEntry
+      TextEntry,
     };
   }
 
@@ -65,8 +61,8 @@ export class Container extends Component {
           this.setState({
             drawableDimensions: {
               height,
-              width
-            }
+              width,
+            },
           });
         }
       } catch (e) {
@@ -80,12 +76,39 @@ 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) {
@@ -94,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') {
@@ -120,19 +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
-    } = this.props;
+    const { classes, disabled, imageUrl, imageDimensions, onSessionChange, session, backgroundImageEnabled } =
+      this.props;
     const {
       drawableDimensions,
       toolActive,
@@ -142,51 +158,53 @@ export class Container extends Component {
       outlineColorList,
       paintColor,
       paintColorList,
-      TextEntry
+      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
-            ref={drawable => {
+            ref={(drawable) => {
               this.drawable = drawable;
             }}
             className={classes.drawableHeight}
+            style={{ height: heightToUse, maxHeight: heightToUse }}
           >
             <DrawableMain
+              scale={this.state.scale}
               session={session}
               disabled={disabled}
               onSessionChange={onSessionChange}
@@ -198,6 +216,7 @@ export class Container extends Component {
               imageDimensions={imageDimensions}
               toolActive={toolActive}
               TextEntry={TextEntry}
+              backgroundImageEnabled={backgroundImageEnabled}
             />
           </div>
         </div>
@@ -206,27 +225,31 @@ 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
+    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',
+    },
+  },
 });
 
 export default withStyles(styles)(Container);

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={{
@@ -21,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

@@ -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%'
@@ -273,13 +300,13 @@ const styles = () => ({
   stage: {
     left: 0,
     position: 'absolute',
+    touchAction: 'none',
     top: 0
   },
   active: {
     cursor: 'pointer'
   },
   undoControls: {
-    float: 'right',
     marginTop: -43,
     width: 163
   }
@@ -297,7 +324,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-palette.jsx

@@ -4,16 +4,13 @@ import { InputContainer } from '@pie-lib/render-ui';
 import Select from '@material-ui/core/Select';
 import MenuItem from '@material-ui/core/MenuItem';
 import { withStyles } from '@material-ui/core/styles';
+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);
@@ -25,27 +22,19 @@ 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={classes.item}
+                className={classnames(classes.item, {
+                  [classes.blackColorItem]: value === 'black',
+                })}
                 style={{ backgroundColor: value }}
               >
                 {label}
@@ -55,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>
             ))}
@@ -77,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,
@@ -93,12 +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,
   },
   select: {
     fontSize: 'inherit',
     transform: 'translate(0%, 40%)',
-  }
+  },
 });
 
 Palette.propTypes = {
@@ -109,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);