@pie-element/hotspot 5.4.3-next.5 → 5.4.3-next.57

package/configure/src/hotspot-container.jsx

@@ -19,7 +19,7 @@ export class Container extends Component {
     return {
       ...prevState,
       shapes: getAllShapes(nextProps.shapes),
-    }
+    };
   }
 
   constructor(props) {
@@ -28,8 +28,8 @@ export class Container extends Component {
     this.state = {
       dragEnabled: true,
       // always transform shapes map into shapes array at this level
-      shapes: getAllShapes(props.shapes)
-    }
+      shapes: getAllShapes(props.shapes),
+    };
   }
 
   handleFileRead = (file) => {
@@ -38,7 +38,7 @@ export class Container extends Component {
       const reader = new FileReader();
 
       reader.onloadend = () => onImageUpload(reader.result);
-      reader.readAsDataURL(file)
+      reader.readAsDataURL(file);
     }
   };
 
@@ -92,13 +92,13 @@ export class Container extends Component {
     this.disableDropzone();
   };
 
-  onUpdateShapes = newShapes => {
+  onUpdateShapes = (newShapes) => {
     const { onUpdateShapes } = this.props;
 
     this.setState(
       { shapes: newShapes },
       // always transform shapes array back into shapes map when saving changes
-      () => onUpdateShapes(groupShapes(newShapes))
+      () => onUpdateShapes(groupShapes(newShapes)),
     );
   };
 
@@ -107,7 +107,7 @@ export class Container extends Component {
 
     if (shapes && shapes.length) {
       // sort by index value
-      let newShapes = shapes.sort((a, b) => (parseInt(a.index) - parseInt(b.index)));
+      let newShapes = shapes.sort((a, b) => parseInt(a.index) - parseInt(b.index));
 
       newShapes = newShapes ? newShapes.slice(0, newShapes.length - 1) : [];
 
@@ -133,25 +133,24 @@ export class Container extends Component {
       onUpdateImageDimension,
       outlineColor,
       strokeWidth,
-      preserveAspectRatioEnabled
+      preserveAspectRatioEnabled,
     } = this.props;
-    const {
-      dropzoneActive,
-      dragEnabled,
-      showTooltip
-    } = this.state;
+    const { dropzoneActive, dragEnabled, showTooltip } = this.state;
     const { shapes } = this.state;
 
     return (
       <div className={classes.base}>
-        <div className={`${classes.box} ${dropzoneActive ? classes.boxActive : ''}`}
-             {...dragEnabled ? {
-               onDragExit: this.handleOnDragExit,
-               onDragLeave: this.handleOnDragExit,
-               onDragOver: this.handleOnDragOver,
-               onDrop: this.handleOnDrop,
-               onPaste: this.handleOnPaste
-             } : {}}
+        <div
+          className={`${classes.box} ${dropzoneActive ? classes.boxActive : ''}`}
+          {...(dragEnabled
+            ? {
+                onDragExit: this.handleOnDragExit,
+                onDragLeave: this.handleOnDragExit,
+                onDragOver: this.handleOnDragOver,
+                onDrop: this.handleOnDrop,
+                onPaste: this.handleOnPaste,
+              }
+            : {})}
         >
           <div className={classes.toolbar}>
             {imageUrl && (
@@ -166,54 +165,45 @@ export class Container extends Component {
                 }}
               />
             )}
-            <Button
-              disabled={!(shapes && shapes.length)}
-              onClick={this.handleUndo}
-              label="Undo"
-            />
-            <Button
-              disabled={!(shapes && shapes.length)}
-              onClick={this.handleClearAll}
-              label="Clear all"
-            />
+            <Button disabled={!(shapes && shapes.length)} onClick={this.handleUndo} label="Undo" />
+            <Button disabled={!(shapes && shapes.length)} onClick={this.handleClearAll} label="Clear all" />
           </div>
 
           <div
-            ref={ref => {
+            ref={(ref) => {
               this.imageSection = ref;
             }}
-            className={classes.drawableHeight}>
-            {imageUrl
-              ? (
-                <Drawable
-                  dimensions={dimensions}
-                  disableDrag={this.handleDisableDrag}
-                  enableDrag={this.handleEnableDrag}
-                  imageUrl={imageUrl}
-                  hotspotColor={hotspotColor}
-                  multipleCorrect={multipleCorrect}
-                  onUpdateImageDimension={onUpdateImageDimension}
-                  onUpdateShapes={this.onUpdateShapes}
-                  outlineColor={outlineColor}
-                  shapes={shapes}
-                  strokeWidth={strokeWidth}
-                  preserveAspectRatioEnabled={preserveAspectRatioEnabled}
+            className={classes.drawableHeight}
+          >
+            {imageUrl ? (
+              <Drawable
+                dimensions={dimensions}
+                disableDrag={this.handleDisableDrag}
+                enableDrag={this.handleEnableDrag}
+                imageUrl={imageUrl}
+                hotspotColor={hotspotColor}
+                multipleCorrect={multipleCorrect}
+                onUpdateImageDimension={onUpdateImageDimension}
+                onUpdateShapes={this.onUpdateShapes}
+                outlineColor={outlineColor}
+                shapes={shapes}
+                strokeWidth={strokeWidth}
+                preserveAspectRatioEnabled={preserveAspectRatioEnabled}
+              />
+            ) : (
+              <div className={`${classes.drawableHeight} ${classes.centered}`}>
+                <label>Drag and drop or upload image from computer</label>
+                <br />
+                <UploadControl
+                  label="Upload Image"
+                  onInputClick={this.handleInputClick}
+                  onUploadImage={this.handleUploadImage}
+                  setRef={(ref) => {
+                    this.input = ref;
+                  }}
                 />
-              )
-              : (
-                <div className={`${classes.drawableHeight} ${classes.centered}`}>
-                  <label>Drag and drop or upload image from computer</label>
-                  <br/>
-                  <UploadControl
-                    label="Upload Image"
-                    onInputClick={this.handleInputClick}
-                    onUploadImage={this.handleUploadImage}
-                    setRef={(ref) => {
-                      this.input = ref;
-                    }}
-                  />
-                </div>
-              )}
+              </div>
+            )}
           </div>
 
           {imageUrl && (
@@ -221,42 +211,36 @@ export class Container extends Component {
               {showTooltip && (
                 <div className={classes.tooltipContent}>
                   <label>
-                    Click and drag to create a hotspot. Click the hotspot to mark correct. Click
-                    again to unmark.
+                    Click and drag to create a hotspot. Click the hotspot to mark correct. Click again to unmark.
                   </label>
-                  <div className={classes.tooltipArrow}/>
+                  <div className={classes.tooltipArrow} />
                 </div>
               )}
-              <Help
-                className={classes.icon}
-                onMouseOut={this.toggleTooltip}
-                onMouseOver={this.toggleTooltip}
-              />
+              <Help className={classes.icon} onMouseOut={this.toggleTooltip} onMouseOver={this.toggleTooltip} />
             </div>
           )}
         </div>
       </div>
-
     );
   }
 }
 
-const styles = theme => ({
+const styles = (theme) => ({
   base: {
-    marginTop: theme.spacing.unit * 2
+    marginTop: theme.spacing.unit * 2,
   },
   box: {
     border: '1px solid #E0E1E6',
-    borderRadius: '5px'
+    borderRadius: '5px',
   },
   boxActive: {
-    border: '1px solid #0032C2'
+    border: '1px solid #0032C2',
   },
   centered: {
     alignItems: 'center',
     display: 'flex',
     flexDirection: 'column',
-    justifyContent: 'center'
+    justifyContent: 'center',
   },
   drawableHeight: {
     minHeight: 350,
@@ -266,15 +250,15 @@ const styles = theme => ({
   icon: {
     '&:hover': {
       color: '#333131',
-      cursor: 'help'
+      cursor: 'help',
     },
-    color: '#C1C1C1'
+    color: '#C1C1C1',
   },
   replaceButton: {
     marginLeft: 0,
   },
   replaceSection: {
-    marginRight: 'auto'
+    marginRight: 'auto',
   },
   toolbar: {
     backgroundColor: '#ECEDF1',
@@ -283,12 +267,12 @@ const styles = theme => ({
     borderTopRightRadius: '5px',
     display: 'flex',
     justifyContent: 'flex-end',
-    padding: '12px 8px'
+    padding: '12px 8px',
   },
   tooltip: {
     position: 'relative',
     textAlign: 'right',
-    padding: '5px 9px'
+    padding: '5px 9px',
   },
   tooltipContent: {
     background: '#333131',
@@ -301,7 +285,7 @@ const styles = theme => ({
     position: 'absolute',
     right: '5px',
     textAlign: 'left',
-    width: '300px'
+    width: '300px',
   },
   tooltipArrow: {
     width: 0,
@@ -312,8 +296,8 @@ const styles = theme => ({
     marginBottom: -10,
     marginTop: '2px',
     position: 'absolute',
-    right: '5px'
-  }
+    right: '5px',
+  },
 });
 
 Container.propTypes = {
@@ -328,14 +312,13 @@ Container.propTypes = {
   outlineColor: PropTypes.string.isRequired,
   shapes: PropTypes.shape({
     rectangles: PropTypes.array,
-    polygons: PropTypes.array
+    polygons: PropTypes.array,
   }).isRequired,
   strokeWidth: PropTypes.number,
-  preserveAspectRatioEnabled: PropTypes.bool
+  preserveAspectRatioEnabled: PropTypes.bool,
 };
 Container.defaultProps = {
-  strokeWidth: 5
+  strokeWidth: 5,
 };
 
-
 export default withStyles(styles)(Container);

package/configure/src/hotspot-drawable.jsx

@@ -22,7 +22,7 @@ export class Drawable extends React.Component {
     return {
       ...prevState,
       dimensions: dimensions,
-    }
+    };
   }
 
   constructor(props) {
@@ -36,7 +36,7 @@ export class Drawable extends React.Component {
         height: 0,
         width: 0,
       },
-    }
+    };
   }
 
   /// start of handling HotSpots section
@@ -45,7 +45,7 @@ export class Drawable extends React.Component {
       const { onUpdateShapes, shapes } = this.props;
       // Add a new rectangle at the mouse position with 0 width and height
       const newShapes = shapes.slice();
-      const value = max(newShapes.map(c => parseInt(c.id)).filter(id => !isNaN(id))) || 0;
+      const value = max(newShapes.map((c) => parseInt(c.id)).filter((id) => !isNaN(id))) || 0;
 
       newShapes.push({
         id: `${value + 1}`,
@@ -54,7 +54,7 @@ export class Drawable extends React.Component {
         x: e.evt.layerX,
         y: e.evt.layerY,
         group: 'rectangles',
-        index: shapes.length
+        index: shapes.length,
       });
 
       this.setState({ isDrawing: true, isDrawingShapeId: `${value + 1}` });
@@ -86,7 +86,7 @@ export class Drawable extends React.Component {
       const mouseX = e.evt.layerX;
       const mouseY = e.evt.layerY;
 
-      const currShapeIndex = shapes.findIndex(shape => shape.id === isDrawingShapeId);
+      const currShapeIndex = shapes.findIndex((shape) => shape.id === isDrawingShapeId);
       const currShape = shapes[currShapeIndex];
 
       if (currShape) {
@@ -100,7 +100,7 @@ export class Drawable extends React.Component {
           height: newHeight,
           width: newWidth,
           x: currShape.x,
-          y: currShape.y
+          y: currShape.y,
         };
 
         // On mouse move don't trigger any event. Put the shapes on this state instead.
@@ -111,12 +111,12 @@ export class Drawable extends React.Component {
 
   handleOnDragEnd = (id, updatedProps) => {
     const { shapes, onUpdateShapes } = this.props;
-    const newShapes = shapes.map(shape => {
+    const newShapes = shapes.map((shape) => {
       if (shape.id === id) {
         return {
           ...shape,
-          ...updatedProps
-        }
+          ...updatedProps,
+        };
       }
       return shape;
     });
@@ -131,17 +131,17 @@ export class Drawable extends React.Component {
     let newShapes = [];
 
     if (multipleCorrect) {
-      newShapes = shapes.map(shape => {
+      newShapes = shapes.map((shape) => {
         if (shape.id === id) {
           shape.correct = !shape.correct;
         }
         return shape;
-      })
+      });
     } else {
-      newShapes = shapes.map(shape => {
+      newShapes = shapes.map((shape) => {
         shape.correct = shape.id === id;
         return shape;
-      })
+      });
     }
 
     onUpdateShapes(cloneDeep(newShapes));
@@ -157,17 +157,18 @@ export class Drawable extends React.Component {
     const newWidth = parseFloat(elementStyle.width);
     const aspectWidth = newWidth / IMAGE_MAX_WIDTH;
 
-    const dimensions = newWidth > IMAGE_MAX_WIDTH ? {
-      height: newHeight / aspectWidth,
-      width: IMAGE_MAX_WIDTH
-    } : {
-      height: newHeight,
-      width: newWidth
-    };
+    const dimensions =
+      newWidth > IMAGE_MAX_WIDTH
+        ? {
+            height: newHeight / aspectWidth,
+            width: IMAGE_MAX_WIDTH,
+          }
+        : {
+            height: newHeight,
+            width: newWidth,
+          };
 
-    this.setState(
-      { dimensions },
-      () => onUpdateImageDimension(dimensions));
+    this.setState({ dimensions }, () => onUpdateImageDimension(dimensions));
 
     resizeHandle.addEventListener('mousedown', this.initialiseResize, false);
   };
@@ -182,34 +183,30 @@ export class Drawable extends React.Component {
     let drawable = true;
 
     // Do not allow resizing over the hotspots
-    shapes && shapes.forEach(shape => {
-      const right = shape.x + shape.width + 5;
-      const bottom = shape.y + shape.height + 5;
-      if (x <= right || y <= bottom) {
-        drawable = false
-      }
-    });
+    shapes &&
+      shapes.forEach((shape) => {
+        const right = shape.x + shape.width + 5;
+        const bottom = shape.y + shape.height + 5;
+        if (x <= right || y <= bottom) {
+          drawable = false;
+        }
+      });
     return drawable;
   }
 
   startResizing = (e) => {
     const bounds = e.target.getBoundingClientRect();
     const box = this.image;
-    const {
-      disableDrag,
-      preserveAspectRatioEnabled,
-      dimensions,
-      shapes
-    } = this.props;
+    const { disableDrag, preserveAspectRatioEnabled, dimensions, shapes } = this.props;
 
     // todo previously we had state.dimensions, is it needed?
     const { width, height } = updateImageDimensions(
       dimensions,
       {
         width: e.clientX - bounds.left,
-        height: e.clientY - bounds.top
+        height: e.clientY - bounds.top,
       },
-      preserveAspectRatioEnabled
+      preserveAspectRatioEnabled,
     );
 
     const resizeValid = this.checkIfResizeValid(width, height);
@@ -222,7 +219,7 @@ export class Drawable extends React.Component {
       this.setState({
         resizing: true,
         dimensions: { height: height, width: width },
-        stateShapes: getUpdatedShapes(dimensions, { width, height }, shapes)
+        stateShapes: getUpdatedShapes(dimensions, { width, height }, shapes),
       });
     }
 
@@ -256,12 +253,12 @@ export class Drawable extends React.Component {
       hotspotColor,
       outlineColor,
       shapes,
-      strokeWidth
+      strokeWidth,
     } = this.props;
     const {
       stateShapes,
       isDrawing,
-      dimensions: { height: heightFromState, width: widthFromState }
+      dimensions: { height: heightFromState, width: widthFromState },
     } = this.state;
     const shapesToUse = stateShapes || shapes;
 
@@ -272,15 +269,18 @@ export class Drawable extends React.Component {
             <img
               className={classes.image}
               onLoad={this.handleOnImageLoad}
-              ref={ref => {
+              ref={(ref) => {
                 this.image = ref;
               }}
               src={imageUrl}
-              {...height && width ? { style: { height, width } } : {}}
+              {...(height && width ? { style: { height, width } } : {})}
+            />
+            <div
+              ref={(ref) => {
+                this.resize = ref;
+              }}
+              className={classes.resize}
             />
-            <div ref={ref => {
-              this.resize = ref;
-            }} className={classes.resize}/>
           </div>
         )}
 
@@ -288,9 +288,9 @@ export class Drawable extends React.Component {
           className={classes.stage}
           height={heightFromState || height}
           width={widthFromState || width}
-          onMouseDown={this.handleOnMouseDown }
-          onMouseUp={this.handleOnMouseUp }
-          onMouseMove={this.handleMouseMove }
+          onMouseDown={this.handleOnMouseDown}
+          onMouseUp={this.handleOnMouseUp}
+          onMouseMove={this.handleMouseMove}
         >
           <Layer>
             {shapesToUse.map((shape, index) => {
@@ -324,7 +324,7 @@ export class Drawable extends React.Component {
 
 const styles = () => ({
   base: {
-    position: 'relative'
+    position: 'relative',
   },
   image: {
     alignItems: 'center',
@@ -333,7 +333,7 @@ const styles = () => ({
   },
   imageContainer: {
     position: 'relative',
-    width: 'fit-content'
+    width: 'fit-content',
   },
   resize: {
     borderBottom: '1px solid #727272',
@@ -343,13 +343,13 @@ const styles = () => ({
     height: '10px',
     position: 'absolute',
     right: '-10px',
-    width: '10px'
+    width: '10px',
   },
   stage: {
     left: 0,
     top: 0,
-    position: 'absolute'
-  }
+    position: 'absolute',
+  },
 });
 
 Drawable.propTypes = {
@@ -365,7 +365,7 @@ Drawable.propTypes = {
   outlineColor: PropTypes.string.isRequired,
   shapes: PropTypes.array.isRequired,
   strokeWidth: PropTypes.number,
-  preserveAspectRatioEnabled: PropTypes.bool
+  preserveAspectRatioEnabled: PropTypes.bool,
 };
 
 export default withStyles(styles)(Drawable);

package/configure/src/hotspot-palette.jsx

@@ -6,14 +6,14 @@ import MenuItem from '@material-ui/core/MenuItem';
 import { withStyles } from '@material-ui/core/styles';
 
 class Palette extends React.Component {
-  onChange = (name) => event => {
+  onChange = (name) => (event) => {
     const { value } = event.target;
     const { onHotspotColorChange, onOutlineColorChange } = this.props;
 
     if (name === 'hotspot') {
       onHotspotColorChange(value);
     } else {
-      onOutlineColorChange(value)
+      onOutlineColorChange(value);
     }
   };
 
@@ -23,18 +23,9 @@ class Palette extends React.Component {
     return (
       <div className={classes.base}>
         <InputContainer label="Hot Spot" className={classes.input}>
-          <Select
-            className={classes.select}
-            onChange={this.onChange('hotspot')}
-            value={hotspotColor}
-          >
-            {hotspotList.map(hotspot => (
-              <MenuItem
-                key={hotspot}
-                value={hotspot}
-                className={classes.item}
-                style={{ backgroundColor: hotspot }}
-              >
+          <Select className={classes.select} onChange={this.onChange('hotspot')} value={hotspotColor}>
+            {hotspotList.map((hotspot) => (
+              <MenuItem key={hotspot} value={hotspot} className={classes.item} style={{ backgroundColor: hotspot }}>
                 {hotspot}
               </MenuItem>
             ))}
@@ -42,12 +33,8 @@ class Palette extends React.Component {
         </InputContainer>
 
         <InputContainer label="Response Outline" className={classes.input}>
-          <Select
-            className={classes.select}
-            onChange={this.onChange('outline')}
-            value={outlineColor}
-          >
-            {outlineList.map(outline => (
+          <Select className={classes.select} onChange={this.onChange('outline')} value={outlineColor}>
+            {outlineList.map((outline) => (
               <MenuItem
                 key={outline}
                 value={outline}
@@ -64,21 +51,21 @@ class Palette extends React.Component {
   }
 }
 
-const styles = theme => ({
+const styles = (theme) => ({
   base: {
     marginTop: theme.spacing.unit * 2,
-    display: 'flex'
+    display: 'flex',
   },
   input: {
     flex: 1,
-    width: '90%'
+    width: '90%',
   },
   item: {
     borderRadius: '2px',
     height: '22px',
     marginLeft: theme.spacing.unit * 2,
     marginRight: theme.spacing.unit * 2,
-    marginTop: theme.spacing.unit * 2
+    marginTop: theme.spacing.unit * 2,
   },
 });
 
@@ -89,7 +76,7 @@ Palette.propTypes = {
   onHotspotColorChange: PropTypes.func.isRequired,
   onOutlineColorChange: PropTypes.func.isRequired,
   outlineColor: PropTypes.string.isRequired,
-  outlineList: PropTypes.array.isRequired
+  outlineList: PropTypes.array.isRequired,
 };
 
 export default withStyles(styles)(Palette);