diff --git a/dsLightRag/XingJun/move.html b/dsLightRag/XingJun/move.html
index fb370ea7..e31d2eac 100644
--- a/dsLightRag/XingJun/move.html
+++ b/dsLightRag/XingJun/move.html
@@ -104,6 +104,37 @@
.save-btn:hover {
background-color: #45a049;
}
+
+ /* 文字说明样式 */
+ .text-label {
+ position: absolute;
+ padding: 5px 10px;
+ background-color: rgba(255, 255, 255, 0.8);
+ border: 1px solid #ccc;
+ border-radius: 4px;
+ font-size: 14px;
+ cursor: move;
+ z-index: 3;
+ max-width: 200px;
+ word-wrap: break-word;
+ }
+
+ /* 新增按钮样式 */
+ .text-btn {
+ width: 100%;
+ padding: 10px;
+ background-color: #2196F3;
+ color: white;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+ font-size: 16px;
+ margin-top: 10px;
+ }
+
+ .text-btn:hover {
+ background-color: #0b7dda;
+ }
@@ -123,6 +154,8 @@
+
+
@@ -132,10 +165,11 @@
const backgroundContainer = document.querySelector('.background-container');
const imageButtons = document.querySelectorAll('.image-btn');
const saveBtn = document.getElementById('savePositionsBtn');
+ const addTextBtn = document.getElementById('addTextBtn'); // 新增文字按钮
// 页面加载时从localStorage读取并恢复箭头位置
document.addEventListener('DOMContentLoaded', () => {
- loadArrowPositions();
+ loadAllElements(); // 重命名函数，支持多种元素
});
// 为每个图片按钮添加点击事件
@@ -146,8 +180,16 @@
});
});
+ // 新增：文字按钮点击事件
+ addTextBtn.addEventListener('click', () => {
+ const textContent = prompt('请输入文字说明内容:');
+ if (textContent && textContent.trim() !== '') {
+ addTextToContainer(textContent);
+ }
+ });
+
// 保存按钮点击事件
- saveBtn.addEventListener('click', saveArrowPositions);
+ saveBtn.addEventListener('click', saveAllElements);
// 添加图片到主区域
function addImageToContainer(imagePath, position = null) {
@@ -178,67 +220,140 @@
}
// 保存所有箭头位置到localStorage
- function saveArrowPositions() {
- const arrows = document.querySelectorAll('.arrow-image');
- const arrowData = Array.from(arrows).map(arrow => ({
- imagePath: arrow.style.backgroundImage.match(/url\('?"?(.*?)'?"?\)/)[1],
- left: arrow.style.left,
- top: arrow.style.top
- }));
+ // 修改：保存所有元素（箭头和文字）
+ function saveAllElements() {
+ const elements = [];
- localStorage.setItem('arrowPositions', JSON.stringify(arrowData));
- alert('位置已保存！');
+ // 收集箭头元素
+ document.querySelectorAll('.arrow-image').forEach(arrow => {
+ elements.push({
+ type: 'arrow',
+ imagePath: arrow.style.backgroundImage.match(/url\('?"?(.*?)'?"?\)/)[1],
+ left: arrow.style.left,
+ top: arrow.style.top
+ });
+ });
+
+ // 新增：收集文字元素
+ document.querySelectorAll('.text-label').forEach(text => {
+ elements.push({
+ type: 'text',
+ content: text.textContent,
+ left: text.style.left,
+ top: text.style.top
+ });
+ });
+
+ localStorage.setItem('mapElements', JSON.stringify(elements));
+ alert('所有元素位置已保存！');
}
- // 从localStorage加载箭头位置
- function loadArrowPositions() {
- const savedData = localStorage.getItem('arrowPositions');
+ // 修改：加载所有元素（箭头和文字）
+ function loadAllElements() {
+ const savedData = localStorage.getItem('mapElements');
if (savedData) {
try {
- const arrowData = JSON.parse(savedData);
- arrowData.forEach(data => {
- addImageToContainer(data.imagePath, {
- left: data.left,
- top: data.top
- });
+ const elements = JSON.parse(savedData);
+ elements.forEach(element => {
+ if (element.type === 'arrow') {
+ addImageToContainer(element.imagePath, {
+ left: element.left,
+ top: element.top
+ });
+ } else if (element.type === 'text') {
+ addTextToContainer(element.content, {
+ left: element.left,
+ top: element.top
+ });
+ }
});
} catch (e) {
- console.error('加载保存的箭头位置失败:', e);
- localStorage.removeItem('arrowPositions'); // 移除损坏的数据
+ console.error('加载元素失败:', e);
+ localStorage.removeItem('mapElements');
}
}
}
+ // 新增：添加文字到主区域
+ function addTextToContainer(text, position = null) {
+ // 创建文字元素
+ const textElement = document.createElement('div');
+ textElement.className = 'text-label';
+ textElement.textContent = text;
+ textElement.dataset.type = 'text'; // 标记元素类型
+
+ // 设置位置
+ if (position) {
+ textElement.style.left = position.left;
+ textElement.style.top = position.top;
+ } else {
+ // 默认位置：中央偏上
+ textElement.style.left = '50%';
+ textElement.style.top = '30%';
+ textElement.style.transform = 'translate(-50%, -50%)';
+ }
+
+ // 添加到容器
+ backgroundContainer.appendChild(textElement);
+
+ // 添加拖拽功能
+ makeElementDraggable(textElement);
+ }
+
// 使元素可拖拽
function makeElementDraggable(element) {
let isDragging = false;
let offsetX, offsetY;
-
+
+ // 修改事件绑定，将mousemove和mouseup绑定到document
element.addEventListener('mousedown', startDrag);
- element.addEventListener('mousemove', drag);
- element.addEventListener('mouseup', endDrag);
- element.addEventListener('mouseleave', endDrag);
-
+
function startDrag(e) {
isDragging = true;
const rect = element.getBoundingClientRect();
+ const containerRect = backgroundContainer.getBoundingClientRect();
+
+ // 计算相对于容器的偏移量
offsetX = e.clientX - rect.left;
offsetY = e.clientY - rect.top;
+
+ // 移除transform影响
+ element.style.transform = 'none';
element.style.zIndex = '10';
+
+ // 添加document事件监听
+ document.addEventListener('mousemove', drag);
+ document.addEventListener('mouseup', endDrag);
+ document.addEventListener('mouseleave', endDrag);
}
-
+
function drag(e) {
if (!isDragging) return;
e.preventDefault();
- const x = e.clientX - offsetX;
- const y = e.clientY - offsetY;
- element.style.left = `${x}px`;
- element.style.top = `${y}px`;
+
+ // 计算相对于容器的位置
+ const containerRect = backgroundContainer.getBoundingClientRect();
+ const x = e.clientX - containerRect.left - offsetX;
+ const y = e.clientY - containerRect.top - offsetY;
+
+ // 限制在容器内
+ const maxX = containerRect.width - element.offsetWidth;
+ const maxY = containerRect.height - element.offsetHeight;
+ const boundedX = Math.max(0, Math.min(x, maxX));
+ const boundedY = Math.max(0, Math.min(y, maxY));
+
+ element.style.left = `${boundedX}px`;
+ element.style.top = `${boundedY}px`;
}
-
+
function endDrag() {
isDragging = false;
element.style.zIndex = '2';
+
+ // 移除document事件监听
+ document.removeEventListener('mousemove', drag);
+ document.removeEventListener('mouseup', endDrag);
+ document.removeEventListener('mouseleave', endDrag);
}
}