Feature Request: Allow passing `data` property to individual Ports
cliffordfajardo opened this issue · comments
Description
It would be useful if port objects supported the data
property that Node and Edge's support (types.ts file).
This would allow the user to add additional meta information about the port
Motivation for feature
I have a device with 2 ports; 1 on the left and one on the right
This port is connected to multiple other edges / nodes on the canvas from a user point of view
I'd like to be able to check port.data
, which contains my own data, before modifying a port object.
In the example below, I added red-port
class to a port that I didn't intentionally intent to (the left red port in the image)
I was doing something like this:
reaflowNode.ports.forEach(port => {
port.className = "red-port"
});
then , realized after looking at my code, that the concept of data
for port didn't exist.
Having data
on port objects, would allow users to conditionally operate on the port
reaflowNode.ports.forEach(port => {
if(port.data.remote_hostnames.includes('SOME_VALUE')){
port.className = "red-port"
}
});
References
I tried adding data
directly on the port objects and I get an error. It looks like its from Elkjs?
Maybe the elkjs library doesn't like port objects with data
property on them 🤔😢
Steps to reproduce
- Clone
reaflow
repo - npm i
- run the following commands to get the dev server running and story book: (separate terminal tabs)
tab1: npm run build:watch
tab2: npm run start
- Add
data
property to a node inside of thePort.stories.tsx
file:
Port.stories.tsx
nodes={[
{
id: '1',
text: 'Node 1',
ports: [
{
id: '1-from',
width: 10,
height: 10,
side: 'SOUTH',
data: {
hostnames: 'test',
remote_hostnames: ['']
}
},
{
id: '1-to',
width: 10,
height: 10,
side: 'NORTH',
data: {
hostnames: 'test',
remote_hostnames: ['']
}
}
]
},
{
id: '2',
text: 'Node 2',
ports: [
{
id: '2-from',
width: 10,
height: 10,
side: 'SOUTH',
data: {
hostnames: 'test',
remote_hostnames: ['']
}
},
{
id: '2-to',
width: 10,
height: 10,
side: 'NORTH',
data: {
hostnames: 'test',
remote_hostnames: ['']
}
}
]
}
]}
Stacktrace
Layout Error: Error: java.lang.Error: Severe implementation error in the Json to ElkGraph importer.
at vcb.$y [as Wd] (elk.bundled.js:6353:88251)
at vcb.ez [as _d] (elk.bundled.js:6353:88512)
at vcb.Yy (elk.bundled.js:2713:48)
at new vcb (elk.bundled.js:1385:20)
at aqd (elk.bundled.js:5211:184)
at Bqd (elk.bundled.js:3644:56)
at Drd.Erd [as td] (elk.bundled.js:6353:395495)
at reb (elk.bundled.js:3461:67)
at grd (elk.bundled.js:5054:171)
at Fqd (elk.bundled.js:5542:238)
at drd (elk.bundled.js:5312:176)
at lqd (elk.bundled.js:4935:155)
at Zqd (elk.bundled.js:4113:75)
at drd (elk.bundled.js:5312:202)
at qvd (elk.bundled.js:5982:142)
at h.dispatch (elk.bundled.js:6287:473)
at h.saveDispatch (elk.bundled.js:6287:603)
at elk.bundled.js:6288:162
(anonymous) @ useLayout.ts:133
Promise.catch (async)
(anonymous) @ useLayout.ts:129
commitHookEffectListMount @ react-dom.development.js:23150
commitPassiveMountOnFiber @ react-dom.development.js:24926
commitPassiveMountEffects_complete @ react-dom.development.js:24891
commitPassiveMountEffects_begin @ react-dom.development.js:24878
commitPassiveMountEffects @ react-dom.development.js:24866
flushPassiveEffectsImpl @ react-dom.development.js:27039
flushPassiveEffects @ react-dom.development.js:26984
(anonymous) @ react-dom.development.js:26769
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
Show 11 more frames