stop auto-wrapping of text, consider explicit line breaks (<br>) instead. Closes #2527796

authorSylvain Th?nault <sylvain.thenault@logilab.fr>
changesetd58cc0d66822
branchdefault
phasepublic
hiddenno
parent revision#fc089d1ed4fe update to jqplot 1.0.4r1121. Closes #2519163
child revision#7da008827c99 consider border width to avoid displaying it when disabled in html. Closes #2527797
files modified by this revision
data/cubes.jqplot.ext.js
# HG changeset patch
# User Sylvain Thénault <sylvain.thenault@logilab.fr>
# Date 1354227153 -3600
# Thu Nov 29 23:12:33 2012 +0100
# Node ID d58cc0d66822f6b208a7341c457c610060acd1d6
# Parent fc089d1ed4fe7b652ccdf8174ae32b33d32c3885
stop auto-wrapping of text, consider explicit line breaks (<br>) instead. Closes #2527796

diff --git a/data/cubes.jqplot.ext.js b/data/cubes.jqplot.ext.js
@@ -103,37 +103,24 @@
1                  offset.left - baseOffset.left - paddingLeft,
2                  offset.top - baseOffset.top,
3                  $(this).width() + paddingLeft + paddingRight,
4                  $(this).height() + paddingTop + paddingBottom
5              );
6 -            context.font = [$(this).css('font-style'), $(this).css('font-size'), $(this).css('font-family')].join(' ');
7 -            context.fillStyle = $(this).css('color');
8 -            context.textAlign = cwplot.getTextAlign($(this));
9 -            var txt = $.trim($(this).html()).replace(/<br style="">/g, ' ');
10 -            var lineheight = cwplot.getLineheight($(this));
11 -            cwplot.printAtWordWrap(context, txt, offset.left - baseOffset.left, offset.top - baseOffset.top - paddingTop, $(this).width(), lineheight);
12 +            cwplot.copyText(context, $(this), offset.left - baseOffset.left, offset.top - baseOffset.top - paddingTop, $(this).width());
13          });
14          // add x-axis labels, y-axis labels, point labels
15          obj.find('div.jqplot-axis > div, div.jqplot-point-label, div.jqplot-error-message, .jqplot-data-label, div.jqplot-meterGauge-tick, div.jqplot-meterGauge-label').each(function() {
16              var offset = $(this).offset();
17              var context = newCanvas.getContext("2d");
18 -            context.font = [$(this).css('font-style'), $(this).css('font-size'), $(this).css('font-family')].join(' ');
19 -            context.fillStyle = $(this).css('color');
20 -            var txt = $.trim($(this).text());
21 -            var lineheight = cwplot.getLineheight($(this));
22 -            cwplot.printAtWordWrap(context, txt, offset.left-baseOffset.left, offset.top - baseOffset.top - 2.5, $(this).width(), lineheight);
23 +            cwplot.copyText(context, $(this), offset.left - baseOffset.left, offset.top - baseOffset.top - 2.5, $(this).width());
24          });
25          // add the title
26          obj.children("div.jqplot-title").each(function() {
27              var offset = $(this).offset();
28              var context = newCanvas.getContext("2d");
29 -            context.font = [$(this).css('font-style'), $(this).css('font-size'), $(this).css('font-family')].join(' ');
30 -            context.textAlign = cwplot.getTextAlign($(this));
31 -            context.fillStyle = $(this).css('color');
32 -            var txt = $.trim($(this).text());
33 -            var lineheight = cwplot.getLineheight($(this));
34 -            cwplot.printAtWordWrap(context, txt, offset.left-baseOffset.left, offset.top - baseOffset.top, newCanvas.width - parseInt(obj.css('margin-left').replace('px', ''))- parseInt(obj.css('margin-right').replace('px', '')), lineheight);
35 +            cwplot.copyText(context, $(this), offset.left - baseOffset.left, offset.top - baseOffset.top,
36 +                            newCanvas.width - parseInt(obj.css('margin-left').replace('px', '')) - parseInt(obj.css('margin-right').replace('px', '')));
37          });
38          // add the legend
39          obj.children("table.jqplot-table-legend").each(function() {
40              var offset = $(this).offset();
41              var context = newCanvas.getContext("2d");
@@ -162,17 +149,12 @@
42              );
43          });
44          obj.find("td.jqplot-table-legend").each(function() {
45              var offset = $(this).offset();
46              var context = newCanvas.getContext("2d");
47 -            context.font = [$(this).css('font-style'), $(this).css('font-size'), $(this).css('font-family')].join(' ');
48 -            context.fillStyle = $(this).css('color');
49 -            context.textAlign = cwplot.getTextAlign($(this));
50              context.textBaseline = $(this).css('vertical-align');
51 -            var txt = $.trim($(this).text());
52 -            var lineheight = cwplot.getLineheight($(this));
53 -            cwplot.printAtWordWrap(context, txt, offset.left-baseOffset.left, offset.top - baseOffset.top + parseInt($(this).css('padding-top').replace('px','')), $(this).width(), lineheight);
54 +            cwplot.copyText(context, $(this), offset.left-baseOffset.left, offset.top - baseOffset.top + parseInt($(this).css('padding-top').replace('px','')), $(this).width());
55          });
56          return newCanvas;
57      };
58  });
59 
@@ -195,45 +177,30 @@
60              textalign = 'left';
61          }
62          return textalign;
63      },
64 
65 -    printAtWordWrap: function(context, text, x, y, fitWidth, lineheight) {
66 -        var textArr = [];
67 -        fitWidth = fitWidth || 0;
68 -        if (fitWidth <= 0) {
69 -            textArr.push(text);
70 +    copyText: function(context, $this, x, y, fitWidth) {
71 +        if (!$.trim($this.text())) {
72 +            return; // no text to copy
73          }
74 -        var words = text.split(' ');
75 -        var idx = 1;
76 -        while (words.length > 0 && idx <= words.length) {
77 -            var str = words.slice(0, idx).join(' ');
78 -            var w = context.measureText(str).width;
79 -            if (w > fitWidth) {
80 -                if (idx == 1) {
81 -                    idx = 2;
82 -                }
83 -                textArr.push(words.slice(0, idx - 1).join(' '));
84 -                words = words.splice(idx - 1);
85 -                idx = 1;
86 -            } else {
87 -                idx++;
88 -            }
89 -        }
90 -        if (words.length && idx > 0) {
91 -            textArr.push(words.join(' '));
92 -        }
93 +        // initialize context
94 +        context.font = [$this.css('font-style'), $this.css('font-size'), $this.css('font-family')].join(' ');
95 +        context.fillStyle = $this.css('color');
96 +        context.textAlign = cwplot.getTextAlign($this);
97 +        var lineheight = cwplot.getLineheight($this);
98          if (context.textAlign == 'center') {
99              x += fitWidth/2;
100          }
101          if (context.textBaseline == 'middle') {
102              y -= lineheight/2;
103          } else if(context.textBaseline == 'top') {
104              y -= lineheight;
105          }
106 +        var textArr = $.trim($this.html()).split(/<br[^>]*>/g);
107          for (idx = textArr.length - 1; idx >= 0; idx--) {
108 -            var line = textArr.pop();
109 +            var line = textArr.pop().replace(/<[^>]*>/g, '');
110              if (context.measureText(line).width > fitWidth && context.textAlign == 'center') {
111                  x -= fitWidth/2;
112                  context.textAlign = 'left';
113                  context.fillText(line, x, y + (idx+1) * lineheight);
114                  context.textAlign = 'center';