react-planner-viewer/es/components/viewer2d/ruler.js

react-planner-viewer is a React Component for view plans builded with react-planner in 2D mode

import React from 'react';
import PropTypes from 'prop-types';

var STYLE = {
  stroke: "#0096fd",
  strokeWidth: "1px"
};

var STYLE_TEXT = {
  textAnchor: "middle",
  fontSize: "12px",
  fontFamily: "'Courier New', Courier, monospace",
  pointerEvents: "none",
  fontWeight: "bold",

  //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 length = _ref.length,
      unit = _ref.unit,
      transform = _ref.transform;


  var distanceText = length.toFixed(2) + ' ' + unit;

  return React.createElement(
    'g',
    { transform: transform },
    React.createElement(
      'text',
      { x: length / 2, y: '-3', transform: 'scale(1, -1)', style: STYLE_TEXT },
      distanceText
    ),
    React.createElement('line', { x1: '0', y1: '-5', x2: '0', y2: '5', style: STYLE }),
    React.createElement('line', { x1: length, y1: '-5', x2: length, y2: '5', style: STYLE }),
    React.createElement('line', { x1: '0', y1: '0', x2: length, y2: '0', style: STYLE })
  );
}

Ruler.propTypes = {
  length: PropTypes.number.isRequired,
  unit: PropTypes.string.isRequired,
  transform: PropTypes.string.isRequired
};
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9jb21wb25lbnRzL3ZpZXdlcjJkL3J1bGVyLmpzeCJdLCJuYW1lcyI6WyJSZWFjdCIsIlByb3BUeXBlcyIsIlNUWUxFIiwic3Ryb2tlIiwic3Ryb2tlV2lkdGgiLCJTVFlMRV9URVhUIiwidGV4dEFuY2hvciIsImZvbnRTaXplIiwiZm9udEZhbWlseSIsInBvaW50ZXJFdmVudHMiLCJmb250V2VpZ2h0IiwiV2Via2l0VG91Y2hDYWxsb3V0IiwiV2Via2l0VXNlclNlbGVjdCIsIk1velVzZXJTZWxlY3QiLCJNc1VzZXJTZWxlY3QiLCJ1c2VyU2VsZWN0IiwiUnVsZXIiLCJsZW5ndGgiLCJ1bml0IiwidHJhbnNmb3JtIiwiZGlzdGFuY2VUZXh0IiwidG9GaXhlZCIsInByb3BUeXBlcyIsIm51bWJlciIsImlzUmVxdWlyZWQiLCJzdHJpbmciXSwibWFwcGluZ3MiOiJBQUFBLE9BQU9BLEtBQVAsTUFBa0IsT0FBbEI7QUFDQSxPQUFPQyxTQUFQLE1BQXNCLFlBQXRCOztBQUVBLElBQU1DLFFBQVE7QUFDWkMsVUFBUSxTQURJO0FBRVpDLGVBQWE7QUFGRCxDQUFkOztBQUtBLElBQU1DLGFBQWE7QUFDakJDLGNBQVksUUFESztBQUVqQkMsWUFBVSxNQUZPO0FBR2pCQyxjQUFZLG1DQUhLO0FBSWpCQyxpQkFBZSxNQUpFO0FBS2pCQyxjQUFZLE1BTEs7O0FBT2pCO0FBQ0FDLHNCQUFvQixNQVJILEVBUVc7QUFDNUJDLG9CQUFrQixNQVRELEVBU1c7QUFDNUJDLGlCQUFlLE1BVkUsRUFVVztBQUM1QkMsZ0JBQWMsTUFYRyxFQVdXO0FBQzVCQyxjQUFZO0FBWkssQ0FBbkI7O0FBZ0JBLGVBQWUsU0FBU0MsS0FBVCxPQUEwQztBQUFBLE1BQTFCQyxNQUEwQixRQUExQkEsTUFBMEI7QUFBQSxNQUFsQkMsSUFBa0IsUUFBbEJBLElBQWtCO0FBQUEsTUFBWkMsU0FBWSxRQUFaQSxTQUFZOzs7QUFFdkQsTUFBSUMsZUFBa0JILE9BQU9JLE9BQVAsQ0FBZSxDQUFmLENBQWxCLFNBQXVDSCxJQUEzQzs7QUFFQSxTQUNFO0FBQUE7QUFBQSxNQUFHLFdBQVdDLFNBQWQ7QUFDRTtBQUFBO0FBQUEsUUFBTSxHQUFHRixTQUFTLENBQWxCLEVBQXFCLEdBQUUsSUFBdkIsRUFBNEIseUJBQTVCLEVBQXVELE9BQU9aLFVBQTlEO0FBQTJFZTtBQUEzRSxLQURGO0FBRUUsa0NBQU0sSUFBRyxHQUFULEVBQWEsSUFBRyxJQUFoQixFQUFxQixJQUFHLEdBQXhCLEVBQTRCLElBQUcsR0FBL0IsRUFBbUMsT0FBT2xCLEtBQTFDLEdBRkY7QUFHRSxrQ0FBTSxJQUFJZSxNQUFWLEVBQWtCLElBQUcsSUFBckIsRUFBMEIsSUFBSUEsTUFBOUIsRUFBc0MsSUFBRyxHQUF6QyxFQUE2QyxPQUFPZixLQUFwRCxHQUhGO0FBSUUsa0NBQU0sSUFBRyxHQUFULEVBQWEsSUFBRyxHQUFoQixFQUFvQixJQUFJZSxNQUF4QixFQUFnQyxJQUFHLEdBQW5DLEVBQXVDLE9BQU9mLEtBQTlDO0FBSkYsR0FERjtBQVNEOztBQUVEYyxNQUFNTSxTQUFOLEdBQWtCO0FBQ2hCTCxVQUFRaEIsVUFBVXNCLE1BQVYsQ0FBaUJDLFVBRFQ7QUFFaEJOLFFBQU1qQixVQUFVd0IsTUFBVixDQUFpQkQsVUFGUDtBQUdoQkwsYUFBV2xCLFVBQVV3QixNQUFWLENBQWlCRDtBQUhaLENBQWxCIiwiZmlsZSI6InJ1bGVyLmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0JztcbmltcG9ydCBQcm9wVHlwZXMgZnJvbSAncHJvcC10eXBlcyc7XG5cbmNvbnN0IFNUWUxFID0ge1xuICBzdHJva2U6IFwiIzAwOTZmZFwiLFxuICBzdHJva2VXaWR0aDogXCIxcHhcIlxufTtcblxuY29uc3QgU1RZTEVfVEVYVCA9IHtcbiAgdGV4dEFuY2hvcjogXCJtaWRkbGVcIixcbiAgZm9udFNpemU6IFwiMTJweFwiLFxuICBmb250RmFtaWx5OiBcIidDb3VyaWVyIE5ldycsIENvdXJpZXIsIG1vbm9zcGFjZVwiLFxuICBwb2ludGVyRXZlbnRzOiBcIm5vbmVcIixcbiAgZm9udFdlaWdodDogXCJib2xkXCIsXG5cbiAgLy9odHRwOi8vc3RhY2tvdmVyZmxvdy5jb20vcXVlc3Rpb25zLzgyNjc4Mi9ob3ctdG8tZGlzYWJsZS10ZXh0LXNlbGVjdGlvbi1oaWdobGlnaHRpbmctdXNpbmctY3NzXG4gIFdlYmtpdFRvdWNoQ2FsbG91dDogXCJub25lXCIsIC8qIGlPUyBTYWZhcmkgKi9cbiAgV2Via2l0VXNlclNlbGVjdDogXCJub25lXCIsICAgLyogQ2hyb21lL1NhZmFyaS9PcGVyYSAqL1xuICBNb3pVc2VyU2VsZWN0OiBcIm5vbmVcIiwgICAgICAvKiBGaXJlZm94ICovXG4gIE1zVXNlclNlbGVjdDogXCJub25lXCIsICAgICAgIC8qIEludGVybmV0IEV4cGxvcmVyL0VkZ2UgKi9cbiAgdXNlclNlbGVjdDogXCJub25lXCJcbn07XG5cblxuZXhwb3J0IGRlZmF1bHQgZnVuY3Rpb24gUnVsZXIoe2xlbmd0aCwgdW5pdCwgdHJhbnNmb3JtfSkge1xuXG4gIGxldCBkaXN0YW5jZVRleHQgPSBgJHtsZW5ndGgudG9GaXhlZCgyKX0gJHt1bml0fWA7XG5cbiAgcmV0dXJuIChcbiAgICA8ZyB0cmFuc2Zvcm09e3RyYW5zZm9ybX0+XG4gICAgICA8dGV4dCB4PXtsZW5ndGggLyAyfSB5PVwiLTNcIiB0cmFuc2Zvcm09e2BzY2FsZSgxLCAtMSlgfSBzdHlsZT17U1RZTEVfVEVYVH0+e2Rpc3RhbmNlVGV4dH08L3RleHQ+XG4gICAgICA8bGluZSB4MT1cIjBcIiB5MT1cIi01XCIgeDI9XCIwXCIgeTI9XCI1XCIgc3R5bGU9e1NUWUxFfS8+XG4gICAgICA8bGluZSB4MT17bGVuZ3RofSB5MT1cIi01XCIgeDI9e2xlbmd0aH0geTI9XCI1XCIgc3R5bGU9e1NUWUxFfS8+XG4gICAgICA8bGluZSB4MT1cIjBcIiB5MT1cIjBcIiB4Mj17bGVuZ3RofSB5Mj1cIjBcIiBzdHlsZT17U1RZTEV9Lz5cbiAgICA8L2c+XG4gICk7XG5cbn1cblxuUnVsZXIucHJvcFR5cGVzID0ge1xuICBsZW5ndGg6IFByb3BUeXBlcy5udW1iZXIuaXNSZXF1aXJlZCxcbiAgdW5pdDogUHJvcFR5cGVzLnN0cmluZy5pc1JlcXVpcmVkLFxuICB0cmFuc2Zvcm06IFByb3BUeXBlcy5zdHJpbmcuaXNSZXF1aXJlZFxufTtcbiJdfQ==