Lucky in the Cloud With Diagrams

on YouTube ↗34m

" summary

Sprotty is a TypeScript SVG diagram framework that embeds live, CSS‑styled, animated graphs in web apps and IDEs; demo shows an NPM dependency explorer that fetches package metadata over HTTP, incrementally adds nodes, supports text filters, drag‑dock widgets in Theia/Gitpod, and smooth transitions driven by an update‑model command. Layout uses a two‑phase hidden rendering to measure text then runs macro layout with elkjs (ELK transpiled to JS). Dependency injection via inversify and client/server diagram servers are supported, and the examples run successfully in the browser and IDE.

AI-written summary · about

" chapters (4)

1. 0:00Start
2. 7:19Base Architecture
3. 23:49Layout
4. 30:24Configuration

" related talks

• 34mHigh-performance graphical view filtering with SprottyMiro Spönemann, Jan Bicker · EclipseCon 2023
• 32mWeb-based Diagram Editors with GLSPPhilip Langer · Cloud IDE Day 2021
• 24mCreating Interactive Data Visualizations for the WebNicolas Garcia Belmonte · JSConf.eu 2010
• 06mZero to One How to Integrate a Graphical Editor in a Cloud IDEAxel Richard · TheiaCon 2021
• 40mDiagram Editors Boosted: Collaborative, Testable and Accessible diagrams with Eclipse GLSPPhilip Langer, Dominik Bork · EclipseCon 2023
• 33mDiagram Editors with GLSP: Why flexibility is keyPhilip Langer · EclipseCon 2022
• 44mGetting started with Scala js, Laminar and ViteSébastien Doeraene · ScalaCon 2022
• 29mDiagram Editors in Theia with Eclipse GLSPPhilip Langer · TheiaCon 2022