targetj 1.0.260 → 1.1.1

package/build/StateManager.js

@@ -29,6 +29,7 @@ import { $Dom } from "./$Dom.js";
 import { TargetUtil } from "./TargetUtil.js";
 import { TModelUtil } from "./TModelUtil.js";
 import { TModel } from "./TModel.js";
+import { ParticleTModel } from "./ParticleTModel.js";
 import { StateUtil } from "./StateUtil.js";
 /**
  * It enables storing and restoring state.
@@ -37,6 +38,7 @@ var StateManager = /*#__PURE__*/function () {
   function StateManager() {
     _classCallCheck(this, StateManager);
     this.stateCheckpoints = {};
+    this.restoreQueue = Promise.resolve();
   }
   return _createClass(StateManager, [{
     key: "store",
@@ -46,6 +48,7 @@ var StateManager = /*#__PURE__*/function () {
           runSnapshot,
           $pageDom,
           checkpoint,
+          template,
           _args = arguments;
         return _regeneratorRuntime().wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
@@ -69,6 +72,10 @@ var StateManager = /*#__PURE__*/function () {
               return this.captureGpuVisuals();
             case 17:
               _context.t11 = _context.sent;
+              _context.next = 20;
+              return this.captureExplodeSources();
+            case 20:
+              _context.t12 = _context.sent;
               checkpoint = {
                 key: _context.t0,
                 capturedAt: _context.t1,
@@ -81,12 +88,16 @@ var StateManager = /*#__PURE__*/function () {
                 scrollLeft: _context.t8,
                 scrollTop: _context.t9,
                 runSnapshot: _context.t10,
-                gpuVisuals: _context.t11
+                gpuVisuals: _context.t11,
+                explodeSources: _context.t12
               };
-              this.releaseGpuVisuals(this.stateCheckpoints[key]);
+              template = document.createElement("template");
+              template.innerHTML = checkpoint.html;
+              checkpoint.domTemplate = template;
+              this.releaseGpuResources(this.stateCheckpoints[key]);
               this.stateCheckpoints[key] = checkpoint;
               return _context.abrupt("return", checkpoint);
-            case 22:
+            case 28:
             case "end":
               return _context.stop();
           }
@@ -99,8 +110,21 @@ var StateManager = /*#__PURE__*/function () {
     }()
   }, {
     key: "restore",
+    value: function restore() {
+      var _this = this;
+      var key = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "default";
+      var promise = this.restoreQueue.then(function () {
+        return _this.restoreCheckpoint(key);
+      });
+      this.restoreQueue = promise.catch(function (error) {
+        console.error("State restoration failed:", error);
+      });
+      return promise;
+    }
+  }, {
+    key: "restoreCheckpoint",
     value: function () {
-      var _restore = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
+      var _restoreCheckpoint = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
         var key,
           checkpoint,
           timeOffset,
@@ -109,9 +133,12 @@ var StateManager = /*#__PURE__*/function () {
           tmodelIdMap,
           models,
           $pageDom,
+          fragment,
           visibleModels,
           restoredWithDom,
           $restoredPageDom,
+          gpuModels,
+          index,
           _args2 = arguments;
         return _regeneratorRuntime().wrap(function _callee2$(_context2) {
           while (1) switch (_context2.prev = _context2.next) {
@@ -128,11 +155,16 @@ var StateManager = /*#__PURE__*/function () {
             case 6:
               getLoader().clear();
               _context2.next = 9;
-              return tApp.stop();
+              return tApp.stop({
+                discardState: true
+              });
             case 9:
               getLocationManager().cancelCurrentCalculation();
               _context2.next = 12;
-              return tApp.reset();
+              return tApp.reset({
+                discardState: true,
+                skipSchedulerReset: true
+              });
             case 12:
               App.oids = {};
               App.tmodelIdMap = {};
@@ -145,8 +177,9 @@ var StateManager = /*#__PURE__*/function () {
               App.tmodelIdMap = tmodelIdMap;
               getLoader().restoreRuntimeSnapshot(checkpoint.loaderSnapshot, tmodelIdMap);
               $pageDom = TModelUtil.getPageDom();
-              $pageDom.innerHTML(checkpoint.html);
-              TModelUtil.restoreDomState($pageDom, checkpoint.domState);
+              fragment = checkpoint.domTemplate.content.cloneNode(true);
+              $pageDom.getElement().replaceChildren(fragment);
+              TModelUtil.restoreMountedDom($pageDom, checkpoint.domState);
               this.showGpuRestoreVisuals(checkpoint.gpuVisuals);
               tApp.tRoot.$dom = TModelUtil.getRootDom();
               visibleModels = checkpoint.visibleOids.map(function (oid) {
@@ -157,36 +190,43 @@ var StateManager = /*#__PURE__*/function () {
                 restoredDoneTargets: true
               });
               tApp.tRoot.markLayoutDirty("checkpointRestore");
-              _context2.next = 31;
-              return tApp.start();
-            case 31:
+              _context2.next = 32;
+              return tApp.start({
+                skipSchedulerReset: true
+              });
+            case 32:
               $restoredPageDom = TModelUtil.getPageDom();
-              TModelUtil.restoreDomState($restoredPageDom, checkpoint.domState);
-              _context2.next = 35;
+              TModelUtil.restoreMountedDom($restoredPageDom, checkpoint.domState);
+              _context2.next = 36;
               return TModelUtil.restoreScroll(checkpoint);
-            case 35:
-              _context2.next = 37;
+            case 36:
+              _context2.next = 38;
               return TModelUtil.restoreDomInteractionState($restoredPageDom, checkpoint.domState);
-            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 38:
+              gpuModels = models.filter(function (tmodel) {
+                return tmodel instanceof ParticleTModel;
+              });
+              _context2.next = 41;
+              return Promise.all(gpuModels.map(function (tmodel) {
+                return tmodel.restoreRuntimeDomDerivedState(checkpoint.explodeSources[tmodel.oid]);
               }));
-            case 39:
+            case 41:
+              for (index = 0; index < gpuModels.length; index++) {
+                gpuModels[index].particleRuntime.resumeRestored();
+              }
               this.hideGpuRestoreVisuals();
               getRunScheduler().restoreSnapshot(checkpoint.runSnapshot);
               return _context2.abrupt("return", true);
-            case 42:
+            case 45:
             case "end":
               return _context2.stop();
           }
         }, _callee2, this);
       }));
-      function restore() {
-        return _restore.apply(this, arguments);
+      function restoreCheckpoint() {
+        return _restoreCheckpoint.apply(this, arguments);
       }
-      return restore;
+      return restoreCheckpoint;
     }()
   }, {
     key: "syncAnimationsForCheckpoint",
@@ -261,8 +301,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),
@@ -270,7 +310,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;
           }
         }
@@ -281,11 +321,48 @@ var StateManager = /*#__PURE__*/function () {
       }
       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, bitmap;
+        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:
@@ -293,7 +370,7 @@ var StateManager = /*#__PURE__*/function () {
               _i = 0, _Object$values = Object.values(App.tmodelIdMap);
             case 2:
               if (!(_i < _Object$values.length)) {
-                _context3.next = 18;
+                _context3.next = 21;
                 break;
               }
               tmodel = _Object$values[_i];
@@ -303,43 +380,101 @@ var StateManager = /*#__PURE__*/function () {
                 _context3.next = 8;
                 break;
               }
-              return _context3.abrupt("continue", 15);
+              return _context3.abrupt("continue", 18);
             case 8:
               rect = canvas.getBoundingClientRect();
-              _context3.next = 11;
+              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 11:
+            case 14:
               bitmap = _context3.sent;
               if (bitmap) {
-                _context3.next = 14;
+                _context3.next = 17;
                 break;
               }
-              return _context3.abrupt("continue", 15);
-            case 14:
+              return _context3.abrupt("continue", 18);
+            case 17:
               visuals[tmodel.oid] = {
                 bitmap: bitmap,
                 left: rect.left,
                 top: rect.top,
                 width: rect.width,
-                height: rect.height
+                height: rect.height,
+                clipLeft: clipRect.left,
+                clipTop: clipRect.top,
+                clipWidth: clipRect.width,
+                clipHeight: clipRect.height
               };
-            case 15:
+            case 18:
               _i++;
               _context3.next = 2;
               break;
-            case 18:
+            case 21:
               return _context3.abrupt("return", visuals);
-            case 19:
+            case 22:
             case "end":
               return _context3.stop();
           }
-        }, _callee3);
+        }, _callee3, this);
       }));
       function captureGpuVisuals() {
         return _captureGpuVisuals.apply(this, arguments);
       }
       return captureGpuVisuals;
     }()
+  }, {
+    key: "captureExplodeSources",
+    value: function () {
+      var _captureExplodeSources = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4() {
+        var sources, _i2, _Object$values2, _renderer$captureExpl, tmodel, renderer, source;
+        return _regeneratorRuntime().wrap(function _callee4$(_context4) {
+          while (1) switch (_context4.prev = _context4.next) {
+            case 0:
+              sources = {};
+              _i2 = 0, _Object$values2 = Object.values(App.tmodelIdMap);
+            case 2:
+              if (!(_i2 < _Object$values2.length)) {
+                _context4.next = 14;
+                break;
+              }
+              tmodel = _Object$values2[_i2];
+              renderer = tmodel.particleRenderer;
+              if (!(!renderer || !tmodel.explodeChildrenState)) {
+                _context4.next = 7;
+                break;
+              }
+              return _context4.abrupt("continue", 11);
+            case 7:
+              _context4.next = 9;
+              return (_renderer$captureExpl = renderer.captureExplodeSourceBitmap) === null || _renderer$captureExpl === void 0 ? void 0 : _renderer$captureExpl.call(renderer);
+            case 9:
+              source = _context4.sent;
+              if (source) {
+                sources[tmodel.oid] = source;
+              }
+            case 11:
+              _i2++;
+              _context4.next = 2;
+              break;
+            case 14:
+              return _context4.abrupt("return", sources);
+            case 15:
+            case "end":
+              return _context4.stop();
+          }
+        }, _callee4);
+      }));
+      function captureExplodeSources() {
+        return _captureExplodeSources.apply(this, arguments);
+      }
+      return captureExplodeSources;
+    }()
   }, {
     key: "showGpuRestoreVisuals",
     value: function showGpuRestoreVisuals(visuals) {
@@ -358,25 +493,34 @@ var StateManager = /*#__PURE__*/function () {
         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)) {
+      for (var _i3 = 0, _Object$values3 = Object.values(visuals); _i3 < _Object$values3.length; _i3++) {
+        var visual = _Object$values3[_i3];
+        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, "px"),
-          top: "".concat(visual.top, "px"),
+          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"
         });
-        var context = preview.getContext("2d");
-        context.drawImage(visual.bitmap, 0, 0);
-        overlay.appendChild(preview);
+        preview.getContext("2d").drawImage(visual.bitmap, 0, 0);
+        clip.appendChild(preview);
+        overlay.appendChild(clip);
       }
       document.body.appendChild(overlay);
       return overlay;
@@ -388,13 +532,18 @@ var StateManager = /*#__PURE__*/function () {
       (_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++) {
+    key: "releaseGpuResources",
+    value: function releaseGpuResources(checkpoint) {
+      for (var _i4 = 0, _Object$values4 = Object.values((checkpoint === null || checkpoint === void 0 ? void 0 : checkpoint.gpuVisuals) || {}); _i4 < _Object$values4.length; _i4++) {
         var _visual$bitmap, _visual$bitmap$close, _visual$bitmap2;
-        var visual = _Object$values3[_i3];
+        var visual = _Object$values4[_i4];
         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);
       }
+      for (var _i5 = 0, _Object$values5 = Object.values((checkpoint === null || checkpoint === void 0 ? void 0 : checkpoint.explodeSources) || {}); _i5 < _Object$values5.length; _i5++) {
+        var _source$close;
+        var source = _Object$values5[_i5];
+        source === null || source === void 0 || (_source$close = source.close) === null || _source$close === void 0 || _source$close.call(source);
+      }
     }
   }, {
     key: "has",
@@ -422,16 +571,16 @@ var StateManager = /*#__PURE__*/function () {
       if (!checkpoint) {
         return false;
       }
-      this.releaseGpuVisuals(checkpoint);
+      this.releaseGpuResources(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);
+      for (var _i6 = 0, _Object$values6 = Object.values(this.stateCheckpoints); _i6 < _Object$values6.length; _i6++) {
+        var checkpoint = _Object$values6[_i6];
+        this.releaseGpuResources(checkpoint);
       }
       this.stateCheckpoints = {};
     }