vizhub-core / vzcode

Mob Programming Code Editor
MIT License
71 stars 14 forks source link

Number Dragger should work outside editor #430

Open curran opened 10 months ago

curran commented 10 months ago

As a user editing a number with the interactive number dragger widget, I want to be able to continue dragging outside the code editor, so that I can get a greater range.

curran commented 10 months ago

Related to https://github.com/replit/codemirror-interact/issues/16

curran commented 10 months ago

I realized that this is almost the exact same issue as #426 at its core. I bet we could solve both at once.

curran commented 9 months ago

This feature requires that we transform the insertion cursor positions (start and end) by all ShareDB ops.

curran commented 8 months ago

Here's what I tried, from https://github.com/replit/codemirror-interact/issues/16

  // This DOES NOT works fine with the 999 to 1000 transition
  // TODO figure out why
  onClick(text, setText, e) {
    let newVal = Number(text);

    const handleDrag = (e: MouseEvent) => {
      if (onInteract) onInteract();
      newVal += e.movementX;
      if (isNaN(newVal)) return;
      setText(newVal.toString());
    };
    // add an event listener to the document for mouse move
    document.addEventListener(
      'mousemove',
      handleDrag,
    );

    // when the mouse is released, remove the event listener
    document.addEventListener('mouseup', () => {
      document.removeEventListener(
        'mousemove',
        handleDrag,
      );
    });
  },