Fixed some GUI issues

packages/loader/src/resource-deserialize/resources/parser/HierarchyParser.ts

@@ -1,4 +1,4 @@
-import { Entity, Engine, Loader, Scene } from "@galacean/engine-core";
+import { Engine, Entity, Loader, Scene, Transform } from "@galacean/engine-core";
 import type { IEntity, IHierarchyFile, IRefEntity, IStrippedEntity } from "../schema";
 import { ReflectionParser } from "./ReflectionParser";
 import { ParserContext, ParserType } from "./ParserContext";
@@ -220,7 +220,8 @@
   }
 
   private _parseEntity(entityConfig: IEntity, engine: Engine): Promise<Entity> {
-    const entity = new Entity(engine, entityConfig.name);
+    const transform = entityConfig.transform;
+    const entity = new Entity(engine, entityConfig.name, transform ? Loader.getClass(transform.class) : Transform);
     if (!entityConfig.parent) this.context.rootIds.push(entityConfig.id);
 
     return Promise.resolve(entity);
@@ -288,11 +289,17 @@
   private _applyEntityData(entity: Entity, entityConfig: IEntity = {}): Entity {
     entity.isActive = entityConfig.isActive ?? entity.isActive;
     entity.name = entityConfig.name ?? entity.name;
-    const { position, rotation, scale, layer } = entityConfig;
-    if (position) entity.transform.position.copyFrom(position);
-    if (rotation) entity.transform.rotation.copyFrom(rotation);
-    if (scale) entity.transform.scale.copyFrom(scale);
-    if (layer) entity.layer = layer;
+    const transform = entity.transform;
+    const transformConfig = entityConfig.transform;
+    if (transformConfig) {
+      this._reflectionParser.parsePropsAndMethods(transform, transformConfig);
+    } else {
+      const { position, rotation, scale } = entityConfig;
+      if (position) transform.position.copyFrom(position);
+      if (rotation) transform.rotation.copyFrom(rotation);
+      if (scale) transform.scale.copyFrom(scale);
+    }
+    if (entityConfig.layer) entity.layer = entityConfig.layer;
     return entity;
   }
 

packages/loader/src/resource-deserialize/resources/parser/ReflectionParser.ts

@@ -1,4 +1,4 @@
-import { EngineObject, Entity, Loader } from "@galacean/engine-core";
+import { EngineObject, Entity, Loader, Transform } from "@galacean/engine-core";
 import type {
   IAssetRef,
   IBasicType,
@@ -26,10 +26,16 @@
   parseEntity(entityConfig: IEntity): Promise<Entity> {
     return this._getEntityByConfig(entityConfig).then((entity) => {
       entity.isActive = entityConfig.isActive ?? true;
-      const { position, rotation, scale } = entityConfig;
-      if (position) entity.transform.position.copyFrom(position);
-      if (rotation) entity.transform.rotation.copyFrom(rotation);
-      if (scale) entity.transform.scale.copyFrom(scale);
+      const transform = entity.transform;
+      const transformConfig = entityConfig.transform;
+      if (transformConfig) {
+        this.parsePropsAndMethods(transform, transformConfig);
+      } else {
+        const { position, rotation, scale } = entityConfig;
+        if (position) transform.position.copyFrom(position);
+        if (rotation) transform.rotation.copyFrom(rotation);
+        if (scale) transform.scale.copyFrom(scale);
+      }
       entity.layer = entityConfig.layer ?? entity.layer;
       // @ts-ignore
       this._context.type === ParserType.Prefab && entity._markAsTemplate(this._context.resource);
@@ -162,7 +168,8 @@
           })
       );
     } else {
-      const entity = new Entity(engine, entityConfig.name);
+      const transform = entityConfig.transform;
+      const entity = new Entity(engine, entityConfig.name, transform ? Loader.getClass(transform.class) : Transform);
       return Promise.resolve(entity);
     }
   }

packages/loader/src/resource-deserialize/resources/schema/BasicSchema.ts

@@ -38,6 +38,7 @@ export type IMethodParams = Array<IBasicType> | IMethod;
 export interface IBasicEntity {
   name?: string;
   id?: string;
+  transform?: IComponent;
   components?: Array<IComponent>;
   isActive?: boolean;
   position?: IVector3;

packages/ui/src/component/UICanvas.ts

@@ -1,4 +1,5 @@
 import {
+  BoolUpdateFlag,
   Camera,
   CameraModifyFlags,
   Component,
@@ -91,6 +92,10 @@
   private _referenceResolutionPerUnit: number = 100;
   @ignoreClone
   private _hierarchyVersion: number = -1;
+  @ignoreClone
+  private _center: Vector3 = new Vector3();
+  @ignoreClone
+  private _centerDirtyFlag: BoolUpdateFlag;
 
   /**
    * The conversion ratio between reference resolution and unit for UI elements in this canvas.
@@ -219,6 +224,7 @@
     // @ts-ignore
     this._referenceResolution._onValueChanged = this._onReferenceResolutionChanged;
     this._rootCanvasListener = this._rootCanvasListener.bind(this);
+    this._centerDirtyFlag = entity.registerWorldChangeFlag();
   }
 
   raycast(ray: Ray, out: UIHitResult, distance: number = Number.MAX_SAFE_INTEGER): boolean {
@@ -260,7 +266,8 @@
     const { frameCount } = engine.time;
     // @ts-ignore
     const renderElement = (this._renderElement = engine._renderElementPool.get());
-    this._updateSortDistance(context.virtualCamera.position);
+    const virtualCamera = context.virtualCamera;
+    this._updateSortDistance(virtualCamera.isOrthographic, virtualCamera.position, virtualCamera.forward);
     renderElement.set(this.sortOrder, this._sortDistance);
     const { width, height } = engine.canvas;
     const renderers = this._getRenderers();
@@ -297,7 +304,7 @@
   /**
    * @internal
    */
-  _updateSortDistance(cameraPosition: Vector3): void {
+  _updateSortDistance(isOrthographic: boolean, cameraPosition: Vector3, cameraForward: Vector3): void {
     switch (this._realRenderMode) {
       case CanvasRenderMode.ScreenSpaceOverlay:
         this._sortDistance = 0;
@@ -306,7 +313,13 @@
         this._sortDistance = this._distance;
         break;
       case CanvasRenderMode.WorldSpace:
-        this._sortDistance = Vector3.distance(cameraPosition, this.entity.transform.worldPosition);
+        const boundsCenter = this._getCenter();
+        if (isOrthographic) {
+          Vector3.subtract(boundsCenter, cameraPosition, boundsCenter);
+          this._sortDistance = Vector3.dot(boundsCenter, cameraForward);
+        } else {
+          this._sortDistance = Vector3.distanceSquared(boundsCenter, cameraPosition);
+        }
         break;
     }
   }
@@ -575,6 +588,18 @@
     }
   }
 
+  private _getCenter(): Vector3 {
+    if (this._centerDirtyFlag.flag) {
+      const center = this._center;
+      const uiTransform = <UITransform>this.entity.transform;
+      const { pivot, size } = uiTransform;
+      center.set((0.5 - pivot.x) * size.x, (0.5 - pivot.y) * size.y, 0);
+      Vector3.transformCoordinate(center, uiTransform.worldMatrix, center);
+      this._centerDirtyFlag.flag = false;
+    }
+    return this._center;
+  }
+
   private _getRealRenderMode(): number {
     if (this._isRootCanvas) {
       const mode = this._renderMode;

packages/ui/src/component/advanced/Text.ts

@@ -228,6 +228,7 @@ export class Text extends UIRenderer implements ITextRenderer {
     const { engine } = this;
     // @ts-ignore
     this.font = engine._textDefaultFont;
+    this.raycastEnabled = false;
     // @ts-ignore
     this.setMaterial(engine._basicResources.textDefaultMaterial);
   }

packages/ui/src/component/interactive/UIInteractive.ts

@@ -154,7 +154,7 @@
   override onDestroy(): void {
     super.onDestroy();
     const transitions = this._transitions;
-    for (let i = 0, n = transitions.length; i < n; i++) {
+    for (let i = transitions.length - 1; i >= 0; i--) {
       transitions[i].destroy();
     }
   }

packages/ui/src/component/interactive/transition/ColorTransition.ts

@@ -33,19 +33,31 @@
   }
 
   private _onNormalValueChanged(): void {
-    this._finalState === InteractiveState.Normal && this._updateValue();
+    if (this._finalState === InteractiveState.Normal) {
+      this._finalValue ||= this._normal;
+      this._updateValue();
+    }
   }
 
   private _onHoverValueChanged(): void {
-    this._finalState === InteractiveState.Hover && this._updateValue();
+    if (this._finalState === InteractiveState.Hover) {
+      this._finalValue ||= this._hover;
+      this._updateValue();
+    }
   }
 
   private _onPressedValueChanged(): void {
-    this._finalState === InteractiveState.Pressed && this._updateValue();
+    if (this._finalState === InteractiveState.Pressed) {
+      this._finalValue ||= this._pressed;
+      this._updateValue();
+    }
   }
 
   private _onDisabledValueChanged(): void {
-    this._finalState === InteractiveState.Disable && this._updateValue();
+    if (this._finalState === InteractiveState.Disable) {
+      this._finalValue ||= this._disabled;
+      this._updateValue();
+    }
   }
 
   protected _getTargetValueCopy(): Color {

packages/ui/src/component/interactive/transition/SpriteTransition.ts

@@ -44,6 +44,6 @@
   }
 
   protected override _applyValue(value: Sprite): void {
-    this._target.sprite = value || this._normal;
+    this._target.sprite = value;
   }
 }

packages/ui/src/index.ts

@@ -4,14 +4,25 @@
   CullMode,
   Engine,
   Entity,
+  Font,
   IClass,
+  Loader,
   Material,
   PipelineStage,
   ReflectionParser,
   RenderQueueType,
   Shader,
   ShaderPass
 } from "@galacean/engine";
+import { UICanvas } from ".";
+import { UIGroup } from "./component/UIGroup";
+import { UITransform } from "./component/UITransform";
+import { Button } from "./component/advanced/Button";
+import { Image } from "./component/advanced/Image";
+import { Text } from "./component/advanced/Text";
+import { ColorTransition } from "./component/interactive/transition/ColorTransition";
+import { ScaleTransition } from "./component/interactive/transition/ScaleTransition";
+import { SpriteTransition } from "./component/interactive/transition/SpriteTransition";
 import uiDefaultFs from "./shader/uiDefault.fs.glsl";
 import uiDefaultVs from "./shader/uiDefault.vs.glsl";
 
@@ -110,3 +121,18 @@
   }
   return instance;
 });
+
+/**
+ * Register GUI components for the editor.
+ */
+export function registerGUI() {
+  Loader.registerClass("Text", Text);
+  Loader.registerClass("Image", Image);
+  Loader.registerClass("Button", Button);
+  Loader.registerClass("UIGroup", UIGroup);
+  Loader.registerClass("UICanvas", UICanvas);
+  Loader.registerClass("UITransform", UITransform);
+  Loader.registerClass("ScaleTransition", ScaleTransition);
+  Loader.registerClass("ColorTransition", ColorTransition);
+  Loader.registerClass("SpriteTransition", SpriteTransition);
+}

packages/ui/src/input/UIPointerEventEmitter.ts

@@ -66,11 +66,12 @@
         camera.screenPointToRay(pointer.position, ray);
 
         /** Other canvases */
-        const cameraPosition = camera.entity.transform.position;
+        const isOrthographic = camera.isOrthographic;
+        const { worldPosition: cameraPosition, worldForward: cameraForward } = camera.entity.transform;
         /** Sort by rendering order */
         canvasElements = componentsManager._canvases;
         for (let k = 0, n = canvasElements.length; k < n; k++) {
-          canvasElements.get(k)._updateSortDistance(cameraPosition);
+          canvasElements.get(k)._updateSortDistance(isOrthographic, cameraPosition, cameraForward);
         }
         canvasElements.sort((a, b) => a.sortOrder - b.sortOrder || a._sortDistance - b._sortDistance);
         for (let k = 0, n = canvasElements.length; k < n; k++) {
@@ -80,7 +81,7 @@
         /** Post-rendering first detection */
         for (let k = 0, n = canvasElements.length; k < n; k++) {
           const canvas = canvasElements.get(k);
-          if (canvas.renderCamera !== camera) continue;
+          if (!canvas._canRender(camera)) continue;
           if (canvas.raycast(ray, hitResult, farClipPlane)) {
             this._updateRaycast((<UIHitResult>hitResult).component, pointer);
             return;