@pie-element/drawing-response 3.7.2 → 3.7.3-next.1008

package/module/element.js

@@ -1,1893 +0,0 @@
-import {_dll_prop_types, _dll_material_ui__core_styles, _dll_react, _dll_material_ui__core, _dll_pie_lib__render_ui, _dll_lodash, _dll_react_dom, _dll_pie_lib__math_rendering, _dll_pie_framework__pie_player_events} from "../../../@pie-ui/shared-lib@^4.3.3/module/index.js";
-import {_dll_react_konva} from "../../../@pie-ui/shared-konva@^2.5.17/module/index.js";
-var constants = {
-  tools: [{
-    type: 'Select',
-    label: 'Select',
-    icon: 'mdiCursorDefault'
-  }, {
-    type: 'FreePathDrawable',
-    label: 'Free Draw',
-    icon: 'mdiPencil'
-  }, {
-    type: 'LineDrawable',
-    label: 'Line',
-    icon: 'mdiMinus'
-  }, {
-    type: 'RectangleDrawable',
-    label: 'Rectangle',
-    icon: 'mdiRectangle'
-  }, {
-    type: 'CircleDrawable',
-    label: 'Circle',
-    icon: 'mdiCircle'
-  }, {
-    type: 'Text',
-    label: 'Text Entry',
-    icon: 'mdiFormatColorText'
-  }, {
-    type: 'EraserDrawable',
-    label: 'Eraser',
-    icon: 'mdiEraser'
-  }]
-};
-function unwrapExports(x) {
-  return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
-}
-function createCommonjsModule(fn, module) {
-  return (module = {
-    exports: {}
-  }, fn(module, module.exports), module.exports);
-}
-var classnames = createCommonjsModule(function (module) {
-  (function () {
-    var hasOwn = ({}).hasOwnProperty;
-    function classNames() {
-      var classes = [];
-      for (var i = 0; i < arguments.length; i++) {
-        var arg = arguments[i];
-        if (!arg) continue;
-        var argType = typeof arg;
-        if (argType === 'string' || argType === 'number') {
-          classes.push(arg);
-        } else if (Array.isArray(arg) && arg.length) {
-          var inner = classNames.apply(null, arg);
-          if (inner) {
-            classes.push(inner);
-          }
-        } else if (argType === 'object') {
-          for (var key in arg) {
-            if (hasOwn.call(arg, key) && arg[key]) {
-              classes.push(key);
-            }
-          }
-        }
-      }
-      return classes.join(' ');
-    }
-    if (module.exports) {
-      classNames.default = classNames;
-      module.exports = classNames;
-    } else {
-      window.classNames = classNames;
-    }
-  })();
-});
-const React = _dll_react;
-const PropTypes = _dll_prop_types;
-const {withStyles: withStyles} = _dll_material_ui__core_styles;
-const {Button: Button} = _dll_material_ui__core;
-const _jsxFileName = "/home/ede/dev/github/pie-framework/pie-elements/node_modules/@pie-ui/drawing-response/src/drawing-response/button.jsx";
-const RawButton = ({classes, className, label, onClick, disabled, title}) => React.createElement(Button, {
-  title: title,
-  onClick: onClick,
-  disabled: disabled,
-  className: classnames(classes.addButton, className),
-  size: "small",
-  variant: "contained",
-  color: "default",
-  __self: undefined,
-  __source: {
-    fileName: _jsxFileName,
-    lineNumber: 8
-  }
-}, label);
-RawButton.propTypes = {
-  classes: PropTypes.object.isRequired,
-  className: PropTypes.string,
-  disabled: PropTypes.bool,
-  label: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-  onClick: PropTypes.func,
-  title: PropTypes.string
-};
-RawButton.defaultProps = {
-  className: '',
-  disabled: false,
-  label: 'Add',
-  onClick: () => {},
-  title: ''
-};
-const styles = () => ({
-  addButton: {
-    fontSize: '0.9em',
-    marginLeft: 8,
-    minWidth: 32,
-    height: 32,
-    '& span': {
-      '& svg': {
-        width: '1.3em !important',
-        height: '1.3em !important'
-      }
-    }
-  }
-});
-const ButtonStyled = withStyles(styles)(RawButton);
-const React$1 = _dll_react;
-const PropTypes$1 = _dll_prop_types;
-const {InputContainer: InputContainer} = _dll_pie_lib__render_ui;
-const {Select: Select} = _dll_material_ui__core;
-const {MenuItem: MenuItem} = _dll_material_ui__core;
-const {withStyles: withStyles$1} = _dll_material_ui__core_styles;
-const _jsxFileName$1 = "/home/ede/dev/github/pie-framework/pie-elements/node_modules/@pie-ui/drawing-response/src/drawing-response/drawable-palette.jsx";
-class Palette extends React$1.Component {
-  constructor(...args) {
-    super(...args);
-    Palette.prototype.__init.call(this);
-  }
-  __init() {
-    this.onChange = name => event => {
-      const {value} = event.target;
-      const {onFillColorChange, onOutlineColorChange, onPaintColorChange} = this.props;
-      if (name === 'fill') {
-        onFillColorChange(value);
-      } else if (name === 'outline') {
-        onOutlineColorChange(value);
-      } else {
-        onPaintColorChange(value);
-      }
-    };
-  }
-  render() {
-    const {classes, fillColor, outlineColor, fillList, outlineList} = this.props;
-    return React$1.createElement('div', {
-      className: classes.base,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$1,
-        lineNumber: 37
-      }
-    }, React$1.createElement(InputContainer, {
-      label: "Fill Color",
-      className: classes.input,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$1,
-        lineNumber: 38
-      }
-    }, React$1.createElement(Select, {
-      className: classes.select,
-      onChange: this.onChange('fill'),
-      value: fillColor,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$1,
-        lineNumber: 39
-      }
-    }, fillList.map(({value, label}) => React$1.createElement(MenuItem, {
-      key: value,
-      value: value,
-      className: classes.item,
-      style: {
-        backgroundColor: value
-      },
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$1,
-        lineNumber: 45
-      }
-    }, label)))), React$1.createElement(InputContainer, {
-      label: "Outline Color",
-      className: classes.input,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$1,
-        lineNumber: 57
-      }
-    }, React$1.createElement(Select, {
-      className: classes.select,
-      onChange: this.onChange('outline'),
-      value: outlineColor,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$1,
-        lineNumber: 58
-      }
-    }, outlineList.map(({value, label}) => React$1.createElement(MenuItem, {
-      key: value,
-      value: value,
-      className: classes.item,
-      style: {
-        border: `2px solid ${value}`
-      },
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$1,
-        lineNumber: 64
-      }
-    }, label)))));
-  }
-}
-const styles$1 = theme => ({
-  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
-  },
-  select: {
-    fontSize: 'inherit',
-    transform: 'translate(0%, 40%)'
-  }
-});
-Palette.propTypes = {
-  classes: PropTypes$1.object.isRequired,
-  fillColor: PropTypes$1.string.isRequired,
-  fillList: PropTypes$1.array.isRequired,
-  onFillColorChange: PropTypes$1.func.isRequired,
-  onOutlineColorChange: PropTypes$1.func.isRequired,
-  onPaintColorChange: PropTypes$1.func.isRequired,
-  outlineColor: PropTypes$1.string.isRequired,
-  outlineList: PropTypes$1.array.isRequired
-};
-var DrawablePalette = withStyles$1(styles$1)(Palette);
-const React$2 = _dll_react;
-const PropTypes$2 = _dll_prop_types;
-const {withStyles: withStyles$2} = _dll_material_ui__core_styles;
-const _jsxFileName$2 = "/home/ede/dev/github/pie-framework/pie-elements/node_modules/@pie-ui/drawing-response/src/drawing-response/drawable-image.jsx";
-const DrawableImage = ({classes, url, dimensions: {height, width}}) => React$2.createElement('div', {
-  className: classes.imageContainer,
-  __self: undefined,
-  __source: {
-    fileName: _jsxFileName$2,
-    lineNumber: 6
-  }
-}, React$2.createElement('img', {
-  className: classes.image,
-  src: url,
-  style: {
-    height,
-    maxWidth: width,
-    maxHeight: 350,
-    width
-  },
-  __self: undefined,
-  __source: {
-    fileName: _jsxFileName$2,
-    lineNumber: 7
-  }
-}));
-const styles$2 = () => ({
-  image: {
-    alignItems: 'center',
-    display: 'flex',
-    justifyContent: 'center'
-  },
-  imageContainer: {
-    position: 'relative',
-    width: 'fit-content'
-  }
-});
-DrawableImage.propTypes = {
-  classes: PropTypes$2.object.isRequired,
-  dimensions: PropTypes$2.object.isRequired,
-  url: PropTypes$2.string.isRequired
-};
-var ImageBackground = withStyles$2(styles$2)(DrawableImage);
-class DrawableHelper {
-  constructor(props, type) {
-    const {startx, starty, fillColor, outlineColor, createdAt} = props;
-    this.startx = startx;
-    this.starty = starty;
-    this.createdAt = createdAt;
-    this.fillColor = fillColor;
-    this.outlineColor = outlineColor;
-    this.type = type;
-  }
-  toJson() {
-    const base = JSON.parse(JSON.stringify(this));
-    return base;
-  }
-}
-const React$3 = _dll_react;
-const {Line: Line} = _dll_react_konva;
-const _jsxFileName$3 = "/home/ede/dev/github/pie-framework/pie-elements/node_modules/@pie-ui/drawing-response/src/drawing-response/drawable-free-path.jsx";
-class FreePathDrawable extends DrawableHelper {
-  static __initStatic() {
-    this.TYPE = 'FreePathDrawable';
-  }
-  constructor(props) {
-    super(props, FreePathDrawable.TYPE);
-    FreePathDrawable.prototype.__init.call(this);
-    const {startx, starty, points, posX, posY} = props;
-    this.points = points || [startx, starty];
-    this.posX = posX || 0;
-    this.posY = posY || 0;
-  }
-  registerMovement(x, y) {
-    this.points = [...this.points, x, y];
-  }
-  handleOnClick(props) {
-    const {paint, paintColor, forceUpdate} = props;
-    if (paint) {
-      this.paintColor = paintColor;
-      forceUpdate();
-    }
-  }
-  __init() {
-    this.handleDragEnd = (props, event) => {
-      this.posX = event.target.getX();
-      this.posY = event.target.getY();
-      props.handleSessionChange();
-    };
-  }
-  render(props) {
-    const {draggable, key, onMouseOverElement, onMouseOutElement} = props;
-    return React$3.createElement(Line, {
-      key: key,
-      draggable: draggable,
-      tension: 0,
-      bezier: true,
-      points: this.points,
-      fill: this.paintColor || this.fillColor,
-      onClick: () => this.handleOnClick(props),
-      onDragEnd: this.handleDragEnd.bind(this, props),
-      onMouseEnter: onMouseOverElement,
-      onMouseLeave: onMouseOutElement,
-      stroke: this.paintColor || this.outlineColor,
-      x: this.posX,
-      y: this.posY,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$3,
-        lineNumber: 42
-      }
-    });
-  }
-}
-FreePathDrawable.__initStatic();
-const React$4 = _dll_react;
-const {Arrow: Arrow} = _dll_react_konva;
-const _jsxFileName$4 = "/home/ede/dev/github/pie-framework/pie-elements/node_modules/@pie-ui/drawing-response/src/drawing-response/drawable-line.jsx";
-class LineDrawable extends DrawableHelper {
-  static __initStatic() {
-    this.TYPE = 'LineDrawable';
-  }
-  constructor(props) {
-    super(props, LineDrawable.TYPE);
-    LineDrawable.prototype.__init.call(this);
-    const {startx, starty, x, y, posX, posY} = props;
-    this.x = x || startx;
-    this.y = y || starty;
-    this.posX = posX || 0;
-    this.posY = posY || 0;
-  }
-  registerMovement(x, y) {
-    this.x = x;
-    this.y = y;
-  }
-  handleOnClick(props) {
-    const {paint, paintColor, forceUpdate} = props;
-    if (paint) {
-      this.paintColor = paintColor;
-      forceUpdate();
-    }
-  }
-  __init() {
-    this.handleDragEnd = (props, event) => {
-      this.posX = event.target.getX();
-      this.posY = event.target.getY();
-      props.handleSessionChange();
-    };
-  }
-  render(props) {
-    const {draggable, key, onMouseOverElement, onMouseOutElement} = props;
-    const points = [this.startx, this.starty, this.x, this.y];
-    return React$4.createElement(Arrow, {
-      key: key,
-      draggable: draggable,
-      points: points,
-      fill: this.paintColor || this.outlineColor,
-      onClick: () => this.handleOnClick(props),
-      stroke: this.paintColor || this.outlineColor,
-      onDragEnd: this.handleDragEnd.bind(this, props),
-      onMouseEnter: onMouseOverElement,
-      onMouseLeave: onMouseOutElement,
-      x: this.posX,
-      y: this.posY,
-      pointerWidth: 0,
-      pointerLength: 0,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$4,
-        lineNumber: 45
-      }
-    });
-  }
-}
-LineDrawable.__initStatic();
-const React$5 = _dll_react;
-const {Rect: Rect} = _dll_react_konva;
-const _jsxFileName$5 = "/home/ede/dev/github/pie-framework/pie-elements/node_modules/@pie-ui/drawing-response/src/drawing-response/drawable-rectangle.jsx";
-class RectangleDrawable extends DrawableHelper {
-  static __initStatic() {
-    this.TYPE = 'RectangleDrawable';
-  }
-  constructor(props) {
-    super(props, RectangleDrawable.TYPE);
-    RectangleDrawable.prototype.__init.call(this);
-    const {startx, starty, x, y} = props;
-    this.startx = startx;
-    this.starty = starty;
-    this.x = x || startx;
-    this.y = y || starty;
-    this.width = x - startx || 0;
-    this.height = y - starty || 0;
-  }
-  registerMovement(x, y) {
-    this.x = x;
-    this.y = y;
-    this.width = this.x - this.startx;
-    this.height = this.y - this.starty;
-  }
-  handleOnClick(props) {
-    const {paint, paintColor, forceUpdate} = props;
-    if (paint) {
-      this.paintColor = paintColor;
-      forceUpdate();
-    }
-  }
-  __init() {
-    this.handleDragEnd = (props, event) => {
-      const deltaX = this.startx - event.target.getX();
-      const 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();
-    };
-  }
-  render(props) {
-    const {draggable, key, onMouseOverElement, onMouseOutElement} = props;
-    return React$5.createElement(Rect, {
-      key: key,
-      height: this.height,
-      width: this.width,
-      fill: this.paintColor || this.fillColor,
-      onClick: () => this.handleOnClick(props),
-      onDragEnd: this.handleDragEnd.bind(this, props),
-      onMouseEnter: onMouseOverElement,
-      onMouseLeave: onMouseOutElement,
-      stroke: this.outlineColor,
-      draggable: draggable,
-      strokeWidth: 2,
-      x: this.startx,
-      y: this.starty,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$5,
-        lineNumber: 52
-      }
-    });
-  }
-}
-RectangleDrawable.__initStatic();
-const React$6 = _dll_react;
-const {Circle: Circle} = _dll_react_konva;
-const _jsxFileName$6 = "/home/ede/dev/github/pie-framework/pie-elements/node_modules/@pie-ui/drawing-response/src/drawing-response/drawable-circle.jsx";
-class CircleDrawable extends DrawableHelper {
-  static __initStatic() {
-    this.TYPE = 'CircleDrawable';
-  }
-  constructor(props) {
-    super(props, CircleDrawable.TYPE);
-    CircleDrawable.prototype.__init.call(this);
-    const {startx, starty, x, y} = props;
-    this.startx = startx;
-    this.starty = starty;
-    this.x = x || startx;
-    this.y = y || starty;
-    const dx = this.startx - this.x;
-    const dy = this.starty - this.y;
-    this.radius = Math.sqrt(dx * dx + dy * dy);
-  }
-  registerMovement(x, y) {
-    this.x = x;
-    this.y = y;
-    const dx = this.startx - this.x;
-    const dy = this.starty - this.y;
-    this.radius = Math.sqrt(dx * dx + dy * dy);
-  }
-  handleOnClick(props) {
-    const {paint, paintColor, forceUpdate} = props;
-    if (paint) {
-      this.paintColor = paintColor;
-      forceUpdate();
-    }
-  }
-  __init() {
-    this.handleDragEnd = (props, event) => {
-      const deltaX = this.startx - event.target.getX();
-      const 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();
-    };
-  }
-  render(props) {
-    const {draggable, key, onMouseOverElement, onMouseOutElement} = props;
-    return React$6.createElement(Circle, {
-      key: key,
-      draggable: draggable,
-      radius: this.radius,
-      x: this.startx,
-      y: this.starty,
-      fill: this.paintColor || this.fillColor,
-      onClick: () => this.handleOnClick(props),
-      onDragEnd: this.handleDragEnd.bind(this, props),
-      onMouseEnter: onMouseOverElement,
-      onMouseLeave: onMouseOutElement,
-      stroke: this.outlineColor,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$6,
-        lineNumber: 59
-      }
-    });
-  }
-}
-CircleDrawable.__initStatic();
-const React$7 = _dll_react;
-const {Line: Line$1} = _dll_react_konva;
-const _jsxFileName$7 = "/home/ede/dev/github/pie-framework/pie-elements/node_modules/@pie-ui/drawing-response/src/drawing-response/drawable-eraser.jsx";
-class EraserDrawable extends DrawableHelper {
-  static __initStatic() {
-    this.TYPE = 'EraserDrawable';
-  }
-  constructor(props) {
-    super(props, EraserDrawable.TYPE);
-    EraserDrawable.prototype.__init.call(this);
-    const {startx, starty, points, posX, posY} = props;
-    this.points = points || [startx, starty];
-    this.posX = posX || 0;
-    this.posY = posY || 0;
-  }
-  registerMovement(x, y) {
-    this.points = [...this.points, x, y];
-  }
-  __init() {
-    this.handleDragEnd = (props, event) => {
-      this.posX = event.target.getX();
-      this.posY = event.target.getY();
-      props.handleSessionChange();
-    };
-  }
-  render(props) {
-    const {draggable, key, onMouseOverElement, onMouseOutElement} = props;
-    return React$7.createElement(Line$1, {
-      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,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$7,
-        lineNumber: 32
-      }
-    });
-  }
-}
-EraserDrawable.__initStatic();
-const DRAWABLES = [FreePathDrawable, LineDrawable, RectangleDrawable, CircleDrawable, EraserDrawable];
-var factory = (type, props) => {
-  const T = DRAWABLES.find(D => D.TYPE === type);
-  if (T) {
-    return new T(props);
-  }
-  throw new Error(`Can't find drawable for type: ${type} and props: ${JSON.stringify(props)}`);
-};
-const React$8 = _dll_react;
-const PropTypes$3 = _dll_prop_types;
-const {omit: omit} = _dll_lodash;
-const {cloneDeep: cloneDeep} = _dll_lodash;
-const {isEqual: isEqual} = _dll_lodash;
-const {withStyles: withStyles$3} = _dll_material_ui__core_styles;
-const {Layer: Layer} = _dll_react_konva;
-const {Stage: Stage} = _dll_react_konva;
-const _jsxFileName$8 = "/home/ede/dev/github/pie-framework/pie-elements/node_modules/@pie-ui/drawing-response/src/drawing-response/drawable-main.jsx";
-class DrawableMain extends React$8.Component {
-  constructor(props) {
-    super(props);
-    DrawableMain.prototype.__init.call(this);
-    DrawableMain.prototype.__init2.call(this);
-    DrawableMain.prototype.__init3.call(this);
-    DrawableMain.prototype.__init4.call(this);
-    DrawableMain.prototype.__init5.call(this);
-    DrawableMain.prototype.__init6.call(this);
-    DrawableMain.prototype.__init7.call(this);
-    DrawableMain.prototype.__init8.call(this);
-    DrawableMain.prototype.__init9.call(this);
-    this.state = {
-      drawables: [],
-      newDrawable: [],
-      textIsSelected: false
-    };
-  }
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    if (nextProps.session) {
-      const {TextEntry} = nextProps;
-      const {drawables: currentDrawables} = this.state;
-      if (nextProps.session.drawables) {
-        const newDrawables = cloneDeep(nextProps.session.drawables);
-        const drawablesString = JSON.stringify(currentDrawables);
-        const sessionDrawableString = JSON.stringify((newDrawables || []).map(drawable => omit(drawable, 'type')));
-        if (drawablesString !== sessionDrawableString) {
-          const drawableArray = nextProps.session.drawables;
-          this.setState({
-            drawables: drawableArray.map(drawable => factory(drawable.type, drawable))
-          });
-        }
-        const currentTexts = TextEntry.all.map(text => ({
-          ...text,
-          ...TextEntry[`text_${text.id}`] && TextEntry[`text_${text.id}`].attrs,
-          value: TextEntry[`textarea_${text.id}`] && TextEntry[`textarea_${text.id}`].value
-        }));
-        if (!isEqual(currentTexts, nextProps.session.texts)) {
-          TextEntry.setAll(nextProps.session.texts || []);
-        }
-      }
-    } else {
-      this.handleSessionChange();
-    }
-  }
-  __init() {
-    this.handleSessionChange = () => {
-      const {onSessionChange, session, TextEntry} = this.props;
-      const {drawables} = this.state;
-      const newSession = {
-        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 (!isEqual(newSession, session)) {
-        onSessionChange({
-          ...session,
-          ...newSession
-        });
-      }
-    };
-  }
-  __init2() {
-    this.onMouseOverElement = () => this.setState({
-      isOver: true
-    });
-  }
-  __init3() {
-    this.onMouseOutElement = () => this.setState({
-      isOver: false
-    });
-  }
-  __init4() {
-    this.handleMouseDown = e => {
-      const {newDrawable, textIsSelected} = this.state;
-      const {toolActive, fillColor, outlineColor} = this.props;
-      if (newDrawable.length === 0 && !textIsSelected) {
-        const {x, y} = e.target.getStage().getPointerPosition();
-        const newDrawable = factory(toolActive.type, {
-          startx: x,
-          starty: y,
-          fillColor,
-          outlineColor,
-          createdAt: new Date()
-        });
-        this.setState({
-          newDrawable: [newDrawable]
-        });
-      }
-    };
-  }
-  __init5() {
-    this.handleMouseUp = e => {
-      const {newDrawable, drawables} = this.state;
-      if (newDrawable.length === 1) {
-        const {x, y} = e.target.getStage().getPointerPosition();
-        const drawableToAdd = newDrawable[0];
-        drawableToAdd.registerMovement(x, y);
-        drawables.push(drawableToAdd);
-        this.setState({
-          newDrawable: [],
-          drawables
-        }, this.handleSessionChange.bind(this, drawableToAdd));
-      }
-    };
-  }
-  __init6() {
-    this.handleMouseMove = e => {
-      const {newDrawable} = this.state;
-      if (newDrawable.length === 1) {
-        const {x, y} = e.target.getStage().getPointerPosition();
-        const updatedNewDrawable = newDrawable[0];
-        updatedNewDrawable.registerMovement(x, y);
-        this.setState({
-          newDrawable: [updatedNewDrawable]
-        });
-      }
-    };
-  }
-  __init7() {
-    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.type === 'text-entry') {
-        TextEntry.all.pop();
-        this.setState({
-          updatedAt: new Date()
-        }, this.handleSessionChange);
-      } else {
-        newDrawables.pop();
-        this.setState({
-          drawables: newDrawables
-        }, this.handleSessionChange);
-      }
-    };
-  }
-  __init8() {
-    this.handleClearAll = () => {
-      const {TextEntry} = this.props;
-      TextEntry.all = [];
-      this.setState({
-        drawables: [],
-        updatedAt: new Date()
-      }, this.handleSessionChange);
-    };
-  }
-  __init9() {
-    this.toggleTextSelected = textIsSelected => this.setState({
-      textIsSelected
-    });
-  }
-  render() {
-    const {classes, disabled, drawableDimensions, fillColor, imageDimensions, imageUrl, paintColor, outlineColor, TextEntry, toolActive: {type}} = 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
-    };
-    let listeners = {};
-    if (!disabled) {
-      listeners = {
-        onMouseUp: this.handleMouseUp,
-        onMouseMove: this.handleMouseMove
-      };
-      if (!draggable) {
-        listeners.onMouseDown = this.handleMouseDown;
-      }
-    }
-    return React$8.createElement('div', {
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$8,
-        lineNumber: 225
-      }
-    }, React$8.createElement('div', {
-      className: classes.undoControls,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$8,
-        lineNumber: 226
-      }
-    }, React$8.createElement(ButtonStyled, {
-      disabled: disabled,
-      onClick: this.handleUndo,
-      label: "Undo",
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$8,
-        lineNumber: 227
-      }
-    }), React$8.createElement(ButtonStyled, {
-      disabled: disabled,
-      onClick: this.handleClearAll,
-      label: "Clear all",
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$8,
-        lineNumber: 228
-      }
-    })), React$8.createElement('div', {
-      className: classes.base,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$8,
-        lineNumber: 230
-      }
-    }, imageUrl && React$8.createElement(ImageBackground, {
-      dimensions: imageDimensions,
-      url: imageUrl,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$8,
-        lineNumber: 232
-      }
-    }), TextEntry.renderTextareas(), React$8.createElement(Stage, {
-      ref: ref => {
-        this.stage = ref;
-      },
-      className: classnames(classes.stage, {
-        [classes.active]: draggable && (isOver || newDrawable && newDrawable.length === 1)
-      }),
-      height: drawableDimensions.height,
-      width: drawableDimensions.width,
-      ...listeners,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$8,
-        lineNumber: 237
-      }
-    }, React$8.createElement(Layer, {
-      ref: ref => {
-        this.layer = ref;
-      },
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$8,
-        lineNumber: 250
-      }
-    }, drawables.map((drawable, key) => drawable.render({
-      ...drawableProps,
-      key
-    })), TextEntry.render(drawableProps)))));
-  }
-}
-const styles$3 = () => ({
-  base: {
-    position: 'relative',
-    width: '100%'
-  },
-  stage: {
-    left: 0,
-    position: 'absolute',
-    top: 0
-  },
-  active: {
-    cursor: 'pointer'
-  },
-  undoControls: {
-    float: 'right',
-    marginTop: -43,
-    width: 163
-  }
-});
-DrawableMain.propTypes = {
-  classes: PropTypes$3.object.isRequired,
-  disabled: PropTypes$3.bool,
-  drawableDimensions: PropTypes$3.object.isRequired,
-  imageDimensions: PropTypes$3.object.isRequired,
-  fillColor: PropTypes$3.string.isRequired,
-  onSessionChange: PropTypes$3.func.isRequired,
-  paintColor: PropTypes$3.string.isRequired,
-  outlineColor: PropTypes$3.string.isRequired,
-  imageUrl: PropTypes$3.string.isRequired,
-  TextEntry: PropTypes$3.object.isRequired,
-  toolActive: PropTypes$3.object.isRequired,
-  session: PropTypes$3.object.isRequired
-};
-var DrawableMain$1 = withStyles$3(styles$3)(DrawableMain);
-const React$9 = _dll_react;
-const PropTypes$4 = _dll_prop_types;
-const {Transformer: Transformer} = _dll_react_konva;
-const _jsxFileName$9 = "/home/ede/dev/github/pie-framework/pie-elements/node_modules/@pie-ui/drawing-response/src/drawing-response/drawable-transformer.jsx";
-class TransformerComponent extends React$9.Component {
-  componentDidMount() {
-    this.checkNode();
-  }
-  componentDidUpdate() {
-    this.checkNode();
-  }
-  checkNode() {
-    const stage = this.transformer.getStage();
-    const {selectedShapeName} = this.props;
-    const selectedNode = stage.findOne(`.${selectedShapeName}`);
-    if (selectedNode === this.transformer.node()) {
-      return;
-    }
-    if (selectedNode) {
-      this.transformer.attachTo(selectedNode);
-    } else {
-      this.transformer.detach();
-    }
-    this.transformer.getLayer().batchDraw();
-  }
-  render() {
-    return React$9.createElement(Transformer, {
-      ref: node => {
-        this.transformer = node;
-      },
-      enabledAnchors: ['middle-left', 'middle-right'],
-      ...this.props,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$9,
-        lineNumber: 37
-      }
-    });
-  }
-}
-TransformerComponent.propTypes = {
-  selectedShapeName: PropTypes$4.string.isRequired
-};
-const React$a = _dll_react;
-const {Text: Text} = _dll_react_konva;
-const _jsxFileName$a = "/home/ede/dev/github/pie-framework/pie-elements/node_modules/@pie-ui/drawing-response/src/drawing-response/drawable-text.jsx";
-const generateId = () => Math.random().toString(36).substring(2) + new Date().getTime().toString(36);
-class TextDrawable {
-  static getTextareaNode(id) {
-    return `textarea_${id}`;
-  }
-  static getTextNode(id) {
-    return `text_${id}`;
-  }
-  static getTransformerNode(id) {
-    return `transformer_${id}`;
-  }
-  constructor(props) {
-    TextDrawable.prototype.__init.call(this);
-    TextDrawable.prototype.__init2.call(this);
-    TextDrawable.prototype.__init3.call(this);
-    TextDrawable.prototype.__init4.call(this);
-    TextDrawable.prototype.__init5.call(this);
-    TextDrawable.prototype.__init6.call(this);
-    TextDrawable.prototype.__init7.call(this);
-    TextDrawable.prototype.__init8.call(this);
-    this.all = props && props.all || [];
-    this.eventListenersDetachArray = [];
-  }
-  __init() {
-    this.removeEventListeners = () => this.eventListenersDetachArray.forEach(fn => fn());
-  }
-  __init2() {
-    this.setAll = all => {
-      this.all = all;
-      this.props.forceUpdate();
-    };
-  }
-  __init3() {
-    this.addNewTextEntry = () => {
-      const all = this.all;
-      const id = generateId();
-      all.push({
-        id: id,
-        isDefault: true,
-        label: 'Double click to edit this text. Press Enter to submit.',
-        width: 200,
-        x: (all.length + 1) * 5 + 50,
-        y: (all.length + 1) * 5 + 50,
-        textVisible: true,
-        transformerVisible: true,
-        textareaVisible: false,
-        createdAt: new Date(),
-        type: 'text-entry'
-      });
-      this.props.handleSessionChange();
-    };
-  }
-  showOnlyTextNodes() {
-    this.all.map(item => {
-      item.textVisible = true;
-      item.transformerVisible = false;
-      item.textareaVisible = false;
-    });
-  }
-  toggleTextarea(id, value) {
-    this.all = this.all.map(item => {
-      if (item.id === id) {
-        return {
-          ...item,
-          textVisible: !value,
-          transformerVisible: !value,
-          textareaVisible: value
-        };
-      }
-      return item;
-    });
-    this.props.forceUpdate();
-  }
-  initializeDefault(id, isDefault) {
-    if (isDefault) {
-      const current = this.all.filter(item => item.id === id)[0];
-      current.isDefault = false;
-    }
-  }
-  saveValue(id, textNode, textareaNode) {
-    if (textareaNode.value) {
-      textNode.text(textareaNode.value);
-    } else {
-      this.all = this.all.filter(text => text.id !== id);
-      this.props.forceUpdate();
-    }
-    this.props.handleSessionChange();
-  }
-  __init4() {
-    this.handleMouseDown = () => this.props.toggleTextSelected(true);
-  }
-  __init5() {
-    this.handleMouseUp = () => this.props.toggleTextSelected(false);
-  }
-  __init6() {
-    this.handleClick = (e, id) => {
-      const current = this.all.filter(item => item.id === id)[0];
-      current.transformerVisible = true;
-      this.props.forceUpdate();
-    };
-  }
-  __init7() {
-    this.handleDblClick = (e, text) => {
-      const {id, isDefault} = text;
-      this.toggleTextarea(id, true);
-      const textNode = this[TextDrawable.getTextNode(id)];
-      const textareaNode = this[TextDrawable.getTextareaNode(id)];
-      const areaPosition = textNode._lastPos;
-      textareaNode.value = isDefault ? '' : textNode.text();
-      textareaNode.style.position = 'absolute';
-      textareaNode.style.top = areaPosition.y + 'px';
-      textareaNode.style.left = areaPosition.x + 'px';
-      textareaNode.style.width = textNode.width() - textNode.padding() * 2 + 'px';
-      textareaNode.style.height = textNode.height() - textNode.padding() * 2 + 5 + 'px';
-      textareaNode.style.fontSize = textNode.fontSize() + 'px';
-      textareaNode.style.border = 'none';
-      textareaNode.style.padding = '0px';
-      textareaNode.style.margin = '0px';
-      textareaNode.style.overflow = 'hidden';
-      textareaNode.style.background = 'none';
-      textareaNode.style.outline = 'none';
-      textareaNode.style.resize = 'none';
-      textareaNode.style.lineHeight = textNode.lineHeight();
-      textareaNode.style.fontFamily = textNode.fontFamily();
-      textareaNode.style.transformOrigin = 'left top';
-      textareaNode.style.textAlign = textNode.align();
-      textareaNode.style.color = textNode.fill();
-      let rotation = textNode.rotation();
-      let transform = '';
-      if (rotation) {
-        transform += 'rotateZ(' + rotation + 'deg)';
-      }
-      let px = 0;
-      const isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
-      if (isFirefox) {
-        px += 2 + Math.round(textNode.fontSize() / 20);
-      }
-      transform += 'translateY(-' + px + 'px)';
-      textareaNode.style.transform = transform;
-      textareaNode.style.height = 'auto';
-      textareaNode.style.height = textareaNode.scrollHeight + 3 + 'px';
-      textareaNode.focus();
-      const keyDownHandler = e => {
-        if (e.keyCode === 13 && !e.shiftKey) {
-          this.toggleTextarea(id, false);
-          this.saveValue(id, textNode, textareaNode);
-        }
-        if (e.keyCode === 27) {
-          this.toggleTextarea(id, false);
-        }
-      };
-      textareaNode.addEventListener('keydown', keyDownHandler);
-      this.eventListenersDetachArray.push(() => textareaNode.removeEventListener('keydown', keyDownHandler));
-      const blurHandler = () => {
-        this.showOnlyTextNodes();
-        this.saveValue(id, textNode, textareaNode);
-      };
-      textareaNode.addEventListener('blur', blurHandler);
-      this.eventListenersDetachArray.push(() => textareaNode.removeEventListener('blur', blurHandler));
-      this.initializeDefault(id, isDefault);
-      this.props.forceUpdate();
-    };
-  }
-  __init8() {
-    this.handleTransform = (e, textNode) => {
-      this[textNode].setAttrs({
-        width: this[textNode].width() * this[textNode].scaleX(),
-        scaleX: 1
-      });
-    };
-  }
-  renderTextareas() {
-    return this.all.map(text => {
-      const {id, textareaVisible} = text;
-      const textareaNode = `textarea_${id}`;
-      return React$a.createElement('textarea', {
-        key: textareaNode,
-        ref: textarea => {
-          this[textareaNode] = textarea;
-        },
-        style: {
-          display: `${textareaVisible ? 'block' : 'none'}`
-        },
-        __self: this,
-        __source: {
-          fileName: _jsxFileName$a,
-          lineNumber: 206
-        }
-      });
-    });
-  }
-  setInitialProps(props) {
-    if (!this.props) {
-      this.props = props;
-    }
-  }
-  render(props) {
-    this.setInitialProps(props);
-    if (props.stage) {
-      const newStage = props.stage;
-      if (newStage !== this.stage) {
-        const stageClickHandler = e => {
-          if (e.target !== this.stage) {
-            return;
-          }
-          this.showOnlyTextNodes();
-          this.props.forceUpdate();
-        };
-        newStage.on('click', stageClickHandler);
-        this.eventListenersDetachArray.push(() => newStage.off('click', stageClickHandler));
-      }
-      this.stage = newStage;
-    }
-    return this.all.map(text => {
-      const {id, label, x, y, width, textVisible, rotation, transformerVisible} = text;
-      const textNode = `text_${id}`;
-      const transformerNode = `transformer_${id}`;
-      let extraProps = {};
-      if (!props.disabled) {
-        extraProps = {
-          onClick: e => this.handleClick(e, id),
-          onDblClick: e => this.handleDblClick(e, text),
-          onTransform: e => this.handleTransform(e, textNode),
-          onTransformEnd: this.props.handleSessionChange,
-          onMouseDown: this.handleMouseDown,
-          onMouseUp: this.handleMouseUp,
-          onDragEnd: this.props.handleSessionChange,
-          onMouseEnter: this.props.onMouseOverElement,
-          onMouseLeave: this.props.onMouseOutElement
-        };
-      }
-      if (rotation) {
-        extraProps.rotation = rotation;
-      }
-      return [React$a.createElement(Text, {
-        key: id,
-        bubbles: true,
-        id: id,
-        ref: text => {
-          this[textNode] = text;
-        },
-        text: text.text || label,
-        name: textNode,
-        x: x,
-        y: y,
-        width: width,
-        draggable: !props.disabled,
-        visible: textVisible,
-        fontSize: 16,
-        ...extraProps,
-        __self: this,
-        __source: {
-          fileName: _jsxFileName$a,
-          lineNumber: 285
-        }
-      }), transformerVisible && React$a.createElement(TransformerComponent, {
-        key: `transformer_${id}`,
-        ref: text => {
-          this[transformerNode] = text;
-        },
-        selectedShapeName: textNode,
-        onMouseDown: this.handleMouseDown,
-        onMouseUp: this.handleMouseUp,
-        __self: this,
-        __source: {
-          fileName: _jsxFileName$a,
-          lineNumber: 303
-        }
-      })];
-    });
-  }
-}
-const require$$0 = _dll_prop_types;
-const require$$1 = _dll_react;
-var Icon = createCommonjsModule(function (module) {
-  module.exports = (function (e) {
-    var t = {};
-    function r(n) {
-      if (t[n]) return t[n].exports;
-      var o = t[n] = {
-        i: n,
-        l: !1,
-        exports: {}
-      };
-      return (e[n].call(o.exports, o, o.exports, r), o.l = !0, o.exports);
-    }
-    return (r.m = e, r.c = t, r.d = function (e, t, n) {
-      r.o(e, t) || Object.defineProperty(e, t, {
-        enumerable: !0,
-        get: n
-      });
-    }, r.r = function (e) {
-      ("undefined" != typeof Symbol && Symbol.toStringTag && Object.defineProperty(e, Symbol.toStringTag, {
-        value: "Module"
-      }), Object.defineProperty(e, "__esModule", {
-        value: !0
-      }));
-    }, r.t = function (e, t) {
-      if ((1 & t && (e = r(e)), 8 & t)) return e;
-      if (4 & t && "object" == typeof e && e && e.__esModule) return e;
-      var n = Object.create(null);
-      if ((r.r(n), Object.defineProperty(n, "default", {
-        enumerable: !0,
-        value: e
-      }), 2 & t && "string" != typeof e)) for (var o in e) r.d(n, o, (function (t) {
-        return e[t];
-      }).bind(null, o));
-      return n;
-    }, r.n = function (e) {
-      var t = e && e.__esModule ? function () {
-        return e.default;
-      } : function () {
-        return e;
-      };
-      return (r.d(t, "a", t), t);
-    }, r.o = function (e, t) {
-      return Object.prototype.hasOwnProperty.call(e, t);
-    }, r.p = "", r(r.s = 2));
-  })([function (e, t) {
-    e.exports = require$$0;
-  }, function (e, t) {
-    e.exports = require$$1;
-  }, function (e, t, r) {
-    r.r(t);
-    var n = r(1), o = r(0), l = function () {
-      return (l = Object.assign || (function (e) {
-        for (var t, r = 1, n = arguments.length; r < n; r++) for (var o in t = arguments[r]) Object.prototype.hasOwnProperty.call(t, o) && (e[o] = t[o]);
-        return e;
-      })).apply(this, arguments);
-    }, i = function (e, t) {
-      var r = {};
-      for (var n in e) Object.prototype.hasOwnProperty.call(e, n) && t.indexOf(n) < 0 && (r[n] = e[n]);
-      if (null != e && "function" == typeof Object.getOwnPropertySymbols) {
-        var o = 0;
-        for (n = Object.getOwnPropertySymbols(e); o < n.length; o++) t.indexOf(n[o]) < 0 && Object.prototype.propertyIsEnumerable.call(e, n[o]) && (r[n[o]] = e[n[o]]);
-      }
-      return r;
-    }, a = 0, s = n.forwardRef(function (e, t) {
-      var r = e.title, o = void 0 === r ? null : r, s = e.description, c = void 0 === s ? null : s, u = e.size, p = void 0 === u ? null : u, f = e.color, d = void 0 === f ? "currentColor" : f, y = e.horizontal, v = void 0 === y ? null : y, b = e.vertical, m = void 0 === b ? null : b, h = e.rotate, g = void 0 === h ? null : h, O = e.spin, w = void 0 === O ? null : O, j = e.style, z = void 0 === j ? {} : j, E = e.children, P = i(e, ["title", "description", "size", "color", "horizontal", "vertical", "rotate", "spin", "style", "children"]);
-      a++;
-      var S, x = null !== w && w, _ = n.Children.map(E, function (e) {
-        var t = e;
-        !0 !== x && (x = !0 === (null === w ? t.props.spin : w));
-        var r = t.props.size;
-        "number" == typeof p && "number" == typeof t.props.size && (r = t.props.size / p);
-        var o = {
-          size: r,
-          color: null === d ? t.props.color : d,
-          horizontal: null === v ? t.props.horizontal : v,
-          vertical: null === m ? t.props.vertical : m,
-          rotate: null === g ? t.props.rotate : g,
-          spin: null === w ? t.props.spin : w,
-          inStack: !0
-        };
-        return n.cloneElement(t, o);
-      });
-      null !== p && (z.width = "string" == typeof p ? p : 1.5 * p + "rem");
-      var k, T = "stack_labelledby_" + a, q = "stack_describedby_" + a;
-      if (o) S = c ? T + " " + q : T; else if ((k = "presentation", c)) throw new Error("title attribute required when description is set");
-      return n.createElement("svg", l({
-        ref: t,
-        viewBox: "0 0 24 24",
-        style: z,
-        role: k,
-        "aria-labelledby": S
-      }, P), o && n.createElement("title", {
-        id: T
-      }, o), c && n.createElement("desc", {
-        id: q
-      }, c), x && n.createElement("style", null, "@keyframes spin { to { transform: rotate(360deg) } }", "@keyframes spin-inverse { to { transform: rotate(-360deg) } }"), _);
-    });
-    (s.displayName = "Stack", s.propTypes = {
-      size: o.oneOfType([o.number, o.string]),
-      color: o.string,
-      horizontal: o.bool,
-      vertical: o.bool,
-      rotate: o.number,
-      spin: o.oneOfType([o.bool, o.number]),
-      children: o.oneOfType([o.arrayOf(o.node), o.node]).isRequired,
-      className: o.string,
-      style: o.object
-    }, s.defaultProps = {
-      size: null,
-      color: null,
-      horizontal: null,
-      vertical: null,
-      rotate: null,
-      spin: null
-    });
-    var c = s;
-    (r.d(t, "Icon", function () {
-      return d;
-    }), r.d(t, "Stack", function () {
-      return c;
-    }));
-    var u = function () {
-      return (u = Object.assign || (function (e) {
-        for (var t, r = 1, n = arguments.length; r < n; r++) for (var o in t = arguments[r]) Object.prototype.hasOwnProperty.call(t, o) && (e[o] = t[o]);
-        return e;
-      })).apply(this, arguments);
-    }, p = function (e, t) {
-      var r = {};
-      for (var n in e) Object.prototype.hasOwnProperty.call(e, n) && t.indexOf(n) < 0 && (r[n] = e[n]);
-      if (null != e && "function" == typeof Object.getOwnPropertySymbols) {
-        var o = 0;
-        for (n = Object.getOwnPropertySymbols(e); o < n.length; o++) t.indexOf(n[o]) < 0 && Object.prototype.propertyIsEnumerable.call(e, n[o]) && (r[n[o]] = e[n[o]]);
-      }
-      return r;
-    }, f = 0, d = n.forwardRef(function (e, t) {
-      var r = e.path, o = e.title, l = void 0 === o ? null : o, i = e.description, a = void 0 === i ? null : i, s = e.size, c = void 0 === s ? null : s, d = e.color, y = void 0 === d ? "currentColor" : d, v = e.horizontal, b = void 0 !== v && v, m = e.vertical, h = void 0 !== m && m, g = e.rotate, O = void 0 === g ? 0 : g, w = e.spin, j = void 0 !== w && w, z = e.style, E = void 0 === z ? {} : z, P = e.inStack, S = void 0 !== P && P, x = p(e, ["path", "title", "description", "size", "color", "horizontal", "vertical", "rotate", "spin", "style", "inStack"]);
-      f++;
-      var _ = {}, k = [];
-      (null !== c && (S ? k.push("scale(" + c + ")") : (E.width = "string" == typeof c ? c : 1.5 * c + "rem", E.height = E.width)), b && k.push("scaleX(-1)"), h && k.push("scaleY(-1)"), 0 !== O && k.push("rotate(" + O + "deg)"), null !== y && (_.fill = y));
-      var T = n.createElement("path", u({
-        d: r,
-        style: _
-      }, S ? x : {})), q = T;
-      k.length > 0 && (E.transform = k.join(" "), E.transformOrigin = "center", S && (q = n.createElement("g", {
-        style: E
-      }, T, n.createElement("rect", {
-        width: "24",
-        height: "24",
-        fill: "transparent"
-      }))));
-      var M, C = q, I = !0 === j || "number" != typeof j ? 2 : j, N = !S && (b || h);
-      if ((I < 0 && (N = !N), j && (C = n.createElement("g", {
-        style: {
-          animation: "spin" + (N ? "-inverse" : "") + " linear " + Math.abs(I) + "s infinite",
-          transformOrigin: "center"
-        }
-      }, q, !(b || h || 0 !== O) && n.createElement("rect", {
-        width: "24",
-        height: "24",
-        fill: "transparent"
-      }))), S)) return C;
-      var R, B = "icon_labelledby_" + f, X = "icon_describedby_" + f;
-      if (l) M = a ? B + " " + X : B; else if ((R = "presentation", a)) throw new Error("title attribute required when description is set");
-      return n.createElement("svg", u({
-        ref: t,
-        viewBox: "0 0 24 24",
-        style: E,
-        role: R,
-        "aria-labelledby": M
-      }, x), l && n.createElement("title", {
-        id: B
-      }, l), a && n.createElement("desc", {
-        id: X
-      }, a), !S && j && (N ? n.createElement("style", null, "@keyframes spin-inverse { to { transform: rotate(-360deg) } }") : n.createElement("style", null, "@keyframes spin { to { transform: rotate(360deg) } }")), C);
-    });
-    (d.displayName = "Icon", d.propTypes = {
-      path: o.string.isRequired,
-      size: o.oneOfType([o.number, o.string]),
-      color: o.string,
-      horizontal: o.bool,
-      vertical: o.bool,
-      rotate: o.number,
-      spin: o.oneOfType([o.bool, o.number]),
-      style: o.object,
-      inStack: o.bool,
-      className: o.string
-    }, d.defaultProps = {
-      size: null,
-      color: "currentColor",
-      horizontal: !1,
-      vertical: !1,
-      rotate: 0,
-      spin: !1
-    });
-    t.default = d;
-  }]);
-});
-var Icon$1 = unwrapExports(Icon);
-var mdiCircle = "M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z";
-var mdiCursorDefault = "M13.64,21.97C13.14,22.21 12.54,22 12.31,21.5L10.13,16.76L7.62,18.78C7.45,18.92 7.24,19 7,19A1,1 0 0,1 6,18V3A1,1 0 0,1 7,2C7.24,2 7.47,2.09 7.64,2.23L7.65,2.22L19.14,11.86C19.57,12.22 19.62,12.85 19.27,13.27C19.12,13.45 18.91,13.57 18.7,13.61L15.54,14.23L17.74,18.96C18,19.46 17.76,20.05 17.26,20.28L13.64,21.97Z";
-var mdiEraser = "M16.24,3.56L21.19,8.5C21.97,9.29 21.97,10.55 21.19,11.34L12,20.53C10.44,22.09 7.91,22.09 6.34,20.53L2.81,17C2.03,16.21 2.03,14.95 2.81,14.16L13.41,3.56C14.2,2.78 15.46,2.78 16.24,3.56M4.22,15.58L7.76,19.11C8.54,19.9 9.8,19.9 10.59,19.11L14.12,15.58L9.17,10.63L4.22,15.58Z";
-var mdiFormatColorFill = "M19,11.5C19,11.5 17,13.67 17,15A2,2 0 0,0 19,17A2,2 0 0,0 21,15C21,13.67 19,11.5 19,11.5M5.21,10L10,5.21L14.79,10M16.56,8.94L7.62,0L6.21,1.41L8.59,3.79L3.44,8.94C2.85,9.5 2.85,10.47 3.44,11.06L8.94,16.56C9.23,16.85 9.62,17 10,17C10.38,17 10.77,16.85 11.06,16.56L16.56,11.06C17.15,10.47 17.15,9.5 16.56,8.94Z";
-var mdiFormatColorText = "M9.62,12L12,5.67L14.37,12M11,3L5.5,17H7.75L8.87,14H15.12L16.25,17H18.5L13,3H11Z";
-var mdiMinus = "M19,13H5V11H19V13Z";
-var mdiPencil = "M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z";
-var mdiRectangle = "M4,6V19H20V6H4Z";
-const React$b = _dll_react;
-const PropTypes$5 = _dll_prop_types;
-const _jsxFileName$b = "/home/ede/dev/github/pie-framework/pie-elements/node_modules/@pie-ui/drawing-response/src/drawing-response/icon.jsx";
-const IconWrapper = ({path}) => {
-  let iconPath;
-  switch (path) {
-    case 'mdiPencil':
-      iconPath = mdiPencil;
-      break;
-    case 'mdiMinus':
-      iconPath = mdiMinus;
-      break;
-    case 'mdiCircle':
-      iconPath = mdiCircle;
-      break;
-    case 'mdiRectangle':
-      iconPath = mdiRectangle;
-      break;
-    case 'mdiFormatColorText':
-      iconPath = mdiFormatColorText;
-      break;
-    case 'mdiFormatColorFill':
-      iconPath = mdiFormatColorFill;
-      break;
-    case 'mdiEraser':
-      iconPath = mdiEraser;
-      break;
-    default:
-      iconPath = mdiCursorDefault;
-      break;
-  }
-  return React$b.createElement(Icon$1, {
-    path: iconPath,
-    size: 0.8,
-    rotate: 180,
-    horizontal: true,
-    vertical: true,
-    color: "#2B3963",
-    __self: undefined,
-    __source: {
-      fileName: _jsxFileName$b,
-      lineNumber: 38
-    }
-  });
-};
-IconWrapper.propTypes = {
-  path: PropTypes$5.string.isRequired
-};
-const React$c = _dll_react;
-const {Component: Component} = _dll_react;
-const PropTypes$6 = _dll_prop_types;
-const {withStyles: withStyles$4} = _dll_material_ui__core_styles;
-const _jsxFileName$c = "/home/ede/dev/github/pie-framework/pie-elements/node_modules/@pie-ui/drawing-response/src/drawing-response/container.jsx";
-const {tools: TOOLS} = constants;
-const ROGVAIV = ['red', 'orange', 'yellow', 'violet', 'blue', 'green', 'white', 'black'].map(c => ({
-  value: c,
-  label: c
-}));
-class Container extends Component {
-  static __initStatic() {
-    this.propTypes = {
-      classes: PropTypes$6.object.isRequired,
-      disabled: PropTypes$6.bool,
-      session: PropTypes$6.object.isRequired,
-      onSessionChange: PropTypes$6.func.isRequired,
-      imageDimensions: PropTypes$6.object.isRequired,
-      imageUrl: PropTypes$6.string.isRequired
-    };
-  }
-  constructor(props) {
-    super(props);
-    Container.prototype.__init.call(this);
-    const TextEntry = new TextDrawable();
-    this.state = {
-      drawableDimensions: {
-        height: 0,
-        width: 0
-      },
-      toolActive: TOOLS[0],
-      fillColor: 'white',
-      fillColorList: [{
-        value: 'transparent',
-        label: 'no fill'
-      }, {
-        value: 'lightblue',
-        label: 'lightblue'
-      }, {
-        value: 'lightyellow',
-        label: 'lightyellow'
-      }, ...ROGVAIV],
-      outlineColor: 'black',
-      outlineColorList: ROGVAIV,
-      paintColor: 'red',
-      paintColorList: ROGVAIV,
-      TextEntry
-    };
-  }
-  setDimensions() {
-    const checkExist = setInterval(() => {
-      try {
-        const {height, width} = this.drawable.getBoundingClientRect();
-        if (height !== 0 && width !== 0) {
-          this.setState({
-            drawableDimensions: {
-              height,
-              width
-            }
-          });
-        }
-      } catch (e) {
-        console.warn('setDimensions Error: ', e);
-      } finally {
-        clearInterval(checkExist);
-      }
-    }, 100);
-  }
-  componentDidMount() {
-    this.setDimensions();
-  }
-  componentWillUnmount() {
-    const {TextEntry} = this.state;
-    TextEntry.removeEventListeners();
-  }
-  handleMakeToolActive(tool) {
-    const {TextEntry} = this.state;
-    const {type} = tool;
-    if (type !== 'Text') {
-      this.setState({
-        toolActive: tool
-      });
-    } else {
-      TextEntry.addNewTextEntry();
-      this.setState({
-        updatedAt: new Date()
-      });
-    }
-  }
-  __init() {
-    this.checkIfToolIsDisabled = type => {
-      if (this.props.disabled) return true;
-      const {toolActive} = this.state;
-      if (type === 'Text') {
-        return false;
-      }
-      return type === toolActive.type;
-    };
-  }
-  handleColorChange(type, color) {
-    const cType = `${type}Color`;
-    this.setState({
-      [cType]: color
-    });
-  }
-  render() {
-    const {classes, disabled, imageUrl, imageDimensions, onSessionChange, session} = this.props;
-    const {drawableDimensions, toolActive, fillColor, fillColorList, outlineColor, outlineColorList, paintColor, paintColorList, TextEntry} = this.state;
-    return React$c.createElement('div', {
-      className: classes.base,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$c,
-        lineNumber: 149
-      }
-    }, React$c.createElement(DrawablePalette, {
-      fillColor: fillColor,
-      fillList: fillColorList,
-      outlineColor: outlineColor,
-      outlineList: outlineColorList,
-      paintColor: paintColor,
-      paintList: paintColorList,
-      onFillColorChange: color => this.handleColorChange('fill', color),
-      onOutlineColorChange: color => this.handleColorChange('outline', color),
-      onPaintColorChange: color => this.handleColorChange('paint', color),
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$c,
-        lineNumber: 150
-      }
-    }), React$c.createElement('div', {
-      className: classes.box,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$c,
-        lineNumber: 164
-      }
-    }, React$c.createElement('div', {
-      className: classes.toolbar,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$c,
-        lineNumber: 165
-      }
-    }, React$c.createElement('div', {
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$c,
-        lineNumber: 166
-      }
-    }, TOOLS.map(tool => {
-      const {type, label, icon} = tool;
-      return React$c.createElement(ButtonStyled, {
-        title: label,
-        key: type,
-        disabled: this.checkIfToolIsDisabled(type),
-        onClick: () => this.handleMakeToolActive(tool),
-        label: React$c.createElement(IconWrapper, {
-          path: icon,
-          __self: this,
-          __source: {
-            fileName: _jsxFileName$c,
-            lineNumber: 176
-          }
-        }),
-        __self: this,
-        __source: {
-          fileName: _jsxFileName$c,
-          lineNumber: 171
-        }
-      });
-    }))), React$c.createElement('div', {
-      ref: drawable => {
-        this.drawable = drawable;
-      },
-      className: classes.drawableHeight,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$c,
-        lineNumber: 183
-      }
-    }, React$c.createElement(DrawableMain$1, {
-      session: session,
-      disabled: disabled,
-      onSessionChange: onSessionChange,
-      fillColor: fillColor,
-      outlineColor: outlineColor,
-      paintColor: paintColor,
-      imageUrl: imageUrl,
-      drawableDimensions: drawableDimensions,
-      imageDimensions: imageDimensions,
-      toolActive: toolActive,
-      TextEntry: TextEntry,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$c,
-        lineNumber: 189
-      }
-    }))));
-  }
-}
-Container.__initStatic();
-const styles$4 = theme => ({
-  base: {
-    marginTop: theme.spacing.unit * 2
-  },
-  box: {
-    border: '1px solid #E0E1E6',
-    borderRadius: '5px',
-    marginTop: theme.spacing.unit * 2
-  },
-  drawableHeight: {
-    minHeight: 350
-  },
-  toolbar: {
-    backgroundColor: '#ECEDF1',
-    borderBottom: '1px solid #E0E1E6',
-    borderTopLeftRadius: '5px',
-    borderTopRightRadius: '5px',
-    display: 'flex',
-    justifyContent: 'space-between',
-    padding: '12px 8px'
-  }
-});
-var Container$1 = withStyles$4(styles$4)(Container);
-const React$d = _dll_react;
-const PropTypes$7 = _dll_prop_types;
-const {Typography: Typography} = _dll_material_ui__core;
-const {Collapsible: Collapsible} = _dll_pie_lib__render_ui;
-const {withStyles: withStyles$5} = _dll_material_ui__core_styles;
-const _jsxFileName$d = "/home/ede/dev/github/pie-framework/pie-elements/node_modules/@pie-ui/drawing-response/src/drawing-response/index.jsx";
-class DrawingResponseComponent extends React$d.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      showCorrect: false,
-      hasError: false
-    };
-  }
-  static getDerivedStateFromError(error) {
-    return {
-      hasError: true,
-      errorMessage: error.message
-    };
-  }
-  render() {
-    const {model: {disabled, imageDimensions, imageUrl, prompt, mode, teacherInstructions}, session, onSessionChange, classes} = this.props;
-    const {hasError, errorMessage} = this.state;
-    const isEvaluateMode = mode === 'evaluate';
-    return hasError ? React$d.createElement('div', {
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$d,
-        lineNumber: 40
-      }
-    }, "An error occured: ", errorMessage) : React$d.createElement('div', {
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$d,
-        lineNumber: 42
-      }
-    }, teacherInstructions && React$d.createElement('div', {
-      style: {
-        margin: '16px 0'
-      },
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$d,
-        lineNumber: 44
-      }
-    }, React$d.createElement(Collapsible, {
-      labels: {
-        hidden: 'Show Teacher Instructions',
-        visible: 'Hide Teacher Instructions'
-      },
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$d,
-        lineNumber: 45
-      }
-    }, React$d.createElement('div', {
-      dangerouslySetInnerHTML: {
-        __html: teacherInstructions
-      },
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$d,
-        lineNumber: 51
-      }
-    }))), React$d.createElement('br', {
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$d,
-        lineNumber: 55
-      }
-    }), React$d.createElement(Typography, {
-      className: classes.prompt,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$d,
-        lineNumber: 57
-      }
-    }, React$d.createElement('span', {
-      dangerouslySetInnerHTML: {
-        __html: prompt
-      },
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$d,
-        lineNumber: 58
-      }
-    })), React$d.createElement(Container$1, {
-      session: session,
-      onSessionChange: onSessionChange,
-      isEvaluateMode: isEvaluateMode,
-      imageDimensions: imageDimensions,
-      imageUrl: imageUrl,
-      disabled: disabled,
-      __self: this,
-      __source: {
-        fileName: _jsxFileName$d,
-        lineNumber: 61
-      }
-    }));
-  }
-}
-DrawingResponseComponent.propTypes = {
-  classes: PropTypes$7.object,
-  model: PropTypes$7.object.isRequired,
-  onSessionChange: PropTypes$7.func.isRequired,
-  session: PropTypes$7.object.isRequired
-};
-const styles$5 = () => ({
-  prompt: {
-    fontSize: 'inherit'
-  }
-});
-var DrawingResponseComponent$1 = withStyles$5(styles$5)(DrawingResponseComponent);
-const React$e = _dll_react;
-const ReactDOM = _dll_react_dom;
-const {isEmpty: isEmpty} = _dll_lodash;
-const {renderMath: renderMath} = _dll_pie_lib__math_rendering;
-const {ModelSetEvent: ModelSetEvent} = _dll_pie_framework__pie_player_events;
-const {SessionChangedEvent: SessionChangedEvent} = _dll_pie_framework__pie_player_events;
-class DrawingResponse extends HTMLElement {
-  constructor(...args) {
-    super(...args);
-    DrawingResponse.prototype.__init.call(this);
-  }
-  set model(m) {
-    this._model = m;
-    this.dispatchEvent(new ModelSetEvent(this.tagName.toLowerCase(), this.isComplete(), !!this._model));
-    this._render();
-  }
-  isComplete() {
-    return this._session && (!isEmpty(this._session.drawables) || !isEmpty(this._session.texts));
-  }
-  __init() {
-    this.sessionChanged = update => {
-      this._session.drawables = update.drawables;
-      this._session.texts = update.texts;
-      this.dispatchEvent(new SessionChangedEvent(this.tagName.toLowerCase(), this.isComplete()));
-      this._render();
-    };
-  }
-  set session(s) {
-    this._session = s;
-    this._render();
-  }
-  connectedCallback() {
-    this._render();
-  }
-  _render() {
-    if (this._model && this._session) {
-      const el = React$e.createElement(DrawingResponseComponent$1, {
-        model: this._model,
-        session: this._session,
-        onSessionChange: this.sessionChanged
-      });
-      ReactDOM.render(el, this, () => {
-        renderMath(this);
-      });
-    }
-  }
-}
-export default DrawingResponse;