ZXY101 / mokuro-reader

A mokuro reader written in svelte
https://reader.mokuro.app/
GNU General Public License v3.0
69 stars 19 forks source link

Handle overlapping textboxes #16

Open spacehamster opened 6 months ago

spacehamster commented 6 months ago

Sometimes mokuro will output overlapping textboxes which can make it difficult to read the box with the lower z-index. image

The simplest solution I think would be to allow dragging textboxes while ctrl is held. Something like adding this to TextBox's onmousemove event and also preventing panning on textboxes.

  let dragState = {
    active: false,
    initialMouseX: 0,
    initialMouseY: 0,
    initialEleX: 0,
    initialEleY: 0,
    scale: 1
  }
  function onHover(event: MouseEvent) {
    let ele = (event.currentTarget as HTMLInputElement);
    if(event.ctrlKey && ele)
    {
      ele.style.cursor = "move";
      ele.style.userSelect = "none";
    } else if(ele) {
      ele.style.cursor = "";
      ele.style.userSelect = "";
    }
    if(event.ctrlKey && event.buttons == 1 && !dragState.active && ele.parentElement)
    {
      dragState.active = true;
      dragState.initialEleX = parseFloat(ele.style.left);
      dragState.initialEleY = parseFloat(ele.style.top);
      dragState.initialMouseX = event.x;
      dragState.initialMouseY = event.y;
      let eleRect = ele.getBoundingClientRect();
      let parentRect = ele.parentElement?.getBoundingClientRect();
      let viewLeft = eleRect.left - parentRect.left;      
      dragState.scale = viewLeft / dragState.initialEleX;
    }
    if(!event.ctrlKey || event.buttons != 1)
    {
      dragState.active = false;
    }
    if(event.ctrlKey && event.buttons == 1 && dragState.active)
    {
        let newX = dragState.initialEleX - (dragState.initialMouseX - event.x) / dragState.scale;
        let newY = dragState.initialEleY - (dragState.initialMouseY - event.y) / dragState.scale;
        ele.style.left = `${newX}px`;
        ele.style.top = `${newY}px`;
    }
  }
ZXY101 commented 6 months ago

Thanks, thats a great suggestion.

Will look into implementing it or a similar method when I get a gap.

weirdalsuperfan commented 3 weeks ago

I'd also be interested in something like this

Combining mokuro reader with Migaku makes the text take up more space, such that I can no longer move my cursor to the text at the edge of the box without the text vanishing if my cursor goes outside of the page or overlaps with another textbox.

Having a way to keep a textbox active on demand would be nice.