alighasami/xyflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(deps): remove emotion

Browse Source
This commit is contained in:
moklick
2019-07-15 18:45:33 +02:00
parent f903f91941
commit 5b9abd8c9e
13 changed files with 124 additions and 245 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
example/SimpleGraph.js
View File

@@ -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"

200
package-lock.json generated
View File

@@ -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",

2
package.json
View File

@@ -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",

10
src/EdgeRenderer/Edge.js
View File

@@ -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}`}
/>
);

2
src/EdgeRenderer/index.js
View File

@@ -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})`}

13
src/GraphContext/index.js
View File

@@ -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) {

13
src/NodeRenderer/Handle/index.js
View File

@@ -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} />;

10
src/NodeRenderer/NodeTypes/DefaultNode.js
View File

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

10
src/NodeRenderer/NodeTypes/InputNode.js
View File

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

10
src/NodeRenderer/NodeTypes/OutputNode.js
View File

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

26
src/NodeRenderer/NodeTypes/wrapNode.js
View File

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

15
src/NodeRenderer/index.js
View File

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

48
src/style.css
View File

@@ -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%;
}