kitchen-simulator/lib/components/viewer2d/rulerDist.js

It is a kitchen simulator (self-contained micro-frontend).

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = RulerDist;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _convertUnitsLite = require("../../utils/convert-units-lite");
var ARROW_STYLE = {
  stroke: '#1183B7',
  strokeWidth: '2px',
  strokeLinecap: 'round'
};
var STYLE = {
  stroke: 'black',
  strokeWidth: '1.1px'
};
var STYLE_TEXT = {
  textAnchor: 'middle',
  fontSize: '10px',
  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 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((0, _convertUnitsLite.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["default"].createElement("g", {
      transform: transform
    }, /*#__PURE__*/_react["default"].createElement("g", {
      transform: "translate(0, ".concat(dy, ")")
    }, /*#__PURE__*/_react["default"].createElement("text", {
      x: "0",
      y: "0",
      transform: "translate(".concat(length / 2, ",").concat(ay, ") scale(1, -1) rotate(").concat(textRotation, ")"),
      style: STYLE_TEXT
    }, Math.round((0, _convertUnitsLite.convert)(distanceText).from('in').to(layer.unit) * 100) / 100, layer.unit)), /*#__PURE__*/_react["default"].createElement("circle", {
      cx: "1",
      cy: "0",
      fill: "white",
      r: "1.1",
      stroke: "black",
      strokeWidth: "0.6"
    }), /*#__PURE__*/_react["default"].createElement("line", {
      x1: "2",
      y1: "0",
      x2: (length - textLength) / 2 < 0 ? 0 : length,
      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
    }), /*#__PURE__*/_react["default"].createElement("circle", {
      cx: length - 1,
      cy: "0",
      fill: "white",
      r: "1.1",
      stroke: "black",
      strokeWidth: "0.6"
    }));
  } else {
    return /*#__PURE__*/_react["default"].createElement("g", {
      transform: transform
    }, /*#__PURE__*/_react["default"].createElement("g", null, /*#__PURE__*/_react["default"].createElement("text", {
      x: "0",
      y: "0",
      transform: "translate(".concat(length / 2, ",").concat(ay, ") scale(1, -1) rotate(").concat(textRotation, ")"),
      style: STYLE_TEXT
    }, Math.round((0, _convertUnitsLite.convert)(distanceText).from('in').to(layer.unit) * 100) / 100, layer.unit)), /*#__PURE__*/_react["default"].createElement("circle", {
      cx: "1",
      cy: "0",
      fill: "white",
      r: "1.1",
      stroke: "black",
      strokeWidth: "0.6"
    }), /*#__PURE__*/_react["default"].createElement("line", {
      x1: "2",
      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
    }), /*#__PURE__*/_react["default"].createElement("circle", {
      cx: length - 1,
      cy: "0",
      fill: "white",
      r: "1.1",
      stroke: "black",
      strokeWidth: "0.6"
    }));
  }
}
RulerDist.propTypes = {
  length: _propTypes["default"].number.isRequired,
  unit: _propTypes["default"].string.isRequired,
  transform: _propTypes["default"].string.isRequired
};
module.exports = exports.default;