Lucky in the Cloud With Diagrams Jan Khnlein Miro Spnemann - - PowerPoint PPT Presentation

▶

Feb 14, 2023 138 likes •404 views

Lucky in the Cloud With Diagrams Jan Khnlein Miro Spnemann @jankoehnlein @sponemann Sprotty CSS Live Diagrams in Your Web Application Live Diagrams in Your Web IDE Outline Base architecture Main components The model source

SLIDE 1

Jan Köhnlein Miro Spönemann

@jankoehnlein @sponemann

Lucky in the Cloud With Diagrams

SLIDE 2

CSS

Sprotty

SLIDE 3

Live Diagrams in Your Web Application

SLIDE 4

Live Diagrams in Your Web IDE

SLIDE 5

Outline

Base architecture
Main components
The model source
Example: package dependency graph
Layout
Micro layout and macro layout
Hidden rendering
Configuration

SLIDE 6

Base Architecture

SLIDE 7

Base Architecture

Action Dispatcher Command Stack Viewer

Command Action SModel

Model Source Virtual DOM DOM View View View

create patch call events Action

SLIDE 8

Example: Selection

Action Dispatcher Command Stack Viewer DOM

mousedown SelectAction

{ kind: "elementSelected" selectedElementsIDs: ["node23"] }

SelectCommand

execute(context) { type: "node" id: "node23" selected: false } true

SLIDE 9

Example: Rendering

Viewer Virtual DOM DOM View View View

create patch call events render(node, context) <rect class-selected={node.selected} width={node.size.width} height={node.size.height} /> patch(oldVDOM, newVDOM)

npmjs.com/package/snabbdom

SLIDE 10

The Model Source

Action Dispatcher Model Source

Action

LocalModelSource DiagramServer (local proxy) DiagramServer (remote)

WebSocket

TypeScript API Java API

Domain-Specific Languages in the Cloud – With Eclipse Technologies

Wednesday 16:30 — 17:05

SLIDE 11

Local Model Source

LocalModelSource

currentRoot: SModelRootSchema setModel(newRoot) updateModel() protected handleRequestModel(action) protected handleComputedBounds(action) protected handle...

SLIDE 12

SNode (internal)

parent: SParentElement root: SModelRoot bounds: Bounds getAnchor(referencePoint) getTranslatedAnchor(refPoint, refContainer, edge)

Internal and External Model

Action Dispatcher Command Stack Viewer Model Source

SNodeSchema (external)

type: string id: string children: SModelElementSchema[] position: Point size: Dimension selected: boolean

SModelFactory

SLIDE 13

Model Updates

Action Dispatcher Command Stack Viewer

UpdateModelAction

{ kind: "updateModel" newRoot: { ... } }

UpdateModelCommand

execute(context)

animate changes (fade in, fade out, move, etc.)

Model Source

SLIDE 14

Example: Package Dependency Graph

DepGraphModelSource

createNode(name) resolveNodes(nodes) resolveGraph() filter(text) clear() protected handleSelect(action) protected handleSelectAll(action)

LocalModelSource

SLIDE 15

Resolve Dependencies on Selection

handleSelect(action) resolveNodes(nodes) resolveNode(node)

{ type: "node" id: "sprotty" name: "sprotty" }

https://registry.npmjs.org/sprotty

{"_id":"sprotty","_rev":"41-7a428d1537a8f4ca6588392cd 5c72b42","name":"sprotty","description":"A next-gen f ramework for graphical views","dist-tags":{"latest":" 0.4.2","next":"0.5.0-next.fa9391e1"},"versions":{"0.1 .0":{"name":"sprotty","version":"0.1.0","description" :"A next-gen framework for graphical views","license" :"Apache-2.0","keywords":["graphics","modeling","visu alization","svg"],"homepage":"https://github.com/Type Fox/sprotty","bugs":{"url":"https://github.com/TypeFo x/sprotty/issues"},"author":{"name":"TypeFox"},"contr ibutors":[{"name":"Jan Köhnlein","email":"jan.koehnle in@typefox.io","url":"http://typefox.io"},{"name":"Mi ro Spönemann","email":"miro.spoenemann@typefox.io","u rl":"http://typefox.io"},{"name":"Jan Bicker","email" :"jan.bicker@typefox.io","url":"http://typefox.io"},{ "name":"Marc Dumais","email":"marc.dumais@ericsson.co m","url":"https://www.ericsson.com/"},{"name":"Patric ...

SLIDE 16

Resolve Dependencies on Selection

handleSelect(action) resolveNodes(nodes) resolveNode(node) https://registry.npmjs.org/sprotty addDependencies(node, dependencies)

package metadata

updateModel()

SLIDE 17

Layout

SLIDE 18

Micro Layout and Macro Layout

Micro Layout

Compartments, labels, icons, etc.

Macro Layout

Networks of nodes and edges

Horizontal Box
Vertical Box
Stacked
Layer-based
Force-based
Planarization

SLIDE 19

Micro Layout and Macro Layout

Problems

SVG has no means for automatic

micro layout

Text size depends on CSS
Node size depends on text size
Macro layout depends on node size

SLIDE 20

Hidden Rendering Cycle

Action Dispatcher Command Stack Viewer Model Source Virtual DOM DOM View View View

create patch call

RequestBoundsAction

{ kind: "requestBounds" newRoot: { ... } }

render new model in the hidden DOM RequestBoundsCommand

execute(context)

SLIDE 21

Hidden Rendering Cycle

Action Dispatcher Command Stack Viewer Model Source Virtual DOM DOM View View View

create patch call

ComputedBoundsAction

{ kind: "computedBounds" bounds: [ ... ] }

copy computed bounds into the model compute micro layout compute macro layout

SLIDE 22

Hidden Rendering Cycle

Action Dispatcher Command Stack Viewer Model Source Virtual DOM DOM View View View

create patch call

UpdateModelAction

{ kind: "updateModel" newRoot: { ... } }

animate changes (fade in, fade out, move, etc.) UpdateModelCommand

execute(context)

SLIDE 23

Macro Layout

ELK (Java) eclipse.org/elk elkjs (JavaScript) npmjs.com/package/elkjs

channel1 Counter RecordAssembler Display Counter - q1 channel2 Counter RecordAssembler Display Counter - q2 Ramp MonitorValue - q1 length MonitorValue - q2 length DatagramReader Display QueueControl Interface - fast Sleep Interface - slow Sleep

SLIDE 24

Configuration

SLIDE 25

Configuration

configureModelElement(context, 'node', DependencyGraphNode, DependencyNodeView)

Model and View

Model Class View Class

bind(TYPES.ModelSource).to(DepGraphModelSource).inSingletonScope()

Dependency Injection

npmjs.com/package/inversify

SLIDE 26

Evaluate the Sessions

1 0 +1