Widgets for NTK

[aurium]

What about depending on Zebra to define interactive window elements and structure? I mean by default, as a feature.

[sidorares]

Interesting. Need to figure out how easy is to use components from Zebra without DOM. Also canvas is very partially implemented here ntk

[RossComputerGuy]

I can integrate the widget code from my desktop environment's toolkit.

[sidorares]

@SpaceboyRoss01 what toolkit is that?

[RossComputerGuy]

Well, I finished writing a widget class. I haven't fully written it https://github.com/Ross-Technologies/RDE-Toolkit.

const EventEmitter = require("events");

function isMouseInWidget(w,ev) {
    ev.x -= w.x;
    ev.y -= w.y;
    return (ev.x >= 0 && ev.x < w.width) && (ev.y >= 0 && ev.y < w.height);
}

class Widget extends EventEmitter {
    constructor(window,opts={}) {
        super();
        this.window = window;
        this.widgets = {};

        this.width = opts.width || 0;
        this.height = opts.height || 0;
        this.x = opts.x || 0;
        this.y = opts.y || 0;
        this.id = opts.id || null;
        this.active = false;

        this.windows.on("keydown",ev => {
            if(this.active) this.emit("keydown",ev);
        });

        this.windows.on("keyup",ev => {
            if(this.active) this.emit("keyup",ev);
        });

        this.windows.on("mousedown",ev => {
            if(isMouseInWidget(this,ev)) {
                ev.x -= this.x;
                ev.y -= this.y;
                this.emit("mousedown",ev);
            }
        });

        this.windows.on("mouseup",ev => {
            if(isMouseInWidget(this,ev)) {
                ev.x -= this.x;
                ev.y -= this.y;
                this.emit("mouseup",ev);
            }
        });

        this.windows.on("mousemove",ev => {
            if(isMouseInWidget(this,ev)) {
                ev.x -= this.x;
                ev.y -= this.y;
                this.emit("mousemove",ev);
            }
        });

        this.windows.on("mouseover",ev => {
            if(isMouseInWidget(this,ev)) {
                ev.x -= this.x;
                ev.y -= this.y;
                this.emit("mouseover",ev);
            }
        });

        this.windows.on("mouseout",ev => {
            if(isMouseInWidget(this,ev)) {
                ev.x -= this.x;
                ev.y -= this.y;
                this.emit("mouseout",ev);
            }
        });
    }
    findWidgetByID(id) {
        for(var wID in this.widgets) {
            if(wID == id) return this.widgets[wID];
        }
    }
    render() {
        // Render this widget before the child widgets
        this.emit("render");
        for(var wID in this.widgets) this.widgets[wID].render();
    }
}
module.exports = Widget;

[RossComputerGuy]

In a fork I made (https://github.com/Ross-Technologies/ntk) I added widgets.

[sidorares]

thanks, I'll have a look