xinyun/ComfyUI-KJNodes
1
0
Fork 0
mirror of https://git.datalinker.icu/kijai/ComfyUI-KJNodes.git synced 2025-12-13 23:04:40 +08:00
Code Issues Packages Projects Releases Wiki Activity

Update spline_editor.js

Browse Source
This commit is contained in:
kijai 2024-04-27 02:46:04 +03:00
parent 59d11b615d
commit c9813da892
1 changed files with 32 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
web/js/spline_editor.js
View File

@ -144,7 +144,7 @@ app.registerExtension({
this.menuItem2 = document.createElement("a"); this.menuItem2 = document.createElement("a");
this.menuItem2.href = "#"; this.menuItem2.href = "#";
this.menuItem2.id = "menu-item-2"; this.menuItem2.id = "menu-item-2";
this.menuItem2.textContent = "Copy coordinates to clipboard"; this.menuItem2.textContent = "Display sample points";
styleMenuItem(this.menuItem2); styleMenuItem(this.menuItem2);
// Add hover effect to menu items // Add hover effect to menu items
this.menuItem1.addEventListener('mouseover', function() { this.menuItem1.addEventListener('mouseover', function() {
@ -243,15 +243,39 @@ function createSplineEditor(context, reset=false) {
context.menuItem2.addEventListener('click', function(e) { context.menuItem2.addEventListener('click', function(e) {
e.preventDefault(); e.preventDefault();
navigator.clipboard.writeText(JSON.stringify(points)); drawSamplePoints = !drawSamplePoints;
console.log('Copied coordinates to clipboard');
updatePath();
}); });
var drawSamplePoints = false;
function updatePath() { function updatePath() {
points_to_sample = pointsWidget.value points_to_sample = pointsWidget.value
let coords = samplePoints(pathElements[0], points_to_sample); let coords = samplePoints(pathElements[0], points_to_sample);
if (drawSamplePoints) {
if (pointsLayer) {
// Update the data of the existing points layer
pointsLayer.data(coords);
} else {
// Create the points layer if it doesn't exist
pointsLayer = vis.add(pv.Dot)
.data(coords)
.left(function(d) { return d.x; })
.top(function(d) { return d.y; })
.radius(5) // Adjust the radius as needed
.fillStyle("red") // Change the color as needed
.strokeStyle("black") // Change the stroke color as needed
.lineWidth(1); // Adjust the line width as needed
}
}
else {
if (pointsLayer) {
// Remove the points layer
pointsLayer.data([]);
vis.render();
}
}
let coordsString = JSON.stringify(coords); let coordsString = JSON.stringify(coords);
pointsStoreWidget.value = JSON.stringify(points); pointsStoreWidget.value = JSON.stringify(points);
if (coordWidget) { if (coordWidget) {
@ -273,6 +297,8 @@ function createSplineEditor(context, reset=false) {
var interpolation = interpolationWidget.value var interpolation = interpolationWidget.value
var tension = tensionWidget.value var tension = tensionWidget.value
var points_to_sample = pointsWidget.value var points_to_sample = pointsWidget.value
var pointsLayer = null;
interpolationWidget.callback = () => { interpolationWidget.callback = () => {
interpolation = interpolationWidget.value interpolation = interpolationWidget.value
updatePath(); updatePath();
@ -357,7 +383,7 @@ function createSplineEditor(context, reset=false) {
var hoverIndex = -1; var hoverIndex = -1;
var isDragging var isDragging
vis.add(pv.Dot) vis.add(pv.Dot)
.data(() => points) .data(() => points)
.left(d => d.x) .left(d => d.x)
@ -406,6 +432,7 @@ function createSplineEditor(context, reset=false) {
return `F: ${frame}, X: ${normalizedX.toFixed(2)}, Y: ${normalizedY.toFixed(2)}`; return `F: ${frame}, X: ${normalizedX.toFixed(2)}, Y: ${normalizedY.toFixed(2)}`;
}) })
.textStyle("orange") .textStyle("orange")
vis.render(); vis.render();
var svgElement = vis.canvas(); var svgElement = vis.canvas();