worldorbit 3.0.5 → 3.0.7

package/README.md

@@ -138,7 +138,7 @@ For direct browser usage, use the browser bundle:
       import {
         createInteractiveViewer,
         loadWorldOrbitSource
-      } from "https://unpkg.com/worldorbit@3.0.5/dist/unpkg/worldorbit.esm.js";
+      } from "https://unpkg.com/worldorbit@3.0.7/dist/unpkg/worldorbit.esm.js";
 
       const source = `
 schema 2.5
@@ -432,7 +432,7 @@ const scene = renderDocumentToScene(loaded.document, {
 
 ## Viewer Capabilities
 
-Viewer features in `v3.0.5` include:
+Viewer features in `v3.0.7` include:
 
 * scene-based SVG rendering
 * renderer-neutral spatial scenes through `renderDocumentToSpatialScene(...)`

package/dist/browser/viewer/dist/embed.js

@@ -67,6 +67,7 @@ export function createWorldOrbitEmbedMarkup(payload, options = {}) {
 }
 export function mountWorldOrbitEmbeds(root = document, options = {}) {
     const viewers = new Map();
+    const cleanupCallbacks = [];
     const elements = [...root.querySelectorAll(EMBED_SELECTOR)];
     for (const element of elements) {
         const payload = deserializePayloadFromElement(element);
@@ -82,14 +83,16 @@ export function mountWorldOrbitEmbeds(root = document, options = {}) {
         const viewMode = options.viewer?.viewMode ??
             payload.options?.viewMode ??
             embedModeToViewMode(mode);
+        const measureViewport = () => resolveEmbedViewport(element, payload.scene, options);
         if (mode === "interactive-2d" || mode === "interactive-3d") {
             try {
+                const viewport = measureViewport();
                 const viewer = createInteractiveViewer(element, {
                     ...options.viewer,
                     scene: payload.scene,
                     spatialScene: payload.spatialScene,
-                    width: options.width ?? payload.scene.width,
-                    height: options.height ?? payload.scene.height,
+                    width: viewport.width,
+                    height: viewport.height,
                     padding: options.padding ?? payload.scene.padding,
                     preset,
                     theme,
@@ -105,6 +108,13 @@ export function mountWorldOrbitEmbeds(root = document, options = {}) {
                     viewer.setAtlasState(payload.options.atlasState);
                 }
                 viewers.set(element, viewer);
+                cleanupCallbacks.push(bindEmbedResize(element, () => {
+                    const nextViewport = measureViewport();
+                    viewer.setRenderOptions({
+                        width: nextViewport.width,
+                        height: nextViewport.height,
+                    });
+                }));
                 options.onMount?.(viewer, element);
             }
             catch (error) {
@@ -118,17 +128,22 @@ export function mountWorldOrbitEmbeds(root = document, options = {}) {
             }
         }
         else {
-            element.innerHTML = renderSceneToSvg(payload.scene, {
-                width: options.width ?? payload.scene.width,
-                height: options.height ?? payload.scene.height,
-                padding: options.padding ?? payload.scene.padding,
-                preset,
-                theme,
-                layers,
-                filter: initialFilter,
-                selectedObjectId: initialSelectionObjectId ?? null,
-                subtitle,
-            });
+            const renderStaticEmbed = () => {
+                const viewport = measureViewport();
+                element.innerHTML = renderSceneToSvg(payload.scene, {
+                    width: viewport.width,
+                    height: viewport.height,
+                    padding: options.padding ?? payload.scene.padding,
+                    preset,
+                    theme,
+                    layers,
+                    filter: initialFilter,
+                    selectedObjectId: initialSelectionObjectId ?? null,
+                    subtitle,
+                });
+            };
+            renderStaticEmbed();
+            cleanupCallbacks.push(bindEmbedResize(element, renderStaticEmbed));
             options.onMount?.(null, element);
         }
         element.dataset.worldorbitMounted = "true";
@@ -136,14 +151,72 @@ export function mountWorldOrbitEmbeds(root = document, options = {}) {
     return {
         viewers: [...viewers.values()],
         destroy() {
+            for (const cleanup of cleanupCallbacks) {
+                cleanup();
+            }
             for (const [element, viewer] of viewers.entries()) {
                 viewer.destroy();
                 element.removeAttribute("data-worldorbit-mounted");
             }
+            for (const element of elements) {
+                element.removeAttribute("data-worldorbit-mounted");
+            }
             viewers.clear();
         },
     };
 }
+function resolveEmbedViewport(element, scene, options) {
+    const rect = element.getBoundingClientRect();
+    const width = sanitizeViewportDimension(options.width) ??
+        sanitizeViewportDimension(element.clientWidth) ??
+        sanitizeViewportDimension(rect.width) ??
+        scene.width;
+    const explicitHeight = sanitizeViewportDimension(options.height) ??
+        sanitizeViewportDimension(element.clientHeight) ??
+        sanitizeViewportDimension(rect.height);
+    const fallbackHeight = Math.max(Math.round(width * (scene.height / Math.max(scene.width, 1))), Math.min(scene.height, 240));
+    return {
+        width,
+        height: explicitHeight ?? fallbackHeight,
+    };
+}
+function sanitizeViewportDimension(value) {
+    return typeof value === "number" && Number.isFinite(value) && value > 0
+        ? Math.round(value)
+        : null;
+}
+function bindEmbedResize(element, callback) {
+    let lastWidth = -1;
+    let lastHeight = -1;
+    const run = () => {
+        const rect = element.getBoundingClientRect();
+        const nextWidth = Math.round(Math.max(element.clientWidth || rect.width, 0));
+        const nextHeight = Math.round(Math.max(element.clientHeight || rect.height, 0));
+        if (nextWidth === lastWidth && nextHeight === lastHeight) {
+            return;
+        }
+        lastWidth = nextWidth;
+        lastHeight = nextHeight;
+        callback();
+    };
+    run();
+    if (typeof ResizeObserver !== "undefined") {
+        const observer = new ResizeObserver(() => {
+            run();
+        });
+        observer.observe(element);
+        return () => {
+            observer.disconnect();
+        };
+    }
+    const handleWindowResize = () => {
+        run();
+    };
+    window.addEventListener("resize", handleWindowResize);
+    return () => {
+        window.removeEventListener("resize", handleWindowResize);
+    };
+}
 function deserializePayloadFromElement(element) {
     const serialized = element.dataset.worldorbitPayload;
     if (!serialized) {