worldorbit 3.0.5 → 3.0.7

package/dist/unpkg/viewer/dist/theme.js

@@ -30,6 +30,15 @@ const THEME_PRESETS = {
         starCore: "#ffcc67",
         starStroke: "rgba(255, 245, 203, 0.85)",
         starGlow: "#ffe8a3",
+        spaceFog: "#07131d",
+        starfield: "rgba(226, 239, 255, 0.9)",
+        starfieldDim: "rgba(164, 194, 228, 0.45)",
+        objectSpecular: "#f5f8ff",
+        orbitOpacity: 0.34,
+        orbitBandOpacity: 0.24,
+        selectionHalo: "rgba(255, 214, 139, 0.9)",
+        atmosphere: "rgba(143, 202, 255, 0.4)",
+        cometTail: "rgba(193, 243, 255, 0.7)",
         fontFamily: "\"Segoe UI Variable\", \"Bahnschrift\", sans-serif",
         displayFont: "\"Bahnschrift\", \"Segoe UI Variable\", sans-serif"
     },
@@ -53,6 +62,15 @@ const THEME_PRESETS = {
         starCore: "#e5f98c",
         starStroke: "rgba(246, 255, 217, 0.9)",
         starGlow: "#fffab4",
+        spaceFog: "#071723",
+        starfield: "rgba(220, 255, 245, 0.9)",
+        starfieldDim: "rgba(124, 212, 195, 0.42)",
+        objectSpecular: "#ecfffb",
+        orbitOpacity: 0.3,
+        orbitBandOpacity: 0.22,
+        selectionHalo: "rgba(120, 255, 215, 0.85)",
+        atmosphere: "rgba(120, 255, 215, 0.32)",
+        cometTail: "rgba(181, 255, 236, 0.68)",
         fontFamily: "\"Segoe UI Variable\", \"Bahnschrift\", sans-serif",
         displayFont: "\"Bahnschrift\", \"Segoe UI Variable\", sans-serif"
     },
@@ -76,6 +94,15 @@ const THEME_PRESETS = {
         starCore: "#ffb766",
         starStroke: "rgba(255, 236, 205, 0.88)",
         starGlow: "#ffe2ad",
+        spaceFog: "#1c0d12",
+        starfield: "rgba(255, 232, 214, 0.88)",
+        starfieldDim: "rgba(255, 176, 138, 0.38)",
+        objectSpecular: "#fff0e6",
+        orbitOpacity: 0.3,
+        orbitBandOpacity: 0.24,
+        selectionHalo: "rgba(255, 178, 125, 0.85)",
+        atmosphere: "rgba(255, 190, 140, 0.26)",
+        cometTail: "rgba(255, 214, 173, 0.62)",
         fontFamily: "\"Segoe UI Variable\", \"Bahnschrift\", sans-serif",
         displayFont: "\"Bahnschrift\", \"Segoe UI Variable\", sans-serif"
     }

package/dist/unpkg/viewer/dist/types.d.ts

@@ -1,6 +1,8 @@
 import type { CoordinatePoint, RenderOrbitVisual, RenderProjectionFallback, RenderPresetName, RenderSceneEvent, RenderSceneGroup, RenderSceneLabel, RenderScaleModel, RenderScene, RenderSceneObject, RenderSceneViewpoint, SceneRenderOptions, SpatialScene, ViewProjection, WorldOrbitObject, WorldOrbitDocument, WorldOrbitViewCamera } from "@worldorbit/core";
 export type WorldOrbitThemeName = "atlas" | "nightglass" | "ember";
 export type WorldOrbitViewMode = "2d" | "3d";
+export type WorldOrbit3DQuality = "low" | "balanced" | "high";
+export type WorldOrbit3DStyle = "symbolic" | "cinematic";
 export type WorldOrbitEmbedMode = "static" | "interactive" | "interactive-2d" | "interactive-3d";
 export type TooltipMode = "hover" | "pinned" | "disabled";
 export interface WorldOrbitTheme {
@@ -23,6 +25,15 @@ export interface WorldOrbitTheme {
     starCore: string;
     starStroke: string;
     starGlow: string;
+    spaceFog: string;
+    starfield: string;
+    starfieldDim: string;
+    objectSpecular: string;
+    orbitOpacity: number;
+    orbitBandOpacity: number;
+    selectionHalo: string;
+    atmosphere: string;
+    cometTail: string;
     fontFamily: string;
     displayFont: string;
 }
@@ -64,6 +75,8 @@ export interface ViewerRenderOptions extends Omit<SvgRenderOptions, "selectedObj
     projection?: "document" | ViewProjection;
     scaleModel?: Partial<RenderScaleModel>;
     viewMode?: WorldOrbitViewMode;
+    quality?: WorldOrbit3DQuality;
+    style3d?: WorldOrbit3DStyle;
 }
 export interface ViewerState {
     scale: number;
@@ -118,6 +131,8 @@ export interface ViewerAtlasState {
         scaleModel?: Partial<RenderScaleModel>;
         activeEventId?: string | null;
         viewMode?: WorldOrbitViewMode;
+        quality?: WorldOrbit3DQuality;
+        style3d?: WorldOrbit3DStyle;
     };
     filter: ViewerFilter | null;
 }
@@ -274,6 +289,8 @@ export interface WorldOrbitEmbedPayload {
         subtitle?: string;
         preset?: SceneRenderOptions["preset"];
         viewMode?: WorldOrbitViewMode;
+        quality?: WorldOrbit3DQuality;
+        style3d?: WorldOrbit3DStyle;
         initialViewpointId?: string;
         initialSelectionObjectId?: string;
         initialFilter?: ViewerFilter | null;

package/dist/unpkg/viewer/dist/viewer.js

@@ -45,6 +45,8 @@ export function createInteractiveViewer(container, options) {
         preset: options.preset,
         projection: options.projection,
         viewMode: options.viewMode ?? "2d",
+        quality: options.quality ?? "balanced",
+        style3d: options.style3d ?? "symbolic",
         camera: options.camera ? { ...options.camera } : null,
         scaleModel: options.scaleModel ? { ...options.scaleModel } : undefined,
         theme: options.theme,
@@ -66,6 +68,7 @@ export function createInteractiveViewer(container, options) {
     let cameraRoot = null;
     let runtime3d = null;
     let minimapRoot = null;
+    let labelRoot = null;
     let tooltipRoot = null;
     let suppressClick = false;
     let activePointerId = null;
@@ -90,7 +93,7 @@ export function createInteractiveViewer(container, options) {
     if (previousTabIndex === null) {
         container.tabIndex = 0;
     }
-    installViewerTooltipStyles();
+    installViewerOverlayStyles();
     container.classList.add("wo-viewer-container");
     container.style.touchAction = behavior.touch ? "none" : previousTouchAction;
     if (!container.style.position) {
@@ -671,6 +674,8 @@ export function createInteractiveViewer(container, options) {
             stopAnimationLoop();
             runtime3d?.destroy();
             runtime3d = null;
+            labelRoot?.remove();
+            labelRoot = null;
             tooltipRoot?.remove();
             tooltipRoot = null;
             minimapRoot?.remove();
@@ -704,6 +709,7 @@ export function createInteractiveViewer(container, options) {
         svgElement = null;
         cameraRoot = null;
         minimapRoot = null;
+        labelRoot = null;
         tooltipRoot = null;
         if (is3DView()) {
             spatialScene = spatialScene ?? renderSpatialSceneFromInput(currentInput, renderOptions, providedSpatialScene);
@@ -723,6 +729,10 @@ export function createInteractiveViewer(container, options) {
             minimapRoot.dataset.worldorbitMinimapRoot = "true";
             container.append(minimapRoot);
         }
+        labelRoot = document.createElement("div");
+        labelRoot.className = "wo-viewer-label-root";
+        labelRoot.dataset.worldorbitLabelRoot = "true";
+        container.append(labelRoot);
         if (behavior.tooltipMode !== "disabled") {
             tooltipRoot = document.createElement("div");
             tooltipRoot.className = "wo-viewer-tooltip-root";
@@ -734,6 +744,7 @@ export function createInteractiveViewer(container, options) {
         if (!is3DView() && (!svgElement || !cameraRoot)) {
             throw new Error("Interactive viewer could not locate the rendered SVG camera root.");
         }
+        suppressStaticLabelLayers();
         state = resetView
             ? is3DView()
                 ? { ...DEFAULT_VIEWER_STATE }
@@ -783,14 +794,15 @@ export function createInteractiveViewer(container, options) {
             return;
         }
         cameraRoot.setAttribute("transform", composeViewerTransform(scene, state));
+        updateScreenLabels();
         updateMinimap();
         updateTooltip();
     }
     function applySelection(objectId, emitCallback = true) {
         if (!is3DView() && state.selectedObjectId) {
-            container
-                .querySelector(`[data-object-id="${cssEscape(state.selectedObjectId)}"]`)
-                ?.classList.remove("wo-object-selected");
+            for (const element of container.querySelectorAll(`[data-object-id="${cssEscape(state.selectedObjectId)}"]`)) {
+                element.classList.remove("wo-object-selected");
+            }
         }
         state = {
             ...state,
@@ -799,9 +811,9 @@ export function createInteractiveViewer(container, options) {
                 : null,
         };
         if (!is3DView() && state.selectedObjectId) {
-            container
-                .querySelector(`[data-object-id="${cssEscape(state.selectedObjectId)}"]`)
-                ?.classList.add("wo-object-selected");
+            for (const element of container.querySelectorAll(`[data-object-id="${cssEscape(state.selectedObjectId)}"]`)) {
+                element.classList.add("wo-object-selected");
+            }
         }
         syncAtlasHighlights();
         updateTooltip();
@@ -1160,15 +1172,18 @@ export function createInteractiveViewer(container, options) {
         };
     }
     function project2DTooltipPoint(renderObject) {
-        if (!svgElement) {
-            return null;
-        }
         const anchor = {
             x: renderObject.anchorX ?? renderObject.x,
             y: renderObject.anchorY ??
                 renderObject.y - Math.max(renderObject.visualRadius, renderObject.radius),
         };
-        const viewportPoint = projectWorldPoint(anchor);
+        return project2DScenePointToContainer(anchor);
+    }
+    function project2DScenePointToContainer(point) {
+        if (!svgElement) {
+            return null;
+        }
+        const viewportPoint = projectWorldPoint(point);
         const svgRect = svgElement.getBoundingClientRect();
         const containerRect = container.getBoundingClientRect();
         return {
@@ -1274,9 +1289,192 @@ export function createInteractiveViewer(container, options) {
             state,
             timeSeconds: animationState.timeSeconds,
         });
+        updateScreenLabels();
         updateMinimap();
         updateTooltip();
     }
+    function suppressStaticLabelLayers() {
+        if (is3DView()) {
+            return;
+        }
+        container
+            .querySelector('[data-layer-id="labels"]')
+            ?.setAttribute("display", "none");
+        for (const element of container.querySelectorAll(".wo-event-label")) {
+            element.setAttribute("display", "none");
+        }
+    }
+    function updateScreenLabels() {
+        if (!labelRoot) {
+            return;
+        }
+        const descriptors = buildScreenLabelDescriptors();
+        labelRoot.replaceChildren(...descriptors.map((descriptor) => createScreenLabelElement(descriptor)));
+        labelRoot.hidden = descriptors.length === 0;
+    }
+    function buildScreenLabelDescriptors() {
+        const descriptors = [];
+        const visibleObjectIds = getVisibleObjectIds();
+        if (layerEnabled("labels")) {
+            for (const label of scene.labels) {
+                if (label.hidden || !visibleObjectIds.has(label.objectId)) {
+                    continue;
+                }
+                if (is3DView() && !shouldRender3DLabel(label.objectId, visibleObjectIds)) {
+                    continue;
+                }
+                const point = is3DView()
+                    ? runtime3d?.projectObjectToContainer(label.objectId) ?? null
+                    : project2DScenePointToContainer({ x: label.x, y: label.y });
+                if (!point) {
+                    continue;
+                }
+                descriptors.push({
+                    key: `object:${label.renderId}`,
+                    kind: "object",
+                    point: is3DView()
+                        ? { x: point.x, y: point.y - 18 }
+                        : point,
+                    textAnchor: label.textAnchor,
+                    objectId: label.objectId,
+                    primaryText: label.label,
+                    secondaryText: label.secondaryLabel,
+                    secondaryOffset: Math.max(label.secondaryY - label.y, 12),
+                });
+            }
+        }
+        if (!is3DView() && layerEnabled("events")) {
+            for (const event of scene.events) {
+                if (event.hidden || !isEventVisible(event, visibleObjectIds)) {
+                    continue;
+                }
+                const point = project2DScenePointToContainer({ x: event.x, y: event.y - 10 });
+                if (!point) {
+                    continue;
+                }
+                descriptors.push({
+                    key: `event:${event.renderId}`,
+                    kind: "event",
+                    point,
+                    textAnchor: "middle",
+                    primaryText: event.event.label || event.event.id,
+                });
+            }
+        }
+        return descriptors;
+    }
+    function isEventVisible(event, visibleObjectIds) {
+        return event.objectIds.some((objectId) => visibleObjectIds.has(objectId));
+    }
+    function shouldRender3DLabel(objectId, visibleObjectIds) {
+        if (!is3DView()) {
+            return true;
+        }
+        if (objectId === state.selectedObjectId || objectId === hoveredObjectId) {
+            return true;
+        }
+        const object = getObjectById(objectId);
+        if (!object || object.hidden || !visibleObjectIds.has(objectId)) {
+            return false;
+        }
+        if (object.object.type === "star") {
+            return true;
+        }
+        const selected = state.selectedObjectId ? buildObjectDetails(state.selectedObjectId) : null;
+        const hovered = hoveredObjectId ? buildObjectDetails(hoveredObjectId) : null;
+        const selectedFocus = selected
+            ? new Set([
+                selected.objectId,
+                ...selected.renderObject.ancestorIds,
+                ...selected.renderObject.childIds,
+            ])
+            : null;
+        const hoveredFocus = hovered
+            ? new Set([
+                hovered.objectId,
+                ...hovered.renderObject.ancestorIds,
+                ...hovered.renderObject.childIds,
+            ])
+            : null;
+        if (selectedFocus?.has(objectId) || hoveredFocus?.has(objectId)) {
+            return true;
+        }
+        if (object.semanticGroupIds.length > 0 && object.visualRadius >= 12) {
+            return true;
+        }
+        return object.childIds.length > 0 && object.visualRadius >= 10;
+    }
+    function createScreenLabelElement(descriptor) {
+        const element = document.createElement("div");
+        element.className = `wo-viewer-label wo-viewer-label-${descriptor.kind}`;
+        element.dataset.worldorbitScreenLabel = "true";
+        element.dataset.labelKey = descriptor.key;
+        element.dataset.anchor = descriptor.textAnchor;
+        element.style.left = `${descriptor.point.x}px`;
+        element.style.top = `${descriptor.point.y}px`;
+        if (descriptor.objectId) {
+            element.dataset.objectId = descriptor.objectId;
+            for (const className of resolveScreenLabelClasses(descriptor.objectId)) {
+                element.classList.add(className);
+            }
+        }
+        const primary = document.createElement("span");
+        primary.className = "wo-viewer-label-primary";
+        if (descriptor.kind === "object") {
+            primary.style.fontSize = `${14 * scene.scaleModel.labelMultiplier}px`;
+        }
+        primary.textContent = descriptor.primaryText;
+        element.append(primary);
+        if (descriptor.secondaryText) {
+            const secondary = document.createElement("span");
+            secondary.className = "wo-viewer-label-secondary";
+            secondary.style.fontSize = `${11 * scene.scaleModel.labelMultiplier}px`;
+            secondary.style.marginTop = `${Math.max(descriptor.secondaryOffset ?? 12, 10) - 10}px`;
+            secondary.textContent = descriptor.secondaryText;
+            element.append(secondary);
+        }
+        return element;
+    }
+    function layerEnabled(id) {
+        return renderOptions.layers?.[id] !== false;
+    }
+    function resolveScreenLabelClasses(objectId) {
+        const classes = [];
+        const selectedDetails = buildObjectDetails(state.selectedObjectId);
+        const hoveredDetails = buildObjectDetails(hoveredObjectId);
+        if (state.selectedObjectId === objectId) {
+            classes.push("wo-object-selected");
+        }
+        if (selectedDetails) {
+            const selectedChain = new Set([
+                selectedDetails.objectId,
+                ...selectedDetails.renderObject.childIds,
+                ...selectedDetails.renderObject.ancestorIds,
+            ]);
+            const selectedAncestors = new Set(selectedDetails.ancestors.map((ancestor) => ancestor.objectId));
+            if (selectedChain.has(objectId)) {
+                classes.push("wo-chain-selected");
+            }
+            if (selectedAncestors.has(objectId)) {
+                classes.push("wo-ancestor-selected");
+            }
+        }
+        if (hoveredDetails) {
+            const hoveredChain = new Set([
+                hoveredDetails.objectId,
+                ...hoveredDetails.renderObject.childIds,
+                ...hoveredDetails.renderObject.ancestorIds,
+            ]);
+            const hoveredAncestors = new Set(hoveredDetails.ancestors.map((ancestor) => ancestor.objectId));
+            if (hoveredChain.has(objectId)) {
+                classes.push("wo-chain-hover");
+            }
+            if (hoveredAncestors.has(objectId)) {
+                classes.push("wo-ancestor-hover");
+            }
+        }
+        return classes;
+    }
     function create3DFocusState(objectId) {
         const target = spatialScene?.focusTargets.find((entry) => entry.objectId === objectId);
         if (!target) {
@@ -1345,6 +1543,8 @@ function cloneRenderOptions(renderOptions) {
             : renderOptions.theme,
         activeEventId: renderOptions.activeEventId ?? null,
         viewMode: renderOptions.viewMode ?? "2d",
+        quality: renderOptions.quality ?? "balanced",
+        style3d: renderOptions.style3d ?? "symbolic",
     };
 }
 function mergeRenderOptions(current, next) {
@@ -1383,6 +1583,8 @@ function mergeRenderOptions(current, next) {
             ? { ...next.theme }
             : next.theme ?? current.theme,
         viewMode: next.viewMode ?? current.viewMode ?? "2d",
+        quality: next.quality ?? current.quality ?? "balanced",
+        style3d: next.style3d ?? current.style3d ?? "symbolic",
     };
 }
 function hasSceneAffectingRenderOptions(options) {
@@ -1557,7 +1759,7 @@ function cssEscape(value) {
     }
     return value.replace(/["\\]/g, "\\$&");
 }
-function installViewerTooltipStyles() {
+function installViewerOverlayStyles() {
     if (typeof document === "undefined" || document.getElementById(TOOLTIP_STYLE_ID)) {
         return;
     }
@@ -1592,6 +1794,60 @@ function installViewerTooltipStyles() {
       height: 100%;
       min-height: 320px;
     }
+    .wo-viewer-label-root {
+      position: absolute;
+      inset: 0;
+      z-index: 8;
+      pointer-events: none;
+      overflow: hidden;
+    }
+    .wo-viewer-label {
+      position: absolute;
+      display: grid;
+      gap: 2px;
+      padding: 4px 8px;
+      border-radius: 999px;
+      background: linear-gradient(180deg, rgba(5, 16, 26, 0.72), rgba(5, 16, 26, 0.38));
+      border: 1px solid rgba(164, 194, 228, 0.16);
+      color: #edf6ff;
+      font-family: "Segoe UI Variable", "Segoe UI", sans-serif;
+      line-height: 1.15;
+      text-shadow: 0 1px 2px rgba(7, 16, 25, 0.65), 0 0 18px rgba(7, 16, 25, 0.18);
+      white-space: nowrap;
+    }
+    .wo-viewer-label[data-anchor="middle"] { transform: translate(-50%, 0); }
+    .wo-viewer-label[data-anchor="end"] { transform: translate(-100%, 0); }
+    .wo-viewer-label-primary {
+      font-size: 14px;
+      font-weight: 600;
+      letter-spacing: 0.02em;
+    }
+    .wo-viewer-label-secondary {
+      font-size: 11px;
+      font-weight: 500;
+      color: rgba(237, 246, 255, 0.72);
+    }
+    .wo-viewer-label-event {
+      color: #ffce8a;
+      text-transform: uppercase;
+      letter-spacing: 0.04em;
+    }
+    .wo-viewer-label-event .wo-viewer-label-primary {
+      font-size: 10px;
+      font-weight: 700;
+    }
+    .wo-viewer-label.wo-object-selected .wo-viewer-label-primary,
+    .wo-viewer-label.wo-chain-selected .wo-viewer-label-primary,
+    .wo-viewer-label.wo-chain-hover .wo-viewer-label-primary {
+      color: #ffce8a;
+    }
+    .wo-viewer-label.wo-object-selected .wo-viewer-label-secondary {
+      color: #8fcaff;
+    }
+    .wo-viewer-label.wo-ancestor-selected .wo-viewer-label-primary,
+    .wo-viewer-label.wo-ancestor-hover .wo-viewer-label-primary {
+      opacity: 0.82;
+    }
     .wo-viewer-tooltip-root {
       position: absolute;
       z-index: 12;