@pie-element/hotspot 11.3.1 → 11.3.2-beta.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.
Files changed (18) hide show
  1. package/CHANGELOG.md +32 -60
  2. package/configure/CHANGELOG.md +29 -42
  3. package/configure/package.json +3 -3
  4. package/controller/CHANGELOG.md +38 -10
  5. package/controller/package.json +1 -1
  6. package/lib/hotspot/circle.js +0 -19
  7. package/lib/hotspot/circle.js.map +1 -1
  8. package/lib/hotspot/polygon.js +0 -19
  9. package/lib/hotspot/polygon.js.map +1 -1
  10. package/lib/hotspot/rectangle.js +0 -19
  11. package/lib/hotspot/rectangle.js.map +1 -1
  12. package/lib/index.js +2 -2
  13. package/lib/index.js.map +1 -1
  14. package/package.json +4 -4
  15. package/src/hotspot/circle.jsx +1 -28
  16. package/src/hotspot/polygon.jsx +1 -28
  17. package/src/hotspot/rectangle.jsx +1 -28
  18. package/src/index.js +2 -2
package/CHANGELOG.md CHANGED
@@ -3,97 +3,69 @@
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.1](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot@11.3.0...@pie-element/hotspot@11.3.1) (2026-08-26)
6
+ ## [11.3.2-beta.2](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot@11.4.0-beta.7...@pie-element/hotspot@11.3.2-beta.2) (2026-08-26)
7
7
 
8
8
  **Note:** Version bump only for package @pie-element/hotspot
9
9
 
10
- # [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)
10
+ # [11.4.0-beta.7](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot@11.4.0-beta.6...@pie-element/hotspot@11.4.0-beta.7) (2026-08-20)
11
11
 
12
- ### Bug Fixes
12
+ **Note:** Version bump only for package @pie-element/hotspot
13
13
 
14
- - 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))
15
- - 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))
14
+ # [11.4.0-beta.6](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot@11.4.0-beta.5...@pie-element/hotspot@11.4.0-beta.6) (2026-08-14)
16
15
 
17
- ### Features
16
+ **Note:** Version bump only for package @pie-element/hotspot
18
17
 
19
- - bump libs PIE-856, PIE-681, PIE-927 ([cb26d7a](https://github.com/pie-framework/pie-elements/commit/cb26d7afa6c99522533c321d5ff8ce3148a66e9e))
18
+ # [11.4.0-beta.5](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot@11.4.0-beta.4...@pie-element/hotspot@11.4.0-beta.5) (2026-08-11)
20
19
 
21
- ## [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)
20
+ **Note:** Version bump only for package @pie-element/hotspot
22
21
 
23
- ### Bug Fixes
22
+ # [11.4.0-beta.4](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot@11.4.0-beta.3...@pie-element/hotspot@11.4.0-beta.4) (2026-08-11)
24
23
 
25
- - bump libs and shared modules PIE-681, PIE-708 ([08af8b5](https://github.com/pie-framework/pie-elements/commit/08af8b5802aecc8ee5454a1b6d60277d7ec94204))
24
+ **Note:** Version bump only for package @pie-element/hotspot
26
25
 
27
- ## [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)
26
+ # [11.4.0-beta.3](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot@11.4.0-beta.2...@pie-element/hotspot@11.4.0-beta.3) (2026-08-11)
28
27
 
29
- ### Bug Fixes
28
+ **Note:** Version bump only for package @pie-element/hotspot
30
29
 
31
- - **hotspot:** render hovered shape on top of other shapes PIE-900 ([23dfd21](https://github.com/pie-framework/pie-elements/commit/23dfd21a8c7b8909f2f494f47945831de79f40cc))
30
+ # [11.4.0-beta.2](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot@11.4.0-beta.1...@pie-element/hotspot@11.4.0-beta.2) (2026-08-11)
32
31
 
33
- ## [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)
32
+ **Note:** Version bump only for package @pie-element/hotspot
34
33
 
35
- ### Bug Fixes
34
+ # [11.4.0-beta.1](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot@11.4.0-beta.0...@pie-element/hotspot@11.4.0-beta.1) (2026-08-07)
36
35
 
37
- - **hotspot:** improve hover effect handling PIE-783 ([b27c51f](https://github.com/pie-framework/pie-elements/commit/b27c51f77eb41f6a3aee1e87c85ea7c8769b542f))
36
+ **Note:** Version bump only for package @pie-element/hotspot
38
37
 
39
- ### Features
38
+ # [11.4.0-beta.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot@11.3.0-beta.0...@pie-element/hotspot@11.4.0-beta.0) (2026-08-07)
40
39
 
41
- - **hotspot:** add ariaLabel to shapes for improved accessibility PIE-639 ([8791de3](https://github.com/pie-framework/pie-elements/commit/8791de36640adc85a8cf43d095a092bce6d7e7a1))
42
- - **hotspot:** enhance focus handling and default hover outline color PIE-637 PIE-640 ([249d6e9](https://github.com/pie-framework/pie-elements/commit/249d6e9ae2da47a008ea0b5d73f34b64fd451795))
43
-
44
- # [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)
40
+ **Note:** Version bump only for package @pie-element/hotspot
45
41
 
46
- ### Bug Fixes
42
+ # [11.3.0-beta.1](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot@11.3.0-beta.0...@pie-element/hotspot@11.3.0-beta.1) (2026-08-07)
47
43
 
48
- - **hotspot:** improve hover effect handling PIE-783 ([b27c51f](https://github.com/pie-framework/pie-elements/commit/b27c51f77eb41f6a3aee1e87c85ea7c8769b542f))
44
+ **Note:** Version bump only for package @pie-element/hotspot
49
45
 
50
- ### Features
46
+ # [11.3.0-beta.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot@11.2.0-beta.0...@pie-element/hotspot@11.3.0-beta.0) (2026-08-07)
51
47
 
52
- - **hotspot:** add ariaLabel to shapes for improved accessibility PIE-639 ([8791de3](https://github.com/pie-framework/pie-elements/commit/8791de36640adc85a8cf43d095a092bce6d7e7a1))
53
- - **hotspot:** enhance focus handling and default hover outline color PIE-637 PIE-640 ([249d6e9](https://github.com/pie-framework/pie-elements/commit/249d6e9ae2da47a008ea0b5d73f34b64fd451795))
48
+ **Note:** Version bump only for package @pie-element/hotspot
54
49
 
55
- ## [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)
50
+ # [11.2.0-beta.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot@11.1.0...@pie-element/hotspot@11.2.0-beta.0) (2026-08-07)
56
51
 
57
52
  ### Bug Fixes
58
53
 
59
54
  - bump libs & shared modules PIE-706, PIE-702, PIE-679, PIE-698 ([5b1a8c4](https://github.com/pie-framework/pie-elements/commit/5b1a8c4c3eba2126fc43d78fd0187e7cd11d5424))
60
- - 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))
61
-
62
- ## [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)
63
-
64
- ### Bug Fixes
65
-
66
- - 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
- - sync libs versions ([48b5be9](https://github.com/pie-framework/pie-elements/commit/48b5be9559eb5b5235ca05f51c5f0161032a7041))
68
-
69
- ## [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
-
71
- ### Bug Fixes
72
-
73
- - 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))
74
- - handle webcomponent lifecycle on every element that misses it PIE-703 ([9d5923f](https://github.com/pie-framework/pie-elements/commit/9d5923f973f0471e1e8f69ad4309cfc63d980d93))
75
-
76
- ## [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)
77
-
78
- ### Bug Fixes
79
-
55
+ - bump shared modules and libs PIE-600, PIE-602 ([ce99f6a](https://github.com/pie-framework/pie-elements/commit/ce99f6af50cb855b666a6df9340f9f5445fde4c4))
80
56
  - 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))
81
-
82
- ## [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)
83
-
84
- ### Bug Fixes
85
-
57
+ - 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))
58
+ - 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))
86
59
  - bump shared modules and libsPIE-603, PIE-604, PIE-663, PIE-662, PIE-678 ([e61c7a7](https://github.com/pie-framework/pie-elements/commit/e61c7a7d23744586337dfbb17a18ebfc656c202f))
60
+ - handle webcomponent lifecycle on every element that misses it PIE-703 ([9d5923f](https://github.com/pie-framework/pie-elements/commit/9d5923f973f0471e1e8f69ad4309cfc63d980d93))
61
+ - **hotspot:** improve hover effect handling PIE-783 ([b27c51f](https://github.com/pie-framework/pie-elements/commit/b27c51f77eb41f6a3aee1e87c85ea7c8769b542f))
62
+ - 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))
63
+ - sync libs versions ([48b5be9](https://github.com/pie-framework/pie-elements/commit/48b5be9559eb5b5235ca05f51c5f0161032a7041))
87
64
 
88
- ## [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)
89
-
90
- ### Bug Fixes
91
-
92
- - bump shared modules and libs PIE-600, PIE-602 ([ce99f6a](https://github.com/pie-framework/pie-elements/commit/ce99f6af50cb855b666a6df9340f9f5445fde4c4))
93
-
94
- ## [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)
65
+ ### Features
95
66
 
96
- **Note:** Version bump only for package @pie-element/hotspot
67
+ - **hotspot:** add ariaLabel to shapes for improved accessibility PIE-639 ([8791de3](https://github.com/pie-framework/pie-elements/commit/8791de36640adc85a8cf43d095a092bce6d7e7a1))
68
+ - **hotspot:** enhance focus handling and default hover outline color PIE-637 PIE-640 ([249d6e9](https://github.com/pie-framework/pie-elements/commit/249d6e9ae2da47a008ea0b5d73f34b64fd451795))
97
69
 
98
70
  # [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)
99
71
 
package/configure/CHANGELOG.md CHANGED
@@ -3,79 +3,66 @@
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.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)
6
+ # [10.4.0-beta.8](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-configure@10.4.0-beta.7...@pie-element/hotspot-configure@10.4.0-beta.8) (2026-08-26)
7
7
 
8
8
  **Note:** Version bump only for package @pie-element/hotspot-configure
9
9
 
10
- # [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)
10
+ # [10.4.0-beta.7](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-configure@10.4.0-beta.6...@pie-element/hotspot-configure@10.4.0-beta.7) (2026-08-20)
11
11
 
12
- ### Features
13
-
14
- - bump libs PIE-856, PIE-681, PIE-927 ([cb26d7a](https://github.com/pie-framework/pie-elements/commit/cb26d7afa6c99522533c321d5ff8ce3148a66e9e))
15
-
16
- ## [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)
12
+ **Note:** Version bump only for package @pie-element/hotspot-configure
17
13
 
18
- ### Bug Fixes
14
+ # [10.4.0-beta.6](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-configure@10.4.0-beta.5...@pie-element/hotspot-configure@10.4.0-beta.6) (2026-08-14)
19
15
 
20
- - bump libs and shared modules PIE-681, PIE-708 ([08af8b5](https://github.com/pie-framework/pie-elements/commit/08af8b5802aecc8ee5454a1b6d60277d7ec94204))
16
+ **Note:** Version bump only for package @pie-element/hotspot-configure
21
17
 
22
- ## [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)
18
+ # [10.4.0-beta.5](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-configure@10.4.0-beta.4...@pie-element/hotspot-configure@10.4.0-beta.5) (2026-08-11)
23
19
 
24
20
  **Note:** Version bump only for package @pie-element/hotspot-configure
25
21
 
26
- ## [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)
22
+ # [10.4.0-beta.4](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-configure@10.4.0-beta.3...@pie-element/hotspot-configure@10.4.0-beta.4) (2026-08-11)
27
23
 
28
- ### Features
29
-
30
- - **hotspot:** enhance focus handling and default hover outline color PIE-637 PIE-640 ([249d6e9](https://github.com/pie-framework/pie-elements/commit/249d6e9ae2da47a008ea0b5d73f34b64fd451795))
24
+ **Note:** Version bump only for package @pie-element/hotspot-configure
31
25
 
32
- # [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)
26
+ # [10.4.0-beta.3](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-configure@10.4.0-beta.2...@pie-element/hotspot-configure@10.4.0-beta.3) (2026-08-11)
33
27
 
34
- ### Features
28
+ **Note:** Version bump only for package @pie-element/hotspot-configure
35
29
 
36
- - **hotspot:** enhance focus handling and default hover outline color PIE-637 PIE-640 ([249d6e9](https://github.com/pie-framework/pie-elements/commit/249d6e9ae2da47a008ea0b5d73f34b64fd451795))
30
+ # [10.4.0-beta.2](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-configure@10.4.0-beta.1...@pie-element/hotspot-configure@10.4.0-beta.2) (2026-08-11)
37
31
 
38
- ## [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)
32
+ **Note:** Version bump only for package @pie-element/hotspot-configure
39
33
 
40
- ### Bug Fixes
34
+ # [10.4.0-beta.1](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-configure@10.4.0-beta.0...@pie-element/hotspot-configure@10.4.0-beta.1) (2026-08-07)
41
35
 
42
- - bump libs & shared modules PIE-706, PIE-702, PIE-679, PIE-698 ([5b1a8c4](https://github.com/pie-framework/pie-elements/commit/5b1a8c4c3eba2126fc43d78fd0187e7cd11d5424))
36
+ **Note:** Version bump only for package @pie-element/hotspot-configure
43
37
 
44
- ## [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)
38
+ # [10.4.0-beta.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-configure@10.3.0-beta.0...@pie-element/hotspot-configure@10.4.0-beta.0) (2026-08-07)
45
39
 
46
- ### Bug Fixes
40
+ **Note:** Version bump only for package @pie-element/hotspot-configure
47
41
 
48
- - 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))
49
- - sync libs versions ([48b5be9](https://github.com/pie-framework/pie-elements/commit/48b5be9559eb5b5235ca05f51c5f0161032a7041))
42
+ # [10.3.0-beta.1](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-configure@10.3.0-beta.0...@pie-element/hotspot-configure@10.3.0-beta.1) (2026-08-07)
50
43
 
51
- ## [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)
44
+ **Note:** Version bump only for package @pie-element/hotspot-configure
52
45
 
53
- ### Bug Fixes
46
+ # [10.3.0-beta.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-configure@10.2.0-beta.0...@pie-element/hotspot-configure@10.3.0-beta.0) (2026-08-07)
54
47
 
55
- - 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))
56
- - handle webcomponent lifecycle on every element that misses it PIE-703 ([9d5923f](https://github.com/pie-framework/pie-elements/commit/9d5923f973f0471e1e8f69ad4309cfc63d980d93))
48
+ **Note:** Version bump only for package @pie-element/hotspot-configure
57
49
 
58
- ## [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)
50
+ # [10.2.0-beta.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-configure@10.1.0...@pie-element/hotspot-configure@10.2.0-beta.0) (2026-08-07)
59
51
 
60
52
  ### Bug Fixes
61
53
 
54
+ - bump libs & shared modules PIE-706, PIE-702, PIE-679, PIE-698 ([5b1a8c4](https://github.com/pie-framework/pie-elements/commit/5b1a8c4c3eba2126fc43d78fd0187e7cd11d5424))
55
+ - bump shared modules and libs PIE-600, PIE-602 ([ce99f6a](https://github.com/pie-framework/pie-elements/commit/ce99f6af50cb855b666a6df9340f9f5445fde4c4))
62
56
  - 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))
63
-
64
- ## [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)
65
-
66
- ### Bug Fixes
67
-
57
+ - 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))
58
+ - 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))
68
59
  - bump shared modules and libsPIE-603, PIE-604, PIE-663, PIE-662, PIE-678 ([e61c7a7](https://github.com/pie-framework/pie-elements/commit/e61c7a7d23744586337dfbb17a18ebfc656c202f))
60
+ - handle webcomponent lifecycle on every element that misses it PIE-703 ([9d5923f](https://github.com/pie-framework/pie-elements/commit/9d5923f973f0471e1e8f69ad4309cfc63d980d93))
61
+ - sync libs versions ([48b5be9](https://github.com/pie-framework/pie-elements/commit/48b5be9559eb5b5235ca05f51c5f0161032a7041))
69
62
 
70
- ## [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)
71
-
72
- ### Bug Fixes
73
-
74
- - bump shared modules and libs PIE-600, PIE-602 ([ce99f6a](https://github.com/pie-framework/pie-elements/commit/ce99f6af50cb855b666a6df9340f9f5445fde4c4))
75
-
76
- ## [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)
63
+ ### Features
77
64
 
78
- **Note:** Version bump only for package @pie-element/hotspot-configure
65
+ - **hotspot:** enhance focus handling and default hover outline color PIE-637 PIE-640 ([249d6e9](https://github.com/pie-framework/pie-elements/commit/249d6e9ae2da47a008ea0b5d73f34b64fd451795))
79
66
 
80
67
  # [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)
81
68
 
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.3.1",
4
+ "version": "10.4.0-beta.8",
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.17",
16
- "@pie-lib/editable-html-tip-tap": "2.1.15",
15
+ "@pie-lib/config-ui": "13.1.0-beta.6",
16
+ "@pie-lib/editable-html-tip-tap": "2.2.0-beta.6",
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,31 +3,59 @@
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.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)
6
+ # [8.4.0-beta.8](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-controller@8.4.0-beta.7...@pie-element/hotspot-controller@8.4.0-beta.8) (2026-08-26)
7
7
 
8
8
  **Note:** Version bump only for package @pie-element/hotspot-controller
9
9
 
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)
10
+ # [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)
11
11
 
12
- ### Features
12
+ **Note:** Version bump only for package @pie-element/hotspot-controller
13
13
 
14
- - **hotspot:** enhance focus handling and default hover outline color PIE-637 PIE-640 ([249d6e9](https://github.com/pie-framework/pie-elements/commit/249d6e9ae2da47a008ea0b5d73f34b64fd451795))
14
+ # [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)
15
+
16
+ **Note:** Version bump only for package @pie-element/hotspot-controller
15
17
 
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)
18
+ # [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)
17
19
 
18
- ### Features
20
+ **Note:** Version bump only for package @pie-element/hotspot-controller
19
21
 
20
- - **hotspot:** enhance focus handling and default hover outline color PIE-637 PIE-640 ([249d6e9](https://github.com/pie-framework/pie-elements/commit/249d6e9ae2da47a008ea0b5d73f34b64fd451795))
22
+ # [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)
23
+
24
+ **Note:** Version bump only for package @pie-element/hotspot-controller
25
+
26
+ # [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)
27
+
28
+ **Note:** Version bump only for package @pie-element/hotspot-controller
29
+
30
+ # [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)
31
+
32
+ **Note:** Version bump only for package @pie-element/hotspot-controller
21
33
 
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)
34
+ # [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)
35
+
36
+ **Note:** Version bump only for package @pie-element/hotspot-controller
37
+
38
+ # [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)
39
+
40
+ **Note:** Version bump only for package @pie-element/hotspot-controller
41
+
42
+ # [8.3.0-beta.1](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-controller@8.3.0-beta.0...@pie-element/hotspot-controller@8.3.0-beta.1) (2026-08-07)
43
+
44
+ **Note:** Version bump only for package @pie-element/hotspot-controller
45
+
46
+ # [8.3.0-beta.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-controller@8.2.0-beta.0...@pie-element/hotspot-controller@8.3.0-beta.0) (2026-08-07)
47
+
48
+ **Note:** Version bump only for package @pie-element/hotspot-controller
49
+
50
+ # [8.2.0-beta.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-controller@8.1.0...@pie-element/hotspot-controller@8.2.0-beta.0) (2026-08-07)
23
51
 
24
52
  ### Bug Fixes
25
53
 
26
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))
27
55
 
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)
56
+ ### Features
29
57
 
30
- **Note:** Version bump only for package @pie-element/hotspot-controller
58
+ - **hotspot:** enhance focus handling and default hover outline color PIE-637 PIE-640 ([249d6e9](https://github.com/pie-framework/pie-elements/commit/249d6e9ae2da47a008ea0b5d73f34b64fd451795))
31
59
 
32
60
  # [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)
33
61
 
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.2.2",
4
+ "version": "8.4.0-beta.8",
5
5
  "description": "",
6
6
  "scripts": {
7
7
  "test": "echo \"Error: no test specified\" && exit 1"
package/lib/hotspot/circle.js CHANGED
@@ -14,11 +14,6 @@ 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
- });
22
17
  (0, _defineProperty2.default)(this, "handleClick", e => {
23
18
  const {
24
19
  onClick,
@@ -45,7 +40,6 @@ class CircleComponent extends _react.default.Component {
45
40
  this.setState({
46
41
  hovered: true
47
42
  });
48
- this.moveGroupToTop();
49
43
  });
50
44
  (0, _defineProperty2.default)(this, "handleMouseLeave", () => {
51
45
  document.body.style.cursor = 'default';
@@ -58,18 +52,6 @@ class CircleComponent extends _react.default.Component {
58
52
  this.state = {
59
53
  hovered: false
60
54
  };
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
- }
73
55
  }
74
56
  render() {
75
57
  const {
@@ -116,7 +98,6 @@ class CircleComponent extends _react.default.Component {
116
98
  }
117
99
  const useHoveredStyle = (hovered || focused) && hoverOutlineColor;
118
100
  return /*#__PURE__*/_react.default.createElement(_reactKonva.Group, {
119
- ref: this.groupRef,
120
101
  scaleX: scale,
121
102
  scaleY: scale,
122
103
  onMouseLeave: this.handleMouseLeave,
package/lib/hotspot/circle.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"circle.js","names":["_react","_interopRequireDefault","require","_propTypes","_reactKonva","_imageKonvaTooltip","_icons","CircleComponent","React","Component","constructor","props","_defineProperty2","default","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":[]}
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":";;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,WAAA,GAAAF,OAAA;AACA,IAAAG,kBAAA,GAAAJ,sBAAA,CAAAC,OAAA;AACA,IAAAI,MAAA,GAAAJ,OAAA;AAEA,MAAMK,eAAe,SAASC,cAAK,CAACC,SAAS,CAAC;EAC5CC,WAAWA,CAACC,KAAK,EAAE;IACjB,KAAK,CAACA,KAAK,CAAC;IAAC,IAAAC,gBAAA,CAAAC,OAAA,uBAMAC,CAAC,IAAK;MACnB,MAAM;QAAEC,OAAO;QAAEC,EAAE;QAAEC,QAAQ;QAAEC;MAAS,CAAC,GAAG,IAAI,CAACP,KAAK;MAEtD,IAAI,CAACO,QAAQ,EAAE;QACbJ,CAAC,CAACK,YAAY,GAAG,IAAI;QACrBJ,OAAO,CAAC;UAAEC,EAAE;UAAEC,QAAQ,EAAE,CAACA,QAAQ;UAAEG,QAAQ,EAAE;QAAQ,CAAC,CAAC;MACzD;IACF,CAAC;IAAA,IAAAR,gBAAA,CAAAC,OAAA,4BAEkB,MAAM;MACvB,MAAM;QAAEK;MAAS,CAAC,GAAG,IAAI,CAACP,KAAK;MAE/B,IAAI,CAACO,QAAQ,EAAE;QACbG,QAAQ,CAACC,IAAI,CAACC,KAAK,CAACC,MAAM,GAAG,SAAS;MACxC;MACA,IAAI,CAACC,QAAQ,CAAC;QAAEC,OAAO,EAAE;MAAK,CAAC,CAAC;IAClC,CAAC;IAAA,IAAAd,gBAAA,CAAAC,OAAA,4BAEkB,MAAM;MACvBQ,QAAQ,CAACC,IAAI,CAACC,KAAK,CAACC,MAAM,GAAG,SAAS;MACtC,IAAI,CAACC,QAAQ,CAAC;QAAEC,OAAO,EAAE;MAAM,CAAC,CAAC;IACnC,CAAC;IAAA,IAAAd,gBAAA,CAAAC,OAAA,mCAEyB,CAACc,SAAS,EAAEC,aAAa,EAAEC,YAAY,KAC/DD,aAAa,GAAG,OAAO,GAAGD,SAAS,GAAGE,YAAY,GAAG,KAAK;IAAA,IAAAjB,gBAAA,CAAAC,OAAA,2BAE1C,CAACiB,kBAAkB,EAAEb,QAAQ,EAAEW,aAAa,EAAEG,WAAW,KACzEH,aAAa,IAAK,CAACA,aAAa,IAAI,CAACE,kBAAkB,IAAIb,QAAS,GAAGc,WAAW,GAAG,CAAC;IAhCtF,IAAI,CAACC,KAAK,GAAG;MACXN,OAAO,EAAE;IACX,CAAC;EACH;EA+BAO,MAAMA,CAAA,EAAG;IACP,MAAM;MACJC,MAAM;MACNC,YAAY;MACZR,SAAS;MACTS,cAAc;MACdC,iBAAiB;MACjBR,YAAY;MACZZ,QAAQ;MACRqB,OAAO;MACPC,CAAC;MACDC,CAAC;MACDC,YAAY;MACZV,WAAW;MACXW,KAAK;MACLd,aAAa;MACbe,oBAAoB;MACpBb;IACF,CAAC,GAAG,IAAI,CAACnB,KAAK;IAEd,MAAM;MAAEe;IAAQ,CAAC,GAAG,IAAI,CAACM,KAAK;IAE9B,MAAMY,kBAAkB,GAAGR,cAAc,GACrC,IAAI,CAACS,uBAAuB,CAAClB,SAAS,EAAEC,aAAa,EAAEC,YAAY,CAAC,GACpEA,YAAY;IAEhB,MAAMiB,YAAY,GAAG,IAAI,CAACC,eAAe,CAACjB,kBAAkB,EAAEb,QAAQ,EAAEW,aAAa,EAAEG,WAAW,CAAC;IAEnG,MAAMiB,KAAK,GAAGT,CAAC,GAAG,EAAE;IACpB,MAAMU,KAAK,GAAGT,CAAC,GAAG,EAAE,CAAC,CAAC;;IAEtB,IAAIU,OAAO;IACX,IAAIpB,kBAAkB,EAAE;MACtB,IAAKb,QAAQ,IAAIU,SAAS,IAAM,CAACV,QAAQ,IAAI,CAACU,SAAU,EAAE;QACxDuB,OAAO,GAAGC,gBAAS;MACrB;IACF,CAAC,MAAM;MACL,IAAIlC,QAAQ,EAAE;QACZ,IAAIU,SAAS,EAAE;UACbuB,OAAO,GAAGC,gBAAS;QACrB,CAAC,MAAM;UACLD,OAAO,GAAGE,cAAO;QACnB;MACF,CAAC,MAAM,IAAI,CAACzB,SAAS,EAAE;QACrBuB,OAAO,GAAGE,cAAO;MACnB;IACF;IAEA,MAAMC,eAAe,GAAG,CAAC3B,OAAO,IAAIY,OAAO,KAAKD,iBAAiB;IAEjE,oBACErC,MAAA,CAAAa,OAAA,CAAAyC,aAAA,CAAClD,WAAA,CAAAmD,KAAK;MAACC,MAAM,EAAEd,KAAM;MAACe,MAAM,EAAEf,KAAM;MAACgB,YAAY,EAAE,IAAI,CAACC,gBAAiB;MAACC,YAAY,EAAE,IAAI,CAACC;IAAiB,gBAC5G7D,MAAA,CAAAa,OAAA,CAAAyC,aAAA,CAAClD,WAAA,CAAA0D,MAAM;MACL5B,MAAM,EAAEA,MAAO;MACf6B,IAAI,EAAE9C,QAAQ,IAAI0B,oBAAoB,GAAGA,oBAAoB,GAAGR,YAAa;MAC7EpB,OAAO,EAAE,IAAI,CAACiD,WAAY;MAC1BC,KAAK,EAAE,IAAI,CAACD,WAAY;MACxBE,SAAS,EAAE,KAAM;MACjBC,MAAM,EAAEd,eAAe,IAAI,CAACpC,QAAQ,GAAG,aAAa,GAAG2B,kBAAmB;MAC1Eb,WAAW,EAAEsB,eAAe,IAAI,CAACpC,QAAQ,GAAG,CAAC,GAAG6B,YAAa;MAC7DP,CAAC,EAAEA,CAAE;MACLC,CAAC,EAAEA;IAAE,CACN,CAAC,EACDa,eAAe,iBACdrD,MAAA,CAAAa,OAAA,CAAAyC,aAAA,CAAClD,WAAA,CAAAgE,IAAI;MACH7B,CAAC,EAAEA,CAAC,GAAGL,MAAO;MACdM,CAAC,EAAEA,CAAC,GAAGN,MAAO;MACdmC,KAAK,EAAEnC,MAAM,GAAG,CAAE;MAClBoC,MAAM,EAAEpC,MAAM,GAAG,CAAE;MACnBiC,MAAM,EAAE9B,iBAAkB;MAC1BN,WAAW,EAAEA,WAAY;MACzBwC,SAAS,EAAE;IAAM,CAClB,CACF,EACAnC,cAAc,IAAIc,OAAO,gBAAGlD,MAAA,CAAAa,OAAA,CAAAyC,aAAA,CAACjD,kBAAA,CAAAQ,OAAc;MAAC2D,GAAG,EAAEtB,OAAQ;MAACX,CAAC,EAAES,KAAM;MAACR,CAAC,EAAES,KAAM;MAACwB,OAAO,EAAEhC;IAAa,CAAE,CAAC,GAAG,IACtG,CAAC;EAEZ;AACF;AAEAlC,eAAe,CAACmE,SAAS,GAAG;EAC1BxC,MAAM,EAAEyC,kBAAS,CAACC,MAAM,CAACC,UAAU;EACnC1C,YAAY,EAAEwC,kBAAS,CAACG,MAAM,CAACD,UAAU;EACzC7D,EAAE,EAAE2D,kBAAS,CAACG,MAAM,CAACD,UAAU;EAC/BlD,SAAS,EAAEgD,kBAAS,CAACI,SAAS,CAAC,CAACJ,kBAAS,CAACK,IAAI,EAAEL,kBAAS,CAACG,MAAM,CAAC,CAAC;EAClE1C,cAAc,EAAEuC,kBAAS,CAACK,IAAI,CAACH,UAAU;EACzC3D,QAAQ,EAAEyD,kBAAS,CAACK,IAAI,CAACH,UAAU;EACnCvC,OAAO,EAAEqC,kBAAS,CAACK,IAAI;EACvB3C,iBAAiB,EAAEsC,kBAAS,CAACG,MAAM;EACnC/D,OAAO,EAAE4D,kBAAS,CAACM,IAAI,CAACJ,UAAU;EAClChD,YAAY,EAAE8C,kBAAS,CAACG,MAAM,CAACD,UAAU;EACzC5D,QAAQ,EAAE0D,kBAAS,CAACK,IAAI,CAACH,UAAU;EACnCtC,CAAC,EAAEoC,kBAAS,CAACC,MAAM,CAACC,UAAU;EAC9BrC,CAAC,EAAEmC,kBAAS,CAACC,MAAM,CAACC,UAAU;EAC9BpC,YAAY,EAAEkC,kBAAS,CAACG,MAAM;EAC9B/C,WAAW,EAAE4C,kBAAS,CAACC,MAAM;EAC7BlC,KAAK,EAAEiC,kBAAS,CAACC,MAAM;EACvBjC,oBAAoB,EAAEgC,kBAAS,CAACG,MAAM;EACtClD,aAAa,EAAE+C,kBAAS,CAACK,IAAI,CAACH,UAAU;EACxC/C,kBAAkB,EAAE6C,kBAAS,CAACK,IAAI,CAACH;AACrC,CAAC;AAEDtE,eAAe,CAAC2E,YAAY,GAAG;EAC7BvD,SAAS,EAAE,KAAK;EAChBc,YAAY,EAAE,IAAI;EAClBH,OAAO,EAAE,KAAK;EACdP,WAAW,EAAE,CAAC;EACdW,KAAK,EAAE;AACT,CAAC;AAAC,IAAAyC,QAAA,GAAAC,OAAA,CAAAvE,OAAA,GAEaN,eAAe","ignoreList":[]}
package/lib/hotspot/polygon.js CHANGED
@@ -14,11 +14,6 @@ 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
- });
22
17
  (0, _defineProperty2.default)(this, "getPolygonCenter", points => {
23
18
  const x = points.map(({
24
19
  x
@@ -69,7 +64,6 @@ class PolygonComponent extends _react.default.Component {
69
64
  this.setState({
70
65
  hovered: true
71
66
  });
72
- this.moveGroupToTop();
73
67
  });
74
68
  (0, _defineProperty2.default)(this, "handleMouseLeave", () => {
75
69
  document.body.style.cursor = 'default';
@@ -82,18 +76,6 @@ class PolygonComponent extends _react.default.Component {
82
76
  this.state = {
83
77
  hovered: false
84
78
  };
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
- }
97
79
  }
98
80
  render() {
99
81
  const {
@@ -165,7 +147,6 @@ class PolygonComponent extends _react.default.Component {
165
147
  const rectWidth = maxX - minX;
166
148
  const rectHeight = maxY - minY;
167
149
  return /*#__PURE__*/_react.default.createElement(_reactKonva.Group, {
168
- ref: this.groupRef,
169
150
  scaleX: scale,
170
151
  scaleY: scale,
171
152
  onMouseEnter: this.handleMouseEnter,
package/lib/hotspot/polygon.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"polygon.js","names":["_react","_interopRequireDefault","require","_propTypes","_reactKonva","_imageKonvaTooltip","_icons","PolygonComponent","React","Component","constructor","props","_defineProperty2","default","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":[]}
1
+ {"version":3,"file":"polygon.js","names":["_react","_interopRequireDefault","require","_propTypes","_reactKonva","_imageKonvaTooltip","_icons","PolygonComponent","React","Component","constructor","props","_defineProperty2","default","points","x","map","y","minX","Math","min","apply","maxX","max","minY","maxY","parsedPoints","forEach","push","e","onClick","id","selected","disabled","cancelBubble","selector","document","body","style","cursor","setState","hovered","isCorrect","markAsCorrect","outlineColor","showCorrectEnabled","strokeWidth","state","render","hotspotColor","isEvaluateMode","hoverOutlineColor","focused","evaluateText","scale","selectedHotspotColor","outlineColorParsed","getEvaluateOutlineColor","outlineWidth","getOutlineWidth","pointsParsed","parsePointsForKonva","center","getPolygonCenter","iconX","iconY","iconSrc","faCorrect","faWrong","useHoveredStyle","xValues","filter","_","index","yValues","rectX","rectY","rectWidth","rectHeight","createElement","Group","scaleX","scaleY","onMouseEnter","handleMouseEnter","onMouseLeave","handleMouseLeave","Line","closed","fill","handleClick","onTap","draggable","stroke","position","Rect","width","height","listening","src","tooltip","propTypes","PropTypes","string","isRequired","bool","func","array","number","defaultProps","_default","exports"],"sources":["../../src/hotspot/polygon.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Line, Group, Rect } from 'react-konva';\nimport ImageComponent from './image-konva-tooltip';\nimport { faCorrect, faWrong } from './icons';\n\nclass PolygonComponent extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n hovered: false,\n };\n }\n\n getPolygonCenter = (points) => {\n const x = points.map(({ x }) => x);\n const y = points.map(({ y }) => y);\n const minX = Math.min.apply(null, x);\n const maxX = Math.max.apply(null, x);\n const minY = Math.min.apply(null, y);\n const maxY = Math.max.apply(null, y);\n return [(minX + maxX) / 2, (minY + maxY) / 2];\n };\n\n parsePointsForKonva = (points) => {\n const parsedPoints = [];\n points.forEach(({ x, y }) => {\n parsedPoints.push(x);\n parsedPoints.push(y);\n });\n return parsedPoints;\n };\n\n handleClick = (e) => {\n const { onClick, id, selected, disabled } = this.props;\n\n if (!disabled) {\n e.cancelBubble = true;\n onClick({ id, selected: !selected, selector: 'Mouse' });\n }\n };\n\n handleMouseEnter = () => {\n const { disabled } = this.props;\n\n if (!disabled) {\n document.body.style.cursor = 'pointer';\n }\n this.setState({ hovered: true });\n };\n\n handleMouseLeave = () => {\n document.body.style.cursor = 'default';\n this.setState({ hovered: false });\n };\n\n getEvaluateOutlineColor = (isCorrect, markAsCorrect, outlineColor) =>\n markAsCorrect ? 'green' : isCorrect ? outlineColor : 'red';\n\n getOutlineWidth = (showCorrectEnabled, selected, markAsCorrect, strokeWidth) =>\n markAsCorrect || (!markAsCorrect && !showCorrectEnabled && selected) ? strokeWidth : 0;\n\n render() {\n const {\n hotspotColor,\n isCorrect,\n isEvaluateMode,\n hoverOutlineColor,\n outlineColor,\n selected,\n focused,\n points,\n evaluateText,\n strokeWidth,\n scale,\n markAsCorrect,\n selectedHotspotColor,\n showCorrectEnabled,\n } = this.props;\n\n const { hovered } = this.state;\n\n const outlineColorParsed = isEvaluateMode\n ? this.getEvaluateOutlineColor(isCorrect, markAsCorrect, outlineColor)\n : outlineColor;\n const outlineWidth = this.getOutlineWidth(showCorrectEnabled, selected, markAsCorrect, strokeWidth);\n\n const pointsParsed = this.parsePointsForKonva(points);\n const center = this.getPolygonCenter(points);\n const iconX = center[0];\n const iconY = center[1];\n\n // \"Show Correct Answer\" Enabled:\n // - Correctly Selected: white checkmark in green circle\n // - Correctly Not Selected: none\n // - Incorrectly Selected: none\n // - Incorrectly Not Selected: white checkmark in green circle\n // \"Show Correct Answer\" Disabled:\n // - Correctly Selected:\n // - white checkmark in green circle\n // - heavy outline, as on “Gather”\n // - Correctly Not Selected: none\n // - Incorrectly Selected:\n // - white \"X\" in red circle\n // - heavy outline around the selection should appear in red\n // - Incorrectly Not Selected: white \"X\" in red circle\n let iconSrc;\n\n if (showCorrectEnabled) {\n if ((selected && isCorrect) || (!selected && !isCorrect)) {\n iconSrc = faCorrect;\n }\n } else {\n if (selected) {\n if (isCorrect) {\n iconSrc = faCorrect;\n } else {\n iconSrc = faWrong;\n }\n } else if (!isCorrect) {\n iconSrc = faWrong;\n }\n }\n const useHoveredStyle = (hovered || focused) && hoverOutlineColor;\n\n const xValues = pointsParsed.filter((_, index) => index % 2 === 0); // Even indices are x-coordinates\n const yValues = pointsParsed.filter((_, index) => index % 2 !== 0); // Odd indices are y-coordinates\n\n const minX = Math.min(...xValues);\n const maxX = Math.max(...xValues);\n const minY = Math.min(...yValues);\n const maxY = Math.max(...yValues);\n\n const rectX = minX;\n const rectY = minY;\n const rectWidth = maxX - minX;\n const rectHeight = maxY - minY;\n\n return (\n <Group scaleX={scale} scaleY={scale} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>\n <Line\n points={pointsParsed}\n closed={true}\n fill={selected && selectedHotspotColor ? selectedHotspotColor : hotspotColor}\n onClick={this.handleClick}\n onTap={this.handleClick}\n draggable={false}\n stroke={useHoveredStyle && !selected ? 'transparent' : outlineColorParsed}\n strokeWidth={useHoveredStyle && !selected ? 0 : outlineWidth}\n cursor=\"pointer\"\n position=\"relative\"\n />\n {useHoveredStyle && (\n <Rect\n x={rectX}\n y={rectY}\n width={rectWidth}\n height={rectHeight}\n stroke={hoverOutlineColor}\n strokeWidth={strokeWidth}\n listening={false}\n />\n )}\n {isEvaluateMode && iconSrc ? <ImageComponent src={iconSrc} x={iconX} y={iconY} tooltip={evaluateText} /> : null}\n </Group>\n );\n }\n}\n\nPolygonComponent.propTypes = {\n hotspotColor: PropTypes.string.isRequired,\n id: PropTypes.string.isRequired,\n isCorrect: PropTypes.bool.isRequired,\n isEvaluateMode: PropTypes.bool.isRequired,\n hoverOutlineColor: PropTypes.string,\n disabled: PropTypes.bool.isRequired,\n focused: PropTypes.bool,\n onClick: PropTypes.func.isRequired,\n outlineColor: PropTypes.string.isRequired,\n points: PropTypes.array.isRequired,\n selected: PropTypes.bool.isRequired,\n evaluateText: PropTypes.string,\n selectedHotspotColor: PropTypes.string,\n strokeWidth: PropTypes.number,\n scale: PropTypes.number,\n markAsCorrect: PropTypes.bool.isRequired,\n showCorrectEnabled: PropTypes.bool.isRequired,\n};\n\nPolygonComponent.defaultProps = {\n evaluateText: null,\n focused: false,\n strokeWidth: 5,\n scale: 1,\n};\n\nexport default PolygonComponent;\n"],"mappings":"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","ignoreList":[]}
package/lib/hotspot/rectangle.js CHANGED
@@ -14,11 +14,6 @@ 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
- });
22
17
  (0, _defineProperty2.default)(this, "handleClick", e => {
23
18
  const {
24
19
  onClick,
@@ -45,7 +40,6 @@ class RectComponent extends _react.default.Component {
45
40
  this.setState({
46
41
  hovered: true
47
42
  });
48
- this.moveGroupToTop();
49
43
  });
50
44
  (0, _defineProperty2.default)(this, "handleMouseLeave", () => {
51
45
  document.body.style.cursor = 'default';
@@ -58,18 +52,6 @@ class RectComponent extends _react.default.Component {
58
52
  this.state = {
59
53
  hovered: false
60
54
  };
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
- }
73
55
  }
74
56
  render() {
75
57
  const {
@@ -131,7 +113,6 @@ class RectComponent extends _react.default.Component {
131
113
  }
132
114
  const useHoveredStyle = (hovered || focused) && hoverOutlineColor;
133
115
  return /*#__PURE__*/_react.default.createElement(_reactKonva.Group, {
134
- ref: this.groupRef,
135
116
  scaleX: scale,
136
117
  scaleY: scale,
137
118
  onMouseLeave: this.handleMouseLeave,
package/lib/hotspot/rectangle.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"rectangle.js","names":["_react","_interopRequireDefault","require","_propTypes","_reactKonva","_imageKonvaTooltip","_icons","RectComponent","React","Component","constructor","props","_defineProperty2","default","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":[]}
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":";;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,WAAA,GAAAF,OAAA;AACA,IAAAG,kBAAA,GAAAJ,sBAAA,CAAAC,OAAA;AACA,IAAAI,MAAA,GAAAJ,OAAA;AAEA,MAAMK,aAAa,SAASC,cAAK,CAACC,SAAS,CAAC;EAC1CC,WAAWA,CAACC,KAAK,EAAE;IACjB,KAAK,CAACA,KAAK,CAAC;IAAC,IAAAC,gBAAA,CAAAC,OAAA,uBAMAC,CAAC,IAAK;MACnB,MAAM;QAAEC,OAAO;QAAEC,EAAE;QAAEC,QAAQ;QAAEC;MAAS,CAAC,GAAG,IAAI,CAACP,KAAK;MAEtD,IAAI,CAACO,QAAQ,EAAE;QACbJ,CAAC,CAACK,YAAY,GAAG,IAAI;QACrBJ,OAAO,CAAC;UAAEC,EAAE;UAAEC,QAAQ,EAAE,CAACA,QAAQ;UAAEG,QAAQ,EAAE;QAAQ,CAAC,CAAC;MACzD;IACF,CAAC;IAAA,IAAAR,gBAAA,CAAAC,OAAA,4BAEkB,MAAM;MACvB,MAAM;QAAEK;MAAS,CAAC,GAAG,IAAI,CAACP,KAAK;MAE/B,IAAI,CAACO,QAAQ,EAAE;QACbG,QAAQ,CAACC,IAAI,CAACC,KAAK,CAACC,MAAM,GAAG,SAAS;MACxC;MACA,IAAI,CAACC,QAAQ,CAAC;QAAEC,OAAO,EAAE;MAAK,CAAC,CAAC;IAClC,CAAC;IAAA,IAAAd,gBAAA,CAAAC,OAAA,4BAEkB,MAAM;MACvBQ,QAAQ,CAACC,IAAI,CAACC,KAAK,CAACC,MAAM,GAAG,SAAS;MACtC,IAAI,CAACC,QAAQ,CAAC;QAAEC,OAAO,EAAE;MAAM,CAAC,CAAC;IACnC,CAAC;IAAA,IAAAd,gBAAA,CAAAC,OAAA,mCAEyB,CAACc,SAAS,EAAEC,aAAa,EAAEC,YAAY,KAC/DD,aAAa,GAAG,OAAO,GAAGD,SAAS,GAAGE,YAAY,GAAG,KAAK;IAAA,IAAAjB,gBAAA,CAAAC,OAAA,2BAE1C,CAACiB,kBAAkB,EAAEb,QAAQ,EAAEW,aAAa,EAAEG,WAAW,KACzEH,aAAa,IAAK,CAACA,aAAa,IAAI,CAACE,kBAAkB,IAAIb,QAAS,GAAGc,WAAW,GAAG,CAAC;IAhCtF,IAAI,CAACC,KAAK,GAAG;MACXN,OAAO,EAAE;IACX,CAAC;EACH;EA+BAO,MAAMA,CAAA,EAAG;IACP,MAAM;MACJC,MAAM;MACNC,YAAY;MACZC,iBAAiB;MACjBC,oBAAoB;MACpBV,SAAS;MACTW,cAAc;MACdT,YAAY;MACZZ,QAAQ;MACRsB,OAAO;MACPC,KAAK;MACLC,CAAC;MACDC,CAAC;MACDC,YAAY;MACZZ,WAAW;MACXa,KAAK;MACLhB,aAAa;MACbE;IACF,CAAC,GAAG,IAAI,CAACnB,KAAK;IACd,MAAM;MAAEe;IAAQ,CAAC,GAAG,IAAI,CAACM,KAAK;IAE9B,MAAMa,kBAAkB,GAAGP,cAAc,GACrC,IAAI,CAACQ,uBAAuB,CAACnB,SAAS,EAAEC,aAAa,EAAEC,YAAY,CAAC,GACpEA,YAAY;IAEhB,MAAMkB,YAAY,GAAG,IAAI,CAACC,eAAe,CAAClB,kBAAkB,EAAEb,QAAQ,EAAEW,aAAa,EAAEG,WAAW,CAAC;IAEnG,MAAMkB,KAAK,GAAGR,CAAC,GAAGD,KAAK,GAAG,CAAC,GAAG,EAAE;IAChC,MAAMU,KAAK,GAAGR,CAAC,GAAGR,MAAM,GAAG,CAAC,GAAG,EAAE;;IAEjC;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA,IAAIiB,OAAO;IAEX,IAAIrB,kBAAkB,EAAE;MACtB,IAAKb,QAAQ,IAAIU,SAAS,IAAM,CAACV,QAAQ,IAAI,CAACU,SAAU,EAAE;QACxDwB,OAAO,GAAGC,gBAAS;MACrB;IACF,CAAC,MAAM;MACL,IAAInC,QAAQ,EAAE;QACZ,IAAIU,SAAS,EAAE;UACbwB,OAAO,GAAGC,gBAAS;QACrB,CAAC,MAAM;UACLD,OAAO,GAAGE,cAAO;QACnB;MACF,CAAC,MAAM,IAAI,CAAC1B,SAAS,EAAE;QACrBwB,OAAO,GAAGE,cAAO;MACnB;IACF;IAEA,MAAMC,eAAe,GAAG,CAAC5B,OAAO,IAAIa,OAAO,KAAKH,iBAAiB;IAEjE,oBACEpC,MAAA,CAAAa,OAAA,CAAA0C,aAAA,CAACnD,WAAA,CAAAoD,KAAK;MAACC,MAAM,EAAEb,KAAM;MAACc,MAAM,EAAEd,KAAM;MAACe,YAAY,EAAE,IAAI,CAACC,gBAAiB;MAACC,YAAY,EAAE,IAAI,CAACC;IAAiB,gBAC5G9D,MAAA,CAAAa,OAAA,CAAA0C,aAAA,CAACnD,WAAA,CAAA2D,IAAI;MACHtB,CAAC,EAAEA,CAAE;MACLC,CAAC,EAAEA,CAAE;MACLF,KAAK,EAAEA,KAAM;MACbN,MAAM,EAAEA,MAAO;MACf8B,IAAI,EAAE/C,QAAQ,IAAIoB,oBAAoB,GAAGA,oBAAoB,GAAGF,YAAa;MAC7EpB,OAAO,EAAE,IAAI,CAACkD,WAAY;MAC1BC,KAAK,EAAE,IAAI,CAACD,WAAY;MACxBE,SAAS,EAAE,KAAM;MACjBC,MAAM,EAAEd,eAAe,IAAI,CAACrC,QAAQ,GAAG,aAAa,GAAG4B,kBAAmB;MAC1Ed,WAAW,EAAEuB,eAAe,IAAI,CAACrC,QAAQ,GAAG,CAAC,GAAG8B,YAAa;MAC7DvB,MAAM,EAAC;IAAS,CACjB,CAAC,EACD8B,eAAe,iBACdtD,MAAA,CAAAa,OAAA,CAAA0C,aAAA,CAACnD,WAAA,CAAA2D,IAAI;MACHtB,CAAC,EAAEA,CAAE;MACLC,CAAC,EAAEA,CAAE;MACLF,KAAK,EAAEA,KAAM;MACbN,MAAM,EAAEA,MAAO;MACfkC,MAAM,EAAEhC,iBAAkB;MAC1BL,WAAW,EAAEA,WAAY;MACzBsC,SAAS,EAAE;IAAM,CAClB,CACF,EACA/B,cAAc,IAAIa,OAAO,gBAAGnD,MAAA,CAAAa,OAAA,CAAA0C,aAAA,CAAClD,kBAAA,CAAAQ,OAAc;MAACyD,GAAG,EAAEnB,OAAQ;MAACV,CAAC,EAAEQ,KAAM;MAACP,CAAC,EAAEQ,KAAM;MAACqB,OAAO,EAAE5B;IAAa,CAAE,CAAC,GAAG,IACtG,CAAC;EAEZ;AACF;AAEApC,aAAa,CAACiE,SAAS,GAAG;EACxBtC,MAAM,EAAEuC,kBAAS,CAACC,MAAM,CAACC,UAAU;EACnCxC,YAAY,EAAEsC,kBAAS,CAACG,MAAM,CAACD,UAAU;EACzC3D,EAAE,EAAEyD,kBAAS,CAACG,MAAM,CAACD,UAAU;EAC/BhD,SAAS,EAAE8C,kBAAS,CAACI,SAAS,CAAC,CAACJ,kBAAS,CAACK,IAAI,EAAEL,kBAAS,CAACG,MAAM,CAAC,CAAC;EAClEtC,cAAc,EAAEmC,kBAAS,CAACK,IAAI,CAACH,UAAU;EACzCvC,iBAAiB,EAAEqC,kBAAS,CAACG,MAAM;EACnC1D,QAAQ,EAAEuD,kBAAS,CAACK,IAAI,CAACH,UAAU;EACnCpC,OAAO,EAAEkC,kBAAS,CAACK,IAAI;EACvB/D,OAAO,EAAE0D,kBAAS,CAACM,IAAI,CAACJ,UAAU;EAClC9C,YAAY,EAAE4C,kBAAS,CAACG,MAAM,CAACD,UAAU;EACzC1D,QAAQ,EAAEwD,kBAAS,CAACK,IAAI,CAACH,UAAU;EACnCnC,KAAK,EAAEiC,kBAAS,CAACC,MAAM,CAACC,UAAU;EAClClC,CAAC,EAAEgC,kBAAS,CAACC,MAAM,CAACC,UAAU;EAC9BjC,CAAC,EAAE+B,kBAAS,CAACC,MAAM,CAACC,UAAU;EAC9BhC,YAAY,EAAE8B,kBAAS,CAACG,MAAM;EAC9B7C,WAAW,EAAE0C,kBAAS,CAACC,MAAM;EAC7B9B,KAAK,EAAE6B,kBAAS,CAACC,MAAM;EACvBrC,oBAAoB,EAAEoC,kBAAS,CAACG,MAAM;EACtChD,aAAa,EAAE6C,kBAAS,CAACK,IAAI,CAACH,UAAU;EACxC7C,kBAAkB,EAAE2C,kBAAS,CAACK,IAAI,CAACH;AACrC,CAAC;AAEDpE,aAAa,CAACyE,YAAY,GAAG;EAC3BrD,SAAS,EAAE,KAAK;EAChBgB,YAAY,EAAE,IAAI;EAClBJ,OAAO,EAAE,KAAK;EACdR,WAAW,EAAE,CAAC;EACda,KAAK,EAAE;AACT,CAAC;AAAC,IAAAqC,QAAA,GAAAC,OAAA,CAAArE,OAAA,GAEaN,aAAa","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('.preview-prompt');
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('.preview-prompt');
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.1",
4
+ "version": "11.3.2-beta.2",
5
5
  "description": "",
6
6
  "publishConfig": {
7
7
  "access": "public"
@@ -12,9 +12,9 @@
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.7",
15
+ "@pie-lib/correct-answer-toggle": "4.0.5",
16
16
  "@pie-lib/math-rendering": "5.1.0",
17
- "@pie-lib/render-ui": "7.0.1",
17
+ "@pie-lib/render-ui": "6.1.3",
18
18
  "@pie-lib/test-utils": "2.0.2",
19
19
  "konva": "8.3.0",
20
20
  "prop-types": "^15.8.1",
@@ -24,7 +24,7 @@
24
24
  },
25
25
  "author": "pie framework developers",
26
26
  "license": "ISC",
27
- "gitHead": "5635523a84dd61f007275dcb853627b1ff0c6792",
27
+ "gitHead": "fcf6139719821e97ab40cb60e9a953fe427d86a4",
28
28
  "scripts": {
29
29
  "postpublish": "../../scripts/postpublish"
30
30
  },
package/src/hotspot/circle.jsx CHANGED
@@ -10,28 +10,8 @@ class CircleComponent extends React.Component {
10
10
  this.state = {
11
11
  hovered: false,
12
12
  };
13
- this.groupRef = React.createRef();
14
13
  }
15
14
 
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
-
35
15
  handleClick = (e) => {
36
16
  const { onClick, id, selected, disabled } = this.props;
37
17
 
@@ -48,7 +28,6 @@ class CircleComponent extends React.Component {
48
28
  document.body.style.cursor = 'pointer';
49
29
  }
50
30
  this.setState({ hovered: true });
51
- this.moveGroupToTop();
52
31
  };
53
32
 
54
33
  handleMouseLeave = () => {
@@ -113,13 +92,7 @@ class CircleComponent extends React.Component {
113
92
  const useHoveredStyle = (hovered || focused) && hoverOutlineColor;
114
93
 
115
94
  return (
116
- <Group
117
- ref={this.groupRef}
118
- scaleX={scale}
119
- scaleY={scale}
120
- onMouseLeave={this.handleMouseLeave}
121
- onMouseEnter={this.handleMouseEnter}
122
- >
95
+ <Group scaleX={scale} scaleY={scale} onMouseLeave={this.handleMouseLeave} onMouseEnter={this.handleMouseEnter}>
123
96
  <Circle
124
97
  radius={radius}
125
98
  fill={selected && selectedHotspotColor ? selectedHotspotColor : hotspotColor}
package/src/hotspot/polygon.jsx CHANGED
@@ -10,28 +10,8 @@ class PolygonComponent extends React.Component {
10
10
  this.state = {
11
11
  hovered: false,
12
12
  };
13
- this.groupRef = React.createRef();
14
13
  }
15
14
 
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
-
35
15
  getPolygonCenter = (points) => {
36
16
  const x = points.map(({ x }) => x);
37
17
  const y = points.map(({ y }) => y);
@@ -67,7 +47,6 @@ class PolygonComponent extends React.Component {
67
47
  document.body.style.cursor = 'pointer';
68
48
  }
69
49
  this.setState({ hovered: true });
70
- this.moveGroupToTop();
71
50
  };
72
51
 
73
52
  handleMouseLeave = () => {
@@ -158,13 +137,7 @@ class PolygonComponent extends React.Component {
158
137
  const rectHeight = maxY - minY;
159
138
 
160
139
  return (
161
- <Group
162
- ref={this.groupRef}
163
- scaleX={scale}
164
- scaleY={scale}
165
- onMouseEnter={this.handleMouseEnter}
166
- onMouseLeave={this.handleMouseLeave}
167
- >
140
+ <Group scaleX={scale} scaleY={scale} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
168
141
  <Line
169
142
  points={pointsParsed}
170
143
  closed={true}
package/src/hotspot/rectangle.jsx CHANGED
@@ -10,28 +10,8 @@ class RectComponent extends React.Component {
10
10
  this.state = {
11
11
  hovered: false,
12
12
  };
13
- this.groupRef = React.createRef();
14
13
  }
15
14
 
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
-
35
15
  handleClick = (e) => {
36
16
  const { onClick, id, selected, disabled } = this.props;
37
17
 
@@ -48,7 +28,6 @@ class RectComponent extends React.Component {
48
28
  document.body.style.cursor = 'pointer';
49
29
  }
50
30
  this.setState({ hovered: true });
51
- this.moveGroupToTop();
52
31
  };
53
32
 
54
33
  handleMouseLeave = () => {
@@ -128,13 +107,7 @@ class RectComponent extends React.Component {
128
107
  const useHoveredStyle = (hovered || focused) && hoverOutlineColor;
129
108
 
130
109
  return (
131
- <Group
132
- ref={this.groupRef}
133
- scaleX={scale}
134
- scaleY={scale}
135
- onMouseLeave={this.handleMouseLeave}
136
- onMouseEnter={this.handleMouseEnter}
137
- >
110
+ <Group scaleX={scale} scaleY={scale} onMouseLeave={this.handleMouseLeave} onMouseEnter={this.handleMouseEnter}>
138
111
  <Rect
139
112
  x={x}
140
113
  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('.preview-prompt');
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('.preview-prompt');
115
+ const isInsidePrompt = audio && audio.closest('#preview-prompt');
116
116
 
117
117
  if (!this._model) return;
118
118
  if (!this._model.autoplayAudioEnabled) return;