Редактируемый текст в графе p5.js

Question

Я хочу скопировать интерактивный график в p5.js. До сих пор я мог получить его, чтобы добавить вершины в левый клик, и края, когда пару вершин были нажаты левой кнопкой мыши. Однако, когда я создаю вершину или край, я также хочу, чтобы число, обозначающее вес, отображалось рядом с вершиной/ребром, например «1». Затем, когда я нажимаю на этот номер, я хочу иметь возможность динамически редактировать строку.

Пока что лучшее, что я нашел для этого, это createInput(), но это создает большой белый текстовый блок ввода, который не является достаточно тонким. Я только хочу, чтобы мигающий текстовый курсор появлялся, когда я нажимаю на строку. Как я могу это сделать?

Это Vertex и объекты Пограничного я до сих пор (хотя они могут быть не актуальны)

function Vertex(mouseX, mouseY, index) { 
    this.x = mouseX; 
    this.y = mouseY; 
    this.index = index; 
    this.weight = 0; 
    this.radius = 16; 
    this.col = [0,0,0]; 
    this.display = function() { 
    noStroke(); 
    fill(this.col[0], this.col[1], this.col[2]); 
    ellipse(this.x, this.y, this.radius, this.radius); 
    } 
} 

function Edge(v1, v2) { 
    this.v1 = v1; 
    this.v2 = v2; 
    this.weight = 0; 
    this.col = [0,0,0]; 
    this.display = function() { 
    stroke(0); 
    fill(this.col[0], this.col[1], this.col[2]); 
    line(v1.x, v1.y, v2.x, v2.y); 
    } 
} 

Answer 1

Проверить это - https://p5js.org/reference/#/p5.Element и можно использовать P5 элемент и ручку MouseClicked() события и поставить логику там. Элемент P5 имеет все функции, которые вас интересуют.