feat(renderer): add onChange
This commit is contained in:
moklick
Vendored
+6
@@ -0,0 +1,6 @@
|
||||
.style_react-graph__24Zk8 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
Vendored
+34508
File diff suppressed because it is too large
Load Diff
Vendored
+6
@@ -0,0 +1,6 @@
|
||||
.style_react-graph__24Zk8 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
Vendored
+1855
-1854
File diff suppressed because it is too large
Load Diff
@@ -1,5 +1,7 @@
|
||||
import React, { PureComponent } from 'react';
|
||||
import Graph from '../src';
|
||||
|
||||
// import Graph from '../src';
|
||||
import Graph from '../dist/ReactGraph';
|
||||
|
||||
class App extends PureComponent {
|
||||
constructor() {
|
||||
@@ -23,14 +25,14 @@ class App extends PureComponent {
|
||||
onLoad(graphInstance) {
|
||||
this.graphInstance = graphInstance;
|
||||
|
||||
console.log('graph loaded:', graphInstance);
|
||||
console.log('graph loaded:', this.graphInstance);
|
||||
}
|
||||
|
||||
onMove() {
|
||||
if (!this.graphInstance) {
|
||||
return false;
|
||||
}
|
||||
console.log('graph moved');
|
||||
console.log('graph moved', this.graphInstance.nodes);
|
||||
}
|
||||
|
||||
onFitView() {
|
||||
|
||||
Generated
+209
-1
@@ -1405,6 +1405,29 @@
|
||||
"integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==",
|
||||
"dev": true
|
||||
},
|
||||
"autoprefixer": {
|
||||
"version": "9.6.1",
|
||||
"resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.6.1.tgz",
|
||||
"integrity": "sha512-aVo5WxR3VyvyJxcJC3h4FKfwCQvQWb1tSI5VHNibddCVWrcD1NvlxEweg3TSgiPztMnWfjpy2FURKA2kvDE+Tw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"browserslist": "^4.6.3",
|
||||
"caniuse-lite": "^1.0.30000980",
|
||||
"chalk": "^2.4.2",
|
||||
"normalize-range": "^0.1.2",
|
||||
"num2fraction": "^1.2.2",
|
||||
"postcss": "^7.0.17",
|
||||
"postcss-value-parser": "^4.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"postcss-value-parser": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.0.0.tgz",
|
||||
"integrity": "sha512-ESPktioptiSUchCKgggAkzdmkgzKfmp0EU8jXH+5kbIUB+unr0Y4CY9SRMvibuvYUBjNh1ACLbxqYNpdTQOteQ==",
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"aws-sign2": {
|
||||
"version": "0.7.0",
|
||||
"resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.7.0.tgz",
|
||||
@@ -1744,6 +1767,12 @@
|
||||
"tweetnacl": "^0.14.3"
|
||||
}
|
||||
},
|
||||
"big.js": {
|
||||
"version": "3.2.0",
|
||||
"resolved": "https://registry.npmjs.org/big.js/-/big.js-3.2.0.tgz",
|
||||
"integrity": "sha512-+hN/Zh2D08Mx65pZ/4g5bsmNiZUuChDiQfTUQ7qJr4/kuopCr88xZsAXv6mBoZEsUI4OuGHlX59qE94K2mMW8Q==",
|
||||
"dev": true
|
||||
},
|
||||
"binary-extensions": {
|
||||
"version": "1.13.1",
|
||||
"resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-1.13.1.tgz",
|
||||
@@ -2233,6 +2262,23 @@
|
||||
"typedarray": "^0.0.6"
|
||||
}
|
||||
},
|
||||
"concat-with-sourcemaps": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/concat-with-sourcemaps/-/concat-with-sourcemaps-1.1.0.tgz",
|
||||
"integrity": "sha512-4gEjHJFT9e+2W/77h/DS5SGUgwDaOwprX8L/gl5+3ixnzkVJJsZWDSelmN3Oilw3LNDZjZV0yqH1hLG3k6nghg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"source-map": "^0.6.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"source-map": {
|
||||
"version": "0.6.1",
|
||||
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
|
||||
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"config-chain": {
|
||||
"version": "1.1.12",
|
||||
"resolved": "https://registry.npmjs.org/config-chain/-/config-chain-1.1.12.tgz",
|
||||
@@ -3071,6 +3117,12 @@
|
||||
"minimalistic-crypto-utils": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"emojis-list": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-2.1.0.tgz",
|
||||
"integrity": "sha1-TapNnbAPmBmIDHn6RXrlsJof04k=",
|
||||
"dev": true
|
||||
},
|
||||
"encodeurl": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
|
||||
@@ -4064,6 +4116,15 @@
|
||||
"integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
|
||||
"dev": true
|
||||
},
|
||||
"generic-names": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/generic-names/-/generic-names-1.0.3.tgz",
|
||||
"integrity": "sha1-LXhqEhruUIh2eWk56OO/+DbCCRc=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"loader-utils": "^0.2.16"
|
||||
}
|
||||
},
|
||||
"get-port": {
|
||||
"version": "3.2.0",
|
||||
"resolved": "https://registry.npmjs.org/get-port/-/get-port-3.2.0.tgz",
|
||||
@@ -4456,6 +4517,15 @@
|
||||
"integrity": "sha512-4vf7I2LYV/HaWerSo3XmlMkp5eZ83i+/CDluXi/IGTs/O1sejBNhTtnxzmRZfvOUqj7lZjqHkeTvpgSFDlWZTg==",
|
||||
"dev": true
|
||||
},
|
||||
"import-cwd": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/import-cwd/-/import-cwd-2.1.0.tgz",
|
||||
"integrity": "sha1-qmzzbnInYShcs3HsZRn1PiQ1sKk=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"import-from": "^2.1.0"
|
||||
}
|
||||
},
|
||||
"import-fresh": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-2.0.0.tgz",
|
||||
@@ -4465,6 +4535,15 @@
|
||||
"resolve-from": "^3.0.0"
|
||||
}
|
||||
},
|
||||
"import-from": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/import-from/-/import-from-2.1.0.tgz",
|
||||
"integrity": "sha1-M1238qev/VOqpHHUuAId7ja387E=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"resolve-from": "^3.0.0"
|
||||
}
|
||||
},
|
||||
"indexes-of": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/indexes-of/-/indexes-of-1.0.1.tgz",
|
||||
@@ -4992,6 +5071,26 @@
|
||||
"ws": "^1.1.5"
|
||||
}
|
||||
},
|
||||
"loader-utils": {
|
||||
"version": "0.2.17",
|
||||
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-0.2.17.tgz",
|
||||
"integrity": "sha1-+G5jdNQyBabmxg6RlvF8Apm/s0g=",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"big.js": "^3.1.3",
|
||||
"emojis-list": "^2.0.0",
|
||||
"json5": "^0.5.0",
|
||||
"object-assign": "^4.0.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"json5": {
|
||||
"version": "0.5.1",
|
||||
"resolved": "https://registry.npmjs.org/json5/-/json5-0.5.1.tgz",
|
||||
"integrity": "sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE=",
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"locate-path": {
|
||||
"version": "5.0.0",
|
||||
"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
|
||||
@@ -5006,6 +5105,12 @@
|
||||
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.14.tgz",
|
||||
"integrity": "sha512-mmKYbW3GLuJeX+iGP+Y7Gp1AiGHGbXHCOh/jZmrawMmsE7MS4znI3RL2FsjbqOyMayHInjOeykW7PEajUk1/xw=="
|
||||
},
|
||||
"lodash.camelcase": {
|
||||
"version": "4.3.0",
|
||||
"resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",
|
||||
"integrity": "sha1-soqmKIorn8ZRA1x3EfZathkDMaY=",
|
||||
"dev": true
|
||||
},
|
||||
"lodash.clone": {
|
||||
"version": "4.5.0",
|
||||
"resolved": "https://registry.npmjs.org/lodash.clone/-/lodash.clone-4.5.0.tgz",
|
||||
@@ -5373,6 +5478,12 @@
|
||||
"integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
|
||||
"dev": true
|
||||
},
|
||||
"normalize-range": {
|
||||
"version": "0.1.2",
|
||||
"resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
|
||||
"integrity": "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=",
|
||||
"dev": true
|
||||
},
|
||||
"normalize-url": {
|
||||
"version": "3.3.0",
|
||||
"resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-3.3.0.tgz",
|
||||
@@ -5397,6 +5508,12 @@
|
||||
"boolbase": "~1.0.0"
|
||||
}
|
||||
},
|
||||
"num2fraction": {
|
||||
"version": "1.2.2",
|
||||
"resolved": "https://registry.npmjs.org/num2fraction/-/num2fraction-1.2.2.tgz",
|
||||
"integrity": "sha1-b2gragJ6Tp3fpFZM0lidHU5mnt4=",
|
||||
"dev": true
|
||||
},
|
||||
"nwsapi": {
|
||||
"version": "2.1.4",
|
||||
"resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.1.4.tgz",
|
||||
@@ -5649,6 +5766,12 @@
|
||||
"p-limit": "^2.2.0"
|
||||
}
|
||||
},
|
||||
"p-queue": {
|
||||
"version": "2.4.2",
|
||||
"resolved": "https://registry.npmjs.org/p-queue/-/p-queue-2.4.2.tgz",
|
||||
"integrity": "sha512-n8/y+yDJwBjoLQe1GSJbbaYQLTI7QHNZI2+rpmCDbe++WLf9HC3gf6iqj5yfPAV71W4UF3ql5W1+UBPXoXTxng==",
|
||||
"dev": true
|
||||
},
|
||||
"p-try": {
|
||||
"version": "2.2.0",
|
||||
"resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
|
||||
@@ -6045,6 +6168,12 @@
|
||||
"integrity": "sha1-GN4vl+S/epVRrXURlCtUlverpmA=",
|
||||
"dev": true
|
||||
},
|
||||
"pify": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
|
||||
"integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=",
|
||||
"dev": true
|
||||
},
|
||||
"pkg-dir": {
|
||||
"version": "4.2.0",
|
||||
"resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
|
||||
@@ -6174,6 +6303,16 @@
|
||||
"postcss": "^7.0.0"
|
||||
}
|
||||
},
|
||||
"postcss-load-config": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-2.1.0.tgz",
|
||||
"integrity": "sha512-4pV3JJVPLd5+RueiVVB+gFOAa7GWc25XQcMp86Zexzke69mKf6Nx9LRcQywdz7yZI9n1udOxmLuAwTBypypF8Q==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"cosmiconfig": "^5.0.0",
|
||||
"import-cwd": "^2.0.0"
|
||||
}
|
||||
},
|
||||
"postcss-merge-longhand": {
|
||||
"version": "4.0.11",
|
||||
"resolved": "https://registry.npmjs.org/postcss-merge-longhand/-/postcss-merge-longhand-4.0.11.tgz",
|
||||
@@ -6274,6 +6413,19 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"postcss-modules": {
|
||||
"version": "1.4.1",
|
||||
"resolved": "https://registry.npmjs.org/postcss-modules/-/postcss-modules-1.4.1.tgz",
|
||||
"integrity": "sha512-btTrbK+Xc3NBuYF8TPBjCMRSp5h6NoQ1iVZ6WiDQENIze6KIYCSf0+UFQuV3yJ7gRHA+4AAtF8i2jRvUpbBMMg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"css-modules-loader-core": "^1.1.0",
|
||||
"generic-names": "^1.0.3",
|
||||
"lodash.camelcase": "^4.3.0",
|
||||
"postcss": "^7.0.1",
|
||||
"string-hash": "^1.1.1"
|
||||
}
|
||||
},
|
||||
"postcss-modules-extract-imports": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-1.1.0.tgz",
|
||||
@@ -6621,6 +6773,12 @@
|
||||
"integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
|
||||
"dev": true
|
||||
},
|
||||
"promise.series": {
|
||||
"version": "0.2.0",
|
||||
"resolved": "https://registry.npmjs.org/promise.series/-/promise.series-0.2.0.tgz",
|
||||
"integrity": "sha1-LMfr6Vn8OmYZwEq029yeRS2GS70=",
|
||||
"dev": true
|
||||
},
|
||||
"prop-types": {
|
||||
"version": "15.7.2",
|
||||
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz",
|
||||
@@ -6739,6 +6897,17 @@
|
||||
"integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==",
|
||||
"dev": true
|
||||
},
|
||||
"react": {
|
||||
"version": "16.8.6",
|
||||
"resolved": "https://registry.npmjs.org/react/-/react-16.8.6.tgz",
|
||||
"integrity": "sha512-pC0uMkhLaHm11ZSJULfOBqV4tIZkx87ZLvbbQYunNixAAvjnC+snJCg0XQXn9VIsttVsbZP/H/ewzgsd5fxKXw==",
|
||||
"requires": {
|
||||
"loose-envify": "^1.1.0",
|
||||
"object-assign": "^4.1.1",
|
||||
"prop-types": "^15.6.2",
|
||||
"scheduler": "^0.13.6"
|
||||
}
|
||||
},
|
||||
"react-dom": {
|
||||
"version": "16.8.6",
|
||||
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.8.6.tgz",
|
||||
@@ -7006,6 +7175,12 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"reserved-words": {
|
||||
"version": "0.1.2",
|
||||
"resolved": "https://registry.npmjs.org/reserved-words/-/reserved-words-0.1.2.tgz",
|
||||
"integrity": "sha1-AKCUD5jNUBrqqsMWQR2a3FKzGrE=",
|
||||
"dev": true
|
||||
},
|
||||
"resolve": {
|
||||
"version": "1.11.0",
|
||||
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.11.0.tgz",
|
||||
@@ -7139,6 +7314,28 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"rollup-plugin-postcss": {
|
||||
"version": "2.0.3",
|
||||
"resolved": "https://registry.npmjs.org/rollup-plugin-postcss/-/rollup-plugin-postcss-2.0.3.tgz",
|
||||
"integrity": "sha512-d12oKl6za/GGXmlytzVPzzTdPCKgti/Kq2kNhtfm5vv9hkNbyrTvizMBm6zZ5rRWX/sIWl3znjIJ8xy6Hofoeg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"chalk": "^2.4.2",
|
||||
"concat-with-sourcemaps": "^1.0.5",
|
||||
"cssnano": "^4.1.8",
|
||||
"import-cwd": "^2.1.0",
|
||||
"p-queue": "^2.4.2",
|
||||
"pify": "^3.0.0",
|
||||
"postcss": "^7.0.14",
|
||||
"postcss-load-config": "^2.0.0",
|
||||
"postcss-modules": "^1.4.1",
|
||||
"promise.series": "^0.2.0",
|
||||
"reserved-words": "^0.1.2",
|
||||
"resolve": "^1.5.0",
|
||||
"rollup-pluginutils": "^2.0.1",
|
||||
"style-inject": "^0.3.0"
|
||||
}
|
||||
},
|
||||
"rollup-plugin-serve": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/rollup-plugin-serve/-/rollup-plugin-serve-1.0.1.tgz",
|
||||
@@ -7212,7 +7409,6 @@
|
||||
"version": "0.13.6",
|
||||
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.13.6.tgz",
|
||||
"integrity": "sha512-IWnObHt413ucAYKsD9J1QShUKkbKLQQHdxRyw73sw4FN26iWr3DY/H34xGPe4nmL1DwXyWmSWmMrA9TfQbE/XQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"loose-envify": "^1.1.0",
|
||||
"object-assign": "^4.1.1"
|
||||
@@ -7747,6 +7943,12 @@
|
||||
"xtend": "^4.0.0"
|
||||
}
|
||||
},
|
||||
"string-hash": {
|
||||
"version": "1.1.3",
|
||||
"resolved": "https://registry.npmjs.org/string-hash/-/string-hash-1.1.3.tgz",
|
||||
"integrity": "sha1-6Kr8CsGFW0Zmkp7X3RJ1311sgRs=",
|
||||
"dev": true
|
||||
},
|
||||
"string_decoder": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
|
||||
@@ -7771,6 +7973,12 @@
|
||||
"integrity": "sha1-u0P/VZim6wXYm1n80SnJgzE2Br8=",
|
||||
"dev": true
|
||||
},
|
||||
"style-inject": {
|
||||
"version": "0.3.0",
|
||||
"resolved": "https://registry.npmjs.org/style-inject/-/style-inject-0.3.0.tgz",
|
||||
"integrity": "sha512-IezA2qp+vcdlhJaVm5SOdPPTUu0FCEqfNSli2vRuSIBbu5Nq5UvygTk/VzeCqfLz2Atj3dVII5QBKGZRZ0edzw==",
|
||||
"dev": true
|
||||
},
|
||||
"stylehacks": {
|
||||
"version": "4.0.3",
|
||||
"resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-4.0.3.tgz",
|
||||
|
||||
+6
-3
@@ -2,8 +2,8 @@
|
||||
"name": "react-graph",
|
||||
"version": "1.0.0",
|
||||
"module": "dist/ReactGraph.esm.js",
|
||||
"browser": "dist/ReactGraph.umd.js",
|
||||
"main": "dist/ReactGraph.umd.js",
|
||||
"browser": "dist/ReactGraph.js",
|
||||
"main": "dist/ReactGraph.js",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@emotion/core": "^10.0.14",
|
||||
@@ -11,6 +11,7 @@
|
||||
"d3-selection": "^1.4.0",
|
||||
"d3-zoom": "^1.7.3",
|
||||
"lodash.isequal": "^4.5.0",
|
||||
"react": "^16.8.6",
|
||||
"react-draggable": "^3.3.0",
|
||||
"react-sizeme": "^2.6.7"
|
||||
},
|
||||
@@ -18,6 +19,7 @@
|
||||
"@babel/core": "^7.5.4",
|
||||
"@babel/preset-env": "^7.5.4",
|
||||
"@babel/preset-react": "^7.0.0",
|
||||
"autoprefixer": "^9.6.1",
|
||||
"babel-preset-react-app": "^9.0.0",
|
||||
"husky": "^3.0.0",
|
||||
"parcel-bundler": "^1.12.3",
|
||||
@@ -27,6 +29,7 @@
|
||||
"rollup-plugin-commonjs": "^10.0.0",
|
||||
"rollup-plugin-livereload": "^1.0.1",
|
||||
"rollup-plugin-node-resolve": "^5.1.0",
|
||||
"rollup-plugin-postcss": "^2.0.3",
|
||||
"rollup-plugin-serve": "^1.0.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
@@ -39,7 +42,7 @@
|
||||
"dev": "parcel example/index.html -d example/build"
|
||||
},
|
||||
"husky": {
|
||||
"hooks" : {
|
||||
"hooks": {
|
||||
"pre-push": "npm run build"
|
||||
}
|
||||
},
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
import resolve from 'rollup-plugin-node-resolve';
|
||||
import commonjs from 'rollup-plugin-commonjs';
|
||||
import babel from 'rollup-plugin-babel';
|
||||
import postcss from 'rollup-plugin-postcss';
|
||||
import autoprefixer from 'autoprefixer';
|
||||
|
||||
import pkg from './package.json';
|
||||
|
||||
@@ -18,6 +20,9 @@ export default [{
|
||||
}
|
||||
},
|
||||
plugins: [
|
||||
postcss({
|
||||
plugins: [autoprefixer()]
|
||||
}),
|
||||
resolve(),
|
||||
babel({
|
||||
exclude: 'node_modules/**'
|
||||
|
||||
@@ -88,6 +88,10 @@ export const Provider = (props) => {
|
||||
setHeight(size.height);
|
||||
};
|
||||
|
||||
const getNodes = () => {
|
||||
return nodes;
|
||||
}
|
||||
|
||||
const graphContext = {
|
||||
width,
|
||||
height,
|
||||
@@ -96,6 +100,7 @@ export const Provider = (props) => {
|
||||
initD3ZoomState,
|
||||
nodes,
|
||||
setNodes,
|
||||
getNodes,
|
||||
edges,
|
||||
setEdges,
|
||||
updateNodeData,
|
||||
|
||||
+10
-18
@@ -1,5 +1,4 @@
|
||||
import React, { useEffect, useContext, useRef } from 'react';
|
||||
import styled from '@emotion/styled';
|
||||
import * as d3Zoom from 'd3-zoom';
|
||||
import { select, event } from 'd3-selection';
|
||||
import ReactSizeMe from 'react-sizeme';
|
||||
@@ -8,20 +7,6 @@ import { GraphContext } from '../GraphContext';
|
||||
import NodeRenderer from '../NodeRenderer';
|
||||
import EdgeRenderer from '../EdgeRenderer';
|
||||
|
||||
const GraphViewWrapper = styled.div`
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
`;
|
||||
|
||||
const ZoomNode = styled.div`
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
`;
|
||||
|
||||
const GraphView = (props) => {
|
||||
const zoomNode = useRef(null);
|
||||
const graphContext = useContext(GraphContext);
|
||||
@@ -59,12 +44,19 @@ const GraphView = (props) => {
|
||||
}
|
||||
}, [graphContext.d3ZoomState.initialised]);
|
||||
|
||||
useEffect(() => {
|
||||
props.onChange({
|
||||
nodes: graphContext.nodes,
|
||||
edges: graphContext.edges,
|
||||
});
|
||||
})
|
||||
|
||||
return (
|
||||
<GraphViewWrapper>
|
||||
<div className="react-graph__renderer">
|
||||
<NodeRenderer />
|
||||
<EdgeRenderer width={graphContext.width} height={graphContext.height} />
|
||||
<ZoomNode ref={zoomNode} />
|
||||
</GraphViewWrapper>
|
||||
<ZoomNode className="react-graph__zoomnode" ref={zoomNode} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
+5
-11
@@ -1,17 +1,10 @@
|
||||
import React, { PureComponent } from 'react';
|
||||
import isEqual from 'lodash.isequal';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
import { separateElements } from './graph-utils';
|
||||
import GraphView from './GraphView';
|
||||
import { Provider } from './GraphContext';
|
||||
|
||||
const GraphWrapper = styled.div`
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
`;
|
||||
import './style.css';
|
||||
|
||||
class ReactGraph extends PureComponent {
|
||||
render() {
|
||||
@@ -20,12 +13,12 @@ class ReactGraph extends PureComponent {
|
||||
} = this.props;
|
||||
|
||||
return (
|
||||
<GraphWrapper style={style}>
|
||||
<div style={style} className="react-graph">
|
||||
<Provider {...separateElements(elements)} onNodeClick={onNodeClick}>
|
||||
<GraphView onLoad={onLoad} onMove={onMove} />
|
||||
{children}
|
||||
</Provider>
|
||||
</GraphWrapper>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -33,7 +26,8 @@ class ReactGraph extends PureComponent {
|
||||
ReactGraph.defaultProps = {
|
||||
onNodeClick: () => {},
|
||||
onLoad: () => {},
|
||||
onMove: () => {}
|
||||
onMove: () => {},
|
||||
onChange: () => {}
|
||||
};
|
||||
|
||||
export default ReactGraph;
|
||||
|
||||
@@ -0,0 +1,20 @@
|
||||
.react-graph {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.react-graph__renderer {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.react-graph__zoomnode {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
Reference in New Issue
Block a user