@pie-element/drawing-response 12.1.0-next.28 → 12.1.1-next.0

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

@@ -1,41 +0,0 @@
-"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

@@ -1 +0,0 @@
-{"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

@@ -1,75 +0,0 @@
-"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

@@ -1 +0,0 @@
-{"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

@@ -1,345 +0,0 @@
-"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

@@ -1 +0,0 @@
-{"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

@@ -1,140 +0,0 @@
-"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