// ======================== 导入颜色SVG模板 ========================
import { ColorSVGs } from "./web/color_svgs.js";





// ======================== 公共构建工具 ========================
const buildSVG = (innerContent, { t, pId }) => {
    return `<svg t="${t}" class="icon" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" p-id="${pId}" width="100%">
        ${innerContent}
    </svg>`;
};

// ======================== 基础图形元素 ========================
const Elements = {
    // 标准矩形（严格使用原始坐标参数）
    rect: (x, y, width, height) => 
        `<rect class="ht-1" x="${x}" y="${y}" width="${width}" height="${height}" rx="1" ry="1"/>`,

    // 垂直线（精确到像素）
    vLine: (x, height = 24) =>
        `<rect class="ht-1" x="${x}" y="${(32 - height)/2}" width="2" height="${height}" rx="1"/>`,

    // 水平线（精确到像素）
    hLine: (y, width = 24) =>
        `<rect class="ht-1" x="${(32 - width)/2}" y="${y}" width="${width}" height="2" rx="1"/>`,

    // 拖动点矩阵
    dotMatrix: () => {
        const dots = [];
        // 原始坐标：三行两列
        const positions = [
            [11, 6], [21, 6],
            [11, 16], [21, 16],
            [11, 26], [21, 26]
        ];
        positions.forEach(([cx, cy], index) => {
            dots.push(`<circle ${index === 0 ? 'id="dot"' : ''} class="ht-2" cx="${cx}" cy="${cy}" r="2"/>`);
        });
        return dots.join('');
    }
};

// ======================== 具体图标模板 ========================
const Templates = {
    // 拖动按钮
    moveElement: () => {
        const dotMatrixContent = Elements.dotMatrix().replace(/id="dot"/g, 'id="base-dot"');
        return `
            <defs>${dotMatrixContent}</defs>
            ${dotMatrixContent.replace(/id="base-dot"/g, 'use href="#base-dot"')}
        `;
    },

    // 左对齐
    alignLeft: () => `
        ${Elements.rect(10, 9, 12, 6)}
        ${Elements.rect(10, 19, 18, 6)}
        ${Elements.vLine(5, 24)}`,

    // 竖向居中对齐
    alignCenterVertically: () => `
        ${Elements.rect(9, 9, 14, 6)}
        ${Elements.rect(6, 19, 20, 6)}
        ${Elements.vLine(15, 24)}`,

    // 右对齐
    alignRight: () => `
        ${Elements.rect(11, 9, 12, 6)}
        ${Elements.rect(5, 19, 18, 6)}
        ${Elements.vLine(26, 24)}`,

    // 顶部对齐
    alignTop: () => `
        ${Elements.rect(8, 9, 6, 12)}
        ${Elements.rect(18, 9, 6, 18)}
        ${Elements.hLine(5, 24)}`,

    // 横向居中对齐
    alignCenterHorizontally: () => `
        ${Elements.rect(18, 6, 6, 20)}
        ${Elements.rect(8, 9, 6, 14)}
        ${Elements.hLine(15, 24)}`,

    // 底部对齐
    alignBottom: () => `
        ${Elements.rect(8, 11, 6, 12)}
        ${Elements.rect(18, 5, 6, 18)}
        ${Elements.hLine(26, 24)}`,

    // 横向分布	基准线（y=7，长度24px）
    horizontalDistribution: () => `
        ${Elements.rect(19, 5, 2, 7)}
        ${Elements.rect(11, 5, 2, 7)}
        ${Elements.rect(19, 13, 6, 11)}
        ${Elements.rect(7, 13, 6, 15)}
        ${Elements.hLine(7, 24)}`,

    // 竖向分布	基准线（x=6，高度24px）
    verticalDistribution: () => `
        ${Elements.rect(12, 7, 11, 6)}
        ${Elements.rect(4, 11, 7, 2)}
        ${Elements.rect(4, 19, 7, 2)}
        ${Elements.rect(12, 19, 16, 6)}
        ${Elements.vLine(6, 24)}`,

    // 等宽
    equalWidth: () => `
        ${Elements.rect(9, 9, 14, 6)}
        ${Elements.rect(11, 19, 10, 6)}
        ${Elements.vLine(4, 24)}
        ${Elements.vLine(26, 24)}
        ${Elements.rect(4, 21, 5, 2)}
        ${Elements.rect(23, 21, 5, 2)}`,

    // 等高
    equalHeight: () => `
        ${Elements.rect(18, 9, 6, 14)}
        ${Elements.rect(8, 11, 6, 10)}
        ${Elements.hLine(4, 24)}
        ${Elements.hLine(26, 24)}
        ${Elements.rect(10, 4, 2, 5)}
        ${Elements.rect(10, 23, 2, 5)}`
};

// ======================== 最终导出的SVG常量 ========================
const moveElementSvg = buildSVG(Templates.moveElement(), { t: '1745769856000', pId: '8808' });
const alignLeftSvg = buildSVG(Templates.alignLeft(), { t: '1725534370541', pId: '2104' });
const alignCenterVerticallySvg = buildSVG(Templates.alignCenterVertically(), { t: '1725534363707', pId: '1810' });
const alignRightSvg = buildSVG(Templates.alignRight(), { t: '1725534384109', pId: '2398' });
const alignTopSvg = buildSVG(Templates.alignTop(), { t: '1725534367556', pId: '1957' });
const alignCenterHorizontallySvg = buildSVG(Templates.alignCenterHorizontally(), { t: '1725534379860', pId: '2251' });
const alignBottomSvg = buildSVG(Templates.alignBottom(), { t: '1725534360155', pId: '1663' });
const horizontalDistributionSvg = buildSVG(Templates.horizontalDistribution(), { t: '1725534354023', pId: '1516' });
const verticalDistributionSvg = buildSVG(Templates.verticalDistribution(), { t: '1725534350231', pId: '1369' });
const equalWidthSvg = buildSVG(Templates.equalWidth(), { t: '1725606034670', pId: '7216' });
const equalHeightSvg = buildSVG(Templates.equalHeight(), { t: '1725606224564', pId: '7793' });
    

// 实现ButtonManager对象
const ButtonManager = {
	// 2025-04-30 00:50:28 ================UI缩放====================
	zoomLevels: [1.5, 2, 0.5, 1], // 缩放级别顺序
	currentZoom: 1, // 当前缩放级别
	isSystemZoom: false, // 是否系统级缩放

    
	// 2025-04-28 18:44:47 ================= 颜色配置 =================
    ColorConfig: {
        colors: {
            red: '#a93232',
            orange: '#79461d',
            yellow: '#6e6e1d',
            green: '#2b652b',
            cyan: '#248382',
            blue: '#246283',
            purple: '#3c3c83',
            custom: '#ffffff' // 自定义颜色占位符
        },
        // 新增颜色映射
        colorMapping: {
            titleDarken: -0.1,   // 标题颜色加深比例
            noteTextLighten: 0.2 // 注释文本提亮比例
        }
    },

	// ================= UI缩放方法 =================
	toggleUIScale(e) {
		// 获取下一个缩放级别
		const currentIndex = this.zoomLevels.indexOf(this.currentZoom);
		const nextIndex = (currentIndex + 1) % this.zoomLevels.length;
		this.currentZoom = this.zoomLevels[nextIndex];
		this.isSystemZoom = e.ctrlKey;

		// 应用缩放
		if (this.isSystemZoom) {
			document.body.style.zoom = this.currentZoom;
			this.buttonContainer.style.transform = '';
		} else {
			this.buttonContainer.style.transform = `scale(${this.currentZoom})`;
			document.body.style.zoom = '';
		}

		// 更新按钮文本
		this.updateScaleButtonText();
	},

	updateScaleButtonText() {
		const scaleBtn = this.contextMenu.querySelector('#ui-scale-btn');
		if (scaleBtn) {
			scaleBtn.textContent = `UI缩放 ${this.currentZoom}x`;
		}
	},

    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; // 如果已经初始化过，不再重复创建


		// 2025-04-30 00:57:36 =============确保每次初始化时重置缩放状态==开始================
		this.currentZoomIndex = 0;
		this.systemWideZoom = false;
		// 在init()方法中删除旧版本的重置逻辑
		// if (this.buttonContainer) {
			// this.buttonContainer.style.transform = '';
		// }
		// if (document.body) {
			// document.body.style.zoom = '';
		// }
		// 2025-04-30 00:57:36 =============确保每次初始化时重置缩放状态==结束================

        this.boundOnDragging = this.onDragging.bind(this);
        this.boundOnDragEnd = this.onDragEnd.bind(this);

        // 使用 CSS 定义 hover 效果和所有样式
        const style = document.createElement('style');
		style.textContent = `
            /* 2025-04-28 07:56:21 ArtsticH-提取自 SVG 的全局通用样式 */
            .ht-1 {
                fill: #6b6b70;		/* 主图标颜色 */
                stroke-width: 0px;
            }
            .ht-2 {
                fill: #525252;		/* 拖动按钮圆点颜色 */
                stroke-width: 0px;
            }
			
			#alignment-buttons {	/* 【对齐按钮组样式】 */
				/* white-space: nowrap;	设置元素为绝对定位方式			position: absolute; */
				top: 20px;				/* 设置元素距离顶部的偏移量			top: 20px; */
				right: 10px;			/* 设置元素距离右侧的偏移量			right: 10px; */
				left: 10px;			/* 取消元素左侧定位设置				left: unset; */
				bottom: unset;			/* 取消元素底部定位设置				bottom: unset; */
				display: flex;			/* 设置元素为弹性布局显示			display: flex; */
				flex-direction: row; /* 使子元素垂直排列column; */
				background: #18181B;	/* 设置元素的背景颜色（建议#161616,18181B）	background: #2b2b2b; */
				padding: 8px;			/* 设置元素的内边距					padding: 4px; */
				border-radius: 6px;		/* 设置元素的边框圆角				border-radius: 4px; */
				z-index: 9999;			/* 设置元素的层级，确保在上方显示 	z-index: 9999; */

				width: fit-content;			/*设置元素的宽度	760px;519px;503px;461px;414px;382px				width: 290px; */
				height: 48px;			/* 设置元素的高度	46px				height: 32px; */	
				position: absolute;		/* 禁止文本换行，使按钮同行显示 	white-space: nowrap; */
				border: 1px solid;		/* 2025-04-27 23:32:07	Artstich新增*/
				border-color: #3D3D43;		/* 2025-04-27 23:32:07	Artstich新增*/
				align-self: center;     /* 新增：确保单个按钮垂直居中 */
				box-sizing: border-box; /* 新增：防止padding影响高度计算 */
				/* place-items: center; 子元素水平和垂直居中 */
				/* text-align: center; 让子元素水平居中 */
				max-width: 800;
				min-width: 420;
			}
			/* 禁止子元素改变容器尺寸 */
			#alignment-buttons > * {
			    flex-shrink: 0;
			}

			.custom-button {		/* 单个按钮样式 */
				width: 32px;			/* 设置按钮的宽度					width: 25px; */
				height: 32px;			/* 设置按钮的高度					height: 25px; */
				background-size: contain;	/* 设置背景图片大小以适应元素	background-size: contain; */
				background-repeat: no-repeat;	/* 设置背景图片不重复显示	background-repeat: no-repeat; */
				background-position: center;	/* 设置背景图片居中显示		background-position: center; */
				background-color: #18181B;	/* 设置按钮的背景颜色（建议#161616,18181B）	background-color: #2b2b2b; */
				border: none;			/* 设置按钮无边框					border: none; */
				cursor: pointer;		/* 设置鼠标悬停按钮时的指针样式		cursor: pointer; */
				padding: 4px;			/* 设置按钮的内边距					padding: 4px; */
				border-radius: 4px;		/* 设置按钮的边框圆角				border-radius: 4px; */
				transition: background-color 0.3s ease;	/* 设置按钮背景颜色过渡效果		transition: background-color 0.3s ease; */
				align-self: center;			/* 新增：确保单个按钮垂直居中 */
				vertical-align: middle;      /* 修复 SVG 图标基线偏移问题 */
				display: inline-flex;        /* 改为行内弹性布局 */
				align-items: center;         /* 按钮内部垂直居中 */
				justify-content: center;     /* 按钮内部水平居中 */
			}
			.custom-button:hover {	/* 【按钮悬浮效果】 */
				background-color: #222226;	/* 设置鼠标悬停按钮时的背景颜色		background-color: #141414; */
			}
			/* ↓2025-04-28 01:09:28	Artstich新增移动按钮专属悬浮色-开始	fill: #232935 !important; */
			#moveElement:hover {
			    background-color: #70A3F3 !important;
			    cursor: move;
			}

			/* ↓2025-04-28 18:00:05 新增SVG图标样式-开始 */
			/* .custom-button { border: 1px solid red !important; }		显示按钮大小位置示意测试 */
			.custom-button svg path {
				pointer-events: none; /* 防止路径阻挡点击 */
			}
			.custom-button:hover svg {
				filter: drop-shadow(0 2px 4px rgba(255,255,255,0.2));
			}

			/* #moveElement:hover svg .ht-1 {fill: #232935 !important;} */
			#alignment-buttons #moveElement:hover svg .ht-1 {  /* 精准覆盖 SVG 内部类名 */
			    fill: #232935 !important;    /* 优先级覆盖内联样式-增加嵌套层级 */
			}
			/* ↑2025-04-28 01:09:28	Artstich新增移动按钮专属悬浮色-结束 */
			.divider {			/* 【按钮分割线】 */
				width: 1px;				/* 设置分割线的宽度					width: 3.2px; */
				height: 40px;			/* 设置分割线的高度					height: 15px; */
				background-color: #27272B;	/* 设置分割线的背景颜色(建议#111117,27272B)	background-color: #1e1e1e; */
				margin: 0px 10px;		/* 设置分割线的外边距-6px 10px;		margin: 5px 4px; */
				border-radius: 9px;		/* 设置分割线的边框圆角				border-radius: 9px; */
				cursor: move; 			/* 设置鼠标悬停分割线时的指针样式	cursor: grab; */ 
				align-self: center;     /* 新增：确保单个按钮垂直居中 */
			}
			.divider:active {	/* 【按钮分割线-鼠标悬浮样式】用以拖动 */
				cursor: grabbing;		/* 设置鼠标按下分割线时的指针样式	cursor: grabbing; */
			}



			/* 提示样式 */
			#tooltip {			/* 【提示框样式】 */
				position: absolute;		/* 设置提示框为绝对定位方式		position: absolute; */
				bottom: -20px;			/* 设置提示框距离底部的偏移量	bottom: -20px; */
				right: 0;				/* 设置提示框距离右侧的偏移量	right: 0; */
				background: #70A3F3;	/* 设置提示框的背景颜色			background: #333; */
				color: white;			/* 设置提示框内文字的颜色		color: white; */
				padding: 5px 10px;		/* 设置提示框的内边距			padding: 5px 10px; */
				border-radius: 6px;		/* 设置提示框的边框圆角			border-radius: 6px; */
				display: none;			/* 设置提示框默认隐藏			display: none; */
				z-index: 1001;			/* 设置提示框的层级				z-index: 1001; */
				white-space: nowrap;	/* 禁止提示框内文本换行			white-space: nowrap; */
				font-size: 16px;		/* 设置提示框内文字的字体大小	font-size: 12px; */
			}



			/* 2025-04-28 03:48:09 ArtsticH新增-右键菜单容器样式 */
			#context-menu {
				display: flex;	/* flex布局 */
				white-space: nowrap;	/* 防止换行、合并空白字符 */
				box-sizing: border-box;

				background: #18181B;	/* 设置提示框的背景颜色-测试定位用	#70A3F3; */

				align-items: center; /* 确保子元素垂直居中 */
				justify-content: center; /* 确保子元素水平居中 */
				width: auto; /* 改为自动宽度width: 1300;auto; */
				height: auto; /* 保持固定高度height: 32px; */
				border-radius: 6px;
				z-index: 9999;
				padding: 0 8px; /* 添加内边距 */
				gap: 6px; /* 按钮间距 */
				margin-left: -656.73px;/* 微调水平偏移量	margin-left: -630.73px; */

				/* margin-left: -200px; 向左偏移 20px */
				/* display: inline-block; */
				/* vertical-align: middle; */
				/* align-self: center;     新增：确保单个按钮垂直居中 */
				/* place-items: center; 子元素水平和垂直居中 */
				/* text-align: center; 让子元素水平居中 */
			}
			/* 2025-04-28 03:48:09 ArtsticH新增-右键菜单按钮样式-精准控制按钮垂直位置 */
			#context-menu :is(input, button) {
				height: 26; 		/* 高度auto;height: 26px; */
				min-height: 16px; 	/* 最小高度 */
				font-size: 14px;
				background: #09090B;
				border: 1px solid #3D3D43;
				border-radius: 6px;
				color: #fff;
				padding: 4px 12px; /* 调整内边距 */
				margin: 0;		/* 移除外边距。	按钮间距margin: 0 3px; */

				transition: all 0.1s ease;	/* 过渡动画		transition: all 0.2s ease; */
			    position: relative !important;			
			}
			#context-menu button {
				min-height: 32px !important;
				/* top: -233x !important;          微调垂直偏移量 */
				/* right: 35px !important;          微调水平偏移量 */
			}
			#context-menu input {
				outline: none;
				min-height: 32px !important;
				top: -1.5px !important;          /* 微调垂直偏移量 */
				/* right: 35px !important;          微调水平偏移量 */
			}

			/* 2025-04-28 03:48:09 ArtsticH新增-悬停效果 */
			#context-menu :is(input, button):hover {
			    background: #222226;		/* 悬停背景色	background: #222226; */
			    border-color: #70A3F3;		/* 悬停边框色	border-color: #70A3F3; */
			    transform: scale(1.1);		/* 轻微放大		transform: scale(1.1); */
			}
			/* 2025-04-28 03:48:09 ArtsticH新增-点击效果 */
			#context-menu :is(input, button):active {
			    background: #2D2D32;        /* 点击背景色	background: #2D2D32; */
			    transform: scale(0.98);     /* 轻微缩小		transform: scale(0.98); */
			}

			#context-menu input:hover {
				outline: none;
			    transform: scale(1) !important;		/* 轻微放大		transform: scale(1.1); */
			}
			/* 2025-04-28 03:48:09 ArtsticH新增-点击效果 */
			#context-menu input:active {
				outline: none;
			    transform: scale(0.99) !important;     /* 轻微缩小		transform: scale(0.98); */
			}

			/* 2025-04-28 03:48:09 ArtsticH新增-文字标签和文字链接样式 */
			#context-menu a.no-underline {
			    color: #A1A1AA;             /* 文字颜色		color: #A1A1AA; */
			    text-decoration: none;      /* 去除下划线	text-decoration: none; */
			    margin-right: 8px;          /* 右侧间距		margin-right: 8px; */
			    /* display: inline-block !important; */
				/* vertical-align: middle !important; */
				/* line-height: 32px !important; 与按钮高度一致 */
				/* margin-right: 8px !important; */
			}

			/* 2025-04-28 18:44:47 新增颜色按钮专用样式 */
			#alignment-buttons [id^="color"] {
				width: 24px !important;		/* width: 16px !important; */
				height: 24px !important;	/* height: 16px !important; */
				padding: 0px !important;	/* 内边距	padding: 2px !important; */
				margin: 0 2px !important;	/* 外边距	margin: 0 4px !important; */
				background: none !important;
				margin-top: 40px; /* 增加上边距，使颜色按钮位于基础按钮下方 */
			}
			#alignment-buttons [id^="color"] svg {
				display: block !important;
				width: 100% !important;
				height: 100% !important;
				transition: transform 0.1s ease;
			}

			#alignment-buttons [id^="color"]:hover svg {
				transform: scale(1.5);
				filter: drop-shadow(0 2px 4px rgba(255,255,255,0.2));
			}

			/* 2025-04-28 18:44:47 颜色按钮激活状态 */
		    .custom-button.color-active {
		        box-shadow: 0 0 0 2px #70A3F3;
		    }

			/* 颜色选择器图标特殊样式 */
			#colorCustom svg {
				position: relative;
				background: rgba(0,0,0,1);	/* rgba(7,7,8,0.8); background: rgba(100,100,100,0.3); */
				border-radius: 50%;		/* border-radius: 6px; */
				transition: transform 0.1s ease;	/* 2025-04-28 18:44:47 颜色选择器图标动画 */
			}
		    #colorCustom:hover svg {
		        transform: rotate(15deg);
		    }

		    /* 清除按钮特殊样式 */
		    #colorClear {
		        position: relative;
		    }

		    #colorClear::after {
		        content: "×";
		        position: absolute;
		        color: #ff4444;
		        font-size: 20px;
		        top: 50%;
		        left: 50%;
		        transform: translate(-50%, -50%);
		        transition: font-size 0.1s ease;
		    }
			#colorClear:hover::after {
			    font-size: 32px;
			}

		    /* 2025-04-28 18:44:47 颜色按钮提示 */
		    .color-tooltip {
		        position: absolute;
		        bottom: -25px;
		        background: #333;
		        color: white;
		        padding: 2px 8px;
		        border-radius: 4px;
		        font-size: 12px;
		        white-space: nowrap;
		    }
		`;
        document.head.appendChild(style);

        // 创建按钮容器（保留结构和ID）
        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');

                this.buttonContainer.appendChild(divider);
            } else {
                // 创建按钮
                const button = document.createElement('button');
                button.id = btn.id;
                button.classList.add('custom-button');
                button.innerHTML = btn.svg;		/* SVG作为按钮的子元素 */
                button.addEventListener('click', (event) => {
                    btn.action.call(this, event);
                    event.stopPropagation();
                });
                this.buttonContainer.appendChild(button);
            }  
        });

		// 2025-04-28 02:54:54 修复事件委托：绑定 mousedown 到按钮容器，正确触发拖拽
		this.buttonContainer.addEventListener('mousedown', (e) => {
		    
			// 使用 closest 查找是否是分割线或移动按钮
		    const isMoveElement = e.target.closest('#moveElement') !== null;
		    const isDivider = e.target.classList.contains('divider');
		    
		    if (isMoveElement || isDivider) {
		        this.onDragStart(e); // 触发拖拽
		    }
		});

        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()
        }
    },


	// ================= 简化后的颜色方法 =================
	createColorCircle(colorName) {
		return ColorSVGs.circle(this.ColorConfig.colors[colorName]);
	},

	createColorPickerIcon() {
		/* return ColorSVGs.colorPicker;	旧版颜色选择器图标svg */
		return `
		<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 32 32">
		  <defs>
		    <style>
		      .cls-1 {
		        fill: #6b6b70;
		        stroke-width: 0px;
		      }
		    </style>
		  </defs>
		  <path class="cls-1" d="M16,7c4.96,0,9,4.04,9,9s-4.04,9-9,9-9-4.04-9-9,4.04-9,9-9M16,5c-6.08,0-11,4.92-11,11s4.92,11,11,11,11-4.92,11-11-4.92-11-11-11h0Z"/>
		  <rect class="cls-1" x="15" y="2" width="2" height="9" rx="1" ry="1"/>
		  <rect class="cls-1" x="15" y="21" width="2" height="9" rx="1" ry="1"/>
		  <rect class="cls-1" x="14" y="14" width="4" height="4" rx="1" ry="1"/>
		  <rect class="cls-1" x="2" y="15" width="9" height="2" rx="1" ry="1"/>
		  <rect class="cls-1" x="21" y="15" width="9" height="2" rx="1" ry="1"/>
		</svg>
	    `;

	},

	// 2025-04-28 18:44:47 ================= 优化后的颜色设置方法 =================
	setNodesColor(event, colorType) {
	    try {
	        const app = this.getComfyUIAppInstance();
	        if (!app) {
	            console.warn("ComfyUI实例获取失败");
	            return;
	        }

	        // 获取颜色配置
	        const color = this.ColorConfig.colors[colorType];
	        if (!color) {
	            console.warn(`未定义的颜色类型: ${colorType}`);
	            return;
	        }

	        // 获取选中项
	        const selectedNodes = this.getSelectedNodes(app);
	        const selectedGroups = this.getSelectedGroups(app);
	        
	        if (selectedNodes.length + selectedGroups.length === 0) {
	            console.warn("未选择任何节点或组");
	            return;
	        }

	        // 应用颜色到节点
	        selectedNodes.forEach(node => {
	            // 跳过系统节点
	            if(node.is_system) return; 
	            this.applyColorToNode(node, color);
	        });

	        // 应用颜色到组
	        selectedGroups.forEach(group => {
	            group.color = color;
	            // 设置子节点颜色
	            if(group.children) {
	                group.children.forEach(nodeID => {
	                    const node = app.graph.getNodeById(nodeID);
	                    if(node) this.applyColorToNode(node, color);
	                });
	            }
	        });

	        // 刷新画布
	        app.graph.setDirtyCanvas(true, true);
	        // 记录操作历史
	        if(app.graph.afterChange) app.graph.afterChange();
	        
	    } catch(error) {
	        console.error("颜色设置失败:", error);
	    }
	},
	// 2025-04-30 12:51:05 =====================新增 resetNodesColor 方法===================
	resetNodesColor() {
		try {
			const app = this.getComfyUIAppInstance();
			if (!app) return;

			// 获取选中节点和组
			const selected = [...this.getSelectedNodes(app), ...this.getSelectedGroups(app)];
			if (selected.length === 0) return;

			// 重置颜色
			selected.forEach(item => {
				if (item.is_system) return;
				
				if (item.pos !== undefined) { // 节点
					item.color = undefined;
					item.bgcolor = undefined;
					if (item.setDirtyCanvas) item.setDirtyCanvas(true);
				} 
				else if (item.children) { // 组
					item.color = undefined;
					item.children.forEach(nodeId => {
						const node = app.graph.getNodeById(nodeId);
						if (node) {
							node.color = undefined;
							node.bgcolor = undefined;
							if (node.setDirtyCanvas) node.setDirtyCanvas(true);
						}
					});
				}
			});

			// 刷新画布
			app.graph.setDirtyCanvas(true, true);
			if (app.graph.afterChange) app.graph.afterChange();
		} catch (error) {
			console.error("颜色重置失败:", error);
		}
	},

	// 2025-04-28 18:44:47 ================打开原生颜色选择器==========================
	openNativeColorPicker() {
	    try {
	        const app = this.getComfyUIAppInstance();
	        if (!app) {
	            console.warn("ComfyUI实例获取失败");
	            return;
	        }

	        // 获取选中项
	        const selectedNodes = this.getSelectedNodes(app);
	        const selectedGroups = this.getSelectedGroups(app);
	        
	        if (selectedNodes.length + selectedGroups.length === 0) {
	            console.warn("请先选择节点或组");
	            return;
	        }

	        // 创建隐藏的input元素
	        const input = document.createElement('input');
	        input.type = 'color';
	        input.style.cssText = `
	            position: fixed;
	            opacity: 0;
	            pointer-events: none;
	            top: -100px;
	        `;

	        // 设置初始颜色值
	        const lastColor = selectedNodes[0]?.bgcolor || selectedGroups[0]?.color || '#3355aa';
	        input.value = this.rgbToHex(lastColor);

	        // 颜色变更处理
	        input.addEventListener('change', (e) => {
	            const color = e.target.value;
	            
	            // 应用颜色到节点
	            selectedNodes.forEach(node => {
	                if(node.is_system) return;
	                this.applyColorToNode(node, color);
	            });

	            // 应用颜色到组
	            selectedGroups.forEach(group => {
	                group.color = color;
	                if(group.children) {
	                    group.children.forEach(nodeID => {
	                        const node = app.graph.getNodeById(nodeID);
	                        if(node) this.applyColorToNode(node, color);
	                    });
	                }
	            });

	            // 刷新并记录历史
	            app.graph.setDirtyCanvas(true, true);
	            if(app.graph.afterChange) app.graph.afterChange();
	            
	            document.body.removeChild(input);
	        });

	        document.body.appendChild(input);
	        input.click();

	    } catch(error) {
	        console.error("颜色选择器打开失败:", error);
	    }
	},

	/**
	 * RGB转HEX（新增辅助方法）
	 */
	rgbToHex(rgb) {
	    if (!rgb) return '#000000';
	    if (rgb.startsWith('#')) return rgb;
	    
	    const match = rgb.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/);
	    if (match) {
	        return '#' + 
	            (1 << 24 | 
	             parseInt(match[1]) << 16 | 
	             parseInt(match[2]) << 8 | 
	             parseInt(match[3])
	            ).toString(16).slice(1);
	    }
	    return '#000000';
	},


	// 获取ComfyUI实例
	getComfyUIAppInstance() {
		return {
			canvas: LGraphCanvas.active_canvas,
			graph: LGraphCanvas.active_canvas.graph
		};
	},



    // 获取按钮配置
    getButtons() {
        return [
            /* 拖动按钮 2025-04-28 00:11:44	ArtsticH新增 */
            /* { id: 'moveElement', svg: moveElementSvg, action: () => {} }, */
            { id: 'moveElement', svg: moveElementSvg },
            // 按钮：分割线
            { type: 'divider' },
            /* 按钮：左对齐 */
            { 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) },
            // 按钮：分割线
            { type: 'divider' },
            /* 拖动按钮 2025-04-28 00:11:44	ArtsticH新增 */
            /* { id: 'moveElement', svg: moveElementSvg, action: () => {} }, */
            
        	// 2025-04-28 18:44:47 ================颜色按钮配置==========================
            // 颜色按钮组（按顺序排列）
            { id: 'colorRed', svg: this.createColorCircle('red'), action: (e) => this.setNodesColor(e, 'red') },
            { id: 'colorOrange', svg: this.createColorCircle('orange'), action: (e) => this.setNodesColor(e, 'orange') },
            { id: 'colorYellow', svg: this.createColorCircle('yellow'), action: (e) => this.setNodesColor(e, 'yellow') },
            { id: 'colorGreen', svg: this.createColorCircle('green'), action: (e) => this.setNodesColor(e, 'green') },
            { id: 'colorCyan', svg: this.createColorCircle('cyan'), action: (e) => this.setNodesColor(e, 'cyan') },
            { id: 'colorBlue', svg: this.createColorCircle('blue'), action: (e) => this.setNodesColor(e, 'blue') },
            { id: 'colorPurple', svg: this.createColorCircle('purple'), action: (e) => this.setNodesColor(e, 'purple') },
            // { 
                // id: 'colorReset', 
                // svg: `<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        // <path fill="#6b6b70" d="M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"/>
                        // <path fill="#6b6b70" d="M12,6A6,6 0 0,0 6,12A6,6 0 0,0 12,18A6,6 0 0,0 18,12A6,6 0 0,0 12,6Z"/>
                    // </svg>`, 
                // action: this.resetNodesColor.bind(this) 
            // },

            { id: 'colorClear', svg: this.createColorCircle('clear'), action: this.resetNodesColor.bind(this) },
			// { id: 'colorClear', svg: this.createColorCircle('clear'), action: (e) => this.setNodesColor(e, 'clear') },
            { id: 'colorCustom', svg: this.createColorPickerIcon(), action: () => this.openNativeColorPicker() },
			{ id: 'moveElement', svg: moveElementSvg },
      
        ];
    },
    // ================================显示右键菜单=============================
	
    showContextMenu() {
        // 创建右键菜单元素
        this.contextMenu = document.createElement('div');
        this.contextMenu.id = 'context-menu';
        this.contextMenu.style.display = 'none'; // 初始设置为不显示

        /* ↓若需加提示文字，请把此注释加到常驻显示button前： <a href="#" class="no-underline">显示模式：</a>  */
		// ↓2025-04-28 17:20:25 ArtsticH新增 配色按钮组
        this.contextMenu.innerHTML = `
			<input type="text" placeholder="搜索节点 Github@ArtsitcH">
			<button id="ui-scale-btn">UI缩放${this.zoomLevels[this.currentZoomIndex]}x</button>

			<button id="">色卡减淡</button>
			<button id="">色卡换行</button>
            <button id="pin-mode">常驻显示</button>
            <button id="toggle-on-select">跟随选框</button>
        `;

        this.buttonContainer.appendChild(this.contextMenu);

        // 原始的基础绑定右键菜单显示事件-2025-04-28 16:59:18已移除
        // 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`;
        // });
        
        // ↓2025-04-28 17:00:12 ArtsticH重写右键菜单逻辑-开始
		this.buttonContainer.addEventListener('contextmenu', (event) => {
			event.preventDefault();
			
			// 判断菜单是否已显示
			const isMenuVisible = this.contextMenu.style.display === 'block';
			const isClickInsideMenu = this.contextMenu.contains(event.target);

			if (isMenuVisible) {
				// 如果菜单已显示且点击在菜单外，则关闭
				if (!isClickInsideMenu) {
					this.contextMenu.style.display = 'none';
				}
			} else {
				// 显示菜单并定位
				this.contextMenu.style.display = 'block';
				this.contextMenu.style.left = `${event.pageX}px`;
				this.contextMenu.style.top = `${event.pageY}px`;
			}
		});
		// 新增：点击菜单外部区域关闭-暂未生效
		document.addEventListener('mousedown', (e) => {
			if (this.contextMenu.style.display === 'block' && 
				!this.contextMenu.contains(e.target) &&
				!this.buttonContainer.contains(e.target)) {
				this.contextMenu.style.display = 'none';
			}
		});
		// 新增：菜单内部右键关闭
		this.contextMenu.addEventListener('contextmenu', (e) => {
			e.preventDefault();
			this.contextMenu.style.display = 'none';
		});
		// ↑2025-04-28 17:00:12 ArtsticH重写右键菜单逻辑-结束
		

        // 绑定菜单项的点击事件
        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');
        });


		// 2025-04-30 00:56:39 ==================添加UI缩放按钮事件==开始===================
		this.contextMenu.querySelector('#ui-scale-btn').addEventListener('click', (e) => {
			this.contextMenu.querySelector('#ui-scale-btn').addEventListener('click', (e) => {
			// 检测Ctrl键是否按下
			this.systemWideZoom = e.ctrlKey;
			this.toggleUIScale();
			});
		});
		// 2025-04-30 00:56:39 ==================添加UI缩放按钮事件==结束===================
    },

    // 显示按钮
    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`;
    },

	// =============================UI缩放==开始====================
	// 添加缩放方法
	toggleUIScale() {
		// 新的循环逻辑：1→1.5→2→0.5→1
		this.currentZoomIndex = (this.currentZoomIndex + 1) % 4;
		const scale = this.zoomLevels[this.currentZoomIndex];

		// 此时systemWideZoom来自点击事件中的e.ctrlKey
		if (this.systemWideZoom) {
			// 系统级缩放
			document.body.style.zoom = scale;
			this.buttonContainer.style.transform = '';
		} else {
			// 仅缩放插件容器
			this.buttonContainer.style.transform = `scale(${scale})`;
			document.body.style.zoom = '';

			// 更新按钮文本
			this.contextMenu.querySelector('#ui-scale-btn').textContent = `UI缩放 ${this.zoomLevels[this.currentZoomIndex]}x`;
		}
	},

	// =============================UI缩放==结束====================

    // 开始拖拽-2025-04-28 02:54:54修正
    onDragStart(e) {
        // 2025-04-28 01:39:38 新增-修正后的 onDragStart 方法
	    if (this.isDragging) return;	/* 优先检查是否正在拖拽-防止重复触发 */
	    
	    // 2025-04-28 02:58:53-新增-确认目标元素是分割线或移动按钮
        const isMoveElement = e.target.closest('#moveElement') !== null;
        const isDivider = e.target.classList.contains('divider');
        if (!(isMoveElement || isDivider)) 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);


		// 2025-04-28 02:43:52 新增-直接放行，事件委托已过滤无效目标
    	this.isDragging = true;
    },
    // 拖拽中
    onDragging(e) {
        if (this.isDragging) {
	        // 2025-04-29 16:36:27 保存原始宽度
	        const originalWidth = this.buttonContainer.offsetWidth;
	        
	        // 位置计算逻辑
            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;
            }

	        // 2025-04-29 16:36:27 更新位置前强制设置宽度
	        this.buttonContainer.style.width = `${originalWidth}px`;
	        this.buttonContainer.style.left = `${newLeft}px`;
	        this.buttonContainer.style.top = `${newTop}px`;

            // 更新位置
            this.buttonContainer.style.left = `${newLeft}px`;
            this.buttonContainer.style.top = `${newTop}px`;
        }
    },



// ======================== 新增位置验证方法 ========================
validateAndAdjustPosition(pos) {
    const containerRect = this.buttonContainer.getBoundingClientRect();
    const windowWidth = window.innerWidth;
    const windowHeight = window.innerHeight;

    // 计算安全边界（考虑元素自身尺寸）
    const safeLeft = Math.max(0, Math.min(pos.left, windowWidth - containerRect.width));
    const safeTop = Math.max(0, Math.min(pos.top, windowHeight - containerRect.height));

    // 如果计算结果与原始值偏差超过20px则认为需要重置位置
    if (Math.abs(pos.left - safeLeft) > 20 || Math.abs(pos.top - safeTop) > 20) {
        return this.getCentralPosition();
    }

    return { left: safeLeft, top: safeTop };
},

// ======================== 获取中间靠上位置 ========================
getCentralPosition() {
    return {
        left: Math.max(0, window.innerWidth/2 - this.buttonContainer.offsetWidth/2),
        top: 20
    };
},



    // 结束拖拽
// ======================== 修改后的 onDragEnd 方法 ========================
onDragEnd() {
    this.isDragging = false;
    document.removeEventListener('mousemove', this.boundOnDragging);
    document.removeEventListener('mouseup', this.boundOnDragEnd);

    // 获取当前实际位置
    const rect = this.buttonContainer.getBoundingClientRect();
    const originalPos = {
        left: rect.left,
        top: rect.top
    };

    // 验证并调整位置
    const safePos = this.validateAndAdjustPosition(originalPos);
    
    // 应用调整后的位置
    this.buttonContainer.style.left = `${safePos.left}px`;
    this.buttonContainer.style.top = `${safePos.top}px`;

    // 保存安全位置
    localStorage.setItem('NodeAlignerButtonContainerPosition', JSON.stringify({
        left: safePos.left,
        top: safePos.top
    }));

    // 恢复自适应宽度
    this.buttonContainer.style.width = 'fit-content';
},

    // 恢复位置
// ======================== 修改后的 restorePosition 方法 ========================
restorePosition() {
    try {
        const savedPosition = JSON.parse(localStorage.getItem('NodeAlignerButtonContainerPosition'));
        if (!savedPosition) {
            this.setCentralPosition();
            return;
        }

        // 初始验证
        let pos = {
            left: savedPosition.left || window.innerWidth/2 - this.buttonContainer.offsetWidth/2,
            top: savedPosition.top || 20
        };

        // 二次验证
        const validatedPos = this.validateAndAdjustPosition(pos);
        
        // 应用验证后的位置
        this.buttonContainer.style.left = `${validatedPos.left}px`;
        this.buttonContainer.style.top = `${validatedPos.top}px`;

        // 强制更新存储
        localStorage.setItem('NodeAlignerButtonContainerPosition', JSON.stringify(validatedPos));

    } catch (e) {
        console.warn('位置信息异常，重置到默认位置:', e);
        this.setCentralPosition();
    }
},


// ======================== 修改默认位置设置 ========================
setCentralPosition() {
    const pos = this.getCentralPosition();
    this.buttonContainer.style.left = `${pos.left}px`;
    this.buttonContainer.style.top = `${pos.top}px`;
    localStorage.setItem('NodeAlignerButtonContainerPosition', JSON.stringify(pos));
},





    // 获取当前选中的节点
    getSelectedNodes() {
        if (!LGraphCanvas.active_canvas) return [];
        const selectedNodesObj = LGraphCanvas.active_canvas.selected_nodes;
        return selectedNodesObj ? Object.values(selectedNodesObj) : [];
    },
    
    
    
    
// 2025-04-28 18:44:47  ================= 颜色功能核心方法-开始 =================
	/**
	 * 调整颜色亮度（完整移植自align.js）
	 * @param {string} hex - 原始颜色值
	 * @param {number} percent - 调整比例(-1到1)
	 * @returns {string} 调整后的HEX颜色
	 */
	adjustColorBrightness(hex, percent) {
	    // 处理缩写格式
	    hex = hex.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i, (m, r, g, b) => '#' + r + r + g + g + b + b);
	    
	    // 解析颜色分量
	    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
	    if (!result) return '#000000';
	    
	    let r = parseInt(result[1], 16);
	    let g = parseInt(result[2], 16);
	    let b = parseInt(result[3], 16);

	    // 计算调整量
	    const amount = Math.round(2.55 * percent * 100);
	    r = Math.min(255, Math.max(0, r + amount));
	    g = Math.min(255, Math.max(0, g + amount));
	    b = Math.min(255, Math.max(0, b + amount));

	    // 转回HEX
	    return '#' + 
	        (r | 1 << 8).toString(16).slice(1) + 
	        (g | 1 << 8).toString(16).slice(1) + 
	        (b | 1 << 8).toString(16).slice(1);
	},

	/**
	 * 应用颜色到单个节点（完整逻辑）
	 * @param {LGraphNode} node - 节点实例
	 * @param {string} color - HEX颜色值
	 */
	applyColorToNode(node, color) {
	    if (!node || typeof node !== 'object') return;
	    
	    try {
	        // 设置标题颜色（加深10%）
	        node.color = this.adjustColorBrightness(color, -0.1);
	        // 设置背景色（原始颜色）
	        node.bgcolor = color;
	        
	        // 标记需要刷新
	        if(node.setDirtyCanvas) {
	            node.setDirtyCanvas(true);
	        }
	        
	        // 特殊处理注释节点
	        if(node.type === "Note") {
	            node.properties.text_color = this.adjustColorBrightness(color, 0.2);
	        }
	    } catch(error) {
	        console.error(`应用颜色到节点失败:`, error);
	    }
	},

	/**
	 * 获取选中的组（完整移植）
	 */
	getSelectedGroups(app) {
	    try {
	        // 优先使用canvas的选中组
	        if(app.canvas?.selected_group) {
	            return [app.canvas.selected_group];
	        }
	        
	        // 备用方案：遍历所有组
	        const groups = [];
	        if(app.graph?.groups) {
	            for(const group of app.graph.groups) {
	                if(group.selected) {
	                    groups.push(group);
	                }
	            }
	        }
	        return groups;
	    } catch(error) {
	        console.error("获取选中组失败:", error);
	        return [];
	    }
	},
// 2025-04-28 18:44:47  ================= 颜色功能核心方法-结束 =================
    
    
    
    
    // 辅助函数：按照 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();