'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';
@@ -210,7 +234,7 @@
                     centerDot.className = 'center-dot';
                     centerDot.style.left = x + 'px';
                     centerDot.style.top = y + 'px';
-                    
+
                     backgroundContainer.appendChild(centerDot);
                     backgroundContainer.removeEventListener('click', handleMapClick);
                 }
@@ -223,13 +247,13 @@
                 const container = document.createElement('div');
                 container.className = 'arrow-container';
                 container.dataset.imagePath = imagePath;
-            
+
                 const newImage = document.createElement('div');
                 newImage.className = 'arrow-image';
                 newImage.style.backgroundImage = `url('${imagePath}')`;
-            
+
                 container.appendChild(newImage);
-            
+
                 // 添加文字元素
                 if (textContent) {
                     const textElement = document.createElement('div');
@@ -238,13 +262,13 @@
                     container.dataset.text = textContent;
                     container.appendChild(textElement);
                 }
-            
+
                 // 设置位置 - 使用中心点作为参照
                 const arrowWidth = 155;
                 const arrowHeight = 173;
                 const centerOffsetX = arrowWidth / 2;
                 const centerOffsetY = arrowHeight / 2;
-            
+
                 if (position) {
                     // 修复：直接使用传递的左上角位置，不再减去偏移量
                     container.style.left = parseFloat(position.left) + 'px';
@@ -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 = '';
+                        }
+                    });
                 });
 
                 // 拖拽功能
@@ -334,14 +369,14 @@
                     // 保存中心点坐标而非左上角坐标
                     const left = parseFloat(arrow.style.left) || 0;
                     const top = parseFloat(arrow.style.top) || 0;
-                    
+
                     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' // 默认左上角
                     });
                 });