targetj 1.0.259 → 1.1.0

package/build/ParticleUtil.js

@@ -0,0 +1,265 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+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 _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+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 _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
+function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
+function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), 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 _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { TargetParser } from "./TargetParser.js";
+import { TargetUtil } from "./TargetUtil.js";
+import { TUtil } from "./TUtil.js";
+var ParticleUtil = /*#__PURE__*/function () {
+  function ParticleUtil() {
+    _classCallCheck(this, ParticleUtil);
+  }
+  return _createClass(ParticleUtil, null, [{
+    key: "affectsChildLayout",
+    value: function affectsChildLayout(key) {
+      return ["x", "y", "width", "height"].includes(ParticleUtil.getTargetName(key));
+    }
+  }, {
+    key: "affectsChildFlowLayout",
+    value: function affectsChildFlowLayout(key) {
+      return ["width", "height"].includes(ParticleUtil.getTargetName(key));
+    }
+  }, {
+    key: "isChildrenTarget",
+    value: function isChildrenTarget(key) {
+      return ParticleUtil.childrenTargets.has(TargetUtil.getTargetName(key));
+    }
+  }, {
+    key: "getTargetName",
+    value: function getTargetName(key) {
+      var cleanKey = TargetUtil.getTargetName(key);
+      return ParticleUtil.gpuRenderAliases[cleanKey] || cleanKey;
+    }
+  }, {
+    key: "isGpuTarget",
+    value: function isGpuTarget(key) {
+      return ParticleUtil.gpuRenderTargets.has(ParticleUtil.getTargetName(key));
+    }
+  }, {
+    key: "getTargetMode",
+    value: function getTargetMode(key) {
+      if (key.endsWith("$$")) {
+        return "deferred";
+      }
+      if (key.endsWith("$")) {
+        return "reactive";
+      }
+      return "immediate";
+    }
+  }, {
+    key: "isTransientRuntimeField",
+    value: function isTransientRuntimeField(key) {
+      return ParticleUtil.transientRuntimeFields.has(key);
+    }
+  }, {
+    key: "isFunctionBasedTarget",
+    value: function isFunctionBasedTarget(target) {
+      if (typeof target === "function") {
+        return true;
+      }
+      return TargetParser.isTargetSpecObject(target) && typeof target.value === "function";
+    }
+  }, {
+    key: "resolveValue",
+    value: function resolveValue(target, child) {
+      if (typeof target === "function") {
+        return ParticleUtil.resolveValue(target.call(child), child);
+      }
+      if (!TargetParser.isTargetSpecObject(target)) {
+        return target;
+      }
+      var resolved = _objectSpread({}, target);
+      if (typeof resolved.value === "function") {
+        resolved.value = ParticleUtil.resolveValue(resolved.value.call(child), child);
+      }
+      return resolved;
+    }
+  }, {
+    key: "getInitialValue",
+    value: function getInitialValue(value) {
+      if (TargetParser.isValueStepsCycleArray(value)) {
+        return value[0];
+      }
+      if (!TargetParser.isTargetSpecObject(value)) {
+        return value;
+      }
+      if (Array.isArray(value.value)) {
+        return value.value[0];
+      }
+      return value.value;
+    }
+  }, {
+    key: "setInitialValue",
+    value: function setInitialValue(child, key, value) {
+      if (!child || !TUtil.isDefined(value)) {
+        return;
+      }
+      child.val(key, value);
+    }
+  }, {
+    key: "requiresRuntime",
+    value: function requiresRuntime(key, target) {
+      var mode = ParticleUtil.getTargetMode(key);
+      if (!ParticleUtil.isGpuTarget(key) || TargetParser.isIntervalTarget(target)) {
+        return true;
+      }
+      if (mode !== "immediate") {
+        return true;
+      }
+      if (TargetParser.isValueStepsCycleArray(target)) {
+        return true;
+      }
+      if (!TargetParser.isTargetSpecObject(target)) {
+        return false;
+      }
+      return typeof target.value === "function" || typeof target.steps === "function" || TUtil.isDefined(target.interval) || TUtil.isDefined(target.easing) || TUtil.isDefined(target.cycles) || TUtil.isDefined(target.loop) || TUtil.isDefined(target.pauseOn);
+    }
+  }, {
+    key: "compileChildDefinition",
+    value: function compileChildDefinition(child, definition) {
+      var renderDefinition = {};
+      var runtimeTargets = [];
+      var entries = Object.entries(definition).map(function (_ref) {
+        var _ref2 = _slicedToArray(_ref, 2),
+          key = _ref2[0],
+          target = _ref2[1];
+        return {
+          key: key,
+          target: target,
+          mode: ParticleUtil.getTargetMode(key),
+          targetName: ParticleUtil.getTargetName(key),
+          requiresRuntime: ParticleUtil.requiresRuntime(key, target)
+        };
+      });
+      var _iterator = _createForOfIteratorHelper(entries),
+        _step;
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var entry = _step.value;
+          var cleanKey = TargetUtil.getTargetName(entry.key);
+          child.allTargetMap[cleanKey] = entry.key;
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+      var _iterator2 = _createForOfIteratorHelper(entries),
+        _step2;
+      try {
+        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+          var _entry = _step2.value;
+          if (_entry.mode !== "immediate" || ParticleUtil.isFunctionBasedTarget(_entry.target)) {
+            continue;
+          }
+          var resolved = ParticleUtil.resolveValue(_entry.target, child);
+          var initialValue = ParticleUtil.getInitialValue(resolved);
+          ParticleUtil.setInitialValue(child, _entry.targetName, initialValue);
+          if (ParticleUtil.isGpuTarget(_entry.key) && !_entry.requiresRuntime) {
+            renderDefinition[_entry.targetName] = resolved;
+          }
+        }
+      } catch (err) {
+        _iterator2.e(err);
+      } finally {
+        _iterator2.f();
+      }
+      var _iterator3 = _createForOfIteratorHelper(entries),
+        _step3;
+      try {
+        for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+          var _entry2 = _step3.value;
+          if (_entry2.mode !== "immediate" || !ParticleUtil.isGpuTarget(_entry2.key) || !ParticleUtil.isFunctionBasedTarget(_entry2.target)) {
+            continue;
+          }
+          var _resolved = ParticleUtil.resolveValue(_entry2.target, child);
+          _entry2.requiresRuntime = ParticleUtil.requiresRuntime(_entry2.key, _resolved);
+          if (_entry2.requiresRuntime) {
+            var _initialValue = ParticleUtil.getInitialValue(_resolved);
+            if (TUtil.isDefined(_initialValue)) {
+              renderDefinition[_entry2.targetName] = _initialValue;
+              ParticleUtil.setInitialValue(child, _entry2.targetName, _initialValue);
+            }
+            continue;
+          }
+          renderDefinition[_entry2.targetName] = _resolved;
+          ParticleUtil.setInitialValue(child, _entry2.targetName, ParticleUtil.getInitialValue(_resolved));
+          var resolvedValue = TargetParser.isTargetSpecObject(_resolved) ? _resolved.value : _resolved;
+          if (ParticleUtil.affectsChildLayout(_entry2.targetName) && !Array.isArray(resolvedValue)) {
+            runtimeTargets.push({
+              key: _entry2.key,
+              targetName: _entry2.targetName,
+              mode: _entry2.mode,
+              target: TargetParser.isTargetSpecObject(_entry2.target) ? _objectSpread({}, _entry2.target) : {
+                value: _entry2.target
+              },
+              requiresRuntime: false,
+              requiresInitialResolution: false,
+              renderable: true
+            });
+          }
+        }
+      } catch (err) {
+        _iterator3.e(err);
+      } finally {
+        _iterator3.f();
+      }
+      var _iterator4 = _createForOfIteratorHelper(entries),
+        _step4;
+      try {
+        for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
+          var _entry3 = _step4.value;
+          if (!_entry3.requiresRuntime) {
+            continue;
+          }
+          var requiresInitialResolution = _entry3.mode === "immediate" && ParticleUtil.isGpuTarget(_entry3.key) && ParticleUtil.isFunctionBasedTarget(_entry3.target);
+          var runtimeTarget = {
+            key: _entry3.key,
+            targetName: _entry3.targetName,
+            mode: _entry3.mode,
+            target: TargetParser.isTargetSpecObject(_entry3.target) ? _objectSpread({}, _entry3.target) : {
+              value: _entry3.target
+            },
+            requiresRuntime: true,
+            requiresInitialResolution: requiresInitialResolution,
+            renderable: ParticleUtil.isGpuTarget(_entry3.key)
+          };
+          runtimeTargets.push(runtimeTarget);
+          if (ParticleUtil.isGpuTarget(_entry3.key) && _entry3.mode === "immediate" && !ParticleUtil.isFunctionBasedTarget(_entry3.target)) {
+            var _resolved2 = ParticleUtil.resolveValue(_entry3.target, child);
+            var _initialValue2 = ParticleUtil.getInitialValue(_resolved2);
+            renderDefinition[_entry3.targetName] = _initialValue2;
+            ParticleUtil.setInitialValue(child, _entry3.targetName, _initialValue2);
+          }
+        }
+      } catch (err) {
+        _iterator4.e(err);
+      } finally {
+        _iterator4.f();
+      }
+      return {
+        renderDefinition: renderDefinition,
+        runtimeTargets: runtimeTargets
+      };
+    }
+  }]);
+}();
+_defineProperty(ParticleUtil, "gpuRenderTargets", new Set(["x", "y", "width", "height", "borderRadius", "backgroundColor", "rotate", "opacity", "scale"]));
+_defineProperty(ParticleUtil, "gpuRenderAliases", {
+  background: "backgroundColor"
+});
+_defineProperty(ParticleUtil, "childrenTargets", new Set(["addChildren", "children"]));
+_defineProperty(ParticleUtil, "transientRuntimeFields", new Set(["particleRenderer", "childHandles", "particleValuesDirty", "particleRenderRequested", "pendingGpuChildren", "layoutEpoch", "completeLayoutEpoch", "completeChildrenLayoutState", "layoutCompleteWaiters", "particleSyncPromise", "restoringParticleRuntime"]));
+export { ParticleUtil };

package/build/RunScheduler.js

@@ -249,9 +249,11 @@ var RunScheduler = /*#__PURE__*/function () {
         var newDelay = this.nextRuns.length > 0 ? this.nextRuns[0].delay - (TUtil.now() - this.nextRuns[0].insertTime) : undefined;
         var manager = getManager();
         var hasImmediateWork = manager.lists.restyle.length > 0 || manager.lists.reasyncStyle.length > 0 || getLocationManager().activatedList.length > 0;
-        if (newDelay === undefined || manager.lists.activeTModels.length > 0 || manager.lists.updatingTModels.length > 0 || hasImmediateWork) {
+        var hasNoDomVisibilityWork = manager.lists.noDomVisibilityTModels.length > 0;
+        if (newDelay === undefined || manager.lists.activeTModels.length > 0 || manager.lists.updatingTModels.length > 0 || hasImmediateWork || hasNoDomVisibilityWork) {
           if (manager.lists.updatingTModels.length > 0) {
             this.schedule(1, "getManager-needsRerun-updatingTModels");
+            return;
           } else if (manager.lists.activeTModels.length > 0) {
             var activeTModel = manager.lists.activeTModels.find(function (tmodel) {
               return tmodel.targetExecutionCount === 0 || tmodel.activeTargetList.filter(function (target) {
@@ -264,10 +266,15 @@ var RunScheduler = /*#__PURE__*/function () {
               var delay = !this.activeStartTime || TUtil.now() - this.activeStartTime > 15 ? 1 : 15;
               this.activeStartTime = TUtil.now();
               this.schedule(delay, "getManager-needsRerun-".concat(activeTModel.oid, "-").concat(activeTModel.activeTargetList));
+              return;
             }
-          } else if (hasImmediateWork) {
+          }
+          if (hasImmediateWork) {
             this.schedule(1, 'needsRerun-dom-work');
           }
+          if (hasNoDomVisibilityWork) {
+            this.schedule(15, "needsRerun-noDomVisibility");
+          }
         }
       }
       this.executeNextRun();
@@ -402,7 +409,7 @@ var RunScheduler = /*#__PURE__*/function () {
       if (runToExecute) {
         this.setDelayProcess(runToExecute.runId, runToExecute.insertTime, runToExecute.delay, TUtil.now(), 0);
       } else if (this.nextRuns.length > 0) {
-        var nextValidRun = this.nextRuns[0];
+        var nextValidRun = this.nextRuns.shift();
         var _now = TUtil.now();
         var _newDelay = Math.max(0, nextValidRun.delay - (_now - nextValidRun.insertTime));
         this.setDelayProcess(nextValidRun.runId, nextValidRun.insertTime, nextValidRun.delay, _now + _newDelay, _newDelay);

package/build/ScheduleUtil.js

@@ -103,13 +103,13 @@ var ScheduleUtil = /*#__PURE__*/function () {
           if (TUtil.isDefined(remaining)) {
             ScheduleUtil.resumeSchedule(tmodel, key);
             tmodel.addTargetToStatusList(key);
-            getRunScheduler().scheduleOnlyIfEarlier(remaining, "resume-".concat(tmodel.oid, "-").concat(key));
+            getRunScheduler().scheduleOnlyIfEarlier(remaining, "resume1-".concat(tmodel.oid, "-").concat(key));
             continue;
           }
           if (TUtil.isDefined(tmodel.getScheduleTimeStamp(key))) {
             var delay = ScheduleUtil.scheduleExecution(tmodel, key);
             tmodel.addTargetToStatusList(key);
-            getRunScheduler().scheduleOnlyIfEarlier(delay, "resume-".concat(tmodel.oid, "-").concat(key));
+            getRunScheduler().scheduleOnlyIfEarlier(delay, "resume2-".concat(tmodel.oid, "-").concat(key));
           }
         }
       } catch (err) {

package/build/StateManager.js

@@ -26,9 +26,9 @@ import { tApp, App, getRunScheduler, getLocationManager, getAnimationManager, ge
 import { AnimationUtil } from "./AnimationUtil.js";
 import { DomInit } from "./DomInit.js";
 import { $Dom } from "./$Dom.js";
-import { TModel } from "./TModel.js";
 import { TargetUtil } from "./TargetUtil.js";
 import { TModelUtil } from "./TModelUtil.js";
+import { TModel } from "./TModel.js";
 import { StateUtil } from "./StateUtil.js";
 /**
  * It enables storing and restoring state.
@@ -54,22 +54,39 @@ var StateManager = /*#__PURE__*/function () {
               this.syncAnimationsForCheckpoint();
               runSnapshot = getRunScheduler().getSnapshot();
               $pageDom = TModelUtil.getPageDom();
+              _context.t0 = key;
+              _context.t1 = TUtil.now();
+              _context.t2 = $pageDom.innerHTML();
+              _context.t3 = TModelUtil.captureDomState($pageDom);
+              _context.t4 = _objectSpread({}, App.oids);
+              _context.t5 = tApp.tRoot.createRuntimeSnapshot();
+              _context.t6 = getLoader().createRuntimeSnapshot();
+              _context.t7 = Object.keys(tApp.manager.visibleOidMap);
+              _context.t8 = $Dom.getWindowScrollLeft() || 0;
+              _context.t9 = $Dom.getWindowScrollTop() || 0;
+              _context.t10 = runSnapshot;
+              _context.next = 17;
+              return this.captureGpuVisuals();
+            case 17:
+              _context.t11 = _context.sent;
               checkpoint = {
-                key: key,
-                capturedAt: TUtil.now(),
-                html: $pageDom.innerHTML(),
-                domState: TModelUtil.captureDomState($pageDom),
-                oids: _objectSpread({}, App.oids),
-                rootSnapshot: tApp.tRoot.createRuntimeSnapshot(),
-                loaderSnapshot: getLoader().createRuntimeSnapshot(),
-                visibleOids: Object.keys(tApp.manager.visibleOidMap),
-                scrollLeft: $Dom.getWindowScrollLeft() || 0,
-                scrollTop: $Dom.getWindowScrollTop() || 0,
-                runSnapshot: runSnapshot
+                key: _context.t0,
+                capturedAt: _context.t1,
+                html: _context.t2,
+                domState: _context.t3,
+                oids: _context.t4,
+                rootSnapshot: _context.t5,
+                loaderSnapshot: _context.t6,
+                visibleOids: _context.t7,
+                scrollLeft: _context.t8,
+                scrollTop: _context.t9,
+                runSnapshot: _context.t10,
+                gpuVisuals: _context.t11
               };
+              this.releaseGpuVisuals(this.stateCheckpoints[key]);
               this.stateCheckpoints[key] = checkpoint;
               return _context.abrupt("return", checkpoint);
-            case 7:
+            case 22:
             case "end":
               return _context.stop();
           }
@@ -93,6 +110,7 @@ var StateManager = /*#__PURE__*/function () {
           models,
           $pageDom,
           visibleModels,
+          restoredWithDom,
           $restoredPageDom,
           _args2 = arguments;
         return _regeneratorRuntime().wrap(function _callee2$(_context2) {
@@ -128,27 +146,38 @@ var StateManager = /*#__PURE__*/function () {
               getLoader().restoreRuntimeSnapshot(checkpoint.loaderSnapshot, tmodelIdMap);
               $pageDom = TModelUtil.getPageDom();
               $pageDom.innerHTML(checkpoint.html);
-              TModelUtil.restoreDomState($pageDom, checkpoint.domState);
+              TModelUtil.restoreMountedDom($pageDom, checkpoint.domState);
+              this.showGpuRestoreVisuals(checkpoint.gpuVisuals);
               tApp.tRoot.$dom = TModelUtil.getRootDom();
               visibleModels = checkpoint.visibleOids.map(function (oid) {
                 return tmodelIdMap[oid];
               }).filter(Boolean);
-              this.connectRestoredDoms(visibleModels, models);
+              restoredWithDom = this.connectRestoredDoms(visibleModels, models);
+              tApp.manager.activatePendingTargetsAfterDom(restoredWithDom, {
+                restoredDoneTargets: true
+              });
               tApp.tRoot.markLayoutDirty("checkpointRestore");
-              _context2.next = 29;
+              _context2.next = 31;
               return tApp.start();
-            case 29:
-              getRunScheduler().restoreSnapshot(checkpoint.runSnapshot);
+            case 31:
               $restoredPageDom = TModelUtil.getPageDom();
-              TModelUtil.restoreDomState($restoredPageDom, checkpoint.domState);
-              _context2.next = 34;
+              TModelUtil.restoreMountedDom($restoredPageDom, checkpoint.domState);
+              _context2.next = 35;
               return TModelUtil.restoreScroll(checkpoint);
-            case 34:
-              _context2.next = 36;
+            case 35:
+              _context2.next = 37;
               return TModelUtil.restoreDomInteractionState($restoredPageDom, checkpoint.domState);
-            case 36:
-              return _context2.abrupt("return", true);
             case 37:
+              _context2.next = 39;
+              return Promise.all(models.map(function (tmodel) {
+                var _tmodel$restoreRuntim;
+                return (_tmodel$restoreRuntim = tmodel.restoreRuntimeDomDerivedState) === null || _tmodel$restoreRuntim === void 0 ? void 0 : _tmodel$restoreRuntim.call(tmodel);
+              }));
+            case 39:
+              this.hideGpuRestoreVisuals();
+              getRunScheduler().restoreSnapshot(checkpoint.runSnapshot);
+              return _context2.abrupt("return", true);
+            case 42:
             case "end":
               return _context2.stop();
           }
@@ -232,8 +261,8 @@ var StateManager = /*#__PURE__*/function () {
   }, {
     key: "connectRestoredDoms",
     value: function connectRestoredDoms(visibleModels, allModels) {
-      var newVisibles = DomInit.initCacheDoms(visibleModels);
-      var restoredWithDom = TUtil.uniqueTModels([].concat(_toConsumableArray(visibleModels), _toConsumableArray(newVisibles)));
+      var restoredDoms = DomInit.initCacheDoms(visibleModels);
+      var restoredWithDom = TUtil.uniqueTModels([].concat(_toConsumableArray(visibleModels), _toConsumableArray(restoredDoms)));
       this.normalizeRestoredModels(allModels);
       tApp.manager.visibleOidMap = {};
       var _iterator4 = _createForOfIteratorHelper(restoredWithDom),
@@ -241,7 +270,7 @@ var StateManager = /*#__PURE__*/function () {
       try {
         for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
           var tmodel = _step4.value;
-          if (tmodel.isIncluded()) {
+          if (tmodel.isIncluded() && tmodel.isVisible()) {
             tApp.manager.visibleOidMap[tmodel.oid] = tmodel;
           }
         }
@@ -250,11 +279,180 @@ var StateManager = /*#__PURE__*/function () {
       } finally {
         _iterator4.f();
       }
-      tApp.manager.activatePendingTargetsAfterDom(restoredWithDom, {
-        restoredDoneTargets: true
-      });
       return restoredWithDom;
     }
+  }, {
+    key: "getGpuVisualClipRect",
+    value: function getGpuVisualClipRect(element) {
+      var rect = element.getBoundingClientRect();
+      var left = Math.max(0, rect.left);
+      var top = Math.max(0, rect.top);
+      var right = Math.min(window.innerWidth, rect.right);
+      var bottom = Math.min(window.innerHeight, rect.bottom);
+      for (var parent = element.parentElement; parent; parent = parent.parentElement) {
+        var style = getComputedStyle(parent);
+        var parentRect = parent.getBoundingClientRect();
+        var clipsX = ["hidden", "clip", "auto", "scroll"].includes(style.overflowX);
+        var clipsY = ["hidden", "clip", "auto", "scroll"].includes(style.overflowY);
+        if (clipsX) {
+          left = Math.max(left, parentRect.left);
+          right = Math.min(right, parentRect.right);
+        }
+        if (clipsY) {
+          top = Math.max(top, parentRect.top);
+          bottom = Math.min(bottom, parentRect.bottom);
+        }
+        if (right <= left || bottom <= top) {
+          return {
+            left: left,
+            top: top,
+            width: 0,
+            height: 0
+          };
+        }
+      }
+      return {
+        left: left,
+        top: top,
+        width: right - left,
+        height: bottom - top
+      };
+    }
+  }, {
+    key: "captureGpuVisuals",
+    value: function () {
+      var _captureGpuVisuals = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
+        var visuals, _i, _Object$values, tmodel, renderer, canvas, rect, clipRect, bitmap;
+        return _regeneratorRuntime().wrap(function _callee3$(_context3) {
+          while (1) switch (_context3.prev = _context3.next) {
+            case 0:
+              visuals = {};
+              _i = 0, _Object$values = Object.values(App.tmodelIdMap);
+            case 2:
+              if (!(_i < _Object$values.length)) {
+                _context3.next = 21;
+                break;
+              }
+              tmodel = _Object$values[_i];
+              renderer = tmodel.particleRenderer;
+              canvas = renderer === null || renderer === void 0 ? void 0 : renderer.canvas;
+              if (!(!canvas || !tmodel.gpuChildrenEnabled)) {
+                _context3.next = 8;
+                break;
+              }
+              return _context3.abrupt("continue", 18);
+            case 8:
+              rect = canvas.getBoundingClientRect();
+              clipRect = this.getGpuVisualClipRect(canvas);
+              if (!(clipRect.width <= 0 || clipRect.height <= 0)) {
+                _context3.next = 12;
+                break;
+              }
+              return _context3.abrupt("continue", 18);
+            case 12:
+              _context3.next = 14;
+              return renderer.captureBitmap();
+            case 14:
+              bitmap = _context3.sent;
+              if (bitmap) {
+                _context3.next = 17;
+                break;
+              }
+              return _context3.abrupt("continue", 18);
+            case 17:
+              visuals[tmodel.oid] = {
+                bitmap: bitmap,
+                left: rect.left,
+                top: rect.top,
+                width: rect.width,
+                height: rect.height,
+                clipLeft: clipRect.left,
+                clipTop: clipRect.top,
+                clipWidth: clipRect.width,
+                clipHeight: clipRect.height
+              };
+            case 18:
+              _i++;
+              _context3.next = 2;
+              break;
+            case 21:
+              return _context3.abrupt("return", visuals);
+            case 22:
+            case "end":
+              return _context3.stop();
+          }
+        }, _callee3, this);
+      }));
+      function captureGpuVisuals() {
+        return _captureGpuVisuals.apply(this, arguments);
+      }
+      return captureGpuVisuals;
+    }()
+  }, {
+    key: "showGpuRestoreVisuals",
+    value: function showGpuRestoreVisuals(visuals) {
+      this.hideGpuRestoreVisuals();
+      if (!Object.keys(visuals || {}).length) {
+        return;
+      }
+      var overlay = document.createElement("div");
+      overlay.setAttribute("data-targetjs-gpu-restore-overlay", "true");
+      Object.assign(overlay.style, {
+        position: "fixed",
+        left: "0px",
+        top: "0px",
+        width: "100vw",
+        height: "100vh",
+        pointerEvents: "none",
+        zIndex: "2147483647"
+      });
+      for (var _i2 = 0, _Object$values2 = Object.values(visuals); _i2 < _Object$values2.length; _i2++) {
+        var visual = _Object$values2[_i2];
+        if (!(visual !== null && visual !== void 0 && visual.bitmap) || visual.clipWidth <= 0 || visual.clipHeight <= 0) {
+          continue;
+        }
+        var clip = document.createElement("div");
+        Object.assign(clip.style, {
+          position: "absolute",
+          left: "".concat(visual.clipLeft, "px"),
+          top: "".concat(visual.clipTop, "px"),
+          width: "".concat(visual.clipWidth, "px"),
+          height: "".concat(visual.clipHeight, "px"),
+          overflow: "hidden"
+        });
+        var preview = document.createElement("canvas");
+        preview.width = visual.bitmap.width;
+        preview.height = visual.bitmap.height;
+        Object.assign(preview.style, {
+          position: "absolute",
+          left: "".concat(visual.left - visual.clipLeft, "px"),
+          top: "".concat(visual.top - visual.clipTop, "px"),
+          width: "".concat(visual.width, "px"),
+          height: "".concat(visual.height, "px"),
+          display: "block"
+        });
+        preview.getContext("2d").drawImage(visual.bitmap, 0, 0);
+        clip.appendChild(preview);
+        overlay.appendChild(clip);
+      }
+      document.body.appendChild(overlay);
+      return overlay;
+    }
+  }, {
+    key: "hideGpuRestoreVisuals",
+    value: function hideGpuRestoreVisuals() {
+      var _document$querySelect;
+      (_document$querySelect = document.querySelector('[data-targetjs-gpu-restore-overlay="true"]')) === null || _document$querySelect === void 0 || _document$querySelect.remove();
+    }
+  }, {
+    key: "releaseGpuVisuals",
+    value: function releaseGpuVisuals(checkpoint) {
+      for (var _i3 = 0, _Object$values3 = Object.values((checkpoint === null || checkpoint === void 0 ? void 0 : checkpoint.gpuVisuals) || {}); _i3 < _Object$values3.length; _i3++) {
+        var _visual$bitmap, _visual$bitmap$close, _visual$bitmap2;
+        var visual = _Object$values3[_i3];
+        visual === null || visual === void 0 || (_visual$bitmap = visual.bitmap) === null || _visual$bitmap === void 0 || (_visual$bitmap$close = (_visual$bitmap2 = _visual$bitmap).close) === null || _visual$bitmap$close === void 0 || _visual$bitmap$close.call(_visual$bitmap2);
+      }
+    }
   }, {
     key: "has",
     value: function has() {
@@ -277,15 +475,21 @@ var StateManager = /*#__PURE__*/function () {
     key: "clear",
     value: function clear() {
       var key = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "default";
-      if (!this.stateCheckpoints[key]) {
+      var checkpoint = this.stateCheckpoints[key];
+      if (!checkpoint) {
         return false;
       }
+      this.releaseGpuVisuals(checkpoint);
       delete this.stateCheckpoints[key];
       return true;
     }
   }, {
     key: "clearAll",
     value: function clearAll() {
+      for (var _i4 = 0, _Object$values4 = Object.values(this.stateCheckpoints); _i4 < _Object$values4.length; _i4++) {
+        var checkpoint = _Object$values4[_i4];
+        this.releaseGpuVisuals(checkpoint);
+      }
       this.stateCheckpoints = {};
     }
   }]);