reference

Blog.csdn.net/u010593516/…

Project File Description

  • Json configuration file for the package.json project

  • The gulpfile.js project is packaged and developed through GULp

  • /dist Output file after packaging

  • /doc Description document

  • /node_modules

  • / SRC the source file

    • Config.js is the default configuration file for the project

    • The entry file for the core.js project, where create initializes and loads the corresponding event handler

    • Index.html is used in the development of index.html, but the index.html in the master branch is so large that it is almost 2000 lines long that it cannot be used at all. Here, you can write a simple index.html to replace the index.html provided by it. Here, if we modify the code in index.html, it is immediately packaged and copied to the directory /dist.

    • Index.js just does the fix for Firefox and then exports the Luckysheet

    • /controllers

      • Alternateformat. js Controller for color cells
      • Conditionform.js conditional format
      • Constant. js defines some constants, including the right click and the dom structure of the entire table
      • Controlhistory.js Records some operation history for operations such as rollback
      • Dropcell. js performs some dropdown operations in cells
      • The expendplugins.js registers some plugins, currently only chart and print are supported, but if you write chart, it will throw an error, which is caught by the browser
      • Filter.js filters related operations
      • Keyboard.js Some keyboard-related operations
      • Searchreplace.js looks for the operations associated with the replacement

    • / CSS style related directory

    • /data configuration related to plug-in Chart

    • The configuration of 9 sheets in the /demoData directory can be imported into the index. HTML to display and view each sheet

    • The /expendPlugins are related to the Chart plugin

    • / fonts font

    • /function encapsulates some common function-related operations

    • /global encapsulates some commonly used functions

    • /locale Locale, Chinese or English

    • /methods encapsulates some commonly used functions

    • /plugins refers to some plugins

    • /store Is similar to redux, the top-level data stream

    • /utils encapsulates some utility functions

Core. Js analysis

  1. Similar to Webpack, all configs are merged and some of the config Settings are mounted to the store as a global configuration

  2. initPlugins(extendsetting.plugins, extendsetting.data); To register the plugin

  3. If there is no set loadurl, that is, data is not from the backend, from sheetmanage. InitialjfFile (menu, title); To obtain the data to be displayed by the current sheet

  4. The required initialization events are then completed through the initialWorkBook, which is really just two things, rendering and binding the corresponding event handler.

    Function initialWorkBook() {// Create the DOM and bind the event handler luckysheetHandler(); //Overall dom initialization initialFilterHandler(); //Filter initialization initialMatrixOperation(); //Right click matrix initialization initialSheetBar(); //bottom sheet bar initialization formulaBarInitial(); //top formula bar initialization rowColumnOperationInitial(); //row and coloumn operate initialization keyboardInitial(); //Keyboard operate initialization orderByInitial(); //menu bar orderby function initialization zoomInitial(); //zoom method initialization printInitial(); //print initialization initListener(); }Copy the code

First rendering process

  1. First get the render data corresponding to the current sheet. The format here is the same as that in demoData

  2. The final render is luckySheetCreateDOM (Colwidth, Rowheight, data, Menu, title) in global/createdom.js, and the parameter functions are clear.

  3. Then it’s gridHTML to get the template string and replaceHtml to replace the variables in the template string.

  4. The display area in the middle uses canvas to draw according to the data, which is also relatively simple.

  5. The final render will look like this:

Listen for an event

$(“#luckysheet-cell-main, #luckysheetTableContent”); / / luckysheetTableContent (” luckySheet-cell-main, #luckysheetTableContent”); Double-click, the controllers/updateCell. Js added inside the edit box.

How do we update the data, say we edit a cell

  1. When we double click on a cell, we insert a DOM element with luckysheet-rich-text-editor, and then when we edit, This is captured by the keydown binding on the Luckysheet-input-box in controllers/ Keyboard.js and updated by functionInputHanddler.

     formula.functionInputHanddler(
          $("#luckysheet-functionbox-cell"),
          $("#luckysheet-rich-text-editor"),
          kcode
        );
Copy the code

  2. When we’re done, instead of writing data to store. flowData, we wait until the next time you click on another cell, $(“#luckysheet-cell-main, #luckysheetTableContent”) = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =

/ / the last updated here to Store the data. The flowData, Store the luckysheetCellUpdate [0], the number of rows in the table shows the last update, Store. LuckysheetCellUpdate [1] said last updated column number of the formula. The updatecell (Store. LuckysheetCellUpdate [0]. Store.luckysheetCellUpdate[1] );Copy the code

  1. The updatecell function is in global/formula.js,

    // When you click on another cell after the normal click edit, update it here // r is the coordinates of the last updated row // c is the coordinates of the last updated column // value is empty // isRefresh defaults to true, which means it will refresh by default, // The main function here is to update the store. flowData by fetching the values of r and c cells. // Then call jFreFreshGrid to update canvas updatecell: function(r, c, value, isRefresh = true)Copy the code
  1. Jfrefreshgrid is in global/ Refresh, and here luckysheetDrawMain is called to re-render the viewable area. This is all re-rendered, and it should be optimized to render only the modified part later. At this point, the process is almost complete.

mini-luckySheet

Initialize the environment

  1. Download the code [email protected]:zsjun/ mini_Luckysheet. git, and then roll back the code to the commitId of the initialization environment, i.e., execute the command

    git reset --hard a6a60d0d71fd9da2c1a22d04480e62643111bb1b
Copy the code

    Then run the following command to download the installation package, because there is no file in SRC, so it cannot be started temporarily

    npm install
Copy the code

The basic rendering

  1. The version is 59 ef7e82d7972782c3c0689153d36a49552aaf10
  2. The basic process is to first get all the configuration, then append some of the HTML defined into the body using createDOM, and then draw the table using Canvas using LuckySheetSizeAuto.

Added scrolling and resize

  1. The version is 26 bace3b69dbb88fc2ea0aa398f0e569307ff69d

  2. Here is mainly to increase the SRC/controllers/handle. Js, bound using the jquery in the scroll event handler.

    $("#luckysheet-scrollbar-x") .scroll(function() { luckysheetscrollevent(); }) .mousewheel(function(event, delta) { event.preventDefault(); }); $(window).resize( debounce(function() { let luckysheetDocument = document.getElementById(Store.container); console.log(luckysheetDocument); if (luckysheetDocument) { luckysheetsizeauto(); }}, 500));Copy the code

Add cells can be selected

  1. version: 56b10f35334fed4e1ec4caf77280a324c1daa9b5

  1. Add an array luckysheet_select_save to store/index.js to save the selected cells

  2. Added under Luckysheet-cell-main in Constant /gridHTML

    ​​

    ​​

  1. Add the mouseDown event handler to the canvas and div that covers the entire canvas. The mouseDown event handler simply retrieves the current coordinates and calculates the row and column in the canvas. Then highlight the cell and it will be ok
  2. The key thing here is how do you figure out what row and what column are you in according to the coordinates, and what’s the processing logic here

Inside global/location.js, the processing logic here is also very simple

Function collocations (x) {9 = 9 9 = 9 9 = 9 9 = 9 9 = 9 9 = 9 9 = 9 9 = 9 col_index = luckysheet_searcharray(Store.visibledatacolumn, x); if (col_index == -1 && x > 0) { col_index = Store.visibledatacolumn.length - 1; } else if (col_index == -1 && x <= 0) { col_index = 0; } return colLocationByIndex(col_index); }Copy the code

Added double-click cell to edit

The overall logic here is simple, we first add inputhTML to the HTML, and then bind a double click event to the div covering the canvas. When we double click, we get the current row and column, and position the corresponding InputhTML to that position

  1. Version: f7039cb8aa9e3d475f35182e85dd9882c3179709
  2. Add inputHTML inside Constant and append HTML to body in global/createDom
  3. Add the dbclick event handler to controller/handle.js. The logic is simple.