zyzo/react-dnd-mouse-backend

Mouse Backend for react-dnd library

react-dnd-mouse-backend

http://zyzo.github.io/react-dnd-mouse-backend/

Mouse Backend for React Drag and Drop library http://gaearon.github.io/react-dnd

• Usage
• Playground
• Development
• Credits

Usage

import { DragDropContext } from 'react-dnd'
import MouseBackEnd from 'react-dnd-mouse-backend'

const App = {...}

const AppContainer = DragDropContext(MouseBackEnd)(App)

Playground

First, prepare the playground:

cd example;
yarn; yarn start

Then head to http://localhost:3030/ to start some fun drag and dropping.

Development

First, install the project locally:

git clone [email protected]:zyzo/react-dnd-mouse-backend.git
cd react-dnd-mouse-backend; npm install
# (Optional) prepare example project
cd example; npm install

Then, link react-dnd-mouse-backend to example project (or your js project):

# in ./react-dnd-mouse-backend
npm link
cd example; npm link react-dnd-mouse-backend

Finally you can begin to make changes in src folder, and rebuild the lib:

npm run build

Credits

Inspired by HTML5 Backend & Touch Backend to support only mouse events, which work much better in some cases, like svg.

react-dnd-mouse-backend's Issues

Handler prevents default on everything on the page

Hi @zyzo . First of all thanks for this backend - it's been very useful. There is a serious bug though. The preventDefault here https://github.com/zyzo/react-dnd-mouse-backend/blob/master/src/MouseBackend.js#L138 is executed on every mousedown on the page, so it's preventing the default behaviour on buttons, textareas and other elements. Some of them will work because there will be a click event also fired.

The fix would be to remove that preventDefault but my question is why is it there in the first place? If it's needed could not be replaced by isDragging check?

Escape key to cancel drag?

Is it possible to cause the drag the cancel by hitting the escape key? While the HTML 5 backend will cancel the drag on escape, the mouse back end drag is not effected.

Though I donʻt see how that where that might have been implemented explicitly on HTML5, I was looking at the TouchBackend. It has a enableKeyboardEvents property.

When set, it adds a keyboard listener that calls the following on escape.

handleCancelOnEscape (e) {
    if (e.key === 'Escape' && this.monitor.isDragging()){
        this._mouseClientOffset = {};

        this.uninstallSourceNodeRemovalObserver();
        this.actions.endDrag();
    }
}

Would something like this be needed to handle escape in the mouse back end?

Thanks.

not work in Firefox

how to use connectDragPreview?

example is not working

Funny enough, react-dnd-mouse-backend package was missing on a fresh install in example.
Works fine after install.

isOver being falsely set on DropTarget

GIF

As you can see in the GIF above, isOver is randomly being set to true even when it should not.

More details:
StackOverflow

YARN

Hey, may you add your repo on YARN?

Drag Preview not working - how hard to fix?

Hi, I realize this package may not be official at all, and am here because I'm looking for react-dnd... but for svg elements. I have react-dnd working for HTML elements, but my understanding is now that HTML5 backend doesn't work for svg.

This mouse backend package does the basic job it seems (at least for my simple thus far) - thanks! But, no drag preview displays unfortunately (not for html nor svg elements). My question is how hard do you think it would be for one of us to fix this up to support drag preview?

I'm ignorant of the mousemove details it would take to hook this mouse backend lib to react-dnd standards, but could look into it if needed. For now, I assume it wouldn't be too difficult to eventually get that working in this backend - do you agree?

Thanks!

Here is my basic render code, which does not produce a drag preview (same code with Html5 backend and Html elements works fine). Note react-dnd collecting function, etc. are omitted.

return connectDragPreview(connectDragSource(<g id='Piece'> <circle className={'piece piece-'+pawn.owner} cx={originX-50+idx%5*25} cy={originY+Math.floor(idx/5)*25}/> <text className={'pieceName pieceName-'+pawn.owner} x={originX-75+idx%5*25} y={originY+Math.floor(idx/5)*25}>{ant.id}</text> </g>));

Note: When adding connectDragPreview(...), I had to firstly get around errors by changing misspelling in lib\MouseBackend.js 'sourcePreviewNodeOptions' to 'sourcePreviewNodesOptions'.

So just no drag preview of anything shows up (even though drag and drop work fine). No errors in console. Looking at lib\MouseBackend.js, I don't see where sourcePreviewNodes is really being utilized, and am not sure what to do with it. I assume this is lightweight/pending/unofficial and thus not complete, but wanted to check the author's thoughts on feasibility of one of us adding drag preview support. Thanks again.

Add typing?

Hi, planning to add typing (TypeScript)?

Can it support dropping files on some element?

I'm using this backend with svg elements and I need to be able to let user drag image files into my project.
So will this backend support dropping files?
Thanks.

Don't depend on react-dnd

I'm the author of angular-skyhook, which is a re-implementation of react-dnd in Angular. It uses the same underlying dnd-core and is therefore compatible with all the backends.

The only problem is that existing backends tend to depend on react-dnd, and by extension, react. Technically, backends don't need any dependencies, but a peerDependency on dnd-core would be appropriate if you wanted to, and useful if it ever adds type annotations. Browsing this codebase, it seems like the only use of react-dnd is for the examples, which means the only work to do is change how the examples refer to the backend. You could probably just find and replace to make all references start with ../../ or something.

I'm happy to submit a PR to that effect.

Related issues

• LouisBrunner/dnd-multi-backend#21
• https://github.com/yahoo/react-dnd-touch-backend/issues/96

isOver does not work correctly for nested drop targets

in react-dnd DragDropMonitorImpl.js
function isOverTarget expects the target ids to be sorted by their containment, leave last in the list:

var index = targetIds.indexOf(targetId);
        if (shallow) {
            return index === targetIds.length - 1;
        }
        else {
            return index > -1;
        }

Thus MouseBackend.js handleWindowMoveCapture should sort the target ids by their containment relationship to support correct nesting so that isOver(shallow) returns true for the most nested element.

Disable selection while dragging

Thanks for putting together the mouse backend for react-dnd.
I am seeing an issue in Firefox and Safari where the UI text elements are selected while dragging.
However, it works fine in Chrome.

https://codesandbox.io/s/react-rnd-for-droplets-cdtfy?file=/src/index.js

Can we disable the text selection by default?

Wrong order when saving targetNodes

Hello,

As I can see drop targets are saved in a wrong order. This affects cases when you have nested drop targets as children are being connected earlier than parents. It leads to the wrong behavior of isOver({shallow}) and wrong order of calling drop handlers.

As You can see in HTML5Backend https://github.com/react-dnd/react-dnd/blob/ddfb0204676a39c8a57dc56a7263cd8f23e265c7/packages/core/html5-backend/src/HTML5Backend.ts#L494 the target ids are unshifted to the array to keep the right order.

Thanks in advance!

Client Offset in beginDrag

Hello,

with Release 6.0 react-dnd supports the use of the client offset in the beginDrag method. (See https://github.com/react-dnd/react-dnd/releases/tag/v6.0.0 [Patch] - Fire off an initCoords event before dragStart to improve client offset-calculation logic.(#1082)).
In order to support that change, the respective backend has to call the action "initCoords" before "beginDrag". As far as I can tell, this isn't done in the mouse backend yet, thus the client offset is null in the begin drag. A similar approch as done for the html5 backend in react dnd solves the issue for the mouse backend. I can provide a pull request for the issue.