profile
viewpoint
webkid wbkd Berlin https://webkid.io We help journalists turn data into visualizations.

wbkd/awesome-d3 4450

A list of D3 libraries, plugins and utilities

wbkd/awesome-interactive-journalism 1698

A list of awesome interactive journalism projects.

wbkd/react-flow 920

React library for building interactive node-based graphs | flow charts | diagrams

wbkd/react-starterkit 353

Yet another react starterkit. Including react-router, reflux, jest, webpack, gulp and stylus.

wbkd/d3-extended 268

Extends D3 with some common jQuery functions and more

wbkd/riotjs-startkit 134

A Riot - PostCSS - Webpack Starterkit

wbkd/ghost-wbkd 100

A ghost/journey theme.

wbkd/making-maps-with-react 64

:globe_with_meridians: Example React components for React-Leaflet, Pigeon Maps, React MapGL and more

wbkd/react-starter 63

🚀 A minimal react boilerplate featuring easy-peasy state management and styled-components

wbkd/d3-discovery 47

A tool for exploring D3.js plugins

startedwbkd/react-flow

started time in 3 hours

startedwbkd/react-flow

started time in 3 hours

startedwbkd/react-flow

started time in 8 hours

fork afallon02/react-flow

React library for building interactive node-based graphs | flow charts | diagrams

https://reactflow.dev/

fork in 9 hours

issue commentwbkd/react-flow

onElementClick is not working on 5.1.1

Hy @kagia

I can't reproduce this. When I go to reactflow.dev (where the latest version is deployed) everything works as expected.

kagia

comment created time in 11 hours

startedwbkd/react-flow

started time in 13 hours

startedwbkd/react-flow

started time in 14 hours

startedwbkd/react-flow

started time in a day

startedwbkd/webpack-starter

started time in a day

startedwbkd/react-flow

started time in a day

startedwbkd/react-flow

started time in 2 days

issue openedwbkd/react-flow

onElementClick is not working on 5.1.1

In the Basic Demo there is no click message in the console if I click on a node..

created time in 2 days

issue commentwbkd/react-flow

Performance issues with dotted background when zoomed out

Yes much better thank you!

emielwit

comment created time in 2 days

startedwbkd/awesome-d3

started time in 3 days

startedwbkd/react-flow

started time in 3 days

startedwbkd/react-flow

started time in 3 days

startedwbkd/awesome-d3

started time in 3 days

issue openedwbkd/react-flow

onConnect event fires before onConnectStop event

Right now onConnect handler is called before onConnectStop. I think that expected behavior is that onConnect will be called as last.

created time in 3 days

issue closedwbkd/react-flow

Get the position of canvas onConnectStop()

@moklick I want to add a new node where the user stops the connection on the canvas, now we have added mouse event, but how we can get the exact position on the canvas from that mouseEvent ?

closed time in 4 days

agarwal00s

issue commentwbkd/react-flow

Get the position of canvas onConnectStop()

This question is not specific about React Flow but has something to do with Javascript in general. Please ask questions like this on StackOverflow.

You can get the position of a mouse event by using the keys clientX and clientY.

agarwal00s

comment created time in 4 days

issue openedwbkd/react-flow

Get the position of canvas onConnectStop()

@moklick I want to add a new node where the user stops the connection on the canvas, now we have added mouse event, but how we can get the exact position on the canvas from that mouseEvent ?

created time in 4 days

issue commentwbkd/react-flow

Invalid type of onConnectStop prop

In new version, type of onConnectStop is () => void, I think it should be OnConnectStopFunc.

https://github.com/wbkd/react-flow/blob/8544f9802fc3766a32836ba72635d0582a702fa5/src/container/ReactFlow/index.tsx#L47

Why it should be OnConnectStopFunc ? Do you explain the reason?

pitkes22

comment created time in 4 days

fork nagu741/webpack-starter

✨ A lightweight foundation for your next webpack based frontend project.

fork in 4 days

startedwbkd/webpack-starter

started time in 4 days

issue commentwbkd/react-flow

Exposing Mouse Events

I don't have a strong opinion about that. But you are right, React also uses event. I think I will refactor it I order to use event instead of evt.

namack

comment created time in 4 days

issue commentwbkd/react-flow

Invalid type of onConnectStop prop

thanks! Should work with v.5.1.1

pitkes22

comment created time in 4 days

issue commentwbkd/react-flow

Exposing Mouse Events

Its abbreviation of event to evt really needed? It's subjective thing, but I think that word event is short enough to not be abbreviated and also everywhere in DOM and React API it is called event.

namack

comment created time in 4 days

push eventwbkd/react-flow

moklick

commit sha 38227592bdbc22ee5c3f38d9aa83e1635505bf44

chore: release v5.1.1

view details

push time in 4 days

release wbkd/react-flow

5.1.1

released time in 4 days

created tagwbkd/react-flow

tag5.1.1

React library for building interactive node-based graphs | flow charts | diagrams

created time in 4 days

push eventwbkd/react-flow

moklick

commit sha 49ddb8040d850722669387feadd842225251ea69

fix(onConnectStop): use correct type closes #403

view details

push time in 4 days

issue closedwbkd/react-flow

Invalid type of onConnectStop prop

In new version, type of onConnectStop is () => void, I think it should be OnConnectStopFunc.

https://github.com/wbkd/react-flow/blob/8544f9802fc3766a32836ba72635d0582a702fa5/src/container/ReactFlow/index.tsx#L47

closed time in 4 days

pitkes22

issue openedwbkd/react-flow

Invalid type of onConnectStop prop

In new version, type of onConnectStop is () => void, I think it should be OnConnectStopFunc.

https://github.com/wbkd/react-flow/blob/8544f9802fc3766a32836ba72635d0582a702fa5/src/container/ReactFlow/index.tsx#L47

created time in 4 days

startedwbkd/webpack-starter

started time in 4 days

startedwbkd/react-flow

started time in 4 days

pull request commentwbkd/react-flow

Add onPaneContextMenu

good idea :)

namack

comment created time in 5 days

push eventwbkd/react-flow

Moritz

commit sha 8544f9802fc3766a32836ba72635d0582a702fa5

docs(readme): add onPaneContextMenu

view details

push time in 5 days

push eventwbkd/react-flow

moklick

commit sha 7f806f6f509b93adb70103793d03679fc3486212

chore: release v5.1.0

view details

push time in 5 days

release wbkd/react-flow

5.1.0

released time in 5 days

created tagwbkd/react-flow

tag5.1.0

React library for building interactive node-based graphs | flow charts | diagrams

created time in 5 days

push eventwbkd/react-flow

Nate Amack

commit sha 93aa5c96ca87eee12f945f0f1813c993725d7293

feat(props): add onPaneContextMenu

view details

Moritz

commit sha 8fbdfaa54202cbc33e40fdf554cf47a392b9236d

Merge branch 'master' into expose-pane-context-click

view details

Moritz

commit sha 0d4e71feeca595dea8ca1da5187ef360f298b6bc

Merge pull request #402 from namack/expose-pane-context-click Add onPaneContextMenu

view details

push time in 5 days

PR merged wbkd/react-flow

Add onPaneContextMenu

Add onPaneContextMenu with captured event

+12 -1

0 comment

3 changed files

namack

pr closed time in 5 days

push eventwbkd/react-flow

Nate Amack

commit sha 92d8276f1bcb5eff128075f9a33b634d6a08ab1f

fix(type): add type definition for onPaneClick

view details

Moritz

commit sha 5b36bc1640ae4ac61d80d8dae988a64885d6ed2d

Merge pull request #401 from namack/hotfix-type Add Type Definition for onPaneClick

view details

push time in 5 days

PR merged wbkd/react-flow

Add Type Definition for onPaneClick

Forgot to add this type definition at the top level interface.

+1 -1

0 comment

1 changed file

namack

pr closed time in 5 days

issue commentwbkd/react-flow

onConnectStop() not giving us Position where the user stopped dragging

@moklick which key values in mouseEvent gives us the position? Actually I want to create a node whenever the user starts a connection and drop it in the canvas, need that position to create a new node

agarwal00s

comment created time in 5 days

startedwbkd/react-flow

started time in 5 days

PR opened wbkd/react-flow

Add onPaneContextMenu

Add onPaneContextMenu with captured event

+12 -1

0 comment

3 changed files

pr created time in 5 days

startedwbkd/react-flow

started time in 5 days

startedwbkd/webpack-starter

started time in 5 days

PR opened wbkd/react-flow

Add Type Definition for onPaneClick

Forgot to add this type definition at the top level interface.

+1 -1

0 comment

1 changed file

pr created time in 5 days

issue commentwbkd/react-flow

onConnectStop() not giving us Position where the user stopped dragging

released in v5.0.0

agarwal00s

comment created time in 5 days

issue closedwbkd/react-flow

Exposing Mouse Events

Following the lead of onNodeMouse* and onNodeContextMenu, it would be helpful to expose the MouseEvent to the developer when something happens on the canvas. I can see this being useful for onElementClick, onNodeDrag*, onMove*, and onPaneClick.

All of these functions (except for onPaneClick) already return values, however if we were to follow the pattern set by onNodeMouse*, the mouse event argument would come first. Adding this argument consistent with onNodeMouse* would cause a breaking change in the application.

I have an immediate need for returning the mouse event for onPaneClick. This would not require a breaking change, but I am also willing to add the mouse events to the other actions as well.

What would be the best way to move forward with this? Do you agree that exposing these events would be useful to the developer?

I can open a PR that adds the event to onPaneClick to allow for a minor release (I should have just exposed this initially 🤦) and then another PR for the other actions, which would require a major release. Or do them all at once! 😄

closed time in 5 days

namack

issue commentwbkd/react-flow

Exposing Mouse Events

released in v5.0.0

namack

comment created time in 5 days

pull request commentwbkd/react-flow

Add event handlers

Thanks a lot :) Everything looked fine and I just released v5.0.0. 🙌

namack

comment created time in 5 days

push eventwbkd/react-flow

moklick

commit sha 09fee4c6eab95eb6cff0bd4f79b0ad48a1c3ef71

chore: release v5.0.0

view details

push time in 5 days

release wbkd/react-flow

5.0.0

released time in 5 days

created tagwbkd/react-flow

tag5.0.0

React library for building interactive node-based graphs | flow charts | diagrams

created time in 5 days

push eventwbkd/react-flow

Nate Amack

commit sha 97ec24fa14de13ff87eddfc72d3e0062421106d6

feat(props): add mouse event to onNodeDragStart, onNodeDragStop, onElementClick, and onPaneClick

view details

Nate Amack

commit sha fddb3e777d029efc3a26e050919bf571ee7721dd

feat(props): add mouse event to onConnectStart and onConnectStop

view details

Moritz

commit sha 15855c75987199afbae04fce8f23df195ee917df

Merge pull request #400 from namack/add-event-handlers Add event handlers

view details

push time in 5 days

PR merged wbkd/react-flow

Add event handlers

Addresses #399

Expose MouseEvent in the following functions:

  • onElementClick
  • onNodeDragStart
  • onNodeDragStop
  • onConnectStart
  • onConnectStop
  • onPaneClick
+64 -61

1 comment

17 changed files

namack

pr closed time in 5 days

pull request commentwbkd/react-flow

Add event handlers

Looking at the source code more, I didn't think onMoveStart and onMoveEnd really needed the event to be exposed since it is more closely related to Draggable.

namack

comment created time in 5 days

PR opened wbkd/react-flow

Add event handlers

Addresses #399

Expose MouseEvent in the following functions:

  • onElementClick
  • onNodeDragStart
  • onNodeDragStop
  • onConnectStart
  • onConnectStop
  • onPaneClick
+64 -61

0 comment

17 changed files

pr created time in 5 days

issue closedwbkd/react-flow

onConnectStop() not giving us Position where the user stopped dragging

@moklick can we get the position on the canvas when onConnectStop event is triggered?

closed time in 5 days

agarwal00s

issue commentwbkd/react-flow

onConnectStop() not giving us Position where the user stopped dragging

We will continue the discussion in issue #399

agarwal00s

comment created time in 5 days

issue commentwbkd/react-flow

Exposing Mouse Events

Hey @namack

I thought about this too and there is another issue #384 regarding this one. I would prefer to do a major update with all handlers updated.

namack

comment created time in 5 days

issue openedwbkd/react-flow

Exposing Mouse Events

Following the lead of onNodeMouse* and onNodeContextMenu, it would be helpful to expose the MouseEvent to the developer when something happens on the canvas. I can see this being useful for onElementClick, onNodeDrag*, onMove*, and onPaneClick.

All of these functions (except for onPaneClick) already return values, however if we were to follow the pattern set by onNodeMouse*, the mouse event argument would come first. Adding this argument consistent with onNodeMouse* would cause a breaking change in the application.

I have an immediate need for returning the mouse event for onPaneClick. This would not require a breaking change, but I am also willing to add the mouse events to the other actions as well.

What would be the best way to move forward with this? Do you agree that exposing these events would be useful to the developer?

I can open a PR that adds the event to onPaneClick to allow for a minor release (I should have just exposed this initially 🤦) and then another PR for the other actions, which would require a major release. Or do them all at once! 😄

created time in 5 days

issue commentwbkd/react-flow

onConnectStop() not giving us Position where the user stopped dragging

@moklick any update ?

agarwal00s

comment created time in 5 days

startedwbkd/react-flow

started time in 5 days

issue commentwbkd/webpack-starter

Async Functions / Promises

thank you!

vin-ni

comment created time in 5 days

startedwbkd/webpack-starter

started time in 5 days

issue commentwbkd/react-flow

Scroll the viewport as I draw the line

Cool .. good ! Thank you @moklick !

Vkrish-Nimmagadda

comment created time in 5 days

issue commentwbkd/react-flow

Scroll the viewport as I draw the line

We would be happy if you find a way and do PR :)

Vkrish-Nimmagadda

comment created time in 5 days

issue closedwbkd/react-flow

Minor documentation bug: TOC edges links to nodes info

Seems like the TOC link to the 'Edges' chapter actually links to the Nodes chapter.

closed time in 5 days

SadBunny

push eventwbkd/react-flow

moklick

commit sha 0f79c3d978942f18db4e4dd5339e9723c25c79e2

chore: release v4.9.3

view details

push time in 5 days

release wbkd/react-flow

4.9.3

released time in 5 days

created tagwbkd/react-flow

tag4.9.3

React library for building interactive node-based graphs | flow charts | diagrams

created time in 5 days

push eventwbkd/react-flow

moklick

commit sha 9c90a83d01b33c6b87be4bc2dffcdcc0f2eadaec

docs(readme): use correct edges anchor

view details

moklick

commit sha 3fe9cfbf22d7b7ef782bf7d9f53b443a975ac4c0

refactor(fitView): consider min and max zoom

view details

moklick

commit sha 566a52b1616b781b6d9a510fd50c6179c9049b9a

refactor(cypress): dont record video while testing

view details

moklick

commit sha e53da68cb4bcd3043c53b51f4750d1af6b1d4b5b

test(task): run cypress headless

view details

moklick

commit sha 6cb3c707bf226921a0d57e9f6d5d72b3a19c898b

refactor(store): rename/cleanup setNodesSection action

view details

moklick

commit sha 051bc8cd7373a099002db6a4ee8c7c897f665d8d

Merge branch 'develop' of github.com:wbkd/react-flow into develop

view details

moklick

commit sha cfaa07dc6bd0878f9d7b2190cc6f53d41fdeba09

fix(edges): selected condition closes #397

view details

moklick

commit sha c59c8ee69386d894ba5e92fde4c64ca08e595bb6

refactor(edges): simplify selected condition #397

view details

moklick

commit sha 94497090d3b97fd9a66cb107d7a6386a2597d66b

refactor(store): get rid of unused selection

view details

Moritz

commit sha 3a5d4f54dbbbab4734955f8ea1ec286bb59f97e4

Merge pull request #398 from wbkd/develop Develop

view details

push time in 5 days

issue closedwbkd/react-flow

When node have multiple outgoing edges all of them highlights when user selects one

When one node has multiple edges going into one other node, and the user selects(clicks) one of them, all of them will become highlighted. All handles in my example have a unique ID and also onSelectionChange is called with correct data (only one edge).

image

Example: Edit nifty-tereshkova-udynb

closed time in 5 days

pitkes22

PR merged wbkd/react-flow

Develop
+38 -66

0 comment

9 changed files

moklick

pr closed time in 5 days

PR opened wbkd/react-flow

Develop
+38 -66

0 comment

9 changed files

pr created time in 5 days

push eventwbkd/react-flow

moklick

commit sha 94497090d3b97fd9a66cb107d7a6386a2597d66b

refactor(store): get rid of unused selection

view details

push time in 5 days

push eventwbkd/react-flow

moklick

commit sha c59c8ee69386d894ba5e92fde4c64ca08e595bb6

refactor(edges): simplify selected condition #397

view details

push time in 6 days

push eventwbkd/react-flow

Moritz

commit sha d3a72e04c3397b59f1834568f45f2dc19506790a

Merge pull request #390 from wbkd/develop Develop

view details

moklick

commit sha 592bb9f7e6a6ec4e1385be36cc3efe53fbc07512

chore: release v4.9.1

view details

Moritz

commit sha 0e64147f4f7e7568958a3f79791daac02d84aa1d

Merge pull request #395 from wbkd/develop fix(onLoad): only call once closes #393

view details

moklick

commit sha 01a08f6a2737360a3a83a77e077217717eb30a58

fix(test): empty test pane drag

view details

moklick

commit sha 6100d022638fb1689a2e2343569e37205cd5d97f

chore: release v4.9.2

view details

moklick

commit sha 051bc8cd7373a099002db6a4ee8c7c897f665d8d

Merge branch 'develop' of github.com:wbkd/react-flow into develop

view details

moklick

commit sha cfaa07dc6bd0878f9d7b2190cc6f53d41fdeba09

fix(edges): selected condition closes #397

view details

push time in 6 days

issue commentwbkd/react-flow

When node have multiple outgoing edges all of them highlights when user selects one

Also when edges are selected by group selection they are not highlighted.

image

pitkes22

comment created time in 6 days

issue openedwbkd/react-flow

When node have multiple outgoing edges all of them highlights when user selects one

When one node has multiple edges going into one other node, and the user selects(clicks) one of them, all of them will become highlighted. All handles in my example have a unique ID and also onSelectionChange is called with correct data (only one edge).

image

Example: Edit nifty-tereshkova-udynb

created time in 6 days

issue commentwbkd/react-flow

Scroll the viewport as I draw the line

Thank you much @moklick ! Appreciate it.

Any quick tips on a decent approach from either you and/or community will help. I will see how to help build that feature.

Vkrish-Nimmagadda

comment created time in 6 days

push eventwbkd/react-flow

moklick

commit sha 9c90a83d01b33c6b87be4bc2dffcdcc0f2eadaec

docs(readme): use correct edges anchor

view details

moklick

commit sha 3fe9cfbf22d7b7ef782bf7d9f53b443a975ac4c0

refactor(fitView): consider min and max zoom

view details

moklick

commit sha 566a52b1616b781b6d9a510fd50c6179c9049b9a

refactor(cypress): dont record video while testing

view details

moklick

commit sha e53da68cb4bcd3043c53b51f4750d1af6b1d4b5b

test(task): run cypress headless

view details

moklick

commit sha 6cb3c707bf226921a0d57e9f6d5d72b3a19c898b

refactor(store): rename/cleanup setNodesSection action

view details

push time in 6 days

startedwbkd/react-flow

started time in 6 days

issue openedwbkd/react-flow

Minor documentation bug: TOC edges links to nodes info

Seems like the TOC link to the 'Edges' chapter actually links to the Nodes chapter.

created time in 6 days

IssuesEvent

issue commentwbkd/react-flow

Scroll the viewport as I draw the line

Hey @Vkrish-Nimmagadda

I get it! It was a misunderstanding on my side. Right now the nodes you want to connect have to be inside the viewport. There is no auto-scroll/auto-drag function yet.

Vkrish-Nimmagadda

comment created time in 6 days

startedwbkd/react-flow

started time in 6 days

push eventwbkd/react-flow

Moritz

commit sha f0285f419e4e4bd3e09d361a2f495595cdb1229d

Create FUNDING.yml

view details

push time in 6 days

issue commentwbkd/react-flow

Scroll the viewport as I draw the line

@moklick should this is a new feature that we need to build ? Please let me know.

Vkrish-Nimmagadda

comment created time in 6 days

issue commentwbkd/react-flow

Scroll the viewport as I draw the line

Didnt get that @moklick ! That is the requirement, like if there is a node that is down below how do we connect it ? Because as I start drawing the line and the node is below, it won't auto-scroll. How do we do it now ? May be I am missing something.

Vkrish-Nimmagadda

comment created time in 6 days

issue closedwbkd/react-flow

Scroll the viewport as I draw the line

As I draw the line to connect a node that is down below the ViewPort, I want the canvas to scroll automatically so that I could connect to the node (which is down somewhere).

Is there a known and easy workaround or this ?

Request kind help from someone.

Cheers, Krish

closed time in 6 days

Vkrish-Nimmagadda

issue commentwbkd/react-flow

Scroll the viewport as I draw the line

Since the pane is draggable there is no need for a pane that is higher than the window.

Vkrish-Nimmagadda

comment created time in 6 days

issue commentwbkd/react-flow

onLoad callback called on every render

Great! Thanks for resolving these issues so fast :+1:

pitkes22

comment created time in 6 days

issue commentwbkd/react-flow

onLoad callback called on every render

you are right! It's fixed in v4.9.2

pitkes22

comment created time in 6 days

push eventwbkd/react-flow

moklick

commit sha 6100d022638fb1689a2e2343569e37205cd5d97f

chore: release v4.9.2

view details

push time in 6 days

more