graph使泳道图的label横向显示

1、如果需要将label靠左边对齐，则必须重写底层源码

新增mxText的一个构造器，主要是增加了一个参数：x（代表当前的cell）

 1 function mxText(a, b, c, d, e, f, g, h, k, i, l, m, n, o, p, q, t, u, v, w, x) {
 2     this.value = a;
 3     this.bounds = b;
 4     this.color = e != null ? e : "black";
 5     this.align = c != null ? c : "";
 6     this.valign = d != null ? d : "";
 7     this.family = f != null ? f : mxConstants.DEFAULT_FONTFAMILY;
 8     this.size = g != null ? g : mxConstants.DEFAULT_FONTSIZE;
 9     this.fontStyle = h != null ? h : 0;
10     this.spacing = 0;
11     this.spacingTop = 0;
12     //this.spacingRight = x.cell.geometry.height/2 - (this.size * 1.25 * a.length);
13     this.spacingRight = 0;
14     this.spacingBottom = 0;
15     this.spacingLeft = 0;
16     this.horizontal = true;
17     this.background = p;
18     this.border = q;
19     this.wrap = t != null ? t : false;
20     this.clipped = u != null ? u : false;
21     this.overflow = v != null ? v : "visible";
22     this.labelPadding = w != null ? w : 0
23 }

重写createTabel方法

 1 mxCellRenderer.prototype.createLabel = function(a, b) {
 2     var c = a.view.graph;
 3     c.getModel().isEdge(a.cell);
 4     if (a.style[mxConstants.STYLE_FONTSIZE] > 0 || a.style[mxConstants.STYLE_FONTSIZE] == null) {
 5         var d = (c.isHtmlLabel(a.cell) || b != null && mxUtils.isNode(b)) && c.dialect == mxConstants.DIALECT_SVG;
 6         //alert(a.cell.value + '-' + b);
 7         //dongyj add :其中b=a.cell.value
 8         if (!a.cell.id && a.cell.id.indexOf("_swimlane") >= 0 && b) {
 9             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],
10                 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);
11         } else {
12             //alert(a.cell.geometry.width);
13             //a.cell.geometry.height;
14 
15             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],
16                 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);
17         }
18         a.text.opacity = a.style[mxConstants.STYLE_TEXT_OPACITY];
19         a.text.dialect = d ? mxConstants.DIALECT_STRICTHTML : a.view.graph.dialect;
20         this.initializeLabel(a);
21         var e = false,
22             f = function(b) {
23                 var d = a;
24                 if (mxClient.IS_TOUCH || e) {
25                     d = mxEvent.getClientX(b);
26                     b = mxEvent.getClientY(b);
27                     b = mxUtils.convertPoint(c.container, d, b);
28                     d = c.view.getState(c.getCellAt(b.x, b.y))
29                 }
30                 return d
31             },
32             d = mxClient.IS_TOUCH ? "touchmove" : "mousemove",
33             g = mxClient.IS_TOUCH ? "touchend" : "mouseup";
34         mxEvent.addListener(a.text.node, mxClient.IS_TOUCH ? "touchstart" : "mousedown", mxUtils.bind(this, function(b) {
35             if (this.isLabelEvent(a, b)) {
36                 c.fireMouseEvent(mxEvent.MOUSE_DOWN, new mxMouseEvent(b, a));
37                 e = c.dialect != mxConstants.DIALECT_SVG && mxEvent.getSource(b).nodeName == "IMG"
38             }
39         }));
40         mxEvent.addListener(a.text.node, d, mxUtils.bind(this, function(b) {
41             this.isLabelEvent(a, b) && c.fireMouseEvent(mxEvent.MOUSE_MOVE, new mxMouseEvent(b, f(b)))
42         }));
43         mxEvent.addListener(a.text.node, g, mxUtils.bind(this, function(b) {
44             if (this.isLabelEvent(a, b)) {
45                 c.fireMouseEvent(mxEvent.MOUSE_UP, new mxMouseEvent(b, f(b)));
46                 e = false
47             }
48         }));
49         mxEvent.addListener(a.text.node, "dblclick", mxUtils.bind(this, function(b) {
50             if (this.isLabelEvent(a, b)) {
51                 c.dblClick(b, a.cell);
52                 mxEvent.consume(b)
53             }
54         }))
55     }
56 };

如果要求泳道的label居中，则不需要重写底层方法，只需要重写createLabel方法即可

 1 mxCellRenderer.prototype.createLabel = function(a, b) {
 2     var c = a.view.graph;
 3     c.getModel().isEdge(a.cell);
 4     if (a.style[mxConstants.STYLE_FONTSIZE] > 0 || a.style[mxConstants.STYLE_FONTSIZE] == null) {
 5         var d = (c.isHtmlLabel(a.cell) || b != null && mxUtils.isNode(b)) && c.dialect == mxConstants.DIALECT_SVG;
 6         
 7         /*****************泳道图样式修改start*******************/
 8 
 9         var tempSwinlaneHorizontal = a.style[mxConstants.STYLE_HORIZONTAL];
10         if(c.isSwimlane(a.cell)){
11           tempsHorizontal = true;
12         }
13     
14         var tempSwinlaneVertical = c.getVerticalAlign(a);
15         if(c.isSwimlane(a.cell)){
16           tempSwinlaneVertical = 'middle';
17         }
18         /*****************泳道图样式修改end*******************/
19 
20         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],
21                 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]);
22         a.text.opacity = a.style[mxConstants.STYLE_TEXT_OPACITY];
23         a.text.dialect = d ? mxConstants.DIALECT_STRICTHTML : a.view.graph.dialect;
24         this.initializeLabel(a);
25         var e = false, f = function(b) {
26             var d = a;
27             if (mxClient.IS_TOUCH || e) {
28                 d = mxEvent.getClientX(b);
29                 b = mxEvent.getClientY(b);
30                 b = mxUtils.convertPoint(c.container, d, b);
31                 d = c.view.getState(c.getCellAt(b.x, b.y))
32             }
33             return d
34         }, d = mxClient.IS_TOUCH ? "touchmove" : "mousemove", g = mxClient.IS_TOUCH ? "touchend" : "mouseup";
35         mxEvent.addListener(a.text.node, mxClient.IS_TOUCH ? "touchstart" : "mousedown", mxUtils.bind(this, function(b) {
36             if (this.isLabelEvent(a, b)) {
37                 c.fireMouseEvent(mxEvent.MOUSE_DOWN, new mxMouseEvent(b, a));
38                 e = c.dialect != mxConstants.DIALECT_SVG && mxEvent.getSource(b).nodeName == "IMG"
39             }
40         }));
41         mxEvent.addListener(a.text.node, d, mxUtils.bind(this, function(b) {
42             this.isLabelEvent(a, b) && c.fireMouseEvent(mxEvent.MOUSE_MOVE, new mxMouseEvent(b, f(b)))
43         }));
44         mxEvent.addListener(a.text.node, g, mxUtils.bind(this, function(b) {
45             if (this.isLabelEvent(a, b)) {
46                 c.fireMouseEvent(mxEvent.MOUSE_UP, new mxMouseEvent(b, f(b)));
47                 e = false
48             }
49         }));
50         mxEvent.addListener(a.text.node, "dblclick", mxUtils.bind(this, function(b) {
51             if (this.isLabelEvent(a, b)) {
52                 c.dblClick(b, a.cell);
53                 mxEvent.consume(b)
54             }
55         }))
56     }
57 };

posted on 2014-09-26 09:34 Coldest Winter 阅读(643) 评论(0) 编辑收藏举报