@woosh/meep-engine/src/engine/animation/curve/draw/displayMousePos.js

Pure JavaScript game engine. Fully featured and production ready.

import {PointerDevice} from "../../../input/devices/PointerDevice.js";
import {position_canvas_to_curve} from "./position_canvas_to_curve.js";
import LabelView from "../../../../view/common/LabelView.js";
import {CSS_ABSOLUTE_POSITIONING} from "../../../../view/CSS_ABSOLUTE_POSITIONING.js";
import {detectClosestCurveTimePoint} from "./isInjectedKeyframeInBounds.js";
import {formatTruncDecimal} from "../editor/formatTruncDecimal.js";

/**
 * Display the mouse position in respect to the graph
 * @param {CanvasView} graph
 * @param {AABB2} frameRegion
 */
export function displayMousePos(graph, frameRegion) {
    const myPointerGlobal = new PointerDevice(window);
    myPointerGlobal.start();
    myPointerGlobal.on.move.add((position, e) => {
        const curveCord = position_canvas_to_curve(graph.size, frameRegion, this.margin, position.x, position.y)

        let label = "x: --.--, y: --.--";
        if (e.buttons === 0) {
            const timeSplicePosition = detectClosestCurveTimePoint(this.curve, graph, frameRegion, this.margin, curveCord, position);
            if (timeSplicePosition !== Infinity) {
                label = `x: ${formatTruncDecimal(timeSplicePosition)}, y: ${formatTruncDecimal(this.curve.evaluate(timeSplicePosition))}`;
            }
        }

        mouseCord.updateText(label)
    });
    const mouseCord = new LabelView("x: --.--, y: --.--", {
        css: {
            background: `rgba(0, 0, 0)`,
            ...CSS_ABSOLUTE_POSITIONING,
            color: 'white',
            font: '12px Tahoma, monospaced',
            top: '5px',
            right: '5px',
            left: 'auto'
        }
    });
    this.addChild(mouseCord);
}