Fix node size

This commit is contained in:
Will Miao
2025-03-03 05:32:54 +08:00
parent 6db4ff3bd6
commit 1281ae29cb
4 changed files with 28 additions and 15 deletions

View File

@@ -89,15 +89,13 @@ app.registerExtension({
node.lorasWidget = result.widget; node.lorasWidget = result.widget;
// get the input widget and set a callback // Update input widget callback
const inputWidget = node.widgets[0]; const inputWidget = node.widgets[0];
inputWidget.callback = (value) => { inputWidget.callback = (value) => {
// Prevent recursive calls
if (isUpdating) return; if (isUpdating) return;
isUpdating = true; isUpdating = true;
try { try {
// Merge the loras data with widget value
const currentLoras = node.lorasWidget.value || []; const currentLoras = node.lorasWidget.value || [];
const mergedLoras = mergeLoras(value, currentLoras); const mergedLoras = mergeLoras(value, currentLoras);

View File

@@ -666,13 +666,23 @@ export function addLorasWidget(node, name, opts, callback) {
setValue: function(v) { setValue: function(v) {
widgetValue = v || ""; widgetValue = v || "";
renderLoras(widgetValue, widget); renderLoras(widgetValue, widget);
// Update container height after rendering
requestAnimationFrame(() => {
const minHeight = this.getMinHeight();
container.style.height = `${minHeight}px`;
// Force node to update size
node.setSize([node.size[0], node.computeSize()[1]]);
node.setDirtyCanvas(true, true);
});
}, },
getHeight: function() { getMinHeight: function() {
// Calculate height based on content // Calculate height based on content
const lorasCount = parseLoraValue(widgetValue).length; const lorasCount = parseLoraValue(widgetValue).length;
return Math.max( return Math.max(
100, 100,
lorasCount > 0 ? 60 + lorasCount * 44 : 60 // Header + entries or minimum height lorasCount > 0 ? 60 + lorasCount * 44 : 60
); );
}, },
}); });

View File

@@ -5,7 +5,7 @@ export function addTagsWidget(node, name, opts, callback) {
Object.assign(container.style, { Object.assign(container.style, {
display: "flex", display: "flex",
flexWrap: "wrap", flexWrap: "wrap",
gap: "8px", gap: "4px", // 从8px减小到4px
padding: "6px", padding: "6px",
minHeight: "30px", minHeight: "30px",
backgroundColor: "rgba(40, 44, 52, 0.6)", // Darker, more modern background backgroundColor: "rgba(40, 44, 52, 0.6)", // Darker, more modern background
@@ -54,7 +54,7 @@ export function addTagsWidget(node, name, opts, callback) {
// Helper function to update tag style based on active state // Helper function to update tag style based on active state
function updateTagStyle(tagEl, active) { function updateTagStyle(tagEl, active) {
const baseStyles = { const baseStyles = {
padding: "6px 12px", // 水平内边距从16px减小到12px padding: "4px 12px", // 垂直内边距从6px减小到4px
borderRadius: "6px", // Matching container radius borderRadius: "6px", // Matching container radius
maxWidth: "200px", // Increased max width maxWidth: "200px", // Increased max width
overflow: "hidden", overflow: "hidden",
@@ -66,7 +66,7 @@ export function addTagsWidget(node, name, opts, callback) {
border: "1px solid transparent", border: "1px solid transparent",
display: "inline-block", display: "inline-block",
boxShadow: "0 1px 2px rgba(0,0,0,0.1)", boxShadow: "0 1px 2px rgba(0,0,0,0.1)",
margin: "4px", // 从6px减小到4px margin: "2px", // 从4px减小到2px
userSelect: "none", // Add this line to prevent text selection userSelect: "none", // Add this line to prevent text selection
WebkitUserSelect: "none", // For Safari support WebkitUserSelect: "none", // For Safari support
MozUserSelect: "none", // For Firefox support MozUserSelect: "none", // For Firefox support
@@ -112,12 +112,22 @@ export function addTagsWidget(node, name, opts, callback) {
setValue: function(v) { setValue: function(v) {
widgetValue = v; widgetValue = v;
renderTags(widgetValue, widget); renderTags(widgetValue, widget);
// Update container height after rendering
requestAnimationFrame(() => {
const minHeight = this.getMinHeight();
container.style.height = `${minHeight}px`;
// Force node to update size
node.setSize([node.size[0], node.computeSize()[1]]);
node.setDirtyCanvas(true, true);
});
}, },
getHeight: function() { getMinHeight: function() {
// Calculate height based on content // Calculate height based on content
return Math.max( return Math.max(
150, 150,
Math.ceil(container.scrollHeight / 5) * 5 // Round up to nearest 5px Math.ceil(container.scrollHeight / 5) * 5 + 15// Round up to nearest 5px
); );
}, },
}); });

View File

@@ -54,9 +54,6 @@ app.registerExtension({
// Get existing tags to preserve active states // Get existing tags to preserve active states
const existingTags = node.tagWidget.value || []; const existingTags = node.tagWidget.value || [];
const tempWidget = node.tagWidget;
const originalHeight = tempWidget.options.getHeight();
// Create a map of existing tags and their active states // Create a map of existing tags and their active states
const existingTagMap = {}; const existingTagMap = {};
existingTags.forEach(tag => { existingTags.forEach(tag => {
@@ -75,8 +72,6 @@ app.registerExtension({
})); }));
node.tagWidget.value = tagArray; node.tagWidget.value = tagArray;
node.size[1] = node.size[1] + (tempWidget.options.getHeight() - originalHeight);
node.setDirtyCanvas(true, true);
} }
} }
}, },