45 lines
1.2 KiB
JavaScript
45 lines
1.2 KiB
JavaScript
import { app } from '../../scripts/app.js';
|
|
|
|
// Load CSS
|
|
document.head.append(
|
|
Object.assign( document.createElement( 'link' ), {
|
|
rel: 'stylesheet',
|
|
href: new URL( './styles.css', import.meta.url )
|
|
} )
|
|
);
|
|
|
|
app.registerExtension( {
|
|
name: 'MouseCoordinates',
|
|
|
|
async setup() {
|
|
|
|
// Create display element
|
|
const coordDisplay = document.createElement( 'div' );
|
|
coordDisplay.id = 'mouse-coordinates-display';
|
|
coordDisplay.textContent = '0, 0';
|
|
document.body.appendChild( coordDisplay );
|
|
|
|
// Update coordinates on mouse move
|
|
const canvas = document.querySelector( '#graph-canvas' );
|
|
if( canvas ) {
|
|
canvas.addEventListener( 'mousemove', ( e ) => {
|
|
|
|
// Get the graph canvas to convert screen coords to graph coords
|
|
const graphCanvas = app.canvas;
|
|
if( graphCanvas && graphCanvas.graph ) {
|
|
const rect = canvas.getBoundingClientRect();
|
|
const x = e.clientX - rect.left;
|
|
const y = e.clientY - rect.top;
|
|
|
|
// Convert to graph coordinates
|
|
const graphPos = graphCanvas.convertEventToCanvasOffset( e );
|
|
const graphX = Math.round( graphPos[0] );
|
|
const graphY = Math.round( graphPos[1] );
|
|
|
|
coordDisplay.textContent = `${graphX}, ${graphY}`;
|
|
}
|
|
} );
|
|
}
|
|
}
|
|
} );
|