8000 had dragged, how to update coverd area · Issue #753 · react-grid-layout/react-draggable · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

had dragged, how to update coverd area #753

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
enoloo opened this issue May 12, 2024 · 0 comments
Open

had dragged, how to update coverd area #753

enoloo opened this issue May 12, 2024 · 0 comments

Comments

@enoloo
Copy link
enoloo commented May 12, 2024

image

I use mui Unstable_Popup component that could drag on the react flow component. Its draged well, but the old area of Unstable_Popup remain coverd. How to erase this area? Thks.

return (
<>
    <BaseEdge path={edgePath} markerEnd={markerEnd} style={{stroke:color}} />
    <EdgeLabelRenderer>
        <div
        
        style={{
            position: 'absolute',
            transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
            fontSize: 12,
            // everything inside EdgeLabelRenderer has no pointer events by default
            // if you have an interactive element, set pointer-events: all
            background: '#ffcc00',
            paddingLeft: 10,
            paddingRight:10,
            paddingTop:4,
            paddingBottom:4,
            borderRadius: 5,
            fontWeight: 700,
            pointerEvents: 'all',
        }}
        className="nopan edgeObject"
        >
            {label}
        </div>
        <Popup id={id} open={open} anchor={anchorEl}>
            <Draggable handle='.handleEdge'>
                <Paper><ForwardPanel handleClose={handleClose} pair={t} {...props} /></Paper>
            </Draggable>
        </Popup>
    </EdgeLabelRenderer>
</>
);
<Paper className='handleEdge' sx={{backgroundColor:pink[50], cursor:'pointer'}} >
    <Stack direction="row" spacing={0.6} display='flex' alignItems='center' padding='4px' borderBottom='1px solid #E8A7D5'>
        <Box whiteSpace='nowrap' overflow='hidden' textOverflow='ellipsis' maxWidth='8em'>{source}</Box> 
        <ArrowForwardIcon sx={{color:grey[400], fontSize:"1em"}}/> 
        <Box whiteSpace='nowrap' overflow='hidden' textOverflow='ellipsis' maxWidth='8em'>{target}</Box>  
        <IconButton  sx={{marginLeft:'auto !important', padding:"0", fontSize:'1em'}}><CloseIcon color='primary' />  </IconButton >          
    </Stack>
</Paper>        
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant
0