Example 1 - With local storage

.gitignore

@@ -32,3 +32,6 @@ yarn-error.log*
 
 # vercel
 .vercel
+
+# WebStorm
+.idea

LICENSE

@@ -0,0 +1,22 @@
+The MIT License (MIT)
+
+Copyright (c) 2019 Unly
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+

README.md

@@ -1,41 +1,76 @@
-# TypeScript Next.js example
+# POC Next.js + Reaflow
 
-This is a really simple project that shows the usage of Next.js with TypeScript.
+> This project is a POC of [Reaflow](https://github.com/reaviz/reaflow) used with the Next.js framework. It is hosted on Vercel.
 
-## Deploy your own
+It is a single-page application (using a static page) that aims at showing an **advanced use-case with Reaflow**.
+
+## Online demo
+
+[Demo](https://poc-nextjs-reaflow.vercel.app/) (automatically updated from the `master` branch).
+
+![image](https://user-images.githubusercontent.com/3807458/109431687-08bf1680-7a08-11eb-98bd-31fa91e21680.png)
 
-Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example):
+## Features
 
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-typescript&project-name=with-typescript&repository-name=with-typescript)
+It comes with the following features:
+- Source code heavily **documented**
+- Strong TS typings
+- Different kinds of node (`start`, `if`, `information`, `question`) with different layouts for each type _(see [NodeRouter component](blob/main/src/components/nodes/NodeRouter.tsx))_
+- Nodes use `foreignObject`, which complicates things quite a bit (events, css), but it's the only way of writing HTML/CSS within an SVG `rect` (custom nodes UI)
+- Advanced support for **`foreignObject`** and best-practices
+- Support for **Emotion 11**
+- Reaflow Nodes, Edges and Ports are properly extended (**BaseNode** component, **BaseNodeData** type, **BaseEdge** component, **BaseEdgeData** type, etc.), 
+  which makes it easy to quickly change the properties of all nodes, edges, ports, etc.
+- Creation of nodes through the `BlockPickerMenu` component, which displays either at the bottom of the canvas, or at the mouse pointer position (e.g: when dropping edges)
+- **Undo/redo** support (with shortcuts)
+- Node/edge **deletion**
+- Node **duplication**
+- **Selection** of nodes and edges, one at a time 
+- Uses **`Recoil`** for shared state management
+- Automatically re-calculate the **height** of nodes when jumping lines in `textarea`
+- Graph data (nodes, edges) are **persisted** in the browser **localstorage** and loaded upon page reload
 
-## How to use it?
+Known limitations:
+- Editor direction is `RIGHT` (hardcoded) and adding nodes will add them to the right side, always (even if you change the direction)
+    - I don't plan on changing that at the moment
 
-Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
+> This POC can be used as a boilerplate to start your own project using Reaflow.
 
-```bash
-npx create-next-app --example with-typescript with-typescript-app
-# or
-yarn create next-app --example with-typescript with-typescript-app
-```
+## Getting started
+
+- `yarn`
+- `yarn start`
+- Open browser at [http://localhost:8890](http://localhost:8890)
+
+## Deploy your own
 
-Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).
+Deploy the example using [Vercel](https://vercel.com):
 
-## Notes
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/Vadorequest/poc-nextjs-reaflow&project-name=poc-nextjs-reaflow&repository-name=poc-nextjs-reaflow)
 
-This example shows how to integrate the TypeScript type system into Next.js. Since TypeScript is supported out of the box with Next.js, all we have to do is to install TypeScript.
+## Advanced - ELK
 
-```
-npm install --save-dev typescript
-```
+ELKjs (and ELK) are used to draw the graph (nodes, edges). 
+It's what Reaflow uses in the background.
+ELK stands for **Eclipse Layout Kernel**.
 
-To enable TypeScript's features, we install the type declarations for React and Node.
+It seems to be one of the best Layout manager out there.
 
-```
-npm install --save-dev @types/react @types/react-dom @types/node
-```
+Unfortunately, it is quite complicated and lacks a comprehensive documentation.
 
-When we run `next dev` the next time, Next.js will start looking for any `.ts` or `.tsx` files in our project and builds it. It even automatically creates a `tsconfig.json` file for our project with the recommended settings.
+You'll need to dig into the ELK documentation and issues if you're trying to change **how the graph's layout behaves**. 
+Here are some good places to start and useful links I've compiled for my own sake.
 
-Next.js has built-in TypeScript declarations, so we'll get autocompletion for Next.js' modules straight away.
+- [ELKjs GitHub](https://github.com/kieler/elkjs)
+- [ELK official website](https://www.eclipse.org/elk/)
+- [ELK Demonstrators](https://rtsys.informatik.uni-kiel.de/elklive/index.html)
+  - [Tool to convert `elkt <=> json` both ways](https://rtsys.informatik.uni-kiel.de/elklive/conversion.html)
+  - [Tool to convert `elkt` to a graph](https://rtsys.informatik.uni-kiel.de/elklive/elkgraph.html)
+  - [Java ELK implementation of the `layered` algorithm](https://github.com/eclipse/elk/tree/master/plugins/org.eclipse.elk.alg.layered/src/org/eclipse/elk/alg/layered/p2layers)
+  - [Community examples soure code](https://github.com/eclipse/elk-models/tree/master/examples) _(which are displayed on [ELK examples](https://rtsys.informatik.uni-kiel.de/elklive/examples.html))_
+  - [Klayjs example](http://kieler.github.io/klayjs-d3/examples/interactive) (ELK is the sucessor of KlayJS and [should support the same options](https://github.com/kieler/elkjs/issues/122#issuecomment-777781503))
+- [Issues opened by Austin](https://github.com/kieler/elkjs/issues?q=is%3Aissue+sort%3Aupdated-desc+author%3Aamcdnl)
+- [Issues opened by Vadorequest](https://github.com/kieler/elkjs/issues?q=is%3Aissue+sort%3Aupdated-desc+author%3Avadorequest)
 
-A `type-check` script is also added to `package.json`, which runs TypeScript's `tsc` CLI in `noEmit` mode to run type-checking separately. You can then include this, for example, in your `test` scripts.
+Known limitations:
+- [Tracking issue - Manually positioning the nodes ("Standalone Edge Routing")](https://github.com/eclipse/elk/issues/315)

app.d.ts

@@ -0,0 +1,2 @@
+declare module '@unly/utils';
+

babel.config.js

@@ -0,0 +1,24 @@
+/**
+ * Babel configuration for Next.js
+ *
+ * The official documentation uses a ".babelrc" file, but we prefer using "babel.config.js" for better documentation support.
+ *
+ * @see https://nextjs.org/docs/advanced-features/customizing-babel-config Official doc reference v10
+ * @see https://github.com/vercel/next.js/blob/canary/packages/next/build/babel/preset.ts You can take a look at this file to learn about the presets included by next/babel.
+ * @see https://emotion.sh/docs/css-prop#babel-preset Configuring Emotion 11
+ * @example https://github.com/vercel/next.js/tree/canary/examples/with-custom-babel-config Next.js official example of customizing Babel
+ */
+module.exports = {
+  presets: [
+    [
+      'next/babel',
+      {
+        'preset-react': {
+          'runtime': 'automatic',
+          'importSource': '@emotion/react',
+        },
+      },
+    ],
+  ],
+  plugins: ['@emotion/babel-plugin'],
+};

browser.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Extends the native browser Window object by adding our custom keys.
+ */
+interface Window {
+  initialCanvasDataset?: any;
+}

package.json

@@ -1,22 +1,73 @@
 {
-  "name": "with-typescript",
-  "version": "1.0.0",
+  "name": "poc-nextjs-reaflow",
+  "license": "MIT",
   "scripts": {
-    "dev": "next",
     "build": "next build",
-    "start": "next start",
-    "type-check": "tsc"
+    "start": "next dev --port 8890",
+    "type-check": "tsc",
+    "link:reaflow": "yarn link reaflow && yarn link react && yarn link react-dom"
   },
   "dependencies": {
-    "next": "latest",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0"
+    "@chakra-ui/icons": "1.0.4",
+    "@chakra-ui/react": "1.2.1",
+    "@chakra-ui/theme-tools": "1.0.3",
+    "@emotion/react": "11.1.4",
+    "@emotion/styled": "11.0.0",
+    "@fortawesome/fontawesome-svg-core": "1.2.34",
+    "@fortawesome/free-brands-svg-icons": "5.15.2",
+    "@fortawesome/free-solid-svg-icons": "5.15.2",
+    "@fortawesome/react-fontawesome": "0.1.14",
+    "@types/lodash.clonedeep": "4.5.6",
+    "@types/lodash.merge": "4.6.6",
+    "@types/lodash.now": "4.0.6",
+    "@types/lodash.size": "4.2.6",
+    "@unly/utils": "1.0.3",
+    "@welldone-software/why-did-you-render": "6.0.5",
+    "animate.css": "4.1.1",
+    "classnames": "2.2.6",
+    "framer-motion": "3.2.1",
+    "lodash.capitalize": "4.2.1",
+    "lodash.clonedeep": "4.5.0",
+    "lodash.debounce": "4.0.8",
+    "lodash.filter": "4.6.0",
+    "lodash.includes": "4.3.0",
+    "lodash.isequal": "4.5.0",
+    "lodash.merge": "4.6.2",
+    "lodash.now": "4.0.2",
+    "lodash.remove": "4.7.0",
+    "lodash.size": "4.2.0",
+    "lodash.some": "4.6.0",
+    "lodash.sortby": "4.7.0",
+    "next": "10.0.6",
+    "rdk": "5.0.6",
+    "react": "17.0.1",
+    "react-debounce-input": "3.2.3",
+    "react-dom": "17.0.1",
+    "react-select": "4.0.2",
+    "react-textarea-autosize": "8.3.0",
+    "reaflow": "3.0.13",
+    "recoil": "0.1.2",
+    "recoil-devtools-dock": "^0.1.6",
+    "recoil-devtools-log-monitor": "^0.2.7",
+    "recoil-devtools-logger": "^0.1.5",
+    "uuid": "8.3.2"
   },
   "devDependencies": {
-    "@types/node": "^12.12.21",
-    "@types/react": "^16.9.16",
-    "@types/react-dom": "^16.9.4",
-    "typescript": "4.0"
-  },
-  "license": "MIT"
+    "@emotion/babel-plugin": "11.1.2",
+    "@types/classnames": "2.2.11",
+    "@types/lodash.capitalize": "4.2.6",
+    "@types/lodash.debounce": "4.0.6",
+    "@types/lodash.filter": "4.6.6",
+    "@types/lodash.includes": "4.3.6",
+    "@types/lodash.isequal": "4.5.5",
+    "@types/lodash.remove": "4.7.6",
+    "@types/lodash.some": "4.6.6",
+    "@types/lodash.sortby": "4.7.6",
+    "@types/node": "14.14.22",
+    "@types/react": "17.0.1",
+    "@types/react-dom": "17.0.0",
+    "@types/react-select": "4.0.12",
+    "@types/uuid": "8.3.0",
+    "typescript": "4.1.3"
+  }
 }