feat(hook): add

1.Add hook:workbookCreateAfter 2。update FAQ

docs/guide/FAQ.md

@@ -247,3 +247,18 @@ If directly developed locally:
 In this case, after Luckysheet is modified in real time, the changes can be seen in the Vue project
 
 ------------
+
+## **<span style="font-size:20px;">Q</span>** Error reporting `Store.createChart` when creating chart?
+
+**<span style="font-size:20px;">A</span>** You need to introduce a chart plugin to use it. You should configure the chart plugin to use when the workbook is initialized. Refer to
+
+- Plugins configuration [plugins](/guide/config.html#plugins)
+- 或 官方demo [/src/index.html](https://github.com/mengshukeji/Luckysheet/blob/master/src/index.html)
+
+------------
+
+## **<span style="font-size:20px;">Q</span>** Can cells add custom attributes?
+
+**<span style="font-size:20px;">A</span>** The custom attributes directly assigned to the cell object will be filtered. To make the custom attributes take effect, you need to edit the code to remove the filter attributes.
+
+------------

docs/zh/guide/FAQ.md

@@ -237,7 +237,7 @@ Luckysheet教程里采用的CDN链接是 [jsdelivr](https://www.jsdelivr.com/pac
 
 ------------
 
-## **<span style="font-size:20px;">Q</span>**怎样在vue工程里对Luckysheet进行二次开发`？
+## **<span style="font-size:20px;">Q</span>** 怎样在vue工程里对Luckysheet进行二次开发？
 
 **<span style="font-size:20px;">A</span>** [luckysheet-vue](https://github.com/mengshukeji/luckysheet-vue) 案例是提供一个应用集成的方案。
 
@@ -248,3 +248,18 @@ Luckysheet教程里采用的CDN链接是 [jsdelivr](https://www.jsdelivr.com/pac
 这样的话，Luckysheet实时修改后，Vue工程里是可以看到更改的
 
 ------------
+
+## **<span style="font-size:20px;">Q</span>** 创建图表时候报错`Store.createChart`？
+
+**<span style="font-size:20px;">A</span>** 需要引入图表插件才能使用，工作簿初始化的时候应该配置图表插件使用，参考
+
+- 插件配置 [plugins](/zh/guide/config.html#配置项)
+- 或 官方demo [/src/index.html](https://github.com/mengshukeji/Luckysheet/blob/master/src/index.html)
+
+------------
+
+## **<span style="font-size:20px;">Q</span>** 单元格能增加自定义属性吗？
+
+**<span style="font-size:20px;">A</span>** 直接赋值到单元格对象上的自定义属性会被过滤，要想使得自定义属性生效，需要二开去除过滤属性的代码。
+
+------------

src/controllers/listener.js

@@ -1,10 +1,26 @@
 /**
  * Monitor special variables
  */
-import {createProxy} from '../utils/util'
-import Store from '../store/index'
+import {createProxy} from '../utils/util';
+import Store from '../store/index';
+import method from '../global/method';
+import { getluckysheetfile } from '../methods/get'
+import { toJson } from '../global/api';
+
 const initListener = function(){
-    createProxy(Store,['jfredo']);
+    // createProxy(Store,['jfredo']);
+    createProxy(Store, 'jfredo',(target, property, val, receiver)=>{
+        if (property !== 'length') {
+            //  钩子函数
+            method.createHookFunction('updated',val)
+        }
+    } );
+
+    createProxy(Store, 'asyncLoad', (target, property, val, receiver)=>{
+        if(property === 'length' && val === 0){
+            method.createHookFunction('workbookCreateAfter', toJson())
+        }
+    })
 }
 
 export {

src/controllers/menuButton.js

@@ -4540,7 +4540,7 @@ const menuButton = {
             document.fonts && 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");
+                // console.log("font ready");
             });
         }
 

src/controllers/sheetmanage.js

@@ -10,7 +10,7 @@ import rhchInit from '../global/rhchInit';
 import editor from '../global/editor';
 import { luckysheetextendtable, luckysheetdeletetable } from '../global/extend';
 import { isRealNum } from '../global/validate';
-import { replaceHtml, getObjType, chatatABC } from '../utils/util';
+import { replaceHtml, getObjType, chatatABC, arrayRemoveItem } from '../utils/util';
 import { sheetHTML,luckysheetlodingHTML } from './constant';
 import server from './server';
 import luckysheetConfigsetting from './luckysheetConfigsetting';
@@ -758,6 +758,15 @@ const sheetmanage = {
             colwidth = c2 + 1;
         }
 
+        //钩子函数 表格创建之前触发
+        if(typeof luckysheetConfigsetting.beforeCreateDom == "function" ){
+            luckysheetConfigsetting.beforeCreateDom(luckysheet);
+        }
+
+        if(typeof luckysheetConfigsetting.workbookCreateBefore == "function"){
+            luckysheetConfigsetting.workbookCreateBefore(luckysheet);
+        }
+
         // Store.flowdata = data;
 
         luckysheetcreatedom(colwidth, rowheight, data, menu, title);
@@ -829,14 +838,17 @@ const sheetmanage = {
                         }
                     }
 
-                    //钩子函数 表格创建之前触发
-                    if(typeof luckysheetConfigsetting.beforeCreateDom == "function" ){
-                        luckysheetConfigsetting.beforeCreateDom(luckysheet);
-                    }
+                    // 此处已经渲染完成表格，应该挪到前面
+                    // //钩子函数 表格创建之前触发
+                    // if(typeof luckysheetConfigsetting.beforeCreateDom == "function" ){
+                    //     luckysheetConfigsetting.beforeCreateDom(luckysheet);
+                    // }
 
-                    if(typeof luckysheetConfigsetting.workbookCreateBefore == "function"){
-                        luckysheetConfigsetting.workbookCreateBefore(luckysheet);
-                    }
+                    // if(typeof luckysheetConfigsetting.workbookCreateBefore == "function"){
+                    //     luckysheetConfigsetting.workbookCreateBefore(luckysheet);
+                    // }
+
+                    arrayRemoveItem(Store.asyncLoad,'core');
 
                     if(luckysheetConfigsetting.pointEdit){
                         setTimeout(function(){

src/core.js

@@ -136,6 +136,9 @@ luckysheet.create = function (setting) {
 
     if (Store.lang === 'zh') flatpickr.localize(Mandarin.zh);
 
+    // Store the currently used plugins for monitoring asynchronous loading
+    Store.asyncLoad.push(...luckysheetConfigsetting.plugins);
+    
     // Register plugins
     initPlugins(extendsetting.plugins , extendsetting.data);
 

src/expendPlugins/chart/plugin.js

@@ -1,4 +1,4 @@
-import { seriesLoadScripts, loadLinks, $$ } from '../../utils/util'
+import { seriesLoadScripts, loadLinks, $$, arrayRemoveItem } from '../../utils/util'
 import { generateRandomKey, replaceHtml } from '../../utils/chartUtil'
 import { getdatabyselection, getcellvalue } from '../../global/getdata';
 import chartInfo from '../../store'
@@ -84,7 +84,7 @@ function chart(data, isDemo) {
         chartInfo.chartparam.getChartJson = chartmix.default.getChartJson
         chartInfo.chartparam.insertToStore = chartmix.default.insertToStore
 
-        // 初始化渲染图表
+        // Initialize the rendering chart
         for (let i = 0; i < data.length; i++) {
             // if (data[i].status == '1') {
                 renderCharts(data[i].chart, isDemo)
@@ -97,6 +97,9 @@ function chart(data, isDemo) {
             }
         }
 
+        // After the chart is loaded, mark it
+        arrayRemoveItem(chartInfo.asyncLoad,'chart');
+
     });
 }
 

src/global/draw.js

@@ -214,7 +214,6 @@ function luckysheetDrawgridRowTitle(scrollHeight, drawHeight, offsetTop) {
 
     luckysheetTableContent.restore(); 
     
-    luckysheetTableContent.restore();
 }
 
 function luckysheetDrawgridColumnTitle(scrollWidth, drawWidth, offsetLeft) {
@@ -410,7 +409,7 @@ function luckysheetDrawgridColumnTitle(scrollWidth, drawWidth, offsetLeft) {
     // luckysheetTableContent.clearRect(0, 0, Store.rowHeaderWidth , Store.columnHeaderHeight );
 
     luckysheetTableContent.restore();
-    luckysheetTableContent.restore();
+
 }
 
 function luckysheetDrawMain(scrollWidth, scrollHeight, drawWidth, drawHeight, offsetLeft, offsetTop, columnOffsetCell, rowOffsetCell, mycanvas) {
@@ -1073,6 +1072,7 @@ function luckysheetDrawMain(scrollWidth, scrollHeight, drawWidth, drawHeight, of
         Store.measureTextCellInfoCache = {};
         Store.cellOverflowMapCache = {};
     }, 2000);
+
 }
 
 

src/index.html

@@ -127,7 +127,7 @@
 							// console.info(data,sheetFile,ctx)
 						},
 						updated:function(operate){
-							// console.info(operate)
+							console.info(operate)
 						},
 						cellUpdateBefore:function(r,c,value,isRefresh){
 							// console.info('cellUpdateBefore',r,c,value,isRefresh)
@@ -162,6 +162,9 @@
 						cellEditBefore:function(range ){
 							// console.info(range)
 						},
+						workbookCreateAfter:function(json){
+							// console.info(json)
+						},
 						
 
 					},

src/store/index.js

@@ -146,7 +146,10 @@ const Store = {
         allDataColumnlen:[],//列宽发生过改变的列
         merge_range:{},//合并时单元格信息
         checkoutData:[],//切换表格页时所需数据
-    }
+    },
+
+    // Resources that currently need to be loaded asynchronously, especially plugins. 'Core' marks the core rendering process.
+    asyncLoad:['core'],
 
 }
 

src/utils/util.js

@@ -4,7 +4,7 @@ import { isdatatype, isdatatypemulti } from '../global/datecontroll';
 import { hasChinaword,isRealNum } from '../global/validate';
 import Store from '../store';
 import locale from '../locale/locale'; 
-import method from '../global/method';
+// import method from '../global/method';
 
 /**
  * Common tool methods
@@ -788,37 +788,50 @@ function openSelfModel(id, isshowMask=true){
  * 监控对象变更
  * @param {*} data 
  */
-const createProxy = (data,list=[]) => {
-    if (typeof data === 'object' && data.toString() === '[object Object]') {
-      for (let k in data) {
-        if(list.includes(k)){
-            if (typeof data[k] === 'object') {
-              defineObjectReactive(data, k, data[k])
+// const createProxy = (data,list=[]) => {
+//     if (typeof data === 'object' && data.toString() === '[object Object]') {
+//       for (let k in data) {
+//         if(list.includes(k)){
+//             if (typeof data[k] === 'object') {
+//               defineObjectReactive(data, k, data[k])
+//             } else {
+//               defineBasicReactive(data, k, data[k])
+//             }
+//         }
+//       }
+//     }
+// }
+
+const createProxy = (data, k, callback) => {
+    if(!data.hasOwnProperty(k)){ 
+        console.info('No %s in data',k);
+        return; 
+    };
+
+    if (getObjType(data) === 'object') {
+        if (getObjType(data[k]) === 'object' || getObjType(data[k]) === 'array') {
+            defineObjectReactive(data, k, data[k], callback)
         } else {
-              defineBasicReactive(data, k, data[k])
-            }
-        }
+            defineBasicReactive(data, k, data[k], callback)
         }
     }
 }
   
-function defineObjectReactive(obj, key, value) {
+function defineObjectReactive(obj, key, value, callback) {
     // 递归
-    // createProxy(value)
     obj[key] = new Proxy(value, {
       set(target, property, val, receiver) {
-        if (property !== 'length') {
+        
           setTimeout(() => {
-            //  钩子函数
-            method.createHookFunction('updated',val)
+            callback(target, property, val, receiver);
           }, 0);
-        }
+
         return Reflect.set(target, property, val, receiver)
       }
     })
 }
   
-function defineBasicReactive(obj, key, value) {
+function defineBasicReactive(obj, key, value, callback) {
     Object.defineProperty(obj, key, {
       enumerable: true,
       configurable: false,
@@ -828,7 +841,27 @@ function defineBasicReactive(obj, key, value) {
       set(newValue) {
         if (value === newValue) return
         console.log(`发现 ${key} 属性 ${value} -> ${newValue}`)
+
+        setTimeout(() => {
+            callback(value,newValue);
+        }, 0);
+
         value = newValue
+
+      }
+    })
+}
+
+/**
+ * Remove an item in the specified array
+ * @param {array} array Target array 
+ * @param {string} item What needs to be removed
+ */
+function arrayRemoveItem(array, item) {
+    array.some((curr, index, arr)=>{
+        if(curr === item){
+            arr.splice(index, 1);
+            return curr === item;
         }
     })
 }
@@ -861,5 +894,6 @@ export {
     luckysheetContainerFocus,
     transformRangeToAbsolute,
     openSelfModel,
-    createProxy
+    createProxy,
+    arrayRemoveItem
 }