jjb-lc-designable
Version:
基于alibaba-designable源码二次封装的表单设计器。
58 lines • 2.94 kB
JavaScript
import React from 'react';
import { useMoveHelper, usePrefix } from '../../hooks';
import { ClosestPosition } from 'jjb-lc-designable/core';
import { observer } from 'jjb-lc-formily/reactive-react';
export const Insertion = observer(() => {
const moveHelper = useMoveHelper();
const prefix = usePrefix('aux-insertion');
const createInsertionStyle = () => {
const closestDirection = moveHelper.viewportClosestDirection;
const closestRect = moveHelper.viewportClosestOffsetRect;
const isInlineLayout = moveHelper.closestNode?.moveLayout === 'horizontal';
const baseStyle = {
position: 'absolute',
transform: 'perspective(1px) translate3d(0,0,0)',
top: 0,
left: 0
};
if (!closestRect) return baseStyle;
if (closestDirection === ClosestPosition.Before || closestDirection === ClosestPosition.ForbidBefore) {
baseStyle.width = 2;
baseStyle.height = closestRect.height;
baseStyle.transform = `perspective(1px) translate3d(${closestRect.x}px,${closestRect.y}px,0)`;
} else if (closestDirection === ClosestPosition.After || closestDirection === ClosestPosition.ForbidAfter) {
baseStyle.width = 2;
baseStyle.height = closestRect.height;
baseStyle.transform = `perspective(1px) translate3d(${closestRect.x + closestRect.width - 2}px,${closestRect.y}px,0)`;
} else if (closestDirection === ClosestPosition.InnerAfter || closestDirection === ClosestPosition.Under || closestDirection === ClosestPosition.ForbidInnerAfter || closestDirection === ClosestPosition.ForbidUnder) {
if (isInlineLayout) {
baseStyle.width = 2;
baseStyle.height = closestRect.height;
baseStyle.transform = `perspective(1px) translate3d(${closestRect.x + closestRect.width - 2}px,${closestRect.y}px,0)`;
} else {
baseStyle.width = closestRect.width;
baseStyle.height = 2;
baseStyle.transform = `perspective(1px) translate3d(${closestRect.x}px,${closestRect.y + closestRect.height - 2}px,0)`;
}
} else if (closestDirection === ClosestPosition.InnerBefore || closestDirection === ClosestPosition.Upper || closestDirection === ClosestPosition.ForbidInnerBefore || closestDirection === ClosestPosition.ForbidUpper) {
if (isInlineLayout) {
baseStyle.width = 2;
baseStyle.height = closestRect.height;
baseStyle.transform = `perspective(1px) translate3d(${closestRect.x}px,${closestRect.y}px,0)`;
} else {
baseStyle.width = closestRect.width;
baseStyle.height = 2;
baseStyle.transform = `perspective(1px) translate3d(${closestRect.x}px,${closestRect.y}px,0)`;
}
}
if (closestDirection.includes('FORBID')) {
baseStyle.backgroundColor = 'red';
}
return baseStyle;
};
return /*#__PURE__*/React.createElement("div", {
className: prefix,
style: createInsertionStyle()
});
});
Insertion.displayName = 'Insertion';