Sidebar-ButtonComponent.js 4.29 KB

(function () {
	// Adds Atlassian shapes
	// button 按钮
	Sidebar.prototype.addThingsKitButtonPalette = function () {

		const gn = 'mxgraph.button';
		const dt = 'button';
		const label = '按钮'
		const width = 66;
		const height = 74;
		const prefix = `image;image=${window?.PROJECT_ENV.base}/webapp/images/thingskit/libs/`
		const defaultStyle = ';imageAspect=0;'
		this.setCurrentSearchEntryLibrary(dt);

		const { COMPONENT_KEY, CATEGORY } = window.CellAttributeKeyEnum

		function createUserObject(attribute) {
			attribute = Object.assign({ [COMPONENT_KEY]: '', [CATEGORY]: '' }, attribute || {})
			var xmlElement = mxUtils.createXmlDocument().createElement('UserObject');

			Object.keys(attribute).forEach(key => {
				xmlElement.setAttribute(key, attribute[key]);
			})
			return xmlElement
		}

		// 自定义属性
		const cellAttribute = {
			[COMPONENT_KEY]: 'Image',
			[CATEGORY]: 'DEFAULT'
		}

		const graphPathLib = [
			{ name: 'button01.svg', path: 'button/button01.svg' },
			{ name: 'button02.svg', path: 'button/button02.svg' },
			{ name: 'button03.svg', path: 'button/button03.svg' },
			{ name: 'button04.svg', path: 'button/button04.svg' },
			{ name: 'button05.svg', path: 'button/button05.svg' },
			{ name: 'button06.svg', path: 'button/button06.svg' },
			{ name: 'button07.svg', path: 'button/button07.svg' },
			{ name: 'button08.svg', path: 'button/button08.svg' },
			{ name: '1.png', path: 'button/1.png' },
			{ name: '10.png', path: 'button/10.png' },
			{ name: '11.png', path: 'button/11.png' },
			{ name: '12.png', path: 'button/12.png' },
			{ name: '13.png', path: 'button/13.png' },
			{ name: '14.png', path: 'button/14.png' },
			{ name: '15.png', path: 'button/15.png' },
			{ name: '16.png', path: 'button/16.png' },
			{ name: '17.png', path: 'button/17.png' },
			{ name: '18.png', path: 'button/18.png' },
			{ name: '19.png', path: 'button/19.png' },
			{ name: '2.png', path: 'button/2.png' },
			{ name: '20.png', path: 'button/20.png' },
			{ name: '21.png', path: 'button/21.png' },
			{ name: '22.png', path: 'button/22.png' },
			{ name: '23.png', path: 'button/23.png' },
			{ name: '24.png', path: 'button/24.png' },
			{ name: '25.png', path: 'button/25.png' },
			{ name: '26.png', path: 'button/26.png' },
			{ name: '27.png', path: 'button/27.png' },
			{ name: '28.png', path: 'button/28.png' },
			{ name: '29.png', path: 'button/29.png' },
			{ name: '3.png', path: 'button/3.png' },
			{ name: '30.png', path: 'button/30.png' },
			{ name: '31.png', path: 'button/31.png' },
			{ name: '32.png', path: 'button/32.png' },
			{ name: '33.png', path: 'button/33.png' },
			{ name: '34.png', path: 'button/34.png' },
			{ name: '35.png', path: 'button/35.png' },
			{ name: '36.png', path: 'button/36.png' },
			{ name: '37.png', path: 'button/37.png' },
			{ name: '38.png', path: 'button/38.png' },
			{ name: '39.png', path: 'button/39.png' },
			{ name: '4.png', path: 'button/4.png' },
			{ name: '40.png', path: 'button/40.png' },
			{ name: '41.png', path: 'button/41.png' },
			{ name: '42.png', path: 'button/42.png' },
			{ name: '43.png', path: 'button/43.png' },
			{ name: '44.png', path: 'button/44.png' },
			{ name: '45.png', path: 'button/45.png' },
			{ name: '46.png', path: 'button/46.png' },
			{ name: '47.png', path: 'button/47.png' },
			{ name: '48.png', path: 'button/48.png' },
			{ name: '49.png', path: 'button/49.png' },
			{ name: '5.png', path: 'button/5.png' },
			{ name: '50.png', path: 'button/50.png' },
			{ name: '51.png', path: 'button/51.png' },
			{ name: '52.png', path: 'button/52.png' },
			{ name: '6.png', path: 'button/6.png' },
			{ name: '7.png', path: 'button/7.png' },
			{ name: '8.png', path: 'button/8.png' },
			{ name: '9.png', path: 'button/9.png' },
		]

		const fns = graphPathLib.map((item, index) => {
			return this.addEntry(this.getTagsForStencil(gn, item.name, dt).join(' '), mxUtils.bind(this, function () {
				const cell = new mxCell(createUserObject(cellAttribute), new mxGeometry(0, 0, width, height), `${prefix}${item.path}${defaultStyle}`);
				cell.setVertex(true)
				return this.createVertexTemplateFromCells([cell], cell.geometry.width, cell.geometry.height, `${label}${index + 1}`);
			}));
		})

		this.setGalleryLib(dt, label, graphPathLib)

		this.addPaletteFunctions(dt, label, false, fns);

		this.setCurrentSearchEntryLibrary();
	};
})();