@pie-element/hotspot 6.24.1-next.18 → 6.24.1-next.5

package/configure/src/hotspot-polygon.jsx

@@ -2,7 +2,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Group, Line, Circle } from 'react-konva';
 import { withStyles } from '@material-ui/core/styles/index';
-import { Rect } from 'react-konva/lib/ReactKonvaCore';
 import DeleteWidget from './DeleteWidget';
 
 const HOVERED_COLOR = '#00BFFF';
@@ -167,66 +166,21 @@ class PolComponent extends React.Component {
     onDeleteShape(id);
   };
 
-  // serialize(points) {
-  //   return points.reduce((acc, point) => [...acc, point.x, point.y], []);
-  // }
-
-  getBoundingBox(points) {
-    const xValues = points.map((point) => point.x);
-    const yValues = points.map((point) => point.y);
-    const minX = Math.min(...xValues);
-    const maxX = Math.max(...xValues);
-    const minY = Math.min(...yValues);
-    const maxY = Math.max(...yValues);
-    return {
-      x: minX,
-      y: minY,
-      width: maxX - minX,
-      height: maxY - minY,
-    };
-  }
-
   render() {
-    const {
-      classes,
-      correct,
-      id,
-      hotspotColor,
-      outlineColor,
-      selectedHotspotColor,
-      hoverOutlineColor,
-      strokeWidth = 5,
-    } = this.props;
-
+    const { classes, correct, id, hotspotColor, outlineColor, strokeWidth = 5 } = this.props;
     const { points, x, y, hovered } = this.state;
     const showPoints = hovered || id === 'newPolygon';
 
-    const hoverColor = hoverOutlineColor || HOVERED_COLOR;
-
     const calculatedStrokeWidth = correct ? strokeWidth : hovered ? 1 : 0;
     const calculatedStroke = correct ? outlineColor : hovered ? HOVERED_COLOR : '';
-    // const calculatedStroke = correct ? outlineColor : hovered ? hoverColor : '';
-    const boundingBox = this.getBoundingBox(points);
 
     return (
       <Group classes={classes.group} onMouseLeave={this.handleMouseLeave} onMouseEnter={this.handleMouseEnter}>
-        {hoverOutlineColor && hovered && (
-          <Rect
-            x={boundingBox.x}
-            y={boundingBox.y}
-            width={boundingBox.width}
-            height={boundingBox.height}
-            stroke={hoverOutlineColor}
-            strokeWidth={2}
-            listening={false}
-          />
-        )}
-
         <Line
           classes={classes.base}
           points={this.serialize(points)}
           closed={true}
-          fill={correct ? selectedHotspotColor : hotspotColor}
+          fill={hotspotColor}
           onClick={this.handleClick}
           onTap={this.handleClick}
           draggable
@@ -290,8 +244,6 @@ PolComponent.propTypes = {
   imageHeight: PropTypes.number,
   imageWidth: PropTypes.number,
   hotspotColor: PropTypes.string.isRequired,
-  selectedHotspotColor: PropTypes.string,
-  hoverOutlineColor: PropTypes.string,
   onClick: PropTypes.func.isRequired,
   addPolygonPoint: PropTypes.func.isRequired,
   onDeleteShape: PropTypes.func.isRequired,

package/configure/src/hotspot-rectangle.jsx

@@ -74,48 +74,20 @@ class RectComponent extends React.Component {
   };
 
   render() {
-    const {
-      classes,
-      correct,
-      height,
-      hotspotColor,
-      id,
-      outlineColor,
-      width,
-      x,
-      y,
-      strokeWidth = 5,
-      selectedHotspotColor,
-      hoverOutlineColor,
-    } = this.props;
-
-    const { hovered } = this.state;
-
+    const { classes, correct, height, hotspotColor, id, outlineColor, width, x, y, strokeWidth = 5 } = this.props;
     return (
       <Group classes={classes.group} onMouseLeave={this.handleMouseLeave} onMouseEnter={this.handleMouseEnter}>
-        {hoverOutlineColor && hovered && (
-          <Rect
-            x={x}
-            y={y}
-            width={width}
-            height={height}
-            stroke={hoverOutlineColor}
-            strokeWidth={2}
-            listening={false}
-          />
-        )}
-
         <Rect
           classes={classes.base}
           ref={this.shapeRef}
           width={width}
           height={height}
-          fill={correct ? selectedHotspotColor : hotspotColor}
+          fill={hotspotColor}
           onClick={this.handleClick}
           onTap={this.handleClick}
           draggable
-          stroke={hovered ? 'transparent' : outlineColor}
-          strokeWidth={correct && !hovered ? strokeWidth : 0}
+          stroke={outlineColor}
+          strokeWidth={correct ? strokeWidth : 0}
           onDragStart={() => this.setState({ isDragging: true })}
           onDragEnd={this.handleOnDragEnd}
           onTransformStart={() => this.setState({ isDragging: true })}
@@ -162,8 +134,6 @@ RectComponent.propTypes = {
   id: PropTypes.string.isRequired,
   height: PropTypes.number.isRequired,
   hotspotColor: PropTypes.string.isRequired,
-  selectedHotspotColor: PropTypes.string,
-  hoverOutlineColor: PropTypes.string,
   onClick: PropTypes.func.isRequired,
   onDeleteShape: PropTypes.func.isRequired,
   onDragEnd: PropTypes.func.isRequired,

package/configure/src/root.jsx

@@ -214,8 +214,6 @@ export class Root extends React.Component {
           hasErrors={!!shapesError || !!selectionsError}
           hotspotColor={model.hotspotColor}
           outlineColor={model.outlineColor}
-          selectedHotspotColor={model.selectedHotspotColor}
-          hoverOutlineColor={model.hoverOutlineColor}
           onUpdateImageDimension={onUpdateImageDimension}
           onUpdateShapes={onUpdateShapes}
           onImageUpload={onImageUpload}

package/controller/package.json

@@ -11,7 +11,7 @@
   "main": "lib/index.js",
   "module": "src/index.js",
   "dependencies": {
-    "@pie-lib/pie-toolbox": "1.29.0",
+    "@pie-lib/pie-toolbox": "1.28.0",
     "debug": "^4.1.1",
     "lodash": "^4.17.15"
   }

package/docs/pie-schema.json

@@ -164,16 +164,6 @@
       "type": "string",
       "title": "hotspotColor"
     },
-    "selectedHotspotColor": {
-      "description": "The color that fills the hotspot",
-      "type": "string",
-      "title": "selectedHotspotColor"
-    },
-    "hoverOutlineColor": {
-      "description": "The color of the rectangular outline",
-      "type": "string",
-      "title": "hoverOutlineColor"
-    },
     "hotspotList": {
       "description": "The filling hotspot color options",
       "type": "array",

package/docs/pie-schema.json.md

@@ -110,14 +110,6 @@ the width of the section
 
 The color that fills the hotspot
 
-# `selectedHotspotColor` (string)
-
-The color that fills the hotspot
-
-# `hoverOutlineColor` (string)
-
-The color of the rectangular outline
-
 # `hotspotList` (array)
 
 The filling hotspot color options

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-element/hotspot",
-  "version": "6.24.1-next.18+a61e1177e",
+  "version": "6.24.1-next.5+6084f693c",
   "description": "",
   "repository": "pie-framework/pie-elements",
   "publishConfig": {
@@ -9,7 +9,7 @@
   "dependencies": {
     "@material-ui/core": "^3.9.3",
     "@pie-framework/pie-player-events": "^0.1.0",
-    "@pie-lib/pie-toolbox": "1.29.0",
+    "@pie-lib/pie-toolbox": "1.28.0",
     "konva": "^3.2.5",
     "prop-types": "^15.6.1",
     "react": "^16.8.1",
@@ -18,7 +18,7 @@
   },
   "author": "pie framework developers",
   "license": "ISC",
-  "gitHead": "a61e1177e55cd7bd8d244c638fda8a313f960078",
+  "gitHead": "6084f693cf23739eba410d0a16ee53a292e9077d",
   "scripts": {
     "postpublish": "../../scripts/postpublish"
   },