mirror of
https://gitee.com/antv/g6.git
synced 2024-12-05 05:09:07 +08:00
fix: empty object for TreeGraph data; fix: combo edge arrow error with state styles; feat: focus edge item;
This commit is contained in:
Yanyan-Wang
Yanyan Wang
parent
4010c421c2
commit
cbf1d3f1f3
@ -354,9 +354,7 @@ export const shapeBase: ShapeOptions = {
|
||||
*/
|
||||
setState(name: string, value: string | boolean, item: Item) {
|
||||
const shape: IShape = item.get('keyShape');
|
||||
if (!shape) {
|
||||
return;
|
||||
}
|
||||
if (!shape || shape.destroyed) return;
|
||||
|
||||
const type = item.getType();
|
||||
|
||||
|
||||
@ -343,7 +343,11 @@ export default class ItemController {
|
||||
const edgeCfg = edge.getShapeCfg(edge.getModel());
|
||||
const edgeGroup = edge.getContainer();
|
||||
edgeGroup.clear();
|
||||
edgeSF.draw(edgeCfg.type, edgeCfg, edgeGroup);
|
||||
const keyShape = edgeSF.draw(edgeCfg.type, edgeCfg, edgeGroup);
|
||||
edge.set('keyShape', keyShape);
|
||||
keyShape.set('isKeyShape', true);
|
||||
keyShape.set('draggable', true);
|
||||
edge.setOriginStyle()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,7 +2,7 @@ import { AbstractCanvas } from '@antv/g-base';
|
||||
import { Point, IGroup } from '@antv/g-base';
|
||||
import { isNumber, isString } from '@antv/util';
|
||||
import { modifyCSS } from '@antv/dom-util';
|
||||
import { Item, Matrix, Padding, GraphAnimateConfig } from '../../types';
|
||||
import { Item, Matrix, Padding, GraphAnimateConfig, IEdge } from '../../types';
|
||||
import { formatPadding } from '../../util/base';
|
||||
import { applyMatrix, invertMatrix } from '../../util/math';
|
||||
import { IAbstractGraph } from '../../interface/graph';
|
||||
@ -171,17 +171,29 @@ export default class ViewController {
|
||||
if (isString(item)) {
|
||||
item = this.graph.findById(item);
|
||||
}
|
||||
const group: IGroup = item.get('group');
|
||||
let matrix: Matrix = group.getMatrix();
|
||||
if (!matrix) matrix = [1, 0, 0, 0, 1, 0, 0, 0, 1];
|
||||
|
||||
if (item) {
|
||||
let x = 0, y = 0;
|
||||
if (item.getType && item.getType() === 'edge') {
|
||||
const sourceMatrix: IGroup = (item as IEdge).getSource().get('group').getMatrix();
|
||||
const targetMatrix: IGroup = (item as IEdge).getTarget().get('group').getMatrix();
|
||||
if (sourceMatrix && targetMatrix) {
|
||||
x = (sourceMatrix[6] + targetMatrix[6]) / 2;
|
||||
y = (sourceMatrix[7] + targetMatrix[7]) / 2;
|
||||
} else if (sourceMatrix || targetMatrix) {
|
||||
x = sourceMatrix ? sourceMatrix[6] : targetMatrix[6];
|
||||
y = sourceMatrix ? sourceMatrix[7] : targetMatrix[7];
|
||||
}
|
||||
} else {
|
||||
const group: IGroup = item.get('group');
|
||||
let matrix: Matrix = group.getMatrix();
|
||||
if (!matrix) matrix = [1, 0, 0, 0, 1, 0, 0, 0, 1];
|
||||
x = matrix[6];
|
||||
y = matrix[7];
|
||||
}
|
||||
// 用实际位置而不是model中的x,y,防止由于拖拽等的交互导致model的x,y并不是当前的x,y
|
||||
this.focusPoint(
|
||||
{
|
||||
x: matrix[6],
|
||||
y: matrix[7],
|
||||
},
|
||||
{ x, y },
|
||||
animate,
|
||||
animateCfg,
|
||||
);
|
||||
|
||||
@ -254,4 +254,4 @@ describe('collapse combo initially', () => {
|
||||
}, 201)
|
||||
}, 201)
|
||||
});
|
||||
});
|
||||
});
|
||||
@ -111,6 +111,29 @@ describe('view', () => {
|
||||
expect(centerPoint.x - 50 < 0.1).toBe(true);
|
||||
expect(centerPoint.y - 50 < 0.1).toBe(true);
|
||||
});
|
||||
it('focus edge', () => {
|
||||
const data = {
|
||||
nodes: [{id: '1', x: 10, y: 10}, {id: '2', x: 25, y: 40}, {id: '3', x: -50, y: 80}],
|
||||
edges: [{source: '1', target: '2'}, {source: '1', target: '3'}]
|
||||
}
|
||||
const g = new Graph({
|
||||
container: div,
|
||||
width: 500,
|
||||
height: 500,
|
||||
})
|
||||
g.read(data);
|
||||
g.get('canvas').get('el').style.backgroundColor='#ccc';
|
||||
g.zoom(2, { x: 10, y: 10 });
|
||||
g.focusItem(g.getEdges()[0]);
|
||||
let centerPoint = g.getPointByCanvas(250, 250);
|
||||
expect(centerPoint.x).toBe(17.5);
|
||||
expect(centerPoint.y).toBe(25);
|
||||
|
||||
g.focusItem(g.getEdges()[1]);
|
||||
centerPoint = g.getPointByCanvas(250, 250);
|
||||
expect(centerPoint.x).toBe(-20);
|
||||
expect(centerPoint.y).toBe(45);
|
||||
});
|
||||
|
||||
it('getPointByCanvas', () => {
|
||||
const point = graph.getPointByCanvas(250, 250);
|
||||
|
||||
@ -572,7 +572,7 @@ export default class TreeGraph extends Graph implements ITreeGraph {
|
||||
const self = this;
|
||||
const data: TreeGraphData = self.get('data');
|
||||
|
||||
if (!data) {
|
||||
if (!data || !Object.keys(data).length) {
|
||||
throw new Error('data must be defined first');
|
||||
}
|
||||
|
||||
|
||||
@ -488,4 +488,223 @@ describe('active-relations with combos', () => {
|
||||
done()
|
||||
}, 500)
|
||||
})
|
||||
it('with collapsed combo', () => {
|
||||
const data2 = {
|
||||
nodes: [
|
||||
{
|
||||
id: "5930",
|
||||
nodeId: "1778",
|
||||
label: "5930",
|
||||
comboId: "CHILD-93-5-1",
|
||||
x: 1100,
|
||||
y: 0
|
||||
},
|
||||
{
|
||||
id: "3830",
|
||||
nodeId: "3398",
|
||||
label: "3830",
|
||||
comboId: "CHILD-83-3-1",
|
||||
x: 800,
|
||||
y: 0
|
||||
},
|
||||
{
|
||||
id: "5920",
|
||||
nodeId: "3793",
|
||||
label: "5920",
|
||||
comboId: "CHILD-92-5-1",
|
||||
x: 1100,
|
||||
y: 200
|
||||
},
|
||||
{
|
||||
id: "2400",
|
||||
nodeId: "3858",
|
||||
label: "2400",
|
||||
comboId: "CHILD-40-2-1",
|
||||
x: 650,
|
||||
y: 0
|
||||
},
|
||||
{
|
||||
id: "41010",
|
||||
nodeId: "7344",
|
||||
label: "41010",
|
||||
comboId: "CHILD-101-4-1",
|
||||
x: 950,
|
||||
y: 0
|
||||
},
|
||||
{
|
||||
id: "41280",
|
||||
nodeId: "7696",
|
||||
label: "41280",
|
||||
comboId: "CHILD-128-4-1",
|
||||
x: 950,
|
||||
y: 200
|
||||
}
|
||||
],
|
||||
edges: [
|
||||
{ source: "5920", target: "41280" },
|
||||
{ source: "5930", target: "41010" },
|
||||
{ source: "41010", target: "5920" },
|
||||
{ source: "41010", target: "3830" },
|
||||
{ source: "3830", target: "2400" }
|
||||
],
|
||||
combos: [
|
||||
{
|
||||
id: "ROOT-1",
|
||||
label: " ROOT-1",
|
||||
group: "ROOT",
|
||||
count: 4,
|
||||
child: " PARENT",
|
||||
collapsed: false
|
||||
},
|
||||
{
|
||||
id: "PARENT-5-1",
|
||||
label: "PARENT-5-1",
|
||||
parentId: "ROOT-1",
|
||||
count: 2,
|
||||
child: "CHILD",
|
||||
level: 0,
|
||||
collapsed: false,
|
||||
style: { fill: "#AD9D9A", stroke: "#AD9D9A" }
|
||||
},
|
||||
{
|
||||
id: "CHILD-93-5-1",
|
||||
label: " CHILD-93-5-1",
|
||||
count: 1,
|
||||
child: "NODE",
|
||||
parentId: "PARENT-5-1",
|
||||
collapsed: false,
|
||||
childId: "1778"
|
||||
},
|
||||
{
|
||||
id: "PARENT-3-1",
|
||||
label: "PARENT-3-1",
|
||||
parentId: "ROOT-1",
|
||||
count: 1,
|
||||
child: "CHILD",
|
||||
level: 0,
|
||||
collapsed: false,
|
||||
style: { fill: "#DE6295", stroke: "#DDDDDD" }
|
||||
},
|
||||
{
|
||||
id: "CHILD-83-3-1",
|
||||
label: " CHILD-83-3-1",
|
||||
count: 1,
|
||||
child: "NODE",
|
||||
parentId: "PARENT-3-1",
|
||||
collapsed: false,
|
||||
childId: "3398"
|
||||
},
|
||||
{
|
||||
id: "CHILD-92-5-1",
|
||||
label: " CHILD-92-5-1",
|
||||
count: 1,
|
||||
child: "NODE",
|
||||
parentId: "PARENT-5-1",
|
||||
collapsed: false,
|
||||
childId: "3793"
|
||||
},
|
||||
{
|
||||
id: "PARENT-2-1",
|
||||
label: "PARENT-2-1",
|
||||
parentId: "ROOT-1",
|
||||
count: 1,
|
||||
child: "CHILD",
|
||||
level: 0,
|
||||
collapsed: false,
|
||||
style: { fill: "#9E7FCB", stroke: "#CDCDCD" }
|
||||
},
|
||||
{
|
||||
id: "CHILD-40-2-1",
|
||||
label: " CHILD-40-2-1",
|
||||
count: 1,
|
||||
child: "NODE",
|
||||
parentId: "PARENT-2-1",
|
||||
collapsed: false,
|
||||
childId: "3858"
|
||||
},
|
||||
{
|
||||
id: "PARENT-4-1",
|
||||
label: "PARENT-4-1",
|
||||
parentId: "ROOT-1",
|
||||
count: 2,
|
||||
child: "CHILD",
|
||||
level: 0,
|
||||
collapsed: false,
|
||||
style: { fill: "#8FB9C2", stroke: "#8FB9C2" }
|
||||
},
|
||||
{
|
||||
id: "CHILD-101-4-1",
|
||||
label: " CHILD-101-4-1",
|
||||
count: 1,
|
||||
child: "NODE",
|
||||
parentId: "PARENT-4-1",
|
||||
collapsed: false,
|
||||
childId: "7344"
|
||||
},
|
||||
{
|
||||
id: "CHILD-128-4-1",
|
||||
label: " CHILD-128-4-1",
|
||||
count: 1,
|
||||
child: "NODE",
|
||||
parentId: "PARENT-4-1",
|
||||
collapsed: false,
|
||||
childId: "7696"
|
||||
}
|
||||
]
|
||||
};
|
||||
const graph = new Graph({
|
||||
container: div,
|
||||
width: 500,
|
||||
height: 500,
|
||||
fitView: true,
|
||||
defaultNode: {
|
||||
size: 30,
|
||||
type: "rect",
|
||||
color: "#5B8FF9",
|
||||
style: {
|
||||
lineWidth: 2,
|
||||
fill: "#C6E5FF"
|
||||
}
|
||||
},
|
||||
defaultCombo: {
|
||||
type: "rect",
|
||||
style: {
|
||||
fillOpacity: 0.5
|
||||
}
|
||||
},
|
||||
defaultEdge: {
|
||||
type: "polyline",
|
||||
style: {
|
||||
size: 2,
|
||||
endArrow: {
|
||||
path: "M 0,0 L 8,4 L 8,-4 Z", // G6.Arrow.triangle(4,4, 0), //
|
||||
fill: "#000000"
|
||||
}
|
||||
},
|
||||
},
|
||||
modes: {
|
||||
default: [
|
||||
"drag-combo",
|
||||
"drag-node",
|
||||
"drag-canvas",
|
||||
"zoom-canvas",
|
||||
{
|
||||
type: "activate-relations",
|
||||
trigger: "click"
|
||||
},
|
||||
{
|
||||
type: "collapse-expand-combo",
|
||||
relayout: false
|
||||
}
|
||||
]
|
||||
},
|
||||
groupByTypes: false
|
||||
});
|
||||
|
||||
graph.read(data2);
|
||||
graph.on('canvas:click', e => {
|
||||
console.log(graph.getEdges())
|
||||
console.log(graph.get('vedges'))
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
Loading…
Reference in New Issue
Block a user