render()

in packages/designer/src/builtin-simulator/bem-tools/border-resizing.tsx [236:357]
120 lines of code
11 McCabe index (conditional complexity)

  render() {
    const { observed } = this.props;
    let triggerVisible: any = [];
    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';
    const baseCornerClass = 'lc-borders lc-resize-corner';

    return (
      <div>
        <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>
    );
  }