kitchen-simulator
Version:
It is a kitchen simulator (self-contained micro-frontend).
224 lines • 8.29 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
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; }
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;
}