@galacean/editor-decorators

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	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

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

SelectOptions

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