Published
Edited
Jan 24, 2022
3 stars
{
let s = scale.toFixed(2);
yield md`This cell updates the content of the next HTML element by the factor of ${
+s === scale ? scale : `~` + s
}.`;
const c = viewof container;
const viewContainer = c.querySelector(".view-container");
Object.assign(viewContainer.style, {
width: `${viewW * scale}px`,
height: `${viewH * scale}px`
});
const view = c.querySelector(".view");
Object.assign(view.style, {
// transform: `translate(-50%, -50%) scale(${scale}) translate(50%, 50%)`
transformOrigin: "top left",
transform: `scale(${scale})`
});
}
{
yield md`This cell registers a ResizeObserver instance to track changes of the container above and when a modification happens it changes the size of the internal view accordingly.`;
const div = viewof resizableContainer;
const view = div.querySelector(".view");
const viewContainer = div.querySelector(".view-container");
const resizeObserver = new ResizeObserver((entries) => {
const entry = [...entries].find((e) => e.target === div);
if (!entry) return;
let size;
if (entry.contentBoxSize) {
if (entry.contentBoxSize[0]) {
size = entry.contentBoxSize[0].inlineSize;
} else {
size = entry.contentBoxSize.inlineSize;
}
} else {
size = entry.contentRect.width;
}
const scale = size / W;
Object.assign(viewContainer.style, {
width: `${viewW * scale}px`,
height: `${viewH * scale}px`
});
Object.assign(view.style, {
// transform: `translate(-50%, -50%) scale(${scale}) translate(50%, 50%)`
transformOrigin: "top left",
transform: `scale(${scale})`
});
});
resizeObserver.observe(div);
invalidation.then(() => resizeObserver.unobserve(div));
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
