Вы не можете выбрать более 25 тем Темы должны начинаться с буквы или цифры, могут содержать дефисы(-) и должны содержать не более 35 символов.
 
 
 
 

319 строки
11 KiB

  1. "use strict";
  2. var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
  3. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
  4. Object.defineProperty(exports, "__esModule", {
  5. value: true
  6. });
  7. exports["default"] = TextLayerItem;
  8. exports.TextLayerItemInternal = void 0;
  9. var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
  10. var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
  11. var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
  12. var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
  13. var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
  14. var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
  15. var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
  16. var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
  17. var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
  18. var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
  19. var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
  20. var _react = _interopRequireWildcard(require("react"));
  21. var _propTypes = _interopRequireDefault(require("prop-types"));
  22. var _PageContext = _interopRequireDefault(require("../PageContext"));
  23. var _propTypes2 = require("../shared/propTypes");
  24. function _createSuper(Derived) { return function () { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (_isNativeReflectConstruct()) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
  25. function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
  26. var TextLayerItemInternal = /*#__PURE__*/function (_PureComponent) {
  27. (0, _inherits2["default"])(TextLayerItemInternal, _PureComponent);
  28. var _super = _createSuper(TextLayerItemInternal);
  29. function TextLayerItemInternal() {
  30. var _this;
  31. (0, _classCallCheck2["default"])(this, TextLayerItemInternal);
  32. for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
  33. args[_key] = arguments[_key];
  34. }
  35. _this = _super.call.apply(_super, [this].concat(args));
  36. (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getElementWidth", function (element) {
  37. var _assertThisInitialize = (0, _assertThisInitialized2["default"])(_this),
  38. sideways = _assertThisInitialize.sideways;
  39. return element.getBoundingClientRect()[sideways ? 'height' : 'width'];
  40. });
  41. return _this;
  42. }
  43. (0, _createClass2["default"])(TextLayerItemInternal, [{
  44. key: "componentDidMount",
  45. value: function componentDidMount() {
  46. this.alignTextItem();
  47. }
  48. }, {
  49. key: "componentDidUpdate",
  50. value: function componentDidUpdate() {
  51. this.alignTextItem();
  52. }
  53. }, {
  54. key: "getFontData",
  55. value: function () {
  56. var _getFontData = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(fontName) {
  57. var page, font;
  58. return _regenerator["default"].wrap(function _callee$(_context) {
  59. while (1) {
  60. switch (_context.prev = _context.next) {
  61. case 0:
  62. page = this.props.page;
  63. _context.next = 3;
  64. return new Promise(function (resolve) {
  65. page.commonObjs.get(fontName, resolve);
  66. });
  67. case 3:
  68. font = _context.sent;
  69. return _context.abrupt("return", font);
  70. case 5:
  71. case "end":
  72. return _context.stop();
  73. }
  74. }
  75. }, _callee, this);
  76. }));
  77. function getFontData(_x) {
  78. return _getFontData.apply(this, arguments);
  79. }
  80. return getFontData;
  81. }()
  82. }, {
  83. key: "alignTextItem",
  84. value: function () {
  85. var _alignTextItem = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
  86. var element, _this$props, fontName, scale, width, fontData, fallbackFontName, targetWidth, actualWidth, transform, ascent;
  87. return _regenerator["default"].wrap(function _callee2$(_context2) {
  88. while (1) {
  89. switch (_context2.prev = _context2.next) {
  90. case 0:
  91. element = this.item;
  92. if (element) {
  93. _context2.next = 3;
  94. break;
  95. }
  96. return _context2.abrupt("return");
  97. case 3:
  98. element.style.transform = '';
  99. _this$props = this.props, fontName = _this$props.fontName, scale = _this$props.scale, width = _this$props.width;
  100. element.style.fontFamily = "".concat(fontName, ", sans-serif");
  101. _context2.next = 8;
  102. return this.getFontData(fontName);
  103. case 8:
  104. fontData = _context2.sent;
  105. fallbackFontName = fontData ? fontData.fallbackName : 'sans-serif';
  106. element.style.fontFamily = "".concat(fontName, ", ").concat(fallbackFontName);
  107. targetWidth = width * scale;
  108. actualWidth = this.getElementWidth(element);
  109. transform = "scaleX(".concat(targetWidth / actualWidth, ")");
  110. ascent = fontData ? fontData.ascent : 0;
  111. if (ascent) {
  112. transform += " translateY(".concat((1 - ascent) * 100, "%)");
  113. }
  114. element.style.transform = transform;
  115. element.style.WebkitTransform = transform;
  116. case 18:
  117. case "end":
  118. return _context2.stop();
  119. }
  120. }
  121. }, _callee2, this);
  122. }));
  123. function alignTextItem() {
  124. return _alignTextItem.apply(this, arguments);
  125. }
  126. return alignTextItem;
  127. }()
  128. }, {
  129. key: "render",
  130. value: function render() {
  131. var _this2 = this;
  132. var fontSize = this.fontSize,
  133. top = this.top,
  134. left = this.left;
  135. var _this$props2 = this.props,
  136. customTextRenderer = _this$props2.customTextRenderer,
  137. scale = _this$props2.scale,
  138. text = _this$props2.str;
  139. return /*#__PURE__*/_react["default"].createElement("span", {
  140. ref: function ref(_ref) {
  141. _this2.item = _ref;
  142. },
  143. style: {
  144. height: '1em',
  145. fontFamily: 'sans-serif',
  146. fontSize: "".concat(fontSize * scale, "px"),
  147. position: 'absolute',
  148. top: "".concat(top * scale, "px"),
  149. left: "".concat(left * scale, "px"),
  150. transformOrigin: 'left bottom',
  151. whiteSpace: 'pre',
  152. pointerEvents: 'all'
  153. }
  154. }, customTextRenderer ? customTextRenderer(this.props) : text);
  155. }
  156. }, {
  157. key: "unrotatedViewport",
  158. get: function get() {
  159. var _this$props3 = this.props,
  160. page = _this$props3.page,
  161. scale = _this$props3.scale;
  162. return page.getViewport({
  163. scale: scale
  164. });
  165. }
  166. /**
  167. * It might happen that the page is rotated by default. In such cases, we shouldn't rotate
  168. * text content.
  169. */
  170. }, {
  171. key: "rotate",
  172. get: function get() {
  173. var _this$props4 = this.props,
  174. page = _this$props4.page,
  175. rotate = _this$props4.rotate;
  176. return rotate - page.rotate;
  177. }
  178. }, {
  179. key: "sideways",
  180. get: function get() {
  181. var rotate = this.rotate;
  182. return rotate % 180 !== 0;
  183. }
  184. }, {
  185. key: "defaultSideways",
  186. get: function get() {
  187. var rotation = this.unrotatedViewport.rotation;
  188. return rotation % 180 !== 0;
  189. }
  190. }, {
  191. key: "fontSize",
  192. get: function get() {
  193. var transform = this.props.transform;
  194. var defaultSideways = this.defaultSideways;
  195. var _transform = (0, _slicedToArray2["default"])(transform, 2),
  196. fontHeightPx = _transform[0],
  197. fontWidthPx = _transform[1];
  198. return defaultSideways ? fontWidthPx : fontHeightPx;
  199. }
  200. }, {
  201. key: "top",
  202. get: function get() {
  203. var transform = this.props.transform;
  204. var viewport = this.unrotatedViewport,
  205. defaultSideways = this.defaultSideways;
  206. var _transform2 = (0, _slicedToArray2["default"])(transform, 6),
  207. /* fontHeightPx */
  208. /* fontWidthPx */
  209. offsetX = _transform2[2],
  210. offsetY = _transform2[3],
  211. x = _transform2[4],
  212. y = _transform2[5];
  213. var _viewport$viewBox = (0, _slicedToArray2["default"])(viewport.viewBox, 4),
  214. /* xMin */
  215. yMin = _viewport$viewBox[1],
  216. /* xMax */
  217. yMax = _viewport$viewBox[3];
  218. return defaultSideways ? x + offsetX + yMin : yMax - (y + offsetY);
  219. }
  220. }, {
  221. key: "left",
  222. get: function get() {
  223. var transform = this.props.transform;
  224. var viewport = this.unrotatedViewport,
  225. defaultSideways = this.defaultSideways;
  226. var _transform3 = (0, _slicedToArray2["default"])(transform, 6),
  227. /* fontHeightPx */
  228. /* fontWidthPx */
  229. /* offsetX */
  230. /* offsetY */
  231. x = _transform3[4],
  232. y = _transform3[5];
  233. var _viewport$viewBox2 = (0, _slicedToArray2["default"])(viewport.viewBox, 1),
  234. xMin = _viewport$viewBox2[0];
  235. return defaultSideways ? y - xMin : x - xMin;
  236. }
  237. }]);
  238. return TextLayerItemInternal;
  239. }(_react.PureComponent);
  240. exports.TextLayerItemInternal = TextLayerItemInternal;
  241. TextLayerItemInternal.propTypes = {
  242. customTextRenderer: _propTypes["default"].func,
  243. fontName: _propTypes["default"].string.isRequired,
  244. itemIndex: _propTypes["default"].number.isRequired,
  245. // eslint-disable-line react/no-unused-prop-types
  246. page: _propTypes2.isPage.isRequired,
  247. rotate: _propTypes2.isRotate,
  248. scale: _propTypes["default"].number,
  249. str: _propTypes["default"].string.isRequired,
  250. transform: _propTypes["default"].arrayOf(_propTypes["default"].number).isRequired,
  251. width: _propTypes["default"].number.isRequired
  252. };
  253. function TextLayerItem(props) {
  254. return /*#__PURE__*/_react["default"].createElement(_PageContext["default"].Consumer, null, function (context) {
  255. return /*#__PURE__*/_react["default"].createElement(TextLayerItemInternal, (0, _extends2["default"])({}, context, props));
  256. });
  257. }