@aethervtt/shard-controls 0.0.0-stage → 0.1.0

package/dist/drag.d.ts

@@ -0,0 +1,91 @@
+import { type Entity, type Vec3, type World } from '@aethervtt/shard-core';
+import { type GestureEvent } from '@aethervtt/shard-input';
+export interface DragMovedEvent {
+    entity: Entity;
+    /** World position now. */
+    position: Vec3;
+    /** Movement since the previous DragMoved (or the start). */
+    delta: Vec3;
+}
+export interface DragEndedEvent {
+    entity: Entity;
+    /** Where it ended: the start again when cancelled. */
+    position: Vec3;
+    start: Vec3;
+    cancelled: boolean;
+}
+export declare const DragMoved: import("@aethervtt/shard-core").EventDef<DragMovedEvent>;
+export declare const DragEnded: import("@aethervtt/shard-core").EventDef<DragEndedEvent>;
+export interface PlaneDragOptions {
+    entity: Entity;
+    /** The drag: its `drag-start` event (or that event's id). */
+    gesture: GestureEvent | number;
+    /**
+     * The plane the pointer moves on: 'grab' (default), through the grab point (or the entity, with
+     * no `grab`); or a height.
+     */
+    plane?: 'grab' | {
+        y: number;
+    };
+    /** The point the pointer took hold of, e.g. `PickHit.position`. Default: the start pixel's ray on the plane. */
+    grab?: ArrayLike<number>;
+    /** Adjusts each position in place, e.g. to a grid cell's center. */
+    snap?: (position: Vec3) => void;
+    /** The camera the pointer looks through. Default: the active camera drawn first. */
+    camera?: Entity;
+}
+/**
+ * Drags one entity at a time along a horizontal plane (0060). `begin` it from the host's own
+ * `drag-start` handler once `pick` says what's under the pointer and the host decides it moves.
+ * Cameras it projects through must be unparented (as controls' cameras are), and a dragged
+ * entity's parents may only translate it.
+ */
+export declare class PlaneDragState {
+    /** @internal */ world: World | undefined;
+    /** The dragged entity, while a drag runs. */
+    entity: Entity | undefined;
+    /** @internal */ gesture: number;
+    /** @internal */ camera: Entity;
+    /** @internal */ planeY: number;
+    /** @internal */ snap: ((position: Vec3) => void) | undefined;
+    /** @internal World-space offset from the pointer's floor point to the entity. */
+    readonly offset: Float64Array<ArrayBuffer>;
+    /** @internal */ readonly startLocal: Float64Array<ArrayBuffer>;
+    /** @internal */ readonly startWorld: Float64Array<ArrayBuffer>;
+    /** @internal */ readonly position: Float64Array<ArrayBuffer>;
+    get active(): boolean;
+    /**
+     * Starts dragging `entity` with a drag gesture, taking the gesture from whoever had it (a camera
+     * control panning on it while the host picked). False when the drag already ended, or there's no
+     * camera to project through.
+     */
+    begin(options: PlaneDragOptions): boolean;
+    /** Ends the drag as cancelled: the entity goes back to where it started. */
+    cancel(): void;
+    /** The drag as data. For agents. */
+    describe(): {
+        active: boolean;
+        entity?: undefined;
+        gesture?: undefined;
+        camera?: undefined;
+        planeY?: undefined;
+        start?: undefined;
+        position?: undefined;
+    } | {
+        active: boolean;
+        entity: number;
+        gesture: number;
+        camera: number;
+        planeY: number;
+        start: number[];
+        position: number[];
+    };
+    /** @internal Moves the entity under CSS pixel (x, y). */
+    moveTo(x: number, y: number): void;
+    /** @internal */
+    finish(cancelled: boolean): void;
+    private place;
+}
+export declare const PlaneDrag: import("@aethervtt/shard-core").ResourceDef<PlaneDragState>;
+/** Follows the drag's gesture: moves on `drag`, ends on `drag-end` (restoring when cancelled). */
+export declare const updatePlaneDrag: import("@aethervtt/shard-core").SystemDef<import("@aethervtt/shard-core").EventReader<GestureEvent>>;

package/dist/drag.js

@@ -0,0 +1,230 @@
+import {
+  ChildOf,
+  defineEvent,
+  defineResource,
+  defineSystem,
+  ShardError
+} from "@aethervtt/shard-core";
+import { Gesture, Gestures } from "@aethervtt/shard-input";
+import { Camera3d } from "@aethervtt/shard-render";
+import { GlobalTransform, Transform } from "@aethervtt/shard-transform";
+import { viewportOf } from "./controls.js";
+import { createView, poseView, viewToPlane } from "./view.js";
+const DragMoved = defineEvent("controls/DragMoved", {
+  description: "A PlaneDrag moved its entity: a preview, not a commit."
+});
+const DragEnded = defineEvent("controls/DragEnded", {
+  description: "A PlaneDrag ended: commit `position` unless `cancelled` (the entity is back at `start`)."
+});
+const OWNER = "controls/plane-drag";
+const view = createView();
+const hit = new Float64Array(3);
+const pointer = new Float64Array(2);
+const viewport = [1, 1];
+function defaultCamera(world) {
+  let best;
+  let bestOrder = Number.POSITIVE_INFINITY;
+  for (const table of world.query({ with: [Camera3d, Transform] }).tables) {
+    const active = table.column(Camera3d, "active");
+    const order = table.column(Camera3d, "order");
+    for (let i = 0; i < table.count; i++) {
+      if (active[i] === 0 || order[i] >= bestOrder) continue;
+      best = table.entities[i];
+      bestOrder = order[i];
+    }
+  }
+  return best;
+}
+function pointOnPlane(world, camera, x, y, planeY, out) {
+  const table = world.entityTable(camera);
+  const row = world.entityRow(camera);
+  viewportOf(world, camera, viewport);
+  const t = table.column(Transform, "translation");
+  const r = table.column(Transform, "rotation");
+  poseView(
+    view,
+    t.subarray(row * 3, row * 3 + 3),
+    r.subarray(row * 4, row * 4 + 4),
+    table.column(Camera3d, "projection")[row] !== 0,
+    table.column(Camera3d, "fovY")[row],
+    table.column(Camera3d, "orthoHeight")[row],
+    viewport[0] / viewport[1]
+  );
+  return viewToPlane(view, x, y, viewport[0], viewport[1], planeY, out);
+}
+class PlaneDragState {
+  /** @internal */
+  world = void 0;
+  /** The dragged entity, while a drag runs. */
+  entity = void 0;
+  /** @internal */
+  gesture = 0;
+  /** @internal */
+  camera = 0;
+  /** @internal */
+  planeY = 0;
+  /** @internal */
+  snap = void 0;
+  /** @internal World-space offset from the pointer's floor point to the entity. */
+  offset = new Float64Array(3);
+  /** @internal */
+  startLocal = new Float64Array(3);
+  /** @internal */
+  startWorld = new Float64Array(3);
+  /** @internal */
+  position = new Float64Array(3);
+  get active() {
+    return this.entity !== void 0;
+  }
+  /**
+   * Starts dragging `entity` with a drag gesture, taking the gesture from whoever had it (a camera
+   * control panning on it while the host picked). False when the drag already ended, or there's no
+   * camera to project through.
+   */
+  begin(options) {
+    const world = this.world;
+    if (!world)
+      throw new ShardError("controls/no-plugin", "PlaneDrag needs controlsPlugin", {
+        hint: 'Add "controls" to plugins in shard.json (or app.addPlugin(controlsPlugin)).'
+      });
+    const id = typeof options.gesture === "number" ? options.gesture : options.gesture.id;
+    const gestures = world.resource(Gestures);
+    if (!gestures.live(id)) return false;
+    if (!world.isAlive(options.entity) || !world.has(options.entity, Transform)) {
+      throw new ShardError("controls/not-draggable", `Entity ${options.entity} has no Transform`, {
+        hint: "PlaneDrag moves an entity by its Transform."
+      });
+    }
+    const camera = options.camera ?? defaultCamera(world);
+    if (camera === void 0) return false;
+    if (this.entity !== void 0) this.finish(true);
+    gestures.take(id, OWNER);
+    const e = options.entity;
+    const local = world.get(e, Transform).translation;
+    this.startLocal.set(local);
+    const g = world.has(e, ChildOf) ? world.tryGet(e, GlobalTransform)?.matrix : void 0;
+    this.startWorld[0] = g ? g[3] : local[0];
+    this.startWorld[1] = g ? g[7] : local[1];
+    this.startWorld[2] = g ? g[11] : local[2];
+    const plane = options.plane ?? "grab";
+    this.planeY = plane === "grab" ? options.grab?.[1] ?? this.startWorld[1] : plane.y;
+    let gx = this.startWorld[0];
+    let gz = this.startWorld[2];
+    if (options.grab) {
+      gx = options.grab[0];
+      gz = options.grab[2];
+    } else {
+      const start = typeof options.gesture === "number" ? void 0 : options.gesture;
+      if (start && pointOnPlane(world, camera, start.startX, start.startY, this.planeY, hit)) {
+        gx = hit[0];
+        gz = hit[2];
+      }
+    }
+    this.offset[0] = this.startWorld[0] - gx;
+    this.offset[1] = 0;
+    this.offset[2] = this.startWorld[2] - gz;
+    this.position.set(this.startWorld);
+    this.entity = e;
+    this.gesture = id;
+    this.camera = camera;
+    this.snap = options.snap;
+    if (gestures.position(id, pointer)) this.moveTo(pointer[0], pointer[1]);
+    return true;
+  }
+  /** Ends the drag as cancelled: the entity goes back to where it started. */
+  cancel() {
+    if (this.entity !== void 0) this.finish(true);
+  }
+  /** The drag as data. For agents. */
+  describe() {
+    return this.entity === void 0 ? { active: false } : {
+      active: true,
+      entity: this.entity,
+      gesture: this.gesture,
+      camera: this.camera,
+      planeY: this.planeY,
+      start: Array.from(this.startWorld),
+      position: Array.from(this.position)
+    };
+  }
+  /** @internal Moves the entity under CSS pixel (x, y). */
+  moveTo(x, y) {
+    const world = this.world;
+    const e = this.entity;
+    if (!world.isAlive(this.camera)) return;
+    if (!pointOnPlane(world, this.camera, x, y, this.planeY, hit)) return;
+    const p = [hit[0] + this.offset[0], this.startWorld[1], hit[2] + this.offset[2]];
+    this.snap?.(p);
+    const delta = [
+      p[0] - this.position[0],
+      p[1] - this.position[1],
+      p[2] - this.position[2]
+    ];
+    if (delta[0] === 0 && delta[1] === 0 && delta[2] === 0) return;
+    this.position.set(p);
+    this.place(p);
+    world.send(DragMoved, { entity: e, position: p, delta });
+  }
+  /** @internal */
+  finish(cancelled) {
+    const world = this.world;
+    const e = this.entity;
+    this.entity = void 0;
+    const start = [this.startWorld[0], this.startWorld[1], this.startWorld[2]];
+    if (!world.isAlive(e)) return;
+    if (cancelled) {
+      this.position.set(start);
+      world.set(e, Transform, {
+        translation: [this.startLocal[0], this.startLocal[1], this.startLocal[2]]
+      });
+    }
+    world.resource(Gestures).release(this.gesture, OWNER);
+    world.send(DragEnded, {
+      entity: e,
+      position: [this.position[0], this.position[1], this.position[2]],
+      start,
+      cancelled
+    });
+  }
+  place(p) {
+    this.world.set(this.entity, Transform, {
+      translation: [
+        this.startLocal[0] + p[0] - this.startWorld[0],
+        this.startLocal[1] + p[1] - this.startWorld[1],
+        this.startLocal[2] + p[2] - this.startWorld[2]
+      ]
+    });
+  }
+}
+const PlaneDrag = defineResource("controls/PlaneDrag", {
+  description: "Drags one entity along a horizontal plane under the pointer (0060); see begin(). Emits DragMoved and DragEnded."
+});
+const updatePlaneDrag = defineSystem({
+  name: "controls/plane-drag",
+  description: "Moves the entity a PlaneDrag holds with its drag gesture, and ends the drag.",
+  setup: (world) => world.reader(Gesture),
+  run: (reader, world) => {
+    const events = reader.read();
+    const drag = world.resource(PlaneDrag);
+    if (drag.entity === void 0) return;
+    if (!world.isAlive(drag.entity)) {
+      drag.finish(true);
+      return;
+    }
+    for (let i = 0; i < events.length && drag.entity !== void 0; i++) {
+      const e = events[i];
+      if (e.id !== drag.gesture) continue;
+      if (e.kind === "drag-start" || e.kind === "drag") drag.moveTo(e.x, e.y);
+      else if (e.kind === "drag-end") drag.finish(e.cancelled);
+    }
+    const gestures = world.resource(Gestures);
+    if (drag.entity !== void 0 && gestures.owner(drag.gesture) !== OWNER) drag.finish(true);
+  }
+});
+export {
+  DragEnded,
+  DragMoved,
+  PlaneDrag,
+  PlaneDragState,
+  updatePlaneDrag
+};

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+export { ControlsSettings, type ControlsSettingsValue, MapControls, type MapControlsValue, OrbitControls, type OrbitControlsValue, } from './components.js';
+export { type ControlLive, ControlsState, type ControlsStateValue, snapControls, updateControls, viewportOf, } from './controls.js';
+export { DragEnded, type DragEndedEvent, DragMoved, type DragMovedEvent, PlaneDrag, type PlaneDragOptions, PlaneDragState, updatePlaneDrag, } from './drag.js';
+export { controlsMethods, controlsPlugin, describeControls } from './plugin.js';
+export { syncViews } from './sync.js';
+export { createView, mapView, orbitDirection, orbitView, poseView, type ViewBasis, viewProject, viewRay, viewToPlane, } from './view.js';

package/dist/index.js

@@ -0,0 +1,56 @@
+import {
+  ControlsSettings,
+  MapControls,
+  OrbitControls
+} from "./components.js";
+import {
+  ControlsState,
+  snapControls,
+  updateControls,
+  viewportOf
+} from "./controls.js";
+import {
+  DragEnded,
+  DragMoved,
+  PlaneDrag,
+  PlaneDragState,
+  updatePlaneDrag
+} from "./drag.js";
+import { controlsMethods, controlsPlugin, describeControls } from "./plugin.js";
+import { syncViews } from "./sync.js";
+import {
+  createView,
+  mapView,
+  orbitDirection,
+  orbitView,
+  poseView,
+  viewProject,
+  viewRay,
+  viewToPlane
+} from "./view.js";
+export {
+  ControlsSettings,
+  ControlsState,
+  DragEnded,
+  DragMoved,
+  MapControls,
+  OrbitControls,
+  PlaneDrag,
+  PlaneDragState,
+  controlsMethods,
+  controlsPlugin,
+  createView,
+  describeControls,
+  mapView,
+  orbitDirection,
+  orbitView,
+  poseView,
+  snapControls,
+  syncViews,
+  updateControls,
+  updatePlaneDrag,
+  viewProject,
+  viewRay,
+  viewToPlane,
+  viewportOf
+};

package/dist/plugin.d.ts

@@ -0,0 +1,85 @@
+import { type World } from '@aethervtt/shard-core';
+import { type AppMethod } from '@aethervtt/shard-runtime';
+/** Every control's camera, fields, eased state and whether it moves, and the PlaneDrag. For agents. */
+export declare function describeControls(world: World): {
+    controls: {
+        camera: number;
+        kind: "map" | "orbit";
+        active: boolean;
+        moving: boolean;
+        dragging: string | null;
+        fields: {
+            distance: number;
+            yaw: number;
+            pitch: number;
+            minPitch: number;
+            maxPitch: number;
+            minDistance: number;
+            maxDistance: number;
+            orbitButton: "left" | "middle" | "right";
+            panButton: "left" | "middle" | "right";
+            leftDrag: "none" | "orbit" | "pan";
+            rotateSpeed: number;
+            zoomSpeed: number;
+            autoRotate: number;
+            smoothing: number;
+            enabled: boolean;
+            target: number[];
+        } | {
+            zoom: number;
+            minZoom: number;
+            maxZoom: number;
+            height: number;
+            elevation: number;
+            pitch: number;
+            plane: "xy" | "xz";
+            bounded: boolean;
+            boundsMin: import("@aethervtt/shard-core").Vec2;
+            boundsMax: import("@aethervtt/shard-core").Vec2;
+            panButton: "left" | "middle" | "right";
+            leftDrag: "none" | "pan";
+            zoomSpeed: number;
+            smoothing: number;
+            enabled: boolean;
+            target: number[];
+        } | null;
+        current: {
+            target: number[];
+            distance: number;
+            yaw: number;
+            pitch: number;
+            zoom?: undefined;
+        } | {
+            distance?: undefined;
+            yaw?: undefined;
+            pitch?: undefined;
+            target: number[];
+            zoom: number;
+        };
+    }[];
+    drag: {
+        active: boolean;
+        entity?: undefined;
+        gesture?: undefined;
+        camera?: undefined;
+        planeY?: undefined;
+        start?: undefined;
+        position?: undefined;
+    } | {
+        active: boolean;
+        entity: number;
+        gesture: number;
+        camera: number;
+        planeY: number;
+        start: number[];
+        position: number[];
+    };
+    settings: import("./components.js").ControlsSettingsValue;
+};
+export declare const controlsMethods: AppMethod[];
+/**
+ * Camera controls and object drag (0060): `OrbitControls`, `MapControls`, `PlaneDrag`, and the
+ * `controls.describe` method. Needs `gesturesPlugin` (and `inputPlugin` with a live source for
+ * real input), `TransformPlugin` and the render components.
+ */
+export declare const controlsPlugin: import("@aethervtt/shard-runtime").Plugin;

package/dist/plugin.js

@@ -0,0 +1,72 @@
+import { defineSchema, PostUpdate } from "@aethervtt/shard-core";
+import { definePlugin } from "@aethervtt/shard-runtime";
+import { TransformSystems } from "@aethervtt/shard-transform";
+import { ControlsSettings, MapControls, OrbitControls } from "./components.js";
+import { ControlsState, updateControls } from "./controls.js";
+import { DragEnded, DragMoved, PlaneDrag, PlaneDragState, updatePlaneDrag } from "./drag.js";
+function describeControls(world) {
+  const state = world.resource(ControlsState);
+  const controls = [...state.live.values()].map((live) => {
+    const fields = live.kind === "orbit" ? world.tryGet(live.entity, OrbitControls) : world.tryGet(live.entity, MapControls);
+    return {
+      camera: live.entity,
+      kind: live.kind,
+      active: live.active,
+      moving: live.moving,
+      dragging: live.dragId !== 0 ? live.dragMode : live.twoId !== 0 ? "touch" : null,
+      fields: fields ? { ...fields, target: Array.from(fields.target) } : null,
+      current: live.kind === "orbit" ? {
+        target: Array.from(live.target),
+        distance: live.scale,
+        yaw: live.yaw,
+        pitch: live.pitch
+      } : { target: Array.from(live.target), zoom: live.scale }
+    };
+  });
+  return {
+    controls,
+    drag: world.resource(PlaneDrag).describe(),
+    settings: world.resource(ControlsSettings)
+  };
+}
+const controlsMethods = [
+  {
+    name: "controls.describe",
+    description: "Camera controls (0060): each control's camera, kind (orbit or map), whether it's active and moving, what it drags, its fields and its eased state, plus the PlaneDrag.",
+    params: defineSchema("controls/DescribeParams", {}),
+    handler: ({ world }) => JSON.parse(JSON.stringify(describeControls(world)))
+  }
+];
+const controlsPlugin = definePlugin({
+  name: "controls",
+  dependencies: ["input/gestures", "core/transform"],
+  provides: [
+    OrbitControls,
+    MapControls,
+    ControlsSettings,
+    ControlsState,
+    PlaneDrag,
+    DragMoved,
+    DragEnded,
+    updateControls,
+    updatePlaneDrag
+  ],
+  build(app) {
+    app.world.initResource(ControlsSettings);
+    app.world.initResource(ControlsState);
+    const drag = new PlaneDragState();
+    drag.world = app.world;
+    app.insertResource(PlaneDrag, drag);
+    app.addSystems(
+      PostUpdate,
+      updateControls.before(TransformSystems),
+      updatePlaneDrag.after(updateControls).before(TransformSystems)
+    );
+    app.addMethod(...controlsMethods);
+  }
+});
+export {
+  controlsMethods,
+  controlsPlugin,
+  describeControls
+};

package/dist/sync.d.ts

@@ -0,0 +1,10 @@
+import { type Entity, type World } from '@aethervtt/shard-core';
+/**
+ * Puts camera `to` over the same target as `from`, showing about the same floor area (0060): the
+ * orthographic height against the perspective distance × tan(fov/2) × 2. Between two orbit
+ * controls the yaw and pitch carry over too. `to` jumps there (no easing).
+ *
+ * The host calls it when switching views; it never runs by itself, so switching one reader's view
+ * can't change another's.
+ */
+export declare function syncViews(world: World, from: Entity, to: Entity): void;

package/dist/sync.js

@@ -0,0 +1,46 @@
+import { ShardError } from "@aethervtt/shard-core";
+import { Camera3d } from "@aethervtt/shard-render";
+import { MapControls, OrbitControls } from "./components.js";
+import { snapControls } from "./controls.js";
+const DEG = Math.PI / 180;
+function visibleHeight(world, entity) {
+  const map = world.tryGet(entity, MapControls);
+  if (map) return map.height / map.zoom;
+  const orbit = world.tryGet(entity, OrbitControls);
+  if (orbit) return 2 * orbit.distance * Math.tan(world.get(entity, Camera3d).fovY * DEG / 2);
+  throw new ShardError(
+    "controls/no-controls",
+    `Entity ${entity} has no MapControls or OrbitControls`,
+    {
+      hint: "syncViews takes two cameras that each have a control."
+    }
+  );
+}
+function syncViews(world, from, to) {
+  const height = visibleHeight(world, from);
+  const source = world.tryGet(from, MapControls) ?? world.get(from, OrbitControls);
+  const target = [source.target[0], source.target[1], source.target[2]];
+  const map = world.tryGet(to, MapControls);
+  if (map) {
+    const zoom = Math.min(Math.max(map.height / height, map.minZoom), map.maxZoom);
+    world.set(to, MapControls, { target, zoom });
+  } else {
+    const orbit = world.tryGet(to, OrbitControls);
+    if (!orbit) visibleHeight(world, to);
+    const fov = world.get(to, Camera3d).fovY * DEG;
+    const distance = Math.min(
+      Math.max(height / (2 * Math.tan(fov / 2)), orbit.minDistance),
+      orbit.maxDistance
+    );
+    const fromOrbit = world.tryGet(from, OrbitControls);
+    world.set(to, OrbitControls, {
+      target,
+      distance,
+      ...fromOrbit ? { yaw: fromOrbit.yaw, pitch: fromOrbit.pitch } : {}
+    });
+  }
+  snapControls(world, to);
+}
+export {
+  syncViews
+};

package/dist/view.d.ts

@@ -0,0 +1,39 @@
+type Vec = {
+    [index: number]: number;
+};
+export interface ViewBasis {
+    eye: Float64Array;
+    /** Screen right, screen up and the look direction, unit and orthogonal. */
+    right: Float64Array;
+    up: Float64Array;
+    forward: Float64Array;
+    orthographic: boolean;
+    /** Perspective: tan(fovY / 2). Orthographic: half the view height. */
+    half: number;
+    /** Width over height. */
+    aspect: number;
+}
+export declare function createView(): ViewBasis;
+/** The orbit camera's eye offset from the target, unit length. */
+export declare function orbitDirection(yaw: number, pitch: number, out: Vec): void;
+/** A perspective camera `distance` from `target`, looking at it from (yaw, pitch), Y up. */
+export declare function orbitView(out: ViewBasis, target: ArrayLike<number>, distance: number, yaw: number, pitch: number, fovY: number, aspect: number): ViewBasis;
+/**
+ * An orthographic camera `elevation` from `target`. On the 'xz' floor it looks down at `pitch`
+ * degrees (90: straight down, screen-up -Z; less: from the south, so wall faces show). On the 'xy'
+ * plane (2D) it looks straight along -Z, screen-up +Y.
+ */
+export declare function mapView(out: ViewBasis, target: ArrayLike<number>, elevation: number, pitch: number, orthoHeight: number, aspect: number, plane?: 'xz' | 'xy'): ViewBasis;
+/** Any camera from its position and rotation (a unit quaternion), as `Camera3d` sees it. */
+export declare function poseView(out: ViewBasis, position: ArrayLike<number>, rotation: ArrayLike<number>, orthographic: boolean, fovY: number, orthoHeight: number, aspect: number): ViewBasis;
+/** The ray under CSS pixel (x, y) of a `width` × `height` view: origin and unit direction. */
+export declare function viewRay(v: ViewBasis, x: number, y: number, width: number, height: number, outOrigin: Vec, outDir: Vec): void;
+/**
+ * Where the ray under CSS pixel (x, y) meets the plane `y = level` (`axis` 1, a floor) or
+ * `z = level` (`axis` 2, a 2D world). False when it doesn't: it runs parallel, the plane is behind
+ * the camera, or the hit is past `maxDistance`.
+ */
+export declare function viewToPlane(v: ViewBasis, x: number, y: number, width: number, height: number, level: number, out: Vec, maxDistance?: number, axis?: 1 | 2): boolean;
+/** Projects a world point to CSS pixels. False when it's behind the camera. */
+export declare function viewProject(v: ViewBasis, p: ArrayLike<number>, width: number, height: number, out: Vec): boolean;
+export {};