fix: 拓扑架构图调整

This commit is contained in:
TsMask
2024-01-29 15:17:11 +08:00
parent 1613695d4a
commit e3f206b541
2 changed files with 17 additions and 25 deletions

View File

@@ -39,7 +39,20 @@ const graphG6Dom = ref<HTMLElement | undefined>(undefined);
// }); // });
/**非网元元素 */ /**非网元元素 */
const notNeNodes = ['5GC', 'DN', 'UE', 'Base', "lan"]; const notNeNodes = [
'5GC',
'DN',
'UE',
'Base',
'lan',
'lan1',
'lan2',
'lan3',
'lan4',
'lan5',
'lan6',
'lan7',
];
/**图实例对象 */ /**图实例对象 */
const graphG6 = ref<any>(null); const graphG6 = ref<any>(null);
@@ -108,19 +121,6 @@ function fnGraphEvent(graph: Graph) {
}); });
} }
/**注册自定义边或节点 */
function registerEdgeNode() {
// 边
edgeCubicAnimateLineDash();
edgeCubicAnimateCircleMove();
edgeLineAnimateState();
// 节点
nodeCircleAnimateShapeR();
nodeCircleAnimateShapeStroke();
nodeRectAnimateState();
nodeImageAnimateState();
}
/**图数据渲染 */ /**图数据渲染 */
function handleRanderGraph( function handleRanderGraph(
container: HTMLElement | undefined, container: HTMLElement | undefined,
@@ -129,9 +129,6 @@ function handleRanderGraph(
if (!container) return; if (!container) return;
const { clientHeight, clientWidth } = container; const { clientHeight, clientWidth } = container;
// 注册自定义边或节点
registerEdgeNode();
const graph = new Graph({ const graph = new Graph({
container: container, container: container,
width: clientWidth, width: clientWidth,
@@ -141,12 +138,7 @@ function handleRanderGraph(
fitViewPadding: [40], fitViewPadding: [40],
autoPaint: true, autoPaint: true,
modes: { modes: {
default: [ default: ['drag-canvas', 'zoom-canvas'],
'drag-combo',
'drag-canvas',
'zoom-canvas',
'collapse-expand-combo',
],
}, },
groupByTypes: false, groupByTypes: false,
nodeStateStyles: { nodeStateStyles: {

View File

@@ -29,7 +29,7 @@ const graphG6Dom = ref<HTMLElement | undefined>(undefined);
/**图状态 */ /**图状态 */
const graphState = reactive<Record<string, any>>({ const graphState = reactive<Record<string, any>>({
/**当前图组名 */ /**当前图组名 */
group: '5GC System Architecture3', group: '5GC System Architecture5',
/**图数据 */ /**图数据 */
data: { data: {
combos: [], combos: [],
@@ -39,7 +39,7 @@ const graphState = reactive<Record<string, any>>({
}); });
/**非网元元素 */ /**非网元元素 */
const notNeNodes = ['5GC', 'DN', 'UE', 'Base', "lan"]; const notNeNodes = ['5GC', 'DN', 'UE', 'Base', "lan", "lan1", "lan2", "lan3", "lan4", "lan5", "lan6", "lan7"];
/**图实例对象 */ /**图实例对象 */
const graphG6 = ref<any>(null); const graphG6 = ref<any>(null);