690 lines
33 KiB
JavaScript
690 lines
33 KiB
JavaScript
const alignBottomSvg = `<svg t="1725534360155" class="icon" viewBox="0 0 1170 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1662" width="100%"><path d="M1170.285714 987.428571a36.571429 36.571429 0 0 0-36.571428-36.571428H36.571429a36.571429 36.571429 0 0 0 0 73.142857h1097.142857a36.571429 36.571429 0 0 0 36.571428-36.571429z m-219.428571-146.285714v-512a36.571429 36.571429 0 0 0-36.571429-36.571428h-219.428571a36.571429 36.571429 0 0 0-36.571429 36.571428v512a36.571429 36.571429 0 0 0 36.571429 36.571429h219.428571a36.571429 36.571429 0 0 0 36.571429-36.571429z m-438.857143 0V36.571429a36.571429 36.571429 0 0 0-36.571429-36.571429h-219.428571a36.571429 36.571429 0 0 0-36.571429 36.571429v804.571428a36.571429 36.571429 0 0 0 36.571429 36.571429h219.428571a36.571429 36.571429 0 0 0 36.571429-36.571429z" fill="#666666" p-id="1663"></path></svg>`;
|
|
const alignCenterHorizontallySvg = `<svg t="1725534379860" class="icon" viewBox="0 0 1243 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2250" width="100%"><path d="M548.571429 472.356571h146.285714V231.643429a36.571429 36.571429 0 0 1 36.571428-36.571429h219.428572a36.571429 36.571429 0 0 1 36.571428 36.571429v240.713142h179.785143a39.643429 39.643429 0 0 1 0 79.286858H987.428571v240.713142a36.571429 36.571429 0 0 1-36.571428 36.571429h-219.428572a36.571429 36.571429 0 0 1-36.571428-36.571429V551.643429h-146.285714V950.857143a36.571429 36.571429 0 0 1-36.571429 36.571428H292.571429a36.571429 36.571429 0 0 1-36.571429-36.571428V551.643429H76.214857a39.643429 39.643429 0 1 1 0-79.286858H256V73.142857A36.571429 36.571429 0 0 1 292.571429 36.571429h219.428571a36.571429 36.571429 0 0 1 36.571429 36.571428v399.213714z" fill="#666666" p-id="2251"></path></svg>`;
|
|
const alignCenterVerticallySvg = `<svg t="1725534363707" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1809" width="100%"><path d="M477.312 576V448H266.688a32 32 0 0 1-32-32v-192a32 32 0 0 1 32-32h210.624V34.688a34.688 34.688 0 0 1 69.376 0V192h210.624a32 32 0 0 1 32 32v192a32 32 0 0 1-32 32H546.688v128H896a32 32 0 0 1 32 32v192a32 32 0 0 1-32 32H546.688v157.312a34.688 34.688 0 1 1-69.376 0V832H128a32 32 0 0 1-32-32v-192A32 32 0 0 1 128 576h349.312z" fill="#666666" p-id="1810"></path></svg>`;
|
|
const alignLeftSvg = `<svg t="1725534370541" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2103" width="100%"><path d="M96 0a32 32 0 0 1 32 32v960a32 32 0 0 1-64 0V32A32 32 0 0 1 96 0z m128 192h448a32 32 0 0 1 32 32v192a32 32 0 0 1-32 32h-448a32 32 0 0 1-32-32v-192a32 32 0 0 1 32-32z m0 384h704a32 32 0 0 1 32 32v192a32 32 0 0 1-32 32h-704a32 32 0 0 1-32-32v-192a32 32 0 0 1 32-32z" fill="#666666" p-id="2104"></path></svg>`;
|
|
const alignRightSvg = `<svg t="1725534384109" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2397" width="100%"><path d="M928 0a32 32 0 0 1 32 32v960a32 32 0 0 1-64 0V32a32 32 0 0 1 32-32z m-576 192h448a32 32 0 0 1 32 32v192a32 32 0 0 1-32 32h-448a32 32 0 0 1-32-32v-192a32 32 0 0 1 32-32z m-256 384h704a32 32 0 0 1 32 32v192a32 32 0 0 1-32 32H96a32 32 0 0 1-32-32v-192A32 32 0 0 1 96 576z" fill="#666666" p-id="2398"></path></svg>`;
|
|
const alignTopSvg = `<svg t="1725534367556" class="icon" viewBox="0 0 1170 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1956" width="100%"><path d="M1170.285714 36.571429a36.571429 36.571429 0 0 1-36.571428 36.571428H36.571429a36.571429 36.571429 0 0 1 0-73.142857h1097.142857a36.571429 36.571429 0 0 1 36.571428 36.571429z m-219.428571 146.285714v512a36.571429 36.571429 0 0 1-36.571429 36.571428h-219.428571a36.571429 36.571429 0 0 1-36.571429-36.571428v-512a36.571429 36.571429 0 0 1 36.571429-36.571429h219.428571a36.571429 36.571429 0 0 1 36.571429 36.571429z m-438.857143 0v804.571428a36.571429 36.571429 0 0 1-36.571429 36.571429h-219.428571a36.571429 36.571429 0 0 1-36.571429-36.571429v-804.571428a36.571429 36.571429 0 0 1 36.571429-36.571429h219.428571a36.571429 36.571429 0 0 1 36.571429 36.571429z" fill="#666666" p-id="1957"></path></svg>`;
|
|
const horizontalDistributionSvg = `<svg t="1725534354023" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1515" width="100%"><path d="M96 0a32 32 0 0 1 32 32v960a32 32 0 0 1-64 0V32A32 32 0 0 1 96 0z m832 0a32 32 0 0 1 32 32v960a32 32 0 0 1-64 0V32a32 32 0 0 1 32-32zM384 800v-576a32 32 0 0 1 32-32h192a32 32 0 0 1 32 32v576a32 32 0 0 1-32 32h-192a32 32 0 0 1-32-32z" fill="#666666" p-id="1516"></path></svg>`;
|
|
const verticalDistributionSvg = `<svg t="1725534350231" class="icon" viewBox="0 0 1170 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1368" width="100%"><path d="M1170.285714 36.571429a36.571429 36.571429 0 0 1-36.571428 36.571428H36.571429a36.571429 36.571429 0 0 1 0-73.142857h1097.142857a36.571429 36.571429 0 0 1 36.571428 36.571429z m0 950.857142a36.571429 36.571429 0 0 1-36.571428 36.571429H36.571429a36.571429 36.571429 0 0 1 0-73.142857h1097.142857a36.571429 36.571429 0 0 1 36.571428 36.571428zM256 365.714286h658.285714a36.571429 36.571429 0 0 1 36.571429 36.571428v219.428572a36.571429 36.571429 0 0 1-36.571429 36.571428h-658.285714a36.571429 36.571429 0 0 1-36.571429-36.571428v-219.428572a36.571429 36.571429 0 0 1 36.571429-36.571428z" fill="#666666" p-id="1369"></path></svg>`;
|
|
const equalWidthSvg = `<svg t="1725606034670" class="icon" viewBox="0 0 1088 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7213" width="100%"><path d="M978.24 480a42.688 42.688 0 0 1-42.688 42.688H172.928a42.688 42.688 0 0 1-42.688-42.688V213.312c0-23.552 19.072-42.624 42.688-42.624h762.624c23.552 0 42.688 19.072 42.688 42.624V480z" fill="#666666" p-id="7214"></path><path d="M256.96 734.144c0-14.08 11.456-25.6 25.6-25.6h543.36a25.6 25.6 0 0 1 0 51.2h-543.36a25.6 25.6 0 0 1-25.6-25.6z" fill="#666666" p-id="7215"></path><path d="M136.64 745.216a12.8 12.8 0 0 1 0-22.144l184.192-106.368a12.8 12.8 0 0 1 19.2 11.072v212.736a12.8 12.8 0 0 1-19.2 11.072l-184.192-106.368zM971.84 745.216a12.8 12.8 0 0 0 0-22.144l-184.256-106.368a12.8 12.8 0 0 0-19.2 11.072v212.736a12.8 12.8 0 0 0 19.2 11.072l184.256-106.368z" fill="#666666" p-id="7216"></path></svg>`
|
|
const equalHeightSvg = `<svg t="1725606224564" class="icon" viewBox="0 0 1088 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7790" width="100%"><path d="M572.16 936a42.688 42.688 0 0 1-42.688-42.688V130.688c0-23.616 19.136-42.688 42.688-42.688h266.688c23.552 0 42.624 19.072 42.624 42.688v762.624a42.688 42.688 0 0 1-42.624 42.688H572.16z" fill="#666666" p-id="7791"></path><path d="M318.016 214.72c14.08 0 25.6 11.456 25.6 25.6v543.36a25.6 25.6 0 1 1-51.2 0v-543.36c0-14.144 11.456-25.6 25.6-25.6z" fill="#666666" p-id="7792"></path><path d="M306.944 94.4a12.8 12.8 0 0 1 22.144 0l106.368 184.192a12.8 12.8 0 0 1-11.072 19.2H211.648a12.8 12.8 0 0 1-11.072-19.2l106.368-184.192zM306.944 929.6a12.8 12.8 0 0 0 22.144 0l106.368-184.192a12.8 12.8 0 0 0-11.072-19.2H211.648a12.8 12.8 0 0 0-11.072 19.2l106.368 184.192z" fill="#666666" p-id="7793"></path></svg>`
|
|
|
|
const ButtonManager = {
|
|
isInitialized: false, // 检查是否已经初始化
|
|
buttonContainer: null, // 保存按钮容器
|
|
contextMenu: null, // 右键菜单
|
|
isPermanent: true, // 是否为驻留按钮
|
|
initialX: 0, // 初始位置X
|
|
initialY: 0, // 初始位置Y
|
|
dragStartX: 0, // 拖拽开始时的X
|
|
dragStartY: 0, // 拖拽开始时的Y
|
|
isDragging: false, // 检查是否正在拖拽
|
|
hasShownTooltip: false, // 检查是否已经显示过提示
|
|
isShow: true, // 是否显示按钮
|
|
|
|
// 初始化按钮
|
|
init() {
|
|
if (this.isInitialized) return; // 如果已经初始化过，不再重复创建
|
|
|
|
this.boundOnDragging = this.onDragging.bind(this);
|
|
this.boundOnDragEnd = this.onDragEnd.bind(this);
|
|
|
|
// 使用 CSS 定义 hover 效果和所有样式
|
|
const style = document.createElement('style');
|
|
style.textContent = `
|
|
#alignment-buttons {
|
|
position: absolute;
|
|
top: 20px;
|
|
right: 10px;
|
|
left: unset;
|
|
bottom: unset;
|
|
display: flex;
|
|
background: #2b2b2b;
|
|
padding: 4px;
|
|
border-radius: 4px;
|
|
z-index: 9999;
|
|
width: 290px;
|
|
height: 32px;
|
|
white-space: nowrap; /* 禁止换行，确保按钮在同一行显示 */
|
|
}
|
|
.custom-button {
|
|
width: 25px;
|
|
height: 25px;
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
background-color: #2b2b2b;
|
|
border: none;
|
|
cursor: pointer;
|
|
padding: 4px;
|
|
border-radius: 4px;
|
|
transition: background-color 0.3s ease;
|
|
}
|
|
.custom-button:hover {
|
|
background-color: #555555;
|
|
}
|
|
.divider {
|
|
width: 3.2px;
|
|
height: 15px;
|
|
background-color: #1e1e1e;
|
|
margin: 5px 4px;
|
|
border-radius: 9px;
|
|
cursor: grab;
|
|
}
|
|
.divider:active {
|
|
cursor: grabbing;
|
|
}
|
|
/* 提示样式 */
|
|
#tooltip {
|
|
position: absolute;
|
|
bottom: -20px;
|
|
right: 0;
|
|
background: #333;
|
|
color: white;
|
|
padding: 5px 10px;
|
|
border-radius: 6px;
|
|
display: none;
|
|
z-index: 1001;
|
|
white-space: nowrap;
|
|
font-size: 12px;
|
|
}
|
|
|
|
`;
|
|
document.head.appendChild(style);
|
|
|
|
// 创建按钮容器
|
|
this.buttonContainer = document.createElement('div');
|
|
this.buttonContainer.id = 'alignment-buttons';
|
|
|
|
// 从 localStorage 恢复位置
|
|
this.restorePosition();
|
|
|
|
document.body.appendChild(this.buttonContainer);
|
|
|
|
// 创建按钮并分配功能
|
|
const buttons = this.getButtons();
|
|
buttons.forEach(btn => {
|
|
if (btn.type === 'divider') {
|
|
// 创建分割线
|
|
const divider = document.createElement('div');
|
|
divider.classList.add('divider');
|
|
// 添加拖拽功能
|
|
divider.addEventListener('mousedown', this.onDragStart.bind(this));
|
|
document.addEventListener('mousemove', this.onDragging.bind(this));
|
|
document.addEventListener('mouseup', this.onDragEnd.bind(this));
|
|
|
|
this.buttonContainer.appendChild(divider);
|
|
} else {
|
|
// 创建按钮
|
|
const button = document.createElement('button');
|
|
button.id = btn.id;
|
|
button.classList.add('custom-button');
|
|
button.innerHTML = btn.svg;
|
|
button.addEventListener('click', (event) => {
|
|
btn.action.call(this, event);
|
|
event.stopPropagation();
|
|
});
|
|
this.buttonContainer.appendChild(button);
|
|
}
|
|
});
|
|
|
|
this.isInitialized = true; // 标记已经初始化
|
|
this.showContextMenu();
|
|
|
|
// 创建工具提示元素
|
|
const tooltip = document.createElement('div');
|
|
tooltip.id = 'tooltip';
|
|
tooltip.textContent = '右键可选按钮呈现模式'; // 工具提示的内容
|
|
this.buttonContainer.appendChild(tooltip);
|
|
|
|
// 从 localStorage 检查是否已经显示过提示
|
|
|
|
if (!this.hasShownTooltip) {
|
|
// 如果还没有显示过提示，设置悬停事件
|
|
this.buttonContainer.addEventListener('mouseenter', () => {
|
|
if (!this.hasShownTooltip) {
|
|
setTimeout(() => {
|
|
tooltip.style.display = 'block';
|
|
this.hasShownTooltip = true;
|
|
}, 1000);
|
|
}
|
|
});
|
|
|
|
this.buttonContainer.addEventListener('mouseleave', () => {
|
|
// 删除tooltip 当鼠标离开时隐藏提示
|
|
tooltip.remove();
|
|
});
|
|
}
|
|
|
|
let isPermanent = localStorage.getItem('NodeAlignerIsPermanent');
|
|
if (isPermanent) {
|
|
this.isPermanent = localStorage.getItem('NodeAlignerIsPermanent') == '1';
|
|
this.isPermanent ? this.show() : this.hide();
|
|
} else {
|
|
this.show()
|
|
}
|
|
},
|
|
|
|
// 获取按钮配置
|
|
getButtons() {
|
|
return [
|
|
/* 左对齐 */
|
|
{ id: 'alignLeft', svg: alignLeftSvg, action: this.alignLeft.bind(this) },
|
|
/* 竖向居中对齐 */
|
|
{ id: 'alignCenterVertically', svg: alignCenterVerticallySvg, action: this.alignCenterVertically.bind(this) },
|
|
/* 右对齐 */
|
|
{ id: 'alignRight', svg: alignRightSvg, action: this.alignRight.bind(this) },
|
|
// 分割线
|
|
{ type: 'divider' },
|
|
/* 顶部对齐 */
|
|
{ id: 'alignTop', svg: alignTopSvg, action: this.alignTop.bind(this) },
|
|
/* 横向居中对齐 */
|
|
{ id: 'alignCenterHorizontally', svg: alignCenterHorizontallySvg, action: this.alignCenterHorizontally.bind(this) },
|
|
/* 底部对齐 */
|
|
{ id: 'alignBottom', svg: alignBottomSvg, action: this.alignBottom.bind(this) },
|
|
// 分割线
|
|
{ type: 'divider' },
|
|
/* 横向分布 */
|
|
{ id: 'horizontalDistribution', svg: horizontalDistributionSvg, action: this.horizontalDistribution.bind(this) },
|
|
/* 竖向分布 */
|
|
{ id: 'verticalDistribution', svg: verticalDistributionSvg, action: this.verticalDistribution.bind(this) },
|
|
// 分割线
|
|
{ type: 'divider' },
|
|
/* 等宽 */
|
|
{ id: 'equalWidth', svg: equalWidthSvg, action: this.equalWidth.bind(this) },
|
|
/* 等高 */
|
|
{ id: 'equalHeight', svg: equalHeightSvg, action: this.equalHeight.bind(this) },
|
|
];
|
|
},
|
|
// 显示右键菜单
|
|
showContextMenu() {
|
|
// 创建右键菜单元素
|
|
this.contextMenu = document.createElement('div');
|
|
this.contextMenu.id = 'context-menu';
|
|
this.contextMenu.style.display = 'none'; // 初始设置为不显示
|
|
this.contextMenu.innerHTML = `
|
|
<button id="pin-mode">驻留</button>
|
|
<button id="toggle-on-select">选中后显示</button>
|
|
`;
|
|
this.buttonContainer.appendChild(this.contextMenu);
|
|
|
|
// 绑定右键菜单显示事件
|
|
this.buttonContainer.addEventListener('contextmenu', (event) => {
|
|
event.preventDefault();
|
|
this.contextMenu.style.display = 'block';
|
|
this.contextMenu.style.left = `${event.pageX}px`;
|
|
this.contextMenu.style.top = `${event.pageY}px`;
|
|
});
|
|
|
|
// 绑定菜单项的点击事件
|
|
this.contextMenu.querySelector('#pin-mode').addEventListener('click', () => {
|
|
// 实现固定模式的逻辑
|
|
this.contextMenu.style.display = 'none'; // 隐藏右键菜
|
|
this.isPermanent = true;
|
|
localStorage.setItem('NodeAlignerIsPermanent', '1');
|
|
this.restorePosition();
|
|
});
|
|
this.contextMenu.querySelector('#toggle-on-select').addEventListener('click', () => {
|
|
// 实现选中后显示模式的逻辑
|
|
this.buttonContainer.style.display = 'none'; // 默认不显示按钮容器
|
|
this.contextMenu.style.display = 'none'; // 隐藏右键菜单
|
|
this.isPermanent = false;
|
|
localStorage.setItem('NodeAlignerIsPermanent', '0');
|
|
});
|
|
},
|
|
// 显示按钮
|
|
show() {
|
|
this.isShow = true;
|
|
this.buttonContainer.style.display = 'flex'; // 显示按钮容器
|
|
},
|
|
|
|
// 隐藏按钮
|
|
hide() {
|
|
this.isShow = false;
|
|
this.buttonContainer.style.display = 'none'; // 隐藏按钮容器
|
|
},
|
|
setPosition(x, y) {
|
|
this.buttonContainer.style.left = `${x}px`;
|
|
this.buttonContainer.style.top = `${y}px`;
|
|
},
|
|
// 开始拖拽
|
|
onDragStart(e) {
|
|
if (!e.target.classList.contains('divider') || this.isDragging) return;
|
|
this.isDragging = true;
|
|
this.initialX = e.clientX;
|
|
this.initialY = e.clientY;
|
|
this.dragStartX = this.buttonContainer.offsetLeft;
|
|
this.dragStartY = this.buttonContainer.offsetTop;
|
|
|
|
document.addEventListener('mousemove', this.boundOnDragging);
|
|
document.addEventListener('mouseup', this.boundOnDragEnd);
|
|
},
|
|
// 拖拽中
|
|
onDragging(e) {
|
|
if (this.isDragging) {
|
|
const deltaX = e.clientX - this.initialX;
|
|
const deltaY = e.clientY - this.initialY;
|
|
|
|
// 计算新的位置
|
|
let newLeft = this.dragStartX + deltaX;
|
|
let newTop = this.dragStartY + deltaY;
|
|
|
|
// 获取容器的宽高和屏幕的宽高
|
|
const containerRect = this.buttonContainer.getBoundingClientRect();
|
|
const windowWidth = window.innerWidth;
|
|
const windowHeight = window.innerHeight;
|
|
|
|
// 边缘控制，确保容器不超出屏幕
|
|
if (newLeft < 0) {
|
|
newLeft = 0;
|
|
} else if (newLeft + containerRect.width > windowWidth) {
|
|
newLeft = windowWidth - containerRect.width;
|
|
}
|
|
|
|
if (newTop < 0) {
|
|
newTop = 0;
|
|
} else if (newTop + containerRect.height > windowHeight) {
|
|
newTop = windowHeight - containerRect.height;
|
|
}
|
|
|
|
// 更新位置
|
|
this.buttonContainer.style.left = `${newLeft}px`;
|
|
this.buttonContainer.style.top = `${newTop}px`;
|
|
}
|
|
},
|
|
// 结束拖拽
|
|
onDragEnd() {
|
|
this.isDragging = false;
|
|
// 移除事件监听器
|
|
document.removeEventListener('mousemove', this.onDragging);
|
|
document.removeEventListener('mouseup', this.onDragEnd);
|
|
|
|
// 获取按钮容器的位置信息
|
|
const rect = this.buttonContainer.getBoundingClientRect();
|
|
const windowWidth = window.innerWidth;
|
|
const windowHeight = window.innerHeight;
|
|
|
|
// 计算距离四个边的距离
|
|
const distanceToTop = rect.top;
|
|
const distanceToBottom = windowHeight - rect.bottom;
|
|
const distanceToLeft = rect.left;
|
|
const distanceToRight = windowWidth - rect.right;
|
|
|
|
// 选择两个最近的边
|
|
let top = 'unset';
|
|
let bottom = 'unset';
|
|
let left = 'unset';
|
|
let right = 'unset';
|
|
|
|
if (distanceToTop < distanceToBottom) {
|
|
top = `${distanceToTop}px`;
|
|
} else {
|
|
bottom = `${distanceToBottom}px`;
|
|
}
|
|
|
|
if (distanceToLeft < distanceToRight) {
|
|
left = `${distanceToLeft}px`;
|
|
} else {
|
|
right = `${distanceToRight}px`;
|
|
}
|
|
|
|
// 更新样式使其根据距离四边的情况固定
|
|
this.buttonContainer.style.top = top;
|
|
this.buttonContainer.style.bottom = bottom;
|
|
this.buttonContainer.style.left = left;
|
|
this.buttonContainer.style.right = right;
|
|
|
|
// 保存位置到 localStorage
|
|
localStorage.setItem('NodeAlignerButtonContainerPosition', JSON.stringify({ top, left, right, bottom }));
|
|
},
|
|
// 恢复位置
|
|
restorePosition() {
|
|
try {
|
|
const savedPosition = JSON.parse(localStorage.getItem('NodeAlignerButtonContainerPosition'));
|
|
if (savedPosition && typeof savedPosition === 'object') {
|
|
this.buttonContainer.style.top = savedPosition.top || '20px';
|
|
this.buttonContainer.style.bottom = savedPosition.bottom || 'unset';
|
|
this.buttonContainer.style.left = savedPosition.left || 'unset';
|
|
this.buttonContainer.style.right = savedPosition.right || '20px';
|
|
} else {
|
|
this.setDefaultPosition();
|
|
}
|
|
} catch (e) {
|
|
console.warn('Failed to parse saved position:', e);
|
|
this.setDefaultPosition();
|
|
}
|
|
},
|
|
setDefaultPosition() {
|
|
this.buttonContainer.style.top = '20px';
|
|
this.buttonContainer.style.right = '20px';
|
|
this.buttonContainer.style.bottom = 'unset';
|
|
this.buttonContainer.style.left = 'unset';
|
|
},
|
|
// 获取当前选中的节点
|
|
getSelectedNodes() {
|
|
if (!LGraphCanvas.active_canvas) return [];
|
|
const selectedNodesObj = LGraphCanvas.active_canvas.selected_nodes;
|
|
return selectedNodesObj ? Object.values(selectedNodesObj) : [];
|
|
},
|
|
// 辅助函数：按照 X 或 Y 坐标分组
|
|
groupNodesByCoordinate(nodes, axis, tolerance = 1000) {
|
|
if (nodes.length < 4) {
|
|
// 当选中节点小于 4 个时，不进行分组，直接返回包含所有节点的单个组
|
|
return [nodes];
|
|
}
|
|
|
|
const groups = [];
|
|
const otherAxis = 1 - axis; // 获取另一个轴 (0 -> 1, 1 -> 0)
|
|
|
|
// 1. 基于主轴（axis）对节点进行排序
|
|
nodes.sort((a, b) => a.pos[axis] - b.pos[axis]);
|
|
|
|
// 2. 计算主轴上的间距分布
|
|
const gaps = [];
|
|
for (let i = 1; i < nodes.length; i++) {
|
|
gaps.push(nodes[i].pos[axis] - (nodes[i - 1].pos[axis] + nodes[i - 1].size[axis]));
|
|
}
|
|
|
|
// 3. 使用统计方法确定分组的阈值（例如，平均间距加上标准差）
|
|
const avgGap = gaps.reduce((sum, gap) => sum + gap, 0) / gaps.length;
|
|
const stdDevGap = Math.sqrt(gaps.reduce((sum, gap) => sum + Math.pow(gap - avgGap, 2), 0) / gaps.length);
|
|
const threshold = avgGap + stdDevGap; // 阈值设置为平均间距加上一个标准差
|
|
|
|
// 4. 根据间距和副轴（otherAxis）上的位置进行分组
|
|
let currentGroup = [nodes[0]];
|
|
for (let i = 1; i < nodes.length; i++) {
|
|
const gap = nodes[i].pos[axis] - (nodes[i - 1].pos[axis] + nodes[i - 1].size[axis]);
|
|
const otherAxisDiff = Math.abs(nodes[i].pos[otherAxis] - nodes[i - 1].pos[otherAxis]);
|
|
|
|
if (gap <= threshold && otherAxisDiff <= tolerance) {
|
|
// 如果间距小于阈值且副轴上的差异小于容差，则将节点添加到当前组
|
|
currentGroup.push(nodes[i]);
|
|
} else {
|
|
// 否则，开始一个新的组
|
|
groups.push(currentGroup);
|
|
currentGroup = [nodes[i]];
|
|
}
|
|
}
|
|
groups.push(currentGroup); // 添加最后一组
|
|
|
|
return groups;
|
|
},
|
|
|
|
// 左对齐
|
|
alignLeft() {
|
|
const selectedNodes = this.getSelectedNodes();
|
|
if (selectedNodes.length === 0) {
|
|
const canvas = LGraphCanvas.active_canvas;
|
|
if (canvas) {
|
|
canvas.ds.offset = [80, 140]; // 重置视图位置
|
|
canvas.ds.scale = 1; // 重置缩放比例
|
|
canvas.setDirty(true, true);
|
|
}
|
|
} else {
|
|
// 按 X 轴进行分组
|
|
const groups = this.groupNodesByCoordinate(selectedNodes, 0); // 分组基于X轴坐标
|
|
groups.forEach(group => {
|
|
const leftMost = Math.min(...group.map(node => node.pos[0]));
|
|
group.forEach(node => {
|
|
node.pos[0] = leftMost; // 左对齐
|
|
});
|
|
});
|
|
}
|
|
LGraphCanvas.active_canvas.setDirty(true, true);
|
|
},
|
|
|
|
// 右对齐
|
|
alignRight() {
|
|
const selectedNodes = this.getSelectedNodes();
|
|
if (selectedNodes.length > 0) {
|
|
// 按 X 轴进行分组
|
|
const groups = this.groupNodesByCoordinate(selectedNodes, 0); // 分组基于X轴坐标
|
|
groups.forEach(group => {
|
|
const rightMost = Math.max(...group.map(node => node.pos[0] + node.size[0]));
|
|
group.forEach(node => {
|
|
node.pos[0] = rightMost - node.size[0]; // 右对齐
|
|
});
|
|
});
|
|
}
|
|
LGraphCanvas.active_canvas.setDirty(true, true);
|
|
},
|
|
|
|
// 顶部对齐
|
|
alignTop() {
|
|
const selectedNodes = this.getSelectedNodes();
|
|
if (selectedNodes.length > 0) {
|
|
// 按 Y 轴进行分组
|
|
const groups = this.groupNodesByCoordinate(selectedNodes, 1); // 分组基于Y轴坐标
|
|
groups.forEach(group => {
|
|
const topMost = Math.min(...group.map(node => node.pos[1]));
|
|
group.forEach(node => {
|
|
node.pos[1] = topMost; // 顶部对齐
|
|
});
|
|
});
|
|
}
|
|
LGraphCanvas.active_canvas.setDirty(true, true);
|
|
},
|
|
|
|
// 底部对齐
|
|
alignBottom() {
|
|
const selectedNodes = this.getSelectedNodes();
|
|
if (selectedNodes.length > 0) {
|
|
// 按 Y 轴进行分组
|
|
const groups = this.groupNodesByCoordinate(selectedNodes, 1); // 分组基于Y轴坐标
|
|
groups.forEach(group => {
|
|
const bottomMost = Math.max(...group.map(node => node.pos[1] + node.size[1]));
|
|
group.forEach(node => {
|
|
node.pos[1] = bottomMost - node.size[1]; // 底部对齐
|
|
});
|
|
});
|
|
}
|
|
LGraphCanvas.active_canvas.setDirty(true, true);
|
|
},
|
|
|
|
// 水平居中对齐
|
|
alignCenterHorizontally() {
|
|
const selectedNodes = this.getSelectedNodes();
|
|
if (selectedNodes.length > 0) {
|
|
// 按 Y 轴进行分组
|
|
const groups = this.groupNodesByCoordinate(selectedNodes, 1); // 分组基于Y轴坐标
|
|
groups.forEach(group => {
|
|
const centerY = this.calculateCenterInGroup(group, 1); // 计算 Y 轴中心
|
|
group.forEach(node => {
|
|
node.pos[1] = centerY - node.size[1] / 2; // 垂直居中
|
|
});
|
|
});
|
|
}
|
|
LGraphCanvas.active_canvas.setDirty(true, true);
|
|
},
|
|
|
|
// 垂直居中对齐
|
|
alignCenterVertically() {
|
|
const selectedNodes = this.getSelectedNodes();
|
|
if (selectedNodes.length > 0) {
|
|
// 按 X 轴进行分组
|
|
const groups = this.groupNodesByCoordinate(selectedNodes, 0); // 分组基于X轴坐标
|
|
groups.forEach(group => {
|
|
const centerX = this.calculateCenterInGroup(group, 0); // 计算 X 轴中心
|
|
group.forEach(node => {
|
|
node.pos[0] = centerX - node.size[0] / 2; // 水平居中
|
|
});
|
|
});
|
|
}
|
|
LGraphCanvas.active_canvas.setDirty(true, true);
|
|
},
|
|
|
|
// 计算组内节点的中心坐标
|
|
calculateCenterInGroup(group, axis) {
|
|
const minCoord = Math.min(...group.map(node => node.pos[axis]));
|
|
const maxCoord = Math.max(...group.map(node => node.pos[axis] + node.size[axis]));
|
|
return (minCoord + maxCoord) / 2;
|
|
},
|
|
|
|
// 横向分布
|
|
horizontalDistribution() {
|
|
const nodes = this.getSelectedNodes();
|
|
const axis = 0;
|
|
if (nodes.length > 1) {
|
|
// 按照节点在 axis 轴上的位置（高低）进行排序
|
|
nodes.sort((a, b) => a.pos[axis] - b.pos[axis]);
|
|
|
|
// 获取最小和最大的位置范围
|
|
const min = Math.min(...nodes.map(node => node.pos[axis]));
|
|
const max = Math.max(...nodes.map(node => node.pos[axis] + node.size[axis]));
|
|
|
|
// 计算节点的总尺寸
|
|
const totalSize = nodes.reduce((sum, node) => sum + node.size[axis], 0);
|
|
|
|
// 计算间距
|
|
const spacing = (max - min - totalSize) / (nodes.length - 1);
|
|
|
|
// 初始化当前分布位置
|
|
let current = min;
|
|
|
|
// 遍历排序后的节点，按顺序分布
|
|
nodes.forEach(node => {
|
|
node.pos[axis] = current; // 设置当前节点位置
|
|
current += node.size[axis] + spacing; // 更新下一个节点位置
|
|
});
|
|
|
|
// 重新渲染画布
|
|
LGraphCanvas.active_canvas.setDirty(true, true);
|
|
}
|
|
},
|
|
|
|
// 纵向分布
|
|
verticalDistribution() {
|
|
const nodes = this.getSelectedNodes();
|
|
|
|
if (nodes.length > 1) {
|
|
const axis = 1; // Y轴
|
|
const otherAxis = 0; // X轴
|
|
const tolerance = 100; // 用于将节点分组的容差
|
|
const minSpacing = 20; // 最小间距，保证节点之间至少有 20 像素的间隔
|
|
|
|
// 用于存储列的数组
|
|
const columns = [];
|
|
|
|
// 将节点按照 X 轴的位置进行分组（分成列）
|
|
nodes.forEach(node => {
|
|
let foundColumn = null;
|
|
|
|
for (let column of columns) {
|
|
const columnX = column[0].pos[otherAxis];
|
|
|
|
if (Math.abs(columnX - node.pos[otherAxis]) <= tolerance) {
|
|
foundColumn = column;
|
|
break;
|
|
}
|
|
}
|
|
|
|
if (foundColumn) {
|
|
foundColumn.push(node);
|
|
} else {
|
|
columns.push([node]);
|
|
}
|
|
});
|
|
|
|
// 计算每列的总高度
|
|
const columnHeights = columns.map(column => {
|
|
const minY = Math.min(...column.map(node => node.pos[axis]));
|
|
const maxY = Math.max(...column.map(node => node.pos[axis] + node.size[axis]));
|
|
return maxY - minY;
|
|
});
|
|
|
|
// 找到最高列的高度
|
|
const maxColumnHeight = Math.max(...columnHeights);
|
|
|
|
// 对每列进行处理
|
|
columns.forEach((column, columnIndex) => {
|
|
if (column.length > 1) {
|
|
// 按照节点在 Y 轴上的位置（高低）进行排序
|
|
column.sort((a, b) => a.pos[axis] - b.pos[axis]);
|
|
|
|
// 获取当前列的最小和最大 Y 位置
|
|
const minY = Math.min(...column.map(node => node.pos[axis]));
|
|
|
|
// 计算当前列的节点总尺寸
|
|
const totalSize = column.reduce((sum, node) => sum + node.size[axis], 0);
|
|
|
|
// 计算该列的额外可用空间并分配给节点之间的间距
|
|
let spacing = (maxColumnHeight - totalSize) / (column.length - 1);
|
|
spacing = Math.max(spacing, minSpacing); // 保证间距不小于最小间距
|
|
|
|
// 初始化当前分布位置，保持第一个节点位置不变
|
|
let currentY = column[0].pos[axis]; // 将第一个节点的位置作为起点
|
|
|
|
// 分布节点
|
|
column.forEach((node, idx) => {
|
|
if (idx === 0) {
|
|
// 第一个节点位置保持不变
|
|
currentY += node.size[axis] + spacing;
|
|
} else {
|
|
// 设置当前节点位置
|
|
node.pos[axis] = currentY;
|
|
currentY += node.size[axis] + spacing;
|
|
}
|
|
|
|
// 对齐 X 轴位置（所有节点在列内对齐）
|
|
node.pos[otherAxis] = column[0].pos[otherAxis];
|
|
});
|
|
} else if (column.length === 1) {
|
|
// 单个节点时，保持第一个节点与最小 Y 位置对齐
|
|
const node = column[0];
|
|
}
|
|
});
|
|
|
|
// 重新渲染画布
|
|
LGraphCanvas.active_canvas.setDirty(true, true);
|
|
}
|
|
},
|
|
// 等宽
|
|
equalWidth() {
|
|
this.equalSize(0);
|
|
},
|
|
|
|
// 等高
|
|
equalHeight() {
|
|
this.equalSize(1);
|
|
},
|
|
|
|
// 通用的节点尺寸调整
|
|
equalSize(axis) {
|
|
const nodes = this.getSelectedNodes();
|
|
if (nodes.length > 0) {
|
|
// 找到节点中最大的尺寸
|
|
const maxSize = Math.max(...nodes.map(node => node.size[axis]));
|
|
nodes.forEach(node => {
|
|
node.size[axis] = maxSize; // 设置所有节点的大小为最大值
|
|
});
|
|
LGraphCanvas.active_canvas.setDirty(true, true);
|
|
}
|
|
}
|
|
};
|
|
|
|
function pollForCanvas() {
|
|
const canvas = document.querySelector('canvas#graph-canvas');
|
|
if (canvas) {
|
|
ButtonManager.init();
|
|
// 监听左键单击事件
|
|
canvas.addEventListener('click', function (event) {
|
|
// 检查是否为非驻留模式
|
|
if (!ButtonManager.isPermanent) {
|
|
const selectedNodes = ButtonManager.getSelectedNodes();
|
|
if (selectedNodes.length >= 2) {
|
|
ButtonManager.show();
|
|
ButtonManager.setPosition(event.layerX - 240, event.layerY - 20);
|
|
} else {
|
|
ButtonManager.hide();
|
|
}
|
|
}
|
|
});
|
|
} else {
|
|
setTimeout(pollForCanvas, 1000); // 每隔 1 秒尝试查找一次
|
|
}
|
|
}
|
|
|
|
// 启动轮询查找
|
|
pollForCanvas();
|
|
|