@pie-element/hotspot 11.1.2-next.5 → 11.1.3

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

@@ -0,0 +1,400 @@
+import { render } from '@testing-library/react';
+import React from 'react';
+import { Root } from '../root';
+import defaultValues from '../defaults';
+
+jest.mock('react-konva', () => {
+  const React = require('react');
+  return {
+    Stage: ({ children, ...props }) => React.createElement('div', { 'data-testid': 'stage', ...props }, children),
+    Layer: ({ children, ...props }) => React.createElement('div', { 'data-testid': 'layer', ...props }, children),
+    Rect: (props) => React.createElement('div', { 'data-testid': 'rect', ...props }),
+    Circle: (props) => React.createElement('div', { 'data-testid': 'circle', ...props }),
+    Line: (props) => React.createElement('div', { 'data-testid': 'line', ...props }),
+    Group: ({ children, ...props }) => React.createElement('div', { 'data-testid': 'group', ...props }, children),
+    Image: (props) => React.createElement('div', { 'data-testid': 'image', ...props }),
+  };
+});
+
+jest.mock('@pie-lib/config-ui', () => ({
+  InputContainer: (props) => <div {...props}>{props.children}</div>,
+  NumberTextField: (props) => <input type="number" {...props} />,
+  choiceUtils: {
+    firstAvailableIndex: jest.fn(),
+  },
+  settings: {
+    Panel: (props) => <div {...props} />,
+    toggle: jest.fn(),
+    radio: jest.fn(),
+    dropdown: jest.fn(),
+  },
+  layout: {
+    ConfigLayout: ({ children }) => <div>{children}</div>,
+  },
+}));
+
+const model = () => ({
+  prompt: 'This is the question prompt',
+  imageUrl: 'https://cdn.fluence.net/image/0240eb1455ce4c4bb6180232347b6aef_W',
+  shapes: {
+    rectangles: [
+      {
+        id: '0',
+        height: 140,
+        width: 130,
+        x: 1,
+        y: 1,
+        correct: true,
+      },
+      {
+        id: '1',
+        height: 140,
+        width: 130,
+        x: 140,
+        y: 1,
+      },
+      {
+        id: '2',
+        height: 140,
+        width: 130,
+        x: 280,
+        y: 1,
+      },
+    ],
+    polygons: [
+      {
+        points: [
+          { x: 1, y: 148 },
+          { x: 1, y: 288 },
+          { y: 288, x: 129 },
+          { y: 148, x: 129 },
+        ],
+        correct: true,
+        id: '3',
+      },
+      {
+        id: '4',
+        points: [
+          { y: 151, x: 141 },
+          { y: 289, x: 141 },
+          { y: 289, x: 269 },
+          { x: 269, y: 151 },
+        ],
+        correct: false,
+      },
+      {
+        points: [
+          { x: 279, y: 149.99999999999997 },
+          { x: 279, y: 289 },
+          { x: 407, y: 289 },
+          {
+            x: 407,
+            y: 149.99999999999997,
+          },
+        ],
+        correct: false,
+        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)',
+  hotspotList: ['rgba(137, 183, 244, 0.65)', 'rgba(217, 30, 24, 0.65)', 'rgba(254, 241, 96, 0.65)'],
+  outlineColor: 'blue',
+  outlineList: ['blue', 'red', 'yellow'],
+  configure: {},
+  multipleCorrect: true,
+  partialScoring: false,
+});
+
+describe('Root', () => {
+  let initialModel = model();
+
+  describe('logic', () => {
+    let onColorChanged = jest.fn();
+
+    const createInstance = (config, onUpdateImageDimension, onUpdateShapes) => {
+      const props = {
+        classes: {},
+        configuration: config || defaultValues.configuration,
+        model: {
+          ...initialModel,
+          dimensions: { width: 200, height: 300 },
+          shapes: {
+            rectangles: [{ x: 10, y: 10, height: 100, width: 100 }],
+            polygons: [
+              {
+                points: [
+                  { x: 0, y: 200 },
+                  { x: 200, y: 200 },
+                  { x: 100, y: 300 },
+                ],
+              },
+            ],
+          },
+        },
+        onColorChanged,
+        onUpdateImageDimension,
+        onUpdateShapes,
+      };
+
+      return new Root(props);
+    };
+
+    describe('handleColorChange', () => {
+      it('calls onColorChanged', () => {
+        const instance = createInstance();
+        instance.handleColorChange('type', 'color');
+
+        expect(onColorChanged).toHaveBeenLastCalledWith('typeColor', 'color');
+      });
+    });
+
+    describe('KEEP IMAGE ASPECT RATIO: handleOnUpdateImageDimensions: calls onUpdateImageDimension & onUpdateShapes', () => {
+      let onUpdateImageDimension = jest.fn();
+      let onUpdateShapes = jest.fn();
+
+      it('increase width with 100%:', () => {
+        const instance = createInstance(undefined, onUpdateImageDimension, onUpdateShapes);
+        instance.handleOnUpdateImageDimensions(400, 'width');
+
+        expect(onUpdateImageDimension).toBeCalledWith({
+          width: 400,
+          height: 600,
+        });
+        expect(onUpdateShapes).toBeCalledWith({
+          rectangles: [{ x: 20, y: 20, height: 200, width: 200, index: 0 }],
+          polygons: [
+            {
+              points: [
+                { x: 0, y: 400 },
+                { x: 400, y: 400 },
+                { x: 200, y: 600 },
+              ],
+              index: 1,
+            },
+          ],
+          circles: [],
+        });
+      });
+
+      it('decrease width with 50%', () => {
+        const instance = createInstance(undefined, onUpdateImageDimension, onUpdateShapes);
+        instance.handleOnUpdateImageDimensions(100, 'width');
+
+        expect(onUpdateImageDimension).toBeCalledWith({
+          width: 100,
+          height: 150,
+        });
+        expect(onUpdateShapes).toBeCalledWith({
+          rectangles: [{ x: 5, y: 5, height: 50, width: 50, index: 0 }],
+          polygons: [
+            {
+              points: [
+                { x: 0, y: 100 },
+                { x: 100, y: 100 },
+                { x: 50, y: 150 },
+              ],
+              index: 1,
+            },
+          ],
+          circles: [],
+        });
+      });
+
+      it('increase height with 50%:', () => {
+        const instance = createInstance(undefined, onUpdateImageDimension, onUpdateShapes);
+        instance.handleOnUpdateImageDimensions(450, 'height');
+
+        expect(onUpdateImageDimension).toBeCalledWith({
+          width: 300,
+          height: 450,
+        });
+        expect(onUpdateShapes).toBeCalledWith({
+          rectangles: [{ x: 15, y: 15, height: 150, width: 150, index: 0 }],
+          polygons: [
+            {
+              points: [
+                { x: 0, y: 300 },
+                { x: 300, y: 300 },
+                { x: 150, y: 450 },
+              ],
+              index: 1,
+            },
+          ],
+          circles: [],
+        });
+      });
+
+      it('decrease height with 10%', () => {
+        const instance = createInstance(undefined, onUpdateImageDimension, onUpdateShapes);
+        instance.handleOnUpdateImageDimensions(270, 'height');
+
+        expect(onUpdateImageDimension).toBeCalledWith({
+          width: 180,
+          height: 270,
+        });
+        expect(onUpdateShapes).toBeCalledWith({
+          rectangles: [{ x: 9, y: 9, height: 90, width: 90, index: 0 }],
+          polygons: [
+            {
+              points: [
+                { x: 0, y: 180 },
+                { x: 180, y: 180 },
+                { x: 90, y: 270 },
+              ],
+              index: 1,
+            },
+          ],
+          circles: [],
+        });
+      });
+    });
+
+    describe('DO NOT KEEP IMAGE ASPECT RATIO: handleOnUpdateImageDimensions: calls onUpdateImageDimension & onUpdateShapes', () => {
+      let onUpdateImageDimension = jest.fn();
+      let onUpdateShapes = jest.fn();
+
+      it('increase width with 100%:', () => {
+        const instance = createInstance(
+          {
+            ...defaultValues.configuration,
+            preserveAspectRatio: {
+              enabled: false,
+            },
+          },
+          onUpdateImageDimension,
+          onUpdateShapes,
+        );
+        instance.handleOnUpdateImageDimensions(400, 'width');
+
+        expect(onUpdateImageDimension).toBeCalledWith({
+          width: 400,
+          height: 300,
+        });
+        expect(onUpdateShapes).toBeCalledWith({
+          rectangles: [{ x: 20, y: 10, height: 100, width: 200, index: 0 }],
+          polygons: [
+            {
+              points: [
+                { x: 0, y: 200 },
+                { x: 400, y: 200 },
+                { x: 200, y: 300 },
+              ],
+              index: 1,
+            },
+          ],
+          circles: [],
+        });
+      });
+
+      it('decrease width with 50%', () => {
+        const instance = createInstance(
+          {
+            ...defaultValues.configuration,
+            preserveAspectRatio: {
+              enabled: false,
+            },
+          },
+          onUpdateImageDimension,
+          onUpdateShapes,
+        );
+        instance.handleOnUpdateImageDimensions(100, 'width');
+
+        expect(onUpdateImageDimension).toBeCalledWith({
+          width: 100,
+          height: 300,
+        });
+        expect(onUpdateShapes).toBeCalledWith({
+          rectangles: [{ x: 5, y: 10, height: 100, width: 50, index: 0 }],
+          polygons: [
+            {
+              points: [
+                { x: 0, y: 200 },
+                { x: 100, y: 200 },
+                { x: 50, y: 300 },
+              ],
+              index: 1,
+            },
+          ],
+          circles: [],
+        });
+      });
+
+      it('increase height with 50%:', () => {
+        const instance = createInstance(
+          {
+            ...defaultValues.configuration,
+            preserveAspectRatio: {
+              enabled: false,
+            },
+          },
+          onUpdateImageDimension,
+          onUpdateShapes,
+        );
+        instance.handleOnUpdateImageDimensions(450, 'height');
+
+        expect(onUpdateImageDimension).toBeCalledWith({
+          width: 200,
+          height: 450,
+        });
+        expect(onUpdateShapes).toBeCalledWith({
+          rectangles: [{ x: 10, y: 15, height: 150, width: 100, index: 0 }],
+          polygons: [
+            {
+              index: 1,
+              points: [
+                { x: 0, y: 300 },
+                { x: 200, y: 300 },
+                { x: 100, y: 450 },
+              ],
+            },
+          ],
+          circles: [],
+        });
+      });
+
+      it('decrease height with 10%', () => {
+        const instance = createInstance(
+          {
+            ...defaultValues.configuration,
+            preserveAspectRatio: {
+              enabled: false,
+            },
+          },
+          onUpdateImageDimension,
+          onUpdateShapes,
+        );
+        instance.handleOnUpdateImageDimensions(270, 'height');
+
+        expect(onUpdateImageDimension).toBeCalledWith({
+          width: 200,
+          height: 270,
+        });
+        expect(onUpdateShapes).toBeCalledWith({
+          rectangles: [{ x: 10, y: 9, height: 90, width: 100, index: 0 }],
+          polygons: [
+            {
+              points: [
+                { x: 0, y: 180 },
+                { x: 200, y: 180 },
+                { x: 100, y: 270 },
+              ],
+              index: 1,
+            },
+          ],
+          circles: [],
+        });
+      });
+    });
+  });
+});

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

@@ -0,0 +1,241 @@
+import React from 'react';
+import { updateImageDimensions, getUpdatedRectangle, getUpdatedPolygon, getAllShapes, groupShapes } from '../utils';
+
+const width = 200;
+const height = 100;
+const imageDimensions = { width, height };
+
+describe('updateImageDimensions', () => {
+  it.each`
+    initialDimensions | nextDimensions | keepAspectRatio | resizeType | expectedWidth | expectedHeight
+    ${imageDimensions} | ${{
+  width,
+  height: 300,
+}} | ${true} | ${'height'} | ${600} | ${300}
+    ${imageDimensions} | ${{
+  width: 400,
+  height,
+}} | ${true} | ${'width'} | ${400} | ${200}
+    ${imageDimensions} | ${{
+  width,
+  height: 300,
+}} | ${true} | ${undefined} | ${200} | ${100}
+    ${imageDimensions} | ${{
+  width: 600,
+  height,
+}} | ${true} | ${undefined} | ${600} | ${300}
+    ${imageDimensions} | ${{
+  width,
+  height: 300,
+}} | ${false} | ${'height'} | ${200} | ${300}
+    ${imageDimensions} | ${{
+  width: 600,
+  height,
+}} | ${false} | ${'width'} | ${600} | ${100}
+    ${imageDimensions} | ${{
+  width: 10,
+  height: 10,
+}} | ${false} | ${undefined} | ${10} | ${10}
+  `(
+    'initialDimensions = $initialDimensions, nextDimensions = $nextDimensions, keepAspectRatio = $keepAspectRatio, resizeType = $resizeType => width = $expectedWidth & height = $expectedHeight',
+    async ({ initialDimensions, nextDimensions, keepAspectRatio, resizeType, expectedWidth, expectedHeight }) => {
+      const result = updateImageDimensions(initialDimensions, nextDimensions, keepAspectRatio, resizeType);
+
+      expect(result).toEqual({
+        width: expectedWidth,
+        height: expectedHeight,
+      });
+    },
+  );
+});
+
+describe('getUpdatedRectangle', () => {
+  const rectangle = (x, y, w, h) => ({ x, y, width: w, height: h });
+  const heightUpdateLarge = { width, height: 300 };
+  const heightUpdateSmall = { width, height: 50 };
+  const widthUpdateLarge = { width: 300, height };
+  const widthUpdateSmall = { width: 100, height };
+  const bothUpdate = { width: 20, height: 50 };
+
+  it.each`
+    initialDimensions  | nextDimensions       | shape                         | expected
+    ${imageDimensions} | ${heightUpdateLarge} | ${rectangle(10, 10, 100, 50)} | ${rectangle(10, 30, 100, 150)}
+    ${imageDimensions} | ${heightUpdateSmall} | ${rectangle(10, 10, 100, 50)} | ${rectangle(10, 5, 100, 25)}
+    ${imageDimensions} | ${bothUpdate}        | ${rectangle(10, 10, 100, 50)} | ${rectangle(1, 5, 10, 25)}
+    ${imageDimensions} | ${widthUpdateLarge}  | ${rectangle(10, 10, 100, 50)} | ${rectangle(15, 10, 150, 50)}
+    ${imageDimensions} | ${widthUpdateSmall}  | ${rectangle(10, 10, 100, 50)} | ${rectangle(5, 10, 50, 50)}
+  `(
+    'initialDimensions = $initialDimensions, nextDimensions = $nextDimensions, shape = $shape => $expected',
+    async ({ initialDimensions, nextDimensions, shape, expected }) => {
+      const result = getUpdatedRectangle(initialDimensions, nextDimensions, shape);
+
+      expect(result).toEqual(expected);
+    },
+  );
+});
+
+describe('getUpdatedPolygon', () => {
+  const updatedDimensions = { width: width / 2, height: height * 2 };
+
+  const point = (x, y) => ({ x, y });
+  const updatedPoint = (x, y) => ({ x: x / 2, y: y * 2 });
+
+  const triangle = [point(10, 10), point(100, 10), point(100, 100)];
+  const triangleUpdated = [updatedPoint(10, 10), updatedPoint(100, 10), updatedPoint(100, 100)];
+
+  const square = [point(10, 10), point(100, 10), point(100, 100), point(10, 100)];
+  const squareUpdated = [updatedPoint(10, 10), updatedPoint(100, 10), updatedPoint(100, 100), updatedPoint(10, 100)];
+
+  const pentagon = [point(10, 10), point(20, 0), point(30, 0), point(40, 10), point(25, 20)];
+  const pentagonUpdated = [
+    updatedPoint(10, 10),
+    updatedPoint(20, 0),
+    updatedPoint(30, 0),
+    updatedPoint(40, 10),
+    updatedPoint(25, 20),
+  ];
+
+  const hexagon = [point(10, 10), point(20, 0), point(30, 0), point(40, 10), point(30, 20), point(20, 20)];
+  const hexagonUpdated = [
+    updatedPoint(10, 10),
+    updatedPoint(20, 0),
+    updatedPoint(30, 0),
+    updatedPoint(40, 10),
+    updatedPoint(30, 20),
+    updatedPoint(20, 20),
+  ];
+
+  const polygon = (points) => ({ points });
+
+  it.each`
+    initialDimensions  | nextDimensions       | shape                | expected
+    ${imageDimensions} | ${updatedDimensions} | ${polygon(triangle)} | ${polygon(triangleUpdated)}
+    ${imageDimensions} | ${updatedDimensions} | ${polygon(square)}   | ${polygon(squareUpdated)}
+    ${imageDimensions} | ${updatedDimensions} | ${polygon(pentagon)} | ${polygon(pentagonUpdated)}
+    ${imageDimensions} | ${updatedDimensions} | ${polygon(hexagon)}  | ${polygon(hexagonUpdated)}
+  `(
+    'initialDimensions = $initialDimensions, nextDimensions = $nextDimensions, shape = $shape => $expected',
+    async ({ initialDimensions, nextDimensions, shape, expected }) => {
+      const result = getUpdatedPolygon(initialDimensions, nextDimensions, shape);
+
+      expect(result).toEqual(expected);
+    },
+  );
+});
+
+const shapesArray = [
+  {
+    height: 100,
+    width: 100,
+    x: 1,
+    y: 1,
+    group: 'rectangles',
+    index: 0,
+  },
+  {
+    height: 200,
+    width: 200,
+    x: 200,
+    y: 1,
+    group: 'rectangles',
+    index: 1,
+  },
+  {
+    points: [
+      { x: 1, y: 200 },
+      { x: 1, y: 200 },
+      { y: 200, x: 200 },
+      { y: 200, x: 200 },
+    ],
+    group: 'polygons',
+    index: 2,
+  },
+  {
+    points: [
+      { x: 200, y: 100 },
+      { x: 200, y: 200 },
+      { x: 400, y: 200 },
+      { x: 400, y: 200 },
+    ],
+    group: 'polygons',
+    index: 3,
+  },
+  {
+    radius: 50,
+    x: 300,
+    y: 150,
+    group: 'circles',
+    index: 4,
+  },
+];
+
+const shapesMap = {
+  rectangles: [
+    {
+      height: 100,
+      width: 100,
+      x: 1,
+      y: 1,
+      index: 0,
+    },
+    {
+      height: 200,
+      width: 200,
+      x: 200,
+      y: 1,
+      index: 1,
+    },
+  ],
+  polygons: [
+    {
+      points: [
+        { x: 1, y: 200 },
+        { x: 1, y: 200 },
+        { y: 200, x: 200 },
+        { y: 200, x: 200 },
+      ],
+      index: 2,
+    },
+    {
+      points: [
+        { x: 200, y: 100 },
+        { x: 200, y: 200 },
+        { x: 400, y: 200 },
+        { x: 400, y: 200 },
+      ],
+      index: 3,
+    },
+  ],
+  circles: [
+    {
+      radius: 50,
+      x: 300,
+      y: 150,
+      index: 4,
+    },
+  ],
+};
+
+describe('getAllShapes', () => {
+  it.each`
+    shapesMap    | expected
+    ${shapesMap} | ${shapesArray}
+    ${null}      | ${[]}
+    ${undefined} | ${[]}
+    ${{}}        | ${[]}
+  `('TURNS shapes = $shapesMap INTO $expected', async ({ shapesMap, expected }) => {
+    expect(getAllShapes(shapesMap)).toEqual(expected);
+  });
+});
+
+describe('groupShapes', () => {
+  it.each`
+    shapesArray    | expected
+    ${shapesArray} | ${shapesMap}
+    ${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/button.jsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
+import Button from '@mui/material/Button';
+
+const StyledButton = styled(Button)(({ theme }) => ({
+  marginLeft: theme.spacing(1),
+}));
+
+const RawButton = ({ className, label, onClick, disabled }) => (
+  <StyledButton
+    onClick={onClick}
+    disabled={disabled}
+    className={className}
+    size="small"
+    variant="contained">
+    {label}
+  </StyledButton>
+);
+
+RawButton.propTypes = {
+  className: PropTypes.string,
+  disabled: PropTypes.bool,
+  label: PropTypes.string,
+  onClick: PropTypes.func,
+};
+
+RawButton.defaultProps = {
+  className: '',
+  disabled: false,
+  label: 'Add',
+  onClick: () => {},
+};
+
+export default RawButton;

package/configure/src/buttons/circle.jsx

@@ -0,0 +1,18 @@
+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="56 0 48 32" fill="none">
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M56 4C56 1.79086 57.7909 0 60 0H99C101.209 0 103 1.79086 103 4V28.0001C103 30.2093 101.209 32.0001 99 32.0001H60C57.7909 32.0001 56 30.2093 56 28.0001V4Z"
+      fill={isActive ? '#D3D4D9' : '#ECEDF1'}
+    />
+    <circle cx="79" cy="16" r="7.5" stroke="black" />
+  </svg>
+);
+
+CircleButton.propTypes = {
+  isActive: PropTypes.bool,
+};