decorator example

class MainLabel{
    constructor(labelText,x,y){

        this.labelText_=labelText || "";
        this.x_=x || 200;
        this.y_=y || 200;
        this.hasBorder_ = false;
        this.hasThickRectBorder_= false;
        this.hasDots_ = false;
        this.width_ = this.labelText_.length * 10;
        this.height_ = 40;

    }
    get x(){
        return this.x_;
    }
    get y(){
        return this.y_;
    }
    get width(){
        return this.width_;
    }
    get height(){
        return this.height_;
    }
    get label(){
        return this;
    }
    draw(){
        strokeWeight(1);
        stroke(0,0,0);
        fill(0,0,0);
        textAlign(CENTER,CENTER);
        text(this.labelText_,this.x_,this.y_);

    }

}
class component extends MainLabel{
    constructor(label){
        super();
        this.label_ = label;
    }
    get label(){
        return this.label_;
    }

    get x(){
        return this.label.x;
    }
    get y(){
        return this.label.y;
    }
    get width(){
        return this.label.width+5;
    }
    get height(){
        return this.label.height+5;
    }

}
class ThickBorderLabel extends component{
    constructor(label){
        super(label);
    }

    draw(){

        rectMode(CENTER);
        strokeWeight(3);
        stroke(0,0,0);
        noFill();
        rect(this.x,this.y,this.width,this.height);
        this.label.draw();

    }

}
class ThinBorderLabel extends component{
    constructor(label){
        super(label);
    }

    draw(){

        rectMode(CENTER);
        strokeWeight(1);
        stroke(0,0,0);
        noFill();
        rect(this.x,this.y,this.width,this.height)
        this.label.draw();

    }

}
class DotsBorderLabel extends component{
    constructor(label){
        super(label);
    }

    draw(){
        var x_ = this.x;
        var y_ = this.y;
        var width_ = this.width;
        var height_ = this.height;
        ellipseMode(CENTER);
        strokeWeight(1);
        fill(255,0,0);
        stroke(255,0,0);
        //above label
        for(var i=0;i<width_/10 + 1;i++){
            ellipse((x_-width_/2+i*10),(y_-height_/2),5,5);
        }
        //below label
        for(var i=0;i<width_/10 +1;i++){
            ellipse((x_-width_/2+i*10),(y_+height_/2),5,5);
        }
        //left of label
        for(var i=0;i<height_/10-1;i++){
            ellipse((x_-width_/2),(y_-height_/2+((i+1)*10)),5,5);
        }
        //right of label
        for(var i=0;i<height_/10-1;i++){
            ellipse((x_+(width_+6)/2),(y_-height_/2+((i+1)*10)),5,5);
        }
        this.label.draw();


    }

}

var Label = function(labelText,x,y){
    return new MainLabel(labelText,x,y);
};

var labels=[];
var thickBorderButton;
var borderButton;
var dotButton;
var removeButton;
var selectLabelRadio;
var selected;
var numLabels;

/*
  these four functions are called when button is pressed
  modify the "add" functions to apply decorator to the
  selected label.
*/
function addThinBorder(){
    labels[selected] = new ThinBorderLabel(labels[selected]);
}
function addThick(){
    labels[selected] = new ThickBorderLabel(labels[selected]);
}
function addDots(){
    labels[selected]= new DotsBorderLabel(labels[selected]);
}


/*
  Challenge: removeLastBorder function.  If you add this feature
  use this function to remove the most recent decorator
  from the selected label
 */
function removeLastBorder(){
    labels[selected] = labels[selected].label;
}


/*********************************************************/
/* NOTHING BELOW THIS COMMENT IS TO BE MODIFIED          */
/*********************************************************/

function setup(){
    createCanvas(600,500);

    thickBorderButton=createButton("Add Thick Border");
    thickBorderButton.mousePressed(addThick);
    thickBorderButton.position(10,550);
    borderButton=createButton("Add Thin Border");
    borderButton.mousePressed(addThinBorder);
    borderButton.position(160,550);
    dotButton=createButton("Add Dots Border");
    dotButton.mousePressed(addDots);
    dotButton.position(310,550);

    removeButton=createButton("Remove Last");
    removeButton.mousePressed(removeLastBorder);
    removeButton.position(460,550);

    selectLabelRadio=createRadio();
    numLabels=5;
    for(var i=0;i<numLabels;i++){
        selectLabelRadio.option(""+i,"Label "+(i+1));
        labels[i] = Label("Label "+(i+1), random(50,550), random(20,480));
    }
    selectLabelRadio.selected(0);

}


/* This function is not to be modified*/
function draw(){
    selected=selectLabelRadio.value();
    background(255,255,255);
    for(var i=0;i<numLabels;i++){
        labels[i].draw();
    }
}