fix: 修复relayout问题

This commit is contained in:
黎智洲 2022-03-22 23:21:34 +08:00
parent da7781d0df
commit 402bb804fc
8 changed files with 332 additions and 330 deletions

View File

@ -1,30 +1,28 @@
import { G6Event, Graph, INode } from "@antv/g6";
import { EventBus } from "../Common/eventBus";
import { LayoutGroupTable } from "../Model/modelConstructor";
import { SVModel } from "../Model/SVModel";
import { SVNode } from "../Model/SVNode";
import { ViewContainer } from "../View/viewContainer";
import { G6Event, Graph, INode } from '@antv/g6';
import { EventBus } from '../Common/eventBus';
import { LayoutGroupTable } from '../Model/modelConstructor';
import { SVModel } from '../Model/SVModel';
import { SVNode } from '../Model/SVNode';
import { ViewContainer } from '../View/viewContainer';
/**
*
* @param node
* @param dragNodeOption
* @param dragNodeOption
*/
const checkNodeDragAlone = function (node: SVNode, dragNodeOption: boolean | string[]): boolean {
const nodeSourceType = node.sourceType;
const nodeSourceType = node.sourceType;
if (Array.isArray(dragNodeOption)) {
return dragNodeOption.includes(nodeSourceType);
}
if (Array.isArray(dragNodeOption)) {
return dragNodeOption.includes(nodeSourceType);
}
if (dragNodeOption === undefined || dragNodeOption === true) {
return true;
}
return false;
}
if (dragNodeOption === undefined || dragNodeOption === true) {
return true;
}
return false;
};
/**
*
@ -32,181 +30,173 @@ const checkNodeDragAlone = function (node: SVNode, dragNodeOption: boolean | str
* 2. dragNodeOption type时
* 3. dragNodeOption false type的节点
*/
export const DetermineNodeDrag = function (layoutGroupTable: LayoutGroupTable, node: SVNode, brushSelectedModels: SVModel[]) {
const layoutGroup = layoutGroupTable.get(node.group),
dragNodeOption = layoutGroup.options.behavior?.dragNode,
canNodeDragAlone = checkNodeDragAlone(node, dragNodeOption);
export const DetermineNodeDrag = function (
layoutGroupTable: LayoutGroupTable,
node: SVNode,
brushSelectedModels: SVModel[]
) {
const layoutGroup = layoutGroupTable.get(node.group),
dragNodeOption = layoutGroup.options.behavior?.dragNode,
canNodeDragAlone = checkNodeDragAlone(node, dragNodeOption);
if (canNodeDragAlone) {
return true;
}
if (canNodeDragAlone) {
return true;
}
const nodeSourceType = node.sourceType,
nodeModelType = node.getModelType(),
modelList = (<SVModel[]>layoutGroup[nodeModelType]).filter(item => item.sourceType === nodeSourceType),
brushSelectedSameTypeModels = brushSelectedModels.filter(item => {
return item.group === node.group &&
item.getModelType() === nodeModelType &&
item.sourceType === nodeSourceType
});
return modelList.length === brushSelectedSameTypeModels.length;
}
const nodeSourceType = node.sourceType,
nodeModelType = node.getModelType(),
modelList = (<SVModel[]>layoutGroup[nodeModelType]).filter(item => item.sourceType === nodeSourceType),
brushSelectedSameTypeModels = brushSelectedModels.filter(item => {
return (
item.group === node.group && item.getModelType() === nodeModelType && item.sourceType === nodeSourceType
);
});
return modelList.length === brushSelectedSameTypeModels.length;
};
/**
* appendage
*
*
*/
export function SolveNodeAppendagesDrag(viewContainer: ViewContainer) {
const g6Instance: Graph = viewContainer.getG6Instance();
const g6Instance: Graph = viewContainer.getG6Instance();
g6Instance.on('node:dragstart', event => {
let node: SVNode = event.item['SVModel'];
g6Instance.on('node:dragstart', event => {
let node: SVNode = event.item['SVModel'];
if (node instanceof SVNode === false) {
return;
}
if (node instanceof SVNode === false) {
return;
}
const isNodeSelected = viewContainer.brushSelectedModels.find(item => item.id === node.id);
const isNodeSelected = viewContainer.brushSelectedModels.find(item => item.id === node.id);
// 如果在框选完成之后,拖拽了被框选之外的其他节点,那么取消已框选的节点的选中状态
if (isNodeSelected === undefined) {
viewContainer.brushSelectedModels.forEach(item => {
item.setSelectedState(false);
// 如果在框选完成之后,拖拽了被框选之外的其他节点,那么取消已框选的节点的选中状态
if (isNodeSelected === undefined) {
viewContainer.brushSelectedModels.forEach(item => {
item.setSelectedState(false);
if (item instanceof SVNode) {
item.getAppendagesList().forEach(appendage => appendage.setSelectedState(false));
}
});
viewContainer.brushSelectedModels.length = 0;
}
});
if (item instanceof SVNode) {
item.getAppendagesList().forEach(appendage => appendage.setSelectedState(false));
}
});
viewContainer.brushSelectedModels.length = 0;
}
});
g6Instance.on('node:dragend', event => {
let node: SVNode = event.item['SVModel'];
g6Instance.on('node:dragend', event => {
let node: SVNode = event.item['SVModel'];
if (node instanceof SVNode === false) {
return;
}
if (node instanceof SVNode === false) {
return;
}
const isNodeSelected = viewContainer.brushSelectedModels.find(item => item.id === node.id);
const isNodeSelected = viewContainer.brushSelectedModels.find(item => item.id === node.id);
// 如果当前拖拽的节点是在已框选选中的节点之中,那么不需要取消选中的状态,否则需要取消
if (isNodeSelected === undefined) {
node.setSelectedState(false);
node.set({
x: node.G6Item.getModel().x,
y: node.G6Item.getModel().y
});
// 如果当前拖拽的节点是在已框选选中的节点之中,那么不需要取消选中的状态,否则需要取消
if (isNodeSelected === undefined) {
node.setSelectedState(false);
node.set({
x: node.G6Item.getModel().x,
y: node.G6Item.getModel().y,
});
node.getAppendagesList().forEach(item => {
item.setSelectedState(false);
item.set({
x: item.G6Item.getModel().x,
y: item.G6Item.getModel().y
});
});
}
node.getAppendagesList().forEach(item => {
item.setSelectedState(false);
item.set({
x: item.G6Item.getModel().x,
y: item.G6Item.getModel().y,
});
});
}
viewContainer.brushSelectedModels.forEach(item => {
item.set({
x: item.G6Item.getModel().x,
y: item.G6Item.getModel().y
});
viewContainer.brushSelectedModels.forEach(item => {
item.set({
x: item.G6Item.getModel().x,
y: item.G6Item.getModel().y,
});
if(item instanceof SVNode) {
item.getAppendagesList().forEach(appendage => {
appendage.set({
x: appendage.G6Item.getModel().x,
y: appendage.G6Item.getModel().y
});
});
}
});
});
if (item instanceof SVNode) {
item.getAppendagesList().forEach(appendage => {
appendage.set({
x: appendage.G6Item.getModel().x,
y: appendage.G6Item.getModel().y,
});
});
}
});
});
}
/**
*
* @param viewContainer
* @param viewContainer
*/
export function SolveBrushSelectDrag(viewContainer: ViewContainer) {
const g6Instance: Graph = viewContainer.getG6Instance();
const g6Instance: Graph = viewContainer.getG6Instance();
// 当框选完成后,监听被框选节点的数量变化事件,将被框选的节点添加到 brushSelectedModels 数组里面
g6Instance.on('nodeselectchange' as G6Event, event => {
const selectedItems = event.selectedItems as { nodes: INode[]; },
tmpSelectedModelList = [];
// 当框选完成后,监听被框选节点的数量变化事件,将被框选的节点添加到 brushSelectedModels 数组里面
g6Instance.on('nodeselectchange' as G6Event, event => {
const selectedItems = event.selectedItems as { nodes: INode[] },
tmpSelectedModelList = [];
// 如果是点击选中,不理会
if (event.target) {
return;
}
// 如果是点击选中,不理会
if (event.target) {
return;
}
// 先清空上一次框选保存的内容
viewContainer.brushSelectedModels.length = 0;
// 先清空上一次框选保存的内容
viewContainer.brushSelectedModels.length = 0;
// 首先将已框选中的节点加到一个临时队列
selectedItems.nodes.forEach(item => {
tmpSelectedModelList.push(item['SVModel']);
});
// 首先将已框选中的节点加到一个临时队列
selectedItems.nodes.forEach(item => {
tmpSelectedModelList.push(item['SVModel']);
});
// 之后逐个检测被框选中的节点是否可以拖拽,可以拖拽的才加入到真正的框选队列
selectedItems.nodes.forEach(item => {
const node: SVNode = item['SVModel'];
// 之后逐个检测被框选中的节点是否可以拖拽,可以拖拽的才加入到真正的框选队列
selectedItems.nodes.forEach(item => {
const node: SVNode = item['SVModel'];
if (DetermineNodeDrag(viewContainer.getLayoutGroupTable(), node, tmpSelectedModelList)) {
viewContainer.brushSelectedModels.push(node);
}
else {
node.setSelectedState(false);
}
});
});
if (DetermineNodeDrag(viewContainer.getLayoutGroupTable(), node, tmpSelectedModelList)) {
viewContainer.brushSelectedModels.push(node);
} else {
node.setSelectedState(false);
}
});
});
}
/**
*
* @param g6Instance
* @param hasLeak
* @param g6Instance
* @param hasLeak
*/
export function SolveDragCanvasWithLeak(viewContainer: ViewContainer) {
let g6Instance = viewContainer.getG6Instance(),
prevDy = 0;
let g6Instance = viewContainer.getG6Instance();
g6Instance.on('viewportchange', event => {
if (event.action !== 'translate') {
return false;
}
g6Instance.on('viewportchange', event => {
if (event.action !== 'translate') {
return false;
}
let translateX = event.matrix[7],
dy = translateX - prevDy;
let translateY = event.matrix[7],
dy = translateY - viewContainer.lastLeakAreaTranslateY;
prevDy = translateX;
viewContainer.lastLeakAreaTranslateY = translateY;
viewContainer.leakAreaY = viewContainer.leakAreaY + dy;
if (viewContainer.hasLeak) {
EventBus.emit('onLeakAreaUpdate', {
leakAreaY: viewContainer.leakAreaY,
hasLeak: viewContainer.hasLeak
});
}
});
viewContainer.leakAreaY = viewContainer.leakAreaY + dy;
if (viewContainer.hasLeak) {
EventBus.emit('onLeakAreaUpdate', {
leakAreaY: viewContainer.leakAreaY,
hasLeak: viewContainer.hasLeak,
});
}
});
}
/**
*
* @param g6Instance
* @param generalModelsGroup
* @param g6Instance
* @param generalModelsGroup
*/
export function SolveZoomCanvasWithLeak(viewContainer: ViewContainer) {
}
export function SolveZoomCanvasWithLeak(viewContainer: ViewContainer) {}

View File

@ -53,8 +53,13 @@ export function InitG6Behaviors(engine: Engine, viewContainer: ViewContainer): M
};
const selectNodeFilter = event => {
let g6Item = event.item,
node: SVNode = g6Item.SVModel;
let g6Item = event.item;
if(g6Item === null) {
return false
}
let node: SVNode = g6Item.SVModel;
if (g6Item === null || node.isNode() === false) {
return false;

View File

@ -50,7 +50,7 @@ export default Util.registerShape(
fontSize: style.fontSize || 16,
cursor: cfg.style.cursor,
},
name: 'text',
name: 'label',
draggable: true,
});
}
@ -73,7 +73,7 @@ export default Util.registerShape(
fontSize: 16,
cursor: cfg.style.cursor,
},
name: 'text',
name: 'null-left',
draggable: true,
});
}
@ -90,7 +90,7 @@ export default Util.registerShape(
fontSize: 16,
cursor: cfg.style.cursor,
},
name: 'text',
name: 'null-right',
draggable: true,
});
}

View File

@ -57,7 +57,7 @@ export default Util.registerShape(
fill: style.fill || '#000',
fontSize: style.fontSize || 16,
},
name: 'text',
name: 'label',
draggable: true,
});
}
@ -75,7 +75,7 @@ export default Util.registerShape(
fontSize: 16,
cursor: cfg.style.cursor,
},
name: 'text',
name: 'null',
draggable: true,
});
}

View File

@ -69,7 +69,7 @@ export default registerNode('three-cell', {
fontStyle: 'italic',
cursor: cfg.style.cursor,
},
name: 'text',
name: 'rootLabel0',
draggable: true,
});
@ -85,7 +85,7 @@ export default registerNode('three-cell', {
fontStyle: 'italic',
cursor: cfg.style.cursor,
},
name: 'text',
name: 'rootLabel1',
draggable: true,
});
@ -101,7 +101,7 @@ export default registerNode('three-cell', {
fontStyle: 'italic',
cursor: cfg.style.cursor,
},
name: 'text',
name: 'rootLabel2',
draggable: true,
});
}
@ -120,7 +120,7 @@ export default registerNode('three-cell', {
fontStyle: 'italic',
cursor: cfg.style.cursor,
},
name: 'text',
name: 'index',
draggable: true,
});
}
@ -137,7 +137,7 @@ export default registerNode('three-cell', {
fontSize: style.fontSize || 16,
cursor: cfg.style.cursor,
},
name: 'text',
name: 'label1',
draggable: true,
});
@ -152,7 +152,7 @@ export default registerNode('three-cell', {
fontSize: style.fontSize || 16,
cursor: cfg.style.cursor,
},
name: 'text',
name: 'label2',
draggable: true,
});
}
@ -170,7 +170,7 @@ export default registerNode('three-cell', {
fontSize: 22,
cursor: cfg.style.cursor,
},
name: 'text',
name: 'null',
draggable: true,
});
}

View File

@ -1,154 +1,143 @@
import { Util } from '../Common/util';
export default Util.registerShape(
'tri-tree-node',
{
draw(cfg, group) {
cfg.size = cfg.size;
export default Util.registerShape('tri-tree-node', {
draw(cfg, group) {
cfg.size = cfg.size;
const width = cfg.size[0],
height = cfg.size[1];
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: '#eee'
},
name: 'wrapper'
});
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: '#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,
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
});
const style = (cfg.labelCfg && cfg.labelCfg.style) || {};
if (cfg.label) {
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
});
}
let parent = cfg.parent || cfg.l_parent || cfg.r_parent;
const isLeftEmpty =
!cfg.child || cfg.child[0] === undefined || cfg.child[0] === undefined || cfg.child[0] == '0x0',
isRightEmpty =
!cfg.child || cfg.child[1] === undefined || cfg.child[1] === undefined || cfg.child[1] == '0x0',
isparentEmpty = parent[0] == "0x0";
// console.log(cfg.id);
// console.log(parent);
// console.log(isparentEmpty);
if (isparentEmpty) {
{
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
});
}
}
//节点没有左孩子节点时
if (isLeftEmpty) {
group.addShape('text', {
attrs: {
x: width * (5 / 8),
y: height * (8 / 7),
textAlign: 'center',
textBaseline: 'middle',
text: '^',
fill: style.fill || '#000',
fontSize: 16,
cursor: cfg.style.cursor,
},
name: 'text',
draggable: true,
});
}
//节点没有右孩子节点时
if (isRightEmpty) {
group.addShape('text', {
attrs: {
x: width * (11 / 8),
y: height * (8 / 7),
textAlign: 'center',
textBaseline: 'middle',
text: '^',
fill: style.fill || '#000',
fontSize: 16,
cursor: cfg.style.cursor,
},
name: 'text',
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,
});
const style = (cfg.labelCfg && cfg.labelCfg.style) || {};
if (cfg.label) {
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: 'label',
draggable: true,
});
}
let parent = cfg.parent || cfg.l_parent || cfg.r_parent;
const isLeftEmpty =
!cfg.child || cfg.child[0] === undefined || cfg.child[0] === undefined || cfg.child[0] == '0x0',
isRightEmpty =
!cfg.child || cfg.child[1] === undefined || cfg.child[1] === undefined || cfg.child[1] == '0x0',
isParentEmpty = parent[0] == '0x0';
return wrapperRect;
},
if (isParentEmpty) {
{
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: 'null-parent',
draggable: true,
});
}
}
getAnchorPoints() {
return [
[0.125, 0.5],
[0.875, 0.5],
[0.4, 1],
[0.5, 0],
[0.5, 0.125],
[0.6, 1],
[0.5,1]
];
},
}
);
//节点没有左孩子节点时
if (isLeftEmpty) {
group.addShape('text', {
attrs: {
x: width * (5 / 8),
y: height * (8 / 7),
textAlign: 'center',
textBaseline: 'middle',
text: '^',
fill: style.fill || '#000',
fontSize: 16,
cursor: cfg.style.cursor,
},
name: 'null-left',
draggable: true,
});
}
//节点没有右孩子节点时
if (isRightEmpty) {
group.addShape('text', {
attrs: {
x: width * (11 / 8),
y: height * (8 / 7),
textAlign: 'center',
textBaseline: 'middle',
text: '^',
fill: style.fill || '#000',
fontSize: 16,
cursor: cfg.style.cursor,
},
name: 'null-right',
draggable: true,
});
}
return wrapperRect;
},
getAnchorPoints() {
return [
[0.125, 0.5],
[0.875, 0.5],
[0.4, 1],
[0.5, 0],
[0.5, 0.125],
[0.6, 1],
[0.5, 1],
];
},
});

View File

@ -52,7 +52,7 @@ export default Util.registerShape(
fontSize: style.fontSize || 16,
cursor: cfg.style.cursor,
},
name: 'text',
name: 'tag',
draggable: true,
});
@ -67,7 +67,7 @@ export default Util.registerShape(
fontSize: style.fontSize || 16,
cursor: cfg.style.cursor,
},
name: 'text',
name: 'data',
draggable: true,
});
} else {
@ -82,7 +82,7 @@ export default Util.registerShape(
fontSize: style.fontSize || 16,
cursor: cfg.style.cursor,
},
name: 'text',
name: 'label',
draggable: true,
});
}
@ -101,7 +101,7 @@ export default Util.registerShape(
fontSize: 20,
cursor: cfg.style.cursor,
},
name: 'text',
name: 'null-headNext',
draggable: true,
});
}
@ -119,7 +119,7 @@ export default Util.registerShape(
fontSize: 20,
cursor: cfg.style.cursor,
},
name: 'text',
name: 'null-start',
draggable: true,
});
}
@ -137,7 +137,7 @@ export default Util.registerShape(
fontSize: 20,
cursor: cfg.style.cursor,
},
name: 'text',
name: 'null-headNext2',
draggable: true,
});
}

View File

@ -30,6 +30,7 @@ export class ViewContainer {
public hasLeak: boolean;
public leakAreaY: number;
public lastLeakAreaTranslateY: number;
public brushSelectedModels: SVModel[]; // 保存框选过程中被选中的节点
public clickSelectNode: SVNode; // 点击选中的节点
@ -49,10 +50,11 @@ export class ViewContainer {
const g6Instance = this.renderer.getG6Instance(),
leakAreaHeight = this.engine.viewOptions.leakAreaHeight,
height = this.getG6Instance().getHeight(),
height = g6Instance.getHeight(),
{ drag, zoom } = this.engine.behaviorOptions;
this.leakAreaY = height - leakAreaHeight;
this.lastLeakAreaTranslateY = 0;
SolveNodeAppendagesDrag(this);
SolveBrushSelectDrag(this);
@ -68,17 +70,33 @@ export class ViewContainer {
reLayout() {
const g6Instance = this.getG6Instance(),
group = g6Instance.getGroup(),
matrix = group.getMatrix();
matrix = group.getMatrix(),
bound = group.getCanvasBBox();
const { duration, enable, timingFunction } = this.engine.animationOptions;
if (matrix) {
let dx = matrix[6],
dy = matrix[7];
g6Instance.translate(-dx, -dy);
g6Instance.moveTo(bound.minX - dx, bound.minY - dy, enable, {
duration,
easing: timingFunction,
});
}
const leakAreaHeight = this.engine.viewOptions.leakAreaHeight,
height = g6Instance.getHeight();
this.leakAreaY = height - leakAreaHeight;
this.lastLeakAreaTranslateY = 0;
this.layoutProvider.layoutAll(this.layoutGroupTable, this.accumulateLeakModels);
g6Instance.refresh();
EventBus.emit('onLeakAreaUpdate', {
leakAreaY: this.leakAreaY,
hasLeak: this.hasLeak,
});
}
/**
@ -136,18 +154,18 @@ export class ViewContainer {
});
}
/**
*
* @param models
*/
private restoreHighlight(models: SVModel[]) {
models.forEach(item => {
// 不是free节点才进行还原
if(!item.freed) {
item.restoreHighlight()
}
});
}
/**
*
* @param models
*/
private restoreHighlight(models: SVModel[]) {
models.forEach(item => {
// 不是free节点才进行还原
if (!item.freed) {
item.restoreHighlight();
}
});
}
/**
*
@ -157,7 +175,7 @@ export class ViewContainer {
render(layoutGroupTable: LayoutGroupTable, isSameSources: boolean, handleUpdate: handleUpdate) {
const modelList = Util.convertGroupTable2ModelList(layoutGroupTable);
this.restoreHighlight([...modelList, ...this.accumulateLeakModels]);
this.restoreHighlight([...modelList, ...this.accumulateLeakModels]);
// 如果数据没变的话,直接退出
if (isSameSources) {