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

fix: 修复relayout问题

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
src/BehaviorHelper/behaviorIssueHelper.ts
View File

@ -1,10 +1,9 @@
import { G6Event, Graph, INode } from "@antv/g6"; import { G6Event, Graph, INode } from '@antv/g6';
import { EventBus } from "../Common/eventBus"; import { EventBus } from '../Common/eventBus';
import { LayoutGroupTable } from "../Model/modelConstructor"; import { LayoutGroupTable } from '../Model/modelConstructor';
import { SVModel } from "../Model/SVModel"; import { SVModel } from '../Model/SVModel';
import { SVNode } from "../Model/SVNode"; import { SVNode } from '../Model/SVNode';
import { ViewContainer } from "../View/viewContainer"; import { ViewContainer } from '../View/viewContainer';
/** /**
* 判断当前节点是否可以单独拖拽 * 判断当前节点是否可以单独拖拽
@ -23,8 +22,7 @@ const checkNodeDragAlone = function (node: SVNode, dragNodeOption: boolean | str
} }
return false; return false;
} };
/** /**
* 判定该节点是否可以被拖拽 * 判定该节点是否可以被拖拽
@ -32,7 +30,11 @@ const checkNodeDragAlone = function (node: SVNode, dragNodeOption: boolean | str
* 2. 当 dragNodeOption 声明了某些节点的type时（字符数组），这些节点可以单独拖拽 * 2. 当 dragNodeOption 声明了某些节点的type时（字符数组），这些节点可以单独拖拽
* 3. 当 dragNodeOption 为 false 或者不包含在声明的type的节点，只能批量拖拽 * 3. 当 dragNodeOption 为 false 或者不包含在声明的type的节点，只能批量拖拽
*/ */
export const DetermineNodeDrag = function (layoutGroupTable: LayoutGroupTable, node: SVNode, brushSelectedModels: SVModel[]) { export const DetermineNodeDrag = function (
layoutGroupTable: LayoutGroupTable,
node: SVNode,
brushSelectedModels: SVModel[]
) {
const layoutGroup = layoutGroupTable.get(node.group), const layoutGroup = layoutGroupTable.get(node.group),
dragNodeOption = layoutGroup.options.behavior?.dragNode, dragNodeOption = layoutGroup.options.behavior?.dragNode,
canNodeDragAlone = checkNodeDragAlone(node, dragNodeOption); canNodeDragAlone = checkNodeDragAlone(node, dragNodeOption);
@ -45,14 +47,13 @@ export const DetermineNodeDrag = function (layoutGroupTable: LayoutGroupTable, n
nodeModelType = node.getModelType(), nodeModelType = node.getModelType(),
modelList = (<SVModel[]>layoutGroup[nodeModelType]).filter(item => item.sourceType === nodeSourceType), modelList = (<SVModel[]>layoutGroup[nodeModelType]).filter(item => item.sourceType === nodeSourceType),
brushSelectedSameTypeModels = brushSelectedModels.filter(item => { brushSelectedSameTypeModels = brushSelectedModels.filter(item => {
return item.group === node.group && return (
item.getModelType() === nodeModelType && item.group === node.group && item.getModelType() === nodeModelType && item.sourceType === nodeSourceType
item.sourceType === nodeSourceType );
}); });
return modelList.length === brushSelectedSameTypeModels.length; return modelList.length === brushSelectedSameTypeModels.length;
} };
/** /**
* 在初始化渲染器之后，修正节点拖拽时，外部指针或者其他 appendage 没有跟着动的问题 * 在初始化渲染器之后，修正节点拖拽时，外部指针或者其他 appendage 没有跟着动的问题
@ -97,14 +98,14 @@ export function SolveNodeAppendagesDrag(viewContainer: ViewContainer) {
node.setSelectedState(false); node.setSelectedState(false);
node.set({ node.set({
x: node.G6Item.getModel().x, x: node.G6Item.getModel().x,
y: node.G6Item.getModel().y y: node.G6Item.getModel().y,
}); });
node.getAppendagesList().forEach(item => { node.getAppendagesList().forEach(item => {
item.setSelectedState(false); item.setSelectedState(false);
item.set({ item.set({
x: item.G6Item.getModel().x, x: item.G6Item.getModel().x,
y: item.G6Item.getModel().y y: item.G6Item.getModel().y,
}); });
}); });
} }
@ -112,14 +113,14 @@ export function SolveNodeAppendagesDrag(viewContainer: ViewContainer) {
viewContainer.brushSelectedModels.forEach(item => { viewContainer.brushSelectedModels.forEach(item => {
item.set({ item.set({
x: item.G6Item.getModel().x, x: item.G6Item.getModel().x,
y: item.G6Item.getModel().y y: item.G6Item.getModel().y,
}); });
if (item instanceof SVNode) { if (item instanceof SVNode) {
item.getAppendagesList().forEach(appendage => { item.getAppendagesList().forEach(appendage => {
appendage.set({ appendage.set({
x: appendage.G6Item.getModel().x, x: appendage.G6Item.getModel().x,
y: appendage.G6Item.getModel().y y: appendage.G6Item.getModel().y,
}); });
}); });
} }
@ -127,7 +128,6 @@ export function SolveNodeAppendagesDrag(viewContainer: ViewContainer) {
}); });
} }
/** /**
* 检测框选到的节点是不是都可以被选中 * 检测框选到的节点是不是都可以被选中
* @param viewContainer * @param viewContainer
@ -137,7 +137,7 @@ export function SolveBrushSelectDrag(viewContainer: ViewContainer) {
// 当框选完成后，监听被框选节点的数量变化事件，将被框选的节点添加到 brushSelectedModels 数组里面 // 当框选完成后，监听被框选节点的数量变化事件，将被框选的节点添加到 brushSelectedModels 数组里面
g6Instance.on('nodeselectchange' as G6Event, event => { g6Instance.on('nodeselectchange' as G6Event, event => {
const selectedItems = event.selectedItems as { nodes: INode[]; }, const selectedItems = event.selectedItems as { nodes: INode[] },
tmpSelectedModelList = []; tmpSelectedModelList = [];
// 如果是点击选中，不理会 // 如果是点击选中，不理会
@ -159,54 +159,44 @@ export function SolveBrushSelectDrag(viewContainer: ViewContainer) {
if (DetermineNodeDrag(viewContainer.getLayoutGroupTable(), node, tmpSelectedModelList)) { if (DetermineNodeDrag(viewContainer.getLayoutGroupTable(), node, tmpSelectedModelList)) {
viewContainer.brushSelectedModels.push(node); viewContainer.brushSelectedModels.push(node);
} } else {
else {
node.setSelectedState(false); node.setSelectedState(false);
} }
}); });
}); });
} }
/** /**
* 解决泄漏区随着视图拖动的问题 * 解决泄漏区随着视图拖动的问题
* @param g6Instance * @param g6Instance
* @param hasLeak * @param hasLeak
*/ */
export function SolveDragCanvasWithLeak(viewContainer: ViewContainer) { export function SolveDragCanvasWithLeak(viewContainer: ViewContainer) {
let g6Instance = viewContainer.getG6Instance(), let g6Instance = viewContainer.getG6Instance();
prevDy = 0;
g6Instance.on('viewportchange', event => { g6Instance.on('viewportchange', event => {
if (event.action !== 'translate') { if (event.action !== 'translate') {
return false; return false;
} }
let translateX = event.matrix[7], let translateY = event.matrix[7],
dy = translateX - prevDy; dy = translateY - viewContainer.lastLeakAreaTranslateY;
prevDy = translateX; viewContainer.lastLeakAreaTranslateY = translateY;
viewContainer.leakAreaY = viewContainer.leakAreaY + dy; viewContainer.leakAreaY = viewContainer.leakAreaY + dy;
if (viewContainer.hasLeak) { if (viewContainer.hasLeak) {
EventBus.emit('onLeakAreaUpdate', { EventBus.emit('onLeakAreaUpdate', {
leakAreaY: viewContainer.leakAreaY, leakAreaY: viewContainer.leakAreaY,
hasLeak: viewContainer.hasLeak hasLeak: viewContainer.hasLeak,
}); });
} }
}); });
} }
/** /**
* 解决泄漏区随着视图缩放的问题（这里搞不出来，尽力了） * 解决泄漏区随着视图缩放的问题（这里搞不出来，尽力了）
* @param g6Instance * @param g6Instance
* @param generalModelsGroup * @param generalModelsGroup
*/ */
export function SolveZoomCanvasWithLeak(viewContainer: ViewContainer) { export function SolveZoomCanvasWithLeak(viewContainer: ViewContainer) {}
}

9
src/BehaviorHelper/initG6Behaviors.ts
View File

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

6
src/RegisteredShape/binaryTreeNode.ts
View File

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

4
src/RegisteredShape/linkListNode.ts
View File

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

14
src/RegisteredShape/threeCellNode.ts
View File

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

55
src/RegisteredShape/triTreeNode.ts
View File

@ -1,8 +1,6 @@
import { Util } from '../Common/util'; import { Util } from '../Common/util';
export default Util.registerShape( export default Util.registerShape('tri-tree-node', {
'tri-tree-node',
{
draw(cfg, group) { draw(cfg, group) {
cfg.size = cfg.size; cfg.size = cfg.size;
@ -17,9 +15,9 @@ export default Util.registerShape(
height: height, height: height,
stroke: cfg.style.stroke || '#333', stroke: cfg.style.stroke || '#333',
cursor: cfg.style.cursor, cursor: cfg.style.cursor,
fill: '#eee' fill: '#eee',
}, },
name: 'wrapper' name: 'wrapper',
}); });
group.addShape('rect', { group.addShape('rect', {
@ -30,10 +28,10 @@ export default Util.registerShape(
height: height / 4, height: height / 4,
fill: '#eee', fill: '#eee',
stroke: cfg.style.stroke || '#333', stroke: cfg.style.stroke || '#333',
cursor: cfg.style.cursor cursor: cfg.style.cursor,
}, },
name: 'top', name: 'top',
draggable: true draggable: true,
}); });
group.addShape('rect', { group.addShape('rect', {
@ -41,17 +39,16 @@ export default Util.registerShape(
x: width / 4 + width / 2, x: width / 4 + width / 2,
y: height / 2 + height / 4, y: height / 2 + height / 4,
width: width / 2, width: width / 2,
height: height / 4 * 3, height: (height / 4) * 3,
fill: cfg.color || cfg.style.fill, fill: cfg.color || cfg.style.fill,
stroke: cfg.style.stroke || '#333', stroke: cfg.style.stroke || '#333',
cursor: cfg.style.cursor cursor: cfg.style.cursor,
}, },
name: 'bottom', name: 'bottom',
draggable: true draggable: true,
}); });
const style = (cfg.labelCfg && cfg.labelCfg.style) || {}; const style = (cfg.labelCfg && cfg.labelCfg.style) || {};
if (cfg.label) { if (cfg.label) {
group.addShape('text', { group.addShape('text', {
attrs: { attrs: {
x: width, // 居中 x: width, // 居中
@ -61,10 +58,10 @@ export default Util.registerShape(
text: cfg.label, text: cfg.label,
fill: style.fill || '#000', fill: style.fill || '#000',
fontSize: style.fontSize || 16, fontSize: style.fontSize || 16,
cursor: cfg.style.cursor cursor: cfg.style.cursor,
}, },
name: 'text', name: 'label',
draggable: true draggable: true,
}); });
} }
let parent = cfg.parent || cfg.l_parent || cfg.r_parent; let parent = cfg.parent || cfg.l_parent || cfg.r_parent;
@ -72,30 +69,24 @@ export default Util.registerShape(
!cfg.child || cfg.child[0] === undefined || cfg.child[0] === undefined || cfg.child[0] == '0x0', !cfg.child || cfg.child[0] === undefined || cfg.child[0] === undefined || cfg.child[0] == '0x0',
isRightEmpty = isRightEmpty =
!cfg.child || cfg.child[1] === undefined || cfg.child[1] === undefined || cfg.child[1] == '0x0', !cfg.child || cfg.child[1] === undefined || cfg.child[1] === undefined || cfg.child[1] == '0x0',
isparentEmpty = parent[0] == "0x0"; isParentEmpty = parent[0] == '0x0';
// console.log(cfg.id); if (isParentEmpty) {
// console.log(parent);
// console.log(isparentEmpty);
if (isparentEmpty) {
{ {
group.addShape('text', { group.addShape('text', {
attrs: { attrs: {
x: width, // 居中 x: width, // 居中
y: height / 4 * 3, y: (height / 4) * 3,
textAlign: 'center', textAlign: 'center',
textBaseline: 'middle', textBaseline: 'middle',
text: "^", text: '^',
fill: style.fill || '#000', fill: style.fill || '#000',
fontSize: style.fontSize || 14, fontSize: style.fontSize || 14,
cursor: cfg.style.cursor cursor: cfg.style.cursor,
}, },
name: 'parent', name: 'null-parent',
draggable: true draggable: true,
}); });
} }
} }
@ -113,7 +104,7 @@ export default Util.registerShape(
fontSize: 16, fontSize: 16,
cursor: cfg.style.cursor, cursor: cfg.style.cursor,
}, },
name: 'text', name: 'null-left',
draggable: true, draggable: true,
}); });
} }
@ -130,12 +121,11 @@ export default Util.registerShape(
fontSize: 16, fontSize: 16,
cursor: cfg.style.cursor, cursor: cfg.style.cursor,
}, },
name: 'text', name: 'null-right',
draggable: true, draggable: true,
}); });
} }
return wrapperRect; return wrapperRect;
}, },
@ -147,8 +137,7 @@ export default Util.registerShape(
[0.5, 0], [0.5, 0],
[0.5, 0.125], [0.5, 0.125],
[0.6, 1], [0.6, 1],
[0.5,1] [0.5, 1],
]; ];
}, },
} });
);

12
src/RegisteredShape/twoCellNode.ts
View File

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

26
src/View/viewContainer.ts
View File

@ -30,6 +30,7 @@ export class ViewContainer {
public hasLeak: boolean; public hasLeak: boolean;
public leakAreaY: number; public leakAreaY: number;
public lastLeakAreaTranslateY: number;
public brushSelectedModels: SVModel[]; // 保存框选过程中被选中的节点 public brushSelectedModels: SVModel[]; // 保存框选过程中被选中的节点
public clickSelectNode: SVNode; // 点击选中的节点 public clickSelectNode: SVNode; // 点击选中的节点
@ -49,10 +50,11 @@ export class ViewContainer {
const g6Instance = this.renderer.getG6Instance(), const g6Instance = this.renderer.getG6Instance(),
leakAreaHeight = this.engine.viewOptions.leakAreaHeight, leakAreaHeight = this.engine.viewOptions.leakAreaHeight,
height = this.getG6Instance().getHeight(), height = g6Instance.getHeight(),
{ drag, zoom } = this.engine.behaviorOptions; { drag, zoom } = this.engine.behaviorOptions;
this.leakAreaY = height - leakAreaHeight; this.leakAreaY = height - leakAreaHeight;
this.lastLeakAreaTranslateY = 0;
SolveNodeAppendagesDrag(this); SolveNodeAppendagesDrag(this);
SolveBrushSelectDrag(this); SolveBrushSelectDrag(this);
@ -68,17 +70,33 @@ export class ViewContainer {
reLayout() { reLayout() {
const g6Instance = this.getG6Instance(), const g6Instance = this.getG6Instance(),
group = g6Instance.getGroup(), group = g6Instance.getGroup(),
matrix = group.getMatrix(); matrix = group.getMatrix(),
bound = group.getCanvasBBox();
const { duration, enable, timingFunction } = this.engine.animationOptions;
if (matrix) { if (matrix) {
let dx = matrix[6], let dx = matrix[6],
dy = matrix[7]; 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); this.layoutProvider.layoutAll(this.layoutGroupTable, this.accumulateLeakModels);
g6Instance.refresh(); g6Instance.refresh();
EventBus.emit('onLeakAreaUpdate', {
leakAreaY: this.leakAreaY,
hasLeak: this.hasLeak,
});
} }
/** /**
@ -144,7 +162,7 @@ export class ViewContainer {
models.forEach(item => { models.forEach(item => {
// 不是free节点才进行还原 // 不是free节点才进行还原
if (!item.freed) { if (!item.freed) {
item.restoreHighlight() item.restoreHighlight();
} }
}); });
} }