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

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

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