@pie-element/hotspot 4.7.18-next.85 → 4.8.1-beta.587

package/configure/src/hotspot-container.jsx

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 import { withStyles } from '@material-ui/core/styles/index';
 import Help from '@material-ui/icons/Help';
 
@@ -10,6 +11,7 @@ import { getAllShapes, groupShapes } from './utils';
 
 const isImage = (file) => {
   const imageType = /image.*/;
+
   return file.type.match(imageType);
 };
 
@@ -19,7 +21,7 @@ export class Container extends Component {
     return {
       ...prevState,
       shapes: getAllShapes(nextProps.shapes),
-    }
+    };
   }
 
   constructor(props) {
@@ -28,16 +30,18 @@ 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) => {
-    const { onImageUpload } = this.props;
-    const reader = new FileReader();
+    if (file instanceof Blob) {
+      const { onImageUpload } = this.props;
+      const reader = new FileReader();
 
-    reader.onloadend = () => onImageUpload(reader.result);
-    reader.readAsDataURL(file)
+      reader.onloadend = () => onImageUpload(reader.result);
+      reader.readAsDataURL(file);
+    }
   };
 
   handleUploadImage = (e) => {
@@ -47,8 +51,17 @@ export class Container extends Component {
   };
 
   enableDropzone = () => this.setState({ dropzoneActive: true });
+
   disableDropzone = () => this.setState({ dropzoneActive: false });
 
+  handleOnPaste = (e) => {
+    const { files } = e.clipboardData;
+
+    if (files && isImage(files[0])) {
+      this.handleFileRead(files[0]);
+    }
+  };
+
   handleOnDrop = (e) => {
     e.preventDefault();
 
@@ -63,6 +76,7 @@ export class Container extends Component {
     } else if (isImage(files[0])) {
       this.handleFileRead(files[0]);
     }
+
     this.disableDropzone();
   };
 
@@ -82,13 +96,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)),
     );
   };
 
@@ -97,7 +111,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) : [];
 
@@ -108,7 +122,9 @@ export class Container extends Component {
   handleClearAll = () => this.onUpdateShapes([]);
 
   handleEnableDrag = () => this.setState({ dragEnabled: true });
+
   handleDisableDrag = () => this.setState({ dragEnabled: false });
+
   handleInputClick = () => this.input.click();
 
   toggleTooltip = () => this.setState({ showTooltip: !this.state.showTooltip });
@@ -117,30 +133,34 @@ export class Container extends Component {
     const {
       classes,
       dimensions,
+      hasErrors,
       hotspotColor,
       imageUrl,
       multipleCorrect,
       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
-             } : {}}
+        <div
+          className={classNames(classes.box, {
+            [classes.boxError]: hasErrors && !dropzoneActive,
+            [classes.boxActive]: dropzoneActive,
+          })}
+          {...(dragEnabled
+            ? {
+                onDragExit: this.handleOnDragExit,
+                onDragLeave: this.handleOnDragExit,
+                onDragOver: this.handleOnDragOver,
+                onDrop: this.handleOnDrop,
+                onPaste: this.handleOnPaste,
+              }
+            : {})}
         >
           <div className={classes.toolbar}>
             {imageUrl && (
@@ -155,54 +175,46 @@ 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={classNames(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 && (
@@ -210,60 +222,58 @@ 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',
+  },
+  boxError: {
+    border: '1px solid red',
   },
   centered: {
     alignItems: 'center',
     display: 'flex',
     flexDirection: 'column',
-    justifyContent: 'center'
+    justifyContent: 'center',
   },
   drawableHeight: {
     minHeight: 350,
-    paddingBottom: '40px',
-    paddingRight: '40px',
+    paddingBottom: theme.spacing.unit * 5,
+    paddingRight: theme.spacing.unit * 5,
   },
   icon: {
     '&:hover': {
       color: '#333131',
-      cursor: 'help'
+      cursor: 'help',
     },
-    color: '#C1C1C1'
+    color: '#C1C1C1',
   },
   replaceButton: {
     marginLeft: 0,
   },
   replaceSection: {
-    marginRight: 'auto'
+    marginRight: 'auto',
   },
   toolbar: {
     backgroundColor: '#ECEDF1',
@@ -272,25 +282,25 @@ const styles = theme => ({
     borderTopRightRadius: '5px',
     display: 'flex',
     justifyContent: 'flex-end',
-    padding: '12px 8px'
+    padding: theme.spacing.unit,
   },
   tooltip: {
     position: 'relative',
     textAlign: 'right',
-    padding: '5px 9px'
+    padding: theme.spacing.unit,
   },
   tooltipContent: {
     background: '#333131',
     borderRadius: '4px',
     color: '#FFFFFF',
-    fontSize: '14px',
+    fontSize: theme.typography.fontSize,
     lineHeight: '18px',
-    marginTop: '-70px',
-    padding: '7px 16px',
+    marginTop: '-60px',
+    padding: theme.spacing.unit,
     position: 'absolute',
     right: '5px',
     textAlign: 'left',
-    width: '300px'
+    width: '300px',
   },
   tooltipArrow: {
     width: 0,
@@ -299,10 +309,10 @@ const styles = theme => ({
     borderRight: '10px solid transparent',
     borderTop: '10px solid #333131',
     marginBottom: -10,
-    marginTop: '2px',
+    marginTop: '4px',
     position: 'absolute',
-    right: '5px'
-  }
+    right: '5px',
+  },
 });
 
 Container.propTypes = {
@@ -317,14 +327,14 @@ 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

@@ -9,6 +9,8 @@ import Rectangle from './hotspot-rectangle';
 import Polygon from './hotspot-polygon';
 import { updateImageDimensions, getUpdatedShapes } from './utils';
 
+const IMAGE_MAX_WIDTH = 800;
+
 export class Drawable extends React.Component {
   static getDerivedStateFromProps(nextProps, prevState) {
     let dimensions = nextProps.dimensions;
@@ -20,7 +22,7 @@ export class Drawable extends React.Component {
     return {
       ...prevState,
       dimensions: dimensions,
-    }
+    };
   }
 
   constructor(props) {
@@ -34,7 +36,7 @@ export class Drawable extends React.Component {
         height: 0,
         width: 0,
       },
-    }
+    };
   }
 
   /// start of handling HotSpots section
@@ -43,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}`,
@@ -52,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}` });
@@ -84,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) {
@@ -98,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.
@@ -109,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;
     });
@@ -129,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));
@@ -153,15 +155,20 @@ export class Drawable extends React.Component {
     const elementStyle = getComputedStyle(target);
     const newHeight = parseFloat(elementStyle.height);
     const newWidth = parseFloat(elementStyle.width);
+    const aspectWidth = newWidth / IMAGE_MAX_WIDTH;
 
-    const dimensions = {
-      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);
   };
@@ -176,47 +183,43 @@ 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);
     const hasMinimumWidth = width > 150 && height > 150;
 
-    if (resizeValid && hasMinimumWidth) {
+    if (resizeValid && hasMinimumWidth && box) {
       box.style.width = `${width}px`;
       box.style.height = `${height}px`;
 
       this.setState({
         resizing: true,
         dimensions: { height: height, width: width },
-        stateShapes: getUpdatedShapes(dimensions, { width, height }, shapes)
+        stateShapes: getUpdatedShapes(dimensions, { width, height }, shapes),
       });
     }
 
@@ -250,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;
 
@@ -266,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>
         )}
 
@@ -282,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) => {
@@ -318,7 +324,7 @@ export class Drawable extends React.Component {
 
 const styles = () => ({
   base: {
-    position: 'relative'
+    position: 'relative',
   },
   image: {
     alignItems: 'center',
@@ -327,7 +333,7 @@ const styles = () => ({
   },
   imageContainer: {
     position: 'relative',
-    width: 'fit-content'
+    width: 'fit-content',
   },
   resize: {
     borderBottom: '1px solid #727272',
@@ -337,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 = {
@@ -359,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);