mathlive icon indicating copy to clipboard operation
mathlive copied to clipboard

[FEATURE] Support Drag and Drop

Open ShaMan123 opened this issue 3 years ago • 3 comments

Description

Add support to dragstart event so that the mathlive data will be available on drop event similarly to copy event. I am willing to PR, wanted to see if I'm I in the right direction.

Is this the place to add the functionality?https://github.com/arnog/mathlive/blob/59c3091896053bd7c2e328f9c785270f9d748847/src/editor/keyboard.ts#L299

Something like:

target.addEventListener('dragstart', (ev) => handlers.copy(ev), true);

I believe this is the source of the copy logic: https://github.com/arnog/mathlive/blob/59c3091896053bd7c2e328f9c785270f9d748847/src/editor-mathfield/mode-editor.ts#L26 Simply replacing all ev.clipboardData occurrences into a variable should do the job.

static onCopy(mathfield: MathfieldPrivate, ev: ClipboardEvent): void {
   ModeEditor.handleDataTransfer(ev.clipboardData)
}
static onDragStart(mathfield: MathfieldPrivate, ev: DragEvent): void {
   ModeEditor.handleDataTransfer(ev.dataTransfer)
}
static handleDataTransfer(mathfield: MathfieldPrivate, dataTransfer: DataTransfer): void {
   //  handle the logic, it is exactly the same for both events so it remains unchanged
}

ShaMan123 avatar Jun 03 '21 05:06 ShaMan123

That sounds great!

Since the event is not related to the keyboard, I would add the event listener in mathfield-private.ts, probably around where there's a event listener for the wheel event.

Factoring handleDataTransfer makes sense, and probably does belong inmode-editor.ts.

arnog avatar Jun 03 '21 06:06 arnog

Great! I'll get to it in the upcoming days. How do I test/dev mathlive? I'm not working on linux. I see the scripts are linux scripts

ShaMan123 avatar Jun 03 '21 16:06 ShaMan123

There's some information here: https://github.com/arnog/mathlive/blob/master/documentation/CONTRIBUTOR_GUIDE.md

The scripts use the Bash shell, but it should work on any operating system (macOS, Windows, Linux).

After npm install use npm run start to build and launch a test environment. Run npm test to run the full test suite. The full test suite will also be run automatically (as well as linting) when you push to the repo.

arnog avatar Jun 03 '21 16:06 arnog

It's been a couple of years, so I'm assuming this has been abandonned.

arnog avatar Dec 08 '23 22:12 arnog

Yes, sorry

ShaMan123 avatar Dec 09 '23 03:12 ShaMan123