Comments (11)
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
from wireflow.
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?
from wireflow.
@timvisee If you could, please do.
Not capable of properly testing this right now
from wireflow.
@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/
from wireflow.
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!
from wireflow.
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 😅
from wireflow.
Adding the following styling to the sidebar with devtools seems to solve it:
.sidebar { user-select: none }
from wireflow.
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.
from wireflow.
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'.
from wireflow.
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.
from wireflow.
@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?
from wireflow.
Related Issues (20)
- Upgrading to GGEditor v3 or pick a different editor for the base of the flow
- Readme : Some images/links not working HOT 1
- Improve left sidebar and display flow patterns as on the webpage HOT 7
- Edge connect point have added anywhere
- Downloaded JPG Blur issue Can't even read Label HOT 3
- Mobile screens
- Copying doesn't copy the arrows HOT 3
- Label Text overflows if it can't fit in the available space
- Git checkout issue
- Stuck in Multiselect
- Improve colormap for repeatedly choose the same color.
- Add item to existing group
- A way unselect all
- Add text-box nodes
- Feature request - Estimate project costs HOT 2
- More! ;)
- Recover deleted data
- Load flow from file
- Your Youtube Video in the around the web Section on Github isnt work
- Is this active managed HOT 7
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from wireflow.