From 5b9abd8c9e1b577859a77a759d5b4d22673f9ba0 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Mon, 15 Jul 2019 18:45:33 +0200
Subject: [PATCH] feat(deps): remove emotion

---
 example/SimpleGraph.js                    |  10 +-
 package-lock.json                         | 200 +++++-----------------
 package.json                              |   2 -
 src/EdgeRenderer/Edge.js                  |  10 +-
 src/EdgeRenderer/index.js                 |   2 +-
 src/GraphContext/index.js                 |  13 +-
 src/NodeRenderer/Handle/index.js          |  13 +-
 src/NodeRenderer/NodeTypes/DefaultNode.js |  10 +-
 src/NodeRenderer/NodeTypes/InputNode.js   |  10 +-
 src/NodeRenderer/NodeTypes/OutputNode.js  |  10 +-
 src/NodeRenderer/NodeTypes/wrapNode.js    |  26 +--
 src/NodeRenderer/index.js                 |  15 +-
 src/style.css                             |  48 ++++++
 13 files changed, 124 insertions(+), 245 deletions(-)

diff --git a/example/SimpleGraph.js b/example/SimpleGraph.js
index 95fe89b7..303978b0 100644
--- a/example/SimpleGraph.js
+++ b/example/SimpleGraph.js
@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
 
-// import Graph from '../src';
-import Graph from '../dist/ReactGraph';
+import Graph from '../src';
+// import Graph from '../dist/ReactGraph';
 
 class App extends PureComponent {
   constructor() {
@@ -28,11 +28,11 @@ class App extends PureComponent {
     console.log('graph loaded:', this.graphInstance);
   }
 
-  onMove() {
+  onChange(elements) {
     if (!this.graphInstance) {
       return false;
     }
-    console.log('graph moved', this.graphInstance.nodes);
+    console.log('graph changed', elements);
   }
 
   onFitView() {
@@ -56,7 +56,7 @@ class App extends PureComponent {
         onNodeClick={node => console.log(node)}
         style={{ width: '100%', height: '100%' }}
         onLoad={graphInstance => this.onLoad(graphInstance)}
-        onMove={() => this.onMove()}
+        onChange={(elements) => this.onChange(elements)}
       >
         <button
           type="button"
diff --git a/package-lock.json b/package-lock.json
index cbce4ca9..14bf9734 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -165,6 +165,7 @@
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.0.0.tgz",
       "integrity": "sha512-aP/hlLq01DWNEiDg4Jn23i+CXxW/owM4WpDLFUbpjxe4NS3BhLVZQ5i7E0ZrxuQ/vwekIeciyamgB1UIYxxM6A==",
+      "dev": true,
       "requires": {
         "@babel/types": "^7.0.0"
       }
@@ -931,6 +932,7 @@
       "version": "7.4.3",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.4.3.tgz",
       "integrity": "sha512-9lsJwJLxDh/T3Q3SZszfWOTkk3pHbkmH+3KY+zwIDmsNlxsumuhS2TH3NIpktU4kNvfzy+k3eLT7aTJSPTo0OA==",
+      "dev": true,
       "requires": {
         "regenerator-runtime": "^0.13.2"
       }
@@ -967,121 +969,13 @@
       "version": "7.5.0",
       "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.5.0.tgz",
       "integrity": "sha512-UFpDVqRABKsW01bvw7/wSUe56uy6RXM5+VJibVVAybDGxEW25jdwiFJEf7ASvSaC7sN7rbE/l3cLp2izav+CtQ==",
+      "dev": true,
       "requires": {
         "esutils": "^2.0.2",
         "lodash": "^4.17.11",
         "to-fast-properties": "^2.0.0"
       }
     },
-    "@emotion/cache": {
-      "version": "10.0.14",
-      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-10.0.14.tgz",
-      "integrity": "sha512-HNGEwWnPlNyy/WPXBXzbjzkzeZFV657Z99/xq2xs5yinJHbMfi3ioCvBJ6Y8Zc8DQzO9F5jDmVXJB41Ytx3QMw==",
-      "requires": {
-        "@emotion/sheet": "0.9.3",
-        "@emotion/stylis": "0.8.4",
-        "@emotion/utils": "0.11.2",
-        "@emotion/weak-memoize": "0.2.3"
-      }
-    },
-    "@emotion/core": {
-      "version": "10.0.14",
-      "resolved": "https://registry.npmjs.org/@emotion/core/-/core-10.0.14.tgz",
-      "integrity": "sha512-G9FbyxLm3lSnPfLDcag8fcOQBKui/ueXmWOhV+LuEQg9HrqExuWnWaO6gm6S5rNe+AMcqLXVljf8pYgAdFLNSg==",
-      "requires": {
-        "@babel/runtime": "^7.4.3",
-        "@emotion/cache": "^10.0.14",
-        "@emotion/css": "^10.0.14",
-        "@emotion/serialize": "^0.11.8",
-        "@emotion/sheet": "0.9.3",
-        "@emotion/utils": "0.11.2"
-      }
-    },
-    "@emotion/css": {
-      "version": "10.0.14",
-      "resolved": "https://registry.npmjs.org/@emotion/css/-/css-10.0.14.tgz",
-      "integrity": "sha512-MozgPkBEWvorcdpqHZE5x1D/PLEHUitALQCQYt2wayf4UNhpgQs2tN0UwHYS4FMy5ROBH+0ALyCFVYJ/ywmwlg==",
-      "requires": {
-        "@emotion/serialize": "^0.11.8",
-        "@emotion/utils": "0.11.2",
-        "babel-plugin-emotion": "^10.0.14"
-      }
-    },
-    "@emotion/hash": {
-      "version": "0.7.2",
-      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.7.2.tgz",
-      "integrity": "sha512-RMtr1i6E8MXaBWwhXL3yeOU8JXRnz8GNxHvaUfVvwxokvayUY0zoBeWbKw1S9XkufmGEEdQd228pSZXFkAln8Q=="
-    },
-    "@emotion/is-prop-valid": {
-      "version": "0.8.2",
-      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.2.tgz",
-      "integrity": "sha512-ZQIMAA2kLUWiUeMZNJDTeCwYRx1l8SQL0kHktze4COT22occKpDML1GDUXP5/sxhOMrZO8vZw773ni4H5Snrsg==",
-      "requires": {
-        "@emotion/memoize": "0.7.2"
-      }
-    },
-    "@emotion/memoize": {
-      "version": "0.7.2",
-      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.2.tgz",
-      "integrity": "sha512-hnHhwQzvPCW1QjBWFyBtsETdllOM92BfrKWbUTmh9aeOlcVOiXvlPsK4104xH8NsaKfg86PTFsWkueQeUfMA/w=="
-    },
-    "@emotion/serialize": {
-      "version": "0.11.8",
-      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-0.11.8.tgz",
-      "integrity": "sha512-Qb6Us2Yk1ZW8SOYH6s5z7qzXXb2iHwVeqc6FjXtac0vvxC416ki0eTtHNw4Q5smoyxdyZh3519NKGrQvvvrZ/Q==",
-      "requires": {
-        "@emotion/hash": "0.7.2",
-        "@emotion/memoize": "0.7.2",
-        "@emotion/unitless": "0.7.4",
-        "@emotion/utils": "0.11.2",
-        "csstype": "^2.5.7"
-      }
-    },
-    "@emotion/sheet": {
-      "version": "0.9.3",
-      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-0.9.3.tgz",
-      "integrity": "sha512-c3Q6V7Df7jfwSq5AzQWbXHa5soeE4F5cbqi40xn0CzXxWW9/6Mxq48WJEtqfWzbZtW9odZdnRAkwCQwN12ob4A=="
-    },
-    "@emotion/styled": {
-      "version": "10.0.14",
-      "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-10.0.14.tgz",
-      "integrity": "sha512-Ae8d5N/FmjvZKXjqWcjfhZhjCdkvxZSqD95Q72BYDNQnsOKLHIA4vWlMolLXDNkw1dIxV3l2pp82Z87HXj6eYQ==",
-      "requires": {
-        "@emotion/styled-base": "^10.0.14",
-        "babel-plugin-emotion": "^10.0.14"
-      }
-    },
-    "@emotion/styled-base": {
-      "version": "10.0.14",
-      "resolved": "https://registry.npmjs.org/@emotion/styled-base/-/styled-base-10.0.14.tgz",
-      "integrity": "sha512-1nC5iO/Rk0DY47M5wXCyWpbo/woiwXWfVbNKDM3QRi7CKq8CwC++PQ5HgiYflFrAt1vjzIVZqnzrIn3idUoQgg==",
-      "requires": {
-        "@babel/runtime": "^7.4.3",
-        "@emotion/is-prop-valid": "0.8.2",
-        "@emotion/serialize": "^0.11.8",
-        "@emotion/utils": "0.11.2"
-      }
-    },
-    "@emotion/stylis": {
-      "version": "0.8.4",
-      "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.4.tgz",
-      "integrity": "sha512-TLmkCVm8f8gH0oLv+HWKiu7e8xmBIaokhxcEKPh1m8pXiV/akCiq50FvYgOwY42rjejck8nsdQxZlXZ7pmyBUQ=="
-    },
-    "@emotion/unitless": {
-      "version": "0.7.4",
-      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.4.tgz",
-      "integrity": "sha512-kBa+cDHOR9jpRJ+kcGMsysrls0leukrm68DmFQoMIWQcXdr2cZvyvypWuGYT7U+9kAExUE7+T7r6G3C3A6L8MQ=="
-    },
-    "@emotion/utils": {
-      "version": "0.11.2",
-      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-0.11.2.tgz",
-      "integrity": "sha512-UHX2XklLl3sIaP6oiMmlVzT0J+2ATTVpf0dHQVyPJHTkOITvXfaSqnRk6mdDhV9pR8T/tHc3cex78IKXssmzrA=="
-    },
-    "@emotion/weak-memoize": {
-      "version": "0.2.3",
-      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.3.tgz",
-      "integrity": "sha512-zVgvPwGK7c1aVdUVc9Qv7SqepOGRDrqCw7KZPSZziWGxSlbII3gmvGLPzLX4d0n0BMbamBacUrN22zOMyFFEkQ=="
-    },
     "@iarna/toml": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/@iarna/toml/-/toml-2.2.3.tgz",
@@ -1288,6 +1182,7 @@
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
       "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
+      "dev": true,
       "requires": {
         "sprintf-js": "~1.0.2"
       }
@@ -1449,38 +1344,17 @@
         "object.assign": "^4.1.0"
       }
     },
-    "babel-plugin-emotion": {
-      "version": "10.0.14",
-      "resolved": "https://registry.npmjs.org/babel-plugin-emotion/-/babel-plugin-emotion-10.0.14.tgz",
-      "integrity": "sha512-T7hdxJ4xXkKW3OXcizK0pnUJlBeNj/emjQZPDIZvGOuwl2adIgicQWRNkz6BuwKdDTrqaXQn1vayaL6aL8QW5A==",
-      "requires": {
-        "@babel/helper-module-imports": "^7.0.0",
-        "@emotion/hash": "0.7.2",
-        "@emotion/memoize": "0.7.2",
-        "@emotion/serialize": "^0.11.8",
-        "babel-plugin-macros": "^2.0.0",
-        "babel-plugin-syntax-jsx": "^6.18.0",
-        "convert-source-map": "^1.5.0",
-        "escape-string-regexp": "^1.0.5",
-        "find-root": "^1.1.0",
-        "source-map": "^0.5.7"
-      }
-    },
     "babel-plugin-macros": {
       "version": "2.5.1",
       "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-2.5.1.tgz",
       "integrity": "sha512-xN3KhAxPzsJ6OQTktCanNpIFnnMsCV+t8OloKxIL72D6+SUZYFn9qfklPgef5HyyDtzYZqqb+fs1S12+gQY82Q==",
+      "dev": true,
       "requires": {
         "@babel/runtime": "^7.4.2",
         "cosmiconfig": "^5.2.0",
         "resolve": "^1.10.0"
       }
     },
-    "babel-plugin-syntax-jsx": {
-      "version": "6.18.0",
-      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
-      "integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY="
-    },
     "babel-plugin-transform-react-remove-prop-types": {
       "version": "0.4.24",
       "resolved": "https://registry.npmjs.org/babel-plugin-transform-react-remove-prop-types/-/babel-plugin-transform-react-remove-prop-types-0.4.24.tgz",
@@ -2018,6 +1892,7 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/caller-callsite/-/caller-callsite-2.0.0.tgz",
       "integrity": "sha1-hH4PzgoiN1CpoCfFSzNzGtMVQTQ=",
+      "dev": true,
       "requires": {
         "callsites": "^2.0.0"
       }
@@ -2026,6 +1901,7 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/caller-path/-/caller-path-2.0.0.tgz",
       "integrity": "sha1-Ro+DBE42mrIBD6xfBs7uFbsssfQ=",
+      "dev": true,
       "requires": {
         "caller-callsite": "^2.0.0"
       }
@@ -2033,7 +1909,8 @@
     "callsites": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/callsites/-/callsites-2.0.0.tgz",
-      "integrity": "sha1-BuuE8A7qQT2oav/vrL/7Ngk7PFA="
+      "integrity": "sha1-BuuE8A7qQT2oav/vrL/7Ngk7PFA=",
+      "dev": true
     },
     "caniuse-api": {
       "version": "3.0.0",
@@ -2308,6 +2185,7 @@
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.6.0.tgz",
       "integrity": "sha512-eFu7XigvxdZ1ETfbgPBohgyQ/Z++C0eEhTor0qRwBw9unw+L0/6V8wkSuGgzdThkiS5lSpdptOQPD8Ak40a+7A==",
+      "dev": true,
       "requires": {
         "safe-buffer": "~5.1.1"
       }
@@ -2359,6 +2237,7 @@
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-5.2.1.tgz",
       "integrity": "sha512-H65gsXo1SKjf8zmrJ67eJk8aIRKV5ff2D4uKZIBZShbhGSpEmsQOPW/SKMKYhSTrqR7ufy6RP69rPogdaPh/kA==",
+      "dev": true,
       "requires": {
         "import-fresh": "^2.0.0",
         "is-directory": "^0.3.1",
@@ -2745,11 +2624,6 @@
         "cssom": "~0.3.6"
       }
     },
-    "csstype": {
-      "version": "2.6.6",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.6.tgz",
-      "integrity": "sha512-RpFbQGUE74iyPgvr46U9t1xoQBM8T4BL8SxrN66Le2xYAPSaDJJKeztV3awugusb3g3G9iL8StmkBBXhcbbXhg=="
-    },
     "d3-color": {
       "version": "1.2.8",
       "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-1.2.8.tgz",
@@ -3148,6 +3022,7 @@
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
       "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
+      "dev": true,
       "requires": {
         "is-arrayish": "^0.2.1"
       }
@@ -3186,7 +3061,8 @@
     "escape-string-regexp": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ="
+      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
+      "dev": true
     },
     "escodegen": {
       "version": "1.9.1",
@@ -3219,7 +3095,8 @@
     "esprima": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
-      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A=="
+      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
+      "dev": true
     },
     "estraverse": {
       "version": "4.2.0",
@@ -3236,7 +3113,8 @@
     "esutils": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.2.tgz",
-      "integrity": "sha1-Cr9PHKpbyx96nYrMbepPqqBLrJs="
+      "integrity": "sha1-Cr9PHKpbyx96nYrMbepPqqBLrJs=",
+      "dev": true
     },
     "etag": {
       "version": "1.8.1",
@@ -3516,11 +3394,6 @@
         }
       }
     },
-    "find-root": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
-      "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng=="
-    },
     "find-up": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
@@ -4530,6 +4403,7 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-2.0.0.tgz",
       "integrity": "sha1-2BNVwVYS04bGH53dOSLUMEgipUY=",
+      "dev": true,
       "requires": {
         "caller-path": "^2.0.0",
         "resolve-from": "^3.0.0"
@@ -4615,7 +4489,8 @@
     "is-arrayish": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
-      "integrity": "sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0="
+      "integrity": "sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=",
+      "dev": true
     },
     "is-binary-path": {
       "version": "1.0.1",
@@ -4709,7 +4584,8 @@
     "is-directory": {
       "version": "0.3.1",
       "resolved": "https://registry.npmjs.org/is-directory/-/is-directory-0.3.1.tgz",
-      "integrity": "sha1-YTObbyR1/Hcv2cnYP1yFddwVSuE="
+      "integrity": "sha1-YTObbyR1/Hcv2cnYP1yFddwVSuE=",
+      "dev": true
     },
     "is-extendable": {
       "version": "0.1.1",
@@ -4906,6 +4782,7 @@
       "version": "3.13.1",
       "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.13.1.tgz",
       "integrity": "sha512-YfbcO7jXDdyj0DGxYVSlSeQNHbD7XPWvrVWeVUujrQEoZzWJIRrCPoyk6kL6IAjAG2IolMK4T0hNUe0HOUs5Jw==",
+      "dev": true,
       "requires": {
         "argparse": "^1.0.7",
         "esprima": "^4.0.0"
@@ -4997,7 +4874,8 @@
     "json-parse-better-errors": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/json-parse-better-errors/-/json-parse-better-errors-1.0.2.tgz",
-      "integrity": "sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw=="
+      "integrity": "sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==",
+      "dev": true
     },
     "json-schema": {
       "version": "0.2.3",
@@ -5103,7 +4981,8 @@
     "lodash": {
       "version": "4.17.14",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.14.tgz",
-      "integrity": "sha512-mmKYbW3GLuJeX+iGP+Y7Gp1AiGHGbXHCOh/jZmrawMmsE7MS4znI3RL2FsjbqOyMayHInjOeykW7PEajUk1/xw=="
+      "integrity": "sha512-mmKYbW3GLuJeX+iGP+Y7Gp1AiGHGbXHCOh/jZmrawMmsE7MS4znI3RL2FsjbqOyMayHInjOeykW7PEajUk1/xw==",
+      "dev": true
     },
     "lodash.camelcase": {
       "version": "4.3.0",
@@ -6085,6 +5964,7 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-4.0.0.tgz",
       "integrity": "sha1-vjX1Qlvh9/bHRxhPmKeIy5lHfuA=",
+      "dev": true,
       "requires": {
         "error-ex": "^1.3.1",
         "json-parse-better-errors": "^1.0.1"
@@ -6141,7 +6021,8 @@
     "path-parse": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz",
-      "integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw=="
+      "integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==",
+      "dev": true
     },
     "pbkdf2": {
       "version": "3.0.17",
@@ -7015,7 +6896,8 @@
     "regenerator-runtime": {
       "version": "0.13.2",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.2.tgz",
-      "integrity": "sha512-S/TQAZJO+D3m9xeN1WTI8dLKBBiRgXBlTJvbWjCThHWZj9EvHK70Ff50/tYj2J/fvBY6JtFVwRuazHN2E7M9BA=="
+      "integrity": "sha512-S/TQAZJO+D3m9xeN1WTI8dLKBBiRgXBlTJvbWjCThHWZj9EvHK70Ff50/tYj2J/fvBY6JtFVwRuazHN2E7M9BA==",
+      "dev": true
     },
     "regenerator-transform": {
       "version": "0.14.0",
@@ -7185,6 +7067,7 @@
       "version": "1.11.0",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.11.0.tgz",
       "integrity": "sha512-WL2pBDjqT6pGUNSUzMw00o4T7If+z4H2x3Gz893WoUQ5KW8Vr9txp00ykiP16VBaZF5+j/OcXJHZ9+PCvdiDKw==",
+      "dev": true,
       "requires": {
         "path-parse": "^1.0.6"
       }
@@ -7192,7 +7075,8 @@
     "resolve-from": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-3.0.0.tgz",
-      "integrity": "sha1-six699nWiBvItuZTM17rywoYh0g="
+      "integrity": "sha1-six699nWiBvItuZTM17rywoYh0g=",
+      "dev": true
     },
     "resolve-url": {
       "version": "0.2.1",
@@ -7364,7 +7248,8 @@
     "safe-buffer": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+      "dev": true
     },
     "safe-regex": {
       "version": "1.1.0",
@@ -7731,7 +7616,8 @@
     "source-map": {
       "version": "0.5.7",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-      "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
+      "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
+      "dev": true
     },
     "source-map-resolve": {
       "version": "0.5.2",
@@ -7820,7 +7706,8 @@
     "sprintf-js": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
-      "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw="
+      "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
+      "dev": true
     },
     "sshpk": {
       "version": "1.16.1",
@@ -8103,7 +7990,8 @@
     "to-fast-properties": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
-      "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4="
+      "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=",
+      "dev": true
     },
     "to-object-path": {
       "version": "0.3.0",
diff --git a/package.json b/package.json
index 05326e74..bf2ec28b 100644
--- a/package.json
+++ b/package.json
@@ -6,8 +6,6 @@
   "main": "dist/ReactGraph.js",
   "private": true,
   "dependencies": {
-    "@emotion/core": "^10.0.14",
-    "@emotion/styled": "^10.0.14",
     "d3-selection": "^1.4.0",
     "d3-zoom": "^1.7.3",
     "lodash.isequal": "^4.5.0",
diff --git a/src/EdgeRenderer/Edge.js b/src/EdgeRenderer/Edge.js
index cdeacce1..98a3c628 100644
--- a/src/EdgeRenderer/Edge.js
+++ b/src/EdgeRenderer/Edge.js
@@ -1,11 +1,4 @@
 import React from 'react';
-import styled from '@emotion/styled';
-
-const Path = styled.path`
-  fill: none;
-  stroke: #333;
-  stroke-width: 2;
-`;
 
 export default (props) => {
   const { targetNode, sourceNode } = props;
@@ -17,7 +10,8 @@ export default (props) => {
   const targetY = targetNode.position.y;
 
   return (
-    <Path
+    <path
+      className="react-graph__edge"
       d={`M ${sourceX},${sourceY}L ${targetX},${targetY}`}
     />
   );
diff --git a/src/EdgeRenderer/index.js b/src/EdgeRenderer/index.js
index a27dad95..c9d4931d 100644
--- a/src/EdgeRenderer/index.js
+++ b/src/EdgeRenderer/index.js
@@ -38,7 +38,7 @@ class EdgeRenderer extends PureComponent {
           <svg
             width={width}
             height={height}
-            style={{ pointerEvents: 'none' }}
+            className="react-graph__edges"
           >
             <g
               transform={`translate(${transform.x},${transform.y}) scale(${transform.k})`}
diff --git a/src/GraphContext/index.js b/src/GraphContext/index.js
index ec2c00f9..d1c4da3a 100644
--- a/src/GraphContext/index.js
+++ b/src/GraphContext/index.js
@@ -25,11 +25,20 @@ export const Provider = (props) => {
   const [transform, setTransform] = useState({ x: 0, y: 0, k: 1 });
 
   useEffect(() => {
-    const nodesChanged = !isEqual(nodes, props.nodes);
+    const nextNodes = props.nodes.map(propNode => {
+      const existingNode = nodes.find(n => n.data.id === propNode.data.id);
+
+      if (existingNode) {
+        return Object.assign(propNode, existingNode);
+      }
+      return propNode;
+    });
+
+    const nodesChanged = !isEqual(nodes, nextNodes);
     const edgesChanged = !isEqual(edges, props.edges);
 
     if (nodesChanged) {
-      setNodes(props.nodes);
+      setNodes(nextNodes);
     }
 
     if (edgesChanged) {
diff --git a/src/NodeRenderer/Handle/index.js b/src/NodeRenderer/Handle/index.js
index 43d2de9c..fe3fc752 100644
--- a/src/NodeRenderer/Handle/index.js
+++ b/src/NodeRenderer/Handle/index.js
@@ -1,14 +1,3 @@
 import React from 'react';
-import styled from '@emotion/styled';
 
-const Handle = styled.div`
-  position: absolute;
-  width: 12px;
-  height: 12px;
-  transform: translate(-50%, -50%);
-  background: #222;
-  left: 50%;
-  border-radius: 50%;
-`;
-
-export default props => <Handle {...props} />;
+export default props => <div className="react-graph__handle" {...props} />;
diff --git a/src/NodeRenderer/NodeTypes/DefaultNode.js b/src/NodeRenderer/NodeTypes/DefaultNode.js
index 6c73b8f7..b97e713e 100644
--- a/src/NodeRenderer/NodeTypes/DefaultNode.js
+++ b/src/NodeRenderer/NodeTypes/DefaultNode.js
@@ -1,18 +1,12 @@
 import React from 'react';
-import styled from '@emotion/styled';
 
 import wrapNode from './wrapNode';
 import Handle from '../Handle';
 
-const Wrapper = styled.div`
-  background: #ff6060;
-  padding: 10px;
-`;
-
 export default wrapNode(({ data, style }) => (
-  <Wrapper style={style}>
+  <div style={{ background: '#ff6060', padding: '10px', ...style }}>
     <Handle style={{ top: 0 }} />
     {data.label}
     <Handle style={{ bottom: 0, top: 'auto', transform: 'translate(-50%, 50%)' }} />
-  </Wrapper>
+  </div>
 ));
diff --git a/src/NodeRenderer/NodeTypes/InputNode.js b/src/NodeRenderer/NodeTypes/InputNode.js
index e22c06f4..da266483 100644
--- a/src/NodeRenderer/NodeTypes/InputNode.js
+++ b/src/NodeRenderer/NodeTypes/InputNode.js
@@ -1,17 +1,11 @@
 import React from 'react';
-import styled from '@emotion/styled';
 
 import wrapNode from './wrapNode';
 import Handle from '../Handle';
 
-const Wrapper = styled.div`
-  background: #9999ff;
-  padding: 10px;
-`;
-
 export default wrapNode(({ data, style }) => (
-  <Wrapper style={style}>
+  <div style={{ background: '#9999ff', padding: '10px', ...style }}>
     {data.label}
     <Handle style={{ bottom: 0, top: 'auto', transform: 'translate(-50%, 50%)' }} />
-  </Wrapper>
+  </div>
 ));
diff --git a/src/NodeRenderer/NodeTypes/OutputNode.js b/src/NodeRenderer/NodeTypes/OutputNode.js
index 9eeef01d..c8e4b629 100644
--- a/src/NodeRenderer/NodeTypes/OutputNode.js
+++ b/src/NodeRenderer/NodeTypes/OutputNode.js
@@ -1,17 +1,11 @@
 import React from 'react';
-import styled from '@emotion/styled';
 
 import wrapNode from './wrapNode';
 import Handle from '../Handle';
 
-const Wrapper = styled.div`
-  background: #55ff99;
-  padding: 10px;
-`;
-
 export default wrapNode(({ data, style }) => (
-  <Wrapper style={style}>
+  <div style={{ background: '#55ff99', padding: '10px', ...style }}>
     <Handle style={{ top: 0 }} />
     {data.label}
-  </Wrapper>
+  </div>
 ));
diff --git a/src/NodeRenderer/NodeTypes/wrapNode.js b/src/NodeRenderer/NodeTypes/wrapNode.js
index b89b98a2..6c8b72bc 100644
--- a/src/NodeRenderer/NodeTypes/wrapNode.js
+++ b/src/NodeRenderer/NodeTypes/wrapNode.js
@@ -1,28 +1,8 @@
 import React, { useEffect, useRef, useContext } from 'react';
-import styled from '@emotion/styled';
 import ReactDraggable from 'react-draggable';
 
 import { GraphContext } from '../../GraphContext';
 
-const NodeWrapper = styled.div`
-  position: absolute;
-  width: 150px;
-  color: #222;
-  font-family: sans-serif;
-  font-size: 12px;
-  text-align: center;
-  cursor: grab;
-  border: 1px solid #ddd;
-  border-radius: 2px;
-  user-select: none;
-  pointer-events: all;
-  transform-origin: 0 0;
-
-  &:hover {
-    box-shadow: 0 1px 5px 2px rgba(0, 0, 0, 0.08);
-  }
-`;
-
 export default NodeComponent => (props) => {
   const { position, data, onNodeClick } = props;
   const { id, __width, __height } = data;
@@ -62,15 +42,15 @@ export default NodeComponent => (props) => {
       }}
       scale={k}
     >
-      <NodeWrapper
-        className="node"
+      <div
+        className="react-graph__nodewrap"
         ref={nodeElement}
         style={{ transform: `translate(${position.x}px,${position.y}px)` }}
         onClick={() => onNodeClick(data)}
         // style={{ transform: `translate(${nodePosition.x}px,${nodePosition.y}px) scale(${k})` }}
       >
         <NodeComponent {...props} />
-      </NodeWrapper>
+      </div>
     </ReactDraggable.DraggableCore>
   );
 };
diff --git a/src/NodeRenderer/index.js b/src/NodeRenderer/index.js
index e3e3e509..69d4cc3f 100644
--- a/src/NodeRenderer/index.js
+++ b/src/NodeRenderer/index.js
@@ -1,20 +1,10 @@
 import React, { PureComponent } from 'react';
-import styled from '@emotion/styled';
 
 import { Consumer } from '../GraphContext';
 import DefaultNode from './NodeTypes/DefaultNode';
 import InputNode from './NodeTypes/InputNode';
 import OutputNode from './NodeTypes/OutputNode';
 
-const Nodes = styled.div`
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  z-index: 2;
-  pointer-events: none;
-  transform-origin: 0 0;
-`;
-
 class NodeRenderer extends PureComponent {
 
   renderNode(d, onNodeClick) {
@@ -36,13 +26,14 @@ class NodeRenderer extends PureComponent {
     return (
       <Consumer>
         {({ transform, nodes, onNodeClick }) => (
-          <Nodes
+          <div
+            className="react-graph__nodes"
             style={{
               transform: `translate(${transform.x}px,${transform.y}px) scale(${transform.k})`
             }}
           >
             {nodes.map(d => this.renderNode(d, onNodeClick))}
-          </Nodes>
+          </div>
         )}
       </Consumer>
     );
diff --git a/src/style.css b/src/style.css
index 4c3a94cf..acdb9ecc 100644
--- a/src/style.css
+++ b/src/style.css
@@ -17,4 +17,52 @@
   position: absolute;
   top: 0;
   left: 0;
+}
+
+.react-graph__edges {
+  pointer-events: none;
+}
+
+.react-graph__edge {
+  fill: none;
+  stroke: #333;
+  stroke-width: 2;
+}
+
+.react-graph__nodes {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  z-index: 2;
+  pointer-events: none;
+  transform-origin: 0 0;
+}
+
+.react-graph__nodewrap {
+  position: absolute;
+  width: 150px;
+  color: #222;
+  font-family: sans-serif;
+  font-size: 12px;
+  text-align: center;
+  cursor: grab;
+  border: 1px solid #ddd;
+  border-radius: 2px;
+  user-select: none;
+  pointer-events: all;
+  transform-origin: 0 0;
+}
+
+.react-graph__nodewrap:hover {
+  box-shadow: 0 1px 5px 2px rgba(0, 0, 0, 0.08);
+}
+
+.react-graph__handle {
+  position: absolute;
+  width: 12px;
+  height: 12px;
+  transform: translate(-50%, -50%);
+  background: #222;
+  left: 50%;
+  border-radius: 50%;
 }
\ No newline at end of file