@pie-element/hotspot 11.1.1 → 11.1.2-next.0

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

@@ -1,400 +0,0 @@
-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

@@ -1,241 +0,0 @@
-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

@@ -1,35 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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,
-};