Where communities thrive

  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
Repo info
  • 13:08
    dberardo-com commented #890
  • 04:48
    KrishnaPG commented #890
  • 03:32
    KrishnaPG commented #909
  • Dec 07 11:51
    rzfzr commented #738
  • Dec 07 11:16
    mkhoussid opened #912
  • Dec 07 09:40
    asnaseer-resilient commented #738
  • Dec 07 02:37
    rzfzr commented #281
  • Dec 07 02:18
    rzfzr commented #738
  • Dec 04 22:08
    mecirmartin commented #49
  • Dec 04 20:19
    mecirmartin closed #902
  • Dec 04 20:19
    mecirmartin commented #902
  • Dec 04 16:05
    mecirmartin commented #611
  • Dec 04 14:45
    mecirmartin commented #637
  • Dec 03 12:53
    renato-bohler commented #819
  • Dec 02 20:58
    danielmcquillen commented #819
  • Dec 02 20:56
    danielmcquillen commented #819
  • Nov 30 03:47
    kristopher-wood opened #911
  • Nov 29 19:58
    mecirmartin commented #910
  • Nov 29 19:57
    mecirmartin commented #910
  • Nov 29 15:43
    HatWeight commented #910
Jen Duncan
I have a dialog that pops up when a user clicks a 'save' button. This dialog is meant for the user to save information about the nodes/links they just created. If the user clicks the backspace button within one of the textareas on the dialog, the link connecting two nodes (that had focus) on the canvas deletes. Anyone know how to stop this from happening? Thx!
3 replies
Sinan Yaman
Hey guys, does anyone have a small example of a hierarchy tree that is implemented based on react-diagrams?
George Metakos
Hey guys, I'm facing the same problem that some people have already referenced here, where opening a modal through a widget in the canvas and dragging with the mouse, pans the canvas/moves the widget. Using setLocked either on the whole model or the specific node, didn't work. Any ideas?
Gerardo Blanco
Any way to trigger canvas to reset? Having some issues using BaseModel isSelected() for Widget styles. Im able to select x widget and change its styles, but when I select the next Node, the previous one doesn't return to an unselected state.
Gerardo Blanco
Okay, if any ever runs into a similar problem. It turns out I was dismissing the selected property of the node while serializing, therefor I saw no change on selected states.
Solved by adding this property on return value and tada!
Hi friends
I started working today.
But I have a problem with running the demo project.
ERROR in ../react-canvas-core/dist/index.js
Module not found: Error: Can't resolve '@projectstorm/geometry'
Hi guys,
is there a way to click on a connection and delete it without creating an additional point on the connection?
Anders Jürisoo
SHIFT click it then delete?
Jen Duncan

Hey, I am looking for a concrete example of a Custom Node with a background image I can choose, like a PNG Icon, I tried some different things to get it done and my research lead nowhere so far. I am kind of new to TypeScript and JavaScript, may be that's why I can't see the way right now. Thanks for your answers =D

@loucarpe_gitlab did you figure this out? I am looking for similar example!

@ajthinking thanks.. Although that is completely unintuitive and is quickly going to annoy my users. Clicking should select and delete should delete the selected item. Shift click would be appropriate to add positioning nodes along the link. Any idea where I could find the event bindings or examples on how to change them to implement something similar to what I describe?

@imaGuru Could you point me to your solution please?

@Fulguritude_gitlab my solution was to override canvas widget and make it so that click is attached to the whole document instead of just the diagram. Then I modified the state machine handling input to check whether someone clicked outside of the canvas. If so I remove selection, so there is nothing to delete even if the buttons are pressed. Another way would be to unregister default delete action and add a new state checking onbulr o focus event and transitioning to a state with delete capabilities depending on that

Hello guys. Is there any way to limit the selections? i.e. only one node or link is selected at a time.
2 replies
Does anybody know how I can deselect all the nodes and links when clicking outside the canvas?
2 replies
Anders Jürisoo

@ajthinking thanks.. Although that is completely unintuitive and is quickly going to annoy my users. Clicking should select and delete should delete the selected item. Shift click would be appropriate to add positioning nodes along the link. Any idea where I could find the event bindings or examples on how to change them to implement something similar to what I describe?

Agreee - the opposite would make more sense

Anders Jürisoo
Im working on a package: https://github.com/ajthinking/data-story
At the moment it is bundled with php/Laravel but I'm extracting a pure JS version to put on github pages soon. Maybe it can be some inspiration for someone or if you have feedback or want to collaborate that would be awesome :)
Guys: I setup a container based development environment for React-Diagrams here: https://github.com/RomanoViolet/React-Diagrams-DevSetup. The idea is get a developer to useful stuff very quickly.
And now I need help: I want to use the typescript based interface, and playing around, I found that stuff like resizing the "boxes" is not working for me: I thought that this line would be sufficient. I am new to web development, but noticed that changes to color work without any issues. Obviously I am missing something fundamental. Can someone please help?
If I interpret the react-diagrams code correctly it derives from react-canvas. In the react-canvas repo I find a HistoryBank which enables an undo and redo via engine.getHistoryBank().goForward();. Is this available in react-diagrams as well? And how do I access the HistoryBank?
I'd like to have a central error message handling: showing messages to user if not compatible nodes are connected or too many connections are established. One way would be to fire events. But if I got this correctly I'd need to bind a listener to each port. Is there a way to send/propagate/... information from the canLinkToPort to my component containing the CanvasWidget?
Hey, can you help me? I have nodes and link with arrow or two arrows in the on line (TransitionLinkModel extends DefaultLinkModel) but when I drag node sometimes I didn't see arrow, becouse arrow in In-Out Port (I use DefaultLinkModel ) in left side on node and during the drap it's behind node ... when I use RightAnglePortModel I coun't create arrow in line
I plan to open source code soon
Dylan Vorster
hot damn :O
thats sexy

Hi, Guys)

Does exist any ability to lock offset functionality. I mean, when we press on the empty area of the graph by left mouse button and while holding it we can move across the graph, do we have an ability to disable this functionality?

1 reply
Sinan Yaman
Hey guys,
I wanted to get the links to show above nodes, and changed the z-index of the svg to 1. However, now I can't link two ports, as they are behind the link layer. Any fixes for that?
@/all @dylanvorster @renato-bohler @m-brantheim @imaGuru Hello I would like to ask how is it possible to register new custom states in the state machine. I see that in the package react-canvas-core there is a class named AbstractDisplacementState which I could extend and create my own states. (which can be triggered by a set of actions made by the user as I understand correctly). So my question is if I create a new state. How can I register it in the StateMachine? Can you point me to a code example or write me back a quick high level info? Thank you in advance for any help!
6 replies
@all @dylanvorster @renato-bohler @m-brantheim @imaGuru Hi guys....I have a quick question. I just start work with projectstorm/react-diagrams but problem is when I install everything from the documentation a I have this error:
Could you please help me with that?
@Andrej-jigx check projectstorm/react-diagrams#598
@SQLGate already open sourced?
Hello, i want to create editable chart for editing questions and answers. somehow i find it not simple. maybe someone can assist. my code is here - https://github.com/urgent/jolene/tree/master/src. the target editable chart i am trying yo create described at this pic - https://drive.google.com/file/d/1KEtZtTvVfL5BwHQTWbzKLVFPvbiWIZNF/view?usp=sharing . is there anyone that can assist to get to this goal ?
Anders Jürisoo

Hi @ygrossm, cool idea! Not sure I will be able to assist very well as Im new to TS.

Anyways, I did implement a similar dynamic port thing, where ports are created from an array. Maybe you can find some inspiration there (even though its not perfect)

Also shouldn't you be using your own models? In the factory and a few other places you refer to the default models?

Good luck :)

Renato Böhler

Huh, just discovered that PostgreSQL pgAdmin4 project uses react-diagrams hehe


Good stuff
Vamshi Krishna Chippa
Hey All,
Where can we set allowLooseLinks={false}
2 replies
Vitchenko Vladislav
Hello! Does anyone know why when we call generateModel here we do not pass initial config like we do when we generate layer or node? NodeModel.ts from react-diagrams-core on screenshot
Hemant Ranvir
did anyone find solution for this?
Vishal Diyora
Hey Guys, This is awesome library. I'm creating custom node and custom link using the demo in the demo https://github.com/projectstorm/react-diagrams/tree/446cc8cdffc506adb9a7a2b9466dfe6b6bcd42e3/demos/demo-custom-link1 and https://github.com/projectstorm/react-diagrams/tree/master/diagrams-demo-project .
I have couple of questions.
Can I create a link without creating port between nodes?
Can I have N number of links at different location in the nodes?
Attached design above
Sinan Yaman
The smart routing example on the storybook doesn't show any links? Is it getting updated?
Dylan Vorster
Probably a regression after the updates i did a few days ago
Ill look later today
Big Bad Waffle

Hi all! Quick (fairly common I bet) question...

  • I have a custom node with a function on the model to update a property
  • I'd like the widget to be redrawn afterwards
  • What is the correct pattern to do this?
  • Calling repaintCanvas isn't doing anything but manually dragging the node DOES cause the changed option value (it's displayed in the widget) to appear
  • Calling repaintCanvas in a setTimeout also doesn't work
  • The node I'm modifying is currently selected
  • Deselecting the node performs the redraw
  • Overriding performanceTune to return false on the model doesn't work
  • Calling model.clearSelection() DOES work

Thanks in advance!

9 replies