hqchart 1.1.13672 → 1.1.13682

package/src/jscommon/umychart.keyboard.js

@@ -257,6 +257,7 @@ function JSKeyboardChartContainer(uielement)
    
     //拖拽滚动条
     this.DragYScroll=null;  //{Start:{x,y}, End:{x, y}}
+
     this.IsDestroy=false;        //是否已经销毁了
 
     this.ChartDestory=function()    //销毁
@@ -297,6 +298,7 @@ function JSKeyboardChartContainer(uielement)
             this.Data.Data=aryExactQuery.concat(aryFuzzyQuery);
 
         this.ChartPaint[0].SelectedRow=0;
+        this.ChartPaint[0].SizeChange=true;
 
         JSConsole.Chart.Log(`[JSKeyboardChart:Search] search=${strSearch}, source=${this.SourceData.Data.length} match=${this.Data.Data.length}`);
 
@@ -373,6 +375,12 @@ function JSKeyboardChartContainer(uielement)
         chart.Data=this.Data;
         this.ChartPaint[0]=chart;
 
+        chart.VScrollbar=new ChartKeyboardVScrollbar();
+        chart.VScrollbar.Frame=this.Frame;
+        chart.VScrollbar.Canvas=this.Canvas;
+        chart.VScrollbar.ChartBorder=this.Frame.ChartBorder;
+        chart.VScrollbar.Report=chart;
+
         if (option)
         {
             
@@ -624,7 +632,7 @@ function JSKeyboardChartContainer(uielement)
 
     this.UIOnMouseDown=function(e)
     {
-        this.DragXScroll=null;
+        this.DragYScroll=null;
         this.DragMove={ Click:{ X:e.clientX, Y:e.clientY }, Move:{X:e.clientX, Y:e.clientY}, PreMove:{X:e.clientX, Y:e.clientY } };
 
         var pixelTatio = GetDevicePixelRatio();
@@ -643,6 +651,29 @@ function JSKeyboardChartContainer(uielement)
                 if (clickData.Redraw==true)
                     this.Draw();
             }
+            else if (clickData.Type==5 && e.button==0)  //右侧滚动条
+            {
+                var scroll=clickData.VScrollbar;
+                if (scroll.Type==1) //顶部按钮
+                {
+                    if (this.MoveYOffset(-1)) 
+                        this.Draw();
+                }
+                else if (scroll.Type==2)   //底部按钮
+                {
+                    if (this.MoveYOffset(1)) 
+                        this.Draw();
+                }
+                else if (scroll.Type==3)    //滚动条
+                {
+                    this.DragYScroll={ Click:{X:x, Y:y}, LastMove:{X:x, Y:y} };
+                }
+                else if (scroll.Type==4)    //滚动条内部
+                {
+                    if (this.SetYOffset(scroll.Pos)) 
+                        this.Draw();
+                }
+            }
         }
 
         document.onmousemove=(e)=>{ this.DocOnMouseMove(e); }
@@ -688,68 +719,17 @@ function JSKeyboardChartContainer(uielement)
         var x = (e.clientX-this.UIElement.getBoundingClientRect().left)*pixelTatio;
         var y = (e.clientY-this.UIElement.getBoundingClientRect().top)*pixelTatio;
 
-        //JSConsole.Chart.Log(`[JSReportChartContainer::DocOnMouseMove] x=${x}, y=${y}`);
-        
-        if (this.DragRow)
-        {
-            var drag=this.DragRow;
-            var moveSetpY=drag.LastMove.Y-e.clientY;
-            if (Math.abs(moveSetpY)<2) return;
-            var reportChart=this.GetReportChart();
-            drag.LastMove.X=e.clientX;
-            drag.LastMove.Y=e.clientY;
-            drag.Inside={X:x, Y:y};
-
-            if (reportChart) 
-            {
-                var moveRow=reportChart.OnDrawgRow(x,y,e);
-                if (moveRow )
-                {
-                    if (moveRow.Type==2)
-                    {
-                        if (moveRow.Data.DataIndex!=drag.Data.Row.DataIndex)
-                        {
-                            drag.MoveRow=moveRow;
-                        }
-                    }
-                    else if (moveRow.Type==7)
-                    {
-                        var pageStatus=reportChart.GetCurrentPageStatus();
-                        if (!pageStatus.IsEnd)
-                        {
-                            this.MoveYOffset(1, false);
-                            drag.MoveRow=null;
-
-                            this.EnablePageScroll=true;
-                            this.AutoScrollPage(2);
-                        }
-                    }
-                    else if (moveRow.Type==5)
-                    {
-                        if (this.Data.YOffset>0)
-                        {
-                            this.MoveYOffset(-1, false);
-                            drag.MoveRow=null;
-
-                            this.EnablePageScroll=true;
-                            this.AutoScrollPage(-2);
-                        }
-                    }
-                }
-                reportChart.DragRow=drag;
-            }
-
-            this.Draw();
-        }
-        else if (this.DragXScroll)
+        if (this.DragYScroll)
         {
             var chart=this.ChartPaint[0];
-            if (!chart || !chart.Tab) return;
+            if (!chart || !chart.VScrollbar) return;
+
+            this.DragYScroll.LastMove.X=x;
+            this.DragYScroll.LastMove.Y=y;
 
-            this.DragXScroll.LastMove.X=x;
-            this.DragXScroll.LastMove.Y=y;
-            var pos=chart.Tab.GetScrollPostionByPoint(x,y);
-            if (this.SetXOffset(pos)) this.Draw();
+            var pos=chart.VScrollbar.GetScrollPostionByPoint(x,y);
+            if (this.SetYOffset(pos)) 
+                this.Draw();
         }
     }
 
@@ -759,6 +739,8 @@ function JSKeyboardChartContainer(uielement)
         document.onmousemove=null;
         document.onmouseup=null; 
 
+        this.DragYScroll=null;
+
         var event=this.GetEventCallback(JSCHART_EVENT_ID.ON_KEYBOARD_MOUSEUP)
         if (event && event.Callback)
         {
@@ -1065,6 +1047,21 @@ function JSKeyboardChartContainer(uielement)
             return result;
         }
     }
+
+    this.SetYOffset=function(pos)
+    {
+        if (!IFrameSplitOperator.IsNumber(pos)) return false;
+        var chart=this.ChartPaint[0];
+        if (!chart) return false;
+
+        var maxOffset=chart.GetYScrollRange();
+        if (pos<0) pos=0;
+        if (pos>maxOffset) pos=maxOffset;
+
+        this.Data.YOffset=pos;
+
+        return true;
+    }
 }
 
 function JSKeyboardFrame()
@@ -1074,14 +1071,14 @@ function JSKeyboardFrame()
 
     this.BorderLine=null;                   //1=上 2=下 4=左 8=右
 
-    this.BorderColor=g_JSChartResource.Report.BorderColor;    //边框线
+    this.BorderColor=g_JSChartResource.Keyboard.BorderColor;    //边框线
 
     this.LogoTextColor=g_JSChartResource.FrameLogo.TextColor;
     this.LogoTextFont=g_JSChartResource.FrameLogo.Font;
 
-    this.ReloadResource=function(resource)
+    this.ReloadResource=function(option)
     {
-        this.BorderColor=g_JSChartResource.Report.BorderColor;    //边框线
+        this.BorderColor=g_JSChartResource.Keyboard.BorderColor;    //边框线
         this.LogoTextColor=g_JSChartResource.FrameLogo.TextColor;
         this.LogoTextFont=g_JSChartResource.FrameLogo.Font;
     }
@@ -1156,7 +1153,8 @@ var KEYBOARD_COLUMN_ID=
     SHORT_SYMBOL_ID:0,  //不带后缀代码
     SYMBOL_ID:1,     
     NAME_ID:2,      //简称
-    TYPE_ID:3       //类型
+    TYPE_ID:3,       //类型
+    TYPE_NAME_ID:4,      //类型中文名字
 }
 
 
@@ -1177,10 +1175,12 @@ function ChartSymbolList()
     this.IsDrawBorder=false;            //是否绘制单元格边框
 
     this.ShowSymbol=[];                 //显示的股票列表 { Index:序号(排序用), Symbol:股票代码 }
+
+    this.VScrollbar;                    //竖向滚动条
    
     this.BorderColor=g_JSChartResource.Keyboard.BorderColor;          //边框线
     this.SelectedColor=g_JSChartResource.Keyboard.SelectedColor;      //选中行
-    this.TextColor=g_JSChartResource.Keyboard.TextColor;                //文字颜色
+    this.TextColor=g_JSChartResource.Keyboard.TextColor;              //文字颜色
 
     //表格内容配置
     this.ItemFontConfig={ Size:g_JSChartResource.Keyboard.Item.Font.Size, Name:g_JSChartResource.Keyboard.Item.Font.Name };
@@ -1204,14 +1204,20 @@ function ChartSymbolList()
     [
         { Type:KEYBOARD_COLUMN_ID.SHORT_SYMBOL_ID, Title:"代码", TextAlign:"left", Width:null, MaxText:"888888" },
         { Type:KEYBOARD_COLUMN_ID.NAME_ID, Title:"名称", TextAlign:"left", Width:null, MaxText:"擎擎擎擎擎擎" },
-        { Type:KEYBOARD_COLUMN_ID.TYPE_ID, Title:"类型", TextAlign:"right", Width:null, MaxText:"擎擎擎擎" },
+        //{ Type:KEYBOARD_COLUMN_ID.TYPE_ID, Title:"类型", TextAlign:"right", Width:null, MaxText:"擎擎擎擎" },
+        { Type:KEYBOARD_COLUMN_ID.TYPE_NAME_ID, Title:"类型", TextAlign:"right", Width:null, MaxText:"擎擎擎擎" },
+        
     ];
 
     this.RectClient={ };
 
     this.ReloadResource=function(resource)
     {
-       
+        this.BorderColor=g_JSChartResource.Keyboard.BorderColor;          //边框线
+        this.SelectedColor=g_JSChartResource.Keyboard.SelectedColor;      //选中行
+        this.TextColor=g_JSChartResource.Keyboard.TextColor;              //文字颜色
+
+        if (this.VScrollbar) this.VScrollbar.ReloadResource(resource);
     }
 
     this.SetColumn=function(aryColumn)
@@ -1226,10 +1232,11 @@ function ChartSymbolList()
         if (this.SizeChange) this.CalculateSize();
         else this.UpdateCacheData();
 
+        var bShowVScrollbar=this.IsShowVScrollbar();
         this.Canvas.save();
 
         this.Canvas.beginPath();
-        this.Canvas.rect(this.RectClient.Left,this.RectClient.Top,(this.RectClient.Right-this.RectClient.Left),(this.RectClient.Bottom-this.RectClient.Top));
+        this.Canvas.rect(this.RectClient.Left,this.RectClient.Top+1,(this.RectClient.Right-this.RectClient.Left),(this.RectClient.Bottom-(this.RectClient.Top+1)));
         //this.Canvas.stroke(); //调试用
         this.Canvas.clip();
 
@@ -1238,6 +1245,12 @@ function ChartSymbolList()
         
         this.DrawBorder();
 
+        if (this.VScrollbar && bShowVScrollbar)
+        {
+            var bottom=this.ChartBorder.GetBottom();
+            this.VScrollbar.DrawScrollbar(this.RectClient.Left,this.RectClient.Top+2, this.RectClient.Right+this.VScrollbar.ButtonSize+2, bottom-2);
+        }
+
         this.SizeChange=false;
     }
 
@@ -1248,6 +1261,12 @@ function ChartSymbolList()
         this.RectClient.Right=this.ChartBorder.GetRight();
         this.RectClient.Top=this.ChartBorder.GetTop();
         this.RectClient.Bottom=this.ChartBorder.GetBottom();
+
+        var bShowVScrollbar=this.IsShowVScrollbar();
+        if (bShowVScrollbar && this.VScrollbar && this.VScrollbar.Enable)
+        {
+            this.RectClient.Right-=(this.VScrollbar.ButtonSize+2);
+        }
     }
 
     this.GetPageSize=function(recalculate) //recalculate 是否重新计算
@@ -1281,6 +1300,8 @@ function ChartSymbolList()
 
     this.CalculateSize=function()   //计算大小
     {
+        if (this.VScrollbar && this.VScrollbar.Enable) this.VScrollbar.CalculateSize();
+
         this.UpdateCacheData();
 
         var pixelRatio=GetDevicePixelRatio();
@@ -1450,11 +1471,11 @@ function ChartSymbolList()
                 if (stock.Color) drawInfo.TextColor=stock.Color;
             }
         }
-        else if (column.Type==KEYBOARD_COLUMN_ID.TYPE_ID)
+        else if (column.Type==KEYBOARD_COLUMN_ID.TYPE_NAME_ID)
         {
-            if (stock && stock.Type) 
+            if (stock && stock.TypeName) 
             {
-                drawInfo.Text=this.TextEllipsis(stock.Type, textWidth, column.MaxText);
+                drawInfo.Text=this.TextEllipsis(stock.TypeName, textWidth, column.MaxText);
                 if (stock.Color) drawInfo.TextColor=stock.Color;
             }
         }
@@ -1475,6 +1496,7 @@ function ChartSymbolList()
         else if (textAlign=='right')
         {
             x=left+width-2;
+            if (left+width-2>this.RectClient.Right) x=this.RectClient.Right-2;
             this.Canvas.textAlign="right";
         }
         else
@@ -1529,6 +1551,12 @@ function ChartSymbolList()
         else
             var uiElement={Left:null, Top:null};
 
+        if (this.VScrollbar)
+        {
+            var item=this.VScrollbar.OnMouseDown(x,y,e);
+            if (item) return { Type:5, VScrollbar:item };   //右侧滚动条
+        }
+
         var row=this.PtInBody(x,y);
         if (row)
         {
@@ -1689,5 +1717,56 @@ function ChartSymbolList()
             event.Callback(event,data,this);
         }
     }
+
+    this.GetYScrollRange=function()
+    {
+        if (!IFrameSplitOperator.IsNonEmptyArray(this.Data.Data)) return 0;
+
+        var maxOffset=this.Data.Data.length-this.RowCount;
+
+        return maxOffset;
+    }
+
+    //大于1屏数据 显示滚动条
+    this.IsShowVScrollbar=function()
+    {
+        if (!IFrameSplitOperator.IsNonEmptyArray(this.Data.Data)) return false;
+        
+        return this.Data.Data.length>this.RowCount;
+    }
+}
+
+//纵向滚动条
+function ChartKeyboardVScrollbar()
+{
+    this.newMethod=ChartVScrollbar;   //派生
+    this.newMethod();
+    delete this.newMethod;
+
+    this.ClassName='ChartKeyboardVScrollbar';
+    this.Enable=true;
+
+    this.ScrollBarHeight=g_JSChartResource.Keyboard.VScrollbar.ScrollBarHeight;
+    this.ButtonColor=g_JSChartResource.Keyboard.VScrollbar.ButtonColor;
+    this.BarColor=g_JSChartResource.Keyboard.VScrollbar.BarColor;
+    this.BorderColor=g_JSChartResource.Keyboard.VScrollbar.BorderColor;
+    this.BGColor=g_JSChartResource.Keyboard.VScrollbar.BGColor;
+    this.Mergin={ Left:2, Right:2, Top:2, Bottom:2 };
+    this.BarWithConfig={ Size:g_JSChartResource.Keyboard.VScrollbar.BarWidth.Size };
+
+    this.ReloadResource=function(resource)
+    {
+        this.ScrollBarHeight=g_JSChartResource.Keyboard.VScrollbar.ScrollBarHeight;
+        this.ButtonColor=g_JSChartResource.Keyboard.VScrollbar.ButtonColor;
+        this.BarColor=g_JSChartResource.Keyboard.VScrollbar.BarColor;
+        this.BorderColor=g_JSChartResource.Keyboard.VScrollbar.BorderColor;
+        this.BGColor=g_JSChartResource.Keyboard.VScrollbar.BGColor;
+        this.BarWithConfig={ Size:g_JSChartResource.Keyboard.VScrollbar.BarWidth.Size };
+    }
+
+    this.IsShowCallback=function()
+    {
+        return true;
+    }
 }
 

package/src/jscommon/umychart.report.js

@@ -7773,7 +7773,7 @@ function ChartVScrollbar()
     this.ChartBorder;                   //边框信息
     this.ChartFrame;                    //框架画法
     this.Name;                          //名称
-    this.ClassName='ChartReportTab';       //类名
+    this.ClassName='ChartVScrollbar';       //类名
     this.IsDrawFirst=false;
     this.GetEventCallback;              //获取事件
     this.Report;

package/src/jscommon/umychart.resource/css/tools.css

@@ -1554,7 +1554,7 @@ input[type="color"] {
 {
     position: absolute;
     width: 230px; 
-    height:380px;
+    height:360px;
     left: 1px;
     top: 1px;
     z-index: 999;
@@ -1574,25 +1574,38 @@ input[type="color"] {
     display: flex;
     cursor: default;
     user-select: none;
-    background-color:rgb(222,222,222)
+    background-color:rgb(222,222,222);
+    
+}
+.jschart_keyboard_Close_Div
+{
+    margin-left: auto;
+    padding-right: 4px;
+    cursor:pointer;
+}
+
+.jschart_keyboard_Title
+{
+    margin-left:2px;
 }
 
 .jschart_keyboard_Input_Div
 {
     display: flex;
     height:25px;
-    
 }
 
 .jschart_keyboard_input
 {
     width:100%;
     margin:2px;
+    border: 1px solid rgb(192,192,192);
 }
 
 .jschart_keyboard_Chart_Div
 {
-    flex: 1
+    flex: 1;
+    margin:2px;
 }
 
 

package/src/jscommon/umychart.testdata.js

@@ -884,7 +884,16 @@ HQData.Keyboard_RequestSymbolList=function(data, callback)
         shortSymbol=shortSymbol.replace(".sh", "");
         shortSymbol=shortSymbol.replace(".sz", "");
         var symbolItem={ Symbol:item[0], Name:item[1], ShortSymbol:shortSymbol, Spell:item[3], Type:item[2] };
-        if (i%5==0) symbolItem.Color="rgb(255,0,0)";
+        if (symbolItem.Type=="EQA") 
+        {
+            symbolItem.TypeName="股票";
+        }
+        else if (symbolItem.Type=="IDX") 
+        {
+            symbolItem.TypeName="指数";
+            symbolItem.Color="rgb(30,144,255)";
+        }
+
         arySymbol.push(symbolItem);
     }