calculateResizable()

in desktop/flipper-plugin/src/ui/Interactive.tsx [558:660]

• 76 lines of code
• 27 McCabe index (conditional complexity)

  calculateResizable(event: MouseEvent) {
    const resizing = this.checkIfResizable(event);
    if (!resizing) {
      return;
    }

    const canResize = this.getResizable();
    if (!canResize) {
      return;
    }

    const {bottom, left, right, top} = resizing;
    let newCursor;

    const movingHorizontal = left || right;
    const movingVertical = top || left;

    // left
    if (left) {
      newCursor = 'ew-resize';
    }

    // right
    if (right) {
      newCursor = 'ew-resize';
    }

    // if resizing vertically and one side can't be resized then use different cursor
    if (
      movingHorizontal &&
      (canResize.left !== true || canResize.right !== true)
    ) {
      newCursor = 'col-resize';
    }

    // top
    if (top) {
      newCursor = 'ns-resize';

      // top left
      if (left) {
        newCursor = 'nwse-resize';
      }

      // top right
      if (right) {
        newCursor = 'nesw-resize';
      }
    }

    // bottom
    if (bottom) {
      newCursor = 'ns-resize';

      // bottom left
      if (left) {
        newCursor = 'nesw-resize';
      }

      // bottom right
      if (right) {
        newCursor = 'nwse-resize';
      }
    }

    // if resizing horziontally and one side can't be resized then use different cursor
    if (
      movingVertical &&
      !movingHorizontal &&
      (canResize.top !== true || canResize.bottom !== true)
    ) {
      newCursor = 'row-resize';
    }

    if (
      this.state.resizingSides?.bottom === bottom &&
      this.state.resizingSides?.left === left &&
      this.state.resizingSides?.top === top &&
      this.state.resizingSides?.right === right &&
      this.state.cursor === newCursor &&
      this.state.couldResize === Boolean(newCursor)
    ) {
      return;
    }

    const resizingSides = {
      bottom,
      left,
      right,
      top,
    };

    const {onCanResize} = this.props;
    if (onCanResize) {
      onCanResize({});
    }

    this.setState({
      couldResize: Boolean(newCursor),
      cursor: newCursor,
      resizingSides,
    });
  }