hqchart 1.1.13167 → 1.1.13182

package/src/jscommon/umychart.popMenu.js

@@ -0,0 +1,266 @@
+/*
+   Copyright (c) 2018 jones
+ 
+   http://www.apache.org/licenses/LICENSE-2.0
+
+   开源项目 https://github.com/jones2000/HQChart
+ 
+   jones_2000@163.com
+
+   内置菜单 使用table模式
+*/
+
+function JSPopMenu()
+{
+    this.Data={ Menu:[], Position:0 };   //{ Name:, SVG, ID, bChecked:, SubMenu:[] }    Position 0=右键菜单  1=Tab弹菜单 2=下拉菜单
+
+    this.RootDOM=null;
+    this.TBodyDOM=null;
+    this.ArySubRootDOM=[];
+
+    this.ClickCallback=null;        //点击回调
+    this.CheckedClassName="UMyChart_MenuItem_Span_Checked  iconfont icon-checked";   //选中图标
+    this.RightArrowClassName="UMyChart_MenuItem_Span_Arrow  iconfont icon-menu_arraw_right";  //右侧箭头
+
+    this.AryTDClassName=
+    [
+        "UMyChart_MenuItem_Td_Status",      //图标
+        "UMyChart_MenuItem_Td_Content",     //文字
+        "UMyChart_MenuItem_Td_Shortcut",    //快捷方式
+        "UMyChart_MenuItem_Td_Arrow"        //箭头
+    ];
+
+    this.Inital=function()
+    {
+        window.addEventListener('mousedown', (e)=>{ this.OnWindowMouseDown(e)});
+    }
+
+    //创建菜单
+    this.CreatePopMenu=function(data)
+    {
+        this.Clear();
+
+        var root=document.createElement("div");
+        root.className="UMyChart_PopMenu";
+
+        var table=document.createElement("table");
+        table.className="UMyChart_PopMenu_Table";
+        root.appendChild(table);
+
+        var tbody=document.createElement("tbody");
+        tbody.className="UMyChart_PopMenu_Tbody";
+        table.appendChild(tbody);
+        
+        
+        var rootData={ Root:root, TBody:tbody, Table:table };
+        for(var i=0;i<data.Menu.length;++i)
+        {
+            var item=data.Menu[i];
+            var trDom=this.CreateMenu(rootData, item);
+            tbody.appendChild(trDom);
+        }
+
+        document.body.appendChild(root);
+        this.RootDOM=root;
+        this.TBodyDOM=tbody;
+
+        if (IFrameSplitOperator.IsNumber(data.Position)) this.Data.Position=data.Position;
+        if (data.ClickCallback) this.ClickCallback=data.ClickCallback;
+       
+    }
+
+    //清除菜单
+    this.Clear=function()
+    {
+        this.Data.Menu=[];
+        this.Data.Position=JSPopMenu.POSITION_ID.RIGHT_MENU_ID;
+        this.ClickCallback=null;
+
+        if (!this.RootDOM) return;
+
+        document.body.removeChild(this.RootDOM);
+        this.RootDOM=null;
+        this.TBodyDOM=null;
+
+        for(var i=0;i<this.ArySubRootDOM.length;++i)
+        {
+            document.body.removeChild(this.ArySubRootDOM[i]);
+        }
+        this.ArySubRootDOM=[]
+    }
+
+    this.CreateMenu=function(parentItem, item)
+    {
+        var trDom=document.createElement("tr");
+        trDom.className='UMyChart_MenuItem_Tr';
+
+        var prtTdDom=null;
+        for(var i=0;i<this.AryTDClassName.length;++i)
+        {
+            var tdDom=document.createElement("td");
+            tdDom.className=this.AryTDClassName[i];
+
+            if (i==0)   //图标
+            {
+                if (item.Checked)
+                {
+                    var spanDom=document.createElement("span");
+                    spanDom.className=this.CheckedClassName;
+                    tdDom.appendChild(spanDom);
+                }
+            }
+            else if (i==1)  //内容
+            {
+                tdDom.innerText=item.Name;
+            }
+            else if (i==2)  //快捷方式
+            {
+
+            }
+            else if (i==3)  //箭头
+            {
+                if (IFrameSplitOperator.IsNonEmptyArray(item.SubMenu))
+                {
+                    var spanDom=document.createElement("span");
+                    spanDom.className=this.RightArrowClassName;
+                    tdDom.appendChild(spanDom);
+                }
+            }
+
+            trDom.appendChild(tdDom);
+        }
+
+        if (IFrameSplitOperator.IsNonEmptyArray(item.SubMenu)) //子菜单
+        {
+            var subRoot=document.createElement("div");
+            subRoot.className="UMyChart_PopSubMenu";
+
+            var subTable=document.createElement("table");
+            subTable.className="UMyChart_PopMenu_Table";
+            subRoot.appendChild(subTable);
+
+            var subTbody=document.createElement("tbody");
+            subTbody.className="UMyChart_PopMenu_TBody";
+            subTable.appendChild(subTbody);
+       
+            var subRootData={ Root:subRoot, TBody:subTbody, Table:subTable };
+            var preTrDom=null;
+            for(var i=0;i<item.SubMenu.length;++i)
+            {
+                var subItem=item.SubMenu[i];
+                if (subItem.Name==JSPopMenu.SEPARATOR_LINE_NAME)
+                {
+                    if (preTrDom) preTrDom.classList.add("border");
+                    continue;
+                }
+                
+                var subTrDom=this.CreateMenu(subRootData, subItem);
+                preTrDom=subTrDom;
+                subTbody.appendChild(subTrDom);
+            }
+           
+            trDom.onmouseover=(e)=>{ this.OnMouseOver(e, parentItem, trDom, subRoot); }
+            document.body.appendChild(subRoot);
+            this.ArySubRootDOM.push(subRoot);
+        }
+        else
+        {
+            trDom.onmousedown=(e)=> { this.OnClickMenu(e, item, false); };   //菜单点击
+            trDom.onmouseover=(e)=>{ this.OnMouseOver(e, parentItem); }
+        }
+
+        return trDom;
+    }
+
+    //弹tab菜单
+    this.PopupMenuByTab=function(rtTab)
+    {
+        if (!this.RootDOM) return;  
+        if (!rtTab) return;
+
+        var xLeft=rtTab.Left;
+        var yTop=rtTab.Top-this.RootDOM.offsetHeight;
+
+        this.RootDOM.style.visibility='visible';
+        this.RootDOM.style.top = yTop + "px";
+        this.RootDOM.style.left = xLeft + "px";
+    }
+
+    //弹右键菜单
+    this.PopupMenuByRight=function(x,y)
+    {
+        if (!this.RootDOM) return;  
+        if (!IFrameSplitOperator.IsNumber(x) || !IFrameSplitOperator.IsNumber(y)) return;
+
+        this.RootDOM.style.visibility='visible';
+        this.RootDOM.style.top = y + "px";
+        this.RootDOM.style.left = x + "px";
+    }
+
+    this.OnClickMenu=function(e, item, bSubMenu)
+    {
+        console.log("[JSPopMenu::OnClickMenu] e=, item=, bSubMenu", e, item, bSubMenu);
+        if (!this.ClickCallback) return;
+
+        this.ClickCallback(item);
+    }
+
+    this.OnMouseOver=function(e, parentItem, trDom, subMenu)
+    {
+        if (parentItem && parentItem.PopMenu && parentItem.PopMenu!=subMenu) 
+        {
+            parentItem.PopMenu.style.visibility="hidden";
+            parentItem.PopMenu=null;
+            parentItem.PopRow=null;
+        }
+            
+        if (subMenu)
+        {
+            if (subMenu.style.visibility=="visible")
+            {
+
+            }
+            else
+            {
+                var rtParent=trDom.getBoundingClientRect();
+                subMenu.style.left=`${rtParent.right}px`;
+                subMenu.style.top=`${rtParent.top}px`;
+
+                /*
+                if (this.Data.Position==JSPopMenu.POSITION_ID.TAB_MENU_ID)
+                {
+                    var yButton=parentItem.Root.getBoundingClientRect().bottom;
+                    var ySubButton=subMenu.getBoundingClientRect().bottom;
+                    if (yButton<ySubButton) 
+                    {
+                        var yOffset=yButton-ySubButton;
+                        subMenu.style.top=`${yOffset}px`;
+                    }
+                }
+                */
+    
+                subMenu.style.visibility="visible";
+            }
+            
+            parentItem.PopMenu=subMenu;
+            parentItem.PopRow=trDom;
+        }
+    }
+
+   
+
+    this.OnWindowMouseDown=function(e)
+    {
+        if (!this.RootDOM) return;
+
+        console.log("[JSPopMenu::OnWindowMouseDown] e=", e);
+
+        this.Clear();
+    }
+}
+
+
+JSPopMenu.POSITION_ID={ };
+JSPopMenu.POSITION_ID.RIGHT_MENU_ID=0;
+JSPopMenu.POSITION_ID.TAB_MENU_ID=1;
+JSPopMenu.SEPARATOR_LINE_NAME="MENU_SEPARATOR"; //分割线

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

@@ -0,0 +1,92 @@
+
+
+/*右键菜单*/
+.UMyChart_PopMenu {
+    position: absolute;
+    z-index: 500;
+    border: 1px solid;
+    border-color:rgb(116, 112, 112);
+    background-color: #fff;
+    visibility:hidden;
+    font-size: 12px;
+    font-family: "微软雅黑";
+    cursor: default;
+}
+
+.UMyChart_PopMenu_Table
+{
+    border-collapse: collapse;
+    border-spacing: 2px;
+}
+
+.UMyChart_PopMenu_Tbody {
+    
+}
+
+.UMyChart_MenuItem_Tr
+{
+    display: table-row;
+    height:20px;
+}
+
+.UMyChart_MenuItem_Td_Status {
+    width: 25px;
+    
+}
+
+.UMyChart_MenuItem_Td_Shortcut {
+    width: 60px;
+    text-align:right;
+}
+
+.UMyChart_MenuItem_Td_Content
+{
+    margin-left: 3px;
+    text-align:left;
+}
+
+.UMyChart_MenuItem_Td_Arrow
+{
+    width: 25px;
+    text-align:right;
+    margin-right: 10px;
+}
+
+
+.UMyChart_MenuItem_Tr:hover
+{
+    background: rgb(172,172,221);
+    border:1px solid;
+    border-color:rgb(0, 120, 215);
+}
+
+.UMyChart_PopSubMenu{
+    position: absolute;
+    left: 99px;
+    top: 0;
+    border: 1px solid;
+    border-color:rgb(116, 112, 112);
+    background-color: #fff;
+    visibility:hidden;
+    z-index: 501;
+    font-size: 12px;
+    font-family: "微软雅黑";
+    cursor: default;
+}
+
+.UMyChart_MenuItem_Span_Checked
+{
+    color:rgb(105,105,105);
+    font-size: 10px;
+    margin-left: 5px;
+    text-align:left;
+}
+
+.UMyChart_MenuItem_Span_Arrow
+{
+    color:rgb(105,105,105);
+    font-size: 10px;
+    text-align:right;
+}
+
+

package/src/jscommon/umychart.resource/font/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 1040563 */
-  src: url('iconfont.woff2?t=1690947130935') format('woff2'),
-       url('iconfont.woff?t=1690947130935') format('woff'),
-       url('iconfont.ttf?t=1690947130935') format('truetype');
+  src: url('iconfont.woff2?t=1713231415841') format('woff2'),
+       url('iconfont.woff?t=1713231415841') format('woff'),
+       url('iconfont.ttf?t=1713231415841') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-checked:before {
+  content: "\e6af";
+}
+
 .icon-eye:before {
   content: "\e78f";
 }