593 lines
22 KiB
JavaScript
593 lines
22 KiB
JavaScript
import { app } from "../../../scripts/app.js";
|
||
import { IToolsUI } from "./itools_ui.js";
|
||
|
||
const DEFAULT_TEMPLATES = [
|
||
{
|
||
id: "bg_swap",
|
||
title: "🖼️ Background Swap",
|
||
text: `Background replacement. Replace the environment with [NEW BG] while maintaining absolute consistency
|
||
of the subject's facial features, outfit, pose, and original camera perspective. Seamless edge blending.`,
|
||
},
|
||
{
|
||
id: "env_mood",
|
||
title: "🌙 Time & Mood",
|
||
text: `Environmental relighting. Change the scene atmosphere to [TIME | WEATHER] with
|
||
[LIGHTING STYLE]. Preserve the original subject geometry and composition layout.`,
|
||
},
|
||
{
|
||
id: "style_trans",
|
||
title: "🎨 Style Transform",
|
||
text: `Neural style transfer. Convert the image into [STYLE].
|
||
Retain the global composition, spatial structure, and core [SUBJECT] design elements.`,
|
||
},
|
||
{
|
||
id: "mat_change",
|
||
title: "🧶 Material/Texture",
|
||
text: `Physically-based rendering (PBR) texture modification. Change the surface material of [SUBJECT] to [MATERIAL].
|
||
Maintain identical mesh topology, shadows, and proportions.`,
|
||
},
|
||
{
|
||
id: "pose_mod",
|
||
title: "🏃 Pose Modification",
|
||
text: `Rigging and pose adjustment. Modify the subject's pose to [NEW POSE].
|
||
Ensure strict character consistency, maintaining the exact outfit details, face ID, and environmental lighting.`,
|
||
},
|
||
{
|
||
id: "expr_edit",
|
||
title: "😊 Expression Edit",
|
||
text: `Facial expression synthesis. Alter the expression to [EXPRESSION].
|
||
Keep the bone structure, eye color, and head orientation (yaw, pitch, roll) unchanged.`,
|
||
},
|
||
{
|
||
id: "outfit_chg",
|
||
title: "👕 Wardrobe Change",
|
||
text: `Garment replacement. Change the outfit to [NEW OUTFIT].
|
||
Maintain the subject's anatomical proportions, identity (Face ID), and current action/pose.`,
|
||
},
|
||
{
|
||
id: "logo_mock",
|
||
title: "☕ Branding Mockup",
|
||
text: `Precision logo mapping. Overlay the provided logo onto [OBJECT].
|
||
Apply realistic surface displacement, texture mapping, and ambient occlusion for a natural integrated look.`,
|
||
},
|
||
{
|
||
id: "logo_3d",
|
||
title: "💎 3D Logo Effect",
|
||
text: `3D extrusion and shading. Transform the 2D logo into a 3D emblem with [MATERIAL].
|
||
Maintain the exact vector silhouette with realistic specular highlights and depth of field.`,
|
||
},
|
||
{
|
||
id: "color_grade",
|
||
title: "🌈 Color Grading",
|
||
text: `Professional color science. Apply a [MOOD] LUT-based palette.
|
||
Adjust highlights, midtones, and shadows without altering the underlying image data or shapes.`,
|
||
},
|
||
{
|
||
id: "add_prop",
|
||
title: "➕ Add Element",
|
||
text: `In-painting and object insertion. Synthesize [ITEM] into the scene.
|
||
Match the global illumination, shadows, and noise profile of the original image for perfect integration.`,
|
||
},
|
||
{
|
||
id: "rem_obj",
|
||
title: "➖ Remove Element",
|
||
text: `Object removal and generative fill. Delete [ITEM] and reconstruct the underlying background
|
||
using context-aware synthesis, ensuring no artifacts remain.`,
|
||
},
|
||
{
|
||
id: "high_retouch",
|
||
title: "✨ Pro Retouch",
|
||
text: `High-end frequency separation. Apply subtle skin retouching: eliminate blemishes, balance skin tones,
|
||
and reduce oily specular highlights while preserving micro-texture and pores.`,
|
||
},
|
||
{
|
||
id: "upscale_fix",
|
||
title: "🔍 Detail Enhancer",
|
||
text: `Generative upscaling. Increase the resolution and inject high-frequency details into [SUBJECT / SCENE].
|
||
Improve sharpness and clarity without changing the original design.`,
|
||
},
|
||
{
|
||
id: "lighting_fix",
|
||
title: "💡 Light Correction",
|
||
text: `Advanced relighting. Adjust the scene's [BRIGHTNESS | CONTRAST | COLOR TEMP] using global illumination principles.
|
||
Preserve shadow density, specular reflections, and the original subject's structural integrity.`,
|
||
},
|
||
{
|
||
id: "background_blur",
|
||
title: "💧 Depth Blur",
|
||
text: `Optical depth-of-field simulation. Apply a [BACKGROUND | FOREGROUND] Gaussian or lens blur.
|
||
Maintain sub-pixel subject sharpness and render a realistic bokeh diaphragm effect.`,
|
||
},
|
||
{
|
||
id: "reflections_add",
|
||
title: "🪞 Add Reflection",
|
||
text: `Ray-traced reflection synthesis. Generate realistic reflections of [SUBJECT] on [SURFACE].
|
||
Account for surface roughness, Fresnel effects, and accurate perspective vanishing points.`,
|
||
},
|
||
{
|
||
id: "weather_effect",
|
||
title: "☔ Weather Effects",
|
||
text: `Atmospheric particle simulation. Superimpose [RAIN | SNOW | FOG] onto the scene.
|
||
Synchronize volumetric lighting, occlusion, and surface wetness/accumulation with the environment.`,
|
||
},
|
||
{
|
||
id: "shadow_overlay",
|
||
title: "🌒 Shadow Overlay",
|
||
text: `Light masking and GOBOS. Overlay a [PATTERN | SHADOW TYPE] shadow onto [FACE | OBJECT].
|
||
Adjust the penumbra softness and opacity to match the environment's ambient occlusion and light source direction.`,
|
||
},
|
||
{
|
||
id: "lens_effects",
|
||
title: "🎥 Lens Effects",
|
||
text: `Cinematic optical artifacts. Apply [FLARE | BOKEH | DISTORTION] mimicking high-end prime lenses.
|
||
Maintain chromatic accuracy and natural geometric perspective.`,
|
||
},
|
||
{
|
||
id: "cam_angle",
|
||
title: "📸 Camera Angle",
|
||
text: `Virtual cinematography. Re-render the scene from a [ANGLE] perspective.
|
||
Maintain 'Temporal Consistency' of all textures and character details while shifting the focal point.`,
|
||
},
|
||
{
|
||
id: "environment_map",
|
||
title: "🏞️ Environment Map",
|
||
text: `HDRI environment remapping. Generate a cohesive lighting wrap for [SCENE | SUBJECT].
|
||
Synchronize all specular highlights, ambient light bounce, and environmental reflections.`,
|
||
},
|
||
{
|
||
id: "motion_blur",
|
||
title: "🍃 Motion Blur",
|
||
text: `Kinetic blur synthesis. Add directional motion blur to [SUBJECT | OBJECT] based on a virtual movement vector.
|
||
Ensure temporal edge blending while keeping static background elements perfectly sharp.`,
|
||
},
|
||
];
|
||
|
||
app.registerExtension({
|
||
name: "iTools.instructorNode",
|
||
async nodeCreated(node) {
|
||
if (node.comfyClass !== "iToolsInstructorNode") return;
|
||
|
||
let selectedItems = new Set();
|
||
let dynamicData = {};
|
||
let showSelectedOnly = false;
|
||
|
||
const getUserTemplates = () =>
|
||
JSON.parse(localStorage.getItem("iTools_userTemplates") || "[]");
|
||
const saveUserTemplates = (templates) =>
|
||
localStorage.setItem("iTools_userTemplates", JSON.stringify(templates));
|
||
|
||
const getTemplateOrder = () =>
|
||
JSON.parse(localStorage.getItem("iTools_templateOrder") || "[]");
|
||
const saveTemplateOrder = (order) =>
|
||
localStorage.setItem("iTools_templateOrder", JSON.stringify(order));
|
||
|
||
const getMergedTemplates = () => {
|
||
const userTemplates = getUserTemplates();
|
||
const merged = DEFAULT_TEMPLATES.map((dt) => {
|
||
const userVersion = userTemplates.find((ut) => ut.id === dt.id);
|
||
return userVersion || dt;
|
||
});
|
||
const newOnes = userTemplates.filter(
|
||
(ut) => !DEFAULT_TEMPLATES.find((dt) => dt.id === ut.id),
|
||
);
|
||
const all = [...merged, ...newOnes];
|
||
|
||
const order = getTemplateOrder();
|
||
if (order.length > 0) {
|
||
all.sort((a, b) => {
|
||
const idxA = order.indexOf(a.id);
|
||
const idxB = order.indexOf(b.id);
|
||
if (idxA === -1 && idxB === -1) return 0;
|
||
if (idxA === -1) return 1;
|
||
if (idxB === -1) return -1;
|
||
return idxA - idxB;
|
||
});
|
||
}
|
||
return all;
|
||
};
|
||
|
||
const showToast = (severity, summary, detail) => {
|
||
app.extensionManager.toast.add({ severity, summary, detail, life: 2000 });
|
||
};
|
||
|
||
const container = document.createElement("div");
|
||
container.style.cssText = `
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
padding: 5px;
|
||
height: 100%;
|
||
background: #1c1c1c;
|
||
border-radius: 8px;
|
||
color: white;
|
||
font-family: sans-serif;
|
||
`;
|
||
|
||
const header = document.createElement("div");
|
||
header.style.cssText = `display: flex; gap: 4px; min-width: 0;`;
|
||
|
||
const searchInput = document.createElement("input");
|
||
searchInput.placeholder = "Search instructions...";
|
||
searchInput.style.cssText = `flex: 1 1 0; min-width: 0; width: 0; padding: 5px; border-radius: 4px; border: 1px solid #444; background: #333; color: white; outline: none;`;
|
||
|
||
const addBtn = document.createElement("button");
|
||
addBtn.innerHTML = "＋";
|
||
addBtn.title = "Add Instruction";
|
||
addBtn.style.cssText = `flex: 0 0 auto; min-width: 30px; padding: 0 8px; background: #444; border: none; border-radius: 4px; color: white; cursor: pointer;`;
|
||
|
||
const toggleFilterBtn = document.createElement("button");
|
||
const inactiveEmoji = "⛶";
|
||
const activeEmoji = "☐";
|
||
const updateFilterBtnUI = () => {
|
||
toggleFilterBtn.innerHTML = showSelectedOnly
|
||
? activeEmoji
|
||
: inactiveEmoji;
|
||
toggleFilterBtn.style.background = showSelectedOnly ? "#888" : "#444";
|
||
};
|
||
|
||
updateFilterBtnUI();
|
||
toggleFilterBtn.title = "Show Selected Only";
|
||
toggleFilterBtn.style.cssText = `flex: 0 0 auto; min-width: 30px; padding: 0 8px; background: #444; border: none; border-radius: 4px; color: white; cursor: pointer; font-size: 14px;`;
|
||
// Logic for Toggle Filter Button
|
||
toggleFilterBtn.onclick = () => {
|
||
// If user tries to filter but nothing is selected
|
||
if (!showSelectedOnly && selectedItems.size === 0) {
|
||
showToast(
|
||
"warn",
|
||
"Selection Required",
|
||
"Please select at least one instruction from the list.",
|
||
);
|
||
return; // Just exit, don't change state
|
||
}
|
||
|
||
showSelectedOnly = !showSelectedOnly;
|
||
updateFilterBtnUI();
|
||
renderList(searchInput.value);
|
||
};
|
||
|
||
header.appendChild(searchInput);
|
||
header.appendChild(toggleFilterBtn);
|
||
header.appendChild(addBtn);
|
||
|
||
const listContainer = document.createElement("div");
|
||
listContainer.style.cssText = `flex: 1; overflow-y: auto; border: 1px solid #444; border-radius: 4px; background: #252525;`;
|
||
|
||
const editTemplate = async (existing = null) => {
|
||
const isDefault =
|
||
existing && DEFAULT_TEMPLATES.some((dt) => dt.id === existing.id);
|
||
let title = existing ? existing.title : "";
|
||
|
||
// Only prompt for title if it's NOT a default template
|
||
if (!isDefault) {
|
||
title = await IToolsUI.prompt({
|
||
title: "Template Settings",
|
||
message: "Enter Instruction Title:",
|
||
default: title,
|
||
});
|
||
if (title === null) return;
|
||
if (title === "") {
|
||
showToast("error", "Error", "Instruction title cannot be empty.");
|
||
return;
|
||
}
|
||
}
|
||
|
||
const text = await IToolsUI.prompt({
|
||
title: "Template Settings",
|
||
message: isDefault ? `Edit Instruction:` : "Enter Instruction Text:",
|
||
type: "textarea",
|
||
hint: "ⓘ Hint: Use your own variables inside brackets [].",
|
||
default: existing ? existing.text : "",
|
||
});
|
||
if (text === null) return;
|
||
if (text === "") {
|
||
showToast("error", "Error", "Instruction text cannot be empty.");
|
||
return;
|
||
}
|
||
|
||
let userTemplates = getUserTemplates();
|
||
const templateId = existing ? existing.id : "user_" + Date.now();
|
||
const idx = userTemplates.findIndex((t) => t.id === templateId);
|
||
|
||
if (idx > -1) {
|
||
userTemplates[idx] = { ...userTemplates[idx], title, text };
|
||
} else {
|
||
userTemplates.push({ id: templateId, title, text, isUser: !isDefault });
|
||
}
|
||
|
||
saveUserTemplates(userTemplates);
|
||
showToast(
|
||
"success",
|
||
"Saved",
|
||
`${title} ${isDefault ? "updated" : "added"}.`,
|
||
);
|
||
renderList(searchInput.value);
|
||
};
|
||
|
||
const deleteOrReset = async (template) => {
|
||
const isDefault = DEFAULT_TEMPLATES.some((dt) => dt.id === template.id);
|
||
const actionText = isDefault ? "reset" : "delete";
|
||
|
||
const wantAction = await IToolsUI.confirm({
|
||
title: `${isDefault ? "Reset" : "Delete"} Template`,
|
||
message: `Are you sure you want to ${actionText} ${template.title} ?`,
|
||
type: isDefault ? "reset" : "delete",
|
||
});
|
||
|
||
if (wantAction) {
|
||
let userTemplates = getUserTemplates();
|
||
const updated = userTemplates.filter((ut) => ut.id !== template.id);
|
||
saveUserTemplates(updated);
|
||
showToast("success", "Success", `${template.title} ${actionText}ed.`);
|
||
renderList(searchInput.value);
|
||
}
|
||
};
|
||
|
||
const renderList = (filter = "") => {
|
||
listContainer.innerHTML = "";
|
||
const allTemplates = getMergedTemplates();
|
||
const userTemplates = getUserTemplates();
|
||
|
||
allTemplates
|
||
.filter((t) => {
|
||
const matchesSearch = t.title
|
||
.toLowerCase()
|
||
.includes(filter.toLowerCase());
|
||
const matchesSelection = !showSelectedOnly || selectedItems.has(t.id);
|
||
return matchesSearch && matchesSelection;
|
||
})
|
||
.forEach((template) => {
|
||
const itemContainer = document.createElement("div");
|
||
itemContainer.style.cssText = `border-bottom: 1px solid #333; padding: 8px; display: flex; flex-direction: column; gap: 5px; position: relative; transition: background 0.2s;`;
|
||
|
||
// Drop targets stay on the container
|
||
itemContainer.addEventListener("dragover", (e) => {
|
||
e.preventDefault();
|
||
itemContainer.style.background = "#2a2a2a";
|
||
});
|
||
|
||
itemContainer.addEventListener("dragleave", () => {
|
||
itemContainer.style.background = "transparent";
|
||
});
|
||
|
||
itemContainer.addEventListener("drop", (e) => {
|
||
e.preventDefault();
|
||
itemContainer.style.background = "transparent";
|
||
const draggedId = e.dataTransfer.getData("text/plain");
|
||
const targetId = template.id;
|
||
if (draggedId === targetId) return;
|
||
|
||
const all = getMergedTemplates();
|
||
const order = all.map((t) => t.id);
|
||
const fromIdx = order.indexOf(draggedId);
|
||
const toIdx = order.indexOf(targetId);
|
||
|
||
order.splice(fromIdx, 1);
|
||
order.splice(toIdx, 0, draggedId);
|
||
|
||
saveTemplateOrder(order);
|
||
renderList(searchInput.value);
|
||
});
|
||
|
||
const row = document.createElement("div");
|
||
row.style.cssText = `display: flex; align-items: center; gap: 8px; cursor: pointer; padding-right: 55px;`;
|
||
|
||
const dragHandle = document.createElement("div");
|
||
dragHandle.innerHTML = "⋮⋮";
|
||
dragHandle.title = "Drag to reorder";
|
||
dragHandle.style.cssText = `cursor: grab; color: #555; font-size: 14px; margin-right: 2px; user-select: none;`;
|
||
dragHandle.draggable = true;
|
||
|
||
dragHandle.addEventListener("dragstart", (e) => {
|
||
e.dataTransfer.setData("text/plain", template.id);
|
||
if (e.dataTransfer.setDragImage) {
|
||
e.dataTransfer.setDragImage(itemContainer, 15, 15);
|
||
}
|
||
itemContainer.style.opacity = "0.4";
|
||
itemContainer.style.background = "#333";
|
||
});
|
||
|
||
dragHandle.addEventListener("dragend", () => {
|
||
itemContainer.style.opacity = "1";
|
||
itemContainer.style.background = "transparent";
|
||
});
|
||
|
||
const cb = document.createElement("input");
|
||
cb.type = "checkbox";
|
||
cb.checked = selectedItems.has(template.id);
|
||
cb.style.pointerEvents = "none";
|
||
|
||
const label = document.createElement("span");
|
||
label.textContent = template.title;
|
||
label.style.fontSize = "12px";
|
||
label.style.fontWeight = "bold";
|
||
|
||
// Action Buttons
|
||
const actions = document.createElement("div");
|
||
actions.style.cssText = `position: absolute; right: 8px; top: 8px; display: flex; gap: 10px; align-items: center;`;
|
||
|
||
const editBtn = document.createElement("div");
|
||
editBtn.innerHTML = "✎";
|
||
editBtn.style.cssText = `cursor: pointer; color: #888; font-size: 14px;`;
|
||
editBtn.onclick = async (e) => {
|
||
e.stopPropagation();
|
||
editTemplate(template);
|
||
};
|
||
|
||
actions.appendChild(editBtn);
|
||
|
||
// Delete/Reset logic
|
||
const isUserCreated = userTemplates.find(
|
||
(ut) => ut.id === template.id,
|
||
)?.isUser;
|
||
const isEditedDefault =
|
||
DEFAULT_TEMPLATES.some((dt) => dt.id === template.id) &&
|
||
userTemplates.some((ut) => ut.id === template.id);
|
||
|
||
if (isUserCreated) {
|
||
const delBtn = document.createElement("div");
|
||
delBtn.innerHTML = "✕";
|
||
delBtn.title = "Delete";
|
||
delBtn.style.cssText = `cursor: pointer; color: #ff5555; font-size: 14px; font-weight: bold;`;
|
||
delBtn.onclick = (e) => {
|
||
e.stopPropagation();
|
||
deleteOrReset(template);
|
||
};
|
||
actions.appendChild(delBtn);
|
||
} else if (isEditedDefault) {
|
||
const resetBtn = document.createElement("div");
|
||
resetBtn.innerHTML = "↺";
|
||
resetBtn.title = "Reset to Default";
|
||
resetBtn.style.cssText = `cursor: pointer; color: #55aaff; font-size: 16px;`;
|
||
resetBtn.onclick = (e) => {
|
||
e.stopPropagation();
|
||
deleteOrReset(template);
|
||
};
|
||
actions.appendChild(resetBtn);
|
||
}
|
||
|
||
row.appendChild(dragHandle);
|
||
row.appendChild(cb);
|
||
row.appendChild(label);
|
||
itemContainer.appendChild(row);
|
||
itemContainer.appendChild(actions);
|
||
|
||
const inputContainer = document.createElement("div");
|
||
inputContainer.style.cssText = `display: ${cb.checked ? "flex" : "none"}; flex-direction: column; gap: 5px; margin-left: 22px;`;
|
||
|
||
const placeholders = template.text.match(/\[#?([^\]]+)\]/g) || [];
|
||
|
||
const shouldShow = cb.checked && placeholders.length > 0;
|
||
inputContainer.style.cssText = `display: ${shouldShow ? "flex" : "none"}; flex-direction: column; gap: 5px; margin-left: 22px;`;
|
||
|
||
placeholders.forEach((placeholder) => {
|
||
const cleanName = placeholder.replace(/[\[\]]/g, "");
|
||
|
||
// Container for input + clear button
|
||
const inputWrapper = document.createElement("div");
|
||
inputWrapper.style.cssText = `position: relative; display: flex; align-items: center;`;
|
||
|
||
const input = document.createElement("input");
|
||
input.placeholder = cleanName;
|
||
input.value = dynamicData[template.id]?.[cleanName] || "";
|
||
input.style.cssText = `background: #111; border: 1px solid #444; color: #eee; padding: 3px 20px 3px 6px; border-radius: 3px; font-size: 10px; outline: none; width: 100%;`;
|
||
|
||
// The X button inside the input
|
||
const clearX = document.createElement("div");
|
||
clearX.innerHTML = "×";
|
||
clearX.style.cssText = `position: absolute; right: 5px; cursor: pointer; color: #666; font-size: 14px; line-height: 1; display: ${input.value ? "block" : "none"};`;
|
||
|
||
// Logic to clear input
|
||
clearX.onclick = (ev) => {
|
||
ev.stopPropagation();
|
||
input.value = "";
|
||
if (dynamicData[template.id]) {
|
||
delete dynamicData[template.id][cleanName];
|
||
}
|
||
clearX.style.display = "none";
|
||
};
|
||
|
||
input.oninput = (ev) => {
|
||
ev.stopPropagation();
|
||
if (!dynamicData[template.id]) dynamicData[template.id] = {};
|
||
dynamicData[template.id][cleanName] = input.value;
|
||
// Show/hide X based on content
|
||
clearX.style.display = input.value ? "block" : "none";
|
||
};
|
||
|
||
inputWrapper.appendChild(input);
|
||
inputWrapper.appendChild(clearX);
|
||
inputContainer.appendChild(inputWrapper);
|
||
});
|
||
|
||
itemContainer.appendChild(inputContainer);
|
||
|
||
row.onclick = () => {
|
||
const isChecked = !selectedItems.has(template.id);
|
||
if (isChecked) {
|
||
selectedItems.add(template.id);
|
||
} else {
|
||
selectedItems.delete(template.id);
|
||
// Auto-disable filter if no items are left selected
|
||
if (showSelectedOnly && selectedItems.size === 0) {
|
||
showSelectedOnly = false;
|
||
updateFilterBtnUI();
|
||
// Add this line to show everything again
|
||
renderList(searchInput.value);
|
||
return; // Exit here since renderList already handled the update
|
||
}
|
||
}
|
||
|
||
cb.checked = isChecked;
|
||
inputContainer.style.display =
|
||
isChecked && placeholders.length > 0 ? "flex" : "none";
|
||
|
||
// Re-render if filtering is active to remove the unchecked item from view
|
||
if (showSelectedOnly) {
|
||
renderList(searchInput.value);
|
||
}
|
||
};
|
||
|
||
listContainer.appendChild(itemContainer);
|
||
});
|
||
};
|
||
|
||
addBtn.onclick = () => editTemplate();
|
||
searchInput.oninput = (e) => renderList(e.target.value);
|
||
|
||
container.appendChild(header);
|
||
container.appendChild(listContainer);
|
||
|
||
// init node size
|
||
node.size = [310, 380];
|
||
|
||
let widget = node.addDOMWidget("InstructorWidget", "custom", container, {
|
||
tooltip: 'Instructor',
|
||
getValue: () => {
|
||
const finalStrings = [];
|
||
const allTemplates = getMergedTemplates();
|
||
// Follow the list order instead of selection order
|
||
allTemplates.forEach((template) => {
|
||
if (selectedItems.has(template.id)) {
|
||
let processedText = template.text.replace(/\s+/g, " ");
|
||
const placeholders = template.text.match(/\[#?([^\]]+)\]/g) || [];
|
||
placeholders.forEach((placeholder) => {
|
||
const cleanName = placeholder.replace(/[\[\]]/g, "");
|
||
const val = dynamicData[template.id]?.[cleanName] || placeholder;
|
||
processedText = processedText.replace(placeholder, val);
|
||
});
|
||
finalStrings.push(processedText);
|
||
}
|
||
});
|
||
return {
|
||
selected: Array.from(selectedItems),
|
||
dynamicData: dynamicData,
|
||
showSelectedOnly: showSelectedOnly,
|
||
finalText: finalStrings.join("\n\n"),
|
||
};
|
||
},
|
||
setValue: (v) => {
|
||
if (v) {
|
||
selectedItems = new Set(v.selected || []);
|
||
dynamicData = v.dynamicData || {};
|
||
showSelectedOnly = !!v.showSelectedOnly;
|
||
updateFilterBtnUI();
|
||
renderList(searchInput.value);
|
||
}
|
||
},
|
||
});
|
||
widget.tooltip = 'Instructor'
|
||
renderList();
|
||
node.setDirtyCanvas(true, true);
|
||
|
||
node.onResize = () => {
|
||
if (node.size[0] < 310) {
|
||
node.size[0] = 310;
|
||
}
|
||
};
|
||
|
||
node.onRemoved = () => {
|
||
widget = null;
|
||
};
|
||
},
|
||
});
|