├── .eslintrc.json
├── .github
├── dependabot.yml
└── workflows
│ ├── demo.yml
│ ├── publish.yml
│ └── test.yml
├── .gitignore
├── .npmignore
├── CHANGES.md
├── LICENSE-MIT.txt
├── README.md
├── __tests__
├── basics.js
├── editing.js
├── graphchanges.js
├── nav.js
└── thumbnail.js
├── bin
└── the-graph-render
├── examples
├── assets
│ ├── loading.gif
│ └── photobooth.json.js
├── demo-full.html
├── demo-full.js
├── demo-simple.html
├── demo-simple.js
├── demo-thumbnail.html
└── demo-thumbnail.js
├── index.js
├── jest-setup.js
├── package.json
├── render.jsjob.js
├── scripts
└── build-font-awesome-javascript.js
├── spec
├── fixtures
│ └── photobooth.json
└── render-cli.js
├── the-graph-editor
├── clipboard.js
└── index.html
├── the-graph-nav
└── the-graph-nav.js
├── the-graph-thumb
└── the-graph-thumb.js
├── the-graph
├── SVGImage.js
├── TextBG.js
├── arcs.js
├── factories.js
├── font-awesome-unicode-map.js
├── geometryutils.js
├── hammer.js
├── merge.js
├── mixins.js
├── render.js
├── the-graph-app.js
├── the-graph-autolayout.js
├── the-graph-edge.js
├── the-graph-graph.js
├── the-graph-group.js
├── the-graph-iip.js
├── the-graph-library.js
├── the-graph-menu.js
├── the-graph-modalbg.js
├── the-graph-node-menu-port.js
├── the-graph-node-menu-ports.js
├── the-graph-node-menu.js
├── the-graph-node.js
├── the-graph-port.js
└── the-graph-tooltip.js
├── themes
├── dark
│ ├── the-graph-spectrum.styl
│ └── the-graph.styl
├── default
│ └── the-graph.styl
├── light
│ ├── the-graph-spectrum.styl
│ └── the-graph.styl
├── the-graph-dark.styl
└── the-graph-light.styl
└── webpack.config.js
/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "airbnb",
3 | "env": {
4 | "browser": true
5 | },
6 | "rules": {
7 | "no-param-reassign": 1,
8 | "no-underscore-dangle": 0,
9 | "react/destructuring-assignment": 1,
10 | "react/prop-types": 1,
11 | "react/prefer-es6-class": 1,
12 | "react/prefer-stateless-function": 1,
13 | "react/no-children-prop": 1,
14 | "react/no-find-dom-node": 1
15 | },
16 | "parserOptions": {
17 | "ecmaFeatures": {
18 | "jsx": true
19 | }
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/.github/dependabot.yml:
--------------------------------------------------------------------------------
1 | version: 2
2 | updates:
3 | - package-ecosystem: npm
4 | directory: "/"
5 | schedule:
6 | interval: daily
7 | versioning-strategy: increase-if-necessary
8 | - package-ecosystem: github-actions
9 | directory: "/"
10 | schedule:
11 | interval: weekly
12 |
--------------------------------------------------------------------------------
/.github/workflows/demo.yml:
--------------------------------------------------------------------------------
1 | name: Publish on GitHub Pages
2 |
3 | on:
4 | push:
5 | branches:
6 | - master
7 |
8 | jobs:
9 | build:
10 | runs-on: ubuntu-latest
11 | steps:
12 | - uses: actions/checkout@v2.3.4
13 | - uses: actions/setup-node@v2.1.5
14 | with:
15 | node-version: 12
16 | - run: npm install
17 | - run: npm test
18 | deploy:
19 | needs: build
20 | runs-on: ubuntu-latest
21 | steps:
22 | - uses: actions/checkout@v2.3.4
23 | - uses: actions/setup-node@v2.1.5
24 | with:
25 | node-version: 12
26 | - run: npm install
27 | - run: npm run build
28 | - uses: peaceiris/actions-gh-pages@v3
29 | with:
30 | github_token: ${{ secrets.GITHUB_TOKEN }}
31 | publish_dir: ./dist
32 | keep_files: false
33 |
--------------------------------------------------------------------------------
/.github/workflows/publish.yml:
--------------------------------------------------------------------------------
1 | name: Publish Node.js Package
2 |
3 | on:
4 | push:
5 | tags:
6 | - "*"
7 |
8 | jobs:
9 | build:
10 | runs-on: ubuntu-latest
11 | steps:
12 | - uses: actions/checkout@v2.3.4
13 | - uses: actions/setup-node@v2.1.5
14 | with:
15 | node-version: 12
16 | - run: npm install
17 | - run: npm test
18 |
19 | publish-npm:
20 | needs: build
21 | runs-on: ubuntu-latest
22 | steps:
23 | - uses: actions/checkout@v2.3.4
24 | - uses: actions/setup-node@v2.1.5
25 | with:
26 | node-version: 12
27 | registry-url: https://registry.npmjs.org/
28 | - run: npm install
29 | - run: npm run build
30 | - run: npm publish
31 | env:
32 | NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
33 |
--------------------------------------------------------------------------------
/.github/workflows/test.yml:
--------------------------------------------------------------------------------
1 | name: Node CI
2 |
3 | on: [push, pull_request]
4 |
5 | jobs:
6 | test:
7 | name: Run test suite
8 | runs-on: ubuntu-latest
9 | strategy:
10 | matrix:
11 | node-version: [12.x]
12 | steps:
13 | - uses: actions/checkout@v2.3.4
14 | - name: Use Node.js ${{ matrix.node-version }}
15 | uses: actions/setup-node@v2.1.5
16 | with:
17 | node-version: ${{ matrix.node-version }}
18 | - run: npm install
19 | - run: npm test
20 | env:
21 | CI: true
22 | merge-me:
23 | name: Auto-merge dependency updates
24 | needs: test
25 | runs-on: ubuntu-latest
26 | steps:
27 | - uses: ridedott/merge-me-action@v2.2.21
28 | with:
29 | GITHUB_LOGIN: 'dependabot[bot]'
30 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
31 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | bower_components/
2 | node_modules/
3 | /.idea
4 | /build
5 | /dist
6 | npm-debug.log
7 | /spec/temp/
8 | /coverage
9 | package-lock.json
10 |
--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | /build
2 | /bower_components
3 | *.tgz
4 | /dist/fonts
5 | /dist/demo-*
6 |
--------------------------------------------------------------------------------
/CHANGES.md:
--------------------------------------------------------------------------------
1 | ## 0.14.0 (git master)
2 |
3 | Changes:
4 |
5 | * the-graph CSS themes are now in the `dist/` folder instead of `theme/` folder
6 | * `editor.getDefaultMenus` method has now been removed
7 |
8 | Internal changes:
9 |
10 | * Now using WebPack for the builds
11 |
12 | ## 0.12.0 (2018 February 19)
13 |
14 | New features
15 |
16 | * `the-graph-render`: CLI tool for a graph to PNG/JPEG/SVG output.
17 | This is especially useful for generating images for documentation purposes.
18 | Implemented by executing the-graph codebase in a browser using JsJob.
19 | Some of the rendering API is available experimentally under `TheGraph.render`, or one can execute the .jsjob programatically in Node.js.
20 |
21 | ## 0.11.1 (2017 December 27)
22 |
23 | Bugfixes
24 |
25 | * Fix node menu not showing due missing require(). Regression in 0.11.0
26 |
27 | ## 0.11.0 (2017 December 27)
28 |
29 | Breaking changes
30 |
31 | * Upgraded from React 14 to React 15.
32 | It is no longer a dependency, so applications using the-graph can (and must) pull in an appropriate version.
33 |
34 | Internal changes
35 |
36 | * Tests are now using Jest instead of Mocha/Chai.
37 | They are ran locally against JsDom, which makes them also in Pull Requests which was not possible with Saucelabs.
38 | * More migration of code into proper CommonJS modules
39 |
40 | ## 0.10.2 (2017 August 23)
41 |
42 | Bugfixes
43 |
44 | * Fixed unable to create edge from node context menu
45 |
46 | ## 0.10.1 (2017 August 17)
47 |
48 | Bugfixes
49 |
50 | * Fixed compatibility with browsers only supporting `TouchEvent`, including Safari on iOS.
51 | * Fixed exception on long-press if no menu was defined
52 |
53 | UI changes
54 |
55 | * Movement threshold for starting panning reduced, making it a bit easier
56 |
57 | ## 0.10.0 (2017 June 28)
58 |
59 | UI changes
60 |
61 | * Edges cannot be dropped on target port. Have to tap to complete edge connection.
62 | * Menu item cannot be opened by swiping and releasing. Have to tap to perform menu action.
63 |
64 | Breaking changes
65 |
66 | * Polymer element `the-graph-thumb` has been removed.
67 | Should instead use the JavaScript API `TheGraph.thumb.render()`,
68 | as shown in `examples/demo-thumbnail.html`.
69 | * Polymer element `the-graph-nav` has been removed.
70 | Should instead use the new React component `TheGraph.nav.Component`,
71 | as shown in `examples/demo-full.html`
72 | * Polymer element `the-graph` has been removed.
73 | Use React component `TheGraph.Graph` instead.
74 | * Polymer element `the-graph-editor` has been removed.
75 | Use React component `TheGraph.App` instead, as shown in `examples/demo-simple.html`
76 |
77 | Deprecated APIs, to be removed
78 |
79 | * `TheGraph.editor.getDefaultMenus()`, should be explicitly set by app.
80 | * `TheGraph.autolayout.applyAutolayout()`, should be included in app if wanted.
81 | * `TheGraph.App::updateIcon()`, should instead pass `nodeIcons` prop.
82 | * `TheGraph.App::getComponent()`, should instead use info from the passed in `library` prop.
83 | * Property `getMenuDef` of `TheGraph.App` is deprecated, should pass the data in `menus` prop instead.
84 | * All methods on React elements are planned to be deprecated in favor of passing props.
85 |
86 | Added APIs
87 |
88 | * `TheGraph.library.libraryFromGraph()`, returns component library from a `fbp-graph.Graph` instance
89 | in format compatible with the `library` prop.
90 |
91 | Bugfixes
92 |
93 | * Changing `graph` prop of React element should now correctly reset and follow new graph instance.
94 |
95 | Internal changes
96 |
97 | * Usage of PolymerGestures has been replaced by hammer.js
98 | * No longer depends on Polymer or webcomponents
99 | * All dependencies are installed via NPM, bower is no longer used
100 | * Some more modules have been converted to proper CommonJS
101 |
102 | ## 0.9.0 (2017 May 6)
103 |
104 | New features
105 |
106 | * `the-graph-editor` Polymer element and `Graph` React component now support a `readonly` property.
107 | When set to true, destructive actions
108 |
109 | Internal changes
110 |
111 | * `menuCallback`: An empty object is considered falsy and will not show a menu.
112 |
113 | ## 0.8.0 (2017 May 6)
114 |
115 | Additions
116 |
117 | * `fbp-graph` dependency is now exposed as `fbpGraph` on the top-level module.
118 | Ex: `TheGraph.fbpGraph` when including `dist/the-graph.js`.
119 |
120 | Breaking changes
121 |
122 | * Polymer element `the-graph-nav` no longer takes and directly manipulates `editor`.
123 | Instead it fires events like `panto`. And it expects `graph` and `view` attributes to be set.
124 | Tapping the element does not manipulate anything, only fires the `tap` event.
125 | See `examples/demo-full.html` for usage.
126 | * Polymer element `the-graph-editor` no longer accepts a JSON string as input for `graph` property.
127 | Instead the property must always be a `fbpGraph.Graph` instance.
128 | The event `graphInitialised`, which was used for this old async behavior has also been removed.
129 |
130 | ## 0.7.0 (2017 March 2)
131 |
132 | Breaking changes
133 |
134 | * Polymer elements no longer automatically include the neccesary JS files.
135 | Instead users must include `dist/the-graph.js`, which bundles the needed JavaScript and provides API under `window.TheGraph`.
136 | The file is included in `the-graph` NPM packages.
137 | This is preparation for removing the Polymer dependency, instead providing JS APIs and React components.
138 |
139 | ## 0.6.0 (2017 January 5)
140 |
141 | * Add all dependencies besides Polymer to NPM.
142 | In the fututure NPM will be the recommended way to install, and Bower is considered deprecated.
143 |
144 | ## 0.5.0 (2017 January 5)
145 |
146 | * Depend on [fbp-graph](https://github.com/flowbased/fbp-graph) instead of NoFlo.
147 | Build size significantly reduced.
148 | * Examples were cleaned up and can now be found under examples/
149 |
150 | ## 0.4.4 (2016 July 27)
151 |
152 | * Arrows on edges (#277) thanks @ifitzpatrick
153 | * Font Awesome 4.6.3
154 |
155 | ## 0.4.2 (2016 June 24)
156 |
157 | * Fix pinch on touch screens (#286)
158 |
159 | ## 0.4.1 (2016 May 23)
160 |
161 | * Hotkeys: delete, f for fit, s to zoom selection (#272) thanks @ifitzpatrick
162 |
163 | ## 0.4.0 (2015 December 5)
164 |
165 | * React 0.14.3 (#231) thanks @u39kun
166 |
167 | ## 0.3.12 (2015 September 30)
168 |
169 | * Build dependencies
170 | * JSHint with inline scripts; remove grunt-lint-inline
171 | * Polymer 0.5.6
172 | * Fix tooltip bug (#226)
173 | * Fix pinch-to-zoom crash (introduced with #218)
174 |
175 | ## 0.3.11 (2015 August 6)
176 |
177 | * Fire graphInitialised event (#204)
178 | * Allow max/min zoom parameterised (#218)
179 | * Ports of type 'any' highlight for incoming edges (#220)
180 | * Better thumbnail drawing (#221)
181 | * (previous 4 thanks @townxelliot)
182 | * Icon/library fix (#223)
183 | * Font Awesome 4.4.0
184 | * React 0.13.3
185 |
186 | ## 0.3.10 (2015 January 23)
187 |
188 | * Font Awesome 4.3.0
189 | * React 0.12.2
190 | * ~~Polymer 0.5.3~~ (doesn't work in Safari 7-8)
191 |
192 | ## 0.3.9 (2015 January 20)
193 |
194 | * Define offset of graph editor (#190) thanks @fabiancook
195 | * Improve heartbeats for animated edges (#194) thanks @lhausermann
196 | * Fire "nodes" event when selected nodes change
197 | * Fire "edges" event when selected edges change
198 | * Remove selection on delete (#195)
199 |
200 | ## 0.3.8 (2014 December 19)
201 |
202 | * Update to Polymer 0.5.2
203 |
204 | ## 0.3.7 (2014 December 11)
205 |
206 | * `React.createFactory` and `displayName` for all React elements
207 | * Can't access element `key` in React >=0.12.0 ([reduced case](http://jsbin.com/wuseho/1/edit?js,output))
208 |
209 | ## 0.3.6 (2014 December 11)
210 |
211 | * Update to [React 0.12.1](https://github.com/facebook/react/releases/tag/v0.12.1)
212 | * Move to [klayjs-noflo](https://github.com/noflo/klayjs-noflo)
213 | * Fix Windows build (#192)
214 |
215 | ## 0.3.5 (Durham, 2014 November 14)
216 |
217 | * Update to [Polymer 0.5.1](https://github.com/Polymer/polymer/releases/tag/0.5.1)
218 |
219 | ## 0.3.4 (London, 2014 October 23)
220 |
221 | * Enable SVG icon to be loaded (#178) thanks @lhausermann
222 | * font-awesome to 4.2.0
223 |
224 | ## 0.3.3 (2014 September 18)
225 |
226 | * Copy and paste (#167) thanks @mpricope
227 |
228 | ## 0.3.2 (2014 September 11)
229 |
230 | * Deployed with noflo-ui 0.2.0
231 | * map-style zooming to node (#165) thanks @djdeath
232 |
233 | ## 0.3.1 (2014 September 4)
234 |
235 | * PolymerGestures fixed with Polymer 0.4.0
236 |
237 | ## 0.3.0 (2014 August 21)
238 |
239 | * Factories for component customization (#157) thanks @hayesmg
240 | * Node height expands when there are many ports (#158)
241 |
242 | ## 0.2.6 (Helsinki, 2014 August 4)
243 |
244 | * lib updates
245 | * including noflo via npm; build with `grunt browserify`
246 |
247 | ## 0.2.5 (Helsinki, 2014 June 3)
248 |
249 | * `grunt build` now builds the Font Awesome unicode map, so we can use aliases #149
250 |
251 | ## 0.2.3 (Frisco, 2014 May 25)
252 |
253 | * [loopback-tweak](https://cloud.githubusercontent.com/assets/395307/3077862/ee7f0c1a-e447-11e3-920d-6aebe75cfd76.gif)
254 |
255 | ## 0.2.0 (Frisco, 2014 May 17)
256 |
257 | * Working with Polymer 0.2.3 and native custom elements.
258 |
259 | ## 0.1.0 (2014 April 2)
260 |
261 | * First all-SVG version
262 |
263 | ## 0.0.2 (2014 February 24)
264 |
265 | * Goodbye slow DOM
266 |
267 | ## 0.0.1 (2013 Nov 28)
268 |
269 | * All custom elements
270 |
--------------------------------------------------------------------------------
/LICENSE-MIT.txt:
--------------------------------------------------------------------------------
1 | Copyright (c) 2013-2016 TheGrid (Rituwall Inc.)
2 |
3 | Permission is hereby granted, free of charge, to any person
4 | obtaining a copy of this software and associated documentation
5 | files (the "Software"), to deal in the Software without
6 | restriction, including without limitation the rights to use,
7 | copy, modify, merge, publish, distribute, sublicense, and/or sell
8 | copies of the Software, and to permit persons to whom the
9 | Software is furnished to do so, subject to the following
10 | conditions:
11 |
12 | The above copyright notice and this permission notice shall be
13 | included in all copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
16 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
17 | OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
18 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
19 | HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
20 | WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
21 | FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
22 | OTHER DEALINGS IN THE SOFTWARE.
23 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | The Graph Editor [](#license)
2 | ================
3 |
4 | This project provides a set [React](https://facebook.github.io/react) components for viewing and editing node-based graphs.
5 | The focus is on graphs used for dataflow and [Flow-based programming](https://en.wikipedia.org/wiki/Flow-based_programming).
6 |
7 | The graph structure is stored by [fbp-graph](https://github.com/flowbased/fbp-graph), which supports extendable metadata and undo/redo.
8 |
9 | You can optionally use [klayjs-noflo](https://github.com/noflo/klayjs-noflo) for automatic layout of graphs.
10 |
11 | `the-graph` is used as the editor in the [Flowhub IDE](https://app.flowhub.io).
12 |
13 | ## Examples
14 |
15 | * Basic demo. [code](./examples/demo-simple.js) |
16 | [Run](https://flowhub.github.io/the-graph/demo-simple.html)
17 | * Stresstest. [code](./examples/demo-full.js) |
18 | [Run](https://flowhub.github.io/the-graph/demo-full.html)
19 | * Thumbnail. [code](./examples/demo-thumbnail.js) |
20 | [Run](https://flowhub.github.io/the-graph/demo-thumbnail.html)
21 |
22 | ## Using
23 |
24 | Install via NPM
25 |
26 | npm install the-graph
27 |
28 | See the examples for how to include the `.js` and `.css` files, and API usage.
29 |
30 | ## License
31 |
32 | [The MIT License](./LICENSE-MIT.txt)
33 |
34 | ## Support
35 | Please refer to .
36 |
37 | ## Developing
38 |
39 | Clone the repo
40 |
41 | git clone https://github.com/flowhub/the-graph.git # or your own fork on Github
42 | cd the-graph
43 |
44 | Install dependencies and build
45 |
46 | npm install
47 | npm run build
48 |
49 | Run the demo server
50 |
51 | npm start
52 |
53 | or for interactive demo.
54 |
55 | Send pull requests on Github!
56 |
--------------------------------------------------------------------------------
/__tests__/basics.js:
--------------------------------------------------------------------------------
1 | const { render } = require("enzyme");
2 | const fbpGraph = require("fbp-graph");
3 | const TheGraph = require("../index.js");
4 |
5 | const parseFBP = fbpString =>
6 | new Promise((resolve, reject) =>
7 | fbpGraph.graph.loadFBP(
8 | fbpString,
9 | (err, graph) =>
10 | err instanceof fbpGraph.Graph
11 | ? resolve(err)
12 | : err ? reject(err) : resolve(graph)
13 | )
14 | );
15 |
16 | const dummyComponent = {
17 | inports: [
18 | {
19 | name: "in",
20 | type: "all"
21 | }
22 | ],
23 | outports: [
24 | {
25 | name: "out",
26 | type: "all"
27 | }
28 | ]
29 | };
30 |
31 | const name = "'42' -> CONFIG foo(Foo) OUT -> IN bar(Bar)";
32 | const library = { Foo: dummyComponent, Bar: dummyComponent };
33 |
34 | describe("Basics", function() {
35 | describe("loading a simple graph", function() {
36 | let rendered;
37 |
38 | beforeAll(async () => {
39 | const graph = await parseFBP(name);
40 | rendered = render(TheGraph.App({ graph, library }));
41 | });
42 |
43 | it("should render 2 nodes", () => {
44 | expect(rendered.find(".node")).toHaveLength(2);
45 | });
46 |
47 | it("should render 1 edge", () => {
48 | expect(rendered.find(".edge")).toHaveLength(1);
49 | });
50 |
51 | it("should render 1 IIP", () => {
52 | expect(rendered.find(".iip")).toHaveLength(1);
53 | });
54 | });
55 | });
56 |
--------------------------------------------------------------------------------
/__tests__/editing.js:
--------------------------------------------------------------------------------
1 | const { mount } = require("enzyme");
2 | const fbpGraph = require("fbp-graph");
3 | const TheGraph = require("../index.js");
4 |
5 | const parseFBP = fbpString =>
6 | new Promise((resolve, reject) =>
7 | fbpGraph.graph.loadFBP(
8 | fbpString,
9 | (err, graph) =>
10 | err instanceof fbpGraph.Graph
11 | ? resolve(err)
12 | : err ? reject(err) : resolve(graph)
13 | )
14 | );
15 |
16 | const dummyComponent = {
17 | inports: [
18 | {
19 | name: "in",
20 | type: "all"
21 | }
22 | ],
23 | outports: [
24 | {
25 | name: "out",
26 | type: "all"
27 | }
28 | ]
29 | };
30 |
31 | const name = "'42' -> CONFIG foo(Foo) OUT -> IN bar(Bar)";
32 | const library = { Foo: dummyComponent, Bar: dummyComponent };
33 |
34 | const simulate = (
35 | node,
36 | type,
37 | data = {},
38 | opts = { bubbles: true, cancelable: true }
39 | ) => node.dispatchEvent(Object.assign(new Event(type, opts), data));
40 |
41 | describe("Editor navigation", () => {
42 | let mounted, svg, raf;
43 |
44 | beforeEach(async () => {
45 | const graph = await parseFBP(name);
46 | raf = window.requestAnimationFrame = jest.fn();
47 | mounted = mount(TheGraph.App({ graph, library }));
48 | svg = mounted.getDOMNode().getElementsByClassName("app-svg")[0];
49 | });
50 |
51 | afterEach(() => mounted.unmount());
52 |
53 | describe("dragging on background", () => {
54 | it("should pan graph view", () => {
55 | const deltaX = 100;
56 | const deltaY = 200;
57 | expect(mounted.state("x")).toBe(0);
58 | expect(mounted.state("y")).toBe(0);
59 | simulate(svg, "panstart");
60 | simulate(svg, "panmove", { gesture: { deltaX, deltaY } });
61 | simulate(svg, "panend");
62 | expect(mounted.state("x")).toBe(deltaX);
63 | expect(mounted.state("y")).toBe(deltaY);
64 | });
65 | });
66 |
67 | describe("mouse scrolling up", () => {
68 | it("should zoom in", () => {
69 | const deltaY = -100;
70 | expect(mounted.state("scale")).toBe(1);
71 | svg.onwheel = null;
72 | simulate(svg, "wheel", { deltaY });
73 | expect(raf).toHaveBeenCalledTimes(1);
74 | raf.mock.calls[0][0]();
75 | expect(mounted.state("scale")).toBe(1.2);
76 | });
77 | });
78 |
79 | describe("mouse scrolling down", () => {
80 | it("should zoom out", () => {
81 | const deltaY = 100;
82 | expect(mounted.state("scale")).toBe(1);
83 | svg.onwheel = null;
84 | simulate(svg, "wheel", { deltaY });
85 | expect(raf).toHaveBeenCalledTimes(1);
86 | raf.mock.calls[0][0]();
87 | expect(mounted.state("scale")).toBe(0.8);
88 | });
89 | });
90 |
91 | describe("multitouch pinch", () => {
92 | it("should zoom in/out", () => {
93 | expect(mounted.state("scale")).toBe(1);
94 | const touches = [
95 | { target: svg, identifier: "0", clientX: 0, clientY: 0 },
96 | { target: svg, identifier: "1", clientX: 100, clientY: 100 }
97 | ];
98 | simulate(svg, "touchstart", { touches, changedTouches: touches });
99 | touches[1].clientX = 50;
100 | simulate(svg, "touchmove", { touches, changedTouches: [touches[1]] });
101 | simulate(svg, "touchend", { touches, changedTouches: touches });
102 | expect(mounted.state("scale")).toBe(0.7905694150420948);
103 | simulate(svg, "touchstart", { touches, changedTouches: touches });
104 | touches[1].clientX = 100;
105 | simulate(svg, "touchmove", { touches, changedTouches: [touches[1]] });
106 | simulate(svg, "touchend", { touches, changedTouches: touches });
107 | expect(mounted.state("scale")).toBe(1);
108 | });
109 | });
110 |
111 | describe("hovering an node", () => {
112 | it("should highlight node");
113 | });
114 | describe("hovering an edge", () => {
115 | it("should highlight edge");
116 | });
117 | describe("hovering exported port", () => {
118 | it("should highlight exported port");
119 | });
120 | describe("hovering node group", () => {
121 | it("should highlight the group");
122 | });
123 | });
124 |
125 | describe("Editor", () => {
126 | let mounted, svg, raf, selectedNodes, selectedEdges;
127 |
128 | beforeEach(async () => {
129 | selectedNodes = {};
130 | selectedEdges = {};
131 | const graph = await parseFBP(name);
132 | raf = window.requestAnimationFrame = jest.fn();
133 | mounted = mount(
134 | TheGraph.App({
135 | graph,
136 | library,
137 | onNodeSelection: (id, node, toggle) => {
138 | if (toggle) return (selectedNodes[id] = !selectedNodes[id]);
139 | selectedNodes = selectedNodes[id] ? {} : { [id]: true };
140 | }
141 | })
142 | );
143 | svg = mounted.getDOMNode().getElementsByClassName("app-svg")[0];
144 | });
145 |
146 | afterEach(() => mounted.unmount());
147 |
148 | describe("dragging on node", () => {
149 | it("should move the node", () => {
150 | const deltaX = 100;
151 | const deltaY = 200;
152 | expect(mounted.props().graph.nodes[0].metadata.x).toBe(0);
153 | expect(mounted.props().graph.nodes[0].metadata.y).toBe(0);
154 | const [node] = mounted.getDOMNode().getElementsByClassName("node");
155 | simulate(node, "panstart");
156 | simulate(node, "panmove", { gesture: { deltaX, deltaY } });
157 | simulate(node, "panend");
158 | raf.mock.calls.forEach(([c]) => c());
159 | expect(mounted.props().graph.nodes[0].metadata.x).toBe(108);
160 | expect(mounted.props().graph.nodes[0].metadata.y).toBe(216);
161 | });
162 | });
163 |
164 | describe("dragging on exported port", () => {
165 | it("should move the port");
166 | });
167 |
168 | describe("dragging from node port", () => {
169 | it("should start making edge", () => {
170 | const deltaX = 100;
171 | const deltaY = 200;
172 | expect(svg.getElementsByClassName("edge")).toHaveLength(1);
173 | const [port] = svg.getElementsByClassName("port");
174 | simulate(port, "panstart");
175 | simulate(port, "panmove", { gesture: { deltaX, deltaY } });
176 | raf.mock.calls.forEach(([c]) => c());
177 | expect(svg.getElementsByClassName("edge")).toHaveLength(2);
178 | });
179 | });
180 |
181 | describe("dropping started edge on port", () => {
182 | it("should connect the edge", () => {
183 | const deltaX = 100;
184 | const deltaY = 200;
185 | const nodes = [...svg.getElementsByClassName("node")];
186 | const [p1, p2] = nodes.map(
187 | (n, i) =>
188 | n
189 | .getElementsByClassName(i ? "outports" : "inports")[0]
190 | .getElementsByClassName("port")[0]
191 | );
192 | simulate(p1, "panstart");
193 | simulate(p1, "panmove", { gesture: { deltaX, deltaY } });
194 | simulate(p1, "panend");
195 | simulate(p2, "tap");
196 | raf.mock.calls.forEach(([c]) => c());
197 | expect(mounted.props().graph.edges).toHaveLength(2);
198 | });
199 | });
200 |
201 | describe("dropping started edge outside", () => {
202 | it("should not connect the edge", () => {
203 | const deltaX = 100;
204 | const deltaY = 200;
205 | const [p1] = svg
206 | .getElementsByClassName("node")[0]
207 | .getElementsByClassName("inports")[0]
208 | .getElementsByClassName("port");
209 | simulate(p1, "panstart");
210 | simulate(p1, "panmove", { gesture: { deltaX, deltaY } });
211 | simulate(p1, "panend");
212 | simulate(svg, "click");
213 | raf.mock.calls.forEach(([c]) => c());
214 | expect(mounted.props().graph.edges).toHaveLength(1);
215 | });
216 | });
217 |
218 | describe("clicking exported port", () => {
219 | it("does nothing");
220 | });
221 |
222 | describe("clicking unselected node", () => {
223 | it("should add node to selection", () => {
224 | expect(selectedNodes).toEqual({});
225 | simulate(svg.getElementsByClassName("node")[0], "tap");
226 | raf.mock.calls.forEach(([c]) => c());
227 | expect(selectedNodes).toEqual({ foo: true });
228 | });
229 | });
230 |
231 | describe("clicking selected node", () => {
232 | it("should remove node from selection", () => {
233 | selectedNodes = { foo: true };
234 | simulate(svg.getElementsByClassName("node")[0], "tap");
235 | raf.mock.calls.forEach(([c]) => c());
236 | expect(selectedNodes).toEqual({});
237 | });
238 | });
239 |
240 | describe("clicking unselected edge", () => {
241 | it("should add edge to selection");
242 | });
243 | describe("clicking selected edge", () => {
244 | it("should remove edge from selection");
245 | });
246 | describe("selected nodes", () => {
247 | it("are visualized with a bounding box");
248 | describe("when dragging the box", () => {
249 | it("moves all nodes in selection");
250 | });
251 | });
252 | describe("node groups", () => {
253 | it("are visualized with a bounding box");
254 | it("shows group name");
255 | it("shows group description");
256 | describe("when dragging on label", () => {
257 | it("moves all nodes in group");
258 | });
259 | describe("when dragging on bounding box", () => {
260 | it("does nothing");
261 | });
262 | });
263 | describe("right-click node", () => {
264 | it("should open menu for node");
265 | });
266 | describe("right-click node port", () => {
267 | it("should open menu for port");
268 | });
269 | describe("right-click edge", () => {
270 | it("should open menu for edge");
271 | });
272 | describe("right-click exported port", () => {
273 | it("should open menu for exported port");
274 | });
275 | describe("right-click node group", () => {
276 | it("should open menu for group");
277 | });
278 | describe("right-click background", () => {
279 | it("should open menu for editor");
280 | });
281 | describe("long-press", () => {
282 | it("should work same as right-click");
283 | });
284 | });
285 |
286 | describe("Editor menus", () => {
287 | describe("node menu", () => {
288 | it("shows node name");
289 | it("shows component icon");
290 | it("should have delete action");
291 | it("should have copy action");
292 | it("should show in and outports");
293 | describe("clicking port", () => {
294 | it("should start edge");
295 | });
296 | });
297 | describe("node port menu", () => {
298 | it("should have export action");
299 | });
300 | describe("edge menu", () => {
301 | it("shows edge name");
302 | it("should have delete action");
303 | });
304 | describe("exported port menu", () => {
305 | it("should have delete action");
306 | });
307 | describe("node selection menu", () => {
308 | it("should have group action");
309 | it("should have copy action");
310 | });
311 | describe("editor menu", () => {
312 | it("should have paste action");
313 | });
314 | });
315 |
--------------------------------------------------------------------------------
/__tests__/graphchanges.js:
--------------------------------------------------------------------------------
1 | describe("Graph changes", () => {
2 | describe("adding node", () => {
3 | it("should update editor");
4 | });
5 | describe("removing node", () => {
6 | it("should update editor");
7 | });
8 | describe("adding edge", () => {
9 | it("should update editor");
10 | });
11 | describe("removing edge", () => {
12 | it("should update editor");
13 | });
14 | describe("adding inport", () => {
15 | it("should update editor");
16 | });
17 | describe("removing inport", () => {
18 | it("should update editor");
19 | });
20 | describe("adding outport", () => {
21 | it("should update editor");
22 | });
23 | describe("removing outport", () => {
24 | it("should update editor");
25 | });
26 | });
27 |
--------------------------------------------------------------------------------
/__tests__/nav.js:
--------------------------------------------------------------------------------
1 | describe("Navigation", () => {
2 | it("renders a simplified version of graph");
3 | it("supports dark & light theme");
4 | it("supports specifying nodeSize");
5 | it("supports fill,stroke,edge styles");
6 | });
7 |
--------------------------------------------------------------------------------
/__tests__/thumbnail.js:
--------------------------------------------------------------------------------
1 | describe("Thumbnail", () => {
2 | it("renders a thumbnail of graph");
3 | it("visualizes the viewport area");
4 | it("allows to pan viewport");
5 | it("hides when whole graph is in view");
6 | });
7 |
--------------------------------------------------------------------------------
/bin/the-graph-render:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env node
2 |
3 | // Node.js CLI tool for rendering an image of the graph
4 |
5 | const buffer = require('buffer');
6 | const fs = require('fs');
7 | const path = require('path');
8 | const http = require('http');
9 |
10 | const argv = require('yargs').argv
11 | const jsjob = require('jsjob');
12 |
13 | function unpackUrl(dataurl) {
14 | var mimetype = dataurl.substring(dataurl.indexOf(':'), dataurl.indexOf(';'));
15 | var encoding = dataurl.substring(dataurl.indexOf(';')+1, dataurl.indexOf(','));
16 | if (encoding != 'base64') {
17 | throw new Error('Dataurl must have base64 encoding, got ' + encoding);
18 | }
19 |
20 | var encoded = dataurl.substring(dataurl.indexOf(','), dataurl.length);
21 | var raw = buffer.Buffer.from(encoded, 'base64');
22 | return raw;
23 | }
24 |
25 | function setupJobServer(jobData, options, callback) {
26 | if (!options.port) { options.port = 9999; }
27 | if (!options.path) { options.path = '/the-graph-render.js'; }
28 |
29 | function onRequest(req, res) {
30 | if (req.url == options.path) {
31 | res.end(jobData);
32 | } else {
33 | res.writeHead(404);
34 | res.end();
35 | }
36 | }
37 |
38 | server = http.createServer(onRequest);
39 | server.listen(options.port, function(err) {
40 | return callback(err, server, options);
41 | });
42 | }
43 |
44 |
45 | function runRender(graphData, options, callback) {
46 | if (!options.job) { options.job = 'http://localhost:9999/the-graph-render.js'; }
47 |
48 | var runnerConfig = {
49 | verbose: options.verbose,
50 | };
51 | var runner = new jsjob.Runner(runnerConfig);
52 | runner.start(function(err) {
53 | if (err) return callback(err);
54 |
55 | runner.runJob(options.job, graphData, options, function(err, result, details) {
56 | if (err) { return callback(err); }
57 |
58 | runner.stop(function(err) {
59 | return callback(err, result);
60 | });
61 | });
62 | });
63 |
64 | }
65 |
66 | function render(graphPath, options, callback) {
67 | if (!options.format) { options.format = 'png' }
68 | if (!options.output) {
69 | options.output = graphPath.replace(path.extname(graphPath), '.'+options.format)
70 | }
71 |
72 | const p = path.join(__dirname, '../dist/the-graph-render.js');
73 | const defaultJobData = fs.readFileSync(p);
74 |
75 | fs.readFile(graphPath, 'utf-8', function(err, d) {
76 | if (err) { return callback(err) }
77 | try {
78 | graphData = JSON.parse(d);
79 | } catch (err) {
80 | return callback(err);
81 | }
82 |
83 | setupJobServer(defaultJobData, {}, function(err, server) {
84 | if (err) return callback(err);
85 |
86 | runRender(graphData, options, function (err, output, details) {
87 | if (err) { return callback(err); }
88 |
89 | if (output.indexOf('data:') == 0) {
90 | output = unpackUrl(output);
91 | }
92 |
93 | fs.writeFile(options.output, output, function(err) {
94 | return callback(err, options.output);
95 | });
96 | });
97 | });
98 | });
99 |
100 | }
101 |
102 | function main() {
103 | var callback = function(err, out) {
104 | if (err) {
105 | console.error(err);
106 | console.error(err.stack);
107 | process.exit(1);
108 | }
109 | console.log('Written to', out);
110 | process.exit(0);
111 | };
112 | render(argv._[0], argv, callback);
113 | }
114 |
115 | if (!module.parent) {
116 | main();
117 | }
118 |
--------------------------------------------------------------------------------
/examples/assets/loading.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/flowhub/the-graph/6f6823fcd1a0956532ec68357a84aee2740e2640/examples/assets/loading.gif
--------------------------------------------------------------------------------
/examples/demo-full.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Graph Editor
5 |
6 |
7 |
8 |
9 |
10 |
11 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
loading custom elements...
54 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
loading custom elements...
47 |