Warning: `NaN` is an invalid value for the `top` css style property.

[CarlousF]

Hi there,

I'm getting the following error after adding the first node to the diagram, and proceeding to select it:

Warning: 'NaN' is an invalid value for the 'top' css style property. in div in NodeWidget in div in NodeLayerWidget in div

After inspecting the HTML element in my browser, I can see that the "top" CSS property is not being set for the first node added to the diagram, as it is for subsequent nodes that I add to the diagram:

<div class="node srd-node srd-node--selected " data-nodeid="5070b2af-7155-4072-8738-61d3dbc9b2b0">

I am also unable to move the first node around.

I couldn't find a bug in my own code that could be causing this, so I wanted to see if this is an issue anyone else has encountered before?

[cullenmcmahon]

I just ran into this problem as well. I get mine once I start adding some number of nodes. The number seems to change per attempt to reproduce, so maybe it's a timing issue?

[JokerNN]

Hey @CarlousF and @cullenmcmahon . Can you please share if it happens in some demo or in your code? Can you share the code where it reproduces? Thanks in advance

[cullenmcmahon]

I cleaned up some of the parens in the top definition, and haven't been able to reproduce since. I'll let you know if I run into it again. The classes I modified most are below.

/**
 * @author Dylan Vorster
 */
export class SimNodeWidget extends React.Component<SimNodeWidgetProps, SimNodeWidgetState> {
	static SimNodeWidgetProps = {
		size: 150,
		node: null
	};

	constructor(props: SimNodeWidgetProps) {
		super(props);
		this.state = {
			size: 50
		};
		this.RenderPorts = this.RenderPorts.bind(this)
	}
	RenderPorts() {
		let portElements = []
		let number_of_outputs = this.props.node.number_of_outputs
		let number_of_inputs = this.props.node.number_of_inputs
		for(let i=0; i<number_of_inputs; i++) {
			portElements.push(
				<div
					style={{
						position: "absolute",
						zIndex: 10,
						top: ((i+1)*(this.state.size-8)/(number_of_inputs+1)) - 8,
						left: -8
					}}
				>
				<PortWidget name={"left"+i.toString()} node={this.props.node} />
			</div>
			)
		}
		for(let i=0; i<number_of_outputs; i++) {
			portElements.push(
				<div
					style={{
						position: "absolute",
						zIndex: 10,
						left: this.state.size - 8,
						top: ((i+1)*(this.state.size-8)/(number_of_outputs+1)) - 8
					}}
				>
					<PortWidget name={"right"+i.toString()} node={this.props.node} />
				</div>
			)
		}
		return portElements
	}


	render() {
		return (
			<div
				className={"sim-node"}
				style={{
					position: "relative",
					width: this.state.size,
					height: this.state.size
				}}
			>
				<svg
					width={this.state.size}
					height={this.state.size}
					dangerouslySetInnerHTML={{
						__html:
							`
          <g id="Layer_1">
          </g>
          <g id="Layer_2">
            <polygon fill="blue" stroke="#000000" stroke-width="3" stroke-miterlimit="10" points="0,` +
							this.state.size +
							` ` +
							this.state.size +
							`, ` +
							this.state.size +
							` ` +
							this.state.size +
							`, ` +
							` 0 ` +
							` ` +
							`0 ` +
							`,` +
							`0 ` +
							` "/>
          </g>
        `
					}}
				/>
				{this.RenderPorts()}
				{this.props.node.function_name}
			</div>
		);
	}
}

and

/**
 * @author Dylan Vorster
 */
export class SimNodeWidget extends React.Component<SimNodeWidgetProps, SimNodeWidgetState> {
	static SimNodeWidgetProps = {
		size: 150,
		node: null
	};

	constructor(props: SimNodeWidgetProps) {
		super(props);
		this.state = {
			size: 50
		};
		this.RenderPorts = this.RenderPorts.bind(this)
	}
	RenderPorts() {
		let portElements = []
		let number_of_outputs = this.props.node.number_of_outputs
		let number_of_inputs = this.props.node.number_of_inputs
		for(let i=0; i<number_of_inputs; i++) {
			portElements.push(
				<div
					style={{
						position: "absolute",
						zIndex: 10,
						top: ((i+1)*(this.state.size-8)/(number_of_inputs+1)) - 8,
						left: -8
					}}
				>
				<PortWidget name={"left"+i.toString()} node={this.props.node} />
			</div>
			)
		}
		for(let i=0; i<number_of_outputs; i++) {
			portElements.push(
				<div
					style={{
						position: "absolute",
						zIndex: 10,
						left: this.state.size - 8,
						top: ((i+1)*(this.state.size-8)/(number_of_outputs+1)) - 8
					}}
				>
					<PortWidget name={"right"+i.toString()} node={this.props.node} />
				</div>
			)
		}
		return portElements
	}


	render() {
		return (
			<div
				className={"sim-node"}
				style={{
					position: "relative",
					width: this.state.size,
					height: this.state.size
				}}
			>
				<svg
					width={this.state.size}
					height={this.state.size}
					dangerouslySetInnerHTML={{
						__html:
							`
          <g id="Layer_1">
          </g>
          <g id="Layer_2">
            <polygon fill="blue" stroke="#000000" stroke-width="3" stroke-miterlimit="10" points="0,` +
							this.state.size +
							` ` +
							this.state.size +
							`, ` +
							this.state.size +
							` ` +
							this.state.size +
							`, ` +
							` 0 ` +
							` ` +
							`0 ` +
							`,` +
							`0 ` +
							` "/>
          </g>
        `
					}}
				/>
				{this.RenderPorts()}
				{this.props.node.function_name}
			</div>
		);
	}
}

[CarlousF]

Hi All,

Just to update - this was indeed an error on my part, and related to a bug in the custom Node I created.

Closing this issue.

Thanks

[dacopan]

Hi All,

Just to update - this was indeed an error on my part, and related to a bug in the custom Node I created.

Closing this issue.

Thanks

Can you explain what was the bug? I have same error

[drummerjolev]

I'm getting that error too, unable to track it down. Could you help @CarlousF?

[Jubayer05]

I'm also getting the same error. Can anyone please help to solve the issue???

[ToTheHit]

Check your model's options types.
In my case, I set model.setGridSize('15px') but gridSize should be a number and this method returned NaN.

react-diagrams/packages/react-canvas-core/src/entities/canvas/CanvasModel.ts

Lines 99 to 104 in 3060496

	getGridPosition(pos: number) {
	if (this.options.gridSize === 0) {
	return pos;
	}
	return this.options.gridSize * Math.floor((pos + this.options.gridSize / 2) / this.options.gridSize);
	}