|
| 1 | +import { Action, Element } from '@antv/g2'; |
| 2 | +import { get } from '@antv/util'; |
| 3 | +import { Datum, Point } from '../../../../types'; |
| 4 | +import { findViewById } from '../../../../utils'; |
| 5 | +import { EDGES_VIEW_ID, NODES_VIEW_ID } from '../../constant'; |
| 6 | + |
| 7 | +export class SankeyNodeDragAction extends Action { |
| 8 | + /** |
| 9 | + * 是否在拖拽中的标记 |
| 10 | + */ |
| 11 | + private isDragging = false; |
| 12 | + |
| 13 | + /** |
| 14 | + * 鼠标上一次的位置的坐标点 |
| 15 | + */ |
| 16 | + private prevPoint: Point; |
| 17 | + /** |
| 18 | + * 之前的节点动画配置 |
| 19 | + */ |
| 20 | + private prevNodeAnimateCfg: any; |
| 21 | + /** |
| 22 | + * 之前的边动画配置 |
| 23 | + */ |
| 24 | + private prevEdgeAnimateCfg: any; |
| 25 | + /** |
| 26 | + * 当前拖拽的 element 索引 |
| 27 | + */ |
| 28 | + private currentElementIdx: number; |
| 29 | + |
| 30 | + /** |
| 31 | + * 当前操作的是否是 element |
| 32 | + */ |
| 33 | + private isNodeElement() { |
| 34 | + const shape = get(this.context, 'event.target'); |
| 35 | + if (shape) { |
| 36 | + const element = shape.get('element'); |
| 37 | + return element && element.getModel().data.isNode; |
| 38 | + } |
| 39 | + return false; |
| 40 | + } |
| 41 | + |
| 42 | + private getNodeView() { |
| 43 | + return findViewById(this.context.view, NODES_VIEW_ID); |
| 44 | + } |
| 45 | + |
| 46 | + private getEdgeView() { |
| 47 | + return findViewById(this.context.view, EDGES_VIEW_ID); |
| 48 | + } |
| 49 | + |
| 50 | + /** |
| 51 | + * 获取当前操作的 index |
| 52 | + * @param element |
| 53 | + */ |
| 54 | + private getCurrentDatumIdx(element: Element) { |
| 55 | + return this.getNodeView().geometries[0].elements.indexOf(element); |
| 56 | + } |
| 57 | + |
| 58 | + /** |
| 59 | + * 点击下去，开始 |
| 60 | + */ |
| 61 | + public start() { |
| 62 | + // 记录开始了的状态 |
| 63 | + if (this.isNodeElement()) { |
| 64 | + this.prevPoint = { |
| 65 | + x: get(this.context, 'event.x'), |
| 66 | + y: get(this.context, 'event.y'), |
| 67 | + }; |
| 68 | + |
| 69 | + const element = this.context.event.target.get('element'); |
| 70 | + const idx = this.getCurrentDatumIdx(element); |
| 71 | + |
| 72 | + if (idx === -1) { |
| 73 | + return; |
| 74 | + } |
| 75 | + |
| 76 | + this.currentElementIdx = idx; |
| 77 | + this.context.isDragging = true; |
| 78 | + this.isDragging = true; |
| 79 | + |
| 80 | + // 关闭动画并暂存配置 |
| 81 | + this.prevNodeAnimateCfg = this.getNodeView().getOptions().animate; |
| 82 | + this.prevEdgeAnimateCfg = this.getEdgeView().getOptions().animate; |
| 83 | + this.getNodeView().animate(false); |
| 84 | + this.getEdgeView().animate(false); |
| 85 | + } |
| 86 | + } |
| 87 | + |
| 88 | + /** |
| 89 | + * 移动过程中，平移 |
| 90 | + */ |
| 91 | + public translate() { |
| 92 | + if (this.isDragging) { |
| 93 | + const chart = this.context.view; |
| 94 | + |
| 95 | + const currentPoint = { |
| 96 | + x: get(this.context, 'event.x'), |
| 97 | + y: get(this.context, 'event.y'), |
| 98 | + }; |
| 99 | + |
| 100 | + const x = currentPoint.x - this.prevPoint.x; |
| 101 | + const y = currentPoint.y - this.prevPoint.y; |
| 102 | + |
| 103 | + const nodeView = this.getNodeView(); |
| 104 | + const element = nodeView.geometries[0].elements[this.currentElementIdx]; |
| 105 | + |
| 106 | + // 修改数据 |
| 107 | + if (element && element.getModel()) { |
| 108 | + const prevDatum: Datum = element.getModel().data; |
| 109 | + const data = nodeView.getOptions().data; |
| 110 | + const coordinate = nodeView.getCoordinate(); |
| 111 | + |
| 112 | + const datumGap = { |
| 113 | + x: x / coordinate.getWidth(), |
| 114 | + y: y / coordinate.getHeight(), |
| 115 | + }; |
| 116 | + |
| 117 | + const nextDatum = { |
| 118 | + ...prevDatum, |
| 119 | + x: prevDatum.x.map((x: number) => (x += datumGap.x)), |
| 120 | + y: prevDatum.y.map((y: number) => (y += datumGap.y)), |
| 121 | + }; |
| 122 | + // 处理一下在 [0, 1] 范围 |
| 123 | + |
| 124 | + // 1. 更新 node 数据 |
| 125 | + const newData = [...data]; |
| 126 | + newData[this.currentElementIdx] = nextDatum; |
| 127 | + nodeView.data(newData); |
| 128 | + |
| 129 | + // 2. 更新 edge 数据 |
| 130 | + const name = prevDatum.name; |
| 131 | + const edgeView = this.getEdgeView(); |
| 132 | + const edgeData = edgeView.getOptions().data; |
| 133 | + |
| 134 | + edgeData.forEach((datum) => { |
| 135 | + // 2.1 以该 node 为 source 的边，修改 [x0, x1, x2, x3] 中的 x0, x1 |
| 136 | + if (datum.source === name) { |
| 137 | + datum.x[0] += datumGap.x; |
| 138 | + datum.x[1] += datumGap.x; |
| 139 | + datum.y[0] += datumGap.y; |
| 140 | + datum.y[1] += datumGap.y; |
| 141 | + } |
| 142 | + |
| 143 | + // 2.2 以该 node 为 target 的边，修改 [x0, x1, x2, x3] 中的 x2, x3 |
| 144 | + if (datum.target === name) { |
| 145 | + datum.x[2] += datumGap.x; |
| 146 | + datum.x[3] += datumGap.x; |
| 147 | + datum.y[2] += datumGap.y; |
| 148 | + datum.y[3] += datumGap.y; |
| 149 | + } |
| 150 | + }); |
| 151 | + edgeView.data(edgeData); |
| 152 | + |
| 153 | + // 3. 更新最新位置 |
| 154 | + this.prevPoint = currentPoint; |
| 155 | + |
| 156 | + // node edge 都改变了，所以要从底层 render |
| 157 | + chart.render(true); |
| 158 | + } |
| 159 | + } |
| 160 | + } |
| 161 | + |
| 162 | + /** |
| 163 | + * 结论，清除状态 |
| 164 | + */ |
| 165 | + public end() { |
| 166 | + this.isDragging = false; |
| 167 | + this.context.isDragging = false; |
| 168 | + this.prevPoint = null; |
| 169 | + this.currentElementIdx = null; |
| 170 | + |
| 171 | + // 还原动画 |
| 172 | + this.getNodeView().animate(this.prevNodeAnimateCfg); |
| 173 | + this.getEdgeView().animate(this.prevEdgeAnimateCfg); |
| 174 | + } |
| 175 | +} |
0 commit comments