worldorbit 3.2.1 → 3.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "worldorbit",
-  "version": "3.2.1",
+  "version": "3.2.2",
   "description": "A text-based DSL and parser pipeline for orbital worldbuilding",
   "type": "module",
   "main": "./dist/unpkg/worldorbit.esm.js",
@@ -20,10 +20,26 @@
       "types": "./packages/core/dist/index.d.ts",
       "import": "./packages/core/dist/index.js"
     },
+    "./core/load": {
+      "types": "./packages/core/dist/load.d.ts",
+      "import": "./packages/core/dist/load.js"
+    },
+    "./core/scene": {
+      "types": "./packages/core/dist/scene.d.ts",
+      "import": "./packages/core/dist/scene.js"
+    },
+    "./core/types": {
+      "types": "./packages/core/dist/types.d.ts",
+      "import": "./packages/core/dist/types.js"
+    },
     "./viewer": {
       "types": "./packages/viewer/dist/index.d.ts",
       "import": "./packages/viewer/dist/index.js"
     },
+    "./viewer/interactive-2d": {
+      "types": "./packages/viewer/dist/interactive-2d.d.ts",
+      "import": "./packages/viewer/dist/interactive-2d.js"
+    },
     "./markdown": {
       "types": "./packages/markdown/dist/index.d.ts",
       "import": "./packages/markdown/dist/index.js"
@@ -59,6 +75,7 @@
   "devDependencies": {
     "esbuild-wasm": "^0.27.4",
     "jsdom": "^26.0.0",
+    "obsidian": "^1.12.3",
     "rehype-stringify": "^10.0.1",
     "remark-parse": "^11.0.0",
     "remark-rehype": "^11.1.2",

package/packages/viewer/dist/index.d.ts

@@ -8,3 +8,4 @@ export { createEmbedPayload, createWorldOrbitEmbedMarkup, deserializeWorldOrbitE
 export { defineWorldOrbitViewerElement } from "./custom-element.js";
 export { createAtlasViewer } from "./atlas-viewer.js";
 export { createInteractiveViewer } from "./viewer.js";
+export { createInteractiveViewer2D } from "./interactive-2d.js";

package/packages/viewer/dist/index.js

@@ -7,3 +7,4 @@ export { createEmbedPayload, createWorldOrbitEmbedMarkup, deserializeWorldOrbitE
 export { defineWorldOrbitViewerElement } from "./custom-element.js";
 export { createAtlasViewer } from "./atlas-viewer.js";
 export { createInteractiveViewer } from "./viewer.js";
+export { createInteractiveViewer2D } from "./interactive-2d.js";

package/packages/viewer/dist/interactive-2d.d.ts

@@ -0,0 +1,21 @@
+import type { RenderScene } from "@worldorbit/core/types";
+import type { SvgRenderOptions, ViewerState } from "./types.js";
+export interface InteractiveViewer2DOptions extends Pick<SvgRenderOptions, "width" | "height" | "padding" | "preset" | "theme" | "layers" | "subtitle"> {
+    pointer?: boolean;
+    touch?: boolean;
+    selection?: boolean;
+    minScale?: number;
+    maxScale?: number;
+    fitPadding?: number;
+}
+export interface WorldOrbitViewer2D {
+    getState(): ViewerState;
+    setState(state: Partial<ViewerState>): void;
+    setRenderOptions(options: Partial<InteractiveViewer2DOptions>): void;
+    fitToSystem(): void;
+    destroy(): void;
+}
+export { renderSceneToSvg } from "./render.js";
+export { resolveTheme } from "./theme.js";
+export type { WorldOrbitTheme } from "./types.js";
+export declare function createInteractiveViewer2D(container: HTMLElement, scene: RenderScene, options?: InteractiveViewer2DOptions): WorldOrbitViewer2D;

package/packages/viewer/dist/interactive-2d.js

@@ -0,0 +1,201 @@
+import { renderSceneToSvg, WORLD_LAYER_ID } from "./render.js";
+import { DEFAULT_VIEWER_STATE, composeViewerTransform, fitViewerState, panViewerState, zoomViewerStateAt, } from "./viewer-state.js";
+export { renderSceneToSvg } from "./render.js";
+export { resolveTheme } from "./theme.js";
+const DEFAULT_VIEWER_LIMITS = {
+    minScale: 0.2,
+    maxScale: 8,
+    fitPadding: 48,
+};
+export function createInteractiveViewer2D(container, scene, options = {}) {
+    const constraints = {
+        minScale: options.minScale ?? DEFAULT_VIEWER_LIMITS.minScale,
+        maxScale: options.maxScale ?? DEFAULT_VIEWER_LIMITS.maxScale,
+        fitPadding: options.fitPadding ?? DEFAULT_VIEWER_LIMITS.fitPadding,
+    };
+    const behavior = {
+        pointer: options.pointer ?? true,
+        touch: options.touch ?? true,
+        selection: options.selection ?? true,
+    };
+    let renderOptions = {
+        width: options.width,
+        height: options.height,
+        padding: options.padding,
+        preset: options.preset,
+        theme: options.theme,
+        layers: options.layers,
+        subtitle: options.subtitle,
+        pointer: behavior.pointer,
+        touch: behavior.touch,
+        selection: behavior.selection,
+        minScale: constraints.minScale,
+        maxScale: constraints.maxScale,
+        fitPadding: constraints.fitPadding,
+    };
+    let state = fitViewerState(scene, DEFAULT_VIEWER_STATE, constraints);
+    let svgElement = null;
+    let cameraRoot = null;
+    let destroyed = false;
+    let activePointerId = null;
+    let lastPointerClientPoint = null;
+    let dragDistance = 0;
+    const previousTabIndex = container.getAttribute("tabindex");
+    const previousTouchAction = container.style.touchAction;
+    if (previousTabIndex === null) {
+        container.tabIndex = 0;
+    }
+    container.classList.add("wo-viewer-container");
+    container.style.touchAction = behavior.touch ? "none" : previousTouchAction;
+    const handleWheel = (event) => {
+        if (!behavior.pointer || destroyed || !svgElement) {
+            return;
+        }
+        event.preventDefault();
+        container.focus();
+        const anchor = getScenePointFromClient(event.clientX, event.clientY);
+        const factor = clamp(Math.exp(-event.deltaY * 0.002), 0.6, 1.6);
+        updateState(zoomViewerStateAt(scene, state, factor, anchor, constraints));
+    };
+    const handlePointerDown = (event) => {
+        if (destroyed) {
+            return;
+        }
+        const isTouch = event.pointerType === "touch";
+        if ((isTouch && !behavior.touch) || (!isTouch && !behavior.pointer)) {
+            return;
+        }
+        if (!isTouch && event.button !== 0) {
+            return;
+        }
+        activePointerId = event.pointerId;
+        lastPointerClientPoint = { x: event.clientX, y: event.clientY };
+        dragDistance = 0;
+        container.setPointerCapture?.(event.pointerId);
+        container.focus();
+    };
+    const handlePointerMove = (event) => {
+        if (destroyed || activePointerId !== event.pointerId || !lastPointerClientPoint) {
+            return;
+        }
+        const rect = svgElement?.getBoundingClientRect();
+        if (!rect || rect.width <= 0 || rect.height <= 0) {
+            return;
+        }
+        const dx = event.clientX - lastPointerClientPoint.x;
+        const dy = event.clientY - lastPointerClientPoint.y;
+        lastPointerClientPoint = { x: event.clientX, y: event.clientY };
+        dragDistance += Math.hypot(dx, dy);
+        updateState(panViewerState(state, dx * (scene.width / rect.width), dy * (scene.height / rect.height)));
+    };
+    const stopPointer = (event) => {
+        if (activePointerId !== event.pointerId) {
+            return;
+        }
+        activePointerId = null;
+        lastPointerClientPoint = null;
+        container.releasePointerCapture?.(event.pointerId);
+    };
+    const handleClick = (event) => {
+        if (destroyed || !behavior.selection || dragDistance > 6) {
+            return;
+        }
+        const objectEl = event.target?.closest(".wo-object[data-object-id]");
+        if (!objectEl) {
+            return;
+        }
+        updateState({
+            ...state,
+            selectedObjectId: objectEl.dataset.objectId ?? null,
+        });
+        renderSvg();
+    };
+    container.addEventListener("wheel", handleWheel, { passive: false });
+    container.addEventListener("pointerdown", handlePointerDown);
+    container.addEventListener("pointermove", handlePointerMove);
+    container.addEventListener("pointerup", stopPointer);
+    container.addEventListener("pointercancel", stopPointer);
+    container.addEventListener("click", handleClick);
+    renderSvg();
+    return {
+        getState() {
+            return { ...state };
+        },
+        setState(nextState) {
+            updateState({
+                ...state,
+                ...nextState,
+            });
+            if ("selectedObjectId" in nextState) {
+                renderSvg();
+            }
+        },
+        setRenderOptions(nextOptions) {
+            renderOptions = {
+                ...renderOptions,
+                ...nextOptions,
+            };
+            renderSvg();
+        },
+        fitToSystem() {
+            updateState(fitViewerState(scene, state, constraints));
+        },
+        destroy() {
+            if (destroyed) {
+                return;
+            }
+            destroyed = true;
+            container.removeEventListener("wheel", handleWheel);
+            container.removeEventListener("pointerdown", handlePointerDown);
+            container.removeEventListener("pointermove", handlePointerMove);
+            container.removeEventListener("pointerup", stopPointer);
+            container.removeEventListener("pointercancel", stopPointer);
+            container.removeEventListener("click", handleClick);
+            if (previousTabIndex === null) {
+                container.removeAttribute("tabindex");
+            }
+            container.style.touchAction = previousTouchAction;
+            container.replaceChildren();
+            svgElement = null;
+            cameraRoot = null;
+        },
+    };
+    function renderSvg() {
+        if (destroyed) {
+            return;
+        }
+        container.innerHTML = renderSceneToSvg(scene, {
+            width: renderOptions.width,
+            height: renderOptions.height,
+            padding: renderOptions.padding,
+            preset: renderOptions.preset,
+            theme: renderOptions.theme,
+            layers: renderOptions.layers,
+            subtitle: renderOptions.subtitle,
+            selectedObjectId: state.selectedObjectId,
+        });
+        svgElement = container.querySelector("svg");
+        cameraRoot = container.querySelector(`[data-worldorbit-camera-root="${WORLD_LAYER_ID}"]`);
+        applyTransform();
+    }
+    function applyTransform() {
+        cameraRoot?.setAttribute("transform", composeViewerTransform(scene, state));
+    }
+    function updateState(nextState) {
+        state = nextState;
+        applyTransform();
+    }
+    function getScenePointFromClient(clientX, clientY) {
+        const rect = svgElement?.getBoundingClientRect();
+        if (!rect || rect.width <= 0 || rect.height <= 0) {
+            return { x: scene.width / 2, y: scene.height / 2 };
+        }
+        return {
+            x: ((clientX - rect.left) / rect.width) * scene.width,
+            y: ((clientY - rect.top) / rect.height) * scene.height,
+        };
+    }
+}
+function clamp(value, min, max) {
+    return Math.min(Math.max(value, min), max);
+}

package/packages/viewer/dist/render.d.ts

@@ -1,4 +1,4 @@
-import { type RenderScene, type WorldOrbitDocument } from "@worldorbit/core";
+import { type RenderScene, type WorldOrbitDocument } from "@worldorbit/core/types";
 import type { SvgRenderOptions } from "./types.js";
 export declare const WORLD_LAYER_ID = "worldorbit-camera-root";
 export declare function renderSceneToSvg(scene: RenderScene, options?: SvgRenderOptions): string;

package/packages/viewer/dist/render.js

@@ -1,4 +1,5 @@
-import { loadWorldOrbitSource, renderDocumentToScene, } from "@worldorbit/core";
+import { loadWorldOrbitSource } from "@worldorbit/core/load";
+import { renderDocumentToScene } from "@worldorbit/core/scene";
 import { computeVisibleObjectIds } from "./atlas-state.js";
 import { resolveLayers, resolveTheme } from "./theme.js";
 export const WORLD_LAYER_ID = "worldorbit-camera-root";

package/packages/viewer/dist/viewer-state.d.ts

@@ -1,4 +1,4 @@
-import { type CoordinatePoint, type RenderBounds, type RenderScene } from "@worldorbit/core";
+import { type CoordinatePoint, type RenderBounds, type RenderScene } from "@worldorbit/core/types";
 import type { ViewerState } from "./types.js";
 export interface ViewerConstraints {
     minScale: number;

package/packages/viewer/dist/viewer-state.js

@@ -1,4 +1,4 @@
-import { rotatePoint, } from "@worldorbit/core";
+import { rotatePoint } from "@worldorbit/core/scene";
 export const DEFAULT_VIEWER_STATE = {
     scale: 1,
     rotationDeg: 0,