kitchen-simulator/es/LiteKitchenConfigurator.js

It is a kitchen simulator (self-contained micro-frontend).

import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
import _createClass from "@babel/runtime/helpers/esm/createClass";
import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
import _inherits from "@babel/runtime/helpers/esm/inherits";
var _excluded = ["width", "height", "state", "stateExtractor"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
import axios from 'axios';
import { convert } from "./utils/convert-units-lite";
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import * as constants from "./constants";
import { base64Decode } from "./utils/helper";
import actions from "./actions/export";
import Catalog from "./catalog/catalog";
import { Content } from "./components/export";
import Translator from "./translator/translator";
import { objectsMap } from "./utils/objects-utils";
import { VERSION } from "./version";
import { handleExternalEvent } from "./utils/isolate-event-handler";
var toolbarW = 0;
var wrapperStyle = {
  display: 'flex',
  flexFlow: 'row nowrap'
};
var LiteKitchenConfigurator = /*#__PURE__*/function (_Component) {
  function LiteKitchenConfigurator(props) {
    var _utmRequestData2, _utmRequestData3, _utmRequestData4, _utmRequestData5, _utmRequestData6, _utmRequestData7, _utmRequestData8, _utmRequestData9, _utmRequestData0;
    var _this;
    _classCallCheck(this, LiteKitchenConfigurator);
    _this = _callSuper(this, LiteKitchenConfigurator, [props]);

    // utm tracking
    var utmDetailParams = new URLSearchParams(_this.props.location && _this.props.location.search);
    var utmStrEncoded = utmDetailParams.get('details');
    var utmRequestData = null;
    if (utmStrEncoded) {
      try {
        var _utmRequestData;
        utmRequestData = JSON.parse(base64Decode(utmStrEncoded));
        utmRequestData = JSON.parse((_utmRequestData = utmRequestData) === null || _utmRequestData === void 0 ? void 0 : _utmRequestData.utm);
      } catch (e) {
        console.error('Cannot parse utm parameter: ', error);
        utmRequestData = null;
      }
    }
    _this.state = {
      savePopupVisible: false,
      quotePopupVisible: false,
      assistPopupVisible: false,
      newProjectPopupVisible: false,
      isModalVisible: false,
      submitPromptVisible: false,
      stateSubmitType: constants.SUBMIT_REQUEST_ASSIST,
      savePromptVisible: false,
      isShowProperty: true,
      submitTosave: false,
      signOpen: false,
      myProjectsOpen: false,
      myProjectsToLogin: false,
      downloadPopupVisible: false,
      // For Toolbar Item
      toolbar: '',
      reviewQuotePopupOpened: false,
      floorOpened: false,
      cabinetOpened: false,
      applianceOpened: false,
      finishingOpened: false,
      doorStyleOpen: false,
      wizardStepOpend: false,
      tutorialMouseEventsAdd: false,
      replaceCabinetFlag: false,
      isSnackBarOpen: false,
      isSnackBar1Open: false,
      redirectURL: '',
      snackBarMessage: '',
      isSaved: false,
      isLeaving: false,
      stateCatalog: _this.props.catalog
    };

    // For UTM tracking
    _this.utm = {
      utm_source: ((_utmRequestData2 = utmRequestData) === null || _utmRequestData2 === void 0 ? void 0 : _utmRequestData2.source) || 'source',
      utm_medium: ((_utmRequestData3 = utmRequestData) === null || _utmRequestData3 === void 0 ? void 0 : _utmRequestData3.medium) || 'medium',
      utm_campaign: ((_utmRequestData4 = utmRequestData) === null || _utmRequestData4 === void 0 ? void 0 : _utmRequestData4.campaign) || 'campaign',
      utm_term: ((_utmRequestData5 = utmRequestData) === null || _utmRequestData5 === void 0 ? void 0 : _utmRequestData5.term) || 'term',
      utm_content: ((_utmRequestData6 = utmRequestData) === null || _utmRequestData6 === void 0 ? void 0 : _utmRequestData6.content) || 'content',
      gclid: ((_utmRequestData7 = utmRequestData) === null || _utmRequestData7 === void 0 ? void 0 : _utmRequestData7.gclid) || 'gclid',
      msclkid: ((_utmRequestData8 = utmRequestData) === null || _utmRequestData8 === void 0 ? void 0 : _utmRequestData8.msclkid) || 'msclkid',
      fbclid: ((_utmRequestData9 = utmRequestData) === null || _utmRequestData9 === void 0 ? void 0 : _utmRequestData9.fbclid) || 'fbclid',
      ttclid: ((_utmRequestData0 = utmRequestData) === null || _utmRequestData0 === void 0 ? void 0 : _utmRequestData0.ttclid) || 'ttclid'
    };
    _this.openFloor = _this.openFloor.bind(_this);
    _this.openCabinet = _this.openCabinet.bind(_this);
    _this.openFinishing = _this.openFinishing.bind(_this);
    _this.openAppliance = _this.openAppliance.bind(_this);
    _this.toggleDoorStyle = _this.toggleDoorStyle.bind(_this);
    _this.onReviewQuoteClicked = _this.onReviewQuoteClicked.bind(_this);
    _this.closeFloorTB = _this.closeFloorTB.bind(_this);
    _this.closeCabinetTB = _this.closeCabinetTB.bind(_this);
    _this.closeFinishingTB = _this.closeFinishingTB.bind(_this);
    _this.closeApplianceTB = _this.closeApplianceTB.bind(_this);
    _this.setToolbar = _this.setToolbar.bind(_this);
    _this.replaceCabinet = _this.replaceCabinet.bind(_this);
    _this.setSubmitToSave = _this.setSubmitToSave.bind(_this);
    _this.setSignOpen = _this.setSignOpen.bind(_this);
    _this.setMyProjectsOpen = _this.setMyProjectsOpen.bind(_this);
    _this.setMyProjectsToLogin = _this.setMyProjectsToLogin.bind(_this);
    _this.setDownloadPopupVisible = _this.setDownloadPopupVisible.bind(_this);
    _this.neverShowInput = /*#__PURE__*/React.createRef(null);
    _this.setShowProperty = _this.setShowProperty.bind(_this);
    return _this;
  }

  // Toolbar control functions
  _inherits(LiteKitchenConfigurator, _Component);
  return _createClass(LiteKitchenConfigurator, [{
    key: "setToolbar",
    value: function setToolbar(toolBarKey) {
      this.setState({
        toolbar: toolBarKey
      });
    }
  }, {
    key: "setShowProperty",
    value: function setShowProperty(value) {
      this.setState({
        isShowProperty: value
      });
    }
  }, {
    key: "setMyProjectsOpen",
    value: function setMyProjectsOpen(value) {
      this.setState({
        myProjectsOpen: value
      });
      this.setState({
        signOpen: false
      });
      this.setState({
        wizardStepOpend: false
      });
    }
  }, {
    key: "setMyProjectsToLogin",
    value: function setMyProjectsToLogin(value) {
      this.setState({
        myProjectsToLogin: value
      });
    }
  }, {
    key: "setDownloadPopupVisible",
    value: function setDownloadPopupVisible(value) {
      this.setState({
        reviewQuotePopupOpened: false
      });
      this.setState({
        savePopupVisible: false
      });
      this.setState({
        quotePopupVisible: false
      });
      this.setState({
        submitTosave: false
      });
      this.setState({
        assistPopupVisible: false
      });
      this.setState({
        newProjectPopupVisible: false
      });
      this.setState({
        downloadPopupVisible: value
      });
    }
  }, {
    key: "setSubmitToSave",
    value: function setSubmitToSave(value) {
      this.setState({
        submitTosave: value
      });
    }
  }, {
    key: "setSignOpen",
    value: function setSignOpen(value) {
      this.setState({
        wizardStepOpend: false
      });
      this.setState({
        myProjectsOpen: false
      });
      this.setState({
        signOpen: value
      });
    }
  }, {
    key: "openFloor",
    value: function openFloor() {
      this.setState({
        floorOpened: true
      });
      document.getElementById('make_floorplan_inactive').parentElement.parentElement.style.zIndex = 999;
    }
  }, {
    key: "openCabinet",
    value: function openCabinet() {
      this.setState({
        cabinetOpened: true
      });
      document.getElementById('add_cabinets_inactive').parentElement.parentElement.style.zIndex = 999;
    }
  }, {
    key: "toggleDoorStyle",
    value: function toggleDoorStyle(visible) {
      this.setState({
        doorStyleOpen: visible
      });
      document.getElementById('select_doorstyle_inactive').parentElement.parentElement.style.zIndex = visible ? 999 : 6;
    }
  }, {
    key: "replaceCabinet",
    value: function replaceCabinet(value) {
      this.setState({
        replaceCabinetFlag: value
      });
    }
  }, {
    key: "openAppliance",
    value: function openAppliance() {
      this.setState({
        applianceOpened: true
      });
      document.getElementById('add_appliances_inactive').parentElement.parentElement.style.zIndex = 999;
    }
  }, {
    key: "openFinishing",
    value: function openFinishing() {
      this.setState({
        finishingOpened: true
      });
      document.getElementById('finishing_touches_inactive').parentElement.parentElement.style.zIndex = 999;
    }
  }, {
    key: "onReviewQuoteClicked",
    value: function onReviewQuoteClicked(visible) {
      this.setState({
        reviewQuotePopupOpened: visible
      });
      document.getElementById('review_quote_inactive').parentElement.parentElement.style.zIndex = visible ? 999 : 6;
    }
  }, {
    key: "closeFloorTB",
    value: function closeFloorTB() {
      this.setState({
        floorOpened: false
      });
      document.getElementById('make_floorplan_inactive') && (document.getElementById('make_floorplan_inactive').parentElement.parentElement.style.zIndex = 6);
    }
  }, {
    key: "closeCabinetTB",
    value: function closeCabinetTB() {
      this.setState({
        cabinetOpened: false
      });
      document.getElementById('add_cabinets_inactive').parentElement.parentElement.style.zIndex = 6;
    }
  }, {
    key: "closeFinishingTB",
    value: function closeFinishingTB() {
      this.setState({
        finishingOpened: false
      });
      document.getElementById('finishing_touches_inactive').parentElement.parentElement.style.zIndex = 6;
    }
  }, {
    key: "closeApplianceTB",
    value: function closeApplianceTB() {
      this.setState({
        applianceOpened: false
      });
      document.getElementById('add_appliances_inactive').parentElement.parentElement.style.zIndex = 6;
    }
  }, {
    key: "closeDoorstyle",
    value: function closeDoorstyle() {
      this.setState({});
      document.getElementById('select_doorstyle_inactive').parentElement.parentElement.style.zIndex = 6;
    }
  }, {
    key: "closeReviewQuote",
    value: function closeReviewQuote() {
      this.setState({});
      document.getElementById('review_quote_inactive').parentElement.parentElement.style.zIndex = 6;
    }
  }, {
    key: "getChildContext",
    value: function getChildContext() {
      var _this2 = this;
      return _objectSpread(_objectSpread({}, objectsMap(actions, function (actionNamespace) {
        return _this2.props[actionNamespace];
      })), {}, {
        translator: this.props.translator,
        catalog: this.props.catalog
      });
    }
  }, {
    key: "saveProjectToStorage",
    value: function saveProjectToStorage() {
      var _this$props = this.props,
        state = _this$props.state,
        stateExtractor = _this$props.stateExtractor;
      var extractedState = stateExtractor(state);
      var projectData = JSON.stringify(extractedState.get('scene').toJS());
      sessionStorage.setItem(window.location.href, projectData);
    }
  }, {
    key: "componentDidMount",
    value: function componentDidMount() {
      window.forRedo = [];
      var store = this.context.store;
      var _this$props2 = this.props,
        stateExtractor = _this$props2.stateExtractor,
        plugins = _this$props2.plugins;
      var newplugins = _toConsumableArray(plugins);
      newplugins.forEach(function (newplugin) {
        return newplugin(store, stateExtractor);
      });
    }
  }, {
    key: "componentWillReceiveProps",
    value: function componentWillReceiveProps(nextProps) {
      var _oldState$catalog, _plannerState$catalog;
      var stateExtractor = nextProps.stateExtractor,
        state = nextProps.state,
        projectActions = nextProps.projectActions,
        catalog = nextProps.catalog,
        externalEvent = nextProps.externalEvent;

      // handle external events
      if (this.props.externalEvent !== externalEvent) {
        handleExternalEvent(nextProps);
      }
      var plannerState = stateExtractor(state);
      var oldState = stateExtractor(this.props.state);
      if ((oldState === null || oldState === void 0 || (_oldState$catalog = oldState.catalog) === null || _oldState$catalog === void 0 ? void 0 : _oldState$catalog.elements) !== (plannerState === null || plannerState === void 0 || (_plannerState$catalog = plannerState.catalog) === null || _plannerState$catalog === void 0 ? void 0 : _plannerState$catalog.elements)) {
        // copy state.catalog to the props.catalog
        // let catalog = this.state.stateCatalog;
        // console.log('111111', plannerState?.catalog?.elements.toJS());
        // catalog.elements = plannerState?.catalog?.elements.toJS();
        // console.log('222222', catalog);
        // this.setState({ stateCatalog: catalog });
      }
      var catalogReady = plannerState.getIn(['catalog', 'ready']);
      if (!catalogReady) {
        projectActions.initCatalog(catalog);
      }
    }
  }, {
    key: "isProjectEmpty",
    value: function isProjectEmpty(scene) {
      var layers = scene.layers,
        selectedLayer = scene.selectedLayer;
      var layer = layers.get(selectedLayer);
      return layer.areas.size + layer.lines.size + layer.holes.size + layer.items.size === 0;
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props3 = this.props,
        width = _this$props3.width,
        height = _this$props3.height,
        state = _this$props3.state,
        stateExtractor = _this$props3.stateExtractor,
        props = _objectWithoutProperties(_this$props3, _excluded);
      var _this$state = this.state,
        savePopupVisible = _this$state.savePopupVisible,
        quotePopupVisible = _this$state.quotePopupVisible,
        assistPopupVisible = _this$state.assistPopupVisible,
        signOpen = _this$state.signOpen,
        myProjectsOpen = _this$state.myProjectsOpen;
      var contentW = width - toolbarW;
      // let contentW = width - toolbarW - sidebarW;
      // let toolbarH = height - footerBarH;
      // let contentH = height - footerBarH;
      // let sidebarH = height - footerBarH;
      var toolbarH = height;
      var contentH = height;
      var sidebarH = height;
      var headerW = width;
      var headerH = 60;
      var extractedState = stateExtractor(state);
      var firstVisit = this.state.wizardStepOpend && this.isProjectEmpty(extractedState.scene);
      var allVisible = firstVisit || signOpen || myProjectsOpen;
      var _scene = extractedState.getIn(['scene']);
      var len = convert(_scene.width).from(_scene.unit).to('cm');
      var _viewer2D = extractedState.getIn(['viewer2D']);
      if (_viewer2D.size > 0) {
        var scaleX = width / len * 3;
        var scaleY = height / len * 3;
        var scale = scaleX > scaleY ? scaleY : scaleX;
        var _e = width - len * scale,
          _f = height - len * scale;
        var viewer = _viewer2D.toJS();
        if (viewer.e === 0 && viewer.f === 0) {
          _viewer2D = _viewer2D.merge({
            e: viewer.viewerWidth / 2 - viewer.SVGWidth / 2,
            f: viewer.viewerHeight / 2 - viewer.SVGHeight / 2,
            a: 0.99,
            d: 0.99
          });
        }
      }
      extractedState = extractedState.merge({
        viewer2D: _viewer2D
      });
      return /*#__PURE__*/React.createElement("section", null, /*#__PURE__*/React.createElement("div", {
        style: _objectSpread(_objectSpread({}, wrapperStyle), {}, {
          height: height,
          display: 'flex',
          justifyContent: 'center'
        })
      }, /*#__PURE__*/React.createElement(Content, _extends({
        width: contentW,
        height: contentH,
        catalog: this.state.stateCatalog,
        state: extractedState,
        toolBar: this.state.toolbar,
        setToolbar: this.setToolbar,
        replaceCabinet: this.replaceCabinet,
        keyDownEnable: !savePopupVisible && !quotePopupVisible && !assistPopupVisible
      }, props, {
        onWheel: function onWheel(event) {
          return event.preventDefault();
        }
      }))));
    }
  }]);
}(Component);
LiteKitchenConfigurator.propTypes = {
  translator: PropTypes.instanceOf(Translator),
  catalog: PropTypes.instanceOf(Catalog),
  allowProjectFileSupport: PropTypes.bool,
  plugins: PropTypes.arrayOf(PropTypes.func),
  autosaveKey: PropTypes.string,
  autosaveDelay: PropTypes.number,
  width: PropTypes.number.isRequired,
  height: PropTypes.number.isRequired,
  stateExtractor: PropTypes.func.isRequired,
  sidebarComponents: PropTypes.array,
  footerbarComponents: PropTypes.array,
  customContents: PropTypes.object,
  softwareSignature: PropTypes.string,
  configData: PropTypes.object
};
LiteKitchenConfigurator.contextTypes = {
  store: PropTypes.object.isRequired
};
LiteKitchenConfigurator.childContextTypes = _objectSpread(_objectSpread({}, objectsMap(actions, function () {
  return PropTypes.object;
})), {}, {
  translator: PropTypes.object,
  catalog: PropTypes.object
});
LiteKitchenConfigurator.defaultProps = {
  translator: new Translator(),
  catalog: new Catalog(),
  plugins: [],
  allowProjectFileSupport: true,
  softwareSignature: "LiteKitchenConfigurator ".concat(VERSION),
  sidebarComponents: [],
  footerbarComponents: [],
  customContents: {},
  configData: {}
};

//redux connect
function mapStateToProps(reduxState) {
  return {
    state: reduxState
  };
}
function mapDispatchToProps(dispatch) {
  return objectsMap(actions, function (actionNamespace) {
    return bindActionCreators(actions[actionNamespace], dispatch);
  });
}
export default connect(mapStateToProps, mapDispatchToProps)(LiteKitchenConfigurator);