@pie-element/drawing-response 4.6.1-beta.0 → 4.6.1-beta.3

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

@@ -1,406 +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 _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 _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _omit = _interopRequireDefault(require("lodash/omit"));
-
-var _cloneDeep = _interopRequireDefault(require("lodash/cloneDeep"));
-
-var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
-
-var _classnames2 = _interopRequireDefault(require("classnames"));
-
-var _reactKonva = require("react-konva");
-
-var _styles = require("@material-ui/core/styles");
-
-var _drawableImage = _interopRequireDefault(require("./drawable-image"));
-
-var _button = _interopRequireDefault(require("./button"));
-
-var _factory = _interopRequireDefault(require("./factory"));
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-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 DrawableMain = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2["default"])(DrawableMain, _React$Component);
-
-  var _super = _createSuper(DrawableMain);
-
-  function DrawableMain(props) {
-    var _this;
-
-    (0, _classCallCheck2["default"])(this, DrawableMain);
-    _this = _super.call(this, props);
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleSessionChange", function () {
-      var _this$props = _this.props,
-          onSessionChange = _this$props.onSessionChange,
-          session = _this$props.session,
-          TextEntry = _this$props.TextEntry;
-      var drawables = _this.state.drawables;
-      var newSession = {
-        drawables: drawables.map(function (d) {
-          return d.toJson();
-        }),
-        texts: TextEntry.all.map(function (text) {
-          return _objectSpread(_objectSpread(_objectSpread({}, text), TextEntry["text_".concat(text.id)] && TextEntry["text_".concat(text.id)].attrs), {}, {
-            value: TextEntry["textarea_".concat(text.id)] && TextEntry["textarea_".concat(text.id)].value
-          });
-        })
-      };
-
-      if (!(0, _isEqual["default"])(newSession, session)) {
-        onSessionChange(_objectSpread(_objectSpread({}, session), newSession));
-      }
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onMouseOverElement", function () {
-      return _this.setState({
-        isOver: true
-      });
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onMouseOutElement", function () {
-      return _this.setState({
-        isOver: false
-      });
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleMouseDown", function (e) {
-      // ONLY IF MOBILE?
-      document.body.style.overflow = 'hidden';
-      var _this$state = _this.state,
-          newDrawable = _this$state.newDrawable,
-          textIsSelected = _this$state.textIsSelected;
-      var _this$props2 = _this.props,
-          toolActive = _this$props2.toolActive,
-          fillColor = _this$props2.fillColor,
-          outlineColor = _this$props2.outlineColor,
-          scale = _this$props2.scale;
-
-      if (newDrawable.length === 0 && !textIsSelected) {
-        var _e$target$getStage$ge = e.target.getStage().getPointerPosition(),
-            x = _e$target$getStage$ge.x,
-            y = _e$target$getStage$ge.y;
-
-        var _newDrawable = (0, _factory["default"])(toolActive.type, {
-          startx: x / scale,
-          starty: y / scale,
-          fillColor: fillColor,
-          outlineColor: outlineColor,
-          createdAt: new Date()
-        });
-
-        _this.setState({
-          newDrawable: [_newDrawable]
-        });
-      }
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleMouseUp", function (e) {
-      // ONLY IF MOBILE?
-      document.body.style.overflow = 'initial';
-      var _this$state2 = _this.state,
-          newDrawable = _this$state2.newDrawable,
-          drawables = _this$state2.drawables;
-      var scale = _this.props.scale;
-
-      if (newDrawable.length === 1) {
-        var _e$target$getStage$ge2 = e.target.getStage().getPointerPosition(),
-            x = _e$target$getStage$ge2.x,
-            y = _e$target$getStage$ge2.y;
-
-        var drawableToAdd = newDrawable[0];
-        drawableToAdd.registerMovement(x / scale, y / scale);
-        drawables.push(drawableToAdd);
-
-        _this.setState({
-          newDrawable: [],
-          drawables: drawables
-        }, _this.handleSessionChange.bind((0, _assertThisInitialized2["default"])(_this), drawableToAdd));
-      }
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleMouseMove", function (e) {
-      var newDrawable = _this.state.newDrawable;
-      var scale = _this.props.scale;
-
-      if (newDrawable.length === 1) {
-        var _e$target$getStage$ge3 = e.target.getStage().getPointerPosition(),
-            x = _e$target$getStage$ge3.x,
-            y = _e$target$getStage$ge3.y;
-
-        var updatedNewDrawable = newDrawable[0];
-        updatedNewDrawable.registerMovement(x / scale, y / scale);
-
-        _this.setState({
-          newDrawable: [updatedNewDrawable]
-        });
-      }
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleUndo", function () {
-      var drawables = _this.state.drawables;
-      var TextEntry = _this.props.TextEntry;
-      var newDrawables = (0, _toConsumableArray2["default"])(drawables);
-      var allData = [].concat((0, _toConsumableArray2["default"])(drawables), (0, _toConsumableArray2["default"])(TextEntry.all));
-      allData.sort(function (a, b) {
-        return new Date(a.createdAt) - new Date(b.createdAt);
-      });
-      var 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"])((0, _assertThisInitialized2["default"])(_this), "handleClearAll", function () {
-      var TextEntry = _this.props.TextEntry;
-      TextEntry.all = [];
-
-      _this.setState({
-        drawables: [],
-        updatedAt: new Date()
-      }, _this.handleSessionChange);
-    });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "toggleTextSelected", function (textIsSelected) {
-      return _this.setState({
-        textIsSelected: textIsSelected
-      });
-    });
-    _this.state = {
-      drawables: [],
-      newDrawable: [],
-      textIsSelected: false
-    };
-    return _this;
-  }
-
-  (0, _createClass2["default"])(DrawableMain, [{
-    key: "UNSAFE_componentWillReceiveProps",
-    value: function UNSAFE_componentWillReceiveProps(nextProps) {
-      if (nextProps.session) {
-        var TextEntry = nextProps.TextEntry;
-        var currentDrawables = this.state.drawables;
-
-        if (nextProps.session.drawables) {
-          var newDrawables = (0, _cloneDeep["default"])(nextProps.session.drawables);
-          var drawablesString = JSON.stringify(currentDrawables);
-          var sessionDrawableString = JSON.stringify((newDrawables || []).map(function (drawable) {
-            return (0, _omit["default"])(drawable, 'type');
-          }));
-
-          if (drawablesString !== sessionDrawableString) {
-            var drawableArray = nextProps.session.drawables;
-            this.setState({
-              drawables: drawableArray.map(function (drawable) {
-                return (0, _factory["default"])(drawable.type, drawable);
-              })
-            });
-          }
-
-          var currentTexts = TextEntry.all.map(function (text) {
-            return _objectSpread(_objectSpread(_objectSpread({}, text), TextEntry["text_".concat(text.id)] && TextEntry["text_".concat(text.id)].attrs), {}, {
-              value: TextEntry["textarea_".concat(text.id)] && TextEntry["textarea_".concat(text.id)].value
-            });
-          });
-
-          if (!(0, _isEqual["default"])(currentTexts, nextProps.session.texts)) {
-            TextEntry.setAll(nextProps.session.texts || []);
-          }
-        }
-      } else {
-        this.handleSessionChange();
-      }
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-
-      var _this$props3 = this.props,
-          classes = _this$props3.classes,
-          disabled = _this$props3.disabled,
-          drawableDimensions = _this$props3.drawableDimensions,
-          fillColor = _this$props3.fillColor,
-          imageDimensions = _this$props3.imageDimensions,
-          imageUrl = _this$props3.imageUrl,
-          paintColor = _this$props3.paintColor,
-          outlineColor = _this$props3.outlineColor,
-          TextEntry = _this$props3.TextEntry,
-          _this$props3$backgrou = _this$props3.backgroundImageEnabled,
-          backgroundImageEnabled = _this$props3$backgrou === void 0 ? true : _this$props3$backgrou,
-          type = _this$props3.toolActive.type,
-          scale = _this$props3.scale;
-      var _this$state3 = this.state,
-          isOver = _this$state3.isOver,
-          newDrawable = _this$state3.newDrawable;
-      var draggable = type === 'Select';
-      var paint = type === 'PaintBucket';
-      var drawables = [].concat((0, _toConsumableArray2["default"])(this.state.drawables), (0, _toConsumableArray2["default"])(this.state.newDrawable));
-      var drawableProps = {
-        draggable: draggable && !disabled,
-        disabled: disabled,
-        paint: paint,
-        fillColor: fillColor,
-        forceUpdate: function forceUpdate() {
-          return _this2.setState({
-            updatedAt: new Date()
-          });
-        },
-        paintColor: paintColor,
-        outlineColor: outlineColor,
-        toggleTextSelected: this.toggleTextSelected,
-        handleSessionChange: this.handleSessionChange,
-        stage: this.stage,
-        onMouseOverElement: this.onMouseOverElement,
-        onMouseOutElement: this.onMouseOutElement,
-        scale: scale
-      };
-      var 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;
-        }
-      }
-
-      var imageHeight = (imageDimensions === null || imageDimensions === void 0 ? void 0 : imageDimensions.height) * scale;
-      var imageWidth = (imageDimensions === null || imageDimensions === void 0 ? void 0 : imageDimensions.width) * scale;
-      return /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.wrapper
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.undoControls
-      }, /*#__PURE__*/_react["default"].createElement(_button["default"], {
-        disabled: disabled,
-        onClick: this.handleUndo,
-        label: "Undo"
-      }), /*#__PURE__*/_react["default"].createElement(_button["default"], {
-        disabled: disabled,
-        onClick: this.handleClearAll,
-        label: "Clear all"
-      })), /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.base
-      }, backgroundImageEnabled && imageUrl && /*#__PURE__*/_react["default"].createElement(_drawableImage["default"], {
-        dimensions: {
-          height: imageHeight,
-          width: imageWidth
-        },
-        url: imageUrl
-      }), TextEntry.renderTextareas(), /*#__PURE__*/_react["default"].createElement(_reactKonva.Stage, (0, _extends2["default"])({
-        scaleX: scale,
-        scaleY: scale,
-        ref: function ref(_ref2) {
-          _this2.stage = _ref2;
-        },
-        className: (0, _classnames2["default"])(classes.stage, (0, _defineProperty2["default"])({}, classes.active, draggable && (isOver || newDrawable && newDrawable.length === 1))),
-        height: drawableDimensions.height,
-        width: drawableDimensions.width
-      }, listeners), /*#__PURE__*/_react["default"].createElement(_reactKonva.Layer, {
-        ref: function ref(_ref) {
-          _this2.layer = _ref;
-        }
-      }, drawables.map(function (drawable, key) {
-        return drawable.render(_objectSpread(_objectSpread({}, drawableProps), {}, {
-          key: key
-        }));
-      }), TextEntry.render(drawableProps)))));
-    }
-  }]);
-  return DrawableMain;
-}(_react["default"].Component);
-
-exports.DrawableMain = DrawableMain;
-
-var styles = function styles() {
-  return {
-    wrapper: {
-      display: 'flex',
-      flexWrap: 'wrap',
-      justifyContent: 'flex-end'
-    },
-    base: {
-      position: 'relative',
-      width: '100%'
-    },
-    stage: {
-      left: 0,
-      position: 'absolute',
-      touchAction: 'none',
-      top: 0
-    },
-    active: {
-      cursor: 'pointer'
-    },
-    undoControls: {
-      marginTop: -43,
-      width: 163
-    }
-  };
-};
-
-DrawableMain.propTypes = {
-  classes: _propTypes["default"].object.isRequired,
-  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
-};
-
-var _default = (0, _styles.withStyles)(styles)(DrawableMain);
-
-exports["default"] = _default;
-//# sourceMappingURL=drawable-main.js.map

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

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/drawing-response/drawable-main.jsx"],"names":["DrawableMain","props","onSessionChange","session","TextEntry","drawables","state","newSession","map","d","toJson","texts","all","text","id","attrs","value","setState","isOver","e","document","body","style","overflow","newDrawable","textIsSelected","toolActive","fillColor","outlineColor","scale","length","target","getStage","getPointerPosition","x","y","type","startx","starty","createdAt","Date","drawableToAdd","registerMovement","push","handleSessionChange","bind","updatedNewDrawable","newDrawables","allData","sort","a","b","lastElement","pop","updatedAt","nextProps","currentDrawables","drawablesString","JSON","stringify","sessionDrawableString","drawable","drawableArray","currentTexts","setAll","classes","disabled","drawableDimensions","imageDimensions","imageUrl","paintColor","backgroundImageEnabled","draggable","paint","drawableProps","forceUpdate","toggleTextSelected","stage","onMouseOverElement","onMouseOutElement","listeners","onMouseUp","handleMouseUp","onTouchEnd","onMouseMove","handleMouseMove","onTouchMove","onMouseDown","handleMouseDown","onTouchStart","imageHeight","height","imageWidth","width","wrapper","undoControls","handleUndo","handleClearAll","base","renderTextareas","ref","active","layer","key","render","React","Component","styles","display","flexWrap","justifyContent","position","left","touchAction","top","cursor","marginTop","propTypes","PropTypes","object","isRequired","bool","string","func","number"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport omit from 'lodash/omit';\nimport cloneDeep from 'lodash/cloneDeep';\nimport isEqual from 'lodash/isEqual';\nimport classnames from 'classnames';\nimport { Layer, Stage } from 'react-konva';\nimport { withStyles } from '@material-ui/core/styles';\n\nimport ImageBackground from './drawable-image';\nimport Button from './button';\nimport factory from './factory';\n\nexport class DrawableMain extends React.Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      drawables: [],\n      newDrawable: [],\n      textIsSelected: false\n    };\n  }\n\n  UNSAFE_componentWillReceiveProps(nextProps) {\n    if (nextProps.session) {\n      const { TextEntry } = nextProps;\n      const { drawables: currentDrawables } = this.state;\n\n      if (nextProps.session.drawables) {\n        const newDrawables = cloneDeep(nextProps.session.drawables);\n        const drawablesString = JSON.stringify(currentDrawables);\n        const sessionDrawableString = JSON.stringify(\n          (newDrawables || []).map(drawable => omit(drawable, 'type'))\n        );\n\n        if (drawablesString !== sessionDrawableString) {\n          const drawableArray = nextProps.session.drawables;\n\n          this.setState({\n            drawables: drawableArray.map(drawable =>\n              factory(drawable.type, drawable)\n            )\n          });\n        }\n\n        const currentTexts = TextEntry.all.map(text => ({\n          ...text,\n          ...(TextEntry[`text_${text.id}`] &&\n            TextEntry[`text_${text.id}`].attrs),\n          value:\n            TextEntry[`textarea_${text.id}`] &&\n            TextEntry[`textarea_${text.id}`].value\n        }));\n\n        if (!isEqual(currentTexts, nextProps.session.texts)) {\n          TextEntry.setAll(nextProps.session.texts || []);\n        }\n      }\n    } else {\n      this.handleSessionChange();\n    }\n  }\n\n  handleSessionChange = () => {\n    const { onSessionChange, session, TextEntry } = this.props;\n    const { drawables } = this.state;\n\n    const newSession = {\n      drawables: drawables.map(d => d.toJson()),\n      texts: TextEntry.all.map(text => ({\n        ...text,\n        ...(TextEntry[`text_${text.id}`] && TextEntry[`text_${text.id}`].attrs),\n        value:\n          TextEntry[`textarea_${text.id}`] &&\n          TextEntry[`textarea_${text.id}`].value\n      }))\n    };\n\n    if (!isEqual(newSession, session)) {\n      onSessionChange({\n        ...session,\n        ...newSession\n      });\n    }\n  };\n\n  onMouseOverElement = () => this.setState({ isOver: true });\n\n  onMouseOutElement = () => this.setState({ isOver: false });\n\n  handleMouseDown = e => {\n    // ONLY IF MOBILE?\n    document.body.style.overflow = 'hidden';\n\n    const { newDrawable, textIsSelected } = this.state;\n    const { toolActive, fillColor, outlineColor, scale } = this.props;\n\n    if (newDrawable.length === 0 && !textIsSelected) {\n      const { x, y } = e.target.getStage().getPointerPosition();\n\n      const newDrawable = factory(toolActive.type, {\n        startx: x / scale,\n        starty: y / scale,\n        fillColor,\n        outlineColor,\n        createdAt: new Date()\n      });\n\n      this.setState({\n        newDrawable: [newDrawable]\n      });\n    }\n  };\n\n  handleMouseUp = e => {\n    // ONLY IF MOBILE?\n    document.body.style.overflow = 'initial';\n\n    const { newDrawable, drawables } = this.state;\n    const { scale } = this.props;\n\n    if (newDrawable.length === 1) {\n      const { x, y } = e.target.getStage().getPointerPosition();\n      const drawableToAdd = newDrawable[0];\n\n      drawableToAdd.registerMovement(x / scale, y / scale);\n      drawables.push(drawableToAdd);\n\n      this.setState(\n        {\n          newDrawable: [],\n          drawables\n        },\n        this.handleSessionChange.bind(this, drawableToAdd)\n      );\n    }\n  };\n\n  handleMouseMove = e => {\n    const { newDrawable } = this.state;\n    const { scale } = this.props;\n\n    if (newDrawable.length === 1) {\n      const { x, y } = e.target.getStage().getPointerPosition();\n      const updatedNewDrawable = newDrawable[0];\n\n      updatedNewDrawable.registerMovement(x / scale, y / scale);\n\n      this.setState({\n        newDrawable: [updatedNewDrawable]\n      });\n    }\n  };\n\n  handleUndo = () => {\n    const { drawables } = this.state;\n    const { TextEntry } = this.props;\n\n    const newDrawables = [...drawables];\n    const allData = [...drawables, ...TextEntry.all];\n\n    allData.sort((a, b) => new Date(a.createdAt) - new Date(b.createdAt));\n    const lastElement = allData[allData.length - 1];\n\n    if (lastElement && lastElement.type === 'text-entry') {\n      TextEntry.all.pop();\n      this.setState({ updatedAt: new Date() }, this.handleSessionChange);\n    } else {\n      newDrawables.pop();\n      this.setState({ drawables: newDrawables }, this.handleSessionChange);\n    }\n  };\n\n  handleClearAll = () => {\n    const { TextEntry } = this.props;\n\n    TextEntry.all = [];\n    this.setState(\n      { drawables: [], updatedAt: new Date() },\n      this.handleSessionChange\n    );\n  };\n\n  toggleTextSelected = textIsSelected => this.setState({ textIsSelected });\n\n  render() {\n    const {\n      classes,\n      disabled,\n      drawableDimensions,\n      fillColor,\n      imageDimensions,\n      imageUrl,\n      paintColor,\n      outlineColor,\n      TextEntry,\n      backgroundImageEnabled = true,\n      toolActive: { type },\n      scale\n    } = this.props;\n    const { isOver, newDrawable } = this.state;\n\n    const draggable = type === 'Select';\n    const paint = type === 'PaintBucket';\n    const drawables = [...this.state.drawables, ...this.state.newDrawable];\n\n    const drawableProps = {\n      draggable: draggable && !disabled,\n      disabled,\n      paint,\n      fillColor,\n      forceUpdate: () => this.setState({ updatedAt: new Date() }),\n      paintColor,\n      outlineColor,\n      toggleTextSelected: this.toggleTextSelected,\n      handleSessionChange: this.handleSessionChange,\n      stage: this.stage,\n      onMouseOverElement: this.onMouseOverElement,\n      onMouseOutElement: this.onMouseOutElement,\n      scale\n    };\n\n    let listeners = {};\n\n    if (!disabled) {\n      listeners = {\n        onMouseUp: this.handleMouseUp,\n        onTouchEnd: this.handleMouseUp,\n        onMouseMove: this.handleMouseMove,\n        onTouchMove: this.handleMouseMove,\n      };\n\n      if (!draggable) {\n        listeners.onMouseDown = this.handleMouseDown;\n        listeners.onTouchStart = this.handleMouseDown;\n      }\n    }\n\n    const imageHeight = imageDimensions?.height * scale;\n    const imageWidth = imageDimensions?.width * scale;\n\n    return (\n      <div className={classes.wrapper}>\n        <div className={classes.undoControls}>\n          <Button disabled={disabled} onClick={this.handleUndo} label=\"Undo\"/>\n          <Button disabled={disabled} onClick={this.handleClearAll} label=\"Clear all\"/>\n        </div>\n        <div className={classes.base}>\n          {backgroundImageEnabled && imageUrl && (\n            <ImageBackground\n              dimensions={{ height: imageHeight, width: imageWidth }}\n              url={imageUrl}/>\n          )}\n\n          {TextEntry.renderTextareas()}\n\n          <Stage\n            scaleX={scale}\n            scaleY={scale}\n            ref={ref => {\n              this.stage = ref;\n            }}\n            className={classnames(classes.stage, {\n              [classes.active]:\n              draggable &&\n              (isOver || (newDrawable && newDrawable.length === 1))\n            })}\n            height={drawableDimensions.height}\n            width={drawableDimensions.width}\n            {...listeners}\n          >\n            <Layer\n              ref={ref => {\n                this.layer = ref;\n              }}\n            >\n              {drawables.map((drawable, key) =>\n                drawable.render({ ...drawableProps, key })\n              )}\n              {/* Text Entry is a special case  */}\n              {TextEntry.render(drawableProps)}\n            </Layer>\n          </Stage>\n        </div>\n      </div>\n    );\n  }\n}\n\nconst styles = () => ({\n  wrapper: {\n    display: 'flex',\n    flexWrap: 'wrap',\n    justifyContent: 'flex-end'\n  },\n  base: {\n    position: 'relative',\n    width: '100%'\n  },\n  stage: {\n    left: 0,\n    position: 'absolute',\n    touchAction: 'none',\n    top: 0\n  },\n  active: {\n    cursor: 'pointer'\n  },\n  undoControls: {\n    marginTop: -43,\n    width: 163\n  }\n});\n\nDrawableMain.propTypes = {\n  classes: PropTypes.object.isRequired,\n  disabled: PropTypes.bool,\n  drawableDimensions: PropTypes.object.isRequired,\n  imageDimensions: PropTypes.object.isRequired,\n  fillColor: PropTypes.string.isRequired,\n  onSessionChange: PropTypes.func.isRequired,\n  paintColor: PropTypes.string.isRequired,\n  outlineColor: PropTypes.string.isRequired,\n  imageUrl: PropTypes.string.isRequired,\n  TextEntry: PropTypes.object.isRequired,\n  toolActive: PropTypes.object.isRequired,\n  session: PropTypes.object.isRequired,\n  backgroundImageEnabled: PropTypes.bool.isRequired,\n  scale: PropTypes.number.isRequired\n};\n\nexport default withStyles(styles)(DrawableMain);\n"],"file":"drawable-main.js"}

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

@@ -1,174 +0,0 @@
-"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 _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _renderUi = require("@pie-lib/render-ui");
-
-var _Select = _interopRequireDefault(require("@material-ui/core/Select"));
-
-var _MenuItem = _interopRequireDefault(require("@material-ui/core/MenuItem"));
-
-var _styles = require("@material-ui/core/styles");
-
-var _classnames2 = _interopRequireDefault(require("classnames"));
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-// TODO: Change Palette so will render inputs and colors dynamically
-var Palette = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2["default"])(Palette, _React$Component);
-
-  var _super = _createSuper(Palette);
-
-  function Palette() {
-    var _this;
-
-    (0, _classCallCheck2["default"])(this, Palette);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _super.call.apply(_super, [this].concat(args));
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onChange", function (name) {
-      return function (event) {
-        var value = event.target.value;
-        var _this$props = _this.props,
-            onFillColorChange = _this$props.onFillColorChange,
-            onOutlineColorChange = _this$props.onOutlineColorChange,
-            onPaintColorChange = _this$props.onPaintColorChange;
-
-        if (name === 'fill') {
-          onFillColorChange(value);
-        } else if (name === 'outline') {
-          onOutlineColorChange(value);
-        } else {
-          onPaintColorChange(value);
-        }
-      };
-    });
-    return _this;
-  }
-
-  (0, _createClass2["default"])(Palette, [{
-    key: "render",
-    value: function render() {
-      var _this$props2 = this.props,
-          classes = _this$props2.classes,
-          fillColor = _this$props2.fillColor,
-          outlineColor = _this$props2.outlineColor,
-          fillList = _this$props2.fillList,
-          outlineList = _this$props2.outlineList;
-      return /*#__PURE__*/_react["default"].createElement("div", {
-        className: classes.base
-      }, /*#__PURE__*/_react["default"].createElement(_renderUi.InputContainer, {
-        label: "Fill Color",
-        className: classes.input
-      }, /*#__PURE__*/_react["default"].createElement(_Select["default"], {
-        className: classes.select,
-        onChange: this.onChange('fill'),
-        value: fillColor
-      }, fillList.map(function (_ref) {
-        var value = _ref.value,
-            label = _ref.label;
-        return /*#__PURE__*/_react["default"].createElement(_MenuItem["default"], {
-          key: value,
-          value: value,
-          className: (0, _classnames2["default"])(classes.item, (0, _defineProperty2["default"])({}, classes.blackColorItem, value === 'black')),
-          style: {
-            backgroundColor: value
-          }
-        }, label);
-      }))), /*#__PURE__*/_react["default"].createElement(_renderUi.InputContainer, {
-        label: "Outline Color",
-        className: classes.input
-      }, /*#__PURE__*/_react["default"].createElement(_Select["default"], {
-        className: classes.select,
-        onChange: this.onChange('outline'),
-        value: outlineColor
-      }, outlineList.map(function (_ref2) {
-        var value = _ref2.value,
-            label = _ref2.label;
-        return /*#__PURE__*/_react["default"].createElement(_MenuItem["default"], {
-          key: value,
-          value: value,
-          className: classes.item,
-          style: {
-            border: "2px solid ".concat(value)
-          }
-        }, label);
-      }))));
-    }
-  }]);
-  return Palette;
-}(_react["default"].Component);
-
-var styles = function styles(theme) {
-  return {
-    base: {
-      marginTop: theme.spacing.unit * 2,
-      display: 'flex'
-    },
-    input: {
-      flex: 1,
-      fontSize: 'inherit',
-      width: '90%'
-    },
-    item: {
-      borderRadius: '2px',
-      fontSize: 'inherit',
-      height: '22px',
-      marginLeft: theme.spacing.unit * 2,
-      marginRight: theme.spacing.unit * 2,
-      marginTop: theme.spacing.unit * 2
-    },
-    blackColorItem: {
-      color: theme.palette.background.paper
-    },
-    select: {
-      fontSize: 'inherit',
-      transform: 'translate(0%, 40%)'
-    }
-  };
-};
-
-Palette.propTypes = {
-  classes: _propTypes["default"].object.isRequired,
-  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
-};
-
-var _default = (0, _styles.withStyles)(styles)(Palette);
-
-exports["default"] = _default;
-//# sourceMappingURL=drawable-palette.js.map

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

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