@pie-element/hotspot 11.3.2-beta.3 → 11.3.2
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 +64 -34
- package/configure/CHANGELOG.md +46 -31
- package/configure/package.json +3 -3
- package/controller/CHANGELOG.md +10 -42
- package/controller/package.json +1 -1
- package/lib/hotspot/circle.js +19 -0
- package/lib/hotspot/circle.js.map +1 -1
- package/lib/hotspot/polygon.js +19 -0
- package/lib/hotspot/polygon.js.map +1 -1
- package/lib/hotspot/rectangle.js +19 -0
- package/lib/hotspot/rectangle.js.map +1 -1
- package/lib/index.js +2 -2
- package/lib/index.js.map +1 -1
- package/package.json +5 -5
- package/src/hotspot/circle.jsx +28 -1
- package/src/hotspot/polygon.jsx +28 -1
- package/src/hotspot/rectangle.jsx +28 -1
- package/src/index.js +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -3,73 +3,103 @@
|
|
|
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.3.2
|
|
6
|
+
## [11.3.2](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot@11.3.1...@pie-element/hotspot@11.3.2) (2026-09-04)
|
|
7
7
|
|
|
8
|
-
|
|
8
|
+
### Bug Fixes
|
|
9
|
+
|
|
10
|
+
- bump libs PIE-978, PIE-980 ([96489ba](https://github.com/pie-framework/pie-elements/commit/96489ba3c220604f21c3ce4500d79f4389266e9e))
|
|
9
11
|
|
|
10
|
-
## [11.3.
|
|
12
|
+
## [11.3.1](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot@11.3.0...@pie-element/hotspot@11.3.1) (2026-08-26)
|
|
11
13
|
|
|
12
14
|
**Note:** Version bump only for package @pie-element/hotspot
|
|
13
15
|
|
|
14
|
-
# [11.
|
|
16
|
+
# [11.3.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot@11.2.3...@pie-element/hotspot@11.3.0) (2026-08-21)
|
|
15
17
|
|
|
16
|
-
|
|
18
|
+
### Bug Fixes
|
|
17
19
|
|
|
18
|
-
|
|
20
|
+
- move [@pie-lib](https://github.com/pie-lib) deps back to latest, off next prereleases PIE-927 ([a53e012](https://github.com/pie-framework/pie-elements/commit/a53e0127eb4ac95ece54e1e2bd669ae4974f4251))
|
|
21
|
+
- read the prompt container by class, not by the id pie-lib removed PIE-927 ([aaaf6c2](https://github.com/pie-framework/pie-elements/commit/aaaf6c2f189de3b39f9de85969aeb2e50376c548))
|
|
19
22
|
|
|
20
|
-
|
|
23
|
+
### Features
|
|
21
24
|
|
|
22
|
-
|
|
25
|
+
- bump libs PIE-856, PIE-681, PIE-927 ([cb26d7a](https://github.com/pie-framework/pie-elements/commit/cb26d7afa6c99522533c321d5ff8ce3148a66e9e))
|
|
23
26
|
|
|
24
|
-
|
|
27
|
+
## [11.2.3](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot@11.2.2...@pie-element/hotspot@11.2.3) (2026-08-19)
|
|
25
28
|
|
|
26
|
-
|
|
29
|
+
### Bug Fixes
|
|
27
30
|
|
|
28
|
-
|
|
31
|
+
- bump libs and shared modules PIE-681, PIE-708 ([08af8b5](https://github.com/pie-framework/pie-elements/commit/08af8b5802aecc8ee5454a1b6d60277d7ec94204))
|
|
29
32
|
|
|
30
|
-
|
|
33
|
+
## [11.2.2](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot@11.2.0...@pie-element/hotspot@11.2.2) (2026-08-13)
|
|
31
34
|
|
|
32
|
-
|
|
35
|
+
### Bug Fixes
|
|
33
36
|
|
|
34
|
-
|
|
37
|
+
- **hotspot:** render hovered shape on top of other shapes PIE-900 ([23dfd21](https://github.com/pie-framework/pie-elements/commit/23dfd21a8c7b8909f2f494f47945831de79f40cc))
|
|
35
38
|
|
|
36
|
-
|
|
39
|
+
## [11.2.1](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot@11.1.7...@pie-element/hotspot@11.2.1) (2026-08-11)
|
|
37
40
|
|
|
38
|
-
|
|
41
|
+
### Bug Fixes
|
|
39
42
|
|
|
40
|
-
**
|
|
43
|
+
- **hotspot:** improve hover effect handling PIE-783 ([b27c51f](https://github.com/pie-framework/pie-elements/commit/b27c51f77eb41f6a3aee1e87c85ea7c8769b542f))
|
|
41
44
|
|
|
42
|
-
|
|
45
|
+
### Features
|
|
43
46
|
|
|
44
|
-
**
|
|
47
|
+
- **hotspot:** add ariaLabel to shapes for improved accessibility PIE-639 ([8791de3](https://github.com/pie-framework/pie-elements/commit/8791de36640adc85a8cf43d095a092bce6d7e7a1))
|
|
48
|
+
- **hotspot:** enhance focus handling and default hover outline color PIE-637 PIE-640 ([249d6e9](https://github.com/pie-framework/pie-elements/commit/249d6e9ae2da47a008ea0b5d73f34b64fd451795))
|
|
45
49
|
|
|
46
|
-
# [11.
|
|
50
|
+
# [11.2.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot@11.1.7...@pie-element/hotspot@11.2.0) (2026-07-31)
|
|
47
51
|
|
|
48
|
-
|
|
52
|
+
### Bug Fixes
|
|
49
53
|
|
|
50
|
-
|
|
54
|
+
- **hotspot:** improve hover effect handling PIE-783 ([b27c51f](https://github.com/pie-framework/pie-elements/commit/b27c51f77eb41f6a3aee1e87c85ea7c8769b542f))
|
|
51
55
|
|
|
52
|
-
|
|
56
|
+
### Features
|
|
53
57
|
|
|
54
|
-
|
|
58
|
+
- **hotspot:** add ariaLabel to shapes for improved accessibility PIE-639 ([8791de3](https://github.com/pie-framework/pie-elements/commit/8791de36640adc85a8cf43d095a092bce6d7e7a1))
|
|
59
|
+
- **hotspot:** enhance focus handling and default hover outline color PIE-637 PIE-640 ([249d6e9](https://github.com/pie-framework/pie-elements/commit/249d6e9ae2da47a008ea0b5d73f34b64fd451795))
|
|
60
|
+
|
|
61
|
+
## [11.1.7](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot@11.1.6...@pie-element/hotspot@11.1.7) (2026-07-08)
|
|
55
62
|
|
|
56
63
|
### Bug Fixes
|
|
57
64
|
|
|
58
65
|
- bump libs & shared modules PIE-706, PIE-702, PIE-679, PIE-698 ([5b1a8c4](https://github.com/pie-framework/pie-elements/commit/5b1a8c4c3eba2126fc43d78fd0187e7cd11d5424))
|
|
59
|
-
- bump shared modules and libs PIE-600, PIE-602 ([ce99f6a](https://github.com/pie-framework/pie-elements/commit/ce99f6af50cb855b666a6df9340f9f5445fde4c4))
|
|
60
|
-
- bump shared modules and libs PIE-661 PIE-664 PIE-683 PIE-666 PIE-656 PIE-657 PIE-658 PIE-659 PIE-670 ([ebd6be4](https://github.com/pie-framework/pie-elements/commit/ebd6be4fd48fca41ad4c4908f606b25334731aed))
|
|
61
|
-
- bump shared modules and libs PIE-674, PIE-662, PIE-705, PIE-674, PIE-963 ([78a3f64](https://github.com/pie-framework/pie-elements/commit/78a3f64652c9581c61bd4159f3210fc1e32d8bcf))
|
|
62
|
-
- bump shared modules and libs PIE-695, PIE-697, PIE-699, PIE-680, PIE-714, PIE-665, PIE-656 ([4b76ae7](https://github.com/pie-framework/pie-elements/commit/4b76ae75d1c5ea6d55f7c6fb53f299dfcbda2b1f))
|
|
63
|
-
- bump shared modules and libsPIE-603, PIE-604, PIE-663, PIE-662, PIE-678 ([e61c7a7](https://github.com/pie-framework/pie-elements/commit/e61c7a7d23744586337dfbb17a18ebfc656c202f))
|
|
64
|
-
- handle webcomponent lifecycle on every element that misses it PIE-703 ([9d5923f](https://github.com/pie-framework/pie-elements/commit/9d5923f973f0471e1e8f69ad4309cfc63d980d93))
|
|
65
|
-
- **hotspot:** improve hover effect handling PIE-783 ([b27c51f](https://github.com/pie-framework/pie-elements/commit/b27c51f77eb41f6a3aee1e87c85ea7c8769b542f))
|
|
66
66
|
- made sure math is rendered on mount and on updates in hotspot and text-select [PIE-718 ([fc55638](https://github.com/pie-framework/pie-elements/commit/fc55638a3b2cd7692c5f7212952d1d7baf36ff98))
|
|
67
|
+
|
|
68
|
+
## [11.1.6](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot@11.1.5...@pie-element/hotspot@11.1.6) (2026-07-02)
|
|
69
|
+
|
|
70
|
+
### Bug Fixes
|
|
71
|
+
|
|
72
|
+
- bump shared modules and libs PIE-695, PIE-697, PIE-699, PIE-680, PIE-714, PIE-665, PIE-656 ([4b76ae7](https://github.com/pie-framework/pie-elements/commit/4b76ae75d1c5ea6d55f7c6fb53f299dfcbda2b1f))
|
|
67
73
|
- sync libs versions ([48b5be9](https://github.com/pie-framework/pie-elements/commit/48b5be9559eb5b5235ca05f51c5f0161032a7041))
|
|
68
74
|
|
|
69
|
-
|
|
75
|
+
## [11.1.5](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot@11.1.4...@pie-element/hotspot@11.1.5) (2026-06-22)
|
|
70
76
|
|
|
71
|
-
|
|
72
|
-
|
|
77
|
+
### Bug Fixes
|
|
78
|
+
|
|
79
|
+
- bump shared modules and libs PIE-674, PIE-662, PIE-705, PIE-674, PIE-963 ([78a3f64](https://github.com/pie-framework/pie-elements/commit/78a3f64652c9581c61bd4159f3210fc1e32d8bcf))
|
|
80
|
+
- handle webcomponent lifecycle on every element that misses it PIE-703 ([9d5923f](https://github.com/pie-framework/pie-elements/commit/9d5923f973f0471e1e8f69ad4309cfc63d980d93))
|
|
81
|
+
|
|
82
|
+
## [11.1.4](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot@11.1.3...@pie-element/hotspot@11.1.4) (2026-06-17)
|
|
83
|
+
|
|
84
|
+
### Bug Fixes
|
|
85
|
+
|
|
86
|
+
- bump shared modules and libs PIE-661 PIE-664 PIE-683 PIE-666 PIE-656 PIE-657 PIE-658 PIE-659 PIE-670 ([ebd6be4](https://github.com/pie-framework/pie-elements/commit/ebd6be4fd48fca41ad4c4908f606b25334731aed))
|
|
87
|
+
|
|
88
|
+
## [11.1.3](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot@11.1.2...@pie-element/hotspot@11.1.3) (2026-06-12)
|
|
89
|
+
|
|
90
|
+
### Bug Fixes
|
|
91
|
+
|
|
92
|
+
- bump shared modules and libsPIE-603, PIE-604, PIE-663, PIE-662, PIE-678 ([e61c7a7](https://github.com/pie-framework/pie-elements/commit/e61c7a7d23744586337dfbb17a18ebfc656c202f))
|
|
93
|
+
|
|
94
|
+
## [11.1.2](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot@11.1.1...@pie-element/hotspot@11.1.2) (2026-06-04)
|
|
95
|
+
|
|
96
|
+
### Bug Fixes
|
|
97
|
+
|
|
98
|
+
- bump shared modules and libs PIE-600, PIE-602 ([ce99f6a](https://github.com/pie-framework/pie-elements/commit/ce99f6af50cb855b666a6df9340f9f5445fde4c4))
|
|
99
|
+
|
|
100
|
+
## [11.1.1](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot@11.1.0...@pie-element/hotspot@11.1.1) (2026-05-21)
|
|
101
|
+
|
|
102
|
+
**Note:** Version bump only for package @pie-element/hotspot
|
|
73
103
|
|
|
74
104
|
# [11.1.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot@11.1.0-next.1...@pie-element/hotspot@11.1.0) (2026-05-21)
|
|
75
105
|
|
package/configure/CHANGELOG.md
CHANGED
|
@@ -3,70 +3,85 @@
|
|
|
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
|
-
|
|
6
|
+
## [10.3.2](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-configure@10.3.1...@pie-element/hotspot-configure@10.3.2) (2026-09-04)
|
|
7
7
|
|
|
8
|
-
|
|
8
|
+
### Bug Fixes
|
|
9
|
+
|
|
10
|
+
- bump libs PIE-978, PIE-980 ([96489ba](https://github.com/pie-framework/pie-elements/commit/96489ba3c220604f21c3ce4500d79f4389266e9e))
|
|
9
11
|
|
|
10
|
-
|
|
12
|
+
## [10.3.1](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-configure@10.3.0...@pie-element/hotspot-configure@10.3.1) (2026-08-26)
|
|
11
13
|
|
|
12
14
|
**Note:** Version bump only for package @pie-element/hotspot-configure
|
|
13
15
|
|
|
14
|
-
# [10.
|
|
16
|
+
# [10.3.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-configure@10.2.3...@pie-element/hotspot-configure@10.3.0) (2026-08-21)
|
|
15
17
|
|
|
16
|
-
|
|
18
|
+
### Features
|
|
17
19
|
|
|
18
|
-
|
|
20
|
+
- bump libs PIE-856, PIE-681, PIE-927 ([cb26d7a](https://github.com/pie-framework/pie-elements/commit/cb26d7afa6c99522533c321d5ff8ce3148a66e9e))
|
|
19
21
|
|
|
20
|
-
|
|
22
|
+
## [10.2.3](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-configure@10.2.2...@pie-element/hotspot-configure@10.2.3) (2026-08-19)
|
|
21
23
|
|
|
22
|
-
|
|
24
|
+
### Bug Fixes
|
|
23
25
|
|
|
24
|
-
|
|
26
|
+
- bump libs and shared modules PIE-681, PIE-708 ([08af8b5](https://github.com/pie-framework/pie-elements/commit/08af8b5802aecc8ee5454a1b6d60277d7ec94204))
|
|
25
27
|
|
|
26
|
-
|
|
28
|
+
## [10.2.2](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-configure@10.2.0...@pie-element/hotspot-configure@10.2.2) (2026-08-13)
|
|
27
29
|
|
|
28
30
|
**Note:** Version bump only for package @pie-element/hotspot-configure
|
|
29
31
|
|
|
30
|
-
|
|
32
|
+
## [10.2.1](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-configure@10.1.7...@pie-element/hotspot-configure@10.2.1) (2026-08-11)
|
|
31
33
|
|
|
32
|
-
|
|
34
|
+
### Features
|
|
33
35
|
|
|
34
|
-
|
|
36
|
+
- **hotspot:** enhance focus handling and default hover outline color PIE-637 PIE-640 ([249d6e9](https://github.com/pie-framework/pie-elements/commit/249d6e9ae2da47a008ea0b5d73f34b64fd451795))
|
|
35
37
|
|
|
36
|
-
|
|
38
|
+
# [10.2.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-configure@10.1.7...@pie-element/hotspot-configure@10.2.0) (2026-07-31)
|
|
37
39
|
|
|
38
|
-
|
|
40
|
+
### Features
|
|
39
41
|
|
|
40
|
-
**
|
|
42
|
+
- **hotspot:** enhance focus handling and default hover outline color PIE-637 PIE-640 ([249d6e9](https://github.com/pie-framework/pie-elements/commit/249d6e9ae2da47a008ea0b5d73f34b64fd451795))
|
|
41
43
|
|
|
42
|
-
|
|
44
|
+
## [10.1.7](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-configure@10.1.6...@pie-element/hotspot-configure@10.1.7) (2026-07-08)
|
|
43
45
|
|
|
44
|
-
|
|
46
|
+
### Bug Fixes
|
|
45
47
|
|
|
46
|
-
|
|
48
|
+
- bump libs & shared modules PIE-706, PIE-702, PIE-679, PIE-698 ([5b1a8c4](https://github.com/pie-framework/pie-elements/commit/5b1a8c4c3eba2126fc43d78fd0187e7cd11d5424))
|
|
47
49
|
|
|
48
|
-
|
|
50
|
+
## [10.1.6](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-configure@10.1.5...@pie-element/hotspot-configure@10.1.6) (2026-07-02)
|
|
49
51
|
|
|
50
|
-
|
|
52
|
+
### Bug Fixes
|
|
51
53
|
|
|
52
|
-
|
|
54
|
+
- bump shared modules and libs PIE-695, PIE-697, PIE-699, PIE-680, PIE-714, PIE-665, PIE-656 ([4b76ae7](https://github.com/pie-framework/pie-elements/commit/4b76ae75d1c5ea6d55f7c6fb53f299dfcbda2b1f))
|
|
55
|
+
- sync libs versions ([48b5be9](https://github.com/pie-framework/pie-elements/commit/48b5be9559eb5b5235ca05f51c5f0161032a7041))
|
|
53
56
|
|
|
54
|
-
|
|
57
|
+
## [10.1.5](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-configure@10.1.4...@pie-element/hotspot-configure@10.1.5) (2026-06-22)
|
|
55
58
|
|
|
56
59
|
### Bug Fixes
|
|
57
60
|
|
|
58
|
-
- bump libs & shared modules PIE-706, PIE-702, PIE-679, PIE-698 ([5b1a8c4](https://github.com/pie-framework/pie-elements/commit/5b1a8c4c3eba2126fc43d78fd0187e7cd11d5424))
|
|
59
|
-
- bump shared modules and libs PIE-600, PIE-602 ([ce99f6a](https://github.com/pie-framework/pie-elements/commit/ce99f6af50cb855b666a6df9340f9f5445fde4c4))
|
|
60
|
-
- bump shared modules and libs PIE-661 PIE-664 PIE-683 PIE-666 PIE-656 PIE-657 PIE-658 PIE-659 PIE-670 ([ebd6be4](https://github.com/pie-framework/pie-elements/commit/ebd6be4fd48fca41ad4c4908f606b25334731aed))
|
|
61
61
|
- bump shared modules and libs PIE-674, PIE-662, PIE-705, PIE-674, PIE-963 ([78a3f64](https://github.com/pie-framework/pie-elements/commit/78a3f64652c9581c61bd4159f3210fc1e32d8bcf))
|
|
62
|
-
- bump shared modules and libs PIE-695, PIE-697, PIE-699, PIE-680, PIE-714, PIE-665, PIE-656 ([4b76ae7](https://github.com/pie-framework/pie-elements/commit/4b76ae75d1c5ea6d55f7c6fb53f299dfcbda2b1f))
|
|
63
|
-
- bump shared modules and libsPIE-603, PIE-604, PIE-663, PIE-662, PIE-678 ([e61c7a7](https://github.com/pie-framework/pie-elements/commit/e61c7a7d23744586337dfbb17a18ebfc656c202f))
|
|
64
62
|
- handle webcomponent lifecycle on every element that misses it PIE-703 ([9d5923f](https://github.com/pie-framework/pie-elements/commit/9d5923f973f0471e1e8f69ad4309cfc63d980d93))
|
|
65
|
-
- sync libs versions ([48b5be9](https://github.com/pie-framework/pie-elements/commit/48b5be9559eb5b5235ca05f51c5f0161032a7041))
|
|
66
63
|
|
|
67
|
-
|
|
64
|
+
## [10.1.4](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-configure@10.1.3...@pie-element/hotspot-configure@10.1.4) (2026-06-17)
|
|
68
65
|
|
|
69
|
-
|
|
66
|
+
### Bug Fixes
|
|
67
|
+
|
|
68
|
+
- bump shared modules and libs PIE-661 PIE-664 PIE-683 PIE-666 PIE-656 PIE-657 PIE-658 PIE-659 PIE-670 ([ebd6be4](https://github.com/pie-framework/pie-elements/commit/ebd6be4fd48fca41ad4c4908f606b25334731aed))
|
|
69
|
+
|
|
70
|
+
## [10.1.3](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-configure@10.1.2...@pie-element/hotspot-configure@10.1.3) (2026-06-12)
|
|
71
|
+
|
|
72
|
+
### Bug Fixes
|
|
73
|
+
|
|
74
|
+
- bump shared modules and libsPIE-603, PIE-604, PIE-663, PIE-662, PIE-678 ([e61c7a7](https://github.com/pie-framework/pie-elements/commit/e61c7a7d23744586337dfbb17a18ebfc656c202f))
|
|
75
|
+
|
|
76
|
+
## [10.1.2](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-configure@10.1.1...@pie-element/hotspot-configure@10.1.2) (2026-06-04)
|
|
77
|
+
|
|
78
|
+
### Bug Fixes
|
|
79
|
+
|
|
80
|
+
- bump shared modules and libs PIE-600, PIE-602 ([ce99f6a](https://github.com/pie-framework/pie-elements/commit/ce99f6af50cb855b666a6df9340f9f5445fde4c4))
|
|
81
|
+
|
|
82
|
+
## [10.1.1](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-configure@10.1.0...@pie-element/hotspot-configure@10.1.1) (2026-05-21)
|
|
83
|
+
|
|
84
|
+
**Note:** Version bump only for package @pie-element/hotspot-configure
|
|
70
85
|
|
|
71
86
|
# [10.1.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-configure@10.1.0-next.1...@pie-element/hotspot-configure@10.1.0) (2026-05-21)
|
|
72
87
|
|
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.
|
|
4
|
+
"version": "10.3.2",
|
|
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.
|
|
16
|
-
"@pie-lib/editable-html-tip-tap": "2.
|
|
15
|
+
"@pie-lib/config-ui": "13.0.19",
|
|
16
|
+
"@pie-lib/editable-html-tip-tap": "2.1.17",
|
|
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,63 +3,31 @@
|
|
|
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
|
-
|
|
6
|
+
## [8.2.2](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-controller@8.2.0...@pie-element/hotspot-controller@8.2.2) (2026-08-13)
|
|
7
7
|
|
|
8
8
|
**Note:** Version bump only for package @pie-element/hotspot-controller
|
|
9
9
|
|
|
10
|
-
|
|
10
|
+
## [8.2.1](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-controller@8.1.2...@pie-element/hotspot-controller@8.2.1) (2026-08-11)
|
|
11
11
|
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
# [8.4.0-beta.7](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-controller@8.4.0-beta.6...@pie-element/hotspot-controller@8.4.0-beta.7) (2026-08-20)
|
|
15
|
-
|
|
16
|
-
**Note:** Version bump only for package @pie-element/hotspot-controller
|
|
17
|
-
|
|
18
|
-
# [8.4.0-beta.6](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-controller@8.4.0-beta.5...@pie-element/hotspot-controller@8.4.0-beta.6) (2026-08-14)
|
|
19
|
-
|
|
20
|
-
**Note:** Version bump only for package @pie-element/hotspot-controller
|
|
21
|
-
|
|
22
|
-
# [8.4.0-beta.5](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-controller@8.4.0-beta.4...@pie-element/hotspot-controller@8.4.0-beta.5) (2026-08-11)
|
|
23
|
-
|
|
24
|
-
**Note:** Version bump only for package @pie-element/hotspot-controller
|
|
25
|
-
|
|
26
|
-
# [8.4.0-beta.4](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-controller@8.4.0-beta.3...@pie-element/hotspot-controller@8.4.0-beta.4) (2026-08-11)
|
|
27
|
-
|
|
28
|
-
**Note:** Version bump only for package @pie-element/hotspot-controller
|
|
29
|
-
|
|
30
|
-
# [8.4.0-beta.3](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-controller@8.4.0-beta.2...@pie-element/hotspot-controller@8.4.0-beta.3) (2026-08-11)
|
|
31
|
-
|
|
32
|
-
**Note:** Version bump only for package @pie-element/hotspot-controller
|
|
33
|
-
|
|
34
|
-
# [8.4.0-beta.2](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-controller@8.4.0-beta.1...@pie-element/hotspot-controller@8.4.0-beta.2) (2026-08-11)
|
|
35
|
-
|
|
36
|
-
**Note:** Version bump only for package @pie-element/hotspot-controller
|
|
37
|
-
|
|
38
|
-
# [8.4.0-beta.1](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-controller@8.4.0-beta.0...@pie-element/hotspot-controller@8.4.0-beta.1) (2026-08-07)
|
|
39
|
-
|
|
40
|
-
**Note:** Version bump only for package @pie-element/hotspot-controller
|
|
41
|
-
|
|
42
|
-
# [8.4.0-beta.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-controller@8.3.0-beta.0...@pie-element/hotspot-controller@8.4.0-beta.0) (2026-08-07)
|
|
43
|
-
|
|
44
|
-
**Note:** Version bump only for package @pie-element/hotspot-controller
|
|
12
|
+
### Features
|
|
45
13
|
|
|
46
|
-
|
|
14
|
+
- **hotspot:** enhance focus handling and default hover outline color PIE-637 PIE-640 ([249d6e9](https://github.com/pie-framework/pie-elements/commit/249d6e9ae2da47a008ea0b5d73f34b64fd451795))
|
|
47
15
|
|
|
48
|
-
|
|
16
|
+
# [8.2.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-controller@8.1.2...@pie-element/hotspot-controller@8.2.0) (2026-07-31)
|
|
49
17
|
|
|
50
|
-
|
|
18
|
+
### Features
|
|
51
19
|
|
|
52
|
-
**
|
|
20
|
+
- **hotspot:** enhance focus handling and default hover outline color PIE-637 PIE-640 ([249d6e9](https://github.com/pie-framework/pie-elements/commit/249d6e9ae2da47a008ea0b5d73f34b64fd451795))
|
|
53
21
|
|
|
54
|
-
|
|
22
|
+
## [8.1.2](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-controller@8.1.1...@pie-element/hotspot-controller@8.1.2) (2026-07-02)
|
|
55
23
|
|
|
56
24
|
### Bug Fixes
|
|
57
25
|
|
|
58
26
|
- bump shared modules and libs PIE-695, PIE-697, PIE-699, PIE-680, PIE-714, PIE-665, PIE-656 ([4b76ae7](https://github.com/pie-framework/pie-elements/commit/4b76ae75d1c5ea6d55f7c6fb53f299dfcbda2b1f))
|
|
59
27
|
|
|
60
|
-
|
|
28
|
+
## [8.1.1](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-controller@8.1.0...@pie-element/hotspot-controller@8.1.1) (2026-05-21)
|
|
61
29
|
|
|
62
|
-
|
|
30
|
+
**Note:** Version bump only for package @pie-element/hotspot-controller
|
|
63
31
|
|
|
64
32
|
# [8.1.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-controller@8.1.0-next.1...@pie-element/hotspot-controller@8.1.0) (2026-05-21)
|
|
65
33
|
|
package/controller/package.json
CHANGED
package/lib/hotspot/circle.js
CHANGED
|
@@ -14,6 +14,11 @@ var _icons = require("./icons");
|
|
|
14
14
|
class CircleComponent extends _react.default.Component {
|
|
15
15
|
constructor(props) {
|
|
16
16
|
super(props);
|
|
17
|
+
(0, _defineProperty2.default)(this, "moveGroupToTop", () => {
|
|
18
|
+
if (this.groupRef.current) {
|
|
19
|
+
this.groupRef.current.moveToTop();
|
|
20
|
+
}
|
|
21
|
+
});
|
|
17
22
|
(0, _defineProperty2.default)(this, "handleClick", e => {
|
|
18
23
|
const {
|
|
19
24
|
onClick,
|
|
@@ -40,6 +45,7 @@ class CircleComponent extends _react.default.Component {
|
|
|
40
45
|
this.setState({
|
|
41
46
|
hovered: true
|
|
42
47
|
});
|
|
48
|
+
this.moveGroupToTop();
|
|
43
49
|
});
|
|
44
50
|
(0, _defineProperty2.default)(this, "handleMouseLeave", () => {
|
|
45
51
|
document.body.style.cursor = 'default';
|
|
@@ -52,6 +58,18 @@ class CircleComponent extends _react.default.Component {
|
|
|
52
58
|
this.state = {
|
|
53
59
|
hovered: false
|
|
54
60
|
};
|
|
61
|
+
this.groupRef = /*#__PURE__*/_react.default.createRef();
|
|
62
|
+
}
|
|
63
|
+
componentDidMount() {
|
|
64
|
+
if (this.props.focused) {
|
|
65
|
+
this.moveGroupToTop();
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
componentDidUpdate(prevProps) {
|
|
69
|
+
// `focused` (keyboard focus) can turn on the hovered style without going through handleMouseEnter
|
|
70
|
+
if (!prevProps.focused && this.props.focused) {
|
|
71
|
+
this.moveGroupToTop();
|
|
72
|
+
}
|
|
55
73
|
}
|
|
56
74
|
render() {
|
|
57
75
|
const {
|
|
@@ -98,6 +116,7 @@ class CircleComponent extends _react.default.Component {
|
|
|
98
116
|
}
|
|
99
117
|
const useHoveredStyle = (hovered || focused) && hoverOutlineColor;
|
|
100
118
|
return /*#__PURE__*/_react.default.createElement(_reactKonva.Group, {
|
|
119
|
+
ref: this.groupRef,
|
|
101
120
|
scaleX: scale,
|
|
102
121
|
scaleY: scale,
|
|
103
122
|
onMouseLeave: this.handleMouseLeave,
|
|
@@ -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","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":[]}
|
|
1
|
+
{"version":3,"file":"circle.js","names":["_react","_interopRequireDefault","require","_propTypes","_reactKonva","_imageKonvaTooltip","_icons","CircleComponent","React","Component","constructor","props","_defineProperty2","default","groupRef","current","moveToTop","e","onClick","id","selected","disabled","cancelBubble","selector","document","body","style","cursor","setState","hovered","moveGroupToTop","isCorrect","markAsCorrect","outlineColor","showCorrectEnabled","strokeWidth","state","createRef","componentDidMount","focused","componentDidUpdate","prevProps","render","radius","hotspotColor","isEvaluateMode","hoverOutlineColor","x","y","evaluateText","scale","selectedHotspotColor","outlineColorParsed","getEvaluateOutlineColor","outlineWidth","getOutlineWidth","iconX","iconY","iconSrc","faCorrect","faWrong","useHoveredStyle","createElement","Group","ref","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 this.groupRef = React.createRef();\n }\n\n componentDidMount() {\n if (this.props.focused) {\n this.moveGroupToTop();\n }\n }\n\n componentDidUpdate(prevProps) {\n // `focused` (keyboard focus) can turn on the hovered style without going through handleMouseEnter\n if (!prevProps.focused && this.props.focused) {\n this.moveGroupToTop();\n }\n }\n\n moveGroupToTop = () => {\n if (this.groupRef.current) {\n this.groupRef.current.moveToTop();\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 this.moveGroupToTop();\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\n ref={this.groupRef}\n scaleX={scale}\n scaleY={scale}\n onMouseLeave={this.handleMouseLeave}\n onMouseEnter={this.handleMouseEnter}\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 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
|
@@ -14,6 +14,11 @@ var _icons = require("./icons");
|
|
|
14
14
|
class PolygonComponent extends _react.default.Component {
|
|
15
15
|
constructor(props) {
|
|
16
16
|
super(props);
|
|
17
|
+
(0, _defineProperty2.default)(this, "moveGroupToTop", () => {
|
|
18
|
+
if (this.groupRef.current) {
|
|
19
|
+
this.groupRef.current.moveToTop();
|
|
20
|
+
}
|
|
21
|
+
});
|
|
17
22
|
(0, _defineProperty2.default)(this, "getPolygonCenter", points => {
|
|
18
23
|
const x = points.map(({
|
|
19
24
|
x
|
|
@@ -64,6 +69,7 @@ class PolygonComponent extends _react.default.Component {
|
|
|
64
69
|
this.setState({
|
|
65
70
|
hovered: true
|
|
66
71
|
});
|
|
72
|
+
this.moveGroupToTop();
|
|
67
73
|
});
|
|
68
74
|
(0, _defineProperty2.default)(this, "handleMouseLeave", () => {
|
|
69
75
|
document.body.style.cursor = 'default';
|
|
@@ -76,6 +82,18 @@ class PolygonComponent extends _react.default.Component {
|
|
|
76
82
|
this.state = {
|
|
77
83
|
hovered: false
|
|
78
84
|
};
|
|
85
|
+
this.groupRef = /*#__PURE__*/_react.default.createRef();
|
|
86
|
+
}
|
|
87
|
+
componentDidMount() {
|
|
88
|
+
if (this.props.focused) {
|
|
89
|
+
this.moveGroupToTop();
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
componentDidUpdate(prevProps) {
|
|
93
|
+
// `focused` (keyboard focus) can turn on the hovered style without going through handleMouseEnter
|
|
94
|
+
if (!prevProps.focused && this.props.focused) {
|
|
95
|
+
this.moveGroupToTop();
|
|
96
|
+
}
|
|
79
97
|
}
|
|
80
98
|
render() {
|
|
81
99
|
const {
|
|
@@ -147,6 +165,7 @@ class PolygonComponent extends _react.default.Component {
|
|
|
147
165
|
const rectWidth = maxX - minX;
|
|
148
166
|
const rectHeight = maxY - minY;
|
|
149
167
|
return /*#__PURE__*/_react.default.createElement(_reactKonva.Group, {
|
|
168
|
+
ref: this.groupRef,
|
|
150
169
|
scaleX: scale,
|
|
151
170
|
scaleY: scale,
|
|
152
171
|
onMouseEnter: this.handleMouseEnter,
|
|
@@ -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","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":[]}
|
|
1
|
+
{"version":3,"file":"polygon.js","names":["_react","_interopRequireDefault","require","_propTypes","_reactKonva","_imageKonvaTooltip","_icons","PolygonComponent","React","Component","constructor","props","_defineProperty2","default","groupRef","current","moveToTop","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","moveGroupToTop","isCorrect","markAsCorrect","outlineColor","showCorrectEnabled","strokeWidth","state","createRef","componentDidMount","focused","componentDidUpdate","prevProps","render","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","createElement","Group","ref","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 this.groupRef = React.createRef();\n }\n\n componentDidMount() {\n if (this.props.focused) {\n this.moveGroupToTop();\n }\n }\n\n componentDidUpdate(prevProps) {\n // `focused` (keyboard focus) can turn on the hovered style without going through handleMouseEnter\n if (!prevProps.focused && this.props.focused) {\n this.moveGroupToTop();\n }\n }\n\n moveGroupToTop = () => {\n if (this.groupRef.current) {\n this.groupRef.current.moveToTop();\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 this.moveGroupToTop();\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\n ref={this.groupRef}\n scaleX={scale}\n scaleY={scale}\n onMouseEnter={this.handleMouseEnter}\n onMouseLeave={this.handleMouseLeave}\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 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
|
@@ -14,6 +14,11 @@ var _icons = require("./icons");
|
|
|
14
14
|
class RectComponent extends _react.default.Component {
|
|
15
15
|
constructor(props) {
|
|
16
16
|
super(props);
|
|
17
|
+
(0, _defineProperty2.default)(this, "moveGroupToTop", () => {
|
|
18
|
+
if (this.groupRef.current) {
|
|
19
|
+
this.groupRef.current.moveToTop();
|
|
20
|
+
}
|
|
21
|
+
});
|
|
17
22
|
(0, _defineProperty2.default)(this, "handleClick", e => {
|
|
18
23
|
const {
|
|
19
24
|
onClick,
|
|
@@ -40,6 +45,7 @@ class RectComponent extends _react.default.Component {
|
|
|
40
45
|
this.setState({
|
|
41
46
|
hovered: true
|
|
42
47
|
});
|
|
48
|
+
this.moveGroupToTop();
|
|
43
49
|
});
|
|
44
50
|
(0, _defineProperty2.default)(this, "handleMouseLeave", () => {
|
|
45
51
|
document.body.style.cursor = 'default';
|
|
@@ -52,6 +58,18 @@ class RectComponent extends _react.default.Component {
|
|
|
52
58
|
this.state = {
|
|
53
59
|
hovered: false
|
|
54
60
|
};
|
|
61
|
+
this.groupRef = /*#__PURE__*/_react.default.createRef();
|
|
62
|
+
}
|
|
63
|
+
componentDidMount() {
|
|
64
|
+
if (this.props.focused) {
|
|
65
|
+
this.moveGroupToTop();
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
componentDidUpdate(prevProps) {
|
|
69
|
+
// `focused` (keyboard focus) can turn on the hovered style without going through handleMouseEnter
|
|
70
|
+
if (!prevProps.focused && this.props.focused) {
|
|
71
|
+
this.moveGroupToTop();
|
|
72
|
+
}
|
|
55
73
|
}
|
|
56
74
|
render() {
|
|
57
75
|
const {
|
|
@@ -113,6 +131,7 @@ class RectComponent extends _react.default.Component {
|
|
|
113
131
|
}
|
|
114
132
|
const useHoveredStyle = (hovered || focused) && hoverOutlineColor;
|
|
115
133
|
return /*#__PURE__*/_react.default.createElement(_reactKonva.Group, {
|
|
134
|
+
ref: this.groupRef,
|
|
116
135
|
scaleX: scale,
|
|
117
136
|
scaleY: scale,
|
|
118
137
|
onMouseLeave: this.handleMouseLeave,
|
|
@@ -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","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":[]}
|
|
1
|
+
{"version":3,"file":"rectangle.js","names":["_react","_interopRequireDefault","require","_propTypes","_reactKonva","_imageKonvaTooltip","_icons","RectComponent","React","Component","constructor","props","_defineProperty2","default","groupRef","current","moveToTop","e","onClick","id","selected","disabled","cancelBubble","selector","document","body","style","cursor","setState","hovered","moveGroupToTop","isCorrect","markAsCorrect","outlineColor","showCorrectEnabled","strokeWidth","state","createRef","componentDidMount","focused","componentDidUpdate","prevProps","render","height","hotspotColor","hoverOutlineColor","selectedHotspotColor","isEvaluateMode","width","x","y","evaluateText","scale","outlineColorParsed","getEvaluateOutlineColor","outlineWidth","getOutlineWidth","iconX","iconY","iconSrc","faCorrect","faWrong","useHoveredStyle","createElement","Group","ref","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 this.groupRef = React.createRef();\n }\n\n componentDidMount() {\n if (this.props.focused) {\n this.moveGroupToTop();\n }\n }\n\n componentDidUpdate(prevProps) {\n // `focused` (keyboard focus) can turn on the hovered style without going through handleMouseEnter\n if (!prevProps.focused && this.props.focused) {\n this.moveGroupToTop();\n }\n }\n\n moveGroupToTop = () => {\n if (this.groupRef.current) {\n this.groupRef.current.moveToTop();\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 this.moveGroupToTop();\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\n ref={this.groupRef}\n scaleX={scale}\n scaleY={scale}\n onMouseLeave={this.handleMouseLeave}\n onMouseEnter={this.handleMouseEnter}\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 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/lib/index.js
CHANGED
|
@@ -41,7 +41,7 @@ class Hotspot extends HTMLElement {
|
|
|
41
41
|
if (autoplayAudioEnabled && completeAudioEnabled && !this.audioComplete) {
|
|
42
42
|
if (elementContext) {
|
|
43
43
|
const audio = elementContext.querySelector('audio');
|
|
44
|
-
const isInsidePrompt = audio && audio.closest('
|
|
44
|
+
const isInsidePrompt = audio && audio.closest('.preview-prompt');
|
|
45
45
|
|
|
46
46
|
// only require audio completion if audio exists and is inside the prompt
|
|
47
47
|
if (audio && isInsidePrompt) {
|
|
@@ -103,7 +103,7 @@ class Hotspot extends HTMLElement {
|
|
|
103
103
|
if (mutation.type === 'childList') {
|
|
104
104
|
if (this._audioInitialized) return;
|
|
105
105
|
const audio = this.querySelector('audio');
|
|
106
|
-
const isInsidePrompt = audio && audio.closest('
|
|
106
|
+
const isInsidePrompt = audio && audio.closest('.preview-prompt');
|
|
107
107
|
if (!this._model) return;
|
|
108
108
|
if (!this._model.autoplayAudioEnabled) return;
|
|
109
109
|
if (audio && !isInsidePrompt) return;
|
package/lib/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["_react","_interopRequireDefault","require","_client","_mathRendering","_renderUi","_piePlayerEvents","_hotspot","_sessionUpdater","Hotspot","HTMLElement","constructor","_model","_session","_audioInitialized","audioComplete","_root","model","m","dispatchEvent","ModelSetEvent","tagName","toLowerCase","isComplete","_render","answers","autoplayAudioEnabled","completeAudioEnabled","elementContext","audio","querySelector","isInsidePrompt","closest","Array","isArray","length","session","s","onSelectChoice","data","updateSessionValue","SessionChangedEvent","_createAudioInfoToast","info","document","createElement","id","Object","assign","style","position","top","width","height","display","justifyContent","alignItems","background","zIndex","cursor","img","src","EnableAudioAutoplayImage","alt","appendChild","connectedCallback","observer","MutationObserver","mutationsList","forEach","mutation","type","container","enableAudio","play","removeChild","removeEventListener","setTimeout","paused","addEventListener","handlePlaying","updateSessionMetadata","audioStartTime","Date","getTime","handleEnded","audioEndTime","waitTime","_audio","_handlePlaying","_handleEnded","_enableAudio","disconnect","observe","childList","subtree","el","React","HotspotComponent","bind","createRoot","render","queueMicrotask","renderMath","disconnectedCallback","unmount","exports","default"],"sources":["../src/index.js"],"sourcesContent":["import React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport { renderMath } from '@pie-lib/math-rendering';\nimport { EnableAudioAutoplayImage } from '@pie-lib/render-ui';\nimport { SessionChangedEvent, ModelSetEvent } from '@pie-framework/pie-player-events';\n\nimport HotspotComponent from './hotspot';\nimport { updateSessionValue, updateSessionMetadata } from './session-updater';\n\nexport default class Hotspot extends HTMLElement {\n constructor() {\n super();\n this._model = null;\n this._session = null;\n this._audioInitialized = false;\n this.audioComplete = false;\n this._root = null;\n }\n\n set model(m) {\n this._model = m;\n\n this.dispatchEvent(new ModelSetEvent(this.tagName.toLowerCase(), this.isComplete(), !!this._model));\n this._audioInitialized = false;\n this._render();\n }\n\n isComplete() {\n if (!this._session || !this._session.answers) {\n return false;\n }\n\n const { autoplayAudioEnabled, completeAudioEnabled } = this._model || {};\n const elementContext = this;\n\n // check audio completion if audio settings are enabled and audio actually exists\n if (autoplayAudioEnabled && completeAudioEnabled && !this.audioComplete) {\n if (elementContext) {\n const audio = elementContext.querySelector('audio');\n const isInsidePrompt = audio && audio.closest('#preview-prompt');\n\n // only require audio completion if audio exists and is inside the prompt\n if (audio && isInsidePrompt) {\n return false;\n }\n }\n }\n\n if (!Array.isArray(this._session.answers)) {\n return false;\n }\n\n return this._session.answers.length > 0;\n }\n\n set session(s) {\n if (s && !s.answers) {\n s.answers = [];\n }\n\n this._session = s;\n this._render();\n }\n\n get session() {\n return this._session;\n }\n\n onSelectChoice(data) {\n updateSessionValue(this._session, this._model, data);\n\n this.dispatchEvent(new SessionChangedEvent(this.tagName.toLowerCase(), this.isComplete()));\n\n this._render();\n }\n\n _createAudioInfoToast() {\n const info = document.createElement('div');\n info.id = 'play-audio-info';\n\n Object.assign(info.style, {\n position: 'absolute',\n top: 0,\n width: '100%',\n height: '100%',\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n background: 'white',\n zIndex: '1000',\n cursor: 'pointer',\n });\n\n const img = document.createElement('img');\n img.src = EnableAudioAutoplayImage;\n img.alt = 'Click anywhere to enable audio autoplay';\n img.width = 500;\n img.height = 300;\n\n info.appendChild(img);\n return info;\n }\n\n connectedCallback() {\n this._render();\n\n // Observation: audio in Chrome will have the autoplay attribute,\n // while other browsers will not have the autoplay attribute and will need a user interaction to play the audio\n // This workaround fixes the issue of audio being cached and played on any user interaction in Safari and Firefox\n const observer = new MutationObserver((mutationsList, observer) => {\n mutationsList.forEach((mutation) => {\n if (mutation.type === 'childList') {\n if (this._audioInitialized) return;\n const audio = this.querySelector('audio');\n const isInsidePrompt = audio && audio.closest('#preview-prompt');\n\n if (!this._model) return;\n if (!this._model.autoplayAudioEnabled) return;\n if (audio && !isInsidePrompt) return;\n if (!audio) return;\n\n const info = this._createAudioInfoToast();\n const container = this.querySelector('#main-container');\n const enableAudio = () => {\n if (this.querySelector('#play-audio-info')) {\n audio.play();\n container.removeChild(info);\n }\n\n document.removeEventListener('click', enableAudio);\n };\n\n // if the audio is paused, it means the user has not interacted with the page yet and the audio will not play\n // FIX FOR SAFARI: play with a slight delay to check if autoplay was blocked\n setTimeout(() => {\n if (audio.paused && !this.querySelector('#play-audio-info')) {\n // add info message as a toast to enable audio playback\n container.appendChild(info);\n document.addEventListener('click', enableAudio);\n } else {\n document.removeEventListener('click', enableAudio);\n }\n }, 500);\n\n // we need to listen for the playing event to remove the toast in case the audio plays because of re-rendering\n const handlePlaying = () => {\n //timestamp when auto-played audio started playing\n updateSessionMetadata(this._session, { audioStartTime: new Date().getTime() });\n\n const info = this.querySelector('#play-audio-info');\n if (info) {\n container.removeChild(info);\n }\n\n audio.removeEventListener('playing', handlePlaying);\n };\n\n audio.addEventListener('playing', handlePlaying);\n\n // we need to listen for the ended event to update the isComplete state\n const handleEnded = () => {\n //timestamp when auto-played audio completed playing\n updateSessionMetadata(this._session, { audioEndTime: new Date().getTime() });\n\n let { audioStartTime, audioEndTime, waitTime } = this._session;\n if (!waitTime && audioStartTime && audioEndTime) {\n // waitTime is elapsed time the user waited for auto-played audio to finish\n this._session.waitTime = audioEndTime - audioStartTime;\n }\n\n this.audioComplete = true;\n this.dispatchEvent(new SessionChangedEvent(this.tagName.toLowerCase(), this.isComplete()));\n\n audio.removeEventListener('ended', handleEnded);\n };\n\n audio.addEventListener('ended', handleEnded);\n\n // store references to remove later\n this._audio = audio;\n this._handlePlaying = handlePlaying;\n this._handleEnded = handleEnded;\n this._enableAudio = enableAudio;\n // set to true to prevent multiple initializations\n this._audioInitialized = true;\n\n observer.disconnect();\n }\n });\n });\n\n observer.observe(this, { childList: true, subtree: true });\n }\n\n _render() {\n if (this._model && this._session) {\n const el = React.createElement(HotspotComponent, {\n model: this._model,\n session: this._session,\n onSelectChoice: this.onSelectChoice.bind(this),\n });\n\n if (!this._root) {\n this._root = createRoot(this);\n }\n this._root.render(el);\n queueMicrotask(() => {\n renderMath(this);\n });\n }\n }\n\n disconnectedCallback() {\n document.removeEventListener('click', this._enableAudio);\n\n if (this._audio) {\n this._audio.removeEventListener('playing', this._handlePlaying);\n this._audio.removeEventListener('ended', this._handleEnded);\n this._audio = null;\n }\n\n if (this._root) {\n this._root.unmount();\n this._root = null;\n }\n }\n}\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"index.js","names":["_react","_interopRequireDefault","require","_client","_mathRendering","_renderUi","_piePlayerEvents","_hotspot","_sessionUpdater","Hotspot","HTMLElement","constructor","_model","_session","_audioInitialized","audioComplete","_root","model","m","dispatchEvent","ModelSetEvent","tagName","toLowerCase","isComplete","_render","answers","autoplayAudioEnabled","completeAudioEnabled","elementContext","audio","querySelector","isInsidePrompt","closest","Array","isArray","length","session","s","onSelectChoice","data","updateSessionValue","SessionChangedEvent","_createAudioInfoToast","info","document","createElement","id","Object","assign","style","position","top","width","height","display","justifyContent","alignItems","background","zIndex","cursor","img","src","EnableAudioAutoplayImage","alt","appendChild","connectedCallback","observer","MutationObserver","mutationsList","forEach","mutation","type","container","enableAudio","play","removeChild","removeEventListener","setTimeout","paused","addEventListener","handlePlaying","updateSessionMetadata","audioStartTime","Date","getTime","handleEnded","audioEndTime","waitTime","_audio","_handlePlaying","_handleEnded","_enableAudio","disconnect","observe","childList","subtree","el","React","HotspotComponent","bind","createRoot","render","queueMicrotask","renderMath","disconnectedCallback","unmount","exports","default"],"sources":["../src/index.js"],"sourcesContent":["import React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport { renderMath } from '@pie-lib/math-rendering';\nimport { EnableAudioAutoplayImage } from '@pie-lib/render-ui';\nimport { SessionChangedEvent, ModelSetEvent } from '@pie-framework/pie-player-events';\n\nimport HotspotComponent from './hotspot';\nimport { updateSessionValue, updateSessionMetadata } from './session-updater';\n\nexport default class Hotspot extends HTMLElement {\n constructor() {\n super();\n this._model = null;\n this._session = null;\n this._audioInitialized = false;\n this.audioComplete = false;\n this._root = null;\n }\n\n set model(m) {\n this._model = m;\n\n this.dispatchEvent(new ModelSetEvent(this.tagName.toLowerCase(), this.isComplete(), !!this._model));\n this._audioInitialized = false;\n this._render();\n }\n\n isComplete() {\n if (!this._session || !this._session.answers) {\n return false;\n }\n\n const { autoplayAudioEnabled, completeAudioEnabled } = this._model || {};\n const elementContext = this;\n\n // check audio completion if audio settings are enabled and audio actually exists\n if (autoplayAudioEnabled && completeAudioEnabled && !this.audioComplete) {\n if (elementContext) {\n const audio = elementContext.querySelector('audio');\n const isInsidePrompt = audio && audio.closest('.preview-prompt');\n\n // only require audio completion if audio exists and is inside the prompt\n if (audio && isInsidePrompt) {\n return false;\n }\n }\n }\n\n if (!Array.isArray(this._session.answers)) {\n return false;\n }\n\n return this._session.answers.length > 0;\n }\n\n set session(s) {\n if (s && !s.answers) {\n s.answers = [];\n }\n\n this._session = s;\n this._render();\n }\n\n get session() {\n return this._session;\n }\n\n onSelectChoice(data) {\n updateSessionValue(this._session, this._model, data);\n\n this.dispatchEvent(new SessionChangedEvent(this.tagName.toLowerCase(), this.isComplete()));\n\n this._render();\n }\n\n _createAudioInfoToast() {\n const info = document.createElement('div');\n info.id = 'play-audio-info';\n\n Object.assign(info.style, {\n position: 'absolute',\n top: 0,\n width: '100%',\n height: '100%',\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n background: 'white',\n zIndex: '1000',\n cursor: 'pointer',\n });\n\n const img = document.createElement('img');\n img.src = EnableAudioAutoplayImage;\n img.alt = 'Click anywhere to enable audio autoplay';\n img.width = 500;\n img.height = 300;\n\n info.appendChild(img);\n return info;\n }\n\n connectedCallback() {\n this._render();\n\n // Observation: audio in Chrome will have the autoplay attribute,\n // while other browsers will not have the autoplay attribute and will need a user interaction to play the audio\n // This workaround fixes the issue of audio being cached and played on any user interaction in Safari and Firefox\n const observer = new MutationObserver((mutationsList, observer) => {\n mutationsList.forEach((mutation) => {\n if (mutation.type === 'childList') {\n if (this._audioInitialized) return;\n const audio = this.querySelector('audio');\n const isInsidePrompt = audio && audio.closest('.preview-prompt');\n\n if (!this._model) return;\n if (!this._model.autoplayAudioEnabled) return;\n if (audio && !isInsidePrompt) return;\n if (!audio) return;\n\n const info = this._createAudioInfoToast();\n const container = this.querySelector('#main-container');\n const enableAudio = () => {\n if (this.querySelector('#play-audio-info')) {\n audio.play();\n container.removeChild(info);\n }\n\n document.removeEventListener('click', enableAudio);\n };\n\n // if the audio is paused, it means the user has not interacted with the page yet and the audio will not play\n // FIX FOR SAFARI: play with a slight delay to check if autoplay was blocked\n setTimeout(() => {\n if (audio.paused && !this.querySelector('#play-audio-info')) {\n // add info message as a toast to enable audio playback\n container.appendChild(info);\n document.addEventListener('click', enableAudio);\n } else {\n document.removeEventListener('click', enableAudio);\n }\n }, 500);\n\n // we need to listen for the playing event to remove the toast in case the audio plays because of re-rendering\n const handlePlaying = () => {\n //timestamp when auto-played audio started playing\n updateSessionMetadata(this._session, { audioStartTime: new Date().getTime() });\n\n const info = this.querySelector('#play-audio-info');\n if (info) {\n container.removeChild(info);\n }\n\n audio.removeEventListener('playing', handlePlaying);\n };\n\n audio.addEventListener('playing', handlePlaying);\n\n // we need to listen for the ended event to update the isComplete state\n const handleEnded = () => {\n //timestamp when auto-played audio completed playing\n updateSessionMetadata(this._session, { audioEndTime: new Date().getTime() });\n\n let { audioStartTime, audioEndTime, waitTime } = this._session;\n if (!waitTime && audioStartTime && audioEndTime) {\n // waitTime is elapsed time the user waited for auto-played audio to finish\n this._session.waitTime = audioEndTime - audioStartTime;\n }\n\n this.audioComplete = true;\n this.dispatchEvent(new SessionChangedEvent(this.tagName.toLowerCase(), this.isComplete()));\n\n audio.removeEventListener('ended', handleEnded);\n };\n\n audio.addEventListener('ended', handleEnded);\n\n // store references to remove later\n this._audio = audio;\n this._handlePlaying = handlePlaying;\n this._handleEnded = handleEnded;\n this._enableAudio = enableAudio;\n // set to true to prevent multiple initializations\n this._audioInitialized = true;\n\n observer.disconnect();\n }\n });\n });\n\n observer.observe(this, { childList: true, subtree: true });\n }\n\n _render() {\n if (this._model && this._session) {\n const el = React.createElement(HotspotComponent, {\n model: this._model,\n session: this._session,\n onSelectChoice: this.onSelectChoice.bind(this),\n });\n\n if (!this._root) {\n this._root = createRoot(this);\n }\n this._root.render(el);\n queueMicrotask(() => {\n renderMath(this);\n });\n }\n }\n\n disconnectedCallback() {\n document.removeEventListener('click', this._enableAudio);\n\n if (this._audio) {\n this._audio.removeEventListener('playing', this._handlePlaying);\n this._audio.removeEventListener('ended', this._handleEnded);\n this._audio = null;\n }\n\n if (this._root) {\n this._root.unmount();\n this._root = null;\n }\n }\n}\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.3.2
|
|
4
|
+
"version": "11.3.2",
|
|
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.
|
|
15
|
+
"@pie-lib/correct-answer-toggle": "4.0.8",
|
|
16
16
|
"@pie-lib/math-rendering": "5.1.0",
|
|
17
|
-
"@pie-lib/render-ui": "
|
|
18
|
-
"@pie-lib/test-utils": "2.0.
|
|
17
|
+
"@pie-lib/render-ui": "7.0.2",
|
|
18
|
+
"@pie-lib/test-utils": "2.0.3",
|
|
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": "2976324c2d55b1d41f54aadc9b8f493b3ae839b2",
|
|
28
28
|
"scripts": {
|
|
29
29
|
"postpublish": "../../scripts/postpublish"
|
|
30
30
|
},
|
package/src/hotspot/circle.jsx
CHANGED
|
@@ -10,8 +10,28 @@ class CircleComponent extends React.Component {
|
|
|
10
10
|
this.state = {
|
|
11
11
|
hovered: false,
|
|
12
12
|
};
|
|
13
|
+
this.groupRef = React.createRef();
|
|
13
14
|
}
|
|
14
15
|
|
|
16
|
+
componentDidMount() {
|
|
17
|
+
if (this.props.focused) {
|
|
18
|
+
this.moveGroupToTop();
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
componentDidUpdate(prevProps) {
|
|
23
|
+
// `focused` (keyboard focus) can turn on the hovered style without going through handleMouseEnter
|
|
24
|
+
if (!prevProps.focused && this.props.focused) {
|
|
25
|
+
this.moveGroupToTop();
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
moveGroupToTop = () => {
|
|
30
|
+
if (this.groupRef.current) {
|
|
31
|
+
this.groupRef.current.moveToTop();
|
|
32
|
+
}
|
|
33
|
+
};
|
|
34
|
+
|
|
15
35
|
handleClick = (e) => {
|
|
16
36
|
const { onClick, id, selected, disabled } = this.props;
|
|
17
37
|
|
|
@@ -28,6 +48,7 @@ class CircleComponent extends React.Component {
|
|
|
28
48
|
document.body.style.cursor = 'pointer';
|
|
29
49
|
}
|
|
30
50
|
this.setState({ hovered: true });
|
|
51
|
+
this.moveGroupToTop();
|
|
31
52
|
};
|
|
32
53
|
|
|
33
54
|
handleMouseLeave = () => {
|
|
@@ -92,7 +113,13 @@ class CircleComponent extends React.Component {
|
|
|
92
113
|
const useHoveredStyle = (hovered || focused) && hoverOutlineColor;
|
|
93
114
|
|
|
94
115
|
return (
|
|
95
|
-
<Group
|
|
116
|
+
<Group
|
|
117
|
+
ref={this.groupRef}
|
|
118
|
+
scaleX={scale}
|
|
119
|
+
scaleY={scale}
|
|
120
|
+
onMouseLeave={this.handleMouseLeave}
|
|
121
|
+
onMouseEnter={this.handleMouseEnter}
|
|
122
|
+
>
|
|
96
123
|
<Circle
|
|
97
124
|
radius={radius}
|
|
98
125
|
fill={selected && selectedHotspotColor ? selectedHotspotColor : hotspotColor}
|
package/src/hotspot/polygon.jsx
CHANGED
|
@@ -10,8 +10,28 @@ class PolygonComponent extends React.Component {
|
|
|
10
10
|
this.state = {
|
|
11
11
|
hovered: false,
|
|
12
12
|
};
|
|
13
|
+
this.groupRef = React.createRef();
|
|
13
14
|
}
|
|
14
15
|
|
|
16
|
+
componentDidMount() {
|
|
17
|
+
if (this.props.focused) {
|
|
18
|
+
this.moveGroupToTop();
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
componentDidUpdate(prevProps) {
|
|
23
|
+
// `focused` (keyboard focus) can turn on the hovered style without going through handleMouseEnter
|
|
24
|
+
if (!prevProps.focused && this.props.focused) {
|
|
25
|
+
this.moveGroupToTop();
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
moveGroupToTop = () => {
|
|
30
|
+
if (this.groupRef.current) {
|
|
31
|
+
this.groupRef.current.moveToTop();
|
|
32
|
+
}
|
|
33
|
+
};
|
|
34
|
+
|
|
15
35
|
getPolygonCenter = (points) => {
|
|
16
36
|
const x = points.map(({ x }) => x);
|
|
17
37
|
const y = points.map(({ y }) => y);
|
|
@@ -47,6 +67,7 @@ class PolygonComponent extends React.Component {
|
|
|
47
67
|
document.body.style.cursor = 'pointer';
|
|
48
68
|
}
|
|
49
69
|
this.setState({ hovered: true });
|
|
70
|
+
this.moveGroupToTop();
|
|
50
71
|
};
|
|
51
72
|
|
|
52
73
|
handleMouseLeave = () => {
|
|
@@ -137,7 +158,13 @@ class PolygonComponent extends React.Component {
|
|
|
137
158
|
const rectHeight = maxY - minY;
|
|
138
159
|
|
|
139
160
|
return (
|
|
140
|
-
<Group
|
|
161
|
+
<Group
|
|
162
|
+
ref={this.groupRef}
|
|
163
|
+
scaleX={scale}
|
|
164
|
+
scaleY={scale}
|
|
165
|
+
onMouseEnter={this.handleMouseEnter}
|
|
166
|
+
onMouseLeave={this.handleMouseLeave}
|
|
167
|
+
>
|
|
141
168
|
<Line
|
|
142
169
|
points={pointsParsed}
|
|
143
170
|
closed={true}
|
|
@@ -10,8 +10,28 @@ class RectComponent extends React.Component {
|
|
|
10
10
|
this.state = {
|
|
11
11
|
hovered: false,
|
|
12
12
|
};
|
|
13
|
+
this.groupRef = React.createRef();
|
|
13
14
|
}
|
|
14
15
|
|
|
16
|
+
componentDidMount() {
|
|
17
|
+
if (this.props.focused) {
|
|
18
|
+
this.moveGroupToTop();
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
componentDidUpdate(prevProps) {
|
|
23
|
+
// `focused` (keyboard focus) can turn on the hovered style without going through handleMouseEnter
|
|
24
|
+
if (!prevProps.focused && this.props.focused) {
|
|
25
|
+
this.moveGroupToTop();
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
moveGroupToTop = () => {
|
|
30
|
+
if (this.groupRef.current) {
|
|
31
|
+
this.groupRef.current.moveToTop();
|
|
32
|
+
}
|
|
33
|
+
};
|
|
34
|
+
|
|
15
35
|
handleClick = (e) => {
|
|
16
36
|
const { onClick, id, selected, disabled } = this.props;
|
|
17
37
|
|
|
@@ -28,6 +48,7 @@ class RectComponent extends React.Component {
|
|
|
28
48
|
document.body.style.cursor = 'pointer';
|
|
29
49
|
}
|
|
30
50
|
this.setState({ hovered: true });
|
|
51
|
+
this.moveGroupToTop();
|
|
31
52
|
};
|
|
32
53
|
|
|
33
54
|
handleMouseLeave = () => {
|
|
@@ -107,7 +128,13 @@ class RectComponent extends React.Component {
|
|
|
107
128
|
const useHoveredStyle = (hovered || focused) && hoverOutlineColor;
|
|
108
129
|
|
|
109
130
|
return (
|
|
110
|
-
<Group
|
|
131
|
+
<Group
|
|
132
|
+
ref={this.groupRef}
|
|
133
|
+
scaleX={scale}
|
|
134
|
+
scaleY={scale}
|
|
135
|
+
onMouseLeave={this.handleMouseLeave}
|
|
136
|
+
onMouseEnter={this.handleMouseEnter}
|
|
137
|
+
>
|
|
111
138
|
<Rect
|
|
112
139
|
x={x}
|
|
113
140
|
y={y}
|
package/src/index.js
CHANGED
|
@@ -37,7 +37,7 @@ export default class Hotspot extends HTMLElement {
|
|
|
37
37
|
if (autoplayAudioEnabled && completeAudioEnabled && !this.audioComplete) {
|
|
38
38
|
if (elementContext) {
|
|
39
39
|
const audio = elementContext.querySelector('audio');
|
|
40
|
-
const isInsidePrompt = audio && audio.closest('
|
|
40
|
+
const isInsidePrompt = audio && audio.closest('.preview-prompt');
|
|
41
41
|
|
|
42
42
|
// only require audio completion if audio exists and is inside the prompt
|
|
43
43
|
if (audio && isInsidePrompt) {
|
|
@@ -112,7 +112,7 @@ export default class Hotspot extends HTMLElement {
|
|
|
112
112
|
if (mutation.type === 'childList') {
|
|
113
113
|
if (this._audioInitialized) return;
|
|
114
114
|
const audio = this.querySelector('audio');
|
|
115
|
-
const isInsidePrompt = audio && audio.closest('
|
|
115
|
+
const isInsidePrompt = audio && audio.closest('.preview-prompt');
|
|
116
116
|
|
|
117
117
|
if (!this._model) return;
|
|
118
118
|
if (!this._model.autoplayAudioEnabled) return;
|