sunmicro-lvgl-designer/src/renderer/src/lvgl-widgets/image/index.ts

import Image from './Image.vue'
import icon from '../assets/icon/icon_4image.svg'
import { flagOptions, stateOptions, stateList } from '@/constants'
import type { IComponentModelConfig } from '../type'
import i18n from '@/locales'
import { getImageByPath } from '@/utils'
import { useProjectStore } from '@/store/modules/project'

export default {
  label: i18n.global.t('image'),
  icon,
  component: Image,
  key: 'lv_image',
  group: i18n.global.t('basic'),
  sort: 1,
  hasChildren: false,
  parts: [
    {
      name: 'main',
      stateList
    }
  ],
  defaultSchema: {
    name: 'image',
    props: {
      x: 0,
      y: 0,
      width: 100,
      height: 100,
      flags: [],
      states: [],
      image: '',
      center: {
        x: 50,
        y: 50
      },
      rotate: 0,
      openScale: false,
      scale: 256
      // antiAliasing: false
    },
    styles: [
      {
        part: {
          name: 'main',
          state: 'default'
        },
        background: {
          color: '#ffffff00',
          image: {
            imgId: '',
            recolor: '#ffffff00',
            alpha: 255
          }
        },
        imageStyle: {
          recolor: '#ffffff00',
          alpha: 255
        },
        border: {
          color: '#000000ff',
          width: 0,
          radius: 0,
          side: ['all']
        },
        outline: {
          color: '#000000ff',
          width: 0,
          pad: 0
        },
        shadow: {
          color: '#2092f5ff',
          offsetX: 0,
          offsetY: 0,
          spread: 0,
          width: 0
        },
        transform: {
          width: 0,
          height: 0,
          translateX: 0,
          translateY: 0,
          originX: 0,
          originY: 0,
          rotate: 0,
          scale: 256
        }
      }
    ]
  },
  config: {
    // 组件属性
    props: [
      {
        label: '名称',
        field: 'name',
        valueType: 'text',
        componentProps: {
          placeholder: '请输入名称',
          type: 'text'
        }
      },
      {
        label: '位置/大小',
        valueType: 'group',
        children: [
          {
            label: '',
            field: 'props.x',
            valueType: 'number',
            componentProps: {
              span: 12,
              min: -10000,
              max: 10000
            },
            slots: { prefix: 'X' }
          },
          {
            label: '',
            field: 'props.y',
            valueType: 'number',
            componentProps: {
              span: 12,
              min: -10000,
              max: 10000
            },
            slots: { prefix: 'Y' }
          },
          {
            label: '',
            field: 'props.width',
            valueType: 'number',
            componentProps: {
              span: 12,
              min: 1,
              max: 10000
            },
            slots: { prefix: 'W' }
          },
          {
            label: '',
            field: 'props.height',
            valueType: 'number',
            componentProps: {
              span: 12,
              min: 1,
              max: 10000
            },
            slots: { prefix: 'H' }
          }
        ]
      },
      {
        label: '标识',
        field: 'props.flags',
        valueType: 'checkbox',
        componentProps: {
          options: flagOptions,
          defaultCollapsed: true
        }
      },
      {
        label: '状态',
        field: 'props.states',
        valueType: 'checkbox',
        componentProps: {
          options: stateOptions,
          defaultCollapsed: true
        }
      }
    ],
    coreProps: [
      {
        label: '图片',
        field: 'props.image',
        valueType: 'image',
        componentProps: {
          onValueChange: (value: string, formData: any) => {
            // 选中图片后获取图片信息
            // 根据图片信息设置控件宽高
            if (value) {
              const projectStore = useProjectStore()
              const imgPath = projectStore.project?.resources.images.find(
                (item) => item.id === value
              )?.path
              if (imgPath) {
                getImageByPath(projectStore.projectPath + imgPath).then((res) => {
                  if (res?.dimensions.height) {
                    formData.props.height = res.dimensions.height
                    formData.props.width = res.dimensions.width
                  }
                })
              }
            }
          }
        }
      },
      {
        label: '中心',
        valueType: 'group',
        children: [
          {
            label: 'X',
            field: 'props.center.x',
            valueType: 'number',
            componentProps: {
              span: 12
            }
          },
          {
            label: 'Y',
            field: 'props.center.y',
            valueType: 'number',
            componentProps: {
              span: 12
            }
          }
        ]
      },
      {
        label: '旋转角度',
        field: 'props.rotate',
        labelWidth: '60px',
        valueType: 'number',
        componentProps: {
          min: -360,
          max: 360
        }
      },
      {
        label: '缩放',
        field: 'props.openScale',
        labelWidth: '60px',
        valueType: 'switch'
      },
      {
        valueType: 'dependency',
        name: ['props.openScale'],
        dependency: (dependency) => {
          return dependency?.['props.openScale']
            ? [
                {
                  label: '缩放值',
                  field: 'props.scale',
                  valueType: 'number',
                  componentProps: {
                    min: 0,
                    max: 10000
                  }
                }
              ]
            : []
        }
      }
      // {
      //   label: '抗锯齿',
      //   field: 'props.antiAliasing',
      //   valueType: 'switch'
      // }
    ],
    // 组件样式
    styles: [
      {
        label: '模块/状态',
        field: 'part',
        valueType: 'part'
      },
      {
        label: '背景',
        field: 'background',
        valueType: 'background'
      },
      {
        label: '图片',
        field: 'imageStyle',
        valueType: 'imageStyle'
      },
      {
        label: '边框',
        field: 'border',
        valueType: 'border'
      },
      {
        label: '轮廓',
        field: 'outline',
        valueType: 'outline'
      },
      {
        label: '阴影',
        field: 'shadow',
        valueType: 'shadow'
      },
      {
        label: '变换',
        field: 'transform',
        valueType: 'transform'
      }
    ]
  }
} as IComponentModelConfig