projectstorm/react-diagrams

Diagramming shouldn't be hard. I know. Me too.

Gerardo Blanco

@blancogerardo94

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

@blancogerardo94

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!

EbiPenMan

@EbiPenMan

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'

EbiPenMan

@EbiPenMan

Feint

@manninfrance

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

@ajthinking

SHIFT click it then delete?

Jen Duncan

@jduncanRadBlue

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!

Feint

@manninfrance

@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?

ratnajeetshyamkunwar

@ratnajeetshyamkunwar

@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

ratnajeetshyamkunwar

@ratnajeetshyamkunwar

Hello guys. Is there any way to limit the selections? i.e. only one node or link is selected at a time.

2 replies

ratnajeetshyamkunwar

@ratnajeetshyamkunwar

Does anybody know how I can deselect all the nodes and links when clicking outside the canvas?

2 replies

Anders Jürisoo

@ajthinking

@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

@ajthinking

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 :)

Romano

@RomanoViolet

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?

Romano

@RomanoViolet

https://stackoverflow.com/questions/65706675/react-diagrams-updatedimensions-not-working.

donkeyDau

@donkeyDau

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?

donkeyDau

@donkeyDau

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?

Kristina

@Kritukta

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

Benjamin Yang

@SQLGate

Watch after 10 minute
https://www.loom.com/share/6f3d8e8d77d04e4da168b793b1711f0f?fbclid=IwAR0f8WhVLWtuSsuaWiw8zKvQFWFYIsQvQdLdGOHUIZ-BHGRwGw_C8z2yyfY

I plan to open source code soon

Dylan Vorster

@dylanvorster

hot damn :O

thats sexy

Vitalii

@SatanovsyiVitalii

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

@sinanyaman95

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?

bart84

@bart84

@/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

Andrej-jigx

@Andrej-jigx

@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?

damn-at

@damn-at

@Andrej-jigx check projectstorm/react-diagrams#598

@SQLGate already open sourced?

ygrossm

@ygrossm

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

@ajthinking

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

@renato-bohler

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

postgres/pgadmin4@0c8226f

Good stuff

Vamshi Krishna Chippa

@iamvamshi

Hey All,

Where can we set allowLooseLinks={false}

2 replies

Vitchenko Vladislav

@Oladik123

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

@hr-ing:matrix.org

[m]

did anyone find solution for this?
projectstorm/react-diagrams#726

Vishal Diyora

@vishal87_gitlab

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

@sinanyaman95

The smart routing example on the storybook doesn't show any links? Is it getting updated?

Dylan Vorster

@dylanvorster

Probably a regression after the updates i did a few days ago

Ill look later today

Big Bad Waffle

@BigBadWaffle_gitlab

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

Vamshi Krishna Chippa

@iammrvkc_gitlab

Hey @renato-bohler,
Could you pls help me out to built right click options on node. I guess you made it in your project for copy, paste, zoom etc

Andrej-jigx

@Andrej-jigx

Hi guys can some1 help me? How can I create my custom node with name, inputs and outputs. I check every demo but I’m still litle confused. Can some1 make tutorial or documentation abou thath?

wenxunerlai

@wenxunerlai

Is there a close-to-step-by-step setup instruction for beginners? Sorry but current doc is just not clear enough... Having same problems when trying the demos as @EbiPenMan mentioned above... Thanks!

Where communities thrive

People

Repo info

Activity