@pie-element/drawing-response 3.9.21 → 4.1.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.
Files changed (28) hide show
  1. package/CHANGELOG.md +44 -0
  2. package/configure/CHANGELOG.md +43 -0
  3. package/configure/lib/defaults.js +8 -0
  4. package/configure/lib/defaults.js.map +1 -1
  5. package/configure/lib/image-container.js +1 -4
  6. package/configure/lib/image-container.js.map +1 -1
  7. package/configure/lib/root.js +13 -3
  8. package/configure/lib/root.js.map +1 -1
  9. package/configure/package.json +3 -3
  10. package/configure/src/__tests__/__snapshots__/root.test.jsx.snap +10 -0
  11. package/configure/src/defaults.js +8 -0
  12. package/configure/src/image-container.jsx +1 -5
  13. package/configure/src/root.jsx +9 -0
  14. package/docs/config-schema.json +63 -0
  15. package/docs/config-schema.json.md +49 -1
  16. package/docs/pie-schema.json +21 -0
  17. package/docs/pie-schema.json.md +16 -0
  18. package/lib/drawing-response/container.js +13 -8
  19. package/lib/drawing-response/container.js.map +1 -1
  20. package/lib/drawing-response/drawable-image.js +1 -1
  21. package/lib/drawing-response/drawable-image.js.map +1 -1
  22. package/lib/drawing-response/drawable-main.js +8 -2
  23. package/lib/drawing-response/drawable-main.js.map +1 -1
  24. package/package.json +4 -4
  25. package/src/drawing-response/__tests__/__snapshots__/container.test.jsx.snap +154 -158
  26. package/src/drawing-response/container.jsx +22 -20
  27. package/src/drawing-response/drawable-image.jsx +1 -1
  28. package/src/drawing-response/drawable-main.jsx +6 -2
package/src/drawing-response/__tests__/__snapshots__/container.test.jsx.snap CHANGED
@@ -132,85 +132,83 @@ exports[`Container snapshot renders 1`] = `
132
132
  />
133
133
  <div>
134
134
  <div>
135
- <div>
136
- <WithStyles(RawButton)
137
- disabled={true}
138
- key="Select"
139
- label={
140
- <IconWrapper
141
- path="mdiCursorDefault"
142
- />
143
- }
144
- onClick={[Function]}
145
- title="Select"
146
- />
147
- <WithStyles(RawButton)
148
- disabled={false}
149
- key="FreePathDrawable"
150
- label={
151
- <IconWrapper
152
- path="mdiPencil"
153
- />
154
- }
155
- onClick={[Function]}
156
- title="Free Draw"
157
- />
158
- <WithStyles(RawButton)
159
- disabled={false}
160
- key="LineDrawable"
161
- label={
162
- <IconWrapper
163
- path="mdiMinus"
164
- />
165
- }
166
- onClick={[Function]}
167
- title="Line"
168
- />
169
- <WithStyles(RawButton)
170
- disabled={false}
171
- key="RectangleDrawable"
172
- label={
173
- <IconWrapper
174
- path="mdiRectangle"
175
- />
176
- }
177
- onClick={[Function]}
178
- title="Rectangle"
179
- />
180
- <WithStyles(RawButton)
181
- disabled={false}
182
- key="CircleDrawable"
183
- label={
184
- <IconWrapper
185
- path="mdiCircle"
186
- />
187
- }
188
- onClick={[Function]}
189
- title="Circle"
190
- />
191
- <WithStyles(RawButton)
192
- disabled={false}
193
- key="Text"
194
- label={
195
- <IconWrapper
196
- path="mdiFormatColorText"
197
- />
198
- }
199
- onClick={[Function]}
200
- title="Text Entry"
201
- />
202
- <WithStyles(RawButton)
203
- disabled={false}
204
- key="EraserDrawable"
205
- label={
206
- <IconWrapper
207
- path="mdiEraser"
208
- />
209
- }
210
- onClick={[Function]}
211
- title="Eraser"
212
- />
213
- </div>
135
+ <WithStyles(RawButton)
136
+ disabled={true}
137
+ key="Select"
138
+ label={
139
+ <IconWrapper
140
+ path="mdiCursorDefault"
141
+ />
142
+ }
143
+ onClick={[Function]}
144
+ title="Select"
145
+ />
146
+ <WithStyles(RawButton)
147
+ disabled={false}
148
+ key="FreePathDrawable"
149
+ label={
150
+ <IconWrapper
151
+ path="mdiPencil"
152
+ />
153
+ }
154
+ onClick={[Function]}
155
+ title="Free Draw"
156
+ />
157
+ <WithStyles(RawButton)
158
+ disabled={false}
159
+ key="LineDrawable"
160
+ label={
161
+ <IconWrapper
162
+ path="mdiMinus"
163
+ />
164
+ }
165
+ onClick={[Function]}
166
+ title="Line"
167
+ />
168
+ <WithStyles(RawButton)
169
+ disabled={false}
170
+ key="RectangleDrawable"
171
+ label={
172
+ <IconWrapper
173
+ path="mdiRectangle"
174
+ />
175
+ }
176
+ onClick={[Function]}
177
+ title="Rectangle"
178
+ />
179
+ <WithStyles(RawButton)
180
+ disabled={false}
181
+ key="CircleDrawable"
182
+ label={
183
+ <IconWrapper
184
+ path="mdiCircle"
185
+ />
186
+ }
187
+ onClick={[Function]}
188
+ title="Circle"
189
+ />
190
+ <WithStyles(RawButton)
191
+ disabled={false}
192
+ key="Text"
193
+ label={
194
+ <IconWrapper
195
+ path="mdiFormatColorText"
196
+ />
197
+ }
198
+ onClick={[Function]}
199
+ title="Text Entry"
200
+ />
201
+ <WithStyles(RawButton)
202
+ disabled={false}
203
+ key="EraserDrawable"
204
+ label={
205
+ <IconWrapper
206
+ path="mdiEraser"
207
+ />
208
+ }
209
+ onClick={[Function]}
210
+ title="Eraser"
211
+ />
214
212
  </div>
215
213
  <div
216
214
  style={
@@ -266,85 +264,83 @@ exports[`Container snapshot renders disabled 1`] = `
266
264
  <div>
267
265
  <div>
268
266
  <div>
269
- <div>
270
- <WithStyles(RawButton)
271
- disabled={true}
272
- key="Select"
273
- label={
274
- <IconWrapper
275
- path="mdiCursorDefault"
276
- />
277
- }
278
- onClick={[Function]}
279
- title="Select"
280
- />
281
- <WithStyles(RawButton)
282
- disabled={true}
283
- key="FreePathDrawable"
284
- label={
285
- <IconWrapper
286
- path="mdiPencil"
287
- />
288
- }
289
- onClick={[Function]}
290
- title="Free Draw"
291
- />
292
- <WithStyles(RawButton)
293
- disabled={true}
294
- key="LineDrawable"
295
- label={
296
- <IconWrapper
297
- path="mdiMinus"
298
- />
299
- }
300
- onClick={[Function]}
301
- title="Line"
302
- />
303
- <WithStyles(RawButton)
304
- disabled={true}
305
- key="RectangleDrawable"
306
- label={
307
- <IconWrapper
308
- path="mdiRectangle"
309
- />
310
- }
311
- onClick={[Function]}
312
- title="Rectangle"
313
- />
314
- <WithStyles(RawButton)
315
- disabled={true}
316
- key="CircleDrawable"
317
- label={
318
- <IconWrapper
319
- path="mdiCircle"
320
- />
321
- }
322
- onClick={[Function]}
323
- title="Circle"
324
- />
325
- <WithStyles(RawButton)
326
- disabled={true}
327
- key="Text"
328
- label={
329
- <IconWrapper
330
- path="mdiFormatColorText"
331
- />
332
- }
333
- onClick={[Function]}
334
- title="Text Entry"
335
- />
336
- <WithStyles(RawButton)
337
- disabled={true}
338
- key="EraserDrawable"
339
- label={
340
- <IconWrapper
341
- path="mdiEraser"
342
- />
343
- }
344
- onClick={[Function]}
345
- title="Eraser"
346
- />
347
- </div>
267
+ <WithStyles(RawButton)
268
+ disabled={true}
269
+ key="Select"
270
+ label={
271
+ <IconWrapper
272
+ path="mdiCursorDefault"
273
+ />
274
+ }
275
+ onClick={[Function]}
276
+ title="Select"
277
+ />
278
+ <WithStyles(RawButton)
279
+ disabled={true}
280
+ key="FreePathDrawable"
281
+ label={
282
+ <IconWrapper
283
+ path="mdiPencil"
284
+ />
285
+ }
286
+ onClick={[Function]}
287
+ title="Free Draw"
288
+ />
289
+ <WithStyles(RawButton)
290
+ disabled={true}
291
+ key="LineDrawable"
292
+ label={
293
+ <IconWrapper
294
+ path="mdiMinus"
295
+ />
296
+ }
297
+ onClick={[Function]}
298
+ title="Line"
299
+ />
300
+ <WithStyles(RawButton)
301
+ disabled={true}
302
+ key="RectangleDrawable"
303
+ label={
304
+ <IconWrapper
305
+ path="mdiRectangle"
306
+ />
307
+ }
308
+ onClick={[Function]}
309
+ title="Rectangle"
310
+ />
311
+ <WithStyles(RawButton)
312
+ disabled={true}
313
+ key="CircleDrawable"
314
+ label={
315
+ <IconWrapper
316
+ path="mdiCircle"
317
+ />
318
+ }
319
+ onClick={[Function]}
320
+ title="Circle"
321
+ />
322
+ <WithStyles(RawButton)
323
+ disabled={true}
324
+ key="Text"
325
+ label={
326
+ <IconWrapper
327
+ path="mdiFormatColorText"
328
+ />
329
+ }
330
+ onClick={[Function]}
331
+ title="Text Entry"
332
+ />
333
+ <WithStyles(RawButton)
334
+ disabled={true}
335
+ key="EraserDrawable"
336
+ label={
337
+ <IconWrapper
338
+ path="mdiEraser"
339
+ />
340
+ }
341
+ onClick={[Function]}
342
+ title="Eraser"
343
+ />
348
344
  </div>
349
345
  <div
350
346
  style={
package/src/drawing-response/container.jsx CHANGED
@@ -200,21 +200,19 @@ export class Container extends Component {
200
200
 
201
201
  <div className={classes.box}>
202
202
  <div className={classes.toolbar}>
203
- <div>
204
- {TOOLS.map(tool => {
205
- const { type, label, icon } = tool;
203
+ {TOOLS.map(tool => {
204
+ const { type, label, icon } = tool;
206
205
 
207
- return (
208
- <Button
209
- title={label}
210
- key={type}
211
- disabled={this.checkIfToolIsDisabled(type)}
212
- onClick={() => this.handleMakeToolActive(tool)}
213
- label={<Icon path={icon} />}
214
- />
215
- );
216
- })}
217
- </div>
206
+ return (
207
+ <Button
208
+ title={label}
209
+ key={type}
210
+ disabled={this.checkIfToolIsDisabled(type)}
211
+ onClick={() => this.handleMakeToolActive(tool)}
212
+ label={<Icon path={icon} />}
213
+ />
214
+ );
215
+ })}
218
216
  </div>
219
217
 
220
218
  <div
@@ -253,19 +251,23 @@ const styles = theme => ({
253
251
  box: {
254
252
  border: '1px solid #E0E1E6',
255
253
  borderRadius: '5px',
256
- marginTop: theme.spacing.unit * 2
254
+ marginTop: theme.spacing.unit * 2,
255
+ backgroundColor: '#ECEDF1'
257
256
  },
258
257
  drawableHeight: {
259
- minHeight: 350
258
+ minHeight: 350,
259
+ backgroundColor: '#fff'
260
260
  },
261
261
  toolbar: {
262
- backgroundColor: '#ECEDF1',
263
262
  borderBottom: '1px solid #E0E1E6',
264
263
  borderTopLeftRadius: '5px',
265
264
  borderTopRightRadius: '5px',
266
- display: 'flex',
267
- justifyContent: 'space-between',
268
- padding: '12px 8px'
265
+ padding: '12px 8px 4px',
266
+ boxSizing: 'border-box',
267
+ maxWidth: 'calc(100% - 163px)', // 163px is the width set on undoControls
268
+ '& button': {
269
+ marginBottom: '8px'
270
+ }
269
271
  }
270
272
  });
271
273
 
package/src/drawing-response/drawable-image.jsx CHANGED
@@ -10,7 +10,7 @@ const DrawableImage = ({ classes, url, dimensions: { height, width } }) => (
10
10
  src={url}
11
11
  style={{
12
12
  height,
13
- maxWidth: 598,
13
+ maxWidth: width,
14
14
  maxHeight: 350,
15
15
  width,
16
16
  }}
package/src/drawing-response/drawable-main.jsx CHANGED
@@ -240,7 +240,7 @@ export class DrawableMain extends React.Component {
240
240
  const imageWidth = imageDimensions?.width * scale;
241
241
 
242
242
  return (
243
- <div>
243
+ <div className={classes.wrapper}>
244
244
  <div className={classes.undoControls}>
245
245
  <Button disabled={disabled} onClick={this.handleUndo} label="Undo"/>
246
246
  <Button disabled={disabled} onClick={this.handleClearAll} label="Clear all"/>
@@ -288,6 +288,11 @@ export class DrawableMain extends React.Component {
288
288
  }
289
289
 
290
290
  const styles = () => ({
291
+ wrapper: {
292
+ display: 'flex',
293
+ flexWrap: 'wrap',
294
+ justifyContent: 'flex-end'
295
+ },
291
296
  base: {
292
297
  position: 'relative',
293
298
  width: '100%'
@@ -301,7 +306,6 @@ const styles = () => ({
301
306
  cursor: 'pointer'
302
307
  },
303
308
  undoControls: {
304
- float: 'right',
305
309
  marginTop: -43,
306
310
  width: 163
307
311
  }