1、如果需要将label靠左边对齐,则必须重写底层源码
新增mxText的一个构造器,主要是增加了一个参数:x(代表当前的cell)
function mxText(a, b, c, d, e, f, g, h, k, i, l, m, n, o, p, q, t, u, v, w, x) {
this.value = a;
this.bounds = b;
this.color = e != null ? e : "black";
this.align = c != null ? c : "";
this.valign = d != null ? d : "";
this.family = f != null ? f : mxConstants.DEFAULT_FONTFAMILY;
this.size = g != null ? g : mxConstants.DEFAULT_FONTSIZE;
this.fontStyle = h != null ? h : 0;
this.spacing = 0;
this.spacingTop = 0;
//this.spacingRight = x.cell.geometry.height/2 - (this.size * 1.25 * a.length);
this.spacingRight = 0;
this.spacingBottom = 0;
this.spacingLeft = 0;
this.horizontal = true;
this.background = p;
this.border = q;
this.wrap = t != null ? t : false;
this.clipped = u != null ? u : false;
this.overflow = v != null ? v : "visible";
this.labelPadding = w != null ? w : 0
}
重写createTabel方法
mxCellRenderer.prototype.createLabel = function(a, b) {
var c = a.view.graph;
c.getModel().isEdge(a.cell);
if (a.style[mxConstants.STYLE_FONTSIZE] > 0 || a.style[mxConstants.STYLE_FONTSIZE] == null) {
var d = (c.isHtmlLabel(a.cell) || b != null && mxUtils.isNode(b)) && c.dialect == mxConstants.DIALECT_SVG;
//alert(a.cell.value + '-' + b);
//dongyj add :其中b=a.cell.value
if (!a.cell.id && a.cell.id.indexOf("_swimlane") >= 0 && b) {
a.text = new mxText(b, new mxRectangle, a.style[mxConstants.STYLE_ALIGN] || mxConstants.ALIGN_CENTER, c.getVerticalAlign(a), a.style[mxConstants.STYLE_FONTCOLOR], a.style[mxConstants.STYLE_FONTFAMILY], a.style[mxConstants.STYLE_FONTSIZE],
a.style[mxConstants.STYLE_FONTSTYLE], a.style[mxConstants.STYLE_SPACING], a.style[mxConstants.STYLE_SPACING_TOP], a.style[mxConstants.STYLE_SPACING_RIGHT], a.style[mxConstants.STYLE_SPACING_BOTTOM], a.style[mxConstants.STYLE_SPACING_LEFT], a.style[mxConstants.STYLE_HORIZONTAL], a.style[mxConstants.STYLE_LABEL_BACKGROUNDCOLOR], a.style[mxConstants.STYLE_LABEL_BORDERCOLOR], c.isWrapping(a.cell) && c.isHtmlLabel(a.cell), c.isLabelClipped(a.cell), a.style[mxConstants.STYLE_OVERFLOW], a.style[mxConstants.STYLE_LABEL_PADDING], a);
} else {
//alert(a.cell.geometry.width);
//a.cell.geometry.height; a.text = new mxText(b, new mxRectangle, a.style[mxConstants.STYLE_ALIGN] || mxConstants.ALIGN_CENTER, c.getVerticalAlign(a), a.style[mxConstants.STYLE_FONTCOLOR], a.style[mxConstants.STYLE_FONTFAMILY], a.style[mxConstants.STYLE_FONTSIZE],
a.style[mxConstants.STYLE_FONTSTYLE], a.style[mxConstants.STYLE_SPACING], a.style[mxConstants.STYLE_SPACING_TOP], a.style[mxConstants.STYLE_SPACING_RIGHT], a.style[mxConstants.STYLE_SPACING_BOTTOM], a.style[mxConstants.STYLE_SPACING_LEFT], a.style[mxConstants.STYLE_HORIZONTAL], a.style[mxConstants.STYLE_LABEL_BACKGROUNDCOLOR], a.style[mxConstants.STYLE_LABEL_BORDERCOLOR], c.isWrapping(a.cell) && c.isHtmlLabel(a.cell), c.isLabelClipped(a.cell), a.style[mxConstants.STYLE_OVERFLOW], a.style[mxConstants.STYLE_LABEL_PADDING], a);
}
a.text.opacity = a.style[mxConstants.STYLE_TEXT_OPACITY];
a.text.dialect = d ? mxConstants.DIALECT_STRICTHTML : a.view.graph.dialect;
this.initializeLabel(a);
var e = false,
f = function(b) {
var d = a;
if (mxClient.IS_TOUCH || e) {
d = mxEvent.getClientX(b);
b = mxEvent.getClientY(b);
b = mxUtils.convertPoint(c.container, d, b);
d = c.view.getState(c.getCellAt(b.x, b.y))
}
return d
},
d = mxClient.IS_TOUCH ? "touchmove" : "mousemove",
g = mxClient.IS_TOUCH ? "touchend" : "mouseup";
mxEvent.addListener(a.text.node, mxClient.IS_TOUCH ? "touchstart" : "mousedown", mxUtils.bind(this, function(b) {
if (this.isLabelEvent(a, b)) {
c.fireMouseEvent(mxEvent.MOUSE_DOWN, new mxMouseEvent(b, a));
e = c.dialect != mxConstants.DIALECT_SVG && mxEvent.getSource(b).nodeName == "IMG"
}
}));
mxEvent.addListener(a.text.node, d, mxUtils.bind(this, function(b) {
this.isLabelEvent(a, b) && c.fireMouseEvent(mxEvent.MOUSE_MOVE, new mxMouseEvent(b, f(b)))
}));
mxEvent.addListener(a.text.node, g, mxUtils.bind(this, function(b) {
if (this.isLabelEvent(a, b)) {
c.fireMouseEvent(mxEvent.MOUSE_UP, new mxMouseEvent(b, f(b)));
e = false
}
}));
mxEvent.addListener(a.text.node, "dblclick", mxUtils.bind(this, function(b) {
if (this.isLabelEvent(a, b)) {
c.dblClick(b, a.cell);
mxEvent.consume(b)
}
}))
}
};
如果要求泳道的label居中,则不需要重写底层方法,只需要重写createLabel方法即可
mxCellRenderer.prototype.createLabel = function(a, b) {
var c = a.view.graph;
c.getModel().isEdge(a.cell);
if (a.style[mxConstants.STYLE_FONTSIZE] > 0 || a.style[mxConstants.STYLE_FONTSIZE] == null) {
var d = (c.isHtmlLabel(a.cell) || b != null && mxUtils.isNode(b)) && c.dialect == mxConstants.DIALECT_SVG; /*****************泳道图样式修改start*******************/ var tempSwinlaneHorizontal = a.style[mxConstants.STYLE_HORIZONTAL];
if(c.isSwimlane(a.cell)){
tempsHorizontal = true;
} var tempSwinlaneVertical = c.getVerticalAlign(a);
if(c.isSwimlane(a.cell)){
tempSwinlaneVertical = 'middle';
}
/*****************泳道图样式修改end*******************/ a.text = new mxText(b, new mxRectangle, a.style[mxConstants.STYLE_ALIGN] || mxConstants.ALIGN_CENTER, tempSwinlaneVertical, a.style[mxConstants.STYLE_FONTCOLOR], a.style[mxConstants.STYLE_FONTFAMILY], a.style[mxConstants.STYLE_FONTSIZE],
a.style[mxConstants.STYLE_FONTSTYLE], a.style[mxConstants.STYLE_SPACING], a.style[mxConstants.STYLE_SPACING_TOP], a.style[mxConstants.STYLE_SPACING_RIGHT], a.style[mxConstants.STYLE_SPACING_BOTTOM], a.style[mxConstants.STYLE_SPACING_LEFT], tempsHorizontal, a.style[mxConstants.STYLE_LABEL_BACKGROUNDCOLOR], a.style[mxConstants.STYLE_LABEL_BORDERCOLOR], c.isWrapping(a.cell) && c.isHtmlLabel(a.cell), c.isLabelClipped(a.cell), a.style[mxConstants.STYLE_OVERFLOW], a.style[mxConstants.STYLE_LABEL_PADDING]);
a.text.opacity = a.style[mxConstants.STYLE_TEXT_OPACITY];
a.text.dialect = d ? mxConstants.DIALECT_STRICTHTML : a.view.graph.dialect;
this.initializeLabel(a);
var e = false, f = function(b) {
var d = a;
if (mxClient.IS_TOUCH || e) {
d = mxEvent.getClientX(b);
b = mxEvent.getClientY(b);
b = mxUtils.convertPoint(c.container, d, b);
d = c.view.getState(c.getCellAt(b.x, b.y))
}
return d
}, d = mxClient.IS_TOUCH ? "touchmove" : "mousemove", g = mxClient.IS_TOUCH ? "touchend" : "mouseup";
mxEvent.addListener(a.text.node, mxClient.IS_TOUCH ? "touchstart" : "mousedown", mxUtils.bind(this, function(b) {
if (this.isLabelEvent(a, b)) {
c.fireMouseEvent(mxEvent.MOUSE_DOWN, new mxMouseEvent(b, a));
e = c.dialect != mxConstants.DIALECT_SVG && mxEvent.getSource(b).nodeName == "IMG"
}
}));
mxEvent.addListener(a.text.node, d, mxUtils.bind(this, function(b) {
this.isLabelEvent(a, b) && c.fireMouseEvent(mxEvent.MOUSE_MOVE, new mxMouseEvent(b, f(b)))
}));
mxEvent.addListener(a.text.node, g, mxUtils.bind(this, function(b) {
if (this.isLabelEvent(a, b)) {
c.fireMouseEvent(mxEvent.MOUSE_UP, new mxMouseEvent(b, f(b)));
e = false
}
}));
mxEvent.addListener(a.text.node, "dblclick", mxUtils.bind(this, function(b) {
if (this.isLabelEvent(a, b)) {
c.dblClick(b, a.cell);
mxEvent.consume(b)
}
}))
}
};