@pie-element/hotspot 5.9.1-next.4 → 5.9.1-next.78

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 (16) hide show
  1. package/CHANGELOG.md +1 -1
  2. package/configure/lib/hotspot-container.js +2 -1
  3. package/configure/lib/hotspot-container.js.map +1 -1
  4. package/configure/lib/root.js +29 -51
  5. package/configure/lib/root.js.map +1 -1
  6. package/configure/src/__tests__/__snapshots__/root.test.js.snap +271 -279
  7. package/configure/src/hotspot-container.jsx +2 -1
  8. package/configure/src/root.jsx +130 -152
  9. package/lib/hotspot/container.js +2 -1
  10. package/lib/hotspot/container.js.map +1 -1
  11. package/lib/hotspot/index.js +13 -15
  12. package/lib/hotspot/index.js.map +1 -1
  13. package/package.json +2 -2
  14. package/src/__tests__/container.test.jsx +4 -4
  15. package/src/hotspot/container.jsx +2 -1
  16. package/src/hotspot/index.jsx +23 -16
package/configure/src/__tests__/__snapshots__/root.test.js.snap CHANGED
@@ -1,266 +1,99 @@
1
1
  // Jest Snapshot v1, https://goo.gl/fbAQLP
2
2
 
3
3
  exports[`Root render renders 1`] = `
4
- <div>
5
- <ConfigLayout
6
- hideSettings={false}
7
- settings={
8
- <Panel
9
- configuration={
10
- Object {
11
- "maxImageHeight": Object {
12
- "prompt": 300,
13
- "rationale": 300,
14
- "teacherInstructions": 300,
15
- },
16
- "maxImageWidth": Object {
17
- "prompt": 300,
18
- "rationale": 300,
19
- "teacherInstructions": 300,
20
- },
21
- "minShapes": 2,
22
- "multipleCorrect": Object {
23
- "label": "Multiple Correct Responses",
24
- "settings": true,
25
- },
26
- "partialScoring": Object {
27
- "label": "Allow Partial Scoring",
28
- "settings": false,
29
- },
30
- "preserveAspectRatio": Object {
31
- "enabled": true,
32
- "label": "Preserve aspect ratio",
33
- "settings": false,
34
- },
35
- "prompt": Object {
36
- "label": "Prompt",
37
- "settings": true,
38
- },
39
- "rationale": Object {
40
- "label": "Rationale",
41
- "settings": true,
42
- },
43
- "settingsPanelDisabled": false,
44
- "spellCheck": Object {
45
- "enabled": true,
46
- "label": "Spellcheck",
47
- "settings": false,
48
- },
49
- "teacherInstructions": Object {
50
- "label": "Teacher Instructions",
51
- "settings": true,
52
- },
53
- "withRubric": Object {
54
- "label": "Add Rubric",
55
- "settings": false,
56
- },
57
- }
58
- }
59
- groups={
60
- Object {
61
- "Properties": Object {
62
- "rationaleEnabled": undefined,
63
- "rubricEnabled": false,
64
- "spellCheckEnabled": false,
65
- "teacherInstructionsEnabled": undefined,
66
- },
67
- "Settings": Object {
68
- "multipleCorrect": undefined,
69
- "partialScoring": false,
70
- "promptEnabled": undefined,
71
- },
72
- }
4
+ <ConfigLayout
5
+ hideSettings={false}
6
+ settings={
7
+ <Panel
8
+ configuration={
9
+ Object {
10
+ "maxImageHeight": Object {
11
+ "prompt": 300,
12
+ "rationale": 300,
13
+ "teacherInstructions": 300,
14
+ },
15
+ "maxImageWidth": Object {
16
+ "prompt": 300,
17
+ "rationale": 300,
18
+ "teacherInstructions": 300,
19
+ },
20
+ "minShapes": 2,
21
+ "multipleCorrect": Object {
22
+ "label": "Multiple Correct Responses",
23
+ "settings": true,
24
+ },
25
+ "partialScoring": Object {
26
+ "label": "Allow Partial Scoring",
27
+ "settings": false,
28
+ },
29
+ "preserveAspectRatio": Object {
30
+ "enabled": true,
31
+ "label": "Preserve aspect ratio",
32
+ "settings": false,
33
+ },
34
+ "prompt": Object {
35
+ "label": "Prompt",
36
+ "settings": true,
37
+ },
38
+ "rationale": Object {
39
+ "label": "Rationale",
40
+ "settings": true,
41
+ },
42
+ "settingsPanelDisabled": false,
43
+ "spellCheck": Object {
44
+ "enabled": true,
45
+ "label": "Spellcheck",
46
+ "settings": false,
47
+ },
48
+ "teacherInstructions": Object {
49
+ "label": "Teacher Instructions",
50
+ "settings": true,
51
+ },
52
+ "withRubric": Object {
53
+ "label": "Add Rubric",
54
+ "settings": false,
55
+ },
73
56
  }
74
- model={
75
- Object {
76
- "configure": Object {},
77
- "dimensions": Object {
78
- "height": 300,
79
- "width": 400,
80
- },
81
- "hotspotColor": "rgba(137, 183, 244, 0.65)",
82
- "hotspotList": Array [
83
- "rgba(137, 183, 244, 0.65)",
84
- "rgba(217, 30, 24, 0.65)",
85
- "rgba(254, 241, 96, 0.65)",
86
- ],
87
- "imageUrl": "https://cdn.fluence.net/image/0240eb1455ce4c4bb6180232347b6aef_W",
88
- "multipleCorrect": true,
89
- "outlineColor": "blue",
90
- "outlineList": Array [
91
- "blue",
92
- "red",
93
- "yellow",
94
- ],
57
+ }
58
+ groups={
59
+ Object {
60
+ "Properties": Object {
61
+ "rationaleEnabled": undefined,
62
+ "rubricEnabled": false,
63
+ "spellCheckEnabled": false,
64
+ "teacherInstructionsEnabled": undefined,
65
+ },
66
+ "Settings": Object {
67
+ "multipleCorrect": undefined,
95
68
  "partialScoring": false,
96
- "prompt": "This is the question prompt",
97
- "shapes": Object {
98
- "polygons": Array [
99
- Object {
100
- "correct": true,
101
- "id": "3",
102
- "points": Array [
103
- Object {
104
- "x": 1,
105
- "y": 148,
106
- },
107
- Object {
108
- "x": 1,
109
- "y": 288,
110
- },
111
- Object {
112
- "x": 129,
113
- "y": 288,
114
- },
115
- Object {
116
- "x": 129,
117
- "y": 148,
118
- },
119
- ],
120
- },
121
- Object {
122
- "correct": false,
123
- "id": "4",
124
- "points": Array [
125
- Object {
126
- "x": 141,
127
- "y": 151,
128
- },
129
- Object {
130
- "x": 141,
131
- "y": 289,
132
- },
133
- Object {
134
- "x": 269,
135
- "y": 289,
136
- },
137
- Object {
138
- "x": 269,
139
- "y": 151,
140
- },
141
- ],
142
- },
143
- Object {
144
- "correct": false,
145
- "id": "5",
146
- "points": Array [
147
- Object {
148
- "x": 279,
149
- "y": 149.99999999999997,
150
- },
151
- Object {
152
- "x": 279,
153
- "y": 289,
154
- },
155
- Object {
156
- "x": 407,
157
- "y": 289,
158
- },
159
- Object {
160
- "x": 407,
161
- "y": 149.99999999999997,
162
- },
163
- ],
164
- },
165
- ],
166
- "rectangles": Array [
167
- Object {
168
- "correct": true,
169
- "height": 140,
170
- "id": "0",
171
- "width": 130,
172
- "x": 1,
173
- "y": 1,
174
- },
175
- Object {
176
- "height": 140,
177
- "id": "1",
178
- "width": 130,
179
- "x": 140,
180
- "y": 1,
181
- },
182
- Object {
183
- "height": 140,
184
- "id": "2",
185
- "width": 130,
186
- "x": 280,
187
- "y": 1,
188
- },
189
- ],
190
- },
191
- }
69
+ "promptEnabled": undefined,
70
+ },
192
71
  }
193
- />
194
- }
195
- >
196
- <div>
197
- <div
198
- className=""
199
- >
200
- <WithStyles(Typography)
201
- variant="subheading"
202
- >
203
- Define Hotspot
204
- </WithStyles(Typography)>
205
- <WithStyles(Tooltip)
206
- classes={
207
- Object {
208
- "tooltip": undefined,
209
- }
210
- }
211
- disableFocusListener={true}
212
- disableTouchListener={true}
213
- placement="left"
214
- title="Validation requirements:
215
- There should be at least 2 shapes defined.
216
- There should be at least 1 shape selected."
217
- >
218
- <pure(InfoIcon)
219
- color="primary"
220
- fontSize="small"
221
- style={
222
- Object {
223
- "float": "right",
224
- }
225
- }
226
- />
227
- </WithStyles(Tooltip)>
228
- </div>
229
- <WithStyles(Palette)
230
- hotspotColor="rgba(137, 183, 244, 0.65)"
231
- hotspotList={
232
- Array [
72
+ }
73
+ model={
74
+ Object {
75
+ "configure": Object {},
76
+ "dimensions": Object {
77
+ "height": 300,
78
+ "width": 400,
79
+ },
80
+ "hotspotColor": "rgba(137, 183, 244, 0.65)",
81
+ "hotspotList": Array [
233
82
  "rgba(137, 183, 244, 0.65)",
234
83
  "rgba(217, 30, 24, 0.65)",
235
84
  "rgba(254, 241, 96, 0.65)",
236
- ]
237
- }
238
- onHotspotColorChange={[Function]}
239
- onOutlineColorChange={[Function]}
240
- outlineColor="blue"
241
- outlineList={
242
- Array [
85
+ ],
86
+ "imageUrl": "https://cdn.fluence.net/image/0240eb1455ce4c4bb6180232347b6aef_W",
87
+ "multipleCorrect": true,
88
+ "outlineColor": "blue",
89
+ "outlineList": Array [
243
90
  "blue",
244
91
  "red",
245
92
  "yellow",
246
- ]
247
- }
248
- />
249
- <WithStyles(Container)
250
- dimensions={
251
- Object {
252
- "height": 300,
253
- "width": 400,
254
- }
255
- }
256
- hasErrors={false}
257
- hotspotColor="rgba(137, 183, 244, 0.65)"
258
- imageUrl="https://cdn.fluence.net/image/0240eb1455ce4c4bb6180232347b6aef_W"
259
- multipleCorrect={true}
260
- outlineColor="blue"
261
- preserveAspectRatioEnabled={true}
262
- shapes={
263
- Object {
93
+ ],
94
+ "partialScoring": false,
95
+ "prompt": "This is the question prompt",
96
+ "shapes": Object {
264
97
  "polygons": Array [
265
98
  Object {
266
99
  "correct": true,
@@ -353,35 +186,194 @@ There should be at least 1 shape selected."
353
186
  "y": 1,
354
187
  },
355
188
  ],
189
+ },
190
+ }
191
+ }
192
+ />
193
+ }
194
+ >
195
+ <div>
196
+ <WithStyles(Typography)
197
+ variant="subheading"
198
+ >
199
+ Define Hotspot
200
+ </WithStyles(Typography)>
201
+ <WithStyles(Tooltip)
202
+ classes={
203
+ Object {
204
+ "tooltip": undefined,
205
+ }
206
+ }
207
+ disableFocusListener={true}
208
+ disableTouchListener={true}
209
+ placement="left"
210
+ title="Validation requirements:
211
+ There should be at least 2 shapes defined.
212
+ There should be at least 1 shape selected."
213
+ >
214
+ <pure(InfoIcon)
215
+ color="primary"
216
+ fontSize="small"
217
+ style={
218
+ Object {
219
+ "float": "right",
356
220
  }
357
221
  }
358
222
  />
359
- <div>
360
- <WithStyles(Typography)
361
- variant="subheading"
362
- >
363
- Image Dimensions
364
- </WithStyles(Typography)>
365
- <div>
366
- <Component
367
- key="hotspot-manual-width"
368
- label="Width"
369
- min={0}
370
- onChange={[Function]}
371
- showErrorWhenOutsideRange={true}
372
- value={400}
373
- />
374
- <Component
375
- key="hotspot-manual-height"
376
- label="Height"
377
- min={0}
378
- onChange={[Function]}
379
- showErrorWhenOutsideRange={true}
380
- value={300}
381
- />
382
- </div>
383
- </div>
384
- </div>
385
- </ConfigLayout>
386
- </div>
223
+ </WithStyles(Tooltip)>
224
+ </div>
225
+ <WithStyles(Palette)
226
+ hotspotColor="rgba(137, 183, 244, 0.65)"
227
+ hotspotList={
228
+ Array [
229
+ "rgba(137, 183, 244, 0.65)",
230
+ "rgba(217, 30, 24, 0.65)",
231
+ "rgba(254, 241, 96, 0.65)",
232
+ ]
233
+ }
234
+ onHotspotColorChange={[Function]}
235
+ onOutlineColorChange={[Function]}
236
+ outlineColor="blue"
237
+ outlineList={
238
+ Array [
239
+ "blue",
240
+ "red",
241
+ "yellow",
242
+ ]
243
+ }
244
+ />
245
+ <WithStyles(Container)
246
+ dimensions={
247
+ Object {
248
+ "height": 300,
249
+ "width": 400,
250
+ }
251
+ }
252
+ hasErrors={false}
253
+ hotspotColor="rgba(137, 183, 244, 0.65)"
254
+ imageUrl="https://cdn.fluence.net/image/0240eb1455ce4c4bb6180232347b6aef_W"
255
+ multipleCorrect={true}
256
+ outlineColor="blue"
257
+ preserveAspectRatioEnabled={true}
258
+ shapes={
259
+ Object {
260
+ "polygons": Array [
261
+ Object {
262
+ "correct": true,
263
+ "id": "3",
264
+ "points": Array [
265
+ Object {
266
+ "x": 1,
267
+ "y": 148,
268
+ },
269
+ Object {
270
+ "x": 1,
271
+ "y": 288,
272
+ },
273
+ Object {
274
+ "x": 129,
275
+ "y": 288,
276
+ },
277
+ Object {
278
+ "x": 129,
279
+ "y": 148,
280
+ },
281
+ ],
282
+ },
283
+ Object {
284
+ "correct": false,
285
+ "id": "4",
286
+ "points": Array [
287
+ Object {
288
+ "x": 141,
289
+ "y": 151,
290
+ },
291
+ Object {
292
+ "x": 141,
293
+ "y": 289,
294
+ },
295
+ Object {
296
+ "x": 269,
297
+ "y": 289,
298
+ },
299
+ Object {
300
+ "x": 269,
301
+ "y": 151,
302
+ },
303
+ ],
304
+ },
305
+ Object {
306
+ "correct": false,
307
+ "id": "5",
308
+ "points": Array [
309
+ Object {
310
+ "x": 279,
311
+ "y": 149.99999999999997,
312
+ },
313
+ Object {
314
+ "x": 279,
315
+ "y": 289,
316
+ },
317
+ Object {
318
+ "x": 407,
319
+ "y": 289,
320
+ },
321
+ Object {
322
+ "x": 407,
323
+ "y": 149.99999999999997,
324
+ },
325
+ ],
326
+ },
327
+ ],
328
+ "rectangles": Array [
329
+ Object {
330
+ "correct": true,
331
+ "height": 140,
332
+ "id": "0",
333
+ "width": 130,
334
+ "x": 1,
335
+ "y": 1,
336
+ },
337
+ Object {
338
+ "height": 140,
339
+ "id": "1",
340
+ "width": 130,
341
+ "x": 140,
342
+ "y": 1,
343
+ },
344
+ Object {
345
+ "height": 140,
346
+ "id": "2",
347
+ "width": 130,
348
+ "x": 280,
349
+ "y": 1,
350
+ },
351
+ ],
352
+ }
353
+ }
354
+ />
355
+ <WithStyles(Typography)
356
+ variant="subheading"
357
+ >
358
+ Image Dimensions
359
+ </WithStyles(Typography)>
360
+ <div>
361
+ <Component
362
+ key="hotspot-manual-width"
363
+ label="Width"
364
+ min={0}
365
+ onChange={[Function]}
366
+ showErrorWhenOutsideRange={true}
367
+ value={400}
368
+ />
369
+ <Component
370
+ key="hotspot-manual-height"
371
+ label="Height"
372
+ min={0}
373
+ onChange={[Function]}
374
+ showErrorWhenOutsideRange={true}
375
+ value={300}
376
+ />
377
+ </div>
378
+ </ConfigLayout>
387
379
  `;
package/configure/src/hotspot-container.jsx CHANGED
@@ -239,7 +239,8 @@ export class Container extends Component {
239
239
 
240
240
  const styles = (theme) => ({
241
241
  base: {
242
- marginTop: theme.spacing.unit * 2,
242
+ marginTop: theme.spacing.unit * 1.5,
243
+ marginBottom: theme.spacing.unit * 2.5,
243
244
  },
244
245
  box: {
245
246
  border: '1px solid #E0E1E6',