fix(designer): 修复VC组件canResizing发生变化时无法拖拽
This commit is contained in:
狗空
liujuping
parent
7bef50762c
commit
2d80d11475
|
|
@ -24,5 +24,6 @@
|
|||
- [Ychangqing](https://github.com/Ychangqing)
|
||||
- [yize](https://github.com/yize)
|
||||
- [youluna](https://github.com/youluna)
|
||||
- [ibreathebsb](https://github.com/ibreathebsb)
|
||||
|
||||
如果您贡献过低代码引擎，但是没有看到您的名字，为我们的疏忽感到抱歉。欢迎您通过 PR 补充上自己的名字。
|
||||
|
|
|
|||
|
|
@ -236,17 +236,22 @@ export class BoxResizingInstance extends Component<{
|
|||
|
||||
render() {
|
||||
const { observed } = this.props;
|
||||
if (!observed.hasOffset) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const { node, offsetWidth, offsetHeight, offsetTop, offsetLeft } = observed;
|
||||
let triggerVisible: any = [];
|
||||
const { advanced } = node.componentMeta;
|
||||
if (advanced.getResizingHandlers) {
|
||||
triggerVisible = advanced.getResizingHandlers(node.internalToShellNode());
|
||||
let offsetWidth = 0;
|
||||
let offsetHeight = 0;
|
||||
let offsetTop = 0;
|
||||
let offsetLeft = 0;
|
||||
if (observed.hasOffset) {
|
||||
offsetWidth = observed.offsetWidth;
|
||||
offsetHeight = observed.offsetHeight;
|
||||
offsetTop = observed.offsetTop;
|
||||
offsetLeft = observed.offsetLeft;
|
||||
const { node } = observed;
|
||||
const metadata = node.componentMeta.getMetadata();
|
||||
if (metadata.configure?.advanced?.getResizingHandlers) {
|
||||
triggerVisible = metadata.configure.advanced.getResizingHandlers(node.internalToShellNode());
|
||||
}
|
||||
}
|
||||
|
||||
triggerVisible = normalizeTriggers(triggerVisible);
|
||||
|
||||
const baseSideClass = 'lc-borders lc-resize-side';
|
||||
|
|
@ -254,90 +259,100 @@ export class BoxResizingInstance extends Component<{
|
|||
|
||||
return (
|
||||
<div>
|
||||
{triggerVisible.includes('N') && (
|
||||
<div
|
||||
ref={(ref) => { this.outlineN = ref; }}
|
||||
className={classNames(baseSideClass, 'n')}
|
||||
style={{
|
||||
height: 20,
|
||||
transform: `translate(${offsetLeft}px, ${offsetTop - 10}px)`,
|
||||
width: offsetWidth,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{triggerVisible.includes('NE') && (
|
||||
<div
|
||||
ref={(ref) => { this.outlineNE = ref; }}
|
||||
className={classNames(baseCornerClass, 'ne')}
|
||||
style={{
|
||||
transform: `translate(${offsetLeft + offsetWidth - 5}px, ${offsetTop - 3}px)`,
|
||||
cursor: 'nesw-resize',
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{triggerVisible.includes('E') && (
|
||||
<div
|
||||
className={classNames(baseSideClass, 'e')}
|
||||
ref={(ref) => { this.outlineE = ref; }}
|
||||
style={{
|
||||
height: offsetHeight,
|
||||
transform: `translate(${offsetLeft + offsetWidth - 10}px, ${offsetTop}px)`,
|
||||
width: 20,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{triggerVisible.includes('SE') && (
|
||||
<div
|
||||
ref={(ref) => { this.outlineSE = ref; }}
|
||||
className={classNames(baseCornerClass, 'se')}
|
||||
style={{
|
||||
transform: `translate(${offsetLeft + offsetWidth - 5}px, ${offsetTop + offsetHeight - 5}px)`,
|
||||
cursor: 'nwse-resize',
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{triggerVisible.includes('S') && (
|
||||
<div
|
||||
ref={(ref) => { this.outlineS = ref; }}
|
||||
className={classNames(baseSideClass, 's')}
|
||||
style={{
|
||||
height: 20,
|
||||
transform: `translate(${offsetLeft}px, ${offsetTop + offsetHeight - 10}px)`,
|
||||
width: offsetWidth,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{triggerVisible.includes('SW') && (
|
||||
<div
|
||||
ref={(ref) => { this.outlineSW = ref; }}
|
||||
className={classNames(baseCornerClass, 'sw')}
|
||||
style={{
|
||||
transform: `translate(${offsetLeft - 3}px, ${offsetTop + offsetHeight - 5}px)`,
|
||||
cursor: 'nesw-resize',
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{triggerVisible.includes('W') && (
|
||||
<div
|
||||
ref={(ref) => { this.outlineW = ref; }}
|
||||
className={classNames(baseSideClass, 'w')}
|
||||
style={{
|
||||
height: offsetHeight,
|
||||
transform: `translate(${offsetLeft - 10}px, ${offsetTop}px)`,
|
||||
width: 20,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{triggerVisible.includes('NW') && (
|
||||
<div
|
||||
ref={(ref) => { this.outlineNW = ref; }}
|
||||
className={classNames(baseCornerClass, 'nw')}
|
||||
style={{
|
||||
transform: `translate(${offsetLeft - 3}px, ${offsetTop - 3}px)`,
|
||||
cursor: 'nwse-resize',
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
<div
|
||||
ref={(ref) => {
|
||||
this.outlineN = ref;
|
||||
}}
|
||||
className={classNames(baseSideClass, 'n')}
|
||||
style={{
|
||||
height: 20,
|
||||
transform: `translate(${offsetLeft}px, ${offsetTop - 10}px)`,
|
||||
width: offsetWidth,
|
||||
display: triggerVisible.includes('N') ? 'flex' : 'none',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
ref={(ref) => {
|
||||
this.outlineNE = ref;
|
||||
}}
|
||||
className={classNames(baseCornerClass, 'ne')}
|
||||
style={{
|
||||
transform: `translate(${offsetLeft + offsetWidth - 5}px, ${offsetTop - 3}px)`,
|
||||
cursor: 'nesw-resize',
|
||||
display: triggerVisible.includes('NE') ? 'flex' : 'none',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
className={classNames(baseSideClass, 'e')}
|
||||
ref={(ref) => {
|
||||
this.outlineE = ref;
|
||||
}}
|
||||
style={{
|
||||
height: offsetHeight,
|
||||
transform: `translate(${offsetLeft + offsetWidth - 10}px, ${offsetTop}px)`,
|
||||
width: 20,
|
||||
display: triggerVisible.includes('E') ? 'flex' : 'none',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
ref={(ref) => {
|
||||
this.outlineSE = ref;
|
||||
}}
|
||||
className={classNames(baseCornerClass, 'se')}
|
||||
style={{
|
||||
transform: `translate(${offsetLeft + offsetWidth - 5}px, ${
|
||||
offsetTop + offsetHeight - 5
|
||||
}px)`,
|
||||
cursor: 'nwse-resize',
|
||||
display: triggerVisible.includes('SE') ? 'flex' : 'none',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
ref={(ref) => {
|
||||
this.outlineS = ref;
|
||||
}}
|
||||
className={classNames(baseSideClass, 's')}
|
||||
style={{
|
||||
height: 20,
|
||||
transform: `translate(${offsetLeft}px, ${offsetTop + offsetHeight - 10}px)`,
|
||||
width: offsetWidth,
|
||||
display: triggerVisible.includes('S') ? 'flex' : 'none',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
ref={(ref) => {
|
||||
this.outlineSW = ref;
|
||||
}}
|
||||
className={classNames(baseCornerClass, 'sw')}
|
||||
style={{
|
||||
transform: `translate(${offsetLeft - 3}px, ${offsetTop + offsetHeight - 5}px)`,
|
||||
cursor: 'nesw-resize',
|
||||
display: triggerVisible.includes('SW') ? 'flex' : 'none',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
ref={(ref) => {
|
||||
this.outlineW = ref;
|
||||
}}
|
||||
className={classNames(baseSideClass, 'w')}
|
||||
style={{
|
||||
height: offsetHeight,
|
||||
transform: `translate(${offsetLeft - 10}px, ${offsetTop}px)`,
|
||||
width: 20,
|
||||
display: triggerVisible.includes('W') ? 'flex' : 'none',
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
ref={(ref) => {
|
||||
this.outlineNW = ref;
|
||||
}}
|
||||
className={classNames(baseCornerClass, 'nw')}
|
||||
style={{
|
||||
transform: `translate(${offsetLeft - 3}px, ${offsetTop - 3}px)`,
|
||||
cursor: 'nwse-resize',
|
||||
display: triggerVisible.includes('NW') ? 'flex' : 'none',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue