27. TODOs for a
Diagram editor
Graphical Tool
Hard-wired
bidirectional mapping
Element picker / filter
28. TODOs for a
Diagram editor
Graphical Tool
Hard-wired
bidirectional mapping
Element picker / filter
Bidirectional
transaction mapper
29. TODOs for a
Diagram editor
Graphical Tool
Hard-wired
bidirectional mapping
Element picker / filter
Bidirectional
transaction mapper
Diagram design
30. TODOs for a
Diagram editor
Graphical Tool
Hard-wired
bidirectional mapping
Element picker / filter
Bidirectional
transaction mapper
Diagram design
Model browser or full
model editor
31. TODOs for a
Diagram editor
Graphical Tool
Hard-wired
bidirectional mapping
Element picker / filter
Bidirectional
transaction mapper
Diagram design
Model browser or full
model editor
Detail editor
32. TODOs for a
Diagram editor
Graphical Tool
Hard-wired
bidirectional mapping
Element picker / filter
Bidirectional
transaction mapper
Diagram design
Model browser or full
model editor
Detail editor
Model navigation
33. TODOs for a
Diagram editor
Graphical Tool
Hard-wired
bidirectional mapping
Element picker / filter
Bidirectional
transaction mapper
Diagram design
Model browser or full
model editor
Detail editor
Model navigation
34. TODOs for a
Diagram editor
Graphical Tool
Hard-wired
bidirectional mapping
Element picker / filter
Bidirectional
transaction mapper
Diagram design
Model browser or full
model editor
Detail editor
Model navigation
35. TODOs for a
Diagram editor
Graphical Tool
Hard-wired
view
bidirectional mapping
Element picker / filter
Bidirectional
transaction mapper
Diagram design
Model browser or full
model editor
Detail editor
Model navigation
36. TODOs for a
Diagram editor
Graphical Tool
Hard-wired
uni view
bidirectional mapping
Element picker / filter
Bidirectional
transaction mapper
Diagram design
Model browser or full
model editor
Detail editor
Model navigation
37. TODOs for a
Diagram editor
Graphical Tool
Hard-wired
uni view
bidirectional mapping
Element picker / filter DSL
Bidirectional
transaction mapper
Diagram design
Model browser or full
model editor
Detail editor
Model navigation
38. TODOs for a
Diagram editor
Graphical Tool
Hard-wired
uni view
bidirectional mapping
Element picker / filter DSL
Bidirectional expressions
transaction mapper
Diagram design
Model browser or full
model editor
Detail editor
Model navigation
39. TODOs for a
Diagram editor
Graphical Tool
Hard-wired
uni view
bidirectional mapping
Element picker / filter DSL
Bidirectional expressions
transaction mapper
snapshot
Diagram design
Model browser or full
model editor
Detail editor
Model navigation
40. TODOs for a
Diagram editor
Graphical Tool
Hard-wired
uni view
bidirectional mapping
Element picker / filter DSL
Bidirectional expressions
transaction mapper
snapshot
stylesheet DSL
Diagram design
Model browser or full
model editor
Detail editor
Model navigation
41. TODOs for a
Diagram editor
Graphical Tool
Hard-wired
uni view
bidirectional mapping
Element picker / filter DSL
Bidirectional expressions
transaction mapper
snapshot
liveDiagramstylesheet DSL
design
Model browser or full
model editor
Detail editor
Model navigation
42. TODOs for a
Diagram editor
Graphical Tool
Hard-wired
uni view
bidirectional mapping
live Element picker / filter DSL
Bidirectional expressions
transaction mapper
snapshot
liveDiagramstylesheet DSL
design
Model browser or full
model editor
Detail editor
Model navigation
43. TODOs for a
Diagram editor
Graphical Tool
Hard-wired
uni view
bidirectional mapping
live Element picker / filter DSL
Bidirectional expressions
transaction mapper
snapshot
liveDiagramstylesheet DSL
design
Model browser or full
model editor
Detail editor
Model navigation
44. TODOs for a
Diagram editor
Graphical Tool
Hard-wired
uni view
bidirectional mapping
live Element picker / filter DSL
Bidirectional expressions
transaction mapper
snapshot
liveDiagramstylesheet DSL
design
Model browser or full
text
model editor
Detail editor
Model navigation
50. RUNTIME
• Reads mapping and stylesheet
• Capture snapshots of any live model
• Render GEF diagram with shape library
• Selection / navigation adapter for
• EMF, Xtext, JDT
60. diagram EClassHierarchy type EClass {
node EClassNode for this {
label Name for this
MyClass this MyClass
SuperClass
61. diagram EClassHierarchy type EClass {
node EClassNode for this {
label Name for this
edge SuperType for each this.getESuperTypes() {
MyClass this MyClass
SuperClass
62. diagram EClassHierarchy type EClass {
node EClassNode for this {
label Name for this
edge SuperType for each this.getESuperTypes() {
MyClass MyClass
SuperClass this
63. diagram EClassHierarchy type EClass {
node EClassNode for this {
label Name for this
edge SuperType for each this.getESuperTypes() {
=> call EClassNode for this
MyClass MyClass
SuperClass this
64. diagram EClassHierarchy type EClass {
node EClassNode for this {
label Name for this
edge SuperType for each this.getESuperTypes() {
=> call EClassNode for this
MyClass MyClass
SuperClass this
65. diagram EClassHierarchy type EClass {
node EClassNode for this {
label Name for this
edge SuperType for each this.getESuperTypes() {
=> call EClassNode for this
MyClass MyClass
SuperClass this SuperClass
66. diagram EClassHierarchy type EClass {
node EClassNode for this {
label Name for this
edge SuperType for each this.getESuperTypes() {
=> call EClassNode for this
MyClass this MyClass
SuperClass SuperClass
67. diagram EClassHierarchy type EClass {
node EClassNode for this {
label Name for this
edge SuperType for each this.getESuperTypes() {
=> call EClassNode for this
MyClass this MyClass
SuperClass SuperClass
68. diagram EClassHierarchy type EClass {
node EClassNode for this {
label Name for this
edge SuperType for each this.getESuperTypes() {
=> call EClassNode for this
}
}
}
MyClass this MyClass
SuperClass SuperClass
69. stylesheet EClassHierarchy
for EClassHierarchy
style EClassNode.SuperType {
var arrow = new PolygonDecoration()
arrow.setScale(10,10)
arrow.backgroundColor = color(#ffffff)
arrow.lineWidth = 2
this.targetDecoration = arrow
}
style EClassNode.Name {
font = font("Helvetica", 13,
if (element.abstract) 3 else 1)
}
70. stylesheet EClassHierarchy
for EClassHierarchy
refs to mappings
style EClassNode.SuperType {
var arrow = new PolygonDecoration()
arrow.setScale(10,10)
arrow.backgroundColor = color(#ffffff)
arrow.lineWidth = 2
this.targetDecoration = arrow
}
style EClassNode.Name {
font = font("Helvetica", 13,
if (element.abstract) 3 else 1)
}
71. stylesheet EClassHierarchy
for EClassHierarchy
style EClassNode.SuperType {
var arrow = new PolygonDecoration() Xbase body
arrow.setScale(10,10)
arrow.backgroundColor = color(#ffffff)
arrow.lineWidth = 2
this.targetDecoration = arrow
}
style EClassNode.Name {
font = font("Helvetica", 13,
if (element.abstract) 3 else 1)
}
72. stylesheet EClassHierarchy
for EClassHierarchy
style EClassNode.SuperType {
var arrow = new PolygonDecoration()
arrow.setScale(10,10)
arrow.backgroundColor = color(#ffffff)
arrow.lineWidth = 2
this variable
this.targetDecoration = arrow
}
style EClassNode.Name {
font = font("Helvetica", 13,
if (element.abstract) 3 else 1)
}
73. stylesheet EClassHierarchy
for EClassHierarchy
style EClassNode.SuperType {
var arrow = new PolygonDecoration()
arrow.setScale(10,10)
arrow.backgroundColor = color(#ffffff)
arrow.lineWidth = 2
this.targetDecoration = arrow
}
color literals
style EClassNode.Name {
font = font("Helvetica", 13,
if (element.abstract) 3 else 1)
}
74. stylesheet EClassHierarchy
for EClassHierarchy
style EClassNode.SuperType {
var arrow = new PolygonDecoration()
arrow.setScale(10,10)
arrow.backgroundColor = color(#ffffff)
arrow.lineWidth = 2
this.targetDecoration = arrow
}
style EClassNode.Name { extensions
font = font("Helvetica", 13,
if (element.abstract) 3 else 1)
}
75. stylesheet EClassHierarchy
for EClassHierarchy
style EClassNode.SuperType {
var arrow = new PolygonDecoration()
arrow.setScale(10,10)
arrow.backgroundColor = color(#ffffff)
arrow.lineWidth = 2
this.targetDecoration = arrow
}
style EClassNode.Name {
font = font("Helvetica", 13,
if (element.abstract) 3 else 1) semantic styling
}
76. The code is at
https://github.com/JanKoehnlein/Generic-Graph-View
But remember:
IT‘S A PROTOTYPE