'commit'
This commit is contained in:
@@ -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' // 添加停止距离保存
|
||||
});
|
||||
});
|
||||
|
||||
|
Reference in New Issue
Block a user