@pie-element/hotspot 7.2.3-next.9 → 7.2.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/configure/CHANGELOG.md +11 -0
  3. package/configure/package.json +2 -2
  4. package/controller/CHANGELOG.md +11 -0
  5. package/controller/package.json +2 -2
  6. package/lib/hotspot/circle.js +10 -9
  7. package/lib/hotspot/circle.js.map +1 -1
  8. package/lib/hotspot/polygon.js +28 -9
  9. package/lib/hotspot/polygon.js.map +1 -1
  10. package/lib/hotspot/rectangle.js +6 -5
  11. package/lib/hotspot/rectangle.js.map +1 -1
  12. package/package.json +3 -3
  13. package/src/hotspot/circle.jsx +14 -5
  14. package/src/hotspot/polygon.jsx +25 -11
  15. package/src/hotspot/rectangle.jsx +6 -5
package/CHANGELOG.md CHANGED
@@ -3,6 +3,19 @@
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
+ ## [7.2.3](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot@7.2.2...@pie-element/hotspot@7.2.3) (2024-11-29)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * remove unwanted changes ([e69ef23](https://github.com/pie-framework/pie-elements/commit/e69ef239c3dbc0525c6999bd2511cedc822f514e))
12
+ * update pie-lib/pie-toolbox PD-4387, PD-4388 ([0416caf](https://github.com/pie-framework/pie-elements/commit/0416caf1188a62367a893c1e2bcfd138303c1d6d))
13
+ * **hotspot:** use rectangular shape for all hover shapes, show select outline when hover is in effect and selected PD-4492, PD-4367 ([263d85d](https://github.com/pie-framework/pie-elements/commit/263d85d7ac5cf5ed65336935bafc61649cab3efc))
14
+
15
+
16
+
17
+
18
+
6
19
  ## [7.2.2](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot@7.2.1...@pie-element/hotspot@7.2.2) (2024-11-15)
7
20
 
8
21
 
package/configure/CHANGELOG.md CHANGED
@@ -3,6 +3,17 @@
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
+ ## [7.1.3](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-configure@7.1.2...@pie-element/hotspot-configure@7.1.3) (2024-11-29)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * update pie-lib/pie-toolbox PD-4387, PD-4388 ([0416caf](https://github.com/pie-framework/pie-elements/commit/0416caf1188a62367a893c1e2bcfd138303c1d6d))
12
+
13
+
14
+
15
+
16
+
6
17
  ## [7.1.2](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-configure@7.1.1...@pie-element/hotspot-configure@7.1.2) (2024-11-15)
7
18
 
8
19
 
package/configure/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@pie-element/hotspot-configure",
3
3
  "private": true,
4
- "version": "7.1.2",
4
+ "version": "7.1.3",
5
5
  "description": "",
6
6
  "main": "lib/index.js",
7
7
  "module": "src/index.js",
@@ -10,7 +10,7 @@
10
10
  "@material-ui/core": "^3.9.2",
11
11
  "@material-ui/icons": "^3.0.2",
12
12
  "@pie-framework/pie-configure-events": "^1.3.0",
13
- "@pie-lib/pie-toolbox": "2.2.0",
13
+ "@pie-lib/pie-toolbox": "2.3.0",
14
14
  "classnames": "^2.2.6",
15
15
  "debug": "^3.1.0",
16
16
  "konva": "^3.2.4",
package/controller/CHANGELOG.md CHANGED
@@ -3,6 +3,17 @@
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.1.3](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-controller@5.1.2...@pie-element/hotspot-controller@5.1.3) (2024-11-29)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * update pie-lib/pie-toolbox PD-4387, PD-4388 ([0416caf](https://github.com/pie-framework/pie-elements/commit/0416caf1188a62367a893c1e2bcfd138303c1d6d))
12
+
13
+
14
+
15
+
16
+
6
17
  ## [5.1.2](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-controller@5.1.1...@pie-element/hotspot-controller@5.1.2) (2024-11-15)
7
18
 
8
19
 
package/controller/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@pie-element/hotspot-controller",
3
3
  "private": true,
4
- "version": "5.1.2",
4
+ "version": "5.1.3",
5
5
  "description": "",
6
6
  "scripts": {
7
7
  "test": "echo \"Error: no test specified\" && exit 1"
@@ -11,7 +11,7 @@
11
11
  "main": "lib/index.js",
12
12
  "module": "src/index.js",
13
13
  "dependencies": {
14
- "@pie-lib/pie-toolbox": "2.2.0",
14
+ "@pie-lib/pie-toolbox": "2.3.0",
15
15
  "debug": "^4.1.1",
16
16
  "lodash": "^4.17.15"
17
17
  }
package/lib/hotspot/circle.js CHANGED
@@ -136,16 +136,17 @@ var CircleComponent = /*#__PURE__*/function (_React$Component) {
136
136
  }
137
137
  }
138
138
 
139
+ var useHoveredStyle = hovered && hoverOutlineColor;
139
140
  return /*#__PURE__*/_react["default"].createElement(_reactKonva.Group, {
140
141
  scaleX: scale,
141
142
  scaleY: scale
142
- }, hoverOutlineColor && hovered && /*#__PURE__*/_react["default"].createElement(_reactKonva.Circle, {
143
- radius: radius,
144
- x: x,
145
- y: y,
146
- stroke: hoverOutlineColor,
147
- strokeWidth: 2,
148
- listening: false
143
+ }, useHoveredStyle && /*#__PURE__*/_react["default"].createElement(_reactKonva.Rect, {
144
+ x: x - radius,
145
+ y: y - radius,
146
+ width: radius * 2,
147
+ height: radius * 2,
148
+ stroke: selected ? 'transparent' : hoverOutlineColor,
149
+ strokeWidth: strokeWidth
149
150
  }), /*#__PURE__*/_react["default"].createElement(_reactKonva.Circle, {
150
151
  classes: classes.base,
151
152
  radius: radius,
@@ -153,8 +154,8 @@ var CircleComponent = /*#__PURE__*/function (_React$Component) {
153
154
  onClick: this.handleClick,
154
155
  onTap: this.handleClick,
155
156
  draggable: false,
156
- stroke: hovered && hoverOutlineColor ? 'transparent' : outlineColorParsed,
157
- strokeWidth: !(hovered && hoverOutlineColor) ? outlineWidth : 0,
157
+ stroke: useHoveredStyle && !selected ? 'transparent' : outlineColorParsed,
158
+ strokeWidth: useHoveredStyle && !selected ? 0 : outlineWidth,
158
159
  onMouseLeave: this.handleMouseLeave,
159
160
  onMouseEnter: this.handleMouseEnter,
160
161
  x: x,
package/lib/hotspot/circle.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/hotspot/circle.jsx"],"names":["CircleComponent","props","e","onClick","id","selected","disabled","cancelBubble","document","body","style","cursor","setState","hovered","isCorrect","markAsCorrect","outlineColor","showCorrectEnabled","strokeWidth","state","classes","radius","hotspotColor","isEvaluateMode","hoverOutlineColor","x","y","evaluateText","scale","selectedHotspotColor","outlineColorParsed","getEvaluateOutlineColor","outlineWidth","getOutlineWidth","iconX","iconY","iconSrc","faCorrect","faWrong","base","handleClick","handleMouseLeave","handleMouseEnter","React","Component","styles","opacity","position","propTypes","PropTypes","object","isRequired","number","string","oneOfType","bool","func","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Circle, Group } from 'react-konva';\nimport { withStyles } from '@material-ui/core/styles';\nimport { ImageComponent } from '@pie-lib/pie-toolbox/icons';\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 });\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 classes,\n radius,\n hotspotColor,\n isCorrect,\n isEvaluateMode,\n hoverOutlineColor,\n outlineColor,\n selected,\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 return (\n <Group scaleX={scale} scaleY={scale}>\n {hoverOutlineColor && hovered && (\n <Circle radius={radius} x={x} y={y} stroke={hoverOutlineColor} strokeWidth={2} listening={false} />\n )}\n <Circle\n classes={classes.base}\n radius={radius}\n fill={selected ? selectedHotspotColor : hotspotColor}\n onClick={this.handleClick}\n onTap={this.handleClick}\n draggable={false}\n stroke={hovered && hoverOutlineColor ? 'transparent' : outlineColorParsed}\n strokeWidth={!(hovered && hoverOutlineColor) ? outlineWidth : 0}\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\nconst styles = () => ({\n base: {\n cursor: 'pointer',\n opacity: 0.5,\n position: 'relative',\n },\n});\n\nCircleComponent.propTypes = {\n classes: PropTypes.object.isRequired,\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 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 strokeWidth: 5,\n scale: 1,\n};\n\nexport default withStyles(styles)(CircleComponent);\n"],"file":"circle.js"}
1
+ {"version":3,"sources":["../../src/hotspot/circle.jsx"],"names":["CircleComponent","props","e","onClick","id","selected","disabled","cancelBubble","document","body","style","cursor","setState","hovered","isCorrect","markAsCorrect","outlineColor","showCorrectEnabled","strokeWidth","state","classes","radius","hotspotColor","isEvaluateMode","hoverOutlineColor","x","y","evaluateText","scale","selectedHotspotColor","outlineColorParsed","getEvaluateOutlineColor","outlineWidth","getOutlineWidth","iconX","iconY","iconSrc","faCorrect","faWrong","useHoveredStyle","base","handleClick","handleMouseLeave","handleMouseEnter","React","Component","styles","opacity","position","propTypes","PropTypes","object","isRequired","number","string","oneOfType","bool","func","defaultProps"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;IAEMA,e;;;;;AACJ,2BAAYC,KAAZ,EAAmB;AAAA;;AAAA;AACjB,8BAAMA,KAAN;AADiB,oGAOL,UAACC,CAAD,EAAO;AACnB,wBAA4C,MAAKD,KAAjD;AAAA,UAAQE,OAAR,eAAQA,OAAR;AAAA,UAAiBC,EAAjB,eAAiBA,EAAjB;AAAA,UAAqBC,QAArB,eAAqBA,QAArB;AAAA,UAA+BC,QAA/B,eAA+BA,QAA/B;;AAEA,UAAI,CAACA,QAAL,EAAe;AACbJ,QAAAA,CAAC,CAACK,YAAF,GAAiB,IAAjB;AACAJ,QAAAA,OAAO,CAAC;AAAEC,UAAAA,EAAE,EAAFA,EAAF;AAAMC,UAAAA,QAAQ,EAAE,CAACA;AAAjB,SAAD,CAAP;AACD;AACF,KAdkB;AAAA,yGAgBA,YAAM;AACvB,UAAQC,QAAR,GAAqB,MAAKL,KAA1B,CAAQK,QAAR;;AAEA,UAAI,CAACA,QAAL,EAAe;AACbE,QAAAA,QAAQ,CAACC,IAAT,CAAcC,KAAd,CAAoBC,MAApB,GAA6B,SAA7B;AACD;;AACD,YAAKC,QAAL,CAAc;AAAEC,QAAAA,OAAO,EAAE;AAAX,OAAd;AACD,KAvBkB;AAAA,yGAyBA,YAAM;AACvBL,MAAAA,QAAQ,CAACC,IAAT,CAAcC,KAAd,CAAoBC,MAApB,GAA6B,SAA7B;;AACA,YAAKC,QAAL,CAAc;AAAEC,QAAAA,OAAO,EAAE;AAAX,OAAd;AACD,KA5BkB;AAAA,gHA8BO,UAACC,SAAD,EAAYC,aAAZ,EAA2BC,YAA3B;AAAA,aACxBD,aAAa,GAAG,OAAH,GAAaD,SAAS,GAAGE,YAAH,GAAkB,KAD7B;AAAA,KA9BP;AAAA,wGAiCD,UAACC,kBAAD,EAAqBZ,QAArB,EAA+BU,aAA/B,EAA8CG,WAA9C;AAAA,aAChBH,aAAa,IAAK,CAACA,aAAD,IAAkB,CAACE,kBAAnB,IAAyCZ,QAA3D,GAAuEa,WAAvE,GAAqF,CADrE;AAAA,KAjCC;AAEjB,UAAKC,KAAL,GAAa;AACXN,MAAAA,OAAO,EAAE;AADE,KAAb;AAFiB;AAKlB;;;;WA+BD,kBAAS;AACP,yBAiBI,KAAKZ,KAjBT;AAAA,UACEmB,OADF,gBACEA,OADF;AAAA,UAEEC,MAFF,gBAEEA,MAFF;AAAA,UAGEC,YAHF,gBAGEA,YAHF;AAAA,UAIER,SAJF,gBAIEA,SAJF;AAAA,UAKES,cALF,gBAKEA,cALF;AAAA,UAMEC,iBANF,gBAMEA,iBANF;AAAA,UAOER,YAPF,gBAOEA,YAPF;AAAA,UAQEX,QARF,gBAQEA,QARF;AAAA,UASEoB,CATF,gBASEA,CATF;AAAA,UAUEC,CAVF,gBAUEA,CAVF;AAAA,UAWEC,YAXF,gBAWEA,YAXF;AAAA,UAYET,WAZF,gBAYEA,WAZF;AAAA,UAaEU,KAbF,gBAaEA,KAbF;AAAA,UAcEb,aAdF,gBAcEA,aAdF;AAAA,UAeEc,oBAfF,gBAeEA,oBAfF;AAAA,UAgBEZ,kBAhBF,gBAgBEA,kBAhBF;AAmBA,UAAQJ,OAAR,GAAoB,KAAKM,KAAzB,CAAQN,OAAR;AAEA,UAAMiB,kBAAkB,GAAGP,cAAc,GACrC,KAAKQ,uBAAL,CAA6BjB,SAA7B,EAAwCC,aAAxC,EAAuDC,YAAvD,CADqC,GAErCA,YAFJ;AAIA,UAAMgB,YAAY,GAAG,KAAKC,eAAL,CAAqBhB,kBAArB,EAAyCZ,QAAzC,EAAmDU,aAAnD,EAAkEG,WAAlE,CAArB;AAEA,UAAMgB,KAAK,GAAGT,CAAC,GAAG,EAAlB;AACA,UAAMU,KAAK,GAAGT,CAAC,GAAG,EAAlB,CA7BO,CA6Be;;AAEtB,UAAIU,OAAJ;;AACA,UAAInB,kBAAJ,EAAwB;AACtB,YAAKZ,QAAQ,IAAIS,SAAb,IAA4B,CAACT,QAAD,IAAa,CAACS,SAA9C,EAA0D;AACxDsB,UAAAA,OAAO,GAAGC,iBAAV;AACD;AACF,OAJD,MAIO;AACL,YAAIhC,QAAJ,EAAc;AACZ,cAAIS,SAAJ,EAAe;AACbsB,YAAAA,OAAO,GAAGC,iBAAV;AACD,WAFD,MAEO;AACLD,YAAAA,OAAO,GAAGE,eAAV;AACD;AACF,SAND,MAMO,IAAI,CAACxB,SAAL,EAAgB;AACrBsB,UAAAA,OAAO,GAAGE,eAAV;AACD;AACF;;AAED,UAAMC,eAAe,GAAG1B,OAAO,IAAIW,iBAAnC;AAEA,0BACE,gCAAC,iBAAD;AAAO,QAAA,MAAM,EAAEI,KAAf;AAAsB,QAAA,MAAM,EAAEA;AAA9B,SACGW,eAAe,iBACd,gCAAC,gBAAD;AACE,QAAA,CAAC,EAAEd,CAAC,GAAGJ,MADT;AAEE,QAAA,CAAC,EAAEK,CAAC,GAAGL,MAFT;AAGE,QAAA,KAAK,EAAEA,MAAM,GAAG,CAHlB;AAIE,QAAA,MAAM,EAAEA,MAAM,GAAG,CAJnB;AAKE,QAAA,MAAM,EAAEhB,QAAQ,GAAG,aAAH,GAAmBmB,iBALrC;AAME,QAAA,WAAW,EAAEN;AANf,QAFJ,eAWE,gCAAC,kBAAD;AACE,QAAA,OAAO,EAAEE,OAAO,CAACoB,IADnB;AAEE,QAAA,MAAM,EAAEnB,MAFV;AAGE,QAAA,IAAI,EAAEhB,QAAQ,GAAGwB,oBAAH,GAA0BP,YAH1C;AAIE,QAAA,OAAO,EAAE,KAAKmB,WAJhB;AAKE,QAAA,KAAK,EAAE,KAAKA,WALd;AAME,QAAA,SAAS,EAAE,KANb;AAOE,QAAA,MAAM,EAAEF,eAAe,IAAI,CAAClC,QAApB,GAA+B,aAA/B,GAA+CyB,kBAPzD;AAQE,QAAA,WAAW,EAAES,eAAe,IAAI,CAAClC,QAApB,GAA+B,CAA/B,GAAmC2B,YARlD;AASE,QAAA,YAAY,EAAE,KAAKU,gBATrB;AAUE,QAAA,YAAY,EAAE,KAAKC,gBAVrB;AAWE,QAAA,CAAC,EAAElB,CAXL;AAYE,QAAA,CAAC,EAAEC;AAZL,QAXF,EAyBGH,cAAc,IAAIa,OAAlB,gBAA4B,gCAAC,qBAAD;AAAgB,QAAA,GAAG,EAAEA,OAArB;AAA8B,QAAA,CAAC,EAAEF,KAAjC;AAAwC,QAAA,CAAC,EAAEC,KAA3C;AAAkD,QAAA,OAAO,EAAER;AAA3D,QAA5B,GAA0G,IAzB7G,CADF;AA6BD;;;EApH2BiB,kBAAMC,S;;AAuHpC,IAAMC,MAAM,GAAG,SAATA,MAAS;AAAA,SAAO;AACpBN,IAAAA,IAAI,EAAE;AACJ7B,MAAAA,MAAM,EAAE,SADJ;AAEJoC,MAAAA,OAAO,EAAE,GAFL;AAGJC,MAAAA,QAAQ,EAAE;AAHN;AADc,GAAP;AAAA,CAAf;;AAQAhD,eAAe,CAACiD,SAAhB,GAA4B;AAC1B7B,EAAAA,OAAO,EAAE8B,sBAAUC,MAAV,CAAiBC,UADA;AAE1B/B,EAAAA,MAAM,EAAE6B,sBAAUG,MAAV,CAAiBD,UAFC;AAG1B9B,EAAAA,YAAY,EAAE4B,sBAAUI,MAAV,CAAiBF,UAHL;AAI1BhD,EAAAA,EAAE,EAAE8C,sBAAUI,MAAV,CAAiBF,UAJK;AAK1BtC,EAAAA,SAAS,EAAEoC,sBAAUK,SAAV,CAAoB,CAACL,sBAAUM,IAAX,EAAiBN,sBAAUI,MAA3B,CAApB,CALe;AAM1B/B,EAAAA,cAAc,EAAE2B,sBAAUM,IAAV,CAAeJ,UANL;AAO1B9C,EAAAA,QAAQ,EAAE4C,sBAAUM,IAAV,CAAeJ,UAPC;AAQ1B5B,EAAAA,iBAAiB,EAAE0B,sBAAUI,MARH;AAS1BnD,EAAAA,OAAO,EAAE+C,sBAAUO,IAAV,CAAeL,UATE;AAU1BpC,EAAAA,YAAY,EAAEkC,sBAAUI,MAAV,CAAiBF,UAVL;AAW1B/C,EAAAA,QAAQ,EAAE6C,sBAAUM,IAAV,CAAeJ,UAXC;AAY1B3B,EAAAA,CAAC,EAAEyB,sBAAUG,MAAV,CAAiBD,UAZM;AAa1B1B,EAAAA,CAAC,EAAEwB,sBAAUG,MAAV,CAAiBD,UAbM;AAc1BzB,EAAAA,YAAY,EAAEuB,sBAAUI,MAdE;AAe1BpC,EAAAA,WAAW,EAAEgC,sBAAUG,MAfG;AAgB1BzB,EAAAA,KAAK,EAAEsB,sBAAUG,MAhBS;AAiB1BxB,EAAAA,oBAAoB,EAAEqB,sBAAUI,MAjBN;AAkB1BvC,EAAAA,aAAa,EAAEmC,sBAAUM,IAAV,CAAeJ,UAlBJ;AAmB1BnC,EAAAA,kBAAkB,EAAEiC,sBAAUM,IAAV,CAAeJ;AAnBT,CAA5B;AAsBApD,eAAe,CAAC0D,YAAhB,GAA+B;AAC7B5C,EAAAA,SAAS,EAAE,KADkB;AAE7Ba,EAAAA,YAAY,EAAE,IAFe;AAG7BT,EAAAA,WAAW,EAAE,CAHgB;AAI7BU,EAAAA,KAAK,EAAE;AAJsB,CAA/B;;eAOe,wBAAWkB,MAAX,EAAmB9C,eAAnB,C","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Circle, Group, Rect } from 'react-konva';\nimport { withStyles } from '@material-ui/core/styles';\nimport { ImageComponent } from '@pie-lib/pie-toolbox/icons';\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 });\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 classes,\n radius,\n hotspotColor,\n isCorrect,\n isEvaluateMode,\n hoverOutlineColor,\n outlineColor,\n selected,\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 && 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 classes={classes.base}\n radius={radius}\n fill={selected ? 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\nconst styles = () => ({\n base: {\n cursor: 'pointer',\n opacity: 0.5,\n position: 'relative',\n },\n});\n\nCircleComponent.propTypes = {\n classes: PropTypes.object.isRequired,\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 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 strokeWidth: 5,\n scale: 1,\n};\n\nexport default withStyles(styles)(CircleComponent);\n"],"file":"circle.js"}
package/lib/hotspot/polygon.js CHANGED
@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
7
7
  });
8
8
  exports["default"] = void 0;
9
9
 
10
+ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
11
+
10
12
  var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
11
13
 
12
14
  var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
@@ -174,16 +176,33 @@ var PolygonComponent = /*#__PURE__*/function (_React$Component) {
174
176
  }
175
177
  }
176
178
 
179
+ var useHoveredStyle = hovered && hoverOutlineColor;
180
+ var xValues = pointsParsed.filter(function (_, index) {
181
+ return index % 2 === 0;
182
+ }); // Even indices are x-coordinates
183
+
184
+ var yValues = pointsParsed.filter(function (_, index) {
185
+ return index % 2 !== 0;
186
+ }); // Odd indices are y-coordinates
187
+
188
+ var minX = Math.min.apply(Math, (0, _toConsumableArray2["default"])(xValues));
189
+ var maxX = Math.max.apply(Math, (0, _toConsumableArray2["default"])(xValues));
190
+ var minY = Math.min.apply(Math, (0, _toConsumableArray2["default"])(yValues));
191
+ var maxY = Math.max.apply(Math, (0, _toConsumableArray2["default"])(yValues));
192
+ var rectX = minX;
193
+ var rectY = minY;
194
+ var rectWidth = maxX - minX;
195
+ var rectHeight = maxY - minY;
177
196
  return /*#__PURE__*/_react["default"].createElement(_reactKonva.Group, {
178
197
  scaleX: scale,
179
198
  scaleY: scale
180
- }, hoverOutlineColor && hovered && /*#__PURE__*/_react["default"].createElement(_reactKonva.Line, {
181
- closed: true,
182
- draggable: false,
183
- points: pointsParsed,
184
- stroke: hoverOutlineColor,
185
- strokeWidth: 2,
186
- listening: false
199
+ }, useHoveredStyle && /*#__PURE__*/_react["default"].createElement(_reactKonva.Rect, {
200
+ x: rectX,
201
+ y: rectY,
202
+ width: rectWidth,
203
+ height: rectHeight,
204
+ stroke: selected ? 'transparent' : hoverOutlineColor,
205
+ strokeWidth: strokeWidth
187
206
  }), /*#__PURE__*/_react["default"].createElement(_reactKonva.Line, {
188
207
  points: pointsParsed,
189
208
  closed: true,
@@ -192,8 +211,8 @@ var PolygonComponent = /*#__PURE__*/function (_React$Component) {
192
211
  onClick: this.handleClick,
193
212
  onTap: this.handleClick,
194
213
  draggable: false,
195
- stroke: hovered && hoverOutlineColor ? 'transparent' : outlineColorParsed,
196
- strokeWidth: !(hovered && hoverOutlineColor) ? outlineWidth : 0,
214
+ stroke: useHoveredStyle && !selected ? 'transparent' : outlineColorParsed,
215
+ strokeWidth: useHoveredStyle && !selected ? 0 : outlineWidth,
197
216
  onMouseLeave: this.handleMouseLeave,
198
217
  onMouseEnter: this.handleMouseEnter
199
218
  }), isEvaluateMode && iconSrc ? /*#__PURE__*/_react["default"].createElement(_icons.ImageComponent, {
package/lib/hotspot/polygon.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/hotspot/polygon.jsx"],"names":["PolygonComponent","props","points","x","map","y","minX","Math","min","apply","maxX","max","minY","maxY","parsedPoints","forEach","push","e","onClick","id","selected","disabled","cancelBubble","document","body","style","cursor","setState","hovered","isCorrect","markAsCorrect","outlineColor","showCorrectEnabled","strokeWidth","state","classes","hotspotColor","isEvaluateMode","hoverOutlineColor","evaluateText","scale","selectedHotspotColor","outlineColorParsed","getEvaluateOutlineColor","outlineWidth","getOutlineWidth","pointsParsed","parsePointsForKonva","center","getPolygonCenter","iconX","iconY","iconSrc","faCorrect","faWrong","base","handleClick","handleMouseLeave","handleMouseEnter","React","Component","styles","opacity","position","propTypes","PropTypes","object","isRequired","string","bool","func","array","number","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Line, Group } from 'react-konva';\nimport { withStyles } from '@material-ui/core/styles';\nimport { ImageComponent } from '@pie-lib/pie-toolbox/icons';\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 });\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 classes,\n hotspotColor,\n isCorrect,\n isEvaluateMode,\n hoverOutlineColor,\n outlineColor,\n selected,\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\n return (\n <Group scaleX={scale} scaleY={scale}>\n {hoverOutlineColor && hovered && (\n <Line\n closed={true}\n draggable={false}\n points={pointsParsed}\n stroke={hoverOutlineColor}\n strokeWidth={2}\n listening={false}\n />\n )}\n <Line\n points={pointsParsed}\n closed={true}\n classes={classes.base}\n fill={selected ? selectedHotspotColor : hotspotColor}\n onClick={this.handleClick}\n onTap={this.handleClick}\n draggable={false}\n stroke={hovered && hoverOutlineColor ? 'transparent' : outlineColorParsed}\n strokeWidth={!(hovered && hoverOutlineColor) ? outlineWidth : 0}\n onMouseLeave={this.handleMouseLeave}\n onMouseEnter={this.handleMouseEnter}\n />\n {isEvaluateMode && iconSrc ? <ImageComponent src={iconSrc} x={iconX} y={iconY} tooltip={evaluateText} /> : null}\n </Group>\n );\n }\n}\n\nconst styles = () => ({\n base: {\n cursor: 'pointer',\n opacity: 0.5,\n position: 'relative',\n },\n});\n\nPolygonComponent.propTypes = {\n classes: PropTypes.object.isRequired,\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 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 strokeWidth: 5,\n scale: 1,\n};\n\nexport default withStyles(styles)(PolygonComponent);\n"],"file":"polygon.js"}
1
+ {"version":3,"sources":["../../src/hotspot/polygon.jsx"],"names":["PolygonComponent","props","points","x","map","y","minX","Math","min","apply","maxX","max","minY","maxY","parsedPoints","forEach","push","e","onClick","id","selected","disabled","cancelBubble","document","body","style","cursor","setState","hovered","isCorrect","markAsCorrect","outlineColor","showCorrectEnabled","strokeWidth","state","classes","hotspotColor","isEvaluateMode","hoverOutlineColor","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","base","handleClick","handleMouseLeave","handleMouseEnter","React","Component","styles","opacity","position","propTypes","PropTypes","object","isRequired","string","bool","func","array","number","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Line, Group, Rect } from 'react-konva';\nimport { withStyles } from '@material-ui/core/styles';\nimport { ImageComponent } from '@pie-lib/pie-toolbox/icons';\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 });\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 classes,\n hotspotColor,\n isCorrect,\n isEvaluateMode,\n hoverOutlineColor,\n outlineColor,\n selected,\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 && 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 classes={classes.base}\n fill={selected ? 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 />\n {isEvaluateMode && iconSrc ? <ImageComponent src={iconSrc} x={iconX} y={iconY} tooltip={evaluateText} /> : null}\n </Group>\n );\n }\n}\n\nconst styles = () => ({\n base: {\n cursor: 'pointer',\n opacity: 0.5,\n position: 'relative',\n },\n});\n\nPolygonComponent.propTypes = {\n classes: PropTypes.object.isRequired,\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 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 strokeWidth: 5,\n scale: 1,\n};\n\nexport default withStyles(styles)(PolygonComponent);\n"],"file":"polygon.js"}
package/lib/hotspot/rectangle.js CHANGED
@@ -150,16 +150,17 @@ var RectComponent = /*#__PURE__*/function (_React$Component) {
150
150
  }
151
151
 
152
152
  var hovered = this.state.hovered;
153
+ var useHoveredStyle = hovered && hoverOutlineColor;
153
154
  return /*#__PURE__*/_react["default"].createElement(_reactKonva.Group, {
154
155
  scaleX: scale,
155
156
  scaleY: scale
156
- }, hoverOutlineColor && hovered && /*#__PURE__*/_react["default"].createElement(_reactKonva.Rect, {
157
+ }, useHoveredStyle && /*#__PURE__*/_react["default"].createElement(_reactKonva.Rect, {
157
158
  x: x,
158
159
  y: y,
159
160
  width: width,
160
161
  height: height,
161
- stroke: hoverOutlineColor,
162
- strokeWidth: 2,
162
+ stroke: selected ? 'transparent' : hoverOutlineColor,
163
+ strokeWidth: strokeWidth,
163
164
  listening: false
164
165
  }), /*#__PURE__*/_react["default"].createElement(_reactKonva.Rect, {
165
166
  classes: classes.base,
@@ -169,8 +170,8 @@ var RectComponent = /*#__PURE__*/function (_React$Component) {
169
170
  onClick: this.handleClick,
170
171
  onTap: this.handleClick,
171
172
  draggable: false,
172
- stroke: hovered && hoverOutlineColor ? 'transparent' : outlineColorParsed,
173
- strokeWidth: !(hovered && hoverOutlineColor) ? outlineWidth : 0,
173
+ stroke: useHoveredStyle && !selected ? 'transparent' : outlineColorParsed,
174
+ strokeWidth: useHoveredStyle && !selected ? 0 : outlineWidth,
174
175
  onMouseLeave: this.handleMouseLeave,
175
176
  onMouseEnter: this.handleMouseEnter,
176
177
  x: x,
package/lib/hotspot/rectangle.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/hotspot/rectangle.jsx"],"names":["RectComponent","props","e","onClick","id","selected","disabled","cancelBubble","document","body","style","cursor","setState","hovered","isCorrect","markAsCorrect","outlineColor","showCorrectEnabled","strokeWidth","state","classes","height","hotspotColor","hoverOutlineColor","selectedHotspotColor","isEvaluateMode","width","x","y","evaluateText","scale","outlineColorParsed","getEvaluateOutlineColor","outlineWidth","getOutlineWidth","iconX","iconY","iconSrc","faCorrect","faWrong","base","handleClick","handleMouseLeave","handleMouseEnter","React","Component","styles","opacity","position","propTypes","PropTypes","object","isRequired","number","string","oneOfType","bool","func","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Rect, Group } from 'react-konva';\nimport { withStyles } from '@material-ui/core/styles';\nimport { ImageComponent } from '@pie-lib/pie-toolbox/icons';\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 });\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 classes,\n height,\n hotspotColor,\n hoverOutlineColor,\n selectedHotspotColor,\n isCorrect,\n isEvaluateMode,\n outlineColor,\n selected,\n width,\n x,\n y,\n evaluateText,\n strokeWidth,\n scale,\n markAsCorrect,\n showCorrectEnabled,\n } = this.props;\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 { hovered } = this.state;\n\n return (\n <Group scaleX={scale} scaleY={scale}>\n {hoverOutlineColor && hovered && (\n <Rect\n x={x}\n y={y}\n width={width}\n height={height}\n stroke={hoverOutlineColor}\n strokeWidth={2}\n listening={false}\n />\n )}\n <Rect\n classes={classes.base}\n width={width}\n height={height}\n fill={selected ? selectedHotspotColor : hotspotColor}\n onClick={this.handleClick}\n onTap={this.handleClick}\n draggable={false}\n stroke={hovered && hoverOutlineColor ? 'transparent' : outlineColorParsed}\n strokeWidth={!(hovered && hoverOutlineColor) ? outlineWidth : 0}\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\nconst styles = () => ({\n base: {\n cursor: 'pointer',\n opacity: 0.5,\n position: 'relative',\n },\n});\n\nRectComponent.propTypes = {\n classes: PropTypes.object.isRequired,\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 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 strokeWidth: 5,\n scale: 1,\n};\n\nexport default withStyles(styles)(RectComponent);\n"],"file":"rectangle.js"}
1
+ {"version":3,"sources":["../../src/hotspot/rectangle.jsx"],"names":["RectComponent","props","e","onClick","id","selected","disabled","cancelBubble","document","body","style","cursor","setState","hovered","isCorrect","markAsCorrect","outlineColor","showCorrectEnabled","strokeWidth","state","classes","height","hotspotColor","hoverOutlineColor","selectedHotspotColor","isEvaluateMode","width","x","y","evaluateText","scale","outlineColorParsed","getEvaluateOutlineColor","outlineWidth","getOutlineWidth","iconX","iconY","iconSrc","faCorrect","faWrong","useHoveredStyle","base","handleClick","handleMouseLeave","handleMouseEnter","React","Component","styles","opacity","position","propTypes","PropTypes","object","isRequired","number","string","oneOfType","bool","func","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Rect, Group } from 'react-konva';\nimport { withStyles } from '@material-ui/core/styles';\nimport { ImageComponent } from '@pie-lib/pie-toolbox/icons';\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 });\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 classes,\n height,\n hotspotColor,\n hoverOutlineColor,\n selectedHotspotColor,\n isCorrect,\n isEvaluateMode,\n outlineColor,\n selected,\n width,\n x,\n y,\n evaluateText,\n strokeWidth,\n scale,\n markAsCorrect,\n showCorrectEnabled,\n } = this.props;\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 { hovered } = this.state;\n const useHoveredStyle = hovered && 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 classes={classes.base}\n width={width}\n height={height}\n fill={selected ? 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\nconst styles = () => ({\n base: {\n cursor: 'pointer',\n opacity: 0.5,\n position: 'relative',\n },\n});\n\nRectComponent.propTypes = {\n classes: PropTypes.object.isRequired,\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 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 strokeWidth: 5,\n scale: 1,\n};\n\nexport default withStyles(styles)(RectComponent);\n"],"file":"rectangle.js"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pie-element/hotspot",
3
- "version": "7.2.3-next.9+341d7a0f3",
3
+ "version": "7.2.3",
4
4
  "description": "",
5
5
  "repository": "pie-framework/pie-elements",
6
6
  "publishConfig": {
@@ -9,7 +9,7 @@
9
9
  "dependencies": {
10
10
  "@material-ui/core": "^3.9.3",
11
11
  "@pie-framework/pie-player-events": "^0.1.0",
12
- "@pie-lib/pie-toolbox": "2.2.0",
12
+ "@pie-lib/pie-toolbox": "2.3.0",
13
13
  "konva": "^3.2.5",
14
14
  "prop-types": "^15.6.1",
15
15
  "react": "^16.8.1",
@@ -18,7 +18,7 @@
18
18
  },
19
19
  "author": "pie framework developers",
20
20
  "license": "ISC",
21
- "gitHead": "341d7a0f337f6577cb9190cf8ef40d27f10637b7",
21
+ "gitHead": "8768d6d680a754a124834b0c8761d7bc7a82aae3",
22
22
  "scripts": {
23
23
  "postpublish": "../../scripts/postpublish"
24
24
  },
package/src/hotspot/circle.jsx CHANGED
@@ -1,6 +1,6 @@
1
1
  import React from 'react';
2
2
  import PropTypes from 'prop-types';
3
- import { Circle, Group } from 'react-konva';
3
+ import { Circle, Group, Rect } from 'react-konva';
4
4
  import { withStyles } from '@material-ui/core/styles';
5
5
  import { ImageComponent } from '@pie-lib/pie-toolbox/icons';
6
6
  import { faCorrect, faWrong } from './icons';
@@ -90,10 +90,19 @@ class CircleComponent extends React.Component {
90
90
  }
91
91
  }
92
92
 
93
+ const useHoveredStyle = hovered && hoverOutlineColor;
94
+
93
95
  return (
94
96
  <Group scaleX={scale} scaleY={scale}>
95
- {hoverOutlineColor && hovered && (
96
- <Circle radius={radius} x={x} y={y} stroke={hoverOutlineColor} strokeWidth={2} listening={false} />
97
+ {useHoveredStyle && (
98
+ <Rect
99
+ x={x - radius}
100
+ y={y - radius}
101
+ width={radius * 2}
102
+ height={radius * 2}
103
+ stroke={selected ? 'transparent' : hoverOutlineColor}
104
+ strokeWidth={strokeWidth}
105
+ />
97
106
  )}
98
107
  <Circle
99
108
  classes={classes.base}
@@ -102,8 +111,8 @@ class CircleComponent extends React.Component {
102
111
  onClick={this.handleClick}
103
112
  onTap={this.handleClick}
104
113
  draggable={false}
105
- stroke={hovered && hoverOutlineColor ? 'transparent' : outlineColorParsed}
106
- strokeWidth={!(hovered && hoverOutlineColor) ? outlineWidth : 0}
114
+ stroke={useHoveredStyle && !selected ? 'transparent' : outlineColorParsed}
115
+ strokeWidth={useHoveredStyle && !selected ? 0 : outlineWidth}
107
116
  onMouseLeave={this.handleMouseLeave}
108
117
  onMouseEnter={this.handleMouseEnter}
109
118
  x={x}
package/src/hotspot/polygon.jsx CHANGED
@@ -1,6 +1,6 @@
1
1
  import React from 'react';
2
2
  import PropTypes from 'prop-types';
3
- import { Line, Group } from 'react-konva';
3
+ import { Line, Group, Rect } from 'react-konva';
4
4
  import { withStyles } from '@material-ui/core/styles';
5
5
  import { ImageComponent } from '@pie-lib/pie-toolbox/icons';
6
6
  import { faCorrect, faWrong } from './icons';
@@ -122,17 +122,31 @@ class PolygonComponent extends React.Component {
122
122
  iconSrc = faWrong;
123
123
  }
124
124
  }
125
+ const useHoveredStyle = hovered && hoverOutlineColor;
126
+
127
+ const xValues = pointsParsed.filter((_, index) => index % 2 === 0); // Even indices are x-coordinates
128
+ const yValues = pointsParsed.filter((_, index) => index % 2 !== 0); // Odd indices are y-coordinates
129
+
130
+ const minX = Math.min(...xValues);
131
+ const maxX = Math.max(...xValues);
132
+ const minY = Math.min(...yValues);
133
+ const maxY = Math.max(...yValues);
134
+
135
+ const rectX = minX;
136
+ const rectY = minY;
137
+ const rectWidth = maxX - minX;
138
+ const rectHeight = maxY - minY;
125
139
 
126
140
  return (
127
141
  <Group scaleX={scale} scaleY={scale}>
128
- {hoverOutlineColor && hovered && (
129
- <Line
130
- closed={true}
131
- draggable={false}
132
- points={pointsParsed}
133
- stroke={hoverOutlineColor}
134
- strokeWidth={2}
135
- listening={false}
142
+ {useHoveredStyle && (
143
+ <Rect
144
+ x={rectX}
145
+ y={rectY}
146
+ width={rectWidth}
147
+ height={rectHeight}
148
+ stroke={selected ? 'transparent' : hoverOutlineColor}
149
+ strokeWidth={strokeWidth}
136
150
  />
137
151
  )}
138
152
  <Line
@@ -143,8 +157,8 @@ class PolygonComponent extends React.Component {
143
157
  onClick={this.handleClick}
144
158
  onTap={this.handleClick}
145
159
  draggable={false}
146
- stroke={hovered && hoverOutlineColor ? 'transparent' : outlineColorParsed}
147
- strokeWidth={!(hovered && hoverOutlineColor) ? outlineWidth : 0}
160
+ stroke={useHoveredStyle && !selected ? 'transparent' : outlineColorParsed}
161
+ strokeWidth={useHoveredStyle && !selected ? 0 : outlineWidth}
148
162
  onMouseLeave={this.handleMouseLeave}
149
163
  onMouseEnter={this.handleMouseEnter}
150
164
  />
package/src/hotspot/rectangle.jsx CHANGED
@@ -105,17 +105,18 @@ class RectComponent extends React.Component {
105
105
  }
106
106
 
107
107
  const { hovered } = this.state;
108
+ const useHoveredStyle = hovered && hoverOutlineColor;
108
109
 
109
110
  return (
110
111
  <Group scaleX={scale} scaleY={scale}>
111
- {hoverOutlineColor && hovered && (
112
+ {useHoveredStyle && (
112
113
  <Rect
113
114
  x={x}
114
115
  y={y}
115
116
  width={width}
116
117
  height={height}
117
- stroke={hoverOutlineColor}
118
- strokeWidth={2}
118
+ stroke={selected ? 'transparent' : hoverOutlineColor}
119
+ strokeWidth={strokeWidth}
119
120
  listening={false}
120
121
  />
121
122
  )}
@@ -127,8 +128,8 @@ class RectComponent extends React.Component {
127
128
  onClick={this.handleClick}
128
129
  onTap={this.handleClick}
129
130
  draggable={false}
130
- stroke={hovered && hoverOutlineColor ? 'transparent' : outlineColorParsed}
131
- strokeWidth={!(hovered && hoverOutlineColor) ? outlineWidth : 0}
131
+ stroke={useHoveredStyle && !selected ? 'transparent' : outlineColorParsed}
132
+ strokeWidth={useHoveredStyle && !selected ? 0 : outlineWidth}
132
133
  onMouseLeave={this.handleMouseLeave}
133
134
  onMouseEnter={this.handleMouseEnter}
134
135
  x={x}