@pie-element/drawing-response 6.0.1-next.6 → 6.0.1-next.73

package/configure/src/root.jsx

@@ -76,91 +76,77 @@ export class Root extends React.Component {
     };
 
     return (
-      <div className={classes.base}>
-        <layout.ConfigLayout
-          hideSettings={settingsPanelDisabled}
-          settings={
-            <Panel
-              model={model}
-              onChangeModel={onModelChanged}
-              configuration={configuration}
-              onChangeConfiguration={onConfigurationChanged}
-              groups={{
-                Settings: panelSettings,
-                Properties: panelProperties,
-              }}
+      <layout.ConfigLayout
+        hideSettings={settingsPanelDisabled}
+        settings={
+          <Panel
+            model={model}
+            onChangeModel={onModelChanged}
+            configuration={configuration}
+            onChangeConfiguration={onConfigurationChanged}
+            groups={{
+              Settings: panelSettings,
+              Properties: panelProperties,
+            }}
+          />
+        }
+      >
+        {teacherInstructionsEnabled && (
+          <InputContainer label={teacherInstructions.label} className={classes.promptHolder}>
+            <EditableHtml
+              markup={model.teacherInstructions || ''}
+              onChange={this.onTeacherInstructionsChanged}
+              imageSupport={imageSupport}
+              nonEmpty={false}
+              toolbarOpts={toolbarOpts}
+              spellCheck={spellCheckEnabled}
+              maxImageWidth={(maxImageWidth && maxImageWidth.teacherInstructions) || defaultImageMaxWidth}
+              maxImageHeight={(maxImageHeight && maxImageHeight.teacherInstructions) || defaultImageMaxHeight}
+              uploadSoundSupport={uploadSoundSupport}
+              languageCharactersProps={[{ language: 'spanish' }, { language: 'special' }]}
             />
-          }
-        >
-          <div className={classes.regular}>
-            {teacherInstructionsEnabled && (
-              <InputContainer label={teacherInstructions.label} className={classes.prompt}>
-                <EditableHtml
-                  markup={model.teacherInstructions || ''}
-                  onChange={this.onTeacherInstructionsChanged}
-                  imageSupport={imageSupport}
-                  nonEmpty={false}
-                  toolbarOpts={toolbarOpts}
-                  spellCheck={spellCheckEnabled}
-                  maxImageWidth={(maxImageWidth && maxImageWidth.teacherInstructions) || defaultImageMaxWidth}
-                  maxImageHeight={(maxImageHeight && maxImageHeight.teacherInstructions) || defaultImageMaxHeight}
-                  uploadSoundSupport={uploadSoundSupport}
-                  languageCharactersProps={[{ language: 'spanish' }, { language: 'special' }]}
-                />
-              </InputContainer>
-            )}
-
-            {promptEnabled && (
-              <InputContainer label="Item Stem" className={classes.prompt}>
-                <EditableHtml
-                  markup={model.prompt}
-                  onChange={this.onPromptChanged}
-                  toolbarOpts={toolbarOpts}
-                  spellCheck={spellCheckEnabled}
-                  imageSupport={imageSupport}
-                  maxImageWidth={defaultImageMaxWidth}
-                  maxImageHeight={defaultImageMaxHeight}
-                  uploadSoundSupport={uploadSoundSupport}
-                  languageCharactersProps={[{ language: 'spanish' }, { language: 'special' }]}
-                />
-              </InputContainer>
-            )}
-
-            {backgroundImageEnabled && (
-              <div>
-                <Typography className={classes.label} variant="subheading">
-                  Define Background Image
-                </Typography>
-
-                <ImageContainer
-                  imageUrl={model.imageUrl}
-                  onUpdateImageDimension={this.onUpdateImageDimension}
-                  onImageUpload={this.onImageUpload}
-                  imageDimensions={model.imageDimensions}
-                />
-              </div>
-            )}
-          </div>
-        </layout.ConfigLayout>
-      </div>
+          </InputContainer>
+        )}
+
+        {promptEnabled && (
+          <InputContainer label="Item Stem" className={classes.promptHolder}>
+            <EditableHtml
+              markup={model.prompt}
+              onChange={this.onPromptChanged}
+              toolbarOpts={toolbarOpts}
+              spellCheck={spellCheckEnabled}
+              imageSupport={imageSupport}
+              maxImageWidth={defaultImageMaxWidth}
+              maxImageHeight={defaultImageMaxHeight}
+              uploadSoundSupport={uploadSoundSupport}
+              languageCharactersProps={[{ language: 'spanish' }, { language: 'special' }]}
+            />
+          </InputContainer>
+        )}
+
+        {backgroundImageEnabled && (
+          <React.Fragment>
+            <Typography variant="subheading">Define Background Image</Typography>
+
+            <ImageContainer
+              imageUrl={model.imageUrl}
+              onUpdateImageDimension={this.onUpdateImageDimension}
+              onImageUpload={this.onImageUpload}
+              imageDimensions={model.imageDimensions}
+            />
+          </React.Fragment>
+        )}
+      </layout.ConfigLayout>
     );
   }
 }
 
 const styles = (theme) => ({
-  base: {
-    marginTop: theme.spacing.unit * 3,
-  },
-  label: {
-    marginTop: theme.spacing.unit * 4,
-  },
-  prompt: {
+  promptHolder: {
     paddingTop: theme.spacing.unit * 2,
+    marginBottom: theme.spacing.unit * 2,
     width: '100%',
   },
-  regular: {
-    marginBottom: theme.spacing.unit * 3,
-  },
 });
 
 Root.propTypes = {

package/docs/config-schema.json

@@ -150,7 +150,7 @@
           "title": "label"
         },
         "forceEnabled": {
-          "description": "Indicates the value for the toggle; if true, this property will not be visible in Settings Panel",
+          "description": "Indicates the value for the toggle;\nif true:\n- this property will not be visible in Settings Panel (settings will become automatically false)\n- the model property afferent to it will become automatically false",
           "type": "boolean",
           "title": "forceEnabled"
         }
@@ -243,7 +243,7 @@
           "title": "label"
         },
         "forceEnabled": {
-          "description": "Indicates the value for the toggle; if true, this property will not be visible in Settings Panel",
+          "description": "Indicates the value for the toggle;\nif true:\n- this property will not be visible in Settings Panel (settings will become automatically false)\n- the model property afferent to it will become automatically false",
           "type": "boolean",
           "title": "forceEnabled"
         }

package/docs/config-schema.json.md

@@ -117,7 +117,10 @@ Indicates the label for the item that has to be displayed in the Settings Panel
 
 ## `forceEnabled` (boolean)
 
-Indicates the value for the toggle; if true, this property will not be visible in Settings Panel
+Indicates the value for the toggle;
+if true:
+- this property will not be visible in Settings Panel (settings will become automatically false)
+- the model property afferent to it will become automatically false
 
 # `showPrompt` (boolean)
 
@@ -196,4 +199,7 @@ Indicates the label for the item that has to be displayed in the Settings Panel
 
 ### `forceEnabled` (boolean)
 
-Indicates the value for the toggle; if true, this property will not be visible in Settings Panel
+Indicates the value for the toggle;
+if true:
+- this property will not be visible in Settings Panel (settings will become automatically false)
+- the model property afferent to it will become automatically false

package/docs/pie-schema.json

@@ -183,7 +183,7 @@
           "title": "label"
         },
         "forceEnabled": {
-          "description": "Indicates the value for the toggle; if true, this property will not be visible in Settings Panel",
+          "description": "Indicates the value for the toggle;\nif true:\n- this property will not be visible in Settings Panel (settings will become automatically false)\n- the model property afferent to it will become automatically false",
           "type": "boolean",
           "title": "forceEnabled"
         }

package/docs/pie-schema.json.md

@@ -142,7 +142,10 @@ Indicates the label for the item that has to be displayed in the Settings Panel
 
 ### `forceEnabled` (boolean)
 
-Indicates the value for the toggle; if true, this property will not be visible in Settings Panel
+Indicates the value for the toggle;
+if true:
+- this property will not be visible in Settings Panel (settings will become automatically false)
+- the model property afferent to it will become automatically false
 
 ## `Dimension` (object)
 

package/lib/drawing-response/drawable-main.js

@@ -378,7 +378,7 @@ var styles = function styles() {
     },
     undoControls: {
       marginTop: -43,
-      width: 163
+      width: 172
     }
   };
 };

package/lib/drawing-response/drawable-main.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/drawing-response/drawable-main.jsx"],"names":["DrawableMain","props","onSessionChange","session","TextEntry","drawables","state","newSession","map","d","toJson","texts","all","text","id","attrs","value","setState","isOver","e","document","body","style","overflow","newDrawable","textIsSelected","toolActive","fillColor","outlineColor","scale","length","target","getStage","getPointerPosition","x","y","type","startx","starty","createdAt","Date","drawableToAdd","registerMovement","push","handleSessionChange","bind","updatedNewDrawable","newDrawables","allData","sort","a","b","lastElement","pop","updatedAt","nextProps","currentDrawables","drawablesString","JSON","stringify","sessionDrawableString","drawable","drawableArray","currentTexts","setAll","classes","disabled","drawableDimensions","imageDimensions","imageUrl","paintColor","backgroundImageEnabled","draggable","paint","drawableProps","forceUpdate","toggleTextSelected","stage","onMouseOverElement","onMouseOutElement","listeners","onMouseUp","handleMouseUp","onTouchEnd","onMouseMove","handleMouseMove","onTouchMove","onMouseDown","handleMouseDown","onTouchStart","imageHeight","height","imageWidth","width","wrapper","undoControls","handleUndo","handleClearAll","base","renderTextareas","ref","active","layer","key","render","React","Component","styles","display","flexWrap","justifyContent","position","left","touchAction","top","cursor","marginTop","propTypes","PropTypes","object","isRequired","bool","string","func","number"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport omit from 'lodash/omit';\nimport cloneDeep from 'lodash/cloneDeep';\nimport isEqual from 'lodash/isEqual';\nimport classnames from 'classnames';\nimport { Layer, Stage } from 'react-konva';\nimport { withStyles } from '@material-ui/core/styles';\n\nimport ImageBackground from './drawable-image';\nimport Button from './button';\nimport factory from './factory';\n\nexport class DrawableMain extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      drawables: [],\n      newDrawable: [],\n      textIsSelected: false\n    };\n  }\n\n  UNSAFE_componentWillReceiveProps(nextProps) {\n    if (nextProps.session) {\n      const { TextEntry } = nextProps;\n      const { drawables: currentDrawables } = this.state;\n\n      if (nextProps.session.drawables) {\n        const newDrawables = cloneDeep(nextProps.session.drawables);\n        const drawablesString = JSON.stringify(currentDrawables);\n        const sessionDrawableString = JSON.stringify(\n          (newDrawables || []).map(drawable => omit(drawable, 'type'))\n        );\n\n        if (drawablesString !== sessionDrawableString) {\n          const drawableArray = nextProps.session.drawables;\n\n          this.setState({\n            drawables: drawableArray.map(drawable =>\n              factory(drawable.type, drawable)\n            )\n          });\n        }\n\n        const currentTexts = TextEntry.all.map(text => ({\n          ...text,\n          ...(TextEntry[`text_${text.id}`] &&\n            TextEntry[`text_${text.id}`].attrs),\n          value:\n            TextEntry[`textarea_${text.id}`] &&\n            TextEntry[`textarea_${text.id}`].value\n        }));\n\n        if (!isEqual(currentTexts, nextProps.session.texts)) {\n          TextEntry.setAll(nextProps.session.texts || []);\n        }\n      }\n    } else {\n      this.handleSessionChange();\n    }\n  }\n\n  handleSessionChange = () => {\n    const { onSessionChange, session, TextEntry } = this.props;\n    const { drawables } = this.state;\n\n    const newSession = {\n      drawables: drawables.map(d => d.toJson()),\n      texts: TextEntry.all.map(text => ({\n        ...text,\n        ...(TextEntry[`text_${text.id}`] && TextEntry[`text_${text.id}`].attrs),\n        value:\n          TextEntry[`textarea_${text.id}`] &&\n          TextEntry[`textarea_${text.id}`].value\n      }))\n    };\n\n    if (!isEqual(newSession, session)) {\n      onSessionChange({\n        ...session,\n        ...newSession\n      });\n    }\n  };\n\n  onMouseOverElement = () => this.setState({ isOver: true });\n\n  onMouseOutElement = () => this.setState({ isOver: false });\n\n  handleMouseDown = e => {\n    // ONLY IF MOBILE?\n    document.body.style.overflow = 'hidden';\n\n    const { newDrawable, textIsSelected } = this.state;\n    const { toolActive, fillColor, outlineColor, scale } = this.props;\n\n    if (newDrawable.length === 0 && !textIsSelected) {\n      const { x, y } = e.target.getStage().getPointerPosition();\n\n      const newDrawable = factory(toolActive.type, {\n        startx: x / scale,\n        starty: y / scale,\n        fillColor,\n        outlineColor,\n        createdAt: new Date()\n      });\n\n      this.setState({\n        newDrawable: [newDrawable]\n      });\n    }\n  };\n\n  handleMouseUp = e => {\n    // ONLY IF MOBILE?\n    document.body.style.overflow = 'initial';\n\n    const { newDrawable, drawables } = this.state;\n    const { scale } = this.props;\n\n    if (newDrawable.length === 1) {\n      const { x, y } = e.target.getStage().getPointerPosition();\n      const drawableToAdd = newDrawable[0];\n\n      drawableToAdd.registerMovement(x / scale, y / scale);\n      drawables.push(drawableToAdd);\n\n      this.setState(\n        {\n          newDrawable: [],\n          drawables\n        },\n        this.handleSessionChange.bind(this, drawableToAdd)\n      );\n    }\n  };\n\n  handleMouseMove = e => {\n    const { newDrawable } = this.state;\n    const { scale } = this.props;\n\n    if (newDrawable.length === 1) {\n      const { x, y } = e.target.getStage().getPointerPosition();\n      const updatedNewDrawable = newDrawable[0];\n\n      updatedNewDrawable.registerMovement(x / scale, y / scale);\n\n      this.setState({\n        newDrawable: [updatedNewDrawable]\n      });\n    }\n  };\n\n  handleUndo = () => {\n    const { drawables } = this.state;\n    const { TextEntry } = this.props;\n\n    const newDrawables = [...drawables];\n    const allData = [...drawables, ...TextEntry.all];\n\n    allData.sort((a, b) => new Date(a.createdAt) - new Date(b.createdAt));\n    const lastElement = allData[allData.length - 1];\n\n    if (lastElement && lastElement.type === 'text-entry') {\n      TextEntry.all.pop();\n      this.setState({ updatedAt: new Date() }, this.handleSessionChange);\n    } else {\n      newDrawables.pop();\n      this.setState({ drawables: newDrawables }, this.handleSessionChange);\n    }\n  };\n\n  handleClearAll = () => {\n    const { TextEntry } = this.props;\n\n    TextEntry.all = [];\n    this.setState(\n      { drawables: [], updatedAt: new Date() },\n      this.handleSessionChange\n    );\n  };\n\n  toggleTextSelected = textIsSelected => this.setState({ textIsSelected });\n\n  render() {\n    const {\n      classes,\n      disabled,\n      drawableDimensions,\n      fillColor,\n      imageDimensions,\n      imageUrl,\n      paintColor,\n      outlineColor,\n      TextEntry,\n      backgroundImageEnabled = true,\n      toolActive: { type },\n      scale\n    } = this.props;\n    const { isOver, newDrawable } = this.state;\n\n    const draggable = type === 'Select';\n    const paint = type === 'PaintBucket';\n    const drawables = [...this.state.drawables, ...this.state.newDrawable];\n\n    const drawableProps = {\n      draggable: draggable && !disabled,\n      disabled,\n      paint,\n      fillColor,\n      forceUpdate: () => this.setState({ updatedAt: new Date() }),\n      paintColor,\n      outlineColor,\n      toggleTextSelected: this.toggleTextSelected,\n      handleSessionChange: this.handleSessionChange,\n      stage: this.stage,\n      onMouseOverElement: this.onMouseOverElement,\n      onMouseOutElement: this.onMouseOutElement,\n      scale\n    };\n\n    let listeners = {};\n\n    if (!disabled) {\n      listeners = {\n        onMouseUp: this.handleMouseUp,\n        onTouchEnd: this.handleMouseUp,\n        onMouseMove: this.handleMouseMove,\n        onTouchMove: this.handleMouseMove,\n      };\n\n      if (!draggable) {\n        listeners.onMouseDown = this.handleMouseDown;\n        listeners.onTouchStart = this.handleMouseDown;\n      }\n    }\n\n    const imageHeight = imageDimensions?.height * scale;\n    const imageWidth = imageDimensions?.width * scale;\n\n    return (\n      <div className={classes.wrapper}>\n        <div className={classes.undoControls}>\n          <Button disabled={disabled} onClick={this.handleUndo} label=\"Undo\"/>\n          <Button disabled={disabled} onClick={this.handleClearAll} label=\"Clear all\"/>\n        </div>\n        <div className={classes.base}>\n          {backgroundImageEnabled && imageUrl && (\n            <ImageBackground\n              dimensions={{ height: imageHeight, width: imageWidth }}\n              url={imageUrl}/>\n          )}\n\n          {TextEntry.renderTextareas()}\n\n          <Stage\n            scaleX={scale}\n            scaleY={scale}\n            ref={ref => {\n              this.stage = ref;\n            }}\n            className={classnames(classes.stage, {\n              [classes.active]:\n              draggable &&\n              (isOver || (newDrawable && newDrawable.length === 1))\n            })}\n            height={drawableDimensions.height}\n            width={drawableDimensions.width}\n            {...listeners}\n          >\n            <Layer\n              ref={ref => {\n                this.layer = ref;\n              }}\n            >\n              {drawables.map((drawable, key) =>\n                drawable.render({ ...drawableProps, key })\n              )}\n              {/* Text Entry is a special case  */}\n              {TextEntry.render(drawableProps)}\n            </Layer>\n          </Stage>\n        </div>\n      </div>\n    );\n  }\n}\n\nconst styles = () => ({\n  wrapper: {\n    display: 'flex',\n    flexWrap: 'wrap',\n    justifyContent: 'flex-end'\n  },\n  base: {\n    position: 'relative',\n    width: '100%'\n  },\n  stage: {\n    left: 0,\n    position: 'absolute',\n    touchAction: 'none',\n    top: 0\n  },\n  active: {\n    cursor: 'pointer'\n  },\n  undoControls: {\n    marginTop: -43,\n    width: 163\n  }\n});\n\nDrawableMain.propTypes = {\n  classes: PropTypes.object.isRequired,\n  disabled: PropTypes.bool,\n  drawableDimensions: PropTypes.object.isRequired,\n  imageDimensions: PropTypes.object.isRequired,\n  fillColor: PropTypes.string.isRequired,\n  onSessionChange: PropTypes.func.isRequired,\n  paintColor: PropTypes.string.isRequired,\n  outlineColor: PropTypes.string.isRequired,\n  imageUrl: PropTypes.string.isRequired,\n  TextEntry: PropTypes.object.isRequired,\n  toolActive: PropTypes.object.isRequired,\n  session: PropTypes.object.isRequired,\n  backgroundImageEnabled: PropTypes.bool.isRequired,\n  scale: PropTypes.number.isRequired\n};\n\nexport default withStyles(styles)(DrawableMain);\n"],"file":"drawable-main.js"}
+{"version":3,"sources":["../../src/drawing-response/drawable-main.jsx"],"names":["DrawableMain","props","onSessionChange","session","TextEntry","drawables","state","newSession","map","d","toJson","texts","all","text","id","attrs","value","setState","isOver","e","document","body","style","overflow","newDrawable","textIsSelected","toolActive","fillColor","outlineColor","scale","length","target","getStage","getPointerPosition","x","y","type","startx","starty","createdAt","Date","drawableToAdd","registerMovement","push","handleSessionChange","bind","updatedNewDrawable","newDrawables","allData","sort","a","b","lastElement","pop","updatedAt","nextProps","currentDrawables","drawablesString","JSON","stringify","sessionDrawableString","drawable","drawableArray","currentTexts","setAll","classes","disabled","drawableDimensions","imageDimensions","imageUrl","paintColor","backgroundImageEnabled","draggable","paint","drawableProps","forceUpdate","toggleTextSelected","stage","onMouseOverElement","onMouseOutElement","listeners","onMouseUp","handleMouseUp","onTouchEnd","onMouseMove","handleMouseMove","onTouchMove","onMouseDown","handleMouseDown","onTouchStart","imageHeight","height","imageWidth","width","wrapper","undoControls","handleUndo","handleClearAll","base","renderTextareas","ref","active","layer","key","render","React","Component","styles","display","flexWrap","justifyContent","position","left","touchAction","top","cursor","marginTop","propTypes","PropTypes","object","isRequired","bool","string","func","number"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport omit from 'lodash/omit';\nimport cloneDeep from 'lodash/cloneDeep';\nimport isEqual from 'lodash/isEqual';\nimport classnames from 'classnames';\nimport { Layer, Stage } from 'react-konva';\nimport { withStyles } from '@material-ui/core/styles';\n\nimport ImageBackground from './drawable-image';\nimport Button from './button';\nimport factory from './factory';\n\nexport class DrawableMain extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      drawables: [],\n      newDrawable: [],\n      textIsSelected: false,\n    };\n  }\n\n  UNSAFE_componentWillReceiveProps(nextProps) {\n    if (nextProps.session) {\n      const { TextEntry } = nextProps;\n      const { drawables: currentDrawables } = this.state;\n\n      if (nextProps.session.drawables) {\n        const newDrawables = cloneDeep(nextProps.session.drawables);\n        const drawablesString = JSON.stringify(currentDrawables);\n        const sessionDrawableString = JSON.stringify((newDrawables || []).map((drawable) => omit(drawable, 'type')));\n\n        if (drawablesString !== sessionDrawableString) {\n          const drawableArray = nextProps.session.drawables;\n\n          this.setState({\n            drawables: drawableArray.map((drawable) => factory(drawable.type, drawable)),\n          });\n        }\n\n        const currentTexts = TextEntry.all.map((text) => ({\n          ...text,\n          ...(TextEntry[`text_${text.id}`] && TextEntry[`text_${text.id}`].attrs),\n          value: TextEntry[`textarea_${text.id}`] && TextEntry[`textarea_${text.id}`].value,\n        }));\n\n        if (!isEqual(currentTexts, nextProps.session.texts)) {\n          TextEntry.setAll(nextProps.session.texts || []);\n        }\n      }\n    } else {\n      this.handleSessionChange();\n    }\n  }\n\n  handleSessionChange = () => {\n    const { onSessionChange, session, TextEntry } = this.props;\n    const { drawables } = this.state;\n\n    const newSession = {\n      drawables: drawables.map((d) => d.toJson()),\n      texts: TextEntry.all.map((text) => ({\n        ...text,\n        ...(TextEntry[`text_${text.id}`] && TextEntry[`text_${text.id}`].attrs),\n        value: TextEntry[`textarea_${text.id}`] && TextEntry[`textarea_${text.id}`].value,\n      })),\n    };\n\n    if (!isEqual(newSession, session)) {\n      onSessionChange({\n        ...session,\n        ...newSession,\n      });\n    }\n  };\n\n  onMouseOverElement = () => this.setState({ isOver: true });\n\n  onMouseOutElement = () => this.setState({ isOver: false });\n\n  handleMouseDown = (e) => {\n    // ONLY IF MOBILE?\n    document.body.style.overflow = 'hidden';\n\n    const { newDrawable, textIsSelected } = this.state;\n    const { toolActive, fillColor, outlineColor, scale } = this.props;\n\n    if (newDrawable.length === 0 && !textIsSelected) {\n      const { x, y } = e.target.getStage().getPointerPosition();\n\n      const newDrawable = factory(toolActive.type, {\n        startx: x / scale,\n        starty: y / scale,\n        fillColor,\n        outlineColor,\n        createdAt: new Date(),\n      });\n\n      this.setState({\n        newDrawable: [newDrawable],\n      });\n    }\n  };\n\n  handleMouseUp = (e) => {\n    // ONLY IF MOBILE?\n    document.body.style.overflow = 'initial';\n\n    const { newDrawable, drawables } = this.state;\n    const { scale } = this.props;\n\n    if (newDrawable.length === 1) {\n      const { x, y } = e.target.getStage().getPointerPosition();\n      const drawableToAdd = newDrawable[0];\n\n      drawableToAdd.registerMovement(x / scale, y / scale);\n      drawables.push(drawableToAdd);\n\n      this.setState(\n        {\n          newDrawable: [],\n          drawables,\n        },\n        this.handleSessionChange.bind(this, drawableToAdd),\n      );\n    }\n  };\n\n  handleMouseMove = (e) => {\n    const { newDrawable } = this.state;\n    const { scale } = this.props;\n\n    if (newDrawable.length === 1) {\n      const { x, y } = e.target.getStage().getPointerPosition();\n      const updatedNewDrawable = newDrawable[0];\n\n      updatedNewDrawable.registerMovement(x / scale, y / scale);\n\n      this.setState({\n        newDrawable: [updatedNewDrawable],\n      });\n    }\n  };\n\n  handleUndo = () => {\n    const { drawables } = this.state;\n    const { TextEntry } = this.props;\n\n    const newDrawables = [...drawables];\n    const allData = [...drawables, ...TextEntry.all];\n\n    allData.sort((a, b) => new Date(a.createdAt) - new Date(b.createdAt));\n    const lastElement = allData[allData.length - 1];\n\n    if (lastElement && lastElement.type === 'text-entry') {\n      TextEntry.all.pop();\n      this.setState({ updatedAt: new Date() }, this.handleSessionChange);\n    } else {\n      newDrawables.pop();\n      this.setState({ drawables: newDrawables }, this.handleSessionChange);\n    }\n  };\n\n  handleClearAll = () => {\n    const { TextEntry } = this.props;\n\n    TextEntry.all = [];\n    this.setState({ drawables: [], updatedAt: new Date() }, this.handleSessionChange);\n  };\n\n  toggleTextSelected = (textIsSelected) => this.setState({ textIsSelected });\n\n  render() {\n    const {\n      classes,\n      disabled,\n      drawableDimensions,\n      fillColor,\n      imageDimensions,\n      imageUrl,\n      paintColor,\n      outlineColor,\n      TextEntry,\n      backgroundImageEnabled = true,\n      toolActive: { type },\n      scale,\n    } = this.props;\n    const { isOver, newDrawable } = this.state;\n\n    const draggable = type === 'Select';\n    const paint = type === 'PaintBucket';\n    const drawables = [...this.state.drawables, ...this.state.newDrawable];\n\n    const drawableProps = {\n      draggable: draggable && !disabled,\n      disabled,\n      paint,\n      fillColor,\n      forceUpdate: () => this.setState({ updatedAt: new Date() }),\n      paintColor,\n      outlineColor,\n      toggleTextSelected: this.toggleTextSelected,\n      handleSessionChange: this.handleSessionChange,\n      stage: this.stage,\n      onMouseOverElement: this.onMouseOverElement,\n      onMouseOutElement: this.onMouseOutElement,\n      scale,\n    };\n\n    let listeners = {};\n\n    if (!disabled) {\n      listeners = {\n        onMouseUp: this.handleMouseUp,\n        onTouchEnd: this.handleMouseUp,\n        onMouseMove: this.handleMouseMove,\n        onTouchMove: this.handleMouseMove,\n      };\n\n      if (!draggable) {\n        listeners.onMouseDown = this.handleMouseDown;\n        listeners.onTouchStart = this.handleMouseDown;\n      }\n    }\n\n    const imageHeight = imageDimensions?.height * scale;\n    const imageWidth = imageDimensions?.width * scale;\n\n    return (\n      <div className={classes.wrapper}>\n        <div className={classes.undoControls}>\n          <Button disabled={disabled} onClick={this.handleUndo} label=\"Undo\" />\n          <Button disabled={disabled} onClick={this.handleClearAll} label=\"Clear all\" />\n        </div>\n        <div className={classes.base}>\n          {backgroundImageEnabled && imageUrl && (\n            <ImageBackground dimensions={{ height: imageHeight, width: imageWidth }} url={imageUrl} />\n          )}\n\n          {TextEntry.renderTextareas()}\n\n          <Stage\n            scaleX={scale}\n            scaleY={scale}\n            ref={(ref) => {\n              this.stage = ref;\n            }}\n            className={classnames(classes.stage, {\n              [classes.active]: draggable && (isOver || (newDrawable && newDrawable.length === 1)),\n            })}\n            height={drawableDimensions.height}\n            width={drawableDimensions.width}\n            {...listeners}\n          >\n            <Layer\n              ref={(ref) => {\n                this.layer = ref;\n              }}\n            >\n              {drawables.map((drawable, key) => drawable.render({ ...drawableProps, key }))}\n              {/* Text Entry is a special case  */}\n              {TextEntry.render(drawableProps)}\n            </Layer>\n          </Stage>\n        </div>\n      </div>\n    );\n  }\n}\n\nconst styles = () => ({\n  wrapper: {\n    display: 'flex',\n    flexWrap: 'wrap',\n    justifyContent: 'flex-end',\n  },\n  base: {\n    position: 'relative',\n    width: '100%',\n  },\n  stage: {\n    left: 0,\n    position: 'absolute',\n    touchAction: 'none',\n    top: 0,\n  },\n  active: {\n    cursor: 'pointer',\n  },\n  undoControls: {\n    marginTop: -43,\n    width: 172,\n  },\n});\n\nDrawableMain.propTypes = {\n  classes: PropTypes.object.isRequired,\n  disabled: PropTypes.bool,\n  drawableDimensions: PropTypes.object.isRequired,\n  imageDimensions: PropTypes.object.isRequired,\n  fillColor: PropTypes.string.isRequired,\n  onSessionChange: PropTypes.func.isRequired,\n  paintColor: PropTypes.string.isRequired,\n  outlineColor: PropTypes.string.isRequired,\n  imageUrl: PropTypes.string.isRequired,\n  TextEntry: PropTypes.object.isRequired,\n  toolActive: PropTypes.object.isRequired,\n  session: PropTypes.object.isRequired,\n  backgroundImageEnabled: PropTypes.bool.isRequired,\n  scale: PropTypes.number.isRequired,\n};\n\nexport default withStyles(styles)(DrawableMain);\n"],"file":"drawable-main.js"}

package/lib/drawing-response/index.js

@@ -21,8 +21,6 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
-
 var _renderUi = require("@pie-lib/render-ui");
 
 var _styles = require("@material-ui/core/styles");
@@ -70,19 +68,18 @@ var DrawingResponseComponent = /*#__PURE__*/function (_React$Component) {
           hasError = _this$state.hasError,
           errorMessage = _this$state.errorMessage;
       var isEvaluateMode = mode === 'evaluate';
-      return hasError ? /*#__PURE__*/_react["default"].createElement("div", null, "An error occured: ", errorMessage) : /*#__PURE__*/_react["default"].createElement("div", null, teacherInstructions && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_renderUi.Collapsible, {
+      return hasError ? /*#__PURE__*/_react["default"].createElement("div", null, "An error occured: ", errorMessage) : /*#__PURE__*/_react["default"].createElement("div", null, teacherInstructions && /*#__PURE__*/_react["default"].createElement(_renderUi.Collapsible, {
+        className: classes.collapsible,
         labels: {
           hidden: 'Show Teacher Instructions',
           visible: 'Hide Teacher Instructions'
         }
       }, /*#__PURE__*/_react["default"].createElement(_renderUi.PreviewPrompt, {
         prompt: teacherInstructions
-      })), /*#__PURE__*/_react["default"].createElement("br", null)), /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
-        className: classes.prompt
-      }, /*#__PURE__*/_react["default"].createElement(_renderUi.PreviewPrompt, {
+      })), prompt && /*#__PURE__*/_react["default"].createElement(_renderUi.PreviewPrompt, {
         tagName: "span",
         prompt: prompt
-      })), /*#__PURE__*/_react["default"].createElement(_container["default"], {
+      }), /*#__PURE__*/_react["default"].createElement(_container["default"], {
         session: session,
         onSessionChange: onSessionChange,
         isEvaluateMode: isEvaluateMode,
@@ -111,10 +108,10 @@ DrawingResponseComponent.propTypes = {
   session: _propTypes["default"].object.isRequired
 };
 
-var styles = function styles() {
+var styles = function styles(theme) {
   return {
-    prompt: {
-      fontSize: 'inherit'
+    collapsible: {
+      marginBottom: theme.spacing.unit * 2
     }
   };
 };

package/lib/drawing-response/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/drawing-response/index.jsx"],"names":["DrawingResponseComponent","props","state","showCorrect","hasError","model","disabled","imageDimensions","imageUrl","prompt","mode","teacherInstructions","backgroundImageEnabled","session","onSessionChange","classes","errorMessage","isEvaluateMode","hidden","visible","error","message","React","Component","propTypes","PropTypes","object","isRequired","func","styles","fontSize"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAEA;;;;;;IAEMA,wB;;;;;AACJ,oCAAYC,KAAZ,EAAmB;AAAA;;AAAA;AACjB,8BAAMA,KAAN;AACA,UAAKC,KAAL,GAAa;AACXC,MAAAA,WAAW,EAAE,KADF;AAEXC,MAAAA,QAAQ,EAAE;AAFC,KAAb;AAFiB;AAMlB;;;;WAMD,kBAAS;AACP,wBAKI,KAAKH,KALT;AAAA,0CACEI,KADF;AAAA,UACWC,QADX,qBACWA,QADX;AAAA,UACqBC,eADrB,qBACqBA,eADrB;AAAA,UACsCC,QADtC,qBACsCA,QADtC;AAAA,UACgDC,MADhD,qBACgDA,MADhD;AAAA,UACwDC,IADxD,qBACwDA,IADxD;AAAA,UAC8DC,mBAD9D,qBAC8DA,mBAD9D;AAAA,oDACmFC,sBADnF;AAAA,UACmFA,sBADnF,sCAC4G,IAD5G;AAAA,UAEEC,OAFF,eAEEA,OAFF;AAAA,UAGEC,eAHF,eAGEA,eAHF;AAAA,UAIEC,OAJF,eAIEA,OAJF;AAMA,wBAAmC,KAAKb,KAAxC;AAAA,UAAQE,QAAR,eAAQA,QAAR;AAAA,UAAkBY,YAAlB,eAAkBA,YAAlB;AACA,UAAMC,cAAc,GAAGP,IAAI,KAAK,UAAhC;AAEA,aAAON,QAAQ,gBACb,mEAAwBY,YAAxB,CADa,gBAGb,6CACGL,mBAAmB,iBAClB,gCAAC,iBAAD,CAAO,QAAP,qBACE,gCAAC,qBAAD;AACE,QAAA,MAAM,EAAE;AACNO,UAAAA,MAAM,EAAE,2BADF;AAENC,UAAAA,OAAO,EAAE;AAFH;AADV,sBAME,gCAAC,uBAAD;AAAe,QAAA,MAAM,EAAER;AAAvB,QANF,CADF,eASE,2CATF,CAFJ,eAeE,gCAAC,sBAAD;AAAY,QAAA,SAAS,EAAEI,OAAO,CAACN;AAA/B,sBACE,gCAAC,uBAAD;AAAe,QAAA,OAAO,EAAC,MAAvB;AAA8B,QAAA,MAAM,EAAEA;AAAtC,QADF,CAfF,eAmBE,gCAAC,qBAAD;AACE,QAAA,OAAO,EAAEI,OADX;AAEE,QAAA,eAAe,EAAEC,eAFnB;AAGE,QAAA,cAAc,EAAEG,cAHlB;AAIE,QAAA,eAAe,EAAEV,eAJnB;AAKE,QAAA,QAAQ,EAAEC,QALZ;AAME,QAAA,sBAAsB,EAAEI,sBAN1B;AAOE,QAAA,QAAQ,EAAEN;AAPZ,QAnBF,CAHF;AAiCD;;;WA/CD,kCAAgCc,KAAhC,EAAuC;AACrC,aAAO;AAAEhB,QAAAA,QAAQ,EAAE,IAAZ;AAAkBY,QAAAA,YAAY,EAAEI,KAAK,CAACC;AAAtC,OAAP;AACD;;;EAXoCC,kBAAMC,S;;AA2D7CvB,wBAAwB,CAACwB,SAAzB,GAAqC;AACnCT,EAAAA,OAAO,EAAEU,sBAAUC,MADgB;AAEnCrB,EAAAA,KAAK,EAAEoB,sBAAUC,MAAV,CAAiBC,UAFW;AAGnCb,EAAAA,eAAe,EAAEW,sBAAUG,IAAV,CAAeD,UAHG;AAInCd,EAAAA,OAAO,EAAEY,sBAAUC,MAAV,CAAiBC;AAJS,CAArC;;AAOA,IAAME,MAAM,GAAG,SAATA,MAAS;AAAA,SAAO;AACpBpB,IAAAA,MAAM,EAAE;AACNqB,MAAAA,QAAQ,EAAE;AADJ;AADY,GAAP;AAAA,CAAf;;eAMe,wBAAWD,MAAX,EAAmB7B,wBAAnB,C","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport Typography from '@material-ui/core/Typography';\nimport { Collapsible, PreviewPrompt } from '@pie-lib/render-ui';\nimport { withStyles } from '@material-ui/core/styles';\n\nimport Container from './container';\n\nclass DrawingResponseComponent extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      showCorrect: false,\n      hasError: false,\n    };\n  }\n\n  static getDerivedStateFromError(error) {\n    return { hasError: true, errorMessage: error.message };\n  }\n\n  render() {\n    const {\n      model: { disabled, imageDimensions, imageUrl, prompt, mode, teacherInstructions, backgroundImageEnabled = true },\n      session,\n      onSessionChange,\n      classes,\n    } = this.props;\n    const { hasError, errorMessage } = this.state;\n    const isEvaluateMode = mode === 'evaluate';\n\n    return hasError ? (\n      <div>An error occured: {errorMessage}</div>\n    ) : (\n      <div>\n        {teacherInstructions && (\n          <React.Fragment>\n            <Collapsible\n              labels={{\n                hidden: 'Show Teacher Instructions',\n                visible: 'Hide Teacher Instructions',\n              }}\n            >\n              <PreviewPrompt prompt={teacherInstructions} />\n            </Collapsible>\n            <br />\n          </React.Fragment>\n        )}\n\n        <Typography className={classes.prompt}>\n          <PreviewPrompt tagName=\"span\" prompt={prompt} />\n        </Typography>\n\n        <Container\n          session={session}\n          onSessionChange={onSessionChange}\n          isEvaluateMode={isEvaluateMode}\n          imageDimensions={imageDimensions}\n          imageUrl={imageUrl}\n          backgroundImageEnabled={backgroundImageEnabled}\n          disabled={disabled}\n        />\n      </div>\n    );\n  }\n}\n\nDrawingResponseComponent.propTypes = {\n  classes: PropTypes.object,\n  model: PropTypes.object.isRequired,\n  onSessionChange: PropTypes.func.isRequired,\n  session: PropTypes.object.isRequired,\n};\n\nconst styles = () => ({\n  prompt: {\n    fontSize: 'inherit',\n  },\n});\n\nexport default withStyles(styles)(DrawingResponseComponent);\n"],"file":"index.js"}
+{"version":3,"sources":["../../src/drawing-response/index.jsx"],"names":["DrawingResponseComponent","props","state","showCorrect","hasError","model","disabled","imageDimensions","imageUrl","prompt","mode","teacherInstructions","backgroundImageEnabled","session","onSessionChange","classes","errorMessage","isEvaluateMode","collapsible","hidden","visible","error","message","React","Component","propTypes","PropTypes","object","isRequired","func","styles","theme","marginBottom","spacing","unit"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AAEA;;;;;;IAEMA,wB;;;;;AACJ,oCAAYC,KAAZ,EAAmB;AAAA;;AAAA;AACjB,8BAAMA,KAAN;AACA,UAAKC,KAAL,GAAa;AACXC,MAAAA,WAAW,EAAE,KADF;AAEXC,MAAAA,QAAQ,EAAE;AAFC,KAAb;AAFiB;AAMlB;;;;WAMD,kBAAS;AACP,wBAKI,KAAKH,KALT;AAAA,0CACEI,KADF;AAAA,UACWC,QADX,qBACWA,QADX;AAAA,UACqBC,eADrB,qBACqBA,eADrB;AAAA,UACsCC,QADtC,qBACsCA,QADtC;AAAA,UACgDC,MADhD,qBACgDA,MADhD;AAAA,UACwDC,IADxD,qBACwDA,IADxD;AAAA,UAC8DC,mBAD9D,qBAC8DA,mBAD9D;AAAA,oDACmFC,sBADnF;AAAA,UACmFA,sBADnF,sCAC4G,IAD5G;AAAA,UAEEC,OAFF,eAEEA,OAFF;AAAA,UAGEC,eAHF,eAGEA,eAHF;AAAA,UAIEC,OAJF,eAIEA,OAJF;AAMA,wBAAmC,KAAKb,KAAxC;AAAA,UAAQE,QAAR,eAAQA,QAAR;AAAA,UAAkBY,YAAlB,eAAkBA,YAAlB;AACA,UAAMC,cAAc,GAAGP,IAAI,KAAK,UAAhC;AAEA,aAAON,QAAQ,gBACb,mEAAwBY,YAAxB,CADa,gBAGb,6CACGL,mBAAmB,iBAClB,gCAAC,qBAAD;AACE,QAAA,SAAS,EAAEI,OAAO,CAACG,WADrB;AAEE,QAAA,MAAM,EAAE;AACNC,UAAAA,MAAM,EAAE,2BADF;AAENC,UAAAA,OAAO,EAAE;AAFH;AAFV,sBAOE,gCAAC,uBAAD;AAAe,QAAA,MAAM,EAAET;AAAvB,QAPF,CAFJ,EAaGF,MAAM,iBAAI,gCAAC,uBAAD;AAAe,QAAA,OAAO,EAAC,MAAvB;AAA8B,QAAA,MAAM,EAAEA;AAAtC,QAbb,eAeE,gCAAC,qBAAD;AACE,QAAA,OAAO,EAAEI,OADX;AAEE,QAAA,eAAe,EAAEC,eAFnB;AAGE,QAAA,cAAc,EAAEG,cAHlB;AAIE,QAAA,eAAe,EAAEV,eAJnB;AAKE,QAAA,QAAQ,EAAEC,QALZ;AAME,QAAA,sBAAsB,EAAEI,sBAN1B;AAOE,QAAA,QAAQ,EAAEN;AAPZ,QAfF,CAHF;AA6BD;;;WA3CD,kCAAgCe,KAAhC,EAAuC;AACrC,aAAO;AAAEjB,QAAAA,QAAQ,EAAE,IAAZ;AAAkBY,QAAAA,YAAY,EAAEK,KAAK,CAACC;AAAtC,OAAP;AACD;;;EAXoCC,kBAAMC,S;;AAuD7CxB,wBAAwB,CAACyB,SAAzB,GAAqC;AACnCV,EAAAA,OAAO,EAAEW,sBAAUC,MADgB;AAEnCtB,EAAAA,KAAK,EAAEqB,sBAAUC,MAAV,CAAiBC,UAFW;AAGnCd,EAAAA,eAAe,EAAEY,sBAAUG,IAAV,CAAeD,UAHG;AAInCf,EAAAA,OAAO,EAAEa,sBAAUC,MAAV,CAAiBC;AAJS,CAArC;;AAOA,IAAME,MAAM,GAAG,SAATA,MAAS,CAACC,KAAD;AAAA,SAAY;AACzBb,IAAAA,WAAW,EAAE;AACXc,MAAAA,YAAY,EAAED,KAAK,CAACE,OAAN,CAAcC,IAAd,GAAqB;AADxB;AADY,GAAZ;AAAA,CAAf;;eAMe,wBAAWJ,MAAX,EAAmB9B,wBAAnB,C","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Collapsible, PreviewPrompt } from '@pie-lib/render-ui';\nimport { withStyles } from '@material-ui/core/styles';\n\nimport Container from './container';\n\nclass DrawingResponseComponent extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      showCorrect: false,\n      hasError: false,\n    };\n  }\n\n  static getDerivedStateFromError(error) {\n    return { hasError: true, errorMessage: error.message };\n  }\n\n  render() {\n    const {\n      model: { disabled, imageDimensions, imageUrl, prompt, mode, teacherInstructions, backgroundImageEnabled = true },\n      session,\n      onSessionChange,\n      classes,\n    } = this.props;\n    const { hasError, errorMessage } = this.state;\n    const isEvaluateMode = mode === 'evaluate';\n\n    return hasError ? (\n      <div>An error occured: {errorMessage}</div>\n    ) : (\n      <div>\n        {teacherInstructions && (\n          <Collapsible\n            className={classes.collapsible}\n            labels={{\n              hidden: 'Show Teacher Instructions',\n              visible: 'Hide Teacher Instructions',\n            }}\n          >\n            <PreviewPrompt prompt={teacherInstructions} />\n          </Collapsible>\n        )}\n\n        {prompt && <PreviewPrompt tagName=\"span\" prompt={prompt} />}\n\n        <Container\n          session={session}\n          onSessionChange={onSessionChange}\n          isEvaluateMode={isEvaluateMode}\n          imageDimensions={imageDimensions}\n          imageUrl={imageUrl}\n          backgroundImageEnabled={backgroundImageEnabled}\n          disabled={disabled}\n        />\n      </div>\n    );\n  }\n}\n\nDrawingResponseComponent.propTypes = {\n  classes: PropTypes.object,\n  model: PropTypes.object.isRequired,\n  onSessionChange: PropTypes.func.isRequired,\n  session: PropTypes.object.isRequired,\n};\n\nconst styles = (theme) => ({\n  collapsible: {\n    marginBottom: theme.spacing.unit * 2,\n  },\n});\n\nexport default withStyles(styles)(DrawingResponseComponent);\n"],"file":"index.js"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-element/drawing-response",
-  "version": "6.0.1-next.6+4ca537ac1",
+  "version": "6.0.1-next.73+157e5bf9b",
   "description": "",
   "repository": "pie-framework/pie-elements",
   "publishConfig": {
@@ -24,7 +24,7 @@
   },
   "author": "pie framework developers",
   "license": "ISC",
-  "gitHead": "4ca537ac12de0992b5eebc156c93b6b425de4448",
+  "gitHead": "157e5bf9b8e05cc8e64a1eaa4888f74fb1ab1e92",
   "scripts": {
     "postpublish": "../../scripts/postpublish"
   },