stmms-web/src/features/mark/use/splitPane.ts

import { onMounted, onUnmounted, ref, watchEffect } from "vue";

export function dragSplitPane() {
  let pos = { y: 0 };
  const dragSpliter = ref(null as unknown as HTMLDivElement);
  let topPercent = ref(30);

  const mouseDownHandler = function (e: MouseEvent) {
    // console.log(e);
    if (e.target !== dragSpliter.value) return;
    e.preventDefault();
    pos = {
      // Get the current mouse position
      y: e.clientY,
    };
    // topPercent.value = 100 * e.offsetTop / e.target.parentElement.style.height;
    if (dragSpliter.value) {
      // dragSpliter.value.style.cursor = "row-resize";
      // console.log("add");

      document.addEventListener("mousemove", mouseMoveHandler);
      document.addEventListener("mouseup", mouseUpHandler);
    }
    return false;
  };

  const mouseMoveHandler = function (e: MouseEvent) {
    e.preventDefault();
    const dy = e.clientY - pos.y;

    // // Scroll the element
    // // dragSpliter.value.style.marginTop =
    // //   (parseFloat(dragSpliter.value.style.marginTop) || 0) + dy + "px";
    dragSpliter.value.style.marginTop = dy + "px";
    // console.log(dragSpliter.value.style.marginTop);
    const target = e.target as HTMLElement;
    const parent = target.parentElement;
    // console.log(getComputedStyle(e.target.parentElement).height);
    // console.log({
    //   offsetTop: target.offsetTop,
    //   dy: dy,
    //   movementY: e.movementY,
    // });
    // if (parent)
    //   topPercent.value =
    //     (100 * target.offsetTop) / parseFloat(getComputedStyle(parent).height);
    // console.log("topPercent", topPercent.value);
    return false;
  };

  const mouseUpHandler = function (e: MouseEvent) {
    const dy = e.clientY - pos.y;

    // Scroll the element
    // dragSpliter.value.style.marginTop =
    //   (parseFloat(dragSpliter.value.style.marginTop) || 0) + dy + "px";
    // dragSpliter.value.style.marginTop = dy + "px";
    // console.log(dragSpliter.value.style.marginTop);
    const target = e.target as HTMLElement;
    const parent = target.parentElement;
    // console.log(getComputedStyle(e.target.parentElement).height);
    // console.log("offsetTop", target.offsetTop);
    // TODO: 暂时不知道为啥有 140
    if (parent)
      topPercent.value =
        (100 * target.offsetTop) / parseFloat(getComputedStyle(parent).height);
    // console.log({
    //   topPercent: topPercent.value,
    //   "parseFloat(getComputedStyle(parent).height)": parseFloat(
    //     getComputedStyle(parent).height
    //   ),
    //   "target.offsetTop": target.offsetTop,
    // });

    // console.log("removed");
    if (dragSpliter.value) {
      document.removeEventListener("mousemove", mouseMoveHandler);
      document.removeEventListener("mouseup", mouseUpHandler);
      // dragSpliter.value.style.cursor = "auto";
      dragSpliter.value.style.marginTop = "0";
    }
  };

  onMounted(() => {
    watchEffect(() => {
      if (dragSpliter.value) {
        // console.log("watchEffect");
        document.addEventListener("mousedown", mouseDownHandler);
      }
    });
  });
  onUnmounted(() => {
    if (dragSpliter.value) {
      document.removeEventListener("mousedown", mouseDownHandler);
      document.removeEventListener("mousemove", mouseMoveHandler);
      document.removeEventListener("mouseup", mouseUpHandler);
    }
  });

  return { dragSpliter, topPercent };
}