@pie-element/hotspot 10.0.0-next.43 → 10.1.2-next.1

package/configure/lib/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","names":["_cloneDeep","_interopRequireDefault","require","_shapes","updateImageDimensions","initialDim","nextDim","keepAspectRatio","resizeType","imageAspectRatio","width","height","exports","getDelta","referenceInitialValue","referenceNextValue","currentValue","getUpdatedRectangle","shape","x","y","getUpdatedCircles","radius","getUpdatedPolygon","points","map","point","getUpdatedShapes","shapes","group","SHAPE_GROUPS","RECTANGLES","POLYGONS","CIRCLES","getAllShapes","shapesMap","shapesArray","shapesKeys","Object","keys","length","reduce","acc","currentShapeKey","concat","index","groupShapes","rectangles","polygons","circles","shapeProps","cloneDeep","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"],"sources":["../src/utils.js"],"sourcesContent":["import cloneDeep from 'lodash/cloneDeep';\nimport { SHAPE_GROUPS } from './shapes';\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.width, nextDim.width, shape.radius),\n  x: getDelta(initialDim.width, nextDim.width, shape.x),\n  y: getDelta(initialDim.height, nextDim.height, shape.y),\n});\n\nconst getUpdatedPolygon = (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 === SHAPE_GROUPS.RECTANGLES) {\n      return getUpdatedRectangle(initialDim, nextDim, shape);\n    }\n\n    if (shape.group === SHAPE_GROUPS.POLYGONS) {\n      return getUpdatedPolygon(initialDim, nextDim, shape);\n    }\n\n    if (shape.group === SHAPE_GROUPS.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  getUpdatedPolygon,\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"utils.js","names":["_lodashEs","require","_shapes","updateImageDimensions","initialDim","nextDim","keepAspectRatio","resizeType","imageAspectRatio","width","height","exports","getDelta","referenceInitialValue","referenceNextValue","currentValue","getUpdatedRectangle","shape","x","y","getUpdatedCircles","radius","getUpdatedPolygon","points","map","point","getUpdatedShapes","shapes","group","SHAPE_GROUPS","RECTANGLES","POLYGONS","CIRCLES","getAllShapes","shapesMap","shapesArray","shapesKeys","Object","keys","length","reduce","acc","currentShapeKey","concat","index","groupShapes","rectangles","polygons","circles","shapeProps","cloneDeep","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"],"sources":["../src/utils.js"],"sourcesContent":["import { cloneDeep } from 'lodash-es';\nimport { SHAPE_GROUPS } from './shapes';\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.width, nextDim.width, shape.radius),\n  x: getDelta(initialDim.width, nextDim.width, shape.x),\n  y: getDelta(initialDim.height, nextDim.height, shape.y),\n});\n\nconst getUpdatedPolygon = (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 === SHAPE_GROUPS.RECTANGLES) {\n      return getUpdatedRectangle(initialDim, nextDim, shape);\n    }\n\n    if (shape.group === SHAPE_GROUPS.POLYGONS) {\n      return getUpdatedPolygon(initialDim, nextDim, shape);\n    }\n\n    if (shape.group === SHAPE_GROUPS.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  getUpdatedPolygon,\n};\n"],"mappings":"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","ignoreList":[]}

package/configure/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pie-element/hotspot-configure",
   "private": true,
-  "version": "9.0.0-beta.1",
+  "version": "9.1.2-next.1",
   "description": "",
   "main": "lib/index.js",
   "module": "src/index.js",
@@ -12,14 +12,14 @@
     "@mui/icons-material": "^7.3.4",
     "@mui/material": "^7.3.4",
     "@pie-framework/pie-configure-events": "^1.3.0",
-    "@pie-lib/config-ui": "12.1.1-next.0",
-    "@pie-lib/editable-html-tip-tap": "1.1.1-next.0",
+    "@pie-lib/config-ui": "12.2.0-next.11",
+    "@pie-lib/editable-html-tip-tap": "1.2.0-next.11",
     "debug": "^4.1.1",
     "konva": "8.3.0",
-    "lodash": "^4.17.15",
+    "lodash-es": "^4.17.23",
     "prop-types": "^15.7.2",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
     "react-konva": "^18.2.14"
   },
   "license": "ISC"

package/configure/src/__tests__/DeleteWidget.test.jsx

@@ -0,0 +1,366 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import Konva from 'konva';
+import DeleteWidget from '../DeleteWidget';
+
+Konva.isBrowser = false;
+
+jest.mock('react-konva', () => {
+  const React = require('react');
+  return {
+    Group: ({ children, onClick, ...props }) => {
+      return React.createElement('div', { 'data-testid': 'group', onClick, ...props }, children);
+    },
+  };
+});
+
+jest.mock('../image-konva', () => {
+  return function ImageComponent({ src, x, y }) {
+    return <div data-testid="delete-icon" data-src={src} data-x={x} data-y={y} />;
+  };
+});
+
+jest.mock('../utils', () => ({
+  calculate: jest.fn((points) => {
+    const xValues = points.map(p => p.x);
+    const yValues = points.map(p => p.y);
+    return {
+      x: Math.max(...xValues),
+      y: Math.max(...yValues),
+    };
+  }),
+}));
+
+describe('DeleteWidget', () => {
+  let defaultProps;
+
+  beforeEach(() => {
+    defaultProps = {
+      id: 'shape1',
+      x: 100,
+      y: 150,
+      handleWidgetClick: jest.fn(),
+    };
+  });
+
+  describe('rendering', () => {
+    it('should render without crashing', () => {
+      const { container } = render(<DeleteWidget {...defaultProps} width={200} height={150} />);
+      expect(container).toBeTruthy();
+    });
+
+    it('should render Group component', () => {
+      const { getByTestId } = render(<DeleteWidget {...defaultProps} width={200} height={150} />);
+      expect(getByTestId('group')).toBeInTheDocument();
+    });
+
+    it('should render delete icon', () => {
+      const { getByTestId } = render(<DeleteWidget {...defaultProps} width={200} height={150} />);
+      expect(getByTestId('delete-icon')).toBeInTheDocument();
+    });
+  });
+
+  describe('rectangle positioning', () => {
+    it('should position delete icon at bottom-right for rectangles', () => {
+      const { getByTestId } = render(
+        <DeleteWidget
+          {...defaultProps}
+          x={100}
+          y={150}
+          width={200}
+          height={150}
+        />
+      );
+      
+      const icon = getByTestId('delete-icon');
+      // positionX = x + width - offset = 100 + 200 - 20 = 280
+      // positionY = y + height - offset = 150 + 150 - 20 = 280
+      expect(icon).toHaveAttribute('data-x', '280');
+      expect(icon).toHaveAttribute('data-y', '280');
+    });
+
+    it('should handle different rectangle dimensions', () => {
+      const { getByTestId } = render(
+        <DeleteWidget
+          {...defaultProps}
+          x={50}
+          y={75}
+          width={300}
+          height={200}
+        />
+      );
+      
+      const icon = getByTestId('delete-icon');
+      // positionX = 50 + 300 - 20 = 330
+      // positionY = 75 + 200 - 20 = 255
+      expect(icon).toHaveAttribute('data-x', '330');
+      expect(icon).toHaveAttribute('data-y', '255');
+    });
+  });
+
+  describe('circle positioning', () => {
+    it('should position delete icon above circle', () => {
+      const { getByTestId } = render(
+        <DeleteWidget
+          {...defaultProps}
+          x={200}
+          y={200}
+          isCircle={true}
+          radius={50}
+        />
+      );
+      
+      const icon = getByTestId('delete-icon');
+      // positionX = x + radius - offset = 200 + 50 - 20 = 230
+      // positionY = y = 200
+      expect(icon).toHaveAttribute('data-x', '230');
+      expect(icon).toHaveAttribute('data-y', '200');
+    });
+
+    it('should handle different circle sizes', () => {
+      const { getByTestId } = render(
+        <DeleteWidget
+          {...defaultProps}
+          x={100}
+          y={100}
+          isCircle={true}
+          radius={75}
+        />
+      );
+      
+      const icon = getByTestId('delete-icon');
+      // positionX = 100 + 75 - 20 = 155
+      // positionY = 100
+      expect(icon).toHaveAttribute('data-x', '155');
+      expect(icon).toHaveAttribute('data-y', '100');
+    });
+
+    it('should handle small circles', () => {
+      const { getByTestId } = render(
+        <DeleteWidget
+          {...defaultProps}
+          x={150}
+          y={150}
+          isCircle={true}
+          radius={20}
+        />
+      );
+      
+      const icon = getByTestId('delete-icon');
+      // positionX = 150 + 20 - 20 = 150
+      // positionY = 150
+      expect(icon).toHaveAttribute('data-x', '150');
+      expect(icon).toHaveAttribute('data-y', '150');
+    });
+  });
+
+  describe('polygon positioning', () => {
+    it('should position delete icon using calculate function for polygons', () => {
+      const { calculate } = require('../utils');
+      const points = [
+        { x: 10, y: 10 },
+        { x: 100, y: 20 },
+        { x: 90, y: 90 },
+        { x: 20, y: 80 },
+      ];
+      
+      const { getByTestId } = render(
+        <DeleteWidget
+          {...defaultProps}
+          points={points}
+        />
+      );
+      
+      expect(calculate).toHaveBeenCalledWith(points);
+      
+      const icon = getByTestId('delete-icon');
+      // Based on mocked calculate function: max x = 100, max y = 90
+      expect(icon).toHaveAttribute('data-x', '100');
+      expect(icon).toHaveAttribute('data-y', '90');
+    });
+
+    it('should handle triangular polygons', () => {
+      const { calculate } = require('../utils');
+      const points = [
+        { x: 50, y: 0 },
+        { x: 100, y: 100 },
+        { x: 0, y: 100 },
+      ];
+      
+      render(
+        <DeleteWidget
+          {...defaultProps}
+          points={points}
+        />
+      );
+      
+      expect(calculate).toHaveBeenCalledWith(points);
+    });
+
+    it('should handle complex polygons', () => {
+      const { calculate } = require('../utils');
+      const points = [
+        { x: 10, y: 10 },
+        { x: 50, y: 5 },
+        { x: 90, y: 10 },
+        { x: 100, y: 50 },
+        { x: 90, y: 90 },
+        { x: 50, y: 100 },
+        { x: 10, y: 90 },
+        { x: 0, y: 50 },
+      ];
+      
+      render(
+        <DeleteWidget
+          {...defaultProps}
+          points={points}
+        />
+      );
+      
+      expect(calculate).toHaveBeenCalledWith(points);
+    });
+  });
+
+  describe('interactions', () => {
+    it('should call handleWidgetClick when clicked', () => {
+      const handleWidgetClick = jest.fn();
+      const { getByTestId } = render(
+        <DeleteWidget
+          {...defaultProps}
+          handleWidgetClick={handleWidgetClick}
+          width={200}
+          height={150}
+        />
+      );
+      
+      const group = getByTestId('group');
+      fireEvent.click(group);
+      
+      expect(handleWidgetClick).toHaveBeenCalledWith('shape1');
+    });
+
+    it('should call handleWidgetClick with correct id for circles', () => {
+      const handleWidgetClick = jest.fn();
+      const { getByTestId } = render(
+        <DeleteWidget
+          {...defaultProps}
+          id="circle1"
+          handleWidgetClick={handleWidgetClick}
+          isCircle={true}
+          radius={50}
+        />
+      );
+      
+      const group = getByTestId('group');
+      fireEvent.click(group);
+      
+      expect(handleWidgetClick).toHaveBeenCalledWith('circle1');
+    });
+
+    it('should call handleWidgetClick with correct id for polygons', () => {
+      const handleWidgetClick = jest.fn();
+      const points = [
+        { x: 10, y: 10 },
+        { x: 100, y: 20 },
+        { x: 50, y: 100 },
+      ];
+      const { getByTestId } = render(
+        <DeleteWidget
+          {...defaultProps}
+          id="polygon1"
+          handleWidgetClick={handleWidgetClick}
+          points={points}
+        />
+      );
+      
+      const group = getByTestId('group');
+      fireEvent.click(group);
+      
+      expect(handleWidgetClick).toHaveBeenCalledWith('polygon1');
+    });
+  });
+
+  describe('edge cases', () => {
+    it('should handle zero dimensions for rectangles', () => {
+      const { getByTestId } = render(
+        <DeleteWidget
+          {...defaultProps}
+          x={0}
+          y={0}
+          width={0}
+          height={0}
+        />
+      );
+      
+      const icon = getByTestId('delete-icon');
+      // positionX = 0 + 0 - 20 = -20
+      // positionY = 0 + 0 - 20 = -20
+      expect(icon).toHaveAttribute('data-x', '-20');
+      expect(icon).toHaveAttribute('data-y', '-20');
+    });
+
+    it('should handle zero radius for circles', () => {
+      const { getByTestId } = render(
+        <DeleteWidget
+          {...defaultProps}
+          x={100}
+          y={100}
+          isCircle={true}
+          radius={0}
+        />
+      );
+      
+      const icon = getByTestId('delete-icon');
+      // positionX = 100 + 0 - 20 = 80
+      // positionY = 100
+      expect(icon).toHaveAttribute('data-x', '80');
+      expect(icon).toHaveAttribute('data-y', '100');
+    });
+
+    it('should handle negative coordinates', () => {
+      const { getByTestId } = render(
+        <DeleteWidget
+          {...defaultProps}
+          x={-50}
+          y={-75}
+          width={100}
+          height={100}
+        />
+      );
+      
+      const icon = getByTestId('delete-icon');
+      // positionX = -50 + 100 - 20 = 30
+      // positionY = -75 + 100 - 20 = 5
+      expect(icon).toHaveAttribute('data-x', '30');
+      expect(icon).toHaveAttribute('data-y', '5');
+    });
+
+    it('should handle single point polygon', () => {
+      const points = [{ x: 50, y: 50 }];
+      
+      const { container } = render(
+        <DeleteWidget
+          {...defaultProps}
+          points={points}
+        />
+      );
+      
+      expect(container).toBeTruthy();
+    });
+  });
+
+  describe('icon rendering', () => {
+    it('should pass correct src to ImageComponent', () => {
+      const { getByTestId } = render(
+        <DeleteWidget
+          {...defaultProps}
+          width={200}
+          height={150}
+        />
+      );
+      
+      const icon = getByTestId('delete-icon');
+      expect(icon).toHaveAttribute('data-src');
+    });
+  });
+});

package/configure/src/__tests__/button.test.jsx

@@ -0,0 +1,198 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import RawButton from '../button';
+
+describe('RawButton', () => {
+  describe('rendering', () => {
+    it('should render without crashing', () => {
+      const { container } = render(<RawButton />);
+      expect(container).toBeTruthy();
+    });
+
+    it('should render with default label', () => {
+      const { getByText } = render(<RawButton />);
+      expect(getByText('Add')).toBeInTheDocument();
+    });
+
+    it('should render with custom label', () => {
+      const { getByText } = render(<RawButton label="Custom Label" />);
+      expect(getByText('Custom Label')).toBeInTheDocument();
+    });
+
+    it('should render as a button element', () => {
+      const { getByRole } = render(<RawButton label="Test Button" />);
+      expect(getByRole('button')).toBeInTheDocument();
+    });
+
+    it('should apply custom className', () => {
+      const { getByRole } = render(<RawButton label="Test" className="custom-class" />);
+      const button = getByRole('button');
+      expect(button).toHaveClass('custom-class');
+    });
+  });
+
+  describe('interactions', () => {
+    it('should call onClick when clicked', () => {
+      const onClick = jest.fn();
+      const { getByRole } = render(<RawButton label="Click Me" onClick={onClick} />);
+      
+      const button = getByRole('button');
+      fireEvent.click(button);
+      
+      expect(onClick).toHaveBeenCalledTimes(1);
+    });
+
+    it('should not call onClick when disabled', () => {
+      const onClick = jest.fn();
+      const { getByRole } = render(<RawButton label="Disabled" onClick={onClick} disabled={true} />);
+      
+      const button = getByRole('button');
+      fireEvent.click(button);
+      
+      expect(onClick).not.toHaveBeenCalled();
+    });
+
+    it('should call onClick multiple times', () => {
+      const onClick = jest.fn();
+      const { getByRole } = render(<RawButton label="Multi Click" onClick={onClick} />);
+      
+      const button = getByRole('button');
+      fireEvent.click(button);
+      fireEvent.click(button);
+      fireEvent.click(button);
+      
+      expect(onClick).toHaveBeenCalledTimes(3);
+    });
+  });
+
+  describe('disabled state', () => {
+    it('should be enabled by default', () => {
+      const { getByRole } = render(<RawButton label="Test" />);
+      const button = getByRole('button');
+      expect(button).not.toBeDisabled();
+    });
+
+    it('should be disabled when disabled prop is true', () => {
+      const { getByRole } = render(<RawButton label="Test" disabled={true} />);
+      const button = getByRole('button');
+      expect(button).toBeDisabled();
+    });
+
+    it('should be enabled when disabled prop is false', () => {
+      const { getByRole } = render(<RawButton label="Test" disabled={false} />);
+      const button = getByRole('button');
+      expect(button).not.toBeDisabled();
+    });
+  });
+
+  describe('default props', () => {
+    it('should use default onClick when not provided', () => {
+      const { getByRole } = render(<RawButton label="Test" />);
+      const button = getByRole('button');
+      
+      // Should not throw error when clicked
+      expect(() => fireEvent.click(button)).not.toThrow();
+    });
+
+    it('should use default label "Add" when not provided', () => {
+      const { getByText } = render(<RawButton />);
+      expect(getByText('Add')).toBeInTheDocument();
+    });
+
+    it('should use empty className by default', () => {
+      const { getByRole } = render(<RawButton label="Test" />);
+      const button = getByRole('button');
+      expect(button.className).toBeTruthy(); // Will have MUI classes
+    });
+
+    it('should be enabled by default', () => {
+      const { getByRole } = render(<RawButton label="Test" />);
+      const button = getByRole('button');
+      expect(button).not.toBeDisabled();
+    });
+  });
+
+  describe('variant and size', () => {
+    it('should render with contained variant', () => {
+      const { getByRole } = render(<RawButton label="Test" />);
+      const button = getByRole('button');
+      expect(button).toHaveClass('MuiButton-contained');
+    });
+
+    it('should render with small size', () => {
+      const { getByRole } = render(<RawButton label="Test" />);
+      const button = getByRole('button');
+      expect(button).toHaveClass('MuiButton-sizeSmall');
+    });
+  });
+
+  describe('edge cases', () => {
+    it('should handle empty label', () => {
+      const { getByRole } = render(<RawButton label="" />);
+      const button = getByRole('button');
+      expect(button).toBeInTheDocument();
+      expect(button.textContent).toBe('');
+    });
+
+    it('should handle very long label', () => {
+      const longLabel = 'This is a very long button label that might wrap or overflow';
+      const { getByText } = render(<RawButton label={longLabel} />);
+      expect(getByText(longLabel)).toBeInTheDocument();
+    });
+
+    it('should handle special characters in label', () => {
+      const specialLabel = '!@#$%^&*()_+-=[]{}|;:",.<>?/~`';
+      const { getByText } = render(<RawButton label={specialLabel} />);
+      expect(getByText(specialLabel)).toBeInTheDocument();
+    });
+
+    it('should handle Unicode characters in label', () => {
+      const unicodeLabel = '🚀 Launch 你好 مرحبا';
+      const { getByText } = render(<RawButton label={unicodeLabel} />);
+      expect(getByText(unicodeLabel)).toBeInTheDocument();
+    });
+
+    it('should handle null onClick gracefully with default', () => {
+      const { getByRole } = render(<RawButton label="Test" onClick={null} />);
+      const button = getByRole('button');
+      
+      // Should use default onClick
+      expect(() => fireEvent.click(button)).not.toThrow();
+    });
+  });
+
+  describe('prop updates', () => {
+    it('should update label when prop changes', () => {
+      const { getByText, rerender } = render(<RawButton label="Initial" />);
+      expect(getByText('Initial')).toBeInTheDocument();
+      
+      rerender(<RawButton label="Updated" />);
+      expect(getByText('Updated')).toBeInTheDocument();
+    });
+
+    it('should update disabled state when prop changes', () => {
+      const { getByRole, rerender } = render(<RawButton label="Test" disabled={false} />);
+      const button = getByRole('button');
+      expect(button).not.toBeDisabled();
+      
+      rerender(<RawButton label="Test" disabled={true} />);
+      expect(button).toBeDisabled();
+    });
+
+    it('should update onClick handler when prop changes', () => {
+      const onClick1 = jest.fn();
+      const onClick2 = jest.fn();
+      const { getByRole, rerender } = render(<RawButton label="Test" onClick={onClick1} />);
+      
+      const button = getByRole('button');
+      fireEvent.click(button);
+      expect(onClick1).toHaveBeenCalledTimes(1);
+      expect(onClick2).not.toHaveBeenCalled();
+      
+      rerender(<RawButton label="Test" onClick={onClick2} />);
+      fireEvent.click(button);
+      expect(onClick1).toHaveBeenCalledTimes(1);
+      expect(onClick2).toHaveBeenCalledTimes(1);
+    });
+  });
+});