diff --git a/README.md b/README.md index 39f8c76..1e643e3 100644 --- a/README.md +++ b/README.md @@ -1,39 +1,45 @@ # DHGWorkflow + DHGWorkflow is a visual Directed Hypergraph Workflow Composer. # Developers + For developers, this tool can be more than just a DHGWorkflow Editor. We aim at building an open-source generic simple graph builder which can be used for various applications that require some kind of building graphs by a user. It can easily be integrated with any web application and can even be customised to add custom logics. -DHGWorkflow is built by adding custom logic over this Generic Graph Builder. +DHGWorkflow is built by adding custom logic over this Generic Graph Builder. Key Features of this graph builder: -* Export-import graph as a graphml file. -* Export graph as JPEG/PNG -* Undo-Redo Actions -* Drag Drop Nodes -* Create Edges easily -* Bend Edges -* Resize and customise nodes and edges. -and many more! +- Export-import graph as a graphml file. +- Export graph as JPEG/PNG +- Undo-Redo Actions +- Drag Drop Nodes +- Create Edges easily +- Bend Edges +- Resize and customise nodes and edges. +and many more! ## Installing it locally + This is a frontend tool built with React Js. Steps to start it locally + 1. Clone the repository 2. At the root of the repository, run the following commands: - 1. `npm i` - 2. `npm start` + 1. `npm i` + 2. `npm start` if you're on Linux or macOS, use `npm run start:windows` if you're on windows 3. It should a development server and tool will be accessible at - `http://localhost:3000/DHGWorkflow` + `http://localhost:3000/DHGWorkflow` ## Creating a generic Graph Builder. The generic graph can be built out of two ways. ### 1. Check out the Generic branch + This branch will be synced with the changes from the main periodically. Easy to switch but do not guarantee up to date changes. + 1. `git checkout generic` 2. `npm i` 3. `npm start` @@ -41,16 +47,18 @@ This branch will be synced with the changes from the main periodically. Easy to This branch may contain `src/graph-builder/tailored-graph-builder.js`. It can be safely removed. ### 2. Make changes to the master branch + You can convert the existing graph builder to generic by following these simple steps -1. At `src/graph-builder/index.js` replace -`import GraphBuilder from './tailored-graph-builder';` with -`import GraphBuilder from './graph-core';` +1. At `src/graph-builder/index.js` replace + `import GraphBuilder from './tailored-graph-builder';` with + `import GraphBuilder from './graph-core';` 2. Delete `src/graph-builder/tailored-graph-builder.js` (Optional) This method is more error-prone. ### How it works? + This project requires building a graph with some special kind of hyperedges. `src/graph-builder/graph-core/*` contains all the classes required for building a generic GraphBuilder (with simple edges) and `src/graph-builder/tailored-graph-builder.js` extends the core graph and add logics to create hyperedges. @@ -67,9 +75,9 @@ For "Source," select "Deploy from a branch." For "Branch," select "gh-pages" and "/root." Save. - + It should say, - Your site is live at https://YOUR-FORK.github.io/DHGWorkflow/ - - Now, you should be able to use DHGWorkflow from https://YOUR-FORK.github.io/DHGWorkflow/ +Your site is live at https://YOUR-FORK.github.io/DHGWorkflow/ + +Now, you should be able to use DHGWorkflow from https://YOUR-FORK.github.io/DHGWorkflow/ diff --git a/package.json b/package.json index f027ff4..4dad056 100644 --- a/package.json +++ b/package.json @@ -24,7 +24,7 @@ "react-dom": "^17.0.2", "react-icons": "^4.2.0", "react-modal": "^3.13.1", - "react-scripts": "4.0.3", + "react-scripts": "^4.0.3", "react-toastify": "^8.1.0", "react-tooltip": "^4.2.21", "web-vitals": "^0.2.4", @@ -44,7 +44,8 @@ "zealit": "^2.4.1" }, "scripts": { - "start": "react-scripts start", + "start": "export NODE_OPTIONS=--openssl-legacy-provider && react-scripts start", + "start:windows": "set NODE_OPTIONS=--openssl-legacy-provider && react-scripts start", "build": "react-scripts build", "build-localhost": "PUBLIC_URL=/ react-scripts build", "test": "react-scripts test",