yangchunjin/SoonDesign
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
381a48b5c59795b369d3963b0cb2990ccea0f18d
SoonDesign/frontend-web/js/design1/ui.js
T
24kycj ce76bb8018 fix(web): 修复 .soon/模板加载、旧文件兼容与另存为离开提示 
- 删除 design1 ui 遗留代码，修复加载竞态与新建不弹保存提示
- cloud-files 归一化旧版 .soon，IndexedDB 写入完成后再跳转设计页
- 模板/本地 .soon 首次保存须另存为，离开前统一确认
- 发版缓存 bust（version.js、soon-cache.js）及宝塔 Nginx 配置文档

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-06-29 00:30:20 +08:00

2422 lines
83 KiB
JavaScript
Raw Blame History

// 移至上层和移至下层的事件处理在下方（第 2179 行），避免重复绑定
var _keyctrl = false,
_keyc = false,
_textEdit = false,
_inputEdit = false;
$('input').focus(function () {
_inputEdit = true;
});
$('input').blur(function () {
_inputEdit = false;
});
$('textarea').focus(function () {
_inputEdit = true;
});
$('textarea').blur(function () {
_inputEdit = false;
});
$("body").keyup(function (event) {
// 兼容三端�?modifier key 检测（Windows/Linux: Ctrl, Mac: Cmd/Meta�?
if (event.keyCode == 17 || event.keyCode == 91 || event.keyCode == 93) { // Ctrl 键或 Meta 键（Mac Cmd）释�?
_keyctrl = false;
};
if (event.keyCode == 67) {
_keyc = false;
};
})
$("body").keydown(function (event) {
// 统一的快捷键处理（兼�?Windows/Linux: Ctrl, Mac: Cmd/Meta�?
const isModifierKey = event.ctrlKey || event.metaKey; // 兼容三端
// 快捷键处理（在输入框或文本区域中时不触发，除了删除相关的�?
if (!_inputEdit && !_textEdit) {
// CTRL/CMD+N - 新建
if (isModifierKey && event.keyCode == 78) {
event.preventDefault();
$("#new").click();
return;
}
// CTRL/CMD+O - 打开
if (isModifierKey && event.keyCode == 79) {
event.preventDefault();
$("#open").click();
return;
}
// CTRL/CMD+S - 保存
if (isModifierKey && !event.shiftKey && event.keyCode == 83) {
event.preventDefault();
$("#save").click();
return;
}
// CTRL/CMD+SHIFT+S - 保存副本
if (isModifierKey && event.shiftKey && event.keyCode == 83) {
event.preventDefault();
if (typeof window.output === 'function') {
window.output(null, saveAs);
}
return;
}
// CTRL/CMD+Z - 还原
if (isModifierKey && !event.shiftKey && event.keyCode == 90) {
event.preventDefault();
$("#previous").click();
return;
}
// CTRL/CMD+Y - 重做
if (isModifierKey && !event.shiftKey && event.keyCode == 89) {
event.preventDefault();
$("#next").click();
return;
}
// CTRL/CMD+C - 复制
if (isModifierKey && event.keyCode == 67 && event.target.nodeName == 'BODY') {
event.preventDefault();
window.copySelection();
return;
}
// CTRL/CMD+V - 粘贴
if (isModifierKey && event.keyCode == 86 && event.target.nodeName == 'BODY') {
event.preventDefault();
window.pasteFromClipboard();
return;
}
// CTRL/CMD + SHIFT + DEL (Windows) �?CMD + SHIFT + Backspace (Mac) - 清空
if (isModifierKey && event.shiftKey && (event.keyCode == 46 || event.keyCode == 8)) {
event.preventDefault();
$("#clean").click();
return;
}
// CTRL/CMD + DEL (Windows) �?CMD + Backspace (Mac) - 删除
if (isModifierKey && !event.shiftKey && (event.keyCode == 46 || event.keyCode == 8)) {
event.preventDefault();
$("#delete").click();
return;
}
}
// 兼容三端�?modifier key 检测（Windows/Linux: Ctrl, Mac: Cmd/Meta�?
if (event.keyCode == 17 || event.metaKey) { // Ctrl 键或 Meta 键（Mac Cmd�?
_keyctrl = true;
if (_keyc && _textEdit) {
//同时按下且在编辑状�?
setTimeout("clipboard.writeText( (clipboard.readText()+' ') );", 1)
}
}
if (event.keyCode == 67) {
_keyc = true;
if (_keyctrl & _textEdit) {
//同时按下且在编辑状�?
setTimeout("clipboard.writeText( (clipboard.readText()+' ') );", 1)
}
}
if (event.keyCode == 37) {
//left
let v = -1;
if (_keyctrl || event.ctrlKey || event.metaKey) {
v = -5;
}
const currentCanvas = window.canvas || canvas;
if (currentCanvas && currentCanvas.getActiveObject()) {
let x = currentCanvas.getActiveObject().get('left');
x += v;
currentCanvas.getActiveObject().set('left', x);
currentCanvas.renderAll();
if (typeof window.recordState === 'function') {
window.recordState();
} else if (typeof recordState === 'function') {
recordState();
}
if (typeof updateControls === 'function') {
updateControls();
}
}
}
if (event.keyCode == 38) {
//up
let v = -1;
if (_keyctrl || event.ctrlKey || event.metaKey) {
v = -5;
}
const currentCanvas = window.canvas || canvas;
if (currentCanvas && currentCanvas.getActiveObject()) {
let y = currentCanvas.getActiveObject().get('top');
y += v;
currentCanvas.getActiveObject().set('top', y);
currentCanvas.renderAll();
if (typeof window.recordState === 'function') {
window.recordState();
} else if (typeof recordState === 'function') {
recordState();
}
if (typeof updateControls === 'function') {
updateControls();
}
}
}
if (event.keyCode == 39) {
//right
let v = 1;
if (_keyctrl || event.ctrlKey || event.metaKey) {
v = 5;
}
const currentCanvas = window.canvas || canvas;
if (currentCanvas && currentCanvas.getActiveObject()) {
let x = currentCanvas.getActiveObject().get('left');
x += v;
currentCanvas.getActiveObject().set('left', x);
currentCanvas.renderAll();
if (typeof window.recordState === 'function') {
window.recordState();
} else if (typeof recordState === 'function') {
recordState();
}
if (typeof updateControls === 'function') {
updateControls();
}
}
}
if (event.keyCode == 40) {
//down
let v = 1;
if (_keyctrl || event.ctrlKey || event.metaKey) {
v = 5;
}
const currentCanvas = window.canvas || canvas;
if (currentCanvas && currentCanvas.getActiveObject()) {
let y = currentCanvas.getActiveObject().get('top');
y += v;
currentCanvas.getActiveObject().set('top', y);
currentCanvas.renderAll();
if (typeof window.recordState === 'function') {
window.recordState();
} else if (typeof recordState === 'function') {
recordState();
}
if (typeof updateControls === 'function') {
updateControls();
}
}
}
// 普通删除键（DEL键，没有按CTRL/CMD�?
if (event.keyCode == 46 && !isModifierKey && !_inputEdit && !_textEdit) {
// 使用 window.canvas 作为后备，确保在 eval() 加载 .jsc 时也能访问
const currentCanvas = window.canvas || canvas;
const currentObjs = window.objs || objs;
if (!currentCanvas) {
return;
}
let actObjs = currentCanvas.getActiveObjects();
let allObjs = currentCanvas.getObjects();
let flag = 0;
for (let item of actObjs) {
if (item != allObjs[0]) {
let i = getIndex(item, currentCanvas);//0是背景，所以从1开始，但objs不包含背景图片，故要-1
currentObjs.splice(i - 1, 1);
currentCanvas.remove(item);
flag = 1;
}
}
if (typeof window.updateList === 'function') {
window.updateList();
}
currentCanvas.discardActiveObject();
if (flag == 1) {
if (typeof window.recordState === 'function') {
window.recordState();
} else if (typeof recordState === 'function') {
recordState();
}
currentCanvas.renderAll();
if (typeof window.handleObjectSelected === 'function') {
window.handleObjectSelected();
}
}
}
});
// pre_add_image 已在 design1.js 中定义为全局变量
$("#addPic").click(function () {
OpenDialog();
function OpenDialog() {
var dialogApi = (typeof dialog !== 'undefined' && dialog) ? dialog : (window.platformBridge && window.platformBridge.showOpenDialog ? { showOpenDialog: function(opts) { return window.platformBridge.showOpenDialog(opts); } } : null);
if (!dialogApi) return;
dialogApi.showOpenDialog({
title: language_str("selectPic"),
buttonLabel: language_str("comf"),
filters: [{ name: 'Image File Type', extensions: ['png', 'jpg', 'jpeg'] }]
}).then(function(result) {
if (result.canceled) return;
var url = (result.files && result.files[0]) ? URL.createObjectURL(result.files[0]) : (result.filePaths && result.filePaths[0]);
if (!url) return;
fabric.Image.fromURL(url, function (image) {
//image.left = pointer.x;
image.setSrc(image.toDataURL(), function (image) {
pre_add_image = image;
background_image.hoverCursor = "crosshair";
$(this).css("background-color", "#646E76");
$("#addOutPic").css("background-color", "");
$("#addText").css("background-color", "");
$("#addCircleText").css("background-color", "");
$("#addOutText").css("background-color", "");
$("#addRect").css("background-color", "");
$("#addCircle").css("background-color", "");
$("#addLine").css("background-color", "");
$("#addQrCode").css("background-color", "");
$("#addBarCode").css("background-color", "");
$("#addCounter").css("background-color", "");
addState = 1;
});
//canvas.add(image);
});
}).catch(err => {
})
}
});
$("#addOutPic").click(function () {
background_image.hoverCursor = "crosshair";
$(this).css("background-color", "#646E76");
$("#addPic").css("background-color", "");
$("#addText").css("background-color", "");
$("#addCircleText").css("background-color", "");
$("#addOutText").css("background-color", "");
$("#addRect").css("background-color", "");
$("#addCircle").css("background-color", "");
$("#addLine").css("background-color", "");
$("#addQrCode").css("background-color", "");
$("#addBarCode").css("background-color", "");
$("#addCounter").css("background-color", "");
addState = 2;
});
$("#addText").click(function () {
background_image.hoverCursor = "crosshair";
$(this).css("background-color", "#646E76");
$("#addPic").css("background-color", "");
$("#addOutPic").css("background-color", "");
$("#addCircleText").css("background-color", "");
$("#addOutText").css("background-color", "");
$("#addRect").css("background-color", "");
$("#addCircle").css("background-color", "");
$("#addLine").css("background-color", "");
$("#addQrCode").css("background-color", "");
$("#addBarCode").css("background-color", "");
$("#addCounter").css("background-color", "");
addState = 3;
});
$("#addCircleText").click(function () {
background_image.hoverCursor = "crosshair";
$(this).css("background-color", "#646E76");
$("#addPic").css("background-color", "");
$("#addOutPic").css("background-color", "");
$("#addText").css("background-color", "");
$("#addOutText").css("background-color", "");
$("#addRect").css("background-color", "");
$("#addCircle").css("background-color", "");
$("#addLine").css("background-color", "");
$("#addQrCode").css("background-color", "");
$("#addBarCode").css("background-color", "");
$("#addCounter").css("background-color", "");
addState = 11;
});
$("#addOutText").click(function () {
background_image.hoverCursor = "crosshair";
$(this).css("background-color", "#646E76");
$("#addPic").css("background-color", "");
$("#addOutPic").css("background-color", "");
$("#addText").css("background-color", "");
$("#addCircleText").css("background-color", "");
$("#addRect").css("background-color", "");
$("#addCircle").css("background-color", "");
$("#addLine").css("background-color", "");
$("#addQrCode").css("background-color", "");
$("#addBarCode").css("background-color", "");
$("#addCounter").css("background-color", "");
addState = 4;
});
$("#addRect").click(function () {
background_image.hoverCursor = "crosshair";
$(this).css("background-color", "#646E76");
$("#addPic").css("background-color", "");
$("#addOutPic").css("background-color", "");
$("#addText").css("background-color", "");
$("#addCircleText").css("background-color", "");
$("#addOutText").css("background-color", "");
$("#addCircle").css("background-color", "");
$("#addLine").css("background-color", "");
$("#addQrCode").css("background-color", "");
$("#addBarCode").css("background-color", "");
$("#addCounter").css("background-color", "");
addState = 5;
});
$("#addCircle").click(function () {
background_image.hoverCursor = "crosshair";
$(this).css("background-color", "#646E76");
$("#addPic").css("background-color", "");
$("#addOutPic").css("background-color", "");
$("#addText").css("background-color", "");
$("#addCircleText").css("background-color", "");
$("#addOutText").css("background-color", "");
$("#addRect").css("background-color", "");
$("#addLine").css("background-color", "");
$("#addQrCode").css("background-color", "");
$("#addBarCode").css("background-color", "");
$("#addCounter").css("background-color", "");
addState = 6;
});
$("#addLine").click(function () {
background_image.hoverCursor = "crosshair";
$(this).css("background-color", "#646E76");
$("#addPic").css("background-color", "");
$("#addOutPic").css("background-color", "");
$("#addText").css("background-color", "");
$("#addCircleText").css("background-color", "");
$("#addOutText").css("background-color", "");
$("#addRect").css("background-color", "");
$("#addCircle").css("background-color", "");
$("#addQrCode").css("background-color", "");
$("#addBarCode").css("background-color", "");
$("#addCounter").css("background-color", "");
addState = 7;
});
$("#addQrCode").click(function () {
background_image.hoverCursor = "crosshair";
$(this).css("background-color", "#646E76");
$("#addPic").css("background-color", "");
$("#addOutPic").css("background-color", "");
$("#addText").css("background-color", "");
$("#addCircleText").css("background-color", "");
$("#addOutText").css("background-color", "");
$("#addRect").css("background-color", "");
$("#addCircle").css("background-color", "");
$("#addLine").css("background-color", "");
$("#addBarCode").css("background-color", "");
$("#addCounter").css("background-color", "");
addState = 8;
});
$("#addBarCode").click(function () {
background_image.hoverCursor = "crosshair";
$(this).css("background-color", "#646E76");
$("#addPic").css("background-color", "");
$("#addOutPic").css("background-color", "");
$("#addText").css("background-color", "");
$("#addCircleText").css("background-color", "");
$("#addOutText").css("background-color", "");
$("#addRect").css("background-color", "");
$("#addCircle").css("background-color", "");
$("#addLine").css("background-color", "");
$("#addQrCode").css("background-color", "");
$("#addCounter").css("background-color", "");
addState = 9;
});
$("#addCounter").click(function () {
background_image.hoverCursor = "crosshair";
$(this).css("background-color", "#646E76");
$("#addPic").css("background-color", "");
$("#addOutPic").css("background-color", "");
$("#addText").css("background-color", "");
$("#addCircleText").css("background-color", "");
$("#addOutText").css("background-color", "");
$("#addRect").css("background-color", "");
$("#addCircle").css("background-color", "");
$("#addLine").css("background-color", "");
$("#addQrCode").css("background-color", "");
$("#addBarCode").css("background-color", "");
addState = 10;
});
$("#version_change").click(function () {
if (bg_version == 1) {
bg_version = 2;
} else {
bg_version = 1;
}
// 类型改变
$("#source_front").attr("src", soonAsset("front_bg") + bg_version + "_1.png");
canvas.renderAll();
});
$("#front_side").click(function () {
$(this).addClass("ui-button-active");
$("#back_side").removeClass("ui-button-active");
$(".canvas-container:eq(0)").show();
$(".canvas-container:eq(1)").hide();
canvas = canvas1;
objs = objs1;
background_image = background_image1;
window.canvas = canvas;
window.objs = objs;
window.background_image = background_image;
next_objs = next_objs1;
pre_objs = pre_objs1;
next_json = next_json1;
pre_json = pre_json1;
recordObjs = recordObjs1;
recordJson = recordJson1;
step = step1;
if (typeof window.updateList === 'function') {
window.updateList();
}
$("#line_control").hide();
$("#base_control").hide();
$("#pic_control").hide();
$("#out_pic_control").hide();
$("#text_control").hide();
$("#circle_text_control").hide();
$("#out_text_control").hide();
$("#rect_control").hide();
$("#circle_control").hide();
$("#counter_control").hide();
$("#qrcode_Controll").hide();
$("#barcode_controll").hide();
$("#component_type").text(language_str("bg"));//背景
});
$("#back_side").click(function () {
$(this).addClass("ui-button-active");
$("#front_side").removeClass("ui-button-active");
$(".canvas-container:eq(0)").hide();
$(".canvas-container:eq(1)").show();
canvas = canvas2;
objs = objs2;
background_image = background_image2;
window.canvas = canvas;
window.objs = objs;
window.background_image = background_image;
next_objs = next_objs2;
pre_objs = pre_objs2;
next_json = next_json2;
pre_json = pre_json2;
recordObjs = recordObjs2;
recordJson = recordJson2;
step = step2;
if (typeof window.updateList === 'function') {
window.updateList();
}
$("#line_control").hide();
$("#base_control").hide();
$("#pic_control").hide();
$("#out_pic_control").hide();
$("#text_control").hide();
$("#circle_text_control").hide();
$("#out_text_control").hide();
$("#rect_control").hide();
$("#circle_control").hide();
$("#counter_control").hide();
$("#qrcode_Controll").hide();
$("#barcode_controll").hide();
$("#component_type").text(language_str("bg"));//"背景"
});
$("#top_alignment").click(function () {
let _objs = canvas.getActiveObjects();
if (_objs.length == 1) {
//只选中了一�?
let obj = _objs[0];
obj.setCoords();
let coords = obj.getCoords(true);
let objMinY = getCoordsMinY(coords);
let bgMinY = getCoordsMinY(background_image.getCoords(true));
let deltaY = bgMinY - objMinY;
obj.set("top", obj.get("top") + deltaY);
obj.setCoords();
canvas.renderAll();
window.recordState();
return;
}
// 多个对象对齐：找到所有对象边界框的最小Y值
let minTop = Infinity;
for (let item of _objs) {
item.setCoords();
let coords = item.getCoords(true);
let itemMinY = getCoordsMinY(coords);
if (itemMinY < minTop) {
minTop = itemMinY;
}
}
// 将所有对象对齐到最小Y值
groupItems = [];
for (let item of _objs) {
item.setCoords();
let coords = item.getCoords(true);
let itemMinY = getCoordsMinY(coords);
let deltaY = minTop - itemMinY;
item.set("top", item.get("top") + deltaY);
item.setCoords();
groupItems.push(item);
}
canvas.discardActiveObject();
let sel = new fabric.ActiveSelection(groupItems, {
canvas: canvas,
});
canvas.setActiveObject(sel);
canvas.requestRenderAll();
canvas.renderAll();
});
$("#bottom_alignment").click(function () {
let _objs = canvas.getActiveObjects();
if (_objs.length == 1) {
//只选中了一�?
let idx = getIndex(_objs[0]);
let type = objs[idx - 1].type;
let other = 0;//strokeWidth
if (type == 5 || type == 6 || type == 7) {
other = _objs[0].get("strokeWidth")
}
let obj = _objs[0];
obj.setCoords();
let coords = obj.getCoords(true);
let objMaxY = getCoordsMaxY(coords);
let bgMaxY = getCoordsMaxY(background_image.getCoords(true));
let deltaY = bgMaxY - objMaxY;
obj.set("top", obj.get("top") + deltaY);
obj.setCoords();
canvas.renderAll();
window.recordState();
return;
}
// 多个对象对齐：找到所有对象边界框的最大Y值
let maxBottom = -Infinity;
for (let item of _objs) {
item.setCoords();
let coords = item.getCoords(true);
let itemMaxY = getCoordsMaxY(coords);
if (itemMaxY > maxBottom) {
maxBottom = itemMaxY;
}
}
// 将所有对象对齐到最大Y值
groupItems = [];
for (let item of _objs) {
item.setCoords();
let coords = item.getCoords(true);
let itemMaxY = getCoordsMaxY(coords);
let deltaY = maxBottom - itemMaxY;
item.set("top", item.get("top") + deltaY);
item.setCoords();
groupItems.push(item);
}
canvas.discardActiveObject();
let sel = new fabric.ActiveSelection(groupItems, {
canvas: canvas,
});
canvas.setActiveObject(sel);
canvas.requestRenderAll();
canvas.renderAll();
});
$("#center_y_alignment").click(function () {
let _objs = canvas.getActiveObjects();
if (_objs.length == 1) {
//只选中了一�?
let idx = getIndex(_objs[0]);
let type = objs[idx - 1].type;
let other = 0;//strokeWidth
if (type == 5 || type == 6 || type == 7) {
other = _objs[0].get("strokeWidth")
}
let obj = _objs[0];
obj.setCoords();
let coords = obj.getCoords(true);
let objMinY = getCoordsMinY(coords);
let objMaxY = getCoordsMaxY(coords);
let objCenterY = (objMinY + objMaxY) / 2;
let bgCoords = background_image.getCoords(true);
let bgMinY = getCoordsMinY(bgCoords);
let bgMaxY = getCoordsMaxY(bgCoords);
let bgCenterY = (bgMinY + bgMaxY) / 2;
let deltaY = bgCenterY - objCenterY;
obj.set("top", obj.get("top") + deltaY);
obj.setCoords();
canvas.renderAll();
window.recordState();
return;
}
// 多个对象对齐：找到所有对象边界框的中心Y值
let minTop = Infinity;
let maxBottom = -Infinity;
for (let item of _objs) {
item.setCoords();
let coords = item.getCoords(true);
let itemMinY = getCoordsMinY(coords);
let itemMaxY = getCoordsMaxY(coords);
if (itemMinY < minTop) minTop = itemMinY;
if (itemMaxY > maxBottom) maxBottom = itemMaxY;
}
let groupCenterY = (minTop + maxBottom) / 2;
// 将所有对象对齐到中心Y值
groupItems = [];
for (let item of _objs) {
item.setCoords();
let coords = item.getCoords(true);
let itemMinY = getCoordsMinY(coords);
let itemMaxY = getCoordsMaxY(coords);
let itemCenterY = (itemMinY + itemMaxY) / 2;
let deltaY = groupCenterY - itemCenterY;
item.set("top", item.get("top") + deltaY);
item.setCoords();
groupItems.push(item);
}
canvas.discardActiveObject();
let sel = new fabric.ActiveSelection(groupItems, {
canvas: canvas,
});
canvas.setActiveObject(sel);
canvas.requestRenderAll();
canvas.renderAll();
window.recordState();
});
$("#left_alignment").click(function () {
let _objs = canvas.getActiveObjects();
if (_objs.length == 1) {
//只选中了一�?
let obj = _objs[0];
obj.setCoords();
let coords = obj.getCoords(true);
let objMinX = getCoordsMinX(coords);
let bgMinX = getCoordsMinX(background_image.getCoords(true));
let deltaX = bgMinX - objMinX;
obj.set("left", obj.get("left") + deltaX);
obj.setCoords();
canvas.renderAll();
window.recordState();
return;
}
// 多个对象对齐：找到所有对象边界框的最小X值
let minLeft = Infinity;
for (let item of _objs) {
item.setCoords();
let coords = item.getCoords(true);
let itemMinX = getCoordsMinX(coords);
if (itemMinX < minLeft) {
minLeft = itemMinX;
}
}
// 将所有对象对齐到最小X值
groupItems = [];
for (let item of _objs) {
item.setCoords();
let coords = item.getCoords(true);
let itemMinX = getCoordsMinX(coords);
let deltaX = minLeft - itemMinX;
item.set("left", item.get("left") + deltaX);
item.setCoords();
groupItems.push(item);
}
canvas.discardActiveObject();
let sel = new fabric.ActiveSelection(groupItems, {
canvas: canvas,
});
canvas.setActiveObject(sel);
canvas.requestRenderAll();
canvas.renderAll();
window.recordState();
});
$("#right_alignment").click(function () {
let _objs = canvas.getActiveObjects();
if (_objs.length == 1) {
//只选中了一�?
let idx = getIndex(_objs[0]);
let type = objs[idx - 1].type;
let other = 0;//strokeWidth
if (type == 5 || type == 6 || type == 7) {
other = item.get("strokeWidth")
}
let obj = _objs[0];
obj.setCoords();
let coords = obj.getCoords(true);
let objMaxX = getCoordsMaxX(coords);
let bgMaxX = getCoordsMaxX(background_image.getCoords(true));
let deltaX = bgMaxX - objMaxX;
obj.set("left", obj.get("left") + deltaX);
obj.setCoords();
canvas.renderAll();
window.recordState();
return;
}
// 多个对象对齐：找到所有对象边界框的最大X值
let maxRight = -Infinity;
for (let item of _objs) {
item.setCoords();
let coords = item.getCoords(true);
let itemMaxX = getCoordsMaxX(coords);
if (itemMaxX > maxRight) {
maxRight = itemMaxX;
}
}
// 将所有对象对齐到最大X值
let groupItems = [];
for (let item of _objs) {
item.setCoords();
let coords = item.getCoords(true);
let itemMaxX = getCoordsMaxX(coords);
let deltaX = maxRight - itemMaxX;
item.set("left", item.get("left") + deltaX);
item.setCoords();
groupItems.push(item);
}
//BUG1
canvas.discardActiveObject();
let sel = new fabric.ActiveSelection(groupItems, {
canvas: canvas,
});
canvas.setActiveObject(sel);
canvas.requestRenderAll();
canvas.renderAll();
window.recordState();
});
$("#center_x_alignment").click(function () {
let _objs = canvas.getActiveObjects();
if (_objs.length == 1) {
//只选中了一�?
let idx = getIndex(_objs[0]);
let type = objs[idx - 1].type;
let other = 0;//strokeWidth
if (type == 5 || type == 6 || type == 7) {
other = _objs[0].get("strokeWidth")
}
let obj = _objs[0];
obj.setCoords();
let coords = obj.getCoords(true);
let objMinX = getCoordsMinX(coords);
let objMaxX = getCoordsMaxX(coords);
let objCenterX = (objMinX + objMaxX) / 2;
let bgCoords = background_image.getCoords(true);
let bgMinX = getCoordsMinX(bgCoords);
let bgMaxX = getCoordsMaxX(bgCoords);
let bgCenterX = (bgMinX + bgMaxX) / 2;
let deltaX = bgCenterX - objCenterX;
obj.set("left", obj.get("left") + deltaX);
obj.setCoords();
canvas.renderAll();
window.recordState();
return;
}
// 多个对象对齐：找到所有对象边界框的中心X值
let minLeft = Infinity;
let maxRight = -Infinity;
for (let item of _objs) {
item.setCoords();
let coords = item.getCoords(true);
let itemMinX = getCoordsMinX(coords);
let itemMaxX = getCoordsMaxX(coords);
if (itemMinX < minLeft) minLeft = itemMinX;
if (itemMaxX > maxRight) maxRight = itemMaxX;
}
let groupCenterX = (minLeft + maxRight) / 2;
// 将所有对象对齐到中心X值
groupItems = [];
for (let item of _objs) {
item.setCoords();
let coords = item.getCoords(true);
let itemMinX = getCoordsMinX(coords);
let itemMaxX = getCoordsMaxX(coords);
let itemCenterX = (itemMinX + itemMaxX) / 2;
let deltaX = groupCenterX - itemCenterX;
item.set("left", item.get("left") + deltaX);
item.setCoords();
groupItems.push(item);
}
canvas.discardActiveObject();
let sel = new fabric.ActiveSelection(groupItems, {
canvas: canvas,
});
canvas.setActiveObject(sel);
canvas.requestRenderAll();
canvas.renderAll();
window.recordState();
});
$("#up_obj").click(function () {//上移，放到前�?数组中在后面
let idx = getIndex(canvas.getActiveObject());
if (idx + 1 != canvas.getObjects().length) {
canvas.bringForward(canvas.getActiveObject());
canvas.renderAll();
let temp = objs[idx - 1];
objs[idx - 1] = objs[idx];
objs[idx] = temp;
//console.log(objs);
window.recordState();
if (typeof window.updateList === 'function') {
window.updateList();
}
if (typeof window.selectObj === 'function') {
window.selectObj(idx);
}
}
});
$("#down_obj").click(function () {//下移，放到后�?数组中在前面
let idx = getIndex(canvas.getActiveObject());
if (idx != 1) {
canvas.sendBackwards(canvas.getActiveObject());
canvas.renderAll();
//[objs[idx-2],objs[idx-1]] = [objs[idx-1],objs[idx-2]];
let temp = objs[idx - 1];
objs[idx - 1] = objs[idx - 2];
objs[idx - 2] = temp;
window.recordState();
if (typeof window.updateList === 'function') {
window.updateList();
}
if (typeof window.selectObj === 'function') {
window.selectObj(idx - 2);
}
}
});
$("#set_bg").click(function () {//设置为背�?
let obj = canvas.getActiveObject();
let idx = getIndex(obj);
const scaleX = 2787 / obj.width
const scaleY = 2787 / obj.height
// 使用缩放后的实际尺寸计算位置，确保与初始背景图片位置一致
const scaledWidth = obj.width * scaleX;
const scaledHeight = obj.height * scaleY;
obj.set({
scaleX: scaleX,
scaleY: scaleY,
left: ($('#canvas1').width() - scaledWidth) / 2,
top: ($('#canvas1').height() - scaledHeight) / 2,
});
$('#text_w').val(2787)
$('#text_h').val(2787)
$('#text_x').val(0)
$('#text_y').val(0)
if (obj.get("selectable")) {
obj.set("selectable", false);
$("#lock_img").attr("src", soonAsset("lock20.png"))
}
canvas.sendToBack(obj);
canvas.bringForward(obj);
canvas.renderAll();
let objItem = objs.splice(idx - 1, 1)[0]
objs.unshift(objItem)
window.recordState();
if (typeof window.updateList === 'function') {
window.updateList();
}
if (typeof window.selectObj === 'function') {
window.selectObj(0);
}
});
// ==========================================
// onStateRestored 函数在 core.js 中定义并附加到 window 对象
// ==========================================
$("#previous").click(function () {
// 正在应用历史（撤销/重做）时，直接忽略新的点击，防止并发操作
if (window._isApplyingHistory) {
return;
}
if (step.val == 0) return;
step.val--;
// 判断当前是正面还是背面
if ($("#front_side").hasClass("ui-button-active")) {
// 1. 恢复业务数据
objs1 = JSON.parse(recordObjs1[step.val]);
objs = objs1;
// 2. 恢复画布 (使用回调函数)
window._isApplyingHistory = true;
canvas.loadFromJSON(recordJson1[step.val], function () {
// 加载后解锁所有对象（背景除外）
if (typeof window.unlockAllObjects === 'function') {
window.unlockAllObjects(canvas);
}
// 重新生成二维码和条码（因为它们需要根据 objs 数据动态生成）
if (typeof window.regenerateQrCodesAndBarcodes === 'function') {
window.regenerateQrCodesAndBarcodes(canvas, objs1);
}
if (typeof window.onStateRestored === 'function') {
window.onStateRestored(); // 图片加载完才执行这一行
}
window._isApplyingHistory = false;
});
} else {
// 背面逻辑
objs2 = JSON.parse(recordObjs2[step.val]);
objs = objs2;
window._isApplyingHistory = true;
canvas.loadFromJSON(recordJson2[step.val], function () {
// 加载后解锁所有对象（背景除外）
if (typeof window.unlockAllObjects === 'function') {
window.unlockAllObjects(canvas);
}
// 重新生成二维码和条码（因为它们需要根据 objs 数据动态生成）
if (typeof window.regenerateQrCodesAndBarcodes === 'function') {
window.regenerateQrCodesAndBarcodes(canvas, objs2);
}
if (typeof window.onStateRestored === 'function') {
window.onStateRestored();
}
window._isApplyingHistory = false;
});
}
});
// ==========================================
$("#next").click(function () {
// 正在应用历史（撤销/重做）时，直接忽略新的点击，防止并发操作
if (window._isApplyingHistory) {
return;
}
// 获取当前历史记录的最大长度
let maxLen = $("#front_side").hasClass("ui-button-active") ? recordObjs1.length : recordObjs2.length;
if (step.val >= maxLen - 1) return;
step.val++;
if ($("#front_side").hasClass("ui-button-active")) {
objs1 = JSON.parse(recordObjs1[step.val]);
objs = objs1;
window._isApplyingHistory = true;
canvas.loadFromJSON(recordJson1[step.val], function () {
// 加载后解锁所有对象（背景除外）
if (typeof window.unlockAllObjects === 'function') {
window.unlockAllObjects(canvas);
}
// 重新生成二维码和条码（因为它们需要根据 objs 数据动态生成）
if (typeof window.regenerateQrCodesAndBarcodes === 'function') {
window.regenerateQrCodesAndBarcodes(canvas, objs1);
}
if (typeof window.onStateRestored === 'function') {
window.onStateRestored(); // 图片加载完才执行这一行
}
window._isApplyingHistory = false;
});
} else {
objs2 = JSON.parse(recordObjs2[step.val]);
objs = objs2;
window._isApplyingHistory = true;
canvas.loadFromJSON(recordJson2[step.val], function () {
// 加载后解锁所有对象（背景除外）
if (typeof window.unlockAllObjects === 'function') {
window.unlockAllObjects(canvas);
}
// 重新生成二维码和条码（因为它们需要根据 objs 数据动态生成）
if (typeof window.regenerateQrCodesAndBarcodes === 'function') {
window.regenerateQrCodesAndBarcodes(canvas, objs2);
}
if (typeof window.onStateRestored === 'function') {
window.onStateRestored();
}
window._isApplyingHistory = false;
});
}
});
$("#clean").click(function () {
objs.splice(0, objs.length);
let allObjs = canvas.getObjects();
for (let item of allObjs) {
if (item != allObjs[0]) {
canvas.remove(item);
}
}
if (typeof window.updateList === 'function') {
window.updateList();
}
window.recordState();
});
$("#rotate").click(function () {
let obj = canvas.getActiveObject();
obj.rotate(Math.round((obj.get("angle") + 90) % 360));
$("#text_r").val(obj.get("angle"));
canvas.renderAll();
updateControls();
window.recordState();
});
$('#vertical_obj').click(function () {
let obj = canvas.getActiveObject();
obj.set("flipY", !obj.get("flipY"));
canvas.renderAll();
updateControls();
window.recordState();
});
$('#align_obj').click(function () {
let obj = canvas.getActiveObject();
obj.set("flipX", !obj.get("flipX"));
canvas.renderAll();
updateControls();
window.recordState();
});
$("#text_italics").click(function () {
if ($(this).hasClass("ui-radio-acitve")) {
//已�?
canvas.getActiveObject().set("fontStyle", "normal")
$(this).removeClass("ui-radio-acitve")
} else {
//未�?
canvas.getActiveObject().set("fontStyle", "italic")
$(this).addClass("ui-radio-acitve")
}
window.recordState();
canvas.renderAll();
window.recordState();
});
$("#text_bold").click(function () {
if ($(this).hasClass("ui-radio-acitve")) {
//已�?恢复正常
canvas.getActiveObject().set("fontWeight", "normal")
$(this).removeClass("ui-radio-acitve")
} else {
//未�?
canvas.getActiveObject().set("fontWeight", "bold")
$(this).addClass("ui-radio-acitve")
}
window.recordState();
canvas.renderAll();
window.recordState();
});
$("#text_underline").click(function () {
if ($(this).hasClass("ui-radio-acitve")) {
//已�?
canvas.getActiveObject().set("underline", false)
$(this).removeClass("ui-radio-acitve")
} else {
//未�?
canvas.getActiveObject().set("underline", true)
$(this).addClass("ui-radio-acitve")
}
window.recordState();
canvas.renderAll();
window.recordState();
});
$("#text_linethrough").click(function () {
if ($(this).hasClass("ui-radio-acitve")) {
//已�?
canvas.getActiveObject().set("linethrough", false)
$(this).removeClass("ui-radio-acitve")
} else {
//未�?
canvas.getActiveObject().set("linethrough", true)
$(this).addClass("ui-radio-acitve")
}
window.recordState();
canvas.renderAll();
window.recordState();
});
$("#circle_text_italics").click(function () {
if ($(this).hasClass("ui-radio-acitve")) {
//已�?
canvas.getActiveObject().set("fontStyle", "normal")
$(this).removeClass("ui-radio-acitve")
} else {
//未�?
canvas.getActiveObject().set("fontStyle", "italic")
$(this).addClass("ui-radio-acitve")
}
window.recordState();
canvas.renderAll();
window.recordState();
});
$("#circle_text_bold").click(function () {
if ($(this).hasClass("ui-radio-acitve")) {
//已�?恢复正常
canvas.getActiveObject().set("fontWeight", "normal")
$(this).removeClass("ui-radio-acitve")
} else {
//未�?
canvas.getActiveObject().set("fontWeight", "bold")
$(this).addClass("ui-radio-acitve")
}
window.recordState();
canvas.renderAll();
window.recordState();
});
$('#out_left_alignment').click(function () {
$('#out_left_alignment').parent().removeClass('tool1')
$('#out_right_alignment').parent().removeClass('tool1')
$('#out_center_alignment').parent().removeClass('tool1')
setTimeout(() => {
$('#out_left_alignment').parent().addClass('tool1')
});
canvas.getActiveObject().set('textAlign', 'left')
let idx = getIndex(canvas.getActiveObject())
objs[idx - 1].align = 'left'
window.recordState();
canvas.renderAll();
})
$('#out_right_alignment').click(function () {
$('#out_left_alignment').parent().removeClass('tool1')
$('#out_right_alignment').parent().removeClass('tool1')
$('#out_center_alignment').parent().removeClass('tool1')
setTimeout(() => {
$('#out_right_alignment').parent().addClass('tool1')
});
canvas.getActiveObject().set('textAlign', 'right')
let idx = getIndex(canvas.getActiveObject())
objs[idx - 1].align = 'right'
window.recordState();
canvas.renderAll();
})
$('#out_center_alignment').click(function () {
$('#out_left_alignment').parent().removeClass('tool1')
$('#out_right_alignment').parent().removeClass('tool1')
$('#out_center_alignment').parent().removeClass('tool1')
setTimeout(() => {
$('#out_center_alignment').parent().addClass('tool1')
});
canvas.getActiveObject().set('textAlign', 'center')
let idx = getIndex(canvas.getActiveObject())
objs[idx - 1].align = 'center'
window.recordState();
canvas.renderAll();
})
$("#out_text_italics").click(function () {
if ($(this).hasClass("ui-radio-acitve")) {
//已�?
canvas.getActiveObject().set("fontStyle", "normal")
$(this).removeClass("ui-radio-acitve")
} else {
//未�?
canvas.getActiveObject().set("fontStyle", "italic")
$(this).addClass("ui-radio-acitve")
}
window.recordState();
canvas.renderAll();
window.recordState();
});
$("#out_text_bold").click(function () {
if ($(this).hasClass("ui-radio-acitve")) {
//已�?恢复正常
canvas.getActiveObject().set("fontWeight", "normal")
$(this).removeClass("ui-radio-acitve")
} else {
//未�?
canvas.getActiveObject().set("fontWeight", "bold")
$(this).addClass("ui-radio-acitve")
}
window.recordState();
canvas.renderAll();
window.recordState();
});
$("#out_text_underline").click(function () {
if ($(this).hasClass("ui-radio-acitve")) {
//已�?
canvas.getActiveObject().set("underline", false)
$(this).removeClass("ui-radio-acitve")
} else {
//未�?
canvas.getActiveObject().set("underline", true)
$(this).addClass("ui-radio-acitve")
}
window.recordState();
canvas.renderAll();
window.recordState();
});
$("#out_text_linethrough").click(function () {
if ($(this).hasClass("ui-radio-acitve")) {
//已�?
canvas.getActiveObject().set("linethrough", false)
$(this).removeClass("ui-radio-acitve")
} else {
//未�?
canvas.getActiveObject().set("linethrough", true)
$(this).addClass("ui-radio-acitve")
}
window.recordState();
canvas.renderAll();
window.recordState();
});
$("#lock").off('click').on('click', function (e) {
e.stopPropagation();
if (!canvas.getActiveObject()) return;
let obj = canvas.getActiveObject();
// 检查是否已锁定（通过lockMovementX判断，因为锁定时会设置所有lock属性）
let isLocked = obj.get("lockMovementX") === true;
let shouldLock = !isLocked;
// 锁定/解锁所有编辑操作，但保持选中状态（不取消选中）
obj.set({
lockMovementX: shouldLock,
lockMovementY: shouldLock,
lockRotation: shouldLock,
lockScalingX: shouldLock,
lockScalingY: shouldLock,
lockSkewingX: shouldLock,
lockSkewingY: shouldLock,
// 锁定时不可选中，解锁时可选中（但保持当前选中状态）
selectable: !shouldLock,
evented: !shouldLock
});
if (shouldLock) {
$("#lock_img").attr("src", soonAsset("lock20.png"))//已锁定
} else {
$("#lock_img").attr("src", soonAsset("unlock20.png"))//已解锁
}
updateControls();
window.recordState();
// 更新对象列表以同步锁状态
if (typeof window.updateList === 'function') {
window.updateList();
}
canvas.renderAll();
});
$("#text_back_transparent").click(function () {
canvas.getActiveObject().set("textBackgroundColor", "");
$("#text_back_color").val("#ffffff");
canvas.renderAll();
window.recordState();
});
$("#circle_text_back_transparent").click(function () {
canvas.getActiveObject().set("textBackgroundColor", "");
$("#circle_text_back_color").val("#ffffff");
canvas.renderAll();
window.recordState();
});
$("#out_text_back_transparent").click(function () {
canvas.getActiveObject().set("textBackgroundColor", "");
$("#out_text_back_color").val("#ffffff");
canvas.renderAll();
window.recordState();
});
$("#rect_transparent").click(function () {
canvas.getActiveObject().set("fill", "");
$("#rect_color").val("#ffffff");
canvas.renderAll();
window.recordState();
});
$("#rect_stroke_transparent").click(function () {
canvas.getActiveObject().set("stroke", "");
$("#rect_stroke").val("#ffffff");
canvas.renderAll();
window.recordState();
});
$("#circle_transparent").click(function () {
canvas.getActiveObject().set("fill", "");
$("#circle_color").val("#ffffff");
canvas.renderAll();
window.recordState();
});
$("#circle_stroke_transparent").click(function () {
canvas.getActiveObject().set("stroke", "");
$("#circle_stroke").val("#ffffff");
canvas.renderAll();
window.recordState();
});
$("#copy").click(function () {
window.copySelection();
})
// 粘贴
$("#paste").click(function () {
window.pasteFromClipboard();
})
$("#save").click(function () {
if (typeof window.output === 'function') {
window.output();
}
});
function getDate() {
let date = new Date();
return date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
}
function getAbsoluteXY(_obj) {
let coord = _obj.get("lineCoords");
return [_obj.get("left"), _obj.get("top")]
}
$("#open").click(function () {
function OpenDialog() {
var dialogApi = (typeof dialog !== 'undefined' && dialog) ? dialog : (window.platformBridge && window.platformBridge.showOpenDialog ? { showOpenDialog: function(opts) { return window.platformBridge.showOpenDialog(opts); } } : null);
if (!dialogApi) return;
dialogApi.showOpenDialog({
title: "请选择文件",
buttonLabel: language_str("comf"),
filters: [{ name: 'Soon File Type', extensions: ['soon'] }]
}).then(function(result) {
if (result.canceled) return;
var file = (result.files && result.files[0]) || result.file;
function openWithKey(fileKey, j) {
var type = j.soonType ? j.soonType : j.backBlackPic ? 2 : 1;
if (type == 2) {
if (window.platformBridge) window.platformBridge.openDesignPage(fileKey, type);
return;
}
if (typeof window.openFile === 'function') {
window.openFile(fileKey, j);
}
}
function importAndOpen(j, fileName) {
if (typeof window.openFile === 'function') {
window.openFile(fileName || 'design.soon', j);
}
if (typeof window.soonPutSoonSession === 'function') {
var localKey = window.soonPutSoonSession(j, fileName || 'design.soon');
if (localKey && typeof window.soonScheduleCloudImport === 'function') {
window.soonScheduleCloudImport(localKey, fileName || 'design.soon');
}
}
}
if (file && file.text) {
file.text().then(function(t) {
var j;
try { j = JSON.parse(t); } catch (e) {
if (typeof window.soonReportOpenLoadError === 'function') {
window.soonReportOpenLoadError('模板/文件加载失败');
}
return;
}
importAndOpen(j, file.name || 'design.soon');
}).catch(function() {
if (typeof window.soonReportOpenLoadError === 'function') {
window.soonReportOpenLoadError('模板/文件加载失败');
}
});
return;
}
var filePath = result.filePaths && result.filePaths[0];
if (!filePath) return;
var fs = typeof require !== 'undefined' ? require('fs') : null;
if (fs) {
var fsData = fs.readFileSync(filePath);
importAndOpen(JSON.parse(fsData.toString()), filePath);
}
}).catch(function(err) {});
}
if (typeof window.soonConfirmLeaveThen === 'function') {
window.soonConfirmLeaveThen(OpenDialog);
} else {
OpenDialog();
}
});
$("#new").click(function () {
function goFirstPage() {
if (ipcRenderer) ipcRenderer.send('open-first-page');
else if (window.platformBridge) window.platformBridge.openFirstPage();
}
if (typeof window.soonConfirmLeaveThen === 'function') {
window.soonConfirmLeaveThen(goFirstPage);
return;
}
if (step.val == 0) {
goFirstPage();
return;
}
layer.confirm(language_str("whetherSave"), function (index) {//confirm 是否保存当前文件�?
if (typeof window.output === 'function') {
window.output(function() { goFirstPage(); });
}
}, function (index) {
goFirstPage();
});
});
// ===========================================================
$("#text_y").bind('input propertychange', function () {
if (window._soonSyncingFontControls) return;
if (!canvas.getActiveObject()) return;
if ($("#text_y").val() == "") {
$("#text_y").val(0)
}
let val = background_image.top;
if ($("#text_y").val() != "") {
val = background_image.top + parseInt($("#text_y").val());
}
canvas.getActiveObject().set("top", val)
canvas.renderAll();
window.recordState();
})
$("#text_x").bind('input propertychange', function () {
if (window._soonSyncingFontControls) return;
if (!canvas.getActiveObject()) return;
if ($("#text_x").val() == "") {
$("#text_x").val(0)
}
let val = background_image.left;
if ($("#text_x").val() != "") {
val = background_image.left + parseInt($("#text_x").val());
}
canvas.getActiveObject().set("left", val)
canvas.renderAll();
window.recordState();
})
$("#text_w").bind('input propertychange', function () {
if (window._soonSyncingFontControls) return;
if (!canvas.getActiveObject()) return;
let val = "0";
if ($("#text_w").val() != "") {
val = $("#text_w").val();
}
let idx = getIndex(canvas.getActiveObject());
if (idx <= 0 || !objs[idx - 1]) return;
let type = objs[idx - 1].type;
if (type == 3 || type == 4) {
canvas.getActiveObject().set("width", parseInt(val))
} else {
canvas.getActiveObject().set("scaleX", parseInt(val) / canvas.getActiveObject().get("width"))
}
canvas.renderAll();
window.recordState();
})
$("#text_h").bind('input propertychange', function () {
if (window._soonSyncingFontControls) return;
if (!canvas.getActiveObject()) return;
let idx = getIndex(canvas.getActiveObject());
if (idx <= 0 || !objs[idx - 1]) return;
if (objs[idx - 1].type == 7) {
if ($("#text_h").val() == "") {
$("#text_h").val(canvas.getActiveObject().get("strokeWidth"));
}
canvas.getActiveObject().set("strokeWidth", parseInt($("#text_h").val()));
canvas.renderAll();
return;
}
let val = "0";
if ($("#text_h").val() != "") {
val = $("#text_h").val();
}
let type = objs[idx - 1].type;
if (type == 3 || type == 4) {
canvas.getActiveObject().set("height", parseInt(val))
} else {
canvas.getActiveObject().set("scaleY", parseInt(val) / canvas.getActiveObject().get("height"))
}
canvas.renderAll();
window.recordState();
})
$("#text_r").bind('input propertychange', function () {
if (window._soonSyncingFontControls) return;
if (!canvas.getActiveObject()) return;
if ($("#text_r").val() == "") {
$("#text_r").val("0")
}
$("#text_r").val(parseInt($("#text_r").val()) % 360)
//canvas.getActiveObject().set("rotate", val)
canvas.getActiveObject().rotate(parseInt($("#text_r").val()))
canvas.renderAll();
window.recordState();
})
$("#out_pic_field_name").bind('input propertychange', function () {
let idx = getIndex(canvas.getActiveObject());
objs[idx - 1].name = $("#out_pic_field_name").val();
if (typeof window.updateList === 'function') {
window.updateList();
}
window.recordState();
})
$("#text_black").click(function () {
let idx = getIndex(canvas.getActiveObject());
if ($(this).prop("checked")) {
objs[idx - 1].black = true;
} else {
objs[idx - 1].black = false;
}
window.recordState();
});
$("#out_text_field_name").bind('input propertychange', function () {
let idx = getIndex(canvas.getActiveObject());
objs[idx - 1].name = $("#out_text_field_name").val();
if (typeof window.updateList === 'function') {
window.updateList();
}
window.recordState();
})
$("#qrcode_field_name").bind('input propertychange', function () {
let idx = getIndex(canvas.getActiveObject());
objs[idx - 1].name = $("#qrcode_field_name").val();
if (typeof window.updateList === 'function') {
window.updateList();
}
window.recordState();
})
$("#qrcode_color").bind('input propertychange', function () {
let item = canvas.getActiveObject();
let qr = jrQrcode.getQrBase64($("#qrcode_val").val(), { padding: 0, foreground: $(this).val() });
let idx = getIndex(item);
objs[idx - 1].color = $(this).val();
item.setSrc(qr, function (img) {
canvas.renderAll();
window.recordState();
});
});
$("#qrcode_val").bind('input propertychange', function () {
let val = $(this).val() ? $(this).val() : 'https://www.cardsoon.com'
let item = canvas.getActiveObject();
let qr = jrQrcode.getQrBase64(val, { padding: 0, foreground: $("#qrcode_color").val() });
let idx = getIndex(item);
objs[idx - 1].val = val;
item.setSrc(qr, function (img) {
canvas.renderAll();
window.recordState();
});
});
$("#barcode_color").bind('input propertychange', function () {
let item = canvas.getActiveObject();
let idx = getIndex(item);
objs[idx - 1].color = $(this).val();
JsBarcode("#barcode", objs[idx - 1].val, { margin: 0, lineColor: objs[idx - 1].color, fontSize: objs[idx - 1].fontSize, font: objs[idx - 1].font });
let barcode = document.getElementById('barcode');
let bar = barcode.toDataURL("image/png");
item.setSrc(bar, function (img) {
canvas.renderAll();
window.recordState();
});
});
$("#barcode_field_name").bind('input propertychange', function () {
let idx = getIndex(canvas.getActiveObject());
objs[idx - 1].name = $("#barcode_field_name").val();
if (typeof window.updateList === 'function') {
window.updateList();
}
window.recordState();
})
$("#text_color").bind('input propertychange', function () {
canvas.getActiveObject().set("fill", $("#text_color").val());
canvas.renderAll();
window.recordState();
})
$("#text_back_color").bind('input propertychange', function () {
canvas.getActiveObject().set("textBackgroundColor", $("#text_back_color").val());
canvas.renderAll();
window.recordState();
})
$("#text_size").bind('input propertychange', function () {
if (window._soonSyncingFontControls) return;
let val = 1
if (parseFloat($("#text_size").val())) {
val = parseFloat($("#text_size").val())
if (val < 1) {
val = 1
} else if (val > dpi) {
val = dpi
} else if (val % 0.5 !== 0) {
val = Math.round(val * 2) / 2
}
}
$("#text_size").val(val)
canvas.getActiveObject().set("fontSize", val * dpi / 72);
$("#text_h").val((canvas.getActiveObject().get("height")).toFixed(0));
$("#text_w").val((canvas.getActiveObject().get("width")).toFixed(0));
canvas.renderAll();
window.recordState();
})
$("#circle_text_color").bind('input propertychange', function () {
canvas.getActiveObject().set("fill", $("#circle_text_color").val());
canvas.renderAll();
window.recordState();
})
$("#circle_text_back_color").bind('input propertychange', function () {
canvas.getActiveObject().set("textBackgroundColor", $("#circle_text_back_color").val());
canvas.renderAll();
window.recordState();
})
$("#circle_text_text").bind('input propertychange', function () {
let val = $("#circle_text_text").val().trim()
// 有内容时不加首行缩进（前面的空格），只保留后面的空格
canvas.getActiveObject().set("text", val ? `${val} ` : ` ${val} `);
canvas.renderAll();
if (typeof window.updateList === 'function') {
window.updateList();
}
window.recordState();
})
$("#out_text_color").bind('input propertychange', function () {
canvas.getActiveObject().set("fill", $("#out_text_color").val());
canvas.renderAll();
window.recordState();
})
$("#out_text_back_color").bind('input propertychange', function () {
canvas.getActiveObject().set("textBackgroundColor", $("#out_text_back_color").val());
canvas.renderAll();
window.recordState();
})
$("#out_text_size").bind('input propertychange', function () {
if (window._soonSyncingFontControls) return;
let val = 1
if (parseFloat($("#out_text_size").val())) {
val = parseFloat($("#out_text_size").val())
if (val < 1) {
val = 1
} else if (val > dpi) {
val = dpi
} else if (val % 0.5 !== 0) {
val = Math.round(val * 2) / 2
}
}
$("#out_text_size").val(val)
canvas.getActiveObject().set("fontSize", val * dpi / 72);
$("#text_h").val((canvas.getActiveObject().get("height")).toFixed(0));
$("#text_w").val((canvas.getActiveObject().get("width")).toFixed(0));
canvas.renderAll();
window.recordState();
})
// 监听合成文本输入框 (占位符)
$("#out_text_text").on('input propertychange', function () {
let val = $(this).val();
// 【核心修改】如果值为空，强制给 2 个空格
if (val === "") {
val = " ";
}
let obj = canvas.getActiveObject();
if (obj) {
obj.set("text", val);
obj.setCoords();
canvas.requestRenderAll();
if (typeof window.updateList === 'function') {
window.updateList();
}
window.recordState();
}
});
$("#rect_color").bind('input propertychange', function () {
canvas.getActiveObject().set("fill", $("#rect_color").val());
canvas.renderAll();
window.recordState();
})
$("#rect_stroke").bind('input propertychange', function () {
canvas.getActiveObject().set("stroke", $("#rect_stroke").val());
canvas.renderAll();
window.recordState();
})
$("#rect_stroke_width").bind('input propertychange', function () {
if ($("#rect_stroke_width").val() == "") {
$("#rect_stroke_width").val("0")
} else {
$("#rect_stroke_width").val(parseInt($("#rect_stroke_width").val()))
}
canvas.getActiveObject().set("strokeWidth", parseInt($("#rect_stroke_width").val()));
canvas.renderAll();
window.recordState();
})
$("#rect_radius").bind('input propertychange', function () {
if ($("#rect_radius").val() == "") {
$("#rect_radius").val("0")
} else {
$("#rect_radius").val(parseInt($("#rect_radius").val()))
}
canvas.getActiveObject().set("rx", parseInt($("#rect_radius").val()));
canvas.getActiveObject().set("ry", parseInt($("#rect_radius").val()));
canvas.renderAll();
window.recordState();
})
$("#circle_color").bind('input propertychange', function () {
canvas.getActiveObject().set("fill", $("#circle_color").val());
canvas.renderAll();
window.recordState();
})
$("#circle_stroke").bind('input propertychange', function () {
canvas.getActiveObject().set("stroke", $("#circle_stroke").val());
canvas.renderAll();
window.recordState();
})
$("#circle_stroke_width").bind('input propertychange', function () {
if ($("#circle_stroke_width").val() == "") {
$("#circle_stroke_width").val("0")
} else {
$(this).val(parseInt($(this).val()))
}
canvas.getActiveObject().set("strokeWidth", parseInt($("#circle_stroke_width").val()));
canvas.renderAll();
window.recordState();
})
$("#counter_start").bind('input propertychange', function () {
canvas.getActiveObject().set("text", $("#counter_start").val());
let item = canvas.getActiveObject();
let idx = getIndex(item);
objs[idx - 1].start = $(this).val();
canvas.renderAll();
window.recordState();
})
$("#counter_add").bind('input propertychange', function () {
let item = canvas.getActiveObject();
let idx = getIndex(item);
objs[idx - 1].add = $(this).val();
canvas.renderAll();
window.recordState();
})
$("#counter_color").bind('input propertychange', function () {
canvas.getActiveObject().set("fill", $("#counter_color").val());
canvas.renderAll();
window.recordState();
})
$("#count_size").bind('input propertychange', function () {
if (window._soonSyncingFontControls) return;
let val = 1
if (parseFloat($("#count_size").val())) {
val = parseFloat($("#count_size").val())
if (val < 1) {
val = 1
} else if (val > dpi) {
val = dpi
} else if (val % 0.5 !== 0) {
val = Math.round(val * 2) / 2
}
}
$("#count_size").val(val)
canvas.getActiveObject().set("fontSize", val * dpi / 72);
$("#text_h").val((canvas.getActiveObject().get("height")).toFixed(0));
$("#text_w").val((canvas.getActiveObject().get("width")).toFixed(0));
canvas.renderAll();
window.recordState();
})
$("#line_color").bind('input propertychange', function () {
canvas.getActiveObject().set("stroke", $("#line_color").val());
canvas.renderAll();
window.recordState();
})
$("#line_dist").bind('input propertychange', function () {
if ($("#line_dist").val() == "") {
$("#line_dist").val(0)
}
canvas.getActiveObject().set("strokeDashArray", [parseInt($("#line_dist").val()), parseInt($("#line_dist").val())])
canvas.renderAll();
window.recordState();
})
// 监听普通文本输入 (占位符)
$("#text_text").on('input propertychange', function () {
// 1. 获取输入框的值，不要用 trim()，否则无法输入空格
let val = $(this).val();
// 2. 核心修改：只有当删光时，才给 4 个空格作为占位符
if (val === "") {
val = " "; // 4个空格，比原来的2个更宽，更好点
}
// 3. 更新对象
canvas.getActiveObject().set("text", val);
canvas.requestRenderAll(); // 使用 requestRenderAll 性能更好
if (typeof window.updateList === 'function') {
window.updateList();
}
window.recordState();
});
$("#barcode_val").bind('input propertychange', function () {
let item = canvas.getActiveObject();
let idx = getIndex(item);
objs[idx - 1].val = $(this).val();
JsBarcode("#barcode", objs[idx - 1].val, { margin: 0, lineColor: objs[idx - 1].color, fontSize: objs[idx - 1].fontSize, font: objs[idx - 1].font });
let barcode = document.getElementById('barcode');
let bar = barcode.toDataURL("image/png");
item.setSrc(bar, function (img) {
canvas.renderAll();
window.recordState();
});
})
$("#barcode_show").click(function () {
let item = canvas.getActiveObject();
let idx = getIndex(canvas.getActiveObject());
let val = $("#barcode_size").val();
let displayValue = true;
if ($(this).prop("checked")) {
objs[idx - 1].show = true;
displayValue = false;
} else {
objs[idx - 1].show = false;
displayValue = true;
}
//val = 0; // Remove this hack
JsBarcode("#barcode", objs[idx - 1].val, { margin: 0, lineColor: objs[idx - 1].color, fontSize: val * dpi / 72, font: objs[idx - 1].font, displayValue: displayValue });
let barcode = document.getElementById('barcode');
let bar = barcode.toDataURL("image/png");
item.setSrc(bar, function (img) {
canvas.renderAll();
window.recordState();
});
});
$("#barcode_size").bind('input propertychange', function () {
let item = canvas.getActiveObject();
let idx = getIndex(item);
let val = 1
if (parseFloat($(this).val())) {
val = parseFloat($(this).val())
if (val < 1) {
val = 1
} else if (val > dpi) {
val = dpi
} else if (val % 0.5 !== 0) {
val = Math.round(val * 2) / 2
}
}
$("#barcode_size").val(val)
objs[idx - 1].fontSize = val * dpi / 72;
JsBarcode("#barcode", objs[idx - 1].val, { margin: 0, lineColor: objs[idx - 1].color, fontSize: objs[idx - 1].fontSize, font: objs[idx - 1].font });
let barcode = document.getElementById('barcode');
let bar = barcode.toDataURL("image/png");
item.setSrc(bar, function (img) {
canvas.renderAll();
window.recordState();
});
})
$('#count_font_family').on('change', function () {
canvas.getActiveObject().set("fontFamily", $(this).find('option:selected').text())
canvas.renderAll()
window.recordState();
});
$('#text_font_family').on('change', function () {
canvas.getActiveObject().set("fontFamily", $(this).find('option:selected').text())
canvas.renderAll()
window.recordState();
});
$('#circle_text_font_family').on('change', function () {
canvas.getActiveObject().set("fontFamily", $(this).find('option:selected').text())
canvas.renderAll()
window.recordState();
});
$('#language_select').on('change', function () {//语言选择
langua_ge($(this).find('option:selected').val());
s_lan = $(this).find('option:selected').val();
localStorage.setItem("lang", s_lan);
});
$('#barcode_font_family').on('change', function () {
let item = canvas.getActiveObject();
let idx = getIndex(item);
objs[idx - 1].font = $(this).find('option:selected').text();
JsBarcode("#barcode", objs[idx - 1].val, { margin: 0, lineColor: objs[idx - 1].color, fontSize: objs[idx - 1].fontSize, font: objs[idx - 1].font });
let barcode = document.getElementById('barcode');
let bar = barcode.toDataURL("image/png");
item.setSrc(bar, function (img) {
canvas.renderAll();
window.recordState();
});
//window.recordState();
});
$('#out_text_font_family').on('change', function () {
canvas.getActiveObject().set("fontFamily", $(this).find('option:selected').text())
canvas.renderAll()
window.recordState();
});
$(".obj_list").on("click", "div", function () {
let idx = objs.length - 1 - $(this).index();
if (typeof window.selectObj === 'function') {
window.selectObj(idx);
}
});
$("#exceed").click(function () {
let idx = getIndex(canvas.getActiveObject());
if ($(this).prop("checked")) {
objs[idx - 1].exceed = true;
} else {
objs[idx - 1].exceed = false;
}
window.recordState();
});
$("#autoWrap").click(function () {
let idx = getIndex(canvas.getActiveObject());
if ($(this).prop("checked")) {
objs[idx - 1].autoWrap = true;
} else {
objs[idx - 1].autoWrap = false;
}
window.recordState();
});
$("#fixSize").click(function () {
let idx = getIndex(canvas.getActiveObject());
if ($(this).prop("checked")) {
objs[idx - 1].fixSize = true;
} else {
objs[idx - 1].fixSize = false;
}
window.recordState();
});
$("#circle_text_center").click(function () {
let idx = getIndex(canvas.getActiveObject());
if ($(this).prop("checked")) {
objs[idx - 1].circleCenter = 1;
} else {
objs[idx - 1].circleCenter = 0;
}
window.recordState();
});
// ===========================================================
$("#text_italics").click(function () {
if ($(this).hasClass("ui-radio-acitve")) {
//已选
canvas.getActiveObject().set("fontStyle", "normal")
$(this).removeClass("ui-radio-acitve")
} else {
//未选
canvas.getActiveObject().set("fontStyle", "italic")
$(this).addClass("ui-radio-acitve")
}
window.recordState();
canvas.renderAll();
window.recordState();
});
$("#text_bold").click(function () {
if ($(this).hasClass("ui-radio-acitve")) {
//已选,恢复正常
canvas.getActiveObject().set("fontWeight", "normal")
$(this).removeClass("ui-radio-acitve")
} else {
//未选
canvas.getActiveObject().set("fontWeight", "bold")
$(this).addClass("ui-radio-acitve")
}
window.recordState();
canvas.renderAll();
window.recordState();
});
$("#text_underline").click(function () {
if ($(this).hasClass("ui-radio-acitve")) {
//已选
canvas.getActiveObject().set("underline", false)
$(this).removeClass("ui-radio-acitve")
} else {
//未选
canvas.getActiveObject().set("underline", true)
$(this).addClass("ui-radio-acitve")
}
window.recordState();
canvas.renderAll();
window.recordState();
});
$("#text_linethrough").click(function () {
if ($(this).hasClass("ui-radio-acitve")) {
//已选
canvas.getActiveObject().set("linethrough", false)
$(this).removeClass("ui-radio-acitve")
} else {
//未选
canvas.getActiveObject().set("linethrough", true)
$(this).addClass("ui-radio-acitve")
}
window.recordState();
canvas.renderAll();
window.recordState();
});
$("#circle_text_italics").click(function () {
if ($(this).hasClass("ui-radio-acitve")) {
//已选
canvas.getActiveObject().set("fontStyle", "normal")
$(this).removeClass("ui-radio-acitve")
} else {
//未选
canvas.getActiveObject().set("fontStyle", "italic")
$(this).addClass("ui-radio-acitve")
}
window.recordState();
canvas.renderAll();
window.recordState();
});
$("#circle_text_bold").click(function () {
if ($(this).hasClass("ui-radio-acitve")) {
//已选,恢复正常
canvas.getActiveObject().set("fontWeight", "normal")
$(this).removeClass("ui-radio-acitve")
} else {
//未选
canvas.getActiveObject().set("fontWeight", "bold")
$(this).addClass("ui-radio-acitve")
}
window.recordState();
canvas.renderAll();
window.recordState();
});
$('#out_left_alignment').click(function () {
$('#out_left_alignment').parent().removeClass('tool1')
$('#out_right_alignment').parent().removeClass('tool1')
$('#out_center_alignment').parent().removeClass('tool1')
setTimeout(() => {
$('#out_left_alignment').parent().addClass('tool1')
});
canvas.getActiveObject().set('textAlign', 'left')
let idx = getIndex(canvas.getActiveObject())
objs[idx - 1].align = 'left'
window.recordState();
canvas.renderAll()
})
$('#out_right_alignment').click(function () {
$('#out_left_alignment').parent().removeClass('tool1')
$('#out_right_alignment').parent().removeClass('tool1')
$('#out_center_alignment').parent().removeClass('tool1')
setTimeout(() => {
$('#out_right_alignment').parent().addClass('tool1')
});
canvas.getActiveObject().set('textAlign', 'right')
let idx = getIndex(canvas.getActiveObject())
objs[idx - 1].align = 'right'
window.recordState();
canvas.renderAll()
})
$('#out_center_alignment').click(function () {
$('#out_left_alignment').parent().removeClass('tool1')
$('#out_right_alignment').parent().removeClass('tool1')
$('#out_center_alignment').parent().removeClass('tool1')
setTimeout(() => {
$('#out_center_alignment').parent().addClass('tool1')
});
canvas.getActiveObject().set('textAlign', 'center')
let idx = getIndex(canvas.getActiveObject())
objs[idx - 1].align = 'center'
window.recordState();
canvas.renderAll()
})
$("#out_text_italics").click(function () {
if ($(this).hasClass("ui-radio-acitve")) {
//已选
canvas.getActiveObject().set("fontStyle", "normal")
$(this).removeClass("ui-radio-acitve")
} else {
//未选
canvas.getActiveObject().set("fontStyle", "italic")
$(this).addClass("ui-radio-acitve")
}
window.recordState();
canvas.renderAll();
window.recordState();
});
$("#out_text_bold").click(function () {
if ($(this).hasClass("ui-radio-acitve")) {
//已选,恢复正常
canvas.getActiveObject().set("fontWeight", "normal")
$(this).removeClass("ui-radio-acitve")
} else {
//未选
canvas.getActiveObject().set("fontWeight", "bold")
$(this).addClass("ui-radio-acitve")
}
window.recordState();
canvas.renderAll();
window.recordState();
});
$("#out_text_underline").click(function () {
if ($(this).hasClass("ui-radio-acitve")) {
//已选
canvas.getActiveObject().set("underline", false)
$(this).removeClass("ui-radio-acitve")
} else {
//未选
canvas.getActiveObject().set("underline", true)
$(this).addClass("ui-radio-acitve")
}
window.recordState();
canvas.renderAll();
window.recordState();
});
$("#out_text_linethrough").click(function () {
if ($(this).hasClass("ui-radio-acitve")) {
//已选
canvas.getActiveObject().set("linethrough", false)
$(this).removeClass("ui-radio-acitve")
} else {
//未选
canvas.getActiveObject().set("linethrough", true)
$(this).addClass("ui-radio-acitve")
}
window.recordState();
canvas.renderAll();
window.recordState();
});
// ===========================================================
$("#delete").click(function () {
let actObjs = canvas.getActiveObjects();
let allObjs = canvas.getObjects();
let flag = 0;
for (let item of actObjs) {
if (item != allObjs[0]) {
let i = getIndex(item);//0是背景，所以从1开始，但objs不包含背景图片，故要-1
objs.splice(i - 1, 1);
canvas.remove(item);
flag = 1;
}
}
if (typeof window.updateList === 'function') {
window.updateList();
}
canvas.discardActiveObject();
if (flag == 1) {
window.recordState();
canvas.renderAll();
}
});
// 移至上层和移至下层：先取消所有绑定（包括第一处的绑定），然后重新绑定（确保只绑定一次）
// 注意：第一处的事件绑定（第 842 行和第 861 行）会被这里的 off('click') 取消
$("#up_obj").off('click').on('click', function () {//上移，放到前面 数组中在后面
let idx = getIndex(canvas.getActiveObject());
if (idx + 1 != canvas.getObjects().length) {
canvas.bringForward(canvas.getActiveObject());
canvas.renderAll();
let temp = objs[idx - 1];
objs[idx - 1] = objs[idx];
objs[idx] = temp;
window.recordState();
if (typeof window.updateList === 'function') {
window.updateList();
}
if (typeof window.selectObj === 'function') {
window.selectObj(idx);
}
}
});
$("#down_obj").off('click').on('click', function () {//下移，放到后面 数组中在前面
let idx = getIndex(canvas.getActiveObject());
if (idx != 1) {
canvas.sendBackwards(canvas.getActiveObject());
canvas.renderAll();
let temp = objs[idx - 1];
objs[idx - 1] = objs[idx - 2];
objs[idx - 2] = temp;
window.recordState();
if (typeof window.updateList === 'function') {
window.updateList();
}
if (typeof window.selectObj === 'function') {
window.selectObj(idx - 2);
}
}
});
$("#set_bg").click(function () {//设置为背景
let obj = canvas.getActiveObject();
let idx = getIndex(obj);
const scaleX = 2787 / obj.width
const scaleY = 2787 / obj.height
// 使用缩放后的实际尺寸计算位置，确保与初始背景图片位置一致
const scaledWidth = obj.width * scaleX;
const scaledHeight = obj.height * scaleY;
obj.set({
scaleX: scaleX,
scaleY: scaleY,
left: ($('#canvas1').width() - scaledWidth) / 2,
top: ($('#canvas1').height() - scaledHeight) / 2,
});
$('#text_w').val(2787)
$('#text_h').val(2787)
$('#text_x').val(0)
$('#text_y').val(0)
// 设为背景时，锁定所有编辑操作，并设置为不可选中
obj.set({
lockMovementX: true,
lockMovementY: true,
lockRotation: true,
lockScalingX: true,
lockScalingY: true,
lockSkewingX: true,
lockSkewingY: true,
selectable: false,
evented: false
});
$("#lock_img").attr("src", soonAsset("lock20.png"))
canvas.sendToBack(obj);
canvas.bringForward(obj);
canvas.renderAll();
let objItem = objs.splice(idx - 1, 1)[0]
objs.unshift(objItem)
// 确保背景图（索引0）的锁定属性被正确设置
setTimeout(() => {
let bgObj = canvas.getObjects()[0];
if (bgObj) {
bgObj.set({
lockMovementX: true,
lockMovementY: true,
lockRotation: true,
lockScalingX: true,
lockScalingY: true,
lockSkewingX: true,
lockSkewingY: true,
selectable: false,
evented: false
});
canvas.renderAll();
}
}, 100);
window.recordState();
if (typeof window.updateList === 'function') {
window.updateList();
}
if (typeof window.selectObj === 'function') {
window.selectObj(0);
}
});
// 重复的lock点击事件已移除，使用第一处的绑定
$("#text_back_transparent").click(function () {
canvas.getActiveObject().set("textBackgroundColor", "");
$("#text_back_color").val("#ffffff");
canvas.renderAll();
window.recordState();
});
$("#circle_text_back_transparent").click(function () {
canvas.getActiveObject().set("textBackgroundColor", "");
$("#circle_text_back_color").val("#ffffff");
canvas.renderAll();
window.recordState();
});
$("#out_text_back_transparent").click(function () {
canvas.getActiveObject().set("textBackgroundColor", "");
$("#out_text_back_color").val("#ffffff");
canvas.renderAll();
window.recordState();
});
$("#rect_transparent").click(function () {
canvas.getActiveObject().set("fill", "");
$("#rect_color").val("#ffffff");
canvas.renderAll();
window.recordState();
});
$("#rect_stroke_transparent").click(function () {
canvas.getActiveObject().set("stroke", "");
$("#rect_stroke").val("#ffffff");
canvas.renderAll();
window.recordState();
});
$("#circle_transparent").click(function () {
canvas.getActiveObject().set("fill", "");
$("#circle_color").val("#ffffff");
canvas.renderAll();
window.recordState();
});
$("#circle_stroke_transparent").click(function () {
canvas.getActiveObject().set("stroke", "");
$("#circle_stroke").val("#ffffff");
canvas.renderAll();
window.recordState();
});
// ===========================================================
$("#about").click(async function () {
// 1. 先异步获取版本号
let version = "0.0.0"; // 默认值，防止获取失败
try {
if (window.sysAPI && window.sysAPI.getAppVersion) {
const v = await window.sysAPI.getAppVersion();
version = "v" + v; // 拼接一个 v，变成 v2.3.017
}
} catch (e) {
}
// 2. 获取成功后再弹出窗口
layer.open({
type: 1
, title: language_str("about")
, area: '450px;'
, id: 'LAY_layuipro'
, moveType: 1
, content: '<div style="padding-top:20px;padding-bottom:30px;background-color: #32363A; color: #fff; font-weight: 300;text-align:center;">' +
'<div style="width: 120px;margin: 0 auto;"><img style="width: 120px;" src="' + soonAsset('IconA.png') + '"></div>' +
'<div style="font-size:24px;">Soon Design</div>' +
'<div style="font-size:14px;">' + language_str("vers") + ' ' + version + '</div>' +
'<div style="font-size:14px;">' + language_str("copyright") + '</div>' +
'</div>'
});
})
$("#help").click(function() {
if (window.platformBridge && window.platformBridge.openHelp) window.platformBridge.openHelp();
else if (ipcRenderer && ipcRenderer.send) ipcRenderer.send('open-help-file');
});
// ===========================================================
$('#display').on('click', function () {
// 类型改变
fabric.Image.fromURL(soonAsset('front_bg') + bg_version + '_1.png', function (i1) {
i1.left = background_image.left;
i1.top = background_image.top;
let img1 = i1;
fabric.Image.fromURL(soonAsset('back_bg_1.png'), function (i2) {
i2.left = background_image.left;
i2.top = background_image.top;
let img2 = i2;
fabric.Image.fromURL(soonAsset('op_1.png'), function (i3) {
i3.left = background_image.left;
i3.top = background_image.top;
let img3 = i3;
if (typeof window.display_func === 'function') {
window.display_func(img1, img2, img3);
}
})
})
})
});
$("#output").click(function () {
// 另存为：传递 saveAs 函数作为第二个参数
if (typeof window.output === 'function') {
window.output(null, saveAs); // 调用output函数，使用saveAs进行另存为
}
});
// 确保移至上层和移至下层的事件绑定正确（在文件末尾再次确认）
// 取消所有绑定，然后重新绑定第二处的实现（第 2171 行和第 2189 行）
$(document).ready(function () {
setTimeout(function () {
$("#up_obj").off('click').on('click', function () {
let idx = getIndex(canvas.getActiveObject());
if (idx + 1 != canvas.getObjects().length) {
canvas.bringForward(canvas.getActiveObject());
canvas.renderAll();
let temp = objs[idx - 1];
objs[idx - 1] = objs[idx];
objs[idx] = temp;
window.recordState();
if (typeof window.updateList === 'function') {
window.updateList();
}
if (typeof window.selectObj === 'function') {
window.selectObj(idx);
}
}
});
$("#down_obj").off('click').on('click', function () {
let idx = getIndex(canvas.getActiveObject());
if (idx != 1) {
canvas.sendBackwards(canvas.getActiveObject());
canvas.renderAll();
let temp = objs[idx - 1];
objs[idx - 1] = objs[idx - 2];
objs[idx - 2] = temp;
window.recordState();
if (typeof window.updateList === 'function') {
window.updateList();
}
if (typeof window.selectObj === 'function') {
window.selectObj(idx - 2);
}
}
});
}, 100);
});
Reference in New Issue View Git Blame Copy Permalink