@pie-element/drawing-response 3.7.3-next.133 → 3.7.3-next.1332
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 +242 -0
- package/configure/CHANGELOG.md +200 -0
- package/configure/lib/defaults.js +20 -2
- package/configure/lib/defaults.js.map +1 -1
- package/configure/lib/image-container.js +44 -24
- package/configure/lib/image-container.js.map +1 -1
- package/configure/lib/index.js +17 -9
- package/configure/lib/index.js.map +1 -1
- package/configure/lib/root.js +50 -11
- package/configure/lib/root.js.map +1 -1
- package/configure/package.json +4 -4
- package/configure/src/__tests__/__snapshots__/image-container.test.jsx.snap +3 -2
- package/configure/src/__tests__/__snapshots__/root.test.jsx.snap +32 -14
- package/configure/src/__tests__/image-container.test.jsx +2 -2
- package/configure/src/defaults.js +20 -2
- package/configure/src/image-container.jsx +82 -50
- package/configure/src/index.js +14 -6
- package/configure/src/root.jsx +58 -25
- package/controller/CHANGELOG.md +24 -0
- package/controller/lib/index.js +13 -9
- package/controller/lib/index.js.map +1 -1
- package/controller/package.json +1 -1
- package/controller/src/__tests__/index.test.js +18 -9
- package/controller/src/index.js +4 -1
- package/docs/config-schema.json +95 -0
- package/docs/config-schema.json.md +73 -1
- package/docs/demo/generate.js +3 -1
- package/docs/pie-schema.json +39 -0
- package/docs/pie-schema.json.md +28 -0
- package/lib/drawing-response/container.js +78 -23
- package/lib/drawing-response/container.js.map +1 -1
- package/lib/drawing-response/drawable-circle.js +1 -1
- package/lib/drawing-response/drawable-circle.js.map +1 -1
- package/lib/drawing-response/drawable-eraser.js +1 -1
- package/lib/drawing-response/drawable-eraser.js.map +1 -1
- package/lib/drawing-response/drawable-free-path.js +1 -1
- package/lib/drawing-response/drawable-free-path.js.map +1 -1
- package/lib/drawing-response/drawable-helper.js.map +1 -1
- package/lib/drawing-response/drawable-image.js +1 -0
- package/lib/drawing-response/drawable-image.js.map +1 -1
- package/lib/drawing-response/drawable-line.js +1 -1
- package/lib/drawing-response/drawable-line.js.map +1 -1
- package/lib/drawing-response/drawable-main.js +45 -16
- package/lib/drawing-response/drawable-main.js.map +1 -1
- package/lib/drawing-response/drawable-palette.js +1 -1
- package/lib/drawing-response/drawable-palette.js.map +1 -1
- package/lib/drawing-response/drawable-rectangle.js +1 -1
- package/lib/drawing-response/drawable-rectangle.js.map +1 -1
- package/lib/drawing-response/drawable-text.js +15 -5
- package/lib/drawing-response/drawable-text.js.map +1 -1
- package/lib/drawing-response/drawable-transformer.js +1 -1
- package/lib/drawing-response/drawable-transformer.js.map +1 -1
- package/lib/drawing-response/index.js +9 -9
- package/lib/drawing-response/index.js.map +1 -1
- package/lib/index.js +4 -1
- package/lib/index.js.map +1 -1
- package/package.json +4 -4
- package/src/drawing-response/__tests__/__snapshots__/container.test.jsx.snap +172 -288
- package/src/drawing-response/__tests__/__snapshots__/drawing-main.test.jsx.snap +26 -2
- package/src/drawing-response/__tests__/container.test.jsx +7 -0
- package/src/drawing-response/__tests__/drawing-main.test.jsx +2 -1
- package/src/drawing-response/container.jsx +78 -36
- package/src/drawing-response/drawable-image.jsx +1 -0
- package/src/drawing-response/drawable-main.jsx +45 -17
- package/src/drawing-response/drawable-text.jsx +7 -1
- package/src/drawing-response/index.jsx +6 -4
- package/src/index.js +5 -0
|
@@ -13,11 +13,11 @@ export class ImageContainer extends Component {
|
|
|
13
13
|
constructor(props) {
|
|
14
14
|
super(props);
|
|
15
15
|
this.state = {
|
|
16
|
-
maxImageWidth:
|
|
17
|
-
maxImageHeight:
|
|
16
|
+
maxImageWidth: "100%",
|
|
17
|
+
maxImageHeight: "auto",
|
|
18
18
|
dragEnabled: true,
|
|
19
19
|
dropzoneActive: false,
|
|
20
|
-
}
|
|
20
|
+
};
|
|
21
21
|
}
|
|
22
22
|
|
|
23
23
|
componentDidMount() {
|
|
@@ -26,7 +26,7 @@ export class ImageContainer extends Component {
|
|
|
26
26
|
const { height, width } = positionInfo;
|
|
27
27
|
this.setState({
|
|
28
28
|
maxImageWidth: width,
|
|
29
|
-
maxImageHeight: height
|
|
29
|
+
maxImageHeight: height,
|
|
30
30
|
});
|
|
31
31
|
}
|
|
32
32
|
}
|
|
@@ -46,7 +46,7 @@ export class ImageContainer extends Component {
|
|
|
46
46
|
this.handleFileRead(file);
|
|
47
47
|
};
|
|
48
48
|
|
|
49
|
-
makeDropzoneActive= () => this.setState({ dropzoneActive: true });
|
|
49
|
+
makeDropzoneActive = () => this.setState({ dropzoneActive: true });
|
|
50
50
|
|
|
51
51
|
makeDropzoneInactive = () => this.setState({ dropzoneActive: false });
|
|
52
52
|
|
|
@@ -84,15 +84,22 @@ export class ImageContainer extends Component {
|
|
|
84
84
|
handleDisableDrag = () => this.setState({ dragEnabled: false });
|
|
85
85
|
handleInputClick = () => this.input.click();
|
|
86
86
|
|
|
87
|
-
handleOnImageLoad = ({ target: { offsetHeight, offsetWidth } }) => {
|
|
88
|
-
const { onUpdateImageDimension } = this.props;
|
|
87
|
+
handleOnImageLoad = ({ target: { offsetHeight, offsetWidth, naturalHeight, naturalWidth } }) => {
|
|
88
|
+
const { onUpdateImageDimension, imageDimensions } = this.props;
|
|
89
89
|
const resizeHandle = this.resize;
|
|
90
90
|
|
|
91
91
|
const dimensions = {
|
|
92
|
-
height: offsetHeight,
|
|
93
|
-
width: offsetWidth
|
|
92
|
+
height: (imageDimensions && imageDimensions.height) || offsetHeight || naturalHeight,
|
|
93
|
+
width: (imageDimensions && imageDimensions.width) || offsetWidth || naturalWidth,
|
|
94
94
|
};
|
|
95
95
|
|
|
96
|
+
// check if aspect ratio is not respected on replacing image
|
|
97
|
+
const imageAspectRatio = naturalWidth / naturalHeight;
|
|
98
|
+
|
|
99
|
+
if (dimensions.width !== dimensions.height * imageAspectRatio) {
|
|
100
|
+
dimensions.width = dimensions.height * imageAspectRatio;
|
|
101
|
+
}
|
|
102
|
+
|
|
96
103
|
this.setState({ dimensions });
|
|
97
104
|
onUpdateImageDimension(dimensions);
|
|
98
105
|
|
|
@@ -117,20 +124,26 @@ export class ImageContainer extends Component {
|
|
|
117
124
|
|
|
118
125
|
startResizing = (e) => {
|
|
119
126
|
const box = this.image;
|
|
120
|
-
const { maxImageWidth } = this.state;
|
|
127
|
+
const { maxImageWidth, maxImageHeight, dimensions } = this.state;
|
|
121
128
|
|
|
122
129
|
const bounds = e.target.getBoundingClientRect();
|
|
123
130
|
const x = e.clientX - bounds.left;
|
|
124
131
|
const y = e.clientY - bounds.top;
|
|
125
132
|
|
|
126
|
-
const
|
|
133
|
+
const imageAspectRatio = dimensions.width / dimensions.height;
|
|
134
|
+
const fitsContainer = x <= maxImageWidth + 5 && (x / imageAspectRatio) <= maxImageHeight + 5;
|
|
127
135
|
const hasMinimumWidth = x > 150 && y > 150;
|
|
128
136
|
|
|
129
|
-
if (fitsContainer && hasMinimumWidth) {
|
|
137
|
+
if (fitsContainer && hasMinimumWidth && box) {
|
|
130
138
|
box.style.width = `${x}px`;
|
|
131
|
-
box.style.height = `${
|
|
139
|
+
box.style.height = `${x / imageAspectRatio}px`;
|
|
132
140
|
|
|
133
|
-
this.setState({
|
|
141
|
+
this.setState({
|
|
142
|
+
dimensions: {
|
|
143
|
+
width: x,
|
|
144
|
+
height: x / imageAspectRatio,
|
|
145
|
+
},
|
|
146
|
+
});
|
|
134
147
|
}
|
|
135
148
|
|
|
136
149
|
this.handleDisableDrag();
|
|
@@ -141,26 +154,22 @@ export class ImageContainer extends Component {
|
|
|
141
154
|
|
|
142
155
|
return (
|
|
143
156
|
<div>
|
|
144
|
-
<Button
|
|
145
|
-
label={label}
|
|
146
|
-
onClick={this.handleInputClick}
|
|
147
|
-
/>
|
|
157
|
+
<Button label={label} onClick={this.handleInputClick} />
|
|
148
158
|
<input
|
|
149
159
|
accept="image/*"
|
|
150
160
|
className={classes.input}
|
|
151
161
|
onChange={this.handleUploadImage}
|
|
152
|
-
ref={ref => {
|
|
162
|
+
ref={(ref) => {
|
|
163
|
+
this.input = ref;
|
|
164
|
+
}}
|
|
153
165
|
type="file"
|
|
154
166
|
/>
|
|
155
167
|
</div>
|
|
156
|
-
)
|
|
168
|
+
);
|
|
157
169
|
}
|
|
158
170
|
|
|
159
171
|
render() {
|
|
160
|
-
const {
|
|
161
|
-
classes,
|
|
162
|
-
imageUrl
|
|
163
|
-
} = this.props;
|
|
172
|
+
const { classes, imageUrl, imageDimensions } = this.props;
|
|
164
173
|
const {
|
|
165
174
|
dropzoneActive,
|
|
166
175
|
dragEnabled,
|
|
@@ -169,32 +178,55 @@ export class ImageContainer extends Component {
|
|
|
169
178
|
} = this.state;
|
|
170
179
|
|
|
171
180
|
return (
|
|
172
|
-
<div className={classes.base}
|
|
173
|
-
<div
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
181
|
+
<div className={classes.base}>
|
|
182
|
+
<div
|
|
183
|
+
className={`${classes.box} ${
|
|
184
|
+
dropzoneActive ? classes.boxActive : ''
|
|
185
|
+
}`}
|
|
186
|
+
{...(dragEnabled
|
|
187
|
+
? {
|
|
188
|
+
onDragExit: this.handleOnDragExit,
|
|
189
|
+
onDragLeave: this.handleOnDragExit,
|
|
190
|
+
onDragOver: this.handleOnDragOver,
|
|
191
|
+
onDrop: this.handleOnDrop,
|
|
192
|
+
}
|
|
193
|
+
: {})}
|
|
180
194
|
>
|
|
181
195
|
<div className={classes.toolbar}>
|
|
182
|
-
{this.renderUploadControl(
|
|
196
|
+
{this.renderUploadControl(
|
|
197
|
+
imageUrl ? 'Replace Image' : 'Upload Image'
|
|
198
|
+
)}
|
|
183
199
|
</div>
|
|
184
200
|
|
|
185
|
-
<div
|
|
201
|
+
<div
|
|
202
|
+
ref={(ref) => {
|
|
203
|
+
this.imageSection = ref;
|
|
204
|
+
}}
|
|
205
|
+
className={classes.drawableHeight}
|
|
206
|
+
>
|
|
186
207
|
{imageUrl ? (
|
|
187
208
|
<div className={classes.imageContainer}>
|
|
188
209
|
<img
|
|
189
210
|
className={classes.image}
|
|
190
211
|
height="auto"
|
|
191
212
|
onLoad={this.handleOnImageLoad}
|
|
192
|
-
ref={ref => {
|
|
213
|
+
ref={(ref) => {
|
|
214
|
+
this.image = ref;
|
|
215
|
+
}}
|
|
193
216
|
src={imageUrl}
|
|
194
|
-
style={{
|
|
195
|
-
|
|
217
|
+
style={{
|
|
218
|
+
width: imageDimensions && imageDimensions.width ? imageDimensions.width : undefined,
|
|
219
|
+
maxWidth: maxImageWidth,
|
|
220
|
+
maxHeight: maxImageHeight
|
|
221
|
+
}}
|
|
222
|
+
alt=""
|
|
223
|
+
/>
|
|
224
|
+
<div
|
|
225
|
+
ref={(ref) => {
|
|
226
|
+
this.resize = ref;
|
|
227
|
+
}}
|
|
228
|
+
className={classes.resize}
|
|
196
229
|
/>
|
|
197
|
-
<div ref={ref => { this.resize = ref; }} className={classes.resize} />
|
|
198
230
|
</div>
|
|
199
231
|
) : (
|
|
200
232
|
<div className={`${classes.drawableHeight} ${classes.centered}`}>
|
|
@@ -210,25 +242,25 @@ export class ImageContainer extends Component {
|
|
|
210
242
|
}
|
|
211
243
|
}
|
|
212
244
|
|
|
213
|
-
const styles = theme => ({
|
|
245
|
+
const styles = (theme) => ({
|
|
214
246
|
base: {
|
|
215
|
-
marginTop: theme.spacing.unit * 2
|
|
247
|
+
marginTop: theme.spacing.unit * 2,
|
|
216
248
|
},
|
|
217
249
|
box: {
|
|
218
250
|
border: '1px solid #E0E1E6',
|
|
219
|
-
borderRadius: '5px'
|
|
251
|
+
borderRadius: '5px',
|
|
220
252
|
},
|
|
221
253
|
boxActive: {
|
|
222
|
-
border: '1px solid #0032C2'
|
|
254
|
+
border: '1px solid #0032C2',
|
|
223
255
|
},
|
|
224
256
|
centered: {
|
|
225
257
|
alignItems: 'center',
|
|
226
258
|
display: 'flex',
|
|
227
259
|
flexDirection: 'column',
|
|
228
|
-
justifyContent: 'center'
|
|
260
|
+
justifyContent: 'center',
|
|
229
261
|
},
|
|
230
262
|
drawableHeight: {
|
|
231
|
-
minHeight: 350
|
|
263
|
+
minHeight: 350,
|
|
232
264
|
},
|
|
233
265
|
image: {
|
|
234
266
|
alignItems: 'center',
|
|
@@ -237,7 +269,7 @@ const styles = theme => ({
|
|
|
237
269
|
},
|
|
238
270
|
imageContainer: {
|
|
239
271
|
position: 'relative',
|
|
240
|
-
width: 'fit-content'
|
|
272
|
+
width: 'fit-content',
|
|
241
273
|
},
|
|
242
274
|
resize: {
|
|
243
275
|
borderBottom: '1px solid #727272',
|
|
@@ -247,10 +279,10 @@ const styles = theme => ({
|
|
|
247
279
|
height: '10px',
|
|
248
280
|
position: 'absolute',
|
|
249
281
|
right: '-10px',
|
|
250
|
-
width: '10px'
|
|
282
|
+
width: '10px',
|
|
251
283
|
},
|
|
252
284
|
input: {
|
|
253
|
-
display: 'none'
|
|
285
|
+
display: 'none',
|
|
254
286
|
},
|
|
255
287
|
toolbar: {
|
|
256
288
|
backgroundColor: '#ECEDF1',
|
|
@@ -258,15 +290,15 @@ const styles = theme => ({
|
|
|
258
290
|
borderTopLeftRadius: '5px',
|
|
259
291
|
borderTopRightRadius: '5px',
|
|
260
292
|
display: 'flex',
|
|
261
|
-
padding: '12px 8px'
|
|
262
|
-
}
|
|
293
|
+
padding: '12px 8px',
|
|
294
|
+
},
|
|
263
295
|
});
|
|
264
296
|
|
|
265
297
|
ImageContainer.propTypes = {
|
|
266
298
|
classes: PropTypes.object.isRequired,
|
|
267
299
|
imageUrl: PropTypes.string.isRequired,
|
|
268
300
|
onImageUpload: PropTypes.func.isRequired,
|
|
269
|
-
onUpdateImageDimension: PropTypes.func.isRequired
|
|
301
|
+
onUpdateImageDimension: PropTypes.func.isRequired,
|
|
270
302
|
};
|
|
271
303
|
|
|
272
304
|
export default withStyles(styles)(ImageContainer);
|
package/configure/src/index.js
CHANGED
|
@@ -2,6 +2,8 @@ import {
|
|
|
2
2
|
ModelUpdatedEvent,
|
|
3
3
|
DeleteImageEvent,
|
|
4
4
|
InsertImageEvent,
|
|
5
|
+
InsertSoundEvent,
|
|
6
|
+
DeleteSoundEvent
|
|
5
7
|
} from '@pie-framework/pie-configure-events';
|
|
6
8
|
|
|
7
9
|
import React from 'react';
|
|
@@ -49,12 +51,6 @@ export default class DrawableResponseConfigure extends HTMLElement {
|
|
|
49
51
|
};
|
|
50
52
|
|
|
51
53
|
onConfigurationChanged = (c) => {
|
|
52
|
-
if (!c.backgroundImage.enabled) {
|
|
53
|
-
this.onModelChanged({
|
|
54
|
-
...this._model,
|
|
55
|
-
imageUrl: ''
|
|
56
|
-
});
|
|
57
|
-
}
|
|
58
54
|
this._configuration = c;
|
|
59
55
|
this._render();
|
|
60
56
|
};
|
|
@@ -67,6 +63,14 @@ export default class DrawableResponseConfigure extends HTMLElement {
|
|
|
67
63
|
this.dispatchEvent(new DeleteImageEvent(src, done));
|
|
68
64
|
};
|
|
69
65
|
|
|
66
|
+
insertSound(handler) {
|
|
67
|
+
this.dispatchEvent(new InsertSoundEvent(handler));
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
onDeleteSound(src, done) {
|
|
71
|
+
this.dispatchEvent(new DeleteSoundEvent(src, done));
|
|
72
|
+
}
|
|
73
|
+
|
|
70
74
|
_render() {
|
|
71
75
|
log('_render');
|
|
72
76
|
let element = React.createElement(Root, {
|
|
@@ -77,6 +81,10 @@ export default class DrawableResponseConfigure extends HTMLElement {
|
|
|
77
81
|
imageSupport: {
|
|
78
82
|
add: this.insertImage,
|
|
79
83
|
delete: this.onDeleteImage
|
|
84
|
+
},
|
|
85
|
+
uploadSoundSupport: {
|
|
86
|
+
add: this.insertSound.bind(this),
|
|
87
|
+
delete: this.onDeleteSound.bind(this)
|
|
80
88
|
}
|
|
81
89
|
});
|
|
82
90
|
ReactDOM.render(element, this);
|
package/configure/src/root.jsx
CHANGED
|
@@ -11,22 +11,22 @@ import cloneDeep from 'lodash/cloneDeep';
|
|
|
11
11
|
const { Panel, toggle } = settings;
|
|
12
12
|
|
|
13
13
|
export class Root extends React.Component {
|
|
14
|
-
onPromptChanged = prompt => {
|
|
14
|
+
onPromptChanged = (prompt) => {
|
|
15
15
|
const { model, onModelChanged } = this.props;
|
|
16
16
|
const update = cloneDeep(model);
|
|
17
17
|
|
|
18
18
|
onModelChanged({
|
|
19
19
|
...update,
|
|
20
|
-
prompt
|
|
20
|
+
prompt,
|
|
21
21
|
});
|
|
22
22
|
};
|
|
23
23
|
|
|
24
|
-
onTeacherInstructionsChanged = teacherInstructions => {
|
|
24
|
+
onTeacherInstructionsChanged = (teacherInstructions) => {
|
|
25
25
|
const { model, onModelChanged } = this.props;
|
|
26
26
|
|
|
27
27
|
onModelChanged({
|
|
28
28
|
...model,
|
|
29
|
-
teacherInstructions
|
|
29
|
+
teacherInstructions,
|
|
30
30
|
});
|
|
31
31
|
};
|
|
32
32
|
|
|
@@ -35,16 +35,16 @@ export class Root extends React.Component {
|
|
|
35
35
|
|
|
36
36
|
onModelChanged({
|
|
37
37
|
...model,
|
|
38
|
-
imageDimensions: dimensions
|
|
38
|
+
imageDimensions: dimensions,
|
|
39
39
|
});
|
|
40
40
|
};
|
|
41
41
|
|
|
42
|
-
onImageUpload = imageUrl => {
|
|
42
|
+
onImageUpload = (imageUrl) => {
|
|
43
43
|
const { model, onModelChanged } = this.props;
|
|
44
44
|
|
|
45
45
|
onModelChanged({
|
|
46
46
|
...model,
|
|
47
|
-
imageUrl
|
|
47
|
+
imageUrl,
|
|
48
48
|
});
|
|
49
49
|
};
|
|
50
50
|
|
|
@@ -54,15 +54,31 @@ export class Root extends React.Component {
|
|
|
54
54
|
configuration,
|
|
55
55
|
model,
|
|
56
56
|
imageSupport,
|
|
57
|
+
uploadSoundSupport,
|
|
57
58
|
onConfigurationChanged,
|
|
58
|
-
onModelChanged
|
|
59
|
+
onModelChanged,
|
|
59
60
|
} = this.props;
|
|
60
|
-
const {
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
61
|
+
const {
|
|
62
|
+
backgroundImage = {},
|
|
63
|
+
prompt = {},
|
|
64
|
+
teacherInstructions = {},
|
|
65
|
+
spellCheck = {},
|
|
66
|
+
maxImageWidth = {},
|
|
67
|
+
maxImageHeight = {},
|
|
68
|
+
withRubric,
|
|
69
|
+
} = configuration || {};
|
|
70
|
+
const {
|
|
71
|
+
teacherInstructionsEnabled,
|
|
72
|
+
promptEnabled,
|
|
73
|
+
spellCheckEnabled,
|
|
74
|
+
backgroundImageEnabled,
|
|
75
|
+
rubricEnabled
|
|
76
|
+
} = model || {};
|
|
64
77
|
const toolbarOpts = {};
|
|
65
78
|
|
|
79
|
+
const defaultImageMaxWidth = maxImageWidth && maxImageWidth.prompt;
|
|
80
|
+
const defaultImageMaxHeight = maxImageHeight && maxImageHeight.prompt;
|
|
81
|
+
|
|
66
82
|
switch (model.toolbarEditorPosition) {
|
|
67
83
|
case 'top':
|
|
68
84
|
toolbarOpts.position = 'top';
|
|
@@ -83,16 +99,17 @@ export class Root extends React.Component {
|
|
|
83
99
|
onChangeConfiguration={onConfigurationChanged}
|
|
84
100
|
groups={{
|
|
85
101
|
Settings: {
|
|
86
|
-
|
|
87
|
-
backgroundImage.settings &&
|
|
88
|
-
toggle(backgroundImage.label, true),
|
|
102
|
+
backgroundImageEnabled: backgroundImage.settings && toggle(backgroundImage.label),
|
|
89
103
|
promptEnabled: prompt.settings && toggle(prompt.label)
|
|
90
104
|
},
|
|
91
105
|
Properties: {
|
|
92
106
|
teacherInstructionsEnabled:
|
|
93
107
|
teacherInstructions.settings &&
|
|
94
|
-
toggle(teacherInstructions.label)
|
|
95
|
-
|
|
108
|
+
toggle(teacherInstructions.label),
|
|
109
|
+
spellCheckEnabled:
|
|
110
|
+
spellCheck.settings && toggle(spellCheck.label),
|
|
111
|
+
rubricEnabled: withRubric.settings && toggle(withRubric.label)
|
|
112
|
+
},
|
|
96
113
|
}}
|
|
97
114
|
/>
|
|
98
115
|
}
|
|
@@ -109,6 +126,11 @@ export class Root extends React.Component {
|
|
|
109
126
|
imageSupport={imageSupport}
|
|
110
127
|
nonEmpty={false}
|
|
111
128
|
toolbarOpts={toolbarOpts}
|
|
129
|
+
spellCheck={spellCheckEnabled}
|
|
130
|
+
maxImageWidth={maxImageWidth && maxImageWidth.teacherInstructions || defaultImageMaxWidth}
|
|
131
|
+
maxImageHeight={maxImageHeight && maxImageHeight.teacherInstructions || defaultImageMaxHeight}
|
|
132
|
+
uploadSoundSupport={uploadSoundSupport}
|
|
133
|
+
languageCharactersProps={[{ language: 'spanish' }, { language: 'special' }]}
|
|
112
134
|
/>
|
|
113
135
|
</InputContainer>
|
|
114
136
|
)}
|
|
@@ -119,11 +141,17 @@ export class Root extends React.Component {
|
|
|
119
141
|
markup={model.prompt}
|
|
120
142
|
onChange={this.onPromptChanged}
|
|
121
143
|
toolbarOpts={toolbarOpts}
|
|
144
|
+
spellCheck={spellCheckEnabled}
|
|
145
|
+
imageSupport={imageSupport}
|
|
146
|
+
maxImageWidth={defaultImageMaxWidth}
|
|
147
|
+
maxImageHeight={defaultImageMaxHeight}
|
|
148
|
+
uploadSoundSupport={uploadSoundSupport}
|
|
149
|
+
languageCharactersProps={[{ language: 'spanish' }, { language: 'special' }]}
|
|
122
150
|
/>
|
|
123
151
|
</InputContainer>
|
|
124
152
|
)}
|
|
125
153
|
|
|
126
|
-
{
|
|
154
|
+
{backgroundImageEnabled && (
|
|
127
155
|
<div>
|
|
128
156
|
<Typography className={classes.label} variant="subheading">
|
|
129
157
|
Define Background Image
|
|
@@ -133,6 +161,7 @@ export class Root extends React.Component {
|
|
|
133
161
|
imageUrl={model.imageUrl}
|
|
134
162
|
onUpdateImageDimension={this.onUpdateImageDimension}
|
|
135
163
|
onImageUpload={this.onImageUpload}
|
|
164
|
+
imageDimensions={model.imageDimensions}
|
|
136
165
|
/>
|
|
137
166
|
</div>
|
|
138
167
|
)}
|
|
@@ -143,20 +172,20 @@ export class Root extends React.Component {
|
|
|
143
172
|
}
|
|
144
173
|
}
|
|
145
174
|
|
|
146
|
-
const styles = theme => ({
|
|
175
|
+
const styles = (theme) => ({
|
|
147
176
|
base: {
|
|
148
|
-
marginTop: theme.spacing.unit * 3
|
|
177
|
+
marginTop: theme.spacing.unit * 3,
|
|
149
178
|
},
|
|
150
179
|
label: {
|
|
151
|
-
marginTop: theme.spacing.unit * 4
|
|
180
|
+
marginTop: theme.spacing.unit * 4,
|
|
152
181
|
},
|
|
153
182
|
prompt: {
|
|
154
183
|
paddingTop: theme.spacing.unit * 2,
|
|
155
|
-
width: '100%'
|
|
184
|
+
width: '100%',
|
|
156
185
|
},
|
|
157
186
|
regular: {
|
|
158
|
-
marginBottom: theme.spacing.unit * 3
|
|
159
|
-
}
|
|
187
|
+
marginBottom: theme.spacing.unit * 3,
|
|
188
|
+
},
|
|
160
189
|
});
|
|
161
190
|
|
|
162
191
|
Root.propTypes = {
|
|
@@ -165,7 +194,11 @@ Root.propTypes = {
|
|
|
165
194
|
model: PropTypes.object.isRequired,
|
|
166
195
|
imageSupport: PropTypes.shape({
|
|
167
196
|
add: PropTypes.func,
|
|
168
|
-
delete: PropTypes.func
|
|
197
|
+
delete: PropTypes.func,
|
|
198
|
+
}),
|
|
199
|
+
uploadSoundSupport: PropTypes.shape({
|
|
200
|
+
add: PropTypes.func,
|
|
201
|
+
delete: PropTypes.func,
|
|
169
202
|
}),
|
|
170
203
|
onModelChanged: PropTypes.func.isRequired,
|
|
171
204
|
onConfigurationChanged: PropTypes.func.isRequired,
|
package/controller/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,30 @@
|
|
|
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
|
+
## [3.2.8](https://github.com/pie-framework/pie-elements/compare/@pie-element/drawing-response-controller@3.2.7...@pie-element/drawing-response-controller@3.2.8) (2022-03-22)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @pie-element/drawing-response-controller
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
## [3.2.4](https://github.com/pie-framework/pie-elements/compare/@pie-element/drawing-response-controller@3.2.2...@pie-element/drawing-response-controller@3.2.4) (2021-11-11)
|
|
15
|
+
|
|
16
|
+
**Note:** Version bump only for package @pie-element/drawing-response-controller
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
## [3.2.3](https://github.com/pie-framework/pie-elements/compare/@pie-element/drawing-response-controller@3.2.2...@pie-element/drawing-response-controller@3.2.3) (2021-11-11)
|
|
23
|
+
|
|
24
|
+
**Note:** Version bump only for package @pie-element/drawing-response-controller
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
|
|
6
30
|
## [3.2.2](https://github.com/pie-framework/pie-elements/compare/@pie-element/drawing-response-controller@3.2.0...@pie-element/drawing-response-controller@3.2.2) (2021-08-05)
|
|
7
31
|
|
|
8
32
|
|
package/controller/lib/index.js
CHANGED
|
@@ -5,9 +5,10 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
value: true
|
|
7
7
|
});
|
|
8
|
+
exports.createDefaultModel = void 0;
|
|
8
9
|
exports.model = model;
|
|
10
|
+
exports.normalize = void 0;
|
|
9
11
|
exports.outcome = outcome;
|
|
10
|
-
exports.createDefaultModel = exports.normalize = void 0;
|
|
11
12
|
|
|
12
13
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
13
14
|
|
|
@@ -15,9 +16,9 @@ var _debug = _interopRequireDefault(require("debug"));
|
|
|
15
16
|
|
|
16
17
|
var _defaults = _interopRequireDefault(require("./defaults"));
|
|
17
18
|
|
|
18
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object);
|
|
19
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
19
20
|
|
|
20
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]
|
|
21
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
21
22
|
|
|
22
23
|
var log = (0, _debug["default"])('pie-elements:drawing-response:controller');
|
|
23
24
|
|
|
@@ -25,7 +26,8 @@ var normalize = function normalize(question) {
|
|
|
25
26
|
return _objectSpread({
|
|
26
27
|
promptEnabled: true,
|
|
27
28
|
teacherInstructionsEnabled: true,
|
|
28
|
-
studentInstructionsEnabled: true
|
|
29
|
+
studentInstructionsEnabled: true,
|
|
30
|
+
backgroundImageEnabled: true
|
|
29
31
|
}, question);
|
|
30
32
|
};
|
|
31
33
|
|
|
@@ -36,14 +38,16 @@ function model(question, session, env) {
|
|
|
36
38
|
var imageUrl = normalizedQuestion.imageUrl,
|
|
37
39
|
imageDimensions = normalizedQuestion.imageDimensions,
|
|
38
40
|
prompt = normalizedQuestion.prompt,
|
|
39
|
-
promptEnabled = normalizedQuestion.promptEnabled
|
|
41
|
+
promptEnabled = normalizedQuestion.promptEnabled,
|
|
42
|
+
backgroundImageEnabled = normalizedQuestion.backgroundImageEnabled;
|
|
40
43
|
return new Promise(function (resolve) {
|
|
41
44
|
var out = {
|
|
42
45
|
disabled: env.mode !== 'gather',
|
|
43
46
|
mode: env.mode,
|
|
44
47
|
imageDimensions: imageDimensions,
|
|
45
48
|
imageUrl: imageUrl,
|
|
46
|
-
prompt: promptEnabled ? prompt : null
|
|
49
|
+
prompt: promptEnabled ? prompt : null,
|
|
50
|
+
backgroundImageEnabled: backgroundImageEnabled
|
|
47
51
|
};
|
|
48
52
|
|
|
49
53
|
if (env.role === 'instructor' && (env.mode === 'view' || env.mode === 'evaluate')) {
|
|
@@ -65,9 +69,9 @@ var createDefaultModel = function createDefaultModel() {
|
|
|
65
69
|
|
|
66
70
|
exports.createDefaultModel = createDefaultModel;
|
|
67
71
|
|
|
68
|
-
function
|
|
69
|
-
/*config, session*/
|
|
70
|
-
{
|
|
72
|
+
function
|
|
73
|
+
/*config, session*/
|
|
74
|
+
outcome() {
|
|
71
75
|
return new Promise(function (resolve) {
|
|
72
76
|
log('outcome...');
|
|
73
77
|
resolve({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.js"],"names":["log","normalize","question","promptEnabled","teacherInstructionsEnabled","studentInstructionsEnabled","model","session","env","normalizedQuestion","imageUrl","imageDimensions","prompt","Promise","resolve","out","disabled","mode","role","teacherInstructions","createDefaultModel","defaults","outcome","score","completed","note"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../src/index.js"],"names":["log","normalize","question","promptEnabled","teacherInstructionsEnabled","studentInstructionsEnabled","backgroundImageEnabled","model","session","env","normalizedQuestion","imageUrl","imageDimensions","prompt","Promise","resolve","out","disabled","mode","role","teacherInstructions","createDefaultModel","defaults","outcome","score","completed","note"],"mappings":";;;;;;;;;;;;;;AAAA;;AACA;;;;;;AAEA,IAAMA,GAAG,GAAG,uBAAM,0CAAN,CAAZ;;AAEO,IAAMC,SAAS,GAAG,SAAZA,SAAY,CAAAC,QAAQ;AAAA;AAC/BC,IAAAA,aAAa,EAAE,IADgB;AAE/BC,IAAAA,0BAA0B,EAAE,IAFG;AAG/BC,IAAAA,0BAA0B,EAAE,IAHG;AAI/BC,IAAAA,sBAAsB,EAAE;AAJO,KAK5BJ,QAL4B;AAAA,CAA1B;;;;AAQA,SAASK,KAAT,CAAeL,QAAf,EAAyBM,OAAzB,EAAkCC,GAAlC,EAAuC;AAC5C,MAAMC,kBAAkB,GAAGT,SAAS,CAACC,QAAD,CAApC;AACA,MACES,QADF,GAMID,kBANJ,CACEC,QADF;AAAA,MAEEC,eAFF,GAMIF,kBANJ,CAEEE,eAFF;AAAA,MAGEC,MAHF,GAMIH,kBANJ,CAGEG,MAHF;AAAA,MAIEV,aAJF,GAMIO,kBANJ,CAIEP,aAJF;AAAA,MAKEG,sBALF,GAMII,kBANJ,CAKEJ,sBALF;AAQA,SAAO,IAAIQ,OAAJ,CAAY,UAAAC,OAAO,EAAI;AAC5B,QAAMC,GAAG,GAAG;AACVC,MAAAA,QAAQ,EAAER,GAAG,CAACS,IAAJ,KAAa,QADb;AAEVA,MAAAA,IAAI,EAAET,GAAG,CAACS,IAFA;AAGVN,MAAAA,eAAe,EAAfA,eAHU;AAIVD,MAAAA,QAAQ,EAARA,QAJU;AAKVE,MAAAA,MAAM,EAAEV,aAAa,GAAGU,MAAH,GAAY,IALvB;AAMVP,MAAAA,sBAAsB,EAAtBA;AANU,KAAZ;;AASA,QAAIG,GAAG,CAACU,IAAJ,KAAa,YAAb,KAA8BV,GAAG,CAACS,IAAJ,KAAa,MAAb,IAAuBT,GAAG,CAACS,IAAJ,KAAa,UAAlE,CAAJ,EAAmF;AACjFF,MAAAA,GAAG,CAACI,mBAAJ,GAA0BV,kBAAkB,CAACN,0BAAnB,GAAgDM,kBAAkB,CAACU,mBAAnE,GAAyF,IAAnH;AACD,KAFD,MAEO;AACLJ,MAAAA,GAAG,CAACI,mBAAJ,GAA0B,IAA1B;AACD;;AAEDL,IAAAA,OAAO,CAACC,GAAD,CAAP;AACD,GAjBM,CAAP;AAkBD;;AAEM,IAAMK,kBAAkB,GAAG,SAArBA,kBAAqB;AAAA,MAACd,KAAD,uEAAS,EAAT;AAAA,SAChC,IAAIO,OAAJ,CAAY,UAAAC,OAAO,EAAI;AACrBA,IAAAA,OAAO,iCACFO,oBADE,GAEFf,KAFE,EAAP;AAID,GALD,CADgC;AAAA,CAA3B;;;;AAQA;AAAiB;AAARgB,OAAT,GAAsC;AAC3C,SAAO,IAAIT,OAAJ,CAAY,UAAAC,OAAO,EAAI;AAC5Bf,IAAAA,GAAG,CAAC,YAAD,CAAH;AACAe,IAAAA,OAAO,CAAC;AACNS,MAAAA,KAAK,EAAE,CADD;AAENC,MAAAA,SAAS,EAAE,KAFL;AAGNC,MAAAA,IAAI,EAAE;AAHA,KAAD,CAAP;AAKD,GAPM,CAAP;AAQD","sourcesContent":["import debug from 'debug';\nimport defaults from './defaults';\n\nconst log = debug('pie-elements:drawing-response:controller');\n\nexport const normalize = question => ({\n promptEnabled: true,\n teacherInstructionsEnabled: true,\n studentInstructionsEnabled: true,\n backgroundImageEnabled: true,\n ...question,\n});\n\nexport function model(question, session, env) {\n const normalizedQuestion = normalize(question);\n const {\n imageUrl,\n imageDimensions,\n prompt,\n promptEnabled,\n backgroundImageEnabled\n } = normalizedQuestion;\n\n return new Promise(resolve => {\n const out = {\n disabled: env.mode !== 'gather',\n mode: env.mode,\n imageDimensions,\n imageUrl,\n prompt: promptEnabled ? prompt : null,\n backgroundImageEnabled\n };\n\n if (env.role === 'instructor' && (env.mode === 'view' || env.mode === 'evaluate')) {\n out.teacherInstructions = normalizedQuestion.teacherInstructionsEnabled ? normalizedQuestion.teacherInstructions : null;\n } else {\n out.teacherInstructions = null;\n }\n\n resolve(out);\n });\n}\n\nexport const createDefaultModel = (model = {}) =>\n new Promise(resolve => {\n resolve({\n ...defaults,\n ...model,\n })\n });\n\nexport function outcome(/*config, session*/) {\n return new Promise(resolve => {\n log('outcome...');\n resolve({\n score: 0,\n completed: 'n/a',\n note: 'Requires manual scoring'\n });\n });\n}\n"],"file":"index.js"}
|