hqchart 1.1.13238 → 1.1.13245

package/src/jscommon/umychart.vue/umychart.vue.js

@@ -5581,6 +5581,9 @@ function JSChart(divElement, bOffscreen, bCacheCanvas)
         //内置菜单
         if (option.EnablePopMenuV2===true) chart.InitalPopMenu();
 
+        //画图工具
+        if (option.EnableDrawToolDialogV2===true) chart.InitalDrawToolDialog();
+
         //注册事件
         if (option.EventCallback)
         {
@@ -6831,6 +6834,8 @@ function JSChartContainer(uielement, OffscreenElement, cacheElement)
     this.JSPopMenu;     //内置菜单
     this.IsShowRightMenu=true;  //显示右键菜单
 
+    this.DialogDrawTool;    //画图工具
+
 
     this.ClearStockCache=function()
     {
@@ -6845,6 +6850,37 @@ function JSChartContainer(uielement, OffscreenElement, cacheElement)
         this.JSPopMenu.Inital();
     }
 
+    this.InitalDrawToolDialog=function()
+    {
+        if (this.DialogDrawTool) return;
+
+        this.DialogDrawTool=new JSDialogDrawTool();
+        this.DialogDrawTool.Inital(this);
+        this.DialogDrawTool.Create();
+    }
+
+    this.ShowDrawToolDialog=function(x,y)
+    {
+        if (!this.DialogDrawTool) return;
+
+        var rtClient=this.UIElement.getBoundingClientRect();
+        var rtScroll=GetScrollPosition();
+        
+        var top=this.UIElement.offsetTop+15;
+        var left=this.UIElement.offsetWidth-this.DialogDrawTool.DivDialog.offsetWidth-15;
+        left+=rtClient.left+rtScroll.Left;
+        top+=rtClient.top+rtScroll.Top;
+        
+        this.DialogDrawTool.Show(left,top);
+    }
+
+    this.IsShowDrawToolDialog=function()
+    {
+        if (!this.DialogDrawTool) return false;
+
+        return  this.DialogDrawTool.IsShow();
+    }
+
     //obj={ Element:, Canvas: }
     this.SetCorssCursorElement=function(obj)
     {
@@ -11871,6 +11907,7 @@ function JSChartContainer(uielement, OffscreenElement, cacheElement)
         if (drawPicture.PointCount!=drawPicture.Point.length) return false;
         if (drawPicture.ClassName=="ChartDrawRuler")    //尺子不用保存的
         {
+            if (drawPicture.FinishedCallback) drawPicture.FinishedCallback(drawPicture);
             this.CurrentChartDrawPicture=null;
             return true;
         }
@@ -12056,7 +12093,7 @@ function JSChartContainer(uielement, OffscreenElement, cacheElement)
         {
             var item=this.ExtendChartPaint[i];
             if (!item) continue;
-            if (item.ClassName=="StockChip" || item.ClassName=="DrawToolsButton")
+            if (item.ClassName=="StockChip")
             {
                 if (IFrameSplitOperator.IsNumber(item.Width)) 
                     width+=item.Width;
@@ -13146,30 +13183,8 @@ function JSChartContainer(uielement, OffscreenElement, cacheElement)
                 }
                 break;
             case JSCHART_MENU_ID.CMD_SHOW_DRAWTOOL_ID:
-                var option={Name:'画图工具', Top:this.Frame.ChartBorder.Top };
-                var extendChart=this.CreateExtendChart(option.Name, option);   //创建扩展图形
-                this.SetSizeChange(true);
-                this.Draw();
-                break;
-            case JSCHART_MENU_ID.CMD_HIDE_DRAWTOOL_ID:
-                var drawTools=this.GetExtendChartByClassName('DrawToolsButton');
-                if (drawTools)
-                {
-                    var toolsWidth=drawTools.Chart.Width;
-                    var toolsIndex=parseInt(drawTools.Index);
-                    for(var i=toolsIndex+1; i<this.ExtendChartPaint.length; ++i)   //在画图工具后面创建的需要减去工具的宽度
-                    {
-                        var item=this.ExtendChartPaint[i];
-                        if (item.ClassName=='StockChip')
-                        {
-                            item.Left-=toolsWidth;
-                        }
-                    }
-                    this.DeleteExtendChart(drawTools); 
-                    this.Frame.ChartBorder.Right-=toolsWidth;
-                    this.SetSizeChange(true);
-                    this.Draw();
-                }
+                if (!this.IsShowDrawToolDialog()) 
+                    this.ShowDrawToolDialog();
                 break;
             case JSCHART_MENU_ID.CMD_SHOW_STOCKCHIP_ID:
                 var option={Name:'筹码分布', ShowType:1, Width:230 };
@@ -45901,235 +45916,6 @@ function StockChip()
     }
 }
 
-//画图工具条
-function DrawToolsButton()
-{
-    this.newMethod=IExtendChartPainting;   //派生
-    this.newMethod();
-    delete this.newMethod;
-
-    this.ClassName='DrawToolsButton';
-    this.HQChart;
-    this.ID=Guid();
-    this.ToolsDiv;
-    // this.Color='rgb(105,105,105)';    //颜色
-    this.Color = "#696969";        //input type="color"不支持rgb的颜色格式
-
-    //this.Left=5;
-    this.Top=5*GetDevicePixelRatio();
-    this.Width=45*GetDevicePixelRatio();         //宽度
-
-    this.SetOption=function(option)
-    {
-        var pixelRatio=GetDevicePixelRatio();
-        if (!option) return;
-        if (option.Width>10) this.Width=option.Width*pixelRatio;
-    }
-
-    this.Clear=function()
-    {
-        if (this.ToolsDiv) this.ChartBorder.UIElement.parentNode.removeChild(this.ToolsDiv);
-    }
-
-    this.Draw = function () {
-        if (this.SizeChange == false) return;
-
-        //工具列表
-        const TOOL_LIST =
-            [
-                [
-                    { HTML: { Title: '线段', IClass: 'iconfont icon-draw_line', ID: 'icon-segment' }, Name: '线段' },
-                    { HTML: { Title: '尺子', IClass: 'iconfont icon-ruler', ID: 'icon_ruler' }, Name: '尺子' },
-                    { HTML: { Title: '射线', IClass: 'iconfont icon-draw_rays', ID: 'icon-beam' }, Name: '射线' },
-                    { HTML: { Title: '标价线', IClass: 'iconfont icon-price_line', ID: 'icon-price-line' }, Name: '标价线' },
-                    { HTML: { Title: '垂直线', IClass: 'iconfont icon-vertical_line', ID: 'icon-vertical-line' }, Name: '垂直线' },
-                    { HTML: { Title: '箭头', IClass: 'iconfont icon-draw_rays', ID: 'icon-beam2' }, Name: '箭头' },
-                    { HTML: { Title: '趋势线', IClass: 'iconfont icon-draw_trendline', ID: 'icon-trendline' }, Name: '趋势线' },
-                    { HTML: { Title: '水平线', IClass: 'iconfont icon-draw_hline', ID: 'icon-hline' }, Name: '水平线' },
-                    { HTML: { Title: '水平线段', IClass: 'iconfont icon-draw_hlinesegment', ID: 'icon-hlineseg' }, Name: '水平线段' },
-                    { HTML: { Title: '平行射线', IClass: 'iconfont icon-draw_p_rays_lines', ID: 'icon-rayslineseg' }, Name: '平行射线' },
-                    { HTML: { Title: '平行线', IClass: 'iconfont icon-draw_parallel_lines', ID: 'icon-parallellines' }, Name: '平行线' },
-                    { HTML: { Title: '平行通道', IClass: 'iconfont icon-draw_parallelchannel', ID: 'icon-parallelchannel' }, Name: '平行通道' },
-                    { HTML: { Title: '价格通道线', IClass: 'iconfont icon-draw_pricechannel', ID: 'icon-pricechannel' }, Name: '价格通道线' },
-                    { HTML: { Title: 'M头W底', IClass: 'iconfont icon-draw_wavemw', ID: 'icon-wavemw' }, Name: 'M头W底' },
-                    { HTML: { Title: '头肩型', IClass: 'iconfont icon-draw_head_shoulders_bt', ID: 'icon-Head-Shoulders' }, Name: '头肩型' },
-                    { HTML: { Title: '波浪尺', IClass: 'iconfont icon-waveruler', ID: 'icon-wave-ruler' }, Name: '波浪尺' },
-                    { HTML: { Title: 'AB波浪尺', IClass: 'iconfont icon-waveruler', ID: 'icon-wave-ruler2' }, Name: 'AB波浪尺' },
-                    { HTML: { Title: '箱型线', IClass: 'iconfont icon-draw_box', ID: 'icon-drawbox' }, Name: '箱型线' },
-                    { HTML: { Title: '涂鸦线段', IClass: 'iconfont icon-draw_line', ID: 'icon-segment2' }, Name: '涂鸦线段' },
-
-                ],
-                [
-                    { HTML: { Title: '圆弧', IClass: 'iconfont icon-draw_arc', ID: 'icon-arc' }, Name: '圆弧线' },
-                    { HTML: { Title: '矩形', IClass: 'iconfont icon-rectangle', ID: 'icon-rect' }, Name: '矩形' },
-                    { HTML: { Title: '平行四边形', IClass: 'iconfont icon-draw_quadrangle', ID: 'icon-quad' }, Name: '平行四边形' },
-                    { HTML: { Title: '三角形', IClass: 'iconfont icon-draw_triangle', ID: 'icon-triangle' }, Name: '三角形' },
-                    { HTML: { Title: '圆', IClass: 'iconfont icon-draw_circle', ID: 'icon-circle' }, Name: '圆' },
-                    { HTML: { Title: '对称角度', IClass: 'iconfont icon-draw_symangle', ID: 'icon-symangle' }, Name: '对称角度' },
-                ],
-                [
-                    { HTML: { Title: '文本', IClass: 'iconfont icon-draw_text', ID: 'icon-text' }, Name: '文本' },
-                    { HTML: { Title: '向上箭头', IClass: 'iconfont icon-arrow_up', ID: 'icon-arrowup' }, Name: 'icon-arrow_up' },
-                    { HTML: { Title: '向下箭头', IClass: 'iconfont icon-arrow_down', ID: 'icon-arrowdown' }, Name: 'icon-arrow_down' },
-                    { HTML: { Title: '向左箭头', IClass: 'iconfont icon-arrow_left', ID: 'icon-arrowleft' }, Name: 'icon-arrow_left' },
-                    { HTML: { Title: '向右箭头', IClass: 'iconfont icon-arrow_right', ID: 'icon-arrowright' }, Name: 'icon-arrow_right' },
-                ],
-                [
-                    { HTML: { Title: '江恩角度线', IClass: 'iconfont icon-draw_gannfan', ID: 'icon-gannfan' }, Name: '江恩角度线' },
-                    { HTML: { Title: '斐波那契周期线', IClass: 'iconfont icon-draw_fibonacci', ID: 'icon-fibonacci' }, Name: '斐波那契周期线' },
-                    { HTML: { Title: '阻速线', IClass: 'iconfont icon-draw_resline', ID: 'icon-resline' }, Name: '阻速线' },
-                    { HTML: { Title: '黄金分割', IClass: 'iconfont icon-draw_goldensection', ID: 'icon-goldensection' }, Name: '黄金分割' },
-                    { HTML: { Title: '百分比线', IClass: 'iconfont icon-draw_percentage', ID: 'icon-percentage' }, Name: '百分比线' },
-                    { HTML: { Title: '波段线', IClass: 'iconfont icon-draw_waveband', ID: 'icon-waveband' }, Name: '波段线' },
-                    { HTML: { Title: '线形回归线', IClass: 'iconfont icon-linear_3', ID: 'icon-waveband2' }, Name: '线形回归线' },
-                    { HTML: { Title: '线形回归带', IClass: 'iconfont icon-linear_1', ID: 'icon-waveband3' }, Name: '线形回归带' },
-                    { HTML: { Title: '延长线形回归带', IClass: 'iconfont icon-linear_2', ID: 'icon-waveband5' }, Name: '延长线形回归带' },
-                ],
-                [{ HTML: { Title: '全部删除', IClass: 'iconfont icon-recycle_bin', ID: 'icon-delete' }, Name: '全部删除' }]
-            ];
-
-        var hqChart = this.HQChart;
-
-        if (!this.ToolsDiv) {
-            var div = document.createElement("div");
-            div.className = 'drawtools';
-            div.id = this.ID;
-
-            var spanList = "";  //一层菜单
-            var menuTwoList = ""; //二层菜单
-            var menuOne = new Array();
-            TOOL_LIST.forEach(function(item,index){
-                menuOne.push(item[0]);
-            });
-            for (var i = 0; i < TOOL_LIST.length; i++) {
-                var itemOut = menuOne[i];
-                var itemIn = TOOL_LIST[i];
-                var menuTwoStr = "";
-                var contentArrow = "";
-                for (var j = 0; j < itemIn.length; j++) {
-                    var currentItem = itemIn[j];
-                    var menuTwoName = currentItem.Name;
-                    if(menuTwoName.indexOf('up') > -1){
-                        menuTwoName = "向上箭头";
-                    }else if(menuTwoName.indexOf('down') > -1){
-                        menuTwoName = "向下箭头";
-                    }else if(menuTwoName.indexOf('left') > -1){
-                        menuTwoName = "向左箭头";
-                    }else if(menuTwoName.indexOf('right') > -1){
-                        menuTwoName = "向右箭头";
-                    }
-                    menuTwoStr += '<p class="menuTwoItem ' + currentItem.HTML.ID + '">' + menuTwoName + '<i class="' + currentItem.HTML.IClass + '" title="' + currentItem.HTML.Title + '"></i></p>';
-                }
-                if (i !== TOOL_LIST.length - 1) { //不是“全部删除”项
-                    menuTwoList = '<div class="menuTwo">' + menuTwoStr + '</div>';
-                    contentArrow = '<i class="contentArrow iconfont icon-menu_arraw_left"></i>';
-                } else {
-                    menuTwoList = "";
-                    contentArrow = "";
-                }
-
-                var spanNode = '<div class="icon-image ' + 'first-' + itemOut.HTML.ID + '"><i class="' + itemOut.HTML.IClass + '" title="' + itemOut.HTML.Title + '"></i>' + menuTwoList + contentArrow +'</div>';
-                spanList += spanNode;
-            }
-            this.ChartBorder.UIElement.parentNode.appendChild(div);
-
-            div.innerHTML = spanList;
-            this.ToolsDiv = div;
-            
-            for (var i in TOOL_LIST) {
-                var item = TOOL_LIST[i][0];
-                $('#' + this.ID + " .first-" + item.HTML.ID).hover(function(){  //箭头的旋转过渡
-                    $(".drawtools").find(".contentArrow").hide();
-                    $(this).find(".contentArrow").removeClass("trans").show();
-                });
-                $('#' + this.ID + " .first-" + item.HTML.ID+" .contentArrow").click(function(event){ //点击三角展示二级菜单
-                    event.stopPropagation();
-                    $(".drawtools").find(".menuTwo").hide();
-                    $(this).siblings('.menuTwo').show();
-                });
-                $('#' + this.ID + " .first-" + item.HTML.ID+" .trans").click(function(){ //点击三角隐藏二级菜单
-                    event.stopPropagation();
-                    $(this).siblings('.menuTwo').hide();
-                });
-                
-                
-                if (item.Name == '全部删除') {
-                    $('#' + this.ID + " .first-icon-delete").click(function () {
-                        $(".drawtools").find(".menuTwo").hide();
-                        $(this).siblings().removeClass('active');
-                        $(this).addClass('active');
-                        hqChart.ClearChartDrawPicture();
-                        $(".subTolls").css("display", "none");
-                    });
-                }
-                else {
-                    $('#' + this.ID + " .first-" + menuOne[i].HTML.ID).click( //一层菜单类名是：“first-”+item.HTML.ID
-                        {
-                            // DrawName: menuOne[i].Name,  //把画法名字传进去
-                            CurrentIndex:i
-                        },
-                        function (event) {
-                            $(".drawtools").find(".menuTwo").hide();
-                            $(this).siblings().removeClass('active');
-                            $(this).addClass('active');
-                            hqChart.CreateChartDrawPicture(menuOne[event.data.CurrentIndex].Name);
-                        }
-                    );
-                    for (var j in TOOL_LIST[i]) {
-                        var itemTwo = TOOL_LIST[i][j];
-                        let classname = itemTwo.HTML.IClass;  //闭包问题
-                        $('#' + this.ID + ' .' + itemTwo.HTML.ID).hover(function(event){
-                            event.stopPropagation();
-                            $(this).closest('.icon-image').find(".contentArrow").addClass("trans");
-                        });
-                        $('#' + this.ID + ' .' + itemTwo.HTML.ID).click(//二层菜单
-                            {
-                                DrawName: itemTwo.Name,  //把画法名字传进去
-                                CurrentIndex:i,
-                                CurrentData:itemTwo
-                            },
-                            function (event) {
-                                event.stopPropagation();
-                                $(this).closest('.icon-image').find(".contentArrow").hide();
-                                $(this).siblings().removeClass("current");
-                                $(this).addClass("current");
-                                $(this).closest('.icon-image').children('i').eq(0).removeClass().addClass(classname,"active").attr('title',event.data.CurrentData.HTML.Title);
-                                menuOne.splice(event.data.CurrentIndex,1,event.data.CurrentData);
-                                $(this).parent().hide();
-                                hqChart.CreateChartDrawPicture(event.data.DrawName);
-                            }
-                        );
-                    }
-                }
-            }
-
-        }
-        var curID = this.ID;
-        $(document).click(function(event){
-            if(!($("#"+curID).is(event.target)) && ($("#"+curID).has(event.target).length === 0)){
-                $("#"+curID+" .menuTwo").hide();
-                $("#"+curID+" .contentArrow").hide();
-            }
-        });
-        var scrollPos = GetScrollPosition();
-        var pixelRatio=GetDevicePixelRatio();
-        // var left=this.ChartBorder.GetChartWidth()-this.Right-this.ToolsWidth;
-        var left=ToFixedPoint(this.ChartBorder.GetRight()+this.Left);
-        // var top = this.Top+this.ChartBorder.UIElement.getBoundingClientRect().top+scrollPos.Top;
-        var top = this.ChartBorder.GetTop();
-        this.ToolsDiv.style.left = left/pixelRatio + "px";
-        this.ToolsDiv.style.top = top/pixelRatio + "px";
-        this.ToolsDiv.style.width = (this.Width-5)/pixelRatio + "px";
-        this.ToolsDiv.style.height = 'auto';
-        this.ToolsDiv.style.position = "absolute";
-        this.ToolsDiv.style.display = "block";
-        // this.ToolsDiv.style.paddingLeft = "10px";
-
-        this.SizeChange == true;
-    }
-}
-
-
 //窗口分割
 function FrameSplitPaint()
 {
@@ -59354,7 +59140,7 @@ IChartDrawPicture.ArrayDrawPricture=
     { Name:"固定范围成交量分布图", ClassName:"ChartDrawVolProfile", Create:function() { return new ChartDrawVolProfile(); }},
 
     { Name:"DisjointChannel", ClassName:"ChartDrawDisjontChannel", Create:function() { return new ChartDrawDisjontChannel();}},
-    { Name:"FlatTop", ClassName:"ChartDrawDisjontChannel", Create:function() { return new ChartDrawFlatTop();}},
+    { Name:"FlatTop", ClassName:"ChartDrawFlatTop", Create:function() { return new ChartDrawFlatTop();}},
 
     { Name:"水平线2", ClassName:"ChartDrawHLine", Create:function() { return new ChartDrawHLine(); }},
 
@@ -61525,7 +61311,7 @@ function ChartDrawPictureParallelLines()
 }
 
 
-//FlatTop/Bottom
+//FlatTop/Bottom 平滑顶/底
 function ChartDrawFlatTop()
 {
     this.newMethod=IChartDrawPicture;   //派生
@@ -61612,7 +61398,7 @@ function ChartDrawFlatTop()
     }
 }
 
-//Disjont Channel 
+//Disjont Channel 不相交通道 (未完成)
 function ChartDrawDisjontChannel()
 {
     this.newMethod=ChartDrawFlatTop;   //派生
@@ -75600,17 +75386,6 @@ function KLineChartContainer(uielement,OffscreenElement, cacheElement)
                 this.ExtendChartPaint.push(chart);
                 this.Frame.ChartBorder.Right+=chart.Width;  //创建筹码需要增加右边的间距
                 return chart;
-            case '画图工具':
-                chart=new DrawToolsButton();
-                chart.Canvas=this.Canvas;
-                chart.ChartBorder=this.Frame.ChartBorder;
-                chart.ChartFrame=this.Frame;
-                chart.HQChart=this;
-                chart.Left=this.Frame.ChartBorder.Right;    //左边间距使用当前框架间距
-                chart.SetOption(option);
-                this.ExtendChartPaint.push(chart);
-                this.Frame.ChartBorder.Right+=chart.Width;  //创建筹码需要增加右边的间距
-                return chart;
             case 'KLineTooltip':
                 if (option.Create && typeof(option.Create)=='function') chart=option.Create();
                 else chart=new KLineTooltipPaint();
@@ -76624,6 +76399,11 @@ function KLineChartContainer(uielement,OffscreenElement, cacheElement)
         return true;
     }
 
+    this.ClearCurrnetDrawPicture=function()
+    {
+        this.CurrentChartDrawPicture=null;
+    }
+
     this.AddChartDrawPicture=function(obj)
     {
         if (!obj) return null;
@@ -76811,9 +76591,8 @@ function KLineChartContainer(uielement,OffscreenElement, cacheElement)
             if (item && item.Symbol) aryOverlaySymbol.push(item.Symbol)
         }
 
-        var bBGSpit=false, bShowDrawTool=false, bShowStockChip=false;
+        var bBGSpit=false, bShowStockChip=false;
         if (this.GetExtendChartByClassName("SessionBreaksPaint")) bBGSpit=true;
-        if (this.GetExtendChartByClassName('DrawToolsButton')) bShowDrawTool=true;  //画图工具
         if (this.GetExtendChartByClassName('StockChip')) bShowStockChip=true;       //筹码
 
         var aryMenu=
@@ -76971,7 +76750,7 @@ function KLineChartContainer(uielement,OffscreenElement, cacheElement)
 
                     { Name:"背景分割", Data:{ ID:JSCHART_MENU_ID.CMD_CHANGE_BG_SPLIT_ID, Args:[!bBGSpit]}, Checked:bBGSpit},
 
-                    { Name:"画图工具", Data:{ ID:bShowDrawTool?JSCHART_MENU_ID.CMD_HIDE_DRAWTOOL_ID:JSCHART_MENU_ID.CMD_SHOW_DRAWTOOL_ID, Args:[]}, Checked:bShowDrawTool},
+                    { Name:"画图工具", Data:{ ID:JSCHART_MENU_ID.CMD_SHOW_DRAWTOOL_ID, Args:[]}, Checked:this.IsShowDrawToolDialog()},
 
                     { Name:"移动筹码图", Data:{ ID:bShowStockChip?JSCHART_MENU_ID.CMD_HIDE_STOCKCHIP_ID:JSCHART_MENU_ID.CMD_SHOW_STOCKCHIP_ID, Args:[]}, Checked:bShowStockChip},
                 ]
@@ -80449,9 +80228,6 @@ function MinuteChartContainer(uielement,offscreenElement,cacheElement)
             if (item && item.Symbol) aryOverlaySymbol.push(item.Symbol)
         }
 
-        var bShowDrawTool=false;
-        if (this.GetExtendChartByClassName('DrawToolsButton')) bShowDrawTool=true;  //画图工具
-
         var aryMenu=
         [
             { 
@@ -80509,7 +80285,7 @@ function MinuteChartContainer(uielement,offscreenElement,cacheElement)
                 Name:"其他设置",
                 SubMenu:
                 [
-                    { Name:"画图工具", Data:{ ID:bShowDrawTool?JSCHART_MENU_ID.CMD_HIDE_DRAWTOOL_ID:JSCHART_MENU_ID.CMD_SHOW_DRAWTOOL_ID, Args:[]}, Checked:bShowDrawTool},
+                    { Name:"画图工具", Data:{ ID:JSCHART_MENU_ID.CMD_SHOW_DRAWTOOL_ID, Args:[]}, Checked:this.IsShowDrawToolDialog()},
                 ]
             }
 
@@ -83674,17 +83450,6 @@ function MinuteChartContainer(uielement,offscreenElement,cacheElement)
                 chart.SetOption(option);
                 this.ExtendChartPaint.push(chart);
                 return chart;
-            case '画图工具':
-                chart=new DrawToolsButton();
-                chart.Canvas=this.Canvas;
-                chart.ChartBorder=this.Frame.ChartBorder;
-                chart.ChartFrame=this.Frame;
-                chart.HQChart=this;
-                chart.Left=this.Frame.ChartBorder.Right;    //左边间距使用当前框架间距
-                chart.SetOption(option);
-                this.ExtendChartPaint.push(chart);
-                this.Frame.ChartBorder.Right+=chart.Width;  //创建筹码需要增加右边的间距
-                return chart;
             case "MinuteBackgroundPaint":
                 chart=new MinuteBackgroundPaint();
                 chart.Canvas=this.Canvas;
@@ -105850,7 +105615,7 @@ function JSDraw(errorHandler,symbolData)
         {
             for(var i in condition)
             {
-                drawData[i]=null;
+                drawData.Data[i]=null;
                 if (!condition[i]) continue;
 
                 if (isNumber) 
@@ -105875,7 +105640,7 @@ function JSDraw(errorHandler,symbolData)
                 var count=this.SymbolData.Data.Data.length;
                 for(var i=0; i<count; ++i)
                 {
-                    drawData[i]=null;
+                    drawData.Data[i]=null;
                     if (isNumber) 
                     {
                         drawData.Data[i]=data;
@@ -134910,6 +134675,433 @@ JSPopMenu.POSITION_ID.TAB_MENU_ID=1;
 JSPopMenu.POSITION_ID.DROPDOWN_MENU_ID=2;       //左对齐下拉
 JSPopMenu.POSITION_ID.DROPDOWN_RIGHT_MENU_ID=3; //右对齐下拉
 JSPopMenu.SEPARATOR_LINE_NAME="MENU_SEPARATOR"; //分割线
+/*
+   Copyright (c) 2018 jones
+ 
+   http://www.apache.org/licenses/LICENSE-2.0
+
+   开源项目 https://github.com/jones2000/HQChart
+ 
+   jones_2000@163.com
+
+   内置画图工具 设置框
+*/
+
+JS_DRAWTOOL_MENU_ID=
+{
+    CMD_SELECTED_ID:1,
+    CMD_CHANGE_LINE_COLOR_ID:2,
+    CMD_DELETE_ALL_RAW_CHART_ID:3
+};
+
+function JSDialogDrawTool()
+{
+    this.AryChartGroup=
+    [
+         { 
+            Title:"线段", 
+            AryChart:
+            [
+                { Title: '线段', ClassName: 'hqchart_drawtool icon-draw_line', Type:0, Data:{ ID:"线段" } },
+                { Title: '射线', ClassName: 'hqchart_drawtool icon-draw_rays', Type:0, Data:{ ID:"射线" } },
+                { Title: '标价线', ClassName: 'hqchart_drawtool icon-price_line', Type:0, Data:{ ID:"标价线" } },
+                { Title: '垂直线', ClassName: 'hqchart_drawtool icon-vertical_line', Type:0, Data:{ ID:"垂直线" } },
+                { Title: '箭头', ClassName: 'hqchart_drawtool icon-draw_rays', Type:0, Data:{ ID:"箭头" } },
+                { Title: '趋势线', ClassName: 'hqchart_drawtool icon-draw_trendline', Type:0, Data:{ ID:"趋势线" } },
+                { Title: '水平线', ClassName: 'hqchart_drawtool icon-draw_hline', Type:0, Data:{ ID:"水平线" } },
+                { Title: '涂鸦线段', ClassName: 'hqchart_drawtool icon-draw_line', Type:0, Data:{ ID:"涂鸦线段" } },
+            ]
+        }, 
+        {
+            Title:"通道",
+            AryChart:
+            [
+                { Title: '平行线', ClassName: 'hqchart_drawtool icon-draw_parallel_lines', Type:0, Data:{ ID:"平行线" } }, 
+                { Title: '水平线段', ClassName: 'hqchart_drawtool icon-draw_hlinesegment', Type:0, Data:{ ID:"水平线段" } },
+                { Title: '平行射线', ClassName: 'hqchart_drawtool icon-draw_p_rays_lines', Type:0, Data:{ ID:"平行射线" } }, 
+                { Title: '平行通道', ClassName: 'hqchart_drawtool icon-draw_parallelchannel',Type:0, Data:{ ID:"平行通道" } },
+                { Title: '价格通道线', ClassName: 'hqchart_drawtool icon-draw_pricechannel', Type:0, Data:{ ID:"价格通道线" } },
+                { Title: '箱型线', ClassName: 'iconfont icon-draw_box', Type:0, Data:{ ID:"箱型线" }  },
+                { Title:"不相交通道", ClassName:"hqchart_drawtool icon-buxiangjiaojiao", Type:0, Data:{ ID:"DisjointChannel"} },
+                { Title:"平滑顶/底", ClassName:"hqchart_drawtool icon-tubiao_buxiangjiaotongdao", Type:0, Data:{ ID:"FlatTop"}}
+            ]
+        },
+        { 
+            Title:"多边形",
+            AryChart:
+            [
+                { Title: '圆弧线', ClassName: 'hqchart_drawtool icon-draw_arc', Type:0, Data:{ ID:"圆弧线" }  },
+                { Title: '矩形', ClassName: 'hqchart_drawtool icon-rectangle', Type:0, Data:{ ID:"矩形" } },
+                { Title: '平行四边形', ClassName: 'hqchart_drawtool icon-draw_quadrangle', Type:0, Data:{ ID:"平行四边形" }  },
+                { Title: '三角形', ClassName: 'hqchart_drawtool icon-draw_triangle', Type:0, Data:{ ID:"三角形" }  },
+                { Title: '圆', ClassName: 'hqchart_drawtool icon-draw_circle', Type:0, Data:{ ID:"圆" }  },
+                { Title: '对称角度', ClassName: 'hqchart_drawtool icon-draw_symangle', Type:0, Data:{ ID:"对称角度" }  },
+            ]
+        },
+        {
+            Title:"波浪线",
+            AryChart:
+            [
+                { Title: 'M头W底', ClassName: 'hqchart_drawtool icon-draw_wavemw', Type:0, Data:{ ID:"M头W底" } },
+                { Title: '头肩型', ClassName: 'hqchart_drawtool icon-draw_head_shoulders_bt', Type:0, Data:{ ID:"头肩型" } },
+                { Title: '波浪尺', ClassName: 'hqchart_drawtool icon-waveruler', Type:0, Data:{ ID:"波浪尺" } },
+                { Title: 'AB波浪尺', ClassName: 'hqchart_drawtool icon-waveruler', Type:0, Data:{ ID:"AB波浪尺" } },
+            ]
+        },
+        {
+            Title:"测量工具",
+            AryChart:
+            [
+                { Title: '价格范围', ClassName: 'hqchart_drawtool icon-shijianfanwei', Type:0, Data:{ ID:"PriceRange" }  },
+                { Title: '时间范围', ClassName: 'hqchart_drawtool icon-jiagefanwei', Type:0, Data:{ ID:"DateRange" }  },
+            ]
+        },
+        {
+            Title:"文字",
+            AryChart:
+            [
+                { Title: '价格标签', ClassName: 'hqchart_drawtool icon-Tooltip', Type:0, Data:{ ID:"PriceLabel" }  },
+                { Title: '价格注释', ClassName: 'hqchart_drawtool icon-tooltiptext', Type:0, Data:{ ID:"PriceNote" }  },
+                { Title: '向上箭头', ClassName: 'iconfont icon-arrow_up', Type:0, Data:{ ID:"icon-arrow_up" } }, 
+                { Title: '向下箭头', ClassName: 'iconfont icon-arrow_down', Type:0, Data:{ ID:"icon-arrow_down" } },
+                { Title: '向左箭头', ClassName: 'iconfont icon-arrow_left', Type:0, Data:{ ID:"icon-arrow_left" }},
+                { Title: '向右箭头', ClassName: 'iconfont icon-arrow_right', Type:0, Data:{ ID:"icon-arrow_right" }},
+            ]
+        }
+        
+    ];
+
+    this.ToolConfig=
+    {
+        Title:"工具",
+        AryTool:
+        [
+            { Title:"选中", ClassName:'hqchart_drawtool icon-arrow', Type:1, Data:{ID:JS_DRAWTOOL_MENU_ID.CMD_SELECTED_ID} },
+            { Title:'尺子', ClassName: 'hqchart_drawtool icon-ruler', Type:0, Data:{ ID:"尺子" } },
+            { Title:"点击切换颜色", ClassName: 'hqchart_drawtool icon-fangkuai', Type:2, Data:{ ID:JS_DRAWTOOL_MENU_ID.CMD_CHANGE_LINE_COLOR_ID }},
+            { Title:"删除所有画线", ClassName: 'hqchart_drawtool icon-recycle_bin', Type:2, Data:{ ID:JS_DRAWTOOL_MENU_ID.CMD_DELETE_ALL_RAW_CHART_ID }}
+        ]
+    };
+
+
+    this.DivDialog=null;
+    this.AryDivChart=[];
+    this.HQChart=null;
+    this.LineColor='rgb(255,140,0)';
+    this.LineColorIndex=0;
+    this.RandomLineColor=["rgb(255,69,0)", "rgb(0,191,255)", "rgb(255,0,255)", "rgb(255,105,180)"];
+    this.LineWidth=1*GetDevicePixelRatio();
+    this.ColumnCount=4;
+
+    this.DragTitle=null;
+
+    this.Inital=function(hqchart)
+    {
+       this.LineColor=g_JSChartResource.DrawPicture.LineColor[0];
+       this.RandomLineColor.splice(0,0,this.LineColor);
+       this.HQChart=hqchart;
+    }
+
+    this.Create=function()
+    {
+        var divDom=document.createElement("div");
+        divDom.className='UMyChart_DrawTool_Dialog_Div';
+
+        var divTitle=document.createElement("div");
+        divTitle.className='UMyChart_DrawTool_Title_Div';
+        divTitle.innerText="画图工具";
+        divTitle.onmousedown=(e)=>{ this.OnMouseDownTitle(e); }
+
+        var divClose=document.createElement("div");
+        divClose.className='UMyChart_DrawTool_Close_Div';
+        divClose.innerText="x";
+        divClose.onmousedown=(e)=>{ this.Close(e); }
+        divTitle.appendChild(divClose);
+
+        divDom.appendChild(divTitle);
+
+        var table=document.createElement("table");
+        table.className="UMyChart_DrawTool_Table";
+        divDom.appendChild(table);
+
+        var tbody=document.createElement("tbody");
+        tbody.className="UMyChart_DrawTool_Tbody";
+        table.appendChild(tbody);
+
+        for(var i=0;i<this.AryChartGroup.length;++i)
+        {
+            var item=this.AryChartGroup[i];
+            if (!IFrameSplitOperator.IsNonEmptyArray(item.AryChart)) continue;
+
+            this.CreateChartGroupItem(item, tbody);
+
+            var trDom=document.createElement("tr");
+            trDom.className='UMyChart_DrawTool_Group_End_Tr';
+            tbody.appendChild(trDom);
+        }
+
+        //工具栏
+        this.CreateToolGroup(tbody);
+
+        this.DivDialog=divDom;
+
+        document.body.appendChild(divDom);
+    }
+
+    this.Destroy=function()
+    {
+        this.AryDivChart=[];
+        document.body.remove(this.DivDialog);
+        this.DivDialog=null;
+    }
+
+    this.CreateChartGroupItem=function(groupItem, tbody)
+    {
+        var trDom=document.createElement("tr");
+        trDom.className='UMyChart_DrawTool_Group_Tr';
+        tbody.appendChild(trDom);
+
+        var tdDom=document.createElement("td");
+        tdDom.className="UMyChart_DrawTool_Group_Td";
+        tdDom.innerText=groupItem.Title;
+        tdDom.colSpan=this.ColumnCount;
+        trDom.appendChild(tdDom);
+
+        var chartCount=groupItem.AryChart.length;
+        for(var i=0,j=0;i<chartCount;)
+        {
+            var trDom=document.createElement("tr");
+            trDom.className='UMyChart_DrawTool_Tr';
+
+            for(j=0;j<this.ColumnCount && i<chartCount; ++j, ++i)
+            {
+                var item=groupItem.AryChart[i];
+                this.CreateChartItem(item, trDom);
+            }
+
+            tbody.appendChild(trDom);
+        }
+    }
+
+    this.CreateChartItem=function(item, trDom)
+    {
+        var tdDom=document.createElement("td");
+        tdDom.className="UMyChart_DrawTool_Td";
+        tdDom.title=item.Title;
+        trDom.appendChild(tdDom);
+
+        var spanDom=document.createElement("span");
+        spanDom.className=item.ClassName;
+        spanDom.classList.add("UMyChart_DrawTool_Span");
+        tdDom.appendChild(spanDom);
+
+        var data={ Item:item, TD:tdDom, Span:spanDom };
+        tdDom.onmousedown=(e)=> { this.OnClickItem(e, data); };   //点击
+
+        this.AryDivChart.push(data);
+    }
+
+    this.OnClickItem=function(e, data)
+    {
+        console.log('[JSDialogDrawTool::OnClickChartItem] ', data);
+        if (!data.Item || !data.Item.Data) return;
+
+        var type=data.Item.Type;
+        var id=data.Item.Data.ID;
+        if (type==2 && id==JS_DRAWTOOL_MENU_ID.CMD_CHANGE_LINE_COLOR_ID)
+        {
+            this.OnChangeLineColor(data);
+        }
+        else if (type==2 && id==JS_DRAWTOOL_MENU_ID.CMD_DELETE_ALL_RAW_CHART_ID)
+        {
+            this.DeleteAllChart();
+        }
+        else if (type==1 && id==JS_DRAWTOOL_MENU_ID.CMD_SELECTED_ID)
+        {
+            this.ClearAllSelectedChart();
+            this.ClearCurrnetDrawPicture();
+        }
+        else if (type==0)
+        {
+            this.ClearAllSelectedChart();
+            data.Span.classList.add("UMyChart_DrawTool_Span_Selected");
+            this.CreateDrawPicture(data);
+        }
+    }
+
+    //清空选中状态
+    this.ClearAllSelectedChart=function()
+    {
+        for(var i=0;i<this.AryDivChart.length;++i)
+        {
+            var item=this.AryDivChart[i];
+            item.Span.classList.remove("UMyChart_DrawTool_Span_Selected");
+        }
+    }
+
+    this.CreateToolGroup=function(tbody)
+    {
+        var trDom=document.createElement("tr");
+        trDom.className='UMyChart_DrawTool_Group_Tr';
+        tbody.appendChild(trDom);
+
+        var tdDom=document.createElement("td");
+        tdDom.className="UMyChart_DrawTool_Group_Td";
+        tdDom.innerText=this.ToolConfig.Title;
+        tdDom.colSpan=this.ColumnCount;
+        trDom.appendChild(tdDom);
+
+        var chartCount=this.ToolConfig.AryTool.length;
+        for(var i=0,j=0;i<chartCount;)
+        {
+            var trDom=document.createElement("tr");
+            trDom.className='UMyChart_DrawTool_Tr';
+
+            for(j=0;j<this.ColumnCount && i<chartCount; ++j, ++i)
+            {
+                var item=this.ToolConfig.AryTool[i];
+                this.CreateToolItem(item, trDom);
+            }
+
+            tbody.appendChild(trDom);
+        }
+    }
+
+    this.CreateToolItem=function(item, trDom)
+    {
+        var tdDom=document.createElement("td");
+        tdDom.className="UMyChart_DrawTool_Td";
+        tdDom.title=item.Title;
+        trDom.appendChild(tdDom);
+        
+        var spanDom=document.createElement("span");
+        spanDom.className=item.ClassName;
+        spanDom.classList.add("UMyChart_DrawTool_Span");
+        tdDom.appendChild(spanDom);
+        var data={ Item:item, TD:tdDom, Span:spanDom };
+
+        if (item.Type==2 && item.Data.ID==JS_DRAWTOOL_MENU_ID.CMD_CHANGE_LINE_COLOR_ID)   //颜色
+        {
+            spanDom.style['color']=this.LineColor;
+        }
+        
+        tdDom.onmousedown=(e)=> { this.OnClickItem(e, data); };   //点击
+
+        this.AryDivChart.push(data);
+    }
+
+
+    
+    this.OnChangeLineColor=function(data)
+    {
+        ++this.LineColorIndex;
+        var index=this.LineColorIndex%this.RandomLineColor.length;
+        this.LineColor=this.RandomLineColor[index];
+
+        data.Span.style['color']=this.LineColor;
+    }
+
+    //清空所有画图工具
+    this.DeleteAllChart=function()
+    {
+        if (!this.HQChart) return;
+
+        this.HQChart.ClearChartDrawPicture();
+    }
+
+    this.CreateDrawPicture=function(data)
+    {
+        if (!this.HQChart) return null;
+
+        var option=
+        { 
+            LineColor:this.LineColor,   //线段颜色
+            LineWidth:this.LineWidth,   //线段宽度
+            //PointColor:'rgba(255,130,71,0.5)'    //点颜色
+        };
+
+        var name=data.Item.Data.ID;
+        if (["icon-arrow_up","icon-arrow_down","icon-arrow_left", "icon-arrow_right"].includes(name)) option=null;
+
+        this.HQChart.CreateChartDrawPicture(name, option, (chart)=>{ this.OnFinishDrawPicture(chart, data); });
+    }
+
+    this.ClearCurrnetDrawPicture=function()
+    {
+        if (this.HQChart) this.HQChart.ClearCurrnetDrawPicture();
+    }
+
+    //画图工具绘制完成
+    this.OnFinishDrawPicture=function(chart, data)
+    {
+        data.Span.classList.remove("UMyChart_DrawTool_Span_Selected");
+    }
+
+    this.Show=function(x, y)
+    {
+        if (!this.DivDialog) return;
+
+        this.DivDialog.style.visibility='visible';
+        this.DivDialog.style.top = y + "px";
+        this.DivDialog.style.left = x + "px";
+    }
+
+    this.Close=function(e)
+    {
+        if (!this.DivDialog) return;
+
+        this.DivDialog.style.visibility='hidden';
+    }
+
+    this.IsShow=function()
+    {
+        if (!this.DivDialog) return false;
+        
+        return this.DivDialog.style.visibility==='visible';
+    }
+
+    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'
+    }
+
+    this.DocOnMouseUpTitle=function(e)
+    {
+        this.DragTitle=null;
+        this.onmousemove = null;
+        this.onmouseup = null;
+    }
+}
+
+
+
+
+
 ///////////////////////////////////////////////////////////////////////////////////
 //  工作线程计算指标示例
 //
@@ -135031,7 +135223,7 @@ function HQChartScriptWorker()
 
 
 
-var HQCHART_VERSION="1.1.13237";
+var HQCHART_VERSION="1.1.13244";
 
 function PrintHQChartVersion()
 {
@@ -135171,5 +135363,6 @@ export default {
     HQChartScriptWorker:HQChartScriptWorker,    //计算工作线程
 
     JSPopMenu:JSPopMenu,    //弹出菜单
+    JSDialogDrawTool:JSDialogDrawTool,  //画图工具对话框
     
 }