Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Nov 25 04:26
    johnegnatis closed #965
  • Nov 25 04:26
    johnegnatis commented #965
  • Nov 24 09:18
    malavshah-9 commented #912
  • Nov 19 13:38
    Flowwl commented #955
  • Nov 19 13:38
    Flowwl commented #955
  • Nov 19 13:37
    Flowwl commented #955
  • Nov 19 13:21
    Flowwl commented #965
  • Nov 19 13:20
    Flowwl commented #965
  • Nov 19 08:11
    Priyam-fashtag commented #970
  • Nov 18 20:54
    Flowwl commented #965
  • Nov 18 20:54
    Flowwl commented #965
  • Nov 18 20:34
    Flowwl edited #970
  • Nov 18 20:33
    Flowwl opened #970
  • Nov 17 19:43
    vmergun commented #708
  • Nov 17 19:28
    stuffOZEN commented #708
  • Nov 17 19:28
    stuffOZEN commented #708
  • Nov 17 08:33
    767746649zyy commented #607
  • Nov 17 08:32
    767746649zyy commented #607
  • Nov 17 08:31
    767746649zyy commented #607
  • Nov 17 08:31
    767746649zyy commented #607
Kuba Szymanowski
@KKSzymanowski
Is there a built-in way to edit nodes (the name for example) or do I have to implement it manually?
If there is no way to do it out of the box, is there some example of how to extend a node to add for example an edit button or a button to add new port?
marcosaso
@marcosaso

Hey @KKSzymanowski ,

To edit nodes, you've to implement it manually. Just put a edit and use the onChange event. For example:

onChange={(e) => {
                             // node receive value of edit
                              node_example.options.name = e.target.value;
                             // refresh diagram with new node name
                              engine.repaintCanvas();

                            }}
donkeyDau
@donkeyDau

I'm using dagre to distribute the nodes in the diagram. I randomly place the nodes and "autodistribute" them:

import {
  DagreEngine,
  PathFindingLinkFactory,
} from '@projectstorm/react-diagrams';

import centerModel from '../Actions/centerModel';

const reroute = (engine) => {
  engine
    .getLinkFactories()
    .getFactory(PathFindingLinkFactory.NAME)
    .calculateRoutingMatrix();
};

const autoDistributeNetwork = (engine, useGraphOptions = true) => {
  const graphOptions = useGraphOptions
    ? {
        rankdir: 'TB',
        ranker: 'longest-path',
        marginx: 50, // margin of whole diagram
        marginy: 50, // margin of whole diagram
        nodesep: 200, // minimum x distance between nodes
        ranksep: 100, // minimum y distance between nodes
      }
    : {};

  const distributionEngine = new DagreEngine({ graph: graphOptions });

  distributionEngine.redistribute(engine.getModel());
  reroute(engine);
  centerModel(engine);
};

Additionally I have a sidebar which can pull in from the side and shrinking the canvas. On this action the nodes on the diagram "crumble" together in the state they used to have before "autodistribution" kicked in. And it keeps in this state. Calling autoDistributeNetwork has no effect on the layout. Even dragging and dropping has no (coordinated) effect (the nodes get picked randomly and dropped at weird places).

Does anyone encounter this problem as well? How can I get around this?

1 reply
Aymen Marouani
@AymenMarouani
Hi All,
Aymen Marouani
@AymenMarouani

Simple question, I'd like to ask about the property added to DiagramWidget called inverseZoom to inverse the behavior of the mouse's zoom wheel(see projectstorm/react-diagrams#95): actually, I'm using CanvasWidget which came after DiagramWidget with a react-diagrams version 6.5.2 as following `

<CanvasWidget  engine={engine}/>

Does any one have an example of how to add the property inverseZoom to work with (code please) ?
Thanks in advance.

2 replies
sudha53633
@sudha53633
Hi There, I need help on adding html content in nodes and ports
Can anyone provide inputs on this ?
sudha53633
@sudha53633
Thanks
projectstorm/react-diagrams#27 Kindly help here?
Aaron Michaux
@aaron-michaux

So... when I add repaintDebounceMs to the engine options, it sometimes disables panning the CanvasWidget.

  const engine = createEngine({
    registerDefaultDeleteItemsAction: false,
    repaintDebounceMs: 50
  })

Anyone else seen this?

Aaron Michaux
@aaron-michaux
For anyone out there, the problem went away when I patched engine.repaintCanvas, so that debouncing happens on the leading edge of the timeout.
Sinan Yaman
@sinanyaman95
Hey fellow developers, does anyone know if there is a way to get the ids of the visible ports (i.e. not zoomed out or dragged out of view from canvas)?
MNewbigging
@MNewbigging
Hey folks, I'm just getting started with react-diagrams. I'm following the demo project for custom node widget/model/factory. I've written a custom node model, extending NodeModel, and in overriding the deserialize function I'd like to provide the type for the event parameter - but auto imports aren't working for some reason. So, where can I import the DeserializeEvent from? And should I use it like this:
deserialize(event: DeserializeEvent<CustomNodeModel>) {...}
Malav Shah
@malavshah-9
Hi Guys, I have integrated this lib in my project which builds using vite and is monorepo. Now facing issue in building production build.
Any help will be appreciated. Thanks in advance.
Saintcat617
@Saintcat617_gitlab
your problem is when trying to assign null the variable in your declaration, try:
var node: DefaultNodeModel;
I'm sure it will work for you!
Andrii Zhyvchyn
@azhyvchyn-rr
hi all!
Does someone know how I can change target port with mouse?
I tied to .setTargetPort(null) on link, but this not attach link to mouse movements
K Wood
@kristopher-wood
Hello everyone!
I'm trying to get the diamond node model demo working, but it gives me an error using it as written when running it through create-react-app's npm start script
Error: Cannot find factory with type [diamond]
More specifically I'm trying to use this with the drag and drop demo, and I've got it showing up in the tray on the left hand side, but when I drag it on to the canvas I get the error
How do you let your app know how to find the factory for it?
K Wood
@kristopher-wood
Got it! Instead of defining engine as new CreateEngine, I needed to use this.props.app.getDiagramEngine()
Aaron
@a3ng7n
Hey there - it seems like the repo has quite a few open issues and hasnt been updated in 20 days - is this project dying? Not trying to be negative, but is project storm working on this anymore?
Dylan Vorster
@dylanvorster
i work on it when i get time
I have a project coming up shortly that will see it have some activity soon
Jeremy Kuhnash
@jeremykuhnash
does anyone have working directions on how to build a standalone project?
ShrutiChandak19
@ShrutiChandak19
Hi I am new room. has anyone have any experience creating only one link between two nodes. Currently it’s creating multiple link between two nodes. How can I make changes so that it will create single link between two nodes?
brightness999
@brightness999:matrix.org
[m]
Hi everyone,
How's it going?
is it(react-diagrams) run on mobile?
if you have any way, please let me know.
Daniel McQuillen
@danielmcquillen_gitlab
@dylanvorster @renato-bohler If either of you have some consulting hours available wondering if you're available and interested in adding an enhanced change-detection feature to the latest version, if possible. Pinging @renato-bohler because you tried to explain to me what to do but I'm just too slow (projectstorm/react-diagrams#819) and @dylanvorster because well gosh you made this awesome thing.
asnaseer-resilient
@asnaseer-resilient
Hi Guys, Does anyone know how to update the position of ports after dynamically adding/removing ports to a node? I saw some mention of calling the recalculatePortsVisually method on the DiagramEngine but I cannot find any such method. I have also tried calling port.reportPosition() but does not seem to update the ports position either. I am using v6.6.1 of the library.
青木
@StringKe
how to remove all node and link in model ?
1 reply
Malav Shah
@malavshah9_gitlab
Hi, I am facing huge performance issue while dragging link in smart routing. Any solution for that?
Igor Levdansky
@ilevd

Try to run simple example and get:

Uncaught TypeError: a.default is not a constructor
    at l.componentDidMount (index.umd.js:16:687)
    at commitLifeCycles (react-dom.development.js:20664:24)
...

Any ideas?

Neil Glenister
@232Studios_twitter
Hey all, does anyone know how to change the node draggable area? At the moment the whole node is draggable which is causing an issue if you want to highlight text on it. Ideally we'd disable the drag event when you're selecting text on the node, or set the drag event to a specific part of the node (e.g. a toolbar). Has anyone tried something similar?
1 reply
Jonathan Nachman
@JonathanNachman_twitter
hi all , just started playing around with the examples. is there a way to automatically place the nodes , or would i have to move them around,e.g like a auto sort and space them out? thanks
Andrii Zhyvchyn
@azhyvchyn-rr
hi all!
how I can trigger rerender of label widget if related link were changed?
Troy Peterson
@TroyCodeMaven_twitter
Hi all, any idea if we can expect an update to make it work with React 18 any time soon?
3 replies
Brightness999
@Brightness999
Hi all,
How I can drag and drop port?
Ejiro Lennox A.
@ejiro1994
Hi everyone where can i find info on how to clone/duplicate a node?
1 reply
Rushil_10
@Rushil10
How to track nodes in a model, setState functions are not allowed inside registerListener function
models.forEach((item) => {
    item.registerListener({
      entityRemoved: (event) => {
        etModelState({
          ...modelState,
          components: currentComponents,
        });
      },
    });
  });
I want to track deletion and addition of nodes and send them through api, pls help
preetham07
@preetham07
node.registerListener({
selectionChanged: (e) => this.showNodeConfiguration(e),
entityRemoved: (e) => this.removeNode(e)
}); after adding this line for node onclick now i am unable to drag node please help
preetham07
@preetham07
hi does any one know how to create vertical playbooks or workflow using projectstorm
currently we can create horizontal playboooks
marine0501
@marine0501
hello,i want to know how to change border and color of the node ?
BuzzyLizzy
@BuzzyLizzy
I am trying to use the projectstorm react diagram library, so far I have managed to get something working in a demo project. But this I now want to use in my actual work project where they build react widget plugins, unfortunately I am a novice in react as well as typescript and my apologies if it is obvious that I know very little, I did the demo app by creating a react app in the usual way with npx create-react-app my-app, had to add some compiler options but all started working in the end. Then I trasnferred it to my work project but here I run into issues, it is a typescript react project and due to my limited knowledge I am not sure what is causing this issue, but the issue is that it is complaining about circular dependencies in the projectstorm diagram library. This is odd for me that it did not complain in the demo app but in this project which I created with a scaffolding tool provided to me for the IDE framework we are working in (a low-code framework), but to the eye the structure looks the same as my demo app, I installed projectstorm react digram in the same way. What in the coniler or setup will cause this circular dependency to be picked up as an error and how can I disable it? Obviously there is something setup differently but I do not know where to start looking. This is the 3 circular dependency errors:
Error: Circular dependency: node_modules/@projectstorm/geometry/dist/Polygon.js -> node_modules/@projectstorm/geometry/dist/Rectangle.js -> node_modules/@projectstorm/geometry/dist/Polygon.js
Error: Circular dependency: node_modules/@projectstorm/react-diagrams/node_modules/@projectstorm/react-diagrams-routing/dist/link/PathFindingLinkFactory.js -> node_modules/@projectstorm/react-diagrams/node_modules/@projectstorm/react-diagrams-routing/dist/link/PathFindingLinkModel.js -> node_modules/@projectstorm/react-diagrams/node_modules/@projectstorm/react-diagrams-routing/dist/link/PathFindingLinkFactory.js
Error: Circular dependency: node_modules/@projectstorm/react-diagrams/node_modules/@projectstorm/react-diagrams-routing/dist/link/RightAngleLinkFactory.js -> node_modules/@projectstorm/react-diagrams/node_modules/@projectstorm/react-diagrams-routing/dist/link/RightAngleLinkModel.js -> node_modules/@projectstorm/react-diagrams/node_modules/@projectstorm/react-diagrams-routing/dist/link/RightAngleLinkFactory.js