@pie-element/hotspot 10.0.0-next.42 → 10.1.0-next.0

package/configure/src/__tests__/hotspot-circle.test.jsx

@@ -0,0 +1,259 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import Konva from 'konva';
+import CircleComponent from '../hotspot-circle';
+
+Konva.isBrowser = false;
+
+jest.mock('react-konva', () => {
+  const React = require('react');
+  return {
+    Circle: React.forwardRef(({ onClick, onTap, onMouseEnter, onMouseLeave, onDragStart, onDragEnd, onTransformStart, onTransformEnd, ...props }, ref) => {
+      const handleClick = (e) => {
+        if (onClick) onClick(e);
+        if (onTap) onTap(e);
+      };
+      return React.createElement('div', {
+        ref,
+        'data-testid': 'circle',
+        onClick: handleClick,
+        onMouseEnter,
+        onMouseLeave,
+        ...props,
+      });
+    }),
+    Group: ({ children, onMouseEnter, onMouseLeave, ...props }) => 
+      React.createElement('div', { 'data-testid': 'group', onMouseEnter, onMouseLeave, ...props }, children),
+    Transformer: React.forwardRef(({ borderStroke, ...props }, ref) => {
+      return React.createElement('div', { ref, 'data-testid': 'transformer', 'data-border-stroke': borderStroke, ...props });
+    }),
+  };
+});
+
+jest.mock('../DeleteWidget', () => {
+  return function DeleteWidget({ id, handleWidgetClick }) {
+    return (
+      <div
+        data-testid="delete-widget"
+        data-id={id}
+        onClick={() => handleWidgetClick(id)}
+      />
+    );
+  };
+});
+
+describe('CircleComponent', () => {
+  let defaultProps;
+
+  beforeEach(() => {
+    defaultProps = {
+      id: 'circle1',
+      x: 100,
+      y: 150,
+      radius: 50,
+      hotspotColor: '#FF0000',
+      selectedHotspotColor: '#00FF00',
+      outlineColor: '#0000FF',
+      hoverOutlineColor: '#FFFF00',
+      correct: false,
+      isDrawing: false,
+      onClick: jest.fn(),
+      onDeleteShape: jest.fn(),
+      onDragEnd: jest.fn(),
+      strokeWidth: 5,
+    };
+
+    document.body.style.cursor = 'default';
+  });
+
+  afterEach(() => {
+    document.body.style.cursor = 'default';
+  });
+
+  describe('rendering', () => {
+    it('should render without crashing', () => {
+      const { container } = render(<CircleComponent {...defaultProps} />);
+      expect(container).toBeTruthy();
+    });
+
+    it('should render Group and Circle', () => {
+      const { getByTestId } = render(<CircleComponent {...defaultProps} />);
+      expect(getByTestId('group')).toBeInTheDocument();
+      expect(getByTestId('circle')).toBeInTheDocument();
+    });
+
+    it('should render with correct radius', () => {
+      const { getByTestId } = render(<CircleComponent {...defaultProps} radius={75} />);
+      const circle = getByTestId('circle');
+      expect(circle).toHaveAttribute('radius', '75');
+    });
+
+    it('should use minimum radius of 5 for invalid radius', () => {
+      const { getByTestId } = render(<CircleComponent {...defaultProps} radius={0} />);
+      const circle = getByTestId('circle');
+      expect(circle).toHaveAttribute('radius', '5');
+    });
+
+    it('should use minimum radius of 5 for NaN radius', () => {
+      const { getByTestId } = render(<CircleComponent {...defaultProps} radius={NaN} />);
+      const circle = getByTestId('circle');
+      expect(circle).toHaveAttribute('radius', '5');
+    });
+
+    it('should use minimum radius of 5 for negative radius', () => {
+      const { getByTestId } = render(<CircleComponent {...defaultProps} radius={-10} />);
+      const circle = getByTestId('circle');
+      expect(circle).toHaveAttribute('radius', '5');
+    });
+
+    it('should render with hotspot color when not correct', () => {
+      const { getByTestId } = render(<CircleComponent {...defaultProps} correct={false} />);
+      const circle = getByTestId('circle');
+      expect(circle).toHaveAttribute('fill', '#FF0000');
+    });
+
+    it('should render with selected color when correct', () => {
+      const { getByTestId } = render(<CircleComponent {...defaultProps} correct={true} />);
+      const circle = getByTestId('circle');
+      expect(circle).toHaveAttribute('fill', '#00FF00');
+    });
+  });
+
+  describe('interactions', () => {
+    it('should call onClick when clicked', () => {
+      const onClick = jest.fn();
+      const { getByTestId } = render(<CircleComponent {...defaultProps} onClick={onClick} />);
+      const circle = getByTestId('circle');
+      
+      fireEvent.click(circle);
+      
+      expect(onClick).toHaveBeenCalledWith('circle1');
+    });
+
+    it('should not call onClick when radius is 0 and isDrawing', () => {
+      const onClick = jest.fn();
+      const { getByTestId } = render(
+        <CircleComponent {...defaultProps} radius={0} isDrawing={true} onClick={onClick} />
+      );
+      const circle = getByTestId('circle');
+      
+      fireEvent.click(circle);
+      
+      expect(onClick).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('hover state', () => {
+    it('should not show Transformer when not hovered', () => {
+      const { queryByTestId } = render(<CircleComponent {...defaultProps} />);
+      
+      expect(queryByTestId('transformer')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('drag functionality', () => {
+    it('should call onDragEnd with new position', () => {
+      const onDragEnd = jest.fn();
+      const { getByTestId } = render(
+        <CircleComponent {...defaultProps} onDragEnd={onDragEnd} />
+      );
+      const circle = getByTestId('circle');
+      
+      const mockEvent = {
+        target: {
+          x: () => 200,
+          y: () => 250,
+        },
+      };
+      
+      if (circle.onDragEnd) {
+        circle.onDragEnd(mockEvent);
+      }
+    });
+  });
+
+  describe('resize functionality', () => {
+    it('should handle resize with minimum radius constraint', () => {
+      const onDragEnd = jest.fn();
+      const { getByTestId } = render(
+        <CircleComponent {...defaultProps} onDragEnd={onDragEnd} />
+      );
+      
+      // This tests the component's ability to handle transforms
+      // In actual usage, the transformer would modify the node's scale
+      const transformer = getByTestId('group');
+      expect(transformer).toBeInTheDocument();
+    });
+  });
+
+  describe('edge cases', () => {
+    it('should handle very large radius', () => {
+      const { getByTestId } = render(<CircleComponent {...defaultProps} radius={500} />);
+      const circle = getByTestId('circle');
+      expect(circle).toHaveAttribute('radius', '500');
+    });
+
+    it('should handle position at origin', () => {
+      const { getByTestId } = render(<CircleComponent {...defaultProps} x={0} y={0} />);
+      const circle = getByTestId('circle');
+      expect(circle).toHaveAttribute('x', '0');
+      expect(circle).toHaveAttribute('y', '0');
+    });
+
+    it('should handle negative positions', () => {
+      const { getByTestId } = render(<CircleComponent {...defaultProps} x={-50} y={-75} />);
+      const circle = getByTestId('circle');
+      expect(circle).toHaveAttribute('x', '-50');
+      expect(circle).toHaveAttribute('y', '-75');
+    });
+
+    it('should use default correct value of false', () => {
+      const { getByTestId } = render(<CircleComponent {...defaultProps} correct={undefined} />);
+      const circle = getByTestId('circle');
+      expect(circle).toHaveAttribute('fill', '#FF0000');
+    });
+
+    it('should handle missing selectedHotspotColor', () => {
+      const { getByTestId } = render(
+        <CircleComponent {...defaultProps} correct={true} selectedHotspotColor={undefined} />
+      );
+      const circle = getByTestId('circle');
+      // Should fall back to hotspotColor
+      expect(circle).toHaveAttribute('fill', '#FF0000');
+    });
+  });
+
+  describe('prop updates', () => {
+    it('should update radius when prop changes', () => {
+      const { getByTestId, rerender } = render(<CircleComponent {...defaultProps} radius={50} />);
+      let circle = getByTestId('circle');
+      expect(circle).toHaveAttribute('radius', '50');
+      
+      rerender(<CircleComponent {...defaultProps} radius={75} />);
+      circle = getByTestId('circle');
+      expect(circle).toHaveAttribute('radius', '75');
+    });
+
+    it('should update color when correct prop changes', () => {
+      const { getByTestId, rerender } = render(<CircleComponent {...defaultProps} correct={false} />);
+      let circle = getByTestId('circle');
+      expect(circle).toHaveAttribute('fill', '#FF0000');
+      
+      rerender(<CircleComponent {...defaultProps} correct={true} />);
+      circle = getByTestId('circle');
+      expect(circle).toHaveAttribute('fill', '#00FF00');
+    });
+
+    it('should update position when props change', () => {
+      const { getByTestId, rerender } = render(<CircleComponent {...defaultProps} x={100} y={150} />);
+      let circle = getByTestId('circle');
+      expect(circle).toHaveAttribute('x', '100');
+      expect(circle).toHaveAttribute('y', '150');
+      
+      rerender(<CircleComponent {...defaultProps} x={200} y={250} />);
+      circle = getByTestId('circle');
+      expect(circle).toHaveAttribute('x', '200');
+      expect(circle).toHaveAttribute('y', '250');
+    });
+  });
+});

package/configure/src/__tests__/hotspot-palette.test.jsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import Palette from '../hotspot-palette';
+
+describe('Palette', () => {
+  let defaultProps;
+
+  beforeEach(() => {
+    defaultProps = {
+      hotspotColor: '#FF0000',
+      outlineColor: '#0000FF',
+      hotspotList: ['#FF0000', '#00FF00', '#0000FF', '#FFFF00'],
+      outlineList: ['#000000', '#0000FF', '#FF0000', '#00FF00'],
+      onHotspotColorChange: jest.fn(),
+      onOutlineColorChange: jest.fn(),
+    };
+  });
+
+  describe('rendering', () => {
+    it('should render without crashing', () => {
+      const { container } = render(<Palette {...defaultProps} />);
+      expect(container).toBeTruthy();
+    });
+  });
+
+  describe('edge cases', () => {
+    it('should handle empty hotspot list gracefully', () => {
+      const { container } = render(<Palette {...defaultProps} hotspotList={[]} />);
+      expect(container).toBeTruthy();
+    });
+
+    it('should handle empty outline list gracefully', () => {
+      const { container } = render(<Palette {...defaultProps} outlineList={[]} />);
+      expect(container).toBeTruthy();
+    });
+  });
+
+  describe('onChange handler', () => {
+    it('should create onChange handler for hotspot', () => {
+      const component = new Palette(defaultProps);
+      const handler = component.onChange('hotspot');
+      expect(typeof handler).toBe('function');
+    });
+
+    it('should create onChange handler for outline', () => {
+      const component = new Palette(defaultProps);
+      const handler = component.onChange('outline');
+      expect(typeof handler).toBe('function');
+    });
+
+    it('should call onHotspotColorChange when hotspot handler is invoked', () => {
+      const onHotspotColorChange = jest.fn();
+      const component = new Palette({ ...defaultProps, onHotspotColorChange });
+      const handler = component.onChange('hotspot');
+      
+      handler({ target: { value: '#00FF00' } });
+      
+      expect(onHotspotColorChange).toHaveBeenCalledWith('#00FF00');
+    });
+
+    it('should call onOutlineColorChange when outline handler is invoked', () => {
+      const onOutlineColorChange = jest.fn();
+      const component = new Palette({ ...defaultProps, onOutlineColorChange });
+      const handler = component.onChange('outline');
+      
+      handler({ target: { value: '#FF0000' } });
+      
+      expect(onOutlineColorChange).toHaveBeenCalledWith('#FF0000');
+    });
+  });
+});

package/configure/src/__tests__/image-konva.test.jsx

@@ -0,0 +1,226 @@
+import React from 'react';
+import { render, waitFor } from '@testing-library/react';
+import Konva from 'konva';
+import ImageComponent from '../image-konva';
+
+Konva.isBrowser = false;
+
+jest.mock('react-konva', () => {
+  const React = require('react');
+  return {
+    Image: (props) => React.createElement('div', { 'data-testid': 'image', ...props }),
+  };
+});
+
+describe('ImageComponent', () => {
+  let defaultProps;
+
+  beforeEach(() => {
+    defaultProps = {
+      src: 'test-image.png',
+      x: 100,
+      y: 150,
+    };
+  });
+
+  describe('rendering', () => {
+    it('should render without crashing', () => {
+      const { container } = render(<ImageComponent {...defaultProps} />);
+      expect(container).toBeTruthy();
+    });
+
+    it('should render Image component', () => {
+      const { getByTestId } = render(<ImageComponent {...defaultProps} />);
+      expect(getByTestId('image')).toBeInTheDocument();
+    });
+
+    it('should render with correct position', () => {
+      const { getByTestId } = render(<ImageComponent {...defaultProps} x={200} y={250} />);
+      const image = getByTestId('image');
+      expect(image).toHaveAttribute('x', '200');
+      expect(image).toHaveAttribute('y', '250');
+    });
+
+    it('should render with fixed dimensions', () => {
+      const { getByTestId } = render(<ImageComponent {...defaultProps} />);
+      const image = getByTestId('image');
+      expect(image).toHaveAttribute('width', '20');
+      expect(image).toHaveAttribute('height', '20');
+    });
+
+    it('should render at origin (0, 0)', () => {
+      const { getByTestId } = render(<ImageComponent {...defaultProps} x={0} y={0} />);
+      const image = getByTestId('image');
+      expect(image).toHaveAttribute('x', '0');
+      expect(image).toHaveAttribute('y', '0');
+    });
+  });
+
+  describe('image loading', () => {
+    it('should load image on mount', async () => {
+      const { getByTestId } = render(<ImageComponent {...defaultProps} />);
+      
+      const image = getByTestId('image');
+      expect(image).toBeInTheDocument();
+    });
+
+    it('should call loadImage on mount', () => {
+      const { container } = render(<ImageComponent {...defaultProps} src="custom-image.jpg" />);
+      
+      expect(container).toBeTruthy();
+    });
+  });
+
+  describe('component lifecycle', () => {
+    it('should reload image when src changes', async () => {
+      const { rerender, container } = render(<ImageComponent {...defaultProps} src="image1.png" />);
+      
+      expect(container).toBeTruthy();
+      
+      rerender(<ImageComponent {...defaultProps} src="image2.png" />);
+      
+      expect(container).toBeTruthy();
+    });
+
+    it('should not reload image when src stays the same', async () => {
+      const { rerender, getByTestId } = render(<ImageComponent {...defaultProps} src="same-image.png" />);
+      
+      const image = getByTestId('image');
+      expect(image).toBeInTheDocument();
+      
+      rerender(<ImageComponent {...defaultProps} src="same-image.png" x={200} y={250} />);
+      
+      const updatedImage = getByTestId('image');
+      expect(updatedImage).toHaveAttribute('x', '200');
+      expect(updatedImage).toHaveAttribute('y', '250');
+    });
+
+    it('should clean up event listener on unmount', () => {
+      const { unmount } = render(<ImageComponent {...defaultProps} />);
+      
+      expect(() => {
+        unmount();
+      }).not.toThrow();
+    });
+
+    it('should handle multiple mount/unmount cycles', () => {
+      const { unmount } = render(<ImageComponent {...defaultProps} />);
+      unmount();
+      
+      expect(() => {
+        render(<ImageComponent {...defaultProps} />);
+      }).not.toThrow();
+    });
+  });
+
+  describe('position updates', () => {
+    it('should update x position', () => {
+      const { getByTestId, rerender } = render(<ImageComponent {...defaultProps} x={100} />);
+      let image = getByTestId('image');
+      expect(image).toHaveAttribute('x', '100');
+      
+      rerender(<ImageComponent {...defaultProps} x={200} />);
+      image = getByTestId('image');
+      expect(image).toHaveAttribute('x', '200');
+    });
+
+    it('should update y position', () => {
+      const { getByTestId, rerender } = render(<ImageComponent {...defaultProps} y={150} />);
+      let image = getByTestId('image');
+      expect(image).toHaveAttribute('y', '150');
+      
+      rerender(<ImageComponent {...defaultProps} y={250} />);
+      image = getByTestId('image');
+      expect(image).toHaveAttribute('y', '250');
+    });
+
+    it('should update both x and y positions', () => {
+      const { getByTestId, rerender } = render(<ImageComponent {...defaultProps} x={100} y={150} />);
+      let image = getByTestId('image');
+      expect(image).toHaveAttribute('x', '100');
+      expect(image).toHaveAttribute('y', '150');
+      
+      rerender(<ImageComponent {...defaultProps} x={300} y={400} />);
+      image = getByTestId('image');
+      expect(image).toHaveAttribute('x', '300');
+      expect(image).toHaveAttribute('y', '400');
+    });
+  });
+
+  describe('edge cases', () => {
+    it('should handle negative positions', () => {
+      const { getByTestId } = render(<ImageComponent {...defaultProps} x={-50} y={-75} />);
+      const image = getByTestId('image');
+      expect(image).toHaveAttribute('x', '-50');
+      expect(image).toHaveAttribute('y', '-75');
+    });
+
+    it('should handle very large positions', () => {
+      const { getByTestId } = render(<ImageComponent {...defaultProps} x={10000} y={20000} />);
+      const image = getByTestId('image');
+      expect(image).toHaveAttribute('x', '10000');
+      expect(image).toHaveAttribute('y', '20000');
+    });
+
+    it('should handle data URI as src', () => {
+      const dataUri = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==';
+      const { container } = render(<ImageComponent {...defaultProps} src={dataUri} />);
+      
+      expect(container).toBeTruthy();
+    });
+
+    it('should handle SVG as src', () => {
+      const { container } = render(<ImageComponent {...defaultProps} src="icon.svg" />);
+      expect(container).toBeTruthy();
+    });
+
+    it('should handle empty src', () => {
+      const { container } = render(<ImageComponent {...defaultProps} src="" />);
+      expect(container).toBeTruthy();
+    });
+
+    it('should handle URL with query parameters', () => {
+      const srcWithParams = 'image.png?width=100&height=100';
+      const { container } = render(<ImageComponent {...defaultProps} src={srcWithParams} />);
+      
+      expect(container).toBeTruthy();
+    });
+
+    it('should handle relative paths', () => {
+      const { container } = render(<ImageComponent {...defaultProps} src="./images/icon.png" />);
+      expect(container).toBeTruthy();
+    });
+
+    it('should handle absolute paths', () => {
+      const { container } = render(<ImageComponent {...defaultProps} src="/assets/icon.png" />);
+      expect(container).toBeTruthy();
+    });
+  });
+
+  describe('image state', () => {
+    it('should initially render without image loaded', () => {
+      const { getByTestId } = render(<ImageComponent {...defaultProps} />);
+      const image = getByTestId('image');
+      expect(image).toBeInTheDocument();
+    });
+
+    it('should render component regardless of image load state', () => {
+      const { getByTestId } = render(<ImageComponent {...defaultProps} />);
+      const image = getByTestId('image');
+      expect(image).toBeInTheDocument();
+    });
+  });
+
+  describe('error handling', () => {
+    it('should handle image load error gracefully', () => {
+      const { container } = render(<ImageComponent {...defaultProps} src="nonexistent.png" />);
+      
+      const imgElements = document.querySelectorAll('img[src="nonexistent.png"]');
+      imgElements.forEach(img => {
+        img.dispatchEvent(new Event('error'));
+      });
+      
+      expect(container).toBeTruthy();
+    });
+  });
+});

package/configure/src/defaults.js

@@ -20,6 +20,7 @@ export default {
   },
   configuration: {
     baseInputConfiguration: {
+      h3: { disabled: true },
       audio: { disabled: false },
       video: { disabled: false },
       image: { disabled: false },

package/configure/src/hotspot-circle.jsx

@@ -109,7 +109,6 @@ class CircleComponent extends React.Component {
           onTransformEnd={this.onResizeEnd}
           x={x}
           y={y}
-          opacity={0.5}
           cursor="pointer"
         />
 

package/configure/src/hotspot-drawable.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Layer, Stage } from 'react-konva';
-import cloneDeep from 'lodash/cloneDeep';
+import { cloneDeep } from 'lodash-es';
 import { styled } from '@mui/material/styles';
 
 import Rectangle from './hotspot-rectangle';

package/configure/src/hotspot-polygon.jsx

@@ -232,7 +232,6 @@ class PolComponent extends React.Component {
           onDragEnd={(e) => this.handleOnDragEnd(e, true)}
           x={x}
           y={y}
-          opacity={0.5}
         />
 
         {showPoints &&

package/configure/src/hotspot-rectangle.jsx

@@ -119,7 +119,6 @@ class RectComponent extends React.Component {
           onTransformEnd={this.onResizeEnd}
           x={x}
           y={y}
-          opacity={0.5}
           cursor="pointer"
         />
         {!this.state.isDragging && this.state.hovered && (

package/configure/src/utils.js

@@ -1,4 +1,4 @@
-import cloneDeep from 'lodash/cloneDeep';
+import { cloneDeep } from 'lodash-es';
 import { SHAPE_GROUPS } from './shapes';
 
 const updateImageDimensions = (initialDim, nextDim, keepAspectRatio, resizeType) => {

package/controller/lib/index.js

@@ -10,7 +10,7 @@ exports.normalize = void 0;
 exports.outcome = outcome;
 exports.validate = void 0;
 var _debug = _interopRequireDefault(require("debug"));
-var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
+var _lodashEs = require("lodash-es");
 var _controllerUtils = require("@pie-lib/controller-utils");
 var _utils = require("./utils");
 var _defaults = _interopRequireDefault(require("./defaults"));
@@ -160,7 +160,7 @@ const getScore = (config, session, env = {}) => {
 function outcome(config, session, env = {}) {
   return new Promise(resolve => {
     log('outcome...');
-    if (!session || (0, _isEmpty.default)(session)) {
+    if (!session || (0, _lodashEs.isEmpty)(session)) {
       resolve({
         score: 0,
         empty: true