UI Methods

Some basic methods to modity Vanilla/Custom UI element

Override Methods

The override methods is in new instanced UI and new instanced Modify.override

setProperties

• Params:
  • properties: Properties
• Set properties to UI element

Example:

import { UI, Modify, Anchor, BindingType, BindingName } from "asajs";

const ui = UI.panel({
	size: [16, 16],
});
ui.setProperties({
	layer: 5,
	anchor: Anchor.TopRight,
});

const nekoUI_BG = Modify.register(".hans_common_files/.hans_animated_background.json", "bg_anim");

nekoUI_BG.override.setProperties({
	layer: -999,
}),

{
	"7272_ELEMENT_12": {
		"type": "panel",
		"size": [16, 16],
		"layer": 5,
		"anchor_from": "top_right",
		"anchor_to": "top_right"
	},
	"namespace": "d5dhririrb28db2"
}

// .hans_common_files/.hans_animated_background.json
{
	"bg_anim": {
		"layer": -999
	}
}

addChild

• Params:
  • element?: string | UI
  • properties?: Properties
  • name?: string
  • callback?: (args: UI, name: string) => void
• Add a child to element.

Example:

ui.addChild(
	UI.image(),
	{
		texture: "textures/ui/White",
	},
	"test"
);

nekoUI_BG.override.addChild(); // Use to override all controls by a empty array

{
	"7272_ELEMENT_12": {
		"controls": [
			{
				"test@d5dhririrb28db2.2526_ELEMENT_1": {
					"texture": "textures/ui/White"
				}
			}
		]
	},
	"2526_ELEMENT_1": {
		"type": "image"
	},
	"namespace": "d5dhririrb28db2"
}

{
	"bg_anim": { "controls": [] }
}

addBindings

• Params
  • bindings: BindingInterface | BindingInterface[]
• Add bindings to element.

Example:

ui.addBindings({
	binding_type: BindingType.View,
	source_control_name: "test_toggle",
	source_property_name: BindingName.ToggleState,
	target_property_name: BindingName.Visible,
});

{
	"7272_ELEMENT_12": {
		"bindings": [
			{
				"binding_type": "view",
				"source_control_name": "test_toggle",
				"source_property_name": "#toggle_state",
				"target_property_name": "#visible"
			}
		]
	}
}

• Learn more in Bindings

addVariables

• Params:
  • variables: object
• Add variables to element.

Example:

ui.addVariables({
	"$condition_variables": {
		"$example_variables_1": false,
		"$example_variables_2": 20,
	},
});

{
	"7272_ELEMENT_12": {
		"variables": [
			{
				"required": "$condition_variables",
				"$example_variables_1": false,
				"$example_variables_2": 20
			}
		]
	}
}

Modify Methods

Modify methods is modify the UI element but not override origin properties of this element.

Controls

The modify methods which use to modify child controls in UI element but no override oringin controls property.

• insertFront/insertBack
• Likes addChild , it modify new child control to element at front/back.

Example:

nekoUI_BG.modify.insertFront(UI.panel());

{
	"bg_anim": {
		"modifications": [
			{
				"operation": "insert_front",
				"array_name": "controls",
				"value": [
					{
						"test@d5dhririrb28db2.2526_ELEMENT_1": {}
					}
				]
			}
		]
	}
}

• replace/insertBefore/insertAfter
• Starting from child name, it will replace/prepend/postpend by a new element but it not override the original property.

Example:

nekoUI_BG.modify.controls.replace("old_control", UI.panel(), {}, "new_control");
nekoUI_BG.modify.controls.insertBefore("new_control", UI.image());

{
	"bg_anim": {
		"modifications": [
			{
				"operation": "replace",
				"control_name": "old_control",
				"value": [
					{
						"new_control@d5dhririrb28db2.2526_ELEMENT_1": {}
					}
				]
			},
			{
				"operation": "insert_before",
				"control_name": "new_control",
				"value": [
					{
						"2g2usuen2jeiei@d5dhririrb28db2.2526_ELEMENT_2": {}
					}
				]
			}
		]
	}
}

• moveBack/moveFront/moveBefore/moveAffter/remove
• By child name, it move back/front/before/after or remove the child element have that name.

Example:

nekoUI_BG.modify.controls.remove("so_tired...", /* not thing here! */);
// ...

Bindings

The method to modify the bindings property, there have:

• addBindings: But not override origin property.
• remove: Not recommended to use, if you know what you do.

Example:

nekoUI_BG.modify.bindings.addBindings({
	// Bindings
});

Variables

Currently this features is not available.

Advanced

• getElement, getFullPath, getPath, getUI
• For debugger

Example:

import { UI, Modify, Anchor } from "asajs";

const ui = UI.panel({
    anchor: Anchor.Center,
    w: 100,
});

console.log("element:", ui.getElement());
console.log("full path:", ui.getFullPath());
console.log("path:", ui.getPath());
console.log("ui:", ui.getUI());

Output:

element: @27B7D_NAMESPACE_1.27B7D_ELEMENT_1
full path: 27B7D_ELEMENT_1
path: 27B7D_NAMESPACE_1.27B7D_ELEMENT_1
ui: {
  size: [ 100, 0 ],
  anchor_from: 'center',
  anchor_to: 'center',
  type: 'panel'
}

Contributors