Connecting the panel to code might be a bit challenging for users

The connection in the mouse area of the switch has the following conditions: if the current state of the switchButton is "On," it should change to "Off," otherwise, it should change to "On."

The default state is currently set to "Off," and when the code is written directly, the panel displays the following configuration: when the mouse area's click signal is received, the change state action occurs. The state group associated with the switch button has the state set to "Off." Additionally, the condition is set as "if off, change to On, otherwise change to On."

I expected the panel to display the following:

• The state should be selected as "On."
• The condition should be set to "Off."
• The else statement should be set to "On."

Do I have a misunderstanding, or is this the expected behavior in the panel?

[In cases where a Change State action is applied without conditions] 

-When creating a toggle button

------------------------------------------------------------------------------------------------------

[In cases where a Change State action is applied with specific conditions] 

-In the case of creating a state for a single button click

Typically, when applying the Change State action without conditions, the panel is labeled as 'State2' because, during a click event, the default State1 transitions to State2.

However, in the case of a bug report inquiry, when a click event with conditions is used to transition from the default 'Off' state to 'On,' the expected behavior is for the panel to display 'State' as 'On.' The condition should be that switchButton.state is equal to 'Off,' and the else condition should be 'On.'

I find the usage a bit confusing in this context.

------------------------------------------------------------------------------------------------------

I'm working on a connection in the mouse area of a general switch.

/Code 1/
if (switchButton.state === "On")

else

/Code 2/
if (switchButton.state === "Off")

else

The results of both codes are the same.

Result of Code 1:
When the state is "On", it changes the state to "Off". Otherwise (i.e., when the state is not "On", in this case, when it is "Off"), it changes the state to "On".

Result of Code 2:
When the state is "Off", it changes the state to "On". Otherwise (i.e., when the state is not "Off", in this case, when it is "On"), it changes the state to "Off".

What I want is a toggle function, and the default state of the switch is Off. Therefore, I understand that Code 2 is logically more suitable. However, since I initially wrote Code 1 in the code edit area, it was difficult to understand because the panel was automatically set.

So, what I'm curious about is the approach when adding the first dropdown and condition, and because of the order of the code, it is not easy to understand.

Assuming I don't know the code, I asked a developer who is proficient in code if they can understand the panel based on it. However, I was told that it is difficult to understand the usage just by looking at the panel, and it would be understood through inference.

To create this code in the panel, the condition `switchButton.state === "Off"` is added in the middle of the panel, indicating that it occurs when the state changes to "On." However, in the code, the condition is placed at the very beginning. I understand it now, but it's still not easy to use.