kitchen-simulator 4.4.6 → 5.0.0-new-api

package/lib/mappings/external-events/mappers/ccdfToCDSMapper.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.mapFromCCDFToCDS = mapFromCCDFToCDS;
+var _utils = require("../../../components/viewer2d/utils");
+function mapFromCCDFToCDS(ccdf_list) {
+  // This function make CDS from CCDF_List
+  var itemCDSList = [];
+  var itemCDSData = {};
+  var cabitnetDoorStyleId;
+  ccdf_list === null || ccdf_list === void 0 || ccdf_list.forEach(function (asItem) {
+    if (!(0, _utils.isEmpty)(asItem === null || asItem === void 0 ? void 0 : asItem.id)) {
+      cabitnetDoorStyleId = asItem.id;
+    }
+    asItem === null || asItem === void 0 || asItem.assets3d.forEach(function (as) {
+      if (!(0, _utils.isEmpty)(as === null || as === void 0 ? void 0 : as.placeholder_name) && !(0, _utils.isEmpty)(as === null || as === void 0 ? void 0 : as.gltf)) {
+        var updatedName = 'base_' + (as === null || as === void 0 ? void 0 : as.placeholder_name) + '_gltf';
+        itemCDSData[updatedName] = as === null || as === void 0 ? void 0 : as.gltf;
+      }
+      itemCDSData['is_euro_cds'] = !(0, _utils.isEmpty)(as === null || as === void 0 ? void 0 : as.is_euro_cds) ? as.is_euro_cds : 0;
+      itemCDSData['euro_shape_svg'] = !(0, _utils.isEmpty)(as === null || as === void 0 ? void 0 : as.euro_shape_svg) ? as.is_euro_cds : null;
+      itemCDSData['euro_width'] = !(0, _utils.isEmpty)(as === null || as === void 0 ? void 0 : as.euro_width) ? as.is_euro_cds : null;
+      itemCDSData['euro_height'] = !(0, _utils.isEmpty)(as === null || as === void 0 ? void 0 : as.euro_height) ? as.is_euro_cds : null;
+      itemCDSData['euro_length'] = !(0, _utils.isEmpty)(as === null || as === void 0 ? void 0 : as.euro_length) ? as.is_euro_cds : null;
+    });
+    var data = [];
+    data.push(itemCDSData);
+    itemCDSList.push({
+      itemID: asItem.cabinet_id,
+      data: data,
+      cabinet_door_style_id: cabitnetDoorStyleId
+    });
+  });
+  return itemCDSList;
+}

package/lib/mappings/external-events/mappers/changeDoorStyleMapper.js

@@ -0,0 +1,72 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.mapChangeDoorStyleEvent = mapChangeDoorStyleEvent;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _constants = require("../../../constants");
+var _helper = require("../../../utils/helper");
+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 mapChangeDoorStyleEvent(evt, state) {
+  var _evt$payload, _layer$toJS, _targetDoorStyle$ccdf;
+  if ((0, _helper.isEmpty)(evt)) return null;
+  var targetDoorStyle = evt === null || evt === void 0 || (_evt$payload = evt.payload) === null || _evt$payload === void 0 ? void 0 : _evt$payload.doorStyle;
+  if ((0, _helper.isEmpty)(targetDoorStyle)) return evt;
+  var layerId = state.getIn(['scene', 'selectedLayer']);
+  var layer = state.getIn(['scene', 'layers', layerId]);
+  if ((0, _helper.isEmpty)(layer)) return evt;
+  var handleTexture = layer.get('doorHandle');
+  var counterToptexture = layer === null || layer === void 0 || (_layer$toJS = layer.toJS()) === null || _layer$toJS === void 0 || (_layer$toJS = _layer$toJS.counterTop) === null || _layer$toJS === void 0 ? void 0 : _layer$toJS.uri;
+
+  // make doorStyles and update the doorStyle payload
+  var Max_PH = 9;
+  var doorStyles = {
+    base: targetDoorStyle.texture,
+    counttop: counterToptexture,
+    interior: _constants.DEFAULT_INTERIOR_URL
+  };
+  for (var i = 1; i <= Max_PH; i++) {
+    doorStyles['base_door_' + i] = targetDoorStyle.texture;
+    doorStyles['base_fixed_drawer_door_' + i] = targetDoorStyle.texture;
+    doorStyles['base_drawer_' + i] = targetDoorStyle.texture;
+    doorStyles['base_drawer_door_' + i] = targetDoorStyle.texture;
+    doorStyles['door_handle_' + i] = handleTexture;
+    doorStyles['fixed_drawer_door_handle_' + i] = handleTexture;
+    doorStyles['drawer_door_handle_' + i] = handleTexture;
+  }
+  evt.payload.doorStyle = _objectSpread(_objectSpread({}, targetDoorStyle), {}, {
+    doorStyles: doorStyles
+  });
+  // make itemCDS using assets3d
+  var itemCDS = [];
+  var itemCDSData = {};
+  var cabitnetDoorStyleId;
+  targetDoorStyle === null || targetDoorStyle === void 0 || (_targetDoorStyle$ccdf = targetDoorStyle.ccdf_list) === null || _targetDoorStyle$ccdf === void 0 || _targetDoorStyle$ccdf.forEach(function (asItem) {
+    if (!(0, _helper.isEmpty)(asItem === null || asItem === void 0 ? void 0 : asItem.id)) {
+      cabitnetDoorStyleId = asItem.id;
+    }
+    asItem === null || asItem === void 0 || asItem.assets3d.forEach(function (as) {
+      if (!(0, _helper.isEmpty)(as === null || as === void 0 ? void 0 : as.placeholder_name) && !(0, _helper.isEmpty)(as === null || as === void 0 ? void 0 : as.gltf)) {
+        var updatedName = 'base_' + (as === null || as === void 0 ? void 0 : as.placeholder_name) + '_gltf';
+        itemCDSData[updatedName] = as === null || as === void 0 ? void 0 : as.gltf;
+      }
+      itemCDSData['is_euro_cds'] = !(0, _helper.isEmpty)(as === null || as === void 0 ? void 0 : as.is_euro_cds) ? as.is_euro_cds : 0;
+      itemCDSData['euro_shape_svg'] = !(0, _helper.isEmpty)(as === null || as === void 0 ? void 0 : as.euro_shape_svg) ? as.is_euro_cds : null;
+      itemCDSData['euro_width'] = !(0, _helper.isEmpty)(as === null || as === void 0 ? void 0 : as.euro_width) ? as.is_euro_cds : null;
+      itemCDSData['euro_height'] = !(0, _helper.isEmpty)(as === null || as === void 0 ? void 0 : as.euro_height) ? as.is_euro_cds : null;
+      itemCDSData['euro_length'] = !(0, _helper.isEmpty)(as === null || as === void 0 ? void 0 : as.euro_length) ? as.is_euro_cds : null;
+    });
+    var data = [];
+    data.push(itemCDSData);
+    itemCDS.push({
+      itemID: asItem.cabinet_id,
+      data: data,
+      cabinet_door_style_id: cabitnetDoorStyleId
+    });
+  });
+  evt.payload.itemCDS = itemCDS;
+  return evt;
+}

package/lib/mappings/external-events/mappers/loadProjectMapper.js

@@ -0,0 +1,70 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.mapLoadProjectEvent = mapLoadProjectEvent;
+exports.updateProjectWithCDSList = updateProjectWithCDSList;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _constants = require("../../../constants");
+var _helper = require("../../../utils/helper");
+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 mapLoadProjectEvent(evt, state) {
+  // preprocessing for loading project
+  // this function make doorStyles using item's doorStyle
+  if ((0, _helper.isEmpty)(evt)) return null;
+  var layerId = evt.payload.layers['layer-1'].id;
+  var layer = evt.payload.layers;
+  var itemKeys = Object.keys(layer[layerId].items);
+  if ((0, _helper.isEmpty)(layer)) return evt;
+  var handleTexture = !(0, _helper.isEmpty)(layer.doorHandle) ? layer.doorHandle : _constants.DEFAULT_DOOR_HANDLE_TEXTURE_URL;
+  var counterToptexture = layer.counterTop;
+  // make doorStyles and update the doorStyle payload
+  var Max_PH = 9;
+  for (var i = 0; i < itemKeys.length; i++) {
+    var item = layer[layerId].items[itemKeys[i]];
+    var doorStyle = item.doorStyle;
+    var doorStyles = {
+      base: doorStyle.texture,
+      counttop: counterToptexture,
+      interior: _constants.DEFAULT_INTERIOR_URL
+    };
+    for (var _i = 1; _i <= Max_PH; _i++) {
+      doorStyles['base_door_' + _i] = doorStyle.texture;
+      doorStyles['base_fixed_drawer_door_' + _i] = doorStyle.texture;
+      doorStyles['base_drawer_' + _i] = doorStyle.texture;
+      doorStyles['base_drawer_door_' + _i] = doorStyle.texture;
+      doorStyles['door_handle_' + _i] = handleTexture;
+      doorStyles['fixed_drawer_door_handle_' + _i] = handleTexture;
+      doorStyles['drawer_door_handle_' + _i] = handleTexture;
+    }
+    item.doorStyle = _objectSpread(_objectSpread({}, doorStyle), {}, {
+      doorStyles: doorStyles
+    });
+    layer[layerId].items[itemKeys[i]] = item;
+  }
+  return evt;
+}
+function updateProjectWithCDSList(project, cdsList) {
+  //This function updates the project json using CDSList
+  if ((0, _helper.isEmpty)(project) || (0, _helper.isEmpty)(cdsList)) return project;
+  var layerId = project.layers['layer-1'].id;
+  var layer = project.layers;
+  var itemKeys = Object.keys(layer[layerId].items);
+  if ((0, _helper.isEmpty)(itemKeys)) return project;
+  var _loop = function _loop(i) {
+    cdsList.forEach(function (cds) {
+      var _layer$layerId;
+      if (((_layer$layerId = layer[layerId]) === null || _layer$layerId === void 0 || (_layer$layerId = _layer$layerId.items[itemKeys[i]]) === null || _layer$layerId === void 0 ? void 0 : _layer$layerId.itemID) === (cds === null || cds === void 0 ? void 0 : cds.itemID)) {
+        layer[layerId].items[itemKeys[i]].doorStyle.cds = cds;
+      }
+    });
+  };
+  for (var i = 0; i < itemKeys.length; i++) {
+    _loop(i);
+  }
+  project.layers = layer;
+  return project;
+}

package/lib/mappings/holesToCatalog.js

@@ -0,0 +1,148 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.registerDynamicHoles = exports.buildHoleElements = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var Holes = _interopRequireWildcard(require("../catalog/holes/export"));
+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; }
+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 (_unused) {
+    return null;
+  }
+};
+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 = exports.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);
+    }
+  });
+  return {
+    elements: elements,
+    categories: categories
+  };
+};
+var registerDynamicHoles = exports.registerDynamicHoles = function registerDynamicHoles(catalog, holePayload) {
+  if (!catalog) return;
+  var holeElements = (holePayload === null || holePayload === void 0 ? void 0 : holePayload.elements) || [];
+  holeElements.forEach(function (element) {
+    if (!catalog.hasElement(element.name)) {
+      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);
+      }
+    });
+  });
+};

package/lib/models.js

@@ -187,6 +187,15 @@ var Item = exports.Item = /*#__PURE__*/function (_Record7) {
   (0, _inherits2["default"])(Item, _Record7);
   return (0, _createClass2["default"])(Item);
 }((0, _immutable.Record)(_objectSpread(_objectSpread({}, sharedAttributes), {}, {
+  long_name: '',
+  sizeinfo: new _immutable.Map(),
+  description: '',
+  base: '',
+  shape_svg: '',
+  gltf: '',
+  is_corner: -1,
+  obj_property: new _immutable.Map(),
+  outline: '',
   prototype: 'items',
   x: 0,
   y: 0,
@@ -343,13 +352,15 @@ var CatalogElement = exports.CatalogElement = /*#__PURE__*/function (_Record1) {
 }((0, _immutable.Record)({
   itemID: -1,
   name: '',
+  long_name: '',
   prototype: '',
   info: new _immutable.Map(),
   properties: new _immutable.Map(),
   obj: new _immutable.Map(),
   type: '',
   cds: new _immutable.Map(),
-  structure_json: {}
+  structure_json: {},
+  gltf: ''
 }, 'CatalogElement'));
 var Catalog = exports.Catalog = /*#__PURE__*/function (_Record10) {
   function Catalog() {

package/lib/utils/isolate-event-handler.js

@@ -24,6 +24,10 @@ var _molding = require("./molding");
 var _models = require("../models");
 var _geometry = require("./geometry");
 var _skinPanelEngine = require("./skinPanelEngine");
+var _mapExternalEventPayload = require("../mappings/external-events/mapExternalEventPayload");
+var _ccdfMapper = require("../mappings/external-events/mappers/ccdfMapper");
+var _ccdfToCDSMapper = require("../mappings/external-events/mappers/ccdfToCDSMapper");
+var _loadProjectMapper = require("../mappings/external-events/mappers/loadProjectMapper");
 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; }
 var PRECISION = 2;
@@ -463,27 +467,28 @@ function updateCabinetPayload(_x3) {
 }
 function _updateCabinetPayload() {
   _updateCabinetPayload = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee5(cabinetPayload) {
-    var cabinetPayloadKeys, i, _cabinetPayload$cabin, _cabinetPayload$cabin2;
+    var tempPlaceholders, cabinetPayloadKeys, i;
     return _regenerator["default"].wrap(function (_context6) {
       while (1) switch (_context6.prev = _context6.next) {
         case 0:
-          // let tempPlaceholders = [];
-          // tempPlaceholders = await parseTempPlaceholdersFromCabinetPayload(
-          //   cabinetPayload
-          // );
+          tempPlaceholders = [];
+          _context6.next = 1;
+          return parseTempPlaceholdersFromCabinetPayload(cabinetPayload);
+        case 1:
+          tempPlaceholders = _context6.sent;
           cabinetPayloadKeys = Object.keys(cabinetPayload);
           for (i = 0; i < cabinetPayloadKeys.length; i++) {
             if (cabinetPayloadKeys[i] === 'structure_json') {
-              cabinetPayload[cabinetPayloadKeys[i]]['placeholders'] = (_cabinetPayload$cabin = (_cabinetPayload$cabin2 = cabinetPayload[cabinetPayloadKeys[i]]['tempPlaceholders'][0]) === null || _cabinetPayload$cabin2 === void 0 ? void 0 : _cabinetPayload$cabin2.placeholders) !== null && _cabinetPayload$cabin !== void 0 ? _cabinetPayload$cabin : [];
-
               // cabinetPayload[cabinetPayloadKeys[i]]['placeholders'] =
-              //   tempPlaceholders[0].placeholders;
-              // cabinetPayload[cabinetPayloadKeys[i]]['tempPlaceholders'] =
-              //   tempPlaceholders;
+              //   cabinetPayload[cabinetPayloadKeys[i]]['tempPlaceholders'][0]
+              //     ?.placeholders ?? [];
+
+              cabinetPayload[cabinetPayloadKeys[i]]['placeholders'] = tempPlaceholders[0].placeholders;
+              cabinetPayload[cabinetPayloadKeys[i]]['tempPlaceholders'] = tempPlaceholders;
             }
           }
           return _context6.abrupt("return", cabinetPayload);
-        case 1:
+        case 2:
         case "end":
           return _context6.stop();
       }
@@ -1219,13 +1224,12 @@ function handleExternalEvent(_x0) {
 }
 function _handleExternalEvent() {
   _handleExternalEvent = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee0(props) {
-    var _evt$payload3, _evt$payload4;
-    var evt, state, layerId, layer, _evt$payload, _state$catalog, cdsItems, itemKeys, _loop6, i, newScene, tempState, _props$onInternalEven, sLineCnt, element, _state$viewer2D, _evt$payload$initialP, mouseX, mouseY, v2d, vPosX, vPosY, layerID, defaulTitle, _evt$payload5, doorStyle, itemCDS, applyScope, _evt$payload5$itemIds, itemIds, _layerId, allItems, targetItems, idSet, selectedItemIds, _cdsItems, _loop7, _i2, _props$onInternalEven2, _evt$payload6, roomShapeType, width, height, measurementUnit, _doorStyle, value, _value, _evt$payload7, moldingInfo, isGlobal, distElement, _distElement, _evt$payload8, option, _value2, _layerId2, _layer, _layer$getIn, selectedLines, selectedHoles, selectedItems, _i4, _i5, _i6, _evt$payload9, _evt$payload0, _evt$payload1, _evt$payload10, _layerID, _layer2, orginalItemInfo, originalItem, originalItemPos, replaceItem, _props$configData$mol, _props$configData, _props$configData$ski, _props$configData2, _props$onInternalEven3, sceneData, currentTexture, moldingPieceLength, skinPanelExclusionSKUs, _t5, _t6, _t7;
+    var _evt$payload4, _evt$payload5;
+    var state, evt, layerId, layer, _evt$payload, _state$catalog, cdsItems, itemKeys, _loop6, i, newScene, tempState, _props$onInternalEven, sLineCnt, element, _state$viewer2D, _evt$payload$initialP, mouseX, mouseY, v2d, vPosX, vPosY, layerID, defaulTitle, _evt$payload6, doorStyle, applyScope, itemCDS, _evt$payload6$itemIds, itemIds, _layerId, allItems, targetItems, idSet, selectedItemIds, ccdf_list, _loop7, _i2, _props$onInternalEven2, _evt$payload7, roomShapeType, width, height, measurementUnit, _doorStyle, value, _value, _evt$payload8, moldingInfo, isGlobal, distElement, _distElement, _evt$payload9, option, _value2, _layerId2, _layer, _layer$getIn, selectedLines, selectedHoles, selectedItems, _i4, _i5, _i6, _evt$payload0, _evt$payload1, _evt$payload10, _evt$payload11, _layerID, _layer2, orginalItemInfo, originalItem, originalItemPos, replaceItem, _layer$doorStyle, _currentTexture, _props$configData$mol, _props$configData, _props$configData$ski, _props$configData2, _props$onInternalEven3, sceneData, currentTexture, moldingPieceLength, skinPanelExclusionSKUs, _t5, _t6, _t7;
     return _regenerator["default"].wrap(function (_context11) {
       while (1) switch (_context11.prev = _context11.next) {
         case 0:
           // console.log('***external event****', props.externalEvent);
-          evt = props.externalEvent;
           state = getPlannerStateFromProps(props);
           if (state) {
             _context11.next = 1;
@@ -1233,6 +1237,7 @@ function _handleExternalEvent() {
           }
           return _context11.abrupt("return");
         case 1:
+          evt = (0, _mapExternalEventPayload.mapExternalEventPayload)(props.externalEvent, state);
           layerId = state.getIn(['scene', 'selectedLayer']);
           layer = state.getIn(['scene', 'layers', layerId]);
           _t5 = evt === null || evt === void 0 ? void 0 : evt.type;
@@ -1247,19 +1252,19 @@ function _handleExternalEvent() {
           cdsItems = [];
           itemKeys = evt !== null && evt !== void 0 && (_evt$payload = evt.payload) !== null && _evt$payload !== void 0 && (_evt$payload = _evt$payload.layers['layer-1']) !== null && _evt$payload !== void 0 && _evt$payload.items ? Object.keys(evt.payload.layers['layer-1'].items) : [];
           _loop6 = /*#__PURE__*/_regenerator["default"].mark(function _loop6() {
-            var _evt$payload2, _it$properties, _it$properties2, _it$properties3, _it$doorStyle2;
+            var _evt$payload3, _it$properties, _it$properties2, _it$properties3, _it$doorStyle2;
             var it;
             return _regenerator["default"].wrap(function (_context0) {
               while (1) switch (_context0.prev = _context0.next) {
                 case 0:
-                  it = evt === null || evt === void 0 || (_evt$payload2 = evt.payload) === null || _evt$payload2 === void 0 || (_evt$payload2 = _evt$payload2.layers['layer-1']) === null || _evt$payload2 === void 0 ? void 0 : _evt$payload2.items[itemKeys[i]]; //////// check altitude of item property and change length from _length (convert length from 'in' fo 'cm')
+                  it = evt === null || evt === void 0 || (_evt$payload3 = evt.payload) === null || _evt$payload3 === void 0 || (_evt$payload3 = _evt$payload3.layers['layer-1']) === null || _evt$payload3 === void 0 ? void 0 : _evt$payload3.items[itemKeys[i]]; //////// check altitude of item property and change length from _length (convert length from 'in' fo 'cm')
                   if (it !== null && it !== void 0 && (_it$properties = it.properties) !== null && _it$properties !== void 0 && (_it$properties = _it$properties.altitude) !== null && _it$properties !== void 0 && _it$properties.length && it !== null && it !== void 0 && (_it$properties2 = it.properties) !== null && _it$properties2 !== void 0 && (_it$properties2 = _it$properties2.altitude) !== null && _it$properties2 !== void 0 && _it$properties2._unit && it !== null && it !== void 0 && (_it$properties3 = it.properties) !== null && _it$properties3 !== void 0 && (_it$properties3 = _it$properties3.altitude) !== null && _it$properties3 !== void 0 && _it$properties3._length && it.properties.altitude.length !== (0, _convertUnitsLite.convert)(it.properties.altitude._length).from(it.properties.altitude._unit).to('cm')) {
                     it.properties.altitude.length = (0, _convertUnitsLite.convert)(it.properties.altitude._length).from(it.properties.altitude._unit).to('cm');
                   }
                   /////////
                   if (!cdsItems.some(function (v) {
                     var _it$doorStyle;
-                    return it.itemID === v.itemID && it.name === v.name && ((_it$doorStyle = it.doorStyle) === null || _it$doorStyle === void 0 || (_it$doorStyle = _it$doorStyle.doorStyles) === null || _it$doorStyle === void 0 ? void 0 : _it$doorStyle.cabinet_door_style_id) === v.cdsId;
+                    return it.itemID === v.itemID && it.name === v.name && ((_it$doorStyle = it.doorStyle) === null || _it$doorStyle === void 0 ? void 0 : _it$doorStyle.id) === v.dfId;
                   })) cdsItems.push({
                     itemID: it.itemID,
                     prototype: it.prototype,
@@ -1267,7 +1272,7 @@ function _handleExternalEvent() {
                     name: it.name,
                     type: it.type,
                     sku_number: it.sku_number,
-                    cdsId: (_it$doorStyle2 = it.doorStyle) === null || _it$doorStyle2 === void 0 || (_it$doorStyle2 = _it$doorStyle2.doorStyles) === null || _it$doorStyle2 === void 0 ? void 0 : _it$doorStyle2.cabinet_door_style_id
+                    dfId: (_it$doorStyle2 = it.doorStyle) === null || _it$doorStyle2 === void 0 ? void 0 : _it$doorStyle2.id
                   });
                 case 1:
                 case "end":
@@ -1300,11 +1305,15 @@ function _handleExternalEvent() {
               }
             }, /*#__PURE__*/function () {
               var _ref3 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee8(result) {
-                var rt, _i;
+                var _evt$payload2;
+                var cdsList, cabinetDefinitionList, rt, _i;
                 return _regenerator["default"].wrap(function (_context9) {
                   while (1) switch (_context9.prev = _context9.next) {
                     case 0:
-                      rt = mergeSameElements(result === null || result === void 0 ? void 0 : result.elements);
+                      cdsList = (0, _ccdfToCDSMapper.mapFromCCDFToCDS)(result === null || result === void 0 ? void 0 : result.ccdf_list);
+                      evt.payload = (0, _loadProjectMapper.updateProjectWithCDSList)(evt.payload, cdsList);
+                      cabinetDefinitionList = (0, _ccdfMapper.ccdfMapper)(result === null || result === void 0 ? void 0 : result.ccdf_list, evt === null || evt === void 0 || (_evt$payload2 = evt.payload) === null || _evt$payload2 === void 0 ? void 0 : _evt$payload2.layers['layer-1']);
+                      rt = mergeSameElements(cabinetDefinitionList);
                       _i = 0;
                     case 1:
                       if (!(_i < (rt === null || rt === void 0 ? void 0 : rt.length))) {
@@ -1381,7 +1390,7 @@ function _handleExternalEvent() {
         case 13:
           return _context11.abrupt("continue", 49);
         case 14:
-          _constants.ARRAY_3D_MODES.includes(state.mode) ? props.holesActions.selectToolDrawingHole3D(evt === null || evt === void 0 || (_evt$payload3 = evt.payload) === null || _evt$payload3 === void 0 ? void 0 : _evt$payload3.holeName) : props.holesActions.selectToolDrawingHole(evt === null || evt === void 0 || (_evt$payload4 = evt.payload) === null || _evt$payload4 === void 0 ? void 0 : _evt$payload4.holeName);
+          _constants.ARRAY_3D_MODES.includes(state.mode) ? props.holesActions.selectToolDrawingHole3D(evt === null || evt === void 0 || (_evt$payload4 = evt.payload) === null || _evt$payload4 === void 0 ? void 0 : _evt$payload4.holeName) : props.holesActions.selectToolDrawingHole(evt === null || evt === void 0 || (_evt$payload5 = evt.payload) === null || _evt$payload5 === void 0 ? void 0 : _evt$payload5.holeName);
           return _context11.abrupt("continue", 49);
         case 15:
           moveAndRotatePan2D3D(evt.type, props, evt.payload, state);
@@ -1392,7 +1401,7 @@ function _handleExternalEvent() {
           props.projectActions.rename(defaulTitle);
           return _context11.abrupt("continue", 49);
         case 17:
-          _evt$payload5 = evt.payload, doorStyle = _evt$payload5.doorStyle, itemCDS = _evt$payload5.itemCDS, applyScope = _evt$payload5.applyScope, _evt$payload5$itemIds = _evt$payload5.itemIds, itemIds = _evt$payload5$itemIds === void 0 ? [] : _evt$payload5$itemIds;
+          _evt$payload6 = evt.payload, doorStyle = _evt$payload6.doorStyle, applyScope = _evt$payload6.applyScope, itemCDS = _evt$payload6.itemCDS, _evt$payload6$itemIds = _evt$payload6.itemIds, itemIds = _evt$payload6$itemIds === void 0 ? [] : _evt$payload6$itemIds;
           _layerId = state.getIn(['scene', 'selectedLayer']);
           allItems = state.getIn(['scene', 'layers', _layerId, 'items']).toJS();
           targetItems = []; // Prepare idSet for SINGLE or MULTIPLE
@@ -1420,28 +1429,24 @@ function _handleExternalEvent() {
         case 20:
           return _context11.abrupt("continue", 21);
         case 21:
-          _cdsItems = [];
+          ccdf_list = [];
           _loop7 = /*#__PURE__*/_regenerator["default"].mark(function _loop7() {
-            var _itemCDS$find;
-            var item, cdsId;
+            var item;
             return _regenerator["default"].wrap(function (_context10) {
               while (1) switch (_context10.prev = _context10.next) {
                 case 0:
                   item = targetItems[_i2];
-                  cdsId = (_itemCDS$find = itemCDS.find(function (itCDS) {
-                    return itCDS.itemID === item.itemID;
-                  })) === null || _itemCDS$find === void 0 ? void 0 : _itemCDS$find.cabinet_door_style_id;
-                  if (cdsId && !_cdsItems.some(function (v) {
-                    return item.itemID === v.itemID && item.name === v.name && cdsId === v.cdsId;
+                  if (!ccdf_list.some(function (v) {
+                    return item.itemID === v.itemID && item.name === v.name && doorStyle.id === v.doorFinishId;
                   })) {
-                    _cdsItems.push({
+                    ccdf_list.push({
                       itemID: item.itemID,
                       prototype: item.prototype,
                       category: item.category,
                       name: item.name,
                       type: item.type,
                       sku_number: item.sku_number,
-                      cdsId: cdsId
+                      doorFinishId: doorStyle.id
                     });
                   }
                 case 1:
@@ -1462,19 +1467,23 @@ function _handleExternalEvent() {
           _context11.next = 22;
           break;
         case 24:
-          if (_cdsItems.length > 0) {
+          if (ccdf_list.length > 0) {
             (_props$onInternalEven2 = props.onInternalEvent) === null || _props$onInternalEven2 === void 0 || _props$onInternalEven2.call(props, {
               type: _constants.INTERNAL_EVENT_ITEMS_CATALOG,
               value: {
-                cdsItems: _cdsItems
+                ccdf_list: ccdf_list
               }
-            }, /*#__PURE__*/function () {
+            },
+            /*#__PURE__*/
+            // result is ccdf_list
+            function () {
               var _ref4 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee9(result) {
-                var rt, _i3;
+                var mappedCabinetDefinitionList, rt, _i3;
                 return _regenerator["default"].wrap(function (_context1) {
                   while (1) switch (_context1.prev = _context1.next) {
                     case 0:
-                      rt = mergeSameElements(result === null || result === void 0 ? void 0 : result.elements);
+                      mappedCabinetDefinitionList = (0, _ccdfMapper.ccdfMapper)(result.ccdf_list, layer); // result: ccdf_list
+                      rt = mergeSameElements(mappedCabinetDefinitionList);
                       _i3 = 0;
                     case 1:
                       if (!(_i3 < (rt === null || rt === void 0 ? void 0 : rt.length))) {
@@ -1504,7 +1513,7 @@ function _handleExternalEvent() {
           }
           return _context11.abrupt("continue", 49);
         case 25:
-          _evt$payload6 = evt.payload, roomShapeType = _evt$payload6.roomShapeType, width = _evt$payload6.width, height = _evt$payload6.height, measurementUnit = _evt$payload6.measurementUnit, _doorStyle = _evt$payload6.doorStyle;
+          _evt$payload7 = evt.payload, roomShapeType = _evt$payload7.roomShapeType, width = _evt$payload7.width, height = _evt$payload7.height, measurementUnit = _evt$payload7.measurementUnit, _doorStyle = _evt$payload7.doorStyle;
           props.projectActions.createRoomWithShape(roomShapeType, width, height, measurementUnit, _doorStyle);
           return _context11.abrupt("continue", 49);
         case 26:
@@ -1533,7 +1542,7 @@ function _handleExternalEvent() {
           props.projectActions.redo();
           return _context11.abrupt("continue", 49);
         case 31:
-          _evt$payload7 = evt.payload, moldingInfo = _evt$payload7.moldingInfo, isGlobal = _evt$payload7.isGlobal;
+          _evt$payload8 = evt.payload, moldingInfo = _evt$payload8.moldingInfo, isGlobal = _evt$payload8.isGlobal;
           _context11.next = 32;
           return loadMoldingSvg(moldingInfo);
         case 32:
@@ -1548,7 +1557,7 @@ function _handleExternalEvent() {
           if (_distElement) props.projectActions.remove(_distElement);
           return _context11.abrupt("continue", 49);
         case 35:
-          _evt$payload8 = evt.payload, option = _evt$payload8.option, _value2 = _evt$payload8.value;
+          _evt$payload9 = evt.payload, option = _evt$payload9.option, _value2 = _evt$payload9.value;
           _t7 = option;
           _context11.next = _t7 === _constants.PROJECT_SETTING_OPTION.CHANGE_MEASUREMENT_UNIT ? 36 : _t7 === _constants.PROJECT_SETTING_OPTION.UPDATE_CEIL_HEIGHT ? 37 : _t7 === _constants.PROJECT_SETTING_OPTION.CHANGE_WALL_LENGTH_MEASURE ? 38 : _t7 === _constants.PROJECT_SETTING_OPTION.CHANGE_BASE_CABINET_MEASURE ? 39 : _t7 === _constants.PROJECT_SETTING_OPTION.CHANGE_WALL_CABINET_MEASURE ? 40 : _t7 === _constants.PROJECT_SETTING_OPTION.CHANGE_WINDOW_DOOR_MEASURE ? 41 : 42;
           break;
@@ -1589,7 +1598,7 @@ function _handleExternalEvent() {
         case 45:
           _layerID = state.scene.selectedLayer;
           _layer2 = state.scene.getIn(['layers', _layerID]).toJS();
-          orginalItemInfo = evt === null || evt === void 0 || (_evt$payload9 = evt.payload) === null || _evt$payload9 === void 0 ? void 0 : _evt$payload9.orginalItemInfo;
+          orginalItemInfo = evt === null || evt === void 0 || (_evt$payload0 = evt.payload) === null || _evt$payload0 === void 0 ? void 0 : _evt$payload0.orginalItemInfo;
           originalItem = _layer2 === null || _layer2 === void 0 ? void 0 : _layer2.items[orginalItemInfo.id];
           _context11.next = 46;
           return addItemToCatalog(evt.payload.replaceItemInfo, state, props.catalog, props.projectActions);
@@ -1601,10 +1610,10 @@ function _handleExternalEvent() {
             y: originalItem.y
           };
           replaceItem = {
-            name: evt === null || evt === void 0 || (_evt$payload0 = evt.payload) === null || _evt$payload0 === void 0 || (_evt$payload0 = _evt$payload0.replaceItemInfo) === null || _evt$payload0 === void 0 ? void 0 : _evt$payload0.name,
+            name: evt === null || evt === void 0 || (_evt$payload1 = evt.payload) === null || _evt$payload1 === void 0 || (_evt$payload1 = _evt$payload1.replaceItemInfo) === null || _evt$payload1 === void 0 ? void 0 : _evt$payload1.name,
             info: {
-              width: evt === null || evt === void 0 || (_evt$payload1 = evt.payload) === null || _evt$payload1 === void 0 || (_evt$payload1 = _evt$payload1.replaceItemInfo) === null || _evt$payload1 === void 0 || (_evt$payload1 = _evt$payload1.sizeinfo) === null || _evt$payload1 === void 0 ? void 0 : _evt$payload1.width,
-              height: evt === null || evt === void 0 || (_evt$payload10 = evt.payload) === null || _evt$payload10 === void 0 || (_evt$payload10 = _evt$payload10.replaceItemInfo) === null || _evt$payload10 === void 0 || (_evt$payload10 = _evt$payload10.sizeinfo) === null || _evt$payload10 === void 0 ? void 0 : _evt$payload10.height
+              width: evt === null || evt === void 0 || (_evt$payload10 = evt.payload) === null || _evt$payload10 === void 0 || (_evt$payload10 = _evt$payload10.replaceItemInfo) === null || _evt$payload10 === void 0 || (_evt$payload10 = _evt$payload10.sizeinfo) === null || _evt$payload10 === void 0 ? void 0 : _evt$payload10.width,
+              height: evt === null || evt === void 0 || (_evt$payload11 = evt.payload) === null || _evt$payload11 === void 0 || (_evt$payload11 = _evt$payload11.replaceItemInfo) === null || _evt$payload11 === void 0 || (_evt$payload11 = _evt$payload11.sizeinfo) === null || _evt$payload11 === void 0 ? void 0 : _evt$payload11.height
             }
           };
           props.itemsActions.replaceItem(originalItemPos, originalItem, replaceItem);
@@ -1614,7 +1623,8 @@ function _handleExternalEvent() {
           return _context11.abrupt("continue", 49);
         case 48:
           sceneData = state.scene.toJS(); // get molding data for "ReviewForQuote"
-          currentTexture = layer.doorStyle !== null || layer.doorStyle !== undefined ? layer.doorStyle : props.state.doorStyle.toJS();
+          currentTexture = (_layer$doorStyle = layer === null || layer === void 0 ? void 0 : layer.doorStyle) !== null && _layer$doorStyle !== void 0 ? _layer$doorStyle : props.state.doorStyle;
+          if (!(0, _helper.isEmpty)(currentTexture) && _immutable.Map.isMap(currentTexture)) currentTexture = (_currentTexture = currentTexture) === null || _currentTexture === void 0 ? void 0 : _currentTexture.toJS();
           moldingPieceLength = (_props$configData$mol = props === null || props === void 0 || (_props$configData = props.configData) === null || _props$configData === void 0 ? void 0 : _props$configData.moldingPieceLength) !== null && _props$configData$mol !== void 0 ? _props$configData$mol : _constants.DEFAULT_MOLDING_PIECE_LENGTH;
           sceneData.layers[layerId].moldingData = (0, _molding.getMoldingDataOfScene2)(layer, props.catalog, currentTexture, moldingPieceLength);