perf: improve context menu interaction; !#zh: 优化右键菜单的交互体验

ly525 · 小小鲁班
1 parent 329f47da
Showing 2 changed files with 10 additions and 20 deletions
front-end/h5/src/components/core/editor/canvas/edit.js
front-end/h5/src/components/core/support/contexmenu.js
@@ -241,6 +241,11 @@ export default {
                   element={element}
                   active={this.editingElement === element}
                   handleMousedownProp={() => {
+                    // 优化右键菜单的交互体验：
+                    // 原来的交互为：鼠标一旦离开 contextmenu，即刻消失
+                    // 带来的体验问题：有时候鼠标不小心滑到右键菜单外边，还没操作完，菜单消失了
+                    // 改进：1. 鼠标离开，右键菜单不消失 2. 点击画布的时候，隐藏右键菜单（包含点击editingElement + 画布）
+                    this.hideContextMenu()
                     // 在 shape 上面添加 mousedown，而非 plugin 本身添加 onClick 的原因：
                     // 在 mousedown 的时候，即可激活 editingElement(当前选中元素)
                     // 这样，就不用等到鼠标抬起的时候，也就是 plugin 的 onClick 生效的时候，才给选中的元素添加边框等选中效果
  
-// import { contains } from '../../../utils/dom-helper.js'
-
+/**
+ * jsx 相关参考链接：
+ * onMouseleave: https://github.com/vueComponent/ant-design-vue/blob/master/components/vc-trigger/Trigger.jsx#L205
+ *
+ */
 const contextmenuOptions = [
   {
     i18nLabel: 'editor.centerPanel.contextMenu.copy',
@@ -54,22 +57,6 @@ export default {
   methods: {
     handleSelectMenu ({ item, key, selectedKeys }) {
       this.$emit('select', { item, key, selectedKeys }) // elementManager({ type: key })
-    },
-    hideContextMenu () {
-      this.$emit('hideMenu')
-    },
-    handleMouseLeave (e) {
-      // const contextmenu = this.$refs.contextmenu
-      // if (
-      //   e &&
-      //   e.relatedTarget &&
-      //   contextmenu &&
-      //   contextmenu.$el &&
-      //   contains(e.relatedTarget, contextmenu.$el)
-      // ) {
-      //   return
-      // }
-      this.hideContextMenu()
     }
   },
   render (h) {
@@ -85,8 +72,6 @@ export default {
         bodyStyle={{ padding: '4px' }}
         ref="contextmenu"
         style={contextStyle}
-        // refrence: https://github.com/vueComponent/ant-design-vue/blob/master/components/vc-trigger/Trigger.jsx#L205
-        onMouseleave={this.handleMouseLeave}
       >
         <a-menu
           inlineIndent={4}