Signal

Published: September 03, 2019
Edited: September 03, 2019

Signal tells the parent component that some event happened on this component, and offers the parent the opportunity to route the event to a handler.

Usage:

this.signal('signalName', arg1, arg2... argx)

The parent component is required to define which signals must be handled by specifying it in the signals property. This contains a literal object which maps the signal name to a class method (if true, then the same method name is used).

static _template() {
    return {
        Button: {
            type: ExampleButton,
            signals: {
                toggleText: "_toggleText"
            }
        }
    }
    
    _toggleText() {
        // Handle toggle here.
    }
}

Pass signals

Sometimes you might want to pass over a signal to the parent. You could implement this by providing a handler which re-signals the signal, but it can be achieved more conveniently by using the passSignals property:

static _template() {
    return {
        Button: {
            type: ExampleButton,
            passSignals: {
                toggleText: true, otherSignal: 'renamedOtherSignal'
            }
        }
    }
}

Live demo

In this example, we will show a button that signals its parent to show/hide a message, using its parameters to change the font color as well.

class SignalDemo extends lng.Application {
    static _template() {
        return {
            x: 20, y: 20,
            Button: {
                type: ExampleButton,
                buttonText: 'Toggle',
                //indicates the signals that your child component will send
                signals: {
                    toggleText: true,
                }
            },
            Message: {
                y: 80, alpha: 0, text: { text: 'Message' }
            }
        }
    }
    toggleText(alpha, color) {
        this.tag('Message').patch({color, smooth: { alpha }})
    }
    _getFocused() {
        return this.tag('Button')
    }
}

class ExampleButton extends lng.Component {
    static _template() {
        return {
            color: 0xffffffff,
            texture: lng.Tools.getRoundRect(200, 40, 4),
            Label: {
                x: 100, y: 22, mount: .5, color: 0xff1f1f1f, text: { fontSize: 20 }
            }
        }
    }
    _init() {
        this.tag('Label').patch({ text: { text: this.buttonText }})
        this.toggle = false
        this.buttonColor = 0xffff00ff
    }
    _handleEnter() {
        this.toggle = !this.toggle
        if(this.toggle) {
            this.buttonColor = this.buttonColor === 0xffff00ff ? 0xff00ffff : 0xffff00ff
        }
        this.signal('toggleText', this.toggle, this.buttonColor)
    }
}

const app = new SignalDemo({stage: {w: window.innerWidth, h: window.innerHeight, useImageWorker: false}});
document.body.appendChild(app.stage.getCanvas());