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

initial working mod with nodeId and handleId split up in Connection type so that target-target and source-source connections cannot be made

Browse Source
This commit is contained in:
jasonpul
2020-10-01 12:48:56 -04:00
parent c558019de6
commit bee2ca5c0c
6 changed files with 130 additions and 191 deletions
Download Patch File Download Diff File Expand all files Collapse all files
example/package-lock.json
Generated
+75 -120
View File
@@ -1844,6 +1844,14 @@
"@xtuc/long": "4.2.2"
}
},
"@welldone-software/why-did-you-render": {
"version": "4.3.2",
"resolved": "https://registry.npmjs.org/@welldone-software/why-did-you-render/-/why-did-you-render-4.3.2.tgz",
"integrity": "sha512-pzaFmUUH+FjbsDgcMB1xNPncIaxibvo0FLbGySLIh+v+7Bp5pqSJFO6zlqo4orPLm3nAdYEgL2vrlj8befoypg==",
"requires": {
"lodash": "^4"
}
},
"@xtuc/ieee754": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
@@ -3118,9 +3126,9 @@
}
},
"caniuse-lite": {
"version": "1.0.30001116",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001116.tgz",
"integrity": "sha512-f2lcYnmAI5Mst9+g0nkMIznFGsArRmZ0qU+dnq8l91hymdc2J3SFbiPhOJEeDqC1vtE8nc1qNQyklzB8veJefQ=="
"version": "1.0.30001141",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001141.tgz",
"integrity": "sha512-EHfInJHoQTmlMdVZrEc5gmwPc0zyN/hVufmGHPbVNQwlk7tJfCmQ2ysRZMY2MeleBivALUTyyxXnQjK18XrVpA=="
},
"capture-exit": {
"version": "2.0.0",
@@ -3996,10 +4004,71 @@
"type": "^1.0.1"
}
},
"d3-color": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/d3-color/-/d3-color-2.0.0.tgz",
"integrity": "sha512-SPXi0TSKPD4g9tw0NMZFnR95XVgUZiBH+uUTqQuDu1OsE2zomHU7ho0FISciaPvosimixwHFl3WHLGabv6dDgQ=="
},
"d3-dispatch": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-2.0.0.tgz",
"integrity": "sha512-S/m2VsXI7gAti2pBoLClFFTMOO1HTtT0j99AuXLoGFKO6deHDdnv6ZGTxSTTUTgO1zVcv82fCOtDjYK4EECmWA=="
},
"d3-drag": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-2.0.0.tgz",
"integrity": "sha512-g9y9WbMnF5uqB9qKqwIIa/921RYWzlUDv9Jl1/yONQwxbOfszAWTCm8u7HOTgJgRDXiRZN56cHT9pd24dmXs8w==",
"requires": {
"d3-dispatch": "1 - 2",
"d3-selection": "2"
}
},
"d3-ease": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-2.0.0.tgz",
"integrity": "sha512-68/n9JWarxXkOWMshcT5IcjbB+agblQUaIsbnXmrzejn2O82n3p2A9R2zEB9HIEFWKFwPAEDDN8gR0VdSAyyAQ=="
},
"d3-interpolate": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-2.0.1.tgz",
"integrity": "sha512-c5UhwwTs/yybcmTpAVqwSFl6vrQ8JZJoT5F7xNFK9pymv5C0Ymcc9/LIJHtYIggg/yS9YHw8i8O8tgb9pupjeQ==",
"requires": {
"d3-color": "1 - 2"
}
},
"d3-selection": {
"version": "1.4.2",
"resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-1.4.2.tgz",
"integrity": "sha512-SJ0BqYihzOjDnnlfyeHT0e30k0K1+5sR3d5fNueCNeuhZTnGw4M4o8mqJchSwgKMXCNFo+e2VTChiSJ0vYtXkg=="
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-2.0.0.tgz",
"integrity": "sha512-XoGGqhLUN/W14NmaqcO/bb1nqjDAw5WtSYb2X8wiuQWvSZUsUVYsOSkOybUrNvcBjaywBdYPy03eXHMXjk9nZA=="
},
"d3-timer": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-2.0.0.tgz",
"integrity": "sha512-TO4VLh0/420Y/9dO3+f9abDEFYeCUr2WZRlxJvbp4HPTQcSylXNiL6yZa9FIUvV1yRiFufl1bszTCLDqv9PWNA=="
},
"d3-transition": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-2.0.0.tgz",
"integrity": "sha512-42ltAGgJesfQE3u9LuuBHNbGrI/AJjNL2OAUdclE70UE6Vy239GCBEYD38uBPoLeNsOhFStGpPI0BAOV+HMxog==",
"requires": {
"d3-color": "1 - 2",
"d3-dispatch": "1 - 2",
"d3-ease": "1 - 2",
"d3-interpolate": "1 - 2",
"d3-timer": "1 - 2"
}
},
"d3-zoom": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-2.0.0.tgz",
"integrity": "sha512-fFg7aoaEm9/jf+qfstak0IYpnesZLiMX6GZvXtUSdv8RH2o4E2qeelgdU09eKS6wGuiGMfcnMI0nTIqWzRHGpw==",
"requires": {
"d3-dispatch": "1 - 2",
"d3-drag": "2",
"d3-interpolate": "1 - 2",
"d3-selection": "2",
"d3-transition": "2"
}
},
"damerau-levenshtein": {
"version": "1.0.6",
@@ -10497,11 +10566,6 @@
"pkg-up": "^2.0.0"
}
},
"caniuse-lite": {
"version": "1.0.30001038",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001038.tgz",
"integrity": "sha512-zii9quPo96XfOiRD4TrfYGs+QsGZpb2cGiMAzPjtf/hpFgB6zCPZgJb7I1+EATeMw/o+lG8FyRAnI+CWStHcaQ=="
},
"electron-to-chromium": {
"version": "1.3.392",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.392.tgz",
@@ -10705,11 +10769,6 @@
"pkg-up": "^2.0.0"
}
},
"caniuse-lite": {
"version": "1.0.30001038",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001038.tgz",
"integrity": "sha512-zii9quPo96XfOiRD4TrfYGs+QsGZpb2cGiMAzPjtf/hpFgB6zCPZgJb7I1+EATeMw/o+lG8FyRAnI+CWStHcaQ=="
},
"electron-to-chromium": {
"version": "1.3.392",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.392.tgz",
@@ -12616,11 +12675,6 @@
"pkg-up": "^2.0.0"
}
},
"caniuse-lite": {
"version": "1.0.30001038",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001038.tgz",
"integrity": "sha512-zii9quPo96XfOiRD4TrfYGs+QsGZpb2cGiMAzPjtf/hpFgB6zCPZgJb7I1+EATeMw/o+lG8FyRAnI+CWStHcaQ=="
},
"electron-to-chromium": {
"version": "1.3.392",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.392.tgz",
@@ -13929,21 +13983,6 @@
"resolved": "https://registry.npmjs.org/@types/sizzle/-/sizzle-2.3.2.tgz",
"integrity": "sha512-7EJYyKTL7tFR8+gDbB6Wwz/arpGa0Mywk1TJbNzKzHtzbwVmY4HR9WqS5VV7dsBUKQmPNr192jHr/VpBluj/hg=="
},
"@welldone-software/why-did-you-render": {
"version": "4.3.1",
"resolved": "https://registry.npmjs.org/@welldone-software/why-did-you-render/-/why-did-you-render-4.3.1.tgz",
"integrity": "sha512-1Axk7YWHbXlOgMJ1Wmal7Nmd8a7k+VLr7YFwQsY7CB4SsjJCOyyjbnLLZQ4t6ojw4Wn1suqhcj8leBPMwKjzmA==",
"requires": {
"lodash": "^4"
},
"dependencies": {
"lodash": {
"version": "4.17.20",
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz",
"integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA=="
}
}
},
"ajv": {
"version": "6.10.2",
"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.10.2.tgz",
@@ -14102,13 +14141,6 @@
"num2fraction": "^1.2.2",
"postcss": "^7.0.27",
"postcss-value-parser": "^4.0.3"
},
"dependencies": {
"caniuse-lite": {
"version": "1.0.30001043",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001043.tgz",
"integrity": "sha512-MrBDRPJPDBYwACtSQvxg9+fkna5jPXhJlKmuxenl/ml9uf8LHKlDmLpElu+zTW/bEz7lC1m0wTDD7jiIB+hgFg=="
}
}
},
"aws-sign2": {
@@ -14508,11 +14540,6 @@
"pkg-up": "^2.0.0"
}
},
"caniuse-lite": {
"version": "1.0.30001038",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001038.tgz",
"integrity": "sha512-zii9quPo96XfOiRD4TrfYGs+QsGZpb2cGiMAzPjtf/hpFgB6zCPZgJb7I1+EATeMw/o+lG8FyRAnI+CWStHcaQ=="
},
"convert-source-map": {
"version": "1.7.0",
"resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.7.0.tgz",
@@ -14758,11 +14785,6 @@
"lodash.uniq": "^4.5.0"
}
},
"caniuse-lite": {
"version": "1.0.30001038",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001038.tgz",
"integrity": "sha512-zii9quPo96XfOiRD4TrfYGs+QsGZpb2cGiMAzPjtf/hpFgB6zCPZgJb7I1+EATeMw/o+lG8FyRAnI+CWStHcaQ=="
},
"caseless": {
"version": "0.12.0",
"resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz",
@@ -15679,11 +15701,6 @@
"pkg-up": "^2.0.0"
}
},
"caniuse-lite": {
"version": "1.0.30001038",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001038.tgz",
"integrity": "sha512-zii9quPo96XfOiRD4TrfYGs+QsGZpb2cGiMAzPjtf/hpFgB6zCPZgJb7I1+EATeMw/o+lG8FyRAnI+CWStHcaQ=="
},
"electron-to-chromium": {
"version": "1.3.392",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.392.tgz",
@@ -16072,68 +16089,6 @@
}
}
},
"d3-color": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/d3-color/-/d3-color-1.4.0.tgz",
"integrity": "sha512-TzNPeJy2+iEepfiL92LAAB7fvnp/dV2YwANPVHdDWmYMm23qIJBYww3qT8I8C1wXrmrg4UWs7BKc2tKIgyjzHg=="
},
"d3-dispatch": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-1.0.5.tgz",
"integrity": "sha512-vwKx+lAqB1UuCeklr6Jh1bvC4SZgbSqbkGBLClItFBIYH4vqDJCA7qfoy14lXmJdnBOdxndAMxjCbImJYW7e6g=="
},
"d3-drag": {
"version": "1.2.4",
"resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-1.2.4.tgz",
"integrity": "sha512-ICPurDETFAelF1CTHdIyiUM4PsyZLaM+7oIBhmyP+cuVjze5vDZ8V//LdOFjg0jGnFIZD/Sfmk0r95PSiu78rw==",
"requires": {
"d3-dispatch": "1",
"d3-selection": "1"
}
},
"d3-ease": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-1.0.5.tgz",
"integrity": "sha512-Ct1O//ly5y5lFM9YTdu+ygq7LleSgSE4oj7vUt9tPLHUi8VCV7QoizGpdWRWAwCO9LdYzIrQDg97+hGVdsSGPQ=="
},
"d3-interpolate": {
"version": "1.3.2",
"resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-1.3.2.tgz",
"integrity": "sha512-NlNKGopqaz9qM1PXh9gBF1KSCVh+jSFErrSlD/4hybwoNX/gt1d8CDbDW+3i+5UOHhjC6s6nMvRxcuoMVNgL2w==",
"requires": {
"d3-color": "1"
}
},
"d3-timer": {
"version": "1.0.9",
"resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-1.0.9.tgz",
"integrity": "sha512-rT34J5HnQUHhcLvhSB9GjCkN0Ddd5Y8nCwDBG2u6wQEeYxT/Lf51fTFFkldeib/sE/J0clIe0pnCfs6g/lRbyg=="
},
"d3-transition": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-1.2.0.tgz",
"integrity": "sha512-VJ7cmX/FPIPJYuaL2r1o1EMHLttvoIuZhhuAlRoOxDzogV8iQS6jYulDm3xEU3TqL80IZIhI551/ebmCMrkvhw==",
"requires": {
"d3-color": "1",
"d3-dispatch": "1",
"d3-ease": "1",
"d3-interpolate": "1",
"d3-selection": "^1.1.0",
"d3-timer": "1"
}
},
"d3-zoom": {
"version": "1.8.3",
"resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-1.8.3.tgz",
"integrity": "sha512-VoLXTK4wvy1a0JpH2Il+F2CiOhVu7VRXWF5M/LroMIh3/zBAC3WAt7QoIvPibOavVo20hN6/37vwAsdBejLyKQ==",
"requires": {
"d3-dispatch": "1",
"d3-drag": "1",
"d3-interpolate": "1",
"d3-selection": "1",
"d3-transition": "1"
}
},
"dashdash": {
"version": "1.14.1",
"resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
example/src/Validation/index.js
+8 -5
View File
@@ -20,15 +20,18 @@ const onConnectEnd = (event) => console.log('on connect end', event);
const CustomInput = () => (
<>
<div>Only connectable with B</div>
<Handle type="source" position="right" isValidConnection={isValidConnection} />
<Handle type="source" position="right" id='a' isValidConnection={isValidConnection} />
{/* <Handle type="source" position="right" id='a' /> */}
</>
);
const CustomNode = ({ id }) => (
<>
<Handle type="target" position="left" isValidConnection={isValidConnection} />
{/* <Handle type="target" position="left" /> */}
<div>{id}</div>
<Handle type="source" position="right" isValidConnection={isValidConnection} />
{/* <Handle type="source" position="right" /> */}
</>
);
@@ -40,7 +43,7 @@ const nodeTypes = {
const HorizontalFlow = () => {
const [elements, setElements] = useState(initialElements);
const onConnect = (params) => {
console.log('on connect', params);
// console.log('on connect', params);
setElements((els) => addEdge(params, els));
};
@@ -52,9 +55,9 @@ const HorizontalFlow = () => {
onLoad={onLoad}
className="validationflow"
nodeTypes={nodeTypes}
onConnectStart={onConnectStart}
onConnectStop={onConnectStop}
onConnectEnd={onConnectEnd}
// onConnectStart={onConnectStart}
// onConnectStop={onConnectStop}
// onConnectEnd={onConnectEnd}
/>
);
};
example/src/index.js
+14 -9
View File
@@ -117,14 +117,19 @@ const Header = () => {
};
ReactDOM.render(
<Router forceRefresh={true}>
<Header />
<SourceDisplay />
<Switch>
{routes.map((route) => (
<Route exact path={route.path} render={() => <route.component />} key={route.path} />
))}
</Switch>
</Router>,
<Validation />,
document.getElementById('root')
);
// ReactDOM.render(
// <Router forceRefresh={true}>
// <Header />
// <SourceDisplay />
// <Switch>
// {routes.map((route) => (
// <Route exact path={route.path} render={() => <route.component />} key={route.path} />
// ))}
// </Switch>
// </Router>,
// document.getElementById('root')
// );
package-lock.json
Generated
+3 -39
View File
@@ -36,12 +36,6 @@
"node-releases": "^1.1.60"
}
},
"caniuse-lite": {
"version": "1.0.30001123",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001123.tgz",
"integrity": "sha512-03dJDoa4YC4332jq0rqwiM+Hw6tA5RJtrnZKvOQy7ASoIUv8CinkcmGhYpCvCjedvkBQrrKnkcELxrUSW/XwNQ==",
"dev": true
},
"electron-to-chromium": {
"version": "1.3.559",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.559.tgz",
@@ -388,12 +382,6 @@
"node-releases": "^1.1.60"
}
},
"caniuse-lite": {
"version": "1.0.30001123",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001123.tgz",
"integrity": "sha512-03dJDoa4YC4332jq0rqwiM+Hw6tA5RJtrnZKvOQy7ASoIUv8CinkcmGhYpCvCjedvkBQrrKnkcELxrUSW/XwNQ==",
"dev": true
},
"electron-to-chromium": {
"version": "1.3.559",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.559.tgz",
@@ -3557,12 +3545,6 @@
"node-releases": "^1.1.60"
}
},
"caniuse-lite": {
"version": "1.0.30001123",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001123.tgz",
"integrity": "sha512-03dJDoa4YC4332jq0rqwiM+Hw6tA5RJtrnZKvOQy7ASoIUv8CinkcmGhYpCvCjedvkBQrrKnkcELxrUSW/XwNQ==",
"dev": true
},
"electron-to-chromium": {
"version": "1.3.559",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.559.tgz",
@@ -5331,12 +5313,6 @@
"node-releases": "^1.1.58"
}
},
"caniuse-lite": {
"version": "1.0.30001109",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001109.tgz",
"integrity": "sha512-4JIXRodHzdS3HdK8nSgIqXYLExOvG+D2/EenSvcub2Kp3QEADjo2v2oUn5g0n0D+UNwG9BtwKOyGcSq2qvQXvQ==",
"dev": true
},
"electron-to-chromium": {
"version": "1.3.516",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.516.tgz",
@@ -5791,12 +5767,6 @@
"pkg-up": "^2.0.0"
}
},
"caniuse-lite": {
"version": "1.0.30001038",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001038.tgz",
"integrity": "sha512-zii9quPo96XfOiRD4TrfYGs+QsGZpb2cGiMAzPjtf/hpFgB6zCPZgJb7I1+EATeMw/o+lG8FyRAnI+CWStHcaQ==",
"dev": true
},
"convert-source-map": {
"version": "1.7.0",
"resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.7.0.tgz",
@@ -6087,9 +6057,9 @@
}
},
"caniuse-lite": {
"version": "1.0.30001038",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001038.tgz",
"integrity": "sha512-zii9quPo96XfOiRD4TrfYGs+QsGZpb2cGiMAzPjtf/hpFgB6zCPZgJb7I1+EATeMw/o+lG8FyRAnI+CWStHcaQ==",
"version": "1.0.30001141",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001141.tgz",
"integrity": "sha512-EHfInJHoQTmlMdVZrEc5gmwPc0zyN/hVufmGHPbVNQwlk7tJfCmQ2ysRZMY2MeleBivALUTyyxXnQjK18XrVpA==",
"dev": true
},
"caseless": {
@@ -6451,12 +6421,6 @@
"pkg-up": "^2.0.0"
}
},
"caniuse-lite": {
"version": "1.0.30001038",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001038.tgz",
"integrity": "sha512-zii9quPo96XfOiRD4TrfYGs+QsGZpb2cGiMAzPjtf/hpFgB6zCPZgJb7I1+EATeMw/o+lG8FyRAnI+CWStHcaQ==",
"dev": true
},
"electron-to-chromium": {
"version": "1.3.392",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.392.tgz",
src/components/Handle/BaseHandle.tsx
+28 -18
View File
@@ -42,6 +42,7 @@ type Result = {
function onMouseDown(
event: ReactMouseEvent,
handleId: ElementId,
nodeId: ElementId,
setConnectionNodeId: SetSourceIdFunc,
setPosition: (pos: XYPosition) => void,
@@ -84,30 +85,36 @@ function onMouseDown(
// checks if element below mouse is a handle and returns connection in form of an object { source: 123, target: 312 }
function checkElementBelowIsValid(event: MouseEvent) {
const elementBelow = document.elementFromPoint(event.clientX, event.clientY);
// console.log(elementBelow)
// console.log(handleId)
const result: Result = {
elementBelow,
isValid: false,
connection: { source: null, target: null },
connection: { source: null, target: null, sourceHandle: null, targetHandle: null },
isHoveringHandle: false,
};
if (elementBelow && (elementBelow.classList.contains('target') || elementBelow.classList.contains('source'))) {
let connection: Connection = { source: null, target: null };
if (isTarget) {
const sourceId = elementBelow.getAttribute('data-nodeid');
connection = { source: sourceId, target: nodeId };
} else {
const targetId = elementBelow.getAttribute('data-nodeid');
connection = { source: nodeId, target: targetId };
}
const isValid = isValidConnection(connection);
result.connection = connection;
result.isValid = isValid;
result.isHoveringHandle = true;
if ((isTarget && elementBelow.classList.contains('source')) || (!isTarget && elementBelow.classList.contains('target'))) {
let connection: Connection = { source: null, target: null, sourceHandle: null, targetHandle: null };
if (isTarget) {
const sourceId = elementBelow.getAttribute('data-nodeid');
const sourcehandleId = elementBelow.getAttribute('data-handleid');
connection = { source: sourceId, sourceHandle: sourcehandleId, target: nodeId, targetHandle: handleId };
} else {
const targetId = elementBelow.getAttribute('data-nodeid');
const targetHandleId = elementBelow.getAttribute('data-handleid');
connection = { source: nodeId, sourceHandle: handleId, target: targetId , targetHandle: targetHandleId};
}
const isValid = isValidConnection(connection);
result.connection = connection;
result.isValid = isValid;
}
}
return result;
@@ -187,17 +194,20 @@ const BaseHandle = ({
},
]);
const nodeIdWithHandleId = id ? `${nodeId}__${id}` : nodeId;
// const nodeIdWithHandleId = id ? `${nodeId}__${id}` : nodeId;
const handleId = id ? `${id}`: ''
return (
<div
data-nodeid={nodeIdWithHandleId}
data-handleid={handleId}
data-nodeid={nodeId}
data-handlepos={position}
className={handleClasses}
onMouseDown={(event) =>
onMouseDown(
event,
nodeIdWithHandleId,
handleId,
nodeId,
setConnectionNodeId,
setPosition,
onConnect,
src/types/index.ts
+2
View File
@@ -239,6 +239,8 @@ export type OnLoadFunc = (params: OnLoadParams) => void;
export interface Connection {
source: ElementId | null;
target: ElementId | null;
sourceHandle: ElementId | null;
targetHandle: ElementId | null;
}
export enum ConnectionLineType {