63 lines
1.9 KiB
JavaScript
63 lines
1.9 KiB
JavaScript
import { COLORS } from "../constants.js";
|
|
import { fitString } from "../utils.js";
|
|
|
|
const ROW_HEIGHT = 20;
|
|
const ROW_MARGIN = 10;
|
|
|
|
export const replaceWithClickableField = (
|
|
node,
|
|
textWidget,
|
|
{ getLabel, onClick },
|
|
) => {
|
|
const widget = {
|
|
name: textWidget.name,
|
|
type: "custom",
|
|
get value() {
|
|
return textWidget.value;
|
|
},
|
|
set value(v) {
|
|
textWidget.value = v;
|
|
},
|
|
last_y: 0,
|
|
_hit: [0, 0],
|
|
computeSize: () => [0, ROW_HEIGHT],
|
|
serializeValue: textWidget.serializeValue,
|
|
draw(ctx, n, width, posY, height) {
|
|
this.last_y = posY;
|
|
const h = height ?? ROW_HEIGHT;
|
|
const midY = posY + h * 0.5;
|
|
const margin = ROW_MARGIN;
|
|
const w = width - margin * 2;
|
|
|
|
ctx.save();
|
|
ctx.fillStyle = "#222233";
|
|
ctx.beginPath();
|
|
ctx.roundRect(margin, posY + 2, w, h - 4, 4);
|
|
ctx.fill();
|
|
|
|
const value = textWidget.value || "";
|
|
const label = getLabel ? getLabel(value) : value || "...";
|
|
ctx.fillStyle = value ? COLORS.text : COLORS.inactive;
|
|
ctx.font = "11px monospace";
|
|
ctx.textAlign = "left";
|
|
ctx.textBaseline = "middle";
|
|
ctx.fillText(fitString(ctx, label, w - 12), margin + 6, midY);
|
|
ctx.restore();
|
|
this._hit = [margin, w];
|
|
},
|
|
mouse(event, pos, n) {
|
|
const type = event.type;
|
|
if (type !== "pointerdown" && type !== "mousedown") return false;
|
|
if (pos[0] < this._hit[0] || pos[0] > this._hit[0] + this._hit[1])
|
|
return false;
|
|
onClick(event, n);
|
|
return true;
|
|
},
|
|
};
|
|
|
|
const idx = node.widgets.indexOf(textWidget);
|
|
if (idx !== -1) node.widgets[idx] = widget;
|
|
|
|
return widget;
|
|
};
|