diff --git a/src/components/Output/custom-els/TwoUp/index.ts b/src/components/Output/custom-els/TwoUp/index.ts index 53966c0a..034a6429 100644 --- a/src/components/Output/custom-els/TwoUp/index.ts +++ b/src/components/Output/custom-els/TwoUp/index.ts @@ -37,6 +37,10 @@ export default class TwoUp extends HTMLElement { new MutationObserver(() => this._childrenChange()) .observe(this, { childList: true }); + // Watch for element size changes. + new ResizeObserver(() => this._resetPosition()) + .observe(this); + // Watch for pointers on the handle. const pointerTracker: PointerTracker = new PointerTracker(this._handle, { start: (_, event) => { @@ -57,7 +61,7 @@ export default class TwoUp extends HTMLElement { connectedCallback() { this._handle.innerHTML = `
${ - `` + '' }
`; this._childrenChange(); diff --git a/src/components/Output/custom-els/TwoUp/missing-types.d.ts b/src/components/Output/custom-els/TwoUp/missing-types.d.ts index fde547bd..d2f9c994 100644 --- a/src/components/Output/custom-els/TwoUp/missing-types.d.ts +++ b/src/components/Output/custom-els/TwoUp/missing-types.d.ts @@ -19,3 +19,36 @@ declare namespace JSX { 'two-up': TwoUpAttributes; } } + +interface DOMRectReadOnly { + readonly x: number; + readonly y: number; + readonly width: number; + readonly height: number; + readonly top: number; + readonly right: number; + readonly bottom: number; + readonly left: number; +} + +declare global { + interface ResizeObserverCallback { + (entries: ResizeObserverEntry[], observer: ResizeObserver): void; + } + + interface ResizeObserverEntry { + readonly target: Element; + readonly contentRect: DOMRectReadOnly; + } + + interface ResizeObserver { + observe(target: Element): void; + unobserve(target: Element): void; + disconnect(): void; + } +} + +declare var ResizeObserver: { + prototype: ResizeObserver; + new(callback: ResizeObserverCallback): ResizeObserver; +};