P5.js, Drawing App

[James McDaniels]

Hi,
I'm trying to create the editable shapes tool. I have 3 buttons: the edit button, add vertices button and finish button. The tool works, but when I click on other tools in my drawing app, the button doesn't disappear.

How can I make my button disappear when I press the other tools in my drawing app?

Watch this video below to see my problem
https://www.awesomescreenshot.com/video/10674856?key=2920106b409fc41253b438c190ae9a8f

Thank you

My code is below.
https://jsfiddle.net/f6c1qnup/

[Campbell Ritchie]

If at all possi9ble, pelase post the code here; some people are reluctant to open distant links.

[James McDaniels]

function editableShapeTool(){
    this.name = "editableShapeTool";
    this.icon = "assets/editableShapesTool.png";
    
    var editButton = createButton('Edit Shape');
    var finishButton = createButton('Finish Shape');
    var editMode = false;
    var currentShape = [];
    this.setup = function(){
        // fill(255)
        noFill();
        loadPixels();
        
        editButton.mousePressed(function()
        {
            if(editMode)
                {
                editMode = false;
                editButton.html('Edit Shape');
                }
                else{
                    editMode = true;
                    editButton.html('Add Vertices');
                    }
        })
        finishButton.mousePressed(function()
        {
            editMode =  false;
            draw();
            loadPixels(); 
            currentShape = [];
            editButton.html('Edit Shape');
        })
    }
    this.setup();
    this.mousePressOnCanvas = function()
    {
        if(mouseX > 0 && 
            mouseX < width &&
            mouseY > 0 &&
            mouseY < height
        )
                {
                    return true;
                }
        return false;
    }
    this.draw = function()
    {
        updatePixels();   
        if(this.mousePressOnCanvas() && mouseIsPressed)
        {
            if(!editMode)
            {
            currentShape.push
                    ({
                        x: mouseX,
                        y: mouseY
                    });
            }
            else
            {
                for(var i = 0; i < currentShape.length; i++)
                {
                    if(dist(currentShape[i].x,  
                        currentShape[i].y, mouseX, mouseY) < 15)
                    {
                        currentShape[i].x = mouseX;
                        currentShape[i].y = mouseY;
                    }
                }
            }
        }
    beginShape();
        for(var i = 0; i < currentShape.length; i++)
        {
            vertex(currentShape[i].x, 
                currentShape[i].y);
                if(editMode){
                    fill('red');
                    ellipse(currentShape[i].x, currentShape[i].y, 20, 20);
                    noFill();
                }
        }
    endShape();
    this.unselectTool = function() {
        //clear options
        select(".options").html("");
        select("#finishbutton").remove()
        select("#editbutton").remove()  
        }
        this.populateOptions = function()
        {
            select(".options").html("<div id='editButton' style='margin:30px'></div>");
            select(".options").html("<div id='finishButton' style='margin:40px; margin-left:50px;'></div>");
    
        }
    
    }
}

[Campbell Ritchie]

Thank you.

What language is that? Is it JS? We have a forum where we usually discuss JS questions and we can move you thither.

[James McDaniels]

Your welcome
No problem

Yes, this is JavaScript.
P5.js, to be exact.

[Campbell Ritchie]

Thank you: adding you to the HTML/JS forum.

[James McDaniels]

Okay
Thank you for your help!