render()

in packages/designer/src/builtin-simulator/bem-tools/border-detecting.tsx [75:158]

• 73 lines of code
• 15 McCabe index (conditional complexity)

  render() {
    const { host } = this.props;
    const { current } = this;

    const canHoverHook = current?.componentMeta.advanced.callbacks?.onHoverHook;
    const canHover = (canHoverHook && typeof canHoverHook === 'function') ? canHoverHook(current.internalToShellNode()) : true;

    if (!canHover || !current || host.viewport.scrolling || host.liveEditing.editing) {
      return null;
    }

    // rootNode, hover whole viewport
    const focusNode = current.document.focusNode!;

    if (!focusNode.contains(current)) {
      return null;
    }

    if (current.contains(focusNode)) {
      const bounds = host.viewport.bounds;
      return (
        <BorderDetectingInstance
          key="line-root"
          title={current.title}
          scale={this.scale}
          scrollX={host.viewport.scrollX}
          scrollY={host.viewport.scrollY}
          rect={new DOMRect(0, 0, bounds.width, bounds.height)}
        />
      );
    }

    const lockedNode = getClosestNode(current, (n) => {
      // 假如当前节点就是 locked 状态，要从当前节点的父节点开始查找
      return !!(current?.isLocked ? n.parent?.isLocked : n.isLocked);
    });
    if (lockedNode && lockedNode.getId() !== current.getId()) {
      // 选中父节锁定的节点
      return (
        <BorderDetectingInstance
          key="line-h"
          title={current.title}
          scale={this.scale}
          scrollX={this.scrollX}
          scrollY={this.scrollY}
          // @ts-ignore
          rect={host.computeComponentInstanceRect(host.getComponentInstances(lockedNode)[0], lockedNode.componentMeta.rootSelector)}
          isLocked={lockedNode?.getId() !== current.getId()}
        />
      );
    }

    const instances = host.getComponentInstances(current);
    if (!instances || instances.length < 1) {
      return null;
    }

    if (instances.length === 1) {
      return (
        <BorderDetectingInstance
          key="line-h"
          title={current.title}
          scale={this.scale}
          scrollX={this.scrollX}
          scrollY={this.scrollY}
          rect={host.computeComponentInstanceRect(instances[0], current.componentMeta.rootSelector)}
        />
      );
    }
    return (
      <Fragment>
        {instances.map((inst, i) => (
          <BorderDetectingInstance
            key={`line-h-${i}`}
            title={current.title}
            scale={this.scale}
            scrollX={this.scrollX}
            scrollY={this.scrollY}
            rect={host.computeComponentInstanceRect(inst, current.componentMeta.rootSelector)}
          />
        ))}
      </Fragment>
    );
  }