hqchart 1.1.13520 → 1.1.13531

package/src/jscommon/umychart.report.js

@@ -16,18 +16,76 @@ function JSReportChart(divElement)
     this.DivElement=divElement;
     this.JSChartContainer;              //表格控件
 
-     //h5 canvas
-     this.CanvasElement=document.createElement("canvas");
-     this.CanvasElement.className='jsreportlist-drawing';
-     this.CanvasElement.id=Guid();
-     this.CanvasElement.setAttribute("tabindex",0);
-     if (this.CanvasElement.style) this.CanvasElement.style.outline='none';
-     if(divElement.hasChildNodes())
-     {
-         JSConsole.Chart.Log("[JSReportChart::JSReportChart] divElement hasChildNodes", divElement.childNodes);
-     }
-     divElement.appendChild(this.CanvasElement);
+    //h5 canvas
+    this.CanvasElement=document.createElement("canvas");
+    this.CanvasElement.className='jsreportlist-drawing';
+    this.CanvasElement.id=Guid();
+    this.CanvasElement.setAttribute("tabindex",0);
+    if (this.CanvasElement.style) this.CanvasElement.style.outline='none';
+    if(divElement.hasChildNodes())
+    {
+        JSConsole.Chart.Log("[JSReportChart::JSReportChart] divElement hasChildNodes", divElement.childNodes);
+    }
+    divElement.appendChild(this.CanvasElement);
+
+      //额外的画布
+    this.MapExtraCanvasElement=new Map();   //key=画布名字, value={ Element:, Canvas:}
+
+    this.CreateExtraCanvasElement=function(name, option)
+    {
+        if (this.MapExtraCanvasElement.has(name)) return this.MapExtraCanvasElement.get(name);
+
+        var element=document.createElement("canvas");
+        element.className='jsreportlist-drawing-extra';
+        element.id=Guid();
+        if (name==JSReportChart.CorssCursorCanvasKey)  
+            element.setAttribute("tabindex",5);
+        else 
+            element.setAttribute("tabindex",1);
+
+        if (element.style) 
+        {
+            element.style.outline='none';
+            element.style.position="absolute";
+            element.style.left='0px';
+            element.style.top='0px';
+            element.style["pointer-events"]="none";
+        }
+
+        if (option)
+        {
+            if (IFrameSplitOperator.IsNumber(option.TabIndex))  element.setAttribute("tabindex",option.TabIndex);
+            if (IFrameSplitOperator.IsNumber(option.ZIndex))  element.style["z-index"]=option.ZIndex;
+        }
+
+        if (this.CanvasElement)
+        {
+            element.height=this.CanvasElement.height;
+            element.width=this.CanvasElement.width;
+            if (element.style)
+            {
+                element.style.width=this.CanvasElement.style.width;
+                element.style.height=this.CanvasElement.style.height
+            }
+        }
+
+        divElement.appendChild(element);
+
+        var item={ Element:element, Canvas:null };
+        this.MapExtraCanvasElement.set(name, item);
+    }
+
+    this.GetExtraCanvas=function(name)
+    {
+        if (!this.MapExtraCanvasElement.has(name)) return null;
+
+        var item=this.MapExtraCanvasElement.get(name);
+        if (!item.Element) return null;
 
+        if (!item.Canvas) item.Canvas=item.Element.getContext("2d");
+        
+        return item;
+    }
 
     this.OnSize=function()
     {
@@ -42,6 +100,19 @@ function JSReportChart(divElement)
         this.CanvasElement.height*=pixelTatio;
         this.CanvasElement.width*=pixelTatio;
 
+        //扩展画布
+        for(var mapItem of this.MapExtraCanvasElement)
+        {
+            var item=mapItem[1];
+            var element=item.Element;
+            if (!element) continue;
+
+            element.height=this.CanvasElement.height;
+            element.width=this.CanvasElement.width;
+            element.style.width=this.CanvasElement.style.width;
+            element.style.height=this.CanvasElement.style.height;
+        }
+
         JSConsole.Chart.Log(`[JSReportChart::OnSize] devicePixelRatio=${window.devicePixelRatio}, height=${this.CanvasElement.height}, width=${this.CanvasElement.width}`);
 
         if (this.JSChartContainer && this.JSChartContainer.OnSize)
@@ -62,6 +133,10 @@ function JSReportChart(divElement)
         this.DivElement.JSChart=this;   //div中保存一份
 
         if (option.EnablePopMenuV2===true) chart.InitalPopMenu();
+        if (option.EnableTooltip) 
+        {
+            this.CreateExtraCanvasElement(JSReportChart.TooltipCursorCanvasKey, { ZIndex:99 });
+        }
 
         if (option.Symbol) chart.Symbol=option.Symbol;
         if (option.Name) chart.Name=option.Name;
@@ -83,6 +158,8 @@ function JSReportChart(divElement)
     this.CreateJSReportChartContainer=function(option)
     {
         var chart=new JSReportChartContainer(this.CanvasElement);
+        chart.GetExtraCanvas=(name)=>{ return this.GetExtraCanvas(name); }
+
         chart.Create(option);
 
         if (option.NetworkFilter) chart.NetworkFilter=option.NetworkFilter;
@@ -203,6 +280,8 @@ function JSReportChart(divElement)
     }
 }
 
+JSReportChart.TooltipCursorCanvasKey="hq_report_tooltip";   //提示信息
+
 
 JSReportChart.Init=function(divElement)
 {
@@ -281,6 +360,9 @@ function JSReportChartContainer(uielement)
     this.SplashTitle={ StockList:"下载码表中.....", MemberList:"下载成分中....." } ;
 
     this.Canvas=uielement.getContext("2d");         //画布
+    
+    this.TooltipCanvas;
+    this.ChartTooltip;
 
     this.Tooltip=document.createElement("div");
     this.Tooltip.className='jsreport-tooltip';
@@ -352,6 +434,8 @@ function JSReportChartContainer(uielement)
     this.JSPopMenu;             //内置菜单
     this.IsShowRightMenu=true;
 
+    this.LastMouseStatus={ MoveStatus:null, TooltipStatus:null };
+   
     this.ChartDestory=function()    //销毁
     {
         this.IsDestroy=true;
@@ -421,6 +505,15 @@ function JSReportChartContainer(uielement)
     }
 
 
+    //清空画布
+    this.ClearCanvas=function(canvas)
+    {
+        if (!canvas) return;
+        if (!this.UIElement) return;
+
+        canvas.clearRect(0,0,this.UIElement.width,this.UIElement.height);
+    }
+
     //清空固定行数据
     this.ClearFixedRowData=function()
     {
@@ -493,6 +586,12 @@ function JSReportChartContainer(uielement)
 
         this.ChartPaint[0]=chart;
 
+         //提示信息
+        var chartTooltip=new ChartCellTooltip();
+        chartTooltip.Frame=this.Frame;
+        chartTooltip.ChartBorder=this.Frame.ChartBorder;
+        this.ChartTooltip=chartTooltip;
+
         //页脚
         if (option && option.PageInfo===true)
         {
@@ -604,6 +703,8 @@ function JSReportChartContainer(uielement)
         {
             this.DelayDraw(500);
         }
+
+        this.DrawTooltip(this.LastMouseStatus.TooltipStatus);
     }
 
     this.DelayDraw=function(frequency)
@@ -1370,6 +1471,7 @@ function JSReportChartContainer(uielement)
             console.log(`[OnWheel] wheelValue=${wheelValue}`);
             if (wheelValue<0)   //下
             {
+                this.LastMouseStatus.TooltipStatus=null;
                 if (this.GotoNextItem(1))
                 {
                     this.Draw();
@@ -1378,6 +1480,7 @@ function JSReportChartContainer(uielement)
             }
             else if (wheelValue>0)  //上
             {
+                this.LastMouseStatus.TooltipStatus=null;
                 if (this.GotoNextItem(-1))
                 {
                     this.Draw();
@@ -1389,6 +1492,7 @@ function JSReportChartContainer(uielement)
         {
             if (wheelValue<0)   //下一页
             {
+                this.LastMouseStatus.TooltipStatus=null;
                 if (this.GotoNextPage(this.PageUpDownCycle)) 
                 {
                     this.Draw();
@@ -1397,6 +1501,7 @@ function JSReportChartContainer(uielement)
             }
             else if (wheelValue>0)  //上一页
             {
+                this.LastMouseStatus.TooltipStatus=null;
                 if (this.GotoPreviousPage(this.PageUpDownCycle)) 
                 {
                     this.Draw();
@@ -1618,7 +1723,13 @@ function JSReportChartContainer(uielement)
         var pixelTatio = GetDevicePixelRatio();
         var x = (e.clientX-this.UIElement.getBoundingClientRect().left)*pixelTatio;
         var y = (e.clientY-this.UIElement.getBoundingClientRect().top)*pixelTatio;
+        
+        this.LastMouseStatus.OnMouseMove=null;
 
+        var bDrawTooltip=false;
+        if (this.LastMouseStatus.TooltipStatus) bDrawTooltip=true;
+        this.LastMouseStatus.TooltipStatus=null;
+        
         if (this.DragRow) return;
         if (this.DrawHeader) return;
         if (this.DragColumnWidth) return;
@@ -1638,10 +1749,11 @@ function JSReportChartContainer(uielement)
             }
         }
 
+        this.LastMouseStatus.OnMouseMove={ X:x, Y:y };
         var mouseStatus={ Cursor:"default", Name:"Default"};;   //鼠标状态
         var report=this.GetReportChart();
-        var cell=null;
         var bDraw=false;
+        
         if (report)
         {
             var dragHeaderWidth=report.PtInHeaderDragBorder(x,y);
@@ -1652,7 +1764,12 @@ function JSReportChartContainer(uielement)
             }
             else
             {
-                cell=report.PtInCell(x,y);  //是否在单元格(EnableTooltip)
+                var tooltipData=report.GetTooltipData(x,y);  //单元格提示信息
+                if (tooltipData)
+                {
+                    this.LastMouseStatus.TooltipStatus={ X:x, Y:y, Data:tooltipData };
+                    bDrawTooltip=true;
+                }
             }
 
             var scrollbar=report.VScrollbar;
@@ -1668,16 +1785,20 @@ function JSReportChartContainer(uielement)
             }
         }
 
+
+        /* 目前没有用到
         var event=this.GetEventCallback(JSCHART_EVENT_ID.ON_REPORT_MOUSE_MOVE);
         if (event)
         {
             var sendData={X:x, Y:y, Cell:cell };
             event.Callback(event,sendData,this);
         }
+        */
 
         if (mouseStatus) this.UIElement.style.cursor=mouseStatus.Cursor;
 
         if (bDraw) this.Draw();
+        else if (bDrawTooltip) this.DrawTooltip(this.LastMouseStatus.TooltipStatus);
     }
 
     this.UIOnMounseOut=function(e)
@@ -3246,6 +3367,28 @@ function JSReportChartContainer(uielement)
 
         return true;
     }
+
+    this.DrawTooltip=function(tooltipStatus)
+    {
+        if (!this.GetExtraCanvas) return;
+        if (!this.TooltipCanvas)
+        {
+            var finder=this.GetExtraCanvas(JSReportChart.TooltipCursorCanvasKey);
+            if (!finder) return;
+            this.TooltipCanvas=finder.Canvas;
+        }
+
+        if (!this.TooltipCanvas) return;
+        this.ClearCanvas(this.TooltipCanvas);
+        if (!this.ChartTooltip) return;
+
+        if (!tooltipStatus || !tooltipStatus.Data) return;
+
+        this.ChartTooltip.Canvas=this.TooltipCanvas;
+        this.ChartTooltip.Point={ X:tooltipStatus.X, Y:tooltipStatus.Y };
+        this.ChartTooltip.Data=tooltipStatus.Data.Data;
+        this.ChartTooltip.Draw();
+    }
 }
 
 
@@ -3556,6 +3699,9 @@ function ChartReport()
 
     this.RectClient={};
 
+    //{ Rect:rtItem, Stock:stock, Index:index, Column:column, RowType:rowType, Type:drawInfo.Tooltip.Type, Data:{ AryText:[ {Text:xx} ]} };
+    //Type:1=数据截断
+    // { Text, Color, Title:, TitleColor, Space, Margin:{ Left, Top, Right, Bottom }}
     this.TooltipRect=[];
 
     this.ReloadResource=function(resource)
@@ -3654,7 +3800,6 @@ function ChartReport()
             if (item.FullColBGColor) colItem.FullColBGColor=item.FullColBGColor;    //整列背景色
             if (item.HeaderBGColor) colItem.HeaderBGColor=item.HeaderBGColor;       //表头背景色
             if (IFrameSplitOperator.IsNumber(item.Sort)) colItem.Sort=item.Sort;
-            if (IFrameSplitOperator.IsBool(item.EnableTooltip)) colItem.EnableTooltip=item.EnableTooltip;
             if (IFrameSplitOperator.IsNumber(item.FixedWidth)) colItem.FixedWidth=item.FixedWidth;
             if (IFrameSplitOperator.IsBool(item.EnableDragWidth)) colItem.EnableDragWidth=item.EnableDragWidth;
             if (IFrameSplitOperator.IsBool(item.IsDrawCallback)) colItem.IsDrawCallback=item.IsDrawCallback;
@@ -3669,8 +3814,10 @@ function ChartReport()
             if (item.Type==REPORT_COLUMN_ID.CUSTOM_STRING_TEXT_ID)
             {
                 if (!IFrameSplitOperator.IsNumber(item.DataIndex) && !IFrameSplitOperator.IsNumber(item.BlockIndex)) continue;
+                colItem.FormatType=0;   //0=默认格式 1=长度不够使用...
                 if (IFrameSplitOperator.IsNumber(item.DataIndex)) colItem.DataIndex=item.DataIndex;   //数据在扩展数据索引列
                 if (IFrameSplitOperator.IsNumber(item.BlockIndex)) colItem.BlockIndex=item.BlockIndex;
+                if (IFrameSplitOperator.IsNumber(item.FormatType)) colItem.FormatType=item.FormatType;   //输出样式
             }
             else if (item.Type==REPORT_COLUMN_ID.CUSTOM_NUMBER_TEXT_ID)
             {
@@ -4368,7 +4515,7 @@ function ChartReport()
         var x=left+this.ItemMergin.Left;
         var textWidth=column.Width-this.ItemMergin.Left-this.ItemMergin.Right;
         var stock=data.Stock;
-        var drawInfo={ Text:null, TextColor:column.TextColor , TextAlign:column.TextAlign };
+        var drawInfo={ Text:null, TextColor:column.TextColor , TextAlign:column.TextAlign, Tooltip:null };
         var rtItem={ Left:left, Top:top,  Width:column.Width, Height:this.RowHeight };
         rtItem.Right=rtItem.Left+rtItem.Width;
         rtItem.Bottom=rtItem.Top+rtItem.Height;
@@ -4379,12 +4526,6 @@ function ChartReport()
             this.DrawItemBG({ Rect:rtItem, BGColor:column.FullColBGColor });
         }
         
-        //tooltip提示
-        if (column.EnableTooltip===true)
-        {
-            this.TooltipRect.push({ Rect:rtItem, Stock:stock, Index:index, Column:column, RowType:rowType })
-        }
-
         if (column.Type==REPORT_COLUMN_ID.INDEX_ID)
         {
             if (rowType==1) return; //固定行序号空
@@ -4626,10 +4767,84 @@ function ChartReport()
             }
 
             this.DrawItemBG(drawInfo);
-            this.DrawItemText(drawInfo.Text, drawInfo.TextColor, drawInfo.TextAlign, x, top, textWidth, drawInfo.BGColor);
+
+            if (column.Type==REPORT_COLUMN_ID.CUSTOM_STRING_TEXT_ID) 
+                this.DrawCustomText(drawInfo,column, x, top, textWidth);
+            else
+                this.DrawItemText(drawInfo.Text, drawInfo.TextColor, drawInfo.TextAlign, x, top, textWidth, drawInfo.BGColor);
+        }
+
+        //tooltip提示
+        if (drawInfo.Tooltip)
+        {
+            //Type:1=数据截断
+            var tooltipData={ Rect:rtItem, Stock:stock, Index:index, Column:column, RowType:rowType, Type:drawInfo.Tooltip.Type, Data:drawInfo.Tooltip.Data };
+            this.TooltipRect.push(tooltipData);
         }
     }
 
+    this.DrawCustomText=function(drawInfo, column, left, top, cellWidth)
+    {
+        if (!drawInfo.Text) return;
+
+        var text=drawInfo.Text;
+        var x=left;
+        if (drawInfo.TextAlign=='center')
+        {
+            x=left+cellWidth/2;
+            this.Canvas.textAlign="center";
+        }
+        else if (drawInfo.TextAlign=='right')
+        {
+            x=left+cellWidth-2;
+            this.Canvas.textAlign="right";
+        }
+        else
+        {
+            x+=2;
+            this.Canvas.textAlign="left";
+        }
+
+        var textWidth=this.Canvas.measureText(text).width+1;
+        var bClip=false;
+        if (textWidth>=cellWidth)   //长度超过单元格 裁剪
+        {
+            if (column.FormatType==2)
+            {
+                var count=text.length+5;
+                text="";
+                for(var i=0;i<count;++i)
+                    text+="#";
+            }
+            else if (column.FormatType==1)
+            {
+                text=this.TextEllipsis(text, cellWidth, column.MaxText);
+            }
+
+            this.Canvas.save();
+            bClip=true;
+
+            var rtCell={ Left:left, Top:top+this.ItemMergin.Top, Width:cellWidth, Height:this.RowHeight };
+            this.Canvas.beginPath();
+            this.Canvas.rect(rtCell.Left, rtCell.Top, rtCell.Width, rtCell.Height);
+            //this.Canvas.stroke(); //调试用
+            this.Canvas.clip();
+
+            //数据截断提示信息
+            drawInfo.Tooltip=
+            { 
+                Type:1, 
+                Data:{ AryText:[ {Text:drawInfo.Text} ] }
+            }
+        }
+
+        this.Canvas.textBaseline="middle";
+        this.Canvas.fillStyle=drawInfo.TextColor;
+        this.Canvas.fillText(text,x,top+this.ItemMergin.Top+this.RowHeight/2);
+
+        if (bClip) this.Canvas.restore();
+    }
+
     this.DrawSymbolName=function(data, column, left, top, rowType)
     {
         var stock=data.Stock;
@@ -5898,8 +6113,7 @@ function ChartReport()
 
     }
 
-    //坐标所在单元格
-    this.PtInCell=function(x,y)
+    this.GetTooltipData=function(x,y)
     {
         if (!IFrameSplitOperator.IsNonEmptyArray(this.TooltipRect)) return null;
 
@@ -5911,9 +6125,11 @@ function ChartReport()
 
             if (x>=rt.Left && x<=rt.Right && y>=rt.Top && y<=rt.Bottom)
             {
-                return { Rect:item.Rect, Stock:item.Stock, Column:item.Column, Index:item.Index };
+                return { Rect:item.Rect, Stock:item.Stock, Column:item.Column, Index:item.Index, Type:item.Type, Data:item.Data };
             }
         }
+
+        return null;
     }
 
     this.PtInHeaderDragBorder=function(x, y)
@@ -6505,3 +6721,166 @@ function ChartVScrollbar()
         return pos;
     }
 }
+
+
+function ChartCellTooltip()
+{
+    this.Canvas;                            //画布
+    this.ChartBorder;                       //边框信息
+    this.ChartFrame;                        //框架画法
+    this.Name;                              //名称
+    this.ClassName='ChartCellTooltip';      //类名
+    
+    this.BGColor="rgba(255,255,225, 0.9)";
+    this.BorderColor="rgb(0,0,0)";
+    this.Margin={ Left:5, Right:5, Top:4, Bottom:5 };
+    this.Font=`${13*GetDevicePixelRatio()}px 微软雅黑`;
+    this.TextColor="rgb(0,0,0)";
+    this.YOffset=20;
+    this.XOffset=5;
+
+    this.Point; //{ X, Y}
+    this.Data;  //{ AryText:[ { Text, Color, Title:, TitleColor, Space, Margin:{ Left, Top, Right, Bottom }}  ]}   
+    
+
+    this.Draw=function()
+    {
+        if (!this.Canvas) return;
+        if (!this.Data || !IFrameSplitOperator.IsNonEmptyArray(this.Data.AryText)) return;
+        if (!this.Point) return;
+
+        var size={ Width:0, Height:0, Text:[] };
+        this.CalculateTextSize(this.Data.AryText, size);
+        if (!IFrameSplitOperator.IsNonEmptyArray(size.Text)) return;
+
+        this.DrawTooltip(this.Data.AryText, size);
+    }
+
+    this.CalculateTextSize=function(aryText, size)
+    {
+        var width=0, height=0;
+        for(var i=0;i<aryText.length;++i)
+        {
+            var item=aryText[i];
+            var titleHeight=0, titleWidth=0;
+            if (!item.Title && !item.Text) continue;
+
+            if (item.Title)
+            {
+                if (item.TitleFont) this.Canvas.font=item.TitleFont;
+                else this.Canvas.font=this.Font;
+
+                titleWidth=this.Canvas.measureText(item.Title).width;   
+                titleHeight=this.Canvas.measureText("擎").width;
+            }
+
+            var textWidth=0, textHeight=0;
+            if (item.Text)
+            {
+                if (item.Font) this.Canvas.font=item.Font;
+                else this.Canvas.font=this.Font;
+
+                textWidth=this.Canvas.measureText(item.Text).width;   
+                textHeight=this.Canvas.measureText("擎").width;
+            }
+
+            var itemWidth=titleWidth+textWidth;
+            var itemHeight=Math.max(textHeight,titleHeight);
+
+            if (IFrameSplitOperator.IsNumber(item.Space)) itemWidth+=item.Space;
+
+            if (item.Margin)
+            {
+                var margin=item.Margin;
+                if (IFrameSplitOperator.IsNumber(margin.Left)) itemWidth+=margin.Left;
+                if (IFrameSplitOperator.IsNumber(margin.Right)) itemWidth+=margin.Right;
+                if (IFrameSplitOperator.IsNumber(margin.Top)) itemHeight+=margin.Top;
+                if (IFrameSplitOperator.IsNumber(margin.Bottom)) itemHeight+=margin.Bottom;
+            }
+
+            if (width<itemWidth) width=itemWidth;
+            height+=itemHeight;
+
+            size.Text[i]={ Width: itemWidth, Height:itemHeight, TitleWidth:titleWidth, TextWidth:textWidth };
+        }
+
+        if (this.Margin)
+        {
+            var margin=this.Margin;
+            if (IFrameSplitOperator.IsNumber(margin.Left)) width+=margin.Left;
+            if (IFrameSplitOperator.IsNumber(margin.Right)) width+=margin.Right;
+            if (IFrameSplitOperator.IsNumber(margin.Top)) height+=margin.Top;
+            if (IFrameSplitOperator.IsNumber(margin.Bottom)) height+=margin.Bottom;
+        }
+
+        size.Width=width;
+        size.Height=height;
+    }
+
+    this.DrawTooltip=function(aryText, size)
+    {
+        var rtBG={ Left:this.Point.X+this.XOffset, Top:this.Point.Y+this.YOffset, Width:size.Width, Height:size.Height };
+        rtBG.Right=rtBG.Left+rtBG.Width;
+        rtBG.Bottom=rtBG.Top+rtBG.Height;
+
+        var border=this.ChartBorder.GetBorder();
+        if (rtBG.Bottom>border.ChartHeight)
+        {
+            rtBG.Bottom=this.Point.Y;
+            rtBG.Top=rtBG.Bottom-rtBG.Height;
+        }
+
+        if (rtBG.Right>border.ChartWidth)
+        {
+            rtBG.Right=this.Point.X;
+            rtBG.Left=rtBG.Right-rtBG.Width;
+        }
+
+        if (this.BGColor)
+        {
+            this.Canvas.fillStyle=this.BGColor;
+            this.Canvas.fillRect(ToFixedPoint(rtBG.Left),ToFixedPoint(rtBG.Top),ToFixedRect(rtBG.Width),ToFixedRect(rtBG.Height));
+        }
+        
+        if (this.BorderColor)
+        {
+            this.Canvas.strokeStyle=this.BorderColor;
+            this.Canvas.strokeRect(ToFixedPoint(rtBG.Left),ToFixedPoint(rtBG.Top),ToFixedRect(rtBG.Width),ToFixedRect(rtBG.Height));
+        }
+
+        var left=rtBG.Left;
+        var top=rtBG.Top;
+        if (this.Margin && IFrameSplitOperator.IsNumber(this.Margin.Left)) left+=this.Margin.Left;
+        if (this.Margin && IFrameSplitOperator.IsNumber(this.Margin.Top)) top+=this.Margin.Top;
+
+        var xText, yText=top;
+        for(var i=0;i<aryText.length;++i)
+        {
+            var item=aryText[i];
+            if (!item.Title && !item.Text) continue;
+            var itemSize=size.Text[i];
+
+            xText=left;
+            yText+=itemSize.Height;
+
+            if (item.Margin && IFrameSplitOperator.IsNumber(item.Margin.Left)) xText+=item.Margin.Left;
+            if (item.Margin && IFrameSplitOperator.IsNumber(item.Margin.Bottom)) yText-=item.Margin.Bottom;
+            if (item.Title)
+            {
+                if (item.TitleColor) this.Canvas.fillStyle=item.TitleColor;
+                else this.Canvas.fillStyle=this.TextColor;
+                this.Canvas.fillText(item.Title,xText,yText,itemSize.TitleWidth);
+                xText+=itemSize.titleWidth;
+                if (IFrameSplitOperator.IsNumber(item.Space)) xText+=item.Space;
+            }
+
+            if (item.Text)
+            {
+                if (item.Color) this.Canvas.fillStyle=item.Color;
+                else this.Canvas.fillStyle=this.TextColor;
+                this.Canvas.fillText(item.Text,xText,yText,itemSize.TextWidth);
+            }
+
+        }
+    }
+}