This commit is contained in:
2025-09-10 07:52:32 +08:00
parent 295288edb4
commit aec6a426ed
2 changed files with 74 additions and 40 deletions

View File

@@ -46,20 +46,21 @@ document.addEventListener('DOMContentLoaded', function() {
// 修改全局偏移量输入框事件监听
const globalStopDistanceInput = document.getElementById('global-stop-distance');
// 初始化全局偏移量(从localStorage加载或使用默认值)
const savedGlobalStopDistance = localStorage.getItem('globalStopDistance');
if (savedGlobalStopDistance) {
globalStopDistanceInput.value = savedGlobalStopDistance;
}
// 全局偏移量变更事件 - 保存到localStorage无需选中箭头
globalStopDistanceInput.addEventListener('input', function() {
const globalValue = this.value;
localStorage.setItem('globalStopDistance', globalValue);
console.log(`[全局设置] 箭头停止距离: ${globalValue}px`);
});
// 删除以下全局停止距离相关代码
// const globalStopDistanceInput = document.getElementById('global-stop-distance');
//
// // 初始化全局偏移量(从localStorage加载或使用默认值)
// const savedGlobalStopDistance = localStorage.getItem('globalStopDistance');
// if (savedGlobalStopDistance) {
// globalStopDistanceInput.value = savedGlobalStopDistance;
// }
//
// // 全局偏移量变更事件 - 保存到localStorage无需选中箭头
// globalStopDistanceInput.addEventListener('input', function() {
// const globalValue = this.value;
// localStorage.setItem('globalStopDistance', globalValue);
// console.log(`[全局设置] 箭头停止距离: ${globalValue}px`);
// });
@@ -69,9 +70,9 @@ document.addEventListener('DOMContentLoaded', function() {
const arrowHeight = ARROW_HEIGHT;
const centerOffsetX = arrowWidth / 2;
const centerOffsetY = arrowHeight / 2;
// 使用全局偏移量替换单个箭头的stopDistance
const stopDistance = parseInt(document.getElementById('global-stop-distance').value) || STOP_DISTANCE;
// 使用当前箭头的停止距离默认为50
const stopDistance = parseInt(arrow.dataset.stopDistance) || 50;
const rect = arrow.getBoundingClientRect();
const containerRect = backgroundContainer.getBoundingClientRect();
let currentX = rect.left - containerRect.left + centerOffsetX;
@@ -233,19 +234,48 @@ document.addEventListener('DOMContentLoaded', function() {
container.style.top = (y - centerOffsetY) + 'px';
}
// 双击编辑文字
// 双击编辑文字和停止距离
container.addEventListener('dblclick', (e) => {
e.stopPropagation();
const currentText = container.dataset.text || '';
// 使用layui layer.prompt替换原生prompt
layer.prompt({
title: '请输入文字',
value: currentText,
formType: 3, // 文本输入框类型
area: ['300px', 'auto'] // 定义弹窗宽度
}, function(value, index, elem){
if (value !== null) {
if (value.trim() === '') {
const currentStopDistance = container.dataset.stopDistance || '50';
// 创建自定义弹窗内容使用layui表单样式
const content = `
<div style="padding: 20px;">
<div class="layui-form-item">
<label class="layui-form-label">文字内容:</label>
<div class="layui-input-block">
<input type="text" id="arrowText" value="${currentText}" class="layui-input" style="width: 100%;">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">停止距离 (px):</label>
<div class="layui-input-block">
<input type="number" id="arrowStopDistance" value="${currentStopDistance}" min="0" max="200" class="layui-input" style="width: 100%;">
</div>
</div>
</div>
`;
// 使用layer.open创建自定义弹窗增加宽度并应用layui样式
layer.open({
type: 1,
title: '编辑箭头属性',
area: ['500px', 'auto'], // 增加宽度到500px
content: content,
btn: ['确定', '取消'],
skin: 'layui-layer-molv', // 使用layui默认皮肤
success: function(layero) {
// 初始化layui表单样式
layui.form.render(null, 'arrowForm');
},
yes: function(index, layero) {
const textValue = layero.find('#arrowText').val().trim();
const stopDistanceValue = layero.find('#arrowStopDistance').val();
// 保存文字内容
if (textValue === '') {
container.querySelector('.arrow-text')?.remove();
delete container.dataset.text;
} else {
@@ -255,12 +285,18 @@ document.addEventListener('DOMContentLoaded', function() {
textElement.className = 'arrow-text';
container.appendChild(textElement);
}
textElement.textContent = value;
container.dataset.text = value;
saveAllElements();
textElement.textContent = textValue;
container.dataset.text = textValue;
}
// 保存停止距离
if (!isNaN(stopDistanceValue) && stopDistanceValue >= 0) {
container.dataset.stopDistance = stopDistanceValue;
}
saveAllElements();
layer.close(index);
}
layer.close(index); // 关闭弹窗
});
});
@@ -339,7 +375,10 @@ document.addEventListener('DOMContentLoaded', function() {
localStorage.removeItem('centerPoint');
}
// 保存箭头(移除stopDistance属性)
// 删除全局停止距离的保存
localStorage.removeItem('globalStopDistance');
// 保存箭头(添加stopDistance属性)
document.querySelectorAll('.arrow-container').forEach(arrow => {
elements.push({
type: 'arrow',
@@ -347,8 +386,8 @@ document.addEventListener('DOMContentLoaded', function() {
left: arrow.style.left,
top: arrow.style.top,
text: arrow.dataset.text || '',
referencePoint: arrow.dataset.referencePoint || 'top-left'
// 删除stopDistance属性
referencePoint: arrow.dataset.referencePoint || 'top-left',
stopDistance: arrow.dataset.stopDistance || '50' // 添加停止距离保存
});
});