diff --git a/striker-ui/pages/init/index.tsx b/striker-ui/pages/init/index.tsx index 19b421ca..d6ea2888 100644 --- a/striker-ui/pages/init/index.tsx +++ b/striker-ui/pages/init/index.tsx @@ -90,17 +90,27 @@ const DataGridCellText: FC = ({ /> ); -const BriefNetworkInterface: FC<{ - networkInterface: NetworkInterfaceOverviewMetadata; -}> = ({ +const BriefNetworkInterface: FC< + MUIBoxProps & { + networkInterface: NetworkInterfaceOverviewMetadata; + } +> = ({ networkInterface: { networkInterfaceName, networkInterfaceState }, + sx: rootSx, + ...restRootProps }) => ( :not(:first-child)': { marginLeft: '.5em' }, - '& > :not(:first-child)': { marginLeft: '.5em' }, + ...rootSx, + }, + + ...restRootProps, }} > > ) => void, @@ -126,20 +136,20 @@ const createNetworkInterfaceTableColumns = ( networkInterfaceInputMap[row.networkInterfaceUUID] || false; let cursor = 'grab'; - let handleOnMouseDown: MUIBoxProps['onMouseDown'] = (...eventArgs) => { - onMouseDownDragHandler(row, ...eventArgs); + let handleMouseDown: MUIBoxProps['onMouseDown'] = (...eventArgs) => { + handleDragMouseDown(row, ...eventArgs); }; let icon = ; if (isApplied) { cursor = 'auto'; - handleOnMouseDown = undefined; + handleMouseDown = undefined; icon = ; } return ( { + const [dragMousePosition, setDragMousePosition] = useState<{ + x: number; + y: number; + }>({ x: 0, y: 0 }); const [networkInterfaceInputMap, setNetworkInterfaceInputMap] = useState({}); const [networkInputs] = useState([ @@ -252,6 +266,46 @@ const NetworkInterfaceList: FC = () => { }, }); + const clearNetworkInterfaceHeld = () => { + setNetworkInterfaceHeld(undefined); + }; + + let createDropMouseUpHandler: ( + interfaces: NetworkInterfaceOverviewMetadata[], + ) => MUIBoxProps['onMouseUp']; + let floatingNetworkInterface: JSX.Element = <>; + let handlePanelMouseMove: MUIBoxProps['onMouseMove']; + + if (networkInterfaceHeld) { + createDropMouseUpHandler = + (interfaces: NetworkInterfaceOverviewMetadata[]) => () => { + interfaces.push(networkInterfaceHeld); + + networkInterfaceInputMap[ + networkInterfaceHeld.networkInterfaceUUID + ].isApplied = true; + }; + + floatingNetworkInterface = ( + + ); + + handlePanelMouseMove = ({ nativeEvent: { clientX, clientY } }) => { + setDragMousePosition({ + x: clientX, + y: clientY, + }); + }; + } + useEffect(() => { const map = networkInterfaces.reduce( (reduceContainer, { networkInterfaceUUID }) => { @@ -271,10 +325,15 @@ const NetworkInterfaceList: FC = () => { }, []); return ( - + + {floatingNetworkInterface} {isLoading ? ( ) : ( @@ -290,9 +349,16 @@ const NetworkInterfaceList: FC = () => { > { - setNetworkInterfaceHeld(row); - }, networkInterfaceInputMap)} + columns={createNetworkInterfaceTableColumns( + (row, { clientX, clientY }) => { + setDragMousePosition({ + x: clientX, + y: clientY, + }); + setNetworkInterfaceHeld(row); + }, + networkInterfaceInputMap, + )} disableColumnMenu disableSelectionOnClick getRowId={({ networkInterfaceUUID }) => networkInterfaceUUID} @@ -333,17 +399,7 @@ const NetworkInterfaceList: FC = () => { }} > { - if (networkInterfaceHeld) { - interfaces.push(networkInterfaceHeld); - - networkInterfaceInputMap[ - networkInterfaceHeld.networkInterfaceUUID - ].isApplied = true; - } - - setNetworkInterfaceHeld(undefined); - }} + onMouseUp={createDropMouseUpHandler?.call(null, interfaces)} sx={{ borderColor: TEXT, borderStyle: 'dashed',