drawing-board-service/example/fuse/views/slide/menu.ts

import { ShapeType, shapeNames, PresetAdd } from '@/index.ts'
import { v4 as uuid } from 'uuid'


export type MenuItem = {
	icon: string,
	name: string,
	value?: string,
	children?: MenuItem[]
	payload?: PresetAdd
}

const genItem = <T extends ShapeType>(type: T, preset: PresetAdd<T>['preset'] = {}) => ({
	name: shapeNames[type],
	value: uuid(),
	payload: {type, preset}
})

export const getItem = (value: string, queryMenus = menus): MenuItem | undefined => {
	for (const menu of queryMenus) {
		const eqItem = menu.value === value
			? menu
			: menu.children?.length ? getItem(value, menu.children) : void 0
		if (eqItem) return eqItem
	}
}

const eqPayload = (p1?: PresetAdd, p2?: PresetAdd) => {
	if (!p2 || !p1 || p1.type !== p2.type) return false;
	return !p1.preset || !p2.preset ||  toRaw(p1.preset) === toRaw(p2.preset)
}

export const getValue = (payload: PresetAdd, queryMenus = menus): string | undefined => {
	for (const menu of queryMenus) {
		const eqItem = eqPayload(menu.payload, payload)
			? menu.value
			: menu.children?.length ? getValue(payload, menu.children) : void 0
		if (eqItem) return eqItem
	}
}


import svg1 from '../../assets/icons/vue.svg'
import svg2 from '../../assets/icons/BedsideCupboard.svg'
import { toRaw } from "vue";

export const menus: MenuItem[] = [
	{
		icon: '',
		name: '绘制',
		value: uuid(),
		children: [
			{
				icon: '',
				...genItem('line')
			},
			{
				icon: '',
				...genItem('arrow')
			},

			{
				icon: '',
				...genItem('rectangle')
			},
			{
				icon: '',
				...genItem('circle')
			},
			{
				icon: '',
				...genItem('triangle')
			},
			{
				icon: '',
				...genItem('polygon')
			},
		]
	},
	{
		icon: '',
		name: '图例',
		value: uuid(),
		children: [
			{
				icon: '',
				...genItem('icon', { url: svg1, width: 500, height: 500 }),
				name: 'vue'
			},
			{
				icon: '',
				...genItem('icon', { url: svg2, width: 300, height: 300, stroke: 'red', strokeWidth: 1, strokeScaleEnabled: false }),
				name: '自定义'
			}
		]
	},
	{
		icon: '',
		...genItem('text')
	},
]