perf(formula speed up and font user defined): fontList feature

src/controllers/menuButton.js

@@ -47,6 +47,16 @@ const menuButton = {
     "rightclickmenu": null,
     "submenuhide": null,
     focus: function($obj, value){
+        if($obj.attr("id")=="luckysheet-icon-font-family-menuButton"){
+            if (isdatatypemulti(value)["num"]) {
+                 let  _locale = locale();
+                const locale_fontarray = _locale.fontarray;
+                value = locale_fontarray[parseInt(value)];
+                if(value==null){
+                    value = this.defualtFont[itemvalue];
+                }
+            }
+        }
         $obj.find(".luckysheet-cols-menuitem").find("span.icon").html("");
         if(value == null){
             $obj.find(".luckysheet-cols-menuitem").eq(0).find("span.icon").html('<i class="fa fa-check luckysheet-mousedown-cancel"></i>');
@@ -468,19 +478,19 @@ const menuButton = {
             let menuButtonId = $(this).attr("id")+"-menuButton";
             let $menuButton = $("#"+menuButtonId);
             if($menuButton.length == 0){
-                const locale_fontarray = locale().fontarray;
-                let itemdata = [];
-
-                for(let a=0;a<locale_fontarray.length;a++){
-                    let fItem = locale_fontarray[a];
-                    let ret = {};
-                    ret.value = a;
-                    ret.text = "<span class='luckysheet-mousedown-cancel' style='font-size:11px;font-family:"+fItem+"'>"+fItem+"</span>";
-                    ret.example = "";
-                    itemdata.push(ret);
-                }
+                // const locale_fontarray = locale().fontarray;
+                // let itemdata = [];
 
-                let itemset = _this.createButtonMenu(itemdata);
+                // for(let a=0;a<locale_fontarray.length;a++){
+                //     let fItem = locale_fontarray[a];
+                //     let ret = {};
+                //     ret.value = a;
+                //     ret.text = "<span class='luckysheet-mousedown-cancel' style='font-size:11px;font-family:"+fItem+"'>"+fItem+"</span>";
+                //     ret.example = "";
+                //     itemdata.push(ret);
+                // }
+
+                let itemset = _this.createButtonMenu(_this.fontSelectList);
 
                 let menu = replaceHtml(_this.menu, {"id": "font-family", "item": itemset, "subclass": "", "sub": ""});
 
@@ -488,7 +498,7 @@ const menuButton = {
                 $menuButton = $("#"+menuButtonId).width(200);
                 _this.focus($menuButton);
 
-                $menuButton.find(".luckysheet-cols-menuitem").click(function(){
+                $menuButton.on("click", ".luckysheet-cols-menuitem", function(){
                     $menuButton.hide();
                     luckysheetContainerFocus();
 
@@ -3317,10 +3327,20 @@ const menuButton = {
                 if(isdatatypemulti(foucsStatus)["num"]){
                     itemvalue = parseInt(foucsStatus);
                     itemname = locale_fontarray[itemvalue];
+
+                    if(itemname==null){
+                        itemvalue = _this.defualtFont[itemvalue];
+                        itemname = itemvalue;
+                        if(itemvalue!=null){
+                            _this.addFontTolist(itemvalue);
+                        }
+                    }
                 }
                 else{
-                    itemvalue = locale_fontjson[foucsStatus];
-                    itemname = locale_fontarray[itemvalue];
+                    itemvalue = foucsStatus;
+                    itemname = foucsStatus;
+
+                    _this.addFontTolist(itemvalue);
                 }   
             }
 
@@ -4320,6 +4340,75 @@ const menuButton = {
         }
 
         return style;
+    },
+    fontSelectList:[],
+    defualtFont:["Times New Roman","Arial","Tahoma","Verdana","微软雅黑","宋体","黑体","楷体","仿宋","新宋体","华文新魏","华文行楷","华文隶书"],
+    addFontTolist:function(fontName) {
+        let isNone = true;
+        for(let a=0;a<this.fontSelectList.length;a++){
+            let fItem = this.fontSelectList[a];
+            if(fItem.value == fontName){
+                isNone = false;
+                break
+            }
+        }
+
+        if(isNone){
+            let ret = {};
+            ret.value = fontName;
+            ret.index = this.fontSelectList.length;
+            ret.type = "userDefined";
+            ret.text = "<span class='luckysheet-mousedown-cancel' style='font-size:11px;font-family:"+fontName+"'>"+fontName+"</span>";
+            ret.example = "";
+            this.fontSelectList.push(ret);
+
+            let $menuButton = $("#luckysheet-icon-font-family-menuButton");
+            let itemset = this.createButtonMenu(this.fontSelectList);
+            $menuButton.html(itemset);
+        }
+    },
+    fontInitial:function(fontList) {
+        let itemdata = [];
+        const locale_fontarray = locale().fontarray;
+        for(let a=0;a<locale_fontarray.length;a++){
+            let fItem = locale_fontarray[a];
+            let ret = {};
+            ret.value = fItem;
+            ret.index = a;
+            ret.type = "inner";
+            ret.text = "<span class='luckysheet-mousedown-cancel' style='font-size:11px;font-family:"+fItem+"'>"+fItem+"</span>";
+            ret.example = "";
+            itemdata.push(ret);
+        }
+
+        if(fontList!=null){
+            for(let a=0;a<fontList.length;a++){
+                let fItem = fontList[a];
+                let ret = {};
+                ret.value = fItem.fontName;
+                ret.index = a;
+                ret.type = "userDefined";
+                ret.text = "<span class='luckysheet-mousedown-cancel' style='font-size:11px;font-family:"+fItem.fontName+"'>"+fItem.fontName+"</span>";
+                ret.example = "";
+                itemdata.push(ret);
+
+                if(!document.fonts.check("12px "+fItem.fontName)){
+                    if(fItem.url){
+                        const fontface = new FontFace(fItem.fontName, `url(${fItem.url})`);
+                        document.fonts.add(fontface);
+                        fontface.load();
+                    }
+                }
+            }
+
+            document.fonts.ready.then(function() {
+                // Any operation that needs to be done only after all the fonts
+                // have finished loading can go here.
+                console.log("font ready");
+            });
+        }
+
+        this.fontSelectList = itemdata;
     }
 }
 

src/controllers/sheetmanage.js

@@ -27,6 +27,7 @@ import locale from '../locale/locale';
 import { renderChartShow } from '../expendPlugins/chart/plugin';
 import {changeSheetContainerSize} from './resize';
 import {zoomNumberDomBind} from './zoom';
+import menuButton from './menuButton';
 
 const sheetmanage = {
     generateRandomSheetIndex: function(prefix) {
@@ -676,6 +677,8 @@ const sheetmanage = {
             }
         }
 
+        menuButton.fontInitial(Store.fontList);//initial font
+
         file.data = data;
 
         let rowheight = data.length;

src/core.js

@@ -38,7 +38,11 @@ let luckysheet = {};
 
 // mount api
 // luckysheet.api = api;
-Object.assign(luckysheet, api);
+// Object.assign(luckysheet, api);
+
+luckysheet = common_extend(api,luckysheet);
+
+
 
 //创建luckysheet表格
 luckysheet.create = function (setting) {
@@ -56,6 +60,7 @@ luckysheet.create = function (setting) {
     Store.fullscreenmode = extendsetting.fullscreenmode;
     Store.lang = extendsetting.lang; //language
     Store.allowEdit = extendsetting.allowEdit;
+    Store.fontList = extendsetting.fontList;
     server.gridKey = extendsetting.gridKey;
     server.loadUrl = extendsetting.loadUrl;
     server.updateUrl = extendsetting.updateUrl;

src/global/api.js

@@ -152,6 +152,7 @@ export function setCellValue(row, column, value, options = {}) {
             if(value.m!=null){
                 curv.m = value.m;
             }
+            formula.delFunctionGroup(row, column);
             setcellvalue(row, column, data, curv);//update text value
         }
         for(let attr in value){
@@ -166,6 +167,7 @@ export function setCellValue(row, column, value, options = {}) {
             data = luckysheetformula.updatecell(row, column, value, false).data;//update formula value or convert inline string html to object
         }
         else{
+            formula.delFunctionGroup(row, column);
             setcellvalue(row, column, data, value);
         }
         

src/global/formula.js

@@ -681,8 +681,8 @@ const luckysheetformula = {
             return;
         }
 
-        if(txt in this.addToCellIndexList){
-           return this.addToCellIndexList[txt];
+        if(txt in this.cellTextToIndexList){
+           return this.cellTextToIndexList[txt];
         }
 
         let val = txt.split("!");

src/global/getRowlen.js

@@ -198,13 +198,15 @@ function getMeasureText(value, ctx, fontset){
         let measureText = ctx.measureText(value), cache = {};
         var regu = "^[ ]+$";
         var re = new RegExp(regu);
-        if(measureText.actualBoundingBoxRight==null || re.test(value)){
-            cache.width = measureText.width;
-        }
-        else{
-            //measureText.actualBoundingBoxLeft + 
-            cache.width = measureText.actualBoundingBoxRight;
-        }
+        // if(measureText.actualBoundingBoxRight==null || re.test(value)){
+        //     cache.width = measureText.width;
+        // }
+        // else{
+        //     //measureText.actualBoundingBoxLeft + 
+        //     cache.width = measureText.actualBoundingBoxRight;
+        // }
+
+        cache.width = measureText.width;
 
         if(fontset!=null){
             ctx.font = fontset;
@@ -237,7 +239,7 @@ function getMeasureText(value, ctx, fontset){
         cache.actualBoundingBoxDescent *= Store.zoomRatio;
         cache.actualBoundingBoxAscent *= Store.zoomRatio;
         Store.measureTextCache[value + "_" + Store.zoomRatio +  "_" + ctx.font] = cache;
-
+        // console.log(measureText, value);
         return cache;
     }
 }

src/index.html

@@ -39,6 +39,20 @@
 				allowEdit:true,
 				forceCalculation:false,
 				plugins: ['chart'],
+				fontList:[
+					{
+					"fontName":"HanaleiFill",
+					"url":"http://localhost:3002/assets/iconfont/HanaleiFill-Regular.ttf"
+					},
+					{
+					"fontName":"Anton",
+					"url":"http://localhost:3002/assets/iconfont/Anton-Regular.ttf"
+					},
+					{
+					"fontName":"Pacifico",
+					"url":"http://localhost:3002/assets/iconfont/Pacifico-Regular.ttf"
+					}
+				],
 				data:  
 				[sheetCell,sheetFormula,sheetConditionFormat,sheetSparkline,sheetTable,sheetComment,sheetPivotTableData,sheetPivotTable,sheetChart,sheetPicture,sheetDataVerification]
 				// [{"name":"Sheet1","config":{"columnlen":{"0":241},"rowlen":{"0":81}},"index":"1","status":"1","order":"0","luckysheet_select_save":[{"row":[0,0],"column":[4,4],"sheetIndex":1}],"zoomRatio":1,"showGridLines":"1","defaultColWidth":72,"defaultRowHeight":18,"celldata":[

src/store/index.js

@@ -131,6 +131,8 @@ const Store = {
     inlineStringEditCache:null,
     inlineStringEditRange:null,
 
+    fontList:[],
+
 }
 
 export default Store;

src/utils/util.js

@@ -375,7 +375,12 @@ function luckysheetfontformat(format) {
             }
             else {
 
-                fontfamily = fontarray[fontjson[format.ff]];
+                // fontfamily = fontarray[fontjson[format.ff]];
+                fontfamily = format.ff;
+
+                if(fontfamily!=null && !document.fonts.check("12px "+fontfamily)){
+                    menuButton.addFontTolist(fontfamily);
+                }
             }
 
             if (fontfamily == null) {
@@ -663,7 +668,6 @@ function loadLinks(urls) {
 }
 
 
-
 export {
     isJsonString,
     common_extend,