Merge remote-tracking branch 'origin/mergeBranch' into mergeBranch

src/components/mindmap/custom.vue

@@ -427,6 +427,7 @@ export default {
       });
       return arr
     },
+    
     async getData () {
       var that = this
       console.log(this.id,'8888')
@@ -439,7 +440,31 @@ export default {
       // this.data = this.createMenu([res.data.data])
       const container = document.getElementById('container');
       const width = container.scrollWidth;
-      const height = container.scrollHeight -50  || 500;
+      const height = container.scrollHeight -50 || 500;
+      const contextMenu = new G6.Menu({
+        getContent(evt) {
+          let info = evt.item._cfg.model.info
+          let header;
+          let listItems = Object.keys(info).map((key) => `<li>${info[key]}</li>`).join('');
+          return `
+          <h3>${evt.item._cfg.model.id}</h3>
+          <ul>
+            ${listItems}
+          </ul>`;
+        },
+        handleMenuClick: (target, item) => {
+          console.log(target, item);
+        },
+        // offsetX and offsetY include the padding of the parent container
+        // 需要加上父级容器的 padding-left 16 与自身偏移量 10
+        offsetX: 16 + 10,
+        // 需要加上父级容器的 padding-top 24 、画布兄弟元素高度、与自身偏移量 10
+        offsetY: 0,
+        // the types of items that allow the menu show up
+        // 在哪些类型的元素上响应
+        itemTypes: ['node', 'edge', 'canvas'],
+      });
+
       const graph = new G6.TreeGraph({
         container: 'container',
         animate: false,
@@ -447,6 +472,7 @@ export default {
         height,
         linkCenter: true,
         fitCenter: true,
+        plugins: [contextMenu],
         modes: {
           default: ['drag-canvas','zoom-canvas','collapse-expand','drag-node', 'lasso-select'],
         },
@@ -488,6 +514,7 @@ export default {
           this.drawer = true
         }
       })
+      
       if (typeof window !== 'undefined')
         window.onresize = () => {
           if (!graph || graph.get('destroyed')) return;
@@ -581,8 +608,29 @@ export default {
 
 </script>
 <style>
-/* #container{
-  height: calc(100vh);
-  width: 100vw;
-} */
+#container{
+   width: 100vw;
+  height:100vh;
+  position: relative;
+}
+#contextMenu {
+  position: absolute;
+  list-style-type: none;
+  padding: 10px 8px;
+  left: -150px;
+  background-color: rgba(255, 255, 255, 0.9);
+  border: 1px solid #e2e2e2;
+  border-radius: 4px;
+  font-size: 12px;
+  color: #545454;
+}
+#contextMenu li {
+  cursor: pointer;
+  list-style-type:none;
+  list-style: none;
+  margin-left: 0px;
+}
+#contextMenu li:hover {
+  color: #aaa;
+}
 </style>

src/components/mindmap/project.vue

@@ -437,6 +437,30 @@ export default {
       const container = document.getElementById('container');
       const width = container.scrollWidth;
       const height = container.scrollHeight - 50 || 500;
+      const contextMenu = new G6.Menu({
+        getContent(evt) {
+          let info = evt.item._cfg.model.info
+          let header;
+          let listItems = Object.keys(info).map((key) => `<li>${info[key]}</li>`).join('');
+          return `
+          <h3>${evt.item._cfg.model.id}</h3>
+          <ul>
+            ${listItems}
+          </ul>`;
+        },
+        handleMenuClick: (target, item) => {
+          console.log(target, item);
+        },
+        // offsetX and offsetY include the padding of the parent container
+        // 需要加上父级容器的 padding-left 16 与自身偏移量 10
+        offsetX: 16 + 10,
+        // 需要加上父级容器的 padding-top 24 、画布兄弟元素高度、与自身偏移量 10
+        offsetY: 0,
+        // the types of items that allow the menu show up
+        // 在哪些类型的元素上响应
+        itemTypes: ['node', 'edge', 'canvas'],
+      });
+
       const graph = new G6.TreeGraph({
         container: 'container',
         animate: false,
@@ -572,7 +596,28 @@ export default {
 </script>
 <style>
 #container{
-  height: calc(100vh - 200px);
   width: 100vw;
+  height:100vh;
+  position: relative;
+}
+#contextMenu {
+  position: absolute;
+  list-style-type: none;
+  padding: 10px 8px;
+  left: -150px;
+  background-color: rgba(255, 255, 255, 0.9);
+  border: 1px solid #e2e2e2;
+  border-radius: 4px;
+  font-size: 12px;
+  color: #545454;
+}
+#contextMenu li {
+  cursor: pointer;
+  list-style-type:none;
+  list-style: none;
+  margin-left: 0px;
+}
+#contextMenu li:hover {
+  color: #aaa;
 }
 </style>

src/components/mindmap/saler.vue

@@ -438,6 +438,29 @@ export default {
       const container = document.getElementById('container');
       const width = container.scrollWidth;
       const height = container.scrollHeight -50 || 500;
+      const contextMenu = new G6.Menu({
+        getContent(evt) {
+          let info = evt.item._cfg.model.info
+          let header;
+          let listItems = Object.keys(info).map((key) => `<li>${info[key]}</li>`).join('');
+          return `
+          <h3>${evt.item._cfg.model.id}</h3>
+          <ul>
+            ${listItems}
+          </ul>`;
+        },
+        handleMenuClick: (target, item) => {
+          console.log(target, item);
+        },
+        // offsetX and offsetY include the padding of the parent container
+        // 需要加上父级容器的 padding-left 16 与自身偏移量 10
+        offsetX: 16 + 10,
+        // 需要加上父级容器的 padding-top 24 、画布兄弟元素高度、与自身偏移量 10
+        offsetY: 0,
+        // the types of items that allow the menu show up
+        // 在哪些类型的元素上响应
+        itemTypes: ['node', 'edge', 'canvas'],
+      });
       const graph = new G6.TreeGraph({
         container: 'container',
         animate: false,
@@ -593,7 +616,28 @@ export default {
 </script>
 <style>
 #container{
-  height: 100vh;
-  width: 100vw;
+   width: 100vw;
+  height:100vh;
+  position: relative;
+}
+#contextMenu {
+  position: absolute;
+  list-style-type: none;
+  padding: 10px 8px;
+  left: -150px;
+  background-color: rgba(255, 255, 255, 0.9);
+  border: 1px solid #e2e2e2;
+  border-radius: 4px;
+  font-size: 12px;
+  color: #545454;
+}
+#contextMenu li {
+  cursor: pointer;
+  list-style-type:none;
+  list-style: none;
+  margin-left: 0px;
+}
+#contextMenu li:hover {
+  color: #aaa;
 }
 </style>