@pie-element/hotspot 11.1.0-next.0 → 11.1.0-next.17
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +6 -0
- package/configure/CHANGELOG.md +6 -0
- package/configure/package.json +3 -3
- package/controller/CHANGELOG.md +6 -0
- package/controller/package.json +2 -2
- package/lib/hotspot/index.js +2 -1
- package/lib/hotspot/index.js.map +1 -1
- package/package.json +6 -6
- package/src/hotspot/index.jsx +4 -9
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,12 @@
|
|
|
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
|
+
# [11.1.0-next.1](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot@11.1.0-next.0...@pie-element/hotspot@11.1.0-next.1) (2026-05-06)
|
|
7
|
+
|
|
8
|
+
### Bug Fixes
|
|
9
|
+
|
|
10
|
+
- bump libs and shared modules PIE-440, PIE-436, PIE-439, PIE-519, PIE-216 ([932fc12](https://github.com/pie-framework/pie-elements/commit/932fc12557ba56a737cee005be898d54d5e590ef))
|
|
11
|
+
|
|
6
12
|
## [11.0.1](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot@11.0.0...@pie-element/hotspot@11.0.1) (2026-04-28)
|
|
7
13
|
|
|
8
14
|
**Note:** Version bump only for package @pie-element/hotspot
|
package/configure/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,12 @@
|
|
|
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
|
+
# [10.1.0-next.1](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-configure@10.1.0-next.0...@pie-element/hotspot-configure@10.1.0-next.1) (2026-05-06)
|
|
7
|
+
|
|
8
|
+
### Bug Fixes
|
|
9
|
+
|
|
10
|
+
- bump libs and shared modules PIE-440, PIE-436, PIE-439, PIE-519, PIE-216 ([932fc12](https://github.com/pie-framework/pie-elements/commit/932fc12557ba56a737cee005be898d54d5e590ef))
|
|
11
|
+
|
|
6
12
|
## [10.0.1](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-configure@10.0.0...@pie-element/hotspot-configure@10.0.1) (2026-04-28)
|
|
7
13
|
|
|
8
14
|
**Note:** Version bump only for package @pie-element/hotspot-configure
|
package/configure/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pie-element/hotspot-configure",
|
|
3
3
|
"private": true,
|
|
4
|
-
"version": "10.1.0-next.
|
|
4
|
+
"version": "10.1.0-next.1",
|
|
5
5
|
"description": "",
|
|
6
6
|
"main": "lib/index.js",
|
|
7
7
|
"module": "src/index.js",
|
|
@@ -12,8 +12,8 @@
|
|
|
12
12
|
"@mui/icons-material": "^7.3.4",
|
|
13
13
|
"@mui/material": "^7.3.4",
|
|
14
14
|
"@pie-framework/pie-configure-events": "^1.3.0",
|
|
15
|
-
"@pie-lib/config-ui": "13.0.
|
|
16
|
-
"@pie-lib/editable-html-tip-tap": "2.
|
|
15
|
+
"@pie-lib/config-ui": "13.0.3",
|
|
16
|
+
"@pie-lib/editable-html-tip-tap": "2.1.1",
|
|
17
17
|
"debug": "^4.1.1",
|
|
18
18
|
"konva": "8.3.0",
|
|
19
19
|
"lodash-es": "^4.17.23",
|
package/controller/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,12 @@
|
|
|
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
|
+
# [8.1.0-next.1](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-controller@8.1.0-next.0...@pie-element/hotspot-controller@8.1.0-next.1) (2026-05-06)
|
|
7
|
+
|
|
8
|
+
### Bug Fixes
|
|
9
|
+
|
|
10
|
+
- bump libs and shared modules PIE-440, PIE-436, PIE-439, PIE-519, PIE-216 ([932fc12](https://github.com/pie-framework/pie-elements/commit/932fc12557ba56a737cee005be898d54d5e590ef))
|
|
11
|
+
|
|
6
12
|
## [8.0.1](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-controller@8.0.0...@pie-element/hotspot-controller@8.0.1) (2026-04-28)
|
|
7
13
|
|
|
8
14
|
**Note:** Version bump only for package @pie-element/hotspot-controller
|
package/controller/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pie-element/hotspot-controller",
|
|
3
3
|
"private": true,
|
|
4
|
-
"version": "8.1.0-next.
|
|
4
|
+
"version": "8.1.0-next.1",
|
|
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/controller-utils": "2.0.
|
|
14
|
+
"@pie-lib/controller-utils": "2.0.2-next.1",
|
|
15
15
|
"debug": "^4.1.1",
|
|
16
16
|
"lodash-es": "^4.17.23"
|
|
17
17
|
}
|
package/lib/hotspot/index.js
CHANGED
|
@@ -101,6 +101,7 @@ class HotspotComponent extends _react.default.Component {
|
|
|
101
101
|
showCorrect
|
|
102
102
|
} = this.state;
|
|
103
103
|
const isEvaluateMode = mode === 'evaluate';
|
|
104
|
+
const isGatherMode = mode === 'gather';
|
|
104
105
|
const showCorrectAnswerToggle = isEvaluateMode && !responseCorrect;
|
|
105
106
|
const showRationale = rationale && ((0, _renderUi.hasText)(rationale) || (0, _renderUi.hasMedia)(rationale));
|
|
106
107
|
const showTeacherInstructions = teacherInstructions && ((0, _renderUi.hasText)(teacherInstructions) || (0, _renderUi.hasMedia)(teacherInstructions));
|
|
@@ -132,7 +133,7 @@ class HotspotComponent extends _react.default.Component {
|
|
|
132
133
|
dimensions: dimensions,
|
|
133
134
|
imageUrl: imageUrl,
|
|
134
135
|
hotspotColor: hotspotColor,
|
|
135
|
-
hoverOutlineColor: hoverOutlineColor,
|
|
136
|
+
hoverOutlineColor: isGatherMode ? hoverOutlineColor : undefined,
|
|
136
137
|
selectedHotspotColor: selectedHotspotColor,
|
|
137
138
|
multipleCorrect: multipleCorrect,
|
|
138
139
|
outlineColor: outlineColor,
|
package/lib/hotspot/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["_react","_interopRequireDefault","require","_propTypes","_correctAnswerToggle","_renderUi","_styles","_container","StyledUiLayout","styled","UiLayout","color","text","backgroundColor","background","position","StyledCollapsible","Collapsible","theme","marginBottom","spacing","HotspotComponent","React","Component","constructor","props","_defineProperty2","default","showCorrect","state","setState","observer","scale","componentDidMount","MutationObserver","mutations","forEach","target","document","getElementById","style","cssText","zoom","substring","indexOf","lastIndexOf","zoomParsed","replace","newScale","parseFloat","observe","attributes","attributeFilter","componentWillUnmount","disconnect","render","session","model","disabled","extraCSSRules","imageUrl","prompt","mode","multipleCorrect","shapes","outlineColor","hotspotColor","hoverOutlineColor","selectedHotspotColor","dimensions","rationale","teacherInstructions","strokeWidth","responseCorrect","language","fontSizeFactor","autoplayAudioEnabled","customAudioButton","onSelectChoice","isEvaluateMode","showCorrectAnswerToggle","showRationale","hasText","hasMedia","showTeacherInstructions","createElement","id","labels","hidden","visible","PreviewPrompt","className","show","toggled","onToggle","bind","propTypes","PropTypes","object","isRequired","func","_default","exports"],"sources":["../../src/hotspot/index.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport CorrectAnswerToggle from '@pie-lib/correct-answer-toggle';\nimport { color, Collapsible, hasText, PreviewPrompt, UiLayout, hasMedia } from '@pie-lib/render-ui';\nimport { styled } from '@mui/material/styles';\n\nimport Container from './container';\n\nconst StyledUiLayout = styled(UiLayout)({\n color: color.text(),\n backgroundColor: color.background(),\n position: 'relative',\n});\n\nconst StyledCollapsible = styled(Collapsible)(({ theme }) => ({\n marginBottom: theme.spacing(2),\n}));\n\nclass HotspotComponent extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n showCorrect: false,\n observer: null,\n scale: 1,\n };\n }\n\n componentDidMount() {\n this.observer = new MutationObserver((mutations) => {\n mutations.forEach(() => {\n const target = document.getElementById('question-container')?.style?.cssText;\n const zoom = target?.substring(target.indexOf('--pie-zoom') + 11, target.lastIndexOf('%'));\n const zoomParsed = zoom?.replace(/\\s/g, '');\n\n if (zoomParsed) {\n const newScale = parseFloat(zoomParsed) / 100;\n\n if (newScale !== this.state.scale) {\n this.setState({\n scale: parseFloat(zoomParsed) / 100,\n });\n }\n } else if (!zoomParsed && this.state.scale !== 1) {\n this.setState({\n scale: 1,\n });\n }\n });\n });\n\n const target = document.getElementById('question-container');\n\n if (target) {\n this.observer.observe(target, { attributes: true, attributeFilter: ['style'] });\n }\n }\n\n componentWillUnmount() {\n this.observer?.disconnect();\n }\n\n onToggle = () => {\n const { showCorrect } = this.state;\n this.setState({ showCorrect: !showCorrect });\n };\n\n render() {\n const {\n session,\n model: {\n disabled,\n extraCSSRules,\n imageUrl,\n prompt,\n mode,\n multipleCorrect,\n shapes,\n outlineColor,\n hotspotColor,\n hoverOutlineColor,\n selectedHotspotColor,\n dimensions,\n rationale,\n teacherInstructions,\n strokeWidth,\n responseCorrect,\n language,\n fontSizeFactor,\n autoplayAudioEnabled,\n customAudioButton,\n },\n onSelectChoice,\n } = this.props;\n const { showCorrect } = this.state;\n const isEvaluateMode = mode === 'evaluate';\n const showCorrectAnswerToggle = isEvaluateMode && !responseCorrect;\n const showRationale = rationale && (hasText(rationale) || hasMedia(rationale));\n const showTeacherInstructions =\n teacherInstructions && (hasText(teacherInstructions) || hasMedia(teacherInstructions));\n\n return (\n <StyledUiLayout\n extraCSSRules={extraCSSRules}\n id={'main-container'}\n fontSizeFactor={fontSizeFactor}\n >\n {showTeacherInstructions && (\n <StyledCollapsible\n labels={{ hidden: 'Show Teacher Instructions', visible: 'Hide Teacher Instructions' }}\n >\n <PreviewPrompt className=\"prompt\" prompt={teacherInstructions} />\n </StyledCollapsible>\n )}\n\n {prompt && (\n <PreviewPrompt\n className=\"prompt\"\n prompt={prompt}\n autoplayAudioEnabled={autoplayAudioEnabled}\n customAudioButton={customAudioButton}\n />\n )}\n\n {showCorrectAnswerToggle && (\n <CorrectAnswerToggle\n show={showCorrectAnswerToggle}\n toggled={showCorrect}\n onToggle={this.onToggle.bind(this)}\n language={language}\n />\n )}\n\n {imageUrl ? (\n <Container\n isEvaluateMode={isEvaluateMode}\n session={session}\n dimensions={dimensions}\n imageUrl={imageUrl}\n hotspotColor={hotspotColor}\n hoverOutlineColor={hoverOutlineColor}\n selectedHotspotColor={selectedHotspotColor}\n multipleCorrect={multipleCorrect}\n outlineColor={outlineColor}\n onSelectChoice={onSelectChoice}\n shapes={shapes}\n disabled={disabled}\n strokeWidth={strokeWidth}\n scale={this.state.scale}\n showCorrect={showCorrect}\n />\n ) : null}\n\n {showRationale && (\n <Collapsible labels={{ hidden: 'Show Rationale', visible: 'Hide Rationale' }}>\n <PreviewPrompt className=\"prompt\" prompt={rationale} />\n </Collapsible>\n )}\n </StyledUiLayout>\n );\n }\n}\n\nHotspotComponent.propTypes = {\n model: PropTypes.object.isRequired,\n onSelectChoice: PropTypes.func.isRequired,\n session: PropTypes.object.isRequired,\n};\n\nexport default HotspotComponent;\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"index.js","names":["_react","_interopRequireDefault","require","_propTypes","_correctAnswerToggle","_renderUi","_styles","_container","StyledUiLayout","styled","UiLayout","color","text","backgroundColor","background","position","StyledCollapsible","Collapsible","theme","marginBottom","spacing","HotspotComponent","React","Component","constructor","props","_defineProperty2","default","showCorrect","state","setState","observer","scale","componentDidMount","MutationObserver","mutations","forEach","target","document","getElementById","style","cssText","zoom","substring","indexOf","lastIndexOf","zoomParsed","replace","newScale","parseFloat","observe","attributes","attributeFilter","componentWillUnmount","disconnect","render","session","model","disabled","extraCSSRules","imageUrl","prompt","mode","multipleCorrect","shapes","outlineColor","hotspotColor","hoverOutlineColor","selectedHotspotColor","dimensions","rationale","teacherInstructions","strokeWidth","responseCorrect","language","fontSizeFactor","autoplayAudioEnabled","customAudioButton","onSelectChoice","isEvaluateMode","isGatherMode","showCorrectAnswerToggle","showRationale","hasText","hasMedia","showTeacherInstructions","createElement","id","labels","hidden","visible","PreviewPrompt","className","show","toggled","onToggle","bind","undefined","propTypes","PropTypes","object","isRequired","func","_default","exports"],"sources":["../../src/hotspot/index.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport CorrectAnswerToggle from '@pie-lib/correct-answer-toggle';\nimport { color, Collapsible, hasText, PreviewPrompt, UiLayout, hasMedia } from '@pie-lib/render-ui';\nimport { styled } from '@mui/material/styles';\n\nimport Container from './container';\n\nconst StyledUiLayout = styled(UiLayout)({\n color: color.text(),\n backgroundColor: color.background(),\n position: 'relative',\n});\n\nconst StyledCollapsible = styled(Collapsible)(({ theme }) => ({\n marginBottom: theme.spacing(2),\n}));\n\nclass HotspotComponent extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n showCorrect: false,\n observer: null,\n scale: 1,\n };\n }\n\n componentDidMount() {\n this.observer = new MutationObserver((mutations) => {\n mutations.forEach(() => {\n const target = document.getElementById('question-container')?.style?.cssText;\n const zoom = target?.substring(target.indexOf('--pie-zoom') + 11, target.lastIndexOf('%'));\n const zoomParsed = zoom?.replace(/\\s/g, '');\n\n if (zoomParsed) {\n const newScale = parseFloat(zoomParsed) / 100;\n\n if (newScale !== this.state.scale) {\n this.setState({\n scale: parseFloat(zoomParsed) / 100,\n });\n }\n } else if (!zoomParsed && this.state.scale !== 1) {\n this.setState({\n scale: 1,\n });\n }\n });\n });\n\n const target = document.getElementById('question-container');\n\n if (target) {\n this.observer.observe(target, { attributes: true, attributeFilter: ['style'] });\n }\n }\n\n componentWillUnmount() {\n this.observer?.disconnect();\n }\n\n onToggle = () => {\n const { showCorrect } = this.state;\n this.setState({ showCorrect: !showCorrect });\n };\n\n render() {\n const {\n session,\n model: {\n disabled,\n extraCSSRules,\n imageUrl,\n prompt,\n mode,\n multipleCorrect,\n shapes,\n outlineColor,\n hotspotColor,\n hoverOutlineColor,\n selectedHotspotColor,\n dimensions,\n rationale,\n teacherInstructions,\n strokeWidth,\n responseCorrect,\n language,\n fontSizeFactor,\n autoplayAudioEnabled,\n customAudioButton,\n },\n onSelectChoice,\n } = this.props;\n const { showCorrect } = this.state;\n const isEvaluateMode = mode === 'evaluate';\n const isGatherMode = mode === 'gather';\n const showCorrectAnswerToggle = isEvaluateMode && !responseCorrect;\n const showRationale = rationale && (hasText(rationale) || hasMedia(rationale));\n const showTeacherInstructions =\n teacherInstructions && (hasText(teacherInstructions) || hasMedia(teacherInstructions));\n\n return (\n <StyledUiLayout extraCSSRules={extraCSSRules} id={'main-container'} fontSizeFactor={fontSizeFactor}>\n {showTeacherInstructions && (\n <StyledCollapsible labels={{ hidden: 'Show Teacher Instructions', visible: 'Hide Teacher Instructions' }}>\n <PreviewPrompt className=\"prompt\" prompt={teacherInstructions} />\n </StyledCollapsible>\n )}\n\n {prompt && (\n <PreviewPrompt\n className=\"prompt\"\n prompt={prompt}\n autoplayAudioEnabled={autoplayAudioEnabled}\n customAudioButton={customAudioButton}\n />\n )}\n\n {showCorrectAnswerToggle && (\n <CorrectAnswerToggle\n show={showCorrectAnswerToggle}\n toggled={showCorrect}\n onToggle={this.onToggle.bind(this)}\n language={language}\n />\n )}\n\n {imageUrl ? (\n <Container\n isEvaluateMode={isEvaluateMode}\n session={session}\n dimensions={dimensions}\n imageUrl={imageUrl}\n hotspotColor={hotspotColor}\n hoverOutlineColor={isGatherMode ? hoverOutlineColor : undefined}\n selectedHotspotColor={selectedHotspotColor}\n multipleCorrect={multipleCorrect}\n outlineColor={outlineColor}\n onSelectChoice={onSelectChoice}\n shapes={shapes}\n disabled={disabled}\n strokeWidth={strokeWidth}\n scale={this.state.scale}\n showCorrect={showCorrect}\n />\n ) : null}\n\n {showRationale && (\n <Collapsible labels={{ hidden: 'Show Rationale', visible: 'Hide Rationale' }}>\n <PreviewPrompt className=\"prompt\" prompt={rationale} />\n </Collapsible>\n )}\n </StyledUiLayout>\n );\n }\n}\n\nHotspotComponent.propTypes = {\n model: PropTypes.object.isRequired,\n onSelectChoice: PropTypes.func.isRequired,\n session: PropTypes.object.isRequired,\n};\n\nexport default HotspotComponent;\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.0-next.
|
|
4
|
+
"version": "11.1.0-next.17+f9f875e86",
|
|
5
5
|
"description": "",
|
|
6
6
|
"publishConfig": {
|
|
7
7
|
"access": "public"
|
|
@@ -12,10 +12,10 @@
|
|
|
12
12
|
"@mui/icons-material": "^7.3.4",
|
|
13
13
|
"@mui/material": "^7.3.4",
|
|
14
14
|
"@pie-framework/pie-player-events": "^0.1.0",
|
|
15
|
-
"@pie-lib/correct-answer-toggle": "4.0.
|
|
16
|
-
"@pie-lib/math-rendering": "5.0.
|
|
17
|
-
"@pie-lib/render-ui": "6.0.
|
|
18
|
-
"@pie-lib/test-utils": "2.0.
|
|
15
|
+
"@pie-lib/correct-answer-toggle": "4.0.2-next.2",
|
|
16
|
+
"@pie-lib/math-rendering": "5.0.2-next.1",
|
|
17
|
+
"@pie-lib/render-ui": "6.1.0-next.2",
|
|
18
|
+
"@pie-lib/test-utils": "2.0.2-next.1",
|
|
19
19
|
"konva": "8.3.0",
|
|
20
20
|
"prop-types": "^15.8.1",
|
|
21
21
|
"react": "18.3.1",
|
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
},
|
|
25
25
|
"author": "pie framework developers",
|
|
26
26
|
"license": "ISC",
|
|
27
|
-
"gitHead": "
|
|
27
|
+
"gitHead": "f9f875e86a2179314bd6128f1fc4002a1c7ead93",
|
|
28
28
|
"scripts": {
|
|
29
29
|
"postpublish": "../../scripts/postpublish"
|
|
30
30
|
},
|
package/src/hotspot/index.jsx
CHANGED
|
@@ -94,21 +94,16 @@ class HotspotComponent extends React.Component {
|
|
|
94
94
|
} = this.props;
|
|
95
95
|
const { showCorrect } = this.state;
|
|
96
96
|
const isEvaluateMode = mode === 'evaluate';
|
|
97
|
+
const isGatherMode = mode === 'gather';
|
|
97
98
|
const showCorrectAnswerToggle = isEvaluateMode && !responseCorrect;
|
|
98
99
|
const showRationale = rationale && (hasText(rationale) || hasMedia(rationale));
|
|
99
100
|
const showTeacherInstructions =
|
|
100
101
|
teacherInstructions && (hasText(teacherInstructions) || hasMedia(teacherInstructions));
|
|
101
102
|
|
|
102
103
|
return (
|
|
103
|
-
<StyledUiLayout
|
|
104
|
-
extraCSSRules={extraCSSRules}
|
|
105
|
-
id={'main-container'}
|
|
106
|
-
fontSizeFactor={fontSizeFactor}
|
|
107
|
-
>
|
|
104
|
+
<StyledUiLayout extraCSSRules={extraCSSRules} id={'main-container'} fontSizeFactor={fontSizeFactor}>
|
|
108
105
|
{showTeacherInstructions && (
|
|
109
|
-
<StyledCollapsible
|
|
110
|
-
labels={{ hidden: 'Show Teacher Instructions', visible: 'Hide Teacher Instructions' }}
|
|
111
|
-
>
|
|
106
|
+
<StyledCollapsible labels={{ hidden: 'Show Teacher Instructions', visible: 'Hide Teacher Instructions' }}>
|
|
112
107
|
<PreviewPrompt className="prompt" prompt={teacherInstructions} />
|
|
113
108
|
</StyledCollapsible>
|
|
114
109
|
)}
|
|
@@ -138,7 +133,7 @@ class HotspotComponent extends React.Component {
|
|
|
138
133
|
dimensions={dimensions}
|
|
139
134
|
imageUrl={imageUrl}
|
|
140
135
|
hotspotColor={hotspotColor}
|
|
141
|
-
hoverOutlineColor={hoverOutlineColor}
|
|
136
|
+
hoverOutlineColor={isGatherMode ? hoverOutlineColor : undefined}
|
|
142
137
|
selectedHotspotColor={selectedHotspotColor}
|
|
143
138
|
multipleCorrect={multipleCorrect}
|
|
144
139
|
outlineColor={outlineColor}
|