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

Take canvas scale into account with drag events

Browse Source
This commit is contained in:
kijai 2024-04-28 18:22:33 +03:00
parent 4db34a969d
commit 0843356c78
2 changed files with 25 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
web/js/help_popup.js
View File

@ -221,8 +221,9 @@ const create_documentation_stylesheet = () => {
document.addEventListener('mousemove', function (e) { document.addEventListener('mousemove', function (e) {
if (!isResizing) return; if (!isResizing) return;
const newWidth = startWidth + e.clientX - startX; const scale = app.canvas.ds.scale;
const newHeight = startHeight + e.clientY - startY; const newWidth = startWidth + (e.clientX - startX) / scale;
const newHeight = startHeight + (e.clientY - startY) / scale;;
docElement.style.width = `${newWidth}px`; docElement.style.width = `${newWidth}px`;
docElement.style.height = `${newHeight}px`; docElement.style.height = `${newHeight}px`;
}, },

36
web/js/spline_editor.js
View File

@ -103,6 +103,7 @@ app.registerExtension({
async beforeRegisterNodeDef(nodeType, nodeData) { async beforeRegisterNodeDef(nodeType, nodeData) {
if (nodeData?.name === 'SplineEditor') { if (nodeData?.name === 'SplineEditor') {
chainCallback(nodeType.prototype, "onNodeCreated", function () { chainCallback(nodeType.prototype, "onNodeCreated", function () {
hideWidgetForGood(this, this.widgets.find(w => w.name === "coordinates")) hideWidgetForGood(this, this.widgets.find(w => w.name === "coordinates"))
var element = document.createElement("div"); var element = document.createElement("div");
@ -146,6 +147,7 @@ app.registerExtension({
this.menuItem2.id = "menu-item-2"; this.menuItem2.id = "menu-item-2";
this.menuItem2.textContent = "Display sample points"; 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() {
this.style.backgroundColor = "gray"; this.style.backgroundColor = "gray";
@ -165,6 +167,7 @@ app.registerExtension({
this.contextMenu.appendChild(this.menuItem2); this.contextMenu.appendChild(this.menuItem2);
document.body.appendChild( this.contextMenu); document.body.appendChild( this.contextMenu);
this.addWidget("button", "New spline", null, () => { this.addWidget("button", "New spline", null, () => {
if (!this.properties || !("points" in this.properties)) { if (!this.properties || !("points" in this.properties)) {
@ -175,7 +178,9 @@ app.registerExtension({
createSplineEditor(this, true) createSplineEditor(this, true)
} }
}); });
this.setSize([550, 870])
this.setSize([550, 870]);
this.resizable = false;
this.splineEditor.parentEl = document.createElement("div"); this.splineEditor.parentEl = document.createElement("div");
this.splineEditor.parentEl.className = "spline-editor"; this.splineEditor.parentEl.className = "spline-editor";
this.splineEditor.parentEl.id = `spline-editor-${this.uuid}` this.splineEditor.parentEl.id = `spline-editor-${this.uuid}`
@ -183,18 +188,10 @@ app.registerExtension({
chainCallback(this, "onGraphConfigured", function() { chainCallback(this, "onGraphConfigured", function() {
console.log('onGraphConfigured'); console.log('onGraphConfigured');
createSplineEditor(this) createSplineEditor(this);
this.setSize([550, 870]) this.setSize([550, 870]);
}); });
//disable context menu on right click
// document.addEventListener('contextmenu', function(e) {
// if (e.button === 2) { // Right mouse button
// e.preventDefault();
// e.stopPropagation();
// }
// })
}); // onAfterGraphConfigured }); // onAfterGraphConfigured
}//node created }//node created
} //before register } //before register
@ -416,7 +413,19 @@ function createSplineEditor(context, reset=false) {
} }
isDragging = false; isDragging = false;
}) })
.event("drag", vis) .event("drag", function() {
let adjustedX = this.mouse().x / app.canvas.ds.scale; // Adjust the new X position by the inverse of the scale factor
let adjustedY = this.mouse().y / app.canvas.ds.scale; // Adjust the new Y position by the inverse of the scale factor
// Determine the bounds of the vis.Panel
const panelWidth = vis.width();
const panelHeight = vis.height();
// Adjust the new position if it would place the dot outside the bounds of the vis.Panel
adjustedX = Math.max(0, Math.min(panelWidth, adjustedX));
adjustedY = Math.max(0, Math.min(panelHeight, adjustedY));
points[this.index] = { x: adjustedX, y: adjustedY }; // Update the point's position
vis.render(); // Re-render the visualization to reflect the new position
})
.event("mouseover", function() { .event("mouseover", function() {
hoverIndex = this.index; // Set the hover index to the index of the hovered dot hoverIndex = this.index; // Set the hover index to the index of the hovered dot
vis.render(); // Re-render the visualization vis.render(); // Re-render the visualization
@ -443,7 +452,6 @@ function createSplineEditor(context, reset=false) {
}) })
.textStyle("orange") .textStyle("orange")
vis.render(); vis.render();
var svgElement = vis.canvas(); var svgElement = vis.canvas();
svgElement.style['zIndex'] = "2" svgElement.style['zIndex'] = "2"