'commit'

dsLightRag/XingJun/move.html

@@ -21,7 +21,10 @@
         .arrow-text { position: absolute; top: '100%'; left: '50%'; transform: translateX(-50%); margin-top: '-5px'; font-weight: bold; color: red; font-size: 16px; white-space: nowrap; text-align: center; width: 100%; background-color: transparent; padding: 3px 8px; border-radius: 4px; }
         #contextMenu { position: absolute; display: none; background: white; border: 1px solid #ccc; padding: 5px; z-index: 9999; }
         #deleteArrow { padding: 3px 10px; cursor: pointer; }
-        /* 新增红点样式 */
+        .menu-separator { height: 1px; background-color: #ccc; margin: 5px 0; }
+        .menu-item { padding: 3px 10px; cursor: pointer; }
+        .menu-item:hover { background-color: #f0f0f0; }
+        .check-mark { display: inline-block; width: 16px; text-align: center; }
         .center-dot { position: absolute; width: 8px; height: 8px; background: red; border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; z-index: 5; }
     </style>
 </head>
@@ -44,7 +47,14 @@
             <button class="save-btn" id="resetBtn" style="margin-top: 10px;">重置</button>
         </div>
     </div>
-    <div id="contextMenu"><div id="deleteArrow">删除箭头</div></div>
+    <div id="contextMenu">
+        <div id="deleteArrow">删除箭头</div>
+        <div class="menu-separator"></div>
+        <div class="menu-item" data-point="top-left"><span class="check-mark"></span>左上角</div>
+        <div class="menu-item" data-point="top-right"><span class="check-mark"></span>右上角</div>
+        <div class="menu-item" data-point="bottom-left"><span class="check-mark"></span>左下角</div>
+        <div class="menu-item" data-point="bottom-right"><span class="check-mark"></span>右下角</div>
+    </div>
 
     <script>
         // 修复核心：整理所有JS代码到单个script标签内
@@ -186,6 +196,20 @@
                 }
             });
 
+            // 为匹配角菜单项添加事件监听器
+            document.querySelectorAll('.menu-item').forEach(item => {
+                item.addEventListener('click', function() {
+                    if (selectedArrow) {
+                        const referencePoint = this.getAttribute('data-point');
+                        selectedArrow.dataset.referencePoint = referencePoint;
+                        saveAllElements(); // 保存更改
+                        contextMenu.style.display = 'none';
+                        selectedArrow = null;
+                    }
+                });
+            });
+
+            // 加载保存的元素
             // 点击空白处关闭菜单
             document.addEventListener('click', function() {
                 contextMenu.style.display = 'none';
@@ -286,6 +310,17 @@
                     contextMenu.style.left = `${e.clientX}px`;
                     contextMenu.style.top = `${e.clientY}px`;
                     contextMenu.style.display = 'block';
+                    
+                    // 显示当前选中的匹配角对号
+                    const currentPoint = selectedArrow.dataset.referencePoint || 'top-left';
+                    document.querySelectorAll('.menu-item').forEach(item => {
+                        const checkMark = item.querySelector('.check-mark');
+                        if (item.dataset.point === currentPoint) {
+                            checkMark.textContent = '✓';
+                        } else {
+                            checkMark.textContent = '';
+                        }
+                    });
                 });
 
                 // 拖拽功能
@@ -338,10 +373,10 @@
                     elements.push({
                         type: 'arrow',
                         imagePath: arrow.dataset.imagePath,
-                        // 计算并保存中心点位置
                         left: left + centerOffsetX,
                         top: top + centerOffsetY,
-                        text: arrow.dataset.text || ''
+                        text: arrow.dataset.text || '',
+                        referencePoint: arrow.dataset.referencePoint || 'top-left' // 默认左上角
                     });
                 });