kitchen-simulator 5.0.0-test.1 → 5.0.0-test.12

package/es/components/footerbar/footerbar.js

@@ -1,801 +0,0 @@
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
-function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
-function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
-function _possibleConstructorReturn(t, e) { if (e && ("object" == _typeof(e) || "function" == typeof e)) return e; if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t); }
-function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
-function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
-function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
-function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
-import Tooltip from '@material-ui/core/Tooltip';
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import * as S from './styles';
-import { GeometryUtils } from '../../utils/export';
-import { toFixedFloat } from '../../utils/math';
-import convert from 'convert-units';
-import { zoom } from 'react-svg-pan-zoom';
-import SnackBar from '../atoms/Snackbar/index';
-import ToggleMeasureButton from '../button/ToggleMeasureButton';
-import { EPSILON, MODE_IDLE, MODE_IDLE_3D, ARRAY_3D_MODES, KEYBOARD_BUTTON_CODE, TEXT_COLOR_NEUTRAL_5, MODE_ELEVATION_VIEW } from '../../constants';
-import * as constants from '../../constants';
-import { isElevationView } from '../../utils/helper';
-var allItemRect;
-var allItemSnap;
-var allLines;
-var allLineRects;
-var allLineSnap;
-var allRect;
-var FooterBar = /*#__PURE__*/function (_Component) {
-  function FooterBar(props, context) {
-    var _this;
-    _classCallCheck(this, FooterBar);
-    _this = _callSuper(this, FooterBar, [props, context]);
-    var selectedLayout = props.state.scene.selectedLayer;
-    var height = props.state.scene.layers.get(selectedLayout).ceilHeight;
-    var unit = props.state.scene.layers.get(selectedLayout).unit;
-    _this.state = {
-      objectSetting: null,
-      controlButton: '',
-      panButton: '',
-      toggleUnit: 'in',
-      dragFlag: true,
-      unit: unit,
-      ceilFlag: false,
-      ceil3DFlag: false,
-      height: height,
-      zoomValue: 100,
-      isSnackBarOpen: false,
-      snackBarMessage: ''
-    };
-    return _this;
-  }
-  _inherits(FooterBar, _Component);
-  return _createClass(FooterBar, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {}
-  }, {
-    key: "componentWillReceiveProps",
-    value: function componentWillReceiveProps(nextProps) {
-      var selectedLayout = nextProps.state.scene.selectedLayer;
-      var height = nextProps.state.scene.layers.get(selectedLayout).ceilHeight;
-      var unit = nextProps.state.scene.layers.get(selectedLayout).unit;
-      var viewer2DValue = nextProps.state.get('viewer2D').toJS();
-      var _zoomValue = parseInt((viewer2DValue.a - 0.5) / constants.ZOOM_VARIABLE);
-      if (_zoomValue > 380) {
-        _zoomValue = 400;
-      }
-      if (_zoomValue < 35 || Number.isNaN(_zoomValue)) {
-        _zoomValue = 30;
-      }
-      this.setState({
-        height: height,
-        unit: unit,
-        zoomValue: _zoomValue
-      });
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-      var globalState = this.props.state;
-      var layer = globalState.scene.layers.get(globalState.scene.selectedLayer);
-      var selectedItems = [];
-      if (layer.selected.items.size > 0) {
-        selectedItems = layer.selected.items.toJS();
-      }
-      var selLineFlag = true; // this flag whether line was selected or not
-      if (layer.selected.lines.size === 0) {
-        selLineFlag = false;
-      } else selLineFlag = true;
-      var _this$context = this.context,
-        projectActions = _this$context.projectActions,
-        viewer3DActions = _this$context.viewer3DActions,
-        viewer2DActions = _this$context.viewer2DActions,
-        itemsActions = _this$context.itemsActions,
-        catalog = _this$context.catalog;
-      var _this$state = this.state,
-        control = _this$state.controlButton,
-        pan_control = _this$state.panButton,
-        toggleUnit = _this$state.toggleUnit,
-        dragFlag = _this$state.dragFlag;
-      // let { x, y } = globalState.get('mouse').toJS();
-      // let zoom = globalState.get('zoom');
-      var mode = globalState.get('mode');
-      var scene = globalState.get('scene');
-      var elevationImg = '/assets/img/svg/bottombar/elevation.svg';
-      var update = function update(LengthInput, unitInput, type) {
-        var newLength = toFixedFloat(LengthInput);
-        if (type === 0) {
-          _this2.setState({
-            height: newLength
-          });
-          viewer2DActions.updateCeilHeight(newLength);
-          viewer2DActions.updateCeilHeightUnit(unitInput);
-          viewer3DActions.update3DCeilHeight(newLength);
-          viewer3DActions.update3DCeilHeightUnit(unitInput);
-        } else {
-          _this2.setState({
-            height: convert(newLength).from(_this2.state.unit).to(unitInput)
-          });
-          _this2.setState({
-            unit: unitInput
-          });
-          viewer2DActions.updateCeilHeight(convert(newLength).from(_this2.state.unit).to(unitInput));
-          viewer2DActions.updateCeilHeightUnit(unitInput);
-          viewer3DActions.update3DCeilHeightUnit(unitInput);
-          viewer3DActions.update3DCeilHeight(convert(newLength).from(_this2.state.unit).to(unitInput));
-        }
-      };
-      var prepareSnap = function prepareSnap() {
-        allItemRect = GeometryUtils.getAllItems(scene, catalog);
-        allItemSnap = GeometryUtils.getAllItemSnap(allItemRect);
-        allLines = GeometryUtils.getAllLines(layer);
-        allLineRects = GeometryUtils.buildRectFromLines(layer, allLines);
-        allLineSnap = GeometryUtils.getAllLineSnap(allLineRects, allItemRect.cur);
-        allRect = allItemRect.others.concat(allLineRects);
-        allItemSnap = GeometryUtils.validateSnaps(allItemSnap, allRect);
-        allLineSnap = GeometryUtils.validateSnaps(allLineSnap, allRect);
-      };
-      function spinDragStart(key) {
-        if (dragFlag) {
-          window.interval = setInterval(function () {
-            window.SPKeyDown({
-              keyCode: key
-            });
-          }, 50);
-        }
-      }
-      function spinDragStop() {
-        clearInterval(window.interval);
-      }
-      function panDragStart(key) {
-        if (dragFlag) {
-          window.interval = setInterval(function () {
-            window.tDKeyDown({
-              keyCode: key
-            });
-          }, 50);
-        }
-      }
-      function panDragStop() {
-        clearInterval(window.interval);
-      }
-      function validOutSVG(x, y) {
-        var _globalState$get$toJS = globalState.get('viewer2D').toJS(),
-          SVGWidth = _globalState$get$toJS.SVGWidth,
-          SVGHeight = _globalState$get$toJS.SVGHeight;
-        if (x < 0 || x > SVGWidth || y < 0 || y > SVGHeight) return false;
-        return true;
-      }
-      var OpenSettings = function OpenSettings(e) {
-        e.preventDefault();
-        document.getElementById('setting_dialog').style.display = 'flex';
-        // closes the selected item dialog
-        // projectActions.unselectAll()
-      };
-
-      // handle action to view elevation
-      var ViewElevation = function ViewElevation() {
-        var layer = globalState.scene.getIn(['layers', globalState.scene.selectedLayer]);
-        if (layer.selected.lines.size === 0) {
-          _this2.setState({
-            isSnackBarOpen: true,
-            snackBarMessage: 'Please select the wall you want to see in Elevation View'
-          });
-          return;
-        }
-        projectActions.setMode(MODE_ELEVATION_VIEW);
-      };
-      var footerview = isElevationView(mode) ? /*#__PURE__*/React.createElement("div", {
-        style: {
-          display: 'flex',
-          position: 'relative',
-          backgroundColor: 'white',
-          height: 70,
-          cursor: 'pointer',
-          boxShadow: '0px 3px 5px -1px rgba(156, 154, 154, 0.2), 0px 6px 10px 0px rgba(156, 154, 154, 0.39), 0px 1px 18px 0px rgba(156, 154, 154, 0.12)',
-          borderRadius: 10,
-          alignItems: 'center'
-        }
-      }, /*#__PURE__*/React.createElement(S.Toggle_2D_3D, {
-        onClick: function onClick() {
-          _this2.props.setToolbar('');
-          projectActions.setMode(MODE_IDLE);
-          var layer = globalState.scene.getIn(['layers', globalState.scene.selectedLayer]);
-          var sCount = layer.selected.areas.size + layer.selected.holes.size + layer.selected.items.size + layer.selected.lines.size;
-          if (sCount > 1) projectActions.unselectAll();
-          // this.props.setShowProperty(true);
-          _this2.setState({
-            ceil3DFlag: false
-          });
-          // document.getElementById('item_custom') && (document.getElementById('item_custom').style.display = document.getElementById('item_custom').style.display === 'flex' && 'none');
-          document.getElementById('item_warning') && document.getElementById('item_custom') && (document.getElementById('item_warning').style.display = document.getElementById('item_custom').style.display === 'flex' && 'none');
-        }
-      }, /*#__PURE__*/React.createElement(S.FooterTitle, null, "2D")), /*#__PURE__*/React.createElement(S.Toggle_2D_3D, {
-        style: {
-          marginLeft: 5
-        },
-        onClick: function onClick() {
-          _this2.props.setToolbar('');
-          projectActions.setMode(MODE_IDLE_3D);
-          var layer = globalState.scene.getIn(['layers', globalState.scene.selectedLayer]);
-          var sCount = layer.selected.areas.size + layer.selected.holes.size + layer.selected.items.size + layer.selected.lines.size;
-          if (sCount > 1) projectActions.unselectAll();
-          _this2.setState({
-            ceilFlag: false
-          });
-        }
-      }, /*#__PURE__*/React.createElement(S.FooterTitle, null, "3D")), selLineFlag ? /*#__PURE__*/React.createElement(Tooltip, {
-        title: "Elevation View"
-      }, /*#__PURE__*/React.createElement(S.Toggle_2D_3D, {
-        style: {
-          backgroundColor: TEXT_COLOR_NEUTRAL_5
-        },
-        onClick: function onClick() {
-          return ViewElevation();
-        }
-      }, /*#__PURE__*/React.createElement(S.ArrowIcon, {
-        style: {
-          width: 20,
-          height: 20
-        },
-        src: elevationImg
-      }))) : /*#__PURE__*/React.createElement(Tooltip, {
-        title: /*#__PURE__*/React.createElement("span", null, "Please select a wall")
-      }, /*#__PURE__*/React.createElement(S.Toggle_2D_3D_Button, {
-        style: {
-          backgroundColor: TEXT_COLOR_NEUTRAL_5
-        }
-      }, /*#__PURE__*/React.createElement(S.ArrowIcon, {
-        style: {
-          width: 20,
-          height: 20
-        },
-        src: elevationImg
-      }))), /*#__PURE__*/React.createElement(S.Toggle_2D_3D, {
-        style: {
-          marginLeft: 5,
-          marginRight: 10,
-          backgroundColor: document.getElementById('setting_dialog') && document.getElementById('setting_dialog').style.display === 'flex' && TEXT_COLOR_NEUTRAL_5
-        },
-        onClick: function onClick(e) {
-          _this2.props.setToolbar('');
-          OpenSettings(e);
-        }
-      }, /*#__PURE__*/React.createElement("img", {
-        src: "/assets/img/svg/headerbar/setting.svg",
-        style: {
-          height: 18
-        }
-      }))) : !ARRAY_3D_MODES.includes(mode) ? /*#__PURE__*/React.createElement("div", {
-        style: {
-          display: 'flex',
-          position: 'relative',
-          backgroundColor: 'white',
-          height: 70,
-          cursor: 'pointer',
-          boxShadow: '0px 3px 5px -1px rgba(156, 154, 154, 0.2), 0px 6px 10px 0px rgba(156, 154, 154, 0.39), 0px 1px 18px 0px rgba(156, 154, 154, 0.12)',
-          borderRadius: 10,
-          alignItems: 'center'
-        }
-      }, /*#__PURE__*/React.createElement(S.Toggle_2D_3D, {
-        style: {
-          backgroundColor: TEXT_COLOR_NEUTRAL_5
-        }
-      }, /*#__PURE__*/React.createElement(S.FooterTitle, {
-        style: {
-          fontWeight: '800'
-        }
-      }, "2D")), /*#__PURE__*/React.createElement(S.Toggle_2D_3D, {
-        style: {
-          marginLeft: 5
-        },
-        onClick: function onClick() {
-          _this2.props.setToolbar('');
-          projectActions.setMode(MODE_IDLE_3D);
-          var layer = globalState.scene.getIn(['layers', globalState.scene.selectedLayer]);
-          var sCount = layer.selected.areas.size + layer.selected.holes.size + layer.selected.items.size + layer.selected.lines.size;
-          if (sCount > 1) projectActions.unselectAll();
-          _this2.setState({
-            ceilFlag: false
-          });
-        }
-      }, /*#__PURE__*/React.createElement(S.FooterTitle, null, "3D")), selLineFlag ? /*#__PURE__*/React.createElement(Tooltip, {
-        title: "Elevation View"
-      }, /*#__PURE__*/React.createElement(S.Toggle_2D_3D, {
-        onClick: function onClick() {
-          return ViewElevation();
-        }
-      }, /*#__PURE__*/React.createElement(S.ArrowIcon, {
-        style: {
-          width: 20,
-          height: 20
-        },
-        src: elevationImg
-      }))) : /*#__PURE__*/React.createElement(Tooltip, {
-        title: /*#__PURE__*/React.createElement("span", null, "Please select a wall")
-      }, /*#__PURE__*/React.createElement(S.Toggle_2D_3D_Button, null, /*#__PURE__*/React.createElement(S.ArrowIcon, {
-        style: {
-          width: 20,
-          height: 20
-        },
-        src: elevationImg
-      }))), /*#__PURE__*/React.createElement(S.Direction_Left_Right, {
-        onClick: function onClick() {
-          _this2.props.setToolbar('');
-          _this2.setState({
-            controlButton: 'Left'
-          });
-          var value = globalState.get('viewer2D').toJS();
-          value.e -= 5;
-          if (value.e <= 10 && value.e + value.a * value.SVGWidth + 10 >= value.viewerWidth && value.f <= 80 && value.f + value.d * value.SVGHeight + 10 >= value.viewerHeight) {
-            viewer2DActions.updateCameraView(value);
-          }
-        }
-      }, /*#__PURE__*/React.createElement(S.ArrowIcon, {
-        src: "/assets/img/svg/bottombar/arrow-left.svg"
-      })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(S.Direction_Up_Down, {
-        onClick: function onClick() {
-          _this2.props.setToolbar('');
-          _this2.setState({
-            controlButton: 'Top'
-          });
-          var value = globalState.get('viewer2D').toJS();
-          value.f -= 5;
-          if (value.e <= 10 && value.e + value.a * value.SVGWidth + 10 >= value.viewerWidth && value.f <= 80 && value.f + value.d * value.SVGHeight + 10 >= value.viewerHeight) {
-            viewer2DActions.updateCameraView(value);
-          }
-        }
-      }, /*#__PURE__*/React.createElement(S.ArrowIcon, {
-        src: "/assets/img/svg/bottombar/arrow-up.svg"
-      })), /*#__PURE__*/React.createElement(S.Direction_Up_Down, {
-        onClick: function onClick() {
-          _this2.props.setToolbar('');
-          _this2.setState({
-            controlButton: 'Bottom'
-          });
-          var value = globalState.get('viewer2D').toJS();
-          value.f += 5;
-          if (value.e <= 10 && value.e + value.a * value.SVGWidth + 10 >= value.viewerWidth && value.f <= 80 && value.f + value.d * value.SVGHeight + 10 >= value.viewerHeight) {
-            viewer2DActions.updateCameraView(value);
-          }
-        }
-      }, /*#__PURE__*/React.createElement(S.ArrowIcon, {
-        src: "/assets/img/svg/bottombar/arrow-down.svg"
-      }))), /*#__PURE__*/React.createElement(S.Direction_Left_Right, {
-        onClick: function onClick() {
-          _this2.props.setToolbar('');
-          _this2.setState({
-            controlButton: 'Right'
-          });
-          var value = globalState.get('viewer2D').toJS();
-          value.e += 5;
-          if (value.e <= 10 && value.e + value.a * value.SVGWidth + 10 >= value.viewerWidth && value.f <= 80 && value.f + value.d * value.SVGHeight + 10 >= value.viewerHeight) {
-            viewer2DActions.updateCameraView(value);
-          }
-        }
-      }, /*#__PURE__*/React.createElement(S.ArrowIcon, {
-        src: "/assets/img/svg/bottombar/arrow-right.svg"
-      })), /*#__PURE__*/React.createElement(S.ZoomButton, {
-        onClick: function onClick() {
-          _this2.props.setToolbar('');
-          _this2.setState({
-            controlButton: 'Zoom Out'
-          });
-          var value = globalState.get('viewer2D').toJS();
-          var width = value.viewerWidth;
-          var height = value.viewerHeight;
-          var len = value.SVGWidth;
-          var _e = (width - len * value.a) / 2;
-          var _f = (height - len * value.d) / 2;
-          var offsetE = (value.e - _e) / value.a;
-          var offsetF = (value.f - _f) / value.a;
-          value.a -= 0.1;
-          value.d -= 0.1;
-          value.e -= (value.SVGWidth * value.a - value.SVGWidth * (value.a + 0.1)) / 2;
-          value.f -= (value.SVGHeight * value.d - value.SVGHeight * (value.d + 0.1)) / 2;
-          var _zoomValue = parseInt((value.a - 0.5) / constants.ZOOM_VARIABLE);
-          if (_zoomValue > 404) return;
-          if (_zoomValue < 30 || Number.isNaN(_zoomValue)) return;
-          // value = zoom(value, 0, 0, 1/1.06)
-          while (!(value.e <= 10)) {
-            value.e -= 0.1;
-          }
-          while (!(value.e + value.a * value.SVGWidth + 10 >= value.viewerWidth)) {
-            value.e += 0.1;
-          }
-          while (!(value.f <= 80)) {
-            value.f -= 0.1;
-          }
-          while (!(value.f + value.a * value.SVGHeight + 10 >= value.viewerHeight)) {
-            value.f += 0.1;
-          }
-          if (value.e <= 10 && value.e + value.a * value.SVGWidth + 10 >= value.viewerWidth && value.f <= 80 && value.f + value.d * value.SVGHeight + 10 >= value.viewerHeight) {
-            viewer2DActions.updateCameraView(value);
-          }
-        }
-      }, /*#__PURE__*/React.createElement("img", {
-        style: {
-          margin: 'auto',
-          width: 15,
-          userSelect: 'none'
-        },
-        src: "/assets/img/svg/bottombar/arrow-minus.svg"
-      })), /*#__PURE__*/React.createElement(S.ZoomInput, {
-        value: "".concat(this.state.zoomValue, "%"),
-        type: "text",
-        onChange: function onChange(event) {
-          var _zoomValue = parseInt(event.target.value.replace('%', ''));
-          if (_zoomValue > 380) {
-            _zoomValue = 400;
-          }
-          if (_zoomValue < 0 || Number.isNaN(_zoomValue)) {
-            _zoomValue = 1;
-          } else {
-            _this2.setState({
-              zoomValue: _zoomValue
-            });
-          }
-        },
-        onKeyDown: function onKeyDown(e) {
-          var keyCode = e.keyCode || e.which;
-          if (keyCode === KEYBOARD_BUTTON_CODE.ENTER) {
-            var value = globalState.get('viewer2D').toJS();
-            var _zoomValue = _this2.state.zoomValue * constants.ZOOM_VARIABLE + 0.5;
-            value = zoom(value, value.SVGWidth / 2, value.SVGHeight / 2, _zoomValue / value.a);
-            if (_this2.state.zoomValue > 404) return;
-            if (_this2.state.zoomValue < 35 || Number.isNaN(_this2.state.zoomValue)) return;
-            if (value.e <= 10 && value.e + value.a * value.SVGWidth + 10 >= value.viewerWidth && value.f <= 80 && value.f + value.d * value.SVGHeight + 10 >= value.viewerHeight) {
-              viewer2DActions.updateCameraView(value);
-            }
-          }
-        },
-        name: "zoominout"
-      }), /*#__PURE__*/React.createElement(S.ZoomButton, {
-        onClick: function onClick() {
-          _this2.props.setToolbar('');
-          _this2.setState({
-            controlButton: 'Zoom In'
-          });
-          var value = globalState.get('viewer2D').toJS();
-          var width = value.viewerWidth;
-          var height = value.viewerHeight;
-          var len = value.SVGWidth;
-          var _e = (width - len * value.a) / 2;
-          var _f = (height - len * value.d) / 2;
-          var offsetE = (value.e - _e) / value.a;
-          var offsetF = (value.f - _f) / value.a;
-          value.a += 0.1;
-          value.d += 0.1;
-          value.e -= (value.SVGWidth * value.a - value.SVGWidth * (value.a - 0.1)) / 2;
-          value.f -= (value.SVGHeight * value.d - value.SVGHeight * (value.d - 0.1)) / 2;
-          var _zoomValue = parseInt((value.a - 0.5) / constants.ZOOM_VARIABLE);
-          if (_zoomValue > 404) return;
-          if (_zoomValue < 35 || Number.isNaN(_zoomValue)) return;
-          // value = zoom(value, value.SVGWidth / 2, value.SVGHeight / 2, 1.06);
-          if (value.e <= 10 && value.e + value.a * value.SVGWidth + 10 >= value.viewerWidth && value.f <= 80 && value.f + value.d * value.SVGHeight + 10 >= value.viewerHeight) {
-            viewer2DActions.updateCameraView(value);
-          }
-        }
-      }, /*#__PURE__*/React.createElement("img", {
-        style: {
-          margin: 'auto',
-          width: 18,
-          userSelect: 'none'
-        },
-        src: "/assets/img/svg/bottombar/arrow-plus.svg"
-      })), /*#__PURE__*/React.createElement(S.Toggle_2D_3D, {
-        style: {
-          marginLeft: 5,
-          marginRight: 10,
-          backgroundColor: document.getElementById('setting_dialog') && document.getElementById('setting_dialog').style.display === 'flex' && TEXT_COLOR_NEUTRAL_5
-        },
-        onClick: function onClick(e) {
-          _this2.props.setToolbar('');
-          OpenSettings(e);
-        }
-      }, /*#__PURE__*/React.createElement("img", {
-        src: "/assets/img/svg/headerbar/setting.svg",
-        style: {
-          height: 18
-        }
-      }))) : /*#__PURE__*/React.createElement("div", {
-        style: {
-          display: 'flex',
-          position: 'relative',
-          backgroundColor: 'white',
-          height: 70,
-          cursor: 'pointer',
-          boxShadow: '0px 3px 5px -1px rgba(156, 154, 154, 0.2), 0px 6px 10px 0px rgba(156, 154, 154, 0.39), 0px 1px 18px 0px rgba(156, 154, 154, 0.12)',
-          borderRadius: 10,
-          alignItems: 'center'
-        }
-      }, /*#__PURE__*/React.createElement(S.Toggle_2D_3D, {
-        onClick: function onClick() {
-          _this2.props.setToolbar('');
-          projectActions.setMode(MODE_IDLE);
-          var layer = globalState.scene.getIn(['layers', globalState.scene.selectedLayer]);
-          var sCount = layer.selected.areas.size + layer.selected.holes.size + layer.selected.items.size + layer.selected.lines.size;
-          if (sCount > 1) projectActions.unselectAll();
-          // this.props.setShowProperty(true);
-          _this2.setState({
-            ceil3DFlag: false
-          });
-          // document.getElementById('item_custom') && (document.getElementById('item_custom').style.display = document.getElementById('item_custom').style.display === 'flex' && 'none');
-          document.getElementById('item_warning') && document.getElementById('item_custom') && (document.getElementById('item_warning').style.display = document.getElementById('item_custom').style.display === 'flex' && 'none');
-        }
-      }, /*#__PURE__*/React.createElement(S.FooterTitle, null, "2D")), /*#__PURE__*/React.createElement(S.Toggle_2D_3D, {
-        style: {
-          backgroundColor: TEXT_COLOR_NEUTRAL_5,
-          marginLeft: 5
-        }
-      }, /*#__PURE__*/React.createElement(S.FooterTitle, null, "3D")), selLineFlag ? /*#__PURE__*/React.createElement(Tooltip, {
-        title: "Elevation View"
-      }, /*#__PURE__*/React.createElement(S.Toggle_2D_3D, {
-        onClick: function onClick() {
-          return ViewElevation();
-        }
-      }, /*#__PURE__*/React.createElement(S.ArrowIcon, {
-        style: {
-          width: 20,
-          height: 20
-        },
-        src: elevationImg
-      }))) : /*#__PURE__*/React.createElement(Tooltip, {
-        title: /*#__PURE__*/React.createElement("span", null, "Please select a wall")
-      }, /*#__PURE__*/React.createElement(S.Toggle_2D_3D_Button, null, /*#__PURE__*/React.createElement(S.ArrowIcon, {
-        style: {
-          width: 20,
-          height: 20
-        },
-        src: elevationImg
-      }))), /*#__PURE__*/React.createElement(S.Direction_Left_Right, {
-        onMouseDown: function onMouseDown() {
-          window.tDKeyDown({
-            keyCode: 37
-          }); //Up key
-          panDragStart(37);
-          _this2.setState({
-            panButton: 'Left',
-            dragFlag: false
-          });
-          document.addEventListener('mouseup', function () {
-            _this2.props.setToolbar('');
-            panDragStop();
-            _this2.setState({
-              panButton: 'Left',
-              dragFlag: true
-            });
-          }, {
-            once: true
-          });
-        }
-      }, /*#__PURE__*/React.createElement(S.ArrowIcon, {
-        src: "/assets/img/svg/bottombar/arrow-left.svg"
-      })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(S.Direction_Up_Down, {
-        onMouseDown: function onMouseDown() {
-          window.tDKeyDown({
-            keyCode: 38
-          }); //Up key
-          panDragStart(38);
-          _this2.setState({
-            panButton: 'Top',
-            dragFlag: false
-          });
-          document.addEventListener('mouseup', function () {
-            _this2.props.setToolbar('');
-            panDragStop();
-            _this2.setState({
-              panButton: 'Top',
-              dragFlag: true
-            });
-          }, {
-            once: true
-          });
-        }
-      }, /*#__PURE__*/React.createElement(S.ArrowIcon, {
-        src: "/assets/img/svg/bottombar/arrow-up.svg"
-      })), /*#__PURE__*/React.createElement(S.Direction_Up_Down, {
-        onMouseDown: function onMouseDown() {
-          window.tDKeyDown({
-            keyCode: 40
-          }); //Up key
-          panDragStart(40);
-          _this2.setState({
-            panButton: 'Bottom',
-            dragFlag: false
-          });
-          document.addEventListener('mouseup', function () {
-            _this2.props.setToolbar('');
-            panDragStop();
-            _this2.setState({
-              panButton: 'Bottom',
-              dragFlag: true
-            });
-          }, {
-            once: true
-          });
-        }
-      }, /*#__PURE__*/React.createElement(S.ArrowIcon, {
-        src: "/assets/img/svg/bottombar/arrow-down.svg"
-      }))), /*#__PURE__*/React.createElement(S.Direction_Left_Right, {
-        onMouseDown: function onMouseDown() {
-          window.tDKeyDown({
-            keyCode: 39
-          }); //Up key
-          panDragStart(39);
-          _this2.setState({
-            panButton: 'Right',
-            dragFlag: false
-          });
-          document.addEventListener('mouseup', function () {
-            _this2.props.setToolbar('');
-            panDragStop();
-            _this2.setState({
-              panButton: 'Right',
-              dragFlag: true
-            });
-          }, {
-            once: true
-          });
-        }
-      }, /*#__PURE__*/React.createElement(S.ArrowIcon, {
-        src: "/assets/img/svg/bottombar/arrow-right.svg"
-      })), /*#__PURE__*/React.createElement(S.Rotation_Button, {
-        isVertical: true,
-        onMouseDown: function onMouseDown() {
-          window.SPKeyDown({
-            keyCode: 87
-          });
-          spinDragStart(87);
-          _this2.setState({
-            panButton: 'spinTop',
-            dragFlag: false
-          });
-        },
-        onMouseUp: function onMouseUp() {
-          _this2.props.setToolbar('');
-          spinDragStop();
-          _this2.setState({
-            panButton: 'spinTop',
-            dragFlag: true
-          });
-        }
-      }, /*#__PURE__*/React.createElement(S.Rotation_Icon, {
-        src: "/assets/img/svg/bottombar/spin-up.svg",
-        width: "unset"
-      })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(S.Rotation_Button, {
-        onMouseDown: function onMouseDown() {
-          window.SPKeyDown({
-            keyCode: 68
-          });
-          spinDragStart(68);
-          _this2.setState({
-            panButton: 'spinRight',
-            dragFlag: false
-          });
-        },
-        onMouseUp: function onMouseUp() {
-          _this2.props.setToolbar('');
-          spinDragStop();
-          _this2.setState({
-            panButton: 'spinRight',
-            dragFlag: true
-          });
-        }
-      }, /*#__PURE__*/React.createElement(S.Rotation_Icon, {
-        src: "/assets/img/svg/bottombar/spin-right.svg",
-        height: "unset"
-      })), /*#__PURE__*/React.createElement(S.Rotation_Button, {
-        onMouseDown: function onMouseDown() {
-          window.SPKeyDown({
-            keyCode: 65
-          });
-          spinDragStart(65);
-          _this2.setState({
-            panButton: 'spinLeft',
-            dragFlag: false
-          });
-        },
-        onMouseUp: function onMouseUp() {
-          _this2.props.setToolbar('');
-          spinDragStop();
-          _this2.setState({
-            panButton: 'spinLeft',
-            dragFlag: true
-          });
-        }
-      }, /*#__PURE__*/React.createElement(S.Rotation_Icon, {
-        height: "unset",
-        src: "/assets/img/svg/bottombar/spin-left.svg"
-      }))), /*#__PURE__*/React.createElement(S.Rotation_Button, {
-        isVertical: true,
-        onMouseDown: function onMouseDown() {
-          window.SPKeyDown({
-            keyCode: 83
-          });
-          spinDragStart(83);
-          _this2.setState({
-            panButton: 'spinBottom',
-            dragFlag: false
-          });
-        },
-        onMouseUp: function onMouseUp() {
-          _this2.props.setToolbar('');
-          spinDragStop();
-          _this2.setState({
-            panButton: 'spinBottom',
-            dragFlag: true
-          });
-        }
-      }, /*#__PURE__*/React.createElement(S.Rotation_Icon, {
-        src: "/assets/img/svg/bottombar/spin-down.svg",
-        width: "unset"
-      })), /*#__PURE__*/React.createElement(S.Toggle_2D_3D, {
-        style: {
-          marginLeft: 5,
-          marginRight: 10,
-          backgroundColor: document.getElementById('setting_dialog') && document.getElementById('setting_dialog').style.display === 'flex' && TEXT_COLOR_NEUTRAL_5
-        },
-        onClick: function onClick(e) {
-          _this2.props.setToolbar('');
-          OpenSettings(e);
-        }
-      }, /*#__PURE__*/React.createElement("img", {
-        src: "/assets/img/svg/headerbar/setting.svg",
-        style: {
-          height: 18
-        }
-      })));
-      var snackBar = /*#__PURE__*/React.createElement(SnackBar, {
-        style: {
-          top: 90
-        },
-        isOpen: this.state.isSnackBarOpen,
-        message: this.state.snackBarMessage,
-        handleClose: function handleClose() {
-          return _this2.setState({
-            isSnackBarOpen: false,
-            snackBarMessage: ''
-          });
-        }
-      });
-      return mode !== 'MODE_VIEWING_CATALOG' ? /*#__PURE__*/React.createElement("div", {
-        style: {
-          position: 'absolute',
-          bottom: 10,
-          display: 'flex',
-          width: '100%',
-          justifyContent: 'center',
-          alignItems: 'flex-end',
-          zIndex: 0
-        }
-      }, snackBar, footerview) : null;
-    }
-  }]);
-}(Component);
-export { FooterBar as default };
-FooterBar.propTypes = {
-  state: PropTypes.object.isRequired,
-  // footerbarComponents: PropTypes.array.isRequired,
-  // width: PropTypes.number.isRequired,
-  // height: PropTypes.number.isRequired,
-  content: PropTypes.number.isRequired
-  // softwareSignature: PropTypes.string
-};
-FooterBar.contextTypes = {
-  projectActions: PropTypes.object.isRequired,
-  viewer2DActions: PropTypes.object.isRequired,
-  viewer3DActions: PropTypes.object.isRequired,
-  // linesActions: PropTypes.object.isRequired,
-  // holesActions: PropTypes.object.isRequired,
-  itemsActions: PropTypes.object.isRequired,
-  // translator: PropTypes.object.isRequired,
-  catalog: PropTypes.object.isRequired
-};
-//# sourceMappingURL=footerbar.js.map