• 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 };
  • 相关阅读:
    常用shell
    JavaScript基础
    CSS动画-页面特效
    CSS3常用操作
    CSS3的盒子模型
    CSS定位
    JQuery中的DOM操作
    [单词用法总结]-as
    JQuery选择器
    css选择器
  • 原文地址:https://www.cnblogs.com/caroline/p/3994175.html
Copyright © 2020-2023  润新知