Add RectTool (#313)

package.json

@@ -74,7 +74,7 @@
   },
   "pnpm": {
     "overrides": {
-      "@galacean/engine": "^1.4.0-beta.2"
+      "@galacean/engine": "^1.4.0"
     }
   }
 }

packages/auxiliary-lines/package.json

@@ -24,7 +24,7 @@
     "types/**/*"
   ],
   "peerDependencies": {
-    "@galacean/engine": "^1.4.0-beta.2"
+    "@galacean/engine": "^1.4.0"
   },
   "dependencies": {
     "@galacean/engine-toolkit-custom-material": "workspace:*"

packages/auxiliary-lines/src/WireframeManager.ts

@@ -1,35 +1,36 @@
 import {
   BoolUpdateFlag,
   BoxColliderShape,
+  BoxShape,
   Camera,
   CapsuleColliderShape,
+  CircleShape,
   Collider,
   ColliderShapeUpAxis,
   Color,
-  dependentComponents,
+  ConeShape,
+  DependentMode,
   DirectLight,
   Entity,
   GLCapabilityType,
+  HemisphereShape,
+  MathUtil,
   Matrix,
   MeshRenderer,
   MeshTopology,
   ModelMesh,
+  ParticleRenderer,
   PointLight,
   Quaternion,
   Renderer,
   Script,
   SphereColliderShape,
+  SphereShape,
   SpotLight,
   Transform,
+  Vector2,
   Vector3,
-  DependentMode,
-  ParticleRenderer,
-  BoxShape,
-  CircleShape,
-  ConeShape,
-  HemisphereShape,
-  SphereShape,
-  MathUtil
+  dependentComponents
 } from "@galacean/engine";
 import { PlainColorMaterial } from "@galacean/engine-toolkit-custom-material";
 import { WireframePrimitive } from "./WireframePrimitive";
@@ -585,6 +586,26 @@ export class WireframeManager extends Script {
     this._wireframeElements.push(new WireframeElement(transform, positionsOffset, false));
   }
 
+  addRectShapeWireframe(size: Vector2, pivot: Vector2, transform: Transform): void {
+    const positionsOffset = this._localPositions.length;
+    const cuboidIndicesCount = WireframePrimitive.rectIndexCount;
+    this._growthIndexMemory(cuboidIndicesCount);
+    this._growthPosition(WireframePrimitive.rectPositionCount);
+    const { _indices: indices, _localPositions: localPositions } = this;
+    WireframePrimitive.createRectWireframe(
+      size.x,
+      size.y,
+      pivot.x,
+      pivot.y,
+      localPositions,
+      positionsOffset,
+      indices,
+      this._indicesCount
+    );
+    this._indicesCount += WireframePrimitive.rectIndexCount;
+    this._wireframeElements.push(new WireframeElement(transform, positionsOffset, false));
+  }
+
   override onAwake(): void {
     const engine = this.engine;
     const mesh = new ModelMesh(engine);

packages/auxiliary-lines/src/WireframePrimitive.ts

@@ -9,6 +9,20 @@ export class WireframePrimitive {
   /** global settings for vertex count */
   static circleVertexCount = 40;
 
+  /**
+   * Get rect wire frame index count.
+   */
+  static get rectIndexCount(): number {
+    return 8;
+  }
+
+  /**
+   * Get rect wire frame position count.
+   */
+  static get rectPositionCount(): number {
+    return 4;
+  }
+
   /**
    * Get cuboid wire frame index count.
    */
@@ -741,4 +755,43 @@ export class WireframePrimitive {
       indicesOffset + WireframePrimitive.circleVertexCount
     );
   }
+
+  /**
+   * Store rect wireframe mesh data.
+   * @param width - The width of rect
+   * @param height - The height of rect
+   * @param pivotX - The pivot x of rect
+   * @param pivotY - The pivot y of rect
+   * @param positions - position array
+   * @param positionOffset - The min of index list
+   * @param indices - index array
+   * @param indicesOffset - index array offset
+   */
+  static createRectWireframe(
+    width: number,
+    height: number,
+    pivotX: number,
+    pivotY: number,
+    positions: Vector3[],
+    positionOffset: number,
+    indices: Uint16Array | Uint32Array,
+    indicesOffset: number
+  ): void {
+    // 0 -- 3
+    // |    |
+    // 1 -- 2
+    positions[positionOffset].set(-width * pivotX, height * (1 - pivotY), 0);
+    positions[positionOffset + 1].set(-width * pivotX, -height * pivotY, 0);
+    positions[positionOffset + 2].set(width * (1 - pivotX), -height * pivotY, 0);
+    positions[positionOffset + 3].set(width * (1 - pivotX), height * (1 - pivotY), 0);
+
+    indices[indicesOffset++] = positionOffset;
+    indices[indicesOffset++] = positionOffset + 1;
+    indices[indicesOffset++] = positionOffset + 1;
+    indices[indicesOffset++] = positionOffset + 2;
+    indices[indicesOffset++] = positionOffset + 2;
+    indices[indicesOffset++] = positionOffset + 3;
+    indices[indicesOffset++] = positionOffset + 3;
+    indices[indicesOffset++] = positionOffset;
+  }
 }

packages/controls/package.json

@@ -24,6 +24,6 @@
     "types/**/*"
   ],
   "peerDependencies": {
-    "@galacean/engine": "^1.4.0-beta.2"
+    "@galacean/engine": "^1.4.0"
   }
 }

packages/custom-gltf-parser/package.json

@@ -23,6 +23,6 @@
     "types/**/*"
   ],
   "peerDependencies": {
-    "@galacean/engine": "^1.4.0-beta.2"
+    "@galacean/engine": "^1.4.0"
   }
 }

packages/custom-material/package.json

@@ -24,6 +24,6 @@
     "types/**/*"
   ],
   "peerDependencies": {
-    "@galacean/engine": "^1.4.0-beta.2"
+    "@galacean/engine": "^1.4.0"
   }
 }

packages/draco/package.json

@@ -20,6 +20,6 @@
     "types/**/*"
   ],
   "dependencies": {
-    "@galacean/engine": "^1.4.0-beta.2"
+    "@galacean/engine": "^1.4.0"
   }
 }

packages/dynamic-bone/package.json

@@ -24,6 +24,6 @@
     "types/**/*"
   ],
   "peerDependencies": {
-    "@galacean/engine": "^1.4.0-beta.2"
+    "@galacean/engine": "^1.4.0"
   }
 }

packages/framebuffer-picker/package.json

@@ -23,6 +23,6 @@
     "types/**/*"
   ],
   "peerDependencies": {
-    "@galacean/engine": "^1.4.0-beta.2"
+    "@galacean/engine": "^1.4.0"
   }
 }

packages/geometry-sketch/package.json

@@ -24,6 +24,6 @@
     "types/**/*"
   ],
   "peerDependencies": {
-    "@galacean/engine": "^1.4.0-beta.2"
+    "@galacean/engine": "^1.4.0"
   }
 }

packages/gizmo/package.json

@@ -24,7 +24,8 @@
     "types/**/*"
   ],
   "peerDependencies": {
-    "@galacean/engine": "^1.4.0-beta.2"
+    "@galacean/engine": "^1.4.0",
+    "@galacean/engine-ui": "1.4.0"
   },
   "dependencies": {
     "@galacean/engine-toolkit-framebuffer-picker": "workspace:*",

packages/gizmo/src/Gizmo.ts

@@ -1,27 +1,29 @@
 import {
   Camera,
+  Component,
   Entity,
-  Ray,
   Layer,
-  PointerButton,
-  Vector3,
   MathUtil,
-  Script,
+  Matrix,
+  MeshRenderer,
   Pointer,
+  PointerButton,
   PointerPhase,
+  Ray,
+  Script,
   Vector2,
-  Component,
-  MeshRenderer,
-  Matrix
+  Vector3
 } from "@galacean/engine";
+import { FramebufferPicker } from "@galacean/engine-toolkit-framebuffer-picker";
+import { Group, GroupDirtyFlag } from "./Group";
+import { RectControl } from "./Rect";
+import { RotateControl } from "./Rotate";
 import { ScaleControl } from "./Scale";
 import { TranslateControl } from "./Translate";
-import { RotateControl } from "./Rotate";
 import { GizmoComponent } from "./Type";
 import { Utils } from "./Utils";
 import { State } from "./enums/GizmoState";
-import { Group, GroupDirtyFlag } from "./Group";
-import { FramebufferPicker } from "@galacean/engine-toolkit-framebuffer-picker";
+import { SearchComponentType } from "./enums/GroupState";
 /**
  * Gizmo controls, including translate, rotate, scale
  */
@@ -103,7 +105,8 @@ export class Gizmo extends Script {
 
   set state(targetState: State) {
     this._type = targetState;
-
+    this._group.searchComponentType =
+      targetState === State.rect ? SearchComponentType.CurrentEntity : SearchComponentType.IncludeChildren;
     this._traverseControl(
       targetState,
       (control) => {
@@ -141,6 +144,7 @@ export class Gizmo extends Script {
     this._createGizmoControl(State.translate, TranslateControl);
     this._createGizmoControl(State.rotate, RotateControl);
     this._createGizmoControl(State.scale, ScaleControl);
+    this._createGizmoControl(State.rect, RectControl);
 
     this.layer = Layer.Layer31;
     this.state = this._type;
@@ -164,19 +168,19 @@ export class Gizmo extends Script {
     }
     this._group.getWorldPosition(this._tempVec30);
     if (this._isStarted) {
+      if (this._group._gizmoTransformDirty) {
+        this._traverseControl(this._type, (control) => {
+          this._type === State.all ? control.onUpdate(true) : control.onUpdate(false);
+        });
+        this._group._gizmoTransformDirty = false;
+      }
       if (pointer && (pointer.pressedButtons & PointerButton.Primary) !== 0) {
         if (pointer.deltaPosition.x !== 0 || pointer.deltaPosition.y !== 0) {
           this._triggerGizmoMove();
         }
       } else {
         this._triggerGizmoEnd();
       }
-      if (this._group._gizmoTransformDirty) {
-        this._traverseControl(this._type, (control) => {
-          this._type === State.all ? control.onUpdate(true) : control.onUpdate(false);
-        });
-        this._group._gizmoTransformDirty = false;
-      }
     } else {
       this._group.getWorldPosition(this._tempVec30);