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

preserve ratio on subsequent renders

Browse source
This commit is contained in:
Bernard Xie 2023-01-03 11:45:16 -08:00
parent 421b22c106
commit 1dc45b64a6
No known key found for this signature in database
GPG key ID: 3C3E0036CE0F892C
1 changed files with 9 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
static/watch.js
View file

@ -12,6 +12,7 @@ function init(reconnectDelay) {
`ws://${window.location.host}${window.location.pathname}watch` `ws://${window.location.host}${window.location.pathname}watch`
); );
let isInit = true; let isInit = true;
let ratio;
ws.onopen = () => { ws.onopen = () => {
reconnectDelay = 1000; reconnectDelay = 1000;
console.info("watch websocket opened"); console.info("watch websocket opened");
@ -33,11 +34,10 @@ function init(reconnectDelay) {
// 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("svg");
let width = parseInt(svgEl.getAttribute("width"), 10);
let height = parseInt(svgEl.getAttribute("height"), 10);
if (isInit) { if (isInit) {
const svgEl = d2SVG.querySelector("svg");
let width = parseInt(svgEl.getAttribute("width"), 10);
let height = parseInt(svgEl.getAttribute("height"), 10);
let ratio;
if (width > height) { if (width > height) {
if (width > window.innerWidth) { if (width > window.innerWidth) {
ratio = window.innerWidth / width; ratio = window.innerWidth / width;
@ -46,13 +46,13 @@ function init(reconnectDelay) {
ratio = window.innerHeight / height; ratio = window.innerHeight / height;
} }
// Scale svg fit to zoom // Scale svg fit to zoom
if (ratio) {
// body padding is 8px
svgEl.setAttribute("width", width * ratio - 16);
svgEl.setAttribute("height", height * ratio - 16);
}
isInit = false; 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";
} }