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; // 兼容三端

    // 快捷键处理（在输入框或文本区域中时不触发，除了删除相关的）
    // 注意：大部分快捷键已在 core.js 中统一处理，此处只保留 ui.js 特有的快捷键
    // 已移除的重复快捷键：CTRL/CMD+N/O/S/Z/Y/C/V/SHIFT+DEL/DEL（已在 core.js 中处理）
    if (!_inputEdit && !_textEdit) {
        // ui.js 特有的快捷键可以在这里添加
    }
    // 兼容三端的 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
        }
        if (canvas.getActiveObject()) {
            let x = canvas.getActiveObject().get('left')
            x += v
            canvas.getActiveObject().set('left', x)
            canvas.renderAll()
            recordState()
            updateControls()
        }
    }
    if (event.keyCode == 38) {
        //up
        let v = -1
        if (_keyctrl || event.ctrlKey || event.metaKey) {
            v = -5
        }
        if (canvas.getActiveObject()) {
            let y = canvas.getActiveObject().get('top')
            y += v
            canvas.getActiveObject().set('top', y)
            canvas.renderAll()
            recordState()
            updateControls()
        }
    }
    if (event.keyCode == 39) {
        //right
        let v = 1
        if (_keyctrl || event.ctrlKey || event.metaKey) {
            v = 5
        }
        if (canvas.getActiveObject()) {
            let x = canvas.getActiveObject().get('left')
            x += v
            canvas.getActiveObject().set('left', x)
            canvas.renderAll()
            recordState()
            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 已在 design2.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((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
    }
    var sf = document.getElementById('source_front')
    if (!sf) return
    sf.onload = function () {
        if (typeof window.soonDesign2ScaleBgSources === 'function') {
            window.soonDesign2ScaleBgSources()
        }
        canvas1.requestRenderAll()
        canvas2.requestRenderAll()
    }
    sf.onerror = sf.onload
    sf.src = soonAsset('front_bg' + bg_version + '_2.png')
})
$('#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
    // 同步到 window 对象，确保 recordState 使用正确的数组
    window.recordObjs = recordObjs1
    window.recordJson = recordJson1
    window.step = step1
    if (typeof window.updateList === 'function') {
        window.updateList();
    }

    $('#line_control').hide()
    $('#base_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()
    $('#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
    // 同步到 window 对象，确保 recordState 使用正确的数组
    window.recordObjs = recordObjs2
    window.recordJson = recordJson2
    window.step = step2
    if (typeof window.updateList === 'function') {
        window.updateList();
    }
    $('#line_control').hide()
    $('#base_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()
    $('#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()
        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()
    recordState()
})
$('#bottom_alignment').click(function () {
    let _objs = canvas.getActiveObjects()
    if (_objs.length == 1) {
        //只选中了一个，对齐到背景底部
        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()
        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()
    recordState()
})
$('#center_y_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 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()
        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()
    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()
        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()
    recordState()
})
$('#right_alignment').click(function () {
    let _objs = canvas.getActiveObjects()
    if (_objs.length == 1) {
        //只选中了一个，对齐到背景右边缘
        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()
        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)
    }
    canvas.discardActiveObject()
    let sel = new fabric.ActiveSelection(groupItems, {
        canvas: canvas
    })
    canvas.setActiveObject(sel)
    canvas.requestRenderAll()
    canvas.renderAll()
    recordState()
})
$('#center_x_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 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()
        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()
    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);

        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
        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(canvas.getActiveObject())
    const scaleX = 1012 / obj.width
    const scaleY = 648 / 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(1012)
    $('#text_h').val(648)
    $('#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(canvas.getActiveObject())
    canvas.bringForward(canvas.getActiveObject())
    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);

    recordState()
    if (typeof window.updateList === 'function') {
        window.updateList();
    }
    if (typeof window.selectObj === 'function') {
        window.selectObj(0);
    }
})
$('#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);
                }
                // 重新生成二维码和条码（因为它们需要根据 objs 数据动态生成）
                if (typeof window.regenerateQrCodesAndBarcodes === 'function') {
                    window.regenerateQrCodesAndBarcodes(canvas, 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);
                }
                // 重新生成二维码和条码（因为它们需要根据 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;
    }
    //撤销一次撤销操作
    // 根据当前是正面还是背面检查对应的 recordObjs 长度
    let maxLen;
    if ($('#front_side').hasClass('ui-button-active')) {
        maxLen = recordObjs1 ? recordObjs1.length : 0;
        if (step.val >= maxLen - 1) {
            return
        }
    } else if ($('#back_side').hasClass('ui-button-active')) {
        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);
                }
                // 重新生成二维码和条码（因为它们需要根据 objs 数据动态生成）
                if (typeof window.regenerateQrCodesAndBarcodes === 'function') {
                    window.regenerateQrCodesAndBarcodes(canvas, 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);
                }
                // 重新生成二维码和条码（因为它们需要根据 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();
    }
    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()
    recordState()
})
$('#vertical_obj').click(function () {
    let obj = canvas.getActiveObject()
    obj.set('flipY', !obj.get('flipY'))
    canvas.renderAll()
    updateControls()
    recordState()
})
$('#align_obj').click(function () {
    let obj = canvas.getActiveObject()
    obj.set('flipX', !obj.get('flipX'))
    canvas.renderAll()
    updateControls()
    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')
    }
    recordState()
    canvas.renderAll()
})
$('#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')
    }
    recordState()
    canvas.renderAll()
})
$('#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')
    }
    recordState()
    canvas.renderAll()
})
$('#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')
    }
    recordState()
    canvas.renderAll()
})
$("#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")
    }
    recordState();
    canvas.renderAll();
});
$("#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")
    }
    recordState();
    canvas.renderAll();
});
$('#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'
    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'
    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'
    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')
    }
    recordState()
    canvas.renderAll()
})
$('#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')
    }
    recordState()
    canvas.renderAll()
})
$('#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')
    }
    recordState()
    canvas.renderAll()
})
$('#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')
    }
    recordState()
    canvas.renderAll()
})
$('#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();
    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()
})
$('#circle_text_back_transparent').click(function () {
    canvas.getActiveObject().set('textBackgroundColor', '')
    $('#circle_text_back_color').val('#ffffff')
    canvas.renderAll()
})
$('#out_text_back_transparent').click(function () {
    canvas.getActiveObject().set('textBackgroundColor', '')
    $('#out_text_back_color').val('#ffffff')
    canvas.renderAll()
})
$('#rect_transparent').click(function () {
    canvas.getActiveObject().set('fill', '')
    $('#rect_color').val('#ffffff')
    canvas.renderAll()
})
$('#rect_stroke_transparent').click(function () {
    canvas.getActiveObject().set('stroke', '')
    $('#rect_stroke').val('#ffffff')
    canvas.renderAll()
})
$('#circle_transparent').click(function () {
    canvas.getActiveObject().set('fill', '')
    $('#circle_color').val('#ffffff')
    canvas.renderAll()
})
$('#circle_stroke_transparent').click(function () {
    canvas.getActiveObject().set('stroke', '')
    $('#circle_stroke').val('#ffffff')
    canvas.renderAll()
})
// 清理不需要的 src 字段（保留自定义图片的 src）
// 复制
$("#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')
    //let xs = [], ys = [];
    return [_obj.get('left'), _obj.get('top')]
}
$('#open').click(function () {
    if (step.val == 0) {
        OpenDialog();
        return;
    }
    layer.confirm(
        language_str('whetherSave'),
        function (index) {
            if (typeof window.output === 'function') {
                window.output(OpenDialog);
            }
            layer.close(index);
        },
        function (index) {
            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: '请选择文件', 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 == 1 && window.platformBridge && window.platformBridge.openDesignPage) {
                        window.platformBridge.openDesignPage(fileKey, 1);
                        return;
                    }
                    if (typeof window.openFile === 'function') window.openFile(fileKey, j);
                }
                function importAndOpen(j, fileName) {
                    if (typeof window.soonPutSoonSession === 'function') {
                        var localKey = window.soonPutSoonSession(j, fileName || 'design.soon');
                        if (!localKey) return;
                        if (typeof window.soonScheduleCloudImport === 'function') {
                            window.soonScheduleCloudImport(localKey, fileName || 'design.soon');
                        }
                        openWithKey(localKey, j);
                    }
                }
                if (file && file.text) {
                    file.text().then(function(t) {
                        importAndOpen(JSON.parse(t), file.name || 'design.soon');
                    }).catch(function() {});
                    return;
                }
                var filePath = result.filePaths && result.filePaths[0];
                if (!filePath) return;
                var fs = typeof require !== 'undefined' ? require('fs') : null;
                if (!fs) return;
                importAndOpen(JSON.parse(fs.readFileSync(filePath).toString()), filePath);
            })
            .catch(function(err) {});
    }
})
function goFirstPage() {
    if (window.platformBridge && window.platformBridge.openFirstPage) window.platformBridge.openFirstPage();
    else if (ipcRenderer && ipcRenderer.send) ipcRenderer.send('open-first-page');
}
$('#new').click(function () {
    if (step.val == 0) {
        goFirstPage();
        return;
    }
    layer.confirm(
        language_str('whetherSave'),
        function (index) {
            if (typeof window.output === 'function') {
                window.output(goFirstPage);
            }
            layer.close(index);
        },
        function (index) {
            goFirstPage();
        }
    )
})
function chagneTitle() { }
function selectObject(target, index) {
    updateControls()

    $('#base_control').show()
    //$("#text_x").val((target.left - background_image.left).toFixed(1));
}
function updateControls() {
    // 检查是否有选中对象，如果没有则直接返回
    if (!canvas || !canvas.getActiveObject()) return;

    const activeObj = canvas.getActiveObject();
    $('#text_r').val(activeObj.get('angle').toFixed(0))
    $('#text_x').val((activeObj.get('left') - background_image.left).toFixed(0))
    $('#text_y').val((activeObj.get('top') - background_image.top).toFixed(0))
    $('#text_h').val((activeObj.get('scaleY') * activeObj.get('height')).toFixed(0))
    $('#text_w').val((activeObj.get('scaleX') * activeObj.get('width')).toFixed(0))
    // 根据锁定状态显示图标（使用lockMovementX判断，因为锁定时会设置所有lock属性）
    if (activeObj.get('lockMovementX')) {
        $('#lock_img').attr('src', soonAsset('lock20.png')) //已锁定
    } else {
        $('#lock_img').attr('src', soonAsset('unlock20.png')) //未锁定
    }
}
function checkName(name) {
    //检查字段名是否重复了
    for (let item of objs1) {
        if (item.name == name) {
            return false
        }
    }
    for (let item of objs2) {
        if (item.name == name) {
            return false
        }
    }
    return true
}
function resName(pre_name) {
    //返回的是不重复的字段名
    let num = objs1.length + objs2.length - 1
    do {
        num++
    } while (!checkName(pre_name + num)) //重复了就再加1
    return pre_name + num
}
function addPic(pointer) {
    pre_add_image.left = pointer.x
    pre_add_image.top = pointer.y

    canvas.add(pre_add_image)

    objs.push({ type: 1, black: false })
    canvas.renderAll()
    if (typeof window.updateList === 'function') {
        window.updateList();
    }
    recordState()
    //OpenDialog();
}
function selectPic(target, index) {
    // 检查是否有选中对象，如果没有则直接返回
    if (!canvas || !canvas.getActiveObject()) return;

    let activeObj = canvas.getActiveObject();

    // 检查对象是否被锁定
    if (isObjectLocked(activeObj)) {
        canvas.discardActiveObject();
        canvas.renderAll();
        return;
    }

    //透明度
    $('#pic_control').show()
    $("#set_bg").show();

    // 检查 pic_op 是否存在且有 setValue 方法
    if (typeof pic_op !== 'undefined' && pic_op && typeof pic_op.setValue === 'function') {
        pic_op.setValue(100 - activeObj.get('opacity') * 100);
    } else {
        $("#pic_op").next().children(".layui-slider-bar").css("width", (1 - activeObj.get("opacity")) * 100 + "%");
        $("#pic_op").next().children(".layui-slider-handle").css("left", (1 - activeObj.get("opacity")) * 100 + "%");
    }

    // $("#pic_black").prop("checked", objs[idx-1].black ? 'checked' : '');

    $('#out_pic_control').hide()
    $('#text_control').hide()
    $("#circle_text_control").hide();
    $('#out_text_control').hide()
    $('#rect_control').hide()
    $('#circle_control').hide()
    $('#line_control').hide()
    $('#counter_control').hide()
    $('#qrcode_Controll').hide()
    $('#barcode_controll').hide()
}
function addOutPic(pointer) {
    fabric.Image.fromURL(soonAsset('outpic_extra.png'), function (image) {
        let width = canvas.getWidth()
        let height = canvas.getHeight()
        image.left = pointer.x
        image.top = pointer.y
        image.opacity = 1
        //image.on("selected",function(){//test well
        image.setSrc(image.toDataURL(), function (image) {
            canvas.add(image)
            objs.push({ type: 2, name: resName('OUT_PIC_'), black: false })
            canvas.renderAll()
            if (typeof window.updateList === 'function') {
                window.updateList();
            }
            recordState()
        })
    })
}
function selectOutPic(target, index) {
    //字段名
    $('#out_pic_control').show()
    out_pic_op.setValue(100 - canvas.getActiveObject().get('opacity') * 100)
    let idx = getIndex(canvas.getActiveObject())
    $('#out_pic_field_name').val(objs[idx - 1].name)
    // $("#out_pic_black").prop("checked", objs[idx-1].black ? 'checked' : '');

    $('#pic_control').hide()
    $("#set_bg").hide();
    $('#text_control').hide()
    $("#circle_text_control").hide();
    $('#out_text_control').hide()
    $('#rect_control').hide()
    $('#circle_control').hide()
    $('#line_control').hide()
    $('#counter_control').hide()
    $('#qrcode_Controll').hide()
    $('#barcode_controll').hide()
}

function addText(pointer) {
    // 设置默认字号为30px（像素值），这样显示的字号约为 30 * 72 / 300 = 7.2pt
    let text = new fabric.IText('TEXT', {
        //源：文本
        left: pointer.x,
        top: pointer.y,
        fill: '#000000',
        textBackgroundColor: '',
        fontStyle: 'normal',
        fontWeight: 'normal',
        fontSize: 30,
        underline: false,
        linethrough: false,
        fontFamily: 'Arial'
    })
    text.setControlVisible('ml', false)
    text.setControlVisible('mt', false)
    text.setControlVisible('mr', false)
    text.setControlVisible('mb', false)
    canvas.add(text)
    objs.push({ type: 3, black: false })
    canvas.renderAll()
    if (typeof window.updateList === 'function') {
        window.updateList();
    }
    recordState()
}
function selectText() {
    //console.log(canvas.getActiveObject().get("fontFamily"));
    $('#text_control').show()
    $('#text_color').val(canvas.getActiveObject().get('fill'))
    $('#text_back_color').val(canvas.getActiveObject().get('textBackgroundColor') == '' ? '#ffffff' : canvas.getActiveObject().get('textBackgroundColor'))
    let val = parseFloat(canvas.getActiveObject().get("fontSize")) * 72 / dpi
    if (val % 0.5 !== 0) val = Math.round(val * 2) / 2
    $("#text_size").val(val);
    $('#text_text').val(canvas.getActiveObject().get('text'))
    $('#text_font_family').val(canvas.getActiveObject().get('fontFamily'))

    if (canvas.getActiveObject().get('underline') == true) {
        $('#text_underline').addClass('ui-radio-acitve')
    } else {
        $('#text_underline').removeClass('ui-radio-acitve')
    }
    if (canvas.getActiveObject().get('fontWeight') == 'bold') {
        $('#text_bold').addClass('ui-radio-acitve')
    } else {
        $('#text_bold').removeClass('ui-radio-acitve')
    }
    if (canvas.getActiveObject().get('fontStyle') == 'italic') {
        $('#text_italics').addClass('ui-radio-acitve')
    } else {
        $('#text_italics').removeClass('ui-radio-acitve')
    }
    if (canvas.getActiveObject().get('linethrough') == true) {
        $('#text_linethrough').addClass('ui-radio-acitve')
    } else {
        $('#text_linethrough').removeClass('ui-radio-acitve')
    }
    $('#pic_control').hide()
    $("#set_bg").hide();
    $('#out_pic_control').hide()
    $("#circle_text_control").hide();
    $('#out_text_control').hide()
    $('#rect_control').hide()
    $('#circle_control').hide()
    $('#line_control').hide()
    $('#counter_control').hide()
    $('#qrcode_Controll').hide()
    $('#barcode_controll').hide()
}
function getDisdance(x1, y1, x2, y2) {
    var dx = Math.abs(x2 - x1); // 计算x轴上的距离差，并取绝对值
    var dy = Math.abs(y2 - y1); // 计算y轴上的距离差，并取绝对值
    var distance = Math.sqrt(dx * dx + dy * dy); // 应用勾股定理计算距离
    return distance;
}
function getDeg(pointer) {
    // 计算点击位置与画布中心的坐标差
    var centerX = canvas.width / 2;
    var centerY = canvas.height / 2;
    var mouseX = pointer.x;
    var mouseY = pointer.y;
    var dx = mouseX - centerX;
    var dy = mouseY - centerY;
    // 计算旋转角度（弧度）
    var angleRad = Math.atan2(dy, dx);
    // 将角度转换为度数
    var angleDeg = angleRad * (180 / Math.PI);
    if (angleDeg < 0) {
        angleDeg += 360;
    }
    angleDeg += 90
    return angleDeg
}
function addCircleText(pointer) {
    let distance = getDisdance(pointer.x, pointer.y, canvas.width / 2, canvas.height / 2)
    let angleDeg = getDeg(pointer)
    let text = new fabric.CurvedText('Circle TEXT', {//源：圆形文本
        left: pointer.x,
        top: pointer.y,
        fill: "#000000",
        textBackgroundColor: "",
        fontStyle: "normal",
        fontWeight: "normal",
        diameter: distance * 2,
        fontSize: 30,
        underline: false,
        linethrough: false,
        lockScalingX: true,
        lockScalingY: true,
        fontFamily: 'Arial',
        originX: 'center',
        originY: 'center',
        angle: angleDeg,
        flipped: pointer.y > canvas.height / 2 ? true : false
    });
    // distance =  getDisdance(pointer.x+text.width/2, pointer.y, canvas.width/2,canvas.height/2)
    text.setControlVisible("ml", false);
    text.setControlVisible("mt", false);
    text.setControlVisible("mr", false);
    text.setControlVisible("mb", false);
    canvas.add(text);
    objs.push({ type: 11, black: false, circleCenter: 0 });
    canvas.renderAll();
    if (typeof window.updateList === 'function') {
        window.updateList();
    };
    recordState();
}
function selectCircleText() {
    let idx = getIndex(canvas.getActiveObject());
    $("#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_updating !== 'undefined') {
        circle_text_size_updating = true;
    }
    circle_text_size.setValue(canvas.getActiveObject().get("fontSize"));
    if (typeof circle_text_size_updating !== 'undefined') {
        circle_text_size_updating = false;
    }
    circle_text_diameter.setValue(canvas.getActiveObject().get("diameter"));
    $("#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"));

    if (canvas.getActiveObject().get("underline") == true) {
        $("#circle_text_underline").addClass("ui-radio-acitve")
    } else {
        $("#circle_text_underline").removeClass("ui-radio-acitve")
    }
    if (canvas.getActiveObject().get("fontWeight") == "bold") {
        $("#circle_text_bold").addClass("ui-radio-acitve")
    } else {
        $("#circle_text_bold").removeClass("ui-radio-acitve")
    }
    if (canvas.getActiveObject().get("fontStyle") == "italic") {
        $("#circle_text_italics").addClass("ui-radio-acitve")
    } else {
        $("#circle_text_italics").removeClass("ui-radio-acitve")
    }
    if (canvas.getActiveObject().get("linethrough") == true) {
        $("#circle_text_linethrough").addClass("ui-radio-acitve")
    } else {
        $("#circle_text_linethrough").removeClass("ui-radio-acitve")
    }
    $("#pic_control").hide();
    $("#set_bg").hide();
    $("#rotate").hide();
    $("#out_pic_control").hide();
    $("#text_control").hide();
    $("#out_text_control").hide();
    $("#rect_control").hide();
    $("#circle_control").hide();
    $("#line_control").hide();
    $("#counter_control").hide();
    $("#qrcode_Controll").hide();
    $("#barcode_controll").hide();

}
function addOutText(pointer) {
    //MERGE_TEXT_1
    let text = new fabric.Text('MERGE TEXT', {
        //源：合成文本
        left: pointer.x,
        top: pointer.y,
        fill: '#000000',
        fontStyle: 'normal',
        fontWeight: 'normal',
        textBackgroundColor: '',
        underline: false,
        linethrough: false,
        fontFamily: 'Arial',
        textAlign: 'center'
    })

    //text.on({
    text.setControlVisible('ml', false)
    text.setControlVisible('mt', false)
    text.setControlVisible('mr', false)
    text.setControlVisible('mb', false)

    canvas.add(text)
    objs.push({ type: 4, name: resName('OUT_TEXT_'), exceed: false, autoWrap: false, fixSize: false, black: false, align: 'center' })
    canvas.renderAll()
    if (typeof window.updateList === 'function') {
        window.updateList();
    }
    recordState()
}
function selectOutText() {
    //color
    const align = canvas.getActiveObject().get('textAlign')
    if (align === 'left') {
        $('#out_left_alignment').parent().addClass('tool1')
    } else if (align === 'right') {
        $('#out_right_alignment').parent().addClass('tool1')
    } else {
        $('#out_center_alignment').parent().addClass('tool1')
    }
    $('#out_text_control').show()
    $('#out_text_color').val(canvas.getActiveObject().get('fill'))
    $('#out_text_text').val(canvas.getActiveObject().get('text'))
    let val = parseFloat(canvas.getActiveObject().get("fontSize")) * 72 / dpi
    if (val % 0.5 !== 0) val = Math.round(val * 2) / 2
    $("#out_text_size").val(val);
    $('#out_text_back_color').val(canvas.getActiveObject().get('textBackgroundColor') == '' ? '#ffffff' : canvas.getActiveObject().get('textBackgroundColor'))
    let idx = getIndex(canvas.getActiveObject())
    $('#out_text_field_name').val(objs[idx - 1].name)
    $('#out_text_font_family').val(canvas.getActiveObject().get('fontFamily'))
    $('#exceed').prop('checked', objs[idx - 1].exceed ? 'checked' : '')
    $('#autoWrap').prop('checked', objs[idx - 1].autoWrap ? 'checked' : '')
    $('#fixSize').prop('checked', objs[idx - 1].fixSize ? 'checked' : '')
    if (canvas.getActiveObject().get('underline') == true) {
        $('#out_text_underline').addClass('ui-radio-acitve')
    } else {
        $('#out_text_underline').removeClass('ui-radio-acitve')
    }
    if (canvas.getActiveObject().get('fontWeight') == 'bold') {
        $('#out_text_bold').addClass('ui-radio-acitve')
    } else {
        $('#out_text_bold').removeClass('ui-radio-acitve')
    }
    if (canvas.getActiveObject().get('fontStyle') == 'italic') {
        $('#out_text_italics').addClass('ui-radio-acitve')
    } else {
        $('#out_text_italics').removeClass('ui-radio-acitve')
    }
    if (canvas.getActiveObject().get('linethrough') == true) {
        $('#out_text_linethrough').addClass('ui-radio-acitve')
    } else {
        $('#out_text_linethrough').removeClass('ui-radio-acitve')
    }

    $('#pic_control').hide()
    $("#set_bg").hide();
    $('#out_pic_control').hide()
    $('#text_control').hide()
    $("#circle_text_control").hide();
    $('#rect_control').hide()
    $('#circle_control').hide()
    $('#line_control').hide()
    $('#counter_control').hide()
    $('#qrcode_Controll').hide()
    $('#barcode_controll').hide()
}
function addRect(pointer) {
    let rect = new fabric.Rect({
        left: pointer.x,
        top: pointer.y,
        fill: '',
        stroke: "#ff0000",
        strokeWidth: 3,
        width: 100,
        height: 100
    })
    canvas.add(rect)
    objs.push({ type: 5, black: false })
    canvas.renderAll()
    if (typeof window.updateList === 'function') {
        window.updateList();
    }
    recordState()
}
function selectRect() {
    //color
    $('#rect_control').show()
    $('#rect_color').val(canvas.getActiveObject().get('fill') == '' ? '#ffffff' : canvas.getActiveObject().get('fill'))
    $('#rect_stroke').val(canvas.getActiveObject().get('stroke') == '' ? '#ffffff' : canvas.getActiveObject().get('stroke'))
    $('#rect_stroke_width').val(canvas.getActiveObject().get('strokeWidth'))
    $('#rect_radius').val(canvas.getActiveObject().get('rx'))
    rect_op.setValue(100 - canvas.getActiveObject().get('opacity') * 100)
    let a = canvas.getActiveObject().getCoords()
    $('#pic_control').hide()
    $("#set_bg").hide();
    $('#out_pic_control').hide()
    $('#text_control').hide()
    $("#circle_text_control").hide();
    $('#out_text_control').hide()
    $('#circle_control').hide()
    $('#line_control').hide()
    $('#counter_control').hide()
    $('#qrcode_Controll').hide()
    $('#barcode_controll').hide()
}
function addCircle(pointer) {
    let circle = new fabric.Circle({
        left: pointer.x,
        top: pointer.y,
        fill: '',
        stroke: '#ff0000',
        strokeWidth: 3,
        radius: 100,
        strokeUniform: true
    })
    canvas.add(circle)
    objs.push({ type: 6, black: false })
    canvas.renderAll()
    if (typeof window.updateList === 'function') {
        window.updateList();
    }
    recordState()
}
function selectCircle() {
    //border-color
    $('#circle_control').show()
    $('#circle_color').val(canvas.getActiveObject().get('fill') == '' ? '#ffffff' : canvas.getActiveObject().get('fill'))
    $('#circle_stroke').val(canvas.getActiveObject().get('stroke') == '' ? '#ffffff' : canvas.getActiveObject().get('stroke'))
    $('#circle_stroke_width').val(canvas.getActiveObject().get('strokeWidth'))
    circle_op.setValue(100 - canvas.getActiveObject().get('opacity') * 100)
    $('#pic_control').hide()
    $("#set_bg").hide();
    $('#out_pic_control').hide()
    $('#text_control').hide()
    $("#circle_text_control").hide();
    $('#out_text_control').hide()
    $('#rect_control').hide()
    $('#line_control').hide()
    $('#counter_control').hide()
    $('#qrcode_Controll').hide()
    $('#barcode_controll').hide()
}
function addLine(pointer) {
    let line = new fabric.Line([50, 100, 200, 100], {
        left: pointer.x,
        top: pointer.y,
        stroke: '#ff0000',
        strokeWidth: 3,
        strokeDashArray: [0, 0],
    })

    line.setControlVisible('tl', false)
    line.setControlVisible('tr', false)
    line.setControlVisible('br', false)
    line.setControlVisible('bl', false)
    line.setControlVisible('mt', false)
    line.setControlVisible('mb', false)
    canvas.add(line)
    objs.push({ type: 7, black: false })
    canvas.renderAll()
    if (typeof window.updateList === 'function') {
        window.updateList();
    }
    recordState()
}
function selectLine() {
    //color
    $('#line_control').show()

    let idx = getIndex(canvas.getActiveObject())
    $('#line_color').val(canvas.getActiveObject().get('stroke'))
    $('#line_dist').val(canvas.getActiveObject().get('strokeDashArray')[0])
    $('#text_h').val(canvas.getActiveObject().get('strokeWidth'))

    $('#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()
}
function addQrCode(pointer) {
    let qr = jrQrcode.getQrBase64('https://www.cardsoon.com', { padding: 0 })
    fabric.Image.fromURL(qr, function (image) {
        image.left = pointer.x
        image.top = pointer.y
        canvas.add(image)
        objs.push({ type: 8, name: resName('QR_CODE_'), color: '#000000', val: 'http://www.cardsoon.com', black: false })
        canvas.renderAll()
        if (typeof window.updateList === 'function') {
            window.updateList();
        }
        recordState()
    })
}
function selectQrCode() {
    //字段名
    $('#qrcode_Controll').show()
    let idx = getIndex(canvas.getActiveObject())
    $('#qrcode_field_name').val(objs[idx - 1].name)
    $('#qrcode_color').val(objs[idx - 1].color)
    $('#qrcode_val').val(objs[idx - 1].val)
    $('#line_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()
    $('#barcode_controll').hide()
}
function addBarCode(pointer) {
    JsBarcode('#barcode', '123456789', { margin: 0, lineColor: '#000000', fontSize: 18, font: 'Arial' })
    let barcode = document.getElementById('barcode')
    let bar = barcode.toDataURL('image/png')
    fabric.Image.fromURL(bar, function (image) {
        image.left = pointer.x
        image.top = pointer.y

        canvas.add(image)
        objs.push({ type: 9, name: resName('BAR_CODE_'), val: '123456789', color: '#000000', fontSize: 18, font: 'Arial', show: false, black: false }) //show是取消文字显示
        canvas.renderAll()
        if (typeof window.updateList === 'function') {
            window.updateList();
        }
        recordState()
    })
}
function selectBarCode() {
    //字段名
    $('#barcode_controll').show()
    let idx = getIndex(canvas.getActiveObject())
    $('#barcode_field_name').val(objs[idx - 1].name)
    $('#barcode_font_family').val(objs[idx - 1].font)
    let val = parseFloat(objs[idx - 1].fontSize) * 72 / dpi
    if (val % 0.5 !== 0) val = Math.round(val * 2) / 2
    $("#barcode_size").val(val);
    $('#barcode_val').val(objs[idx - 1].val)
    $('#barcode_show').prop('checked', objs[idx - 1].show ? 'checked' : '')
    $('#line_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()
}
function addCounter(pointer) {
    let text = new fabric.Text('0', {
        left: pointer.x,
        top: pointer.y,
        fill: '#000000'
    })
    canvas.add(text)
    objs.push({ type: 10, name: resName('COUNTER_'), start: 0, add: 1, black: false })
    canvas.renderAll()
    if (typeof window.updateList === 'function') {
        window.updateList();
    }
    recordState()
}
function selectCounter() {
    //起始
    $('#counter_control').show()

    let idx = getIndex(canvas.getActiveObject())
    $('#counter_start').val(objs[idx - 1].start)
    $('#counter_add').val(objs[idx - 1].add)
    $('#counter_color').val(canvas.getActiveObject().get('fill'))
    $('#count_font_family').val(canvas.getActiveObject().get('fontFamily'))
    let val = parseFloat(canvas.getActiveObject().get("fontSize")) * 72 / dpi
    if (val % 0.5 !== 0) val = Math.round(val * 2) / 2
    $("#count_size").val(val);

    $('#line_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()
    $('#qrcode_Controll').hide()
    $('#barcode_controll').hide()
}
function getIndex(target, _canvas = null) {
    let temp_objs
    if (_canvas == null) {
        temp_objs = canvas.getObjects()
    } else {
        temp_objs = _canvas.getObjects()
    }

    let i = 0
    for (let res of temp_objs) {
        if (target == res) {
            return i
        }
        i++
    }
    return 0
}
function getType(target) {
    let temp_objs = canvas.getObjects()
    let i = 0
    for (let res of temp_objs) {
        if (target == res) {
            return objs[i].type
        }
        i++
    }
}

// updateList 和 selectObj 函数在 core.js 中定义并附加到 window 对象
function recordState() {
    //pre_objs.push(JSON.stringify(objs));
    ++step.val
    for (let i = step.val; i < recordObjs.length; i++) {
        recordObjs.pop()
        recordJson.pop()
    }
    //recordObjs.splice(step.val, 1, JSON.stringify(objs))
    recordObjs.push(JSON.stringify(objs))
    const props = window.TO_JSON_PROPERTIES || ['selectable', 'hoverable', 'hoverCursor', 'text', 'fontStyle', 'fontWeight', 'underline', 'lockMovementX', 'lockMovementY', 'lockRotation', 'lockScalingX', 'lockScalingY', 'lockSkewingX', 'lockSkewingY', 'evented'];
    j = canvas.toJSON(props)
    j.objects[0].hoverCursor = 'default'
    recordJson.push(j)
}
function getCoordsMinX(acoords) {
    x = acoords[0].x
    for (let item of acoords) {
        if (item.x < x) {
            x = item.x
        }
    }
    return x
}
function getCoordsMaxX(acoords) {
    x = acoords[0].x
    for (let item of acoords) {
        if (item.x > x) {
            x = item.x
        }
    }
    return x
}
function getCoordsMinY(acoords) {
    y = acoords[0].y
    for (let item of acoords) {
        if (item.y < y) {
            y = item.y
        }
    }
    return y
}
function getCoordsMaxY(acoords) {
    y = acoords[0].y
    for (let item of acoords) {
        if (item.y > y) {
            y = item.y
        }
    }
    return y
}

$('#text_y').bind('input propertychange', function () {
    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()
    recordState()
})
$('#text_x').bind('input propertychange', function () {
    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()
    recordState()
})
$('#text_w').bind('input propertychange', function () {
    let val = '0'
    if ($('#text_w').val() != '') {
        val = $('#text_w').val()
    }
    let type = objs[getIndex(canvas.getActiveObject()) - 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()
    recordState()
})
$('#text_h').bind('input propertychange', function () {
    let idx = getIndex(canvas.getActiveObject())
    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[getIndex(canvas.getActiveObject()) - 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()
    recordState()
})
$('#text_r').bind('input propertychange', function () {
    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()
    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();
    }
    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
    }
    recordState()
})
// $("#out_pic_black").click(function () {
$('#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();
    }
    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();
    }
    recordState()
})
$('#qrcode_color').bind('input propertychange', function () {
    let item = canvas.getActiveObject()
    let qr = jrQrcode.getQrBase64('https://www.cardsoon.com', { padding: 0, foreground: $(this).val() })
    let idx = getIndex(item)
    objs[idx - 1].color = $(this).val()
    item.setSrc(qr, function (img) {
        canvas.renderAll()
        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();
        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()
        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();
    }
    recordState()
})
$('#text_color').bind('input propertychange', function () {
    canvas.getActiveObject().set('fill', $('#text_color').val())
    canvas.renderAll()
    recordState()
})
$('#text_back_color').bind('input propertychange', function () {
    canvas.getActiveObject().set('textBackgroundColor', $('#text_back_color').val())
    canvas.renderAll()
    recordState()
})
$('#out_text_back_color').bind('input propertychange', function () {
    canvas.getActiveObject().set('textBackgroundColor', $('#out_text_back_color').val())

    canvas.renderAll()
    recordState()
})
$("#text_size").bind('input propertychange', function () {
    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();
    recordState();
})
$("#circle_text_color").bind('input propertychange', function () {
    canvas.getActiveObject().set("fill", $("#circle_text_color").val());
    canvas.renderAll();
    recordState();
})
$("#circle_text_back_color").bind('input propertychange', function () {
    canvas.getActiveObject().set("textBackgroundColor", $("#circle_text_back_color").val());

    canvas.renderAll();
    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();
    };
    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;
    }
    recordState();
});
$('#out_text_color').bind('input propertychange', function () {
    canvas.getActiveObject().set('fill', $('#out_text_color').val())
    canvas.renderAll()
    recordState()
})
$("#out_text_size").bind('input propertychange', function () {
    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();
    recordState();
})
$('#out_text_text').bind('input propertychange', function () {
    let val = $("#out_text_text").val().trim()
    // 有内容时不加首行缩进（前面的空格），只保留后面的空格
    canvas.getActiveObject().set("text", val ? `${val} ` : ` ${val} `);
    canvas.renderAll()
    if (typeof window.updateList === 'function') {
        window.updateList();
    }
    recordState()
})
$('#rect_color').bind('input propertychange', function () {
    canvas.getActiveObject().set('fill', $('#rect_color').val())

    canvas.renderAll()
    recordState()
})
$('#rect_stroke').bind('input propertychange', function () {
    canvas.getActiveObject().set('stroke', $('#rect_stroke').val())

    canvas.renderAll()
    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()
    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()
    recordState()
})
$('#circle_color').bind('input propertychange', function () {
    canvas.getActiveObject().set('fill', $('#circle_color').val())

    canvas.renderAll()
    recordState()
})
$('#circle_stroke').bind('input propertychange', function () {
    canvas.getActiveObject().set('stroke', $('#circle_stroke').val())

    canvas.renderAll()
    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()
    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()
    recordState()
})
$('#counter_add').bind('input propertychange', function () {
    let item = canvas.getActiveObject()
    let idx = getIndex(item)
    objs[idx - 1].add = $(this).val()
    canvas.renderAll()
    recordState()
})
$('#counter_color').bind('input propertychange', function () {
    canvas.getActiveObject().set('fill', $('#counter_color').val())
    canvas.renderAll()
    recordState()
})
$("#count_size").bind('input propertychange', function () {
    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();
    recordState();
})
$('#line_color').bind('input propertychange', function () {
    canvas.getActiveObject().set('stroke', $('#line_color').val())
    canvas.renderAll()
    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()
    recordState()
})
$('#text_text').bind('input propertychange', function () {
    let val = $("#text_text").val().trim()
    // 有内容时不加首行缩进（前面的空格），只保留后面的空格
    canvas.getActiveObject().set("text", val ? `${val} ` : ` ${val} `);
    canvas.renderAll()
    if (typeof window.updateList === 'function') {
        window.updateList();
    }
    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()
        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();
        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();
        recordState();
    });
})
$('#count_font_family').on('change', function () {
    canvas.getActiveObject().set('fontFamily', $(this).find('option:selected').text())
    canvas.renderAll()
    recordState()
})
$('#text_font_family').on('change', function () {
    canvas.getActiveObject().set('fontFamily', $(this).find('option:selected').text())
    canvas.renderAll()
    recordState()
})

$('#circle_text_font_family').on('change', function () {
    canvas.getActiveObject().set("fontFamily", $(this).find('option:selected').text())
    canvas.renderAll()
    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()
        recordState()
    })
    //recordState();
})
$('#out_text_font_family').on('change', function () {
    canvas.getActiveObject().set('fontFamily', $(this).find('option:selected').text())
    canvas.renderAll()
    recordState()
})
$('.obj_list').on('click', 'div', function () {
    let idx = objs.length - 1 - $(this).index()
    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
    }
    recordState()
})
$('#autoWrap').click(function () {
    let idx = getIndex(canvas.getActiveObject())
    if ($(this).prop('checked')) {
        objs[idx - 1].autoWrap = true
    } else {
        objs[idx - 1].autoWrap = false
    }
    recordState()
})
$('#fixSize').click(function () {
    let idx = getIndex(canvas.getActiveObject())
    if ($(this).prop('checked')) {
        objs[idx - 1].fixSize = true
    } else {
        objs[idx - 1].fixSize = false
    }
    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) {
        recordState()
        canvas.renderAll()
    }
    // let actObjs = canvas.getActiveObjects();
})

//在关于我们获取版本号。
$("#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>' +
            // 【修改点】这里使用了刚才获取到的 version 变量
            '<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').off('click').on('click', function () {
    // 类型改变
    fabric.Image.fromURL(soonAsset('front_bg') + bg_version + '_2.png', function (i1) {
        i1.left = background_image.left
        i1.top = background_image.top
        let img1 = i1

        fabric.Image.fromURL(soonAsset('back_bg_2.png'), function (i2) {
            i2.left = background_image.left
            i2.top = background_image.top
            let img2 = i2
            fabric.Image.fromURL(soonAsset('op_2.png'), function (i3) {
                i2.left = background_image.left
                i2.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进行另存为
    }
});

// 防止重复初始化事件监听器
if (typeof window._design2CanvasEventsInitialized === 'undefined') {
    window._design2CanvasEventsInitialized = true;

    // 所有 canvas 事件已在 core.js 的 initCanvasEvents() 中统一处理，这里不再重复监听
    // 如果需要 canvas1 特定的 mouse:move 处理，可以在这里添加
    canvas1.on('mouse:move', (e) => {
        if (!e.pointer || typeof background_image === 'undefined' || !background_image) return;
        let width = canvas.getWidth()
        let height = canvas.getHeight()
        $('#posText').text(
            'X: ' + (e.pointer.x - (width / 2 - (width / 2 - background_image.left) * zoom)).toFixed(0) + ' Y: ' + (e.pointer.y - (height / 2 - (height / 2 - background_image.top) * zoom)).toFixed(0)
        )
    })
    // 注意：以下事件已在 core.js 的 initCanvasEvents() 中统一处理，移除重复监听以避免冲突：
    // - mouse:down (通过 handleObjectSelected 处理)
    // - object:scaling, object:rotating, object:rotated
    // - text:editing:entered, text:editing:exited
    // - object:modified (已在 core.js 中处理)
    // - mouse:up (已在 core.js 中处理)
    // 如果需要 canvas1 特定的处理逻辑，请修改 core.js 中的相应函数

    // 保留 canvas1 特定的 after:render 处理
    canvas1.on('after:render', function () {
        if (!window.is_bgi_add) return
        var image = document.getElementById('source_front')
        var metrics = typeof window.soonDesign2BgOverlayMetrics === 'function'
            ? window.soonDesign2BgOverlayMetrics(image)
            : null
        if (!metrics) return
        ctx1.drawImage(
            image,
            (canvas1.width - metrics.w) / 2,
            (canvas1.height - metrics.h) / 2,
            metrics.w,
            metrics.h
        )
    })
    // 保留 canvas1 特定的 text:changed 处理
    canvas1.on('text:changed', (e) => {
        $('#text_text').val(e.target.get('text'))
    })
    // 保留 canvas2 特定的 after:render 处理
    canvas2.on('after:render', function () {
        if (!window.is_bgi_add) return
        var image = document.getElementById('source_back')
        var metrics = typeof window.soonDesign2BgOverlayMetrics === 'function'
            ? window.soonDesign2BgOverlayMetrics(image)
            : null
        if (!metrics) return
        ctx2.drawImage(
            image,
            (canvas2.width - metrics.w) / 2,
            (canvas2.height - metrics.h) / 2,
            metrics.w,
            metrics.h
        )
    })
    requestAnimationFrame(function () {
        requestAnimationFrame(function () {
            if (typeof window.soonDesign2Kickoff === 'function') {
                window.soonDesign2Kickoff();
            }
        });
    });
    // 注意：以下事件已在 core.js 的 initCanvasEvents() 中统一处理，移除重复监听以避免冲突：
    // - mouse:down (通过 handleObjectSelected 处理)
    // - mouse:up (已在 core.js 中处理)
    // - object:scaling, object:rotating, object:rotated, object:added
    // - text:editing:entered, text:editing:exited
    // - object:modified (已在 core.js 中处理)
    // 如果需要 canvas2 特定的处理逻辑，请修改 core.js 中的相应函数
}