@pie-element/hotspot 11.3.1 → 11.3.2-beta.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/CHANGELOG.md +35 -59
  2. package/configure/CHANGELOG.md +31 -40
  3. package/configure/package.json +3 -3
  4. package/controller/CHANGELOG.md +42 -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,73 @@
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.3](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot@11.3.2-beta.2...@pie-element/hotspot@11.3.2-beta.3) (2026-09-04)
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.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)
11
11
 
12
- ### Bug Fixes
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))
16
-
17
- ### Features
18
-
19
- - bump libs PIE-856, PIE-681, PIE-927 ([cb26d7a](https://github.com/pie-framework/pie-elements/commit/cb26d7afa6c99522533c321d5ff8ce3148a66e9e))
20
-
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)
22
-
23
- ### Bug Fixes
24
-
25
- - bump libs and shared modules PIE-681, PIE-708 ([08af8b5](https://github.com/pie-framework/pie-elements/commit/08af8b5802aecc8ee5454a1b6d60277d7ec94204))
26
-
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)
28
-
29
- ### Bug Fixes
12
+ **Note:** Version bump only for package @pie-element/hotspot
30
13
 
31
- - **hotspot:** render hovered shape on top of other shapes PIE-900 ([23dfd21](https://github.com/pie-framework/pie-elements/commit/23dfd21a8c7b8909f2f494f47945831de79f40cc))
14
+ # [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)
32
15
 
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)
16
+ **Note:** Version bump only for package @pie-element/hotspot
34
17
 
35
- ### Bug Fixes
18
+ # [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)
36
19
 
37
- - **hotspot:** improve hover effect handling PIE-783 ([b27c51f](https://github.com/pie-framework/pie-elements/commit/b27c51f77eb41f6a3aee1e87c85ea7c8769b542f))
20
+ **Note:** Version bump only for package @pie-element/hotspot
38
21
 
39
- ### Features
22
+ # [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)
40
23
 
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))
24
+ **Note:** Version bump only for package @pie-element/hotspot
43
25
 
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)
26
+ # [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)
45
27
 
46
- ### Bug Fixes
28
+ **Note:** Version bump only for package @pie-element/hotspot
47
29
 
48
- - **hotspot:** improve hover effect handling PIE-783 ([b27c51f](https://github.com/pie-framework/pie-elements/commit/b27c51f77eb41f6a3aee1e87c85ea7c8769b542f))
30
+ # [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)
49
31
 
50
- ### Features
32
+ **Note:** Version bump only for package @pie-element/hotspot
51
33
 
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))
34
+ # [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)
54
35
 
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)
36
+ **Note:** Version bump only for package @pie-element/hotspot
56
37
 
57
- ### Bug Fixes
38
+ # [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)
58
39
 
59
- - 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))
40
+ **Note:** Version bump only for package @pie-element/hotspot
61
41
 
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)
42
+ # [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)
63
43
 
64
- ### Bug Fixes
44
+ **Note:** Version bump only for package @pie-element/hotspot
65
45
 
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))
46
+ # [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)
68
47
 
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)
48
+ **Note:** Version bump only for package @pie-element/hotspot
70
49
 
71
- ### Bug Fixes
50
+ # [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)
72
51
 
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))
52
+ **Note:** Version bump only for package @pie-element/hotspot
75
53
 
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)
54
+ # [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)
77
55
 
78
56
  ### Bug Fixes
79
57
 
58
+ - bump libs & shared modules PIE-706, PIE-702, PIE-679, PIE-698 ([5b1a8c4](https://github.com/pie-framework/pie-elements/commit/5b1a8c4c3eba2126fc43d78fd0187e7cd11d5424))
59
+ - bump shared modules and libs PIE-600, PIE-602 ([ce99f6a](https://github.com/pie-framework/pie-elements/commit/ce99f6af50cb855b666a6df9340f9f5445fde4c4))
80
60
  - bump shared modules and libs PIE-661 PIE-664 PIE-683 PIE-666 PIE-656 PIE-657 PIE-658 PIE-659 PIE-670 ([ebd6be4](https://github.com/pie-framework/pie-elements/commit/ebd6be4fd48fca41ad4c4908f606b25334731aed))
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
-
61
+ - bump shared modules and libs PIE-674, PIE-662, PIE-705, PIE-674, PIE-963 ([78a3f64](https://github.com/pie-framework/pie-elements/commit/78a3f64652c9581c61bd4159f3210fc1e32d8bcf))
62
+ - bump shared modules and libs PIE-695, PIE-697, PIE-699, PIE-680, PIE-714, PIE-665, PIE-656 ([4b76ae7](https://github.com/pie-framework/pie-elements/commit/4b76ae75d1c5ea6d55f7c6fb53f299dfcbda2b1f))
86
63
  - bump shared modules and libsPIE-603, PIE-604, PIE-663, PIE-662, PIE-678 ([e61c7a7](https://github.com/pie-framework/pie-elements/commit/e61c7a7d23744586337dfbb17a18ebfc656c202f))
64
+ - handle webcomponent lifecycle on every element that misses it PIE-703 ([9d5923f](https://github.com/pie-framework/pie-elements/commit/9d5923f973f0471e1e8f69ad4309cfc63d980d93))
65
+ - **hotspot:** improve hover effect handling PIE-783 ([b27c51f](https://github.com/pie-framework/pie-elements/commit/b27c51f77eb41f6a3aee1e87c85ea7c8769b542f))
66
+ - made sure math is rendered on mount and on updates in hotspot and text-select [PIE-718 ([fc55638](https://github.com/pie-framework/pie-elements/commit/fc55638a3b2cd7692c5f7212952d1d7baf36ff98))
67
+ - sync libs versions ([48b5be9](https://github.com/pie-framework/pie-elements/commit/48b5be9559eb5b5235ca05f51c5f0161032a7041))
87
68
 
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)
69
+ ### Features
95
70
 
96
- **Note:** Version bump only for package @pie-element/hotspot
71
+ - **hotspot:** add ariaLabel to shapes for improved accessibility PIE-639 ([8791de3](https://github.com/pie-framework/pie-elements/commit/8791de36640adc85a8cf43d095a092bce6d7e7a1))
72
+ - **hotspot:** enhance focus handling and default hover outline color PIE-637 PIE-640 ([249d6e9](https://github.com/pie-framework/pie-elements/commit/249d6e9ae2da47a008ea0b5d73f34b64fd451795))
97
73
 
98
74
  # [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
75
 
package/configure/CHANGELOG.md CHANGED
@@ -3,79 +3,70 @@
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.9](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-configure@10.4.0-beta.8...@pie-element/hotspot-configure@10.4.0-beta.9) (2026-09-04)
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.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)
11
11
 
12
- ### Features
12
+ **Note:** Version bump only for package @pie-element/hotspot-configure
13
13
 
14
- - bump libs PIE-856, PIE-681, PIE-927 ([cb26d7a](https://github.com/pie-framework/pie-elements/commit/cb26d7afa6c99522533c321d5ff8ce3148a66e9e))
14
+ # [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)
15
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)
16
+ **Note:** Version bump only for package @pie-element/hotspot-configure
17
17
 
18
- ### Bug Fixes
18
+ # [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
19
 
20
- - bump libs and shared modules PIE-681, PIE-708 ([08af8b5](https://github.com/pie-framework/pie-elements/commit/08af8b5802aecc8ee5454a1b6d60277d7ec94204))
20
+ **Note:** Version bump only for package @pie-element/hotspot-configure
21
21
 
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)
22
+ # [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
23
 
24
24
  **Note:** Version bump only for package @pie-element/hotspot-configure
25
25
 
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)
26
+ # [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
27
 
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))
28
+ **Note:** Version bump only for package @pie-element/hotspot-configure
31
29
 
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)
30
+ # [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
31
 
34
- ### Features
32
+ **Note:** Version bump only for package @pie-element/hotspot-configure
35
33
 
36
- - **hotspot:** enhance focus handling and default hover outline color PIE-637 PIE-640 ([249d6e9](https://github.com/pie-framework/pie-elements/commit/249d6e9ae2da47a008ea0b5d73f34b64fd451795))
34
+ # [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
35
 
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)
36
+ **Note:** Version bump only for package @pie-element/hotspot-configure
39
37
 
40
- ### Bug Fixes
38
+ # [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
39
 
42
- - bump libs & shared modules PIE-706, PIE-702, PIE-679, PIE-698 ([5b1a8c4](https://github.com/pie-framework/pie-elements/commit/5b1a8c4c3eba2126fc43d78fd0187e7cd11d5424))
40
+ **Note:** Version bump only for package @pie-element/hotspot-configure
43
41
 
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)
42
+ # [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
43
 
46
- ### Bug Fixes
44
+ **Note:** Version bump only for package @pie-element/hotspot-configure
47
45
 
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))
46
+ # [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
47
 
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)
48
+ **Note:** Version bump only for package @pie-element/hotspot-configure
52
49
 
53
- ### Bug Fixes
50
+ # [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
51
 
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))
52
+ **Note:** Version bump only for package @pie-element/hotspot-configure
57
53
 
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)
54
+ # [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
55
 
60
56
  ### Bug Fixes
61
57
 
58
+ - bump libs & shared modules PIE-706, PIE-702, PIE-679, PIE-698 ([5b1a8c4](https://github.com/pie-framework/pie-elements/commit/5b1a8c4c3eba2126fc43d78fd0187e7cd11d5424))
59
+ - bump shared modules and libs PIE-600, PIE-602 ([ce99f6a](https://github.com/pie-framework/pie-elements/commit/ce99f6af50cb855b666a6df9340f9f5445fde4c4))
62
60
  - bump shared modules and libs PIE-661 PIE-664 PIE-683 PIE-666 PIE-656 PIE-657 PIE-658 PIE-659 PIE-670 ([ebd6be4](https://github.com/pie-framework/pie-elements/commit/ebd6be4fd48fca41ad4c4908f606b25334731aed))
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
-
61
+ - bump shared modules and libs PIE-674, PIE-662, PIE-705, PIE-674, PIE-963 ([78a3f64](https://github.com/pie-framework/pie-elements/commit/78a3f64652c9581c61bd4159f3210fc1e32d8bcf))
62
+ - bump shared modules and libs PIE-695, PIE-697, PIE-699, PIE-680, PIE-714, PIE-665, PIE-656 ([4b76ae7](https://github.com/pie-framework/pie-elements/commit/4b76ae75d1c5ea6d55f7c6fb53f299dfcbda2b1f))
68
63
  - bump shared modules and libsPIE-603, PIE-604, PIE-663, PIE-662, PIE-678 ([e61c7a7](https://github.com/pie-framework/pie-elements/commit/e61c7a7d23744586337dfbb17a18ebfc656c202f))
64
+ - handle webcomponent lifecycle on every element that misses it PIE-703 ([9d5923f](https://github.com/pie-framework/pie-elements/commit/9d5923f973f0471e1e8f69ad4309cfc63d980d93))
65
+ - sync libs versions ([48b5be9](https://github.com/pie-framework/pie-elements/commit/48b5be9559eb5b5235ca05f51c5f0161032a7041))
69
66
 
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)
67
+ ### Features
77
68
 
78
- **Note:** Version bump only for package @pie-element/hotspot-configure
69
+ - **hotspot:** enhance focus handling and default hover outline color PIE-637 PIE-640 ([249d6e9](https://github.com/pie-framework/pie-elements/commit/249d6e9ae2da47a008ea0b5d73f34b64fd451795))
79
70
 
80
71
  # [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
72
 
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.9",
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.7",
16
+ "@pie-lib/editable-html-tip-tap": "2.2.0-beta.7",
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,63 @@
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.9](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-controller@8.4.0-beta.8...@pie-element/hotspot-controller@8.4.0-beta.9) (2026-09-04)
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.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)
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.7](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-controller@8.4.0-beta.6...@pie-element/hotspot-controller@8.4.0-beta.7) (2026-08-20)
15
15
 
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)
16
+ **Note:** Version bump only for package @pie-element/hotspot-controller
17
17
 
18
- ### Features
18
+ # [8.4.0-beta.6](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-controller@8.4.0-beta.5...@pie-element/hotspot-controller@8.4.0-beta.6) (2026-08-14)
19
19
 
20
- - **hotspot:** enhance focus handling and default hover outline color PIE-637 PIE-640 ([249d6e9](https://github.com/pie-framework/pie-elements/commit/249d6e9ae2da47a008ea0b5d73f34b64fd451795))
20
+ **Note:** Version bump only for package @pie-element/hotspot-controller
21
+
22
+ # [8.4.0-beta.5](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-controller@8.4.0-beta.4...@pie-element/hotspot-controller@8.4.0-beta.5) (2026-08-11)
23
+
24
+ **Note:** Version bump only for package @pie-element/hotspot-controller
25
+
26
+ # [8.4.0-beta.4](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-controller@8.4.0-beta.3...@pie-element/hotspot-controller@8.4.0-beta.4) (2026-08-11)
27
+
28
+ **Note:** Version bump only for package @pie-element/hotspot-controller
29
+
30
+ # [8.4.0-beta.3](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-controller@8.4.0-beta.2...@pie-element/hotspot-controller@8.4.0-beta.3) (2026-08-11)
31
+
32
+ **Note:** Version bump only for package @pie-element/hotspot-controller
33
+
34
+ # [8.4.0-beta.2](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-controller@8.4.0-beta.1...@pie-element/hotspot-controller@8.4.0-beta.2) (2026-08-11)
21
35
 
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)
36
+ **Note:** Version bump only for package @pie-element/hotspot-controller
37
+
38
+ # [8.4.0-beta.1](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-controller@8.4.0-beta.0...@pie-element/hotspot-controller@8.4.0-beta.1) (2026-08-07)
39
+
40
+ **Note:** Version bump only for package @pie-element/hotspot-controller
41
+
42
+ # [8.4.0-beta.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/hotspot-controller@8.3.0-beta.0...@pie-element/hotspot-controller@8.4.0-beta.0) (2026-08-07)
43
+
44
+ **Note:** Version bump only for package @pie-element/hotspot-controller
45
+
46
+ # [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)
47
+
48
+ **Note:** Version bump only for package @pie-element/hotspot-controller
49
+
50
+ # [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)
51
+
52
+ **Note:** Version bump only for package @pie-element/hotspot-controller
53
+
54
+ # [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
55
 
24
56
  ### Bug Fixes
25
57
 
26
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))
27
59
 
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)
60
+ ### Features
29
61
 
30
- **Note:** Version bump only for package @pie-element/hotspot-controller
62
+ - **hotspot:** enhance focus handling and default hover outline color PIE-637 PIE-640 ([249d6e9](https://github.com/pie-framework/pie-elements/commit/249d6e9ae2da47a008ea0b5d73f34b64fd451795))
31
63
 
32
64
  # [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
65
 
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.9",
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":"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","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":";;;;;;;;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,0BAoBE,MAAM;MACrB,IAAI,IAAI,CAACC,QAAQ,CAACC,OAAO,EAAE;QACzB,IAAI,CAACD,QAAQ,CAACC,OAAO,CAACC,SAAS,CAAC,CAAC;MACnC;IACF,CAAC;IAAA,IAAAJ,gBAAA,CAAAC,OAAA,uBAEcI,CAAC,IAAK;MACnB,MAAM;QAAEC,OAAO;QAAEC,EAAE;QAAEC,QAAQ;QAAEC;MAAS,CAAC,GAAG,IAAI,CAACV,KAAK;MAEtD,IAAI,CAACU,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,IAAAX,gBAAA,CAAAC,OAAA,4BAEkB,MAAM;MACvB,MAAM;QAAEQ;MAAS,CAAC,GAAG,IAAI,CAACV,KAAK;MAE/B,IAAI,CAACU,QAAQ,EAAE;QACbG,QAAQ,CAACC,IAAI,CAACC,KAAK,CAACC,MAAM,GAAG,SAAS;MACxC;MACA,IAAI,CAACC,QAAQ,CAAC;QAAEC,OAAO,EAAE;MAAK,CAAC,CAAC;MAChC,IAAI,CAACC,cAAc,CAAC,CAAC;IACvB,CAAC;IAAA,IAAAlB,gBAAA,CAAAC,OAAA,4BAEkB,MAAM;MACvBW,QAAQ,CAACC,IAAI,CAACC,KAAK,CAACC,MAAM,GAAG,SAAS;MACtC,IAAI,CAACC,QAAQ,CAAC;QAAEC,OAAO,EAAE;MAAM,CAAC,CAAC;IACnC,CAAC;IAAA,IAAAjB,gBAAA,CAAAC,OAAA,mCAEyB,CAACkB,SAAS,EAAEC,aAAa,EAAEC,YAAY,KAC/DD,aAAa,GAAG,OAAO,GAAGD,SAAS,GAAGE,YAAY,GAAG,KAAK;IAAA,IAAArB,gBAAA,CAAAC,OAAA,2BAE1C,CAACqB,kBAAkB,EAAEd,QAAQ,EAAEY,aAAa,EAAEG,WAAW,KACzEH,aAAa,IAAK,CAACA,aAAa,IAAI,CAACE,kBAAkB,IAAId,QAAS,GAAGe,WAAW,GAAG,CAAC;IArDtF,IAAI,CAACC,KAAK,GAAG;MACXP,OAAO,EAAE;IACX,CAAC;IACD,IAAI,CAACf,QAAQ,gBAAGN,cAAK,CAAC6B,SAAS,CAAC,CAAC;EACnC;EAEAC,iBAAiBA,CAAA,EAAG;IAClB,IAAI,IAAI,CAAC3B,KAAK,CAAC4B,OAAO,EAAE;MACtB,IAAI,CAACT,cAAc,CAAC,CAAC;IACvB;EACF;EAEAU,kBAAkBA,CAACC,SAAS,EAAE;IAC5B;IACA,IAAI,CAACA,SAAS,CAACF,OAAO,IAAI,IAAI,CAAC5B,KAAK,CAAC4B,OAAO,EAAE;MAC5C,IAAI,CAACT,cAAc,CAAC,CAAC;IACvB;EACF;EAsCAY,MAAMA,CAAA,EAAG;IACP,MAAM;MACJC,MAAM;MACNC,YAAY;MACZC,iBAAiB;MACjBC,oBAAoB;MACpBf,SAAS;MACTgB,cAAc;MACdd,YAAY;MACZb,QAAQ;MACRmB,OAAO;MACPS,KAAK;MACLC,CAAC;MACDC,CAAC;MACDC,YAAY;MACZhB,WAAW;MACXiB,KAAK;MACLpB,aAAa;MACbE;IACF,CAAC,GAAG,IAAI,CAACvB,KAAK;IACd,MAAM;MAAEkB;IAAQ,CAAC,GAAG,IAAI,CAACO,KAAK;IAE9B,MAAMiB,kBAAkB,GAAGN,cAAc,GACrC,IAAI,CAACO,uBAAuB,CAACvB,SAAS,EAAEC,aAAa,EAAEC,YAAY,CAAC,GACpEA,YAAY;IAEhB,MAAMsB,YAAY,GAAG,IAAI,CAACC,eAAe,CAACtB,kBAAkB,EAAEd,QAAQ,EAAEY,aAAa,EAAEG,WAAW,CAAC;IAEnG,MAAMsB,KAAK,GAAGR,CAAC,GAAGD,KAAK,GAAG,CAAC,GAAG,EAAE;IAChC,MAAMU,KAAK,GAAGR,CAAC,GAAGP,MAAM,GAAG,CAAC,GAAG,EAAE;;IAEjC;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA,IAAIgB,OAAO;IAEX,IAAIzB,kBAAkB,EAAE;MACtB,IAAKd,QAAQ,IAAIW,SAAS,IAAM,CAACX,QAAQ,IAAI,CAACW,SAAU,EAAE;QACxD4B,OAAO,GAAGC,gBAAS;MACrB;IACF,CAAC,MAAM;MACL,IAAIxC,QAAQ,EAAE;QACZ,IAAIW,SAAS,EAAE;UACb4B,OAAO,GAAGC,gBAAS;QACrB,CAAC,MAAM;UACLD,OAAO,GAAGE,cAAO;QACnB;MACF,CAAC,MAAM,IAAI,CAAC9B,SAAS,EAAE;QACrB4B,OAAO,GAAGE,cAAO;MACnB;IACF;IAEA,MAAMC,eAAe,GAAG,CAACjC,OAAO,IAAIU,OAAO,KAAKM,iBAAiB;IAEjE,oBACE7C,MAAA,CAAAa,OAAA,CAAAkD,aAAA,CAAC3D,WAAA,CAAA4D,KAAK;MACJC,GAAG,EAAE,IAAI,CAACnD,QAAS;MACnBoD,MAAM,EAAEd,KAAM;MACde,MAAM,EAAEf,KAAM;MACdgB,YAAY,EAAE,IAAI,CAACC,gBAAiB;MACpCC,YAAY,EAAE,IAAI,CAACC;IAAiB,gBAEpCvE,MAAA,CAAAa,OAAA,CAAAkD,aAAA,CAAC3D,WAAA,CAAAoE,IAAI;MACHvB,CAAC,EAAEA,CAAE;MACLC,CAAC,EAAEA,CAAE;MACLF,KAAK,EAAEA,KAAM;MACbL,MAAM,EAAEA,MAAO;MACf8B,IAAI,EAAErD,QAAQ,IAAI0B,oBAAoB,GAAGA,oBAAoB,GAAGF,YAAa;MAC7E1B,OAAO,EAAE,IAAI,CAACwD,WAAY;MAC1BC,KAAK,EAAE,IAAI,CAACD,WAAY;MACxBE,SAAS,EAAE,KAAM;MACjBC,MAAM,EAAEf,eAAe,IAAI,CAAC1C,QAAQ,GAAG,aAAa,GAAGiC,kBAAmB;MAC1ElB,WAAW,EAAE2B,eAAe,IAAI,CAAC1C,QAAQ,GAAG,CAAC,GAAGmC,YAAa;MAC7D5B,MAAM,EAAC;IAAS,CACjB,CAAC,EACDmC,eAAe,iBACd9D,MAAA,CAAAa,OAAA,CAAAkD,aAAA,CAAC3D,WAAA,CAAAoE,IAAI;MACHvB,CAAC,EAAEA,CAAE;MACLC,CAAC,EAAEA,CAAE;MACLF,KAAK,EAAEA,KAAM;MACbL,MAAM,EAAEA,MAAO;MACfkC,MAAM,EAAEhC,iBAAkB;MAC1BV,WAAW,EAAEA,WAAY;MACzB2C,SAAS,EAAE;IAAM,CAClB,CACF,EACA/B,cAAc,IAAIY,OAAO,gBAAG3D,MAAA,CAAAa,OAAA,CAAAkD,aAAA,CAAC1D,kBAAA,CAAAQ,OAAc;MAACkE,GAAG,EAAEpB,OAAQ;MAACV,CAAC,EAAEQ,KAAM;MAACP,CAAC,EAAEQ,KAAM;MAACsB,OAAO,EAAE7B;IAAa,CAAE,CAAC,GAAG,IACtG,CAAC;EAEZ;AACF;AAEA5C,aAAa,CAAC0E,SAAS,GAAG;EACxBtC,MAAM,EAAEuC,kBAAS,CAACC,MAAM,CAACC,UAAU;EACnCxC,YAAY,EAAEsC,kBAAS,CAACG,MAAM,CAACD,UAAU;EACzCjE,EAAE,EAAE+D,kBAAS,CAACG,MAAM,CAACD,UAAU;EAC/BrD,SAAS,EAAEmD,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;EACnChE,QAAQ,EAAE6D,kBAAS,CAACK,IAAI,CAACH,UAAU;EACnC7C,OAAO,EAAE2C,kBAAS,CAACK,IAAI;EACvBrE,OAAO,EAAEgE,kBAAS,CAACM,IAAI,CAACJ,UAAU;EAClCnD,YAAY,EAAEiD,kBAAS,CAACG,MAAM,CAACD,UAAU;EACzChE,QAAQ,EAAE8D,kBAAS,CAACK,IAAI,CAACH,UAAU;EACnCpC,KAAK,EAAEkC,kBAAS,CAACC,MAAM,CAACC,UAAU;EAClCnC,CAAC,EAAEiC,kBAAS,CAACC,MAAM,CAACC,UAAU;EAC9BlC,CAAC,EAAEgC,kBAAS,CAACC,MAAM,CAACC,UAAU;EAC9BjC,YAAY,EAAE+B,kBAAS,CAACG,MAAM;EAC9BlD,WAAW,EAAE+C,kBAAS,CAACC,MAAM;EAC7B/B,KAAK,EAAE8B,kBAAS,CAACC,MAAM;EACvBrC,oBAAoB,EAAEoC,kBAAS,CAACG,MAAM;EACtCrD,aAAa,EAAEkD,kBAAS,CAACK,IAAI,CAACH,UAAU;EACxClD,kBAAkB,EAAEgD,kBAAS,CAACK,IAAI,CAACH;AACrC,CAAC;AAED7E,aAAa,CAACkF,YAAY,GAAG;EAC3B1D,SAAS,EAAE,KAAK;EAChBoB,YAAY,EAAE,IAAI;EAClBZ,OAAO,EAAE,KAAK;EACdJ,WAAW,EAAE,CAAC;EACdiB,KAAK,EAAE;AACT,CAAC;AAAC,IAAAsC,QAAA,GAAAC,OAAA,CAAA9E,OAAA,GAEaN,aAAa","ignoreList":[]}
1
+ {"version":3,"file":"rectangle.js","names":["_react","_interopRequireDefault","require","_propTypes","_reactKonva","_imageKonvaTooltip","_icons","RectComponent","React","Component","constructor","props","_defineProperty2","default","e","onClick","id","selected","disabled","cancelBubble","selector","document","body","style","cursor","setState","hovered","isCorrect","markAsCorrect","outlineColor","showCorrectEnabled","strokeWidth","state","render","height","hotspotColor","hoverOutlineColor","selectedHotspotColor","isEvaluateMode","focused","width","x","y","evaluateText","scale","outlineColorParsed","getEvaluateOutlineColor","outlineWidth","getOutlineWidth","iconX","iconY","iconSrc","faCorrect","faWrong","useHoveredStyle","createElement","Group","scaleX","scaleY","onMouseLeave","handleMouseLeave","onMouseEnter","handleMouseEnter","Rect","fill","handleClick","onTap","draggable","stroke","listening","src","tooltip","propTypes","PropTypes","number","isRequired","string","oneOfType","bool","func","defaultProps","_default","exports"],"sources":["../../src/hotspot/rectangle.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Rect, Group } from 'react-konva';\nimport ImageComponent from './image-konva-tooltip';\nimport { faCorrect, faWrong } from './icons';\n\nclass RectComponent extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n hovered: false,\n };\n }\n\n handleClick = (e) => {\n const { onClick, id, selected, disabled } = this.props;\n\n if (!disabled) {\n e.cancelBubble = true;\n onClick({ id, selected: !selected, selector: 'Mouse' });\n }\n };\n\n handleMouseEnter = () => {\n const { disabled } = this.props;\n\n if (!disabled) {\n document.body.style.cursor = 'pointer';\n }\n this.setState({ hovered: true });\n };\n\n handleMouseLeave = () => {\n document.body.style.cursor = 'default';\n this.setState({ hovered: false });\n };\n\n getEvaluateOutlineColor = (isCorrect, markAsCorrect, outlineColor) =>\n markAsCorrect ? 'green' : isCorrect ? outlineColor : 'red';\n\n getOutlineWidth = (showCorrectEnabled, selected, markAsCorrect, strokeWidth) =>\n markAsCorrect || (!markAsCorrect && !showCorrectEnabled && selected) ? strokeWidth : 0;\n\n render() {\n const {\n height,\n hotspotColor,\n hoverOutlineColor,\n selectedHotspotColor,\n isCorrect,\n isEvaluateMode,\n outlineColor,\n selected,\n focused,\n width,\n x,\n y,\n evaluateText,\n strokeWidth,\n scale,\n markAsCorrect,\n showCorrectEnabled,\n } = this.props;\n const { hovered } = this.state;\n\n const outlineColorParsed = isEvaluateMode\n ? this.getEvaluateOutlineColor(isCorrect, markAsCorrect, outlineColor)\n : outlineColor;\n\n const outlineWidth = this.getOutlineWidth(showCorrectEnabled, selected, markAsCorrect, strokeWidth);\n\n const iconX = x + width / 2 - 10;\n const iconY = y + height / 2 - 10;\n\n // \"Show Correct Answer\" Enabled:\n // - Correctly Selected: white checkmark in green circle\n // - Correctly Not Selected: none\n // - Incorrectly Selected: none\n // - Incorrectly Not Selected: white checkmark in green circle\n // \"Show Correct Answer\" Disabled:\n // - Correctly Selected:\n // - white checkmark in green circle\n // - heavy outline, as on “Gather”\n // - Correctly Not Selected: none\n // - Incorrectly Selected:\n // - white \"X\" in red circle\n // - heavy outline around the selection should appear in red\n // - Incorrectly Not Selected: white \"X\" in red circle\n let iconSrc;\n\n if (showCorrectEnabled) {\n if ((selected && isCorrect) || (!selected && !isCorrect)) {\n iconSrc = faCorrect;\n }\n } else {\n if (selected) {\n if (isCorrect) {\n iconSrc = faCorrect;\n } else {\n iconSrc = faWrong;\n }\n } else if (!isCorrect) {\n iconSrc = faWrong;\n }\n }\n\n const useHoveredStyle = (hovered || focused) && hoverOutlineColor;\n\n return (\n <Group scaleX={scale} scaleY={scale} onMouseLeave={this.handleMouseLeave} onMouseEnter={this.handleMouseEnter}>\n <Rect\n x={x}\n y={y}\n width={width}\n height={height}\n fill={selected && selectedHotspotColor ? selectedHotspotColor : hotspotColor}\n onClick={this.handleClick}\n onTap={this.handleClick}\n draggable={false}\n stroke={useHoveredStyle && !selected ? 'transparent' : outlineColorParsed}\n strokeWidth={useHoveredStyle && !selected ? 0 : outlineWidth}\n cursor=\"pointer\"\n />\n {useHoveredStyle && (\n <Rect\n x={x}\n y={y}\n width={width}\n height={height}\n stroke={hoverOutlineColor}\n strokeWidth={strokeWidth}\n listening={false}\n />\n )}\n {isEvaluateMode && iconSrc ? <ImageComponent src={iconSrc} x={iconX} y={iconY} tooltip={evaluateText} /> : null}\n </Group>\n );\n }\n}\n\nRectComponent.propTypes = {\n height: PropTypes.number.isRequired,\n hotspotColor: PropTypes.string.isRequired,\n id: PropTypes.string.isRequired,\n isCorrect: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),\n isEvaluateMode: PropTypes.bool.isRequired,\n hoverOutlineColor: PropTypes.string,\n disabled: PropTypes.bool.isRequired,\n focused: PropTypes.bool,\n onClick: PropTypes.func.isRequired,\n outlineColor: PropTypes.string.isRequired,\n selected: PropTypes.bool.isRequired,\n width: PropTypes.number.isRequired,\n x: PropTypes.number.isRequired,\n y: PropTypes.number.isRequired,\n evaluateText: PropTypes.string,\n strokeWidth: PropTypes.number,\n scale: PropTypes.number,\n selectedHotspotColor: PropTypes.string,\n markAsCorrect: PropTypes.bool.isRequired,\n showCorrectEnabled: PropTypes.bool.isRequired,\n};\n\nRectComponent.defaultProps = {\n isCorrect: false,\n evaluateText: null,\n focused: false,\n strokeWidth: 5,\n scale: 1,\n};\n\nexport default RectComponent;\n"],"mappings":"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","ignoreList":[]}
package/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.3",
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": "2a249872734d754fa08699346a3298515802a1ba",
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;