Auto Draft

3
(2)
Created on September 03, 2019, Last modified on June 08, 2021

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());

Give feedback

Rating - 3 / 5. . Reviews - 2

No votes so far! Be the first to rate this post.

Go To Top