kitchen-simulator 1.1.1-test.49 → 1.1.1-test.50

package/lib/components/viewer2d/scene.js

@@ -0,0 +1,147 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _export = require("./export");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+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 _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+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 _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+function _regenerator() { /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */ var e, t, r = "function" == typeof Symbol ? Symbol : {}, n = r.iterator || "@@iterator", o = r.toStringTag || "@@toStringTag"; function i(r, n, o, i) { var c = n && n.prototype instanceof Generator ? n : Generator, u = Object.create(c.prototype); return _regeneratorDefine2(u, "_invoke", function (r, n, o) { var i, c, u, f = 0, p = o || [], y = !1, G = { p: 0, n: 0, v: e, a: d, f: d.bind(e, 4), d: function d(t, r) { return i = t, c = 0, u = e, G.n = r, a; } }; function d(r, n) { for (c = r, u = n, t = 0; !y && f && !o && t < p.length; t++) { var o, i = p[t], d = G.p, l = i[2]; r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0)); } if (o || r > 1) return a; throw y = !0, n; } return function (o, p, l) { if (f > 1) throw TypeError("Generator is already running"); for (y && 1 === p && d(p, l), c = p, u = l; (t = c < 2 ? e : u) || !y;) { i || (c ? c < 3 ? (c > 1 && (G.n = -1), d(c, u)) : G.n = u : G.v = u); try { if (f = 2, i) { if (c || (o = "next"), t = i[o]) { if (!(t = t.call(i, u))) throw TypeError("iterator result is not an object"); if (!t.done) return t; u = t.value, c < 2 && (c = 0); } else 1 === c && (t = i["return"]) && t.call(i), c < 2 && (u = TypeError("The iterator does not provide a '" + o + "' method"), c = 1); i = e; } else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break; } catch (t) { i = e, c = 1, u = t; } finally { f = 1; } } return { value: t, done: y }; }; }(r, o, i), !0), u; } var a = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} t = Object.getPrototypeOf; var c = [][n] ? t(t([][n]())) : (_regeneratorDefine2(t = {}, n, function () { return this; }), t), u = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(c); function f(e) { return Object.setPrototypeOf ? Object.setPrototypeOf(e, GeneratorFunctionPrototype) : (e.__proto__ = GeneratorFunctionPrototype, _regeneratorDefine2(e, o, "GeneratorFunction")), e.prototype = Object.create(u), e; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, _regeneratorDefine2(u, "constructor", GeneratorFunctionPrototype), _regeneratorDefine2(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = "GeneratorFunction", _regeneratorDefine2(GeneratorFunctionPrototype, o, "GeneratorFunction"), _regeneratorDefine2(u), _regeneratorDefine2(u, o, "Generator"), _regeneratorDefine2(u, n, function () { return this; }), _regeneratorDefine2(u, "toString", function () { return "[object Generator]"; }), (_regenerator = function _regenerator() { return { w: i, m: f }; })(); }
+function _regeneratorDefine2(e, r, n, t) { var i = Object.defineProperty; try { i({}, "", {}); } catch (e) { i = 0; } _regeneratorDefine2 = function _regeneratorDefine(e, r, n, t) { function o(r, n) { _regeneratorDefine2(e, r, function (e) { return this._invoke(r, n, e); }); } r ? i ? i(e, r, { value: n, enumerable: !t, configurable: !t, writable: !t }) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2)); }, _regeneratorDefine2(e, r, n, t); }
+function asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }
+function _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, "next", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, "throw", n); } _next(void 0); }); }; }
+function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
+function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
+function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _possibleConstructorReturn(t, e) { if (e && ("object" == _typeof(e) || "function" == typeof e)) return e; if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t); }
+function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
+function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
+function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
+var Scene = exports["default"] = /*#__PURE__*/function (_Component) {
+  function Scene() {
+    _classCallCheck(this, Scene);
+    return _callSuper(this, Scene, arguments);
+  }
+  _inherits(Scene, _Component);
+  return _createClass(Scene, [{
+    key: "componentWillReceiveProps",
+    value: function () {
+      var _componentWillReceiveProps = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(nextProps) {
+        var scene, catalog, height, layers, selectedLayer, msg, isNotFoundInElements, itemType;
+        return _regenerator().w(function (_context) {
+          while (1) switch (_context.n) {
+            case 0:
+              // console.log("componentDidMount", this.props.scene.hashCode(), nextProps.scene.hashCode());
+              if (this.props.scene.hashCode() !== nextProps.scene.hashCode()) {
+                scene = nextProps.scene, catalog = nextProps.catalog;
+                height = scene.height, layers = scene.layers;
+                console.log(layers.toJS());
+                selectedLayer = layers.get(scene.selectedLayer);
+                msg = '';
+                isNotFoundInElements = false;
+                itemType = '';
+                selectedLayer.items.valueSeq().forEach(function (item) {
+                  if (!catalog.elements.hasOwnProperty(item.type)) {
+                    itemType = item.type;
+                    isNotFoundInElements = true;
+                  }
+                });
+                // if(isNotFoundInElements){
+                //   const deepSearchResult = await searchForSkuValue(catalog, selectedLayer, itemType)
+                //   if(!deepSearchResult.isAvailable){
+                //     msg += (`Element ${itemType} does not exist in catalog.\n`);
+                //   }
+                // }
+
+                // if(msg !== '') {
+                //   msg += `Do you want to initialize?`;
+                //   confirm(msg)
+                //   ? this.context.projectActions.newProject()
+                //   : null
+                // }
+              }
+            case 1:
+              return _context.a(2);
+          }
+        }, _callee, this);
+      }));
+      function componentWillReceiveProps(_x) {
+        return _componentWillReceiveProps.apply(this, arguments);
+      }
+      return componentWillReceiveProps;
+    }()
+  }, {
+    key: "shouldComponentUpdate",
+    value: function shouldComponentUpdate(nextProps, nextState) {
+      return this.props.scene.hashCode() !== nextProps.scene.hashCode();
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this = this;
+      // console.log("scene", this);
+      var _this$props = this.props,
+        scene = _this$props.scene,
+        catalog = _this$props.catalog;
+      var height = scene.height,
+        layers = scene.layers;
+      var selectedLayer = layers.get(scene.selectedLayer);
+      return /*#__PURE__*/_react["default"].createElement("g", null, /*#__PURE__*/_react["default"].createElement(_export.Grids, {
+        scene: scene
+      }), /*#__PURE__*/_react["default"].createElement("g", {
+        style: {
+          pointerEvents: 'none'
+        }
+      }, layers.entrySeq().filter(function (_ref) {
+        var _ref2 = _slicedToArray(_ref, 2),
+          layerID = _ref2[0],
+          layer = _ref2[1];
+        return layerID !== scene.selectedLayer && layer.visible;
+      }).map(function (_ref3) {
+        var _ref4 = _slicedToArray(_ref3, 2),
+          layerID = _ref4[0],
+          layer = _ref4[1];
+        return /*#__PURE__*/_react["default"].createElement(_export.Layer, {
+          key: layerID,
+          layer: layer,
+          scene: scene,
+          catalog: catalog,
+          mode: _this.props.state.mode,
+          state: _this.props.state,
+          relatedLines: _this.props.relatedLines
+        });
+      })), /*#__PURE__*/_react["default"].createElement(_export.Layer, {
+        key: selectedLayer.id,
+        layer: selectedLayer,
+        scene: scene,
+        catalog: catalog,
+        mode: this.props.state.mode,
+        state: this.props.state,
+        relatedLines: this.props.relatedLines
+      }));
+    }
+  }]);
+}(_react.Component);
+Scene.propTypes = {
+  scene: _propTypes["default"].object.isRequired,
+  catalog: _propTypes["default"].object.isRequired,
+  relatedLines: _propTypes["default"].object.isRequired
+};
+Scene.contextTypes = {
+  projectActions: _propTypes["default"].object.isRequired
+};

package/lib/components/viewer2d/snap.js

@@ -0,0 +1,83 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = ActiveDrawingHelper;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var Geometry = _interopRequireWildcard(require("../../utils/geometry"));
+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 _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var STYLE = {
+  stroke: '#D32F2F',
+  strokeWidth: '1px'
+};
+function ActiveDrawingHelper(_ref) {
+  var snap = _ref.snap,
+    width = _ref.width,
+    height = _ref.height;
+  switch (snap.type) {
+    case 'point':
+      return /*#__PURE__*/_react["default"].createElement("g", {
+        transform: "translate(".concat(snap.x, " ").concat(snap.y, ")")
+      }, /*#__PURE__*/_react["default"].createElement("line", {
+        name: "line_type_ActiveDrawingHelper",
+        x1: "0",
+        y1: "-70",
+        x2: "0",
+        y2: "70",
+        style: STYLE
+      }), /*#__PURE__*/_react["default"].createElement("line", {
+        name: "line_type_ActiveDrawingHelper",
+        x1: "-70",
+        y1: "0",
+        x2: "70",
+        y2: "0",
+        style: STYLE
+      }));
+    case 'line':
+      var h0 = Geometry.horizontalLine(0);
+      var h1 = Geometry.horizontalLine(height);
+      var pointH0 = Geometry.twoLinesIntersection(snap.a, snap.b, snap.c, h0.a, h0.b, h0.c);
+      var pointH1 = Geometry.twoLinesIntersection(snap.a, snap.b, snap.c, h1.a, h1.b, h1.c);
+      var v0 = Geometry.verticalLine(0);
+      var v1 = Geometry.verticalLine(width);
+      var pointV0 = Geometry.twoLinesIntersection(snap.a, snap.b, snap.c, v0.a, v0.b, v0.c);
+      var pointV1 = Geometry.twoLinesIntersection(snap.a, snap.b, snap.c, v1.a, v1.b, v1.c);
+      if (pointH0 && pointH1) return /*#__PURE__*/_react["default"].createElement("line", {
+        name: "line_type_ActiveDrawingHelper",
+        x1: pointH0.x,
+        y1: pointH0.y,
+        x2: pointH1.x,
+        y2: pointH1.y,
+        style: STYLE
+      });
+      if (pointV0 && pointV1) return /*#__PURE__*/_react["default"].createElement("line", {
+        name: "line_type_ActiveDrawingHelper",
+        x1: pointV0.x,
+        y1: pointV0.y,
+        x2: pointV1.x,
+        y2: pointV1.y,
+        style: STYLE
+      });
+      return null;
+    case 'line-segment':
+      return /*#__PURE__*/_react["default"].createElement("line", {
+        name: "line_type_ActiveDrawingHelper",
+        x1: snap.x1,
+        y1: snap.y1,
+        x2: snap.x2,
+        y2: snap.y2,
+        style: STYLE
+      });
+    default:
+      return null;
+  }
+}
+ActiveDrawingHelper.propTypes = {
+  snap: _propTypes["default"].object.isRequired,
+  width: _propTypes["default"].number.isRequired,
+  height: _propTypes["default"].number.isRequired
+};

package/lib/components/viewer2d/state.js

@@ -0,0 +1,87 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = State;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _scene = _interopRequireDefault(require("./scene"));
+var _snap = _interopRequireDefault(require("./snap"));
+var SharedStyle = _interopRequireWildcard(require("../../shared-style"));
+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 _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+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 _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+var guideStyle = {
+  stroke: SharedStyle.SECONDARY_COLOR.main,
+  strokewidth: '2.5px'
+};
+function State(_ref) {
+  var state = _ref.state,
+    catalog = _ref.catalog,
+    relatedLines = _ref.relatedLines;
+  var activeSnapElement = state.activeSnapElement,
+    snapElements = state.snapElements,
+    scene = state.scene;
+  var width = scene.width,
+    height = scene.height;
+  activeSnapElement = activeSnapElement ? /*#__PURE__*/_react["default"].createElement(_snap["default"], {
+    snap: activeSnapElement,
+    width: scene.width,
+    height: scene.height
+  }) : null;
+  // snapElements = snapElements.map((snap,id) => <Snap key={id} snap={snap} width={scene.width} height={scene.height}/>);
+  snapElements = null; //only for debug purpose
+
+  return /*#__PURE__*/_react["default"].createElement("g", null, /*#__PURE__*/_react["default"].createElement("rect", {
+    x: "0",
+    y: "0",
+    width: width,
+    height: height,
+    fill: SharedStyle.COLORS.white
+  }), /*#__PURE__*/_react["default"].createElement("g", {
+    transform: "translate(0, ".concat(scene.height, ") scale(1, -1)"),
+    id: "svg-drawing-paper"
+  }, /*#__PURE__*/_react["default"].createElement(_scene["default"], {
+    scene: scene,
+    state: state,
+    catalog: catalog,
+    relatedLines: relatedLines
+  }), scene.getIn(['guides', 'horizontal']).entrySeq().map(function (_ref2) {
+    var _ref3 = _slicedToArray(_ref2, 2),
+      hgKey = _ref3[0],
+      hgVal = _ref3[1];
+    return /*#__PURE__*/_react["default"].createElement("line", {
+      id: 'hGuide' + hgKey,
+      key: hgKey,
+      x1: 0,
+      y1: hgVal,
+      x2: width,
+      y2: hgVal,
+      style: guideStyle
+    });
+  }), scene.getIn(['guides', 'vertical']).entrySeq().map(function (_ref4) {
+    var _ref5 = _slicedToArray(_ref4, 2),
+      vgKey = _ref5[0],
+      vgVal = _ref5[1];
+    return /*#__PURE__*/_react["default"].createElement("line", {
+      key: vgKey,
+      x1: vgVal,
+      y1: 0,
+      x2: vgVal,
+      y2: height,
+      style: guideStyle
+    });
+  }), activeSnapElement, snapElements));
+}
+State.propTypes = {
+  state: _propTypes["default"].object.isRequired,
+  catalog: _propTypes["default"].object.isRequired,
+  relatedLines: _propTypes["default"].object.isRequired
+};

package/lib/components/viewer2d/utils.js

@@ -0,0 +1,210 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.areaPolygon = void 0;
+exports.getInstallationSuffix = getInstallationSuffix;
+exports.getToeKickSKU = void 0;
+exports.isEmpty = isEmpty;
+exports.isEqualInstallationType = isEqualInstallationType;
+exports.makeSKUForMagento = makeSKUForMagento;
+exports.searchForSkuValue = exports.returnReplaceableDeepSearchType = void 0;
+var _helper = require("../../utils/helper");
+var _constants = require("../../constants");
+function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+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 _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+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 _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var searchForSkuValue = exports.searchForSkuValue = function searchForSkuValue(catalog, selectedLayer, elementType) {
+  return new Promise(function (resolve) {
+    if (elementType) {
+      Object.values(catalog.elements).forEach(function (value) {
+        if (value.obj && value.obj.skuArray) {
+          if (value.obj.skuArray.find(function (skItem) {
+            return skItem.sku === elementType;
+          })) {
+            saveDeepSearchType(elementType, value.name);
+            resolve({
+              isAvailable: true,
+              rootType: value.name
+            });
+          }
+        }
+      });
+    } else {
+      selectedLayer.items.valueSeq().forEach(function (item) {
+        Object.values(catalog.elements).forEach(function (value) {
+          if (value.obj && value.obj.skuArray) {
+            if (value.obj.skuArray.find(function (skItem) {
+              return skItem.sku === item.type;
+            })) {
+              resolve({
+                isAvailable: true,
+                rootType: value.name
+              });
+            }
+          }
+        });
+      });
+    }
+    resolve({
+      isAvailable: false
+    });
+  });
+};
+var returnReplaceableDeepSearchType = exports.returnReplaceableDeepSearchType = function returnReplaceableDeepSearchType(type) {
+  var DeepSearchTypes = JSON.parse(sessionStorage.getItem('deepSearchTypes')) || [];
+  var replaceableType = DeepSearchTypes.find(function (item) {
+    return item.type === type;
+  });
+  return replaceableType && replaceableType.foundType || '';
+};
+function getInstallationSuffix(type) {
+  var _doorColor$isAssemble, _doorColor$install;
+  var doorColor = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  if (!doorColor) {
+    console.error('getInstallationSuffix received false argument : ', doorColor);
+    return doorColor;
+  }
+  doorColor = (0, _helper.toPlainObject)(doorColor);
+
+  // If doorColor.isAssembled is explicitly set → trust it.
+  // Else → fall back to checking install.
+  var isAssembled = (_doorColor$isAssemble = doorColor.isAssembled) !== null && _doorColor$isAssemble !== void 0 ? _doorColor$isAssemble : ((_doorColor$install = doorColor.install) === null || _doorColor$install === void 0 ? void 0 : _doorColor$install.toLowerCase()) === _constants.INSTALLATION_TYPE_NAME.ASSEMBLED.toLowerCase();
+  if (type === _constants.INSTALLATION_SUFFIX_TYPE.SKU) {
+    return isAssembled ? _constants.INSTALLATION_TYPE_SKU_SUFFIX.ASSEMBLED : _constants.INSTALLATION_TYPE_SKU_SUFFIX.RTA;
+  } else {
+    return isAssembled ? _constants.INSTALLATION_TYPE_NAME.ASSEMBLED : _constants.INSTALLATION_TYPE_NAME.RTA;
+  }
+}
+function isEqualInstallationType(doorColor1, doorColor2) {
+  var _getInstallationSuffi, _getInstallationSuffi2;
+  return ((_getInstallationSuffi = getInstallationSuffix(_constants.INSTALLATION_SUFFIX_TYPE.NAME, doorColor1)) === null || _getInstallationSuffi === void 0 ? void 0 : _getInstallationSuffi.toLowerCase()) === ((_getInstallationSuffi2 = getInstallationSuffix(_constants.INSTALLATION_SUFFIX_TYPE.NAME, doorColor2)) === null || _getInstallationSuffi2 === void 0 ? void 0 : _getInstallationSuffi2.toLowerCase());
+}
+function buildSKU(baseSKU) {
+  var doorColor = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var colorSuffix = doorColor.color_sku_alias || doorColor.sku || '';
+  var installationSuffix = getInstallationSuffix(_constants.INSTALLATION_SUFFIX_TYPE.SKU, doorColor);
+  return [baseSKU, colorSuffix, installationSuffix].filter(Boolean).join('-');
+}
+function buildToeKickSKU() {
+  var doorColor = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var catalog = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  // Base toe kick SKU (can be swapped between ['TKC', 'TK8', 'TK96'])
+  var baseSKU = getToeKickSKU(doorColor, catalog);
+  if (baseSKU === false) return false;
+  return buildSKU(baseSKU, doorColor);
+}
+function buildRegularSKU(element, catalog) {
+  var _internal_sku;
+  var doorColor = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  // Try to resolve element in catalog
+  var _element = catalog.elements[element.type] || catalog.elements[returnReplaceableDeepSearchType(element.type)];
+  if (!_element) return false;
+
+  // Start from default SKU
+  var internal_sku = _element.obj.sku_number;
+
+  // Override with SKU matching door color if found
+  var tempSKU = _element.obj.skuArray.find(function (el) {
+    return el.door_color_id === doorColor.id;
+  });
+  if (tempSKU !== null && tempSKU !== void 0 && tempSKU.sku) {
+    internal_sku = tempSKU.sku;
+  }
+
+  // Normalize left/right variants
+  internal_sku = (_internal_sku = internal_sku) === null || _internal_sku === void 0 ? void 0 : _internal_sku.replace(/-([RL])$/, '');
+
+  // Reuse generic builder for suffixes
+  return buildSKU(internal_sku, doorColor);
+}
+
+// element : cabinet
+// catalog : all cabinet info
+function makeSKUForMagento(element, catalog, categoryData) {
+  var _element$category;
+  if ((_element$category = element.category) !== null && _element$category !== void 0 && _element$category.toLowerCase().includes('molding')) {
+    element.type = element.name;
+  }
+  var doorColor = (0, _helper.toPlainObject)(element.doorStyle);
+  if (!doorColor) return false;
+  return element.name === _constants.TOE_KICK_MOLDING ? buildToeKickSKU(doorColor, catalog) : buildRegularSKU(element, catalog, doorColor);
+}
+function isEmpty(value) {
+  if (value === undefined || value === null || _typeof(value) === 'object' && Object.keys(value).length === 0 || typeof value === 'string' && value.trim().length === 0) return true;else return false;
+}
+var saveDeepSearchType = function saveDeepSearchType(type, foundType) {
+  var DeepSearchTypes = JSON.parse(sessionStorage.getItem('deepSearchTypes')) || [];
+  var isAlreadyAvailable = DeepSearchTypes.find(function (item) {
+    return item.type === type;
+  });
+  if (!isAlreadyAvailable) {
+    DeepSearchTypes.push({
+      type: type,
+      foundType: foundType
+    });
+  }
+  sessionStorage.setItem('deepSearchTypes', JSON.stringify(DeepSearchTypes));
+};
+
+/**
+ * @param {Boolean} flag true: for thumbnail, false: default value
+ * @returns
+ */
+var getToeKickSKU = exports.getToeKickSKU = function getToeKickSKU() {
+  var doorColor = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var catalog = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var flag = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  var catalogData = catalog.elements || [];
+  var itemDoorColorID = (doorColor === null || doorColor === void 0 ? void 0 : doorColor.id) || [];
+  var skuData = '';
+  Object.keys(catalogData).forEach(function (data) {
+    var obj = catalogData[data].obj;
+    if ((obj === null || obj === void 0 ? void 0 : obj.cabinet_category) === _constants.TOE_KICK_MOLDING) {
+      var _obj$skuArray;
+      var found = (_obj$skuArray = obj.skuArray) === null || _obj$skuArray === void 0 ? void 0 : _obj$skuArray.find(function (cData) {
+        return cData.door_color_id === itemDoorColorID;
+      });
+      if (found) {
+        skuData = flag ? data : found === null || found === void 0 ? void 0 : found.sku;
+      }
+    }
+  });
+  if (!skuData) return false;
+  return skuData;
+};
+
+// ESM version of "area-polygon" with default + named export.
+// Same behavior: takes an array of [x,y] tuples or {x,y} objects.
+// If `signed` is truthy, returns signed area; otherwise absolute area.
+// Does not mutate the input array.
+
+function normalize(point) {
+  if (Array.isArray(point)) {
+    return {
+      x: point[0],
+      y: point[1]
+    };
+  }
+  return point;
+}
+var areaPolygon = exports.areaPolygon = function areaPolygon(points) {
+  var signed = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  if (!Array.isArray(points) || points.length < 3) return 0;
+
+  // normalize and ensure closed ring (without mutating input)
+  var pts = points.map(normalize);
+  var closed = pts.length > 0 && (pts[0].x !== pts[pts.length - 1].x || pts[0].y !== pts[pts.length - 1].y) ? [].concat(_toConsumableArray(pts), [pts[0]]) : pts;
+  var det = 0;
+  var l = closed.length - 1; // last index before the duplicated first point
+  for (var i = 0; i < l; i++) {
+    det += closed[i].x * closed[i + 1].y - closed[i].y * closed[i + 1].x;
+  }
+  var area = det / 2;
+  return signed ? area : Math.abs(area);
+};

package/lib/components/viewer2d/vertex.js

@@ -0,0 +1,74 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = Vertex;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var SharedStyle = _interopRequireWildcard(require("../../shared-style"));
+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 _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+//Space from the center of the point(Use cases:x - vertexthickness,y + vertexthickness )
+var vertexthickness = 4;
+var STYLE = {
+  // strokeWidth: 5,
+  strokeLinejoin: 'round',
+  rx: '2px',
+  stroke: SharedStyle.LINE_MESH_COLOR.selected,
+  fill: SharedStyle.LINE_MESH_COLOR.selected,
+  cursor: 'move'
+};
+function Vertex(_ref) {
+  var vertex = _ref.vertex,
+    layer = _ref.layer;
+  var x = vertex.x,
+    y = vertex.y;
+  var relatedVertice = {
+    x: x,
+    y: y
+  };
+  if (vertex.lines.get(0)) {
+    var line = layer.lines.get(vertex.lines.get(0));
+    if (layer.lines.get(vertex.lines.get(1)) !== undefined && layer.lines.get(vertex.lines.get(1)).get('selected')) {
+      line = layer.lines.get(vertex.lines.get(1));
+    }
+    if (line) {
+      var index = line.vertices.findIndex(function (a) {
+        return a === vertex.id;
+      });
+      if (index > -1) {
+        var vertice = line.relatedVertices.filter(function (a) {
+          if (a['index'] === undefined) {
+            return a.get('index') === index;
+          } else if (a['index'] !== undefined) {
+            return a.index === index;
+          }
+        }).get(0);
+        if (vertice && !vertice['point']) {
+          relatedVertice = {
+            x: vertice.get('point').get('x'),
+            y: vertice.get('point').get('y')
+          };
+        } else if (vertice !== undefined) {
+          relatedVertice = vertice['point'];
+        }
+      }
+    }
+  }
+  return /*#__PURE__*/_react["default"].createElement("g", {
+    "data-element-root": true,
+    "data-prototype": vertex.prototype,
+    "data-id": vertex.id,
+    "data-selected": vertex.selected,
+    "data-layer": layer.id
+  }, /*#__PURE__*/_react["default"].createElement("polygon", {
+    points: "".concat(x - vertexthickness, ",").concat(y + vertexthickness, " ").concat(x - vertexthickness, ",").concat(y - vertexthickness, " ").concat(x + vertexthickness, ",").concat(y - vertexthickness, " ").concat(x + vertexthickness, ",").concat(y + vertexthickness),
+    style: STYLE
+  }));
+}
+Vertex.propTypes = {
+  vertex: _propTypes["default"].object.isRequired,
+  layer: _propTypes["default"].object.isRequired
+};