@pie-element/hotspot 6.1.2-next.44 → 6.1.2-next.69

package/configure/src/__tests__/__snapshots__/hotspot-drawable.test.js.snap

@@ -17,6 +17,8 @@ exports[`HotspotDrawable render renders 1`] = `
   </div>
   <ForwardRef
     height={291}
+    onContentMouseLeave={[Function]}
+    onContentMouseOut={[Function]}
     onMouseDown={[Function]}
     onMouseMove={[Function]}
     onMouseUp={[Function]}
@@ -24,6 +26,7 @@ exports[`HotspotDrawable render renders 1`] = `
   >
     <Layer>
       <WithStyles(RectComponent)
+        addPolygonPoint={[Function]}
         correct={true}
         height={140}
         hotspotColor="rgba(137, 183, 244, 0.65)"
@@ -33,6 +36,7 @@ exports[`HotspotDrawable render renders 1`] = `
         isDrawing={false}
         key="0"
         onClick={[Function]}
+        onDeleteShape={[MockFunction]}
         onDragEnd={[Function]}
         outlineColor="blue"
         strokeWidth={5}
@@ -41,6 +45,7 @@ exports[`HotspotDrawable render renders 1`] = `
         y={1}
       />
       <WithStyles(RectComponent)
+        addPolygonPoint={[Function]}
         height={140}
         hotspotColor="rgba(137, 183, 244, 0.65)"
         id="1"
@@ -49,6 +54,7 @@ exports[`HotspotDrawable render renders 1`] = `
         isDrawing={false}
         key="1"
         onClick={[Function]}
+        onDeleteShape={[MockFunction]}
         onDragEnd={[Function]}
         outlineColor="blue"
         strokeWidth={5}
@@ -57,6 +63,7 @@ exports[`HotspotDrawable render renders 1`] = `
         y={1}
       />
       <WithStyles(RectComponent)
+        addPolygonPoint={[Function]}
         height={140}
         hotspotColor="rgba(137, 183, 244, 0.65)"
         id="2"
@@ -65,6 +72,7 @@ exports[`HotspotDrawable render renders 1`] = `
         isDrawing={false}
         key="2"
         onClick={[Function]}
+        onDeleteShape={[MockFunction]}
         onDragEnd={[Function]}
         outlineColor="blue"
         strokeWidth={5}
@@ -73,6 +81,7 @@ exports[`HotspotDrawable render renders 1`] = `
         y={1}
       />
       <WithStyles(PolComponent)
+        addPolygonPoint={[Function]}
         correct={true}
         hotspotColor="rgba(137, 183, 244, 0.65)"
         id="3"
@@ -81,6 +90,7 @@ exports[`HotspotDrawable render renders 1`] = `
         isDrawing={false}
         key="3"
         onClick={[Function]}
+        onDeleteShape={[MockFunction]}
         onDragEnd={[Function]}
         outlineColor="blue"
         points={
@@ -106,6 +116,7 @@ exports[`HotspotDrawable render renders 1`] = `
         strokeWidth={5}
       />
       <WithStyles(PolComponent)
+        addPolygonPoint={[Function]}
         correct={false}
         hotspotColor="rgba(137, 183, 244, 0.65)"
         id="4"
@@ -114,6 +125,7 @@ exports[`HotspotDrawable render renders 1`] = `
         isDrawing={false}
         key="4"
         onClick={[Function]}
+        onDeleteShape={[MockFunction]}
         onDragEnd={[Function]}
         outlineColor="blue"
         points={
@@ -139,6 +151,7 @@ exports[`HotspotDrawable render renders 1`] = `
         strokeWidth={5}
       />
       <WithStyles(PolComponent)
+        addPolygonPoint={[Function]}
         correct={false}
         hotspotColor="rgba(137, 183, 244, 0.65)"
         id="5"
@@ -147,6 +160,7 @@ exports[`HotspotDrawable render renders 1`] = `
         isDrawing={false}
         key="5"
         onClick={[Function]}
+        onDeleteShape={[MockFunction]}
         onDragEnd={[Function]}
         outlineColor="blue"
         points={
@@ -193,6 +207,8 @@ exports[`HotspotDrawable render renders with default strokeWidth 1`] = `
   </div>
   <ForwardRef
     height={291}
+    onContentMouseLeave={[Function]}
+    onContentMouseOut={[Function]}
     onMouseDown={[Function]}
     onMouseMove={[Function]}
     onMouseUp={[Function]}
@@ -200,6 +216,7 @@ exports[`HotspotDrawable render renders with default strokeWidth 1`] = `
   >
     <Layer>
       <WithStyles(RectComponent)
+        addPolygonPoint={[Function]}
         correct={true}
         height={140}
         hotspotColor="rgba(137, 183, 244, 0.65)"
@@ -209,6 +226,7 @@ exports[`HotspotDrawable render renders with default strokeWidth 1`] = `
         isDrawing={false}
         key="0"
         onClick={[Function]}
+        onDeleteShape={[MockFunction]}
         onDragEnd={[Function]}
         outlineColor="blue"
         strokeWidth={5}
@@ -217,6 +235,7 @@ exports[`HotspotDrawable render renders with default strokeWidth 1`] = `
         y={1}
       />
       <WithStyles(RectComponent)
+        addPolygonPoint={[Function]}
         height={140}
         hotspotColor="rgba(137, 183, 244, 0.65)"
         id="1"
@@ -225,6 +244,7 @@ exports[`HotspotDrawable render renders with default strokeWidth 1`] = `
         isDrawing={false}
         key="1"
         onClick={[Function]}
+        onDeleteShape={[MockFunction]}
         onDragEnd={[Function]}
         outlineColor="blue"
         strokeWidth={5}
@@ -233,6 +253,7 @@ exports[`HotspotDrawable render renders with default strokeWidth 1`] = `
         y={1}
       />
       <WithStyles(RectComponent)
+        addPolygonPoint={[Function]}
         height={140}
         hotspotColor="rgba(137, 183, 244, 0.65)"
         id="2"
@@ -241,6 +262,7 @@ exports[`HotspotDrawable render renders with default strokeWidth 1`] = `
         isDrawing={false}
         key="2"
         onClick={[Function]}
+        onDeleteShape={[MockFunction]}
         onDragEnd={[Function]}
         outlineColor="blue"
         strokeWidth={5}
@@ -249,6 +271,7 @@ exports[`HotspotDrawable render renders with default strokeWidth 1`] = `
         y={1}
       />
       <WithStyles(PolComponent)
+        addPolygonPoint={[Function]}
         correct={true}
         hotspotColor="rgba(137, 183, 244, 0.65)"
         id="3"
@@ -257,6 +280,7 @@ exports[`HotspotDrawable render renders with default strokeWidth 1`] = `
         isDrawing={false}
         key="3"
         onClick={[Function]}
+        onDeleteShape={[MockFunction]}
         onDragEnd={[Function]}
         outlineColor="blue"
         points={
@@ -282,6 +306,7 @@ exports[`HotspotDrawable render renders with default strokeWidth 1`] = `
         strokeWidth={5}
       />
       <WithStyles(PolComponent)
+        addPolygonPoint={[Function]}
         correct={false}
         hotspotColor="rgba(137, 183, 244, 0.65)"
         id="4"
@@ -290,6 +315,7 @@ exports[`HotspotDrawable render renders with default strokeWidth 1`] = `
         isDrawing={false}
         key="4"
         onClick={[Function]}
+        onDeleteShape={[MockFunction]}
         onDragEnd={[Function]}
         outlineColor="blue"
         points={
@@ -315,6 +341,7 @@ exports[`HotspotDrawable render renders with default strokeWidth 1`] = `
         strokeWidth={5}
       />
       <WithStyles(PolComponent)
+        addPolygonPoint={[Function]}
         correct={false}
         hotspotColor="rgba(137, 183, 244, 0.65)"
         id="5"
@@ -323,6 +350,7 @@ exports[`HotspotDrawable render renders with default strokeWidth 1`] = `
         isDrawing={false}
         key="5"
         onClick={[Function]}
+        onDeleteShape={[MockFunction]}
         onDragEnd={[Function]}
         outlineColor="blue"
         points={
@@ -369,6 +397,8 @@ exports[`HotspotDrawable render renders with given strokeWidth 1`] = `
   </div>
   <ForwardRef
     height={291}
+    onContentMouseLeave={[Function]}
+    onContentMouseOut={[Function]}
     onMouseDown={[Function]}
     onMouseMove={[Function]}
     onMouseUp={[Function]}
@@ -376,6 +406,7 @@ exports[`HotspotDrawable render renders with given strokeWidth 1`] = `
   >
     <Layer>
       <WithStyles(RectComponent)
+        addPolygonPoint={[Function]}
         correct={true}
         height={140}
         hotspotColor="rgba(137, 183, 244, 0.65)"
@@ -385,6 +416,7 @@ exports[`HotspotDrawable render renders with given strokeWidth 1`] = `
         isDrawing={false}
         key="0"
         onClick={[Function]}
+        onDeleteShape={[MockFunction]}
         onDragEnd={[Function]}
         outlineColor="blue"
         strokeWidth={10}
@@ -393,6 +425,7 @@ exports[`HotspotDrawable render renders with given strokeWidth 1`] = `
         y={1}
       />
       <WithStyles(RectComponent)
+        addPolygonPoint={[Function]}
         height={140}
         hotspotColor="rgba(137, 183, 244, 0.65)"
         id="1"
@@ -401,6 +434,7 @@ exports[`HotspotDrawable render renders with given strokeWidth 1`] = `
         isDrawing={false}
         key="1"
         onClick={[Function]}
+        onDeleteShape={[MockFunction]}
         onDragEnd={[Function]}
         outlineColor="blue"
         strokeWidth={10}
@@ -409,6 +443,7 @@ exports[`HotspotDrawable render renders with given strokeWidth 1`] = `
         y={1}
       />
       <WithStyles(RectComponent)
+        addPolygonPoint={[Function]}
         height={140}
         hotspotColor="rgba(137, 183, 244, 0.65)"
         id="2"
@@ -417,6 +452,7 @@ exports[`HotspotDrawable render renders with given strokeWidth 1`] = `
         isDrawing={false}
         key="2"
         onClick={[Function]}
+        onDeleteShape={[MockFunction]}
         onDragEnd={[Function]}
         outlineColor="blue"
         strokeWidth={10}
@@ -425,6 +461,7 @@ exports[`HotspotDrawable render renders with given strokeWidth 1`] = `
         y={1}
       />
       <WithStyles(PolComponent)
+        addPolygonPoint={[Function]}
         correct={true}
         hotspotColor="rgba(137, 183, 244, 0.65)"
         id="3"
@@ -433,6 +470,7 @@ exports[`HotspotDrawable render renders with given strokeWidth 1`] = `
         isDrawing={false}
         key="3"
         onClick={[Function]}
+        onDeleteShape={[MockFunction]}
         onDragEnd={[Function]}
         outlineColor="blue"
         points={
@@ -458,6 +496,7 @@ exports[`HotspotDrawable render renders with given strokeWidth 1`] = `
         strokeWidth={10}
       />
       <WithStyles(PolComponent)
+        addPolygonPoint={[Function]}
         correct={false}
         hotspotColor="rgba(137, 183, 244, 0.65)"
         id="4"
@@ -466,6 +505,7 @@ exports[`HotspotDrawable render renders with given strokeWidth 1`] = `
         isDrawing={false}
         key="4"
         onClick={[Function]}
+        onDeleteShape={[MockFunction]}
         onDragEnd={[Function]}
         outlineColor="blue"
         points={
@@ -491,6 +531,7 @@ exports[`HotspotDrawable render renders with given strokeWidth 1`] = `
         strokeWidth={10}
       />
       <WithStyles(PolComponent)
+        addPolygonPoint={[Function]}
         correct={false}
         hotspotColor="rgba(137, 183, 244, 0.65)"
         id="5"
@@ -499,6 +540,7 @@ exports[`HotspotDrawable render renders with given strokeWidth 1`] = `
         isDrawing={false}
         key="5"
         onClick={[Function]}
+        onDeleteShape={[MockFunction]}
         onDragEnd={[Function]}
         outlineColor="blue"
         points={

package/configure/src/__tests__/hotspot-drawable.test.js

@@ -95,6 +95,9 @@ describe('HotspotDrawable', () => {
         outlineColor: initialModel.outlineColor,
         shapes: initialModel.shapes,
         strokeWidth: 5,
+        shapeType: 'rectangle',
+        handleFinishDrawing: jest.fn(),
+        onDeleteShape: jest.fn(),
         ...extras,
       };
 
@@ -168,7 +171,7 @@ describe('HotspotDrawable', () => {
 
     it('handleOnMouseUp isDrawing = true', () => {
       wrapper.instance().state.isDrawing = true;
-      wrapper.instance().state.stateShapes = initialModel.shapes.slice(0, 2);
+      wrapper.instance().state.shapes = initialModel.shapes.slice(0, 2);
 
       wrapper.instance().handleOnMouseUp({
         evt: {

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="0 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,
+};

package/configure/src/buttons/polygon.jsx

@@ -0,0 +1,29 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+export const PolygonButton = ({ isActive = false }) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="48" height="32" viewBox="112 0 48 32" fill="none">
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M112 4C112 1.79086 113.791 0 116 0H155C157.209 0 159 1.79086 159 4V28.0001C159 30.2093 157.209 32.0001 155 32.0001H116C113.791 32.0001 112 30.2093 112 28.0001V4Z"
+      fill={isActive ? '#D3D4D9' : '#ECEDF1'}
+    />
+    <mask id="path-6-inside-1_2196_700" fill="white">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M130 8H126V12H127.5V20H126V24H130V22.7145H141V24H145V20H141.737L139.998 18H140V14.4265L142.11 12H145V8H141V9.71451H130V8ZM139.046 14L141 11.7525V10.7145H130V12H128.5V20H130V21.7145H141V20.6765L138.673 18H136V14H139.046Z"
+      />
+    </mask>
+    <path
+      d="M126 8V7H125V8H126ZM130 8H131V7H130V8ZM126 12H125V13H126V12ZM127.5 12H128.5V11H127.5V12ZM127.5 20V21H128.5V20H127.5ZM126 20V19H125V20H126ZM126 24H125V25H126V24ZM130 24V25H131V24H130ZM130 22.7145V21.7145H129V22.7145H130ZM141 22.7145H142V21.7145H141V22.7145ZM141 24H140V25H141V24ZM145 24V25H146V24H145ZM145 20H146V19H145V20ZM141.737 20L140.982 20.6562L141.281 21H141.737V20ZM139.998 18V17H137.803L139.243 18.6562L139.998 18ZM140 18V19H141V18H140ZM140 14.4265L139.245 13.7703L139 14.0525V14.4265H140ZM142.11 12V11H141.654L141.355 11.3438L142.11 12ZM145 12V13H146V12H145ZM145 8H146V7H145V8ZM141 8V7H140V8H141ZM141 9.71451V10.7145H142V9.71451H141ZM130 9.71451H129V10.7145H130V9.71451ZM141 11.7525L141.755 12.4087L142 12.1265V11.7525H141ZM139.046 14V15H139.501L139.8 14.6562L139.046 14ZM141 10.7145H142V9.71451H141V10.7145ZM130 10.7145V9.71451H129V10.7145H130ZM130 12V13H131V12H130ZM128.5 12V11H127.5V12H128.5ZM128.5 20H127.5V21H128.5V20ZM130 20H131V19H130V20ZM130 21.7145H129V22.7145H130V21.7145ZM141 21.7145V22.7145H142V21.7145H141ZM141 20.6765H142V20.3025L141.755 20.0203L141 20.6765ZM138.673 18L139.427 17.3438L139.128 17H138.673V18ZM136 18H135V19H136V18ZM136 14V13H135V14H136ZM126 9H130V7H126V9ZM127 12V8H125V12H127ZM127.5 11H126V13H127.5V11ZM128.5 20V12H126.5V20H128.5ZM126 21H127.5V19H126V21ZM127 24V20H125V24H127ZM130 23H126V25H130V23ZM129 22.7145V24H131V22.7145H129ZM141 21.7145H130V23.7145H141V21.7145ZM142 24V22.7145H140V24H142ZM145 23H141V25H145V23ZM144 20V24H146V20H144ZM141.737 21H145V19H141.737V21ZM139.243 18.6562L140.982 20.6562L142.492 19.3438L140.752 17.3438L139.243 18.6562ZM140 17H139.998V19H140V17ZM139 14.4265V18H141V14.4265H139ZM141.355 11.3438L139.245 13.7703L140.755 15.0827L142.865 12.6562L141.355 11.3438ZM145 11H142.11V13H145V11ZM144 8V12H146V8H144ZM141 9H145V7H141V9ZM142 9.71451V8H140V9.71451H142ZM130 10.7145H141V8.71451H130V10.7145ZM129 8V9.71451H131V8H129ZM140.245 11.0963L138.291 13.3438L139.8 14.6562L141.755 12.4087L140.245 11.0963ZM140 10.7145V11.7525H142V10.7145H140ZM130 11.7145H141V9.71451H130V11.7145ZM131 12V10.7145H129V12H131ZM128.5 13H130V11H128.5V13ZM129.5 20V12H127.5V20H129.5ZM130 19H128.5V21H130V19ZM131 21.7145V20H129V21.7145H131ZM141 20.7145H130V22.7145H141V20.7145ZM140 20.6765V21.7145H142V20.6765H140ZM137.918 18.6562L140.245 21.3327L141.755 20.0203L139.427 17.3438L137.918 18.6562ZM138.673 17H136V19H138.673V17ZM137 18V14H135V18H137ZM136 15H139.046V13H136V15Z"
+      fill="black"
+      mask="url(#path-6-inside-1_2196_700)"
+    />
+  </svg>
+);
+
+PolygonButton.propTypes = {
+  isActive: PropTypes.bool,
+};

package/configure/src/buttons/rectangle.jsx

@@ -0,0 +1,29 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+export const RectangleButton = ({ isActive = false }) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="48" height="32" viewBox="0 0 48 32" fill="none">
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M0 4C0 1.79086 1.79086 0 4 0H43C45.2091 0 47 1.79086 47 4V28.0001C47 30.2093 45.2091 32.0001 43 32.0001H4C1.79086 32.0001 0 30.2093 0 28.0001V4Z"
+      fill={isActive ? '#D3D4D9' : '#ECEDF1'}
+    />
+    <mask id="path-8-inside-2_2196_700" fill="white">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M13 8H17V9.5H29V8H33V12H31.5V20H33V24H29V22.5H17V24H13V20H14.5V12H13V8ZM17 21.5V20H15.5V12H17V10.5H29V12H30.5V20H29V21.5H17Z"
+      />
+    </mask>
+    <path
+      d="M17 8H18V7H17V8ZM13 8V7H12V8H13ZM17 9.5H16V10.5H17V9.5ZM29 9.5V10.5H30V9.5H29ZM29 8V7H28V8H29ZM33 8H34V7H33V8ZM33 12V13H34V12H33ZM31.5 12V11H30.5V12H31.5ZM31.5 20H30.5V21H31.5V20ZM33 20H34V19H33V20ZM33 24V25H34V24H33ZM29 24H28V25H29V24ZM29 22.5H30V21.5H29V22.5ZM17 22.5V21.5H16V22.5H17ZM17 24V25H18V24H17ZM13 24H12V25H13V24ZM13 20V19H12V20H13ZM14.5 20V21H15.5V20H14.5ZM14.5 12H15.5V11H14.5V12ZM13 12H12V13H13V12ZM17 20H18V19H17V20ZM17 21.5H16V22.5H17V21.5ZM15.5 20H14.5V21H15.5V20ZM15.5 12V11H14.5V12H15.5ZM17 12V13H18V12H17ZM17 10.5V9.5H16V10.5H17ZM29 10.5H30V9.5H29V10.5ZM29 12H28V13H29V12ZM30.5 12H31.5V11H30.5V12ZM30.5 20V21H31.5V20H30.5ZM29 20V19H28V20H29ZM29 21.5V22.5H30V21.5H29ZM17 7H13V9H17V7ZM18 9.5V8H16V9.5H18ZM29 8.5H17V10.5H29V8.5ZM28 8V9.5H30V8H28ZM33 7H29V9H33V7ZM34 12V8H32V12H34ZM31.5 13H33V11H31.5V13ZM32.5 20V12H30.5V20H32.5ZM33 19H31.5V21H33V19ZM34 24V20H32V24H34ZM29 25H33V23H29V25ZM28 22.5V24H30V22.5H28ZM17 23.5H29V21.5H17V23.5ZM16 22.5V24H18V22.5H16ZM17 23H13V25H17V23ZM14 24V20H12V24H14ZM13 21H14.5V19H13V21ZM13.5 12V20H15.5V12H13.5ZM13 13H14.5V11H13V13ZM12 8V12H14V8H12ZM16 20V21.5H18V20H16ZM15.5 21H17V19H15.5V21ZM16.5 20V12H14.5V20H16.5ZM15.5 13H17V11H15.5V13ZM18 12V10.5H16V12H18ZM17 11.5H29V9.5H17V11.5ZM28 10.5V12H30V10.5H28ZM29 13H30.5V11H29V13ZM29.5 12V20H31.5V12H29.5ZM30.5 19H29V21H30.5V19ZM28 20V21.5H30V20H28ZM29 20.5H17V22.5H29V20.5Z"
+      fill="black"
+      mask="url(#path-8-inside-2_2196_700)"
+    />
+  </svg>
+);
+
+RectangleButton.propTypes = {
+  isActive: PropTypes.bool,
+};

package/configure/src/hotspot-container.jsx

@@ -5,6 +5,8 @@ import { withStyles } from '@material-ui/core/styles/index';
 import Help from '@material-ui/icons/Help';
 
 import Drawable from './hotspot-drawable';
+import { RectangleButton } from './buttons/rectangle';
+import { PolygonButton } from './buttons/polygon';
 import Button from './button';
 import UploadControl from './upload-control';
 import { getAllShapes, groupShapes } from './utils';
@@ -31,6 +33,7 @@ export class Container extends Component {
       dragEnabled: true,
       // always transform shapes map into shapes array at this level
       shapes: getAllShapes(props.shapes),
+      selectedShape: 'none',
     };
     this.fakeImageHandler = {
       cancel: () => {},
@@ -135,6 +138,11 @@ export class Container extends Component {
     }
   };
 
+  handleFinishDrawing = () => {
+    // Explicitly end the current shape drawing session
+    // This would cause the finalizeCreation method to be called in the HotspotDrawable component
+    this.setState({ selectedShape: 'none' });
+  };
   toggleTooltip = () => this.setState({ showTooltip: !this.state.showTooltip });
 
   render() {
@@ -151,7 +159,7 @@ export class Container extends Component {
       preserveAspectRatioEnabled,
     } = this.props;
     const { dropzoneActive, dragEnabled, showTooltip } = this.state;
-    const { shapes } = this.state;
+    const { shapes, selectedShape } = this.state;
 
     return (
       <div className={classes.base}>
@@ -171,6 +179,19 @@ export class Container extends Component {
             : {})}
         >
           <div className={classes.toolbar}>
+            <div
+              onClick={() => this.setState({ selectedShape: selectedShape === 'rectangle' ? 'none' : 'rectangle' })}
+              className={classes.buttonShape}
+            >
+              <RectangleButton isActive={selectedShape === 'rectangle'} />
+            </div>
+            <div
+              onClick={() => this.setState({ selectedShape: selectedShape === 'polygon' ? 'none' : 'polygon' })}
+              className={classes.buttonShape}
+            >
+              <PolygonButton isActive={selectedShape === 'polygon'} />
+            </div>
+
             {imageUrl && (
               <UploadControl
                 classNameButton={classes.replaceButton}
@@ -196,6 +217,8 @@ export class Container extends Component {
                 dimensions={dimensions}
                 disableDrag={this.handleDisableDrag}
                 enableDrag={this.handleEnableDrag}
+                shapeType={this.state.selectedShape}
+                handleFinishDrawing={this.handleFinishDrawing}
                 imageUrl={imageUrl}
                 hotspotColor={hotspotColor}
                 multipleCorrect={multipleCorrect}
@@ -243,6 +266,12 @@ export class Container extends Component {
 }
 
 const styles = (theme) => ({
+  buttonShape: {
+    marginRight: '5px',
+    '&:hover': {
+      cursor: 'pointer',
+    },
+  },
   base: {
     marginTop: theme.spacing.unit * 1.5,
     marginBottom: theme.spacing.unit * 2.5,
@@ -282,7 +311,7 @@ const styles = (theme) => ({
     marginRight: 'auto',
   },
   toolbar: {
-    backgroundColor: '#ECEDF1',
+    backgroundColor: '#FFF',
     borderBottom: '1px solid #E0E1E6',
     borderTopLeftRadius: '5px',
     borderTopRightRadius: '5px',