brush.js 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309
  1. "use strict";
  2. Object.defineProperty(exports, "__esModule", { value: true });
  3. exports.getInteractionCfg = void 0;
  4. var g2_1 = require("@antv/g2");
  5. var reset_button_1 = require("./actions/reset-button");
  6. (0, g2_1.registerAction)('brush-reset-button', reset_button_1.ButtonAction, {
  7. name: 'brush-reset-button',
  8. });
  9. (0, g2_1.registerInteraction)('filter-action', {});
  10. /**
  11. * G2 已经内置了 brush、brush-x、brush-y 等交互,其它:
  12. *
  13. * 1. element-range-highlight 是否可用重命名为 brush-highlight?(mask 可以移动)
  14. * 2. brush-visible 与 brush 的区别是?
  15. */
  16. function isPointInView(context) {
  17. return context.isInPlot();
  18. }
  19. /**
  20. * 获取 交互 start 阶段的相关配置
  21. */
  22. function getInteractionCfg(interactionType, brushType, options) {
  23. var _a = options || {}, mask = _a.mask, isStartEnable = _a.isStartEnable;
  24. var maskType = brushType || 'rect';
  25. switch (interactionType) {
  26. case 'brush':
  27. return {
  28. showEnable: [
  29. { trigger: 'plot:mouseenter', action: 'cursor:crosshair', isEnable: isStartEnable || (function () { return true; }) },
  30. { trigger: 'plot:mouseleave', action: 'cursor:default' },
  31. ],
  32. start: [
  33. {
  34. trigger: 'mousedown',
  35. isEnable: isStartEnable || isPointInView,
  36. action: ['brush:start', "".concat(maskType, "-mask:start"), "".concat(maskType, "-mask:show")],
  37. // 对应第二个action的参数
  38. arg: [null, { maskStyle: mask === null || mask === void 0 ? void 0 : mask.style }],
  39. },
  40. ],
  41. processing: [
  42. {
  43. trigger: 'mousemove',
  44. isEnable: isPointInView,
  45. action: ["".concat(maskType, "-mask:resize")],
  46. },
  47. ],
  48. end: [
  49. {
  50. trigger: 'mouseup',
  51. isEnable: isPointInView,
  52. action: [
  53. 'brush:filter',
  54. 'brush:end',
  55. "".concat(maskType, "-mask:end"),
  56. "".concat(maskType, "-mask:hide"),
  57. 'brush-reset-button:show',
  58. ],
  59. },
  60. ],
  61. rollback: [
  62. {
  63. trigger: 'brush-reset-button:click',
  64. action: ['brush:reset', 'brush-reset-button:hide', 'cursor:crosshair'],
  65. },
  66. ],
  67. };
  68. case 'brush-highlight':
  69. return {
  70. showEnable: [
  71. { trigger: 'plot:mouseenter', action: 'cursor:crosshair', isEnable: isStartEnable || (function () { return true; }) },
  72. { trigger: 'plot:mousemove', action: 'cursor:crosshair', isEnable: isStartEnable || (function () { return true; }) },
  73. {
  74. trigger: 'plot:mousemove',
  75. action: 'cursor:default',
  76. isEnable: function (context) { return (isStartEnable ? !isStartEnable(context) : false); },
  77. },
  78. { trigger: 'mask:mouseenter', action: 'cursor:move', isEnable: isStartEnable || (function () { return true; }) },
  79. { trigger: 'plot:mouseleave', action: 'cursor:default' },
  80. { trigger: 'mask:mouseleave', action: 'cursor:crosshair' },
  81. ],
  82. start: [
  83. {
  84. trigger: 'plot:mousedown',
  85. isEnable: isStartEnable ||
  86. (function (context) {
  87. // 不要点击在 mask 上重新开始
  88. return !context.isInShape('mask');
  89. }),
  90. action: ["".concat(maskType, "-mask:start"), "".concat(maskType, "-mask:show")],
  91. // 对应第 1 个action的参数
  92. arg: [{ maskStyle: mask === null || mask === void 0 ? void 0 : mask.style }],
  93. },
  94. {
  95. trigger: 'mask:dragstart',
  96. action: ["".concat(maskType, "-mask:moveStart")],
  97. },
  98. ],
  99. processing: [
  100. {
  101. trigger: 'plot:mousemove',
  102. action: ["".concat(maskType, "-mask:resize")],
  103. },
  104. {
  105. trigger: 'mask:drag',
  106. action: ["".concat(maskType, "-mask:move")],
  107. },
  108. {
  109. trigger: 'mask:change',
  110. action: ['element-range-highlight:highlight'],
  111. },
  112. ],
  113. end: [
  114. { trigger: 'plot:mouseup', action: ["".concat(maskType, "-mask:end")] },
  115. { trigger: 'mask:dragend', action: ["".concat(maskType, "-mask:moveEnd")] },
  116. {
  117. trigger: 'document:mouseup',
  118. isEnable: function (context) {
  119. return !context.isInPlot();
  120. },
  121. action: ['element-range-highlight:clear', "".concat(maskType, "-mask:end"), "".concat(maskType, "-mask:hide")],
  122. },
  123. ],
  124. rollback: [{ trigger: 'dblclick', action: ['element-range-highlight:clear', "".concat(maskType, "-mask:hide")] }],
  125. };
  126. case 'brush-x':
  127. return {
  128. showEnable: [
  129. { trigger: 'plot:mouseenter', action: 'cursor:crosshair', isEnable: isStartEnable || (function () { return true; }) },
  130. { trigger: 'plot:mouseleave', action: 'cursor:default' },
  131. ],
  132. start: [
  133. {
  134. trigger: 'mousedown',
  135. isEnable: isStartEnable || isPointInView,
  136. action: ['brush-x:start', "".concat(maskType, "-mask:start"), "".concat(maskType, "-mask:show")],
  137. // 对应第二个action的参数
  138. arg: [null, { maskStyle: mask === null || mask === void 0 ? void 0 : mask.style }],
  139. },
  140. ],
  141. processing: [
  142. {
  143. trigger: 'mousemove',
  144. isEnable: isPointInView,
  145. action: ["".concat(maskType, "-mask:resize")],
  146. },
  147. ],
  148. end: [
  149. {
  150. trigger: 'mouseup',
  151. isEnable: isPointInView,
  152. action: ['brush-x:filter', 'brush-x:end', "".concat(maskType, "-mask:end"), "".concat(maskType, "-mask:hide")],
  153. },
  154. ],
  155. rollback: [{ trigger: 'dblclick', action: ['brush-x:reset'] }],
  156. };
  157. case 'brush-x-highlight':
  158. return {
  159. showEnable: [
  160. { trigger: 'plot:mouseenter', action: 'cursor:crosshair', isEnable: isStartEnable || (function () { return true; }) },
  161. { trigger: 'mask:mouseenter', action: 'cursor:move', isEnable: isStartEnable || (function () { return true; }) },
  162. { trigger: 'plot:mouseleave', action: 'cursor:default' },
  163. { trigger: 'mask:mouseleave', action: 'cursor:crosshair' },
  164. ],
  165. start: [
  166. {
  167. trigger: 'plot:mousedown',
  168. isEnable: isStartEnable ||
  169. (function (context) {
  170. // 不要点击在 mask 上重新开始
  171. return !context.isInShape('mask');
  172. }),
  173. action: ["".concat(maskType, "-mask:start"), "".concat(maskType, "-mask:show")],
  174. // 对应第 1 个action的参数
  175. arg: [{ maskStyle: mask === null || mask === void 0 ? void 0 : mask.style }],
  176. },
  177. {
  178. trigger: 'mask:dragstart',
  179. action: ["".concat(maskType, "-mask:moveStart")],
  180. },
  181. ],
  182. processing: [
  183. {
  184. trigger: 'plot:mousemove',
  185. action: ["".concat(maskType, "-mask:resize")],
  186. },
  187. {
  188. trigger: 'mask:drag',
  189. action: ["".concat(maskType, "-mask:move")],
  190. },
  191. {
  192. trigger: 'mask:change',
  193. action: ['element-range-highlight:highlight'],
  194. },
  195. ],
  196. end: [
  197. { trigger: 'plot:mouseup', action: ["".concat(maskType, "-mask:end")] },
  198. { trigger: 'mask:dragend', action: ["".concat(maskType, "-mask:moveEnd")] },
  199. {
  200. trigger: 'document:mouseup',
  201. isEnable: function (context) {
  202. return !context.isInPlot();
  203. },
  204. action: ['element-range-highlight:clear', "".concat(maskType, "-mask:end"), "".concat(maskType, "-mask:hide")],
  205. },
  206. ],
  207. rollback: [{ trigger: 'dblclick', action: ['element-range-highlight:clear', "".concat(maskType, "-mask:hide")] }],
  208. };
  209. case 'brush-y':
  210. return {
  211. showEnable: [
  212. { trigger: 'plot:mouseenter', action: 'cursor:crosshair', isEnable: isStartEnable || (function () { return true; }) },
  213. { trigger: 'plot:mouseleave', action: 'cursor:default' },
  214. ],
  215. start: [
  216. {
  217. trigger: 'mousedown',
  218. isEnable: isStartEnable || isPointInView,
  219. action: ['brush-y:start', "".concat(maskType, "-mask:start"), "".concat(maskType, "-mask:show")],
  220. // 对应第二个action的参数
  221. arg: [null, { maskStyle: mask === null || mask === void 0 ? void 0 : mask.style }],
  222. },
  223. ],
  224. processing: [
  225. {
  226. trigger: 'mousemove',
  227. isEnable: isPointInView,
  228. action: ["".concat(maskType, "-mask:resize")],
  229. },
  230. ],
  231. end: [
  232. {
  233. trigger: 'mouseup',
  234. isEnable: isPointInView,
  235. action: ['brush-y:filter', 'brush-y:end', "".concat(maskType, "-mask:end"), "".concat(maskType, "-mask:hide")],
  236. },
  237. ],
  238. rollback: [{ trigger: 'dblclick', action: ['brush-y:reset'] }],
  239. };
  240. case 'brush-y-highlight':
  241. return {
  242. showEnable: [
  243. { trigger: 'plot:mouseenter', action: 'cursor:crosshair', isEnable: isStartEnable || (function () { return true; }) },
  244. { trigger: 'mask:mouseenter', action: 'cursor:move', isEnable: isStartEnable || (function () { return true; }) },
  245. { trigger: 'plot:mouseleave', action: 'cursor:default' },
  246. { trigger: 'mask:mouseleave', action: 'cursor:crosshair' },
  247. ],
  248. start: [
  249. {
  250. trigger: 'plot:mousedown',
  251. isEnable: isStartEnable ||
  252. (function (context) {
  253. // 不要点击在 mask 上重新开始
  254. return !context.isInShape('mask');
  255. }),
  256. action: ["".concat(maskType, "-mask:start"), "".concat(maskType, "-mask:show")],
  257. // 对应第 1 个action的参数
  258. arg: [{ maskStyle: mask === null || mask === void 0 ? void 0 : mask.style }],
  259. },
  260. {
  261. trigger: 'mask:dragstart',
  262. action: ["".concat(maskType, "-mask:moveStart")],
  263. },
  264. ],
  265. processing: [
  266. {
  267. trigger: 'plot:mousemove',
  268. action: ["".concat(maskType, "-mask:resize")],
  269. },
  270. {
  271. trigger: 'mask:drag',
  272. action: ["".concat(maskType, "-mask:move")],
  273. },
  274. {
  275. trigger: 'mask:change',
  276. action: ['element-range-highlight:highlight'],
  277. },
  278. ],
  279. end: [
  280. { trigger: 'plot:mouseup', action: ["".concat(maskType, "-mask:end")] },
  281. { trigger: 'mask:dragend', action: ["".concat(maskType, "-mask:moveEnd")] },
  282. {
  283. trigger: 'document:mouseup',
  284. isEnable: function (context) {
  285. return !context.isInPlot();
  286. },
  287. action: ['element-range-highlight:clear', "".concat(maskType, "-mask:end"), "".concat(maskType, "-mask:hide")],
  288. },
  289. ],
  290. rollback: [{ trigger: 'dblclick', action: ['element-range-highlight:clear', "".concat(maskType, "-mask:hide")] }],
  291. };
  292. default:
  293. return {};
  294. }
  295. }
  296. exports.getInteractionCfg = getInteractionCfg;
  297. // 直接拷贝过来的
  298. (0, g2_1.registerInteraction)('brush', getInteractionCfg('brush'));
  299. // 复写 element-range-highlight interaction
  300. (0, g2_1.registerInteraction)('brush-highlight', getInteractionCfg('brush-highlight'));
  301. // 复写
  302. (0, g2_1.registerInteraction)('brush-x', getInteractionCfg('brush-x', 'x-rect'));
  303. // 复写
  304. (0, g2_1.registerInteraction)('brush-y', getInteractionCfg('brush-y', 'y-rect'));
  305. // 新增, x 框选高亮
  306. (0, g2_1.registerInteraction)('brush-x-highlight', getInteractionCfg('brush-x-highlight', 'x-rect'));
  307. // 新增, y 框选高亮
  308. (0, g2_1.registerInteraction)('brush-y-highlight', getInteractionCfg('brush-y-highlight', 'y-rect'));
  309. //# sourceMappingURL=brush.js.map