Merge pull request #1559 from pie-framework/feat/PD-597

Feat/pd 597

Author: andreeapescar

packages/hotspot/configure/src/DeleteWidget.jsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Group } from 'react-konva';
+import { faDelete } from './icons';
+import Image from './image';
+import { calculate } from './utils';
+
+const DeleteWidget = ({ height, id, width, x, y, points, outlineColor, handleWidgetClick }) => {
+  let positionX, positionY;
+  // if points exist we have an irregular form (polygon) and position should be computed
+  if (points) {
+    const { x, y } = calculate(points);
+    positionX = x;
+    positionY = y;
+  } else {
+    positionX = x + width - 20; // 10 pixels to the left
+    positionY = y + height - 20; // 10 pixels above
+  }
+
+  return (
+    <Group onClick={() => handleWidgetClick(id)}>
+      <Image width={20} height={20} x={positionX} y={positionY} src={faDelete} />
+    </Group>
+  );
+};
+
+DeleteWidget.propTypes = {
+  id: PropTypes.string.isRequired,
+  height: PropTypes.number,
+  width: PropTypes.number,
+  x: PropTypes.number.isRequired,
+  y: PropTypes.number.isRequired,
+  handleWidgetClick: PropTypes.func.isRequired,
+  points: PropTypes.arrayOf(
+    PropTypes.shape({
+      x: PropTypes.number,
+      y: PropTypes.number,
+    }),
+  ),
+  outlineColor: PropTypes.string.isRequired,
+};
+
+export default DeleteWidget;

packages/hotspot/configure/src/__tests__/__snapshots__/hotspot-container.test.js.snap

@@ -16,11 +16,6 @@ exports[`HotspotContainer render renders 1`] = `
         onInputClick={[Function]}
         setRef={[Function]}
       />
-      <WithStyles(RawButton)
-        disabled={false}
-        label="Undo"
-        onClick={[Function]}
-      />
       <WithStyles(RawButton)
         disabled={false}
         label="Clear all"
@@ -40,6 +35,7 @@ exports[`HotspotContainer render renders 1`] = `
         hotspotColor="rgba(137, 183, 244, 0.65)"
         imageUrl="https://cdn.fluence.net/image/0240eb1455ce4c4bb6180232347b6aef_W"
         multipleCorrect={true}
+        onDeleteShape={[Function]}
         onUpdateImageDimension={[MockFunction]}
         onUpdateShapes={[Function]}
         outlineColor="blue"

packages/hotspot/configure/src/__tests__/hotspot-container.test.js

@@ -78,6 +78,7 @@ describe('HotspotContainer', () => {
   let w,
     onImageUpload = jest.fn(),
     onUpdateImageDimension = jest.fn(),
+    onDeleteShape = jest.fn(),
     onUpdateShapes = jest.fn(),
     initialModel = model();
   beforeEach(() => {
@@ -91,6 +92,7 @@ describe('HotspotContainer', () => {
         outlineColor: initialModel.outlineColor,
         onUpdateImageDimension: onUpdateImageDimension,
         onUpdateShapes: onUpdateShapes,
+        onDeleteShape: onDeleteShape,
         onImageUpload: onImageUpload,
         shapes: initialModel.shapes,
         ...extras,
@@ -210,6 +212,54 @@ describe('HotspotContainer', () => {
       });
     });
 
+    it('onDeleteShape by id', () => {
+      console.log('wrapper', wrapper.instance());
+      wrapper.instance().onDeleteShape('7');
+      expect(onUpdateShapes).toHaveBeenCalledWith(
+        groupShapes([
+          { correct: true, group: 'rectangles', height: 140, id: '0', index: 0, width: 130, x: 1, y: 1 },
+          { group: 'rectangles', height: 140, id: '1', index: 1, width: 130, x: 140, y: 1 },
+          { group: 'rectangles', height: 140, id: '2', index: 2, width: 130, x: 280, y: 1 },
+          {
+            correct: true,
+            group: 'polygons',
+            id: '3',
+            index: 3,
+            points: [
+              { x: 1, y: 148 },
+              { x: 1, y: 288 },
+              { x: 129, y: 288 },
+              { x: 129, y: 148 },
+            ],
+          },
+          {
+            correct: false,
+            group: 'polygons',
+            id: '4',
+            index: 4,
+            points: [
+              { x: 141, y: 151 },
+              { x: 141, y: 289 },
+              { x: 269, y: 289 },
+              { x: 269, y: 151 },
+            ],
+          },
+          {
+            correct: false,
+            group: 'polygons',
+            id: '5',
+            index: 5,
+            points: [
+              { x: 279, y: 150 },
+              { x: 279, y: 289 },
+              { x: 407, y: 289 },
+              { x: 407, y: 150 },
+            ],
+          },
+        ]),
+      );
+    });
+
     it('onUpdateShapes with no shapes', () => {
       wrapper.instance().onUpdateShapes([]);
 
@@ -219,33 +269,6 @@ describe('HotspotContainer', () => {
       });
     });
 
-    it('handleUndo if no new shape was added', () => {
-      wrapper.instance().handleUndo();
-      expect(onUpdateShapes).toHaveBeenLastCalledWith({
-        ...initialModel.shapes,
-        polygons: initialModel.shapes.polygons.slice(0, -1),
-      });
-    });
-
-    it('handleUndo if new shape was added', () => {
-      const newShape = {
-        id: '7',
-        height: 140,
-        width: 130,
-        x: 280,
-        y: 1,
-        index: 6,
-      };
-
-      // first, add a new shape
-      wrapper.instance().state.shapes = getAllShapes({
-        ...initialModel.shapes,
-        rectangles: [...initialModel.shapes.rectangles, newShape],
-      });
-      wrapper.instance().handleUndo();
-      expect(onUpdateShapes).toBeCalledWith(initialModel.shapes);
-    });
-
     it('handleClearAll', () => {
       wrapper.instance().handleClearAll();
       expect(onUpdateShapes).toHaveBeenLastCalledWith({

packages/hotspot/configure/src/hotspot-container.jsx

@@ -33,13 +33,10 @@ export class Container extends Component {
       shapes: getAllShapes(props.shapes),
     };
     this.fakeImageHandler = {
-      cancel: () => {
-      },
+      cancel: () => {},
       done: (a, url) => this.props.onImageUpload(url),
-      fileChosen: () => {
-      },
-      progress: () => {
-      }
+      fileChosen: () => {},
+      progress: () => {},
     };
   }
 
@@ -55,7 +52,7 @@ export class Container extends Component {
         insertImage({
           ...this.fakeImageHandler,
           getChosenFile: () => file,
-          isPasted: true
+          isPasted: true,
         });
       }
     }
@@ -108,23 +105,18 @@ export class Container extends Component {
 
   onUpdateShapes = (newShapes) => {
     const { onUpdateShapes } = this.props;
-
     this.setState(
       { shapes: newShapes },
       // always transform shapes array back into shapes map when saving changes
-      () => onUpdateShapes(groupShapes(newShapes))
+      () => onUpdateShapes(groupShapes(newShapes)),
     );
   };
 
-  handleUndo = () => {
+  onDeleteShape = (id) => {
     const { shapes } = this.state;
-
     if (shapes && shapes.length) {
-      // sort by index value
-      let newShapes = shapes.sort((a, b) => parseInt(a.index) - parseInt(b.index));
-
-      newShapes = newShapes ? newShapes.slice(0, newShapes.length - 1) : [];
-
+      // filter the deleted shape out
+      let newShapes = shapes.filter((shape) => shape.id !== id);
       this.onUpdateShapes(newShapes);
     }
   };
@@ -170,12 +162,12 @@ export class Container extends Component {
           })}
           {...(dragEnabled
             ? {
-              onDragExit: this.handleOnDragExit,
-              onDragLeave: this.handleOnDragExit,
-              onDragOver: this.handleOnDragOver,
-              onDrop: this.handleOnDrop,
-              onPaste: this.handleOnPaste,
-            }
+                onDragExit: this.handleOnDragExit,
+                onDragLeave: this.handleOnDragExit,
+                onDragOver: this.handleOnDragOver,
+                onDrop: this.handleOnDrop,
+                onPaste: this.handleOnPaste,
+              }
             : {})}
         >
           <div className={classes.toolbar}>
@@ -190,9 +182,7 @@ export class Container extends Component {
                 }}
               />
             )}
-
-            <Button disabled={!(shapes && shapes.length)} onClick={this.handleUndo} label="Undo"/>
-            <Button disabled={!(shapes && shapes.length)} onClick={this.handleClearAll} label="Clear all"/>
+            <Button disabled={!(shapes && shapes.length)} onClick={this.handleClearAll} label="Clear all" />
           </div>
 
           <div
@@ -211,6 +201,7 @@ export class Container extends Component {
                 multipleCorrect={multipleCorrect}
                 onUpdateImageDimension={onUpdateImageDimension}
                 onUpdateShapes={this.onUpdateShapes}
+                onDeleteShape={this.onDeleteShape}
                 outlineColor={outlineColor}
                 shapes={shapes}
                 strokeWidth={strokeWidth}
@@ -219,7 +210,7 @@ export class Container extends Component {
             ) : (
               <div className={classNames(classes.drawableHeight, classes.centered)}>
                 <label>Drag and drop or upload image from computer</label>
-                <br/>
+                <br />
                 <UploadControl
                   label="Upload Image"
                   onInputClick={this.handleInputClick}
@@ -238,11 +229,11 @@ export class Container extends Component {
                   <label>
                     Click and drag to create a hotspot. Click the hotspot to mark correct. Click again to unmark.
                   </label>
-                  <div className={classes.tooltipArrow}/>
+                  <div className={classes.tooltipArrow} />
                 </div>
               )}
 
-              <Help className={classes.icon} onMouseOut={this.toggleTooltip} onMouseOver={this.toggleTooltip}/>
+              <Help className={classes.icon} onMouseOut={this.toggleTooltip} onMouseOver={this.toggleTooltip} />
             </div>
           )}
         </div>

packages/hotspot/configure/src/hotspot-drawable.jsx

@@ -102,7 +102,6 @@ export class Drawable extends React.Component {
           x: currShape.x,
           y: currShape.y,
         };
-
         // On mouse move don't trigger any event. Put the shapes on this state instead.
         this.setState({ stateShapes: newShapesList });
       }
@@ -254,6 +253,7 @@ export class Drawable extends React.Component {
       outlineColor,
       shapes,
       strokeWidth,
+      onDeleteShape,
     } = this.props;
     const {
       stateShapes,
@@ -293,19 +293,19 @@ export class Drawable extends React.Component {
           onMouseMove={this.handleMouseMove}
         >
           <Layer>
-            {shapesToUse.map((shape, index) => {
+            {shapesToUse.map((shape, i) => {
               const Tag = shape.group === 'polygons' ? Polygon : Rectangle;
-
               return (
                 <Tag
                   correct={shape.correct}
                   isDrawing={isDrawing}
                   height={shape.height}
                   hotspotColor={hotspotColor}
                   id={shape.id}
-                  key={index}
+                  key={i}
                   onClick={() => this.handleOnSetAsCorrect(shape)}
                   onDragEnd={this.handleOnDragEnd}
+                  onDeleteShape={onDeleteShape}
                   outlineColor={outlineColor}
                   width={shape.width}
                   x={shape.x}
@@ -364,6 +364,7 @@ Drawable.propTypes = {
   multipleCorrect: PropTypes.bool.isRequired,
   onUpdateImageDimension: PropTypes.func.isRequired,
   onUpdateShapes: PropTypes.func.isRequired,
+  onDeleteShape: PropTypes.func.isRequired,
   outlineColor: PropTypes.string.isRequired,
   shapes: PropTypes.array.isRequired,
   strokeWidth: PropTypes.number,