@pie-element/hotspot 5.18.2-next.9 → 5.19.1-next.12

package/configure/lib/utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/utils.js"],"names":["updateImageDimensions","initialDim","nextDim","keepAspectRatio","resizeType","imageAspectRatio","width","height","getDelta","referenceInitialValue","referenceNextValue","currentValue","getUpdatedRectangle","shape","x","y","getUpdatedPlygon","points","map","point","getUpdatedShapes","shapes","group","getAllShapes","shapesMap","shapesArray","shapesKeys","Object","keys","length","reduce","acc","currentShapeKey","concat","index","groupShapes","rectangles","polygons","shapeProps","generateValidationMessage","config","minShapes","maxShapes","maxSelections","shapesMessage","selectionsMessage","message"],"mappings":"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","sourcesContent":["import cloneDeep from 'lodash/cloneDeep';\n\nconst updateImageDimensions = (initialDim, nextDim, keepAspectRatio, resizeType) => {\n  // if we want to keep image aspect ratio\n  if (keepAspectRatio) {\n    const imageAspectRatio = initialDim.width / initialDim.height;\n\n    if (resizeType === 'height') {\n      // if we want to change image height => we update the width accordingly\n      return {\n        width: nextDim.height * imageAspectRatio,\n        height: nextDim.height,\n      };\n    }\n\n    // if we want to change image width => we update the height accordingly\n    return {\n      width: nextDim.width,\n      height: nextDim.width / imageAspectRatio,\n    };\n  }\n\n  // if we don't want to keep aspect ratio, we just update both values\n  return {\n    width: nextDim.width,\n    height: nextDim.height,\n  };\n};\n\n// referenceInitialValue = the initial value of the Stage\n// referenceNextValue = the next value of the Stage\n// currentValue = the value that has to be re-sized influenced by the changes that were made on the Stage\nconst getDelta = (referenceInitialValue, referenceNextValue, currentValue) =>\n  (referenceNextValue / referenceInitialValue) * currentValue;\n\nconst getUpdatedRectangle = (initialDim, nextDim, shape) => ({\n  ...shape,\n  width: getDelta(initialDim.width, nextDim.width, shape.width),\n  height: getDelta(initialDim.height, nextDim.height, shape.height),\n  x: getDelta(initialDim.width, nextDim.width, shape.x),\n  y: getDelta(initialDim.height, nextDim.height, shape.y),\n});\n\nconst getUpdatedPlygon = (initialDim, nextDim, shape) => ({\n  ...shape,\n  points: shape.points.map((point) => ({\n    x: getDelta(initialDim.width, nextDim.width, point.x),\n    y: getDelta(initialDim.height, nextDim.height, point.y),\n  })),\n});\n\n// initialDim = the initial dimensions: { width, height } of the Stage\n// nextDim = the next dimensions: { width, height } of the Stage\n// shapes = array of shapes that have to be re-sized and re-positioned\nconst getUpdatedShapes = (initialDim, nextDim, shapes) => {\n  return shapes.map((shape) => {\n    if (shape.group === 'rectangles') {\n      return getUpdatedRectangle(initialDim, nextDim, shape);\n    }\n\n    if (shape.group === 'polygons') {\n      return getUpdatedPlygon(initialDim, nextDim, shape);\n    }\n  });\n};\n\n// converts shapes map to shapes array\n// example:\n// from: { rectangles: [r1], polygons: [p1, p2]}\n// to: [{ ...r1, group: 'rectangles' }, { ...p1, group: 'polygons' }, { ...p2, group: 'polygons' }]\n// if a shape has index defined, keep it, otherwise initialize it\n// index is used for the UNDO function\nconst getAllShapes = (shapesMap) => {\n  shapesMap = shapesMap || {};\n  const shapesArray = [];\n  const shapesKeys = Object.keys(shapesMap);\n\n  return shapesKeys.length\n    ? shapesKeys.reduce(\n        (acc, currentShapeKey) =>\n          acc.concat(\n            shapesMap[currentShapeKey]\n              ? shapesMap[currentShapeKey].map((shape, index) => ({\n                  ...shape,\n                  group: currentShapeKey,\n                  index: shape.index || acc.length + index,\n                }))\n              : [],\n          ),\n        shapesArray,\n      )\n    : shapesArray;\n};\n\n// converts shapes array to shapes map\n// is the reverse of getAllShapes function\n// example:\n// from: [{ ...r1, group: 'rectangles' }, { ...p1, group: 'polygons' }, { ...p2, group: 'polygons' }]\n// to: { rectangles: [r1], polygons: [p1, p2]}\nconst groupShapes = (shapesArray) => {\n  shapesArray = shapesArray || [];\n  const shapesMap = {\n    rectangles: [],\n    polygons: [],\n  };\n\n  if (shapesArray.length) {\n    return shapesArray.reduce((acc, { group, ...shapeProps }) => {\n      acc[group] = [...(acc[group] || []), shapeProps];\n      return acc;\n    }, shapesMap);\n  }\n\n  return cloneDeep(shapesMap);\n};\n\nconst generateValidationMessage = (config) => {\n  const { minShapes, maxShapes, maxSelections } = config;\n\n  const shapesMessage =\n    `\\nThere should be at least ${minShapes} ` + (maxShapes ? `and at most ${maxShapes} ` : '') + 'shapes defined.';\n\n  const selectionsMessage =\n    '\\nThere should be at least 1 ' +\n    (maxSelections ? `and at most ${maxSelections} ` : '') +\n    'shape' +\n    (maxSelections ? 's' : '') +\n    ' selected.';\n\n  const message = 'Validation requirements:' + shapesMessage + selectionsMessage;\n\n  return message;\n};\n\nexport {\n  updateImageDimensions,\n  generateValidationMessage,\n  getUpdatedShapes,\n  getAllShapes,\n  groupShapes,\n  getUpdatedRectangle,\n  getUpdatedPlygon,\n};\n"],"file":"utils.js"}
+{"version":3,"sources":["../src/utils.js"],"names":["updateImageDimensions","initialDim","nextDim","keepAspectRatio","resizeType","imageAspectRatio","width","height","getDelta","referenceInitialValue","referenceNextValue","currentValue","getUpdatedRectangle","shape","x","y","getUpdatedPlygon","points","map","point","getUpdatedShapes","shapes","group","getAllShapes","shapesMap","shapesArray","shapesKeys","Object","keys","length","reduce","acc","currentShapeKey","concat","index","groupShapes","rectangles","polygons","shapeProps","isPointInsidePolygon","polygon","inside","i","j","xi","yi","xj","yj","intersect","calculate","polygonPoints","xPoints","yPoints","minX","Math","min","minY","maxX","max","maxY","textX","textY","generateValidationMessage","config","minShapes","maxShapes","maxSelections","shapesMessage","selectionsMessage","message"],"mappings":"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","sourcesContent":["import cloneDeep from 'lodash/cloneDeep';\n\nconst updateImageDimensions = (initialDim, nextDim, keepAspectRatio, resizeType) => {\n  // if we want to keep image aspect ratio\n  if (keepAspectRatio) {\n    const imageAspectRatio = initialDim.width / initialDim.height;\n\n    if (resizeType === 'height') {\n      // if we want to change image height => we update the width accordingly\n      return {\n        width: nextDim.height * imageAspectRatio,\n        height: nextDim.height,\n      };\n    }\n\n    // if we want to change image width => we update the height accordingly\n    return {\n      width: nextDim.width,\n      height: nextDim.width / imageAspectRatio,\n    };\n  }\n\n  // if we don't want to keep aspect ratio, we just update both values\n  return {\n    width: nextDim.width,\n    height: nextDim.height,\n  };\n};\n\n// referenceInitialValue = the initial value of the Stage\n// referenceNextValue = the next value of the Stage\n// currentValue = the value that has to be re-sized influenced by the changes that were made on the Stage\nconst getDelta = (referenceInitialValue, referenceNextValue, currentValue) =>\n  (referenceNextValue / referenceInitialValue) * currentValue;\n\nconst getUpdatedRectangle = (initialDim, nextDim, shape) => ({\n  ...shape,\n  width: getDelta(initialDim.width, nextDim.width, shape.width),\n  height: getDelta(initialDim.height, nextDim.height, shape.height),\n  x: getDelta(initialDim.width, nextDim.width, shape.x),\n  y: getDelta(initialDim.height, nextDim.height, shape.y),\n});\n\nconst getUpdatedPlygon = (initialDim, nextDim, shape) => ({\n  ...shape,\n  points: shape.points.map((point) => ({\n    x: getDelta(initialDim.width, nextDim.width, point.x),\n    y: getDelta(initialDim.height, nextDim.height, point.y),\n  })),\n});\n\n// initialDim = the initial dimensions: { width, height } of the Stage\n// nextDim = the next dimensions: { width, height } of the Stage\n// shapes = array of shapes that have to be re-sized and re-positioned\nconst getUpdatedShapes = (initialDim, nextDim, shapes) => {\n  return shapes.map((shape) => {\n    if (shape.group === 'rectangles') {\n      return getUpdatedRectangle(initialDim, nextDim, shape);\n    }\n\n    if (shape.group === 'polygons') {\n      return getUpdatedPlygon(initialDim, nextDim, shape);\n    }\n  });\n};\n\n// converts shapes map to shapes array\n// example:\n// from: { rectangles: [r1], polygons: [p1, p2]}\n// to: [{ ...r1, group: 'rectangles' }, { ...p1, group: 'polygons' }, { ...p2, group: 'polygons' }]\n// if a shape has index defined, keep it, otherwise initialize it\n// index is used for the UNDO function\nconst getAllShapes = (shapesMap) => {\n  shapesMap = shapesMap || {};\n  const shapesArray = [];\n  const shapesKeys = Object.keys(shapesMap);\n\n  return shapesKeys.length\n    ? shapesKeys.reduce(\n        (acc, currentShapeKey) =>\n          acc.concat(\n            shapesMap[currentShapeKey]\n              ? shapesMap[currentShapeKey].map((shape, index) => ({\n                  ...shape,\n                  group: currentShapeKey,\n                  index: shape.index || acc.length + index,\n                }))\n              : [],\n          ),\n        shapesArray,\n      )\n    : shapesArray;\n};\n\n// converts shapes array to shapes map\n// is the reverse of getAllShapes function\n// example:\n// from: [{ ...r1, group: 'rectangles' }, { ...p1, group: 'polygons' }, { ...p2, group: 'polygons' }]\n// to: { rectangles: [r1], polygons: [p1, p2]}\nconst groupShapes = (shapesArray) => {\n  shapesArray = shapesArray || [];\n  const shapesMap = {\n    rectangles: [],\n    polygons: [],\n  };\n\n  if (shapesArray.length) {\n    return shapesArray.reduce((acc, { group, ...shapeProps }) => {\n      acc[group] = [...(acc[group] || []), shapeProps];\n      return acc;\n    }, shapesMap);\n  }\n\n  return cloneDeep(shapesMap);\n};\n\nconst isPointInsidePolygon = (polygon, x, y) => {\n  let inside = false;\n\n  if (!polygon || polygon.length <= 0) {\n    return inside;\n  }\n\n  for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {\n    const xi = polygon[i].x;\n    const yi = polygon[i].y;\n    const xj = polygon[j].x;\n    const yj = polygon[j].y;\n\n    const intersect = yi > y !== yj > y && x < ((xj - xi) * (y - yi)) / (yj - yi) + xi;\n\n    if (intersect) {\n      inside = !inside;\n    }\n  }\n\n  return inside;\n};\n\nconst calculate = (polygonPoints) => {\n  if (!polygonPoints || polygonPoints.length <= 0) {\n    return { x: 0, y: 0 };\n  }\n\n  const xPoints = polygonPoints.map((point) => point.x);\n  const yPoints = polygonPoints.map((point) => point.y);\n  const minX = Math.min(...xPoints);\n  const minY = Math.min(...yPoints);\n  const maxX = Math.max(...xPoints);\n  const maxY = Math.max(...yPoints);\n\n  // Find a suitable position for the text element within the polygon\n  let textX, textY;\n\n  for (let x = minX; x <= maxX - 20; x++) {\n    for (let y = maxY - 20; y > minY; y--) {\n      // Check if the text element's position (x, y) is within the polygon\n      if (isPointInsidePolygon(polygonPoints, x, y)) {\n        textX = x - 10;\n        textY = y;\n        break;\n      }\n    }\n  }\n\n  return { x: textX, y: textY };\n};\n\nconst generateValidationMessage = (config) => {\n  const { minShapes, maxShapes, maxSelections } = config;\n\n  const shapesMessage =\n    `\\nThere should be at least ${minShapes} ` + (maxShapes ? `and at most ${maxShapes} ` : '') + 'shapes defined.';\n\n  const selectionsMessage =\n    '\\nThere should be at least 1 ' +\n    (maxSelections ? `and at most ${maxSelections} ` : '') +\n    'shape' +\n    (maxSelections ? 's' : '') +\n    ' selected.';\n\n  const message = 'Validation requirements:' + shapesMessage + selectionsMessage;\n\n  return message;\n};\n\nexport {\n  calculate,\n  isPointInsidePolygon,\n  updateImageDimensions,\n  generateValidationMessage,\n  getUpdatedShapes,\n  getAllShapes,\n  groupShapes,\n  getUpdatedRectangle,\n  getUpdatedPlygon,\n};\n"],"file":"utils.js"}

package/configure/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pie-element/hotspot-configure",
   "private": true,
-  "version": "5.14.1",
+  "version": "5.15.0",
   "description": "",
   "main": "lib/index.js",
   "module": "src/index.js",
@@ -10,7 +10,7 @@
     "@material-ui/core": "^3.9.2",
     "@material-ui/icons": "^3.0.2",
     "@pie-framework/pie-configure-events": "^1.3.0",
-    "@pie-lib/pie-toolbox": "1.0.4",
+    "@pie-lib/pie-toolbox": "1.0.5",
     "classnames": "^2.2.6",
     "debug": "^3.1.0",
     "konva": "^3.2.4",

package/configure/src/DeleteWidget.jsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Group } from 'react-konva';
+import { faDelete } from './icons';
+import Image from './image';
+import { calculate } from './utils';
+
+const DeleteWidget = ({ height, id, width, x, y, points, outlineColor, handleWidgetClick }) => {
+  let positionX, positionY;
+  // if points exist we have an irregular form (polygon) and position should be computed
+  if (points) {
+    const { x, y } = calculate(points);
+    positionX = x;
+    positionY = y;
+  } else {
+    positionX = x + width - 20; // 10 pixels to the left
+    positionY = y + height - 20; // 10 pixels above
+  }
+
+  return (
+    <Group onClick={() => handleWidgetClick(id)}>
+      <Image width={20} height={20} x={positionX} y={positionY} src={faDelete} />
+    </Group>
+  );
+};
+
+DeleteWidget.propTypes = {
+  id: PropTypes.string.isRequired,
+  height: PropTypes.number,
+  width: PropTypes.number,
+  x: PropTypes.number.isRequired,
+  y: PropTypes.number.isRequired,
+  handleWidgetClick: PropTypes.func.isRequired,
+  points: PropTypes.arrayOf(
+    PropTypes.shape({
+      x: PropTypes.number,
+      y: PropTypes.number,
+    }),
+  ),
+  outlineColor: PropTypes.string.isRequired,
+};
+
+export default DeleteWidget;

package/configure/src/__tests__/__snapshots__/hotspot-container.test.js.snap

@@ -16,11 +16,6 @@ exports[`HotspotContainer render renders 1`] = `
         onInputClick={[Function]}
         setRef={[Function]}
       />
-      <WithStyles(RawButton)
-        disabled={false}
-        label="Undo"
-        onClick={[Function]}
-      />
       <WithStyles(RawButton)
         disabled={false}
         label="Clear all"
@@ -40,6 +35,7 @@ exports[`HotspotContainer render renders 1`] = `
         hotspotColor="rgba(137, 183, 244, 0.65)"
         imageUrl="https://cdn.fluence.net/image/0240eb1455ce4c4bb6180232347b6aef_W"
         multipleCorrect={true}
+        onDeleteShape={[Function]}
         onUpdateImageDimension={[MockFunction]}
         onUpdateShapes={[Function]}
         outlineColor="blue"

package/configure/src/__tests__/hotspot-container.test.js

@@ -78,6 +78,7 @@ describe('HotspotContainer', () => {
   let w,
     onImageUpload = jest.fn(),
     onUpdateImageDimension = jest.fn(),
+    onDeleteShape = jest.fn(),
     onUpdateShapes = jest.fn(),
     initialModel = model();
   beforeEach(() => {
@@ -91,6 +92,7 @@ describe('HotspotContainer', () => {
         outlineColor: initialModel.outlineColor,
         onUpdateImageDimension: onUpdateImageDimension,
         onUpdateShapes: onUpdateShapes,
+        onDeleteShape: onDeleteShape,
         onImageUpload: onImageUpload,
         shapes: initialModel.shapes,
         ...extras,
@@ -210,6 +212,54 @@ describe('HotspotContainer', () => {
       });
     });
 
+    it('onDeleteShape by id', () => {
+      console.log('wrapper', wrapper.instance());
+      wrapper.instance().onDeleteShape('7');
+      expect(onUpdateShapes).toHaveBeenCalledWith(
+        groupShapes([
+          { correct: true, group: 'rectangles', height: 140, id: '0', index: 0, width: 130, x: 1, y: 1 },
+          { group: 'rectangles', height: 140, id: '1', index: 1, width: 130, x: 140, y: 1 },
+          { group: 'rectangles', height: 140, id: '2', index: 2, width: 130, x: 280, y: 1 },
+          {
+            correct: true,
+            group: 'polygons',
+            id: '3',
+            index: 3,
+            points: [
+              { x: 1, y: 148 },
+              { x: 1, y: 288 },
+              { x: 129, y: 288 },
+              { x: 129, y: 148 },
+            ],
+          },
+          {
+            correct: false,
+            group: 'polygons',
+            id: '4',
+            index: 4,
+            points: [
+              { x: 141, y: 151 },
+              { x: 141, y: 289 },
+              { x: 269, y: 289 },
+              { x: 269, y: 151 },
+            ],
+          },
+          {
+            correct: false,
+            group: 'polygons',
+            id: '5',
+            index: 5,
+            points: [
+              { x: 279, y: 150 },
+              { x: 279, y: 289 },
+              { x: 407, y: 289 },
+              { x: 407, y: 150 },
+            ],
+          },
+        ]),
+      );
+    });
+
     it('onUpdateShapes with no shapes', () => {
       wrapper.instance().onUpdateShapes([]);
 
@@ -219,33 +269,6 @@ describe('HotspotContainer', () => {
       });
     });
 
-    it('handleUndo if no new shape was added', () => {
-      wrapper.instance().handleUndo();
-      expect(onUpdateShapes).toHaveBeenLastCalledWith({
-        ...initialModel.shapes,
-        polygons: initialModel.shapes.polygons.slice(0, -1),
-      });
-    });
-
-    it('handleUndo if new shape was added', () => {
-      const newShape = {
-        id: '7',
-        height: 140,
-        width: 130,
-        x: 280,
-        y: 1,
-        index: 6,
-      };
-
-      // first, add a new shape
-      wrapper.instance().state.shapes = getAllShapes({
-        ...initialModel.shapes,
-        rectangles: [...initialModel.shapes.rectangles, newShape],
-      });
-      wrapper.instance().handleUndo();
-      expect(onUpdateShapes).toBeCalledWith(initialModel.shapes);
-    });
-
     it('handleClearAll', () => {
       wrapper.instance().handleClearAll();
       expect(onUpdateShapes).toHaveBeenLastCalledWith({

package/configure/src/hotspot-container.jsx

@@ -33,13 +33,10 @@ export class Container extends Component {
       shapes: getAllShapes(props.shapes),
     };
     this.fakeImageHandler = {
-      cancel: () => {
-      },
+      cancel: () => {},
       done: (a, url) => this.props.onImageUpload(url),
-      fileChosen: () => {
-      },
-      progress: () => {
-      }
+      fileChosen: () => {},
+      progress: () => {},
     };
   }
 
@@ -55,7 +52,7 @@ export class Container extends Component {
         insertImage({
           ...this.fakeImageHandler,
           getChosenFile: () => file,
-          isPasted: true
+          isPasted: true,
         });
       }
     }
@@ -108,23 +105,18 @@ export class Container extends Component {
 
   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)),
     );
   };
 
-  handleUndo = () => {
+  onDeleteShape = (id) => {
     const { shapes } = this.state;
-
     if (shapes && shapes.length) {
-      // sort by index value
-      let newShapes = shapes.sort((a, b) => parseInt(a.index) - parseInt(b.index));
-
-      newShapes = newShapes ? newShapes.slice(0, newShapes.length - 1) : [];
-
+      // filter the deleted shape out
+      let newShapes = shapes.filter((shape) => shape.id !== id);
       this.onUpdateShapes(newShapes);
     }
   };
@@ -170,12 +162,12 @@ export class Container extends Component {
           })}
           {...(dragEnabled
             ? {
-              onDragExit: this.handleOnDragExit,
-              onDragLeave: this.handleOnDragExit,
-              onDragOver: this.handleOnDragOver,
-              onDrop: this.handleOnDrop,
-              onPaste: this.handleOnPaste,
-            }
+                onDragExit: this.handleOnDragExit,
+                onDragLeave: this.handleOnDragExit,
+                onDragOver: this.handleOnDragOver,
+                onDrop: this.handleOnDrop,
+                onPaste: this.handleOnPaste,
+              }
             : {})}
         >
           <div className={classes.toolbar}>
@@ -190,9 +182,7 @@ 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.handleClearAll} label="Clear all" />
           </div>
 
           <div
@@ -211,6 +201,7 @@ export class Container extends Component {
                 multipleCorrect={multipleCorrect}
                 onUpdateImageDimension={onUpdateImageDimension}
                 onUpdateShapes={this.onUpdateShapes}
+                onDeleteShape={this.onDeleteShape}
                 outlineColor={outlineColor}
                 shapes={shapes}
                 strokeWidth={strokeWidth}
@@ -219,7 +210,7 @@ export class Container extends Component {
             ) : (
               <div className={classNames(classes.drawableHeight, classes.centered)}>
                 <label>Drag and drop or upload image from computer</label>
-                <br/>
+                <br />
                 <UploadControl
                   label="Upload Image"
                   onInputClick={this.handleInputClick}
@@ -238,11 +229,11 @@ export class Container extends Component {
                   <label>
                     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>

package/configure/src/hotspot-drawable.jsx

@@ -102,7 +102,6 @@ export class Drawable extends React.Component {
           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 });
       }
@@ -254,6 +253,7 @@ export class Drawable extends React.Component {
       outlineColor,
       shapes,
       strokeWidth,
+      onDeleteShape,
     } = this.props;
     const {
       stateShapes,
@@ -293,9 +293,8 @@ export class Drawable extends React.Component {
           onMouseMove={this.handleMouseMove}
         >
           <Layer>
-            {shapesToUse.map((shape, index) => {
+            {shapesToUse.map((shape, i) => {
               const Tag = shape.group === 'polygons' ? Polygon : Rectangle;
-
               return (
                 <Tag
                   correct={shape.correct}
@@ -303,9 +302,10 @@ export class Drawable extends React.Component {
                   height={shape.height}
                   hotspotColor={hotspotColor}
                   id={shape.id}
-                  key={index}
+                  key={i}
                   onClick={() => this.handleOnSetAsCorrect(shape)}
                   onDragEnd={this.handleOnDragEnd}
+                  onDeleteShape={onDeleteShape}
                   outlineColor={outlineColor}
                   width={shape.width}
                   x={shape.x}
@@ -364,6 +364,7 @@ Drawable.propTypes = {
   multipleCorrect: PropTypes.bool.isRequired,
   onUpdateImageDimension: PropTypes.func.isRequired,
   onUpdateShapes: PropTypes.func.isRequired,
+  onDeleteShape: PropTypes.func.isRequired,
   outlineColor: PropTypes.string.isRequired,
   shapes: PropTypes.array.isRequired,
   strokeWidth: PropTypes.number,

package/configure/src/hotspot-polygon.jsx

@@ -2,15 +2,19 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Group, Line, Circle } from 'react-konva';
 import { withStyles } from '@material-ui/core/styles/index';
+import DeleteWidget from './DeleteWidget';
 
 const HOVERED_COLOR = '#00BFFF';
 
 class PolComponent extends React.Component {
   static getDerivedStateFromProps(nextProps, prevState) {
-    const { points, imageHeight, imageWidth } = nextProps;
-
-    // we execute this code only if image dimensions changed
-    if (prevState.imageHeight !== nextProps.imageHeight || prevState.imageWidth !== nextProps.imageWidth) {
+    const { id, points, imageHeight, imageWidth } = nextProps;
+    // we execute this code only if image dimensions changed or an hotspot was added/deleted
+    if (
+      prevState.imageHeight !== nextProps.imageHeight ||
+      prevState.imageWidth !== nextProps.imageWidth ||
+      prevState.id !== nextProps.id
+    ) {
       if (points.length) {
         const xList = points.map((p) => p.x);
         const yList = points.map((p) => p.y);
@@ -19,6 +23,7 @@ class PolComponent extends React.Component {
         const y = Math.max(...yList);
 
         return {
+          id,
           x,
           y,
           points,
@@ -28,6 +33,7 @@ class PolComponent extends React.Component {
       }
 
       return {
+        id: '',
         x: 0,
         y: 0,
         points: [],
@@ -67,6 +73,7 @@ class PolComponent extends React.Component {
     }
 
     return {
+      id: '',
       x: 0,
       y: 0,
       points: [],
@@ -75,6 +82,7 @@ class PolComponent extends React.Component {
 
   state = {
     hovered: false,
+    isDragging: false,
     ...this.getInitialState(this.props.points),
   };
 
@@ -124,11 +132,11 @@ class PolComponent extends React.Component {
       return acc;
     }, []);
 
-    this.setState({ points: newPoints, ...this.getOffset(newPoints) });
-
-    if (updateModel) {
-      onDragEnd(id, { points: newPoints });
-    }
+    this.setState({
+      points: newPoints,
+      ...this.getOffset(newPoints),
+      isDragging: updateModel ? false : this.state.isDragging,
+    });
   };
 
   handleOnDragVertex = (e, changedIndex, updateModel) => {
@@ -139,20 +147,32 @@ class PolComponent extends React.Component {
       index === changedIndex ? { x: e.target.x(), y: e.target.y() } : point,
     );
 
-    this.setState({ points: newPoints, ...this.getOffset(newPoints) });
+    this.setState({
+      points: newPoints,
+      ...this.getOffset(newPoints),
+      isDragging: updateModel ? false : this.state.isDragging,
+    });
 
     if (updateModel) {
       onDragEnd(id, { points: newPoints });
     }
   };
 
+  onDragStart = () => {
+    this.setState({ isDragging: true });
+  };
+
+  handleDelete = (id) => {
+    const { onDeleteShape } = this.props;
+    onDeleteShape(id);
+  };
+
   render() {
-    const { classes, correct, hotspotColor, outlineColor, strokeWidth = 5 } = this.props;
+    const { classes, correct, id, hotspotColor, outlineColor, strokeWidth = 5 } = this.props;
     const { points, x, y, hovered } = this.state;
 
     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
@@ -165,6 +185,7 @@ class PolComponent extends React.Component {
           draggable
           stroke={calculatedStroke}
           strokeWidth={calculatedStrokeWidth}
+          onDragStart={this.onDragStart}
           onDragMove={this.handleOnDragEnd}
           onDragEnd={(e) => this.handleOnDragEnd(e, true)}
           x={x}
@@ -182,15 +203,26 @@ class PolComponent extends React.Component {
               fill={'white'}
               stroke={HOVERED_COLOR}
               strokeWidth={1}
-              draggable
+              onDragStart={this.onDragStart}
               onDragMove={(e) => {
                 this.handleOnDragVertex(e, index);
               }}
               onDragEnd={(e) => {
                 this.handleOnDragVertex(e, index, true);
               }}
+              draggable
             />
           ))}
+        {!this.state.isDragging && this.state.hovered && (
+          <DeleteWidget
+            x={x}
+            y={y}
+            id={id}
+            handleWidgetClick={this.handleDelete}
+            points={points}
+            outlineColor={outlineColor}
+          />
+        )}
       </Group>
     );
   }
@@ -214,8 +246,11 @@ PolComponent.propTypes = {
   correct: PropTypes.bool,
   isDrawing: PropTypes.bool.isRequired,
   id: PropTypes.string.isRequired,
+  imageHeight: PropTypes.number,
+  imageWidth: PropTypes.number,
   hotspotColor: PropTypes.string.isRequired,
   onClick: PropTypes.func.isRequired,
+  onDeleteShape: PropTypes.func.isRequired,
   onDragEnd: PropTypes.func.isRequired,
   outlineColor: PropTypes.string.isRequired,
   points: PropTypes.arrayOf(
@@ -225,8 +260,6 @@ PolComponent.propTypes = {
     }),
   ).isRequired,
   strokeWidth: PropTypes.number,
-  imageHeight: PropTypes.number,
-  imageWidth: PropTypes.number,
 };
 
 PolComponent.defaultProps = {

package/configure/src/hotspot-rectangle.jsx

@@ -2,12 +2,14 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Rect, Group, Transformer } from 'react-konva';
 import { withStyles } from '@material-ui/core/styles/index';
+import DeleteWidget from './DeleteWidget';
 
 class RectComponent extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
       hovered: false,
+      isDragging: false,
     };
     this.shapeRef = React.createRef();
     this.trRef = React.createRef();
@@ -36,7 +38,7 @@ class RectComponent extends React.Component {
 
   handleOnDragEnd = (e) => {
     const { onDragEnd, id } = this.props;
-
+    this.setState({ isDragging: false });
     onDragEnd(id, {
       x: e.target.x(),
       y: e.target.y(),
@@ -56,6 +58,7 @@ class RectComponent extends React.Component {
     // we will reset it back
     node.scaleX(1);
     node.scaleY(1);
+    this.setState({ isDragging: false });
     onDragEnd(id, {
       x: node.x(),
       y: node.y(),
@@ -65,9 +68,13 @@ class RectComponent extends React.Component {
     });
   };
 
-  render() {
-    const { classes, correct, height, hotspotColor, outlineColor, width, x, y, strokeWidth = 5 } = this.props;
+  handleDelete = (id) => {
+    const { onDeleteShape } = this.props;
+    onDeleteShape(id);
+  };
 
+  render() {
+    const { classes, correct, height, hotspotColor, id, outlineColor, width, x, y, strokeWidth = 5 } = this.props;
     return (
       <Group classes={classes.group} onMouseLeave={this.handleMouseLeave} onMouseEnter={this.handleMouseEnter}>
         <Rect
@@ -81,11 +88,24 @@ class RectComponent extends React.Component {
           draggable
           stroke={outlineColor}
           strokeWidth={correct ? strokeWidth : 0}
+          onDragStart={() => this.setState({ isDragging: true })}
           onDragEnd={this.handleOnDragEnd}
+          onTransformStart={() => this.setState({ isDragging: true })}
           onTransformEnd={this.onResizeEnd}
           x={x}
           y={y}
         />
+        {!this.state.isDragging && this.state.hovered && (
+          <DeleteWidget
+            id={id}
+            height={height}
+            width={width}
+            x={x}
+            y={y}
+            outlineColor={outlineColor}
+            handleWidgetClick={this.handleDelete}
+          />
+        )}
         {this.state.hovered && (
           <Transformer
             ref={this.trRef}
@@ -123,6 +143,7 @@ RectComponent.propTypes = {
   height: PropTypes.number.isRequired,
   hotspotColor: PropTypes.string.isRequired,
   onClick: PropTypes.func.isRequired,
+  onDeleteShape: PropTypes.func.isRequired,
   onDragEnd: PropTypes.func.isRequired,
   outlineColor: PropTypes.string.isRequired,
   width: PropTypes.number.isRequired,