@pie-element/hotspot 6.1.2-next.41 → 6.1.2-next.57

package/configure/src/hotspot-drawable.jsx

@@ -1,14 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Layer, Stage } from 'react-konva';
-import max from 'lodash/max';
 import cloneDeep from 'lodash/cloneDeep';
 import { withStyles } from '@material-ui/core/styles/index';
 
 import Rectangle from './hotspot-rectangle';
 import Polygon from './hotspot-polygon';
 import { updateImageDimensions, getUpdatedShapes } from './utils';
-
+import RectangleShape from './shapes/rectagle';
+import CircleShape from './shapes/circle';
+import PolygonShape from './shapes/polygon';
 const IMAGE_MAX_WIDTH = 800;
 
 export class Drawable extends React.Component {
@@ -32,6 +33,8 @@ export class Drawable extends React.Component {
       isDrawing: false,
       stateShapes: false,
       resizing: false,
+      temporaryPolygon: null,
+      shapes: [],
       dimensions: {
         height: 0,
         width: 0,
@@ -39,72 +42,122 @@ export class Drawable extends React.Component {
     };
   }
 
-  /// start of handling HotSpots section
   handleOnMouseDown = (e) => {
-    if (e.target === e.currentTarget) {
-      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;
-
-      newShapes.push({
-        id: `${value + 1}`,
-        height: 0,
-        width: 0,
-        x: e.evt.layerX,
-        y: e.evt.layerY,
-        group: 'rectangles',
-        index: shapes.length,
-      });
+    const { shapeType, onUpdateShapes, shapes } = this.props;
+    let newState, newShapeId;
 
-      this.setState({ isDrawing: true, isDrawingShapeId: `${value + 1}` });
-      onUpdateShapes(newShapes);
+    // Ensure that the click originated from the expected element
+    if (e.target !== e.currentTarget) {
+      return;
     }
-  };
 
-  handleOnMouseUp = () => {
-    // !IMPORTANT: currently, only 'rectangles' are drawable
-    const { isDrawing, stateShapes } = this.state;
-    const { onUpdateShapes } = this.props;
+    switch (shapeType) {
+      case 'rectangle':
+        newState = RectangleShape.create(shapes, e);
+        break;
+      case 'circle':
+        newState = CircleShape.create(shapes, e);
+        break;
+      case 'polygon':
+        newShapeId = this.state.isDrawingShapeId;
+
+        if (newShapeId) {
+          // If a polygon is in progress, add a new point
+          const shapes = this.addPolygonPoint(e);
+
+          newState = {
+            isDrawing: true,
+            isDrawingShapeId: newShapeId,
+            shapes: shapes,
+          };
+        } else {
+          // Else start a new one
+          newState = PolygonShape.create(shapes, e);
+        }
+        break;
+      default:
+        console.error(`Unsupported shape type: ${shapeType}`);
+        return;
+    }
 
-    // If we're drawing a shape, a click finishes the drawing and sends the new shapes to HOC
-    if (isDrawing) {
-      this.setState({ isDrawing: !isDrawing, stateShapes: false, isDrawingShapeId: undefined });
+    this.setState({
+      ...newState,
+    });
 
-      if (stateShapes) {
-        onUpdateShapes(stateShapes);
-      }
-    }
+    onUpdateShapes(newState.shapes);
   };
 
-  handleMouseMove = (e) => {
-    // !IMPORTANT: currently, only 'rectangles' are drawable
-    const { isDrawing, isDrawingShapeId } = this.state;
-    const { shapes } = this.props;
+  addPolygonPoint(e) {
+    const { shapes } = PolygonShape.addPoint(this.state, e, (newShapes) => {
+      this.setState({
+        isDrawing: false,
+        shapes: newShapes,
+        isDrawingShapeId: undefined,
+      });
+
+      this.props.onUpdateShapes(newShapes);
+      this.props.handleFinishDrawing();
+    });
 
-    if (isDrawing && isDrawingShapeId) {
-      const mouseX = e.evt.layerX;
-      const mouseY = e.evt.layerY;
+    return shapes;
+  }
 
-      const currShapeIndex = shapes.findIndex((shape) => shape.id === isDrawingShapeId);
-      const currShape = shapes[currShapeIndex];
+  handleOnMouseUp = () => {
+    const { shapeType, onUpdateShapes } = this.props;
+    let newState;
 
-      if (currShape) {
-        const newWidth = mouseX - currShape.x;
-        const newHeight = mouseY - currShape.y;
+    if (shapeType === 'polygon') {
+      return;
+    }
 
-        const newShapesList = shapes.slice();
+    switch (shapeType) {
+      case 'rectangle':
+        newState = RectangleShape.finalizeCreation(this.state, this.props);
+        break;
+      case 'circle':
+        newState = CircleShape.finalizeCreation(this.state, this.props);
+        break;
+      default:
+        console.error(`Unsupported shape type: ${shapeType}`);
+        return;
+    }
 
-        newShapesList[currShapeIndex] = {
-          ...newShapesList[currShapeIndex],
-          height: newHeight,
-          width: newWidth,
-          x: currShape.x,
-          y: currShape.y,
-        };
-        // On mouse move don't trigger any event. Put the shapes on this state instead.
-        this.setState({ stateShapes: newShapesList });
+    this.setState({
+      ...newState,
+      isDrawing: false,
+    });
+
+    onUpdateShapes(newState.shapes);
+  };
+
+  handleMouseMove = (e) => {
+    const { shapeType, onUpdateShapes, shapes } = this.props;
+    let newState;
+
+    if (this.state.isDrawing) {
+      switch (shapeType) {
+        case 'rectangle':
+          newState = RectangleShape.handleMouseMove(this.state, e);
+          break;
+        case 'circle':
+          newState = CircleShape.handleMouseMove(this.state, e);
+          break;
+        case 'polygon':
+          newState = PolygonShape.handleMouseMove(this.state, e);
+          break;
+        default:
+          console.error(`Unsupported shape type: ${shapeType}`);
+          return;
       }
+
+      this.setState(newState);
+      onUpdateShapes(newState.shapes);
+    }
+  };
+
+  handleOnMouseOutOrLeave = (e) => {
+    if (this.state.isDrawing) {
+      this.handleOnMouseUp(e);
     }
   };
 
@@ -291,6 +344,8 @@ export class Drawable extends React.Component {
           onMouseDown={this.handleOnMouseDown}
           onMouseUp={this.handleOnMouseUp}
           onMouseMove={this.handleMouseMove}
+          onContentMouseOut={this.handleOnMouseOutOrLeave}
+          onContentMouseLeave={this.handleOnMouseOutOrLeave}
         >
           <Layer>
             {shapesToUse.map((shape, i) => {
@@ -314,6 +369,7 @@ export class Drawable extends React.Component {
                   strokeWidth={strokeWidth}
                   imageHeight={heightFromState || height}
                   imageWidth={widthFromState || width}
+                  addPolygonPoint={(e) => this.addPolygonPoint(e)}
                 />
               );
             })}
@@ -359,7 +415,9 @@ Drawable.propTypes = {
   disableDrag: PropTypes.func.isRequired,
   dimensions: PropTypes.object.isRequired,
   enableDrag: PropTypes.func.isRequired,
+  shapeType: PropTypes.oneOf(['rectangle', 'circle', 'polygon']),
   imageUrl: PropTypes.string.isRequired,
+  handleFinishDrawing: PropTypes.func.isRequired,
   hotspotColor: PropTypes.string.isRequired,
   multipleCorrect: PropTypes.bool.isRequired,
   onUpdateImageDimension: PropTypes.func.isRequired,

package/configure/src/hotspot-polygon.jsx

@@ -13,7 +13,8 @@ class PolComponent extends React.Component {
     if (
       prevState.imageHeight !== nextProps.imageHeight ||
       prevState.imageWidth !== nextProps.imageWidth ||
-      prevState.id !== nextProps.id
+      prevState.id !== nextProps.id ||
+      prevState.points.length !== points.length
     ) {
       if (points.length) {
         const xList = points.map((p) => p.x);
@@ -100,6 +101,11 @@ class PolComponent extends React.Component {
       return;
     }
 
+    if (isDrawing && id === 'newPolygon') {
+      this.props.addPolygonPoint(e);
+      return;
+    }
+
     e.cancelBubble = true;
     onClick(id);
   };
@@ -170,9 +176,11 @@ class PolComponent extends React.Component {
   render() {
     const { classes, correct, id, hotspotColor, outlineColor, strokeWidth = 5 } = this.props;
     const { points, x, y, hovered } = this.state;
+    const showPoints = hovered || id === 'newPolygon';
 
     const calculatedStrokeWidth = correct ? strokeWidth : hovered ? 1 : 0;
     const calculatedStroke = correct ? outlineColor : hovered ? HOVERED_COLOR : '';
+
     return (
       <Group classes={classes.group} onMouseLeave={this.handleMouseLeave} onMouseEnter={this.handleMouseEnter}>
         <Line
@@ -192,7 +200,7 @@ class PolComponent extends React.Component {
           y={y}
         />
 
-        {hovered &&
+        {showPoints &&
           points.map((point, index) => (
             <Circle
               key={index}
@@ -203,6 +211,7 @@ class PolComponent extends React.Component {
               fill={'white'}
               stroke={HOVERED_COLOR}
               strokeWidth={1}
+              onClick={this.handleClick}
               onDragStart={this.onDragStart}
               onDragMove={(e) => {
                 this.handleOnDragVertex(e, index);
@@ -250,6 +259,7 @@ PolComponent.propTypes = {
   imageWidth: PropTypes.number,
   hotspotColor: PropTypes.string.isRequired,
   onClick: PropTypes.func.isRequired,
+  addPolygonPoint: PropTypes.func.isRequired,
   onDeleteShape: PropTypes.func.isRequired,
   onDragEnd: PropTypes.func.isRequired,
   outlineColor: PropTypes.string.isRequired,

package/configure/src/shapes/circle.js

@@ -0,0 +1,67 @@
+export default class CircleShape {
+  static create(shapes, e) {
+    const newShapes = [...shapes];
+    const highestId = Math.max(...newShapes.map((shape) => parseInt(shape.id)), 0);
+    const newCircle = {
+      id: `${highestId + 1}`,
+      radius: 0,
+      x: e.evt.layerX,
+      y: e.evt.layerY,
+      group: 'circles',
+      index: newShapes.length,
+    };
+
+    newShapes.push(newCircle);
+
+    return {
+      newShapes,
+      isDrawing: true,
+      isDrawingShapeId: newCircle.id,
+    };
+  }
+
+  static finalizeCreation(state, props) {
+    const currentShapeIndex = state.shapes.findIndex((shape) => shape.id === state.isDrawingShapeId);
+
+    if (currentShapeIndex !== -1) {
+      const currentShape = state.shapes[currentShapeIndex];
+      const updatedShapes = [...props.shapes];
+
+      if (currentShape.radius > 0) {
+        updatedShapes.push(currentShape);
+
+        return {
+          isDrawing: false,
+          stateShapes: false,
+          isDrawingShapeId: undefined,
+          shapes: updatedShapes,
+        };
+      }
+    }
+
+    return state;
+  }
+
+  static handleMouseMove(state, e) {
+    const { isDrawing, isDrawingShapeId, shapes } = state;
+
+    if (isDrawing) {
+      const tempShapes = [...shapes];
+      const resizingShapeIndex = tempShapes.findIndex((shape) => shape.id === isDrawingShapeId);
+
+      if (resizingShapeIndex !== -1) {
+        const resizingShape = tempShapes[resizingShapeIndex];
+
+        resizingShape.radius = Math.sqrt(
+          Math.pow(e.evt.layerX - resizingShape.x, 2) + Math.pow(e.evt.layerY - resizingShape.y, 2),
+        );
+
+        return {
+          shapes: tempShapes,
+        };
+      }
+    }
+
+    return state;
+  }
+}

package/configure/src/shapes/polygon.js

@@ -0,0 +1,79 @@
+export default class PolygonShape {
+  static create(shapes, e) {
+    const newShapes = [...shapes];
+    const newPolygon = {
+      id: 'newPolygon',
+      points: [{ x: e.evt.layerX, y: e.evt.layerY }],
+      group: 'polygons',
+      index: newShapes.length,
+    };
+
+    newShapes.push(newPolygon);
+
+    return {
+      shapes: newShapes,
+      isDrawing: true,
+      isDrawingShapeId: newPolygon.id,
+    };
+  }
+
+  static addPoint(state, e, onPolygonComplete) {
+    // Number of pixels allowed to determine if the first point was clicked
+    const clickDelta = 5;
+
+    const shapesCopy = JSON.parse(JSON.stringify(state.shapes));
+    const currentShapeIndex = shapesCopy.findIndex((shape) => shape.id === state.isDrawingShapeId);
+
+    if (currentShapeIndex !== -1) {
+      const currentShape = shapesCopy[currentShapeIndex];
+      if (currentShape.points && Array.isArray(currentShape.points)) {
+        const firstPoint = currentShape.points[0];
+
+        // If click is close enough to the first point (within clickDelta pixels), close the polygon
+        if (
+          Math.abs(firstPoint.x - e.evt.layerX) <= clickDelta &&
+          Math.abs(firstPoint.y - e.evt.layerY) <= clickDelta
+        ) {
+          return PolygonShape.finalizeCreation(state, onPolygonComplete);
+        }
+
+        currentShape.points.push({ x: e.evt.layerX, y: e.evt.layerY });
+        shapesCopy[currentShapeIndex] = currentShape;
+
+        return {
+          shapes: shapesCopy,
+        };
+      }
+    }
+    return state;
+  }
+
+  static finalizeCreation(state, onPolygonComplete) {
+    const { shapes } = state;
+    const tempShapes = [...shapes];
+    const highestId = Math.max(...state.shapes.map((shape) => parseInt(shape.id) || 0), 0);
+
+    const polygonIndex = tempShapes.findIndex((shape) => shape.id === state.isDrawingShapeId);
+
+    if (polygonIndex !== -1 && tempShapes[polygonIndex].points.length > 2) {
+      const completedPolygon = tempShapes[polygonIndex];
+
+      completedPolygon.id = `${highestId + 1}`;
+      onPolygonComplete(tempShapes);
+
+      return {
+        isDrawing: false,
+        shapes: tempShapes,
+        isDrawingShapeId: undefined,
+      };
+    }
+
+    return state;
+  }
+
+  // No need to update anything on mouse move,
+  // but it's here if we need to add any logic later.
+  static handleMouseMove(state, e) {
+    return state;
+  }
+}

package/configure/src/shapes/rectagle.js

@@ -0,0 +1,80 @@
+export default class RectangleShape {
+  static create(shapes, e) {
+    const newShapes = [...shapes];
+    const highestId = Math.max(...newShapes.map((shape) => parseInt(shape.id)), 0) || 0;
+
+    const newRectangle = {
+      id: `${highestId + 1}`,
+      height: 0,
+      width: 0,
+      x: e.evt.layerX,
+      y: e.evt.layerY,
+      group: 'rectangles',
+      index: newShapes.length,
+    };
+
+    newShapes.push(newRectangle);
+
+    return {
+      shapes: newShapes,
+      isDrawing: true,
+      isDrawingShapeId: newRectangle.id,
+    };
+  }
+
+  static finalizeCreation(state, props) {
+    const currentShapeIndex = state.shapes.findIndex((shape) => shape.id === state.isDrawingShapeId);
+
+    if (currentShapeIndex !== -1) {
+      const currentShape = state.shapes[currentShapeIndex];
+
+      // Check if the shape is a valid rectangle (has more than 0 width and height) before finalizing
+      if (currentShape.width > 0 && currentShape.height > 0) {
+        return {
+          ...state,
+          isDrawing: false,
+          stateShapes: false,
+          isDrawingShapeId: undefined,
+        };
+      } else {
+        return {
+          ...state,
+          isDrawing: false,
+          stateShapes: false,
+          isDrawingShapeId: undefined,
+          shapes: state.shapes.filter((shape) => shape.id !== state.isDrawingShapeId),
+        };
+      }
+    }
+
+    // Return current state if not drawing a rectangle
+    return {
+      ...state,
+      isDrawing: false,
+      stateShapes: false,
+      isDrawingShapeId: undefined,
+    };
+  }
+
+  static handleMouseMove(state, e) {
+    const { isDrawing, isDrawingShapeId, shapes } = state;
+
+    if (isDrawing) {
+      const tempShapes = [...shapes];
+      const resizingShapeIndex = tempShapes.findIndex((shape) => shape.id === isDrawingShapeId);
+
+      if (resizingShapeIndex !== -1) {
+        const resizingShape = tempShapes[resizingShapeIndex];
+
+        resizingShape.width = e.evt.layerX - resizingShape.x;
+        resizingShape.height = e.evt.layerY - resizingShape.y;
+
+        return {
+          shapes: tempShapes,
+        };
+      }
+    }
+
+    return state;
+  }
+}

package/controller/package.json

@@ -11,7 +11,7 @@
   "main": "lib/index.js",
   "module": "src/index.js",
   "dependencies": {
-    "@pie-lib/pie-toolbox": "1.2.3",
+    "@pie-lib/pie-toolbox": "1.3.0",
     "debug": "^4.1.1",
     "lodash": "^4.17.15"
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-element/hotspot",
-  "version": "6.1.2-next.41+5df7e6058",
+  "version": "6.1.2-next.57+2eabcbd03",
   "description": "",
   "repository": "pie-framework/pie-elements",
   "publishConfig": {
@@ -9,7 +9,7 @@
   "dependencies": {
     "@material-ui/core": "^3.9.3",
     "@pie-framework/pie-player-events": "^0.1.0",
-    "@pie-lib/pie-toolbox": "1.2.3",
+    "@pie-lib/pie-toolbox": "1.3.0",
     "konva": "^3.2.5",
     "prop-types": "^15.6.1",
     "react": "^16.8.1",
@@ -18,7 +18,7 @@
   },
   "author": "pie framework developers",
   "license": "ISC",
-  "gitHead": "5df7e6058fb9bcf5e85669aaa15a0465f3612e72",
+  "gitHead": "2eabcbd036e318bb24552f4140ca7384ad865951",
   "scripts": {
     "postpublish": "../../scripts/postpublish"
   },