Custom Attribute Panel

1. Basic Concept

In Wings Engine’s secondary development, custom public attributes will automatically generate corresponding settings items, while private attributes will not. Private attributes are those starting with #, whereas public attributes include directly defined public attributes and those defined through getter methods. Public attributes can be either directly defined attributes or getter functions.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

class ExtensionSample {
  //Private attributes will not generate setting items
  #a = 1;
  //Public attributes will generate setting items
  abc = "123";
  //Public getters will generate setting items
  get a() {
    return this.#a;
  }
  //If there is no setter, the generated setting item will be read-only
  set a(a) {
    this.#a = a;
  }
}
export default ExtensionSample;

The code above will generate the following settings items:

The generated settings items can be further manually adjusted.

Currently, Wings Engine supports generating various settings items such as component selection, color selection, drop-down boxes, etc. For more details, refer to the API documentation.

Extension Custom Attribute

2. Listening for Changes

When attribute values in the attribute panel are modified, you may want to respond to these changes in your secondary development code in real-time. For this, you need to use the onPropertyChanged method, as shown below:

1
2
3
4
5
6
7
8
9
10

class ExtensionSample {
  //Public attributes will generate setting items
  abc = "123";
  onPropertyChanged(property) {
    if (property == "abc") {
      console.log(this.abc);
    }
  }
}
export default ExtensionSample;

Whenever an attribute value is modified, it will be printed to the debug information.