feat: make context menu works

phodal · Jan 13, 2022 · ab7dbbd · ab7dbbd
1 parent 1ddb33d
commit ab7dbbd
Showing 1 changed file with 8 additions and 5 deletions.
diff --git a/quake_webapp/quake-board/src/QuakeBoard.tsx b/quake_webapp/quake-board/src/QuakeBoard.tsx
@@ -3,6 +3,7 @@ import createEngine, {DagreEngine, DefaultNodeModel, DiagramModel} from '@projec
 import {Item, Menu, Separator, Submenu, useContextMenu} from "react-contexify";
 import {CanvasWidget} from "@projectstorm/react-canvas-core";
 import styled from "styled-components";
+import 'react-contexify/dist/ReactContexify.css';
 
 export type Props = {}
 
@@ -74,11 +75,8 @@ function QuakeBoard(props: Props) {
   );
 
   return (
-    <>
+    <StyledDiv onDoubleClick={handleContextMenu}>
       <StyledCanvasWidget engine={engine} />
-
-      <div onContextMenu={handleContextMenu} />
-
       <Menu id={MENU_ID}>
         <Item onClick={handleItemClick}>Item 1</Item>
         <Item onClick={handleItemClick}>Item 2</Item>
@@ -90,12 +88,17 @@ function QuakeBoard(props: Props) {
           <Item onClick={handleItemClick}>Sub Item 2</Item>
         </Submenu>
       </Menu>
-    </>
+    </StyledDiv>
   );
 }
 
 export default QuakeBoard;
 
+const StyledDiv = styled.div`
+  width: 100%;
+  height: 100%;
+`
+
 const StyledCanvasWidget = styled(CanvasWidget)`
   background: #333333;
   width: 100%;