It is finished: we have released a large-scale update of the ONLYOFFICE mobile application Documents numbered 1.3 for iOS devices. Now the application has a spreadsheet editor for iPad, which can do a lot of different and useful things - almost everything that can be done in the web version. And added the ability to connect third-party storage Google Drive, Dropbox, OneDrive, Yandex Disk, and others that support the WebDAV protocol.

In this article we will tell you more about how the spreadsheet editor is arranged.



')

Functionality

These are the capabilities that the ONLYOFFICE Documents application empowers its users:

Manage documents stored on ONLYOFFICE portals and other cloud services connected to ONLYOFFICE;

• Edit text files (iPhone, iPad);
• Edit spreadsheets (iPad);
• View presentations and pdf files.

We like our text editor - fully featured and very capable. We even shot a video about what he can do. Here it is:



The table editor also knows a lot. All table objects can be managed. The text in the cells is formatted, the properties of the cells change, formulas, diagrams, autoshapes are inserted, the tables themselves are exported and printed.



Next, tell about the device of this editor.

Anatomy of a table editor

We have already written about the device of our desktop application here . In principle, when developing all our document editors, we follow the same scheme. All business logic for the formation of data is created on javascript'e. We have a common code for the web, desktops and mobile applications, the only difference is the conclusion. Unlike desktops, iOS apps have native document rendering.

Here is the general scheme of the application:

Why we did our own rendering

In theory, we had the option to draw and draw by analogy with the web, that is, to use WebView. Why we did not do this:

1. Analog Chrome in iOS can not be used: Apple does not allow the use of third-party javascript engines.

2. The built-in browser works very slowly with our editors. This is due to the fact that all iOS devices have a large screen resolution. Since we ourselves draw all the documents on the Canvas, for such screens we need to draw and calculate more (approximately twice). The result is a loss in performance.

In general, we did this: selected graphics from the editor, working with fonts and displaying the document itself into separate native components and transferred them to C ++, leaving the core of editors to calculate the visible areas and tracking. Due to this, we can draw an unlimited number of rows, columns.

Share and calculate

Unlike the document editor, where we know the physical size of the sheet, the table is limitless. We cannot create a limitless virtual texture. To render the picture faster, we break our potentially limitless table into squares. For example, the table itself may be more than 100 thousand lines, but for the user, we draw only the area he needs at a given time — several squares with visible areas (with a small margin). Everything else is calculated as needed and is not physically drawn until it is needed. Similar principles work, for example, Yandex.Maps.

Scheme:



After opening the document, the visible area beats into squares of 1024x1024 pixels. Each such square is calculated by our javascript editor. In the process of calculating the document from the native code, information on the fonts is taken and instruction is packed into the array. As a result of calculating the visible square, we get an array of commands for drawing (for example, draw a line, paint a region, draw a letter, etc.). Further commands are rasterized by the native graphic library into bitmaps. Then, in the main thread, the OpenGL texture is updated or created using these bitmaps of the same size. All this is done asynchronously (except for the last item).

Results

We have made a cool application that works well and supports most of the features of the web version. But this development does not stop. We are currently working on a spreadsheet editor for the iPhone. We also plan to expand the capabilities of the spreadsheet editor, and also implement the demanded autosave feature.

Our application is available in the App Store by reference . To work with him you need an active portal ONLYOFFICE. If there is no portal, you can create a personal office for free using the application itself.