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

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

@@ -0,0 +1,227 @@
+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); }
+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) { _defineProperty(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 _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, 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); }
+import React from 'react';
+import { TEXT_COLOR_NEUTRAL_0, TEXT_COLOR_NEUTRAL_6 } from "../../../constants";
+export default function Ruler3D(_ref) {
+  var layer = _ref.layer,
+    line = _ref.line,
+    viewScale = _ref.viewScale,
+    downloadFlag = _ref.downloadFlag;
+  var diagonalPointValue = 5 * viewScale;
+  var STYLE = {
+    stroke: 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: 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.createElement("g", null, /*#__PURE__*/React.createElement("line", {
+        x1: v0.x,
+        y1: v0.y,
+        x2: v0.x,
+        y2: v0.y - space,
+        style: STYLE
+      }), /*#__PURE__*/React.createElement("g", {
+        transform: "translate(".concat(v0.x, ", ").concat(v0.y - space, ")")
+      }, /*#__PURE__*/React.createElement("line", {
+        x1: -diagonalPointValue,
+        y1: -diagonalPointValue,
+        x2: diagonalPointValue,
+        y2: diagonalPointValue,
+        style: STYLE
+      }), /*#__PURE__*/React.createElement("line", {
+        x1: 0,
+        y1: 0,
+        x2: textLength > length ? 0 : (length - textLength) / 2,
+        y2: 0,
+        style: STYLE
+      }), /*#__PURE__*/React.createElement("text", {
+        x: length / 2,
+        y: "3",
+        style: STYLE_TEXT
+      }, text, layer.unit === 'in' ? '"' : layer.unit), /*#__PURE__*/React.createElement("line", {
+        x1: length,
+        y1: 0,
+        x2: textLength > length ? length : (length + textLength) / 2,
+        y2: 0,
+        style: STYLE
+      }), /*#__PURE__*/React.createElement("line", {
+        x1: length - diagonalPointValue,
+        y1: -diagonalPointValue,
+        x2: length + diagonalPointValue,
+        y2: diagonalPointValue,
+        style: STYLE
+      })), /*#__PURE__*/React.createElement("line", {
+        x1: v1.x,
+        y1: v1.y,
+        x2: v1.x,
+        y2: v1.y - space,
+        style: STYLE
+      }));
+    } else {
+      return /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("line", {
+        x1: v0.x,
+        y1: v0.y,
+        x2: v0.x,
+        y2: v0.y + space,
+        style: STYLE
+      }), /*#__PURE__*/React.createElement("g", {
+        transform: "translate(".concat(v0.x, ", ").concat(v0.y + space, ")")
+      }, /*#__PURE__*/React.createElement("line", {
+        x1: -diagonalPointValue,
+        y1: -diagonalPointValue,
+        x2: diagonalPointValue,
+        y2: diagonalPointValue,
+        style: STYLE
+      }), /*#__PURE__*/React.createElement("line", {
+        x1: 0,
+        y1: 0,
+        x2: textLength > length ? 0 : -(length - textLength) / 2,
+        y2: 0,
+        style: STYLE
+      }), /*#__PURE__*/React.createElement("text", {
+        x: -length / 2,
+        y: "3",
+        style: STYLE_TEXT
+      }, text, layer.unit === 'in' ? '"' : layer.unit), /*#__PURE__*/React.createElement("line", {
+        x1: -length,
+        y1: 0,
+        x2: textLength > length ? -length : -(length + textLength) / 2,
+        y2: 0,
+        style: STYLE
+      }), /*#__PURE__*/React.createElement("line", {
+        x1: -length - diagonalPointValue,
+        y1: -diagonalPointValue,
+        x2: -length + diagonalPointValue,
+        y2: diagonalPointValue,
+        style: STYLE
+      })), /*#__PURE__*/React.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.createElement("g", null, /*#__PURE__*/React.createElement("line", {
+        x1: v0.x,
+        y1: v0.y,
+        x2: v0.x + space,
+        y2: v0.y,
+        style: STYLE
+      }), /*#__PURE__*/React.createElement("g", {
+        transform: "translate(".concat(v0.x + space, ", ").concat(v0.y, ")")
+      }, /*#__PURE__*/React.createElement("line", {
+        x1: -diagonalPointValue,
+        y1: -diagonalPointValue,
+        x2: diagonalPointValue,
+        y2: diagonalPointValue,
+        style: STYLE
+      }), /*#__PURE__*/React.createElement("line", {
+        x1: 0,
+        y1: 0,
+        x2: 0,
+        y2: textLength > length ? 0 : (length - textLength) / 2,
+        style: STYLE
+      }), /*#__PURE__*/React.createElement("text", {
+        x: length / 2,
+        y: 0,
+        style: _objectSpread(_objectSpread({}, STYLE_TEXT), {}, {
+          transform: 'rotate(90deg)'
+        })
+      }, text, layer.unit === 'in' ? '"' : layer.unit), /*#__PURE__*/React.createElement("line", {
+        x1: 0,
+        y1: length,
+        x2: 0,
+        y2: textLength > length ? length : (length + textLength) / 2,
+        style: STYLE
+      }), /*#__PURE__*/React.createElement("line", {
+        x1: -diagonalPointValue,
+        y1: length - diagonalPointValue,
+        x2: diagonalPointValue,
+        y2: length + diagonalPointValue,
+        style: STYLE
+      })), /*#__PURE__*/React.createElement("line", {
+        x1: v1.x,
+        y1: v1.y,
+        x2: v1.x + space,
+        y2: v1.y,
+        style: STYLE
+      }));
+    } else {
+      return /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("line", {
+        x1: v0.x,
+        y1: v0.y,
+        x2: v0.x - space,
+        y2: v0.y,
+        style: STYLE
+      }), /*#__PURE__*/React.createElement("g", {
+        transform: "translate(".concat(v0.x - space, ", ").concat(v0.y, ")")
+      }, /*#__PURE__*/React.createElement("line", {
+        x1: -diagonalPointValue,
+        y1: -diagonalPointValue,
+        x2: diagonalPointValue,
+        y2: diagonalPointValue,
+        style: STYLE
+      }), /*#__PURE__*/React.createElement("line", {
+        x1: 0,
+        y1: 0,
+        x2: 0,
+        y2: textLength > length ? 0 : -(length - textLength) / 2,
+        style: STYLE
+      }), /*#__PURE__*/React.createElement("text", {
+        x: -length / 2,
+        y: 0,
+        style: _objectSpread(_objectSpread({}, STYLE_TEXT), {}, {
+          transform: 'rotate(90deg)'
+        })
+      }, text, layer.unit === 'in' ? '"' : layer.unit), /*#__PURE__*/React.createElement("line", {
+        x1: 0,
+        y1: -length,
+        x2: 0,
+        y2: textLength > length ? -length : -(length + textLength) / 2,
+        style: STYLE
+      }), /*#__PURE__*/React.createElement("line", {
+        x1: -diagonalPointValue,
+        y1: -length - diagonalPointValue,
+        x2: diagonalPointValue,
+        y2: -length + diagonalPointValue,
+        style: STYLE
+      })), /*#__PURE__*/React.createElement("line", {
+        x1: v1.x,
+        y1: v1.y,
+        x2: v1.x - space,
+        y2: v1.y,
+        style: STYLE
+      }));
+    }
+  } else return null;
+}

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

@@ -0,0 +1,60 @@
+import React from 'react';
+import { verticesDistance } from "../../../utils/geometry";
+import convert from 'convert-units';
+import Layer3D from "./layer3D";
+export function compareVertices(v0, v1) {
+  return v0.x === v1.x ? v0.y - v1.y : v0.x - v1.x;
+}
+export default 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;
+  console.log(layers.toJS());
+  var selectedLayer = layers.get(scene.selectedLayer);
+  var ceilHeight = 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 = convert(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.createElement("circle", {
+          key: "grid_".concat(i),
+          cx: x,
+          cy: y,
+          r: 2 * viewScale,
+          fill: "#bbb"
+        }));
+        i++;
+      }
+    }
+  }
+  return /*#__PURE__*/React.createElement("g", null, grids, /*#__PURE__*/React.createElement(Layer3D, {
+    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/es/components/viewer3d/ruler-utils/state3D.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import Scene3D from "./scene3D";
+export default 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.createElement("g", null, /*#__PURE__*/React.createElement(Scene3D, {
+    scene: scene,
+    catalog: catalog,
+    width: width,
+    height: height,
+    mode: state.get('mode'),
+    downloadFlag: downloadFlag
+  }));
+}