woodenconsulting / react-js-diagrams Goto Github PK
View Code? Open in Web Editor NEWA flow based diagramming library written in React
License: MIT License
A flow based diagramming library written in React
License: MIT License
If page is scrolled down mouse position calculated wrong.
How to check: scroll down the page and try to connector from point.
Using .clientX
instead of .pageX
should fix this.
Hi,
is it possible to have the name of a node changed in e.g. the "Controls" panel? I tried it and it seems that it always resets the node on rerender in selected node. If I double click instead of one click the node, it works.
Fixed it, was the isEqual method.
LinkModel
on deSerialize
call ignores extras of the model passed to it.
It not shown after render view, but it show when I trigger action on model.
Hi,
thanks for the library.
I have a save button which saves json from the diagram with diagamModel.serializeDiagram(). If I try to load this JSON (via a button), no links are shown at first. If I press the button twice, links are shown. I think this should work? console.log outputs both with links attribute.
Any idea?
PS: I have 2 Node Types: Start, End.
PSS: I think that this has something to do with https://github.com/woodenconsulting/react-js-diagrams/blob/master/src/widgets/LinkLayerWidget.js#L18 Links are just removed. Is there any workaround? Maybe delay link draw until all ports are present?
let demoJSON = '{"id":"da9e4b55-eca3-4e1a-94ce-480d1fc80361","offsetX":0,"offsetY":0,"zoom":100,"links":[{"id":"d470aacd-3dc8-4559-ace5-56c3142d278d","_class":"LinkModel","selected":false,"type":"default","source":"4e7c175d-ced8-4728-b66b-298c696708f4","sourcePort":"07212dce-40bf-4ac9-b91e-7bb984693243","target":"a3fec017-e926-4a9b-9dc6-ab22484364c6","targetPort":"64ffa18b-2064-415a-878b-de7dbec588aa","points":[{"id":"fa206aad-363f-4622-8291-8351b68492f5","_class":"PointModel","selected":false,"x":105.1875,"y":154.5},{"id":"e66be012-890b-4c9e-9854-6e92b71d5d91","_class":"PointModel","selected":false,"x":194.171875,"y":246.5}],"extras":{}}],"nodes":[{"id":"4e7c175d-ced8-4728-b66b-298c696708f4","_class":"StartNodeModel","selected":false,"type":"start","x":60.671875,"y":121,"extras":{},"ports":[{"id":"07212dce-40bf-4ac9-b91e-7bb984693243","_class":"DefaultPortModel","selected":false,"name":"out0","parentNode":"4e7c175d-ced8-4728-b66b-298c696708f4","links":["d470aacd-3dc8-4559-ace5-56c3142d278d"],"in":false,"label":"out0"}],"name":"Start","color":"rgb(34,139,34)"},{"id":"a3fec017-e926-4a9b-9dc6-ab22484364c6","_class":"EndNodeModel","selected":false,"type":"end","x":184.671875,"y":213,"extras":{},"ports":[{"id":"64ffa18b-2064-415a-878b-de7dbec588aa","_class":"DefaultPortModel","selected":false,"name":"in0","parentNode":"a3fec017-e926-4a9b-9dc6-ab22484364c6","links":["d470aacd-3dc8-4559-ace5-56c3142d278d"],"in":true,"label":"in0"}],"name":"End","color":"rgb(139,0,0)"}]}';
let remoteModel = JSON.parse(demoJSON);
console.log("Remote model", remoteModel);
let model = new RJD.DiagramModel();
model.deSerializeDiagram(remoteModel, diagramEngine);
let serializedModel = model.serializeDiagram();
console.log("New model", model);
this.props.updateModel(serializedModel);
Hello.
I have a problem with DiagramWidget. When I'm trying to wrap it in div it doesn't render.
Code like this works:
return(<RJD.DiagramWidget diagramEngine={diagramEngine} />);
but when I trying to add e.g. navbar, and I need to wrap it in any div my diagram doesn't render.
return(<div><RJD.DiagramWidget diagramEngine={diagramEngine} /></div>);
What I'm doing wrong?
Thank from advance for your help!
Great concept, But whole element should be the target as the user have to find the target point
Hi ,
react js diagrams where not working in ie can anyone help me in solving this
Hi,
First of all, thanks for great lib that saved me a lot of time.
I have discovered one annoying issue regarding remove button.
Whenever you click on remove button and move mouse, node is moved and removed on mouse up action. I think that expected behaviour should be that node is not selected and when cursor is out of remove button action should not take place.
Is there any simple way to make remove button not selecting node?
how can I make many ports at the same node multiple in-ports and out-ports
I made it but the link still goes out from the default port
When the DiagramEngine widget emits point-created action, the corresponding model i.e. point model or the link on which this point is created is empty. This makes it impossible to identify where the point was created.
By any chance this repo has labels and arrows for link?
Question. Is there a way to save the serialized diagram to a DB and then re-render the diagram again after extracting from the DB?
Please add this as a note in the Readme file
How can i import your diagram component in my project. React-js-diagrams i installed. What i should I do next?
I try
import * as RJD from 'react-js-diagrams';
<RJD.DiagramWidget />;
And console shows me error TypeError: Cannot read property 'getDiagramModel' of undefined.
Сan you write a detailed installation documentation?
When you drag an existing point, the DigramWidget emits point-created action instead of updated.
Hi there, while I'm thrilled that you are using the library, would you kindly just perhaps update your Readme as to indicate that this library is really a fork and maybe provide a URL to the original project. You also published this on NPM and now its really confusing because there are 2 versions of this library floating around and it looks like there are 2 separate authors. This would normally not be an issue, but because my project is so young, and is finally starting to gather some support, I would highly appreciate it.
I've implemented a project similar to demo4 example. My problem is that I am having is that whenever I drag a node over, I need to click on the diagram in order for it to respond. I see the onChange function which passes an action to the canvas. is there any way to keep the diagram always active?
Currently, zoom (mouse wheel) has several problems:
The core responsible for that is in DiagramWidget.onWheel
.
My suggestion is to change it slightly to the following:
onWheel(event) {
const { diagramEngine } = this.props;
const actions = this.getActions();
if (!actions.zoom) {
return;
}
const diagramModel = diagramEngine.getDiagramModel();
event.preventDefault();
event.stopPropagation();
/* ------------------------------------- */
/* --- ADD ----------------------------- */
const relativeMouse = diagramEngine.getRelativeMousePoint(event);
const initialOffsetX = diagramModel.getOffsetX();
const initialOffsetY = diagramModel.getOffsetY();
const initialZoom = diagramModel.getZoomLevel();
const zoom = initialZoom + (event.deltaY * (initialZoom / 100.0) * 0.2);
diagramModel.setOffset(
(relativeMouse.x + initialOffsetX) * (initialZoom/zoom) - relativeMouse.x,
(relativeMouse.y + initialOffsetY) * (initialZoom/zoom) - relativeMouse.y
);
/* --- ADD ----------------------------- */
/* ------------------------------------- */
diagramModel.setZoomLevel(zoom);
diagramEngine.enableRepaintEntities([]);
this.forceUpdate();
}
Please find the changes in the commit - zhuj@16a90ae
It will make the zooming more smoothly (it won't matter how you like to scroll the wheel - zoom will be linear) and current mouse position-centered (nodes will be exposed/collapsed over the current mouse position).
Any thoughts?
Hello. This is a good library that I want to use in my project. I am confused by the fact that it does not updated... there are no new changes, improvements, fix bugs ... Will you continue working on the library?
First of all, awesome job with this package! It is everything I needed. I'm only missing a way to add custom events. I'm building an app which users double click on a node and a modal opens up and then they can tweak some features of that node. Any suggestions?
Firstly I'll admit I am completely new to Node.JS, React, etc. So it's okay to point an laugh. I've spent about 7 hours trying to get this to work, so I finally thought I should post something.
I'm running node 7.5.0, npm 4.4.1, and webpack 2.3.1 on a Red Hat Linux EL 6 server. I executed the simple instructions in the README and it fails completely. After learning a bit more, I started installing things globally, which didn't resolve the problem. I tried a complete "project" load (everything inside the react-js-diagrams folder, which didn't work. And so on. I'm not overly impressed with Node's dependency resolution model, but I'm in no position and lack the experience for that to have any weight.
This library is absolutely beautiful and I would love to be able to see it on a the server. A colleague says I should just build it on a local workstation and browse to the resulting index file, but that's clearly not how we would use this.
Any help would be appreciated.
Thanks.
Michael
> [email protected] start /usr/lib/node_modules/react-js-diagrams
> babel-node server.js --presets es2015,es2016,es2017,stage-0
Listening at http://localhost:3000/
webpack built ad8d62129e39bdf6cdc7 in 3980ms
Version: webpack 2.2.1
Time: 3980ms
Asset Size Chunks Chunk Names
bundle.js.map 1.15 MB 0 [emitted] bundle
bundle.js 958 kB 0 [emitted] [big] bundle
demo4.js 390 kB 2 [emitted] [big] demo4
demo3.js 390 kB 3 [emitted] [big] demo3
demo2.js 390 kB 4 [emitted] [big] demo2
demo1.js 390 kB 5 [emitted] [big] demo1
demos.js 390 kB 1 [emitted] [big] demos
demos.js.map 475 kB 1 [emitted] demos
demo4.js.map 475 kB 2 [emitted] demo4
demo3.js.map 476 kB 3 [emitted] demo3
demo2.js.map 476 kB 4 [emitted] demo2
demo1.js.map 476 kB 5 [emitted] demo1
ERROR in ./demos/index.js
Module parse failed: /usr/lib/node_modules/react-js-diagrams/demos/index.js Unexpected token (11:6)
You may need an appropriate loader to handle this file type.
| const render = Component =>
| ReactDOM.render(
| <AppContainer>
| <Component />
| </AppContainer>,
@ multi react-hot-loader/patch webpack-hot-middleware/client ./demos/index.js
ERROR in ./demos/demo1/index.js
Module parse failed: /usr/lib/node_modules/react-js-diagrams/demos/demo1/index.js Unexpected token (108:10)
You may need an appropriate loader to handle this file type.
|
| // Render the canvas
| return <RJD.DiagramWidget diagramEngine={engine} />;
| }
| }
@ multi react-hot-loader/patch webpack-hot-middleware/client ./demos/demo1/index.js
ERROR in ./demos/demo2/index.js
Module parse failed: /usr/lib/node_modules/react-js-diagrams/demos/demo2/index.js Unexpected token (117:10)
You may need an appropriate loader to handle this file type.
|
| // Render the canvas
| return <RJD.DiagramWidget diagramEngine={engine} />;
| }
| }
@ multi react-hot-loader/patch webpack-hot-middleware/client ./demos/demo2/index.js
ERROR in ./demos/demo3/index.js
Module parse failed: /usr/lib/node_modules/react-js-diagrams/demos/demo3/index.js Unexpected token (121:10)
You may need an appropriate loader to handle this file type.
|
| // Render the canvas
| return <RJD.DiagramWidget diagramEngine={engine} />;
| }
| }
@ multi react-hot-loader/patch webpack-hot-middleware/client ./demos/demo3/index.js
ERROR in ./demos/demo4/index.js
Module parse failed: /usr/lib/node_modules/react-js-diagrams/demos/demo4/index.js Unexpected token (12:6)
You may need an appropriate loader to handle this file type.
| const render = Component => {
| ReactDOM.render(
| <Provider store={store}>
| <AppContainer>
| <Component />
@ multi react-hot-loader/patch webpack-hot-middleware/client ./demos/demo4/index.js
ERROR in ./src/WidgetFactories.js
Module parse failed: /usr/lib/node_modules/react-js-diagrams/src/WidgetFactories.js Unexpected token (17:11)
You may need an appropriate loader to handle this file type.
| export class NodeWidgetFactory extends WidgetFactory {
| generateReactWidget(diagramEngine, node) {
| return <DefaultNodeWidget node={node} diagramEngine={diagramEngine} />;
| }
| }
@ ./src/main.js 9:0-34
@ multi react-hot-loader/patch webpack-hot-middleware/client ./src/main.js
ERROR in ./src/DiagramModel.js
Module parse failed: /usr/lib/node_modules/react-js-diagrams/src/DiagramModel.js Unexpected token (56:6)
You may need an appropriate loader to handle this file type.
| serializeDiagram() {
| return {
| ...this.serialize(),
| offsetX: this.offsetX,
| offsetY: this.offsetY,
@ ./src/main.js 13:0-31
@ multi react-hot-loader/patch webpack-hot-middleware/client ./src/main.js
ERROR in ./src/Common.js
Module parse failed: /usr/lib/node_modules/react-js-diagrams/src/Common.js Unexpected token (17:6)
You may need an appropriate loader to handle this file type.
| serialize() {
| return {
| ...super.serialize(),
| _class: this.constructor.name,
| selected: this.selected
@ ./src/main.js 15:0-25
@ multi react-hot-loader/patch webpack-hot-middleware/client ./src/main.js
ERROR in ./src/defaults/DefaultLinkFactory.js
Module parse failed: /usr/lib/node_modules/react-js-diagrams/src/defaults/DefaultLinkFactory.js Unexpected token (12:6)
You may need an appropriate loader to handle this file type.
| generateReactWidget(diagramEngine, link) {
| return (
| <DefaultLinkWidget link={link} diagramEngine={diagramEngine} />
| );
| }
@ ./src/main.js 1:0-46
@ multi react-hot-loader/patch webpack-hot-middleware/client ./src/main.js
ERROR in ./src/defaults/DefaultLinkWidget.js
Module parse failed: /usr/lib/node_modules/react-js-diagrams/src/defaults/DefaultLinkWidget.js Unexpected token (5:22)
You may need an appropriate loader to handle this file type.
|
| export class DefaultLinkWidget extends React.Component {
| static defaultProps = {
| color: 'black',
| width: 3,
@ ./src/main.js 2:0-45
@ multi react-hot-loader/patch webpack-hot-middleware/client ./src/main.js
ERROR in ./src/defaults/DefaultNodeFactory.js
Module parse failed: /usr/lib/node_modules/react-js-diagrams/src/defaults/DefaultNodeFactory.js Unexpected token (12:6)
You may need an appropriate loader to handle this file type.
| generateReactWidget(diagramEngine, node) {
| return (
| <DefaultNodeWidget node={node} diagramEngine={diagramEngine} />
| );
| }
@ ./src/main.js 3:0-46
@ multi react-hot-loader/patch webpack-hot-middleware/client ./src/main.js
ERROR in ./src/defaults/DefaultNodeWidget.js
Module parse failed: /usr/lib/node_modules/react-js-diagrams/src/defaults/DefaultNodeWidget.js Unexpected token (5:22)
You may need an appropriate loader to handle this file type.
|
| export class DefaultNodeWidget extends React.Component {
| static defaultProps = {
| node: null,
| };
@ ./src/main.js 4:0-45
@ multi react-hot-loader/patch webpack-hot-middleware/client ./src/main.js
ERROR in ./src/defaults/DefaultPortModel.js
Module parse failed: /usr/lib/node_modules/react-js-diagrams/src/defaults/DefaultPortModel.js Unexpected token (29:6)
You may need an appropriate loader to handle this file type.
| serialize() {
| return {
| ...super.serialize(),
| in: this.in,
| label: this.label
@ ./src/main.js 6:0-44
@ multi react-hot-loader/patch webpack-hot-middleware/client ./src/main.js
ERROR in ./src/defaults/DefaultPortLabelWidget.js
Module parse failed: /usr/lib/node_modules/react-js-diagrams/src/defaults/DefaultPortLabelWidget.js Unexpected token (5:22)
You may need an appropriate loader to handle this file type.
|
| export class DefaultPortLabel extends React.Component {
| static defaultProps = {
| in: true,
| label: 'port'
@ ./src/main.js 7:0-50
@ multi react-hot-loader/patch webpack-hot-middleware/client ./src/main.js
ERROR in ./src/widgets/DiagramWidget.js
Module parse failed: /usr/lib/node_modules/react-js-diagrams/src/widgets/DiagramWidget.js Unexpected token (9:22)
You may need an appropriate loader to handle this file type.
|
| export class DiagramWidget extends React.Component {
| static defaultProps = {
| onChange: () => {}
| };
@ ./src/main.js 19:0-40
@ multi react-hot-loader/patch webpack-hot-middleware/client ./src/main.js
ERROR in ./src/widgets/LinkLayerWidget.js
Module parse failed: /usr/lib/node_modules/react-js-diagrams/src/widgets/LinkLayerWidget.js Unexpected token (47:8)
You may need an appropriate loader to handle this file type.
|
| return (
| <LinkWidget {...props}>
| {React.cloneElement(generatedLink, { pointAdded: this.props.pointAdded })}
| </LinkWidget>
@ ./src/main.js 20:0-42
@ multi react-hot-loader/patch webpack-hot-middleware/client ./src/main.js
ERROR in ./src/widgets/NodeLayerWidget.js
Module parse failed: /usr/lib/node_modules/react-js-diagrams/src/widgets/NodeLayerWidget.js Unexpected token (21:8)
You may need an appropriate loader to handle this file type.
| const children = _.map(diagramModel.getNodes(), node => {
| return (
| <NodeWidget key={node.id} node={node} diagramEngine={diagramEngine}>
| {this.props.diagramEngine.generateWidgetForNode(node)}
| </NodeWidget>
@ ./src/main.js 22:0-42
@ multi react-hot-loader/patch webpack-hot-middleware/client ./src/main.js
ERROR in ./src/widgets/NodeWidget.js
Module parse failed: /usr/lib/node_modules/react-js-diagrams/src/widgets/NodeWidget.js Unexpected token (20:6)
You may need an appropriate loader to handle this file type.
|
| return (
| <div {...props}>
| {children}
| </div>
@ ./src/main.js 23:0-37
@ multi react-hot-loader/patch webpack-hot-middleware/client ./src/main.js
ERROR in ./src/widgets/PortWidget.js
Module parse failed: /usr/lib/node_modules/react-js-diagrams/src/widgets/PortWidget.js Unexpected token (14:6)
You may need an appropriate loader to handle this file type.
| const { name, node } = this.props;
| return (
| <div
| className={'port' + (this.state.selected ? ' selected' : '')}
| onMouseEnter={() => this.setState({ selected: true })}
@ ./src/main.js 24:0-37
@ multi react-hot-loader/patch webpack-hot-middleware/client ./src/main.js
webpack: Failed to compile.
I'm able to specify custom node widgets but custom link widgets aren't working.
On line 388 of DiagramWidget#onMouseDown, we're instantiating new LinkModel()
. Shouldn't this be coming from one of the instance factories?
Is there a prop we can pass to the DiagramWidget which will disable zoom, disable drag all items, not allow loose link and also remove key down listeners?
please any suggestion for that
when i click on node add new node on canvas
lilke i click on connection node add new connection node on canvas
Hi, I'm getting the following error after running npm start
. I've been trying to figure it out but I can't find the issue. I'm on Ubuntu.
ERROR in ./demos/demo4/components/Diagram.js
Module not found: Error: Can't resolve './engine' in '/home/victor/front-end/react-js-diagrams/demos/demo4/components'
@ ./demos/demo4/components/Diagram.js 18:0-41
@ ./demos/demo4/demo4.js
@ ./demos/demo4/index.js
@ multi react-hot-loader/patch webpack-hot-middleware/client ./demos/demo4/index.js
webpack: Failed to compile.
Here is the list of installed packages after running npm install
:
$npm list --depth=0
[email protected] /home/victor/front-end/react-js-diagrams
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]
Thanks
Great concept, looks awesome, but really lacks documentation!
JSON objects are shown only for the nodes. Is there a way to show a similar kind of object when a connecting link is selected?
Hi, thanks for your great work. I'm using it in one my projects and liking it a lot.
I have noticed that on page load, a pre-saved diagram doesn't render links. Upon some investigation, I figured that for rendering a link, you've to find out coordinates of ports its connected with. Those coordinates are in turn calculated by selecting port's HTML elements present in the DOM. At the time of first rendering, those elements are not present in the DOM (you're rendering link layer before node layer in DiagramWidget), hence the querySelector returns nothing and your DiagramEngine#getNodePortElement method throws an error (which gets swallowed somewhere and doesn't make it to the console).
I've tried extending DiagramWidget and swapping the render order of links and nodes (nodes first, links later). It does render links on page load, but I can't select nodes or ports anymore.
Please let me know if you can suggest a workaround to this problem.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.