mxgraph中修改、添加源码自带的图元

在grapheditor文件夹下的sidebar.js中存放的是所有自带的图元，当然某些SVG图元是放在一些以xml为后缀名的文件中的，比如arrows.xml是存放所有的粗体的箭头。

//初始化图元库类
Sidebar.prototype.init = function() {
	var dir = STENCIL_PATH;
    //引入搜索框
	this.addSearchPalette(true);
    //引入自定义画好的基本图元
	this.addGeneralPalette(true);

	//箭头对应的(所有的箭头存放在arrows.xml中)
	this.addStencilPalette('arrows', mxResources.get('arrows'), dir + '/arrows.xml',
		';whiteSpace=wrap;html=1;fillColor=#ffffff;strokeColor=#000000;strokeWidth=2');

    //管道
	this.addImagePalette('pipe', '管道', dir + '/pipe/', '.svg', ['Long vertical pipe', 'Flange with bolts on top','Right angle 4', 'Double flange with bolts - vertical', '45angle 3', '90curve', '45angle 6','Double flange with bolts - horizontal', 'Tee 3', '60angle 4', 'Reducer 3', 'Hairpin turn up', '45angle 5','45angle 1', '180angle 4', 'Flange - horizontal', 'Tee 3', '60angle 7', 'Intersection 3', '60angle 2','120straight (long)', 'Right angle 2', '150straight (short)', 'Tee 8', '30angle 2', 'Open end 2', '90curve 2','90curve 4', 'Flange with pipe extending down', 'Intersection 2', '60angle 1', 'Reducer 1', 'Cut end 2','Short horizontal pipe', '150straight (long)', 'Intersection 1', '180angle 1', '180angle 2', '45straight (short)','30straight (long)', '60angle 6', '60straight (long)', '45angle 4', 'Hairpin turn left', '180angle 3',
'120straight (short)', 'Tee 5', '90curve 3', 'Right angle 3', '30angle 3', '30angle 1', '30angle 4', 'Cut end 1','Long horizontal pipe', 'Short vertical pipe', 'Flange with bolts on right', 'Flange with bolts on bottom','Open end 1', '45angle 2', 'Tee 1', 'Tee 2', 'Cracked pipe - vertical', '60angle 5', '45angle 8', '60angle 8','Flange with bolts on left', 'Hairpin turn down', '45angle 7', 'Reducer 2', '30angle 6', 'Flange - vertical','30angle 5', '30straight (short)', '135straight (short)', 'Tee 4', 'Tee 6', '60straight (short)', '30angle 8','Cracked pipe - horizontal', '60angle 3', '30angle 7', 'Right angle 1'
	], null, {
		'Wrieless_Router_N': 'wireless router switch wap wifi access point wlan',
		'Router_Icon': 'router switch'
	});
}

上面是初始化所有图元的一个类，而管道是我自己的图元，我如果想上传更多的svg(png,jpg等)图元，下面以“管道”为实例讲解：

我是先建一个stencils文件夹和js文件夹同级，然后建立存放管道的文件夹比如pipe,类型为svg，数组中存放文件名。

那如果我要自定义button按钮，如下：

Sidebar.prototype.addGeneralPalette = function(expand) {
	// var lineTags = 'line lines connector connectors connection connections arrow arrows ';
	var fns = [
		// this.createVertexTemplate(style, width, height, value, title, showLabel, showTitle);
		//text文本输入框
		this.createVertexTemplateEntry(
			'text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;',
			40, 20, 'Text', 'Text', null, null, 'text textbox textarea label'),
		//添加button 按钮
		this.createVertexTemplateEntry(
			'rounded=0;whiteSpace=wrap;html=1;fillColor=rgb(0, 168, 255);fontSize=20;fontColor=white;', 120, 60, 'Button1',
			'Button', null, null, 'rect rectangle box'),
		//添加红色按钮
		this.createVertexTemplateEntry(
			'rounded=0;whiteSpace=wrap;html=1;fillColor=#dc3545;;fontSize=20;fontColor=white', 120, 60, 'Button2',
			'Button', null, null, 'rect rectangle box'),
		//添加白色按钮
		this.createVertexTemplateEntry(
			'rounded=0;whiteSpace=wrap;html=1;fillColor=#ffffff;fontSize=20;fontColor=black', 120, 60, 'Button3',
			'Button', null, null, 'rect rectangle box'),
		//添加橙色按钮
		this.createVertexTemplateEntry(
			'rounded=0;whiteSpace=wrap;html=1;fillColor=#fd7e14;fontSize=20;fontColor=white', 120, 60, 'Button4',
			'Button', null, null, 'rect rectangle box'),
		//添加绿色按钮
		this.createVertexTemplateEntry(
			'rounded=0;whiteSpace=wrap;html=1;fillColor=#28a745;fontSize=20;fontColor=white', 120, 60, 'Button5',
			'Button', null, null, 'rect rectangle box'),
		//Textbox文本盒子
		this.createVertexTemplateEntry(
			'text;html=1;strokeColor=none;fillColor=none;spacing=5;spacingTop=-20;whiteSpace=wrap;overflow=hidden;rounded=0;',
			190, 120,
			'<h1>Heading</h1><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>',
			'Textbox', null, null, 'text textbox textarea'),
		//三角形
		this.createVertexTemplateEntry('triangle;whiteSpace=wrap;html=1;', 60, 80, '', 'Triangle', null, null,
			'triangle logic inverter buffer'),
		//Ellipse椭圆
		this.createVertexTemplateEntry('ellipse;whiteSpace=wrap;html=1;', 120, 80, '', 'Ellipse', null, null,
			'oval ellipse state'),
		//circle圆
		this.createVertexTemplateEntry('ellipse;whiteSpace=wrap;html=1;aspect=fixed;', 80, 80, '', 'Circle', null, null,
			'circle'),
		//Square正方形
		this.createVertexTemplateEntry('whiteSpace=wrap;html=1;aspect=fixed;', 80, 80, '', 'Square', null, null, 'square'),
		//矩形
		this.createVertexTemplateEntry('rounded=0;whiteSpace=wrap;html=1;', 120, 60, '', 'Rectangle', null, null, -
			'rect rectangle box'),
		//菱形
		this.createVertexTemplateEntry('rhombus;whiteSpace=wrap;html=1;', 80, 80, '', 'Diamond', null, null,
			'diamond rhombus if condition decision conditional question test'),
		//平行四边形
		this.createVertexTemplateEntry('shape=parallelogram;perimeter=parallelogramPerimeter;whiteSpace=wrap;html=1;', 120,
			60, '', 'Parallelogram'),
		//六边形
		this.createVertexTemplateEntry('shape=hexagon;perimeter=hexagonPerimeter2;whiteSpace=wrap;html=1;', 120, 80, '',
			'Hexagon', null, null, 'hexagon preparation')
	];

	this.addPaletteFunctions('general', mxResources.get('general'), (expand != null) ? expand : true, fns);
};

学习不易，如果觉得有用请我喝杯咖啡吧？