vis.js is a dynamic, browser-based visualization library
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

259 lines
7.8 KiB

  1. let util = require('../../../../util');
  2. class Label {
  3. constructor(body,options) {
  4. this.body = body;
  5. this.baseSize = undefined;
  6. this.setOptions(options);
  7. this.size = {top: 0, left: 0, width: 0, height: 0, yLine: 0}; // could be cached
  8. }
  9. setOptions(options, allowDeletion = false) {
  10. this.options = options;
  11. if (options.label !== undefined) {
  12. this.labelDirty = true;
  13. }
  14. if (options.font !== undefined) {
  15. Label.parseOptions(this.options.font, options, allowDeletion);
  16. if (typeof options.font === 'string') {
  17. this.baseSize = this.options.font.size;
  18. }
  19. else if (typeof options.font === 'object') {
  20. if (options.font.size !== undefined) {
  21. this.baseSize = options.font.size;
  22. }
  23. }
  24. }
  25. }
  26. static parseOptions(parentOptions, newOptions, allowDeletion = false) {
  27. if (typeof newOptions.font === 'string') {
  28. let newOptionsArray = newOptions.font.split(" ");
  29. parentOptions.size = newOptionsArray[0].replace("px",'');
  30. parentOptions.face = newOptionsArray[1];
  31. parentOptions.color = newOptionsArray[2];
  32. }
  33. else if (typeof newOptions.font === 'object') {
  34. util.fillIfDefined(parentOptions, newOptions.font, allowDeletion);
  35. }
  36. parentOptions.size = Number(parentOptions.size);
  37. }
  38. /**
  39. * Main function. This is called from anything that wants to draw a label.
  40. * @param ctx
  41. * @param x
  42. * @param y
  43. * @param selected
  44. * @param baseline
  45. */
  46. draw(ctx, x, y, selected, baseline = 'middle') {
  47. // if no label, return
  48. if (this.options.label === undefined)
  49. return;
  50. // check if we have to render the label
  51. let viewFontSize = this.options.font.size * this.body.view.scale;
  52. if (this.options.label && viewFontSize < this.options.scaling.label.drawThreshold - 1)
  53. return;
  54. // update the size cache if required
  55. this.calculateLabelSize(ctx, selected, x, y, baseline);
  56. // create the fontfill background
  57. this._drawBackground(ctx);
  58. // draw text
  59. this._drawText(ctx, selected, x, y, baseline);
  60. }
  61. /**
  62. * Draws the label background
  63. * @param {CanvasRenderingContext2D} ctx
  64. * @private
  65. */
  66. _drawBackground(ctx) {
  67. if (this.options.font.background !== undefined && this.options.font.background !== "none") {
  68. ctx.fillStyle = this.options.font.background;
  69. let lineMargin = 2;
  70. switch (this.options.font.align) {
  71. case 'middle':
  72. ctx.fillRect(-this.size.width * 0.5, -this.size.height * 0.5, this.size.width, this.size.height);
  73. break;
  74. case 'top':
  75. ctx.fillRect(-this.size.width * 0.5, -(this.size.height + lineMargin), this.size.width, this.size.height);
  76. break;
  77. case 'bottom':
  78. ctx.fillRect(-this.size.width * 0.5, lineMargin, this.size.width, this.size.height);
  79. break;
  80. default:
  81. ctx.fillRect(this.size.left, this.size.top - 0.5*lineMargin, this.size.width, this.size.height);
  82. break;
  83. }
  84. }
  85. }
  86. /**
  87. *
  88. * @param ctx
  89. * @param x
  90. * @param baseline
  91. * @private
  92. */
  93. _drawText(ctx, selected, x, y, baseline = 'middle') {
  94. let fontSize = this.options.font.size;
  95. let viewFontSize = fontSize * this.body.view.scale;
  96. // this ensures that there will not be HUGE letters on screen by setting an upper limit on the visible text size (regardless of zoomLevel)
  97. if (viewFontSize >= this.options.scaling.label.maxVisible) {
  98. fontSize = Number(this.options.scaling.label.maxVisible) / this.body.view.scale;
  99. }
  100. let yLine = this.size.yLine;
  101. let [fontColor, strokeColor] = this._getColor(viewFontSize);
  102. [x, yLine] = this._setAlignment(ctx, x, yLine, baseline);
  103. // configure context for drawing the text
  104. ctx.font = (selected ? 'bold ' : '') + fontSize + "px " + this.options.font.face;
  105. ctx.fillStyle = fontColor;
  106. ctx.textAlign = 'center';
  107. // set the strokeWidth
  108. if (this.options.font.strokeWidth > 0) {
  109. ctx.lineWidth = this.options.font.strokeWidth;
  110. ctx.strokeStyle = strokeColor;
  111. ctx.lineJoin = 'round';
  112. }
  113. // draw the text
  114. for (let i = 0; i < this.lineCount; i++) {
  115. if (this.options.font.strokeWidth > 0) {
  116. ctx.strokeText(this.lines[i], x, yLine);
  117. }
  118. ctx.fillText(this.lines[i], x, yLine);
  119. yLine += fontSize;
  120. }
  121. }
  122. _setAlignment(ctx, x, yLine, baseline) {
  123. // check for label alignment (for edges)
  124. // TODO: make alignment for nodes
  125. if (this.options.font.align !== 'horizontal') {
  126. x = 0;
  127. yLine = 0;
  128. let lineMargin = 2;
  129. if (this.options.font.align === 'top') {
  130. ctx.textBaseline = 'alphabetic';
  131. yLine -= 2 * lineMargin; // distance from edge, required because we use alphabetic. Alphabetic has less difference between browsers
  132. }
  133. else if (this.options.font.align === 'bottom') {
  134. ctx.textBaseline = 'hanging';
  135. yLine += 2 * lineMargin;// distance from edge, required because we use hanging. Hanging has less difference between browsers
  136. }
  137. else {
  138. ctx.textBaseline = 'middle';
  139. }
  140. }
  141. else {
  142. ctx.textBaseline = baseline;
  143. }
  144. return [x,yLine];
  145. }
  146. /**
  147. * fade in when relative scale is between threshold and threshold - 1.
  148. * If the relative scale would be smaller than threshold -1 the draw function would have returned before coming here.
  149. *
  150. * @param viewFontSize
  151. * @returns {*[]}
  152. * @private
  153. */
  154. _getColor(viewFontSize) {
  155. let fontColor = this.options.font.color || '#000000';
  156. let strokeColor = this.options.font.strokeColor || '#ffffff';
  157. if (viewFontSize <= this.options.scaling.label.drawThreshold) {
  158. let opacity = Math.max(0, Math.min(1, 1 - (this.options.scaling.label.drawThreshold - viewFontSize)));
  159. fontColor = util.overrideOpacity(fontColor, opacity);
  160. strokeColor = util.overrideOpacity(strokeColor, opacity);
  161. }
  162. return [fontColor, strokeColor];
  163. }
  164. /**
  165. *
  166. * @param ctx
  167. * @param selected
  168. * @returns {{width: number, height: number}}
  169. */
  170. getTextSize(ctx, selected = false) {
  171. let size = {
  172. width: this._processLabel(ctx,selected),
  173. height: this.options.font.size * this.lineCount,
  174. lineCount: this.lineCount
  175. };
  176. return size;
  177. }
  178. /**
  179. *
  180. * @param ctx
  181. * @param selected
  182. * @param x
  183. * @param y
  184. * @param baseline
  185. */
  186. calculateLabelSize(ctx, selected, x = 0, y = 0, baseline = 'middle') {
  187. if (this.labelDirty === true) {
  188. this.size.width = this._processLabel(ctx,selected);
  189. }
  190. this.size.height = this.options.font.size * this.lineCount;
  191. this.size.left = x - this.size.width * 0.5;
  192. this.size.top = y - this.size.height * 0.5;
  193. this.size.yLine = y + (1 - this.lineCount) * 0.5 * this.options.font.size;
  194. if (baseline === "hanging") {
  195. this.size.top += 0.5 * this.options.font.size;
  196. this.size.top += 4; // distance from node, required because we use hanging. Hanging has less difference between browsers
  197. this.size.yLine += 4; // distance from node
  198. }
  199. this.labelDirty = false;
  200. }
  201. /**
  202. * This calculates the width as well as explodes the label string and calculates the amount of lines.
  203. * @param ctx
  204. * @param selected
  205. * @returns {number}
  206. * @private
  207. */
  208. _processLabel(ctx,selected) {
  209. let width = 0;
  210. let lines = [''];
  211. let lineCount = 0;
  212. if (this.options.label !== undefined) {
  213. lines = String(this.options.label).split('\n');
  214. lineCount = lines.length;
  215. ctx.font = (selected ? 'bold ' : '') + this.options.font.size + "px " + this.options.font.face;
  216. width = ctx.measureText(lines[0]).width;
  217. for (let i = 1; i < lineCount; i++) {
  218. let lineWidth = ctx.measureText(lines[i]).width;
  219. width = lineWidth > width ? lineWidth : width;
  220. }
  221. }
  222. this.lines = lines;
  223. this.lineCount = lineCount;
  224. return width;
  225. }
  226. }
  227. export default Label;