@pie-element/hotspot 4.8.0 → 4.8.1-beta.587

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

@@ -7,48 +7,48 @@ 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',
+    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
+        height: expectedHeight,
       });
-    });
+    },
+  );
 });
 
-
 describe('getUpdatedRectangle', () => {
   const rectangle = (x, y, w, h) => ({ x, y, width: w, height: h });
   const heightUpdateLarge = { width, height: 300 };
@@ -58,22 +58,22 @@ describe('getUpdatedRectangle', () => {
   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',
+    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 };
 
@@ -87,29 +87,42 @@ describe('getUpdatedPolygon', () => {
   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 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 hexagonUpdated = [
+    updatedPoint(10, 10),
+    updatedPoint(20, 0),
+    updatedPoint(30, 0),
+    updatedPoint(40, 10),
+    updatedPoint(30, 20),
+    updatedPoint(20, 20),
+  ];
 
-  const polygon = points => ({ points });
+  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',
+    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 = getUpdatedPlygon(initialDimensions, nextDimensions, shape);
 
       expect(result).toEqual(expected);
-    });
+    },
+  );
 });
 
-
 const shapesArray = [
   {
     height: 100,
@@ -117,36 +130,38 @@ const shapesArray = [
     x: 1,
     y: 1,
     group: 'rectangles',
-    index: 0
-  }, {
+    index: 0,
+  },
+  {
     height: 200,
     width: 200,
     x: 200,
     y: 1,
     group: 'rectangles',
-    index: 1
+    index: 1,
   },
   {
     points: [
       { x: 1, y: 200 },
       { x: 1, y: 200 },
       { y: 200, x: 200 },
-      { y: 200, x: 200 }],
+      { y: 200, x: 200 },
+    ],
     group: 'polygons',
-    index: 2
-  }, {
+    index: 2,
+  },
+  {
     points: [
       { x: 200, y: 100 },
       { x: 200, y: 200 },
       { x: 400, y: 200 },
-      { x: 400, y: 200 }
+      { x: 400, y: 200 },
     ],
     group: 'polygons',
-    index: 3
-  }
+    index: 3,
+  },
 ];
 
-
 const shapesMap = {
   rectangles: [
     {
@@ -154,59 +169,58 @@ const shapesMap = {
       width: 100,
       x: 1,
       y: 1,
-      index: 0
-    }, {
+      index: 0,
+    },
+    {
       height: 200,
       width: 200,
       x: 200,
       y: 1,
-      index: 1
-    }
-  ], polygons: [
+      index: 1,
+    },
+  ],
+  polygons: [
     {
       points: [
         { x: 1, y: 200 },
         { x: 1, y: 200 },
         { y: 200, x: 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 }
+        { x: 400, y: 200 },
       ],
-      index: 3
-    }
-  ]
+      index: 3,
+    },
+  ],
 };
 
-
 describe('getAllShapes', () => {
   it.each`
-      shapesMap     |  expected
-      ${shapesMap}  |  ${shapesArray}
-      ${null}       |  ${[]}
-      ${undefined}  |  ${[]}
-      ${{}}         |  ${[]}
-    `('TURNS shapes = $shapesMap INTO $expected',
-    async ({ shapesMap, expected }) => {
-      expect(getAllShapes(shapesMap)).toEqual(expected);
-    });
-
+    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: [] }}
-      ${undefined}    |  ${{ rectangles: [], polygons: [] }}
-      ${[]}           |  ${{ rectangles: [], polygons: [] }}
-    `('TURNS shapes = $shapesArray INTO $expected',
-    async ({ shapesArray, expected }) => {
-      expect(groupShapes(shapesArray)).toEqual(expected);
-    });
+    shapesArray    | expected
+    ${shapesArray} | ${shapesMap}
+    ${null}        | ${{ rectangles: [], polygons: [] }}
+    ${undefined}   | ${{ rectangles: [], polygons: [] }}
+    ${[]}          | ${{ rectangles: [], polygons: [] }}
+  `('TURNS shapes = $shapesArray INTO $expected', async ({ shapesArray, expected }) => {
+    expect(groupShapes(shapesArray)).toEqual(expected);
+  });
 });
-

package/configure/src/button.jsx

@@ -22,20 +22,20 @@ RawButton.propTypes = {
   className: PropTypes.string,
   disabled: PropTypes.bool,
   label: PropTypes.string,
-  onClick: PropTypes.func
+  onClick: PropTypes.func,
 };
 
 RawButton.defaultProps = {
   className: '',
   disabled: false,
   label: 'Add',
-  onClick: () => {}
+  onClick: () => {},
 };
 
 const styles = () => ({
   addButton: {
-    marginLeft: 8
-  }
+    marginLeft: 8,
+  },
 });
 
 const ButtonStyled = withStyles(styles)(RawButton);

package/configure/src/defaults.js

@@ -1,56 +1,74 @@
 export default {
   model: {
     prompt: 'This is the question prompt',
+    toolbarEditorPosition: 'bottom',
     promptEnabled: true,
     imageUrl: '',
     shapes: {
       rectangles: [],
-      polygons: []
+      polygons: [],
     },
     multipleCorrect: true,
     partialScoring: false,
     dimensions: {
       height: 0,
-      width: 0
+      width: 0,
     },
-    hotspotColor: 'rgba(137, 183, 244, 0.65)',
-    hotspotList: [
-      'rgba(137, 183, 244, 0.65)'
-    ],
+    hotspotColor: 'rgba(137, 183, 244, 0.25)',
+    hotspotList: ['rgba(137, 183, 244, 0.25)'],
     outlineColor: 'blue',
-    outlineList: [
-      'blue'
-    ],
+    outlineList: ['blue'],
     rationaleEnabled: true,
     teacherInstructionsEnabled: true,
     studentInstructionsEnabled: true,
-    strokeWidth: 5
+    strokeWidth: 5,
   },
   configuration: {
     multipleCorrect: {
       settings: true,
-      label: 'Multiple Correct Responses'
+      label: 'Multiple Correct Responses',
     },
     partialScoring: {
       settings: false,
-      label: 'Allow Partial Scoring'
+      label: 'Allow Partial Scoring',
     },
     rationale: {
       settings: true,
-      label: 'Rationale'
+      label: 'Rationale',
     },
     prompt: {
       settings: true,
-      label: 'Prompt'
+      label: 'Prompt',
+    },
+    settingsPanelDisabled: false,
+    spellCheck: {
+      label: 'Spellcheck',
+      settings: false,
+      enabled: true,
     },
     teacherInstructions: {
       settings: true,
-      label: 'Teacher Instructions'
+      label: 'Teacher Instructions',
     },
     preserveAspectRatio: {
       settings: false,
       enabled: true,
-      label: 'Preserve aspect ratio'
-    }
-  }
+      label: 'Preserve aspect ratio',
+    },
+    minShapes: 2,
+    maxImageWidth: {
+      teacherInstructions: 300,
+      prompt: 300,
+      rationale: 300,
+    },
+    maxImageHeight: {
+      teacherInstructions: 300,
+      prompt: 300,
+      rationale: 300,
+    },
+    withRubric: {
+      settings: false,
+      label: 'Add Rubric',
+    },
+  },
 };