111

react-ui/src/pages/Pipeline/editPipeline/editPipeline.less

@@ -27,4 +27,25 @@
   height:45px;
   background:#ffffff;
   box-shadow:0px 3px 6px rgba(146, 146, 146, 0.09);
+}
+.rightmenu {
+  position: absolute;
+  width: 120px;
+  height: 146px;
+  left: 0px;
+  top: 0px;
+  
+  background-color: #ffffff;
+  font-size: 12px;
+  color: #333333;
+  overflow-y: auto;
+}
+
+.rightmenuItem {
+  padding: 10px 20px;
+  cursor: pointer;
+}
+.rightmenuItem:hover {
+  background-color: rgba(24, 144, 255, 0.3);
+  color: #ffffff;
 }

react-ui/src/pages/Pipeline/editPipeline/index.jsx

@@ -13,7 +13,8 @@ import { useNavigate} from 'react-router-dom';
 const editPipeline = React.FC = () => {
     const propsRef=useRef()
     const navgite=useNavigate();
-    const [contextMenu,setContextMenu]=useState({})
+    // const [contextMenu,setContextMenu]=useState({})
+    let contextMenu={}
     const locationParams =useParams () //新版本获取路由参数接口
     let graph=null
     const pipelineContainer = useEmotionCss(() => {
@@ -23,6 +24,25 @@ const editPipeline = React.FC = () => {
           height:'81vh'
         };
       });
+      const rightmenu= useEmotionCss(() => {
+        return {
+          position: 'absolute',
+          width: '120px',
+          height: '146px',
+          left: '0px',
+          top: '0px',
+          
+          color: '#333333',
+          overflowY: 'auto'
+        };
+      });
+    const  rightmenuItem =useEmotionCss(() => {
+      return {
+        padding: '10px 20px',
+        cursor: 'pointer',
+        fontSize: '12px',
+      };
+    });
     const graphStyle = useEmotionCss(() => {
         return {
           width:'100%',
@@ -125,20 +145,29 @@ const editPipeline = React.FC = () => {
       }
       const initMenu=()=> {
         // const selectedNodes = this.selectedNodes;
-        setContextMenu(new G6.Menu({
+        contextMenu=new G6.Menu({
           getContent(evt) {
-            console.log(11111, evt);
-  
-            let ul = `<ul>
-           <li class="rightmenu-item" code="undo" disabled>撤销</li>
-           <li class="rightmenu-item" code="redo" >恢复</li>
-           <li class="rightmenu-item" code="delete" >删除</li>
-           `;
-            },
-            
-          
-          handleMenuClick:(target, item) => {
+            return `
+            <ul style="position: absolute;
+            width: 100px;
+            padding-left:0;
+            display:flex;
+            flex-direction: column;
+            align-items:center;
+            left: 0px;
+            top: 0px;
+            background-color: #ffffff;
+            font-size: 14px;
+            color: #333333;
+            overflow-y: auto;">
+             
+              <li style="padding: 10px 20px;cursor: pointer;" code="delete">删除</li>
+            </ul>`;
+          },
+          handleMenuClick: (target, item) => {
             switch (target.getAttribute('code')) {
+               // <li style="padding: 10px 20px;cursor: pointer;"   code="undo">撤回</li>
+              // <li style="padding: 10px 20px;cursor: pointer;" code="redo">恢复</li>
               // case 'undo':
               //   this.$emit('handleMenuCall', { code: 'undo' });
               //   break;
@@ -153,15 +182,23 @@ const editPipeline = React.FC = () => {
                 break;
             }
           },
-          offsetX: 16 + 20,
+          // offsetX and offsetY include the padding of the parent container
+          // 需要加上父级容器的 padding-left 16 与自身偏移量 10
+          offsetX: 16 + 10,
+          // 需要加上父级容器的 padding-top 24 、画布兄弟元素高度、与自身偏移量 10
           offsetY: 0,
-          itemTypes: ['node', 'canvas',  'edge'],
-        }));
+          // the types of items that allow the menu show up
+          // 在哪些类型的元素上响应
+          itemTypes: ['node', 'edge', 'canvas']})
+          
+          initGraph()
       };
       useEffect(()=>{
         getFirstWorkflow(locationParams.id)
-        initGraph()
         initMenu()
+       
+        
+        console.log(contextMenu);
       },[])
       const initGraph=()=>{
         G6.registerNode(
@@ -387,7 +424,6 @@ const editPipeline = React.FC = () => {
           });
         });
       });
-      graph.on('contextmenu', handlerContextMenu);
       window.onresize = () => {
         if (!graph || graph.get('destroyed')) return;
         if (!graphRef.current || !graphRef.current.scrollWidth || !graphRef.current.scrollHeight) return;
@@ -398,8 +434,8 @@ const editPipeline = React.FC = () => {
         <ModelMenus onParDragEnd={onDragEnd}></ModelMenus>
         <div className={Styles.centerContainer}>
         <div className={Styles.buttonList}>
-          <Button type="primary" shape="round" icon={<SaveOutlined />} onClick={savePipeline}>撤回</Button>
-          <Button type="primary" shape="round" icon={<SaveOutlined />} onClick={savePipeline}>恢复</Button>
+          {/* <Button type="primary" shape="round" icon={<SaveOutlined />} onClick={savePipeline}>撤回</Button>
+          <Button type="primary" shape="round" icon={<SaveOutlined />} onClick={savePipeline}>恢复</Button> */}
           <Button type="primary" shape="round" icon={<SaveOutlined />} onClick={savePipeline}>保存</Button>
         </div>
         <div className={graphStyle} ref={graphRef} id={Styles.graphStyle}></div>