@pie-element/hotspot 5.17.3 → 5.17.4-next.3

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 (8) hide show
  1. package/configure/lib/hotspot-drawable.js +3 -1
  2. package/configure/lib/hotspot-drawable.js.map +1 -1
  3. package/configure/lib/hotspot-polygon.js +40 -1
  4. package/configure/lib/hotspot-polygon.js.map +1 -1
  5. package/configure/src/__tests__/__snapshots__/hotspot-drawable.test.js.snap +36 -0
  6. package/configure/src/hotspot-drawable.jsx +2 -0
  7. package/configure/src/hotspot-polygon.jsx +35 -0
  8. package/package.json +2 -2
package/configure/lib/hotspot-drawable.js CHANGED
@@ -368,7 +368,9 @@ var Drawable = /*#__PURE__*/function (_React$Component) {
368
368
  x: shape.x,
369
369
  y: shape.y,
370
370
  points: shape.points,
371
- strokeWidth: strokeWidth
371
+ strokeWidth: strokeWidth,
372
+ imageHeight: heightFromState || height,
373
+ imageWidth: widthFromState || width
372
374
  });
373
375
  }))));
374
376
  }
package/configure/lib/hotspot-drawable.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/hotspot-drawable.jsx"],"names":["IMAGE_MAX_WIDTH","Drawable","props","e","target","currentTarget","onUpdateShapes","shapes","newShapes","slice","value","map","c","parseInt","id","filter","isNaN","push","height","width","x","evt","layerX","y","layerY","group","index","length","setState","isDrawing","isDrawingShapeId","state","stateShapes","undefined","mouseX","mouseY","currShapeIndex","findIndex","shape","currShape","newWidth","newHeight","newShapesList","updatedProps","multipleCorrect","correct","onUpdateImageDimension","resizeHandle","resize","elementStyle","getComputedStyle","parseFloat","aspectWidth","dimensions","addEventListener","initialiseResize","window","startResizing","stopResizing","bounds","getBoundingClientRect","box","image","disableDrag","preserveAspectRatioEnabled","clientX","left","clientY","top","resizeValid","checkIfResizeValid","hasMinimumWidth","style","resizing","enableDrag","removeEventListener","drawable","forEach","right","bottom","classes","imageUrl","hotspotColor","outlineColor","strokeWidth","heightFromState","widthFromState","shapesToUse","base","imageContainer","handleOnImageLoad","ref","stage","handleOnMouseDown","handleOnMouseUp","handleMouseMove","Tag","Polygon","Rectangle","handleOnSetAsCorrect","handleOnDragEnd","points","nextProps","prevState","React","Component","styles","position","alignItems","display","justifyContent","borderBottom","borderRight","cursor","propTypes","PropTypes","object","isRequired","func","string","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 max from 'lodash/max';\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 { updateImageDimensions, getUpdatedShapes } from './utils';\n\nconst IMAGE_MAX_WIDTH = 800;\n\nexport class Drawable extends React.Component {\n static getDerivedStateFromProps(nextProps, prevState) {\n let dimensions = nextProps.dimensions;\n\n if (prevState && prevState.resizing) {\n dimensions = prevState.dimensions;\n }\n\n return {\n ...prevState,\n dimensions: dimensions,\n };\n }\n\n constructor(props) {\n super(props);\n\n this.state = {\n isDrawing: false,\n stateShapes: false,\n resizing: false,\n dimensions: {\n height: 0,\n width: 0,\n },\n };\n }\n\n /// start of handling HotSpots section\n handleOnMouseDown = (e) => {\n if (e.target === e.currentTarget) {\n const { onUpdateShapes, shapes } = this.props;\n // Add a new rectangle at the mouse position with 0 width and height\n const newShapes = shapes.slice();\n const value = max(newShapes.map((c) => parseInt(c.id)).filter((id) => !isNaN(id))) || 0;\n\n newShapes.push({\n id: `${value + 1}`,\n height: 0,\n width: 0,\n x: e.evt.layerX,\n y: e.evt.layerY,\n group: 'rectangles',\n index: shapes.length,\n });\n\n this.setState({ isDrawing: true, isDrawingShapeId: `${value + 1}` });\n onUpdateShapes(newShapes);\n }\n };\n\n handleOnMouseUp = () => {\n // !IMPORTANT: currently, only 'rectangles' are drawable\n const { isDrawing, stateShapes } = this.state;\n const { onUpdateShapes } = this.props;\n\n // If we're drawing a shape, a click finishes the drawing and sends the new shapes to HOC\n if (isDrawing) {\n this.setState({ isDrawing: !isDrawing, stateShapes: false, isDrawingShapeId: undefined });\n\n if (stateShapes) {\n onUpdateShapes(stateShapes);\n }\n }\n };\n\n handleMouseMove = (e) => {\n // !IMPORTANT: currently, only 'rectangles' are drawable\n const { isDrawing, isDrawingShapeId } = this.state;\n const { shapes } = this.props;\n\n if (isDrawing && isDrawingShapeId) {\n const mouseX = e.evt.layerX;\n const mouseY = e.evt.layerY;\n\n const currShapeIndex = shapes.findIndex((shape) => shape.id === isDrawingShapeId);\n const currShape = shapes[currShapeIndex];\n\n if (currShape) {\n const newWidth = mouseX - currShape.x;\n const newHeight = mouseY - currShape.y;\n\n const newShapesList = shapes.slice();\n\n newShapesList[currShapeIndex] = {\n ...newShapesList[currShapeIndex],\n height: newHeight,\n width: newWidth,\n x: currShape.x,\n y: currShape.y,\n };\n\n // On mouse move don't trigger any event. Put the shapes on this state instead.\n this.setState({ stateShapes: newShapesList });\n }\n }\n };\n\n handleOnDragEnd = (id, updatedProps) => {\n const { shapes, onUpdateShapes } = this.props;\n const newShapes = shapes.map((shape) => {\n if (shape.id === id) {\n return {\n ...shape,\n ...updatedProps,\n };\n }\n return shape;\n });\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 // todo previously we had state.dimensions, is it needed?\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 /// 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 } = this.props;\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 >\n <Layer>\n {shapesToUse.map((shape, index) => {\n const Tag = shape.group === 'polygons' ? Polygon : Rectangle;\n\n return (\n <Tag\n correct={shape.correct}\n isDrawing={isDrawing}\n height={shape.height}\n hotspotColor={hotspotColor}\n id={shape.id}\n key={index}\n onClick={() => this.handleOnSetAsCorrect(shape)}\n onDragEnd={this.handleOnDragEnd}\n outlineColor={outlineColor}\n width={shape.width}\n x={shape.x}\n y={shape.y}\n points={shape.points}\n strokeWidth={strokeWidth}\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 imageUrl: PropTypes.string.isRequired,\n hotspotColor: PropTypes.string.isRequired,\n multipleCorrect: PropTypes.bool.isRequired,\n onUpdateImageDimension: PropTypes.func.isRequired,\n onUpdateShapes: 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","target","currentTarget","onUpdateShapes","shapes","newShapes","slice","value","map","c","parseInt","id","filter","isNaN","push","height","width","x","evt","layerX","y","layerY","group","index","length","setState","isDrawing","isDrawingShapeId","state","stateShapes","undefined","mouseX","mouseY","currShapeIndex","findIndex","shape","currShape","newWidth","newHeight","newShapesList","updatedProps","multipleCorrect","correct","onUpdateImageDimension","resizeHandle","resize","elementStyle","getComputedStyle","parseFloat","aspectWidth","dimensions","addEventListener","initialiseResize","window","startResizing","stopResizing","bounds","getBoundingClientRect","box","image","disableDrag","preserveAspectRatioEnabled","clientX","left","clientY","top","resizeValid","checkIfResizeValid","hasMinimumWidth","style","resizing","enableDrag","removeEventListener","drawable","forEach","right","bottom","classes","imageUrl","hotspotColor","outlineColor","strokeWidth","heightFromState","widthFromState","shapesToUse","base","imageContainer","handleOnImageLoad","ref","stage","handleOnMouseDown","handleOnMouseUp","handleMouseMove","Tag","Polygon","Rectangle","handleOnSetAsCorrect","handleOnDragEnd","points","nextProps","prevState","React","Component","styles","position","alignItems","display","justifyContent","borderBottom","borderRight","cursor","propTypes","PropTypes","object","isRequired","func","string","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 max from 'lodash/max';\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 { updateImageDimensions, getUpdatedShapes } from './utils';\n\nconst IMAGE_MAX_WIDTH = 800;\n\nexport class Drawable extends React.Component {\n static getDerivedStateFromProps(nextProps, prevState) {\n let dimensions = nextProps.dimensions;\n\n if (prevState && prevState.resizing) {\n dimensions = prevState.dimensions;\n }\n\n return {\n ...prevState,\n dimensions: dimensions,\n };\n }\n\n constructor(props) {\n super(props);\n\n this.state = {\n isDrawing: false,\n stateShapes: false,\n resizing: false,\n dimensions: {\n height: 0,\n width: 0,\n },\n };\n }\n\n /// start of handling HotSpots section\n handleOnMouseDown = (e) => {\n if (e.target === e.currentTarget) {\n const { onUpdateShapes, shapes } = this.props;\n // Add a new rectangle at the mouse position with 0 width and height\n const newShapes = shapes.slice();\n const value = max(newShapes.map((c) => parseInt(c.id)).filter((id) => !isNaN(id))) || 0;\n\n newShapes.push({\n id: `${value + 1}`,\n height: 0,\n width: 0,\n x: e.evt.layerX,\n y: e.evt.layerY,\n group: 'rectangles',\n index: shapes.length,\n });\n\n this.setState({ isDrawing: true, isDrawingShapeId: `${value + 1}` });\n onUpdateShapes(newShapes);\n }\n };\n\n handleOnMouseUp = () => {\n // !IMPORTANT: currently, only 'rectangles' are drawable\n const { isDrawing, stateShapes } = this.state;\n const { onUpdateShapes } = this.props;\n\n // If we're drawing a shape, a click finishes the drawing and sends the new shapes to HOC\n if (isDrawing) {\n this.setState({ isDrawing: !isDrawing, stateShapes: false, isDrawingShapeId: undefined });\n\n if (stateShapes) {\n onUpdateShapes(stateShapes);\n }\n }\n };\n\n handleMouseMove = (e) => {\n // !IMPORTANT: currently, only 'rectangles' are drawable\n const { isDrawing, isDrawingShapeId } = this.state;\n const { shapes } = this.props;\n\n if (isDrawing && isDrawingShapeId) {\n const mouseX = e.evt.layerX;\n const mouseY = e.evt.layerY;\n\n const currShapeIndex = shapes.findIndex((shape) => shape.id === isDrawingShapeId);\n const currShape = shapes[currShapeIndex];\n\n if (currShape) {\n const newWidth = mouseX - currShape.x;\n const newHeight = mouseY - currShape.y;\n\n const newShapesList = shapes.slice();\n\n newShapesList[currShapeIndex] = {\n ...newShapesList[currShapeIndex],\n height: newHeight,\n width: newWidth,\n x: currShape.x,\n y: currShape.y,\n };\n\n // On mouse move don't trigger any event. Put the shapes on this state instead.\n this.setState({ stateShapes: newShapesList });\n }\n }\n };\n\n handleOnDragEnd = (id, updatedProps) => {\n const { shapes, onUpdateShapes } = this.props;\n const newShapes = shapes.map((shape) => {\n if (shape.id === id) {\n return {\n ...shape,\n ...updatedProps,\n };\n }\n return shape;\n });\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 // todo previously we had state.dimensions, is it needed?\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 /// 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 } = this.props;\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 >\n <Layer>\n {shapesToUse.map((shape, index) => {\n const Tag = shape.group === 'polygons' ? Polygon : Rectangle;\n\n return (\n <Tag\n correct={shape.correct}\n isDrawing={isDrawing}\n height={shape.height}\n hotspotColor={hotspotColor}\n id={shape.id}\n key={index}\n onClick={() => this.handleOnSetAsCorrect(shape)}\n onDragEnd={this.handleOnDragEnd}\n outlineColor={outlineColor}\n width={shape.width}\n x={shape.x}\n y={shape.y}\n points={shape.points}\n strokeWidth={strokeWidth}\n imageHeight={heightFromState || height}\n imageWidth={widthFromState || width}\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 imageUrl: PropTypes.string.isRequired,\n hotspotColor: PropTypes.string.isRequired,\n multipleCorrect: PropTypes.bool.isRequired,\n onUpdateImageDimension: PropTypes.func.isRequired,\n onUpdateShapes: 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
@@ -248,6 +248,43 @@ var PolComponent = /*#__PURE__*/function (_React$Component) {
248
248
  });
249
249
  }));
250
250
  }
251
+ }], [{
252
+ key: "getDerivedStateFromProps",
253
+ value: function getDerivedStateFromProps(nextProps, prevState) {
254
+ var points = nextProps.points,
255
+ imageHeight = nextProps.imageHeight,
256
+ imageWidth = nextProps.imageWidth; // we execute this code only if image dimensions changed
257
+
258
+ if (prevState.imageHeight !== nextProps.imageHeight || prevState.imageWidth !== nextProps.imageWidth) {
259
+ if (points.length) {
260
+ var xList = points.map(function (p) {
261
+ return p.x;
262
+ });
263
+ var yList = points.map(function (p) {
264
+ return p.y;
265
+ });
266
+ var x = Math.min.apply(Math, (0, _toConsumableArray2["default"])(xList));
267
+ var y = Math.max.apply(Math, (0, _toConsumableArray2["default"])(yList));
268
+ return {
269
+ x: x,
270
+ y: y,
271
+ points: points,
272
+ imageHeight: imageHeight,
273
+ imageWidth: imageWidth
274
+ };
275
+ }
276
+
277
+ return {
278
+ x: 0,
279
+ y: 0,
280
+ points: [],
281
+ imageHeight: imageHeight,
282
+ imageWidth: imageWidth
283
+ };
284
+ } else {
285
+ return null;
286
+ }
287
+ }
251
288
  }]);
252
289
  return PolComponent;
253
290
  }(_react["default"].Component);
@@ -280,7 +317,9 @@ PolComponent.propTypes = {
280
317
  x: _propTypes["default"].number,
281
318
  y: _propTypes["default"].number
282
319
  })).isRequired,
283
- strokeWidth: _propTypes["default"].number
320
+ strokeWidth: _propTypes["default"].number,
321
+ imageHeight: _propTypes["default"].number,
322
+ imageWidth: _propTypes["default"].number
284
323
  };
285
324
  PolComponent.defaultProps = {
286
325
  correct: false
package/configure/lib/hotspot-polygon.js.map CHANGED
@@ -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","hovered","getInitialState","props","e","width","height","isDrawing","onClick","id","cancelBubble","setState","document","body","style","cursor","updateModel","onDragEnd","target","serialize","state","newPoints","currentPointCoordinate","index","changedIndex","classes","correct","hotspotColor","outlineColor","strokeWidth","calculatedStrokeWidth","calculatedStroke","group","handleMouseLeave","handleMouseEnter","base","handleClick","handleOnDragEnd","circle","handleOnDragVertex","React","Component","styles","opacity","padding","propTypes","PropTypes","object","isRequired","bool","string","func","arrayOf","shape","number","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';\n\nconst HOVERED_COLOR = '#00BFFF';\n\nclass PolComponent extends React.Component {\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 x: 0,\n y: 0,\n points: [],\n };\n };\n\n state = {\n hovered: 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 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({ points: newPoints, ...this.getOffset(newPoints) });\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({ points: newPoints, ...this.getOffset(newPoints) });\n\n if (updateModel) {\n onDragEnd(id, { points: newPoints });\n }\n };\n\n render() {\n const { classes, correct, hotspotColor, outlineColor, strokeWidth = 5 } = this.props;\n const { points, x, y, hovered } = this.state;\n\n const calculatedStrokeWidth = correct ? strokeWidth : hovered ? 1 : 0;\n const calculatedStroke = correct ? outlineColor : hovered ? HOVERED_COLOR : '';\n\n return (\n <Group classes={classes.group} onMouseLeave={this.handleMouseLeave} onMouseEnter={this.handleMouseEnter}>\n <Line\n classes={classes.base}\n points={this.serialize(points)}\n closed={true}\n fill={hotspotColor}\n onClick={this.handleClick}\n onTap={this.handleClick}\n draggable\n stroke={calculatedStroke}\n strokeWidth={calculatedStrokeWidth}\n onDragMove={this.handleOnDragEnd}\n onDragEnd={(e) => this.handleOnDragEnd(e, true)}\n x={x}\n y={y}\n />\n\n {hovered &&\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 draggable\n onDragMove={(e) => {\n this.handleOnDragVertex(e, index);\n }}\n onDragEnd={(e) => {\n this.handleOnDragVertex(e, index, true);\n }}\n />\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 hotspotColor: PropTypes.string.isRequired,\n onClick: 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","hovered","getInitialState","props","e","width","height","isDrawing","onClick","id","cancelBubble","setState","document","body","style","cursor","updateModel","onDragEnd","target","serialize","state","newPoints","currentPointCoordinate","index","changedIndex","classes","correct","hotspotColor","outlineColor","strokeWidth","calculatedStrokeWidth","calculatedStroke","group","handleMouseLeave","handleMouseEnter","base","handleClick","handleOnDragEnd","circle","handleOnDragVertex","nextProps","prevState","imageHeight","imageWidth","React","Component","styles","opacity","padding","propTypes","PropTypes","object","isRequired","bool","string","func","arrayOf","shape","number","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';\n\nconst HOVERED_COLOR = '#00BFFF';\n\nclass PolComponent extends React.Component {\n static getDerivedStateFromProps(nextProps, prevState) {\n const { points, imageHeight, imageWidth } = nextProps;\n\n // we execute this code only if image dimensions changed\n if (prevState.imageHeight !== nextProps.imageHeight || prevState.imageWidth !== nextProps.imageWidth) {\n if (points.length) {\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 x,\n y,\n points,\n imageHeight,\n imageWidth,\n };\n }\n\n return {\n x: 0,\n y: 0,\n points: [],\n imageHeight,\n imageWidth,\n };\n } else {\n return null;\n }\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 x: 0,\n y: 0,\n points: [],\n };\n };\n\n state = {\n hovered: 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 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({ points: newPoints, ...this.getOffset(newPoints) });\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({ points: newPoints, ...this.getOffset(newPoints) });\n\n if (updateModel) {\n onDragEnd(id, { points: newPoints });\n }\n };\n\n render() {\n const { classes, correct, hotspotColor, outlineColor, strokeWidth = 5 } = this.props;\n const { points, x, y, hovered } = this.state;\n\n const calculatedStrokeWidth = correct ? strokeWidth : hovered ? 1 : 0;\n const calculatedStroke = correct ? outlineColor : hovered ? HOVERED_COLOR : '';\n\n return (\n <Group classes={classes.group} onMouseLeave={this.handleMouseLeave} onMouseEnter={this.handleMouseEnter}>\n <Line\n classes={classes.base}\n points={this.serialize(points)}\n closed={true}\n fill={hotspotColor}\n onClick={this.handleClick}\n onTap={this.handleClick}\n draggable\n stroke={calculatedStroke}\n strokeWidth={calculatedStrokeWidth}\n onDragMove={this.handleOnDragEnd}\n onDragEnd={(e) => this.handleOnDragEnd(e, true)}\n x={x}\n y={y}\n />\n\n {hovered &&\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 draggable\n onDragMove={(e) => {\n this.handleOnDragVertex(e, index);\n }}\n onDragEnd={(e) => {\n this.handleOnDragVertex(e, index, true);\n }}\n />\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 hotspotColor: PropTypes.string.isRequired,\n onClick: 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 imageHeight: PropTypes.number,\n imageWidth: PropTypes.number,\n};\n\nPolComponent.defaultProps = {\n correct: false,\n};\n\nexport default withStyles(styles)(PolComponent);\n"],"file":"hotspot-polygon.js"}
package/configure/src/__tests__/__snapshots__/hotspot-drawable.test.js.snap CHANGED
@@ -28,6 +28,8 @@ exports[`HotspotDrawable render renders 1`] = `
28
28
  height={140}
29
29
  hotspotColor="rgba(137, 183, 244, 0.65)"
30
30
  id="0"
31
+ imageHeight={291}
32
+ imageWidth={410}
31
33
  isDrawing={false}
32
34
  key="0"
33
35
  onClick={[Function]}
@@ -42,6 +44,8 @@ exports[`HotspotDrawable render renders 1`] = `
42
44
  height={140}
43
45
  hotspotColor="rgba(137, 183, 244, 0.65)"
44
46
  id="1"
47
+ imageHeight={291}
48
+ imageWidth={410}
45
49
  isDrawing={false}
46
50
  key="1"
47
51
  onClick={[Function]}
@@ -56,6 +60,8 @@ exports[`HotspotDrawable render renders 1`] = `
56
60
  height={140}
57
61
  hotspotColor="rgba(137, 183, 244, 0.65)"
58
62
  id="2"
63
+ imageHeight={291}
64
+ imageWidth={410}
59
65
  isDrawing={false}
60
66
  key="2"
61
67
  onClick={[Function]}
@@ -70,6 +76,8 @@ exports[`HotspotDrawable render renders 1`] = `
70
76
  correct={true}
71
77
  hotspotColor="rgba(137, 183, 244, 0.65)"
72
78
  id="3"
79
+ imageHeight={291}
80
+ imageWidth={410}
73
81
  isDrawing={false}
74
82
  key="3"
75
83
  onClick={[Function]}
@@ -101,6 +109,8 @@ exports[`HotspotDrawable render renders 1`] = `
101
109
  correct={false}
102
110
  hotspotColor="rgba(137, 183, 244, 0.65)"
103
111
  id="4"
112
+ imageHeight={291}
113
+ imageWidth={410}
104
114
  isDrawing={false}
105
115
  key="4"
106
116
  onClick={[Function]}
@@ -132,6 +142,8 @@ exports[`HotspotDrawable render renders 1`] = `
132
142
  correct={false}
133
143
  hotspotColor="rgba(137, 183, 244, 0.65)"
134
144
  id="5"
145
+ imageHeight={291}
146
+ imageWidth={410}
135
147
  isDrawing={false}
136
148
  key="5"
137
149
  onClick={[Function]}
@@ -192,6 +204,8 @@ exports[`HotspotDrawable render renders with default strokeWidth 1`] = `
192
204
  height={140}
193
205
  hotspotColor="rgba(137, 183, 244, 0.65)"
194
206
  id="0"
207
+ imageHeight={291}
208
+ imageWidth={410}
195
209
  isDrawing={false}
196
210
  key="0"
197
211
  onClick={[Function]}
@@ -206,6 +220,8 @@ exports[`HotspotDrawable render renders with default strokeWidth 1`] = `
206
220
  height={140}
207
221
  hotspotColor="rgba(137, 183, 244, 0.65)"
208
222
  id="1"
223
+ imageHeight={291}
224
+ imageWidth={410}
209
225
  isDrawing={false}
210
226
  key="1"
211
227
  onClick={[Function]}
@@ -220,6 +236,8 @@ exports[`HotspotDrawable render renders with default strokeWidth 1`] = `
220
236
  height={140}
221
237
  hotspotColor="rgba(137, 183, 244, 0.65)"
222
238
  id="2"
239
+ imageHeight={291}
240
+ imageWidth={410}
223
241
  isDrawing={false}
224
242
  key="2"
225
243
  onClick={[Function]}
@@ -234,6 +252,8 @@ exports[`HotspotDrawable render renders with default strokeWidth 1`] = `
234
252
  correct={true}
235
253
  hotspotColor="rgba(137, 183, 244, 0.65)"
236
254
  id="3"
255
+ imageHeight={291}
256
+ imageWidth={410}
237
257
  isDrawing={false}
238
258
  key="3"
239
259
  onClick={[Function]}
@@ -265,6 +285,8 @@ exports[`HotspotDrawable render renders with default strokeWidth 1`] = `
265
285
  correct={false}
266
286
  hotspotColor="rgba(137, 183, 244, 0.65)"
267
287
  id="4"
288
+ imageHeight={291}
289
+ imageWidth={410}
268
290
  isDrawing={false}
269
291
  key="4"
270
292
  onClick={[Function]}
@@ -296,6 +318,8 @@ exports[`HotspotDrawable render renders with default strokeWidth 1`] = `
296
318
  correct={false}
297
319
  hotspotColor="rgba(137, 183, 244, 0.65)"
298
320
  id="5"
321
+ imageHeight={291}
322
+ imageWidth={410}
299
323
  isDrawing={false}
300
324
  key="5"
301
325
  onClick={[Function]}
@@ -356,6 +380,8 @@ exports[`HotspotDrawable render renders with given strokeWidth 1`] = `
356
380
  height={140}
357
381
  hotspotColor="rgba(137, 183, 244, 0.65)"
358
382
  id="0"
383
+ imageHeight={291}
384
+ imageWidth={410}
359
385
  isDrawing={false}
360
386
  key="0"
361
387
  onClick={[Function]}
@@ -370,6 +396,8 @@ exports[`HotspotDrawable render renders with given strokeWidth 1`] = `
370
396
  height={140}
371
397
  hotspotColor="rgba(137, 183, 244, 0.65)"
372
398
  id="1"
399
+ imageHeight={291}
400
+ imageWidth={410}
373
401
  isDrawing={false}
374
402
  key="1"
375
403
  onClick={[Function]}
@@ -384,6 +412,8 @@ exports[`HotspotDrawable render renders with given strokeWidth 1`] = `
384
412
  height={140}
385
413
  hotspotColor="rgba(137, 183, 244, 0.65)"
386
414
  id="2"
415
+ imageHeight={291}
416
+ imageWidth={410}
387
417
  isDrawing={false}
388
418
  key="2"
389
419
  onClick={[Function]}
@@ -398,6 +428,8 @@ exports[`HotspotDrawable render renders with given strokeWidth 1`] = `
398
428
  correct={true}
399
429
  hotspotColor="rgba(137, 183, 244, 0.65)"
400
430
  id="3"
431
+ imageHeight={291}
432
+ imageWidth={410}
401
433
  isDrawing={false}
402
434
  key="3"
403
435
  onClick={[Function]}
@@ -429,6 +461,8 @@ exports[`HotspotDrawable render renders with given strokeWidth 1`] = `
429
461
  correct={false}
430
462
  hotspotColor="rgba(137, 183, 244, 0.65)"
431
463
  id="4"
464
+ imageHeight={291}
465
+ imageWidth={410}
432
466
  isDrawing={false}
433
467
  key="4"
434
468
  onClick={[Function]}
@@ -460,6 +494,8 @@ exports[`HotspotDrawable render renders with given strokeWidth 1`] = `
460
494
  correct={false}
461
495
  hotspotColor="rgba(137, 183, 244, 0.65)"
462
496
  id="5"
497
+ imageHeight={291}
498
+ imageWidth={410}
463
499
  isDrawing={false}
464
500
  key="5"
465
501
  onClick={[Function]}
package/configure/src/hotspot-drawable.jsx CHANGED
@@ -312,6 +312,8 @@ export class Drawable extends React.Component {
312
312
  y={shape.y}
313
313
  points={shape.points}
314
314
  strokeWidth={strokeWidth}
315
+ imageHeight={heightFromState || height}
316
+ imageWidth={widthFromState || width}
315
317
  />
316
318
  );
317
319
  })}
package/configure/src/hotspot-polygon.jsx CHANGED
@@ -6,6 +6,39 @@ import { withStyles } from '@material-ui/core/styles/index';
6
6
  const HOVERED_COLOR = '#00BFFF';
7
7
 
8
8
  class PolComponent extends React.Component {
9
+ static getDerivedStateFromProps(nextProps, prevState) {
10
+ const { points, imageHeight, imageWidth } = nextProps;
11
+
12
+ // we execute this code only if image dimensions changed
13
+ if (prevState.imageHeight !== nextProps.imageHeight || prevState.imageWidth !== nextProps.imageWidth) {
14
+ if (points.length) {
15
+ const xList = points.map((p) => p.x);
16
+ const yList = points.map((p) => p.y);
17
+
18
+ const x = Math.min(...xList);
19
+ const y = Math.max(...yList);
20
+
21
+ return {
22
+ x,
23
+ y,
24
+ points,
25
+ imageHeight,
26
+ imageWidth,
27
+ };
28
+ }
29
+
30
+ return {
31
+ x: 0,
32
+ y: 0,
33
+ points: [],
34
+ imageHeight,
35
+ imageWidth,
36
+ };
37
+ } else {
38
+ return null;
39
+ }
40
+ }
41
+
9
42
  getOffset = (points) => {
10
43
  const xList = points.map((p) => p.x);
11
44
  const yList = points.map((p) => p.y);
@@ -192,6 +225,8 @@ PolComponent.propTypes = {
192
225
  }),
193
226
  ).isRequired,
194
227
  strokeWidth: PropTypes.number,
228
+ imageHeight: PropTypes.number,
229
+ imageWidth: PropTypes.number,
195
230
  };
196
231
 
197
232
  PolComponent.defaultProps = {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pie-element/hotspot",
3
- "version": "5.17.3",
3
+ "version": "5.17.4-next.3+13197511a",
4
4
  "description": "",
5
5
  "repository": "pie-framework/pie-elements",
6
6
  "publishConfig": {
@@ -22,7 +22,7 @@
22
22
  },
23
23
  "author": "pie framework developers",
24
24
  "license": "ISC",
25
- "gitHead": "6d8d3dab715de36ca46c00ac6304e47ea403ca48",
25
+ "gitHead": "13197511a193db6b519e2a00129e0344690330ae",
26
26
  "scripts": {
27
27
  "postpublish": "../../scripts/postpublish"
28
28
  },