targetj 1.1.0 → 1.1.2

package/build/ParticleTModel.js

@@ -1,7 +1,7 @@
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
-function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
 function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
@@ -40,7 +40,7 @@ import { ParticleChild } from "./ParticleChild.js";
 import { TargetParser } from "./TargetParser.js";
 import { TargetUtil } from "./TargetUtil.js";
 import { TUtil } from "./TUtil.js";
-import { getRunScheduler } from "./App.js";
+import { App, getRunScheduler } from "./App.js";
 
 /**
  * It provides a TModel that can render instanced addChildren values on the GPU.
@@ -59,6 +59,7 @@ var ParticleTModel = /*#__PURE__*/function (_TModel) {
     _this.childTargetValues = {};
     _this.childTransitions = {};
     _this.pendingGpuChildren = {};
+    _this.pendingImperativeCompletions = new Map();
     _this.childRuntimePrograms = [];
     _this.childRuntimeStates = [];
     _this.pendingGpuChildRuntimeCounts = {};
@@ -76,9 +77,10 @@ var ParticleTModel = /*#__PURE__*/function (_TModel) {
   }
   _inherits(ParticleTModel, _TModel);
   return _createClass(ParticleTModel, [{
-    key: "onDomReady",
+    key: "onDomAvailable",
     value: function () {
-      var _onDomReady = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+      var _onDomAvailable = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+        var ready;
         return _regeneratorRuntime().wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
@@ -91,22 +93,25 @@ var ParticleTModel = /*#__PURE__*/function (_TModel) {
               _context.next = 4;
               return this.syncParticleRenderer();
             case 4:
-              this.particleRuntime.markPendingRenderReady();
-            case 5:
+              ready = _context.sent;
+              if (ready) {
+                this.particleRuntime.markPendingRenderReady();
+              }
+            case 6:
             case "end":
               return _context.stop();
           }
         }, _callee, this);
       }));
-      function onDomReady() {
-        return _onDomReady.apply(this, arguments);
+      function onDomAvailable() {
+        return _onDomAvailable.apply(this, arguments);
       }
-      return onDomReady;
+      return onDomAvailable;
     }()
   }, {
     key: "restoreRuntimeDomDerivedState",
     value: function () {
-      var _restoreRuntimeDomDerivedState = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
+      var _restoreRuntimeDomDerivedState = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(explodeSource) {
         var restored;
         return _regeneratorRuntime().wrap(function _callee2$(_context2) {
           while (1) switch (_context2.prev = _context2.next) {
@@ -133,28 +138,62 @@ var ParticleTModel = /*#__PURE__*/function (_TModel) {
               }
               return _context2.abrupt("return", false);
             case 12:
-              _context2.next = 14;
-              return this.particleRenderer.waitForPresentedFrame();
-            case 14:
-              _context2.prev = 14;
-              this.restoringParticleRuntime = false;
-              return _context2.finish(14);
-            case 17:
+              if (!this.explodeChildrenState) {
+                _context2.next = 18;
+                break;
+              }
+              _context2.next = 15;
+              return this.restoreExplodeTexture(explodeSource);
+            case 15:
+              restored = _context2.sent;
               if (restored) {
-                this.particleRuntime.resumeRestored();
+                _context2.next = 18;
+                break;
               }
+              return _context2.abrupt("return", false);
+            case 18:
+              this.particleRuntime.markRenderReady(this.childHandles.map(function (child) {
+                return child.index;
+              }));
+              _context2.next = 21;
+              return this.particleRenderer.waitForPresentedFrame();
+            case 21:
+              _context2.prev = 21;
+              this.restoringParticleRuntime = false;
+              return _context2.finish(21);
+            case 24:
               return _context2.abrupt("return", restored);
-            case 19:
+            case 25:
             case "end":
               return _context2.stop();
           }
-        }, _callee2, this, [[4,, 14, 17]]);
+        }, _callee2, this, [[4,, 21, 24]]);
       }));
-      function restoreRuntimeDomDerivedState() {
+      function restoreRuntimeDomDerivedState(_x) {
         return _restoreRuntimeDomDerivedState.apply(this, arguments);
       }
       return restoreRuntimeDomDerivedState;
     }()
+  }, {
+    key: "restoreExplodeTexture",
+    value: function restoreExplodeTexture(explodeSource) {
+      if (!this.explodeChildrenState) {
+        return Promise.resolve(true);
+      }
+      if (!explodeSource) {
+        return Promise.resolve(false);
+      }
+      return this.particleRenderer.setExplodeSource({
+        bitmap: explodeSource
+      });
+    }
+  }, {
+    key: "disposeRuntimeDerivedState",
+    value: function disposeRuntimeDerivedState() {
+      var _this$particleRuntime, _this$particleRendere;
+      (_this$particleRuntime = this.particleRuntime) === null || _this$particleRuntime === void 0 || _this$particleRuntime.dispose();
+      (_this$particleRendere = this.particleRenderer) === null || _this$particleRendere === void 0 || _this$particleRendere.destroy();
+    }
   }, {
     key: "syncParticleRenderer",
     value: function syncParticleRenderer() {
@@ -232,12 +271,15 @@ var ParticleTModel = /*#__PURE__*/function (_TModel) {
     key: "requestParticleRender",
     value: function requestParticleRender() {
       var _this3 = this;
-      if (this.restoringParticleRuntime || !this.gpuChildrenEnabled || !this.hasDom() || this.particleRenderRequested) {
+      if (this.restoringParticleRuntime || !this.gpuChildrenEnabled || !this.isVisible() || !this.hasDom() || this.particleRenderRequested) {
         return;
       }
       this.particleRenderRequested = true;
       requestAnimationFrame(function () {
         _this3.particleRenderRequested = false;
+        if (!_this3.isVisible() || !_this3.hasDom()) {
+          return;
+        }
         if (_this3.activeChildTransitionKey) {
           _this3.particleRenderer.render();
           return;
@@ -250,6 +292,18 @@ var ParticleTModel = /*#__PURE__*/function (_TModel) {
         }
       });
     }
+  }, {
+    key: "onVisibilityChange",
+    value: function onVisibilityChange(visible) {
+      if (this.restoringParticleRuntime) {
+        return;
+      }
+      if (visible) {
+        this.particleRuntime.resumeForVisibility();
+      } else {
+        this.particleRuntime.pauseForVisibility();
+      }
+    }
   }, {
     key: "getChildrenRenderer",
     value: function getChildrenRenderer() {
@@ -326,6 +380,7 @@ var ParticleTModel = /*#__PURE__*/function (_TModel) {
   }, {
     key: "setChildTarget",
     value: function setChildTarget(index, key, target, steps, interval, easing) {
+      var _this$targetValues$or;
       var originalTargetName = TargetUtil.currentTargetName;
       var originalTModel = TargetUtil.currentTModel;
       var cleanKey = ParticleUtil.getTargetName(key);
@@ -333,8 +388,34 @@ var ParticleTModel = /*#__PURE__*/function (_TModel) {
       if (!child) {
         return;
       }
+      if (originalTModel && originalTargetName && originalTModel !== this) {
+        TargetUtil.markChildAction(originalTModel, originalTargetName, child);
+      }
       child.allTargetMap[cleanKey] = key;
       this.childTargetMaps[index] = child.allTargetMap;
+
+      // Collect imperative assignments issued synchronously by a sequential parent target.
+      // TargetExecutor calls handleSpecialTarget() after evaluating the parent function.
+      if (originalTModel === this && typeof originalTargetName === "string" && originalTargetName.endsWith("$$") && this.targets[originalTargetName] && ((_this$targetValues$or = this.targetValues[originalTargetName]) === null || _this$targetValues$or === void 0 ? void 0 : _this$targetValues$or.status) !== "done") {
+        var _this$childTargetValu, _this$childTargetValu2, _targetValues$index;
+        var targetName = TargetUtil.getTargetName(originalTargetName);
+        var targetValues = (_this$childTargetValu2 = (_this$childTargetValu = this.childTargetValues)[targetName]) !== null && _this$childTargetValu2 !== void 0 ? _this$childTargetValu2 : _this$childTargetValu[targetName] = [];
+        var childTargets = (_targetValues$index = targetValues[index]) !== null && _targetValues$index !== void 0 ? _targetValues$index : targetValues[index] = {};
+        var specification = TargetParser.isTargetSpecObject(target) ? _objectSpread({}, target) : {
+          value: target
+        };
+        if (specification.steps === undefined && steps !== undefined) {
+          specification.steps = steps;
+        }
+        if (specification.interval === undefined && interval !== undefined) {
+          specification.interval = interval;
+        }
+        if (specification.easing === undefined && easing !== undefined) {
+          specification.easing = easing;
+        }
+        childTargets[cleanKey] = specification;
+        return;
+      }
       this.particleRuntime.setImperativeTarget(index, cleanKey, target, steps, interval, easing, originalTargetName, originalTModel);
     }
   }, {
@@ -484,32 +565,18 @@ var ParticleTModel = /*#__PURE__*/function (_TModel) {
           if (!child || !childSteps) {
             continue;
           }
-          var wasVisible = child.isVisible();
-          var layoutProperties = [];
+          var layoutChanged = false;
           for (var _i2 = 0, _Object$keys = Object.keys(childSteps); _i2 < _Object$keys.length; _i2++) {
             var _values$index;
             var property = _Object$keys[_i2];
             child.actualValues[property] = (_values$index = values[index]) === null || _values$index === void 0 ? void 0 : _values$index[property];
             if (ParticleUtil.affectsChildLayout(property)) {
-              layoutProperties.push(property);
+              child.removeFromNoDomUpdatingTargets(property);
+              layoutChanged = true;
             }
           }
-          if (layoutProperties.length) {
+          if (layoutChanged) {
             child.actualValues.isVisible = child.calcVisibility();
-            if (wasVisible || child.isVisible()) {
-              var _iterator2 = _createForOfIteratorHelper(layoutProperties),
-                _step2;
-              try {
-                for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
-                  var _property = _step2.value;
-                  child.removeFromNoDomUpdatingTargets(_property);
-                }
-              } catch (err) {
-                _iterator2.e(err);
-              } finally {
-                _iterator2.f();
-              }
-            }
           }
         }
       } catch (err) {
@@ -518,16 +585,45 @@ var ParticleTModel = /*#__PURE__*/function (_TModel) {
         _iterator.f();
       }
     }
+  }, {
+    key: "canBatchChildTarget",
+    value: function canBatchChildTarget(property, specification) {
+      if (!ParticleUtil.isGpuTarget(property) || !TargetParser.isTargetSpecObject(specification)) {
+        return false;
+      }
+
+      // The WebGPU shader interpolates scalar values and colors linearly. Other animation
+      // options need ParticleRuntime, which resolves each property's execution separately.
+      if (specification.interval !== undefined || specification.easing !== undefined || specification.pauseOn !== undefined || specification.loop !== undefined || specification.cycles !== undefined) {
+        return false;
+      }
+      if (specification.steps !== undefined && (!Number.isFinite(specification.steps) || specification.steps < 0)) {
+        return false;
+      }
+      if (property === "backgroundColor") {
+        return typeof specification.value === "string";
+      }
+      return typeof specification.value === "number" && Number.isFinite(specification.value);
+    }
   }, {
     key: "handleSpecialTarget",
-    value: function handleSpecialTarget(key, value) {
-      var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+    value: function handleSpecialTarget(key) {
       if (!this.gpuChildrenEnabled) {
         return false;
       }
-      var targetValues = this.getChildTargetValues(key);
-      if (targetValues) {
-        return this.handleChildTargets(key, targetValues, options);
+      var targetName = TargetUtil.getTargetName(key);
+      var targetValues = this.childTargetValues[targetName];
+      if (!targetValues) {
+        return false;
+      }
+      delete this.childTargetValues[targetName];
+      for (var index = 0; index < targetValues.length; index++) {
+        for (var _i3 = 0, _Object$entries2 = Object.entries(targetValues[index] || {}); _i3 < _Object$entries2.length; _i3++) {
+          var _Object$entries2$_i = _slicedToArray(_Object$entries2[_i3], 2),
+            property = _Object$entries2$_i[0],
+            specification = _Object$entries2$_i[1];
+          this.particleRuntime.setImperativeTarget(index, property, specification, undefined, undefined, undefined, key, this);
+        }
       }
       return false;
     }
@@ -562,17 +658,17 @@ var ParticleTModel = /*#__PURE__*/function (_TModel) {
   }, {
     key: "addGpuChild",
     value: function addGpuChild(definition) {
-      var key = TargetUtil.currentTargetName;
-      var targetName = TargetUtil.getTargetName(key);
+      var originalTargetName = TargetUtil.currentTargetName;
       var index = this.childHandles.length;
       this.gpuChildrenEnabled = true;
       var handle = new ParticleChild(this, index);
+      handle.oid = "".concat(this.oid, "_").concat(this.childGeneration);
       this.childHandles[index] = handle;
       this.childActualValues[index] = handle.actualValues;
       this.childTargetMaps[index] = handle.allTargetMap;
       try {
         var _this$pendingGpuChild, _this$pendingGpuChild2;
-        var compiled = ParticleUtil.compileChildDefinition(handle, definition);
+        var compiled = this.prepareInitialGpuChildRuntime(ParticleUtil.compileChildDefinition(handle, definition), definition);
         var child = this.createGpuChild(compiled.renderDefinition);
         if (!child) {
           this.childHandles.pop();
@@ -583,9 +679,9 @@ var ParticleTModel = /*#__PURE__*/function (_TModel) {
         Object.assign(handle.actualValues, child.initial);
         this.childActualValues[index] = handle.actualValues;
         this.childTargetMaps[index] = handle.allTargetMap;
-        this.particleRuntime.registerChild(index, targetName, compiled);
-        var pending = (_this$pendingGpuChild2 = (_this$pendingGpuChild = this.pendingGpuChildren)[targetName]) !== null && _this$pendingGpuChild2 !== void 0 ? _this$pendingGpuChild2 : _this$pendingGpuChild[targetName] = {
-          key: key,
+        this.particleRuntime.registerChild(index, originalTargetName, compiled);
+        var pending = (_this$pendingGpuChild2 = (_this$pendingGpuChild = this.pendingGpuChildren)[originalTargetName]) !== null && _this$pendingGpuChild2 !== void 0 ? _this$pendingGpuChild2 : _this$pendingGpuChild[originalTargetName] = {
+          key: originalTargetName,
           children: []
         };
         pending.children.push(_objectSpread({
@@ -594,6 +690,7 @@ var ParticleTModel = /*#__PURE__*/function (_TModel) {
         this.childGeneration++;
         this.childrenUpdateFlag = true;
         this.markLayoutDirty("addGpuChild");
+        App.tmodelIdMap[handle.oid] = handle;
         return true;
       } catch (error) {
         this.childHandles.pop();
@@ -604,6 +701,62 @@ var ParticleTModel = /*#__PURE__*/function (_TModel) {
         throw error;
       }
     }
+  }, {
+    key: "prepareInitialGpuChildRuntime",
+    value: function prepareInitialGpuChildRuntime(compiled, definition) {
+      var _loop = function _loop() {
+          var _Object$entries3$_i = _slicedToArray(_Object$entries3[_i4], 2),
+            key = _Object$entries3$_i[0],
+            specification = _Object$entries3$_i[1];
+          if (TargetUtil.getTargetName(key) !== key || !TargetParser.isTargetSpecObject(specification) || !ParticleUtil.isGpuTarget(key)) {
+            return 0; // continue
+          }
+          var value = specification.value;
+          var hasValues = Array.isArray(value) && value.length > 1;
+          var steps = specification.steps;
+          var hasSteps = Array.isArray(steps) ? steps.some(function (step) {
+            return Number(step) > 0;
+          }) : Number(steps) > 0;
+          if (!hasValues && !hasSteps) {
+            return 0; // continue
+          }
+
+          // Function-valued targets are already compiled for ParticleRuntime.
+          if (typeof value === "function") {
+            return 0; // continue
+          }
+          var targetName = ParticleUtil.getTargetName(key);
+          var initialValue = TUtil.isDefined(specification.initialValue) ? specification.initialValue : hasValues ? value[0] : value;
+          var runtimeTarget = compiled.runtimeTargets.find(function (target) {
+            return target.key === key && target.mode === "immediate";
+          });
+
+          // Initial animations belong to the child, not to the parent's GPU transition.
+          compiled.renderDefinition[targetName] = initialValue;
+          if (runtimeTarget) {
+            runtimeTarget.requiresRuntime = true;
+            runtimeTarget.requiresInitialResolution = false;
+            runtimeTarget.renderable = true;
+            runtimeTarget.target = _objectSpread({}, specification);
+          } else {
+            compiled.runtimeTargets.push({
+              key: key,
+              targetName: targetName,
+              mode: "immediate",
+              target: _objectSpread({}, specification),
+              requiresRuntime: true,
+              requiresInitialResolution: false,
+              renderable: true
+            });
+          }
+        },
+        _ret;
+      for (var _i4 = 0, _Object$entries3 = Object.entries(definition); _i4 < _Object$entries3.length; _i4++) {
+        _ret = _loop();
+        if (_ret === 0) continue;
+      }
+      return compiled;
+    }
   }, {
     key: "removeChild",
     value: function removeChild(child) {
@@ -614,13 +767,16 @@ var ParticleTModel = /*#__PURE__*/function (_TModel) {
       if (index < 0) {
         return;
       }
+      if (App.tmodelIdMap[child.oid] === child) {
+        delete App.tmodelIdMap[child.oid];
+      }
       this.particleRuntime.removeChild(index);
       this.childHandles.splice(index, 1);
       this.childActualValues.splice(index, 1);
       this.childTargetMaps.splice(index, 1);
       this.removeChildFromTransitions(index);
-      for (var _i3 = 0, _Object$values = Object.values(this.childTargetValues); _i3 < _Object$values.length; _i3++) {
-        var targetValues = _Object$values[_i3];
+      for (var _i5 = 0, _Object$values = Object.values(this.childTargetValues); _i5 < _Object$values.length; _i5++) {
+        var targetValues = _Object$values[_i5];
         targetValues === null || targetValues === void 0 || targetValues.splice(index, 1);
       }
       child.index = -1;
@@ -637,9 +793,9 @@ var ParticleTModel = /*#__PURE__*/function (_TModel) {
   }, {
     key: "removeChildFromTransitions",
     value: function removeChildFromTransitions(index) {
-      for (var _i4 = 0, _Object$values2 = Object.values(this.childTransitions); _i4 < _Object$values2.length; _i4++) {
+      for (var _i6 = 0, _Object$values2 = Object.values(this.childTransitions); _i6 < _Object$values2.length; _i6++) {
         var _transition$initialVa, _transition$values, _transition$steps, _transition$loops;
-        var transition = _Object$values2[_i4];
+        var transition = _Object$values2[_i6];
         (_transition$initialVa = transition.initialValues) === null || _transition$initialVa === void 0 || _transition$initialVa.splice(index, 1);
         (_transition$values = transition.values) === null || _transition$values === void 0 || _transition$values.splice(index, 1);
         (_transition$steps = transition.steps) === null || _transition$steps === void 0 || _transition$steps.splice(index, 1);
@@ -648,43 +804,43 @@ var ParticleTModel = /*#__PURE__*/function (_TModel) {
           transition.children = transition.children.filter(function (child) {
             return child.index !== index;
           });
-          var _iterator3 = _createForOfIteratorHelper(transition.children),
-            _step3;
+          var _iterator2 = _createForOfIteratorHelper(transition.children),
+            _step2;
           try {
-            for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
-              var child = _step3.value;
+            for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+              var child = _step2.value;
               if (child.index > index) {
                 child.index--;
               }
             }
           } catch (err) {
-            _iterator3.e(err);
+            _iterator2.e(err);
           } finally {
-            _iterator3.f();
+            _iterator2.f();
           }
         }
       }
-      for (var _i5 = 0, _Object$values3 = Object.values(this.pendingGpuChildren); _i5 < _Object$values3.length; _i5++) {
-        var pending = _Object$values3[_i5];
+      for (var _i7 = 0, _Object$values3 = Object.values(this.pendingGpuChildren); _i7 < _Object$values3.length; _i7++) {
+        var pending = _Object$values3[_i7];
         if (!(pending !== null && pending !== void 0 && pending.children)) {
           continue;
         }
         pending.children = pending.children.filter(function (child) {
           return child.index !== index;
         });
-        var _iterator4 = _createForOfIteratorHelper(pending.children),
-          _step4;
+        var _iterator3 = _createForOfIteratorHelper(pending.children),
+          _step3;
         try {
-          for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
-            var _child = _step4.value;
+          for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+            var _child = _step3.value;
             if (_child.index > index) {
               _child.index--;
             }
           }
         } catch (err) {
-          _iterator4.e(err);
+          _iterator3.e(err);
         } finally {
-          _iterator4.f();
+          _iterator3.f();
         }
       }
     }
@@ -711,11 +867,11 @@ var ParticleTModel = /*#__PURE__*/function (_TModel) {
       var loops = {};
       var valueLists = {};
       var hasTransition = false;
-      for (var _i6 = 0, _Object$entries2 = Object.entries(definition); _i6 < _Object$entries2.length; _i6++) {
+      for (var _i8 = 0, _Object$entries4 = Object.entries(definition); _i8 < _Object$entries4.length; _i8++) {
         var _resolved$valueList;
-        var _Object$entries2$_i = _slicedToArray(_Object$entries2[_i6], 2),
-          property = _Object$entries2$_i[0],
-          value = _Object$entries2$_i[1];
+        var _Object$entries4$_i = _slicedToArray(_Object$entries4[_i8], 2),
+          property = _Object$entries4$_i[0],
+          value = _Object$entries4$_i[1];
         var resolved = this.resolveInitialChildProperty(value);
         if (!resolved) {
           return;
@@ -748,99 +904,81 @@ var ParticleTModel = /*#__PURE__*/function (_TModel) {
     key: "finalizeChildrenTarget",
     value: function finalizeChildrenTarget(key) {
       var _this6 = this;
-      var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-      if (!ParticleUtil.isChildrenTarget(key)) {
+      if (!ParticleUtil.isChildrenTarget(key) && !TargetParser.isExplodeChildrenTarget(key)) {
         return false;
       }
-      var targetName = TargetUtil.getTargetName(key);
-      var pending = this.pendingGpuChildren[targetName];
+      var pending = this.pendingGpuChildren[key];
       if (!(pending !== null && pending !== void 0 && pending.children.length)) {
         return false;
       }
       this.invalidateLayout();
-      var defaultSteps = Math.max(0, Number(options.steps) || 0);
-      var segmentCount = this.getChildrenSegmentCount(pending.children);
-      var segment = this.buildChildTransitionSegment(pending.children, 0, defaultSteps);
-      this.commitImmediateChildTransitionValues(pending.children, segment.values, segment.steps);
-      delete this.pendingGpuChildren[targetName];
-      if (!segment.hasSegment || segment.maxSteps === 0) {
-        this.commitChildTransitionSegment(pending.children, segment.values, segment.steps);
-        var runtimeIndexes = pending.children.map(function (child) {
-          return child.index;
-        }).filter(function (index) {
-          var state = _this6.childRuntimeStates[index];
-          return state && !state.done;
-        });
-        var _iterator5 = _createForOfIteratorHelper(runtimeIndexes),
-          _step5;
-        try {
-          for (_iterator5.s(); !(_step5 = _iterator5.n()).done;) {
-            var index = _step5.value;
-            this.particleRuntime.queueStart(index);
-          }
-        } catch (err) {
-          _iterator5.e(err);
-        } finally {
-          _iterator5.f();
-        }
-        if (this.hasDom()) {
-          this.particleRenderer.setParticles(this.childHandles).then(function () {
-            _this6.particleRuntime.markRenderReady(runtimeIndexes);
-          });
+      delete this.pendingGpuChildren[key];
+      var childIndexes = pending.children.map(function (child) {
+        return child.index;
+      });
+      var runtimeIndexes = childIndexes.filter(function (index) {
+        var state = _this6.childRuntimeStates[index];
+        return state && !state.done;
+      });
+      var _iterator4 = _createForOfIteratorHelper(runtimeIndexes),
+        _step4;
+      try {
+        for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
+          var index = _step4.value;
+          this.particleRuntime.queueStart(index);
         }
-        return {
-          handled: true,
-          steps: 0
-        };
+      } catch (err) {
+        _iterator4.e(err);
+      } finally {
+        _iterator4.f();
+      }
+      if (this.hasDom()) {
+        var particlesReady = this.particleRenderer.setParticles(this.childHandles);
+        var renderReady = TargetParser.isExplodeChildrenTarget(key) && this.explodeCapturePromise ? Promise.all([particlesReady, this.explodeCapturePromise]) : Promise.all([particlesReady]);
+        renderReady.then(function (results) {
+          if (results.some(function (result) {
+            return result !== true;
+          })) {
+            return;
+          }
+          _this6.particleRuntime.markRenderReady(childIndexes);
+        }).catch(function (error) {
+          return console.error(error);
+        });
       }
-      var transition = {
-        children: pending.children,
-        segmentIndex: 0,
-        segmentCount: segmentCount,
-        defaultSteps: defaultSteps,
-        initialValues: segment.initialValues,
-        values: segment.values,
-        steps: segment.steps,
-        loops: segment.loops,
-        hasLoop: segment.hasLoop,
-        generation: this.childGeneration
-      };
-      this.childTransitions[targetName] = transition;
-      this.activeChildTransitionKey = key;
-      this.addChildTransitionLayoutTargets(transition);
       return {
         handled: true,
-        steps: segment.maxSteps
+        steps: 0
       };
     }
   }, {
     key: "addChildTransitionLayoutTargets",
     value: function addChildTransitionLayoutTargets(transition) {
-      var _iterator6 = _createForOfIteratorHelper(transition.children),
-        _step6;
+      var _iterator5 = _createForOfIteratorHelper(transition.children),
+        _step5;
       try {
-        for (_iterator6.s(); !(_step6 = _iterator6.n()).done;) {
+        for (_iterator5.s(); !(_step5 = _iterator5.n()).done;) {
           var _transition$steps2;
-          var transitionChild = _step6.value;
+          var transitionChild = _step5.value;
           var index = transitionChild.index;
           var child = this.childHandles[index];
           var childSteps = (_transition$steps2 = transition.steps) === null || _transition$steps2 === void 0 ? void 0 : _transition$steps2[index];
           if (!child || !childSteps) {
             continue;
           }
-          for (var _i7 = 0, _Object$entries3 = Object.entries(childSteps); _i7 < _Object$entries3.length; _i7++) {
-            var _Object$entries3$_i = _slicedToArray(_Object$entries3[_i7], 2),
-              property = _Object$entries3$_i[0],
-              steps = _Object$entries3$_i[1];
+          for (var _i9 = 0, _Object$entries5 = Object.entries(childSteps); _i9 < _Object$entries5.length; _i9++) {
+            var _Object$entries5$_i = _slicedToArray(_Object$entries5[_i9], 2),
+              property = _Object$entries5$_i[0],
+              steps = _Object$entries5$_i[1];
             if (steps > 0 && ParticleUtil.affectsChildLayout(property)) {
               child.addToNoDomUpdatingTargets(property);
             }
           }
         }
       } catch (err) {
-        _iterator6.e(err);
+        _iterator5.e(err);
       } finally {
-        _iterator6.f();
+        _iterator5.f();
       }
     }
   }, {
@@ -868,8 +1006,8 @@ var ParticleTModel = /*#__PURE__*/function (_TModel) {
       }
       var currentStep = Math.max(0, Number(this.getTargetStep(key)) || 0);
       var changed = false;
-      for (var _i8 = 0, _arr = _toConsumableArray(child.noDomUpdatingTargets); _i8 < _arr.length; _i8++) {
-        var property = _arr[_i8];
+      for (var _i10 = 0, _arr = _toConsumableArray(child.noDomUpdatingTargets); _i10 < _arr.length; _i10++) {
+        var property = _arr[_i10];
         if (!ParticleUtil.affectsChildLayout(property)) {
           child.removeFromNoDomUpdatingTargets(property);
           continue;
@@ -942,11 +1080,11 @@ var ParticleTModel = /*#__PURE__*/function (_TModel) {
       var maxSteps = 0;
       var hasSegment = false;
       var hasLoop = false;
-      var _iterator7 = _createForOfIteratorHelper(children),
-        _step7;
+      var _iterator6 = _createForOfIteratorHelper(children),
+        _step6;
       try {
-        for (_iterator7.s(); !(_step7 = _iterator7.n()).done;) {
-          var transitionChild = _step7.value;
+        for (_iterator6.s(); !(_step6 = _iterator6.n()).done;) {
+          var transitionChild = _step6.value;
           var index = transitionChild.index;
           var child = this.childHandles[index];
           if (!child) {
@@ -960,8 +1098,8 @@ var ParticleTModel = /*#__PURE__*/function (_TModel) {
           var target = void 0;
           var childSteps = void 0;
           var childLoops = void 0;
-          for (var _i9 = 0, _Object$keys2 = Object.keys(transitionChild.target); _i9 < _Object$keys2.length; _i9++) {
-            var property = _Object$keys2[_i9];
+          for (var _i11 = 0, _Object$keys2 = Object.keys(transitionChild.target); _i11 < _Object$keys2.length; _i11++) {
+            var property = _Object$keys2[_i11];
             var valueList = transitionChild.valueLists[property];
             var value = void 0;
             if (valueList) {
@@ -998,9 +1136,9 @@ var ParticleTModel = /*#__PURE__*/function (_TModel) {
           }
         }
       } catch (err) {
-        _iterator7.e(err);
+        _iterator6.e(err);
       } finally {
-        _iterator7.f();
+        _iterator6.f();
       }
       return {
         initialValues: initialValues,
@@ -1028,8 +1166,8 @@ var ParticleTModel = /*#__PURE__*/function (_TModel) {
     key: "getChildSegmentCount",
     value: function getChildSegmentCount(child) {
       var count = 0;
-      for (var _i10 = 0, _Object$values4 = Object.values(child.valueLists); _i10 < _Object$values4.length; _i10++) {
-        var valueList = _Object$values4[_i10];
+      for (var _i12 = 0, _Object$values4 = Object.values(child.valueLists); _i12 < _Object$values4.length; _i12++) {
+        var valueList = _Object$values4[_i12];
         count = Math.max(count, valueList.length - 1);
       }
       return count;
@@ -1038,17 +1176,17 @@ var ParticleTModel = /*#__PURE__*/function (_TModel) {
     key: "getChildrenSegmentCount",
     value: function getChildrenSegmentCount(children) {
       var count = 0;
-      var _iterator8 = _createForOfIteratorHelper(children),
-        _step8;
+      var _iterator7 = _createForOfIteratorHelper(children),
+        _step7;
       try {
-        for (_iterator8.s(); !(_step8 = _iterator8.n()).done;) {
-          var child = _step8.value;
+        for (_iterator7.s(); !(_step7 = _iterator7.n()).done;) {
+          var child = _step7.value;
           count = Math.max(count, this.getChildSegmentCount(child));
         }
       } catch (err) {
-        _iterator8.e(err);
+        _iterator7.e(err);
       } finally {
-        _iterator8.f();
+        _iterator7.f();
       }
       return count;
     }
@@ -1069,7 +1207,9 @@ var ParticleTModel = /*#__PURE__*/function (_TModel) {
       if (!transition || transition.generation !== this.childGeneration) {
         return false;
       }
-      this.particleRenderer.setTransitionStep(this.getTargetStep(key));
+      if (this.isVisible()) {
+        this.particleRenderer.setTransitionStep(this.getTargetStep(key));
+      }
       return true;
     }
   }, {
@@ -1224,11 +1364,11 @@ var ParticleTModel = /*#__PURE__*/function (_TModel) {
           transition.values[index] = target;
         }
         var childSteps = (_transition$steps4$_i = (_transition$steps4 = transition.steps)[_index = index]) !== null && _transition$steps4$_i !== void 0 ? _transition$steps4$_i : _transition$steps4[_index] = {};
-        var _iterator9 = _createForOfIteratorHelper(layoutProperties),
-          _step9;
+        var _iterator8 = _createForOfIteratorHelper(layoutProperties),
+          _step8;
         try {
-          for (_iterator9.s(); !(_step9 = _iterator9.n()).done;) {
-            var property = _step9.value;
+          for (_iterator8.s(); !(_step8 = _iterator8.n()).done;) {
+            var property = _step8.value;
             if (Object.prototype.hasOwnProperty.call(childSteps, property)) {
               continue;
             }
@@ -1240,9 +1380,9 @@ var ParticleTModel = /*#__PURE__*/function (_TModel) {
             childSteps[property] = 0;
           }
         } catch (err) {
-          _iterator9.e(err);
+          _iterator8.e(err);
         } finally {
-          _iterator9.f();
+          _iterator8.f();
         }
       }
       if (transition.generation !== this.childGeneration || this.restoringParticleRuntime || !this.hasDom()) {
@@ -1261,11 +1401,11 @@ var ParticleTModel = /*#__PURE__*/function (_TModel) {
     key: "commitImmediateChildTransitionValues",
     value: function commitImmediateChildTransitionValues(children, values, steps) {
       var changed = false;
-      var _iterator10 = _createForOfIteratorHelper(children),
-        _step10;
+      var _iterator9 = _createForOfIteratorHelper(children),
+        _step9;
       try {
-        for (_iterator10.s(); !(_step10 = _iterator10.n()).done;) {
-          var transitionChild = _step10.value;
+        for (_iterator9.s(); !(_step9 = _iterator9.n()).done;) {
+          var transitionChild = _step9.value;
           var index = transitionChild.index;
           var child = this.childHandles[index];
           var childSteps = steps === null || steps === void 0 ? void 0 : steps[index];
@@ -1273,11 +1413,11 @@ var ParticleTModel = /*#__PURE__*/function (_TModel) {
             continue;
           }
           var layoutChanged = false;
-          for (var _i11 = 0, _Object$entries4 = Object.entries(childSteps); _i11 < _Object$entries4.length; _i11++) {
+          for (var _i13 = 0, _Object$entries6 = Object.entries(childSteps); _i13 < _Object$entries6.length; _i13++) {
             var _values$index2;
-            var _Object$entries4$_i = _slicedToArray(_Object$entries4[_i11], 2),
-              property = _Object$entries4$_i[0],
-              propertySteps = _Object$entries4$_i[1];
+            var _Object$entries6$_i = _slicedToArray(_Object$entries6[_i13], 2),
+              property = _Object$entries6$_i[0],
+              propertySteps = _Object$entries6$_i[1];
             if (propertySteps !== 0) {
               continue;
             }
@@ -1296,9 +1436,9 @@ var ParticleTModel = /*#__PURE__*/function (_TModel) {
           }
         }
       } catch (err) {
-        _iterator10.e(err);
+        _iterator9.e(err);
       } finally {
-        _iterator10.f();
+        _iterator9.f();
       }
       return changed;
     }
@@ -1324,6 +1464,26 @@ var ParticleTModel = /*#__PURE__*/function (_TModel) {
     value: function getParticleCount() {
       return this.childHandles.length;
     }
+  }, {
+    key: "getRuntimeSnapshotFields",
+    value: function getRuntimeSnapshotFields() {
+      return {
+        childHandleRuntimeStates: this.childHandles.map(function (child) {
+          return {
+            oid: child.oid,
+            x: child.x,
+            y: child.y,
+            targets: child.targets,
+            targetValues: child.targetValues,
+            updatingTargetList: _toConsumableArray(child.updatingTargetList),
+            activeTargetList: _toConsumableArray(child.activeTargetList),
+            activatedTargets: _toConsumableArray(child.activatedTargets),
+            noDomUpdatingTargets: child.noDomUpdatingTargets ? new Set(child.noDomUpdatingTargets) : undefined,
+            pendingTargets: child.pendingTargets
+          };
+        })
+      };
+    }
   }, {
     key: "excludeRuntimeSnapshotField",
     value: function excludeRuntimeSnapshotField(key) {
@@ -1336,15 +1496,44 @@ var ParticleTModel = /*#__PURE__*/function (_TModel) {
       this.particleRenderer.destroy();
       this.childActualValues || (this.childActualValues = []);
       this.childTargetMaps || (this.childTargetMaps = []);
+      var childHandleRuntimeStates = this.childHandleRuntimeStates || [];
       this.childHandles = this.childActualValues.map(function (values, index) {
+        var _runtimeState$oid, _runtimeState$x, _runtimeState$y;
         var child = new ParticleChild(_this9, index);
+        var runtimeState = childHandleRuntimeStates[index];
+        child.oid = (_runtimeState$oid = runtimeState === null || runtimeState === void 0 ? void 0 : runtimeState.oid) !== null && _runtimeState$oid !== void 0 ? _runtimeState$oid : child.oid;
         var targetMap = _this9.childTargetMaps[index] || {};
         Object.assign(child.actualValues, values);
         Object.assign(child.allTargetMap, targetMap);
+        child.x = (_runtimeState$x = runtimeState === null || runtimeState === void 0 ? void 0 : runtimeState.x) !== null && _runtimeState$x !== void 0 ? _runtimeState$x : child.x;
+        child.y = (_runtimeState$y = runtimeState === null || runtimeState === void 0 ? void 0 : runtimeState.y) !== null && _runtimeState$y !== void 0 ? _runtimeState$y : child.y;
+        if (runtimeState) {
+          var _child$activeTargetLi, _child$activatedTarge, _runtimeState$pending;
+          Object.assign(child.targets, runtimeState.targets);
+          Object.assign(child.targetValues, runtimeState.targetValues);
+          var _iterator10 = _createForOfIteratorHelper(runtimeState.updatingTargetList || []),
+            _step10;
+          try {
+            for (_iterator10.s(); !(_step10 = _iterator10.n()).done;) {
+              var key = _step10.value;
+              child.updatingTargetList.push(key);
+              child.updatingTargetMap[key] = true;
+            }
+          } catch (err) {
+            _iterator10.e(err);
+          } finally {
+            _iterator10.f();
+          }
+          (_child$activeTargetLi = child.activeTargetList).push.apply(_child$activeTargetLi, _toConsumableArray(runtimeState.activeTargetList || []));
+          (_child$activatedTarge = child.activatedTargets).push.apply(_child$activatedTarge, _toConsumableArray(runtimeState.activatedTargets || []));
+          child.noDomUpdatingTargets = runtimeState.noDomUpdatingTargets ? new Set(runtimeState.noDomUpdatingTargets) : undefined;
+          child.pendingTargets = (_runtimeState$pending = runtimeState.pendingTargets) !== null && _runtimeState$pending !== void 0 ? _runtimeState$pending : false;
+        }
         _this9.childActualValues[index] = child.actualValues;
         _this9.childTargetMaps[index] = child.allTargetMap;
         return child;
       });
+      delete this.childHandleRuntimeStates;
       this.childGeneration = Number.isInteger(this.childGeneration) ? this.childGeneration : 0;
       this.particleValuesDirty = false;
       this.particleRenderRequested = false;
@@ -1393,10 +1582,16 @@ function isParticleTModel(targets) {
   if (!targets) {
     return false;
   }
-  for (var _i12 = 0, _Object$entries5 = Object.entries(targets); _i12 < _Object$entries5.length; _i12++) {
-    var _Object$entries5$_i = _slicedToArray(_Object$entries5[_i12], 2),
-      key = _Object$entries5$_i[0],
-      target = _Object$entries5$_i[1];
+  for (var _i14 = 0, _Object$entries7 = Object.entries(targets); _i14 < _Object$entries7.length; _i14++) {
+    var _Object$entries7$_i = _slicedToArray(_Object$entries7[_i14], 2),
+      key = _Object$entries7$_i[0],
+      target = _Object$entries7$_i[1];
+    if (TargetParser.isExplodeChildrenTarget(key)) {
+      if ((target === null || target === void 0 ? void 0 : target.renderer) !== "dom") {
+        return true;
+      }
+      continue;
+    }
     if (!ParticleUtil.isChildrenTarget(key)) {
       continue;
     }