575 lines
20 KiB
JavaScript
575 lines
20 KiB
JavaScript
import { app } from "../../../scripts/app.js";
|
||
import { EventManager } from "../utils/eventManager.js";
|
||
import "../lib/Sortable.min.js";
|
||
|
||
/**
|
||
* 调试开关：禁止自动折叠
|
||
* 在控制台输入 window.PA_DEBUG_NO_COLLAPSE = true 可禁止自动折叠
|
||
* 输入 window.PA_DEBUG_NO_COLLAPSE = false 可恢复自动折叠
|
||
*/
|
||
window.PA_DEBUG_NO_COLLAPSE = window.PA_DEBUG_NO_COLLAPSE || false;
|
||
|
||
// 锚点位置枚举
|
||
export const ANCHOR_POSITION = {
|
||
TOP_LEFT_H: 'top-left-h',
|
||
TOP_LEFT_V: 'top-left-v',
|
||
TOP_CENTER_H: 'top-center-h',
|
||
TOP_RIGHT_H: 'top-right-h',
|
||
TOP_RIGHT_V: 'top-right-v',
|
||
RIGHT_CENTER_V: 'right-center-v',
|
||
BOTTOM_RIGHT_H: 'bottom-right-h',
|
||
BOTTOM_RIGHT_V: 'bottom-right-v',
|
||
BOTTOM_CENTER_H: 'bottom-center-h',
|
||
BOTTOM_LEFT_H: 'bottom-left-h',
|
||
BOTTOM_LEFT_V: 'bottom-left-v',
|
||
LEFT_CENTER_V: 'left-center-v'
|
||
};
|
||
|
||
export class AssistantContainer {
|
||
constructor(options = {}) {
|
||
this.nodeId = options.nodeId;
|
||
this.type = options.type || 'prompt'; // 'prompt' or 'image'
|
||
this.anchorPosition = options.anchorPosition || ANCHOR_POSITION.BOTTOM_RIGHT_H;
|
||
this.offset = options.offset || { x: 0, y: 0 };
|
||
this.enableDragSort = options.enableDragSort !== false;
|
||
|
||
// 回调函数
|
||
this.onButtonOrderChange = options.onButtonOrderChange;
|
||
this.shouldCollapse = options.shouldCollapse;
|
||
|
||
// 状态
|
||
this.isCollapsed = true;
|
||
this.isTransitioning = false;
|
||
this.isDestroyed = false;
|
||
this.buttons = [];
|
||
this.element = null;
|
||
this.container = null;
|
||
this.hoverArea = null;
|
||
this.indicator = null;
|
||
this.content = null;
|
||
|
||
// 定时器
|
||
this._collapseTimer = null;
|
||
this._expandTimer = null;
|
||
|
||
// 事件清理函数
|
||
this._cleanupFunctions = [];
|
||
|
||
// Sortable 实例
|
||
this._sortable = null;
|
||
}
|
||
|
||
render() {
|
||
// 检查是否已销毁
|
||
if (this.isDestroyed) return null;
|
||
|
||
// 主容器
|
||
this.element = document.createElement('div');
|
||
this.element.className = `assistant-container-common ${this.type}-assistant-container`;
|
||
|
||
// 悬停区域（不可见，用于检测鼠标进入/离开）
|
||
this.hoverArea = document.createElement('div');
|
||
this.hoverArea.className = 'assistant-hover-area';
|
||
this.element.appendChild(this.hoverArea);
|
||
|
||
// 指示器（图标）
|
||
this.indicator = document.createElement('div');
|
||
this.indicator.className = `assistant-indicator ${this.type}-assistant-indicator`;
|
||
|
||
// 添加入场动画类
|
||
this.indicator.classList.add('indicator-init');
|
||
|
||
// 动画结束后移除初始化类
|
||
this.indicator.addEventListener('animationend', () => {
|
||
this.indicator.classList.remove('indicator-init');
|
||
}, { once: true });
|
||
|
||
this.element.appendChild(this.indicator);
|
||
|
||
// 按钮内容容器
|
||
this.content = document.createElement('div');
|
||
this.content.className = 'assistant-content';
|
||
this.element.appendChild(this.content);
|
||
|
||
// 基于锚点的初始样式
|
||
this.updatePosition();
|
||
|
||
// 绑定事件
|
||
this._bindEvents();
|
||
|
||
// 设置 Sortable
|
||
if (this.enableDragSort) {
|
||
this._setupSortable();
|
||
}
|
||
|
||
return this.element;
|
||
}
|
||
|
||
mount(parentElement) {
|
||
if (parentElement) {
|
||
parentElement.appendChild(this.element);
|
||
// 挂载后强制回流/更新尺寸
|
||
requestAnimationFrame(() => this.updateDimensions());
|
||
}
|
||
}
|
||
|
||
setIconContent(svgContent) {
|
||
if (this.indicator) {
|
||
this.indicator.innerHTML = svgContent;
|
||
}
|
||
}
|
||
|
||
addButton(buttonElement, id) {
|
||
if (!buttonElement) return;
|
||
buttonElement.dataset.id = id; // 用于 Sortable
|
||
|
||
// 设置按钮索引，用于递进动画延迟
|
||
const buttonIndex = this.buttons.length;
|
||
buttonElement.style.setProperty('--button-index', buttonIndex);
|
||
|
||
this.content.appendChild(buttonElement);
|
||
this.buttons.push({ id, element: buttonElement });
|
||
|
||
// 如果是分割线，根据当前布局方向设置类名
|
||
if (buttonElement.classList.contains('prompt-assistant-divider') ||
|
||
buttonElement.classList.contains('image-assistant-divider')) {
|
||
const isVertical = this.anchorPosition.endsWith('-v');
|
||
if (isVertical) {
|
||
buttonElement.classList.add('divider-horizontal');
|
||
}
|
||
}
|
||
|
||
this.updateDimensions();
|
||
}
|
||
|
||
// 批量添加按钮，如果已存在Sortable，则会遵循Sortable的逻辑（通常append）
|
||
// 如果需要特定顺序，应该在添加前排好序
|
||
addButtons(buttonElementsWithIds) {
|
||
buttonElementsWithIds.forEach(({ element, id }) => {
|
||
this.addButton(element, id);
|
||
});
|
||
}
|
||
|
||
// 清空按钮
|
||
clearButtons() {
|
||
this.content.innerHTML = '';
|
||
this.buttons = [];
|
||
}
|
||
|
||
setAnchorPosition(position) {
|
||
if (Object.values(ANCHOR_POSITION).includes(position)) {
|
||
this.anchorPosition = position;
|
||
this.updatePosition();
|
||
}
|
||
}
|
||
|
||
updatePosition() {
|
||
if (!this.element) return;
|
||
|
||
// 保存当前展开/折叠状态
|
||
const wasExpanded = !this.isCollapsed;
|
||
|
||
// 重置类名，保持当前状态
|
||
const stateClass = wasExpanded ? 'expanded' : 'collapsed';
|
||
this.element.className = `assistant-container-common ${this.type}-assistant-container ${stateClass}`;
|
||
|
||
// 添加布局类名
|
||
this.element.classList.add(`layout-${this.anchorPosition}`);
|
||
|
||
// 确保内容容器的 Flex 方向正确
|
||
const isVertical = this.anchorPosition.endsWith('-v');
|
||
if (isVertical) {
|
||
this.content.classList.add('flex-col');
|
||
this.content.classList.remove('flex-row');
|
||
} else {
|
||
this.content.classList.add('flex-row');
|
||
this.content.classList.remove('flex-col');
|
||
}
|
||
|
||
// 更新分割线类名：垂直布局时添加 divider-horizontal 类
|
||
this._updateDividerOrientation(isVertical);
|
||
|
||
// 触发尺寸重新计算
|
||
this.updateDimensions();
|
||
}
|
||
|
||
// 更新分割线方向类名
|
||
_updateDividerOrientation(isVertical) {
|
||
if (!this.content) return;
|
||
const dividers = this.content.querySelectorAll('.prompt-assistant-divider, .image-assistant-divider');
|
||
dividers.forEach(divider => {
|
||
if (isVertical) {
|
||
divider.classList.add('divider-horizontal');
|
||
} else {
|
||
divider.classList.remove('divider-horizontal');
|
||
}
|
||
});
|
||
}
|
||
|
||
/**
|
||
* 更新容器尺寸 (优化版：常量布局模式)
|
||
* 根据当前启用的按钮组合直接计算尺寸，避免 DOM 克隆测量带来的开销
|
||
*/
|
||
updateDimensions() {
|
||
if (!this.element || !this.content) return;
|
||
|
||
// --- 1. 获取当前状态统计 ---
|
||
const buttons = Array.from(this.content.children).filter(el =>
|
||
el.style.display !== 'none' &&
|
||
!el.classList.contains('assistant-indicator')
|
||
);
|
||
|
||
const totalCount = buttons.length;
|
||
if (totalCount === 0) return;
|
||
|
||
// 统计功能组
|
||
const hasHistoryGroup = buttons.some(el => el.dataset.id === 'history' || el.dataset.id === 'undo' || el.dataset.id === 'redo');
|
||
const hasDivider = buttons.some(el => el.classList.contains('prompt-assistant-divider') || el.classList.contains('image-assistant-divider'));
|
||
|
||
// 计算非历史且非分隔线的有效功能按钮数量
|
||
const otherFeaturesCount = buttons.filter(el =>
|
||
!['history', 'undo', 'redo'].includes(el.dataset.id) &&
|
||
!el.classList.contains('prompt-assistant-divider') &&
|
||
!el.classList.contains('image-assistant-divider')
|
||
).length;
|
||
|
||
// --- 2. 基于预设常量的尺寸映射 ---
|
||
let finalDimension = 28; // 默认单个按钮宽度 (或折叠尺寸)
|
||
|
||
// 逻辑规则匹配 (根据用户提供的精确测量值)
|
||
if (hasHistoryGroup && otherFeaturesCount === 3) {
|
||
finalDimension = 143; // 所有功能全开 (历史3 + 分隔线1 + 其它3)
|
||
} else if (hasHistoryGroup && otherFeaturesCount === 2) {
|
||
finalDimension = 121; // 历史 + 两个其它
|
||
} else if (hasHistoryGroup && otherFeaturesCount === 1) {
|
||
finalDimension = 99; // 历史 + 一个其它
|
||
} else if (hasHistoryGroup && otherFeaturesCount === 0) {
|
||
finalDimension = 77; // 只有历史功能
|
||
} else if (!hasHistoryGroup && otherFeaturesCount === 3) {
|
||
finalDimension = 72; // 关闭历史的三个功能
|
||
} else if (!hasHistoryGroup && otherFeaturesCount === 2) {
|
||
finalDimension = 50; // 只有两个按钮
|
||
} else if (!hasHistoryGroup && otherFeaturesCount === 1) {
|
||
finalDimension = 28; // 只有一个按钮
|
||
} else {
|
||
// 兜底动态计算逻辑: 基础28 + (额外按钮 * 22) + (如果有分隔线 ? 5 : 0)
|
||
const extraCount = totalCount - 1;
|
||
finalDimension = 28 + (extraCount * 22);
|
||
if (hasDivider) finalDimension += 5;
|
||
}
|
||
|
||
// --- 3. 应用尺寸 ---
|
||
const isVertical = this.anchorPosition.endsWith('-v');
|
||
if (isVertical) {
|
||
// 竖向布局：宽度固定，高度动态
|
||
this.element.style.setProperty('--expanded-width', `28px`);
|
||
this.element.style.setProperty('--expanded-height', `${finalDimension}px`);
|
||
} else {
|
||
// 横向布局：高度固定，宽度动态
|
||
this.element.style.setProperty('--expanded-width', `${finalDimension}px`);
|
||
this.element.style.setProperty('--expanded-height', `28px`);
|
||
}
|
||
|
||
/*
|
||
// --- 原有自动测量代码 (已注释，备用) ---
|
||
const clone = this.content.cloneNode(true);
|
||
clone.style.cssText = `
|
||
position: absolute;
|
||
visibility: hidden;
|
||
height: auto;
|
||
width: auto;
|
||
white-space: nowrap;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0;
|
||
`;
|
||
|
||
const isVerticalMeasure = this.anchorPosition.endsWith('-v');
|
||
clone.style.flexDirection = isVerticalMeasure ? 'column' : 'row';
|
||
|
||
document.body.appendChild(clone);
|
||
const contentWidth = clone.scrollWidth;
|
||
const contentHeight = clone.scrollHeight;
|
||
document.body.removeChild(clone);
|
||
|
||
const containerPadding = 4;
|
||
const lastButtonMargin = 2;
|
||
const collapsedSize = 28;
|
||
|
||
let expandedWidth, expandedHeight;
|
||
if (isVerticalMeasure) {
|
||
expandedWidth = collapsedSize;
|
||
expandedHeight = Math.max(contentHeight + containerPadding + lastButtonMargin, collapsedSize);
|
||
} else {
|
||
expandedWidth = Math.max(contentWidth + containerPadding + lastButtonMargin, collapsedSize);
|
||
expandedHeight = collapsedSize;
|
||
}
|
||
|
||
this.element.style.setProperty('--expanded-width', `${expandedWidth}px`);
|
||
this.element.style.setProperty('--expanded-height', `${expandedHeight}px`);
|
||
*/
|
||
}
|
||
|
||
_bindEvents() {
|
||
// 带中断逻辑的悬停处理
|
||
const onMouseEnter = () => this.expand();
|
||
const onMouseLeave = () => this.collapse();
|
||
|
||
// 绑定到悬停区域和元素本身
|
||
// 使用 EventManager 来绑定，以便于清理
|
||
this._cleanupFunctions.push(EventManager.addDOMListener(this.element, 'mouseenter', onMouseEnter));
|
||
this._cleanupFunctions.push(EventManager.addDOMListener(this.element, 'mouseleave', onMouseLeave));
|
||
}
|
||
|
||
expand() {
|
||
// 检查是否已销毁
|
||
if (this.isDestroyed) return;
|
||
|
||
// 清除任何挂起的折叠定时器
|
||
if (this._collapseTimer) {
|
||
clearTimeout(this._collapseTimer);
|
||
this._collapseTimer = null;
|
||
}
|
||
|
||
// 先更新尺寸，确保 CSS 变量在展开前就设置好
|
||
this.updateDimensions();
|
||
|
||
// 根据锚点位置调整按钮递进动画索引
|
||
this._updateButtonStaggerIndex();
|
||
|
||
// 立即展开
|
||
this.isCollapsed = false;
|
||
this.element.classList.remove('collapsed');
|
||
this.element.classList.add('expanded');
|
||
|
||
// 隐藏指示器
|
||
if (this.indicator) {
|
||
this.indicator.style.opacity = '0';
|
||
this.indicator.style.pointerEvents = 'none';
|
||
}
|
||
|
||
// 显示内容
|
||
if (this.content) {
|
||
this.content.style.opacity = '1';
|
||
this.content.style.pointerEvents = 'auto';
|
||
}
|
||
}
|
||
|
||
// 根据锚点位置调整按钮递进动画索引
|
||
_updateButtonStaggerIndex() {
|
||
if (!this.content) return;
|
||
|
||
const children = Array.from(this.content.children);
|
||
const totalButtons = children.length;
|
||
|
||
// 判断是否需要反向索引
|
||
// 右侧布局向左展开、底部布局向上展开时，需要反向（最后的按钮先显示）
|
||
const needReverse = this._isReverseStaggerDirection();
|
||
|
||
children.forEach((child, index) => {
|
||
const staggerIndex = needReverse ? (totalButtons - 1 - index) : index;
|
||
child.style.setProperty('--button-index', staggerIndex);
|
||
});
|
||
}
|
||
|
||
// 判断递进动画是否需要反向
|
||
_isReverseStaggerDirection() {
|
||
// 从右侧/底部展开的布局需要反向
|
||
// right 布局：从右向左展开，最右边的按钮先显示
|
||
// bottom-v 布局：从下向上展开，最下面的按钮先显示
|
||
const pos = this.anchorPosition;
|
||
|
||
// 横向布局：右侧的需要反向
|
||
if (pos.includes('right') && pos.endsWith('-h')) {
|
||
return true;
|
||
}
|
||
// 竖向布局：底部的需要反向（column-reverse）
|
||
if (pos.includes('bottom') && pos.endsWith('-v')) {
|
||
return true;
|
||
}
|
||
|
||
return false;
|
||
}
|
||
|
||
collapse() {
|
||
// 检查是否已销毁
|
||
if (this.isDestroyed) return;
|
||
|
||
// 调试模式：禁止自动折叠
|
||
if (window.PA_DEBUG_NO_COLLAPSE) return;
|
||
|
||
// 检查是否应阻止折叠（例如：激活的菜单）
|
||
if (this.shouldCollapse && !this.shouldCollapse()) {
|
||
return;
|
||
}
|
||
|
||
// 折叠前设置短暂延迟，允许鼠标在间隙/按钮之间移动
|
||
// 但如果用户移回，expand() 会取消此操作。
|
||
this._collapseTimer = setTimeout(() => {
|
||
// 再次检查，因为在延迟期间状态可能已改变
|
||
if (this.shouldCollapse && !this.shouldCollapse()) {
|
||
return;
|
||
}
|
||
|
||
this.isCollapsed = true;
|
||
this.element.classList.remove('expanded');
|
||
this.element.classList.add('collapsed');
|
||
|
||
// 显示指示器（清除内联样式，让 CSS 变量 --assistant-icon-opacity 生效）
|
||
if (this.indicator) {
|
||
this.indicator.style.opacity = '';
|
||
this.indicator.style.pointerEvents = '';
|
||
}
|
||
|
||
// 隐藏内容
|
||
if (this.content) {
|
||
this.content.style.opacity = '0';
|
||
this.content.style.pointerEvents = 'none';
|
||
}
|
||
|
||
// 折叠完成后，检测鼠标是否仍在热区内
|
||
// 解决自动折叠后鼠标仍在热区，但需要移出再移入才能展开的问题
|
||
this._checkMouseStillInHoverArea();
|
||
}, 150); // 为了易用性设置的小延迟
|
||
}
|
||
|
||
// ---检测鼠标是否仍在热区内---
|
||
_checkMouseStillInHoverArea() {
|
||
if (!this.element) return;
|
||
|
||
// 使用 requestAnimationFrame 确保 DOM 已更新
|
||
requestAnimationFrame(() => {
|
||
// 获取当前鼠标位置下的元素
|
||
const hoveredElements = document.querySelectorAll(':hover');
|
||
|
||
// 检查小助手容器或其子元素是否被悬停
|
||
let isMouseInside = false;
|
||
for (const el of hoveredElements) {
|
||
if (this.element.contains(el) || el === this.element) {
|
||
isMouseInside = true;
|
||
break;
|
||
}
|
||
}
|
||
|
||
// 如果鼠标仍在热区内，且当前是折叠状态，则触发展开
|
||
if (isMouseInside && this.isCollapsed) {
|
||
this.expand();
|
||
}
|
||
});
|
||
}
|
||
|
||
_setupSortable() {
|
||
if (!this.content) return;
|
||
|
||
this._sortable = new Sortable(this.content, {
|
||
animation: 150,
|
||
ghostClass: 'sortable-ghost',
|
||
onEnd: (evt) => {
|
||
const newOrder = Array.from(this.content.children)
|
||
.map(el => el.dataset.id)
|
||
.filter(Boolean);
|
||
|
||
// 保存排序
|
||
if (this.onButtonOrderChange) {
|
||
this.onButtonOrderChange(newOrder);
|
||
}
|
||
|
||
// 持久化到 settings
|
||
this._saveOrderToSettings(newOrder);
|
||
}
|
||
});
|
||
}
|
||
|
||
_saveOrderToSettings(order) {
|
||
const settingKey = `PromptAssistant.ButtonOrder.${this.type}`;
|
||
// 使用 app.ui.settings 保存
|
||
// ComfyUI 设置通常通过 app.ui.settings.setSettingValue(id, value) 设置
|
||
if (app.ui && app.ui.settings) {
|
||
app.ui.settings.setSettingValue(settingKey, JSON.stringify(order));
|
||
}
|
||
}
|
||
|
||
restoreOrder() {
|
||
const settingKey = `PromptAssistant.ButtonOrder.${this.type}`;
|
||
if (!app.ui || !app.ui.settings) return;
|
||
|
||
const orderStr = app.ui.settings.getSettingValue(settingKey);
|
||
if (!orderStr) return;
|
||
|
||
try {
|
||
const order = JSON.parse(orderStr);
|
||
if (!Array.isArray(order) || order.length === 0) return;
|
||
|
||
// 按ID创建现有按钮的映射
|
||
const buttonMap = new Map();
|
||
Array.from(this.content.children).forEach(el => {
|
||
if (el.dataset.id) {
|
||
buttonMap.set(el.dataset.id, el);
|
||
}
|
||
});
|
||
|
||
// 按保存的顺序恢复按钮位置,新增按钮放在末尾
|
||
const existingButtons = Array.from(this.content.children);
|
||
const orderedIds = new Set(order);
|
||
|
||
// 首先追加排序后的项
|
||
order.forEach(id => {
|
||
const el = buttonMap.get(id);
|
||
if (el) {
|
||
this.content.appendChild(el);
|
||
}
|
||
});
|
||
|
||
// 然后追加任何剩余项，如果它们不在顺序列表中
|
||
existingButtons.forEach(el => {
|
||
if (el.dataset.id && !orderedIds.has(el.dataset.id)) {
|
||
this.content.appendChild(el);
|
||
}
|
||
});
|
||
|
||
this.updateDimensions();
|
||
} catch (e) {
|
||
logger.warn("[PromptAssistant] 恢复按钮顺序失败:", e);
|
||
}
|
||
}
|
||
|
||
destroy() {
|
||
// 防止重复销毁
|
||
if (this.isDestroyed) return;
|
||
this.isDestroyed = true;
|
||
|
||
// 清理定时器
|
||
if (this._collapseTimer) {
|
||
clearTimeout(this._collapseTimer);
|
||
this._collapseTimer = null;
|
||
}
|
||
if (this._expandTimer) {
|
||
clearTimeout(this._expandTimer);
|
||
this._expandTimer = null;
|
||
}
|
||
|
||
// 清理监听器
|
||
this._cleanupFunctions.forEach(fn => fn && fn());
|
||
this._cleanupFunctions = [];
|
||
|
||
// 销毁 Sortable
|
||
if (this._sortable) {
|
||
this._sortable.destroy();
|
||
this._sortable = null;
|
||
}
|
||
|
||
// 移除元素
|
||
if (this.element && this.element.parentNode) {
|
||
this.element.parentNode.removeChild(this.element);
|
||
}
|
||
|
||
// 清空所有引用
|
||
this.element = null;
|
||
this.container = null;
|
||
this.content = null;
|
||
this.indicator = null;
|
||
this.hoverArea = null;
|
||
this.buttons = [];
|
||
}
|
||
}
|