Comments (16)
I've provided a repaint method to the diagramEngine in the latest push, you will see me using it here:
https://github.com/projectstorm/react-diagrams/blob/master/src/defaults/DefaultNodeWidget.ts#L34
Im still looking into the best way to do this, but for now thats how we are going to do it xD
from react-diagrams.
yeah thats not bad, i just think we need to call it canLinkConnect() or isLinkAllowed() or something similar
from react-diagrams.
ill add all the canvas actions as events shortly
from react-diagrams.
Also, I've done typed ports (like number, boolean, string etc)
Do you want it into default configuration?
And question: what is the best way to highlight same type ports right after link started ?
from react-diagrams.
Hey man
It would be great to have an event right after connection wire or disconnection (on mouse up). Could you point me, where is the best place to place it?
https://github.com/projectstorm/react-diagrams/blob/master/src/widgets/DiagramWidget.ts#L78
would be the correct place as a prop that we pass into the diagram widget, because that is actually a UI method you want to intercept. To fire the method, you would do so here:
https://github.com/projectstorm/react-diagrams/blob/master/src/widgets/DiagramWidget.ts#L331
It would be great if unlinked wires will be automatically removed right after mouse up. Do you want this behavoir in the lib? Or i can implement it optionaly
This can be a property of the DiagramWidget, and the place to add the logic to remove the link would be AFTER this line if there were no target ports found:
https://github.com/projectstorm/react-diagrams/blob/master/src/widgets/DiagramWidget.ts#L333
from react-diagrams.
Do you want it into default configuration?
Im not entirely sure, I implemented that in my own library as well, but the reason we want a typed port is so that we can allow or deny it being connected with a link. And for that, I would like be able to register a lambda/callback that fires on the diagram model that passes in an event that contains both the source and target port being linked, and if you return true, allows the link to be connected, and if you return false, does not allow it.
The problem with this, is that it is an architectural design decision and I'm not 100% sure which way i want to go with this, I welcome some feedback on what the community wants.
A) Either we register an interceptor in the diagram model
B) we register the interceptor in the WidgetFactory for that particular node
C) we register a callback with each model.
I think A is the simplest to implement
from react-diagrams.
Yes, with callback is nice aproach. Don't you think it should be a property of port and by default it returns true.
Like that
onLinkInceptor(link){
// if(this.type !== link.startPort.type){
// return false;
// }
return true;
}
from react-diagrams.
@dylanvorster Could you give advice - what is the best way to access node-widget this.state
?
For instance, I have a node with some content inside and I want to change it from my app.
from react-diagrams.
The correct way to do this, is to put the data into your NodeModel (maybe on the 'extras' field) when your data changes in the NodeWidget. You can then use the listener system to fire an event that data changed. I'll add a demo for this shortly.
from react-diagrams.
It would be great to have an event right after connection wire or disconnection (on mouse up). Could you point me, where is the best place to place it?
I rather implemented this as an event on the LinkModel
It would be great if unlinked wires will be automatically removed right after mouse up. Do you want this behavoir in the lib? Or i can implement it optionaly
I implemented this as a property on the DiagramWidget
from react-diagrams.
Should node.deSerialize(obj) instant refresh widget instantly or I should call any another function too? Or it is only possible remove node and add new one?
from react-diagrams.
Yes, it seems like changing some NodeModel params doesn't fire NodeWidget render function.
=/
from react-diagrams.
Great)
from react-diagrams.
There is no any way to listen node movement now?
from react-diagrams.
If no, could you give me a hint what the best way to implement it, and I will.
from react-diagrams.
https://github.com/projectstorm/react-diagrams/blob/master/src/widgets/DiagramWidget.ts#L90
from react-diagrams.
Related Issues (20)
- custom code
- [Bug] Right angled links are diagonal if the points are added after the link is created
- 50 Errors in build HOT 2
- BezierCurve
- Tutorial not working HOT 1
- Deserialization not working HOT 2
- Demos should be refactored to be consistent with modern react standards and styles HOT 2
- I can't see the any nodes. HOT 1
- Is there a way with smart routing to ensure that the link line is never going through the node?
- Deregister Listener when links are created
- DragNewLinkState bug when pressing down with another mouse button while dragging.
- Does storm-react-diagrams support nonce attribute for CSP?
- Node EventListeners don't work when setting a state from component
- can't find createEngine export HOT 1
- Adding NodeModel to NodeLayer set itself as its parent, but NodeModel's parent must be a Diagram
- Module '"@projectstorm/react-diagrams"' has no exported member 'AbstractReactFactory'.
- Intermittent bug in dragNewLink with allowLooseLinks = false HOT 2
- Bug: running `diagrams-demo-project` error `TS2345: Argument of type 'Element' is not assignable to parameter of type 'ReactNode'. Property 'children' is missing in type 'Element' but required in type 'ReactPortal'.`
- Deserialization isn't working properly HOT 1
- got an error in gallary demo: diagrams-demo-gallery HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-diagrams.