@pie-element/hotspot 11.1.1-next.92 → 11.1.1-next.99

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 (12) hide show
  1. package/lib/hotspot/circle.js +12 -11
  2. package/lib/hotspot/circle.js.map +1 -1
  3. package/lib/hotspot/polygon.js +12 -11
  4. package/lib/hotspot/polygon.js.map +1 -1
  5. package/lib/hotspot/rectangle.js +12 -12
  6. package/lib/hotspot/rectangle.js.map +1 -1
  7. package/package.json +2 -2
  8. package/src/hotspot/__tests__/circle.test.jsx +42 -42
  9. package/src/hotspot/__tests__/rectangle.test.jsx +37 -37
  10. package/src/hotspot/circle.jsx +12 -13
  11. package/src/hotspot/polygon.jsx +15 -16
  12. package/src/hotspot/rectangle.jsx +12 -14
package/lib/hotspot/circle.js CHANGED
@@ -99,15 +99,10 @@ class CircleComponent extends _react.default.Component {
99
99
  const useHoveredStyle = (hovered || focused) && hoverOutlineColor;
100
100
  return /*#__PURE__*/_react.default.createElement(_reactKonva.Group, {
101
101
  scaleX: scale,
102
- scaleY: scale
103
- }, useHoveredStyle && /*#__PURE__*/_react.default.createElement(_reactKonva.Rect, {
104
- x: x - radius,
105
- y: y - radius,
106
- width: radius * 2,
107
- height: radius * 2,
108
- stroke: selected ? 'transparent' : hoverOutlineColor,
109
- strokeWidth: strokeWidth
110
- }), /*#__PURE__*/_react.default.createElement(_reactKonva.Circle, {
102
+ scaleY: scale,
103
+ onMouseLeave: this.handleMouseLeave,
104
+ onMouseEnter: this.handleMouseEnter
105
+ }, /*#__PURE__*/_react.default.createElement(_reactKonva.Circle, {
111
106
  radius: radius,
112
107
  fill: selected && selectedHotspotColor ? selectedHotspotColor : hotspotColor,
113
108
  onClick: this.handleClick,
@@ -115,10 +110,16 @@ class CircleComponent extends _react.default.Component {
115
110
  draggable: false,
116
111
  stroke: useHoveredStyle && !selected ? 'transparent' : outlineColorParsed,
117
112
  strokeWidth: useHoveredStyle && !selected ? 0 : outlineWidth,
118
- onMouseLeave: this.handleMouseLeave,
119
- onMouseEnter: this.handleMouseEnter,
120
113
  x: x,
121
114
  y: y
115
+ }), useHoveredStyle && /*#__PURE__*/_react.default.createElement(_reactKonva.Rect, {
116
+ x: x - radius,
117
+ y: y - radius,
118
+ width: radius * 2,
119
+ height: radius * 2,
120
+ stroke: hoverOutlineColor,
121
+ strokeWidth: strokeWidth,
122
+ listening: false
122
123
  }), isEvaluateMode && iconSrc ? /*#__PURE__*/_react.default.createElement(_imageKonvaTooltip.default, {
123
124
  src: iconSrc,
124
125
  x: iconX,
package/lib/hotspot/circle.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"circle.js","names":["_react","_interopRequireDefault","require","_propTypes","_reactKonva","_imageKonvaTooltip","_icons","CircleComponent","React","Component","constructor","props","_defineProperty2","default","e","onClick","id","selected","disabled","cancelBubble","selector","document","body","style","cursor","setState","hovered","isCorrect","markAsCorrect","outlineColor","showCorrectEnabled","strokeWidth","state","render","radius","hotspotColor","isEvaluateMode","hoverOutlineColor","focused","x","y","evaluateText","scale","selectedHotspotColor","outlineColorParsed","getEvaluateOutlineColor","outlineWidth","getOutlineWidth","iconX","iconY","iconSrc","faCorrect","faWrong","useHoveredStyle","createElement","Group","scaleX","scaleY","Rect","width","height","stroke","Circle","fill","handleClick","onTap","draggable","onMouseLeave","handleMouseLeave","onMouseEnter","handleMouseEnter","src","tooltip","propTypes","PropTypes","number","isRequired","string","oneOfType","bool","func","defaultProps","_default","exports"],"sources":["../../src/hotspot/circle.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Circle, Group, Rect } from 'react-konva';\nimport ImageComponent from './image-konva-tooltip';\nimport { faCorrect, faWrong } from './icons';\n\nclass CircleComponent extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n hovered: false,\n };\n }\n\n handleClick = (e) => {\n const { onClick, id, selected, disabled } = this.props;\n\n if (!disabled) {\n e.cancelBubble = true;\n onClick({ id, selected: !selected, selector: 'Mouse' });\n }\n };\n\n handleMouseEnter = () => {\n const { disabled } = this.props;\n\n if (!disabled) {\n document.body.style.cursor = 'pointer';\n }\n this.setState({ hovered: true });\n };\n\n handleMouseLeave = () => {\n document.body.style.cursor = 'default';\n this.setState({ hovered: false });\n };\n\n getEvaluateOutlineColor = (isCorrect, markAsCorrect, outlineColor) =>\n markAsCorrect ? 'green' : isCorrect ? outlineColor : 'red';\n\n getOutlineWidth = (showCorrectEnabled, selected, markAsCorrect, strokeWidth) =>\n markAsCorrect || (!markAsCorrect && !showCorrectEnabled && selected) ? strokeWidth : 0;\n\n render() {\n const {\n radius,\n hotspotColor,\n isCorrect,\n isEvaluateMode,\n hoverOutlineColor,\n outlineColor,\n selected,\n focused,\n x,\n y,\n evaluateText,\n strokeWidth,\n scale,\n markAsCorrect,\n selectedHotspotColor,\n showCorrectEnabled,\n } = this.props;\n\n const { hovered } = this.state;\n\n const outlineColorParsed = isEvaluateMode\n ? this.getEvaluateOutlineColor(isCorrect, markAsCorrect, outlineColor)\n : outlineColor;\n\n const outlineWidth = this.getOutlineWidth(showCorrectEnabled, selected, markAsCorrect, strokeWidth);\n\n const iconX = x - 10;\n const iconY = y - 10; // Adjust position for the icon\n\n let iconSrc;\n if (showCorrectEnabled) {\n if ((selected && isCorrect) || (!selected && !isCorrect)) {\n iconSrc = faCorrect;\n }\n } else {\n if (selected) {\n if (isCorrect) {\n iconSrc = faCorrect;\n } else {\n iconSrc = faWrong;\n }\n } else if (!isCorrect) {\n iconSrc = faWrong;\n }\n }\n\n const useHoveredStyle = (hovered || focused) && hoverOutlineColor;\n\n return (\n <Group scaleX={scale} scaleY={scale}>\n {useHoveredStyle && (\n <Rect\n x={x - radius}\n y={y - radius}\n width={radius * 2}\n height={radius * 2}\n stroke={selected ? 'transparent' : hoverOutlineColor}\n strokeWidth={strokeWidth}\n />\n )}\n <Circle\n radius={radius}\n fill={selected && selectedHotspotColor ? selectedHotspotColor : hotspotColor}\n onClick={this.handleClick}\n onTap={this.handleClick}\n draggable={false}\n stroke={useHoveredStyle && !selected ? 'transparent' : outlineColorParsed}\n strokeWidth={useHoveredStyle && !selected ? 0 : outlineWidth}\n onMouseLeave={this.handleMouseLeave}\n onMouseEnter={this.handleMouseEnter}\n x={x}\n y={y}\n />\n {isEvaluateMode && iconSrc ? <ImageComponent src={iconSrc} x={iconX} y={iconY} tooltip={evaluateText} /> : null}\n </Group>\n );\n }\n}\n\nCircleComponent.propTypes = {\n radius: PropTypes.number.isRequired,\n hotspotColor: PropTypes.string.isRequired,\n id: PropTypes.string.isRequired,\n isCorrect: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),\n isEvaluateMode: PropTypes.bool.isRequired,\n disabled: PropTypes.bool.isRequired,\n focused: PropTypes.bool,\n hoverOutlineColor: PropTypes.string,\n onClick: PropTypes.func.isRequired,\n outlineColor: PropTypes.string.isRequired,\n selected: PropTypes.bool.isRequired,\n x: PropTypes.number.isRequired,\n y: PropTypes.number.isRequired,\n evaluateText: PropTypes.string,\n strokeWidth: PropTypes.number,\n scale: PropTypes.number,\n selectedHotspotColor: PropTypes.string,\n markAsCorrect: PropTypes.bool.isRequired,\n showCorrectEnabled: PropTypes.bool.isRequired,\n};\n\nCircleComponent.defaultProps = {\n isCorrect: false,\n evaluateText: null,\n focused: false,\n strokeWidth: 5,\n scale: 1,\n};\n\nexport default CircleComponent;\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"circle.js","names":["_react","_interopRequireDefault","require","_propTypes","_reactKonva","_imageKonvaTooltip","_icons","CircleComponent","React","Component","constructor","props","_defineProperty2","default","e","onClick","id","selected","disabled","cancelBubble","selector","document","body","style","cursor","setState","hovered","isCorrect","markAsCorrect","outlineColor","showCorrectEnabled","strokeWidth","state","render","radius","hotspotColor","isEvaluateMode","hoverOutlineColor","focused","x","y","evaluateText","scale","selectedHotspotColor","outlineColorParsed","getEvaluateOutlineColor","outlineWidth","getOutlineWidth","iconX","iconY","iconSrc","faCorrect","faWrong","useHoveredStyle","createElement","Group","scaleX","scaleY","onMouseLeave","handleMouseLeave","onMouseEnter","handleMouseEnter","Circle","fill","handleClick","onTap","draggable","stroke","Rect","width","height","listening","src","tooltip","propTypes","PropTypes","number","isRequired","string","oneOfType","bool","func","defaultProps","_default","exports"],"sources":["../../src/hotspot/circle.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Circle, Group, Rect } from 'react-konva';\nimport ImageComponent from './image-konva-tooltip';\nimport { faCorrect, faWrong } from './icons';\n\nclass CircleComponent extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n hovered: false,\n };\n }\n\n handleClick = (e) => {\n const { onClick, id, selected, disabled } = this.props;\n\n if (!disabled) {\n e.cancelBubble = true;\n onClick({ id, selected: !selected, selector: 'Mouse' });\n }\n };\n\n handleMouseEnter = () => {\n const { disabled } = this.props;\n\n if (!disabled) {\n document.body.style.cursor = 'pointer';\n }\n this.setState({ hovered: true });\n };\n\n handleMouseLeave = () => {\n document.body.style.cursor = 'default';\n this.setState({ hovered: false });\n };\n\n getEvaluateOutlineColor = (isCorrect, markAsCorrect, outlineColor) =>\n markAsCorrect ? 'green' : isCorrect ? outlineColor : 'red';\n\n getOutlineWidth = (showCorrectEnabled, selected, markAsCorrect, strokeWidth) =>\n markAsCorrect || (!markAsCorrect && !showCorrectEnabled && selected) ? strokeWidth : 0;\n\n render() {\n const {\n radius,\n hotspotColor,\n isCorrect,\n isEvaluateMode,\n hoverOutlineColor,\n outlineColor,\n selected,\n focused,\n x,\n y,\n evaluateText,\n strokeWidth,\n scale,\n markAsCorrect,\n selectedHotspotColor,\n showCorrectEnabled,\n } = this.props;\n\n const { hovered } = this.state;\n\n const outlineColorParsed = isEvaluateMode\n ? this.getEvaluateOutlineColor(isCorrect, markAsCorrect, outlineColor)\n : outlineColor;\n\n const outlineWidth = this.getOutlineWidth(showCorrectEnabled, selected, markAsCorrect, strokeWidth);\n\n const iconX = x - 10;\n const iconY = y - 10; // Adjust position for the icon\n\n let iconSrc;\n if (showCorrectEnabled) {\n if ((selected && isCorrect) || (!selected && !isCorrect)) {\n iconSrc = faCorrect;\n }\n } else {\n if (selected) {\n if (isCorrect) {\n iconSrc = faCorrect;\n } else {\n iconSrc = faWrong;\n }\n } else if (!isCorrect) {\n iconSrc = faWrong;\n }\n }\n\n const useHoveredStyle = (hovered || focused) && hoverOutlineColor;\n\n return (\n <Group scaleX={scale} scaleY={scale} onMouseLeave={this.handleMouseLeave} onMouseEnter={this.handleMouseEnter}>\n <Circle\n radius={radius}\n fill={selected && selectedHotspotColor ? selectedHotspotColor : hotspotColor}\n onClick={this.handleClick}\n onTap={this.handleClick}\n draggable={false}\n stroke={useHoveredStyle && !selected ? 'transparent' : outlineColorParsed}\n strokeWidth={useHoveredStyle && !selected ? 0 : outlineWidth}\n x={x}\n y={y}\n />\n {useHoveredStyle && (\n <Rect\n x={x - radius}\n y={y - radius}\n width={radius * 2}\n height={radius * 2}\n stroke={hoverOutlineColor}\n strokeWidth={strokeWidth}\n listening={false}\n />\n )}\n {isEvaluateMode && iconSrc ? <ImageComponent src={iconSrc} x={iconX} y={iconY} tooltip={evaluateText} /> : null}\n </Group>\n );\n }\n}\n\nCircleComponent.propTypes = {\n radius: PropTypes.number.isRequired,\n hotspotColor: PropTypes.string.isRequired,\n id: PropTypes.string.isRequired,\n isCorrect: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),\n isEvaluateMode: PropTypes.bool.isRequired,\n disabled: PropTypes.bool.isRequired,\n focused: PropTypes.bool,\n hoverOutlineColor: PropTypes.string,\n onClick: PropTypes.func.isRequired,\n outlineColor: PropTypes.string.isRequired,\n selected: PropTypes.bool.isRequired,\n x: PropTypes.number.isRequired,\n y: PropTypes.number.isRequired,\n evaluateText: PropTypes.string,\n strokeWidth: PropTypes.number,\n scale: PropTypes.number,\n selectedHotspotColor: PropTypes.string,\n markAsCorrect: PropTypes.bool.isRequired,\n showCorrectEnabled: PropTypes.bool.isRequired,\n};\n\nCircleComponent.defaultProps = {\n isCorrect: false,\n evaluateText: null,\n focused: false,\n strokeWidth: 5,\n scale: 1,\n};\n\nexport default CircleComponent;\n"],"mappings":"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","ignoreList":[]}
package/lib/hotspot/polygon.js CHANGED
@@ -148,15 +148,10 @@ class PolygonComponent extends _react.default.Component {
148
148
  const rectHeight = maxY - minY;
149
149
  return /*#__PURE__*/_react.default.createElement(_reactKonva.Group, {
150
150
  scaleX: scale,
151
- scaleY: scale
152
- }, useHoveredStyle && /*#__PURE__*/_react.default.createElement(_reactKonva.Rect, {
153
- x: rectX,
154
- y: rectY,
155
- width: rectWidth,
156
- height: rectHeight,
157
- stroke: selected ? 'transparent' : hoverOutlineColor,
158
- strokeWidth: strokeWidth
159
- }), /*#__PURE__*/_react.default.createElement(_reactKonva.Line, {
151
+ scaleY: scale,
152
+ onMouseEnter: this.handleMouseEnter,
153
+ onMouseLeave: this.handleMouseLeave
154
+ }, /*#__PURE__*/_react.default.createElement(_reactKonva.Line, {
160
155
  points: pointsParsed,
161
156
  closed: true,
162
157
  fill: selected && selectedHotspotColor ? selectedHotspotColor : hotspotColor,
@@ -165,10 +160,16 @@ class PolygonComponent extends _react.default.Component {
165
160
  draggable: false,
166
161
  stroke: useHoveredStyle && !selected ? 'transparent' : outlineColorParsed,
167
162
  strokeWidth: useHoveredStyle && !selected ? 0 : outlineWidth,
168
- onMouseLeave: this.handleMouseLeave,
169
- onMouseEnter: this.handleMouseEnter,
170
163
  cursor: "pointer",
171
164
  position: "relative"
165
+ }), useHoveredStyle && /*#__PURE__*/_react.default.createElement(_reactKonva.Rect, {
166
+ x: rectX,
167
+ y: rectY,
168
+ width: rectWidth,
169
+ height: rectHeight,
170
+ stroke: hoverOutlineColor,
171
+ strokeWidth: strokeWidth,
172
+ listening: false
172
173
  }), isEvaluateMode && iconSrc ? /*#__PURE__*/_react.default.createElement(_imageKonvaTooltip.default, {
173
174
  src: iconSrc,
174
175
  x: iconX,
package/lib/hotspot/polygon.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"polygon.js","names":["_react","_interopRequireDefault","require","_propTypes","_reactKonva","_imageKonvaTooltip","_icons","PolygonComponent","React","Component","constructor","props","_defineProperty2","default","points","x","map","y","minX","Math","min","apply","maxX","max","minY","maxY","parsedPoints","forEach","push","e","onClick","id","selected","disabled","cancelBubble","selector","document","body","style","cursor","setState","hovered","isCorrect","markAsCorrect","outlineColor","showCorrectEnabled","strokeWidth","state","render","hotspotColor","isEvaluateMode","hoverOutlineColor","focused","evaluateText","scale","selectedHotspotColor","outlineColorParsed","getEvaluateOutlineColor","outlineWidth","getOutlineWidth","pointsParsed","parsePointsForKonva","center","getPolygonCenter","iconX","iconY","iconSrc","faCorrect","faWrong","useHoveredStyle","xValues","filter","_","index","yValues","rectX","rectY","rectWidth","rectHeight","createElement","Group","scaleX","scaleY","Rect","width","height","stroke","Line","closed","fill","handleClick","onTap","draggable","onMouseLeave","handleMouseLeave","onMouseEnter","handleMouseEnter","position","src","tooltip","propTypes","PropTypes","string","isRequired","bool","func","array","number","defaultProps","_default","exports"],"sources":["../../src/hotspot/polygon.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Line, Group, Rect } from 'react-konva';\nimport ImageComponent from './image-konva-tooltip';\nimport { faCorrect, faWrong } from './icons';\n\nclass PolygonComponent extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n hovered: false,\n };\n }\n\n getPolygonCenter = (points) => {\n const x = points.map(({ x }) => x);\n const y = points.map(({ y }) => y);\n const minX = Math.min.apply(null, x);\n const maxX = Math.max.apply(null, x);\n const minY = Math.min.apply(null, y);\n const maxY = Math.max.apply(null, y);\n return [(minX + maxX) / 2, (minY + maxY) / 2];\n };\n\n parsePointsForKonva = (points) => {\n const parsedPoints = [];\n points.forEach(({ x, y }) => {\n parsedPoints.push(x);\n parsedPoints.push(y);\n });\n return parsedPoints;\n };\n\n handleClick = (e) => {\n const { onClick, id, selected, disabled } = this.props;\n\n if (!disabled) {\n e.cancelBubble = true;\n onClick({ id, selected: !selected, selector: 'Mouse' });\n }\n };\n\n handleMouseEnter = () => {\n const { disabled } = this.props;\n\n if (!disabled) {\n document.body.style.cursor = 'pointer';\n }\n this.setState({ hovered: true });\n };\n\n handleMouseLeave = () => {\n document.body.style.cursor = 'default';\n this.setState({ hovered: false });\n };\n\n getEvaluateOutlineColor = (isCorrect, markAsCorrect, outlineColor) =>\n markAsCorrect ? 'green' : isCorrect ? outlineColor : 'red';\n\n getOutlineWidth = (showCorrectEnabled, selected, markAsCorrect, strokeWidth) =>\n markAsCorrect || (!markAsCorrect && !showCorrectEnabled && selected) ? strokeWidth : 0;\n\n render() {\n const {\n hotspotColor,\n isCorrect,\n isEvaluateMode,\n hoverOutlineColor,\n outlineColor,\n selected,\n focused,\n points,\n evaluateText,\n strokeWidth,\n scale,\n markAsCorrect,\n selectedHotspotColor,\n showCorrectEnabled,\n } = this.props;\n\n const { hovered } = this.state;\n\n const outlineColorParsed = isEvaluateMode\n ? this.getEvaluateOutlineColor(isCorrect, markAsCorrect, outlineColor)\n : outlineColor;\n const outlineWidth = this.getOutlineWidth(showCorrectEnabled, selected, markAsCorrect, strokeWidth);\n\n const pointsParsed = this.parsePointsForKonva(points);\n const center = this.getPolygonCenter(points);\n const iconX = center[0];\n const iconY = center[1];\n\n // \"Show Correct Answer\" Enabled:\n // - Correctly Selected: white checkmark in green circle\n // - Correctly Not Selected: none\n // - Incorrectly Selected: none\n // - Incorrectly Not Selected: white checkmark in green circle\n // \"Show Correct Answer\" Disabled:\n // - Correctly Selected:\n // - white checkmark in green circle\n // - heavy outline, as on “Gather”\n // - Correctly Not Selected: none\n // - Incorrectly Selected:\n // - white \"X\" in red circle\n // - heavy outline around the selection should appear in red\n // - Incorrectly Not Selected: white \"X\" in red circle\n let iconSrc;\n\n if (showCorrectEnabled) {\n if ((selected && isCorrect) || (!selected && !isCorrect)) {\n iconSrc = faCorrect;\n }\n } else {\n if (selected) {\n if (isCorrect) {\n iconSrc = faCorrect;\n } else {\n iconSrc = faWrong;\n }\n } else if (!isCorrect) {\n iconSrc = faWrong;\n }\n }\n const useHoveredStyle = (hovered || focused) && hoverOutlineColor;\n\n const xValues = pointsParsed.filter((_, index) => index % 2 === 0); // Even indices are x-coordinates\n const yValues = pointsParsed.filter((_, index) => index % 2 !== 0); // Odd indices are y-coordinates\n\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\n const rectX = minX;\n const rectY = minY;\n const rectWidth = maxX - minX;\n const rectHeight = maxY - minY;\n\n return (\n <Group scaleX={scale} scaleY={scale}>\n {useHoveredStyle && (\n <Rect\n x={rectX}\n y={rectY}\n width={rectWidth}\n height={rectHeight}\n stroke={selected ? 'transparent' : hoverOutlineColor}\n strokeWidth={strokeWidth}\n />\n )}\n <Line\n points={pointsParsed}\n closed={true}\n fill={selected && selectedHotspotColor? selectedHotspotColor : hotspotColor}\n onClick={this.handleClick}\n onTap={this.handleClick}\n draggable={false}\n stroke={useHoveredStyle && !selected ? 'transparent' : outlineColorParsed}\n strokeWidth={useHoveredStyle && !selected ? 0 : outlineWidth}\n onMouseLeave={this.handleMouseLeave}\n onMouseEnter={this.handleMouseEnter}\n cursor='pointer'\n position='relative'\n />\n {isEvaluateMode && iconSrc ? <ImageComponent src={iconSrc} x={iconX} y={iconY} tooltip={evaluateText} /> : null}\n </Group>\n );\n }\n}\n\nPolygonComponent.propTypes = {\n hotspotColor: PropTypes.string.isRequired,\n id: PropTypes.string.isRequired,\n isCorrect: PropTypes.bool.isRequired,\n isEvaluateMode: PropTypes.bool.isRequired,\n hoverOutlineColor: PropTypes.string,\n disabled: PropTypes.bool.isRequired,\n focused: PropTypes.bool,\n onClick: PropTypes.func.isRequired,\n outlineColor: PropTypes.string.isRequired,\n points: PropTypes.array.isRequired,\n selected: PropTypes.bool.isRequired,\n evaluateText: PropTypes.string,\n selectedHotspotColor: PropTypes.string,\n strokeWidth: PropTypes.number,\n scale: PropTypes.number,\n markAsCorrect: PropTypes.bool.isRequired,\n showCorrectEnabled: PropTypes.bool.isRequired,\n};\n\nPolygonComponent.defaultProps = {\n evaluateText: null,\n focused: false,\n strokeWidth: 5,\n scale: 1,\n};\n\nexport default PolygonComponent;\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"polygon.js","names":["_react","_interopRequireDefault","require","_propTypes","_reactKonva","_imageKonvaTooltip","_icons","PolygonComponent","React","Component","constructor","props","_defineProperty2","default","points","x","map","y","minX","Math","min","apply","maxX","max","minY","maxY","parsedPoints","forEach","push","e","onClick","id","selected","disabled","cancelBubble","selector","document","body","style","cursor","setState","hovered","isCorrect","markAsCorrect","outlineColor","showCorrectEnabled","strokeWidth","state","render","hotspotColor","isEvaluateMode","hoverOutlineColor","focused","evaluateText","scale","selectedHotspotColor","outlineColorParsed","getEvaluateOutlineColor","outlineWidth","getOutlineWidth","pointsParsed","parsePointsForKonva","center","getPolygonCenter","iconX","iconY","iconSrc","faCorrect","faWrong","useHoveredStyle","xValues","filter","_","index","yValues","rectX","rectY","rectWidth","rectHeight","createElement","Group","scaleX","scaleY","onMouseEnter","handleMouseEnter","onMouseLeave","handleMouseLeave","Line","closed","fill","handleClick","onTap","draggable","stroke","position","Rect","width","height","listening","src","tooltip","propTypes","PropTypes","string","isRequired","bool","func","array","number","defaultProps","_default","exports"],"sources":["../../src/hotspot/polygon.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Line, Group, Rect } from 'react-konva';\nimport ImageComponent from './image-konva-tooltip';\nimport { faCorrect, faWrong } from './icons';\n\nclass PolygonComponent extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n hovered: false,\n };\n }\n\n getPolygonCenter = (points) => {\n const x = points.map(({ x }) => x);\n const y = points.map(({ y }) => y);\n const minX = Math.min.apply(null, x);\n const maxX = Math.max.apply(null, x);\n const minY = Math.min.apply(null, y);\n const maxY = Math.max.apply(null, y);\n return [(minX + maxX) / 2, (minY + maxY) / 2];\n };\n\n parsePointsForKonva = (points) => {\n const parsedPoints = [];\n points.forEach(({ x, y }) => {\n parsedPoints.push(x);\n parsedPoints.push(y);\n });\n return parsedPoints;\n };\n\n handleClick = (e) => {\n const { onClick, id, selected, disabled } = this.props;\n\n if (!disabled) {\n e.cancelBubble = true;\n onClick({ id, selected: !selected, selector: 'Mouse' });\n }\n };\n\n handleMouseEnter = () => {\n const { disabled } = this.props;\n\n if (!disabled) {\n document.body.style.cursor = 'pointer';\n }\n this.setState({ hovered: true });\n };\n\n handleMouseLeave = () => {\n document.body.style.cursor = 'default';\n this.setState({ hovered: false });\n };\n\n getEvaluateOutlineColor = (isCorrect, markAsCorrect, outlineColor) =>\n markAsCorrect ? 'green' : isCorrect ? outlineColor : 'red';\n\n getOutlineWidth = (showCorrectEnabled, selected, markAsCorrect, strokeWidth) =>\n markAsCorrect || (!markAsCorrect && !showCorrectEnabled && selected) ? strokeWidth : 0;\n\n render() {\n const {\n hotspotColor,\n isCorrect,\n isEvaluateMode,\n hoverOutlineColor,\n outlineColor,\n selected,\n focused,\n points,\n evaluateText,\n strokeWidth,\n scale,\n markAsCorrect,\n selectedHotspotColor,\n showCorrectEnabled,\n } = this.props;\n\n const { hovered } = this.state;\n\n const outlineColorParsed = isEvaluateMode\n ? this.getEvaluateOutlineColor(isCorrect, markAsCorrect, outlineColor)\n : outlineColor;\n const outlineWidth = this.getOutlineWidth(showCorrectEnabled, selected, markAsCorrect, strokeWidth);\n\n const pointsParsed = this.parsePointsForKonva(points);\n const center = this.getPolygonCenter(points);\n const iconX = center[0];\n const iconY = center[1];\n\n // \"Show Correct Answer\" Enabled:\n // - Correctly Selected: white checkmark in green circle\n // - Correctly Not Selected: none\n // - Incorrectly Selected: none\n // - Incorrectly Not Selected: white checkmark in green circle\n // \"Show Correct Answer\" Disabled:\n // - Correctly Selected:\n // - white checkmark in green circle\n // - heavy outline, as on “Gather”\n // - Correctly Not Selected: none\n // - Incorrectly Selected:\n // - white \"X\" in red circle\n // - heavy outline around the selection should appear in red\n // - Incorrectly Not Selected: white \"X\" in red circle\n let iconSrc;\n\n if (showCorrectEnabled) {\n if ((selected && isCorrect) || (!selected && !isCorrect)) {\n iconSrc = faCorrect;\n }\n } else {\n if (selected) {\n if (isCorrect) {\n iconSrc = faCorrect;\n } else {\n iconSrc = faWrong;\n }\n } else if (!isCorrect) {\n iconSrc = faWrong;\n }\n }\n const useHoveredStyle = (hovered || focused) && hoverOutlineColor;\n\n const xValues = pointsParsed.filter((_, index) => index % 2 === 0); // Even indices are x-coordinates\n const yValues = pointsParsed.filter((_, index) => index % 2 !== 0); // Odd indices are y-coordinates\n\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\n const rectX = minX;\n const rectY = minY;\n const rectWidth = maxX - minX;\n const rectHeight = maxY - minY;\n\n return (\n <Group scaleX={scale} scaleY={scale} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>\n <Line\n points={pointsParsed}\n closed={true}\n fill={selected && selectedHotspotColor ? selectedHotspotColor : hotspotColor}\n onClick={this.handleClick}\n onTap={this.handleClick}\n draggable={false}\n stroke={useHoveredStyle && !selected ? 'transparent' : outlineColorParsed}\n strokeWidth={useHoveredStyle && !selected ? 0 : outlineWidth}\n cursor=\"pointer\"\n position=\"relative\"\n />\n {useHoveredStyle && (\n <Rect\n x={rectX}\n y={rectY}\n width={rectWidth}\n height={rectHeight}\n stroke={hoverOutlineColor}\n strokeWidth={strokeWidth}\n listening={false}\n />\n )}\n {isEvaluateMode && iconSrc ? <ImageComponent src={iconSrc} x={iconX} y={iconY} tooltip={evaluateText} /> : null}\n </Group>\n );\n }\n}\n\nPolygonComponent.propTypes = {\n hotspotColor: PropTypes.string.isRequired,\n id: PropTypes.string.isRequired,\n isCorrect: PropTypes.bool.isRequired,\n isEvaluateMode: PropTypes.bool.isRequired,\n hoverOutlineColor: PropTypes.string,\n disabled: PropTypes.bool.isRequired,\n focused: PropTypes.bool,\n onClick: PropTypes.func.isRequired,\n outlineColor: PropTypes.string.isRequired,\n points: PropTypes.array.isRequired,\n selected: PropTypes.bool.isRequired,\n evaluateText: PropTypes.string,\n selectedHotspotColor: PropTypes.string,\n strokeWidth: PropTypes.number,\n scale: PropTypes.number,\n markAsCorrect: PropTypes.bool.isRequired,\n showCorrectEnabled: PropTypes.bool.isRequired,\n};\n\nPolygonComponent.defaultProps = {\n evaluateText: null,\n focused: false,\n strokeWidth: 5,\n scale: 1,\n};\n\nexport default PolygonComponent;\n"],"mappings":"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","ignoreList":[]}
package/lib/hotspot/rectangle.js CHANGED
@@ -114,16 +114,10 @@ class RectComponent extends _react.default.Component {
114
114
  const useHoveredStyle = (hovered || focused) && hoverOutlineColor;
115
115
  return /*#__PURE__*/_react.default.createElement(_reactKonva.Group, {
116
116
  scaleX: scale,
117
- scaleY: scale
118
- }, useHoveredStyle && /*#__PURE__*/_react.default.createElement(_reactKonva.Rect, {
119
- x: x,
120
- y: y,
121
- width: width,
122
- height: height,
123
- stroke: selected ? 'transparent' : hoverOutlineColor,
124
- strokeWidth: strokeWidth,
125
- listening: false
126
- }), /*#__PURE__*/_react.default.createElement(_reactKonva.Rect, {
117
+ scaleY: scale,
118
+ onMouseLeave: this.handleMouseLeave,
119
+ onMouseEnter: this.handleMouseEnter
120
+ }, /*#__PURE__*/_react.default.createElement(_reactKonva.Rect, {
127
121
  x: x,
128
122
  y: y,
129
123
  width: width,
@@ -134,9 +128,15 @@ class RectComponent extends _react.default.Component {
134
128
  draggable: false,
135
129
  stroke: useHoveredStyle && !selected ? 'transparent' : outlineColorParsed,
136
130
  strokeWidth: useHoveredStyle && !selected ? 0 : outlineWidth,
137
- onMouseLeave: this.handleMouseLeave,
138
- onMouseEnter: this.handleMouseEnter,
139
131
  cursor: "pointer"
132
+ }), useHoveredStyle && /*#__PURE__*/_react.default.createElement(_reactKonva.Rect, {
133
+ x: x,
134
+ y: y,
135
+ width: width,
136
+ height: height,
137
+ stroke: hoverOutlineColor,
138
+ strokeWidth: strokeWidth,
139
+ listening: false
140
140
  }), isEvaluateMode && iconSrc ? /*#__PURE__*/_react.default.createElement(_imageKonvaTooltip.default, {
141
141
  src: iconSrc,
142
142
  x: iconX,
package/lib/hotspot/rectangle.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"rectangle.js","names":["_react","_interopRequireDefault","require","_propTypes","_reactKonva","_imageKonvaTooltip","_icons","RectComponent","React","Component","constructor","props","_defineProperty2","default","e","onClick","id","selected","disabled","cancelBubble","selector","document","body","style","cursor","setState","hovered","isCorrect","markAsCorrect","outlineColor","showCorrectEnabled","strokeWidth","state","render","height","hotspotColor","hoverOutlineColor","selectedHotspotColor","isEvaluateMode","focused","width","x","y","evaluateText","scale","outlineColorParsed","getEvaluateOutlineColor","outlineWidth","getOutlineWidth","iconX","iconY","iconSrc","faCorrect","faWrong","useHoveredStyle","createElement","Group","scaleX","scaleY","Rect","stroke","listening","fill","handleClick","onTap","draggable","onMouseLeave","handleMouseLeave","onMouseEnter","handleMouseEnter","src","tooltip","propTypes","PropTypes","number","isRequired","string","oneOfType","bool","func","defaultProps","_default","exports"],"sources":["../../src/hotspot/rectangle.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Rect, Group } from 'react-konva';\nimport ImageComponent from './image-konva-tooltip';\nimport { faCorrect, faWrong } from './icons';\n\nclass RectComponent extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n hovered: false,\n };\n }\n\n handleClick = (e) => {\n const { onClick, id, selected, disabled } = this.props;\n\n if (!disabled) {\n e.cancelBubble = true;\n onClick({ id, selected: !selected, selector: 'Mouse' });\n }\n };\n\n handleMouseEnter = () => {\n const { disabled } = this.props;\n\n if (!disabled) {\n document.body.style.cursor = 'pointer';\n }\n this.setState({ hovered: true });\n };\n\n handleMouseLeave = () => {\n document.body.style.cursor = 'default';\n this.setState({ hovered: false });\n };\n\n getEvaluateOutlineColor = (isCorrect, markAsCorrect, outlineColor) =>\n markAsCorrect ? 'green' : isCorrect ? outlineColor : 'red';\n\n getOutlineWidth = (showCorrectEnabled, selected, markAsCorrect, strokeWidth) =>\n markAsCorrect || (!markAsCorrect && !showCorrectEnabled && selected) ? strokeWidth : 0;\n\n render() {\n const {\n height,\n hotspotColor,\n hoverOutlineColor,\n selectedHotspotColor,\n isCorrect,\n isEvaluateMode,\n outlineColor,\n selected,\n focused,\n width,\n x,\n y,\n evaluateText,\n strokeWidth,\n scale,\n markAsCorrect,\n showCorrectEnabled,\n } = this.props;\n const { hovered } = this.state;\n\n const outlineColorParsed = isEvaluateMode\n ? this.getEvaluateOutlineColor(isCorrect, markAsCorrect, outlineColor)\n : outlineColor;\n\n const outlineWidth = this.getOutlineWidth(showCorrectEnabled, selected, markAsCorrect, strokeWidth);\n\n const iconX = x + width / 2 - 10;\n const iconY = y + height / 2 - 10;\n\n // \"Show Correct Answer\" Enabled:\n // - Correctly Selected: white checkmark in green circle\n // - Correctly Not Selected: none\n // - Incorrectly Selected: none\n // - Incorrectly Not Selected: white checkmark in green circle\n // \"Show Correct Answer\" Disabled:\n // - Correctly Selected:\n // - white checkmark in green circle\n // - heavy outline, as on “Gather”\n // - Correctly Not Selected: none\n // - Incorrectly Selected:\n // - white \"X\" in red circle\n // - heavy outline around the selection should appear in red\n // - Incorrectly Not Selected: white \"X\" in red circle\n let iconSrc;\n\n if (showCorrectEnabled) {\n if ((selected && isCorrect) || (!selected && !isCorrect)) {\n iconSrc = faCorrect;\n }\n } else {\n if (selected) {\n if (isCorrect) {\n iconSrc = faCorrect;\n } else {\n iconSrc = faWrong;\n }\n } else if (!isCorrect) {\n iconSrc = faWrong;\n }\n }\n\n const useHoveredStyle = (hovered || focused) && hoverOutlineColor;\n\n return (\n <Group scaleX={scale} scaleY={scale}>\n {useHoveredStyle && (\n <Rect\n x={x}\n y={y}\n width={width}\n height={height}\n stroke={selected ? 'transparent' : hoverOutlineColor}\n strokeWidth={strokeWidth}\n listening={false}\n />\n )}\n <Rect\n x={x}\n y={y}\n width={width}\n height={height}\n fill={selected && selectedHotspotColor ? selectedHotspotColor : hotspotColor}\n onClick={this.handleClick}\n onTap={this.handleClick}\n draggable={false}\n stroke={useHoveredStyle && !selected ? 'transparent' : outlineColorParsed}\n strokeWidth={useHoveredStyle && !selected ? 0 : outlineWidth}\n onMouseLeave={this.handleMouseLeave}\n onMouseEnter={this.handleMouseEnter}\n cursor=\"pointer\"\n />\n {isEvaluateMode && iconSrc ? <ImageComponent src={iconSrc} x={iconX} y={iconY} tooltip={evaluateText} /> : null}\n </Group>\n );\n }\n}\n\nRectComponent.propTypes = {\n height: PropTypes.number.isRequired,\n hotspotColor: PropTypes.string.isRequired,\n id: PropTypes.string.isRequired,\n isCorrect: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),\n isEvaluateMode: PropTypes.bool.isRequired,\n hoverOutlineColor: PropTypes.string,\n disabled: PropTypes.bool.isRequired,\n focused: PropTypes.bool,\n onClick: PropTypes.func.isRequired,\n outlineColor: PropTypes.string.isRequired,\n selected: PropTypes.bool.isRequired,\n width: PropTypes.number.isRequired,\n x: PropTypes.number.isRequired,\n y: PropTypes.number.isRequired,\n evaluateText: PropTypes.string,\n strokeWidth: PropTypes.number,\n scale: PropTypes.number,\n selectedHotspotColor: PropTypes.string,\n markAsCorrect: PropTypes.bool.isRequired,\n showCorrectEnabled: PropTypes.bool.isRequired,\n};\n\nRectComponent.defaultProps = {\n isCorrect: false,\n evaluateText: null,\n focused: false,\n strokeWidth: 5,\n scale: 1,\n};\n\nexport default RectComponent;\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"rectangle.js","names":["_react","_interopRequireDefault","require","_propTypes","_reactKonva","_imageKonvaTooltip","_icons","RectComponent","React","Component","constructor","props","_defineProperty2","default","e","onClick","id","selected","disabled","cancelBubble","selector","document","body","style","cursor","setState","hovered","isCorrect","markAsCorrect","outlineColor","showCorrectEnabled","strokeWidth","state","render","height","hotspotColor","hoverOutlineColor","selectedHotspotColor","isEvaluateMode","focused","width","x","y","evaluateText","scale","outlineColorParsed","getEvaluateOutlineColor","outlineWidth","getOutlineWidth","iconX","iconY","iconSrc","faCorrect","faWrong","useHoveredStyle","createElement","Group","scaleX","scaleY","onMouseLeave","handleMouseLeave","onMouseEnter","handleMouseEnter","Rect","fill","handleClick","onTap","draggable","stroke","listening","src","tooltip","propTypes","PropTypes","number","isRequired","string","oneOfType","bool","func","defaultProps","_default","exports"],"sources":["../../src/hotspot/rectangle.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Rect, Group } from 'react-konva';\nimport ImageComponent from './image-konva-tooltip';\nimport { faCorrect, faWrong } from './icons';\n\nclass RectComponent extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n hovered: false,\n };\n }\n\n handleClick = (e) => {\n const { onClick, id, selected, disabled } = this.props;\n\n if (!disabled) {\n e.cancelBubble = true;\n onClick({ id, selected: !selected, selector: 'Mouse' });\n }\n };\n\n handleMouseEnter = () => {\n const { disabled } = this.props;\n\n if (!disabled) {\n document.body.style.cursor = 'pointer';\n }\n this.setState({ hovered: true });\n };\n\n handleMouseLeave = () => {\n document.body.style.cursor = 'default';\n this.setState({ hovered: false });\n };\n\n getEvaluateOutlineColor = (isCorrect, markAsCorrect, outlineColor) =>\n markAsCorrect ? 'green' : isCorrect ? outlineColor : 'red';\n\n getOutlineWidth = (showCorrectEnabled, selected, markAsCorrect, strokeWidth) =>\n markAsCorrect || (!markAsCorrect && !showCorrectEnabled && selected) ? strokeWidth : 0;\n\n render() {\n const {\n height,\n hotspotColor,\n hoverOutlineColor,\n selectedHotspotColor,\n isCorrect,\n isEvaluateMode,\n outlineColor,\n selected,\n focused,\n width,\n x,\n y,\n evaluateText,\n strokeWidth,\n scale,\n markAsCorrect,\n showCorrectEnabled,\n } = this.props;\n const { hovered } = this.state;\n\n const outlineColorParsed = isEvaluateMode\n ? this.getEvaluateOutlineColor(isCorrect, markAsCorrect, outlineColor)\n : outlineColor;\n\n const outlineWidth = this.getOutlineWidth(showCorrectEnabled, selected, markAsCorrect, strokeWidth);\n\n const iconX = x + width / 2 - 10;\n const iconY = y + height / 2 - 10;\n\n // \"Show Correct Answer\" Enabled:\n // - Correctly Selected: white checkmark in green circle\n // - Correctly Not Selected: none\n // - Incorrectly Selected: none\n // - Incorrectly Not Selected: white checkmark in green circle\n // \"Show Correct Answer\" Disabled:\n // - Correctly Selected:\n // - white checkmark in green circle\n // - heavy outline, as on “Gather”\n // - Correctly Not Selected: none\n // - Incorrectly Selected:\n // - white \"X\" in red circle\n // - heavy outline around the selection should appear in red\n // - Incorrectly Not Selected: white \"X\" in red circle\n let iconSrc;\n\n if (showCorrectEnabled) {\n if ((selected && isCorrect) || (!selected && !isCorrect)) {\n iconSrc = faCorrect;\n }\n } else {\n if (selected) {\n if (isCorrect) {\n iconSrc = faCorrect;\n } else {\n iconSrc = faWrong;\n }\n } else if (!isCorrect) {\n iconSrc = faWrong;\n }\n }\n\n const useHoveredStyle = (hovered || focused) && hoverOutlineColor;\n\n return (\n <Group scaleX={scale} scaleY={scale} onMouseLeave={this.handleMouseLeave} onMouseEnter={this.handleMouseEnter}>\n <Rect\n x={x}\n y={y}\n width={width}\n height={height}\n fill={selected && selectedHotspotColor ? selectedHotspotColor : hotspotColor}\n onClick={this.handleClick}\n onTap={this.handleClick}\n draggable={false}\n stroke={useHoveredStyle && !selected ? 'transparent' : outlineColorParsed}\n strokeWidth={useHoveredStyle && !selected ? 0 : outlineWidth}\n cursor=\"pointer\"\n />\n {useHoveredStyle && (\n <Rect\n x={x}\n y={y}\n width={width}\n height={height}\n stroke={hoverOutlineColor}\n strokeWidth={strokeWidth}\n listening={false}\n />\n )}\n {isEvaluateMode && iconSrc ? <ImageComponent src={iconSrc} x={iconX} y={iconY} tooltip={evaluateText} /> : null}\n </Group>\n );\n }\n}\n\nRectComponent.propTypes = {\n height: PropTypes.number.isRequired,\n hotspotColor: PropTypes.string.isRequired,\n id: PropTypes.string.isRequired,\n isCorrect: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),\n isEvaluateMode: PropTypes.bool.isRequired,\n hoverOutlineColor: PropTypes.string,\n disabled: PropTypes.bool.isRequired,\n focused: PropTypes.bool,\n onClick: PropTypes.func.isRequired,\n outlineColor: PropTypes.string.isRequired,\n selected: PropTypes.bool.isRequired,\n width: PropTypes.number.isRequired,\n x: PropTypes.number.isRequired,\n y: PropTypes.number.isRequired,\n evaluateText: PropTypes.string,\n strokeWidth: PropTypes.number,\n scale: PropTypes.number,\n selectedHotspotColor: PropTypes.string,\n markAsCorrect: PropTypes.bool.isRequired,\n showCorrectEnabled: PropTypes.bool.isRequired,\n};\n\nRectComponent.defaultProps = {\n isCorrect: false,\n evaluateText: null,\n focused: false,\n strokeWidth: 5,\n scale: 1,\n};\n\nexport default RectComponent;\n"],"mappings":"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","ignoreList":[]}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@pie-element/hotspot",
3
3
  "repository": "pie-framework/pie-elements",
4
- "version": "11.1.1-next.92+37202a2aa",
4
+ "version": "11.1.1-next.99+27572cac5",
5
5
  "description": "",
6
6
  "publishConfig": {
7
7
  "access": "public"
@@ -24,7 +24,7 @@
24
24
  },
25
25
  "author": "pie framework developers",
26
26
  "license": "ISC",
27
- "gitHead": "37202a2aaffe36fd8df9dd865caf3535978bc482",
27
+ "gitHead": "27572cac52c328ad6f38d7b00812286b5a173290",
28
28
  "scripts": {
29
29
  "postpublish": "../../scripts/postpublish"
30
30
  },
package/src/hotspot/__tests__/circle.test.jsx CHANGED
@@ -70,7 +70,7 @@ describe('CircleComponent', () => {
70
70
  it('should render with correct position and radius', () => {
71
71
  const { getByTestId } = render(<CircleComponent {...defaultProps} />);
72
72
  const circle = getByTestId('circle');
73
-
73
+
74
74
  expect(circle).toHaveAttribute('x', '50');
75
75
  expect(circle).toHaveAttribute('y', '50');
76
76
  expect(circle).toHaveAttribute('radius', '30');
@@ -79,21 +79,21 @@ describe('CircleComponent', () => {
79
79
  it('should render with hotspot color when not selected', () => {
80
80
  const { getByTestId } = render(<CircleComponent {...defaultProps} />);
81
81
  const circle = getByTestId('circle');
82
-
82
+
83
83
  expect(circle).toHaveAttribute('fill', '#FF0000');
84
84
  });
85
85
 
86
86
  it('should render with selected color when selected', () => {
87
87
  const { getByTestId } = render(<CircleComponent {...defaultProps} selected={true} />);
88
88
  const circle = getByTestId('circle');
89
-
89
+
90
90
  expect(circle).toHaveAttribute('fill', '#00FF00');
91
91
  });
92
92
 
93
93
  it('should apply scale transform', () => {
94
94
  const { getByTestId } = render(<CircleComponent {...defaultProps} scale={2.0} />);
95
95
  const group = getByTestId('group');
96
-
96
+
97
97
  expect(group).toHaveAttribute('scaleX', '2');
98
98
  expect(group).toHaveAttribute('scaleY', '2');
99
99
  });
@@ -101,7 +101,7 @@ describe('CircleComponent', () => {
101
101
  it('should render with default scale of 1', () => {
102
102
  const { getByTestId } = render(<CircleComponent {...defaultProps} />);
103
103
  const group = getByTestId('group');
104
-
104
+
105
105
  expect(group).toHaveAttribute('scaleX', '1');
106
106
  expect(group).toHaveAttribute('scaleY', '1');
107
107
  });
@@ -112,9 +112,9 @@ describe('CircleComponent', () => {
112
112
  const onClick = jest.fn();
113
113
  const { getByTestId } = render(<CircleComponent {...defaultProps} onClick={onClick} />);
114
114
  const circle = getByTestId('circle');
115
-
115
+
116
116
  fireEvent.click(circle);
117
-
117
+
118
118
  expect(onClick).toHaveBeenCalledWith({
119
119
  id: 'circle1',
120
120
  selected: true,
@@ -126,20 +126,20 @@ describe('CircleComponent', () => {
126
126
  const onClick = jest.fn();
127
127
  const { getByTestId, rerender } = render(<CircleComponent {...defaultProps} onClick={onClick} selected={false} />);
128
128
  const circle = getByTestId('circle');
129
-
129
+
130
130
  fireEvent.click(circle);
131
-
131
+
132
132
  expect(onClick).toHaveBeenCalledWith({
133
133
  id: 'circle1',
134
134
  selected: true,
135
135
  selector: 'Mouse',
136
136
  });
137
-
137
+
138
138
  rerender(<CircleComponent {...defaultProps} onClick={onClick} selected={true} />);
139
-
139
+
140
140
  const circleAfter = getByTestId('circle');
141
141
  fireEvent.click(circleAfter);
142
-
142
+
143
143
  expect(onClick).toHaveBeenCalledWith({
144
144
  id: 'circle1',
145
145
  selected: false,
@@ -151,37 +151,37 @@ describe('CircleComponent', () => {
151
151
  const onClick = jest.fn();
152
152
  const { getByTestId } = render(<CircleComponent {...defaultProps} onClick={onClick} disabled={true} />);
153
153
  const circle = getByTestId('circle');
154
-
154
+
155
155
  fireEvent.click(circle);
156
-
156
+
157
157
  expect(onClick).not.toHaveBeenCalled();
158
158
  });
159
159
 
160
160
  it('should change cursor to pointer on mouse enter when not disabled', () => {
161
161
  const { getByTestId } = render(<CircleComponent {...defaultProps} />);
162
162
  const circle = getByTestId('circle');
163
-
163
+
164
164
  fireEvent.mouseEnter(circle);
165
-
165
+
166
166
  expect(document.body.style.cursor).toBe('pointer');
167
167
  });
168
168
 
169
169
  it('should not change cursor when disabled', () => {
170
170
  const { getByTestId } = render(<CircleComponent {...defaultProps} disabled={true} />);
171
171
  const circle = getByTestId('circle');
172
-
172
+
173
173
  fireEvent.mouseEnter(circle);
174
-
174
+
175
175
  expect(document.body.style.cursor).toBe('default');
176
176
  });
177
177
 
178
178
  it('should reset cursor to default on mouse leave', () => {
179
179
  const { getByTestId } = render(<CircleComponent {...defaultProps} />);
180
180
  const circle = getByTestId('circle');
181
-
181
+
182
182
  fireEvent.mouseEnter(circle);
183
183
  fireEvent.mouseLeave(circle);
184
-
184
+
185
185
  expect(document.body.style.cursor).toBe('default');
186
186
  });
187
187
  });
@@ -190,9 +190,9 @@ describe('CircleComponent', () => {
190
190
  it('should show hover rect when hoverOutlineColor is provided', () => {
191
191
  const { container, getByTestId } = render(<CircleComponent {...defaultProps} hoverOutlineColor="#FFFF00" />);
192
192
  const circle = getByTestId('circle');
193
-
193
+
194
194
  fireEvent.mouseEnter(circle);
195
-
195
+
196
196
  const rects = container.querySelectorAll('[data-testid="rect"]');
197
197
  expect(rects.length).toBeGreaterThan(0);
198
198
  });
@@ -208,9 +208,9 @@ describe('CircleComponent', () => {
208
208
  />
209
209
  );
210
210
  const circle = getByTestId('circle');
211
-
211
+
212
212
  fireEvent.mouseEnter(circle);
213
-
213
+
214
214
  const rect = container.querySelector('[data-testid="rect"]');
215
215
  if (rect) {
216
216
  // Rect should be positioned at (x - radius, y - radius) with width/height = radius * 2
@@ -226,12 +226,12 @@ describe('CircleComponent', () => {
226
226
  <CircleComponent {...defaultProps} selected={true} hoverOutlineColor="#FFFF00" />
227
227
  );
228
228
  const circle = getByTestId('circle');
229
-
229
+
230
230
  fireEvent.mouseEnter(circle);
231
-
231
+
232
232
  const rect = container.querySelector('[data-testid="rect"]');
233
233
  if (rect) {
234
- expect(rect).toHaveAttribute('stroke', 'transparent');
234
+ expect(rect).toHaveAttribute('stroke', '#FFFF00');
235
235
  }
236
236
  });
237
237
  });
@@ -247,7 +247,7 @@ describe('CircleComponent', () => {
247
247
  showCorrectEnabled={false}
248
248
  />
249
249
  );
250
-
250
+
251
251
  const icon = getByTestId('icon-image');
252
252
  expect(icon).toBeInTheDocument();
253
253
  });
@@ -262,7 +262,7 @@ describe('CircleComponent', () => {
262
262
  showCorrectEnabled={false}
263
263
  />
264
264
  );
265
-
265
+
266
266
  const icon = getByTestId('icon-image');
267
267
  expect(icon).toBeInTheDocument();
268
268
  });
@@ -277,7 +277,7 @@ describe('CircleComponent', () => {
277
277
  showCorrectEnabled={false}
278
278
  />
279
279
  );
280
-
280
+
281
281
  const icon = getByTestId('icon-image');
282
282
  expect(icon).toBeInTheDocument();
283
283
  });
@@ -292,7 +292,7 @@ describe('CircleComponent', () => {
292
292
  showCorrectEnabled={false}
293
293
  />
294
294
  );
295
-
295
+
296
296
  const icon = queryByTestId('icon-image');
297
297
  expect(icon).not.toBeInTheDocument();
298
298
  });
@@ -307,7 +307,7 @@ describe('CircleComponent', () => {
307
307
  showCorrectEnabled={true}
308
308
  />
309
309
  );
310
-
310
+
311
311
  const icon = getByTestId('icon-image');
312
312
  expect(icon).toBeInTheDocument();
313
313
  });
@@ -322,7 +322,7 @@ describe('CircleComponent', () => {
322
322
  showCorrectEnabled={true}
323
323
  />
324
324
  );
325
-
325
+
326
326
  const icon = getByTestId('icon-image');
327
327
  expect(icon).toBeInTheDocument();
328
328
  });
@@ -337,7 +337,7 @@ describe('CircleComponent', () => {
337
337
  showCorrectEnabled={true}
338
338
  />
339
339
  );
340
-
340
+
341
341
  const icon = queryByTestId('icon-image');
342
342
  expect(icon).not.toBeInTheDocument();
343
343
  });
@@ -352,7 +352,7 @@ describe('CircleComponent', () => {
352
352
  showCorrectEnabled={true}
353
353
  />
354
354
  );
355
-
355
+
356
356
  const icon = queryByTestId('icon-image');
357
357
  expect(icon).not.toBeInTheDocument();
358
358
  });
@@ -365,7 +365,7 @@ describe('CircleComponent', () => {
365
365
  markAsCorrect={true}
366
366
  />
367
367
  );
368
-
368
+
369
369
  const circle = getByTestId('circle');
370
370
  expect(circle).toHaveAttribute('stroke', 'green');
371
371
  });
@@ -379,7 +379,7 @@ describe('CircleComponent', () => {
379
379
  markAsCorrect={false}
380
380
  />
381
381
  );
382
-
382
+
383
383
  const circle = getByTestId('circle');
384
384
  expect(circle).toHaveAttribute('stroke', 'red');
385
385
  });
@@ -395,7 +395,7 @@ describe('CircleComponent', () => {
395
395
  showCorrectEnabled={false}
396
396
  />
397
397
  );
398
-
398
+
399
399
  const icon = getByTestId('icon-image');
400
400
  expect(icon).toHaveAttribute('data-tooltip', 'Great job!');
401
401
  });
@@ -415,7 +415,7 @@ describe('CircleComponent', () => {
415
415
  showCorrectEnabled={false}
416
416
  />
417
417
  );
418
-
418
+
419
419
  const icon = getByTestId('icon-image');
420
420
  // Icon should be at x - 10, y - 10
421
421
  expect(icon).toHaveAttribute('data-x', '90');
@@ -431,7 +431,7 @@ describe('CircleComponent', () => {
431
431
  radius={5}
432
432
  />
433
433
  );
434
-
434
+
435
435
  const circle = getByTestId('circle');
436
436
  expect(circle).toHaveAttribute('radius', '5');
437
437
  });
@@ -443,7 +443,7 @@ describe('CircleComponent', () => {
443
443
  radius={200}
444
444
  />
445
445
  );
446
-
446
+
447
447
  const circle = getByTestId('circle');
448
448
  expect(circle).toHaveAttribute('radius', '200');
449
449
  });
@@ -455,7 +455,7 @@ describe('CircleComponent', () => {
455
455
  scale={0.5}
456
456
  />
457
457
  );
458
-
458
+
459
459
  const group = getByTestId('group');
460
460
  expect(group).toHaveAttribute('scaleX', '0.5');
461
461
  expect(group).toHaveAttribute('scaleY', '0.5');
package/src/hotspot/__tests__/rectangle.test.jsx CHANGED
@@ -71,7 +71,7 @@ describe('RectComponent', () => {
71
71
  const { container } = render(<RectComponent {...defaultProps} />);
72
72
  const rects = container.querySelectorAll('[data-testid="rect"]');
73
73
  const mainRect = rects[rects.length - 1];
74
-
74
+
75
75
  expect(mainRect).toHaveAttribute('x', '10');
76
76
  expect(mainRect).toHaveAttribute('y', '20');
77
77
  expect(mainRect).toHaveAttribute('width', '100');
@@ -82,7 +82,7 @@ describe('RectComponent', () => {
82
82
  const { container } = render(<RectComponent {...defaultProps} />);
83
83
  const rects = container.querySelectorAll('[data-testid="rect"]');
84
84
  const mainRect = rects[rects.length - 1];
85
-
85
+
86
86
  expect(mainRect).toHaveAttribute('fill', '#FF0000');
87
87
  });
88
88
 
@@ -90,14 +90,14 @@ describe('RectComponent', () => {
90
90
  const { container } = render(<RectComponent {...defaultProps} selected={true} />);
91
91
  const rects = container.querySelectorAll('[data-testid="rect"]');
92
92
  const mainRect = rects[rects.length - 1];
93
-
93
+
94
94
  expect(mainRect).toHaveAttribute('fill', '#00FF00');
95
95
  });
96
96
 
97
97
  it('should apply scale transform', () => {
98
98
  const { getByTestId } = render(<RectComponent {...defaultProps} scale={1.5} />);
99
99
  const group = getByTestId('group');
100
-
100
+
101
101
  expect(group).toHaveAttribute('scaleX', '1.5');
102
102
  expect(group).toHaveAttribute('scaleY', '1.5');
103
103
  });
@@ -105,7 +105,7 @@ describe('RectComponent', () => {
105
105
  it('should render with default scale of 1', () => {
106
106
  const { getByTestId } = render(<RectComponent {...defaultProps} />);
107
107
  const group = getByTestId('group');
108
-
108
+
109
109
  expect(group).toHaveAttribute('scaleX', '1');
110
110
  expect(group).toHaveAttribute('scaleY', '1');
111
111
  });
@@ -117,9 +117,9 @@ describe('RectComponent', () => {
117
117
  const { container } = render(<RectComponent {...defaultProps} onClick={onClick} />);
118
118
  const rects = container.querySelectorAll('[data-testid="rect"]');
119
119
  const mainRect = rects[rects.length - 1];
120
-
120
+
121
121
  fireEvent.click(mainRect);
122
-
122
+
123
123
  expect(onClick).toHaveBeenCalledWith({
124
124
  id: 'rect1',
125
125
  selected: true,
@@ -132,21 +132,21 @@ describe('RectComponent', () => {
132
132
  const { container, rerender } = render(<RectComponent {...defaultProps} onClick={onClick} selected={false} />);
133
133
  const rects = container.querySelectorAll('[data-testid="rect"]');
134
134
  const mainRect = rects[rects.length - 1];
135
-
135
+
136
136
  fireEvent.click(mainRect);
137
-
137
+
138
138
  expect(onClick).toHaveBeenCalledWith({
139
139
  id: 'rect1',
140
140
  selected: true,
141
141
  selector: 'Mouse',
142
142
  });
143
-
143
+
144
144
  rerender(<RectComponent {...defaultProps} onClick={onClick} selected={true} />);
145
-
145
+
146
146
  const rectsAfter = container.querySelectorAll('[data-testid="rect"]');
147
147
  const mainRectAfter = rectsAfter[rectsAfter.length - 1];
148
148
  fireEvent.click(mainRectAfter);
149
-
149
+
150
150
  expect(onClick).toHaveBeenCalledWith({
151
151
  id: 'rect1',
152
152
  selected: false,
@@ -159,9 +159,9 @@ describe('RectComponent', () => {
159
159
  const { container } = render(<RectComponent {...defaultProps} onClick={onClick} disabled={true} />);
160
160
  const rects = container.querySelectorAll('[data-testid="rect"]');
161
161
  const mainRect = rects[rects.length - 1];
162
-
162
+
163
163
  fireEvent.click(mainRect);
164
-
164
+
165
165
  expect(onClick).not.toHaveBeenCalled();
166
166
  });
167
167
 
@@ -169,9 +169,9 @@ describe('RectComponent', () => {
169
169
  const { container } = render(<RectComponent {...defaultProps} />);
170
170
  const rects = container.querySelectorAll('[data-testid="rect"]');
171
171
  const mainRect = rects[rects.length - 1];
172
-
172
+
173
173
  fireEvent.mouseEnter(mainRect);
174
-
174
+
175
175
  expect(document.body.style.cursor).toBe('pointer');
176
176
  });
177
177
 
@@ -179,9 +179,9 @@ describe('RectComponent', () => {
179
179
  const { container } = render(<RectComponent {...defaultProps} disabled={true} />);
180
180
  const rects = container.querySelectorAll('[data-testid="rect"]');
181
181
  const mainRect = rects[rects.length - 1];
182
-
182
+
183
183
  fireEvent.mouseEnter(mainRect);
184
-
184
+
185
185
  expect(document.body.style.cursor).toBe('default');
186
186
  });
187
187
 
@@ -189,10 +189,10 @@ describe('RectComponent', () => {
189
189
  const { container } = render(<RectComponent {...defaultProps} />);
190
190
  const rects = container.querySelectorAll('[data-testid="rect"]');
191
191
  const mainRect = rects[rects.length - 1];
192
-
192
+
193
193
  fireEvent.mouseEnter(mainRect);
194
194
  fireEvent.mouseLeave(mainRect);
195
-
195
+
196
196
  expect(document.body.style.cursor).toBe('default');
197
197
  });
198
198
  });
@@ -202,9 +202,9 @@ describe('RectComponent', () => {
202
202
  const { container } = render(<RectComponent {...defaultProps} hoverOutlineColor="#FFFF00" />);
203
203
  const rects = container.querySelectorAll('[data-testid="rect"]');
204
204
  const mainRect = rects[rects.length - 1];
205
-
205
+
206
206
  fireEvent.mouseEnter(mainRect);
207
-
207
+
208
208
  const rectsAfterHover = container.querySelectorAll('[data-testid="rect"]');
209
209
  expect(rectsAfterHover.length).toBeGreaterThan(1);
210
210
  });
@@ -215,12 +215,12 @@ describe('RectComponent', () => {
215
215
  );
216
216
  const rects = container.querySelectorAll('[data-testid="rect"]');
217
217
  const mainRect = rects[rects.length - 1];
218
-
218
+
219
219
  fireEvent.mouseEnter(mainRect);
220
-
220
+
221
221
  const hoverRect = container.querySelector('[stroke="#FFFF00"]');
222
222
  if (hoverRect) {
223
- expect(hoverRect).toHaveAttribute('stroke', 'transparent');
223
+ expect(hoverRect).toHaveAttribute('stroke', '#FFFF00');
224
224
  }
225
225
  });
226
226
  });
@@ -236,7 +236,7 @@ describe('RectComponent', () => {
236
236
  showCorrectEnabled={false}
237
237
  />
238
238
  );
239
-
239
+
240
240
  const icon = getByTestId('icon-image');
241
241
  expect(icon).toBeInTheDocument();
242
242
  expect(icon).toHaveAttribute('data-src');
@@ -252,7 +252,7 @@ describe('RectComponent', () => {
252
252
  showCorrectEnabled={false}
253
253
  />
254
254
  );
255
-
255
+
256
256
  const icon = getByTestId('icon-image');
257
257
  expect(icon).toBeInTheDocument();
258
258
  });
@@ -267,7 +267,7 @@ describe('RectComponent', () => {
267
267
  showCorrectEnabled={false}
268
268
  />
269
269
  );
270
-
270
+
271
271
  const icon = getByTestId('icon-image');
272
272
  expect(icon).toBeInTheDocument();
273
273
  });
@@ -282,7 +282,7 @@ describe('RectComponent', () => {
282
282
  showCorrectEnabled={false}
283
283
  />
284
284
  );
285
-
285
+
286
286
  const icon = queryByTestId('icon-image');
287
287
  expect(icon).not.toBeInTheDocument();
288
288
  });
@@ -297,7 +297,7 @@ describe('RectComponent', () => {
297
297
  showCorrectEnabled={true}
298
298
  />
299
299
  );
300
-
300
+
301
301
  const icon = getByTestId('icon-image');
302
302
  expect(icon).toBeInTheDocument();
303
303
  });
@@ -312,7 +312,7 @@ describe('RectComponent', () => {
312
312
  showCorrectEnabled={true}
313
313
  />
314
314
  );
315
-
315
+
316
316
  const icon = getByTestId('icon-image');
317
317
  expect(icon).toBeInTheDocument();
318
318
  });
@@ -327,7 +327,7 @@ describe('RectComponent', () => {
327
327
  showCorrectEnabled={true}
328
328
  />
329
329
  );
330
-
330
+
331
331
  const icon = queryByTestId('icon-image');
332
332
  expect(icon).not.toBeInTheDocument();
333
333
  });
@@ -342,7 +342,7 @@ describe('RectComponent', () => {
342
342
  showCorrectEnabled={true}
343
343
  />
344
344
  );
345
-
345
+
346
346
  const icon = queryByTestId('icon-image');
347
347
  expect(icon).not.toBeInTheDocument();
348
348
  });
@@ -355,7 +355,7 @@ describe('RectComponent', () => {
355
355
  markAsCorrect={true}
356
356
  />
357
357
  );
358
-
358
+
359
359
  const rects = container.querySelectorAll('[data-testid="rect"]');
360
360
  const mainRect = rects[rects.length - 1];
361
361
  expect(mainRect).toHaveAttribute('stroke', 'green');
@@ -370,7 +370,7 @@ describe('RectComponent', () => {
370
370
  markAsCorrect={false}
371
371
  />
372
372
  );
373
-
373
+
374
374
  const rects = container.querySelectorAll('[data-testid="rect"]');
375
375
  const mainRect = rects[rects.length - 1];
376
376
  expect(mainRect).toHaveAttribute('stroke', 'red');
@@ -387,7 +387,7 @@ describe('RectComponent', () => {
387
387
  showCorrectEnabled={false}
388
388
  />
389
389
  );
390
-
390
+
391
391
  const icon = getByTestId('icon-image');
392
392
  expect(icon).toHaveAttribute('data-tooltip', 'Correct answer!');
393
393
  });
@@ -408,7 +408,7 @@ describe('RectComponent', () => {
408
408
  showCorrectEnabled={false}
409
409
  />
410
410
  );
411
-
411
+
412
412
  const icon = getByTestId('icon-image');
413
413
  // Icon should be centered: x + width/2 - 10, y + height/2 - 10
414
414
  expect(icon).toHaveAttribute('data-x', '50'); // 10 + 100/2 - 10
package/src/hotspot/circle.jsx CHANGED
@@ -92,17 +92,7 @@ class CircleComponent extends React.Component {
92
92
  const useHoveredStyle = (hovered || focused) && hoverOutlineColor;
93
93
 
94
94
  return (
95
- <Group scaleX={scale} scaleY={scale}>
96
- {useHoveredStyle && (
97
- <Rect
98
- x={x - radius}
99
- y={y - radius}
100
- width={radius * 2}
101
- height={radius * 2}
102
- stroke={selected ? 'transparent' : hoverOutlineColor}
103
- strokeWidth={strokeWidth}
104
- />
105
- )}
95
+ <Group scaleX={scale} scaleY={scale} onMouseLeave={this.handleMouseLeave} onMouseEnter={this.handleMouseEnter}>
106
96
  <Circle
107
97
  radius={radius}
108
98
  fill={selected && selectedHotspotColor ? selectedHotspotColor : hotspotColor}
@@ -111,11 +101,20 @@ class CircleComponent extends React.Component {
111
101
  draggable={false}
112
102
  stroke={useHoveredStyle && !selected ? 'transparent' : outlineColorParsed}
113
103
  strokeWidth={useHoveredStyle && !selected ? 0 : outlineWidth}
114
- onMouseLeave={this.handleMouseLeave}
115
- onMouseEnter={this.handleMouseEnter}
116
104
  x={x}
117
105
  y={y}
118
106
  />
107
+ {useHoveredStyle && (
108
+ <Rect
109
+ x={x - radius}
110
+ y={y - radius}
111
+ width={radius * 2}
112
+ height={radius * 2}
113
+ stroke={hoverOutlineColor}
114
+ strokeWidth={strokeWidth}
115
+ listening={false}
116
+ />
117
+ )}
119
118
  {isEvaluateMode && iconSrc ? <ImageComponent src={iconSrc} x={iconX} y={iconY} tooltip={evaluateText} /> : null}
120
119
  </Group>
121
120
  );
package/src/hotspot/polygon.jsx CHANGED
@@ -137,31 +137,30 @@ class PolygonComponent extends React.Component {
137
137
  const rectHeight = maxY - minY;
138
138
 
139
139
  return (
140
- <Group scaleX={scale} scaleY={scale}>
141
- {useHoveredStyle && (
142
- <Rect
143
- x={rectX}
144
- y={rectY}
145
- width={rectWidth}
146
- height={rectHeight}
147
- stroke={selected ? 'transparent' : hoverOutlineColor}
148
- strokeWidth={strokeWidth}
149
- />
150
- )}
140
+ <Group scaleX={scale} scaleY={scale} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
151
141
  <Line
152
142
  points={pointsParsed}
153
143
  closed={true}
154
- fill={selected && selectedHotspotColor? selectedHotspotColor : hotspotColor}
144
+ fill={selected && selectedHotspotColor ? selectedHotspotColor : hotspotColor}
155
145
  onClick={this.handleClick}
156
146
  onTap={this.handleClick}
157
147
  draggable={false}
158
148
  stroke={useHoveredStyle && !selected ? 'transparent' : outlineColorParsed}
159
149
  strokeWidth={useHoveredStyle && !selected ? 0 : outlineWidth}
160
- onMouseLeave={this.handleMouseLeave}
161
- onMouseEnter={this.handleMouseEnter}
162
- cursor='pointer'
163
- position='relative'
150
+ cursor="pointer"
151
+ position="relative"
164
152
  />
153
+ {useHoveredStyle && (
154
+ <Rect
155
+ x={rectX}
156
+ y={rectY}
157
+ width={rectWidth}
158
+ height={rectHeight}
159
+ stroke={hoverOutlineColor}
160
+ strokeWidth={strokeWidth}
161
+ listening={false}
162
+ />
163
+ )}
165
164
  {isEvaluateMode && iconSrc ? <ImageComponent src={iconSrc} x={iconX} y={iconY} tooltip={evaluateText} /> : null}
166
165
  </Group>
167
166
  );
package/src/hotspot/rectangle.jsx CHANGED
@@ -107,18 +107,7 @@ class RectComponent extends React.Component {
107
107
  const useHoveredStyle = (hovered || focused) && hoverOutlineColor;
108
108
 
109
109
  return (
110
- <Group scaleX={scale} scaleY={scale}>
111
- {useHoveredStyle && (
112
- <Rect
113
- x={x}
114
- y={y}
115
- width={width}
116
- height={height}
117
- stroke={selected ? 'transparent' : hoverOutlineColor}
118
- strokeWidth={strokeWidth}
119
- listening={false}
120
- />
121
- )}
110
+ <Group scaleX={scale} scaleY={scale} onMouseLeave={this.handleMouseLeave} onMouseEnter={this.handleMouseEnter}>
122
111
  <Rect
123
112
  x={x}
124
113
  y={y}
@@ -130,10 +119,19 @@ class RectComponent extends React.Component {
130
119
  draggable={false}
131
120
  stroke={useHoveredStyle && !selected ? 'transparent' : outlineColorParsed}
132
121
  strokeWidth={useHoveredStyle && !selected ? 0 : outlineWidth}
133
- onMouseLeave={this.handleMouseLeave}
134
- onMouseEnter={this.handleMouseEnter}
135
122
  cursor="pointer"
136
123
  />
124
+ {useHoveredStyle && (
125
+ <Rect
126
+ x={x}
127
+ y={y}
128
+ width={width}
129
+ height={height}
130
+ stroke={hoverOutlineColor}
131
+ strokeWidth={strokeWidth}
132
+ listening={false}
133
+ />
134
+ )}
137
135
  {isEvaluateMode && iconSrc ? <ImageComponent src={iconSrc} x={iconX} y={iconY} tooltip={evaluateText} /> : null}
138
136
  </Group>
139
137
  );