kitchen-simulator
Version:
It is a kitchen simulator (self-contained micro-frontend).
132 lines • 4.61 kB
JavaScript
import React from 'react';
import PropTypes from 'prop-types';
import { convert } from "../../utils/convert-units-lite";
var ARROW_STYLE = {
stroke: '#1183B7',
strokeWidth: '2px',
strokeLinecap: 'round'
};
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'
};
export default 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 _unit = 'in';
// let _length = convert(length).from(unit).to(rulerUnit);
var distanceText = "".concat(convert(length).from('cm').to(rulerUnit).toFixed(0));
var textLength = (distanceText.length + layer.unit.length) * 18;
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;
}
if (Math.abs(length - textLength) / 2 <= 16) {
var dy = textRotation == 0 ? 15 : -15;
return /*#__PURE__*/React.createElement("g", {
transform: transform
}, /*#__PURE__*/React.createElement("g", {
transform: "translate(0, ".concat(dy, ")")
}, /*#__PURE__*/React.createElement("text", {
x: "0",
y: "0",
transform: "translate(".concat(length / 2, ",").concat(ay, ") scale(1, -1) rotate(").concat(textRotation, ")"),
style: STYLE_TEXT
}, Math.round(convert(distanceText).from('in').to(layer.unit) * 100) / 100, layer.unit === 'in' ? '"' : layer.unit)), /*#__PURE__*/React.createElement("line", {
x1: "2",
y1: "0",
x2: (length - textLength) / 2 < 0 ? 0 : length,
y2: "0",
style: STYLE
}), /*#__PURE__*/React.createElement("polygon", {
points: "1, 0, 4.5, -2, 4.5, 2 ",
style: STYLE
}), /*#__PURE__*/React.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.createElement("polygon", {
points: "".concat(length - 1, ", 0, ").concat(length - 4.5, ", 2, ").concat(length - 4.5, ", -2"),
style: STYLE
}));
} else {
return /*#__PURE__*/React.createElement("g", {
transform: transform
}, /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement("text", {
x: "0",
y: "0",
transform: "translate(".concat(length / 2, ",").concat(ay, ") scale(1, -1) rotate(").concat(textRotation, ")"),
style: STYLE_TEXT
}, Math.round(convert(distanceText).from('in').to(layer.unit) * 100) / 100, layer.unit === 'in' ? '"' : layer.unit)), /*#__PURE__*/React.createElement("line", {
x1: "2",
y1: "0",
x2: (length - textLength) / 2 < 0 ? 0 : (length - textLength) / 2,
y2: "0",
style: STYLE
}), /*#__PURE__*/React.createElement("polygon", {
points: "1, 0, 4.5, -2, 4.5, 2 ",
style: STYLE
}), /*#__PURE__*/React.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.createElement("polygon", {
points: "".concat(length - 1, ", 0, ").concat(length - 4.5, ", 2, ").concat(length - 4.5, ", -2"),
style: STYLE
}));
}
}
RulerDist.propTypes = {
length: PropTypes.number.isRequired,
unit: PropTypes.string.isRequired,
transform: PropTypes.string.isRequired
};