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

import { CubeRefractionMapping } from "./lib/three.module.js";
import { saveWorldList } from "./save.js";

var Header = function (
  ui,
  data,
  cfg,
  onSceneChanged,
  onFrameChanged,
  onObjectSelected,
  onCameraChanged
) {
  this.ui = ui;
  this.data = data;
  this.cfg = cfg;
  this.boxUi = ui.querySelector("#box");
  this.refObjUi = ui.querySelector("#ref-obj");
  this.sceneSelectorUi = ui.querySelector("#scene-selector");
  this.frameSelectorUi = ui.querySelector("#frame-selector");
  this.objectSelectorUi = ui.querySelector("#object-selector");
  this.cameraSelectorUi = ui.querySelector("#camera-selector");
  this.changedMarkUi = ui.querySelector("#changed-mark");

  this.onSceneChanged = onSceneChanged;
  this.onFrameChanged = onFrameChanged;
  this.onObjectSelected = onObjectSelected;
  this.onCameraChanged = onCameraChanged;

  if (cfg.disableSceneSelector) {
    this.sceneSelectorUi.style.display = "none";
  }

  if (cfg.disableFrameSelector) {
    this.frameSelectorUi.style.display = "none";
  }

  if (cfg.disableCameraSelector) {
    this.cameraSelectorUi.style.display = "none";
  }

  // update scene selector ui

  this.updateSceneList = function (sceneDescList) {
    let scene_selector_str = "<option>--scene--</option>";
    for (let scene in sceneDescList) {
      if (data.sceneDescList[scene])
        scene_selector_str +=
          "<option value=" +
          scene +
          ">" +
          scene +
          " - " +
          data.sceneDescList[scene].scene +
          "</option>";
      else
        scene_selector_str +=
          "<option value=" + scene + ">" + scene + "</option>";
    }

    this.ui.querySelector("#scene-selector").innerHTML = scene_selector_str;
  };

  this.updateSceneList(this.data.sceneDescList);

  this.ui.querySelector("#btn-reload-scene-list").onclick = (event) => {
    let curentValue = this.sceneSelectorUi.value;

    this.data.readSceneList().then((sceneDescList) => {
      this.updateSceneList(sceneDescList);
      this.sceneSelectorUi.value = curentValue;
    });
  };

  this.sceneSelectorUi.onchange = (e) => {
    this.onSceneChanged(e);
  };
  this.objectSelectorUi.onchange = (e) => {
    this.onObjectSelected(e);
  };
  this.frameSelectorUi.onchange = (e) => {
    this.onFrameChanged(e);
  };
  this.cameraSelectorUi.onchange = (e) => {
    this.onCameraChanged(e);
  };

  this.setObject = function (id) {
    this.objectSelectorUi.value = id;
  };

  this.clear_box_info = function () {
    this.boxUi.innerHTML = "";
  };

  (this.update_box_info = function (box) {
    var scale = box.scale;
    var pos = box.position;
    var rotation = box.rotation;
    var points_number = box.world.lidar.get_box_points_number(box);
    let distance = Math.sqrt(pos.x * pos.x + pos.y * pos.y).toFixed(2);

    this.boxUi.innerHTML =
      "<span>" +
      box.obj_type +
      "-" +
      box.obj_track_id +
      (box.annotator
        ? "</span> | <span title='annotator'>" + box.annotator
        : "") +
      "</span> | <span title='distance'>" +
      distance +
      "</span> | <span title='position'>" +
      pos.x.toFixed(2) +
      " " +
      pos.y.toFixed(2) +
      " " +
      pos.z.toFixed(2) +
      "</span> | <span title='scale'>" +
      scale.x.toFixed(2) +
      " " +
      scale.y.toFixed(2) +
      " " +
      scale.z.toFixed(2) +
      "</span> | <span title='rotation'>" +
      ((rotation.x * 180) / Math.PI).toFixed(2) +
      " " +
      ((rotation.y * 180) / Math.PI).toFixed(2) +
      " " +
      ((rotation.z * 180) / Math.PI).toFixed(2) +
      "</span> | <span title = 'points'>" +
      points_number +
      "</span> ";
    if (box.follows) {
      this.boxUi.innerHTML += "| F:" + box.follows.obj_track_id;
    }
  }),
    (this.set_ref_obj = function (marked_object) {
      this.refObjUi.innerHTML =
        "| Ref: " +
        marked_object.scene +
        "/" +
        marked_object.frame +
        ": " +
        marked_object.ann.obj_type +
        "-" +
        marked_object.ann.obj_id;
    }),
    (this.set_frame_info = function (scene, frame, on_scene_changed) {
      if (this.sceneSelectorUi.value != scene) {
        this.sceneSelectorUi.value = scene;
        on_scene_changed(scene);
      }

      this.frameSelectorUi.value = frame;
    }),
    (this.clear_frame_info = function (scene, frame) {}),
    (this.updateModifiedStatus = function () {
      let frames = this.data.worldList.filter((w) => w.annotation.modified);
      if (frames.length > 0) {
        this.ui.querySelector("#changed-mark").className =
          "ui-button alarm-mark";
      } else {
        this.ui.querySelector("#changed-mark").className = "ui-button";
      }
    });

  this.ui.querySelector("#changed-mark").onmouseenter = () => {
    let items = "";
    let frames = this.data.worldList
      .filter((w) => w.annotation.modified)
      .map((w) => w.frameInfo);
    frames.forEach((f) => {
      items += "<div class='modified-world-item'>" + f.frame + "</div>";
    });

    if (frames.length > 0) {
      this.ui.querySelector("#changed-world-list").innerHTML = items;
      this.ui.querySelector("#changed-world-list-wrapper").style.display =
        "inherit";
    }
  };

  this.ui.querySelector("#changed-mark").onmouseleave = () => {
    this.ui.querySelector("#changed-world-list-wrapper").style.display = "none";
  };

  this.ui.querySelector("#save-button").onclick = () => {
    saveWorldList(this.data.worldList);
  };
};

export { Header };