@galacean/engine-ui 1.4.0-beta.0 → 1.4.0-beta.2

package/dist/main.js

@@ -90,10 +90,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];
@@ -909,7 +905,7 @@ exports.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();
         }
     };
@@ -1074,7 +1070,7 @@ exports.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 engine.DisorderedArray(), _this._renderMode = CanvasRenderMode.WorldSpace, _this._resolutionAdaptationMode = ResolutionAdaptationMode.HeightAdaptation, _this._sortOrder = 0, _this._distance = 10, _this._referenceResolution = new engine.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 engine.DisorderedArray(), _this._renderMode = CanvasRenderMode.WorldSpace, _this._resolutionAdaptationMode = ResolutionAdaptationMode.HeightAdaptation, _this._sortOrder = 0, _this._distance = 10, _this._referenceResolution = new engine.Vector2(800, 600), _this._referenceResolutionPerUnit = 100, _this._hierarchyVersion = -1, _this._center = new engine.Vector3();
         _this._onCanvasSizeListener = _this._onCanvasSizeListener.bind(_this);
         _this._onCameraModifyListener = _this._onCameraModifyListener.bind(_this);
         _this._onCameraTransformListener = _this._onCameraTransformListener.bind(_this);
@@ -1082,6 +1078,7 @@ exports.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;
@@ -1119,7 +1116,8 @@ exports.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();
@@ -1152,7 +1150,7 @@ exports.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;
@@ -1161,7 +1159,13 @@ exports.UICanvas = /*#__PURE__*/ function(Component) {
                 this._sortDistance = this._distance;
                 break;
             case CanvasRenderMode.WorldSpace:
-                this._sortDistance = engine.Vector3.distance(cameraPosition, this.entity.transform.worldPosition);
+                var boundsCenter = this._getCenter();
+                if (isOrthographic) {
+                    engine.Vector3.subtract(boundsCenter, cameraPosition, boundsCenter);
+                    this._sortDistance = engine.Vector3.dot(boundsCenter, cameraForward);
+                } else {
+                    this._sortDistance = engine.Vector3.distanceSquared(boundsCenter, cameraPosition);
+                }
                 break;
         }
     };
@@ -1391,6 +1395,17 @@ exports.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);
+            engine.Vector3.transformCoordinate(center, uiTransform.worldMatrix, center);
+            this._centerDirtyFlag.flag = false;
+        }
+        return this._center;
+    };
     _proto._getRealRenderMode = function _getRealRenderMode() {
         if (this._isRootCanvas) {
             var _this__renderCamera;
@@ -1609,6 +1624,12 @@ __decorate([
 __decorate([
     engine.ignoreClone
 ], exports.UICanvas.prototype, "_hierarchyVersion", void 0);
+__decorate([
+    engine.ignoreClone
+], exports.UICanvas.prototype, "_center", void 0);
+__decorate([
+    engine.ignoreClone
+], exports.UICanvas.prototype, "_centerDirtyFlag", void 0);
 __decorate([
     engine.ignoreClone
 ], exports.UICanvas.prototype, "_rootCanvasListener", null);
@@ -1944,6 +1965,7 @@ __decorate([
         var engine$1 = _this.engine;
         // @ts-ignore
         _this.font = engine$1._textDefaultFont;
+        _this.raycastEnabled = false;
         // @ts-ignore
         _this.setMaterial(engine$1._basicResources.textDefaultMaterial);
         return _this;
@@ -2706,16 +2728,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;
@@ -2807,11 +2841,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 exports.UICanvas; },
+    UIGroup: UIGroup,
+    get UIRenderer () { return exports.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() {
@@ -2859,10 +2912,11 @@ exports.UIPointerEventEmitter = /*#__PURE__*/ function(PointerEventEmitter1) {
                     continue;
                 }
                 camera.screenPointToRay(pointer.position, ray);
-                /** Other canvases */ var cameraPosition = camera.entity.transform.position;
+                /** 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;
@@ -2873,7 +2927,7 @@ exports.UIPointerEventEmitter = /*#__PURE__*/ function(PointerEventEmitter1) {
                 var farClipPlane = camera.farClipPlane;
                 /** 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._canRender(camera)) continue;
                     if (canvas.raycast(ray, hitResult, farClipPlane)) {
                         this._updateRaycast(hitResult.component, pointer);
                         return;
@@ -3068,7 +3122,7 @@ engine.ReflectionParser.registerCustomParseComponent("Text", /*#__PURE__*/ _asyn
         props = item.props;
         if (!props.font) {
             // @ts-ignore
-            instance.font = Font.createFromOS(instance.engine, props.fontFamily || "Arial");
+            instance.font = engine.Font.createFromOS(instance.engine, props.fontFamily || "Arial");
         }
         return [
             2,
@@ -3076,6 +3130,13 @@ engine.ReflectionParser.registerCustomParseComponent("Text", /*#__PURE__*/ _asyn
         ];
     });
 }));
+/**
+ * Register GUI components for the editor.
+ */ function registerGUI() {
+    for(var key in GUIComponent){
+        engine.Loader.registerClass(key, GUIComponent[key]);
+    }
+}
 
 exports.Button = Button;
 exports.CanvasRenderMode = CanvasRenderMode;
@@ -3090,4 +3151,5 @@ exports.Text = Text;
 exports.Transition = Transition;
 exports.UIGroup = UIGroup;
 exports.UITransform = UITransform;
+exports.registerGUI = registerGUI;
 //# sourceMappingURL=main.js.map