npm package: @galacean/editor-decorators
Description: A collection of decorator functions helps you write scripts in Galacean Editor.
Author: Mrkou47
Latest version: 0.1.1

# editor-decorators

A collection of decorator functions helps you write scripts in Galacean Editor.

## Installation

```bash
npm install @galacean/editor-decorators
```

## Usage

```typescript
import { Script } from "@galacean/engine"
import { inspect } from "@galacean/editor-decorators"

export default class extends Script {
  @inspect("Number", {
    min: 1,
    max: 10,
  })
  rotate = 1

  onUpdate(deltaTime: number) {
    this.entity.transform.rotate(this.rotate, this.rotate, this.rotate)
  }
}
```

## API

### `inspect(type: ComponentType, options: ComponentOptions)`

This decorator exports the property to the Editor. It can be used on any property of a class. The property will be shown in the Inspector of the Editor.

#### `ComponenType`

```ts
type ComponentType =
  | "Input"
  | "Number"
  | "Slider"
  | "Boolean"
  | "Vector2"
  | "Vector3"
  | "Vector4"
  | "Rect"
  | "Color"
  | "AssetPicker"
  | "Select"
  | "SegmentControl"
  | "Textarea"
```

### Common options

| Name     | Type   | Required | Description                                                                                               | Default                            |
| -------- | ------ | -------- | --------------------------------------------------------------------------------------------------------- | ---------------------------------- |
| property | string | -        | The name according with EngineObject                                                                      | The name of the decorated property |
| label    | string | -        | Label for the value, would be shown in the Inspector                                                      |                                    |
| info     | string | -        | Additional information or a description about the GUI item.                                               |                                    |
| priority | number | -        | The priority of the GUI item. The higher the priority, the higher the item is displayed in the Inspector. |                                    |

### `NumberOptions`

| Name     | Type   | Required | Description              | Default |
| -------- | ------ | -------- | ------------------------ | ------- |
| max      | number | -        | Maximum value            |         |
| min      | number | -        | Minimum value            |         |
| dragStep | number | -        | Step value when dragging |         |

### `SliderOptions`

| Name     | Type   | Required | Description              | Default |
| -------- | ------ | -------- | ------------------------ | ------- |
| max      | number | -        | Maximum value            |         |
| min      | number | -        | Minimum value            |         |
| dragStep | number | -        | Step value when dragging |         |

### `AssetPickerOptions`

| Name      | Type        | Required | Description           | Default |
| --------- | ----------- | -------- | --------------------- | ------- |
| assetType | `AssetType` | ✓        | The type of the asset |         |

```ts
type AssetType =
  | "Scene"
  | "AnimationClip"
  | "Folder"
  | "AmbientLight"
  | "glTF"
  | "Texture2D"
  | "HDR"
  | "AnimatorController"
  | "Lottie"
  | "Spine"
  | "sprite"
  | "Font"
  | "script"
  | "Material"
  | "Mesh"
  | "Audio"
```

### `SelectOptions`

| Name    | Type                                 | Required | Description               | Default |
| ------- | ------------------------------------ | -------- | ------------------------- | ------- |
| options | `{ value: string, label: string }[]` | ✓        | The options of the select |         |