echarts-gl.js 8.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279
  1. /**
  2. * echarts-gl
  3. * Extension pack of ECharts providing 3d plots and globe visualization
  4. *
  5. * Copyright (c) 2014, echarts-gl
  6. * All rights reserved.
  7. *
  8. * Redistribution and use in source and binary forms, with or without
  9. * modification, are permitted provided that the following conditions are met:
  10. *
  11. * * Redistributions of source code must retain the above copyright notice, this
  12. * list of conditions and the following disclaimer.
  13. *
  14. * * Redistributions in binary form must reproduce the above copyright notice,
  15. * this list of conditions and the following disclaimer in the documentation
  16. * and/or other materials provided with the distribution.
  17. *
  18. * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
  19. * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
  20. * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
  21. * DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
  22. * FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
  23. * DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
  24. * SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
  25. * CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
  26. * OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
  27. * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  28. */
  29. /**
  30. * @module echarts-gl
  31. * @author Yi Shen(http://github.com/pissang)
  32. */
  33. // PENDING Use a single canvas as layer or use image element?
  34. var echartsGl = {
  35. version: '1.1.1',
  36. dependencies: {
  37. echarts: '4.1.0',
  38. claygl: '1.2.1'
  39. }
  40. };
  41. import echarts from 'echarts/lib/echarts';
  42. import clayVersion from 'claygl/src/version';
  43. import LayerGL from './core/LayerGL';
  44. import backwardCompat from './preprocessor/backwardCompat';
  45. import graphicGL from './util/graphicGL';
  46. // Version checking
  47. var deps = echartsGl.dependencies;
  48. function versionTooOldMsg(name) {
  49. throw new Error(
  50. name + ' version is too old, needs ' + deps[name] + ' or higher'
  51. );
  52. }
  53. function checkVersion(version, name) {
  54. if ((version.replace('.', '') - 0) < (deps[name].replace('.', '') - 0)) {
  55. versionTooOldMsg(name);
  56. }
  57. // console.log('Loaded ' + name + ', version ' + version);
  58. }
  59. checkVersion(clayVersion, 'claygl');
  60. checkVersion(echarts.version, 'echarts');
  61. function EChartsGL (zr) {
  62. this._layers = {};
  63. this._zr = zr;
  64. }
  65. EChartsGL.prototype.update = function (ecModel, api) {
  66. var self = this;
  67. var zr = api.getZr();
  68. if (!zr.getWidth() || !zr.getHeight()) {
  69. console.warn('Dom has no width or height');
  70. return;
  71. }
  72. function getLayerGL(model) {
  73. var zlevel;
  74. // Host on coordinate system.
  75. if (model.coordinateSystem && model.coordinateSystem.model) {
  76. zlevel = model.get('zlevel');
  77. }
  78. else {
  79. zlevel = model.get('zlevel');
  80. }
  81. var layers = self._layers;
  82. var layerGL = layers[zlevel];
  83. if (!layerGL) {
  84. layerGL = layers[zlevel] = new LayerGL('gl-' + zlevel, zr);
  85. if (zr.painter.isSingleCanvas()) {
  86. layerGL.virtual = true;
  87. // If container is canvas, use image to represent LayerGL
  88. // FIXME Performance
  89. var img = new echarts.graphic.Image({
  90. z: 1e4,
  91. style: {
  92. image: layerGL.renderer.canvas
  93. },
  94. silent: true
  95. });
  96. layerGL.__hostImage = img;
  97. zr.add(img);
  98. }
  99. zr.painter.insertLayer(zlevel, layerGL);
  100. }
  101. if (layerGL.__hostImage) {
  102. layerGL.__hostImage.setStyle({
  103. width: layerGL.renderer.getWidth(),
  104. height: layerGL.renderer.getHeight()
  105. });
  106. }
  107. return layerGL;
  108. }
  109. function setSilent(groupGL, silent) {
  110. if (groupGL) {
  111. groupGL.traverse(function (mesh) {
  112. if (mesh.isRenderable && mesh.isRenderable()) {
  113. mesh.ignorePicking = mesh.$ignorePicking != null
  114. ? mesh.$ignorePicking : silent;
  115. }
  116. });
  117. }
  118. }
  119. for (var zlevel in this._layers) {
  120. this._layers[zlevel].removeViewsAll();
  121. }
  122. ecModel.eachComponent(function (componentType, componentModel) {
  123. if (componentType !== 'series') {
  124. var view = api.getViewOfComponentModel(componentModel);
  125. var coordSys = componentModel.coordinateSystem;
  126. // View with __ecgl__ flag is a echarts-gl component.
  127. if (view.__ecgl__) {
  128. var viewGL;
  129. if (coordSys) {
  130. if (!coordSys.viewGL) {
  131. console.error('Can\'t find viewGL in coordinateSystem of component ' + componentModel.id);
  132. return;
  133. }
  134. viewGL = coordSys.viewGL;
  135. }
  136. else {
  137. if (!componentModel.viewGL) {
  138. console.error('Can\'t find viewGL of component ' + componentModel.id);
  139. return;
  140. }
  141. viewGL = coordSys.viewGL;
  142. }
  143. viewGL = coordSys.viewGL;
  144. var layerGL = getLayerGL(componentModel);
  145. layerGL.addView(viewGL);
  146. view.afterRender && view.afterRender(
  147. componentModel, ecModel, api, layerGL
  148. );
  149. setSilent(view.groupGL, componentModel.get('silent'));
  150. }
  151. }
  152. });
  153. ecModel.eachSeries(function (seriesModel) {
  154. var chartView = api.getViewOfSeriesModel(seriesModel);
  155. var coordSys = seriesModel.coordinateSystem;
  156. if (chartView.__ecgl__) {
  157. if ((coordSys && !coordSys.viewGL) && !chartView.viewGL) {
  158. console.error('Can\'t find viewGL of series ' + chartView.id);
  159. return;
  160. }
  161. var viewGL = (coordSys && coordSys.viewGL) || chartView.viewGL;
  162. // TODO Check zlevel not same with component of coordinate system ?
  163. var layerGL = getLayerGL(seriesModel);
  164. layerGL.addView(viewGL);
  165. chartView.afterRender && chartView.afterRender(
  166. seriesModel, ecModel, api, layerGL
  167. );
  168. setSilent(chartView.groupGL, seriesModel.get('silent'));
  169. }
  170. });
  171. };
  172. // Hack original getRenderedCanvas. Will removed after new echarts released
  173. // TODO
  174. var oldInit = echarts.init;
  175. echarts.init = function () {
  176. var chart = oldInit.apply(this, arguments);
  177. chart.getZr().painter.getRenderedCanvas = function (opts) {
  178. opts = opts || {};
  179. if (this._singleCanvas) {
  180. return this._layers[0].dom;
  181. }
  182. var canvas = document.createElement('canvas');
  183. var dpr = opts.pixelRatio || this.dpr;
  184. canvas.width = this.getWidth() * dpr;
  185. canvas.height = this.getHeight() * dpr;
  186. var ctx = canvas.getContext('2d');
  187. ctx.dpr = dpr;
  188. ctx.clearRect(0, 0, canvas.width, canvas.height);
  189. if (opts.backgroundColor) {
  190. ctx.fillStyle = opts.backgroundColor;
  191. ctx.fillRect(0, 0, canvas.width, canvas.height);
  192. }
  193. var displayList = this.storage.getDisplayList(true);
  194. var scope = {};
  195. var zlevel;
  196. var self = this;
  197. function findAndDrawOtherLayer(smaller, larger) {
  198. var zlevelList = self._zlevelList;
  199. if (smaller == null) {
  200. smaller = -Infinity;
  201. }
  202. var intermediateLayer;
  203. for (var i = 0; i < zlevelList.length; i++) {
  204. var z = zlevelList[i];
  205. var layer = self._layers[z];
  206. if (!layer.__builtin__ && z > smaller && z < larger) {
  207. intermediateLayer = layer;
  208. break;
  209. }
  210. }
  211. if (intermediateLayer && intermediateLayer.renderToCanvas) {
  212. ctx.save();
  213. intermediateLayer.renderToCanvas(ctx);
  214. ctx.restore();
  215. }
  216. }
  217. var layer = {
  218. ctx: ctx
  219. };
  220. for (var i = 0; i < displayList.length; i++) {
  221. var el = displayList[i];
  222. if (el.zlevel !== zlevel) {
  223. findAndDrawOtherLayer(zlevel, el.zlevel);
  224. zlevel = el.zlevel;
  225. }
  226. this._doPaintEl(el, layer, true, scope);
  227. }
  228. findAndDrawOtherLayer(zlevel, Infinity);
  229. return canvas;
  230. };
  231. return chart;
  232. };
  233. echarts.registerPostUpdate(function (ecModel, api) {
  234. var zr = api.getZr();
  235. var egl = zr.__egl = zr.__egl || new EChartsGL(zr);
  236. egl.update(ecModel, api);
  237. });
  238. echarts.registerPreprocessor(backwardCompat);
  239. echarts.graphicGL = graphicGL;
  240. export default EChartsGL;