From 337c7382a9634060026454b28815cd4776e44ece Mon Sep 17 00:00:00 2001 From: Tenney Date: Fri, 9 May 2025 11:44:36 +0800 Subject: [PATCH] Update node_info.js MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit kakachiex2 反馈内容， 右键菜单样式 --- node_info.js | 139 +++++++++++++++++++++++++++++++++++++-------------- 1 file changed, 101 insertions(+), 38 deletions(-) diff --git a/node_info.js b/node_info.js index eb10299..cc5e873 100644 --- a/node_info.js +++ b/node_info.js @@ -21,33 +21,46 @@ const ButtonManager = { isDragging: false, // 检查是否正在拖拽 hasShownTooltip: false, // 检查是否已经显示过提示 isShow: true, // 是否显示按钮 - // 初始化按钮 init() { - if (this.isInitialized) return; // 如果已经初始化过，不再重复创建 + if (this.isInitialized) return; - this.boundOnDragStart = this.onDragStart.bind(this); this.boundOnDragging = this.onDragging.bind(this); this.boundOnDragEnd = this.onDragEnd.bind(this); - // 使用 CSS 定义 hover 效果和所有样式 + // Create button container + this.buttonContainer = document.createElement('div'); + this.buttonContainer.id = 'alignment-buttons'; + + // Create shadow root + const shadow = this.buttonContainer.attachShadow({ mode: 'open' }); + + // Create main wrapper to maintain structure + const wrapper = document.createElement('div'); + wrapper.id = 'alignment-buttons-wrapper'; + wrapper.style.cssText = 'display: flex; width: 100%; height: 100%;'; + + // Create style element for shadow DOM const style = document.createElement('style'); style.textContent = ` - #alignment-buttons { + :host { position: absolute; top: 20px; right: 10px; left: unset; bottom: unset; - display: flex; + display: block; background: #2b2b2b; padding: 4px; border-radius: 4px; z-index: 9999; width: 290px; height: 32px; - white-space: nowrap; /* 禁止换行，确保按钮在同一行显示 */ + } + #alignment-buttons-wrapper { + display: flex; + white-space: nowrap; } .custom-button { width: 25px; @@ -76,7 +89,6 @@ const ButtonManager = { .divider:active { cursor: grabbing; } - /* 提示样式 */ #tooltip { position: absolute; bottom: -20px; @@ -90,35 +102,55 @@ const ButtonManager = { white-space: nowrap; font-size: 12px; } - + #context-menu { + position: fixed; + background: #2b2b2b; + border-radius: 4px; + padding: 5px; + z-index: 10000; + display: none; + } + #context-menu button { + display: block; + width: 100%; + padding: 5px 10px; + background: none; + border: none; + color: white; + cursor: pointer; + text-align: left; + border-radius: 4px; + overflow: hidden; + } + #context-menu button:hover { + background-color: #555555; + } + .custom-button svg { + width: 100%; + height: 100%; + } `; - document.head.appendChild(style); - // 创建按钮容器 - this.buttonContainer = document.createElement('div'); - this.buttonContainer.id = 'alignment-buttons'; + // Append style and wrapper to shadow DOM + shadow.appendChild(style); + shadow.appendChild(wrapper); - // 从 localStorage 恢复位置 + // From localStorage restore position this.restorePosition(); - document.body.appendChild(this.buttonContainer); - // 创建按钮并分配功能 + // Create buttons and assign functionality const buttons = this.getButtons(); buttons.forEach(btn => { if (btn.type === 'divider') { - // 创建分割线 const divider = document.createElement('div'); divider.classList.add('divider'); - // 添加拖拽功能 - divider.addEventListener('mousedown', this.boundOnDragStart); - document.addEventListener('mousemove', this.boundOnDragging); - document.addEventListener('mouseup', this.boundOnDragEnd); - - this.buttonContainer.appendChild(divider); + divider.addEventListener('mousedown', this.onDragStart.bind(this)); + document.addEventListener('mousemove', this.onDragging.bind(this)); + document.addEventListener('mouseup', this.onDragEnd.bind(this)); + wrapper.appendChild(divider); } else { - // 创建按钮 const button = document.createElement('button'); button.id = btn.id; button.classList.add('custom-button'); @@ -127,22 +159,51 @@ const ButtonManager = { btn.action.call(this, event); event.stopPropagation(); }); - this.buttonContainer.appendChild(button); + wrapper.appendChild(button); } }); - this.isInitialized = true; // 标记已经初始化 - this.showContextMenu(); - - // 创建工具提示元素 + // Create tooltip const tooltip = document.createElement('div'); tooltip.id = 'tooltip'; - tooltip.textContent = '右键可选按钮呈现模式'; // 工具提示的内容 - this.buttonContainer.appendChild(tooltip); + tooltip.textContent = '右键可选按钮呈现模式'; + wrapper.appendChild(tooltip); - // 从 localStorage 检查是否已经显示过提示 + // Create context menu + const contextMenu = document.createElement('div'); + contextMenu.id = 'context-menu'; + contextMenu.innerHTML = ` + + + `; + wrapper.appendChild(contextMenu); + this.contextMenu = contextMenu; + + // Bind context menu events + this.buttonContainer.addEventListener('contextmenu', (event) => { + event.preventDefault(); + contextMenu.style.display = 'block'; + contextMenu.style.left = `${event.clientX}px`; + contextMenu.style.top = `${event.clientY}px`; + }); + + // Click handlers for context menu + contextMenu.querySelector('#pin-mode').addEventListener('click', () => { + contextMenu.style.display = 'none'; + this.isPermanent = true; + localStorage.setItem('NodeAlignerIsPermanent', '1'); + this.restorePosition(); + }); + + contextMenu.querySelector('#toggle-on-select').addEventListener('click', () => { + this.hide(); + contextMenu.style.display = 'none'; + this.isPermanent = false; + localStorage.setItem('NodeAlignerIsPermanent', '0'); + }); + + // Handle tooltip display if (!this.hasShownTooltip) { - // 如果还没有显示过提示，设置悬停事件 this.buttonContainer.addEventListener('mouseenter', () => { if (!this.hasShownTooltip) { setTimeout(() => { @@ -153,18 +214,20 @@ const ButtonManager = { }); this.buttonContainer.addEventListener('mouseleave', () => { - // 删除tooltip 当鼠标离开时隐藏提示 - tooltip.remove(); + tooltip.style.display = 'none'; }); } + // Initialize visibility state let isPermanent = localStorage.getItem('NodeAlignerIsPermanent'); if (isPermanent) { - this.isPermanent = localStorage.getItem('NodeAlignerIsPermanent') == '1'; + this.isPermanent = isPermanent === '1'; this.isPermanent ? this.show() : this.hide(); } else { - this.show() + this.show(); } + + this.isInitialized = true; }, // 获取按钮配置 @@ -346,7 +409,7 @@ const ButtonManager = { } document.removeEventListener('mousemove', this.boundOnDragging); document.removeEventListener('mouseup', this.boundOnDragEnd); - + this.isInitialized = false; }, // 恢复位置