@pie-element/drawing-response 6.4.1-next.9 → 6.5.0

package/docs/pie-schema.json

@@ -88,6 +88,11 @@
       "type": "boolean",
       "title": "rubricEnabled"
     },
+    "language": {
+      "description": "Indicates the language of the component\nSupported options: en, es, en_US, en-US, es_ES, es-ES, es_MX, es-MX",
+      "type": "string",
+      "title": "language"
+    },
     "id": {
       "description": "Identifier to identify the Pie Element in html markup, Must be unique within a pie item config.",
       "type": "string",
@@ -189,6 +194,42 @@
         }
       }
     },
+    "ConfigureMathMLProp": {
+      "title": "ConfigureMathMLProp",
+      "type": "object",
+      "properties": {
+        "mmlOutput": {
+          "description": "Indicates if model should have mathML output instead of latex",
+          "type": "number",
+          "title": "mmlOutput"
+        },
+        "mmlEditing": {
+          "description": "Indicates if mathML that's already in model should be editable",
+          "type": "number",
+          "title": "mmlEditing"
+        }
+      }
+    },
+    "ConfigureLanguageOptionsProp": {
+      "title": "ConfigureLanguageOptionsProp",
+      "type": "object",
+      "properties": {
+        "value": {
+          "description": "Value of the language option",
+          "type": "string",
+          "title": "value"
+        },
+        "label": {
+          "description": "Label of the language option",
+          "type": "string",
+          "title": "label"
+        }
+      },
+      "required": [
+        "label",
+        "value"
+      ]
+    },
     "Dimension": {
       "title": "Dimension",
       "type": "object",

package/docs/pie-schema.json.md

@@ -69,6 +69,11 @@ Default: `": 'bottom'"`
 
 Indicates if Rubric is enabled
 
+# `language` (string)
+
+Indicates the language of the component
+Supported options: en, es, en_US, en-US, es_ES, es-ES, es_MX, es-MX
+
 # `id` (string, required)
 
 Identifier to identify the Pie Element in html markup, Must be unique within a pie item config.
@@ -147,6 +152,30 @@ 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
 
+## `ConfigureMathMLProp` (object)
+
+Properties of the `ConfigureMathMLProp` object:
+
+### `mmlOutput` (number)
+
+Indicates if model should have mathML output instead of latex
+
+### `mmlEditing` (number)
+
+Indicates if mathML that's already in model should be editable
+
+## `ConfigureLanguageOptionsProp` (object)
+
+Properties of the `ConfigureLanguageOptionsProp` object:
+
+### `value` (string, required)
+
+Value of the language option
+
+### `label` (string, required)
+
+Label of the language option
+
 ## `Dimension` (object)
 
 Properties of the `Dimension` object:

package/lib/drawing-response/container.js

@@ -31,6 +31,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _styles = require("@material-ui/core/styles");
 
+var _translator = _interopRequireDefault(require("@pie-lib/translator"));
+
 var _constants = _interopRequireDefault(require("./constants"));
 
 var _button = _interopRequireDefault(require("./button"));
@@ -52,6 +54,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 var TOOLS = _constants["default"].tools;
+var translator = _translator["default"].translator;
 var ROGVAIV = ['red', 'orange', 'yellow', 'violet', 'blue', 'green', 'white', 'black'].map(function (c) {
   return {
     value: c,
@@ -108,6 +111,47 @@ var Container = /*#__PURE__*/function (_Component) {
   }
 
   (0, _createClass2["default"])(Container, [{
+    key: "setTranslatedState",
+    value: function setTranslatedState(language) {
+      var translatedROGVAIV = ROGVAIV.map(function (c) {
+        return {
+          value: c.value,
+          label: translator.t("drawingResponse.".concat(c.label), {
+            lng: language
+          })
+        };
+      });
+      this.setState({
+        fillColorList: [{
+          value: 'transparent',
+          label: translator.t('drawingResponse.noFill', {
+            lng: language
+          })
+        }, {
+          value: 'lightblue',
+          label: translator.t('drawingResponse.lightblue', {
+            lng: language
+          })
+        }, {
+          value: 'lightyellow',
+          label: translator.t('drawingResponse.lightyellow', {
+            lng: language
+          })
+        }].concat((0, _toConsumableArray2["default"])(translatedROGVAIV)),
+        paintColor: translator.t('drawingResponse.red', {
+          lng: language
+        }),
+        outlineColorList: translatedROGVAIV,
+        paintColorList: translatedROGVAIV
+      });
+    }
+  }, {
+    key: "UNSAFE_componentWillReceiveProps",
+    value: function UNSAFE_componentWillReceiveProps(props) {
+      var language = props.language;
+      this.setTranslatedState(language);
+    }
+  }, {
     key: "setDimensions",
     value: function setDimensions() {
       var _this2 = this;
@@ -139,6 +183,8 @@ var Container = /*#__PURE__*/function (_Component) {
     value: function componentDidMount() {
       var _this3 = this;
 
+      var language = this.props.language;
+      this.setTranslatedState(language);
       this.setDimensions();
       this.observer = new MutationObserver(function (mutations) {
         mutations.forEach(function () {
@@ -186,13 +232,14 @@ var Container = /*#__PURE__*/function (_Component) {
     value: function handleMakeToolActive(tool) {
       var TextEntry = this.state.TextEntry;
       var type = tool.type;
+      var language = this.props.language;
 
       if (type !== 'Text') {
         this.setState({
           toolActive: tool
         });
       } else {
-        TextEntry.addNewTextEntry(); // Force update
+        TextEntry.addNewTextEntry(language); // Force update
 
         this.setState({
           updatedAt: new Date()
@@ -217,7 +264,8 @@ var Container = /*#__PURE__*/function (_Component) {
           imageDimensions = _this$props.imageDimensions,
           onSessionChange = _this$props.onSessionChange,
           session = _this$props.session,
-          backgroundImageEnabled = _this$props.backgroundImageEnabled;
+          backgroundImageEnabled = _this$props.backgroundImageEnabled,
+          language = _this$props.language;
       var _this$state = this.state,
           drawableDimensions = _this$state.drawableDimensions,
           toolActive = _this$state.toolActive,
@@ -246,7 +294,8 @@ var Container = /*#__PURE__*/function (_Component) {
         },
         onPaintColorChange: function onPaintColorChange(color) {
           return _this4.handleColorChange('paint', color);
-        }
+        },
+        language: language
       }), /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.box
       }, /*#__PURE__*/_react["default"].createElement("div", {
@@ -288,7 +337,8 @@ var Container = /*#__PURE__*/function (_Component) {
         imageDimensions: imageDimensions,
         toolActive: toolActive,
         TextEntry: TextEntry,
-        backgroundImageEnabled: backgroundImageEnabled
+        backgroundImageEnabled: backgroundImageEnabled,
+        language: language
       }))));
     }
   }]);
@@ -303,7 +353,8 @@ exports.Container = Container;
   onSessionChange: _propTypes["default"].func.isRequired,
   imageDimensions: _propTypes["default"].object.isRequired,
   imageUrl: _propTypes["default"].string.isRequired,
-  backgroundImageEnabled: _propTypes["default"].bool.isRequired
+  backgroundImageEnabled: _propTypes["default"].bool.isRequired,
+  language: _propTypes["default"].string
 });
 
 var styles = function styles(theme) {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/drawing-response/container.jsx"],"names":["TOOLS","constants","tools","ROGVAIV","map","c","value","label","Container","props","type","disabled","toolActive","state","TextEntry","DrawableText","scale","drawableDimensions","height","width","fillColor","fillColorList","outlineColor","outlineColorList","paintColor","paintColorList","checkExist","setInterval","drawable","getBoundingClientRect","setState","e","console","warn","clearInterval","setDimensions","observer","MutationObserver","mutations","forEach","target","document","getElementById","style","cssText","zoom","substring","indexOf","lastIndexOf","zoomParsed","replace","newScale","parseFloat","observe","attributes","attributeFilter","removeEventListeners","disconnect","tool","addNewTextEntry","updatedAt","Date","color","cType","classes","imageUrl","imageDimensions","onSessionChange","session","backgroundImageEnabled","heightToUse","base","handleColorChange","box","toolbar","icon","checkIfToolIsDisabled","handleMakeToolActive","drawableHeight","maxHeight","Component","PropTypes","object","isRequired","bool","func","string","styles","theme","marginTop","spacing","unit","border","borderRadius","backgroundColor","minHeight","borderBottom","borderTopLeftRadius","borderTopRightRadius","padding","boxSizing","maxWidth","marginBottom"],"mappings":"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","sourcesContent":["import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\n\nimport constants from './constants';\nimport Button from './button';\nimport DrawablePalette from './drawable-palette';\nimport DrawableMain from './drawable-main';\nimport DrawableText from './drawable-text';\nimport Icon from './icon';\n\nconst { tools: TOOLS } = constants;\n\nconst ROGVAIV = ['red', 'orange', 'yellow', 'violet', 'blue', 'green', 'white', 'black'].map((c) => ({\n  value: c,\n  label: c,\n}));\n\nexport class Container extends Component {\n  static propTypes = {\n    classes: PropTypes.object.isRequired,\n    disabled: PropTypes.bool,\n    session: PropTypes.object.isRequired,\n    onSessionChange: PropTypes.func.isRequired,\n    imageDimensions: PropTypes.object.isRequired,\n    imageUrl: PropTypes.string.isRequired,\n    backgroundImageEnabled: PropTypes.bool.isRequired,\n  };\n\n  constructor(props) {\n    super(props);\n    const TextEntry = new DrawableText();\n\n    this.state = {\n      scale: 1,\n      drawableDimensions: {\n        height: 0,\n        width: 0,\n      },\n      toolActive: TOOLS[0],\n      fillColor: 'white',\n      fillColorList: [\n        { value: 'transparent', label: 'no fill' },\n        { value: 'lightblue', label: 'light blue' },\n        { value: 'lightyellow', label: 'light yellow' },\n        ...ROGVAIV,\n      ],\n      outlineColor: 'black',\n      outlineColorList: ROGVAIV,\n      paintColor: 'red',\n      paintColorList: ROGVAIV,\n      TextEntry,\n    };\n  }\n\n  setDimensions() {\n    const checkExist = setInterval(() => {\n      try {\n        const { height, width } = this.drawable.getBoundingClientRect();\n        if (height !== 0 && width !== 0) {\n          this.setState({\n            drawableDimensions: {\n              height,\n              width,\n            },\n          });\n        }\n      } catch (e) {\n        // eslint-disable-next-line no-console\n        console.warn('setDimensions Error: ', e);\n      } finally {\n        clearInterval(checkExist);\n      }\n    }, 100);\n  }\n\n  componentDidMount() {\n    this.setDimensions();\n\n    this.observer = new MutationObserver((mutations) => {\n      mutations.forEach(() => {\n        const target = document.getElementById('question-container')?.style?.cssText;\n        const zoom = target?.substring(target.indexOf('--pie-zoom') + 11, target.lastIndexOf('%'));\n        const zoomParsed = zoom?.replace(/\\s/g, '');\n\n        if (zoomParsed) {\n          const newScale = parseFloat(zoomParsed) / 100;\n          if (newScale !== this.state.scale) {\n            this.setState({\n              scale: parseFloat(zoomParsed) / 100,\n            });\n          }\n        } else if (!zoomParsed && this.state.scale !== 1) {\n          this.setState({\n            scale: 1,\n          });\n        }\n      });\n    });\n\n    const target = document.getElementById('question-container');\n    if (target) {\n      this.observer.observe(target, { attributes: true, attributeFilter: ['style'] });\n    }\n  }\n\n  componentWillUnmount() {\n    const { TextEntry } = this.state;\n\n    TextEntry.removeEventListeners();\n    this.observer?.disconnect();\n  }\n\n  handleMakeToolActive(tool) {\n    const { TextEntry } = this.state;\n    const { type } = tool;\n\n    if (type !== 'Text') {\n      this.setState({\n        toolActive: tool,\n      });\n    } else {\n      TextEntry.addNewTextEntry();\n      // Force update\n      this.setState({\n        updatedAt: new Date(),\n      });\n    }\n  }\n\n  checkIfToolIsDisabled = (type) => {\n    if (this.props.disabled) return true;\n\n    const { toolActive } = this.state;\n    // Text will never be disabled since on each \"Text Entry\" click a new text is added\n    if (type === 'Text') {\n      return false;\n    }\n    return type === toolActive.type;\n  };\n\n  handleColorChange(type, color) {\n    const cType = `${type}Color`;\n    this.setState({\n      [cType]: color,\n    });\n  }\n\n  render() {\n    const { classes, disabled, imageUrl, imageDimensions, onSessionChange, session, backgroundImageEnabled } =\n      this.props;\n    const {\n      drawableDimensions,\n      toolActive,\n      fillColor,\n      fillColorList,\n      outlineColor,\n      outlineColorList,\n      paintColor,\n      paintColorList,\n      TextEntry,\n    } = this.state;\n\n    const heightToUse = drawableDimensions.height * this.state.scale;\n\n    return (\n      <div className={classes.base}>\n        {!disabled && (\n          <DrawablePalette\n            fillColor={fillColor}\n            fillList={fillColorList}\n            outlineColor={outlineColor}\n            outlineList={outlineColorList}\n            paintColor={paintColor}\n            paintList={paintColorList}\n            onFillColorChange={(color) => this.handleColorChange('fill', color)}\n            onOutlineColorChange={(color) => this.handleColorChange('outline', color)}\n            onPaintColorChange={(color) => this.handleColorChange('paint', color)}\n          />\n        )}\n\n        <div className={classes.box}>\n          <div className={classes.toolbar}>\n            {TOOLS.map((tool) => {\n              const { type, label, icon } = tool;\n\n              return (\n                <Button\n                  title={label}\n                  key={type}\n                  disabled={this.checkIfToolIsDisabled(type)}\n                  onClick={() => this.handleMakeToolActive(tool)}\n                  label={<Icon path={icon} />}\n                />\n              );\n            })}\n          </div>\n\n          <div\n            ref={(drawable) => {\n              this.drawable = drawable;\n            }}\n            className={classes.drawableHeight}\n            style={{ height: heightToUse, maxHeight: heightToUse }}\n          >\n            <DrawableMain\n              scale={this.state.scale}\n              session={session}\n              disabled={disabled}\n              onSessionChange={onSessionChange}\n              fillColor={fillColor}\n              outlineColor={outlineColor}\n              paintColor={paintColor}\n              imageUrl={imageUrl}\n              drawableDimensions={drawableDimensions}\n              imageDimensions={imageDimensions}\n              toolActive={toolActive}\n              TextEntry={TextEntry}\n              backgroundImageEnabled={backgroundImageEnabled}\n            />\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n\nconst styles = (theme) => ({\n  base: {\n    marginTop: theme.spacing.unit * 2,\n  },\n  box: {\n    border: '1px solid #E0E1E6',\n    borderRadius: '5px',\n    marginTop: theme.spacing.unit * 2,\n    backgroundColor: '#ECEDF1',\n  },\n  drawableHeight: {\n    minHeight: 350,\n    backgroundColor: '#fff',\n  },\n  toolbar: {\n    borderBottom: '1px solid #E0E1E6',\n    borderTopLeftRadius: '5px',\n    borderTopRightRadius: '5px',\n    padding: '12px 8px 4px',\n    boxSizing: 'border-box',\n    maxWidth: 'calc(100% - 163px)', // 163px is the width set on undoControls\n    '& button': {\n      marginBottom: theme.spacing.unit,\n    },\n  },\n});\n\nexport default withStyles(styles)(Container);\n"],"file":"container.js"}
+{"version":3,"sources":["../../src/drawing-response/container.jsx"],"names":["TOOLS","constants","tools","translator","Translator","ROGVAIV","map","c","value","label","Container","props","type","disabled","toolActive","state","TextEntry","DrawableText","scale","drawableDimensions","height","width","fillColor","fillColorList","outlineColor","outlineColorList","paintColor","paintColorList","language","translatedROGVAIV","t","lng","setState","setTranslatedState","checkExist","setInterval","drawable","getBoundingClientRect","e","console","warn","clearInterval","setDimensions","observer","MutationObserver","mutations","forEach","target","document","getElementById","style","cssText","zoom","substring","indexOf","lastIndexOf","zoomParsed","replace","newScale","parseFloat","observe","attributes","attributeFilter","removeEventListeners","disconnect","tool","addNewTextEntry","updatedAt","Date","color","cType","classes","imageUrl","imageDimensions","onSessionChange","session","backgroundImageEnabled","heightToUse","base","handleColorChange","box","toolbar","icon","checkIfToolIsDisabled","handleMakeToolActive","drawableHeight","maxHeight","Component","PropTypes","object","isRequired","bool","func","string","styles","theme","marginTop","spacing","unit","border","borderRadius","backgroundColor","minHeight","borderBottom","borderTopLeftRadius","borderTopRightRadius","padding","boxSizing","maxWidth","marginBottom"],"mappings":"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","sourcesContent":["import React, { Component } from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\nimport Translator from '@pie-lib/translator';\n\nimport constants from './constants';\nimport Button from './button';\nimport DrawablePalette from './drawable-palette';\nimport DrawableMain from './drawable-main';\nimport DrawableText from './drawable-text';\nimport Icon from './icon';\n\nconst { tools: TOOLS } = constants;\nconst { translator } = Translator;\n\nconst ROGVAIV = ['red', 'orange', 'yellow', 'violet', 'blue', 'green', 'white', 'black'].map((c) => ({\n  value: c,\n  label: c,\n}));\n\nexport class Container extends Component {\n  static propTypes = {\n    classes: PropTypes.object.isRequired,\n    disabled: PropTypes.bool,\n    session: PropTypes.object.isRequired,\n    onSessionChange: PropTypes.func.isRequired,\n    imageDimensions: PropTypes.object.isRequired,\n    imageUrl: PropTypes.string.isRequired,\n    backgroundImageEnabled: PropTypes.bool.isRequired,\n    language: PropTypes.string,\n  };\n\n  constructor(props) {\n    super(props);\n    const TextEntry = new DrawableText();\n\n    this.state = {\n      scale: 1,\n      drawableDimensions: {\n        height: 0,\n        width: 0,\n      },\n      toolActive: TOOLS[0],\n      fillColor: 'white',\n      fillColorList: [\n        { value: 'transparent', label: 'no fill' },\n        { value: 'lightblue', label: 'light blue' },\n        { value: 'lightyellow', label: 'light yellow' },\n        ...ROGVAIV,\n      ],\n      outlineColor: 'black',\n      outlineColorList: ROGVAIV,\n      paintColor: 'red',\n      paintColorList: ROGVAIV,\n      TextEntry,\n    };\n  }\n\n  setTranslatedState(language) {\n    const translatedROGVAIV = ROGVAIV.map((c) => ({\n      value: c.value,\n      label: translator.t(`drawingResponse.${c.label}`, { lng: language }),\n    }));\n\n    this.setState({\n      fillColorList: [\n        { value: 'transparent', label: translator.t('drawingResponse.noFill', { lng: language }), },\n        { value: 'lightblue', label: translator.t('drawingResponse.lightblue', { lng: language }), },\n        { value: 'lightyellow', label: translator.t('drawingResponse.lightyellow', { lng: language }), },\n        ...translatedROGVAIV,\n      ],\n      paintColor: translator.t('drawingResponse.red', { lng: language }),\n      outlineColorList: translatedROGVAIV,\n      paintColorList: translatedROGVAIV,\n    });\n  }\n\n  UNSAFE_componentWillReceiveProps(props) {\n    const { language } = props;\n    this.setTranslatedState(language);\n  }\n\n  setDimensions() {\n    const checkExist = setInterval(() => {\n      try {\n        const { height, width } = this.drawable.getBoundingClientRect();\n        if (height !== 0 && width !== 0) {\n          this.setState({\n            drawableDimensions: {\n              height,\n              width,\n            },\n          });\n        }\n      } catch (e) {\n        // eslint-disable-next-line no-console\n        console.warn('setDimensions Error: ', e);\n      } finally {\n        clearInterval(checkExist);\n      }\n    }, 100);\n  }\n\n  componentDidMount() {\n    const { language } = this.props;\n    this.setTranslatedState(language);\n\n    this.setDimensions();\n\n    this.observer = new MutationObserver((mutations) => {\n      mutations.forEach(() => {\n        const target = document.getElementById('question-container')?.style?.cssText;\n        const zoom = target?.substring(target.indexOf('--pie-zoom') + 11, target.lastIndexOf('%'));\n        const zoomParsed = zoom?.replace(/\\s/g, '');\n\n        if (zoomParsed) {\n          const newScale = parseFloat(zoomParsed) / 100;\n          if (newScale !== this.state.scale) {\n            this.setState({\n              scale: parseFloat(zoomParsed) / 100,\n            });\n          }\n        } else if (!zoomParsed && this.state.scale !== 1) {\n          this.setState({\n            scale: 1,\n          });\n        }\n      });\n    });\n\n    const target = document.getElementById('question-container');\n    if (target) {\n      this.observer.observe(target, { attributes: true, attributeFilter: ['style'] });\n    }\n  }\n\n  componentWillUnmount() {\n    const { TextEntry } = this.state;\n\n    TextEntry.removeEventListeners();\n    this.observer?.disconnect();\n  }\n\n  handleMakeToolActive(tool) {\n    const { TextEntry } = this.state;\n    const { type } = tool;\n    const { language } = this.props;\n\n    if (type !== 'Text') {\n      this.setState({\n        toolActive: tool,\n      });\n    } else {\n      TextEntry.addNewTextEntry(language);\n      // Force update\n      this.setState({\n        updatedAt: new Date(),\n      });\n    }\n  }\n\n  checkIfToolIsDisabled = (type) => {\n    if (this.props.disabled) return true;\n\n    const { toolActive } = this.state;\n    // Text will never be disabled since on each \"Text Entry\" click a new text is added\n    if (type === 'Text') {\n      return false;\n    }\n    return type === toolActive.type;\n  };\n\n  handleColorChange(type, color) {\n    const cType = `${type}Color`;\n    this.setState({\n      [cType]: color,\n    });\n  }\n\n  render() {\n    const { classes, disabled, imageUrl, imageDimensions, onSessionChange, session, backgroundImageEnabled, language } =\n      this.props;\n    const {\n      drawableDimensions,\n      toolActive,\n      fillColor,\n      fillColorList,\n      outlineColor,\n      outlineColorList,\n      paintColor,\n      paintColorList,\n      TextEntry,\n    } = this.state;\n\n    const heightToUse = drawableDimensions.height * this.state.scale;\n\n    return (\n      <div className={classes.base}>\n        {!disabled && (\n          <DrawablePalette\n            fillColor={fillColor}\n            fillList={fillColorList}\n            outlineColor={outlineColor}\n            outlineList={outlineColorList}\n            paintColor={paintColor}\n            paintList={paintColorList}\n            onFillColorChange={(color) => this.handleColorChange('fill', color)}\n            onOutlineColorChange={(color) => this.handleColorChange('outline', color)}\n            onPaintColorChange={(color) => this.handleColorChange('paint', color)}\n            language={language}\n          />\n        )}\n\n        <div className={classes.box}>\n          <div className={classes.toolbar}>\n            {TOOLS.map((tool) => {\n              const { type, label, icon } = tool;\n\n              return (\n                <Button\n                  title={label}\n                  key={type}\n                  disabled={this.checkIfToolIsDisabled(type)}\n                  onClick={() => this.handleMakeToolActive(tool)}\n                  label={<Icon path={icon}/>}\n                />\n              );\n            })}\n          </div>\n\n          <div\n            ref={(drawable) => {\n              this.drawable = drawable;\n            }}\n            className={classes.drawableHeight}\n            style={{ height: heightToUse, maxHeight: heightToUse }}\n          >\n            <DrawableMain\n              scale={this.state.scale}\n              session={session}\n              disabled={disabled}\n              onSessionChange={onSessionChange}\n              fillColor={fillColor}\n              outlineColor={outlineColor}\n              paintColor={paintColor}\n              imageUrl={imageUrl}\n              drawableDimensions={drawableDimensions}\n              imageDimensions={imageDimensions}\n              toolActive={toolActive}\n              TextEntry={TextEntry}\n              backgroundImageEnabled={backgroundImageEnabled}\n              language={language}\n            />\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n\nconst styles = (theme) => ({\n  base: {\n    marginTop: theme.spacing.unit * 2,\n  },\n  box: {\n    border: '1px solid #E0E1E6',\n    borderRadius: '5px',\n    marginTop: theme.spacing.unit * 2,\n    backgroundColor: '#ECEDF1',\n  },\n  drawableHeight: {\n    minHeight: 350,\n    backgroundColor: '#fff',\n  },\n  toolbar: {\n    borderBottom: '1px solid #E0E1E6',\n    borderTopLeftRadius: '5px',\n    borderTopRightRadius: '5px',\n    padding: '12px 8px 4px',\n    boxSizing: 'border-box',\n    maxWidth: 'calc(100% - 163px)', // 163px is the width set on undoControls\n    '& button': {\n      marginBottom: theme.spacing.unit,\n    },\n  },\n});\n\nexport default withStyles(styles)(Container);\n"],"file":"container.js"}

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

@@ -41,6 +41,8 @@ var _reactKonva = require("react-konva");
 
 var _styles = require("@material-ui/core/styles");
 
+var _translator = _interopRequireDefault(require("@pie-lib/translator"));
+
 var _drawableImage = _interopRequireDefault(require("./drawable-image"));
 
 var _button = _interopRequireDefault(require("./button"));
@@ -55,6 +57,8 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
+var translator = _translator["default"].translator;
+
 var DrawableMain = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2["default"])(DrawableMain, _React$Component);
 
@@ -267,7 +271,8 @@ var DrawableMain = /*#__PURE__*/function (_React$Component) {
           _this$props3$backgrou = _this$props3.backgroundImageEnabled,
           backgroundImageEnabled = _this$props3$backgrou === void 0 ? true : _this$props3$backgrou,
           type = _this$props3.toolActive.type,
-          scale = _this$props3.scale;
+          scale = _this$props3.scale,
+          language = _this$props3.language;
       var _this$state3 = this.state,
           isOver = _this$state3.isOver,
           newDrawable = _this$state3.newDrawable;
@@ -318,11 +323,15 @@ var DrawableMain = /*#__PURE__*/function (_React$Component) {
       }, /*#__PURE__*/_react["default"].createElement(_button["default"], {
         disabled: disabled,
         onClick: this.handleUndo,
-        label: "Undo"
+        label: translator.t('common:undo', {
+          lng: language
+        })
       }), /*#__PURE__*/_react["default"].createElement(_button["default"], {
         disabled: disabled,
         onClick: this.handleClearAll,
-        label: "Clear all"
+        label: translator.t('common:clearAll', {
+          lng: language
+        })
       })), /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.base
       }, backgroundImageEnabled && imageUrl && /*#__PURE__*/_react["default"].createElement(_drawableImage["default"], {
@@ -378,7 +387,7 @@ var styles = function styles() {
     },
     undoControls: {
       marginTop: -43,
-      width: 172
+      marginRight: 10
     }
   };
 };
@@ -397,7 +406,8 @@ DrawableMain.propTypes = {
   toolActive: _propTypes["default"].object.isRequired,
   session: _propTypes["default"].object.isRequired,
   backgroundImageEnabled: _propTypes["default"].bool.isRequired,
-  scale: _propTypes["default"].number.isRequired
+  scale: _propTypes["default"].number.isRequired,
+  language: _propTypes["default"].string
 };
 
 var _default = (0, _styles.withStyles)(styles)(DrawableMain);

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((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"}
+{"version":3,"sources":["../../src/drawing-response/drawable-main.jsx"],"names":["translator","Translator","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","language","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","t","lng","handleClearAll","base","renderTextareas","ref","active","layer","key","render","React","Component","styles","display","flexWrap","justifyContent","position","left","touchAction","top","cursor","marginTop","marginRight","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';\nimport Translator from '@pie-lib/translator';\n\nconst { translator } = Translator;\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      language\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={translator.t('common:undo', { lng: language })} />\n          <Button disabled={disabled} onClick={this.handleClearAll} label={translator.t('common:clearAll', { lng: language })} />\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    marginRight: 10,\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  language: PropTypes.string,\n};\n\nexport default withStyles(styles)(DrawableMain);\n"],"file":"drawable-main.js"}

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

@@ -35,11 +35,14 @@ var _styles = require("@material-ui/core/styles");
 
 var _classnames2 = _interopRequireDefault(require("classnames"));
 
+var _translator = _interopRequireDefault(require("@pie-lib/translator"));
+
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
-// TODO: Change Palette so will render inputs and colors dynamically
+var translator = _translator["default"].translator; // TODO: Change Palette so will render inputs and colors dynamically
+
 var Palette = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2["default"])(Palette, _React$Component);
 
@@ -83,11 +86,14 @@ var Palette = /*#__PURE__*/function (_React$Component) {
           fillColor = _this$props2.fillColor,
           outlineColor = _this$props2.outlineColor,
           fillList = _this$props2.fillList,
-          outlineList = _this$props2.outlineList;
+          outlineList = _this$props2.outlineList,
+          language = _this$props2.language;
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: classes.base
       }, /*#__PURE__*/_react["default"].createElement(_renderUi.InputContainer, {
-        label: "Fill Color",
+        label: translator.t('drawingResponse.fillColor', {
+          lng: language
+        }),
         className: classes.input
       }, /*#__PURE__*/_react["default"].createElement(_Select["default"], {
         className: classes.select,
@@ -105,7 +111,9 @@ var Palette = /*#__PURE__*/function (_React$Component) {
           }
         }, label);
       }))), /*#__PURE__*/_react["default"].createElement(_renderUi.InputContainer, {
-        label: "Outline Color",
+        label: translator.t('drawingResponse.outlineColor', {
+          lng: language
+        }),
         className: classes.input
       }, /*#__PURE__*/_react["default"].createElement(_Select["default"], {
         className: classes.select,
@@ -165,7 +173,8 @@ Palette.propTypes = {
   onOutlineColorChange: _propTypes["default"].func.isRequired,
   onPaintColorChange: _propTypes["default"].func.isRequired,
   outlineColor: _propTypes["default"].string.isRequired,
-  outlineList: _propTypes["default"].array.isRequired
+  outlineList: _propTypes["default"].array.isRequired,
+  language: _propTypes["default"].string
 };
 
 var _default = (0, _styles.withStyles)(styles)(Palette);

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/drawing-response/drawable-palette.jsx"],"names":["Palette","name","event","value","target","props","onFillColorChange","onOutlineColorChange","onPaintColorChange","classes","fillColor","outlineColor","fillList","outlineList","base","input","select","onChange","map","label","item","blackColorItem","backgroundColor","border","React","Component","styles","theme","marginTop","spacing","unit","display","flex","fontSize","width","borderRadius","height","marginLeft","marginRight","color","palette","background","paper","transform","propTypes","PropTypes","object","isRequired","string","array","func"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { InputContainer } from '@pie-lib/render-ui';\nimport Select from '@material-ui/core/Select';\nimport MenuItem from '@material-ui/core/MenuItem';\nimport { withStyles } from '@material-ui/core/styles';\nimport classnames from 'classnames';\n\n// TODO: Change Palette so will render inputs and colors dynamically\nclass Palette extends React.Component {\n  onChange = (name) => (event) => {\n    const { value } = event.target;\n    const { onFillColorChange, onOutlineColorChange, onPaintColorChange } = this.props;\n\n    if (name === 'fill') {\n      onFillColorChange(value);\n    } else if (name === 'outline') {\n      onOutlineColorChange(value);\n    } else {\n      onPaintColorChange(value);\n    }\n  };\n\n  render() {\n    const { classes, fillColor, outlineColor, fillList, outlineList } = this.props;\n\n    return (\n      <div className={classes.base}>\n        <InputContainer label=\"Fill Color\" className={classes.input}>\n          <Select className={classes.select} onChange={this.onChange('fill')} value={fillColor}>\n            {fillList.map(({ value, label }) => (\n              <MenuItem\n                key={value}\n                value={value}\n                className={classnames(classes.item, {\n                  [classes.blackColorItem]: value === 'black',\n                })}\n                style={{ backgroundColor: value }}\n              >\n                {label}\n              </MenuItem>\n            ))}\n          </Select>\n        </InputContainer>\n\n        <InputContainer label=\"Outline Color\" className={classes.input}>\n          <Select className={classes.select} onChange={this.onChange('outline')} value={outlineColor}>\n            {outlineList.map(({ value, label }) => (\n              <MenuItem key={value} value={value} className={classes.item} style={{ border: `2px solid ${value}` }}>\n                {label}\n              </MenuItem>\n            ))}\n          </Select>\n        </InputContainer>\n      </div>\n    );\n  }\n}\n\nconst styles = (theme) => ({\n  base: {\n    marginTop: theme.spacing.unit * 2,\n    display: 'flex',\n  },\n  input: {\n    flex: 1,\n    fontSize: 'inherit',\n    width: '90%',\n  },\n  item: {\n    borderRadius: '2px',\n    fontSize: 'inherit',\n    height: '22px',\n    marginLeft: theme.spacing.unit * 2,\n    marginRight: theme.spacing.unit * 2,\n    marginTop: theme.spacing.unit * 2,\n  },\n  blackColorItem: {\n    color: theme.palette.background.paper,\n  },\n  select: {\n    fontSize: 'inherit',\n    transform: 'translate(0%, 40%)',\n  },\n});\n\nPalette.propTypes = {\n  classes: PropTypes.object.isRequired,\n  fillColor: PropTypes.string.isRequired,\n  fillList: PropTypes.array.isRequired,\n  onFillColorChange: PropTypes.func.isRequired,\n  onOutlineColorChange: PropTypes.func.isRequired,\n  onPaintColorChange: PropTypes.func.isRequired,\n  outlineColor: PropTypes.string.isRequired,\n  outlineList: PropTypes.array.isRequired,\n};\n\nexport default withStyles(styles)(Palette);\n"],"file":"drawable-palette.js"}
+{"version":3,"sources":["../../src/drawing-response/drawable-palette.jsx"],"names":["translator","Translator","Palette","name","event","value","target","props","onFillColorChange","onOutlineColorChange","onPaintColorChange","classes","fillColor","outlineColor","fillList","outlineList","language","base","t","lng","input","select","onChange","map","label","item","blackColorItem","backgroundColor","border","React","Component","styles","theme","marginTop","spacing","unit","display","flex","fontSize","width","borderRadius","height","marginLeft","marginRight","color","palette","background","paper","transform","propTypes","PropTypes","object","isRequired","string","array","func"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { InputContainer } from '@pie-lib/render-ui';\nimport Select from '@material-ui/core/Select';\nimport MenuItem from '@material-ui/core/MenuItem';\nimport { withStyles } from '@material-ui/core/styles';\nimport classnames from 'classnames';\nimport Translator from '@pie-lib/translator';\n\nconst { translator } = Translator;\n\n// TODO: Change Palette so will render inputs and colors dynamically\nclass Palette extends React.Component {\n  onChange = (name) => (event) => {\n    const { value } = event.target;\n    const { onFillColorChange, onOutlineColorChange, onPaintColorChange } = this.props;\n\n    if (name === 'fill') {\n      onFillColorChange(value);\n    } else if (name === 'outline') {\n      onOutlineColorChange(value);\n    } else {\n      onPaintColorChange(value);\n    }\n  };\n\n  render() {\n    const { classes, fillColor, outlineColor, fillList, outlineList, language } = this.props;\n\n    return (\n      <div className={classes.base}>\n        <InputContainer label={translator.t('drawingResponse.fillColor', { lng: language })} className={classes.input}>\n          <Select className={classes.select} onChange={this.onChange('fill')} value={fillColor}>\n            {fillList.map(({ value, label }) => (\n              <MenuItem\n                key={value}\n                value={value}\n                className={classnames(classes.item, {\n                  [classes.blackColorItem]: value === 'black',\n                })}\n                style={{ backgroundColor: value }}\n              >\n                {label}\n              </MenuItem>\n            ))}\n          </Select>\n        </InputContainer>\n\n        <InputContainer label={translator.t('drawingResponse.outlineColor', { lng: language })} className={classes.input}>\n          <Select className={classes.select} onChange={this.onChange('outline')} value={outlineColor}>\n            {outlineList.map(({ value, label }) => (\n              <MenuItem key={value} value={value} className={classes.item} style={{ border: `2px solid ${value}` }}>\n                {label}\n              </MenuItem>\n            ))}\n          </Select>\n        </InputContainer>\n      </div>\n    );\n  }\n}\n\nconst styles = (theme) => ({\n  base: {\n    marginTop: theme.spacing.unit * 2,\n    display: 'flex',\n  },\n  input: {\n    flex: 1,\n    fontSize: 'inherit',\n    width: '90%',\n  },\n  item: {\n    borderRadius: '2px',\n    fontSize: 'inherit',\n    height: '22px',\n    marginLeft: theme.spacing.unit * 2,\n    marginRight: theme.spacing.unit * 2,\n    marginTop: theme.spacing.unit * 2,\n  },\n  blackColorItem: {\n    color: theme.palette.background.paper,\n  },\n  select: {\n    fontSize: 'inherit',\n    transform: 'translate(0%, 40%)',\n  },\n});\n\nPalette.propTypes = {\n  classes: PropTypes.object.isRequired,\n  fillColor: PropTypes.string.isRequired,\n  fillList: PropTypes.array.isRequired,\n  onFillColorChange: PropTypes.func.isRequired,\n  onOutlineColorChange: PropTypes.func.isRequired,\n  onPaintColorChange: PropTypes.func.isRequired,\n  outlineColor: PropTypes.string.isRequired,\n  outlineList: PropTypes.array.isRequired,\n  language: PropTypes.string,\n};\n\nexport default withStyles(styles)(Palette);\n"],"file":"drawable-palette.js"}

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

@@ -19,12 +19,16 @@ var _react = _interopRequireDefault(require("react"));
 
 var _reactKonva = require("react-konva");
 
+var _translator = _interopRequireDefault(require("@pie-lib/translator"));
+
 var _drawableTransformer = _interopRequireDefault(require("./drawable-transformer"));
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
+var translator = _translator["default"].translator;
+
 var generateId = function generateId() {
   return Math.random().toString(36).substring(2) + new Date().getTime().toString(36);
 };
@@ -46,13 +50,15 @@ var TextDrawable = /*#__PURE__*/function () {
 
       _this.props.forceUpdate();
     });
-    (0, _defineProperty2["default"])(this, "addNewTextEntry", function () {
+    (0, _defineProperty2["default"])(this, "addNewTextEntry", function (language) {
       var all = _this.all;
       var id = generateId();
       all.push({
         id: id,
         isDefault: true,
-        label: 'Double click to edit this text. Press Enter to submit.',
+        label: translator.t('drawingResponse.onDoubleClick', {
+          lng: language
+        }),
         width: 200,
         x: (all.length + 1) * 5 + 50,
         y: (all.length + 1) * 5 + 50,