Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • 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
Mike Polowick
@mikrotron

Hello! I'm trying to update the appearance of a custom node programatically in response to a system event. The <CustomNode> component accepts a state prop from the NodeModel options, something like: <CustomNode state={event.model.options.state} />. I can trigger an update with something like this:

aNodeModel.getOptions().state = 'running';
aNodeModel.setSelected(aNodeModel.isSelected() || false);

But that seems super hacky. What would be a better approach? I tried repaintCanvas() instead of setSelected() but it does not rerender the node component.

1 reply
snufkin877
@snufkin877
Hi, how can I change all link / specific links to animated links (with "moving" dashed line) without selecting them (= without mouse click on the link itself)? Thanks
ratnajeetshyamkunwar
@ratnajeetshyamkunwar
Hi guys, Is there a way to prevent creating a connection without port source/target? My use case is if a user initiates a link from the source, and drops anywhere beside any target port, the connection should be removed automatically.
2 replies
Loup Carpentier
@loucarpe_gitlab
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
JSIV
@JSv4

Has anyone here had issues with the <svg> layer in the <CanvasWidget> component getting truncated? My diagrams are rendering properly but the svg layer only fills part of my viewport and the nodes get "squished" against this invisible boundary.

For anyone else seeing similar behavior like this, it's due to CSS conflicts. Check out issue #666

Jen Duncan
@jduncanRadBlue
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
@sinanyaman95
Hey guys, does anyone have a small example of a hierarchy tree that is implemented based on react-diagrams?
George Metakos
@gsmetak
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
@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
image.png
image.png
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?
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
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:
error.png
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
image.png
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