BUG: Outline tool is BUGGY!!

[NullOperator404]

Functionality has been implemented for the Outline tool (Names/Numbers), but it is incredibly buggy, and I'm at a loss as to why JS is behaving like this.

ISSUES:

1. JAVASCRIPT NOT CARRYING OUT INSTRUCTIONS FULLY

The Name/Number Outline tool utilizes the same selection panel as the Text tool does for selecting outline thickness and color. The way this is supposed to work is the user chooses a color, then clicks on one of the available thickness options. That CLICK then applies the outline to the element, as well as updating the toolbox to reflect the changes. However, since implementing code for the Name/Number tool, the application is no longer working according to my design. Sometimes, clicking the outline thickness will update the toolbox, but NOT THE ELEMENT! Other times, it will do BOTH. And yet still other times, it will update the ELEMENT, but not the TOOLBOX! If I click a second time on the outline thickness, it will correct the part that was not updated. This shouldn't be necessary. Users should not have to click TWICE. The console is reporting no errors, so this glitch is either in the browser or in JS itself.

2. JAVASCRIPT IS IGNORING IF/ELSE CONDITIONS

Since the Name/Number tool uses the same color select boxes as TEXT, it was necessary to write some conditional logic to ensure JS knows which element to apply the changes to. In a nutshell, whenever the user clicks an outline thickness, JS is instructed to evaluate two variables: nameOn and numOn. By default, these two vars are set to FALSE. If the user clicks one of the two outline features in the Name/Number toolbox, then the corresponding var is set to TRUE. This notifies JS that the user is editing a NAME or NUMBER element, and not a conventional TEXT element.

So the condition logic works like this:

if(nameOn == true) {
     //DO THINGS TO THE NAME ELEMENT
} else if(numOn == true) {
   //DO THINGS TO THE NUMBER ELEMENT
} else if(numOn == false && nameOn == false) {
  //DO THINGS TO THE FOCUSED TEXT ELEMENT
}

The above logic seems pretty straightforward, yet during my tests JS is still executing condition 3, even if one or both vars evaluated to TRUE! If I understand my if-else practice correctly, then the above code SHOULD execute as follows: If condition 1 = true, then ignore conditions 2 & 3. If condition 1 = false, move on to condition 2. If condition 2 = true, ignore condition 3. If condition 2 = false, then move on to condition 3. By this logic, condition 3 should NEVER execute unless both conditions 1 & 2 evaluate to FALSE! So why is it running this code anyway?!

I am truly puzzled, and this problem seems to be similar to an unresolved problem I have with the drag/scale feature I was working on months ago. In that code, JS is given specific limitations on how far an element can be dragged left, right, up, down (the limits being the confines of the print area). However, sometimes it works, sometimes it doesn't and I don't why. Once more, I don't know if this is a browser problem or a glitch in the JS model itself. Nevertheless, during tests JS would cheerfully exceed the programmed limits and would not throw any errors.

Back to the subject matter of this post, I didn't have any problems from the Outline feature until the Name/Number conditional logic was added. I will continue to update this thread.

[NullOperator404]

SOLVED

Looking over the code tonight, I was able to track down the cause of the bugs. Within the code blocks for names & numbers for each outline thickness, the CSS property strokeWidth was spelled with a capital "S," so JS was ignoring the line of code, and thus not applying the change to the DOM element.

After correcting these lines and realizing a few other minor syntax errors needed to be addressed, the Outline tool for names and numbers now works properly.