DrawTextField.js 4.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
  1. "use strict";
  2. Object.defineProperty(exports, "__esModule", { value: true });
  3. var getContext2dOrThrow_1 = require("../dom/getContext2dOrThrow");
  4. var resolveInput_1 = require("../dom/resolveInput");
  5. var AnchorPosition;
  6. (function (AnchorPosition) {
  7. AnchorPosition["TOP_LEFT"] = "TOP_LEFT";
  8. AnchorPosition["TOP_RIGHT"] = "TOP_RIGHT";
  9. AnchorPosition["BOTTOM_LEFT"] = "BOTTOM_LEFT";
  10. AnchorPosition["BOTTOM_RIGHT"] = "BOTTOM_RIGHT";
  11. })(AnchorPosition = exports.AnchorPosition || (exports.AnchorPosition = {}));
  12. var DrawTextFieldOptions = /** @class */ (function () {
  13. function DrawTextFieldOptions(options) {
  14. if (options === void 0) { options = {}; }
  15. var anchorPosition = options.anchorPosition, backgroundColor = options.backgroundColor, fontColor = options.fontColor, fontSize = options.fontSize, fontStyle = options.fontStyle, padding = options.padding;
  16. this.anchorPosition = anchorPosition || AnchorPosition.TOP_LEFT;
  17. this.backgroundColor = backgroundColor || 'rgba(0, 0, 0, 0.5)';
  18. this.fontColor = fontColor || 'rgba(255, 255, 255, 1)';
  19. this.fontSize = fontSize || 14;
  20. this.fontStyle = fontStyle || 'Georgia';
  21. this.padding = padding || 4;
  22. }
  23. return DrawTextFieldOptions;
  24. }());
  25. exports.DrawTextFieldOptions = DrawTextFieldOptions;
  26. var DrawTextField = /** @class */ (function () {
  27. function DrawTextField(text, anchor, options) {
  28. if (options === void 0) { options = {}; }
  29. this.text = typeof text === 'string'
  30. ? [text]
  31. : (text instanceof DrawTextField ? text.text : text);
  32. this.anchor = anchor;
  33. this.options = new DrawTextFieldOptions(options);
  34. }
  35. DrawTextField.prototype.measureWidth = function (ctx) {
  36. var padding = this.options.padding;
  37. return this.text.map(function (l) { return ctx.measureText(l).width; }).reduce(function (w0, w1) { return w0 < w1 ? w1 : w0; }, 0) + (2 * padding);
  38. };
  39. DrawTextField.prototype.measureHeight = function () {
  40. var _a = this.options, fontSize = _a.fontSize, padding = _a.padding;
  41. return this.text.length * fontSize + (2 * padding);
  42. };
  43. DrawTextField.prototype.getUpperLeft = function (ctx, canvasDims) {
  44. var anchorPosition = this.options.anchorPosition;
  45. var isShiftLeft = anchorPosition === AnchorPosition.BOTTOM_RIGHT || anchorPosition === AnchorPosition.TOP_RIGHT;
  46. var isShiftTop = anchorPosition === AnchorPosition.BOTTOM_LEFT || anchorPosition === AnchorPosition.BOTTOM_RIGHT;
  47. var textFieldWidth = this.measureWidth(ctx);
  48. var textFieldHeight = this.measureHeight();
  49. var x = (isShiftLeft ? this.anchor.x - textFieldWidth : this.anchor.x);
  50. var y = isShiftTop ? this.anchor.y - textFieldHeight : this.anchor.y;
  51. // adjust anchor if text box exceeds canvas borders
  52. if (canvasDims) {
  53. var width = canvasDims.width, height = canvasDims.height;
  54. var newX = Math.max(Math.min(x, width - textFieldWidth), 0);
  55. var newY = Math.max(Math.min(y, height - textFieldHeight), 0);
  56. return { x: newX, y: newY };
  57. }
  58. return { x: x, y: y };
  59. };
  60. DrawTextField.prototype.draw = function (canvasArg) {
  61. var canvas = resolveInput_1.resolveInput(canvasArg);
  62. var ctx = getContext2dOrThrow_1.getContext2dOrThrow(canvas);
  63. var _a = this.options, backgroundColor = _a.backgroundColor, fontColor = _a.fontColor, fontSize = _a.fontSize, fontStyle = _a.fontStyle, padding = _a.padding;
  64. ctx.font = fontSize + "px " + fontStyle;
  65. var maxTextWidth = this.measureWidth(ctx);
  66. var textHeight = this.measureHeight();
  67. ctx.fillStyle = backgroundColor;
  68. var upperLeft = this.getUpperLeft(ctx, canvas);
  69. ctx.fillRect(upperLeft.x, upperLeft.y, maxTextWidth, textHeight);
  70. ctx.fillStyle = fontColor;
  71. this.text.forEach(function (textLine, i) {
  72. var x = padding + upperLeft.x;
  73. var y = padding + upperLeft.y + ((i + 1) * fontSize);
  74. ctx.fillText(textLine, x, y);
  75. });
  76. };
  77. return DrawTextField;
  78. }());
  79. exports.DrawTextField = DrawTextField;
  80. //# sourceMappingURL=DrawTextField.js.map