Possible bug issues from creating curve union of multiple curves

Question

I have an issue with using curveunion to combine curves into one object. Here is the link to my problem:

https://jsfiddle.net/aaronamran/nskuy632/4/

Here is the code for the beam class:

class beam {
  constructor(data){
    if (typeof(data[data.length-1]) == 'string') {this.state = data.pop()}
      else {this.state = "SHOW"}
    this.d = data.slice(0); //make a copy
    this.r = data.pop(); // radius
    data.shift(); // drop the type string
    if (typeof data[1] === 'string') {
      this.col = [data.shift(),data.shift()]; //droping the attributes for fillcolor and      gradientcolor into an array
    } else {
      this.col = [ 'lightgrey', 'lightgrey']; data.shift(); // drop the name and use default     uniform color
    }
    this.p = data; // end points of center line
    // loop over pairs of points

 this.angle = -Math.atan2(this.p\[1\]\[1\]-this.p\[0\]\[1\],this.p\[1\]\[0\]-this.p\[0\]\     [0\])+90\*deg2rad;
 this.attr = {opacity: true, layer:defaultMecLayer, fillcolor:this.col\[0\],
 gradient:'linear', gradientSecondColor:this.col\[1\], gradientAngle:this.angle,     hasInnerPoints:true, ...normalStyle};
 this.b = board.create('curve', \[\[\],\[\]\], {...normalStyle, hasInnerPoints:true});
  let beams = \[\], pointsArray = \[\], pointNameArray = \[\], beamUnions = \[\];
  let x, y, dx, dy, l , c;
  console.log('this.p.length is here: ' + this.p.length);
  // variable names plays a big role, has to be different in every iteration to prevent overriding
  // previous problem with only 1 beam appearing is due to overwriting of variables
  // need to use IIFE and explain why

 // Initialize arrays to store function values
 var xArray = [], yArray = [], dxArray = [], dyArray = [], lArray = [], cArray = [];
 
 for (let i = 0; i \< this.p.length; i+=2) {
  (function () {
  var pointName1 = `p${i+1}`, pointName2 = `p${i+2}`, beamName1 = `b${i+1}`;
  pointNameArray.push(pointName1);
  pointNameArray.push(pointName2);
  this\[pointName1\] = board.create('point', this.p\[i\], {visible:true, fixed:false,     name:pointName1});
  this\[pointName2\] = board.create('point', this.p\[i+1\], {visible:true, fixed:false,     name:pointName2});
  pointsArray.push(this\[pointName1\]);
  pointsArray.push(this\[pointName2\]);

  // Store the function values in arrays
    xArray[i] = () => this[pointName1].X();
    yArray[i] = () => this[pointName1].Y();
    dxArray[i] = () => this[pointName2].X() - this[pointName1].X();
    dyArray[i] = () => this[pointName2].Y() - this[pointName1].Y();
    lArray[i] = () => Math.sqrt(dxArray[i]()**2 + dyArray[i]()**2);
    cArray[i] = () => this.r/lArray[i]();

    var bneu = board.create('curve', [[],[]], {strokeWidth:0, hasInnerPoints:true});
    bneu.updateDataArray = function () {
    this.dataX = [xArray[i]()+dyArray[i]()*cArray[i](), xArray[i]()+dxArray[i]()+dyArray[i]()*cArray[i](), xArray[i]()+dxArray[i]()-dyArray[i]()*cArray[i](), xArray[i]()-dyArray[i]()*cArray[i](), xArray[i]()+dyArray[i]()*cArray[i]()];
    this.dataY = [yArray[i]()-dxArray[i]()*cArray[i](), yArray[i]()+dyArray[i]()-dxArray[i]()*cArray[i](), yArray[i]()+dyArray[i]()+dxArray[i]()*cArray[i](), yArray[i]()+dxArray[i]()*cArray[i](), yArray[i]()-dxArray[i]()*cArray[i]()];}  

  beams.push(bneu);
  }).call(this);
  }
            
    if (this.p.length === 2) {
             this.b = beams[0];
             this.b.setAttribute(this.attr);
             console.log('if condition is triggered!');
   } else if (this.p.length === 4) {
   this.b = board.create('curveunion', [beams[0], beams[1]], this.attr); 
   } else {
  // does not work for more than 2 beams?   ,[6,5],[3,8]
  // curveunion does not work if no. of curves != 2, meaning only works if 2 curves at 1 time
  // curveunion of a previous curveunion and a new curve object works
  // Combine every two beams into a curve union step by step
        for (var i = 0; i < beams.length; i += 2) {
        if (i + 1 < beams.length) {
        let newBeamUnion = board.create('curveunion', [beams[i], beams[i + 1]], this.attr);
        beamUnions.push(newBeamUnion);
    } else {beamUnions.push(beams[i]);} // If there's an odd number of beams, add the last beam as is
    }
        // Combine the curve unions if there are more than one
        this.b = board.create('curveunion', beamUnions, this.attr); 
    }         

 this.b.rendNode.setAttributeNS(null, 'fill-rule', 'evenodd');  //Workaround for correct fill,      see https://github.com/jsxgraph/jsxgraph/issues/362

 // Enable object animation
 //this.p8.moveTo(\[1,6\], 2000);
 // check buggy issues with curveunion

// group points
this.b.obj = [this.b];
this.b.parent = this;  
//const pointgroup = board.create('group', pointsArray); 
//const pointgroup = board.create('group', pointsArray).setRotationCenter('centroid').setRotationPoints(pointsArray);

// implement state switching
this.obj = [this.b];

// state init
if (this.state == "show") { show(this) }
if (this.state == "hide") { hide(this) }
if (this.state != "SHOW" && this.state != "HIDE") { makeSwitchable(this.obj, this)}
if (this.state == "SHOW") { SHOW(this) }
if (this.state == "HIDE") { HIDE(this) }
this.loads = [];

 }
  hasPoint(pt) {return isOn(pt,this.b)}
  data(){ var a = this.d.slice(0); a.push(this.state); return a}
  name(){ return targetName(this) }
 }

On the board, there are multiple rectangles (called beams) that are created using curve objects. In the html section, every two coordinate arrays is used to create the endpoints of one beam. Since there are 8 coordinates, there are 4 beams in the board output.

The code for the issue i am facing lies in the class called beam. Inside the class, i used if conditional statements to use the number of user input coordinates, and create the corresponding beams. However, the code is working as expected when there are only 2 beams (4 coordinates). (see image below)

Correct functionality of beam object

When a 3rd and 4th beam is added, the double clicking of the object does not work properly anymore, in the sense that the object opacity does not function as expected. (see image below)

Incorrect behavior of multiple beam objects

The function to switch object states works perfectly fine for all other objects that requires it. My assumption is that the way how the curve union compiles the curves is limited to only two curves. I am most likely to be wrong with my assumption, but if this whole problem is just an unsolvable bug, then it's alright.

Best regards, Aaron Amran