score:0

based on adding a width and height suggested by leonardo, i added a class and this worked for me too. background, border etc are optional possibilities as per your need.

i had to add !important as it wasn't overriding the default settings otherwise.

.node-custom-handle {

  width: 15px!important;
  height: 15px!important;

  background: whitesmoke!important;
  border: 1px solid black!important;
  border-radius: 4px!important;
}

<handle
    type="target"
    position="top"
    id="t"
    classname="node-custom-handle"
    onconnect={(params) => console.log("handle onconnect", params)}
  />

score:1

i did that passing a custom node with its own handles:

const node_types = {
  yourtype: customnode,
};

...
<reactflow
  nodetypes={node_types}
  ... 
/>

then, at the customnode, i used the handle component with custom height and width:

import { handle, position } from 'react-flow-renderer';

const customnode = (...) => {
  ...
  return <box>
    ...
    <handle
      type="target"
      position={position.left}
      style={{ // make the handle invisible and increase the touch area
        background: 'transparent',
        zindex: 999,
        border: 'none',
        width: '20px',
        height: '20px',
      }}
    />
    <circleicon
      style={{}} // fix the position of the icon over here
    />
  </box>;
}

i think its a bit hacky, but that's the way i found to accomplish it.


Related Query

More Query from same tag