谱系图增加移动端触摸节点选中事件

hejianhao

3 天以前 75f58cde0e7baaa2cfb61d8a509ad61ff7f498fb

谱系图增加移动端触摸节点选中事件

 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,

 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) {