@woosh/meep-engine 2.165.4 → 2.165.6

package/editor/view/ecs/components/common/AutoCanvasView.d.ts

@@ -1,20 +1,20 @@
-/**
- * Automatically tracks size on the screen, including that computed from CSS and - re-renders content when size changes
- * @extends View
- */
-export class AutoCanvasView {
-    constructor({ classList }?: {
-        classList?: any[];
-    });
-    __sizeObserver: DomSizeObserver;
-    render(): void;
-    /**
-     *
-     * @param {CanvasRenderingContext2D} ctx
-     * @param {number} width
-     * @param {number} height
-     */
-    draw(ctx: CanvasRenderingContext2D, width: number, height: number): void;
-}
-import { DomSizeObserver } from "../../../../../src/view/util/DomSizeObserver.js";
+/**
+ * Automatically tracks size on the screen, including that computed from CSS and - re-renders content when size changes
+ * @extends View
+ */
+export class AutoCanvasView {
+    constructor({ classList }?: {
+        classList?: any[];
+    });
+    __sizeObserver: DomSizeObserver;
+    render(): void;
+    /**
+     *
+     * @param {CanvasRenderingContext2D} ctx
+     * @param {number} width
+     * @param {number} height
+     */
+    draw(ctx: CanvasRenderingContext2D, width: number, height: number): void;
+}
+import { DomSizeObserver } from "../../../../../src/view/util/DomSizeObserver.js";
 //# sourceMappingURL=AutoCanvasView.d.ts.map

package/editor/view/ecs/components/common/LineView.d.ts

@@ -1,12 +1,12 @@
-/**
- * @extends {View}
- */
-export class LineView extends View<HTMLElement> {
-    constructor({ elements, classList }: {
-        elements?: any[];
-        classList?: any[];
-    });
-    el: HTMLDivElement;
-}
-import View from "../../../../../src/view/View.js";
+/**
+ * @extends {View}
+ */
+export class LineView extends View<HTMLElement> {
+    constructor({ elements, classList }: {
+        elements?: any[];
+        classList?: any[];
+    });
+    el: HTMLDivElement;
+}
+import View from "../../../../../src/view/View.js";
 //# sourceMappingURL=LineView.d.ts.map

package/editor/view/ecs/components/common/NumberController.d.ts

@@ -1,18 +1,18 @@
-export class NumberController extends View<HTMLElement> {
-    /**
-     *
-     * @param {string[]} [classList]
-     * @param {number} [value]
-     * @param figures
-     */
-    constructor({ classList, value, figures }?: string[]);
-    /**
-     *
-     * @type {Vector1}
-     */
-    value: Vector1;
-    el: HTMLInputElement;
-}
-import View from "../../../../../src/view/View.js";
-import Vector1 from "../../../../../src/core/geom/Vector1.js";
+export class NumberController extends View<HTMLElement> {
+    /**
+     *
+     * @param {string[]} [classList]
+     * @param {number} [value]
+     * @param figures
+     */
+    constructor({ classList, value, figures }?: string[]);
+    /**
+     *
+     * @type {Vector1}
+     */
+    value: Vector1;
+    el: HTMLInputElement;
+}
+import View from "../../../../../src/view/View.js";
+import Vector1 from "../../../../../src/core/geom/Vector1.js";
 //# sourceMappingURL=NumberController.d.ts.map

package/editor/view/ecs/components/particles/ColorParameterLUTController.d.ts

@@ -1,14 +1,14 @@
-/**
- *
- * @param {CanvasRenderingContext2D} context
- * @param {number} width
- * @param {number} height
- * @param {number}cellSize
- * @param {string} color1
- * @param {string} color2
- */
-export function drawCheckers(context: CanvasRenderingContext2D, width: number, height: number, cellSize: number, color1: string, color2: string): void;
-export class ColorParameterLUTController extends GuiControl {
-}
-import GuiControl from "../../../../../src/view/controller/controls/GuiControl.js";
+/**
+ *
+ * @param {CanvasRenderingContext2D} context
+ * @param {number} width
+ * @param {number} height
+ * @param {number}cellSize
+ * @param {string} color1
+ * @param {string} color2
+ */
+export function drawCheckers(context: CanvasRenderingContext2D, width: number, height: number, cellSize: number, color1: string, color2: string): void;
+export class ColorParameterLUTController extends GuiControl {
+}
+import GuiControl from "../../../../../src/view/controller/controls/GuiControl.js";
 //# sourceMappingURL=ColorParameterLUTController.d.ts.map

package/editor/view/makeEntityDecorators.d.ts

@@ -1,6 +1,6 @@
-/**
- *
- * @return {(function(entity:number, ecd:EntityComponentDataset, view:View):void)[]}
- */
-export function makeEntityDecorators(): ((arg0: entity) => number);
+/**
+ *
+ * @return {(function(entity:number, ecd:EntityComponentDataset, view:View):void)[]}
+ */
+export function makeEntityDecorators(): ((arg0: entity) => number);
 //# sourceMappingURL=makeEntityDecorators.d.ts.map

package/editor/view/tools/ToolSettingsView.d.ts

@@ -1,11 +1,11 @@
-export default ToolSettingsView;
-declare class ToolSettingsView extends View<HTMLElement> {
-    constructor(tool: any);
-    model: any;
-    gui: any;
-    el: any;
-    setTool(tool: any): void;
-    build(): void;
-}
-import View from "../../../src/view/View.js";
+export default ToolSettingsView;
+declare class ToolSettingsView extends View<HTMLElement> {
+    constructor(tool: any);
+    model: any;
+    gui: any;
+    el: any;
+    setTool(tool: any): void;
+    build(): void;
+}
+import View from "../../../src/view/View.js";
 //# sourceMappingURL=ToolSettingsView.d.ts.map

package/editor/view/tools/ToolView.d.ts

@@ -1,13 +1,13 @@
-export default ToolView;
-declare class ToolView extends View<HTMLElement> {
-    /**
-     *
-     * @param {Tool} tool
-     * @param {Editor} editor
-     * @constructor
-     */
-    constructor({ tool, editor }: Tool);
-    el: Element;
-}
-import View from "../../../src/view/View.js";
+export default ToolView;
+declare class ToolView extends View<HTMLElement> {
+    /**
+     *
+     * @param {Tool} tool
+     * @param {Editor} editor
+     * @constructor
+     */
+    constructor({ tool, editor }: Tool);
+    el: Element;
+}
+import View from "../../../src/view/View.js";
 //# sourceMappingURL=ToolView.d.ts.map

package/editor/view/v2/SplitView.d.ts

@@ -1,17 +1,17 @@
-export class SplitView extends EmptyView {
-    static from({ a, b, type, fraction }: {
-        a: any;
-        b: any;
-        type?: string;
-        fraction?: number;
-    }): SplitView;
-    constructor();
-    set fraction(arg: any);
-    set direction(arg: any);
-    set childA(arg: any);
-    set childB(arg: any);
-    layout(): void;
-    #private;
-}
-import EmptyView from "../../../src/view/elements/EmptyView.js";
+export class SplitView extends EmptyView {
+    static from({ a, b, type, fraction }: {
+        a: any;
+        b: any;
+        type?: string;
+        fraction?: number;
+    }): SplitView;
+    constructor();
+    set fraction(arg: any);
+    set direction(arg: any);
+    set childA(arg: any);
+    set childB(arg: any);
+    layout(): void;
+    #private;
+}
+import EmptyView from "../../../src/view/elements/EmptyView.js";
 //# sourceMappingURL=SplitView.d.ts.map

package/package.json

@@ -6,7 +6,7 @@
   "description": "Pure JavaScript game engine. Fully featured and production ready.",
   "type": "module",
   "author": "Alexander Goldring",
-  "version": "2.165.4",
+  "version": "2.165.6",
   "main": "build/meep.module.js",
   "module": "build/meep.module.js",
   "exports": {

package/samples/generation/grid/GridTags.d.ts

@@ -1,16 +1,16 @@
-/**
- * Tags
- */
-export type GridTags = number;
-export namespace GridTags {
-    let Traversable: number;
-    let Enemy: number;
-    let Base: number;
-    let Treasure: number;
-    let StartingPoint: number;
-    let Occupied: number;
-    let Road: number;
-    let PlayArea: number;
-    let Objective: number;
-}
+/**
+ * Tags
+ */
+export type GridTags = number;
+export namespace GridTags {
+    let Traversable: number;
+    let Enemy: number;
+    let Base: number;
+    let Treasure: number;
+    let StartingPoint: number;
+    let Occupied: number;
+    let Road: number;
+    let PlayArea: number;
+    let Objective: number;
+}
 //# sourceMappingURL=GridTags.d.ts.map

package/samples/generation/grid/MirGridLayers.d.ts

@@ -1,8 +1,8 @@
-export namespace MirGridLayers {
-    let Tags: string;
-    let DistanceFromStart: string;
-    let DistanceFromPlayArea: string;
-    let Heights: string;
-    let Moisture: string;
-}
+export namespace MirGridLayers {
+    let Tags: string;
+    let DistanceFromStart: string;
+    let DistanceFromPlayArea: string;
+    let Heights: string;
+    let Moisture: string;
+}
 //# sourceMappingURL=MirGridLayers.d.ts.map

package/samples/generation/rules/matcher_tag_occupied.d.ts

@@ -1,3 +1,3 @@
-export const matcher_tag_occupied: CellMatcherLayerBitMaskTest;
-import { CellMatcherLayerBitMaskTest } from "../../../src/generation/rules/CellMatcherLayerBitMaskTest.js";
+export const matcher_tag_occupied: CellMatcherLayerBitMaskTest;
+import { CellMatcherLayerBitMaskTest } from "../../../src/generation/rules/CellMatcherLayerBitMaskTest.js";
 //# sourceMappingURL=matcher_tag_occupied.d.ts.map

package/samples/generation/rules/matcher_tag_traversable.d.ts

@@ -1,3 +1,3 @@
-export const matcher_tag_traversable: CellMatcherLayerBitMaskTest;
-import { CellMatcherLayerBitMaskTest } from "../../../src/generation/rules/CellMatcherLayerBitMaskTest.js";
+export const matcher_tag_traversable: CellMatcherLayerBitMaskTest;
+import { CellMatcherLayerBitMaskTest } from "../../../src/generation/rules/CellMatcherLayerBitMaskTest.js";
 //# sourceMappingURL=matcher_tag_traversable.d.ts.map

package/samples/generation/rules/matcher_tag_unoccupied.d.ts

@@ -1,3 +1,3 @@
-export const matcher_tag_unoccupied: CellMatcherNot;
-import { CellMatcherNot } from "../../../src/generation/rules/logic/CellMatcherNot.js";
+export const matcher_tag_unoccupied: CellMatcherNot;
+import { CellMatcherNot } from "../../../src/generation/rules/logic/CellMatcherNot.js";
 //# sourceMappingURL=matcher_tag_unoccupied.d.ts.map

package/src/engine/ecs/gui/hud/HeadsUpDisplaySystem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HeadsUpDisplaySystem.d.ts","sourceRoot":"","sources":["../../../../../../src/engine/ecs/gui/hud/HeadsUpDisplaySystem.js"],"names":[],"mappings":";AAeA;;;;;GAKG;AACH;IASI;;;OAGG;IACH,4BAFW,cAAc,EAqBxB;IA/BD,wCAAgC;IAGhC,2HAGE;IAaE,yBAA8B;IAM9B;;;;OAIG;IACH,+BAAiD;IAGrD,iCAGC;IAED,gCAIC;IAED;;;;;;;OAOG;IACH,sCAwGC;IAED,6BAsBC;CACJ;uBAtMsB,iBAAiB;2BAIb,qBAAqB;uBAFzB,kBAAkB;4CALG,uDAAuD;6BAMtE,iCAAiC;+BAL/B,qCAAqC"}
+{"version":3,"file":"HeadsUpDisplaySystem.d.ts","sourceRoot":"","sources":["../../../../../../src/engine/ecs/gui/hud/HeadsUpDisplaySystem.js"],"names":[],"mappings":";AAeA;;;;;GAKG;AACH;IASI;;;OAGG;IACH,4BAFW,cAAc,EAqBxB;IA/BD,wCAAgC;IAGhC,2HAGE;IAaE,yBAA8B;IAM9B;;;;OAIG;IACH,+BAAiD;IAGrD,iCAGC;IAED,gCAIC;IAED;;;;;;;OAOG;IACH,sCA6JC;IAED,6BAsBC;CACJ;uBA3PsB,iBAAiB;2BAIb,qBAAqB;uBAFzB,kBAAkB;4CALG,uDAAuD;6BAMtE,iCAAiC;+BAL/B,qCAAqC"}

package/src/engine/ecs/gui/hud/HeadsUpDisplaySystem.js

@@ -118,26 +118,79 @@ class HeadsUpDisplaySystem extends System {
         const worldPositionY = y;
         const worldPositionZ = z;
 
-        // Convert the [-1, 1] screen coordinate into a world coordinate on the near plane
-
-        // apply projection matrix
+        // project world position into clip space
         const _x = projection[0] * x + projection[4] * y + projection[8] * z + projection[12];
         const _y = projection[1] * x + projection[5] * y + projection[9] * z + projection[13];
         const _z = projection[2] * x + projection[6] * y + projection[10] * z + projection[14];
         const _w = projection[3] * x + projection[7] * y + projection[11] * z + projection[15];
 
-        // apply perspective transform
-        const d = 1 / Math.abs(_w);
-        x = _x * d;
-        y = _y * d;
-        z = _z * d;
+        let ndcX;
+        let ndcY;
+        let trackedPositionOutOfBounds;
 
-        const ndcX = (x + 1) / 2;
-        const ndcY = (1 - y) / 2;
+        if (_w > 0) {
+            // point is in front of the camera plane, apply perspective transform
+            const d = 1 / _w;
 
-        vp.position.set(ndcX, ndcY);
+            x = _x * d;
+            y = _y * d;
+            z = _z * d;
+
+            trackedPositionOutOfBounds = z > 1 || z < -1;
+
+            let dx = x * 0.5;
+            let dy = y * -0.5;
+
+            /*
+             Near the camera plane the projected position grows without bound while carrying no more
+             information than its direction from the viewport center. Cap it to the boundary of a doubled
+             viewport rect: edge-stick placement depends only on that direction, and unbounded coordinates
+             wreck float precision downstream (element extents cancel to zero next to values around 1e15).
+             */
+            const m = Math.max(Math.abs(dx), Math.abs(dy));
+
+            if (m > 1) {
+                const s = 1 / m;
+
+                dx *= s;
+                dy *= s;
+            }
+
+            ndcX = 0.5 + dx;
+            ndcY = 0.5 + dy;
+        } else {
+            /*
+             Point is on or behind the camera plane. Perspective division inverts through the projection
+             center, which would place the point on the opposite side of the screen from where it actually is.
+             Only the direction from the viewport center remains meaningful: clip-space (_x, -_y), the limit of
+             the in-front projection as a point approaches the camera plane.
 
-        const trackedPositionOutOfBounds = z > 1 || z < -1;
+             Push the position out along that direction to the boundary of a doubled viewport rect. That is
+             guaranteed to be off-screen, letting stick-to-edge placement resolve it to the correct point on
+             the screen edge; without stick-to-edge the element is hidden anyway.
+             */
+            trackedPositionOutOfBounds = true;
+
+            let dx = _x;
+            let dy = -_y;
+
+            const m = Math.max(Math.abs(dx), Math.abs(dy));
+
+            if (m > 0) {
+                const s = 1 / m;
+
+                dx *= s;
+                dy *= s;
+            } else {
+                // point lies exactly on the camera's view axis, direction is undefined; push down
+                dy = 1;
+            }
+
+            ndcX = 0.5 + dx;
+            ndcY = 0.5 + dy;
+        }
+
+        vp.position.set(ndcX, ndcY);
 
         const visible = (!trackedPositionOutOfBounds || vp.stickToScreenEdge) && this.__visibility_predicate.test(worldPositionX, worldPositionY, worldPositionZ);
 

package/src/engine/ecs/gui/hud/testHudEdgeStick.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=testHudEdgeStick.d.ts.map

package/src/engine/ecs/gui/hud/testHudEdgeStick.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"testHudEdgeStick.d.ts","sourceRoot":"","sources":["../../../../../../src/engine/ecs/gui/hud/testHudEdgeStick.js"],"names":[],"mappings":""}

package/src/engine/ecs/gui/hud/testHudEdgeStick.js

@@ -0,0 +1,134 @@
+import { EngineHarness } from "../../../EngineHarness.js";
+import Entity from "../../Entity.js";
+import { Transform } from "../../transform/Transform.js";
+import EmptyView from "../../../../view/elements/EmptyView.js";
+import GUIElement from "../GUIElement.js";
+import GUIElementSystem from "../GUIElementSystem.js";
+import ViewportPosition from "../position/ViewportPosition.js";
+import ViewportPositionSystem from "../position/ViewportPositionSystem.js";
+import HeadsUpDisplay from "./HeadsUpDisplay.js";
+import HeadsUpDisplaySystem from "./HeadsUpDisplaySystem.js";
+import { EngineConfiguration } from "../../../EngineConfiguration.js";
+import { AttachmentSystem } from "../../attachment/AttachmentSystem.js";
+import { CameraSystem } from "../../../graphics/ecs/camera/CameraSystem.js";
+import TopDownCameraController from "../../../graphics/ecs/camera/topdown/TopDownCameraController.js";
+
+const eh = new EngineHarness();
+
+/**
+ *
+ * @param {Engine} engine
+ * @return {EngineConfiguration}
+ */
+function makeConfig(engine) {
+    const r = new EngineConfiguration();
+
+    r.addSystem(new AttachmentSystem());
+    r.addSystem(new HeadsUpDisplaySystem(engine.graphics));
+    r.addSystem(new ViewportPositionSystem(engine.gameView.size));
+    r.addSystem(new GUIElementSystem(engine.gui.view, engine));
+
+    return r;
+}
+
+const RING_RADIUS = 25;
+const BADGE_COUNT = 12;
+
+/**
+ *
+ * @param {Engine} engine
+ */
+async function main(engine) {
+
+    await EngineHarness.buildBasics({
+        engine,
+        enableWater: false,
+        enableShadows: false,
+        pitch: 0.7,
+        distance: 10
+    });
+
+    // highlight stuck badges
+    const style = document.createElement('style');
+    style.textContent = `
+        .hud-edge-stick-badge {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font: bold 12px sans-serif;
+            color: white;
+            border-radius: 50%;
+            border: 2px solid white;
+            box-sizing: border-box;
+        }
+        .hud-edge-stick-badge.hud-system-sticky-flag {
+            border-color: black;
+        }
+    `;
+    document.head.appendChild(style);
+
+    const ecd = engine.entityManager.dataset;
+
+    const tracked = [];
+
+    for (let i = 0; i < BADGE_COUNT; i++) {
+        const angle = (i / BADGE_COUNT) * Math.PI * 2;
+
+        const x = 5 + Math.cos(angle) * RING_RADIUS;
+        const z = 5 + Math.sin(angle) * RING_RADIUS;
+
+        const view = new EmptyView({
+            classList: ['hud-edge-stick-badge'],
+            css: {
+                background: `hsl(${(i / BADGE_COUNT) * 360}, 80%, 45%)`
+            }
+        });
+
+        view.size.set(28, 28);
+        view.el.textContent = String(i);
+
+        const transform = new Transform();
+        transform.position.set(x, 0.5, z);
+
+        const vp = new ViewportPosition();
+        vp.anchor.set(0.5, 0.5);
+        vp.stickToScreenEdge = true;
+        vp.screenEdgeWidth = 8;
+
+        const entity = new Entity()
+            .add(transform)
+            .add(new HeadsUpDisplay())
+            .add(vp)
+            .add(GUIElement.fromView(view))
+            .build(ecd);
+
+        tracked.push({ entity, transform, vp, view, index: i });
+    }
+
+    const active_camera = CameraSystem.getFirstActiveCamera(ecd);
+    const controller = ecd.getComponent(active_camera.entity, TopDownCameraController);
+
+    window.__hud_edge_stick_test = {
+        engine,
+        ecd,
+        tracked,
+        camera: active_camera.component,
+        controller
+    };
+}
+
+/**
+ *
+ * @param {EngineHarness} harness
+ */
+async function init(harness) {
+    const engine = eh.engine;
+
+    await makeConfig(engine).apply(engine);
+
+    await eh.initialize();
+
+    main(engine);
+}
+
+init(eh);

package/src/engine/ecs/gui/position/ViewportPositionSystem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ViewportPositionSystem.d.ts","sourceRoot":"","sources":["../../../../../../src/engine/ecs/gui/position/ViewportPositionSystem.js"],"names":[],"mappings":";AAuBA;IACI,+BAoBC;IAjBG,8DAAkD;IAElD,kEAEC;IAED,kBAAgC;IAEhC,yCAME;IAEF,SAAc;IAGlB,2CAEC;IAED,4CAEC;IAED;;;OAGG;IACH,sBAHW,UAAU,MACV,gBAAgB,QAkE1B;IAED;;;;;OAKG;IACH,SAJW,gBAAgB,MAChB,UAAU,qBA8BpB;IAED;;;;;OAKG;IACH,WAJW,gBAAgB,MAChB,UAAU,qBAmBpB;IA4EL;;;OAGG;IACH,mCAFU,OAAO,CAEwC;CA7ExD;uBAlLsB,iBAAiB;uBACjB,kBAAkB;6BAEZ,uBAAuB;4CAJR,uDAAuD;8BAJrE,iDAAiD"}
+{"version":3,"file":"ViewportPositionSystem.d.ts","sourceRoot":"","sources":["../../../../../../src/engine/ecs/gui/position/ViewportPositionSystem.js"],"names":[],"mappings":";AAwBA;IACI,+BAoBC;IAjBG,8DAAkD;IAElD,kEAEC;IAED,kBAAgC;IAEhC,yCAME;IAEF,SAAc;IAGlB,2CAEC;IAED,4CAEC;IAED;;;OAGG;IACH,sBAHW,UAAU,MACV,gBAAgB,QAkE1B;IAED;;;;;OAKG;IACH,SAJW,gBAAgB,MAChB,UAAU,qBA8BpB;IAED;;;;;OAKG;IACH,WAJW,gBAAgB,MAChB,UAAU,qBAmBpB;IAgGL;;;OAGG;IACH,mCAFU,OAAO,CAEwC;CAjGxD;uBAlLsB,iBAAiB;uBACjB,kBAAkB;6BAEZ,uBAAuB;4CAJR,uDAAuD;8BALrE,iDAAiD"}

package/src/engine/ecs/gui/position/ViewportPositionSystem.js

@@ -1,6 +1,7 @@
 import { assert } from "../../../../core/assert.js";
 import { SignalBinding } from "../../../../core/events/signal/SignalBinding.js";
 import AABB2 from "../../../../core/geom/2d/aabb/AABB2.js";
+import { clamp } from "../../../../core/math/clamp.js";
 import { EPSILON } from "../../../../core/math/EPSILON.js";
 import { ResourceAccessKind } from "../../../../core/model/ResourceAccessKind.js";
 import { ResourceAccessSpecification } from "../../../../core/model/ResourceAccessSpecification.js";
@@ -186,9 +187,6 @@ class ViewportPositionSystem extends System {
 
 const STICKY_FLAG_CLASS_NAME = 'hud-system-sticky-flag';
 
-
-const stickyBounds = new AABB2();
-
 /**
  *
  * @param {View} view
@@ -202,37 +200,60 @@ function setElementPosition(view, bounds, viewportSize, vp) {
 
     if (vp.stickToScreenEdge) {
 
-
         const screenEdgeWidth = vp.screenEdgeWidth;
         const clipEdgeX = screenEdgeWidth / viewportSize.x;
         const clipEdgeY = screenEdgeWidth / viewportSize.y;
 
+        const width = bounds.width;
+        const height = bounds.height;
 
-        stickyBounds.set(clipEdgeX, clipEdgeY, 1 - clipEdgeX, 1 - clipEdgeY);
+        const anchorX = vp.anchor.x;
+        const anchorY = vp.anchor.y;
 
-        let stickFlag = false;
+        // tracked point that the element hangs off, in normalized viewport coordinates
+        const px = bounds.x0 + width * anchorX;
+        const py = bounds.y0 + height * anchorY;
+
+        // rect of anchor positions for which the element stays fully on screen, inset by the edge margin
+        const ax0 = clipEdgeX + width * anchorX;
+        const ay0 = clipEdgeY + height * anchorY;
+        const ax1 = 1 - clipEdgeX - width * (1 - anchorX);
+        const ay1 = 1 - clipEdgeY - height * (1 - anchorY);
+
+        const stickFlag = px < ax0 || px > ax1 || py < ay0 || py > ay1;
+
+        if (stickFlag) {
+            /*
+             Tracked point is off-screen. Place the element on the line from the viewport center towards the
+             tracked point, at the point where that line leaves the valid rect. This keeps the element on the
+             invisible line leading to the tracked position, instead of clamping each axis independently,
+             which piles far-away directions into the corners.
+             */
+            const dx = px - 0.5;
+            const dy = py - 0.5;
+
+            let t = 1;
+
+            if (dx > 0) {
+                t = Math.min(t, (ax1 - 0.5) / dx);
+            } else if (dx < 0) {
+                t = Math.min(t, (ax0 - 0.5) / dx);
+            }
 
-        if (bounds.x0 < stickyBounds.x0) {
-            x = stickyBounds.x0;
+            if (dy > 0) {
+                t = Math.min(t, (ay1 - 0.5) / dy);
+            } else if (dy < 0) {
+                t = Math.min(t, (ay0 - 0.5) / dy);
+            }
 
-            stickFlag = true;
-        } else if (bounds.x1 > stickyBounds.x1) {
-            x = stickyBounds.x1 - bounds.width;
+            // clamp covers rects that do not contain the viewport center, such as for oversized elements
+            const sx = clamp(0.5 + dx * t, ax0, ax1);
+            const sy = clamp(0.5 + dy * t, ay0, ay1);
 
-            stickFlag = true;
+            x = sx - width * anchorX;
+            y = sy - height * anchorY;
         } else {
             x = bounds.x0;
-        }
-
-        if (bounds.y0 < stickyBounds.y0) {
-            y = stickyBounds.y0;
-
-            stickFlag = true;
-        } else if (bounds.y1 > stickyBounds.y1) {
-            y = stickyBounds.y1 - bounds.height;
-
-            stickFlag = true;
-        } else {
             y = bounds.y0;
         }