Patch

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

The Element method patch(object : Object, createMode : Boolean) allows you to patch a part of the render tree. It is able to set multiple properties for multiple views in a single statement.

this.patch({
    Parent: {
        x: 150, alpha: 0.5,
        Child: {
            x: 100, y: 100
        }
    }
});

A patch object has an identical structure to the template. A patch can also be called directly on a sub element:

this.tag("Parent").patch(
    x: 150, alpha: 0.5,
    Child: {
        x: 100, y: 100
    }
});

Adding new elements

By default, only properties of existing elements can be changed. If one of element references is unknown, an error is thrown. This is done to protect you from using the wrong references accidentally, creating new unnecessary elements. If you'd like to allow creating new elements in your patch, you can supply true as the createMode argument.

Removing elements

You can remove an element by setting undefined instead of the settings object:

this.tag("Parent").patch(
    x: 150, alpha: 0.5,
    Child: undefined
});

Live demo

Below an example of how to .patch() an object x-position. Use the left or right key to move the object to its new position.

class BasicUsageExample extends lng.Application {
    static _template() {
        return {
            LilLightning:{ x: 100, y: 100, src: '/Lightning/img/LngDocs_LilLightningIdle.png' }
        }
    }
    
    _handleLeft(){
        this.tag('LilLightning').patch({ x: 100 });
    }
     
    _handleRight(){
        this.tag('LilLightning').patch({ x: 400 });
    }
}


const options = {stage: {w: window.innerWidth, h: window.innerHeight, clearColor: 0x00000000, canvas2d: false, useImageWorker: false}, debug: true}
options.keys = {
    38: "Up",
    40: "Down",
    37: "Left",
    39: "Right",
    13: "Enter",
    9: "Back",
    8: "Back",
    93: "Back",
    174: "Back",
    175: "Menu",
    83: "Search"
};
const app = new BasicUsageExample(options);
document.body.appendChild(app.stage.getCanvas());