kitchen-simulator
Version:
It is a kitchen simulator (self-contained micro-frontend).
79 lines • 2.82 kB
JavaScript
import React from 'react';
import PropTypes from 'prop-types';
import { convert } from "../../utils/convert-units-lite";
import IDBroker from "../../utils/id-broker";
import { TEXT_COLOR_NEUTRAL_7 } from "../../constants";
import { STYLE_ROOM_SHAPE } from "./line";
var STYLE = {
stroke: TEXT_COLOR_NEUTRAL_7,
strokeWidth: '1px'
};
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'
};
export default function Ruler(_ref) {
var layer = _ref.layer,
length = _ref.length,
unit = _ref.unit,
rulerUnit = _ref.rulerUnit,
transform = _ref.transform,
style = _ref.style;
var distanceText = convert(length).from(unit).to(rulerUnit).toFixed(0);
var textLength = (distanceText.length + layer.unit.length) * 9;
return /*#__PURE__*/React.createElement("g", {
transform: transform
}, /*#__PURE__*/React.createElement("g", {
id: "ruler"
}, /*#__PURE__*/React.createElement("rect", {
id: "ruler_rect_".concat(IDBroker.acquireID()),
style: BACKGROUNDSTYLE,
x: length / 2 - textLength / 2,
y: "-10",
width: textLength,
height: "22",
rx: "1",
ry: "0.39"
}), /*#__PURE__*/React.createElement("text", {
x: length / 2,
y: "3",
transform: "scale(1, -1)",
style: STYLE_TEXT,
fill: TEXT_COLOR_NEUTRAL_7
}, Math.round(convert(distanceText).from('in').to(layer.unit) * 100) / 100, layer.unit === 'in' ? '"' : layer.unit)), /*#__PURE__*/React.createElement("line", {
x1: style === STYLE_ROOM_SHAPE ? 0 : 4,
y1: "0",
x2: (length - textLength) / 2 < 0 ? 0 : (length - textLength) / 2,
y2: "0",
style: style
}), /*#__PURE__*/React.createElement("line", {
x1: (length + textLength) / 2 < 0 ? 0 : (length + textLength) / 2 < length ? (length + textLength) / 2 : length,
y1: "0",
x2: style === STYLE_ROOM_SHAPE ? length : length - 4,
y2: "0",
style: style
}), style !== STYLE_ROOM_SHAPE && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("polygon", {
points: "3, 0, 6.5, -2, 6.5, 2 ",
style: style
}), /*#__PURE__*/React.createElement("polygon", {
points: "".concat(length - 3, ", 0, ").concat(length - 6.5, ", 2, ").concat(length - 6.5, ", -2"),
style: style
})));
}
Ruler.propTypes = {
length: PropTypes.number.isRequired,
unit: PropTypes.string.isRequired,
transform: PropTypes.string.isRequired
};