diff --git a/CONTRIBUTOR.md b/CONTRIBUTOR.md index 89757bac9..11d50baad 100644 --- a/CONTRIBUTOR.md +++ b/CONTRIBUTOR.md @@ -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 补充上自己的名字。 diff --git a/packages/designer/src/builtin-simulator/bem-tools/border-resizing.tsx b/packages/designer/src/builtin-simulator/bem-tools/border-resizing.tsx index e174c4ad6..29401ca6b 100644 --- a/packages/designer/src/builtin-simulator/bem-tools/border-resizing.tsx +++ b/packages/designer/src/builtin-simulator/bem-tools/border-resizing.tsx @@ -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 (
- {triggerVisible.includes('N') && ( -
{ this.outlineN = ref; }} - className={classNames(baseSideClass, 'n')} - style={{ - height: 20, - transform: `translate(${offsetLeft}px, ${offsetTop - 10}px)`, - width: offsetWidth, - }} - /> - )} - {triggerVisible.includes('NE') && ( -
{ this.outlineNE = ref; }} - className={classNames(baseCornerClass, 'ne')} - style={{ - transform: `translate(${offsetLeft + offsetWidth - 5}px, ${offsetTop - 3}px)`, - cursor: 'nesw-resize', - }} - /> - )} - {triggerVisible.includes('E') && ( -
{ this.outlineE = ref; }} - style={{ - height: offsetHeight, - transform: `translate(${offsetLeft + offsetWidth - 10}px, ${offsetTop}px)`, - width: 20, - }} - /> - )} - {triggerVisible.includes('SE') && ( -
{ this.outlineSE = ref; }} - className={classNames(baseCornerClass, 'se')} - style={{ - transform: `translate(${offsetLeft + offsetWidth - 5}px, ${offsetTop + offsetHeight - 5}px)`, - cursor: 'nwse-resize', - }} - /> - )} - {triggerVisible.includes('S') && ( -
{ this.outlineS = ref; }} - className={classNames(baseSideClass, 's')} - style={{ - height: 20, - transform: `translate(${offsetLeft}px, ${offsetTop + offsetHeight - 10}px)`, - width: offsetWidth, - }} - /> - )} - {triggerVisible.includes('SW') && ( -
{ this.outlineSW = ref; }} - className={classNames(baseCornerClass, 'sw')} - style={{ - transform: `translate(${offsetLeft - 3}px, ${offsetTop + offsetHeight - 5}px)`, - cursor: 'nesw-resize', - }} - /> - )} - {triggerVisible.includes('W') && ( -
{ this.outlineW = ref; }} - className={classNames(baseSideClass, 'w')} - style={{ - height: offsetHeight, - transform: `translate(${offsetLeft - 10}px, ${offsetTop}px)`, - width: 20, - }} - /> - )} - {triggerVisible.includes('NW') && ( -
{ this.outlineNW = ref; }} - className={classNames(baseCornerClass, 'nw')} - style={{ - transform: `translate(${offsetLeft - 3}px, ${offsetTop - 3}px)`, - cursor: 'nwse-resize', - }} - /> - )} +
{ + 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', + }} + /> +
{ + 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', + }} + /> +
{ + this.outlineE = ref; + }} + style={{ + height: offsetHeight, + transform: `translate(${offsetLeft + offsetWidth - 10}px, ${offsetTop}px)`, + width: 20, + display: triggerVisible.includes('E') ? 'flex' : 'none', + }} + /> +
{ + 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', + }} + /> +
{ + 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', + }} + /> +
{ + 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', + }} + /> +
{ + 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', + }} + /> +
{ + 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', + }} + />
); }