优化bug

lib/design2/output.js

@@ -1246,7 +1246,111 @@ window.openFile = function open(file) {
         }
     })
 
+    // 先清空历史记录和重置 step
+    objs2 = j.bo || []
+    objs1 = j.fo || []
+    step1.val = 0
+    step2.val = 0
+    recordJson1 = []
+    recordJson2 = []
+    recordObjs1 = []
+    recordObjs2 = []
+    
+    // 同步更新 window 变量
+    window.objs1 = objs1
+    window.objs2 = objs2
+    window.step1 = step1
+    window.step2 = step2
+    window.recordJson1 = recordJson1
+    window.recordJson2 = recordJson2
+    window.recordObjs1 = recordObjs1
+    window.recordObjs2 = recordObjs2
+    
+    if ($('#front_side').hasClass('ui-button-active')) {
+        objs = objs1
+        recordObjs = recordObjs1
+        recordJson = recordJson1
+        step = step1
+        window.objs = objs1
+        window.recordObjs = recordObjs1
+        window.recordJson = recordJson1
+        window.step = step1
+    } else if ($('#back_side').hasClass('ui-button-active')) {
+        objs = objs2
+        recordObjs = recordObjs2
+        recordJson = recordJson2
+        background_image = background_image2
+        step = step2
+        window.objs = objs2
+        window.recordObjs = recordObjs2
+        window.recordJson = recordJson2
+        window.step = step2
+    }
+
     // 加载 JSON，并在回调中重新生成二维码和条形码
+    // 使用 Promise 确保两个画布都加载完成后再保存初始状态
+    let canvas1Loaded = false
+    let canvas2Loaded = false
+    
+    function saveInitialState() {
+        // 两个画布都加载完成后才保存初始状态
+        if (!canvas1Loaded || !canvas2Loaded) return
+        
+        // 确保使用正确的 objs1 和 objs2（从文件加载的 fo 和 bo）
+        // 注意：必须使用 fo 和 bo，因为它们是直接从文件 JSON 中读取的
+        // 同时确保 objs1 和 objs2 也被正确设置
+        objs1 = fo || []
+        objs2 = bo || []
+        window.objs1 = objs1
+        window.objs2 = objs2
+        
+        // 更新背景图引用
+        background_image1 = canvas1.getObjects()[0]
+        background_image2 = canvas2.getObjects()[0]
+        window.background_image1 = background_image1
+        window.background_image2 = background_image2
+        
+        if ($('#front_side').hasClass('ui-button-active')) {
+            background_image = background_image1
+            window.background_image = background_image1
+            objs = objs1
+            window.objs = objs1
+        } else if ($('#back_side').hasClass('ui-button-active')) {
+            background_image = background_image2 || background_image1
+            window.background_image = background_image
+            objs = objs2
+            window.objs = objs2
+        }
+        
+        // 保存初始状态（使用从文件加载的 objs 数组）
+        recordObjs1.push(JSON.stringify(objs1))
+        const props = window.TO_JSON_PROPERTIES || ['selectable', 'hoverable', 'hoverCursor', 'text', 'fontStyle', 'fontWeight', 'underline', 'evented', 'linethrough', 'textBackgroundColor', 'diameter', 'flipped'];
+        let j1 = canvas1.toJSON(props)
+        j1.objects[0].hoverCursor = 'default'
+        recordJson1.push(j1)
+
+        recordObjs2.push(JSON.stringify(objs2))
+        let j2 = canvas2.toJSON(props)
+        j2.objects[0].hoverCursor = 'default'
+        recordJson2.push(j2)
+        
+        // 同步更新 window 变量和局部变量
+        window.recordObjs1 = recordObjs1
+        window.recordJson1 = recordJson1
+        window.recordObjs2 = recordObjs2
+        window.recordJson2 = recordJson2
+        // 确保局部变量也同步
+        if ($('#front_side').hasClass('ui-button-active')) {
+            recordObjs = recordObjs1
+            recordJson = recordJson1
+            step = step1
+        } else if ($('#back_side').hasClass('ui-button-active')) {
+            recordObjs = recordObjs2
+            recordJson = recordJson2
+            step = step2
+        }
+    }
+    
     canvas1.loadFromJSON(j.f, function () {
         // 加载后解锁所有对象（背景除外）
         if (typeof window.unlockAllObjects === 'function') {
@@ -1260,6 +1364,8 @@ window.openFile = function open(file) {
             window.updateList();
         }
         canvas1.renderAll()
+        canvas1Loaded = true
+        saveInitialState()
     })
     canvas2.loadFromJSON(j.b, function () {
         // 加载后解锁所有对象（背景除外）
@@ -1274,59 +1380,9 @@ window.openFile = function open(file) {
             window.updateList();
         }
         canvas2.renderAll()
+        canvas2Loaded = true
+        saveInitialState()
     })
-    background_image1 = canvas1.getObjects()[0]
-    background_image2 = canvas2.getObjects()[0]
-
-    objs2 = j.bo
-    objs1 = j.fo
-    step1.val = 0
-    step2.val = 0
-    recordJson1 = []
-    recordJson2 = []
-    recordObjs1 = []
-    recordObjs2 = []
-    if ($('#front_side').hasClass('ui-button-active')) {
-        objs = objs1
-        recordObjs = recordObjs1
-        recordJson = recordJson1
-        step = step1
-        background_image = background_image1
-    } else if ($('#back_side').hasClass('ui-button-active')) {
-        objs = objs2
-        recordObjs = recordObjs2
-        recordJson = recordJson2
-        background_image = background_image2
-        step = step2
-    }
-    canvas1.renderAll()
-    canvas2.renderAll()
-    // 调用 updateList，现在它已附加到 window 对象
-    if (typeof window.updateList === 'function') {
-        window.updateList(); /*
-                                修复打开新文件后无法撤销的bug
-                                2022-07-16
-                                */
-    } else {
-        // 延迟检查，确保 core.js 已加载
-        setTimeout(() => {
-            if (typeof window.updateList === 'function') {
-                window.updateList();
-            }
-        }, 100);
-    }
-    setTimeout(() => {
-        recordObjs1.push(JSON.stringify(objs1))
-        const props = window.TO_JSON_PROPERTIES || ['selectable', 'hoverable', 'hoverCursor', 'text', 'fontStyle', 'fontWeight', 'underline', 'evented'];
-        let j1 = canvas1.toJSON(props)
-        j1.objects[0].hoverCursor = 'default'
-        recordJson1.push(j1)
-
-        recordObjs2.push(JSON.stringify(objs2))
-        let j2 = canvas2.toJSON(props)
-        j2.objects[0].hoverCursor = 'default'
-        recordJson2.push(j2)
-    }, 0)
 }
 
 function clearAll() {

lib/design2/ui.js

@@ -28,69 +28,10 @@ $('body').keydown(function (event) {
     const isModifierKey = event.ctrlKey || event.metaKey; // 兼容三端
 
     // 快捷键处理（在输入框或文本区域中时不触发，除了删除相关的）
+    // 注意：大部分快捷键已在 core.js 中统一处理，此处只保留 ui.js 特有的快捷键
+    // 已移除的重复快捷键：CTRL/CMD+N/O/S/Z/Y/C/V/SHIFT+DEL/DEL（已在 core.js 中处理）
     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;
-        }
+        // ui.js 特有的快捷键可以在这里添加
     }
     // 兼容三端的 modifier key 检测（Windows/Linux: Ctrl, Mac: Cmd/Meta）
     if (event.keyCode == 17 || event.metaKey) { // Ctrl 键或 Meta 键（Mac Cmd）
@@ -439,6 +380,10 @@ $('#front_side').click(function () {
     recordObjs = recordObjs1
     recordJson = recordJson1
     step = step1
+    // 同步到 window 对象，确保 recordState 使用正确的数组
+    window.recordObjs = recordObjs1
+    window.recordJson = recordJson1
+    window.step = step1
     if (typeof window.updateList === 'function') {
         window.updateList();
     }
@@ -476,6 +421,10 @@ $('#back_side').click(function () {
     recordObjs = recordObjs2
     recordJson = recordJson2
     step = step2
+    // 同步到 window 对象，确保 recordState 使用正确的数组
+    window.recordObjs = recordObjs2
+    window.recordJson = recordJson2
+    window.step = step2
     if (typeof window.updateList === 'function') {
         window.updateList();
     }
@@ -894,147 +843,155 @@ $('#set_bg').click(function () {
     }
 })
 $('#previous').click(function () {
+    // 正在应用历史（撤销/重做）时，直接忽略新的点击，防止并发操作
+    if (window._isApplyingHistory) {
+        return;
+    }
     //撤销一次操作
     if (step.val == 0) {
         return
     }
 
     step.val--
+    
     if ($('#front_side').hasClass('ui-button-active')) {
         // 使用 recordJson1 和 recordObjs1
+        if (recordObjs1 && recordObjs1[step.val]) {
+            objs1 = JSON.parse(recordObjs1[step.val]);
+            objs = objs1;
+            // 同步更新 window 变量
+            window.objs1 = objs1;
+            window.objs = objs;
+        }
+        
         if (recordJson1 && recordJson1[step.val]) {
+            window._isApplyingHistory = true;
             canvas.loadFromJSON(recordJson1[step.val], function() {
                 // 加载后解锁所有对象（背景除外）
                 if (typeof window.unlockAllObjects === 'function') {
                     window.unlockAllObjects(canvas);
                 }
-                // 加载后更新列表和图标显示
-                if (typeof window.updateList === 'function') {
-                    window.updateList();
+                // 重新生成二维码和条码（因为它们需要根据 objs 数据动态生成）
+                if (typeof window.regenerateQrCodesAndBarcodes === 'function') {
+                    window.regenerateQrCodesAndBarcodes(canvas, objs1);
                 }
-                canvas.renderAll();
-            })
-        }
-        if (recordObjs1 && recordObjs1[step.val]) {
-            objs1 = JSON.parse(recordObjs1[step.val])
-        objs = objs1
+                // 调用状态恢复函数
+                if (typeof window.onStateRestored === 'function') {
+                    window.onStateRestored();
+                }
+                window._isApplyingHistory = false;
+            });
         }
     } else if ($('#back_side').hasClass('ui-button-active')) {
         // 使用 recordJson2 和 recordObjs2
+        if (recordObjs2 && recordObjs2[step.val]) {
+            objs2 = JSON.parse(recordObjs2[step.val]);
+            objs = objs2;
+            // 同步更新 window 变量
+            window.objs2 = objs2;
+            window.objs = objs;
+        }
+        
         if (recordJson2 && recordJson2[step.val]) {
+            window._isApplyingHistory = true;
             canvas.loadFromJSON(recordJson2[step.val], function() {
                 // 加载后解锁所有对象（背景除外）
                 if (typeof window.unlockAllObjects === 'function') {
                     window.unlockAllObjects(canvas);
                 }
-                // 加载后更新列表和图标显示
-                if (typeof window.updateList === 'function') {
-                    window.updateList();
+                // 重新生成二维码和条码（因为它们需要根据 objs 数据动态生成）
+                if (typeof window.regenerateQrCodesAndBarcodes === 'function') {
+                    window.regenerateQrCodesAndBarcodes(canvas, objs2);
                 }
-                canvas.renderAll();
-            })
-        }
-        if (recordObjs2 && recordObjs2[step.val]) {
-            objs2 = JSON.parse(recordObjs2[step.val])
-        objs = objs2
+                // 调用状态恢复函数
+                if (typeof window.onStateRestored === 'function') {
+                    window.onStateRestored();
+                }
+                window._isApplyingHistory = false;
+            });
         }
     }
-
-    background_image = canvas.getObjects()[0]
-    canvas.renderAll()
-    //recordState();
-    if (typeof window.updateList === 'function') {
-        window.updateList();
-    }
-
-    selectObj(-1)
-
-    $('#base_control').hide()
-    $('#line_control').hide()
-    $('#pic_control').hide()
-    $("#set_bg").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()
 })
 $('#next').click(function () {
+    // 正在应用历史（撤销/重做）时，直接忽略新的点击，防止并发操作
+    if (window._isApplyingHistory) {
+        return;
+    }
     //撤销一次撤销操作
     // 根据当前是正面还是背面检查对应的 recordObjs 长度
+    let maxLen;
     if ($('#front_side').hasClass('ui-button-active')) {
-        if (step.val >= recordObjs1.length - 1) {
+        maxLen = recordObjs1 ? recordObjs1.length : 0;
+        if (step.val >= maxLen - 1) {
         return
         }
     } else if ($('#back_side').hasClass('ui-button-active')) {
-        if (step.val >= recordObjs2.length - 1) {
+        maxLen = recordObjs2 ? recordObjs2.length : 0;
+        if (step.val >= maxLen - 1) {
             return
         }
+    } else {
+        return;
     }
 
     ++step.val
+    
     if ($('#front_side').hasClass('ui-button-active')) {
         // 使用 recordJson1 和 recordObjs1
+        if (recordObjs1 && recordObjs1[step.val]) {
+            objs1 = JSON.parse(recordObjs1[step.val]);
+            objs = objs1;
+            // 同步更新 window 变量
+            window.objs1 = objs1;
+            window.objs = objs;
+        }
+        
         if (recordJson1 && recordJson1[step.val]) {
+            window._isApplyingHistory = true;
             canvas.loadFromJSON(recordJson1[step.val], function() {
                 // 加载后解锁所有对象（背景除外）
                 if (typeof window.unlockAllObjects === 'function') {
                     window.unlockAllObjects(canvas);
                 }
-                // 加载后更新列表和图标显示
-                if (typeof window.updateList === 'function') {
-                    window.updateList();
+                // 重新生成二维码和条码（因为它们需要根据 objs 数据动态生成）
+                if (typeof window.regenerateQrCodesAndBarcodes === 'function') {
+                    window.regenerateQrCodesAndBarcodes(canvas, objs1);
                 }
-                canvas.renderAll();
-            })
-        }
-        if (recordObjs1 && recordObjs1[step.val]) {
-            objs1 = JSON.parse(recordObjs1[step.val])
-        objs = objs1
+                // 调用状态恢复函数
+                if (typeof window.onStateRestored === 'function') {
+                    window.onStateRestored();
+                }
+                window._isApplyingHistory = false;
+            });
         }
     } else if ($('#back_side').hasClass('ui-button-active')) {
         // 使用 recordJson2 和 recordObjs2
+        if (recordObjs2 && recordObjs2[step.val]) {
+            objs2 = JSON.parse(recordObjs2[step.val]);
+            objs = objs2;
+            // 同步更新 window 变量
+            window.objs2 = objs2;
+            window.objs = objs;
+        }
+        
         if (recordJson2 && recordJson2[step.val]) {
+            window._isApplyingHistory = true;
             canvas.loadFromJSON(recordJson2[step.val], function() {
                 // 加载后解锁所有对象（背景除外）
                 if (typeof window.unlockAllObjects === 'function') {
                     window.unlockAllObjects(canvas);
                 }
-                // 加载后更新列表和图标显示
-                if (typeof window.updateList === 'function') {
-                    window.updateList();
+                // 重新生成二维码和条码（因为它们需要根据 objs 数据动态生成）
+                if (typeof window.regenerateQrCodesAndBarcodes === 'function') {
+                    window.regenerateQrCodesAndBarcodes(canvas, objs2);
                 }
-                canvas.renderAll();
-            })
+                // 调用状态恢复函数
+                if (typeof window.onStateRestored === 'function') {
+                    window.onStateRestored();
+                }
+                window._isApplyingHistory = false;
+            });
         }
-        if (recordObjs2 && recordObjs2[step.val]) {
-            objs2 = JSON.parse(recordObjs2[step.val])
-        objs = objs2
-        }
-    }
-    background_image = canvas.getObjects()[0]
-    canvas.renderAll()
-    selectObj(-1)
-
-    $('#base_control').hide()
-    $('#line_control').hide()
-    $('#pic_control').hide()
-    $("#set_bg").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()
-    if (typeof window.updateList === 'function') {
-        window.updateList();
     }
 })
 $('#clean').click(function () {
@@ -1316,8 +1273,9 @@ $('#circle_stroke_transparent').click(function () {
 // cleanupSrcFields 函数已在 output.js 中定义
 
 function saveAs(op1, callback) {
-    let j = canvas1.toJSON(['selectable', 'hoverable', 'hoverCursor', 'text', 'fontStyle', 'fontWeight', 'underline'])
-    let b = canvas2.toJSON(['selectable', 'hoverable', 'hoverCursor', 'text', 'fontStyle', 'fontWeight', 'underline'])
+    const props = window.TO_JSON_PROPERTIES || ['selectable', 'hoverable', 'hoverCursor', 'text', 'fontStyle', 'fontWeight', 'underline', 'evented', 'linethrough', 'textBackgroundColor', 'diameter', 'flipped'];
+    let j = canvas1.toJSON(props)
+    let b = canvas2.toJSON(props)
 
     // 清理不需要的 src 字段（使用 window.cleanupSrcFields，在 output.js 中定义）
     if (typeof window.cleanupSrcFields === 'function') {
@@ -1464,7 +1422,7 @@ function addBackground() {
             //pre_objs1.push(JSON.stringify(objs1));
 
             recordObjs1.push(JSON.stringify(objs1))
-            const props = window.TO_JSON_PROPERTIES || ['selectable', 'hoverable', 'hoverCursor', 'text', 'fontStyle', 'fontWeight', 'underline', 'evented'];
+            const props = window.TO_JSON_PROPERTIES || ['selectable', 'hoverable', 'hoverCursor', 'text', 'fontStyle', 'fontWeight', 'underline', 'evented', 'linethrough', 'textBackgroundColor', 'diameter', 'flipped'];
             recordJson1.push(canvas1.toJSON(props))
         })
         // 类型改变
@@ -1483,7 +1441,7 @@ function addBackground() {
                 //pre_objs2.push(JSON.stringify(objs2));
 
                 recordObjs2.push(JSON.stringify(objs2))
-                const props = window.TO_JSON_PROPERTIES || ['selectable', 'hoverable', 'hoverCursor', 'text', 'fontStyle', 'fontWeight', 'underline', 'evented'];
+                const props = window.TO_JSON_PROPERTIES || ['selectable', 'hoverable', 'hoverCursor', 'text', 'fontStyle', 'fontWeight', 'underline', 'evented', 'linethrough', 'textBackgroundColor', 'diameter', 'flipped'];
                 recordJson2.push(canvas2.toJSON(props))
 
                 let file = GetFile().get('file')
@@ -1635,6 +1593,7 @@ function selectOutPic(target, index) {
 }
 
 function addText(pointer) {
+    // 设置默认字号为30px（像素值），这样显示的字号约为 30 * 72 / 300 = 7.2pt
     let text = new fabric.IText('TEXT', {
         //源：文本
         left: pointer.x,
@@ -1643,6 +1602,7 @@ function addText(pointer) {
         textBackgroundColor: '',
         fontStyle: 'normal',
         fontWeight: 'normal',
+        fontSize: 30,
         underline: false,
         linethrough: false,
         fontFamily: 'Arial'
@@ -2405,7 +2365,8 @@ $("#circle_text_back_color").bind('input propertychange', function () {
 })
 $("#circle_text_text").bind('input propertychange', function () {
     let val = $("#circle_text_text").val().trim()
-    canvas.getActiveObject().set("text", ` ${val} `);
+    // 有内容时不加首行缩进（前面的空格），只保留后面的空格
+    canvas.getActiveObject().set("text", val ? `${val} ` : ` ${val} `);
     canvas.renderAll();
     if (typeof window.updateList === 'function') {
         window.updateList();
@@ -2448,7 +2409,8 @@ $("#out_text_size").bind('input propertychange', function () {
 })
 $('#out_text_text').bind('input propertychange', function () {
     let val = $("#out_text_text").val().trim()
-    canvas.getActiveObject().set("text", ` ${val} `);
+    // 有内容时不加首行缩进（前面的空格），只保留后面的空格
+    canvas.getActiveObject().set("text", val ? `${val} ` : ` ${val} `);
     canvas.renderAll()
     if (typeof window.updateList === 'function') {
         window.updateList();
@@ -2565,7 +2527,8 @@ $('#line_dist').bind('input propertychange', function () {
 })
 $('#text_text').bind('input propertychange', function () {
     let val = $("#text_text").val().trim()
-    canvas.getActiveObject().set("text", ` ${val} `);
+    // 有内容时不加首行缩进（前面的空格），只保留后面的空格
+    canvas.getActiveObject().set("text", val ? `${val} ` : ` ${val} `);
     canvas.renderAll()
     if (typeof window.updateList === 'function') {
         window.updateList();