@pie-element/drawing-response 3.9.13 → 3.9.16

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/drawing-response/drawable-text.jsx"],"names":["generateId","Math","random","toString","substring","Date","getTime","TextDrawable","props","eventListenersDetachArray","forEach","fn","all","forceUpdate","id","push","isDefault","label","width","x","length","y","textVisible","transformerVisible","textareaVisible","createdAt","type","handleSessionChange","toggleTextSelected","e","current","filter","item","text","toggleTextarea","textNode","getTextNode","textareaNode","getTextareaNode","areaPosition","_lastPos","value","style","position","top","left","padding","height","fontSize","border","margin","overflow","background","outline","resize","lineHeight","fontFamily","transformOrigin","textAlign","align","color","fill","rotation","transform","px","isFirefox","navigator","userAgent","toLowerCase","indexOf","round","scrollHeight","focus","keyDownHandler","keyCode","shiftKey","saveValue","addEventListener","removeEventListener","blurHandler","showOnlyTextNodes","initializeDefault","setAttrs","scaleX","map","textarea","display","setInitialProps","stage","newStage","stageClickHandler","target","on","off","transformerNode","extraProps","disabled","onClick","handleClick","onDblClick","handleDblClick","onTransform","handleTransform","onTransformEnd","onMouseDown","handleMouseDown","onMouseUp","handleMouseUp","onDragEnd","onMouseEnter","onMouseOverElement","onMouseLeave","onMouseOutElement"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Text } from 'react-konva';\n\nimport Transformer from './drawable-transformer';\n\nexport const generateId = () =>\n  Math.random()\n    .toString(36)\n    .substring(2) + new Date().getTime().toString(36);\n\nexport default class TextDrawable {\n  static getTextareaNode(id) {\n    return `textarea_${id}`;\n  }\n\n  static getTextNode(id) {\n    return `text_${id}`;\n  }\n\n  static getTransformerNode(id) {\n    return `transformer_${id}`;\n  }\n\n  constructor(props) {\n    this.all = (props && props.all) || [];\n    this.eventListenersDetachArray = [];\n  }\n\n  removeEventListeners = () =>\n    this.eventListenersDetachArray.forEach(fn => fn());\n\n  setAll = all => {\n    this.all = all;\n    this.props.forceUpdate();\n  };\n\n  addNewTextEntry = () => {\n    const all = this.all;\n    const id = generateId();\n\n    all.push({\n      id: id,\n      isDefault: true,\n      label: 'Double click to edit this text. Press Enter to submit.',\n      width: 200,\n      x: (all.length + 1) * 5 + 50,\n      y: (all.length + 1) * 5 + 50,\n      textVisible: true,\n      transformerVisible: true,\n      textareaVisible: false,\n      createdAt: new Date(),\n      type: 'text-entry'\n    });\n\n    this.props.handleSessionChange();\n  };\n\n  showOnlyTextNodes() {\n    this.all.map(item => {\n      item.textVisible = true;\n      item.transformerVisible = false;\n      item.textareaVisible = false;\n    });\n  }\n\n  toggleTextarea(id, value) {\n    this.all = this.all.map(item => {\n      if (item.id === id) {\n        return {\n          ...item,\n          textVisible: !value,\n          transformerVisible: !value,\n          textareaVisible: value\n        };\n      }\n      return item;\n    });\n    this.props.forceUpdate();\n  }\n\n  initializeDefault(id, isDefault) {\n    if (isDefault) {\n      const current = this.all.filter(item => item.id === id)[0];\n      current.isDefault = false;\n    }\n  }\n\n  saveValue(id, textNode, textareaNode) {\n    if (textareaNode.value) {\n      textNode.text(textareaNode.value);\n    } else {\n      this.all = this.all.filter(text => text.id !== id);\n      this.props.forceUpdate();\n    }\n\n    this.props.handleSessionChange();\n  }\n\n  handleMouseDown = () => this.props.toggleTextSelected(true);\n  handleMouseUp = () => this.props.toggleTextSelected(false);\n\n  handleClick = (e, id) => {\n    const current = this.all.filter(item => item.id === id)[0];\n    current.transformerVisible = true;\n    this.props.forceUpdate();\n  };\n\n  handleDblClick = (e, text) => {\n    const { id, isDefault } = text;\n    this.toggleTextarea(id, true);\n\n    const textNode = this[TextDrawable.getTextNode(id)];\n    const textareaNode = this[TextDrawable.getTextareaNode(id)];\n\n    const areaPosition = textNode._lastPos;\n\n    textareaNode.value = isDefault ? '' : textNode.text();\n    textareaNode.style.position = 'absolute';\n    textareaNode.style.top = areaPosition.y + 'px';\n    textareaNode.style.left = areaPosition.x + 'px';\n    textareaNode.style.width = textNode.width() - textNode.padding() * 2 + 'px';\n    textareaNode.style.height =\n      textNode.height() - textNode.padding() * 2 + 5 + 'px';\n    textareaNode.style.fontSize = textNode.fontSize() + 'px';\n    textareaNode.style.border = 'none';\n    textareaNode.style.padding = '0px';\n    textareaNode.style.margin = '0px';\n    textareaNode.style.overflow = 'hidden';\n    textareaNode.style.background = 'none';\n    textareaNode.style.outline = 'none';\n    textareaNode.style.resize = 'none';\n    textareaNode.style.lineHeight = textNode.lineHeight();\n    textareaNode.style.fontFamily = textNode.fontFamily();\n    textareaNode.style.transformOrigin = 'left top';\n    textareaNode.style.textAlign = textNode.align();\n    textareaNode.style.color = textNode.fill();\n\n    let rotation = textNode.rotation();\n    let transform = '';\n    if (rotation) {\n      transform += 'rotateZ(' + rotation + 'deg)';\n    }\n\n    let px = 0;\n    const isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;\n\n    if (isFirefox) {\n      px += 2 + Math.round(textNode.fontSize() / 20);\n    }\n\n    transform += 'translateY(-' + px + 'px)';\n\n    textareaNode.style.transform = transform;\n    textareaNode.style.height = 'auto';\n    textareaNode.style.height = textareaNode.scrollHeight + 3 + 'px';\n\n    textareaNode.focus();\n\n    const keyDownHandler = e => {\n      // hide on enter but don't hide on shift + enter\n      if (e.keyCode === 13 && !e.shiftKey) {\n        this.toggleTextarea(id, false);\n        this.saveValue(id, textNode, textareaNode);\n      }\n\n      // on esc do not set value back to node\n      if (e.keyCode === 27) {\n        this.toggleTextarea(id, false);\n      }\n    };\n\n    textareaNode.addEventListener('keydown', keyDownHandler);\n\n    this.eventListenersDetachArray.push(() =>\n      textareaNode.removeEventListener('keydown', keyDownHandler)\n    );\n\n    const blurHandler = () => {\n      this.showOnlyTextNodes();\n      this.saveValue(id, textNode, textareaNode);\n    };\n\n    textareaNode.addEventListener('blur', blurHandler);\n\n    this.eventListenersDetachArray.push(() =>\n      textareaNode.removeEventListener('blur', blurHandler)\n    );\n\n    this.initializeDefault(id, isDefault);\n    this.props.forceUpdate();\n  };\n\n  handleTransform = (e, textNode) => {\n    this[textNode].setAttrs({\n      width: this[textNode].width() * this[textNode].scaleX(),\n      scaleX: 1\n    });\n  };\n\n  renderTextareas() {\n    return this.all.map(text => {\n      const { id, textareaVisible } = text;\n      const textareaNode = `textarea_${id}`;\n\n      return (\n        <textarea\n          key={textareaNode}\n          ref={textarea => {\n            this[textareaNode] = textarea;\n          }}\n          style={{ display: `${textareaVisible ? 'block' : 'none'}` }}\n        />\n      );\n    });\n  }\n\n  setInitialProps(props) {\n    if (!this.props) {\n      this.props = props;\n    }\n  }\n\n  render(props) {\n    this.setInitialProps(props);\n\n    if (props.stage) {\n      const newStage = props.stage;\n\n      // setting the handler only once\n      if (newStage !== this.stage) {\n        const stageClickHandler = e => {\n          if (e.target !== this.stage) {\n            return;\n          }\n\n          this.showOnlyTextNodes();\n          this.props.forceUpdate();\n        };\n\n        newStage.on('click', stageClickHandler);\n\n        this.eventListenersDetachArray.push(() =>\n          newStage.off('click', stageClickHandler)\n        );\n      }\n\n      this.stage = newStage;\n    }\n\n    return this.all.map(text => {\n      const {\n        id,\n        label,\n        x,\n        y,\n        width,\n        textVisible,\n        rotation,\n        transformerVisible\n      } = text;\n\n      const textNode = `text_${id}`;\n      const transformerNode = `transformer_${id}`;\n      let extraProps = {};\n\n      if (!props.disabled) {\n        extraProps = {\n          onClick: e => this.handleClick(e, id),\n          onDblClick: e => this.handleDblClick(e, text),\n          onTransform: e => this.handleTransform(e, textNode),\n          onTransformEnd: this.props.handleSessionChange,\n          onMouseDown: this.handleMouseDown,\n          onMouseUp: this.handleMouseUp,\n          onDragEnd: this.props.handleSessionChange,\n          onMouseEnter: this.props.onMouseOverElement,\n          onMouseLeave: this.props.onMouseOutElement,\n        }\n      }\n\n      if (rotation) {\n        extraProps.rotation = rotation;\n      }\n\n      return [\n        <Text\n          key={id}\n          bubbles={true}\n          id={id}\n          ref={text => {\n            this[textNode] = text;\n          }}\n          text={text.text || label}\n          name={textNode}\n          x={x}\n          y={y}\n          width={width}\n          draggable={!props.disabled}\n          visible={textVisible}\n          fontSize={16}\n          {...extraProps}\n        />,\n        transformerVisible && (\n          <Transformer\n            key={`transformer_${id}`}\n            ref={text => {\n              this[transformerNode] = text;\n            }}\n            selectedShapeName={textNode}\n            onMouseDown={this.handleMouseDown}\n            onMouseUp={this.handleMouseUp}\n          />\n        )\n      ];\n    });\n  }\n}\n"],"file":"drawable-text.js"}
+{"version":3,"sources":["../../src/drawing-response/drawable-text.jsx"],"names":["generateId","Math","random","toString","substring","Date","getTime","TextDrawable","props","eventListenersDetachArray","forEach","fn","all","forceUpdate","id","push","isDefault","label","width","x","length","y","textVisible","transformerVisible","textareaVisible","createdAt","type","handleSessionChange","toggleTextSelected","e","current","filter","item","text","toggleTextarea","textNode","getTextNode","textareaNode","getTextareaNode","areaPosition","_lastPos","value","style","position","top","left","padding","height","fontSize","border","margin","overflow","background","outline","resize","lineHeight","fontFamily","transformOrigin","textAlign","align","color","fill","rotation","transform","px","isFirefox","navigator","userAgent","toLowerCase","indexOf","round","scrollHeight","focus","keyDownHandler","keyCode","shiftKey","saveValue","addEventListener","removeEventListener","blurHandler","showOnlyTextNodes","initializeDefault","setAttrs","scaleX","scale","map","textarea","display","setInitialProps","stage","newStage","stageClickHandler","target","on","off","transformerNode","extraProps","disabled","onClick","handleClick","onDblClick","handleDblClick","onTransform","handleTransform","onTransformEnd","onMouseDown","handleMouseDown","onMouseUp","handleMouseUp","onDragEnd","onMouseEnter","onMouseOverElement","onMouseLeave","onMouseOutElement"],"mappings":";;;;;;;;;;;;;;;;;AAAA;;AACA;;AAEA;;;;;;AAEO,IAAMA,UAAU,GAAG,SAAbA,UAAa;AAAA,SACxBC,IAAI,CAACC,MAAL,GACGC,QADH,CACY,EADZ,EAEGC,SAFH,CAEa,CAFb,IAEkB,IAAIC,IAAJ,GAAWC,OAAX,GAAqBH,QAArB,CAA8B,EAA9B,CAHM;AAAA,CAAnB;;;;IAKcI,Y;AAanB,wBAAYC,KAAZ,EAAmB;AAAA;;AAAA;AAAA,mEAKI;AAAA,aACrB,KAAI,CAACC,yBAAL,CAA+BC,OAA/B,CAAuC,UAAAC,EAAE;AAAA,eAAIA,EAAE,EAAN;AAAA,OAAzC,CADqB;AAAA,KALJ;AAAA,qDAQV,UAAAC,GAAG,EAAI;AACd,MAAA,KAAI,CAACA,GAAL,GAAWA,GAAX;;AACA,MAAA,KAAI,CAACJ,KAAL,CAAWK,WAAX;AACD,KAXkB;AAAA,8DAaD,YAAM;AACtB,UAAMD,GAAG,GAAG,KAAI,CAACA,GAAjB;AACA,UAAME,EAAE,GAAGd,UAAU,EAArB;AAEAY,MAAAA,GAAG,CAACG,IAAJ,CAAS;AACPD,QAAAA,EAAE,EAAEA,EADG;AAEPE,QAAAA,SAAS,EAAE,IAFJ;AAGPC,QAAAA,KAAK,EAAE,wDAHA;AAIPC,QAAAA,KAAK,EAAE,GAJA;AAKPC,QAAAA,CAAC,EAAE,CAACP,GAAG,CAACQ,MAAJ,GAAa,CAAd,IAAmB,CAAnB,GAAuB,EALnB;AAMPC,QAAAA,CAAC,EAAE,CAACT,GAAG,CAACQ,MAAJ,GAAa,CAAd,IAAmB,CAAnB,GAAuB,EANnB;AAOPE,QAAAA,WAAW,EAAE,IAPN;AAQPC,QAAAA,kBAAkB,EAAE,IARb;AASPC,QAAAA,eAAe,EAAE,KATV;AAUPC,QAAAA,SAAS,EAAE,IAAIpB,IAAJ,EAVJ;AAWPqB,QAAAA,IAAI,EAAE;AAXC,OAAT;;AAcA,MAAA,KAAI,CAAClB,KAAL,CAAWmB,mBAAX;AACD,KAhCkB;AAAA,8DA2ED;AAAA,aAAM,KAAI,CAACnB,KAAL,CAAWoB,kBAAX,CAA8B,IAA9B,CAAN;AAAA,KA3EC;AAAA,4DA4EH;AAAA,aAAM,KAAI,CAACpB,KAAL,CAAWoB,kBAAX,CAA8B,KAA9B,CAAN;AAAA,KA5EG;AAAA,0DA8EL,UAACC,CAAD,EAAIf,EAAJ,EAAW;AACvB,UAAMgB,OAAO,GAAG,KAAI,CAAClB,GAAL,CAASmB,MAAT,CAAgB,UAAAC,IAAI;AAAA,eAAIA,IAAI,CAAClB,EAAL,KAAYA,EAAhB;AAAA,OAApB,EAAwC,CAAxC,CAAhB;;AACAgB,MAAAA,OAAO,CAACP,kBAAR,GAA6B,IAA7B;;AACA,MAAA,KAAI,CAACf,KAAL,CAAWK,WAAX;AACD,KAlFkB;AAAA,6DAoFF,UAACgB,CAAD,EAAII,IAAJ,EAAa;AAC5B,UAAQnB,EAAR,GAA0BmB,IAA1B,CAAQnB,EAAR;AAAA,UAAYE,SAAZ,GAA0BiB,IAA1B,CAAYjB,SAAZ;;AACA,MAAA,KAAI,CAACkB,cAAL,CAAoBpB,EAApB,EAAwB,IAAxB;;AAEA,UAAMqB,QAAQ,GAAG,KAAI,CAAC5B,YAAY,CAAC6B,WAAb,CAAyBtB,EAAzB,CAAD,CAArB;;AACA,UAAMuB,YAAY,GAAG,KAAI,CAAC9B,YAAY,CAAC+B,eAAb,CAA6BxB,EAA7B,CAAD,CAAzB;;AAEA,UAAMyB,YAAY,GAAGJ,QAAQ,CAACK,QAA9B;AAEAH,MAAAA,YAAY,CAACI,KAAb,GAAqBzB,SAAS,GAAG,EAAH,GAAQmB,QAAQ,CAACF,IAAT,EAAtC;AACAI,MAAAA,YAAY,CAACK,KAAb,CAAmBC,QAAnB,GAA8B,UAA9B;AACAN,MAAAA,YAAY,CAACK,KAAb,CAAmBE,GAAnB,GAAyBL,YAAY,CAAClB,CAAb,GAAiB,IAA1C;AACAgB,MAAAA,YAAY,CAACK,KAAb,CAAmBG,IAAnB,GAA0BN,YAAY,CAACpB,CAAb,GAAiB,IAA3C;AACAkB,MAAAA,YAAY,CAACK,KAAb,CAAmBxB,KAAnB,GAA2BiB,QAAQ,CAACjB,KAAT,KAAmBiB,QAAQ,CAACW,OAAT,KAAqB,CAAxC,GAA4C,IAAvE;AACAT,MAAAA,YAAY,CAACK,KAAb,CAAmBK,MAAnB,GACEZ,QAAQ,CAACY,MAAT,KAAoBZ,QAAQ,CAACW,OAAT,KAAqB,CAAzC,GAA6C,CAA7C,GAAiD,IADnD;AAEAT,MAAAA,YAAY,CAACK,KAAb,CAAmBM,QAAnB,GAA8Bb,QAAQ,CAACa,QAAT,KAAsB,IAApD;AACAX,MAAAA,YAAY,CAACK,KAAb,CAAmBO,MAAnB,GAA4B,MAA5B;AACAZ,MAAAA,YAAY,CAACK,KAAb,CAAmBI,OAAnB,GAA6B,KAA7B;AACAT,MAAAA,YAAY,CAACK,KAAb,CAAmBQ,MAAnB,GAA4B,KAA5B;AACAb,MAAAA,YAAY,CAACK,KAAb,CAAmBS,QAAnB,GAA8B,QAA9B;AACAd,MAAAA,YAAY,CAACK,KAAb,CAAmBU,UAAnB,GAAgC,MAAhC;AACAf,MAAAA,YAAY,CAACK,KAAb,CAAmBW,OAAnB,GAA6B,MAA7B;AACAhB,MAAAA,YAAY,CAACK,KAAb,CAAmBY,MAAnB,GAA4B,MAA5B;AACAjB,MAAAA,YAAY,CAACK,KAAb,CAAmBa,UAAnB,GAAgCpB,QAAQ,CAACoB,UAAT,EAAhC;AACAlB,MAAAA,YAAY,CAACK,KAAb,CAAmBc,UAAnB,GAAgCrB,QAAQ,CAACqB,UAAT,EAAhC;AACAnB,MAAAA,YAAY,CAACK,KAAb,CAAmBe,eAAnB,GAAqC,UAArC;AACApB,MAAAA,YAAY,CAACK,KAAb,CAAmBgB,SAAnB,GAA+BvB,QAAQ,CAACwB,KAAT,EAA/B;AACAtB,MAAAA,YAAY,CAACK,KAAb,CAAmBkB,KAAnB,GAA2BzB,QAAQ,CAAC0B,IAAT,EAA3B;AAEA,UAAIC,QAAQ,GAAG3B,QAAQ,CAAC2B,QAAT,EAAf;AACA,UAAIC,SAAS,GAAG,EAAhB;;AACA,UAAID,QAAJ,EAAc;AACZC,QAAAA,SAAS,IAAI,aAAaD,QAAb,GAAwB,MAArC;AACD;;AAED,UAAIE,EAAE,GAAG,CAAT;AACA,UAAMC,SAAS,GAAGC,SAAS,CAACC,SAAV,CAAoBC,WAApB,GAAkCC,OAAlC,CAA0C,SAA1C,IAAuD,CAAC,CAA1E;;AAEA,UAAIJ,SAAJ,EAAe;AACbD,QAAAA,EAAE,IAAI,IAAI/D,IAAI,CAACqE,KAAL,CAAWnC,QAAQ,CAACa,QAAT,KAAsB,EAAjC,CAAV;AACD;;AAEDe,MAAAA,SAAS,IAAI,iBAAiBC,EAAjB,GAAsB,KAAnC;AAEA3B,MAAAA,YAAY,CAACK,KAAb,CAAmBqB,SAAnB,GAA+BA,SAA/B;AACA1B,MAAAA,YAAY,CAACK,KAAb,CAAmBK,MAAnB,GAA4B,MAA5B;AACAV,MAAAA,YAAY,CAACK,KAAb,CAAmBK,MAAnB,GAA4BV,YAAY,CAACkC,YAAb,GAA4B,CAA5B,GAAgC,IAA5D;AAEAlC,MAAAA,YAAY,CAACmC,KAAb;;AAEA,UAAMC,cAAc,GAAG,SAAjBA,cAAiB,CAAA5C,CAAC,EAAI;AAC1B;AACA,YAAIA,CAAC,CAAC6C,OAAF,KAAc,EAAd,IAAoB,CAAC7C,CAAC,CAAC8C,QAA3B,EAAqC;AACnC,UAAA,KAAI,CAACzC,cAAL,CAAoBpB,EAApB,EAAwB,KAAxB;;AACA,UAAA,KAAI,CAAC8D,SAAL,CAAe9D,EAAf,EAAmBqB,QAAnB,EAA6BE,YAA7B;AACD,SALyB,CAO1B;;;AACA,YAAIR,CAAC,CAAC6C,OAAF,KAAc,EAAlB,EAAsB;AACpB,UAAA,KAAI,CAACxC,cAAL,CAAoBpB,EAApB,EAAwB,KAAxB;AACD;AACF,OAXD;;AAaAuB,MAAAA,YAAY,CAACwC,gBAAb,CAA8B,SAA9B,EAAyCJ,cAAzC;;AAEA,MAAA,KAAI,CAAChE,yBAAL,CAA+BM,IAA/B,CAAoC;AAAA,eAClCsB,YAAY,CAACyC,mBAAb,CAAiC,SAAjC,EAA4CL,cAA5C,CADkC;AAAA,OAApC;;AAIA,UAAMM,WAAW,GAAG,SAAdA,WAAc,GAAM;AACxB,QAAA,KAAI,CAACC,iBAAL;;AACA,QAAA,KAAI,CAACJ,SAAL,CAAe9D,EAAf,EAAmBqB,QAAnB,EAA6BE,YAA7B;AACD,OAHD;;AAKAA,MAAAA,YAAY,CAACwC,gBAAb,CAA8B,MAA9B,EAAsCE,WAAtC;;AAEA,MAAA,KAAI,CAACtE,yBAAL,CAA+BM,IAA/B,CAAoC;AAAA,eAClCsB,YAAY,CAACyC,mBAAb,CAAiC,MAAjC,EAAyCC,WAAzC,CADkC;AAAA,OAApC;;AAIA,MAAA,KAAI,CAACE,iBAAL,CAAuBnE,EAAvB,EAA2BE,SAA3B;;AACA,MAAA,KAAI,CAACR,KAAL,CAAWK,WAAX;AACD,KAvKkB;AAAA,8DAyKD,UAACgB,CAAD,EAAIM,QAAJ,EAAiB;AACjC,MAAA,KAAI,CAACA,QAAD,CAAJ,CAAe+C,QAAf,CAAwB;AACtBhE,QAAAA,KAAK,EAAE,KAAI,CAACiB,QAAD,CAAJ,CAAejB,KAAf,KAAyB,KAAI,CAACiB,QAAD,CAAJ,CAAegD,MAAf,EADV;AAEtBA,QAAAA,MAAM,EAAE,KAAI,CAAC3E,KAAL,CAAW4E;AAFG,OAAxB;AAID,KA9KkB;AACjB,SAAKxE,GAAL,GAAYJ,KAAK,IAAIA,KAAK,CAACI,GAAhB,IAAwB,EAAnC;AACA,SAAKH,yBAAL,GAAiC,EAAjC;AACD;;;;WA+BD,6BAAoB;AAClB,WAAKG,GAAL,CAASyE,GAAT,CAAa,UAAArD,IAAI,EAAI;AACnBA,QAAAA,IAAI,CAACV,WAAL,GAAmB,IAAnB;AACAU,QAAAA,IAAI,CAACT,kBAAL,GAA0B,KAA1B;AACAS,QAAAA,IAAI,CAACR,eAAL,GAAuB,KAAvB;AACD,OAJD;AAKD;;;WAED,wBAAeV,EAAf,EAAmB2B,KAAnB,EAA0B;AACxB,WAAK7B,GAAL,GAAW,KAAKA,GAAL,CAASyE,GAAT,CAAa,UAAArD,IAAI,EAAI;AAC9B,YAAIA,IAAI,CAAClB,EAAL,KAAYA,EAAhB,EAAoB;AAClB,iDACKkB,IADL;AAEEV,YAAAA,WAAW,EAAE,CAACmB,KAFhB;AAGElB,YAAAA,kBAAkB,EAAE,CAACkB,KAHvB;AAIEjB,YAAAA,eAAe,EAAEiB;AAJnB;AAMD;;AACD,eAAOT,IAAP;AACD,OAVU,CAAX;AAWA,WAAKxB,KAAL,CAAWK,WAAX;AACD;;;WAED,2BAAkBC,EAAlB,EAAsBE,SAAtB,EAAiC;AAC/B,UAAIA,SAAJ,EAAe;AACb,YAAMc,OAAO,GAAG,KAAKlB,GAAL,CAASmB,MAAT,CAAgB,UAAAC,IAAI;AAAA,iBAAIA,IAAI,CAAClB,EAAL,KAAYA,EAAhB;AAAA,SAApB,EAAwC,CAAxC,CAAhB;AACAgB,QAAAA,OAAO,CAACd,SAAR,GAAoB,KAApB;AACD;AACF;;;WAED,mBAAUF,EAAV,EAAcqB,QAAd,EAAwBE,YAAxB,EAAsC;AACpC,UAAIA,YAAY,CAACI,KAAjB,EAAwB;AACtBN,QAAAA,QAAQ,CAACF,IAAT,CAAcI,YAAY,CAACI,KAA3B;AACD,OAFD,MAEO;AACL,aAAK7B,GAAL,GAAW,KAAKA,GAAL,CAASmB,MAAT,CAAgB,UAAAE,IAAI;AAAA,iBAAIA,IAAI,CAACnB,EAAL,KAAYA,EAAhB;AAAA,SAApB,CAAX;AACA,aAAKN,KAAL,CAAWK,WAAX;AACD;;AAED,WAAKL,KAAL,CAAWmB,mBAAX;AACD;;;WAuGD,2BAAkB;AAAA;;AAChB,aAAO,KAAKf,GAAL,CAASyE,GAAT,CAAa,UAAApD,IAAI,EAAI;AAC1B,YAAQnB,EAAR,GAAgCmB,IAAhC,CAAQnB,EAAR;AAAA,YAAYU,eAAZ,GAAgCS,IAAhC,CAAYT,eAAZ;AACA,YAAMa,YAAY,sBAAevB,EAAf,CAAlB;AAEA,4BACE;AACE,UAAA,GAAG,EAAEuB,YADP;AAEE,UAAA,GAAG,EAAE,aAAAiD,QAAQ,EAAI;AACf,YAAA,MAAI,CAACjD,YAAD,CAAJ,GAAqBiD,QAArB;AACD,WAJH;AAKE,UAAA,KAAK,EAAE;AAAEC,YAAAA,OAAO,YAAK/D,eAAe,GAAG,OAAH,GAAa,MAAjC;AAAT;AALT,UADF;AASD,OAbM,CAAP;AAcD;;;WAED,yBAAgBhB,KAAhB,EAAuB;AACrB,UAAI,CAAC,KAAKA,KAAV,EAAiB;AACf,aAAKA,KAAL,GAAaA,KAAb;AACD;AACF;;;WAED,gBAAOA,KAAP,EAAc;AAAA;;AACZ,WAAKgF,eAAL,CAAqBhF,KAArB;;AAEA,UAAIA,KAAK,CAACiF,KAAV,EAAiB;AACf,YAAMC,QAAQ,GAAGlF,KAAK,CAACiF,KAAvB,CADe,CAGf;;AACA,YAAIC,QAAQ,KAAK,KAAKD,KAAtB,EAA6B;AAC3B,cAAME,iBAAiB,GAAG,SAApBA,iBAAoB,CAAA9D,CAAC,EAAI;AAC7B,gBAAIA,CAAC,CAAC+D,MAAF,KAAa,MAAI,CAACH,KAAtB,EAA6B;AAC3B;AACD;;AAED,YAAA,MAAI,CAACT,iBAAL;;AACA,YAAA,MAAI,CAACxE,KAAL,CAAWK,WAAX;AACD,WAPD;;AASA6E,UAAAA,QAAQ,CAACG,EAAT,CAAY,OAAZ,EAAqBF,iBAArB;AAEA,eAAKlF,yBAAL,CAA+BM,IAA/B,CAAoC;AAAA,mBAClC2E,QAAQ,CAACI,GAAT,CAAa,OAAb,EAAsBH,iBAAtB,CADkC;AAAA,WAApC;AAGD;;AAED,aAAKF,KAAL,GAAaC,QAAb;AACD;;AAED,aAAO,KAAK9E,GAAL,CAASyE,GAAT,CAAa,UAAApD,IAAI,EAAI;AAC1B,YACEnB,EADF,GASImB,IATJ,CACEnB,EADF;AAAA,YAEEG,KAFF,GASIgB,IATJ,CAEEhB,KAFF;AAAA,YAGEE,CAHF,GASIc,IATJ,CAGEd,CAHF;AAAA,YAIEE,CAJF,GASIY,IATJ,CAIEZ,CAJF;AAAA,YAKEH,KALF,GASIe,IATJ,CAKEf,KALF;AAAA,YAMEI,WANF,GASIW,IATJ,CAMEX,WANF;AAAA,YAOEwC,QAPF,GASI7B,IATJ,CAOE6B,QAPF;AAAA,YAQEvC,kBARF,GASIU,IATJ,CAQEV,kBARF;AAWA,YAAMY,QAAQ,kBAAWrB,EAAX,CAAd;AACA,YAAMiF,eAAe,yBAAkBjF,EAAlB,CAArB;AACA,YAAIkF,UAAU,GAAG,EAAjB;;AAEA,YAAI,CAACxF,KAAK,CAACyF,QAAX,EAAqB;AACnBD,UAAAA,UAAU,GAAG;AACXE,YAAAA,OAAO,EAAE,iBAAArE,CAAC;AAAA,qBAAI,MAAI,CAACsE,WAAL,CAAiBtE,CAAjB,EAAoBf,EAApB,CAAJ;AAAA,aADC;AAEXsF,YAAAA,UAAU,EAAE,oBAAAvE,CAAC;AAAA,qBAAI,MAAI,CAACwE,cAAL,CAAoBxE,CAApB,EAAuBI,IAAvB,CAAJ;AAAA,aAFF;AAGXqE,YAAAA,WAAW,EAAE,qBAAAzE,CAAC;AAAA,qBAAI,MAAI,CAAC0E,eAAL,CAAqB1E,CAArB,EAAwBM,QAAxB,CAAJ;AAAA,aAHH;AAIXqE,YAAAA,cAAc,EAAE,MAAI,CAAChG,KAAL,CAAWmB,mBAJhB;AAKX8E,YAAAA,WAAW,EAAE,MAAI,CAACC,eALP;AAMXC,YAAAA,SAAS,EAAE,MAAI,CAACC,aANL;AAOXC,YAAAA,SAAS,EAAE,MAAI,CAACrG,KAAL,CAAWmB,mBAPX;AAQXmF,YAAAA,YAAY,EAAE,MAAI,CAACtG,KAAL,CAAWuG,kBARd;AASXC,YAAAA,YAAY,EAAE,MAAI,CAACxG,KAAL,CAAWyG;AATd,WAAb;AAWD;;AAED,YAAInD,QAAJ,EAAc;AACZkC,UAAAA,UAAU,CAAClC,QAAX,GAAsBA,QAAtB;AACD;;AAED,eAAO,cACL,gCAAC,gBAAD;AACE,UAAA,GAAG,EAAEhD,EADP;AAEE,UAAA,OAAO,EAAE,IAFX;AAGE,UAAA,EAAE,EAAEA,EAHN;AAIE,UAAA,GAAG,EAAE,aAAAmB,IAAI,EAAI;AACX,YAAA,MAAI,CAACE,QAAD,CAAJ,GAAiBF,IAAjB;AACD,WANH;AAOE,UAAA,IAAI,EAAEA,IAAI,CAACA,IAAL,IAAahB,KAPrB;AAQE,UAAA,IAAI,EAAEkB,QARR;AASE,UAAA,CAAC,EAAEhB,CATL;AAUE,UAAA,CAAC,EAAEE,CAVL;AAWE,UAAA,KAAK,EAAEH,KAXT;AAYE,UAAA,SAAS,EAAE,CAACV,KAAK,CAACyF,QAZpB;AAaE,UAAA,OAAO,EAAE3E,WAbX;AAcE,UAAA,QAAQ,EAAE;AAdZ,WAeM0E,UAfN,EADK,EAkBLzE,kBAAkB,iBAChB,gCAAC,+BAAD;AACE,UAAA,GAAG,wBAAiBT,EAAjB,CADL;AAEE,UAAA,GAAG,EAAE,aAAAmB,IAAI,EAAI;AACX,YAAA,MAAI,CAAC8D,eAAD,CAAJ,GAAwB9D,IAAxB;AACD,WAJH;AAKE,UAAA,iBAAiB,EAAEE,QALrB;AAME,UAAA,WAAW,EAAE,MAAI,CAACuE,eANpB;AAOE,UAAA,SAAS,EAAE,MAAI,CAACE;AAPlB,UAnBG,CAAP;AA8BD,OAhEM,CAAP;AAiED;;;WA/SD,yBAAuB9F,EAAvB,EAA2B;AACzB,gCAAmBA,EAAnB;AACD;;;WAED,qBAAmBA,EAAnB,EAAuB;AACrB,4BAAeA,EAAf;AACD;;;WAED,4BAA0BA,EAA1B,EAA8B;AAC5B,mCAAsBA,EAAtB;AACD","sourcesContent":["import React from 'react';\nimport { Text } from 'react-konva';\n\nimport Transformer from './drawable-transformer';\n\nexport const generateId = () =>\n  Math.random()\n    .toString(36)\n    .substring(2) + new Date().getTime().toString(36);\n\nexport default class TextDrawable {\n  static getTextareaNode(id) {\n    return `textarea_${id}`;\n  }\n\n  static getTextNode(id) {\n    return `text_${id}`;\n  }\n\n  static getTransformerNode(id) {\n    return `transformer_${id}`;\n  }\n\n  constructor(props) {\n    this.all = (props && props.all) || [];\n    this.eventListenersDetachArray = [];\n  }\n\n  removeEventListeners = () =>\n    this.eventListenersDetachArray.forEach(fn => fn());\n\n  setAll = all => {\n    this.all = all;\n    this.props.forceUpdate();\n  };\n\n  addNewTextEntry = () => {\n    const all = this.all;\n    const id = generateId();\n\n    all.push({\n      id: id,\n      isDefault: true,\n      label: 'Double click to edit this text. Press Enter to submit.',\n      width: 200,\n      x: (all.length + 1) * 5 + 50,\n      y: (all.length + 1) * 5 + 50,\n      textVisible: true,\n      transformerVisible: true,\n      textareaVisible: false,\n      createdAt: new Date(),\n      type: 'text-entry'\n    });\n\n    this.props.handleSessionChange();\n  };\n\n  showOnlyTextNodes() {\n    this.all.map(item => {\n      item.textVisible = true;\n      item.transformerVisible = false;\n      item.textareaVisible = false;\n    });\n  }\n\n  toggleTextarea(id, value) {\n    this.all = this.all.map(item => {\n      if (item.id === id) {\n        return {\n          ...item,\n          textVisible: !value,\n          transformerVisible: !value,\n          textareaVisible: value\n        };\n      }\n      return item;\n    });\n    this.props.forceUpdate();\n  }\n\n  initializeDefault(id, isDefault) {\n    if (isDefault) {\n      const current = this.all.filter(item => item.id === id)[0];\n      current.isDefault = false;\n    }\n  }\n\n  saveValue(id, textNode, textareaNode) {\n    if (textareaNode.value) {\n      textNode.text(textareaNode.value);\n    } else {\n      this.all = this.all.filter(text => text.id !== id);\n      this.props.forceUpdate();\n    }\n\n    this.props.handleSessionChange();\n  }\n\n  handleMouseDown = () => this.props.toggleTextSelected(true);\n  handleMouseUp = () => this.props.toggleTextSelected(false);\n\n  handleClick = (e, id) => {\n    const current = this.all.filter(item => item.id === id)[0];\n    current.transformerVisible = true;\n    this.props.forceUpdate();\n  };\n\n  handleDblClick = (e, text) => {\n    const { id, isDefault } = text;\n    this.toggleTextarea(id, true);\n\n    const textNode = this[TextDrawable.getTextNode(id)];\n    const textareaNode = this[TextDrawable.getTextareaNode(id)];\n\n    const areaPosition = textNode._lastPos;\n\n    textareaNode.value = isDefault ? '' : textNode.text();\n    textareaNode.style.position = 'absolute';\n    textareaNode.style.top = areaPosition.y + 'px';\n    textareaNode.style.left = areaPosition.x + 'px';\n    textareaNode.style.width = textNode.width() - textNode.padding() * 2 + 'px';\n    textareaNode.style.height =\n      textNode.height() - textNode.padding() * 2 + 5 + 'px';\n    textareaNode.style.fontSize = textNode.fontSize() + 'px';\n    textareaNode.style.border = 'none';\n    textareaNode.style.padding = '0px';\n    textareaNode.style.margin = '0px';\n    textareaNode.style.overflow = 'hidden';\n    textareaNode.style.background = 'none';\n    textareaNode.style.outline = 'none';\n    textareaNode.style.resize = 'none';\n    textareaNode.style.lineHeight = textNode.lineHeight();\n    textareaNode.style.fontFamily = textNode.fontFamily();\n    textareaNode.style.transformOrigin = 'left top';\n    textareaNode.style.textAlign = textNode.align();\n    textareaNode.style.color = textNode.fill();\n\n    let rotation = textNode.rotation();\n    let transform = '';\n    if (rotation) {\n      transform += 'rotateZ(' + rotation + 'deg)';\n    }\n\n    let px = 0;\n    const isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;\n\n    if (isFirefox) {\n      px += 2 + Math.round(textNode.fontSize() / 20);\n    }\n\n    transform += 'translateY(-' + px + 'px)';\n\n    textareaNode.style.transform = transform;\n    textareaNode.style.height = 'auto';\n    textareaNode.style.height = textareaNode.scrollHeight + 3 + 'px';\n\n    textareaNode.focus();\n\n    const keyDownHandler = e => {\n      // hide on enter but don't hide on shift + enter\n      if (e.keyCode === 13 && !e.shiftKey) {\n        this.toggleTextarea(id, false);\n        this.saveValue(id, textNode, textareaNode);\n      }\n\n      // on esc do not set value back to node\n      if (e.keyCode === 27) {\n        this.toggleTextarea(id, false);\n      }\n    };\n\n    textareaNode.addEventListener('keydown', keyDownHandler);\n\n    this.eventListenersDetachArray.push(() =>\n      textareaNode.removeEventListener('keydown', keyDownHandler)\n    );\n\n    const blurHandler = () => {\n      this.showOnlyTextNodes();\n      this.saveValue(id, textNode, textareaNode);\n    };\n\n    textareaNode.addEventListener('blur', blurHandler);\n\n    this.eventListenersDetachArray.push(() =>\n      textareaNode.removeEventListener('blur', blurHandler)\n    );\n\n    this.initializeDefault(id, isDefault);\n    this.props.forceUpdate();\n  };\n\n  handleTransform = (e, textNode) => {\n    this[textNode].setAttrs({\n      width: this[textNode].width() * this[textNode].scaleX(),\n      scaleX: this.props.scale,\n    });\n  };\n\n  renderTextareas() {\n    return this.all.map(text => {\n      const { id, textareaVisible } = text;\n      const textareaNode = `textarea_${id}`;\n\n      return (\n        <textarea\n          key={textareaNode}\n          ref={textarea => {\n            this[textareaNode] = textarea;\n          }}\n          style={{ display: `${textareaVisible ? 'block' : 'none'}` }}\n        />\n      );\n    });\n  }\n\n  setInitialProps(props) {\n    if (!this.props) {\n      this.props = props;\n    }\n  }\n\n  render(props) {\n    this.setInitialProps(props);\n\n    if (props.stage) {\n      const newStage = props.stage;\n\n      // setting the handler only once\n      if (newStage !== this.stage) {\n        const stageClickHandler = e => {\n          if (e.target !== this.stage) {\n            return;\n          }\n\n          this.showOnlyTextNodes();\n          this.props.forceUpdate();\n        };\n\n        newStage.on('click', stageClickHandler);\n\n        this.eventListenersDetachArray.push(() =>\n          newStage.off('click', stageClickHandler)\n        );\n      }\n\n      this.stage = newStage;\n    }\n\n    return this.all.map(text => {\n      const {\n        id,\n        label,\n        x,\n        y,\n        width,\n        textVisible,\n        rotation,\n        transformerVisible\n      } = text;\n\n      const textNode = `text_${id}`;\n      const transformerNode = `transformer_${id}`;\n      let extraProps = {};\n\n      if (!props.disabled) {\n        extraProps = {\n          onClick: e => this.handleClick(e, id),\n          onDblClick: e => this.handleDblClick(e, text),\n          onTransform: e => this.handleTransform(e, textNode),\n          onTransformEnd: this.props.handleSessionChange,\n          onMouseDown: this.handleMouseDown,\n          onMouseUp: this.handleMouseUp,\n          onDragEnd: this.props.handleSessionChange,\n          onMouseEnter: this.props.onMouseOverElement,\n          onMouseLeave: this.props.onMouseOutElement,\n        }\n      }\n\n      if (rotation) {\n        extraProps.rotation = rotation;\n      }\n\n      return [\n        <Text\n          key={id}\n          bubbles={true}\n          id={id}\n          ref={text => {\n            this[textNode] = text;\n          }}\n          text={text.text || label}\n          name={textNode}\n          x={x}\n          y={y}\n          width={width}\n          draggable={!props.disabled}\n          visible={textVisible}\n          fontSize={16}\n          {...extraProps}\n        />,\n        transformerVisible && (\n          <Transformer\n            key={`transformer_${id}`}\n            ref={text => {\n              this[transformerNode] = text;\n            }}\n            selectedShapeName={textNode}\n            onMouseDown={this.handleMouseDown}\n            onMouseUp={this.handleMouseUp}\n          />\n        )\n      ];\n    });\n  }\n}\n"],"file":"drawable-text.js"}

package/lib/drawing-response/index.js

@@ -61,6 +61,8 @@ var DrawingResponseComponent = /*#__PURE__*/function (_React$Component) {
           prompt = _this$props$model.prompt,
           mode = _this$props$model.mode,
           teacherInstructions = _this$props$model.teacherInstructions,
+          _this$props$model$bac = _this$props$model.backgroundImageEnabled,
+          backgroundImageEnabled = _this$props$model$bac === void 0 ? true : _this$props$model$bac,
           session = _this$props.session,
           onSessionChange = _this$props.onSessionChange,
           classes = _this$props.classes;
@@ -86,6 +88,7 @@ var DrawingResponseComponent = /*#__PURE__*/function (_React$Component) {
         isEvaluateMode: isEvaluateMode,
         imageDimensions: imageDimensions,
         imageUrl: imageUrl,
+        backgroundImageEnabled: backgroundImageEnabled,
         disabled: disabled
       }));
     }

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","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,wBAYI,KAAKH,KAZT;AAAA,0CACEI,KADF;AAAA,UAEIC,QAFJ,qBAEIA,QAFJ;AAAA,UAGIC,eAHJ,qBAGIA,eAHJ;AAAA,UAIIC,QAJJ,qBAIIA,QAJJ;AAAA,UAKIC,MALJ,qBAKIA,MALJ;AAAA,UAMIC,IANJ,qBAMIA,IANJ;AAAA,UAOIC,mBAPJ,qBAOIA,mBAPJ;AAAA,UASEC,OATF,eASEA,OATF;AAAA,UAUEC,eAVF,eAUEA,eAVF;AAAA,UAWEC,OAXF,eAWEA,OAXF;AAaA,wBAAmC,KAAKZ,KAAxC;AAAA,UAAQE,QAAR,eAAQA,QAAR;AAAA,UAAkBW,YAAlB,eAAkBA,YAAlB;AACA,UAAMC,cAAc,GAAGN,IAAI,KAAK,UAAhC;AAEA,aAAON,QAAQ,gBACb,mEAAwBW,YAAxB,CADa,gBAGb,6CACGJ,mBAAmB,iBAClB,gCAAC,iBAAD,CAAO,QAAP,qBACE,gCAAC,qBAAD;AACE,QAAA,MAAM,EAAE;AACNM,UAAAA,MAAM,EAAE,2BADF;AAENC,UAAAA,OAAO,EAAE;AAFH;AADV,sBAME,gCAAC,uBAAD;AAAe,QAAA,MAAM,EAAEP;AAAvB,QANF,CADF,eASE,2CATF,CAFJ,eAeE,gCAAC,sBAAD;AAAY,QAAA,SAAS,EAAEG,OAAO,CAACL;AAA/B,sBACE,gCAAC,uBAAD;AAAe,QAAA,OAAO,EAAC,MAAvB;AAA8B,QAAA,MAAM,EAAEA;AAAtC,QADF,CAfF,eAmBE,gCAAC,qBAAD;AACE,QAAA,OAAO,EAAEG,OADX;AAEE,QAAA,eAAe,EAAEC,eAFnB;AAGE,QAAA,cAAc,EAAEG,cAHlB;AAIE,QAAA,eAAe,EAAET,eAJnB;AAKE,QAAA,QAAQ,EAAEC,QALZ;AAME,QAAA,QAAQ,EAAEF;AANZ,QAnBF,CAHF;AAgCD;;;WArDD,kCAAgCa,KAAhC,EAAuC;AACrC,aAAO;AAAEf,QAAAA,QAAQ,EAAE,IAAZ;AAAkBW,QAAAA,YAAY,EAAEI,KAAK,CAACC;AAAtC,OAAP;AACD;;;EAXoCC,kBAAMC,S;;AAiE7CtB,wBAAwB,CAACuB,SAAzB,GAAqC;AACnCT,EAAAA,OAAO,EAAEU,sBAAUC,MADgB;AAEnCpB,EAAAA,KAAK,EAAEmB,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;AACpBnB,IAAAA,MAAM,EAAE;AACNoB,MAAAA,QAAQ,EAAE;AADJ;AADY,GAAP;AAAA,CAAf;;eAMe,wBAAWD,MAAX,EAAmB5B,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: {\n        disabled,\n        imageDimensions,\n        imageUrl,\n        prompt,\n        mode,\n        teacherInstructions\n      },\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          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","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,wBAaI,KAAKH,KAbT;AAAA,0CACEI,KADF;AAAA,UAEIC,QAFJ,qBAEIA,QAFJ;AAAA,UAGIC,eAHJ,qBAGIA,eAHJ;AAAA,UAIIC,QAJJ,qBAIIA,QAJJ;AAAA,UAKIC,MALJ,qBAKIA,MALJ;AAAA,UAMIC,IANJ,qBAMIA,IANJ;AAAA,UAOIC,mBAPJ,qBAOIA,mBAPJ;AAAA,oDAQIC,sBARJ;AAAA,UAQIA,sBARJ,sCAQ6B,IAR7B;AAAA,UAUEC,OAVF,eAUEA,OAVF;AAAA,UAWEC,eAXF,eAWEA,eAXF;AAAA,UAYEC,OAZF,eAYEA,OAZF;AAcA,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;;;WAvDD,kCAAgCc,KAAhC,EAAuC;AACrC,aAAO;AAAEhB,QAAAA,QAAQ,EAAE,IAAZ;AAAkBY,QAAAA,YAAY,EAAEI,KAAK,CAACC;AAAtC,OAAP;AACD;;;EAXoCC,kBAAMC,S;;AAmE7CvB,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: {\n        disabled,\n        imageDimensions,\n        imageUrl,\n        prompt,\n        mode,\n        teacherInstructions,\n        backgroundImageEnabled = true\n      },\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"}

package/lib/index.js

@@ -80,6 +80,9 @@ var DrawingResponse = /*#__PURE__*/function (_HTMLElement) {
     }
   }, {
     key: "session",
+    get: function get() {
+      return this._session;
+    },
     set: function set(s) {
       this._session = s;
 

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.js"],"names":["DrawingResponse","update","_session","drawables","texts","dispatchEvent","SessionChangedEvent","tagName","toLowerCase","isComplete","_render","m","_model","ModelSetEvent","s","el","React","createElement","DrawingResponseComponent","model","session","onSessionChange","sessionChanged","ReactDOM","render","HTMLElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAEA;;;;;;IAEqBA,e;;;;;;;;;;;;;;;uGAkBF,UAACC,MAAD,EAAY;AAC3B,YAAKC,QAAL,CAAcC,SAAd,GAA0BF,MAAM,CAACE,SAAjC;AACA,YAAKD,QAAL,CAAcE,KAAd,GAAsBH,MAAM,CAACG,KAA7B;;AAEA,YAAKC,aAAL,CACE,IAAIC,oCAAJ,CAAwB,MAAKC,OAAL,CAAaC,WAAb,EAAxB,EAAoD,MAAKC,UAAL,EAApD,CADF;;AAIA,YAAKC,OAAL;AACD,K;;;;;;SA1BD,aAAUC,CAAV,EAAa;AACX,WAAKC,MAAL,GAAcD,CAAd;AAEA,WAAKN,aAAL,CACE,IAAIQ,8BAAJ,CACE,KAAKN,OAAL,CAAaC,WAAb,EADF,EAEE,KAAKC,UAAL,EAFF,EAGE,CAAC,CAAC,KAAKG,MAHT,CADF;;AAOA,WAAKF,OAAL;AACD;;;WAED,sBAAa;AACX,aAAO,KAAKR,QAAL,KAAkB,CAAC,yBAAQ,KAAKA,QAAL,CAAcC,SAAtB,CAAD,IAAqC,CAAC,yBAAQ,KAAKD,QAAL,CAAcE,KAAtB,CAAxD,CAAP;AACD;;;SAaD,aAAYU,CAAZ,EAAe;AACb,WAAKZ,QAAL,GAAgBY,CAAhB;;AACA,WAAKJ,OAAL;AACD;;;WAED,6BAAoB;AAClB,WAAKA,OAAL;AACD;;;WAED,mBAAU;AAAA;;AACR,UAAI,KAAKE,MAAL,IAAe,KAAKV,QAAxB,EAAkC;AAChC,YAAMa,EAAE,gBAAGC,kBAAMC,aAAN,CAAoBC,2BAApB,EAA8C;AACvDC,UAAAA,KAAK,EAAE,KAAKP,MAD2C;AAEvDQ,UAAAA,OAAO,EAAE,KAAKlB,QAFyC;AAGvDmB,UAAAA,eAAe,EAAE,KAAKC;AAHiC,SAA9C,CAAX;;AAKAC,6BAASC,MAAT,CAAgBT,EAAhB,EAAoB,IAApB,EAA0B,YAAM;AAC9B,yCAAW,MAAX;AACD,SAFD;AAGD;AACF;;;kDAjD0CU,W","sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\nimport isEmpty from 'lodash/isEmpty';\nimport { renderMath } from '@pie-lib/math-rendering';\nimport { ModelSetEvent, SessionChangedEvent } from '@pie-framework/pie-player-events';\n\nimport DrawingResponseComponent from './drawing-response';\n\nexport default class DrawingResponse extends HTMLElement {\n  set model(m) {\n    this._model = m;\n\n    this.dispatchEvent(\n      new ModelSetEvent(\n        this.tagName.toLowerCase(),\n        this.isComplete(),\n        !!this._model\n      )\n    );\n    this._render();\n  }\n\n  isComplete() {\n    return this._session && (!isEmpty(this._session.drawables) || !isEmpty(this._session.texts));\n  }\n\n  sessionChanged = (update) => {\n    this._session.drawables = update.drawables;\n    this._session.texts = update.texts;\n\n    this.dispatchEvent(\n      new SessionChangedEvent(this.tagName.toLowerCase(), this.isComplete())\n    );\n\n    this._render();\n  };\n\n  set session(s) {\n    this._session = s;\n    this._render();\n  }\n\n  connectedCallback() {\n    this._render();\n  }\n\n  _render() {\n    if (this._model && this._session) {\n      const el = React.createElement(DrawingResponseComponent, {\n        model: this._model,\n        session: this._session,\n        onSessionChange: this.sessionChanged\n      });\n      ReactDOM.render(el, this, () => {\n        renderMath(this);\n      });\n    }\n  }\n}\n"],"file":"index.js"}
+{"version":3,"sources":["../src/index.js"],"names":["DrawingResponse","update","_session","drawables","texts","dispatchEvent","SessionChangedEvent","tagName","toLowerCase","isComplete","_render","m","_model","ModelSetEvent","s","el","React","createElement","DrawingResponseComponent","model","session","onSessionChange","sessionChanged","ReactDOM","render","HTMLElement"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AAEA;;;;;;IAEqBA,e;;;;;;;;;;;;;;;uGAkBF,UAACC,MAAD,EAAY;AAC3B,YAAKC,QAAL,CAAcC,SAAd,GAA0BF,MAAM,CAACE,SAAjC;AACA,YAAKD,QAAL,CAAcE,KAAd,GAAsBH,MAAM,CAACG,KAA7B;;AAEA,YAAKC,aAAL,CACE,IAAIC,oCAAJ,CAAwB,MAAKC,OAAL,CAAaC,WAAb,EAAxB,EAAoD,MAAKC,UAAL,EAApD,CADF;;AAIA,YAAKC,OAAL;AACD,K;;;;;;SA1BD,aAAUC,CAAV,EAAa;AACX,WAAKC,MAAL,GAAcD,CAAd;AAEA,WAAKN,aAAL,CACE,IAAIQ,8BAAJ,CACE,KAAKN,OAAL,CAAaC,WAAb,EADF,EAEE,KAAKC,UAAL,EAFF,EAGE,CAAC,CAAC,KAAKG,MAHT,CADF;;AAOA,WAAKF,OAAL;AACD;;;WAED,sBAAa;AACX,aAAO,KAAKR,QAAL,KAAkB,CAAC,yBAAQ,KAAKA,QAAL,CAAcC,SAAtB,CAAD,IAAqC,CAAC,yBAAQ,KAAKD,QAAL,CAAcE,KAAtB,CAAxD,CAAP;AACD;;;SAkBD,eAAc;AACZ,aAAO,KAAKF,QAAZ;AACD,K;SAPD,aAAYY,CAAZ,EAAe;AACb,WAAKZ,QAAL,GAAgBY,CAAhB;;AACA,WAAKJ,OAAL;AACD;;;WAMD,6BAAoB;AAClB,WAAKA,OAAL;AACD;;;WAED,mBAAU;AAAA;;AACR,UAAI,KAAKE,MAAL,IAAe,KAAKV,QAAxB,EAAkC;AAChC,YAAMa,EAAE,gBAAGC,kBAAMC,aAAN,CAAoBC,2BAApB,EAA8C;AACvDC,UAAAA,KAAK,EAAE,KAAKP,MAD2C;AAEvDQ,UAAAA,OAAO,EAAE,KAAKlB,QAFyC;AAGvDmB,UAAAA,eAAe,EAAE,KAAKC;AAHiC,SAA9C,CAAX;;AAMAC,6BAASC,MAAT,CAAgBT,EAAhB,EAAoB,IAApB,EAA0B,YAAM;AAC9B,yCAAW,MAAX;AACD,SAFD;AAGD;AACF;;;kDAtD0CU,W","sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\nimport isEmpty from 'lodash/isEmpty';\nimport { renderMath } from '@pie-lib/math-rendering';\nimport { ModelSetEvent, SessionChangedEvent } from '@pie-framework/pie-player-events';\n\nimport DrawingResponseComponent from './drawing-response';\n\nexport default class DrawingResponse extends HTMLElement {\n  set model(m) {\n    this._model = m;\n\n    this.dispatchEvent(\n      new ModelSetEvent(\n        this.tagName.toLowerCase(),\n        this.isComplete(),\n        !!this._model\n      )\n    );\n    this._render();\n  }\n\n  isComplete() {\n    return this._session && (!isEmpty(this._session.drawables) || !isEmpty(this._session.texts));\n  }\n\n  sessionChanged = (update) => {\n    this._session.drawables = update.drawables;\n    this._session.texts = update.texts;\n\n    this.dispatchEvent(\n      new SessionChangedEvent(this.tagName.toLowerCase(), this.isComplete())\n    );\n\n    this._render();\n  };\n\n  set session(s) {\n    this._session = s;\n    this._render();\n  }\n\n  get session() {\n    return this._session;\n  }\n\n  connectedCallback() {\n    this._render();\n  }\n\n  _render() {\n    if (this._model && this._session) {\n      const el = React.createElement(DrawingResponseComponent, {\n        model: this._model,\n        session: this._session,\n        onSessionChange: this.sessionChanged\n      });\n\n      ReactDOM.render(el, this, () => {\n        renderMath(this);\n      });\n    }\n  }\n}\n"],"file":"index.js"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-element/drawing-response",
-  "version": "3.9.13",
+  "version": "3.9.16",
   "description": "",
   "repository": "pie-framework/pie-elements",
   "publishConfig": {
@@ -11,8 +11,8 @@
     "@mdi/js": "^3.6.95",
     "@mdi/react": "^1.1.1",
     "@pie-framework/pie-player-events": "^0.1.0",
-    "@pie-lib/math-rendering": "^2.3.12",
-    "@pie-lib/render-ui": "^4.12.4",
+    "@pie-lib/math-rendering": "^2.3.13",
+    "@pie-lib/render-ui": "^4.12.5",
     "classnames": "^2.2.6",
     "enzyme-to-json": "^3.3.5",
     "konva": "^3.4.1",
@@ -24,7 +24,7 @@
   },
   "author": "pie framework developers",
   "license": "ISC",
-  "gitHead": "7b61c8a15ceae75e9e6db5d465abfb6d22c34f30",
+  "gitHead": "de8f41ecfc06944b7bc890a167f81818d2bf1845",
   "scripts": {
     "postpublish": "../../scripts/postpublish"
   },

package/src/drawing-response/__tests__/__snapshots__/container.test.jsx.snap

@@ -212,7 +212,14 @@ exports[`Container snapshot renders 1`] = `
         />
       </div>
     </div>
-    <div>
+    <div
+      style={
+        Object {
+          "height": 0,
+          "maxHeight": 0,
+        }
+      }
+    >
       <WithStyles(DrawableMain)
         TextEntry={
           TextDrawable {
@@ -240,6 +247,7 @@ exports[`Container snapshot renders 1`] = `
         onSessionChange={[MockFunction]}
         outlineColor="black"
         paintColor="red"
+        scale={1}
         session={Object {}}
         toolActive={
           Object {
@@ -466,7 +474,14 @@ exports[`Container snapshot renders disabled 1`] = `
         />
       </div>
     </div>
-    <div>
+    <div
+      style={
+        Object {
+          "height": 0,
+          "maxHeight": 0,
+        }
+      }
+    >
       <WithStyles(DrawableMain)
         TextEntry={
           TextDrawable {
@@ -495,6 +510,7 @@ exports[`Container snapshot renders disabled 1`] = `
         onSessionChange={[MockFunction]}
         outlineColor="black"
         paintColor="red"
+        scale={1}
         session={Object {}}
         toolActive={
           Object {

package/src/drawing-response/__tests__/__snapshots__/drawing-main.test.jsx.snap

@@ -26,7 +26,12 @@ exports[`DrawingResponse DrawableMain snapshot renders 1`] = `
   </div>
   <div>
     <WithStyles(DrawableImage)
-      dimensions={Object {}}
+      dimensions={
+        Object {
+          "height": NaN,
+          "width": NaN,
+        }
+      }
       url="url"
     />
     <ForwardRef
@@ -58,7 +63,12 @@ exports[`DrawingResponse DrawableMain snapshot renders disabled 1`] = `
   </div>
   <div>
     <WithStyles(DrawableImage)
-      dimensions={Object {}}
+      dimensions={
+        Object {
+          "height": NaN,
+          "width": NaN,
+        }
+      }
       url="url"
     />
     <ForwardRef

package/src/drawing-response/__tests__/container.test.jsx

@@ -1,5 +1,12 @@
 import { shallow } from 'enzyme';
 import React from 'react';
+
+global.MutationObserver = class {
+  constructor(callback) {}
+  disconnect() {}
+  observe(element, initObject) {}
+};
+
 import { Container } from '../container';
 
 beforeEach(() => {

package/src/drawing-response/__tests__/drawing-main.test.jsx

@@ -507,7 +507,8 @@ describe('DrawingResponse', () => {
         startx: 200,
         starty: 200,
         x: 300,
-        y: 300
+        y: 300,
+        scale: 1
       };
       wrapper = mkWrapper('DrawableText', props, 'div');
     });

package/src/drawing-response/container.jsx

@@ -29,7 +29,8 @@ export class Container extends Component {
     session: PropTypes.object.isRequired,
     onSessionChange: PropTypes.func.isRequired,
     imageDimensions: PropTypes.object.isRequired,
-    imageUrl: PropTypes.string.isRequired
+    imageUrl: PropTypes.string.isRequired,
+    backgroundImageEnabled: PropTypes.bool.isRequired
   };
 
   constructor(props) {
@@ -37,6 +38,7 @@ export class Container extends Component {
     const TextEntry = new DrawableText();
 
     this.state = {
+      scale: 1,
       drawableDimensions: {
         height: 0,
         width: 0
@@ -80,12 +82,42 @@ export class Container extends Component {
 
   componentDidMount() {
     this.setDimensions();
+
+    this.observer = new MutationObserver((mutations) => {
+      mutations.forEach(() => {
+        const target = document.getElementById('question-container')?.style?.cssText
+        const zoom = target?.substring(
+          target.indexOf('--pie-zoom') + 11,
+          target.lastIndexOf('%')
+        );
+        const zoomParsed = zoom?.replace(/\s/g, '');
+
+      if (zoomParsed) {
+          const newScale = parseFloat(zoomParsed) / 100;
+          if (newScale !== this.state.scale) {
+            this.setState({
+              scale: parseFloat(zoomParsed) / 100,
+            })
+          }
+        } else if (!zoomParsed && this.state.scale !== 1) {
+          this.setState({
+            scale: 1,
+          });
+        }
+      });
+    });
+
+    const target = document.getElementById('question-container');
+    if (target) {
+      this.observer.observe(target, { attributes : true, attributeFilter : ['style'] })
+    }
   }
 
   componentWillUnmount() {
     const { TextEntry } = this.state;
 
     TextEntry.removeEventListeners();
+    this.observer?.disconnect();
   }
 
   handleMakeToolActive(tool) {
@@ -131,7 +163,8 @@ export class Container extends Component {
       imageUrl,
       imageDimensions,
       onSessionChange,
-      session
+      session,
+      backgroundImageEnabled
     } = this.props;
     const {
       drawableDimensions,
@@ -145,6 +178,8 @@ export class Container extends Component {
       TextEntry
     } = this.state;
 
+    const heightToUse = drawableDimensions.height * this.state.scale;
+
     return (
       <div className={classes.base}>
         <DrawablePalette
@@ -185,8 +220,10 @@ export class Container extends Component {
               this.drawable = drawable;
             }}
             className={classes.drawableHeight}
+            style={{ height: heightToUse, maxHeight: heightToUse }}
           >
             <DrawableMain
+              scale={this.state.scale}
               session={session}
               disabled={disabled}
               onSessionChange={onSessionChange}
@@ -198,6 +235,7 @@ export class Container extends Component {
               imageDimensions={imageDimensions}
               toolActive={toolActive}
               TextEntry={TextEntry}
+              backgroundImageEnabled={backgroundImageEnabled}
             />
           </div>
         </div>

package/src/drawing-response/drawable-image.jsx

@@ -5,11 +5,12 @@ import { withStyles } from '@material-ui/core/styles';
 const DrawableImage = ({ classes, url, dimensions: { height, width } }) => (
   <div className={classes.imageContainer}>
     <img
+      alt="drawing-response-image"
       className={classes.image}
       src={url}
       style={{
         height,
-        maxWidth: width,
+        maxWidth: 598,
         maxHeight: 350,
         width,
       }}

package/src/drawing-response/drawable-main.jsx

@@ -90,13 +90,13 @@ export class DrawableMain extends React.Component {
 
   handleMouseDown = e => {
     const { newDrawable, textIsSelected } = this.state;
-    const { toolActive, fillColor, outlineColor } = this.props;
+    const { toolActive, fillColor, outlineColor, scale } = this.props;
 
     if (newDrawable.length === 0 && !textIsSelected) {
       const { x, y } = e.target.getStage().getPointerPosition();
       const newDrawable = factory(toolActive.type, {
-        startx: x,
-        starty: y,
+        startx: x / scale,
+        starty: y / scale,
         fillColor,
         outlineColor,
         createdAt: new Date()
@@ -110,12 +110,13 @@ export class DrawableMain extends React.Component {
 
   handleMouseUp = e => {
     const { newDrawable, drawables } = this.state;
+    const { scale } = this.props;
 
     if (newDrawable.length === 1) {
       const { x, y } = e.target.getStage().getPointerPosition();
       const drawableToAdd = newDrawable[0];
 
-      drawableToAdd.registerMovement(x, y);
+      drawableToAdd.registerMovement(x / scale, y / scale);
       drawables.push(drawableToAdd);
 
       this.setState(
@@ -130,12 +131,13 @@ export class DrawableMain extends React.Component {
 
   handleMouseMove = e => {
     const { newDrawable } = this.state;
+    const { scale } = this.props;
 
     if (newDrawable.length === 1) {
       const { x, y } = e.target.getStage().getPointerPosition();
       const updatedNewDrawable = newDrawable[0];
 
-      updatedNewDrawable.registerMovement(x, y);
+      updatedNewDrawable.registerMovement(x / scale, y / scale);
 
       this.setState({
         newDrawable: [updatedNewDrawable]
@@ -185,7 +187,9 @@ export class DrawableMain extends React.Component {
       paintColor,
       outlineColor,
       TextEntry,
-      toolActive: { type }
+      backgroundImageEnabled = true,
+      toolActive: { type },
+      scale
     } = this.props;
     const { isOver, newDrawable } = this.state;
 
@@ -205,7 +209,8 @@ export class DrawableMain extends React.Component {
       handleSessionChange: this.handleSessionChange,
       stage: this.stage,
       onMouseOverElement: this.onMouseOverElement,
-      onMouseOutElement: this.onMouseOutElement
+      onMouseOutElement: this.onMouseOutElement,
+      scale
     };
 
     let listeners = {};
@@ -221,6 +226,9 @@ export class DrawableMain extends React.Component {
       }
     }
 
+    const imageHeight = imageDimensions?.height * scale;
+    const imageWidth = imageDimensions?.width * scale;
+
     return (
       <div>
         <div className={classes.undoControls}>
@@ -228,13 +236,17 @@ export class DrawableMain extends React.Component {
           <Button disabled={disabled} onClick={this.handleClearAll} label="Clear all" />
         </div>
         <div className={classes.base}>
-          {imageUrl && (
-            <ImageBackground dimensions={imageDimensions} url={imageUrl} />
+          {backgroundImageEnabled && imageUrl && (
+            <ImageBackground
+              dimensions={{height: imageHeight, width: imageWidth}}
+              url={imageUrl}/>
           )}
 
           {TextEntry.renderTextareas()}
 
           <Stage
+            scaleX={scale}
+            scaleY={scale}
             ref={ref => {
               this.stage = ref;
             }}
@@ -297,7 +309,9 @@ DrawableMain.propTypes = {
   imageUrl: PropTypes.string.isRequired,
   TextEntry: PropTypes.object.isRequired,
   toolActive: PropTypes.object.isRequired,
-  session: PropTypes.object.isRequired
+  session: PropTypes.object.isRequired,
+  backgroundImageEnabled: PropTypes.bool.isRequired,
+  scale: PropTypes.number.isRequired
 };
 
 export default withStyles(styles)(DrawableMain);

package/src/drawing-response/drawable-text.jsx

@@ -193,7 +193,7 @@ export default class TextDrawable {
   handleTransform = (e, textNode) => {
     this[textNode].setAttrs({
       width: this[textNode].width() * this[textNode].scaleX(),
-      scaleX: 1
+      scaleX: this.props.scale,
     });
   };
 

package/src/drawing-response/index.jsx

@@ -27,7 +27,8 @@ class DrawingResponseComponent extends React.Component {
         imageUrl,
         prompt,
         mode,
-        teacherInstructions
+        teacherInstructions,
+        backgroundImageEnabled = true
       },
       session,
       onSessionChange,
@@ -64,6 +65,7 @@ class DrawingResponseComponent extends React.Component {
           isEvaluateMode={isEvaluateMode}
           imageDimensions={imageDimensions}
           imageUrl={imageUrl}
+          backgroundImageEnabled={backgroundImageEnabled}
           disabled={disabled}
         />
       </div>

package/src/index.js

@@ -40,6 +40,10 @@ export default class DrawingResponse extends HTMLElement {
     this._render();
   }
 
+  get session() {
+    return this._session;
+  }
+
   connectedCallback() {
     this._render();
   }
@@ -51,6 +55,7 @@ export default class DrawingResponse extends HTMLElement {
         session: this._session,
         onSessionChange: this.sessionChanged
       });
+
       ReactDOM.render(el, this, () => {
         renderMath(this);
       });