adaptor.js 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156
  1. import { __spreadArray } from "tslib";
  2. import { uniq } from '@antv/util';
  3. import { theme } from '../../adaptor/common';
  4. import { edge, polygon } from '../../adaptor/geometries';
  5. import { deepAssign, findViewById, flow } from '../../utils';
  6. import { addViewAnimation } from '../../utils/view';
  7. import { COLOR_FIELD, EDGES_VIEW_ID, NODES_VIEW_ID, X_FIELD, Y_FIELD } from './constant';
  8. import { transformToViewsData } from './helper';
  9. /**
  10. * 默认配置项 处理
  11. * @param params
  12. */
  13. function defaultOptions(params) {
  14. var options = params.options;
  15. var _a = options.rawFields, rawFields = _a === void 0 ? [] : _a;
  16. return deepAssign({}, {
  17. options: {
  18. tooltip: {
  19. fields: uniq(__spreadArray(['name', 'source', 'target', 'value', 'isNode'], rawFields, true)),
  20. },
  21. label: {
  22. fields: uniq(__spreadArray(['x', 'name'], rawFields, true)),
  23. },
  24. },
  25. }, params);
  26. }
  27. /**
  28. * geometry 处理
  29. * @param params
  30. */
  31. function geometry(params) {
  32. var chart = params.chart, options = params.options;
  33. var color = options.color, nodeStyle = options.nodeStyle, edgeStyle = options.edgeStyle, label = options.label, tooltip = options.tooltip, nodeState = options.nodeState, edgeState = options.edgeState, _a = options.rawFields, rawFields = _a === void 0 ? [] : _a;
  34. // 1. 组件,优先设置,因为子 view 会继承配置
  35. chart.legend(false);
  36. chart.tooltip(tooltip);
  37. chart.axis(false);
  38. // y 镜像一下,防止图形顺序和数据顺序反了
  39. chart.coordinate().reflect('y');
  40. // 2. node edge views
  41. // @ts-ignore
  42. var _b = transformToViewsData(options, chart.width, chart.height), nodes = _b.nodes, edges = _b.edges;
  43. // edge view
  44. var edgeView = chart.createView({ id: EDGES_VIEW_ID });
  45. edgeView.data(edges);
  46. edge({
  47. chart: edgeView,
  48. // @ts-ignore
  49. options: {
  50. xField: X_FIELD,
  51. yField: Y_FIELD,
  52. seriesField: COLOR_FIELD,
  53. rawFields: __spreadArray(['source', 'target'], rawFields, true),
  54. edge: {
  55. color: color,
  56. style: edgeStyle,
  57. shape: 'arc',
  58. },
  59. tooltip: tooltip,
  60. state: edgeState,
  61. },
  62. });
  63. var nodeView = chart.createView({ id: NODES_VIEW_ID });
  64. nodeView.data(nodes);
  65. polygon({
  66. chart: nodeView,
  67. options: {
  68. xField: X_FIELD,
  69. yField: Y_FIELD,
  70. seriesField: COLOR_FIELD,
  71. polygon: {
  72. color: color,
  73. style: nodeStyle,
  74. },
  75. label: label,
  76. tooltip: tooltip,
  77. state: nodeState,
  78. },
  79. });
  80. chart.interaction('element-active');
  81. // scale
  82. chart.scale({
  83. x: { sync: true, nice: true, min: 0, max: 1, minLimit: 0, maxLimit: 1 },
  84. y: { sync: true, nice: true, min: 0, max: 1, minLimit: 0, maxLimit: 1 },
  85. name: { sync: 'color', type: 'cat' },
  86. });
  87. return params;
  88. }
  89. /**
  90. * 动画
  91. * @param params
  92. */
  93. export function animation(params) {
  94. var chart = params.chart, options = params.options;
  95. var animation = options.animation;
  96. var geometries = __spreadArray(__spreadArray([], chart.views[0].geometries, true), chart.views[1].geometries, true);
  97. addViewAnimation(chart, animation, geometries);
  98. return params;
  99. }
  100. /**
  101. * 节点拖动
  102. * @param params
  103. */
  104. export function nodeDraggable(params) {
  105. var chart = params.chart, options = params.options;
  106. var nodeDraggable = options.nodeDraggable;
  107. var DRAG_INTERACTION = 'sankey-node-draggable';
  108. if (nodeDraggable) {
  109. chart.interaction(DRAG_INTERACTION);
  110. }
  111. else {
  112. chart.removeInteraction(DRAG_INTERACTION);
  113. }
  114. return params;
  115. }
  116. /**
  117. * Interaction 配置
  118. * @param params
  119. */
  120. function interaction(params) {
  121. var chart = params.chart, options = params.options;
  122. var _a = options.interactions, interactions = _a === void 0 ? [] : _a;
  123. var nodeInteractions = [].concat(interactions, options.nodeInteractions || []);
  124. var edgeInteractions = [].concat(interactions, options.edgeInteractions || []);
  125. var nodeView = findViewById(chart, NODES_VIEW_ID);
  126. var edgeView = findViewById(chart, EDGES_VIEW_ID);
  127. nodeInteractions.forEach(function (i) {
  128. if ((i === null || i === void 0 ? void 0 : i.enable) === false) {
  129. nodeView.removeInteraction(i.type);
  130. }
  131. else {
  132. nodeView.interaction(i.type, i.cfg || {});
  133. }
  134. });
  135. edgeInteractions.forEach(function (i) {
  136. if ((i === null || i === void 0 ? void 0 : i.enable) === false) {
  137. edgeView.removeInteraction(i.type);
  138. }
  139. else {
  140. edgeView.interaction(i.type, i.cfg || {});
  141. }
  142. });
  143. return params;
  144. }
  145. /**
  146. * 图适配器
  147. * @param chart
  148. * @param options
  149. */
  150. export function adaptor(params) {
  151. // flow 的方式处理所有的配置到 G2 API
  152. return flow(defaultOptions, geometry, interaction, nodeDraggable, animation, theme
  153. // ... 其他的 adaptor flow
  154. )(params);
  155. }
  156. //# sourceMappingURL=adaptor.js.map