luciano/d2
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

update d2 watch mode

Browse source
This commit is contained in:
Gavin Nishizawa 2023-02-24 19:31:28 -08:00
parent 3cabfb85e9
commit c12e361049
No known key found for this signature in database
GPG key ID: AE3B177777CE55CD
2 changed files with 10 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
static/watch.css
View file

@ -1,3 +1,13 @@
body {
margin: 0;
}
#d2-svg-container > svg {
position: absolute;
width: 100%;
height: 100%;
}
#d2-err { #d2-err {
/* This style was copied from Chrome's svg parser error style. */ /* This style was copied from Chrome's svg parser error style. */
white-space: pre-wrap; white-space: pre-wrap;

23
static/watch.js
View file

@ -11,8 +11,6 @@ function init(reconnectDelay) {
const ws = new WebSocket( const ws = new WebSocket(
`ws://${window.location.host}${window.location.pathname}watch` `ws://${window.location.host}${window.location.pathname}watch`
); );
let isInit = true;
let ratio;
ws.onopen = () => { ws.onopen = () => {
reconnectDelay = 1000; reconnectDelay = 1000;
console.info("watch websocket opened"); console.info("watch websocket opened");
@ -33,27 +31,6 @@ function init(reconnectDelay) {
// setting innerHTML to only the actual svg innards. However then you also need to parse // setting innerHTML to only the actual svg innards. However then you also need to parse
// out the width, height and viewbox out of the top level SVG tag and update those manually. // out the width, height and viewbox out of the top level SVG tag and update those manually.
d2SVG.innerHTML = msg.svg; d2SVG.innerHTML = msg.svg;
const svgEl = d2SVG.querySelector("#d2-svg");
let width = parseInt(svgEl.getAttribute("width"), 10);
let height = parseInt(svgEl.getAttribute("height"), 10);
if (isInit) {
if (width > height) {
if (width > window.innerWidth) {
ratio = window.innerWidth / width;
}
} else if (height > window.innerHeight) {
ratio = window.innerHeight / height;
}
// Scale svg fit to zoom
isInit = false;
}
if (ratio) {
// body padding is 8px
svgEl.setAttribute("width", width * ratio - 16);
svgEl.setAttribute("height", height * ratio - 16);
}
d2ErrDiv.style.display = "none"; d2ErrDiv.style.display = "none";
} }
if (msg.err) { if (msg.err) {