Drag and drop fails in Firefox
sime opened this issue · comments
Cool app!
Though Firefox drag and drop is not working.
Confirmed, same issue here.
- Left-click fails the majority of the time, just ends up selecting instead
- Right-click and drag works fine, but obviously not the intended experience
Looking around in more detail, it seems this issue has been around for quite a while and it's clearly an issue with GGEditor, or maybe the way that the ItemPanel sidebar is set up. Hopefully there's enough detail below for someone to fix it up.
This doesn't happen in the main container because the <canvas> element has user-select: none applied. Looking at the code in more detail, it seems you're using the ItemPanel.Item component via gg-editor which doesn't allow for style overrides in the version you're using in 2.x. But, there was a change in January that exposes style changes via props for v3.0.0:
alibaba/GGEditor@871e311#diff-82fc4868025d971505f59ada992fe28eL203-L209
I would say that the best thing to do would be to upgrade GGEditor, but you're on 2.x and 3.0.0 introduces breaking changes.
Without upgrading, you can apply the style to the Card component of FlowItemPanel.index which will allow the drag-and-drop process to start, but it requires an extra click to drop the item. When I apply the change locally, drag and drop works - but when I release the mouse button, the component is still transparent with dotted outline and requires another click to release.
Good luck!
hah, I spent nearly 5 minutes trying to figure out if I was missing some obscure UI that actually did things before I thought to try wireflow in a different browser 😅
Adding the following styling to the sidebar with devtools seems to solve it:
.sidebar { user-select: none }
Adding the following styling to the sidebar with devtools seems to solve it:
.sidebar { user-select: none }
Should I open an PR for this, or are you already on it?
@timvisee If you could, please do.
Not capable of properly testing this right now
Did some testing in #51. Doesn't seem to properly solve it. It stops the selection issue, but still doesn't allow dragging items in the canvas. Dragging the white space on the right side of the items works fine though.
The items in the sidebar currently have draggable="false" set:
<img draggable="false">which doesn't seem to work properly in Firefox. Explicitly cancelling the dragging with JavaScript seems to work:
<img draggable="false" onmousedown="if (event.preventDefault) event.preventDefault()">Edit: not liking this, seems like a hack. Not sure where this would fit in the source either, can't find anything for 'draggable'.
Great. Setting the CSS property pointer-events: none; on the sidebar image prevents dragging the image, not requiring the JavaScript snippet mentioned above.
This seems to fix Wireflow in Firefox.
Will update the PR with this change and submit it.
@nagytech, previously @arifulbgt4 said there was some breaking changes in version 3 and that's why he didn't use that. If we can use the latest version, it would be best. Do you have a suggestion how to use the version 3 without breaking the whole app?
@timvisee, thanks for the PR. Do you think it will work properly on chrome after this change you added?
@timvisee, thanks for the PR. Do you think it will work properly on chrome after this change you added?
It does. Tested it with Chromium 85.0.4183.121 and Firefox Nightly 83.0a1 (2020-09-28).
Live PR demo at: https://deploy-preview-51--wireflow-app.netlify.app/