LibreOffjce Online client side development by Mihai Varga - - PowerPoint PPT Presentation

▶
libreoffjce online client side development
SMART_READER_LITE
LIVE PREVIEW

LibreOffjce Online client side development by Mihai Varga - - PowerPoint PPT Presentation

Apr 20, 2023 160 likes •544 views

LibreOffjce Online client side development by Mihai Varga Consultant Software Engineer Intern +MihaiVarga13 mihai.varga@collabora.com @CollaboraOffjce www.CollaboraOffjce.com A brief introduction 2/37 LibreOffjce Conference 2015 |

slide-1
SLIDE 1

www.CollaboraOffjce.com

LibreOffjce Online – client side development

by Mihai Varga

Consultant Software Engineer Intern +MihaiVarga13 mihai.varga@collabora.com @CollaboraOffjce

slide-2
SLIDE 2

LibreOffjce Conference 2015 | Aarhus 2/37

A brief introduction

slide-3
SLIDE 3

LibreOffjce Conference 2015 | Aarhus 3/37

A brief introduction

  • LibreOffice Online:
  • development started in April 2015
  • consists of two major parts:

– the server – the client

  • Leaflet
  • JavaScript
slide-4
SLIDE 4

LibreOffjce Conference 2015 | Aarhus 4/37

Leafmet

slide-5
SLIDE 5

LibreOffjce Conference 2015 | Aarhus 5/37

A brief introduction

  • how Leaflet usually looks like
slide-6
SLIDE 6

LibreOffjce Conference 2015 | Aarhus 6/37

Leafmet

  • an open-source JavaScript library
  • interactive maps
  • tile-based implementation
  • used by many big companies
slide-7
SLIDE 7

LibreOffjce Conference 2015 | Aarhus 7/37

Leafmet

  • What have we changed ?
  • added web socket for

communication with the server

  • binary images
  • caching more tiles
slide-8
SLIDE 8

LibreOffjce Conference 2015 | Aarhus 8/37

Loading the document

slide-9
SLIDE 9

LibreOffjce Conference 2015 | Aarhus 9/37

Loading the document

  • used Leaflet's simple CRS

(Coordinate reference system)

  • the tile at (0, 0) is placed in the

left top corner

  • request images from server

based on the coordinates of the visible area

slide-10
SLIDE 10

LibreOffjce Conference 2015 | Aarhus 10/37

Loading the document

  • the server sends binary .png

images → these are transformed into data URIs

  • example: An HTML fragment

embedding a picture of a small red dot:

slide-11
SLIDE 11

LibreOffjce Conference 2015 | Aarhus 11/37

Loading the document

slide-12
SLIDE 12

LibreOffjce Conference 2015 | Aarhus 12/37

Caching

slide-13
SLIDE 13

LibreOffjce Conference 2015 | Aarhus 13/37

Caching

  • tiles outside of the viewing area

are pre-fetched and cached

  • tiles are not deleted when

removed from the DOM tree

slide-14
SLIDE 14

LibreOffjce Conference 2015 | Aarhus 14/37

Viewing the document

slide-15
SLIDE 15

LibreOffjce Conference 2015 | Aarhus 15/37

Viewing the document

  • implemented a scroll API → scroll

bars can be easily plugged in

  • based on Leaflet's panning

methods

  • the document can also be

panned with the mouse

  • different zoom levels
slide-16
SLIDE 16

LibreOffjce Conference 2015 | Aarhus 16/37

Viewing the document

  • selections are implemented as a

SVG overlay

  • text can be selected and copied

from the document

  • the user can shrink / enlarge the

selection

slide-17
SLIDE 17

LibreOffjce Conference 2015 | Aarhus 17/37

Editing the document

slide-18
SLIDE 18

LibreOffjce Conference 2015 | Aarhus 18/37

Editing the document

  • typical scenario: key strokes are

sent to the server → tiles are invalidated → new tiles are requested and repainted → cursor is moved, etc.

slide-19
SLIDE 19

LibreOffjce Conference 2015 | Aarhus 19/37

Editing the document

  • how are key strokes captured?
  • we have a hidden text area in which the

user types

  • keyboard events are intercepted
  • browser compatibility issues, the

keyboard event is different across browsers

slide-20
SLIDE 20

LibreOffjce Conference 2015 | Aarhus 20/37

Editing the document

  • images and shapes can be moved and

resized

slide-21
SLIDE 21

LibreOffjce Conference 2015 | Aarhus 21/37

Editing the document

  • copying
  • the ClipboardEvent is captured in the

hidden text area

  • due to security issues, access to the

user's clipboard is quite restricted

  • the event must be handled

synchronously when captured, else it will 'expire'

slide-22
SLIDE 22

LibreOffjce Conference 2015 | Aarhus 22/37

Editing the document

  • what's next for copying
  • there is ongoing work for a Clipboard

API (current status: Working Draft)

  • very little support for rtf
  • plain text or html currently works better
  • alternatives: zeroclipboard library

– but this uses flash which will soon be

deprecated

slide-23
SLIDE 23

LibreOffjce Conference 2015 | Aarhus 23/37

The toolbar

slide-24
SLIDE 24

LibreOffjce Conference 2015 | Aarhus 24/37

The toolbar

  • we've extended Leaflet's API to provide

methods for building / using the toolbar

  • most of the methods work through a UNO

command

  • it's easy to plug in and out different

toolbar components

  • can be easily integrated in an already

existing JavaScript application

slide-25
SLIDE 25

LibreOffjce Conference 2015 | Aarhus 25/37

The toolbar

Cloudsuite toolbar

slide-26
SLIDE 26

LibreOffjce Conference 2015 | Aarhus 26/37

The toolbar

A closer look at the toolbar

slide-27
SLIDE 27

LibreOffjce Conference 2015 | Aarhus 27/37

The toolbar

Searching

slide-28
SLIDE 28

LibreOffjce Conference 2015 | Aarhus 28/37

The toolbar

  • a few other features not available through

UNO commands:

  • goToPage / goToPart
  • Enable editing / viewing mode
  • Zoom in / out
  • Enable mouse selection or panning
slide-29
SLIDE 29

LibreOffjce Conference 2015 | Aarhus 29/37

The toolbar

slide-30
SLIDE 30

LibreOffjce Conference 2015 | Aarhus 30/37

T esting

slide-31
SLIDE 31

LibreOffjce Conference 2015 | Aarhus 31/37

T esting

  • automated testing is possible
  • Leaflet was already using the mocha

JavaScript framework

  • nice way of testing the new and the old

features of Leaflet

  • we can replay an editing session
slide-32
SLIDE 32

LibreOffjce Conference 2015 | Aarhus 32/37

T esting

  • the tests have to be run in the

browser

  • an alternative is to use PhantomJS,

but it currently only has hixie-76 websockets

  • PhantomJS 2.x promises RFC

6455 websockets, so this will be the way to go

slide-33
SLIDE 33

LibreOffjce Conference 2015 | Aarhus 33/37

T esting

  • performance while editing
  • tile loading time it's really good on

average (< 100 ms)

  • we are still working on improving it
  • might have to do with how binary images

are loaded in the browser

slide-34
SLIDE 34

LibreOffjce Conference 2015 | Aarhus 34/37

Demo

slide-35
SLIDE 35

LibreOffjce Conference 2015 | Aarhus 35/37

slide-36
SLIDE 36

LibreOffjce Conference 2015 | Aarhus 36/37

slide-37
SLIDE 37

LibreOffjce Conference 2015 | Aarhus 37/37

Thank you!

  • Slides will also be available on

http://mihai-varga.blogspot.com/ (sometime soon)