#ClientX and ClientY returning undefined

5 messages · Page 1 of 1 (latest)

mortal kayak
#

this prints clientX: undefined clientY: undefined

#

main.js

const { app, BrowserWindow, Menu, ipcMain } = require('electron/main')
const {mainMenu} = require("./menu-maker")

const path = require('node:path')

function handleClick(event) {
  console.log("clientX: " + event.clientX + " clientY: " + event.clientY);
}

const createWindow = () => {
  const win = new BrowserWindow({
    width: 1300,
    height: 740,
    webPreferences: {
        preload: path.resolve('./src/preload.js')
    }
  })

  Menu.setApplicationMenu(mainMenu);

  win.loadFile('./src/index.html');

}

app.whenReady().then(() => {
  ipcMain.on('handle-click', handleClick)
  createWindow()

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow()
    }
  })
})

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})
#

preload.js

const { contextBridge, ipcRenderer } = require('electron')

contextBridge.exposeInMainWorld('electronAPI', {
  handleClick: () => ipcRenderer.send("handle-click")
})
#

renderer.js

const fieldDetector = document.getElementById('field')

fieldDetector.addEventListener('click', (event) => {
    window.electronAPI.handleClick()
    console.log("val: " + event.clientX)
})

fieldDetector.onclick = function(){
    window.electronAPI.handleClick()
}
#

index.html

<!DOCTYPE html>
<html>
<body>
  <link rel="stylesheet" href="styles.css">
  <!-- frame: Main -->
  <div class="frame main-ffbf01528b85">
    <!-- frame: Route Menu -->
    <div class="shape frame route-menu-ffc28fd4b415">
      <ol>
        <li>
          <p>Path 1</p>
        </li>
        <li>
          <p>Path 2</p>
        </li>
        <li>
          <p>Path 3</p>
        </li>
      </ol>
    </div>
    <!-- frame: Configuration -->
    <div class="shape frame configurat-ffe86a2bda2e">
      <form>
        <label for="fname">Robot</label><br></br>
        <input type="text" id="fname" name="fname">Width
        <input type="text" id="lname" name="lname">Length
      </form>
    </div>
    <!-- rect: his_field -->
    <div class="shape rect hisfield-ffe46cc1e1b0" id="field"></div>
  </div>
  <script src="./renderer.js"></script>
</body>
</html>