Remove centroid points on double click from the list of centroid points.

I am trying to remove centroid points on double click from the list of centroid points. The problem is when I double-click the first time, it works. But later it doesn’t work. I am not sure where the actual problem is. Here is my notebook link: Remove centroid points after double click / JS | Observable

Below is my code snippet, which needs to be checked.

interactive_canvas.addEventListener("click", function (e) {
    clicks++;
    var m = getPosition(e);
    // this point won't be added to the points array
    // it's here only to mark the point on click since otherwise it will appear with a delay equal to the timeout
    drawCoordinates(m, pointSize);
    if (clicks == 1) {
      setTimeout(function () {
        if (clicks == 1) {
          // on click add a new point to the points array
          points.push(m);
          //console.log(points);
        } else if (clicks == 2) {
          //Double Click will remove the centroid point from the MAIN ARRAY
          var RemM = getPosition(e); //Getting a new position (x, y) due to double click
          drawCoordinates2(RemM, pointSize); // Defining color RED for the double click
          Removpoint.push(RemM); //Pushed the centroid points ("RemM") due to double to an array "Removpoint"
          for (let i = 0; i < new_centropid_find.length; i++) {
            const distances_Removpoint = Math.hypot(
              new_centropid_find[i].x - RemM.x,
              new_centropid_find[i].y - RemM.y
            );
            mindistance.push(distances_Removpoint);
          }
          const minimumDistance123 = Math.min(...mindistance);
          const indexOfMinimumDistance =
            mindistance.indexOf(minimumDistance123);
          checking123.push(indexOfMinimumDistance);
          new_centropid_find.splice(checking123, 1);
          //clicks.stopPropagation();
        }
        clicks = 0;
      }, timeout);
    }
  });

Any help will be highly appreciated. Thanks in advance!

1 Like

Hi Joy!

Responding here rather than in DM to ask others to help.

As you pointed out, this part of your code seems to be the area to work on:

Removpoint.push(RemM); //Pushed the centroid points ("RemM") due to double to an array "Removpoint"
          for (let i = 0; i < new_centropid_find.length; i++) {
            const distances_Removpoint = Math.hypot(
              new_centropid_find[i].x - RemM.x,
              new_centropid_find[i].y - RemM.y
            );
            mindistance.push(distances_Removpoint);
          }
1 Like

Here, currently “new_centropid_find” is not updating after double click. If this variable gets updates every time I double click and remove an element, then I think my problem will solve.

1 Like

Hi again :slight_smile: This is a pretty hacky solution, but it generally works:

I wrote some functions that generate circles in canvas that listen to click events, where a first click draws a circle and the second click removes it. The notebook is intentionally basic, and the code is organized in a more customary ‘Observable way’, where each variable and function are entered as a single cell.

Your code is highly complex and there’s a lot in there that I don’t follow. When I read the bit that is posing a challenge at the moment, I see an iterator that will continue to add circles, but nothing to remove. I see that you commented out a bit of code that was focused on removing points. Keep at it! :smiley:

Also, how do you plan to use this? If you build a working prototype in Observable, you can include it in a website in a number of ways. I ask because if you’re comfortable having your code “live” in a notebook, you may benefit from similarly re-working it to be more modular.

I hope this helps!

@aaronkyle Thank you very much for taking the time to help me with my problem. My approach is a little different. My goal is to remove a single point after a single double-click on/around existing points based on the closest point (Euclidean distance). The same behavior should be observed whenever I double-click. I’ll try incorporating some of your functions into my code to see if it works. Thank you once again!

For a simple function that may be entered into you existing notebook to help with the double-click to remove, try adding the following code inside the “point” event listener:

// Remove point on double-click
  d3.select(this).on("dblclick", () => {
    if (selectedPoints.has(d)) {
      selectedPoints.delete(d);
      d3.select(this).attr("fill", color(d));
      updateSelectedPointsList();
    }
  });