kitchen-simulator 4.4.0 → 4.4.2-dynamic-holes

package/es/LiteRenderer.js

@@ -1,19 +1,13 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-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", "configData", "externalEvent", "onInternalEvent", "onError"];
-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; }
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+var _excluded = ["width", "height", "configData", "externalEvent", "onInternalEvent", "onError", "holes"];
 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 = _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; })(); }
+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; }
 // LiteRenderer.jsx
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import PropTypes from 'prop-types';
@@ -79,48 +73,147 @@ function serializeError(err) {
     };
   }
 }
-
-/* ---------- Error Boundary that pushes into buffer ---------- */
-var ToolErrorBoundary = /*#__PURE__*/function (_React$Component) {
-  function ToolErrorBoundary() {
-    _classCallCheck(this, ToolErrorBoundary);
-    return _callSuper(this, ToolErrorBoundary, arguments);
+var INCH_TO_CM = 2.54;
+var normalizeKey = function normalizeKey(value) {
+  return (value !== null && value !== void 0 ? value : '').toString().toLowerCase().replace(/[^a-z0-9]+/g, '');
+};
+var safeParseJson = function safeParseJson(value) {
+  if (!value) return null;
+  try {
+    return JSON.parse(value);
+  } catch (_unused3) {
+    return null;
   }
-  _inherits(ToolErrorBoundary, _React$Component);
-  return _createClass(ToolErrorBoundary, [{
-    key: "componentDidCatch",
-    value: function componentDidCatch(error, info) {
-      var pushError = this.props.pushError;
-      pushError({
-        type: 'render-error',
-        error: serializeError(error),
-        info: {
-          componentStack: info === null || info === void 0 ? void 0 : info.componentStack
-        }
-      });
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      return this.props.children;
+};
+var toCatalogLength = function toCatalogLength(value, prop) {
+  var _prop$defaultValue;
+  if (value == null) return null;
+  var unit = prop === null || prop === void 0 || (_prop$defaultValue = prop.defaultValue) === null || _prop$defaultValue === void 0 ? void 0 : _prop$defaultValue.unit;
+  if (unit && unit.toLowerCase() === 'in') return value;
+  return value * INCH_TO_CM;
+};
+var overrideLengthProperty = function overrideLengthProperty(prop, value) {
+  if (!prop || value == null) return prop;
+  var length = toCatalogLength(value, prop);
+  if (length == null) return prop;
+  return _objectSpread(_objectSpread({}, prop), {}, {
+    defaultValue: _objectSpread(_objectSpread({}, prop.defaultValue), {}, {
+      length: length
+    })
+  });
+};
+var findBaseHoleTemplate = function findBaseHoleTemplate(hole, templates) {
+  var target = normalizeKey(hole === null || hole === void 0 ? void 0 : hole.name);
+  if (!target) return null;
+  return templates.find(function (template) {
+    var _template$info, _template$info2;
+    var candidates = [template === null || template === void 0 ? void 0 : template.name, template === null || template === void 0 || (_template$info = template.info) === null || _template$info === void 0 ? void 0 : _template$info.title, template === null || template === void 0 || (_template$info2 = template.info) === null || _template$info2 === void 0 ? void 0 : _template$info2.description].map(normalizeKey);
+    return candidates.includes(target);
+  }) || null;
+};
+var buildHoleElementFromTemplate = function buildHoleElementFromTemplate(hole, base) {
+  var _base$info, _base$info2, _base$info3, _base$info4, _base$info5, _base$structure_json;
+  if (!hole || !base) return null;
+  var nextInfo = _objectSpread(_objectSpread({}, base.info), {}, {
+    title: hole.name || ((_base$info = base.info) === null || _base$info === void 0 ? void 0 : _base$info.title),
+    description: ((_base$info2 = base.info) === null || _base$info2 === void 0 ? void 0 : _base$info2.description) || hole.name || ((_base$info3 = base.info) === null || _base$info3 === void 0 ? void 0 : _base$info3.title),
+    image: hole.menu_thumbnail || ((_base$info4 = base.info) === null || _base$info4 === void 0 ? void 0 : _base$info4.image),
+    url: hole.gltf || ((_base$info5 = base.info) === null || _base$info5 === void 0 ? void 0 : _base$info5.url)
+  });
+  var nextProperties = _objectSpread({}, base.properties);
+  if (nextProperties.width) {
+    nextProperties.width = overrideLengthProperty(nextProperties.width, hole.width);
+  }
+  if (nextProperties.height) {
+    nextProperties.height = overrideLengthProperty(nextProperties.height, hole.height);
+  }
+  if (nextProperties.length) {
+    nextProperties.length = overrideLengthProperty(nextProperties.length, hole.length);
+  }
+  var customConfig = safeParseJson(hole.custom_config);
+  var customProps = (customConfig === null || customConfig === void 0 ? void 0 : customConfig.properties) || {};
+  Object.keys(customProps).forEach(function (key) {
+    if (!nextProperties[key]) return;
+    nextProperties[key] = overrideLengthProperty(nextProperties[key], customProps[key]);
+  });
+  return _objectSpread(_objectSpread({}, base), {}, {
+    name: hole.name || base.name,
+    info: nextInfo,
+    properties: nextProperties,
+    structure_json: _objectSpread(_objectSpread({}, base.structure_json || {}), {}, {
+      hole_id: hole.id || ((_base$structure_json = base.structure_json) === null || _base$structure_json === void 0 ? void 0 : _base$structure_json.hole_id)
+    })
+  });
+};
+var buildHoleElements = function buildHoleElements(holes) {
+  var categories = {
+    Doors: [],
+    Windows: []
+  };
+  var elements = [];
+  if (!Array.isArray(holes)) return {
+    elements: elements,
+    categories: categories
+  };
+  var templates = Object.values(Holes);
+  var usedNames = new Set();
+  holes.forEach(function (hole) {
+    var _base$info6;
+    if (!hole || hole.is_deleted) return;
+    var base = findBaseHoleTemplate(hole, templates);
+    if (!base) return;
+    var element = buildHoleElementFromTemplate(hole, base);
+    if (!element || !element.name || usedNames.has(element.name)) return;
+    usedNames.add(element.name);
+    elements.push(element);
+    var typeKey = normalizeKey(hole.type);
+    if (typeKey === 'window') {
+      categories.Windows.push(element);
+    } else if (typeKey === 'door') {
+      categories.Doors.push(element);
+    } else if ((_base$info6 = base.info) !== null && _base$info6 !== void 0 && (_base$info6 = _base$info6.tag) !== null && _base$info6 !== void 0 && _base$info6.includes('window')) {
+      categories.Windows.push(element);
+    } else {
+      categories.Doors.push(element);
     }
-  }]);
-}(React.Component);
-ToolErrorBoundary.propTypes = {
-  pushError: PropTypes.func.isRequired,
-  children: PropTypes.any
+  });
+  return {
+    elements: elements,
+    categories: categories
+  };
 };
 
 // ----------------- catalog init -----------------
-function initCatalogOnce(catalog) {
+function initCatalogOnce(catalog, holePayload) {
   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;
+  if (!catalog.__ksInitialized) {
+    for (var x in Areas) catalog.registerElement(Areas[x]);
+    for (var _x in Lines) catalog.registerElement(Lines[_x]);
+    catalog.__ksInitialized = true;
+  }
+  var holeElements = (holePayload === null || holePayload === void 0 ? void 0 : holePayload.elements) || [];
+  holeElements.forEach(function (element) {
+    if (!catalog.hasElement(element.name)) {
+      console.log(element);
+      catalog.registerElement(element);
+    }
+  });
+  var categories = (holePayload === null || holePayload === void 0 ? void 0 : holePayload.categories) || {};
+  Object.entries(categories).forEach(function (_ref) {
+    var _ref2 = _slicedToArray(_ref, 2),
+      name = _ref2[0],
+      elements = _ref2[1];
+    if (!elements.length) return;
+    if (!catalog.hasCategory(name)) {
+      catalog.registerCategory(name, name, elements);
+      return;
+    }
+    elements.forEach(function (element) {
+      if (!catalog.categoryHasElement(name, element.name)) {
+        catalog.addToCategory(name, element);
+      }
+    });
+  });
 }
 
 // ----------------- store factory -----------------
@@ -164,7 +257,11 @@ export default function LiteRenderer(props) {
     externalEvent = props.externalEvent,
     onInternalEvent = props.onInternalEvent,
     onError = props.onError,
+    holes = props.holes,
     passThrough = _objectWithoutProperties(props, _excluded);
+  var holePayload = useMemo(function () {
+    return buildHoleElements(holes);
+  }, [holes]);
 
   // ✅ instance-scoped store (no module singleton)
   var storeRef = useRef(null);
@@ -174,8 +271,8 @@ export default function LiteRenderer(props) {
   var catalogRef = useRef(null);
   if (!catalogRef.current) {
     catalogRef.current = new Catalog();
-    initCatalogOnce(catalogRef.current);
   }
+  initCatalogOnce(catalogRef.current, holePayload);
 
   // ✅ stable plugins array
   var plugins = useMemo(function () {
@@ -198,7 +295,7 @@ export default function LiteRenderer(props) {
         try {
           var maybeCleanup = p === null || p === void 0 ? void 0 : p(store, stateExtractor);
           if (typeof maybeCleanup === 'function') cleanups.push(maybeCleanup);
-        } catch (_unused4) {
+        } catch (_unused5) {
           // keep prior behavior: do not crash
         }
       }
@@ -216,7 +313,7 @@ export default function LiteRenderer(props) {
           var fn = _step2.value;
           try {
             fn();
-          } catch (_unused3) {}
+          } catch (_unused4) {}
         }
       } catch (err) {
         _iterator2.e(err);
@@ -247,7 +344,7 @@ export default function LiteRenderer(props) {
     };
     try {
       onError === null || onError === void 0 || onError(payload);
-    } catch (_unused5) {}
+    } catch (_unused6) {}
     // eslint-disable-next-line no-console
     console.debug('[LiteRenderer:onError]', payload);
     lastEmittedRef.current = payload;
@@ -308,13 +405,11 @@ export default function LiteRenderer(props) {
       emit(lastExternalEventRef.current, last.errors);
     }
   }, [externalEvent, emit]);
-  var _ref = configData || {},
-    logoImg = _ref.logoImg,
-    companyUrl = _ref.companyUrl;
+  var _ref3 = configData || {},
+    logoImg = _ref3.logoImg,
+    companyUrl = _ref3.companyUrl;
   return /*#__PURE__*/React.createElement(AppContext.Provider, null, /*#__PURE__*/React.createElement(Provider, {
     store: storeRef.current
-  }, /*#__PURE__*/React.createElement(ToolErrorBoundary, {
-    pushError: pushError
   }, /*#__PURE__*/React.createElement(LiteKitchenConfigurator, _extends({
     catalog: catalogRef.current,
     width: width,
@@ -328,7 +423,7 @@ export default function LiteRenderer(props) {
     configData: configData,
     externalEvent: externalEvent,
     onInternalEvent: onInternalEvent
-  }, passThrough)))));
+  }, passThrough))));
 }
 LiteRenderer.propTypes = {
   width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
@@ -348,5 +443,6 @@ LiteRenderer.propTypes = {
   externalEvent: PropTypes.object,
   onInternalEvent: PropTypes.func,
   onError: PropTypes.func,
+  holes: PropTypes.array,
   store: PropTypes.object
 };

package/es/components/viewer2d/viewer2d.js

@@ -1410,10 +1410,9 @@ export default function Viewer2D(_ref, _ref2) {
     detectAutoPan: mode2DetectAutopan(mode),
     onMouseDown: onMouseDown,
     onMouseMove: onMouseMove,
-    onMouseUp: onMouseUp
-    // miniaturePosition="none"
-    // toolbarPosition="none"
-    ,
+    onMouseUp: onMouseUp,
+    miniaturePosition: "none",
+    toolbarPosition: "none",
     detectPinchGesture: false,
     disableDoubleClickZoomWithToolAuto: true,
     ref: Viewer

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

@@ -9,7 +9,7 @@ import { disposeObject } from "./three-memory-cleaner";
 import { ANIMATE_STEP_MAX, ANIMATE_STEP_MIN, ARRAY_3D_MODES, ARROW_TEXT_BACKCOLOR, ARROW_TEXT_FONTFACE, ARROW_TEXT_FORECOLOR, BASE_CABINET_LAYOUTPOS, BOTTOM_MOLDING_LOCATION, DECIMAL_PLACES_2, DIFFERENT_VALUES_PATH_LENGTH, DISTANCE_EPSILON, EPSILON, MIDDLE_MOLDING_LOCATION, MODE_DRAGGING_ITEM_3D, MODE_DRAWING_ITEM_3D, MODE_IDLE, MODE_IDLE_3D, MODE_ROTATING_ITEM_3D, OBJTYPE_MESH, SHADE_DARK_PURPLE_COLOR, TOP_MOLDING_LOCATION, UNIT_CENTIMETER, UNIT_FOOT, UNIT_INCH, UNIT_METER, WALL_CABINET_LAYOUTPOS } from "../../constants";
 import { GeometryUtils, IDBroker, MoldingUtils } from "../../utils/export";
 import { convert } from "../../utils/convert-units-lite";
-import { calcDistancesFromItemToWalls, getSnappedWallLines, verticesDistance } from "../../utils/geometry";
+import { calcDistancesFromItemToWalls, getLineSnapPointsOfItem, getSnappedWallLines, isOverlappedTwoItemsOnOneLine, pointsDistance, verticesDistance } from "../../utils/geometry";
 import * as GeomUtils from "../../catalog/utils/geom-utils";
 import { loadTexture } from "../../catalog/utils/item-loader";
 import { returnReplaceableDeepSearchType } from "../viewer2d/utils";
@@ -3035,13 +3035,23 @@ export function createBacksplash(item, layer, planData, scene) {
    */
   var altItems = [],
     flag = false;
+  var D0 = {},
+    D1 = {};
   wallItems.map(function (wallItem) {
     var _wallItem$itemInfo, _wallItem$itemInfo2;
     var altitude = (_wallItem$itemInfo = wallItem.itemInfo) === null || _wallItem$itemInfo === void 0 || (_wallItem$itemInfo = _wallItem$itemInfo.properties) === null || _wallItem$itemInfo === void 0 ? void 0 : _wallItem$itemInfo.get('altitude').get('_length');
     var altitudeUnit = ((_wallItem$itemInfo2 = wallItem.itemInfo) === null || _wallItem$itemInfo2 === void 0 || (_wallItem$itemInfo2 = _wallItem$itemInfo2.properties) === null || _wallItem$itemInfo2 === void 0 ? void 0 : _wallItem$itemInfo2.get('altitude').get('_unit')) || 'cm';
     if (!isEmpty(altitude) && !isEmpty(altitudeUnit)) {
       altitude = convert(altitude).from(altitudeUnit).to('cm');
+      var altPoints = getLineSnapPointsOfItem(layer, curLine, wallItem);
+      if (altPoints.length > 1) {
+        D0 = altPoints[0];
+        D1 = altPoints[1];
+      }
       altItems.push({
+        D0: D0,
+        // D0, D1: item's snapped points with line
+        D1: D1,
         x: wallItem.pos.x,
         width: wallItem.size.width,
         altitude: altitude
@@ -3049,10 +3059,29 @@ export function createBacksplash(item, layer, planData, scene) {
     }
   });
   layer.holes.map(function (hole) {
-    var _hole$properties, _hole$properties2;
+    var _hole$properties, _hole$properties2, _layer$lines, _layer$vertices, _line$vertices, _layer$vertices2, _line$vertices2;
     var width = (_hole$properties = hole.properties) === null || _hole$properties === void 0 ? void 0 : _hole$properties.getIn(['width', 'length']);
     var altitude = (_hole$properties2 = hole.properties) === null || _hole$properties2 === void 0 ? void 0 : _hole$properties2.getIn(['altitude', 'length']);
+    var line = (_layer$lines = layer.lines) === null || _layer$lines === void 0 ? void 0 : _layer$lines.get(curLine === null || curLine === void 0 ? void 0 : curLine.id);
+    var v0 = (_layer$vertices = layer.vertices) === null || _layer$vertices === void 0 ? void 0 : _layer$vertices.get(line === null || line === void 0 || (_line$vertices = line.vertices) === null || _line$vertices === void 0 ? void 0 : _line$vertices.get(0));
+    var v1 = (_layer$vertices2 = layer.vertices) === null || _layer$vertices2 === void 0 ? void 0 : _layer$vertices2.get(line === null || line === void 0 || (_line$vertices2 = line.vertices) === null || _line$vertices2 === void 0 ? void 0 : _line$vertices2.get(1));
+    if (!isEmpty(v0) || !isEmpty(v1)) {
+      var lineLength = pointsDistance(v0.x, v0.y, v1.x, v1.y);
+      var disD0 = lineLength * hole.offset - width / 2;
+      var disD1 = lineLength * hole.offset + width / 2;
+      D0 = {
+        x: v0.x + disD0 * Math.cos(hole.rotRad),
+        y: v0.y + disD0 * Math.sin(hole.rotRad)
+      };
+      D1 = {
+        x: v0.x + disD1 * Math.cos(hole.rotRad),
+        y: v0.y + disD1 * Math.sin(hole.rotRad)
+      };
+    }
     if (!isEmpty(width) && !isEmpty(altitude) && hole.line === (curLine === null || curLine === void 0 ? void 0 : curLine.id)) altItems.push({
+      D0: D0,
+      // D0, D1: hole's two points
+      D1: D1,
       x: hole.x,
       width: width,
       altitude: altitude
@@ -3061,7 +3090,7 @@ export function createBacksplash(item, layer, planData, scene) {
   if (altItems.length > 0) {
     depth = altItems[0].altitude;
     altItems.map(function (altItem) {
-      if (item.pos.x + item.size.width / 2 >= altItem.x - altItem.width / 2 && item.pos.x - item.size.width / 2 <= altItem.x + altItem.width / 2) {
+      if (isOverlappedTwoItemsOnOneLine(layer, curLine, item, altItem)) {
         if (depth >= altItem.altitude) {
           depth = altItem.altitude;
           flag = true;
@@ -3171,9 +3200,9 @@ export function createBacksplash(item, layer, planData, scene) {
   }
   itemToSave.info.id = item.itemInfo.id;
   deleteSpecifiedMeshObjects('backsplash' + item.itemInfo.id);
-  if (Math.abs(item.rotRad % (Math.PI / 2)) < EPSILON) planData.plan.add(backsplash);
+  if (Math.abs(item.rotRad % (Math.PI / 2)) < EPSILON || Math.abs(item.rotRad % (Math.PI / 2) - Math.PI / 2) < EPSILON) planData.plan.add(backsplash);
   backsplash.name = name;
-  backsplash.visible = item.itemInfo.get('backsplashVisible') && backsplashApplied && Math.abs(item.rotRad % (Math.PI / 2)) < EPSILON;
+  backsplash.visible = item.itemInfo.get('backsplashVisible') && backsplashApplied && Math.abs(item.rotRad % (Math.PI / 2)) < EPSILON || Math.abs(item.rotRad % (Math.PI / 2) - Math.PI / 2) < EPSILON;
 
   // Save to scene graph
 

package/es/constants.js

@@ -657,16 +657,16 @@ export var PROJECT_SETTING_OPTION = {
   CHANGE_MEASUREMENT_UNIT: CHANGE_MEASUREMENT_UNIT
 };
 export var HOLE_NAMES = {
-  WINDOW_CLEAR: 'Window',
-  WINDOW_CROSS: 'Cross Window',
-  WINDOW_DOUBLE_HUNG: 'Double Hung Window',
-  WINDOW_VERTICAL: 'window-vertical',
+  WINDOW_CLEAR: 'Clear',
+  WINDOW_CROSS: 'Cross',
+  WINDOW_DOUBLE_HUNG: 'Double Hung',
+  WINDOW_VERTICAL: 'Vertical',
   DOOR_CLOSET: 'Closet',
   DOOR_EXTERIOR: 'Exterior',
   DOOR_INTERIOR: 'Interior',
   DOOR_SLIDING: 'Sliding',
   DOOR_FRAMED: 'Framed Doorway',
-  DOOR_FRAMELESS: 'FrameLess Doorway'
+  DOOR_FRAMELESS: 'Frameless Doorway'
 };
 
 // direction type

package/es/devLiteRenderer.js

@@ -17,6 +17,7 @@ import furnishingPayload from "./mocks/furnishingPayload.json";
 import rectangleData from "./mocks/rectangleShape.json";
 import moldingPayload from "./mocks/moldingPayload.json";
 import replaceCabinetPayload from "./mocks/replaceCabinetPayload.json";
+import holesPayload from "./mocks/holesPayload.json";
 import ReactDOM from 'react-dom';
 import LiteRenderer from "./LiteRenderer";
 import { Button } from 'antd';
@@ -860,6 +861,7 @@ function WorkSpace(props) {
     logoImg: "/assets/logo.png",
     companyUrl: "https://example.com",
     toolbarButtons: [],
+    holes: holesPayload,
     externalEvent: externalEvent,
     onInternalEvent: onInternalEvent,
     onError: function onError(payload) {

package/es/utils/geometry.js

@@ -2845,4 +2845,83 @@ export function getSnappedWallLines(item, layer, catalog) {
     }
   }
   return snappedWallLines;
+}
+export function getLineSnapPointsOfItem(layer, curLine, item) {
+  var _layer$lines2, _layer$vertices4, _line$vertices3, _layer$vertices5, _line$vertices4;
+  //       V0
+  //       /|
+  //    D0 /|-----------|
+  //       /|           |
+  //       /|    Item   |    ====>   get D0, D1
+  //       /|           |
+  //    D1 /|-----------|
+  //       /|
+  // get v0, v1 of line
+  var line = (_layer$lines2 = layer.lines) === null || _layer$lines2 === void 0 ? void 0 : _layer$lines2.get(curLine === null || curLine === void 0 ? void 0 : curLine.id);
+  var v0 = (_layer$vertices4 = layer.vertices) === null || _layer$vertices4 === void 0 ? void 0 : _layer$vertices4.get(line === null || line === void 0 || (_line$vertices3 = line.vertices) === null || _line$vertices3 === void 0 ? void 0 : _line$vertices3.get(0));
+  var v1 = (_layer$vertices5 = layer.vertices) === null || _layer$vertices5 === void 0 ? void 0 : _layer$vertices5.get(line === null || line === void 0 || (_line$vertices4 = line.vertices) === null || _line$vertices4 === void 0 ? void 0 : _line$vertices4.get(1));
+  var pointGroup = [];
+  if (isEmpty(v0) || isEmpty(v1)) return pointGroup;
+  var itemRect = item === null || item === void 0 ? void 0 : item.rect;
+  if (!isEmpty(itemRect)) {
+    for (var i = 0; i < itemRect.length; i++) {
+      if (distancePointFromLineSegment(v0, v1, itemRect[i].x, itemRect[i].y) < EPSILON) {
+        pointGroup.push(itemRect[i]);
+      }
+    }
+  }
+  return pointGroup;
+}
+export function isOverlappedTwoItemsOnOneLine(layer, curLine, srcItem, desItem) {
+  var _layer$lines3, _layer$vertices6, _line$vertices5, _layer$vertices7, _line$vertices6, _S, _S2, _S3, _S4;
+  if (isEmpty(layer) || isEmpty(curLine) || isEmpty(srcItem) || isEmpty(desItem) || isEmpty(desItem.D0) || isEmpty(desItem.D1)) return false;
+  // get v0, v1 of line
+  var line = (_layer$lines3 = layer.lines) === null || _layer$lines3 === void 0 ? void 0 : _layer$lines3.get(curLine === null || curLine === void 0 ? void 0 : curLine.id);
+  var v0 = (_layer$vertices6 = layer.vertices) === null || _layer$vertices6 === void 0 ? void 0 : _layer$vertices6.get(line === null || line === void 0 || (_line$vertices5 = line.vertices) === null || _line$vertices5 === void 0 ? void 0 : _line$vertices5.get(0));
+  var v1 = (_layer$vertices7 = layer.vertices) === null || _layer$vertices7 === void 0 ? void 0 : _layer$vertices7.get(line === null || line === void 0 || (_line$vertices6 = line.vertices) === null || _line$vertices6 === void 0 ? void 0 : _line$vertices6.get(1));
+  var S0,
+    S1,
+    D0 = desItem === null || desItem === void 0 ? void 0 : desItem.D0,
+    D1 = desItem === null || desItem === void 0 ? void 0 : desItem.D1;
+  if (isEmpty(v0) || isEmpty(v1)) return false;
+  // get distance from v0 to srcItem's S0, S1 and desItem(item or hole)'s D0, D1 are placed on line
+  var srcPoints = getLineSnapPointsOfItem(layer, curLine, srcItem);
+  if (srcPoints.length > 1) {
+    S0 = srcPoints[0];
+    S1 = srcPoints[1];
+  }
+  var disV0S0 = pointsDistance(v0.x, v0.y, (_S = S0) === null || _S === void 0 ? void 0 : _S.x, (_S2 = S0) === null || _S2 === void 0 ? void 0 : _S2.y);
+  var disV0S1 = pointsDistance(v0.x, v0.y, (_S3 = S1) === null || _S3 === void 0 ? void 0 : _S3.x, (_S4 = S1) === null || _S4 === void 0 ? void 0 : _S4.y);
+  var disV0D0 = pointsDistance(v0.x, v0.y, D0.x, D0.y);
+  var disV0D1 = pointsDistance(v0.x, v0.y, D1.x, D1.y);
+  // detect two items are overlapped
+  var maxDisV0S = Math.max(disV0S0, disV0S1);
+  var minDisV0S = Math.min(disV0S0, disV0S1);
+  var maxDisV0D = Math.max(disV0D0, disV0D1);
+  var minDisV0D = Math.min(disV0D0, disV0D1);
+  if (maxDisV0S > maxDisV0D && maxDisV0D - minDisV0S > EPSILON) {
+    //      d0     s0 d1  s1   ===>  maxDisV0S: v0s1, minDisV0S: v0s0, maxDisV0D: v0d1, minDisV0D: v0d0
+    //  v0 __________________________ v1
+    //      |      |  |   |
+    //      |      |  |   |
+    //      |__DI__|__|   |
+    //             |__SI__|
+    /////////////////////////////////////////
+    //      s0     d0     d1   s1  ===>  maxDisV0S: v0s1, minDisV0S: v0s0, maxDisV0D: v0d1, minDisV0D: v0d0
+    //  v0 __________________________ v1
+    //      |      |      |    |
+    //      |      |__DI__|    |
+    //      |_________SI_______|
+    return true;
+  } else if (minDisV0S < minDisV0D && maxDisV0S - minDisV0D > EPSILON) {
+    //      s0     d0 s1  d1   ===>  maxDisV0S: v0s1, minDisV0S: v0s0, maxDisV0D: v0d1, minDisV0D: v0d0
+    //  v0 __________________________ v1
+    //      |      |  |   |
+    //      |      |__DI__|
+    //      |__SI_____|
+    //
+    return true;
+  } else {
+    return false;
+  }
 }

package/lib/LiteRenderer.js

@@ -7,13 +7,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = LiteRenderer;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactRedux = require("react-redux");
@@ -31,15 +27,13 @@ var Lines = _interopRequireWildcard(require("./catalog/lines/wall/planner-elemen
 var Holes = _interopRequireWildcard(require("./catalog/holes/export"));
 var _export2 = require("./plugins/export");
 var _LiteKitchenConfigurator = _interopRequireDefault(require("./LiteKitchenConfigurator"));
-var _excluded = ["width", "height", "configData", "externalEvent", "onInternalEvent", "onError"];
+var _excluded = ["width", "height", "configData", "externalEvent", "onInternalEvent", "onError", "holes"];
 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; })(); } // LiteRenderer.jsx
+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; } // LiteRenderer.jsx
 var isBrowser = typeof window !== 'undefined';
 if (isBrowser) window.THREE = THREE;
 
@@ -87,48 +81,147 @@ function serializeError(err) {
     };
   }
 }
-
-/* ---------- Error Boundary that pushes into buffer ---------- */
-var ToolErrorBoundary = /*#__PURE__*/function (_React$Component) {
-  function ToolErrorBoundary() {
-    (0, _classCallCheck2["default"])(this, ToolErrorBoundary);
-    return _callSuper(this, ToolErrorBoundary, arguments);
+var INCH_TO_CM = 2.54;
+var normalizeKey = function normalizeKey(value) {
+  return (value !== null && value !== void 0 ? value : '').toString().toLowerCase().replace(/[^a-z0-9]+/g, '');
+};
+var safeParseJson = function safeParseJson(value) {
+  if (!value) return null;
+  try {
+    return JSON.parse(value);
+  } catch (_unused3) {
+    return null;
   }
-  (0, _inherits2["default"])(ToolErrorBoundary, _React$Component);
-  return (0, _createClass2["default"])(ToolErrorBoundary, [{
-    key: "componentDidCatch",
-    value: function componentDidCatch(error, info) {
-      var pushError = this.props.pushError;
-      pushError({
-        type: 'render-error',
-        error: serializeError(error),
-        info: {
-          componentStack: info === null || info === void 0 ? void 0 : info.componentStack
-        }
-      });
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      return this.props.children;
+};
+var toCatalogLength = function toCatalogLength(value, prop) {
+  var _prop$defaultValue;
+  if (value == null) return null;
+  var unit = prop === null || prop === void 0 || (_prop$defaultValue = prop.defaultValue) === null || _prop$defaultValue === void 0 ? void 0 : _prop$defaultValue.unit;
+  if (unit && unit.toLowerCase() === 'in') return value;
+  return value * INCH_TO_CM;
+};
+var overrideLengthProperty = function overrideLengthProperty(prop, value) {
+  if (!prop || value == null) return prop;
+  var length = toCatalogLength(value, prop);
+  if (length == null) return prop;
+  return _objectSpread(_objectSpread({}, prop), {}, {
+    defaultValue: _objectSpread(_objectSpread({}, prop.defaultValue), {}, {
+      length: length
+    })
+  });
+};
+var findBaseHoleTemplate = function findBaseHoleTemplate(hole, templates) {
+  var target = normalizeKey(hole === null || hole === void 0 ? void 0 : hole.name);
+  if (!target) return null;
+  return templates.find(function (template) {
+    var _template$info, _template$info2;
+    var candidates = [template === null || template === void 0 ? void 0 : template.name, template === null || template === void 0 || (_template$info = template.info) === null || _template$info === void 0 ? void 0 : _template$info.title, template === null || template === void 0 || (_template$info2 = template.info) === null || _template$info2 === void 0 ? void 0 : _template$info2.description].map(normalizeKey);
+    return candidates.includes(target);
+  }) || null;
+};
+var buildHoleElementFromTemplate = function buildHoleElementFromTemplate(hole, base) {
+  var _base$info, _base$info2, _base$info3, _base$info4, _base$info5, _base$structure_json;
+  if (!hole || !base) return null;
+  var nextInfo = _objectSpread(_objectSpread({}, base.info), {}, {
+    title: hole.name || ((_base$info = base.info) === null || _base$info === void 0 ? void 0 : _base$info.title),
+    description: ((_base$info2 = base.info) === null || _base$info2 === void 0 ? void 0 : _base$info2.description) || hole.name || ((_base$info3 = base.info) === null || _base$info3 === void 0 ? void 0 : _base$info3.title),
+    image: hole.menu_thumbnail || ((_base$info4 = base.info) === null || _base$info4 === void 0 ? void 0 : _base$info4.image),
+    url: hole.gltf || ((_base$info5 = base.info) === null || _base$info5 === void 0 ? void 0 : _base$info5.url)
+  });
+  var nextProperties = _objectSpread({}, base.properties);
+  if (nextProperties.width) {
+    nextProperties.width = overrideLengthProperty(nextProperties.width, hole.width);
+  }
+  if (nextProperties.height) {
+    nextProperties.height = overrideLengthProperty(nextProperties.height, hole.height);
+  }
+  if (nextProperties.length) {
+    nextProperties.length = overrideLengthProperty(nextProperties.length, hole.length);
+  }
+  var customConfig = safeParseJson(hole.custom_config);
+  var customProps = (customConfig === null || customConfig === void 0 ? void 0 : customConfig.properties) || {};
+  Object.keys(customProps).forEach(function (key) {
+    if (!nextProperties[key]) return;
+    nextProperties[key] = overrideLengthProperty(nextProperties[key], customProps[key]);
+  });
+  return _objectSpread(_objectSpread({}, base), {}, {
+    name: hole.name || base.name,
+    info: nextInfo,
+    properties: nextProperties,
+    structure_json: _objectSpread(_objectSpread({}, base.structure_json || {}), {}, {
+      hole_id: hole.id || ((_base$structure_json = base.structure_json) === null || _base$structure_json === void 0 ? void 0 : _base$structure_json.hole_id)
+    })
+  });
+};
+var buildHoleElements = function buildHoleElements(holes) {
+  var categories = {
+    Doors: [],
+    Windows: []
+  };
+  var elements = [];
+  if (!Array.isArray(holes)) return {
+    elements: elements,
+    categories: categories
+  };
+  var templates = Object.values(Holes);
+  var usedNames = new Set();
+  holes.forEach(function (hole) {
+    var _base$info6;
+    if (!hole || hole.is_deleted) return;
+    var base = findBaseHoleTemplate(hole, templates);
+    if (!base) return;
+    var element = buildHoleElementFromTemplate(hole, base);
+    if (!element || !element.name || usedNames.has(element.name)) return;
+    usedNames.add(element.name);
+    elements.push(element);
+    var typeKey = normalizeKey(hole.type);
+    if (typeKey === 'window') {
+      categories.Windows.push(element);
+    } else if (typeKey === 'door') {
+      categories.Doors.push(element);
+    } else if ((_base$info6 = base.info) !== null && _base$info6 !== void 0 && (_base$info6 = _base$info6.tag) !== null && _base$info6 !== void 0 && _base$info6.includes('window')) {
+      categories.Windows.push(element);
+    } else {
+      categories.Doors.push(element);
     }
-  }]);
-}(_react["default"].Component);
-ToolErrorBoundary.propTypes = {
-  pushError: _propTypes["default"].func.isRequired,
-  children: _propTypes["default"].any
+  });
+  return {
+    elements: elements,
+    categories: categories
+  };
 };
 
 // ----------------- catalog init -----------------
-function initCatalogOnce(catalog) {
+function initCatalogOnce(catalog, holePayload) {
   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;
+  if (!catalog.__ksInitialized) {
+    for (var x in Areas) catalog.registerElement(Areas[x]);
+    for (var _x in Lines) catalog.registerElement(Lines[_x]);
+    catalog.__ksInitialized = true;
+  }
+  var holeElements = (holePayload === null || holePayload === void 0 ? void 0 : holePayload.elements) || [];
+  holeElements.forEach(function (element) {
+    if (!catalog.hasElement(element.name)) {
+      console.log(element);
+      catalog.registerElement(element);
+    }
+  });
+  var categories = (holePayload === null || holePayload === void 0 ? void 0 : holePayload.categories) || {};
+  Object.entries(categories).forEach(function (_ref) {
+    var _ref2 = (0, _slicedToArray2["default"])(_ref, 2),
+      name = _ref2[0],
+      elements = _ref2[1];
+    if (!elements.length) return;
+    if (!catalog.hasCategory(name)) {
+      catalog.registerCategory(name, name, elements);
+      return;
+    }
+    elements.forEach(function (element) {
+      if (!catalog.categoryHasElement(name, element.name)) {
+        catalog.addToCategory(name, element);
+      }
+    });
+  });
 }
 
 // ----------------- store factory -----------------
@@ -172,7 +265,11 @@ function LiteRenderer(props) {
     externalEvent = props.externalEvent,
     onInternalEvent = props.onInternalEvent,
     onError = props.onError,
+    holes = props.holes,
     passThrough = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var holePayload = (0, _react.useMemo)(function () {
+    return buildHoleElements(holes);
+  }, [holes]);
 
   // ✅ instance-scoped store (no module singleton)
   var storeRef = (0, _react.useRef)(null);
@@ -182,8 +279,8 @@ function LiteRenderer(props) {
   var catalogRef = (0, _react.useRef)(null);
   if (!catalogRef.current) {
     catalogRef.current = new _catalog["default"]();
-    initCatalogOnce(catalogRef.current);
   }
+  initCatalogOnce(catalogRef.current, holePayload);
 
   // ✅ stable plugins array
   var plugins = (0, _react.useMemo)(function () {
@@ -206,7 +303,7 @@ function LiteRenderer(props) {
         try {
           var maybeCleanup = p === null || p === void 0 ? void 0 : p(store, stateExtractor);
           if (typeof maybeCleanup === 'function') cleanups.push(maybeCleanup);
-        } catch (_unused4) {
+        } catch (_unused5) {
           // keep prior behavior: do not crash
         }
       }
@@ -224,7 +321,7 @@ function LiteRenderer(props) {
           var fn = _step2.value;
           try {
             fn();
-          } catch (_unused3) {}
+          } catch (_unused4) {}
         }
       } catch (err) {
         _iterator2.e(err);
@@ -255,7 +352,7 @@ function LiteRenderer(props) {
     };
     try {
       onError === null || onError === void 0 || onError(payload);
-    } catch (_unused5) {}
+    } catch (_unused6) {}
     // eslint-disable-next-line no-console
     console.debug('[LiteRenderer:onError]', payload);
     lastEmittedRef.current = payload;
@@ -316,13 +413,11 @@ function LiteRenderer(props) {
       emit(lastExternalEventRef.current, last.errors);
     }
   }, [externalEvent, emit]);
-  var _ref = configData || {},
-    logoImg = _ref.logoImg,
-    companyUrl = _ref.companyUrl;
+  var _ref3 = configData || {},
+    logoImg = _ref3.logoImg,
+    companyUrl = _ref3.companyUrl;
   return /*#__PURE__*/_react["default"].createElement(_AppContext["default"].Provider, null, /*#__PURE__*/_react["default"].createElement(_reactRedux.Provider, {
     store: storeRef.current
-  }, /*#__PURE__*/_react["default"].createElement(ToolErrorBoundary, {
-    pushError: pushError
   }, /*#__PURE__*/_react["default"].createElement(_LiteKitchenConfigurator["default"], (0, _extends2["default"])({
     catalog: catalogRef.current,
     width: width,
@@ -336,7 +431,7 @@ function LiteRenderer(props) {
     configData: configData,
     externalEvent: externalEvent,
     onInternalEvent: onInternalEvent
-  }, passThrough)))));
+  }, passThrough))));
 }
 LiteRenderer.propTypes = {
   width: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string]),
@@ -356,6 +451,7 @@ LiteRenderer.propTypes = {
   externalEvent: _propTypes["default"].object,
   onInternalEvent: _propTypes["default"].func,
   onError: _propTypes["default"].func,
+  holes: _propTypes["default"].array,
   store: _propTypes["default"].object
 };
 module.exports = exports.default;

package/lib/components/viewer2d/viewer2d.js

@@ -1419,10 +1419,9 @@ function Viewer2D(_ref, _ref2) {
     detectAutoPan: mode2DetectAutopan(mode),
     onMouseDown: onMouseDown,
     onMouseMove: onMouseMove,
-    onMouseUp: onMouseUp
-    // miniaturePosition="none"
-    // toolbarPosition="none"
-    ,
+    onMouseUp: onMouseUp,
+    miniaturePosition: "none",
+    toolbarPosition: "none",
     detectPinchGesture: false,
     disableDoubleClickZoomWithToolAuto: true,
     ref: Viewer

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

@@ -3070,13 +3070,23 @@ function createBacksplash(item, layer, planData, scene) {
    */
   var altItems = [],
     flag = false;
+  var D0 = {},
+    D1 = {};
   wallItems.map(function (wallItem) {
     var _wallItem$itemInfo, _wallItem$itemInfo2;
     var altitude = (_wallItem$itemInfo = wallItem.itemInfo) === null || _wallItem$itemInfo === void 0 || (_wallItem$itemInfo = _wallItem$itemInfo.properties) === null || _wallItem$itemInfo === void 0 ? void 0 : _wallItem$itemInfo.get('altitude').get('_length');
     var altitudeUnit = ((_wallItem$itemInfo2 = wallItem.itemInfo) === null || _wallItem$itemInfo2 === void 0 || (_wallItem$itemInfo2 = _wallItem$itemInfo2.properties) === null || _wallItem$itemInfo2 === void 0 ? void 0 : _wallItem$itemInfo2.get('altitude').get('_unit')) || 'cm';
     if (!(0, _helper.isEmpty)(altitude) && !(0, _helper.isEmpty)(altitudeUnit)) {
       altitude = (0, _convertUnitsLite.convert)(altitude).from(altitudeUnit).to('cm');
+      var altPoints = (0, _geometry2.getLineSnapPointsOfItem)(layer, curLine, wallItem);
+      if (altPoints.length > 1) {
+        D0 = altPoints[0];
+        D1 = altPoints[1];
+      }
       altItems.push({
+        D0: D0,
+        // D0, D1: item's snapped points with line
+        D1: D1,
         x: wallItem.pos.x,
         width: wallItem.size.width,
         altitude: altitude
@@ -3084,10 +3094,29 @@ function createBacksplash(item, layer, planData, scene) {
     }
   });
   layer.holes.map(function (hole) {
-    var _hole$properties, _hole$properties2;
+    var _hole$properties, _hole$properties2, _layer$lines, _layer$vertices, _line$vertices, _layer$vertices2, _line$vertices2;
     var width = (_hole$properties = hole.properties) === null || _hole$properties === void 0 ? void 0 : _hole$properties.getIn(['width', 'length']);
     var altitude = (_hole$properties2 = hole.properties) === null || _hole$properties2 === void 0 ? void 0 : _hole$properties2.getIn(['altitude', 'length']);
+    var line = (_layer$lines = layer.lines) === null || _layer$lines === void 0 ? void 0 : _layer$lines.get(curLine === null || curLine === void 0 ? void 0 : curLine.id);
+    var v0 = (_layer$vertices = layer.vertices) === null || _layer$vertices === void 0 ? void 0 : _layer$vertices.get(line === null || line === void 0 || (_line$vertices = line.vertices) === null || _line$vertices === void 0 ? void 0 : _line$vertices.get(0));
+    var v1 = (_layer$vertices2 = layer.vertices) === null || _layer$vertices2 === void 0 ? void 0 : _layer$vertices2.get(line === null || line === void 0 || (_line$vertices2 = line.vertices) === null || _line$vertices2 === void 0 ? void 0 : _line$vertices2.get(1));
+    if (!(0, _helper.isEmpty)(v0) || !(0, _helper.isEmpty)(v1)) {
+      var lineLength = (0, _geometry2.pointsDistance)(v0.x, v0.y, v1.x, v1.y);
+      var disD0 = lineLength * hole.offset - width / 2;
+      var disD1 = lineLength * hole.offset + width / 2;
+      D0 = {
+        x: v0.x + disD0 * Math.cos(hole.rotRad),
+        y: v0.y + disD0 * Math.sin(hole.rotRad)
+      };
+      D1 = {
+        x: v0.x + disD1 * Math.cos(hole.rotRad),
+        y: v0.y + disD1 * Math.sin(hole.rotRad)
+      };
+    }
     if (!(0, _helper.isEmpty)(width) && !(0, _helper.isEmpty)(altitude) && hole.line === (curLine === null || curLine === void 0 ? void 0 : curLine.id)) altItems.push({
+      D0: D0,
+      // D0, D1: hole's two points
+      D1: D1,
       x: hole.x,
       width: width,
       altitude: altitude
@@ -3096,7 +3125,7 @@ function createBacksplash(item, layer, planData, scene) {
   if (altItems.length > 0) {
     depth = altItems[0].altitude;
     altItems.map(function (altItem) {
-      if (item.pos.x + item.size.width / 2 >= altItem.x - altItem.width / 2 && item.pos.x - item.size.width / 2 <= altItem.x + altItem.width / 2) {
+      if ((0, _geometry2.isOverlappedTwoItemsOnOneLine)(layer, curLine, item, altItem)) {
         if (depth >= altItem.altitude) {
           depth = altItem.altitude;
           flag = true;
@@ -3206,9 +3235,9 @@ function createBacksplash(item, layer, planData, scene) {
   }
   itemToSave.info.id = item.itemInfo.id;
   deleteSpecifiedMeshObjects('backsplash' + item.itemInfo.id);
-  if (Math.abs(item.rotRad % (Math.PI / 2)) < _constants.EPSILON) planData.plan.add(backsplash);
+  if (Math.abs(item.rotRad % (Math.PI / 2)) < _constants.EPSILON || Math.abs(item.rotRad % (Math.PI / 2) - Math.PI / 2) < _constants.EPSILON) planData.plan.add(backsplash);
   backsplash.name = name;
-  backsplash.visible = item.itemInfo.get('backsplashVisible') && backsplashApplied && Math.abs(item.rotRad % (Math.PI / 2)) < _constants.EPSILON;
+  backsplash.visible = item.itemInfo.get('backsplashVisible') && backsplashApplied && Math.abs(item.rotRad % (Math.PI / 2)) < _constants.EPSILON || Math.abs(item.rotRad % (Math.PI / 2) - Math.PI / 2) < _constants.EPSILON;
 
   // Save to scene graph
 

package/lib/constants.js

@@ -667,16 +667,16 @@ var PROJECT_SETTING_OPTION = exports.PROJECT_SETTING_OPTION = {
   CHANGE_MEASUREMENT_UNIT: CHANGE_MEASUREMENT_UNIT
 };
 var HOLE_NAMES = exports.HOLE_NAMES = {
-  WINDOW_CLEAR: 'Window',
-  WINDOW_CROSS: 'Cross Window',
-  WINDOW_DOUBLE_HUNG: 'Double Hung Window',
-  WINDOW_VERTICAL: 'window-vertical',
+  WINDOW_CLEAR: 'Clear',
+  WINDOW_CROSS: 'Cross',
+  WINDOW_DOUBLE_HUNG: 'Double Hung',
+  WINDOW_VERTICAL: 'Vertical',
   DOOR_CLOSET: 'Closet',
   DOOR_EXTERIOR: 'Exterior',
   DOOR_INTERIOR: 'Interior',
   DOOR_SLIDING: 'Sliding',
   DOOR_FRAMED: 'Framed Doorway',
-  DOOR_FRAMELESS: 'FrameLess Doorway'
+  DOOR_FRAMELESS: 'Frameless Doorway'
 };
 
 // direction type

package/lib/devLiteRenderer.js

@@ -21,6 +21,7 @@ var _furnishingPayload = _interopRequireDefault(require("./mocks/furnishingPaylo
 var _rectangleShape = _interopRequireDefault(require("./mocks/rectangleShape.json"));
 var _moldingPayload = _interopRequireDefault(require("./mocks/moldingPayload.json"));
 var _replaceCabinetPayload = _interopRequireDefault(require("./mocks/replaceCabinetPayload.json"));
+var _holesPayload = _interopRequireDefault(require("./mocks/holesPayload.json"));
 var _reactDom = _interopRequireDefault(require("react-dom"));
 var _LiteRenderer = _interopRequireDefault(require("./LiteRenderer"));
 var _antd = require("antd");
@@ -864,6 +865,7 @@ function WorkSpace(props) {
     logoImg: "/assets/logo.png",
     companyUrl: "https://example.com",
     toolbarButtons: [],
+    holes: _holesPayload["default"],
     externalEvent: externalEvent,
     onInternalEvent: onInternalEvent,
     onError: function onError(payload) {

package/lib/utils/geometry.js

@@ -51,6 +51,7 @@ exports.getCentroidOfPolygon = getCentroidOfPolygon;
 exports.getHoleItems = getHoleItems;
 exports.getInterSect = getInterSect;
 exports.getLineInterSect = getLineInterSect;
+exports.getLineSnapPointsOfItem = getLineSnapPointsOfItem;
 exports.getNormaline = getNormaline;
 exports.getPoylgonPoints = getPoylgonPoints;
 exports.getRelatedLines = void 0;
@@ -61,6 +62,7 @@ exports.intersectRect = intersectRect;
 exports.isBackWall = isBackWall;
 exports.isFrontWall = isFrontWall;
 exports.isLeftWall = isLeftWall;
+exports.isOverlappedTwoItemsOnOneLine = isOverlappedTwoItemsOnOneLine;
 exports.isPointInArea = isPointInArea;
 exports.isPointInRect = isPointInRect;
 exports.isPointOnLineSegment = isPointOnLineSegment;
@@ -2947,4 +2949,83 @@ function getSnappedWallLines(item, layer, catalog) {
     }
   }
   return snappedWallLines;
+}
+function getLineSnapPointsOfItem(layer, curLine, item) {
+  var _layer$lines2, _layer$vertices4, _line$vertices3, _layer$vertices5, _line$vertices4;
+  //       V0
+  //       /|
+  //    D0 /|-----------|
+  //       /|           |
+  //       /|    Item   |    ====>   get D0, D1
+  //       /|           |
+  //    D1 /|-----------|
+  //       /|
+  // get v0, v1 of line
+  var line = (_layer$lines2 = layer.lines) === null || _layer$lines2 === void 0 ? void 0 : _layer$lines2.get(curLine === null || curLine === void 0 ? void 0 : curLine.id);
+  var v0 = (_layer$vertices4 = layer.vertices) === null || _layer$vertices4 === void 0 ? void 0 : _layer$vertices4.get(line === null || line === void 0 || (_line$vertices3 = line.vertices) === null || _line$vertices3 === void 0 ? void 0 : _line$vertices3.get(0));
+  var v1 = (_layer$vertices5 = layer.vertices) === null || _layer$vertices5 === void 0 ? void 0 : _layer$vertices5.get(line === null || line === void 0 || (_line$vertices4 = line.vertices) === null || _line$vertices4 === void 0 ? void 0 : _line$vertices4.get(1));
+  var pointGroup = [];
+  if ((0, _helper.isEmpty)(v0) || (0, _helper.isEmpty)(v1)) return pointGroup;
+  var itemRect = item === null || item === void 0 ? void 0 : item.rect;
+  if (!(0, _helper.isEmpty)(itemRect)) {
+    for (var i = 0; i < itemRect.length; i++) {
+      if (distancePointFromLineSegment(v0, v1, itemRect[i].x, itemRect[i].y) < _constants.EPSILON) {
+        pointGroup.push(itemRect[i]);
+      }
+    }
+  }
+  return pointGroup;
+}
+function isOverlappedTwoItemsOnOneLine(layer, curLine, srcItem, desItem) {
+  var _layer$lines3, _layer$vertices6, _line$vertices5, _layer$vertices7, _line$vertices6, _S, _S2, _S3, _S4;
+  if ((0, _helper.isEmpty)(layer) || (0, _helper.isEmpty)(curLine) || (0, _helper.isEmpty)(srcItem) || (0, _helper.isEmpty)(desItem) || (0, _helper.isEmpty)(desItem.D0) || (0, _helper.isEmpty)(desItem.D1)) return false;
+  // get v0, v1 of line
+  var line = (_layer$lines3 = layer.lines) === null || _layer$lines3 === void 0 ? void 0 : _layer$lines3.get(curLine === null || curLine === void 0 ? void 0 : curLine.id);
+  var v0 = (_layer$vertices6 = layer.vertices) === null || _layer$vertices6 === void 0 ? void 0 : _layer$vertices6.get(line === null || line === void 0 || (_line$vertices5 = line.vertices) === null || _line$vertices5 === void 0 ? void 0 : _line$vertices5.get(0));
+  var v1 = (_layer$vertices7 = layer.vertices) === null || _layer$vertices7 === void 0 ? void 0 : _layer$vertices7.get(line === null || line === void 0 || (_line$vertices6 = line.vertices) === null || _line$vertices6 === void 0 ? void 0 : _line$vertices6.get(1));
+  var S0,
+    S1,
+    D0 = desItem === null || desItem === void 0 ? void 0 : desItem.D0,
+    D1 = desItem === null || desItem === void 0 ? void 0 : desItem.D1;
+  if ((0, _helper.isEmpty)(v0) || (0, _helper.isEmpty)(v1)) return false;
+  // get distance from v0 to srcItem's S0, S1 and desItem(item or hole)'s D0, D1 are placed on line
+  var srcPoints = getLineSnapPointsOfItem(layer, curLine, srcItem);
+  if (srcPoints.length > 1) {
+    S0 = srcPoints[0];
+    S1 = srcPoints[1];
+  }
+  var disV0S0 = pointsDistance(v0.x, v0.y, (_S = S0) === null || _S === void 0 ? void 0 : _S.x, (_S2 = S0) === null || _S2 === void 0 ? void 0 : _S2.y);
+  var disV0S1 = pointsDistance(v0.x, v0.y, (_S3 = S1) === null || _S3 === void 0 ? void 0 : _S3.x, (_S4 = S1) === null || _S4 === void 0 ? void 0 : _S4.y);
+  var disV0D0 = pointsDistance(v0.x, v0.y, D0.x, D0.y);
+  var disV0D1 = pointsDistance(v0.x, v0.y, D1.x, D1.y);
+  // detect two items are overlapped
+  var maxDisV0S = Math.max(disV0S0, disV0S1);
+  var minDisV0S = Math.min(disV0S0, disV0S1);
+  var maxDisV0D = Math.max(disV0D0, disV0D1);
+  var minDisV0D = Math.min(disV0D0, disV0D1);
+  if (maxDisV0S > maxDisV0D && maxDisV0D - minDisV0S > _constants.EPSILON) {
+    //      d0     s0 d1  s1   ===>  maxDisV0S: v0s1, minDisV0S: v0s0, maxDisV0D: v0d1, minDisV0D: v0d0
+    //  v0 __________________________ v1
+    //      |      |  |   |
+    //      |      |  |   |
+    //      |__DI__|__|   |
+    //             |__SI__|
+    /////////////////////////////////////////
+    //      s0     d0     d1   s1  ===>  maxDisV0S: v0s1, minDisV0S: v0s0, maxDisV0D: v0d1, minDisV0D: v0d0
+    //  v0 __________________________ v1
+    //      |      |      |    |
+    //      |      |__DI__|    |
+    //      |_________SI_______|
+    return true;
+  } else if (minDisV0S < minDisV0D && maxDisV0S - minDisV0D > _constants.EPSILON) {
+    //      s0     d0 s1  d1   ===>  maxDisV0S: v0s1, minDisV0S: v0s0, maxDisV0D: v0d1, minDisV0D: v0d0
+    //  v0 __________________________ v1
+    //      |      |  |   |
+    //      |      |__DI__|
+    //      |__SI_____|
+    //
+    return true;
+  } else {
+    return false;
+  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kitchen-simulator",
-  "version": "4.4.0",
+  "version": "4.4.2-dynamic-holes",
   "description": "It is a kitchen simulator (self-contained micro-frontend).",
   "license": "MIT",
   "main": "lib/index.js",