targetj 1.0.258 → 1.0.260

package/build/ParticleUtil.js

@@ -0,0 +1,317 @@
+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 { TargetData } from "./TargetData.js";
+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: "isGpuChildrenTarget",
+    value: function isGpuChildrenTarget(key) {
+      return ParticleUtil.gpuChildrenTargets.has(TargetUtil.getTargetName(key));
+    }
+  }, {
+    key: "getGpuRenderTargetName",
+    value: function getGpuRenderTargetName(key) {
+      var cleanKey = TargetUtil.getTargetName(key);
+      return ParticleUtil.gpuRenderAliases[cleanKey] || cleanKey;
+    }
+  }, {
+    key: "isGpuRenderTarget",
+    value: function isGpuRenderTarget(key) {
+      return ParticleUtil.gpuRenderTargets.has(ParticleUtil.getGpuRenderTargetName(key));
+    }
+  }, {
+    key: "isIgnoredGpuStyleTarget",
+    value: function isIgnoredGpuStyleTarget(key) {
+      var cleanKey = TargetUtil.getTargetName(key);
+      return TargetData.styleSet.has(cleanKey) && !ParticleUtil.isGpuRenderTarget(cleanKey);
+    }
+  }, {
+    key: "affectsChildLayout",
+    value: function affectsChildLayout(key) {
+      return ParticleUtil.childLayoutTargets.has(ParticleUtil.getGpuRenderTargetName(key));
+    }
+  }, {
+    key: "getGpuTargetMode",
+    value: function getGpuTargetMode(key) {
+      if (key.endsWith("$$")) {
+        return "deferred";
+      }
+      if (key.endsWith("$")) {
+        return "reactive";
+      }
+      return "immediate";
+    }
+  }, {
+    key: "classifyGpuChildTarget",
+    value: function classifyGpuChildTarget(key, value) {
+      /*
+       * Interval is a property of the target definition, not the target name.
+       * Check it before render/style classification.
+       */
+      if (TargetParser.isIntervalTarget(value)) {
+        return "interval";
+      }
+      if (ParticleUtil.isGpuRenderTarget(key)) {
+        return "render";
+      }
+      if (ParticleUtil.isIgnoredGpuStyleTarget(key)) {
+        return "ignoredStyle";
+      }
+      return "runtime";
+    }
+  }, {
+    key: "isTransientRuntimeField",
+    value: function isTransientRuntimeField(key) {
+      return ParticleUtil.transientRuntimeFields.has(key);
+    }
+  }, {
+    key: "isFunctionBasedGpuValue",
+    value: function isFunctionBasedGpuValue(value) {
+      if (typeof value === "function") {
+        return true;
+      }
+      return TargetParser.isTargetSpecObject(value) && typeof value.value === "function";
+    }
+  }, {
+    key: "resolveGpuRenderValue",
+    value: function resolveGpuRenderValue(value, child) {
+      if (typeof value === "function") {
+        return value.call(child);
+      }
+      if (!TargetParser.isTargetSpecObject(value)) {
+        return value;
+      }
+      var resolved = _objectSpread({}, value);
+      if (typeof resolved.value === "function") {
+        resolved.value = resolved.value.call(child);
+      }
+      return resolved;
+    }
+  }, {
+    key: "getGpuInitialRenderValue",
+    value: function getGpuInitialRenderValue(value) {
+      if (!TargetParser.isTargetSpecObject(value)) {
+        return value;
+      }
+      if (Array.isArray(value.value)) {
+        return value.value[0];
+      }
+      return value.value;
+    }
+  }, {
+    key: "setGpuInitialChildValue",
+    value: function setGpuInitialChildValue(child, key, value) {
+      if (!child || !TUtil.isDefined(value)) {
+        return;
+      }
+      child.val(key, value);
+    }
+  }, {
+    key: "createGpuRuntimeTarget",
+    value: function createGpuRuntimeTarget(key, value) {
+      return {
+        key: key,
+        targetName: ParticleUtil.getGpuRenderTargetName(key),
+        kind: ParticleUtil.classifyGpuChildTarget(key, value),
+        mode: ParticleUtil.getGpuTargetMode(key),
+        target: TargetParser.isTargetSpecObject(value) ? _objectSpread({}, value) : {
+          value: value
+        }
+      };
+    }
+  }, {
+    key: "requiresGpuChildRuntime",
+    value: function requiresGpuChildRuntime(key, value) {
+      var mode = ParticleUtil.getGpuTargetMode(key);
+      var kind = ParticleUtil.classifyGpuChildTarget(key, value);
+      if (kind === "interval" || kind === "runtime") {
+        return true;
+      }
+      if (mode !== "immediate") {
+        return true;
+      }
+      if (!ParticleUtil.isGpuRenderTarget(key)) {
+        return false;
+      }
+
+      /*
+       * A plain render function such as x() or backgroundColor() can simply
+       * be resolved immediately. It does not require an animation runtime.
+       */
+      if (typeof value === "function") {
+        return false;
+      }
+      if (!TargetParser.isTargetSpecObject(value)) {
+        return false;
+      }
+
+      /*
+       * Simple GPU transitions such as:
+       *
+       * x: {
+       *     value: [0, 500],
+       *     steps: 100
+       * }
+       *
+       * can continue using the existing bulk GPU transition path.
+       *
+       * Targets with their own execution timing or function-valued value
+       * require the lightweight child runtime.
+       */
+      return typeof value.value === "function" || TUtil.isDefined(value.interval) || TUtil.isDefined(value.easing) || TUtil.isDefined(value.cycles) || TUtil.isDefined(value.loop);
+    }
+  }, {
+    key: "compileGpuChildDefinition",
+    value: function compileGpuChildDefinition(child, definition) {
+      var renderDefinition = {};
+      var runtimeTargets = [];
+      var ignoredStyles = [];
+      var layoutFunctions = [];
+      var entries = Object.entries(definition).map(function (_ref) {
+        var _ref2 = _slicedToArray(_ref, 2),
+          key = _ref2[0],
+          value = _ref2[1];
+        return {
+          key: key,
+          value: value,
+          kind: ParticleUtil.classifyGpuChildTarget(key, value),
+          mode: ParticleUtil.getGpuTargetMode(key),
+          targetName: ParticleUtil.getGpuRenderTargetName(key),
+          requiresRuntime: ParticleUtil.requiresGpuChildRuntime(key, value)
+        };
+      });
+
+      /*
+       * Resolve ordinary immediate non-function render values first.
+       *
+       * This seeds width/height/etc. before x() and other functions execute.
+       */
+      var _iterator = _createForOfIteratorHelper(entries),
+        _step;
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var entry = _step.value;
+          if (entry.kind !== "render" || entry.mode !== "immediate" || entry.requiresRuntime || ParticleUtil.isFunctionBasedGpuValue(entry.value)) {
+            continue;
+          }
+          var resolved = ParticleUtil.resolveGpuRenderValue(entry.value, child);
+          renderDefinition[entry.targetName] = resolved;
+          ParticleUtil.setGpuInitialChildValue(child, entry.targetName, ParticleUtil.getGpuInitialRenderValue(resolved));
+        }
+
+        /*
+         * Resolve plain immediate function-valued render targets after
+         * static dimensions have been initialized.
+         *
+         * Keep layout functions so they can be recalculated after the
+         * parent's first layout.
+         */
+      } 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.kind !== "render" || _entry.mode !== "immediate" || _entry.requiresRuntime || !ParticleUtil.isFunctionBasedGpuValue(_entry.value)) {
+            continue;
+          }
+          var _resolved = ParticleUtil.resolveGpuRenderValue(_entry.value, child);
+          renderDefinition[_entry.targetName] = _resolved;
+          ParticleUtil.setGpuInitialChildValue(child, _entry.targetName, ParticleUtil.getGpuInitialRenderValue(_resolved));
+          if (ParticleUtil.affectsChildLayout(_entry.targetName)) {
+            layoutFunctions.push({
+              key: _entry.key,
+              targetName: _entry.targetName,
+              value: _entry.value
+            });
+          }
+        }
+
+        /*
+         * Preserve runtime targets in their original code order.
+         */
+      } 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.kind === "ignoredStyle") {
+            ignoredStyles.push(_entry2.key);
+            continue;
+          }
+          if (!_entry2.requiresRuntime) {
+            continue;
+          }
+          runtimeTargets.push(ParticleUtil.createGpuRuntimeTarget(_entry2.key, _entry2.value));
+
+          /*
+           * An immediate animated render target needs an initial GPU-visible
+           * value, but the animation itself belongs to childRuntimePrograms.
+           *
+           * Example:
+           *
+           * y: {
+           *     value() { return [0, 500]; },
+           *     steps: 30,
+           *     interval: 20
+           * }
+           *
+           * renderDefinition gets y: 0.
+           */
+          if (_entry2.kind === "render" && _entry2.mode === "immediate") {
+            var _resolved2 = ParticleUtil.resolveGpuRenderValue(_entry2.value, child);
+            var initialValue = ParticleUtil.getGpuInitialRenderValue(_resolved2);
+            renderDefinition[_entry2.targetName] = initialValue;
+            ParticleUtil.setGpuInitialChildValue(child, _entry2.targetName, initialValue);
+          }
+        }
+      } catch (err) {
+        _iterator3.e(err);
+      } finally {
+        _iterator3.f();
+      }
+      return {
+        renderDefinition: renderDefinition,
+        runtimeTargets: runtimeTargets,
+        ignoredStyles: ignoredStyles,
+        layoutFunctions: layoutFunctions
+      };
+    }
+  }]);
+}();
+_defineProperty(ParticleUtil, "gpuRenderTargets", new Set(["x", "y", "width", "height", "borderRadius", "backgroundColor", "rotate"]));
+_defineProperty(ParticleUtil, "gpuRenderAliases", {
+  background: "backgroundColor"
+});
+_defineProperty(ParticleUtil, "childLayoutTargets", new Set(["x", "y", "width", "height"]));
+_defineProperty(ParticleUtil, "gpuChildrenTargets", new Set(["addChildren", "children"]));
+_defineProperty(ParticleUtil, "transientRuntimeFields", new Set(["particleRenderer", "childHandles", "particleValuesDirty", "particleRenderRequested", "pendingGpuChildren", "layoutEpoch", "completeLayoutEpoch", "completeChildrenLayoutState", "layoutCompleteWaiters", "particleSyncPromise", "restoringParticleRuntime"]));
+export { ParticleUtil };

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) {
@@ -129,26 +147,37 @@ var StateManager = /*#__PURE__*/function () {
               $pageDom = TModelUtil.getPageDom();
               $pageDom.innerHTML(checkpoint.html);
               TModelUtil.restoreDomState($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;
+              _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();
           }
@@ -250,11 +279,123 @@ var StateManager = /*#__PURE__*/function () {
       } finally {
         _iterator4.f();
       }
-      tApp.manager.activatePendingTargetsAfterDom(restoredWithDom, {
-        restoredDoneTargets: true
-      });
       return restoredWithDom;
     }
+  }, {
+    key: "captureGpuVisuals",
+    value: function () {
+      var _captureGpuVisuals = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
+        var visuals, _i, _Object$values, tmodel, renderer, canvas, rect, 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 = 18;
+                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", 15);
+            case 8:
+              rect = canvas.getBoundingClientRect();
+              _context3.next = 11;
+              return renderer.captureBitmap();
+            case 11:
+              bitmap = _context3.sent;
+              if (bitmap) {
+                _context3.next = 14;
+                break;
+              }
+              return _context3.abrupt("continue", 15);
+            case 14:
+              visuals[tmodel.oid] = {
+                bitmap: bitmap,
+                left: rect.left,
+                top: rect.top,
+                width: rect.width,
+                height: rect.height
+              };
+            case 15:
+              _i++;
+              _context3.next = 2;
+              break;
+            case 18:
+              return _context3.abrupt("return", visuals);
+            case 19:
+            case "end":
+              return _context3.stop();
+          }
+        }, _callee3);
+      }));
+      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)) {
+          continue;
+        }
+        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, "px"),
+          top: "".concat(visual.top, "px"),
+          width: "".concat(visual.width, "px"),
+          height: "".concat(visual.height, "px"),
+          display: "block"
+        });
+        var context = preview.getContext("2d");
+        context.drawImage(visual.bitmap, 0, 0);
+        overlay.appendChild(preview);
+      }
+      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 +418,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 = {};
     }
   }]);