@pie-element/hotspot 6.3.2-next.2 → 6.3.2-next.23

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","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"}
+{"version":3,"sources":["../src/utils.js"],"names":["updateImageDimensions","initialDim","nextDim","keepAspectRatio","resizeType","imageAspectRatio","width","height","getDelta","referenceInitialValue","referenceNextValue","currentValue","getUpdatedRectangle","shape","x","y","getUpdatedCircles","radius","getUpdatedPlygon","points","map","point","getUpdatedShapes","shapes","group","getAllShapes","shapesMap","shapesArray","shapesKeys","Object","keys","length","reduce","acc","currentShapeKey","concat","index","groupShapes","rectangles","polygons","circles","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 getUpdatedCircles = (initialDim, nextDim, shape) => ({\n  ...shape,\n  radius: getDelta(initialDim.radius, nextDim.radius, shape.radius),\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    if (shape.group === 'circles') {\n      return getUpdatedCircles(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    circles: [],\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

@@ -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.5.2",
+    "@pie-lib/pie-toolbox": "1.5.4",
     "classnames": "^2.2.6",
     "debug": "^3.1.0",
     "konva": "^3.2.4",

package/configure/src/DeleteWidget.jsx

@@ -5,16 +5,23 @@ import { faDelete } from './icons';
 import { ImageComponent } from '@pie-lib/pie-toolbox/icons';
 import { calculate } from './utils';
 
-const DeleteWidget = ({ height, id, width, x, y, points, outlineColor, handleWidgetClick }) => {
+const DeleteWidget = ({ height, id, width, x, y, points, isCircle, radius, 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;
+  const offset = 20;
+
+  if (isCircle) {
+    // For circles, position the delete icon above the circle
+    positionX = x + radius - offset;
     positionY = y;
+  } else if (points) {
+    // For polygons, compute position based on points
+    const calculated = calculate(points);
+    positionX = calculated.x;
+    positionY = calculated.y;
   } else {
-    positionX = x + width - 20; // 10 pixels to the left
-    positionY = y + height - 20; // 10 pixels above
+    // For rectangles
+    positionX = x + width - offset;
+    positionY = y + height - offset;
   }
 
   return (
@@ -31,13 +38,14 @@ DeleteWidget.propTypes = {
   x: PropTypes.number.isRequired,
   y: PropTypes.number.isRequired,
   handleWidgetClick: PropTypes.func.isRequired,
+  radius: PropTypes.number,
+  isCircle: PropTypes.bool,
   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

@@ -25,6 +25,13 @@ exports[`HotspotContainer render renders 1`] = `
           isActive={false}
         />
       </div>
+      <div
+        onClick={[Function]}
+      >
+        <CircleButton
+          isActive={false}
+        />
+      </div>
       <WithStyles(UploadControl)
         label="Replace Image"
         onInputClick={[Function]}
@@ -157,6 +164,24 @@ exports[`HotspotContainer render renders 1`] = `
                 },
               ],
             },
+            Object {
+              "correct": false,
+              "group": "circles",
+              "id": "6",
+              "index": 6,
+              "radius": 70,
+              "x": 100,
+              "y": 100,
+            },
+            Object {
+              "correct": true,
+              "group": "circles",
+              "id": "7",
+              "index": 7,
+              "radius": 30,
+              "x": 200,
+              "y": 150,
+            },
           ]
         }
         strokeWidth={5}

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

@@ -26,7 +26,6 @@ exports[`HotspotDrawable render renders 1`] = `
   >
     <Layer>
       <WithStyles(RectComponent)
-        addPolygonPoint={[Function]}
         correct={true}
         height={140}
         hotspotColor="rgba(137, 183, 244, 0.65)"
@@ -45,7 +44,6 @@ exports[`HotspotDrawable render renders 1`] = `
         y={1}
       />
       <WithStyles(RectComponent)
-        addPolygonPoint={[Function]}
         height={140}
         hotspotColor="rgba(137, 183, 244, 0.65)"
         id="1"
@@ -63,7 +61,6 @@ exports[`HotspotDrawable render renders 1`] = `
         y={1}
       />
       <WithStyles(RectComponent)
-        addPolygonPoint={[Function]}
         height={140}
         hotspotColor="rgba(137, 183, 244, 0.65)"
         id="2"
@@ -216,7 +213,6 @@ exports[`HotspotDrawable render renders with default strokeWidth 1`] = `
   >
     <Layer>
       <WithStyles(RectComponent)
-        addPolygonPoint={[Function]}
         correct={true}
         height={140}
         hotspotColor="rgba(137, 183, 244, 0.65)"
@@ -235,7 +231,6 @@ exports[`HotspotDrawable render renders with default strokeWidth 1`] = `
         y={1}
       />
       <WithStyles(RectComponent)
-        addPolygonPoint={[Function]}
         height={140}
         hotspotColor="rgba(137, 183, 244, 0.65)"
         id="1"
@@ -253,7 +248,6 @@ exports[`HotspotDrawable render renders with default strokeWidth 1`] = `
         y={1}
       />
       <WithStyles(RectComponent)
-        addPolygonPoint={[Function]}
         height={140}
         hotspotColor="rgba(137, 183, 244, 0.65)"
         id="2"
@@ -406,7 +400,6 @@ exports[`HotspotDrawable render renders with given strokeWidth 1`] = `
   >
     <Layer>
       <WithStyles(RectComponent)
-        addPolygonPoint={[Function]}
         correct={true}
         height={140}
         hotspotColor="rgba(137, 183, 244, 0.65)"
@@ -425,7 +418,6 @@ exports[`HotspotDrawable render renders with given strokeWidth 1`] = `
         y={1}
       />
       <WithStyles(RectComponent)
-        addPolygonPoint={[Function]}
         height={140}
         hotspotColor="rgba(137, 183, 244, 0.65)"
         id="1"
@@ -443,7 +435,6 @@ exports[`HotspotDrawable render renders with given strokeWidth 1`] = `
         y={1}
       />
       <WithStyles(RectComponent)
-        addPolygonPoint={[Function]}
         height={140}
         hotspotColor="rgba(137, 183, 244, 0.65)"
         id="2"

package/configure/src/__tests__/__snapshots__/root.test.js.snap

@@ -110,6 +110,15 @@ exports[`Root render renders 1`] = `
           "partialScoring": false,
           "prompt": "This is the question prompt",
           "shapes": Object {
+            "circles": Array [
+              Object {
+                "correct": false,
+                "id": "6",
+                "radius": 70,
+                "x": 100,
+                "y": 100,
+              },
+            ],
             "polygons": Array [
               Object {
                 "correct": true,
@@ -273,6 +282,15 @@ There should be at least 1 shape selected."
     preserveAspectRatioEnabled={true}
     shapes={
       Object {
+        "circles": Array [
+          Object {
+            "correct": false,
+            "id": "6",
+            "radius": 70,
+            "x": 100,
+            "y": 100,
+          },
+        ],
         "polygons": Array [
           Object {
             "correct": true,

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

@@ -63,6 +63,22 @@ const model = () => ({
           correct: false,
         },
       ],
+      circles: [
+        {
+          id: '6',
+          radius: 70,
+          x: 100,
+          y: 100,
+          correct: false,
+        },
+        {
+          id: '7',
+          radius: 30,
+          x: 200,
+          y: 150,
+          correct: true,
+        },
+      ],
     }),
   ),
   dimensions: {
@@ -175,6 +191,24 @@ describe('HotspotContainer', () => {
         group: 'polygons',
         index: 5,
       },
+      {
+        id: '6',
+        radius: 70,
+        x: 100,
+        y: 100,
+        correct: false,
+        group: 'circles',
+        index: 6,
+      },
+      {
+        id: '7',
+        radius: 30,
+        x: 200,
+        y: 150,
+        correct: true,
+        group: 'circles',
+        index: 7,
+      },
     ];
 
     beforeEach(() => {
@@ -187,7 +221,7 @@ describe('HotspotContainer', () => {
 
     it('onUpdateShapes with new added shape', () => {
       const newShape = {
-        id: '7',
+        id: '8',
         height: 140,
         width: 130,
         x: 280,
@@ -201,7 +235,7 @@ describe('HotspotContainer', () => {
         rectangles: [
           ...initialModel.shapes.rectangles,
           {
-            id: '7',
+            id: '8',
             height: 140,
             width: 130,
             x: 280,
@@ -209,12 +243,13 @@ describe('HotspotContainer', () => {
           },
         ],
         polygons: initialModel.shapes.polygons,
+        circles: initialModel.shapes.circles,
       });
     });
 
     it('onDeleteShape by id', () => {
       console.log('wrapper', wrapper.instance());
-      wrapper.instance().onDeleteShape('7');
+      wrapper.instance().onDeleteShape('8');
       expect(onUpdateShapes).toHaveBeenCalledWith(
         groupShapes([
           { correct: true, group: 'rectangles', height: 140, id: '0', index: 0, width: 130, x: 1, y: 1 },
@@ -256,6 +291,24 @@ describe('HotspotContainer', () => {
               { x: 407, y: 150 },
             ],
           },
+          {
+            id: '6',
+            radius: 70,
+            x: 100,
+            y: 100,
+            correct: false,
+            group: 'circles',
+            index: 6,
+          },
+          {
+            id: '7',
+            radius: 30,
+            x: 200,
+            y: 150,
+            correct: true,
+            group: 'circles',
+            index: 7,
+          },
         ]),
       );
     });
@@ -266,6 +319,7 @@ describe('HotspotContainer', () => {
       expect(onUpdateShapes).toHaveBeenLastCalledWith({
         rectangles: [],
         polygons: [],
+        circles: [],
       });
     });
 
@@ -274,6 +328,7 @@ describe('HotspotContainer', () => {
       expect(onUpdateShapes).toHaveBeenLastCalledWith({
         rectangles: [],
         polygons: [],
+        circles: [],
       });
     });
   });

package/configure/src/__tests__/root.test.js

@@ -80,6 +80,15 @@ const model = () => ({
         id: '5',
       },
     ],
+    circles: [
+      {
+        id: '6',
+        radius: 70,
+        x: 100,
+        y: 100,
+        correct: false,
+      },
+    ],
   },
   dimensions: { height: 300, width: 400 },
   hotspotColor: 'rgba(137, 183, 244, 0.65)',
@@ -177,6 +186,7 @@ describe('Root', () => {
               index: 1,
             },
           ],
+          circles: [],
         });
       });
 
@@ -199,6 +209,7 @@ describe('Root', () => {
               index: 1,
             },
           ],
+          circles: [],
         });
       });
 
@@ -221,6 +232,7 @@ describe('Root', () => {
               index: 1,
             },
           ],
+          circles: [],
         });
       });
 
@@ -243,6 +255,7 @@ describe('Root', () => {
               index: 1,
             },
           ],
+          circles: [],
         });
       });
     });
@@ -284,6 +297,7 @@ describe('Root', () => {
               index: 1,
             },
           ],
+          circles: [],
         });
       });
 
@@ -306,6 +320,7 @@ describe('Root', () => {
               index: 1,
             },
           ],
+          circles: [],
         });
       });
 
@@ -328,6 +343,7 @@ describe('Root', () => {
               ],
             },
           ],
+          circles: [],
         });
       });
 
@@ -350,6 +366,7 @@ describe('Root', () => {
               index: 1,
             },
           ],
+          circles: [],
         });
       });
     });

package/configure/src/__tests__/utils.test.js

@@ -160,6 +160,13 @@ const shapesArray = [
     group: 'polygons',
     index: 3,
   },
+  {
+    radius: 50,
+    x: 300,
+    y: 150,
+    group: 'circles',
+    index: 4,
+  },
 ];
 
 const shapesMap = {
@@ -199,6 +206,14 @@ const shapesMap = {
       index: 3,
     },
   ],
+  circles: [
+    {
+      radius: 50,
+      x: 300,
+      y: 150,
+      index: 4,
+    },
+  ],
 };
 
 describe('getAllShapes', () => {
@@ -217,9 +232,9 @@ describe('groupShapes', () => {
   it.each`
     shapesArray    | expected
     ${shapesArray} | ${shapesMap}
-    ${null}        | ${{ rectangles: [], polygons: [] }}
-    ${undefined}   | ${{ rectangles: [], polygons: [] }}
-    ${[]}          | ${{ rectangles: [], polygons: [] }}
+    ${null}        | ${{ rectangles: [], polygons: [], circles: [] }}
+    ${undefined}   | ${{ rectangles: [], polygons: [], circles: [] }}
+    ${[]}          | ${{ rectangles: [], polygons: [], circles: [] }}
   `('TURNS shapes = $shapesArray INTO $expected', async ({ shapesArray, expected }) => {
     expect(groupShapes(shapesArray)).toEqual(expected);
   });

package/configure/src/buttons/circle.jsx

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 
 export const CircleButton = ({ isActive = false }) => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="48" height="32" viewBox="0 0 48 32" fill="none">
+  <svg xmlns="http://www.w3.org/2000/svg" width="48" height="32" viewBox="56 0 48 32" fill="none">
     <path
       fillRule="evenodd"
       clipRule="evenodd"

package/configure/src/defaults.js

@@ -6,6 +6,7 @@ export default {
     shapes: {
       rectangles: [],
       polygons: [],
+      circles: [],
     },
     multipleCorrect: true,
     partialScoring: false,

package/configure/src/hotspot-circle.jsx

@@ -0,0 +1,145 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Circle, Group, Transformer } from 'react-konva';
+import { withStyles } from '@material-ui/core/styles';
+import DeleteWidget from './DeleteWidget';
+
+class CircleComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      hovered: false,
+      isDragging: false,
+    };
+    this.shapeRef = React.createRef();
+    this.trRef = React.createRef();
+  }
+
+  handleClick = (e) => {
+    const { radius, isDrawing, onClick, id } = this.props;
+    if (radius <= 0 && isDrawing) {
+      return;
+    }
+    e.cancelBubble = true;
+    onClick(id);
+  };
+
+  handleMouseEnter = () => {
+    document.body.style.cursor = 'pointer';
+    this.setState({ hovered: true });
+    this.trRef.current.setNode(this.shapeRef.current);
+    this.trRef.current.getLayer().batchDraw();
+  };
+
+  handleMouseLeave = () => {
+    this.setState({ hovered: false });
+    document.body.style.cursor = 'default';
+  };
+
+  handleOnDragEnd = (e) => {
+    const { onDragEnd, id } = this.props;
+    this.setState({ isDragging: false });
+    onDragEnd(id, {
+      x: e.target.x(),
+      y: e.target.y(),
+    });
+  };
+
+  onResizeEnd = () => {
+    const { onDragEnd, id } = this.props;
+    const node = this.shapeRef.current;
+
+    const newRadius = Math.max(node.radius() * node.scaleX(), 5);
+
+    this.setState({ isDragging: false });
+    onDragEnd(id, {
+      x: node.x(),
+      y: node.y(),
+      radius: newRadius,
+    });
+
+    node.scaleX(1);
+    node.scaleY(1);
+  };
+
+  handleDelete = (id) => {
+    const { onDeleteShape } = this.props;
+    onDeleteShape(id);
+  };
+
+  render() {
+    const { classes, correct, radius, hotspotColor, id, outlineColor, x, y, strokeWidth = 5 } = this.props;
+
+    return (
+      <Group classes={classes.group} onMouseLeave={this.handleMouseLeave} onMouseEnter={this.handleMouseEnter}>
+        <Circle
+          classes={classes.base}
+          ref={this.shapeRef}
+          radius={radius}
+          fill={hotspotColor}
+          onClick={this.handleClick}
+          onTap={this.handleClick}
+          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} radius={radius} x={x} y={y} handleWidgetClick={this.handleDelete} isCircle={true} />
+        )}
+        {this.state.hovered && (
+          <Transformer
+            ref={this.trRef}
+            rotateEnabled={false}
+            keepRatio={true}
+            boundBoxFunc={(oldBox, newBox) => {
+              // Constraint to prevent resizing too small
+              if (newBox.width < 10 || newBox.height < 10) {
+                return oldBox;
+              }
+              return newBox;
+            }}
+          />
+        )}
+      </Group>
+    );
+  }
+}
+
+const styles = () => ({
+  base: {
+    cursor: 'pointer',
+    opacity: 0.5,
+  },
+
+  group: {
+    padding: '12px',
+  },
+});
+
+CircleComponent.propTypes = {
+  classes: PropTypes.object.isRequired,
+  correct: PropTypes.bool,
+  isDrawing: PropTypes.bool.isRequired,
+  id: PropTypes.string.isRequired,
+  radius: PropTypes.number.isRequired,
+  hotspotColor: PropTypes.string.isRequired,
+  onClick: PropTypes.func.isRequired,
+  onDeleteShape: PropTypes.func.isRequired,
+  onDragEnd: PropTypes.func.isRequired,
+  outlineColor: PropTypes.string.isRequired,
+  x: PropTypes.number.isRequired,
+  y: PropTypes.number.isRequired,
+  strokeWidth: PropTypes.number,
+};
+
+CircleComponent.defaultProps = {
+  correct: false,
+};
+
+export default withStyles(styles)(CircleComponent);