chenxiaopei/StructV2
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: 修复svlink lable的bug

Browse Source
This commit is contained in:
黎智洲 2022-03-07 20:12:04 +08:00
parent 2e5a701980
commit 9d2d9d1fd2
3 changed files with 74 additions and 162 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

122
src/Model/SVLink.ts
View File

@ -1,66 +1,80 @@
import { EdgeConfig, IEdge } from "@antv/g6-core"; import { EdgeConfig, IEdge } from '@antv/g6-core';
import { Util } from "../Common/util"; import { Util } from '../Common/util';
import { LinkLabelOption, LinkOption, Style } from "../options"; import { LinkLabelOption, LinkOption, Style } from '../options';
import { SVModel } from "./SVModel"; import { SVModel } from './SVModel';
import { SVNode } from "./SVNode"; import { SVNode } from './SVNode';
export class SVLink extends SVModel { export class SVLink extends SVModel {
public node: SVNode; public node: SVNode;
public target: SVNode; public target: SVNode;
public linkIndex: number; public linkIndex: number;
public shadowG6Item: IEdge; public shadowG6Item: IEdge;
public G6Item: IEdge; public G6Item: IEdge;
constructor(id: string, type: string, group: string, layout: string, node: SVNode, target: SVNode, index: number, options: LinkOption) { constructor(
super(id, type, group, layout, 'link'); 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.node = node;
this.target = target; this.target = target;
this.linkIndex = index; this.linkIndex = index;
node.links.outDegree.push(this); node.links.outDegree.push(this);
target.links.inDegree.push(this); target.links.inDegree.push(this);
this.G6ModelProps = this.generateG6ModelProps(options); this.G6ModelProps = this.generateG6ModelProps(options);
} }
generateG6ModelProps(options: LinkOption): EdgeConfig { generateG6ModelProps(options: LinkOption): EdgeConfig {
let sourceAnchor = options.sourceAnchor, let sourceAnchor = options.sourceAnchor,
targetAnchor = options.targetAnchor; targetAnchor = options.targetAnchor;
if(options.sourceAnchor && typeof options.sourceAnchor === 'function' && this.linkIndex !== null) { if (options.sourceAnchor && typeof options.sourceAnchor === 'function' && this.linkIndex !== null) {
sourceAnchor = options.sourceAnchor(this.linkIndex); sourceAnchor = options.sourceAnchor(this.linkIndex);
} }
if(options.targetAnchor && typeof options.targetAnchor === 'function' && this.linkIndex !== null) { if (options.targetAnchor && typeof options.targetAnchor === 'function' && this.linkIndex !== null) {
targetAnchor = options.targetAnchor(this.linkIndex); targetAnchor = options.targetAnchor(this.linkIndex);
} }
return { let label = this.target.sourceNode.freed ? 'freed' : '',
id: this.id, labelCfg = this.target.sourceNode.freed
type: options.type, ? { position: 'start', autoRotate: true, refY: 7, style: { fontSize: 11, opacity: 0.8 } }
source: this.node.id, : Util.objectClone<LinkLabelOption>(options.labelOptions || {} as LinkLabelOption);
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
};
}
triggerHighlight(changeHighlightColor: string) { return {
this.originStyle = Util.objectClone(this.G6ModelProps.style); id: this.id,
this.set('style', { type: options.type,
stroke: changeHighlightColor, source: this.node.id,
}); target: this.target.id,
} sourceAnchor,
targetAnchor,
label,
style: Util.objectClone<Style>(options.style),
labelCfg,
curveOffset: options.curveOffset,
};
}
beforeDestroy(): void { triggerHighlight(changeHighlightColor: string) {
Util.removeFromList(this.target.links.inDegree, item => item.id === this.id); this.originStyle = Util.objectClone(this.G6ModelProps.style);
Util.removeFromList(this.node.links.outDegree, item => item.id === this.id); this.set('style', {
this.node = null; stroke: changeHighlightColor,
this.target = null; });
} }
};
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;
}
}

103
src/RegisteredShape/triTreeNode.ts
View File

@ -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'
);

7
src/engine.ts
View File

@ -53,14 +53,15 @@ export class Engine {
*/ */
public render(source: Sources) { public render(source: Sources) {
let isSameSources: boolean = false, let isSameSources: boolean = false,
layoutGroupTable: LayoutGroupTable, layoutGroupTable: LayoutGroupTable;
isEnterFunction = source.isEnterFunction;
if (source === undefined || source === null) { if (source === undefined || source === null) {
return; return;
} }
let stringSource = JSON.stringify(source); let isEnterFunction = source.isEnterFunction,
stringSource = JSON.stringify(source);
if (this.prevStringSource === stringSource) { if (this.prevStringSource === stringSource) {
isSameSources = true; isSameSources = true;
} }