@galacean/effects-core 1.5.2 → 1.6.0-beta.1

package/dist/composition.d.ts

@@ -1,5 +1,6 @@
 import * as spec from '@galacean/effects-specification';
-import type { Ray } from '@galacean/effects-math/es/core/index';
+import type { Ray } from '@galacean/effects-math/es/core/ray';
+import type { Vector3 } from '@galacean/effects-math/es/core/vector3';
 import type { SceneType } from './asset-manager';
 import type { Scene } from './scene';
 import type { Disposable, LostHandler } from './utils';
@@ -18,6 +19,7 @@ export interface CompositionStatistic {
     loadTime: number;
     loadStart: number;
     firstFrameTime: number;
+    precompileTime: number;
 }
 export interface MessageItem {
     id: string;
@@ -25,6 +27,12 @@ export interface MessageItem {
     phrase: number;
     compositionId: number;
 }
+export interface CompItemClickedData {
+    name: string;
+    id: string;
+    hitPositions: Vector3[];
+    position: Vector3;
+}
 /**
  *
  */
@@ -38,6 +46,7 @@ export interface CompositionProps {
     baseRenderOrder?: number;
     renderer: Renderer;
     onPlayerPause?: (item: VFXItem<any>) => void;
+    onItemClicked?: (item: VFXItem<any>) => void;
     onMessageItem?: (item: MessageItem) => void;
     onEnd?: (composition: Composition) => void;
     event?: EventSystem;
@@ -82,6 +91,11 @@ export declare class Composition implements Disposable, LostHandler {
      * 是否播放完成后销毁 texture 对象
      */
     keepResource: boolean;
+    /**
+     * 合成内的元素否允许点击、拖拽交互
+     * @since 1.6.0
+     */
+    interactive: boolean;
     /**
      * 合成结束行为是 spec.END_BEHAVIOR_PAUSE 或 spec.END_BEHAVIOR_PAUSE_AND_DESTROY 时执行的回调
      * @internal
@@ -95,6 +109,14 @@ export declare class Composition implements Disposable, LostHandler {
      * 合成中消息元素创建/销毁时触发的回调
      */
     onMessageItem?: (item: MessageItem) => void;
+    /**
+     * 合成中元素点击时触发的回调
+     * 注意：此接口随时可能下线，请务使用！
+     * @since 1.6.0
+     * @ignore
+     * @deprecated
+     */
+    onItemClicked?: (data: CompItemClickedData) => void;
     /**
      * 合成id
      */

package/dist/index.js

@@ -3,7 +3,7 @@
  * Description: Galacean Effects runtime core for the web
  * Author: Ant Group CO., Ltd.
  * Contributors: 燃然,飂兮,十弦,云垣,茂安,意绮
- * Version: v1.5.2
+ * Version: v1.6.0-beta.1
  */
 
 'use strict';
@@ -10073,10 +10073,23 @@ var EventSystem = /** @class */ (function () {
         var getTouchEventValue = function (event, x, y, dx, dy) {
             if (dx === void 0) { dx = 0; }
             if (dy === void 0) { dy = 0; }
-            var _a = _this.target, width = _a.width, height = _a.height;
-            var ts = performance.now();
             var vx = 0;
             var vy = 0;
+            var ts = performance.now();
+            if (!_this.target) {
+                logger.error('Trigger TouchEvent after EventSystem is disposed');
+                return {
+                    x: x,
+                    y: y,
+                    vx: 0,
+                    vy: vy,
+                    dx: dx,
+                    dy: dy,
+                    ts: ts,
+                    width: 0, height: 0, origin: event,
+                };
+            }
+            var _a = _this.target, width = _a.width, height = _a.height;
             if (lastTouch) {
                 var dt = ts - lastTouch.ts;
                 vx = ((dx - lastTouch.dx) / dt) || 0;
@@ -13507,6 +13520,14 @@ var InteractVFXItem = /** @class */ (function (_super) {
     function InteractVFXItem(props, composition) {
         var _a;
         var _this = _super.call(this, props, composition) || this;
+        /**
+         * 拖拽的惯性衰减系数，范围[0, 1], 越大惯性越强
+         */
+        _this.downgrade = 0.95;
+        /**
+         * 拖拽的距离映射系数，越大越容易拖动
+         */
+        _this.dragRatio = [1, 1];
         _this.engine = (_a = _this.composition) === null || _a === void 0 ? void 0 : _a.getEngine();
         return _this;
     }
@@ -13517,8 +13538,23 @@ var InteractVFXItem = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(InteractVFXItem.prototype, "enable", {
+        get: function () {
+            return this.enabled;
+        },
+        set: function (enable) {
+            this.enabled = enable;
+            if (!enable) {
+                // 立刻停止惯性滑动
+                this.bouncingArg = null;
+            }
+        },
+        enumerable: false,
+        configurable: true
+    });
     InteractVFXItem.prototype.onConstructed = function (options) {
         this.ui = options.content;
+        this.enabled = true;
     };
     InteractVFXItem.prototype.onLifetimeBegin = function (composition) {
         var _a, _b, _c;
@@ -13537,9 +13573,8 @@ var InteractVFXItem = /** @class */ (function (_super) {
         if (!this.dragEvent || !this.bouncingArg) {
             return;
         }
-        var downgrade = 0.95;
-        this.bouncingArg.vx *= downgrade;
-        this.bouncingArg.vy *= downgrade;
+        this.bouncingArg.vx *= this.downgrade;
+        this.bouncingArg.vy *= this.downgrade;
         this.bouncingArg.dy += this.bouncingArg.vy;
         this.bouncingArg.dx += this.bouncingArg.vx;
         if (shouldIgnoreBouncing(this.bouncingArg)) {
@@ -13575,7 +13610,7 @@ var InteractVFXItem = /** @class */ (function (_super) {
         };
     };
     InteractVFXItem.prototype.getHitTestParams = function () {
-        if (!this.clickable) {
+        if (!this.clickable || !this.canInteract()) {
             return;
         }
         var behavior = this.ui.options.behavior;
@@ -13612,6 +13647,9 @@ var InteractVFXItem = /** @class */ (function (_super) {
         var handlerMap = {
             touchstart: function (event) {
                 var _a;
+                if (!_this.canInteract()) {
+                    return;
+                }
                 _this.dragEvent = null;
                 _this.bouncingArg = null;
                 var camera = (_a = _this.composition) === null || _a === void 0 ? void 0 : _a.camera;
@@ -13629,6 +13667,9 @@ var InteractVFXItem = /** @class */ (function (_super) {
                 _this.bouncingArg = event;
             },
             touchend: function (event) {
+                if (!_this.canInteract()) {
+                    return;
+                }
                 var bouncingArg = _this.bouncingArg;
                 if (!shouldIgnoreBouncing(bouncingArg, 3) && bouncingArg) {
                     var speed = 5;
@@ -13654,7 +13695,7 @@ var InteractVFXItem = /** @class */ (function (_super) {
     };
     InteractVFXItem.prototype.handleDragMove = function (evt, event) {
         var _a, _b;
-        if (!(evt && evt.cameraParam) || !this.composition) {
+        if (!(evt === null || evt === void 0 ? void 0 : evt.cameraParam) || !this.canInteract() || !this.composition) {
             return;
         }
         var options = this.ui.options;
@@ -13665,8 +13706,8 @@ var InteractVFXItem = /** @class */ (function (_super) {
         var sp = Math.tan(fov * Math.PI / 180 / 2) * Math.abs(depth);
         var height = dy * sp;
         var width = dx * sp;
-        var nx = position[0] - width;
-        var ny = position[1] - height;
+        var nx = position[0] - this.dragRatio[0] * width;
+        var ny = position[1] - this.dragRatio[1] * height;
         if (options.dxRange) {
             var _d = __read$3(options.dxRange, 2), min = _d[0], max = _d[1];
             nx = clamp$1(nx, min, max);
@@ -13683,6 +13724,10 @@ var InteractVFXItem = /** @class */ (function (_super) {
         }
         this.composition.camera.position = new Vector3(nx, ny, depth);
     };
+    InteractVFXItem.prototype.canInteract = function () {
+        var _a;
+        return Boolean((_a = this.composition) === null || _a === void 0 ? void 0 : _a.interactive) && this.enabled;
+    };
     return InteractVFXItem;
 }(VFXItem));
 function shouldIgnoreBouncing(arg, mul) {
@@ -23988,27 +24033,28 @@ var AssetManager = /** @class */ (function () {
     AssetManager.prototype.loadScene = function (url, renderer, options) {
         var _a, _b, _c;
         return __awaiter(this, void 0, void 0, function () {
-            var rawJSON, assetUrl, startTime, timeInfos, gpuInstance, asyncShaderCompile, compressedTexture, loadTimer, cancelLoading, waitPromise, hookTimeInfo, loadResourcePromise;
+            var rawJSON, assetUrl, startTime, timeInfoMessages, gpuInstance, asyncShaderCompile, compressedTexture, timeInfos, loadTimer, cancelLoading, waitPromise, hookTimeInfo, loadResourcePromise;
             var _this = this;
             return __generator(this, function (_d) {
                 assetUrl = isString(url) ? url : this.id;
                 startTime = performance.now();
-                timeInfos = [];
+                timeInfoMessages = [];
                 gpuInstance = renderer === null || renderer === void 0 ? void 0 : renderer.engine.gpuCapability;
                 asyncShaderCompile = (_b = (_a = gpuInstance === null || gpuInstance === void 0 ? void 0 : gpuInstance.detail) === null || _a === void 0 ? void 0 : _a.asyncShaderCompile) !== null && _b !== void 0 ? _b : false;
                 compressedTexture = (_c = gpuInstance === null || gpuInstance === void 0 ? void 0 : gpuInstance.detail.compressedTexture) !== null && _c !== void 0 ? _c : 0;
+                timeInfos = {};
                 cancelLoading = false;
                 waitPromise = new Promise(function (resolve, reject) {
                     loadTimer = window.setTimeout(function () {
                         cancelLoading = true;
                         _this.removeTimer(loadTimer);
                         var totalTime = performance.now() - startTime;
-                        reject("Load time out: totalTime: ".concat(totalTime.toFixed(4), "ms ").concat(timeInfos.join(' '), ", url: ").concat(assetUrl));
+                        reject("Load time out: totalTime: ".concat(totalTime.toFixed(4), "ms ").concat(timeInfoMessages.join(' '), ", url: ").concat(assetUrl));
                     }, _this.timeout * 1000);
                     _this.timers.push(loadTimer);
                 });
                 hookTimeInfo = function (label, func) { return __awaiter(_this, void 0, void 0, function () {
-                    var st, result, e_1;
+                    var st, result, time, e_1;
                     return __generator(this, function (_a) {
                         switch (_a.label) {
                             case 0:
@@ -24020,7 +24066,9 @@ var AssetManager = /** @class */ (function () {
                                 return [4 /*yield*/, func()];
                             case 2:
                                 result = _a.sent();
-                                timeInfos.push("[".concat(label, ": ").concat((performance.now() - st).toFixed(2), "]"));
+                                time = performance.now() - st;
+                                timeInfoMessages.push("[".concat(label, ": ").concat(time.toFixed(2), "]"));
+                                timeInfos[label] = time;
                                 return [2 /*return*/, result];
                             case 3:
                                 e_1 = _a.sent();
@@ -24079,7 +24127,7 @@ var AssetManager = /** @class */ (function () {
                                 return [4 /*yield*/, Promise.all([
                                         hookTimeInfo('processBins', function () { return _this.processBins(bins_1); }),
                                         hookTimeInfo('processImages', function () { return _this.processImages(images_2, usedImages_1, compressedTexture); }),
-                                        hookTimeInfo("".concat(asyncShaderCompile ? 'async' : 'sync', " compile"), function () { return _this.precompile(compositions_1, pluginSystem_1, renderer, options); }),
+                                        hookTimeInfo("".concat(asyncShaderCompile ? 'async' : 'sync', "Compile"), function () { return _this.precompile(compositions_1, pluginSystem_1, renderer, options); }),
                                     ])];
                             case 8:
                                 _d = __read$3.apply(void 0, [_e.sent(), 2]), loadedBins_1 = _d[0], loadedImages_1 = _d[1];
@@ -24091,6 +24139,7 @@ var AssetManager = /** @class */ (function () {
                                 loadedTextures = _e.sent();
                                 jsonScene_1.compositions = this.updateSceneData(jsonScene_1.compositions);
                                 scene = {
+                                    timeInfos: timeInfos,
                                     url: url,
                                     renderLevel: this.options.renderLevel,
                                     storage: {},
@@ -24109,11 +24158,13 @@ var AssetManager = /** @class */ (function () {
                                 _e.label = 12;
                             case 12:
                                 totalTime = performance.now() - startTime;
-                                logger.info("Load asset: totalTime: ".concat(totalTime.toFixed(4), "ms ").concat(timeInfos.join(' '), ", url: ").concat(assetUrl));
+                                logger.info("Load asset: totalTime: ".concat(totalTime.toFixed(4), "ms ").concat(timeInfoMessages.join(' '), ", url: ").concat(assetUrl));
                                 window.clearTimeout(loadTimer);
                                 this.removeTimer(loadTimer);
                                 scene.totalTime = totalTime;
                                 scene.startTime = startTime;
+                                // 各部分分段时长
+                                scene.timeInfos = timeInfos;
                                 return [2 /*return*/, scene];
                         }
                     });
@@ -24961,7 +25012,7 @@ var Composition = /** @class */ (function () {
      * @param props - composition 的创建参数
      */
     function Composition(props, scene) {
-        var _a;
+        var _a, _b;
         /**
          * 动画播放速度
          */
@@ -24990,7 +25041,7 @@ var Composition = /** @class */ (function () {
         this.paused = false;
         this.lastVideoUpdateTime = 0;
         this.postLoaders = [];
-        var _b = props.reusable, reusable = _b === void 0 ? false : _b, _c = props.speed, speed = _c === void 0 ? 1 : _c, _d = props.baseRenderOrder, baseRenderOrder = _d === void 0 ? 0 : _d, renderer = props.renderer, onPlayerPause = props.onPlayerPause, onMessageItem = props.onMessageItem, onEnd = props.onEnd, event = props.event, width = props.width, height = props.height;
+        var _c = props.reusable, reusable = _c === void 0 ? false : _c, _d = props.speed, speed = _d === void 0 ? 1 : _d, _e = props.baseRenderOrder, baseRenderOrder = _e === void 0 ? 0 : _e, renderer = props.renderer, onPlayerPause = props.onPlayerPause, onMessageItem = props.onMessageItem, onEnd = props.onEnd, event = props.event, width = props.width, height = props.height;
         this.compositionSourceManager = new CompositionSourceManager(scene, renderer.engine);
         scene.jsonScene.imgUsage = undefined;
         if (reusable) {
@@ -24998,7 +25049,7 @@ var Composition = /** @class */ (function () {
             scene.textures = undefined;
             scene.consumed = true;
         }
-        var _e = this.compositionSourceManager, sourceContent = _e.sourceContent, pluginSystem = _e.pluginSystem, imgUsage = _e.imgUsage, totalTime = _e.totalTime, renderLevel = _e.renderLevel, refCompositionProps = _e.refCompositionProps;
+        var _f = this.compositionSourceManager, sourceContent = _f.sourceContent, pluginSystem = _f.pluginSystem, imgUsage = _f.imgUsage, totalTime = _f.totalTime, renderLevel = _f.renderLevel, refCompositionProps = _f.refCompositionProps;
         assertExist(sourceContent);
         this.refCompositionProps = refCompositionProps;
         var vfxItem = new CompVFXItem(sourceContent, this);
@@ -25015,7 +25066,7 @@ var Composition = /** @class */ (function () {
         this.renderer = renderer;
         this.texInfo = imageUsage !== null && imageUsage !== void 0 ? imageUsage : {};
         this.event = event;
-        this.statistic = { loadTime: totalTime !== null && totalTime !== void 0 ? totalTime : 0, loadStart: (_a = scene.startTime) !== null && _a !== void 0 ? _a : 0, firstFrameTime: 0 };
+        this.statistic = { loadTime: totalTime !== null && totalTime !== void 0 ? totalTime : 0, loadStart: (_a = scene.startTime) !== null && _a !== void 0 ? _a : 0, firstFrameTime: 0, precompileTime: (_b = scene.timeInfos['asyncCompile']) !== null && _b !== void 0 ? _b : scene.timeInfos['syncCompile'] };
         this.reusable = reusable;
         this.speed = speed;
         this.renderLevel = renderLevel;
@@ -25027,6 +25078,7 @@ var Composition = /** @class */ (function () {
         this.camera = new Camera(this.name, __assign$1(__assign$1({}, sourceContent === null || sourceContent === void 0 ? void 0 : sourceContent.camera), { aspect: width / height }));
         this.url = scene.url;
         this.assigned = true;
+        this.interactive = true;
         this.onPlayerPause = onPlayerPause;
         this.onMessageItem = onMessageItem;
         this.onEnd = onEnd;
@@ -25406,7 +25458,7 @@ var Composition = /** @class */ (function () {
      * @param options - 最大求交数和求交时的回调
      */
     Composition.prototype.hitTest = function (x, y, force, options) {
-        if (this.isDestroyed) {
+        if (this.isDestroyed || !this.interactive) {
             return [];
         }
         var regions = [];