github-actions[bot] on gh-pages
Deploy Storybook to GitHub Pages (compare)
github-actions[bot] on react-diagrams-defaults@7.1.0
github-actions[bot] on react-diagrams@7.0.1
github-actions[bot] on react-diagrams-routing@7.1.0
dylanvorster on master
dylanvorster on master
Version Packages Merge pull request #981 from pr… (compare)
github-actions[bot] on master
Version Packages (compare)
dylanvorster on features
dylanvorster on master
auto-redistribute-without-nodes miners Remove hardcode for PointModel … and 8 more (compare)
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();
}}
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?
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.
deserialize(event: DeserializeEvent<CustomNodeModel>) {...}
Error: Cannot find factory with type [diamond]
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.
models.forEach((item) => {
item.registerListener({
entityRemoved: (event) => {
etModelState({
...modelState,
components: currentComponents,
});
},
});
});