woodenconsulting/react-js-diagrams

A flow based diagramming library written in React

react-js-diagrams's Issues

Link label and link arrows

By any chance this repo has labels and arrows for link?

Canvas Active

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?

Needs Documentation

Great concept, looks awesome, but really lacks documentation!

Demo4 change name of a node

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.

Need to turn off Name Mangling in Production Builds

Please add this as a note in the Readme file

Links not shown after render view.

It not shown after render view, but it show when I trigger action on model.

Initial nodes do not move, instead they produce new nodes

I copied example 1 and it behaves differently. Node1 and node2 are not draggable. When I try to drag it - it make new nodes which are draggable.

The code is from first demo.

Initial state: two nodes

but in console I see many nodes.

Attempt to move nodes - got new nodes

add more than one port

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

A pre-saved diagram doesn't render links on page load

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.

Improve zooming issue

Currently, zoom (mouse wheel) has several problems:

• it scales the whole image from the left-top point (visually it results in all nodes movements that direction according to the level of the zoom);
• zoom is not linear (zooming 2 times consequently on a single «wheel move» gives a different result from zooming single time with twice «wheel move»).

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?

not working in ie

Hi ,

react js diagrams where not working in ie can anyone help me in solving this

Mouse positioning doesn't respect scroll position

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.

Please specify a license in package.json

Dragging an existing point emits point-created action

When you drag an existing point, the DigramWidget emits point-created action instead of updated.

Whole element as target

Great concept, But whole element should be the target as the user have to find the target point

Question and Favor

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.

npm start doesn't work

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.

How to add nodes onclick event

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

JSON object now shown for the connecting links

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?

Is there a way to Save Diagram

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?

point-created event returns empty object

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.

Is there any way to specify a custom link widget?

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?

Help with importing

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?

npm start: Module not found error

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

DiagramWidget doesn't render after wrap in div

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!

deSerialize of LinkModel ignores extras

LinkModel on deSerialize call ignores extras of the model passed to it.

Disable zoom, select multiple and hotkeys

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?

Question regarding how to use

First of all, thank you for creating this project. I have one question.

How can I fix the CSS issues? How can I import the basic css reqired for this lib?

I just imported

import * as RJD from 'react-js-diagrams';

Support of this library

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?

Links not shown

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);

Remove button dragging

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?

Double click event

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?