Elius94 / console-gui-tools

A simple library to draw option menu or other popup inputs and layout on Node.js console.
MIT License
123 stars 18 forks source link

[Bug]: Button click does not work #82

Closed Probabilities closed 8 months ago

Probabilities commented 8 months ago

What happened?

Code runs but when I click the button it does not execute the wanted code.

What should have happened?

Should register the click

Code


const { InPageWidgetBuilder, Control } = require('console-gui-tools')

const widget1 = new InPageWidgetBuilder()
widget1.addRow({ text: "┌────────┐", color: "yellow", style: "bold" })
widget1.addRow({ text: "│ START! │", color: "yellow", style: "bold" })
widget1.addRow({ text: "└────────┘", color: "yellow", style: "bold" })

const button1 = new Control({
  id: "btn1",
  visible: false,
  attributes: { x: 30, y: 18, width: 10, height: 3 },
  children: widget1
})
button1.on("relativeMouse", (event) => {
   if (event.name === "MOUSE_LEFT_BUTTON_RELEASED") {
        require('fs').writeFileSync('button.txt', 'Button clicked!')
   }
})```

### Library Version

3.3.0

### Node Version

18.5.0

### What operating system are you using?

Windows

### Terminal

Tried CMD & windows terminal. I also tried on my macbook and got the same results.

### Interest to fix the bug

- [ ] I would like to fix this bug!
Elius94 commented 8 months ago
import { ConsoleManager, Button, ConfirmPopup } from "../dist/esm/ConsoleGui.mjs"

const opt = {
    title: "Click the button",
    layoutOptions: {
        type: "single",
    },
    logLocation: "popup",
    enableMouse: true
}

const GUI = new ConsoleManager(opt)

GUI.on("exit", () => {
    closeApp()
})

GUI.on("keypressed", (key) => {
    switch (key.name) {
    case "q":
        new ConfirmPopup({
            id: "popupQuit", 
            title: "Are you sure you want to quit?"
        }).show().on("confirm", () => closeApp())
        break
    default:
        break
    }
})

const closeApp = () => {
    console.clear()
    process.exit()
}

const style1 = {
    borderColor: "red",
    color: "red",
}

const btnProps = {
    id: "btnClickMe", 
    text: "Click Me! (Ctrl+R)", 
    x: 10, 
    y: 15, 
    style: style1,
    key: { name: "r", ctrl: true },
}

const button = new Button(btnProps)
button.on("click", () => {
    button.absoluteValues.x = Math.floor(Math.random() * 30)
    button.absoluteValues.y = Math.floor(Math.random() * 30)
    GUI.refresh()
})

GUI.refresh()

Hello! You have to usebutton.on("click", () => {}) event listener!

Remember that to use mouse in windows you have to use WSL because windows does not handle terminal mouse protocol.