TextRenderer.js 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137
  1. import { assign } from 'min-dash';
  2. import TextUtil from 'diagram-js/lib/util/Text';
  3. var DEFAULT_FONT_SIZE = 12;
  4. var LINE_HEIGHT_RATIO = 1.2;
  5. var MIN_TEXT_ANNOTATION_HEIGHT = 30;
  6. /**
  7. * @typedef { {
  8. * fontFamily: string;
  9. * fontSize: number;
  10. * fontWeight: string;
  11. * lineHeight: number;
  12. * } } TextRendererStyle
  13. *
  14. * @typedef { {
  15. * defaultStyle?: Partial<TextRendererStyle>;
  16. * externalStyle?: Partial<TextRendererStyle>;
  17. * } } TextRendererConfig
  18. *
  19. * @typedef { import('diagram-js/lib/util/Text').TextLayoutConfig } TextLayoutConfig
  20. *
  21. * @typedef { import('diagram-js/lib/util/Types').Rect } Rect
  22. */
  23. /**
  24. * Renders text and computes text bounding boxes.
  25. *
  26. * @param {TextRendererConfig} [config]
  27. */
  28. export default function TextRenderer(config) {
  29. var defaultStyle = assign({
  30. fontFamily: 'Arial, sans-serif',
  31. fontSize: DEFAULT_FONT_SIZE,
  32. fontWeight: 'normal',
  33. lineHeight: LINE_HEIGHT_RATIO
  34. }, config && config.defaultStyle || {});
  35. var fontSize = parseInt(defaultStyle.fontSize, 10) - 1;
  36. var externalStyle = assign({}, defaultStyle, {
  37. fontSize: fontSize
  38. }, config && config.externalStyle || {});
  39. var textUtil = new TextUtil({
  40. style: defaultStyle
  41. });
  42. /**
  43. * Get the new bounds of an externally rendered,
  44. * layouted label.
  45. *
  46. * @param {Rect} bounds
  47. * @param {string} text
  48. *
  49. * @return {Rect}
  50. */
  51. this.getExternalLabelBounds = function(bounds, text) {
  52. var layoutedDimensions = textUtil.getDimensions(text, {
  53. box: {
  54. width: 90,
  55. height: 30
  56. },
  57. style: externalStyle
  58. });
  59. // resize label shape to fit label text
  60. return {
  61. x: Math.round(bounds.x + bounds.width / 2 - layoutedDimensions.width / 2),
  62. y: Math.round(bounds.y),
  63. width: Math.ceil(layoutedDimensions.width),
  64. height: Math.ceil(layoutedDimensions.height)
  65. };
  66. };
  67. /**
  68. * Get the new bounds of text annotation.
  69. *
  70. * @param {Rect} bounds
  71. * @param {string} text
  72. *
  73. * @return {Rect}
  74. */
  75. this.getTextAnnotationBounds = function(bounds, text) {
  76. var layoutedDimensions = textUtil.getDimensions(text, {
  77. box: bounds,
  78. style: defaultStyle,
  79. align: 'left-top',
  80. padding: 5
  81. });
  82. return {
  83. x: bounds.x,
  84. y: bounds.y,
  85. width: bounds.width,
  86. height: Math.max(MIN_TEXT_ANNOTATION_HEIGHT, Math.round(layoutedDimensions.height))
  87. };
  88. };
  89. /**
  90. * Create a layouted text element.
  91. *
  92. * @param {string} text
  93. * @param {TextLayoutConfig} [options]
  94. *
  95. * @return {SVGElement} rendered text
  96. */
  97. this.createText = function(text, options) {
  98. return textUtil.createText(text, options || {});
  99. };
  100. /**
  101. * Get default text style.
  102. */
  103. this.getDefaultStyle = function() {
  104. return defaultStyle;
  105. };
  106. /**
  107. * Get the external text style.
  108. */
  109. this.getExternalStyle = function() {
  110. return externalStyle;
  111. };
  112. }
  113. TextRenderer.$inject = [
  114. 'config.textRenderer'
  115. ];