@pie-element/hotspot 6.24.1-next.9 → 6.25.0

package/configure/src/hotspot-polygon.jsx

@@ -2,6 +2,7 @@ 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';
@@ -166,21 +167,66 @@ 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, strokeWidth = 5 } = this.props;
+    const {
+      classes,
+      correct,
+      id,
+      hotspotColor,
+      outlineColor,
+      selectedHotspotColor,
+      hoverOutlineColor,
+      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={hotspotColor}
+          fill={correct ? selectedHotspotColor : hotspotColor}
           onClick={this.handleClick}
           onTap={this.handleClick}
           draggable
@@ -244,6 +290,8 @@ 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,20 +74,48 @@ class RectComponent extends React.Component {
   };
 
   render() {
-    const { classes, correct, height, hotspotColor, id, outlineColor, width, x, y, strokeWidth = 5 } = this.props;
+    const {
+      classes,
+      correct,
+      height,
+      hotspotColor,
+      id,
+      outlineColor,
+      width,
+      x,
+      y,
+      strokeWidth = 5,
+      selectedHotspotColor,
+      hoverOutlineColor,
+    } = this.props;
+
+    const { hovered } = this.state;
+
     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={hotspotColor}
+          fill={correct ? selectedHotspotColor : hotspotColor}
           onClick={this.handleClick}
           onTap={this.handleClick}
           draggable
-          stroke={outlineColor}
-          strokeWidth={correct ? strokeWidth : 0}
+          stroke={hovered ? 'transparent' : outlineColor}
+          strokeWidth={correct && !hovered ? strokeWidth : 0}
           onDragStart={() => this.setState({ isDragging: true })}
           onDragEnd={this.handleOnDragEnd}
           onTransformStart={() => this.setState({ isDragging: true })}
@@ -134,6 +162,8 @@ 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,6 +214,8 @@ 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/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [4.19.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-controller@4.18.0...@pie-element/hotspot-controller@4.19.0) (2024-08-06)
+
+
+### Features
+
+* update pie-lib PD-3996, PD-3792, Pd-3791, PD-3841, PD-3956, PD-3569, PD-3855 ([6343d1b](https://github.com/pie-framework/pie-elements/commit/6343d1b00c5a4a3d88de70ed13a8aa5c1a43002d))
+
+
+
+
+
 # [4.18.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-controller@4.17.6...@pie-element/hotspot-controller@4.18.0) (2024-07-26)
 
 

package/controller/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pie-element/hotspot-controller",
   "private": true,
-  "version": "4.18.0",
+  "version": "4.19.0",
   "description": "",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
@@ -11,7 +11,7 @@
   "main": "lib/index.js",
   "module": "src/index.js",
   "dependencies": {
-    "@pie-lib/pie-toolbox": "1.28.0",
+    "@pie-lib/pie-toolbox": "1.29.0",
     "debug": "^4.1.1",
     "lodash": "^4.17.15"
   }

package/docs/pie-schema.json

@@ -164,6 +164,16 @@
       "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,6 +110,14 @@ 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.9+da7be3c80",
+  "version": "6.25.0",
   "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.28.0",
+    "@pie-lib/pie-toolbox": "1.29.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": "da7be3c80a08c5521006ee1298256e645f20ea02",
+  "gitHead": "74eb9b1f92c86492f3e09c7cb919a9757365fbc5",
   "scripts": {
     "postpublish": "../../scripts/postpublish"
   },