From 75f58cde0e7baaa2cfb61d8a509ad61ff7f498fb Mon Sep 17 00:00:00 2001
From: hejianhao <15708179461@qq.com>
Date: 星期一, 19 五月 2025 22:22:39 +0800
Subject: [PATCH] 谱系图增加移动端触摸节点选中事件
---
culture/src/views/pedigree-chart/addProgenitor.vue | 20 +++++++++++---------
culture/src/views/pedigree-chart/add.vue | 28 +++++++++++++++-------------
2 files changed, 26 insertions(+), 22 deletions(-)
diff --git a/culture/src/views/pedigree-chart/add.vue b/culture/src/views/pedigree-chart/add.vue
index 58e06e3..65a1944 100644
--- a/culture/src/views/pedigree-chart/add.vue
+++ b/culture/src/views/pedigree-chart/add.vue
@@ -186,7 +186,7 @@
handleSignatureConfirm(signatureImage) {
this.confirmStorageDialogVisible = false;
if (this.nodeType === 1) {
- this.handleAddParent({...this.nodeData,signature:signatureImage.signature})
+ this.handleAddParent({ ...this.nodeData, signature: signatureImage.signature })
} else if (this.nodeType === 2) {
this.handleAddPlan(this.nodeData)
} else if (this.nodeType === 3) {
@@ -439,37 +439,39 @@
},
initEvents() {
// 监听窗口大小变化
- window.addEventListener('resize', this.handleResize);
-
- // 节点点击事件
- this.graph.on('node:click', (evt) => {
+ window.addEventListener('resize', this.handleResize);// 添加触摸事件处理
+ const handleNodeClick = (evt) => {
+ evt.preventDefault(); // 阻止默认触摸行为
const node = evt.item;
const nodeModel = node.getModel();
-
// 如果节点已废弃，不允许任何操作
if (!nodeModel.isDiscarded) {
this.$message.warning('该节点已废弃，不能进行操作');
return;
}
-
// 更新选中节点
this.selectedNode = nodeModel;
-
// 更新节点选中状态
this.graphData.nodes.forEach(n => {
n.selected = n.id === nodeModel.id;
});
this.graph.changeData(this.graphData);
- });
+ };
+ this.graph.on('node:click', handleNodeClick);
+ this.graph.on('node:touchstart', handleNodeClick);
- // 画布点击事件，取消选中节点
- this.graph.on('canvas:click', () => {
+ // 画布点击事件，取消选中节点（添加触摸支持）
+ const handleCanvasClick = (evt) => {
+ evt.preventDefault();
this.selectedNode = null;
this.graphData.nodes.forEach(n => {
n.selected = false;
});
this.graph.changeData(this.graphData);
- });
+ };
+
+ this.graph.on('canvas:click', handleCanvasClick);
+ this.graph.on('canvas:touchstart', handleCanvasClick);
},
handleResize() {
if (this.graph) {
@@ -534,7 +536,7 @@
},
handleAddParent(value) {
console.log(value);
-
+
const parentId = `parent-${++this.nodeCount}`;
this.graphData.nodes.push({
id: parentId,
diff --git a/culture/src/views/pedigree-chart/addProgenitor.vue b/culture/src/views/pedigree-chart/addProgenitor.vue
index 885a190..6b1f28f 100644
--- a/culture/src/views/pedigree-chart/addProgenitor.vue
+++ b/culture/src/views/pedigree-chart/addProgenitor.vue
@@ -644,35 +644,37 @@
// 监听窗口大小变化
window.addEventListener('resize', this.handleResize);
- // 节点点击事件
- this.graph.on('node:click', (evt) => {
+ const handleNodeClick = (evt) => {
+ evt.preventDefault(); // 阻止默认触摸行为
const node = evt.item;
const nodeModel = node.getModel();
-
// 如果节点已废弃，不允许任何操作
if (!nodeModel.isDiscarded) {
this.$message.warning('该节点已废弃，不能进行操作');
return;
}
-
// 更新选中节点
this.selectedNode = nodeModel;
-
// 更新节点选中状态
this.graphData.nodes.forEach(n => {
n.selected = n.id === nodeModel.id;
});
this.graph.changeData(this.graphData);
- });
+ };
+ this.graph.on('node:click', handleNodeClick);
+ this.graph.on('node:touchstart', handleNodeClick);
- // 画布点击事件，取消选中节点
- this.graph.on('canvas:click', () => {
+ // 画布点击事件，取消选中节点（添加触摸支持）
+ const handleCanvasClick = (evt) => {
+ evt.preventDefault();
this.selectedNode = null;
this.graphData.nodes.forEach(n => {
n.selected = false;
});
this.graph.changeData(this.graphData);
- });
+ };
+ this.graph.on('canvas:click', handleCanvasClick);
+ this.graph.on('canvas:touchstart', handleCanvasClick);
},
handleResize() {
if (this.graph) {
--
Gitblit v1.7.1