Merge pull request #169 from XpressAI/adry/fix-panel-coor

🐛Fix context menu and components panel spawn coordinates
XpressAI · Jul 13, 2022 · 92b7c25 · 92b7c25
2 parents 646301c + b7072f2
commit 92b7c25
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 66 deletions.
diff --git a/src/components/xircuitBodyWidget.tsx b/src/components/xircuitBodyWidget.tsx
@@ -1581,7 +1581,7 @@ export const BodyWidget: FC<BodyWidgetProps> = ({
 	/**Component Panel & Node Action Panel Context Menu */
 	const [isComponentPanelShown, setIsComponentPanelShown] = useState(false);
 	const [actionPanelShown, setActionPanelShown] = useState(false);
-	const [isPanelAtTop, setIsPanelAtTop] = useState<boolean>(true);
+	const [dontHidePanel, setDontHidePanel] = useState(false);
 	const [isPanelAtLeft, setIsPanelAtLeft] = useState<boolean>(true);
 	const [componentPanelPosition, setComponentPanelPosition] = useState({ x: 0, y: 0 });
 	const [actionPanelPosition, setActionPanelPosition] = useState({ x: 0, y: 0 });
@@ -1595,35 +1595,37 @@ export const BodyWidget: FC<BodyWidgetProps> = ({
 			x: event.pageX,
 			y: event.pageY,
 		};
-		let newActionPanelPosition = {
-			x: event.pageX,
-			y: event.pageY,
-		};
 		const canvas = event.view as any;
 		const newCenterPosition = {
 			x: canvas.innerWidth / 2,
 			y: canvas.innerHeight / 2,
 		}
+		const menuDimension = {
+			x: 95,
+			y: 290
+		}
+		const fileBrowserWidth = document.getElementsByClassName("jp-FileBrowser")['filebrowser'].clientWidth;
+		const tabWidth = document.getElementsByClassName("lm-TabBar")[0].clientWidth;
 		if (newPanelPosition.x > newCenterPosition.x && newPanelPosition.y > newCenterPosition.y) {
 			// Bottom right
-			setIsPanelAtTop(false);
 			setIsPanelAtLeft(false);
-			newPanelPosition.y = canvas.innerHeight - newPanelPosition.y;
-			newPanelPosition.x = canvas.innerWidth - newPanelPosition.x;
+			newPanelPosition.x = canvas.innerWidth - newPanelPosition.x - tabWidth;
+			newPanelPosition.y = newPanelPosition.y - menuDimension.y - 84;
 		} else if (newPanelPosition.x > newCenterPosition.x && newPanelPosition.y < newCenterPosition.y) {
 			// Top right
-			setIsPanelAtTop(true);
 			setIsPanelAtLeft(false);
-			newPanelPosition.x = canvas.innerWidth - newPanelPosition.x;
+			newPanelPosition.x = canvas.innerWidth - newPanelPosition.x - tabWidth;
+			newPanelPosition.y = newPanelPosition.y - 84;
 		} else if (newPanelPosition.x < newCenterPosition.x && newPanelPosition.y > newCenterPosition.y) {
 			// Bottom left
-			setIsPanelAtTop(false);
 			setIsPanelAtLeft(true);
-			newPanelPosition.y = canvas.innerHeight - newPanelPosition.y;
+			newPanelPosition.x = newPanelPosition.x - fileBrowserWidth - tabWidth;
+			newPanelPosition.y = newPanelPosition.y - menuDimension.y - 84;
 		} else {
 			// Top left
-			setIsPanelAtTop(true);
 			setIsPanelAtLeft(true);
+			newPanelPosition.x = newPanelPosition.x - fileBrowserWidth - tabWidth;
+			newPanelPosition.y = newPanelPosition.y - 84;
 		}
 		setComponentPanelPosition(newPanelPosition);
 		setActionPanelPosition(newPanelPosition);
@@ -1767,52 +1769,58 @@ export const BodyWidget: FC<BodyWidgetProps> = ({
 					}}
 					onContextMenu={showNodeActionPanel}
 					onClick={(event) => {
-						hidePanel();
 						if (event.ctrlKey || event.metaKey) {
 							showComponentPanel(event);
+							return;
+						}
+						if(dontHidePanel){
+							return;
 						}
+						hidePanel();
 					}}>
 					<DemoCanvasWidget>
 						<CanvasWidget engine={xircuitsApp.getDiagramEngine()} />
+						{/**Add Component Panel(ctrl + left-click, dropped link)*/}
+						{isComponentPanelShown && (
+							<div
+								onMouseEnter={()=>setDontHidePanel(true)}
+								onMouseLeave={()=>setDontHidePanel(false)}
+								id='component-panel'
+								style={{
+									top: componentPanelPosition.y,
+									right: !isPanelAtLeft ? componentPanelPosition.x : null,
+									left: isPanelAtLeft ? componentPanelPosition.x : null
+								}}
+								className="add-component-panel">
+								<ComponentsPanel
+									lab={app}
+									eng={xircuitsApp.getDiagramEngine()}
+									nodePosition={nodePosition}
+									linkData={looseLinkData}
+									isParameter={isParameterLink}
+									key="component-panel"
+								></ComponentsPanel>
+							</div>
+						)}
+						{/**Node Action Panel(left-click)*/}
+						{actionPanelShown && (
+							<div
+								id='context-menu'
+								style={{
+									top: actionPanelPosition.y,
+									right: !isPanelAtLeft ? actionPanelPosition.x : null,
+									left: isPanelAtLeft ? actionPanelPosition.x : null
+								}}
+								className="node-action-context-menu">
+								<NodeActionsPanel
+									app={app}
+									eng={xircuitsApp.getDiagramEngine()}
+									nodePosition={nodePosition}
+								></NodeActionsPanel>
+							</div>
+						)}
 					</DemoCanvasWidget>
 				</Layer>
-				{/**Add Component Panel(right-click)*/}
-				{isComponentPanelShown && (
-					<div
-						style={{ 
-							top: isPanelAtTop ? componentPanelPosition.y : null, 
-							bottom: !isPanelAtTop? componentPanelPosition.y : null, 
-							right: !isPanelAtLeft? componentPanelPosition.x : null, 
-							left: isPanelAtLeft? componentPanelPosition.x : null 
-						}}
-						className="add-component-panel">
-						<ComponentsPanel
-							lab={app}
-							eng={xircuitsApp.getDiagramEngine()}
-							nodePosition={nodePosition}
-							linkData={looseLinkData}
-							isParameter={isParameterLink}
-							key="component-panel"
-						></ComponentsPanel>
-					</div>
-				)}
-				{/**Node Action Panel(ctrl + left-click)*/}
-				{actionPanelShown && (
-					<div
-						style={{ 
-							top: isPanelAtTop? actionPanelPosition.y : null,
-							bottom: !isPanelAtTop? actionPanelPosition.y : null, 
-							right: !isPanelAtLeft? actionPanelPosition.x : null,  
-							left: isPanelAtLeft? actionPanelPosition.x : null 
-						}}
-						className="node-action-context-menu">
-						<NodeActionsPanel
-							app={app}
-							eng={xircuitsApp.getDiagramEngine()}
-							nodePosition={nodePosition}
-						></NodeActionsPanel>
-					</div>
-				)}
 			</Content>
 		</Body>
 	);

diff --git a/src/context-menu/ComponentsPanel.tsx b/src/context-menu/ComponentsPanel.tsx
@@ -19,12 +19,12 @@ import { TrayPanel } from './TrayPanel';
 import { TrayItemPanel } from './TrayItemPanel';
 
 export const Body = styled.div`
-  flex-grow: 1;
   display: flex;
   flex-wrap: wrap;
-  min-height: 100%;
   background-color: black;
-  height: 100%;
+  height: 270px;
+  border-top: 10px;
+  border-radius: 12px;
   overflow-y: auto;
 `;
 
@@ -167,7 +167,7 @@ export default function ComponentsPanel(props: ComponentsPanelProps) {
 
     return (
         <Body>
-            <Content>
+            <Content onBlur={focusInput}>
                 <TrayPanel>
                     <div>
                         <p className='title-panel'>Add Component</p>
@@ -195,7 +195,7 @@ export default function ComponentsPanel(props: ComponentsPanelProps) {
                             })
                         }
                     </div>
-                    <Accordion allowZeroExpanded onBlur={focusInput}>
+                    <Accordion allowZeroExpanded>
                         {
                             category.filter((val) => {
                                 if (searchTerm == "") {

diff --git a/style/ComponentsPanel.css b/style/ComponentsPanel.css
@@ -11,15 +11,13 @@
   }
 
   .add-component-panel {
-    width: 250px;
-    height: 270px;
-    position: fixed;
-    z-index: 10;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    max-width: 250px;
+    max-height: 270px;
+    position: absolute;
+    z-index: 1000;
     border-top: 10px;
     border-color: #000;
     border-radius: 12px;
-    overflow-y: auto;
   }
 
   .accordion__item_panel {

diff --git a/style/NodeActionPanel.css b/style/NodeActionPanel.css
@@ -1,6 +1,7 @@
     .node-action-context-menu {
-    position: fixed;
-    z-index: 10;
+    position: absolute;
+    z-index: 1000;
+    max-width: 95px;
     border-top: 10px;
     border-color: #000;
     border-radius: 12px;
@@ -10,7 +11,7 @@
     cursor: pointer;
     flex-grow: 1;
     width: 90%;
-    height: 15%;
+    height: 19px;
     font-size:small;
     padding: 5px 7px;
     color: #fff;
@@ -19,4 +20,4 @@
 
   .option:hover {
     background-color: rgb(36, 64, 110);
-  }
+  }