@pie-element/drawing-response 12.1.2-next.5 → 12.1.3

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

@@ -0,0 +1,41 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styles = require("@mui/material/styles");
+const ImageContainer = (0, _styles.styled)('div')({
+  position: 'relative',
+  width: 'fit-content'
+});
+const Image = (0, _styles.styled)('img')({
+  alignItems: 'center',
+  display: 'flex',
+  justifyContent: 'center'
+});
+const DrawableImage = ({
+  url,
+  dimensions: {
+    height,
+    width
+  }
+}) => /*#__PURE__*/_react.default.createElement(ImageContainer, null, /*#__PURE__*/_react.default.createElement(Image, {
+  alt: "drawing-response-image",
+  src: url,
+  style: {
+    height,
+    maxWidth: width,
+    maxHeight: 350,
+    width
+  }
+}));
+DrawableImage.propTypes = {
+  dimensions: _propTypes.default.object.isRequired,
+  url: _propTypes.default.string.isRequired
+};
+var _default = exports.default = DrawableImage;
+//# sourceMappingURL=drawable-image.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"drawable-image.js","names":["_react","_interopRequireDefault","require","_propTypes","_styles","ImageContainer","styled","position","width","Image","alignItems","display","justifyContent","DrawableImage","url","dimensions","height","default","createElement","alt","src","style","maxWidth","maxHeight","propTypes","PropTypes","object","isRequired","string","_default","exports"],"sources":["../../src/drawing-response/drawable-image.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { styled } from '@mui/material/styles';\n\nconst ImageContainer = styled('div')({\n  position: 'relative',\n  width: 'fit-content',\n});\n\nconst Image = styled('img')({\n  alignItems: 'center',\n  display: 'flex',\n  justifyContent: 'center',\n});\n\nconst DrawableImage = ({ url, dimensions: { height, width } }) => (\n  <ImageContainer>\n    <Image\n      alt=\"drawing-response-image\"\n      src={url}\n      style={{\n        height,\n        maxWidth: width,\n        maxHeight: 350,\n        width,\n      }}\n    />\n  </ImageContainer>\n);\n\nDrawableImage.propTypes = {\n  dimensions: PropTypes.object.isRequired,\n  url: PropTypes.string.isRequired,\n};\n\nexport default DrawableImage;\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,OAAA,GAAAF,OAAA;AAEA,MAAMG,cAAc,GAAG,IAAAC,cAAM,EAAC,KAAK,CAAC,CAAC;EACnCC,QAAQ,EAAE,UAAU;EACpBC,KAAK,EAAE;AACT,CAAC,CAAC;AAEF,MAAMC,KAAK,GAAG,IAAAH,cAAM,EAAC,KAAK,CAAC,CAAC;EAC1BI,UAAU,EAAE,QAAQ;EACpBC,OAAO,EAAE,MAAM;EACfC,cAAc,EAAE;AAClB,CAAC,CAAC;AAEF,MAAMC,aAAa,GAAGA,CAAC;EAAEC,GAAG;EAAEC,UAAU,EAAE;IAAEC,MAAM;IAAER;EAAM;AAAE,CAAC,kBAC3DR,MAAA,CAAAiB,OAAA,CAAAC,aAAA,CAACb,cAAc,qBACbL,MAAA,CAAAiB,OAAA,CAAAC,aAAA,CAACT,KAAK;EACJU,GAAG,EAAC,wBAAwB;EAC5BC,GAAG,EAAEN,GAAI;EACTO,KAAK,EAAE;IACLL,MAAM;IACNM,QAAQ,EAAEd,KAAK;IACfe,SAAS,EAAE,GAAG;IACdf;EACF;AAAE,CACH,CACa,CACjB;AAEDK,aAAa,CAACW,SAAS,GAAG;EACxBT,UAAU,EAAEU,kBAAS,CAACC,MAAM,CAACC,UAAU;EACvCb,GAAG,EAAEW,kBAAS,CAACG,MAAM,CAACD;AACxB,CAAC;AAAC,IAAAE,QAAA,GAAAC,OAAA,CAAAb,OAAA,GAEaJ,aAAa","ignoreList":[]}

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

@@ -0,0 +1,75 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _reactKonva = require("react-konva");
+var _drawableHelper = _interopRequireDefault(require("./drawable-helper"));
+class LineDrawable extends _drawableHelper.default {
+  constructor(_props) {
+    super(_props, LineDrawable.TYPE);
+    (0, _defineProperty2.default)(this, "handleDragEnd", (props, event) => {
+      this.posX = event.target.getX();
+      this.posY = event.target.getY();
+      props.handleSessionChange();
+    });
+    const {
+      startx,
+      starty,
+      x,
+      y,
+      posX,
+      posY
+    } = _props;
+    this.x = x || startx;
+    this.y = y || starty;
+    this.posX = posX || 0;
+    this.posY = posY || 0;
+  }
+  registerMovement(x, y) {
+    this.x = x;
+    this.y = y;
+  }
+  handleOnClick(props) {
+    const {
+      paint,
+      paintColor,
+      forceUpdate
+    } = props;
+    if (paint) {
+      this.paintColor = paintColor;
+      forceUpdate();
+    }
+  }
+  render(props) {
+    const {
+      draggable,
+      key,
+      onMouseOverElement,
+      onMouseOutElement
+    } = props;
+    const points = [this.startx, this.starty, this.x, this.y];
+    return /*#__PURE__*/_react.default.createElement(_reactKonva.Arrow, {
+      key: key,
+      draggable: draggable,
+      points: points,
+      fill: this.paintColor || this.outlineColor,
+      onClick: () => this.handleOnClick(props),
+      stroke: this.paintColor || this.outlineColor,
+      onDragEnd: this.handleDragEnd.bind(this, props),
+      onMouseEnter: onMouseOverElement,
+      onMouseLeave: onMouseOutElement,
+      x: this.posX,
+      y: this.posY,
+      pointerWidth: 0,
+      pointerLength: 0
+    });
+  }
+}
+exports.default = LineDrawable;
+(0, _defineProperty2.default)(LineDrawable, "TYPE", 'LineDrawable');
+//# sourceMappingURL=drawable-line.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"drawable-line.js","names":["_react","_interopRequireDefault","require","_reactKonva","_drawableHelper","LineDrawable","DrawableHelper","constructor","props","TYPE","_defineProperty2","default","event","posX","target","getX","posY","getY","handleSessionChange","startx","starty","x","y","registerMovement","handleOnClick","paint","paintColor","forceUpdate","render","draggable","key","onMouseOverElement","onMouseOutElement","points","createElement","Arrow","fill","outlineColor","onClick","stroke","onDragEnd","handleDragEnd","bind","onMouseEnter","onMouseLeave","pointerWidth","pointerLength","exports"],"sources":["../../src/drawing-response/drawable-line.jsx"],"sourcesContent":["import React from 'react';\nimport { Arrow } from 'react-konva';\n\nimport DrawableHelper from './drawable-helper';\n\nexport default class LineDrawable extends DrawableHelper {\n  static TYPE = 'LineDrawable';\n\n  constructor(props) {\n    super(props, LineDrawable.TYPE);\n    const { startx, starty, x, y, posX, posY } = props;\n\n    this.x = x || startx;\n    this.y = y || starty;\n    this.posX = posX || 0;\n    this.posY = posY || 0;\n  }\n\n  registerMovement(x, y) {\n    this.x = x;\n    this.y = y;\n  }\n\n  handleOnClick(props) {\n    const { paint, paintColor, forceUpdate } = props;\n\n    if (paint) {\n      this.paintColor = paintColor;\n      forceUpdate();\n    }\n  }\n\n  handleDragEnd = (props, event) => {\n    this.posX = event.target.getX();\n    this.posY = event.target.getY();\n\n    props.handleSessionChange();\n  };\n\n  render(props) {\n    const { draggable, key, onMouseOverElement, onMouseOutElement } = props;\n    const points = [this.startx, this.starty, this.x, this.y];\n\n    return (\n      <Arrow\n        key={key}\n        draggable={draggable}\n        points={points}\n        fill={this.paintColor || this.outlineColor}\n        onClick={() => this.handleOnClick(props)}\n        stroke={this.paintColor || this.outlineColor}\n        onDragEnd={this.handleDragEnd.bind(this, props)}\n        onMouseEnter={onMouseOverElement}\n        onMouseLeave={onMouseOutElement}\n        x={this.posX}\n        y={this.posY}\n        pointerWidth={0}\n        pointerLength={0}\n      />\n    );\n  }\n}\n"],"mappings":";;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,WAAA,GAAAD,OAAA;AAEA,IAAAE,eAAA,GAAAH,sBAAA,CAAAC,OAAA;AAEe,MAAMG,YAAY,SAASC,uBAAc,CAAC;EAGvDC,WAAWA,CAACC,MAAK,EAAE;IACjB,KAAK,CAACA,MAAK,EAAEH,YAAY,CAACI,IAAI,CAAC;IAAC,IAAAC,gBAAA,CAAAC,OAAA,yBAuBlB,CAACH,KAAK,EAAEI,KAAK,KAAK;MAChC,IAAI,CAACC,IAAI,GAAGD,KAAK,CAACE,MAAM,CAACC,IAAI,CAAC,CAAC;MAC/B,IAAI,CAACC,IAAI,GAAGJ,KAAK,CAACE,MAAM,CAACG,IAAI,CAAC,CAAC;MAE/BT,KAAK,CAACU,mBAAmB,CAAC,CAAC;IAC7B,CAAC;IA3BC,MAAM;MAAEC,MAAM;MAAEC,MAAM;MAAEC,CAAC;MAAEC,CAAC;MAAET,IAAI;MAAEG;IAAK,CAAC,GAAGR,MAAK;IAElD,IAAI,CAACa,CAAC,GAAGA,CAAC,IAAIF,MAAM;IACpB,IAAI,CAACG,CAAC,GAAGA,CAAC,IAAIF,MAAM;IACpB,IAAI,CAACP,IAAI,GAAGA,IAAI,IAAI,CAAC;IACrB,IAAI,CAACG,IAAI,GAAGA,IAAI,IAAI,CAAC;EACvB;EAEAO,gBAAgBA,CAACF,CAAC,EAAEC,CAAC,EAAE;IACrB,IAAI,CAACD,CAAC,GAAGA,CAAC;IACV,IAAI,CAACC,CAAC,GAAGA,CAAC;EACZ;EAEAE,aAAaA,CAAChB,KAAK,EAAE;IACnB,MAAM;MAAEiB,KAAK;MAAEC,UAAU;MAAEC;IAAY,CAAC,GAAGnB,KAAK;IAEhD,IAAIiB,KAAK,EAAE;MACT,IAAI,CAACC,UAAU,GAAGA,UAAU;MAC5BC,WAAW,CAAC,CAAC;IACf;EACF;EASAC,MAAMA,CAACpB,KAAK,EAAE;IACZ,MAAM;MAAEqB,SAAS;MAAEC,GAAG;MAAEC,kBAAkB;MAAEC;IAAkB,CAAC,GAAGxB,KAAK;IACvE,MAAMyB,MAAM,GAAG,CAAC,IAAI,CAACd,MAAM,EAAE,IAAI,CAACC,MAAM,EAAE,IAAI,CAACC,CAAC,EAAE,IAAI,CAACC,CAAC,CAAC;IAEzD,oBACEtB,MAAA,CAAAW,OAAA,CAAAuB,aAAA,CAAC/B,WAAA,CAAAgC,KAAK;MACJL,GAAG,EAAEA,GAAI;MACTD,SAAS,EAAEA,SAAU;MACrBI,MAAM,EAAEA,MAAO;MACfG,IAAI,EAAE,IAAI,CAACV,UAAU,IAAI,IAAI,CAACW,YAAa;MAC3CC,OAAO,EAAEA,CAAA,KAAM,IAAI,CAACd,aAAa,CAAChB,KAAK,CAAE;MACzC+B,MAAM,EAAE,IAAI,CAACb,UAAU,IAAI,IAAI,CAACW,YAAa;MAC7CG,SAAS,EAAE,IAAI,CAACC,aAAa,CAACC,IAAI,CAAC,IAAI,EAAElC,KAAK,CAAE;MAChDmC,YAAY,EAAEZ,kBAAmB;MACjCa,YAAY,EAAEZ,iBAAkB;MAChCX,CAAC,EAAE,IAAI,CAACR,IAAK;MACbS,CAAC,EAAE,IAAI,CAACN,IAAK;MACb6B,YAAY,EAAE,CAAE;MAChBC,aAAa,EAAE;IAAE,CAClB,CAAC;EAEN;AACF;AAACC,OAAA,CAAApC,OAAA,GAAAN,YAAA;AAAA,IAAAK,gBAAA,CAAAC,OAAA,EAxDoBN,YAAY,UACjB,cAAc","ignoreList":[]}

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

@@ -0,0 +1,345 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.DrawableMain = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _lodashEs = require("lodash-es");
+var _reactKonva = require("react-konva");
+var _styles = require("@mui/material/styles");
+var _translator = _interopRequireDefault(require("@pie-lib/translator"));
+var _drawableImage = _interopRequireDefault(require("./drawable-image"));
+var _button = _interopRequireDefault(require("./button"));
+var _factory = _interopRequireDefault(require("./factory"));
+const {
+  translator
+} = _translator.default;
+const Wrapper = (0, _styles.styled)('div')({
+  display: 'flex',
+  flexWrap: 'wrap',
+  justifyContent: 'flex-end'
+});
+const Base = (0, _styles.styled)('div')({
+  position: 'relative',
+  width: '100%'
+});
+const UndoControls = (0, _styles.styled)('div')({
+  marginTop: -43,
+  marginRight: 10,
+  position: 'absolute'
+});
+class DrawableMain extends _react.default.Component {
+  constructor(props) {
+    super(props);
+    (0, _defineProperty2.default)(this, "handleSessionChange", () => {
+      const {
+        onSessionChange,
+        session,
+        TextEntry,
+        drawableDimensions
+      } = this.props;
+      const {
+        drawables
+      } = this.state;
+      const newSession = {
+        width: drawableDimensions.width,
+        drawables: drawables.map(d => d.toJson()),
+        texts: TextEntry.all.map(text => ({
+          ...text,
+          ...(TextEntry[`text_${text.id}`] && TextEntry[`text_${text.id}`].attrs),
+          value: TextEntry[`textarea_${text.id}`] && TextEntry[`textarea_${text.id}`].value
+        }))
+      };
+      if (!(0, _lodashEs.isEqual)(newSession, session)) {
+        onSessionChange({
+          ...session,
+          ...newSession
+        });
+      }
+    });
+    (0, _defineProperty2.default)(this, "onMouseOverElement", () => this.setState({
+      isOver: true
+    }));
+    (0, _defineProperty2.default)(this, "onMouseOutElement", () => this.setState({
+      isOver: false
+    }));
+    (0, _defineProperty2.default)(this, "handleMouseDown", e => {
+      // ONLY IF MOBILE?
+      document.body.style.overflow = 'hidden';
+      const {
+        newDrawable,
+        textIsSelected
+      } = this.state;
+      const {
+        toolActive,
+        fillColor,
+        outlineColor,
+        scale
+      } = this.props;
+      if (newDrawable.length === 0 && !textIsSelected) {
+        const stage = e.target.getStage();
+        if (!stage) return;
+        const {
+          x,
+          y
+        } = stage.getPointerPosition();
+        const newDrawable = (0, _factory.default)(toolActive.type, {
+          startx: x / scale,
+          starty: y / scale,
+          fillColor,
+          outlineColor,
+          createdAt: new Date()
+        });
+        this.setState({
+          newDrawable: [newDrawable]
+        });
+      }
+    });
+    (0, _defineProperty2.default)(this, "handleMouseUp", e => {
+      // ONLY IF MOBILE?
+      document.body.style.overflow = 'initial';
+      const {
+        newDrawable,
+        drawables
+      } = this.state;
+      const {
+        scale
+      } = this.props;
+      if (newDrawable.length === 1) {
+        const stage = e.target.getStage();
+        if (!stage) return;
+        const {
+          x,
+          y
+        } = stage.getPointerPosition();
+        const drawableToAdd = newDrawable[0];
+        drawableToAdd.registerMovement(x / scale, y / scale);
+        drawables.push(drawableToAdd);
+        this.setState({
+          newDrawable: [],
+          drawables
+        }, this.handleSessionChange.bind(this, drawableToAdd));
+      }
+    });
+    (0, _defineProperty2.default)(this, "handleMouseMove", e => {
+      const {
+        newDrawable
+      } = this.state;
+      const {
+        scale
+      } = this.props;
+      if (newDrawable.length === 1) {
+        const stage = e.target.getStage();
+        if (!stage) return;
+        const {
+          x,
+          y
+        } = stage.getPointerPosition();
+        const updatedNewDrawable = newDrawable[0];
+        updatedNewDrawable.registerMovement(x / scale, y / scale);
+        this.setState({
+          newDrawable: [updatedNewDrawable]
+        });
+      }
+    });
+    (0, _defineProperty2.default)(this, "handleUndo", () => {
+      const {
+        drawables
+      } = this.state;
+      const {
+        TextEntry
+      } = this.props;
+      const newDrawables = [...drawables];
+      const allData = [...drawables, ...TextEntry.all];
+      allData.sort((a, b) => new Date(a.createdAt) - new Date(b.createdAt));
+      const lastElement = allData[allData.length - 1];
+      if (lastElement && lastElement.type === 'text-entry') {
+        TextEntry.all.pop();
+        this.setState({
+          updatedAt: new Date()
+        }, this.handleSessionChange);
+      } else {
+        newDrawables.pop();
+        this.setState({
+          drawables: newDrawables
+        }, this.handleSessionChange);
+      }
+    });
+    (0, _defineProperty2.default)(this, "handleClearAll", () => {
+      const {
+        TextEntry
+      } = this.props;
+      TextEntry.all = [];
+      this.setState({
+        drawables: [],
+        updatedAt: new Date()
+      }, this.handleSessionChange);
+    });
+    (0, _defineProperty2.default)(this, "toggleTextSelected", textIsSelected => this.setState({
+      textIsSelected
+    }));
+    this.state = {
+      drawables: [],
+      newDrawable: [],
+      textIsSelected: false
+    };
+    this.stage = null;
+    this.layer = null;
+  }
+  componentWillUnmount() {
+    // Clean up refs to prevent React Konva errors
+    this.stage = null;
+    this.layer = null;
+  }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (nextProps.session) {
+      const {
+        TextEntry
+      } = nextProps;
+      const {
+        drawables: currentDrawables
+      } = this.state;
+      if (nextProps.session.drawables) {
+        const newDrawables = (0, _lodashEs.cloneDeep)(nextProps.session.drawables);
+        const drawablesString = JSON.stringify(currentDrawables);
+        const sessionDrawableString = JSON.stringify((newDrawables || []).map(drawable => (0, _lodashEs.omit)(drawable, 'type')));
+        if (drawablesString !== sessionDrawableString) {
+          const drawableArray = nextProps.session.drawables;
+          this.setState({
+            drawables: drawableArray.map(drawable => (0, _factory.default)(drawable.type, drawable))
+          });
+        }
+        const currentTexts = TextEntry.all.map(text => ({
+          ...text,
+          ...(TextEntry[`text_${text.id}`] && TextEntry[`text_${text.id}`].attrs),
+          value: TextEntry[`textarea_${text.id}`] && TextEntry[`textarea_${text.id}`].value
+        }));
+        if (!(0, _lodashEs.isEqual)(currentTexts, nextProps.session.texts)) {
+          TextEntry.setAll(nextProps.session.texts || []);
+        }
+      }
+    } else {
+      this.handleSessionChange();
+    }
+  }
+  render() {
+    const {
+      disabled,
+      drawableDimensions,
+      fillColor,
+      imageDimensions,
+      imageUrl,
+      paintColor,
+      outlineColor,
+      TextEntry,
+      backgroundImageEnabled = true,
+      toolActive: {
+        type
+      },
+      scale,
+      language
+    } = this.props;
+    const {
+      isOver,
+      newDrawable
+    } = this.state;
+    const draggable = type === 'Select';
+    const paint = type === 'PaintBucket';
+    const drawables = [...this.state.drawables, ...this.state.newDrawable];
+    const drawableProps = {
+      draggable: draggable && !disabled,
+      disabled,
+      paint,
+      fillColor,
+      forceUpdate: () => this.setState({
+        updatedAt: new Date()
+      }),
+      paintColor,
+      outlineColor,
+      toggleTextSelected: this.toggleTextSelected,
+      handleSessionChange: this.handleSessionChange,
+      stage: this.stage,
+      onMouseOverElement: this.onMouseOverElement,
+      onMouseOutElement: this.onMouseOutElement,
+      scale
+    };
+    let listeners = {};
+    if (!disabled) {
+      listeners = {
+        onMouseUp: this.handleMouseUp,
+        onTouchEnd: this.handleMouseUp,
+        onMouseMove: this.handleMouseMove,
+        onTouchMove: this.handleMouseMove
+      };
+      if (!draggable) {
+        listeners.onMouseDown = this.handleMouseDown;
+        listeners.onTouchStart = this.handleMouseDown;
+      }
+    }
+    const imageHeight = imageDimensions?.height * scale;
+    const imageWidth = imageDimensions?.width * scale;
+    return /*#__PURE__*/_react.default.createElement(Wrapper, null, /*#__PURE__*/_react.default.createElement(UndoControls, null, /*#__PURE__*/_react.default.createElement(_button.default, {
+      disabled: disabled,
+      onClick: this.handleUndo,
+      label: translator.t('common:undo', {
+        lng: language
+      })
+    }), /*#__PURE__*/_react.default.createElement(_button.default, {
+      disabled: disabled,
+      onClick: this.handleClearAll,
+      label: translator.t('common:clearAll', {
+        lng: language
+      })
+    })), /*#__PURE__*/_react.default.createElement(Base, null, backgroundImageEnabled && imageUrl && /*#__PURE__*/_react.default.createElement(_drawableImage.default, {
+      dimensions: {
+        height: imageHeight,
+        width: imageWidth
+      },
+      url: imageUrl
+    }), TextEntry.renderTextareas(), /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        position: 'absolute',
+        left: 0,
+        top: 0,
+        touchAction: 'none',
+        cursor: draggable && (isOver || newDrawable.length === 1) ? 'pointer' : 'default'
+      }
+    }, /*#__PURE__*/_react.default.createElement(_reactKonva.Stage, (0, _extends2.default)({
+      key: "drawing-stage",
+      scaleX: scale,
+      scaleY: scale,
+      ref: ref => this.stage = ref,
+      height: drawableDimensions.height,
+      width: drawableDimensions.width
+    }, listeners), /*#__PURE__*/_react.default.createElement(_reactKonva.Layer, {
+      ref: ref => this.layer = ref
+    }, drawables.map((drawable, key) => drawable.render({
+      ...drawableProps,
+      key
+    })), TextEntry.render(drawableProps))))));
+  }
+}
+exports.DrawableMain = DrawableMain;
+DrawableMain.propTypes = {
+  disabled: _propTypes.default.bool,
+  drawableDimensions: _propTypes.default.object.isRequired,
+  imageDimensions: _propTypes.default.object.isRequired,
+  fillColor: _propTypes.default.string.isRequired,
+  onSessionChange: _propTypes.default.func.isRequired,
+  paintColor: _propTypes.default.string.isRequired,
+  outlineColor: _propTypes.default.string.isRequired,
+  imageUrl: _propTypes.default.string.isRequired,
+  TextEntry: _propTypes.default.object.isRequired,
+  toolActive: _propTypes.default.object.isRequired,
+  session: _propTypes.default.object.isRequired,
+  backgroundImageEnabled: _propTypes.default.bool.isRequired,
+  scale: _propTypes.default.number.isRequired,
+  language: _propTypes.default.string
+};
+var _default = exports.default = DrawableMain;
+//# sourceMappingURL=drawable-main.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"drawable-main.js","names":["_react","_interopRequireDefault","require","_propTypes","_lodashEs","_reactKonva","_styles","_translator","_drawableImage","_button","_factory","translator","Translator","Wrapper","styled","display","flexWrap","justifyContent","Base","position","width","UndoControls","marginTop","marginRight","DrawableMain","React","Component","constructor","props","_defineProperty2","default","onSessionChange","session","TextEntry","drawableDimensions","drawables","state","newSession","map","d","toJson","texts","all","text","id","attrs","value","isEqual","setState","isOver","e","document","body","style","overflow","newDrawable","textIsSelected","toolActive","fillColor","outlineColor","scale","length","stage","target","getStage","x","y","getPointerPosition","factory","type","startx","starty","createdAt","Date","drawableToAdd","registerMovement","push","handleSessionChange","bind","updatedNewDrawable","newDrawables","allData","sort","a","b","lastElement","pop","updatedAt","layer","componentWillUnmount","UNSAFE_componentWillReceiveProps","nextProps","currentDrawables","cloneDeep","drawablesString","JSON","stringify","sessionDrawableString","drawable","omit","drawableArray","currentTexts","setAll","render","disabled","imageDimensions","imageUrl","paintColor","backgroundImageEnabled","language","draggable","paint","drawableProps","forceUpdate","toggleTextSelected","onMouseOverElement","onMouseOutElement","listeners","onMouseUp","handleMouseUp","onTouchEnd","onMouseMove","handleMouseMove","onTouchMove","onMouseDown","handleMouseDown","onTouchStart","imageHeight","height","imageWidth","createElement","onClick","handleUndo","label","t","lng","handleClearAll","dimensions","url","renderTextareas","left","top","touchAction","cursor","Stage","_extends2","key","scaleX","scaleY","ref","Layer","exports","propTypes","PropTypes","bool","object","isRequired","string","func","number","_default"],"sources":["../../src/drawing-response/drawable-main.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { cloneDeep, isEqual, omit } from 'lodash-es';\nimport { Layer, Stage } from 'react-konva';\nimport { styled } from '@mui/material/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\nconst Wrapper = styled('div')({\n  display: 'flex',\n  flexWrap: 'wrap',\n  justifyContent: 'flex-end',\n});\n\nconst Base = styled('div')({\n  position: 'relative',\n  width: '100%',\n});\n\nconst UndoControls = styled('div')({\n  marginTop: -43,\n  marginRight: 10,\n  position: 'absolute',\n});\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    this.stage = null;\n    this.layer = null;\n  }\n\n  componentWillUnmount() {\n    // Clean up refs to prevent React Konva errors\n    this.stage = null;\n    this.layer = null;\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, drawableDimensions } = this.props;\n    const { drawables } = this.state;\n\n    const newSession = {\n      width: drawableDimensions.width,\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 stage = e.target.getStage();\n      if (!stage) return;\n\n      const { x, y } = stage.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 stage = e.target.getStage();\n      if (!stage) return;\n\n      const { x, y } = stage.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 stage = e.target.getStage();\n      if (!stage) return;\n\n      const { x, y } = stage.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      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      <Wrapper>\n        <UndoControls>\n          <Button\n            disabled={disabled}\n            onClick={this.handleUndo}\n            label={translator.t('common:undo', { lng: language })}\n          />\n          <Button\n            disabled={disabled}\n            onClick={this.handleClearAll}\n            label={translator.t('common:clearAll', { lng: language })}\n          />\n        </UndoControls>\n        <Base>\n          {backgroundImageEnabled && imageUrl && (\n            <ImageBackground dimensions={{ height: imageHeight, width: imageWidth }} url={imageUrl} />\n          )}\n\n          {TextEntry.renderTextareas()}\n\n          {/* Wrap Stage in a styled div instead of styling Stage directly */}\n          <div\n            style={{\n              position: 'absolute',\n              left: 0,\n              top: 0,\n              touchAction: 'none',\n              cursor: draggable && (isOver || newDrawable.length === 1) ? 'pointer' : 'default',\n            }}\n          >\n            <Stage\n              key=\"drawing-stage\"\n              scaleX={scale}\n              scaleY={scale}\n              ref={(ref) => (this.stage = ref)}\n              height={drawableDimensions.height}\n              width={drawableDimensions.width}\n              {...listeners}\n            >\n              <Layer ref={(ref) => (this.layer = ref)}>\n                {drawables.map((drawable, key) => drawable.render({ ...drawableProps, key }))}\n                {TextEntry.render(drawableProps)}\n              </Layer>\n            </Stage>\n          </div>\n        </Base>\n      </Wrapper>\n    );\n  }\n}\n\nDrawableMain.propTypes = {\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 DrawableMain;\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,140 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _renderUi = require("@pie-lib/render-ui");
+var _Select = _interopRequireDefault(require("@mui/material/Select"));
+var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
+var _styles = require("@mui/material/styles");
+var _translator = _interopRequireDefault(require("@pie-lib/translator"));
+const {
+  translator
+} = _translator.default;
+const BaseContainer = (0, _styles.styled)('div')(({
+  theme
+}) => ({
+  marginTop: theme.spacing(2),
+  display: 'flex'
+}));
+const StyledInputContainer = (0, _styles.styled)(_renderUi.InputContainer)({
+  flex: 1,
+  fontSize: 'inherit',
+  width: '90%'
+});
+const StyledMenuItem = (0, _styles.styled)(_MenuItem.default)(({
+  theme,
+  isBlackColor
+}) => ({
+  borderRadius: '2px',
+  fontSize: 'inherit',
+  height: '22px',
+  marginLeft: theme.spacing(2),
+  marginRight: theme.spacing(2),
+  marginTop: theme.spacing(2),
+  ...(isBlackColor && {
+    color: theme.palette.background.paper
+  })
+}));
+const StyledSelect = (0, _styles.styled)(_Select.default)({
+  fontSize: 'inherit',
+  transform: 'translate(0%, 40%)'
+});
+
+// TODO: Change Palette so will render inputs and colors dynamically
+class Palette extends _react.default.Component {
+  constructor(...args) {
+    super(...args);
+    (0, _defineProperty2.default)(this, "onChange", name => event => {
+      const {
+        value
+      } = event.target;
+      const {
+        onFillColorChange,
+        onOutlineColorChange,
+        onPaintColorChange
+      } = this.props;
+      if (name === 'fill') {
+        onFillColorChange(value);
+      } else if (name === 'outline') {
+        onOutlineColorChange(value);
+      } else {
+        onPaintColorChange(value);
+      }
+    });
+  }
+  render() {
+    const {
+      fillColor,
+      outlineColor,
+      fillList,
+      outlineList,
+      language
+    } = this.props;
+    return /*#__PURE__*/_react.default.createElement(BaseContainer, null, /*#__PURE__*/_react.default.createElement(StyledInputContainer, {
+      label: translator.t('drawingResponse.fillColor', {
+        lng: language
+      })
+    }, /*#__PURE__*/_react.default.createElement(StyledSelect, {
+      onChange: this.onChange('fill'),
+      value: fillColor,
+      variant: "standard",
+      MenuProps: {
+        transitionDuration: {
+          enter: 225,
+          exit: 195
+        }
+      }
+    }, fillList.map(({
+      value,
+      label
+    }) => /*#__PURE__*/_react.default.createElement(StyledMenuItem, {
+      key: value,
+      value: value,
+      isBlackColor: value === 'black',
+      style: {
+        backgroundColor: value
+      }
+    }, label)))), /*#__PURE__*/_react.default.createElement(StyledInputContainer, {
+      label: translator.t('drawingResponse.outlineColor', {
+        lng: language
+      })
+    }, /*#__PURE__*/_react.default.createElement(StyledSelect, {
+      onChange: this.onChange('outline'),
+      value: outlineColor,
+      variant: "standard",
+      MenuProps: {
+        transitionDuration: {
+          enter: 225,
+          exit: 195
+        }
+      }
+    }, outlineList.map(({
+      value,
+      label
+    }) => /*#__PURE__*/_react.default.createElement(StyledMenuItem, {
+      key: value,
+      value: value,
+      style: {
+        border: `2px solid ${value}`
+      }
+    }, label)))));
+  }
+}
+Palette.propTypes = {
+  fillColor: _propTypes.default.string.isRequired,
+  fillList: _propTypes.default.array.isRequired,
+  onFillColorChange: _propTypes.default.func.isRequired,
+  onOutlineColorChange: _propTypes.default.func.isRequired,
+  onPaintColorChange: _propTypes.default.func.isRequired,
+  outlineColor: _propTypes.default.string.isRequired,
+  outlineList: _propTypes.default.array.isRequired,
+  language: _propTypes.default.string
+};
+var _default = exports.default = Palette;
+//# sourceMappingURL=drawable-palette.js.map