@pie-element/image-cloze-association 10.3.1-beta.2 → 10.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +52 -26
- package/configure/CHANGELOG.md +44 -25
- package/configure/package.json +3 -3
- package/controller/CHANGELOG.md +6 -38
- package/controller/package.json +1 -1
- package/lib/image-container.js +12 -3
- package/lib/image-container.js.map +1 -1
- package/lib/image-drop-target.js +46 -6
- package/lib/image-drop-target.js.map +1 -1
- package/lib/index.js +2 -2
- package/lib/index.js.map +1 -1
- package/lib/keyboard-coordinates.js +111 -0
- package/lib/keyboard-coordinates.js.map +1 -0
- package/lib/possible-response.js +36 -5
- package/lib/possible-response.js.map +1 -1
- package/lib/possible-responses.js +39 -19
- package/lib/possible-responses.js.map +1 -1
- package/lib/root.js +120 -6
- package/lib/root.js.map +1 -1
- package/package.json +5 -5
- package/src/__tests__/image-drop-target.test.jsx +169 -0
- package/src/__tests__/keyboard-coordinates.test.js +127 -0
- package/src/__tests__/possible-response.test.jsx +113 -0
- package/src/__tests__/possible-responses.test.jsx +63 -0
- package/src/__tests__/root.test.jsx +261 -2
- package/src/image-container.jsx +9 -0
- package/src/image-drop-target.jsx +44 -1
- package/src/index.js +2 -2
- package/src/keyboard-coordinates.js +115 -0
- package/src/possible-response.jsx +45 -1
- package/src/possible-responses.jsx +37 -16
- package/src/root.jsx +117 -2
package/CHANGELOG.md
CHANGED
|
@@ -3,64 +3,90 @@
|
|
|
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
|
|
6
|
+
## [10.3.1](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association@10.3.0...@pie-element/image-cloze-association@10.3.1) (2026-09-04)
|
|
7
7
|
|
|
8
|
-
|
|
8
|
+
### Bug Fixes
|
|
9
9
|
|
|
10
|
-
|
|
10
|
+
- bump libs PIE-978, PIE-980 ([96489ba](https://github.com/pie-framework/pie-elements/commit/96489ba3c220604f21c3ce4500d79f4389266e9e))
|
|
11
11
|
|
|
12
|
-
|
|
12
|
+
# [10.3.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association@10.2.0...@pie-element/image-cloze-association@10.3.0) (2026-08-26)
|
|
13
13
|
|
|
14
|
-
|
|
14
|
+
### Features
|
|
15
15
|
|
|
16
|
-
**
|
|
16
|
+
- **image-cloze-association:** add additional keyboard navigation (Tab/Shift+Tab placement) PIE-802 and click-to-select/click-to-place functionality PIE-795 ([603e597](https://github.com/pie-framework/pie-elements/commit/603e5972c1de522b5578ade70fcf26be31cb5685))
|
|
17
17
|
|
|
18
|
-
# [10.
|
|
18
|
+
# [10.2.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association@10.1.11...@pie-element/image-cloze-association@10.2.0) (2026-08-21)
|
|
19
19
|
|
|
20
|
-
|
|
20
|
+
### Bug Fixes
|
|
21
21
|
|
|
22
|
-
|
|
22
|
+
- 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))
|
|
23
|
+
- 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))
|
|
23
24
|
|
|
24
|
-
|
|
25
|
+
### Features
|
|
25
26
|
|
|
26
|
-
|
|
27
|
+
- bump libs PIE-856, PIE-681, PIE-927 ([cb26d7a](https://github.com/pie-framework/pie-elements/commit/cb26d7afa6c99522533c321d5ff8ce3148a66e9e))
|
|
27
28
|
|
|
28
|
-
|
|
29
|
+
## [10.1.11](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association@10.1.10...@pie-element/image-cloze-association@10.1.11) (2026-08-19)
|
|
29
30
|
|
|
30
|
-
|
|
31
|
+
### Bug Fixes
|
|
31
32
|
|
|
32
|
-
|
|
33
|
+
- bump libs and shared modules PIE-681, PIE-708 ([08af8b5](https://github.com/pie-framework/pie-elements/commit/08af8b5802aecc8ee5454a1b6d60277d7ec94204))
|
|
33
34
|
|
|
34
|
-
|
|
35
|
+
## [10.1.10](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association@10.1.8...@pie-element/image-cloze-association@10.1.10) (2026-08-13)
|
|
35
36
|
|
|
36
37
|
**Note:** Version bump only for package @pie-element/image-cloze-association
|
|
37
38
|
|
|
38
|
-
|
|
39
|
+
## [10.1.9](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association@10.1.7...@pie-element/image-cloze-association@10.1.9) (2026-08-11)
|
|
39
40
|
|
|
40
41
|
**Note:** Version bump only for package @pie-element/image-cloze-association
|
|
41
42
|
|
|
42
|
-
|
|
43
|
+
## [10.1.8](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association@10.1.7...@pie-element/image-cloze-association@10.1.8) (2026-07-31)
|
|
43
44
|
|
|
44
45
|
**Note:** Version bump only for package @pie-element/image-cloze-association
|
|
45
46
|
|
|
46
|
-
|
|
47
|
+
## [10.1.7](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association@10.1.6...@pie-element/image-cloze-association@10.1.7) (2026-07-08)
|
|
47
48
|
|
|
48
|
-
|
|
49
|
+
### Bug Fixes
|
|
50
|
+
|
|
51
|
+
- bump libs & shared modules PIE-706, PIE-702, PIE-679, PIE-698 ([5b1a8c4](https://github.com/pie-framework/pie-elements/commit/5b1a8c4c3eba2126fc43d78fd0187e7cd11d5424))
|
|
49
52
|
|
|
50
|
-
|
|
53
|
+
## [10.1.6](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association@10.1.5...@pie-element/image-cloze-association@10.1.6) (2026-07-02)
|
|
51
54
|
|
|
52
55
|
### Bug Fixes
|
|
53
56
|
|
|
54
|
-
- bump libs & shared modules PIE-706, PIE-702, PIE-679, PIE-698 ([5b1a8c4](https://github.com/pie-framework/pie-elements/commit/5b1a8c4c3eba2126fc43d78fd0187e7cd11d5424))
|
|
55
|
-
- bump shared modules and libs PIE-600, PIE-602 ([ce99f6a](https://github.com/pie-framework/pie-elements/commit/ce99f6af50cb855b666a6df9340f9f5445fde4c4))
|
|
56
|
-
- bump shared modules and libs PIE-661 PIE-664 PIE-683 PIE-666 PIE-656 PIE-657 PIE-658 PIE-659 PIE-670 ([ebd6be4](https://github.com/pie-framework/pie-elements/commit/ebd6be4fd48fca41ad4c4908f606b25334731aed))
|
|
57
|
-
- bump shared modules and libs PIE-674, PIE-662, PIE-705, PIE-674, PIE-963 ([78a3f64](https://github.com/pie-framework/pie-elements/commit/78a3f64652c9581c61bd4159f3210fc1e32d8bcf))
|
|
58
57
|
- 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))
|
|
58
|
+
- sync libs versions ([48b5be9](https://github.com/pie-framework/pie-elements/commit/48b5be9559eb5b5235ca05f51c5f0161032a7041))
|
|
59
|
+
|
|
60
|
+
## [10.1.5](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association@10.1.4...@pie-element/image-cloze-association@10.1.5) (2026-06-22)
|
|
61
|
+
|
|
62
|
+
### Bug Fixes
|
|
63
|
+
|
|
64
|
+
- 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))
|
|
65
|
+
- handle webcomponent lifecycle on every element that misses it PIE-703 ([9d5923f](https://github.com/pie-framework/pie-elements/commit/9d5923f973f0471e1e8f69ad4309cfc63d980d93))
|
|
66
|
+
|
|
67
|
+
## [10.1.4](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association@10.1.3...@pie-element/image-cloze-association@10.1.4) (2026-06-17)
|
|
68
|
+
|
|
69
|
+
### Bug Fixes
|
|
70
|
+
|
|
71
|
+
- 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))
|
|
72
|
+
|
|
73
|
+
## [10.1.3](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association@10.1.2...@pie-element/image-cloze-association@10.1.3) (2026-06-12)
|
|
74
|
+
|
|
75
|
+
### Bug Fixes
|
|
76
|
+
|
|
59
77
|
- bump shared modules and libsPIE-603, PIE-604, PIE-663, PIE-662, PIE-678 ([e61c7a7](https://github.com/pie-framework/pie-elements/commit/e61c7a7d23744586337dfbb17a18ebfc656c202f))
|
|
78
|
+
|
|
79
|
+
## [10.1.2](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association@10.1.1...@pie-element/image-cloze-association@10.1.2) (2026-06-04)
|
|
80
|
+
|
|
81
|
+
### Bug Fixes
|
|
82
|
+
|
|
83
|
+
- bump shared modules and libs PIE-600, PIE-602 ([ce99f6a](https://github.com/pie-framework/pie-elements/commit/ce99f6af50cb855b666a6df9340f9f5445fde4c4))
|
|
60
84
|
- dedupe @tiptap/\* and react-transition-group PIE-624 ([87f07f3](https://github.com/pie-framework/pie-elements/commit/87f07f31c38b0fe876f87229c48adc566c369bb9))
|
|
61
|
-
- handle webcomponent lifecycle on every element that misses it PIE-703 ([9d5923f](https://github.com/pie-framework/pie-elements/commit/9d5923f973f0471e1e8f69ad4309cfc63d980d93))
|
|
62
85
|
- **image-cloze-association:** preserve response areas position PIE-430 ([ae083d6](https://github.com/pie-framework/pie-elements/commit/ae083d660a56b050939deaab488ecf281ad14437))
|
|
63
|
-
|
|
86
|
+
|
|
87
|
+
## [10.1.1](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association@10.1.0...@pie-element/image-cloze-association@10.1.1) (2026-05-21)
|
|
88
|
+
|
|
89
|
+
**Note:** Version bump only for package @pie-element/image-cloze-association
|
|
64
90
|
|
|
65
91
|
# [10.1.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association@10.1.0-next.1...@pie-element/image-cloze-association@10.1.0) (2026-05-21)
|
|
66
92
|
|
package/configure/CHANGELOG.md
CHANGED
|
@@ -3,62 +3,81 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
-
|
|
6
|
+
## [9.2.2](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association-configure@9.2.1...@pie-element/image-cloze-association-configure@9.2.2) (2026-09-04)
|
|
7
7
|
|
|
8
|
-
|
|
8
|
+
### Bug Fixes
|
|
9
|
+
|
|
10
|
+
- bump libs PIE-978, PIE-980 ([96489ba](https://github.com/pie-framework/pie-elements/commit/96489ba3c220604f21c3ce4500d79f4389266e9e))
|
|
9
11
|
|
|
10
|
-
|
|
12
|
+
## [9.2.1](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association-configure@9.2.0...@pie-element/image-cloze-association-configure@9.2.1) (2026-08-26)
|
|
11
13
|
|
|
12
14
|
**Note:** Version bump only for package @pie-element/image-cloze-association-configure
|
|
13
15
|
|
|
14
|
-
# [9.
|
|
16
|
+
# [9.2.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association-configure@9.1.11...@pie-element/image-cloze-association-configure@9.2.0) (2026-08-21)
|
|
15
17
|
|
|
16
|
-
|
|
18
|
+
### Features
|
|
17
19
|
|
|
18
|
-
|
|
20
|
+
- bump libs PIE-856, PIE-681, PIE-927 ([cb26d7a](https://github.com/pie-framework/pie-elements/commit/cb26d7afa6c99522533c321d5ff8ce3148a66e9e))
|
|
19
21
|
|
|
20
|
-
|
|
22
|
+
## [9.1.11](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association-configure@9.1.10...@pie-element/image-cloze-association-configure@9.1.11) (2026-08-19)
|
|
21
23
|
|
|
22
|
-
|
|
24
|
+
### Bug Fixes
|
|
23
25
|
|
|
24
|
-
|
|
26
|
+
- bump libs and shared modules PIE-681, PIE-708 ([08af8b5](https://github.com/pie-framework/pie-elements/commit/08af8b5802aecc8ee5454a1b6d60277d7ec94204))
|
|
25
27
|
|
|
26
|
-
|
|
28
|
+
## [9.1.10](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association-configure@9.1.8...@pie-element/image-cloze-association-configure@9.1.10) (2026-08-13)
|
|
27
29
|
|
|
28
30
|
**Note:** Version bump only for package @pie-element/image-cloze-association-configure
|
|
29
31
|
|
|
30
|
-
|
|
32
|
+
## [9.1.9](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association-configure@9.1.7...@pie-element/image-cloze-association-configure@9.1.9) (2026-08-11)
|
|
31
33
|
|
|
32
34
|
**Note:** Version bump only for package @pie-element/image-cloze-association-configure
|
|
33
35
|
|
|
34
|
-
|
|
36
|
+
## [9.1.8](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association-configure@9.1.7...@pie-element/image-cloze-association-configure@9.1.8) (2026-07-31)
|
|
35
37
|
|
|
36
38
|
**Note:** Version bump only for package @pie-element/image-cloze-association-configure
|
|
37
39
|
|
|
38
|
-
|
|
40
|
+
## [9.1.7](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association-configure@9.1.6...@pie-element/image-cloze-association-configure@9.1.7) (2026-07-08)
|
|
39
41
|
|
|
40
|
-
|
|
42
|
+
### Bug Fixes
|
|
41
43
|
|
|
42
|
-
|
|
44
|
+
- bump libs & shared modules PIE-706, PIE-702, PIE-679, PIE-698 ([5b1a8c4](https://github.com/pie-framework/pie-elements/commit/5b1a8c4c3eba2126fc43d78fd0187e7cd11d5424))
|
|
43
45
|
|
|
44
|
-
|
|
46
|
+
## [9.1.6](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association-configure@9.1.5...@pie-element/image-cloze-association-configure@9.1.6) (2026-07-02)
|
|
45
47
|
|
|
46
|
-
|
|
48
|
+
### Bug Fixes
|
|
47
49
|
|
|
48
|
-
|
|
50
|
+
- 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))
|
|
51
|
+
- sync libs versions ([48b5be9](https://github.com/pie-framework/pie-elements/commit/48b5be9559eb5b5235ca05f51c5f0161032a7041))
|
|
49
52
|
|
|
50
|
-
|
|
53
|
+
## [9.1.5](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association-configure@9.1.4...@pie-element/image-cloze-association-configure@9.1.5) (2026-06-22)
|
|
51
54
|
|
|
52
55
|
### Bug Fixes
|
|
53
56
|
|
|
54
|
-
- bump libs & shared modules PIE-706, PIE-702, PIE-679, PIE-698 ([5b1a8c4](https://github.com/pie-framework/pie-elements/commit/5b1a8c4c3eba2126fc43d78fd0187e7cd11d5424))
|
|
55
|
-
- bump shared modules and libs PIE-600, PIE-602 ([ce99f6a](https://github.com/pie-framework/pie-elements/commit/ce99f6af50cb855b666a6df9340f9f5445fde4c4))
|
|
56
|
-
- bump shared modules and libs PIE-661 PIE-664 PIE-683 PIE-666 PIE-656 PIE-657 PIE-658 PIE-659 PIE-670 ([ebd6be4](https://github.com/pie-framework/pie-elements/commit/ebd6be4fd48fca41ad4c4908f606b25334731aed))
|
|
57
57
|
- bump shared modules and libs PIE-674, PIE-662, PIE-705, PIE-674, PIE-963 ([78a3f64](https://github.com/pie-framework/pie-elements/commit/78a3f64652c9581c61bd4159f3210fc1e32d8bcf))
|
|
58
|
-
- bump shared modules and libs PIE-695, PIE-697, PIE-699, PIE-680, PIE-714, PIE-665, PIE-656 ([4b76ae7](https://github.com/pie-framework/pie-elements/commit/4b76ae75d1c5ea6d55f7c6fb53f299dfcbda2b1f))
|
|
59
|
-
- bump shared modules and libsPIE-603, PIE-604, PIE-663, PIE-662, PIE-678 ([e61c7a7](https://github.com/pie-framework/pie-elements/commit/e61c7a7d23744586337dfbb17a18ebfc656c202f))
|
|
60
58
|
- handle webcomponent lifecycle on every element that misses it PIE-703 ([9d5923f](https://github.com/pie-framework/pie-elements/commit/9d5923f973f0471e1e8f69ad4309cfc63d980d93))
|
|
61
|
-
|
|
59
|
+
|
|
60
|
+
## [9.1.4](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association-configure@9.1.3...@pie-element/image-cloze-association-configure@9.1.4) (2026-06-17)
|
|
61
|
+
|
|
62
|
+
### Bug Fixes
|
|
63
|
+
|
|
64
|
+
- 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))
|
|
65
|
+
|
|
66
|
+
## [9.1.3](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association-configure@9.1.2...@pie-element/image-cloze-association-configure@9.1.3) (2026-06-12)
|
|
67
|
+
|
|
68
|
+
### Bug Fixes
|
|
69
|
+
|
|
70
|
+
- bump shared modules and libsPIE-603, PIE-604, PIE-663, PIE-662, PIE-678 ([e61c7a7](https://github.com/pie-framework/pie-elements/commit/e61c7a7d23744586337dfbb17a18ebfc656c202f))
|
|
71
|
+
|
|
72
|
+
## [9.1.2](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association-configure@9.1.1...@pie-element/image-cloze-association-configure@9.1.2) (2026-06-04)
|
|
73
|
+
|
|
74
|
+
### Bug Fixes
|
|
75
|
+
|
|
76
|
+
- bump shared modules and libs PIE-600, PIE-602 ([ce99f6a](https://github.com/pie-framework/pie-elements/commit/ce99f6af50cb855b666a6df9340f9f5445fde4c4))
|
|
77
|
+
|
|
78
|
+
## [9.1.1](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association-configure@9.1.0...@pie-element/image-cloze-association-configure@9.1.1) (2026-05-21)
|
|
79
|
+
|
|
80
|
+
**Note:** Version bump only for package @pie-element/image-cloze-association-configure
|
|
62
81
|
|
|
63
82
|
# [9.1.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association-configure@9.1.0-next.1...@pie-element/image-cloze-association-configure@9.1.0) (2026-05-21)
|
|
64
83
|
|
package/configure/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pie-element/image-cloze-association-configure",
|
|
3
3
|
"private": true,
|
|
4
|
-
"version": "9.
|
|
4
|
+
"version": "9.2.2",
|
|
5
5
|
"description": "",
|
|
6
6
|
"main": "lib/index.js",
|
|
7
7
|
"module": "src/index.js",
|
|
@@ -12,8 +12,8 @@
|
|
|
12
12
|
"@mui/icons-material": "^7.3.4",
|
|
13
13
|
"@mui/material": "^7.3.4",
|
|
14
14
|
"@pie-framework/pie-configure-events": "^1.3.0",
|
|
15
|
-
"@pie-lib/config-ui": "13.
|
|
16
|
-
"@pie-lib/editable-html-tip-tap": "2.
|
|
15
|
+
"@pie-lib/config-ui": "13.0.19",
|
|
16
|
+
"@pie-lib/editable-html-tip-tap": "2.1.17",
|
|
17
17
|
"debug": "^4.1.1",
|
|
18
18
|
"prop-types": "^15.8.1",
|
|
19
19
|
"react": "18.3.1",
|
package/controller/CHANGELOG.md
CHANGED
|
@@ -3,56 +3,24 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
-
|
|
6
|
+
## [8.1.4](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association-controller@8.1.2...@pie-element/image-cloze-association-controller@8.1.4) (2026-08-13)
|
|
7
7
|
|
|
8
8
|
**Note:** Version bump only for package @pie-element/image-cloze-association-controller
|
|
9
9
|
|
|
10
|
-
|
|
10
|
+
## [8.1.3](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association-controller@8.1.2...@pie-element/image-cloze-association-controller@8.1.3) (2026-08-11)
|
|
11
11
|
|
|
12
12
|
**Note:** Version bump only for package @pie-element/image-cloze-association-controller
|
|
13
13
|
|
|
14
|
-
|
|
14
|
+
## [8.1.2](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association-controller@8.1.1...@pie-element/image-cloze-association-controller@8.1.2) (2026-07-02)
|
|
15
15
|
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
# [8.4.0-beta.5](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association-controller@8.4.0-beta.4...@pie-element/image-cloze-association-controller@8.4.0-beta.5) (2026-08-11)
|
|
19
|
-
|
|
20
|
-
**Note:** Version bump only for package @pie-element/image-cloze-association-controller
|
|
21
|
-
|
|
22
|
-
# [8.4.0-beta.4](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association-controller@8.4.0-beta.3...@pie-element/image-cloze-association-controller@8.4.0-beta.4) (2026-08-11)
|
|
23
|
-
|
|
24
|
-
**Note:** Version bump only for package @pie-element/image-cloze-association-controller
|
|
25
|
-
|
|
26
|
-
# [8.4.0-beta.3](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association-controller@8.4.0-beta.2...@pie-element/image-cloze-association-controller@8.4.0-beta.3) (2026-08-11)
|
|
27
|
-
|
|
28
|
-
**Note:** Version bump only for package @pie-element/image-cloze-association-controller
|
|
29
|
-
|
|
30
|
-
# [8.4.0-beta.2](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association-controller@8.4.0-beta.1...@pie-element/image-cloze-association-controller@8.4.0-beta.2) (2026-08-11)
|
|
31
|
-
|
|
32
|
-
**Note:** Version bump only for package @pie-element/image-cloze-association-controller
|
|
33
|
-
|
|
34
|
-
# [8.4.0-beta.1](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association-controller@8.4.0-beta.0...@pie-element/image-cloze-association-controller@8.4.0-beta.1) (2026-08-07)
|
|
35
|
-
|
|
36
|
-
**Note:** Version bump only for package @pie-element/image-cloze-association-controller
|
|
37
|
-
|
|
38
|
-
# [8.4.0-beta.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association-controller@8.3.0-beta.0...@pie-element/image-cloze-association-controller@8.4.0-beta.0) (2026-08-07)
|
|
39
|
-
|
|
40
|
-
**Note:** Version bump only for package @pie-element/image-cloze-association-controller
|
|
41
|
-
|
|
42
|
-
# [8.3.0-beta.1](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association-controller@8.3.0-beta.0...@pie-element/image-cloze-association-controller@8.3.0-beta.1) (2026-08-07)
|
|
16
|
+
### Bug Fixes
|
|
43
17
|
|
|
44
|
-
|
|
18
|
+
- 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))
|
|
45
19
|
|
|
46
|
-
|
|
20
|
+
## [8.1.1](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association-controller@8.1.0...@pie-element/image-cloze-association-controller@8.1.1) (2026-05-21)
|
|
47
21
|
|
|
48
22
|
**Note:** Version bump only for package @pie-element/image-cloze-association-controller
|
|
49
23
|
|
|
50
|
-
# [8.2.0-beta.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association-controller@8.1.0...@pie-element/image-cloze-association-controller@8.2.0-beta.0) (2026-08-07)
|
|
51
|
-
|
|
52
|
-
### Bug Fixes
|
|
53
|
-
|
|
54
|
-
- bump shared modules and libs PIE-695, PIE-697, PIE-699, PIE-680, PIE-714, PIE-665, PIE-656 ([4b76ae7](https://github.com/pie-framework/pie-elements/commit/4b76ae75d1c5ea6d55f7c6fb53f299dfcbda2b1f))
|
|
55
|
-
|
|
56
24
|
# [8.1.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/image-cloze-association-controller@8.1.0-next.1...@pie-element/image-cloze-association-controller@8.1.0) (2026-05-21)
|
|
57
25
|
|
|
58
26
|
### Bug Fixes
|
package/controller/package.json
CHANGED
package/lib/image-container.js
CHANGED
|
@@ -37,7 +37,10 @@ class ImageContainer extends _react.Component {
|
|
|
37
37
|
answerChoiceTransparency,
|
|
38
38
|
responseContainerPadding,
|
|
39
39
|
imageDropTargetPadding,
|
|
40
|
-
maxResponsePerZone
|
|
40
|
+
maxResponsePerZone,
|
|
41
|
+
selectedResponse,
|
|
42
|
+
onSelectClick,
|
|
43
|
+
onPlacementClick
|
|
41
44
|
} = this.props;
|
|
42
45
|
return /*#__PURE__*/_react.default.createElement(BaseContainer, null, /*#__PURE__*/_react.default.createElement("img", {
|
|
43
46
|
src: src,
|
|
@@ -69,7 +72,10 @@ class ImageContainer extends _react.Component {
|
|
|
69
72
|
answerChoiceTransparency: answerChoiceTransparency,
|
|
70
73
|
responseContainerPadding: responseContainerPadding,
|
|
71
74
|
imageDropTargetPadding: imageDropTargetPadding,
|
|
72
|
-
maxResponsePerZone: maxResponsePerZone
|
|
75
|
+
maxResponsePerZone: maxResponsePerZone,
|
|
76
|
+
selectedResponse: selectedResponse,
|
|
77
|
+
onSelectClick: onSelectClick,
|
|
78
|
+
onPlacementClick: onPlacementClick
|
|
73
79
|
});
|
|
74
80
|
}));
|
|
75
81
|
}
|
|
@@ -88,7 +94,10 @@ ImageContainer.propTypes = {
|
|
|
88
94
|
responseAreaFill: _propTypes.default.string,
|
|
89
95
|
responseContainerPadding: _propTypes.default.string,
|
|
90
96
|
imageDropTargetPadding: _propTypes.default.string,
|
|
91
|
-
maxResponsePerZone: _propTypes.default.number
|
|
97
|
+
maxResponsePerZone: _propTypes.default.number,
|
|
98
|
+
selectedResponse: _propTypes.default.object,
|
|
99
|
+
onSelectClick: _propTypes.default.func,
|
|
100
|
+
onPlacementClick: _propTypes.default.func
|
|
92
101
|
};
|
|
93
102
|
var _default = exports.default = ImageContainer;
|
|
94
103
|
//# sourceMappingURL=image-container.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"image-container.js","names":["_react","_interopRequireWildcard","require","_propTypes","_interopRequireDefault","_styles","_imageDropTarget","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","BaseContainer","styled","theme","margin","spacing","position","width","ImageContainer","Component","render","answers","canDrag","draggingElement","image","height","src","onAnswerSelect","onDragAnswerBegin","onDragAnswerEnd","responseContainers","showDashedBorder","responseAreaFill","answerChoiceTransparency","responseContainerPadding","imageDropTargetPadding","maxResponsePerZone","props","createElement","map","rHeight","replace","rWidth","rLeft","x","rTop","y","answersParsed","filter","a","containerIndex","index","containerStyle","left","top","key","id","onDrop","item","propTypes","PropTypes","array","isRequired","bool","shape","object","func","string","number","_default","exports"],"sources":["../src/image-container.jsx"],"sourcesContent":["import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { styled } from '@mui/material/styles';\n\nimport ImageDropTarget from './image-drop-target';\n\nconst BaseContainer = styled('div')(({ theme }) => ({\n margin: theme.spacing(2),\n position: 'relative',\n width: 'fit-content',\n}));\n\nclass ImageContainer extends Component {\n render() {\n const {\n answers,\n canDrag,\n draggingElement,\n image: { height, src, width } = {},\n onAnswerSelect,\n onDragAnswerBegin,\n onDragAnswerEnd,\n responseContainers,\n showDashedBorder,\n responseAreaFill,\n answerChoiceTransparency,\n responseContainerPadding,\n imageDropTargetPadding,\n maxResponsePerZone,\n } = this.props;\n\n return (\n <BaseContainer>\n <img src={src} height={height} width={width} />\n\n {(responseContainers || []).map((r, i) => {\n const rHeight = (r.height.replace('%', '') / 100) * height;\n const rWidth = (r.width.replace('%', '') / 100) * width;\n const rLeft = (r.x / 100) * width;\n const rTop = (r.y / 100) * height;\n const answersParsed = answers.filter((a) => a.containerIndex === r.index);\n\n return (\n <ImageDropTarget\n answers={answersParsed}\n canDrag={canDrag}\n containerStyle={{\n height: rHeight,\n width: rWidth,\n left: rLeft,\n top: rTop,\n }}\n key={r.id + i}\n draggingElement={draggingElement}\n index={r.index}\n onDrop={(item) => onAnswerSelect(item, r.index)}\n onDragAnswerBegin={onDragAnswerBegin}\n onDragAnswerEnd={onDragAnswerEnd}\n showDashedBorder={showDashedBorder}\n responseAreaFill={responseAreaFill}\n answerChoiceTransparency={answerChoiceTransparency}\n responseContainerPadding={responseContainerPadding}\n imageDropTargetPadding={imageDropTargetPadding}\n maxResponsePerZone={maxResponsePerZone}\n />\n );\n })}\n </BaseContainer>\n );\n }\n}\n\nImageContainer.propTypes = {\n answers: PropTypes.array.isRequired,\n canDrag: PropTypes.bool.isRequired,\n draggingElement: PropTypes.shape({}).isRequired,\n image: PropTypes.object.isRequired,\n onAnswerSelect: PropTypes.func.isRequired,\n onDragAnswerBegin: PropTypes.func.isRequired,\n onDragAnswerEnd: PropTypes.func.isRequired,\n responseContainers: PropTypes.array.isRequired,\n showDashedBorder: PropTypes.bool,\n answerChoiceTransparency: PropTypes.bool,\n responseAreaFill: PropTypes.string,\n responseContainerPadding: PropTypes.string,\n imageDropTargetPadding: PropTypes.string,\n maxResponsePerZone: PropTypes.number,\n};\n\nexport default ImageContainer;\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,OAAA,GAAAH,OAAA;AAEA,IAAAI,gBAAA,GAAAF,sBAAA,CAAAF,OAAA;AAAkD,SAAAD,wBAAAM,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAR,uBAAA,YAAAA,CAAAM,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAElD,MAAMkB,aAAa,GAAG,IAAAC,cAAM,EAAC,KAAK,CAAC,CAAC,CAAC;EAAEC;AAAM,CAAC,MAAM;EAClDC,MAAM,EAAED,KAAK,CAACE,OAAO,CAAC,CAAC,CAAC;EACxBC,QAAQ,EAAE,UAAU;EACpBC,KAAK,EAAE;AACT,CAAC,CAAC,CAAC;AAEH,MAAMC,cAAc,SAASC,gBAAS,CAAC;EACrCC,MAAMA,CAAA,EAAG;IACP,MAAM;MACJC,OAAO;MACPC,OAAO;MACPC,eAAe;MACfC,KAAK,EAAE;QAAEC,MAAM;QAAEC,GAAG;QAAET;MAAM,CAAC,GAAG,CAAC,CAAC;MAClCU,cAAc;MACdC,iBAAiB;MACjBC,eAAe;MACfC,kBAAkB;MAClBC,gBAAgB;MAChBC,gBAAgB;MAChBC,wBAAwB;MACxBC,wBAAwB;MACxBC,sBAAsB;MACtBC;IACF,CAAC,GAAG,IAAI,CAACC,KAAK;IAEd,
|
|
1
|
+
{"version":3,"file":"image-container.js","names":["_react","_interopRequireWildcard","require","_propTypes","_interopRequireDefault","_styles","_imageDropTarget","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","BaseContainer","styled","theme","margin","spacing","position","width","ImageContainer","Component","render","answers","canDrag","draggingElement","image","height","src","onAnswerSelect","onDragAnswerBegin","onDragAnswerEnd","responseContainers","showDashedBorder","responseAreaFill","answerChoiceTransparency","responseContainerPadding","imageDropTargetPadding","maxResponsePerZone","selectedResponse","onSelectClick","onPlacementClick","props","createElement","map","rHeight","replace","rWidth","rLeft","x","rTop","y","answersParsed","filter","a","containerIndex","index","containerStyle","left","top","key","id","onDrop","item","propTypes","PropTypes","array","isRequired","bool","shape","object","func","string","number","_default","exports"],"sources":["../src/image-container.jsx"],"sourcesContent":["import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { styled } from '@mui/material/styles';\n\nimport ImageDropTarget from './image-drop-target';\n\nconst BaseContainer = styled('div')(({ theme }) => ({\n margin: theme.spacing(2),\n position: 'relative',\n width: 'fit-content',\n}));\n\nclass ImageContainer extends Component {\n render() {\n const {\n answers,\n canDrag,\n draggingElement,\n image: { height, src, width } = {},\n onAnswerSelect,\n onDragAnswerBegin,\n onDragAnswerEnd,\n responseContainers,\n showDashedBorder,\n responseAreaFill,\n answerChoiceTransparency,\n responseContainerPadding,\n imageDropTargetPadding,\n maxResponsePerZone,\n selectedResponse,\n onSelectClick,\n onPlacementClick,\n } = this.props;\n\n return (\n <BaseContainer>\n <img src={src} height={height} width={width} />\n\n {(responseContainers || []).map((r, i) => {\n const rHeight = (r.height.replace('%', '') / 100) * height;\n const rWidth = (r.width.replace('%', '') / 100) * width;\n const rLeft = (r.x / 100) * width;\n const rTop = (r.y / 100) * height;\n const answersParsed = answers.filter((a) => a.containerIndex === r.index);\n\n return (\n <ImageDropTarget\n answers={answersParsed}\n canDrag={canDrag}\n containerStyle={{\n height: rHeight,\n width: rWidth,\n left: rLeft,\n top: rTop,\n }}\n key={r.id + i}\n draggingElement={draggingElement}\n index={r.index}\n onDrop={(item) => onAnswerSelect(item, r.index)}\n onDragAnswerBegin={onDragAnswerBegin}\n onDragAnswerEnd={onDragAnswerEnd}\n showDashedBorder={showDashedBorder}\n responseAreaFill={responseAreaFill}\n answerChoiceTransparency={answerChoiceTransparency}\n responseContainerPadding={responseContainerPadding}\n imageDropTargetPadding={imageDropTargetPadding}\n maxResponsePerZone={maxResponsePerZone}\n selectedResponse={selectedResponse}\n onSelectClick={onSelectClick}\n onPlacementClick={onPlacementClick}\n />\n );\n })}\n </BaseContainer>\n );\n }\n}\n\nImageContainer.propTypes = {\n answers: PropTypes.array.isRequired,\n canDrag: PropTypes.bool.isRequired,\n draggingElement: PropTypes.shape({}).isRequired,\n image: PropTypes.object.isRequired,\n onAnswerSelect: PropTypes.func.isRequired,\n onDragAnswerBegin: PropTypes.func.isRequired,\n onDragAnswerEnd: PropTypes.func.isRequired,\n responseContainers: PropTypes.array.isRequired,\n showDashedBorder: PropTypes.bool,\n answerChoiceTransparency: PropTypes.bool,\n responseAreaFill: PropTypes.string,\n responseContainerPadding: PropTypes.string,\n imageDropTargetPadding: PropTypes.string,\n maxResponsePerZone: PropTypes.number,\n selectedResponse: PropTypes.object,\n onSelectClick: PropTypes.func,\n onPlacementClick: PropTypes.func,\n};\n\nexport default ImageContainer;\n"],"mappings":"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","ignoreList":[]}
|
package/lib/image-drop-target.js
CHANGED
|
@@ -46,8 +46,12 @@ const ImageDropTarget = ({
|
|
|
46
46
|
answerChoiceTransparency,
|
|
47
47
|
maxResponsePerZone,
|
|
48
48
|
onDrop,
|
|
49
|
-
index
|
|
49
|
+
index,
|
|
50
|
+
selectedResponse,
|
|
51
|
+
onSelectClick,
|
|
52
|
+
onPlacementClick
|
|
50
53
|
}) => {
|
|
54
|
+
const [isHovered, setIsHovered] = (0, _react.useState)(false);
|
|
51
55
|
const [shouldHaveSmallPadding, setShouldHaveSmallPadding] = (0, _react.useState)(false);
|
|
52
56
|
const dropContainerRef = (0, _react.useRef)(null);
|
|
53
57
|
const dropContainerResponsesHeightRef = (0, _react.useRef)(null);
|
|
@@ -75,8 +79,10 @@ const ImageDropTarget = ({
|
|
|
75
79
|
};
|
|
76
80
|
}, []);
|
|
77
81
|
const isDraggingElement = !!draggingElement.id;
|
|
82
|
+
const hasSelection = !!selectedResponse;
|
|
83
|
+
const showsHoverEffect = isOver || hasSelection && isHovered && canDrag;
|
|
78
84
|
const containerClasses = (0, _classnames.default)({
|
|
79
|
-
'is-over':
|
|
85
|
+
'is-over': showsHoverEffect,
|
|
80
86
|
dashed: showDashedBorder && !isDraggingElement,
|
|
81
87
|
active: isDraggingElement
|
|
82
88
|
});
|
|
@@ -85,7 +91,29 @@ const ImageDropTarget = ({
|
|
|
85
91
|
...containerStyle,
|
|
86
92
|
...(responseAreaFill && !isDraggingElement && {
|
|
87
93
|
backgroundColor: responseAreaFill
|
|
88
|
-
})
|
|
94
|
+
}),
|
|
95
|
+
cursor: hasSelection && canDrag ? 'pointer' : undefined
|
|
96
|
+
};
|
|
97
|
+
const handleContainerClick = () => {
|
|
98
|
+
if (!canDrag) return;
|
|
99
|
+
if (selectedResponse) {
|
|
100
|
+
onPlacementClick?.(index);
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
// Empty background clicked with nothing selected: nothing to place.
|
|
104
|
+
};
|
|
105
|
+
|
|
106
|
+
// Only a native Tab stop when there's nothing else in this container to carry
|
|
107
|
+
// tabbability — once it holds an answer, that answer's own tile (rendered by
|
|
108
|
+
// PossibleResponse, via dnd-kit's `useDraggable`) is already independently tabbable,
|
|
109
|
+
// and adding a second stop for the same visual container would add an extra stop to
|
|
110
|
+
// the existing Tab order (match-list's equivalent)
|
|
111
|
+
const isNativeTabStop = answers.length === 0 && canDrag;
|
|
112
|
+
const handleContainerKeyDown = e => {
|
|
113
|
+
if (e.code === 'Space' || e.code === 'Enter') {
|
|
114
|
+
e.preventDefault();
|
|
115
|
+
handleContainerClick();
|
|
116
|
+
}
|
|
89
117
|
};
|
|
90
118
|
return /*#__PURE__*/_react.default.createElement(ResponseContainer, {
|
|
91
119
|
ref: ref => {
|
|
@@ -93,7 +121,13 @@ const ImageDropTarget = ({
|
|
|
93
121
|
setNodeRef(ref);
|
|
94
122
|
},
|
|
95
123
|
className: containerClasses,
|
|
96
|
-
style: updatedContainerStyle
|
|
124
|
+
style: updatedContainerStyle,
|
|
125
|
+
role: isNativeTabStop ? 'button' : undefined,
|
|
126
|
+
tabIndex: isNativeTabStop ? 0 : -1,
|
|
127
|
+
onClick: handleContainerClick,
|
|
128
|
+
onKeyDown: isNativeTabStop ? handleContainerKeyDown : undefined,
|
|
129
|
+
onMouseEnter: () => setIsHovered(true),
|
|
130
|
+
onMouseLeave: () => setIsHovered(false)
|
|
97
131
|
}, answers.length ? /*#__PURE__*/_react.default.createElement(AnswersContainer, {
|
|
98
132
|
ref: ref => {
|
|
99
133
|
dropContainerResponsesHeightRef.current = ref?.getBoundingClientRect().height;
|
|
@@ -107,7 +141,10 @@ const ImageDropTarget = ({
|
|
|
107
141
|
answerChoiceTransparency: answerChoiceTransparency,
|
|
108
142
|
containerStyle: {
|
|
109
143
|
padding: imageDropTargetPadding ? imageDropTargetPadding : shouldHaveSmallPadding ? '2px' : '6px 10px'
|
|
110
|
-
}
|
|
144
|
+
},
|
|
145
|
+
selectedResponse: selectedResponse,
|
|
146
|
+
onSelectClick: onSelectClick,
|
|
147
|
+
onPlacementClick: onPlacementClick
|
|
111
148
|
}))) : null);
|
|
112
149
|
};
|
|
113
150
|
ImageDropTarget.propTypes = {
|
|
@@ -124,7 +161,10 @@ ImageDropTarget.propTypes = {
|
|
|
124
161
|
answerChoiceTransparency: _propTypes.default.bool,
|
|
125
162
|
responseContainerPadding: _propTypes.default.string,
|
|
126
163
|
imageDropTargetPadding: _propTypes.default.string,
|
|
127
|
-
maxResponsePerZone: _propTypes.default.number
|
|
164
|
+
maxResponsePerZone: _propTypes.default.number,
|
|
165
|
+
selectedResponse: _propTypes.default.object,
|
|
166
|
+
onSelectClick: _propTypes.default.func,
|
|
167
|
+
onPlacementClick: _propTypes.default.func
|
|
128
168
|
};
|
|
129
169
|
var _default = exports.default = ImageDropTarget;
|
|
130
170
|
//# sourceMappingURL=image-drop-target.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"image-drop-target.js","names":["_react","_interopRequireWildcard","require","_propTypes","_interopRequireDefault","_core","_styles","_renderUi","_classnames","_possibleResponse","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","AnswersContainer","styled","display","flexWrap","ResponseContainer","position","boxSizing","border","color","text","backgroundColor","ImageDropTarget","answers","canDrag","containerStyle","draggingElement","onDragAnswerBegin","onDragAnswerEnd","showDashedBorder","responseAreaFill","responseContainerPadding","imageDropTargetPadding","answerChoiceTransparency","maxResponsePerZone","onDrop","index","shouldHaveSmallPadding","setShouldHaveSmallPadding","useState","dropContainerRef","useRef","dropContainerResponsesHeightRef","setNodeRef","isOver","useDroppable","id","data","containerIndex","useEffect","container","current","handleTouchStart","preventDefault","addEventListener","passive","removeEventListener","isDraggingElement","containerClasses","cx","dashed","active","updatedContainerStyle","padding","createElement","ref","className","style","length","getBoundingClientRect","height","map","answer","key","onDragBegin","onDragEnd","propTypes","PropTypes","object","array","bool","isRequired","func","string","number","_default","exports"],"sources":["../src/image-drop-target.jsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { useDroppable } from '@dnd-kit/core';\nimport { styled } from '@mui/material/styles';\nimport { color } from '@pie-lib/render-ui';\nimport cx from 'classnames';\n\nimport PossibleResponse from './possible-response';\n\nconst AnswersContainer = styled('div')(() => ({\n display: 'flex',\n flexWrap: 'wrap',\n}));\n\nconst ResponseContainer = styled('div')(() => ({\n position: 'absolute',\n boxSizing: 'border-box',\n '&.active': {\n border: `2px solid ${color.text()}`,\n backgroundColor: 'rgba(230, 242, 252, .8)',\n },\n '&.dashed': {\n border: `2px dashed ${color.text()}`,\n },\n '&.is-over': {\n border: '1px solid rgb(158, 158, 158)',\n backgroundColor: 'rgb(224, 224, 224)',\n },\n}));\n\nconst ImageDropTarget = ({\n answers,\n canDrag,\n containerStyle,\n draggingElement,\n onDragAnswerBegin,\n onDragAnswerEnd,\n showDashedBorder,\n responseAreaFill,\n responseContainerPadding = '10px',\n imageDropTargetPadding,\n answerChoiceTransparency,\n maxResponsePerZone,\n onDrop,\n index,\n}) => {\n const [shouldHaveSmallPadding, setShouldHaveSmallPadding] = useState(false);\n const dropContainerRef = useRef(null);\n const dropContainerResponsesHeightRef = useRef(null);\n\n const { setNodeRef, isOver } = useDroppable({\n id: `response-container-${index}`,\n data: {\n containerIndex: index,\n onDrop,\n },\n });\n\n useEffect(() => {\n const container = dropContainerRef.current;\n\n if (!container) return;\n\n const handleTouchStart = (e) => {\n e.preventDefault();\n };\n\n container.addEventListener('touchstart', handleTouchStart, { passive: false });\n\n return () => {\n container.removeEventListener('touchstart', handleTouchStart);\n };\n }, []);\n\n const isDraggingElement = !!draggingElement.id;\n\n const containerClasses = cx({\n 'is-over': isOver,\n dashed: showDashedBorder && !isDraggingElement,\n active: isDraggingElement,\n });\n\n const updatedContainerStyle = {\n padding: maxResponsePerZone === 1 ? '0' : responseContainerPadding,\n ...containerStyle,\n ...(responseAreaFill && !isDraggingElement && { backgroundColor: responseAreaFill }),\n };\n\n return (\n <ResponseContainer\n ref={(ref) => {\n dropContainerRef.current = ref;\n setNodeRef(ref);\n }}\n className={containerClasses}\n style={updatedContainerStyle}\n >\n {answers.length ? (\n <AnswersContainer\n ref={(ref) => {\n dropContainerResponsesHeightRef.current = ref?.getBoundingClientRect().height;\n }}\n >\n {answers.map((answer) => (\n <PossibleResponse\n key={answer.id}\n data={answer}\n canDrag={canDrag}\n onDragBegin={() => onDragAnswerBegin(answer)}\n onDragEnd={onDragAnswerEnd}\n answerChoiceTransparency={answerChoiceTransparency}\n containerStyle={{\n padding: imageDropTargetPadding ? imageDropTargetPadding : shouldHaveSmallPadding ? '2px' : '6px 10px',\n }}\n />\n ))}\n </AnswersContainer>\n ) : null}\n </ResponseContainer>\n );\n};\n\nImageDropTarget.propTypes = {\n answer: PropTypes.object,\n answers: PropTypes.array,\n canDrag: PropTypes.bool.isRequired,\n containerStyle: PropTypes.object.isRequired,\n draggingElement: PropTypes.object.isRequired,\n onDragAnswerBegin: PropTypes.func.isRequired,\n onDragAnswerEnd: PropTypes.func.isRequired,\n onDrop: PropTypes.func.isRequired,\n showDashedBorder: PropTypes.bool,\n responseAreaFill: PropTypes.string,\n answerChoiceTransparency: PropTypes.bool,\n responseContainerPadding: PropTypes.string,\n imageDropTargetPadding: PropTypes.string,\n maxResponsePerZone: PropTypes.number,\n};\n\nexport default ImageDropTarget;\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"image-drop-target.js","names":["_react","_interopRequireWildcard","require","_propTypes","_interopRequireDefault","_core","_styles","_renderUi","_classnames","_possibleResponse","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","AnswersContainer","styled","display","flexWrap","ResponseContainer","position","boxSizing","border","color","text","backgroundColor","ImageDropTarget","answers","canDrag","containerStyle","draggingElement","onDragAnswerBegin","onDragAnswerEnd","showDashedBorder","responseAreaFill","responseContainerPadding","imageDropTargetPadding","answerChoiceTransparency","maxResponsePerZone","onDrop","index","selectedResponse","onSelectClick","onPlacementClick","isHovered","setIsHovered","useState","shouldHaveSmallPadding","setShouldHaveSmallPadding","dropContainerRef","useRef","dropContainerResponsesHeightRef","setNodeRef","isOver","useDroppable","id","data","containerIndex","useEffect","container","current","handleTouchStart","preventDefault","addEventListener","passive","removeEventListener","isDraggingElement","hasSelection","showsHoverEffect","containerClasses","cx","dashed","active","updatedContainerStyle","padding","cursor","undefined","handleContainerClick","isNativeTabStop","length","handleContainerKeyDown","code","createElement","ref","className","style","role","tabIndex","onClick","onKeyDown","onMouseEnter","onMouseLeave","getBoundingClientRect","height","map","answer","key","onDragBegin","onDragEnd","propTypes","PropTypes","object","array","bool","isRequired","func","string","number","_default","exports"],"sources":["../src/image-drop-target.jsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { useDroppable } from '@dnd-kit/core';\nimport { styled } from '@mui/material/styles';\nimport { color } from '@pie-lib/render-ui';\nimport cx from 'classnames';\n\nimport PossibleResponse from './possible-response';\n\nconst AnswersContainer = styled('div')(() => ({\n display: 'flex',\n flexWrap: 'wrap',\n}));\n\nconst ResponseContainer = styled('div')(() => ({\n position: 'absolute',\n boxSizing: 'border-box',\n '&.active': {\n border: `2px solid ${color.text()}`,\n backgroundColor: 'rgba(230, 242, 252, .8)',\n },\n '&.dashed': {\n border: `2px dashed ${color.text()}`,\n },\n '&.is-over': {\n border: '1px solid rgb(158, 158, 158)',\n backgroundColor: 'rgb(224, 224, 224)',\n },\n}));\n\nconst ImageDropTarget = ({\n answers,\n canDrag,\n containerStyle,\n draggingElement,\n onDragAnswerBegin,\n onDragAnswerEnd,\n showDashedBorder,\n responseAreaFill,\n responseContainerPadding = '10px',\n imageDropTargetPadding,\n answerChoiceTransparency,\n maxResponsePerZone,\n onDrop,\n index,\n selectedResponse,\n onSelectClick,\n onPlacementClick,\n}) => {\n const [isHovered, setIsHovered] = useState(false);\n const [shouldHaveSmallPadding, setShouldHaveSmallPadding] = useState(false);\n const dropContainerRef = useRef(null);\n const dropContainerResponsesHeightRef = useRef(null);\n\n const { setNodeRef, isOver } = useDroppable({\n id: `response-container-${index}`,\n data: {\n containerIndex: index,\n onDrop,\n },\n });\n\n useEffect(() => {\n const container = dropContainerRef.current;\n\n if (!container) return;\n\n const handleTouchStart = (e) => {\n e.preventDefault();\n };\n\n container.addEventListener('touchstart', handleTouchStart, { passive: false });\n\n return () => {\n container.removeEventListener('touchstart', handleTouchStart);\n };\n }, []);\n\n const isDraggingElement = !!draggingElement.id;\n const hasSelection = !!selectedResponse;\n const showsHoverEffect = isOver || (hasSelection && isHovered && canDrag);\n\n const containerClasses = cx({\n 'is-over': showsHoverEffect,\n dashed: showDashedBorder && !isDraggingElement,\n active: isDraggingElement,\n });\n\n const updatedContainerStyle = {\n padding: maxResponsePerZone === 1 ? '0' : responseContainerPadding,\n ...containerStyle,\n ...(responseAreaFill && !isDraggingElement && { backgroundColor: responseAreaFill }),\n cursor: hasSelection && canDrag ? 'pointer' : undefined,\n };\n\n const handleContainerClick = () => {\n if (!canDrag) return;\n\n if (selectedResponse) {\n onPlacementClick?.(index);\n }\n\n // Empty background clicked with nothing selected: nothing to place.\n };\n\n // Only a native Tab stop when there's nothing else in this container to carry\n // tabbability — once it holds an answer, that answer's own tile (rendered by\n // PossibleResponse, via dnd-kit's `useDraggable`) is already independently tabbable,\n // and adding a second stop for the same visual container would add an extra stop to\n // the existing Tab order (match-list's equivalent)\n const isNativeTabStop = answers.length === 0 && canDrag;\n\n const handleContainerKeyDown = (e) => {\n if (e.code === 'Space' || e.code === 'Enter') {\n e.preventDefault();\n handleContainerClick();\n }\n };\n\n return (\n <ResponseContainer\n ref={(ref) => {\n dropContainerRef.current = ref;\n setNodeRef(ref);\n }}\n className={containerClasses}\n style={updatedContainerStyle}\n role={isNativeTabStop ? 'button' : undefined}\n tabIndex={isNativeTabStop ? 0 : -1}\n onClick={handleContainerClick}\n onKeyDown={isNativeTabStop ? handleContainerKeyDown : undefined}\n onMouseEnter={() => setIsHovered(true)}\n onMouseLeave={() => setIsHovered(false)}\n >\n {answers.length ? (\n <AnswersContainer\n ref={(ref) => {\n dropContainerResponsesHeightRef.current = ref?.getBoundingClientRect().height;\n }}\n >\n {answers.map((answer) => (\n <PossibleResponse\n key={answer.id}\n data={answer}\n canDrag={canDrag}\n onDragBegin={() => onDragAnswerBegin(answer)}\n onDragEnd={onDragAnswerEnd}\n answerChoiceTransparency={answerChoiceTransparency}\n containerStyle={{\n padding: imageDropTargetPadding ? imageDropTargetPadding : shouldHaveSmallPadding ? '2px' : '6px 10px',\n }}\n selectedResponse={selectedResponse}\n onSelectClick={onSelectClick}\n onPlacementClick={onPlacementClick}\n />\n ))}\n </AnswersContainer>\n ) : null}\n </ResponseContainer>\n );\n};\n\nImageDropTarget.propTypes = {\n answer: PropTypes.object,\n answers: PropTypes.array,\n canDrag: PropTypes.bool.isRequired,\n containerStyle: PropTypes.object.isRequired,\n draggingElement: PropTypes.object.isRequired,\n onDragAnswerBegin: PropTypes.func.isRequired,\n onDragAnswerEnd: PropTypes.func.isRequired,\n onDrop: PropTypes.func.isRequired,\n showDashedBorder: PropTypes.bool,\n responseAreaFill: PropTypes.string,\n answerChoiceTransparency: PropTypes.bool,\n responseContainerPadding: PropTypes.string,\n imageDropTargetPadding: PropTypes.string,\n maxResponsePerZone: PropTypes.number,\n selectedResponse: PropTypes.object,\n onSelectClick: PropTypes.func,\n onPlacementClick: PropTypes.func,\n};\n\nexport default ImageDropTarget;\n"],"mappings":"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","ignoreList":[]}
|
package/lib/index.js
CHANGED
|
@@ -37,7 +37,7 @@ class ImageClozeAssociation extends HTMLElement {
|
|
|
37
37
|
if (autoplayAudioEnabled && completeAudioEnabled && !this.audioComplete) {
|
|
38
38
|
if (elementContext) {
|
|
39
39
|
const audio = elementContext.querySelector('audio');
|
|
40
|
-
const isInsidePrompt = audio && audio.closest('
|
|
40
|
+
const isInsidePrompt = audio && audio.closest('.preview-prompt');
|
|
41
41
|
|
|
42
42
|
// only require audio completion if audio exists and is inside the prompt
|
|
43
43
|
if (audio && isInsidePrompt) {
|
|
@@ -129,7 +129,7 @@ class ImageClozeAssociation extends HTMLElement {
|
|
|
129
129
|
mutationsList.forEach(mutation => {
|
|
130
130
|
if (mutation.type === 'childList') {
|
|
131
131
|
const audio = this.querySelector('audio');
|
|
132
|
-
const isInsidePrompt = audio && audio.closest('
|
|
132
|
+
const isInsidePrompt = audio && audio.closest('.preview-prompt');
|
|
133
133
|
if (!this._model) return;
|
|
134
134
|
if (!this._model.autoplayAudioEnabled) return;
|
|
135
135
|
if (audio && !isInsidePrompt) return;
|