@galacean/engine-ui 1.4.0-beta.1 → 1.4.0

package/dist/module.js

@@ -1,4 +1,4 @@
-import { EntityModifyFlags, ignoreClone, assignmentClone, DisorderedArray, Component, deepClone, Vector2, Transform, Vector3, Matrix, Plane, ShaderProperty, dependentComponents, DependentMode, BatchUtils, ShaderMacroCollection, Renderer, Vector4, Color, RendererUpdateFlags, Script, MathUtil, CameraModifyFlags, SafeLoopArray, SpriteDrawMode, RenderQueueFlags, SpriteModifyFlags, SpriteTileMode, TiledSpriteAssembler, SlicedSpriteAssembler, SimpleSpriteAssembler, BoundingBox, ShaderData, ShaderDataGroup, TextUtils, Engine, TextVerticalAlignment, TextHorizontalAlignment, OverflowMode, CharRenderInfo, FontStyle, ReferResource, registerPointerEventEmitter, PointerEventEmitter, CameraClearFlags, ReflectionParser, Shader, ShaderPass, PipelineStage, Material, BlendFactor, BlendOperation, CullMode, RenderQueueType, Entity } from '@galacean/engine';
+import { EntityModifyFlags, ignoreClone, assignmentClone, DisorderedArray, Component, deepClone, Vector2, Transform, Vector3, Matrix, Plane, ShaderProperty, dependentComponents, DependentMode, BatchUtils, ShaderMacroCollection, Renderer, Vector4, Color, RendererUpdateFlags, Script, MathUtil, CameraModifyFlags, SafeLoopArray, SpriteDrawMode, RenderQueueFlags, SpriteModifyFlags, SpriteTileMode, TiledSpriteAssembler, SlicedSpriteAssembler, SimpleSpriteAssembler, BoundingBox, ShaderData, ShaderDataGroup, TextUtils, Engine, TextVerticalAlignment, TextHorizontalAlignment, OverflowMode, CharRenderInfo, FontStyle, ReferResource, registerPointerEventEmitter, PointerEventEmitter, CameraClearFlags, ReflectionParser, Shader, ShaderPass, PipelineStage, Material, BlendFactor, BlendOperation, CullMode, RenderQueueType, Entity, Loader, Font } from '@galacean/engine';
 
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
     try {
@@ -86,10 +86,6 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
   return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
-var uiDefaultFs = "#define GLSLIFY 1\nuniform sampler2D renderer_UITexture;\n\nvarying vec2 v_uv;\nvarying vec4 v_color;\n\nvoid main() {\n    vec4 baseColor = texture2D(renderer_UITexture, v_uv);\n    gl_FragColor = baseColor * v_color;\n}\n"; // eslint-disable-line
-
-var uiDefaultVs = "#define GLSLIFY 1\nuniform mat4 renderer_MVPMat;\n\nattribute vec3 POSITION;\nattribute vec2 TEXCOORD_0;\nattribute vec4 COLOR_0;\n\nvarying vec2 v_uv;\nvarying vec4 v_color;\n\nvoid main() {\n    gl_Position = renderer_MVPMat * vec4(POSITION, 1.0);\n\n    v_uv = TEXCOORD_0;\n    v_color = COLOR_0;\n}\n"; // eslint-disable-line
-
 function _defineProperties(target, props) {
     for (var i = 0; i < props.length; i++) {
         var descriptor = props[i];
@@ -905,7 +901,7 @@ UIRenderer = __decorate([
     _proto.onDestroy = function onDestroy() {
         Script.prototype.onDestroy.call(this);
         var transitions = this._transitions;
-        for(var i = 0, n = transitions.length; i < n; i++){
+        for(var i = transitions.length - 1; i >= 0; i--){
             transitions[i].destroy();
         }
     };
@@ -1070,7 +1066,7 @@ var UICanvas = /*#__PURE__*/ function(Component) {
     _inherits(UICanvas, Component);
     function UICanvas(entity) {
         var _this;
-        _this = Component.call(this, entity) || this, /** @internal */ _this._canvasIndex = -1, /** @internal */ _this._indexInRootCanvas = -1, /** @internal */ _this._isRootCanvasDirty = false, /** @internal */ _this._rootCanvasListeningEntities = [], /** @internal */ _this._isRootCanvas = false, /** @internal */ _this._sortDistance = 0, /** @internal */ _this._orderedRenderers = [], /** @internal */ _this._realRenderMode = 4, /** @internal */ _this._disorderedElements = new DisorderedArray(), _this._renderMode = CanvasRenderMode.WorldSpace, _this._resolutionAdaptationMode = ResolutionAdaptationMode.HeightAdaptation, _this._sortOrder = 0, _this._distance = 10, _this._referenceResolution = new Vector2(800, 600), _this._referenceResolutionPerUnit = 100, _this._hierarchyVersion = -1;
+        _this = Component.call(this, entity) || this, /** @internal */ _this._canvasIndex = -1, /** @internal */ _this._indexInRootCanvas = -1, /** @internal */ _this._isRootCanvasDirty = false, /** @internal */ _this._rootCanvasListeningEntities = [], /** @internal */ _this._isRootCanvas = false, /** @internal */ _this._sortDistance = 0, /** @internal */ _this._orderedRenderers = [], /** @internal */ _this._realRenderMode = 4, /** @internal */ _this._disorderedElements = new DisorderedArray(), _this._renderMode = CanvasRenderMode.WorldSpace, _this._resolutionAdaptationMode = ResolutionAdaptationMode.HeightAdaptation, _this._sortOrder = 0, _this._distance = 10, _this._referenceResolution = new Vector2(800, 600), _this._referenceResolutionPerUnit = 100, _this._hierarchyVersion = -1, _this._center = new Vector3();
         _this._onCanvasSizeListener = _this._onCanvasSizeListener.bind(_this);
         _this._onCameraModifyListener = _this._onCameraModifyListener.bind(_this);
         _this._onCameraTransformListener = _this._onCameraTransformListener.bind(_this);
@@ -1078,10 +1074,13 @@ var UICanvas = /*#__PURE__*/ function(Component) {
         // @ts-ignore
         _this._referenceResolution._onValueChanged = _this._onReferenceResolutionChanged;
         _this._rootCanvasListener = _this._rootCanvasListener.bind(_this);
+        _this._centerDirtyFlag = entity.registerWorldChangeFlag();
         return _this;
     }
     var _proto = UICanvas.prototype;
-    _proto.raycast = function raycast(ray, out, distance) {
+    /**
+   * @internal
+   */ _proto._raycast = function _raycast(ray, out, distance) {
         if (distance === void 0) distance = Number.MAX_SAFE_INTEGER;
         var renderers = this._getRenderers();
         for(var i = renderers.length - 1; i >= 0; i--){
@@ -1115,7 +1114,8 @@ var UICanvas = /*#__PURE__*/ function(Component) {
         var frameCount = engine.time.frameCount;
         // @ts-ignore
         var renderElement = this._renderElement = engine._renderElementPool.get();
-        this._updateSortDistance(context.virtualCamera.position);
+        var virtualCamera = context.virtualCamera;
+        this._updateSortDistance(virtualCamera.isOrthographic, virtualCamera.position, virtualCamera.forward);
         renderElement.set(this.sortOrder, this._sortDistance);
         var _engine_canvas = engine.canvas, width = _engine_canvas.width, height = _engine_canvas.height;
         var renderers = this._getRenderers();
@@ -1148,7 +1148,7 @@ var UICanvas = /*#__PURE__*/ function(Component) {
     };
     /**
    * @internal
-   */ _proto._updateSortDistance = function _updateSortDistance(cameraPosition) {
+   */ _proto._updateSortDistance = function _updateSortDistance(isOrthographic, cameraPosition, cameraForward) {
         switch(this._realRenderMode){
             case CanvasRenderMode.ScreenSpaceOverlay:
                 this._sortDistance = 0;
@@ -1157,7 +1157,13 @@ var UICanvas = /*#__PURE__*/ function(Component) {
                 this._sortDistance = this._distance;
                 break;
             case CanvasRenderMode.WorldSpace:
-                this._sortDistance = Vector3.distance(cameraPosition, this.entity.transform.worldPosition);
+                var boundsCenter = this._getCenter();
+                if (isOrthographic) {
+                    Vector3.subtract(boundsCenter, cameraPosition, boundsCenter);
+                    this._sortDistance = Vector3.dot(boundsCenter, cameraForward);
+                } else {
+                    this._sortDistance = Vector3.distanceSquared(boundsCenter, cameraPosition);
+                }
                 break;
         }
     };
@@ -1387,6 +1393,17 @@ var UICanvas = /*#__PURE__*/ function(Component) {
             }
         }
     };
+    _proto._getCenter = function _getCenter() {
+        if (this._centerDirtyFlag.flag) {
+            var center = this._center;
+            var uiTransform = this.entity.transform;
+            var pivot = uiTransform.pivot, size = uiTransform.size;
+            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;
+    };
     _proto._getRealRenderMode = function _getRealRenderMode() {
         if (this._isRootCanvas) {
             var _this__renderCamera;
@@ -1605,6 +1622,12 @@ __decorate([
 __decorate([
     ignoreClone
 ], UICanvas.prototype, "_hierarchyVersion", void 0);
+__decorate([
+    ignoreClone
+], UICanvas.prototype, "_center", void 0);
+__decorate([
+    ignoreClone
+], UICanvas.prototype, "_centerDirtyFlag", void 0);
 __decorate([
     ignoreClone
 ], UICanvas.prototype, "_rootCanvasListener", null);
@@ -1940,6 +1963,7 @@ __decorate([
         var engine = _this.engine;
         // @ts-ignore
         _this.font = engine._textDefaultFont;
+        _this.raycastEnabled = false;
         // @ts-ignore
         _this.setMaterial(engine._basicResources.textDefaultMaterial);
         return _this;
@@ -2702,16 +2726,28 @@ var TextChunk = function TextChunk() {
     }
     var _proto = ColorTransition.prototype;
     _proto._onNormalValueChanged = function _onNormalValueChanged() {
-        this._finalState === InteractiveState.Normal && this._updateValue();
+        if (this._finalState === InteractiveState.Normal) {
+            this._finalValue = this._normal;
+            this._updateValue();
+        }
     };
     _proto._onHoverValueChanged = function _onHoverValueChanged() {
-        this._finalState === InteractiveState.Hover && this._updateValue();
+        if (this._finalState === InteractiveState.Hover) {
+            this._finalValue = this._hover;
+            this._updateValue();
+        }
     };
     _proto._onPressedValueChanged = function _onPressedValueChanged() {
-        this._finalState === InteractiveState.Pressed && this._updateValue();
+        if (this._finalState === InteractiveState.Pressed) {
+            this._finalValue = this._pressed;
+            this._updateValue();
+        }
     };
     _proto._onDisabledValueChanged = function _onDisabledValueChanged() {
-        this._finalState === InteractiveState.Disable && this._updateValue();
+        if (this._finalState === InteractiveState.Disable) {
+            this._finalValue = this._disabled;
+            this._updateValue();
+        }
     };
     _proto._getTargetValueCopy = function _getTargetValueCopy() {
         var _this__target;
@@ -2803,11 +2839,30 @@ var TextChunk = function TextChunk() {
         this._currentValue = weight >= 1 ? destValue : srcValue;
     };
     _proto._applyValue = function _applyValue(value) {
-        this._target.sprite = value || this._normal;
+        this._target.sprite = value;
     };
     return SpriteTransition;
 }(Transition);
 
+var GUIComponent = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    get UICanvas () { return UICanvas; },
+    UIGroup: UIGroup,
+    get UIRenderer () { return UIRenderer; },
+    UITransform: UITransform,
+    Button: Button,
+    Image: Image,
+    Text: Text,
+    ColorTransition: ColorTransition,
+    ScaleTransition: ScaleTransition,
+    SpriteTransition: SpriteTransition,
+    Transition: Transition
+});
+
+var uiDefaultFs = "#define GLSLIFY 1\nuniform sampler2D renderer_UITexture;\n\nvarying vec2 v_uv;\nvarying vec4 v_color;\n\nvoid main() {\n    vec4 baseColor = texture2D(renderer_UITexture, v_uv);\n    gl_FragColor = baseColor * v_color;\n}\n"; // eslint-disable-line
+
+var uiDefaultVs = "#define GLSLIFY 1\nuniform mat4 renderer_MVPMat;\n\nattribute vec3 POSITION;\nattribute vec2 TEXCOORD_0;\nattribute vec4 COLOR_0;\n\nvarying vec2 v_uv;\nvarying vec4 v_color;\n\nvoid main() {\n    gl_Position = renderer_MVPMat * vec4(POSITION, 1.0);\n\n    v_uv = TEXCOORD_0;\n    v_color = COLOR_0;\n}\n"; // eslint-disable-line
+
 /**
  * @internal
  */ var UIHitResult = function UIHitResult() {
@@ -2837,11 +2892,13 @@ var UIPointerEventEmitter = /*#__PURE__*/ function(PointerEventEmitter1) {
             if (!scene.isActive || scene.destroyed) continue;
             // @ts-ignore
             var componentsManager = scene._componentsManager;
-            /** Overlay Canvas */ var canvasElements = componentsManager._overlayCanvases;
-            ray.origin.set(position.x, position.y, 1);
+            // Overlay Canvas
+            var canvasElements = componentsManager._overlayCanvases;
+            // Screen to world ( Assume that world units have a one-to-one relationship with pixel units )
+            ray.origin.set(position.x, scene.engine.canvas.height - position.y, 1);
             ray.direction.set(0, 0, -1);
             for(var j = canvasElements.length - 1; j >= 0; j--){
-                if (canvasElements.get(j).raycast(ray, hitResult)) {
+                if (canvasElements.get(j)._raycast(ray, hitResult)) {
                     this._updateRaycast(hitResult.component, pointer);
                     return;
                 }
@@ -2855,10 +2912,13 @@ var UIPointerEventEmitter = /*#__PURE__*/ function(PointerEventEmitter1) {
                     continue;
                 }
                 camera.screenPointToRay(pointer.position, ray);
-                /** Other canvases */ var cameraPosition = camera.entity.transform.position;
-                /** Sort by rendering order */ canvasElements = componentsManager._canvases;
+                // Other canvases
+                var isOrthographic = camera.isOrthographic;
+                var _camera_entity_transform = camera.entity.transform, cameraPosition = _camera_entity_transform.worldPosition, cameraForward = _camera_entity_transform.worldForward;
+                // Sort by rendering order
+                canvasElements = componentsManager._canvases;
                 for(var k = 0, n = canvasElements.length; k < n; k++){
-                    canvasElements.get(k)._updateSortDistance(cameraPosition);
+                    canvasElements.get(k)._updateSortDistance(isOrthographic, cameraPosition, cameraForward);
                 }
                 canvasElements.sort(function(a, b) {
                     return a.sortOrder - b.sortOrder || a._sortDistance - b._sortDistance;
@@ -2867,10 +2927,11 @@ var UIPointerEventEmitter = /*#__PURE__*/ function(PointerEventEmitter1) {
                     canvasElements.get(k1)._canvasIndex = k1;
                 }
                 var farClipPlane = camera.farClipPlane;
-                /** Post-rendering first detection */ for(var k2 = 0, n2 = canvasElements.length; k2 < n2; k2++){
+                // Post-rendering first detection
+                for(var k2 = 0, n2 = canvasElements.length; k2 < n2; k2++){
                     var canvas = canvasElements.get(k2);
-                    if (canvas.renderCamera !== camera) continue;
-                    if (canvas.raycast(ray, hitResult, farClipPlane)) {
+                    if (!canvas._canRender(camera)) continue;
+                    if (canvas._raycast(ray, hitResult, farClipPlane)) {
                         this._updateRaycast(hitResult.component, pointer);
                         return;
                     }
@@ -2880,6 +2941,7 @@ var UIPointerEventEmitter = /*#__PURE__*/ function(PointerEventEmitter1) {
                     return;
                 }
             }
+            this._updateRaycast(null);
         }
     };
     _proto.processDrag = function processDrag(pointer) {
@@ -3072,6 +3134,13 @@ ReflectionParser.registerCustomParseComponent("Text", /*#__PURE__*/ _async_to_ge
         ];
     });
 }));
+/**
+ * Register GUI components for the editor.
+ */ function registerGUI() {
+    for(var key in GUIComponent){
+        Loader.registerClass(key, GUIComponent[key]);
+    }
+}
 
-export { Button, CanvasRenderMode, ColorTransition, EngineExtension, EntityExtension, Image, ResolutionAdaptationMode, ScaleTransition, SpriteTransition, Text, Transition, UICanvas, UIGroup, UIPointerEventEmitter, UIRenderer, UITransform };
+export { Button, CanvasRenderMode, ColorTransition, EngineExtension, EntityExtension, Image, ResolutionAdaptationMode, ScaleTransition, SpriteTransition, Text, Transition, UICanvas, UIGroup, UIPointerEventEmitter, UIRenderer, UITransform, registerGUI };
 //# sourceMappingURL=module.js.map