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

Lucky in the Cloud With Diagrams Jan Köhnlein Miro Spönemann @jankoehnlein @sponemann

Sprotty CSS

Live Diagrams in Your Web Application

Live Diagrams in Your Web IDE

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

Base Architecture

Base Architecture Command Command Stack Model SModel Action Dispatcher Source Action call Action View Viewer View View create events DOM Virtual DOM patch

Example: Selection SelectCommand Command Stack execute(context) { type: "node" Action Dispatcher id: "node23" selected: false true } Viewer SelectAction { kind: "elementSelected" mousedown selectedElementsIDs: ["node23"] } DOM

Example: Rendering render(node, context) call View Viewer View View <rect class-selected={node.selected} create width={node.size.width} events height={node.size.height} /> DOM Virtual DOM patch patch(oldVDOM, newVDOM) npmjs.com/package/snabbdom

The Model Source Model Action Dispatcher Source Action DiagramServer LocalModelSource (local proxy) WebSocket TypeScript API Java API DiagramServer (remote) Domain-Specific Languages in the Cloud – With Eclipse Technologies Wednesday 16:30 — 17:05

Local Model Source LocalModelSource currentRoot: SModelRootSchema setModel(newRoot) updateModel() protected handleRequestModel(action) protected handleComputedBounds(action) protected handle...

Internal and External Model SNode (internal) Command Stack parent: SParentElement root: SModelRoot Model Action Dispatcher Source bounds: Bounds getAnchor(referencePoint) Viewer getTranslatedAnchor(refPoint, refContainer, edge) SNodeSchema (external) type: string id: string children: SModelElementSchema[] SModelFactory position: Point size: Dimension selected: boolean

Model Updates UpdateModelCommand Command Stack execute(context) animate changes Model (fade in, fade out, Action Dispatcher Source move, etc.) UpdateModelAction { Viewer kind: "updateModel" newRoot: { ... } }

Example: Package Dependency Graph LocalModelSource DepGraphModelSource createNode(name) resolveNodes(nodes) resolveGraph() filter(text) clear() protected handleSelect(action) protected handleSelectAll(action)

Resolve Dependencies on Selection handleSelect(action) resolveNodes(nodes) resolveNode(node) https://registry.npmjs.org/sprotty { {"_id":"sprotty","_rev":"41-7a428d1537a8f4ca6588392cd 5c72b42","name":"sprotty","description":"A next-gen f type: "node" ramework for graphical views","dist-tags":{"latest":" 0.4.2","next":"0.5.0-next.fa9391e1"},"versions":{"0.1 id: "sprotty" .0":{"name":"sprotty","version":"0.1.0","description" :"A next-gen framework for graphical views","license" name: "sprotty" :"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 ...

Resolve Dependencies on Selection handleSelect(action) resolveNodes(nodes) resolveNode(node) https://registry.npmjs.org/sprotty package metadata addDependencies(node, dependencies) updateModel()

Layout

Micro Layout and Macro Layout Micro Layout Macro Layout Compartments, Networks of nodes labels, icons, etc. and edges • Horizontal Box • Layer-based • Vertical Box • Force-based • Stacked • Planarization

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

Hidden Rendering Cycle RequestBoundsCommand Command Stack execute(context) render new model Model Action Dispatcher Source in the hidden DOM RequestBoundsAction call { View Viewer View View kind: "requestBounds" newRoot: { ... } } create DOM Virtual DOM patch

Hidden Rendering Cycle copy computed bounds into the Command Stack model Model Action Dispatcher Source compute micro layout compute call View Viewer macro layout ComputedBoundsAction View View { kind: "computedBounds" create bounds: [ ... ] } DOM Virtual DOM patch

Hidden Rendering Cycle UpdateModelCommand Command Stack execute(context) animate changes Model (fade in, fade out, Action Dispatcher Source move, etc.) UpdateModelAction call { View Viewer View View kind: "updateModel" newRoot: { ... } } create DOM Virtual DOM patch

Macro Layout ELK (Java) elkjs (JavaScript) eclipse.org/elk npmjs.com/package/elkjs Display channel1 Interface - fast Sleep RecordAssembler Display Counter DatagramReader QueueControl Ramp Counter - q1 MonitorValue - q1 length Counter - q2 MonitorValue - q2 length channel2 Interface - slow Sleep RecordAssembler Display Counter

Configuration

Configuration Dependency Injection bind(TYPES.ModelSource).to(DepGraphModelSource).inSingletonScope() npmjs.com/package/inversify Model and View configureModelElement(context, 'node', DependencyGraphNode, DependencyNodeView) Model Class View Class

Evaluate the Sessions Sign in and vote at eclipsecon.org -1 0 +1