mirror/sunmao-ui
2
0
Fork 0
mirror of https://github.com/smartxworks/sunmao-ui.git synced 2024-11-27 08:39:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix the bug that cannot drag component to a selected component

Browse Source
This commit is contained in:
Bowen Tan 2022-02-16 11:25:05 +08:00
parent 2df5395665
commit b6fd5c1512
2 changed files with 7 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
packages/editor/src/components/EditorMaskWrapper/DropSlotMask.tsx
View File

@ -26,7 +26,7 @@ export const DropSlotMask: React.FC<Props> = observer((props: Props) => {
return registry.getComponentByType(hoverComponentType).spec.slots || []; return registry.getComponentByType(hoverComponentType).spec.slots || [];
}, [hoverComponentType, registry]); }, [hoverComponentType, registry]);
// caculate the slot which is being dragged over // calculate the slot which is being dragged over
useEffect(() => { useEffect(() => {
if (!maskRef.current) return; if (!maskRef.current) return;
const maskRect = maskRef.current?.getBoundingClientRect(); const maskRect = maskRef.current?.getBoundingClientRect();
@ -58,6 +58,7 @@ export const DropSlotMask: React.FC<Props> = observer((props: Props) => {
display="flex" display="flex"
flexDirection={vertical ? 'column' : 'row'} flexDirection={vertical ? 'column' : 'row'}
ref={maskRef} ref={maskRef}
border='1px solid orange'
> >
{slots.map(slot => { {slots.map(slot => {
return ( return (

22
packages/editor/src/components/EditorMaskWrapper/EditorMask.tsx
View File

@ -18,7 +18,7 @@ const outlineMaskTextStyle = css`
const outlineMaskStyle = css` const outlineMaskStyle = css`
position: absolute; position: absolute;
border: 1px solid; border: 1px solid transparent;
/* create a bfc */ /* create a bfc */
transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
z-index: 10; z-index: 10;
@ -115,16 +115,12 @@ export const EditorMask: React.FC<Props> = observer((props: Props) => {
); );
const hoverMaskPosition = useMemo(() => { const hoverMaskPosition = useMemo(() => {
if ( if (!wrapperRect.current || !hoverComponentId) {
!wrapperRect.current ||
!hoverComponentId ||
hoverComponentId === selectedComponentId
) {
return undefined; return undefined;
} }
return getMaskPosition(hoverComponentId); return getMaskPosition(hoverComponentId);
}, [hoverComponentId, selectedComponentId, getMaskPosition]); }, [hoverComponentId, getMaskPosition]);
const selectedMaskPosition = useMemo(() => { const selectedMaskPosition = useMemo(() => {
if (!wrapperRect.current || !selectedComponentId) return undefined; if (!wrapperRect.current || !selectedComponentId) return undefined;
@ -133,11 +129,7 @@ export const EditorMask: React.FC<Props> = observer((props: Props) => {
}, [selectedComponentId, getMaskPosition]); }, [selectedComponentId, getMaskPosition]);
const hoverMask = hoverMaskPosition ? ( const hoverMask = hoverMaskPosition ? (
<Box <Box className={outlineMaskStyle} borderColor="black" style={hoverMaskPosition.style}>
className={outlineMaskStyle}
borderColor="black"
style={hoverMaskPosition.style}
>
<Text className={outlineMaskTextStyle} background="black"> <Text className={outlineMaskTextStyle} background="black">
{hoverMaskPosition.id} {hoverMaskPosition.id}
</Text> </Text>
@ -145,11 +137,7 @@ export const EditorMask: React.FC<Props> = observer((props: Props) => {
) : undefined; ) : undefined;
const dragMask = hoverMaskPosition ? ( const dragMask = hoverMaskPosition ? (
<Box <Box className={outlineMaskStyle} style={hoverMaskPosition.style}>
className={outlineMaskStyle}
borderColor="orange"
style={hoverMaskPosition.style}
>
<DropSlotMask <DropSlotMask
services={services} services={services}
hoverId={hoverComponentId} hoverId={hoverComponentId}