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

package/dist/browser.js

@@ -90,10 +90,6 @@
       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 @@
         _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 @@
         _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,10 +1078,13 @@
             // @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--){
@@ -1119,7 +1118,8 @@
             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 +1152,7 @@
         };
         /**
        * @internal
-       */ _proto._updateSortDistance = function _updateSortDistance(cameraPosition) {
+       */ _proto._updateSortDistance = function _updateSortDistance(isOrthographic, cameraPosition, cameraForward) {
             switch(this._realRenderMode){
                 case CanvasRenderMode.ScreenSpaceOverlay:
                     this._sortDistance = 0;
@@ -1161,7 +1161,13 @@
                     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 +1397,17 @@
                 }
             }
         };
+        _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 +1626,12 @@
     __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 +1967,7 @@
             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 +2730,28 @@
         }
         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 +2843,30 @@
             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() {
@@ -2841,11 +2896,13 @@
                 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;
                     }
@@ -2859,10 +2916,13 @@
                         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;
@@ -2871,10 +2931,11 @@
                         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;
                         }
@@ -2884,6 +2945,7 @@
                         return;
                     }
                 }
+                this._updateRaycast(null);
             }
         };
         _proto.processDrag = function processDrag(pointer) {
@@ -3068,7 +3130,7 @@
             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 +3138,13 @@
             ];
         });
     }));
+    /**
+     * 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,6 +3159,7 @@
     exports.Transition = Transition;
     exports.UIGroup = UIGroup;
     exports.UITransform = UITransform;
+    exports.registerGUI = registerGUI;
 
     Object.defineProperty(exports, '__esModule', { value: true });