diff --git a/docs/guide/FAQ.md b/docs/guide/FAQ.md index b203bb1..eca2ef3 100644 --- a/docs/guide/FAQ.md +++ b/docs/guide/FAQ.md @@ -246,4 +246,19 @@ If directly developed locally: In this case, after Luckysheet is modified in real time, the changes can be seen in the Vue project +------------ + +## **Q** Error reporting `Store.createChart` when creating chart? + +**A** 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) + +------------ + +## **Q** Can cells add custom attributes? + +**A** 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. + ------------ \ No newline at end of file diff --git a/docs/zh/guide/FAQ.md b/docs/zh/guide/FAQ.md index 7c4482b..d82d56a 100644 --- a/docs/zh/guide/FAQ.md +++ b/docs/zh/guide/FAQ.md @@ -237,7 +237,7 @@ Luckysheet教程里采用的CDN链接是 [jsdelivr](https://www.jsdelivr.com/pac ------------ -## **Q**怎样在vue工程里对Luckysheet进行二次开发`？ +## **Q** 怎样在vue工程里对Luckysheet进行二次开发？ **A** [luckysheet-vue](https://github.com/mengshukeji/luckysheet-vue) 案例是提供一个应用集成的方案。 @@ -247,4 +247,19 @@ Luckysheet教程里采用的CDN链接是 [jsdelivr](https://www.jsdelivr.com/pac 这样的话，Luckysheet实时修改后，Vue工程里是可以看到更改的 +------------ + +## **Q** 创建图表时候报错`Store.createChart`？ + +**A** 需要引入图表插件才能使用，工作簿初始化的时候应该配置图表插件使用，参考 + +- 插件配置 [plugins](/zh/guide/config.html#配置项) +- 或 官方demo [/src/index.html](https://github.com/mengshukeji/Luckysheet/blob/master/src/index.html) + +------------ + +## **Q** 单元格能增加自定义属性吗？ + +**A** 直接赋值到单元格对象上的自定义属性会被过滤，要想使得自定义属性生效，需要二开去除过滤属性的代码。 + ------------ \ No newline at end of file diff --git a/src/controllers/listener.js b/src/controllers/listener.js index f253d22..f9d7aba 100644 --- a/src/controllers/listener.js +++ b/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 { diff --git a/src/controllers/menuButton.js b/src/controllers/menuButton.js index 74431a6..9037342 100644 --- a/src/controllers/menuButton.js +++ b/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"); }); } diff --git a/src/controllers/sheetmanage.js b/src/controllers/sheetmanage.js index 6119652..d02a790 100644 --- a/src/controllers/sheetmanage.js +++ b/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(){ diff --git a/src/core.js b/src/core.js index 9ec44a4..bee8a45 100644 --- a/src/core.js +++ b/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); diff --git a/src/expendPlugins/chart/plugin.js b/src/expendPlugins/chart/plugin.js index 0abac64..063b97d 100644 --- a/src/expendPlugins/chart/plugin.js +++ b/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'); + }); } diff --git a/src/global/draw.js b/src/global/draw.js index 8b7209f..09bf7fc 100644 --- a/src/global/draw.js +++ b/src/global/draw.js @@ -212,9 +212,8 @@ function luckysheetDrawgridRowTitle(scrollHeight, drawHeight, offsetTop) { //清除canvas左上角区域 防止列标题栏序列号溢出显示 // luckysheetTableContent.clearRect(0, 0, Store.rowHeaderWidth , Store.columnHeaderHeight ); - luckysheetTableContent.restore(); - - 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); + } diff --git a/src/index.html b/src/index.html index 0dcf8a6..7f2c8ca 100644 --- a/src/index.html +++ b/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) + }, }, diff --git a/src/store/index.js b/src/store/index.js index 82e5f97..d057a6a 100644 --- a/src/store/index.js +++ b/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'], } diff --git a/src/utils/util.js b/src/utils/util.js index 293c4d7..9c7d13b 100644 --- a/src/utils/util.js +++ b/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]) - } else { - defineBasicReactive(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], 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,11 +841,31 @@ 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; + } + }) +} + export { isJsonString, @@ -861,5 +894,6 @@ export { luckysheetContainerFocus, transformRangeToAbsolute, openSelfModel, - createProxy + createProxy, + arrayRemoveItem } \ No newline at end of file