@pie-element/hotspot 5.17.3 → 5.17.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.
- package/CHANGELOG.md +12 -0
- package/configure/CHANGELOG.md +12 -0
- package/configure/lib/hotspot-drawable.js +3 -1
- package/configure/lib/hotspot-drawable.js.map +1 -1
- package/configure/lib/hotspot-polygon.js +40 -1
- package/configure/lib/hotspot-polygon.js.map +1 -1
- package/configure/package.json +1 -1
- package/configure/src/__tests__/__snapshots__/hotspot-drawable.test.js.snap +36 -0
- package/configure/src/hotspot-drawable.jsx +2 -0
- package/configure/src/hotspot-polygon.jsx +35 -0
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,18 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [5.17.4](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot@5.17.3...@pie-element/hotspot@5.17.4) (2023-09-28)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Bug Fixes
|
|
10
|
+
|
|
11
|
+
* **hotpot:** update tests and snapshots ([b078802](https://github.com/pie-framework/pie-elements/commit/b078802157816730d68f3f7b5c05d42f9febc53d))
|
|
12
|
+
* **hotspot:** reset state when image dimensions changed ([15b1ce7](https://github.com/pie-framework/pie-elements/commit/15b1ce7c1900c2e0796462dec2cd2db6292766dd))
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
|
|
6
18
|
## [5.17.3](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot@5.17.2...@pie-element/hotspot@5.17.3) (2023-09-28)
|
|
7
19
|
|
|
8
20
|
**Note:** Version bump only for package @pie-element/hotspot
|
package/configure/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,18 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [5.13.4](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-configure@5.13.3...@pie-element/hotspot-configure@5.13.4) (2023-09-28)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Bug Fixes
|
|
10
|
+
|
|
11
|
+
* **hotpot:** update tests and snapshots ([b078802](https://github.com/pie-framework/pie-elements/commit/b078802157816730d68f3f7b5c05d42f9febc53d))
|
|
12
|
+
* **hotspot:** reset state when image dimensions changed ([15b1ce7](https://github.com/pie-framework/pie-elements/commit/15b1ce7c1900c2e0796462dec2cd2db6292766dd))
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
|
|
6
18
|
## [5.13.3](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-configure@5.13.2...@pie-element/hotspot-configure@5.13.3) (2023-09-28)
|
|
7
19
|
|
|
8
20
|
**Note:** Version bump only for package @pie-element/hotspot-configure
|
|
@@ -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
|
}
|
|
@@ -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"}
|
|
@@ -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
|
|
@@ -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/package.json
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]}
|
|
@@ -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
|
+
"version": "5.17.4",
|
|
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": "
|
|
25
|
+
"gitHead": "d839e501d14709f7ee470999c767082169150b54",
|
|
26
26
|
"scripts": {
|
|
27
27
|
"postpublish": "../../scripts/postpublish"
|
|
28
28
|
},
|