Skip to content

修复el不存在问题 #4

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.

Sign up for GitHub

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
Chiaki-xps wants to merge 2 commits into
base: main
Choose a base branch
from
Open

修复el不存在问题 #4

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0a5c844
修复el不存在问题
Chiaki-xps Dec 26, 2024
d94ad21
el 不存在问题
Chiaki-xps Dec 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
70 changes: 40 additions & 30 deletions lowcode-editor/src/editor/components/SelectedMask/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,9 +76,15 @@ function SelectedMask({ containerClassName, portalWrapperClassName, componentId
});
}

const el = useMemo(() => {
return document.querySelector(`.${portalWrapperClassName}`)!
}, []);
const [el, setEl] = useState(
document.querySelector(`.${portalWrapperClassName}`)
);

useEffect(() => {
if (!el) {
setEl(document.querySelector(`.${portalWrapperClassName}`));
}
});

const curSelectedComponent = useMemo(() => {
return getComponentById(componentId, components);
Expand All @@ -102,44 +108,46 @@ function SelectedMask({ containerClassName, portalWrapperClassName, componentId

}, [curComponent]);

return createPortal((
<>
<div
style={{
position: "absolute",
left: position.left,
top: position.top,
backgroundColor: "rgba(0, 0, 255, 0.1)",
border: "1px dashed blue",
pointerEvents: "none",
width: position.width,
height: position.height,
zIndex: 12,
borderRadius: 4,
boxSizing: 'border-box',
}}
/>
<div
return (
el &&
createPortal(
<>
<div
style={{
position: 'absolute',
left: position.left,
top: position.top,
backgroundColor: 'rgba(0, 0, 255, 0.1)',
border: '1px dashed blue',
pointerEvents: 'none',
width: position.width,
height: position.height,
zIndex: 12,
borderRadius: 4,
boxSizing: 'border-box',
}}
/>
<div
style={{
position: "absolute",
position: 'absolute',
left: position.labelLeft,
top: position.labelTop,
fontSize: "14px",
fontSize: '14px',
zIndex: 13,
display: (!position.width || position.width < 10) ? "none" : "inline",
display: !position.width || position.width < 10 ? 'none' : 'inline',
transform: 'translate(-100%, -100%)',
}}
>
<Space>
<Dropdown
menu={{
items: parentComponents.map(item => ({
items: parentComponents.map((item) => ({
key: item.id,
label: item.desc,
})),
onClick: ({ key }) => {
setCurComponentId(+key);
}
},
}}
disabled={parentComponents.length === 0}
>
Expand All @@ -149,7 +157,7 @@ function SelectedMask({ containerClassName, portalWrapperClassName, componentId
backgroundColor: 'blue',
borderRadius: 4,
color: '#fff',
cursor: "pointer",
cursor: 'pointer',
whiteSpace: 'nowrap',
}}
>
Expand All @@ -164,14 +172,16 @@ function SelectedMask({ containerClassName, portalWrapperClassName, componentId
cancelText={'取消'}
onConfirm={handleDelete}
>
<DeleteOutlined style={{ color: '#fff' }}/>
<DeleteOutlined style={{ color: '#fff' }} />
</Popconfirm>
</div>
)}
</Space>
</div>
</>
), el)
</>,
el
)
);
}

export default SelectedMask;