UNPKG

console-gui-tools

Version:

A simple library to draw option menu, text popup or other widgets and layout on a Node.js console.

173 lines 6.45 kB
/// <reference types="node" /> import { EventEmitter } from "events"; import { ConsoleManager, KeyListenerArgs, InPageWidgetBuilder } from "../../ConsoleGui.js"; import { PhisicalValues } from "../Utils.js"; /** * @typedef {Object} ControlConfig * @property {string} id - The id of the control. * @property {PhisicalValues} attributes - The phisical values of the control. * @property {InPageWidgetBuilder} children - The children of the control. * @property {boolean} [visible=true] - If the control is visible or not. * @property {boolean} [draggable=false] - If the control is draggable or not. * * @export * @interface ControlConfig */ export interface ControlConfig { id: string; attributes: PhisicalValues; children: InPageWidgetBuilder; visible?: boolean; draggable?: boolean; } /** * @class Control * @extends EventEmitter * @description This class is used to create a custom control (widget) with That is showed in a * absolute position on the screen. It's a base class for all the controls (widgets). * * Emits the following events: * - "mouse": It carries the pure mouse event, but it fires only if the mouse is over the control. * - "relativeMouse": It's like the "mouse" event, but it carries the relative mouse X and Y (relative to the control). * * ![InPageWidget](https://user-images.githubusercontent.com/14907987/202856804-afe605d2-46b2-4da7-ad4e-9fba5826c787.gif) * * Emits the following events: * * @param {ControlConfig} config The configuration object for the control. * * @example ```ts * 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) => { * // The relative mouse event is triggered with the mouse position relative to the widget * //console.log(`Mouse event: x: ${event.data.x}, y: ${event.data.y}`) * if (event.name === "MOUSE_LEFT_BUTTON_RELEASED") { * GUI.log("Button 1 clicked!") * if (valueEmitter) { * clearInterval(valueEmitter) * valueEmitter = null * } else { * valueEmitter = setInterval(frame, period) * } * } * }) * button1.show() * ``` */ export declare class Control extends EventEmitter { CM: ConsoleManager; id: string; visible: boolean; private parsingMouseFrame; absoluteValues: PhisicalValues; children: InPageWidgetBuilder; draggable: boolean; dragging: boolean; private dragStart; focused: boolean; hovered: boolean; constructor(config: ControlConfig); /** * @description This function is used to delete the Control and remove it from the ConsoleManager. * * @memberof Control */ delete(): void; /** * @description This function is used to make the ConsoleManager handle the key events when the popup is showed. * Inside this function are defined all the keys that can be pressed and the actions to do when they are pressed. * @param {string} _str - The string of the input. * @param {any} key - The key object. * @memberof Control */ keyListener(_str: string, key: KeyListenerArgs): void; /** * getContent() * @description This function is used to get the content of the Control. * @returns {InPageWidgetBuilder} The content of the Control. * @memberof Control * @example ```ts * const content = control.getContent() * ``` */ getContent(): InPageWidgetBuilder; /** * @description This function is used to focus the Control. It also register the key events. * @returns {Control} The instance of the Control. * @memberof Control */ focus(): Control; /** * @description This function is used to unfocus the Control. It also unregister the key events. * @returns {Control} The instance of the Control. * @memberof Control */ unfocus(): Control; /** * @description This function is used to show the Control. It also register the mouse events and refresh the ConsoleManager. * @returns {Control} The instance of the Control. * @memberof Control */ show(): Control; /** * @description This function is used to hide the Control. It also unregister the mouse events and refresh the ConsoleManager. * @returns {Control} The instance of the Control. * @memberof Control */ hide(): Control; /** * @description This function is used to get the visibility of the Control. * @returns {boolean} The visibility of the Control. * @memberof Control */ isVisible(): boolean; /** * @description This function is used to get the focus status of the Control. * @returns {boolean} The focused status of the Control. * @memberof Control */ isFocused(): boolean; /** * @description This function is used to add the Control key listener callback to te ConsoleManager. * @returns {Control} The instance of the Control. * @memberof Control */ private manageInput; /** * @description This function is used to remove the Control key listener callback to te ConsoleManager. * @returns {Control} The instance of the Control. * @memberof Control */ private unManageInput; /** * @description This function is used to manage the mouse events on the Control. * @param {MouseEvent} event - The string of the input. * @memberof Control */ private mouseListener; /** * @description This function is used to draw a single line of the widget to the screen. It also trim the line if it is too long. * @param {Array<StyledElement>} line the line to be drawn * @memberof Control * @returns {void} */ private drawLine; /** * @description This function is used to draw the Control to the screen in the middle. * @returns {Control} The instance of the Control. * @memberof Control */ draw(): Control; } export default Control; //# sourceMappingURL=Control.d.ts.map