@woosh/meep-engine 2.118.4 → 2.118.6

package/build/meep.cjs

@@ -60349,15 +60349,15 @@ class HashMap {
 
         this.__entries_bound++;
 
-        if (this.__entries[i] !== undefined) {
+        const existing_entry = this.__entries[i];
 
-            // entry exists, let's reuse it
+        if (existing_entry !== undefined) {
 
-            const entry = this.__entries[i];
+            // entry exists, let's reuse it
 
-            entry.hash = hash;
-            entry.key = k;
-            entry.value = v;
+            existing_entry.hash = hash;
+            existing_entry.key = k;
+            existing_entry.value = v;
 
         } else {
 
@@ -64357,7 +64357,7 @@ class Task {
      * Run entire task synchronously to completion
      */
     executeSync() {
-        this.initialize();
+        this.initialize(this,null);
 
         this.on.started.send0();
 
@@ -71113,7 +71113,7 @@ const GROW_FACTOR$1 = 1.3;
  * @constant
  * @type {number}
  */
-const SHRINK_FACTOR$1 = 0.5;
+const DEFAULT_SHRINK_FACTOR = 0.5;
 
 /**
  * Minimum number of bits to increase the capacity by
@@ -71159,7 +71159,7 @@ class BitSet {
         /**
          * @type {number}
          */
-        this.__shrinkFactor = SHRINK_FACTOR$1;
+        this.__shrinkFactor = DEFAULT_SHRINK_FACTOR;
     }
 
     preventShrink() {
@@ -71502,14 +71502,6 @@ class BitSet {
         }
     }
 
-    /**
-     *
-     * @param {BitSet} set
-     */
-    and(set) {
-        throw new Error("NIY");
-    }
-
     /**
      * Returns the value of the bit with the specified index.
      * @param {int} bitIndex
@@ -78937,13 +78929,13 @@ const ProcessState = {
 class BaseProcess {
 
     id = "";
+
     /**
      * @readonly
      * @type {ObservedEnum.<ProcessState>}
      */
     __state = new ObservedEnum(ProcessState.New, ProcessState);
 
-
     /**
      * @returns {ObservedEnum<ProcessState>}
      */
@@ -78953,10 +78945,10 @@ class BaseProcess {
 
     initialize() {
 
-        const currentState = this.__state.getValue();
+        const state_current = this.__state.getValue();
 
-        if (currentState !== ProcessState.New && currentState !== ProcessState.Finalized) {
-            throw new IllegalStateException(`Expected New or Finalized state, instead got ${objectKeyByValue(ProcessState, currentState)}`);
+        if (state_current !== ProcessState.New && state_current !== ProcessState.Finalized) {
+            throw new IllegalStateException(`Expected New or Finalized state, instead got ${objectKeyByValue(ProcessState, state_current)}`);
         }
 
 
@@ -78971,6 +78963,7 @@ class BaseProcess {
             this.shutdown();
         }
 
+        // note that we don't bind state value, because it is liable to change in "shutdown"
         if (state.getValue() !== ProcessState.Stopped && state.getValue() !== ProcessState.Initialized) {
             throw new IllegalStateException(`Expected Initialized or Stopped state, instead got ${objectKeyByValue(ProcessState, state.getValue())}`);
         }
@@ -78979,10 +78972,10 @@ class BaseProcess {
     }
 
     startup() {
-        const currentState = this.__state.getValue();
+        const state_current = this.__state.getValue();
 
-        if (currentState !== ProcessState.Initialized && currentState !== ProcessState.Stopped) {
-            throw new IllegalStateException(`Expected Initial state, instead got ${objectKeyByValue(ProcessState, currentState)}`);
+        if (state_current !== ProcessState.Initialized && state_current !== ProcessState.Stopped) {
+            throw new IllegalStateException(`Expected Initial state, instead got ${objectKeyByValue(ProcessState, state_current)}`);
         }
 
         this.__state.set(ProcessState.Running);
@@ -80835,22 +80828,6 @@ class AABB2 {
         this._expandToFit(x, y, x, y);
     }
 
-    /**
-     * retrieve midpoint of AABB along X axis
-     * @returns {number}
-     */
-    midX() {
-        return (this.x1 + this.x0) / 2;
-    }
-
-    /**
-     * retrieve midpoint of AABB along Y axis
-     * @returns {number}
-     */
-    midY() {
-        return (this.y1 + this.y0) / 2;
-    }
-
     /**
      * NOTE: only 1 intersection point is produced
      * @param {Vector2} p0
@@ -81002,16 +80979,35 @@ class AABB2 {
 
     /**
      *
-     * @param {Vector2} result
+     * @param {Vector2} [result]
      */
     getCenter(result = new Vector2()) {
+
         result.set(this.centerX, this.centerY);
 
         return result;
     }
 
     /**
-     *
+     * retrieve midpoint of AABB along X axis
+     * @deprecated use {@link centerX} instead
+     * @returns {number}
+     */
+    midX() {
+        return this.centerX;
+    }
+
+    /**
+     * retrieve midpoint of AABB along Y axis
+     * @deprecated use {@link centerY} instead
+     * @returns {number}
+     */
+    midY() {
+        return this.centerY;
+    }
+
+    /**
+     * midpoint along X axis
      * @return {number}
      */
     get centerX() {
@@ -81019,7 +81015,7 @@ class AABB2 {
     }
 
     /**
-     *
+     * midpoint along Y axis
      * @return {number}
      */
     get centerY() {
@@ -81095,7 +81091,10 @@ class AABB2 {
      * @param {number} deltaY
      */
     move(deltaX, deltaY) {
-        this.set(this.x0 + deltaX, this.y0 + deltaY, this.x1 + deltaX, this.y1 + deltaY);
+        this.set(
+            this.x0 + deltaX, this.y0 + deltaY,
+            this.x1 + deltaX, this.y1 + deltaY
+        );
     }
 
     /**
@@ -81194,6 +81193,21 @@ class AABB2 {
     fromJSON(json) {
         this.set(json.x0, json.y0, json.x1, json.y1);
     }
+
+    /**
+     * @param {number[]|Float32Array} target
+     * @param {number} offset
+     * @returns {number[]|Float32Array}
+     */
+    toArray(target=[], offset=0){
+
+        target[offset] = this.x0;
+        target[offset+1] = this.y0;
+        target[offset+2] = this.x1;
+        target[offset+3] = this.y1;
+
+        return target;
+    }
 }
 
 
@@ -81207,8 +81221,8 @@ class AABB2 {
  */
 function computeLineBetweenTwoBoxes(b0, b1, p0, p1) {
     //compute box centers
-    const c0 = new Vector2(b0.midX(), b0.midY());
-    const c1 = new Vector2(b1.midX(), b1.midY());
+    const c0 = new Vector2(b0.centerX, b0.centerY);
+    const c1 = new Vector2(b1.centerX, b1.centerY);
 
     const i0 = b0.lineIntersectionPoint(c0, c1, p0);
 
@@ -97730,6 +97744,14 @@ class SimpleLifecycle {
         this.priority = priority;
     }
 
+    /**
+     *
+     * @returns {SimpleLifecycleStateType}
+     */
+    get state(){
+        return this.sm.getState();
+    }
+
     makeReady() {
         const s = this.sm.getState();
         if (s === SimpleLifecycleStateType.Ready) {
@@ -100306,20 +100328,8 @@ class TooltipParser {
      */
     parse(code) {
 
-        const existing = this.#cache.get(code);
+        return this.#cache.getOrCompute(code, parseTooltipString);
 
-        if (existing !== null) {
-            // result is cached, reuse
-            return existing;
-        }
-
-        // no cached result, parse
-        const tokens = parseTooltipString(code);
-
-        // cache result
-        this.#cache.put(code, tokens);
-
-        return tokens;
     }
 }
 
@@ -100850,146 +100860,95 @@ class GMLEngine {
 
 }
 
-const SVG_NAMESPACE = "http://www.w3.org/2000/svg";
-
 /**
  *
- * @param {number} r0 inner radius
- * @param {number} r1 outer radius
- * @param {number} a0 starting angle
- * @param {number} a1 end angle
- * @returns {string}
- */
-function svgArc(r0, r1, a0, a1) {
-    let da, df;
-    const c0 = Math.cos(a0);
-    const s0 = Math.sin(a0);
-    const c1 = Math.cos(a1);
-    const s1 = Math.sin(a1);
-
-    da = (a1 < a0 && (da = a0, a0 = a1, a1 = da), a1 - a0);
-
-    df = da < Math.PI ? "0" : "1";
-
-    return "M" + r1 * c0 + "," + r1 * s0
-        + "A" + r1 + "," + r1 + " 0 " + df + ",1 " + r1 * c1 + "," + r1 * s1
-        + "L" + r0 * c1 + "," + r0 * s1
-        + "A" + r0 + "," + r0 + " 0 " + df + ",0 " + r0 * c0 + "," + r0 * s0
-        + "Z";
-}
-
-/**
- *
- * @param {number} r0 Inner radius
- * @param {number} r1 Outer Radius
- * @param {number} a0 Start of the inner arc (in rad)
- * @param {number} b0 End of the inner arc (in rad)
- * @param {number} a1 Start of the outer arc (in rad)
- * @param {number} b1 End of the outer arc (in rad)
- * @returns {string}
+ * @param {Rectangle} rect
+ * @returns {AABB2}
  */
-function svgArc2(r0, r1, a0, b0, a1, b1) {
-    const ac0 = Math.cos(a0);
-    const as0 = Math.sin(a0);
+function rectangle_to_aabb(rect) {
+    const position = rect.position;
 
-    const bc0 = Math.cos(b0);
-    const bs0 = Math.sin(b0);
+    const x0 = position.x;
+    const y0 = position.y;
 
-    const ac1 = Math.cos(a1);
-    const as1 = Math.sin(a1);
+    const size = rect.size;
 
-    const bc1 = Math.cos(b1);
-    const bs1 = Math.sin(b1);
+    let x1 = x0;
+    let y1 = y0;
 
-    const largeArcFlag0 = b0 - a0 <= Math.PI ? "0" : "1";
-    const largeArcFlag1 = b1 - a1 <= Math.PI ? "0" : "1";
+    // sanitize bounds
+    if (size.x > 0) {
+        x1 += size.x;
+    }
 
-    return `
-    M${r1 * ac1},${r1 * as1}
-    A${r1},${r1} 0 ${largeArcFlag1},1 ${r1 * bc1},${r1 * bs1}
-    L${r0 * bc0},${r0 * bs0}
-    A${r0},${r0} 0 ${largeArcFlag0},0 ${r0 * ac0},${r0 * as0}
-    Z
-    `;
-}
+    if (size.y > 0) {
+        y1 += size.y;
+    }
 
+    return new AABB2(x0, y0, x1, y1);
+}
+
 /**
  *
- * @param {String} tag
- * @returns {Element}
- */
-function createSVGElement(tag) {
-    return document.createElementNS(SVG_NAMESPACE, tag);
-}
-
-var SVG = {
-    arcPath: svgArc,
-    svgArc2,
-    createElement: createSVGElement
-};
-
-class CompassArrowView extends View {
-    constructor() {
-        super();
-
-
-        const elSVG = SVG.createElement('svg');
-
-        const elDefs = SVG.createElement('defs');
-        const elGradient = SVG.createElement('linearGradient');
-        elGradient.setAttribute('id', 'gradient');
-
-        elDefs.appendChild(elGradient);
-        const elStop0 = SVG.createElement('stop');
-        const elStop1 = SVG.createElement('stop');
-
-        elStop0.setAttribute('offset', '50%');
-        elStop1.setAttribute('offset', '100%');
-
-        elStop0.classList.add('color-stop-0');
-        elStop1.classList.add('color-stop-1');
+ * @param {number} subject_v0
+ * @param {number} subject_v1
+ * @param {number} bounds_v0
+ * @param {number} bounds_v1
+ * @returns {number} displacement for subject to fit into bounds
+ */
+function interval_force_into_bounds(
+    subject_v0, subject_v1,
+    bounds_v0, bounds_v1
+){
 
-        elGradient.appendChild(elStop0);
-        elGradient.appendChild(elStop1);
-        elSVG.appendChild(elDefs);
+    let displacement = 0;
 
-        const h = 28;
-        const w = 24;
+    const bounds_span = bounds_v1 - bounds_v0;
 
-        elSVG.classList.add('compass');
+    const subject_span = subject_v1 - subject_v0;
 
-        elSVG.setAttribute('width', h);
-        elSVG.setAttribute('height', w);
+    if(bounds_span >= subject_span) {
+        // fits
 
-        const elPolygon = SVG.createElement('polygon');
+        if (subject_v0 < bounds_v0) {
+            displacement = bounds_v0 - subject_v0;
+        } else if (subject_v1 > bounds_v1) {
+            displacement = bounds_v1 - subject_v1;
+        }
 
-        const half_w = w / 2;
-        elPolygon.setAttribute('points', `${h},${half_w} 0,${w} 0,0`);
-        elPolygon.classList.add('compass-triangle');
+    }else {
+        // too big to fit, pick the smallest displacement to occupy entire bounds
 
-        elSVG.appendChild(elPolygon);
+        const a = subject_v0 - bounds_v0;
+        const b = bounds_v1 - subject_v1;
 
-        //set rotation origin to the bottom middle of the element
-        const t = half_w * Math.SQRT2;
+        if(a > 0 && a < b){
+            displacement = -a;
+        }else if(b > 0){
+            displacement = b;
+        }
+    }
 
-        elSVG.style.transformOrigin = `${t}px ${half_w}px`;
-        elSVG.style.top = `-${half_w}px`;
-        elSVG.style.left = `-${t}px`;
+    return displacement;
+}
 
-        this.el = elSVG;
-    }
+/**
+ *
+ * @param {AABB2} container
+ * @param {AABB2} box
+ */
+function aabb2_force_into_container(container, box) {
 
-    rotateFromDirectionVector(x, y) {
-        const angle = Math.atan2(y, x);
+    const dX = interval_force_into_bounds(box.x0, box.x1, container.x0, container.x1);
+    const dY = interval_force_into_bounds(box.y0, box.y1, container.y0, container.y1);
 
-        this.rotation.set(angle);
-    }
+    box.move(dX, dY);
 }
 
 /**
  * Note: assumes that boxes to be contained are strictly smaller than the container in both dimensions
  * @param {AABB2} container
- * @param {Array.<AABB2>} boxes
+ * @param {Array.<AABB2|{locked?:boolean}>} boxes
  */
 function forceIntoBox(container, boxes) {
     for (let i = 0, l = boxes.length; i < l; i++) {
@@ -100999,34 +100958,8 @@ function forceIntoBox(container, boxes) {
             continue;
         }
 
-        let dX = 0;
-        let dY = 0;
+        aabb2_force_into_container(container, box);
 
-        const bx0 = box.x0;
-        const bx1 = box.x1;
-
-        const by0 = box.y0;
-        const by1 = box.y1;
-
-        const cx0 = container.x0;
-        const cx1 = container.x1;
-
-        const cy0 = container.y0;
-        const cy1 = container.y1;
-
-        if (bx0 < cx0) {
-            dX = cx0 - bx0;
-        } else if (bx1 > cx1) {
-            dX = cx1 - bx1;
-        }
-
-        if (by0 < cy0) {
-            dY = cy0 - by0;
-        } else if (by1 > cy1) {
-            dY = cy1 - by1;
-        }
-
-        box.move(dX, dY);
     }
 }
 
@@ -101037,9 +100970,14 @@ function forceIntoBox(container, boxes) {
  * @param {number} targetY target point Y coordinate
  * @param {number} strength
  */
-function pullBoxTowardsPoint(box, targetX, targetY, strength) {
-    const midX = box.midX();
-    const midY = box.midY();
+function pullBoxTowardsPoint(
+    box,
+    targetX, targetY,
+    strength
+) {
+
+    const midX = box.centerX;
+    const midY = box.centerY;
 
     const deltaX = targetX - midX;
     const deltaY = targetY - midY;
@@ -101055,6 +100993,7 @@ function pullBoxTowardsPoint(box, targetX, targetY, strength) {
  *
  * @param {Vector2[]} forces
  * @param {Array.<AABB2>} boxes
+ * @returns {number}
  */
 function resolveBoxOverlapUsingForce(forces, boxes) {
     const numBoxes = boxes.length;
@@ -101152,113 +101091,363 @@ function resolveBoxOverlapUsingForce(forces, boxes) {
 /**
  *
  * @param {AABB2[]} boxes
- * @param {number} maxSteps
+ * @param {number} [maxSteps]
  */
-function resolveAABB2Overlap(boxes, maxSteps) {
+function resolveAABB2Overlap(boxes, maxSteps=3) {
     const forces = [];
 
     const n = boxes.length;
+
     for (let i = 0; i < n; i++) {
         forces.push(new Vector2(0, 0));
     }
 
     let overlapMoves = -1;
-    while (maxSteps > 0 && overlapMoves !== 0) {
-        maxSteps--;
+
+    let steps = maxSteps;
+
+    while (steps > 0 && overlapMoves !== 0) {
+
+        steps--;
+
         overlapMoves = resolveBoxOverlapUsingForce(forces, boxes);
+
     }
+
 }
 
-class TooltipView extends View {
+/**
+ *
+ * @param {AABB2} box
+ * @param {AABB2} target
+ * @param {AABB2} bounds
+ * @returns {Vector2}
+ */
+function computeInitialPlacement(box, target, bounds) {
     /**
-     *
-     * @param {VisualTip} tip
-     * @param {View} contentView
-     * @constructor
+     * list of preferred directions, ordered. First direction is higher priority than the next, last is lowest priority
+     * @type {Vector2[]}
      */
-    constructor(tip, contentView) {
-        super();
+    const preferredDirections = [
+        Vector2.up,
+        Vector2.right,
+        Vector2.down,
+        Vector2.left
+    ];
 
+    const targetCenter = target.getCenter();
 
-        /**
-         *
-         * @type {VisualTip}
-         */
-        this.model = tip;
+    const targetH = target.getHeight();
+    const targetW = target.getWidth();
 
-        //set dom element
-        this.el = document.createElement('div');
-        this.addClass("tooltip-view");
+    const targetDiagonal = Math.sqrt(targetH * targetH + targetW * targetW);
 
-        const vContents = new EmptyView({ classList: ['contents'] });
+    const boxWidth = box.getWidth();
+    const boxHeight = box.getHeight();
 
-        this.addChild(vContents);
+    const boxWidth_2 = boxWidth / 2;
+    const boxHeight_2 = boxHeight / 2;
 
-        vContents.addChild(contentView);
+    const intersectionPoint = new Vector2();
 
-        this.contentView = vContents;
+    const placements = preferredDirections.map(function (direction) {
+        //invert Y axis, screen-space direction is Down(+) and Up(-)
+        const viewportDirection = direction.clone()._multiply(1, -1);
 
+        const pointOutside = viewportDirection.clone();
+        //scale vector to be larger than the box diagonal so it would intersect the boundary when placed in the middle
+        pointOutside.multiplyScalar(targetDiagonal + 1);
+        //move vector to the middle od the box
+        pointOutside.add(targetCenter);
 
-        const vCompass = new CompassArrowView();
+        target.lineIntersectionPoint(targetCenter, pointOutside, intersectionPoint);
 
-        this.addChild(vCompass);
+        //align placement to the opposite edge of the box
+        const offset = new Vector2(boxWidth_2, boxHeight_2);
 
-        this.compass = vCompass;
-    }
+        offset.multiply(viewportDirection);
+
+        offset._sub(boxWidth_2, boxHeight_2);
+
+        offset.add(intersectionPoint);
+
+        return offset;
+    });
 
     /**
      *
-     * @param {AABB2} bounds
+     * @param {Vector2} placement
+     * @returns {number}
      */
-    layout(bounds) {
-        const tipBox = element2aabb(this.contentView.el);
+    function computePlacementScore(placement) {
+        //find space for the tip between bounds and the target
+        const availableSpace = new AABB2();
 
-        const SPACING = 16;
+        const px0 = placement.x;
+        const px1 = px0 + boxWidth;
+        const py0 = placement.y;
+        const py1 = py0 + boxHeight;
 
-        tipBox.grow(SPACING);
+        if (px1 <= target.x0) {
+            //left
+            availableSpace.set(
+                bounds.x0,
+                bounds.y0,
+                target.x0,
+                bounds.y1
+            );
+        } else if (px0 >= target.x1) {
+            //right
+            availableSpace.set(
+                target.x1,
+                bounds.y0,
+                bounds.x1,
+                bounds.y1
+            );
+        } else if (py1 <= target.y0) {
+            //up
+            availableSpace.set(
+                bounds.x0,
+                bounds.y0,
+                bounds.x1,
+                target.y0
+            );
+        } else if (py0 >= target.y1) {
+            //bottom
+            availableSpace.set(
+                bounds.x0,
+                target.y1,
+                bounds.x1,
+                bounds.y1
+            );
+        } else ;
 
-        /**
-         *
-         * @type {VisualTip}
-         */
-        const tip = this.model;
+        let score = 0;
 
-        const tipTarget = tip.target;
+        const availableWidth = availableSpace.getWidth();
+        const availableHeight = availableSpace.getHeight();
 
-        const target = rectangle2aabb(tipTarget);
+        const spareWidth = availableWidth - boxWidth;
+        const spareHeight = availableHeight - boxHeight;
 
-        const box = positionBoxNextToBox(tipBox, target, bounds);
+        if (spareHeight < 0) {
+            score--;
+        }
 
-        box.shrink(SPACING);
+        if (spareWidth < 0) {
+            score--;
+        }
 
-        const compass = this.compass;
+        return score;
+    }
 
-        function setCompas() {
+    //score placements
+    const scores = placements.map(computePlacementScore);
 
-            const targetCenter = new Vector2(target.midX(), target.midY());
+    //find best placement
+    let bestIndex = 0;
+    let bestScore = scores[0];
 
-            const tipPoint = new Vector2();
+    for (let i = 1; i < scores.length; i++) {
+        const score = scores[i];
 
-            box.computeNearestPointToPoint(targetCenter, tipPoint);
+        if (score > bestScore + EPSILON) {
+            bestScore = score;
+            bestIndex = i;
+        }
+    }
 
-            compass.rotateFromDirectionVector(targetCenter.x - tipPoint.x, targetCenter.y - tipPoint.y);
+    return placements[bestIndex];
+}
 
-            compass.position.copy(tipPoint)._add(-box.x0, -box.y0);
-        }
+/**
+ *
+ * @param {AABB2} box
+ * @param {AABB2} target
+ * @param {AABB2} bounds
+ * @returns {AABB2} input {@link box} parameter
+ */
+function position_box_next_to_box(box, target, bounds) {
+    const b = box.clone();
+    const t = target.clone();
 
-        setCompas();
+    //center box inside the bounds
+    const y0 = (bounds.height + b.height) / 2;
+    const x0 = (bounds.width + b.width) / 2;
 
-        this.position.set(box.x0, box.y0);
+    b.set(x0, y0, x0 + b.width, y0 + b.height);
+
+    new Vector2(t.centerX, t.centerY);
+
+    t.locked = true;
+
+
+    const initialPosition = computeInitialPlacement(b, t, bounds);
+    //set bounds to initial position
+    b.set(initialPosition.x, initialPosition.y, initialPosition.x + b.width, initialPosition.y + b.height);
+
+    // touch();
+
+    function step() {
+        //pull
+        pullBoxTowardsPoint(b, initialPosition.x + b.width / 2, initialPosition.y + b.height / 2, 0.1);
+
+        resolveAABB2Overlap([b, t], 10);
+
+        forceIntoBox(bounds, [b]);
+    }
+
+    for (let i = 0; i < 5; i++) {
+        step();
     }
+
+    box.copy(b);
+
+    return box;
+}
+
+const SVG_NAMESPACE = "http://www.w3.org/2000/svg";
+
+/**
+ *
+ * @param {number} r0 inner radius
+ * @param {number} r1 outer radius
+ * @param {number} a0 starting angle
+ * @param {number} a1 end angle
+ * @returns {string}
+ */
+function svgArc(r0, r1, a0, a1) {
+    let da, df;
+    const c0 = Math.cos(a0);
+    const s0 = Math.sin(a0);
+    const c1 = Math.cos(a1);
+    const s1 = Math.sin(a1);
+
+    da = (a1 < a0 && (da = a0, a0 = a1, a1 = da), a1 - a0);
+
+    df = da < Math.PI ? "0" : "1";
+
+    return "M" + r1 * c0 + "," + r1 * s0
+        + "A" + r1 + "," + r1 + " 0 " + df + ",1 " + r1 * c1 + "," + r1 * s1
+        + "L" + r0 * c1 + "," + r0 * s1
+        + "A" + r0 + "," + r0 + " 0 " + df + ",0 " + r0 * c0 + "," + r0 * s0
+        + "Z";
+}
+
+/**
+ *
+ * @param {number} r0 Inner radius
+ * @param {number} r1 Outer Radius
+ * @param {number} a0 Start of the inner arc (in rad)
+ * @param {number} b0 End of the inner arc (in rad)
+ * @param {number} a1 Start of the outer arc (in rad)
+ * @param {number} b1 End of the outer arc (in rad)
+ * @returns {string}
+ */
+function svgArc2(r0, r1, a0, b0, a1, b1) {
+    const ac0 = Math.cos(a0);
+    const as0 = Math.sin(a0);
+
+    const bc0 = Math.cos(b0);
+    const bs0 = Math.sin(b0);
+
+    const ac1 = Math.cos(a1);
+    const as1 = Math.sin(a1);
+
+    const bc1 = Math.cos(b1);
+    const bs1 = Math.sin(b1);
+
+    const largeArcFlag0 = b0 - a0 <= Math.PI ? "0" : "1";
+    const largeArcFlag1 = b1 - a1 <= Math.PI ? "0" : "1";
+
+    return `
+    M${r1 * ac1},${r1 * as1}
+    A${r1},${r1} 0 ${largeArcFlag1},1 ${r1 * bc1},${r1 * bs1}
+    L${r0 * bc0},${r0 * bs0}
+    A${r0},${r0} 0 ${largeArcFlag0},0 ${r0 * ac0},${r0 * as0}
+    Z
+    `;
+}
+
+/**
+ *
+ * @param {String} tag
+ * @returns {Element}
+ */
+function createSVGElement(tag) {
+    return document.createElementNS(SVG_NAMESPACE, tag);
 }
 
+var SVG = {
+    arcPath: svgArc,
+    svgArc2,
+    createElement: createSVGElement
+};
+
+class CompassArrowView extends View {
+    constructor() {
+        super();
+
+
+        const elSVG = SVG.createElement('svg');
+
+        const elDefs = SVG.createElement('defs');
+        const elGradient = SVG.createElement('linearGradient');
+        elGradient.setAttribute('id', 'gradient');
+
+        elDefs.appendChild(elGradient);
+        const elStop0 = SVG.createElement('stop');
+        const elStop1 = SVG.createElement('stop');
+
+        elStop0.setAttribute('offset', '50%');
+        elStop1.setAttribute('offset', '100%');
+
+        elStop0.classList.add('color-stop-0');
+        elStop1.classList.add('color-stop-1');
+
+        elGradient.appendChild(elStop0);
+        elGradient.appendChild(elStop1);
+        elSVG.appendChild(elDefs);
+
+        const h = 28;
+        const w = 24;
+
+        elSVG.classList.add('compass');
+
+        elSVG.setAttribute('width', h);
+        elSVG.setAttribute('height', w);
+
+        const elPolygon = SVG.createElement('polygon');
+
+        const half_w = w / 2;
+        elPolygon.setAttribute('points', `${h},${half_w} 0,${w} 0,0`);
+        elPolygon.classList.add('compass-triangle');
+
+        elSVG.appendChild(elPolygon);
+
+        //set rotation origin to the bottom middle of the element
+        const t = half_w * Math.SQRT2;
 
+        elSVG.style.transformOrigin = `${t}px ${half_w}px`;
+        elSVG.style.top = `-${half_w}px`;
+        elSVG.style.left = `-${t}px`;
+
+        this.el = elSVG;
+    }
+
+    rotateFromDirectionVector(x, y) {
+        const angle = Math.atan2(y, x);
+
+        this.rotation.set(angle);
+    }
+}
+
 /**
  *
  * @param {Element} el
  * @returns {AABB2}
  */
-function element2aabb(el) {
+function html_element_to_aabb(el) {
     const clientRect = el.getBoundingClientRect();
 
     let x0 = clientRect.left;
@@ -101279,224 +101468,89 @@ function element2aabb(el) {
     // write bounds
 
     return new AABB2(x0, y0, x1, y1);
-}
-
-/**
- *
- * @param {Rectangle} rect
- * @returns {AABB2}
- */
-function rectangle2aabb(rect) {
-    const position = rect.position;
-
-    const x0 = position.x;
-    const y0 = position.y;
-
-    const size = rect.size;
-
-    let x1 = x0;
-    let y1 = y0;
-
-    // sanitize bounds
-    if (size.x > 0) {
-        x1 += size.x;
-    }
-
-    if (size.y > 0) {
-        y1 += size.y;
-    }
-
-    return new AABB2(x0, y0, x1, y1);
-}
-
-/**
- *
- * @param {AABB2} box
- * @param {AABB2} target
- * @param {AABB2} bounds
- * @returns {Vector2}
- */
-function computeInitialPlacement(box, target, bounds) {
+}
+
+class TooltipView extends View {
     /**
-     * list of preferred directions, ordered. First direction is higher priority than the next, last is lowest priority
-     * @type {Vector2[]}
+     *
+     * @param {VisualTip} tip
+     * @param {View} contentView
+     * @constructor
      */
-    const preferredDirections = [
-        Vector2.up,
-        Vector2.right,
-        Vector2.down,
-        Vector2.left
-    ];
-
-    const targetCenter = new Vector2(target.midX(), target.midY());
-
-    const targetH = target.getHeight();
-    const targetW = target.getWidth();
-
-    const targetDiagonal = Math.sqrt(targetH * targetH + targetW * targetW);
+    constructor(tip, contentView) {
+        super();
 
-    const boxWidth = box.getWidth();
-    const boxHeight = box.getHeight();
 
-    const boxWidth_2 = boxWidth / 2;
-    const boxHeight_2 = boxHeight / 2;
+        /**
+         *
+         * @type {VisualTip}
+         */
+        this.model = tip;
 
-    const intersectionPoint = new Vector2();
+        //set dom element
+        this.el = document.createElement('div');
+        this.addClass("tooltip-view");
 
-    const placements = preferredDirections.map(function (direction) {
-        //invert Y axis, screen-space direction is Down(+) and Up(-)
-        const viewportDirection = direction.clone()._multiply(1, -1);
+        const vContents = new EmptyView({ classList: ['contents'] });
 
-        const pointOutside = viewportDirection.clone();
-        //scale vector to be larger than the box diagonal so it would intersect the boundary when placed in the middle
-        pointOutside.multiplyScalar(targetDiagonal + 1);
-        //move vector to the middle od the box
-        pointOutside.add(targetCenter);
+        this.addChild(vContents);
 
-        target.lineIntersectionPoint(targetCenter, pointOutside, intersectionPoint);
+        vContents.addChild(contentView);
 
-        //align placement to the opposite edge of the box
-        const offset = new Vector2(boxWidth_2, boxHeight_2);
+        this.contentView = vContents;
 
-        offset.multiply(viewportDirection);
 
-        offset._sub(boxWidth_2, boxHeight_2);
+        const vCompass = new CompassArrowView();
 
-        offset.add(intersectionPoint);
+        this.addChild(vCompass);
 
-        return offset;
-    });
+        this.compass = vCompass;
+    }
 
     /**
      *
-     * @param {Vector2} placement
-     * @returns {number}
+     * @param {AABB2} bounds
      */
-    function computePlacementScore(placement) {
-        //find space for the tip between bounds and the target
-        const availableSpace = new AABB2();
-
-        const px0 = placement.x;
-        const px1 = px0 + boxWidth;
-        const py0 = placement.y;
-        const py1 = py0 + boxHeight;
-
-        if (px1 <= target.x0) {
-            //left
-            availableSpace.set(
-                bounds.x0,
-                bounds.y0,
-                target.x0,
-                bounds.y1
-            );
-        } else if (px0 >= target.x1) {
-            //right
-            availableSpace.set(
-                target.x1,
-                bounds.y0,
-                bounds.x1,
-                bounds.y1
-            );
-        } else if (py1 <= target.y0) {
-            //up
-            availableSpace.set(
-                bounds.x0,
-                bounds.y0,
-                bounds.x1,
-                target.y0
-            );
-        } else if (py0 >= target.y1) {
-            //bottom
-            availableSpace.set(
-                bounds.x0,
-                target.y1,
-                bounds.x1,
-                bounds.y1
-            );
-        } else ;
-
-        let score = 0;
-
-        const availableWidth = availableSpace.getWidth();
-        const availableHeight = availableSpace.getHeight();
-
-        const spareWidth = availableWidth - boxWidth;
-        const spareHeight = availableHeight - boxHeight;
-
-        if (spareHeight < 0) {
-            score--;
-        }
-
-        if (spareWidth < 0) {
-            score--;
-        }
-
-        return score;
-    }
-
-    //score placements
-    const scores = placements.map(computePlacementScore);
+    layout(bounds) {
+        const tipBox = html_element_to_aabb(this.contentView.el);
 
-    //find best placement
-    let bestIndex = 0;
-    let bestScore = scores[0];
+        const SPACING = 16;
 
-    for (let i = 1; i < scores.length; i++) {
-        const score = scores[i];
+        tipBox.grow(SPACING);
 
-        if (score > bestScore + EPSILON) {
-            bestScore = score;
-            bestIndex = i;
-        }
-    }
+        /**
+         *
+         * @type {VisualTip}
+         */
+        const tip = this.model;
 
-    return placements[bestIndex];
-}
+        const tipTarget = tip.target;
 
+        const target = rectangle_to_aabb(tipTarget);
 
-/**
- *
- * @param {AABB2} box
- * @param {AABB2} target
- * @param {AABB2} bounds
- */
-function positionBoxNextToBox(box, target, bounds) {
-    const b = box.clone();
-    const t = target.clone();
-
-    //center box inside the bounds
-    const y0 = (bounds.getHeight() + b.getHeight()) / 2;
-    const x0 = (bounds.getWidth() + b.getWidth()) / 2;
-    b.set(x0, y0, x0 + b.getWidth(), y0 + b.getHeight());
+        const box = position_box_next_to_box(tipBox, target, bounds);
 
+        box.shrink(SPACING);
 
-    new Vector2(t.midX(), t.midY());
+        const compass = this.compass;
 
-    t.locked = true;
+        function setCompass() {
 
+            const targetCenter = target.getCenter();
 
-    const initialPosition = computeInitialPlacement(b, t, bounds);
-    //set bounds to initial position
-    b.set(initialPosition.x, initialPosition.y, initialPosition.x + b.getWidth(), initialPosition.y + b.getHeight());
+            const tipPoint = new Vector2();
 
-    // touch();
+            box.computeNearestPointToPoint(targetCenter, tipPoint);
 
-    function step() {
-        //pull
-        pullBoxTowardsPoint(b, initialPosition.x + b.getWidth() / 2, initialPosition.y + b.getHeight() / 2, 0.1);
+            compass.rotateFromDirectionVector(targetCenter.x - tipPoint.x, targetCenter.y - tipPoint.y);
 
-        resolveAABB2Overlap([b, t], 10);
+            compass.position.copy(tipPoint)._add(-box.x0, -box.y0);
+        }
 
-        forceIntoBox(bounds, [b]);
-    }
+        setCompass();
 
-    for (let i = 0; i < 5; i++) {
-        step();
+        this.position.set(box.x0, box.y0);
     }
-
-    box.copy(b);
-
-    return box;
 }
 
 class TooltipManager {
@@ -102824,40 +102878,37 @@ function playTrackRealTime(track, ecd) {
 }
 
 /**
- *
- * @param {Number} t
- * @param {Number} p0
- * @param {Number} p1
- * @param {Number} p2
- * @param {Number} p3
- * @return {Number}
+ * 3-rd (cubic) degree bezier curve
+ * @see https://www.youtube.com/watch?v=jvPPXbo87ds&t=234s
+ * @see https://en.wikipedia.org/wiki/B%C3%A9zier_curve
+ * @param {number} t factor value between 0..1
+ * @param {number} p0 start point
+ * @param {number} p1 control point
+ * @param {number} p2 control point
+ * @param {number} p3 end point
+ * @returns {number}
  */
-function cubicCurve(t, p0, p1, p2, p3) {
-    /**
-     *
-     * @type {number}
-     */
-    const cX = 3 * (p1 - p0);
+function spline_bezier3(t, p0, p1, p2, p3) {
+    // first we compute necessary factors for each point
+    const nt = 1 - t;
 
-    /**
-     *
-     * @type {number}
-     */
-    const bX = 3 * (p2 - p1) - cX;
+    const nt_2 = nt * nt;
 
-    /**
-     *
-     * @type {number}
-     */
-    const aX = p3 - p0 - cX - bX;
+    const nt_3 = nt_2 * nt;
 
     const t_2 = t * t;
 
     const t_3 = t_2 * t;
 
-    return (aX * t_3) + (bX * t_2) + (cX * t) + p0;
+    // combine factors with point values to produce final result
+    return nt_3 * p0 + 3 * nt_2 * t * p1 + 3 * nt * t_2 * p2 + t_3 * p3;
 }
 
+/**
+ * @deprecated use {@link spline_bezier3} directly
+ */
+const cubicCurve = spline_bezier3;
+
 /**
  *
  * @param {Number} p0
@@ -107373,28 +107424,18 @@ class ReferencedTextureAtlas extends AbstractTextureAtlas {
  * @extends {AABB2}
  */
 class QuadTreeDatum extends AABB2 {
+
     /**
      *
-     * @param {Number} [x0=0]
-     * @param {Number} [y0=0]
-     * @param {Number} [x1=0]
-     * @param {Number} [y1=0]
+     * @type {D|null}
      */
-    constructor(x0, y0, x1, y1) {
-        super(x0, y0, x1, y1);
-
-        /**
-         *
-         * @type {D|null}
-         */
-        this.data = null;
+    data = null;
 
-        /**
-         *
-         * @type {QuadTreeNode|null}
-         */
-        this.parentNode = null;
-    }
+    /**
+     *
+     * @type {QuadTreeNode|null}
+     */
+    parentNode = null;
 
     disconnect() {
         const parentNode = this.parentNode;