fix: 修复svlink lable的bug
This commit is contained in:
黎智洲
parent
2e5a701980
commit
9d2d9d1fd2
@ -1,66 +1,80 @@
|
||||
import { EdgeConfig, IEdge } from "@antv/g6-core";
|
||||
import { Util } from "../Common/util";
|
||||
import { LinkLabelOption, LinkOption, Style } from "../options";
|
||||
import { SVModel } from "./SVModel";
|
||||
import { SVNode } from "./SVNode";
|
||||
import { EdgeConfig, IEdge } from '@antv/g6-core';
|
||||
import { Util } from '../Common/util';
|
||||
import { LinkLabelOption, LinkOption, Style } from '../options';
|
||||
import { SVModel } from './SVModel';
|
||||
import { SVNode } from './SVNode';
|
||||
|
||||
export class SVLink extends SVModel {
|
||||
public node: SVNode;
|
||||
public target: SVNode;
|
||||
public linkIndex: number;
|
||||
export class SVLink extends SVModel {
|
||||
public node: SVNode;
|
||||
public target: SVNode;
|
||||
public linkIndex: number;
|
||||
|
||||
public shadowG6Item: IEdge;
|
||||
public G6Item: IEdge;
|
||||
public shadowG6Item: IEdge;
|
||||
public G6Item: IEdge;
|
||||
|
||||
constructor(id: string, type: string, group: string, layout: string, node: SVNode, target: SVNode, index: number, options: LinkOption) {
|
||||
super(id, type, group, layout, 'link');
|
||||
constructor(
|
||||
id: string,
|
||||
type: string,
|
||||
group: string,
|
||||
layout: string,
|
||||
node: SVNode,
|
||||
target: SVNode,
|
||||
index: number,
|
||||
options: LinkOption
|
||||
) {
|
||||
super(id, type, group, layout, 'link');
|
||||
|
||||
this.node = node;
|
||||
this.target = target;
|
||||
this.linkIndex = index;
|
||||
this.node = node;
|
||||
this.target = target;
|
||||
this.linkIndex = index;
|
||||
|
||||
node.links.outDegree.push(this);
|
||||
target.links.inDegree.push(this);
|
||||
this.G6ModelProps = this.generateG6ModelProps(options);
|
||||
}
|
||||
node.links.outDegree.push(this);
|
||||
target.links.inDegree.push(this);
|
||||
this.G6ModelProps = this.generateG6ModelProps(options);
|
||||
}
|
||||
|
||||
generateG6ModelProps(options: LinkOption): EdgeConfig {
|
||||
let sourceAnchor = options.sourceAnchor,
|
||||
targetAnchor = options.targetAnchor;
|
||||
generateG6ModelProps(options: LinkOption): EdgeConfig {
|
||||
let sourceAnchor = options.sourceAnchor,
|
||||
targetAnchor = options.targetAnchor;
|
||||
|
||||
if(options.sourceAnchor && typeof options.sourceAnchor === 'function' && this.linkIndex !== null) {
|
||||
sourceAnchor = options.sourceAnchor(this.linkIndex);
|
||||
}
|
||||
if (options.sourceAnchor && typeof options.sourceAnchor === 'function' && this.linkIndex !== null) {
|
||||
sourceAnchor = options.sourceAnchor(this.linkIndex);
|
||||
}
|
||||
|
||||
if(options.targetAnchor && typeof options.targetAnchor === 'function' && this.linkIndex !== null) {
|
||||
targetAnchor = options.targetAnchor(this.linkIndex);
|
||||
}
|
||||
if (options.targetAnchor && typeof options.targetAnchor === 'function' && this.linkIndex !== null) {
|
||||
targetAnchor = options.targetAnchor(this.linkIndex);
|
||||
}
|
||||
|
||||
return {
|
||||
id: this.id,
|
||||
type: options.type,
|
||||
source: this.node.id,
|
||||
target: this.target.id,
|
||||
sourceAnchor,
|
||||
targetAnchor,
|
||||
label: this.target.sourceNode.freed ? 'freed' : options.label,
|
||||
style: Util.objectClone<Style>(options.style),
|
||||
labelCfg: this.target.sourceNode.freed ? {position: 'start', autoRotate: true, refY:5 ,style: { fontSize: 10, opacity: 0.7}} : Util.objectClone<LinkLabelOption>(options.labelOptions),
|
||||
curveOffset: options.curveOffset
|
||||
};
|
||||
}
|
||||
let label = this.target.sourceNode.freed ? 'freed' : '',
|
||||
labelCfg = this.target.sourceNode.freed
|
||||
? { position: 'start', autoRotate: true, refY: 7, style: { fontSize: 11, opacity: 0.8 } }
|
||||
: Util.objectClone<LinkLabelOption>(options.labelOptions || {} as LinkLabelOption);
|
||||
|
||||
triggerHighlight(changeHighlightColor: string) {
|
||||
this.originStyle = Util.objectClone(this.G6ModelProps.style);
|
||||
this.set('style', {
|
||||
stroke: changeHighlightColor,
|
||||
});
|
||||
}
|
||||
return {
|
||||
id: this.id,
|
||||
type: options.type,
|
||||
source: this.node.id,
|
||||
target: this.target.id,
|
||||
sourceAnchor,
|
||||
targetAnchor,
|
||||
label,
|
||||
style: Util.objectClone<Style>(options.style),
|
||||
labelCfg,
|
||||
curveOffset: options.curveOffset,
|
||||
};
|
||||
}
|
||||
|
||||
beforeDestroy(): void {
|
||||
Util.removeFromList(this.target.links.inDegree, item => item.id === this.id);
|
||||
Util.removeFromList(this.node.links.outDegree, item => item.id === this.id);
|
||||
this.node = null;
|
||||
this.target = null;
|
||||
}
|
||||
};
|
||||
triggerHighlight(changeHighlightColor: string) {
|
||||
this.originStyle = Util.objectClone(this.G6ModelProps.style);
|
||||
this.set('style', {
|
||||
stroke: changeHighlightColor,
|
||||
});
|
||||
}
|
||||
|
||||
beforeDestroy(): void {
|
||||
Util.removeFromList(this.target.links.inDegree, item => item.id === this.id);
|
||||
Util.removeFromList(this.node.links.outDegree, item => item.id === this.id);
|
||||
this.node = null;
|
||||
this.target = null;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,103 +0,0 @@
|
||||
import { Util } from '../Common/util';
|
||||
|
||||
export default Util.registerShape(
|
||||
'tri-tree-node',
|
||||
{
|
||||
draw(cfg, group) {
|
||||
cfg.size = cfg.size;
|
||||
|
||||
const width = cfg.size[0],
|
||||
height = cfg.size[1];
|
||||
|
||||
const wrapperRect = group.addShape('rect', {
|
||||
attrs: {
|
||||
x: width / 2,
|
||||
y: height / 2,
|
||||
width: width,
|
||||
height: height,
|
||||
stroke: cfg.style.stroke || '#333',
|
||||
cursor: cfg.style.cursor,
|
||||
fill: cfg.style.backgroundFill || '#eee',
|
||||
},
|
||||
name: 'wrapper',
|
||||
});
|
||||
|
||||
group.addShape('rect', {
|
||||
attrs: {
|
||||
x: width / 4 + width / 2,
|
||||
y: height / 2,
|
||||
width: width / 2,
|
||||
height: height / 4,
|
||||
fill: '#eee',
|
||||
stroke: cfg.style.stroke || '#333',
|
||||
cursor: cfg.style.cursor,
|
||||
},
|
||||
name: 'top',
|
||||
draggable: true,
|
||||
});
|
||||
|
||||
group.addShape('rect', {
|
||||
attrs: {
|
||||
x: width / 4 + width / 2,
|
||||
y: height / 2 + height / 4,
|
||||
width: width / 2,
|
||||
height: (height / 4) * 3,
|
||||
fill: cfg.color || cfg.style.fill,
|
||||
stroke: cfg.style.stroke || '#333',
|
||||
cursor: cfg.style.cursor,
|
||||
},
|
||||
name: 'bottom',
|
||||
draggable: true,
|
||||
});
|
||||
|
||||
if (cfg.label) {
|
||||
const style = (cfg.labelCfg && cfg.labelCfg.style) || {};
|
||||
group.addShape('text', {
|
||||
attrs: {
|
||||
x: width, // 居中
|
||||
y: height + height / 8,
|
||||
textAlign: 'center',
|
||||
textBaseline: 'middle',
|
||||
text: cfg.label,
|
||||
fill: style.fill || '#000',
|
||||
fontSize: style.fontSize || 16,
|
||||
cursor: cfg.style.cursor,
|
||||
},
|
||||
name: 'text',
|
||||
draggable: true,
|
||||
});
|
||||
}
|
||||
|
||||
if (cfg.root) {
|
||||
const style = (cfg.labelCfg && cfg.labelCfg.style) || {};
|
||||
group.addShape('text', {
|
||||
attrs: {
|
||||
x: width, // 居中
|
||||
y: (height / 4) * 3,
|
||||
textAlign: 'center',
|
||||
textBaseline: 'middle',
|
||||
text: '^',
|
||||
fill: style.fill || '#000',
|
||||
fontSize: style.fontSize || 14,
|
||||
cursor: cfg.style.cursor,
|
||||
},
|
||||
name: 'parent',
|
||||
draggable: true,
|
||||
});
|
||||
}
|
||||
|
||||
return wrapperRect;
|
||||
},
|
||||
|
||||
getAnchorPoints() {
|
||||
return [
|
||||
[0.125, 0.5],
|
||||
[0.875, 0.5],
|
||||
[0.5, 1],
|
||||
[0.5, 0],
|
||||
[0.5, 0.125],
|
||||
];
|
||||
},
|
||||
},
|
||||
'rect'
|
||||
);
|
||||
@ -53,14 +53,15 @@ export class Engine {
|
||||
*/
|
||||
public render(source: Sources) {
|
||||
let isSameSources: boolean = false,
|
||||
layoutGroupTable: LayoutGroupTable,
|
||||
isEnterFunction = source.isEnterFunction;
|
||||
layoutGroupTable: LayoutGroupTable;
|
||||
|
||||
if (source === undefined || source === null) {
|
||||
return;
|
||||
}
|
||||
|
||||
let stringSource = JSON.stringify(source);
|
||||
|
||||
let isEnterFunction = source.isEnterFunction,
|
||||
stringSource = JSON.stringify(source);
|
||||
|
||||
if (this.prevStringSource === stringSource) {
|
||||
isSameSources = true;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user