创新实训可视化展示篇4——《图谱编辑功能实现》

本文链接：https://blog.csdn.net/m0_62303445/article/details/139787557

引言

图谱编辑功能在许多应用场景中都有广泛的需求，例如知识图谱的维护、社交网络的分析和管理等。在本篇博客中，我们将介绍图谱编辑功能的设计与实现，详细讲解如何实现节点和关系的增删改查功能，并通过多步骤的对话框实现用户友好的编辑界面。

图谱编辑功能的设计思路

在设计图谱编辑功能时，我们需要考虑以下几个方面：

数据结构：如何存储和管理图谱数据，包括节点和关系的增删改查。
用户界面：如何设计友好的用户界面，使用户能够方便地编辑图谱。
交互操作：如何实现节点和关系的选择、拖动、编辑等交互操作。
数据持久化：如何将编辑后的数据保存到数据库中，并确保数据的一致性和完整性。

数据结构设计

在图谱编辑功能中，我们继续使用前面介绍的Node和Edge类来表示图谱中的节点和边。同时，我们需要设计一些辅助函数来实现节点和边的增删改查操作。

class Node {
  final String id;
  final String label;
  final Offset position;

  Node({required this.id, required this.label, required this.position});
}

class Edge {
  final String from;
  final String to;
  final String label;

  Edge({required this.from, required this.to, required this.label});
}

class Graph {
  List<Node> nodes = [];
  List<Edge> edges = [];

  void addNode(Node node) {
    nodes.add(node);
  }

  void updateNode(Node node) {
    final index = nodes.indexWhere((n) => n.id == node.id);
    if (index != -1) {
      nodes[index] = node;
    }
  }

  void deleteNode(String nodeId) {
    nodes.removeWhere((node) => node.id == nodeId);
    edges.removeWhere((edge) => edge.from == nodeId || edge.to == nodeId);
  }

  void addEdge(Edge edge) {
    edges.add(edge);
  }

  void updateEdge(Edge edge) {
    final index = edges.indexWhere((e) => e.from == edge.from && e.to == edge.to);
    if (index != -1) {
      edges[index] = edge;
    }
  }

  void deleteEdge(String fromNodeId, String toNodeId) {
    edges.removeWhere((edge) => edge.from == fromNodeId && edge.to == toNodeId);
  }
}

用户界面设计

为了实现图谱的增删改查功能，我们需要设计相应的用户界面。这里我们使用Flutter的Dialog组件，通过多步骤的对话框来实现用户友好的编辑界面。

节点编辑对话框

首先，我们设计一个节点编辑对话框，用于添加和编辑节点信息。

Future<void> _showNodeDialog({Node? node}) async {
  final idController = TextEditingController(text: node?.id ?? '');
  final labelController = TextEditingController(text: node?.label ?? '');
  final positionController = TextEditingController(text: node?.position.toString() ?? '');

  final result = await showDialog<Node>(
    context: context,
    builder: (context) {
      return AlertDialog(
        title: Text(node == null ? '添加节点' : '编辑节点'),
        content: SingleChildScrollView(
          child: Column(
            children: [
              TextField(controller: idController, decoration: InputDecoration(labelText: 'ID')),
              TextField(controller: labelController, decoration: InputDecoration(labelText: '标签')),
              TextField(controller: positionController, decoration: InputDecoration(labelText: '位置')),
            ],
          ),
        ),
        actions: [
          TextButton(
            onPressed: () => Navigator.of(context).pop(),
            child: Text('取消'),
          ),
          TextButton(
            onPressed: () {
              final newNode = Node(
                id: idController.text,
                label: labelController.text,
                position: Offset(0, 0), // 位置需要进一步解析
              );
              Navigator.of(context).pop(newNode);
            },
            child: Text('保存'),
          ),
        ],
      );
    },
  );

  if (result != null) {
    if (node == null) {
      graph.addNode(result);
    } else {
      graph.updateNode(result);
    }
    setState(() {});
  }
}

边编辑对话框

类似地，我们设计一个边编辑对话框，用于添加和编辑边的信息。

Future<void> _showEdgeDialog({Edge? edge}) async {
  final fromNodeController = TextEditingController(text: edge?.from ?? '');
  final toNodeController = TextEditingController(text: edge?.to ?? '');
  final labelController = TextEditingController(text: edge?.label ?? '');

  final result = await showDialog<Edge>(
    context: context,
    builder: (context) {
      return AlertDialog(
        title: Text(edge == null ? '添加边' : '编辑边'),
        content: SingleChildScrollView(
          child: Column(
            children: [
              TextField(controller: fromNodeController, decoration: InputDecoration(labelText: '起始节点')),
              TextField(controller: toNodeController, decoration: InputDecoration(labelText: '目标节点')),
              TextField(controller: labelController, decoration: InputDecoration(labelText: '标签')),
            ],
          ),
        ),
        actions: [
          TextButton(
            onPressed: () => Navigator.of(context).pop(),
            child: Text('取消'),
          ),
          TextButton(
            onPressed: () {
              final newEdge = Edge(
                from: fromNodeController.text,
                to: toNodeController.text,
                label: labelController.text,
              );
              Navigator.of(context).pop(newEdge);
            },
            child: Text('保存'),
          ),
        ],
      );
    },
  );

  if (result != null) {
    if (edge == null) {
      graph.addEdge(result);
    } else {
      graph.updateEdge(result);
    }
    setState(() {});
  }
}

节点和边的增删改查界面

在图谱展示界面中，我们添加按钮来触发节点和边的增删改查操作。

class GraphEditorScreen extends StatefulWidget {
  @override
  _GraphEditorScreenState createState() => _GraphEditorScreenState();
}

class _GraphEditorScreenState extends State<GraphEditorScreen> {
  final Graph graph = Graph();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('图谱编辑'),
      ),
      body: GestureDetector(
        onScaleStart: (details) {
          // 处理缩放开始
        },
        onScaleUpdate: (details) {
          // 处理缩放更新
        },
        child: CustomPaint(
          painter: GraphPainter(graph.nodes, graph.edges, 1.0, Offset.zero),
          child: Container(),
        ),
      ),
      floatingActionButton: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          FloatingActionButton(
            onPressed: () => _showNodeDialog(),
            tooltip: '添加节点',
            child: Icon(Icons.add_circle),
          ),
          SizedBox(height: 16),
          FloatingActionButton(
            onPressed: () => _showEdgeDialog(),
            tooltip: '添加边',
            child: Icon(Icons.add_link),
          ),
        ],
      ),
    );
  }
}

通过这些设计，我们实现了图谱编辑功能，包括节点和关系的增删改查，并通过多步骤的对话框提供了用户友好的编辑界面。