调整优化

lib/design2/core.js

@@ -425,17 +425,17 @@ function initRulers() {
     function createFabricGuide(type, domX, domY) {
         // domX 和 domY 是相对于 canvas-wrapper 的坐标
         // 需要转换为相对于 canvas 的坐标，然后再转换为 Fabric 画布坐标
-        
+
         // 获取 canvas 相对于 canvas-wrapper 的位置
         let canvas1El = $('#canvas1');
         let canvasPosition = canvas1El.position();
         let canvasMarginLeft = parseFloat(canvas1El.css('margin-left')) || 0;
         let canvasMarginTop = parseFloat(canvas1El.css('margin-top')) || 0;
-        
+
         // 计算相对于 canvas 的坐标（减去 canvas 在 wrapper 中的位置和 margin）
         let relX = domX - canvasPosition.left - canvasMarginLeft;
         let relY = domY - canvasPosition.top - canvasMarginTop;
-        
+
         // 转为 Fabric 坐标 (除以 zoom)
         let canvasX = relX / zoom;
         let canvasY = relY / zoom;
@@ -555,22 +555,18 @@ function selectObject(target, index) {
 function selectPic(target, index) {
     // 检查是否有选中对象，如果没有则直接返回
     if (!canvas || !canvas.getActiveObject()) return;
-    
+
     $("#pic_control").show();
     $("#set_bg").show();
     let activeObj = canvas.getActiveObject();
-    
-    // 检查对象是否被锁定或设为背景（索引0且已锁定）
-    let idx = getIndex(activeObj, canvas);
-    if (idx === 0) {
-        // 如果是背景图且已锁定，不应该显示图片控件
-        if (activeObj.get('lockMovementX') === true || activeObj.get('selectable') === false) {
-            canvas.discardActiveObject();
-            canvas.renderAll();
-            return;
-        }
+
+    // 检查对象是否被锁定
+    if (isObjectLocked(activeObj)) {
+        canvas.discardActiveObject();
+        canvas.renderAll();
+        return;
     }
-    
+
     if (typeof pic_op !== 'undefined' && pic_op && typeof pic_op.setValue === 'function') {
         pic_op.setValue(100 - (activeObj.get("opacity") * 100));
     } else {
@@ -656,44 +652,48 @@ function selectText(target, index) {
 }
 
 function selectCircleText(target, index) {
-    let idx = getIndex(canvas.getActiveObject(), canvas);
+    const activeObj = target || canvas.getActiveObject();
+    if (!activeObj) return;
+    
+    let idx = getIndex(activeObj);
     $("#circle_text_control").show();
-    $("#circle_text_color").val(canvas.getActiveObject().get("fill"));
-    $("#circle_text_back_color").val(canvas.getActiveObject().get("textBackgroundColor") == "" ? '#ffffff' : canvas.getActiveObject().get("textBackgroundColor"));
-    if (typeof circle_text_size !== 'undefined' && circle_text_size.setValue) {
-        circle_text_size_updating = true; // 设置标志位
-        circle_text_size.setValue(canvas.getActiveObject().get("fontSize"));
-        circle_text_size_updating = false; // 清除标志位
-    } else {
-        $("#circle_text_size").next().children(".layui-slider-bar").css("width", ((canvas.getActiveObject().get("fontSize") - 10) / (120 - 10)) * 100 + "%");
-        $("#circle_text_size").next().children(".layui-slider-handle").css("left", ((canvas.getActiveObject().get("fontSize") - 10) / (120 - 10)) * 100 + "%");
+    $("#circle_text_color").val(activeObj.get("fill"));
+    $("#circle_text_back_color").val(activeObj.get("textBackgroundColor") == "" ? '#ffffff' : activeObj.get("textBackgroundColor"));
+    
+    if (typeof circle_text_size !== 'undefined' && circle_text_size && typeof circle_text_size.setValue === 'function') {
+        if (typeof circle_text_size_updating !== 'undefined') {
+            circle_text_size_updating = true;
+        }
+        circle_text_size.setValue(activeObj.get("fontSize") - 10);
+        if (typeof circle_text_size_updating !== 'undefined') {
+            circle_text_size_updating = false;
+        }
     }
-    if (typeof circle_text_diameter !== 'undefined' && circle_text_diameter.setValue) {
-        circle_text_diameter.setValue(canvas.getActiveObject().get("diameter"));
-    } else {
-        $("#circle_text_diameter").next().children(".layui-slider-bar").css("width", ((canvas.getActiveObject().get("diameter") - 50) / (1100 - 50)) * 100 + "%");
-        $("#circle_text_diameter").next().children(".layui-slider-handle").css("left", ((canvas.getActiveObject().get("diameter") - 50) / (1100 - 50)) * 100 + "%");
+    
+    if (typeof circle_text_diameter !== 'undefined' && circle_text_diameter && typeof circle_text_diameter.setValue === 'function') {
+        circle_text_diameter.setValue(activeObj.get("diameter") - 50);
     }
+    
     $("#circle_text_center").prop("checked", objs[idx - 1].circleCenter ? 'checked' : '');
-    $("#circle_text_text").val(canvas.getActiveObject().get("text"));
-    $("#circle_text_font_family").val(canvas.getActiveObject().get("fontFamily"));
+    $("#circle_text_text").val(activeObj.get("text"));
+    $("#circle_text_font_family").val(activeObj.get("fontFamily"));
 
-    if (canvas.getActiveObject().get("underline") == true) {
+    if (activeObj.get("underline") == true) {
         $("#circle_text_underline").addClass("ui-radio-acitve")
     } else {
         $("#circle_text_underline").removeClass("ui-radio-acitve")
     }
-    if (canvas.getActiveObject().get("fontWeight") == "bold") {
+    if (activeObj.get("fontWeight") == "bold") {
         $("#circle_text_bold").addClass("ui-radio-acitve")
     } else {
         $("#circle_text_bold").removeClass("ui-radio-acitve")
     }
-    if (canvas.getActiveObject().get("fontStyle") == "italic") {
+    if (activeObj.get("fontStyle") == "italic") {
         $("#circle_text_italics").addClass("ui-radio-acitve")
     } else {
         $("#circle_text_italics").removeClass("ui-radio-acitve")
     }
-    if (canvas.getActiveObject().get("linethrough") == true) {
+    if (activeObj.get("linethrough") == true) {
         $("#circle_text_linethrough").addClass("ui-radio-acitve")
     } else {
         $("#circle_text_linethrough").removeClass("ui-radio-acitve")
@@ -931,18 +931,15 @@ function handleObjectSelected(e) {
 
     // 3. 获取索引
     let i = getIndex(select_obj, canvas);
-    
-    // 检查对象是否被锁定或设为背景（索引0且已锁定）
-    if (i === 0) {
-        if (select_obj.get('lockMovementX') === true || select_obj.get('selectable') === false) {
-            // 如果是背景图且已锁定，取消选中
-            canvas.discardActiveObject();
-            canvas.renderAll();
-            $("#base_control, #line_control, #pic_control, #out_pic_control, #text_control, #circle_text_control, #out_text_control, #rect_control, #circle_control, #counter_control, #qrcode_Controll, #barcode_controll").hide();
-            $("#component_type").text(language_str("bg"));
-            selectObj(-1, true);
-            return;
-        }
+
+    // 如果不是通过对象列表选中的，且对象被锁定，则取消选中
+    if (!window._selectingFromList && isObjectLocked(select_obj)) {
+        canvas.discardActiveObject();
+        canvas.renderAll();
+        $("#base_control, #line_control, #pic_control, #out_pic_control, #text_control, #circle_text_control, #out_text_control, #rect_control, #circle_control, #counter_control, #qrcode_Controll, #barcode_controll").hide();
+        $("#component_type").text(language_str("bg"));
+        selectObj(-1, true);
+        return;
     }
 
     if (i != 0) {
@@ -1026,6 +1023,61 @@ function handleObjectMoving(e) {
     updateControls();
 }
 
+// 辅助函数：检查对象是否被锁定
+// 只有当 lockMovementX 为 true 时才认为对象被锁定
+// selectable 为 false 可能是其他原因（如背景图），所以只检查 lockMovementX
+function isObjectLocked(obj) {
+    if (!obj) return false;
+    // 主要检查 lockMovementX，这是锁定的主要标志
+    return obj.get('lockMovementX') === true;
+}
+// 暴露到全局作用域，确保其他模块可以访问
+window.isObjectLocked = isObjectLocked;
+
+// 统一的 toJSON 属性列表，不包含锁定相关属性（锁定状态不应被保存）
+const TO_JSON_PROPERTIES = [
+    "selectable", "hoverable", "hoverCursor", "text", "fontStyle", "fontWeight", "underline", "evented"
+];
+// 暴露到全局作用域
+window.TO_JSON_PROPERTIES = TO_JSON_PROPERTIES;
+
+// 辅助函数：解锁所有对象（加载时使用）
+function unlockAllObjects(canvas) {
+    if (!canvas) return;
+    const objects = canvas.getObjects();
+    objects.forEach((obj, index) => {
+        // 背景对象（索引0）保持锁定状态
+        if (index === 0) {
+            obj.set({
+                lockMovementX: true,
+                lockMovementY: true,
+                lockRotation: true,
+                lockScalingX: true,
+                lockScalingY: true,
+                lockSkewingX: true,
+                lockSkewingY: true,
+                selectable: false,
+                evented: false
+            });
+        } else {
+            // 其他对象默认解锁
+            obj.set({
+                lockMovementX: false,
+                lockMovementY: false,
+                lockRotation: false,
+                lockScalingX: false,
+                lockScalingY: false,
+                lockSkewingX: false,
+                lockSkewingY: false,
+                selectable: true,
+                evented: true
+            });
+        }
+    });
+}
+// 暴露到全局作用域
+window.unlockAllObjects = unlockAllObjects;
+
 // 将 handleObjectSelected 附加到 window 对象，确保全局可访问
 window.handleObjectSelected = handleObjectSelected;
 
@@ -1087,6 +1139,16 @@ function initCanvasEvents() {
             objs = (currentCanvas === canvas1) ? objs1 : objs2;
             handleObjectSelected(e);
         });
+        // 阻止被锁定的对象被框选选中（只过滤被锁定的对象，保留未锁定的对象）
+        currentCanvas.on('before:selection:created', (e) => {
+            if (!e.targets || e.targets.length === 0) return;
+            // 过滤掉被锁定的对象，保留辅助线和未锁定的对象
+            e.targets = e.targets.filter(target => {
+                if (target.isGuideLine) return true; // 保留辅助线
+                return !isObjectLocked(target); // 移除被锁定的对象，保留未锁定的对象
+            });
+        });
+
         // 添加 selection 事件以确保对象选中时正确显示属性面板
         currentCanvas.on('selection:created', (e) => {
             canvas = currentCanvas;
@@ -1101,19 +1163,15 @@ function initCanvasEvents() {
         currentCanvas.on('object:selected', (e) => {
             canvas = currentCanvas;
             objs = (currentCanvas === canvas1) ? objs1 : objs2;
-            
-            // 阻止背景图（索引0）被选中（如果已锁定）
-            let selectedObj = e.target;
-            let idx = getIndex(selectedObj, currentCanvas);
-            if (idx === 0) {
-                let bgObj = currentCanvas.getObjects()[0];
-                if (bgObj && (bgObj.get('lockMovementX') === true || bgObj.get('selectable') === false)) {
-                    currentCanvas.discardActiveObject();
-                    currentCanvas.renderAll();
-                    return;
-                }
+
+            // 如果不是通过对象列表选中的，且对象被锁定，则取消选中
+            // 注意：只有真正被锁定的对象才会被取消选中，未锁定的对象应该正常选中
+            if (!window._selectingFromList && e.target && isObjectLocked(e.target)) {
+                currentCanvas.discardActiveObject();
+                currentCanvas.renderAll();
+                return;
             }
-            
+
             handleObjectSelected(e);
             // 更新对象列表以同步锁状态
             if (typeof window.updateList === 'function') {
@@ -1157,7 +1215,6 @@ function initCanvasEvents() {
             let objData = objs[idx - 1];
             // 安全检查：确保 objData 存在且有 type 属性
             if (!objData || typeof objData.type === 'undefined') {
-                console.warn('objData is undefined or missing type at index', idx - 1);
                 return;
             }
             let target = event.target;
@@ -1228,10 +1285,10 @@ window.updateList = function updateList() {
             let canvasObj = canvas.getObjects()[i + 1];
             isLocked = canvasObj.get('lockMovementX') === true;
         }
-        
+
         // 锁定状态图标
-        const lockIcon = isLocked ? 
-            '<img src="public/images/lock20.png" style="width:14px; height:14px; margin-left:5px; opacity:0.7;" title="已锁定">' : 
+        const lockIcon = isLocked ?
+            '<img src="public/images/lock20.png" style="width:14px; height:14px; margin-left:5px; opacity:0.7;" title="已锁定">' :
             '<img src="public/images/unlock20.png" style="width:14px; height:14px; margin-left:5px; opacity:0.5;" title="未锁定">';
 
         // 组装 HTML
@@ -1257,6 +1314,9 @@ window.updateList = function updateList() {
     });
 }
 
+// 标记是否通过对象列表选中（用于区分鼠标点击和列表点击）
+window._selectingFromList = false;
+
 // 将 selectObj 附加到 window 对象，确保全局可访问
 window.selectObj = function selectObj(objIndices, isFromCanvas = false) {
     let indicesArray = (Array.isArray(objIndices)) ? objIndices : ((typeof objIndices === 'number' && objIndices >= 0) ? [objIndices] : []);
@@ -1285,8 +1345,39 @@ window.selectObj = function selectObj(objIndices, isFromCanvas = false) {
     if (!isFromCanvas && indicesArray.length === 1) {
         let target = canvas.getObjects()[indicesArray[0] + 1];
         if (target) {
+            // 检查对象是否被锁定
+            let isLocked = isObjectLocked(target);
+
+            // 设置标志位，表示这是通过对象列表选中的（无论是否锁定）
+            window._selectingFromList = true;
+
+            // 如果被锁定，临时设置 selectable 和 evented 为 true，以便能够选中
+            if (isLocked) {
+                target.set({
+                    selectable: true,
+                    evented: true
+                });
+            }
+
             canvas.setActiveObject(target);
             canvas.requestRenderAll();
+
+            // 如果对象被锁定，选中后立即恢复锁定状态（但保持选中状态）
+            if (isLocked) {
+                setTimeout(() => {
+                    target.set({
+                        selectable: false,
+                        evented: false
+                    });
+                    canvas.requestRenderAll();
+                }, 0);
+            }
+
+            // 清除标志位（延迟清除，确保事件处理完成）
+            setTimeout(() => {
+                window._selectingFromList = false;
+            }, 10);
+
             handleObjectSelected();
         }
     }
@@ -1306,7 +1397,8 @@ window.recordState = function recordState() {
         currentRecordJson.pop();
     }
     currentRecordObjs.push(JSON.stringify(currentObjs))
-    let j = currentCanvas.toJSON(["selectable", "hoverable", "hoverCursor", "text", "fontStyle", "fontWeight", "underline"]);
+    // 保存所有锁定相关的属性，确保锁定状态可以正确恢复
+    let j = currentCanvas.toJSON(TO_JSON_PROPERTIES);
     j.objects[0].hoverCursor = "default";
     currentRecordJson.push(j);
 };
@@ -1321,7 +1413,6 @@ window.getIndex = function getIndex(target, _canvas = null) {
     // 使用 window.canvas 作为默认值，确保在 eval() 执行时也能访问
     const currentCanvas = _canvas || window.canvas || canvas;
     if (!currentCanvas) {
-        console.error('getIndex: canvas is undefined');
         return 0;
     }
     temp_objs = currentCanvas.getObjects();
@@ -1487,7 +1578,7 @@ function addBackground() {
                 canvas2.renderAll()
 
                 recordObjs2.push(JSON.stringify(objs2))
-                recordJson2.push(canvas2.toJSON(['selectable', 'hoverable', 'hoverCursor', 'text', 'fontStyle', 'fontWeight', 'underline']))
+                recordJson2.push(canvas2.toJSON(TO_JSON_PROPERTIES))
 
                 let file = GetFile().get('file')
                 if (file && file != 'empty') {
@@ -1909,12 +2000,16 @@ var circle_text_size = slider.render({
     max: 120,
     value: 50,
     change: function (value) {
-        if (circle_text_size_updating) return; // 如果正在更新slider，跳过change事件
-        if (canvas.getActiveObject()) {
+        if (circle_text_size_updating) return;
+        if (canvas && canvas.getActiveObject && canvas.getActiveObject()) {
             canvas.getActiveObject().set('fontSize', value);
             canvas.renderAll();
-            updateControls();
-            recordState();
+            if (typeof updateControls === 'function') {
+                updateControls();
+            }
+            if (typeof recordState === 'function') {
+                recordState();
+            }
         }
     }
 });
@@ -1925,11 +2020,15 @@ var circle_text_diameter = slider.render({
     max: 1100,
     value: 500,
     change: function (value) {
-        if (canvas.getActiveObject()) {
+        if (canvas && canvas.getActiveObject && canvas.getActiveObject()) {
             canvas.getActiveObject().set('diameter', value);
             canvas.renderAll();
-            updateControls();
-            recordState();
+            if (typeof updateControls === 'function') {
+                updateControls();
+            }
+            if (typeof recordState === 'function') {
+                recordState();
+            }
         }
     }
 });
@@ -2030,17 +2129,14 @@ window.savePdf = async function savePdf(buffer) {
     });
 
     if (canceled) {
-        console.log('用户取消了保存操作');
         return;
     }
 
     // 将Buffer写入PDF文件到用户选择的路径
     fs.writeFile(filePath, buffer, (err) => {
         if (err) {
-            console.error('写入文件失败:', err);
         } else {
             layer.msg(language_str("saveSucc") + filePath);//'保存成功至'
-            console.log('PDF文件已保存至:', filePath);
         }
     });
 };