@pie-element/drawing-response 7.13.1-next.1 → 7.13.1-next.10

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

@@ -0,0 +1 @@
+{"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/pie-toolbox/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-circle.js

@@ -0,0 +1,119 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactKonva = require("react-konva");
+
+var _drawableHelper = _interopRequireDefault(require("./drawable-helper"));
+
+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; } }
+
+var CircleDrawable = /*#__PURE__*/function (_DrawableHelper) {
+  (0, _inherits2["default"])(CircleDrawable, _DrawableHelper);
+
+  var _super = _createSuper(CircleDrawable);
+
+  function CircleDrawable(_props) {
+    var _this;
+
+    (0, _classCallCheck2["default"])(this, CircleDrawable);
+    _this = _super.call(this, _props, CircleDrawable.TYPE);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleDragEnd", function (props, event) {
+      var deltaX = _this.startx - event.target.getX();
+      var deltaY = _this.starty - event.target.getY();
+      _this.startx = event.target.getX();
+      _this.starty = event.target.getY();
+      _this.x = _this.x - deltaX;
+      _this.y = _this.y - deltaY;
+      props.handleSessionChange();
+    });
+    var startx = _props.startx,
+        starty = _props.starty,
+        x = _props.x,
+        y = _props.y;
+    _this.startx = startx;
+    _this.starty = starty;
+    _this.x = x || startx;
+    _this.y = y || starty;
+    var dx = _this.startx - _this.x;
+    var dy = _this.starty - _this.y;
+    _this.radius = Math.sqrt(dx * dx + dy * dy);
+    return _this;
+  }
+
+  (0, _createClass2["default"])(CircleDrawable, [{
+    key: "registerMovement",
+    value: function registerMovement(x, y) {
+      this.x = x;
+      this.y = y;
+      var dx = this.startx - this.x;
+      var dy = this.starty - this.y;
+      this.radius = Math.sqrt(dx * dx + dy * dy);
+    }
+  }, {
+    key: "handleOnClick",
+    value: function handleOnClick(props) {
+      var paint = props.paint,
+          paintColor = props.paintColor,
+          forceUpdate = props.forceUpdate;
+
+      if (paint) {
+        this.paintColor = paintColor;
+        forceUpdate();
+      }
+    }
+  }, {
+    key: "render",
+    value: function render(props) {
+      var _this2 = this;
+
+      var draggable = props.draggable,
+          key = props.key,
+          onMouseOverElement = props.onMouseOverElement,
+          onMouseOutElement = props.onMouseOutElement;
+      return /*#__PURE__*/_react["default"].createElement(_reactKonva.Circle, {
+        key: key,
+        draggable: draggable,
+        radius: this.radius,
+        x: this.startx,
+        y: this.starty,
+        fill: this.paintColor || this.fillColor,
+        onClick: function onClick() {
+          return _this2.handleOnClick(props);
+        },
+        onDragEnd: this.handleDragEnd.bind(this, props),
+        onMouseEnter: onMouseOverElement,
+        onMouseLeave: onMouseOutElement,
+        stroke: this.outlineColor
+      });
+    }
+  }]);
+  return CircleDrawable;
+}(_drawableHelper["default"]);
+
+exports["default"] = CircleDrawable;
+(0, _defineProperty2["default"])(CircleDrawable, "TYPE", 'CircleDrawable');
+//# sourceMappingURL=drawable-circle.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/drawing-response/drawable-circle.jsx"],"names":["CircleDrawable","props","TYPE","event","deltaX","startx","target","getX","deltaY","starty","getY","x","y","handleSessionChange","dx","dy","radius","Math","sqrt","paint","paintColor","forceUpdate","draggable","key","onMouseOverElement","onMouseOutElement","fillColor","handleOnClick","handleDragEnd","bind","outlineColor","DrawableHelper"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Circle } from 'react-konva';\n\nimport DrawableHelper from './drawable-helper';\n\nexport default class CircleDrawable extends DrawableHelper {\n  static TYPE = 'CircleDrawable';\n  constructor(props) {\n    super(props, CircleDrawable.TYPE);\n    const { startx, starty, x, y } = props;\n\n    this.startx = startx;\n    this.starty = starty;\n    this.x = x || startx;\n    this.y = y || starty;\n\n    const dx = this.startx - this.x;\n    const dy = this.starty - this.y;\n\n    this.radius = Math.sqrt(dx * dx + dy * dy);\n  }\n\n  registerMovement(x, y) {\n    this.x = x;\n    this.y = y;\n\n    const dx = this.startx - this.x;\n    const dy = this.starty - this.y;\n\n    this.radius = Math.sqrt(dx * dx + dy * dy);\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    const deltaX = this.startx - event.target.getX();\n    const deltaY = this.starty - event.target.getY();\n\n    this.startx = event.target.getX();\n    this.starty = event.target.getY();\n\n    this.x = this.x - deltaX;\n    this.y = this.y - deltaY;\n\n    props.handleSessionChange();\n  };\n\n  render(props) {\n    const { draggable, key, onMouseOverElement, onMouseOutElement } = props;\n\n    return (\n      <Circle\n        key={key}\n        draggable={draggable}\n        radius={this.radius}\n        x={this.startx}\n        y={this.starty}\n        fill={this.paintColor || this.fillColor}\n        onClick={() => this.handleOnClick(props)}\n        onDragEnd={this.handleDragEnd.bind(this, props)}\n        onMouseEnter={onMouseOverElement}\n        onMouseLeave={onMouseOutElement}\n        stroke={this.outlineColor}\n      />\n    );\n  }\n}\n"],"file":"drawable-circle.js"}

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

@@ -0,0 +1,100 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactKonva = require("react-konva");
+
+var _drawableHelper = _interopRequireDefault(require("./drawable-helper"));
+
+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; } }
+
+var EraserDrawable = /*#__PURE__*/function (_DrawableHelper) {
+  (0, _inherits2["default"])(EraserDrawable, _DrawableHelper);
+
+  var _super = _createSuper(EraserDrawable);
+
+  function EraserDrawable(_props) {
+    var _this;
+
+    (0, _classCallCheck2["default"])(this, EraserDrawable);
+    _this = _super.call(this, _props, EraserDrawable.TYPE);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleDragEnd", function (props, event) {
+      _this.posX = event.target.getX();
+      _this.posY = event.target.getY();
+      props.handleSessionChange();
+    });
+    var startx = _props.startx,
+        starty = _props.starty,
+        points = _props.points,
+        posX = _props.posX,
+        posY = _props.posY;
+    _this.points = points || [startx, starty];
+    _this.posX = posX || 0;
+    _this.posY = posY || 0;
+    return _this;
+  }
+
+  (0, _createClass2["default"])(EraserDrawable, [{
+    key: "registerMovement",
+    value: function registerMovement(x, y) {
+      this.points = [].concat((0, _toConsumableArray2["default"])(this.points), [x, y]);
+    }
+  }, {
+    key: "render",
+    value: function render(props) {
+      var draggable = props.draggable,
+          key = props.key,
+          onMouseOverElement = props.onMouseOverElement,
+          onMouseOutElement = props.onMouseOutElement;
+      return /*#__PURE__*/_react["default"].createElement(_reactKonva.Line, {
+        key: key,
+        draggable: draggable,
+        globalCompositeOperation: "destination-out",
+        tension: 0,
+        bezier: true,
+        points: this.points,
+        onDragEnd: this.handleDragEnd.bind(this, props),
+        onMouseEnter: onMouseOverElement,
+        onMouseLeave: onMouseOutElement,
+        strokeStyle: "#df4b26",
+        lineJoin: "round",
+        lineWidth: "5",
+        fill: "white",
+        stroke: "white",
+        strokeWidth: 5,
+        x: this.posX,
+        y: this.posY
+      });
+    }
+  }]);
+  return EraserDrawable;
+}(_drawableHelper["default"]);
+
+exports["default"] = EraserDrawable;
+(0, _defineProperty2["default"])(EraserDrawable, "TYPE", 'EraserDrawable');
+//# sourceMappingURL=drawable-eraser.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/drawing-response/drawable-eraser.jsx"],"names":["EraserDrawable","props","TYPE","event","posX","target","getX","posY","getY","handleSessionChange","startx","starty","points","x","y","draggable","key","onMouseOverElement","onMouseOutElement","handleDragEnd","bind","DrawableHelper"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AAEA;;;;;;IAEqBA,c;;;;;AAEnB,0BAAYC,MAAZ,EAAmB;AAAA;;AAAA;AACjB,8BAAMA,MAAN,EAAaD,cAAc,CAACE,IAA5B;AADiB,sGAaH,UAACD,KAAD,EAAQE,KAAR,EAAkB;AAChC,YAAKC,IAAL,GAAYD,KAAK,CAACE,MAAN,CAAaC,IAAb,EAAZ;AACA,YAAKC,IAAL,GAAYJ,KAAK,CAACE,MAAN,CAAaG,IAAb,EAAZ;AAEAP,MAAAA,KAAK,CAACQ,mBAAN;AACD,KAlBkB;AAEjB,QAAQC,MAAR,GAA+CT,MAA/C,CAAQS,MAAR;AAAA,QAAgBC,MAAhB,GAA+CV,MAA/C,CAAgBU,MAAhB;AAAA,QAAwBC,MAAxB,GAA+CX,MAA/C,CAAwBW,MAAxB;AAAA,QAAgCR,IAAhC,GAA+CH,MAA/C,CAAgCG,IAAhC;AAAA,QAAsCG,IAAtC,GAA+CN,MAA/C,CAAsCM,IAAtC;AAEA,UAAKK,MAAL,GAAcA,MAAM,IAAI,CAACF,MAAD,EAASC,MAAT,CAAxB;AACA,UAAKP,IAAL,GAAYA,IAAI,IAAI,CAApB;AACA,UAAKG,IAAL,GAAYA,IAAI,IAAI,CAApB;AANiB;AAOlB;;;;WAED,0BAAiBM,CAAjB,EAAoBC,CAApB,EAAuB;AACrB,WAAKF,MAAL,iDAAkB,KAAKA,MAAvB,IAA+BC,CAA/B,EAAkCC,CAAlC;AACD;;;WASD,gBAAOb,KAAP,EAAc;AACZ,UAAQc,SAAR,GAAkEd,KAAlE,CAAQc,SAAR;AAAA,UAAmBC,GAAnB,GAAkEf,KAAlE,CAAmBe,GAAnB;AAAA,UAAwBC,kBAAxB,GAAkEhB,KAAlE,CAAwBgB,kBAAxB;AAAA,UAA4CC,iBAA5C,GAAkEjB,KAAlE,CAA4CiB,iBAA5C;AAEA,0BACE,gCAAC,gBAAD;AACE,QAAA,GAAG,EAAEF,GADP;AAEE,QAAA,SAAS,EAAED,SAFb;AAGE,QAAA,wBAAwB,EAAC,iBAH3B;AAIE,QAAA,OAAO,EAAE,CAJX;AAKE,QAAA,MAAM,EAAE,IALV;AAME,QAAA,MAAM,EAAE,KAAKH,MANf;AAOE,QAAA,SAAS,EAAE,KAAKO,aAAL,CAAmBC,IAAnB,CAAwB,IAAxB,EAA8BnB,KAA9B,CAPb;AAQE,QAAA,YAAY,EAAEgB,kBARhB;AASE,QAAA,YAAY,EAAEC,iBAThB;AAUE,QAAA,WAAW,EAAC,SAVd;AAWE,QAAA,QAAQ,EAAC,OAXX;AAYE,QAAA,SAAS,EAAC,GAZZ;AAaE,QAAA,IAAI,EAAC,OAbP;AAcE,QAAA,MAAM,EAAC,OAdT;AAeE,QAAA,WAAW,EAAE,CAff;AAgBE,QAAA,CAAC,EAAE,KAAKd,IAhBV;AAiBE,QAAA,CAAC,EAAE,KAAKG;AAjBV,QADF;AAqBD;;;EA9CyCc,0B;;;iCAAvBrB,c,UACL,gB","sourcesContent":["import React from 'react';\nimport { Line } from 'react-konva';\n\nimport DrawableHelper from './drawable-helper';\n\nexport default class EraserDrawable extends DrawableHelper {\n  static TYPE = 'EraserDrawable';\n  constructor(props) {\n    super(props, EraserDrawable.TYPE);\n    const { startx, starty, points, posX, posY } = props;\n\n    this.points = points || [startx, starty];\n    this.posX = posX || 0;\n    this.posY = posY || 0;\n  }\n\n  registerMovement(x, y) {\n    this.points = [...this.points, x, y];\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\n    return (\n      <Line\n        key={key}\n        draggable={draggable}\n        globalCompositeOperation=\"destination-out\"\n        tension={0}\n        bezier={true}\n        points={this.points}\n        onDragEnd={this.handleDragEnd.bind(this, props)}\n        onMouseEnter={onMouseOverElement}\n        onMouseLeave={onMouseOutElement}\n        strokeStyle=\"#df4b26\"\n        lineJoin=\"round\"\n        lineWidth=\"5\"\n        fill=\"white\"\n        stroke=\"white\"\n        strokeWidth={5}\n        x={this.posX}\n        y={this.posY}\n      />\n    );\n  }\n}\n"],"file":"drawable-eraser.js"}

package/lib/drawing-response/drawable-free-path.js

@@ -0,0 +1,112 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactKonva = require("react-konva");
+
+var _drawableHelper = _interopRequireDefault(require("./drawable-helper"));
+
+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; } }
+
+var FreePathDrawable = /*#__PURE__*/function (_DrawableHelper) {
+  (0, _inherits2["default"])(FreePathDrawable, _DrawableHelper);
+
+  var _super = _createSuper(FreePathDrawable);
+
+  function FreePathDrawable(_props) {
+    var _this;
+
+    (0, _classCallCheck2["default"])(this, FreePathDrawable);
+    _this = _super.call(this, _props, FreePathDrawable.TYPE);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleDragEnd", function (props, event) {
+      _this.posX = event.target.getX();
+      _this.posY = event.target.getY();
+      props.handleSessionChange();
+    });
+    var startx = _props.startx,
+        starty = _props.starty,
+        points = _props.points,
+        posX = _props.posX,
+        posY = _props.posY;
+    _this.points = points || [startx, starty];
+    _this.posX = posX || 0;
+    _this.posY = posY || 0;
+    return _this;
+  }
+
+  (0, _createClass2["default"])(FreePathDrawable, [{
+    key: "registerMovement",
+    value: function registerMovement(x, y) {
+      this.points = [].concat((0, _toConsumableArray2["default"])(this.points), [x, y]);
+    }
+  }, {
+    key: "handleOnClick",
+    value: function handleOnClick(props) {
+      var paint = props.paint,
+          paintColor = props.paintColor,
+          forceUpdate = props.forceUpdate;
+
+      if (paint) {
+        this.paintColor = paintColor;
+        forceUpdate();
+      }
+    }
+  }, {
+    key: "render",
+    value: function render(props) {
+      var _this2 = this;
+
+      var draggable = props.draggable,
+          key = props.key,
+          onMouseOverElement = props.onMouseOverElement,
+          onMouseOutElement = props.onMouseOutElement;
+      return /*#__PURE__*/_react["default"].createElement(_reactKonva.Line, {
+        key: key,
+        draggable: draggable,
+        tension: 0,
+        bezier: true,
+        points: this.points,
+        fill: this.paintColor || this.fillColor,
+        onClick: function onClick() {
+          return _this2.handleOnClick(props);
+        },
+        onDragEnd: this.handleDragEnd.bind(this, props),
+        onMouseEnter: onMouseOverElement,
+        onMouseLeave: onMouseOutElement,
+        stroke: this.paintColor || this.outlineColor,
+        x: this.posX,
+        y: this.posY
+      });
+    }
+  }]);
+  return FreePathDrawable;
+}(_drawableHelper["default"]);
+
+exports["default"] = FreePathDrawable;
+(0, _defineProperty2["default"])(FreePathDrawable, "TYPE", 'FreePathDrawable');
+//# sourceMappingURL=drawable-free-path.js.map

package/lib/drawing-response/drawable-free-path.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/drawing-response/drawable-free-path.jsx"],"names":["FreePathDrawable","props","TYPE","event","posX","target","getX","posY","getY","handleSessionChange","startx","starty","points","x","y","paint","paintColor","forceUpdate","draggable","key","onMouseOverElement","onMouseOutElement","fillColor","handleOnClick","handleDragEnd","bind","outlineColor","DrawableHelper"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AAEA;;;;;;IAEqBA,gB;;;;;AAGnB,4BAAYC,MAAZ,EAAmB;AAAA;;AAAA;AACjB,8BAAMA,MAAN,EAAaD,gBAAgB,CAACE,IAA9B;AADiB,sGAsBH,UAACD,KAAD,EAAQE,KAAR,EAAkB;AAChC,YAAKC,IAAL,GAAYD,KAAK,CAACE,MAAN,CAAaC,IAAb,EAAZ;AACA,YAAKC,IAAL,GAAYJ,KAAK,CAACE,MAAN,CAAaG,IAAb,EAAZ;AAEAP,MAAAA,KAAK,CAACQ,mBAAN;AACD,KA3BkB;AAEjB,QAAQC,MAAR,GAA+CT,MAA/C,CAAQS,MAAR;AAAA,QAAgBC,MAAhB,GAA+CV,MAA/C,CAAgBU,MAAhB;AAAA,QAAwBC,MAAxB,GAA+CX,MAA/C,CAAwBW,MAAxB;AAAA,QAAgCR,IAAhC,GAA+CH,MAA/C,CAAgCG,IAAhC;AAAA,QAAsCG,IAAtC,GAA+CN,MAA/C,CAAsCM,IAAtC;AAEA,UAAKK,MAAL,GAAcA,MAAM,IAAI,CAACF,MAAD,EAASC,MAAT,CAAxB;AACA,UAAKP,IAAL,GAAYA,IAAI,IAAI,CAApB;AACA,UAAKG,IAAL,GAAYA,IAAI,IAAI,CAApB;AANiB;AAOlB;;;;WAED,0BAAiBM,CAAjB,EAAoBC,CAApB,EAAuB;AACrB,WAAKF,MAAL,iDAAkB,KAAKA,MAAvB,IAA+BC,CAA/B,EAAkCC,CAAlC;AACD;;;WAED,uBAAcb,KAAd,EAAqB;AACnB,UAAQc,KAAR,GAA2Cd,KAA3C,CAAQc,KAAR;AAAA,UAAeC,UAAf,GAA2Cf,KAA3C,CAAee,UAAf;AAAA,UAA2BC,WAA3B,GAA2ChB,KAA3C,CAA2BgB,WAA3B;;AAEA,UAAIF,KAAJ,EAAW;AACT,aAAKC,UAAL,GAAkBA,UAAlB;AACAC,QAAAA,WAAW;AACZ;AACF;;;WASD,gBAAOhB,KAAP,EAAc;AAAA;;AACZ,UAAQiB,SAAR,GAAkEjB,KAAlE,CAAQiB,SAAR;AAAA,UAAmBC,GAAnB,GAAkElB,KAAlE,CAAmBkB,GAAnB;AAAA,UAAwBC,kBAAxB,GAAkEnB,KAAlE,CAAwBmB,kBAAxB;AAAA,UAA4CC,iBAA5C,GAAkEpB,KAAlE,CAA4CoB,iBAA5C;AAEA,0BACE,gCAAC,gBAAD;AACE,QAAA,GAAG,EAAEF,GADP;AAEE,QAAA,SAAS,EAAED,SAFb;AAGE,QAAA,OAAO,EAAE,CAHX;AAIE,QAAA,MAAM,EAAE,IAJV;AAKE,QAAA,MAAM,EAAE,KAAKN,MALf;AAME,QAAA,IAAI,EAAE,KAAKI,UAAL,IAAmB,KAAKM,SANhC;AAOE,QAAA,OAAO,EAAE;AAAA,iBAAM,MAAI,CAACC,aAAL,CAAmBtB,KAAnB,CAAN;AAAA,SAPX;AAQE,QAAA,SAAS,EAAE,KAAKuB,aAAL,CAAmBC,IAAnB,CAAwB,IAAxB,EAA8BxB,KAA9B,CARb;AASE,QAAA,YAAY,EAAEmB,kBAThB;AAUE,QAAA,YAAY,EAAEC,iBAVhB;AAWE,QAAA,MAAM,EAAE,KAAKL,UAAL,IAAmB,KAAKU,YAXlC;AAYE,QAAA,CAAC,EAAE,KAAKtB,IAZV;AAaE,QAAA,CAAC,EAAE,KAAKG;AAbV,QADF;AAiBD;;;EApD2CoB,0B;;;iCAAzB3B,gB,UACL,kB","sourcesContent":["import React from 'react';\nimport { Line } from 'react-konva';\n\nimport DrawableHelper from './drawable-helper';\n\nexport default class FreePathDrawable extends DrawableHelper {\n  static TYPE = 'FreePathDrawable';\n\n  constructor(props) {\n    super(props, FreePathDrawable.TYPE);\n    const { startx, starty, points, posX, posY } = props;\n\n    this.points = points || [startx, starty];\n    this.posX = posX || 0;\n    this.posY = posY || 0;\n  }\n\n  registerMovement(x, y) {\n    this.points = [...this.points, x, 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\n    return (\n      <Line\n        key={key}\n        draggable={draggable}\n        tension={0}\n        bezier={true}\n        points={this.points}\n        fill={this.paintColor || this.fillColor}\n        onClick={() => this.handleOnClick(props)}\n        onDragEnd={this.handleDragEnd.bind(this, props)}\n        onMouseEnter={onMouseOverElement}\n        onMouseLeave={onMouseOutElement}\n        stroke={this.paintColor || this.outlineColor}\n        x={this.posX}\n        y={this.posY}\n      />\n    );\n  }\n}\n"],"file":"drawable-free-path.js"}

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

@@ -0,0 +1,46 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+/**
+ * Not using React in order to avoid performance issues.
+ * If you switch this class to a React one make sure that
+ * this interaction will not have performance leaks in pie-website nor in pits.
+ */
+var DrawableHelper = /*#__PURE__*/function () {
+  function DrawableHelper(props, type) {
+    (0, _classCallCheck2["default"])(this, DrawableHelper);
+    var startx = props.startx,
+        starty = props.starty,
+        fillColor = props.fillColor,
+        outlineColor = props.outlineColor,
+        createdAt = props.createdAt;
+    this.startx = startx;
+    this.starty = starty;
+    this.createdAt = createdAt;
+    this.fillColor = fillColor;
+    this.outlineColor = outlineColor;
+    this.type = type;
+  }
+
+  (0, _createClass2["default"])(DrawableHelper, [{
+    key: "toJson",
+    value: function toJson() {
+      var base = JSON.parse(JSON.stringify(this));
+      return base;
+    }
+  }]);
+  return DrawableHelper;
+}();
+
+exports["default"] = DrawableHelper;
+//# sourceMappingURL=drawable-helper.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/drawing-response/drawable-helper.jsx"],"names":["DrawableHelper","props","type","startx","starty","fillColor","outlineColor","createdAt","base","JSON","parse","stringify"],"mappings":";;;;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;IACqBA,c;AACnB,0BAAYC,KAAZ,EAAmBC,IAAnB,EAAyB;AAAA;AACvB,QAAQC,MAAR,GAA+DF,KAA/D,CAAQE,MAAR;AAAA,QAAgBC,MAAhB,GAA+DH,KAA/D,CAAgBG,MAAhB;AAAA,QAAwBC,SAAxB,GAA+DJ,KAA/D,CAAwBI,SAAxB;AAAA,QAAmCC,YAAnC,GAA+DL,KAA/D,CAAmCK,YAAnC;AAAA,QAAiDC,SAAjD,GAA+DN,KAA/D,CAAiDM,SAAjD;AACA,SAAKJ,MAAL,GAAcA,MAAd;AACA,SAAKC,MAAL,GAAcA,MAAd;AACA,SAAKG,SAAL,GAAiBA,SAAjB;AACA,SAAKF,SAAL,GAAiBA,SAAjB;AACA,SAAKC,YAAL,GAAoBA,YAApB;AACA,SAAKJ,IAAL,GAAYA,IAAZ;AACD;;;;WAED,kBAAS;AACP,UAAMM,IAAI,GAAGC,IAAI,CAACC,KAAL,CAAWD,IAAI,CAACE,SAAL,CAAe,IAAf,CAAX,CAAb;AACA,aAAOH,IAAP;AACD","sourcesContent":["/**\n * Not using React in order to avoid performance issues.\n * If you switch this class to a React one make sure that\n * this interaction will not have performance leaks in pie-website nor in pits.\n */\nexport default class DrawableHelper {\n  constructor(props, type) {\n    const { startx, starty, fillColor, outlineColor, createdAt } = props;\n    this.startx = startx;\n    this.starty = starty;\n    this.createdAt = createdAt;\n    this.fillColor = fillColor;\n    this.outlineColor = outlineColor;\n    this.type = type;\n  }\n\n  toJson() {\n    const base = JSON.parse(JSON.stringify(this));\n    return base;\n  }\n}\n"],"file":"drawable-helper.js"}

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

@@ -0,0 +1,60 @@
+"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("@material-ui/core/styles");
+
+var DrawableImage = function DrawableImage(_ref) {
+  var classes = _ref.classes,
+      url = _ref.url,
+      _ref$dimensions = _ref.dimensions,
+      height = _ref$dimensions.height,
+      width = _ref$dimensions.width;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.imageContainer
+  }, /*#__PURE__*/_react["default"].createElement("img", {
+    alt: "drawing-response-image",
+    className: classes.image,
+    src: url,
+    style: {
+      height: height,
+      maxWidth: width,
+      maxHeight: 350,
+      width: width
+    }
+  }));
+};
+
+var styles = function styles() {
+  return {
+    image: {
+      alignItems: 'center',
+      display: 'flex',
+      justifyContent: 'center'
+    },
+    imageContainer: {
+      position: 'relative',
+      width: 'fit-content'
+    }
+  };
+};
+
+DrawableImage.propTypes = {
+  classes: _propTypes["default"].object.isRequired,
+  dimensions: _propTypes["default"].object.isRequired,
+  url: _propTypes["default"].string.isRequired
+};
+
+var _default = (0, _styles.withStyles)(styles)(DrawableImage);
+
+exports["default"] = _default;
+//# sourceMappingURL=drawable-image.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/drawing-response/drawable-image.jsx"],"names":["DrawableImage","classes","url","dimensions","height","width","imageContainer","image","maxWidth","maxHeight","styles","alignItems","display","justifyContent","position","propTypes","PropTypes","object","isRequired","string"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AAEA,IAAMA,aAAa,GAAG,SAAhBA,aAAgB;AAAA,MAAGC,OAAH,QAAGA,OAAH;AAAA,MAAYC,GAAZ,QAAYA,GAAZ;AAAA,6BAAiBC,UAAjB;AAAA,MAA+BC,MAA/B,mBAA+BA,MAA/B;AAAA,MAAuCC,KAAvC,mBAAuCA,KAAvC;AAAA,sBACpB;AAAK,IAAA,SAAS,EAAEJ,OAAO,CAACK;AAAxB,kBACE;AACE,IAAA,GAAG,EAAC,wBADN;AAEE,IAAA,SAAS,EAAEL,OAAO,CAACM,KAFrB;AAGE,IAAA,GAAG,EAAEL,GAHP;AAIE,IAAA,KAAK,EAAE;AACLE,MAAAA,MAAM,EAANA,MADK;AAELI,MAAAA,QAAQ,EAAEH,KAFL;AAGLI,MAAAA,SAAS,EAAE,GAHN;AAILJ,MAAAA,KAAK,EAALA;AAJK;AAJT,IADF,CADoB;AAAA,CAAtB;;AAgBA,IAAMK,MAAM,GAAG,SAATA,MAAS;AAAA,SAAO;AACpBH,IAAAA,KAAK,EAAE;AACLI,MAAAA,UAAU,EAAE,QADP;AAELC,MAAAA,OAAO,EAAE,MAFJ;AAGLC,MAAAA,cAAc,EAAE;AAHX,KADa;AAMpBP,IAAAA,cAAc,EAAE;AACdQ,MAAAA,QAAQ,EAAE,UADI;AAEdT,MAAAA,KAAK,EAAE;AAFO;AANI,GAAP;AAAA,CAAf;;AAYAL,aAAa,CAACe,SAAd,GAA0B;AACxBd,EAAAA,OAAO,EAAEe,sBAAUC,MAAV,CAAiBC,UADF;AAExBf,EAAAA,UAAU,EAAEa,sBAAUC,MAAV,CAAiBC,UAFL;AAGxBhB,EAAAA,GAAG,EAAEc,sBAAUG,MAAV,CAAiBD;AAHE,CAA1B;;eAMe,wBAAWR,MAAX,EAAmBV,aAAnB,C","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { withStyles } from '@material-ui/core/styles';\n\nconst DrawableImage = ({ classes, url, dimensions: { height, width } }) => (\n  <div className={classes.imageContainer}>\n    <img\n      alt=\"drawing-response-image\"\n      className={classes.image}\n      src={url}\n      style={{\n        height,\n        maxWidth: width,\n        maxHeight: 350,\n        width,\n      }}\n    />\n  </div>\n);\n\nconst styles = () => ({\n  image: {\n    alignItems: 'center',\n    display: 'flex',\n    justifyContent: 'center',\n  },\n  imageContainer: {\n    position: 'relative',\n    width: 'fit-content',\n  },\n});\n\nDrawableImage.propTypes = {\n  classes: PropTypes.object.isRequired,\n  dimensions: PropTypes.object.isRequired,\n  url: PropTypes.string.isRequired,\n};\n\nexport default withStyles(styles)(DrawableImage);\n"],"file":"drawable-image.js"}

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

@@ -0,0 +1,114 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactKonva = require("react-konva");
+
+var _drawableHelper = _interopRequireDefault(require("./drawable-helper"));
+
+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; } }
+
+var LineDrawable = /*#__PURE__*/function (_DrawableHelper) {
+  (0, _inherits2["default"])(LineDrawable, _DrawableHelper);
+
+  var _super = _createSuper(LineDrawable);
+
+  function LineDrawable(_props) {
+    var _this;
+
+    (0, _classCallCheck2["default"])(this, LineDrawable);
+    _this = _super.call(this, _props, LineDrawable.TYPE);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleDragEnd", function (props, event) {
+      _this.posX = event.target.getX();
+      _this.posY = event.target.getY();
+      props.handleSessionChange();
+    });
+    var startx = _props.startx,
+        starty = _props.starty,
+        x = _props.x,
+        y = _props.y,
+        posX = _props.posX,
+        posY = _props.posY;
+    _this.x = x || startx;
+    _this.y = y || starty;
+    _this.posX = posX || 0;
+    _this.posY = posY || 0;
+    return _this;
+  }
+
+  (0, _createClass2["default"])(LineDrawable, [{
+    key: "registerMovement",
+    value: function registerMovement(x, y) {
+      this.x = x;
+      this.y = y;
+    }
+  }, {
+    key: "handleOnClick",
+    value: function handleOnClick(props) {
+      var paint = props.paint,
+          paintColor = props.paintColor,
+          forceUpdate = props.forceUpdate;
+
+      if (paint) {
+        this.paintColor = paintColor;
+        forceUpdate();
+      }
+    }
+  }, {
+    key: "render",
+    value: function render(props) {
+      var _this2 = this;
+
+      var draggable = props.draggable,
+          key = props.key,
+          onMouseOverElement = props.onMouseOverElement,
+          onMouseOutElement = props.onMouseOutElement;
+      var 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: function onClick() {
+          return _this2.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
+      });
+    }
+  }]);
+  return LineDrawable;
+}(_drawableHelper["default"]);
+
+exports["default"] = LineDrawable;
+(0, _defineProperty2["default"])(LineDrawable, "TYPE", 'LineDrawable');
+//# sourceMappingURL=drawable-line.js.map