PathWise开发(1) 将增加节点的功能移动到鼠标右键 d3.js/vue.js

PathWise(1) 从零开始搭建知识图谱/个性化学习路径/d3.js/vue.js

2023年5月20日:将增加节点的功能移动到鼠标右键

跑起来先

思路:

  1. 将我们之前的MyTableAddNode.vue,删除其中的内容只留下下面的表单
    <template>
      <!-- <div class="container"> -->
        <!-- 添加下拉框 -->
        <form @submit.prevent="handleSubmit" class="light-grey-form">
          <!-- <div>
            <label for="neignbor">父节点</label>
            <input type="text" id="neignbor" v-model="neignbor">
          </div> -->
          <div>
            <label for="relation">关系名称</label>
            <input type="text" id="relation" v-model="relation" >
          </div>
          <div>
            <label for="name">节点名称</label>
            <input type="text" id="name" v-model="name" required>
            <button type="submit">提交</button>
          </div>
          <!-- <div>
            <label for="long-text">节点描述</label>
            <textarea id="long-text" v-model="longText"></textarea>
          </div> -->      
        </form>
      <!-- </div> -->
    
  1. 在鼠标右键的菜单MyContextMenuForSvgNode.vue中,我们导入上面的vue,并在template标签中添加
        <li class="context-menu-item" id="add-node" @click="toggleForm" :class="{ active: isFormVisible }">添加节点
    </li> 
    <div class="dropdown-wrapper">
        <MyTableAddNode_1 v-if="isFormVisible" @click.stop></MyTableAddNode_1>
    </div>
    
    其中第一个li设置点击事件,用来控制表单的显示和隐藏
          //添加节点表单内容的显示与隐藏
      toggleForm() {
       if (this.isFormVisible) {
        console.log(2)
          this.isFormVisible = false; // 如果表单已经显示,则隐藏表单
       }
      else{
        console.log(3)
        this.isFormVisible = true;
      }
       
       this.$bus.$emit('Table_add_node');
      },
    
  2. 默认让表单处于隐藏状态。
    这涉及到MyResizedSVG.vue的逻辑,鼠标右键点击之后,触发方法
          // 展示右键菜单栏
      showContextMenu($event,e) {
        $event.preventDefault();
        const contextMenu = this.$refs.contextMenu;
        
        // 获取 SVG 的位置信息
        const svg_info = this.$refs.mainsvg.getBoundingClientRect();
        
        // 获取鼠标点击位置
        const mouseX = $event.clientX - svg_info.left + 25;
        const mouseY = $event.clientY - svg_info.top + 10;
    
        // 显示上下文菜单并设置其位置
        let d3_menu_data = {'e':e, 'event':$event, 'mouseX':mouseX, 'mouseY':mouseY}
        // console.log('d3_menu_data',d3_menu_data)
        contextMenu.showContextMenu(d3_menu_data);
      },
    
    其中contextMenu就是MyContextMenuForSvgNode.vue这个文件,所以如果要将表单默认设定为关闭状态,只需将MyContextMenuForSvgNode.vue这个文件中的下属方法进行调整即可。
          // 展示菜单的接口
      showContextMenu(d3_menu_data) {
        this.isFormVisible=false
        console.log(123)
        // 获取数据
        this.d3_menu_data = d3_menu_data
        let mouseX = d3_menu_data.mouseX
        let mouseY = d3_menu_data.mouseY
        const contextMenu = this.$refs.contextMenu;
    
        // 更新预览
        this.initColor()
    
        // 显示上下文菜单并设置其位置
        contextMenu.style.left = `${mouseX}px`;
        contextMenu.style.top = `${mouseY}px`;
    
        // 显示上下文菜单
        // contextMenu.style.display = 'block';
        this.isMenuVisible = true;
      },
    

动图效果参考PathWise开发(1) 将增加节点的功能移动到鼠标右键 d3.js/vue.js_第1张图片

debug

一个小问题时,提交完成之后,应该将菜单栏的显示给关掉。这个组件之间的接口我们发现之前已经写好了。

        // 关闭菜单
        this.$bus.$emit('context_hide-context-menu')

在MyTableAddNode_1中handleSubmit的最后进行调用即可。重新执行,一切正常。PathWise开发(1) 将增加节点的功能移动到鼠标右键 d3.js/vue.js_第2张图片

你可能感兴趣的:(PathWise,d3.js,知识图谱,d3.js,vue.js)