boost-attach.js 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144
  1. /* *
  2. *
  3. * Copyright (c) 2019-2019 Highsoft AS
  4. *
  5. * Boost module: stripped-down renderer for higher performance
  6. *
  7. * License: highcharts.com/license
  8. *
  9. * !!!!!!! SOURCE GETS TRANSPILED BY TYPESCRIPT. EDIT TS FILE ONLY. !!!!!!!
  10. *
  11. * */
  12. 'use strict';
  13. import H from '../../parts/Globals.js';
  14. import '../../parts/Series.js';
  15. import GLRenderer from './wgl-renderer.js';
  16. var win = H.win, doc = win.document, mainCanvas = doc.createElement('canvas');
  17. /**
  18. * Create a canvas + context and attach it to the target
  19. *
  20. * @private
  21. * @function createAndAttachRenderer
  22. *
  23. * @param {Highcharts.Chart} chart
  24. * the chart
  25. *
  26. * @param {Highcharts.Series} series
  27. * the series
  28. *
  29. * @return {Highcharts.BoostGLRenderer}
  30. * the canvas renderer
  31. */
  32. function createAndAttachRenderer(chart, series) {
  33. var width = chart.chartWidth, height = chart.chartHeight, target = chart, targetGroup = chart.seriesGroup || series.group, alpha = 1, foSupported = doc.implementation.hasFeature('www.http://w3.org/TR/SVG11/feature#Extensibility', '1.1');
  34. if (chart.isChartSeriesBoosting()) {
  35. target = chart;
  36. }
  37. else {
  38. target = series;
  39. }
  40. // Support for foreignObject is flimsy as best.
  41. // IE does not support it, and Chrome has a bug which messes up
  42. // the canvas draw order.
  43. // As such, we force the Image fallback for now, but leaving the
  44. // actual Canvas path in-place in case this changes in the future.
  45. foSupported = false;
  46. if (!target.renderTarget) {
  47. target.canvas = mainCanvas;
  48. // Fall back to image tag if foreignObject isn't supported,
  49. // or if we're exporting.
  50. if (chart.renderer.forExport || !foSupported) {
  51. target.renderTarget = chart.renderer.image('', 0, 0, width, height)
  52. .addClass('highcharts-boost-canvas')
  53. .add(targetGroup);
  54. target.boostClear = function () {
  55. target.renderTarget.attr({ href: '' });
  56. };
  57. target.boostCopy = function () {
  58. target.boostResizeTarget();
  59. target.renderTarget.attr({
  60. href: target.canvas.toDataURL('image/png')
  61. });
  62. };
  63. }
  64. else {
  65. target.renderTargetFo = chart.renderer
  66. .createElement('foreignObject')
  67. .add(targetGroup);
  68. target.renderTarget = doc.createElement('canvas');
  69. target.renderTargetCtx =
  70. target.renderTarget.getContext('2d');
  71. target.renderTargetFo.element.appendChild(target.renderTarget);
  72. target.boostClear = function () {
  73. target.renderTarget.width =
  74. target.canvas.width;
  75. target.renderTarget.height =
  76. target.canvas.height;
  77. };
  78. target.boostCopy = function () {
  79. target.renderTarget.width =
  80. target.canvas.width;
  81. target.renderTarget.height =
  82. target.canvas.height;
  83. target.renderTargetCtx
  84. .drawImage(target.canvas, 0, 0);
  85. };
  86. }
  87. target.boostResizeTarget = function () {
  88. width = chart.chartWidth;
  89. height = chart.chartHeight;
  90. (target.renderTargetFo || target.renderTarget)
  91. .attr({
  92. x: 0,
  93. y: 0,
  94. width: width,
  95. height: height
  96. })
  97. .css({
  98. pointerEvents: 'none',
  99. mixedBlendMode: 'normal',
  100. opacity: alpha
  101. });
  102. if (target instanceof H.Chart) {
  103. target.markerGroup.translate(chart.plotLeft, chart.plotTop);
  104. }
  105. };
  106. target.boostClipRect = chart.renderer.clipRect();
  107. (target.renderTargetFo || target.renderTarget)
  108. .clip(target.boostClipRect);
  109. if (target instanceof H.Chart) {
  110. target.markerGroup = target.renderer.g().add(targetGroup);
  111. target.markerGroup.translate(series.xAxis.pos, series.yAxis.pos);
  112. }
  113. }
  114. target.canvas.width = width;
  115. target.canvas.height = height;
  116. target.boostClipRect.attr(chart.getBoostClipRect(target));
  117. target.boostResizeTarget();
  118. target.boostClear();
  119. if (!target.ogl) {
  120. target.ogl = GLRenderer(function () {
  121. if (target.ogl.settings.debug.timeBufferCopy) {
  122. console.time('buffer copy'); // eslint-disable-line no-console
  123. }
  124. target.boostCopy();
  125. if (target.ogl.settings.debug.timeBufferCopy) {
  126. console.timeEnd('buffer copy'); // eslint-disable-line no-console
  127. }
  128. });
  129. if (!target.ogl.init(target.canvas)) {
  130. // The OGL renderer couldn't be inited.
  131. // This likely means a shader error as we wouldn't get to this point
  132. // if there was no WebGL support.
  133. H.error('[highcharts boost] - unable to init WebGL renderer');
  134. }
  135. // target.ogl.clear();
  136. target.ogl.setOptions(chart.options.boost || {});
  137. if (target instanceof H.Chart) {
  138. target.ogl.allocateBuffer(chart);
  139. }
  140. }
  141. target.ogl.setSize(width, height);
  142. return target.ogl;
  143. }
  144. export default createAndAttachRenderer;