label-3d-points/public/js/mouse.js

import * as THREE from "./lib/three.module.js";

function Mouse(
  view,
  op_state,
  mainui_container,
  parentUi,
  on_left_click,
  on_right_click,
  on_select_rect
) {
  this.view = view;
  this.domElement = mainui_container;
  this.parentUi = parentUi;
  this.operation_state = op_state;

  this.domElement.addEventListener(
    "mousemove",
    (e) => {
      this.onMouseMove(e);
    },
    false
  );
  this.domElement.addEventListener(
    "mousedown",
    (e) => {
      this.onMouseDown(e);
    },
    true
  );

  this.raycaster = new THREE.Raycaster();
  this.onDownPosition = new THREE.Vector2();
  this.onUpPosition = new THREE.Vector2();

  this.handleLeftClick = on_left_click;
  this.handleRightClick = on_right_click;
  this.handleSelectRect = on_select_rect;

  var in_select_mode = false;
  var select_start_pos;
  var select_end_pos;

  this.get_mouse_location_in_world = function () {
    this.raycaster.setFromCamera(this.onUpPosition, this.view.camera);
    var o = this.raycaster.ray.origin;
    var d = this.raycaster.ray.direction;

    var alpha = -o.z / d.z;
    var x = o.x + d.x * alpha;
    var y = o.y + d.y * alpha;
    return { x: x, y: y, z: 0 };
  };

  this.get_screen_location_in_world = function (x, y) {
    var screen_pos = new THREE.Vector2();
    screen_pos.x = x;
    screen_pos.y = y;

    this.raycaster.setFromCamera(screen_pos, this.view.camera);
    var o = this.raycaster.ray.origin;
    var d = this.raycaster.ray.direction;

    var alpha = -o.z / d.z;
    var x = o.x + d.x * alpha;
    var y = o.y + d.y * alpha;
    return { x: x, y: y, z: 0 };
  };

  this.getMousePosition = function (dom, offsetX, offsetY) {
    return [
      (offsetX / dom.clientWidth) * 2 - 1,
      (-offsetY / dom.clientHeight) * 2 + 1,
    ];
  };

  this.getIntersects = function (point, objects) {
    // mouse is temp var
    let mouse = new THREE.Vector2();
    mouse.set(point.x, point.y);

    this.raycaster.setFromCamera(mouse, this.view.camera);

    return this.raycaster.intersectObjects(objects, false); // 2nd argument: recursive.
  };

  this.onMouseDown = function (event) {
    in_select_mode = false;

    if (event.which == 3) {
      this.operation_state.key_pressed = false;
    } else if (event.which == 1) {
      console.log("mouse left key down!");
      if (event.ctrlKey || event.shiftKey) {
        event.stopPropagation();
        event.preventDefault();

        in_select_mode = true;

        select_start_pos = {
          x: event.offsetX,
          y: event.offsetY,
        };
      }
    }

    var array = this.getMousePosition(
      this.domElement,
      event.offsetX,
      event.offsetY
    );
    this.onDownPosition.fromArray(array);
    console.log("mouse down", array);

    this.domElement.addEventListener("mouseup", on_mouse_up, false);
  };

  this.onMouseMove = function (event) {
    event.preventDefault();

    //console.log(this.getMousePosition(this.domElement, event.offsetX, event.offsetY));

    if (in_select_mode) {
      select_end_pos = {
        x: event.offsetX,
        y: event.offsetY,
      };

      if (
        event.offsetX != select_start_pos.x ||
        event.offsetY != select_end_pos.y
      ) {
        //draw select box
        var sbox = this.parentUi.querySelector("#select-box");

        sbox.style.display = "inherit";

        if (select_start_pos.x < select_end_pos.x) {
          sbox.style.left = select_start_pos.x + "px";
          sbox.style.width = select_end_pos.x - select_start_pos.x + "px";
        } else {
          sbox.style.left = select_end_pos.x + "px";
          sbox.style.width = -select_end_pos.x + select_start_pos.x + "px";
        }

        if (select_start_pos.y < select_end_pos.y) {
          sbox.style.top = select_start_pos.y + "px";
          sbox.style.height = select_end_pos.y - select_start_pos.y + "px";
        } else {
          sbox.style.top = select_end_pos.y + "px";
          sbox.style.height = -select_end_pos.y + select_start_pos.y + "px";
        }
      }
    }
  };

  var on_mouse_up = (e) => {
    this.onMouseUp(e);
  };

  this.onMouseUp = function (event) {
    this.domElement.removeEventListener("mouseup", on_mouse_up, false);

    var array = this.getMousePosition(
      this.domElement,
      event.offsetX,
      event.offsetY
    );
    this.onUpPosition.fromArray(array);

    console.log("mouse up", array);

    if (this.onDownPosition.distanceTo(this.onUpPosition) === 0) {
      if (event.which == 3) {
        //right click
        // if no other key pressed, we consider this as a right click
        if (!this.operation_state.key_pressed) {
          console.log("right clicked.");
          this.handleRightClick(event);
        }
      } else {
        // left click
        this.handleLeftClick(event);
      }

      in_select_mode = false;
      return;
    }

    if (in_select_mode) {
      in_select_mode = false;

      var sbox = this.parentUi.querySelector("#select-box");
      sbox.style.display = "none";

      if (this.handleSelectRect) {
        var x, y, w, h;

        if (this.onDownPosition.x < this.onUpPosition.x) {
          x = this.onDownPosition.x;
          w = this.onUpPosition.x - this.onDownPosition.x;
        } else {
          x = this.onUpPosition.x;
          w = this.onDownPosition.x - this.onUpPosition.x;
        }

        if (this.onDownPosition.y < this.onUpPosition.y) {
          y = this.onDownPosition.y;
          h = this.onUpPosition.y - this.onDownPosition.y;
        } else {
          y = this.onUpPosition.y;
          h = this.onDownPosition.y - this.onUpPosition.y;
        }

        console.log("select rect", x, y, w, h);
        this.handleSelectRect(x, y, w, h, event.ctrlKey, event.shiftKey);
      }
    }
  };
}

export { Mouse };