kitchen-simulator 3.15.0 → 3.16.0-test-renderer-fix

package/lib/LiteRenderer.js

@@ -6,9 +6,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = LiteRenderer;
-var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
@@ -20,75 +18,53 @@ var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactRedux = require("react-redux");
 var _redux = require("redux");
+var _immutable = require("immutable");
+var Sentry = _interopRequireWildcard(require("@sentry/react"));
+var THREE = _interopRequireWildcard(require("three"));
 var _models = _interopRequireWildcard(require("./models"));
 var Models = _models;
 var _reducer = _interopRequireDefault(require("./reducers/reducer"));
 var _AppContext = _interopRequireDefault(require("./AppContext"));
 var _catalog = _interopRequireDefault(require("./catalog/catalog"));
-var _SVGLoader = require("three/addons/loaders/SVGLoader");
-var _constants = require("./constants");
 var Areas = _interopRequireWildcard(require("./catalog/areas/area/planner-element"));
 var Lines = _interopRequireWildcard(require("./catalog/lines/wall/planner-element"));
 var Holes = _interopRequireWildcard(require("./catalog/holes/export"));
 var _export2 = require("./plugins/export");
-var _immutable = require("immutable");
-var Sentry = _interopRequireWildcard(require("@sentry/react"));
-var THREE = _interopRequireWildcard(require("three"));
 var _LiteKitchenConfigurator = _interopRequireDefault(require("./LiteKitchenConfigurator"));
-var _excluded = ["width", "height", "configData", "options", "user", "auth", "featureFlags", "sentry", "analytics", "externalEvent", "onInternalEvent", "onError"];
+var _excluded = ["width", "height", "configData", "externalEvent", "onInternalEvent", "onError"];
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 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) { (0, _defineProperty2["default"])(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 _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(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; })(); }
-if (typeof window !== 'undefined') window.THREE = THREE;
-
-/* ============================== component ============================= */
-var MyCatalog = new _catalog["default"]();
-var AppState = (0, _immutable.Map)({
-  KitchenConfigurator: new _models.State()
-});
-console.log('Version: 378.45-202509_DIY-364-mbox-crash');
-isProduction && Sentry.init({
-  dsn: process.env.SENTRY_DSN,
-  environment: process.env.SENTRY_ENVIRONMENT
-});
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } // LiteRenderer.jsx
+var isBrowser = typeof window !== 'undefined';
+if (isBrowser) window.THREE = THREE;
 
-//define reducer
-var reducer = function reducer(state, action) {
-  state = state || AppState;
-  state = state.update('KitchenConfigurator', function (plannerState) {
-    return (0, _reducer["default"])(plannerState, action);
+// ---- Sentry init: keep behavior but avoid re-init on multiple mounts ----
+var __sentryInited = false;
+function ensureSentryInit() {
+  // assumes isProduction is defined in your build env like before
+  if (!isBrowser) return;
+  if (!isProduction) return;
+  if (__sentryInited) return;
+  __sentryInited = true;
+  Sentry.init({
+    dsn: process.env.SENTRY_DSN,
+    environment: process.env.SENTRY_ENVIRONMENT
   });
-  return state;
-};
-var store = (0, _redux.createStore)(reducer, null, !isProduction && window.devToolsExtension ? window.devToolsExtension({
-  features: {
-    pause: true,
-    // start/pause recording of dispatched actions
-    lock: true,
-    // lock/unlock dispatching actions and side effects
-    persist: true,
-    // persist states on page reloading
-    "export": true,
-    // export history of actions in a file
-    "import": 'custom',
-    // import history of actions from a file
-    jump: true,
-    // jump back and forth (time travelling)
-    skip: true,
-    // skip (cancel) actions
-    reorder: true,
-    // drag and drop actions in the history list
-    dispatch: true,
-    // dispatch custom actions or action creators
-    test: true // generate tests for the selected actions
-  },
-  maxAge: 999999
-}) : function (f) {
-  return f;
-});
-var plugins = [(0, _export2.Keyboard)(), (0, _export2.ConsoleDebugger)()];
+}
+
+// ---------------- error helpers ----------------
+function safeJson(v) {
+  try {
+    return JSON.parse(JSON.stringify(v));
+  } catch (_unused) {
+    return undefined;
+  }
+}
 function serializeError(err) {
   try {
     if (!err) return {
@@ -105,19 +81,12 @@ function serializeError(err) {
       message: String(err),
       raw: safeJson(err)
     };
-  } catch (_unused) {
+  } catch (_unused2) {
     return {
       message: 'Error serializing error'
     };
   }
 }
-function safeJson(v) {
-  try {
-    return JSON.parse(JSON.stringify(v));
-  } catch (_unused2) {
-    return undefined;
-  }
-}
 
 /* ---------- Error Boundary that pushes into buffer ---------- */
 var ToolErrorBoundary = /*#__PURE__*/function (_React$Component) {
@@ -145,35 +114,144 @@ var ToolErrorBoundary = /*#__PURE__*/function (_React$Component) {
     }
   }]);
 }(_react["default"].Component);
+ToolErrorBoundary.propTypes = {
+  pushError: _propTypes["default"].func.isRequired,
+  children: _propTypes["default"].any
+};
+
+// ----------------- catalog init -----------------
+function initCatalogOnce(catalog) {
+  if (!catalog) return;
+  if (catalog.__ksInitialized) return;
+  for (var x in Areas) catalog.registerElement(Areas[x]);
+  for (var _x in Lines) catalog.registerElement(Lines[_x]);
+  for (var _x2 in Holes) catalog.registerElement(Holes[_x2]);
+  catalog.registerCategory('Windows', 'Windows', [Holes.windowClear, Holes.windowCross, Holes.windowDoubleHung, Holes.windowVertical]);
+  catalog.registerCategory('Doors', 'Doors', [Holes.doorInterior, Holes.doorExterior, Holes.doorCloset, Holes.doorSliding, Holes.doorwayFramed, Holes.doorwayFrameless]);
+  catalog.__ksInitialized = true;
+}
+
+// ----------------- store factory -----------------
+function createInstanceStore() {
+  // keep your initial state semantics identical
+  var AppState = (0, _immutable.Map)({
+    KitchenConfigurator: new _models.State()
+  });
+  var reducer = function reducer(state, action) {
+    state = state || AppState;
+    return state.update('KitchenConfigurator', function (plannerState) {
+      return (0, _reducer["default"])(plannerState, action);
+    });
+  };
+
+  // keep devtools behavior identical; guard against missing window
+  var enhancer = !isProduction && isBrowser && window.devToolsExtension ? window.devToolsExtension({
+    features: {
+      pause: true,
+      lock: true,
+      persist: true,
+      "export": true,
+      "import": 'custom',
+      jump: true,
+      skip: true,
+      reorder: true,
+      dispatch: true,
+      test: true
+    },
+    maxAge: 999999
+  }) : function (f) {
+    return f;
+  };
+  return (0, _redux.createStore)(reducer, null, enhancer);
+}
+
+// ----------------- plugins -----------------
+function createPlugins() {
+  return [(0, _export2.Keyboard)(), (0, _export2.ConsoleDebugger)()];
+}
 function LiteRenderer(props) {
+  ensureSentryInit();
   var width = props.width,
     height = props.height,
     configData = props.configData,
-    options = props.options,
-    user = props.user,
-    auth = props.auth,
-    featureFlags = props.featureFlags,
-    sentry = props.sentry,
-    analytics = props.analytics,
     externalEvent = props.externalEvent,
     onInternalEvent = props.onInternalEvent,
     onError = props.onError,
     passThrough = (0, _objectWithoutProperties2["default"])(props, _excluded);
 
+  // ---- instance-scoped store + catalog (no module-level globals) ----
+  var storeRef = (0, _react.useRef)(null);
+  if (!storeRef.current) storeRef.current = createInstanceStore();
+  var catalogRef = (0, _react.useRef)(null);
+  if (!catalogRef.current) {
+    catalogRef.current = new _catalog["default"]();
+    initCatalogOnce(catalogRef.current);
+  }
+
+  // ---- plugins init once per instance + cleanup support ----
+  var pluginCleanupsRef = (0, _react.useRef)([]);
+  var plugins = (0, _react.useMemo)(function () {
+    return createPlugins();
+  }, []); // stable
+
+  (0, _react.useEffect)(function () {
+    var store = storeRef.current;
+    var stateExtractor = function stateExtractor(state) {
+      return state.get('KitchenConfigurator');
+    };
+
+    // plugins may or may not return cleanup; support both
+    var cleanups = [];
+    var _iterator = _createForOfIteratorHelper(plugins),
+      _step;
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var p = _step.value;
+        try {
+          var maybeCleanup = p === null || p === void 0 ? void 0 : p(store, stateExtractor);
+          if (typeof maybeCleanup === 'function') cleanups.push(maybeCleanup);
+        } catch (e) {
+          // keep behavior: don't crash; send to onError buffer
+          // (actual emitting is handled below)
+        }
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+    pluginCleanupsRef.current = cleanups;
+    return function () {
+      var _iterator2 = _createForOfIteratorHelper(pluginCleanupsRef.current),
+        _step2;
+      try {
+        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+          var fn = _step2.value;
+          try {
+            fn();
+          } catch (_unused3) {}
+        }
+      } catch (err) {
+        _iterator2.e(err);
+      } finally {
+        _iterator2.f();
+      }
+      pluginCleanupsRef.current = [];
+    };
+  }, [plugins]);
+
   /* ---------- track last external event ---------- */
   var lastExternalEventRef = (0, _react.useRef)(null);
   (0, _react.useEffect)(function () {
-    if (externalEvent) {
-      lastExternalEventRef.current = externalEvent;
-    }
+    if (externalEvent) lastExternalEventRef.current = externalEvent;
   }, [externalEvent]);
 
   /* ---------- error buffer + last emitted bundle ---------- */
-  var errorsBufferRef = (0, _react.useRef)([]); // pending errors (not yet emitted)
+  var errorsBufferRef = (0, _react.useRef)([]);
   var lastEmittedRef = (0, _react.useRef)({
     externalEvent: null,
     errors: []
-  }); // last bundle we sent
+  });
   var flushTimerRef = (0, _react.useRef)(null);
   var emit = (0, _react.useCallback)(function (external, errors) {
     var payload = {
@@ -182,13 +260,12 @@ function LiteRenderer(props) {
     };
     try {
       onError === null || onError === void 0 || onError(payload);
-    } catch (_unused3) {}
+    } catch (_unused4) {}
+    // keep your debug
     // eslint-disable-next-line no-console
     console.debug('[LiteRenderer:onError]', payload);
     lastEmittedRef.current = payload;
   }, [onError]);
-
-  // batch short bursts (e.g., multiple async errors in same tick)
   var scheduleFlush = (0, _react.useCallback)(function () {
     if (flushTimerRef.current) return;
     flushTimerRef.current = setTimeout(function () {
@@ -197,7 +274,7 @@ function LiteRenderer(props) {
       if (!errors.length) return;
       errorsBufferRef.current = [];
       emit(lastExternalEventRef.current, errors);
-    }, 0); // micro-batch; increase (e.g. 50ms) if you want coarser batching
+    }, 0);
   }, [emit]);
   var pushError = (0, _react.useCallback)(function (errPayload) {
     errorsBufferRef.current.push(_objectSpread({
@@ -208,6 +285,7 @@ function LiteRenderer(props) {
 
   /* ---------- global runtime + async error capture ---------- */
   (0, _react.useEffect)(function () {
+    if (!isBrowser) return;
     var onWindowError = function onWindowError(event) {
       pushError({
         type: 'runtime-error',
@@ -239,64 +317,20 @@ function LiteRenderer(props) {
     var prev = prevExternalEventRef.current;
     if (prev === externalEvent) return;
     prevExternalEventRef.current = externalEvent;
-
-    // if we already emitted something before, re-send it with the new event context
     var last = lastEmittedRef.current;
     if (last && last.errors && last.errors.length) {
       emit(lastExternalEventRef.current, last.errors);
     }
   }, [externalEvent, emit]);
-  var id = configData.id,
-    logoImg = configData.logoImg,
-    companyUrl = configData.companyUrl;
-  (0, _react.useEffect)(function () {
-    var initMyCatalog = /*#__PURE__*/function () {
-      var _ref = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee() {
-        var x, _x, _x2;
-        return _regenerator["default"].wrap(function (_context) {
-          while (1) switch (_context.prev = _context.next) {
-            case 0:
-              for (x in Areas) MyCatalog.registerElement(Areas[x]);
-              for (_x in Lines) MyCatalog.registerElement(Lines[_x]);
-              for (_x2 in Holes) MyCatalog.registerElement(Holes[_x2]);
-              MyCatalog.registerCategory('Windows', 'Windows', [Holes.windowClear, Holes.windowCross, Holes.windowDoubleHung, Holes.windowVertical]);
-              MyCatalog.registerCategory('Doors', 'Doors', [Holes.doorInterior, Holes.doorExterior, Holes.doorCloset, Holes.doorSliding, Holes.doorwayFramed, Holes.doorwayFrameless]);
-            case 1:
-            case "end":
-              return _context.stop();
-          }
-        }, _callee);
-      }));
-      return function initMyCatalog() {
-        return _ref.apply(this, arguments);
-      };
-    }();
-    var initCatalog = /*#__PURE__*/function () {
-      var _ref2 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee2() {
-        return _regenerator["default"].wrap(function (_context2) {
-          while (1) switch (_context2.prev = _context2.next) {
-            case 0:
-              _context2.next = 1;
-              return initMyCatalog();
-            case 1:
-            case "end":
-              return _context2.stop();
-          }
-        }, _callee2);
-      }));
-      return function initCatalog() {
-        return _ref2.apply(this, arguments);
-      };
-    }();
-    initCatalog();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [id]);
+  var _ref = configData || {},
+    logoImg = _ref.logoImg,
+    companyUrl = _ref.companyUrl;
   return /*#__PURE__*/_react["default"].createElement(_AppContext["default"].Provider, null, /*#__PURE__*/_react["default"].createElement(_reactRedux.Provider, {
-    store: store
+    store: storeRef.current
   }, /*#__PURE__*/_react["default"].createElement(ToolErrorBoundary, {
     pushError: pushError
   }, /*#__PURE__*/_react["default"].createElement(_LiteKitchenConfigurator["default"], (0, _extends2["default"])({
-    catalog: MyCatalog,
+    catalog: catalogRef.current,
     width: width,
     height: height,
     logoImage: logoImg,
@@ -310,9 +344,6 @@ function LiteRenderer(props) {
     onInternalEvent: onInternalEvent
   }, passThrough)))));
 }
-
-/* ============================== prop types ============================== */
-
 LiteRenderer.propTypes = {
   width: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string]),
   height: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string]),

package/lib/class/project.js

@@ -847,85 +847,88 @@ var Project = exports["default"] = /*#__PURE__*/function () {
       state = state.merge({
         catalog: catalog
       });
-      var _viewer2D = state.viewer2D;
-      var viewer = _viewer2D.toJS();
-      width = (0, _convertUnitsLite.convert)(width).from(state.getIn(['scene', 'layers', 'layer-1', 'unit'])).to('cm');
-      height = (0, _convertUnitsLite.convert)(height).from(state.getIn(['scene', 'layers', 'layer-1', 'unit'])).to('cm');
-      var layerID = state.scene.selectedLayer;
       state = _export2.Item.setInitialDoorStyle(state, doorStyle).updatedState;
-      if ((0, _helper.isEmpty)(viewer)) return {
-        updatedState: state
-      };
-      var halfWidth = width / 2;
-      var halfHeight = height / 2;
-      var viewerWidth = viewer.SVGWidth;
-      var viewerHeight = viewer.SVGHeight;
-      var centerPos = {
-        x: viewerWidth / 2,
-        y: viewerHeight / 2
-      };
-      var vtLB = {
-        x: centerPos.x - halfWidth,
-        y: centerPos.y - halfHeight
-      };
-      var vtRB = {
-        x: centerPos.x + halfWidth,
-        y: centerPos.y - halfHeight
-      };
-      var vtRT = {
-        x: centerPos.x + halfWidth,
-        y: centerPos.y + halfHeight
-      };
-      var vtLT = {
-        x: centerPos.x - halfWidth,
-        y: centerPos.y + halfHeight
-      };
-      var vertices = [];
-      switch (roomShapeType) {
-        case 'rectangle':
-          vertices = [vtLB, vtLT, vtRT, vtRB];
-          break;
-        case constants.ROOM_SHAPE_TYPE.TWO_WALLS_RIGHT_BOTTOM:
-          vertices = [vtLB, vtRB, vtRT];
-          break;
-        case constants.ROOM_SHAPE_TYPE.TWO_WALLS_RIGHT_TOP:
-          vertices = [vtRB, vtRT, vtLT];
-          break;
-        case constants.ROOM_SHAPE_TYPE.TWO_WALLS_LEFT_TOP:
-          vertices = [vtRT, vtLT, vtLB];
-          break;
-        case constants.ROOM_SHAPE_TYPE.TWO_WALLS_LEFT_BOTTOM:
-          vertices = [vtLT, vtLB, vtRB];
-          break;
-        case constants.ROOM_SHAPE_TYPE.THREE_WALLS_LEFT_TOP_RIGHT:
-          vertices = [vtRB, vtRT, vtLT, vtLB];
-          break;
-        case constants.ROOM_SHAPE_TYPE.THREE_WALLS_TOP_RIGHT_BOTTOM:
-          vertices = [vtLB, vtRB, vtRT, vtLT];
-          break;
-        case constants.ROOM_SHAPE_TYPE.THREE_WALLS_RIGHT_BOTTOM_LEFT:
-          vertices = [vtLT, vtLB, vtRB, vtRT];
-          break;
-        case constants.ROOM_SHAPE_TYPE.THREE_WALLS_BOTTOM_LEFT_TOP:
-          vertices = [vtRT, vtLT, vtLB, vtRB];
-          break;
-      }
-      for (var i = 0; i < vertices.length - 1; i++) {
-        state = _export2.Line.create(state, layerID, 'wall', vertices[i].x, vertices[i].y, vertices[i + 1].x, vertices[i + 1].y).updatedState;
-      }
-      if (roomShapeType === constants.ROOM_SHAPE_TYPE.RECTANGLE) {
-        state = _export2.Line.create(state, layerID, 'wall', vertices[vertices.length - 1].x, vertices[vertices.length - 1].y, vertices[0].x, vertices[0].y).updatedState;
-      }
-      var layer = state.getIn(['scene', 'layers', layerID]);
-      var lines = layer.getIn(['lines']).toJS();
-      var drawingInfo = {};
-      var lineKey = Object.keys(lines);
-      for (var _i = 0; _i < lineKey.length; _i++) {
-        if (!(0, _helper.isEmpty)(lineKey)) {
-          drawingInfo.drawingLine = layer.getIn(['lines', lineKey[_i]]);
+      var layerID = state.scene.selectedLayer;
+      if (roomShapeType !== constants.ROOM_SHAPE_TYPE.CUSTOM && !(0, _helper.isEmpty)(width) && !(0, _helper.isEmpty)(height) && width !== 0 && height !== 0) {
+        var _viewer2D = state.viewer2D;
+        var viewer = _viewer2D.toJS();
+        if ((0, _helper.isEmpty)(viewer)) return {
+          updatedState: state
+        };
+        width = (0, _convertUnitsLite.convert)(width).from(state.getIn(['scene', 'layers', 'layer-1', 'unit'])).to('cm');
+        height = (0, _convertUnitsLite.convert)(height).from(state.getIn(['scene', 'layers', 'layer-1', 'unit'])).to('cm');
+        var halfWidth = width / 2;
+        var halfHeight = height / 2;
+        var viewerWidth = viewer.SVGWidth;
+        var viewerHeight = viewer.SVGHeight;
+        var centerPos = {
+          x: viewerWidth / 2,
+          y: viewerHeight / 2
+        };
+        var vtLB = {
+          x: centerPos.x - halfWidth,
+          y: centerPos.y - halfHeight
+        };
+        var vtRB = {
+          x: centerPos.x + halfWidth,
+          y: centerPos.y - halfHeight
+        };
+        var vtRT = {
+          x: centerPos.x + halfWidth,
+          y: centerPos.y + halfHeight
+        };
+        var vtLT = {
+          x: centerPos.x - halfWidth,
+          y: centerPos.y + halfHeight
+        };
+        var vertices = [];
+        switch (roomShapeType) {
+          case 'rectangle':
+            vertices = [vtLB, vtLT, vtRT, vtRB];
+            break;
+          case constants.ROOM_SHAPE_TYPE.TWO_WALLS_RIGHT_BOTTOM:
+            vertices = [vtLB, vtRB, vtRT];
+            break;
+          case constants.ROOM_SHAPE_TYPE.TWO_WALLS_RIGHT_TOP:
+            vertices = [vtRB, vtRT, vtLT];
+            break;
+          case constants.ROOM_SHAPE_TYPE.TWO_WALLS_LEFT_TOP:
+            vertices = [vtRT, vtLT, vtLB];
+            break;
+          case constants.ROOM_SHAPE_TYPE.TWO_WALLS_LEFT_BOTTOM:
+            vertices = [vtLT, vtLB, vtRB];
+            break;
+          case constants.ROOM_SHAPE_TYPE.THREE_WALLS_LEFT_TOP_RIGHT:
+            vertices = [vtRB, vtRT, vtLT, vtLB];
+            break;
+          case constants.ROOM_SHAPE_TYPE.THREE_WALLS_TOP_RIGHT_BOTTOM:
+            vertices = [vtLB, vtRB, vtRT, vtLT];
+            break;
+          case constants.ROOM_SHAPE_TYPE.THREE_WALLS_RIGHT_BOTTOM_LEFT:
+            vertices = [vtLT, vtLB, vtRB, vtRT];
+            break;
+          case constants.ROOM_SHAPE_TYPE.THREE_WALLS_BOTTOM_LEFT_TOP:
+            vertices = [vtRT, vtLT, vtLB, vtRB];
+            break;
+        }
+        for (var i = 0; i < vertices.length - 1; i++) {
+          state = _export2.Line.create(state, layerID, 'wall', vertices[i].x, vertices[i].y, vertices[i + 1].x, vertices[i + 1].y).updatedState;
+        }
+        if (roomShapeType === constants.ROOM_SHAPE_TYPE.RECTANGLE) {
+          state = _export2.Line.create(state, layerID, 'wall', vertices[vertices.length - 1].x, vertices[vertices.length - 1].y, vertices[0].x, vertices[0].y).updatedState;
+        }
+        var layer = state.getIn(['scene', 'layers', layerID]);
+        var lines = layer.getIn(['lines']).toJS();
+        var drawingInfo = {};
+        var lineKey = Object.keys(lines);
+        for (var _i = 0; _i < lineKey.length; _i++) {
+          if (!(0, _helper.isEmpty)(lineKey)) {
+            drawingInfo.drawingLine = layer.getIn(['lines', lineKey[_i]]);
+          }
+          state = _export2.Layer.detectAndUpdateAreas(state, layerID, drawingInfo).updatedState;
         }
-        state = _export2.Layer.detectAndUpdateAreas(state, layerID, drawingInfo).updatedState;
       }
+
       // copy keeped measurement unit
       state = state.setIn(['scene', 'layers', layerID, 'unit'], layerUnit);
       state = state.setIn(['scene', 'layers', layerID, 'ceilHeight'], ceilHeight);

package/lib/components/viewer2d/ruler.js

@@ -39,6 +39,7 @@ function Ruler(_ref) {
     transform = _ref.transform,
     style = _ref.style;
   var distanceText = (0, _convertUnitsLite.convert)(length).from(unit).to(rulerUnit).toFixed(0);
+  distanceText = (Math.round((0, _convertUnitsLite.convert)(distanceText).from('in').to(layer.unit) * 100) / 100).toFixed(0);
   var textLength = (distanceText.length + layer.unit.length) * 9;
   return /*#__PURE__*/_react["default"].createElement("g", {
     transform: transform
@@ -59,7 +60,7 @@ function Ruler(_ref) {
     transform: "scale(1, -1)",
     style: STYLE_TEXT,
     fill: _constants.TEXT_COLOR_NEUTRAL_7
-  }, Math.round((0, _convertUnitsLite.convert)(distanceText).from('in').to(layer.unit) * 100) / 100, layer.unit === 'in' ? '"' : layer.unit)), /*#__PURE__*/_react["default"].createElement("line", {
+  }, distanceText, layer.unit === 'in' ? '"' : layer.unit)), /*#__PURE__*/_react["default"].createElement("line", {
     x1: style === _line.STYLE_ROOM_SHAPE ? 0 : 4,
     y1: "0",
     x2: (length - textLength) / 2 < 0 ? 0 : (length - textLength) / 2,

package/lib/components/viewer3d/scene-creator.js

@@ -301,7 +301,7 @@ function updateScene(planData, sceneData, oldSceneData, diffArray, actions, cata
      * Every 'doorStyle' change has a 'door_style_id' change.
      * So, if door_style_id changes, it indicates 'doorStyle' change.
      */
-    if (['id'].includes(path[path.length - 1])) isSettingDoorStyle = true;
+    if (path[1] === 'layers' && path[3] === 'molding' || path[path.length - 2] === 'doorStyle' && path[path.length - 1] === 'id' || ['id'].includes(path[path.length - 1])) isSettingDoorStyle = true;
 
     // If there are any molding change of layer
     if (path[1] === 'layers' && path[3] === 'molding') isUpdateMolding = true;
@@ -986,9 +986,9 @@ function getLineDistance(obj, layer, isCalcWall, index) {
         obj.geometry.attributes.position.needsUpdate = true;
         obj.geometry.computeBoundingSphere();
         obj.geometry.computeBoundingBox();
-        var dist = (0, _math.formatNumber)((0, _convertUnitsLite.convert)(intersects[i].distance).from('cm').to('in'), _constants.DECIMAL_PLACES_2);
+        var dist = (0, _convertUnitsLite.convert)(intersects[i].distance).from('cm').to('in');
         if (dist > 3) {
-          var _canvas = getTextCanvas(dist);
+          var _canvas = getDistanceCanvas(dist, layer);
           var wid = _canvas.width / window.innerWidth * 30;
           var hei = _canvas.height / window.innerHeight * 30;
           var texture = new Three.Texture(_canvas);
@@ -1110,7 +1110,7 @@ function getLineDistance(obj, layer, isCalcWall, index) {
       obj.geometry.attributes.position.needsUpdate = true;
       var _dist = (0, _math.formatNumber)(distance, _constants.DECIMAL_PLACES_2);
       if (_dist > 3) {
-        var _canvas2 = getTextCanvas(_dist);
+        var _canvas2 = getDistanceCanvas(_dist, layer);
         var _wid = _canvas2.width / window.innerWidth * 30;
         var _hei = _canvas2.height / window.innerHeight * 30;
         var _texture = new Three.Texture(_canvas2);
@@ -1238,12 +1238,17 @@ function getIntersectPoint(opX, opY, pX, pY) {
 function gcd(a, b) {
   return a % b ? gcd(b, a % b) : b;
 }
-function getTextCanvas(text) {
-  var parameters = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+function getDistanceCanvas(distance, layer) {
+  var _layer$unit;
+  var parameters = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
   var canvas = document.createElement('canvas');
   var ctx = canvas.getContext('2d');
+  var curUnit = (_layer$unit = layer === null || layer === void 0 ? void 0 : layer.unit) !== null && _layer$unit !== void 0 ? _layer$unit : 'in';
+  var distText = String((Math.round((0, _convertUnitsLite.convert)(distance).from('in').to(curUnit) * 100) / 100).toFixed(0));
   var fontSize = 16;
-  var integral = String(text) + "''";
+  var integral = distText + curUnit;
+  // let integral = String(distance) + "''";
+
   parameters.fontName = parameters.fontName || _constants.ARROW_TEXT_FONTFACE;
 
   // Prepare the font to be able to measure

package/lib/components/viewer3d/viewer3d.js

@@ -238,6 +238,7 @@ var Scene3DViewer = exports["default"] = /*#__PURE__*/function (_React$Component
           });
           self.renderer.domElement.style.display = 'block';
         }, 1500);
+        self.planData = planData;
       });
       var area = scene.getIn(['layers', scene.selectedLayer, 'areas']);
       var layer = scene.getIn(['layers', scene.selectedLayer]);