@pie-element/drawing-response 10.3.4-next.0 → 11.0.0-beta.0

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

@@ -1,419 +1,347 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.DrawableMain = void 0;
-
+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 _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"));
-
-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 translator = _translator["default"].translator;
-
-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,
-          drawableDimensions = _this$props.drawableDimensions;
-      var drawables = _this.state.drawables;
-      var newSession = {
+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(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
-          });
-        })
+        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, _isEqual["default"])(newSession, session)) {
-        onSessionChange(_objectSpread(_objectSpread({}, session), newSession));
+      if (!(0, _isEqual.default)(newSession, session)) {
+        onSessionChange({
+          ...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) {
+    (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';
-      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;
-
+      const {
+        newDrawable,
+        textIsSelected
+      } = this.state;
+      const {
+        toolActive,
+        fillColor,
+        outlineColor,
+        scale
+      } = this.props;
       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, {
+        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: fillColor,
-          outlineColor: outlineColor,
+          fillColor,
+          outlineColor,
           createdAt: new Date()
         });
-
-        _this.setState({
-          newDrawable: [_newDrawable]
+        this.setState({
+          newDrawable: [newDrawable]
         });
       }
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleMouseUp", function (e) {
+    (0, _defineProperty2.default)(this, "handleMouseUp", 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;
-
+      const {
+        newDrawable,
+        drawables
+      } = this.state;
+      const {
+        scale
+      } = this.props;
       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];
+        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({
+        this.setState({
           newDrawable: [],
-          drawables: drawables
-        }, _this.handleSessionChange.bind((0, _assertThisInitialized2["default"])(_this), drawableToAdd));
+          drawables
+        }, this.handleSessionChange.bind(this, drawableToAdd));
       }
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleMouseMove", function (e) {
-      var newDrawable = _this.state.newDrawable;
-      var scale = _this.props.scale;
-
+    (0, _defineProperty2.default)(this, "handleMouseMove", e => {
+      const {
+        newDrawable
+      } = this.state;
+      const {
+        scale
+      } = this.props;
       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];
+        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({
+        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];
-
+    (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({
+        this.setState({
           updatedAt: new Date()
-        }, _this.handleSessionChange);
+        }, this.handleSessionChange);
       } else {
         newDrawables.pop();
-
-        _this.setState({
+        this.setState({
           drawables: newDrawables
-        }, _this.handleSessionChange);
+        }, this.handleSessionChange);
       }
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleClearAll", function () {
-      var TextEntry = _this.props.TextEntry;
+    (0, _defineProperty2.default)(this, "handleClearAll", () => {
+      const {
+        TextEntry
+      } = this.props;
       TextEntry.all = [];
-
-      _this.setState({
+      this.setState({
         drawables: [],
         updatedAt: new Date()
-      }, _this.handleSessionChange);
+      }, this.handleSessionChange);
     });
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "toggleTextSelected", function (textIsSelected) {
-      return _this.setState({
-        textIsSelected: textIsSelected
-      });
-    });
-    _this.state = {
+    (0, _defineProperty2.default)(this, "toggleTextSelected", textIsSelected => this.setState({
+      textIsSelected
+    }));
+    this.state = {
       drawables: [],
       newDrawable: [],
       textIsSelected: false
     };
-    return _this;
+    this.stage = null;
+    this.layer = null;
   }
-
-  (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
-            });
+  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, _cloneDeep.default)(nextProps.session.drawables);
+        const drawablesString = JSON.stringify(currentDrawables);
+        const sessionDrawableString = JSON.stringify((newDrawables || []).map(drawable => (0, _omit.default)(drawable, 'type')));
+        if (drawablesString !== sessionDrawableString) {
+          const drawableArray = nextProps.session.drawables;
+          this.setState({
+            drawables: drawableArray.map(drawable => (0, _factory.default)(drawable.type, drawable))
           });
-
-          if (!(0, _isEqual["default"])(currentTexts, nextProps.session.texts)) {
-            TextEntry.setAll(nextProps.session.texts || []);
-          }
         }
-      } else {
-        this.handleSessionChange();
+        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, _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,
-          language = _this$props3.language;
-      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
+  }
+  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
       };
-      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;
-        }
+      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: 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("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);
-
+    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;
-
-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,
-      marginRight: 10,
-      position: 'absolute'
-    }
-  };
-};
-
 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,
-  language: _propTypes["default"].string
+  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 = (0, _styles.withStyles)(styles)(DrawableMain);
-
-exports["default"] = _default;
+var _default = exports.default = DrawableMain;
 //# sourceMappingURL=drawable-main.js.map