#Custom node has weird margin outside it

1 messages · Page 1 of 1 (latest)

last oak
#

I've created a custon node with a different background color, however there's a weird border around it from the original node structure? How do I fix it. I'm using dagre js

image.png
kindred frigate
#

Did you reuse one of the built-in node names for your custom node?

#

input / output / default?

last oak
#

oh yeah default

#

thanks

#

also any way i can get the auto-layout example? i've just finished school and i'm not in college yet so i don't have access to either edu emails

kindred frigate
last oak
#

okay will do thanks

last oak
# 
export default memo(({ data, isConnectable }: { data: Node, isConnectable: boolean}) => {
  return (
    <div className={` w-48 shadow-md rounded-md bg-card  ${data.selected ? 'border-primary' : 'border-gray-300'}`}>
      <Handle type="target" position={Position.Top} className="w-2 h-2" />
      <div className="flex flex-col">
        <div className={`text-sm font-medium ${data.selected ? 'text-foreground' : 'text-muted-foreground'}`}>{data.question}</div>
        <div className="text-xs text-gray-500">{data.summary}</div>
      </div>
      <Handle type="source" position={Position.Bottom} className="w-2 h-2" />
    </div>
  );
});
image.png
kindred frigate
#

Doesn't seem like the nodes you have on your first screenshot actually use that node type

#

A bit more context would be helpful though, or even a repro

Here's a simple example: v

last oak
#

sorry

kindred frigate
#

Do your initial nodes actually use type: 'kokoniNode' or not?

#

Check the sandbox I linked, which shows you how to properly implement a custom node (in the example it's a "position-logger" node)

last oak
# 
export const generateFlowElements = (rootNode: Node) => {
  if (!rootNode) return { nodes: [], edges: [] };

  const nodes: any[] = [];
  const edges: any[] = [];
  
  // Create the root node
  const rootFlowNode = {
    id: `node-${rootNode.id}`,
    type: 'kokoniNode',
    data: rootNode,
    position,
  };
  
  nodes.push(rootFlowNode);
  
  // Recursively create nodes and edges for children
  const processNode = (node: Node, parentId: string) => {
    if (!node.children || node.children.length === 0) return;
    
    node.children.forEach((child, index) => {
      const childId = `node-${child.id}`;
      
      // Create child node
      const childNode = {
        id: childId,
        type: 'kokoniNode',
        data: child,
        position,
      };
      
      nodes.push(childNode);
      
      // Create edge from parent to child
      edges.push({
        id: `edge-${parentId}-${childId}`,
        source: parentId,
        target: childId,
        type: edgeType,
        animated: true,
      });
      
      // Process child's children
      processNode(child, childId);
    });
  };
  
  // Start processing from the root node
  processNode(rootNode, `node-${rootNode.id}`);
  
  return { nodes, edges };
};```
#

this is my function that generates the nodes

kindred frigate
#

Create your nodeTypes object outside of your component (check sandbox link ^^)

#

Also can you check your browsers element-inspector to see what your node wrapper has for class names? Should have sth like react-flow__node-kokoniNode - is that correct?
Can you see what styles create the white bg and padding? 🤔

last oak
#

<div class="react-flow__node react-flow__node-kokoniNode nopan selected selectable draggable" data-id="node-7" data-testid="rf__node-node-7" tabindex="0" role="button" aria-describedby="react-flow__node-desc-1" style="z-index: 1000; transform: translate(339px, 182px); pointer-events: all; visibility: visible;"><div class="w-48 shadow-md rounded-md bg-card border-2 border-primary"><div data-nodeid="node-7" data-handlepos="top" data-id="1-node-7-null-target" class="react-flow__handle react-flow__handle-top nodrag nopan w-2 h-2 target connectable connectablestart connectableend connectionindicator"></div>...</div>

#

i think it's this element

last oak
kindred frigate
#

Mhh... 🤔
Can you check what class name exactly applies the background/padding?
Should be visible in the inspector

last oak
#

so doing this fixes that

image.png
#

but it feels like a weird fix

kindred frigate
#

What styles are you importing exactly?
This should be enough

import "@xyflow/react/dist/style.css";
last oak
#

i copied this xy-theme.css from an example

#

oh

#

yeah its because of that

#

ill update the imports

#

thanks a lot