Robust Real-Time Synchronizationbetween Textual and Graphical Editors

Oskar van RestGuido Wachsmuth

Jim SteelJörn Guy SüßEelco Visser

2 / 25

Entity Language

3 / 25

Behavior TreesModeling in terms of requirements and behavior

4 / 25

SPARQLQuery RDF data textually or graphically

5 / 25

Architecture

6 / 25

Grammar-to-metamodellexical syntax [a-zA-Z][a-zA-Z0-9]* -> ID

context-free syntax "module" ID Type* -> Start {"Module"} "entity" ID "{" Property* "}" -> Type {"Entity"} "datatype" ID -> Type {"DataType"} "attr" ID ":" ID -> Property {"Attribute"} "ref" ID ":" ID -> Property {"Reference"}

namespaces

Module Entity DataType Property

binding rules

Module(n, _): defines Module n scopes Entity, DataType

Attribute(n, t): defines Property n refers to DataType t

...

7 / 25

Tree-to-model & Model-to-tree

Module( "Library", [ Entity( "Book" , [ Attribute("title", "String") , Reference("author", "Author") ] ) , Entity("Author", []) , DataType("String") ])

8 / 25

Runtime Architecture

synchronize

tree-to-model

diff calc. + merge

diff calc. + merge

model-to-tree

parse

9 / 25

Runtime Architecture

real-time= small changes = precise diff calc. = precise layout preservation

tree-to-model

diff calc. + merge

diff calc. + merge

model-to-tree

parse

synchronize

10 / 25

Graphical Layout Preservation (1)

Conventional approach:● Replace entire model with new one● Re-link layout based on names/indices

● Fails when names/indices change

entity Book2 { attr title : String ref author : Author}

entity Author {}

entity Book { attr title : String ref author : Author}

entity Author {}sync.

change

sync.

11 / 25

diff calc. + merge

Graphical Layout Preservation (2)

New approach: Change rather than replace model Update graph. represent. accordingly

3

4

synchronize

12 / 25

diff calc. + merge

Textual Layout Preservation (1)

Compare ASTs and merge changes into text:● Preserve unchanged elements● Pretty-print new elements● Pretty-print changed elements, but reassign layout

13 / 25

Textual Layout Preservation (2)

Pretty-printers are generated from SDF3 definition:

14 / 25

Textual Layout Preservation (3)

Use origin information to:● Merge text (use origin position)● Improve diff calc. (try match origin term, otherwise use heuristics)

origin position

origin term

origin termdiff calc. + merge

15 / 25

Error Recovery

Apply recovery rules:● Recovery rules generated from the grammar● Malformed text → well-formed AST

Parse errors (1)

16 / 25

Error Recovery

Treat unrecoverable text regions as layout:● Layout preserved during graphical editing● Graphical layout (currently) lost

Parse errors (2)

17 / 25

Error Recovery

Leave unresolved references out of model:● Violations of lower bound constraints allowed● Elements still visualized when possible

Unresolved references

18 / 25

Error Recovery

Introduce defaults to avoid syntax errors:● Defaults can be user-defined● Defaults may result in temp. unresolved references

Graphical syntax errors

19 / 25

Editor Services

Undo-Redo: ● Maintain single (shared)

operation history

Selection sharing:

Persistence:● Persist text and graph● Persist text

(auto-layout diagram)● Persist AST/model

(auto-layout diagram + pretty-print text)

20 / 25

Structural heterogeneity (1)

Generated metamodels not always suitable for particular graphical syntax:

context-free syntax "[" integers:{INT ","}* "]" -> Start {"IntSeq"}

[5, 2, 6, 3]

indefinable mapping

textual syntax

grammar

generated and non-generated metamodels

graphical syntax

21 / 25

Problem*: [textual syntax] ≈ [grammar] = [metamodel] ≈ [graphical syntax]

Structural heterogeneity (2)

*[x] = structure of x

22 / 25

Structural heterogeneity (3)

Solution*: [textual syntax] ≈ [grammar] ≠ [metamodel] ≈ [graphical syntax]

*[x] = structure of x

newnew

23 / 25

Future Work (1)Multi-file support

n files 1 view

24 / 25

Future Work (2)Synchronization between textual editors

25 / 25The Spoofax Language Workbench – www.spoofax.org

Robust Real-Time Synchronizationbetween Textual and Graphical Editors