kitchen-simulator 2.0.0 → 2.0.1-dot-color

package/lib/components/viewer2d/scene.js

@@ -0,0 +1,137 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+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 _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _export = require("./export");
+var _utils = require("./utils");
+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 _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; })(); }
+var Scene = exports["default"] = /*#__PURE__*/function (_Component) {
+  function Scene() {
+    (0, _classCallCheck2["default"])(this, Scene);
+    return _callSuper(this, Scene, arguments);
+  }
+  (0, _inherits2["default"])(Scene, _Component);
+  return (0, _createClass2["default"])(Scene, [{
+    key: "componentWillReceiveProps",
+    value: function () {
+      var _componentWillReceiveProps = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee(nextProps) {
+        var scene, catalog, height, layers, selectedLayer, msg, isNotFoundInElements, itemType;
+        return _regenerator["default"].wrap(function (_context) {
+          while (1) switch (_context.prev = _context.next) {
+            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;
+                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:
+            case "end":
+              return _context.stop();
+          }
+        }, _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 = (0, _slicedToArray2["default"])(_ref, 2),
+          layerID = _ref2[0],
+          layer = _ref2[1];
+        return layerID !== scene.selectedLayer && layer.visible;
+      }).map(function (_ref3) {
+        var _ref4 = (0, _slicedToArray2["default"])(_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
+};
+module.exports = exports.default;

package/lib/components/viewer2d/snap.js

@@ -0,0 +1,84 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+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); }
+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
+};
+module.exports = exports.default;

package/lib/components/viewer2d/state.js

@@ -0,0 +1,83 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = State;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+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); }
+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 = (0, _slicedToArray2["default"])(_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 = (0, _slicedToArray2["default"])(_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
+};
+module.exports = exports.default;

package/lib/components/viewer2d/utils.js

@@ -0,0 +1,200 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+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 _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _helper = require("../../utils/helper");
+var _constants = require("../../constants");
+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 || (0, _typeof2["default"])(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;
+};
+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((0, _toConsumableArray2["default"])(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,75 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+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); }
+//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
+};
+module.exports = exports.default;