Drawio 二开记录

打包

cd {源码}/etc/build && ant war  
//会在{源码}/build 处生成draw.war   拷贝到tomcat

svg base64解码

https://jgraph.github.io/drawio-tools/tools/convert.html

目录说明

• 右侧菜单-样式/属性：webapp/js/diagramly/Editor.js 408
• 右侧菜单-调整图形-编辑数据入口：webapp/js/grapheditor/Format.js 1883
• 右侧菜单-调整图形：webapp/js/grapheditor/Format.js 1695
• 编辑数据-弹出层-添加属性【button-click】：webapp/js/grapheditor/Dialogs.js 1483
• 编辑数据-弹出层-应用【button-click】：webapp/js/grapheditor/Dialogs.js 1559
  顶部菜单：webapp/js/grapheditor/Menus.js

具体操作

右侧菜单-调整图形-编辑数据入口

增加换行

mxUtils.br(div);

增加文本框组件

在webapp/js/grapheditor/Format.js 1347行处，增加方法

 BaseFormatPanel.prototype.addTextInput = function(container, unit, right, width, update, step, marginTop, disableFocus, isFloat)
 {
	 marginTop = (marginTop != null) ? marginTop : 0;
	 
	 var input = document.createElement('input');
	 input.style.position = 'absolute';
	 input.style.textAlign = 'right';
	 input.style.marginTop = '-2px';
	 input.style.right = (right + 12) + 'px';
	 input.style.width = width + 'px';
	 input.setAttribute('type','text');
	 container.appendChild(input);
	 
	//  var stepper = this.createStepper(input, update, step, null, disableFocus, null, isFloat);
	//  stepper.style.marginTop = (marginTop - 2) + 'px';
	//  stepper.style.right = right + 'px';
	//  container.appendChild(stepper);
 
	 return input;
 };

调用示例
在webapp/js/grapheditor/Format.js 1930行处，增加方法

mxUtils.br(div);
		var span = document.createElement('div');
		span.style.position = 'absolute';
		span.style.width = '70px';
		span.style.marginTop = '0px';
		span.style.fontWeight = 'bold';
		mxUtils.write(span, '部门名称');
		div.appendChild(span);

		var input = this.addTextInput(div, '°', 20, 44, function()
		{
			update.apply(this, arguments);
		});
		mxEvent.addListener(input, 'keyup', function(e)
		{
			//keyup事件
		});

设置图形数据–（编辑数据）

//需要先点击编辑数据-应用，否则会报value is undefined错误（待优化）
var value = graph.getModel().getValue(cell)
value.setAttribute('setDeptName',input.value)
graph.getModel().setValue(cell, value);