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

import Barcode from './Barcode.vue'
import icon from '../assets/icon/icon_41barcode.svg'
import type { IComponentModelConfig } from '../type'
import i18n from '@/locales'
import { stateList, flagOptions, stateOptions } from '@/constants'
import defaultStyle from './style.json'
import { getCode128BUnitLength } from './code128'

const DEFAULT_TEXT = 'https://www.sv-elec.com/'
const DEFAULT_SCALE = 1
const DEFAULT_DIRECTION = 'horizontal'
const BASE_THICKNESS = 60

const normalizeScale = (value: number) => {
  return Math.max(1, Math.min(5, Math.round(Number(value) || DEFAULT_SCALE)))
}

const normalizeDirection = (value: string) => {
  return value === 'vertical' ? 'vertical' : DEFAULT_DIRECTION
}

const normalizeText = (value?: string) => {
  return value?.trim() || DEFAULT_TEXT
}

const getBarcodeWidth = (text?: string, scale?: number, direction?: string) => {
  const unitLength =
    getCode128BUnitLength(normalizeText(text)) ?? getCode128BUnitLength(DEFAULT_TEXT) ?? 1
  const currentScale = normalizeScale(scale || DEFAULT_SCALE)
  const currentDirection = normalizeDirection(direction || DEFAULT_DIRECTION)
  const longSide = Math.max(1, unitLength * currentScale)
  const shortSide = BASE_THICKNESS * currentScale

  return currentDirection === 'vertical' ? shortSide : longSide
}

const syncBarcodeWidth = (formData: any) => {
  formData.props.width = getBarcodeWidth(
    formData?.props?.text,
    formData?.props?.scale,
    formData?.props?.direction
  )
}

export default {
  label: i18n.global.t('barcode'),
  icon,
  component: Barcode,
  key: 'barcode',
  group: i18n.global.t('advance'),
  sort: 3,
  hasChildren: false,
  defaultStyle,
  onChangeSize: (props, size) => {
    return {
      width: getBarcodeWidth(props?.text, props?.scale, props?.direction),
      height: Math.max(1, Math.round(size.currentHeight || props?.height || BASE_THICKNESS))
    }
  },
  parts: [
    {
      name: 'main',
      stateList
    }
  ],
  defaultSchema: {
    name: 'barcode',
    props: {
      x: 0,
      y: 0,
      flags: [
        'LV_OBJ_FLAG_CLICKABLE',
        'LV_OBJ_FLAG_CLICK_FOCUSABLE',
        'LV_OBJ_FLAG_SCROLLABLE',
        'LV_OBJ_FLAG_SCROLL_ELASTIC',
        'LV_OBJ_FLAG_SCROLL_MOMENTUM',
        'LV_OBJ_FLAG_SCROLL_CHAIN_HOR',
        'LV_OBJ_FLAG_SCROLL_CHAIN_VER',
        'LV_OBJ_FLAG_SCROLL_CHAIN',
        'LV_OBJ_FLAG_SCROLL_WITH_ARROW',
        'LV_OBJ_FLAG_SNAPPABLE',
        'LV_OBJ_FLAG_PRESS_LOCK',
        'LV_OBJ_FLAG_GESTURE_BUBBLE'
      ],
      states: [],
      width: getBarcodeWidth(DEFAULT_TEXT, DEFAULT_SCALE, DEFAULT_DIRECTION),
      height: BASE_THICKNESS,
      text: DEFAULT_TEXT,
      lightColor: '#ffffff',
      darkColor: '#000000',
      scale: DEFAULT_SCALE,
      direction: DEFAULT_DIRECTION
    },
    styles: []
  },
  config: {
    props: [
      {
        label: '名称',
        field: 'name',
        valueType: '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.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.darkColor',
        valueType: 'color'
      },
      {
        label: '亮色',
        field: 'props.lightColor',
        valueType: 'color'
      },
      {
        label: '缩放',
        field: 'props.scale',
        valueType: 'number',
        componentProps: {
          min: 1,
          max: 5,
          onValueChange: (_value: number, formData: any) => {
            syncBarcodeWidth(formData)
          }
        }
      },
      {
        label: '方向',
        field: 'props.direction',
        valueType: 'select',
        componentProps: {
          options: [
            { label: 'Horitional', value: 'horizontal' },
            { label: 'Vertical', value: 'vertical' }
          ],
          onValueChange: (_value: string, formData: any) => {
            syncBarcodeWidth(formData)
          }
        }
      },
      {
        label: '文本',
        field: 'props.text',
        valueType: 'textarea',
        componentProps: {
          onValueChange: (_value: string, formData: any) => {
            syncBarcodeWidth(formData)
          }
        }
      }
    ],
    styles: []
  }
} as IComponentModelConfig