svgeditor2.0/src/components/mt-edit/composables/index.ts

import type { IExportDoneJson, IExportJson } from '../components/types'
import { leftAsideStore } from '../store/left-aside'
import type {
    IDoneJson,
    IGlobalStoreCanvasCfg,
    IGlobalStoreGridCfg,
    ILeftAsideConfigItem,
    ILeftAsideConfigItemPublicProps
} from '../store/types'
import { objectDeepClone } from '../utils'

export const genExportJson = (
    canvasCfg: IGlobalStoreCanvasCfg,
    gridCfg: IGlobalStoreGridCfg,
    doneJson: IDoneJson[]
) => {
    // 先创建原始的 export_done_json
    let export_done_json: IExportDoneJson[] = []
    export_done_json = objectDeepClone<IDoneJson[]>(doneJson).map(m => {
        if (m.symbol) {
            delete m.symbol
        }
        let new_props = {}
        for (const key in m.props) {
            new_props = { ...new_props, ...{ [key]: m.props[key].val } }
        }
        return {
            ...m,
            props: new_props,
            active: false
        }
    })

    // const list = [
    //     'c53cccb8c65201c192d8c57fbdb4d993-RdNsoqHYOZ',
    //     'c53cccb8c65201c192d8c57fbdb4d993-O4jAyCBz1A',
    //     'c53cccb8c65201c192d8c57fbdb4d993-XBd70oZ3kH'
    // ]

    // const message = [
    //     { id: 'c53cccb8c65201c192d8c57fbdb4d993-RdNsoqHYOZ', text: '发生时刻:2023-07-05 12:00:00' },
    //     { id: 'c53cccb8c65201c192d8c57fbdb4d993-O4jAyCBz1A', text: '传输中1111......' },
    //     { id: 'c53cccb8c65201c192d8c57fbdb4d993-XBd70oZ3kH', text: '发生时刻:2023-07-06 14:20:00' }
    // ]

    // 查找传输设备图元并添加文字图元
    // const transportDevices = export_done_json.filter(item =>
    //     // 假设传输设备有特定的标识，比如ID包含特定关键词或type为特定值
    //     // item.title?.includes('传输')
    //     // list.some(id => item.id?.includes(id))
    //     list.includes(item.id)
    // )

    // 为每个传输设备添加旁边的文字图元
    const textElementsToAdd: IExportDoneJson[] = []

    // 先删除旧图元
    // 用于存储需要移除的旧文本图元的 ID
    const idsToRemove: string[] = []

    // transportDevices.forEach((device, index) => {
    //     // 构造预期的旧文本图元 ID 模式 (基于设备 ID)
    //     const expectedIdPrefix = `auto-text-${device.id}-`

    //     // 查找所有与当前设备关联的现有文本图元
    //     const existingTextElements = export_done_json.filter(item => item.id?.startsWith(expectedIdPrefix))

    //     // 将这些旧图元的 ID 添加到待删除列表
    //     idsToRemove.push(...existingTextElements.map(item => item.id!))

    //     // 获取对应的消息文本
    //     const deviceMessage = message.find(m => m.id === device.id)?.text || '默认提示信息'

    //     // 创建新的文本图元
    //     const textElement: IExportDoneJson = {
    //         id: `auto-text-${device.id}-${index}`, // 使用时间戳确保唯一性
    //         title: '动态文字',
    //         type: 'vue',
    //         tag: 'text-vue',
    //         props: {
    //             text: deviceMessage || '默认提示信息', // 添加安全检查
    //             fontFamily: '黑体',
    //             fontSize: 14,
    //             fill: 'red',
    //             vertical: false
    //         },
    //         common_animations: {
    //             val: '',
    //             delay: 'delay-0s',
    //             speed: 'slow',
    //             repeat: 'infinite'
    //         },
    //         binfo: {
    //             left: (device.binfo?.left || 0) + (device.binfo?.width || 0) + 10,
    //             top: (device.binfo?.top || 0) + (device.binfo?.height || 0) / 2 - 10 + (index % 2 === 0 ? 20 : -20), // 偶数下移20px，奇数上移20px
    //             width: 200,
    //             height: 50,
    //             angle: 0
    //         },
    //         resize: true,
    //         rotate: true,
    //         lock: false,
    //         active: false,
    //         hide: false,
    //         UIDName: '',
    //         events: []
    //     }
    //     textElementsToAdd.push(textElement)
    // })

    // // 从 export_done_json 中移除旧的文本图元
    // export_done_json = export_done_json.filter(item => !idsToRemove.includes(item.id!))

    // // 合并原始图元和新增的文字图元
    // export_done_json = [...export_done_json, ...textElementsToAdd]

    const exportJson: IExportJson = {
        canvasCfg,
        gridCfg,
        json: export_done_json
    }
    return { exportJson }
}
export const useExportJsonToDoneJson = (json: IExportJson) => {
    // 取出所有图形的初始配置
    let init_configs: ILeftAsideConfigItem[] = []
    for (const iterator of leftAsideStore.config.values()) {
        if (iterator.length > 0) {
            init_configs = [...init_configs, ...iterator]
        }
    }
    const importDoneJson: IDoneJson[] = json.json.map(m => {
        let props: ILeftAsideConfigItemPublicProps = {}
        let symbol = undefined
        // 找到原始的props
        const find_item = init_configs.find(f => f?.id == m.tag)
        const find_props = find_item?.props
        if (find_props) {
            props = { ...props, ...objectDeepClone(find_props) }
        }
        for (const key in m.props) {
            if (props[key] !== undefined) {
                props[key].val = m.props[key]
            }
        }
        if (find_item?.symbol) {
            symbol = find_item.symbol
        }
        return {
            ...m,
            props,
            symbol
        }
    })
    return {
        canvasCfg: json.canvasCfg,
        gridCfg: json.gridCfg,
        importDoneJson
    }
}