kitchen-simulator 11.0.0-react.18 → 11.0.0

package/lib/components/viewer3d/ruler-utils/ruler3D.js

@@ -0,0 +1,232 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = Ruler3D;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _constants = require("../../../constants");
+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 Ruler3D(_ref) {
+  var layer = _ref.layer,
+    line = _ref.line,
+    viewScale = _ref.viewScale,
+    downloadFlag = _ref.downloadFlag;
+  var diagonalPointValue = 5 * viewScale;
+  var STYLE = {
+    stroke: _constants.TEXT_COLOR_NEUTRAL_6,
+    strokeWidth: viewScale,
+    opacity: '0.6'
+  };
+  var STYLE_TEXT = {
+    textAnchor: 'middle',
+    fontSize: downloadFlag ? 32 * viewScale : 16 * viewScale,
+    // fontWeight: "bold",
+    pointerEvents: 'none',
+    fill: _constants.TEXT_COLOR_NEUTRAL_6,
+    //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'
+  };
+  var getDistance = function getDistance(v0, v1) {
+    return Math.sqrt((v0.x - v1.x) * (v0.x - v1.x) + (v0.y - v1.y) * (v0.y - v1.y));
+  };
+  var v0 = line.v0,
+    v1 = line.v1,
+    space = line.space;
+  var text = line.text.endsWith('.0') ? line.text.slice(0, line.text.length - 2) : line.text;
+  var length = getDistance(v0, v1);
+  var textLength = (text.length + layer.unit.length) * 18 * viewScale;
+  if (v0.y === v1.y) {
+    if (v0.x < v1.x) {
+      return /*#__PURE__*/_react["default"].createElement("g", null, /*#__PURE__*/_react["default"].createElement("line", {
+        x1: v0.x,
+        y1: v0.y,
+        x2: v0.x,
+        y2: v0.y - space,
+        style: STYLE
+      }), /*#__PURE__*/_react["default"].createElement("g", {
+        transform: "translate(".concat(v0.x, ", ").concat(v0.y - space, ")")
+      }, /*#__PURE__*/_react["default"].createElement("line", {
+        x1: -diagonalPointValue,
+        y1: -diagonalPointValue,
+        x2: diagonalPointValue,
+        y2: diagonalPointValue,
+        style: STYLE
+      }), /*#__PURE__*/_react["default"].createElement("line", {
+        x1: 0,
+        y1: 0,
+        x2: textLength > length ? 0 : (length - textLength) / 2,
+        y2: 0,
+        style: STYLE
+      }), /*#__PURE__*/_react["default"].createElement("text", {
+        x: length / 2,
+        y: "3",
+        style: STYLE_TEXT
+      }, text, layer.unit === 'in' ? '"' : layer.unit), /*#__PURE__*/_react["default"].createElement("line", {
+        x1: length,
+        y1: 0,
+        x2: textLength > length ? length : (length + textLength) / 2,
+        y2: 0,
+        style: STYLE
+      }), /*#__PURE__*/_react["default"].createElement("line", {
+        x1: length - diagonalPointValue,
+        y1: -diagonalPointValue,
+        x2: length + diagonalPointValue,
+        y2: diagonalPointValue,
+        style: STYLE
+      })), /*#__PURE__*/_react["default"].createElement("line", {
+        x1: v1.x,
+        y1: v1.y,
+        x2: v1.x,
+        y2: v1.y - space,
+        style: STYLE
+      }));
+    } else {
+      return /*#__PURE__*/_react["default"].createElement("g", null, /*#__PURE__*/_react["default"].createElement("line", {
+        x1: v0.x,
+        y1: v0.y,
+        x2: v0.x,
+        y2: v0.y + space,
+        style: STYLE
+      }), /*#__PURE__*/_react["default"].createElement("g", {
+        transform: "translate(".concat(v0.x, ", ").concat(v0.y + space, ")")
+      }, /*#__PURE__*/_react["default"].createElement("line", {
+        x1: -diagonalPointValue,
+        y1: -diagonalPointValue,
+        x2: diagonalPointValue,
+        y2: diagonalPointValue,
+        style: STYLE
+      }), /*#__PURE__*/_react["default"].createElement("line", {
+        x1: 0,
+        y1: 0,
+        x2: textLength > length ? 0 : -(length - textLength) / 2,
+        y2: 0,
+        style: STYLE
+      }), /*#__PURE__*/_react["default"].createElement("text", {
+        x: -length / 2,
+        y: "3",
+        style: STYLE_TEXT
+      }, text, layer.unit === 'in' ? '"' : layer.unit), /*#__PURE__*/_react["default"].createElement("line", {
+        x1: -length,
+        y1: 0,
+        x2: textLength > length ? -length : -(length + textLength) / 2,
+        y2: 0,
+        style: STYLE
+      }), /*#__PURE__*/_react["default"].createElement("line", {
+        x1: -length - diagonalPointValue,
+        y1: -diagonalPointValue,
+        x2: -length + diagonalPointValue,
+        y2: diagonalPointValue,
+        style: STYLE
+      })), /*#__PURE__*/_react["default"].createElement("line", {
+        x1: v1.x,
+        y1: v1.y,
+        x2: v1.x,
+        y2: v1.y + space,
+        style: STYLE
+      }));
+    }
+  } else if (v0.x = v1.x) {
+    if (v0.y < v1.y) {
+      return /*#__PURE__*/_react["default"].createElement("g", null, /*#__PURE__*/_react["default"].createElement("line", {
+        x1: v0.x,
+        y1: v0.y,
+        x2: v0.x + space,
+        y2: v0.y,
+        style: STYLE
+      }), /*#__PURE__*/_react["default"].createElement("g", {
+        transform: "translate(".concat(v0.x + space, ", ").concat(v0.y, ")")
+      }, /*#__PURE__*/_react["default"].createElement("line", {
+        x1: -diagonalPointValue,
+        y1: -diagonalPointValue,
+        x2: diagonalPointValue,
+        y2: diagonalPointValue,
+        style: STYLE
+      }), /*#__PURE__*/_react["default"].createElement("line", {
+        x1: 0,
+        y1: 0,
+        x2: 0,
+        y2: textLength > length ? 0 : (length - textLength) / 2,
+        style: STYLE
+      }), /*#__PURE__*/_react["default"].createElement("text", {
+        x: length / 2,
+        y: 0,
+        style: _objectSpread(_objectSpread({}, STYLE_TEXT), {}, {
+          transform: 'rotate(90deg)'
+        })
+      }, text, layer.unit === 'in' ? '"' : layer.unit), /*#__PURE__*/_react["default"].createElement("line", {
+        x1: 0,
+        y1: length,
+        x2: 0,
+        y2: textLength > length ? length : (length + textLength) / 2,
+        style: STYLE
+      }), /*#__PURE__*/_react["default"].createElement("line", {
+        x1: -diagonalPointValue,
+        y1: length - diagonalPointValue,
+        x2: diagonalPointValue,
+        y2: length + diagonalPointValue,
+        style: STYLE
+      })), /*#__PURE__*/_react["default"].createElement("line", {
+        x1: v1.x,
+        y1: v1.y,
+        x2: v1.x + space,
+        y2: v1.y,
+        style: STYLE
+      }));
+    } else {
+      return /*#__PURE__*/_react["default"].createElement("g", null, /*#__PURE__*/_react["default"].createElement("line", {
+        x1: v0.x,
+        y1: v0.y,
+        x2: v0.x - space,
+        y2: v0.y,
+        style: STYLE
+      }), /*#__PURE__*/_react["default"].createElement("g", {
+        transform: "translate(".concat(v0.x - space, ", ").concat(v0.y, ")")
+      }, /*#__PURE__*/_react["default"].createElement("line", {
+        x1: -diagonalPointValue,
+        y1: -diagonalPointValue,
+        x2: diagonalPointValue,
+        y2: diagonalPointValue,
+        style: STYLE
+      }), /*#__PURE__*/_react["default"].createElement("line", {
+        x1: 0,
+        y1: 0,
+        x2: 0,
+        y2: textLength > length ? 0 : -(length - textLength) / 2,
+        style: STYLE
+      }), /*#__PURE__*/_react["default"].createElement("text", {
+        x: -length / 2,
+        y: 0,
+        style: _objectSpread(_objectSpread({}, STYLE_TEXT), {}, {
+          transform: 'rotate(90deg)'
+        })
+      }, text, layer.unit === 'in' ? '"' : layer.unit), /*#__PURE__*/_react["default"].createElement("line", {
+        x1: 0,
+        y1: -length,
+        x2: 0,
+        y2: textLength > length ? -length : -(length + textLength) / 2,
+        style: STYLE
+      }), /*#__PURE__*/_react["default"].createElement("line", {
+        x1: -diagonalPointValue,
+        y1: -length - diagonalPointValue,
+        x2: diagonalPointValue,
+        y2: -length + diagonalPointValue,
+        style: STYLE
+      })), /*#__PURE__*/_react["default"].createElement("line", {
+        x1: v1.x,
+        y1: v1.y,
+        x2: v1.x - space,
+        y2: v1.y,
+        style: STYLE
+      }));
+    }
+  } else return null;
+}
+module.exports = exports.default;

package/lib/components/viewer3d/ruler-utils/scene3D.js

@@ -0,0 +1,67 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.compareVertices = compareVertices;
+exports["default"] = Scene3D;
+var _react = _interopRequireDefault(require("react"));
+var _geometry = require("../../../utils/geometry");
+var _convertUnitsLite = require("../../../utils/convert-units-lite");
+var _layer3D = _interopRequireDefault(require("./layer3D"));
+function compareVertices(v0, v1) {
+  return v0.x === v1.x ? v0.y - v1.y : v0.x - v1.x;
+}
+function Scene3D(_ref) {
+  var scene = _ref.scene,
+    catalog = _ref.catalog,
+    width = _ref.width,
+    height = _ref.height,
+    mode = _ref.mode,
+    downloadFlag = _ref.downloadFlag;
+  var layers = scene.layers;
+  var selectedLayer = layers.get(scene.selectedLayer);
+  var ceilHeight = Number(selectedLayer.ceilHeight);
+  var selectedLine = selectedLayer.lines.get(selectedLayer.selected.lines.toJS()[0]);
+  var vertex0 = selectedLayer.vertices.get(selectedLine.vertices.get(0));
+  var vertex1 = selectedLayer.vertices.get(selectedLine.vertices.get(1));
+  var lineLength = (0, _convertUnitsLite.convert)((0, _geometry.verticesDistance)(vertex0, vertex1)).from(scene.unit).to(selectedLayer.unit);
+  var multi = downloadFlag ? 0.85 : 0.6;
+  var scale = Math.min(width * multi / lineLength, height * multi / ceilHeight);
+  var frontRect = {
+    width: lineLength * scale,
+    height: ceilHeight * scale
+  };
+  var i = 0,
+    grids = [];
+  var viewScale = Math.min(width / window.innerWidth, height / window.innerHeight);
+  for (var x = -width / 2; x <= width / 2; x = x + 30 * viewScale) {
+    for (var y = -height / 2; y <= height / 2; y = y + 30 * viewScale) {
+      if (Math.abs(x) > frontRect.width / 2 || Math.abs(y) > frontRect.height / 2) {
+        grids.push(/*#__PURE__*/_react["default"].createElement("circle", {
+          key: "grid_".concat(i),
+          cx: x,
+          cy: y,
+          r: 2 * viewScale,
+          fill: "#bbb"
+        }));
+        i++;
+      }
+    }
+  }
+  return /*#__PURE__*/_react["default"].createElement("g", null, grids, /*#__PURE__*/_react["default"].createElement(_layer3D["default"], {
+    key: selectedLayer.id,
+    layer: selectedLayer,
+    frontRect: frontRect,
+    lineLength: lineLength,
+    ceilHeight: ceilHeight.toFixed(0),
+    catalog: catalog,
+    scene: scene,
+    scale: scale,
+    mode: mode,
+    line: selectedLine,
+    viewScale: viewScale,
+    downloadFlag: downloadFlag
+  }));
+}

package/lib/components/viewer3d/ruler-utils/state3D.js

@@ -0,0 +1,26 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = State3D;
+var _react = _interopRequireDefault(require("react"));
+var _scene3D = _interopRequireDefault(require("./scene3D"));
+function State3D(_ref) {
+  var state = _ref.state,
+    catalog = _ref.catalog,
+    width = _ref.width,
+    height = _ref.height,
+    downloadFlag = _ref.downloadFlag;
+  var scene = state.scene;
+  return /*#__PURE__*/_react["default"].createElement("g", null, /*#__PURE__*/_react["default"].createElement(_scene3D["default"], {
+    scene: scene,
+    catalog: catalog,
+    width: width,
+    height: height,
+    mode: state.get('mode'),
+    downloadFlag: downloadFlag
+  }));
+}
+module.exports = exports.default;