npm - @pie-element/hotspot - Versions diffs - 6.25.4-next.5 → 6.25.4 - Mend

@pie-element/hotspot 6.25.4-next.5 → 6.25.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

package/CHANGELOG.md +13 -0
package/configure/CHANGELOG.md +13 -0
package/configure/lib/hotspot-drawable.js +46 -24
package/configure/lib/hotspot-drawable.js.map +1 -1
package/configure/lib/hotspot-polygon.js +8 -8
package/configure/lib/hotspot-polygon.js.map +1 -1
package/configure/package.json +1 -1
package/configure/src/hotspot-drawable.jsx +19 -0
package/configure/src/hotspot-polygon.jsx +7 -9
package/package.json +2 -2

package/CHANGELOG.md CHANGED Viewed

@@ -3,6 +3,19 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+## [6.25.4](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot@6.25.3...@pie-element/hotspot@6.25.4) (2024-08-27)
+### Bug Fixes
+* **hotspot:** close inprogress polygons improvements PD-3915 ([8a8d4c3](https://github.com/pie-framework/pie-elements/commit/8a8d4c3bf6876ba58feda93fe5669f76dc28639d))
+* **hotspot:** update in progress polygon PD-3915 ([e94daa3](https://github.com/pie-framework/pie-elements/commit/e94daa31ce426dbee0467bb515cf458c81e86767))
+* **hotspot:** update in progress polygon PD-3915 ([e18d3f8](https://github.com/pie-framework/pie-elements/commit/e18d3f838796a353854a305c2fed9d2d1459dcf8))
 ## [6.25.3](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot@6.25.2...@pie-element/hotspot@6.25.3) (2024-08-22)

package/configure/CHANGELOG.md CHANGED Viewed

@@ -3,6 +3,19 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+## [6.24.4](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-configure@6.24.3...@pie-element/hotspot-configure@6.24.4) (2024-08-27)
+### Bug Fixes
+* **hotspot:** close inprogress polygons improvements PD-3915 ([8a8d4c3](https://github.com/pie-framework/pie-elements/commit/8a8d4c3bf6876ba58feda93fe5669f76dc28639d))
+* **hotspot:** update in progress polygon PD-3915 ([e94daa3](https://github.com/pie-framework/pie-elements/commit/e94daa31ce426dbee0467bb515cf458c81e86767))
+* **hotspot:** update in progress polygon PD-3915 ([e18d3f8](https://github.com/pie-framework/pie-elements/commit/e18d3f838796a353854a305c2fed9d2d1459dcf8))
 ## [6.24.3](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-configure@6.24.2...@pie-element/hotspot-configure@6.24.3) (2024-08-22)

package/configure/lib/hotspot-drawable.js CHANGED Viewed

@@ -249,12 +249,32 @@ var Drawable = /*#__PURE__*/function (_React$Component) {
       });
       onUpdateShapes((0, _cloneDeep["default"])(newShapes));
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleOnSetAsCorrect", function (shape) {
-      var id = shape.id;
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "closeInProgressPolygons", function (id) {
       var _this$props5 = _this.props,
-          multipleCorrect = _this$props5.multipleCorrect,
           shapes = _this$props5.shapes,
           onUpdateShapes = _this$props5.onUpdateShapes;
+      var inProgressPolygon = (shapes || []).find(function (shape) {
+        return shape.id === 'newPolygon';
+      });
+      if (id === 'newPolygon' || inProgressPolygon && _this.state.isDrawing) {
+        _shapes2.PolygonShape.finalizeCreation(_this.state, function (newShapes) {
+          _this.setState({
+            isDrawing: false,
+            shapes: newShapes,
+            isDrawingShapeId: undefined
+          });
+          onUpdateShapes((0, _cloneDeep["default"])(newShapes));
+        });
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleOnSetAsCorrect", function (shape) {
+      var id = shape.id;
+      var _this$props6 = _this.props,
+          multipleCorrect = _this$props6.multipleCorrect,
+          shapes = _this$props6.shapes,
+          onUpdateShapes = _this$props6.onUpdateShapes;
       var newShapes;
       if (multipleCorrect) {
@@ -273,6 +293,8 @@ var Drawable = /*#__PURE__*/function (_React$Component) {
       }
       onUpdateShapes((0, _cloneDeep["default"])(newShapes));
+      _this.closeInProgressPolygons(id);
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleOnImageLoad", function (_ref) {
       var target = _ref.target;
@@ -305,11 +327,11 @@ var Drawable = /*#__PURE__*/function (_React$Component) {
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "startResizing", function (e) {
       var bounds = e.target.getBoundingClientRect();
       var box = _this.image;
-      var _this$props6 = _this.props,
-          disableDrag = _this$props6.disableDrag,
-          preserveAspectRatioEnabled = _this$props6.preserveAspectRatioEnabled,
-          dimensions = _this$props6.dimensions,
-          shapes = _this$props6.shapes;
+      var _this$props7 = _this.props,
+          disableDrag = _this$props7.disableDrag,
+          preserveAspectRatioEnabled = _this$props7.preserveAspectRatioEnabled,
+          dimensions = _this$props7.dimensions,
+          shapes = _this$props7.shapes;
       var _updateImageDimension = (0, _utils.updateImageDimensions)(dimensions, {
         width: e.clientX - bounds.left,
@@ -342,10 +364,10 @@ var Drawable = /*#__PURE__*/function (_React$Component) {
       disableDrag();
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "stopResizing", function () {
-      var _this$props7 = _this.props,
-          enableDrag = _this$props7.enableDrag,
-          onUpdateImageDimension = _this$props7.onUpdateImageDimension,
-          onUpdateShapes = _this$props7.onUpdateShapes;
+      var _this$props8 = _this.props,
+          enableDrag = _this$props8.enableDrag,
+          onUpdateImageDimension = _this$props8.onUpdateImageDimension,
+          onUpdateShapes = _this$props8.onUpdateShapes;
       var _this$state = _this.state,
           dimensions = _this$state.dimensions,
           stateShapes = _this$state.stateShapes;
@@ -426,18 +448,18 @@ var Drawable = /*#__PURE__*/function (_React$Component) {
     function render() {
       var _this3 = this;
-      var _this$props8 = this.props,
-          classes = _this$props8.classes,
-          imageUrl = _this$props8.imageUrl,
-          _this$props8$dimensio = _this$props8.dimensions,
-          height = _this$props8$dimensio.height,
-          width = _this$props8$dimensio.width,
-          hotspotColor = _this$props8.hotspotColor,
-          outlineColor = _this$props8.outlineColor,
-          shapes = _this$props8.shapes,
-          strokeWidth = _this$props8.strokeWidth,
-          hoverOutlineColor = _this$props8.hoverOutlineColor,
-          selectedHotspotColor = _this$props8.selectedHotspotColor;
+      var _this$props9 = this.props,
+          classes = _this$props9.classes,
+          imageUrl = _this$props9.imageUrl,
+          _this$props9$dimensio = _this$props9.dimensions,
+          height = _this$props9$dimensio.height,
+          width = _this$props9$dimensio.width,
+          hotspotColor = _this$props9.hotspotColor,
+          outlineColor = _this$props9.outlineColor,
+          shapes = _this$props9.shapes,
+          strokeWidth = _this$props9.strokeWidth,
+          hoverOutlineColor = _this$props9.hoverOutlineColor,
+          selectedHotspotColor = _this$props9.selectedHotspotColor;
       var _this$state2 = this.state,
           stateShapes = _this$state2.stateShapes,
           isDrawing = _this$state2.isDrawing,

package/configure/lib/hotspot-drawable.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/hotspot-drawable.jsx"],"names":["IMAGE_MAX_WIDTH","Drawable","props","e","shapeType","onUpdateShapes","shapes","newState","newShapeId","target","currentTarget","Object","values","SUPPORTED_SHAPES","includes","RECTANGLE","RectangleShape","create","CIRCLE","CircleShape","POLYGON","state","isDrawingShapeId","addPolygonPoint","isDrawing","PolygonShape","setState","finalizeCreation","handleMouseMove","handleOnMouseUp","id","updatedProps","dimensions","canvasWidth","width","canvasHeight","height","newShapes","map","shape","newX","x","newY","y","group","radius","points","xValues","point","yValues","minX","Math","min","minY","maxX","max","maxY","deltaX","deltaY","filter","multipleCorrect","correct","onUpdateImageDimension","resizeHandle","resize","elementStyle","getComputedStyle","newHeight","parseFloat","newWidth","aspectWidth","addEventListener","initialiseResize","window","startResizing","stopResizing","bounds","getBoundingClientRect","box","image","disableDrag","preserveAspectRatioEnabled","clientX","left","clientY","top","resizeValid","checkIfResizeValid","hasMinimumWidth","style","resizing","stateShapes","enableDrag","removeEventListener","undefined","onDeleteShape","temporaryPolygon","addPoint","drawable","forEach","right","bottom","classes","imageUrl","hotspotColor","outlineColor","strokeWidth","hoverOutlineColor","selectedHotspotColor","heightFromState","widthFromState","shapesToUse","base","imageContainer","handleOnImageLoad","ref","stage","handleOnMouseDown","handleOnMouseOutOrLeave","i","Tag","SHAPE_GROUPS","RECTANGLES","Rectangle","CIRCLES","Circle","POLYGONS","Polygon","handleOnSetAsCorrect","handleOnDragEnd","deleteShape","nextProps","prevState","React","Component","styles","position","alignItems","display","justifyContent","borderBottom","borderRight","cursor","propTypes","PropTypes","object","isRequired","func","oneOf","string","handleFinishDrawing","bool","array","number"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Layer, Stage } from 'react-konva';\nimport cloneDeep from 'lodash/cloneDeep';\nimport { withStyles } from '@material-ui/core/styles/index';\n\nimport Rectangle from './hotspot-rectangle';\nimport Polygon from './hotspot-polygon';\nimport Circle from './hotspot-circle';\nimport { getUpdatedShapes, updateImageDimensions } from './utils';\nimport { RectangleShape, CircleShape, PolygonShape, SUPPORTED_SHAPES, SHAPE_GROUPS } from './shapes';\nconst IMAGE_MAX_WIDTH = 800;\n\nexport class Drawable extends React.Component {\n static getDerivedStateFromProps(nextProps, prevState) {\n // Update the state only if the props have changed\n if (nextProps.shapes !== prevState.shapes) {\n return { shapes: nextProps.shapes };\n }\n\n return null;\n }\n\n constructor(props) {\n super(props);\n\n this.state = {\n isDrawing: false,\n stateShapes: false,\n resizing: false,\n temporaryPolygon: null,\n shapes: [],\n dimensions: {\n height: 0,\n width: 0,\n },\n };\n }\n\n handleOnMouseDown = (e) => {\n const { shapeType, onUpdateShapes, shapes } = this.props;\n let newState, newShapeId;\n\n // Ensure that the click originated from the expected element\n if (e.target !== e.currentTarget) {\n return;\n }\n\n if (!Object.values(SUPPORTED_SHAPES).includes(shapeType)) {\n return;\n }\n\n switch (shapeType) {\n case SUPPORTED_SHAPES.RECTANGLE:\n newState = RectangleShape.create(shapes, e);\n break;\n case SUPPORTED_SHAPES.CIRCLE:\n newState = CircleShape.create(shapes, e);\n break;\n case SUPPORTED_SHAPES.POLYGON:\n newShapeId = this.state.isDrawingShapeId;\n\n if (newShapeId) {\n // If a polygon is in progress, add a new point\n const shapes = this.addPolygonPoint(e);\n\n newState = {\n isDrawing: true,\n isDrawingShapeId: newShapeId,\n shapes: shapes,\n };\n } else {\n // Else start a new one\n newState = PolygonShape.create(shapes, e);\n }\n break;\n default:\n return;\n }\n\n this.setState({\n ...newState,\n });\n\n onUpdateShapes(newState.shapes);\n };\n\n addPolygonPoint(e) {\n const { shapes } = PolygonShape.addPoint(this.state, e, (newShapes) => {\n this.setState({\n isDrawing: false,\n shapes: newShapes,\n isDrawingShapeId: undefined,\n });\n\n this.props.onUpdateShapes(newShapes);\n });\n\n return shapes;\n }\n\n handleOnMouseUp = () => {\n const { shapeType, onUpdateShapes } = this.props;\n let newState;\n\n if (shapeType === SUPPORTED_SHAPES.POLYGON) {\n return;\n }\n\n switch (shapeType) {\n case SUPPORTED_SHAPES.RECTANGLE:\n newState = RectangleShape.finalizeCreation(this.state, this.props);\n break;\n case SUPPORTED_SHAPES.CIRCLE:\n newState = CircleShape.finalizeCreation(this.state, this.props);\n break;\n default:\n return;\n }\n\n this.setState({\n ...newState,\n isDrawing: false,\n });\n\n onUpdateShapes(newState.shapes);\n };\n\n handleMouseMove = (e) => {\n const { shapeType, onUpdateShapes } = this.props;\n let newState;\n\n if (!this.state.isDrawing \|\| !Object.values(SUPPORTED_SHAPES).includes(shapeType)) {\n return;\n }\n\n switch (shapeType) {\n case SUPPORTED_SHAPES.RECTANGLE:\n newState = RectangleShape.handleMouseMove(this.state, e);\n break;\n case SUPPORTED_SHAPES.CIRCLE:\n newState = CircleShape.handleMouseMove(this.state, e);\n break;\n case SUPPORTED_SHAPES.POLYGON:\n newState = PolygonShape.handleMouseMove(this.state, e);\n break;\n default:\n return;\n }\n\n this.setState(newState);\n onUpdateShapes(newState.shapes);\n };\n\n handleOnMouseOutOrLeave = (e) => {\n if (this.state.isDrawing) {\n this.handleOnMouseUp(e);\n }\n };\n\n handleOnDragEnd = (id, updatedProps) => {\n const { shapes, onUpdateShapes, dimensions } = this.props;\n const { width: canvasWidth, height: canvasHeight } = dimensions;\n\n // when a shape is moved completely outside the canvas\n // remove that shape\n const newShapes = shapes\n .map((shape) => {\n if (shape.id !== id) {\n return shape;\n }\n\n let newX = updatedProps.x;\n let newY = updatedProps.y;\n\n if (shape.group === 'rectangles') {\n if (newX + shape.width < 0 \|\| newX > canvasWidth \|\| newY + shape.height < 0 \|\| newY > canvasHeight) {\n return null;\n }\n\n return { ...shape, ...updatedProps };\n }\n\n if (shape.group === 'circles') {\n const radius = shape.radius;\n if (newX + radius < 0 \|\| newX - radius > canvasWidth \|\| newY + radius < 0 \|\| newY - radius > canvasHeight) {\n return null;\n }\n\n return { ...shape, ...updatedProps };\n }\n\n if (shape.group === 'polygons') {\n const points = shape.points;\n const xValues = points.map((point) => point.x);\n const yValues = points.map((point) => point.y);\n\n let minX = Math.min(...xValues);\n let minY = Math.min(...yValues);\n let maxX = Math.max(...xValues);\n let maxY = Math.max(...yValues);\n\n // Calculate deltas based on the first point as a reference\n const deltaX = updatedProps['points'][0].x - points[0].x;\n const deltaY = updatedProps['points'][0].y - points[0].y;\n\n minX = minX + deltaX;\n maxX = maxX + deltaX;\n minY = minY + deltaY;\n maxY = maxY + deltaY;\n\n if (maxX < 0 \|\| minX > canvasWidth \|\| maxY < 0 \|\| minY > canvasHeight) {\n return null;\n }\n\n return { ...shape, ...updatedProps };\n }\n\n return shape;\n })\n .filter((shape) => shape !== null);\n\n onUpdateShapes(cloneDeep(newShapes));\n };\n\n handleOnSetAsCorrect = (shape) => {\n const { id } = shape;\n const { multipleCorrect, shapes, onUpdateShapes } = this.props;\n\n let newShapes;\n\n if (multipleCorrect) {\n newShapes = shapes.map((shape) => {\n if (shape.id === id) {\n shape.correct = !shape.correct;\n }\n return shape;\n });\n } else {\n newShapes = shapes.map((shape) => {\n shape.correct = shape.id === id;\n return shape;\n });\n }\n\n onUpdateShapes(cloneDeep(newShapes));\n };\n /// end of handling HotSpots section\n\n /// start of handling Image section\n handleOnImageLoad = ({ target }) => {\n const { onUpdateImageDimension } = this.props;\n const resizeHandle = this.resize;\n const elementStyle = getComputedStyle(target);\n const newHeight = parseFloat(elementStyle.height);\n const newWidth = parseFloat(elementStyle.width);\n const aspectWidth = newWidth / IMAGE_MAX_WIDTH;\n\n const dimensions =\n newWidth > IMAGE_MAX_WIDTH\n ? {\n height: newHeight / aspectWidth,\n width: IMAGE_MAX_WIDTH,\n }\n : {\n height: newHeight,\n width: newWidth,\n };\n\n this.setState({ dimensions }, () => onUpdateImageDimension(dimensions));\n\n resizeHandle.addEventListener('mousedown', this.initialiseResize, false);\n };\n\n initialiseResize = () => {\n window.addEventListener('mousemove', this.startResizing, false);\n window.addEventListener('mouseup', this.stopResizing, false);\n };\n\n checkIfResizeValid(x, y) {\n const { shapes } = this.state;\n let drawable = true;\n\n // Do not allow resizing over the hotspots\n shapes &&\n shapes.forEach((shape) => {\n const right = shape.x + shape.width + 5;\n const bottom = shape.y + shape.height + 5;\n if (x <= right \|\| y <= bottom) {\n drawable = false;\n }\n });\n return drawable;\n }\n\n startResizing = (e) => {\n const bounds = e.target.getBoundingClientRect();\n const box = this.image;\n const { disableDrag, preserveAspectRatioEnabled, dimensions, shapes } = this.props;\n\n const { width, height } = updateImageDimensions(\n dimensions,\n {\n width: e.clientX - bounds.left,\n height: e.clientY - bounds.top,\n },\n preserveAspectRatioEnabled,\n );\n\n const resizeValid = this.checkIfResizeValid(width, height);\n const hasMinimumWidth = width > 150 && height > 150;\n\n if (resizeValid && hasMinimumWidth && box) {\n box.style.width = `${width}px`;\n box.style.height = `${height}px`;\n\n this.setState({\n resizing: true,\n dimensions: { height: height, width: width },\n stateShapes: getUpdatedShapes(dimensions, { width, height }, shapes),\n });\n }\n\n disableDrag();\n };\n\n stopResizing = () => {\n const { enableDrag, onUpdateImageDimension, onUpdateShapes } = this.props;\n const { dimensions, stateShapes } = this.state;\n\n enableDrag();\n\n if (stateShapes) {\n onUpdateShapes(cloneDeep(stateShapes));\n }\n\n onUpdateImageDimension(dimensions);\n\n window.removeEventListener('mousemove', this.startResizing, false);\n window.removeEventListener('mouseup', this.stopResizing, false);\n\n this.setState({ resizing: false, stateShapes: false });\n };\n\n deleteShape = (id) => {\n this.setState({\n isDrawing: false,\n isDrawingShapeId: undefined,\n });\n this.props.onDeleteShape(id);\n };\n\n /// end of handling Image section\n\n render() {\n const {\n classes,\n imageUrl,\n dimensions: { height, width },\n hotspotColor,\n outlineColor,\n shapes,\n strokeWidth,\n hoverOutlineColor,\n selectedHotspotColor,\n } = this.props;\n\n const {\n stateShapes,\n isDrawing,\n dimensions: { height: heightFromState, width: widthFromState },\n } = this.state;\n const shapesToUse = stateShapes \|\| shapes;\n\n return (\n <div className={classes.base}>\n {imageUrl && (\n <div className={classes.imageContainer}>\n <img\n className={classes.image}\n onLoad={this.handleOnImageLoad}\n ref={(ref) => {\n this.image = ref;\n }}\n src={imageUrl}\n {...(height && width ? { style: { height, width } } : {})}\n />\n <div\n ref={(ref) => {\n this.resize = ref;\n }}\n className={classes.resize}\n />\n </div>\n )}\n\n <Stage\n className={classes.stage}\n height={heightFromState \|\| height}\n width={widthFromState \|\| width}\n onMouseDown={this.handleOnMouseDown}\n onMouseUp={this.handleOnMouseUp}\n onMouseMove={this.handleMouseMove}\n onContentMouseOut={this.handleOnMouseOutOrLeave}\n onContentMouseLeave={this.handleOnMouseOutOrLeave}\n >\n <Layer>\n {shapesToUse.map((shape, i) => {\n let Tag;\n switch (shape.group) {\n case SHAPE_GROUPS.RECTANGLES:\n Tag = Rectangle;\n break;\n case SHAPE_GROUPS.CIRCLES:\n Tag = Circle;\n break;\n case SHAPE_GROUPS.POLYGONS:\n Tag = Polygon;\n break;\n default:\n return null;\n }\n\n return (\n <Tag\n {...(shape.group === SHAPE_GROUPS.CIRCLES ? { radius: shape.radius } : {})}\n {...(shape.group === SHAPE_GROUPS.RECTANGLES ? { height: shape.height, width: shape.width } : {})}\n {...(shape.group === SHAPE_GROUPS.POLYGONS\n ? { points: shape.points, addPolygonPoint: (e) => this.addPolygonPoint(e) }\n : {})}\n correct={shape.correct}\n isDrawing={isDrawing}\n hotspotColor={hotspotColor}\n hoverOutlineColor={hoverOutlineColor}\n selectedHotspotColor={selectedHotspotColor}\n id={shape.id}\n key={i}\n onClick={() => this.handleOnSetAsCorrect(shape)}\n onDragEnd={this.handleOnDragEnd}\n onDeleteShape={this.deleteShape}\n outlineColor={outlineColor}\n width={shape.width}\n x={shape.x}\n y={shape.y}\n strokeWidth={strokeWidth}\n imageHeight={heightFromState \|\| height}\n imageWidth={widthFromState \|\| width}\n {...(shape.group === 'polygons' ? { addPolygonPoint: (e) => this.addPolygonPoint(e) } : {})}\n />\n );\n })}\n </Layer>\n </Stage>\n </div>\n );\n }\n}\n\nconst styles = () => ({\n base: {\n position: 'relative',\n },\n image: {\n alignItems: 'center',\n display: 'flex',\n justifyContent: 'center',\n },\n imageContainer: {\n position: 'relative',\n width: 'fit-content',\n },\n resize: {\n borderBottom: '1px solid #727272',\n borderRight: '1px solid #727272',\n bottom: '-10px',\n cursor: 'se-resize',\n height: '10px',\n position: 'absolute',\n right: '-10px',\n width: '10px',\n },\n stage: {\n left: 0,\n top: 0,\n position: 'absolute',\n },\n});\n\nDrawable.propTypes = {\n classes: PropTypes.object.isRequired,\n disableDrag: PropTypes.func.isRequired,\n dimensions: PropTypes.object.isRequired,\n enableDrag: PropTypes.func.isRequired,\n shapeType: PropTypes.oneOf(Object.values(SUPPORTED_SHAPES)),\n imageUrl: PropTypes.string.isRequired,\n handleFinishDrawing: PropTypes.func.isRequired,\n hotspotColor: PropTypes.string.isRequired,\n selectedHotspotColor: PropTypes.string,\n hoverOutlineColor: PropTypes.string,\n multipleCorrect: PropTypes.bool.isRequired,\n onUpdateImageDimension: PropTypes.func.isRequired,\n onUpdateShapes: PropTypes.func.isRequired,\n onDeleteShape: PropTypes.func.isRequired,\n outlineColor: PropTypes.string.isRequired,\n shapes: PropTypes.array.isRequired,\n strokeWidth: PropTypes.number,\n preserveAspectRatioEnabled: PropTypes.bool,\n};\n\nexport default withStyles(styles)(Drawable);\n"],"file":"hotspot-drawable.js"}
1	+ {"version":3,"sources":["../src/hotspot-drawable.jsx"],"names":["IMAGE_MAX_WIDTH","Drawable","props","e","shapeType","onUpdateShapes","shapes","newState","newShapeId","target","currentTarget","Object","values","SUPPORTED_SHAPES","includes","RECTANGLE","RectangleShape","create","CIRCLE","CircleShape","POLYGON","state","isDrawingShapeId","addPolygonPoint","isDrawing","PolygonShape","setState","finalizeCreation","handleMouseMove","handleOnMouseUp","id","updatedProps","dimensions","canvasWidth","width","canvasHeight","height","newShapes","map","shape","newX","x","newY","y","group","radius","points","xValues","point","yValues","minX","Math","min","minY","maxX","max","maxY","deltaX","deltaY","filter","inProgressPolygon","find","undefined","multipleCorrect","correct","closeInProgressPolygons","onUpdateImageDimension","resizeHandle","resize","elementStyle","getComputedStyle","newHeight","parseFloat","newWidth","aspectWidth","addEventListener","initialiseResize","window","startResizing","stopResizing","bounds","getBoundingClientRect","box","image","disableDrag","preserveAspectRatioEnabled","clientX","left","clientY","top","resizeValid","checkIfResizeValid","hasMinimumWidth","style","resizing","stateShapes","enableDrag","removeEventListener","onDeleteShape","temporaryPolygon","addPoint","drawable","forEach","right","bottom","classes","imageUrl","hotspotColor","outlineColor","strokeWidth","hoverOutlineColor","selectedHotspotColor","heightFromState","widthFromState","shapesToUse","base","imageContainer","handleOnImageLoad","ref","stage","handleOnMouseDown","handleOnMouseOutOrLeave","i","Tag","SHAPE_GROUPS","RECTANGLES","Rectangle","CIRCLES","Circle","POLYGONS","Polygon","handleOnSetAsCorrect","handleOnDragEnd","deleteShape","nextProps","prevState","React","Component","styles","position","alignItems","display","justifyContent","borderBottom","borderRight","cursor","propTypes","PropTypes","object","isRequired","func","oneOf","string","handleFinishDrawing","bool","array","number"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Layer, Stage } from 'react-konva';\nimport cloneDeep from 'lodash/cloneDeep';\nimport { withStyles } from '@material-ui/core/styles/index';\n\nimport Rectangle from './hotspot-rectangle';\nimport Polygon from './hotspot-polygon';\nimport Circle from './hotspot-circle';\nimport { getUpdatedShapes, updateImageDimensions } from './utils';\nimport { RectangleShape, CircleShape, PolygonShape, SUPPORTED_SHAPES, SHAPE_GROUPS } from './shapes';\nconst IMAGE_MAX_WIDTH = 800;\n\nexport class Drawable extends React.Component {\n static getDerivedStateFromProps(nextProps, prevState) {\n // Update the state only if the props have changed\n if (nextProps.shapes !== prevState.shapes) {\n return { shapes: nextProps.shapes };\n }\n\n return null;\n }\n\n constructor(props) {\n super(props);\n\n this.state = {\n isDrawing: false,\n stateShapes: false,\n resizing: false,\n temporaryPolygon: null,\n shapes: [],\n dimensions: {\n height: 0,\n width: 0,\n },\n };\n }\n\n handleOnMouseDown = (e) => {\n const { shapeType, onUpdateShapes, shapes } = this.props;\n let newState, newShapeId;\n\n // Ensure that the click originated from the expected element\n if (e.target !== e.currentTarget) {\n return;\n }\n\n if (!Object.values(SUPPORTED_SHAPES).includes(shapeType)) {\n return;\n }\n\n switch (shapeType) {\n case SUPPORTED_SHAPES.RECTANGLE:\n newState = RectangleShape.create(shapes, e);\n break;\n case SUPPORTED_SHAPES.CIRCLE:\n newState = CircleShape.create(shapes, e);\n break;\n case SUPPORTED_SHAPES.POLYGON:\n newShapeId = this.state.isDrawingShapeId;\n\n if (newShapeId) {\n // If a polygon is in progress, add a new point\n const shapes = this.addPolygonPoint(e);\n\n newState = {\n isDrawing: true,\n isDrawingShapeId: newShapeId,\n shapes: shapes,\n };\n } else {\n // Else start a new one\n newState = PolygonShape.create(shapes, e);\n }\n break;\n default:\n return;\n }\n\n this.setState({\n ...newState,\n });\n\n onUpdateShapes(newState.shapes);\n };\n\n addPolygonPoint(e) {\n const { shapes } = PolygonShape.addPoint(this.state, e, (newShapes) => {\n this.setState({\n isDrawing: false,\n shapes: newShapes,\n isDrawingShapeId: undefined,\n });\n\n this.props.onUpdateShapes(newShapes);\n });\n\n return shapes;\n }\n\n handleOnMouseUp = () => {\n const { shapeType, onUpdateShapes } = this.props;\n let newState;\n\n if (shapeType === SUPPORTED_SHAPES.POLYGON) {\n return;\n }\n\n switch (shapeType) {\n case SUPPORTED_SHAPES.RECTANGLE:\n newState = RectangleShape.finalizeCreation(this.state, this.props);\n break;\n case SUPPORTED_SHAPES.CIRCLE:\n newState = CircleShape.finalizeCreation(this.state, this.props);\n break;\n default:\n return;\n }\n\n this.setState({\n ...newState,\n isDrawing: false,\n });\n\n onUpdateShapes(newState.shapes);\n };\n\n handleMouseMove = (e) => {\n const { shapeType, onUpdateShapes } = this.props;\n let newState;\n\n if (!this.state.isDrawing \|\| !Object.values(SUPPORTED_SHAPES).includes(shapeType)) {\n return;\n }\n\n switch (shapeType) {\n case SUPPORTED_SHAPES.RECTANGLE:\n newState = RectangleShape.handleMouseMove(this.state, e);\n break;\n case SUPPORTED_SHAPES.CIRCLE:\n newState = CircleShape.handleMouseMove(this.state, e);\n break;\n case SUPPORTED_SHAPES.POLYGON:\n newState = PolygonShape.handleMouseMove(this.state, e);\n break;\n default:\n return;\n }\n\n this.setState(newState);\n onUpdateShapes(newState.shapes);\n };\n\n handleOnMouseOutOrLeave = (e) => {\n if (this.state.isDrawing) {\n this.handleOnMouseUp(e);\n }\n };\n\n handleOnDragEnd = (id, updatedProps) => {\n const { shapes, onUpdateShapes, dimensions } = this.props;\n const { width: canvasWidth, height: canvasHeight } = dimensions;\n\n // when a shape is moved completely outside the canvas\n // remove that shape\n const newShapes = shapes\n .map((shape) => {\n if (shape.id !== id) {\n return shape;\n }\n\n let newX = updatedProps.x;\n let newY = updatedProps.y;\n\n if (shape.group === 'rectangles') {\n if (newX + shape.width < 0 \|\| newX > canvasWidth \|\| newY + shape.height < 0 \|\| newY > canvasHeight) {\n return null;\n }\n\n return { ...shape, ...updatedProps };\n }\n\n if (shape.group === 'circles') {\n const radius = shape.radius;\n if (newX + radius < 0 \|\| newX - radius > canvasWidth \|\| newY + radius < 0 \|\| newY - radius > canvasHeight) {\n return null;\n }\n\n return { ...shape, ...updatedProps };\n }\n\n if (shape.group === 'polygons') {\n const points = shape.points;\n const xValues = points.map((point) => point.x);\n const yValues = points.map((point) => point.y);\n\n let minX = Math.min(...xValues);\n let minY = Math.min(...yValues);\n let maxX = Math.max(...xValues);\n let maxY = Math.max(...yValues);\n\n // Calculate deltas based on the first point as a reference\n const deltaX = updatedProps['points'][0].x - points[0].x;\n const deltaY = updatedProps['points'][0].y - points[0].y;\n\n minX = minX + deltaX;\n maxX = maxX + deltaX;\n minY = minY + deltaY;\n maxY = maxY + deltaY;\n\n if (maxX < 0 \|\| minX > canvasWidth \|\| maxY < 0 \|\| minY > canvasHeight) {\n return null;\n }\n\n return { ...shape, ...updatedProps };\n }\n\n return shape;\n })\n .filter((shape) => shape !== null);\n\n onUpdateShapes(cloneDeep(newShapes));\n };\n\n closeInProgressPolygons = (id) => {\n const { shapes, onUpdateShapes } = this.props;\n\n const inProgressPolygon = (shapes \|\| []).find((shape) => shape.id === 'newPolygon');\n if (id === 'newPolygon' \|\| (inProgressPolygon && this.state.isDrawing)) {\n PolygonShape.finalizeCreation(this.state, (newShapes) => {\n this.setState({\n isDrawing: false,\n shapes: newShapes,\n isDrawingShapeId: undefined,\n });\n\n onUpdateShapes(cloneDeep(newShapes));\n });\n }\n }\n\n handleOnSetAsCorrect = (shape) => {\n const { id } = shape;\n const { multipleCorrect, shapes, onUpdateShapes } = this.props;\n\n let newShapes;\n\n if (multipleCorrect) {\n newShapes = shapes.map((shape) => {\n if (shape.id === id) {\n shape.correct = !shape.correct;\n }\n return shape;\n });\n } else {\n newShapes = shapes.map((shape) => {\n shape.correct = shape.id === id;\n return shape;\n });\n }\n\n onUpdateShapes(cloneDeep(newShapes));\n\n this.closeInProgressPolygons(id);\n };\n /// end of handling HotSpots section\n\n /// start of handling Image section\n handleOnImageLoad = ({ target }) => {\n const { onUpdateImageDimension } = this.props;\n const resizeHandle = this.resize;\n const elementStyle = getComputedStyle(target);\n const newHeight = parseFloat(elementStyle.height);\n const newWidth = parseFloat(elementStyle.width);\n const aspectWidth = newWidth / IMAGE_MAX_WIDTH;\n\n const dimensions =\n newWidth > IMAGE_MAX_WIDTH\n ? {\n height: newHeight / aspectWidth,\n width: IMAGE_MAX_WIDTH,\n }\n : {\n height: newHeight,\n width: newWidth,\n };\n\n this.setState({ dimensions }, () => onUpdateImageDimension(dimensions));\n\n resizeHandle.addEventListener('mousedown', this.initialiseResize, false);\n };\n\n initialiseResize = () => {\n window.addEventListener('mousemove', this.startResizing, false);\n window.addEventListener('mouseup', this.stopResizing, false);\n };\n\n checkIfResizeValid(x, y) {\n const { shapes } = this.state;\n let drawable = true;\n\n // Do not allow resizing over the hotspots\n shapes &&\n shapes.forEach((shape) => {\n const right = shape.x + shape.width + 5;\n const bottom = shape.y + shape.height + 5;\n if (x <= right \|\| y <= bottom) {\n drawable = false;\n }\n });\n return drawable;\n }\n\n startResizing = (e) => {\n const bounds = e.target.getBoundingClientRect();\n const box = this.image;\n const { disableDrag, preserveAspectRatioEnabled, dimensions, shapes } = this.props;\n\n const { width, height } = updateImageDimensions(\n dimensions,\n {\n width: e.clientX - bounds.left,\n height: e.clientY - bounds.top,\n },\n preserveAspectRatioEnabled,\n );\n\n const resizeValid = this.checkIfResizeValid(width, height);\n const hasMinimumWidth = width > 150 && height > 150;\n\n if (resizeValid && hasMinimumWidth && box) {\n box.style.width = `${width}px`;\n box.style.height = `${height}px`;\n\n this.setState({\n resizing: true,\n dimensions: { height: height, width: width },\n stateShapes: getUpdatedShapes(dimensions, { width, height }, shapes),\n });\n }\n\n disableDrag();\n };\n\n stopResizing = () => {\n const { enableDrag, onUpdateImageDimension, onUpdateShapes } = this.props;\n const { dimensions, stateShapes } = this.state;\n\n enableDrag();\n\n if (stateShapes) {\n onUpdateShapes(cloneDeep(stateShapes));\n }\n\n onUpdateImageDimension(dimensions);\n\n window.removeEventListener('mousemove', this.startResizing, false);\n window.removeEventListener('mouseup', this.stopResizing, false);\n\n this.setState({ resizing: false, stateShapes: false });\n };\n\n deleteShape = (id) => {\n this.setState({\n isDrawing: false,\n isDrawingShapeId: undefined,\n });\n this.props.onDeleteShape(id);\n };\n\n /// end of handling Image section\n\n render() {\n const {\n classes,\n imageUrl,\n dimensions: { height, width },\n hotspotColor,\n outlineColor,\n shapes,\n strokeWidth,\n hoverOutlineColor,\n selectedHotspotColor,\n } = this.props;\n\n const {\n stateShapes,\n isDrawing,\n dimensions: { height: heightFromState, width: widthFromState },\n } = this.state;\n const shapesToUse = stateShapes \|\| shapes;\n\n return (\n <div className={classes.base}>\n {imageUrl && (\n <div className={classes.imageContainer}>\n <img\n className={classes.image}\n onLoad={this.handleOnImageLoad}\n ref={(ref) => {\n this.image = ref;\n }}\n src={imageUrl}\n {...(height && width ? { style: { height, width } } : {})}\n />\n <div\n ref={(ref) => {\n this.resize = ref;\n }}\n className={classes.resize}\n />\n </div>\n )}\n\n <Stage\n className={classes.stage}\n height={heightFromState \|\| height}\n width={widthFromState \|\| width}\n onMouseDown={this.handleOnMouseDown}\n onMouseUp={this.handleOnMouseUp}\n onMouseMove={this.handleMouseMove}\n onContentMouseOut={this.handleOnMouseOutOrLeave}\n onContentMouseLeave={this.handleOnMouseOutOrLeave}\n >\n <Layer>\n {shapesToUse.map((shape, i) => {\n let Tag;\n switch (shape.group) {\n case SHAPE_GROUPS.RECTANGLES:\n Tag = Rectangle;\n break;\n case SHAPE_GROUPS.CIRCLES:\n Tag = Circle;\n break;\n case SHAPE_GROUPS.POLYGONS:\n Tag = Polygon;\n break;\n default:\n return null;\n }\n\n return (\n <Tag\n {...(shape.group === SHAPE_GROUPS.CIRCLES ? { radius: shape.radius } : {})}\n {...(shape.group === SHAPE_GROUPS.RECTANGLES ? { height: shape.height, width: shape.width } : {})}\n {...(shape.group === SHAPE_GROUPS.POLYGONS\n ? { points: shape.points, addPolygonPoint: (e) => this.addPolygonPoint(e) }\n : {})}\n correct={shape.correct}\n isDrawing={isDrawing}\n hotspotColor={hotspotColor}\n hoverOutlineColor={hoverOutlineColor}\n selectedHotspotColor={selectedHotspotColor}\n id={shape.id}\n key={i}\n onClick={() => this.handleOnSetAsCorrect(shape)}\n onDragEnd={this.handleOnDragEnd}\n onDeleteShape={this.deleteShape}\n outlineColor={outlineColor}\n width={shape.width}\n x={shape.x}\n y={shape.y}\n strokeWidth={strokeWidth}\n imageHeight={heightFromState \|\| height}\n imageWidth={widthFromState \|\| width}\n {...(shape.group === 'polygons' ? { addPolygonPoint: (e) => this.addPolygonPoint(e) } : {})}\n />\n );\n })}\n </Layer>\n </Stage>\n </div>\n );\n }\n}\n\nconst styles = () => ({\n base: {\n position: 'relative',\n },\n image: {\n alignItems: 'center',\n display: 'flex',\n justifyContent: 'center',\n },\n imageContainer: {\n position: 'relative',\n width: 'fit-content',\n },\n resize: {\n borderBottom: '1px solid #727272',\n borderRight: '1px solid #727272',\n bottom: '-10px',\n cursor: 'se-resize',\n height: '10px',\n position: 'absolute',\n right: '-10px',\n width: '10px',\n },\n stage: {\n left: 0,\n top: 0,\n position: 'absolute',\n },\n});\n\nDrawable.propTypes = {\n classes: PropTypes.object.isRequired,\n disableDrag: PropTypes.func.isRequired,\n dimensions: PropTypes.object.isRequired,\n enableDrag: PropTypes.func.isRequired,\n shapeType: PropTypes.oneOf(Object.values(SUPPORTED_SHAPES)),\n imageUrl: PropTypes.string.isRequired,\n handleFinishDrawing: PropTypes.func.isRequired,\n hotspotColor: PropTypes.string.isRequired,\n selectedHotspotColor: PropTypes.string,\n hoverOutlineColor: PropTypes.string,\n multipleCorrect: PropTypes.bool.isRequired,\n onUpdateImageDimension: PropTypes.func.isRequired,\n onUpdateShapes: PropTypes.func.isRequired,\n onDeleteShape: PropTypes.func.isRequired,\n outlineColor: PropTypes.string.isRequired,\n shapes: PropTypes.array.isRequired,\n strokeWidth: PropTypes.number,\n preserveAspectRatioEnabled: PropTypes.bool,\n};\n\nexport default withStyles(styles)(Drawable);\n"],"file":"hotspot-drawable.js"}

package/configure/lib/hotspot-polygon.js CHANGED Viewed

@@ -257,12 +257,12 @@ var PolComponent = /*#__PURE__*/function (_React$Component) {
           x = _this$state.x,
           y = _this$state.y,
           hovered = _this$state.hovered;
+      var isInProgress = id === 'newPolygon';
       var showPoints = hovered || id === 'newPolygon';
-      var hoverColor = hoverOutlineColor || HOVERED_COLOR;
       var calculatedStrokeWidth = correct ? strokeWidth : hovered ? 1 : 0;
-      var calculatedStroke = correct ? outlineColor : hovered ? HOVERED_COLOR : ''; // const calculatedStroke = correct ? outlineColor : hovered ? hoverColor : '';
+      var calculatedStroke = correct ? outlineColor : hovered ? HOVERED_COLOR : '';
       var boundingBox = this.getBoundingBox(points);
+      var calculatedFill = correct ? selectedHotspotColor : hotspotColor;
       return /*#__PURE__*/_react["default"].createElement(_reactKonva.Group, {
         classes: classes.group,
         onMouseLeave: this.handleMouseLeave,
@@ -278,13 +278,13 @@ var PolComponent = /*#__PURE__*/function (_React$Component) {
       }), /*#__PURE__*/_react["default"].createElement(_reactKonva.Line, {
         classes: classes.base,
         points: this.serialize(points),
-        closed: true,
-        fill: correct ? selectedHotspotColor : hotspotColor,
+        closed: !isInProgress,
+        fill: isInProgress ? 'transparent' : calculatedFill,
         onClick: this.handleClick,
         onTap: this.handleClick,
         draggable: true,
-        stroke: calculatedStroke,
-        strokeWidth: calculatedStrokeWidth,
+        stroke: isInProgress ? outlineColor : calculatedStroke,
+        strokeWidth: isInProgress ? 1 : calculatedStrokeWidth,
         onDragStart: this.onDragStart,
         onDragMove: this.handleOnDragEnd,
         onDragEnd: function onDragEnd(e) {
@@ -299,7 +299,7 @@ var PolComponent = /*#__PURE__*/function (_React$Component) {
           x: point.x,
           y: point.y,
           radius: 5,
-          fill: 'white',
+          fill: index === 0 && id === 'newPolygon' ? 'blue' : 'white',
           stroke: HOVERED_COLOR,
           strokeWidth: 1,
           onClick: _this2.handleClick,

package/configure/lib/hotspot-polygon.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/hotspot-polygon.jsx"],"names":["HOVERED_COLOR","PolComponent","points","xList","map","p","x","yList","y","Math","min","max","getOffset","xOffset","yOffset","reduce","acc","point","length","id","hovered","isDragging","getInitialState","props","e","width","height","isDrawing","onClick","addPolygonPoint","cancelBubble","setState","document","body","style","cursor","updateModel","onDragEnd","target","serialize","state","newPoints","currentPointCoordinate","index","changedIndex","onDeleteShape","xValues","yValues","minX","maxX","minY","maxY","classes","correct","hotspotColor","outlineColor","selectedHotspotColor","hoverOutlineColor","strokeWidth","showPoints","hoverColor","calculatedStrokeWidth","calculatedStroke","boundingBox","getBoundingBox","group","handleMouseLeave","handleMouseEnter","base","handleClick","onDragStart","handleOnDragEnd","circle","handleOnDragVertex","handleDelete","nextProps","prevState","imageHeight","imageWidth","JSON","stringify","React","Component","styles","opacity","padding","propTypes","PropTypes","object","isRequired","bool","string","number","func","arrayOf","shape","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Group, Line, Circle } from 'react-konva';\nimport { withStyles } from '@material-ui/core/styles/index';\nimport { Rect } from 'react-konva/lib/ReactKonvaCore';\nimport DeleteWidget from './DeleteWidget';\n\nconst HOVERED_COLOR = '#00BFFF';\n\nclass PolComponent extends React.Component {\n static getDerivedStateFromProps(nextProps, prevState) {\n const { id, points, imageHeight, imageWidth } = nextProps;\n // we execute this code only if image dimensions changed or an hotspot was added/deleted\n if (\n prevState.imageHeight !== imageHeight \|\|\n prevState.imageWidth !== imageWidth \|\|\n prevState.id !== nextProps.id \|\|\n JSON.stringify(prevState.points) !== JSON.stringify(points)\n ) {\n const xList = points.map((p) => p.x);\n const yList = points.map((p) => p.y);\n\n const x = Math.min(...xList);\n const y = Math.max(...yList);\n\n return {\n id,\n x,\n y,\n points,\n imageHeight,\n imageWidth,\n };\n }\n\n return null;\n }\n\n getOffset = (points) => {\n const xList = points.map((p) => p.x);\n const yList = points.map((p) => p.y);\n\n return {\n x: Math.min(...xList),\n y: Math.max(...yList),\n };\n };\n\n serialize = (points) => {\n const { x: xOffset, y: yOffset } = this.getOffset(points);\n\n return points.reduce((acc, point) => [...acc, point.x - xOffset, point.y - yOffset], []);\n };\n\n getInitialState = (points) => {\n if (points.length) {\n const { x, y } = this.getOffset(points);\n\n return {\n x,\n y,\n points,\n };\n }\n\n return {\n id: '',\n x: 0,\n y: 0,\n points: [],\n };\n };\n\n state = {\n hovered: false,\n isDragging: false,\n ...this.getInitialState(this.props.points),\n };\n\n handleClick = (e) => {\n const { points } = this.props;\n const xList = points.map((p) => p.x);\n const yList = points.map((p) => p.y);\n\n const width = Math.max(...xList) - Math.min(...xList);\n const height = Math.max(...yList) - Math.min(...yList);\n\n const { isDrawing, onClick, id } = this.props;\n\n if (width < 0 && height < 0 && isDrawing) {\n return;\n }\n\n if (isDrawing && id === 'newPolygon') {\n this.props.addPolygonPoint(e);\n return;\n }\n\n e.cancelBubble = true;\n onClick(id);\n };\n\n handleMouseEnter = () => {\n this.setState({ hovered: true });\n document.body.style.cursor = 'pointer';\n };\n\n handleMouseLeave = () => {\n this.setState({ hovered: false });\n document.body.style.cursor = 'default';\n };\n\n handleOnDragEnd = (e, updateModel = false) => {\n const { onDragEnd, id } = this.props;\n const points = e.target.points() \|\| this.serialize(this.state.points);\n\n const newPoints = points.reduce((acc, currentPointCoordinate, index) => {\n if (index % 2 === 0 && index + 1 < points.length) {\n return [\n ...acc,\n {\n x: currentPointCoordinate + e.target.x(),\n y: points[index + 1] + e.target.y(),\n },\n ];\n }\n\n return acc;\n }, []);\n\n this.setState({\n points: newPoints,\n ...this.getOffset(newPoints),\n isDragging: updateModel ? false : this.state.isDragging,\n });\n\n if (updateModel) {\n onDragEnd(id, { points: newPoints });\n }\n };\n\n handleOnDragVertex = (e, changedIndex, updateModel) => {\n const { onDragEnd, id } = this.props;\n const { points } = this.state;\n\n const newPoints = points.map((point, index) =>\n index === changedIndex ? { x: e.target.x(), y: e.target.y() } : point,\n );\n\n this.setState({\n points: newPoints,\n ...this.getOffset(newPoints),\n isDragging: updateModel ? false : this.state.isDragging,\n });\n\n if (updateModel) {\n onDragEnd(id, { points: newPoints });\n }\n };\n\n onDragStart = () => {\n this.setState({ isDragging: true });\n };\n\n handleDelete = (id) => {\n const { onDeleteShape } = this.props;\n onDeleteShape(id);\n };\n\n // serialize(points) {\n // return points.reduce((acc, point) => [...acc, point.x, point.y], []);\n // }\n\n getBoundingBox(points) {\n const xValues = points.map((point) => point.x);\n const yValues = points.map((point) => point.y);\n const minX = Math.min(...xValues);\n const maxX = Math.max(...xValues);\n const minY = Math.min(...yValues);\n const maxY = Math.max(...yValues);\n return {\n x: minX,\n y: minY,\n width: maxX - minX,\n height: maxY - minY,\n };\n }\n\n render() {\n const {\n classes,\n correct,\n id,\n hotspotColor,\n outlineColor,\n selectedHotspotColor,\n hoverOutlineColor,\n strokeWidth = 5,\n } = this.props;\n\n const { points, x, y, hovered } = this.state;\n const showPoints = hovered \|\| id === 'newPolygon';\n\n const hoverColor = hoverOutlineColor \|\| HOVERED_COLOR;\n\n const calculatedStrokeWidth = correct ? strokeWidth : hovered ? 1 : 0;\n const calculatedStroke = correct ? outlineColor : hovered ? HOVERED_COLOR : '';\n // const calculatedStroke = correct ? outlineColor : hovered ? hoverColor : '';\n const boundingBox = this.getBoundingBox(points);\n\n return (\n <Group classes={classes.group} onMouseLeave={this.handleMouseLeave} onMouseEnter={this.handleMouseEnter}>\n {hoverOutlineColor && hovered && (\n <Rect\n x={boundingBox.x}\n y={boundingBox.y}\n width={boundingBox.width}\n height={boundingBox.height}\n stroke={hoverOutlineColor}\n strokeWidth={2}\n listening={false}\n />\n )}\n\n <Line\n classes={classes.base}\n points={this.serialize(points)}\n closed={true}\n fill={correct ? selectedHotspotColor : hotspotColor}\n onClick={this.handleClick}\n onTap={this.handleClick}\n draggable\n stroke={calculatedStroke}\n strokeWidth={calculatedStrokeWidth}\n onDragStart={this.onDragStart}\n onDragMove={this.handleOnDragEnd}\n onDragEnd={(e) => this.handleOnDragEnd(e, true)}\n x={x}\n y={y}\n />\n\n {showPoints &&\n points.map((point, index) => (\n <Circle\n key={index}\n className={classes.circle}\n x={point.x}\n y={point.y}\n radius={5}\n fill={'white'}\n stroke={HOVERED_COLOR}\n strokeWidth={1}\n onClick={this.handleClick}\n onDragStart={this.onDragStart}\n onDragMove={(e) => {\n this.handleOnDragVertex(e, index);\n }}\n onDragEnd={(e) => {\n this.handleOnDragVertex(e, index, true);\n }}\n draggable\n />\n ))}\n {!this.state.isDragging && this.state.hovered && (\n <DeleteWidget x={x} y={y} id={id} handleWidgetClick={this.handleDelete} points={points} />\n )}\n </Group>\n );\n }\n}\n\nconst styles = () => ({\n base: {\n cursor: 'pointer',\n opacity: 0.5,\n },\n circle: {\n opacity: 4,\n },\n group: {\n padding: '12px',\n },\n});\n\nPolComponent.propTypes = {\n classes: PropTypes.object.isRequired,\n correct: PropTypes.bool,\n isDrawing: PropTypes.bool.isRequired,\n id: PropTypes.string.isRequired,\n imageHeight: PropTypes.number,\n imageWidth: PropTypes.number,\n hotspotColor: PropTypes.string.isRequired,\n selectedHotspotColor: PropTypes.string,\n hoverOutlineColor: PropTypes.string,\n onClick: PropTypes.func.isRequired,\n addPolygonPoint: PropTypes.func.isRequired,\n onDeleteShape: PropTypes.func.isRequired,\n onDragEnd: PropTypes.func.isRequired,\n outlineColor: PropTypes.string.isRequired,\n points: PropTypes.arrayOf(\n PropTypes.shape({\n x: PropTypes.number,\n y: PropTypes.number,\n }),\n ).isRequired,\n strokeWidth: PropTypes.number,\n};\n\nPolComponent.defaultProps = {\n correct: false,\n};\n\nexport default withStyles(styles)(PolComponent);\n"],"file":"hotspot-polygon.js"}
1	+ {"version":3,"sources":["../src/hotspot-polygon.jsx"],"names":["HOVERED_COLOR","PolComponent","points","xList","map","p","x","yList","y","Math","min","max","getOffset","xOffset","yOffset","reduce","acc","point","length","id","hovered","isDragging","getInitialState","props","e","width","height","isDrawing","onClick","addPolygonPoint","cancelBubble","setState","document","body","style","cursor","updateModel","onDragEnd","target","serialize","state","newPoints","currentPointCoordinate","index","changedIndex","onDeleteShape","xValues","yValues","minX","maxX","minY","maxY","classes","correct","hotspotColor","outlineColor","selectedHotspotColor","hoverOutlineColor","strokeWidth","isInProgress","showPoints","calculatedStrokeWidth","calculatedStroke","boundingBox","getBoundingBox","calculatedFill","group","handleMouseLeave","handleMouseEnter","base","handleClick","onDragStart","handleOnDragEnd","circle","handleOnDragVertex","handleDelete","nextProps","prevState","imageHeight","imageWidth","JSON","stringify","React","Component","styles","opacity","padding","propTypes","PropTypes","object","isRequired","bool","string","number","func","arrayOf","shape","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Group, Line, Circle } from 'react-konva';\nimport { withStyles } from '@material-ui/core/styles/index';\nimport { Rect } from 'react-konva/lib/ReactKonvaCore';\nimport DeleteWidget from './DeleteWidget';\n\nconst HOVERED_COLOR = '#00BFFF';\n\nclass PolComponent extends React.Component {\n static getDerivedStateFromProps(nextProps, prevState) {\n const { id, points, imageHeight, imageWidth } = nextProps;\n // we execute this code only if image dimensions changed or an hotspot was added/deleted\n if (\n prevState.imageHeight !== imageHeight \|\|\n prevState.imageWidth !== imageWidth \|\|\n prevState.id !== nextProps.id \|\|\n JSON.stringify(prevState.points) !== JSON.stringify(points)\n ) {\n const xList = points.map((p) => p.x);\n const yList = points.map((p) => p.y);\n\n const x = Math.min(...xList);\n const y = Math.max(...yList);\n\n return {\n id,\n x,\n y,\n points,\n imageHeight,\n imageWidth,\n };\n }\n\n return null;\n }\n\n getOffset = (points) => {\n const xList = points.map((p) => p.x);\n const yList = points.map((p) => p.y);\n\n return {\n x: Math.min(...xList),\n y: Math.max(...yList),\n };\n };\n\n serialize = (points) => {\n const { x: xOffset, y: yOffset } = this.getOffset(points);\n\n return points.reduce((acc, point) => [...acc, point.x - xOffset, point.y - yOffset], []);\n };\n\n getInitialState = (points) => {\n if (points.length) {\n const { x, y } = this.getOffset(points);\n\n return {\n x,\n y,\n points,\n };\n }\n\n return {\n id: '',\n x: 0,\n y: 0,\n points: [],\n };\n };\n\n state = {\n hovered: false,\n isDragging: false,\n ...this.getInitialState(this.props.points),\n };\n\n handleClick = (e) => {\n const { points } = this.props;\n const xList = points.map((p) => p.x);\n const yList = points.map((p) => p.y);\n\n const width = Math.max(...xList) - Math.min(...xList);\n const height = Math.max(...yList) - Math.min(...yList);\n\n const { isDrawing, onClick, id } = this.props;\n\n if (width < 0 && height < 0 && isDrawing) {\n return;\n }\n\n if (isDrawing && id === 'newPolygon') {\n this.props.addPolygonPoint(e);\n return;\n }\n\n e.cancelBubble = true;\n onClick(id);\n };\n\n handleMouseEnter = () => {\n this.setState({ hovered: true });\n document.body.style.cursor = 'pointer';\n };\n\n handleMouseLeave = () => {\n this.setState({ hovered: false });\n document.body.style.cursor = 'default';\n };\n\n handleOnDragEnd = (e, updateModel = false) => {\n const { onDragEnd, id } = this.props;\n const points = e.target.points() \|\| this.serialize(this.state.points);\n\n const newPoints = points.reduce((acc, currentPointCoordinate, index) => {\n if (index % 2 === 0 && index + 1 < points.length) {\n return [\n ...acc,\n {\n x: currentPointCoordinate + e.target.x(),\n y: points[index + 1] + e.target.y(),\n },\n ];\n }\n\n return acc;\n }, []);\n\n this.setState({\n points: newPoints,\n ...this.getOffset(newPoints),\n isDragging: updateModel ? false : this.state.isDragging,\n });\n\n if (updateModel) {\n onDragEnd(id, { points: newPoints });\n }\n };\n\n handleOnDragVertex = (e, changedIndex, updateModel) => {\n const { onDragEnd, id } = this.props;\n const { points } = this.state;\n\n const newPoints = points.map((point, index) =>\n index === changedIndex ? { x: e.target.x(), y: e.target.y() } : point,\n );\n\n this.setState({\n points: newPoints,\n ...this.getOffset(newPoints),\n isDragging: updateModel ? false : this.state.isDragging,\n });\n\n if (updateModel) {\n onDragEnd(id, { points: newPoints });\n }\n };\n\n onDragStart = () => {\n this.setState({ isDragging: true });\n };\n\n handleDelete = (id) => {\n const { onDeleteShape } = this.props;\n onDeleteShape(id);\n };\n\n // serialize(points) {\n // return points.reduce((acc, point) => [...acc, point.x, point.y], []);\n // }\n\n getBoundingBox(points) {\n const xValues = points.map((point) => point.x);\n const yValues = points.map((point) => point.y);\n const minX = Math.min(...xValues);\n const maxX = Math.max(...xValues);\n const minY = Math.min(...yValues);\n const maxY = Math.max(...yValues);\n return {\n x: minX,\n y: minY,\n width: maxX - minX,\n height: maxY - minY,\n };\n }\n\n render() {\n const {\n classes,\n correct,\n id,\n hotspotColor,\n outlineColor,\n selectedHotspotColor,\n hoverOutlineColor,\n strokeWidth = 5,\n } = this.props;\n\n const { points, x, y, hovered } = this.state;\n const isInProgress = id === 'newPolygon';\n const showPoints = hovered \|\| id === 'newPolygon';\n\n const calculatedStrokeWidth = correct ? strokeWidth : hovered ? 1 : 0;\n const calculatedStroke = correct ? outlineColor : hovered ? HOVERED_COLOR : '';\n const boundingBox = this.getBoundingBox(points);\n const calculatedFill = correct ? selectedHotspotColor : hotspotColor;\n\n return (\n <Group classes={classes.group} onMouseLeave={this.handleMouseLeave} onMouseEnter={this.handleMouseEnter}>\n {hoverOutlineColor && hovered && (\n <Rect\n x={boundingBox.x}\n y={boundingBox.y}\n width={boundingBox.width}\n height={boundingBox.height}\n stroke={hoverOutlineColor}\n strokeWidth={2}\n listening={false}\n />\n )}\n <Line\n classes={classes.base}\n points={this.serialize(points)}\n closed={!isInProgress}\n fill={isInProgress ? 'transparent' : calculatedFill}\n onClick={this.handleClick}\n onTap={this.handleClick}\n draggable\n stroke={isInProgress ? outlineColor : calculatedStroke}\n strokeWidth={isInProgress ? 1 : calculatedStrokeWidth}\n onDragStart={this.onDragStart}\n onDragMove={this.handleOnDragEnd}\n onDragEnd={(e) => this.handleOnDragEnd(e, true)}\n x={x}\n y={y}\n />\n\n {showPoints &&\n points.map((point, index) => (\n <Circle\n key={index}\n className={classes.circle}\n x={point.x}\n y={point.y}\n radius={5}\n fill={index === 0 && id === 'newPolygon' ? 'blue' : 'white'}\n stroke={HOVERED_COLOR}\n strokeWidth={1}\n onClick={this.handleClick}\n onDragStart={this.onDragStart}\n onDragMove={(e) => {\n this.handleOnDragVertex(e, index);\n }}\n onDragEnd={(e) => {\n this.handleOnDragVertex(e, index, true);\n }}\n draggable\n />\n ))}\n {!this.state.isDragging && this.state.hovered && (\n <DeleteWidget x={x} y={y} id={id} handleWidgetClick={this.handleDelete} points={points} />\n )}\n </Group>\n );\n }\n}\n\nconst styles = () => ({\n base: {\n cursor: 'pointer',\n opacity: 0.5,\n },\n circle: {\n opacity: 4,\n },\n group: {\n padding: '12px',\n },\n});\n\nPolComponent.propTypes = {\n classes: PropTypes.object.isRequired,\n correct: PropTypes.bool,\n isDrawing: PropTypes.bool.isRequired,\n id: PropTypes.string.isRequired,\n imageHeight: PropTypes.number,\n imageWidth: PropTypes.number,\n hotspotColor: PropTypes.string.isRequired,\n selectedHotspotColor: PropTypes.string,\n hoverOutlineColor: PropTypes.string,\n onClick: PropTypes.func.isRequired,\n addPolygonPoint: PropTypes.func.isRequired,\n onDeleteShape: PropTypes.func.isRequired,\n onDragEnd: PropTypes.func.isRequired,\n outlineColor: PropTypes.string.isRequired,\n points: PropTypes.arrayOf(\n PropTypes.shape({\n x: PropTypes.number,\n y: PropTypes.number,\n }),\n ).isRequired,\n strokeWidth: PropTypes.number,\n};\n\nPolComponent.defaultProps = {\n correct: false,\n};\n\nexport default withStyles(styles)(PolComponent);\n"],"file":"hotspot-polygon.js"}

package/configure/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "@pie-element/hotspot-configure",
   "private": true,
-  "version": "6.24.3",
+  "version": "6.24.4",
   "description": "",
   "main": "lib/index.js",
   "module": "src/index.js",

package/configure/src/hotspot-drawable.jsx CHANGED Viewed

@@ -223,6 +223,23 @@ export class Drawable extends React.Component {
     onUpdateShapes(cloneDeep(newShapes));
   };
+  closeInProgressPolygons = (id) => {
+    const { shapes, onUpdateShapes } = this.props;
+    const inProgressPolygon = (shapes || []).find((shape) => shape.id === 'newPolygon');
+    if (id === 'newPolygon' || (inProgressPolygon && this.state.isDrawing)) {
+      PolygonShape.finalizeCreation(this.state, (newShapes) => {
+        this.setState({
+          isDrawing: false,
+          shapes: newShapes,
+          isDrawingShapeId: undefined,
+        });
+        onUpdateShapes(cloneDeep(newShapes));
+      });
+    }
+  }
   handleOnSetAsCorrect = (shape) => {
     const { id } = shape;
     const { multipleCorrect, shapes, onUpdateShapes } = this.props;
@@ -244,6 +261,8 @@ export class Drawable extends React.Component {
     }
     onUpdateShapes(cloneDeep(newShapes));
+    this.closeInProgressPolygons(id);
   };
   /// end of handling HotSpots section

package/configure/src/hotspot-polygon.jsx CHANGED Viewed

@@ -199,14 +199,13 @@ class PolComponent extends React.Component {
     } = this.props;
     const { points, x, y, hovered } = this.state;
+    const isInProgress = id === 'newPolygon';
     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);
+    const calculatedFill = correct ? selectedHotspotColor : hotspotColor;
     return (
       <Group classes={classes.group} onMouseLeave={this.handleMouseLeave} onMouseEnter={this.handleMouseEnter}>
@@ -221,17 +220,16 @@ class PolComponent extends React.Component {
             listening={false}
           />
         )}
         <Line
           classes={classes.base}
           points={this.serialize(points)}
-          closed={true}
-          fill={correct ? selectedHotspotColor : hotspotColor}
+          closed={!isInProgress}
+          fill={isInProgress ? 'transparent' : calculatedFill}
           onClick={this.handleClick}
           onTap={this.handleClick}
           draggable
-          stroke={calculatedStroke}
-          strokeWidth={calculatedStrokeWidth}
+          stroke={isInProgress ? outlineColor : calculatedStroke}
+          strokeWidth={isInProgress ? 1 : calculatedStrokeWidth}
           onDragStart={this.onDragStart}
           onDragMove={this.handleOnDragEnd}
           onDragEnd={(e) => this.handleOnDragEnd(e, true)}
@@ -247,7 +245,7 @@ class PolComponent extends React.Component {
               x={point.x}
               y={point.y}
               radius={5}
-              fill={'white'}
+              fill={index === 0 && id === 'newPolygon' ? 'blue' : 'white'}
               stroke={HOVERED_COLOR}
               strokeWidth={1}
               onClick={this.handleClick}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@pie-element/hotspot",
-  "version": "6.25.4-next.5+01fb04fcc",
+  "version": "6.25.4",
   "description": "",
   "repository": "pie-framework/pie-elements",
   "publishConfig": {
@@ -18,7 +18,7 @@
   },
   "author": "pie framework developers",
   "license": "ISC",
-  "gitHead": "01fb04fcc9e0763ae2279a9378ba837f8be62014",
+  "gitHead": "9999eca8f338bbd69a30bc951efb7b188b5f707c",
   "scripts": {
     "postpublish": "../../scripts/postpublish"
   },