question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Edge centered when using renderNode

See original GitHub issue

Hi, I’m trying to use the renderNode function to change the color of the node, as well as the border thickness and color.

Here is my code :

const onRenderNode = (nodeRef: any,data: any,index: number,selected: boolean,hovered: boolean) => {
        return (
            <g>
                <symbol viewBox="0 0 150 150" id={`myNode-${data.id}`} width="150" height="150">
                    <rect  id={`${data.type}`}  x="0" y="0" rx="4" ry="4" height="50" width="100" fill={(data.hexColor)?data.hexColor:"#FF00FF"} stroke="#FFFF00" strokeWidth={(hovered)?"4":"0%"} onContextMenu={(e)=>contextMenuHandler(e,data)}/>
                </symbol>
                <use xlinkHref={`#myNode-${data.id}`} x="-50" y="-25"></use>
            </g>
            );
    }

I added an id property to data to be able to link this to my model

The probleme is the the arrow is pointing in the middle of the node, like this :

image

And I don’t know what i’m missing here, can you help me ?

Have a nice day !

Issue Analytics

  • State:open
  • Created 3 years ago
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
Aviemuscacommented, Nov 24, 2020

I’m not sure what the problem is for mbonig’s case. But as a general comment for others, it seems crucial to give the className of “node” to the returned use tag in the renderNode function, for the edge to follow the svg contour.

0reactions
mbonigcommented, Nov 13, 2020

I’m having the same issue as OP. I’ve got the following renderNode:

const renderNode = (nodeRef, node: MapNode, id, selected, hovered) => {
    const children = node.type.sort().reverse().map(t => (<use
      id={t}
      key={t}
      x={-100 / 2}
      y={-100 / 2}
      width={100}
      height={100}
      xlinkHref={'#' + t}
    />));

    return (
      <g className="node"
              x={-100 / 2}
              y={-100 / 2}
              width={100}
              height={100}>
        {children}
      </g>
    );
  };

where the linked shapes look like this:

<symbol viewBox="0 0 100 100" id="1_slow" width="100" height="100" fill={SLOW_COLOR}>
      <circle r={10} cx={50} cy={50}/>
</symbol>

But I have my edges overlapping the nodes and going all the way to the center:

image

The two examples I can find of using this both don’t use the renderNode function, and just rely on the types, I think this problem is specific to using the renderNode, are there examples of that somewhere?

Read more comments on GitHub >

github_iconTop Results From Across the Web

RenderNode - Android Developers
For example when using RenderNode with a custom View, ... be false and the pivot used for rotation will return to default of...
Read more >
graphics/java/android/graphics/RenderNode.java
a single thread may interact with a RenderNode at any given time. It is critical ... public void end(RecordingCanvas canvas) {. if (canvas...
Read more >
5 Ways to Add a Vertex in 3DS Max | Rendernode
Next, with the edge mode option clicked, select the edge you want to add a vertex to, or multiple vertices, and select an...
Read more >
Material Renders with PBR Render Node in Substance ...
Substance Designer's PBR Render node is a raytraced render-engine inside a single node, and in this video we show you how to use...
Read more >
DIY Renderfarm Building Tutorial for Distributed Blender ...
A text version of this video is available here https://bit.ly/2R8gmFeAccelerate your renders with a Render Farm!A render farm is simply a ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found