hqchart 1.1.13660 → 1.1.13666

package/src/jscommon/umychart.PopKeyboard.js

@@ -0,0 +1,268 @@
+/*
+   Copyright (c) 2018 jones
+ 
+   http://www.apache.org/licenses/LICENSE-2.0
+
+   开源项目 https://github.com/jones2000/HQChart
+ 
+   jones_2000@163.com
+
+   内置弹出键盘精灵
+*/
+
+function JSPopKeyboard()
+{
+    this.DivDialog=null;
+    this.DragTitle=null;
+    this.InputDOM=null;
+    this.Title="HQChart 键盘精灵"
+    this.ID=Guid();
+
+    this.Keyboard=
+    {
+        Option:JSPopKeyboard.GetOption(),
+        JSChart:null,
+    }
+
+    this.Inital=function()
+    {
+        window.addEventListener('mousedown', (e)=>{ this.OnWindowMouseDown(e)});
+    }
+
+    this.OnWindowMouseDown=function(e)
+    {
+        if (!this.DivDialog) return;
+
+        console.log("[JSPopKeyboard::OnWindowMouseDown] e=", e);
+
+        if (!this.DivDialog.contains(e.target))
+        {
+            this.Hide();
+        }
+    }
+
+    this.Create=function()
+    {
+        var divDom=document.createElement('div');
+        divDom.className='jchart_pop_keyboard_dailog';
+        divDom.id=this.ID;
+
+        var divTitle=document.createElement("div");
+        divTitle.className='jschart_keyboard_Title_Div';
+        divTitle.innerText=this.Title;
+        divTitle.onmousedown=(e)=>{ this.OnMouseDownTitle(e); }
+        divDom.appendChild(divTitle);
+
+        var divInput=document.createElement("div");
+        divInput.className='jschart_keyboard_Input_Div';
+        divDom.appendChild(divInput);
+
+        var input=document.createElement("input");
+        input.className="jschart_keyboard_input";
+        input.addEventListener("keydown", (event)=>{ this.OnKeydown(event); });
+        input.addEventListener("keyup", (event)=>{ this.OnKeyup(event); });
+
+        divInput.appendChild(input);
+       
+        var divChart=document.createElement("div");
+        divChart.className="jschart_keyboard_Chart_Div";
+        divDom.appendChild(divChart);
+
+        this.DivDialog=divDom;
+        this.InputDOM=input;
+
+        var chart=JSKeyboardChart.Init(divChart);
+        this.Keyboard.JSChart=chart;
+
+        this.Keyboard.Option.OnCreatedCallback=(chart)=>{ this.OnCreateHQChart(chart); }
+        chart.SetOption(this.Keyboard.Option);  //设置K线配置
+
+        chart.AddEventCallback(
+            {
+                event:JSCHART_EVENT_ID.ON_KEYBOARD_MOUSEUP,
+                callback:(event, data, chart)=>{ this.OnChartMouseUp(event, data, chart);}
+            }
+        )
+
+        document.body.appendChild(divDom);
+    }
+
+    this.OnCreateHQChart=function(chart)
+    {
+
+    }
+
+    this.OnKeydown=function(event)
+    {
+        var aryKey=new Set([
+            40, 
+            38, 
+            13,
+            33,
+            34
+        ]);
+
+        if (aryKey.has(event.keyCode))  
+        {
+            this.Keyboard.JSChart.OnKeyDown(event);
+        }
+
+        if (event.keyCode==27)
+        {
+            this.Hide();
+        }
+    }
+
+    this.OnKeyup=function(event)
+    {
+        var code=event.keyCode;
+        if ((code>=48 && code<=57) || (code>=65 && code<=90) || (code>=97 && code<=122) || code==8)
+        {
+            var strText=this.InputDOM.value;
+            strText=strText.toUpperCase();
+            if (strText.length==0)
+            {
+                this.Hide();
+            }
+            else
+            {
+                this.Keyboard.JSChart.Search(strText);
+            }
+        }
+    }
+
+
+    this.OnMouseDownTitle=function(e)
+    {
+        if (!this.DivDialog) return;
+
+        var dragData={ X:e.clientX, Y:e.clientY };
+        dragData.YOffset=e.clientX - this.DivDialog.offsetLeft;
+        dragData.XOffset=e.clientY - this.DivDialog.offsetTop;
+        this.DragTitle=dragData;
+
+        document.onmousemove=(e)=>{ this.DocOnMouseMoveTitle(e); }
+        document.onmouseup=(e)=>{ this.DocOnMouseUpTitle(e); }
+    }
+
+    this.DocOnMouseMoveTitle=function(e)
+    {
+        if (!this.DragTitle) return;
+
+        var left = e.clientX - this.DragTitle.YOffset;
+        var top = e.clientY - this.DragTitle.XOffset;
+
+        var right=left+this.DivDialog.offsetWidth;
+        var bottom=top+ this.DivDialog.offsetHeight;
+        
+        if ((right+5)>=window.innerWidth) left=window.innerWidth-this.DivDialog.offsetWidth-5;
+        if ((bottom+5)>=window.innerHeight) top=window.innerHeight-this.DivDialog.offsetHeight-5;
+
+        this.DivDialog.style.left = left + 'px';
+        this.DivDialog.style.top = top + 'px';
+
+        if(e.preventDefault) e.preventDefault();
+    }
+
+    this.DocOnMouseUpTitle=function(e)
+    {
+        this.DragTitle=null;
+        this.onmousemove = null;
+        this.onmouseup = null;
+    }
+
+    this.SetSymbolData=function(data)
+    {
+        if (!this.Keyboard.JSChart) return false;
+        this.Keyboard.JSChart.SetSymbolData(data);
+    }
+
+    this.Show=function()
+    {
+        if (!this.DivDialog) return;
+
+        //显示在右下方
+        var height=this.DivDialog.offsetHeight;
+        var width=this.DivDialog.offsetWidth;
+        var xRight=window.innerWidth-5;
+        var ybottom=window.innerHeight-5;
+        var x=xRight-width;
+        var y=ybottom-height;
+
+        this.DivDialog.style.visibility='visible';
+        this.DivDialog.style.top = y + "px";
+        this.DivDialog.style.left = x + "px";
+    }
+
+    this.Hide=function()
+    {
+        if (!this.DivDialog) return;
+
+        this.DivDialog.style.visibility='hidden';
+        this.InputDOM.value="";
+        this.Keyboard.JSChart.ClearSearch();
+    }
+
+    this.IsShow=function()
+    {
+        if (!this.DivDialog) return false;
+        return this.DivDialog.style.visibility==='visible';
+    }
+
+    this.OnGlobalKeydown=function(event)
+    {
+        if (!this.DivDialog) return;
+
+        var code=event.keyCode;
+        if (!this.IsShow() && (code>=48 && code<=57) || (code>=65 && code<=90) || (code>=97 && code<=122))
+        {
+            this.Show();
+            this.InputDOM.focus();
+        }
+        else if (code==27 && this.IsShow())
+        {
+            this.Hide();
+        }
+    }
+
+    this.OnGlobalMouseDown=function(event)
+    {
+        if (!this.DivDialog) return;
+
+        if (this.DivDialog.style.display=='none') return;
+
+        if (!this.DivDialog.contains(event.target))
+        {
+            this.Hide();
+        }
+    }
+
+    this.OnChartMouseUp=function(event, data, chart)
+    {
+        this.InputDOM.focus();
+    }
+}
+
+JSPopKeyboard.GetOption=function()
+{
+    var option= 
+    {
+        Type:'键盘精灵',   //创建图形类型
+        
+        Border: //边框
+        {
+            Left:1,        //左边间距
+            Right:1,       //右边间距
+            Bottom:1,      //底部间距
+            Top:1          //顶部间距
+        },
+
+        BorderLine:0,
+        EnableResize:true
+    };
+
+    return option;
+}
+
+
+

package/src/jscommon/umychart.keyboard.js

@@ -16,6 +16,7 @@ function JSKeyboardChart(divElement)
 {
     this.DivElement=divElement;
     this.JSChartContainer;              //表格控件
+    this.ResizeListener;                //大小变动监听
 
      //h5 canvas
      this.CanvasElement=document.createElement("canvas");
@@ -33,9 +34,18 @@ function JSKeyboardChart(divElement)
     this.OnSize=function()
     {
         //画布大小通过div获取
-        var height=parseInt(this.DivElement.style.height.replace("px",""));
+        var height=this.DivElement.offsetHeight;
+        var width=this.DivElement.offsetWidth;
+        if (this.DivElement.style.height && this.DivElement.style.width)
+        {
+            if (this.DivElement.style.height.includes("px"))
+                height=parseInt(this.DivElement.style.height.replace("px",""));
+            if (this.DivElement.style.width.includes("px"))
+                width=parseInt(this.DivElement.style.width.replace("px",""));
+        }
+       
         this.CanvasElement.height=height;
-        this.CanvasElement.width=parseInt(this.DivElement.style.width.replace("px",""));
+        this.CanvasElement.width=width;
         this.CanvasElement.style.width=this.CanvasElement.width+'px';
         this.CanvasElement.style.height=this.CanvasElement.height+'px';
 
@@ -62,6 +72,18 @@ function JSKeyboardChart(divElement)
         this.JSChartContainer=chart;
         this.DivElement.JSChart=this;   //div中保存一份
 
+        //注册事件
+        if (option.EventCallback)
+        {
+            for(var i=0;i<option.EventCallback.length;++i)
+            {
+                var item=option.EventCallback[i];
+                chart.AddEventCallback(item);
+            }
+        }
+
+        if (option.EnableResize==true) this.CreateResizeListener();
+
         chart.Draw();
     }
 
@@ -106,6 +128,18 @@ function JSKeyboardChart(divElement)
         chart.Frame.ChartBorder.Bottom*=pixelTatio;
     }
 
+    this.CreateResizeListener=function()
+    {
+        this.ResizeListener = new ResizeObserver((entries)=>{ this.OnDivResize(entries); });
+        this.ResizeListener.observe(this.DivElement);
+    }
+
+    this.OnDivResize=function(entries)
+    {
+        JSConsole.Chart.Log("[JSKeyboardChart::OnDivResize] entries=", entries);
+        this.OnSize();
+    }
+
     /////////////////////////////////////////////////////////////////////////////
     //对外接口
     this.SetColumn=function(aryColumn, option)

package/src/jscommon/umychart.report.js

@@ -15,6 +15,7 @@ function JSReportChart(divElement)
 {
     this.DivElement=divElement;
     this.JSChartContainer;              //表格控件
+    this.ResizeListener;                //大小变动监听
 
     //h5 canvas
     this.CanvasElement=document.createElement("canvas");
@@ -141,6 +142,16 @@ function JSReportChart(divElement)
         this.JSChartContainer=chart;
         this.DivElement.JSChart=this;   //div中保存一份
 
+        //注册事件
+        if (option.EventCallback)
+        {
+            for(var i=0;i<option.EventCallback.length;++i)
+            {
+                var item=option.EventCallback[i];
+                chart.AddEventCallback(item);
+            }
+        }
+
         if (option.EnableResize==true) this.CreateResizeListener();
 
         if (option.EnablePopMenuV2===true) chart.InitalPopMenu();

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

@@ -1504,7 +1504,7 @@ input[type="color"] {
     position: absolute;
     height: 500px;
     width: 600px;
-    z-index: 999;
+    z-index: 809;
     visibility:'hidden';
     background-color: rgba(255,255,255,0.95);
     border: solid 1px rgba(200, 210, 219, 0.92);
@@ -1538,6 +1538,65 @@ input[type="color"] {
 
 
 
+/*
+    Copyright (c) 2018 jones
+ 
+    http://www.apache.org/licenses/LICENSE-2.0
+
+   开源项目 https://github.com/jones2000/HQChart
+ 
+   jones_2000@163.com
+
+   内置键盘精灵对话框
+*/
+
+.jchart_pop_keyboard_dailog
+{
+    position: absolute;
+    width: 230px; 
+    height:380px;
+    left: 1px;
+    top: 1px;
+    z-index: 999;
+    visibility:hidden;
+    background-color: rgba(255,255,255,0.95);
+    border: solid 1px rgb(0, 0, 0);
+    display: flex;
+    flex-flow: column;  
+}
+
+.jschart_keyboard_Title_Div
+{
+    padding-left: 2px;
+    height:20px;
+    border-bottom: 1px solid;
+    border-color: rgb(204,204,204);
+    display: flex;
+    cursor: default;
+    user-select: none;
+    background-color:rgb(222,222,222)
+}
+
+.jschart_keyboard_Input_Div
+{
+    display: flex;
+    height:25px;
+    
+}
+
+.jschart_keyboard_input
+{
+    width:100%;
+    margin:2px;
+}
+
+.jschart_keyboard_Chart_Div
+{
+    flex: 1
+}
+
+
+