kitchen-simulator
Version:
It is a kitchen simulator (self-contained micro-frontend).
107 lines (106 loc) • 3.9 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = Ruler;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _convertUnitsLite = require("../../utils/convert-units-lite");
var _idBroker = _interopRequireDefault(require("../../utils/id-broker"));
var _constants = require("../../constants");
var STYLE = {
stroke: _constants.TEXT_COLOR_NEUTRAL_7,
strokeWidth: '1px'
};
var BACKGROUNDSTYLE = {
fill: 'transparent',
fillOpacity: 0.8
};
var STYLE_TEXT = {
textAnchor: 'middle',
fontSize: '12px',
pointerEvents: 'none',
//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'
};
function Ruler(_ref) {
var layer = _ref.layer,
length = _ref.length,
unit = _ref.unit,
rulerUnit = _ref.rulerUnit,
transform = _ref.transform,
flag = _ref.flag;
var update = function update(lengthInput, unitInput, type) {
var newLength = toFixedFloat(lengthInput);
var merged = null;
if (type === 0) {
merged = value.merge({
_length: newLength,
length: (0, _convertUnitsLite.convert)(newLength).from(unitInput).to('cm')
});
} else {
merged = value.merge({
_length: (0, _convertUnitsLite.convert)(newLength).from(UNIT_INCH).to(unitInput),
_unit: unitInput
});
}
// if (hook) {
// return hook(merged, sourceElement, internalState, state).then(val => {
// return onUpdate(val);
// });
// }
// return onUpdate(merged);
};
// let _unit = "in";
// let distanceText = convert(length).from(unit).to(rulerUnit);
var distanceText = (0, _convertUnitsLite.convert)(length).from(unit).to(rulerUnit).toFixed(0);
var thickness = (0, _convertUnitsLite.convert)(_constants.LINE_THICKNESS).from(unit).to(rulerUnit).toFixed(0);
// let _ft_len = convert(_length).from('in').to('ft');
// let _ft_val = Math.floor(_ft_len); _ft_len -= _ft_val;
// let _in_val = convert(_ft_len).from('ft').to('in').toFixed(0);
// let distanceText = `${_ft_val}'${_in_val}"`;
var textLength = (distanceText.length + layer.unit.length) * 18;
return /*#__PURE__*/_react["default"].createElement("g", {
transform: transform
}, /*#__PURE__*/_react["default"].createElement("g", {
id: "ruler"
}, /*#__PURE__*/_react["default"].createElement("rect", {
id: "ruler_rect_".concat(_idBroker["default"].acquireID()),
style: BACKGROUNDSTYLE,
x: length / 2 - textLength / 2,
y: "-10",
width: textLength,
height: "22",
rx: "1",
ry: "0.39"
}), /*#__PURE__*/_react["default"].createElement("text", {
x: length / 2,
y: "3",
transform: "scale(1, -1)",
style: STYLE_TEXT,
fill: _constants.TEXT_COLOR_NEUTRAL_7
}, Math.round((0, _convertUnitsLite.convert)(distanceText).from('in').to(layer.unit) * 100) / 100, layer.unit === 'in' ? '"' : layer.unit)), /*#__PURE__*/_react["default"].createElement("line", {
x1: "0",
y1: "0",
x2: (length - textLength) / 2 < 0 ? 0 : (length - textLength) / 2,
y2: "0",
style: STYLE
}), /*#__PURE__*/_react["default"].createElement("line", {
x1: (length + textLength) / 2 < 0 ? 0 : (length + textLength) / 2 < length ? (length + textLength) / 2 : length,
y1: "0",
x2: length,
y2: "0",
style: STYLE
}));
}
Ruler.propTypes = {
length: _propTypes["default"].number.isRequired,
unit: _propTypes["default"].string.isRequired,
transform: _propTypes["default"].string.isRequired
};
module.exports = exports.default;