kitchen-simulator 11.0.0-react.18 → 11.0.0

package/lib/components/viewer2d/ruler.js

@@ -0,0 +1,92 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = Ruler;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _idBroker = _interopRequireDefault(require("../../utils/id-broker"));
+var _constants = require("../../constants");
+var _line = require("./line");
+var _ruler = require("../../utils/ruler");
+var BACKGROUNDSTYLE = {
+  fill: 'transparent',
+  fillOpacity: 0.8
+};
+var STYLE_TEXT = {
+  textAnchor: 'middle',
+  fontSize: '12px',
+  pointerEvents: 'none',
+  fill: '#455A64',
+  //http://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting-using-css
+  WebkitTouchCallout: 'none' /* iOS Safari */,
+  WebkitUserSelect: 'none' /* Chrome/Safari/Opera */,
+  MozUserSelect: 'none' /* Firefox */,
+  MsUserSelect: 'none' /* Internet Explorer/Edge */,
+  userSelect: 'none'
+};
+function Ruler(_ref) {
+  var layer = _ref.layer,
+    length = _ref.length,
+    unit = _ref.unit,
+    rulerUnit = _ref.rulerUnit,
+    transform = _ref.transform,
+    style = _ref.style;
+  var _getRulerDisplayData = (0, _ruler.getRulerDisplayData)({
+      length: length,
+      unit: unit,
+      rulerUnit: rulerUnit,
+      layerUnit: layer.unit
+    }),
+    distanceText = _getRulerDisplayData.distanceText,
+    unitStr = _getRulerDisplayData.unitStr,
+    textLength = _getRulerDisplayData.textLength,
+    bShowText = _getRulerDisplayData.bShowText,
+    bShowLine = _getRulerDisplayData.bShowLine;
+  return /*#__PURE__*/_react["default"].createElement("g", {
+    transform: transform
+  }, bShowText && /*#__PURE__*/_react["default"].createElement("g", {
+    id: "ruler"
+  }, /*#__PURE__*/_react["default"].createElement("rect", {
+    id: "ruler_rect_".concat(_idBroker["default"].acquireID()),
+    style: BACKGROUNDSTYLE,
+    x: length / 2 - textLength / 2,
+    y: "-10",
+    width: textLength,
+    height: "22",
+    rx: "1",
+    ry: "0.39"
+  }), /*#__PURE__*/_react["default"].createElement("text", {
+    x: length / 2,
+    y: "3",
+    transform: "scale(1, -1)",
+    style: STYLE_TEXT,
+    fill: _constants.TEXT_COLOR_NEUTRAL_7
+  }, distanceText, unitStr)), bShowLine && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("line", {
+    x1: style === _line.STYLE_ROOM_SHAPE ? 0 : 4,
+    y1: "0",
+    x2: (length - textLength) / 2 < 0 ? 0 : (length - textLength) / 2,
+    y2: "0",
+    style: style
+  }), /*#__PURE__*/_react["default"].createElement("line", {
+    x1: (length + textLength) / 2 < 0 ? 0 : (length + textLength) / 2 < length ? (length + textLength) / 2 : length,
+    y1: "0",
+    x2: style === _line.STYLE_ROOM_SHAPE ? length : length - 4,
+    y2: "0",
+    style: style
+  }), style !== _line.STYLE_ROOM_SHAPE && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("polygon", {
+    points: "3, 0, 6.5, -2, 6.5, 2 ",
+    style: style
+  }), /*#__PURE__*/_react["default"].createElement("polygon", {
+    points: "".concat(length - 3, ", 0, ").concat(length - 6.5, ", 2, ").concat(length - 6.5, ", -2"),
+    style: style
+  }))));
+}
+Ruler.propTypes = {
+  length: _propTypes["default"].number.isRequired,
+  unit: _propTypes["default"].string.isRequired,
+  transform: _propTypes["default"].string.isRequired
+};
+module.exports = exports.default;

package/lib/components/viewer2d/rulerDist.js

@@ -0,0 +1,110 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = RulerDist;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _ruler = require("../../utils/ruler");
+var STYLE = {
+  stroke: '#455A64',
+  fill: '#455A64',
+  strokeWidth: '1.5px'
+};
+var STYLE_TEXT = {
+  textAnchor: 'middle',
+  fontSize: '10px',
+  pointerEvents: 'none',
+  fill: '#455A64',
+  //http://stackoverflow.com/questions/826782/how-to-disable-text-selection-highlighting-using-css
+  WebkitTouchCallout: 'none' /* iOS Safari */,
+  WebkitUserSelect: 'none' /* Chrome/Safari/Opera */,
+  MozUserSelect: 'none' /* Firefox */,
+  MsUserSelect: 'none' /* Internet Explorer/Edge */,
+  userSelect: 'none'
+};
+function RulerDist(_ref) {
+  var layer = _ref.layer,
+    length = _ref.length,
+    unit = _ref.unit,
+    rulerUnit = _ref.rulerUnit,
+    transform = _ref.transform,
+    angle = _ref.angle,
+    rotation = _ref.rotation;
+  var _getRulerDisplayData = (0, _ruler.getRulerDisplayData)({
+      length: length,
+      unit: unit,
+      rulerUnit: rulerUnit,
+      layerUnit: layer.unit
+    }),
+    distanceText = _getRulerDisplayData.distanceText,
+    unitStr = _getRulerDisplayData.unitStr,
+    textLength = _getRulerDisplayData.textLength,
+    bShowText = _getRulerDisplayData.bShowText,
+    bShowLine = _getRulerDisplayData.bShowLine;
+  var textangle = angle + 90;
+  var textRotation = 1;
+  var ay = 2;
+  var ep = Math.sin(textangle * Math.PI / 180);
+  var es = Math.sin(angle * Math.PI / 180);
+  if (rotation === 180 && ep >= 0) {
+    textRotation = 180;
+    ay = 5;
+  } else if (rotation === 180 && ep <= 0) {
+    textRotation = 0;
+    ay = -3;
+  } else if (rotation === 0 && ep >= 0) {
+    textRotation = 0;
+    ay = -3;
+  } else if (rotation === 0 && ep <= 0) {
+    textRotation = 180;
+    ay = 5;
+  }
+  if (rotation === 90 && es >= 0) {
+    textRotation = 180;
+    ay = 5;
+  } else if (rotation === 90 && es <= 0) {
+    textRotation = 0;
+    ay = -3;
+  } else if (rotation === -90 && es >= 0) {
+    textRotation = 0;
+    ay = -3;
+  } else if (rotation === -90 && es <= 0) {
+    textRotation = 180;
+    ay = 5;
+  }
+  return /*#__PURE__*/_react["default"].createElement("g", {
+    transform: transform
+  }, bShowText && /*#__PURE__*/_react["default"].createElement("g", null, /*#__PURE__*/_react["default"].createElement("text", {
+    x: "0",
+    y: "0",
+    transform: "translate(".concat(length / 2, ",").concat(ay, ") scale(1, -1) rotate(").concat(textRotation, ")"),
+    style: STYLE_TEXT
+  }, distanceText, unitStr)), bShowLine && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("line", {
+    x1: "2",
+    y1: "0",
+    x2: (length - textLength) / 2 < 0 ? 0 : (length - textLength) / 2,
+    y2: "0",
+    style: STYLE
+  }), /*#__PURE__*/_react["default"].createElement("polygon", {
+    points: "1, 0, 4.5, -2, 4.5, 2 ",
+    style: STYLE
+  }), /*#__PURE__*/_react["default"].createElement("line", {
+    x1: (length + textLength) / 2 < 0 ? 0 : (length + textLength) / 2 < length ? (length + textLength) / 2 : length,
+    y1: "0",
+    x2: length,
+    y2: "0",
+    style: STYLE
+  }), /*#__PURE__*/_react["default"].createElement("polygon", {
+    points: "".concat(length - 1, ", 0, ").concat(length - 4.5, ", 2, ").concat(length - 4.5, ", -2"),
+    style: STYLE
+  })));
+}
+RulerDist.propTypes = {
+  length: _propTypes["default"].number.isRequired,
+  unit: _propTypes["default"].string.isRequired,
+  transform: _propTypes["default"].string.isRequired
+};
+module.exports = exports.default;

package/lib/components/viewer2d/rulerX.js

@@ -0,0 +1,154 @@
+"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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+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 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 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 _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 RulerX = exports["default"] = /*#__PURE__*/function (_Component) {
+  function RulerX(props, context) {
+    (0, _classCallCheck2["default"])(this, RulerX);
+    return _callSuper(this, RulerX, [props, context]);
+  }
+  (0, _inherits2["default"])(RulerX, _Component);
+  return (0, _createClass2["default"])(RulerX, [{
+    key: "render",
+    value: function render() {
+      var elementW = this.props.unitPixelSize * this.props.zoom;
+      var elementStyle = {
+        display: 'inline-block',
+        width: elementW,
+        position: 'relative',
+        borderLeft: '1px solid ' + this.props.fontColor,
+        paddingLeft: '0.2em',
+        fontSize: '10px',
+        height: '100%'
+      };
+      var insideElementsStyle = {
+        width: '20%',
+        display: 'inline-block',
+        margin: 0,
+        padding: 0
+      };
+      var rulerStyle = {
+        backgroundColor: this.props.backgroundColor,
+        position: 'relative',
+        width: this.props.width,
+        height: '100%',
+        color: this.props.fontColor
+      };
+      var markerStyle = {
+        position: 'absolute',
+        left: this.props.zeroLeftPosition + this.props.mouseX * this.props.zoom - 6.5,
+        top: 8,
+        width: 0,
+        height: 0,
+        borderLeft: '5px solid transparent',
+        borderRight: '5px solid transparent',
+        borderTop: '8px solid ' + this.props.markerColor,
+        zIndex: 9001
+      };
+      var rulerContainer = {
+        position: 'absolute',
+        height: '10px',
+        top: '4px',
+        display: 'grid',
+        gridRowGap: '0',
+        gridColumnGap: '0',
+        gridTemplateRows: '100%',
+        grdAutoColumns: "".concat(elementW, "px")
+      };
+      var positiveRulerContainer = _objectSpread(_objectSpread({}, rulerContainer), {}, {
+        width: this.props.positiveUnitsNumber * elementW,
+        left: this.props.zeroLeftPosition
+      });
+      var negativeRulerContainer = _objectSpread(_objectSpread({}, rulerContainer), {}, {
+        width: this.props.negativeUnitsNumber * elementW,
+        left: this.props.zeroLeftPosition - this.props.negativeUnitsNumber * elementW
+      });
+      var positiveDomElements = [];
+      if (elementW <= 200) {
+        for (var x = 0; x < this.props.positiveUnitsNumber; x++) {
+          positiveDomElements.push(/*#__PURE__*/_react["default"].createElement("div", {
+            key: x,
+            style: _objectSpread(_objectSpread({}, elementStyle), {}, {
+              gridColumn: x + 1,
+              gridRow: 1
+            })
+          }, elementW > 30 ? x * 100 : ''));
+        }
+      } else if (elementW > 200) {
+        for (var _x = 0; _x < this.props.positiveUnitsNumber; _x++) {
+          var val = _x * 100;
+          positiveDomElements.push(/*#__PURE__*/_react["default"].createElement("div", {
+            key: _x,
+            style: _objectSpread(_objectSpread({}, elementStyle), {}, {
+              gridColumn: _x + 1,
+              gridRow: 1
+            })
+          }, /*#__PURE__*/_react["default"].createElement("div", {
+            style: insideElementsStyle
+          }, val), /*#__PURE__*/_react["default"].createElement("div", {
+            style: insideElementsStyle
+          }, val + 1 * 20), /*#__PURE__*/_react["default"].createElement("div", {
+            style: insideElementsStyle
+          }, val + 2 * 20), /*#__PURE__*/_react["default"].createElement("div", {
+            style: insideElementsStyle
+          }, val + 3 * 20), /*#__PURE__*/_react["default"].createElement("div", {
+            style: insideElementsStyle
+          }, val + 4 * 20)));
+        }
+      }
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        style: rulerStyle
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        id: "horizontalMarker",
+        style: markerStyle
+      }), /*#__PURE__*/_react["default"].createElement("div", {
+        id: "negativeRuler",
+        style: negativeRulerContainer
+      }), /*#__PURE__*/_react["default"].createElement("div", {
+        id: "positiveRuler",
+        style: positiveRulerContainer
+      }, positiveDomElements));
+    }
+  }]);
+}(_react.Component);
+RulerX.propTypes = {
+  unitPixelSize: _propTypes["default"].number.isRequired,
+  positiveUnitsNumber: _propTypes["default"].number,
+  negativeUnitsNumber: _propTypes["default"].number,
+  zoom: _propTypes["default"].number.isRequired,
+  mouseX: _propTypes["default"].number.isRequired,
+  width: _propTypes["default"].number.isRequired,
+  zeroLeftPosition: _propTypes["default"].number.isRequired,
+  backgroundColor: _propTypes["default"].string,
+  fontColor: _propTypes["default"].string,
+  markerColor: _propTypes["default"].string
+};
+RulerX.defaultProps = {
+  positiveUnitsNumber: 50,
+  negativeUnitsNumber: 50,
+  backgroundColor: SharedStyle.PRIMARY_COLOR.main,
+  fontColor: SharedStyle.COLORS.white,
+  markerColor: SharedStyle.SECONDARY_COLOR.main
+};
+RulerX.contextTypes = {
+  translator: _propTypes["default"].object.isRequired
+};
+module.exports = exports.default;

package/lib/components/viewer2d/rulerY.js

@@ -0,0 +1,156 @@
+"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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+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 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 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 _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 RulerY = exports["default"] = /*#__PURE__*/function (_Component) {
+  function RulerY(props, context) {
+    (0, _classCallCheck2["default"])(this, RulerY);
+    return _callSuper(this, RulerY, [props, context]);
+  }
+  (0, _inherits2["default"])(RulerY, _Component);
+  return (0, _createClass2["default"])(RulerY, [{
+    key: "render",
+    value: function render() {
+      var elementH = this.props.unitPixelSize * this.props.zoom;
+      var elementStyle = {
+        width: '8px',
+        borderBottom: '1px solid ' + this.props.fontColor,
+        paddingBottom: '0.2em',
+        fontSize: '10px',
+        height: elementH,
+        textOrientation: 'upright',
+        writingMode: 'vertical-lr',
+        letterSpacing: '-2px',
+        textAlign: 'right'
+      };
+      var insideElementsStyle = {
+        height: '20%',
+        width: '100%',
+        textOrientation: 'upright',
+        writingMode: 'vertical-lr',
+        display: 'inline-block',
+        letterSpacing: '-2px',
+        textAlign: 'right'
+      };
+      var rulerStyle = {
+        backgroundColor: this.props.backgroundColor,
+        height: this.props.height,
+        width: '100%',
+        color: this.props.fontColor
+      };
+      var markerStyle = {
+        position: 'absolute',
+        top: this.props.zeroTopPosition - this.props.mouseY * this.props.zoom - 6.5,
+        left: 8,
+        width: 0,
+        height: 0,
+        borderTop: '5px solid transparent',
+        borderBottom: '5px solid transparent',
+        borderLeft: '8px solid ' + this.props.markerColor,
+        zIndex: 9001
+      };
+      var rulerContainer = {
+        position: 'absolute',
+        width: '100%',
+        display: 'grid',
+        gridRowGap: '0',
+        gridColumnGap: '0',
+        gridTemplateColumns: '100%',
+        grdAutoRows: "".concat(elementH, "px"),
+        paddingLeft: '5px'
+      };
+      var positiveRulerContainer = _objectSpread(_objectSpread({}, rulerContainer), {}, {
+        top: this.props.zeroTopPosition - this.props.positiveUnitsNumber * elementH,
+        height: this.props.positiveUnitsNumber * elementH
+      });
+      var negativeRulerContainer = _objectSpread(_objectSpread({}, rulerContainer), {}, {
+        top: this.props.zeroTopPosition + this.props.negativeUnitsNumber * elementH,
+        height: this.props.negativeUnitsNumber * elementH
+      });
+      var positiveDomElements = [];
+      if (elementH <= 200) {
+        for (var x = 1; x <= this.props.positiveUnitsNumber; x++) {
+          positiveDomElements.push(/*#__PURE__*/_react["default"].createElement("div", {
+            key: x,
+            style: _objectSpread(_objectSpread({}, elementStyle), {}, {
+              gridColumn: 1,
+              gridRow: x
+            })
+          }, elementH > 30 ? (this.props.positiveUnitsNumber - x) * 100 : ''));
+        }
+      } else if (elementH > 200) {
+        for (var _x = 1; _x <= this.props.positiveUnitsNumber; _x++) {
+          var val = (this.props.positiveUnitsNumber - _x) * 100;
+          positiveDomElements.push(/*#__PURE__*/_react["default"].createElement("div", {
+            key: _x,
+            style: _objectSpread(_objectSpread({}, elementStyle), {}, {
+              gridColumn: 1,
+              gridRow: _x
+            })
+          }, /*#__PURE__*/_react["default"].createElement("div", {
+            style: insideElementsStyle
+          }, val + 4 * 20), /*#__PURE__*/_react["default"].createElement("div", {
+            style: insideElementsStyle
+          }, val + 3 * 20), /*#__PURE__*/_react["default"].createElement("div", {
+            style: insideElementsStyle
+          }, val + 2 * 20), /*#__PURE__*/_react["default"].createElement("div", {
+            style: insideElementsStyle
+          }, val + 1 * 20), /*#__PURE__*/_react["default"].createElement("div", {
+            style: insideElementsStyle
+          }, val)));
+        }
+      }
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        style: rulerStyle
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        id: "verticalMarker",
+        style: markerStyle
+      }), /*#__PURE__*/_react["default"].createElement("div", {
+        id: "negativeRuler",
+        style: negativeRulerContainer
+      }), /*#__PURE__*/_react["default"].createElement("div", {
+        id: "positiveRuler",
+        style: positiveRulerContainer
+      }, positiveDomElements));
+    }
+  }]);
+}(_react.Component);
+RulerY.propTypes = {
+  unitPixelSize: _propTypes["default"].number.isRequired,
+  zoom: _propTypes["default"].number.isRequired,
+  mouseY: _propTypes["default"].number.isRequired,
+  height: _propTypes["default"].number.isRequired,
+  zeroTopPosition: _propTypes["default"].number.isRequired,
+  backgroundColor: _propTypes["default"].string,
+  fontColor: _propTypes["default"].string,
+  markerColor: _propTypes["default"].string
+};
+RulerY.defaultProps = {
+  positiveUnitsNumber: 50,
+  negativeUnitsNumber: 50,
+  backgroundColor: SharedStyle.PRIMARY_COLOR.main,
+  fontColor: SharedStyle.COLORS.white,
+  markerColor: SharedStyle.SECONDARY_COLOR.main
+};
+RulerY.contextTypes = {
+  translator: _propTypes["default"].object.isRequired
+};
+module.exports = exports.default;

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;