xinyun/ComfyUI-KJNodes
1
0
Fork 0
mirror of https://git.datalinker.icu/kijai/ComfyUI-KJNodes.git synced 2026-09-06 08:26:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

Update spline_editor.js

Browse Source
This commit is contained in:
kijai 2024-04-25 19:35:13 +03:00
parent 6fa8990ba8
commit 83d0f9ff45
1 changed files with 28 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
web/js/spline_editor.js
View File

@ -259,6 +259,9 @@ function createSplineEditor(context, reset=false) {
.strokeStyle(pv.Colors.category10().by(pv.index)) .strokeStyle(pv.Colors.category10().by(pv.index))
.lineWidth(3) .lineWidth(3)
var hoverIndex = -1;
var isDragging
vis.add(pv.Dot) vis.add(pv.Dot)
.data(() => points) .data(() => points)
.left(d => d.x) .left(d => d.x)
@ -270,20 +273,41 @@ function createSplineEditor(context, reset=false) {
.event("mousedown", pv.Behavior.drag()) .event("mousedown", pv.Behavior.drag())
.event("dragstart", function() { .event("dragstart", function() {
i = this.index; i = this.index;
hoverIndex = this.index;
isDragging = true;
if (pv.event.button === 2 && i !== 0 && i !== points.length - 1) { if (pv.event.button === 2 && i !== 0 && i !== points.length - 1) {
points.splice(i--, 1); points.splice(i--, 1);
vis.render(); vis.render();
} }
return this; return this;
}) })
.event("dragend", function() {
isDragging = false;
})
.event("drag", vis) .event("drag", vis)
.anchor("top").add(pv.Label) .event("mouseover", function() {
.font(d => Math.sqrt(d[2]) * 32 + "px sans-serif") hoverIndex = this.index; // Set the hover index to the index of the hovered dot
//.text(d => `(${Math.round(d.x)}, ${Math.round(d.y)})`) vis.render(); // Re-render the visualization
})
.event("mouseout", function() {
!isDragging && (hoverIndex = -1); // Reset the hover index when the mouse leaves the dot
vis.render(); // Re-render the visualization
})
.anchor("center")
.add(pv.Label)
.visible(function() {
return hoverIndex === this.index; // Only show the label for the hovered dot
})
.left(d => d.x < w / 2 ? d.x + 80 : d.x - 70) // Shift label to right if on left half, otherwise shift to left
.top(d => d.y < h / 2 ? d.y + 20 : d.y - 20) // Shift label down if on top half, otherwise shift up
.font(12 + "px Consolas")
.text(d => { .text(d => {
// Normalize y to range 0.0 to 1.0, considering the inverted y-axis // Normalize y to range 0.0 to 1.0, considering the inverted y-axis
var normalizedY = 1.0 - (d.y / h); var normalizedY = 1.0 - (d.y / h);
return `${normalizedY.toFixed(2)}`; var normalizedX = (d.x / w);
var frame = Math.round((d.x / w) * points_to_sample);
return `F: ${frame}, X: ${normalizedX.toFixed(2)}, Y: ${normalizedY.toFixed(2)}`;
}) })
.textStyle("orange") .textStyle("orange")