前端-增加处理描述

zhangwei

4 天以前 9a416e0c3308badb6135ce921e6307f31e0dd463

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
import { BezierEdge, BezierEdgeModel } from '@logicflow/core';
 
class CustomEdge2 extends BezierEdge { }
 
class CustomEdgeModel2 extends BezierEdgeModel {
    getEdgeStyle() {
        const style = super.getEdgeStyle();
        // svg属性
        style.strokeWidth = 1;
        style.stroke = '#ababac';
        return style;
    }
    /**
     * 重写此方法，使保存数据是能带上锚点数据。
     */
    getData() {
        const data = super.getData();
        data.sourceAnchorId = this.sourceAnchorId;
        data.targetAnchorId = this.targetAnchorId;
        return data;
    }
    /**
     * 给边自定义方案，使其支持基于锚点的位置更新边的路径
     */
    updatePathByAnchor() {
        // TODO
        const sourceNodeModel = this.graphModel.getNodeModelById(this.sourceNodeId);
        const sourceAnchor = sourceNodeModel
            .getDefaultAnchor()
            .find((anchor) => anchor.id === this.sourceAnchorId);
        const targetNodeModel = this.graphModel.getNodeModelById(this.targetNodeId);
        const targetAnchor = targetNodeModel
            .getDefaultAnchor()
            .find((anchor) => anchor.id === this.targetAnchorId);
        const startPoint = {
            x: sourceAnchor.x,
            y: sourceAnchor.y,
        };
        this.updateStartPoint(startPoint);
        const endPoint = {
            x: targetAnchor.x,
            y: targetAnchor.y,
        };
        this.updateEndPoint(endPoint);
        // 这里需要将原有的pointsList设置为空，才能触发bezier的自动计算control点。
        this.pointsList = [];
        this.initPoints();
    }
}
 
export default {
    type: 'edge-sql',
    view: CustomEdge2,
    model: CustomEdgeModel2,
};