merge(connectionLine): wbkd/react-flow:main
This commit is contained in:
Clément Loridan
@@ -0,0 +1,30 @@
|
||||
describe('DragHandle Flow Rendering', () => {
|
||||
before(() => {
|
||||
cy.visit('/draghandle');
|
||||
});
|
||||
|
||||
it('renders a flow with a node', () => {
|
||||
cy.get('.react-flow__renderer');
|
||||
cy.get('.react-flow__node').should('have.length', 1);
|
||||
});
|
||||
|
||||
it('tries to drag a node', () => {
|
||||
const $nodeElement = Cypress.$('.react-flow__node:first');
|
||||
const styleBeforeDrag = $nodeElement.css('transform');
|
||||
|
||||
cy.drag('.react-flow__node:first', { x: 500, y: 500 }).then(() => {
|
||||
const styleAfterDrag = $nodeElement.css('transform');
|
||||
expect(styleBeforeDrag).to.be.equal(styleAfterDrag);
|
||||
});
|
||||
});
|
||||
|
||||
it('drags a node', () => {
|
||||
const $nodeElement = Cypress.$('.react-flow__node:first');
|
||||
const styleBeforeDrag = $nodeElement.css('transform');
|
||||
|
||||
cy.drag('.custom-drag-handle:first', { x: 500, y: 500 }).then(() => {
|
||||
const styleAfterDrag = $nodeElement.css('transform');
|
||||
expect(styleBeforeDrag).to.not.equal(styleAfterDrag);
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -21,3 +21,5 @@
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
/src_oldapi
|
||||
Generated
+180
-165
@@ -9,73 +9,76 @@
|
||||
"version": "0.1.0",
|
||||
"dependencies": {
|
||||
"dagre": "^0.8.5",
|
||||
"localforage": "^1.9.0",
|
||||
"localforage": "^1.10.0",
|
||||
"react": "file:../node_modules/react",
|
||||
"react-dom": "file:../node_modules/react-dom",
|
||||
"react-flow-renderer": "file:../",
|
||||
"react-router-dom": "^5.2.0",
|
||||
"react-router-dom": "^5.3.0",
|
||||
"react-scripts": "4.0.3",
|
||||
"typescript": "^4.3.4"
|
||||
"typescript": "^4.4.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/dagre": "^0.7.44",
|
||||
"@types/dagre": "^0.7.46",
|
||||
"@types/localforage": "0.0.34",
|
||||
"@types/react": "^17.0.11",
|
||||
"@types/react-dom": "^17.0.8",
|
||||
"@types/react-router-dom": "^5.1.7"
|
||||
"@types/react": "^17.0.27",
|
||||
"@types/react-dom": "^17.0.9",
|
||||
"@types/react-router-dom": "^5.3.0"
|
||||
}
|
||||
},
|
||||
"..": {
|
||||
"name": "react-flow-renderer",
|
||||
"version": "9.6.1",
|
||||
"version": "9.6.8",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.14.6",
|
||||
"@types/d3": "^6.7.1",
|
||||
"@types/react-redux": "^7.1.16",
|
||||
"@babel/runtime": "^7.15.4",
|
||||
"@types/d3": "^7.0.0",
|
||||
"@types/react-redux": "^7.1.18",
|
||||
"classcat": "^5.0.3",
|
||||
"d3-selection": "^3.0.0",
|
||||
"d3-zoom": "^3.0.0",
|
||||
"fast-deep-equal": "^3.1.3",
|
||||
"react-draggable": "^4.4.3",
|
||||
"react-redux": "^7.2.4",
|
||||
"redux": "^4.1.0"
|
||||
"react-draggable": "^4.4.4",
|
||||
"react-redux": "^7.2.5",
|
||||
"redux": "^4.1.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.14.6",
|
||||
"@babel/plugin-transform-runtime": "^7.14.5",
|
||||
"@babel/preset-env": "^7.14.7",
|
||||
"@babel/core": "^7.15.5",
|
||||
"@babel/plugin-transform-runtime": "^7.15.0",
|
||||
"@babel/preset-env": "^7.15.6",
|
||||
"@babel/preset-react": "^7.14.5",
|
||||
"@rollup/plugin-babel": "^5.3.0",
|
||||
"@rollup/plugin-commonjs": "^19.0.0",
|
||||
"@rollup/plugin-node-resolve": "^13.0.0",
|
||||
"@rollup/plugin-replace": "^2.4.2",
|
||||
"@rollup/plugin-commonjs": "^21.0.0",
|
||||
"@rollup/plugin-node-resolve": "^13.0.5",
|
||||
"@rollup/plugin-replace": "^3.0.0",
|
||||
"@svgr/rollup": "^5.5.0",
|
||||
"@types/redux": "^3.6.31",
|
||||
"@types/resize-observer-browser": "^0.1.5",
|
||||
"autoprefixer": "^10.2.6",
|
||||
"@types/resize-observer-browser": "^0.1.6",
|
||||
"autoprefixer": "^10.3.6",
|
||||
"babel-preset-react-app": "^10.0.0",
|
||||
"cypress": "^7.5.0",
|
||||
"postcss": "^8.3.5",
|
||||
"postcss-cli": "^8.3.1",
|
||||
"postcss-nested": "^5.0.5",
|
||||
"prettier": "2.3.1",
|
||||
"cypress": "^8.5.0",
|
||||
"postcss": "^8.3.8",
|
||||
"postcss-cli": "^9.0.1",
|
||||
"postcss-nested": "^5.0.6",
|
||||
"prettier": "2.4.1",
|
||||
"prop-types": "^15.7.2",
|
||||
"react": "^17.0.2",
|
||||
"react-dom": "^17.0.2",
|
||||
"release-it": "^14.10.0",
|
||||
"rollup": "^2.52.2",
|
||||
"release-it": "^14.11.6",
|
||||
"rollup": "^2.58.0",
|
||||
"rollup-plugin-bundle-size": "^1.0.3",
|
||||
"rollup-plugin-livereload": "^2.0.0",
|
||||
"rollup-plugin-postcss": "^4.0.0",
|
||||
"rollup-plugin-livereload": "^2.0.5",
|
||||
"rollup-plugin-postcss": "^4.0.1",
|
||||
"rollup-plugin-serve": "^1.1.0",
|
||||
"rollup-plugin-typescript2": "^0.30.0",
|
||||
"start-server-and-test": "^1.12.5",
|
||||
"typescript": "^4.3.4"
|
||||
"start-server-and-test": "^1.14.0",
|
||||
"typescript": "^4.4.3"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "16 || 17",
|
||||
"react-dom": "17 || 17"
|
||||
"react-dom": "16 || 17"
|
||||
}
|
||||
},
|
||||
"../node_modules/react": {
|
||||
@@ -2361,9 +2364,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@types/dagre": {
|
||||
"version": "0.7.44",
|
||||
"resolved": "https://registry.npmjs.org/@types/dagre/-/dagre-0.7.44.tgz",
|
||||
"integrity": "sha512-N6HD+79w77ZVAaVO7JJDW5yJ9LAxM62FpgNGO9xEde+KVYjDRyhIMzfiErXpr1g0JPon9kwlBzoBK6s4fOww9Q==",
|
||||
"version": "0.7.46",
|
||||
"resolved": "https://registry.npmjs.org/@types/dagre/-/dagre-0.7.46.tgz",
|
||||
"integrity": "sha512-ku3y+F8sPqmiB5Ugl22NpukI2dLAViJiWwdtueXLeuF4fxZozl+bytPSFVlLu/gDgaKiwobu3LBXXRWktIMiIA==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@types/eslint": {
|
||||
@@ -2485,9 +2488,9 @@
|
||||
"integrity": "sha512-1HcDas8SEj4z1Wc696tH56G8OlRaH/sqZOynNNB+HF0WOeXPaxTtbYzJY2oEfiUxjSKjhCKr+MvR7dCHcEelug=="
|
||||
},
|
||||
"node_modules/@types/react": {
|
||||
"version": "17.0.11",
|
||||
"resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.11.tgz",
|
||||
"integrity": "sha512-yFRQbD+whVonItSk7ZzP/L+gPTJVBkL/7shLEF+i9GC/1cV3JmUxEQz6+9ylhUpWSDuqo1N9qEvqS6vTj4USUA==",
|
||||
"version": "17.0.27",
|
||||
"resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.27.tgz",
|
||||
"integrity": "sha512-zgiJwtsggVGtr53MndV7jfiUESTqrbxOcBvwfe6KS/9bzaVPCTDieTWnFNecVNx6EAaapg5xsLLWFfHHR437AA==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@types/prop-types": "*",
|
||||
@@ -2496,9 +2499,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@types/react-dom": {
|
||||
"version": "17.0.8",
|
||||
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.8.tgz",
|
||||
"integrity": "sha512-0ohAiJAx1DAUEcY9UopnfwCE9sSMDGnY/oXjWMax6g3RpzmTt2GMyMVAXcbn0mo8XAff0SbQJl2/SBU+hjSZ1A==",
|
||||
"version": "17.0.9",
|
||||
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.9.tgz",
|
||||
"integrity": "sha512-wIvGxLfgpVDSAMH5utdL9Ngm5Owu0VsGmldro3ORLXV8CShrL8awVj06NuEXFQ5xyaYfdca7Sgbk/50Ri1GdPg==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@types/react": "*"
|
||||
@@ -2515,9 +2518,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@types/react-router-dom": {
|
||||
"version": "5.1.7",
|
||||
"resolved": "https://registry.npmjs.org/@types/react-router-dom/-/react-router-dom-5.1.7.tgz",
|
||||
"integrity": "sha512-D5mHD6TbdV/DNHYsnwBTv+y73ei+mMjrkGrla86HthE4/PVvL1J94Bu3qABU+COXzpL23T1EZapVVpwHuBXiUg==",
|
||||
"version": "5.3.0",
|
||||
"resolved": "https://registry.npmjs.org/@types/react-router-dom/-/react-router-dom-5.3.0.tgz",
|
||||
"integrity": "sha512-svUzpEpKDwK8nmfV2vpZNSsiijFNKY8+gUqGqvGGOVrXvX58k1JIJubZa5igkwacbq/0umphO5SsQn/BQsnKpw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@types/history": "*",
|
||||
@@ -11465,9 +11468,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/localforage": {
|
||||
"version": "1.9.0",
|
||||
"resolved": "https://registry.npmjs.org/localforage/-/localforage-1.9.0.tgz",
|
||||
"integrity": "sha512-rR1oyNrKulpe+VM9cYmcFn6tsHuokyVHFaCM3+osEmxaHTbEk8oQu6eGDfS6DQLWi/N67XRmB8ECG37OES368g==",
|
||||
"version": "1.10.0",
|
||||
"resolved": "https://registry.npmjs.org/localforage/-/localforage-1.10.0.tgz",
|
||||
"integrity": "sha512-14/H1aX7hzBBmmh7sGPd+AOMkkIrHM3Z1PAyGgZigA1H1p5O5ANnMyWzvpAETtG68/dC4pC0ncy3+PPGzXZHPg==",
|
||||
"dependencies": {
|
||||
"lie": "3.1.1"
|
||||
}
|
||||
@@ -11780,15 +11783,6 @@
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/mini-create-react-context": {
|
||||
"version": "0.4.1",
|
||||
"resolved": "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.4.1.tgz",
|
||||
"integrity": "sha512-YWCYEmd5CQeHGSAKrYvXgmzzkrvssZcuuQDDeqkT+PziKGMgE+0MCCtcKbROzocGBG1meBLl2FotlRwf4gAzbQ==",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.12.1",
|
||||
"tiny-warning": "^1.0.3"
|
||||
}
|
||||
},
|
||||
"node_modules/mini-css-extract-plugin": {
|
||||
"version": "0.11.3",
|
||||
"resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.11.3.tgz",
|
||||
@@ -14737,12 +14731,42 @@
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-router": {
|
||||
"version": "5.2.0",
|
||||
"resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.0.tgz",
|
||||
"integrity": "sha512-smz1DUuFHRKdcJC0jobGo8cVbhO3x50tCL4icacOlcwDOEQPq4TMqwx3sY1TP+DvtTgz4nm3thuo7A+BK2U0Dw==",
|
||||
"node_modules/react-router-dom": {
|
||||
"version": "5.3.0",
|
||||
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.3.0.tgz",
|
||||
"integrity": "sha512-ObVBLjUZsphUUMVycibxgMdh5jJ1e3o+KpAZBVeHcNQZ4W+uUGGWsokurzlF4YOldQYRQL4y6yFRWM4m3svmuQ==",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.1.2",
|
||||
"@babel/runtime": "^7.12.13",
|
||||
"history": "^4.9.0",
|
||||
"loose-envify": "^1.3.1",
|
||||
"prop-types": "^15.6.2",
|
||||
"react-router": "5.2.1",
|
||||
"tiny-invariant": "^1.0.2",
|
||||
"tiny-warning": "^1.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=15"
|
||||
}
|
||||
},
|
||||
"node_modules/react-router-dom/node_modules/isarray": {
|
||||
"version": "0.0.1",
|
||||
"resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
|
||||
"integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
|
||||
},
|
||||
"node_modules/react-router-dom/node_modules/path-to-regexp": {
|
||||
"version": "1.8.0",
|
||||
"resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz",
|
||||
"integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==",
|
||||
"dependencies": {
|
||||
"isarray": "0.0.1"
|
||||
}
|
||||
},
|
||||
"node_modules/react-router-dom/node_modules/react-router": {
|
||||
"version": "5.2.1",
|
||||
"resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.1.tgz",
|
||||
"integrity": "sha512-lIboRiOtDLFdg1VTemMwud9vRVuOCZmUIT/7lUoZiSpPODiiH1UQlfXy+vPLC/7IWdFYnhRwAyNqA/+I7wnvKQ==",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.12.13",
|
||||
"history": "^4.9.0",
|
||||
"hoist-non-react-statics": "^3.1.0",
|
||||
"loose-envify": "^1.3.1",
|
||||
@@ -14752,33 +14776,22 @@
|
||||
"react-is": "^16.6.0",
|
||||
"tiny-invariant": "^1.0.2",
|
||||
"tiny-warning": "^1.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=15"
|
||||
}
|
||||
},
|
||||
"node_modules/react-router-dom": {
|
||||
"version": "5.2.0",
|
||||
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.2.0.tgz",
|
||||
"integrity": "sha512-gxAmfylo2QUjcwxI63RhQ5G85Qqt4voZpUXSEqCwykV0baaOTQDR1f0PmY8AELqIyVc0NEZUj0Gov5lNGcXgsA==",
|
||||
"node_modules/react-router-dom/node_modules/react-router/node_modules/mini-create-react-context": {
|
||||
"version": "0.4.1",
|
||||
"resolved": "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.4.1.tgz",
|
||||
"integrity": "sha512-YWCYEmd5CQeHGSAKrYvXgmzzkrvssZcuuQDDeqkT+PziKGMgE+0MCCtcKbROzocGBG1meBLl2FotlRwf4gAzbQ==",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.1.2",
|
||||
"history": "^4.9.0",
|
||||
"loose-envify": "^1.3.1",
|
||||
"prop-types": "^15.6.2",
|
||||
"react-router": "5.2.0",
|
||||
"tiny-invariant": "^1.0.2",
|
||||
"tiny-warning": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-router/node_modules/isarray": {
|
||||
"version": "0.0.1",
|
||||
"resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
|
||||
"integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
|
||||
},
|
||||
"node_modules/react-router/node_modules/path-to-regexp": {
|
||||
"version": "1.8.0",
|
||||
"resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz",
|
||||
"integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==",
|
||||
"dependencies": {
|
||||
"isarray": "0.0.1"
|
||||
"@babel/runtime": "^7.12.1",
|
||||
"tiny-warning": "^1.0.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"prop-types": "^15.0.0",
|
||||
"react": "^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-scripts": {
|
||||
@@ -17462,9 +17475,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/typescript": {
|
||||
"version": "4.3.4",
|
||||
"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.3.4.tgz",
|
||||
"integrity": "sha512-uauPG7XZn9F/mo+7MrsRjyvbxFpzemRjKEZXS4AK83oP2KKOJPvb+9cO/gmnv8arWZvhnjVOXz7B49m1l0e9Ew==",
|
||||
"version": "4.4.3",
|
||||
"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.4.3.tgz",
|
||||
"integrity": "sha512-4xfscpisVgqqDfPaJo5vkd+Qd/ItkoagnHpufr+i2QCHBsNYp+G7UAoyFl8aPtx879u38wPV65rZ8qbGZijalA==",
|
||||
"bin": {
|
||||
"tsc": "bin/tsc",
|
||||
"tsserver": "bin/tsserver"
|
||||
@@ -21655,9 +21668,9 @@
|
||||
}
|
||||
},
|
||||
"@types/dagre": {
|
||||
"version": "0.7.44",
|
||||
"resolved": "https://registry.npmjs.org/@types/dagre/-/dagre-0.7.44.tgz",
|
||||
"integrity": "sha512-N6HD+79w77ZVAaVO7JJDW5yJ9LAxM62FpgNGO9xEde+KVYjDRyhIMzfiErXpr1g0JPon9kwlBzoBK6s4fOww9Q==",
|
||||
"version": "0.7.46",
|
||||
"resolved": "https://registry.npmjs.org/@types/dagre/-/dagre-0.7.46.tgz",
|
||||
"integrity": "sha512-ku3y+F8sPqmiB5Ugl22NpukI2dLAViJiWwdtueXLeuF4fxZozl+bytPSFVlLu/gDgaKiwobu3LBXXRWktIMiIA==",
|
||||
"dev": true
|
||||
},
|
||||
"@types/eslint": {
|
||||
@@ -21779,9 +21792,9 @@
|
||||
"integrity": "sha512-1HcDas8SEj4z1Wc696tH56G8OlRaH/sqZOynNNB+HF0WOeXPaxTtbYzJY2oEfiUxjSKjhCKr+MvR7dCHcEelug=="
|
||||
},
|
||||
"@types/react": {
|
||||
"version": "17.0.11",
|
||||
"resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.11.tgz",
|
||||
"integrity": "sha512-yFRQbD+whVonItSk7ZzP/L+gPTJVBkL/7shLEF+i9GC/1cV3JmUxEQz6+9ylhUpWSDuqo1N9qEvqS6vTj4USUA==",
|
||||
"version": "17.0.27",
|
||||
"resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.27.tgz",
|
||||
"integrity": "sha512-zgiJwtsggVGtr53MndV7jfiUESTqrbxOcBvwfe6KS/9bzaVPCTDieTWnFNecVNx6EAaapg5xsLLWFfHHR437AA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@types/prop-types": "*",
|
||||
@@ -21790,9 +21803,9 @@
|
||||
}
|
||||
},
|
||||
"@types/react-dom": {
|
||||
"version": "17.0.8",
|
||||
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.8.tgz",
|
||||
"integrity": "sha512-0ohAiJAx1DAUEcY9UopnfwCE9sSMDGnY/oXjWMax6g3RpzmTt2GMyMVAXcbn0mo8XAff0SbQJl2/SBU+hjSZ1A==",
|
||||
"version": "17.0.9",
|
||||
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.9.tgz",
|
||||
"integrity": "sha512-wIvGxLfgpVDSAMH5utdL9Ngm5Owu0VsGmldro3ORLXV8CShrL8awVj06NuEXFQ5xyaYfdca7Sgbk/50Ri1GdPg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@types/react": "*"
|
||||
@@ -21809,9 +21822,9 @@
|
||||
}
|
||||
},
|
||||
"@types/react-router-dom": {
|
||||
"version": "5.1.7",
|
||||
"resolved": "https://registry.npmjs.org/@types/react-router-dom/-/react-router-dom-5.1.7.tgz",
|
||||
"integrity": "sha512-D5mHD6TbdV/DNHYsnwBTv+y73ei+mMjrkGrla86HthE4/PVvL1J94Bu3qABU+COXzpL23T1EZapVVpwHuBXiUg==",
|
||||
"version": "5.3.0",
|
||||
"resolved": "https://registry.npmjs.org/@types/react-router-dom/-/react-router-dom-5.3.0.tgz",
|
||||
"integrity": "sha512-svUzpEpKDwK8nmfV2vpZNSsiijFNKY8+gUqGqvGGOVrXvX58k1JIJubZa5igkwacbq/0umphO5SsQn/BQsnKpw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@types/history": "*",
|
||||
@@ -29219,9 +29232,9 @@
|
||||
}
|
||||
},
|
||||
"localforage": {
|
||||
"version": "1.9.0",
|
||||
"resolved": "https://registry.npmjs.org/localforage/-/localforage-1.9.0.tgz",
|
||||
"integrity": "sha512-rR1oyNrKulpe+VM9cYmcFn6tsHuokyVHFaCM3+osEmxaHTbEk8oQu6eGDfS6DQLWi/N67XRmB8ECG37OES368g==",
|
||||
"version": "1.10.0",
|
||||
"resolved": "https://registry.npmjs.org/localforage/-/localforage-1.10.0.tgz",
|
||||
"integrity": "sha512-14/H1aX7hzBBmmh7sGPd+AOMkkIrHM3Z1PAyGgZigA1H1p5O5ANnMyWzvpAETtG68/dC4pC0ncy3+PPGzXZHPg==",
|
||||
"requires": {
|
||||
"lie": "3.1.1"
|
||||
}
|
||||
@@ -29488,15 +29501,6 @@
|
||||
"resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
|
||||
"integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg=="
|
||||
},
|
||||
"mini-create-react-context": {
|
||||
"version": "0.4.1",
|
||||
"resolved": "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.4.1.tgz",
|
||||
"integrity": "sha512-YWCYEmd5CQeHGSAKrYvXgmzzkrvssZcuuQDDeqkT+PziKGMgE+0MCCtcKbROzocGBG1meBLl2FotlRwf4gAzbQ==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.12.1",
|
||||
"tiny-warning": "^1.0.3"
|
||||
}
|
||||
},
|
||||
"mini-css-extract-plugin": {
|
||||
"version": "0.11.3",
|
||||
"resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.11.3.tgz",
|
||||
@@ -31937,46 +31941,46 @@
|
||||
"react-flow-renderer": {
|
||||
"version": "file:..",
|
||||
"requires": {
|
||||
"@babel/core": "^7.14.6",
|
||||
"@babel/plugin-transform-runtime": "^7.14.5",
|
||||
"@babel/preset-env": "^7.14.7",
|
||||
"@babel/core": "^7.15.5",
|
||||
"@babel/plugin-transform-runtime": "^7.15.0",
|
||||
"@babel/preset-env": "^7.15.6",
|
||||
"@babel/preset-react": "^7.14.5",
|
||||
"@babel/runtime": "^7.14.6",
|
||||
"@babel/runtime": "^7.15.4",
|
||||
"@rollup/plugin-babel": "^5.3.0",
|
||||
"@rollup/plugin-commonjs": "^19.0.0",
|
||||
"@rollup/plugin-node-resolve": "^13.0.0",
|
||||
"@rollup/plugin-replace": "^2.4.2",
|
||||
"@rollup/plugin-commonjs": "^21.0.0",
|
||||
"@rollup/plugin-node-resolve": "^13.0.5",
|
||||
"@rollup/plugin-replace": "^3.0.0",
|
||||
"@svgr/rollup": "^5.5.0",
|
||||
"@types/d3": "^6.7.1",
|
||||
"@types/react-redux": "^7.1.16",
|
||||
"@types/d3": "^7.0.0",
|
||||
"@types/react-redux": "^7.1.18",
|
||||
"@types/redux": "^3.6.31",
|
||||
"@types/resize-observer-browser": "^0.1.5",
|
||||
"autoprefixer": "^10.2.6",
|
||||
"@types/resize-observer-browser": "^0.1.6",
|
||||
"autoprefixer": "^10.3.6",
|
||||
"babel-preset-react-app": "^10.0.0",
|
||||
"classcat": "^5.0.3",
|
||||
"cypress": "^7.5.0",
|
||||
"cypress": "^8.5.0",
|
||||
"d3-selection": "^3.0.0",
|
||||
"d3-zoom": "^3.0.0",
|
||||
"fast-deep-equal": "^3.1.3",
|
||||
"postcss": "^8.3.5",
|
||||
"postcss-cli": "^8.3.1",
|
||||
"postcss-nested": "^5.0.5",
|
||||
"prettier": "2.3.1",
|
||||
"postcss": "^8.3.8",
|
||||
"postcss-cli": "^9.0.1",
|
||||
"postcss-nested": "^5.0.6",
|
||||
"prettier": "2.4.1",
|
||||
"prop-types": "^15.7.2",
|
||||
"react": "^17.0.2",
|
||||
"react-dom": "^17.0.2",
|
||||
"react-draggable": "^4.4.3",
|
||||
"react-redux": "^7.2.4",
|
||||
"redux": "^4.1.0",
|
||||
"release-it": "^14.10.0",
|
||||
"rollup": "^2.52.2",
|
||||
"react-draggable": "^4.4.4",
|
||||
"react-redux": "^7.2.5",
|
||||
"redux": "^4.1.1",
|
||||
"release-it": "^14.11.6",
|
||||
"rollup": "^2.58.0",
|
||||
"rollup-plugin-bundle-size": "^1.0.3",
|
||||
"rollup-plugin-livereload": "^2.0.0",
|
||||
"rollup-plugin-postcss": "^4.0.0",
|
||||
"rollup-plugin-livereload": "^2.0.5",
|
||||
"rollup-plugin-postcss": "^4.0.1",
|
||||
"rollup-plugin-serve": "^1.1.0",
|
||||
"rollup-plugin-typescript2": "^0.30.0",
|
||||
"start-server-and-test": "^1.12.5",
|
||||
"typescript": "^4.3.4"
|
||||
"start-server-and-test": "^1.14.0",
|
||||
"typescript": "^4.4.3"
|
||||
},
|
||||
"dependencies": {
|
||||
"react": {
|
||||
@@ -32006,19 +32010,16 @@
|
||||
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz",
|
||||
"integrity": "sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg=="
|
||||
},
|
||||
"react-router": {
|
||||
"version": "5.2.0",
|
||||
"resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.0.tgz",
|
||||
"integrity": "sha512-smz1DUuFHRKdcJC0jobGo8cVbhO3x50tCL4icacOlcwDOEQPq4TMqwx3sY1TP+DvtTgz4nm3thuo7A+BK2U0Dw==",
|
||||
"react-router-dom": {
|
||||
"version": "5.3.0",
|
||||
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.3.0.tgz",
|
||||
"integrity": "sha512-ObVBLjUZsphUUMVycibxgMdh5jJ1e3o+KpAZBVeHcNQZ4W+uUGGWsokurzlF4YOldQYRQL4y6yFRWM4m3svmuQ==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.1.2",
|
||||
"@babel/runtime": "^7.12.13",
|
||||
"history": "^4.9.0",
|
||||
"hoist-non-react-statics": "^3.1.0",
|
||||
"loose-envify": "^1.3.1",
|
||||
"mini-create-react-context": "^0.4.0",
|
||||
"path-to-regexp": "^1.7.0",
|
||||
"prop-types": "^15.6.2",
|
||||
"react-is": "^16.6.0",
|
||||
"react-router": "5.2.1",
|
||||
"tiny-invariant": "^1.0.2",
|
||||
"tiny-warning": "^1.0.0"
|
||||
},
|
||||
@@ -32035,23 +32036,37 @@
|
||||
"requires": {
|
||||
"isarray": "0.0.1"
|
||||
}
|
||||
},
|
||||
"react-router": {
|
||||
"version": "5.2.1",
|
||||
"resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.1.tgz",
|
||||
"integrity": "sha512-lIboRiOtDLFdg1VTemMwud9vRVuOCZmUIT/7lUoZiSpPODiiH1UQlfXy+vPLC/7IWdFYnhRwAyNqA/+I7wnvKQ==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.12.13",
|
||||
"history": "^4.9.0",
|
||||
"hoist-non-react-statics": "^3.1.0",
|
||||
"loose-envify": "^1.3.1",
|
||||
"mini-create-react-context": "^0.4.0",
|
||||
"path-to-regexp": "^1.7.0",
|
||||
"prop-types": "^15.6.2",
|
||||
"react-is": "^16.6.0",
|
||||
"tiny-invariant": "^1.0.2",
|
||||
"tiny-warning": "^1.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"mini-create-react-context": {
|
||||
"version": "0.4.1",
|
||||
"resolved": "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.4.1.tgz",
|
||||
"integrity": "sha512-YWCYEmd5CQeHGSAKrYvXgmzzkrvssZcuuQDDeqkT+PziKGMgE+0MCCtcKbROzocGBG1meBLl2FotlRwf4gAzbQ==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.12.1",
|
||||
"tiny-warning": "^1.0.3"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"react-router-dom": {
|
||||
"version": "5.2.0",
|
||||
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.2.0.tgz",
|
||||
"integrity": "sha512-gxAmfylo2QUjcwxI63RhQ5G85Qqt4voZpUXSEqCwykV0baaOTQDR1f0PmY8AELqIyVc0NEZUj0Gov5lNGcXgsA==",
|
||||
"requires": {
|
||||
"@babel/runtime": "^7.1.2",
|
||||
"history": "^4.9.0",
|
||||
"loose-envify": "^1.3.1",
|
||||
"prop-types": "^15.6.2",
|
||||
"react-router": "5.2.0",
|
||||
"tiny-invariant": "^1.0.2",
|
||||
"tiny-warning": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"react-scripts": {
|
||||
"version": "4.0.3",
|
||||
"resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-4.0.3.tgz",
|
||||
@@ -34308,9 +34323,9 @@
|
||||
}
|
||||
},
|
||||
"typescript": {
|
||||
"version": "4.3.4",
|
||||
"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.3.4.tgz",
|
||||
"integrity": "sha512-uauPG7XZn9F/mo+7MrsRjyvbxFpzemRjKEZXS4AK83oP2KKOJPvb+9cO/gmnv8arWZvhnjVOXz7B49m1l0e9Ew=="
|
||||
"version": "4.4.3",
|
||||
"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.4.3.tgz",
|
||||
"integrity": "sha512-4xfscpisVgqqDfPaJo5vkd+Qd/ItkoagnHpufr+i2QCHBsNYp+G7UAoyFl8aPtx879u38wPV65rZ8qbGZijalA=="
|
||||
},
|
||||
"unicode-canonical-property-names-ecmascript": {
|
||||
"version": "1.0.4",
|
||||
|
||||
@@ -4,13 +4,13 @@
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"dagre": "^0.8.5",
|
||||
"localforage": "^1.9.0",
|
||||
"localforage": "^1.10.0",
|
||||
"react": "file:../node_modules/react",
|
||||
"react-dom": "file:../node_modules/react-dom",
|
||||
"react-flow-renderer": "file:../",
|
||||
"react-router-dom": "^5.2.0",
|
||||
"react-router-dom": "^5.3.0",
|
||||
"react-scripts": "4.0.3",
|
||||
"typescript": "^4.3.4"
|
||||
"typescript": "^4.4.3"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
@@ -34,10 +34,10 @@
|
||||
]
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/dagre": "^0.7.44",
|
||||
"@types/dagre": "^0.7.46",
|
||||
"@types/localforage": "0.0.34",
|
||||
"@types/react": "^17.0.11",
|
||||
"@types/react-dom": "^17.0.8",
|
||||
"@types/react-router-dom": "^5.1.7"
|
||||
"@types/react": "^17.0.27",
|
||||
"@types/react-dom": "^17.0.9",
|
||||
"@types/react-router-dom": "^5.3.0"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -11,7 +11,7 @@ const onConnect = (params: Connection | Edge) => console.log('handle onConnect',
|
||||
const ColorSelectorNode: FC<NodeProps> = ({ data, isConnectable }) => {
|
||||
return (
|
||||
<>
|
||||
<Handle type="source" position={Position.Left} style={targetHandleStyle} onConnect={onConnect} />
|
||||
<Handle type="target" position={Position.Left} style={targetHandleStyle} onConnect={onConnect} />
|
||||
<div>
|
||||
Custom Color Picker Node: <strong>{data.color}</strong>
|
||||
</div>
|
||||
|
||||
@@ -7,13 +7,11 @@ import ReactFlow, {
|
||||
addEdge,
|
||||
MiniMap,
|
||||
Controls,
|
||||
updateEdge,
|
||||
Node,
|
||||
FlowElement,
|
||||
OnLoadParams,
|
||||
Elements,
|
||||
Position,
|
||||
ConnectionMode,
|
||||
SnapGrid,
|
||||
Connection,
|
||||
Edge,
|
||||
@@ -81,7 +79,6 @@ const CustomNodeFlow = () => {
|
||||
data: { label: 'Output A' },
|
||||
position: { x: 550, y: 25 },
|
||||
targetPosition: Position.Left,
|
||||
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
@@ -89,7 +86,6 @@ const CustomNodeFlow = () => {
|
||||
data: { label: 'Output B' },
|
||||
position: { x: 550, y: 100 },
|
||||
targetPosition: Position.Left,
|
||||
|
||||
},
|
||||
|
||||
{ id: 'e1-2', source: '1', target: '2', animated: true, style: { stroke: '#fff' } },
|
||||
@@ -101,8 +97,7 @@ const CustomNodeFlow = () => {
|
||||
const onElementsRemove = (elementsToRemove: Elements) => setElements((els) => removeElements(elementsToRemove, els));
|
||||
const onConnect = (params: Connection | Edge) =>
|
||||
setElements((els) => addEdge({ ...params, animated: true, style: { stroke: '#fff' } }, els));
|
||||
const onEdgeUpdate = (oldEdge: Edge, newConnection: Connection) =>
|
||||
setElements((els) => updateEdge(oldEdge, newConnection, els));
|
||||
|
||||
return (
|
||||
<ReactFlow
|
||||
elements={elements}
|
||||
@@ -117,9 +112,6 @@ const CustomNodeFlow = () => {
|
||||
snapToGrid={true}
|
||||
snapGrid={snapGrid}
|
||||
defaultZoom={1.5}
|
||||
onEdgeUpdate={onEdgeUpdate}
|
||||
connectionMode={ConnectionMode.Loose}
|
||||
|
||||
>
|
||||
<MiniMap
|
||||
nodeStrokeColor={(n: Node): string => {
|
||||
@@ -140,4 +132,4 @@ const CustomNodeFlow = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default CustomNodeFlow;
|
||||
export default CustomNodeFlow;
|
||||
@@ -0,0 +1,33 @@
|
||||
import { memo, FC } from 'react';
|
||||
|
||||
import { Handle, Position, NodeProps, Connection, Edge } from 'react-flow-renderer';
|
||||
|
||||
const onConnect = (params: Connection | Edge) => console.log('handle onConnect', params);
|
||||
|
||||
const labelStyle = {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
};
|
||||
|
||||
const dragHandleStyle = {
|
||||
display: 'inline-block',
|
||||
width: 25,
|
||||
height: 25,
|
||||
backgroundColor: 'teal',
|
||||
marginLeft: 5,
|
||||
borderRadius: '50%',
|
||||
};
|
||||
|
||||
const ColorSelectorNode: FC<NodeProps> = () => {
|
||||
return (
|
||||
<>
|
||||
<Handle type="target" position={Position.Left} onConnect={onConnect} />
|
||||
<div style={labelStyle}>
|
||||
Only draggable here → <span className="custom-drag-handle" style={dragHandleStyle} />
|
||||
</div>
|
||||
<Handle type="source" position={Position.Right} />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default memo(ColorSelectorNode);
|
||||
@@ -0,0 +1,21 @@
|
||||
import ReactFlow from 'react-flow-renderer';
|
||||
|
||||
import DragHandleNode from './DragHandleNode';
|
||||
|
||||
const nodeTypes = {
|
||||
dragHandleNode: DragHandleNode,
|
||||
};
|
||||
|
||||
const elements = [
|
||||
{
|
||||
id: '2',
|
||||
type: 'dragHandleNode',
|
||||
dragHandle: '.custom-drag-handle',
|
||||
style: { border: '1px solid #ddd', padding: '20px 40px' },
|
||||
position: { x: 200, y: 200 },
|
||||
},
|
||||
];
|
||||
|
||||
const DragHandleFlow = () => <ReactFlow elements={elements} nodeTypes={nodeTypes} />;
|
||||
|
||||
export default DragHandleFlow;
|
||||
@@ -0,0 +1,40 @@
|
||||
import { FC } from 'react';
|
||||
import { getBezierPath, ConnectionLineComponentProps, Node } from 'react-flow-renderer';
|
||||
|
||||
import { getEdgeParams } from './utils';
|
||||
|
||||
const FloatingConnectionLine: FC<ConnectionLineComponentProps> = ({
|
||||
targetX,
|
||||
targetY,
|
||||
sourcePosition,
|
||||
targetPosition,
|
||||
sourceNode,
|
||||
}) => {
|
||||
if (!sourceNode) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const targetNode = {
|
||||
id: 'connection-target',
|
||||
__rf: { width: 1, height: 1, position: { x: targetX, y: targetY } },
|
||||
} as Node;
|
||||
|
||||
const { sx, sy } = getEdgeParams(sourceNode, targetNode);
|
||||
const d = getBezierPath({
|
||||
sourceX: sx,
|
||||
sourceY: sy,
|
||||
sourcePosition,
|
||||
targetPosition,
|
||||
targetX,
|
||||
targetY,
|
||||
});
|
||||
|
||||
return (
|
||||
<g>
|
||||
<path fill="none" stroke="#222" strokeWidth={1.5} className="animated" d={d} />
|
||||
<circle cx={targetX} cy={targetY} fill="#fff" r={3} stroke="#222" strokeWidth={1.5} />
|
||||
</g>
|
||||
);
|
||||
};
|
||||
|
||||
export default FloatingConnectionLine;
|
||||
@@ -0,0 +1,35 @@
|
||||
import { FC, useMemo, CSSProperties } from 'react';
|
||||
import { EdgeProps, getMarkerEnd, useStoreState, getBezierPath } from 'react-flow-renderer';
|
||||
|
||||
import { getEdgeParams } from './utils';
|
||||
|
||||
const FloatingEdge: FC<EdgeProps> = ({ id, source, target, arrowHeadType, markerEndId, style }) => {
|
||||
const nodes = useStoreState((state) => state.nodes);
|
||||
const markerEnd = getMarkerEnd(arrowHeadType, markerEndId);
|
||||
|
||||
const sourceNode = useMemo(() => nodes.find((n) => n.id === source), [source, nodes]);
|
||||
const targetNode = useMemo(() => nodes.find((n) => n.id === target), [target, nodes]);
|
||||
|
||||
if (!sourceNode || !targetNode) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const { sx, sy, tx, ty, sourcePos, targetPos } = getEdgeParams(sourceNode, targetNode);
|
||||
|
||||
const d = getBezierPath({
|
||||
sourceX: sx,
|
||||
sourceY: sy,
|
||||
sourcePosition: sourcePos,
|
||||
targetPosition: targetPos,
|
||||
targetX: tx,
|
||||
targetY: ty,
|
||||
});
|
||||
|
||||
return (
|
||||
<g className="react-flow__connection">
|
||||
<path id={id} className="react-flow__edge-path" d={d} markerEnd={markerEnd} style={style as CSSProperties} />
|
||||
</g>
|
||||
);
|
||||
};
|
||||
|
||||
export default FloatingEdge;
|
||||
@@ -0,0 +1,53 @@
|
||||
import React, { useState } from 'react';
|
||||
|
||||
import ReactFlow, {
|
||||
removeElements,
|
||||
addEdge,
|
||||
Background,
|
||||
OnLoadParams,
|
||||
EdgeTypesType,
|
||||
Elements,
|
||||
Connection,
|
||||
Edge,
|
||||
ArrowHeadType,
|
||||
} from 'react-flow-renderer';
|
||||
|
||||
import './style.css';
|
||||
|
||||
import FloatingEdge from './FloatingEdge';
|
||||
import FloatingConnectionLine from './FloatingConnectionLine';
|
||||
import { createElements } from './utils';
|
||||
|
||||
const onLoad = (reactFlowInstance: OnLoadParams) => reactFlowInstance.fitView();
|
||||
|
||||
const initialElements: Elements = createElements();
|
||||
|
||||
const edgeTypes: EdgeTypesType = {
|
||||
floating: FloatingEdge,
|
||||
};
|
||||
|
||||
const NodeAsHandleFlow = () => {
|
||||
const [elements, setElements] = useState<Elements>(initialElements);
|
||||
|
||||
const onElementsRemove = (elementsToRemove: Elements) => setElements((els) => removeElements(elementsToRemove, els));
|
||||
|
||||
const onConnect = (params: Connection | Edge) =>
|
||||
setElements((els) => addEdge({ ...params, type: 'floating', arrowHeadType: ArrowHeadType.Arrow }, els));
|
||||
|
||||
return (
|
||||
<div className="floatingedges">
|
||||
<ReactFlow
|
||||
elements={elements}
|
||||
onElementsRemove={onElementsRemove}
|
||||
onConnect={onConnect}
|
||||
onLoad={onLoad}
|
||||
edgeTypes={edgeTypes}
|
||||
connectionLineComponent={FloatingConnectionLine}
|
||||
>
|
||||
<Background />
|
||||
</ReactFlow>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default NodeAsHandleFlow;
|
||||
@@ -0,0 +1,9 @@
|
||||
.floatingedges {
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.floatingedges .react-flow__handle {
|
||||
opacity: 0;
|
||||
}
|
||||
@@ -0,0 +1,99 @@
|
||||
import { Position, ArrowHeadType, Node, XYPosition } from 'react-flow-renderer';
|
||||
|
||||
// this helper function returns the intersection point
|
||||
// of the line between the center of the intersectionNode and the target node
|
||||
function getNodeIntersection(intersectionNode: Node, targetNode: Node): XYPosition {
|
||||
// https://math.stackexchange.com/questions/1724792/an-algorithm-for-finding-the-intersection-point-between-a-center-of-vision-and-a
|
||||
const {
|
||||
width: intersectionNodeWidth,
|
||||
height: intersectionNodeHeight,
|
||||
position: intersectionNodePosition,
|
||||
} = intersectionNode.__rf;
|
||||
const targetPosition = targetNode.__rf.position;
|
||||
|
||||
const w = intersectionNodeWidth / 2;
|
||||
const h = intersectionNodeHeight / 2;
|
||||
|
||||
const x2 = intersectionNodePosition.x + w;
|
||||
const y2 = intersectionNodePosition.y + h;
|
||||
const x1 = targetPosition.x + w;
|
||||
const y1 = targetPosition.y + h;
|
||||
|
||||
const xx1 = (x1 - x2) / (2 * w) - (y1 - y2) / (2 * h);
|
||||
const yy1 = (x1 - x2) / (2 * w) + (y1 - y2) / (2 * h);
|
||||
const a = 1 / (Math.abs(xx1) + Math.abs(yy1));
|
||||
const xx3 = a * xx1;
|
||||
const yy3 = a * yy1;
|
||||
const x = w * (xx3 + yy3) + x2;
|
||||
const y = h * (-xx3 + yy3) + y2;
|
||||
|
||||
return { x, y };
|
||||
}
|
||||
|
||||
// returns the position (top,right,bottom or right) passed node compared to the intersection point
|
||||
function getEdgePosition(node: Node, intersectionPoint: XYPosition) {
|
||||
const n = { ...node.__rf.position, ...node.__rf };
|
||||
const nx = Math.round(n.x);
|
||||
const ny = Math.round(n.y);
|
||||
const px = Math.round(intersectionPoint.x);
|
||||
const py = Math.round(intersectionPoint.y);
|
||||
|
||||
if (px <= nx + 1) {
|
||||
return Position.Left;
|
||||
}
|
||||
if (px >= nx + n.width - 1) {
|
||||
return Position.Right;
|
||||
}
|
||||
if (py <= ny + 1) {
|
||||
return Position.Top;
|
||||
}
|
||||
if (py >= n.y + n.height - 1) {
|
||||
return Position.Bottom;
|
||||
}
|
||||
|
||||
return Position.Top;
|
||||
}
|
||||
|
||||
// returns the parameters (sx, sy, tx, ty, sourcePos, targetPos) you need to create an edge
|
||||
export function getEdgeParams(source: Node, target: Node) {
|
||||
const sourceIntersectionPoint = getNodeIntersection(source, target);
|
||||
const targetIntersectionPoint = getNodeIntersection(target, source);
|
||||
|
||||
const sourcePos = getEdgePosition(source, sourceIntersectionPoint);
|
||||
const targetPos = getEdgePosition(target, targetIntersectionPoint);
|
||||
|
||||
return {
|
||||
sx: sourceIntersectionPoint.x,
|
||||
sy: sourceIntersectionPoint.y,
|
||||
tx: targetIntersectionPoint.x,
|
||||
ty: targetIntersectionPoint.y,
|
||||
sourcePos,
|
||||
targetPos,
|
||||
};
|
||||
}
|
||||
|
||||
export function createElements() {
|
||||
const elements = [];
|
||||
const center = { x: window.innerWidth / 2, y: window.innerHeight / 2 };
|
||||
|
||||
elements.push({ id: 'target', data: { label: 'Target' }, position: center });
|
||||
|
||||
for (let i = 0; i < 8; i++) {
|
||||
const degrees = i * (360 / 8);
|
||||
const radians = degrees * (Math.PI / 180);
|
||||
const x = 250 * Math.cos(radians) + center.x;
|
||||
const y = 250 * Math.sin(radians) + center.y;
|
||||
|
||||
elements.push({ id: `${i}`, data: { label: 'Source' }, position: { x, y } });
|
||||
|
||||
elements.push({
|
||||
id: `edge-${i}`,
|
||||
target: 'target',
|
||||
source: `${i}`,
|
||||
type: 'floating',
|
||||
arrowHeadType: ArrowHeadType.Arrow,
|
||||
});
|
||||
}
|
||||
|
||||
return elements;
|
||||
}
|
||||
@@ -49,7 +49,7 @@ const LayoutFlow = () => {
|
||||
const nodeWithPosition = dagreGraph.node(el.id);
|
||||
el.targetPosition = isHorizontal ? Position.Left : Position.Top;
|
||||
el.sourcePosition = isHorizontal ? Position.Right : Position.Bottom;
|
||||
// we need to pass a slighltiy different position in order to notify react flow about the change
|
||||
// we need to pass a slightly different position in order to notify react flow about the change
|
||||
// @TODO how can we change the position handling so that we dont need this hack?
|
||||
el.position = { x: nodeWithPosition.x + Math.random() / 1000, y: nodeWithPosition.y };
|
||||
}
|
||||
|
||||
@@ -68,7 +68,7 @@ const initialElements: Elements = [
|
||||
target: '01',
|
||||
sourceHandle: 'left',
|
||||
targetHandle: 'bottom',
|
||||
type: 'smoothstep',
|
||||
type: 'default',
|
||||
arrowHeadType: ArrowHeadType.Arrow,
|
||||
},
|
||||
{
|
||||
@@ -77,7 +77,7 @@ const initialElements: Elements = [
|
||||
target: '01',
|
||||
sourceHandle: 'top',
|
||||
targetHandle: 'right',
|
||||
type: 'smoothstep',
|
||||
type: 'default',
|
||||
arrowHeadType: ArrowHeadType.Arrow,
|
||||
},
|
||||
{
|
||||
@@ -86,7 +86,7 @@ const initialElements: Elements = [
|
||||
target: '02',
|
||||
sourceHandle: 'top',
|
||||
targetHandle: 'left',
|
||||
type: 'smoothstep',
|
||||
type: 'default',
|
||||
arrowHeadType: ArrowHeadType.Arrow,
|
||||
},
|
||||
{
|
||||
@@ -95,7 +95,7 @@ const initialElements: Elements = [
|
||||
target: '02',
|
||||
sourceHandle: 'right',
|
||||
targetHandle: 'bottom',
|
||||
type: 'smoothstep',
|
||||
type: 'default',
|
||||
arrowHeadType: ArrowHeadType.Arrow,
|
||||
},
|
||||
{
|
||||
@@ -104,7 +104,7 @@ const initialElements: Elements = [
|
||||
target: '03',
|
||||
sourceHandle: 'right',
|
||||
targetHandle: 'top',
|
||||
type: 'smoothstep',
|
||||
type: 'default',
|
||||
arrowHeadType: ArrowHeadType.Arrow,
|
||||
},
|
||||
{
|
||||
@@ -113,7 +113,7 @@ const initialElements: Elements = [
|
||||
target: '03',
|
||||
sourceHandle: 'bottom',
|
||||
targetHandle: 'left',
|
||||
type: 'smoothstep',
|
||||
type: 'default',
|
||||
arrowHeadType: ArrowHeadType.Arrow,
|
||||
},
|
||||
{
|
||||
@@ -122,7 +122,7 @@ const initialElements: Elements = [
|
||||
target: '04',
|
||||
sourceHandle: 'bottom',
|
||||
targetHandle: 'right',
|
||||
type: 'smoothstep',
|
||||
type: 'default',
|
||||
arrowHeadType: ArrowHeadType.Arrow,
|
||||
},
|
||||
{
|
||||
@@ -131,7 +131,7 @@ const initialElements: Elements = [
|
||||
target: '04',
|
||||
sourceHandle: 'left',
|
||||
targetHandle: 'top',
|
||||
type: 'smoothstep',
|
||||
type: 'default',
|
||||
arrowHeadType: ArrowHeadType.Arrow,
|
||||
},
|
||||
{
|
||||
@@ -140,7 +140,7 @@ const initialElements: Elements = [
|
||||
target: '10',
|
||||
sourceHandle: 'top',
|
||||
targetHandle: 'bottom',
|
||||
type: 'smoothstep',
|
||||
type: 'default',
|
||||
arrowHeadType: ArrowHeadType.Arrow,
|
||||
},
|
||||
{
|
||||
@@ -149,7 +149,7 @@ const initialElements: Elements = [
|
||||
target: '20',
|
||||
sourceHandle: 'right',
|
||||
targetHandle: 'left',
|
||||
type: 'smoothstep',
|
||||
type: 'default',
|
||||
arrowHeadType: ArrowHeadType.Arrow,
|
||||
},
|
||||
{
|
||||
@@ -158,7 +158,7 @@ const initialElements: Elements = [
|
||||
target: '30',
|
||||
sourceHandle: 'bottom',
|
||||
targetHandle: 'top',
|
||||
type: 'smoothstep',
|
||||
type: 'default',
|
||||
arrowHeadType: ArrowHeadType.Arrow,
|
||||
},
|
||||
{
|
||||
@@ -167,7 +167,7 @@ const initialElements: Elements = [
|
||||
target: '40',
|
||||
sourceHandle: 'left',
|
||||
targetHandle: 'right',
|
||||
type: 'smoothstep',
|
||||
type: 'default',
|
||||
arrowHeadType: ArrowHeadType.Arrow,
|
||||
},
|
||||
];
|
||||
@@ -181,8 +181,7 @@ const getId = (): ElementId => `${id++}`;
|
||||
|
||||
const UpdateNodeInternalsFlow = () => {
|
||||
const [elements, setElements] = useState<Elements>(initialElements);
|
||||
const onConnect = (params: Connection | Edge) =>
|
||||
setElements((els) => addEdge({ ...params, type: 'smoothstep' }, els));
|
||||
const onConnect = (params: Connection | Edge) => setElements((els) => addEdge({ ...params, type: 'default' }, els));
|
||||
const { project } = useZoomPanHelper();
|
||||
const onEdgeUpdate = (oldEdge: Edge, newConnection: Connection) =>
|
||||
setElements((els) => updateEdge(oldEdge, newConnection, els));
|
||||
|
||||
@@ -14,6 +14,7 @@ import Provider from './Provider';
|
||||
import Hidden from './Hidden';
|
||||
import EdgeTypes from './EdgeTypes';
|
||||
import CustomConnectionLine from './CustomConnectionLine';
|
||||
import FloatingEdges from './FloatingEdges';
|
||||
import NodeTypeChange from './NodeTypeChange';
|
||||
import NodeTypesObjectChange from './NodeTypesObjectChange';
|
||||
import UpdatableEdge from './UpdatableEdge';
|
||||
@@ -26,6 +27,7 @@ import UseZoomPanHelper from './UseZoomPanHelper';
|
||||
import UseUpdateNodeInternals from './UseUpdateNodeInternals';
|
||||
import Undirectional from './Undirectional';
|
||||
import MultiFlows from './MultiFlows';
|
||||
import DragHandle from './DragHandle';
|
||||
|
||||
import './index.css';
|
||||
|
||||
@@ -78,6 +80,10 @@ const routes = [
|
||||
path: '/custom-connectionline',
|
||||
component: CustomConnectionLine,
|
||||
},
|
||||
{
|
||||
path: '/floating-edges',
|
||||
component: FloatingEdges,
|
||||
},
|
||||
{
|
||||
path: '/nodetype-change',
|
||||
component: NodeTypeChange,
|
||||
@@ -126,6 +132,10 @@ const routes = [
|
||||
path: '/multiflows',
|
||||
component: MultiFlows,
|
||||
},
|
||||
{
|
||||
path: '/draghandle',
|
||||
component: DragHandle,
|
||||
},
|
||||
];
|
||||
|
||||
const Header = withRouter(({ history, location }) => {
|
||||
|
||||
Generated
+919
-854
File diff suppressed because it is too large
Load Diff
+25
-22
@@ -1,6 +1,9 @@
|
||||
{
|
||||
"name": "react-flow-renderer",
|
||||
"version": "9.6.7",
|
||||
"version": "9.6.9",
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
},
|
||||
"main": "dist/ReactFlow.js",
|
||||
"module": "dist/ReactFlow.esm.js",
|
||||
"types": "dist/index.d.ts",
|
||||
@@ -28,52 +31,52 @@
|
||||
"release:next": "release-it --preRelease=next"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.15.3",
|
||||
"@babel/runtime": "^7.15.4",
|
||||
"@types/d3": "^7.0.0",
|
||||
"@types/react-redux": "^7.1.18",
|
||||
"@types/react-redux": "^7.1.19",
|
||||
"classcat": "^5.0.3",
|
||||
"d3-selection": "^3.0.0",
|
||||
"d3-zoom": "^3.0.0",
|
||||
"fast-deep-equal": "^3.1.3",
|
||||
"react-draggable": "^4.4.4",
|
||||
"react-redux": "^7.2.4",
|
||||
"react-redux": "^7.2.5",
|
||||
"redux": "^4.1.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.15.0",
|
||||
"@babel/plugin-transform-runtime": "^7.15.0",
|
||||
"@babel/preset-env": "^7.15.0",
|
||||
"@babel/core": "^7.15.8",
|
||||
"@babel/plugin-transform-runtime": "^7.15.8",
|
||||
"@babel/preset-env": "^7.15.8",
|
||||
"@babel/preset-react": "^7.14.5",
|
||||
"@rollup/plugin-babel": "^5.3.0",
|
||||
"@rollup/plugin-commonjs": "^20.0.0",
|
||||
"@rollup/plugin-node-resolve": "^13.0.4",
|
||||
"@rollup/plugin-commonjs": "^21.0.0",
|
||||
"@rollup/plugin-node-resolve": "^13.0.5",
|
||||
"@rollup/plugin-replace": "^3.0.0",
|
||||
"@svgr/rollup": "^5.5.0",
|
||||
"@types/redux": "^3.6.31",
|
||||
"@types/resize-observer-browser": "^0.1.6",
|
||||
"autoprefixer": "^10.3.3",
|
||||
"autoprefixer": "^10.3.7",
|
||||
"babel-preset-react-app": "^10.0.0",
|
||||
"cypress": "^8.3.1",
|
||||
"postcss": "^8.3.6",
|
||||
"postcss-cli": "^8.3.1",
|
||||
"cypress": "^8.5.0",
|
||||
"postcss": "^8.3.9",
|
||||
"postcss-cli": "^9.0.1",
|
||||
"postcss-nested": "^5.0.6",
|
||||
"prettier": "2.3.2",
|
||||
"prettier": "2.4.1",
|
||||
"prop-types": "^15.7.2",
|
||||
"react": "^16.11.0",
|
||||
"react-dom": "^16.11.0",
|
||||
"release-it": "^14.11.5",
|
||||
"rollup": "^2.56.3",
|
||||
"react": "^17.0.2",
|
||||
"react-dom": "^17.0.2",
|
||||
"release-it": "^14.11.6",
|
||||
"rollup": "^2.58.0",
|
||||
"rollup-plugin-bundle-size": "^1.0.3",
|
||||
"rollup-plugin-livereload": "^2.0.5",
|
||||
"rollup-plugin-postcss": "^4.0.1",
|
||||
"rollup-plugin-serve": "^1.1.0",
|
||||
"rollup-plugin-typescript2": "^0.30.0",
|
||||
"start-server-and-test": "^1.13.1",
|
||||
"typescript": "^4.4.2"
|
||||
"start-server-and-test": "^1.14.0",
|
||||
"typescript": "^4.4.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.11.0",
|
||||
"react-dom": "^16.11.0"
|
||||
"react": "16 || 17",
|
||||
"react-dom": "16 || 17"
|
||||
},
|
||||
"files": [
|
||||
"dist",
|
||||
|
||||
@@ -26,7 +26,7 @@ export interface ControlProps extends HTMLAttributes<HTMLDivElement> {
|
||||
export interface ControlButtonProps extends HTMLAttributes<HTMLButtonElement> {}
|
||||
|
||||
export const ControlButton: FC<ControlButtonProps> = ({ children, className, ...rest }) => (
|
||||
<button className={cc(['react-flow__controls-button', className])} {...rest}>
|
||||
<button type="button" className={cc(['react-flow__controls-button', className])} {...rest}>
|
||||
{children}
|
||||
</button>
|
||||
);
|
||||
|
||||
@@ -37,9 +37,9 @@ export function getBezierPath({
|
||||
if (leftAndRight.includes(sourcePosition) && leftAndRight.includes(targetPosition)) {
|
||||
path = `M${sourceX},${sourceY} C${cX},${sourceY} ${cX},${targetY} ${targetX},${targetY}`;
|
||||
} else if (leftAndRight.includes(targetPosition)) {
|
||||
path = `M${sourceX},${sourceY} C${sourceX},${targetY} ${sourceX},${targetY} ${targetX},${targetY}`;
|
||||
path = `M${sourceX},${sourceY} Q${sourceX},${targetY} ${targetX},${targetY}`;
|
||||
} else if (leftAndRight.includes(sourcePosition)) {
|
||||
path = `M${sourceX},${sourceY} C${targetX},${sourceY} ${targetX},${sourceY} ${targetX},${targetY}`;
|
||||
path = `M${sourceX},${sourceY} Q${targetX},${sourceY} ${targetX},${targetY}`;
|
||||
}
|
||||
|
||||
return path;
|
||||
|
||||
@@ -160,7 +160,7 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
|
||||
_onEdgeUpdate
|
||||
);
|
||||
},
|
||||
[id, source, target, type, sourceHandleId, targetHandleId, setConnectionNodeId, setPosition, edgeElement]
|
||||
[id, source, target, type, sourceHandleId, targetHandleId, setConnectionNodeId, setPosition, edgeElement, onConnectEdge]
|
||||
);
|
||||
|
||||
const onEdgeUpdaterSourceMouseDown = useCallback(
|
||||
|
||||
@@ -48,6 +48,7 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
|
||||
snapGrid,
|
||||
isDragging,
|
||||
resizeObserver,
|
||||
dragHandle,
|
||||
}: WrapNodeProps) => {
|
||||
const updateNodeDimensions = useStoreActions((actions) => actions.updateNodeDimensions);
|
||||
const addSelectedElements = useStoreActions((actions) => actions.addSelectedElements);
|
||||
@@ -241,6 +242,7 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
|
||||
nodeRef={nodeElement}
|
||||
grid={grid}
|
||||
enableUserSelectHack={false}
|
||||
handle={dragHandle}
|
||||
>
|
||||
<div
|
||||
className={nodeClasses}
|
||||
@@ -266,6 +268,7 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
|
||||
sourcePosition={sourcePosition}
|
||||
targetPosition={targetPosition}
|
||||
isDragging={isDragging}
|
||||
dragHandle={dragHandle}
|
||||
/>
|
||||
</Provider>
|
||||
</div>
|
||||
|
||||
@@ -7,9 +7,7 @@ interface SelectionListenerProps {
|
||||
onSelectionChange: (elements: Elements | null) => void;
|
||||
}
|
||||
|
||||
// This is just a helper component for calling the onSelectionChange listener.
|
||||
// As soon as easy-peasy has implemented the effectOn hook, we can remove this component
|
||||
// and use the hook instead. https://github.com/ctrlplusb/easy-peasy/pull/459
|
||||
// This is a helper component for calling the onSelectionChange listener
|
||||
|
||||
export default ({ onSelectionChange }: SelectionListenerProps) => {
|
||||
const selectedElements = useStoreState((s) => s.selectedElements);
|
||||
|
||||
@@ -72,7 +72,7 @@ const Edge = ({
|
||||
(connection: Connection) => {
|
||||
props.onEdgeUpdate?.(edge, connection);
|
||||
},
|
||||
[edge]
|
||||
[edge, props.onEdgeUpdate]
|
||||
);
|
||||
|
||||
if (!sourceNode) {
|
||||
|
||||
@@ -104,6 +104,7 @@ const NodeRenderer = (props: NodeRendererProps) => {
|
||||
isSelectable={isSelectable}
|
||||
isConnectable={isConnectable}
|
||||
resizeObserver={resizeObserver}
|
||||
dragHandle={node.dragHandle}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
|
||||
@@ -49,6 +49,7 @@ export interface Node<T = any> {
|
||||
draggable?: boolean;
|
||||
selectable?: boolean;
|
||||
connectable?: boolean;
|
||||
dragHandle?: string;
|
||||
}
|
||||
|
||||
export enum ArrowHeadType {
|
||||
@@ -186,6 +187,7 @@ export interface NodeProps<T = any> {
|
||||
targetPosition?: Position;
|
||||
sourcePosition?: Position;
|
||||
isDragging?: boolean;
|
||||
dragHandle?: string;
|
||||
}
|
||||
|
||||
export interface NodeComponentProps<T = any> {
|
||||
@@ -210,6 +212,7 @@ export interface NodeComponentProps<T = any> {
|
||||
onNodeDragStop?: (node: Node) => void;
|
||||
style?: CSSProperties;
|
||||
isDragging?: boolean;
|
||||
dragHandle?: string;
|
||||
}
|
||||
|
||||
export interface WrapNodeProps<T = any> {
|
||||
@@ -243,6 +246,7 @@ export interface WrapNodeProps<T = any> {
|
||||
snapGrid?: SnapGrid;
|
||||
isDragging?: boolean;
|
||||
resizeObserver: ResizeObserver | null;
|
||||
dragHandle?: string;
|
||||
}
|
||||
|
||||
export type FitViewParams = {
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"baseUrl": ".",
|
||||
"outDir": "dist",
|
||||
"module": "esnext",
|
||||
"target": "esnext",
|
||||
|
||||
Reference in New Issue
Block a user