@galacean/editor-decorators NPM

editor-decorators

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

Installation

npm install @galacean/editor-decorators

Usage

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`

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
max	number	-	Maximum value
min	number	-	Minimum value
dragStep	number	-	Step value when dragging

`SliderOptions`

Name	Type	Required	Description
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

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