Update GUI (#36)

Opt: unified coordinate system

packages/core/src/2d/assembler/ISpriteAssembler.ts

@@ -13,8 +13,7 @@ export interface ISpriteAssembler {
     height: number,
     pivot: Vector2,
     flipX?: boolean,
-    flipY?: boolean,
-    pixelsPerUnit?: number
+    flipY?: boolean
   ): void;
   updateUVs(renderer: ISpriteRenderer): void;
   updateColor(renderer: ISpriteRenderer, alpha?: number): void;

packages/core/src/2d/assembler/SlicedSpriteAssembler.ts

@@ -32,18 +32,16 @@ export class SlicedSpriteAssembler {
     height: number,
     pivot: Vector2,
     flipX: boolean = false,
-    flipY: boolean = false,
-    pixelsPerUnit: number = 1
+    flipY: boolean = false
   ): void {
     const { sprite } = renderer;
     const { border } = sprite;
     // Update local positions.
     const spritePositions = sprite._getPositions();
     const { x: left, y: bottom } = spritePositions[0];
     const { x: right, y: top } = spritePositions[3];
-    const pixelsPerUnitReciprocal = 1 / pixelsPerUnit;
-    const expectWidth = sprite.width * pixelsPerUnitReciprocal;
-    const expectHeight = sprite.height * pixelsPerUnitReciprocal;
+    const expectWidth = sprite.width;
+    const expectHeight = sprite.height;
     const fixedLeft = expectWidth * border.x;
     const fixedBottom = expectHeight * border.y;
     const fixedRight = expectWidth * border.z;

packages/core/src/2d/assembler/TiledSpriteAssembler.ts

@@ -39,14 +39,13 @@ export class TiledSpriteAssembler {
     height: number,
     pivot: Vector2,
     flipX: boolean = false,
-    flipY: boolean = false,
-    pixelsPerUnit: number = 1
+    flipY: boolean = false
   ): void {
     // Calculate row and column
     const { _posRow: rPos, _posColumn: cPos, _uvRow: rUV, _uvColumn: cUV } = TiledSpriteAssembler;
     TiledSpriteAssembler.resetData(
       renderer,
-      TiledSpriteAssembler._calculateDividing(renderer, width, height, rPos, cPos, rUV, cUV, 1 / pixelsPerUnit)
+      TiledSpriteAssembler._calculateDividing(renderer, width, height, rPos, cPos, rUV, cUV)
     );
     // Update renderer's worldMatrix
     const { x: pivotX, y: pivotY } = pivot;
@@ -173,8 +172,7 @@ export class TiledSpriteAssembler {
     rPos: DisorderedArray<number>,
     cPos: DisorderedArray<number>,
     rUV: DisorderedArray<number>,
-    cUV: DisorderedArray<number>,
-    pixelsPerUnitReciprocal: number = 1
+    cUV: DisorderedArray<number>
   ): number {
     rPos.length = cPos.length = rUV.length = cUV.length = 0;
     const { sprite, tiledAdaptiveThreshold: threshold } = renderer;
@@ -183,8 +181,8 @@ export class TiledSpriteAssembler {
     const { x: left, y: bottom } = spritePositions[0];
     const { x: right, y: top } = spritePositions[3];
     const [spriteUV0, spriteUV1, spriteUV2, spriteUV3] = sprite._getUVs();
-    const expectWidth = sprite.width * pixelsPerUnitReciprocal;
-    const expectHeight = sprite.height * pixelsPerUnitReciprocal;
+    const expectWidth = sprite.width;
+    const expectHeight = sprite.height;
     const fixedL = expectWidth * border.x;
     const fixedR = expectWidth * border.z;
     const fixedLR = fixedL + fixedR;

packages/core/src/2d/sprite/Sprite.ts

@@ -279,10 +279,15 @@ export class Sprite extends ReferResource {
   private _calDefaultSize(): void {
     if (this._texture) {
       const { _texture, _atlasRegion, _atlasRegionOffset, _region } = this;
+      const pixelsPerUnitReciprocal = 1.0 / Engine._pixelsPerUnit;
       this._automaticWidth =
-        ((_texture.width * _atlasRegion.width) / (1 - _atlasRegionOffset.x - _atlasRegionOffset.z)) * _region.width;
+        ((_texture.width * _atlasRegion.width) / (1 - _atlasRegionOffset.x - _atlasRegionOffset.z)) *
+        _region.width *
+        pixelsPerUnitReciprocal;
       this._automaticHeight =
-        ((_texture.height * _atlasRegion.height) / (1 - _atlasRegionOffset.y - _atlasRegionOffset.w)) * _region.height;
+        ((_texture.height * _atlasRegion.height) / (1 - _atlasRegionOffset.y - _atlasRegionOffset.w)) *
+        _region.height *
+        pixelsPerUnitReciprocal;
     } else {
       this._automaticWidth = this._automaticHeight = 0;
     }

packages/core/src/2d/sprite/SpriteMask.ts

@@ -1,5 +1,4 @@
 import { BoundingBox } from "@galacean/engine-math";
-import { Engine } from "../../Engine";
 import { Entity } from "../../Entity";
 import { RenderQueueFlags } from "../../RenderPipeline/BasicRenderPipeline";
 import { BatchUtils } from "../../RenderPipeline/BatchUtils";
@@ -329,9 +328,8 @@ export class SpriteMask extends Renderer implements ISpriteRenderer {
   private _calDefaultSize(): void {
     const sprite = this._sprite;
     if (sprite) {
-      const pixelsPerUnitReciprocal = 1 / Engine._pixelsPerUnit;
-      this._automaticWidth = sprite.width * pixelsPerUnitReciprocal;
-      this._automaticHeight = sprite.height * pixelsPerUnitReciprocal;
+      this._automaticWidth = sprite.width;
+      this._automaticHeight = sprite.height;
     } else {
       this._automaticWidth = this._automaticHeight = 0;
     }

packages/core/src/2d/sprite/SpriteRenderer.ts

@@ -1,5 +1,4 @@
 import { BoundingBox, Color, MathUtil } from "@galacean/engine-math";
-import { Engine } from "../../Engine";
 import { Entity } from "../../Entity";
 import { BatchUtils } from "../../RenderPipeline/BatchUtils";
 import { PrimitiveChunkManager } from "../../RenderPipeline/PrimitiveChunkManager";
@@ -354,8 +353,7 @@ export class SpriteRenderer extends Renderer implements ISpriteRenderer {
         this.height,
         sprite.pivot,
         this._flipX,
-        this._flipY,
-        Engine._pixelsPerUnit
+        this._flipY
       );
       this._dirtyUpdateFlag &= ~SpriteRendererUpdateFlags.Position;
     }
@@ -404,9 +402,8 @@ export class SpriteRenderer extends Renderer implements ISpriteRenderer {
   private _calDefaultSize(): void {
     const sprite = this._sprite;
     if (sprite) {
-      const pixelsPerUnitReciprocal = 1 / Engine._pixelsPerUnit;
-      this._automaticWidth = sprite.width * pixelsPerUnitReciprocal;
-      this._automaticHeight = sprite.height * pixelsPerUnitReciprocal;
+      this._automaticWidth = sprite.width;
+      this._automaticHeight = sprite.height;
     } else {
       this._automaticWidth = this._automaticHeight = 0;
     }

packages/core/src/2d/text/ITextRenderer.ts

@@ -4,5 +4,6 @@ import { SubFont } from "./SubFont";
 export interface ITextRenderer {
   text: string;
   overflowMode: OverflowMode;
+  lineSpacing: number;
   _getSubFont(): SubFont;
 }

packages/ui/src/component/UICanvas.ts

@@ -79,7 +79,7 @@ export class UICanvas extends Component implements IElement {
   @ignoreClone
   private _distance: number = 10;
   @deepClone
-  private _referenceResolution: Vector2 = new Vector2(800, 600);
+  private _referenceResolution: Vector2 = new Vector2(8, 6);
   @ignoreClone
   private _hierarchyVersion: number = -1;
 

packages/ui/src/component/UITransform.ts

@@ -5,7 +5,7 @@ import { Entity, Transform, Vector2, deepClone, ignoreClone } from "@galacean/en
  */
 export class UITransform extends Transform {
   @deepClone
-  private _size: Vector2 = new Vector2(100, 100);
+  private _size: Vector2 = new Vector2(1, 1);
   @deepClone
   private _pivot: Vector2 = new Vector2(0.5, 0.5);
 

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

@@ -12,7 +12,6 @@ import {
   SpriteModifyFlags,
   SpriteTileMode,
   TiledSpriteAssembler,
-  Vector2,
   assignmentClone,
   ignoreClone
 } from "@galacean/engine";

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

@@ -1,6 +1,7 @@
 import {
   BoundingBox,
   CharRenderInfo,
+  Engine,
   Entity,
   Font,
   FontStyle,
@@ -414,17 +415,24 @@ export class Label extends UIRenderer implements ITextRenderer {
   }
 
   private _updateLocalData(): void {
+    // @ts-ignore
+    const pixelsPerUnit = Engine._pixelsPerUnit;
     const { min, max } = this._localBounds;
     const charRenderInfos = Label._charRenderInfos;
     const charFont = this._getSubFont();
     const { size, pivot } = <UITransform>this._transformEntity.transform;
-    const rendererWidth = size.x;
-    const rendererHeight = size.y;
+    let rendererWidth = size.x;
+    let rendererHeight = size.y;
     const offsetWidth = rendererWidth * (0.5 - pivot.x);
     const offsetHeight = rendererHeight * (0.5 - pivot.y);
     const textMetrics = this.enableWrapping
-      ? TextUtils.measureTextWithWrap(this, rendererWidth, rendererHeight, this._lineSpacing)
-      : TextUtils.measureTextWithoutWrap(this, rendererHeight, this._lineSpacing);
+      ? TextUtils.measureTextWithWrap(
+          this,
+          rendererWidth * pixelsPerUnit,
+          rendererHeight * pixelsPerUnit,
+          this._lineSpacing * pixelsPerUnit
+        )
+      : TextUtils.measureTextWithoutWrap(this, rendererHeight * pixelsPerUnit, this._lineSpacing * pixelsPerUnit);
     const { height, lines, lineWidths, lineHeight, lineMaxSizes } = textMetrics;
     // @ts-ignore
     const charRenderInfoPool = this.engine._charRenderInfoPool;
@@ -433,6 +441,9 @@ export class Label extends UIRenderer implements ITextRenderer {
 
     if (linesLen > 0) {
       const { horizontalAlignment } = this;
+      const pixelsPerUnitReciprocal = 1.0 / pixelsPerUnit;
+      rendererWidth *= pixelsPerUnit;
+      rendererHeight *= pixelsPerUnit;
       const halfRendererWidth = rendererWidth * 0.5;
       const halfLineHeight = lineHeight * 0.5;
 
@@ -486,10 +497,10 @@ export class Label extends UIRenderer implements ITextRenderer {
               charRenderInfo.texture = charFont._getTextureByIndex(charInfo.index);
               charRenderInfo.uvs = charInfo.uvs;
               const { w, ascent, descent } = charInfo;
-              const left = startX + offsetWidth;
-              const right = startX + w + offsetWidth;
-              const top = startY + ascent + offsetHeight;
-              const bottom = startY - descent + offsetHeight;
+              const left = (startX + offsetWidth) * pixelsPerUnitReciprocal;
+              const right = (startX + w + offsetWidth) * pixelsPerUnitReciprocal;
+              const top = (startY + ascent + offsetHeight) * pixelsPerUnitReciprocal;
+              const bottom = (startY - descent + offsetHeight) * pixelsPerUnitReciprocal;
               localPositions.set(left, top, right, bottom);
               i === firstLine && (maxY = Math.max(maxY, top));
               minY = Math.min(minY, bottom);

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

@@ -50,6 +50,13 @@ export class UIInteractive extends Script implements IGroupAble {
   private _isPointerInside: boolean = false;
   private _isPointerDragging: boolean = false;
 
+  /**
+   * The transitions of this interactive.
+   */
+  get transitions(): Readonly<Transition[]> {
+    return this._transitions;
+  }
+
   /**
    * Whether the interactive is enabled.
    */
@@ -83,48 +90,45 @@ export class UIInteractive extends Script implements IGroupAble {
   }
 
   /**
-   * Get transition which match the type.
-   * @param type - The type of the transition
-   * @returns	Transitions which match type
+   * Add transition on this interactive.
+   * @param transition - The transition
    */
-  getTransitions<T extends Transition>(type: new (interactive: UIInteractive) => T, results: T[]): T[] {
-    results.length = 0;
-    const transitions = this._transitions;
-    for (let i = 0, n = transitions.length; i < n; i++) {
-      const transition = transitions[i];
-      if (transition instanceof type) {
-        results.push(transition);
-      }
+  addTransition(transition: Transition): void {
+    const interactive = transition._interactive;
+    if (interactive !== this) {
+      interactive?.removeTransition(transition);
+      this._transitions.push(transition);
+      transition._interactive = this;
+      transition._setState(this._state, true);
     }
-    return results;
   }
 
   /**
-   * Get transition which match the type.
-   * @param type - The type of the transition
-   * @returns	The first transition which match type
+   * Remove a transition.
+   * @param shape - The transition.
    */
-  getTransition<T extends Transition>(type: new (interactive: UIInteractive) => T): T | null {
+  removeTransition(transition: Transition): void {
     const transitions = this._transitions;
-    for (let i = 0, n = transitions.length; i < n; i++) {
-      const transition = transitions[i];
-      if (transition instanceof type) {
-        return transition;
+    const lastOneIndex = transitions.length - 1;
+    for (let i = lastOneIndex; i >= 0; i--) {
+      if (transitions[i] === transition) {
+        i !== lastOneIndex && (transitions[i] = transitions[lastOneIndex]);
+        transitions.length = lastOneIndex;
+        transition._interactive = null;
+        break;
       }
     }
-    return null;
   }
 
   /**
-   * Add transition based on the transition type.
-   * @param type - The type of the transition
-   * @returns	The transition which has been added
+   * Remove all transitions.
    */
-  addTransition<T extends new (interactive: UIInteractive) => Transition>(type: T): InstanceType<T> {
-    const transition = new type(this) as InstanceType<T>;
-    this._transitions.push(transition);
-    transition._setState(this._state, true);
-    return transition;
+  clearShapes(): void {
+    const transitions = this._transitions;
+    for (let i = 0, n = transitions.length; i < n; i++) {
+      transitions[i]._interactive = null;
+    }
+    transitions.length = 0;
   }
 
   override onUpdate(deltaTime: number): void {
@@ -198,21 +202,6 @@ export class UIInteractive extends Script implements IGroupAble {
     this._isPointerInside = this._isPointerDragging = false;
   }
 
-  /**
-   * @internal
-   */
-  _removeTransition(transition: Transition): void {
-    const transitions = this._transitions;
-    const lastOneIndex = transitions.length - 1;
-    for (let i = lastOneIndex; i >= 0; i--) {
-      if (transitions[i] === transition) {
-        i !== lastOneIndex && (transitions[i] = transitions[lastOneIndex]);
-        transitions.length = lastOneIndex;
-        break;
-      }
-    }
-  }
-
   /**
    * @internal
    */

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

@@ -1,15 +1,15 @@
 import { Color } from "@galacean/engine";
 import { UIRenderer } from "../../UIRenderer";
+import { InteractiveState } from "../UIInteractive";
 import { Transition } from "./Transition";
-import { InteractiveState, UIInteractive } from "../UIInteractive";
 
 /**
  * Color transition.
  */
 export class ColorTransition extends Transition<Color, UIRenderer> {
   private _color: Color = new Color();
-  constructor(interactive: UIInteractive) {
-    super(interactive);
+  constructor() {
+    super();
     this._normal = new Color(1, 1, 1, 1);
     this._hover = new Color(245 / 255, 245 / 255, 245 / 255, 1);
     this._pressed = new Color(200 / 255, 200 / 255, 200 / 255, 1);

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

@@ -1,13 +1,12 @@
 import { UIRenderer } from "../../UIRenderer";
-import { UIInteractive } from "../UIInteractive";
 import { Transition } from "./Transition";
 
 /**
  * Scale transition.
  */
 export class ScaleTransition extends Transition<number, UIRenderer> {
-  constructor(interactive: UIInteractive) {
-    super(interactive);
+  constructor() {
+    super();
     this._normal = 1;
     this._hover = 1;
     this._pressed = 1.2;