bug-5789,调制连接桩的显隐方式

src/view/process/process-flow/config/ProcessConfig.js

@@ -43,6 +43,7 @@ export default class Process {
   // region 初始化图形
   static init(dom, miniMapDom = null, nodeKindList, showGraph = true) {
     // console.log('nodeKindList', nodeKindList)
+    let self = this
 
     // region 画布配置
     this.graph = new Graph({
@@ -444,21 +445,15 @@ export default class Process {
     // endregion
 
     // region 鼠标移入移出 连接桩显示/隐藏
-    this.graph.on('node:mouseenter', () => {
-      const ports = dom.querySelectorAll('.x6-port-body')
-      this.showPorts(ports, true)
+    this.graph.on('node:mouseenter', ({ view} ) => {
     })
 
-    this.graph.on('node:mouseleave', () => {
-      const ports = dom.querySelectorAll('.x6-port-body')
-      this.showPorts(ports, false)
+
+    this.graph.on('node:mouseleave', ({ view} ) => {
     })
 
     // 监听节点选中
     this.graph.on('node:selected', () => {
-      //取消连接桩显示
-      const ports = dom.querySelectorAll('.x6-port-body')
-      this.showPorts(ports, false)
     })
     // endregion
 
@@ -701,9 +696,7 @@ export default class Process {
 
     // region 移入边调整起点终点
     // 移入边
-    this.graph.on('edge:mouseenter', ({ cell }) => {
-      const ports = dom.querySelectorAll('.x6-port-body')
-      this.showPorts(ports, true)
+    this.graph.on('edge:mouseenter', ({ cell,view }) => {
       //添加边上工具
       cell.addTools([
         {
@@ -746,9 +739,6 @@ export default class Process {
 
     // 移出边
     this.graph.on('edge:mouseleave', ({ cell }) => {
-      //显示连接桩
-      const ports = dom.querySelectorAll('.x6-port-body')
-      this.showPorts(ports, false)
       //移除边上工具
       cell.removeTools()
     })
@@ -1127,13 +1117,36 @@ export default class Process {
 
     // endregion
 
+    //view挂载后添加鼠标移入移出的监听事件
+    this.graph.on('view:mounted', ({ view }) => {
+      if(view.cell.shape==='custom-image'){
+        console.log('view:mounted',view?.cell.data.nodeName,view.container)
+        view.container.addEventListener("mouseenter",function () {
+          console.log('mouseenter')
+          self.showPorts(view, true)
+        },false)
+        view.container.addEventListener("mouseleave",function () {
+          console.log('mouseleave')
+          self.showPorts(view, false)
+        },false)
+      }
+    })
+
     return this.graph
   }
 
   // endregion
 
   // region 显示/隐藏连接桩事件
-  static showPorts(ports, show) {
+  // static showPorts(ports, show) {
+  //   for (let i = 0, len = ports.length; i < len; i = i + 1) {
+  //     ports[i].style.visibility = show ? 'visible' : 'hidden'
+  //   }
+  // }
+  static showPorts(view, show) {
+    let ports = [...view?.container?.children]
+      .filter(it=>it.classList.contains('x6-port'))
+      .map(it=>{return it?.children?.[0]})
     for (let i = 0, len = ports.length; i < len; i = i + 1) {
       ports[i].style.visibility = show ? 'visible' : 'hidden'
     }

src/view/process/process-flow/process-setting.vue

@@ -1,137 +1,137 @@
 <template>
   <div class="main-div" style="width:100%;height:100%;"  ref="mainDiv">
-    <Layout>
-      <!--   左侧工具栏   -->
-      <Sider :width="180">
-        <div id="stencil"></div>
-      </Sider>
-      <Layout>
+    <Layout style="width:100%;height:calc(100% - 68px);">
+      <Layout style="width:100%;height:100%;">
+        <!--   左侧工具栏   -->
+        <Sider :width="180">
+          <div id="stencil"></div>
+        </Sider>
         <!--   中间流程图  -->
         <Content>
           <div id="container" ref="container" style="width:100%;height:100%"/>
         </Content>
         <!--   底部按钮   -->
-        <Footer class="footer">
-          <div class="tools">
-            <Poptip trigger="hover" >
-              <Button icon="ios-options"></Button>
-              <div slot="content" style="background: #f8f8f9">
-                <Card title="快捷键说明" icon="ios-options" :padding="0" shadow style="width: 350px;">
-                  <CellGroup>
-                    <Cell title="复制">
-                      <div slot="extra" style="display: flex">
-                        <div class="key">Ctrl</div>
-                        <div class="key">C</div>
-                      </div>
-                    </Cell>
-                    <Cell title="剪切">
-                      <div slot="extra" style="display: flex">
-                        <div class="key">Ctrl</div>
-                        <div class="key">X</div>
-                      </div>
-                    </Cell>
-                    <Cell title="粘贴">
-                      <div slot="extra" style="display: flex">
-                        <div class="key">Ctrl</div>
-                        <div class="key">V</div>
-                      </div>
-                    </Cell>
-                    <Cell title="撤销">
-                      <div slot="extra" style="display: flex">
-                        <div class="key">Ctrl</div>
-                        <div class="key">Z</div>
-                      </div>
-                    </Cell>
-                    <Cell title="撤回撤销">
-                      <div slot="extra" style="display: flex">
-                        <div class="key">Ctrl</div>
-                        <div class="key">Shift</div>
-                        <div class="key">Z</div>
-                      </div>
-                    </Cell>
-                    <Cell title="全选">
-                      <div slot="extra" style="display: flex">
-                        <div class="key">Ctrl</div>
-                        <div class="key">Alt</div>
-                        <div class="key">A</div>
-                      </div>
-                    </Cell>
-                    <Cell title="删除">
-                      <div slot="extra" style="display: flex">
-                        <div class="key">Del</div>
-                      </div>
-                    </Cell>
-                    <Cell title="放大">
-                      <div slot="extra" style="display: flex;align-items: center">
-                        <div class="key">Ctrl</div>
-                        <div class="key">Alt</div>
-                        <div class="key">+</div>
-                        <div style="padding-left:3px">或</div>
-                        <div class="key">Ctrl</div>
-                        <div style="padding-left:3px">+ 鼠标滚轮</div>
-                      </div>
-                    </Cell>
-                    <Cell title="缩小">
-                      <div slot="extra" style="display: flex">
-                        <div class="key">Ctrl</div>
-                        <div class="key">Alt</div>
-                        <div class="key">-</div>
-                        <div style="padding-left:3px">或</div>
-                        <div class="key">Ctrl</div>
-                        <div style="padding-left:3px">+ 鼠标滚轮</div>
-                      </div>
-                    </Cell>
-                    <Cell title="整体移动画布" extra="鼠标右键按住空白处拖动" />
-                    <Cell title="多选" extra="鼠标左键按住空白处框选" />
-                    <Cell title="移入节点组" extra="鼠标左键按住节点拖入" />
-                    <Cell title="移出节点组">
-                      <div slot="extra" style="display: flex;align-items: center">
-                        <div>按住</div>
-                        <div class="key">Ctrl</div>
-                        <div style="padding-left:3px">+ 鼠标左键按住节点拖出</div>
-                      </div>
-                    </Cell>
-                    <Cell title="调整路线形状">
-                      <div slot="extra" style="display: flex;align-items: center;">
-                        <div>按住</div>
-                        <div class="key">Ctrl</div>
-                        <div style="padding-left:3px">+ 鼠标左键拖动路线</div>
-                      </div>
-                    </Cell>
-                  </CellGroup>
-                </Card>
-              </div>
-            </Poptip>
-            <Tooltip content="节点居中">
-              <Button icon="md-contract" @click="()=>{this.graph.centerContent(); this.graph.cleanSelection()}"></Button>
-            </Tooltip>
-            <Tooltip content="适应窗口">
-              <Button icon="md-expand" @click="()=>{this.graph.zoomToFit(); this.graph.cleanSelection()}"></Button>
-            </Tooltip>
-            <Tooltip content="原始比例">
-              <Button icon="iconfont iconfont icon-one2one" @click="()=>{this.graph.zoomToFit({ maxScale: 1 }); this.graph.cleanSelection()}"></Button>
-            </Tooltip>
-            <Tooltip content="显示/隐藏小地图">
-              <Button icon="md-locate" @click="()=>{this.showMiniMap=!this.showMiniMap}"></Button>
-            </Tooltip>
-            <Tooltip content="导出PNG">
-              <Button icon="md-images" @click="()=>{this.graph.exportPNG('',{padding:50})}"></Button>
-            </Tooltip>
-            <Tooltip content="导出JSON">
-              <Button icon="ios-cloud-download" @click="exportJson"></Button>
-            </Tooltip>
-            <Tooltip content="导入JSON">
-              <Upload action="" accept=".json" :before-upload="uploadJson">
-                <Button icon="ios-cloud-upload"></Button>
-              </Upload>
-            </Tooltip>
-          </div>
-          <div>
-            <DkButton style="margin-right: 10px;" ref="save" type="primary" @click="save">{{ $t('save') }}</DkButton>
-            <DkButton ref="close" @click="close('/process/process-flow/index')">{{ $t('close') }}</DkButton>
-          </div>
-        </Footer>
       </Layout>
+      <Footer class="footer">
+        <div class="tools">
+          <Poptip trigger="hover" >
+            <Button icon="ios-options"></Button>
+            <div slot="content" style="background: #f8f8f9">
+              <Card title="快捷键说明" icon="ios-options" :padding="0" shadow style="width: 350px;">
+                <CellGroup>
+                  <Cell title="复制">
+                    <div slot="extra" style="display: flex">
+                      <div class="key">Ctrl</div>
+                      <div class="key">C</div>
+                    </div>
+                  </Cell>
+                  <Cell title="剪切">
+                    <div slot="extra" style="display: flex">
+                      <div class="key">Ctrl</div>
+                      <div class="key">X</div>
+                    </div>
+                  </Cell>
+                  <Cell title="粘贴">
+                    <div slot="extra" style="display: flex">
+                      <div class="key">Ctrl</div>
+                      <div class="key">V</div>
+                    </div>
+                  </Cell>
+                  <Cell title="撤销">
+                    <div slot="extra" style="display: flex">
+                      <div class="key">Ctrl</div>
+                      <div class="key">Z</div>
+                    </div>
+                  </Cell>
+                  <Cell title="撤回撤销">
+                    <div slot="extra" style="display: flex">
+                      <div class="key">Ctrl</div>
+                      <div class="key">Shift</div>
+                      <div class="key">Z</div>
+                    </div>
+                  </Cell>
+                  <Cell title="全选">
+                    <div slot="extra" style="display: flex">
+                      <div class="key">Ctrl</div>
+                      <div class="key">Alt</div>
+                      <div class="key">A</div>
+                    </div>
+                  </Cell>
+                  <Cell title="删除">
+                    <div slot="extra" style="display: flex">
+                      <div class="key">Del</div>
+                    </div>
+                  </Cell>
+                  <Cell title="放大">
+                    <div slot="extra" style="display: flex;align-items: center">
+                      <div class="key">Ctrl</div>
+                      <div class="key">Alt</div>
+                      <div class="key">+</div>
+                      <div style="padding-left:3px">或</div>
+                      <div class="key">Ctrl</div>
+                      <div style="padding-left:3px">+ 鼠标滚轮</div>
+                    </div>
+                  </Cell>
+                  <Cell title="缩小">
+                    <div slot="extra" style="display: flex">
+                      <div class="key">Ctrl</div>
+                      <div class="key">Alt</div>
+                      <div class="key">-</div>
+                      <div style="padding-left:3px">或</div>
+                      <div class="key">Ctrl</div>
+                      <div style="padding-left:3px">+ 鼠标滚轮</div>
+                    </div>
+                  </Cell>
+                  <Cell title="整体移动画布" extra="鼠标右键按住空白处拖动" />
+                  <Cell title="多选" extra="鼠标左键按住空白处框选" />
+                  <Cell title="移入节点组" extra="鼠标左键按住节点拖入" />
+                  <Cell title="移出节点组">
+                    <div slot="extra" style="display: flex;align-items: center">
+                      <div>按住</div>
+                      <div class="key">Ctrl</div>
+                      <div style="padding-left:3px">+ 鼠标左键按住节点拖出</div>
+                    </div>
+                  </Cell>
+                  <Cell title="调整路线形状">
+                    <div slot="extra" style="display: flex;align-items: center;">
+                      <div>按住</div>
+                      <div class="key">Ctrl</div>
+                      <div style="padding-left:3px">+ 鼠标左键拖动路线</div>
+                    </div>
+                  </Cell>
+                </CellGroup>
+              </Card>
+            </div>
+          </Poptip>
+          <Tooltip content="节点居中">
+            <Button icon="md-contract" @click="()=>{this.graph.centerContent(); this.graph.cleanSelection()}"></Button>
+          </Tooltip>
+          <Tooltip content="适应窗口">
+            <Button icon="md-expand" @click="()=>{this.graph.zoomToFit(); this.graph.cleanSelection()}"></Button>
+          </Tooltip>
+          <Tooltip content="原始比例">
+            <Button icon="iconfont iconfont icon-one2one" @click="()=>{this.graph.zoomTo(1); this.graph.cleanSelection()}"></Button>
+          </Tooltip>
+          <Tooltip content="显示/隐藏小地图">
+            <Button icon="md-map" @click="()=>{this.showMiniMap=!this.showMiniMap}"></Button>
+          </Tooltip>
+          <Tooltip content="导出PNG">
+            <Button icon="md-images" @click="()=>{this.graph.exportPNG('',{padding:50})}"></Button>
+          </Tooltip>
+          <Tooltip content="导出JSON">
+            <Button icon="ios-cloud-download" @click="exportJson"></Button>
+          </Tooltip>
+          <Tooltip content="导入JSON">
+            <Upload action="" accept=".json" :before-upload="uploadJson">
+              <Button icon="ios-cloud-upload"></Button>
+            </Upload>
+          </Tooltip>
+        </div>
+        <div>
+          <DkButton style="margin-right: 10px;" ref="save" type="primary" @click="save">{{ $t('save') }}</DkButton>
+          <DkButton ref="close" @click="close('/process/process-flow/index')">{{ $t('close') }}</DkButton>
+        </div>
+      </Footer>
     </Layout>
     <!--  缩放比例  -->
     <div class="scale">
@@ -172,7 +172,6 @@ import NodeModal from '_c/business/process/node-modal/node-modal'
 import EdgeModal from '_c/business/process/edge-modal/edge-modal'
 
 const insertCss = require('insert-css')
-const zt1 = require('./data/zt1.json')
 import Process from '@/view/process/process-flow/config/ProcessConfig'
 import queryUtil from '@/view/process/process-flow/queryUtil'
 import { formMixin } from '@/mixins/form'
@@ -213,7 +212,10 @@ export default {
     this.setProcessEdgeModalDisplay(null)
   },
   mounted() {
-    console.log('mounted')
+
+  },
+  activated(){
+
   },
   computed: {
     ...mapState(['process']),
@@ -333,13 +335,16 @@ export default {
         }
       })
     },
-
+    clearMiniMap(){
+      document.getElementsByClassName('x6-widget-minimap')?.[0]?.remove()
+    },
     /**
      * @desc   : 初始化流程设计器
      * @author : 张潇木
      * @date   : 2023/7/14 16:22
      */
     initGraph(){
+      this.clearMiniMap()
       //创建流程图对象
       this.graph = Process.init(this.$refs.container,this.$refs.miniMap,this.dataKindList.filter(it=>it.kindType===this.$config.dataKind.nodeKind))
       //监听删除节点
@@ -460,6 +465,7 @@ export default {
       return true
     },
 
+
     /**
      * @desc   : 删除节点特殊控制，如果是成型模型，且被成型线绑定了，则不能删除
      * @author : 张潇木
@@ -488,6 +494,7 @@ export default {
       })
     },
 
+
     /**
      * @desc   : 监听画布缩放
      * @author : 张潇木
@@ -524,6 +531,7 @@ export default {
         }
       })
     },
+
   },
 
 }
@@ -620,7 +628,10 @@ export default {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 10px 30px;
+  padding: 10px 30px 10px 180px;
+  position: fixed;
+  bottom: 0;
+  width: calc(100% - 200px);
 }
 .key{
   align-items: center;