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

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 (15) 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 +9 -15
  12. package/lib/hotspot/index.js.map +1 -1
  13. package/package.json +2 -2
  14. package/src/hotspot/container.jsx +2 -1
  15. package/src/hotspot/index.jsx +14 -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',