NME freezes when selecting a color from the color picker

roland · August 18, 2021, 8:56pm

Hi!
When I try to select the baseColor value from the color picker, I get this error and a blank screen in the browser.

https://nme.babylonjs.com/#J3ZDKQ

Thanks!
R.

Evgeni_Popov · August 18, 2021, 9:51pm

I tracked down the problem to this line:

github.com

BabylonJS/Babylon.js/blob/master/nodeEditor/src/sharedComponents/colorPickerComponent.tsx#L95

    
      
          

                          </div>

                          {

                              this.state.pickerEnabled &&

                              <>

                                  <div className="color-picker-cover" onClick={() => this.setPickerState(false)}></div>

                                  <div className="color-picker-float" ref={this._floatRef}>

                                      <ColorPicker color={color}

                                          onColorChanged={(color: Color3 | Color4) => {

                                              const hex = color.toHexString();

                                              this.setState({ hex, color });

                                              this.props.onColorChanged(hex);

                                          }}

                                      />

                                  </div>

                              </>

                          }

                      </div>

                  );

              }

          }

It will trigger a call to shouldComponentUpdate:

github.com

BabylonJS/Babylon.js/blob/master/nodeEditor/src/sharedComponents/colorPickerComponent.tsx#L50-L60

    
      
          shouldComponentUpdate(nextProps: IColorPickerComponentProps, nextState: IColorPickerComponentState) {

              let result = nextProps.value.toHexString() !== this.props.value.toHexString()            

                  || nextState.hex !== this.state.hex

                  || nextState.pickerEnabled !== this.state.pickerEnabled;

          

              if (result) {

                  nextState.color = nextProps.value;

                  nextState.hex = nextProps.value.toHexString();

              }

              return result;

          }

And result is always true, so we loop between line 95 and shouldComponentUpdate and at some time React stops this with an error.

The thing is I don’t know how to fix the problem, I’m not proficient enough with React, so if someone has a solution…

roland · August 18, 2021, 10:05pm

Neither am I a React guy…

Deltakosh · August 18, 2021, 11:44pm

on it

Deltakosh · August 19, 2021, 12:11am

Fixed! Will be in next nightly!!

Thanks for reporting it!

roland · August 19, 2021, 12:45am

Just want to ask, the issue with the non updating block values will be fixed in the next build as well?

Deltakosh · August 19, 2021, 12:58am

Yes sir!

Topic		Replies	Views
NME swizzle bug introduced in recent commit? Bugs	7	258	October 21, 2021
Nme exercise note Demos and projects	5	356	July 25, 2023
Node Material Post Processes flashing replace colour at initialisation Questions	10	235	September 23, 2023
NME Cube Normals Bugs	2	58	March 11, 2024
Why is it shared when I change the color of the object I clicked using the color picker? Questions material , texture	7	317	May 9, 2022

NME freezes when selecting a color from the color picker

Related Topics